/* Navbar or body */


      /* --- Variables and General Reset --- */
      :root {
        /* --red-apple-red: #ea453b; */
        --red-apple-red: #1e1f1f;
        --light-bg: #f9f9f9;
        --text-dark: #333;
        --text-light: #666;
        --white: #fff;
          --cg-blue: #0070ad;
            --cg-dark-blue: #002d5c;
            --cg-text: #333;

               --primary-color: #2baaa9;
        --background-dark: #ffffff;
        --text-lightt: #132743;
        --text-faded: #000000;
        --nav-bar-dark: #1b2a49;
        --dynamic-bg-image: url("https://picsum.photos/seed/game-ai/700/800");
        --slide-x: 0;
      }

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



      body {
     
        font-optical-sizing: auto;
        /* font-weight: 300; */
        /* font-style: normal; */
         font-family: Nunito Sans, sans-serif !important;
         /* background-color: #00609c !important; */
      
      }


      /* google traslate */

          
.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
iframe{
    top: 0px !important;
    display: none !important;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd{
    display: none !important;
}
.goog-te-combo{
    outline: none !important;
    border: none !important;
    cursor: pointer;
    border-bottom: 1px solid #000 !important;
    display: inline !important  ;
    margin-bottom: 0% !important;
    /* position: relative;
    top: 5px; */
}
.language-selector{
  display: flex;
  gap: 5px;
  position: relative;
    top: 5px;
}
body {
  top: 0px !important;
}

.hero-container {
  position: relative;
  width: 100%;
  height: 100dvh; /* Full height of the screen */
  overflow: hidden;
  background-color: #000; /* Backup color */
  

 width: 100%;
  min-height: 80vh; /* Responsive height */
  background: url('your-background-image.jpg') no-repeat center center/cover;
  display: flex;
  align-items: flex-end;
  padding-left: 10%;
  background-color: #0b1120;
  box-sizing: border-box;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* This is the magic line for responsiveness */
  object-fit: cover; 
  /* Ensures the video stays centered */
  /* object-position: center;  */
  object-position: top; 
}

/* Mobile Fix: Ensures the video fills height on small screens */



.glass-card {
  background: rgba(13, 71, 161, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  padding: 60px 40px;
  width: 100%;
  max-width: 500px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  position: relative;
  overflow: hidden; /* Keeps the bottom accent inside */
  
}

/* The dark blue accent at the bottom */
.glass-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: rgba(0, 50, 120, 0.5);
}

.hero-title {
  color: #ffffff;

  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}


/* --- Responsive Media Query (Mobile) --- */
@media (max-width: 768px) {
  .hero-container {
    padding: 0 20px; /* Centers the card horizontally on mobile */
    justify-content: center;
    min-height: 60vh;
  }

  .glass-card {
    max-width: 90%; /* Card takes up most of the screen width */
    padding: 40px 25px;
    text-align: center; /* Optional: Centers text for better mobile UI */
  }

  .hero-title {
    font-size: 1.8rem; /* Smaller font for mobile screens */
  }
}



/* Container for the text window */
.scroller-window {
  height: 120px; /* Adjust based on your font-size and line-height */
  overflow: hidden;
  position: relative;
}

/* The track that moves */
.scroller-track {
  display: flex;
  flex-direction: column;
  /* 4 items total. Each stays for 5s. Total animation = 20s */
  animation: scrollText 20s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.hero-title {
  height: 120px; /* Must match .scroller-window height */
  display: flex;
  align-items: center;
  color: #ffffff;
  /* font-family: 'Segoe UI', sans-serif; */
  font-size: 2rem;
  margin: 0;
}

/* Keyframes for 4 items (0%, 25%, 50%, 75%, 100%) */
@keyframes scrollText {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-120px); }
  50%, 70% { transform: translateY(-240px); }
  75%, 95% { transform: translateY(-360px); }
  100% { transform: translateY(-360px); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .scroller-window, .hero-title {
    height: 90px;
  }
  .hero-title {
    font-size: 1.3rem;
    justify-content: center;
    text-align: center;
  }
  @keyframes scrollText {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-90px); }
    50%, 70% { transform: translateY(-180px); }
    75%, 95% { transform: translateY(-270px); }
    100% { transform: translateY(-270px); }
  }
}

@media (max-width: 768px) {
  .hero-container {
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }
}






.top-nav-bar{
width: 100%;

/* background-color: var(--white); */
 position: fixed; /* Keep it fixed */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        /* background-color: orange !important; */

}  




.top-main-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 3px  20px;
  width: 100%;
  height: 50px; /* Set a specific height */
  transition: all 0.4s ease-in-out; /* Animates height and transform */
  position: relative; 
  z-index: 1000;
  overflow: hidden;
  font-size: small;
}

/* When hidden, we collapse the height and move it out of view */
.top-main-bar.hidden {
  height: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.top-left-bar a{
  margin: 0px 8px;
}

.top-right-bar{
  /* padding-top: 5px; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.language-selector i{
  font-weight: light;
  font-size: small;
}


.nav-links a {
  text-decoration: none;
  position: relative;
  /* padding: 10px 0; */
  /* display: inline-block; */
  color: var(--cg-text);
  color:white;
}

.top-main-bar a,span{
  color: var(--white);
  text-decoration: none;
}

.top-nav-bar.scrolled{
  background-color: #ffffff; /* Solid white background */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* color: red !important; */
 
}
.scrolled a{
  color: var(--cg-text) !important;
}


.top-nav-bar {
 
  transition: background-color 0.3s ease;
 
}
.language-selector a{
  margin: 0px 8px;
}

.top-nav-bar a {
  color: #ffffff; /* Original link color */
  transition: color 0.3s ease;
  text-decoration: none;
}

/* We will use this class in JS to trigger the change */
.top-nav-bar.active-hover {
  background-color: #ffffff !important; /* New background color (e.g., Yellow) */
}

.top-nav-bar.active-hover a {
  color: #000000 !important; /* New link color (e.g., Black) */
}

.top-nav-bar a.link-active {
  background-color: #f1c40f !important; /* The color stays! */
  color: #000000 !important;
  border-radius: 4px;
}


/* 1. Create the line and hide it at the center */
.nav-links a::after {
  content: '';
  position: absolute;
  width: 0; 
  height: 1.5px;
  bottom: 0;       
  right: 0;
  display: block;
  background: var(--primary-color); 
  /* transition: all 0.3s ease-in-out;
  transform: translateX(-50%);  */
  transition: width 0.5s ease;
  -webkit-transition: width 0.3s ease;
 color: var(--primary-color) !important;
}
.text-content:hover{
  color: var(--primary-color) !important;
}

/* 2. Expand to full width on hover */
.nav-links a:hover::after {
  width: 100%; /* Grows to the left and right simultaneously */
  left:0;
    color: var(--primary-color) !important;
}



      ul {
        list-style: none;
      }

      /* --- Navbar Styling (Desktop) --- */
      .navbar {
        max-width: 1800px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 5%;
        
        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
       

      
      }
     

      .logo-container {
        display: flex;
        align-items: center;
      }
      .logo-container img {
        width: 150px;
        height: 35px;
      }
      .logo {
        width: 30px;
        height: auto;
        margin-right: 5px;
      }
      .company-name {
        font-size: 1.2em;
        font-weight: bold;
        color: var(--red-apple-red);
      }
      .nav-links {
        display: flex;
        gap: 30px;
        align-items: center;
      }
      .nav-item {
        position: relative;
      }
      .nav-link {
        display: block;
        padding: 10px 0;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
        color: rgb(0, 0, 0);
        /* background-color: blueviolet; */
      }
    
      .dropdown-arrow {
        font-size: 0.7em;
        /* margin-left: 5px; */
        /* margin-top: 5px; */
        color: var(--text-dark);

        /* display: flex;
        justify-content: center;
        align-items: center;*/
        /* background-color: orange; */
      }
      #angle-down{
        /* color: white; */
        font-size: small;

        margin-left: 4px;
      }
    

      .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* Hamburger Icon (Mobile) */
      .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
        margin-left: 10px;
      }
      .hamburger span {
        height: 2px;
        width: 25px;
        background: #333;
        margin: 4px 0;
        border-radius: 2px;
      }

      .action-buttons button {
        padding: 8px 25px !important;
        border: none;
        border-radius: 0px !important;
        font-weight: bold;
        cursor: pointer;
        margin-left: 10px;
        transition: 0.3s;
        font-size: 14px;
        background-color: transparent;
        border-bottom:1px solid var(--white) !important;
        color: var(--color-dark-blue);
        
        
      }
      .hire-talent {
        background: var(--white);
        color: var(--text-dark);
        border: 1px solid var(--cg-blue) !important;
      }
      .discuss  a{
        
        color: var(--white);
        /* color: var(--color-dark-blue); */
      }
      .discuss a:hover{
        
        color: var(--white);
        /* color: var(--color-dark-blue); */
        border:none !important;
      }
      .discuss{
        /* border-top: 1px solid var(--cg-text) !important; */
     box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.3);
      }

      /* --- Mega Menu (Desktop) --- */

      #drop-arrow{
        background-color: var(--primary-color) !important;
        padding: 0px !important;
        margin-left: 5px;
      }
      #dropdown-arr{
        color: white;
        background-color: magenta;

      }
      .mega-menu {
      
        position: absolute;
        left: calc(50% - 900px); 

        width: 2000px;
        top: 100%;
        background: var(--light-bg);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* border-top: 0.1px solid var(--red-apple-red); */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        z-index: 99;
      
      }

      /* Adjust for smaller desktop screens if 1200px is too wide */
      @media (max-width: 1250px) {
        .mega-menu {
          left: -5%; /* Let it stretch relative to its parent nav-item */
          width: 100vw;
        }
      }




      

      /* Desktop Hover Activation */
      .has-dropdown:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        
      }
      /* JS Activation (for mobile/tablet) */
      .mega-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .mega-menu-content {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px;
        gap: 20px;
        /* background-color: orange; */
      }

      /* New Wrapper for Accordion Groups on Desktop: FLEX Layout */
      .accordion-wrapper {
        flex: 1.5; /* Takes the space of the old service-categories */
        display: flex;
        flex-direction: column;
        padding-right: 20px;
        border-right: 1px solid #ddd;
        position: relative;
        /* background-color: red; */
        /* width: 40%; */
      }

      /* Category Item (Header) Styling */
      .category-item {
        display: flex;
        align-items: flex-start;
        padding: 10px;
        margin-bottom: 5px;
        border-left: 2px solid transparent;
        transition: 0.3s;
        cursor: pointer;
        border-right: 1px solid #ddd;
        width: 40%;
        /* background-color: blue; */
        color: var(--cg-text) !important;
      }

      .icon-strong {
        display: flex;
        align-items: center;
        /* gappx; */
      }
      /* .category-item:hover, REMOVED: Managed by JS now for consistency */
      .category-item.active {
        border-left-color: var(--red-apple-red);
        background: var(--white);
      }
      .category-item .icon {
        font-size: 24px;
        margin-right: 15px;
      }
      .icon img {
        width: 30px;
        height: 30px;
      }
      .category-item strong {
        font-size: 16px;
        font-weight: 700;
      }
      .category-item p {
        font-size: 12px;
        color: var(--text-light);
        margin-top: 2px;
      }
      .category-item .accordion-icon {
        display: none;
      } /* Hide mobile arrow on desktop */

      /* Sub-Services Content on Desktop: Positioning it to the middle column */
      .sub-services-content {
        /* Desktop Styles: Hide all, only show the active one in the middle column */
        position: absolute;
        top: -9999px; /* Hide off-screen by default */
        left: 20px;
        bottom: 0;
        right: 20px;
        display: none;
        gap: 40px;
        /* visibility: hidden;
        opacity: 0; */
        transition: opacity 0.3s;
        /* background-color: orange; */
      }

      /* Desktop Active Tab Content (Middle Column) */
      .sub-services-content.active.desktop-active {
        /* visibility: visible;
        opacity: 1; */
        display: flex;
        /* Reposition to the middle column area relative to mega-menu-content */
        position: absolute;
        top: 0;
        left: 300px; /* Adjusted position for the middle column area */
        width: 400px;
        height: 100%;
        padding: 0 20px;
        /* border-right: 1px solid #ddd; */
        /* background-color: blue; */
      }

      .sub-services-content ul {
        flex: 1;
      }
      .sub-services-content li a {
        display: block;
        padding: 8px 0;
        font-size: 14px;
        color: var(--cg-text);
      }

     
      .sub-services-content li a:hover {
        color: var(--red-apple-red);
         color: var(--primary-color) !important;
      
      }

      /* 3. Contact Info (Right) */
      .contact-info {
        flex: 1;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .contact-card {
        background: var(--white);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }
      .contact-card p {
        margin-bottom: 15px;
        font-size: 14px;
      }
      .contact-card a {
        color: var(--red-apple-red);
        font-weight: 500;
      }
      .contact-card .contact-icon {
        font-size: 1.2em;
        margin-right: 5px;
      }
      .social-connect {
        text-align: center;
        margin-top: 20px;
      }
      .social-connect p {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 15px;
      }
      .social-icons a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: var(--red-apple-red);
        color: var(--white);
        border-radius: 50%;
        margin: 0 3px;
        font-size: 14px;
      }
      #services-about{
        color: var(--cg-text) !important;
      }

      /* =================================================== */
      /* 📱 Mobile & Tablet Portrait (Accordion View)      */
      /* =================================================== */
      @media (max-width: 767px) {
        .top-main-bar{
          display: none;
        }
        /* Navbar & Hamburger */
        .navbar {
          position: fixed;
          top: 0px;
          left: 0px;
          right: 0px;
          flex-wrap: wrap;
          padding: 10px 3%;
          background-color: var(--white);
        }
      
        .hamburger {
          display: flex;
        }
        .action-buttons {
          display: none;
        }
        .nav-links {
          position: absolute;
          top: 50px;
          left: 0;
          width: 100%;
          background: #fff;
         
          flex-direction: column;
          align-items: flex-start;
          gap: 0;
          padding: 10px 0;
          display: none;
          border-top: 1px solid #eee;
          z-index: 99;
          /* --- ADDED/MODIFIED FOR SCROLLING --- */
          max-height: calc(
            100vh - 0px
          ); /* 100% viewport height minus navbar height (60px) */
          overflow-y: auto; /* Enable vertical scrolling */
          /* ------------------------------------ */

    /* Animation Logic */
   
        }
        /* .nav-links.is-open {
        display: flex;
    } */
        .nav-links.is-open {
          display: flex;
       
          
        }
        .nav-item {
          width: 100%;
        }
        .nav-link {
          padding: 12px 15px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: var(--text-dark);
           color: var(--cg-text) !important;
        }
        .nav-item:not(.has-dropdown) {
          display: block;
        }

        /* Mega Menu Transformation */
        .mega-menu {
          position: static;
          width: 100%;
          box-shadow: none;
          border-top: none;
          /* opacity: 0; */
          /* visibility: hidden; */
          display: none;
          transform: none;
          transition: none;
        }
        .mega-menu.is-open {
          /* opacity: 1; */
          /* visibility: visible; */
          display: block;
        }
        .mega-menu-content {
          flex-direction: column;
          padding: 0;
          max-width: 100%;
          gap: 0;
        }

        /* Accordion Grouping and Styling */
        .accordion-wrapper {
          flex: auto; /* Reverts flex property */
          padding: 0;
          border-right: none;
          width: 100%;
          order: 1; /* Place it before contact-info on mobile */
        }

        .category-item {
          border-left: none;
          padding: 12px 15px;
          margin-bottom: 0;
          border-bottom: 1px solid #ddd;
          background: var(--white);
          justify-content: space-between;
          gap: 20px;
          cursor: pointer;
          width: 100%;
        }
        .icon-strong {
          display: flex;
          align-items: center;
          gap: 20px;
        }

        .category-item.active {
          background-color: var(--light-bg);
        }

        .category-item.open {
          border-bottom: none; /* Remove border from the open header */
        }

        .category-item .accordion-icon {
          display: block; /* Show mobile arrow */
          transition: transform 0.3s;
          font-size: 14px;
          color: var(--text-dark);
          margin-left: 10px;
        }
        .accordion-icon svg {
          width: 20px;
          height: 20px;
        }
        .category-item.open .accordion-icon {
          transform: rotate(180deg);
        }

        /* Sub-services Content (Accordion Body) */
        .sub-services-content {
          /* Accordion body styles */
          position: static; /* Overrides absolute positioning */
          top: auto;
          left: auto;
          bottom: auto;
          right: auto;

          display: none; /* Hide all content by default */
          background-color: var(--light-bg);
          visibility: visible; /* Override desktop styles */
          opacity: 1; /* Override desktop styles */
          width: 100%;

          padding: 15px 15px 15px 45px; /* Indent the content */
          flex-direction: column;
          gap: 0;

          border-right: none !important; /* Remove desktop border */
        }

        /* Show content when category item is 'open' */
        .sub-services-content.active {
          display: flex;
          border-bottom: 1px solid #ddd;
        }

        .sub-services-content ul {
          flex: auto;
          margin-top: 5px;
        }
        .sub-services-content ul:first-child {
          border-bottom: 1px dashed #e0e0e0;
          padding-bottom: 10px;
          margin-bottom: 10px;
        }
        .sub-services-content li a {
          padding: 5px 0;
        }

        /* Contact Info (Footer) */
        .contact-info {
          padding: 20px 15px;
          width: 100%;
          border-top: 1px solid #ddd;
          margin-top: 0;
          order: 2; /* Place it after the accordion-wrapper on mobile */
        }
      }

    





      
  

  /* Hero section  */

 
      /* --- CSS Styles --- */
    

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

      .hero-section {
        max-width: 1800px;
        margin: auto;
        min-height: 500px;
        background-color: var(--background-dark);
        position: relative;
        overflow: hidden;
        height: calc(100vh - 55px);
      }

      .hero-slides-container {
        display: flex;
        /* 💡 CRITICAL FIX: Changed from 400% to 500% for 5 slides (4 originals + 1 clone) */
        width: 500%;
        height: 100%;
        /* JavaScript controls the transition property */
        transition: transform 0.6s ease-in-out;
        transform: translateX(var(--slide-x));
      }

      .hero-slide {
        flex-shrink: 0;
        /* 💡 CRITICAL FIX: Changed from 25% to 20% for 5 slides */
        width: 20%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 100px 100px 50px 100px;
        color: var(--text-lightt);
        position: relative;
        /* margin-top: 8rem; */
      }

      .hero-content-wrapper {
        max-width: 50%;
        z-index: 10;
      }

      .hero-image-container {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: flex-end;
        pointer-events: none;
      }

      .player-image {
        width: 100%;
        height: 100%;
        background-position: 70% center;
        background-size: cover;
      }

      /* --- Typography, Tabs, Bottom Nav (Shared Styles) --- */
      .tagline {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        margin-bottom: 10px;
        color: var(--text-faded);
      }
      .main-title {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        margin: 0 0 20px 0;
      }
      .highlight {
        color: var(--primary-color);
      }
      .cta-buttons {
        margin-bottom: 30px;
        display: flex;
        gap: 20px;
        font-weight: 300;
      }
      .cta-button {
        padding: 12px 25px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        border-radius: 4px;
        transition: all 0.3s;
        font-size: 14px;
      }
      .consult-btn {
        background-color: var(--text-lightt);
        /* color: var(--text-lightt); */
        color: var(--white);
        /* box-shadow: 0 4px 10px rgba(247, 90, 78, 0.4); */
      }
      .consult-btn:hover {
        background-color: var(--primary-color);
      }
      .portfolio-btn {
        background-color: transparent;
        color: var(--text-lightt);
        border: 1px solid var(--text-faded);
      }
      .portfolio-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
      }

      .feature-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
        font-size: small;
      }
      .tab-item {
        background: none;
        border: none;
        color: var(--text-faded);
        padding: 10px 20px 10px 0;
        margin-right: 15px;
        text-align: left;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        position: relative;
        transition: color 0.3s;
      }
      .tab-item:hover {
        color: var(--text-lightt);
      }
      .tab-item.active {
        color: var(--text-lightt);
      }
      .tab-item.active::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        max-width: 100px;
        height: 3px;
        background-color: var(--primary-color);
      }

      .bottom-nav {
        display: flex;
        background-color: var(--nav-bar-dark);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* background-color: #0070ad !important; */
        position: relative;
        top: 0;
        width: 100%;
        height: 55px;
        justify-content: space-evenly;
      }
      .nav-item {
        flex-grow: 1;
        text-align: left;
        padding: 10px 10px;
        color: var(--text-faded);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        position: relative;
        transition: color 0.3s;
        color: white;
        text-align: left !important;
      }
      .nav-item:hover {
        color: var(--text-lightt);
        color: var(--primary-color);
      }
      .nav-item.active {
        color: var(--text-lightt);
        background-color: rgba(255, 255, 255, 0.05);
        color: white;
      }
      .nav-item.active::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--primary-color);
      }

      #bottomnavid {
        text-align: center !important;
        font-weight: 300;
      }

      /* --- RESPONSIVENESS --- */
      @media (max-width: 992px) {
        .hero-section {
          height: auto;
          min-height: 80vh;
        }
        .hero-slide {
          flex-direction: column;
          padding: 0;
          padding-bottom: 55px;
          align-items: flex-start;
          justify-content: flex-start;
        }
        .hero-image-container {
          position: relative;
          width: 100%;
          height: 300px;
          pointer-events: auto;
        }
        .player-image {
          background-position: center center;
        }
        .hero-content-wrapper {
          max-width: 100%;
          padding: 40px 5% 10px 5%;
        }
        .main-title {
          font-size: 32px;
          margin-bottom: 9px;
        }
        .tagline {
          font-size: 12px;
        }
        .cta-buttons {
          flex-direction: ROW;
          gap: 10px;
          margin-bottom: 20px;
        }
        .cta-button {
          width: 100%;
          text-align: center;
        }
        .feature-tabs {
          flex-direction: row;
          gap: 10px;
        }
        .tab-item {
          margin-right: 0;
          padding: 5px 0;
          text-align: left !important;
        }
      }

      @media (max-width: 576px) {
        .hero-section {
          /* height: auto;
          min-height: 70vh; */
          margin-top: 60px;
        }
        .nav-item {
          font-size: 11px;
          padding: 10px 3px;
        }
        .nav-item{
          padding-left: 10px;
          padding-right: 10px;
          text-align: left !important;
        }
          #bottomnavid {
        text-align: left !important;
        font-weight: 300;
      }
      }
    

/* hamburger menu */


    :root {
  
  --transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 40px;
  height: 40px;
  /* background: var(--btn-color); */
  border: none;
  cursor: pointer;
  
  /* Soft bottom-only shadow for depth */
  
  /* transition: var(--transition); */
}

.menu-icon {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end; /* Aligns lines to the right for aesthetic look */
}

.menu-icon span {
  display: block;
  height: 2px;
  background: var(--color-blackish-blue);
  border-radius: 10px;
  transition: var(--transition);
}

/* Aesthetic line widths */
.menu-icon span:nth-child(1) { width: 100%; }
.menu-icon span:nth-child(2) { width: 70%; } /* Shorter middle line */
.menu-icon span:nth-child(3) { width: 100%; }

/* Animation when Active */
.hamburger.active .menu-icon span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
  width: 100%;
}

.hamburger.active .menu-icon span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger.active .menu-icon span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
  width: 100%;
}


@media screen and (max-width:768px) {
  .hamburger{
    display: flex;
  }
}



      

    /* solution section */

   
     
    
      :root {
        --gap: 32px; /* Equivalent to Tailwind's space-x-8 */
        --card-padding: 16px; /* Equivalent to Tailwind's p-4 */
        --auto-slide-speed: 5000; /* 5 seconds for mobile auto-slide */
        /* Custom Color Variables */
        --color-dark-blue: #1b2a49;
        --color-teal: #2baaa9;
        --color-light-gray: #c4c4c4;
        --color-blackish-blue: #132743;
        --color-white: #ffffff;
      }

      /* Container setup (max-w-7xl, mx-auto, py-16, px-4/sm:px-6/lg:px-8) */
      .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding: 50px 1rem;
        margin-top: 40px;
        /* background-color: var(--color-dark-blue); */
       
      }
      @media (min-width: 640px) {
        /* sm breakpoint */
        .container {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
       
      }
      @media (min-width: 1024px) {
        /* lg breakpoint */
        .container {
          padding-left: 2rem;
          padding-right: 2rem;
        }
      }

      /* Main layout (lg:grid lg:grid-cols-12 lg:gap-12) */
      .main-layout {
        display: flex;
        flex-direction: column;
        gap: 3rem;
     
      }
      @media (min-width: 1024px) {
        .main-layout {
          display: grid;
          grid-template-columns: repeat(12, minmax(0, 1fr));
          gap: 3rem;
             
        }
        .title-block {
          grid-column: span 4 / span 4;
          margin-bottom: 0;
        }
        .carousel-area {
          grid-column: span 8 / span 8;
        }
      }

      /* LEFT TEXT BLOCK STYLES */
      .title-block {
        margin-bottom: 2.5rem;
      }

      .title-h1 {
   
        color: var(--color-dark-blue); /* Dark Blue */
        font-weight: 500px;
        font-size: 2rem !important;
        line-height: 1.2;
      }
      @media screen and (max-width:750px) {
         .title-h1{
          font-size: 1.8rem !important;
        }
      }
      @media (min-width: 1024px) {
        /* .title-h1 { font-size: 3.75rem; } */
      }

      .separator {
        width: 50px;
        height: 3px;
        background-color: var(--color-teal); /* Teal Accent */
        margin-top: 1rem;
        margin-bottom: 1.5rem;
      }

      .description-p {
        font-size: 1rem;
        color: var(
          --color-blackish-blue
        ); /* Blackish Blue for secondary text */
        max-width: 28rem;
        font-weight: 500;
      }

      /* CAROUSEL STYLES */
      .carousel-area {
        overflow: hidden;
      }

      .carousel-track {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding-bottom: 1rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .carousel-track::-webkit-scrollbar {
        display: none;
      }

      /* Mobile Layout: enables manual scrolling and snap for mobile view */
      @media (max-width: 1023px) {
        .carousel-track {
          overflow-x: scroll;
          scroll-snap-type: x mandatory;
          margin-left: -1rem;
          margin-right: -1rem;
          padding-left: 1rem;
          padding-right: 1rem;
          transition: none;
        }
        .carousel-item-wrapper {
          width: calc(100% - 2rem);
          margin-right: var(--gap);
          scroll-snap-align: start;
        }
        .carousel-item-wrapper:last-child {
          margin-right: 1rem;
        }
        
      }

      /* Card container for one item */
      .carousel-item-wrapper {
        flex-shrink: 0;
        padding: var(--card-padding);
      }

      /* Desktop specific card sizing (3 items visible) */
      @media (min-width: 1024px) {
        .carousel-item-wrapper {
          width: calc(100% / 2.5);
          padding-right: var(--gap);
          padding-left: 0;
        }
        .carousel-item-wrapper:first-child {
          padding-left: 0;
        }
        .carousel-item-wrapper:last-child {
          padding-right: 0;
        }
      }
      .carousel-track {
        margin: auto;
        width: 100%;
      }

      /* CARD STYLES */
      .card {
        background-color: var(--color-white); /* White Card Background */
        /* border-radius: 0.75rem; */
        /* Using a subtle shadow, can be adjusted */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease;
        height: 100%;
        /* background-color: orange; */
      }
      .card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }

      .card-image-container {
        height: 12rem;
        /* border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem; */
        overflow: hidden;
        background-color: #f3f4f6; /* Light gray for placeholder background */
      }

      .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .card-content {
        padding: 1.5rem;
        /* background-color: orange; */
      }

      .card-title {
        font-size: 1.8rem;
        line-height: 1.2;
        font-weight: 700;
        color: var(--color-dark-blue); /* Dark Blue */
      }

      .card-separator {
        width: 3rem;
        height: 3px;
        background-color: var(--color-teal); /* Teal Accent */
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
      }

      .card-text {
        /* font-size: 0.875rem; */
        color: var(--color-blackish-blue); /* Blackish Blue */
        font-weight: 500;
        line-height: 1.3;
      }

      /* NAVIGATION STYLES */
      .nav-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
      }

      .nav-buttons-group {
        display: flex;
        align-items: center;
        gap: 1.5rem;
      }

      .nav-btn {
        color: var(--color-dark-blue); /* Dark Blue */
        border: 1px solid var(--color-dark-blue); /* Dark Blue Border */
        background: transparent;
        /* padding: 0.5rem;
            border-radius: 9999px; */
        transition: background-color 0.15s ease;
        cursor: pointer;
        border: none;
      }

      .nav-btn:disabled {
        opacity: 0.3; /* More visible than 0.5 on a white background */
        cursor: not-allowed;
      }

      .nav-btn:not(:disabled):hover {
        background-color: var(
          --color-light-gray
        ); /* Light Gray hover for button */
      }
      .nav-btn svg {
        color: var(--color-dark-blue); /* Dark Blue Icon */
      }

      .next-btn {
        display: flex;
        align-items: center;
        /* Reset button styles */
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.15s ease;
      }

      .next-btn-icon-wrapper {
        padding: 0.75rem;
        background-color: var(--color-teal); /* Teal Circle */
        border-radius: 9999px;
        margin-right: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-light-gray); /* Light Gray Icon */
      }
      .next-btn:not(:disabled):hover .next-btn-icon-wrapper {
        /* Slightly darken teal on hover */
        background-color: #249997;
      }

      .next-btn-icon {
        height: 0.75rem;
        width: 0.75rem;
      }

      .text-base {
        /* Target the span for the "Next" text */
        color: var(--color-dark-blue); /* Dark Blue Text */
        font-weight: 500;
      }

      .pagination-dots {
        display: flex;
        gap: 0.75rem;
      }

      .dot {
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 9999px;
        background-color: var(--color-light-gray); /* Light Gray inactive dot */
        cursor: pointer;
        transition: background-color 0.2s ease, width 0.2s ease,
          border-radius 0.2s ease;
      }

      .dot:hover {
        background-color: var(--color-blackish-blue);
      }

      .dot.active {
        width: 1.5rem;
        height: 0.5rem;
        border-radius: 0.125rem;
        background-color: var(--color-teal); /* Teal Active Dot */
      }

       @media (max-width:500px) {
        .carousel-item-wrapper {
          /* width: calc(100% / 1.1); */
          padding-right:0px;
          padding-left: 0;
        }}
   

  /* Industries section  */

  

 /* body::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: var(--teal);
  color: blue;
}
        CSS STYLES */

        /* GLOBAL STYLES & RESET */
        :root {
            /* Define the unique colors from the image */
            --color-red: #8b1a32;
            --color-green: #004d3c;
            --color-blue: #092c6e;
            --color-orange: #d16b00;
            --color-white: #ffffff;
        }



        .ds-head-container{
             max-width: 1300px;
            margin: 0 auto;
            padding: 30px;
        }
        /* CARD CONTAINER (CSS GRID) */
        .ds-card-container {
            display: grid;
            /* Default: 4 columns on large screens */
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1300px;
            margin: 0 auto;
        }

        /* BASE CARD STYLES */
        .ds-card-item {
            position: relative;
            height: 400px;
            overflow: hidden; 
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-out; /* Smooth scale effect */
            overflow-y: scroll;
        }

         .ds-card-item::-webkit-scrollbar {
  width: 0px;
  height: 10px;
 
  color: var(--teal);
}

    

        /* COLOR VARIANTS */
        .ds-card-red { 
            background-color: var(--color-red); 
            color: var(--color-white); 
             background-image: url("https://images.pexels.com/photos/8353796/pexels-photo-8353796.jpeg");
            background-size: cover;
        }

        .ds-card-green { background-color: var(--color-green); color: var(--color-white); 
            background-image: url("https://images.pexels.com/photos/8376280/pexels-photo-8376280.jpeg");
             background-size: cover;
        }
        .ds-card-blue { background-color: var(--color-blue); color: var(--color-white);
         background-image: url("https://images.pexels.com/photos/7698828/pexels-photo-7698828.jpeg");
             background-size: cover;
        }
        .ds-card-orange { background-color: var(--color-orange); color: var(--color-white);
         background-image: url("https://images.pexels.com/photos/6953860/pexels-photo-6953860.jpeg");
             background-size: cover;
        }
        .ds-card-title{
          font-size: 18px;
          color: rgb(65, 65, 65);
          background-color: white;
          padding: 10px;      
          font-weight: 600;
          
    
        }

        /* CONTENT LAYERS */
        .ds-card-layer {
            padding: 30px;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth slide transition */
        }

        /* FRONT CONTENT (Always visible) */
        .ds-card-front {
            justify-content: flex-end; /* Push title to the bottom */
            transform: translateY(0);
        }

       

        .ds-plus-icon {
            position: absolute;
            top: 25px;
            right: 25px;
            font-size: 2.2em;
            font-weight: 300;
            opacity: 0.6;
        }

        /* BACK CONTENT (Hidden initially, shown on hover/touch) */
        .ds-card-back {
            justify-content: space-between;
            transform: translateY(100%); /* Start off-screen at the bottom */
            padding-top: 40px;
        }

        /* China Beats (Card 1) specific styling */
        .ds-card-red .ds-card-back {
            justify-content: flex-start;
            text-align: left;
        }

        .ds-card-description {
            font-size: 0.95em;
            line-height: 1.6;
            margin-bottom: auto; /* Pushes logo down */
            padding-right: 20px; /* Space for better look */
            background-color: rgba(255, 255, 255, 0.534); 
            padding: 10px;
            color: black;
            
        }

        /* Placeholder for abstract objects (Pulse, SONAR, MEGAQUABO) */
        .ds-card-image {
            width: 100%;
            height: 60%;
            object-fit: contain;
            margin: auto 0;
            /* Placeholder styling to mimic the objects in the image */
            background-color: rgba(255, 255, 255, 0.1); 
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        /* Logo Placeholder (The small running figure) */
        .ds-card-logo-placeholder {
            width: 30px;
            height: 30px;
            /* Replace this with an SVG icon in a real project */
            background-color: rgba(255, 255, 255, 0.2); 
            border-radius: 50%;
            align-self: flex-end; /* Position at the bottom right */
            margin-bottom: 0;
            margin-top: 10px;
        }


        /* HOVER/TOUCH EFFECT - THE KEY STYLES */
        .ds-card-item:hover .ds-card-front,
        .ds-card-item.is-hovered .ds-card-front {
            transform: translateY(-100%); /* Slide front content out to the top */
        }

        .ds-card-item:hover .ds-card-back,
        .ds-card-item.is-hovered .ds-card-back {
            transform: translateY(0); /* Slide back content into view */
        }


        /* --- RESPONSIVENESS (Media Queries) --- */

        /* Tablet Layout (1024px and below) */
        @media (max-width: 1024px) {
            .ds-card-container {
                /* Change to 2 columns on tablet devices */
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Layout (600px and below) */
        @media (max-width: 600px) {
            .ds-card-container {
                /* Stack cards in a single column on mobile */
                grid-template-columns: 1fr;
            }
            .ds-card-item {
                height: 300px; /* Slightly shorter cards on mobile */
            }
        } 




  
/* industries new  */
  
.main-viewport {
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    background-color: rgb(228, 240, 240);
}

.content-limiter {
    
    width: 100%;
}

/* Header Styling */
.section-intro {
    text-align: left;
    margin-bottom: 70px;
}

.status-pill {
    background: #ffffff;
    color: #0f1021;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.hero-label {
    /* font-size: 36px; */
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Grid Configuration */
.business-grid {
  max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Forces 5 equal columns as seen in image */
    grid-template-columns: repeat(5, 1fr); 
    column-gap: 40px;
    row-gap: 50px;
}
.industry-main-heading{
    max-width: 1200px;
    margin: 0 auto;
   
    color: #132743;
    /* font-size: 30px; */
    font-weight: 800;
  }

/* Individual Card Styling */
.industry-tile {
    /* border-left: 1px solid var(--color-dark-blue);  */
    padding-left: 22px;
    transition: all 0.3s ease;
}

.industry-tile:hover {
    border-left-color:var(--primary-color);
    /* transform: translateX(5px); */
    cursor: pointer;
}

.tile-icon {
    font-size: 26px;
    color: #4c5fff; /* Accent blue for icons */
    display: block;
    margin-bottom: 18px;
}

.tile-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.tile-text {
    color: #6b6d74; 
    font-size: 14.5px;
    font-weight: 400;
}
#newfirstbox{
 
  /* border-top-right-radius: 20px;
  border-bottom-right-radius: 20px; */
  padding: 10px;
  color: white !important;
  border-left: none;
}
.industry-row{
  max-width: 1800px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #00609c;
 
  margin-left: 500px;
  
  margin-bottom: 40px;
 padding: 40px;
 color: white ;
 /* border-top-right-radius: 20px;
  border-bottom-right-radius: 20px; */
}
.industry-row p{
  color: white !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
    .business-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .business-grid { grid-template-columns: repeat(2, 1fr); 
    
    }
    .hero-label { font-size: 28px;
    padding: 0px 20px;
    }
    .industry-row {
        margin-left: 0;
        padding: 30px 0px;
        gap: 15px;
        
    }
}

@media (max-width: 480px) {
    .business-grid { grid-template-columns: 1fr; 
    row-gap: 15px;
    }
    .hero-label { font-size: 24px; }
     .industry-row {
      margin-top: 0px;
      margin-bottom: 0px;
        margin-left: 0;
        padding: 20px 10px;
        gap: 10px;
        border-radius: 0%;
        
    }
    .main-viewport{
    padding: 20px 0px;
    }
}
   







/* why choose us section  */

  .insights-container {
    max-width: 1800px;
    margin: 30px auto;
    padding: 0 0px;
}

.choose-heading{
    max-width: 1050px;
    margin: 0 auto;
    padding: 30px 20px;
    color: white;
}

/* Common Card Styling */
.tag {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 25px;
}

.brand {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #0070ad;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto; /* Pushes brand name to bottom */
}

.card-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
    margin-bottom: 40px;
}

/* TOP SECTION */
.top-row {
    position: relative;
    margin-bottom: 60px;
    height: 350px;
}

.banner-bg {
    width: 85%; /* Image doesn't take full width to allow card to float */
    height: 100%;
    background-size: cover;
    background-position: center;
}

.banner-dark {
    /* Replace with your specific image URL */
    background: linear-gradient(135deg, #001220 30%, #004e8c 70%, #f1a505 100%);
}

.card-float-right {
    position: absolute;
    right: 0;
    top: 50px;
    width: 42%;
    background: #fff;
    padding: 40px;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.08);
    /* height: 300px; */
    display: flex;
    flex-direction: column;
    border-radius: 0%;
}

/* BOTTOM SECTION */
.bottom-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.card-solid-blue {
    width: 35%;
    background: #00609c; /* Signature Blue */
    padding: 40px 60px;
    height: 420px;
    display: flex;
    flex-direction: column;
}

.card-solid-blue .tag, 
.card-solid-blue .card-title, 
.card-solid-blue .brand {
    color: #ffffff;
}

.banner-wrapper-small {
    position: relative;
    width: 65%;
    height: 350px;
}

.banner-blue-ice {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1d4d6e, #a7c5d4);
    /* Replace with your specific image URL */
}

.card-overlap-left {
    position: absolute;
    left: -10%; /* This creates the overlap onto the blue card */
    top: 60px;
    width: 55%;
    background: #fff;
    padding: 40px;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.08);
    height: 400px;
    display: flex;
    flex-direction: column;
    border-radius: 0%;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .top-row { height: auto; display: flex; flex-direction: column; }
    .banner-bg { width: 100%; height: 250px; }
    .card-float-right { position: static; width: 100%; margin-top: -40px; height: auto; }
    
    .bottom-row { flex-direction: column; }
    .card-solid-blue { width: 100%; height: auto; }
    .banner-wrapper-small { width: 100%; }
    .card-overlap-left { position: static; width: 100%; margin-top: -40px; height: auto; }
    .card-solid-blue{
       padding: 40px;
    }
}





/* faqs */
.faq-section {
  width: 100%;
  margin: auto;
  margin-top: 100px;
            max-width: 1800px;
            text-align: center;
            background: linear-gradient(45deg, #1d4d6e, #a7c5d4);
            padding: 30px;
            color: white;
             border-radius: 4px;
        }

        /* Badge and Title */
        .faq-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cg-deep-blue);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }

        .faq-badge svg {
            width: 18px;
            fill: var(--cg-deep-blue);
        }

        .faq-main-title {
            font-size: 24px;
            font-weight: 500;
            color: var(--cg-midnight);
            margin-bottom: 50px;
        }

        /* Accordion Styles */
        .faq-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .faq-item {
            border: 1px solid var(--cg-midnight);
            border-radius: 50px; /* Matching your image's rounded pill shape */
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-trigger {
            width: 100%;
            padding: 18px 25px;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            cursor: pointer;
            text-align: left;
            outline: none;
        }

        .faq-number {
            background-color: var(--cg-midnight);
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 500;
            margin-right: 20px;
            flex-shrink: 0;
            
        }

        .faq-question {
            flex-grow: 1;
            font-size: 20px;
            font-weight: 500;
            color: var(--cg-midnight);
            color: white;
        }

        .faq-icon {
            background-color: var(--cg-midnight);
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

        /* Content Area (Hidden by default) */
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            text-align: left;
            padding: 0 77px; /* Align with question text */
        }

        .faq-content p {
            padding-bottom: 20px;
            color: white;
            line-height: 1.6;
        }

        /* Active State */
        .faq-item.active {
            background-color: var(--cg-light-gray);
            border-color: var(--cg-deep-blue);
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            background-color: var(--cg-deep-blue);
        }

        /* Responsive */
        @media (max-width: 995px) {
.faq-section{
  margin-top: 300px;

}
        }
        @media (max-width: 600px) {
            .faq-trigger { padding: 12px 15px; }
            .faq-number { margin-right: 12px; }
            .faq-content { padding: 0 60px; }
            .faq-section{
              border-radius: 0%;
  margin-top: 430px;
  padding: 30px 10px;
   
}
.faq-main-title{font-size: 24px;
}
        }





        /* client section */

          .carousel-section {
            padding: 60px 0;
        }

        .section-title {
            max-width: 1200px;
            margin: 0 auto 30px auto;
            padding: 30px 20px;
            font-size: 28px;
            color: var(--cg-dark-blue);
            font-weight: 700;
        }

        /* Hero Slider Container */
        .slider-wrapper {
            position: relative;
            width: 100%;
            height: 500px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background-color: #000;
        }

        /* Background Images Layer */
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            z-index: 1;
        }

        .bg-image.active {
            opacity: 1;
        }

        /* Content Card Overlay */
        .content-card {
            background: #ffffff;
            width: 480px;
            padding: 50px;
            margin-left: 10%;
            box-shadow: 15px 15px 40px rgba(0,0,0,0.2);
            position: relative;
            z-index: 5;
        }

        .content-card h2 {
            font-size: 24px;
            color: var(--cg-dark-blue);
            line-height: 1.3;
            margin: 0 0 20px 0;
        }

        .content-card p {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 35px;
            min-height: 72px;
        }

        .read-more {
            display: inline-flex;
            align-items: center;
            padding: 12px 28px;
            border: 1.5px solid var(--cg-dark-blue);
            border-radius: 50px;
            color: var(--cg-dark-blue);
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: 0.3s;
        }

        .read-more:hover {
            background: var(--cg-dark-blue);
            color: #fff;
        }

        /* Navigation Pill */
        .nav-pill {
            position: absolute;
            bottom: 50px;
            left: calc(10% + 780px);
            transform: translateX(-50%);
            background: #ffffff;
            padding: 15px 60px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            z-index: 10;
        }

        .arrow {
            cursor: pointer;
            color: #888;
            font-size: 24px;
            font-weight: bold;
            transition: 0.2s;
            user-select: none;
        }

        .arrow:hover { color: var(--cg-blue); }

        .dots { display: flex; gap: 8px; }

        .dot {
            width: 8px;
            height: 8px;
            background: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.3s;
        }

        .dot.active {
            background: var(--cg-blue);
            transform: scale(1.3);
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-text { animation: fadeInUp 0.6s ease forwards; }

        @media (max-width: 900px) {
            .content-card { width: 90%; margin: 0 auto; padding: 30px; }
            .nav-pill { 
              left: 50%; 
              bottom: 10px;
              padding: 10px 40px;
              margin-top: 30px;
              
            }
            .section-title {
              font-size: 24px;
              padding: 20px;
            }
        }
        @media (max-width: 600px) {
          .carousel-section{
            padding: 20px 0px;

          }
            .content-card { width: 100%; padding: 20px; }
            .nav-pill { 
              left: 50%; 
              bottom: 10px;
              padding: 8px 30px;
              margin-top: 30px;
            }
            .section-title {
              font-size: 20px;
              padding: 15px;
            }
        }





    /* Footer section  */

   
      /* General reset and common styles for the footer */
      .hostinger-footer {
        position: relative;
        top: 40px;
        background-color: #ffffff;
        color: #333;
        /* font-family: Arial, sans-serif; */
        padding: 40px 0;
        border-top: 1px solid #eee;
      }

      .footer-container {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 20px;
      }

      /* --- 1. Main Navigation Columns (Desktop Grid) --- */

      .footer-columns {
        display: grid;
        /* Desktop: 4 columns */
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
        padding-bottom: 40px;
        border-bottom: 1px solid #eee;
      }

      /* Styles common to both desktop/mobile */
      .footer-col h3 {
        font-size: 1rem;
        font-weight: 800;
        color: #333;
        margin-bottom: 15px;
        /* text-transform: uppercase; */
        cursor: default; /* Desktop header is not clickable */
      }

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

      

      .footer-col a {
        text-decoration: none;
        color: #666;
        font-size: small;
        font-weight: 400;
        transition: color 0.2s;
        padding-bottom: 20px;
      }

      .footer-col a:hover {
        color: #007bff;
      }

      .mt-4 {
        margin-top: 20px;
      }

      /* Accordion Arrow Styling */
      .accordion-header {
        position: relative;
        padding-right: 25px; /* Space for the icon */
      }

      .accordion-header::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 0;
        font-size: 18px;
        line-height: 1;
        transition: transform 0.3s ease;
        display: none; /* Hide on desktop */
      }

      .accordion-header.active::after {
        content: "−"; /* Change to minus sign */
      }

      .accordion-content {
        overflow: hidden;
        /* Transitioning max-height */
        transition: max-height 0.3s ease-in-out;
      }

      /* --- 2. Logo, Payment, and Social Section (Unchanged) --- */

      .footer-brand-social {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
      }

      .hostinger-logo-text {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin-bottom: 25px;
      }

      .footer-social-links a {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f7f7f7;
        color: #333;
        border-radius: 4px;
        margin-left: 10px;
        font-weight: 600;
      }

      /* --- 3. Payment Methods and Copyright (Unchanged) --- */

      .footer-payment-copyright {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
      }

      .footer-payment-methods {
        display: flex;
        align-items: center;
      }

      .payment-icon {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-right: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #333;
      }

      .footer-legal-links a {
        color: #666;
        text-decoration: none;
        font-size: 13px;
        margin-left: 15px;
      }

      .footer-legal-links a:hover {
        text-decoration: underline;
      }

      /* --- 4. Final Copyright and Price Info (Unchanged) --- */

      .footer-bottom-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: center;
        padding-top: 15px;
      }

      .footer-bottom-info p {
        font-size: 12px;
        color: #999;
        margin: 0;
      }

      /* --- Responsiveness: ACCORDION STARTS AT 600px --- */
      @media (max-width: 900px) {
        .footer-columns {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 600px) {
        .footer-columns {
          /* Mobile: 1 column */
          grid-template-columns: 1fr;
          gap: 0; /* Remove gap */
        }

        .footer-col {
          border-top: 1px solid #eee;
          /* Keep padding for separator lines on mobile */
          padding: 15px 0;
        }

        /* ACCORDION STYLES FOR MOBILE */
        .accordion-header {
          /* Header becomes clickable */
          cursor: pointer;
          margin: 0; /* Reset margins for clean padding */
          font-size: 14px; /* Ensure heading size is correct */
        }

        .accordion-header::after {
          display: block; /* Show the icon on mobile */
        }

        .accordion-content {
          /* Initially hidden on mobile via JS, but set max-height to 0 here */
          max-height: 0;
          padding-top: 0; /* No top padding when closed */
        }

        /* Apply padding ONLY when open for better spacing */
        .accordion-header.active + .accordion-content {
          padding-top: 15px;
        }

        /* Other mobile stacking styles */
        .footer-brand-social,
        .footer-payment-copyright,
        .footer-bottom-info {
          flex-direction: column;
          align-items: flex-start;
        }
        /* ... (rest of the mobile stacking styles remain the same) ... */
      }