:root {

    /*#region CUSTOM CSS*/
    --footer-bottom-text-color: #1f3a52;

    --advert-highlight: #afaf1d;
    --primary-color: #38618d;
    --accent-color: #030327;
    --bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    --text-light: #ffffff;
    --text-muted: whitesmoke;
    --hover-color: #1f3a52;
    --highlight-color: darkgray;
    --link-underline: #aaaeb3;
    --blue-accent: #007bff;
    --background-color1: #177bac;
    --semi-overlay-blue: rgba(50, 65, 104, 0.772);

    --cool-orange: #afaf1d;

    --scrollbar-1: #f1f1f1;

    --overlay-bg: rgba(0, 0, 0, 0.3);
    /* Semi-transparent black background */

    /* AD section specific colors */
    --ad-width: 170px;
    --ad-height: 205px;
    --ad-bg-overlay: rgba(0, 0, 0, 0.7);
    --ad-heading-color: white;
    --ad-paragraph-color: white;

    /* VISION section specific colors */
    --vision-gradient-start: #1f3a52;
    --vision-gradient-end: #38618d;
    --vision-text-color: #F0F0F0;
    --vision-heading-color: whitesmoke;
    --vision-box-shadow: rgba(0, 0, 0, 0.1);
    --vision-hover-shadow: rgba(0, 0, 0, 0.15);
    --vision-overlay: rgba(0, 0, 0, 0.5);


    /* ABOUT section specific colors */
    --about-gradient-start: #1f3a52;
    --about-gradient-mid: #38618d;
    --about-gradient-end: #acc8df;

    --about-text-color: #F0F0F0;
    --about-heading-color: whitesmoke;
    --about-link-color: white;
    --about-link-hover: var(--cool-orange);
    /* already defined */
    --started-btn-hover: #1b8e4f;

    /* FUN section specific colors */
    --fun-gradient: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-mid), var(--color-primary-light));
    --fun-yellow: rgb(179, 179, 45);
    --fun-white: #ffffff;



    /* THERAPHY section specific colors */
    --therapy-color-background: #38618d;
    --therapy-card-gradient-start: #1f3a52;
    --therapy-card-gradient-mid: #38618d;
    --therapy-card-gradient-end: #acc8df;
    --therapy-header-text-color: #ffffff;
    --therapy-highlight-color: #007BFF;
    --therapy-box-shadow: rgba(0, 0, 0, 0.1);
    --therapy-box-shadow-hover: rgba(0, 0, 0, 0.2);
    /* Button gradient for About */
    --about-btn-gradient: linear-gradient(135deg, var(--about-gradient-start), var(--about-gradient-mid));
    --z-index-low: 1;
    /* General low z-index */


    /* WHY section specific colors */
    --why-gradient-start: #1f3a52;
    --why-gradient-mid: #38618d;
    --why-gradient-end: #acc8df;
    --why-title-color: rgb(233, 229, 229);
    --why-paragraph-color: rgb(233, 229, 229);
    --why-link-color: white;
    --why-link-hover: #afaf1d;
    --why-button-bg: linear-gradient(135deg, var(--why-gradient-start), var(--why-gradient-mid));
    --why-button-hover-bg: var(--why-gradient-start);
    --why-list-icon-color: #afaf1d;
    --therapist-title-color: #fff;
    --therapist-subtext-color: #ddd;
    --therapist-name-color: #fff;
    --therapist-role-color: #ddd;
    --therapist-hover-zoom: scale(1.05);
    --join-link-color: #0d0f85;
    --join-link-hover: #afaf1d;

    /* FEATURES section specific colors */
    --features-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    --features-heading-color: #ffffff;
    --button-session-bg: #0b3251;
    --button-session-hover: #030450;
    --button-resource-bg: rgb(4, 103, 4);
    --button-resource-hover: rgb(2, 46, 2);
    --carousel-button-bg: #043c75;
    --carousel-icon-color: #ffffff;
    --button-text-color: #ffffff;


    /* TESTIMONIALS section specific colors */
    --testimonials-left-bg: #06111a;
    --testimonials-right-bg: #38618d;
    --testimonials-overlay-bg: #1f3a52;
    --testimonials-text-color: white;
    --testimonials-rating-color: #afaf1d;
    --testimonials-underline-color: #0da4b1;
    --testimonials-circle-bg: #043c75;

    /* ADVERT section specific colors */
    --advert-bg: #1f3a52;
    --advert-highlight: #afaf1d;
    --advert-highlight-hover: #cfcf4b;
    --advert-text-color: #fff;
    --advert-box-bg: rgba(255, 255, 255, 0.05);

    /*MEDITATION section specific colors */
    --med-primary: #38618d;
    --med-light-gray: #dfe6e9;
    --med-dark: #1f3a52;
    --med-nav-bg: rgba(0, 0, 0, 0.5);


    /* Check Section Colors */
    --check-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    --check-dark-blue: #1f3a52;
    --check-mid-blue: #38618d;
    --check-light-blue: #acc8df;
    --check-white: #ffffff;
    --check-grey-bg: #d8d7d7;
    --chat-text-color: #232020;
    --scrollbar-track: #f1f1f1;
    --scrollbar-track-bg: #f1f1f1;
    --scrollbar-thumb-hover: #1f3a52;

    /* Shadows */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-mid: rgba(0, 0, 0, 0.2);

    /* RANGER SECTION */
    --ranger-primary: #1f3a52;
    --ranger-secondary: #38618d;
    --ranger-accent: #acc8df;
    --ranger-rating-color: #afaf1d;
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --overlay-darker: rgba(0, 0, 0, 0.7);
    --ranger-card-bg: rgb(196, 190, 190);
    --text-light: #ffffff;
    --ranger-primary-text: #1f3a52;


    /* MOTIVATION SECTION COLORS */
    --motivation-bg-dark: #222;
    --motivation-bg-medium: #444;
    --motivation-btn-bg: #666;
    --motivation-btn-hover: #1f3a52;
    --motivation-text-light: whitesmoke;
    --motivation-text-white: #fff;
    --motivation-shadow: rgba(0, 0, 0, 0.5);



    /*PARTNERS SECTION*/
    --partners-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    --partner-box-bg: #1a364f;
    --partner-button-bg: #1f2937;
    --partner-button-hover: #111827;
    --partner-text-color: white;
    --partner-underline: white;
    --partner-overlay-bg: rgba(0, 0, 0, 0.7);


    /*OUA APP*/
    --our-app-bg-dark: #111827;
    --our-app-bg-darker: #1f2937;
    --our-app-text: white;
    --our-app-underline: #1f2937;



    /*OUR TEAM*/
    --team-section-bg: transparent;
    --team-text-color: white;
    --team-underline-color: #1f2937;


    /*FAQ  SECTION*/
    --faq-bg-gradient-start: #1f3a52;
    --faq-bg-gradient-middle: #38618d;
    --faq-bg-gradient-end: #acc8df;
    --faq-title-color: #ece7e7;
    --faq-text-color: white;
    --faq-border-color: #1f2937;
    --faq-hover-bg: #1f3a52;
    --faq-answer-bg: #f7f7f7;
    --faq-question-bg: linear-gradient(135deg, var(--faq-bg-gradient-start), var(--faq-bg-gradient-middle));
    --faq-question-color: var(--faq-text-color);
    --faq-answer-text-color: #333;
    --faq-border-light: #ddd;


    /* Contact Section Variables */
    --contact-bg: rgba(2, 2, 113, 0.772);
    --contact-heading-bg: #043c75;
    --contact-form-border: #555;
    --contact-input-bg: whitesmoke;
    --contact-input-color: black;
    --contact-label-color: #555;
    --contact-btn-bg: linear-gradient(135deg, #1f3a52, #38618d);
    --contact-btn-hover-bg: #1f3a52;
    --contact-icon-color: #fff;
    --contact-icon-hover-color: #ddd;
    --contact-form-border: #1f3a52;
    --contact-input-bg: whitesmoke;
    --contact-border-color: #555;


    /* Footer color palette */
    --footer-bg-primary: rgba(2, 2, 113, 0.772);
    --footer-bg-light: #fbfbfd;
    --footer-text-color: #fff;
    --footer-muted-text: #6a7695;
    --footer-highlight: #5e2ced;
    --footer-icon-bg: #ebeef5;
    --footer-hover-bg: #1b3750;
    --footer-bottom-bg: white;
    --footer-bottom-text: black;
    --footer-text-color: #6a7695;
    --footer-hover-link-color: #1f3a52;
    --footer-social-icon-color: #858da8;
    --footer-social-icon-bg: #ebeef5;
    --footer-social-hover-bg: #1b3750;
    --footer-social-hover-border: #5e2ced;
    --footer-social-hover-color: #ffffff;
    --footer-heading-color: #263b5e;
    --footer-link-hover-color: #5e2ced;
    --footer-button-hover-bg: transparent;
    --footer-button-hover-color: #5e2ced;
    --footer-bottom-text-color: #1f3a52;


    /* Logout Section Colors */
    --logout-link-color: #ffffff;
    --logout-hover-color: #1f3a52;

    /* Modal Section Colors */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: #ffffff;
    --modal-header-bg: #dc3545;
    --modal-header-text-color: #ffffff;
    --modal-close-hover-color: #000000;

    /* Error States */
    --input-error-border: red;
    --error-message-color: red;
    --font-size-heading: 1.5rem;
    --font-size-body: 1rem;
    --spacing-sm: 10px;
    --spacing-lg: 100px;
}

/*#endregion CUSTOM CSS*/

body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Ensure the body takes full height */
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* Ensure vertical scrolling is enabled */
    scroll-behavior: smooth;
    /* Smooth scrolling for better UX */
}

body::before {
    content: '';
    position: fixed;
    /* Use fixed positioning to make the background cover the entire page */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    background-size: 300% 300%;
    opacity: 1;
    /* Make the background image faint */
    z-index: -1;
    /* Position the background behind the content */
    pointer-events: none;
    /* Prevent the background from interfering with interactions */
}


/* Scrollbar Styling */
body::-webkit-scrollbar {
    width: 5px;
    /* Width of the scrollbar */
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Background color of the track */
    border-radius: 10px;
    /* Rounded corners for the track */
}

body::-webkit-scrollbar-thumb {
    background: #1f3a52;
    /* Color of the scrollbar */
    border-radius: 10px;
    /* Rounded corners for the thumb */
}

body::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Darker color when hovered */
}

/* Firefox scrollbar (optional but recommended for scalability) */
@supports (scrollbar-width: thin) {
    body {
        scrollbar-width: thin;
        scrollbar-color: #1f3a52 #e4e4e4;
    }
}

/*#region *******************************************************************************Header Styling*******************************/
header {
    color: #fff;
    padding: 5px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation Styling */
nav {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    /* Ensures spacing between links and button */
}

.nav-center {
    flex: 1;
    /* Takes up the middle space */
    display: flex;
    justify-content: center;
    /* Ensures the links stay centered */
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 0.9375rem;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.nav-links.hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    /* Center list items */
    align-items: center;
    margin: 0;
    padding: 0;


}

nav ul li {
    margin: 0.5rem;
}

nav ul li a {
    color: whitesmoke;
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
    font-size: 0.875rem;
    transition: border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    font-weight: 700;
}

nav ul li a:hover {
    transform: scale(1.1);
    color: #acc8df;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.9375rem;
    /* Moves underline further down */
}

.get-started {
    margin-left: auto;
    width: 95px !important;
    height: 43px !important;
    padding: 10px;
    border-radius: 0.9375rem;

    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;

    /* Base transform to allow hover scaling */
    transform: scale(1);

    /* Smooth scaling and box-shadow transition */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

    /* Optional shake animation */
    animation: shake 3s ease-in-out infinite;
    animation-delay: 2s;
}

.get-started:hover {
    transform: scale(0.95);
    /* shrink */
    background: linear-gradient(135deg, #2a5298, #1e3c72);
    box-shadow: 0 8px 20px rgba(42, 82, 152, 0.4);
}

.sub-container {
    width: 90px;
    background-color: #1f3a52;
    border-radius: 12px;
    padding-top: 2px;
    font-size: 0.875rem;
}



@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

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

.social-media-icons {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.social-media-icons a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

.social-media-icons a:hover h2 {
    animation: shake 0.5s forwards;
}

/*#endregion HEADER*/


/*#region Background Styling*/
#professional {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 30px;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: -5px;
    overflow: hidden;
}

/* Semi-transparent overlay ONLY for background */
#professional::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* dark overlay */
    z-index: 0;
}

.overlay {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
}

/* ✅ Keep left content narrow and vertical */
.header-text {
    flex: 1;
    max-width: 550px;
    /* controls text width */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 2;
    margin-top: 100px;
}

.header-text.show {
    opacity: 1;
    transform: translateX(0);
}

.header-text h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: bold;
    color: white;
}

.header-text p {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: white;
}

/* ✅ Card beneath text */
.cards-container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

/* Right side image remains clean */
.professional-image-wrapper {
    flex: 1;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;

}

.professional-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
    display: block;
    margin-bottom: 140px;
    margin-right: -110px;
}

/* Individual card styles */
.card {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    /* Choose your preferred color */
    border: black solid !important;
    /* button edge style */
    border-style: outset !important;
    /* button edge style */
    border-radius: 50px !important;
    padding: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    width: 210px;
    height: 10% !important;
    display: flex;
    flex-direction: row;
    /* ensures side-by-side layout */
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    gap: 0.5rem;
}

.card:hover {
    transform: scale(0.95);
    background: linear-gradient(135deg, #2a5298, #1e3c72);
    box-shadow: 0 8px 20px rgba(42, 82, 152, 0.4);

}

.card .arrow-icon {
    transition: transform 0.3s ease;
    font-size: 1.2rem;
}

.card:hover .arrow-icon {
    transform: none;
}

.card::after {
    content: "Onboarding ...";
    position: absolute;
    inset: 0;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-weight: bold;
    pointer-events: none;
}

.card:hover::after {
    opacity: 1;
}

.card:hover .card-text,
.card:hover .arrow-icon {
    opacity: 0;
}

.card:hover {

    color: #ffffff;
    animation: shake 0.5s ease-in-out;

}

.glass-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 15px 10px;
    margin-right: -230px;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    /* ⬅️ reduce this value */
    height: auto;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);

}

.glass-box1 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 15px 10px;
    margin-right: -220px;
    margin-top: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    /* ⬅️ reduce this value */
    height: auto;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);

}

.glass-box-right {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 15px 10px;
    position: absolute;
    right: 42%;
    top: 62%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    height: auto;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    z-index: 3;
}

.user-images {
    display: flex;
    flex-wrap: wrap;
    /* wrap small images onto the next line */
    gap: -7px;
    justify-content: center;
}

.user-images img {
    width: 30px;
    /* reduced from 40px */
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid white;

}

.user-count {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #1f3a52;
    /* any color you want */
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
    /* same as images */
    box-sizing: border-box;
    user-select: none;
}


.caption {
    font-size: 0.9rem;
    color: white;
    text-align: center;
    font-weight: 500;
}


/* Initial state (hidden and moved up) */
.card,
.card-oth {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease;
}

/* Animate to visible and slide down */
.card.show,
.card-oth.show {
    opacity: 1;
    transform: translateY(0);
}


/*#endregion BACKGROUND*/

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

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


/*#region**********************************************************************Modal for Card Styles****************************** */
/*Psycologist*/
.modal-prof {
    display: none;
    position: fixed;
    z-index: 1000;
    left: -100%;
    /* Start the modal off-screen */
    top: 0;
    width: 70%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: left 0.9s ease-in-out;
    /* Slide-in effect */

}

/* When modal is visible (after clicking the button) */
.modal-prof.show {
    left: 0;
    /* Slide to the center */
}

.modal-content-prof {
    background-color: #fff;
    margin: 5% auto;
    /* Adjust for better centering */
    padding: 1.25rem;
    border-radius: 8px;
    width: 110%;
    /* Responsive width */
    max-width: 550px;
    /* Optional: limit maximum width */
    max-height: 85vh;
    /* Set max height relative to viewport */
    box-shadow: 0 5px 0.9375rem rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    /* Enable scrolling inside the modal */
    background: grey;
    background-size: 200% 300%;
    animation: gradientMove 12s ease infinite;
    /* Animation for moving gradient */
}


.modal-header1 {
    background-color: #1f3a52 !important;
    /* Or any color of your choice */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px;
    text-align: center;

    border-radius: 10px;
}

.modal-title-container {
    max-width: 80%;
}

.modal-title1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
}

.modal-subtext {
    font-size: 1rem;
    color: white;
    line-height: 1.5;
}

.close-btn0,
.close-btn1,
.close-btn2,
.close-btn3,
.close-btn4 {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.9rem;
    color: red;
}


input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select {
    border: none;
    border-bottom: 2px solid #1f3a52;
    /* Light gray underline */
    background-color: transparent;
    /* Remove background */
    outline: none;
    /* Remove focus outline */
    width: 100%;
    /* Full width */
    font-size: 0.775rem;
    /* Adjust font size */
    padding: 8px 0;
    /* Padding for spacing */
    transition: border-color 0.3s ease;
    /* Smooth border transition */
    color: #1b1919;
    /* Text color */
    caret-color: black;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"],
select:focus {
    border-bottom: 2px solid black;
    /* Highlight underline on focus */
}

/* Target the placeholder for input fields */
input::placeholder {
    color: grey;
    opacity: 1;
    /* Ensures full opacity */
    font-size: 0.775rem;
}

label {
    font-size: 0.875rem;
    color: black;
    /* Label color */
    margin-bottom: 4px;
    display: block;
    /* Ensure label is above input */
}

select {
    appearance: none;
    /* Remove default dropdown style */
    border-radius: 0;
    /* Remove any rounded corners */
    padding: 8px 0;
    /* Match input padding */
    cursor: pointer;
    /* Pointer cursor for dropdowns */

}

input[readonly] {
    color: #685f5f;
    /* Light gray text for read-only fields */
    cursor: not-allowed;
    /* Indicate non-editable */
}



.psyc {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 1.1rem;
    /* Increase bottom margin for more space */
}



.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.form-group {
    flex: 0 0 49%;

}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input,
select {
    width: 100%;
    padding: 8px;
    font-size: 0.775rem !important;
    margin-bottom: 10px;
    border: 1px solid black;
    border-radius: 10px;

}

.button-psyc {
    position: relative;
    /* Ensures icon is positioned relative to button */
    width: 20%;
    padding: 10px;
    border: none;
    background: linear-gradient(135deg, #1f3a52, #1f3a52);
    color: whitesmoke;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
    margin: 1.25rem auto;
    /* Centers the button */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ensures text stays centered */
}

.button-psyc:hover {
    background: linear-gradient(135deg, #1f3a52, #38618d);
    ;
}

/* Initially position icon outside */
.icon {
    position: absolute;
    right: 10px;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* On hover, slide the icon in */
.button-psyc:hover .icon {
    opacity: 1;
    transform: translateX(-10px);
}

/* On click, slide the icon out */
.button-psyc:active .icon {
    transform: translateX(30px);
    opacity: 0;
}





.modal-content-prof::-webkit-scrollbar {
    width: 5px;
    /* Width of the scrollbar */
}

.modal-content-prof::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Background color of the track */
    border-radius: 10px;
    /* Rounded corners for the track */
}

.modal-content-prof::-webkit-scrollbar-thumb {
    background: #1f3a52;
    /* Color of the scrollbar */
    border-radius: 10px;
    /* Rounded corners for the thumb */
}

.modal-content-prof::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Darker color when hovered */
}

.age-container0 {
    margin-top: 5px;
    font-size: 0.875rem;
    color: black;
    font-weight: bold;
}

/*#endregion*/


/*#region Section *************************************************************INFO Layout STYLING***************** */
#p-info {
    padding: 1.25rem;
    background-color: #f9f9f9;
  
   background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    background-size: 300% 300%;
    margin-top: -35px;
    width:100vw;
        min-height: 100vh;  /* ensures at least one screen height */
    height: auto; 
}


.benefit-container {
    width: fit-content;
    max-width: 500px;
    text-align: center;
    background: green;
    padding: 0.1rem 1rem;
    border-radius: 5px;
    margin-top: 0;
    margin: 0 auto 20px auto;
    height: 2.5rem;
    display: flex;
    align-items: center;
    /* Vertically center */
    justify-content: center;
    /* Horizontally center */
    color: white !important;

}

.requirement-container {
    width: fit-content;
    max-width: 500px;
    text-align: center;
    background: green;
    padding: 0.1rem 1rem;
    border-radius: 5px;
    margin-top: 0;
    margin: 0 auto 20px auto;
    height: 2.5rem;
    display: flex;
    align-items: center;
    /* Vertically center */
    justify-content: center;
    /* Horizontally center */
    color: white !important;

}



/* Top center text */
.top-text {
    text-align: center;
    font-size: 1rem;

    margin-bottom: 40px;
    color: rgb(226, 221, 221);
}

.top-text .underline {
    width: 100px;
    height: 4px;
    background-color: #fff;
    margin: 0 auto 1.25rem;
    border-radius: 2px;
}

.top-text h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.top-text p {
    font-size: 1rem;
    color: white;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* Initial hidden and off-screen states */
.top-slide-left,
.top-slide-fade {
    opacity: 0;
    transition: all 0.6s ease-out;
}

.top-slide-left {
    transform: translateX(-50px);
    /* Start off to the left */
}

.top-slide-fade {
    transform: translateY(-50px);
    /* Start off above (from the top) */
}

/* On animation trigger, set them to visible and in place */
.top-slide-left.show {
    opacity: 1;
    transform: translateX(0);
    /* Slide to original position from the left */
}

.top-slide-fade.show {
    opacity: 1;
    transform: translateY(0);
    /* Slide down to original position from the top */
}



/* Sub-sections container */
.sub-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
    opacity: 0;
    /* Initially hidden */
    transform: translateY(100px);
    /* Start off-screen below */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When the 'show' class is added, animate it */
.sub-sections.show {
    opacity: 1;
    transform: translateY(0);
}


/* Left Section */
.left-section,
.right-section {
    flex: 1 1 45%;
    /* Each takes up 45% of the available space */
    padding: 1.25rem;
    border-radius: 1.25rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    background: linear-gradient(135deg, #1f3a52, #1f3a52);

    background-size: 300% 300%;
}

.left-section ul,
.right-section ul {
    list-style-type: none;
    padding: 0;
    line-height: 1.3rem;
    color: rgb(232, 222, 222);
    font-size: 1rem;

}

.left-section li,
.right-section li {
    margin-bottom: 10px;
}



/* Mid-bottom Section */
.mid-bottom-section {
    flex: 1 1 100%;
    text-align: center;
    background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    padding: 1.25rem;
    border-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-size: 300% 300%;

}

.mid-bottom-section h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
    color: whitesmoke
}

.mid-bottom-section p {

    color: whitesmoke
}


.work-scope {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.work-scope label {
    font-size: 1rem;
}



.info-icon {
    font-size: 0.975rem !important;
    color: #b7b1b1;
    margin-top: -102px;
    margin-left: 520px;
    width: 400px;
}

.info-icon a {
    color: white;

}

/* Style the slider container */
/* Center the slider container inside the mid-bottom-section */
.slider-container {
    width: 90%;
    max-width: 600px;
    background: #f7f9fc;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Flexbox for centering the slider container */
    margin-left: auto;
    margin-right: auto;
    /* Optionally, center the content in the container as well */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Style the slider header */
.slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #263b5e;
    font-weight: 600;
    width: 100%;
}

.earnings-slider-wrapper {
    margin-top: 35px;
}

/* Slider styling */
.slider {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, white, #1f3a52);
    outline: none;
    border-radius: 10px;
    appearance: none;

}

.slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #5e2ced;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
    background: #1f3a52;
}

/*#endregion*/

/*#region Advert Screen****************************ADVERT SCREEN*******************************************/
.ad-container {
    position: fixed;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
    width: var(--ad-width);
    height: var(--ad-height);
    z-index: 1000;
    overflow: hidden;
    background-color: transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Main Ad Box */
.ad {
    position: absolute;
    right: -300px;
    /* Off-screen initially */
    opacity: 0;
    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background: var(--ad-bg-overlay);
    /* Slight background for contrast */
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Image Container */
.ad-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Adjust ratio as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}


.ad img {
    max-width: 100%;
    /* Ensure image fits within the container */
    max-height: 80%;
    /* Prevents stretching */
    object-fit: cover;
    /* Keeps image proportional */
    border-radius: 5px;
    margin-top: -12px;
}

/* Text Container */
.ad-content {
    width: 100%;
    height: 35%;
    /* Remaining space for text */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ad-content h3 {
    font-size: 0.875rem;
    margin-bottom: 2px;
    color: var(--ad-heading-color);
    white-space: normal;
    word-wrap: break-word;
    margin-top: 13px;
}

.ad-content p {
    font-size: 0.875rem;
    color: var(--ad-paragraph-color);
    white-space: normal;
    word-wrap: break-word;
}

/* Show ad */
.ad.show {
    right: 0 !important;
    opacity: 1 !important;
    display: flex !important;
}

/* Hide ad */
.ad.hide {
    right: -300px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.ad-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.ad-link:hover {
    cursor: pointer;
    opacity: 0.95;
}



/*#endregion Advert Screen****************************/

/*#region**********************************************REVIEW Section Styling************************/
#t-review {
    position: relative;
    /* Needed for absolute positioning inside */
    padding: 40px 1.25rem;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    color: #1f3a52;
    text-align: center;
    background: transparent;
    background-size: 300% 300%;
    margin-top: -35px;
    width:100vw;


}


/* Container for all the review cards */
.review-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}


/* Apply the animation every time it enters the viewport */
.review-container.show {
    opacity: 1;
    transform: translateX(0);
}

.review-card.left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.review-card.left.animate {
    opacity: 1;
    transform: translateX(0);
}

.review-card.top {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease-out;
}

.review-card.top.animate {
    opacity: 1;
    transform: translateY(0);
}

.review-card.right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}

.review-card.right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Review Card Styling */
.review-card {
    position: relative;
    /* Enable absolute positioning inside */
   background: linear-gradient(
        135deg,
        rgba(15, 32, 39, 0.85) 0%,   /* dark moody base */
        rgba(32, 58, 67, 0.7) 50%,   /* slightly lighter mid-tone */
        rgba(112, 184, 0, 0.15) 100% /* subtle MoodPàdi green tint */
    );
    background-size: 300% 300%;
    padding: 1.25rem;
    width: calc(33.33% - 1.25rem);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: gradientMove 12s ease infinite;
    overflow: hidden;
    /* So overlay doesn’t spill out */
}

/* Overlay layer */
.t-review-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    /* Semi-transparent white */
    z-index: 0;
    border-radius: 8px;
}

.review-author {
    display: flex;
    align-items: center;
    /* Vertically center image and text */
    justify-content: flex-start;
    /* Align everything to the left */
    gap: 10px;
    /* Space between image and name */
    width: 100%;
    /* Ensure it spans full card width */
    position: relative;
    z-index: 1;
    margin-bottom: 0.75rem;

}

.review-author img {
    width: 40px;
    /* Or desired avatar size */
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.review-author p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

.rating-stars {
    color: var(--advert-highlight);
    font-size: 1.5rem;
    margin-left: -230px !important;

}

/* Keyframes for animating the gradient */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Blockquote Styling */
.review-text {
    font-style: italic;
    font-size: 1rem;
    color: white !important;
    margin-bottom: 0.9375rem;

}


/*#endregion*/

/*#region ********************************************************OUR TEAM*********************/
.our-team-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    margin-top: -30px;
    /* ✅ Dynamic height handling */
    min-height: 100vh;  /* ensures at least one screen height */
    height: auto;       /* expands with content automatically */
    width:100vw;
    bottom:0;

}

.our-team-section h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--team-text-color);
}

.our-team-section p {
    font-size: 1rem;
    color: var(--team-text-color);
    max-width: 700px;
    margin: 0 auto 40px auto;
}


.our-team-section .underline {
    width: 100px;
    height: 4px;
    background-color: #fff;
    margin: 0 auto 20px;
    border-radius: 2px;
}


.team-slide-left,
.team-slide-fade {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.team-slide-left.team-animate {
    opacity: 1;
    transform: translateX(0);
}

.team-slide-fade.team-animate {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

.team-header {
    text-align: center;
    margin-bottom: 2rem;
}

.team-header p {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 0.5rem;
    font-family: sans-serif;
    line-height: 1.4em;
}


.team-header h2 {
    font-size: 2.375rem;
    font-weight: 300;
    line-height: 1.1em;
    color: white;
}

.serif3 {
    font-weight: 200;
    font-style: italic;
    font-family: serif;
    margin-left: 0.2rem;
    /* reduce or remove margin */
}

.meet-team-btn-wrapper {
    text-align: center;
    margin: 20px 0;
}

.meet-team-btn {
  padding: 10px 25px;
    font-size: 16px;
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    /* Choose your preferred color */
    color: white;
    border: #0481C1;
    /* button edge style *
    /* button edge style */
    border-style: outset;
    /* button edge style */
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.meet-team-btn:hover {
    background-color: #3b5bdb;
}

/*#endregion OUR TEAM********************************/


/*#region FAQS*************************************************FAQS SECTION****************/

#faq {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    background-size: 300% 300%;
    width: 80%;
    margin: 50px auto;
    padding: 1.25rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: -10px;
    border-radius: 55px;
}

.faq-title {
    left: 300px;
    font-size: 18px;
    color: #ece7e7;
    margin-bottom: 1.25rem;
    justify-content: center;
    text-align: center;
}

/* FAQ item styles */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
     background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.faq-item {
    border-bottom: 1px solid #ddd;
}

.faq-question {
     background: linear-gradient(
        135deg,
        rgba(15, 32, 39, 0.85) 0%,   /* dark moody base */
        rgba(32, 58, 67, 0.7) 50%,   /* slightly lighter mid-tone */
        rgba(112, 184, 0, 0.15) 100% /* subtle MoodPàdi green tint */
    );
    color: white;
    border: none;
    padding: 0.9375rem;
    font-size: 1rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #1f3a52;
}

/* FAQ answer styles */
.faq-answer {
    padding: 0.9375rem;
    background-color: #f7f7f7;
    border-radius: 8px;
    display: none;
    font-size: 1em;

}

.faq-answer p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

/* Accordion animation */
.faq-item.open .faq-answer {
    display: block;
    animation: slideDown 0.4s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-1.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*#endregion*****/


/*#region*****************************************************OUR APP*/
.our-app-section {
    width: 100%;
    text-align: center;
    padding: 60px 1.25rem;

    word-wrap: break-word;
    margin-top: 35px;
    border: none;
    box-sizing: border-box;
}

.our-app-section h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.our-app-section .underline {
    width: 100px;
    height: 4px;
    background-color: #fff;
    margin: 0 auto 1.25rem;
    border-radius: 2px;
}

.our-app-section p {
    font-size: 1rem;
    color: white;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 30px;
}

.store-buttons {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.store-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.store-button img {
    width: 40px;
    height: 40px;
}

.google-play {
    background-color: #111827;
}

.google-play:hover {
    background-color: #1f2937;
}

.ios-store {
    background-color: #111827;
}

.ios-store:hover {
    background-color: #1f2937;
}

.app-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.app-slide-left.our-app-section-animate {
    opacity: 1;
    transform: translateX(0);
}

/*#endregion*****/



/*#region CONSULT**********************************************************/

.consult {
    position: relative;
    /* Ensures child absolute positioning is relative to this */
    min-height: 750px;
    /* Optional: define height of section if needed */
     background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);

    background-size: cover;
    margin-top: -32px;
    width:100% !important;
}

.consult-container {
    position: absolute;
    right: 30px;
    width: 600px;
    /* Adjust as needed */
    height: 620px;
    /* Adjust as needed */
    background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df);
    border: none;
    /* Optional: for visibility */
    border-radius: 30px;
    padding: 20px;
    box-sizing: border-box;
}

/* Dark overlay */
.consult-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    border-radius: 30px;
}

/* Image box that sits on top of the overlay */
.consult-container .image-box {
    position: relative;
    width: 300px;
    height: 400px;
    z-index: 2;
    /* Above the overlay */
    margin: 20px;
    /* Optional positioning */
    border: none;
    overflow: hidden;
    left: 230px;
    border-radius: 30px;
}

/* Image inside the box */
.consult-container .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2);
    /* Zooms in by 20% */
    transform-origin: center;
}

.consult-container .text-box {
    position: relative;
    width: 370px;
    height: 360px;
    z-index: 2;
    /* Above the overlay */
    margin: 20px;
    /* Optional positioning */
    border: none;
    overflow: hidden;
    left: -20px;
    margin-top: -250px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        rgba(15, 32, 39, 0.85) 0%,   /* dark moody base */
        rgba(32, 58, 67, 0.7) 50%,   /* slightly lighter mid-tone */
        rgba(112, 184, 0, 0.15) 100% /* subtle MoodPàdi green tint */
    );
}

.text-box p {
    font-size: 24px;
    line-height: 1.6;
    color: #f5f5f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 10px 20px;
    /* ← Added horizontal padding (left & right) */
    letter-spacing: 0.5px;
    border: none;
}

.button-consult {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 55%;
    height: 40px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #00c6a7, #845ec2);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: black solid;
    /* button edge style */
    border-style: outset;
    /* button edge style */
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 1.25rem auto;
    left: 20px;
    top: -15px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    gap: 0.5rem;
}

.button-consult:hover {
    transform: scale(0.95);
    box-shadow: 0 8px 20px rgba(132, 94, 194, 0.4);
    background: linear-gradient(135deg, #00e0b3, #9b65d6);
}

.button-consult .arrow-icon {
    transition: transform 0.3s ease;
    font-size: 1.5rem;
}

.button-consult:hover .arrow-icon {
    transform: translateX(6px);
}

.button-consult::after {
    content: "Exploring ...";
    position: absolute;
    inset: 0;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-weight: bold;
}

.button-consult:hover::after {
    opacity: 1;
}

.button-consult:hover .btn-text,
.button-consult:hover .arrow-icon {
    opacity: 0;
}


.button-onboard {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43%;
    height: 40px;
    padding: 10px 20px;
    border: none;
    background: linear-gradient(135deg, #00c6a7, #845ec2);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: black solid;
    /* button edge style */
    border-style: outset;
    /* button edge style */
    border-radius: 50px;
    transition: background 0.3s ease, transform 0.3s ease;
    margin: 1.25rem auto;
    left: 20px;
    top: -15px;
    overflow: hidden;
    gap: 0.5rem;
    text-align: center;
}

.button-onboard:hover {
    transform: scale(0.95);
    box-shadow: 0 8px 20px rgba(132, 94, 194, 0.4);
    background: linear-gradient(135deg, #00e0b3, #9b65d6);
}

.button-onboard .arrow-icon {
    transition: transform 0.3s ease;
    font-size: 1.5rem;
}

.button-onboard:hover .arrow-icon {
    transform: translateX(6px);
}

.button-onboard::after {
    content: "Onboarding ...";
    position: absolute;
    inset: 0;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-weight: bold;
    pointer-events: none;
}

.button-onboard:hover::after {
    opacity: 1;
}

.button-onboard:hover .btn-text,
.button-onboard:hover .arrow-icon {
    opacity: 0;
}

.text-wrapper {
    position: absolute;
    top: 40px;
    left: 20px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.text-wrapper {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}

.text-wrapper.animate {
    opacity: 1;
    transform: translateX(0);
}


.text-side {
    font-size: 60px;
    color: #ffffff;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    margin-left: 45px;
    margin-top: 170px;
}

.serif {
    font-weight: 500;
    font-style: italic;
    font-family: Newsreader, "Times New Roman", serif;
    font-size: 70px;
    color: #ffffff;
    margin-top: -20px;
    /* Optional: for tighter visual spacing */
    margin-left: 45px;
}

.serif1 {
    font-weight: 500;
    font-style: italic;
    font-family: Newsreader, "Times New Roman", serif;
    font-size: 4em;
    color: #fff;
    margin-top: -20px;
    /* Optional: for tighter visual spacing */
    margin-left: 45px;
}

.ser {
    color: #1f3a52;
    display: none;
}

/*#endregion CONSULT************************/



/*#region INFO SECTION*/
.info-container {
    width: 900px;
    margin: 40px auto;
    display: flex;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-section {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

/* Add vertical divider between sections */
.info-section:not(:last-child) {
    border-right: 1px solid #ccc;
}

/* Circle number */
.step-number {
    width: 40px;
    height: 40px;
    background-color: #222;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/* Bold section title */
.step-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff !important;
    margin-bottom: 8px;
}

/* Description paragraph */
.step-desc {
    font-size: 14px;
    color: #222 !important;
    line-height: 1.4;

}

.onboarding-block {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 50px auto;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
}

.onboarding-left {
    flex: 1;
    margin-top: 130px;
}

.onboarding-left h3 {
    font-variation-settings: "wght" 300;
    letter-spacing: -.01em;
    font-size: 38px;
    font-weight: 100;
    line-height: 1.1em;
    color: white;
    margin-bottom: 30px;
}

.requirement-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
    font-family: 'Nunito', sans-serif;
    font-variation-settings: "wght" 350;
    font-size: 16px;
    line-height: 1.4em;

}

.requirement-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    text-align: left;
}

.mini-number {
    width: 24px;
    height: 24px;
    background-color: white;
    color: #1f3a52;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}

.note {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
    max-width: 600px;
    text-align: left;
}

/* Right side box */
.onboarding-right {
    width: 600px;
    flex-shrink: 0;
}

.onboarding-box {
    position: relative;
    /* Needed for absolute positioning inside */
    width: 87%;
    height: 550px;
    background-color: #1f3a52;
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Image section */
.onboarding-image {
    width: 100%;
    height: 100%;
}

.onboarding-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2);
    transform-origin: center;
    border-radius: 16px;
}

/* Text on top of the image */
.onboarding-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center it */
    z-index: 3;
    width: 400px;
    height: auto;
    background-color: rgba(32, 54, 73, 0.85);
    /* Slightly transparent background */
    color: white;
    padding: 20px 30px;
    border-radius: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding-top: 30px;
    /* ⬅️ Add this line or increase it if needed */

}

.onboarding-text h4 {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: -10px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.onboarding-text p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

/* Big open quotation mark on the right side */
.onboarding-text::before {
    content: "“";
    font-size: 100px;
    position: absolute;
    top: -30px;
    left: 20px;
    color: white;
    z-index: 0;
    font-family: Georgia, serif;
    z-index: 1;
}

/* Add small quotes to each paragraph */
.onboarding-text p::before {
    content: "“";
    font-size: 20px;
    margin-right: 3px;
}

.onboarding-text p::after {
    content: "”";
    font-size: 20px;
    margin-left: 3px;
}

/*#endregion INFO SECTION**********************************************************/

/*#region BEN**************************************************************/
.ben {
    padding: 40px;
    background-color: transparent;
    border: none;
    background-image: none;
    box-shadow: none;
    outline: none;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 1200px;
    /* Fixed missing unit */
    margin: 0 auto;
    /* Optional: center section if needed */
        min-height: 100vh;  /* ensures at least one screen height */
    height: auto; 
}

.benefit-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    border: none;
}

.benefit-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 300px;
}

.benefit-image {
    position: relative;
    width: 300px;
    height: 400px;
    z-index: 2;
    /* Above the overlay */
    margin: 20px;
    /* Optional positioning */
    border: none;
    overflow: hidden;
    left: 100px;
    border-radius: 30px;
}

.benefit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2);
    /* Zooms in by 20% */
    transform-origin: center;

}

.benefit-text {
    position: relative;
    margin-top: -20% !important;
    left: 72%;
    transform: translate(-50%, -50%);
    /* Center it */
    z-index: 3;
    width: 400px;
    height: auto;
    background-color: rgba(32, 54, 73, 0.85);
    /* Slightly transparent background */
    color: white;
    padding: 20px 30px;
    border-radius: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding-top: 30px;
    /* ⬅️ Add this line or increase it if needed */
}

.benefit-text h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: white;
}

.benefit-text ul {
    list-style-type: disc;
    padding-left: 20px;
    color: white;
    text-align: left;
}

.benefit-text ul li {
    margin-bottom: 8px;
    font-size: 16px;
}

.benefit-right {
    flex: 1;
    min-width: 300px;
}

.earnings-slider-wrapper {
    text-align: left;
}

.earnings-label {
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
    font-size: 16px;
}

.earnings-slider {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.earnings-slider .slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #305575;
    font-weight: 500;
}

.earnings-slider .slider {
    width: 100%;
}

/*#endregion BEN*************************************************************/


/*#region WHO WE ARE *********************************************************WHO WE ARE -------------------------------------------*/

.who-we-are-section {
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 2rem;
   background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    height: 800px;
    margin-top: -30px;
    width:100vw;
}

.who-we-are-image {
    position: relative;
    width: 600px;
    /* Desired width */
    height: auto;
    flex-shrink: 0;
    /* Prevent shrinking */
    margin-top: 60px;
    margin-left: 45px;

}

.who-we-are-image img {
    width: 80%;
    height: 600px;
    object-fit: cover;
    border-radius: 40px !important;

}

/* Right side content */
.who-we-are-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 50%;
    margin-right: -80px !important;


}

.who-we-are-content h2 {
    font-size: 40px;
    color: white;
    margin: 0;
    font-weight: 100;
    font-family: "Nunito", sans-serif;
    margin-bottom: 1.5rem !important;
    word-wrap: break-word;
    width: 100%;
    margin-left: -60px;
}

.who-we-are-content>p {
    font-size: large;
    line-height: 1.6;
    color: white;
    margin: 0;
    margin-left: -55px;
    word-wrap: break-word;
    width: 100%;

}

.who-we-are-image img {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.who-we-are-image.animate img {
    opacity: 1;
    transform: translateX(0);
}

.who-we-are-content h2 {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease-out;
}

.who-we-are-content h2.animate {
    opacity: 1;
    transform: translateY(0);
}


.card-container {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;

}

.card-box {
    flex: 1;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 200px !important;
    height: 220px !important;
    left: -50px;
}

.card-icon {
    position: static;
    top: 1rem;
    left: 1rem;
    font-size: 1.8rem;
    color: white;
}

.icon-container {
    width: 48px;
    height: 48px;
    background-color: #1f3a52;
    border-radius: 50%;
    /* makes it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    left: 1rem;
    margin-top: -10px;
}

.card-box h3 {
    margin-top: 2.5rem;
    font-size: 1.2rem;
    color: #2c3e50;
}

.card-box p {
    font-size: 0.95rem !important;
    color: #666;
    margin-top: 0.5rem !important;
    font-family: Inter, sans-serif;
    line-height: 24px !important;
    text-align: left !important;

    word-wrap: break-word;
}

.read-more-container {
    text-align: center;
    margin-top: 2rem;
}

.read-more-btn {
    background: linear-gradient(135deg, #00c6a7, #845ec2);
    color: white;
    padding: 0.75rem 2.5rem;
    border-radius: 25px;
    border: black solid;
    /* button edge style */
    border-style: outset;
    /* button edge style */
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
    bottom: 20px;
    height: 40px;
}

.read-more-btn:hover {
    transform: scale(0.95);
    box-shadow: 0 8px 20px rgba(132, 94, 194, 0.4);
    background: linear-gradient(135deg, #00e0b3, #9b65d6);
}

.read-more-btn .arrow-icon {
    display: inline-block;
    transition: transform 0.4s ease;
    font-size: 1.2rem;
}

.read-more-btn:hover .arrow-icon {
    transform: translateX(6px);

}

.read-more-btn::after {
    content: "Reading ...";
    position: absolute;
    inset: 0;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.read-more-btn:hover::after {
    opacity: 1;
}

.read-more-btn:hover .btn-text,
.read-more-btn:hover .arrow-icon {
    opacity: 0;
}

/*#endregion*/




@keyframes pulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/*#region BODY SECTION STYLING**/
section {
    padding: 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    margin-bottom: 1rem;
}

ul {
    list-style-type: square;
    padding-left: 1.25rem;
}

/*#endregion*/

/*#region*************CONTACT AND FOOTER STYLING***************************************/
#contact {
    background: rgba(2, 2, 113, 0.772);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 700px;
    margin: 0 auto;
}


/* Form Styling */
#contact form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 400px;
}

/* Input and Textarea Styling */
#contact form input,
#contact form textarea {
    width: 100%;
    padding: 0.3rem;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: whitesmoke;
    color: Black;
    box-sizing: border-box;
}

/* Textarea Specific Styling */
#contact form textarea {
    height: 70px;
    resize: vertical;
}

/* Button Styling */
#contactForm button {
background: linear-gradient(135deg, #ffb300, #ff6f00);
color: #ffffff;

    padding: 0.5rem 1rem;
    
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    width: 50%;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

#contactForm button:hover {
    background-color: #315372;
}

/* Label Styling */
#contact form label {
    color: #fff;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Social Media Icons Styling */
.social-icon {
    color: #fff !important;
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 0 0.5rem;
}

.social-icon:hover {
    color: #ddd;
}

.whatsapp-qr-code {
    text-align: center;
    margin-top: 1.25rem;
}

.whatsapp-qr-code img {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
}

.subfooter {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    width: 1200px;
    margin-bottom: -130px !important;
    box-sizing: border-box;
    max-width: 1500px;
    margin: 0 auto;
    /* Center it if needed */
    color: white !important;
    background: linear-gradient(
        135deg,
        rgba(15, 32, 39, 0.85) 0%,   /* dark moody base */
        rgba(32, 58, 67, 0.7) 50%,   /* slightly lighter mid-tone */
        rgba(112, 184, 0, 0.15) 100% /* subtle MoodPàdi green tint */
    );
    border-radius: 10px;
    overflow: hidden;
}




.subfooter-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.subfooter-right {
    display: flex;
    justify-content: flex-start;
    /* Change to flex-start */
    width: 60%;
    align-items: center;
    margin-top: -65px;
    transform: translateX(-120px);
    /* Use transform instead of margin-left */
}



.subscribe-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.subscribe-form {
    display: flex;
}

.emailf-input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    width: 250px !important;
}

.subf1-button {
    height: 44px;
    width: 150px !important;
    border-radius: 35px !important;
    background: linear-gradient(135deg, #ffb300, #ff6f00);
    color: #ffffff;
    color: #fff;
    border: 2px solid black;
    border-style: outset;
    margin-top: 0px;
    margin-left: 7px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}


.privacy-statement {
    font-size: 14px;
}

.about-subtext-f {
    line-height: 1.1;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 15px;
    color: white !important;
    font-size: 38px !important;
    line-height: 1.1em;
    font-weight: 100;
}

.subf {
    color: white !important;
}

.serif-f {
    line-height: 1.1;
    text-align: left;
    margin-bottom: 30px;
    font-style: italic;
    font-family: Newsreader, "Times New Roman", serif;
    font-size: 38px !important;
    line-height: 1.1em;
    font-weight: 100;
    color: #fff !important;
}

.copy {
    color: white !important;
    margin-top: 20px;
}

.copy1 {
    color: white !important;
    margin-top: -20px;
}

.copy2 {
    color: white !important;
    margin-top: -20px;
}

.logo-video-1 {
    width: 170px;
    height: auto;
}



.image-placeholder1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    width: 250px;
    height: 250px;
    border-radius: 10%;
    margin-top: 50px;
    margin-left: 60px;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

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

/*#endregion***/


/*#region****FOOTER**************************************************FOOTER********************************************************/
footer {
    /* Matches footer or slightly darker */
    color: #fff;
    display: flex;
    justify-content: space-around;
    padding: 1.25rem;
    flex-wrap: wrap;

}

/* Custom Footer Area */
.custom_footer_area {
     background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
     margin-top:0px !important;

}

/* Footer Top */
.custom_footer_top {
    padding: 100px;
    position: relative;
    overflow-x: hidden;
    width: 1550px;



}

/* Adjust input fields and text area to same width */
.custom_footer_top .contact_widget input,
.custom_footer_top .contact_widget textarea {
    width: 100%;
    /* Set the width to 100% */
    max-width: 100%;
    /* Ensure they are full-width */
    padding: 12px;
    /* Optional: Adjust padding for better appearance */
    margin-bottom: 0.9375rem;
    /* Space below each input */
    background: rgba(255, 255, 255, 0.1); /* transparent white field */
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff; /* input text white */
}


#footer .contact_widget input::placeholder,
#footer .contact_widget textarea::placeholder {
  color: rgba(255, 255, 255, 0.7); /* slightly faded white for placeholder */
}

/* Focus state for better UX */
#footer .contact_widget input:focus,
#footer .contact_widget textarea:focus {
  border-color: #ffb300; /* match your accent color */
  outline: none;
  background: rgba(255, 255, 255, 0.15);
}



/* Footer Bottom */
.custom_footer_area .footer_bottom {
    padding-top: 5px;
    padding-bottom: 50px;
}

.custom_footer_top .contact_widget p,
.custom_footer_top .quick_links_widget p,
.custom_footer_top .support_widget p,
.custom_footer_top .social_widget p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 28px;
    color: #6a7695;
    margin-bottom: 1.25rem;
}
#footer p,
#footer label,
#footer .f_widget,
#footer .contact_widget label {
  color: #ffffff !important;
}

/* Button Hover */
a:hover,
a:focus,
.btn:hover,
.btn:focus,
button:hover,
button:focus {
    text-decoration: none;
    outline: none;
}

.custom_footer_top .f_widget .f_list li a:hover {
    color: #2067a4;
}

/* Social Icons */
.custom_footer_top .f_social_icon a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 0.875rem;
    line-height: 45px;
    color: #858da8;
    display: inline-block;
    background: #ebeef5;
    text-align: center;
    transition: all 0.2s linear;
}

.custom_footer_top .f_social_icon a:hover {
    background: #1f3a52;
    border-color: #1f3a52;
    color: white;
}

.custom_footer_top .f_social_icon a+a {
    margin-left: 4px;
}


/* Footer Widget Styling */
.f_widget {
    margin-bottom: 40px;

}

.f_widget h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #fff;
}

.f_widget .f_list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
}

.f_widget .f_list li {
    margin-bottom: 0.9375rem;

}

.f_widget .f_list li a {
    color: #fff;
    font-size: 0.875rem;
 text-decoration: none; /* optional cleaner look */
  transition: color 0.3s ease;
}

.f_widget .f_list li a:hover {
    color: #5e2ced;
}

.btn_get_two:hover {
    background: transparent;
    color: #5e2ced;
}

.f_social_icon a {
    width: 46px;
    height: 46px;
    line-height: 46px;
    background: #ebeef5;
    border-radius: 50%;
    color: #858da8;
    text-align: center;
    font-size: 1.25rem;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.f_social_icon a:hover {
    background: #5e2ced;
    border-color: #5e2ced;
    color: white;
}

/* Social Icons Font */
.f_social_icon a i {
    font-size: 1.25rem;
}
.custom_footer_top .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 54px;
    color:#fff;
}
.footer-text {
    color: var(--footer-bottom-text-color);
    font-family: 'Nunito', sans-serif;
    font-size: 14.5px;
    margin-top: 10px;
    position: absolute;
    /* Ensures it's always visible at the bottom */
    bottom: 0;
    /* Positions at the bottom of the viewport */
    left: 50%;
    /* Starts at 50% of the viewport width */
    transform: translateX(-50%);
    /* Centers the element horizontally */
    text-align: center;
    /* Centers the text within the element */
    width: 100%;
    /* Optional: Makes it span the entire width */
}

.top-f {
    position: fixed;
    bottom: 10px;
    right: 15px;
    z-index: 999;
    font-size: 16px;
     background: linear-gradient(135deg, #0481C1 0%, #0f2027 100%);
    color: white;
    border: none;
    outline: none;
    padding: 5px 5px;
    border-radius: 60px;
    cursor: pointer;
    opacity: 1;
    /* <<< make it always visible */
    transition: opacity 0.3s ease-in-out;
    font-weight: 700;
}


.top-f:hover {
    background-color: #0056b3;
}

.top-f.show {
    opacity: 1;
}
/* Remove space between the section above and footer */
.custom_footer_area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*#endregion********************/

/*#region COMPLIANCE FOOTER*/

.compliance-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centers vertically */
  align-items: center;       /* centers horizontally */
  text-align: center;
  color: #fff;
  margin-top: 18px;
  padding: 10px 0;
  width: 100%;
}

.badge-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* aligns icons vertically */
  gap: 8px;
  font-size: 13px;
  color: #fff;
  opacity: 0.95;
  margin-bottom: 6px;
}

.badge-line span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.badge-line i {
  color: #70b800;
  font-size: 14px;
}

.compliance-note {
  font-size: 12px;
  line-height: 1.5;
  color: #dcdcdc;
  max-width: 80%;
  text-align: center;
}

/*#endregion COMPLIANCE*/

/*#region CUSTOM MODAL Style for error messages */
.error-message {
    color: red;
    font-size: 0.9375rem;
    margin-top: 5px;
    font-weight: bold;
}

.error {
    color: red;
    font-size: 0.9375rem;
    margin-top: 5px;
    font-weight: bold;
}

#responseMessageOther,
#responseMessageMental,
#responseMessageMarriage,
#responseMessageCounsellor,
#responseMessagePsychology {
    position: fixed;
    top: 50%;
    left: -100%;
    /* Start off-screen */
    transform: translateY(-50%);
    background-color: #4CAF50;
    color: white;
    padding: 0.9375rem 1.25rem;
    font-size: 1.125rem;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: left 0.5s ease-in-out;
    z-index: 1000;
}

#responseMessageOther i,
#responseMessageMental i,
#responseMessageMarriage i,
#responseMessageCounsellor i,
#responseMessagePsychology i {
    font-size: 1.5rem;
}



.error-gradient {
    background: linear-gradient(to right, #ff4e50, #f9d423);
    /* Example gradient for error */
    -webkit-background-clip: text;
    /* Apply the gradient to the text only */
    -webkit-text-fill-color: transparent;
    /* Make the text transparent to show the gradient */
    font-weight: bold;
    font-size: 1.9rem;
}

.success-gradient {
    background: linear-gradient(to right, red, #150fc7);
    /* Example gradient for success */
    -webkit-background-clip: text;
    /* Apply the gradient to the text only */
    -webkit-text-fill-color: transparent;
    /* Make the text transparent to show the gradient */
    font-weight: bold;
    font-size: 1.9rem;
}


.input-error {
    border: 1px solid red;
}

.error-message {
    color: red;
    font-size: 0.85em;
    margin-top: 5px;
}


/* Custom Modal styles */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: var(--modal-overlay-bg);
    z-index: 9999;
    pointer-events: auto;
}

.custom-modal.show {
    display: flex;
    /* Show and center modal */
}

#errorModal .custom-modal-content {
    background: linear-gradient(135deg, #ff6a6a, #d93636);
    color: #fff;
    box-shadow: 0 8px 24px rgba(217, 54, 54, 0.4);
}

#successModal .custom-modal-content {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.35);
}

/* Common modal content */
.custom-modal-content {
    border-radius: 10px;
    max-width: 260px;
    /* reduced from 320px */
    width: 85%;
    /* takes less screen space */
    padding: 14px 16px;
    /* reduced padding */
    animation: slideUp 0.35s ease-out;
    pointer-events: auto;
    z-index: 10000;
}

/* Header Styling */
.custom-modal-header {
    background: transparent !important;
    /* Let gradient show */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-modal-title {
    font-size: 0.9rem;
    /* smaller text */
    font-weight: 600;
    letter-spacing: 0.4px;
    margin: 0;
}

/* Body */
.custom-modal-body {
    padding: 8px;
    font-size: 0.9rem;
    /* reduced font */
    text-align: center;
    color: white;
}

/* Footer */
/* Footer */
.custom-modal-footer {
    padding: 6px;
    text-align: center;
}

.custom-modal-footer button {
    border-radius: 6px;
    font-size: 0.75rem;
    /* smaller button text */
    padding: 4px 10px;
    /* smaller button */
    box-shadow: none;
}

/* Animation */
@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.hidden {
    display: none;
}

#countdown-timer {
    font-weight: bold;
    color: green;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/*#endregion CUSTOM MODAL Style for error messages */

/*MEDIA QUERY*/
/* Small devices (phones, up to 600px) */
/******GOOGLE STANDARD MEDIA QUERY RANGES******/ 
/* ✅ Small / short phones or landscape */


 

@media (max-width: 414px) and (min-height: 412px) {

    /*#region NAV*/

    /* Prevent horizontal overflow for entire page */
    html,
    body {
        overflow-x: hidden !important;
    }

    header {
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        /* space for logo/language */
        padding-bottom: 10px;
        top: 0;
        justify-content: center;
        /* center flex children */
    }

    nav {
        flex-direction: row;
        justify-content: center;
        /* center nav items */
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .nav-center {
        flex: none;
        /* reset flex-grow */
        display: flex;
        justify-content: center;
        /* center links */
        width: auto;
    }

    .nav-links {
        flex-direction: row;
        justify-content: center;
        /* ensure horizontal layout */
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .nav-links li a {
        color: whitesmoke;
        font-family: 'Nunito', sans-serif;
        text-decoration: none;
        font-size: 0.775rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    nav ul {
        display: flex;
        justify-content: center;
        /* horizontal centering */
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 0;
    }

    .get-started {
        display: none;
    }

    /*#endregion NAV*/

    /*#region FORM*/
    /* ✅ Success Badge (keep centered but smaller) */
    #responseMessagePsychology {
        position: fixed;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #4caf50;
        color: white;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, transform 0.4s ease-in-out;
        z-index: 50000;
    }

    #responseMessagePsychology.show {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    /* ✅ Modal Overlay */
    .modal-prof {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        background: rgba(5, 10, 15, 0.85) !important;
        overflow-y: auto !important;
        padding: 0 !important;
        z-index: 2000;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* ✅ Dialog wrapper */
    .modal-dialog {
        width: 96% !important;
        margin: 10px auto !important;
    }

    /* ✅ FORM CONTAINER (reduced blur + tighter padding) */
    .modal-content-prof {
        width: 100% !important;
        border-radius: 14px !important;
        padding: 0.9rem !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        max-height: 88vh !important;
        color: #f4f4f4;
    }

    /* ✅ HEADER */
    .modal-header1 {
        flex-direction: column;
        text-align: center;
        padding: 10px 8px !important;
        border-radius: 10px !important;
        background: rgba(31, 58, 82, 0.95);
        color: white;
        backdrop-filter: blur(8px);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    }

    .modal-title1 {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .modal-subtext {
        font-size: 0.75rem !important;
        line-height: 1.3;
        color: #dfe9f0;
        padding: 0 4px;
    }

    .close-btn0 {
        font-size: 1.4rem !important;
        top: 5px !important;
        right: 10px !important;
        color: #ff5555;
    }

    /* ✅ FORM FIELDS */
    form#psychologistForm {
        padding: 0.4rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .form-group {
        width: 100% !important;
    }

    input,
    select {
        font-size: 0.8rem !important;
        padding: 9px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #0e2033 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    input::placeholder {
        color: rgba(15, 34, 52, 0.6);
    }

    label {
        font-size: 0.75rem !important;
        color: #102437;
    }

    /* ✅ CHECKBOXES */
    .form-group label input[type="checkbox"] {
        transform: scale(1.1);
        margin-right: 5px;
    }

    .form-group div label {
        font-size: 0.7rem;
        color: #1f3a52;
    }

    /* ✅ BUTTON */
    .button-psyc {
        width: 90% !important;
        font-size: 0.85rem !important;
        margin-top: 0.8rem !important;
        padding: 10px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #1f3a52, #2f5978);
        color: white;
        border: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        transition: all 0.25s ease;
    }

    .button-psyc:hover {
        background: linear-gradient(135deg, #254e6d, #1f3a52);
        transform: scale(1.02);
    }

    /* ✅ SCROLLBAR */
    .modal-content-prof::-webkit-scrollbar {
        width: 3px;
    }

    .modal-content-prof::-webkit-scrollbar-thumb {
        background: rgba(31, 58, 82, 0.6);
        border-radius: 10px;
    }

    /*#endregion  FORM*/

    /*#region Main Professional Section */
    #professional {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 100vh !important;
        padding: 40px 20px !important;
        text-align: center !important;

        /* ✅ added from fix */
        overflow: visible !important;
        /* Don't clip modal */
        z-index: 1 !important;
    }

    #professional::before {
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Overlay & Header Text */
    .overlay {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px;
        /* ✅ from fix */
        pointer-events: none !important;
        /* Don't block card clicks */
    }

    .header-text {
        max-width: 100% !important;
        margin-top: 40px !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .header-text h2 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        margin-bottom: 10px;
    }

    .header-text p {
        font-size: 0.9rem !important;
        color: #eaeaea !important;
    }

    .cards-container {
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        pointer-events: auto !important;
        z-index: 50 !important;
    }

    .card {
        width: 85% !important;
        font-size: 0.9rem !important;
        padding: 15px 20px !important;
        z-index: 60 !important;
        transform: none;
        pointer-events: auto !important;
        /* ✅ clickable on mobile */
    }

    /* Professional Image + Floating Glass Boxes */
    .professional-image-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin-top: -90px !important;

        /* Give wrapper a fixed predictable height */
        min-height: 420px !important;
        /* matches your expected mobile image height */
        overflow: visible !important;
    }

    .professional-image {
        width: 100% !important;
        max-width: 350px !important;
        aspect-ratio: 3 / 4 !important;
        /* ✅ reserve height before load */
        object-fit: cover !important;
        /* avoid distortion */
        border-radius: 10px !important;
        margin: 0 auto !important;
        z-index: 2 !important;
        display: block !important;
    }

    /* Glass boxes positioned around image */
    .glass-box,
    .glass-box1,
    .glass-box-right {
        position: absolute !important;
        width: 120px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
        backdrop-filter: blur(10px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        font-size: 0.75rem !important;
    }

    /* Two on the left */
    .glass-box {
        top: -40px !important;
        left: 5% !important;
        height: 20% !important;
        width: 130px !important;
    }

    .glass-box1 {
        bottom: 0 !important;
        left: 5% !important;
        z-index: 500;
        height: 23% !important;
    }

    /* One on the right */
    .glass-box-right {
        top: 40% !important;
        right: -3% !important;
    }

    .caption {
        font-size: 0.75rem !important;
    }

    /* Tighter text scaling for sub-elements */
    .user-images img {
        width: 25px !important;
        height: 25px !important;
    }

    .user-count {
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }

    /* ✅ MODAL FIX SECTION */
    #psychologistModal {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        /* hidden by default */
        justify-content: center !important;
        align-items: center !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        overflow-y: auto !important;
    }

    #psychologistModal.show {
        display: flex !important;
    }

    .modal,
    .modal-backdrop {
        z-index: 99999 !important;
    }


    /*#endregion Professsional Background*/

    /*#endregion Professsional Background*/

    /*#region Login Form*/

    /*#endregion Form*/

    /*#region CONSULT*/
    .consult {
        min-height: auto !important;
        padding: 40px 15px !important;
        border-radius: 20px !important;
        margin-top: -10 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Text wrapper */
    .text-wrapper {
        position: static !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        align-items: center !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .text-side {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .serif {
        font-size: 2.5rem !important;
        margin: 5px 0 0 0 !important;
    }

    /* Container */
    .consult-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df) !important;
        box-sizing: border-box !important;
    }

    .consult-container .overlay {
        display: none !important;
        /* Overlay removed for clarity on small screens */
    }

    /* Image */
    .consult-container .image-box {
        position: static !important;
        width: 90% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
        border-radius: 15px !important;
        left: auto !important;
    }

    .consult-container .image-box img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
        transform: none !important;
    }

    /* Text box below image */
    .consult-container .text-box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background-color: #192e41 !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        padding: 15px 20px !important;
    }

    .text-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }

    /* Button */
    .button-consult {
        width: 80% !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        margin: 15px auto !important;
        left: 0 !important;
        top: 0 !important;
    }

    .button-consult .arrow-icon {
        font-size: 1.2rem !important;
    }

    /*#endregion CONSULT*/

    /*#region INFO SECTION*/


    #p-info {
        padding: 25px 15px !important;
        border-radius: 20px !important;
        margin-top: -10px !important;
    }

    /*===============================
  TOP TEXT SECTION
===============================*/
    .top-text h2 {
        font-size: 1.4rem !important;
    }

    .top-text p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO CONTAINER SECTION
===============================*/
    .info-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #1f3a52 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 15px !important;
    }

    /* Individual info sections centered */
    .info-section {
        width: 90% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 15px 10px !important;
    }

    .info-section:last-child {
        border-bottom: none !important;
    }

    .step-number {
        margin: 0 auto 10px auto !important;
    }

    .step-title,
    .step-desc {
        text-align: center !important;
    }

    .step-desc {
        color: #ddd !important;
    }

    /*===============================
  ONBOARDING BLOCK (STACKED)
===============================*/
    .onboarding-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-top: -110px !important;
        width: 100% !important;
    }

    /* Left & Right sides general layout */
    .onboarding-left,
    .onboarding-right {
        width: 100% !important;
        text-align: center !important;
    }

    /*-------------------------------
  LEFT SIDE (Text Section)
-------------------------------*/
    .onboarding-left h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .requirement-list li {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .button-onboard {
        width: 80% !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
    }

    .tooltip {
        margin-top: 8px !important;
    }

    /*-------------------------------
  RIGHT SIDE (Image + Text Section)
-------------------------------*/
    .onboarding-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Horizontal centering */
        justify-content: center !important;
        /* Vertical centering */
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        margin-top: -50px !important;
    }

    /* Container wrapping image + text */
    .onboarding-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Image wrapper */
    .onboarding-right .onboarding-image {
        width: 100% !important;
        height: 100% !important;
        /* or a fixed height like 400px if needed */
        overflow: hidden !important;
        /* hides overflow when image covers */
        border-radius: 10px !important;
    }

    /* Actual image */
    .onboarding-right .onboarding-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* key for "cover" behavior */
        object-position: center !important;
        /* centers image */
        border-radius: 10px !important;
    }

    /* Text below image */
    .onboarding-right .onboarding-text {
        text-align: center !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO ICON NOTE
===============================*/
    .info-icon {
        font-size: 0.8rem !important;
        width: 100% !important;
        margin: 10px auto 0 auto !important;
        text-align: center !important;
    }


    /*#endregion INFO*/

    /*#region BENEFIT*/

    /*#region Benefit wrapper stacked */
    .ben {
        padding: 20px 10px !important;
        min-height: 500px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* ⬅️ Vertically center section */
        align-items: center;
        /* ⬅️ Center content horizontally */
        margin-top: -200px !important;
    }

    .benefit-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100%;
    }

    .benefit-image {
        display: none !important;
    }

    .benefit-text {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 20px !important;
        width: 90% !important;
        padding: 15px 20px !important;
        text-align: center !important;
    }

    .benefit-text h3 {
        font-size: 20px !important;
    }

    .benefit-text ul li {
        font-size: 14px !important;
    }

    /* Ensure everything stacks neatly */
    .benefit-left {
        width: 100% !important;
        text-align: center !important;
    }

    .benefit-right {
        display: none;
    }

    /*#endregion BENEFIT*/
    
    /*#region WHO WE ARE*/  
    /* Overall section stacks vertically */
    .who-we-are-section {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
        margin-top: 0 !important;
        gap: 1.5rem !important;
    }

    /* Image adjusts for small screen */
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .who-we-are-image img {
        width: 90% !important;
        height: auto !important;
        border-radius: 25px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Content centers below image */
    .who-we-are-content {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
        margin-top: 20px !important;
    }

    .who-we-are-content h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 0 auto 1rem auto !important;
        text-align: center !important;
        color: white !important; /* ensure contrast */
        opacity: 1 !important;
        transform: none !important;
    }
     .who-we-are-content>p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        width: 90% !important;
        margin: 0 auto !important;
        text-align: center !important;
        color: white !important;
    }

    /* Cards stack vertically */
    .card-container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .card-box {
        width: 90% !important;
        height: auto !important;
        left: 0 !important;
        padding: 1rem !important;
    }

    .icon-container {
        position: static !important;
        margin: 0 auto 10px auto !important;
    }

    .card-box h3 {
        margin-top: 0.5rem !important;
        font-size: 1rem !important;
    }

    .card-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Read more button centers */
    .read-more-container {
        text-align: center !important;
        margin-top: 1rem !important;
    }

    .read-more-btn {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.8rem !important;
        height: auto !important;
    }

    /*#endregion WHO WE ARE*/

    /*#region FAQ*/

    #faq {
        width: 100%;
    }

    .faq-title {
        font-size: 0.95rem;
        width: 95%
    }

    .faq-question {
        font-size: 0.85rem;
    }

    .faq-answer {
        font-size: 0.85rem;
    }

    /*#endregion FAQ*/

    /*#region REVIEW*/
    /* Adjust section padding so it doesn’t touch screen edges */
    #t-review {
        padding: 30px 15px !important;
        border-radius: 20px;
    }

    /* Stack reviews vertically */
    .review-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Make each review card full width but with side padding */
    .review-card {
        width: 100% !important;
        max-width: 95% !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Center author info */
    .review-author {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Center the rating stars and text */
    .rating-stars {
        margin-left: 0 !important;
        text-align: center;
    }

    .review-text {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Adjust heading */
    .serif2 {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /*#endregion REVIEW*/

    /*#region FOOTER*/
    /* === Reset global containers === */
    .custom_footer_top {
        width: 100% !important;
        padding: 40px 20px !important;
        overflow-x: visible !important;
    }

    .custom_footer_top .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 45px !important;
        width: 100% !important;
    }

    /* === Fix column layout === */
    .col-lg-3,
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Contact Form === */
    .contact_widget form {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .contact_widget form input,
    .contact_widget form textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

    .contact_widget button,
    .contact-button {
        width: 100% !important;
        height: 50px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        background: #1f3a52 !important;
        color: #fff !important;
        border: none !important;
    }

    /* === Subfooter container === */
    .subfooter {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        padding: 50px 25px !important;
        margin: 0 auto !important;
        background-color: #1f3a52 !important;
        border-radius: 15px !important;
        gap: 40px !important;
    }

    .subfooter-left,
    .subfooter-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* === Left side text === */
    .about-subtext-f,
    .serif-f {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: #fff !important;
        margin: 5px 0 !important;
    }

    .privacy-statement {
        text-align: center !important;
        font-size: 0.9rem !important;
        color: #ddd !important;
        margin-top: 10px !important;
    }

    /* === Subscribe section === */
    .subscribe-container {
        width: 100% !important;
        max-width: 90% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        padding: 25px !important;
        border-radius: 12px !important;
    }

    .subscribe-container p {
        color: #fff !important;
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .subscribe-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .email-input {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .subf1-button {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background: #0f2a3e !important;
        color: #fff !important;
    }

    /* === Video Section === */
    .image-placeholder1 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }

    .image-placeholder1 video {
        width: 240px !important;
        height: 240px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    /* === Footer links stacked === */
    .f_widget {
        text-align: center !important;
        width: 100% !important;
    }

    .f_widget h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .f_widget .f_list {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* === Social icons === */
    .f_social_icon {
        justify-content: center !important;
        gap: 18px !important;
        margin-top: 20px !important;
    }

    .f_social_icon a {
        font-size: 24px !important;
    }

    /* === Copy text === */
    .copy,
    .copy1 {
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 0.98rem !important;
        color: #ccc !important;
    }

    #footer,
    .custom_footer_area,
    .custom_footer_top,
    .custom_footer_top .container,
    .custom_footer_top .row,
    .subfooter,
    .subfooter-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subscribe container — true centering */
    .subscribe-container {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 auto 25px auto !important;
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border-radius: 12px !important;
        padding: 25px !important;
    }

    /* Video section — center it cleanly */
    .image-placeholder1 {
        width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 video {
        width: 230px !important;
        height: 230px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    .subfooter-right {
        width: 100% !important;
        transform: none !important;
        margin-top: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .subscribe-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 25px auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }

    /* Ensure no hidden overflow from body or parent */
    html,
    body {
        overflow-x: hidden !important;
    }

    /*#endregion FOOTER*/



}

@media (max-width: 599px) and (max-height: 667px) {

    /*#region NAV*/

    /* Prevent horizontal overflow for entire page */
    html,
    body {
        overflow-x: hidden !important;
    }

    header {
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        /* space for logo/language */
        padding-bottom: 10px;
        top: 0;
        justify-content: center;
        /* center flex children */
    }

    nav {
        flex-direction: row;
        justify-content: center;
        /* center nav items */
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .nav-center {
        flex: none;
        /* reset flex-grow */
        display: flex;
        justify-content: center;
        /* center links */
        width: auto;
    }

    .nav-links {
        flex-direction: row;
        justify-content: center;
        /* ensure horizontal layout */
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .nav-links li a {
        color: whitesmoke;
        font-family: 'Nunito', sans-serif;
        text-decoration: none;
        font-size: 0.775rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    nav ul {
        display: flex;
        justify-content: center;
        /* horizontal centering */
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 0;
    }

    .get-started {
        display: none;
    }

    /*#endregion NAV*/

    /*#region FORM*/
    /* ✅ Success Badge (keep centered but smaller) */
    #responseMessagePsychology {
        position: fixed;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #4caf50;
        color: white;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, transform 0.4s ease-in-out;
        z-index: 50000;
    }

    #responseMessagePsychology.show {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    /* ✅ Modal Overlay */
    .modal-prof {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        background: rgba(5, 10, 15, 0.85) !important;
        overflow-y: auto !important;
        padding: 0 !important;
        z-index: 2000;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* ✅ Dialog wrapper */
    .modal-dialog {
        width: 96% !important;
        margin: 10px auto !important;
    }

    /* ✅ FORM CONTAINER (reduced blur + tighter padding) */
    .modal-content-prof {
        width: 100% !important;
        border-radius: 14px !important;
        padding: 0.9rem !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        max-height: 88vh !important;
        color: #f4f4f4;
    }

    /* ✅ HEADER */
    .modal-header1 {
        flex-direction: column;
        text-align: center;
        padding: 10px 8px !important;
        border-radius: 10px !important;
        background: rgba(31, 58, 82, 0.95);
        color: white;
        backdrop-filter: blur(8px);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    }

    .modal-title1 {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .modal-subtext {
        font-size: 0.75rem !important;
        line-height: 1.3;
        color: #dfe9f0;
        padding: 0 4px;
    }

    .close-btn0 {
        font-size: 1.4rem !important;
        top: 5px !important;
        right: 10px !important;
        color: #ff5555;
    }

    /* ✅ FORM FIELDS */
    form#psychologistForm {
        padding: 0.4rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .form-group {
        width: 100% !important;
    }

    input,
    select {
        font-size: 0.8rem !important;
        padding: 9px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #0e2033 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    input::placeholder {
        color: rgba(15, 34, 52, 0.6);
    }

    label {
        font-size: 0.75rem !important;
        color: #102437;
    }

    /* ✅ CHECKBOXES */
    .form-group label input[type="checkbox"] {
        transform: scale(1.1);
        margin-right: 5px;
    }

    .form-group div label {
        font-size: 0.7rem;
         color: white !important;
    }

    /* ✅ BUTTON */
    .button-psyc {
        width: 90% !important;
        font-size: 0.85rem !important;
        margin-top: 0.8rem !important;
        padding: 10px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #1f3a52, #2f5978);
        color: white;
        border: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        transition: all 0.25s ease;
    }

    .button-psyc:hover {
        background: linear-gradient(135deg, #254e6d, #1f3a52);
        transform: scale(1.02);
    }

    /* ✅ SCROLLBAR */
    .modal-content-prof::-webkit-scrollbar {
        width: 3px;
    }

    .modal-content-prof::-webkit-scrollbar-thumb {
        background: rgba(31, 58, 82, 0.6);
        border-radius: 10px;
    }

    /*#endregion  FORM*/

    /*#region Professional Background*/

    .ad-container {
        transform: translateY(-50%) !important;
        width: 115px !important;
        height: 120px !important;
        min-width: 130px !important;
        min-height: 130px !important;
    }

    .ad-content h3 {
        font-size: 0.675rem !important;
    }

    .ad-content p {
        font-size: 0.575rem !important;
    }

    /* Main Professional Section */
    #professional {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 100vh !important;
        padding: 40px 20px !important;
        text-align: center !important;

        /* ✅ added from fix */
        overflow: visible !important;
        /* Don't clip modal */
        z-index: 1 !important;
    }

    #professional::before {
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Overlay & Header Text */
    .overlay {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px;
        /* ✅ from fix */
        pointer-events: none !important;
        /* Don't block card clicks */
    }

    .header-text {
        max-width: 100% !important;
        margin-top: 40px !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .header-text h2 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        margin-bottom: 10px;
    }

    .header-text p {
        font-size: 0.9rem !important;
        color: #eaeaea !important;
    }

    .cards-container {
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        pointer-events: auto !important;
        z-index: 50 !important;
    }

    .card {
        width: 85% !important;
        font-size: 0.9rem !important;
        padding: 15px 20px !important;
        z-index: 60 !important;
        transform: none;
        pointer-events: auto !important;
        /* ✅ clickable on mobile */
    }

    /* Professional Image + Floating Glass Boxes */
    .professional-image-wrapper {
        position: relative !important;
        display: flex !important;
        /* ✅ restore flex layout */
        width: 100% !important;
        margin-top: -90px !important;

        /* Give wrapper a fixed predictable height */
        min-height: 420px !important;
        /* matches your expected mobile image height */
        overflow: visible !important;
        z-index: 1;
    }

    .professional-image {
        width: 100% !important;
        max-width: 350px !important;
        aspect-ratio: 3 / 4 !important;
        /* ✅ reserve height before load */
        object-fit: cover !important;
        /* avoid distortion */
        border-radius: 10px !important;
        margin: 0 auto !important;
        z-index: 2 !important;
        display: block !important;
    }

    /* Glass boxes positioned around image */
    .glass-box,
    .glass-box1,
    .glass-box-right {
        position: absolute !important;
        width: 120px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
        backdrop-filter: blur(10px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        font-size: 0.75rem !important;
    }

    /* Two on the left */
    .glass-box {
        top: -40px !important;
        left: 5% !important;
        height: 20% !important;
        width: 130px !important;
    }

    .glass-box1 {
        bottom: 0 !important;
        left: 5% !important;
        z-index: 500;
        height: 23% !important;
    }

    /* One on the right */
    .glass-box-right {
        top: 40% !important;
        right: -3% !important;
    }

    .caption {
        font-size: 0.75rem !important;
    }

    /* Tighter text scaling for sub-elements */
    .user-images img {
        width: 25px !important;
        height: 25px !important;
    }

    .user-count {
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }

    /* ✅ MODAL FIX SECTION */
    #psychologistModal {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        /* hidden by default */
        justify-content: center !important;
        align-items: center !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        overflow-y: auto !important;
    }

    #psychologistModal.show {
        display: flex !important;
    }

    .modal,
    .modal-backdrop {
        z-index: 99999 !important;
    }


    /*#endregion Professsional Background*/

    /*#region Login Form*/

    /*#endregion Form*/

    /*#region CONSULT*/
    .consult {
        min-height: auto !important;
        padding: 40px 15px !important;
        border-radius: 20px !important;
        margin-top: -10 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Text wrapper */
    .text-wrapper {
        position: static !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        align-items: center !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .text-side {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .serif {
        font-size: 2.5rem !important;
        margin: 5px 0 0 0 !important;
    }

    /* Container */
    .consult-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df) !important;
        box-sizing: border-box !important;
    }

    .consult-container .overlay {
        display: none !important;
        /* Overlay removed for clarity on small screens */
    }

    /* Image */
    .consult-container .image-box {
        position: static !important;
        width: 90% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
        border-radius: 15px !important;
        left: auto !important;
    }

    .consult-container .image-box img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
        transform: none !important;
    }

    /* Text box below image */
    .consult-container .text-box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background-color: #192e41 !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        padding: 15px 20px !important;
    }

    .text-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }

    /* Button */
    .button-consult {
        width: 80% !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        margin: 15px auto !important;
        left: 0 !important;
        top: 0 !important;
    }

    .button-consult .arrow-icon {
        font-size: 1.2rem !important;
    }

    /*#endregion CONSULT*/

    /*#region INFO SECTION*/


    #p-info {
        padding: 25px 15px !important;
        border-radius: 20px !important;
        margin-top: -10px !important;
    }

    /*===============================
  TOP TEXT SECTION
===============================*/
    .top-text h2 {
        font-size: 1.4rem !important;
    }

    .top-text p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO CONTAINER SECTION
===============================*/
    .info-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #1f3a52 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 15px !important;
    }

    /* Individual info sections centered */
    .info-section {
        width: 90% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 15px 10px !important;
    }

    .info-section:last-child {
        border-bottom: none !important;
    }

    .step-number {
        margin: 0 auto 10px auto !important;
    }

    .step-title,
    .step-desc {
        text-align: center !important;
    }

    .step-desc {
        color: #ddd !important;
    }

    /*===============================
  ONBOARDING BLOCK (STACKED)
===============================*/
    .onboarding-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-top: -110px !important;
        width: 100% !important;
    }

    /* Left & Right sides general layout */
    .onboarding-left,
    .onboarding-right {
        width: 100% !important;
        text-align: center !important;
    }

    /*-------------------------------
  LEFT SIDE (Text Section)
-------------------------------*/
    .onboarding-left h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .requirement-list li {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .button-onboard {
        width: 80% !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
    }

    .tooltip {
        margin-top: 8px !important;
    }

    /*-------------------------------
  RIGHT SIDE (Image + Text Section)
-------------------------------*/
    .onboarding-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Horizontal centering */
        justify-content: center !important;
        /* Vertical centering */
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        margin-top: -50px !important;
    }

    /* Container wrapping image + text */
    .onboarding-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Image wrapper */
    .onboarding-right .onboarding-image {
        width: 100% !important;
        height: 100% !important;
        /* or a fixed height like 400px if needed */
        overflow: hidden !important;
        /* hides overflow when image covers */
        border-radius: 10px !important;
    }

    /* Actual image */
    .onboarding-right .onboarding-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* key for "cover" behavior */
        object-position: center !important;
        /* centers image */
        border-radius: 10px !important;
    }

    /* Text below image */
    .onboarding-right .onboarding-text {
        text-align: center !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO ICON NOTE
===============================*/
    .info-icon {
        font-size: 0.8rem !important;
        width: 100% !important;
        margin: 10px auto 0 auto !important;
        text-align: center !important;
    }


    /*#endregion INFO*/

    /*#region BENEFIT*/

    /* Benefit wrapper stacked */
    .ben {
        padding: 20px 10px !important;
        min-height: 500px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* ⬅️ Vertically center section */
        align-items: center;
        /* ⬅️ Center content horizontally */
        margin-top: -200px !important;
    }

    .benefit-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100%;
    }

    .benefit-image {
        display: none !important;
    }

    .benefit-text {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 20px !important;
        width: 90% !important;
        padding: 15px 20px !important;
        text-align: center !important;
    }

    .benefit-text h3 {
        font-size: 20px !important;
    }

    .benefit-text ul li {
        font-size: 14px !important;
    }

    /* Ensure everything stacks neatly */
    .benefit-left {
        width: 100% !important;
        text-align: center !important;
    }

    .benefit-right {
        display: none;
    }

    /*#endregion BENEFIT*/

    /*#region WHO WE ARE*/
    /* Overall section stacks vertically */
    .who-we-are-section {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
        margin-top: 0 !important;
        gap: 1.5rem !important;
    }

    /* Image adjusts for small screen */
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .who-we-are-image img {
        width: 90% !important;
        height: auto !important;
        border-radius: 25px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Content centers below image */
    .who-we-are-content {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
        margin-top: 20px !important;
    }

    .who-we-are-content h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 0 auto 1rem auto !important;
        text-align: center !important;
        color: white !important; /* ensure contrast */
        opacity: 1 !important;
        transform: none !important;
    }
     .who-we-are-content>p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        width: 90% !important;
        margin: 0 auto !important;
        text-align: center !important;
        color: white !important;
    }

    /* Cards stack vertically */
    .card-container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .card-box {
        width: 90% !important;
        height: auto !important;
        left: 0 !important;
        padding: 1rem !important;
    }

    .icon-container {
        position: static !important;
        margin: 0 auto 10px auto !important;
    }

    .card-box h3 {
        margin-top: 0.5rem !important;
        font-size: 1rem !important;
    }

    .card-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Read more button centers */
    .read-more-container {
        text-align: center !important;
        margin-top: 1rem !important;
    }

    .read-more-btn {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.8rem !important;
        height: auto !important;
    }

    /*#endregion WHO WE ARE*/

    /*#region FAQ*/

    #faq {
        width: 90%;
    }

    .faq-title {
        font-size: 0.95rem;
        width: 95%
    }

    .faq-question {
        font-size: 0.85rem;
    }

    .faq-answer {
        font-size: 0.85rem;
    }

    /*#endregion FAQ*/

    /*#region REVIEW*/
    /* Adjust section padding so it doesn’t touch screen edges */
    #t-review {
        padding: 30px 15px !important;
        border-radius: 20px;
    }

    /* Stack reviews vertically */
    .review-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Make each review card full width but with side padding */
    .review-card {
        width: 100% !important;
        max-width: 95% !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Center author info */
    .review-author {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Center the rating stars and text */
    .rating-stars {
        margin-left: 0 !important;
        text-align: center;
    }

    .review-text {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Adjust heading */
    .serif2 {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /*#endregion REVIEW*/

    /*#region FOOTER*/
    /* === Reset global containers === */
    .custom_footer_top {
        width: 100% !important;
        padding: 40px 20px !important;
        overflow-x: visible !important;
    }

    .custom_footer_top .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 45px !important;
        width: 100% !important;
    }

    /* === Fix column layout === */
    .col-lg-3,
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Contact Form === */
    .contact_widget form {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .contact_widget form input,
    .contact_widget form textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

    .contact_widget button,
    .contact-button {
        width: 100% !important;
        height: 50px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        background: #1f3a52 !important;
        color: #fff !important;
        border: none !important;
    }

    /* === Subfooter container === */
    .subfooter {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        padding: 50px 25px !important;
        margin: 0 auto !important;
        background-color: #1f3a52 !important;
        border-radius: 15px !important;
        gap: 40px !important;
    }

    .subfooter-left,
    .subfooter-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* === Left side text === */
    .about-subtext-f,
    .serif-f {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: #fff !important;
        margin: 5px 0 !important;
    }

    .privacy-statement {
        text-align: center !important;
        font-size: 0.9rem !important;
        color: #ddd !important;
        margin-top: 10px !important;
    }

    /* === Subscribe section === */
    .subscribe-container {
        width: 100% !important;
        max-width: 90% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        padding: 25px !important;
        border-radius: 12px !important;
    }

    .subscribe-container p {
        color: #fff !important;
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .subscribe-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .email-input {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .subf1-button {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background: #0f2a3e !important;
        color: #fff !important;
    }

    /* === Video Section === */
    .image-placeholder1 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }

    .image-placeholder1 video {
        width: 240px !important;
        height: 240px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    /* === Footer links stacked === */
    .f_widget {
        text-align: center !important;
        width: 100% !important;
    }

    .f_widget h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .f_widget .f_list {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* === Social icons === */
    .f_social_icon {
        justify-content: center !important;
        gap: 18px !important;
        margin-top: 20px !important;
    }

    .f_social_icon a {
        font-size: 24px !important;
    }

    /* === Copy text === */
    .copy,
    .copy1 {
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 0.98rem !important;
        color: #ccc !important;
    }

    #footer,
    .custom_footer_area,
    .custom_footer_top,
    .custom_footer_top .container,
    .custom_footer_top .row,
    .subfooter,
    .subfooter-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subscribe container — true centering */
    .subscribe-container {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 auto 25px auto !important;
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border-radius: 12px !important;
        padding: 25px !important;
    }

    /* Video section — center it cleanly */
    .image-placeholder1 {
        width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 video {
        width: 230px !important;
        height: 230px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    .subfooter-right {
        width: 100% !important;
        transform: none !important;
        margin-top: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .subscribe-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 25px auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }

    /* Ensure no hidden overflow from body or parent */
    html,
    body {
        overflow-x: hidden !important;
    }

    /*#endregion FOOTER*/

}

@media (max-width: 599px) and (min-height: 668px) and (max-height: 812px) {


    /*#region NAV*/

    /* Prevent horizontal overflow for entire page */
    html,
    body {
        overflow-x: hidden !important;
    }

    header {
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        /* space for logo/language */
        padding-bottom: 10px;
        top: 0;
        justify-content: center;
        /* center flex children */
    }

    nav {
        flex-direction: row;
        justify-content: center;
        /* center nav items */
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .nav-center {
        flex: none;
        /* reset flex-grow */
        display: flex;
        justify-content: center;
        /* center links */
        width: auto;
    }

    .nav-links {
        flex-direction: row;
        justify-content: center;
        /* ensure horizontal layout */
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .nav-links li a {
        color: whitesmoke;
        font-family: 'Nunito', sans-serif;
        text-decoration: none;
        font-size: 0.775rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    nav ul {
        display: flex;
        justify-content: center;
        /* horizontal centering */
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 0;
    }

    .get-started {
        display: none;
    }

    /*#endregion NAV*/

  /*#region FORM*/
    /* ✅ Success Badge (keep centered but smaller) */
    #responseMessagePsychology {
        position: fixed;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #4caf50;
        color: white;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, transform 0.4s ease-in-out;
        z-index: 50000;
    }

    #responseMessagePsychology.show {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    /* ✅ Modal Overlay */
    .modal-prof {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        background: rgba(5, 10, 15, 0.85) !important;
        overflow-y: auto !important;
        padding: 0 !important;
        z-index: 2000;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* ✅ Dialog wrapper */
    .modal-dialog {
        width: 96% !important;
        margin: 10px auto !important;
    }

    /* ✅ FORM CONTAINER (reduced blur + tighter padding) */
    .modal-content-prof {
        width: 100% !important;
        border-radius: 14px !important;
        padding: 0.9rem !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        max-height: 88vh !important;
        color: #f4f4f4;
    }

    /* ✅ HEADER */
    .modal-header1 {
        flex-direction: column;
        text-align: center;
        padding: 10px 8px !important;
        border-radius: 10px !important;
        background: rgba(31, 58, 82, 0.95);
        color: white;
        backdrop-filter: blur(8px);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    }

    .modal-title1 {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
    }

    .modal-subtext {
        font-size: 0.75rem !important;
        line-height: 1.3;
        color: #dfe9f0;
        padding: 0 4px;
    }

    .close-btn0 {
        font-size: 1.4rem !important;
        top: 5px !important;
        right: 10px !important;
        color: #ff5555;
    }

    /* ✅ FORM FIELDS */
    form#psychologistForm {
        padding: 0.4rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .form-group {
        width: 100% !important;
    }

    input,
    select {
        font-size: 0.8rem !important;
        padding: 9px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #0e2033 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    input::placeholder {
        color: rgba(15, 34, 52, 0.6);
    }

    label {
        font-size: 0.75rem !important;
        color: #102437;
    }

    /* ✅ CHECKBOXES */
    .form-group label input[type="checkbox"] {
        transform: scale(1.1);
        margin-right: 5px;
    }

    .form-group div label {
        font-size: 0.7rem;
        color: white !important;
    }

    /* ✅ BUTTON */
    .button-psyc {
        width: 90% !important;
        font-size: 0.85rem !important;
        margin-top: 0.8rem !important;
        padding: 10px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #1f3a52, #2f5978);
        color: white;
        border: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        transition: all 0.25s ease;
    }

    .button-psyc:hover {
        background: linear-gradient(135deg, #254e6d, #1f3a52);
        transform: scale(1.02);
    }

    /* ✅ SCROLLBAR */
    .modal-content-prof::-webkit-scrollbar {
        width: 3px;
    }

    .modal-content-prof::-webkit-scrollbar-thumb {
        background: rgba(31, 58, 82, 0.6);
        border-radius: 10px;
    }

    /*#endregion  FORM*/

    /*#region Professional Background*/

    .ad-container {
        transform: translateY(-50%) !important;
        width: 115px !important;
        height: 120px !important;
        min-width: 130px !important;
        min-height: 130px !important;
    }

    .ad-content h3 {
        font-size: 0.675rem !important;
    }

    .ad-content p {
        font-size: 0.575rem !important;
    }

    /* Main Professional Section */
    #professional {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: auto !important;
        padding: 40px 20px !important;
        text-align: center !important;

        /* ✅ added from fix */
        overflow: visible !important;
        /* Don't clip modal */
        z-index: 1 !important;
    }

    #professional::before {
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Overlay & Header Text */
    .overlay {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px;
        /* ✅ from fix */
        pointer-events: none !important;
        /* Don't block card clicks */
    }

    .header-text {
        max-width: 100% !important;
        margin-top: 40px !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .header-text h2 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        margin-bottom: 10px;
    }

    .header-text p {
        font-size: 0.9rem !important;
        color: #eaeaea !important;
    }

    .cards-container {
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        pointer-events: auto !important;
        z-index: 50 !important;
    }

    .card {
        width: 80% !important;
        font-size: 0.9rem !important;
        padding: 15px 20px !important;
        z-index: 1060 !important;
        transform: none;
        pointer-events: auto !important;
        top: -20px;
        /* ✅ clickable on mobile */
    }

    /* Professional Image + Floating Glass Boxes */
    .professional-image-wrapper {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: -90px !important;
        width: 100% !important;
    }

    .professional-image {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
        z-index: 2 !important;
    }

    /* Glass boxes positioned around image */
    .glass-box,
    .glass-box1,
    .glass-box-right {
        position: absolute !important;
        width: 120px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
        backdrop-filter: blur(10px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        font-size: 0.75rem !important;
    }

    /* Two on the left */
    .glass-box {
        top: -40px !important;
        left: 5% !important;
        height: 20% !important;
        width: 130px !important;
    }

    .glass-box1 {
        bottom: 0 !important;
        left: 5% !important;
        z-index: 500;
        height: 23% !important;
    }

    /* One on the right */
    .glass-box-right {
        top: 40% !important;
        right: -3% !important;
    }

    .caption {
        font-size: 0.75rem !important;
    }

    /* Tighter text scaling for sub-elements */
    .user-images img {
        width: 25px !important;
        height: 25px !important;
    }

    .user-count {
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }

    /* ✅ MODAL FIX SECTION */
    #psychologistModal {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        /* hidden by default */
        justify-content: center !important;
        align-items: center !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        overflow-y: auto !important;
    }

    #psychologistModal.show {
        display: flex !important;
    }

    .modal,
    .modal-backdrop {
        z-index: 99999 !important;
    }


    /*#endregion Professsional Background*/

    /*#region Login Form*/

    /*#endregion Form*/

    /*#region CONSULT*/
    .consult {
        min-height: auto !important;
        padding: 40px 15px !important;
        border-radius: 20px !important;
        margin-top: -10 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Text wrapper */
    .text-wrapper {
        position: static !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        align-items: center !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .text-side {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .serif {
        font-size: 2.5rem !important;
        margin: 5px 0 0 0 !important;
    }

    /* Container */
    .consult-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df) !important;
        box-sizing: border-box !important;
    }

    .consult-container .overlay {
        display: none !important;
        /* Overlay removed for clarity on small screens */
    }

    /* Image */
    .consult-container .image-box {
        position: static !important;
        width: 90% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
        border-radius: 15px !important;
        left: auto !important;
    }

    .consult-container .image-box img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
        transform: none !important;
    }

    /* Text box below image */
    .consult-container .text-box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background-color: #192e41 !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        padding: 15px 20px !important;
    }

    .text-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }

    /* Button */
    .button-consult {
        width: 80% !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        margin: 15px auto !important;
        left: 0 !important;
        top: 0 !important;
    }

    .button-consult .arrow-icon {
        font-size: 1.2rem !important;
    }

    /*#endregion CONSULT*/

    /*#region INFO SECTION*/


    #p-info {
        padding: 25px 15px !important;
        border-radius: 20px !important;
        margin-top: -10px !important;
    }

    /*===============================
  TOP TEXT SECTION
===============================*/
    .top-text h2 {
        font-size: 1.4rem !important;
    }

    .top-text p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO CONTAINER SECTION
===============================*/
    .info-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #1f3a52 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 15px !important;
    }

    /* Individual info sections centered */
    .info-section {
        width: 90% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 15px 10px !important;
    }

    .info-section:last-child {
        border-bottom: none !important;
    }

    .step-number {
        margin: 0 auto 10px auto !important;
    }

    .step-title,
    .step-desc {
        text-align: center !important;
    }

    .step-desc {
        color: #ddd !important;
    }

    /*===============================
  ONBOARDING BLOCK (STACKED)
===============================*/
    .onboarding-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-top: -110px !important;
        width: 100% !important;
    }

    /* Left & Right sides general layout */
    .onboarding-left,
    .onboarding-right {
        width: 100% !important;
        text-align: center !important;
    }

    /*-------------------------------
  LEFT SIDE (Text Section)
-------------------------------*/
    .onboarding-left h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .requirement-list li {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .button-onboard {
        width: 80% !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
    }

    .tooltip {
        margin-top: 8px !important;
    }

    /*-------------------------------
  RIGHT SIDE (Image + Text Section)
-------------------------------*/
    .onboarding-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Horizontal centering */
        justify-content: center !important;
        /* Vertical centering */
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        margin-top: -50px !important;
    }

    /* Container wrapping image + text */
    .onboarding-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Image wrapper */
    .onboarding-right .onboarding-image {
        width: 100% !important;
        height: 100% !important;
        /* or a fixed height like 400px if needed */
        overflow: hidden !important;
        /* hides overflow when image covers */
        border-radius: 10px !important;
    }

    /* Actual image */
    .onboarding-right .onboarding-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* key for "cover" behavior */
        object-position: center !important;
        /* centers image */
        border-radius: 10px !important;
    }

    /* Text below image */
    .onboarding-right .onboarding-text {
        text-align: center !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO ICON NOTE
===============================*/
    .info-icon {
        font-size: 0.8rem !important;
        width: 100% !important;
        margin: 10px auto 0 auto !important;
        text-align: center !important;
    }


    /*#endregion INFO*/

    /*#region BENEFIT*/

    /* Benefit wrapper stacked */
    .ben {
        padding: 20px 10px !important;
        min-height: 500px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* ⬅️ Vertically center section */
        align-items: center;
        /* ⬅️ Center content horizontally */
        margin-top: -200px !important;
    }

    .benefit-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100%;
    }

    .benefit-image {
        display: none !important;
    }

    .benefit-text {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 20px !important;
        width: 90% !important;
        padding: 15px 20px !important;
        text-align: center !important;
    }

    .benefit-text h3 {
        font-size: 20px !important;
    }

    .benefit-text ul li {
        font-size: 14px !important;
    }

    /* Ensure everything stacks neatly */
    .benefit-left {
        width: 100% !important;
        text-align: center !important;
    }

    .benefit-right {
        display: none;
    }

    /*#endregion BENEFIT*/

   /*#region WHO WE ARE*/
    /* Overall section stacks vertically */
    .who-we-are-section {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
        margin-top: 0 !important;
        gap: 1.5rem !important;
    }

    /* Image adjusts for small screen */
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .who-we-are-image img {
        width: 90% !important;
        height: auto !important;
        border-radius: 25px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Content centers below image */
    .who-we-are-content {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
        margin-top: 20px !important;
    }

    .who-we-are-content h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 0 auto 1rem auto !important;
        text-align: center !important;
        color: white !important; /* ensure contrast */
        opacity: 1 !important;
        transform: none !important;
    }
     .who-we-are-content>p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        width: 90% !important;
        margin: 0 auto !important;
        text-align: center !important;
        color: white !important;
    }

    /* Cards stack vertically */
    .card-container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .card-box {
        width: 90% !important;
        height: auto !important;
        left: 0 !important;
        padding: 1rem !important;
    }

    .icon-container {
        position: static !important;
        margin: 0 auto 10px auto !important;
    }

    .card-box h3 {
        margin-top: 0.5rem !important;
        font-size: 1rem !important;
    }

    .card-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Read more button centers */
    .read-more-container {
        text-align: center !important;
        margin-top: 1rem !important;
    }

    .read-more-btn {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.8rem !important;
        height: auto !important;
    }

    /*#endregion WHO WE ARE*/

    /*#region FAQ*/

    #faq {
         width: 100%;
    }

    .faq-title {
        font-size: 0.95rem;
        width: 95%
    }

    .faq-question {
        font-size: 0.85rem;
    }

    .faq-answer {
        font-size: 0.85rem;
    }

    /*#endregion FAQ*/

    /*#region REVIEW*/
    /* Adjust section padding so it doesn’t touch screen edges */
    #t-review {
        padding: 30px 15px !important;
        border-radius: 20px;
    }

    /* Stack reviews vertically */
    .review-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Make each review card full width but with side padding */
    .review-card {
        width: 100% !important;
        max-width: 95% !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Center author info */
    .review-author {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Center the rating stars and text */
    .rating-stars {
        margin-left: 0 !important;
        text-align: center;
    }

    .review-text {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Adjust heading */
    .serif2 {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /*#endregion REVIEW*/

    /*#region FOOTER*/
    /* === Reset global containers === */
    .custom_footer_top {
        width: 100% !important;
        padding: 40px 20px !important;
        overflow-x: visible !important;
    }

    .custom_footer_top .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 45px !important;
        width: 100% !important;
    }

    /* === Fix column layout === */
    .col-lg-3,
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Contact Form === */
    .contact_widget form {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .contact_widget form input,
    .contact_widget form textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

     .contact_widget button,
  .contact-button {
    width: 70% !important;
    height: 50px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #70b800, #0481c1) !important;
    color: #fff !important;
    border: none !important;
  }

  #contactForm button {
 background: linear-gradient(135deg, #70b800, #0481c1) !important;
  color: #ffffff;
  padding: 0.5rem 1rem;

  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  border-radius: 25px;
  width: 95px !important;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
  box-sizing: border-box;
}

    /* === Subfooter container === */
    .subfooter {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        padding: 50px 25px !important;
        margin: 0 auto !important;
        background-color: #1f3a52 !important;
        border-radius: 15px !important;
        gap: 40px !important;
    }

    .subfooter-left,
    .subfooter-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* === Left side text === */
    .about-subtext-f,
    .serif-f {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: #fff !important;
        margin: 5px 0 !important;
    }

    .privacy-statement {
        text-align: center !important;
        font-size: 0.9rem !important;
        color: #ddd !important;
        margin-top: 10px !important;
    }

    /* === Subscribe section === */
    .subscribe-container {
        width: 100% !important;
        max-width: 90% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        padding: 25px !important;
        border-radius: 12px !important;
    }

    .subscribe-container p {
        color: #fff !important;
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .subscribe-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .email-input {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .subf1-button {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background: #0f2a3e !important;
        color: #fff !important;
    }

    /* === Video Section === */
    .image-placeholder1 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }

    .image-placeholder1 video {
        width: 240px !important;
        height: 240px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    /* === Footer links stacked === */
    .f_widget {
        text-align: center !important;
        width: 100% !important;
    }

    .f_widget h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .f_widget .f_list {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* === Social icons === */
    .f_social_icon {
        justify-content: center !important;
        gap: 18px !important;
        margin-top: 20px !important;
    }

    .f_social_icon a {
        font-size: 24px !important;
    }

    /* === Copy text === */
    .copy,
    .copy1 {
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 0.98rem !important;
        color: #ccc !important;
    }

    #footer,
    .custom_footer_area,
    .custom_footer_top,
    .custom_footer_top .container,
    .custom_footer_top .row,
    .subfooter,
    .subfooter-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subscribe container — true centering */
    .subscribe-container {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 auto 25px auto !important;
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border-radius: 12px !important;
        padding: 25px !important;
    }

    /* Video section — center it cleanly */
    .image-placeholder1 {
        width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 video {
        width: 230px !important;
        height: 230px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    .subfooter-right {
        width: 100% !important;
        transform: none !important;
        margin-top: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .subscribe-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 25px auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }

    /* Ensure no hidden overflow from body or parent */
    html,
    body {
        overflow-x: hidden !important;
    }

    /*#endregion FOOTER*/



}

@media (max-width: 599px) and (min-height: 933px) and (max-height: 1000px) {


    /*#region NAV*/

    /* Prevent horizontal overflow for entire page */
    html,
    body {
        overflow-x: hidden !important;
    }

    header {
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        /* space for logo/language */
        padding-bottom: 10px;
        top: 0;
        justify-content: center;
        /* center flex children */
    }

    nav {
        flex-direction: row;
        justify-content: center;
        /* center nav items */
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .nav-center {
        flex: none;
        /* reset flex-grow */
        display: flex;
        justify-content: center;
        /* center links */
        width: auto;
    }

    .nav-links {
        flex-direction: row;
        justify-content: center;
        /* ensure horizontal layout */
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .nav-links li a {
        color: whitesmoke;
        font-family: 'Nunito', sans-serif;
        text-decoration: none;
        font-size: 0.775rem;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    nav ul {
        display: flex;
        justify-content: center;
        /* horizontal centering */
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 0;
    }

    .get-started {
        display: none;
    }

    /*#endregion NAV*/

    /*#region FORM*/
    /* Ensure modal covers full width and height */
    /* Ensure modal covers full width and height */

    #responseMessagePsychology {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* true center */
        background-color: #4caf50;
        color: white;
        padding: 0.9375rem 1.25rem;
        font-size: 1.125rem;
        font-weight: bold;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, transform 0.4s ease-in-out;
        z-index: 50000;
        /* ensure above modal */
    }

    #responseMessagePsychology.show {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }

    
   


    /* Dialog container */
    .modal-dialog {
        width: 95% !important;
        max-width: none !important;
        margin: 20px auto !important;
    }

    /* 🌫️ GLASS EFFECT FORM CONTAINER */
       /* ✅ FORM CONTAINER (reduced blur + tighter padding) */
    .modal-content-prof {
        width: 100% !important;
        border-radius: 14px !important;
        padding: 0.9rem !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
        overflow-y: auto !important;
        max-height: 88vh !important;
        color: #f4f4f4;
    }

 

    /* HEADER (keep bold contrast on top) */
    .modal-header1 {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px !important;
        border-radius: 10px !important;
        background: rgba(31, 58, 82, 0.9);
        color: white;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    }

    .modal-title1 {
        font-size: 1.5rem !important;
        margin-bottom: 6px !important;
    }

    .modal-subtext {
        font-size: 0.85rem !important;
        line-height: 1.4;
        color: #e9f2f8;
        padding: 0 6px;
    }

    .close-btn0 {
        font-size: 1.6rem !important;
        top: 8px !important;
        right: 12px !important;
        color: #ff4444;
    }

    /* FORM FIELDS */
    form#psychologistForm {
        padding: 0.75rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .form-group {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Inputs float on glass */
    input,
    select {
        font-size: 0.85rem !important;
        padding: 12px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.35) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        color: #0f2234 !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    input::placeholder {
        color: rgba(15, 34, 52, 0.6);
    }

    label {
        font-size: 0.8rem !important;
        margin-bottom: 3px !important;
        color: #0a1b28;
    }

    /* CHECKBOXES */
    .form-group label input[type="checkbox"] {
        transform: scale(1.2);
        margin-right: 6px;
    }

    .form-group div label {
        display: inline-block;
        margin-right: 10px;
        font-size: 0.75rem;
        color: white !important;
    }

    /* SUBMIT BUTTON */
    .button-psyc {
        width: 85% !important;
        font-size: 0.95rem !important;
        margin-top: 1rem !important;
        padding: 12px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #1f3a52, #2f5978);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: all 0.3s ease;
    }

    .button-psyc:hover {
        background: linear-gradient(135deg, #254e6d, #1f3a52);
        transform: scale(1.02);
    }

    /* SCROLLBAR */
    .modal-content-prof::-webkit-scrollbar {
        width: 4px;
    }

    .modal-content-prof::-webkit-scrollbar-thumb {
        background: rgba(31, 58, 82, 0.6);
        border-radius: 10px;
    }

    /*#endregion FORM*/

    /*#region Professional Background*/

    .ad-container {
        transform: translateY(-50%) !important;
        width: 115px !important;
        height: 120px !important;
        min-width: 130px !important;
        min-height: 130px !important;
    }

    .ad-content h3 {
        font-size: 0.675rem !important;
    }

    .ad-content p {
        font-size: 0.575rem !important;
    }

    /* Main Professional Section */
    #professional {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100vh !important;
        padding: 40px 20px !important;
        text-align: center !important;

        /* Don't clip modal */
        z-index: 1 !important;
    }

    #professional::before {
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Overlay & Header Text */
    .overlay {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px;
        /* ✅ from fix */
        pointer-events: none !important;
        /* Don't block card clicks */
    }

    .header-text {
        max-width: 100% !important;
        margin-top: 85px !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .header-text h2 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        color: #fff !important;
        margin-bottom: 10px;
    }

    .header-text p {
        font-size: 0.9rem !important;
        color: #eaeaea !important;
        margin-top: 55px !important;
    }

    .cards-container {
        display: flex !important;
        justify-content: center !important;
        margin-top: 20px !important;
        pointer-events: auto !important;
        z-index: 50 !important;
    }

    .card {
        width: 85% !important;
        font-size: 0.9rem !important;
        padding: 15px 20px !important;
        z-index: 60 !important;
        transform: none;
        pointer-events: auto !important;
        top: 50px;
        /* ✅ clickable on mobile */
    }

    /* Professional Image + Floating Glass Boxes */
    .professional-image-wrapper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        /* hides the overflowed parts */
        display: flex !important;
        justify-content: center !important;
        /* centers horizontally */
        align-items: center !important;
    }

    .professional-image {
        width: 300% !important;

        height: 110vh !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 10px !important;
        position: relative !important;
        left: 50% !important;
        top: 50px !important;
        transform: translateX(-50%) !important;
        /* ✅ true centering trick */
        z-index: 2 !important;

    }

    /* Glass boxes positioned around image */
    .glass-box,
    .glass-box1,
    .glass-box-right {
        position: absolute !important;
        width: 130px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
        backdrop-filter: blur(10px) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        font-size: 0.75rem !important;
    }

    /* Two on the left */
    .glass-box {
        top: -40px !important;
        left: 18% !important;
        height: 20% !important;
        width: 130px !important;
    }

    .glass-box1 {
        bottom: 0 !important;
        left: 10% !important;
        z-index: 500;
        height: 23% !important;
        top: -170px !important;
    }

    /* One on the right */
    .glass-box-right {
        top: 40% !important;
        right: 5% !important;
    }

    .caption {
        font-size: 0.75rem !important;
    }

    /* Tighter text scaling for sub-elements */
    .user-images img {
        width: 25px !important;
        height: 25px !important;
    }

    .user-count {
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }

    /* ✅ MODAL FIX SECTION */
    #psychologistModal {
        position: fixed !important;
        inset: 0 !important;
        display: none !important;
        /* hidden by default */
        justify-content: center !important;
        align-items: center !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        overflow-y: auto !important;
    }

    #psychologistModal.show {
        display: flex !important;
    }


    .modal,
    .modal-backdrop {
        z-index: 99999 !important;
    }


    /*#endregion Professsional Background*/

    /*#region Login Form*/

    /*#endregion Form*/

    /*#region CONSULT*/
    .consult {
        min-height: auto !important;
        padding: 40px 15px !important;
        border-radius: 20px !important;
        margin-top: -10 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Text wrapper */
    .text-wrapper {
        position: static !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        align-items: center !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .text-side {
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .serif {
        font-size: 2.5rem !important;
        margin: 5px 0 0 0 !important;
    }

    /* Container */
    .consult-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df) !important;
        box-sizing: border-box !important;
    }

    .consult-container .overlay {
        display: none !important;
        /* Overlay removed for clarity on small screens */
    }

    /* Image */
    .consult-container .image-box {
        position: static !important;
        width: 90% !important;
        height: auto !important;
        margin: 0 auto 20px auto !important;
        border-radius: 15px !important;
        left: auto !important;
    }

    .consult-container .image-box img {
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
        transform: none !important;
    }

    /* Text box below image */
    .consult-container .text-box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background-color: #192e41 !important;
        margin: 0 auto !important;
        border-radius: 15px !important;
        padding: 15px 20px !important;
    }

    .text-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }

    /* Button */
    .button-consult {
        width: 80% !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        margin: 15px auto !important;
        left: 0 !important;
        top: 0 !important;
    }

    .button-consult .arrow-icon {
        font-size: 1.2rem !important;
    }

    /*#endregion CONSULT*/

    /*#region INFO SECTION*/


    #p-info {
        padding: 25px 15px !important;
        border-radius: 20px !important;
        margin-top: -10px !important;
    }

    /*===============================
  TOP TEXT SECTION
===============================*/
    .top-text h2 {
        font-size: 1.4rem !important;
    }

    .top-text p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO CONTAINER SECTION
===============================*/
    .info-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #1f3a52 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        padding: 15px !important;
    }

    /* Individual info sections centered */
    .info-section {
        width: 90% !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 15px 10px !important;
    }

    .info-section:last-child {
        border-bottom: none !important;
    }

    .step-number {
        margin: 0 auto 10px auto !important;
    }

    .step-title,
    .step-desc {
        text-align: center !important;
    }

    .step-desc {
        color: #ddd !important;
    }

    /*===============================
  ONBOARDING BLOCK (STACKED)
===============================*/
    .onboarding-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-top: -110px !important;
        width: 100% !important;
    }

    /* Left & Right sides general layout */
    .onboarding-left,
    .onboarding-right {
        width: 100% !important;
        text-align: center !important;
    }

    /*-------------------------------
  LEFT SIDE (Text Section)
-------------------------------*/
    .onboarding-left h3 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .requirement-list li {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .button-onboard {
        width: 80% !important;
        font-size: 0.9rem !important;
        margin-top: 15px !important;
    }

    .tooltip {
        margin-top: 8px !important;
    }

    /*-------------------------------
  RIGHT SIDE (Image + Text Section)
-------------------------------*/
    .onboarding-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* Horizontal centering */
        justify-content: center !important;
        /* Vertical centering */
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        margin-top: -50px !important;
    }

    /* Container wrapping image + text */
    .onboarding-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Image wrapper */
    .onboarding-right .onboarding-image {
        width: 100% !important;
        height: 100% !important;
        /* or a fixed height like 400px if needed */
        overflow: hidden !important;
        /* hides overflow when image covers */
        border-radius: 10px !important;
    }

    /* Actual image */
    .onboarding-right .onboarding-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* key for "cover" behavior */
        object-position: center !important;
        /* centers image */
        border-radius: 10px !important;
    }

    /* Text below image */
    .onboarding-right .onboarding-text {
        text-align: center !important;
        padding: 0 10px !important;
    }

    /*===============================
  INFO ICON NOTE
===============================*/
    .info-icon {
        font-size: 0.8rem !important;
        width: 100% !important;
        margin: 10px auto 0 auto !important;
        text-align: center !important;
    }


    /*#endregion INFO*/

    /*#region BENEFIT*/

    /* Benefit wrapper stacked */
    .ben {
        padding: 20px 10px !important;
        min-height: 500px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* ⬅️ Vertically center section */
        align-items: center;
        /* ⬅️ Center content horizontally */
        margin-top: -200px !important;
    }

    .benefit-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        width: 100%;
    }

    .benefit-image {
        display: none !important;
    }

    .benefit-text {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 20px !important;
        width: 90% !important;
        padding: 15px 20px !important;
        text-align: center !important;
    }

    .benefit-text h3 {
        font-size: 20px !important;
    }

    .benefit-text ul li {
        font-size: 14px !important;
    }

    /* Ensure everything stacks neatly */
    .benefit-left {
        width: 100% !important;
        text-align: center !important;
    }

    .benefit-right {
        display: none;
    }

    /*#endregion BENEFIT*/

    /*#region WHO WE ARE*/
    /* Overall section stacks vertically */
    .who-we-are-section {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
        margin-top: 0 !important;
        gap: 1.5rem !important;
    }

    /* Image adjusts for small screen */
    .who-we-are-image {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .who-we-are-image img {
        width: 90% !important;
        height: auto !important;
        border-radius: 25px !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Content centers below image */
    .who-we-are-content {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
        margin-top: 20px !important;
    }

   .who-we-are-content h2 {
  font-size: 22px !important;
  line-height: 1.4 !important;
  width: 90% !important;
  text-align: center !important;
  margin: 0 auto !important;            /* removes any offset */
  font-weight: 600 !important;
}

.who-we-are-content > p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  width: 90% !important;
  text-align: center !important;
  margin: 0 auto !important;

}
    /* Cards stack vertically */
    .card-container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .card-box {
        width: 90% !important;
        height: auto !important;
        left: 0 !important;
        padding: 1rem !important;
    }

    .icon-container {
        position: static !important;
        margin: 0 auto 10px auto !important;
    }

    .card-box h3 {
        margin-top: 0.5rem !important;
        font-size: 1rem !important;
    }

    .card-box p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Read more button centers */
    .read-more-container {
        text-align: center !important;
        margin-top: 1rem !important;
    }

    .read-more-btn {
        font-size: 0.9rem !important;
        padding: 0.6rem 1.8rem !important;
        height: auto !important;
    }

    /*#endregion WHO WE ARE*/

    /*#region FAQ*/

    #faq {
         width: 100%;
    }

    .faq-title {
        font-size: 0.95rem;
        width: 95%
    }

    .faq-question {
        font-size: 0.85rem;
    }

    .faq-answer {
        font-size: 0.85rem;
    }

    /*#endregion FAQ*/

    /*#region REVIEW*/
    /* Adjust section padding so it doesn’t touch screen edges */
    #t-review {
        padding: 30px 15px !important;
        border-radius: 20px;
    }

    /* Stack reviews vertically */
    .review-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Make each review card full width but with side padding */
    .review-card {
        width: 100% !important;
        max-width: 95% !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
        text-align: center;
    }

    /* Center author info */
    .review-author {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Center the rating stars and text */
    .rating-stars {
        margin-left: 0 !important;
        text-align: center;
    }

    .review-text {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Adjust heading */
    .serif2 {
        font-size: 2rem !important;
        margin-left: 0 !important;
        text-align: center !important;
    }

    /*#endregion REVIEW*/

    /*#region FOOTER*/
    /* === Reset global containers === */
    .custom_footer_top {
        width: 100% !important;
        padding: 40px 20px !important;
        overflow-x: visible !important;
    }

    .custom_footer_top .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 45px !important;
        width: 100% !important;
    }

    /* === Fix column layout === */
    .col-lg-3,
    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Contact Form === */
    .contact_widget form {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .contact_widget form input,
    .contact_widget form textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

    .contact_widget button,
    .contact-button {
        width: 100% !important;
        height: 50px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        background: #1f3a52 !important;
        color: #fff !important;
        border: none !important;
    }

    /* === Subfooter container === */
    .subfooter {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        padding: 50px 25px !important;
        margin: 0 auto !important;
        background-color: #1f3a52 !important;
        border-radius: 15px !important;
        gap: 40px !important;
    }

    .subfooter-left,
    .subfooter-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* === Left side text === */
    .about-subtext-f,
    .serif-f {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: #fff !important;
        margin: 5px 0 !important;
    }

    .privacy-statement {
        text-align: center !important;
        font-size: 0.9rem !important;
        color: #ddd !important;
        margin-top: 10px !important;
    }

    /* === Subscribe section === */
    .subscribe-container {
        width: 100% !important;
        max-width: 90% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        padding: 25px !important;
        border-radius: 12px !important;
    }

    .subscribe-container p {
        color: #fff !important;
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .subscribe-form {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .email-input {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .subf1-button {
        width: 95% !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background: #0f2a3e !important;
        color: #fff !important;
    }

    /* === Video Section === */
    .image-placeholder1 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 25px !important;
    }

    .image-placeholder1 video {
        width: 240px !important;
        height: 240px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    /* === Footer links stacked === */
    .f_widget {
        text-align: center !important;
        width: 100% !important;
    }

    .f_widget h3 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .f_widget .f_list {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* === Social icons === */
    .f_social_icon {
        justify-content: center !important;
        gap: 18px !important;
        margin-top: 20px !important;
    }

    .f_social_icon a {
        font-size: 24px !important;
    }

    /* === Copy text === */
    .copy,
    .copy1 {
        text-align: center !important;
        margin-top: 10px !important;
        font-size: 0.98rem !important;
        color: #ccc !important;
    }

    #footer,
    .custom_footer_area,
    .custom_footer_top,
    .custom_footer_top .container,
    .custom_footer_top .row,
    .subfooter,
    .subfooter-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow-x: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subscribe container — true centering */
    .subscribe-container {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin: 0 auto 25px auto !important;
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border-radius: 12px !important;
        padding: 25px !important;
    }

    /* Video section — center it cleanly */
    .image-placeholder1 {
        width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 video {
        width: 230px !important;
        height: 230px !important;
        border-radius: 12% !important;
        object-fit: cover !important;
    }

    .subfooter-right {
        width: 100% !important;
        transform: none !important;
        margin-top: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .subscribe-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 25px auto !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    .image-placeholder1 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }

    /* Ensure no hidden overflow from body or parent */
    html,
    body {
        overflow-x: hidden !important;
    }

    /*#endregion FOOTER*/



}

@media (max-width: 767px) and (min-width: 600px)and (max-height: 568px) {}