:root{
    --dark-navy:#3E3E86

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Mona Sans", sans-serif;
    background-color: #ffffff;
}
.header{
    width: 100%;
    position: fixed;
    z-index: 999999999;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}


/* Start top Navigation Bar */
.navbar_top_section{
    width: 100%;
    height: 35px;
    background-color: #3E3E86;
}
.navbar_top_section_area{
    width: 94%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_top_section_address{
    width: 34%;
    display: flex;
    align-items: center;

}
.navbar_top_section_address p{
    color: #ffffff;
    padding:1px 20px 1px 0px;
    font-size: 13px;
}
.navbar_top_section_address p i{
    margin-right: 5px;
}
.header_socal_link a {
    color: #fff;
    margin-left: 10px;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
}

.header_socal_link a:hover {
    color: rgb(4, 236, 4);
}

.navbar_top_section_link{
    width: 20%;
    text-align: right;
    transition: all 0.3s ease-in-out;
}
.navbar_top_section_link a{
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease-in-out;
}
.navbar_top_section_link i{
    padding: 0px 5px;
    transition: all 0.3s ease-in-out;
}
.navbar_top_section_link a:hover{
    color: rgb(4, 236, 4);
}

.scroll_box {
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
    width: 50%;
    text-align: right;
}

.scroll_items {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
}

.scroll_entry {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 1.0s ease, transform 1.0s ease;
    white-space: nowrap;
    margin-top: -7px;
    
}

.scroll_entry a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.scroll_entry a:hover{
    text-decoration: none;
    color: rgb(4, 236, 4);
}

.scroll_entry.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 1;
}
.all-news-btn{
    min-width: 130px;
    text-align: center;
}
.all-news-btn a{
    display: inline-block;
    margin-left: 15px;
    padding: 5px 10px;
    background-color: #00953B;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    border-radius: 3px;
    transition: background-color 0.3s ease-in-out;

}
.all-news-btn a:hover{
    background-color: #007a2e;
    color: #ffffff;
}

@media (max-width: 600px) {
    .scroll_entry a {
      font-size: 0.9em;
    }
}


/* Start Main Navigation Bar */

.navbar_main_section{
    width: 100%;
    height: 75px;
    background-image: url('../../image/Housing.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.navbar_main_section_area{
    width: 95%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar_main_logo_section{
    display: flex;
    /* justify-content: space-between; */
    width: 100%;

}
.menu_toggole_btn{
    display: none;
}
.nav_logo{
    width: 100%;
    display: flex;
    align-items: center;
    


}
.nav_logo h2{
    font-size: 25px;
    color: #3E3E86;
    padding-left: 10px;
    font-weight: 600;
}
.navigation_bar_main_menu{
    background-color: #5858fc4d;

}
.navbar_main_menu_section{
    width: 95%;
    margin: auto;
}
.nav_logo img{
    width: 100%;
    
}
.nav_logo_one{
    max-width: 98%;
}
.navbar_menu_area{
    display: flex;
    position: relative;

}
.navbar_menu_area a{
    text-decoration: none;
    color: #0a285c;
    font-weight: 600;
}
.navbar_menu_area li{
    list-style: none;
}
.main_logo_mobile_title{
    display: none;
}
.main_logo_mobile{
    display: none;
}
 /* 1. Base Dropdown Styling (adjust as needed) */
.dropdown {
    position: relative; /* Essential for dropdown positioning */
    list-style: none;
}

.dropdown_menu {
    position: absolute;
    top: 100%; /* Positions the menu below the main item */
    left: 0;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Initially hide the entire menu - important! */
    visibility: hidden; 
    opacity: 0;
    /* Optional: Transition for the *entire* menu fading in/out */
    transition: opacity 0.3s ease, visibility 0.3s;
    min-width: 250px;
}

/* Show the menu on hover */
.dropdown:hover .dropdown_menu {
    visibility: visible;
    opacity: 1;
}

/* 2. Item Staggered Animation Setup */

.dropdown_menu a {
    /* Set the initial state for the animation */
    display: block;
    opacity: 0; 
    transform: translateY(-10px); /* Start 10px higher than final position */
    
    /* Apply a transition to the properties we want to animate */
    transition: 
        opacity 0.3s ease-out, 
        transform 0.3s ease-out;
        font-weight: 500;
}

/* 3. Item Staggered Animation Execution on Hover */

.dropdown:hover .dropdown_menu a {
    opacity: 1; /* Final state: fully visible */
    transform: translateY(0); /* Final state: final position */
}

/* This is the magic: Assigning increasing transition-delays to create the "show one by one" effect */
.dropdown:hover .dropdown_menu a:nth-child(1) {
    transition-delay: 0.0s; /* Start immediately after menu appears */
}
.dropdown:hover .dropdown_menu a:nth-child(2) {
    transition-delay: 0.05s;
}
.dropdown:hover .dropdown_menu a:nth-child(3) {
    transition-delay: 0.10s;
}
.dropdown:hover .dropdown_menu a:nth-child(4) {
    transition-delay: 0.15s;
}
.dropdown:hover .dropdown_menu a:nth-child(5) {
    transition-delay: 0.20s;
}
.dropdown:hover .dropdown_menu a:nth-child(6) {
    transition-delay: 0.25s;
}
.dropdown:hover .dropdown_menu a:nth-child(7) {
    transition-delay: 0.30s;
}
/* ========================================================= */
/* --- Reset Dropdown Animation for Mobile Screens --- */
/* ========================================================= */

@media (max-width: 1200px) {

    /* Reset the visibility for the entire dropdown menu */
    .dropdown_menu {
        /* When the desktop menu is displayed on mobile (e.g., if forced open), 
           it should just appear instantly or be handled by the mobile drawer's structure. */
        transition: none !important; 
        opacity: 1 !important;
        visibility: visible !important;
        /* Ensure it stacks correctly if needed */
        position: static; 
        min-width: unset;
        display: none; /* Crucial: ensures dropdowns are visually hidden on mobile */
    }
    
    /* Reset all staggered animation properties on individual links */
    .dropdown_menu a {
        transition: none !important; /* Remove all transition effects */
        transform: none !important;  /* Remove starting animation position */
        opacity: 1 !important;       /* Make them instantly visible */
    }

    /* Override the specific staggered delays */
    .dropdown:hover .dropdown_menu a {
        transition-delay: 0s !important;
    }
    .dropdown:hover .dropdown_menu a:nth-child(n) {
        transition-delay: 0s !important;
    }

    /* Ensure the entire menu is hidden on mobile, relying on JavaScript 
       or the mobile drawer structure to reveal content. */
    .dropdown:hover .dropdown_menu {
        display: none; 
    }
    .dropdown .dropdown_menu {
        display: none; 
    }
    /* Re-enable the display property if you were using it for hover in the desktop CSS */
    .dropdown:hover .dropdown_menu {
        display: block; /* If your desktop used display: block/none, reset that logic too */
    }


    /* NOTE: Your prior mobile CSS already includes: 
       .navigation_bar_main_menu { display: none; }
       This is the primary method that removes the desktop menu and its animation entirely. 
       The above resets are mostly defensive, ensuring no animation runs if the desktop menu 
       structure were to accidentally appear on a mobile screen. 
    */

}

/* Continue this pattern for any additional items you have. */

/* Styling for the menu items themselves (optional) */
.dropdown_menu_item {
    padding: 10px 15px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
    list-style: none;
    transition: all 0.3s ease-in-out;
}
.dropdown_menu_item:hover {
    background-color: #3E3E86;
    color: #ffffff;
}
.menu_item {
    position: relative;
    display: block;
    padding: 4px 0;
    transition: 0.5s;
    padding: 15px 7px;
    font-weight: 600;
    font-size: 13px;

    &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00953B;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
    }

    &:hover {
    color: #3E3E86;
    background-color: #eeeeee9c;
    }

    &:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    }
}
.drawer {
    position: fixed;
    top: 110px;
    left: 0;
    width: 320px;
    height: 82%;
    overflow: auto;
    background-color: #2c3e50c4;
    color: white;
    padding: 20px;
    transform: translateX(0);
    transition: transform 0.3s ease;
    z-index: 1000;
}
.drawer.closed {
    transform: translateX(-100%);
}
.drawer_quick_link_main {
    list-style: none;
    padding: 0;
    margin: 0;
}
.drawer_quick_link_main li {
    margin-bottom: 10px;
}
.drawer_quick_link_main a {
    text-decoration: none;
    color: #fff;
}
.drawer_link {
    background: linear-gradient(to bottom, #3E3E86, #5151aa);
    border: 2px solid #ccc;
    font-size: 15px;
    border-radius: 8px;
    padding: 12px 10px;
    display: block;
    transition: background 0.3s, transform 0.2s;
}
.drawer_link:hover {
    background: linear-gradient(to bottom, #f0f0f0, #dfdfdf);
    transform: translateX(5px);
    color: #2c3e50;
}
.my_animation {
    animation: breathingGlow 2s infinite ease-in-out;
    transition: all 0.3s ease-in-out; /* Smooth transition for highlight effect */
}

.my_animation:hover {
    background: linear-gradient(to bottom, #f0f0f0, #dfdfdf);
    transform: translateX(5px);
    color: #fff;
}

@keyframes breathingGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 119, 255, 0.5); /* Blue */
        background: linear-gradient(to bottom, #3E3E86, #5151AA); /* Purple gradient */
    }
    33% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Green */
        background: linear-gradient(to bottom, #3B9E4E, #60C84E); /* Green gradient */
    }
    66% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); /* Green */
        background: linear-gradient(to bottom, #3B9E4E, #60C84E); /* Red to Pink gradient */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 119, 255, 0.5); /* Blue */
        background: linear-gradient(to bottom, #3E3E86, #5151AA); /* Purple gradient */
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
    -webkit-animation: blinker 1s infinite; /* Safari 4+ */
    -moz-animation: blinker 1s infinite; /* Fx 5+ */
    -o-animation: blinker 1s infinite; /* Opera 12+ */
    animation: blinker 1s infinite; /* IE 10+, Fx 29+ */
    
}
 
@keyframes blinker {
    50% {
        opacity: 0;
    }
   
}

  

  /* Open Button */
.open-btn {
    position: fixed;
    top: 55%;
    background-color: #ffffffda;
    border: none;
    color: #3E3E86;
    padding: 40px 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    font-size: 25px;
    font-weight: 800;
    z-index: 1100;
    display: none;
}
/* .open-btn i {
    animation: spin 2s linear infinite;
} */
.open-btn .hover-text {
    position: absolute;
    top: 50%;
    left: 110%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-size: 14px;
}
.open-btn:hover .hover-text {
    opacity: 1;
    
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.open-btn:hover {
    background-color: #3E3E86;
    color: #fff;
    border: 1px solid #fff;
}

/* Outside Close Button */
.outside-close-btn {
    position: fixed;
    top: 55%;
    left: 320px;
    font-size: 20px;
    z-index: 1100;
    display: none;
    transition: background-color 0.3s ease;
    background-color: #ff1717ce;
    border: none;
    color: rgba(255, 255, 255, 0.842);
    padding: 40px 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    animation: pulseHighlight 2s infinite;
      transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
      font-weight: 800;
}
.outside-close-btn:hover {
    background: #fff;
    color: #3E3E86;
    border: 1px solid #3E3E86;
}
@keyframes pulseHighlight {
    0% {
      box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
  }
  .nav_logo_two{
    width: 595px !important;
    margin-top: 5px;
  }
  /* Responsive for Mobile */
@media (max-width: 1200px) {
    .drawer {
      width: 80%;
      top: 140px !important;
      transform: translateX(-100%);
    }
    .navbar_main_section{
        background-image: none;
    }
    
    .nav_logo h2{
        display: none;
    }
    .nav_logo_one{
        display: none;
    }
    .nav_logo_two{
        display: none;
    }
    .nav_logo_three{
        display: block;
    }
    .fa-xmark{
        display: none;
    }
    .main_logo_mobile{
        display: block;
        width: 70%;
        margin-top: -10px;
    }
    .drawer.open {
      transform: translateX(0);
    }
    .open-btn {
      display: block;
    }
    .outside-close-btn {
      left: 90%;
      top: 140px;
    }
    .open-btn {
        top: 150px;
    }
    .outside-close-btn {
        top: 150px;
        left: 335px;
    }
  }

/* INdex page Section Start Here */
.index_slider_main_conteinar{
    width: 100%;
    background-color: #fff;
    transition: transform 0.6s ease;
    height: 100%;
    
}
        .counter-section-wrapper {
            /* Using a subtle gradient for a modern feel */
            /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            padding: 10px 20px;
            color: #0C3170;
        }

        .counter-section-container {
            display: grid;
            /* Create 4 columns on desktop, 2 on tablet, and 1 on mobile */
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 30px; /* Space between the cards */
            max-width: 95%;
            margin: 0 auto;
        }

        .counter-card {
            background: rgba(255, 255, 255, 0.1); /* Frosted glass effect */
            border-radius: 5px;
            padding: 15px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* --- Engaging Hover Effect --- */
        .counter-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2);
        }

        .counter-card .icon {
            font-size: 25px;
            padding: 5px 0px;
        }

        .counter-card h3.counter {
            font-size: 40px;
            font-weight: 700;
            margin: 10px 0 10px 0;
        }

        .counter-card p {
            font-size: 16px;
            font-weight: 400;
            padding: 5px;
            margin: 0;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .counter-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .counter-card {
            cursor: pointer;
        }

        
        /* --- 🌟 NEW ANIMATION CSS 🌟 --- */
        /* 1. This is the initial "hidden" state for all sections */
        /* section {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        section.is-visible {
            opacity: 1;
            transform: translateY(0); 
        } */
        /* Slider Container */
        .infinite_looping_slider-container {
            width: 100%; 
            height: 80vh; 
            margin: 0px auto;
            position: relative;
            overflow: hidden;
            /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); */
            display: flex;
            flex-direction: column;
        }
        
        /* Hidden Title Bar */
        .infinite_looping_slider-header {
            display: none; 
        }
        
        /* Slides Wrapper (The main viewing area) */
        .infinite_looping_slides-wrapper {
            flex-grow: 1;
            position: relative;
            overflow: hidden; 
            background-color: #1a1a1a;
        }

        /* Inner container for sliding effect */
        .infinite_looping_slides-inner {
            display: flex;
            height: 100%;
            /* Transition will be managed in JS for the infinite loop illusion */
        }

        /* Individual Slide */
        .infinite_looping_slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* Image Styling */
        .infinite_looping_slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* --- Title and Description Overlay --- */
        .infinite_looping_image-content-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            
            /* Gradient for text readability */
            background: linear-gradient(
                to top, 
                rgba(0, 0, 0, 0.6) 0%, 
                rgba(0, 0, 0, 0) 60%
            );
            
            /* Positioning content to the bottom center */
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Align to the bottom */
            align-items: center;
            text-align: center;
            padding: 0 20px 70px 20px; /* Padding at bottom for dots */
        }
        
        /* NEW: Wrapper for animated text content */
        .infinite_looping_text-content-wrapper {
            /* Animation Start State: Hidden and moved down */
            opacity: 0;
            transform: translateY(20px);
            /* Transition for smooth slide-up/slide-down effect */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            transition-delay: 0s; 
        }

        /* Animation Target State (Slide Up / Fade In) */
        .infinite_looping_text-content-wrapper.infinite_looping_active-text {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- STYLES FOR TITLE (H2) --- */
        .infinite_looping_text-content-wrapper h2 {
            color: #f7f9fc; /* Off-white for brightness */
            font-size: 3.5em; /* Slightly larger */
            font-weight: 900; /* Extra bold */
            margin: 0 auto 10px auto;
            /* Enhanced text shadow for better depth */
            text-shadow: 0 4px 12px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.1); 
            letter-spacing: -1px; /* Tighter look */
            display: none;
        }
        
        /* --- STYLES FOR DESCRIPTION (P) --- */
        .infinite_looping_text-content-wrapper p {
            color: #e0e0e0; /* Made description slightly lighter for contrast */
            font-size: 1.3em; /* Slightly larger */
            font-weight: 300; /* Lighter font weight */
            max-width: 80%; /* Wider description area */
            margin: 0 auto;
            /* Updated shadow for description */
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
            display: none;
        }
        
        /* --- Navigation Buttons (Side buttons) --- */
        .infinite_looping_prev-btn, .infinite_looping_next-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(97, 30, 30, 0.5);
            color: #ffffffff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            z-index: 10;
            font-size: 28px;
            transition: background-color 0.3s, opacity 0.3s;
            opacity: 0.8;
            outline: none;
        }

        .infinite_looping_prev-btn:hover, .infinite_looping_next-btn:hover {
            background-color: rgba(255, 41, 41, 0.8);
            opacity: 1;
        }

        .infinite_looping_prev-btn { 
            left: 0; 
            border-radius: 50%;
            margin-left: 15px;
        }
        .infinite_looping_next-btn {
            right: 0;
            border-radius: 50%;
            margin-right: 15px;
        }

        /* Dot Navigation Bar (Over the image) */
        .infinite_looping_dot-navigation {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
            text-align: center;
        }

        .infinite_looping_dot {
            /* --- UPDATED: Reduced size from 15px to 10px --- */
            height: 10px;
            width: 10px;
            margin: 0 5px;
            background-color: #bbb;
            border: 2px solid white;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s, transform 0.3s;
            cursor: pointer;
        }

        .infinite_looping_dot.active {
            background-color: #2c3e50;
            transform: scale(1.2);
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .infinite_looping_slider-container {
                min-width: 100%;
                height: 32vh;
                margin: 0;
                border-radius: 0;
                box-shadow: none;
            }
            
            .infinite_looping_text-content-wrapper h2 { 
                font-size: 1.5em; 
            }
            .infinite_looping_text-content-wrapper p { 
                font-size: 0.9em; max-width: 90%; 
                margin: auto;
            }
            
            .infinite_looping_prev-btn, .infinite_looping_next-btn {
                padding: 6px 12px;
                font-size: 18px;
            }
            
            .infinite_looping_image-content-overlay {
                 padding: 0 10px 50px 10px;
            }
        }
.index_about_us_section{
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    position: relative;
}
.index_about_us_section_area{
    width: 95%;
    height: auto;
    margin: auto;
}
.index_about_us_main_conteinar{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.index_about_us_text_section{
    width: 50%;
    height: auto;
    padding-right: 20px;
}
.index_about_us_image_section{
    width: 50%;
    height: 350px;
    margin-top: 55px;
}
.index_about_us_title{
    display: flex;
    align-items: center;
    padding: 10px 0px 5px;
}
.index_about_us_title img{
    width: 40px;

}
.index_about_us_image_section img{
    width: 100%;
    border: 1px solid #3E3E86;
}
.index_about_us_header h1{
    width: 100%;
    text-align: center;
    padding: 20px 20px 10px 20px;
    color: #3E3E86;
    font-size: 30px;
}
.index_about_us_text_section h3{
    color: #222;

}
.index_about_us_text_section p{
    font-size: 14px;
    color: #444;
    text-align: justify;

}
.index_about_us_text_section button{
    padding: 15px 50px 15px 30px;
    background-color: #3E3E86;
    color: #ffffff;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    /* border-bottom-right-radius: 30px; */
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
}

.index_about_us_text_section button:hover{
    background-color: #00953B;
}
.index_about_us_image_section {
    position: relative;
    height: 350px;
}

.index_about_us_image_section img {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
    padding: 0px 0px 0px 0px;
    object-fit: cover;
}

.index_about_us_image_section img.active {
    opacity: 1;
    z-index: 1;
}


/* Massage */
.index_massage_conteinar{
    width: 100%;
    height: auto;
    /* background-image: url(../../image/service-bg.jpg); */
    /* min-height: 60vh; */
    
}
.index_massage_conteinar_area{
    width: 95%;
    height: auto;
    margin: 10px auto;
    padding: 20px 20px;
    border-radius: 5px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

}
.index_massage_conteinar_header h1{
    width: 100%;
    text-align: center;
    padding: 20px 20px 10px 20px;
    color: #3E3E86;
    font-size: 30px;
}
.index_massage_box{
    display: flex;
    justify-content: center;

}
.index_main_text_massage{
    width: 70%;
    height: auto;
    padding-top: 10px;
}
.index_main_image_massage{
    width: 30%;
    height: auto;
    text-align: center;
}
.index_main_image_massage img{
    width:50%;
    height: auto;
    
}
.mobile_res{
    display: none;
}
.index_main_text_massage h3{
    color: #222;
    padding: 10px 0px;

}
.index_main_text_massage p{
    color: #444;
    padding: 10px 50px 10px 0px;
    text-align: justify;


}
.index_main_text_massage button{
    padding: 15px 50px 15px 30px;
    background-color: #3E3E86;
    color: #ffffff;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
    border-bottom-right-radius: 30px;
}

.index_main_text_massage button:hover{
    background-color: #00953B;
}
.index_main_image_massage p{
    color: #444;
}
/* Our Clients and partners */
.partners_index_conteinar{
    width: 100%;
    height: auto;
}
.partners_index_conteinar_area{
    width: 95%;
    height: auto;
    margin: auto;
    border-radius: 5px;
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
    

}
.partners_index_conteinar_main {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.partners_index_conteinar_header h1{
    width: 100%;
    text-align: center;
    padding: 20px 20px 10px 20px;
    color: #3E3E86;
    font-size: 30px;

}


  .carousel-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    background: #fff;
  }

  .carousel {
    display: flex;
    align-items: center;
  }

  .carousel-track {
    display: flex;
    animation: scroll 60s linear infinite;
  }

  .carousel-track:hover {
    animation-play-state: paused;
  }

  .carousel-track li {
    list-style: none;
    margin: 0 10px;
    flex: 0 0 auto;
  }

  .carousel-track img {
    height: 80px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
/* Latest News & Events */

.latest_news_index_conteinar{
    width: 100%;
    height: auto;
}
.latest_news_index_conteinar_area{
    width: 95%;
    height: auto;
    margin: auto;
    padding-bottom: 20px;
    overflow: hidden;
}
.indes_news_header h2{
    width: 100%;
    text-align: center;
    padding: 20px 20px 10px 20px;
    color: #3E3E86;
    font-size: 30px;
}

  .latest_news_index_conteinar_button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }

  .latest_news_index_conteinar_button button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .latest_news_index_conteinar_button button.is-active {
    background-color: #3E3E86;
    color: #ffffff;
  }

  .latest_news_all_elements > div {
    display: none;
    padding: 0px;
    font-size: 16px;
    animation: fadeIn 0.3s ease-in-out;
  }

  .latest_news_all_elements > div.is-active {
    display: block;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Responsive */
  @media (max-width: 600px) {
      .latest_news_index_conteinar_button {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          
        }

      .latest_news_index_conteinar_button button {
          flex: 1 1 45%; /* allow buttons to take 45% of the row */
          max-width: 50%;
          font-size: 14px;
        }
      .latest_news_index_conteinar_button{
        padding: 10px 0px;
      }
      .partners_index_conteinar{
        margin-top: 250px;
      }
      .index_about_us_image_section img {
        height: 250px !important;
        
        }
        .index_about_us_image_section{
            margin-top: 20px;
        }


    }

/* News Leater Elemnets Section */

/* General Styles */
.news_main_conteiar_box {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.news_main_elements {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.news_box {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    max-width: 24%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.news_box:hover {
    transform: translateY(-5px);
}

.news_image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news_title {
    font-size: 15px;
    margin: 10px 15px;
    font-weight: bold;
    color: #333;
}

.news_info {
    font-size: 12px;
    color: #777;
    margin-left: 15px;
}

.publish_date {
    display: flex;
    align-items: center;

}

.publish_date i {
    margin-right: 5px;
}

.news_details {
    font-size: 12px;
    color: #555;
    margin: 10px 15px;
    height: 60px;
    overflow: hidden;
}

.details_button {
    width: 100%;
    padding: 10px;
    background-color: #3E3E86;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /* border-bottom-left-radius: 8px; */
    /* border-bottom-right-radius: 8px; */
}

.details_button:hover {
    background-color: #00953B;
}
.all_btn{
    text-align: right;
    margin-top: 0px;
    padding: 10px 20px 10px 10px;
}
.all_btn a{
    text-decoration: none;
    color: #3E3E86;
    font-weight: 600;
}
.all_btn a:hover{
    color: #00953B;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .news_box {
        max-width: 100%;
        margin: 0 10px;
    }

    .news_title {
        font-size: 1rem;
    }

    .news_details {
        font-size: 0.8rem;
    }

    .details_button {
        font-size: 0.9rem;
    }
    .index_about_us_section{
        padding:0px 0px 20px 0px;
    }
    
}
.project-box {
    background-color: #ffcccc;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #00953B;
    width: 400px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

/* Notice */
.notice_table {
    border-collapse: collapse;
    width: 100%;
}
  
.notice_table td, .notice_table th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 10px;
    color: #444;
}

.notice_table tr:nth-child(even) {
    background-color: #eeeeee;
}

.notice_table button {
    padding: 8px 14px;
    background: linear-gradient(90deg, #3E3E86, #3E3E86);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
    display: inline-block;
    border: none;
    gap: 10;
    margin: 0px 5px;
    cursor: pointer;
  }
  
  .notice_table button:hover {
    background: linear-gradient(90deg, #4d4da3, #5151ac);
  }

/* ====================================================== */
/* === CORE GALLERY STYLES (Refactored with Prefix) === */
/* ====================================================== */
 /* CSS */
 /* === Header Container === */
.index_main_header_conteinar {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Vertically align items */
    position: relative; /* For absolute button positioning */
    text-align: center;
    padding: 10px 0;
}

/* === Heading === */
.index_main_header_conteinar h1 {
    color: #3E3E86;
    font-size: 30px;
    margin: 0;
    flex: 1;
    text-align: center;
}

.index_gel_main_photo_gallerY_conteinar {
    width: 100%;
    height: auto;
    background-image: url(https://via.placeholder.com/1500x800/f0f0f0/cccccc?text=Service+Background); /* Placeholder for service-bg.jpg */
    background-size: cover;
    background-position: center;
}

.index_gel_main_photo_gallerY_conteinar_area {
    width: 95%;
    margin: auto;
    height: auto;
}


.index_gel_main_photo_gallerY_conteinar_header h1 {
    width: 100%;
    text-align: center;
    color: #3E3E86;
    font-size: 30px;
}

/* Underline Styles */
/* === Underline Styles === */
.index_gel_main_text_underline_style {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
}
.index_gel_main_undeline1,
.index_gel_main_undeline2,
.index_gel_main_undeline3 {
    height: 4px;
    background-color: #3E3E86;
}
.index_gel_main_undeline2 {
    background-color: #00953B;
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
    .index_main_header_conteinar {
        flex-direction: column;
        position: relative;
        margin: 0px 0px;
    }

    .index_gel_main_see_all_button {
        position: static;
        transform: none;
        margin-top: 10px;

    }
}

/* === See All Button (MODIFIED - no absolute positioning) === */
.index_gel_main_see_all_button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 20px;
    background-color: #00953B;
    color: #ffffff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.index_gel_main_see_all_button:hover {
    background-color: #007c31;
}

/* === Filter Tabs (MODIFIED) === */
.index_gel_main_media_showcase_wrapper {
    padding: 15px 0px;
    max-width: 100%;
    margin: auto;
}

.index_gel_main_media_filter_tabs {
    display: flex;
    justify-content: space-between; /* Pushes first group to left, last item to right */
    align-items: center; /* Vertically align items */
    margin-bottom: 1.5rem;
    gap: 12px; /* Gap between the filter buttons group and the See All button */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* NEW: Wrapper for the filter buttons to keep them centered */
.index_gel_main_filter_buttons_group {
    display: flex;
    justify-content: center; /* Centers the filter buttons within their group */
    flex-grow: 1; /* Allows this group to take up available space */
    gap: 12px; /* Gap between individual filter buttons */
    margin-left: 150px;
    flex-wrap: wrap; /* Allow filter buttons to wrap too */
}

.index_gel_main_filter_btn {
    padding: 10px 20px;
    background-color: #e5e5e5;
    border: none;
    font-size: 15px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.index_gel_main_filter_btn:hover,
.index_gel_main_active_filter {
    background-color: #3E3E86;
    color: white;
}

/* === Grid Container & Cards === */
.index_gel_main_media_grid_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    height: auto;
    gap: 1.5rem;
}

.index_gel_main_media_card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    transition: transform 0.3s ease;
    height: 250px;
    display: block;
}

/* Image/Video inside card */
.index_gel_main_media_card img,
.index_gel_main_media_card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.index_gel_main_media_card:hover img {
    transform: scale(1.05);
}

/* ====================================================== */
/* === HOVER OVERLAY STYLES (MODIFIED) === */
/* ====================================================== */

.index_gel_main_media_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Adjust as needed */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;

    display: flex;
    justify-content: space-between; /* Space between text and icon */
    align-items: center; /* Vertically center content */
    padding: 0 1rem; /* Horizontal padding */
    box-sizing: border-box;

    transform: translateY(100%); /* Start completely below the card */
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.index_gel_main_media_card:hover .index_gel_main_media_overlay {
    opacity: 1;
    transform: translateY(0); /* Slide up */
}

.index_gel_main_media_overlay_text {
    flex-grow: 1; /* Allow text to take available space */
    text-align: left; /* Align text to the left */
    padding-right: 10px; /* Space between text and icon */
}

.index_gel_main_media_overlay_text h3 {
    margin: 0;
    font-size: 15px; /* Slightly smaller for 2 lines */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if title is too long */
}

.index_gel_main_media_overlay_text p {
    margin: 0;
    font-size: 0.85rem; /* Smaller font for description */
    opacity: 0.8;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3; /* Adjust line height for better appearance */
    max-height: 2.6em; /* 2 lines * line-height */
}

.index_gel_main_media_overlay_icons {
    display: flex;
    align-items: center; /* Vertically center the icon */
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.index_gel_main_icon_btn {
    display: grid;
    place-items: center;
    width: 40px; /* Slightly smaller icon */
    height: 40px; /* Slightly smaller icon */
    background-color: #fff;
    color: #3E3E86;
    border-radius: 50%;
    font-size: 1rem; /* Adjusted font size */
    text-decoration: none;
    border: none;
    cursor: pointer;

    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}

/* Only one icon, so no nth-child needed, just target directly */
.index_gel_main_media_card:hover .index_gel_main_icon_btn {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
}

.index_gel_main_icon_btn:hover {
    background-color: #3E3E86;
    color: #fff;
    transform: scale(1.1);
}

/* ====================================================== */
/* === LIGHTBOX (POPUP) STYLES (Adjusted for 140px Header) === */
/* ====================================================== */

.index_gel_main_lightbox_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding: 0;
    left: 0;
    top: 140px;
    width: 100%;
    height: calc(100vh - 140px);
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.index_gel_main_lightbox_close_btn {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #f1f1f1;
    font-size: 35px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

.index_gel_main_lightbox_close_btn:hover,
.index_gel_main_lightbox_close_btn:focus {
    color: #bbb;
    text-decoration: none;
}

.index_gel_main_lightbox_content_wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 89%;
    margin: 0;
    padding: 10px 0;
}

/* MODIFIED: Container for image/video in lightbox */
#index_gel_main_lightbox_media_display {
    display: flex; /* Use flex to center actual media */
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 95%; /* Increased width for mobile screens */
    height: 85%; /* Reserve space for the caption */
    max-width: 900px; /* Limit max width for large screens */
    animation: index_gel_main_zoomIn 0.5s;
}

.index_gel_main_lightbox_content_img { /* Renamed from .index_gel_main_lightbox_content */
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* NEW: Styles for video iframe in lightbox */
.index_gel_main_lightbox_content_video {
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes index_gel_main_zoomIn {
    from {transform: scale(0.7)}
    to {transform: scale(1)}
}

#index_gel_main_lightbox_caption {
    margin: auto;
    display: block;
    width: 90%;
    text-align: center;
    color: #ccc;
    padding: 5px 0;
    font-size: 1rem;
}

/* Navigation Arrows */
.index_gel_main_lightbox_nav {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -30px;
    color: white;
    font-weight: bold;
    font-size: 2rem;
    transition: 0.3s;
    user-select: none;
}

.index_gel_main_lightbox_prev {
    left: 5px;
}

.index_gel_main_lightbox_next {
    right: 5px;
}

.index_gel_main_lightbox_nav:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ====================================================== */
/* === MEDIA QUERIES (Responsiveness) === */
/* ====================================================== */

@media (max-width: 768px) {
    .index_gel_main_media_filter_tabs {
        justify-content: center;
        gap: 12px;
    }
    .index_gel_main_filter_buttons_group {
            margin-left: 0px;
        }
        #index_gel_main_lightbox_caption{
            position: absolute;
            bottom: 25%;
        }

    .index_gel_main_filter_buttons_group {
        flex-grow: unset;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }
    .index_gel_main_lightbox_content_wrapper {
            height: 100%;
        }

    .index_gel_main_filter_btn,
    .index_gel_main_see_all_button {
        flex: 1 1 auto;
        min-width: 100px;
        font-size: 0.9rem;
    }
    .index_gel_main_see_all_button {
        margin-top: 10px;
        position: inherit;
        width: auto;
    }

    /* 🎯 MOBILE LIGHTBOX FULL SCREEN ADJUSTMENT 🎯 */
    .index_gel_main_lightbox_modal {
        top: 0;
        height: 100vh;
        overflow-y: scroll;
    }

    .index_gel_main_lightbox_content_wrapper {
        min-height: 100%;
        padding: 30px 0;
    }

    .index_gel_main_lightbox_close_btn {
        right: 10px;
        font-size: 30px;
        top: 150px;
    }

    /* Adjusted for new media display container */
    #index_gel_main_lightbox_media_display {
        height: 75vh; /* Give more space for caption/controls on smaller screens */
    }

    .index_gel_main_lightbox_nav {
        font-size: 1.5rem;
        padding: 8px;
        margin-top: -20px;
    }

    /* Adjust overlay height and font size for smaller screens */
    .index_gel_main_media_overlay {
        height: 70px;
    }
    .index_gel_main_media_overlay_text h3 {
        font-size: 1rem;
    }
    .index_gel_main_media_overlay_text p {
        font-size: 0.8rem;
        max-height: 2.4em;
    }
    .index_gel_main_icon_btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}
@media (max-width: 480px) {
    .index_gel_main_photo_gallerY_conteinar_header h1 {
        font-size: 24px;
        padding-right: 20px;
    }
    .index_gel_main_media_filter_tabs {
        flex-direction: column;
        gap: 10px;
    }
    .index_gel_main_filter_buttons_group {
        width: 100%;
        gap: 8px;
    }
    .index_gel_main_filter_btn,
    .index_gel_main_see_all_button {
        padding: 8px 15px;
        width: 100%;
    }
    .index_gel_main_see_all_button {
        margin-top: 50px;
        width: auto;
        position: inherit;

    }
}