/*
	Theme Name: Quran For Kids
	Theme URI: https://foursw.com/
	Author: تم تصميم وتطوير بواسطة شركة foursw
	Author URI: https://foursw.com/
*/
/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    --pink: #FD3EAC;
    --pink-white: #FF72B7;
    --Green: #ADDC52;
    --blue-sky: #53DAFD;
    --orange: #FFAB3B;



    /*========== Font and typography ==========*/
    --body-font: "Fredoka", sans-serif;
    --title-font: 'Poppins', sans-serif;
    --h1-font-size: 47.78px;
    --h2-font-size: 33.18px;
    --h3-font-size: 27.65px;
    --h4-font-size: 23.04px;
    --h5-font-size: 19.2px;
    --normal-font-size: 16px;

    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

input,
button {
    outline: none;
    border: none;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
    width: 0.6rem;
    background-color: hsl(24, 32%, 95%);
    border-radius: 0.2rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--pink-white);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--pink);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    max-width: 1320px;
    margin-inline: 1.5rem;
    margin: 0 auto;
}

.section {
    padding-block: 5rem 1rem;
}

div.prog {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 5px;
    background-color: var(--Linear);
    z-index: 999;
    animation: pro linear forwards;
    animation-timeline: scroll();


}

@keyframes pro {
    0% {
        width: 10px;
        background-color: #e0f7f6;
        /* أفتح لون مقارب لـ #00A199 */
    }

    30% {
        background-color: #66ccc4;
        /* درجة متوسطة */
    }

    50% {
        background-color: #33b5ac;
        /* أغمق شوية */
    }

    100% {
        width: 100%;
        background-color: #00A199;
        /* اللون الأساسي */
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes wiggleBook {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgba(83, 218, 253, 0.7);
        /* بداية اللمعة باللون الجديد */
    }

    40% {
        box-shadow: 0 0 0 50px rgba(83, 218, 253, 0);
        /* توسع اللمعة وتختفي تدريجي */
    }

    80% {
        box-shadow: 0 0 0 50px rgba(83, 218, 253, 0);
        /* المنطقة الواسعة بدون ظل */
    }

    100% {
        box-shadow: 0 0 0 rgba(83, 218, 253, 0);
        /* اختفاء كامل */
    }
}

@keyframes wave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* @keyframes lightGlow {

    0%,
    100% {
        filter: brightness(0.90);
    }

    50% {
        filter: brightness(1);
    }
} */

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes shine {
    0% {
        left: -50%;
    }

    100% {
        left: 100%;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes orangeToYellow {
   0% {
        filter: brightness(1) saturate(120%) hue-rotate(0deg);
    }

    50% {
        filter: brightness(1.5) saturate(190%) hue-rotate(-25deg);
    }

    100% {
        filter: brightness(1) saturate(120%) hue-rotate(0deg);
    }
}
/*=============== HEADER & NAV ===============*/
.header {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-fixed);
    transition: box-shadow .4s;
    background: var(--pink-white);
    box-shadow: 0px 4px 44px 0px #FFFFFF38;

    .subheader {
        height: 64px;
        width: 100%;
        background: var(--blue-sky);
        display: flex;
        justify-content: center;
        align-items: center;

        .subheader_container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;

            .information {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;

                h4 {
                    font-size: 22px;
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);
                }

                .promo {
                    color: white;
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    background: var(--Green);
                    padding: 2px 10px;
                    font-family: var(--title-font);
                }

                .time {
                    display: flex;
                    gap: 8px;
                    align-items: center;

                    .time-box {
                        min-width: 56px;
                        padding: 8px 10px;
                        text-align: center;
                        color: #fff;
                        font-family: var(--title-font);
                    }

                    .time-num {
                        font-size: 22px;
                        font-weight: bold;
                        line-height: 1;
                        display: block;
                    }

                    .time-label {
                        font-size: 8px;
                        opacity: 0.9;
                        text-transform: capitalize;
                        margin-top: 4px;
                        display: block;

                    }
                }
            }
        }
    }
}

.nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 122px;
    width: 100%;
}

.nav_logo img {
    width: 87.03184509277344px;
    height: 87.03184509277344px;
}


.nav_list {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2rem;

    .input {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;

        input {
            width: 107.48556518554688px;
            height: 27px;
            background: transparent;
            color: white;
            font-family: var(--title-font);
            font-weight: var(--font-regular);
            font-size: 18px;

            &::placeholder {
                color: white;
                font-family: var(--title-font);
                font-weight: var(--font-regular);
                font-size: 18px;
            }

        }

        i {
            color: white;
        }
    }

    .new {
        position: relative;

        &::after {
            content: "new";
            position: absolute;
            top: -35px;
            right: -45px;
            background: transparent;
            color: white;
            font-size: 12px;
            font-weight: var(--font-bold);
            font-weight: var(--title-font);
            border-radius: 50%;
            padding: 8px 10px;
            border: 2px solid #fff;
        }

        &::before {
            content: "";
            position: absolute;
            top: 0px;
            right: -14px;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left-color: #fff;
            transform: rotate(110deg);
            z-index: 1;
        }
    }

}

.dropdown {
    position: relative;
}

.dropdown_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    padding: 0.5rem 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 1000;
    text-align: start;
    min-width: 170px;
}

.dropdown_menu li a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--pink-white);
    white-space: nowrap;
    font-size: 22px;
    font-weight: var(--font-medium);
    font-family: var(--title-font);
}

.dropdown {
    span {
        cursor: pointer;
    }
}

.dropdown_menu li a:hover {
    background-color: #f2f2f2;
}

/* Show menu on hover */
.dropdown:hover .dropdown_menu {
    display: block;
}

.dropdown-toggle i {
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle i {
    transform: rotate(180deg);
}

.nav_link,
.nav_link_drop {
    color: white;
    font-size: 22px;
    font-weight: var(--font-medium);
    font-family: var(--title-font);
}

.nav_link {
    transition: all 0.3s ease-in-out;

    &:hover {
        color: #ffffff;
        text-shadow: 0 0 8px #ffffff;
    }
}

.nav_link.active {
    border-bottom: 2px solid white;
}


.nav .btn_free,
.btn-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 198px;
    height: 42px;
    font-size: 17px;
    font-weight: var(--font-medium);
    border-radius: 4px;
    background: white;
    transition: all 0.3s ease-in-out;
    color: var(--pink);
    border: 2px solid var(--pink);
    font-family: var(--title-font);
}

.nav .btn_free:hover {
    transform: scale(1.05);
}

.nav_toggle,
.nav_close,
.btn-mobile,
.information_moblie,
.nav_link_ph{
    display: none;
}

/* لما المنيو يتفعل، بنغير الـ right عشان يظهر */
.nav_menu.active {
    right: 0;
}

/* ===== Expanded Search Overlay ===== */
.search-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.search-overlay.active {
    display: flex;
}

.search-popup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 70%;
    height: 46px;
    padding: 0 0 0 10px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}

.expanded-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 8px;
    color: var(--orange);
    font-size: 17px;
    font-weight: var(--font-regular);

    &::placeholder {
        color: var(--orange);
        font-weight: var(--font-regular);
    }
}

.do-search {
    background: var(--orange);
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.2rem;
    width: 65.5829px;
    height: 100%;
    padding: 0 10px;
    border-radius: 0 6px 6px 0;
}

.close-search {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    background: transparent;
    border: none;
    font-size: 3rem;
    color: var(--orange);
    cursor: pointer;
}

#searchOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6rem;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 9999;
}

/* لما يكون Active */
#searchOverlay.active {
    opacity: 1;
    pointer-events: all;
}

#searchResults {
    margin-top: 2rem;
    width: 90%;
    max-width: 900px;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* شكل العنصر اللي بيظهر في البحث */
.search-result-item {
    display: block;
    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.search-result-item:hover {
    background: var(--orange);
    color: #fff;
    transform: translateY(-3px);
}

.no-results {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
}

/*=============== PAGE 1 ===============*/
/*=============== HOME ===============*/
.home {
    padding: 15rem 0rem 8rem 0rem;
    background-image: url('assets/image/background\ hero.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


    .home_container {

        .home_content {
            display: flex;
            justify-content: space-between;
            align-items: center;



            .home_text {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                width: 787px;


                h2 {
                    position: relative;
                    font-size: 42px;
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);

                    &::after {
                        content: "";
                        position: absolute;
                        background-image: url('assets/image/star\ 3.webp');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        bottom: 0;
                        right: 45%;
                        width: 55.60325622558594px;
                        height: 55.52828979492188px;
                    }
                }

                p {
                    font-size: 17px;
                    font-weight: var(--font-regular);
                    color: white;
                    width: 727px;
                    font-family: var(--title-font);
                }

                .home_btns {
                    position: relative;
                    display: flex;
                    gap: 1.5rem;
                    margin-top: 1rem;
                    font-family: var(--title-font);

                    .btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 199px;
                        height: 48px;
                        color: white;
                        background: var(--orange);
                        border-radius: 6px;
                        font-size: 18px;
                        font-weight: var(--font-medium);
                        transition: all 0.3s ease-in-out;
                        cursor: pointer;

                        &:hover {
                            transform: scale(1.05);
                        }
                    }

                    .btn_secondary {
                        color: var(--orange);
                        background: white;
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        background-image: url(assets/image/arrow.webp);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        left: 0;
                        bottom: -85px;
                        width: 49.1415px;
                        height: 61.83px;
						animation: bounce 2s infinite;
                    }
                }
            }

            .home_img {
                position: relative;
                width: 542px;
                height: 527px;


                img {
                    width: 100%;
                    height: 100%;
                }

                &::before {
                    content: "";
                    position: absolute;
                    background-image: url(assets/image/book.webp);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    left: 0;
                    bottom: -20px;
                    width: 93.72699737548828px;
                    height: 65.69px;
					animation: wiggleBook 1.5s infinite ease-in-out;
                }
            }
        }
    }
}


/*=============== CHOOSE US ===============*/
.choose_us {
    position: relative;
    padding: 5rem 0rem;

    &::before {
        content: "";
        position: absolute;
        background-image: url('assets/image/chose 2.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 125px;
        height: 505.0754px;
    }

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/chose.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        right: 0;
        top: 40%;
        transform: translateY(-50%);
        width: 85px;
        height: 520.0754px;
    }

    .planet1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 228.92498937569522px;
        height: 209.00003196254875px;
    }

    .planet2 {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 200.98646545410156px;
        height: 183.49319458007812px;
    }

    .choose_us_container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: var(--Green);
            text-align: center;
            margin-bottom: .7rem;
            font-family: var(--body-font);
        }

        p {
            font-size: var(--normal-font-size);
            font-weight: var(--font-regular);
            color: #8C8C8C;
            text-align: center;
            margin-bottom: 5.5rem;
            font-family: var(--title-font);
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: var(--font-bold);
            font-family: var(--title-font);
            color: white;
            background-color: var(--orange);
            border-radius: 6px;
            width: 341px;
            height: 48px;
            margin-top: 7rem;
        }



        .choose_us_content {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6rem;

            &::after {
                content: "";
                position: absolute;
                background-image: url('assets/image/choose\ arrow.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                right: -160px;
                top: 55%;
                transform: translateY(-50%);
                width: 130%;
                height: 425.0754px;
                z-index: -1;
            }

            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
                width: 185.06826782226562px;
                height: 211.53268432617188px;
				animation: wave 2s ease-in-out infinite;
                transform-origin: center;

                h3 {
                    font-size: 17.12px;
                    font-weight: var(--font-bold);
                    font-family: var(--title-font);
                    text-align: center;
                    color: white;
                    width: 151.9606px;
                }

                .icon_img {
                    width: 49.22665786743164px;
                    height: 49.22665786743164px;


                    img {
                        width: 100%;
                        height: 100%;
                    }
                }



            }

            .item1 {
                background-image: url('assets/image/chose\ bg\ 1.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
				animation-delay: 0s;

                /* h3{
                    width: 131.6278076171875px;
                } */
            }

            .item2 {
                background-image: url('assets/image/chose\ bg\ 2.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
				animation-delay: 0.2s;
            }

            .item3 {
                background-image: url('assets/image/chose\ bg\ 3.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
				animation-delay: 0.4s;
            }

            .item4 {
                background-image: url('assets/image/chose\ bg\ 4.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
				animation-delay: 0.6s;
            }
        }
    }
}

/*=============== SPECIAL ===============*/
.special {
    overflow: hidden;
    position: relative;
    padding: 10rem 3rem;
    background: var(--blue-sky);

    &::before {
        content: "";
        position: absolute;
        background-image: url('assets/image/wind.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: -120px;
        left: 0;
        width: 100%;
        transform: rotate(180deg);
        height: 262.531525px;
    }

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/wind.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: -120px;
        left: 0;
        width: 100%;
        height: 262.531525px;
    }


    .special_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 3.5rem;

        .special_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .special_text {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: start;
                gap: 1rem;
                color: white;
                width: 521px;
                flex-direction: column;

                span {
                    font-size: 18px;
                    font-weight: var(--font-regular);
                    font-family: var(--title-font);
                }

                h2 {
                    font-size: 36px;
                    font-weight: var(--font-bold);
                    font-family: var(--body-font);
                    letter-spacing: 3px;
                }

                p {
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                    letter-spacing: 3px;
                }

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 233px;
                    height: 38px;
                    border-radius: 6px;
                    border: 3px solid white;
                    font-size: 18px;
                    font-weight: var(--font-bold);
                    font-family: var(--body-font);
                    color: white;
                    margin-top: 1.5rem;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: var(--blue-sky);
                    }
                }

                &::before {
                    content: "";
                    position: absolute;
                    background-image: url('assets/image/special.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    top: -80px;
                    left: -50px;
                    width: 78.99974822998047px;
                    height: 74.75452423095703px;
					animation: bounce 2s infinite;
                }

            }

            .special_img {
                position: relative;
                width: 629px;
                height: 429px;

                img {
                    width: 100%;
                    height: 100%;
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: 60px;
                    left: 60px;
                    width: 28px;
                    height: 28px;
                    background: white;
                    border-radius: 50%;
                    border: 7px solid #97EAFF;
					animation: bounce 2s infinite;
                }

                &::after {
                    content: "";
                    position: absolute;
                    background-image: url('assets/image/special.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    bottom: -80px;
                    right: -50px;
                    width: 78.99974822998047px;
                    height: 74.75452423095703px;
					animation: bounce 2s infinite;
                }
            }

        }

        .ditals {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4rem;

            .data {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
                background-color: #79E3FF;
                border-radius: 4px;
                width: 187px;
                height: 103px;
                color: white;
                text-align: center;

                .number {
                    font-size: 24px;
                    font-weight: var(--font-regular);
                    font-family: var(--body-font);
                    letter-spacing: 3px;
                }

                span {
                    font-size: 20px;
                    font-weight: var(--font-bold);
                    font-family: var(--body-font);
                    letter-spacing: 3px;
                }
            }
        }
    }
}

/*=============== OUR CLASSES ===============*/
.our_classes {
    position: relative;
    padding: 5rem 3rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF0E5 100%);

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/classes\ bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }


    .our_classes_container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .span_our_classes {
            z-index: 7;
            font-size: 20px;
            font-weight: var(--font-regular);
            color: var(--orange);
            font-family: var(--title-font);
            letter-spacing: 3px;
            text-align: center;
            margin-bottom: 12px;
        }

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            z-index: 7;
            color: #404040;
            margin-bottom: 3rem;
            font-family: var(--body-font);
            text-align: center;
            width: 653px;
            letter-spacing: 2px;
        }

        .our_classes_items {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem;
            z-index: 5;

            .item {
                display: flex;
                justify-content: space-between;
                align-items: start;
                gap: 1rem;
                flex-direction: column;
                transition: transform 0.3s ease-in-out;
                padding: 10px;
                border-radius: 12px;

                .item_img {
                    width: 100%;
                    height: 215px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }



                .item_data {
                    display: flex;
                    justify-content: space-between;
                    gap: 1rem;
                    flex-direction: column;
                    width: 100%;

                    h3 {
                        font-size: 22px;
                        font-weight: var(--font-bold);
                        color: white;
                        font-family: var(--body-font);
                        letter-spacing: 2px;
                        text-align: center;
                        margin-bottom: 10px;
                    }

                    ul {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        gap: 1rem;
                        flex-direction: column;
                        color: white;

                        li {
                            display: flex;
                            justify-content: start;
                            align-items: center;
                            gap: 10px;
                            font-size: 12px;
                            font-weight: var(--font-medium);
                            font-family: var(--title-font);
                            letter-spacing: 1px;
                            line-height: 17px;
                            width: 290px;

                            i {
                                font-size: var(--normal-font-size);
                            }
                        }
                    }

                    .about_item {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 15px;

                        span {
                            font-size: 14px;
                            font-weight: var(--font-semi-bold);
                            font-family: var(--title-font);
                        }
                    }

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 38px;
                        border-radius: 6px;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-semi-bold);
                        color: white;
                        letter-spacing: 2px;
                        margin-bottom: 1rem;
                    }
                }


            }

            .item1 {
                background: var(--Green);
                border: 4px solid #C4F06E;

                .about_item {

                    span {
                        position: relative;
                        color: #D7FF8B;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #D7FF8B;
                            }
                        }

                        &:nth-child(2) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #D7FF8B;
                            }
                        }
                    }
                }

                a {
                    background: #C4F06E;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #C4F06E;
                    }
                }
            }

            .item2 {
                background: var(--blue-sky);
                border: 4px solid #79E3FF;

                .about_item {

                    span {
                        position: relative;
                        color: #BFF2FF;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #BFF2FF;
                            }
                        }

                        &:nth-child(2) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #BFF2FF;
                            }
                        }
                    }
                }

                a {
                    background: #79E3FF;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #79E3FF;
                    }
                }
            }

            .item3 {
                background: var(--pink);
                border: 4px solid var(--pink-white);

                .about_item {


                    span {
                        position: relative;
                        color: #FFAFD6;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #FFAFD6;
                            }
                        }
                    }
                }

                a {
                    background-color: #FF72B7;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #FF72B7;
                    }
                }
            }

            .item4 {
                background: var(--orange);
                border: 4px solid #FFC67B;

                .about_item {

                    span {
                        position: relative;
                        color: #FFD7A1;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #FFD7A1;
                            }
                        }

                        &:nth-child(2) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #FFD7A1;
                            }
                        }
                    }
                }

                a {
                    background: #FFC67B;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #FFC67B;
                    }
                }
            }

            .item5 {
                background: var(--pink-white);
                border: 4px solid #FFAAD4;

                .about_item {

                    span {
                        position: relative;
                        color: #FFAAD4;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #FFAAD4;
                            }
                        }

                        &:nth-child(2) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #FFAAD4;
                            }
                        }
                    }
                }

                a {
                    background: #FFAAD4;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #FFAAD4;
                    }
                }
            }

            .item6 {
                background: #404040;
                border: 4px solid #D9D9D9;

                .about_item {


                    span {
                        position: relative;
                        color: #D9D9D9;

                        &:nth-child(1) {

                            &::after {
                                content: "";
                                position: absolute;
                                right: -6px;
                                bottom: 0;
                                height: 100%;
                                width: 1.5px;
                                background: #D9D9D9;
                            }
                        }
                    }
                }

                a {
                    background-color: #8C8C8C;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        background: white;
                        color: #8C8C8C;
                    }
                }
            }
        }

        .our_story_btn {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: 4.5rem;
            z-index: 7;

           a {
                position: relative;
                font-size: 27px;
                font-weight: var(--font-medium);
                color: var(--orange);

                &::after,
                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    background: var(--orange);
                    bottom: -5px;
                    left: 0;
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: transform 0.4s ease-out;
                }

                &::before {
                    top: -5px;
                    transform-origin: left;
                }

                &:hover::after,
                &:hover::before {
                    transform: scaleX(1);
                }
            }
        }
    }
}

/*=================== OUR GIFTS ================*/
.our_gifts {
    padding: 5rem 0rem;



    .our_gifts_container {
        position: relative;

        .our_gifts_header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-direction: column;
            text-align: center;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: var(--Green);
                letter-spacing: 0.3px;
                font-family: var(--body-font);
            }

            p {
                font-size: 20px;
                font-weight: var(--font-regular);
                color: #393D41;
                letter-spacing: 1px;
                font-family: var(--title-font);
            }
        }


        .custom-slider {
            margin-top: 3rem;
            width: 85%;
            overflow: hidden;
            position: relative;
            margin-left: auto;
            margin-right: 0;
        }

        .slider-track {
            display: flex;
            transition: transform 0.5s ease;
            gap: 2rem;
            padding: 3rem 0;
        }


        /* .prev-btn {
            left: 10px;
        } */

        .next-btn {
            position: absolute;
            top: 50%;
            left: 100px;
            /* المسافة اللي تناسبك */
            transform: translateY(-50%);
            background: var(--pink);
            color: #fff;
            border-radius: 50%;
            width: 65px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 15;
            transition: 0.3s;

            i {
                font-size: 30px;
            }
        }

        .prev-btn {
            position: absolute;
            top: 50%;
            right: 100px;
            /* المسافة اللي تناسبك */
            transform: translateY(-50%);
            background: var(--pink);
            color: #fff;
            border-radius: 50%;
            width: 65px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 15;
            transition: 0.3s;

            i {
                font-size: 30px;
            }
        }

        .our_gifts_item {
            flex: 0 0 calc(33.333% - 2rem);
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 20px 20px #97979714;
			&:hover img {
                transform: scale(1.3);
            }

            &:hover .item_data .item_btn_price h4::after {
                transform: scaleX(1);
            }

            .item_img {
                width: 100%;
                height: 316px;
				overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px 8px 0 0;
                    object-fit: cover;
					transition: all 0.3s ease-in-out;
                }
            }

            .item_data {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                /* gap: 10px; */
                padding: 1rem;

                .item_detials_stars {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    margin-bottom: 1rem;

                    .detials {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 10px;

                        span {

                            &:nth-child(1) {
                                font-size: var(--normal-font-size);
                                font-weight: var(--font-regular);
                                font-family: var(--title-font);
                                padding: 10px;
                                background: #FFEFF7;
                                color: var(--pink-white);
                                border-radius: 4px;
                            }

                            &:nth-child(2) {
                                font-size: 14px;
                                font-weight: var(--font-medium);
                                font-family: var(--title-font);
                                padding: 10px;
                                background: #E6FAFF;
                                color: var(--blue-sky);
                                border-radius: 4px;
                            }

                        }
                    }

                    .stars {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 2px;

                        i {
                            color: var(--orange);
                            font-size: var(--normal-font-size);
                        }
                    }
                }

                h3 {
                    font-size: 19px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                    color: #404040;
                }

                p {
                    font-size: 14px;
                    font-weight: var(--font-regular);
                    font-family: var(--title-font);
                    color: #808080;
                    line-height: 24px;
                    width: 381px;
                }

                .item_btn_price {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    margin-top: 1rem;

                    h4 {
                        position: relative;
                        font-size: 18px;
                        font-weight: var(--font-semi-bold);
                        font-family: var(--title-font);
                        color: var(--blue-sky);

                        &::after {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 2px;
                            background: var(--blue-sky);
                            bottom: 0px;
                            left: 0;
                            transform: scaleX(0);
                            transform-origin: left;
                            transition: transform 0.4s ease-out;
                        }

                    }

                    h5 {
                        font-size: 18px;
                        font-weight: var(--font-medium);
                        font-family: var(--title-font);
                        color: var(--Green);

                        span {
                            position: relative;
                            font-weight: var(--font-bold);

                            &::before {
                                content: "";
                                position: absolute;
                                width: 38px;
                                height: 6px;
                                border-top: 3px solid var(--Green);
                                bottom: -5px;
                                border-radius: 50%;
                            }
                        }
                    }
                }

            }
        }

        .our_gifts_btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 3rem;

            a {
                position: relative;
                width: 273px;
                height: 48px;
                border-radius: 6px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--pink);
                font-family: var(--title-font);
                font-size: 21px;
                font-weight: var(--font-semi-bold);

                &::after,
                &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    background: var(--pink);
                    bottom: 0px;
                    left: 0;
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: transform 0.4s ease-out;
                }

                &::before {
                    top: 0px;
                    transform-origin: left;
                }

                &:hover::after,
                &:hover::before {
                    transform: scaleX(1);
                }

            }
        }
    }
}

/*=================== OUR STORIES ================*/
.our_stories {
    position: relative;
    padding: 5rem 3rem;
    background-image: url('assets/image/our\ stories\ bg.webp');
    /* background-position: center; */
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        background-image: url('assets/image/zina.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 36px;
        left: 0;
        width: 224px;
        height: 159.69482421875px;
        /* transform: rotate(17deg); */
    }

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/moon.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 15%;
        right: 10%;
        width: 36.982608795166016px;
        height: 37.94074249267578px;
    }


    .our_stories_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        p {
            font-size: 20px;
            font-weight: var(--font-regular);
            color: #D2F6FF;
            font-family: var(--title-font);
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        h2 {
            position: relative;
            font-size: 36px;
            font-weight: var(--font-bold);
            color: white;
            font-family: var(--body-font);
            letter-spacing: 0.3px;
            width: 568px;
            text-align: center;
            margin-bottom: 5rem;

            &::before {
                content: "";
                position: absolute;
                background-image: url('assets/image/sun.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                top: 0px;
                left: -37%;
                width: 92.91299438476562px;
                height: 92.91299438476562px;
            }
        }


        .our_stories_contant {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            &::before {
                content: "";
                position: absolute;
                background-image: url('assets/image/moon.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                bottom: -20%;
                left: -5%;
                width: 74px;
                height: 75.91716766357422px;
            }

            &::after {
                content: "";
                position: absolute;
                background-image: url('assets/image/moon.webp');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                bottom: -20%;
                right: -5%;
                width: 64px;
                height: 65.65808868408203px;
            }

            .item {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                box-shadow: 0px 2px 13px 0px #00000014;
                border-radius: 12px;
                background-color: white;
				transition: all 0.3s ease-in-out;

                &:hover {
                    transform: translateY(-10px);
                    box-shadow: 0px 8px 20px 0px #00000029;
                }

                &:hover i {
                    transform: translateX(5px);
                }

                .item_img {
                    width: 100%;
                    height: 204px;

                    img {
                        border-radius: 12px 12px 0 0;
                        width: 100%;
                        height: 100%;
                    }
                }

                .item_data {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    text-align: center;
                    gap: 1.5rem;
                    padding: 2rem;

                    .about {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        gap: 1.5rem;

                        span {
                            position: relative;
                            font-size: 12px;
                            font-weight: var(--font-medium);
                            color: var(--pink-white);
                            font-family: var(--title-font);

                            &:nth-child(1) {

                                &::after {
                                    position: absolute;
                                    content: "";
                                    width: 5px;
                                    height: 5px;
                                    border-radius: 50%;
                                    right: -15px;
                                    bottom: 5px;
                                    background: pink;
                                }
                            }
                        }

                        &::after {
                            position: absolute;
                            content: "";
                            width: 100%;
                            height: 3px;
                            border-radius: 50%;
                            left: 0;
                            bottom: -10px;
                            background: #FFCFE7;
                        }
                    }

                    h3 {
                        font-size: 19px;
                        font-weight: var(--font-semi-bold);
                        color: #404040;
                        font-family: var(--title-font);
                        width: 327px;
                        letter-spacing: 0.3px;
                        line-height: 24px;
                    }

                    h4 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 1rem;
                        margin-top: 1.5rem;
                        color: var(--blue-sky);
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        font-family: var(--title-font);
                        letter-spacing: 1px;
						
                        i {
                            transition: all 0.3s ease-in-out;
                        }
                    }


                }

                .date {
                    top: -37.6px;
                    left: 30px;
                    position: absolute;
                    /* width: 72px;
                    height: 68.6667px; */
                    background: white;
                    border: 2px solid #D2F6FF;
                    color: var(--blue-sky);
                    font-family: var(--title-font);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    /* gap: 10px;*/
                    padding: 0px 14px;

                    h5 {
                        font-size: 32px;
                        font-weight: var(--font-semi-bold);
                        letter-spacing: 1px;
                    }

                    span {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-semi-bold);
                        letter-spacing: 1px;
                    }
                }

                .new {
                    color: white;
                    background: var(--blue-sky);
                }
            }
        }

        .our_stories_btn {
            position: relative;
            margin-top: 5rem;
            color: white;
            font-size: 22px;
            font-weight: var(--font-medium);
            font-family: var(--title-font);

            &::after,
            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 2px;
                background: white;
                bottom: 0px;
                left: 0;
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.4s ease-out;
            }

            &::before {
                top: 0px;
                transform-origin: left;
            }

            &:hover::after,
            &:hover::before {
                transform: scaleX(1);
            }
        }

    }
}

/*=============== STUDENTS STORIES ===============*/
.students_stories {
    position: relative;
    padding: 5rem 3rem;
    background-color: var(--orange);
    overflow: hidden;

    .wind_2 {
        position: absolute;
        bottom: -65px;
        left: 0;
        width: 100%;
        height: 157.09567260742188px;
        z-index: 2;
    }

    .gift {
        position: absolute;
        top: 65px;
        right: 40px;
        width: 203.97494506835938px;
        height: 224.42474365234375px;
		animation: wiggleBook 1.5s infinite ease-in-out;
    }

    .star {
        position: absolute;
        bottom: 120px;
        right: 50px;
        width: 109.046142578125px;
        height: 124.5859375px;
		animation: wave 2s ease-in-out infinite;
    }

    .light {
        position: absolute;
        top: 0;
        left: 30px;
        width: 92.24900817871094px;
        height: 190.83230590820312px;
		transform-origin: center;
        animation: lightGlow 2s infinite ease-in-out;
    }

    .mosque {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 538px;
        height: 255.09567260742188px;
    }

    .students_stories_container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: white;
            font-family: var(--body-font);
            margin-bottom: 2rem;
            letter-spacing: 3px;
            width: 444px;
            text-align: center;
        }

        .swiper {
            width: 815px;
            /* نفس عرض السلايد */
            margin: 0 auto;
            /* يخليه في النص */
            overflow: hidden;

            .swiper-button-prev::after,
            .swiper-button-next::after {
                display: none !important;
            }

            .swiper-button-prev i,
            .swiper-button-next i {
                font-size: 29px;
                color: white;
            }

            .swiper-button-prev,
            .swiper-button-next {
                background-color: rgba(255, 255, 255, 0.2);
                width: 55px;
                height: 55px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.3s;
            }

            .swiper-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12rem;
                padding: 5rem;

                .studen_store {
                    position: relative;
                    display: flex;
                    justify-content: start;
                    align-items: start;
                    flex-direction: column;
                    gap: 2rem;
                    border: 3px solid white;
                    background: #FFDEB31A;
                    border-radius: 12px;
                    width: 632px !important;
                    height: 330px;
                    padding: 1rem 2rem 2rem 7rem;

                    &::after {
                        position: absolute;
                        content: "";
                        background-image: url('assets/image/quote\ bg.webp');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        width: 400px;
                        height: 280px;
                        z-index: -1;
                        opacity: 0.6;
                    }

                    .studen_img {
                        position: absolute;
                        top: -25px;
                        left: -50px;
                        border: 2px solid #FFFFFF;
                        width: 107px;
                        height: 107px;
                        border-radius: 50%;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    h3 {
                        position: relative;
                        font-size: 24px;
                        font-weight: var(--font-bold);
                        color: white;
                        font-family: var(--body-font);
                        letter-spacing: 3px;

                        &::after {
                            content: "";
                            position: absolute;
                            background-color: white;
                            border-radius: 50%;
                            bottom: -10px;
                            left: 0;
                            width: 100%;
                            height: 3px;
                        }
                    }

                    p {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-bold);
                        color: white;
                        font-family: var(--body-font);
                        letter-spacing: 1px;
                        line-height: 24px;
                        width: 405px;
                    }

                    span {
                        position: absolute;
                        bottom: 20px;
                        right: 20px;
                        font-size: 18px;
                        font-weight: var(--font-bold);
                        color: white;
                        font-family: var(--body-font);
                        letter-spacing: 3px;
                    }
                }
            }
        }
    }
}

/*=============== OFFERS ===============*/
.offers {
    padding: 5rem 3rem;

    .header_offers {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .offer_span {
            font-size: var(--normal-font-size);
            font-weight: var(--font-medium);
            color: var(--blue-sky);
            font-family: var(--title-font);
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 5px;
        }

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: #404040;
            font-family: var(--body-font);
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 3rem;
        }

    }

    .offers_content {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        gap: 3.5rem;

        .current_offers,
        .previous_offers {

            h3 {
                font-size: 36px;
                font-weight: var(--font-bold);
                font-family: var(--body-font);
                letter-spacing: 2px;
                margin-bottom: 2rem;
            }

            .current_h {
                color: var(--pink);
            }

            .previous_h {
                color: var(--orange);
            }

            .items {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;

                .item {
                    position: relative;
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    padding: 1rem;
                    gap: 2rem;
                    border-radius: 22px;
                    width: 625px;
                    height: 293px;
                    box-shadow: 0px 0px 36px 0px #D8D5D545;

                    .item_img {
                        width: 175px;
                        height: 186px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .item_data {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        gap: 10px;
                        width: 60%;

                        h4 {
                            font-size: 20px;
                            font-weight: var(--font-bold);
                            color: #393D41;
                            font-family: var(--body-font);
                            letter-spacing: 2px;
                        }

                        p {
                            font-size: 14px;
                            font-weight: var(--font-medium);
                            color: #393D41;
                            font-family: var(--title-font);
                            letter-spacing: 2px;
                            width: 302px;
                        }

                        .btn_date {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 2rem;
                            width: 100%;

                            a {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 150px;
                                height: 33px;
                                font-size: var(--normal-font-size);
                                font-weight: var(--font-medium);
                                color: white;
                                font-family: var(--title-font);
                                letter-spacing: 2px;
                                border-radius: 6px;
                            }

                            .soon_btn {
                                background-color: var(--blue-sky);
                            }

                            .btn_active {
                                background-color: var(--Green);
                            }

                            .btn_out {
                                background-color: #666666B0;
                            }

                            span {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                gap: 5px;
                                color: #393D41;
                                font-size: 12px;
                                font-weight: var(--font-medium);
                                font-family: var(--title-font);
                                letter-spacing: 2px;

                                i {
                                    font-size: 15px;
                                }

                                .calendar_soon {
                                    color: var(--blue-sky);
                                }

                                .calendar_active {
                                    color: var(--Green);
                                }

                                .calendar_out {
                                    color: #666666B0;
                                }
                            }
                        }
                    }

                    .discount {
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        top: 0;
                        right: 0;
                        width: 308px;
                        height: 46px;
                        border-radius: 0 22px 0 165px;

                        h5 {
                            font-size: 20px;
                            font-weight: var(--font-medium);
                            color: white;
                            font-family: var(--title-font);
                            letter-spacing: 2px;

                            span {
                                font-weight: var(--font-bold);
                                font-family: var(--body-font);
                            }
                        }
                    }

                    .discount_soon {
                        background-color: var(--blue-sky);
                    }

                    .discount_active {
                        background-color: var(--Green);
                    }

                    .discount_out {
                        background-color: var(--orange);
                    }
                }
            }
        }
    }
}

/*=============== FORM TALK ===============*/
.form_talk {
    padding: 1rem 3rem 5rem 3rem;

    .form_talk_container {
        position: relative;
        background-image: url(assets/image/bg\ form\ talk.webp);
        /* background-position: center; */
        background-repeat: no-repeat;
        background-size: cover;
        padding: 6rem 3rem 2rem 3rem;

        &::before {
            content: "";
            position: absolute;
            background-image: url('assets/image/star\ 2.webp');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            top: 56px;
            left: 80px;
            width: 86px;
            height: 92px;
        }

        &::after {
            content: "";
            position: absolute;
            background-image: url('assets/image/star\ 2.webp');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            bottom: 15%;
            right: 10%;
            width: 58px;
            height: 62px;
        }

        .form_talk_header {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        span {
            font-size: var(--normal-font-size);
            font-weight: var(--font-medium);
            color: var(--orange);
            font-family: var(--title-font);
            letter-spacing: 3px;
            text-align: center;
        }

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: #404040;
            font-family: var(--body-font);
            letter-spacing: 3px;
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .contact-form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 1rem;
            padding-inline: 2rem;

            .name_email {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                gap: 1rem;
            }

            input {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 60px;
                padding: 1rem;
                font-size: var(--normal-font-size);
                font-weight: var(--font-medium);
                color: #00000033;
                font-family: var(--title-font);
                letter-spacing: 1px;
                border: none;
                outline: none;

                &::placeholder {
                    color: #00000033;
                }
            }

            textarea {
                width: 100%;
                height: 227px;
                padding: 1rem;
                font-size: var(--normal-font-size);
                font-weight: var(--font-medium);
                color: #00000033;
                font-family: var(--title-font);
                letter-spacing: 1px;
                resize: none;
                border: none;
                outline: none;

                &::placeholder {
                    color: #00000033;
                }
            }

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 276px;
                height: 50px;
                border-radius: 6px;
                background-color: var(--orange);
                font-size: 22px;
                font-weight: var(--font-medium);
                color: white;
                font-family: var(--title-font);
                margin-top: 2rem;
                cursor: pointer;
            }

        }

        p {
            font-size: var(--normal-font-size);
            font-weight: var(--font-medium);
            color: #393D41;
            font-family: var(--title-font);
            letter-spacing: 3px;
            text-align: center;
            margin-top: 3rem;
        }
    }
}

/*=============== QUESTIONS ===============*/
.questions {
    position: relative;
    padding: 5rem 3rem;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        background-image: url('assets/image/whirlpool.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 70px;
        left: 0;
        width: 33.910618px;
        height: 64.91494750976562px;
        /* transform: rotate(17deg); */
    }

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/spot.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 2%;
        right: -8%;
        width: 207.60325622558594px;
        height: 151.52828979492188px;
    }
}

.questions_container h2 {
    font-size: 35px;
    font-weight: var(--font-bold);
    color: #404040;
    letter-spacing: 3px;
    font-family: var(--body-font);
    text-align: start;
    margin-bottom: 3rem;
}


.questions_accordion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 60%;
}

.questions_content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/spot.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: -10%;
        right: 15%;
		z-index: -1;
        width: 207.60325622558594px;
        height: 151.52828979492188px;
    }
}


.question_item {
    margin-bottom: 20px;
    background: white;
    border-radius: 10px;
    width: 100%;
    transition: box-shadow 0.3s ease-in-out;
    border: 1px solid var(--blue-sky);
	
    &:hover {
        box-shadow: 0 0 8px 5px #53dbfd61;
    }
}

.question_header {
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.question_header h3 {
    font-size: 20px;
    font-weight: var(--font-semi-bold);
    font-family: var(--title-font);
    color: #404040;
}

.question_header .plus {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: var(--blue-sky);
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.question_answer {
    display: none;
}

.question_answer p {
    text-align: start;
    font-size: 14px;
    font-weight: var(--font-medium);
    color: #404040;
    width: 80%;
    margin-bottom: 20px;
    line-height: 24px;
    font-family: var(--title-font);
}

.questions_data {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    width: 401px;
    height: 403px;
    border-radius: 10px;
    border: 1px solid var(--blue-sky);
    background-color: var(--blue-sky);
    padding: 1rem;

    img {
        width: 94px;
        height: 94px;
        margin-bottom: 2.5rem;
    }

    h4 {
        color: white;
        font-size: 24px;
        font-weight: var(--font-semi-bold);
        font-family: var(--title-font);
        line-height: 22px;
        margin-bottom: 10px;
    }

    p {
        color: white;
        font-size: var(--normal-font-size);
        font-weight: var(--font-medium);
        font-family: var(--title-font);
        line-height: 24px;
        width: 287px;
        text-align: center;
        margin-bottom: 2.5rem;
    }

    a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background-color: white;
        color: var(--blue-sky);
        font-size: 18px;
        font-weight: var(--font-medium);
        font-family: var(--title-font);
        width: 100%;
        height: 48px;
        border-radius: 6px;
		
		i {
            animation: wiggleBook 1s infinite ease-in-out;
        }
    }
}

.question_item.active .question_answer {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 20px;
}

/*=================== PAGE 2 ================*/
/*=================== FORM ================*/
.form_section {
    padding: 15rem 3rem 5rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF0E5 100%);


    .form_container {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid var(--orange);
        background-color: white;
        border-radius: 24.88px;
        width: fit-content;
        padding: 5px;

        .group_container {
            border: 2px solid #FFDFB5;
            border-radius: 14.88px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;


            .form_img {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 365.1339111328125px;
                background: linear-gradient(180deg, #FEAC3C 0%, #FD3EAC 49.6%, #FFAB3B 100%);
                border-radius: 14.88px 0 0 14.88px;
                height: 712px;


                img {
                    width: 184px;
                    height: 184px;
                }

            }

            .form_data {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                gap: 2rem;
                padding: 35px;

                h2 {
                    font-size: 26px;
                    font-weight: var(--font-semi-bold);
                    color: #393D41;
                    font-family: var(--title-font);
                    letter-spacing: 3px;
                    text-align: center;

                    .orang {
                        color: var(--orange);
                    }

                    .blue {
                        color: var(--blue-sky);
                    }

                    .green {
                        color: var(--Green);
                    }

                    .pink {
                        color: var(--pink);
                    }
                }

                .form {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    gap: 12px;
                    width: 413px;

                    .form_group {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        gap: 5px;
                        width: 100%;

                        label {
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-semi-bold);
                            color: var(--orange);
                            font-family: var(--title-font);
                        }

                        input,
                        select {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 48px;
                            border-radius: 6px;
                            border: 0.56px solid var(--orange);
                            padding: 10px;
                            font-size: 14px;
                            font-weight: var(--font-regular);
                            color: #666666;
                            font-family: var(--title-font);
                            outline: none;
                        }

                        .contact_wrapper {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 8px;
                            width: 100%;

                            select {
                                width: fit-content;
                                color: var(--orange);
                                font-weight: var(--font-semi-bold);
                            }
                        }
                    }

                    .btn_submit {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 18px;
                        font-weight: var(--font-medium);
                        color: white;
                        font-family: var(--title-font);
                        background-color: var(--orange);
                        border-radius: 6px;
                        width: 100%;
                        height: 48px;
                        margin: 1rem 0;
                    }

                    p {
                        font-size: 12px;
                        font-weight: var(--font-regular);
                        color: #666666;
                        font-family: var(--title-font);
                        text-align: center;
                        letter-spacing: 2px;
                        margin-bottom: 1rem;

                        a {
                            color: var(--Green);
                        }
                    }
                }
            }
        }

        .success_message {
            border: 2px solid #FFDFB5;
            border-radius: 14.88px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: linear-gradient(180deg, #FEAC3C 0%, #FD3EAC 49.6%, #FFAB3B 100%);
            width: 724px;
            height: 452px;
            text-align: center;
            gap: 2rem;

            .success_img {
                width: 150px;
                height: 150px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            p {
                font-size: 20px;
                font-weight: var(--font-regular);
                color: #FFADCD;
                font-family: var(--title-font);
                letter-spacing: 3px;
            }

            h2 {
                position: relative;
                font-size: 26px;
                font-weight: var(--font-bold);
                color: white;
                font-family: var(--body-font);
                letter-spacing: 3px;
                width: 545px;

                &::after {
                    content: "";
                    position: absolute;
                    background-image: url('assets/image/star\ 3.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    bottom: -5px;
                    right: 15%;
                    width: 35.603256px;
                    height: 35.52829px;
                }
            }

            a {
                font-size: 20px;
                font-weight: var(--font-medium);
                color: white;
                font-family: var(--title-font);
                letter-spacing: 3px;
                text-decoration: underline;
            }
        }
    }
}

.confetti {
    position: fixed;
    top: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}


/*=============== PAGE 3 ===============*/
/*=============== HERO PROGRAMS ===============*/
.hero_class {
    position: relative;
    padding: 15rem 0rem 13rem 0rem;
    background-color: var(--pink-white);

    &::after {
        content: "";
        position: absolute;
        background-image: url(assets/image/wind\ 3.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: -78px;
        left: 0;
        width: 100%;
        height: 262.531525px;
    }


    .hero_class_container {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            background-image: url(assets/image/button.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            bottom: -15%;
            left: 0;
            width: 56px;
            height: 45px;
			animation: wave 2s ease-in-out infinite;
            animation-delay: 02s;
        }

        &::after {
            content: "";
            position: absolute;
            background-image: url(assets/image/meeting.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            bottom: -18%;
            left: 13%;
            width: 152.4810028076172px;
            height: 126.90408325195312px;
			animation: wave 2s ease-in-out infinite;
            animation-delay: 0.4s;
        }

        .certificate {
            position: absolute;
            bottom: -15%;
            left: 35%;
            width: 130.9993896484375px;
            height: 140.50343322753906px;
			animation: wave 2s ease-in-out infinite;
            animation-delay: 0.6s;
        }

        .hero_class_content {
            display: flex;
            justify-content: space-between;
            align-items: center;



            .hero_class_text {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                width: 540px;

                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 205px;
                    height: 31px;
                    background-color: white;
                    border-radius: 32px;
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-semi-bold);
                    color: var(--pink);
                    font-family: var(--title-font);
                    letter-spacing: 3px;
                    margin-bottom: 1rem;
                }


                h2 {
                    font-size: 36px;
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);
                    letter-spacing: 2px;
                }

                p {
                    font-size: 18px;
                    font-weight: var(--font-regular);
                    color: white;
                    width: 488px;
                    font-family: var(--title-font);
                    letter-spacing: 1px;
                }

                form {
                    margin-top: 1rem;

                    .input {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 540px;
                        height: 48px;
                        border: 3px solid #FFFFFF;
                        border-radius: 66px;

                        input {
                            height: 100%;
                            width: 100%;
                            border-radius: 66px 0 0 66px;
                            background-color: var(--pink-white);
                            padding-left: 20px;
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-regular);
                            color: white;
                            font-family: var(--title-font);

                            &::placeholder {
                                color: white;
                            }
                        }

                        button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 18px;
                            font-weight: var(--font-medium);
                            color: var(--pink);
                            font-family: var(--title-font);
                            height: 100%;
                            width: 184px;
                            background-color: white;
                            border-radius: 0 66px 66px 0;
                            cursor: pointer;
                        }
                    }
                }
            }

            .hero_class_img {
                width: 586px;
                height: 535px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

/*=============== CLASSES ===============*/
.classes {
    position: relative;
    padding: 5rem 3rem 12rem 3rem;

    .ballon1 {
        position: absolute;
        width: 125.5593px;
        height: 203.311px;
        left: 0;
        top: 10%;
    }

    .ballon2 {
        position: absolute;
        width: 125.5593px;
        height: 203.311px;
        right: 0;
        top: 2%;
    }

    .ballon3 {
        position: absolute;
        width: 125.5593px;
        height: 203.311px;
        left: 0;
        bottom: 2%;
    }

    .ballon4 {
        position: absolute;
        width: 125.5593px;
        height: 203.311px;
        right: 0;
        bottom: 10%;
    }

    &::after {
        display: none;
    }

    .our_classes_container {


        .span_our_classes {
            color: var(--pink-white);
        }

        .our_classes_items {
            position: relative;

            &::after {
                position: absolute;
                content: "";
                background-image: url(assets/image/zina\ 2.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                height: 68px;
                bottom: -85px;
                left: 0;
            }
        }

    }
}

/*=============== PAGE 4 ===============*/
/*=============== SINGLE CLASSES ===============*/
.single_classes_hero {
    padding: 15rem 3rem 5rem 3rem;

    .single_classes_container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .single_classes_text {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 1rem;

            h1 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: #393D41;
                letter-spacing: 2px;
                font-family: var(--body-font);
            }

            h3 {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: var(--normal-font-size);
                font-weight: var(--font-semi-bold);
                color: white;
                letter-spacing: 2px;
                font-family: var(--title-font);
                background-color: var(--pink);
                border-radius: 22px;
                width: 196px;
                height: 32px;
            }

            span {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                font-size: 14px;
                font-weight: var(--font-medium);
                color: #808080;
                letter-spacing: 2px;
                font-family: var(--title-font);

                i {
                    color: var(--blue-sky);
                    font-size: 15px;
                }
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-medium);
                color: #808080;
                letter-spacing: 2px;
                font-family: var(--title-font);
                width: 435px;
                margin-top: 1rem;
            }

            .btns {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;
                margin-top: 2rem;

                .btn {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    color: white;
                    font-family: var(--title-font);
                    background-color: var(--blue-sky);
                    border-radius: 6px;
                    width: 199px;
                    height: 48px;
                    border: 1px solid var(--blue-sky);
                }

                .secondry_btn {
                    background-color: white;
                    color: var(--blue-sky);
                }
            }
        }

        .single_classes_img {
            width: 732px;
            height: 519px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

/*=================== SINGLE CLASSES DATA ================*/
.single_classes_data {
    padding: 5rem 3rem;

    .single_classes_data_container {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 5rem;

        .adventure {
            position: sticky;
            top: 210px;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 1.5rem;
            border: 2px solid #E5E5E5;
            border-radius: 12px;
            width: 390px;

            h2 {
                font-size: 26px;
                font-weight: var(--font-bold);
                color: var(--blue-sky);
                letter-spacing: 2px;
                font-family: var(--body-font);
            }

            span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 34px;
                text-align: center;
                background-color: var(--pink-white);
                box-shadow: 0px 2px 4px 0px #00000012;
                border-radius: 6px;
                color: white;
                font-size: 13.8px;
                font-weight: var(--font-medium);
                font-family: var(--title-font);
            }

            .adventure_links {
                display: flex;
                justify-content: space-between;
                align-items: start;
                gap: 16px;
                border-left: 2px solid #E5E5E5;
                flex-direction: column;
                padding-left: 5px;

                a {
                    color: #808080;
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                }

                a.active {
                    color: var(--blue-sky);
                    font-weight: var(--font-semi-bold);
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        left: -5px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 4px;
                        height: 100%;
                        background-color: var(--blue-sky);
                        border-radius: 2px;
                    }
                }
            }

            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 48px;
                border-radius: 6px;
                background-color: var(--blue-sky);
                color: white;
                font-size: 18px;
                font-weight: var(--font-medium);
                font-family: var(--title-font);
                margin-top: 1.5rem;
            }
        }

        .single_classes_data_text {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 2rem;
            width: 70%;

            .group {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                width: 100%;

                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 122px;
                    height: 31px;
                    border-radius: 6px;
                    background-color: #FFF7ED;
                    color: var(--orange);
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                }

                h2 {
                    color: #393D41;
                    font-size: 22px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                p {
                    color: #393D41;
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                    letter-spacing: 1px;
                    line-height: 24px;
                }

                h3 {
                    color: #393D41;
                    font-size: 20px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                ul {
                    list-style: disc;
                }

                ul,
                ol {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    gap: 10px;

                    li {
                        color: #393D41;
                        font-size: 14px;
                        font-weight: var(--font-medium);
                        font-family: var(--title-font);
                        letter-spacing: 1px;
                        line-height: 24px;
                        margin-left: 25px;
                    }
                }

            }

            .group_spical {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                width: 100%;

                h2 {
                    color: #393D41;
                    font-size: 22px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                .items {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1.5rem;

                    .item {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        gap: 1rem;
                        flex-direction: column;
                        box-shadow: 0px 1px 8px 0px #00000014;
                        padding: 1rem;

                        h3 {
                            position: relative;
                            color: #393D41;
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-bold);
                            font-family: var(--title-font);
                            margin-left: 10px;

                            &::before {
                                position: absolute;
                                content: "";
                                height: 100%;
                                width: 3px;
                                background-color: var(--blue-sky);
                                left: -10px;
                                bottom: 0;
                            }

                            &::after {
                                position: absolute;
                                content: "";
                                width: 100%;
                                height: 6px;
                                background-color: #FFC67B;
                                left: 0;
                                bottom: 5px;
                                z-index: -1;
                            }
                        }

                        p {
                            color: #393D41;
                            font-size: 12px;
                            font-weight: var(--font-medium);
                            font-family: var(--title-font);
                            line-height: 21px;
                            /* width: 213px; */
                        }
                    }
                }
            }

            .group_faqs {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                width: 100%;

                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 122px;
                    height: 31px;
                    border-radius: 6px;
                    background-color: #FFF7ED;
                    color: var(--orange);
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                }

                h2 {
                    color: #393D41;
                    font-size: 22px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                .questions_accordion {
                    width: 100%;
                }

                .question_item {
                    border: 1px solid var(--Green);
                }

                .question_header .plus {
                    color: var(--Green);
                }
            }

            .bannar {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                margin-top: 3rem;
                padding: 2rem 1rem;
                border: 2px solid var(--Green);
                width: 100%;
                border-radius: 10px;

                h3 {
                    font-size: 24px;
                    font-weight: var(--font-semi-bold);
                    color: #393D41;
                    font-family: var(--title-font);
                }

                p {
                    font-size: 18px;
                    font-weight: var(--font-regular);
                    color: #393D41;
                    font-family: var(--title-font);
                }

                .btns {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 1.7rem;
                    margin-top: 1rem;

                    .btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 190px;
                        height: 40px;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        color: white;
                        font-family: var(--title-font);
                        background-color: var(--Green);
                        border-radius: 6px;
                    }

                    .secondry_btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 132px;
                        height: 40px;
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        color: var(--Green);
                        font-family: var(--title-font);
                        background-color: white;
                        border-radius: 6px;
                        border: 1px solid var(--Green);
                    }
                }
            }
        }
    }
}


/*=================== PAGE 5 ================*/
/*=================== STORIES HERO ================*/
.hero_stories {
    padding: 15rem 3rem 5rem 3rem;
    background-image: url('assets/image/stories\ bg.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--blue-sky);

    .hero_stories_container {

        .hero_stories_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
            flex-direction: column;

            .hero_stories_text {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                margin-bottom: 6rem;

                &::before {
                    position: absolute;
                    content: "";
                    background-image: url('assets/image/light\ 2.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    bottom: 0;
                    left: -40%;
                    width: 148.0003px;
                    height: 115.5547px;
                }

                &::after {
                    position: absolute;
                    content: "";
                    background-image: url('assets/image/voice.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    bottom: 25px;
                    right: -50%;
                    width: 49.50096130371094px;
                    height: 51.738990783691406px;
                }

                img {
                    width: 141.9976px;
                    height: 125.9873px;
                    margin-bottom: 2rem;
					animation: heartbeat 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
                }

                h2 {
                    font-size: 36px;
                    font-weight: var(--font-bold);
                    color: var(--blue-sky);
                    font-family: var(--body-font);
                    letter-spacing: 0.3px;
                }

                p {
                    position: relative;
                    font-size: 20px;
                    font-weight: var(--font-regular);
                    color: #808080;
                    font-family: var(--title-font);
                    letter-spacing: 1px;

                    &::after {
                        position: absolute;
                        content: "";
                        background-image: url('assets/image/pen.webp');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        bottom: 0;
                        right: -50%;
                        width: 36px;
                        height: 36px;
						animation: wave 2s ease-in-out infinite;
                    }
                }
            }

            .our_stories_contant {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;

                .item {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    box-shadow: 0px 2px 13px 0px #00000014;
                    border-radius: 12px;
                    background-color: white;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        transform: translateY(-10px);
                        box-shadow: 0px 8px 20px 0px #00000029;
                    }

                    &:hover i {
                        transform: translateX(5px);
                    }

                    .item_img {
                        width: 100%;
                        height: 204px;

                        img {
                            border-radius: 12px 12px 0 0;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .item_data {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-direction: column;
                        text-align: center;
                        gap: 1.5rem;
                        padding: 2rem;

                        .about {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            gap: 1.5rem;

                            span {
                                position: relative;
                                font-size: 12px;
                                font-weight: var(--font-medium);
                                color: var(--pink-white);
                                font-family: var(--title-font);

                                &:nth-child(1) {

                                    &::after {
                                        position: absolute;
                                        content: "";
                                        width: 5px;
                                        height: 5px;
                                        border-radius: 50%;
                                        right: -15px;
                                        bottom: 5px;
                                        background: pink;
                                    }
                                }
                            }

                            &::after {
                                position: absolute;
                                content: "";
                                width: 100%;
                                height: 3px;
                                border-radius: 50%;
                                left: 0;
                                bottom: -10px;
                                background: #FFCFE7;
                            }
                        }

                        h3 {
                            font-size: 19px;
                            font-weight: var(--font-semi-bold);
                            color: #404040;
                            font-family: var(--title-font);
                            width: 327px;
                            letter-spacing: 0.3px;
                            line-height: 24px;
                        }

                        h4 {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 1rem;
                            margin-top: 1.5rem;
                            color: var(--blue-sky);
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-medium);
                            font-family: var(--title-font);
                            letter-spacing: 1px;
							
                            i {
                                transition: all 0.3s ease-in-out;
                            }
                        }


                    }

                    .date {
                        top: -37.6px;
                        left: 30px;
                        position: absolute;
                        /* width: 72px;
                                height: 68.6667px; */
                        background: white;
                        border: 2px solid #D2F6FF;
                        color: var(--blue-sky);
                        font-family: var(--title-font);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        /* gap: 10px;*/
                        padding: 0px 14px;

                        h5 {
                            font-size: 32px;
                            font-weight: var(--font-semi-bold);
                            letter-spacing: 1px;
                        }

                        span {
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-semi-bold);
                            letter-spacing: 1px;
                        }
                    }

                    .new {
                        color: white;
                        background: var(--blue-sky);
                    }
                }
            }
        }
    }
}

/*=================== STORIES ================*/
.stories {
    padding: 5rem 3rem;
    background-color: var(--blue-sky);

    .stories_container {

        .stories_content {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 2.5rem;
            row-gap: 5rem;
            width: 100%;


            .item {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                box-shadow: 0px 2px 13px 0px #00000014;
                border-radius: 12px;
                background-color: white;
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 1s ease, transform 0.5s ease;
                display: none;
				
				&:hover i {
                    transform: translateX(5px);
                }

                .item_img {
                    width: 100%;
                    height: 204px;

                    img {
                        border-radius: 12px 12px 0 0;
                        width: 100%;
                        height: 100%;
                    }
                }

                .item_data {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    text-align: center;
                    gap: 1.5rem;
                    padding: 2rem;

                    .about {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        gap: 1.5rem;

                        span {
                            position: relative;
                            font-size: 12px;
                            font-weight: var(--font-medium);
                            color: var(--pink-white);
                            font-family: var(--title-font);

                            &:nth-child(1) {

                                &::after {
                                    position: absolute;
                                    content: "";
                                    width: 5px;
                                    height: 5px;
                                    border-radius: 50%;
                                    right: -15px;
                                    bottom: 5px;
                                    background: pink;
                                }
                            }
                        }

                        &::after {
                            position: absolute;
                            content: "";
                            width: 100%;
                            height: 3px;
                            border-radius: 50%;
                            left: 0;
                            bottom: -10px;
                            background: #FFCFE7;
                        }
                    }

                    h3 {
                        font-size: 19px;
                        font-weight: var(--font-semi-bold);
                        color: #404040;
                        font-family: var(--title-font);
                        width: 327px;
                        letter-spacing: 0.3px;
                        line-height: 24px;
                    }

                    h4 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 1rem;
                        margin-top: 1.5rem;
                        color: var(--blue-sky);
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        font-family: var(--title-font);
                        letter-spacing: 1px;
						
                        i {
                            transition: all 0.3s ease-in-out;
                        }
                    }


                }

                .date {
                    top: -37.6px;
                    left: 30px;
                    position: absolute;
                    /* width: 72px;
                                height: 68.6667px; */
                    background: white;
                    border: 2px solid #D2F6FF;
                    color: var(--blue-sky);
                    font-family: var(--title-font);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    /* gap: 10px;*/
                    padding: 0px 14px;

                    h5 {
                        font-size: 32px;
                        font-weight: var(--font-semi-bold);
                        letter-spacing: 1px;
                    }

                    span {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-semi-bold);
                        letter-spacing: 1px;
                    }
                }

                .new {
                    color: white;
                    background: var(--blue-sky);
                }
            }

            .item.show {
                opacity: 1;
                transform: translateY(0);
                display: flex;
            }

        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.7rem;
        margin-top: 3rem;
        background-color: var(--blue-sky);
        padding: 1.2rem;
        border-radius: 50px;
    }

    .pagination a,
    .pagination span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        background: #fff;
        color: #808080;
        border-radius: 50%;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .pagination .active {
        background-color: var(--pink-white);
        color: #fff;
    }

    .pagination .prev i,
    .pagination .next i {
        color: var(--blue-sky);
        font-size: 16px;
    }

}

/*=================== PAGE 6 ================*/
/*=================== SINGLE STORIES ================*/
.single_stories {
    padding: 15rem 3rem 5rem 3rem;

    .single_stories_container {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        gap: 3rem;
        padding: 2rem;
        background: #E2DEDE29;
        border-radius: 12px;

        .hero_single_stories {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 1rem;

            span {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 146px;
                height: 32px;
                border-radius: 6px;
                color: white;
                background-color: var(--blue-sky);
                font-size: var(--normal-font-size);
                font-weight: var(--font-semi-bold);
                font-family: var(--title-font);
            }

            h1 {
                font-size: 26px;
                font-weight: var(--font-semi-bold);
                font-family: var(--title-font);
                color: #404040;
                letter-spacing: 0.3px;
            }

            .links {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 15px;
                margin-bottom: 1rem;

                a {
                    position: relative;
                    font-size: 12px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    color: #404040;
                    letter-spacing: 0.3px;

                    &:nth-child(1) {

                        &::after {
                            position: absolute;
                            content: ">";
                            right: -12px;
                            top: 50%;
                            transform: translateY(-50%);
                            color: #404040;
                            font-size: 15px;
                        }
                    }

                    &:nth-child(2) {

                        &::after {
                            position: absolute;
                            content: ">";
                            right: -12px;
                            top: 50%;
                            transform: translateY(-50%);
                            color: #404040;
                            font-size: 15px;
                        }
                    }
                }

                .active {
                    color: var(--blue-sky);
                }
            }

            .img {
                width: 100%;
                height: 438px;
                border-radius: 4px;
                box-shadow: 0px 0px 17px 10px #E4E4E461;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 4px;
                }
            }
        }

        .single_stories_data_text {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 2rem;
            width: 70%;

            .group {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                width: 100%;

                span {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 122px;
                    height: 31px;
                    border-radius: 6px;
                    background-color: #FFF7ED;
                    color: var(--orange);
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                }

                h2 {
                    color: #393D41;
                    font-size: 22px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                p {
                    color: #393D41;
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                    letter-spacing: 1px;
                    line-height: 24px;
                }

                h3 {
                    color: #393D41;
                    font-size: 20px;
                    font-weight: var(--font-semi-bold);
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }

                ul {
                    list-style: disc;
                }

                ul,
                ol {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    gap: 10px;

                    li {
                        color: #393D41;
                        font-size: 14px;
                        font-weight: var(--font-medium);
                        font-family: var(--title-font);
                        letter-spacing: 1px;
                        line-height: 24px;
                        margin-left: 25px;
                    }
                }

            }

            .img {
                width: 750px;
                height: 302px;
                border-radius: 6px;
                box-shadow: 0px 0px 17px 10px #E4E4E461;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 6px;
                }
            }
        }

        .share {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 1rem;
            width: 100%;

            h2 {
                font-size: 22px;
                font-weight: var(--font-medium);
                font-family: var(--title-font);
                color: #1C1C1C;
                letter-spacing: 0.3px;
            }

            .social {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                width: 100%;
                height: 59px;

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    border: 2px solid #C9E98C;
                    cursor: pointer;

                    i {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 24px;
                        height: 24px;
                        background-color: var(--Green);
                        border-radius: 5px;
                    }
                }
            }
        }

        .related_stories {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 6.5rem;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: var(--blue-sky);
                font-family: var(--body-font);
                letter-spacing: 2px;
            }

            .our_stories_contant {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;
                width: 100%;

                .item {
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    box-shadow: 0px 2px 13px 0px #00000014;
                    border-radius: 12px;
                    background-color: white;

                    .item_img {
                        width: 100%;
                        height: 204px;

                        img {
                            border-radius: 12px 12px 0 0;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .item_data {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-direction: column;
                        text-align: center;
                        gap: 1.5rem;
                        padding: 2rem;

                        .about {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            gap: 1.5rem;

                            span {
                                position: relative;
                                font-size: 12px;
                                font-weight: var(--font-medium);
                                color: var(--pink-white);
                                font-family: var(--title-font);

                                &:nth-child(1) {

                                    &::after {
                                        position: absolute;
                                        content: "";
                                        width: 5px;
                                        height: 5px;
                                        border-radius: 50%;
                                        right: -15px;
                                        bottom: 5px;
                                        background: pink;
                                    }
                                }
                            }

                            &::after {
                                position: absolute;
                                content: "";
                                width: 100%;
                                height: 3px;
                                border-radius: 50%;
                                left: 0;
                                bottom: -10px;
                                background: #FFCFE7;
                            }
                        }

                        h3 {
                            font-size: 19px;
                            font-weight: var(--font-semi-bold);
                            color: #404040;
                            font-family: var(--title-font);
                            width: 327px;
                            letter-spacing: 0.3px;
                            line-height: 24px;
                        }

                        h4 {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 1rem;
                            margin-top: 1.5rem;
                            color: var(--blue-sky);
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-medium);
                            font-family: var(--title-font);
                            letter-spacing: 1px;
                        }


                    }

                    .date {
                        top: -37.6px;
                        left: 30px;
                        position: absolute;
                        /* width: 72px;
                                            height: 68.6667px; */
                        background: white;
                        border: 2px solid #D2F6FF;
                        color: var(--blue-sky);
                        font-family: var(--title-font);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        /* gap: 10px;*/
                        padding: 0px 14px;

                        h5 {
                            font-size: 32px;
                            font-weight: var(--font-semi-bold);
                            letter-spacing: 1px;
                        }

                        span {
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-semi-bold);
                            letter-spacing: 1px;
                        }
                    }

                    .new {
                        color: white;
                        background: var(--blue-sky);
                    }
                }
            }
        }

        .subscribe {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            margin-top: 5rem;

            h2 {
                font-size: 22px;
                font-weight: var(--font-semi-bold);
                color: #393D41;
                font-family: var(--title-font);
                letter-spacing: 0.3px;
            }

            p {
                font-size: var(--normal-font-size);
                font-weight: var(--font-regular);
                color: #666666;
                font-family: var(--title-font);
                letter-spacing: 0.3px;
                width: 791px;
                line-height: 24px;
                text-align: center;
            }

            form {
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 1.5rem;
                margin-top: 1.8rem;
                width: 791px;

                .form_group {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    width: 100%;

                    label {
                        font-size: 17px;
                        font-weight: var(--font-semi-bold);
                        color: #393D41;
                        font-family: var(--title-font);
                        margin-bottom: 10px;
                    }

                    input {
                        width: 279px;
                        height: 46px;
                        border-radius: 6px;
                        border: 1px solid #FFC67B;
                        padding-left: 25px;
                        font-size: 17px;
                        font-weight: var(--font-regular);
                        color: #808080;
                        font-family: var(--title-font);
                    }

                    .input {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 469px;
                        height: 46px;
                        border: 1px solid #FFC67B;
                        border-radius: 6px;

                        input {
                            width: 100%;
                            height: 100%;
                            border: none;
                        }

                        button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 103.0008544921875px;
                            height: 46px;
                            background-color: var(--orange);
                            border-radius: 4px;
                            color: white;
                            font-size: 18px;
                            font-weight: var(--font-medium);
                            font-family: var(--title-font);
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}



.single_story_bg {
    background: white;

    &::after {
        background-image: none;
    }
}


/*=================== PAGE 7 ================*/
/*=================== STORE HERO ================*/
.hero_store {
    padding: 15rem 3rem 5rem 3rem;
    background-color: var(--pink-white);


    .hero_store_container {

        .hero_store_content {
			position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;

			
			&::before {
                    position: absolute;
                    content: "";
                    background-image: url('https://quranonline4kids.com/wp-content/uploads/2026/01/Group-1000005967-1-scaled.webp');
            		background-position: center;
            		background-repeat: no-repeat;
           			background-size: cover;
                    top: -10%;
             	    right: -50px;
              	    width: 730.016968px;
                    height: 492px;
				    animation: orangeToYellow 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
                }

            .hero_store_text {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                gap: 1rem;
                width: 623px;

                &::before {
                    position: absolute;
                    content: "";
                    background-image: url('assets/image/bubel.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    top: -60%;
                    left: 0;
                    width: 91.661373px;
                    height: 70.62627410888672px;
                }

                &::after {
                    position: absolute;
                    content: "";
                    background-image: url('assets/image/sun\ 2.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    bottom: -50%;
                    left: 0;
                    width: 62px;
                    height: 63.96484375px;
					animation: bounce 3s infinite ease-in-out;
                }

                h2 {
                    font-size: 36px;
                    font-weight: var(--font-bold);
                    color: var(--pink-white);
                    font-family: var(--body-font);
                    letter-spacing: 3px;
                    text-shadow:
                        -1px -1px 0 #fff,
                        0 -1px 0 #fff,
                        1px -1px 0 #fff,
                        -1px 0 0 #fff,
                        1px 0 0 #fff,
                        -1px 1px 0 #fff,
                        0 1px 0 #fff,
                        1px 1px 0 #fff,
                        -2px -2px 0 #fff,
                        2px -2px 0 #fff,
                        -2px 2px 0 #fff,
                        2px 2px 0 #fff,
                        -3px 0 0 #fff,
                        3px 0 0 #fff,
                        0 -3px 0 #fff,
                        0 3px 0 #fff;

                    span {

                        &:nth-child(1) {
                            color: var(--Green);
                        }

                        &:nth-child(2) {
                            color: var(--orange);
                        }
                    }
                }

                p {
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    color: white;
                    font-family: var(--title-font);
                    letter-spacing: 2px;
                }
            }

            .store_img {
                width: 566.9993286132812px;
                height: 476.89300537109375px;
				z-index: 1;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

/*=================== PRODUCTS ================*/
.products {
    padding: 5rem 3rem;

    .products_container {
        padding: 2rem;
        box-shadow: 0px 0px 27px 0px #0000000D;

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: var(--pink-white);
            font-family: var(--body-font);
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 4rem;
        }

        .products_content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            column-gap: 2.5rem;
            align-content: center;
            justify-items: center;
            align-items: center;
            width: 100%;
            text-align: center;

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                gap: 10px;
				transition: all 0.3s ease-in-out;

                &:hover {
                    transform: translateY(-10px);
                }

                .product_img {
                    width: 157px;
                    height: 157px;
                    border-radius: 50%;
                    /* border: 3px solid #FFB8DB; */

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }

                h3 {
                    font-size: 18px;
                    font-weight: var(--font-bold);
                    color: #393D41;
                    font-family: var(--body-font);
                    letter-spacing: 2px;
                    margin-bottom: 1.5rem;
                }
            }
        }
    }
}

/*=================== STORE ================*/
.store_1 {
    padding-left: 5rem;

    .our_gifts_container {
        padding-top: 2rem;
        background-color: #F8F8F8;

        .our_gifts_header {
            align-items: start;
            gap: 8px;
            width: 822px;
            margin-left: 13rem;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: var(--blue-sky);
                font-family: var(--body-font);
                letter-spacing: 2px;
                text-align: start;
            }

            p {
                font-size: 18px;
                font-weight: var(--font-regular);
                color: #393D41;
                font-family: var(--title-font);
                letter-spacing: 2px;
                text-align: start;
                width: 822px;
            }
        }
    }
}

.store_2 {
    padding-right: 5rem;

    .our_gifts_container {
        padding-top: 2rem;
        background-color: #F8F8F8;

        .our_gifts_header {
            gap: 8px;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: var(--orange);
                font-family: var(--body-font);
                letter-spacing: 2px;
                text-align: center;
            }

            p {
                font-size: 18px;
                font-weight: var(--font-regular);
                color: #393D41;
                font-family: var(--title-font);
                letter-spacing: 2px;
                text-align: center;
                width: 822px;
            }
        }

        .custom-slider {
            margin-right: auto;
            margin-left: 0;
        }
    }
}

/*=================== PAGE 8 ================*/
/*=================== SINGLE STORE HERO ================*/
.single_store {
    padding: 15rem 3rem 5rem 3rem;

    .single_store_container {

        .single_store_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 3rem;
            flex-direction: column;

            .imgs {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;

                .main_img {
                    width: 628px;
                    height: 574px;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        object-fit: cover;
                    }
                }

                .sub_imgs {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 1rem;
                    flex-direction: column;

                    .small_img {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 1rem;

                        .sub_img {
                            width: 309px;
                            height: 266px;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 8px;
                                object-fit: cover;
                            }
                        }
                    }

                    .third_img {
                        width: 634px;
                        height: 292px;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 8px;
                            object-fit: cover;
                        }
                    }
                }
            }

            .about_single_store {
                display: flex;
                justify-content: space-between;
                align-items: start;
                gap: 1rem;

                .data_1 {
                    display: flex;
                    justify-content: start;
                    align-items: start;
                    gap: 2rem;
                    flex-direction: column;
                    padding: 1rem;
                    background-color: #fafafa;
                    border-radius: 12px;
                    height: 100%;
                    width: 629px;

                    h2 {
                        font-size: 36px;
                        font-weight: var(--font-semi-bold);
                        color: #404040;
                        width: 589px;
                        font-family: var(--title-font);
                    }

                    .star_reviews {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 7px;

                        .stars {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 2px;

                            i {
                                font-size: 20px;
                                color: var(--orange);
                            }

                            p {
                                font-size: 22px;
                                font-weight: var(--font-medium);
                                color: #808080;
                                font-family: var(--title-font);
                            }
                        }

                        span {
                            font-size: 22px;
                            font-weight: var(--font-medium);
                            color: #393D41;
                            font-family: var(--title-font);
                        }
                    }

                    .colors {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        gap: 1rem;
                        flex-direction: column;

                        h3 {
                            font-size: 26px;
                            font-weight: var(--font-semi-bold);
                            color: #666666;
                            font-family: var(--title-font);
                        }

                        .color {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 1.5rem;

                            .one_c {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                gap: 3px;
                                flex-direction: column;

                                .red,
                                .balck,
                                .white,
                                .green {
                                    width: 38px;
                                    height: 38px;
                                    border-radius: 50%;
                                }

                                span {
                                    font-size: 12px;
                                    font-weight: var(--font-medium);
                                    color: #393D41;
                                    font-family: var(--title-font);
                                }

                                .balck {
                                    background-color: #393D41;
                                }

                                .white {
                                    background-color: #E4E4E4;
                                }

                                .red {
                                    background-color: var(--pink);
                                }

                                .green {
                                    background-color: #31B978;
                                }

                            }

                        }
                    }

                    .decription {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        gap: 1rem;
                        flex-direction: column;

                        h3 {
                            font-size: 26px;
                            font-weight: var(--font-semi-bold);
                            color: #666666;
                            font-family: var(--title-font);
                        }

                        p {
                            font-size: var(--normal-font-size);
                            font-weight: var(--font-medium);
                            color: #808080;
                            width: 597px;
                            font-family: var(--title-font);
                            line-height: 24px;
                        }

                    }
                }

                .data_2 {
                    display: flex;
                    justify-content: start;
                    align-items: start;
                    gap: 2rem;
                    flex-direction: column;
                    height: 100%;
                    width: 635px;


                    .price {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        height: 95px;
                        border-radius: 4px;
                        padding: 1rem;
                        background-color: var(--Green);

                        span {
                            font-size: 46px;
                            font-weight: var(--font-medium);
                            color: white;
                            font-family: var(--title-font);
                        }

                        a {
                            font-size: 26px;
                            font-weight: var(--font-semi-bold);
                            color: white;
                            font-family: var(--title-font);
                            text-decoration: underline;
                        }
                    }

                    .reviews {
                        display: flex;
                        justify-content: start;
                        align-items: start;
                        gap: 1rem;
                        flex-direction: column;
                        padding: 1rem;
                        background-color: #fafafa;
                        border-radius: 12px;
                        height: 100%;
                        width: 100%;

                        h3 {
                            font-size: 26px;
                            font-weight: var(--font-semi-bold);
                            color: #666666;
                            font-family: var(--title-font);
                        }

                        .users {
                            display: flex;
                            justify-content: space-between;
                            align-items: start;
                            gap: 2rem;
                            flex-direction: column;

                            .user {
                                display: flex;
                                justify-content: space-between;
                                align-items: start;
                                gap: 10px;
                                flex-direction: column;

                                h4 {
                                    font-size: 18px;
                                    font-weight: var(--font-semi-bold);
                                    color: #393939;
                                    font-family: var(--title-font);
                                }

                                .date {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: start;
                                    gap: 2rem;

                                    span {
                                        font-size: var(--normal-font-size);
                                        font-weight: var(--font-regular);
                                        color: #808080;
                                        font-family: var(--title-font);
                                    }

                                    .stars {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        gap: 3px;

                                        i {
                                            font-size: 18px;
                                            color: var(--orange);
                                        }

                                        .solid {
                                            color: #CCD6DF;
                                        }
                                    }
                                }

                                p {
                                    font-size: 16px;
                                    font-weight: var(--font-regular);
                                    color: #808080;
                                    font-family: var(--title-font);
                                    width: 497px;
                                    margin-top: 0.8rem;
                                }
                            }
                        }
                    }
                }


            }
        }
    }
}


/*=============== PAGE 9 ===============*/
/*=============== HONOR HERO ===============*/
.hero_honor {
    padding: 15rem 3rem 5rem 3rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF0E5 100%);

    .hero_honor_container {
        .hero_honor_content {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .hero_honor_text {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;

                h2 {
                    position: relative;
                    font-size: 46px;
                    font-weight: var(--font-bold);
                    color: #393D41;
                    font-family: var(--body-font);
                    letter-spacing: 0.3px;
                    width: 466px;

                    &::after {
                        position: absolute;
                        content: "";
                        background-image: url('assets/image/heart.webp');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        top: 0;
                        right: 0;
                        width: 27px;
                        height: 20.720930099487305px;
						animation: heartbeat 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
                    }

                    .blue {
                        color: var(--blue-sky);
                    }

                    .orang {
                        color: var(--orange);
                    }

                    .pink {
                        color: var(--pink-white);
                        font-size: 26px;
                    }

                    img {
                        width: 61px;
                        height: 22px;
                        margin: 0 10px;
                    }
                }

                p {
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-medium);
                    color: #666666;
                    font-family: var(--title-font);
                    letter-spacing: 1px;
                    width: 505px;
                }

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 292px;
                    height: 48px;
                    background-color: orange;
                    border-radius: 6px;
                    margin-top: 2rem;
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    color: white;
                    font-family: var(--title-font);
                    letter-spacing: 0.3px;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        transform: scale(1.05);
                    }
                }
            }

            .hero_honor_img {
                position: relative;
                width: 732px;
                height: 580.25px;

                img {
                    width: 100%;
                    height: 100%;
                }

                &::after {
                    position: absolute;
                    content: "";
                    background-image: url('https://quranonline4kids.com/wp-content/uploads/2025/12/honer-hero-after.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    top: 23px;
                    left: 22%;
                    width: 60.54px;
                    height: 45.87px;
                    opacity: 0;
                    animation: fadeInOut 2s infinite;
                }
            }
        }
    }
}

/*=============== HONOR ===============*/
.honor {
    padding: 5rem 3rem;
    background-image: url('assets/image/classes\ bg.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .honor_container {

        h2 {
            font-size: 36px;
            font-weight: var(--font-bold);
            color: #393D41;
            font-family: var(--body-font);
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 5rem;
        }

        .honor_content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5rem;

            .studen_store {
                position: relative;
                display: flex;
                justify-content: start;
                align-items: start;
                flex-direction: column;
                gap: 2rem;
                border: 3px solid white;
                background: var(--blue-sky);
                border-radius: 12px;
                width: 632px !important;
                height: 330px;
                padding: 1rem 2rem 2rem 7rem;
				transition: all 0.3s ease-in-out;

                &:hover {
                    transform: translateY(-10px);
                }

                /* &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 120px;
                    height: 120px;
                    background: white;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                } */


                &::after {
                    position: absolute;
                    content: "";
                    background-image: url('assets/image/quote\ bg\ 2.webp');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 400px;
                    height: 280px;
                    z-index: -1;
                    opacity: 0.6;
                }



                .studen_img {
                    position: absolute;
                    top: -25px;
                    left: -50px;
                    border: 2px solid var(--blue-sky);
                    width: 107px;
                    height: 107px;
                    border-radius: 50%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h3 {
                    position: relative;
                    font-size: 24px;
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);
                    letter-spacing: 3px;

                    &::after {
                        content: "";
                        position: absolute;
                        background-color: white;
                        border-radius: 50%;
                        bottom: -10px;
                        left: 0;
                        width: 100%;
                        height: 3px;
                    }
                }

                p {
                    font-size: var(--normal-font-size);
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);
                    letter-spacing: 1px;
                    line-height: 24px;
                    width: 405px;
                }

                span {
                    position: absolute;
                    bottom: 20px;
                    right: 20px;
                    font-size: 18px;
                    font-weight: var(--font-bold);
                    color: white;
                    font-family: var(--body-font);
                    letter-spacing: 3px;
                }
            }
        }
    }
}


/*=============== PAGE 10 ===============*/
/*=============== PRICCING HERO ===============*/
.hero_pricing {
    padding: 22rem 3rem 5rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .hero_pricing_container {

        .hero_pricing_header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            flex-direction: column;
            text-align: center;

            h1 {
                font-size: 46px;
                font-weight: var(--font-bold);
                color: #393D41;
                font-family: var(--body-font);
                letter-spacing: 0.3px;

                span {
                    color: var(--orange);
                }
            }

            p {
                font-size: 20px;
                font-weight: var(--font-regular);
                color: #808080;
                font-family: var(--title-font);
                letter-spacing: 1px;

            }

            &::before {
                content: "";
                position: absolute;
                background-image: url(assets/image/light\ 3.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                bottom: -95px;
                left: -140px;
                width: 288.7px;
                height: 296.69px;
                z-index: -1;
				animation: bounce 3s infinite ease-in-out;
            }

            &::after {
                content: "";
                position: absolute;
                background-image: url(assets/image/pricing\ icon\ 1.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                top: -80px;
                right: -180px;
                width: 226.96401977539062px;
                height: 99.68792724609375px;
				animation: bounce 3s infinite ease-in-out;
            }

        }



    }
}

/*=============== PRICCING USER ===============*/
.pricing {
    position: relative;
    padding: 5rem 3rem;

    &::before {
        z-index: -1;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        background-image: url(assets/image/ballon\ 5.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 247.49px;
        height: 390.81px;
    }

    &::after {
        z-index: -1;
        position: absolute;
        content: "";
        top: 10%;
        right: 10%;
        background-image: url(assets/image/pricing\ icon\ 2.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 91px;
        height: 92px;
    }

    .pricing_container {
        .pricing_content {
            position: relative;

            &::before {
                z-index: -1;
                position: absolute;
                content: "";
                bottom: -10%;
                left: -5%;
                background-image: url(assets/image/pricing\ icon\ 3.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 89.29301452636719px;
                height: 88.92709350585938px;
            }

            .pricing_header {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 1rem;
                margin-bottom: 3rem;

                h2 {
                    font-size: 36px;
                    font-weight: var(--font-bold);
                    color: var(--orange);
                    font-family: var(--body-font);

                    i {
                        margin-right: 7px;
                    }
                }



                .time_session {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    width: fit-content;
                    height: 36px;
                    padding: 1rem 1.5rem;
                    border-radius: 8px;
                    border: 1.11px solid var(--orange);

                    span {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        color: var(--orange);
                        font-family: var(--title-font);
                    }

                    i {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        color: var(--orange);
                        font-family: var(--title-font);
                    }

                    p {
                        font-size: var(--normal-font-size);
                        font-weight: var(--font-medium);
                        color: #666666;
                        font-family: var(--title-font);
                    }
                }
            }



            .priccing_cards {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;
                flex-direction: column;

                .card {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: white;
                    border-radius: 8px;
                    border: 1.11px solid var(--orange);
                    padding: 1.5rem 2.5rem;
                    width: 90%;
					transition: all 0.3s ease-in-out;

                    &:hover {
                        transform: translateY(-10px);
                    }

                    i {
                        font-size: 25px;
                        color: var(--orange);
                    }

                    .name_plan {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        gap: 10px;

                        h3 {
                            font-size: 20px;
                            font-weight: var(--font-semi-bold);
                            color: var(--orange);
                            font-family: var(--title-font);
                        }

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 15.5px;
                            font-weight: var(--font-medium);
                            color: #666666;
                            font-family: var(--title-font);
                            width: fit-content;
                            height: 31.8653px;
                            padding: 0 1.5rem;
                            border-radius: 44.33px;
                            background-color: #EAEAEA;
                        }
                    }

                    .desc_plan {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 320px;
                        text-align: center;

                        p {
                            font-size: 14px;
                            font-weight: var(--font-semi-bold);
                            color: var(--orange);
                            font-family: var(--title-font);
                        }
                    }

                    .price_plan {
                        display: flex;
                        justify-content: center;
                        align-items: end;


                        .custom {
                            font-size: 24px;
                            font-weight: var(--font-semi-bold);
                            color: white;
                            font-family: var(--title-font);
                        }

                        h4 {
                            font-size: 44.33px;
                            font-weight: var(--font-semi-bold);
                            color: var(--orange);
                            font-family: var(--title-font);
                        }

                        span {
                            font-size: 13.3px;
                            font-weight: var(--font-semi-bold);
                            color: #666666;
                            font-family: var(--title-font);
                        }
                    }

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 14px;
                        font-weight: var(--font-semi-bold);
                        color: white;
                        font-family: var(--title-font);
                        background-color: var(--orange);
                        border-radius: 4px;
                        width: 156px;
                        height: 42px;
                        box-shadow: 0px 0px 3px 0px #4040401F;
                    }
                }

                .popular {
                    background-color: var(--orange);

                    i {
                        font-size: 25px;
                        color: white;
                    }

                    .name_plan {

                        h3 {
                            color: white;
                        }

                        span {
                            background-color: #FFD69F;
                        }
                    }

                    .desc_plan {

                        p {
                            color: white;
                        }
                    }

                    .price_plan {

                        h4 {
                            color: white;
                        }
                    }

                    a {
                        color: var(--orange);
                        background-color: white;
                    }
                }
            }
        }
    }
}

/*=============== PRICCING GROUP ===============*/
.group_pricing {
    padding: 8rem 3rem;
    position: relative;
    background: linear-gradient(2.98deg, rgba(173, 220, 82, 0.11) 2.47%, rgba(173, 220, 82, 0.05) 40.37%);

    &::before {
        z-index: -1;
        position: absolute;
        content: "";
        top: 10%;
        left: 3%;
        background-image: url(assets/image/pricing\ icon\ 5.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 110.01020050048828px;
        height: 93.96273803710938px;
    }

    &::after {
        z-index: -1;
        position: absolute;
        content: "";
        top: 10%;
        right: 3%;
        background-image: url(assets/image/pricing\ icon\ 4.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 94.4328842163086px;
        height: 94.03439331054688px;
    }

    .pricing_container {
        .pricing_content {

            &::before {
                z-index: -1;
                position: absolute;
                content: "";
                bottom: -15%;
                left: -5%;
                background-image: url(assets/image/pricing\ icon\ 7.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 113.56449890136719px;
                height: 103.55479431152344px;
            }

            &::after {
                z-index: -1;
                position: absolute;
                content: "";
                bottom: -15%;
                right: 0;
                background-image: url(assets/image/pricing\ icon\ 6.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 71.08747100830078px;
                height: 85.17269897460938px;
            }

            .pricing_header {

                h2 {
                    color: var(--Green);
                }
            }



            .priccing_cards {

                .card {
                    border: 1.11px solid var(--Green);

                    i {
                        color: var(--Green);
                    }

                    .name_plan {

                        h3 {
                            color: var(--Green);
                        }
                    }

                    .desc_plan {

                        p {
                            color: var(--Green);
                        }
                    }

                    .price_plan {

                        h4 {
                            color: var(--Green);
                        }
                    }

                    a {
                        background-color: var(--Green);
                    }
                }

                .popular {
                    background-color: var(--Green);

                    i {
                        color: white;
                    }

                    .name_plan {
                        h3 {
                            color: white;
                        }

                        span {
                            background-color: #D7F49E;
                        }
                    }

                    .desc_plan {
                        p {
                            color: white;
                        }
                    }

                    .price_plan {

                        h4 {
                            color: white;
                        }
                    }

                    a {
                        color: var(--Green);
                        background-color: white;
                    }
                }
            }
        }
    }
}

/*=============== GAME POINTS ===============*/
.game_points {
    height: 100vh;
    background-image: url(assets/image/game\ points\ bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .game_points_container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .game_points_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 1rem;
            background-color: var(--blue-sky);
            width: 790px;
            border-radius: 12px;
            padding: 5rem 0;
            text-align: center;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: white;
                font-family: var(--body-font);

                i {
                    margin-right: 1rem;
                }
            }

            h3 {
                font-size: 18px;
                font-weight: var(--font-medium);
                color: white;
                font-family: var(--title-font);
                letter-spacing: 0.3px;
            }

            .glow-line {
                width: 80%;
                height: 8px;
                border-radius: 10px;
                background: linear-gradient(90deg,
                        rgba(255, 255, 255, 0.3) 0%,
                        rgba(255, 255, 255, 1) 50%,
                        rgba(255, 255, 255, 0.3) 100%);
                position: relative;
                overflow: hidden;
                margin-bottom: 2rem;
            }

            .glow-line::before {
                content: "";
                position: absolute;
                top: 0;
                left: -50%;
                width: 50%;
                height: 100%;
                background: linear-gradient(90deg, transparent, white, transparent);
                animation: shine 1.5s infinite;
                opacity: 0.8;
            }

            p {
                font-size: 18px;
                font-weight: var(--font-semi-bold);
                color: #393D41;
                font-family: var(--title-font);
                letter-spacing: 0.3px;

                span {
                    color: var(--orange);
                }

                i {
                    margin-right: 7px;
                    color: white;
                }
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                font-weight: var(--font-medium);
                font-family: var(--title-font);
                gap: 10px;
                width: 303px;
                height: 48px;
                background-color: white;
                border-radius: 86px;
                color: #393D41;
                margin-top: 1rem;

                i {
                    color: var(--blue-sky);
                }
            }

        }
    }
}

@keyframes shine {
    0% {
        left: -50%;
    }

    100% {
        left: 100%;
    }
}

/*=============== REDEEM POINTS ===============*/
.redeem_points {
    position: relative;
    padding: 7rem 3rem;
    padding-bottom: 15rem;
    background-image: url(assets/image/gifts\ bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    &::before {
        position: absolute;
        content: "";
        background-image: url(assets/image/gift\ 4.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 142.0011px;
        height: 160.7845px;
        top: 10%;
        left: 15%;
		animation: wiggleBook 3s infinite ease-in-out;
    }

    &::after {
        position: absolute;
        content: "";
        background-image: url(assets/image/gift\ 5.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 235.0400390625px;
        height: 139.81980895996094px;
        bottom: 10%;
        right: 15%;
		animation: wiggleBook 3s infinite ease-in-out;
    }

    .redeem_points_container {

        .redeem_points_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 3rem;

            h2 {
                font-size: 36px;
                font-weight: var(--font-bold);
                color: white;
                font-family: var(--body-font);
                text-align: center;
            }

            p {
                font-size: 18px;
                font-weight: var(--font-medium);
                color: #393D41;
                font-family: var(--title-font);
                text-align: center;
                letter-spacing: 0.3px;
                width: 810px;
            }

            .redeem_points_bannar {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1rem;
                padding: 3rem;
                background-color: white;
                border-radius: 12px;
                border: 3.44px solid #C6E982;
                box-shadow: 0px 0px 101px 5px #9491911A;
                width: 90%;

                h3 {
                    font-size: 22px;
                    font-weight: var(--font-medium);
                    color: var(--orange);
                    font-family: var(--title-font);
                }

                p {
                    font-size: 18px;
                    font-weight: var(--font-medium);
                    color: #393D41;
                    font-family: var(--title-font);
                    text-align: start;
                    width: 100%;

                    i {
                        color: var(--orange);
                        margin-right: 10px;
                    }

                    span {
                        color: var(--Green);
                    }
                }
            }
        }
    }
}

/*=============== PAGE 11 ===============*/
/*=============== TERMS AND PRIVACIY ===============*/
.terms_privacy {
    padding: 17rem 3rem 5rem 3rem;

    .terms_privacy_container {

        .terms_privacy_content {
            display: flex;
            justify-content: space-between;
            align-items: start;
            flex-direction: column;
            gap: 2.5rem;

            .terms_privacy_header {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 1.5rem;

                h2 {
                    font-size: 46px;
                    font-weight: var(--font-bold);
                    color: #393D41;
                    font-family: var(--body-font);
                    letter-spacing: 0.3px;
                }

                .pra {
                    font-size: 20px;
                    font-weight: var(--font-regular);
                    color: var(--blue-sky);
                    font-family: var(--title-font);
                    letter-spacing: 1px;
                }

                p {
                    font-size: 20px;
                    font-weight: var(--font-medium);
                    color: #404040;
                    font-family: var(--title-font);
                    letter-spacing: 1px;

                    span {
                        color: var(--pink);
                    }

                    .green {
                        color: var(--Green);
                    }

                    .pink {
                        color: var(--pink);
                    }

                    .blue {
                        color: var(--blue-sky);
                    }

                    .orange {
                        color: var(--orange);
                    }
                }

            }

            .terms_privacy_body {
                display: flex;
                justify-content: space-between;
                align-items: start;
                flex-direction: column;
                gap: 2rem;

                .group_data {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    flex-direction: column;
                    gap: 10px;


                    h3 {
                        font-size: 26px;
                        font-weight: var(--font-medium);
                        color: #404040;
                        font-family: var(--title-font);
                        letter-spacing: 0.3px;
                    }

                    p {
                        font-size: 18px;
                        font-weight: var(--font-regular);
                        color: #404040;
                        font-family: var(--title-font);
                        letter-spacing: 0.3px;
                        margin-bottom: 12px;
                    }

                    ul,
                    ol {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        gap: 4px;
                        font-size: 18px;
                        font-weight: var(--font-regular);
                        color: #404040;
                        font-family: var(--title-font);
                        letter-spacing: 0.3px;

                        li {
                            margin-left: 25px;
                        }
                    }

                    ul {
                        list-style: disc;
                    }

                    a {
                        font-size: 18px;
                        font-weight: var(--font-semi-bold);
                        color: #404040;
                        font-family: var(--title-font);
                        letter-spacing: 0.3px;
                    }

                }
            }
        }
    }
}



/*=============== PAGE 12 ===============*/
/*=============== HERO ABOUT ===============*/
.hero_about {
    padding: 18rem 3rem 5rem 3rem;

    .hero_about_container {
        background-image: url(assets/image/about\ bg.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5rem;
        flex-direction: column;

        .hero_about_header {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-direction: column;

            h2 {
                font-size: 42px;
                font-weight: var(--font-bold);
                color: white;
                font-family: var(--body-font);
                background-color: var(--Green);
                padding-inline: 10px;
            }

            p {
                font-size: 20px;
                font-weight: var(--font-regular);
                color: #393D41;
                font-family: var(--title-font);
            }
        }

        .wheel-container {
            position: relative;
            width: 520px;
            height: 520px;
        }

        canvas {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: block;
            background: #fff;
        }

        .arrow {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%) rotate(58deg);
            width: 0;
            height: 0;
            border-left: 28px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 47px solid #80E5FF;
            filter: drop-shadow(0px 4px 23px #00000040);
            z-index: 30;

            &::after {
                content: "";
                position: absolute;
                top: 3px;
                left: -25px;
                border-left: 25px solid transparent;
                border-right: 23px solid transparent;
                border-bottom: 42px solid white;
            }
        }

        .spin-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-direction: column;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 131.32808107592086px;
            height: 131.32808107592086px;
            border-radius: 50%;
            border: 0;
            background: var(--blue-sky);
            cursor: pointer;
            z-index: 40;
            box-shadow: 0 18px 40px rgba(83, 45, 95, 0.12);
			border: 4.87px solid #87E6FF;

            img {
                width: 100%;
                height: 100%;
            }
        }

        /* popup */
        .popup {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.45);
            z-index: 80;
        }

        .card {
            position: relative;
            width: 100%;
            max-width: fit-content;
            padding: 3rem;
            background: #fff;
            border-radius: 12px;
            gap: 8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0px 4px 24px 6px #FF72B71C;
            margin-top: 11rem;
        }

        .card .photo {
            width: 375.7921432558198px;
            height: 409.0053999574546px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .card .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .card .content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            max-width: 625px;
        }

        .card .content h1 {
            font-size: 46px;
            font-weight: var(--font-bold);
            color: var(--Green);
            font-family: var(--body-font);
            margin-bottom: 1rem;
        }

        .card .content h2 {
            font-size: 25px;
            font-weight: var(--font-semi-bold);
            color: #393D41;
            font-family: var(--title-font);
        }

        .card .content p {
            font-size: 19px;
            font-weight: var(--font-regular);
            color: #393D41;
            font-family: var(--title-font);
            line-height: 1.5;
        }

        .close-btn {
            position: absolute;
            left: 18px;
            top: 14px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 0;
            font-size: 19px;
            background: var(--pink);
            color: #fff;
            font-weight: 800;
            cursor: pointer
        }
    }
}

/*=============== OUR STUDENTS STORIES ===============*/
.our_students_stories {
    position: relative;
    padding: 5rem 3rem;

    &::after {
        position: absolute;
        content: "";
        left: 25px;
        top: 0;
        background-image: url(assets/image/ballon\ 6.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 188.99920654296875px;
        height: 135.62574768066406px;
    }


    .our_students_stories_container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5rem;

        h2 {
            position: relative;
            font-size: 36px;
            font-weight: var(--font-bold);
            color: #404040;
            font-family: var(--body-font);
            text-align: center;

            &::after {
                position: absolute;
                content: "";
                right: -25%;
                top: -35px;
                background-image: url(assets/image/star\ 3.webp);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 86.0004px;
                height: 84.6429443359375px;
				transform-origin: center;
       		    animation: lightGlow 2s infinite ease-in-out;
            }
        }

        .our_students_stories_content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3.5rem;

            .story_card {
                display: flex;
                justify-content: space-between;
                align-items: start;
                gap: 28px;
                flex-direction: column;
                padding: 2rem 1.5rem;
                box-shadow: 0px 0px 53px 0px #00000017;
                border-radius: 12px;
                width: 480px;
				
                &:nth-child(1){
                    background-color: var(--blue-sky);
                    
                    .header_story_card .about_student span {
                        color: var(--blue-sky);
                    }
                }

                &:nth-child(2){
                    background-color: var(--pink);

                    .header_story_card .about_student span {
                        color: var(--pink);
                    }
                }

                &:nth-child(3){
                    background-color: var(--pink);

                    .header_story_card .about_student span {
                        color: var(--pink);
                    }
                }

                &:nth-child(4){
                    background-color: var(--orange);

                    .header_story_card .about_student span {
                        color: var(--orange);
                    }
                }

                .header_story_card {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;

                    .about_student {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        flex-direction: column;
                        height: 100%;
						

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 110px;
                            height: 35px;
                            background-color: white;
                            border-radius: 32px;
                            font-size: 16px;
                            font-weight: var(--font-bold);
                            color: white;
                            font-family: var(--body-font);
                        }

                        h3 {
                            font-size: 22px;
                            font-weight: var(--font-bold);
                            color: white;
                            font-family: var(--body-font);
                        }
                    }

                    .img_student {
                        width: 150px;
                        height: 150px;

                        img {
                            width: 100%;
                            height: 100%;
							border-radius: 50%;
                        }
                    }
                }

                .body_story_card {
                    display: flex;
                    justify-content: space-between;
                    align-items: start;
                    gap: 10px;
                    flex-direction: column;

                    span {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 75px;
                        height: 30px;
                        background-color: white;
                        border-radius: 32px;
                        font-size: 12px;
                        font-weight: var(--font-bold);
                        color: #666666;
                        font-family: var(--body-font);
                    }

                    p {
                        font-size: 16px;
                        font-weight: var(--font-regular);
                        color: white;
                        font-family: var(--title-font);
                        width: 385px;
                    }
                }
            }
        }
    }
}

/*=============== PAGE 13 ===============*/
/*=============== ERROR PAGE ===============*/
.error {
    padding: 15rem 1rem;



    .error_container {


        .error_content {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            flex-direction: column;

            .img {

                width: 773.9989013671875px;
                height: 512.7855834960938px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            p {
                color: #393D41;
                font-size: 20px;
                font-weight: var(--font-bold);
                font-family: var(--body-font);
                width: 657px;
                letter-spacing: 1px;
                text-align: center;
            }



            .btn {

                a {
                    color: var(--blue-sky);
                    font-size: 20px;
                    font-weight: var(--font-medium);
                    font-family: var(--title-font);
                    text-decoration: underline;
                }
            }
        }
    }
}


/*=================== VIDEO ================*/

.play-movie {
    position: absolute;
    color: white;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--blue-sky);
    font-size: var(--h5-font-size);
    animation: animate 2s linear infinite;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* video-container */

.video-container {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.video-container.active {
    display: flex;
}

.video-box {
    position: relative;
    max-width: 800px;
    width: 90%;

    video {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
}

.close-video {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: white;
    cursor: pointer;
    z-index: 10000;
}

/*=============== FOOTER ===============*/
footer {
    position: relative;
    padding: 5rem 3rem 1rem 3rem;
    background-color: var(--orange);
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        background-image: url('assets/image/footer\ bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 0;
        left: 0;
        width: 100%;
        height: 166px;
        z-index: -1;
    }

    &::after {
        content: "";
        position: absolute;
        background-image: url('assets/image/footer\ bg.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 166px;
        z-index: -1;
        transform: rotate(180deg);
    }

}

.footer_section {
    border-radius: 32px;
    z-index: 3;
}

.footer_data {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.desc_img_logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 25px;

    .img_logo img {
        width: 147px;
        height: 147px;
    }
}


.footer_info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
}

.footer_info h3 {
    font-size: 24px;
    font-weight: var(--font-bold);
    color: white;
    font-family: var(--body-font);
    margin-bottom: 20px;
}

.footer_info p {
    font-size: 14px;
    font-weight: var(--font-medium);
    color: white;
    font-family: var(--title-font);
    letter-spacing: 2px;
    width: 356px;
}

.footer_info form {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    gap: 14px;

    input {
        width: 356px;
        height: 40px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: var(--font-regular);
        color: #404040;
        font-family: var(--title-font);

        &::placeholder {
            color: #404040;
        }
    }

    button {
        width: 356px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--normal-font-size);
        font-weight: var(--font-bold);
        color: white;
        font-family: var(--title-font);
        background: #FFC67B;
    }
}

.footer_info ul {
    display: flex;
    flex-direction: column;
    gap: 15px;

    li {
        transition: all 0.3s ease;
    }
}

.footer_info a {
    font-size: var(--normal-font-size);
    font-weight: var(--font-regular);
    color: white;
    font-family: var(--title-font);
    transition: all 0.3s ease;

}

.footer_info a:hover,
.footer_info li:hover {
    transform: translatey(-5px);
}

.contact {
    display: flex;
    align-items: center;

    h3 {
        margin-bottom: 0;
    }
}



.footer_info .social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer_info .social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 39px;
    height: 39px;
    font-size: 22px;
    background-color: white;
    cursor: pointer;
    color: var(--orange);
    border-radius: 50%;
}


.footer_copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem !important;
    border-top: 1px solid #FFC67B;
    padding: 1rem 0;
}

.footer_copy p {
    color: white;
    font-size: 14px;
    font-weight: var(--font-regular);
    font-family: var(--title-font);
    letter-spacing: 1px;
}


.footer_copy {

    a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    img {
        width: 133.39999389648438px;
        height: 14.837583541870117px;
    }
}

.footer_copy .pages {
    display: flex;
    gap: 1rem;

    a {
        font-size: 14px;
        font-weight: var(--font-regular);
        color: white;
        cursor: pointer;
        font-family: var(--title-font);
        letter-spacing: 1px;
    }
}


/*=============== RESPONSIVE ===============*/
/*=============== RESPONSIVE HEADER & NAVBAR ===============*/
@media (max-width: 1200px) {
    .header {
        .subheader {
            .subheader_container {
                .information {
                    gap: 0.8rem;

                    h4 {
                        font-size: 20px;
                    }

                    .promo {
                        font-size: 16px;
                        padding: 2px 8px;
                    }

                    .time {
                        gap: 6px;

                        .time-box {
                            min-width: 50px;

                            .time-num {
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }
    }

    .nav {
        padding: 0 1rem;
    }

    /*=============== PAGE 1 ===============*/
    /*=============== HOME ===============*/
    .home {
        padding: 14rem 2rem 6rem 2rem;

        .home_container .home_content {
            gap: 3rem;

            .home_text {
                width: 600px;

                h2 {
                    font-size: 36px;

                    &::after {
                        bottom: -5px;
                        right: 37%;
                    }
                }

                p {
                    width: 100%;
                    font-size: 16px;
                }
            }

            .home_img {
                width: 450px;
                height: 440px;
            }
        }
    }

    /*===============CHOOSE US===============*/
    .choose_us {


        .choose_us_container {
            h2 {
                font-size: 32px;
            }

            p {
                font-size: 15px;
                margin-bottom: 4rem;
            }

            .choose_us_content {
                gap: 4rem;

                &::after {
                    right: -135px;
                    top: 50%;
                }

                .item {
                    width: 170px;
                    height: 190px;

                    h3 {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /*=============== SPECIAL ===============*/
    .special {
        padding: 8rem 4rem;

        &::before,
        &::after {
            height: 210.531525px;
        }

        .special_container {
            .special_content {
                .special_text {
                    width: 450px;

                    h2 {
                        font-size: 32px;
                    }

                    p {
                        font-size: 17px;
                    }
                }

                .special_img {
                    width: 520px;
                    height: 360px;
                }
            }

            .ditals {
                gap: 3rem;

                .data {
                    width: 170px;
                    height: 95px;
                }
            }
        }
    }

    /*===============OUR CLASSES===============*/
    .our_classes {
        padding: 4rem 2rem;

        .our_classes_container {
            h2 {
                width: 100%;
                font-size: 32px;
            }

            .our_classes_items {
                gap: 3rem;

                .item {
                    .item_data {
                        ul {
                            li {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

    /*===================OUR GIFTS================*/
    .our_gifts {
        padding: 4rem 0rem;

        .our_gifts_container {
            .our_gifts_header {
                h2 {
                    font-size: 32px;
                }

                p {
                    font-size: 18px;
                    width: 80%;
                }
            }

            .custom-slider {
                width: 90%;
            }

            .our_gifts_item {
                flex: 0 0 calc(50% - 1.5rem);

                .item_data {
                    p {
                        width: 100%;
                    }
                }
            }
        }
    }

    /*===================OUR STORIES================*/
    .our_stories {
        padding: 4rem 2rem;

        &::before {
            top: 17px;
        }

        .our_stories_container {
            h2 {
                width: 500px;
                font-size: 32px;

                &::before {
                    left: -25%;
                }
            }

            .our_stories_contant {
                gap: 2rem;

                &::after {
                    bottom: -25%;
                    right: 5%;
                }

                &::before {
                    bottom: -25%;
                    left: 5%;
                }

                .item {
                    .item_data {
                        padding: 1rem;

                        h3 {
                            width: 285px;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }

    /*===============STUDENTS STORIES===============*/
    .students_stories {
        padding: 4rem 2rem;

        .gift {
            width: 170px;
            height: 190px;
            right: 20px;
        }

        .star {
            width: 90px;
            height: 100px;
            right: 30px;
        }

        .students_stories_container {
            h2 {
                font-size: 32px;
                width: 400px;
            }

            .swiper {
                width: 700px;

                .swiper-wrapper {
                    gap: 9.4rem;

                    .studen_store {
                        width: 550px !important;
                        height: 310px;
                        padding: 1rem 2rem 2rem 6rem;

                        p {
                            width: 370px;
                        }
                    }
                }
            }
        }
    }

    /*===============OFFERS===============*/
    .offers {
        padding: 4rem 2rem;

        .header_offers {
            h2 {
                font-size: 32px;
            }
        }

        .offers_content {

            .current_offers,
            .previous_offers {
                h3 {
                    font-size: 32px;
                }

                .items {
                    grid-template-columns: 1fr 1fr;
                    gap: 1.5rem;

                    .item {
                        width: 100%;
                        padding: 1rem 1.5rem;
                        gap: 1.5rem;

                        .item_img {
                            width: 150px;
                            height: 160px;
                        }

                        .item_data {
                            width: 65%;

                            h4 {
                                font-size: 18px;
                            }

                            p {
                                width: 100%;
                            }
                        }

                        .discount {
                            height: 40px;

                            h5 {
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }
    }

    /*===============FORM TALK===============*/
    .form_talk {
        padding: 1rem 2rem 4rem 2rem;

        .form_talk_container {
            padding: 5rem 2rem 2rem 2rem;

            h2 {
                font-size: 32px;
            }

            .contact-form {
                padding-inline: 1.5rem;
            }
        }
    }

    /*===============QUESTIONS===============*/
    .questions {
        padding: 4rem 2rem;

        .questions_container h2 {
            font-size: 32px;
        }


        .questions_data {
            width: 360px;
            height: auto;
            padding: 1.5rem;
        }
    }

    /*=================== PAGE 2 ================*/
    /*=================== FORM ================*/
    .form_section {
        padding: 12rem 2rem 4rem 2rem;

        .form_container {
            .group_container {
                gap: 1.5rem;

                .form_img {
                    width: 320px;

                    img {
                        width: 160px;
                        height: 160px;
                    }
                }

                .form_data {
                    padding: 25px;

                    h2 {
                        font-size: 24px;
                        letter-spacing: 2px;
                    }

                    .form {

                        .btn_submit {
                            font-size: 17px;
                        }
                    }
                }
            }
        }
    }


    /*=============== PAGE 3 ===============*/
    /*=============== HERO PROGRAMS ===============*/
    .hero_class {
        padding: 12rem 0 10rem 0;

        .hero_class_container {
            .hero_class_content {
                .hero_class_text {
                    width: 480px;

                    h2 {
                        font-size: 32px;
                    }

                    p {
                        width: 440px;
                        font-size: 16px;
                    }

                    form .input {
                        width: 480px;
                    }
                }

                .hero_class_img {
                    width: 500px;
                    height: auto;
                }
            }
        }
    }

    /*=============== CLASSES ===============*/
    .classes {
        padding: 4rem 2rem 10rem 2rem;



        .ballon1,
        .ballon2,
        .ballon3,
        .ballon4 {
            width: 100px;
            height: 160px;
        }

        .our_classes_container {
            h2 {
                width: 65%;
            }

            .our_classes_items::after {
                height: 60px;
                bottom: -85px;
            }
        }
    }


    /*=============== PAGE 4 ===============*/
    /*=============== SINGLE CLASSES ===============*/
    .single_classes_hero {
        padding: 14rem 3rem 4rem 3rem;

        .single_classes_container {
            gap: 2rem;

            .single_classes_text {
                h1 {
                    font-size: 32px;
                }

                p {
                    width: 400px;
                }
            }

            .single_classes_img {
                width: 600px;
                height: auto;
            }
        }
    }

    /*===================SINGLE CLASSES DATA================*/
    .single_classes_data {
        .single_classes_data_container {
            gap: 3rem;

            .adventure {
                width: 320px;
            }

            .single_classes_data_text {
                width: 65%;

                .group_spical .items {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }


    /*=================== PAGE 5 ================*/
    /*=================== STORIES HERO ================*/
    .hero_stories {
        padding: 12rem 2rem 4rem 2rem;

        .hero_stories_container {

            .hero_stories_content {

                .our_stories_contant {
                    gap: 2rem;

                    &::after {
                        bottom: -25%;
                        right: 5%;
                    }

                    &::before {
                        bottom: -25%;
                        left: 5%;
                    }

                    .item {
                        .item_data {
                            padding: 1rem;

                            h3 {
                                width: 285px;
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }
    }

    /*=================== STORIES ================*/
    .stories {
        padding: 5rem 2rem;

        .stories_container {
            .stories_content {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 2rem;
                row-gap: 4rem;

                .item {
                    .item_data {
                        h3 {
                            width: 100%;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }

    /*=================== PAGE 6 ================*/
    /*=================== SINGLE STORIES ================*/
    .single_stories {

        .single_stories_container {
            .hero_single_stories {
                .img {
                    height: 380px;
                }

                h1 {
                    font-size: 24px;
                }
            }

            .single_stories_data_text {
                width: 80%;

                .group {
                    h2 {
                        font-size: 20px;
                    }

                    p,
                    ul li,
                    ol li {
                        font-size: 13px;
                    }
                }

                .img {
                    width: 100%;
                    height: 280px;
                }
            }

            .related_stories {
                h2 {
                    font-size: 32px;
                }

                .our_stories_contant {
                    gap: 1.5rem;

                    .item {
                        .item_data {
                            padding: 1.5rem;

                            h3 {
                                font-size: 17px;
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .subscribe {
                p {
                    width: 100%;
                }

                form {
                    width: 100%;
                }
            }
        }
    }


    /*=================== PAGE 7 ================*/
    /*=================== STORE HERO ================*/
    .hero_store {

        .hero_store_container {
            .hero_store_content {
				&::before {
                    width: 500px;
                    height: 350px;
                }

                .hero_store_text {
                    width: 500px;

                    h2 {
                        font-size: 32px;
                        letter-spacing: 2px;
                    }

                    p {
                        font-size: 17px;
                        letter-spacing: 1.5px;
                    }
                }

                .store_img {
                    width: 450px;
                    height: 400px;
                }
            }
        }
    }

    /*=============== PRODUCTS ===============*/
    .products {
        .products_container {
            .products_content {
                grid-template-columns: repeat(3, 1fr);
                column-gap: 2rem;

                .item {
                    .product_img {
                        width: 145px;
                        height: 145px;
                    }

                    h3 {
                        font-size: 17px;
                    }
                }
            }
        }
    }

    /*=============== STORE ===============*/
    .store_1,
    .store_2 {
        padding-left: 3rem;
        padding-right: 3rem;

        .our_gifts_container {
            .our_gifts_header {
                width: 700px;
                margin-left: 6rem;

                h2 {
                    font-size: 32px;
                }

                p {
                    font-size: 17px;
                    width: 700px;
                }
            }
        }
    }

    /*=============== PAGE 8 ===============*/
    /*===============  SINGLE STORE HERO ===============*/
    .single_store {

        .single_store_container {
            .single_store_content {
                gap: 2rem;

                .imgs {
                    .main_img {
                        width: 500px;
                        height: 460px;
                    }

                    .sub_imgs {
                        .small_img {
                            .sub_img {
                                width: 240px;
                                height: 200px;
                            }
                        }

                        .third_img {
                            width: 500px;
                            height: 250px;
                        }
                    }
                }

                .about_single_store {
                    gap: 1.5rem;

                    .data_1,
                    .data_2 {
                        width: 500px;
                    }

                    .data_1 {
                        h2 {
                            font-size: 32px;
                            width: 100%;
                        }

                        .decription p {
                            width: 100%;
                        }
                    }

                    .data_2 {
                        .price span {
                            font-size: 40px;
                        }

                        .price a {
                            font-size: 22px;
                        }

                        .reviews .user p {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 9 ===============*/
    /*=============== HONOR HERO ===============*/
    .hero_honor {

        .hero_honor_container {
            .hero_honor_content {
                gap: 2rem;

                .hero_honor_text {
                    h2 {
                        font-size: 40px;
                        width: 420px;
                    }

                    p {
                        width: 450px;
                        font-size: 16px;
                    }

                    a {
                        width: 250px;
                        height: 45px;
                        font-size: 17px;
                    }
                }

                .hero_honor_img {
                    width: 600px;
                    height: 480px;
					
					&::after {
						top: 11px;
						left: 21%;
					}
                }
            }
        }
    }

    /*=============== HONOR ===============*/
    .honor {
        padding: 4rem 2rem;

        .honor_container {
            h2 {
                font-size: 32px;
                margin-bottom: 4rem;
            }

            .honor_content {
                grid-template-columns: 1fr 1fr;
                gap: 3rem;

                .studen_store {
                    width: 100% !important;
                    height: 310px;
                    padding: 1rem 2rem 2rem 5rem;

                    h3 {
                        font-size: 22px;
                    }

                    p {
                        width: 100%;
                        font-size: 15px;
                    }

                    span {
                        font-size: 16px;
                    }

                    .studen_img {
                        width: 90px;
                        height: 90px;
                        top: -20px;
                        left: -40px;
                    }

                    &::after {
                        width: 320px;
                        height: 240px;
                    }
                }
            }
        }
    }

    /*=============== PAGE 10 ===============*/
    /*=============== PRICCING HERO ===============*/
    .hero_pricing {
        /* padding: 18rem 2rem 4rem 2rem; */

        .hero_pricing_container {
            .hero_pricing_header {
                h1 {
                    font-size: 40px;
                }

                p {
                    font-size: 18px;
                    width: 80%;
                    margin: 0 auto;
                }

                /* 
                &::before {
                    left: -100px;
                    width: 250px;
                    height: 260px;
                }

                &::after {
                    right: -120px;
                    width: 200px;
                    height: 90px;
                } */
            }
        }
    }

    /*===============PRICCING USER===============*/
    .pricing {

        &::before {
            width: 200px;
            height: 320px;
        }

        &::after {
            right: 5%;
            width: 75px;
            height: 75px;
        }

        .pricing_container {
            .pricing_content {
                &::before {
                    width: 70px;
                    height: 70px;
                    bottom: -15%;
                    left: 0%;
                }

                .pricing_header {
                    h2 {
                        font-size: 32px;
                    }

                    .time_session {
                        padding: 0.8rem 1.2rem;

                        span,
                        i,
                        p {
                            font-size: 15px;
                        }
                    }
                }

                .priccing_cards {
                    gap: 1.5rem;

                    .card {
                        width: 95%;
                        padding: 1.2rem 2rem;

                        .desc_plan {
                            width: 280px;
                        }

                        .price_plan h4 {
                            font-size: 38px;
                        }

                        a {
                            width: 140px;
                            height: 40px;
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }


    /*===============PRICCING GROUP===============*/
    .group_pricing {
        padding: 7rem 2rem;

        &::before {
            width: 90px;
            height: 80px;
            left: 5%;
        }

        &::after {
            width: 80px;
            height: 80px;
            right: 5%;
        }

        .pricing_container {
            .pricing_content {
                &::before {
                    width: 95px;
                    height: 85px;
                    bottom: -10%;
                    left: -3%;
                }

                &::after {
                    width: 60px;
                    height: 70px;
                    bottom: -10%;
                    right: -3%;
                }

                .pricing_header {
                    h2 {
                        font-size: 32px;
                    }
                }
            }
        }
    }

    /*===============GAME POINTS===============*/
    .game_points {
        .game_points_container {
            .game_points_content {
                width: 680px;
                padding: 4rem 0;

                h2 {
                    font-size: 32px;
                }

                h3 {
                    font-size: 17px;
                }

                p {
                    font-size: 17px;
                }

                a {
                    width: 280px;
                    height: 46px;
                    font-size: 17px;
                }
            }
        }
    }

    /*===============REDEEM POINTS===============*/
    .redeem_points {
        padding: 6rem 2rem 12rem 2rem;

        .redeem_points_container {
            .redeem_points_content {

                .redeem_points_header {
                    z-index: 1;
                }

                h2 {
                    font-size: 32px;
                }

                p {
                    width: 700px;
                    font-size: 17px;
                }

                .redeem_points_bannar {
                    width: 95%;
                    padding: 2.5rem;

                    h3 {
                        font-size: 21px;
                    }

                    p {
                        font-size: 17px;
                    }
                }
            }
        }
    }

    /*=============== PAGE 11 ===============*/
    /*=============== TERMS AND PRIVACIY ===============*/
    .terms_privacy {

        .terms_privacy_container {
            .terms_privacy_content {
                gap: 2rem;

                .terms_privacy_header {
                    h2 {
                        font-size: 40px;
                    }

                    .pra,
                    p {
                        font-size: 18px;
                    }
                }

                .terms_privacy_body {
                    gap: 1.5rem;

                    .group_data {
                        h3 {
                            font-size: 24px;
                        }

                        p,
                        ul,
                        ol,
                        a {
                            font-size: 17px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 12 ===============*/
    /*=============== HERO ABOUT ===============*/
    .hero_about {
        padding: 15rem 2rem 5rem 2rem;

        .hero_about_container {
            gap: 4rem;

            .hero_about_header {
                h2 {
                    font-size: 38px;
                }

                p {
                    font-size: 18px;
                }
            }

            .wheel-container {
                width: 360px;
                height: 360px;
            }

            .card {
                gap: 6rem;
                padding: 2.5rem;

                .photo {
                    width: 320px;
                    height: 360px;
                }

                .content {
                    h1 {
                        font-size: 40px;
                    }

                    h2 {
                        font-size: 22px;
                    }

                    p {
                        font-size: 17px;
                    }
                }
            }
        }
    }

    /*===============OUR STUDENTS STORIES===============*/
    .our_students_stories {
        padding: 4rem 2rem;

        .our_students_stories_container {
            gap: 4rem;

            .our_students_stories_content {
                gap: 3rem;

                .story_card {
                    width: 420px;

                    .body_story_card p {
                        width: 100%;
                    }
                }
            }
        }
    }

    /*=============== PAGE 13 ===============*/
    /*=============== ERROR PAGE ===============*/



    /*===============FOOTER===============*/
    footer {
        padding: 4rem 2rem 1rem 2rem;
    }

    .footer_info p,
    .footer_info form input,
    .footer_info form button {
        width: 300px;
    }

    .footer_info h3 {
        font-size: 22px;
    }

    .desc_img_logo .img_logo img {
        width: 130px;
        height: 130px;
    }

}



@media (max-width: 991px) {
    /* Header */

    .header {
        .subheader {
            .subheader_container {

                .information {
                    flex-wrap: wrap;
                    gap: 0.6rem;

                    h4 {
                        font-size: 18px;
                    }

                    .promo {
                        font-size: 15px;
                    }

                    .time {
                        .time-box {
                            min-width: 48px;
                            padding: 6px 8px;

                            .time-num {
                                font-size: 18px;
                            }

                            .time-label {
                                font-size: 7px;
                            }
                        }
                    }
                }
            }
        }
    }

    .nav {
        padding: 0 1rem;
    }

    .nav_logo img {
        width: 80px;
        height: 80.280792236328125px;
    }

    .nav_list {
        gap: 1rem;
    }

    .nav_link,
    .nav_link_drop {
        font-weight: var(--font-semi-bold);
        color: var(--pink);
		
		&:hover {
			color: var(--pink);
			text-shadow: none;
		}
    }


    .nav .btn_free,
    .btn-mobile {
        width: 100%;
        height: 42px;
        padding: 8px 20px;
        color: white;
        background: var(--pink);
    }

    .nav_menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem;
        transition: right 0.3s ease;
        z-index: var(--z-fixed);
    }

    .nav_list {
        flex-direction: column;
        gap: 2.5rem;

        .input {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;

            input {
                width: 107.48556518554688px;
                height: 27px;
                background: transparent;
                color: var(--pink);
                font-family: var(--title-font);
                font-weight: var(--font-regular);
                font-size: 18px;

                &::placeholder {
                    color: var(--pink);
                    font-family: var(--title-font);
                    font-weight: var(--font-regular);
                    font-size: 18px;
                }

            }

            i {
                color: var(--pink);
            }
        }

        .new {
            position: relative;

            &::after {
                content: "new";
                position: absolute;
                top: -35px;
                right: -45px;
                background: transparent;
                color: var(--pink);
                font-size: 12px;
                font-weight: var(--font-bold);
                font-weight: var(--title-font);
                border-radius: 50%;
                padding: 8px 10px;
                border: 2px solid var(--pink);
            }

            &::before {
                content: "";
                position: absolute;
                top: 0px;
                right: -14px;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                border-left-color: var(--pink);
                transform: rotate(110deg);
                z-index: 1;
            }
        }
    }

    /* بنخفي الزرار الأصلي على الشاشات الصغيرة */
    .nav .btn_free,
	.dropdown{
        display: none;
    }

    /* بنظهر الزرار داخل المنيو على الشاشات الصغيرة */
    .nav_menu .btn-mobile {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 1.5rem;
        padding: 2px 0px;
    }
	
	.nav_link_ph{
		display: flex;
	}

    .nav_toggle {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        margin-left: 25px;
        color: white;
    }

    .nav_close {
        display: block;
        font-size: 1.5rem;
        color: var(--pink-white);
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
    }


    .show-menu {
        right: 0;
    }

    /*=============== PAGE 1 ===============*/
    /*=============== HOME ===============*/
    .home {
        padding: 12rem 0rem 10rem 0rem;
        background-position: left;

        .home_container .home_content {
            flex-direction: column-reverse;
            text-align: center;

            .home_text {
                width: 100%;
                align-items: center;

                h2 {
                    font-size: 32px;
                    width: 50%;

                    &::after {
                        bottom: 0px;
                        right: 35px;
                        width: 40.603256px;
                        height: 40.52829px;
                    }
                }

                p {
                    font-size: 15px;
                    width: 70%;
                }

                .home_btns {
                    justify-content: center;

                    &::before {
                        left: 110%;
                        bottom: -45px;
                    }
                }
            }

            .home_img {
                width: 420px;
                height: 410px;
                margin-top: 3rem;

                &::before {
                    top: 10px;
                    left: -15%;
                }
            }
        }
    }

    /*===============CHOOSE US===============*/
    .choose_us {
        padding: 4rem 0rem;

        /* &::before,
        &::after {
            display: none;
        }

        .planet1,
        .planet2 {
            display: none;
        } */

        .choose_us_container {
            h2 {
                font-size: 30px;
            }

            p {
                width: 80%;
                margin: 0 auto 3rem;
            }

            .choose_us_content {
                flex-wrap: wrap;
                gap: 3rem;
                width: 500px;

                &::after {
                    display: none;
                }

                .item {

                    h3 {
                        font-size: 15px;
                    }
                }
            }

            a {
                /* width: 280px; */
                height: 45px;
                margin-top: 4rem;
            }
        }
    }

    /*=============== SPECIAL ===============*/
    .special {
        padding: 7rem 2rem;

        &::before,
        &::after {
            height: 200px;
        }

        .special_container {
            .special_content {
                flex-direction: column-reverse;
                gap: 3rem;
                text-align: center;

                .special_text {
                    align-items: center;
                    width: 100%;

                    &::before {
                        top: -65px;
                        left: 70px;
                    }

                    h2 {
                        font-size: 30px;
                    }

                    p {
                        font-size: 16px;
                        width: 80%;
                    }
                }

                .special_img {
                    width: 500px;
                    height: 340px;


                    &::after {
                        top: 0;
                        right: -50px;
                    }
                }
            }

            .ditals {
                flex-wrap: wrap;
                justify-content: center;
                gap: 2rem;

                .data {
                    width: 45%;
                    height: 95px;
                }
            }
        }
    }

    /*===============OUR CLASSES===============*/
    .our_classes {
        padding: 3.5rem 1.5rem;

        .our_classes_container {
            h2 {
                font-size: 28px;
                margin-bottom: 2.5rem;
            }

            .our_classes_items {
                grid-template-columns: repeat(2, 1fr);
                gap: 2.5rem;

                .item {
                    .item_img {
                        height: 190px;
                    }

                    .item_data {
                        h3 {
                            font-size: 20px;
                        }

                        ul {
                            li {
                                font-size: 11px;
                                line-height: 16px;
                            }
                        }

                        .about_item {
                            gap: 12px;

                            span {
                                font-size: 13px;
                            }
                        }
                    }
                }
            }

            .our_story_btn {
                margin-top: 3.5rem;

                a {
                    font-size: 24px;
                }
            }
        }
    }


    /*===================OUR GIFTS================*/
    .our_gifts {
        padding: 3.5rem 0rem;

        .our_gifts_container {
            .our_gifts_header {
                h2 {
                    font-size: 30px;
                }

                p {
                    font-size: 17px;
                }
            }

            .custom-slider {
                width: 95%;
            }

            .our_gifts_item {
                flex: 0 0 calc(50% - 1rem);

                .item_data {
                    p {
                        font-size: 13px;
                        line-height: 22px;
                    }
                }

                .item_btn_price {

                    h4,
                    h5 {
                        font-size: 16px;
                    }
                }
            }

            .prev-btn,
            .next-btn {
                width: 55px;
                height: 55px;

                i {
                    font-size: 25px;
                }
            }
        }
    }

    /*===================OUR STORIES================*/
    .our_stories {
        padding: 4rem 2rem;
        background-position: center;

        &::before {
            top: 7px;
            width: 170px;
            height: 125.694824px;
        }

        .our_stories_container {
            h2 {
                width: 450px;
                font-size: 28px;

                &::before {
                    left: -20%;
                    width: 60.912994px;
                    height: 60.912994px;
                }
            }

            .our_stories_contant {
                flex-wrap: wrap;
                justify-content: center;
                gap: 4rem;

                &::before {
                    bottom: -10%;
                    left: 5%;
                }

                &::after {
                    bottom: -10%;
                    right: 5%;
                }

                .item {
                    width: 45%;

                    h3 {
                        width: 100%;
                    }
                }
            }
        }
    }

    /*===============STUDENTS STORIES===============*/
    .students_stories {
        padding: 4rem 2rem;

        .gift {
            top: 40px;
            width: 150px;
            height: 160px;
        }

        .star {
            bottom: 80px;
            width: 80px;
            height: 90px;
        }

        .mosque {
            width: 400px;
            height: auto;
        }

        .students_stories_container {
            h2 {
                font-size: 30px;
                width: 350px;
            }

            .swiper {


                .swiper-wrapper {

                    .studen_store {
                        height: auto;
                        padding: 2rem 2rem 2rem 6rem;

                        &::after {
                            height: 80%;
                        }

                        p {
                            font-size: 15px;
                        }

                        h3 {
                            font-size: 22px;
                        }

                        span {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    /*===============OFFERS===============*/
    .offers {
        padding: 4rem 2rem;

        .header_offers {
            h2 {
                font-size: 30px;
                margin-bottom: 2rem;
            }
        }

        .offers_content {

            .current_offers,
            .previous_offers {
                h3 {
                    font-size: 28px;
                }

                .items {
                    grid-template-columns: 1fr;
                    gap: 2rem;

                    .item {
                        width: 100%;
                        height: auto;
                        align-items: center;
                        padding: 2rem 1.5rem;
                        gap: 1.5rem;

                        .item_img {
                            width: 150px;
                            height: 150px;
                        }

                        .item_data {

                            h4 {
                                font-size: 18px;
                            }

                            p {
                                width: 80%;
                            }

                            .btn_date {
                                gap: 1rem;

                                a {
                                    height: 35px;
                                }
                            }
                        }

                        .discount {
                            height: 40px;
                        }
                    }
                }
            }
        }
    }

    /*===============FORM TALK===============*/
    .form_talk {
        padding: 1rem 1.5rem 4rem 1.5rem;

        .form_talk_container {
            padding: 4rem 1.5rem 2rem 1.5rem;
            background-position: center;

            &::before {
                width: 70px;
                height: 75px;
            }

            &::after {
                bottom: 10%;
            }

            h2 {
                font-size: 30px;
                margin-bottom: 3rem;
            }

            span {
                width: 55%;
            }

            .contact-form {
                .name_email {
                    flex-direction: column;
                    gap: 1rem;
                }

                input,
                textarea {
                    font-size: 15px;
                }

                button {
                    width: 240px;
                    height: 46px;
                    font-size: 20px;
                }
            }
        }
    }

    /*===============QUESTIONS===============*/
    .questions {
        padding: 4rem 1.5rem;

        .questions_content {
            flex-direction: column;
            align-items: center;
            gap: 2rem;

            &::after {
                z-index: -1;
            }
        }

        .questions_accordion {
            width: 100%;
        }

        .questions_data {
            width: 100%;
            padding: 2rem;

            p {
                width: 100%;
            }
        }

        .questions_container h2 {
            text-align: center;
            margin-bottom: 2rem;
        }
    }

    /*=================== PAGE 2 ================*/
    /*=================== FORM ================*/
    .form_section {
        padding: 13rem 2rem 3rem 2rem;

        .form_container {
            .group_container {
                gap: 1.5rem;

                .form_img {
                    width: 100%;
                    height: 729px;

                    img {
                        width: 140px;
                        height: 140px;
                    }
                }

                .form_data {
                    padding: 20px 25px;
                    width: 100%;

                    h2 {
                        font-size: 22px;
                        letter-spacing: 1.5px;
                    }

                    .form {
                        width: 100%;
                    }
                }
            }

            .success_message {
                width: 100%;
                height: auto;
                padding: 3rem 2rem;
                gap: 1.5rem;

                h2 {
                    width: 100%;
                    font-size: 24px;
                    letter-spacing: 2px;
                }

                p {
                    font-size: 18px;
                }

                a {
                    font-size: 18px;
                }
            }
        }
    }

    /*=============== PAGE 3 ===============*/
    /*=============== HERO PROGRAMS ===============*/
    .hero_class {
        padding: 13rem 0 8rem 0;

        &::after {
            bottom: -55px;
            height: 175.531525px;
        }

        .hero_class_container {

            .certificate {
                position: absolute;
                bottom: 80%;
                left: 75%;
                width: 120.99939px;
                height: 130.503433px;
            }

            &::before {
                bottom: 90%;
                left: 20%;
                width: 56px;
                height: 45px;
            }

            &::after {
                bottom: 49%;
                left: 31%;
                width: 107.023827px;
                height: 88.49144px;
            }

            .hero_class_content {
                flex-direction: column-reverse;
                gap: 3rem;
                text-align: center;



                .hero_class_text {
                    width: 100%;
                    align-items: center;

                    h2 {
                        font-size: 30px;
                        width: 60%;
                    }

                    form .input {
                        width: 100%;
                    }
                }

                .hero_class_img {
                    width: 420px;
                    height: auto;
                }
            }
        }
    }

    /*=============== CLASSES ===============*/
    .classes {
        padding: 4rem 2rem 9rem 2rem;

        .ballon1,
        .ballon2,
        .ballon3,
        .ballon4 {
            width: 90px;
            height: 140px;
            opacity: 0.8;
        }

        .our_classes_container {
            h2 {
                width: 55%;
                margin-bottom: 3rem;
            }

            .span_our_classes {
                font-size: 16px;
            }

            .our_classes_items::after {
                height: 55px;
                bottom: -65px;
            }
        }
    }


    /*=============== PAGE 4 ===============*/
    /*=============== SINGLE CLASSES ===============*/
    .single_classes_hero {
        padding: 13rem 2rem 4rem 2rem;

        .single_classes_container {
            flex-direction: column-reverse;
            gap: 3rem;

            .single_classes_text {

                h1 {
                    font-size: 30px;
                }

                h3 {
                    width: 180px;
                    height: 30px;
                    font-size: 14px;
                }

                p {
                    width: 90%;
                    font-size: 15px;
                }

                .btns {
                    width: 100%;

                    .btn {
                        width: 80%;
                    }
                }
            }

            .single_classes_img {
                width: 500px;
                height: auto;
            }
        }
    }

    /*===================SINGLE CLASSES DATA================*/
    .single_classes_data {
        padding: 4rem 2rem;

        .single_classes_data_container {
            flex-direction: column-reverse;
            gap: 4rem;

            .adventure {
                position: relative;
                width: 100%;
                top: 0;
                order: 1;
            }

            .single_classes_data_text {
                width: 100%;

                .group_spical .items {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }


    /*=================== PAGE 5 ================*/
    /*=================== STORIES HERO ================*/
    .hero_stories {
        padding: 16rem 2rem 4rem 2rem;

        .hero_stories_container {

            .hero_stories_content {
                .hero_stories_text {
                    h2 {
                        font-size: 30px;
                    }

                    p {
                        font-size: 18px;
                    }
                }

                .our_stories_contant {
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 4rem;

                    &::before {
                        bottom: -10%;
                        left: 5%;
                    }

                    &::after {
                        bottom: -10%;
                        right: 5%;
                    }

                    .item {
                        width: 45%;

                        h3 {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /*=================== STORIES ================*/
    .stories {
        padding: 4rem 2rem;

        .stories_container {
            .stories_content {
                grid-template-columns: repeat(2, 1fr);
                column-gap: 2rem;
                row-gap: 3rem;

                .item {
                    .item_img {
                        height: 180px;
                    }

                    .item_data {
                        h3 {
                            font-size: 17px;
                            line-height: 22px;
                        }

                        h4 {
                            font-size: 14px;
                        }
                    }

                    .date {
                        left: 20px;

                        h5 {
                            font-size: 28px;
                        }
                    }
                }
            }
        }

        .pagination {
            margin-top: 2.5rem;
            gap: 0.5rem;
        }
    }


    /*=================== PAGE 6 ================*/
    /*=================== SINGLE STORIES ================*/
    .single_stories {
        padding: 15rem 2rem 4rem 2rem;

        .single_stories_container {
            .hero_single_stories {
                .img {
                    height: 340px;
                }

                h1 {
                    font-size: 22px;
                }
            }

            .single_stories_data_text {
                width: 100%;

                .group {
                    h2 {
                        font-size: 19px;
                    }

                    p {
                        line-height: 22px;
                    }
                }

                .img {
                    height: 250px;
                }
            }

            .related_stories {
                gap: 4rem;

                .our_stories_contant {
                    flex-wrap: wrap;

                    .item {
                        width: 48%;
                    }
                }
            }

            .subscribe {
                p {
                    font-size: 15px;
                }

                form {
                    flex-direction: column;
                    align-items: start;
                    gap: 1rem;
                    width: 100%;

                    .form_group {
                        width: 100%;

                        input {
                            width: 100%;
                        }

                        .input {
                            width: 100%;

                        }
                    }
                }
            }
        }
    }


    /*=================== PAGE 7 ================*/
    /*=================== STORE HERO ================*/
    .hero_store {
        padding: 15rem 2rem 6rem 2rem;

        .hero_store_container {
            .hero_store_content {
                flex-direction: column-reverse;
                justify-content: center;
                align-items: center;
				
				&::before{
					width: 465px;
					top: 0%;
					right: 23%;
				}

                .hero_store_text {
                    /* width: 100%; */
                    text-align: center;
                    align-items: center;
                    gap: 1rem;

                    h2 {
                        font-size: 30px;
                        letter-spacing: 2px;
                    }

                    p {
                        font-size: 16px;
                    }
                }

                .store_img {
                    width: 400px;
                    height: 350px;
                    margin-top: 2rem;
                }
            }
        }
    }

    /*=============== PRODUCTS ===============*/
    .products {
        padding: 4rem 2.5rem;

        .products_container {
            h2 {
                font-size: 32px;
                margin-bottom: 3.5rem;
            }

            .products_content {
                grid-template-columns: repeat(2, 1fr);
                column-gap: 2rem;
                row-gap: 2.5rem;

                .item {
                    .product_img {
                        width: 130px;
                        height: 130px;
                    }

                    h3 {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /*=============== STORE ===============*/
    .store_1,
    .store_2 {
        padding-left: 2rem;
        padding-right: 2rem;

        .our_gifts_container {
            .our_gifts_header {
                width: 100%;
                margin-left: 0;
                align-items: center;
                text-align: center;

                h2 {
                    font-size: 28px;
                    text-align: center;
                }

                p {
                    font-size: 16px;
                    text-align: center;
                    width: 100%;
                }
            }
        }
    }

    .store_2 .custom-slider {
        margin: 0 auto;
    }

    /*=============== PAGE 8 ===============*/
    /*===============  SINGLE STORE HERO ===============*/
    .single_store {
        padding: 15rem 2rem 4rem 2rem;

        .single_store_container {
            .single_store_content {
                flex-direction: column;
                align-items: center;

                .imgs {
                    width: 100%;
                    flex-direction: column;

                    .main_img {
                        width: 100%;
                        height: 405px;
                    }

                    .sub_imgs {
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: center;
                        width: 100%;

                        .small_img {
                            flex-direction: row;
                            width: 100%;
                            gap: 1rem;

                            .sub_img {
                                width: 100%;
                                height: 415px;
                            }
                        }

                        .third_img {
                            width: 100%;
                            height: 260px;
                        }
                    }
                }

                .about_single_store {
                    flex-direction: column;
                    align-items: center;

                    .data_1,
                    .data_2 {
                        width: 100%;
                    }

                    .data_1 {


                        .colors .color {
                            justify-content: center;
                            flex-wrap: wrap;
                        }

                    }

                    .data_2 {
                        .price {
                            gap: 0.5rem;
                        }

                        .reviews {

                            .users .user {
                                p {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 9 ===============*/
    /*=============== HONOR HERO ===============*/
    .hero_honor {
        padding: 14rem 2rem 3rem 2rem;

        .hero_honor_container {
            .hero_honor_content {
                flex-direction: column-reverse;
                align-items: center;
                text-align: center;
                gap: 3rem;

                .hero_honor_text {
                    align-items: center;

                    h2 {
                        font-size: 36px;
                    }

                    p {
                        font-size: 16px;
                    }

                    a {
                        margin-top: 1.5rem;
                        width: 240px;
                    }
                }

                .hero_honor_img {
                    width: 100%;
                    max-width: 600px;
                    height: auto;

                    img {
                        width: 100%;
                        height: auto;
                    }
					
					
                }
            }
        }
    }

    /*=============== HONOR ===============*/
    .honor {
        padding: 4rem 2rem;

        .honor_container {
            h2 {
                font-size: 30px;
                margin-bottom: 3rem;
            }

            .honor_content {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 3rem;

                .studen_store {
                    width: 90% !important;
                    height: auto;
                    padding: 2rem 2rem 2rem 6rem;
                    text-align: start;

                    h3 {
                        font-size: 22px;
                    }

                    p {
                        width: 100%;
                        font-size: 15px;
                        line-height: 22px;
                    }

                    span {
                        font-size: 16px;
                    }

                    .studen_img {
                        width: 90px;
                        height: 90px;
                        top: -20px;
                        left: -40px;
                    }

                    &::after {
                        width: 280px;
                        height: 200px;
                        opacity: 0.5;
                    }
                }
            }
        }
    }

    /*=============== PAGE 10 ===============*/
    /*=============== PRICCING HERO ===============*/
    .hero_pricing {
        padding: 22rem 2rem 3rem 2rem;

        .hero_pricing_container {
            .hero_pricing_header {
                h1 {
                    font-size: 36px;
                }

                p {
                    font-size: 17px;
                }

                &::before {
                    bottom: -60px;
                    left: -100px;
                    width: 240.7px;
                    height: 245.69px;
                }

                &::after {
                    top: -70px;
                    right: -150px;
                    width: 190.96402px;
                    height: 83.687927px;
                }
            }
        }
    }

    /*===============PRICCING USER===============*/
    .pricing {
        padding: 4rem 2rem;


        .pricing_container {
            .pricing_content {

                .pricing_header {
                    h2 {
                        font-size: 30px;
                    }
                }

                .priccing_cards {

                    .card {

                        .price_plan {

                            h4 {
                                font-size: 36px;
                            }

                            span {
                                font-size: 12px;
                            }
                        }

                        a {
                            width: 130px;
                            height: 40px;
                        }
                    }
                }
            }
        }
    }

    /*===============PRICCING GROUP===============*/
    .group_pricing {
        padding: 6rem 2rem;

    }

    /*===============GAME POINTS===============*/
    .game_points {
        height: auto;
        padding: 8rem 2rem;

        .game_points_container {
            .game_points_content {
                width: 550px;
                padding: 3.5rem 0;

                h2 {
                    font-size: 30px;
                }

                h3 {
                    font-size: 16px;
                }

                .glow-line {
                    width: 85%;
                    height: 6px;
                }

                p {
                    font-size: 16px;
                }

                a {
                    width: 250px;
                    height: 45px;
                    font-size: 16px;
                }
            }
        }
    }

    /*===============REDEEM POINTS===============*/
    .redeem_points {
        padding: 6rem 2rem 10rem 2rem;

        &::before {
            left: 5%;
            width: 110px;
            height: 130px;
        }

        &::after {
            right: 5%;
            width: 180px;
            height: 110px;
        }

        .redeem_points_container {
            .redeem_points_content {
                h2 {
                    font-size: 30px;
                    text-align: center;
                }

                p {
                    width: 90%;
                    font-size: 16px;
                }

                .redeem_points_bannar {
                    width: 100%;
                    padding: 2rem;

                    h3 {
                        font-size: 20px;
                    }

                    p {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /*=============== PAGE 11 ===============*/
    /*=============== TERMS AND PRIVACIY ===============*/
    .terms_privacy {
        padding: 15rem 2rem 4rem 2rem;

        .terms_privacy_container {
            .terms_privacy_content {
                .terms_privacy_header {

                    h2 {
                        font-size: 36px;
                    }

                    .pra,
                    p {
                        font-size: 17px;
                        width: 100%;
                    }
                }

                .terms_privacy_body {
                    .group_data {
                        h3 {
                            font-size: 22px;
                        }

                        p,
                        ul,
                        ol,
                        a {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 12 ===============*/
    /*=============== HERO ABOUT ===============*/
    .hero_about {
        padding: 15rem 2rem 4rem 2rem;

        .hero_about_container {
            gap: 3rem;

            .hero_about_header {
                text-align: center;

                h2 {
                    font-size: 34px;
                }

                p {
                    font-size: 17px;
                    width: 90%;
                    margin: 0 auto;
                }
            }

            .wheel-container {
                width: 400px;
                height: 400px;
            }

            .card {
                width: 90%;
                flex-direction: column;
                gap: 2rem;
                padding: 1rem;

                .photo {
                    width: 230px;
                    height: 250px;
                }

                .content {
                    max-width: 100%;

                    h1 {
                        font-size: 36px;
                    }

                    h2 {
                        font-size: 20px;
                    }

                    p {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /*===============OUR STUDENTS STORIES===============*/
    .our_students_stories {
        padding: 4rem 2rem;

        .our_students_stories_container {
            h2 {
                font-size: 30px;

                &::after {
                    right: -25%;
                    top: -25px;
                    width: 70px;
                    height: 70px;
                }
            }

            .our_students_stories_content {
                grid-template-columns: 1fr;
                gap: 3rem;

                .story_card {
                    width: 100%;

                    .header_story_card {
                        gap: 1rem;
                        align-items: start;

                        .img_student {
                            width: 120px;
                            height: 120px;
                        }
                    }

                    .body_story_card p {
                        width: 100%;
                    }
                }
            }
        }
    }

    /*=============== PAGE 13 ===============*/
    /*=============== ERROR PAGE ===============*/
    .error {
        padding: 15rem 2rem;

        .error_container {
            .error_content {
                gap: 2rem;

                .img {
                    width: 500px;
                    height: auto;
                }

                p {
                    width: 90%;
                    font-size: 18px;
                }
            }
        }
    }


    /*===============FOOTER===============*/
    .footer_data {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
    }

    .footer_info form {
        align-items: center;
    }

    .footer_info p {
        width: 90%;
        margin: 0 auto;
    }

    .footer_info form input,
    .footer_info form button {
        width: 90%;
    }

    .footer_copy {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

}

@media (max-width: 768px) {

    /*=============== PAGE 1 ===============*/
    /*=============== HOME ===============*/
    .home {
        padding: 12rem 0rem 10rem 0rem;

        .home_container .home_content {
            .home_text {
                h2 {
                    font-size: 28px;

                    &::after {
                        right: -20px;
                    }
                }

                p {
                    font-size: 14px;
                }

                .home_btns .btn {
                    width: 170px;
                    height: 45px;
                    font-size: 16px;
                }
            }

            .home_img {
                width: 360px;
                height: 340px;
            }
        }
    }

    /*===============CHOOSE US===============*/
    .choose_us {

        &::after {
            top: 65%;
            width: 65px;
            height: 395.0754px;
        }

        &::before {
            top: 40%;
            width: 90px;
            height: 430.0754px;
        }

        .planet1 {
            width: 100.924989px;
            height: 100.000032px;
        }

        .planet2 {
            width: 103.15px;
            height: 94.17px;
        }

        .choose_us_container {
            h2 {
                font-size: 26px;
            }

            p {
                font-size: 14px;
                margin-bottom: 7rem;
            }

            .choose_us_content {
                flex-direction: column;
                gap: 3.5rem;

                &::after {
                    display: flex;
                    transform: rotate(90deg);
                    right: -259px;
                    top: 13%;
                    width: 205%;
                    height: 75%;
                }

                .item {

                    h3 {
                        font-size: 14px;
                    }
                }
            }

            a {
                margin-top: 7rem;
                height: 44px;
            }
        }
    }

    /*=============== SPECIAL ===============*/
    .special {
        padding: 8rem 1.5rem;

        .special_container {
            .special_content {
                .special_text {
                    h2 {
                        font-size: 26px;
                    }

                    p {
                        font-size: 15px;
                    }

                    a {
                        width: 200px;
                        height: 36px;
                        font-size: 16px;
                    }
                }

                .special_img {
                    width: 400px;
                    height: 300px;

                    &::before {
                        left: 0;
                    }
                }
            }

            .ditals {
                .data {
                    padding: 1rem;
                    width: 215px;
                    height: 115px;

                    .number {
                        font-size: 20px;
                    }

                    span {
                        font-size: 18px;
                    }
                }
            }
        }
    }

    /*===============OUR CLASSES===============*/
    .our_classes {
        padding: 3rem 1rem;

        .our_classes_container {
            .span_our_classes {
                font-size: 18px;
            }

            h2 {
                font-size: 26px;
                letter-spacing: 1.5px;
            }

            .our_classes_items {
                grid-template-columns: 1fr;
                gap: 2rem;

                .item {
                    padding: 8px;

                    .item_img {
                        height: 180px;
                    }

                    .item_data {
                        h3 {
                            font-size: 19px;
                        }

                        ul {
                            li {
                                width: 100%;
                                font-size: 11px;
                            }
                        }

                        a {
                            height: 36px;
                            font-size: 14px;
                        }
                    }
                }
            }

            .our_story_btn {
                margin-top: 3rem;

                a {
                    font-size: 22px;
                }
            }
        }
    }

    /*===================OUR GIFTS================*/
    .our_gifts {
        padding: 3rem 0rem;

        .our_gifts_container {
            .our_gifts_header {
                h2 {
                    font-size: 28px;
                }

                p {
                    font-size: 16px;
                    width: 90%;
                }
            }

            .custom-slider {
                margin: 0 auto;
            }

            .our_gifts_item {
                flex: 0 0 100%;

                .item_data {

                    p {
                        width: 90%;
                    }

                    .item_detials_stars {
                        gap: 0.5rem;
                    }
                }
            }

            .prev-btn,
            .next-btn {
                bottom: -20px;
                transform: none;
            }

            .prev-btn {
                transform: translateX(80%);
            }

            .next-btn {
                transform: translateX(-80%);
            }
        }
    }

    /*===================OUR STORIES================*/
    .our_stories {
        padding: 3rem 1.5rem;

        .our_stories_container {
            h2 {
                font-size: 26px;

                &::before {
                    left: 0;
                    top: 35px;
                }
            }

            .our_stories_contant {
                flex-direction: column;
                align-items: center;


                .item {
                    width: 80%;

                    h3 {
                        width: 100%;
                        font-size: 17px;
                    }
                }
            }

            .our_stories_btn {
                font-size: 20px;
            }
        }
    }

    /*===============STUDENTS STORIES===============*/
    .students_stories {
        padding: 7rem 1.5rem;

        .light {
            width: 44.473453521728516px;
            height: 92.24900817871094px;
        }

        .gift {
            width: 166.71090698242188px;
            height: 183.42474365234375px;
        }


        .mosque {
            width: 300px;
        }

        .star {
            bottom: 90px;
            width: 63.53218078613281px;
            height: 72.5859375px;
        }

        .students_stories_container {
            h2 {
                width: 100%;
                font-size: 26px;
                letter-spacing: 1px;
                margin-bottom: 5rem;
                z-index: 1;

            }

            .swiper {
                width: 100%;

                .swiper-button-prev {
                    top: 30px !important;
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    width: 40px;
                    height: 40px;

                    i {
                        font-size: 25px;
                    }
                }

                .swiper-button-next {
                    top: 93% !important;
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    width: 40px;
                    height: 40px;

                    i {
                        font-size: 25px;
                    }
                }

                .swiper-wrapper {
                    gap: 10rem;

                    .studen_store {
                        width: fit-content !important;

                        h3 {
                            font-size: 20px;
                        }

                        p {
                            font-size: 14px;
                            line-height: 22px;
                        }

                        span {
                            font-size: 14px;
                            bottom: 15px;
                            right: 15px;
                        }

                        .studen_img {
                            left: -35px;
                            width: 85px;
                            height: 85px;
                        }
                    }
                }
            }
        }
    }

    /*===============OFFERS===============*/
    .offers {
        padding: 3rem 1.5rem;

        .header_offers {
            .offer_span {
                font-size: 15px;
            }

            h2 {
                font-size: 26px;
            }
        }

        .offers_content {

            .current_offers,
            .previous_offers {
                h3 {
                    font-size: 24px;
                    text-align: center;
                }

                .items {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;

                    .item {
                        width: 100%;
                        padding: 1.5rem;
                        gap: 1rem;

                        .item_img {
                            width: 130px;
                            height: 130px;
                        }

                        .item_data {
                            margin-top: 1rem;

                            h4 {
                                font-size: 17px;
                            }

                            p {
                                font-size: 13px;
                                width: 100%;
                            }

                            .btn_date {
                                a {
                                    height: 32px;
                                    font-size: 14px;
                                }

                                span {
                                    font-size: 11px;
                                }
                            }
                        }

                        .discount {
                            width: 260px;
                            height: 38px;

                            h5 {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    /*===============FORM TALK===============*/
    .form_talk {
        padding: 1rem;

        .form_talk_container {
            padding: 5rem 1rem 2rem 1rem;
            background-position: center;

            &::before {
                width: 60px;
                height: 65px;
                top: 75px;
                left: 40px;
            }

            &::after {
                width: 45px;
                height: 48px;
                bottom: 12%;
                right: 8%;
            }

            h2 {
                font-size: 26px;
            }

            .contact-form {
                padding-inline: 1rem;

                button {
                    width: 220px;
                    height: 44px;
                    font-size: 18px;
                }
            }
        }
    }

    /*===============QUESTIONS===============*/
    .questions {
        padding: 3rem 1rem;

        &::before {
            top: 40px;
            width: 25px;
            height: 48px;
        }

        &::after {
            right: -10%;
            top: 0;
            width: 160px;
            height: 120px;
        }

        .questions_container h2 {
            font-size: 28px;
            text-align: center;
        }

        .questions_accordion {
            width: 100%;
        }

        .question_header h3 {
            font-size: 18px;
        }

        .question_header .plus {
            font-size: 24px;
        }

        .questions_data {
            img {
                width: 80px;
                height: 80px;
            }

            h4 {
                font-size: 20px;
            }

            p {
                font-size: 14px;
            }

            a {
                font-size: 16px;
                height: 44px;
            }
        }
    }

    /*=================== PAGE 2 ================*/
    /*=================== FORM ================*/
    .form_section {
        padding: 13rem 1.5rem 3rem 1.5rem;

        .form_container {
            border: none;
            background-color: transparent;

            .group_container {
                position: relative;
                border: none;
                gap: 1.2rem;
                flex-direction: column;

                .form_img {
                    border: 2px solid #FFDFB5;
                    height: 260px;
                    border-radius: 14.88px;
                    padding-bottom: 3rem;

                    img {
                        width: 120px;
                        height: 120px;
                    }
                }

                .form_data {
                    padding: 20px;

                    h2 {
                        position: absolute;
                        font-size: 22px;
                        letter-spacing: 1px;
                        top: 20%;
                        width: 80%;
                    }

                    .form {
                        gap: 10px;

                        label {
                            font-size: 16px;
                        }

                        input,
                        select {
                            height: 48px;
                            font-size: 14px;
                        }

                        .btn_submit {
                            font-size: 18px;
                            height: 48px;
                        }

                        p {
                            font-size: 12px;
                        }
                    }
                }
            }

            .success_message {
                padding: 2.5rem 1.5rem;
                gap: 1rem;

                h2 {
                    font-size: 22px;
                }

                p {
                    font-size: 16px;
                }

                a {
                    font-size: 17px;
                }
            }
        }
    }


    /*=============== PAGE 3 ===============*/
    /*=============== HERO PROGRAMS ===============*/
    .hero_class {
        padding: 9rem 0 7rem 0;

        .hero_class_container {
            .hero_class_content {
                .hero_class_text {
                    span {
                        width: 180px;
                        height: 28px;
                        font-size: 14px;
                    }

                    h2 {
                        font-size: 26px;
                    }

                    p {
                        font-size: 15px;
                    }

                    form .input {
                        height: 45px;

                        button {
                            font-size: 16px;
                        }
                    }
                }

                .hero_class_img {
                    width: 350px;
                }
            }
        }
    }


    /*=============== CLASSES ===============*/
    .classes {
        padding: 3rem 1.5rem 8rem 1.5rem;

        .ballon1,
        .ballon2,
        .ballon3,
        .ballon4 {
            width: 70px;
            height: 120px;
            opacity: 0.7;
        }

        .our_classes_container {
            .span_our_classes {
                font-size: 15px;
            }

            .our_classes_items::after {
                height: 50px;
                bottom: -70px;
            }
        }
    }


    /*=============== PAGE 4 ===============*/
    /*=============== SINGLE CLASSES ===============*/
    .single_classes_hero {
        padding: 12rem 1.5rem 3rem 1.5rem;

        .single_classes_container {
            .single_classes_text {
                h1 {
                    font-size: 26px;
                }

                p {
                    width: 100%;
                    font-size: 14px;
                }

                .btns {
                    gap: 0.8rem;

                    .btn {
                        font-size: 16px;
                        height: 45px;
                    }
                }
            }

            .single_classes_img {
                width: 400px;
            }
        }
    }

    /*===================SINGLE CLASSES DATA================*/
    .single_classes_data {
        padding: 4rem 1.5rem;

        .single_classes_data_container {
            gap: 3rem;

            .single_classes_data_text {
                .group_spical .items {
                    grid-template-columns: 1fr;
                }

                .bannar {
                    h3 {
                        font-size: 20px;
                    }

                    p {
                        font-size: 15px;
                    }
                }
            }
        }
    }


    /*=================== PAGE 5 ================*/
    /*=================== STORIES HERO ================*/
    .hero_stories {
        padding: 16rem 1.5rem 3rem 1.5rem;

        .hero_stories_container {

            .hero_stories_content {
                .hero_stories_text {
                    h2 {
                        font-size: 26px;
                    }

                    p {
                        font-size: 16px;

                        &::after {
                            bottom: 55px;
                            right: 10%;
                            width: 21px;
                            height: 21px;
                        }
                    }

                    &::before {
                        bottom: 55px;
                        left: 0%;
                        width: 45.99998474121094px;
                        height: 35.6396484375px;
                    }

                    &::after {
                        bottom: 60px;
                        right: 0%;
                        width: 23px;
                        height: 17.799280166625977px;
                    }
                }

                .our_stories_contant {
                    flex-direction: column;
                    align-items: center;


                    .item {
                        width: 80%;

                        h3 {
                            width: 100%;
                            font-size: 17px;
                        }
                    }
                }
            }
        }
    }

    /*=================== STORIES ================*/
    .stories {
        padding: 4rem 1.5rem;

        .stories_container {
            .stories_content {
                grid-template-columns: 1fr;
                row-gap: 2.5rem;

                .item {
                    .item_img {
                        height: 200px;
                    }

                    .item_data {
                        padding: 1.5rem;
                        gap: 1rem;

                        h3 {
                            font-size: 16px;
                            width: 100%;
                        }

                        .about span {
                            font-size: 11px;
                        }
                    }

                    .date {
                        top: -30px;
                        left: 20px;

                        h5 {
                            font-size: 26px;
                        }

                        span {
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        .pagination {
            padding: 1rem;
        }
    }


    /*=================== PAGE 6 ================*/
    /*=================== SINGLE STORIES ================*/
    .single_stories {
        padding: 13rem 1.5rem 3rem 1.5rem;

        .single_stories_container {
            .hero_single_stories {
                span {
                    width: 130px;
                    height: 30px;
                    font-size: 13px;
                }

                h1 {
                    font-size: 20px;
                }

                .img {
                    height: 300px;
                }
            }

            .single_stories_data_text {
                .group {
                    h2 {
                        font-size: 18px;
                    }

                    p {
                        font-size: 13px;
                    }
                }

                .img {
                    height: 220px;
                }
            }

            .share {
                h2 {
                    font-size: 20px;
                }

            }

            .related_stories {
                align-items: center;
                width: 100%;

                h2 {
                    font-size: 28px;
                }

                .our_stories_contant {
                    flex-direction: column;
                    gap: 4rem;

                    .item {
                        width: 100%;
                    }
                }
            }

            .subscribe {
                h2 {
                    font-size: 20px;
                }

                p {
                    font-size: 14px;
                    line-height: 22px;
                }
            }
        }
    }


    /*=================== PAGE 7 ================*/
    /*=================== STORE HERO ================*/
    .hero_store {
        padding: 15rem 1.5rem 5rem 1.5rem;

        .hero_store_container {
            .hero_store_content {
				
				&::before{
					width: 390px;
                    height: 295px;
                    top: 0%;
                    right: 20%;
				}

                .hero_store_text {
                    h2 {
                        font-size: 26px;
                        letter-spacing: 1.5px;
                    }

                    p {
                        font-size: 15px;
                        letter-spacing: 1px;
                    }
                }

                .store_img {
                    width: 320px;
                    height: 280px;
                }
            }
        }
    }

    /*=============== PRODUCTS ===============*/
    .products {
        padding: 4rem 2rem;

        .products_container {
            h2 {
                font-size: 28px;
                margin-bottom: 3rem;
            }

            .products_content {
                grid-template-columns: repeat(2, 1fr);
                column-gap: 1.5rem;
                row-gap: 2rem;

                .item {
                    .product_img {
                        width: 120px;
                        height: 120px;
                    }

                    h3 {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*=============== STORE ===============*/
    .store_1,
    .store_2 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;

        .our_gifts_container {
            .our_gifts_header {
                gap: 6px;

                h2 {
                    font-size: 24px;
                }

                p {
                    font-size: 15px;
                }
            }
        }
    }

    /*=============== PAGE 8 ===============*/
    /*===============  SINGLE STORE HERO ===============*/
    .single_store {
        padding: 13rem 1.5rem 3rem 1.5rem;

        .single_store_container {
            .single_store_content {
                gap: 2rem;

                .imgs {

                    .sub_imgs {
                        .small_img .sub_img {
                            width: 100%;
                            height: 350px;
                        }

                        .third_img {
                            width: 100%;
                            height: 220px;
                        }
                    }
                }

                .about_single_store {
                    gap: 1rem;

                    .data_1 {
                        h2 {
                            font-size: 28px;
                        }

                        .colors h3,
                        .decription h3 {
                            font-size: 22px;
                        }

                        .decription p {
                            font-size: 15px;
                            line-height: 22px;
                        }
                    }

                    .data_2 {
                        .price span {
                            font-size: 36px;
                        }

                        .price a {
                            font-size: 20px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 9 ===============*/
    /*=============== HONOR HERO ===============*/
    .hero_honor {
        padding: 14rem 1.5rem 3rem 1.5rem;

        .hero_honor_container {
            .hero_honor_content {
                gap: 2rem;

                .hero_honor_text {
                    h2 {
                        font-size: 30px;

                        &::after {
                            right: -20px;
                        }

                        .pink {
                            font-size: 22px;
                        }

                        img {
                            width: 50px;
                            height: 18px;
                        }
                    }

                    p {
                        font-size: 15px;
                    }

                    a {
                        height: 44px;
                        font-size: 16px;
                    }
                }

                .hero_honor_img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    /*=============== HONOR ===============*/
    .honor {
        padding: 3rem 1.5rem;

        .honor_container {
            h2 {
                font-size: 26px;
                margin-bottom: 2.5rem;
            }

            .honor_content {
                gap: 2.5rem;

                .studen_store {
                    width: 100% !important;
                    padding: 2rem 1.5rem 2rem 5rem;
                    border: 2px solid white;

                    h3 {
                        font-size: 20px;
                        letter-spacing: 2px;
                    }

                    p {
                        font-size: 14px;
                        width: 100%;
                        line-height: 22px;
                    }

                    span {
                        font-size: 15px;
                        right: 15px;
                        bottom: 15px;
                    }

                    .studen_img {
                        width: 80px;
                        height: 80px;
                        top: -20px;
                        left: -35px;
                    }

                    &::after {
                        display: none;
                    }
                }
            }
        }
    }

    /*=============== PAGE 10 ===============*/
    /*=============== PRICCING HERO ===============*/
    .hero_pricing {
        padding: 20rem 1.5rem 3rem 1.5rem;

        .hero_pricing_container {
            .hero_pricing_header {
                h1 {
                    font-size: 32px;
                }

                p {
                    font-size: 16px;
                }

                &::before {
                    bottom: -17px;
                    left: -20px;
                    width: 130.000313px;
                    height: 130.657715px;
                }

                &::after {
                    top: -25px;
                    right: -40px;
                    width: 84px;
                    height: 36.89493942260742px;
                }
            }
        }
    }

    /*===============PRICCING USER===============*/
    .pricing {
        padding: 3rem 1.5rem;

        .pricing_container {
            .pricing_content {
                .pricing_header {
                    h2 {
                        font-size: 28px;
                    }

                    .time_session {
                        gap: 5px;
                    }
                }

                .priccing_cards {
                    .card {
                        width: 100%;
                        padding: 1.5rem 1rem;

                        .name_plan {
                            h3 {
                                font-size: 15px;
                            }

                            span {
                                font-size: 10px;
                                padding: 0px 0.5rem;
                            }
                        }

                        .desc_plan p {
                            font-size: 10px;
                        }

                        .price_plan h4 {
                            font-size: 25px;
                        }

                        a {
                            width: 100px;
                            height: 35px;
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }

    /*===============PRICCING GROUP===============*/
    .group_pricing {
        padding: 5rem 1.5rem;
    }

    /*===============GAME POINTS===============*/
    .game_points {
        padding: 6rem 1.5rem;

        .game_points_container {
            .game_points_content {
                width: 100%;
                padding: 3rem 1rem;

                h2 {
                    font-size: 28px;
                    line-height: 1.4;
                }

                h3 {
                    font-size: 15px;
                }

                .glow-line {
                    width: 90%;
                }

                p {
                    font-size: 15px;
                    line-height: 1.6;
                }

                a {
                    width: 230px;
                    height: 42px;
                    font-size: 15px;
                }
            }
        }
    }

    /*===============REDEEM POINTS===============*/
    .redeem_points {
        padding: 5rem 1.5rem 9rem 1.5rem;



        .redeem_points_container {
            .redeem_points_content {
                gap: 2rem;

                h2 {
                    font-size: 28px;
                    line-height: 1.4;
                }

                p {
                    width: 100%;
                    font-size: 15px;
                    line-height: 1.7;
                }

                .redeem_points_bannar {
                    padding: 1.8rem;

                    h3 {
                        font-size: 18px;
                    }

                    p {
                        font-size: 15px;
                        line-height: 1.6;
                    }
                }
            }
        }
    }

    /*=============== PAGE 11 ===============*/
    /*=============== TERMS AND PRIVACIY ===============*/
    .terms_privacy {
        padding: 15rem 1.5rem 4rem 1.5rem;

        .terms_privacy_container {
            .terms_privacy_content {
                .terms_privacy_header {
                    h2 {
                        font-size: 30px;
                    }

                    .pra,
                    p {
                        font-size: 16px;
                    }
                }

                .terms_privacy_body {
                    gap: 1.2rem;

                    .group_data {
                        h3 {
                            font-size: 20px;
                        }

                        p,
                        ul,
                        ol,
                        a {
                            font-size: 15px;
                        }

                        ul li,
                        ol li {
                            margin-left: 18px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 12 ===============*/
    /*=============== HERO ABOUT ===============*/
    .hero_about {
        padding: 15rem 1.5rem 3rem 1.5rem;

        .hero_about_container {
            gap: 2rem;

            .hero_about_header {
                h2 {
                    font-size: 30px;
                }

                p {
                    font-size: 16px;
                }
            }

            .wheel-container {
                width: 460px;
                height: 460px;
            }

            .card {
                width: 90%;
                padding: 1.5rem;
                gap: 2rem;

                .photo {
                    width: 200px;
                    height: 215px;
                }

                .content {
                    h1 {
                        font-size: 30px;
                    }

                    h2 {
                        font-size: 18px;
                    }

                    p {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*===============OUR STUDENTS STORIES===============*/
    .our_students_stories {
        padding: 3.5rem 1.5rem;

        &::after {
            width: 130px;
            height: 95px;
            left: 10px;
        }

        .our_students_stories_container {
            gap: 3rem;

            h2 {
                font-size: 26px;

                &::after {
                    right: -10%;
                    top: -50px;
                    width: 55px;
                    height: 55px;
                }
            }

            .our_students_stories_content {
                gap: 2.5rem;

                .story_card {
                    padding: 1.5rem;

                    .about_student span {
                        width: 95px;
                        height: 30px;
                        font-size: 14px;
                    }

                    .body_story_card p {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*=============== PAGE 13 ===============*/
    /*=============== ERROR PAGE ===============*/
    .error {
        padding: 15rem 1.5rem;

        .error_container {
            .error_content {
                gap: 1.5rem;

                .img {
                    width: 400px;
                }

                p {
                    width: 100%;
                    font-size: 17px;
                }

                .btn a {
                    font-size: 18px;
                }
            }
        }
    }


    /*===============FOOTER===============*/
    footer {
        padding: 3rem 1.5rem 1rem 1.5rem;
    }

    .footer_info h3 {
        font-size: 20px;
    }

    .footer_info p {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .footer_info form input,
    .footer_info form button {
        width: 100%;
    }

    .footer_info .social a {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .header {
        .subheader {
            padding: 5px;
            height: fit-content;

            .subheader_container {
                .information {

                    h4 {
                        font-size: 15px;
                    }

                    .promo {
                        font-size: 13px;
                        padding: 2px 5px;
                    }

                    .time {
                        flex-wrap: wrap;
                        gap: 4px;

                        .time-box {
                            min-width: 40px;
                            padding: 5px 6px;

                            .time-num {
                                font-size: 15px;
                            }

                            .time-label {
                                font-size: 7px;
                            }
                        }
                    }
                }
            }
        }

    }

    .nav {
        height: 77px;
        width: 100%;
    }

    .nav_logo img {
        width: 54px;
        height: 54px;
    }

    .nav_menu {
        width: 100%;
    }


    /*=============== PAGE 1 ===============*/
    /*=============== HOME ===============*/
    .home {
        padding: 13rem 0;

        .home_container .home_content {
            .home_text {
                gap: 1rem;

                h2 {
                    font-size: 24px;
                    width: 90%;

                    &::after {
                        right: -5px;
                        width: 30.603256px;
                        height: 30.52829px;
                    }
                }

                p {
                    font-size: 12px;
                    width: 90%;
                }

                .home_btns {
                    flex-direction: column;
                    gap: 1rem;
                    width: 274px;

                    .btn {
                        width: 100%;
                    }

                    &::before {
                        left: 100%;
                        bottom: -45px;
                        width: 33.73465830519199px;
                        height: 42.44509252790017px;
                    }
                }
            }

            .home_img {
                width: 358px;
                height: 357.8155212402344px;

                &::before {
                    top: 20px;
                    left: 8%;
                    width: 63px;
                    height: 44.16px;
                }
            }
        }
    }

    /*===============CHOOSE US===============*/
    .choose_us {
        padding: 5rem 0rem;

        .planet1 {
            width: 101.23984597582427px;
            height: 92.42822329527415px;
        }

        .planet2 {
            bottom: 10%;
        }

        .choose_us_container {
            h2 {
                font-size: 32px;
            }

            p {
                font-size: 14px;
                width: 70%;
                margin-bottom: 5.5rem;
            }

            .choose_us_content {
                width: 100%;

                &::after {
                    right: -470px;
                    top: 38%;
                    width: 340%;
                    height: 26%;
                }

                .item {
                    width: 100%;
                    max-width: 186.68px;
                    height: 212.94px;


                    h3 {
                        font-size: 17.12px;
                        width: 100%;
                    }
                }
            }

            a {
                width: 90%;
                height: 48px;
                margin-top: 7rem;
            }
        }
    }

    /*=============== SPECIAL ===============*/
    .special {
        padding: 10rem 1rem;


        .special_container {
            gap: 2.5rem;

            .special_content {

                .special_text {

                    &::before {
                        top: -55px;
                        left: 10px;
                    }

                    span {
                        font-size: 14px;
                    }

                    h2 {
                        font-size: 32px;
                    }

                    p {
                        font-size: 14px;
                    }

                    a {
                        width: 70%;
                        height: 38px;
                        font-size: 18px;
                    }
                }

                .special_img {
                    width: 358px;
                    height: 244px;

                    &::before {
                        left: 10px;
                        top: 35px;
                    }

                    &::after {
                        top: -20px;
                        right: -20px;
                    }
                }
            }

            .ditals {
                gap: 1.5rem;

                .data {
                    width: 100%;
                    max-width: 140px;
                    height: 103px;

                    .number {
                        font-size: 24px;
                    }

                    span {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    /*===============OUR CLASSES===============*/
    .our_classes {
        padding: 3rem 1rem;

        .our_classes_container {
            .span_our_classes {
                font-size: 16px;
                letter-spacing: 2px;
            }

            h2 {
                font-size: 32px;
                width: 100%;
                margin-bottom: 2rem;
            }

            .our_classes_items {
                gap: 2.5rem;

                .item {
                    border-radius: 10px;
                    padding: 8px;
                    width: 305px;

                    .item_img {
                        height: 199px;
                    }

                    .item_data {
                        h3 {
                            font-size: 22px;
                            margin-bottom: 8px;
                        }

                        ul {
                            gap: 1rem;

                            li {
                                gap: 8px;
                                font-size: 10px;
                                line-height: 15px;
                            }
                        }

                        .about_item {
                            gap: 10px;

                            span {
                                font-size: 14px;
                            }
                        }

                        a {
                            height: 38px;
                            font-size: 16px;
                            letter-spacing: 1.5px;
                        }
                    }
                }
            }

            .our_story_btn {
                margin-top: 3.5rem;

                a {
                    font-size: 27px;
                }
            }
        }

    }

    /*===================OUR GIFTS================*/
    .our_gifts {
        padding: 3rem 0rem;

        .our_gifts_container {
            .our_gifts_header {
                h2 {
                    font-size: 32px;
                    width: 80%;
                }

                p {
                    font-size: 16px;
                    width: 100%;
                }
            }

            .our_gifts_item {
                flex: 0 0 100%;

                .item_img {
                    height: 316.0799865722656px;
                }

                .item_data {
                    h3 {
                        font-size: 18px;
                        width: 100%;
                    }

                    p {
                        font-size: 14px;
                        width: 100%;
                    }

                    .item_btn_price {
                        gap: 8px;

                        h4,
                        h5 {
                            font-size: 18px;
                        }
                    }
                }
            }

            .our_gifts_btn {
                a {
                    width: 230px;
                    height: 42px;
                    font-size: 18px;
                }
            }

            .prev-btn,
            .next-btn {
                width: 65px;
                height: 65px;
                font-size: 25px;
            }

            .next-btn {
                left: 70px;
            }
        }
    }

    /*===================OUR STORIES================*/
    .our_stories {
        padding: 5rem 1rem;

        &::before {
            width: 150px;
            height: 100px;
        }

        &::after {
            right: 10%;
            top: 12%;
            width: 36.982608795166016px;
            height: 37.94074249267578px;
        }

        .our_stories_container {
            p {
                font-size: 16px;
            }

            h2 {
                width: 90%;
                font-size: 32px;
                margin-bottom: 5rem;

                &::before {
                    width: 48px;
                    height: 48px;
                    left: 85%;
                    top: -75%;
                }
            }

            .our_stories_contant {
                gap: 6rem;

                &::before {
                    bottom: 67%;
                    left: 2%;
                    width: 50px;
                    height: 51.29538345336914px;
                }

                &::after {
                    bottom: -4%;
                    right: 2%;
                    transform: rotate(240deg);
                    width: 74px;
                    height: 75.91716766357422px;
                }

                .item {
                    width: 100%;
                    z-index: 1;

                    .item_data {
                        padding: 1.5rem;

                        h3 {
                            font-size: 12px;
                        }

                        h4 {
                            font-size: 19px;
                            margin-top: 0;
                        }
                    }
                }
            }

            .our_stories_btn {
                font-size: 22px;
            }
        }
    }

    /*===============STUDENTS STORIES===============*/
    .students_stories {
        padding: 6rem 0rem 10rem 0rem;

        .wind_2 {
            object-fit: cover;
        }


        .gift {
            top: 150px;
        }

        .mosque {
            display: none;
        }

        .students_stories_container {
            h2 {
                font-size: 32px;
                width: 90%;
                margin-bottom: 8rem;
            }

            .swiper {
                .swiper-wrapper {
                    gap: 5rem;
                    padding: 5rem 0;

                    .studen_store {
                        padding: 1rem 1rem 3rem 4rem;
                        width: 332.0317px !important;
                        height: fit-content !important;

                        &::after {
                            width: 250px;
                        }

                        h3 {
                            font-size: 14px;
                        }

                        p {
                            font-size: 10px;
                            width: 100%;
                            line-height: 13.22px;
                        }

                        span {
                            font-size: 13px;
                            right: 10px;
                            bottom: 10px;
                        }

                        .studen_img {
                            left: -25px;
                            width: 75px;
                            height: 75px;
                        }
                    }
                }
            }
        }
    }

    /*===============OFFERS===============*/
    .offers {
        padding: 2.5rem 1rem;

        .header_offers {
            .offer_span {
                font-size: 16px;
            }

            h2 {
                font-size: 32px;
            }
        }

        .offers_content {
            gap: 2.5rem;

            .current_offers,
            .previous_offers {
                h3 {
                    font-size: 22px;
                    text-align: center;
                }

                .items {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;

                    .item {
                        width: 100%;
                        padding: 1rem 8px;
                        gap: 1rem;

                        .item_img {
                            width: 103px;
                            height: 109px;
                        }

                        .item_data {

                            h4 {
                                font-size: 11.81px;
                            }

                            p {
                                font-size: 8.27px;
                                line-height: 11px;
                            }

                            .btn_date {
                                gap: 10px;

                                a {
                                    width: 100px;
                                    height: 20px;
                                    font-size: 9.45px;
                                }

                                span {
                                    font-size: 7.08px;

                                    gap: 1.5px;
                                }
                            }
                        }

                        .discount {
                            width: 200px;
                            height: 20px;
                            letter-spacing: 0;

                            h5 {
                                font-size: 11.81px;
                            }
                        }
                    }
                }
            }
        }
    }

    /*===============FORM TALK===============*/
    .form_talk {
        padding: 1rem 0rem 3rem 0rem;

        .form_talk_container {
            padding: 9rem 1rem 2rem 1rem;


            h2 {
                font-size: 32px;
                letter-spacing: 2px;
                margin-bottom: 2rem;
            }

            span {
                font-size: 11px;
                letter-spacing: 2px;
                width: 95%;
            }

            .contact-form {
                padding-inline: 0;

                input,
                textarea {
                    font-size: 14px;
                }

                button {
                    width: 180px;
                    height: 42px;
                    font-size: 16px;
                }
            }

            p {
                font-size: 14px;
                letter-spacing: 2px;
            }
        }
    }

    /*===============QUESTIONS===============*/
    .questions {
        padding: 2.5rem 0.5rem;

        &::before,
        &::after {
            display: none;
        }

        .questions_container h2 {
            font-size: 32px;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
        }

        .questions_accordion {
            width: 100%;
        }

        .question_item {
            border-radius: 10px;
        }

        .question_header {
            padding: 20px 15px;
            gap: 1rem;

            h3 {
                font-size: 16px;
            }

            .plus {
                font-size: 22px;
            }
        }

        .question_answer p {
            width: 100%;
            font-size: 14px;
            line-height: 22px;
        }

        .questions_data {
            width: 100%;
            padding: 1.5rem 1rem;

            img {
                width: 94px;
                height: 94px;
            }

            h4 {
                font-size: 24px;
            }

            p {
                font-size: 16px;
                line-height: 22px;
                width: 100%;
            }

            a {
                font-size: 18px;
                height: 48px;
            }
        }
    }

    /*=================== PAGE 2 ================*/
    /*=================== FORM ================*/
    .form_section {
        padding: 11rem 0.3rem 2rem 0.3rem;

        .form_container {
            .group_container {
                .form_img {
                    height: 290px;

                    img {
                        width: 100px;
                        height: 100px;
                    }
                }

                .form_data {
                    padding: 0.3rem;
                    gap: 1.5rem;

                    h2 {
                        width: 85%;
                    }


                    .form {
                        gap: 12px;
                    }
                }
            }

            .success_message {
                padding: 2rem 1rem;
                gap: 0.8rem;

                h2 {
                    font-size: 20px;

                    &::after {
                        display: none;
                    }
                }

                p {
                    font-size: 14px;
                }

                a {
                    font-size: 16px;
                }
            }
        }
    }


    /*=============== PAGE 3 ===============*/
    /*=============== HERO PROGRAMS ===============*/
    .hero_class {
        padding: 13rem 0 6rem 0;

        &::after {
            bottom: -55px;
            height: 152.04452514648438px;
        }

        .hero_class_container {

            .certificate {
                bottom: 90%;
                left: 70%;
                width: 73.00001525878906px;
                height: 73.58210754394531px;
            }

            &::before {
                bottom: 93%;
                left: 5%;
                width: 41px;
                height: 32.94643020629883px;
            }

            &::after {
                bottom: 51%;
                left: 10%;
                width: 95.023827px;
                height: 78.49144px;
            }

            .hero_class_content {
                .hero_class_text {
                    gap: 1rem;

                    span {
                        width: 205px;
                        height: 31px;
                        font-size: 16px;
                    }

                    h2 {
                        width: 100%;
                        font-size: 22px;
                    }

                    p {
                        width: 90%;
                        font-size: 12px;
                    }

                    form {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 1rem;

                        .input {
                            width: 90%;
                            height: 42px;

                            input {
                                font-size: 14px;
                            }

                            button {
                                font-size: 14px;
                            }
                        }
                    }
                }

                .hero_class_img {
                    width: 280px;
                }

            }
        }
    }


    /*=============== CLASSES ===============*/
    .classes {
        padding: 3rem 1rem 7rem 1rem;

        .ballon1 {
            width: 49.58915298087205px;
            height: 111.2778251526736px;
            top: 1%;
        }

        .ballon2 {
            width: 43.187237665227215px;
            height: 96.47333254566615px;
            top: 60%;
        }

        .ballon3 {
            width: 49.5892px;
            height: 111.2778251526736px;
        }

        .ballon4 {
            width: 49.5892px;
            height: 111.2778251526736px;
            bottom: 20%;
        }

        .our_classes_container {
            h2 {
                font-size: 22px;
                margin-bottom: 4.5rem;
            }

            .span_our_classes {
                font-size: 16px;
                text-align: center;
            }

            .our_classes_items::after {
                height: 45px;
                bottom: -60px;
            }
        }
    }


    /*=============== PAGE 4 ===============*/
    /*=============== SINGLE CLASSES ===============*/
    .single_classes_hero {
        padding: 11rem 1rem 3rem 1rem;

        .single_classes_container {
            .single_classes_text {
                h1 {
                    font-size: 24px;
                }

                h3 {
                    font-size: 13px;
                    width: 160px;
                    height: 28px;
                }

                p {
                    font-size: 13px;
                }

                .btns {
                    .btn {
                        width: 100%;
                        font-size: 15px;
                        height: 42px;
                    }
                }
            }

            .single_classes_img {
                width: 100%;
            }
        }
    }

    /*===================SINGLE CLASSES DATA================*/
    .single_classes_data {
        padding: 3rem 1rem;

        .single_classes_data_container {
            .single_classes_data_text {
                .group_spical .items {
                    grid-template-columns: 1fr;
                }

                .group_faqs {
                    .questions_accordion {
                        width: 100%;
                    }

                    .question_item {
                        border-radius: 10px;
                    }

                    .question_header {
                        padding: 20px 15px;
                        gap: 1rem;

                        h3 {
                            font-size: 16px;
                        }

                        .plus {
                            font-size: 22px;
                        }
                    }

                    .question_answer p {
                        width: 100%;
                        font-size: 14px;
                        line-height: 22px;
                    }
                }

                .bannar {
                    padding: 0.8rem;

                    h3 {
                        font-size: 18px;
                    }

                    p {
                        font-size: 14px;
                    }

                    .btns {
                        width: 100%;
                        gap: 0.5rem;

                        .btn {
                            width: 225px;
                        }

                        .secondry_btn {
                            width: 132px;
                        }
                    }
                }
            }
        }
    }


    /*=================== PAGE 5 ================*/
    /*=================== STORIES HERO ================*/
    .hero_stories {
        padding: 14rem 1rem 3rem 1rem;

        &::after {
            bottom: -45px;
            height: 130.04452514648438px;
        }

        .hero_stories_container {

            .hero_stories_content {
                .hero_stories_text {

                    img {
                        width: 84.0004px;
                        height: 74.52906036376953px;
                    }

                    h2 {
                        font-size: 22px;
                    }

                    p {
                        font-size: 14px;

                        &::after {
                            bottom: 45px;
                            right: 25%;
                        }
                    }

                    &::after {
                        bottom: 50px;
                    }

                    &::before {
                        bottom: 45px;
                    }
                }

                .our_stories_contant {
                    gap: 4rem;

                    .item {
                        width: 100%;
                        z-index: 1;

                        .item_data {
                            padding: 1.5rem;

                            h3 {
                                font-size: 19px;
                            }

                            h4 {
                                font-size: 16px;
                                margin-top: 10px;
                            }
                        }

                        .date {
                            top: -25px;
                            left: 15px;
                            padding: 0 10px;

                            h5 {
                                font-size: 24px;
                            }

                            span {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    /*=================== STORIES ================*/
    .stories {
        padding: 3rem 1rem;

        .stories_container {
            .stories_content {
                grid-template-columns: 1fr;
                row-gap: 4rem;

                .item {
                    .item_img {
                        height: 180px;
                    }

                    .item_data {
                        padding: 1.2rem;

                        h3 {
                            font-size: 19px;
                            line-height: 20px;
                        }

                        h4 {
                            font-size: 16px;
                            margin-top: 10px;
                        }

                        .about {
                            gap: 1rem;

                            span {
                                font-size: 10px;
                            }
                        }
                    }

                    .date {
                        top: -25px;
                        left: 15px;
                        padding: 0 10px;

                        h5 {
                            font-size: 24px;
                        }

                        span {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .pagination {
            gap: 0.4rem;
            margin-top: 2rem;

            a,
            span {
                width: 34px;
                height: 34px;
                font-size: 14px;
            }
        }
    }


    /*=================== PAGE 6 ================*/
    /*=================== SINGLE STORIES ================*/
    .single_stories {
        padding: 15rem 1rem 2.5rem 1rem;

        .single_stories_container {
            background-color: transparent;

            padding: 0;

            .hero_single_stories {
                span {
                    width: 120px;
                    height: 28px;
                    font-size: 12px;
                }

                h1 {
                    font-size: 18px;
                }

                .links {
                    gap: 10px;

                    a {
                        font-size: 9px;
                    }
                }

                .img {
                    height: 260px;
                }
            }

            .single_stories_data_text {
                width: 100%;

                .group {
                    h2 {
                        font-size: 16px;
                    }

                    p,
                    li {
                        font-size: 12px;
                        line-height: 20px;
                    }
                }

                .img {
                    width: 100%;
                    height: 200px;
                }
            }

            .share {
                h2 {
                    font-size: 18px;
                }
            }

            .related_stories {
                gap: 3rem;

                h2 {
                    font-size: 24px;
                }

                .our_stories_contant {
                    flex-direction: column;
                    gap: 4.5rem;

                    .item {
                        width: 100%;

                        .item_data {
                            h4 {
                                margin-top: 0;
                            }
                        }

                        .date {
                            top: -25px;
                            left: 15px;
                            padding: 0 10px;

                            h5 {
                                font-size: 24px;
                            }

                            span {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }

            .subscribe {
                h2 {
                    font-size: 18px;
                }

                p {
                    width: 100%;
                    font-size: 13px;
                }

                form {
                    flex-direction: column;
                    gap: 1rem;
                    width: 100%;

                    .form_group {
                        width: 100%;

                        label {
                            font-size: 15px;
                        }

                        .input {
                            width: 100%;
                            height: 42px;

                            button {
                                width: 90px;
                                height: 42px;
                                font-size: 15px;
                            }
                        }
                    }
                }
            }
        }
    }


    /*=================== PAGE 7 ================*/
    /*=================== STORE HERO ================*/
    .hero_store {
        padding: 11rem 1rem 3.5rem 1rem;

        .hero_store_container {
            .hero_store_content {
                align-items: center;
				
                &::before{
					width: 320.000031px;
                    height: 250.734863px;
                    top: 10%;
                    right: 3%;
				}

                .hero_store_text {
                    width: 100%;
                    text-align: center;
                    align-items: center;

                    &::before {
                        top: -30%;
                        left: 45%;
                        width: 37.660934px;
                        height: 30px;
                    }

                    &::after {
                        bottom: -40%;
                        left: -5px;
                        width: 39px;
                        height: 41px;
                    }

                    h2 {
                        font-size: 25px;
                        letter-spacing: 0px;
                        line-height: 32px;
                    }

                    p {
                        font-size: 14px;
                        line-height: 18px;
                        width: 100%;
                    }
                }

                .store_img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    /*=============== PRODUCTS ===============*/
    .products {
        padding: 3rem 1.5rem;

        .products_container {
            h2 {
                font-size: 24px;
                margin-bottom: 2rem;
            }

            .products_content {
                grid-template-columns: 1fr;
                row-gap: 2rem;

                .item {
                    .product_img {
                        width: 157px;
                        height: 157px;
                    }

                    h3 {
                        font-size: 18px;
                    }
                }
            }
        }
    }

    /*=============== STORE ===============*/
    .store_1,
    .store_2 {
        padding-left: 0rem;
        padding-right: 0rem;

        .our_gifts_container {
            .our_gifts_header {
                gap: 5px;
                width: 100%;
                margin-left: 0;
                align-items: center;
                text-align: center;

                h2 {
                    font-size: 24px;
                    letter-spacing: 1px;
                }

                p {
                    font-size: 12px;
                    width: 100%;
                    letter-spacing: 1px;
                }
            }
        }
    }

    .store_2 .custom-slider {
        margin: 0 auto;
    }

    /*=============== PAGE 8 ===============*/
    /*===============  SINGLE STORE HERO ===============*/
    .single_store {
        padding: 12rem 1rem 2rem 1rem;

        .single_store_container {
            .single_store_content {
                gap: 1.5rem;

                .imgs {
                    gap: 1rem;

                    .main_img {
                        width: 100%;
                        height: 243px;
                    }

                    .sub_imgs {

                        .small_img {
                            gap: 0.5rem;

                            .sub_img {
                                width: 100%;
                                height: 190px;
                            }
                        }

                        .third_img {
                            width: 100%;
                            height: 109px;
                        }
                    }
                }

                .about_single_store {
                    gap: 1rem;

                    .data_1 {
                        width: 100%;
                        padding: 1rem;

                        h2 {
                            font-size: 22px;
                        }

                        .colors h3,
                        .decription h3 {
                            font-size: 20px;
                        }

                        .decription p {
                            width: 100%;
                            font-size: 12px;
                            line-height: 20px;
                        }
                    }

                    .data_2 {
                        width: 100%;

                        .price {
                            gap: 0.5rem;

                            span {
                                font-size: 46px;
                            }

                            a {
                                font-size: 26px;
                            }
                        }

                        .reviews h3 {
                            font-size: 22px;
                        }

                        .reviews .users .user p {
                            width: 100%;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 9 ===============*/
    /*=============== HONOR HERO ===============*/
    .hero_honor {
        padding: 12rem 1rem 2rem 1rem;

        .hero_honor_container {
            .hero_honor_content {
                gap: 1.5rem;

                .hero_honor_text {
                    gap: 0.8rem;

                    h2 {
                        font-size: 32px;
                        width: 100%;
                        line-height: 1.4;

                        .pink {
                            font-size: 22px;
                        }

                        img {
                            width: 40px;
                            height: 15px;
                        }

                        &::after {
                            right: 0px;
                            top: -5px;
                        }
                    }

                    p {
                        font-size: 14px;
                        width: 100%;
                        line-height: 22px;
                    }

                    a {
                        width: 80%;
                        height: 43px;
                        font-size: 16px;
                    }
                }

                .hero_honor_img {
                    width: 100%;
                    height: auto;
					
					&::after {
						top: 5px;
						left: 22%;
						width: 33.31181789237796px;
						height: 30.921075px;
					}
                }
            }
        }
    }

    /*=============== HONOR ===============*/
    .honor {
        padding: 2rem 1rem;

        .honor_container {
            h2 {
                font-size: 24px;
                margin-bottom: 2rem;
                letter-spacing: 1px;
            }

            .honor_content {
                grid-template-columns: 1fr;
                gap: 2rem;

                .studen_store {
                    width: 100% !important;
                    padding: 2rem 1rem 1.5rem 4rem;
                    gap: 1.2rem;
                    border: 2px solid white;

                    h3 {
                        font-size: 14px;
                        letter-spacing: 2px;

                        &::after {
                            height: 2px;
                        }
                    }

                    p {
                        font-size: 10px;
                        width: 100%;
                        line-height: 20px;
                        letter-spacing: 0.5px;
                    }

                    span {
                        font-size: 10px;
                        bottom: 10px;
                        right: 10px;
                    }

                    .studen_img {
                        width: 58.917724609375px;
                        height: 58.917724609375px;
                        top: -10px;
                        left: -10px;
                    }
                }
            }
        }
    }

    /*=============== PAGE 10 ===============*/
    /*=============== PRICCING HERO ===============*/
    .hero_pricing {
        padding: 17rem 1rem 3rem 1rem;

        .hero_pricing_container {
            .hero_pricing_header {
                h1 {
                    font-size: 22px;
                    line-height: 31px;
                    width: 80%;
                }

                p {
                    font-size: 10px;
                    width: 65%;
                }

                &::before {
                    bottom: 35px;
                    left: 0px;
                    width: 96.00031280517578px;
                    height: 98.65771484375px;
                }

                &::after {
                    top: -32px;
                    right: -15px;
                }
            }
        }
    }


    /*===============PRICCING USER===============*/
    .pricing {
        padding: 3.5rem 1rem;

        &::before {
            width: 106.80841417477176px;
            height: 113.85310939438327px;
        }

        &::after {
            right: 5%;
            top: 20%;
            width: 29px;
            height: 29.318681716918945px;
        }

        .pricing_container {
            .pricing_content {

                &::before {
                    width: 38.00007629394531px;
                    height: 37.844482421875px;
                    bottom: -20%;
                }

                .pricing_header {
                    margin-bottom: 1rem;

                    h2 {
                        font-size: 16px;
                    }

                    .time_session {
                        height: 21.479881286621094px;
                        padding: 0.2rem 0.5rem;
                        border-radius: 4.52px;

                        span {
                            font-size: 9.04px;
                        }

                        i {
                            font-size: 9.04px;
                        }

                        p {
                            font-size: 9.04px;
                        }
                    }
                }

                .priccing_cards {
                    gap: 1rem;

                    .card {
                        padding: 0.5rem;

                        i {
                            font-size: 10px;
                        }

                        .name_plan {
                            gap: 2px;

                            h3 {
                                font-size: 7.14px;
                            }

                            span {
                                font-size: 5.54px;
                                height: 11.166802406311035px;
                            }
                        }

                        .desc_plan {
                            width: 30%;

                            p {
                                font-size: 8px;
                            }
                        }

                        .price_plan {
                            h4 {
                                font-size: 15.83px;
                            }

                            span {
                                font-size: 4.75px;
                            }

                            .custom {
                                font-size: 8.69px;
                            }
                        }

                        a {
                            width: 55.72522735595703px;
                            height: 15.002945899963379px;
                            font-size: 5px;
                        }
                    }
                }
            }
        }
    }


    /*===============PRICCING GROUP===============*/
    .group_pricing {
        padding: 4rem 1rem;

        &::before {
            width: 37.434072px;
            height: 32.10024642944336px;
        }

        &::after {
            top: 10%;
        }

        .pricing_container {
            .pricing_content {
                &::after {
                    width: 25.087434768676758px;
                    height: 30.057861328125px;
                    bottom: -20%;
                    right: 1%;
                }
            }
        }
    }

    /*===============GAME POINTS===============*/
    .game_points {
        padding: 5rem 1rem;
        height: auto;
        background-position: left;

        .game_points_container {
            .game_points_content {
                width: 100%;
                padding: 2.5rem 1rem;
                gap: 0.8rem;

                h2 {
                    font-size: 16.54px;

                    i {
                        margin-right: 5px;
                    }
                }

                h3 {
                    font-size: 8.27px;
                }

                .glow-line {
                    width: 95%;
                    height: 5px;
                    margin-bottom: 5px;
                }

                p {
                    font-size: 8.27px;
                }

                a {
                    width: 139.22659301757812px;
                    height: 22.055696487426758px;
                    font-size: 8.27px;
                    margin-top: 1rem;
                }
            }
        }
    }

    /*===============REDEEM POINTS===============*/
    .redeem_points {
        padding: 5rem 1rem 8rem 1rem;

        &::before {
            top: 2%;
            left: 5%;
            width: 53.99956130981445px;
            height: 61.14329528808594px;
        }

        &::after {
            width: 100.99966430664062px;
            height: 60.081966400146484px;
        }

        .redeem_points_container {
            .redeem_points_content {
                h2 {
                    font-size: 16.62px;
                }

                p {
                    font-size: 8.31px;
                }

                .redeem_points_bannar {
                    padding: 1.5rem;
                    gap: 0.8rem;

                    h3 {
                        font-size: 10.16px;
                    }

                    p {
                        font-size: 8.31px;

                        i {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 11 ===============*/
    /*=============== TERMS AND PRIVACIY ===============*/
    .terms_privacy {
        padding: 14rem 1rem 3rem 1rem;

        .terms_privacy_container {
            .terms_privacy_content {
                gap: 1.5rem;

                .terms_privacy_header {
                    h2 {
                        font-size: 26px;
                    }

                    .pra,
                    p {
                        font-size: 15px;
                        letter-spacing: 0.2px;
                    }
                }

                .terms_privacy_body {
                    .group_data {
                        gap: 8px;

                        h3 {
                            font-size: 18px;
                        }

                        p,
                        ul,
                        ol,
                        a {
                            font-size: 14px;
                            letter-spacing: 0.2px;
                        }

                        ul li,
                        ol li {
                            margin-left: 15px;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 12 ===============*/
    /*=============== HERO ABOUT ===============*/
    .hero_about {
        padding: 14rem 1rem 3rem 1rem;

        .hero_about_container {
            gap: 2.5rem;

            .hero_about_header {
                h2 {
                    font-size: 24px;
                    padding-inline: 6px;
                }

                p {
                    font-size: 12px;
                }
            }

            .wheel-container {
                width: 274.0013122558594px;
                height: 274.0013122558594px;
            }

            .spin-btn {
                width: 62.723352427125405px;
                height: 62.723352427125405px;
            }

            .arrow {
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                border-bottom: 35px solid #ADDC52;
            }

            .card {
                padding: 1.2rem;
                margin-top: 9rem;
                gap: 1.5rem;

                .photo {
                    width: 220px;
                    height: 240px;
                }

                .content {
                    h1 {
                        font-size: 24px;
                    }

                    h2 {
                        font-size: 16px;
                    }

                    p {
                        font-size: 14px;
                        line-height: 1.4;
                    }
                }

                .close-btn {
                    width: 38px;
                    height: 38px;
                    font-size: 16px;
                }
            }
        }
    }

    /*===============OUR STUDENTS STORIES===============*/
    .our_students_stories {
        padding: 3rem 1rem;

        &::after {
            display: none;
        }

        .our_students_stories_container {
            h2 {
                font-size: 24px;

                &::after {
                    right: -10%;
                    top: -45px;
                    width: 44.855323791503906px;
                    height: 47.59435272216797px;
                }
            }

            .our_students_stories_content {
                gap: 2rem;

                .story_card {
                    width: 100%;
                    padding: 1.2rem;

                    .header_story_card {
                        .about_student {
                            span {
                                font-size: 13px;
                                width: 85px;
                                height: 28px;
                            }

                            h3 {
                                font-size: 18px;
                            }
                        }

                        .img_student {
                            width: 100px;
                            height: 100px;
                        }
                    }

                    .body_story_card {
                        span {
                            font-size: 11px;
                            width: 65px;
                            height: 28px;
                        }

                        p {
                            font-size: 14px;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    /*=============== PAGE 13 ===============*/
    /*=============== ERROR PAGE ===============*/
    .error {
        padding: 13rem 1rem;

        .error_container {
            .error_content {
                gap: 1.2rem;

                .img {
                    width: 100%;
                    height: auto;
                }

                p {
                    width: 100%;
                    font-size: 16px;
                    line-height: 1.6;
                }

                .btn a {
                    font-size: 16px;
                }
            }
        }
    }


    /*===============FOOTER===============*/
    footer {
        padding: 2.5rem 1rem 1rem 1rem;
    }

    .desc_img_logo .img_logo img {
        width: 100px;
        height: 100px;
    }

    .footer_info h3 {
        font-size: 18px;
    }

    .footer_info p {
        font-size: 12px;
        width: 100%;
    }

    .footer_copy {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .footer_copy .pages {
        gap: 0.3rem;
    }
}