/* === GLOBAL STYLES === */
    body { 
        font-family: 'DM Sans', sans-serif; 
        padding-top: 85px; 
        background-color: #FFFFFF;
    }

    .elementor-container {
        max-width: 1320px;
        margin: 0 auto;
        padding-left: 8px;
  padding-right: 8px;   
        width: 100%;
    }
    
    .gap-lg-3 {
        gap: 0.5rem !important;
    }

    /* 1. HEADER STYLING */
    .navbar {
          background: white;
        height: 102px;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        border-color: #D9D9D9;
        transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
        padding: 5px 0px 5px 0px;
    }

    .navbar-nav > .nav-item > .nav-link { 
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px; 
        line-height: 20px;
        padding: 10px 20px;
    }
    



    .logo-box img {
        max-height: 60px;
        width: auto;
        object-fit: contain;
    }

    .navbar-nav .dropdown-menu {
        position: static;
        background: #F5F5F5;
    }



   

    /* 2. DESKTOP MENU & ANIMATION FIXES */
    @media (min-width: 992px) {
        /* Sirf Main Menu Items ko target karenge */
        .navbar-nav > .nav-item > .nav-link {
            font-size: 14.5px; 
            font-weight: 500; 
            text-transform: uppercase; 
            color: #333  ;
            padding: 20px 6px !important; 
            position: relative; 
            transition: color 0.3s ease; 
        }

        /* === FIX: MAIN MENU HOVER ANIMATION (DROPDOWN WALE BHI) === */
        /* Yahan .dropdown-toggle::after ko bhi same animation de di hai aur arrow hide kar diya hai */
        .navbar-nav > .nav-item > .nav-link::after,
        .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
            content: '';
            position: absolute;
            bottom: 9px; 
            left: 50%;
            transform: translateX(-50%); 
            width: 0; 
            height: 2px; 
            background-color: #3f444b; 
            transition: width 0.3s cubic-bezier(.58, .3, .005, 1); 
            pointer-events: none; 
            border: none !important; /* Bootstrap Arrow (Teer) hata diya */
            margin: 0 !important;
            display: block !important;
        }

        /* Hover karne par width badhegi (Sabhi items ke liye) */
        .navbar-nav > .nav-item > .nav-link:hover::after,
        .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover::after {
            width: 80%; 
        }
        
        .navbar-nav > .nav-item > .nav-link:hover { color: #000 !important; }
        
        /* ESG Special Color */
        .nav-link.text-green { color: #28a745 !important; font-weight: 700; }
        .nav-link.text-green::after { background-color: #28a745 !important; }

        /* === SUBMENU FIX === */
        .dropdown-menu {
            border-top: 3px solid #333; 
            border-radius: 0; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            min-width: 260px; 
            padding: 0;
            margin-top: 0; 
            border: 0; 
        }

        .dropdown-item {
            font-size: 14px; 
            font-weight: 400;
          text-transform: capitalize;
            letter-spacing: 1px;
            color: #171717;
            padding-left: 7px;
            padding-right: 7px;
            border-bottom: 1px solid #f0f0f0; 
            position: relative;
        }
        
        /* Submenu ke items par line nahi chahiye */
        .dropdown-item::after {
            display: none !important;
        }

        .dropdown-item:hover { 
            background-color: #f8f8f8; 
            padding-left: 25px; 
            transition: 0.2s; 
            color: #000;
        }
        
        /* Dropdown hover logic */
        .dropdown:hover .dropdown-menu { display: block; }
        
        .btn-linkedin {
            background-color: #0A66C2 !important; 
            color: white !important; 
            width: 32px; 
            height: 32px;
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border-radius: 4px; 
            padding:5px  !important;transition: all .3s;
        }
        .btn-linkedin::after { display: none !important; }
    }
    .btn-linkedin:hover {
            background-color: #1b1c1d !important; transition: all .3s;
           
        }

    /* 3. MOBILE MENU */
    @media (max-width: 991px) {
        .navbar-collapse {
            position: fixed; top: 85px; left: 0; width: 100%; height: calc(100vh - 85px);
            background: white; overflow-y: auto; border-top: 1px solid #ddd; z-index: 999;
        } 
        
        .navbar-nav {
            background: #F5F5F5;
        }
        
        .nav-link {
            padding: 15px 20px !important; font-size: 15px; font-weight: 600; text-transform: uppercase; color: #555;
            display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #A1A1A1;
            color: #000 !important;
            text-transform: capitalize;
        }
        .nav-link::after { display: none !important; }
        
        .bg-grey-active { background-color: #999; color: white !important; }
        .bg-grey-active i { color: white; }
        .dropdown-menu { border: none; padding: 0; margin: 0; background: #fff; box-shadow: none; }
        .dropdown-item { padding: 12px 30px; border-bottom: 1px solid #f5f5f5; font-size: 14px; color: #444; }
    }

    /* Dropdown Item ki Padding */
    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 13px 34px;
        font-size: 15px;
    }

    /* Sirf un items par border lagao jo aakhri (last) NAHI hain */
    .dropdown-menu li:not(:last-child) .dropdown-item {
        border-style: solid;
        border-color: #A1A1A1;
        border-bottom-width: 1px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }

    .elementor-social-icon svg {
        fill: #fff;
    }
.nav-item .nav-link {
    position: relative;
}

/* 2. Line Creation (Shuru mein hidden rahegi width: 0 ki wajah se) */
.nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Isko text ke hisaab se adjust kar lena (aapne 15px rakha tha) */
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* Shuru mein gayab */
    height: 2px;
    background-color: #3f444b;
    transition: width 0.3s cubic-bezier(.58, .3, .005, 1);
    pointer-events: none;
}

/* 3. HOVER EFFECT (Jab mouse menu ke upar jaye) */
.nav-item:hover .nav-link::after {
    width: 100%; /* Mouse aane par line puri aa jayegi */
}

/* 4. ACTIVE MENU EFFECT (Jis page par aap ho, wahan line hamesha fix rahegi) */
/* Bootstrap me aksar nav-link pe .active class hoti hai, ya nav-item pe */
.nav-item.active .nav-link::after,
.nav-item .nav-link.active::after {
    width: 100%; /* Active menu par line hamesha 100% dikhegi */
    background-color: #171717; /* Aap chaho to active menu ka color aur dark kar sakte ho */
}
    /* === HOVER SCROLL ARROWS STYLING (JS Menu) === */
    .scroll-up, .scroll-down {
        position: absolute;
        left: 0;
        height: 30px;
        background: rgba(248, 248, 248, 0.95);
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: ns-resize;
        z-index: 1050;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .scroll-up { border-bottom: 1px solid #ddd; }
    .scroll-down { border-top: 1px solid #ddd; }
    .scroll-up:hover, .scroll-down:hover { background: #e2e2e2; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

       /* === MOBILE MENU TOGGLE ICON (HAMBURGER TO X) === */
.elementor-menu-toggle svg {
    fill: #333333; /* Icon ka color dark grey set kiya */
    transition: transform 0.3s ease; /* Smooth rotation effect ke liye */
}

/* Default State (Menu Band Hai): Close wala (X) icon chupa do */
.elementor-menu-toggle .elementor-menu-toggle__icon--close {
    display: none;
}
.elementor-menu-toggle .elementor-menu-toggle__icon--open {
    display: inline-block;
}

/* Active State (Menu Khula Hai): Jab aria-expanded "true" ho jaye */
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close {
    display: inline-block;
    transform: rotate(90deg); /* Halka sa animation click hone par */
}
.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open {
    display: none;
}

/* Button focus outline hatane ke liye (Taki click pe border na aaye) */
.elementor-menu-toggle:focus {
    outline: none;
    box-shadow: none;
}
    /* === WELCOME & FLAGS STYLING === */
.welcome-flags-section {
    position: relative;
    z-index: 10; /* Taki slider ke upar dikhe */
}

/* Welcome Text with Side Lines */
.welcome-line {
 
  
 
    position: relative;
    display: inline-block;
    color: #a1a1a1 !important;
    text-transform: uppercase;

     
 
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
 
  width: fit-content;
  margin: 0 auto;
  line-height: 24px;
}

.welcome-line::before, 
.welcome-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 50px; /* Line width */
    height: 1px;
    background: #A1A1A1; /* Line color */
}

.welcome-line::before { left: -70px; }
.welcome-line::after { right: -70px; }

/* Flags Styling */
.flag-img {
     width: 35px;
  height: 35px;
    object-fit: contain; /* Circle ke andar fit rahe */
   
    margin-bottom: 5px;
}

.flag-name {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #171717;
    line-height: 22px;
    text-transform: uppercase;
}

/* Mobile responsive lines */
@media (max-width: 576px) {
    .welcome-line::before, .welcome-line::after { width: 30px; }
    .welcome-line::before { left: -40px; }
    .welcome-line::after { right: -40px; }
}
/* === WELCOME & FLAGS SECTION STYLING === */
.welcome-flags-section {
    padding: 30px 0 20px 0;
    background-color: #ffffff; /* White background */
}
   
   /* === HERO SLIDER STYLING (FULL HEIGHT & NO ZOOM) === */
.hero-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Slide Height & Setup (Full Page Cover) */
.carousel-item {
    /* 100vh matlab poori screen, usme se 85px (Header ki height) minus kar di */
    height: calc(85vh - 90px); 
    min-height: 450px;
    position: relative;
    background-color: #000;
}

/* Background Image Layer (No Zoom Effect) */
.slider-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Yahan se transform aur transition hata diya gaya hai, ab image fix rahegi */
}

/* (Pehle yahan .carousel-item.active .slider-bg wala code tha jo zoom karta tha, wo humne permanently delete kar diya hai) */

/* Dark Overlay for Text Readability */
.slider-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

/* Content Container */
.carousel-item .container {
    position: relative;
    z-index: 2; 
}

/* Link Wrapper setup (Poore text par click chalega) */
.slide-link-wrapper {
    display: block;
    text-decoration: none;
    padding: 20px;
}
.slide-link-wrapper:hover { text-decoration: none; }

/* TEXT TYPOGRAPHY (STATIC - NO ANIMATION) */
.slider-title {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 20px;text-align: left;
      font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 45px;
}

.slider-text {
     font-size: 18px;
    color: #ffffff;
    margin-bottom: 25px;  line-height: 1.4;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
     
}

/* Custom Learn More Button */
.btn-slider {
  
    color: #ffffff;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.3s;
    text-align: left;
      background-color: #A1A1A1;
  font-weight: 500;
  border-width: 0px;
  border-radius: 0px;
  float: left;
}

.slide-link-wrapper:hover .btn-slider {
    background-color: #f9fbfc; 
    color: #414040;
}
@media (max-width: 768px) {
    .slider-title {
     text-align: center;
    }
   .slider-text {
     text-align: center;
    }
    .btn-slider {
        float: none;
    }
}
/* === CUSTOM ELEMENTOR ARROWS === */
/* === CUSTOM LEARN MORE BUTTON (Elementor Trick) === */
.btn-slider {
    position: relative; /* Arrow ko set karne ke liye zaroori */
    background-color: #A1A1A1; 
    color: #ffffff;
    /* Right side mein padding zyada di hai taaki Arrow ke liye jagah bache */
    padding: 12px 50px 12px 25px; 
    font-size: 14px;
    font-weight: 500;
    border-radius: 0px;
    border: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
    float: left;
}

/* Arrow CSS se lana (::after pseudo-element) */
.btn-slider::after {
    content: "";
    position: absolute;
    right: 20px; /* Button ke right edge se doori */
    top: 50%;
    width: 25px;
    height: 10px;
    background-image: url('../images/arrow-right.png'); /* Aapki image ka path */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Added hover effect for arrow-right.png */
.btn-slider:hover::after {
    filter: invert(1); /* Inverts the color of the arrow image */
    transform: translateY(-50%) scale(1.1); /* Slightly enlarges the arrow on hover */
    transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition for the effect */
}

/* === HOVER EFFECTS === *//* === EXACT ELEMENTOR PILL NAVIGATION (CSS IMAGE TRICK) === */
/* === PILL NAVIGATION WITH WHITE CIRCLES === */
/* === FINAL ELEMENTOR MATCHING NAVIGATION === */
.slider-bottom-controls {
    position: absolute;
    bottom: 25px; /* Aapke bheje hue code ke hisaab se */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.4); 
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

/* White Circle Button */
.custom-nav-btn {
    position: relative;
    width: 35px;  /* Elementor width */
    height: 35px; /* Elementor height */
    background-color: #ffffff; /* White background */
    border-radius: 50%; /* Perfect circle */
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    padding: 0;
}

/* Arrow Image (CSS Trick) */
.custom-nav-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px; 
    height: 8px;
    background-image: url('../images/arrow-slider.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Perfect Center Alignment */
    transform: translate(-31%, -50%); 
    transition: transform 0.3s ease;
}

/* Prev Button Rotation */
.btn-next::before {
    transform: translate(-74%, -50%) rotate(180deg);
}

/* === HOVER EFFECTS === */

/* Next Hover: Arrow aage khiskega */
.btn-next:hover::before {
    
}

/* Prev Hover: Arrow piche khiskega */
.btn-next:hover::before {
    
}

.custom-nav-btn:hover {
    background-color: #f8f8f8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Middle Divider Line */
.nav-divider {
    width: 30px;
    height: 1px;
    background-color: #faf9f900;
    opacity: 0.3;
}

.custom-nav-btn:focus {
    outline: none;
}

.custom-nav-btn:focus { outline: none; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .slider-bottom-controls { bottom: 20px; padding: 5px 15px; }
    .custom-nav-btn { width: 30px; height: 25px; }
    .custom-nav-btn::before { width: 30px; height: 6px; } /* Mobile pe arrow chhota */
    .nav-divider { width: 20px; }
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .carousel-item { height: 60vh; }
    .slider-title { font-size: 28px; }
    .slider-text { font-size: 14px; }
}


/* === RESTRUCTURING SECTION STYLING === */
.new_box {
  padding: 15px 94px 15px 15px;
}
.new_box_img {
      padding: 15px 15px 15px 15px;
}.new_box_img_scond {
  padding: 0px 0px 0px 075px;
  }


.description-text{
  margin: 015px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
  text-align: justify;  --kit-widget-spacing: 15px;   
  color: #A1A1A1 !important;   
  font-size: 15px;;
}
.description-text:not(:last-child) {
  --kit-widget-spacing: 15px;
}
.about_hading {
font-size: 13px; letter-spacing: 2px;
  font-family: "Poppins", Sans-serif;
  color:  #A1A1A1 !important;font-size: 18px !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: fit-content;
  /* margin: 0 auto; */
  line-height: 24px;
}
.about_hading_second{
      color: #171717;
  font-family: "Poppins", Sans-serif;
  font-size: 36px;
  font-weight:  500;;
  line-height: 45px;
    font-size: clamp(25px, 2vw, 36px) !important;
    margin-block-end: 1rem;
  margin-block-start: .5rem;
}
 @media (max-width: 767px) {
  .new_box_img_scond {
    padding: 0px 0px 0px 0px;
  }
.new_box {
 padding: 0px 0px 0px 0px;
}
.new_box_img {
    padding: 0px 0px 0px 0px;
}
 .about_hading_second    {
    text-align: center;    line-height: 36px;     font-weight: 400;  font-size: clamp(25px, 2vw, 36px) !important;
 }
 
.description-text{
  text-align: center;
}
.mob_btn{
    text-align: center;
}

}

.restructuring-section {
    background-color: #ffffff;
}

/* Overlap Wrapper */
.experience-image-wrapper {
    padding-bottom: 50px; /* Space for the overlapping box */
}

@media (max-width: 767px) {
  experience-image-wrapper {
    padding: 30px 30px 30px 30px;
      background-color: var(--e-global-color-63011f8);
  padding: 45px 45px 45px 45px;
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  border-color: var(--e-global-color-eb29d2f);
  }
 
 
}
.main-img {
    width: 100%; /* Image ko thoda chota rakha taaki box overlap ho sake */
    display: block;
    margin-left: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      display: inline-block;
  vertical-align: middle;  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
}

/* The Overlapping Grey Box */
.experience-box {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #9f9f9f; /* Exact grey color from image */
    color: #ffffff;
     
     
    z-index: 5;
      background-color: #A1A1A1;
  padding: 45px 45px 45px 45px;
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  border-color: #FFFFFF;
}
.experience-box-counter {
   align-items: center;
  display: flex;
  flex-direction: column;
 
}.exp-text  {

  align-items: center;
  display: flex;
  flex: 1;
  font-size: 19px;
  font-weight: 400;
  justify-content: center;
  line-height: 2.5;
  margin: 0;
  padding: 0;
  
}
.exp-number {
     color: #FFFFFF;
  font-family: "Poppins", Sans-serif;
  font-size: 80px;
  font-weight: 400;
      display: flex;
  flex: 1;
 
  
  line-height: 1;
  text-align: center;  margin-bottom: 21px;
     
}

.exp-text {
      color: #FFF5E9;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.exp-years {
    font-size: 32px;
    display: block;
    margin-bottom: 5px;color: #FFFFFF;
  font-family: "Poppins", Sans-serif;
  font-size: clamp(30px, 5vw, 55px);
  font-weight: 400;
}

/* Adjusting Read More Button for this section */
.btn-grey-style {
    background-color: #A1A1A1 !important;
    padding-right: 50px !important;
}

.btn-comman {
    position: relative; /* Arrow ko set karne ke liye zaroori */
    background-color: #A1A1A1; 
    color: #ffffff;
    /* Right side mein padding zyada di hai taaki Arrow ke liye jagah bache */
    padding: 12px 50px 12px 25px; 
    font-size: 14px;
    font-weight: 500;
    border-radius: 0px;
    border: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
 
}

.btn-comman:hover {
     
    color: #ffffff;
     
 
}
/* Arrow CSS se lana (::after pseudo-element) */
.btn-comman::after {
    content: "";
    position: absolute;
    right: 20px; /* Button ke right edge se doori */
    top: 50%;
    width: 25px;
    height: 10px;
    background-image: url('../images/arrow-right.png'); /* Aapki image ka path */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.btn-grey-style::after {
    filter: none !important; /* Agar arrow image white hai to */
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .main-img {
        width: 100%;
    }
    .experience-box {
        position: relative;
      
         
        padding: 30px;
            position: relative;
     
    margin-top: -30px;
    padding: 30px;
    margin: -79px 37px 37px 37px;
  }
    
   
}



        /* === OVERVIEW SECTION STYLING === */
        .section-main-title {
            font-size: 36px;
            font-weight: 500;
            color: #171717;
            max-width: 800px;
            margin: 0 auto;
        }

        .category-title {
            font-size: 18px;
            font-weight: 500;
            color: #A1A1A1;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Service CTA Card Styling */
        .service-cta-card {
            position: relative;
            height: 350px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            padding: 30px;
        }

        .cta-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.5s ease;
            z-index: 1;
        }

        .service-cta-card:hover .cta-bg {
            transform: scale(1.1);
            /* Hover par image zoom hogi */
        }

        .cta-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            /* Dark overlay */
            z-index: 2;
            transition: background 0.3s ease;
        }

        .service-cta-card:hover .cta-overlay {
            background: rgba(0, 0, 0, 0.6);
            /* Hover par thoda dark hoga */
        }

        .cta-content {
            position: relative;
            z-index: 3;
        }

        .cta-content h2,
        .cta-content h4 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .cta-content p {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .cta-link {
            color: #fff;
            text-decoration: underline;
            font-weight: 500;
            font-size: 14px;
        }

        /* View All Button */
        .btn-view-all {
            background-color: #333;
            color: #fff;
            padding: 12px 30px;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background 0.3s;
        }

        .btn-view-all:hover {
            background-color: #0A66C2;
            color: #fff;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .section-main-title {
                font-size: 26px;
            }

            .service-cta-card {
                height: 300px;
            }
        }

        /* === SERVICE CARD HOVER EFFECT: BOTTOM TO UP === */
        .service-hover-card {
            position: relative;
            overflow: hidden;
            /* Bahar jata hua overlay chhupane ke liye */
            cursor: pointer;
            height: 100%;
        }

        /* Static Bottom Bar */
        .bottom-static-bar {
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);;
            color: #fff;
            padding: 14px;
            font-size: 20px;
            font-weight: 400;
            z-index: 2;
            transition: opacity 0.3s ease;
              font-family: "Poppins", Sans-serif;
              line-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(18px, 1vw, 20px) !important;
  text-transform: capitalize;
        }

        /* Hover par niche wala bar gayab ho jayega */
        .service-hover-card:hover .bottom-static-bar {
            opacity: 0;
        }

        /* Full Overlay Content */
        .full-content-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0, 0, 0, 0.5);;;
            /* Darker shade for full cover */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            /* Text top se shuru hoga */
              padding: 10px 20px 20px;
            z-index: 3;
  font-family: "Poppins", Sans-serif;
            /* Animation: Parda niche rakho (100%) */
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Hover par parda upar (0) khisko */
        .service-hover-card:hover .full-content-overlay {
            transform: translateY(0);
        }

        .overlay-inner-text h4 {
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 3px;  font-family: "Poppins", Sans-serif;

            padding-bottom: 10px;
            line-height: 40px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: clamp(18px, 1vw, 20px) !important;
            text-transform: capitalize;
        }

        .overlay-inner-text p {
            color: #ddd;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 25px;
        } 
         .overlay-inner-text  li{
            color: #ddd;
            font-size: 16px;
          
        }


        .btn-find-more {
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            border-color: #fff;
            color: #fff;
            padding: 12px 24px;
            border: 1px solid white;
            text-align: center;
            transition: all .3s;
            margin-top: 12px;
            ;
        }

        .btn-find-more:hover {
            color: #000;
            background-color: #fff;
        }

      .elementor-cta__bg{  background-position: 50%;
  background-size: cover;
  z-index: 1;}
.gap-33{
gap:1.1rem!important;
}
/* === OVERVIEW HEADINGS CSS === */
/* === CUSTOM MODAL (DIALOG BOX) STYLING === */
.pop--ch-on li{
color: #777777;
}
  .modal-lg, .modal-xl {
    --bs-modal-width: 76%;
  }
/* Modal Content Box (Clean Square look) */
.custom-service-modal .modal-content {
    border-radius: 0px; /* Square corners */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    background-color: #ffffff;
}

/* Modal Body Padding */
.custom-service-modal .modal-body {
    padding: 60px; /* Badi padding jaisa image mein hai */
}

/* Heading Styling */
.custom-service-modal .modal-title {
    font-size: 32px;
    font-weight: 400; /* Regular font weight */
    color: #171717;
    margin-bottom: 25px;
}

/* Paragraph Text Styling */
.custom-service-modal .modal-text-content p {
    color: #777777; /* Grey text */
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Bullet List Styling */
.custom-service-modal .modal-list {
    color: #777777;
    font-size: 15px;
    line-height: 1.8;
    padding-left: 20px;
}

.custom-service-modal .modal-list li {
    margin-bottom: 5px;
}

/* === TOP RIGHT FIXED CLOSE BUTTON ('X') === */
.custom-modal-close {
    position: fixed;
    top: 25px;
    right: 35px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 40px;
    line-height: 1;
    z-index: 1060; /* Backdrop ke upar rahega */
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Hover par 'X' halka sa ghoomega/bada hoga */
.custom-modal-close:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Darker Backdrop (Overlay) */
.modal-backdrop.show {
    opacity: 0.8 !important; /* Thoda zyada dark kiya */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .custom-service-modal .modal-body {
        padding: 30px;
    }
    .custom-service-modal .modal-title {
        font-size: 26px;
    }
    .custom-modal-close {
        top: 15px;
        right: 15px;
        font-size: 35px;
    }
}
/* Side lines wali subheading ka logic */
.sub-heading-with-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    color: #A1A1A1; /* Grey color from image */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;  font-family: "Poppins", Sans-serif;
}

/* Text ke Left aur Right ki patli lines */
.sub-heading-with-lines::before,
.sub-heading-with-lines::after {
    content: "";
    height: 1px;
    width: 40px; /* Line ki lambaai */
    background-color: #A1A1A1;
    margin: 0 15px; /* Line aur text ke beech ka gap */
}

/* Main badi wali heading */
.main-overview-heading {
    /* clamp() se mobile par text auto-chota ho jayega aur desktop par 36px rahega */
 
    font-weight: 400; /* Regular font weight */
    color: #171717; /* Dark black/grey */
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.4;  
  font-family: "Poppins", Sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 45px;
} .nesjhe{
      
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
 color: #a1a1a1;
  margin: 0 auto;
  line-height: 24px;
  margin-top: 15px;
    margin: 075px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
  }
/* 1. Small Card ki Fix Height (Zaroori hai!) */
.small-card {
    height: 290px; 
}

/* 2. Logic for exact match of Tall Card:
   Middle column mein 3 chote cards hain, toh math ye hoga:
   250px (Card 1) + 16px (gap) + 250px (Card 2) + 16px (gap) + 250px (Card 3) = 782px
   
   Lekin aapke first column mein ek bada aur ek chota card hai.
   Agar Total Column Height 782px honi chahiye:
   Tall Card Height = Total Height (782px) - Small Card (250px) - Gap (16px)
   Tall Card Height = 516px 
*/
.tall-card {
    height: 600px; /* 650px ko change karke isko 516px karein perfect alignment ke liye */
}

.service-hover-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
 /*    border-radius: 4px; Halka sa round border premium look ke liye */
    display: block; /* Ensures it behaves as a solid block */
}

/* 3. Image Stretch Fix */
.service-hover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ye image ko khinchne se rokta hai aur center se crop karta hai */
    display: block;
}

/* 4. Mobile Layout */
@media (max-width: 991px) {
    .tall-card, .small-card {
        height: 300px; /* Mobile par saare cards ki height ek jaisi ho jayegi */
    }
}



/* === "AT A GLANCE" SECTION CSS === */

/* Top Sub-Heading with Side Lines */
.sub-heading-left {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #A1A1A1;
    text-transform: uppercase;
    letter-spacing: 2px;
 

 
 
  width: fit-content;

  line-height: 24px;
}

.sub-heading-left::before,
.sub-heading-left::after {
    content: "";
    height: 1px;
    width: 40px;
    background-color: #A1A1A1;
}

.sub-heading-left::before { margin-right: 15px; }
.sub-heading-left::after { margin-left: 15px; }

/* Section Typography */
.section-title {
    font-family: 'Poppins', sans-serif; /* Ye lagate hi gol wala 'a' aa jayega */
    font-size: clamp(28px, 4vw, 42px); /* Mobile me auto chota hoga */
    font-weight: 400;
    color: #171717;
    line-height: 1.3;
      font-weight: 400;
  line-height: 45px;
}
.section-title_new {
      border: none;
  border-bottom: 1px solid var(--gray);
  border-radius: 0;
  padding-bottom: clamp(25px, 3vw, 50px);
    color: var(--e-global-color-6534ec2);
  font-family: "Poppins", Sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 45px;
    margin-block-end: 1rem;
  margin-block-start: .5rem;
}
 
.section-description {
    font-size: 15px;
    line-height: 1.8;
    color: #888888;
    max-width: 95%; /* Image ke hisaab se width set ki */
      margin-block-end: 15px;
}

/* === LARGE CIRCULAR BUTTON === */
.circle-btn {
    
    border-radius: 50%;
    border: 1px solid #a1a1a1; /* Patla grey border */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #171717;
    
  
    transition: all 0.3s ease;
    background-color: #ffffff;
      font-family: "Poppins", Sans-serif;
  font-weight: 500;
  line-height: 26px;
   font-size: clamp(14px, 1.6vw, 24px) !important;
  line-height: 26px;
  width: clamp(120px, 13vw, 250px) !important;
  aspect-ratio: 1;
  display: flex;
  font-size: clamp(14px, 1.6vw, 24px) !important;
  justify-content: center;
  align-items: center;
  border-radius: 50% !important;
  margin-left: auto;
}
 

.btn-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.thin-arrow {
    transition: transform 0.3s ease; /* Hover animation ke liye */
}

/* Hover Animation for Circle Button */
.circle-btn:hover {
   
}

/* Hover par arrow ka color aur animation */
.circle-btn:hover .thin-arrow {
    stroke: #ffffff; /* SVG ka color yahan se white hoga */
 
}

/* (Optional) Agar arrow white ho raha hai, to button ka text bhi white karna hoga */
.circle-btn:hover {
     border-color: #a1a1a1; /* Border dark ho jayega */
    background-color: #a1a1a1; /* Halka grey background */
    color: #ffffff;
}

/* === LAPTOP VIDEO MOCKUP === */
.video-mockup-wrapper {
    position: relative;
    display: inline-block;
    max-width: 700px; /* Laptop image ki width control karne ke liye */
    width: 100%;
}

.laptop-img {
    width: 100%;
    height: auto;
}

/* Red Play Button Positioning */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; /* Play button ka size */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.play-icon {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4)); /* 3D shadow effect */
}

.play-btn-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Hover pe thoda bada hoga */
    filter: brightness(1.2);
}

/* Bottom Divider Line */
.custom-news-divider {
    border-top: 1px solid #cccccc;
    opacity: 1;
    margin: 0;
    width: 100%;
}

/* === MOBILE RESPONSIVENESS === */
@media (max-width: 991px) {
    /* Mobile me text aur subheading center mein aa jayenge */
    .sub-heading-left { justify-content: center; }
    .section-title { text-align: center; }
    .section-description { text-align: center; margin: 0 auto; }
    
    /* Buttons ko upar se gap denge */
    .circle-btn { 
        width: 140px; 
        height: 140px; 
        font-size: 16px;
        margin-top: 30px; 
    }
    
    .play-btn-overlay { width: 50px; } /* Mobile pe play button chota */
}
/* === FOOTER STYLING === */
.custom-footer {
    background-color: #171717; /* Dark Grey/Black background */
    color: #A1A1A1; /* Grey text */
    font-family: 'Poppins', sans-serif;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;

}

/* Headings (OVERVIEW, IMPORTANT LINKS) */
.footer-heading {
    color: #ffffff;
     
   
 
      font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Footer Links List */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #A1A1A1;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff; /* Hover pe white hoga */
}

/* Contact Info List */
.footer-contact li {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.footer-contact a {
    color: #A1A1A1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}

/* Social Icon */
.footer-social a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.footer-social a:hover {
    transform: translateY(-3px); /* Hover pe thoda upar jump karega */
}

/* Bottom Bar Styling */
.custom-border {
    border-color: rgba(255, 255, 255, 0.1) !important; /* Patli grey border line */
}

.copyright-text {
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
}

/* Back to Top Button */
.back-to-top-btn {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    border-radius: 50%; /* Circle shape */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.back-to-top-btn:hover {
    background-color: #ffffff;
}

.back-to-top-btn:hover svg {
    fill: #171717; /* Hover pe icon black ho jayega */
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .footer-heading {
        margin-top: 20px;
    }
    .back-to-top-btn {
        position: absolute; /* Mobile pe isko side mein set karne ke liye */
        right: 15px;
    }
}/* Full Width Top Border ke liye */
.footer-bottom-wrapper {
    border-top: 1px solid #a1a1a1; /* Patli safed/grey line */
    width: 100%; /* Line ko edge-to-edge le jane ke liye */
}

/* === FLOATING BACK TO TOP BUTTON CSS === */
.back-to-top-btn {
    position: fixed;
    bottom: 30px; /* Niche se doori */
    right: 30px;  /* Right se doori */
    width: 45px;
    height: 45px;
    background-color: #A1A1A1; /* Grey background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 999; /* Sabse upar dikhane ke liye */
    
    /* Shuru mein button chhupa rahega */
    opacity: 0; 
    visibility: hidden;
    transform: translateY(20px); /* Thoda niche dhakela hua */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
 
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: #6d6d6d;
  color: #fff !important;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  line-height: 40px;
  cursor: pointer;
}

/* Jab JS ye class add karega tab dikhega */
.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Upar aa jayega */
}

/* Hover Effect */
.back-to-top-btn:hover {
    background-color: #6d6d6d;
  color: #fff !important;
}

/* Mobile Screen Adjustment */
@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}