@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

:root {
    --primary-color: #60489d;
    --secondary-color: #ffe5a4;
    --blue-color: #4396d2;
    --surface-color: #fefefe;
    --purple-another: #5e4572;
    --dark-black: #232323;
    --dark1-color: #3e3e3e;
    --dark2-color: #424242;
    --dark3-color: #474747;
    --gray-color: #787878;
    --gray1: #e4e4e4;
    --gray2: #ebebeb;
    --gray3: #f9f9f9;
    --green-color: #e2f7c8;
    --dark-green: #61aa79;
    --trans-dur: 0.3s;
    --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow-x: hidden !important;
    font-family: "Tajawal", sans-serif;
    position: relative;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
p {
    margin-bottom: 0;
}
input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* =================== Start Custom FrameWork ===================== */
.bg-second-color {
    background: var(--secondary-color);
}
.my-button,
.secondary-button {
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    transition: background var(--trans-dur) var(--trans-timing);
}
.main-button,
.secondary-button:hover {
    background: var(--surface-color);
    color: var(--primary-color);
}
.main-button:hover,
.secondary-button {
    background: var(--primary-color);
    color: var(--surface-color);
}
.section-title {
    font-weight: 800;
    font-size: 32px;
    line-height: 65px;
    text-align: center;
    color: var(--primary-color);
}

/* =================== End Custom FrameWork ===================== */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}
.loading.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.loading img {
    width: 200px;
    height: 200px;
}

/* =================== Start Navbar  ===================== */
nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
nav.navbar .navbar-nav .nav-link {
    color: var(--dark-black);
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    border-bottom: 2px solid transparent;
}
nav.navbar .navbar-nav .nav-link.active {
    color: var(--primary-color);
    font-weight: 700;
    border-color: var(--primary-color);
}
nav.navbar .navbar-toggler {
    background: var(--primary-color);
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0.5rem 0.75rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg width='30' height='23' viewBox='0 0 30 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.89567 0.708496C1.48679 0.708496 1.09467 0.870922 0.805547 1.16004C0.516429 1.44916 0.354004 1.84129 0.354004 2.25016C0.354004 2.65904 0.516429 3.05117 0.805547 3.34029C1.09467 3.6294 1.48679 3.79183 1.89567 3.79183H28.104C28.5129 3.79183 28.905 3.6294 29.1941 3.34029C29.4832 3.05117 29.6457 2.65904 29.6457 2.25016C29.6457 1.84129 29.4832 1.44916 29.1941 1.16004C28.905 0.870922 28.5129 0.708496 28.104 0.708496H1.89567ZM0.354004 11.5002C0.354004 11.0913 0.516429 10.6992 0.805547 10.41C1.09467 10.1209 1.48679 9.9585 1.89567 9.9585H28.104C28.5129 9.9585 28.905 10.1209 29.1941 10.41C29.4832 10.6992 29.6457 11.0913 29.6457 11.5002C29.6457 11.909 29.4832 12.3012 29.1941 12.5903C28.905 12.8794 28.5129 13.0418 28.104 13.0418H1.89567C1.48679 13.0418 1.09467 12.8794 0.805547 12.5903C0.516429 12.3012 0.354004 11.909 0.354004 11.5002ZM0.354004 20.7517C0.354004 20.3428 0.516429 19.9507 0.805547 19.6616C1.09467 19.3725 1.48679 19.21 1.89567 19.21H28.104C28.5129 19.21 28.905 19.3725 29.1941 19.6616C29.4832 19.9507 29.6457 20.3428 29.6457 20.7517C29.6457 21.1606 29.4832 21.5527 29.1941 21.8418C28.905 22.1309 28.5129 22.2934 28.104 22.2934H1.89567C1.48679 22.2934 1.09467 22.1309 0.805547 21.8418C0.516429 21.5527 0.354004 21.1606 0.354004 20.7517Z' fill='%23FEFEFE'/%3E%3C/svg%3E");
}
/* Responsive */
@media (max-width: 576.98px) {
    nav.navbar {
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 992px) {
    nav.navbar .offcanvas {
        bottom: inherit !important;
    }
    nav.navbar .offcanvas.offcanvas-start {
        border-radius: 0 1rem 1rem 0;
    }
    nav.navbar .offcanvas.offcanvas-end {
        border-radius: 1rem 0 0 1rem;
    }
    nav.navbar .offcanvas-header {
        justify-content: space-between;
        border-bottom: 1px solid #ebebebe5;
    }
    nav.navbar .offcanvas-header button {
        margin: 0 !important;
    }
    nav.navbar .navbar-nav .nav-link {
        text-align: inherit;
        border: none;
    }
    nav.navbar .offcanvas ul + div {
        margin-top: 2rem;
        flex-direction: column-reverse;
        gap: 1rem;
    }
    nav.navbar .offcanvas .main-button {
        background: var(--secondary-color);
        text-align: center;
    }
    nav.navbar .offcanvas .main-button:hover {
        background: var(--primary-color);
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    nav.navbar .main-button,
    nav.navbar .navbar-nav .nav-link {
        font-size: 0.8rem;
    }
}
/* =================== End Navbar  ===================== */

/* =================== Start Hero Section  ===================== */
.hero {
    min-width: 100vw;
    min-height: 100vh;
    padding-top: 150px;
    background-color: var(--purple-another);
}
.hero-bg img {
    object-fit: cover;
    z-index: 0;
    opacity: 1;
}
.col-blur-wrapper {
    z-index: 1;
}
.col-blur {
    transform-origin: bottom center;
}
.col-blur:first-child {
    transform: rotate(-30deg);
}
.col-blur:last-child {
    transform: rotate(30deg);
}
.hero-title {
    font-size: clamp(22px, 3vw, 49px);
    line-height: 1.5;
    color: var(--gray3);
    font-weight: 800;
    line-height: 65px;
    text-align: center;
}
.hero-subtitle {
    font-size: clamp(16px, 2vw, 23px);
    max-width: 823px;
    margin: auto;
    color: var(--gray2);
    font-weight: 500;
    direction: rtl;
    line-height: 37px;
}
.hero-button {
    max-width: 315px;
    width: 100%;
    border-radius: 65px;
    border: 1px solid #e6cd55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-inline: auto;
}
.hero-button div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--trans-dur) var(--trans-timing);
}
.hero-button span {
    font-weight: 700;
    font-size: 23px;
    flex-grow: 1;
}
.hero-button:hover div {
    color: var(--primary-color);
    background: var(--surface-color);
}
.compass {
    position: absolute;
    bottom: 50px;
    right: 100px;
}
.bigStar-left,
.bigStar-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    bottom: 0px;
    transform: rotate(30deg) translate(-40px, 50px);
}
.bigStar-left {
    transform: rotate(140deg) translate(50px, 20px);
    transform-origin: right bottom;
}
.stars-left {
    left: 50%;
    transform: translateX(calc(-50% - 300px)) scaleX(-1);
}
.stars-right {
    transform: translateX(calc(-50% + 300px));
    left: 50%;
}
.character:first-child {
    transform: translate(70px, 20px);
}
.character:last-child {
    transform: translate(-70px, 20px);
}
.character svg {
    transform: translateY(30px);
}
/* Responsive */
@media (max-width: 992px) {
    .compass {
        display: none;
    }
    .bigStar-left,
    .bigStar-right {
        bottom: -50px;
    }
    .stars-right,
    .stars-left {
        width: 300px;
        bottom: 30px !important;
    }
    .stars-left {
        transform: translateX(calc(-50% - 240px)) scaleX(-1);
    }
    .stars-right {
        transform: translateX(calc(-50% + 240px));
    }
}
@media (min-width: 1199.98px) {
    .bigStar-left,
    .bigStar-right {
        bottom: -40px;
    }
}

/* =================== End Hero Section  ===================== */

/* =================== Start Features Section  ===================== */
.feature-box {
    border-radius: 15px;
    background-color: rgba(244, 244, 244, 0.6);
    padding: 1rem 0.5rem;
    height: 100%;
    position: relative;
}
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-content h4 {
    font-weight: 500;
    font-size: 26px;
    line-height: 28px;
    margin-bottom: 0.5rem;
}
.feature-content p {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #6b6b6b;
}
.secondEllipse,
.mainEllipse {
    position: absolute;
    right: -30px;
}
.mainEllipse {
    top: 100px;
}
.secondEllipse {
    bottom: 30px;
}
/* =================== End Features Section  ===================== */

/* =================== Start How Section  ===================== */
.howHandel {
    background-image: url("/modules/theme/images/How/Blocks.svg");
    position: relative;
}
.howHandel .row {
    margin-top: 11rem;
}
.howHandel .row > div:first-child,
.howHandel .row > div:last-child {
    transform: translateY(-10rem);
}
.how-title {
    position: relative;
}
.how-title::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 120px;
    height: 20px;
    background-image: url("/modules/theme/images/How/lines.svg");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.how-box {
    position: relative;
}
.how-box .star-img {
    position: absolute;
    top: -50px;
    right: -2rem;
    width: 200px;
    height: 200px;
    transform: rotate(296deg);
}
.how-box .stars-img {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
}
.how-icon {
    margin-bottom: 3rem;
}
.how_icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.how_icon-img {
    margin: auto;
    position: relative;
    z-index: 2;
}
.how-content h4 {
    font-weight: 500;
    font-size: 23px;
    line-height: 32px;
    color: var(--dark3-color);
    max-width: 222px;
    width: 100%;
    margin: auto;
}
.howHandel .icons-bg {
    bottom: 0;
    right: 0;
}
.howHandel .icons-bg img:first-child {
    transform: translate(-14rem, -4rem);
}
@media (max-width: 992px) {
    .howHandel .row {
        margin-top: 4rem;
    }
    .howHandel .row > div:first-child,
    .howHandel .row > div:last-child {
        transform: translateY(0rem);
    }
    .howHandel .icons-bg {
        display: none;
    }
    .how-box .stars-img {
        position: absolute;
        top: -2rem;
        bottom: auto;
        right: auto;
        left: 0;
    }
}
/* =================== End How Section  ===================== */

/* =================== Start contentAcademy Section  ===================== */
.contentAcademy-content {
    background-color: var(--purple-another);
    padding: 1rem 2rem 2rem;
    position: relative;
    border-radius: 30px;
}
.content-bg img {
    object-fit: cover;
    z-index: 0;
    opacity: 0.2;
}
.contentAcademy-content .section-title {
    color: var(--secondary-color);
}
.contentAcademy-content .section-description {
    font-weight: 500;
    font-size: 19px;
    line-height: 27px;
    text-align: center;
    color: var(--gray2);
    max-width: 620px;
    width: 100%;
    margin: auto;
}
.contentAcademy-content .content-box {
    height: 100%;
    background-color: var(--surface-color);
    border-radius: 10px;
    position: relative;
    z-index: 2;
    padding: 1rem;
}
.contentAcademy-content .content-box .content-img img {
    max-width: 270px;
    height: 200px;
    width: 100%;
    object-fit: contain;
}
.contentAcademy-content .content-box .content-title h4 {
    max-width: 220px;
    width: 100%;
    font-weight: 800;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    color: var(--purple-another);
    margin: auto;
}
.contentAcademy-content .icons-bg img {
    position: absolute;
}
.contentAcademy-content .star-img {
    top: 2rem;
    right: 4rem;
}
.contentAcademy-content .harts-img {
    top: 3rem;
    right: 5rem;
}
.contentAcademy-content .fire-img {
    bottom: 0.5rem;
    left: 5rem;
}
@media (max-width: 576.98px) {
    .contentAcademy-content .icons-bg {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .contentAcademy-content .harts-img {
        top: 0.5rem;
        right: 2rem;
    }
    .contentAcademy-content .star-img {
        top: 2rem;
        right: auto;
        left: 2rem;
    }
}
/* =================== End contentAcademy Section  ===================== */

/* =================== Start FAQ Section  ===================== */
.faq {
    position: relative;
}
.faq-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.faq-title .section-title {
    font-weight: 700;
    font-size: 55px;
    line-height: 76px;
    text-align: start;
    max-width: 330px;
}
.faq ul li {
    margin-block: 0.75rem;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    text-align: start;
}
.faq ul li:first-child {
    color: var(--secondary-color);
}
.faq .accordion-item {
    background: var(--gray3);
    border-radius: 10px !important;
    margin: 1rem 0;
    border: none;
}
.faq .accordion-item .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    text-align: start;
    box-shadow: none !important;
    background: var(--gray3) !important;
    color: var(--dark3-color);
    border-radius: 10px 10px 0 0 !important;
}
.faq .accordion-item .accordion-button.collapsed {
    border-radius: 10px !important;
}
.accordion-button::after {
    margin: 0 !important;
    content: "+";
    background-image: none !important;
    transition: transform 0.3s ease-in-out;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}
.accordion-button:not(.collapsed)::after {
    background-image: none !important;
    transform: rotate(45deg);
}
.faq .accordion-item .accordion-body {
    font-weight: 500;
    font-size: 17px;
    line-height: 150%;
    text-align: start;
    color: var(--gray-color);
    background: var(--gray3) !important;
    border-radius: 0 0 10px 10px;
}
@media (max-width: 991.98px) {
    .faq {
        padding-bottom: 8rem !important;
    }
    .faq-title {
        justify-content: center;
    }
    .faq-title .section-title {
        width: 100%;
        font-size: 32px;
    }
    .faq-title dotlottie-player {
        transform: translateX(0);
    }
    .faq ul {
        display: none;
    }
    .faq .book-icon {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* =================== End FAQ Section  ===================== */

/* =================== Start Testimonials Section  ===================== */
.swiper {
    width: 100%;
    padding: 1rem 0 4rem;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide .col {
}
.testimonials-box {
    border: none;
    padding: 1.5rem;
    text-align: center;
    height: 207px;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.swiper-slide .col:nth-child(2) .testimonials-box::before,
.swiper-slide .col:nth-child(2) .testimonials-box::after {
    content: "";
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
}
.swiper-slide .col:nth-child(2) .testimonials-box::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1MyA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8xMThfMzMwKSI+CjxlbGxpcHNlIGN4PSIxNS4xMTExIiBjeT0iNDAuMTExMSIgcng9IjMuNTU3NTYiIHJ5PSIzLjU1NzU1IiB0cmFuc2Zvcm09InJvdGF0ZSgtOS43OTg4NSAxNS4xMTExIDQwLjExMTEpIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfMTE4XzMzMCkiLz4KPC9nPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMV9kXzExOF8zMzApIj4KPGVsbGlwc2UgY3g9IjM2LjE2NjciIGN5PSIxNi4xNjY3IiByeD0iNS4zMzYzNCIgcnk9IjUuMzM2MzIiIHRyYW5zZm9ybT0icm90YXRlKC05Ljc5ODg1IDM2LjE2NjcgMTYuMTY2NykiIGZpbGw9InVybCgjcGFpbnQxX3JhZGlhbF8xMThfMzMwKSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfMTE4XzMzMCIgeD0iMC44ODAzMiIgeT0iMjUuODgwMSIgd2lkdGg9IjI4LjQ2MTYiIGhlaWdodD0iMjguNDYxNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0Lz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNS4zMzYzMyIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMzggMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18xMThfMzMwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzExOF8zMzAiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZF8xMThfMzMwIiB4PSIyMC4xNTY4IiB5PSIwLjE1NjQ0MyIgd2lkdGg9IjMyLjAxOTciIGhlaWdodD0iMzIuMDIwMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0Lz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNS4zMzYzMyIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMzggMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18xMThfMzMwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzExOF8zMzAiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8xMThfMzMwIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjExMTEgNDAuMTExMSkgcm90YXRlKDkwKSBzY2FsZSgzLjU1NzU1IDMuNTU3NTYpIj4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNUU0NTcyIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQxX3JhZGlhbF8xMThfMzMwIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDM2LjE2NjcgMTYuMTY2Nykgcm90YXRlKDkwKSBzY2FsZSg1LjMzNjMyIDUuMzM2MzQpIj4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNUU0NTcyIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
    bottom: 40px;
    right: -30px;
}
.swiper-slide .col:nth-child(2) .testimonials-box::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1MyA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8xMThfMzMxKSI+CjxlbGxpcHNlIGN4PSIxNS4xMTExIiBjeT0iNDAuMTExMSIgcng9IjMuNTU3NTYiIHJ5PSIzLjU1NzU1IiB0cmFuc2Zvcm09InJvdGF0ZSgtOS43OTg4NSAxNS4xMTExIDQwLjExMTEpIiBmaWxsPSIjNDM5NkQyIi8+CjwvZz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfZF8xMThfMzMxKSI+CjxlbGxpcHNlIGN4PSIzNi4xNjY3IiBjeT0iMTYuMTY2NyIgcng9IjUuMzM2MzQiIHJ5PSI1LjMzNjMyIiB0cmFuc2Zvcm09InJvdGF0ZSgtOS43OTg4NSAzNi4xNjY3IDE2LjE2NjcpIiBmaWxsPSIjNDM5NkQyIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF8xMThfMzMxIiB4PSIwLjg4MDMyIiB5PSIyNS44ODAxIiB3aWR0aD0iMjguNDYxNiIgaGVpZ2h0PSIyOC40NjE1IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1LjMzNjMzIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4zOCAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzExOF8zMzEiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMTE4XzMzMSIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyMV9kXzExOF8zMzEiIHg9IjIwLjE1NjgiIHk9IjAuMTU2NDQzIiB3aWR0aD0iMzIuMDE5NyIgaGVpZ2h0PSIzMi4wMjAxIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1LjMzNjMzIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4zOCAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzExOF8zMzEiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMTE4XzMzMSIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K");
    top: 40px;
    left: -30px;
}
.testimonials-box .box-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.testimonials-box .box-bg img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.testimonials-box p {
    max-width: 320px;
    margin-inline: auto;
    font-weight: 500;
    font-size: 1rem;
    line-height: 26px;
    text-align: center;
    color: var(--dark1-color);
}
.testimonials-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 100%;
    text-align: center;
    color: var(--dark2-color);
}
.swiper-button-next,
.swiper-button-prev {
    color: white;
    bottom: 0 !important;
    top: auto !important;
    width: 40px;
    height: 40px;
    background: var(--blue-color);
    border-radius: 50%;
    left: 50% !important;
    right: auto !important;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    transform: translateX(calc(-50% + 40px)) !important;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    transform: translateX(calc(-50% - 40px)) !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.4rem;
}
@media (max-width: 576.98px) {
    .swiper-slide .col:nth-child(2) .testimonials-box::before,
    .swiper-slide .col:nth-child(2) .testimonials-box::after {
        display: none;
    }
}
@media (max-width: 991px) {
    .card {
        width: 90%;
        margin: 10px auto;
    }
    .swiper-slide .col:nth-child(2) .testimonials-box::before {
        right: 0;
    }
    .swiper-slide .col:nth-child(2) .testimonials-box::after {
        left: 0;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .testimonials-box {
        gap: 1rem;
    }
}
/* =================== End Testimonials Section  ===================== */

/* =================== Start Learn Section  ===================== */
.learn {
    position: relative;
    overflow: visible;
}
.learn h2 {
    font-weight: 800;
    font-size: 36px;
    line-height: 50px;
    text-align: start;
    color: var(--blue-color);
}
.learn p {
    font-weight: 500;
    font-size: 25px;
    line-height: 44px;
    text-align: start;
    color: var(--dark1-color);
    margin-block: 2rem;
}
.learn-button {
    max-width: 315px;
    width: 100%;
    border-radius: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6cd55;
    gap: 1rem;
}
.learn-button div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--primary-color);
    background: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--trans-dur) var(--trans-timing);
}
.learn-button span {
    font-weight: 700;
    font-size: 23px;
    flex-grow: 1;
    text-align: center;
}
.learn-button:hover div {
    background: var(--primary-color);
    color: var(--surface-color);
}
.pencil-image {
    margin-inline-start: auto;
    display: block;
    margin-top: 6rem;
}
.learn-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    z-index: 0;
    -webkit-mask-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 70%,
        rgba(255, 255, 255, 0) 75%
    );
    mask-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 70%,
        rgba(255, 255, 255, 0) 75%
    );
}
@media (max-width: 991.98px) {
    .pencil-image {
        margin-top: 0;
    }
}
/* =================== End Learn Section  ===================== */

/* =================== Start Footer Section  ===================== */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.social-icons a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #FFF;
    background-color: #4396D2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

footer {
    background: #ffefc8;
}
footer p {
    margin-block: 2rem;
    font-weight: 500;
    font-size: 21px;
    line-height: 30px;
    text-align: start;
    color: var(--dark1-color);
    max-width: 530px;
}
footer input {
    background: transparent !important;
    border: 1px solid var(--dark1-color) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    max-width: 437px;
    width: 100%;
}
footer button {
    outline: none !important;
    border: none !important;
}
footer ul {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
    margin-top: 1rem;
}
footer ul li a {
    color: var(--dark1-color);
    font-weight: 500;
    font-size: 19px;
    line-height: 100%;
    text-align: start;
}
footer .book-img {
    width: 200px;
    position: absolute;
    bottom: 0;
}
footer .layer-img {
    width: 150px;
    position: absolute;
    bottom: 0;
}
@media (max-width: 576.98px) {
    footer .col-lg-6 {
        align-items: center !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }
    footer ul {
        align-items: center;
        justify-content: center;
    }

    footer p {
        text-align: center;
    }
}
@media (max-width: 767.98px) {
    footer .book-img,
    footer .layer-img {
        display: none;
    }
}

/* =================== End Footer Section  ===================== */