/* Css For Biztech */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header/style-one/style-two
5. Main Slider/style-one/style-two
6. Intro Section
7. Welcome Section
9. Cta Section
8. Research Fields
10. Testimonial Section
11. Researches Section
12. Team Section
14. Video
15. Fact Counter
16. News Section
19. Clients Section
20. Main Footer
21. Footer Bottom
22. Research Style Two
23. Innovative Solution
24. Discover Section
25. Testimonial Section
26. Chooseus Section
27. News Style Two
28. Page Title
29. Research Page Section
30. Research Details
31. Professor Page Section
32. Professor Details
33. About Section
34. Error Section
35. Blog Page Section
36. Blog Details
37. Blog Sidebar
38. Contact Section
39. Google Map


**********************************************/



/*** 

====================================================================
  Reset
====================================================================

 ***/
* {
  margin:0px;
  padding:0px;
  border:none;
  outline:none;
}


/*** 

====================================================================
  Global Settings
====================================================================

 ***/


body {
  font-size:16px;
  color:#6E6E6E;
  line-height:28px;
  font-weight:400;
  background:#ffffff;
  font-family: 'Inter', sans-serif;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  -webkit-font-smoothing: antialiased;
}

  @media (min-width:1200px) {
  .container {
    max-width: 1200px;
    padding: 0px 15px;
  }
}

.large-container{
  max-width: 1550px;
  padding: 0px 15px;
  margin: 0 auto;
}

.container-fluid{
  padding: 0px;
}

.auto-container{
  position:static;
  max-width:1320px;
  padding:0px 15px;
  margin:0 auto;
}

.small-container{
  max-width:680px;
  margin:0 auto;
}

.boxed_wrapper{
  position: relative;
  margin: 0 auto;
  overflow: hidden !important;
  width: 100%;
  min-width: 300px;
}


a{
  text-decoration:none;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

a:hover{
  text-decoration:none;
  outline:none;
}

input,button,select,textarea{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  background: transparent;
}

::-webkit-input-placeholder {
  color: inherit;
}

::-moz-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

ul,li{
  list-style:none;
  padding:0px;
  margin:0px; 
}

input{
  transition: all 500ms ease;
}

button:focus,
input:focus,
textarea:focus{
  outline: none;
  box-shadow: none;
  transition: all 500ms ease;
}

p{
  position: relative;
  font-family: 'Inter', sans-serif;
  color: #6E6E6E;
  font-weight: 400;
  margin: 0px;
  transition: all 500ms ease;
}

h1,h2,h3,h4,h5,h6{
  position:relative;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  color: #222;
  margin: 0px;
  transition: all 500ms ease;
}

.centred{
  text-align: center;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}

.special_fonts{
  font-family: 'DM Sans', sans-serif;
}


figure{
  margin: 0px;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
}

/** button **/


.theme-btn-one {
  display: inline-block !important;
  padding: 12px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  border: 2px solid #e74c3c !important;
  background-color: #e74c3c !important;   /* Default filled red */
  color: #ffffff !important;              /* White text */
  -webkit-text-fill-color: #ffffff !important; /* Safari fix */
  box-shadow: 0 8px 20px rgba(231, 76, 60, 0.15) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* Hover: turn into outline with red text */
.theme-btn-one:hover {
  background-color: #ffffff !important;   /* White background */
  color: #e74c3c !important;               /* Red text */
  -webkit-text-fill-color: #e74c3c !important; /* Safari fix */
  box-shadow: 0 12px 24px rgba(231, 76, 60, 0.3) !important;
}

/* Remove unwanted overlays from old theme CSS */
.theme-btn-one::before,
.theme-btn-one::after {
  content: none !important;
}

.row{
  --bs-gutter-x: 30px;
}

.pagination{
  position: relative;
  display: block;
}

.pagination li{
  position: relative;
  display: inline-block;
  margin-right: 7px;
}

.pagination li:last-child{
  margin: 0px !important;
}

.pagination li a{
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  height: 60px;
  width: 60px;
  line-height: 60px;
  background: #ffffff;
  font-family: 'Poppins', sans-serif;
  border: 1px solid #E5E5E5;
  text-align: center;
  color: #222;
  z-index: 1;
  border-radius: 50%;
  transition: all 500ms ease;
}

.pagination li a:hover,
.pagination li a.current{
  box-shadow: 0px 15px 40px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.sec-pad{
  padding: 60px 0px;
}

.mr-0{
  margin: 0px !important;
}

/** scroll-to-top **/

.scroll-to-top{
  position: fixed;
  right: 0px;
  bottom: 100px;
  transform: rotate(90deg);
  z-index: 99;
}

.scroll-to-top .visible {
  visibility: visible!important;
  opacity: 1!important;
}

.scroll-to-top .scroll-top-inner {
  opacity: 0;
  visibility: hidden;
}

.scroll-to-top .scroll-top-inner{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
  -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
  transition: all cubic-bezier(.4,0,.2,1) .4s;
}

.scroll-to-top .scroll-bar {
  width: 50px;
  height: 2px;
  margin-right: 10px;
  position: relative;
}

.scroll-to-top .scroll-bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: red;
}

.scroll-to-top .scroll-bar .bar-inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: black;
}

.scroll-to-top .scroll-bar-text{
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: red;
  transition: all 500ms ease;
}

.scroll-to-top .scroll-bar-text:hover{
  transform: scale(1.1);
}

@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes diagonal-slide {
  from { top: 0; left: 0; animation-timing-function: linear; }
  20% { top: -5px; left: -5px; animation-timing-function: linear; }
  40% { top: 5px; left: -5px; animation-timing-function: linear; }
  60% { top: 5px; left: 5px; animation-timing-function: linear; }
  80% { top: -5px; left: 5px; animation-timing-function: linear; }
  to { top: 0; left: 0; animation-timing-function: linear; }
}

.sec-title{
  position: relative;
  display: block;
}

.sec-title .sub-title {
  color: #e32636;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

.sec-title h2{
  position: relative;
  display: block;
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  margin: 0px;
}

.sec-title.light h2{
  color: #fff;
}

.owl-dots-none .owl-dots,
.owl-nav-none .owl-nav{
  display: none !important;
}





/*** 

====================================================================
                        Home-Page-One
====================================================================

/**Stop horizontal scroolling Start **/
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}

img, iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}
/**Stop horizontal scroolling End **/


/** main-header **/

.main-header{
  position:relative;
  left:0px;
  top:0px;
  right: 0px;
  z-index:999;
  width:100%;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03);
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.mobile-brand-name {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #E32636;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  white-space: nowrap;
  display: none;
  pointer-events: none; /* Avoid click-blocking hamburger */
}

@media (max-width: 767px) {
  /* Brand name ko center karna aur size badhana */
  .mobile-brand-name {
    display: block;
    font-size: 18px; /* Size badhaya gaya */
    text-align: center; /* Brand name ko center kiya gaya */
    width: 100%; /* Pure header ki choudaai lene ke liye */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Isse horizontally aur vertically center hoga */
    z-index: 11;
    white-space: nowrap;
    pointer-events: none;
  }  
}

@media (max-width: 767px) {
  /* This ensures the brand name is visible in the normal main header */
  .mobile-brand-name {
    display: block;
  }

  body.fixed-header .main-header .mobile-brand-name {
    display: none;
  }
}

/* Capsule Sticky Header */
.sticky-header{
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 60%;
    top: 15px;
    width: auto;
    max-width: 1000px;
    margin-left: -450px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.08);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Jab JavaScript .fixed-header class add karta hai */
.fixed-header .sticky-header{
    z-index:999;
    opacity:1;
    visibility:visible;
    -ms-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -op-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -ms-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    -op-animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -op-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -op-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Mobile view ke liye responsive styles */
@media (max-width: 768px) {
    /* Hide desktop sticky header completely on mobile */
    .sticky-header {
        display: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
@media (max-width: 768px) {
  body.fixed-header .sticky-header {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    padding: 10px 25px !important;
    border-radius: 30px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
  }
}

    /* Main Header (when NOT sticky, at the top of the page) */
    .main-header {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 999;
        background-color: #FFFFFF; /* White background for visibility */
        box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        padding: 15px 35px !important; /* Adjusted vertical padding for integration */
        box-sizing: border-box;
        height: auto;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: all 0.5s ease-in-out;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        clip-path: none !important;
        -webkit-clip-path: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Header Top - Hide on mobile */
    .header-top {
        display: none !important;
    }

    /* Header Lower - Ensure it takes full width and has correct padding */
    .header-lower {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Auto Container - Ensure it takes full width within header-lower */
    .header-lower .auto-container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Outer Box - THE CRUCIAL FLEX CONTAINER FOR LOGO AND HAMBURGER */
    .header-lower .outer-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    /* Logo Box - Ensure it sticks to the left */
    .header-lower .logo-box {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 180px !important;
        width: auto !important;
        text-align: left !important;
        float: none !important;
        position: static !important;
        left: auto !important;
    }

    .header-lower .logo-box img {
        height: 70px !important; /* Adjusted logo height for tighter fit */
        max-width: 100% !important;
        width: auto !important;
        display: block !important;
    }

    /* Menu Area - Container for mobile nav toggler and main menu */
    .header-lower .menu-area {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
    }

    /* Mobile Nav Toggler (Hamburger Icon) - No "box" around it */
    .mobile-nav-toggler {
        display: block !important;
        font-size: 28px !important;
        cursor: pointer;
        line-height: 1 !important;
        padding: 10px 12px !important; /* Keep padding for spacing of lines */
        height: auto !important;
        box-sizing: border-box !important;
        z-index: 10000;
        transition: all 0.3s ease;

        background-color: transparent !important; /* No background */
        border: none !important; /* No border */
        border-radius: 0 !important; /* No border-radius */
        box-shadow: none !important; /* No shadow */
        color: #222222 !important; /* Keep the line color */
        text-align: center !important;

        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        margin: 0 !important;
        float: none !important;
        position: static !important;
    }

    .mobile-nav-toggler:hover {
        color: #e63946 !important; /* Accent color on hover for lines */
        background-color: transparent !important; /* Ensure no background on hover */
        border: none !important; /* Ensure no border on hover */
        box-shadow: none !important; /* Ensure no shadow on hover */
    }

    /* Individual icon bars - unchanged, as they form the lines */
    .mobile-nav-toggler .icon-bar {
        display: block !important;
        width: 28px !important;
        height: 3px !important;
        background-color: currentColor !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease-in-out;
    }

    /* Main Menu - Hide on mobile */
    .main-menu {
        display: none !important;
    }

    /* Menu Right Content - Hide on mobile */
    .menu-right-content {
        display: none !important;
    }

    /* Sticky Header (Capsule) - Mobile specific adjustments for better look */
    body.fixed-header .main-header {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60% !important; /* Capsule width */
        max-width: none !important;
        margin-left: 0 !important;
        z-index: 9999 !important;
        background-color: rgba(0, 0, 0, 0.10) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 30px !important; /* Keep capsule shape */
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.08) !important;
        /* Increased padding for more breathing room inside the capsule */
        padding: 10px 25px !important;
        box-sizing: border-box;
        border-bottom: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    /* Styles for the inner elements of the sticky header */
    body.fixed-header .main-header .header-lower .outer-box {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    body.fixed-header .main-header .logo-box img {
        height: 60px !important; /* Slightly larger logo in sticky state */
    }

    /* Mobile Nav Toggler in Sticky State - No "box", just lines, improved visibility */
    body.fixed-header .main-header .mobile-nav-toggler {
        background-color: transparent !important; /* No background */
        border: none !important; /* No border */
        box-shadow: none !important; /* No shadow */
        border-radius: 0 !important; /* No border-radius */
        color: #222 !important; /* White color for lines in sticky state */
        padding: 8px 12px !important; /* Keep padding for spacing */
        font-size: 20px !important;
        line-height: 1 !important;
        height: auto !important;
    }

    body.fixed-header .main-header .mobile-nav-toggler:hover {
        background-color: transparent !important;
        border: none !important;
    }


    /* Page content top padding to prevent content hiding under header */
    .page-wrapper {
        padding-top: 85px !important;
    }

    /* General reset for any conflicting borders/shadows/backgrounds */
    .main-header,
    .main-header.fixed-header,
    .main-header .header-top,
    .main-header .header-lower,
    .sticky-header,
    .main-header::before,
    .main-header::after,
    .fixed-header::before,
    .fixed-header::after,
    .main-header .header-top::before,
    .main-header .header-top::after,
    .main-header .header-lower::before,
    .main-header .header-lower::after,
    .sticky-header::before,
    .sticky-header::after {
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
        background-image: none !important;
        background: none !important;
        content: none !important;
    }
}


/* Ensure navigation list (ul) uses flexbox for horizontal items and prevents wrapping */
.sticky-header .main-menu {
    margin-left: 30px; /* Space between logo and navigation */
}
.sticky-header .main-menu .navigation {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

/* Compact padding and smaller font for nav links inside sticky header */
.sticky-header .main-menu .navigation > li {
    position: relative; /* Keep this for dropdown positioning */
}
.sticky-header .main-menu .navigation > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px; /* Reduced horizontal padding for tighter spacing */
  font-size: 16px;
  border-radius: 30px;
  transition: background 0.3s ease;
  white-space: nowrap;
}

/* Space after the last navigation item (e.g., "Contact Us") */
.sticky-header .main-menu .navigation > li:last-child {
  margin-right: 30px; /* Space after contact us */
}

/* Dropdown arrow (if using span) */
.sticky-header .main-menu .navigation > li > a .dropdown-arrow {
  font-size: 13px;
  line-height: 1;
  transition: color 0.3s ease;
}

/* Base arrow style */
.main-menu .navigation > li.dropdown > ul {
  left: inherit;
  transform: translateX(-50%) !important;
  margin-top: 0;
  min-width: 220px !important;
  width: auto !important;
  text-align: left !important;
}

/* For normal header only */
.main-header .main-menu .navigation > li.dropdown > ul {
  top: calc(100%);
}

/* For sticky header — keep it tight */
.fixed-header .sticky-header .main-menu .navigation > li.dropdown > ul {
  top: calc(100% + 5px) !important;
}


/* Ensure 'Products' link text and its arrow are red on hover in sticky header */
.fixed-header .sticky-header .main-menu .navigation > li.dropdown > a:hover {
    color: #e32636 !important; /* Set the text color of the hovered 'Products' link to red */
}

.fixed-header .sticky-header .main-menu .navigation > li.dropdown > a:hover .dropdown-arrow {
    color: #e32636 !important; /* Set the color of the dropdown arrow to red on hover */
}

/* When hovering on the dropdown list items, change the dropdown-arrow color */
.main-menu .navigation > li.dropdown:hover > a .dropdown-arrow {
  color: #e32636 !important;
}



/* Optional: ensure parent li isn't too wide */
.main-menu .navigation > li.dropdown {
  position: relative !important;
}

/* Logo Box Adjustments */
.sticky-header .logo-box{
  padding: 0;
  flex-shrink: 0;
}

/* Desktop and mobile sticky header logo fix */
.sticky-header .logo-box img {
  height: 90px !important;
  width: auto !important;
  max-height: unset !important;
  transition: height 0.3s ease;
}



/* ========================================= */
/* --- Dropdown Menu Styling (Centered & Blurred) --- */
/* ========================================= */

/* Dropdown Menu Container (the 'ul' that appears on hover) */
.main-menu .navigation > li > ul {
    position: absolute;
    top: 100%;
    left: 50% !important; /* IMPORTANT: Center horizontally */
    transform: translate(-50%, 10px) !important; /* IMPORTANT: Combine with initial translateY for animation */
    min-width: 200px;
    background-color: rgba(0, 0, 0, 0.6) !important; /* IMPORTANT: Darker translucent for better readability with blur */
    backdrop-filter: blur(10px) !important; /* IMPORTANT: Blur effect, as requested */
    -webkit-backdrop-filter: blur(10px) !important;
    border-top-left-radius: 0 !important; /* IMPORTANT: No curve on the top-left corner */
    border-top-right-radius: 0 !important; /* IMPORTANT: No curve on the top-right corner */
    border-bottom-left-radius: 30px !important; /* IMPORTANT: Stronger curve on bottom-left */
    border-bottom-right-radius: 30px !important; /* IMPORTANT: Stronger curve on bottom-right */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.08) !important; /* IMPORTANT: Exact same subtle shadow as capsule */
    list-style: none;
    padding: 10px 0;
    opacity: 0 !important; /* IMPORTANT: Initially hidden */
    visibility: hidden !important; /* IMPORTANT: Initially hidden */
    transition: all 0.3s ease;
    z-index: 100;
    margin-top: 5px;
    border: 1px solid rgba(0, 0, 0, 0.10); /* Optional: subtle border like the capsule */
}

/* Show Dropdown on Parent Hover */
.main-menu .navigation > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important; /* IMPORTANT: Combine with final translateY for animation */
}

/* Dropdown List Items */
.main-menu .navigation > li > ul > li {
    position: relative;
    margin: 0;
}

/* Dropdown Links (the 'a' tags inside the dropdown) */
.main-menu .navigation > li > ul > li > a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff !important; /* IMPORTANT: White text color for readability */
    line-height: 1.2em;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Global Reset/Override for focus outlines, and explicitly remove any unwanted background/border on hover/focus/active */
.main-menu .navigation a:focus,
.main-menu .navigation a:active,
.main-menu .navigation > li > ul > li:focus, /* Target li on focus */
.main-menu .navigation > li > ul > li:active, /* Target li on active */
.main-menu .navigation > li > ul > li > a:focus,
.main-menu .navigation > li > ul > li > a:active {
    outline: none !important; /* Removes default focus outline */
    box-shadow: none !important; /* Removes any default focus box-shadow */
    border: none !important; /* Ensures no border is applied on focus/active */
    background-color: transparent !important; /* Force background to transparent on focus/active */
    border-color: transparent !important; /* Force border color to transparent on focus/active */
}

/* --- Dropdown Container Styling (iPhone/iOS Premium Feel) --- */
.main-menu .navigation > li > ul {
    position: absolute;
    left: 0px; /* Inherits left positioning from parent */
    top: 100%; /* Positions the dropdown directly below the parent link */
    width: 260px; /* Wider for a more substantial, premium feel */
    margin-top: 18px; /* Initial margin from parent for the animation start */
    padding: 12px; /* Generous internal padding around the list items */
    z-index: 100; /* Ensures the dropdown appears above other content */
    /* Main background: slightly transparent for a layered, deep "frosted" effect */
    background: rgba(29, 30, 31, 0.95);
    border-radius: 18px; /* More pronounced rounded corners for a soft, iOS-like shape */
    /* Multi-layered, soft, realistic shadow for significant depth and a floating appearance */
    box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.05); /* Subtle inner border effect */
    opacity: 0; /* Starts completely invisible for the fade-in animation */
    visibility: hidden; /* Keeps the dropdown hidden until hovered */
    transform: translateY(25px); /* Starts further down for a smoother, more 'elastic' slide-down effect */
    /* Smooth, slightly "bouncy" transition for opening/closing, mimicking iOS animations */
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: hidden; /* Ensures clean rendering of border-radius and internal effects */
    z-index: 999;
}

/* --- Dropdown Open State (on parent hover) --- */
.main-menu .navigation > li.dropdown:hover > ul {
    visibility: visible; /* Makes the dropdown visible */
    opacity: 1; /* Fades the dropdown in */
    transform: translateY(0); /* Slides the dropdown to its final position */
    margin-top: 0px; /* Adjusts margin during animation for a seamless flow */
}

/* --- Individual Dropdown Items Styling (Card-like, iOS feel) --- */
.main-menu .navigation > li > ul > li {
    position: relative; /* Allows for positioning of elements for effects */
    overflow: hidden; /* For containing subtle internal effects */
    margin: 4px 0px; /* Vertical margin for clear separation of "cards" */
    border-radius: 12px; /* Rounded corners for individual items, matching container softness */
    /* Smooth transition for background, lift, and shadow on hover */
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1; /* Ensures proper stacking context for items */
    /* Explicitly ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

.main-menu .navigation > li > ul > li > a {
    position: relative;
    display: block; /* Ensures the entire area is clickable */
    padding: 15px 25px; /* Generous padding for a spacious, premium feel */
    line-height: 24px;
    font-weight: 500;
    font-size: 17px; /* Optimal font size for readability and modern look */
    text-transform: capitalize;
    font-family: 'Inter', sans-serif; /* Clean, modern sans-serif font */
    color: #f0f2f5; /* Crisp, very light gray text color */
    text-align: left;
    z-index: 2; /* Text above any subtle background effects */
    transition: all 0.2s ease; /* Smooth transition for text properties on hover */
    /* Explicitly ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Product Dropdown Box - NEW: Modern, Clean, Elevated Card UI/UX */

/* Global Overrides (to prevent any lingering unwanted styles from previous attempts) */
.main-menu .navigation a:focus,
.main-menu .navigation a:active,
.main-menu .navigation > li > ul > li:focus,
.main-menu .navigation > li > ul > li:active,
.main-menu .navigation > li > ul > li > a:focus,
.main-menu .navigation > li > ul > li > a:active {
    outline: none !important; /* Ensures no default browser outline appears */
    box-shadow: none !important; /* Removes any default box-shadow */
    border: none !important; /* Ensures no default border */
    background-color: transparent !important; /* Forces transparent background on focus/active */
    border-color: transparent !important; /* Forces transparent border color on focus/active */
}

/* --- Dropdown Container Styling --- */
.main-menu .navigation > li > ul {
    position: absolute;
    left: inherit; /* Keeps dropdown positioned relative to its parent li */
    top: 100%; /* Positions the dropdown directly below the parent link */
    width: 280px; /* Slightly wider for a more substantial card feel */
    padding: 10px; /* Padding inside the dropdown container for cards to breathe */
    z-index: 100; /* Ensures the dropdown appears above other content */
    background: #282c34; /* Soft, muted dark gray/charcoal for a sophisticated base */
    border-radius: 16px; /* Modern, clean rounded corners for the overall box */
    /* Prominent, soft, diffused shadow for an elevated, floating look */
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.4), 0px 5px 15px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Starts completely invisible for the fade-in animation */
    visibility: hidden; /* Keeps the dropdown hidden until hovered */
    transform: scale(0.95); /* Starts slightly smaller for a subtle "pop" effect on open */
    transform-origin: top center; /* Ensures the scaling animation originates from the top center */
    /* Smooth, slightly elastic transition for opening/closing, enhancing the modern feel */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden; /* Ensures clean rendering of border-radius and contained effects */
}

/* --- Dropdown Open State (on parent hover) --- */
.main-menu .navigation > li.dropdown:hover > ul {
    visibility: visible; /* Makes the dropdown visible */
    opacity: 1; /* Fades the dropdown in */
    transform: scale(1); /* Scales to its full size */
}

/* --- Individual Dropdown Items Styling (Card-like) --- */
.main-menu .navigation > li > ul > li {
    position: relative;
    overflow: hidden; /* For containing any subtle internal effects */
    margin-bottom: 8px; /* Spacing between individual "cards" */
    border-radius: 10px; /* Rounded corners for each card item */
    /* Smooth transitions for background, lift, and shadow on hover */
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
    /* Explicitly ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

.main-menu .navigation > li > ul > li:last-child {
    margin-bottom: 0; /* No margin after the last card for a clean bottom edge */
}

.main-menu .navigation > li > ul > li > a {
    position: relative;
    display: block; /* Makes the entire card area clickable */
    padding: 14px 20px; /* Generous padding within each card for spaciousness */
    line-height: 22px;
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    font-family: 'Inter', sans-serif; /* Clean, modern sans-serif font */
    color: #e0e6ed; /* Soft off-white text color for readability */
    text-align: left;
    z-index: 2; /* Ensures text is always above any background effects */
    transition: all 0.2s ease; /* Smooth transition for text properties */
    /* Explicitly ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Global Overrides (essential to prevent any lingering unwanted styles) */
.main-menu .navigation a:focus,
.main-menu .navigation a:active,
.main-menu .navigation > li > ul > li:focus,
.main-menu .navigation > li > ul > li:active,
.main-menu .navigation > li > ul > li > a:focus,
.main-menu .navigation > li > ul > li > a:active {
    outline: none !important; /* Ensures no default browser outline appears */
    box-shadow: none !important; /* Removes any default box-shadow */
    border: none !important; /* Ensures no default border */
    background-color: transparent !important; /* Forces transparent background on focus/active */
    border-color: transparent !important; /* Forces transparent border color on focus/active */
}

/* --- Dropdown Container Styling (Material-Inspired) --- */
.main-menu .navigation > li > ul {
    position: absolute;
    left: inherit; /* Keeps dropdown positioned relative to its parent li */
    top: 100%; /* Positions the dropdown directly below the parent link */
    width: 250px; /* Standard width for a sleek appearance */
    margin-top: 15px; /* Initial margin for animation start */
    padding: 8px; /* Internal padding for spacing around items */
    z-index: 100; /* Ensures the dropdown appears above other content */
    /* Rich gradient background for depth and premium feel */
    background: linear-gradient(to bottom, #2c3e50, #24303d); /* Deep, desaturated blue-gray gradient */
    border-radius: 8px; /* Subtle rounded corners, common in Material Design */
    /* Multi-layered shadow for distinct Material-like depth and elevation */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.10), 0px 3px 10px rgba(0, 0, 0, 0.10);
    opacity: 0; /* Starts completely invisible for the fade-in animation */
    visibility: hidden; /* Keeps the dropdown hidden until hovered */
    transform: translateY(15px); /* Slides down from a bit higher for a fluid opening */
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* Fluid, responsive animation */
    overflow: hidden; /* Ensures clean rendering of border-radius and contained items */
}

/* --- Dropdown Open State (on parent hover) --- */
.main-menu .navigation > li.dropdown:hover > ul {
    visibility: visible; /* Makes the dropdown visible */
    opacity: 1; /* Fades the dropdown in */
    transform: translateY(0); /* Slides to its final position */
    margin-top: 0px; /* Adjusts margin during animation for seamless flow */
}

/* --- Individual Dropdown Items Styling --- */
.main-menu .navigation > li > ul > li {
    position: relative;
    margin-bottom: 4px; /* Small margin between items for subtle separation */
    border-radius: 4px; /* Slightly rounded corners for clean, individual item shapes */
    /* Smooth transitions for subtle lift and background change on hover */
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
    /* Ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

.main-menu .navigation > li > ul > li:last-child {
    margin-bottom: 0; /* No margin after the last item for a clean bottom edge */
}

.main-menu .navigation > li > ul > li > a {
    position: relative;
    display: block; /* Makes the entire item area clickable */
    padding: 12px 18px; /* Generous padding for spaciousness */
    line-height: 20px;
    font-weight: 500;
    font-size: 15px;
    text-transform: capitalize;
    font-family: 'Inter', sans-serif; /* Your current clean font */
    color: #e0e0e0; /* Soft off-white text color for readability on dark background */
    text-align: left;
    z-index: 2;
    transition: all 0.2s ease; /* Smooth transition for text properties */
    /* Ensure no unwanted background from this element */
    background-color: transparent !important;
    border-color: transparent !important;
}

/* No explicit dividers, relying on margins and elevation changes for separation */
.main-menu .navigation > li > ul > li:not(:last-child) {
    border-bottom: none;
}

/* ========================================================= */
/* --- NEW Highlight Effect: True Glassmorphism / Frosted Glass --- */
/* ========================================================= */

.main-menu .navigation > li > ul > li:hover {
    /* Background: Highly transparent white for the glass base */
    background-color: rgba(255, 255, 255, 0.08); /* Low opacity for transparency */
    
    /* Crucial for the frosted glass effect: blurs the content behind this element */
    backdrop-filter: blur(5px); /* Apply a 5px blur */
    -webkit-backdrop-filter: blur(5px); /* For Safari browser compatibility */
    
    /* Subtle thin white border for a defined glass edge */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    /* Subtle, diffuse shadow for depth, making the glass element appear to float */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    
    /* Gentle upward lift for interactive feedback */
    transform: translateY(-3px); 
    
    /* Smooth transition for all properties */
    transition: all 0.25s ease-out; 
    border-radius: 8px; /* Slightly rounded corners for a softer, more elegant glass look */
}

/** Sticky header End **/

/** header-top **/

.header-top .top-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 70px;
  background: #241E2F;
  border-radius: 0px 0px 100px 100px;
}

.header-top .info li{
  position: relative;
  display: inline-block;
  margin-right: 30px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  padding-left: 25px;
}

.header-top .info li i{
  position: absolute;
  left: 0px;
  top: 4px;
  font-weight: 400;
}

.header-top .info li a{
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 500;
}

.header-top .info li a:hover{

}

.header-top .top-right{
  position: relative;
  display: flex;
  align-items: center;
  padding-right: auto; /* create space where login was */
  min-height: 50px;     /* keeps height consistent */
}

.header-top .social-links li{
  position: relative;
  display: inline-block;
  margin-right: 25px;
}

.header-top .social-links li:last-child{
  margin: 0px !important;
}

.header-top .social-links li a{
  display: inline-block;
  color: #fff;
}

.header-top .social-links li a:hover{
}

/** header-lower **/
.main-header .outer-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-header .outer-box .logo-box{
  position: relative;
  padding: 0px 0px;
}

.main-header .outer-box .logo-box .logo{
  max-width: 130px;
}

.main-header .menu-right-content{
  position: relative;
  display: flex;
  align-items: center;
}

.main-header .menu-right-content .search-box-outer{
  position: relative;
  display: inline-block;
  margin-right: 30px;
  font-size: 18px;
  line-height: 16px;
  color: #222222;
  cursor: pointer;
  transition: all 500ms ease;
}

.main-header .menu-right-content .search-box-outer:hover{

}

.main-header .menu-right-content .btn-box a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  color: #222222;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid #E5E5E5;
  border-radius: 30px;
  padding: 12px 38px;
  z-index: 1;
}

.main-header .menu-right-content .btn-box a:hover{
  color: #fff;
}

.main-header .menu-right-content .btn-box a:before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  transform: scale(0,0);
  z-index: -1;
  transition: all 500ms ease;
}

.main-header .menu-right-content .btn-box a:hover:before{
  transform: scale(1,1);
}

/** main-menu **/
.main-menu .navbar-collapse{
  padding:0px;
  display:block !important;
}

.main-menu .navigation{
  margin:0px;
}

.main-menu .navigation > li{
  position:inherit;
  float:left;
  z-index:2;
  margin: 0px 15px;
  -webkit-transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -ms-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  transition:all 300ms ease;
}

.main-menu .navigation > li:last-child{
  margin-right:0px !important;
}

.main-menu .navigation > li:first-child{
  margin-left: 0px !important;
}

.main-menu .navigation > li > a{
  position:relative;
  display:block;
  text-align:center;
  font-size:17px;
  line-height:30px;
  padding: 40px 0px;
  font-weight:500;
  font-family: 'Inter', sans-serif;
  opacity:1;
  color: #222;
  z-index:1;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}
/* 1. Aggressively hide any other arrow/space from pseudo-elements on dropdown links */
/* This targets ::before and ::after pseudo-elements on the dropdown link */
.main-menu .navigation > li.dropdown > a::before,
.main-menu .navigation > li.dropdown > a::after {
    content: none !important; /* Ensure no visual content is generated */
    display: none !important; /* Hide the pseudo-element completely from layout */
    width: 0 !important;      /* Ensure it takes no width */
    height: 0 !important;     /* Ensure it takes no height */
    margin: 0 !important;     /* Ensure no external spacing */
    padding: 0 !important;    /* Ensure no internal spacing */
}

/* 2. Ensure your intended Font Awesome arrow has no extra margins */
.main-menu .navigation > li > a .fa-solid.fa-chevron-down.dropdown-arrow {
    margin: 0px !important;    /* Remove all margins around your intended arrow */
    padding: 0px !important;   /* Remove all padding around your intended arrow */
    vertical-align: middle;    /* Helps align the icon vertically with the text */
}

/* 3. Fine-tune the padding of the dropdown link itself if necessary */
/* Adjust padding to control space between "Products" text and the (single) arrow */
.main-menu .navigation > li.dropdown > a {
    padding-right: 5px !important; /* Reduce space to the right of "Products" text. Adjust as needed (e.g., 0px for no gap). */
}

/* 4. Ensure no extra margin between main navigation list items */
.main-menu .navigation > li {
    margin-right: 0px !important; /* Remove space between adjacent main menu items */
}
.main-menu .navigation > li.dropdown > a{
  padding-right: 17px;
}

.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a{
  
}

.main-menu .navigation > li.dropdown > a:before{
  position: absolute;
  content: none;
  font-family: 'Font Awesome 6+';
  top: 40px;
  right: 0px;
  font-weight: 500;
  transition: all 500ms ease;
}

.main-menu .navigation > li.dropdown > a i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.main-menu .navigation > li > ul,
.main-menu .navigation > li > .megamenu{
  position:absolute;
  left: inherit;
  top:100%;
  width:230px;
  margin-top: 15px;
  padding: 10px 0px;
  z-index:100;
  background: #241E2F;
  display:none;
  opacity: 0;
  visibility: hidden;
  border-radius: 0px;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > .megamenu{
  background: #241E2F;
}

.main-menu .navigation > li > .megamenu a{
  display: inline-block !important;
}

.main-menu .navigation > li > ul.from-right{
  left:auto;
  right:0px;  
}

.main-menu .navigation > li > ul > li{
  position:relative;
  width:100%;
}

.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > .megamenu li > a{
  position:relative;
  display:block;
  padding: 10px 30px;
  line-height:24px;
  font-weight:500;
  font-size:16px;
  text-transform:capitalize;
  font-family: 'Inter', sans-serif;
  color:#fff;
  text-align: left;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > a{
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.main-menu .navigation > li > .megamenu li > a{
  padding-left: 0px;
  padding-right: 0px;
}

.main-menu .navigation > li > .megamenu h4{
  display: block;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > .megamenu li > a:hover{
  
}

.main-menu .navigation > li > ul > li:last-child > a,
.main-menu .navigation > li > .megamenu li:last-child > a{
  border-bottom: none;
}

.main-menu .navigation > li > ul > li.dropdown > a:after{
  font-family: 'Font Awesome 5 Pro';
  content: "\f105";
  position:absolute;
  right:20px;
  top:10px;
  display:block;
  line-height:24px;
  font-size:16px;
  font-weight:800;
  text-align:center;
  z-index:5;  
}

.main-menu .navigation > li > ul > li > ul{
  position:absolute;
  left:100%;
  top:0%;
  margin-top: 15px;
  width:230px;
  z-index:100;
  display:none;
  border-radius: 0px;
  padding: 10px 0px;
  background: #241E2F;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul.from-right{
  left:auto;
  right:0px;  
}

.main-menu .navigation > li > ul > li > ul > li{
  position:relative;
  width:100%;
}

.main-menu .navigation > li > ul > li > ul > li:last-child{
  border-bottom:none; 
}

.main-menu .navigation > li > ul > li > ul > li > a{
  position:relative;
  display:block;
  padding:10px 30px;
  line-height:24px;
  font-weight:500;
  font-size:16px;
  text-transform:capitalize;
  font-family: 'Inter', sans-serif;
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul > li:last-child > a{
  border-bottom: none;
}

.main-menu .navigation > li > ul > li > ul > li > a:hover{
  
}

.main-menu .navigation > li > ul > li > ul > li.dropdown > a:after{
  font-family: 'Font Awesome 5 Pro';
  content: "\f105";
  position:absolute;
  right:20px;
  top:12px;
  display:block;
  line-height:24px;
  font-size:16px;
  font-weight:900;
  z-index:5;  
}

.main-menu .navigation > li.dropdown:hover > ul,
.main-menu .navigation > li.dropdown:hover > .megamenu{
  visibility:visible;
  opacity:1;
  margin-top: 0px;
  top: 100%;
}

.main-menu .navigation li > ul > li.dropdown:hover > ul{
  visibility:visible;
  opacity:1;
  top: 0%; 
  margin-top: 0px;
}

.main-menu .navigation li.dropdown .dropdown-btn{
  position:absolute;
  right:-32px;
  top:66px;
  width:34px;
  height:30px;
  text-align:center;
  font-size:18px;
  line-height:26px;
  color:#3b3b3b;
  cursor:pointer;
  display: none;
  z-index:5;
  transition: all 500ms ease;
}

.main-menu .navigation li.current.dropdown .dropdown-btn,
.main-menu .navigation li:hover .dropdown-btn{
  
}

.main-menu .navigation li.dropdown ul li.dropdown .dropdown-btn{
  display: none;
}

.menu-area .mobile-nav-toggler {
  position: relative;
  float: right;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  color: #3786ff;
  display: none;
}

.menu-area .mobile-nav-toggler .icon-bar{
  position: relative;
  height: 2px;
  width: 30px;
  display: block;
  margin-bottom: 5px;
  background-color: #fff;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.menu-area .mobile-nav-toggler .icon-bar:last-child{
  margin-bottom: 0px;
}

.sticky-header .main-menu .navigation > li > a{
  padding-top: 25px;
  padding-bottom: 25px;
}

.sticky-header .main-menu .navigation > li > a:before{
  top: 25px;
}

.sticky-header .logo-box{
  padding: 12px 0px 20px 0px;
}


/** megamenu-style **/

.main-menu .navigation > li.dropdown > .megamenu{
  position: absolute;
  width: 100%;
  padding: 30px 50px;
  left: 0px;
}

.main-menu .navigation li.dropdown .megamenu li h4{
  margin-bottom: 10px;
}


/** mobile-menu **/

.nav-outer .mobile-nav-toggler{
  position: relative;
  float: right;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  color:#3786ff; /* You can change this to a dark gold or matching accent color if desired */
  display: none;
}

@media (max-width: 768px) {
  .nav-logo {
    text-align: center !important;
    width: 100%;
  }

  .nav-logo a {
    display: inline-block;
  }
}

.mobile-menu{
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  padding-right:30px; /* This padding is on the *right* of the slide-out menu. */
  max-width:100%;
  height: 100vh; /* Ensures full viewport height */
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  transition: all 900ms ease;
  overflow-y: auto !important; /* IMPORTANT: Allows menu content to scroll */
  background: #1A1A1A; /* Deeper, richer dark background for luxury */
}

.mobile-menu .navbar-collapse{
  display:block !important; 
}

.mobile-menu .nav-logo{
  position:relative;
  padding:40px 25px; /* Reduced top padding slightly */
  text-align:left;   
  padding-bottom: 50px; /* Reduced to provide more compact look */
}

.mobile-menu-visible{
  overflow: hidden; /* This class is likely applied to <body> to prevent background scrolling */
}

.mobile-menu-visible .mobile-menu{
  opacity: 1;
  visibility: visible;
}

.mobile-menu .menu-backdrop{
  position: fixed;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 900ms ease;
  background-color: #000;
}

.mobile-menu-visible .mobile-menu .menu-backdrop{
  opacity: 0.70;
  visibility: visible;
  right: 100%;
  -webkit-transition: all .8s ease-out 0s;
  -o-transition: all .8s ease-out 0s
}

.mobile-menu .menu-box{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #1A1A1A; /* Match parent background or slightly different if layered */
  padding: 20px 25px 50px 25px; /* Added general padding for content inside the menu box: top, right, bottom, left */
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  border-radius: 0px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  transition: all 900ms ease !important;
}

.mobile-menu-visible .mobile-menu .menu-box{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

.mobile-menu .close-btn{
  position: absolute;
  right: 25px;
  top: 15px; /* Adjusted slightly for better positioning with increased top padding on menu-box */
  line-height: 28px; /* Adjusted line-height to fit circle */
  width: 28px; /* Slightly larger icon area for better tap target */
  height: 28px; /* Slightly larger icon area */
  text-align: center;
  font-size: 18px; /* Slightly larger icon */
  color: #E0E0E0; /* Soft white for a luxurious feel */
  cursor: pointer;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 50%; /* Make it round */
  -webkit-transition:all 0.3s ease; /* Faster transition for button */
  -moz-transition:all 0.3s ease;
  -ms-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

.mobile-menu-visible .mobile-menu .close-btn{
  -webkit-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

.mobile-menu .close-btn:hover{
  color: #e32636; /* Changed to Red hover effect */
  border-color: #e32636; /* Changed to Red border on hover */
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

.mobile-menu .navigation{
  position: relative;
  display: block;
  width: 100%;
  float: none;
}

.mobile-menu .navigation li{
  position: relative;
  display: block;
  border-top: 1px solid rgba(255,255,255,0.08); /* Lighter, more subtle border */
}

.mobile-menu .navigation:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.08); /* Lighter, more subtle border */
}

.mobile-menu .navigation li > ul > li:first-child{
  border-top: 1px solid rgba(255,255,255,0.08); /* Lighter, more subtle border */
}

.mobile-menu .navigation li > a{
  position: relative;
  display: block;
  line-height: 28px; /* Increased line-height for better readability */
  padding: 15px 25px; /* Increased vertical padding for more space */
  font-size: 16px; /* Slightly larger font size */
  font-weight: 500;
  color: #E0E0E0; /* Soft white color */
  text-transform: capitalize; /* Changed to capitalize for a softer look, previously uppercase */
  font-family: 'Jost', sans-serif; /* Using 'Jost' consistently */
  -webkit-transition: all 300ms ease; /* Faster transition for menu items */
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; 
}

.mobile-menu .navigation li ul li > a{
  font-size: 15px; /* Keep submenu slightly smaller */
  margin-left: 20px;
  text-transform: capitalize; /* Consistency */
  font-family: 'Jost', sans-serif; /* Using 'Jost' consistently */
}

.mobile-menu .navigation li > a:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:0;
  border-left:5px solid #e32636; /* Changed to Red accent for the indicator */
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; 
}

.mobile-menu .navigation li.current > a:before,
.mobile-menu .navigation li:hover > a:before { /* Apply hover effect */
  height:100%;
}

.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li:hover > a { /* Apply hover effect */
  color: #e32636; /* Changed to Red on hover/current */
}

.mobile-menu .navigation li.dropdown .dropdown-btn{
  position:absolute;
  right:15px; /* Adjusted position */
  top:12px; /* Adjusted position */
  width:32px;
  height:32px;
  text-align:center;
  font-size:18px; /* Slightly larger icon */
  line-height:32px;
  color:#E0E0E0; /* Soft white */
  background:rgba(255,255,255,0.05); /* Very subtle background */
  cursor:pointer;
  border-radius:2px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; 
  z-index:5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn.open{
  color: #e32636; /* Changed to Red when open */
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);   
}

.mobile-menu .navigation li.dropdown .dropdown-btn:hover {
  background: rgba(227, 38, 54, 0.1); /* Changed to subtle Red tint on hover */
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul,
.mobile-menu .navigation > li.dropdown > .megamenu{
  display: none;
}

div#mCSB_1_container{
  top: 0px !important;
}

.mobile-menu .contact-info {
  position: relative;
  padding: 40px 25px 20px 25px; /* Adjusted padding: reduced top, consistent left/right */
}

.mobile-menu .contact-info h4 {
  position: relative;
  font-size: 22px; /* Slightly larger heading */
  color: #FFFFFF; /* Pure white for prominence */
  font-weight: 600; /* Slightly less bold */
  margin-bottom: 18px; /* Adjusted spacing */
  font-family: 'Jost', sans-serif; /* Using 'Jost' consistently */
}

.mobile-menu .contact-info ul li {
  position: relative;
  display: block;
  font-size: 16px; /* Slightly larger font */
  color: rgba(255,255,255,0.70); /* Slightly less opaque white for luxury feel */
  margin-bottom: 15px; /* Adjusted margin for better spacing between contact lines */
  font-family: 'Jost', sans-serif; /* Using 'Jost' consistently */
}

.mobile-menu .contact-info ul li i.fas,
.mobile-menu .contact-info ul li span.fab { /* Styling for Font Awesome icons in contact info */
  color: #e32636; /* Red color for the icons */
  margin-right: 10px; /* Space between icon and text */
  font-size: 18px; /* Slightly larger icons */
}

.mobile-menu .contact-info ul li a{
  color: rgba(255,255,255,0.70);
  text-decoration: none; /* Remove underline for links within li */
}

.mobile-menu .contact-info ul li a:hover{
  color: #e32636; /* Changed to Red hover effect */
}

.mobile-menu .contact-info ul li:last-of-type{ /* Adjusted to target the last contact line specifically */
  margin-bottom: 0px;
}

/* Styles for social media icons within contact-info */

.mobile-menu .contact-info .social-icons-contact {
  position: relative;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 25px;
  display: flex !important; /* Icons ko ek line mein rakhne aur center karne ke liye */
  justify-content: center !important; /* Icons ko horizontal (daayein-baayein) center karne ke liye */
  gap: 15px; /* Icons ke beech mein jagah dene ke liye */
  flex-wrap: wrap;
}

.mobile-menu .contact-info .social-icons-contact li {
  display: inline-block !important; /* List item ko inline block rakhega */
  margin: 0 !important; /* Default margins hatayega */
}

.mobile-menu .contact-info .social-icons-contact li a {
  /* Isme width, height, border, border-radius, display: inline-flex, align-items, justify-content, line-height hat gaye hain */
  font-size: 18px !important; /* Icon ka size */
  color: #E0E0E0 !important; /* Icon ka rang */
  transition: all 0.3s ease; /* Hover effect ke liye transition */
  text-decoration: none !important; /* Link underline hatayega */
}

.mobile-menu .contact-info .social-icons-contact li a:hover {
  color: #e32636 !important; /* Hover par icon ka rang badlega */
  /* Border aur background hover properties bhi hat gayi hain agar koi box nahi hai */
}

.main-header .outer-box{
  position: relative;
}

.nice-select{
  position: relative;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 20px !important;
  color: #6E6E6E;
  height: auto;
}

.nice-select:after{
  width: 8px;
  height: 8px;
  right: 20px;
  border-bottom: 2px solid #C4C4C4;
  border-right: 2px solid #C4C4C4;
}

.tabs-box .tab{
  position:relative;
  display:none;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.tabs-box .tab.active-tab{
  display:block;  
}

.tabs-box .tab{
  transform:scale(0.9,0.9) translateY(0px);
}

.tabs-box .tab.active-tab{
  transform:scale(1) translateY(0px);
}



/** shine-animation **/

 
.starshine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
 
.shine {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  width: 893px;
  height: 893px;
  -webkit-animation: glitter 6s linear 0s infinite normal;
  animation: glitter 6s linear 0s infinite normal;
  text-indent: -9999px;
}

.shine.shine-1{
  background-image: url(../images/shape/shape-1.png);
  left: -350px;
  bottom: -350px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
} 

.shine.shine-2{
  background-image: url(../images/shape/shape-1.png);
  top: -400px;
  left: 400px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
} 
 
 @-webkit-keyframes glitter {
     0% {
         -webkit-transform: scale(0.3) rotate(0deg);
         opacity: 0;
     }
     25% {
         -webkit-transform: scale(1) rotate(360deg);
         opacity: 1;
     }
     50% {
         -webkit-transform: scale(0.3) rotate(720deg);
         opacity: 0;
     }
     100% {
         -webkit-transform: scale(0.3) rotate(0deg);
         opacity: 0;
     }
 }
 
@keyframes glitter {
  0% {
      -webkit-transform: scale(0.3) rotate(0deg);
      transform: scale(0.3) rotate(0deg);
      opacity: 0;
     }
  25% {
     -webkit-transform: scale(1) rotate(360deg);
     transform: scale(1) rotate(360deg);
     opacity: 1;
  }
     50% {
         -webkit-transform: scale(0.3) rotate(720deg);
         transform: scale(0.3) rotate(720deg);
         opacity: 0;
     }
     100% {
         -webkit-transform: scale(0.3) rotate(0deg);
         transform: scale(0.3) rotate(0deg);
         opacity: 0;
  }
}
 
@-moz-keyframes glitter {
     0% {
         -moz-transform: scale(0.3) rotate(0deg);
         opacity: 0;
     }
     25% {
         -moz-transform: scale(1) rotate(360deg);
         opacity: 1;
     }
     50% {
         -moz-transform: scale(0.3) rotate(720deg);
         opacity: 0;
     }
     100% {
         -moz-transform: scale(0.3) rotate(0deg);
         opacity: 0;
     }
}

.bg-color-1{
  background: #F2F2F2;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.bg-color-2{
  background: #241E2F;
}

.nav-style-one .owl-nav button{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 66px;
  background: #fff;
  font-size: 18px;
  color: #222;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button:hover{
  color: #fff;
}

.default-form .form-group{
  position: relative;
  margin-bottom: 20px;
}

.default-form .form-group:last-child{
  margin-bottom: 0px;
}

.default-form .form-group input[type='text'],
.default-form .form-group input[type='email'],
.default-form .form-group input[type='number'],
.default-form .form-group input[type='password'],
.default-form .form-group .nice-select,
.default-form .form-group textarea{
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 16px;
  color: #6E6E6E;
  padding: 10px 20px;
  text-align: left;
  transition: all 500ms ease;
}

.default-form .form-group textarea{
  resize: none;
}

.default-form .form-group input:focus,
.default-form .form-group textarea:focus{

}

.header-style-two .header-top{
  background: #241E2F;
}

.header-style-two .header-top .top-right .login a{
  line-height: 50px;
}

.header-style-two.main-header .menu-right-content .btn-box a{
  box-shadow: none;
}

.header-style-two.main-header .menu-right-content .btn-box a:hover{
  background: #241E2F;
  border-color: #241E2F;
}

.parallax-bg{
  position: absolute;
  left: 0px;
  top: -30%;
  width: 100%;
  height: 150%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
}

.owl-dots-one .owl-dots .owl-dot span{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin: 0px 5px;
  cursor: pointer;
  transition: all 500ms ease;
}

.owl-dots-one .owl-dots .owl-dot.active span,
.owl-dots-one .owl-dots .owl-dot:hover span{

}

.accordion-box .block .acc-content.current{
  display:block;  
}

.accordion-box .block .acc-content{
  display:none;
}

/** header-style-three **/

.header-style-three .header-lower{
  position: absolute;
  left: 70px;
  top: 50px;
  width: calc(100% - 140px);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(7.5px);
  border-radius: 10px;
}

.header-style-three .outer-container{
  position: relative;
  padding: 0px 50px;
}

.header-style-three .header-lower .main-menu .navigation > li > a{
  color: #fff;
}

.header-style-three .main-menu .navigation > li.current > a, 
.header-style-three .main-menu .navigation > li:hover > a{

}

.header-style-three .header-lower .menu-right-content .search-box-outer{
  color: #fff;
}

.header-style-three .menu-right-content .cart-box a{
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #fff;
}

.header-style-three .menu-right-content .cart-box a:hover{

}

.header-style-three .menu-right-content .cart-box{
  margin-right: 30px;
}

.header-style-three .menu-right-content .theme-btn-one:hover{
  background: #17141F !important;
}

.header-style-three .menu-right-content .theme-btn-one:before{
  display: none;
}

.list-style-one li{
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 25px;
  color: #222;
  font-weight: 500;
  padding-left: 27px;
  margin-bottom: 12px;
}

.list-style-one li:last-child{
  margin-bottom: 0px;
}

.list-style-one li:before{
  position: absolute;
  content: '\e91a';
  font-family: 'icomoon';
  font-size: 16px;
  left: 0px;
  top: 0px;
}

.faq-page-section .accordion-box .accordion{
  background: #FFFFFF;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}


.bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down{
  position: absolute;
  background: transparent;
  padding: 0px 0px;
  right: -18px;
  top: 4px;
  border-radius: 0px;
  border: none !important;
  z-index: 1;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up{
  position: absolute;
  background: transparent;
  padding: 0px 0px;
  right: -18px;
  top: 17px;
  border: none !important;
  margin-top: 0px;
  border-radius: 0px;
  z-index: 1;
}

.bootstrap-touchspin .glyphicon-chevron-up:before {
  content: "\f107";
  font-size: 18px;
  font-style: normal;
  color: #b3b3b3;
  font-family: 'Font Awesome 5 pro';
  font-weight: 400;
  transition: all 500ms ease;
}

.bootstrap-touchspin .glyphicon-chevron-down:before {
  content: "\f106";
  font-size: 18px;
  font-style: normal;
  color: #b3b3b3;
  font-weight: 400;
  font-family: 'Font Awesome 5 pro';
  transition: all 500ms ease;
}

.bootstrap-touchspin .glyphicon-chevron-up:hover:before,
.bootstrap-touchspin .glyphicon-chevron-down:hover:before{
  
}

.bootstrap-touchspin .input-group-btn-vertical{
  position: absolute;
  width: 100%;
}

.bootstrap-touchspin .input-group-btn-vertical i{
  top: 0px;
  left: 7px;
  font-size: inherit !important; 
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{
  margin-top: 0px;
}

.default-form input[type='text'],
.default-form input[type='email'],
.default-form input[type='tel'],
.default-form input[type='password'],
.default-form textarea{
  position: relative;
  width: 100%;
  height: 50px;
  background: #fff;
  font-size: 15px;
  color: #6E6E6E;
  padding: 15px 20px;
  border-radius: 0px;
  background: transparent;
  border: 1px solid #e5e5e5;
  transition: all 500ms ease;
  border-radius: 30px;
}

.default-form input:focus,
.default-form textarea:focus{

}

.elements-page .owl-carousel .owl-stage-outer{
  overflow: visible;
}

.elements-page .owl-carousel .owl-stage-outer .owl-item{
  opacity: 0;
}

.elements-page .owl-carousel .owl-stage-outer .owl-item.active{
  opacity: 1;
}

.chooseus-style-two .bg-layer{
  background-position: right center;
}

.team-details .progress-box .count-text{
  right: 0px;
}

@media (max-width: 768px) {
  .facility-content .theme-btn-one {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 25px;
    display: table; /* Keeps button size */
  }
}

























/** Key Products Start **/
.key-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Outer wrapper for hover effects */
.key-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
  border-radius: 16px;
}

/* Inner white container */
.key-box .box-inner {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  height: 100%;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Image area with gradient background */
.key-box .image-area {
  width: 100%;
  height: 250px; /* fixed height for all boxes, adjust as needed */
  background: linear-gradient(to bottom, #ffffff, #fff5f5);
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.key-box .image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'cover' if you want it cropped */
  transition: transform 0.3s ease;
}

/* Image style */
.key-box .image-area img {
  max-width: 100%;
  transition: transform 0.3s ease;
}

/* Zoom effect on hover */
.key-box:hover .image-area img {
  transform: scale(1.05);
}

/* Divider line */
.key-box .divider-style {
  width: 90%;
  height: 1px;
  background: linear-gradient(to right, #e32636, #ff758c);
  opacity: 0.6;
  margin: 0 auto 20px;
}

/* Text area */
.key-box .text-area {
  padding: 0 25px 30px;
  text-align: center;
}

.key-box .text-area h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.key-box .text-area p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

/* Outer hover effect */
.key-box:hover {
  transform: scale(1.03);
  border-color: #e32636;
  box-shadow:
    0 0 0 4px rgba(227, 38, 54, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.1);
}

/** Key Products End **/

/** What We Do Start **/
.what-we-do-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.what-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
  border-radius: 16px;
}

.box-inner {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  height: 100%;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-area {
  width: 100%;
  background: linear-gradient(to bottom, #ffffff, #fff5f5);
  padding: 30px 0 20px;
  text-align: center;
}

.image-area img {
  max-width: 100%;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.box-inner:hover .image-area img {
  transform: scale(1.05);
}

.divider-style {
  width: 90%;
  height: 1px;
  background: linear-gradient(to right, #e32636, #ff758c);
  opacity: 0.6;
  margin: 0 auto 20px;
}

.text-area {
  padding: 0 25px 30px;
  text-align: center;
}

.text-area h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.text-area p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

.what-box:hover {
  transform: scale(1.03);
  border-color: #e32636;
  box-shadow:
    0 0 0 4px rgba(227, 38, 54, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .what-we-do-section {
    padding: 60px 15px;
  }
}
/** What We Do End **/

/** Why Choose Us Start **/
.why-choose-us-modern {
  background: #f9f9f9;
  padding: 60px 0px;
}

.why-choose-us-modern .sec-title {
  margin-bottom: 60px;
}

.why-choose-us-modern .why-us-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Distribute cards evenly */
  gap: 30px;
}

.why-us-card {
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 30px;
  width: calc(33.333% - 30px); /* Each card takes up 1/3 of the container */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.why-us-card:hover {
  transform: scale(1.03);
  border-color: #e32636; /* Brand Red */
  box-shadow:
    0 0 0 4px rgba(227, 38, 54, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1);
}

.why-us-card .icon-circle {
  width: 70px;
  height: 70px;
  background: #ffecec; /* Light red background */
  color: #e32636;       /* Red icon */
  border-radius: 50%;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.why-us-card:hover .icon-circle {
  background-color: #e32636;
  color: #ffffff;
}

.why-us-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.why-us-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #6e6e6e;
}

@media screen and (max-width: 768px) {
  .why-choose-us-modern .why-us-cards {
    flex-direction: column;  /* Stack cards vertically on small screens */
    align-items: center;
  }

  .why-us-card {
    width: 90%; /* Make cards take most of the container width */
    margin-bottom: 20px; /* Add spacing between stacked cards */
  }
}
/** Why Choose Us End **/

/** Client Section Start **/
.clients-section {
  padding: 60px 0px;
  background: #f9f9f9;
  text-align: center;
  overflow: hidden;
}

.clients-header .section-title {
  font-size: 34px;
  font-weight: 700;
  color: #e53935;
  margin-bottom: 10px;
}

.clients-header .section-subtitle {
  color: #555;
  font-size: 18px;
  margin-bottom: 40px;
}

.clients-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.clients-track {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: scrollInfinite 30s linear infinite;
}

/* ✅ Updated to make all logos same size */
.client-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 18px 28px;
  border-radius: 18px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  width: 180px;
  height: 100px;
}

.client-logo:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: #fff;
}

/* ✅ Enforce consistent logo sizing inside the box */
.client-logo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* Animation for scrolling */
@keyframes scrollInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.clients-carousel:hover .clients-track {
  animation-play-state: paused;
}

/* 🔧 MOBILE RESPONSIVE FIX */
@media (max-width: 768px) {
  .clients-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .clients-track {
    flex-wrap: nowrap;
    width: max-content;
    animation: scrollInfinite 20s linear infinite;
    gap: 30px;
    padding: 10px 0;
  }

  /* ✅ Mobile version of client boxes */
  .client-logo {
    width: 140px;
    height: 80px;
  }

  .client-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  .clients-header .section-title {
    font-size: 24px;
  }

  .clients-header .section-subtitle {
    font-size: 15px;
    padding: 0 10px;
  }
}

/** Client Section Start**/
.clients-carousel {
  overflow: hidden;
  width: 100%;
  background: #f9f9f9;
  position: relative;
}

.clients-track {
  display: flex;
  animation: scrollLeft 40s linear infinite;
  width: max-content;
}

.clients-track::after {
  content: "";
  display: flex;
}

.client-logo {
  flex: 0 0 auto;
  width: 200px;
  margin: 0 30px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
}
}
/** Client Section End **/

/** Why Choose Us Start **/
.chooseus-style-two .accordion.block {
  border-radius: 20px; /* ✅ Keep original shape */
  overflow: hidden;
  margin-bottom: 16px; /* Slightly tighter spacing between boxes */
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  background: #fff;
}

/* Active Accordion Highlight */
.chooseus-style-two .accordion.block.active-block {
  border-color: #e32636;
  box-shadow:
    0 0 0 2px rgba(227, 38, 54, 0.2),
    0 0 20px rgba(227, 38, 54, 0.15);
}


/* Title Text */
.chooseus-style-two .acc-btn h3 {
  font-size: 17px;  /* 🔻 Reduced font size (was 20px) */
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
  text-align: left;
  line-height: 0;
}

/* Icon Box */
.chooseus-style-two .icon-box {
  display: none;
}

/* Accordion Content */
.chooseus-style-two .acc-content {
  background: #ececec;
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  opacity: 0;
}

/* Opened Content */
.chooseus-style-two .acc-content.current {
  padding-bottom: 0px; /* 🔻 Reduced bottom spacing */
  max-height: 100px;
  opacity: 1;
}

/* Text Content */
.chooseus-style-two .text p {
  margin: 0;
  font-size: 16px;  /* 🔻 Smaller paragraph */
  line-height: 0;
  color: #444;
  text-align: left;
}

/* Accordion List */
.chooseus-style-two .accordion-box {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;   /* ✅ New: limit width */
  margin: 0 auto;     /* ✅ New: center the box */
}

/* 📱 Responsive Design */
@media screen and (max-width: 768px) {
  .chooseus-style-two .acc-btn {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
  }

  .chooseus-style-two .acc-btn h3 {
    font-size: 16px;
  }

  .chooseus-style-two .acc-content {
    padding: 0 18px;
  }

  .chooseus-style-two .acc-content.current {
    padding-bottom: 12px;
    max-height: 300px;
  }

  .chooseus-style-two .text p {
    font-size: 14px;
  }
}
/** Why Choose Us End **/

/** Exclusive Team Start**/
.team-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}
/* Hover Effect for .team-block-one like .what-box */
.team-block-one {
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 16px;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.team-block-one:hover {
  border-color: #e32636;
  box-shadow:
    0 0 0 2px rgba(227, 38, 54, 0.2),
    0 0 20px rgba(227, 38, 54, 0.15);
  transform: translateY(-6px);
}
/** Exclusive Team End**/

.what-box .icon {
    font-size: 50px; /* Size the icons appropriately */
    color: #e63946;  /* Customize the icon color */
    margin-bottom: 15px; /* Space between icon and the text */
    text-align: center; /* Center the icons */
}

.what-box .icon i {
    display: inline-block; /* Ensure icons display correctly */
}

/** About Us Button Start**/
.about-button-wrapper {
  margin-top: 30px;
}

.about-section .row {
  align-items: start !important; /* stop vertical centering */
}

@media screen and (max-width: 767px) {
  .about-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px auto 0 auto;
    padding-bottom: 0 !important;
  }

  .about-button-wrapper .theme-btn-one {
    padding: 10px 24px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 20px;
    margin-bottom: 0 !important;
  }

  .facility-content {
    padding-bottom: 0 !important;
  }

  .sec-title {
    margin-bottom: 0 !important;
  }
}
/** About Us Button End**/

/* ==== Footer Start ==== */
.main-footer {
  background-color: #000000;
  font-family: 'Inter', sans-serif;
  width: 100vw !important;
  max-width: 100% !important;
  overflow-x: hidden !important;

  /* Add desired top space here */
  padding: 70px 0 0 0; /* 50px top padding, no bottom padding */
  margin: 0 !important;
}

/* ==== Footer Columns ==== */
.footer-column {
  margin-bottom: 10px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==== Footer Titles ==== */
.footer-title {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.footer-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: #e63946;
  margin-top: 6px;
  border-radius: 2px;
}

/* ==== Footer Lists ==== */
.footer-links,
.footer-contact {
  list-style: none;
  padding-left: 0;
}

.footer-links li,
.footer-contact li {
  margin-bottom: 8px;
  font-size: 15px;
  color: #fff;
}

.footer-links li a,
.footer-contact li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links li a:hover,
.footer-contact li a:hover {
  color: #fff;
}

/* ==== Logo Column ==== */
.footer-column {
    padding-top: 0; /* Aggressively remove top padding from the column */
    margin-top: 0; /* Aggressively remove top margin from the column */
}

/* Parent wrapper for the logo, business name, and other info */
.footer-logo-wrap {
    text-align: center; /* Fallback for older browsers/non-flex items */
    padding: 0px 10px 10px 10px; /* AGGRESSIVE: Removed top padding, kept side/bottom */
    margin-top: 0; /* AGGRESSIVE: Remove any margin-top */
    color: #cccccc; /* Default text color */
    height: 100%; /* Important: Make sure the wrap takes the full height of its column */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Vertically center content within the logo wrap */
    align-items: center; /* Horizontally center items */
}

/* Logo Image Styling */
.footer-logo-wrap img {
    max-width: 150px;
    height: 100px;
    display: block;
    margin: 0 auto 5px auto !important; /* AGGRESSIVE: Reduced margin-bottom, remove any margin-top */
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
}

/* Business Name Styling - Guaranteed Visibility, Single Line, No Effects */
.footer-logo-wrap .footer-business-name {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #e32636;
    letter-spacing: 0px;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
    white-space: nowrap;
    display: block;
    line-height: 1.2;
}

/* Styling for the "Since 1999" text */
.footer-logo-wrap .since {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #b0b0b0; /* The rest of the text remains this color */
    margin-top: 0px !important;
    margin-bottom: 2px;
}

/* New rule to make only the year '1999' red */
.footer-logo-wrap .since-year {
  font-size: 15px;
  color: #fff; /* Your brand red color */
  font-weight: 700; /* Optional: Make the year bold for emphasis */
}

/* Tagline Styling */
.footer-logo-wrap .tagline {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-top: 0px;
    color: #fff; /* Your brand red color */
    margin-bottom: 15px; /* Spacing before social icons */
    line-height: 1.4;
    font-style: italic;
    text-shadow: none;
}

/* --- REFINED MODERN SOCIAL ICONS WITH VISIBILITY, EFFECT, AND REDUCED SIZE --- */
.footer-logo-wrap .social-icons {
    display: flex;
    justify-content: center;
    gap: 5px; /* Slightly reduced gap between icons */
    margin-top: 5px; /* Spacing from tagline */
    margin-bottom: 0;
    flex-wrap: wrap;
}

.footer-logo-wrap .social-icons a {
    color: #ffffff; /* Default icon color: white */
    font-size: 14px; /* REDUCED ICON FONT SIZE */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* REDUCED ICON WIDTH */
    height: 30px; /* REDUCED ICON HEIGHT */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    background-color: transparent; /* Start with transparent background */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.footer-logo-wrap .social-icons a:hover {
    color: #ffffff; /* Icon color becomes white on hover for high contrast */
    border-color: #e32636; /* Border changes to brand red */
    background-color: #e32636; /* Background fills with brand red */
    transform: translateY(-2px) scale(1.03); /* Slight lift and very subtle enlarge effect on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* More pronounced shadow on hover */
}


/* --- Media queries for responsiveness --- */
@media (max-width: 767px) {
    .footer-column {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .footer-logo-wrap {
        padding: 0px 5px 10px 5px; /* AGGRESSIVE: Removed top padding for mobile */
    }

    .footer-logo-wrap img {
        max-width: 140px;
        margin-bottom: 3px !important; /* AGGRESSIVE: Further reduce margin-bottom */
    }

    .footer-logo-wrap .footer-business-name {
        font-size: 16px;
        letter-spacing: -0.5px;
        margin-top: 0px !important; /* AGGRESSIVE: Remove margin-top */
        margin-bottom: 3px !important; /* AGGRESSIVE: Reduce margin-bottom */
        transform: translateX(-4px);
    }

    .footer-logo-wrap .since {
        font-size: 12px;
        margin-top: 0px !important; /* AGGRESSIVE: Remove margin-top */
        margin-bottom: 1px;
    }

    .footer-logo-wrap .tagline {
        font-size: 13px;
        margin-top: 0px !important; /* AGGRESSIVE: Remove margin-top */
        margin-bottom: 10px;
    }

    .footer-logo-wrap .social-icons {
        gap: 8px; /* Further reduced gap for mobile */
        margin-top: 10px;
    }

    .footer-logo-wrap .social-icons a {
        font-size: 16px; /* Further reduced icon size for mobile */
        width: 32px; /* Further reduced icon size for mobile */
        height: 32px; /* Further reduced icon size for mobile */
    }
}

/* ==== Contact Info Start ==== */
.footer-contact li {
  display: flex;
  align-items: flex-start; /* aligns icon and multi-line text */
  gap: 5px;
  margin-bottom: 10px;
}

.footer-contact li i {
  margin-top: 3px;
  font-size: 16px;
  color: #e63946;
}

.footer-contact li a {
  display: inline-block;
  line-height: 1.5;
}

.footer-contact li i {
  margin-right: 5px;
  font-size: 16px;
  color: #e63946; /* If needed to match your other icons */
  vertical-align: middle;
}
/* ==== Contact Info End ==== */

/* ==== Our Commitment Section ==== */
.commitment-content p {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 15px;
}

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

.commitment-list li {
  font-size: 15px;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.commitment-list li i {
  color: #e63946;
  font-size: 16px;
}

/* ==== Footer Bottom ==== */
.footer-bottom {
  text-align: center;
  padding: 0px 10px 10px 10px; /* <<< NEW CHANGE: Added 10px padding-bottom */
  font-size: 14px;
  color: #FFFFFF;
}

.footer-top .row {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping */
  justify-content: space-between;
  gap: 30px; /* Optional: small spacing */
}

.footer-column {
  flex: 1 1 20%; /* 5 columns equally spaced */
  min-width: 200px; /* Prevents squishing on small screens */
}

.footer-line {
    width: 90%; /* Adjust as needed, e.g., 95%, 90% */
    margin: 0 auto !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 1px;
    background-color: #555;
}

/* ==== Footer Inner Container Fixes ==== */
.main-footer .auto-container,
.main-footer .footer-top .row {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.footer-links li a,
.footer-contact li a {
  position: relative;
}

.footer-links li a::after,
.footer-contact li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: #e63946;
  transition: width 0.3s ease;
}

.footer-links li a:hover::after,
.footer-contact li a:hover::after {
  width: 100%;
}
.footer-links li a,
.footer-contact li a {
  position: relative;
}

.footer-links li a::after,
.footer-contact li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: #e63946;
  transition: width 0.3s ease;
}

.footer-links li a:hover::after,
.footer-contact li a:hover::after {
  width: 100%;
}

.footer-logo-wrap .social-icons a:hover {
  background-color: #e63946;
  box-shadow: 0 0 10px #e63946;
  transform: scale(1.05);
}

.footer-links li a,
.footer-contact li a {
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links li a::after,
.footer-contact li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: #e63946;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.footer-links li a:hover::after,
.footer-contact li a:hover::after {
  transform: scaleX(1);
}

.footer-links li a:hover,
.footer-contact li a:hover {
  transform: translateY(-2px);
  color: #e63946;
}

@media (max-width: 991px) {
  /* --- General Footer Layout --- */
  .footer-top .row {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-column {
    flex: 1 1 100% !important;
    max-width: 100%;
    min-width: auto;
    text-align: center;
    box-sizing: border-box;
    /* Ensure no extra padding/margin on columns themselves */
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-top .row > .footer-column:nth-child(1), /* Commitment */
  .footer-top .row > .footer-column:nth-child(4) { /* Contact Info */
    flex: 1 1 100% !important;
    max-width: 100%;
    text-align: center;
  }

  .footer-top .row > .footer-column:nth-child(2), /* Quick Links */
  .footer-top .row > .footer-column:nth-child(3) { /* Resources */
    flex: 0 0 calc(50% - 15px) !important;
    max-width: calc(50% - 15px);
    min-width: fit-content;
    text-align: center !important;
    box-sizing: border-box;
  }

  /* --- Footer Titles --- */
  .footer-title {
    margin-bottom: 10px; /* Base spacing below titles */
    padding-bottom: 0 !important; /* Ensure no extra padding below title */
    margin-top: 0 !important; /* Ensure no extra margin above title */
  }

  .footer-title::after {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  /* --- Social Icons --- */
  .footer-logo-wrap .social-icons {
    justify-content: center;
    margin-top: 10px;
  }

  /* --- Contact Info Section --- */
  .footer-contact {
    list-style: none;
    padding: 0 !important; /* Aggressive reset */
    margin: 0 !important; /* Aggressive reset */
  }

  .footer-contact li {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

/* Sticky Main Header for Desktop */
@media (min-width: 992px) {
  .main-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
}
educe space below commitment list */
  }

  .commitment-list li {
    justify-content: center;
    margin-bottom: 5px; /* Spacing between individual commitment items */
    padding: 0 !important; /* Aggressive reset */
  }

  /* --- Footer Line (Horizontal Rule) --- */
  .footer-line {
    width: 100%;
    margin: 0 auto !important; /* Center and remove all margins */
    margin-top: 0px !important; /* Space above the line */
    margin-bottom: 0px !important; /* Space below the line */
    height: 1px; /* Ensure visibility if it's a styled div, not a <hr> */
    background-color: #555; /* Example color if it's a div */
  }

  /* --- Footer Bottom (Copyright Text) --- */
  .footer-bottom {
    font-size: 13px;
    /* Adjusted padding-bottom to add space after the copyright text */
    padding: 0px 10px 10px 10px !important; /* <<< NEW CHANGE: Added 10px padding-bottom */
    margin: 0 !important; /* Remove all margins */
  }
}

.commitment-modern-section {
  background: #f4f4f4;
  padding: 60px 0;
}

.commitment-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.commitment-card {
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 30px;
  width: calc(33.333% - 30px); /* Each card takes up 1/3 of the container */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.commitment-card:hover {
  transform: scale(1.03);
  border-color: #e32636; /* Brand Red */
  box-shadow:
    0 0 0 4px rgba(227, 38, 54, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1);
}

.commitment-card .icon-circle {
  width: 70px;
  height: 70px;
  background: #ffecec; /* Light red background */
  color: #e32636;       /* Red icon */
  border-radius: 50%;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.commitment-card.hover .icon-circle {
  background-color: #e32636;
  color: #ffffff;
}

.commitment-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
}

.commitment-card p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px) {
  .commitment-card {
    flex: 1 1 100%;
  }
}

/* Mobile footer contact final alignment with centered icons */
@media (max-width: 767px) {
  .main-footer .footer-top .footer-column .footer-contact li {
    display: flex !important;
    align-items: center !important; /* icon center align with text */
    justify-content: center !important;
    gap: 6px !important; /* thoda gap badhaya for balance */
    margin: 0 0 10px 0 !important; /* vertical space between lines */
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  .main-footer .footer-top .footer-column .footer-contact li:last-child {
    margin-bottom: 0 !important;
  }

  .main-footer .footer-top .footer-column .footer-contact li i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    min-width: 18px !important; /* thoda width fix for balance */
    text-align: center !important;
  }

  .main-footer .footer-top .footer-column .footer-contact li a,
  .main-footer .footer-top .footer-column .footer-contact li span {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    text-align: left !important;
  }
}

/* Floating WhatsApp Button Start */
.floating-whatsapp-cta {
  position: fixed;
  bottom: 50px; /* distance from bottom */
  right: 20px;  /* distance from right */
  z-index: 9999;
}

.floating-whatsapp-cta .whatsapp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366; /* Official WhatsApp green */
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  text-decoration: none;
  transition: all 0.3s ease;
  animation: whatsappPulse 2s infinite ease-in-out;
}

/* Hover effect */
.floating-whatsapp-cta .whatsapp-button:hover {
  background-color: #20b358; /* darker green */
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 10px 25px rgba(32, 179, 88, 0.5);
}

/* Glow animation */
@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.8);
  }
}

/* Mobile adjustment */
@media (max-width: 767px) {
  .floating-whatsapp-cta .whatsapp-button {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-top: 15px;
  }
}
/* Floating WhatsApp End */

/* Floating Catalogue Button Start */
.floating-catalogue-cta {
  position: fixed;
  bottom: 350px;
  right: 20px;
  z-index: 9999;
}

/* 360-degree spin for the icon */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.catalogue-button {
  display: flex;
  align-items: center;
  gap: 0;
  height: 50px;
  /* Use a consistent padding on both sides */
  padding: 0 15px; 
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #c00;
  text-decoration: none;
  font-family: 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  /* Remove fixed width, use max-width for the text instead */
  max-width: 50px; 
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.catalogue-button:hover {
  background: #f5f5f5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  color: #a00;
  /* Let the button expand to its content's size */
  max-width: 250px;
}

.catalogue-button i {
  flex-shrink: 0;
  font-size: 18px;
  color: #e74c3c;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.catalogue-button:hover i {
  animation: spin 0.6s ease-out;
}

.catalogue-text {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.4s ease, margin-left 0.4s ease;
  color: #c00;
  /* Hide the text initially */
  margin-left: 0;
}

.catalogue-button:hover .catalogue-text {
  opacity: 1;
  /* Add a gap between the icon and text */
  margin-left: 10px;
}

/* Click/Active Feedback */
.catalogue-button:active {
  transform: scale(0.95);
  background: #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease-out;
}
/* Floating Catalogue Button End */

.image-protect {
  position: relative;
  display: inline-block;
}
.image-protect img {
  display: block;
}
.image-protect::after {
  content: "Rushabh Industries";
  position: absolute;
  bottom: 10px;
  right: 10px;
  opacity: 0.4;
  font-size: 14px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Banner Image Start */
.banner-section .image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url("banner/caps.jpg"); /* Desktop Image */
  z-index: -1; /* Keeps image behind content */
}

/* Mobile view */
@media (max-width: 767px) {
  .banner-section .image-layer {
    background-image: url("banner/caps.png"); /* Mobile Image */
    background-position: center;
    background-size: cover;
  }
}
/* Banner Image End */

/* Headings & Font Size Start */
.banner-title {
    position: relative;
    color: #DE2C2C;;
    display: block;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 15px;
}

.sec-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: #222;
    margin-bottom: 50px;
}

.facility-content .sec-title h2 {
    margin-bottom: 10px !important; /* !important forces the override */
}

.facility-content .sec-title p {
    margin-top: 5px !important;
    margin-bottom: 15px !important; /* optional */
    text-align: justify !important;
}

/* banner visible immediately Start */
.banner-section,
.banner-section .banner-carousel,
.banner-section .slide-item {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* Ensure no zero height before JS runs */
.banner-section .banner-carousel {
  min-height: 420px; /* adjust to your banner height */
}

/* Prevent fade-in animations from hiding it */
.banner-section .slide-item {
  -webkit-animation: none !important;
  animation: none !important;
}
/* banner visible immediately End */

/* Custom desktop logo Start */
.desktop-logo img {
  max-width: 200px;   /* set desired width */
  height: auto;   /* keeps aspect ratio */
}

.logo-box .mobile-logo {
  display: block;
}
.logo-box .desktop-logo {
  display: none;
}

/* Desktop only */
@media screen and (min-width: 1025px) {
  .logo-box .mobile-logo {
    display: none !important;
  }
  .logo-box .desktop-logo {
    display: block !important;
  }
}
/* Custom desktop logo End */

/* ===== Ultra-Premium Modern Scrollbar ===== */
:root {
  --sb-width: 16px;  /* wider, premium feel */
  --sb-radius: 12px; /* capsule style */
}

/* Base */
*::-webkit-scrollbar {
  width: var(--sb-width);
  height: var(--sb-width);
  background: transparent; /* no ugly default track */
}

/* Track (faint glass-like) */
*::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: var(--sb-radius);
  margin: 4px 0;
}

/* Thumb (floating glossy capsule) */
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff4d4d, #cc0000);
  border-radius: var(--sb-radius);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.25),   /* floating shadow */
    inset 0 1px 3px rgba(255,255,255,0.4); /* glossy highlight */
  border: 2px solid rgba(255,255,255,0.25); /* glass border */
  transition: all 0.25s ease;
}

/* Hover = soft neon glow */
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6666, #e60000);
  box-shadow: 
    0 6px 18px rgba(0,0,0,0.35),
    0 0 12px rgba(255,60,60,0.6),  /* subtle neon glow */
    inset 0 1px 4px rgba(255,255,255,0.5);
  transform: scaleX(1.15);
}

/* Active (drag) = pressed luxury red */
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #e60000, #990000);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Firefox fallback */
* {
  scrollbar-width: thin;
  scrollbar-color: #cc0000 transparent;
}