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

.saki {
    overflow-y:hidden;
    width:100%;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #FFFFFF;
}
/*main upper header*/
.header-contact {
    background-color: #2d3c4c;
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    font-family: sans-serif;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

    .contact-info a {
        color: white;
        font-size: 15px;
        font-weight:bold;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s ease;
    }

    .contact-info .whatsapp i {
        font-size: 25px; /* increase from default 14px */
        color: #25D366;
        transition: transform 0.3s ease;
    }

    .contact-info .whatsapp:hover i {
        color: #B43041;
        transform: scale(1.2); /* subtle zoom effect */
    }


    .contact-info .phone i {
        color: #fff;
        transition: color 0.3s ease;
    }

    .contact-info .phone:hover {
        color: #B43041;
    }

    
    .contact-info .write-us-btn {
        background-color: white;
        color: black;
        font-weight:500;
        font-size: 14px;
        border: none;
        padding: 7px 24px;
        text-decoration: none;
        cursor: pointer;
        /*border-radius: 4px;*/
        transition: 0.3s ease;
    }

        .contact-info .write-us-btn:hover {
            background-color: #CA6C78;
            color: white;
        }


.social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}
.fa-brands, .fab {
    font-weight: 400;
    font-size: large;
}
.social-icons a  {
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d3c4c;
    font-size: 14px;
    transition: 0.3s ease;
    border: 1px solid #ccc;
    text-decoration: none;
    border-bottom: none;
}

    .social-icons a:hover {
        color: #B43041;
        background-color: white;
    }
.x-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: 0.3s ease;
    filter: brightness(0) saturate(100%) invert(0); /* Pure black */
}

.social-icon:hover .x-icon-img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(3765%) hue-rotate(357deg) brightness(101%) contrast(91%);
    /* This makes it red on hover */
}

/*header*/
/* MAIN HEADER */
/*body {
    padding-top: 120px;*/ /* Adjust based on actual header height */

.main-header {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position:relative;
    top: 0;
    padding: 8px 0;
    transition: padding 0.3s ease;
    z-index: 999;
    font-family: 'Segoe UI', sans-serif;
}
    .main-header.shrink {
        padding: 3px 0;
        position:fixed;
    }

/* CONTAINER */
.header-container {
    max-width: 1900px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    gap: 20px;
}

/* LOGO SECTION */
.logo-container {
    flex: 0 0 auto;
}

.logo img {
    max-height: 90px;
    object-fit: contain;
    transition: max-height 0.3s ease;
}
.main-header.shrink .logo img {
    max-height: 70px;
}
main {
    padding-top: 30px; /* header height approx */
}
/* NAVIGATION SECTION */
.nav-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.navbar .nav-links {
    display: flex;
    gap: 35px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease;
    position: relative;
}

    .nav-links li a:hover {
        color: #cc0000;
    }

/* DROPDOWN MENU */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    
    left: 0;
    background: #fff;
    padding: 30px 0;
    /* border-radius: 0 0 4px 4px;*/
    /*border-radius: 25px 0px 25px 0px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);*/
    min-width: 200px;
    z-index: 99;
    
}

    .dropdown-menu li {
        padding: 8px 20px;
        list-style-type: none;
    }

        .dropdown-menu li a {
            display: block;
            color: #000;
            font-size: 14px;
            white-space: nowrap;
        }

            .dropdown-menu li a:hover {
                color: #cc0000;
            }

.dropdown:hover .dropdown-menu {
    display: block;
}

/* DOWN ARROW */
.arrow {
    font-size: 15px;
    margin-left: 5px;
}

/* LANGUAGE SELECT DROPDOWN */
.lang-select select {
    padding: 6px 10px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.main-header {
    display: block;
}

.mobile-header {
    display: none;
}
/*++++++++++++++++++++++++++ google translate+++++++++++++++++++++++++++++++++*/
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
.goog-logo-link,
.goog-te-gadget {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

body {
    top: 0 !important;
    position: static !important;
}
.skiptranslate {
    display: none !important;
}
.goog-te-combo {
    display: none !important;
}

/*++++++++++++++ mobile navigation ++++++++++++++*/
.mobile-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #ffffffcc; /* keep translucent white */
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: 0.3s ease;
}

    .mobile-header.scrolled .mobile-toggle {
        background-color: #0026ff;
    }

.mobile-logo img {
    height: 45px;
}

/* Toggle Icon */
/*.mobile-toggle {
    width: 38px;
    height: 38px;
    background: #ffffff;
    backdrop-filter: blur(6px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 10000;
    transition: background 0.3s ease;
}

.mobile-header.scrolled .mobile-toggle span {
    background-color: #ffffff;
}

.mobile-toggle span {
    width: 20px;
    height: 2px;
    background: #0026ff;
    display: block;
    transition: 0.3s ease;
}

.mobile-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.mobile-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}*/
.mobile-toggle {
    width: 38px;
    height: 38px;
    background: #384B5C;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 10000;
    transition: background 0.3s ease;
}

    /* White lines inside the toggle */
    .mobile-toggle span {
        width: 20px;
        height: 2px;
        background: #ffffff !important;
        display: block;
        transition: 0.3s ease;
    }

    /* Transformations when menu is open */
    .mobile-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .mobile-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }
/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 34px;
    left: -100%;
    width: 75%;
    height: 100%;
    overflow:auto;
    background: #ffffff;
    padding: 100px 30px 30px 30px;
    transition: right 0.3s ease;
    z-index: 9998;
    overflow-y: auto;
    color: #000;
    transition: left 0.3s ease-in-out;
}


    .mobile-menu.open {
        left:0;
    }

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mobile-nav li {
        margin-bottom: 30px;
        border-bottom: 1px solid #e0e0e0;
        padding: 15px 0;
    }
        .mobile-nav li:last-child {
            border-bottom: none;
        }
    .mobile-nav a,
    .mobile-nav span {
        color: #000;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        display: block;
    }

        .mobile-nav a:hover {
            color: #B43041;
            text-decoration: underline;
        }
.mobile-toggle,
.mobile-menu {
    user-select: none;
}
    /* Dropdown Styles */
   /* .mobile-dropdown > span::after {
    content: " ▼";
    font-size: 10px;
    margin-left: 5px;
}*/
/* Make dropdown span fill full width and space items */
.mobile-dropdown {
    position: relative;
}

    .mobile-dropdown > span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }

        /* Move the arrow to the right edge */
        .mobile-dropdown > span::after {
            content: "▼";
            font-size: 15px;
            position: absolute;
            right: 0;
        }



.mobile-submenu {
    display: none;
    padding-left: 15px;
    margin-top: 10px;
}

.mobile-dropdown.open .mobile-submenu {
    display: block;
}
.contact-info-toggle {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

    .contact-info-toggle a {
        color: white;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.3s ease;
    }

    .contact-info-toggle .write-us-btn-toggle {
        background-color: grey;
        color: black;
        font-weight: 500;
        font-size: 14px;
        border: none;
        padding: 7px 24px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 4px;
        transition: 0.3s ease;
        margin-top: 37px;
        margin-bottom: 30px;
    }

        .contact-info-toggle .write-us-btn-toggle:hover {
            background-color: #CA6C78;
            color: white;
        }

/*footer*/

.footer-top {
    background-color: #2F3E50;
    color: #FFF;
    padding: 2rem 1rem;
}

.footer-container {
    display: grid;
    grid-template-columns: minmax(0,2fr) repeat(3,1fr);
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto;
    background-color: #2F3E50;
  
}
.footer-col {
    background-color: #2F3E50;
  
}


.logo-box {
    width: 389px;
    background-color: #FFFFFF;
    padding: 6px; 
    display: inline-block;
    border-radius: 2px;
    margin-bottom: 12px; 
    box-sizing: border-box; 
    margin-left: 30px;
}
.text-wrapper {
    width: 459px;
    margin-left: -42px;
}


.footer-logo {
    display: block;
    max-width: 100%;
}

.about-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: justify;
    hyphens: auto;
    background-color: #2F3E50;
    margin-left: 78px;
    
}

.footer-col h4 {
    font-size: 1.60rem;
    margin-bottom: 1.8rem;
    position: relative;
}

    .footer-col h4::after {
        content: "";
        width: 50px;
        height: 2px;
        background: #FFF;
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 0.5rem;
    }

.quick-links {
    list-style: none;
    padding: 0;
    margin-top: 28px;
}


    .quick-links li + li {
        margin-top: 0.6rem;
    }

    .quick-links a {
        color: #DDD;
        text-decoration: none;
        font-size: 15px; /* links ki normal font size */
        font-weight: 500;
    }

        .quick-links a::before {
            content: '›';
            color: #DDD;
            font-size: 1.3rem; /* arrow ko bada banana hai toh font-size yahan increase karein */
            margin-right: 6px; /* arrow aur text ke beech gap */
           /* vertical-align: middle;*/
        }


        .quick-links a:hover {
            color: #BD4141;
        }

.contact-col address,
.contact-col p {
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
    /* font-weight: 600;*/
}

.contact-col p {
    font-style: normal;
    font-weight: 600;
}

    .contact-col p span {
        margin-right: 4px;
        font-weight: normal;
    }

    .contact-col p .phone-icon {
        color: #ff2e6d;
    }

    .contact-col p .mobile-icon {
        color: #c1a53f;
    }

    .contact-col p .mail-icon {
        color: #ccc;
    }


.social-icons {
    display: flex;
    gap: 14px;
    align-items: center;
}

.fa-brands, .fab {
    font-weight: 400;
    font-size: large;
}

.social-icons a {
    width: 32px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d3c4c;
    font-size: 14px;
    transition: 0.3s ease;
    border: 1px solid #ccc;
    text-decoration: none;
    border-bottom: none;
}

    .social-icons a:hover {
        color: red;
        background-color: white;
    }

.x-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: 0.3s ease;
    filter: brightness(0) saturate(100%) invert(0); /* Pure black */
}

.social-icon:hover .x-icon-img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(3765%) hue-rotate(357deg) brightness(101%) contrast(91%);
    /* This makes it red on hover */
}
.footer-bottom {
    border-top: 3px solid;
    padding-top: 10px;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    color: #FFFFFF;
    margin-top:60px;
}


   
    /*+++++++National Accreditation Board++++++++*/
    .accreditation-section {
    display: flex;
    align-items: center; /* sab content vertically center align */
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    gap: 2rem;
    padding: 40px 0;
    background-color: #FFFFFF;
}

.accred-item p {
    margin: 0;
    font-size: 17px;
    color: #264060;
    font-weight: 750;
    line-height: 1.4;
    text-align: justify;
}

.accred-item.left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .accred-item.left img {
        max-width: 140px;
        height: auto;
    }

.accred-item.center-text {
    flex: 1;
    text-align: center;
}

    .accred-item.center-text p {
        font-size: 0.9rem;
        color: #264060;
        font-weight: 700;
        line-height: 1.4;
    }

.accred-item.right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

    .accred-item.right img {
        max-width: 1200px;
        height: auto;
    }
/*++++++++++++++++ top swipper++++++++++++++++*/
/* ===== Banner Section CSS ===== */
.desktop {
    max-width: 100%;
    overflow: hidden;
    position: relative;
     background-color: #fff;
}

.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: #fff;*/
}

    .swiper-slide a {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        max-height: 550px; /* adjust if needed */
    }

/* Navigation arrows */
.swiper-button-next,
.swiper-button-prev {
    color: #1e3244;
    width: 35px;
    height: 35px;
}

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 24px;
    }

.desktop {
    display: block;
}


.mobile {
    display: none;
}
   


/*+++++++About Mehta International Eye Institute++++++*/

.desktop1 {
    display: block;
}

.mobile1 {
    display: none;
}
.about3 {
    background: #2F3E50;
    color: #fff;
    padding: 60px 20px;
}

.about3-container {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.about3-text {
    flex: 1;
    max-width: 50%;
}

    .about3-text h2 {
        font-size: 1.8rem;
        line-height: 1.5;
        margin-bottom: 20px;
        font-weight: 700;
        color: #fff;
    }

    .about3-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: justify;
        margin-right: 29px;
        hyphens: auto;
        word-spacing: 2px;
    }

.read-more3 {
    display: inline-block;
    padding: 10px 25px;
    background: #fff;
    color: #2F3E50;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s, color 0.3s;
}

    .read-more3:hover {
        background: #B43041;
        color: #fff;
    }

.about3-slider {
    flex: 1;
    max-width: 45%;
}

.slider3 {
    width: 100%;
    height: auto;
}

    .slider3 .swiper-slide.slider3-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 20px;
        max-height: 500px;
        display: block;
    }

.slider3-prev, .slider3-next {
    color: #fff;
}

    .slider3-prev::after, .slider3-next::after {
        font-size: 22px;
    }

.slider3-pag .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.slider3-pag .swiper-pagination-bullet-active {
    background: #fff;
}

.slider3 .swiper-slide {
    background: transparent;
}

@media (max-width: 900px) {
    .about3-container {
        flex-direction: column;
    }

    .about3-text, .about3-slider {
        max-width: 100%;
    }
}
/*+++++ Services +++++*/

.services-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #ECECEC;
    max-width:2000px;
}

.section-title {
    font-size: 60px;
    color: #2d3e50;
    margin-bottom: 40px;
}

.services-columns {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 2000px;
    margin: 0 auto;
}

.services-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease, ;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(100px);
    opacity: 0;
    width: 360px;
    height: 430px;
}

    .service-card img {
        width: 360px;
        height: auto;
        object-fit: cover;
        transition: transform 0.2s ease;
        border-radius: 50px;
        padding: 20px;  
    }

    .service-card p {
        font-size: 26px;
        font-weight: bold;
        color: #2d3e50;
        padding: 15px 10px;
        margin: 0;
    }
    .service-card a {
        text-decoration:none;
    }
    .service-card:hover img {
        transform: scale(1.1);
    }

/* Reveal animation */
.reveal.active {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.6s ease;
}

/* View More Button */
.view-more-container {
    margin-top: 50px;
    text-align: center;
}

.view-more-btn {
    padding: 13px 40px;
    display: inline-block;
    background-color: #2a3b4c;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 22px;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease;
}

    .view-more-btn:hover {
        background: #B43041;
        color: white;
    }
/*video and community section*/

.youtube{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    justify-content: center;
    height: 430px;
}

.image-link img {
    width: 570px;
    height: auto;
    border-radius: 12px;
    transition: transform 0.2s ease;
    cursor: pointer;
    margin-top: 35px;
}

    .image-link img:hover {
        transform: scale(1.03);
    }
/*++++++++++ MEET THE DOCTOR ++++++++++++*/
.doctor-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    background-color: #E8E8E8;
}

/* Inner Layout */
.doctor-container {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
}

/* Left Side - Image & Info */
.doctor-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
    border-radius: 15px;
    padding: 20px;
    /*background: #ffffff;*/
}

    .doctor-image img {
       /* width: 100%;
        max-width: 550px;*/
       max-width:100%;
       height:auto;
        border-radius: 12px;
        margin-bottom: 20px;
        border-style: solid;
        border-width: 8px 8px 8px 8px;
        border-color: #384B5C;
        border-radius: 45px 45px 45px 45px;
        box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }


    .doctor-image h2 {
        font-size: 32px;
        margin-bottom: 10px;
        font-weight:770;
        color: #384b5c;
    }

.degrees {
    font-size: 15px;
    font-weight:700;
    color: #445568;
    line-height: 1.6;
    margin-bottom: 10px;
}

.position {
    /* font-size: 14px;
    margin-top: 10px;*/
    color: #384b5c;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.award {
   
    font-size: 18px;
    margin-top: 27px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #384b5c;
}

    .award strong {
        color: #0b3c60;
        font-weight: 700;
    }

/* Right Side - Text */
.doctor-text {
    flex: 1;
    min-width: 300px;
    padding-top: 30px;
}

    .doctor-text h3 {
        font-size: 50px;
        font-weight: 620;
        color: #2a3b4c;
        margin-bottom: 15px;
        margin-top:60px;
    }

    .doctor-text h4 {
        font-size: 32px;
        font-weight: 600;
        color: #2a3b4c;
        margin-bottom: 20px;
        line-height: 1.4;
    }

        .doctor-text h4 span {
            color: #0b3c60;
        }

    .doctor-text p {
        font-size: 16px;
        font-weight: 500;
        color: #2a3b4c;
        line-height: 31px;
        margin-bottom: 38px;
        max-width: 600px
    }

.read-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2a3b4c;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .read-more:hover {
        background-color: #b43041;
       color:#fff;
    }
    

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

    .doctor-text {
        padding-top: 0;
        text-align: center;
    }

        .doctor-text p {
            margin: 0 auto;
        }
}
/*++++++++++ Detail ++++++++++*/
:root {
    --bg: #344859;
    --fg: #ffffff;
    --icon-bg: #ffffff;
    --spacing: 1rem;
    --radius: 0.75rem;
    --font: Arial, sans-serif;
}



.details-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background: var(--bg);
    padding: var(--spacing) 0;
}

.detail {
    display: flex;
    align-items: flex-start;
    background: var(--bg);
    color: var(--fg);
    padding: var(--spacing);
}

.detail__icon {
    background: var(--icon-bg);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin-right: var(--spacing);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .detail__icon img {
        width: 70px;
      
    }

.detail__info {
    display: flex;
    flex-direction: column;
}

.detail__title {
    font-weight: bold;
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.detail__text,
.detail__link {
    margin: 0.25rem 0;
    font-size: 0.95rem;
    font-weight: 550;
    color: inherit;
}

.detail__link {
    text-decoration: none;
}

    .detail__link:hover {
        text-decoration: underline;
    }

@media (max-width: 600px) {
    .details-container {
        flex-direction: column;
        align-items: center;
    }

    .detail {
        max-width: none;
        width: 100%;
    }
}
/*++++++++ Make An Appointment +++++++*/

.appointment-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 60px 50px;*/
    max-width: 1900px;
    margin: auto;
    flex-wrap: wrap;
    background-color: #F6F7FB;
}

.form-section {
    flex: 1;
    max-width: 500px;
    margin-left: 200px
}

.subheading {
    color: #2f3a4c;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 10px;
}

.heading {
    font-size: 35px;
    font-weight: 400;
    color: #384b5c;
    margin-bottom: 35px;
    line-height: 1.5;
}

.highlight {
    font-weight: 700;
}

.appointment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-row {
    display: flex;
    gap: 15px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
    flex: 1;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

textarea {
    resize: vertical;
    height: 80px;
}


button {
    width: 100px;
    padding: 10px;
    background-color: #2f3a4c;
    color: #fff;
    font-weight: 600;
    font-size:20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    button:hover {
        background-color: #b43041;
        transform: translateY(-2px);
    }
.image-section {
    flex: 1;
    text-align: center;
}

    .image-section img {
        max-width: 800px;
       margin-top:60px;
    }
/*+++++++ Our Quality Policy +++++++*/
.quality-section {
    background-color: #384e60;
    color: white;
    padding: 35px 20px;
    text-align: center;
}

.quality-content {
    max-width: 1200px; /* ⬅️ Limit width to make text wrap in 2 lines */
    margin: auto;
}

    .quality-content h2 {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 25px;
        text-transform: uppercase;
        color:#fff;
    }

    .quality-content p {
        font-size: 15px;
        font-weight: 600;
       line-height: 1.8;
        margin: 0 auto;
        /* max-width: 950px;*/ /* ⬅️ Text wrap control */
    }
/*++++++++ Mission - Vision +++++++*/

.mission-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 70px 20px;
    flex-wrap: wrap;
    background-color: #E8E8E8;
}

.mission-box {
    background: #2f4357;
    color: #fff;
    width: 520px;
    padding: 18px;
    border-radius: 30px;
    display: flex;
    gap: 20px;
    opacity: 0;
    transform: scale(0.8);
    transition: transform 1.9s ease, opacity 1.9s ease;
}

.mission-icon {
    width: 80px;
    height: 60px;
    object-fit: contain;
}

.mission-content h3 {
    font-size: 22px;
    margin: 0 0 10px;
}

.mission-content p {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    max-height: 80px;
}

/* Starting animation position */
.slide-from-right {
    transform: translateX(200%) scale(0.8);
}

.slide-from-left {
    transform: translateX(-200%) scale(0.8);
}

/* Show when in view */
.show {
    transform: translateX(4%) scale(1);
    opacity: 1;
}
/*########################################## About Page ###############################################*/
.about-banner {
    width: 100%;
    overflow: hidden;
}

    .about-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
/*++++++++++++++++++++++++ All About Mehta International Eye Institute+++++++++++++++++++++++*/
/* Reset defaults */
.slider-container3, .slide-wrapper3, .slide-item3, .swiper-slide {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main container */
.mehta2 {
    width: 100%;
    background-color: #FFFFFF; /* Full-width background */
    padding: 0px 0; /* Vertical padding for spacing */
}
.main-container3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0px;
    max-width: 1300px;
    height:600px;
    margin: 20px auto;
    margin-top: 90px;
}

/* Slider */
.slider-container3 {
    width: 600px;
    height: 800px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

/* Wrapper fills full height */
.slide-wrapper3.swiper-wrapper {
    display: flex;
    height: 100%;
}

/* Each slide covers entire container space */
.slide-item3.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    margin-right: 0 !important;
}

/* Image inside slide */
.slide-item3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:35px;
   
}

/* Pagination styling */
.slider-pagination3.swiper-pagination {
    position: absolute;
    width: 30%;
    bottom: 10px;
    text-align: center;
    z-index: 10;
    padding-bottom:200px;
   
}

.slider-pagination3 .swiper-pagination-bullet {
    background: #bbb;
    opacity: 1;
}

.slider-pagination3 .swiper-pagination-bullet-active {
    background: #0056b3;
}

/* Navigation arrows */
.slider-button-next3.swiper-button-next,
.slider-button-prev3.swiper-button-prev {
    color: #fff;
    top: 36%;
    width: 10px;
    height: -141px;
    margin-top: -15px;
}

/* Right-hand content */
.content-box3 {
    flex-shrink: 0;
    max-width: 600px;
    max-height: 800px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.heading3 {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 22px;
    color: #374A5B;
}

.content-text3 p {
    margin-bottom: 1em;
    font-size: 15px;
    font-weight: 550;
    color: #445568;
}


/*+++++++++++++++++++++ Image 1 ++++++++++++++++++++*/
.about1-full {
    width: 100%;
    background-color: #FFFFFF; /* Full-width background */
    padding: 40px 0; /* Vertical padding for spacing */
}

.about1-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about1-text {
    flex: 1 1 60%;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #445568;
    text-align: justify;
}

    .about1-text p {
        margin-bottom: 1.4rem;
        font-size: 15px;
        font-weight: 500;
    }

.about1-image {
    flex: 0 0 35%;
}

    .about1-image img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        object-fit: cover;
        display: block;
    }

@media (max-width: 768px) {
    .about1-section {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .about1-image, .about1-text {
        flex: 1 1 100%;
    }
}
/*++++++++++++++++We commit +++++++++++++++*/
.We-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1250px; /* Container ki width ko badhaya gaya */
    margin: auto;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.We-image-container img {
    width: 550px; /* Image ki width ko badhaya gaya */
    height: 390px;
    border-radius: 4px;
}

.We-content {
    max-width: 650px; /* Content ki width ko badhaya gaya */
}

    .We-content p {
        font-weight: 600;
        line-height: 1.4;
        margin-top: 40px;
        color: #445568
    }

    .We-content strong {
        font-size: 1.1em;
        font-style: italic;
        display: block;
        margin: 15px 0 10px 0;
        margin-top: 25px;
        color: #374A5B
    }

    .We-content ul {
        list-style-type: disc;
        padding-left: 20px;
        font-weight: 400;
        margin-top: 25px;
        color: #445568
    }

        .We-content ul li {
            margin-bottom: 6px;
            font-size: 16px;
            font-weight: 500;
        }

/*+++++++++++++++++++meet the doctor +++++++++++++++++++*/
.doctor2-section {
    padding: 60px 10px;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
}

/* Inner Layout */
.doctor2-container {
    max-width: 1320px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Left Side - Image & Info */
.doctor2-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
    border-radius: 15px;
    padding: 20px;
    /*background: #ffffff;*/
}

    .doctor2-image img {
        /* width: 100%;
        max-width: 550px;*/
        max-width: 90%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 20px;
        border-style: solid;
        border-width: 8px 8px 8px 8px;
        border-color: #384B5C;
        border-radius: 45px 45px 45px 45px;
        box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }


    .doctor2-image h2 {
        font-size: 32px;
        margin-bottom: 10px;
        font-weight: 770;
        color: #384b5c;
    }

.degrees2 {
    font-size: 15px;
    font-weight: 700;
    color: #445568;
    line-height: 1.6;
    margin-bottom: 10px;
}

.position2 {
    /* font-size: 14px;
    margin-top: 10px;*/
    color: #384b5c;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.award2 {
    font-size: 18px;
    margin-top: 27px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #384b5c;
}

    .award2 strong {
        color: #0b3c60;
        font-weight: 700;
    }

/* Right Side - Text */
.doctor2-text2 {
    flex: 1;
    min-width: 300px;
    padding-top: 30px;
}

    .doctor2-text2 h3 {
        font-size: 35px;
        font-weight: 620;
        color: #2a3b4c;
        margin-bottom: 15px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* limit max width to parent */
        max-width: 100%;
        box-sizing: border-box;
    }

    .doctor2-text2 h4 {
        font-size: 26px;
        font-weight: 700;
        color: #2a3b4c;
        margin-bottom: 20px;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* limit max width to parent */
        max-width: 100%;
        box-sizing: border-box;
    }

        .doctor2-text2 h4 span {
            color: #2a3b4c;
        }

    .doctor2-text2 p {
        font-size: 15px;
        font-weight: 600;
        color: #2a3b4c;
        line-height: 31px;
        margin-bottom: 20px;
        max-width: 600px;
        text-align: justify;
    }



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

    .doctor2-text2 {
        padding-top: 0;
        text-align: center;
    }

        .doctor2-text2 p {
            margin: 0 auto;
        }
}

/*++++++++++++++++++++++ Awarded Padmashree By The President  ++++++++++++++++++*/
.milestone-section {
    max-width: 1150px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 15.5px;
    text-align:justify;
}

    .milestone-section h2 {
        font-size: 19px;
        font-weight: 650;
        text-transform: uppercase;
        margin-bottom: 20px;
        text-align: justify;
        color: #374A5B;
    }

    .milestone-section p {
        margin-bottom: 20px;
        color: #445568;
        font-size:15px;
        font-weight:500;
    }

.milestone-button {
    display: inline-block;
    background-color: #2F3E50;
    color: #fff;
    padding: 15px 20px;
    border: none;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 2px;
    margin-top: 20px;
    transition: 0.3s ease;
    margin-bottom: 60px;
}

    .milestone-button:hover {
        background-color: #B43041;
        cursor: pointer;
    }

    .milestone-button i {
        margin-left: 8px;
    }

/*000000000000000000000000000000000000000000 Services page section 000000000000000000000000000000000000000000*/
/*++++++ header image ++++*/
.services-banner {
    width: 100%;
    overflow: hidden;
}

    .services-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop2{
    display: block;
}

.mobile2 {
    display: none;
}
/*00000000000000000000000000000000000000000000000 Lasik page section 0000000000000000000000000000000000000*/
.lasik-banner {
    width: 100%;
    overflow: hidden;
}

    .lasik-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop3 {
    display: block;
}

.mobile3 {
    display: none;
}
/*++++++++++++what is lasik++++++++++++++*/
.container {
    display: flex;
    gap: 40px;
    max-width:1800px;
    height:auto;
    padding:0px 250px ;
    margin-top:80px;
   
}

.sidebar {
    width: 280px;
}

    .sidebar h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #374A5B;
    }

    .sidebar hr {
        margin: 10px 0;
        border: none;
        border-top: 2px solid #ccc;
        width:300px;
        position: relative;
        
    }

        .sidebar hr::before {
            content: "👁️";
            position: absolute;
            left: 50%;
            top: -12px;
            transform: translateX(-50%);
            background: #fff;
            padding: 0 10px;
            font-size: 16px;
        }

    .sidebar ul {
        list-style: none;
    }

        .sidebar ul li {
            margin: 10px 0;
           
        }

            .sidebar ul li a {
                text-decoration: none;
                color: #131d3b;
                font-size: 21px;
                font-weight: 600;
                border-bottom: 1px solid #ccc;
                width: 299px;
                display: inline-block;
                transition: 0.3s ease;
                line-height: 33px;
            }
    
                .sidebar ul li a:hover {
                    color: #B43041; /* Hover pe red color change */
                }

                .sidebar ul li a::before {
                    content: "👁️";
                    margin-right: 8px;
                }

    .sidebar img {
        width: 300px;
        margin-top: 20px;
        border-radius: 2px;
    }

.main {
    flex: 1;
    position: relative;
}

    .main h1 {
        font-size: 42px;
        font-weight: 700;
        color: #374A5B;
        margin-bottom: 20px;
    }

    .main .brochure-button {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #3b4652;
        color: #fff;
        padding: 10px 20px;
        font-size: 20px;
        font-weight:600;
        text-decoration: none;
        border-radius: 2px;
        transition: background-color 0.3s ease;
    }
        .main .brochure-button:hover {
            background-color: #B43041; /* Hover pe background red ho jayega */
        }
    .main p {
        margin-bottom: 20px;
        font-size: 15px;
        font-weight: 600;
        text-align: justify;
        line-height: 1.7;
        color: #445568;
    }

    .main .image-row {
        display: flex;
        gap: 20px;
        margin: 20px 0;
    }

    .main h2 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 25px;
        font-weight: 700;
        color: #374A5B
    }
.lasik-content-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.lasik-paragraph {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}

.lasik-image-container {
    flex: 1;
}

    .lasik-image-container img {
        width: 100%;
        border-radius: 5px;
        object-fit: contain;
    }


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

    .main .image-row {
        flex-direction: column;
    }

    .lasik-content-row {
        flex-direction: column;
    } 

    .main .brochure-button {
        position: static;
        display: inline-block;
        margin-bottom: 20px;
    }
}
/*+++++++++++++ Premium LASIK++++++++++++++ */
.premium-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease,;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transform: translateY(100px);
    opacity: 0;
    width: 320px;
    height: 400px;
}


    .premium-card img {
        width: 310px;
        height: auto;
        object-fit: cover;
        transition: transform 0.2s ease;
        border-radius: 50px;
        padding: 20px;
    }
    .premium-card:hover img {
        transform: scale(1.1);
    }

.premium-section {
    padding: 60px 20px;
    text-align: center;
    margin-left:200px;
    /* background-color: #ECECEC; */
    max-width: 2000px;
}
.premium-columns {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 2000px;
    margin: 0 auto;
}

.premium-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.premium-card p {
    font-size: 26px;
    font-weight: bold;
    color: #2d3e50;
    padding: 15px 10px;
    margin: 0;
   
}
.premium-card a {
    text-decoration:none;
}
/*+++++++++++++++++++++++++++++++++ premium lasik aspx page section +++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++ left right section++++++*/
.lasik3-container {
    display: flex;
    gap: 80px;
    padding: 40px;
    max-width: 1400px;
    margin-left: 230px;
    margin-top: 80px;
}

.lasik {
    width: 300px;
}

    .lasik h2 {
        font-size: 19px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #445568;
    }

.lasik-card {
    width: 320px;
    height: 400px;
    display: block;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #1a1a1a;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.7s ease;
    text-align: center;
    padding-bottom: 10px;
}

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

    .lasik-card img {
        width: 310px;
        height: auto;
        object-fit: cover;
        transition: transform 0.2s ease;
        border-radius: 50px;
        padding: 20px;
    }

    .lasik-card:hover img {
        transform: scale(1.05); /* Zoom slightly on hover */
    }

    .lasik-card p {
        font-weight: bold;
        font-size: 26px;
        color: #2c3e50;
        padding-top: 8px;
    }


.lasik-content {
    flex: 1;
    position: relative;
}

.brochure-button {
    top: 0;
    right: 0;
    background-color: #3b4652;
    color: #fff;
    padding: 12px 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .brochure-button:hover {
        background-color: #B43041;
    }

.lasik-content h1 {
    margin-top: 0;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #374A5B;
}

.lasik-content p {
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: justify;
    margin-bottom: 22px;
    color: #445568;
}

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

    .brochure-button {
        position: static;
        margin-bottom: 20px;
    }

    .lasik {
        width: 100%;
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++ relex-smile ++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* relex smile header image */
.relex-banner {
    width: 100%;
    overflow: hidden;
}

    .relex-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop4 {
    display: block;
}

.mobile4 {
    display: none;
}
/*+++++++++++++++++++ text or pdf section ++++++++++++++*/
.relex-container {
    max-width:1250px;
    margin-left:340px;
    margin-top:40px;
}
.relex-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    padding: 20px 40px;
}

.relex-content h1 {
    font-size: 45px;
    margin: 0;
    font-weight: 700;
    color: #374A5B;
}

.relex-content h2 {
    font-size: 23px;
    /*margin: 10px 0 0*/
    font-weight: 600;
    color: #374A5B;
}

.relex-content h3 {
    font-size: 17px;
    margin: 5px 0 0;
    font-weight: 500;
    color: #374A5B;
}

.relex-brochure-btn {
    background-color: #3b4652;
    color: #fff;
    text-decoration: none;
    padding: 13px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 0;
    transition: background-color 0.3s ease;
}

    .relex-brochure-btn:hover {
        background-color: #B43041;
    }
/*++++++++++++++++ image and text sections ++++++++++++++*/

.visumax {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 40px;
    max-width:1250px;
    margin:auto;
}

    .visumax .image-side {
        flex: 1;
    }

        .visumax .image-side img {
            max-width: 440px;  
            border-radius: 0px;
           /* box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
        }

    .visumax.text-side {
        flex: 2;
    }

        .visumax .text-side h2 {
            margin: 0;
            font-size: 18px;
            text-transform: uppercase;
            color: #374A5B;
            margin-top: 12px;
            text-align:justify;
        }

        .visumax .text-side h3 {
            margin: 10px 0;
            font-size: 16px;
            color: #374A5B;
            font-weight: bold;
        }

        .visumax .text-side p {
            margin: 25px 0;
            font-size: 15px;
            font-weight: 500;
            text-align: justify;
            line-height: 1.7;
            color: #374A5B;
        }

/*+++++++++++++++++++ visu max right image ++++++++++++++++*/
.visu-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin:auto;
}

.visu-text {
    /*flex: 1;*/
    color: #1e324d;
}

    .visu-text h2 {
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        margin-top: 90px;
        color: #374A5B;
    }

    .visu-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.8;
        color: #374A5B;
        text-align: justify;
    }

.visu-image {
    flex: 1;
/*    text-align: right;*/
}

    .visu-image img {
        max-width: 370px;
        border-radius: 0px;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
    }

@media (max-width: 768px) {
    .visu-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .visu-image {
        text-align: center;
    }
}
/*++++++++++++++++ Precise and Sensitive treatment ++++++++++++++*/
.Precise-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin:auto;
}

.Precise-image {
    flex: 1;
}

    .Precise-image img {
        max-width: 400px;
        border-radius: 0px;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
    }

/*.Precise-text {
    flex: 1.3;
}*/

.Precise-text h2 {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 40px;
    color: #374A5B;
}

.Precise-text p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    color: #374A5B;
    text-align: justify;
}

@media (max-width: 768px) {
    .Precise-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .Precise-text {
        text-align: center;
    }
}
/*++++++++++++++++++ Advantages ++++++++++++++++++++*/
.advantage-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin:auto;
}

.advantage-text {
    flex: 1.2;
}

    .advantage-text h2 {
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        margin-top: 50px;
        color: #374A5B;
    }

    .advantage-text ul {
        list-style-type: disc;
        padding-left: 20px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        text-align: justify;
        color: #374A5B;
    }

.advantage-image {
    flex: 1;
}

    .advantage-image img {
        max-width: 90%;
        height: auto;
        border-radius: 0px;
       /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);*/
    }

@media (max-width: 768px) {
    .advantage-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .advantage-text ul {
        text-align: left;
    }

    .advantage-image {
        text-align: center;
    }
}

/*+++++++++++++++++++++ FAQ containers sectionxs ++++++++++++++++*/
.faq-container {
    max-width: 1250px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #1e324d;
}

.faq-title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #374A5B;
}

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

.faq-question {
    width: 100%;
    background: none;
    color: #374A5B;
    border: none;
    padding: 15px;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

    .faq-question:hover {
        background-color: #f9f9f9;
        color: #374A5B;
    }

    .faq-question .arrow {
        display: inline-block;
        transition: transform 0.3s ease;
        font-size: 13px;
    }

.faq-item.active .faq-question .arrow {
      transform: rotate(90deg);
   
}

.faq-answer {
    display: none;
    padding: 0 15px 15px;
    font-size: 15px;
    font-weight: 600;
    color: #374A5B;
    text-align: justify;
    line-height: 1.5;
    margin-top: 15px;
    margin-bottom: 15px;
}

.faq-item.active .faq-answer {
    display: block;
    
}

/*0000000000000000000000000000000000000000000000 cataract 000000000000000000000000000000000000000000*/
/* relex smile header image */
.cataract-banner {
    width: 100%;
    overflow: hidden;
}

    .cataract-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop5 {
    display: block;
}

.mobile5 {
    display: none;
}

/*+++++++++++++++++++++++++++++ cataract 222 +++++++++++++++++++++++*/
.cataract-section {
    max-width: 1250px;
    margin:auto;
    margin-top: 90px;
    padding: 0 20px;
}

.cataract-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cataract-title {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    flex: 1 1 auto;
    margin: 0;
    color: #384B5C;
}

.brochure-btn {
    display: inline-flex;
    align-items: center;
    background-color: #384B5C; /* लाल जैसा */
    color: #ffffff;
    padding: 12px 34px;
    border: none;
    border-radius: 0px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

    .brochure-btn:hover {
        background-color: #B43041;
       
    }

    .brochure-btn .icon {
        margin-left: 8px;
        display: inline-flex;
        align-items: center;
    }

.cataract-info {
    font-size: 15px;
    font-weight: 500;
    word-spacing: 1.7px;
    line-height: 1.7;
    margin-top: 20px;
    color: #384B5C;
}

@media (max-width: 600px) {
    .cataract-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-btn {
        margin-top: 10px;
    }
}

/*+++++++++++++++++ What is the lens? ++++++++++++++*/
.lens-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin:auto;
}

.lens-text {
    /*flex: 1;*/
    color: #1e324d;
}

    .lens-text h2 {
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 20px;
        margin-top: 60px;
        color: #374A5B;
    }

    .lens-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.8;
        color: #374A5B;
        text-align: justify;
    }

.lens-image {
    flex: 1;
    /*    text-align: right;*/
}

    .lens-image img {
        max-width: 590px;
        border-radius: 0px;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
    }

@media (max-width: 768px) {
    .lens-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .lens-image {
        text-align: center;
    }
}

/*+++++++++++++++++++ What are the symptoms of a cataract? ++++++++++++++++*/

.symptoms-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin-left: 350px;
}

.symptoms-image {
    flex: 1;
}

    .symptoms-image img {
        max-width: 470px;
        border-radius: 0px;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
    }

/*.Precise-text {
    flex: 1.3;
}*/

.symptoms-text h2 {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 40px;
    color: #374A5B;
}

.symptoms-text p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    color: #374A5B;
    text-align: justify;
}

@media (max-width: 768px) {
    .symptoms-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .symptoms-text {
        text-align: center;
    }
}

/*+++++++++++++++++++++++++++ The most frequent symptoms of Cataract are ++++++++++++++++++++*/
.frequent {
    max-width: 1250px;
    width: 90%;
    margin: 0px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
}

    .frequent h2 {
        margin-bottom: 30px;
        margin-top: 30px;
        font-weight: revert;
        font-size: 1.9em;
        color: #374A5B;
    }

    .frequent ul {
        padding-left: 20px;
    }

        .frequent ul li {
            margin-bottom: 12px;
            font-weight: 500;
            color: #374A5B;
            line-height: 1.8;
        }
@media (max-width: 768px) {
    .frequent-wrapper {
        flex-direction: column;
    }
}

/*+++++++++++++++++++++++ How is a cataract detected and fully evaluated? ++++++++++++++++++*/
.evaluated-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 40px;
    gap: 50px;
    max-width: 1250px;
    margin:auto;
}

.evaluated-image {
    flex: 1;
}

    .evaluated-image img {
        max-width: 560px;
        border-radius: 0px;
        /*box-shadow: 0 4px 12px rgba(0,0,0,0.5);*/
    }

/*.Precise-text {
    flex: 1.3;
}*/

.evaluated-text h2 {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 10px;
    color: #374A5B;
}

.evaluated-text p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    color: #374A5B;
    text-align: justify;
}

@media (max-width: 768px) {
    .evaluated-container {
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }

    .evaluated-text {
        text-align: center;
    }
}

/*++++++++++++++++++++ Tonometry: ++++++++++++++++++*/
.Tonometry {
    max-width: 1250px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
   /* box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
}

    .Tonometry ul {
        padding-left: 20px;
        margin-top: 0;
    }

        .Tonometry ul li {
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: 500;
            color: #374A5B;
            line-height: 1.8;
        }

    .Tonometry p {
        margin-top: 20px;
        color: #374A5B;
        font-weight: 500;
        line-height: 1.8;
    }

/*++++++++++++ Are there different types of cataract surgery? ++++++++++*/
.container7 {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto; /* centers the container horizontally */
    overflow: hidden;
    background-color: #fff;
    padding: 20px 20px;
    box-sizing: border-box;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

h1 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #374A5B;
}

.intro {
    margin-bottom: 30px;
    font-weight: 500;
    color: #374A5B;
    line-height: 1.8;
}

h2 {
    font-size: 19px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #374A5B;
}

p7 {
    margin-bottom: 10px;
    font-weight: 500;
    color: #374A5B;
    line-height: 1.8;
}


p6 {
    margin-bottom: 8px;
    font-weight: 500;
    color: #374A5B;
    line-height: 1.8;
    display: block;
}

/*+++++++++++What does it do? +++++++++*/
.why {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 35px;
}

/* Main Heading */
.why-heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top:17px;
    
}

/*+++++++++++++Cataract removal system+++++++++++++*/
.phoci-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


.phoci-text {
    flex: 1 1 0;
    min-width: 0; 
}

    .phoci-text h2 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .phoci-text ul {
        margin-bottom: 15px;
        padding-left: 20px;
        margin-top:20px;
    }

        .phoci-text ul li {
            margin-bottom: 8px;
            line-height: 1.6;
            font-size: 15px;
            font-weight: 600;
            color: #445568;
            text-align: justify;
        }

    .phoci-text p9 {
        margin-bottom: 25px;
        line-height: 1.6;
        color: #445568;
    }
    .phoci-text p {
        margin-bottom: 15px;
        line-height: 1.6;
        color: #445568;
        font-weight:600;
        text-align:justify;
        margin-top:20px;
    }


.phoci-image {
    flex-shrink: 0;
    width: 442px;
    
}

    .phoci-image img {
        display: block;
        width: 418px;
        height: auto;
        margin-top: 70px;
    }

/*+++++++++++ one image section+++++++++++*/
.step {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center; 
    padding: 0 20px;
}

.step-image {
    width: 100%;
    max-width: 800px; 
    height: auto;
    display: inline-block;
    margin-right: 421px;
    margin-top:30px;
}

/*+++++++++++++++++ What happens before surgery? +++++++++++++*/
.surgery {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
}

.surgery-heading {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #374A5B;
}

.surgery-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    color: #445871;
    text-align:justify;
}

/*+++++++++++++++++++++++++ What happens during surgery? ++++++++++++++++++++++*/
.during-container {
    max-width: 1250px;
    margin: 0px auto;
    padding: 0 20px;
}

.during-heading {
    font-size: 26px;
    font-weight: 700;
    color: #374A5B;
    margin-bottom: 20px;
}

.during-paragraph {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    color: #445871;
    margin-bottom: 20px;
    text-align:justify;
}

    .during-paragraph strong {
        font-weight: 700;
    }

/*++++++++++++++++++++What happens after surgery?+++++++++++++++++++++*/
.after {
    max-width: 1250px;
    margin: 0 auto;
    padding: 5px 20px;
    color: #2e3f50;
}

    .after h2 {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .after ul {
        padding-left: 20px;
    }

        .after ul li {
            margin-bottom: 7px;
            margin-left: 40px;
            font-size: 15px;
            line-height: 1.6;
            font-weight: 600;
            text-align: justify;
            color: #445871;
        }

/*++++++++++++++++++++ What type of IOL should I implant in the eye? +++++++++++++++*/
.eye {
    width: 100%;
    background-color: #ffffff;
    padding: 50px 0;
    font-family: 'Arial', sans-serif;
}

.eye-container {
    width: 1250px;
    margin: 0 337px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /*gap: 40px;*/
}

.eye-text {
    flex: 1;
    color: #1e2d3b;
    font-size: 15px;
    line-height: 1.8;
}

    .eye-text h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #374A5B;
    }

    .eye-text p {
        margin-bottom: 20px;
        text-align: justify;
        font-weight: 600;
        color: #445568;
    }

.eye-img {
    flex: 0 0 280px;
    text-align: center;
}

    .eye-img img {
        width: 80%;
        max-width: 400px;
        height: auto;
    }

.caption {
    font-size: 14px;
    margin-top: 10px;
    color: #1e2d3b;
    font-weight: bold;
}
/*++++++++++++++++++++advantages and disadvantages?+++++++++++++++++++*/
.disadvantage {
    max-width: 1250px;
    margin: 0 auto;
    margin-top: -66px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.disadvantage-heading {
    font-size: 22px;
    font-weight: bold;
    color: #374A5B;
    margin-bottom: 39px;
    margin-left: -26px;
}

.disadvantage-body {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

.disadvantage-image {
    flex: 0 0 400px;
    text-align: center;
}

    .disadvantage-image img {
        width: 120%;
        max-width: 430px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

.disadvantage-caption {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    color: #23374d;
}

.disadvantage-text {
    flex: 1;
    color: #445568;
}

    .disadvantage-text p {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: justify;
        font-weight: 600;
    }

/*++++++++++++++ Soft Txt ++++++++++++++*/
.soft {
    width: 100%;
    background-color: #ffffff;
    padding: 40px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.soft-container {
    max-width: 1250px;
    margin: auto;
    margin-top: -47px;
    padding: 0 20px; 
    box-sizing: border-box;
}

.soft-paragraph {
    color: #445568;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    text-align:justify;
    margin-bottom: 20px;
    overflow-wrap: break-word; 
}
.soft-button {
    display: inline-flex;
    align-items: center;
    background-color: #384B5C; /* लाल जैसा */
    color: #ffffff;
    padding: 15px 39px;
    border: none;
    border-radius: 0px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

    .soft-button:hover {
        background-color: #B43041;
    }

   
    .soft-button:focus {
        outline: 2px solid #ff0000;
        outline-offset: 2px;
    }

    .soft-button .icon {
        margin-left: 8px;
        display: inline-flex;
        align-items: center;
    }

/*++++++++++++++ Variables ++++++++++++++*/
.variable-container {
    width: 1250px;
    margin: auto;
    padding: 0px 0;
    margin:auto;
}

.variable-heading {
    font-size: 20px;
    font-weight: 700;
    color: #374A5B;
    margin-bottom: 15px;
}

.variable-text {
    font-size: 15px;
    color: #23374d;
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: justify;
}

/*++++++++++++++++++ WHAT ARE THE RISKS OF CATARACT SURGERY? +++++++++++++++*/
.risks {
    max-width: 1250px;
    margin: 35px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0px;
    padding: 0 20px;
}

.risks-text {
    flex: 1;
}

    .risks-text h2 {
        color: #374A5B;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 25px;
    }

    .risks-text p {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.8;
        color: #23374d;
        margin-bottom: 20px;
        text-align:justify;
    }

.risks-image {
    flex: 1;
    text-align: right;
}

    .risks-image img {
        max-width: 92%;
        height: auto;
        display: block;
        margin-top: 40px;
        margin-left: 50px;
    }

/*+++++++++++++++++LASIK After Cataract Removal++++++++++++++*/
.lasik_section {
    background-color: #ffffff;
    padding: 40px 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.lasik_heading {
    max-width: 1250px;
    margin: 0 auto 30px;
    padding: 0 20px;
}

    .lasik_heading h2 {
        font-size: 24px;
        color: #2c3e50;
        font-weight: bold;
        margin-left: 398px;
        text-transform: uppercase;
        line-height: 1.2;
        margin-bottom: -29px;
    }

.lasik_container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    box-sizing: border-box;
}

.lasik_image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
}

.lasik_content {
    flex: 1;
    color: #2c3e50;
    margin-top: 20px;
}

.lasik_paragraph {
    font-size: 16px;
    font-weight:600;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align:justify;
}
/*+++++++++++++++++++ What if I have other eye conditions and need cataract surgery?++++++++++++++++++*/
.my-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center; 
}


    .my-container .heading {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        word-spacing: 1px;
        margin-top: -79px;
        margin-bottom: 10px;
        text-align: justify;
        line-height: 29px;
    }


    .my-container .subheading {
        font-size: 20px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 24px;
        margin-top: 24px;
        margin-right: 498px;
        text-transform: uppercase;
    }

    
    .my-container .body-text {
        font-size: 16px;
        font-weight:600;
        line-height: 1.6;
        color: #2c3e50;
        margin-bottom: 30px;
        text-align:justify;
    }

.brochureee-button {
    display: inline-flex;
    align-items: center;
    background-color: #384B5C; 
    color: #ffffff;
    padding: 15px 33px;
    margin-right:786px;
    border: none;
    border-radius: 0px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

    .brochureee-button:hover {
        background-color: #B43041;
    }

   
    .brochureee-button:focus {
        outline: 2px solid #ff0000;
        outline-offset: 2px;
    }

    .brochureee-button .icon {
        margin-left: 8px;
        display: inline-flex;
        align-items: center;
    }

/*00000000000000000000000000000000000 Glaucoma page section 0000000000000000000000000000000000*/

/*Glaucoma header image */
.glaucoma-banner {
    width: 100%;
    overflow: hidden;
}

    .glaucoma-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop6 {
    display: block;
}

.mobile6 {
    display: none;
}
    /*+++++++++++++++++++ What is Glaucoma? ++++++++++++++++++++*/
    .glaucoma-section {
    background-color: #fafafa;
    padding: 37px 0;
}

.glaucoma-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}

.glaucoma-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .glaucoma-header h2 {
        font-size: 41px;
        font-weight: 700;
        color: #384B5C;
        margin: 0;
    }

.glaucoma-btn {
    display: inline-flex;
    align-items: center;
    background-color: #384B5C; 
    color: #ffffff;
    padding: 12px 34px;
    border: none;
    border-radius: 0px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

    .glaucoma-btn:hover {
        background-color: #B43041;
    }

    .glaucoma-btn .icon {
        margin-left: 8px;
        display: inline-flex;
        align-items: center;
    }

.glaucoma-content p {
    font-size: 15px;
    font-weight: 500;
    color: #384B5C;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}
/*+++++++++++++++++ Symptoms of Glaucoma +++++++++++++++++*/
.symptoms-section {
    padding: 0px 20px;
    background-color: #fafafa;
}

.symptoms-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

    
    .symptoms-container.flipped {
        flex-direction: row-reverse;
    }

.symptoms-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
    display: block;
}

.symptoms-text {
    flex: 1;
}

    .symptoms-text h2 {
        font-size: 30px;
        font-weight: 700;
        color: #384B5C;
        margin-top: 54px;
        margin-bottom: 15px;
    }

    .symptoms-text p {
        font-size: 18px;
        color: #384B5C;
        margin: 0 0 10px;
    }

    .symptoms-text ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .symptoms-text ul li {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.6;
            margin-bottom: 8px;
            position: relative;
            padding-left: 0px;
            color: #384B5C;
        }

/*+++++++++++++++++++++++ More detailed information about Glaucoma +++++++++++++++++++++*/

.comparison {
    width: 100%;
    max-width: 1250px;
    margin: 70px auto;
    text-align: center;
}

    .comparison h2 {
        margin-bottom: 16px;
        margin-right: 442px;
        font-size: 27px;
        color: #374A5B;
        text-transform: uppercase;
    }

    .comparison img {
        width: 100%;
        height: auto;
        display: block;
    }

/*+++++++++++++++++++++++++++ Glaucoma - “The silent thief of Sight” +++++++++++++++++++++++++++*/
.silent-section {
    max-width: 1250px;
    width: 100%;
    margin: 40px auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.silent-image {
    flex: 1;
}

    .silent-image img {
        width: 118%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

.silent-text {
    flex: 1.2;
}

    .silent-text h2 {
        font-size: 24px;
        text-transform: uppercase;
        color: #374A5B;
        margin-left: 103px;
        margin-bottom: 16px;
    }

    .silent-text p {
        font-size: 15px;
        color: #374A5B;
        text-align: justify;
        margin-bottom: 37px;
        word-spacing: 1px;
        line-height: 27px;
        margin-left: 107px;
        font-weight: 600;
    }

/* Responsive mobile-friendly tweaks */
@media (max-width: 768px) {
    .silent-section {
        flex-direction: column;
        gap: 20px;
    }

    .silent-text h2 {
        font-size: 1.5em;
    }
}

/*++++++++++++++++++The human eye has a part called the++++++++++++++++++++++++*/
.human-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
    padding-left: 2px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin-top: -37px;
}

.human-heading {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.human-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-size: 15px;
    font-weight: 600;
    word-spacing: 1px;
    color: #374A5B;
    line-height:27px;
}

/*+++++++++++++++++++++++++ Glaucoma there for must consist of 3 basic findings +++++++++++++++++++*/
.consist-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.consist-text {
    flex: 1 1 500px;
}

.consist-heading {
    font-size: 26px;
    font-weight:600;
    margin-bottom: 0.5em;
    text-transform:uppercase;
}

.consist-list {
    margin: 0 0 1em 1.2em;
    font-size: 15px;
    color: #445568;
    font-weight: 600;
}

.consist-paragraph {
    margin-top: 19px;
    text-align: justify;
    font-size: 15px;
    font-weight: 600;
    color: #445568;
    line-height: 27px;
}

.consist-image {
    flex: 1 1 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .consist-image img {
        max-width: 100%;
        height: auto;
        border: 1px solid #ccc;
    }

@media (max-width: 800px) {
    .consist-container {
        flex-direction: column;
    }

    .consist-image,
    .consist-text {
        flex: 1 1 auto;
    }
}

/*++++++++++++++++++++++++ The optic nerve changes today can be measured +++++++++*/
.machine-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.machine-text {
    flex: 1 1 600px;
}

.machine-heading {
    font-size: 1.6em;
    margin-bottom: 0.8em;
}

.machine-paragraph {
    margin-bottom: 1em;
    color: #445568;
    font-size: 15px;
    font-weight: 600;
    word-spacing: 2px;
    line-height: 27px;
    text-align:justify;
}

/*++++++++++++++++Diagnosis... State of the Art!++++++++++++++*/

.Art-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.Art-image {
    flex: 0 0 45%; /* image takes 45% of container width */
    position: relative;
    overflow: visible;
}

    .Art-image img {
        width: 100%; /* overflow effect */
        height: auto;
        border: 1px solid #ccc;
        margin-right: -60px; /* adjust as needed */
        display: block;
    }

.Art-text {
    flex: 1 1 55%;
    padding-left: 40px;
    box-sizing: border-box;
}

.Art-heading {
    font-size: 1.8em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.Art-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-weight: 600;
    font-size: 15px;
    color: #445568;
    line-height: 25px;
    word-spacing: 1px;
}



/*/*++++++++++++++++++++++ The Humphrey Computerised Field analyzer +++++++++++++++++++*/
.Humphrey-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.Humphrey-image {
    flex: 0 0 45%; 
    position: relative;
    overflow: visible;
}

    .Humphrey-image img {
        width: 100%;
        height: auto;
        margin-right: -60px;
        display: block;
        margin-left: 43px;
    }

.Humphrey-text {
    flex: 1 1 55%;
    padding-left: 40px;
    box-sizing: border-box;
    margin-top: 132px;
    margin-left: -45px;
    color: #445568;
}

.Humphrey-heading {
    font-size:22px;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.Humphrey-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-weight: 600;
    font-size: 15px;
    color: #445568;
    line-height: 25px;
    word-spacing: 1px;
}

/*+++++++++++ Intraocular pressure evaluation +++++++++++*/
.pressure-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.pressure-image {
    flex: 0 0 45%;
    position: relative;
    overflow: visible;
}

    .pressure-image img {
        width: 75%; 
        height: auto;
        margin-right: -60px; 
        display: block;
    }

.pressure-text {
    flex: 1 1 55%;
    padding-left: 40px;
    box-sizing: border-box;
    margin-top: 72px;
}

.pressure-heading {
    font-size: 23px;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    margin-left: -50px;
}

.pressure-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-weight: 600;
    font-size: 15px;
    color: #445568;
    line-height: 25px;
    word-spacing: 1px;
    margin-left: -50px;
}

/*+++++++++++++ Goldman Applanation Slit Lamp Biomicroscope mounted Tonometer +++++++++++++*/
.goldman-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.goldman-image {
    flex: 0 0 45%; /* image takes 45% of container width */
    position: relative;
    overflow: visible;
}

    .goldman-image img {
        width: 100%; /* overflow effect */
        height: auto;
        /*border: 1px solid #ccc;*/
        margin-right: -60px; /* adjust as needed */
        display: block;
    }

.goldman-text {
    flex: 1 1 55%;
    padding-left: 40px;
    box-sizing: border-box;
    margin-left: -28px;
}

.goldman-heading {
    font-size: 22px;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    margin-top: 151px;
}

.goldman-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-weight: 600;
    font-size: 15px;
    color: #445568;
    line-height: 25px;
    word-spacing: 1px;
}

/*++++++++++++++ Schiotz Tonometry ++++++++++*/
.tonometry-container {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.tonometry-image {
    flex: 0 0 45%; /* image takes 45% of container width */
    position: relative;
    overflow: visible;
}

    .tonometry-image img {
        width: 100%; /* overflow effect */
        height: auto;
        border: 1px solid #ccc;
        margin-right: -60px; /* adjust as needed */
        display: block;
    }

.tonometry-text {
    flex: 1 1 55%;
    padding-left: 40px;
    box-sizing: border-box;
}

.tonometry-heading {
    font-size: 1.8em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    margin-top: 113px;
}

.tonometry-paragraph {
    margin-bottom: 1em;
    text-align: justify;
    font-weight: 600;
    font-size: 15px;
    color: #445568;
    line-height: 25px;
    word-spacing: 1px;
}

/*+++++++++++++Treatment for Glaucoma+++++++++++*/
.treatment-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    box-sizing: border-box;
}

.treatment-heading {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
}

.treatment-subheading {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #374A5B;
}

.treatment-paragraph {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 27px;
    text-align: justify;
    font-weight: 600;
    color: #445568;
}

/*0000000000000000000000000000000000 sirius-lasik-laser 0000000000000000000000000000*/
.sirius {
    width: 1350px;
    margin: 30px auto;
    display: flex;
}

    .sirius .sirius-sidebar {
        width: 30%;
        /*background-color: #f9f9f9;*/
        padding: 20px;
       /* border-right: 1px solid #ddd;*/
    }

        .sirius .sirius-sidebar h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #131d3b;
        }

        .sirius .sirius-sidebar hr {
            border: none;
            border-top: 2px solid #ccc;
            margin: 10px 0 20px;
            position: relative;
        }

            .sirius .sirius-sidebar hr::before {
                content: "👁️";
                position: absolute;
                left: 50%;
                top: -12px;
                transform: translateX(-50%);
                background-color: #f9f9f9;
                padding: 0 10px;
                font-size: 16px;
            }

        .sirius .sirius-sidebar ul {
            list-style: none;
        }

            .sirius .sirius-sidebar ul li {
                margin: 10px 0;
            }

                .sirius .sirius-sidebar ul li a {
                    text-decoration: none;
                    color: #131d3b;
                    font-size: 21px;
                    font-weight: 600;
                    border-bottom: 1px solid #ccc;
                    width: 366px;
                    display: inline-block;
                    transition: 0.3s ease;
                    line-height: 33px;
                }

                    .sirius .sirius-sidebar ul li a:hover {
                        color: #B43041;
                    }

                    .sirius .sirius-sidebar ul li a::before {
                        content: "👁️";
                        margin-right: 8px;
                    }

        .sirius .sirius-sidebar img {
            margin-top: 30px;
            width: 105%;
           /* border-radius: 4px;*/
        }

    .sirius .sirius-content {
        width: 70%;
        padding: 20px;
    }

        .sirius .sirius-content img {
            width: 106%;
            /*border-radius: 5px;*/
            margin-bottom: 20px;
        }

        .sirius .sirius-content h2 {
            font-size: 20px;
            color: #374A5B;
            margin-bottom: 10px;
            text-transform:uppercase;
        }

        .sirius .sirius-content p {
            font-size: 15px;
            font-weight: 500;
            line-height: 27px;
            color: #374A5B;
            margin-bottom: 15px;
            text-align:justify;
        }

    .sirius .highlight {
        font-weight: bold;
        color: #374A5B;
    }

.sirius-download-btn {
    display: inline-block;
    background-color: #3b4652; 
    color: white;
    font-weight: 600;
    font-size: 20px;
    padding: 12px 32px;
    margin-top: 15px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    position: relative;
}

    .sirius-download-btn:hover {  
        background-color: #B43041;
    }

/*00000000000000000000000000000000000 vitreoretinal 0000000000000000000000000000000000*/
/*++++++++ vitreoretinal banner image ++++++++*/
.vitre-banner {
    width: 100%;
    overflow: hidden;
}

    .vitre-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop7 {
    display: block;
}

.mobile7 {
    display: none;
}
    /*+++++++++++++ We are Specialized Retina & Vitreous +++++++++++++*/
    .vita-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.vita-heading {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-right: 689px;
    color: #374A5B;
}

.vita-subheading {
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: #374A5B;
    margin-bottom: 100px;
    margin-right: 134px;
}

.vita-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.vita-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .vita-image img {
        width: 85%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: 15px;
    }

.vita-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .vita-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -85px;
        color: #445568;
    }

    .vita-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -85px;
    }

/*++++++++++++++++++++ Doubled Freq EYELITE +++++++++++++++++++++++*/
.Double-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.Double-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.Double-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .Double-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .Double-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

.Double-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .Double-image img {
        width: 100%;
        height: auto;
        display: block;
        margin:0;
    }

/*++++++++++++++++++++++ ACCURUS Vitreoretinal Surgical System Alcon (USA) ++++++++++++++++++*/
.accurus-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.accurus-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.accurus-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .accurus-image img {
        width: 85%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.accurus-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .accurus-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top:51px;
    }

    .accurus-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }

/*+++++++++++++++++ Red Diode laser with endo laser capability ++++++++++++++++*/
.red-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.red-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.red-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 157px;
}

    .red-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
        margin-left: 78px;
    }

    .red-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
        margin-left: 76px;
    }

.red-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .red-image img {
        width: 65%;
        height: auto;
        display: block;
        margin: 0;
        margin-left: 106px;
    }

/*000000000000000000000000000 cornea 00000000000000000000000000000000*/

/*++++++++ cornea banner image ++++++++*/
.cornea-banner {
    width: 100%;
    overflow: hidden;
}

    .cornea-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop8 {
    display: block;
}

.mobile8 {
    display: none;
}
/*++++++++++++++++ cornes title  +++++++++++++++*/
.center-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100%;
    background-color: #fff; 
    text-transform:uppercase;
}


.centered-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top:70px;
   
}

/*++++++++++++++ DICON Corneal Topographer (USA): +++++++++++++*/
.dicon-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.dicon-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.dicon-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .dicon-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.dicon-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .dicon-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .dicon-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }

/*++++++++++++++++++++ Opticon “Scout” Arc Step Corneal Topo-Analyzer ++++++++++++++++*/
.opti-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.opti-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.opti-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .opti-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .opti-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

.opti-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .opti-image img {
        width: 77%;
        height: auto;
        display: block;
        margin: 0;
        margin-left: 78px;
    }

/*+++++++++++++++++ Specular Microscopy (Topcon Japan): +++++++++++++*/
.specu-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.specu-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.specu-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .specu-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.specu-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .specu-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .specu-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }


/*00000000000000000000000000000000000  SQUINT 0000000000000000000000000000000000000*/
/*++++++++ squint banner image ++++++++*/
.squint-banner {
    width: 100%;
    overflow: hidden;
}

    .squint-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop9 {
    display: block;
}

.mobile9 {
    display: none;
}


/*++++++++++++++ squint TITLE ++++++++++++++*/
.squ-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.squ-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}

/*++++++++++++++ well-trained Strabsmologists ++++++++++++*/
.well-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.well-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.well-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .well-image img {
        width: 110%;
        height: auto;
        display: block;
        margin-top: -34px;
        margin-left: -45px;
    }

.well-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .well-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .well-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 13px;
        margin-bottom: 18px;
    }

/*++++++++++++++++++++++ Synaptophore (Clement Clark. UK) +++++++++++++++++++*/
.clark-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 65px;
}

.clark-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.clark-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .clark-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .clark-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

.clark-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .clark-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-left: 63px;
    }

/*+++++++++++++++++++++++ Maddox Wing (Clement Clark. UK) +++++++++++++++++++++++*/
.wing-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.wing-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.wing-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .wing-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.wing-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .wing-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .wing-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }

/*++++++++++++ RAF Binocular Rule (Clement Clark. UK) +++++++++++++*/
.Bino-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.Bino-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.Bino-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .Bino-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .Bino-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

.Bino-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .Bino-image img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

/*+++++++++++++++++++++ Cam Stimulator ++++++++++++++++++++++*/
.cam-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.cam-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.cam-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .cam-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.cam-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .cam-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .cam-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }

/*+++++++++++++++++++++ Tensiometer (Haag Street Switzerland) +++++++++++++++++*/

.tens-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-left: 61px;
    margin-top: -78px;
}

.tens-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.tens-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .tens-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .tens-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

/*0000000000000000000000000000000 paediatric-services 0000000000000000000000000000*/

/*++++++++  paediatric banner image ++++++++*/
.p1-banner {
    width: 100%;
    overflow: hidden;
}

    .p1-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop10 {
    display: block;
}

.mobile10 {
    display: none;
}

/*++++++++++++++  paediatric TITLE ++++++++++++++*/
.paed-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.paed-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}
/*++++++++++++++++++++++++These services focus providing a range +++++++++++++++++++++++*/
.range-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.range-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.range-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .range-image img {
        width: 116%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.range-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .range-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .range-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
    }
/*+++++++++++++++++++++++++ Clinical Services: Mehta International ++++++++++++++++++++++++++*/
.clinical-container {
    width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 40px 0;
}

.clinical-left {
    flex: 1;
    padding-right: 30px;
}

    .clinical-left img {
        width: 129%;
        height: auto;
        /* border-radius: 8px; */
        margin-left: -127px;
    }

.clinical-right {
    flex: 2;
}

.clinical-header {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.6;
    color: #374A5B;
    margin-right: 172px;
    word-spacing: 2px;
    text-align: justify;
    text-transform: uppercase;
}

    .clinical-services ul {
        list-style: none;
        padding-left: 0;
    }

    .clinical-services li {
        margin: 10px 0;
        font-size: 16px;
    }

        .clinical-services li::before {
            content: "👁️";
            margin-right: 8px;
        }

.clinical-services {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.clinical-row {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .clinical-row li {
        font-size: 15px;
        display: flex;
        align-items: center;
        flex: 1;
        color: #445568;
    }

        .clinical-row li::before {
            content: "👁️";
            margin-right: 8px;
        }

/* Force exact items per row by limiting children */
.row-1 li {
    flex: 0 0 100%;
}

.row-2 li {
    flex: 0 0 calc(50% - 2px);
}

.row-3 li {
    flex: 0 0 calc(33.333% - -19px);
}


/*0000000000000000000000000000000 Low-services 0000000000000000000000000000*/

/*++++++++  low services  banner image ++++++++*/
.low-banner {
    width: 100%;
    overflow: hidden;
}

    .low-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop11 {
    display: block;
}

.mobile11 {
    display: none;
}

/*++++++++++++++ low services  TITLE ++++++++++++++*/
.lo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.lo-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}

/*++++++++++++++++++ Low vision is a condition ++++++++++++++++*/
.vision-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.vision-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.vision-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .vision-image img {
        width: 116%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.vision-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .vision-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .vision-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
    }

/*++++++++++++++++++++++++ Mehta International Eye Institute is a link partner  ++++++++++++++++++++*/
.link-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 40px;
}

.link-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.link-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .link-image img {
        width: 116%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.link-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .link-text h3 {
        font-size: 19px;
        font-weight: 700;
        margin-bottom: 30px;
        margin-left: 27px;
        color: #445568;
        margin-top: -43px;
        text-align: justify;
        text-transform: uppercase;
    }

    .link-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
    }

/*0000000000000000000000000000000 contact-lens-services 0000000000000000000000000000*/

/*++++++++  contact-lens-services ++++++++*/
.advan-banner {
    width: 100%;
    overflow: hidden;
}

    .advan-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop12 {
    display: block;
}

.mobile12 {
    display: none;
}

/*++++++++++++++  contact-lens-services TITLE ++++++++++++++*/
.Adva-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.Adva-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}
/*+++++++++++++++++ Advancements in contact lens technology offer ++++++++++++++*/
.offer-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 80px;
}

.offer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.offer-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .offer-image img {
        width: 125%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -109px;
    }

.offer-text {
    flex: 1 1 500px;
    max-width: 600px;
    margin-top: -74px;
}

    .offer-text h3 {
        font-size: 19px;
        font-weight: 700;
        margin-bottom: 30px;
        margin-left: 27px;
        color: #445568;
        margin-top: -2px;
        text-align: justify;
        text-transform: uppercase;
    }

    .offer-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
    }

/*0000000000000000000000000000000 other-services 0000000000000000000000000000*/

/*++++++++  other-services ++++++++*/
.other-banner {
    width: 100%;
    overflow: hidden;
}

    .other-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop13 {
    display: block;
}

.mobile13 {
    display: none;
}
/*++++++++++++++  other-services TITLE ++++++++++++++*/
.other-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.other-title {
    font-size:48px;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}

/*++++++++++++++++ The Mehta International Eye Institute (MIEI) has the most ++++++++++++++++*/
.highlight-text {
    text-align: center;
    font-weight: 700;
    color: #374A5B;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
    margin: 30px auto;
    max-width: 1500px;
    font-size: 20px;
}

/*++++++++++++++++++++++ Comprehensive eye examination ++++++++++++++++++*/
.compre-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.compre-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.compre-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .compre-image img {
        width: 77%;
        height: auto;
        display: block;
        margin-top: -51px;
        margin-left: -45px;
    }

.compre-text {
    flex: 1 1 500px;
    max-width: 600px;
    margin-top: -69px;
}

    .compre-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .compre-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
    }

/*++++++++++++++++++++ The Slit Lamp Biomicroscope, (Topcon : Japan) ++++++++++++++++++++++*/
.slit-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.slit-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.slit-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .slit-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .slit-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -138px;
        text-align: justify;
    }

.slit-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .slit-image img {
        width: 80%;
        height: auto;
        display: block;
        margin-left: 140px;
    }

/*++++++++++++++++++++++ Ophthalmoscope (Heine Germany) ++++++++++++++++++*/
.ophtha-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.ophtha-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.ophtha-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .ophtha-image img {
        width: 90%;
        height: auto;
        display: block;
        margin-top: 0px;
        margin-left: -218px;
    }

.ophtha-text {
    flex: 1 1 500px;
    max-width: 600px;
    margin-top: -69px;
    margin-left: -172px;
}

    .ophtha-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .ophtha-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -113px;
        margin-bottom: -20px;
    }

/*+++++++++++++++++++ Ultrascan (Alcon USA) ++++++++++++++++++++*/

.ultra-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.ultra-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.ultra-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .ultra-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .ultra-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -44px;
        text-align: justify;
    }

.ultra-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .ultra-image img {
        width: 100%;
        height: auto;
        display: block;
        margin-left: 47px;
    }

/*00000000000000000000000000000000000000 awards page 00000000000000000000000000000000*/

/*++++++++++++++ awards header image ++++++++++++*/

.award-banner {
    width: 100%;
    overflow: hidden;
}

    .award-banner img {
        width: 100%;
        height: auto;
        display: block;
    }

.desktop14 {
    display: block;
}

.mobile14 {
    display: none;
}
    /*+++++++++++++++ awards images +++++++++++++*/
    .ongoingproject {
    max-width: 1350px;
    margin: 0 auto;
   
    background-color: #fff;
    padding: 50px 20px;
}

.ongoingproject-container {
 /*   max-width:1300px;*/
    display:grid;
   /* grid-template-columns: 1fr 1fr 1fr ;
    gap: 20px;*/
}

.ongoingproject-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ongoingproject-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

    .ongoingproject-image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.4s ease;
        border-radius: 8px;
    }

.ongoingproject-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    padding: 10px;
    transition: 0.3s ease-in-out;
}
.ongoingproject-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none; /* don’t block hover while hidden */
    transition: opacity .3s ease-in-out;
}


.ongoingproject-image-wrapper:hover img {
    transform: scale(1.05);
}

.ongoingproject-image-wrapper:hover .ongoingproject-overlay {
    opacity: 1;
    pointer-events: auto;
}

.overlay-text-top {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px 0;
}

.overlay-text-middle {
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    transition: 0.5s ease all;
}

.overlay-text-bottom {
    font-size: 21px;
    font-weight: 300;
    margin-top: 0px;
}

.ongoingproject-overlay:hover .overlay-text-middle {
    margin-top: 0px;
}
.data-caption {
    text-decoration:none;
}

.project-tabs {
    text-align: center;
    margin-bottom: 20px;
}

    .project-tabs button {
        background: #f1f1f1;
        border: none;
        padding: 10px 20px;
        margin: 0 5px;
        cursor: pointer;
        font-weight: 600;
    }

        .project-tabs button.active {
            background: #0052ff;
            color: #fff;
        }

        .project-tabs button:hover {
            background: #0026ff;
            color: #ffffff;
        }
.masonry {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
}

    /* Ensure images fill width properly */
    .masonry-item img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }
.ongoingproject a {
    text-decoration:none;
}
/*00000000000000000000000000000 community-service 000000000000000000000000000*/
/*++++++++++++++ community-service header image ++++++++++++*/
.comu-banner {
    width: 100%;
    overflow: hidden;
}

    .comu-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop15 {
    display: block;
}

.mobile15 {
    display: none;
}


/*++++++++++++++++++++ Netra Rukshak Rural Eye Care Hospital  ++++++++++++++++++++++*/
.netra-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: -24px;
}

.netra-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.netra-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .netra-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #445568;
    }

    .netra-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 42px;
        margin-right: -137px;
        text-align: justify;
    }

.netra-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .netra-image img {
        width: 60%;
        height: auto;
        display: block;
        margin: 0;
        margin-left: 146px;
        margin-top: 91px;
    }

/*++++++++++++++community-service++++++++++++++*/
.comu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.comu-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}


/*++++++++++++++Temporarily closed due to Covid-19++++++++++++++*/
.tempo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.tempo-title {
    font-size: 25px;
    font-weight:500;
    color: #333;
    text-align: center;
    margin-top: 70px;
    margin-bottom: -15px;
}

/*+++++++++++++++++++ Waiting to Be Operated +++++++++++++++++*/
.wait-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 20px;
}

.wait-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.wait-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .wait-image img {
        width: 59%;
        height: auto;
        display: block;
        margin-top: -72px;
        margin-left: -51px;
    }

.wait-text {
    flex: 1 1 500px;
    max-width: 600px;
    margin-top: -69px;
}

    .wait-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .wait-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -222px;
        margin-bottom: 17px;
    }
.extra-text {
    font-size: 15px;
    line-height: 27px;
    color: #445568;
    font-weight: 500;
    word-spacing: 2px;
    margin-left: -55px;
    margin-top: 14px;
    
}

/*+++++++++++++++ Outside the Operation Theater +++++++++++++*/
.outside-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: -72px;
}

.outside-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.outside-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 108px;
}

    .outside-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .outside-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.8;
        color: #445568;
        margin-top: 31px;
        margin-right: -165px;
        text-align: justify;
    }

.outside-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .outside-image img {
        width: 60%;
        height: auto;
        display: block;
        margin-left: 173px;
        margin-top: 103px;
    }

.tetra-text {
    font-size: 15px;
    line-height: 27px;
    color: #445568;
    font-weight: 500;
    word-spacing: 2px;
    margin-left: 177px;
    margin-top: 14px;
}

/*+++++++++++++++++++++++++  Operation in Progress ++++++++++++++++++++++++*/
.oper-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: 20px;
}

.oper-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.oper-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .oper-image img {
        width: 56%;
        height: auto;
        display: block;
        margin-top: -72px;
        margin-left: -51px;
    }

.oper-text {
    flex: 1 1 500px;
    max-width: 600px;
    margin-top: -69px;
}

    .oper-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .oper-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: -246px;
        margin-top: 40px;
    }

.extraoper-text {
    font-size: 15px;
    line-height: 27px;
    color: #445568;
    font-weight: 500;
    word-spacing: 2px;
    margin-left: -55px;
    margin-top: 14px;
}

/*++++++++++++++++++++ For the pilot project ++++++++++++++++++++++*/
.pilot-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: -72px;
}

.pilot-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.pilot-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 147px;
}

    .pilot-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .pilot-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 25px;
        margin-right: -194px;
        text-align: justify;
    }

.pilot-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .pilot-image img {
        width: 47%;
        height: auto;
        display: block;
        margin-left: 199px;
        margin-top: 103px;
    }

/*00000000000000000000000000000000 testimonials 0000000000000000000000000000*/


/*++++++++++++++ testimonials header image ++++++++++++*/

.test-banner {
    width: 100%;
    overflow: hidden;
}

    .test-banner img {
        width: 100%;
        height: auto;
        display: block;
    }

/*+++++++++++++++++++++ test 4 container section ++++++++++++++++*/
.testdesk {
    display: block;
}

.testmob {
    display: none;
}
.testimonials-container {
    display: grid;
    grid-template-columns:1fr 1fr;
    max-width:1380px;
    flex-wrap: wrap;
    gap: 40px;
    margin:auto;
    margin-top:69px;
}

.testimonial-card {
    background-color: #384B5C ;
    color: #FFFFFF;
    border-radius: 30px;
    padding: 20px;
    width: 100%;
    position: relative;
}

.testimonial-text {
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
    margin-bottom: 20px;
}

.testimonial-footer {
    display: grid;
    align-items: center;
    justify-content: space-between;

}

.stars {
    font-size: 18px;
    color: #FFD700; 
}

.author {
    font-style: italic;
    font-size: 16px;
    font-weight: bold;
}

.quote-icon {
    position: absolute;
    bottom: 45px;
    right: 38px;
    width: 30px;
    height: 44px;
   /* background-color: #384B5C;*/
    background-image: url('images/right-quote.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*00000000000000000000000000000000 milestone page 0000000000000000000000000000000000*/
/*++++++++ milestone banner image ++++++++*/
.mile-banner {
    width: 100%;
    overflow: hidden;
}

    .mile-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop17 {
    display:block;
}

.mobile17 {
    display: none;
}
/*++++++++++++++ milestone TITLE ++++++++++++++*/
.milestone-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    text-transform: uppercase;
}


.milestone-title {
    font-size: 2.5rem;
    color: #374A5B;
    text-align: center;
    margin-top: 70px;
}

/*++++++++++++++++++++ – Dr. Keiki R. Mehta, the Surgical Chief  +++++++++++++++++++*/
.chief-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.chief-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.chief-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 92px;
}

    .chief-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .chief-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 22px;
        margin-right: 70px;
        text-align: justify;
    }

.chief-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .chief-image img {
        width: 115%;
        height: auto;
        display: block;
        margin-left: -41px;
        margin-top: 92px;
    }


/*++++++++++++++++++++++++ Dr. Keiki R. Mehta a pioneer in the field ++++++++++++++++++++++*/
.pioneer-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: -15px;
    margin:auto;
}

.pioneer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 130px;
}

.pioneer-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .pioneer-image img {
        max-width: 607px;
        height: auto;
        display: block;
        margin-top: 6px;
        margin-left: -45px;
    }

.pioneer-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .pioneer-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .pioneer-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
        margin-top: 19px;
    }

/*+++++++++++++++++++++ He then turned to Refractive Surgery +++++++++++++++++++*/
.active-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.active-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.active-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 113px;
}

    .active-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .active-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 25px;
        margin-right: 70px;
        text-align: justify;
    }

.active-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .active-image img {
        width: 115%;
        height: auto;
        display: block;
        margin-left: -41px;
        margin-top: 92px;
    }

/*++++++++++++++++++++ True to its international caliber the institute  ++++++++++++++++*/
.caliber-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
    margin-top: -15px;
    margin:auto;
}

.caliber-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 130px;
}

.caliber-image {
    flex: 1 1 300px;
    max-width: 450px;
}

    .caliber-image img {
        max-width: 607px;
        height: auto;
        display: block;
        margin-top: 6px;
        margin-left: -45px;
    }

.caliber-text {
    flex: 1 1 500px;
    max-width: 600px;
}

    .caliber-text h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        margin-left: -108px;
        color: #445568;
        margin-top: 51px;
    }

    .caliber-text p {
        font-size: 15px;
        line-height: 27px;
        color: #445568;
        text-align: justify;
        font-weight: 500;
        word-spacing: 2px;
        margin-left: 23px;
        margin-bottom: 17px;
        margin-top: 19px;
    }

/*++++++++++++++++++ The genesis of the institute was conceived ++++++++++++++++*/

.genes-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2f4558;
}

.genes-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-top: -55px;
}

.genes-text {
    flex: 1 1 600px;
    max-width: 650px;
    margin-top: 113px;
}

    .genes-text h3 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #445568;
    }

    .genes-text p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        color: #445568;
        margin-bottom: 25px;
        margin-right: 70px;
        text-align: justify;
    }

.genes-image {
    flex: 1 1 400px;
    max-width: 500px;
}

    .genes-image img {
        width: 115%;
        height: auto;
        display: block;
        margin-left: -41px;
        margin-top: 92px;
    }

/*00000000000000000000000000000000 Book an appointment page 000000000000000000000000000000*/

/*+++++++++++++ oppointmrnt header image ++++++++++++++*/
.book-banner {
    width: 100%;
    overflow: hidden;
}

    .book-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop16 {
    display: block;
}

.mobile16 {
    display: none;
}
/*+++++++++++++++++++++++ Book an appointment form ++++++++++++++++++++++*/
.app-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}

.app-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    background-color: #fff;
    margin-top: -28px;
}


.app-image {
    flex: 1;
}

    .app-image img {
        width: 100%;
        border-radius: 6px;
        object-fit: cover;
    }


.app-form {
    flex: 1;
}

    .app-form h2 {
        margin-bottom: 9px;
        font-size: 29px;
        font-weight: bold;
        color: #2c3e50;
    }

    .app-form form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }


.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.app-form input,
.app-form textarea {
    padding: 12px 12px;
    border: 1px solid #ccc;
    font-size: 15px;
    font-weight:500;
    border-radius: 4px;
}


.form-row input {
    flex: 1;
}


.mobile-input {
    flex: 1;
}

.date-input {
    flex: 0 0 180px; 
}

.app-form textarea {
    width: 100%;
    min-height: 80px;
    resize: none;
}

/* Button */
.form-btn {
    background: #384B5C;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 2px;
    width: 100px;
}

    .form-btn:hover {
        background: #B43041;
    }




/*00000000000000000000000000000000 Contact US 000000000000000000000000000000*/

/*+++++++++++++ oppointmrnt header image ++++++++++++++*/
.cont-banner {
    width: 100%;
    overflow: hidden;
}

    .cont-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop18 {
    display: block;
}

.mobile18 {
    display: none;
}
/*++++++++++++++++ Write to us for quick response ++++++++++++++*/


.quick-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    margin-top: 55px;
}

/* Section */
.quick-section {
    display: flex;
    gap: 20px;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Map */
.quick-map {
    flex: 1;
    min-width: 400px;
}

    .quick-map iframe {
        width: 100%;
        height: 100%;
        min-height: 450px;
        border: 0;
        border-radius: 8px;
    }

/* Form */
.quick-form {
    flex: 1;
    min-width: 400px;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
   /* box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .quick-form h2 {
        margin-bottom: 20px;
        font-size: 27px;
        font-weight: bold;
        color: #2f4f60;
    }

.quick-group {
    margin-bottom: 15px;
}

.quick-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 16px;
    color: #445568;
}

.quick-input,
.quick-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.quick-textarea {
    resize: vertical;
    min-height: 100px;
}

.quick-btn {
    background: #2f4f60;
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 19px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

    .quick-btn:hover {
        background: #B43041;
    }



/*000000000000000000 brochures-downloads 0000000000000000000*/

/*++++++++++++ header banner +++++++++++*/
.bro-banner {
    width: 100%;
    overflow: hidden;
}

    .bro-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.desktop19 {
    display: block;
}

.mobile19 {
    display: none;
}

/*+++++++++++++++++  brochure section +++++++++++++++++++*/

.brochure-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #ECECEC;
    max-width: 2000px;
}

.brochure-title {
    font-size: 60px;
    color: #2d3e50;
    margin-bottom: 40px;
}

.brochure-columns {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 2000px;
    margin: 0 auto;
}

.brochure-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.brochure-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease,;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(100px);
    opacity: 0;
    width: 360px;
    height: 430px;
}

    .brochure-card img {
        width: 338px;
        height: auto;
        object-fit: cover;
        transition: transform 0.2s ease;
        border-radius: 50px;
        padding: 20px;
    }

    .brochure-card p {
        font-size: 26px;
        font-weight: bold;
        color: #2d3e50;
        padding: 15px 10px;
        margin: 0;
    }

    .brochure-card:hover img {
        transform: scale(1.1);
    }
    .brochure-card a {
        text-decoration:none;
    }
    /* Reveal animation */
    .reveal.active {
        transform: translateY(0);
        opacity: 1;
        transition: all 0.6s ease;
    }


/*+++++++++++++ pdf button ++++++++++++++*/
/* View More Button */
.brochure view-more-container {
    margin-top: 50px;
    text-align: center;
}

.brochure view-more-btn {
    padding: 13px 40px;
    display: inline-block;
    background-color: #2a3b4c;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 22px;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease;
}

.brochure view-more-btn:hover {
    background: #B43041;
    color: white;
}



/*0000000000000000000 thank you 00000000000000000000*/

body, html {
    margin: 0;
    padding: 0;
    /*background-color: #fff;*/
    font-family: 'Segoe UI', sans-serif;
}

.thank-page-v2 {
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background-color: #fff;
}

.thank-container-v2 {
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.main-thank {
    font-size: 115px;
    font-weight: 900;
    color: #2D3C4C;
    text-shadow: 6px 6px 15px rgba(13, 62, 255, 0.3);
    margin-bottom: 30px;
}

.thank-text {
    font-size: 27px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
}

.nice-day {
    font-size: 24px;
    color: #222;
    font-weight: 600;
}


@media (max-width: 768px) {
    .main-thank {
        font-size: 60px;
    }

    .thank-text {
        font-size: 20px;
    }

    .nice-day {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .main-thank {
        font-size: 46px;
    }

    .thank-text {
        font-size: 18px;
    }

    .nice-day {
        font-size: 16px;
    }
}

/*0000000000000000 back to top button 0000000000000000*/

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #131d3b;
    border: none;
   /* border-radius: 6px;*/
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

    .back-to-top.show1 {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background-color: #B43041;
        transform: scale(1.1);
        filter: brightness(110%);
    }

    .back-to-top svg path {
        transition: fill 0.3s ease;
    }

    .back-to-top:hover svg path {
        fill: #fff;
    }