:root {
    --heading_font: "Raleway", sans-serif;
    --nav_font: "Poppins", sans-serif;
    --default_font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* --bg_color: linear-gradient(to right, #e0eafc, #cfdef3); */
    --bg_color: #fff;
    --surface_color: #1d7bb6;
    --surface_color_light: #deebf4;
    --contrast_color: #87e0e3;

    --text_default_100: rgb(33, 37, 41);
    --text_default_75: rgba(33, 37, 41, 0.75);
    --text_default_50: rgba(33, 37, 41, 0.5);
    --text_heading_color: #125a73;
    --black: #000;
    --white: #fff;

    --nav_color: rgba(255, 255, 255, 0.8);
    --nav_hover_color: #e9cc77;
    --nav_mobile_bg_color: var(--surface_color);

    --header_height: 70px;
    scroll-behavior: smooth;
}

* {
    font-size: 16px;
}

body {
    color: var(--text_default_100);
    background: var(--bg_color);
    font-family: var(--default_font);

    &::-webkit-scrollbar {
        display: none;
    }

}

section,
.section {
    color: var(--text_default_100);
    background: var(--bg_color);
    padding: 2rem 0;
    scroll-margin-top: 90px;
    overflow: clip;

    .title {
        font-size: 3em;
        margin: 0 0 2.5rem 0 !important;
        font-weight: 700;


        &.line {
            position: relative;
            font-size: 2.3em;
            padding-bottom: 20px;
            margin-bottom: 3.5rem !important;

            &::after {
                content: "";
                position: absolute;
                display: block;
                width: 0px;
                height: 3px;
                background: var(--surface_color);
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                animation: lineGrow 0.8s ease-in-out forwards;
            }
        }

        &.line_left::after {
            right: auto;
        }
    }

}


@keyframes lineGrow {
    to {
        width: 70px;
    }
}

a {
    color: var(--surface_color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--surface_color), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text_heading_color);
    font-family: var(--heading_font);
}

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


#loaderScreen {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    background-color: color-mix(in srgb, var(--surface_color_light), transparent 0%);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .spinner {
        width: 5rem;
        height: 5rem;
        border: 5px solid rgba(0, 0, 0, 0.1);
        border-top-color: var(--text_heading_color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 1rem 0;
    }

    h2 {
        font-weight: 700;
    }

    &.hide {
        opacity: 0;
        transition: all ease-in-out 0.4s;
        pointer-events: none;
    }


}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

main {
    padding-top: var(--header_height);
    width: -webkit-fill-available;
    width: -moz-available;
}

.floating-alert {
    position: fixed;
    top: calc(var(--header_height) - 20px);
    right: 20px;
    z-index: 1050;
    width: 300px;
}

.header {
    user-select: none;
    --transparent-bg: rgba(255, 255, 255, 0);
    color: var(--white);
    background-color: color-mix(in srgb, var(--surface_color), transparent 10%);
    padding: 10px 0;
    height: var(--header_height);
    transition: all 0.5s;
    z-index: 997;

    .logo {
        cursor: pointer;
        height: 3.5rem;
        overflow: hidden;
        border-radius: 50%;

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

    .navmenu .btn_login {
        display: flex;
        justify-content: center;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 700;
        border: 2px solid var(--contrast_color);
        color: var(--white);
        background: var(--surface_color);
        transition: 0.3s;

        &:hover,
        &.active {
            color: var(--surface_color);
            background: var(--contrast_color);
        }
    }
}

.scrolled .header {
    background-color: var(--surface_color);
}


.sidebar {
    user-select: none;
    position: relative;
    --transparent-bg: rgba(255, 255, 255, 0);
    color: var(--white);
    background-color: var(--surface_color);
    white-space: nowrap;
    height: 100vh;
    transition: all 0.5s;
    padding: 1rem;
    width: max-content;
    min-width: 250px;
    z-index: 997;
    transition: all ease-in-out 0.5s;
    border-right: 2px solid var(--text_default_50);

    &.fixedLeft {
        position: fixed;
        top: 0;
        left: -100%;

        &.active {
            left: 0;
        }
    }


    .mobile_nav_toggler_sideheader.close {
        font-size: 2.5em;
        position: absolute;
        right: 0;
        top: 0;
    }


    .logo {
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 1rem;
        border-bottom: 1px solid var(--text_default_50);


        img {
            height: 100%;
            width: 3.5rem;
            overflow: hidden;
            border-radius: 50%;
        }
    }

    .navmenu ul {
        margin: 0;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        list-style: none;
        gap: 1px;
        font-family: var(--heading_font);


        li {
            padding: 0.7rem;
            transition: all ease-in-out 0.3s;
            border-radius: 4px;
            cursor: pointer;
            display: block;
            width: 100%;
            color: var(--nav_color);
            font-weight: 500;

            &:hover {
                background-color: color-mix(in srgb, var(--surface_color), white 10%);
                color: var(--nav_hover_color);
            }

            &.active {
                background-color: color-mix(in srgb, var(--contrast_color), transparent 65%);
                color: var(--nav_hover_color);
            }

        }



    }
}



.navTop {
    background-color: var(--surface_color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.2rem;
    height: var(--header_height);
    z-index: 900;
    border-bottom: 1px solid var(--text_default_50);

    * {
        color: var(--nav_color);
    }

    .mobile_nav_toggler_sideheader.open {
        font-size: 2rem;
    }

    .info_action {
        display: flex;
        align-items: center;
        gap: 1rem;

        h5 {
            font-size: 1em;
            font-weight: 600;
            color: var(--nav_color);

            span {
                color: var(--nav_hover_color);
                text-transform: capitalize;
            }
        }


        .logout {
            background-color: #f44336;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;

            &:hover {
                background-color: #d32f2f;
                color: white;
            }
        }
    }

}



#footer {
    color: var(--text_default_100);
    background-color: var(--surface_color_light);
    font-size: 14px;
    text-align: center;
    padding: 20px 0;
    position: relative;

    h3 {
        font-size: 36px;
        font-weight: 700;
        position: relative;
        padding: 0;
        margin: 0 0 10px 0;
    }

    p {
        font-size: 15;
        font-style: italic;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .social-links {
        margin: 0 0 30px 0;

        a {
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--surface_color);
            color: var(--contrast_color);
            line-height: 1;
            margin: 0 4px;
            border-radius: 50%;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;

            &:hover {
                background: color-mix(in srgb, var(--surface_color), transparent 20%);
                text-decoration: none;
            }
        }
    }

    .copyright {
        padding-top: 0.8rem;
        border-top: 1px solid var(--text_default_50);
    }

    .credits {
        font-size: 13px;
    }
}



#membershipSec {

    .card {
        min-width: 18rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 1rem;

        .card-title {
            font-weight: 600;
            color: var(--text_heading_color);
        }

        .card-body {
            text-wrap: initial;

            p {
                width: 100%;
                color: var(--text_default_75);
                /* font-size: 0.9em; */
            }

            .price {
                margin: .5rem 0 0;
                font-weight: 600;
                font-size: 2.3em;
                font-family: 'Times New Roman', Times, serif;

                &::before {
                    content: "₹ ";
                    font-size: 0.8em;
                    font-weight: 500;
                }
            }

            .duration {
                font-size: 1.2em;
                font-family: 'Times New Roman', Times, serif;
                font-weight: 600;

                &::before {
                    content: "Duration: ";
                    color: var(--surface_color);
                    font-weight: 500;
                }
            }
        }

        .payActionBtn {
            cursor: pointer;
            padding: 0.8rem;
            border: 2px solid var(--text_heading_color);
            display: block;
            width: 100%;
            font-size: 1.2em;
            font-weight: 700;
            text-align: center;
            transition: all ease-in-out 0.4s;

            &:hover {
                background-color: var(--surface_color);
                border-color: var(--surface_color);
                color: var(--white);
            }
        }


    }

    #paymentConfirmModal {
        .modal-body {
            .title {
                font-size: 1.4em;
                font-weight: 700;
                color: var(--text_default_100);
                margin-bottom: 0.8rem;
            }

            >div {
                justify-content: space-between;

                .contLeft h6 {
                    font-weight: 700;
                    color: var(--text_default_75);
                }

                .contRight h6 {
                    color: var(--text_heading_color);
                    font-family: var(--nav_font);
                    opacity: 0.85;
                    text-align: right;
                }

                &:last-child {
                    padding: 0.5rem 0;
                    border-top: 1.5px solid var(--text_default_50);
                }
            }
        }
    }
}









.form_1 {

    .form-group {
        margin-bottom: 0.8rem;

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 700;
            color: color-mix(in srgb, var(--text_default_100), transparent 15%);
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: color-mix(in srgb, var(--contrast_color), transparent 85%);
            font-size: 16px;
            color: var(--text_default_75);
            font-weight: 600;
            outline: none;
            margin-bottom: 1rem;

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

        textarea {
            resize: none;
            height: 10rem;
        }

        select {
            width: 48%;
        }
    }

    button {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, var(--text_heading_color), #764ba2);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
        margin-top: 10px;

        &:hover {
            background: linear-gradient(135deg, #764ba2, var(--text_heading_color));
            transform: scale(1.03);
        }
    }

    .bottom-text {
        margin-top: 15px;
        text-align: center;
        font-size: 1em;
        color: var(--text_heading_color);
        ;

        a {
            color: #764ba2;
            text-decoration: none;
            font-weight: 600;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}




@media (max-width: 1199px) {

    section,
    .section {
        scroll-margin-top: 66px;
    }
}

@media (min-width: 1200px) {
    .header {
        .navmenu {
            padding: 0;

            ul {
                margin: 0;
                padding: 0;
                display: flex;
                list-style: none;
                align-items: center;
                gap: 2rem;

                li {
                    position: relative;
                    cursor: pointer;

                    &:not(.btn_login) {
                        color: var(--nav_color);
                        padding: 10px;
                        font-size: 16px;
                        font-family: var(--nav-font);
                        font-weight: 400;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        white-space: nowrap;
                        transition: 0.3s;
                    }

                }

                li:not(.btn_login):hover,
                li:not(.btn_login).active {
                    color: var(--nav_hover_color);
                }

            }

        }
    }
}

@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav_color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .header {
        .navmenu {
            padding: 0;
            z-index: 9997;

            ul {
                display: none;
                list-style: none;
                position: absolute;
                inset: 60px 20px 20px 20px;
                padding: 10px;
                margin: 0;
                gap: 1rem;
                border-radius: 6px;
                background-color: var(--nav_mobile_bg_color);
                overflow-y: auto;
                transition: 0.3s;
                z-index: 9998;
                box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
            }

            li,
            li:focus {
                color: var(--contrast_color);
                padding: 10px;
                font-family: var(--nav-font);
                font-size: 17px;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: space-between;
                white-space: nowrap;
                transition: 0.3s;
            }

            .btn_login {
                margin-top: 1rem;
            }

            a:hover,
            .active,
            .active:focus {
                color: var(--nav-dropdown-hover-color);
            }
        }
    }

    .mobile-nav-active {
        overflow: hidden;

        .mobile-nav-toggle {
            color: #fff;
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999;
        }

        .navmenu {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(33, 37, 41, 0.8);
            transition: 0.3s;

            >ul {
                display: block;
            }
        }
    }


}

@media (max-width: 991px) {

    section,
    .section {
        .title {
            font-size: 3em;
            margin: 2rem 0 1.5rem !important;
            font-weight: 700;


            &.line {
                position: relative;
                font-size: 2.3em;
                padding-bottom: 20px;
                margin: 0 0 2.5rem !important;
            }
        }
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
    }
}

@media (max-width: 776px) {
    #membershipSec {

        .textBox,
        .card {
            scale: 0.9;

        }
    }
}