/* ================= ROOT COLORS ================= */
:root {
    --e-global-color-very-pale-orange: #f2f9ff;
    --e-global-color-accent: #1c6b96;
    --e-global-color-secondary: #1c6b96;
    --e-global-color-white: #ffffff;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* ================= HEADER ================= */

header {
    position: relative;
    width: 100%;
    height: 85px;
    background-color: #80bffc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #6ea0cc;
    z-index: 1000;
}

/* enroll */

/* ================= ENROLL PAGE ================= */

.enroll-section {
    background: linear-gradient(135deg, #d9ecfe, #d9ecfe);
    padding: 100px 0;
}

.enroll-container {
    max-width: 950px;
    margin: auto;
    background: #d9ecfe;
    padding: 60px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.enroll-container h2 {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    color: #1c6b96;
}

.enroll-container h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #1c6b96;
    border-bottom: 2px solid #1c6b96;
    padding-bottom: 8px;
}

/* ================= FORM ELEMENTS ================= */

form input,
form select,
form textarea {
    width: 100%;
    padding: 15px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin-bottom: 20px;
    outline: none;
    transition: 0.3s ease;
    background: #ffffff;
}

form textarea {
    border-radius: 20px;
    resize: none;
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: #1c6b96;
    box-shadow: 0 0 0 3px rgba(28,107,150,0.15);
}

/* ================= QUESTION BLOCK ================= */

form label {
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
    color: #333;
}

form input[type="radio"] {
    width: auto;
    margin-right: 8px;
    margin-left: 10px;
}

/* ================= BUTTON ================= */

.enroll-btn {
    background: #1c6b96;
    color: #fff;
    padding: 18px 45px;
    border-radius: 30px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s ease;
    display: block;
    margin: 30px auto 0;
    cursor: pointer;
}

.enroll-btn:hover {
    background: #ffffff;
    color: #1c6b96;
    border: 1px solid #1c6b96;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
    .enroll-container {
        padding: 30px;
    }
}

.logo img {
    height: 80px;
}

/* ================= EMOTIONAL INTELLIGENCE PAGE ================= */

body {
    background: linear-gradient(135deg, #d9ecfe, #f4f9ff);
    font-family: Arial, sans-serif;
    padding:  0;
}

h2 {
    text-align: center;
    color: #1c6b96;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Form Container Look */
form {
    max-width: 900px;
    margin: auto;
    background: #ffffff;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Question Text */
form p {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1c6b96;
}

/* Dropdown Styling */
form select {
    width: 100%;
    padding: 14px 18px;
    border-radius: 30px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin-bottom: 25px;
    outline: none;
    transition: 0.3s ease;
}

form select:focus {
    border-color: #1c6b96;
    box-shadow: 0 0 0 3px rgba(28,107,150,0.1);
}

/* Button Styling */
form button {
    background: #1c6b96;
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    display: block;
    margin: 30px auto 0;
}

form button:hover {
    background: #ffffff;
    color: #1c6b96;
    border: 1px solid #1c6b96;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    form {
        padding: 30px;
    }
}


/* NAVBAR */

nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s ease;
}

nav ul li a:hover {
    color: #1c6b96;
}

.admission-btn {
    text-decoration: none;
    background-color: #1c6b96;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    margin: 10px;
    transition: 0.3s ease;
}

.admission-btn:hover {
    background-color: #c9184a;
}
.menu-toggle {
    display: none;
    font-size: 26px;
    cursor: pointer;
}

/* ================= MOBILE HEADER ================= */
@media (max-width: 992px) {

    header {
        padding: 15px 20px;
        flex-direction: column;
        height: auto;
        align-items: flex-start;
    }

    nav {
        width: 100%;
        margin-top: 15px;
        flex-direction: column;
        gap: 15px;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        display: block;
        width: 100%;
        padding: 8px 0;
    }

    .primary_btn {
        align-self: flex-start;
    }
}

/* ================= BANNER ================= */

/* Choose */

.banner-con {
    padding: 138px 0 142px;
}
.banner-con::before {
    content: "";
    width: 27%;
    height: 120%;
    right: 0;
    top: 0;
    position: absolute;
    background-color: var(--e-global-color-accent);
    background-image: url(../images/side-backgroundimage.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* FIX CONTAINER WIDTH */
.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;
}

/* MAKE ROW FLEX (IMPORTANT FIX) */
.banner-con .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LEFT + RIGHT COLUMN */
.banner-con .col-lg-7,
.banner-con .col-lg-5 {
    flex: 1;
}

/* ================= DECORATION IMAGES ================= */

.banner-leftflower {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 1;
}

.banner-leftflower img {
    opacity: 0.12;
}

.banner-rightflower {
    position: absolute;
    right: 35%;
    bottom: -20px;
    z-index: 1;
}

.banner-rightflower img {
    opacity: 0.15;
}

/* ================= TEXT CONTENT ================= */

.banner_content h6 {
    margin-bottom: 15px;
    color: var(--e-global-color-accent);
    font-weight: 600;
}
.banner_content h4 {
    margin-bottom: 15px;
    color: var(--e-global-color-accent);
    font-weight: 600;
}
.banner_content h1 {
    margin-bottom: 20px;
    font-size: 42px;
    line-height: 1.2;
}

.banner_content .text {
    margin-bottom: 35px;
    padding-right: 100px;
    font-size: 16px;
    color: #555;
}

.banner_content .primary_btn {
    display: inline-block;
    padding: 18px 45px;
    background: var(--e-global-color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    margin-bottom: 50px;
    transition: 0.3s ease;
}

.banner_content .primary_btn:hover {
    background: var(--e-global-color-secondary);
}

/* ================= SOCIAL ICONS ================= */

.banner_content .icons {
    display: flex;
    align-items: center;
}

.banner_content ul li {
    margin: 0 7px;
    display: inline-block;
}

.banner_content ul li i {
    font-size: 14px;
    width: 32px;
    height: 32px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    color: var(--e-global-color-accent);
    border: 1px solid var(--e-global-color-accent);
    transition: 0.4s ease;
}

.banner_content ul li i:hover {
    color: #fff;
    background-color: var(--e-global-color-accent);
}

.banner_content .icons span {
    font-size: 13px;
    font-weight: 500;
    padding-left: 120px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    color: var(--e-global-color-accent);
}

.banner_content .icons span::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 1px;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(142, 68, 173, 0.4);
}

/* ================= RIGHT IMAGE ================= */

.banner_wrapper {
    position: relative;
    text-align: right;
}

.banner_wrapper .banner-image {
    position: relative;
}

.banner_wrapper .banner-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    border: 10px solid var(--e-global-color-white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.banner_wrapper .banner-flower {
    position: absolute;
    left: -40px;
    top: -52px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {

    .banner-con .row {
        flex-direction: column;
        text-align: center;
    }

    .banner_content .text {
        padding-right: 0;
    }

    .banner_wrapper {
        text-align: center;
        margin-top: 40px;
    }

    .banner-con::before {
        display: none;
    }
}
/* ================= BANNER LAYOUT ================= */

.banner-con {
    padding: 160px 80px 100px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
}

.banner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* LEFT SIDE */

.banner-left {
    flex: 1;
}

.banner-left h6 {
    color: #1c6b96;
    font-weight: 600;
    margin-bottom: 15px;
}

.banner-left h1 {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.banner-left p {
    font-size: 17px;
    color: #555;
    margin-bottom: 30px;
    max-width: 500px;
}

.primary_btn {
    display: inline-block;
    padding: 14px 30px;
    background: #1c6b96 ;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.3s;
}

.primary_btn:hover {
    background: #11415e;
    transform: translateY(-3px);
}

.primaryy_btn {
    display: inline-block;
    padding: 14px 30px;
    background: #1c6b96 ;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.3s;
}

.primaryy_btn:hover {
    background: #11415e;
    transform: translateY(-3px);
}


/* SOCIAL ICONS */

.icons {
    margin-top: 30px;
}

.icons a {
    margin-right: 12px;
    font-size: 16px;
    color: #1c6b96;
    border: 1px solid #1c6b96;
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.icons a:hover {
    background: #1c6b96;
    color: #fff;
}

/* RIGHT SIDE IMAGE */

.banner-right {
    flex: 1;
    text-align: center;
}

.banner-right img {
    width: 100%;
    max-width: 480px;
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

@media (max-width: 992px) {

    .banner-con {
        padding: 80px 20px;
    }

    .banner-con .row {
        flex-direction: column;
        text-align: center;
    }

    .col-left,
    .col-right {
        width: 100%;
    }

    .banner_content .text {
        padding-right: 0;
    }

    .banner_wrapper {
        margin-top: 40px;
        text-align: center;
    }

    .banner-leftflower,
    .banner-rightflower {
        display: none;
    }
}
/* ================= MOBILE RESPONSIVE FIXES ================= */

@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .banner-con {
        padding: 60px 20px; /* Much smaller padding for mobile */
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .banner-con .row {
        flex-direction: column !important;
        gap: 30px;
    }

    /* 3. Reset Column Widths */
    .banner-con .col-left, 
    .banner-con .col-right,
    .banner-con .col-lg-7, 
    .banner-con .col-lg-5 {
        width: 100%;
        flex: none;
    }

    /* 4. Fix Text Content */
    .banner_content h2 {
        font-size: 30px !important; /* Scale down large headings */
        text-align: center !important;
    }

    .banner_content .text {
        padding-right: 0 !important; /* Remove the 100px gap */
        margin-bottom: 25px;
    }

    /* 5. Center and Stack Buttons */
    .banner_content .primary_btn {
        display: block; /* Stack buttons on top of each other */
        margin: 0 auto 15px !important;
        width: fit-content;
        padding: 15px 35px;
    }

    /* 6. Adjust Decorative Flowers */
    .banner-leftflower, 
    .banner-rightflower {
        display: none; /* Flowers usually clutter mobile screens */
    }

    /* 7. Adjust Image Size */
    .banner_wrapper {
        text-align: center;
    }

    .banner_wrapper .banner-image img {
        max-width: 100%; /* Ensure image doesn't bleed off screen */
        border-width: 5px; /* Thinner border for smaller screens */
    }

    /* 8. Handle the background pseudo-element */
    .banner-con::before {
        display: none; /* Hides the side-background image on mobile */
    }
}

/* Specific fix for very small phones (iPhone SE, etc) */
@media (max-width: 480px) {
    .banner_content h2 {
        font-size: 26px !important;
    }
}
/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    /* Adjust the main banner padding so content isn't squeezed */
    .banner-con {
        padding: 50px 15px !important; 
    }

    /* Force the text to center and remove the large right-side gap */
    .banner_content .text, 
    .banner-left p {
        padding-right: 0 !important;
        margin: 0 auto 20px;
        font-size: 15px;
        max-width: 100%;
    }

    /* Scale down the heading size so it doesn't overflow */
    .banner_content h1, 
    .banner-left h1 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    /* Stack buttons vertically if they are too wide */
    .primary_btn, .primaryy_btn {
        display: block;
        width: 100%;
        max-width: 250px;
        margin: 0 auto 15px !important;
        padding: 12px 20px;
    }

    /* Fix image sizing for small screens */
    .banner-right img, 
    .banner_wrapper .banner-image img {
        max-width: 100%;
        height: auto;
    }

    /* Hide absolute positioned flowers that might overlap text */
    .banner-leftflower, 
    .banner-rightflower, 
    .banner-flower {
        display: none !important;
    }
}
/* ================= ABOUT (BANNER STYLE) ================= */

.about-con {
    position: relative;
    padding: 160px 80px 120px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    overflow: hidden;
}
.about-con {
    padding: 138px 0 142px;
}
.about-con::before {
    content: "";
    width: 0%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: var(--e-global-color-accent);
    background-image: url(../images/side-backgroundimage.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}


.about-con .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about_wrapper {
    position: relative;
    text-align: center;
}

.about_wrapper .about-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    border: 10px solid var(--e-global-color-white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.about_wrapper .about-flower {
    position: absolute;
    left: -40px;
    top: -40px;
}

.about_content {
    padding-left: 60px;
}

.about_content h6 {
    color: var(--e-global-color-accent);
    margin-bottom: 15px;
}


.about_content h3 {
    color: var(--e-global-color-accent);
    margin-bottom: 15px;
}

.about_content h2 {
    font-size: 42px;
    margin-bottom: 20px;
}

.about_content .text,
.about_content .text1 {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.about_content ul {
    display: flex;
    gap: 40px;
    margin-bottom: 35px;
}

.about_content ul li {
    text-align: left;
}

.about_content .value span {
    font-size: 30px;
    font-weight: 800;
}

.about_content .number {
    color: var(--e-global-color-secondary);
}

.about_content .expression {
    color: var(--e-global-color-accent);
}

.about_content a {
    padding: 18px 45px;
}

@media (max-width: 992px) {

    .about-con {
        padding: 80px 20px;
    }

    .about-con .row {
        flex-direction: column;
        text-align: center;
    }

    .about_content {
        padding-left: 0;
        margin-top: 40px;
    }

    .about_content ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .about_wrapper {
        margin-bottom: 30px;
    }

    .about-con::before {
        display: none;
    }
}
@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .about-con {
        padding: 60px 20px !important;
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .about-con .row {
        flex-direction: column !important;
        gap: 30px;
    }

    /* 3. Reset Column Widths & Padding */
    .about_content {
        padding-left: 0 !important;
        width: 100%;
    }

    /* 4. Fix Text Content */
    .about_content h3 {
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .about_content h2 {
        font-size: 30px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* CHANGED: Text justified for mobile view */
    .about_content .text,
    .about_content .text1 {
        text-align: justify !important; 
        text-justify: inter-word;
        padding-right: 0 !important;
        margin-bottom: 20px;
    }

    /* 5. Center Lists and Elements */
    .about_content ul {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 20px;
        padding-left: 0;
    }

    /* 6. Adjust Decorative Flowers */
    .about_wrapper .about-flower,
    .service-flower {
        display: none !important;
    }

    /* 7. Adjust Image Size */
    .about_wrapper .about-image img {
        max-width: 100%;
        border-width: 5px !important;
    }

    /* 8. Handle the background pseudo-element */
    .about-con::before {
        display: none !important;
    }
}

/* Specific fix for very small phones (iPhone SE, etc) */
@media (max-width: 480px) {
    .about_content h2 {
        font-size: 26px !important;
    }
}

/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    /* Adjust the main banner padding */
    .about-con {
        padding: 50px 15px !important;
    }

    /* Force the justified text and font size */
    .about_content .text,
    .about_content .text1 {
        margin: 0 auto 20px;
        font-size: 15px;
        max-width: 100%;
        text-align: justify !important;
    }

    /* Scale down the heading size */
    .about_content h2 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    /* Stack buttons/links vertically */
    .about_content a.primary_btn {
        display: block !important;
        width: 100%;
        max-width: 280px;
        margin: 0 auto !important;
        padding: 15px 20px !important;
        text-align: center;
        line-height: 1.2;
    }
}
/* Choose */

.choose-con {
    padding: 138px 0 142px;
}
.choose-con::before {
    content: "";
    width: 0%;
    height: 100%;
    right: 0;
    top: 0;
    position: absolute;
    background-color: var(--e-global-color-accent);
    background-image: url(../images/side-backgroundimage.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* Remove bullets */
ul.list-unstyled {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul.list-unstyled li {
    list-style-type: none !important;
}


/* ================= CHOOSE (REVERSE BANNER STYLE) ================= */

.choose-con {
    position: relative;
    padding: 160px 80px 120px;
    background: linear-gradient(135deg, #d9ecfe, #f2f9ff);
    overflow: hidden;
}

.choose-con .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CONTENT LEFT */
.choose_content {
    padding-right: 60px;
}

.choose_content h6 {
    color: var(--e-global-color-accent);
    margin-bottom: 45px;
}

.choose_content h2 {
    font-size: 42px;
    margin-bottom: 40px;
}

.choose_content .text {
    color: #555;
    margin-bottom: 25px;
}

/* LIST STYLE */
.choose_content ul {
    margin-bottom: 30px;
}

.choose_content ul li {
    position: relative;
    margin-bottom: 12px;
}

.choose_content ul li i {
    font-size: 10px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 0;
    text-align: center;
    color: var(--e-global-color-accent);
    border: 1px solid var(--e-global-color-accent);
}

.choose_content ul li p {
    padding-left: 30px;
    color: var(--e-global-color-secondary);
}

/* IMAGE RIGHT */
.choose_wrapper {
    position: relative;
    text-align: center;
}

.choose_wrapper .choose-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    border: 10px solid var(--e-global-color-white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    opacity: 1;
}.propertise ul {
    list-style: none !important;
    padding-left: 0;
    margin-left: 0;
}

.propertise ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Section Padding */
.choose-con {
    padding: 80px 0;   /* top-bottom spacing */
}

/* Small heading color */
.choose-con h3 {
    color: #1c6b96;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Main heading spacing */
.choose-con h2 {
    margin-bottom: 20px;
}

/* Paragraph spacing */
.choose-con .text {
    margin-bottom: 25px;
}

/* Remove default bullets completely */
.propertise ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* List item spacing */
.propertise ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;   /* gap between points */
}

/* Icon styling */
.propertise ul li i {
    color: #1c6b96;
    font-size: 16px;
}



/* Button spacing */
.primary_btn {
    margin-top: 20px;
    display: inline-block;
}


@media (max-width: 992px) {

    .choose-con {
        padding: 80px 20px;
    }

    .choose-con .row {
        flex-direction: column;
        text-align: center;
    }

    .choose_content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .choose_content ul li {
        text-align: left;
    }

    .choose-con::before {
        display: none;
    }
}
/*  footer */

.footer-con {
    background: #334c65;
    color: #ffffff;
    padding: 80px 0 0;
    font-family: "Manrope", sans-serif;
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* Fix Contact Section Layout Without Bootstrap */

.contact-con .row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.contact-con .col-lg-6 {
    flex: 1 1 48%;
}

/* Make responsive */
@media (max-width: 992px) {
    .contact-con .col-lg-6 {
        flex: 1 1 100%;
    }
}
@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .choose-con {
        padding: 60px 25px !important; /* Increased side padding for better text wrap */
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .choose-con .row {
        flex-direction: column !important;
        gap: 30px;
    }

    /* 3. Reset Column Widths & Alignment */
    .online-list {
        padding-right: 0 !important;
        width: 100%;
        text-align: center !important;
    }

    /* 4. Fix Heading Alignment */
    .online-list h3 {
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .online-list h2 {
        font-size: 30px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        line-height: 1.2;
    }

    /* 5. Properly Align the List Paragraphs */
    .online-list .text {
        text-align: center !important;
        margin-bottom: 25px;
    }

    .propertise ul {
        display: inline-block; /* Allows the list to be centered as a block */
        text-align: left; /* Keeps the text inside aligned to the left */
        padding-left: 0;
    }

    .propertise ul li {
        justify-content: center !important; /* Centers the flex container */
        margin-bottom: 15px !important;
    }

    .propertise ul li p {
        text-align: center !important; /* Centers the actual text lines */
        font-size: 16px;
        width: 100%;
    }

    /* 6. Adjust Image Size and Video Icon */
    .choose_wrapper .choose-image img {
        max-width: 100%;
        border-radius: 20px;
    }

    .choose_wrapper .icon {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Specific fix for very small phones */
@media (max-width: 480px) {
    .online-list h2 {
        font-size: 26px !important;
    }
}

/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    .choose-con {
        padding: 50px 20px !important;
    }

    .online-list h2 {
        font-size: 28px !important;
    }

    /* Force button to be centered */
    .online-list .primary_btn {
        display: block !important;
        width: 100%;
        max-width: 260px;
        margin: 25px auto 0 !important;
        padding: 15px 20px !important;
        text-align: center;
    }
}
/* ================= CONTACT ================= */

.contact-con {
    padding: 135px 0 140px;
    background-color: #f2f9ff; /* light lavender background */
}

/* Heading spacing */
.contact-con .contact_content h6{
    margin-bottom: 16px;
    color: #1c6b96; /* accent */
}
.contact-con .contact_content h3{
    margin-bottom: 16px;
    color: #1c6b96; /* accent */
}

.contact-con .contact_content h2{
    margin-bottom: 54px;
    color: #222;
}

/* Contact Box */
.contact-con .contact-box {
    margin-bottom: 30px;
    padding: 20px 35px 24px 30px;
    border-radius: 20px;
    background-color: #ffffff;
    border: 1px solid #1c6b96; /* accent border */
    transition: 0.4s ease;
}

.contact-con .contact-box:hover {
    border: 1px solid black; /* secondary hover */
    box-shadow: 0 10px 25pxblack;
}

/* Remove extra spacing */
.contact-con li:last-child {
    margin-bottom: 0;
}

/* Icon */
.contact-con .contact-box .icon {
    top: 12px;
    width: 17%;
    float: left;
    position: relative;
    transition: 0.4s ease;
}

.contact-con .contact-box:hover .icon {
    transform: translateY(-5px);
}

/* Box Content */
.contact-con .contact-box .box-content {
    width: 83%;
    position: relative;
    display: inline-block;
}

.contact-con .contact-box h3 {
    margin-bottom: 18px;
    color: #1c6b96; /* accent */
}

/* Links */
.contact-con .contact-box .box-content a {
    display: inline-block;
    color: #555;
    transition: 0.3s ease;
}

.contact-con .contact-box .box-content a:hover {
    color: #1c6b96;
}

/* Map */
.contact-con .map_wrapper {
    border-radius: 20px;
    border: 1px solid #1c6b96;
    overflow: hidden;
}

/* Iframe */
.contact-con iframe {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    filter: grayscale(100%);
    transition: 0.4s ease;
}

.contact-con iframe:hover {
    filter: none;
}

.contact-con ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.contact-con ul li {
    list-style-type: none !important;
}
.contact-con .contact-box a {
    text-decoration: none !important;
}

.contact-con .contact-box a:hover {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .contact-con {
        padding: 60px 20px !important;
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .contact-con .row {
        flex-direction: column !important;
        gap: 40px;
    }

    /* 3. Reset Column Widths */
    .contact-con .col-lg-6,
    .contact-con .col-md-12 {
        width: 100% !important;
        flex: none;
    }

    /* 4. Fix Text Content */
    .contact-con .contact_content h2 {
        font-size: 30px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .contact-con .contact_content h3, 
    .contact-con .contact_content h6 {
        text-align: center !important;
    }

    /* 5. Adjust Contact Boxes for Mobile */
    .contact-con .contact-box {
        padding: 20px !important;
        text-align: left; /* Keep internal box content readable */
        margin-bottom: 20px;
    }

    .contact-con .contact-box .icon {
        width: 50px !important; /* Fixed width for better control */
        margin-right: 15px;
    }

    .contact-con .contact-box .box-content {
        width: calc(100% - 70px) !important;
    }

    /* 7. Adjust Map Height */
    .contact-con iframe {
        height: 300px !important;
    }
}

/* Specific fix for very small phones */
@media (max-width: 480px) {
    .contact-con .contact_content h2 {
        font-size: 26px !important;
    }

    .contact-con .contact-box .icon {
        float: none !important;
        display: block;
        margin: 0 auto 15px !important;
        text-align: center;
    }

    .contact-con .contact-box .box-content {
        width: 100% !important;
        text-align: center;
    }
}

/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    /* Adjust section padding */
    .contact-con {
        padding: 50px 15px !important;
    }

    /* Scale down headings */
    .contact-con .contact_content h2 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    /* Remove specific heights/filters if they feel heavy on mobile */
    .contact-con iframe {
        filter: none !important; /* Show colors immediately on mobile for clarity */
    }

    .contact-con .contact-box h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
}
/* ===============================
   TESTIMONIAL STYLE (Like Image)
=================================*/

.testimonial-con {
    padding: 120px 0;
    background: var(--light-bg);   /* your previous theme color */
}

/* Layout */
.testimonial-row {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.col-lg-4 {
    width: 32%;
}

/* Card */
.testimonial-box {
    text-align: center;
}

.testimonial-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 30px;
    padding: 10px;
    background: var(--white);
}

.testimonial-box h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 25px 0 15px;
    color: var(--secondary);
}

.testimonial-box p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
}


/* Responsive */
@media (max-width: 992px) {
    .testimonial-row {
        flex-direction: column;
    }

    .col-lg-4 {
        width: 100%;
    }

    .testimonial-image img {
        height: 350px;
    }
}
/* ===================================
   PREMIUM TESTIMONIAL DESIGN
===================================*/

.testimonial-con {
    padding: 130px 0;
    background: #f2f9ff;
    position: relative;
}

/* Section Heading */
.testimonial_content h3 {
    color: #1c6b96 ;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.testimonial_content h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 70px;
}

/* Card Design */
.testimonial-box {
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    border-radius: 30px;
    overflow: hidden;
    padding-bottom: 35px;
    transition: all 0.4s ease;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.testimonial-box:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* Image */
.testimonial-image {
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.testimonial-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.testimonial-box:hover .testimonial-image img {
    transform: scale(1.08);
}

/* Content */
.testimonial-box .box-content {
    padding: 30px 35px 0;
    text-align: center;
}

.testimonial-box h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--secondary);
}

.testimonial-box p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 25px;
}

/* Button */
.testimonial-box .primary_btn {
    padding: 12px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    color: var(--white);
    font-weight: 500;
    transition: 0.3s ease;
}

.testimonial-box .primary_btn:hover {
    background: var(--secondary);
}.testimonial-con {
    position: relative;
    overflow: hidden;
}

/* Top Left Leaf */
.testimonial-leaf {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.12;
    z-index: 0;
}

.testimonial-leaf img {
    width: 350px;
}

/* Decorative Flower (Upper Right Area) */
.testimonial-flower {
    position: absolute;
    top: 60px;
    right: 80px;
    width: 100px;
    z-index: 0;
}

.testimonial-flower img {
    width: 100%;
}

/* Bottom Right Flower */
.testimonial-rightflower {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.15;
    z-index: 0;
}

.testimonial-rightflower img {
    width: 300px;
}

/* Keep Content Above Decorations */
.testimonial-con .container {
    position: relative;
    z-index: 2;
}


/* Owl spacing */
.owl-carousel .item {
    padding: 15px;
}

/* Responsive */
@media (max-width: 992px) {
    .testimonial_content h2 {
        font-size: 32px;
    }

    .testimonial-image img {
        height: 300px;
    }
}


/* Columns */
.footer-col h5 {
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-col p {
    color: #ddd;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
    color: #ddd;
    font-size: 14px;
}

.footer-col ul li strong {
    display: block;
    color: #6699ca;
    margin-top: 5px;
}

/* Links */
.footer-col a {
    color: #ddd;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-col a:hover {
    color: #6699ca;
}
.footer-logo {
    max-width: 160px;   /* control width */
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* Phone Section */
.phone_wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.phone_wrapper img {
    width: 45px;
}

.phone_wrapper a {
    font-weight: bold;
    display: block;
}

.phone_wrapper span {
    font-size: 13px;
    color: #aaa;
}

/* Social Icons */
.social-icons {
    margin-top: 20px;
}

.social-icons a {
    display: inline-block;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #6699ca;
}

/* Copyright */
.copyright {
    text-align: center;
    padding: 20px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.copyright p {
    font-size: 14px;
    color: #ccc;
    margin: 0;
}

/* ================= Responsive ================= */

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .phone_wrapper {
        justify-content: center;
    }

    .social-icons {
        text-align: center;
    }
}
/* Custom styling for the Cortisol Section content */
.cortisol-layers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cortisol-layers-list li {
    background: rgba(28, 107, 150, 0.05);
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
    border-left: 4px solid #1c6b96;
}

.institution-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 10px;
}

/* Custom Scrollbar for the Institution List */
.institution-scroll::-webkit-scrollbar {
    width: 4px;
}
.institution-scroll::-webkit-scrollbar-thumb {
    background: #1c6b96;
    border-radius: 10px;
}

.inst-list {
    list-style: square;
    padding-left: 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.inst-list li {
    margin-bottom: 8px;
    border-bottom: 1px dashed #d0e6f7;
    padding-bottom: 4px;
}

/* Reusing your existing box styles for consistency */
.cortisol-section .therapy-item-box {
    min-height: 400px; /* Ensures boxes look uniform */
}
/* Responsive Adjustments for Cortisol Section */
@media (max-width: 991px) {
    /* Reduce section padding for smaller screens */
    .cortisol-section {
        padding: 60px 0 !important;
    }

    /* Force the grid into a single column */
    .therapy-boxed-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Adjust box height and padding for mobile */
    .cortisol-section .therapy-item-box {
        min-height: auto !important; /* Allow box to grow with content */
        padding: 25px 20px !important;
    }

    /* Scale down the main heading */
    .testimonial_content h2 {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }

    /* Improve list readability on touch screens */
    .cortisol-layers-list li {
        font-size: 14px;
        padding: 10px;
    }

    /* Make the institution scroll area a bit shorter on mobile */
    .institution-scroll {
        max-height: 200px;
    }

    /* Hide decorative flowers if they overlap text on very small screens */
    .testimonial-flower, .testimonial-leaf {
        display: none;
    }
}

/* Fix for horizontal scrolling on mobile */
.container {
    overflow: hidden;
}
/* ================================
   ABOUT TEACHER SECTION
================================ */

.about-teacher {
    padding: 100px 20px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
}

.about-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Image */
.about-image {
    flex: 1;
    min-width: 300px;
}

.about-image img {
    width: 85%;
    height: auto; /* Let the height be calculated by the ratio */
    aspect-ratio: 4 / 5; /* This creates a professional tall portrait look */
    object-fit: cover; 
    object-position: center; /* Ensures the subject's face stays centered */
    display: block;
    margin: 0 auto;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

.about-image img:hover {
    transform: scale(1.03);
}

/* Content */
.about-content {
    flex: 1;
    min-width: 300px;
}

.about-content h5 {
    color: #1c6b96;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.about-content h2 {
    font-size: 36px;
    color: #4b3b63;
    margin-bottom: 10px;
}

.designation {
    font-weight: 600;
    color: #6b5b95;
    margin-bottom: 20px;
}

.description {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    text-align: justify;
}

.coming-soon {
    background: rgb(237, 227, 255);
    padding: 15px 20px;
    border-radius: 12px;
    font-weight: 500;
    color: #4b3b63;
}

.coming-soon span {
    color: #1c6b96;
    font-weight: 700;
}
@media (max-width: 768px) {
    /* 1. Increased Side Spacing (Left & Right) */
    .about-teacher {
        padding: 60px 40px !important; /* Changed from 20px to 40px for more side room */
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .about-container {
        flex-direction: column !important;
        gap: 30px;
    }

    /* 3. Reset Column Widths */
    .about-image, 
    .about-content {
        width: 100% !important;
        flex: none;
        min-width: unset;
    }

    /* 4. Fix Text Content */
    .about-content h2 {
        font-size: 30px !important; 
        text-align: center !important;
        margin-top: 10px;
    }

    .about-content h3 {
        text-align: center !important;
        font-size: 20px !important;
    }

    .description {
        text-align: justify !important; 
        text-justify: inter-word;
        font-size: 15px;
        line-height: 1.6;
        /* Matches the container padding to ensure breathing room */
        padding: 0 5px; 
    }

    .designation {
        text-align: center !important;
        margin-bottom: 15px;
        font-weight: 600;
    }

    /* 7. Reduced Image Size & Centering */
    .about-image img {
        width: 90% !important; /* Slightly smaller width */
        max-width: 320px !important; /* Reduced from 400px to make it smaller on mobile */
        height: auto !important;
        margin: 0 auto;
        display: block;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
}

/* Specific fix for very small phones */
@media (max-width: 480px) {
    .about-teacher {
        padding: 50px 25px !important; /* Balanced for very narrow screens */
    }
    
    .about-content h2 {
        font-size: 26px !important;
    }
}

/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    .about-teacher {
        /* Ensuring consistent padding across all mobile variants */
        padding: 50px 35px !important; 
    }

    .description {
        margin: 0 auto 20px;
        max-width: 100%;
        text-align: justify !important;
    }
    
    .about-image img {
        max-width: 280px !important; /* Even smaller for standard portrait phones */
    }
}
/* ================================
   SERVICE SECTION (Manual Layout)
================================ */

.service-con {
    padding: 120px 20px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);;
}

.service-container {
    max-width: 1200px; /* Reduced to pull content further inward */
    margin: 0 auto;    /* Crucial: This centers the box on the page */
    padding: 0 45px;   /* Internal spacing for smaller screens */
    width: 100%;       /* Ensures it takes up space up to the max-width */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.service-containers {
    max-width: 1200px; /* Reduced to pull content further inward */
    margin: 0 auto;    /* Crucial: This centers the box on the page */
    padding: 0 40px;   /* Internal spacing for smaller screens */
    width: 100%;       /* Ensures it takes up space up to the max-width */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
/* Heading */
.service_content {
    text-align: center;
    margin-bottom: 60px;
}

.service_content h2 {
    font-size: 38px;
    color: #4b3b63;
    margin-bottom: 15px;
}

.service_content p {
    font-size: 16px;
    color: #666;
}

/* FLEX GRID */
.service_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* Service Card */
.service-box {
    width: 320px;
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 2px solid #6699ca
}

.service-box:hover {
    background: #d9ecfe;
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Icon */
.service-box .icon {
    margin-bottom: 25px;
}

.service-box .icon img {
    width: 60px;
    transition: 0.4s ease;
}

.service-box:hover .icon img {
    transform: scale(1.1);
}

/* Title */
.service-box h5 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #4b3b63;
}

/* Text */
.service-box p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

/* Bottom Text */
.service-bottom-text {
    margin-top: 60px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
    font-size: 15px;
}
.service-con {
    position: relative;
    overflow: hidden;
}

/* Background Leaf */
.service-leaf {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.12;
    z-index: 0;
}

.service-leaf img {
    width: 350px;
}

/* Decorative Flower */
.service-flower {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 120px;
    z-index: 0;
}

.service-flower img {
    width: 100%;
}

/* Keep content above decorations */
.service-container {
    position: relative;
    z-index: 2;
}


/* Responsive */
@media (max-width: 768px) {
    .service-box {
        width: 100%;
    }
}
/* ==============================
   ONLINE MODERN SECTION
============================== */

.online-modern {
    position: relative;
    padding: 120px 20px;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
}

.online-wrapper {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}
.online-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px; /* This creates the EQUAL left/right spacing */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
/* LEFT SIDE */
.online-left {
    flex: 1;
    min-width: 320px;
}

.small-title {
    color: #1c6b96;
    font-weight: 600;
    margin-bottom: 15px;
    display: inline-block;
}

.online-left h2 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

.online-left p {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
    text-align: justify;
}

/* LIST */
.online-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.online-list li {
    margin-bottom: 12px;
    font-size: 17px;
    position: relative;
    padding-left: 28px;
}

.online-list li::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #1c6b96;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
}

/* BUTTON */
.online-btn {
    display: inline-block;
    padding: 14px 30px;
    background: #1c6b96;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.online-btn:hover {
    background: #6c3483;
}

/* RIGHT IMAGE */
.online-right {
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.online-right img {
    width: 100%;
    max-width: 200px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.online-modern {
    position: relative;
    overflow: hidden;
}

/* Left Background Leaf */
.online-leaf {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.12;
    z-index: 0;
}

.online-leaf img {
    width: 350px;
}

/* Purple Flower */
.online-flower {
    position: absolute;
    top: 80px;
    right: 120px;
    width: 100px;
    z-index: 0;
}

.online-flower img {
    width: 100%;
}

/* Right Flower (Bottom Right Corner) */
.online-rightflower {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.15;
    z-index: 0;
}

.online-rightflower img {
    width: 280px;
}

/* Keep content above decorations */
.online-wrapper {
    position: relative;
    z-index: 2;
}


/* RESPONSIVE */
@media (max-width: 992px) {
    .online-modern {
        background: #f2f9ff;
    }

    .online-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .online-left h2 {
        font-size: 32px;
    }

    .online-list li {
        padding-left: 0;
    }

    .online-list li::before {
        display: none;
    }
}

/* ================= MOBILE RESPONSIVE FIXES ================= */

@media (max-width: 768px) {
    /* 1. Adjust Section Padding and Container Spacing */
    .online-modern {
        padding: 60px 0 !important; /* Smaller vertical padding */
        text-align: center;
    }

    .online-container {
        padding: 0 20px !important; /* Balanced side spacing for mobile */
    }

    /* 2. Stack the columns vertically */
    .online-wrapper {
        flex-direction: column !important;
        gap: 40px;
    }

    /* 3. Reset Column Widths */
    .online-left,
    .online-right {
        width: 100% !important;
        flex: none;
        min-width: unset !important;
    }

    /* 4. Fix Text Content */
    .online-left h2 {
        font-size: 30px !important; /* Scale down heading */
        text-align: center !important;
        line-height: 1.3;
    }

    .online-left p {
        padding-right: 0 !important;
        margin: 0 auto 25px;
        text-align: center !important; /* Center text for better mobile readability */
        font-size: 15px;
    }

    .online-left {
        text-align: center !important;
        width: 100%;
    }

    /* 5. Center and Adjust List */
    .online-list {
        display: inline-block;
        text-align: left; /* Keep bullet points aligned but center the list container */
        margin: 0 auto 30px auto;
    }

    .online-list li {
        font-size: 16px;
    }

    /* 6. Center and Stack Button */
    .online-btn {
        display: block;
        margin: 0 auto !important;
        width: fit-content;
        min-width: 200px;
    }

    /* 7. Adjust Decorative Flowers & Leaves */
    .online-leaf,
    .online-flower,
    .online-rightflower {
        display: none !important; /* Remove clutter on small screens */
    }

    /* 8. Adjust Image Size */
    .online-right img {
        max-width: 180px; /* Prevent image from being too large on mobile */
        margin: 0 auto;
    }
}

/* Specific fix for very small phones */
@media (max-width: 480px) {
    .online-left h2 {
        font-size: 26px !important;
    }
}

/* ================= ADDITIONAL MOBILE FIXES (767px) ================= */

@media (max-width: 767px) {
    .online-modern {
        padding: 50px 15px !important;
    }

    .online-left h2 {
        font-size: 28px !important;
    }

    /* Ensure list items don't overflow */
    .online-list {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 30px auto !important;
        padding: 0 !important;
        text-align: left;
    }

    ul.online-list {
        text-align: center !important;
    }

    .online-list li {
        padding-left: 25px;
        text-align: left;
    }

    ul.online-list li {
        padding-left: 0 !important;
        text-align: center !important;
    }
}
/* ================= REVIEW SECTION ================= */

.review-con {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    overflow: hidden;
}

/* Layout */
.review-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Use space-between for better edge alignment */
    gap: 40px; /* Space between text and image */
    width: 100%;
}
/* Left Content */
.review-left {
    flex: 1;
    text-align: left;
}

.review-left h2 {
    font-size: 42px;
    margin-bottom: 10px;
    color: #2c2c2c;
}

.review-left h6 {
    margin-bottom: 25px;
    color: #1c6b96;
}
.review-left h3 {
    margin-bottom: 25px;
    color: #1c6b96;
}
.review-left p {
    line-height: 26px; /* Slightly tighter for mobile readability */
    margin-bottom: 25px;
    color: #555;
    text-align: left; /* CHANGED: Justify looks bad on mobile; left is easier to read */
}
/* Button */
.primary_btn {
    display: inline-block;
    padding: 14px 45px;
    background: #1c6b96;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.primary_btn:hover {
    background: #2c2c2c;
}

/* Right Image */
.review-right {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Aligns the image to the far right edge */
    height: auto; /* Let height be natural or fixed */
    overflow: hidden;
}

.review-right img {
    width: 100%;
    max-width: 500px; 
    height: 475px;    
    /* CHANGE THIS: 'contain' ensures the whole image is visible without cropping */
    object-fit: contain; 
    
    /* Optional: If the image has a white background, 
       adding this makes it blend into your section */
    background-color: transparent; 
    
    border-radius: 90px;
    display: block;
}

/* Ensure the container is centered on the page */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* Increased padding to ensure text doesn't touch screen edges */
    width: 100%;
    box-sizing: border-box;
}


/* Decorative Leaf */
.review-leaf {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.1;
}

.review-leaf img {
    width: 350px;
}

/* Decorative Flower */
.review-flower {
    position: absolute;
    bottom: 40px;
    right: 60px;
    width: 110px;
}

.review-flower img {
    width: 100%;
}


/* Responsive */
@media (max-width: 992px) {
    .review-con {
        padding: 60px 0; /* Reduced padding for mobile screens */
    }

    .review-row {
        flex-direction: column-reverse; /* Put image on top, text below for better flow */
        text-align: center;
        gap: 20px;
    }

    .review-left h2 {
        font-size: 32px !important; /* Scale down heading size */
        text-align: center !important;
    }

    .review-left p {
        text-align: left; /* Keep text left-aligned or center for mobile */
        font-size: 15px;
        padding: 0 10px; /* Give text some breathing room from screen edges */
    }

    .review-right img {
        height: auto; /* Prevent image stretching */
        max-width: 80%; /* Don't let image hit the edges */
        border-radius: 40px; /* Smaller radius looks better on mobile */
    }
    
}

@media (max-width: 768px) {
    /* 1. Adjust Section Padding */
    .review-con {
        padding: 60px 20px !important;
        text-align: center;
    }

    /* 2. Stack the columns vertically */
    .review-row {
        flex-direction: column-reverse !important; 
        gap: 30px;
    }

    /* 3. Reset Column Widths */
    .review-left,
    .review-right {
        width: 100% !important;
        flex: none;
    }

    /* 4. Fix Text Content Alignment */
    .review-left h2 {
        font-size: 30px !important;
        text-align: center !important; /* Center the Name */
    }

    .review-left h3 {
        text-align: center !important; /* Center "Yoga Specialist" */
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .review-left p {
        text-align: justify !important; /* Keep paragraph justified */
        text-justify: inter-word;
        padding: 0 !important;
        margin-bottom: 25px;
    }

    /* 5. Center Image */
    .review-right {
        display: flex;
        justify-content: center !important;
    }

    .review-right img {
        max-width: 80% !important;
        height: auto !important;
        border-radius: 20px;
    }
}

/* Specific fix for very small phones */
@media (max-width: 480px) {
    .review-left h2 {
        font-size: 26px !important;
    }
    .review-left h3 {
        font-size: 18px !important;
    }
}

/* ================= ADDITIONAL MOBILE FIXES ================= */

@media (max-width: 767px) {
    .review-con {
        padding: 40px 15px !important;
    }

    /* Scaling the heading for smaller mobile widths */
    .review-left h2 {
        font-size: 28px !important;
        line-height: 1.2;
    }

    .review-left p {
        font-size: 15px;
        line-height: 1.5;
    }
}
/* Contact Section */
.contactform-con {
    position: relative;
    
    
    /* INCREASE THIS: Adjust 120px based on your navbar height */
    padding: 140px 0 80px 0; 
    
    overflow: hidden;
}

/* Main Container */
.contact-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* Align to top instead of center for better form flow */
    gap: 60px;
}
/* Left Image */
.contact-left {
    flex: 1;
}

.contact-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Right Content */
.contact-right {
    flex: 1; /* Give the form slightly more room */
    /* Adds a clean white card look to the form */
    padding: 40px;
    border-radius: 30px;
    
}
.contact-right h6 {
    margin-bottom: 10px;
    color: #1c6b96;
}

.contact-right h2 {
    margin-bottom: 30px;
}

/* Form Layout */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row input {
    flex: 1;
}

/* Inputs */
input,
textarea {
    width: 100%;
    padding: 14px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    outline: none;
    font-size: 14px;
}

textarea {
    border-radius: 20px;
    resize: none;
}

/* Focus */
input:focus,
textarea:focus {
    border-color: #1c6b96;
}

/* Button */
.submit_now {
    padding: 16px 40px;
    border-radius: 30px;
    border: none;
    background: #1c6b96;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
}

.submit_now:hover {
    background: white;
    color: #1c6b96;
    border: 1px solid #1c6b96;
}

/* Responsive */
@media(max-width: 768px){
    .contact-container {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }
}
/* Contact Section */
.contactform-con {
    position: relative;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    padding: 80px 0;
}

/* Main Container */
.contact-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Left Image */
.contact-left {
    flex: 1;
}

.contact-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Right Content */
.contact-right {
    flex: 1;
}

.contact-right h6 {
    margin-bottom: 10px;
    color: #1c6b96;
}
.contact-right h4 {
    margin-bottom: 10px;
    color: #1c6b96;
}

.contact-right h2 {
    margin-bottom: 30px;
}

/* Form Layout */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row input {
    flex: 1;
}

/* Inputs */
input,
textarea {
    width: 100%;
    padding: 14px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    outline: none;
    font-size: 14px;
}

textarea {
    border-radius: 20px;
    resize: none;
}

/* Focus */
input:focus,
textarea:focus {
    border-color: #1c6b96;
}

/* Button */
.submit_now {
    padding: 16px 40px;
    border-radius: 30px;
    border: none;
    background: #1c6b96;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
}

.submit_now:hover {
    background: white;
    color: #1c6b96;
    border: 1px solid #1c6b96;
}

/* Responsive */
@media(max-width: 768px){
    .contact-container {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }
}


@media (max-width: 768px) {
    /* 1. Medium Logo Image Size */
    .contact-left img {
        width: 85% !important; 
        max-width: 300px !important; 
        margin: 0 auto 30px !important;
        display: block;
    }

    .contactform-con {
        padding: 60px 0 !important; 
    }

    .contact-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        /* Increased equal padding to 40px for more spacing on both sides */
        padding: 0 40px !important; 
        box-sizing: border-box;
    }

    .contact-right {
        text-align: center !important; /* Centers the container content */
        padding: 0 !important; 
        width: 100% !important;
    }

    .contact-right h2 {
        text-align: center !important; /* Centers the "Send us a Message" text */
        margin-left: 0 !important;
        font-size: 28px !important;
        margin-bottom: 30px !important;
    }

    /* 3. Keep Labels Left-Aligned for Readability */
    .contact-right label {
        display: block;
        text-align: left !important;
        font-weight: 400 !important;
        margin-bottom: 6px;
        color: #555;
    }
    /* 4. Minimize vertical gaps within form */
    .form-row, .form-field {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* 5. SPECIFIC FIX: Tighten space between Message field and Button */
    .form-group {
        width: 100% !important;
        margin-bottom: 15px !important; /* More space after message field */
    }

    .contact-right .primary_btn {
        margin: 15px auto 0 !important; /* Balanced gap between field and button */
        display: block !important;
        width: 100% !important; 
        max-width: 280px;
        text-align: center;
    }

    input, textarea {
        width: 100% !important;
        box-sizing: border-box; 
    }
}

/* Specific adjustment for very small screens */
@media (max-width: 480px) {
    .contact-container {
        padding: 0 25px !important; /* Slightly tighter for tiny screens */
    }
}
/* ===== CUSTOM PRICING THEME ===== */

.custom-pricing {
    background: #ffffff;
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.07);
    transition: 0.4s ease;
    text-align: center;
}

.custom-pricing:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(203, 65, 84, 0.15);
}

.custom-pricing h4 {
    font-weight: 700;
    margin-bottom: 15px;
}

.custom-pricing .value {
    font-size: 40px;
    font-weight: 700;
    color: #1c6b96;
    margin: 20px 0 10px;
}

.custom-pricing .rupee {
    font-size: 24px;
    vertical-align: top;
}

.custom-pricing .duration {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.custom-pricing ul {
    text-align: left;
    margin-top: 20px;
}

.custom-pricing ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: start;
}

.custom-pricing ul li i {
    color: #1c6b96;
    margin-right: 8px;
    margin-top: 5px;
}

.highlight {
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
    border: 2px solid #1c6b96;
}

/* ===== PRICING MANUAL LAYOUT (PURPLE THEME) ===== */

.pricing-con {
    padding: 100px 0;
    background: linear-gradient(135deg, #f2f9ff, #d9ecfe);
}

.pricing-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.pricing-heading {
    text-align: center;
    margin-bottom: 60px;
}

.pricing-heading h6 {
    color: #1c6b96;   /* changed to purple */
    margin-bottom: 10px;
}


.pricing-heading h4{
    color: #1c6b96;   /* changed to purple */
    margin-bottom: 10px;
}

.pricing-heading h2 {
    font-weight: 700;
}

.pricing-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 25px;
    width: 320px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: 0.4s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.pricing-card .primary_btn {
    margin-top: auto;
}

.pricing-card:hover {
	background: #f2f9ff;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) /* purple shadow */
}

.pricing-card h3 {
    margin-bottom: 15px;
}

.pricing-card p {
    font-size: 14px;
    color: #666;
}

.price {
    font-size: 38px;
    font-weight: 700;
    color: #1c6b96;   /* purple price */
    margin: 20px 0 10px;
}

.duration {
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
    text-align: left;
}

.pricing-card ul li {
    margin-bottom: 8px;
    padding-left: 18px;
    position: relative;
}

.pricing-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1c6b96;   /* purple tick */
    font-weight: bold;
}

.pricing-btn {
    display: inline-block;
    padding: 15px 35px;
    background: #1c6b96;   /* purple button */
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.pricing-btn:hover {
    background: #fff;
    color: #1c6b96;
    border: 1px solid #1c6b96;
}

.highlight {
    border: 2px solid #1c6b96;
}

/* Responsive */
@media(max-width: 768px){
    .pricing-wrapper {
        flex-direction: column;
        align-items: center;
    }
}


/* ================= PAYMENT SECTION ================= */

.payment-con {
    padding: 100px 0;
    background: linear-gradient(135deg, #f9f5ff, #d9ecfe);
}

.payment-container {
    max-width: 1100px;
    margin: auto;
}

.payment-heading {
    text-align: center;
    margin-bottom: 60px;
}

.payment-heading h4 {
    color: var(--e-global-color-accent);
    margin-bottom: 10px;
}

.payment-heading h2 {
    font-weight: 700;
}

.payment-wrapper {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Card Style Same as Pricing */
.payment-card,
.scanner-card {
    background: #fff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    flex: 1;
    min-width: 320px;
}

.payment-card h3,
.scanner-card h3 {
    margin-bottom: 25px;
    font-weight: 600;
}

/* Form Styling */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.form-group select {
    width: 100%;
    padding: 15px;
    border-radius: 30px;
    border: 1px solid #ddd;
    outline: none;
    transition: 0.3s;
}

.form-group select:focus {
    border-color: var(--e-global-color-accent);
    box-shadow: 0 0 0 3px rgba(142,68,173,0.1);
}

.pay-btn {
    width: 100%;
    padding: 16px;
    border-radius: 30px;
    border: none;
    background: var(--e-global-color-accent);
    color: white;
    font-weight: 600;
    transition: 0.3s;
}

.pay-btn:hover {
    background: var(--e-global-color-secondary);
}

/* Scanner */
.scanner-card {
    text-align: center;
}

.scanner-card img {
    max-width: 220px;
    margin: 20px 0;
}

/* Responsive */
@media(max-width:768px){
    .payment-wrapper {
        flex-direction: column;
    }
}

/* delete button */

.delete-btn{
    background:#e74c3c;
    color:white;
    padding:6px 14px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    transition:0.3s;
}

.delete-btn:hover{
    background:#c0392b;
}


.delete-btn{
    background:#ff4d4d;
    color:#fff;
    padding:6px 15px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    transition:0.3s ease;
}

.delete-btn:hover{
    background:#cc0000;
}