body {
  margin: 0; /* Ensure the body has no margin */
  padding: 0;
  
 
}
/* Scrollbar styles */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #D6D4D4; 
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #73A8d9; 
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #73A8d9; 
}
/*hero banenr area*/

.hero-section {
    position: relative;
    display: flex;
    
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10vw 9.7vw 7.8vw; /* Original padding */
    overflow: hidden; /* Prevent overflow */
    height: 30vw;

  }
  
  .hero-image-wrapper {
    position: absolute;
    z-index: 0;
    width: 100%; /* Full viewport width */
    max-height: 100%;
    
    right: 0;
    bottom: 0;
  }
  
  .hero-image {
   
    object-fit: cover; /* Fill the area while maintaining aspect ratio */
    object-position:top; /* Center the image */
    width: 100%; /* Full width */
    height: 100%;
  }
  



  .hero-content {
    z-index: 1;
    display: flex;
    width: 100%; /* Fixed width for larger screens */
    max-width: 100%; /* Allow maximum responsiveness */
    flex-direction: column;
    font-family: Outfit, sans-serif;
    color: #fff;
    justify-content: center;
  }
  
  .hero-title {
    font-size: 2.7vw; /* Title font size */
    font-weight: 600;
  
  }

  @media (width >= 2450px) {
    .hero-title {
      max-width: 90%; /* Full width */
      white-space: nowrap; /* Prevent word wrapping */

    }
  }


  .hero-description {
    font-size: 1.4vw; /* Description font size */
    font-weight: 350;
    max-width: 100%; /* Full width */

  }



  @media (max-width: 900px) {
    .hero-section {
      padding: 60px 50px 35px; /* Adjust padding for small screens */
      width: 100%; /* Ensure full width */
      height:400px;
      box-sizing: border-box; /* Include padding in total width */
    }

    .hero-image {
      height: 300px;
    }

    .hero-image-wrapper {
      max-height: 300px;
    }

    .hero-title {
      font-size: 25px; /* Title font size */


    }
    .hero-description {
      font-size: 15px; /* Description font size */
  
    }
    
  }


  /*navigation area*/
  .nav-bar {
    display: flex;
    overflow: hidden;
    color: #000;
    justify-content: space-between;
    align-items: center;
    padding: 10px 157px;
    font: 400 77px Outfit; /* Navbar font size */
    position: fixed;
    top: 0;
    z-index: 1000;
    background: #ffff;
    width: -webkit-fill-available;
  }

  @media (min-width: 2400px) {
    .nav-bar {
      padding: 10px 350px;
      font: 550 77px Outfit; /* Adjust navbar font size for larger screens */
    }
  }

  @media (min-width: 1900px) and (max-width: 2400px) {
    .nav-bar {
      padding: 10px 250px;
      font: 500 77px Outfit; /* Adjust navbar font size for medium screens */
    }
  }

  @media (min-width: 1200px) and (max-width: 1500px) {
    .nav-bar {
      padding: 10px 120px;
    }
  }

  @media (min-width: 950px) and (max-width: 1200px) {
    .nav-bar {
      padding: 10px 120px;
    }
  }


  @media (max-width: 950px) {
    .nav-bar {
      padding: 10px 70px;
    }
  }

  .drawer {
    width: 50px;
    display: none; /* Initially hidden */
    cursor: pointer; 
  }

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

  .logo {
    object-fit: contain;
    object-position: center;
    width: 150px;
  }

  @media (min-width: 750px) and (max-width: 1024px) {
    .logo {
      object-fit: contain;
      object-position: center;
      width: 120px;
    }
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 3vw;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nav-links a {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit color from parent */
    padding: 2px 2px; /* Add padding for clickable area */
    border-radius: 30px; /* Rounded corners for the hover effect */
    transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.nav-links a:hover {
    background-color: #D6d4d4; /* Blue background on hover */
  /* Change text color to white on hover for contrast */
}


  .nav-item {
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-size: 30px; 
    transition: background-color 0.5s ease;/* Set font size for nav items */
  }



  @media (min-width: 2200px) {
    .nav-item {
      font-size: 38px; /* Adjust navbar font size for larger screens */
    }
  }

  @media (min-width: 1200px) and (max-width: 1500px) {
    .nav-item {
      font-size: 22px; /* Adjust navbar font size for medium screens */
    }
  }

  @media (min-width: 900px) and (max-width: 1200px) {
    .nav-item {
      font-size: 20px; /* Adjust navbar font size for smaller screens */
    }
  }

  @media (max-width:900px) {
    .nav-links {
      display: none; /* Hide all nav items */
    }
    .nav-content{
      gap: 70px;
    }
    
    .nav-item {
      font-size: 30px; /* Adjust navbar font size for smaller screens */
    }
    .drawer-item{
      text-align: center;
    text-decoration: none;
    color: inherit;
      font-size: 50px;
    }
    .drawer {
      display: block; /* Show the drawer icon */
      width:200px;
      cursor: pointer; 
    }
    .nav-bar{
      justify-content: flex-start;
    }
    .logo {
      object-fit: contain;
      object-position: center;
      width: 120px;
    }
  }

  @media (max-width:550px) {
   
    .nav-content{
      gap: 30px;
    }
    .drawer-item{
      text-align: center;
    text-decoration: none;
    color: inherit;
      font-size: 50px;
    }
    .menutext{
      display:none;
    }
   
    .nav-item {
      font-size: 30px; /* Adjust navbar font size for smaller screens */
    }
    .nav-bar{
      justify-content: center;
      padding: 10px 20px;
    }
    .drawer {

      width:100px;
    }
  }

     /* Modal Styles */
     .modal-overlay {
            display: none; /* Hidden by default */
            position: fixed; /* Cover the entire screen */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
            z-index: 10; /* Overlay above other elements */
        }

        .dropdown-menu {
          font: 200 20px Outfit; 
            display: none; /* Hidden by default */
            position: fixed; /* Position relative to the viewport */
            top: 250px; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Offset to center */
            background-color: white; /* Background color */
            border: 1px solid #ccc; /* Optional border */
            z-index: 11; /* Above the overlay */
            padding: 20px; /* Padding for content */
        
            border-radius: 8px; /* Optional rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
        }

        .dropdown-menu a {
          text-decoration: none; /* Remove underline from links */
          color: inherit; /* Inherit color from parent */
          padding: 2px 2px; /* Add padding for clickable area */
          border-radius: 30px; /* Rounded corners for the hover effect */
          transition: background-color 0.3s ease; /* Smooth transition for hover */
      }

        .dropdown-menu a:hover {
          background-color: #D6d4d4; /* Change color on hover */
      }

   

        .close-menu-button {
          background-color: #ff4d4d; /* Red background */
          color: white;
          border: none;
          padding: 8px 12px;
          cursor: pointer;
          border-radius: 4px; /* Rounded corners */
          margin-bottom: 10px; /* Space below the button */
          float:right;
        }
      

  .nav-item-home {
    width: 6vw;
  }

  

  .nav-item-about {
    width: 7vw;
  }

  .nav-item-products {
    width: 15.625vw;
  }

  .nav-item-news {
    width: 10.547vw;
  }

  .nav-item-contact {
    width: 10.547vw;
  }

  .nav-item-idl {
    width: 3.5vw;
  }

  .user-icon {
    object-fit: contain;
    object-position: center;
    width: 2.5vw;
  }


  /* about us home */

  .about-us-section {
    display: block;
  
  }
  
  .about-us-container {
    background-color: #d9d9d9;
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: 900px;
    
    padding-top: 100px;
    padding-bottom: 20px;
  }

  .content-wrapper {
    display: flex;
    width: 1200px;
    max-width: 100%;
    flex-direction: column;
    padding-bottom: 2vw;
  }
  
  .hlcolor{
  background: -webkit-linear-gradient(top left,#3E8CD6,#aac0d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

  .text-content {
    display: flex;
    flex-direction: column;
    font-family: Outfit, sans-serif;
    color: #000;
    font-weight: 400;
    text-align: center;
    justify-content: center;
    max-width: 100%;
    align-items: center;
  }
  
  .main-title {
    font-size: 2.7vw;
    font-weight: 600;
  }
  
  

  
  .description {
    font-size: 1.4vw; /* Description font size */
    font-weight: 350;
    max-width: 100%; /* Full width */
  }
  .description p{
    margin-block-end: 10px;
  }
  

  .cta-wrapper {
    align-self: center;
    display: flex;
    margin-top: 10px;
    max-width: 100%;
    flex-direction: column;
    font-size: 1.1vw;
    color: inherit;
    
  }
  
  .cta-button {
    display: flex
;
    height: 3vw;
    width: 10vw;
    text-decoration: none;
    color: inherit;
    /* justify-self: center; */
    border-radius: 40px;
    border: 2px solid #81b3e2;
    transition: background-color 0.6s ease;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    flex-wrap: nowrap;
  }

  .cta-button:hover {
    background-color: #81b3e2; /* Change background color on hover */
   color: #fff;
}

  .services-container {
    margin-top: 31px;
  }
   
  .services-grid {
    gap: 20px;
    display: flex;
    justify-content: space-between;
  }
  
  .service-column {

    flex-direction: column;
    line-height: normal;
    width: 100%;
    margin-left: 0px;
  }

  .service-item {
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-shadow: -3px 3px 7px rgba(0, 0, 0, 0.25);
    position: relative;
    border-radius: 20px;
    background-color: #000;
    height: 100%;
    align-self: stretch;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    margin: auto 0;
    padding: 90px 20px 90px;
    font: 600 25px/25px Outfit, sans-serif;
    transition: transform 0.5s ease;
  }

  .service-item:hover{
    transform: scale(1.1);
  }

 
  .service-image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;

  }
 
  .overlay {
 /* Center the text vertically */
    opacity: 0.8; /* Start hidden */
    /* Smooth fade transition */
  }

  .service-title {
    position: relative;
    font-size:  35px;
    line-height: 40px;    
    
  }


  @media (min-width: 1900px){
    .content-wrapper{
      width: 66.4vw;
    }

    .services-grid {
      gap:40px
    }
    .about-us-container{
      height: 39.1vw;
    }
  }


  @media (max-width: 1500px){
    .service-item{
    padding: 80px 15px 80px;
    }
    .content-wrapper{
      width: 86vw;
    }
    .about-us-container{
      height: 800px;
    }
  }

  @media (max-width: 1024px){
    .main-title {
      max-width: 90%;
    
    }
    .content-wrapper{
      padding: 5px 5px 5px 5px;
      width: 95%;
    }

    .about-us-container {
      max-width: 100%;
      padding-top: 40px;
   
    }

    .service-item {
      width: 90%; /* Set a width for service items */
      max-width: 400px; /* Optional: Set a max width */
     
      align-self: center; /* Center item in the flex container */
    }

    .service-image {
        object-fit: cover; /* Ensure the image fits the item */
    }

    .service-title{
      font-size:  18px;
      line-height: 20px;    
    }
  
    .services-grid {
      flex-direction: column;
      gap: 15px;
    }

    .services-container {
      max-width: 100%;
    }

    .description {
      max-width: 90%;
    }

    .service-column {
      align-self: center; 
      display: flex;
    }

    .about-us-container{
      height: max-content;
    }

  }

  @media (max-width: 900px){
    .main-title {
      font-size: 25px;
    }
    .description{
      font-size: 15px;
    }
    .cta-button{
      width: 95px;
      height: 32px;
    }
    .cta-wrapper{
      font-size: 10px;
    }

  }

 
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }




/* discover products home */
   
.products-section {
  padding-left: 16vw;
  display: flex;
  justify-content: flex-end;
  font-family: Outfit, sans-serif;
  color: #000;
  height: 43.75vw;
}


.products-container {
  display: flex;
  flex-direction: row;
  align-self: center;
  gap: 10px;
}

.product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
}

.product-title {
  font-size: 2.7vw;
    font-weight: 600;
}

.product-description {
  font-size: 1.4vw; /* Description font size */
    font-weight: 350;
  
}


.cta-prod-wrapper {
  align-self: flex-start;
  display: flex;
  margin-top: 10px;
  max-width: 100%;
  flex-direction: column;
  font-size: 1.1vw;
  color: inherit;
  
}


.carousel {
  width: 100%;

}
.product-image{
  width: 100%;
}


/* carousel */
.carousel-cell {
        width: 22vw; /* Width for card */
        height: 532px; /* Height for card */
        display: flex;
       
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Hide overflow */
        transition: transform 0.3s ease; /* Smooth scaling */
        opacity: 0.7; /* Default opacity for inactive slides */
        border-radius: 20px; /* Rounded corners */
    }

    .carousel-cell img {
        display: flex;
        width: 90%;
        height: 90%;
        gap:10px;
        border-radius: 20px;
        object-fit: cover; /* Maintain aspect ratio */
    }



    .carousel-cell .text-overlay {
        position: absolute; /* Absolute positioning */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust to center */
        color: white; /* Text color */
        font-size: 35px;
        font-weight: 600;
        line-height: 40px;
        padding: 10px; /* Padding around the text */
        border-radius: 5px; /* Rounded corners for text background */
        text-align: center; /* Center text */
      }

    /* Active slide style */
    .carousel-cell.is-selected {
    
        opacity: 1; /* Make active slide fully opaque */
    }

    .carousel-cell.is-selected img {
        transform: scale(1.1); /* Scale up the active slide */
      
    }

    .button-container {
        position: relative; /* Positioning for buttons */
        bottom: 10px; /* Distance from the bottom */
        top: 50px;
        left: 10px; /* Distance from the left */
        display: flex; /* Flexbox for alignment */
        gap: 50px !important; /* Space between buttons */
    }

    .flickity-prev-next-button {
        top: 30px !important;
        position: relative !important;
        width: 60px;
        height: 60px;
        background: transparent;
        opacity: 0.8;
        gap: 20px;
    }
    .flickity-prev-next-button:hover {
        opacity: 1;
    }
    .flickity-prev-next-button .arrow {
        fill: black;
    }
    .flickity-prev-next-button.no-svg {
        color: white;
    }


    @media (max-width: 1500px){
      .carousel-cell{
        height: 380px;
        width: 24vw;
      }
    }


    @media (max-width: 1040px) {
      .products-section{
        height: max-content;
        padding-bottom: 40px;
        padding-left: 50px;
      }
      .products-container {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: 100%;
      }
    
      .product-info {
        margin-top: 40px;
        padding-right: 50px;
        width: 90%;
      }
    
      .product-title {
        font-size: 25px;
      }
      .product-description{
        font-size: 15px;
      }
      
      .product-image{
        margin-top: 15px;
      }
    
     
    }

    @media (max-width:900px) {
      .carousel-cell {
        width: 200px; /* Width for card */
        height: 250px;
      }

      .carousel-cell .text-overlay {
        font-size: 18px;
        line-height: 20px;
      }
    }

    @media (max-width:700px) {
      .carousel-cell {
        width: 150px; /* Width for card */
        height: 200px;
      }

      .cta-prod-wrapper{
        font-size: 10px;
      }
    }


    /* news event home */

    .news-events-container {
      display: flex;
      flex-direction: column;
      font-family: Outfit, sans-serif;
    }
    
    .news-events-wrapper {
      background-color: #f0f0f0;
      display: flex;
      max-width: 100%;
      flex-direction: column;
      padding: 2.7vw 13vw 2.7vw;
    }

    /* @media (min-width:1440px)and (max-width:1650px) {    
      .news-events-wrapper {
        padding: 40px 250px 40px;
       }
      }
    @media (min-width:1040px)and (max-width:1440px) {    
      .news-events-wrapper {
        padding: 40px 150px 40px;
       }
      }*/
    @media (min-width:995px)and (max-width:1180px) {    
      .news-events-wrapper {
        padding: 40px 120px 40px;
       }
      }
    
    .news-events-content {
      align-self: flex-start;
      display: flex;

      max-width: 100%;
      flex-direction: column;
      color: #000;
      justify-content: flex-start;
    }
    
    .news-events-title {
      font-size: 45px;
      font-weight: 600;
      line-height: 1;
    }
    
    .all-events-button {
      align-self: center;
      display: flex;
      width: 150px;
      max-width: 100%;
      flex-direction: column;
      font-size: 20px;
      font-weight: 400;
      text-align: center;
      
    }
    
    .all-events-link {
      border-radius: 40px;
      padding: 11px 16px;
      border: 2px solid #81b3e2;
      text-decoration: none;
      color: inherit;
    }
    
    .event-card {
      border-radius: 30px;
      background-color: #fff;
      z-index: 10;
      display: flex;

      margin: 30px 10px;
      width: 22.5vw;
      height: 19.5vw;
      max-width: 100%;
      padding-bottom: 25px;
      flex-direction: column;
      font-weight: 500;
      transition: box-shadow 0.3s ease;
    }

    /* @media (min-width:2400px) {  
    .event-card {
      width: 550px;
      height: 500px;
    }
  }

  @media (min-width:2250px) and (max-width:2400px) {    
         .event-card {
           width: 500px;     
           height: 425px;
       }
      }

  @media (min-width:2000px)and (max-width:2250px) {    
         .event-card {
           width: 420px; 
           height: 355px;    
       }
      }

    @media (min-width:1650px)and (max-width:1800px) {    
         .event-card {
           width: 300px;  
           height: 255px;     
       }
      }

      @media (min-width:1300px)and (max-width:1650px) {    
         .event-card {
           width: 250px;  
           height: 215px;
           font-weight: 400;   
       }
      }
      @media (min-width:1000px)and (max-width:1300px) {    
         .event-card {
           width: 200px;  
           height: 170;
           font-weight: 400;   
       }
      } */

      .event-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Shadow effect on hover */
}

  
    .event-image {
      border-radius: 30px 30px 0px 0px;
      object-fit: contain;
      object-position: center;
      max-width: 100%;
    }
    
    .event-details {
      display: flex;
      width: 100%;
      max-width: 100%;
      flex-direction: column;
      margin: 40px 0 0 40px;
    }
    
    .event-name {
      color: #000;
      font-size: 35px;
      font-weight: 600;
      line-height: 1.2;
    }
    .event-name{
      margin-block-start: 5px;
      margin-block-end: 10px;
    }
    
    .event-date {
      color: #a7ada9;
      font-size: 25px;
      line-height: 1;
    }
    
    .event-location {
      width: 100px;
      border-radius: 30px;
      align-self: start;
      margin-top: 40px;
      font-size: 20px;
      color: #3e8cd6;
      white-space: nowrap;
      line-height: 1;
      padding: 1px 13px;
      border: 1px solid #3e8cd6;
    }

.news-events-grid {
    display: flex; /* Use flexbox to arrange cards in a row */
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row; /* Allow wrapping to the next line if necessary */
     /* Center the items horizontally */
  
}

    @media (min-width:1800px)and (max-width:2250px) {    
            .event-details {
              margin: 25px 0 0 25px;  
              }

          .event-name {
              color: #000;
              font-size: 25px;
              font-weight: 600;
              line-height: 1.2;
            }

            .event-location{
              margin-top: 20px;
            }

    }

    @media (min-width:1000px)and (max-width:1800px) {    
            .event-details {
              margin: 15px 0px 0px 15px;  
              }

          .event-name {
              color: #000;
              font-size: 20px;
              font-weight: 600;
              line-height: 1;
            }

            .event-date {
              color: #a7ada9;
              font-size: 15px;
              line-height: 1;
             }

            .event-location{
              margin-top: 10px;
              width: 100px;
              font-size: 20px;
            }

    }
      
    @media (max-width: 1000px) {
      .news-events-wrapper {
        
        max-width: 100%;
        padding: 50px 50px;
      }
    
      .news-events-content {
        align-self: center;
        max-width: 100%;
      }
      .news-events-grid {
        flex-direction:column;
        gap: 20px;
      }
    
      .news-events-title {
        max-width: 100%;
        font-size: 40px;
       
      }
    
      .all-events-button {
        margin-top: 40px;
      }
    
      .all-events-link {
        padding: 0 20px;
      }

      .event-card {
        width: 100%; /* Adjust width for smaller screens */
        max-width: 400px; /* Set max width for mobile */
        margin: 10px auto; /* Center the card */
       max-height: 350;
           height: 100%;
           font-weight: 400;   
      }
    
      .event-details {
        margin: 10px 0px 0px 10px;  
      }
    

             
      .event-location {
        white-space: initial;
        margin-top: 20px;
      }
      
    }


    /* career banner */


.home-career-container{
  font-family: Outfit, sans-serif;
}


    .hero-career-image {
      position: relative; /* For positioning of text and button */
      overflow: hidden; /* Hide overflow if any */
  }

  .hero-career-image img {
      width: 100%; /* Make the image responsive */
      height: auto; /* Maintain aspect ratio */
      display: block; /* Remove bottom space from image */
  }

  .hero-text-career {
      text-align: center;
      position: absolute;
      top: 20%; /* Position the text towards the top */
      left: 50%;
      transform: translate(-50%, -50%); /* Center the text */
      color: white;
      width: 66.7vw; /* Limit width for better readability */
     /* Set a max width for the text */
  }

  .hero-text-title {
    font-size: 2.7vw;
      font-weight: 600;
  }

  
.hero-career-description {
  font-size: 1.4vw; /* Description font size */
    font-weight: 350;
  
}


  .button-career-wrapper {
      position: absolute; /* Absolute position for button group */
      bottom: 12%; /* Position above the bottom */
      left: 50%; /* Center horizontally */
      transform: translateX(-50%); /* Center button group */
      color:white;
      align-self: flex-start;
      display: flex;
      max-width: 100%;
      flex-direction: column;
      font-size: 1.1vw;
      color: inherit;
      
  }


  .cta-button-career {
    display: flex
;
    height: 3vw;
    width: 10vw;
    text-decoration: none;
    color: #fff;
    /* justify-self: center; */
    border-radius: 40px;
    border: 2px solid #81b3e2;
    transition: background-color 0.6s ease;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    flex-wrap: nowrap;
  }

  .cta-button-career:hover {
    background-color: #81b3e2; /* Change background color on hover */
 
}


@media (max-width: 900px){
  .hero-text-title {
    font-size: 25px;
  }
  .hero-career-description{
    font-size: 15px;
  }
  .cta-button-career{
    width: 95px;
    height: 32px;
  }
  .button-career-wrapper{
    font-size: 10px;
  }

}


@media (max-width: 700px){
  .hero-text-career{
    top:30%;
  }

}

@media (max-width: 500px){
  .hero-career-image img{
    width: 100%;
    height: 290px;
  }



}







  /* partner section */

  .partner-section {
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: Outfit,sans-serif;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 13vw;
   
}



.content-wrapper-partner {
    align-self: stretch;
    display: flex;
    height: 30vw;
    max-width: 50%;
    flex-direction: column;
    justify-content: center;
   
    margin: auto 0;
}


.main-heading-partner {
    font-size: 2.7vw;
    font-weight: 600;
    
}


.sub-heading-partner {
    font-size: 1.4vw;
    font-weight: 350;
}


.cta-wrapper-partner {
    display: flex;
    margin-top: 10px;
    max-width: 100%;
    flex-direction: column;
    font-size: 1.1vw;
    text-align: center;

    background: none;
    cursor: pointer;
    color: inherit;
}

.partner-image {
  
    object-fit: contain;
    object-position: center;

   width: 33vw;
    align-self: stretch;
    min-width: 240px;
    margin: auto 0;
}



@media (max-width: 900px){
  .content-wrapper-partner {
    align-self: center;
  }
  .main-heading-partner {
    font-size: 25px;
  }
  .sub-heading-partner{
    font-size: 15px;
  }
  .cta-wrapper-partner{
    font-size: 10px;
  }

}

@media (max-width: 700px){
  .partner-section {
    padding: 0 50px;
  }
}

@media (max-width: 580px){
  .partner-section {
    padding: 30px 50px 10px;
  }
  .partner-image{
    width: fit-content;
  }
  .content-wrapper-partner {
    max-width: fit-content;
    height: fit-content;
  }
}


/* footer */


.footer {
      background-color: #191e22;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

  max-width: 100%;
      
      margin: 0 auto -5px calc(50% - 50vw);
      padding: 46px 162px 64px 144px;
    }
    
    @media (max-width: 991px) {
      .footer {
        max-width: fit-content;
        padding: 30px 50px;
      }
    }
    
    .footer-content {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    @media (max-width: 991px) {
      .footer-content {
        max-width: 100%;
      }
    }
    
    .footer-links {
      display: flex;
      max-width: 100%;
      align-items: center;
      gap: 40px 98px;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
      font: 18px Outfit, sans-serif;
    }
    
    @media (max-width: 991px) {
      .footer-links {
        width:auto;
   
      }
    }
    
    @media (max-width: 640px) {
      .footer-links {
        padding-right: 172px;
      }
    }
    
    .nav-column {
      display: flex;
      flex-direction: column;
      white-space: nowrap;
      justify-content: flex-start;
      flex-grow: 1;
      width: 57px;
    }
    
    @media (max-width: 991px) {
      .nav-column {
        white-space: initial;
      }
    }
    
    .nav-link {
      color: #fff;
      font-weight: 500;
      text-decoration: none;
      
    }
    
    .nav-link-secondary {
      margin-top: 23px;
      width: 100%;
      color: #989da2;
      font-weight: 300;
      text-decoration: none;
    }
    
    @media (max-width: 991px) {
      .nav-link-secondary {
        white-space: initial;
      }
    }
    
    .products-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex-grow: 1;
      width: 166px;
    }
    
    .product-list {
      display: flex;
      margin-top: 23px;
      max-width: 100%;
      width: 180px;
      flex-direction: column;
      color: #989da2;
      font-weight: 300;
      justify-content: flex-start;
      list-style-type:none;
      padding-left: 0;
      position: relative;
    }


    
    .product-item {
      width: 100%;
      margin-top: 10px;
    }

    .product-item a{
      text-decoration: none;
      color: inherit;
    }

   

   
  
    
    @media (max-width: 991px) {
      .product-item {
        padding-right: 20px;
      }
    }
    
    .contact-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex-grow: 1;
      width: 197px;
    }
    
    .contact-info {
      display: flex;
      margin-top: 23px;
      max-width: 100%;
      width: 211px;
      flex-direction: column;
      color: #989da2;
      font-weight: 300;
      justify-content: flex-start;
    }
    
    .contact-title {
      width: 100%;
      color: #fff;
      font-weight: 500;
    }
    
    .contact-detail {
      margin-top: 10px;
      width: 100%;
      
    }

    .contact-detail a{
      text-decoration: none;
      color: inherit;
    }

    
    .contact-email {
      margin-top: 10px;
      width: 100%;
      color: #3e8cd6;
      white-space: nowrap;
      text-decoration: none;
      
    }
    
    @media (max-width: 991px) {
      .contact-email {
        white-space: initial;
      }
    }
    
    .footer-bottom {
      display: flex;
      margin-top: 50px;
      width: 100%;
      align-items: flex-end;
      gap: 18px 892px;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    
    @media (max-width: 991px) {
      .footer-bottom {
        max-width: 100%;
        margin-top: 40px;
      }
    }
    
    .footer-logo {
   
      object-fit: contain;
      object-position: center;
      width: 10.2vw;
    }
    
    .social-icons {
      display: flex;
      align-items: flex-end;
      gap: 23px;
      justify-content: flex-start;
    }
    
    .social-icon {
    
      object-fit: contain;
      object-position: center;
      width: 2.5vw;
    }
    
    .footer-divider {
      min-width: 240px;
      width: 1051px;
      height: 0;
      flex-grow: 1;
      border: 1px solid #989da2;
    }
    
    .footer-copyright {
      display: flex;
      margin-top: 11px;
      width: 100%;
      align-items: center;
      gap: 40px 140px;
      color: #989da2;
      justify-content: flex-start;
      flex-wrap: wrap;
      font: 300 18px Outfit, sans-serif;

    }
    
    @media (max-width: 991px) {
      .footer-copyright {
        max-width: 100%;
      }

      .social-icon {
        width: 25px;
      }

      .footer-logo {
        width: 105px;
      }
    }
    
    .copyright-logo {
      aspect-ratio: 1;
      object-fit: contain;
      object-position: center;
      width: 35px;
      align-self: stretch;
      margin: auto 0;
    }
    
    .copyright-links {
      align-self: stretch;
      display: flex;
      min-width: 240px;
      align-items: flex-start;
      gap: 40px 81px;
      justify-content: flex-start;
      flex-wrap: wrap;
      flex-grow: 1;
      width: 857px;
      margin: auto 0;
     
    }

    .copyright-links a{
      text-decoration: none;
      color: inherit;
    }
    
    @media (max-width: 991px) {
      .copyright-links {
        max-width: 100%;
      }
    }


    /* about us fact */

    .about-us-fact { display: flex; flex-direction: column;padding: 5vw 7vw 5vw;height: 35vw;}
    
    .about-description-fact { align-self: center; width: 80%; color: #000; text-align: center; font: 600 2vw Outfit, sans-serif; }
    .stats-container { margin-top: 60px; width: 100%;}
    .stats-grid { gap: 20px; display: flex; }
    .stat-card { border-radius: 40px; background-color: #f0f0f0; display: flex; flex-grow: 1; flex-direction: column; font-family: Outfit, sans-serif; justify-content: space-evenly; width: 100%;height: 15vw; padding: 28px 31px; }
    .stat-card p {
      margin-block-start: 5px;
      margin-block-end: 5px;
    }
    .stat-icon { aspect-ratio: 1; object-fit: contain; object-position: center; width: 2.7vw; }
    .stat-number { color: #000; font-size: 2.7vw; font-weight: 600;}
    .stat-description { color: #515253; font-size: 1.4vw; font-weight: 350; }
    @media (max-width: 1200px) {
      .stats-container{
        margin-top: 20px;
      }
    }
    @media (max-width: 900px) {
      .about-us-fact{height: max-content ;padding: 5px 5px 5px;}
      .about-description-fact { max-width: 100%; font-size: 20px; }
      .stats-container { max-width: 100%; margin-top: 10px; display: flex;justify-content: center;}
      .stats-grid { flex-direction: column; align-items: stretch; gap: 0; width: 70%; }
      .stat-card {flex-direction: row;     justify-content: space-evenly;
        align-items: center; margin-top: 5px; padding: 28px 20px; }
      .stat-number { font-size: 25px; }
      .stat-icon {width:25px}
      .stat-description {font-size: 15px;}
    }

    @media (max-width: 600px)  {
      .stats-grid {
        width: 100%;
      }
    }

    /* about us trust part */
    .trusted-partner {
      display: flex;
      flex-direction: column;
      font-family: Outfit, sans-serif;
      color: #000;
      
      
    }
    
    .content-wrapper-trustpart {
      display: flex;
      align-items: center;
      gap: 40px;
      justify-content: center;
      flex-wrap: wrap;
      height: 37vw;
      padding: 10px 30px 50px;
    }
    
    .text-content-truspart {
      align-self: stretch;
      display: flex;
      min-width: 240px;
      flex-direction: column;
      justify-content: center;
      width: 40%;
      margin: auto 0;
    }
    
    .main-heading-trustpart {
      font-size: 2.7vw;
      font-weight: 600;
   
    }
    
    .description-trustpart {
      font-size: 1.4vw;
      font-weight: 350;

    }
    
    .trust-partner-image {
      aspect-ratio: 0.91;
      object-fit: contain;
      object-position: center;
      width: 25vw;
      border-radius: 20px;
      align-self: stretch;
      min-width: 240px;
      margin: auto 0;
    }
    
    @media (max-width: 900px) {


      .main-heading-trustpart {
        font-size: 25px;
      }

      .description-trustpart {
        font-size: 15px;
      }
      .content-wrapper-trustpart{
        height: max-content;margin-top: 20px;
      }

      .content-wrapper-trustpart,
      .text-content-truspart,
     
      .trust-partner-image {
        max-width: 100%;
      }


   
    }

    @media (max-width: 500px) {
      .trust-partner-image {
        width: 220px;
        min-width: 150px;
      }
    }

    /* map */

    .news-events-map {
      display: flex;
      flex-direction: column;
      color: #000;
      
    }
    
    .locations-container {
      background-color: #f0f0f0;
      display: flex;

      flex-direction: column;
      align-items: center;
      padding: 5vw 7vw 5vw;
    }
    
    .content-wrapper-map {
      display: flex;
      margin-bottom: -32px;
      
      max-width: 90%;
      flex-direction: column;
    }
    
    .locations-title {
      margin: 0;
      font: 600 2.7vw Outfit, sans-serif;
    }
    
    .locations-image {
      aspect-ratio: 2.73;
      object-fit: contain;
      object-position: center;
      width: 100%;
      margin-top: 42px;
    }
    
    @media (max-width: 901px) {
      .news-events-map {
        font-size: 40px;
      }
    
      .locations-container {
        max-width: 100%;
        font-size: 40px;
        padding: 0 20px 100px;
      }
    
      .content-wrapper-map {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: 40px;
      }
    
      .locations-title {
        max-width: 100%;
        font-size: 25px;
      }
    
      .locations-image {
        max-width: 100%;
        margin-top: 40px;
      }
    }



    /* ourpartner */

    .partners-section { display: flex; flex-direction: column; }
    .partners-container { background-color: #d6d4d4; display: flex; -ms-transform-origin-x: 100%; flex-direction: column; align-items: center; padding: 5vw 7vw 5vw; }
    .partners-content { display: flex; max-width: 100%; flex-direction: column; }
    .partners-header { align-self: center; display: flex; width: 68%; flex-direction: column; font-family: Outfit, sans-serif; color: #000; text-align: center; justify-content: center; }
    .partners-title { font-size: 2.7vw; font-weight: 600;}
    .partners-description { font-size: 1.4vw; font-weight: 350;}
    .partners-logo-grid { background-color: #f0f0f0; display: flex; margin-top: 26px; width:62.5vw; flex-direction: column; padding:20px 60px; align-self: center;}
    .partners-logo-row { display: flex; align-items: center; gap: 30px 30px; flex-wrap: wrap;justify-content: space-evenly; }
    .partners-logo-row:not(:first-child) { margin-top: 26px; }
    .partners-logo-img { object-fit: contain; object-position: center; max-width: 100%; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%); }
 
    .partners-logo-img-2 { width: 10.5vw; aspect-ratio: 3; }
   
    .partners-logo-img-5 { width: 7.3vw; aspect-ratio: 1.5; }

    .partners-logo-img-14 { width: 14vw; aspect-ratio: 7.4; }

    /* .partners-logo-img-1 { width: 170px; aspect-ratio: 6.8; }
    .partners-logo-img-3 { width: 123px; aspect-ratio: 4.1; }
    .partners-logo-img-4 { width: 77px; aspect-ratio: 1; }
    .partners-logo-img-6 { width: 189px; aspect-ratio: 4.2; }
    .partners-logo-img-7 { width: 70px; aspect-ratio: 2; }
    .partners-logo-img-8 { width: 165px; aspect-ratio: 2.46; }
    .partners-logo-img-9 { width: 152px; aspect-ratio: 2.42; }
    .partners-logo-img-10 { width: 103px; aspect-ratio: 2.02; }
    .partners-logo-img-11 { width: 162px; aspect-ratio: 4.39; }
    .partners-logo-img-12 { width: 190px; aspect-ratio: 3.73; }
    .partners-logo-img-13 { width: 149px; aspect-ratio: 4.26; }
    .partners-logo-img-15 { width: 128px; aspect-ratio: 3.56; }
    .partners-logo-img-16 { width: 148px; aspect-ratio: 4.48; }
    .partners-logo-img-17 { width: 70px; aspect-ratio: 0.79; }
    .partners-logo-img-18 { width: 108px; aspect-ratio: 2.63; }
    .partners-logo-img-19 { width: 111px; aspect-ratio: 2.27; } */

    @media (max-width: 1225px) {
      .partners-logo-grid {width: 67vw; }
    }

       
    @media (max-width: 900px) {
      .partners-container { max-width: 100%; padding: 30px 30px; }
      .partners-content { max-width: 100%; }
      .partners-title { max-width: 100%; font-size: 25px; }
      .partners-description { max-width: 100%; font-size: 15px;}
      .partners-logo-grid { padding: 10px 20px; }
      .partners-logo-grid{
        width: 500px;
       }
       .partners-logo-img-2 { width: 112.5px;  }
   
       .partners-logo-img-5 { width: 75px; }
   
       .partners-logo-img-14 { width: 150px; }
    }

    @media (max-width: 900px) {
      .partners-logo-grid{
        width: fit-content;
      }
    }



    /* project tracker */

    .recent-projects {
      border-radius: 0;
      display: flex;
      flex-direction: column;
    }
    
    .projects-container {
      background-color: #fff;
      display: flex;
      max-width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5vw 7vw 5vw;
    }

    
    .content-wrapper-proj {
      display: flex;
      width: 100%;
      max-width: 90%;
      flex-direction: column;
    }
     
    .header-content-proj {
      align-self: center;
      display: flex;
      width: 68%;
      flex-direction: column;
      font-family: Outfit, sans-serif;
      color: #000;
      text-align: center;
      justify-content: center;
    }
    
    .section-title-proj {
      font-size: 2.7vw;
      font-weight: 600;
    }
    
    
    .section-description-proj {
      font-size: 1.4vw;
      font-weight: 350;
      
    }
       
    .projects-grid {
      margin-top: 40px;
      
    }
       
    .projects-row {
      gap:20px;
      display: flex;
      justify-content: space-evenly ;
    }
    
  
    .project-column {
      display: flex;
      flex-direction: column;

    }

    
    .project-card {
      border-radius: 20px;
      background-color: #bed4ec;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      overflow: hidden;
      font-family: Outfit, sans-serif;
      max-width: 100%;
    }

    
    .card-content-proj {
      border-radius: 20px;
      background-color: #f0f0f0;
      display: flex;
      padding-bottom: 19px;
      flex-direction: column;
      height: 100%;
    }
    
    .project-image {
      aspect-ratio: 1.85;
      object-fit: contain;
      object-position: center;
      width: 100%;
    }
    
    .project-details {
      display: flex;
      margin-top: 15px;
     
      max-width: 100%;
      padding: 1vw 4vw 2vw 4vw;
      flex-direction: column;
      justify-content: start;
    }
    
    .project-header {
      display: flex;
      max-width: 100%;
      flex-direction: column;
      justify-content: start;
    }
    
    .project-status {
      color: #989da2;
      font-size: 1vw;
      font-weight: 400;
    }
    
    .project-name {
      color: #000;
      font-size: 1.2vw;
      font-weight: 600;
   
    }
    
    .project-info {
      color: #000;
      font-size: 1vw;
      font-weight: 400;
      
      margin-top: 0.5vw;
    }
    


    @media (max-width:925px) {
  
    .project-status {
      font-size: 11px;
    }
    
    .project-name {
      font-size: 13px;
    }
    
    .project-info {
      font-size: 11px; 
    }
    /* 
    } */
    .projects-grid {
      max-width: 100%;
      margin-top: 40px;
    }
    .header-content-proj{
      width: 100%;
    }
    .section-description-proj {
      font-size: 15px;
      max-width: 100%;
    }
    .section-title-proj {
      max-width: 100%;
      font-size: 25px;
    }
    .content-wrapper-proj {
      max-width: 100%;
    }
    .projects-container {
      max-width: 100%;
    }
    .projects-grid{
      align-self: center;
    }
    .projects-row {
      flex-direction: column;
      align-items: stretch;
      width: 350px;
      gap: 30px;}


    }

    @media (max-width:450px) {
      .projects-row {width: fit-content;}
    }



    

    /* bod section */

    .board-section {
      display: flex;
      flex-direction: column;
      font-family: Outfit, sans-serif;
      color: #000;
      width: 100%;
      background-color: #D6D4D4;

  }

  .board-container {
      display: flex;
      max-width: 100%;
      flex-direction: column;
      align-items: center;
      padding: 5vw 10vw 5vw; /* Adjusted padding for better consistency */
      box-sizing: border-box;
  }

 

  .board-content {
      display: flex;
  
      width: 100%;
  
      flex-direction: column;
      box-sizing: border-box;
  }

  .board-header {
      align-self: center;
      display: flex;
      width: 70%;
      flex-direction: column;
      text-align: center;
 
      box-sizing: border-box;
  }
  
  .board-title {
      font-size: 2.7vw;
      font-weight: 600;

  }
  .board-description {
      font-size: 1.4vw;
      font-weight: 350;
  }
  
  
  
  .director-container {
      display: flex;
      margin-top: 60px;
      gap: 40px;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-evenly;
      box-sizing: border-box;
  }
  
  
  
  .director-info {
      align-self: stretch;
      display: flex;
      min-width: 240 px;
      flex-direction: column;
      justify-content: center;
      width: 50%;
      box-sizing: border-box;
     
  }
  
  .director-role {
      color: #989DA2;
      font-size: 1.8vw;
      font-weight: 500;
      text-align: center;
      align-self: start;
  }
  
  .director-name {
      font-size: 2vw;
      font-weight: 600;
  }
  
 
  
  .director-bio {
      font-size: 1.2vw;
      font-weight: 350;
  }
  
  
  
  .director-image {
      border-radius: 20px;
      background-color: #98CDFF;
      width: 25%;
      aspect-ratio: 7/8;

  }
  .director-image img{
    max-width: 100%;
    border-radius: 20px;
  }




  
  @media (max-width: 925px) {
    .board-title{
      font-size: 25px;
    }
    .board-description{
      font-size: 15px;
    }
    .board-content{
      align-items: center;
    }
    .director-container {
      gap:10px;
      width: 100%;
      flex-direction: column; 
      align-items: center;
      justify-content: center;
  }
  .director-info{
    align-self: center;
    width: 60%;
  }
  .director-role{
    font-size: 17.5px;
  }
  .director-name{
    font-size: 19px;
  }
  .director-bio{
    font-size: 11px;
  }
  .director-image{
    width: 300px;
  }
  .director-image img{
    width:100%;
    margin-bottom: 5px;
  }

      .director-container:nth-child(odd) {
          flex-direction: column;
      }
      
      .director-container:nth-child(even) {
          flex-direction: column-reverse;
      }
  }


  @media (max-width: 500px) {
    .director-image{
      width: 200px;
    }
  }






  /* prod solutions */

  .product-categories {
    display: flex;
    flex-direction: column;
    font-family: Outfit, sans-serif;

 
  }
  
  .product-categories-container {
    background-color: #fff;
    display: flex;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 50px 80px 100px;
  }
  
  @media (max-width: 991px) {
    .product-categories-container {
      max-width: 100%;
      padding: 0 20px 100px;
    }
  }
  
  .search-container {
    display: flex;
    margin-bottom: -40px;
    width: 100%;
    max-width: 90%;
    flex-direction: column;
    justify-content: start;
  }
  
 
  .search-bar {
    align-self: start;
    display: flex;
    align-items: center;
    gap: 40px 53px;
    font-size: 1.6vw;
    color: #000;
    font-weight: 400;
    justify-content: start;
  }

  @media (max-width: 991px) {
    .search-container {
      max-width: 100%;
      margin-bottom: 10px;
    }

    .search-bar {
      display: grid;
      font-size: 20px;
      gap: 10px 10px;
    }

   
  }
  
  
  .search-label {
    align-self: stretch;
    margin: auto 0;
  }
  
  .search-option {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    justify-content: start;
    margin: auto 0;
  }
  
  @media (max-width: 991px) {
    .search-option {
      white-space: initial;
     
    }
  }
  
  .radio-button {
    border-radius: 50%;
    align-self: stretch;
    display: flex;
    width: 30px;
    height: 30px;
    margin: auto 0;
  }
  

    
  .product-solution-grid, .brand-grid {
          display: none; /* Hide both grids initially */
         
      }


  .search-option-label {
    align-self: stretch;
    margin: auto 0;
  }
 
  
  .product-solution-grid {
    /* display: flex; */
    margin-top: 50px;
    width: 80%;
    max-width: 100%;
    align-items: start;
    gap: 20px 20px;
    /* font-size: 32px; */
    color: #fff;
    font-weight: 600;
    /* text-align: center; */

    justify-content: start;
    flex-wrap: wrap;
  }
  


  
  .product-solution-image-wrapper {
    display: flex;
    flex-direction: column;
    text-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
    position: relative;
    border-radius: 20px;
    margin: 10px 10px;
    padding: 10px 10px;
    height: 10vw;
    width: 14.5vw;
    justify-content: space-evenly;
  }

  
  .product-solution-image {
    position: absolute;
    inset: 0;
    height: 100%;
    width:  100%;
    
    object-position: center;
  }
  
  .product-solution-title {
    position: relative;
    align-self: center;
   font-size: 1.8vw;
   display: flex;
       flex-direction: row;
       justify-content: space-evenly;
  }


      
  @media (max-width: 995px) {
    .radio-button{
      width: 20px;
      height: 20px;
    }
    .product-solution-title{
      font-size: 25px;
    }
    .product-solution-grid {
      justify-content: center;
      width: 100%;
      margin-top: 10px;
    }

    .product-solution-image-wrapper {
      height: 150px;
      width: 250px;
    }

    
  }


  .brand-grid {
          display:grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 15px;
        
          max-width: 100%;
          margin-top: 80px;
      }

      .brand-item {
          border: 1px solid #E1E1E1;
          padding: 15px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 120px;
      }

      .brand-item img {
          max-height: 80px;
          max-width: 100%;
      }

      /* Responsive adjustments */
      @media (max-width: 992px) {
          .brand-grid {
              grid-template-columns: repeat(4, 1fr);
          }
      }

      @media (max-width: 768px) {
          .brand-grid {
              grid-template-columns: repeat(3, 1fr);
          }
      }

      @media (max-width: 576px) {
          .brand-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media (max-width: 400px) {
          .brand-grid {
              grid-template-columns: 1fr;
          }
      }


      /* detail prod */

      .detail-prod-section {
        display: flex;
        flex-direction: column;
    }

    .content-wrapper-detail-prod {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 100px;
        max-width: 100%;
    }

    .left-aligned-container {
        max-width: 100%;
        align-self: self-start;
    }

    .breadcrumb {
        font-size: 1.5vw;
        font-family: Outfit, sans-serif;
        color: #989da2;
        margin-bottom: 20px;
        text-align: left;
    }

    .detail-category-list {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .detail-category-button {
      font-family: Outfit, sans-serif;
        font-size: 1.2vw;
        padding: 10px 20px;
        border-radius: 30px;
        cursor: pointer;
        background-color: #d6d4d4;
        color: #000;
        transition: background-color 0.3s ease;
    }

    .detail-category-button.active {
        background-color: #3e8cd6;
        color: #fff;
    }

    .detail-product-section {
        margin-top: 40px;
        width: 100%;
        display: none; /* Hide all sections by default */
    }

    .detail-product-title {
        font-size: 2vw;
        font-family: Outfit, sans-serif;
        font-weight: 600;
        text-align: left;
        margin-top: 10px;
    }

    .detail-product-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 20px;
    }

    .detail-product-card {
        text-align: center;
        width: 20vw;
    }

    .detail-product-image {
        width: 100%;
        height: auto;
    }

    .detail-product-name {
        font-size: 1.5vw;
        font-family: Outfit, sans-serif;
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        .content-wrapper-detail-prod {
            padding: 10px 20px;
        }

        .detail-product-grid {
            flex-direction: column;
            align-items: center;
        }

        .detail-product-card {
          text-align: center;
          width: 160px;
      }

      .detail-product-title{
        font-size: 19px;
      }
      .detail-product-name {
        font-size: 12px;
      }

      .detail-category-button {
        font-size: 10.5PX;
      }
      .breadcrumb{
        font-size: 12px;
      }


    }


    /* showcase */

    .showcase-product-section { display: flex; flex-direction: column; font-family: Outfit, sans-serif; background-color: #fff; padding: 7vw 3.5vw; align-items: center; }
    .showcase-content-wrapper { display: flex; gap: 30px; align-items: flex-start; max-width: 100%;width: 95%; flex-wrap: wrap; justify-content: center; }
    .showcase-text-content { display: flex; flex-direction: column; width:40%; max-width: 70%;}
    .showcase-breadcrumb { font-size: 1.8vw; color: #d6d4d4; font-weight: 350; align-self: flex-start; padding-left: 10vw;}
    .showcase-breadcrumb-item { color: #d6d4d4; }
    .showcase-breadcrumb-current { color: #989da2; }
    .showcase-product-title { font-size: 2.7vw; font-weight: 600; margin-top: 20px;}
    .showcase-product-description { font-size: 1.4vw; font-weight: 350; color: #000; }
    .showcase-product-meta { font-size: 1.2vw; margin-top: 10px; }



    .showcase-download-links { margin-top: 10px; }
    .showcase-download-link { color: #007bff; text-decoration: none; display: block; margin-top: 5px; padding-left: 10px; }
    .showcase-showcase-contact-button-wrapper {
      display: flex;
      margin-top: 10px;
      max-width: 100%;
      flex-direction: column;
      font-size: 1.1vw;
      color: inherit;}
    .showcase-contact-button { 
      display: flex;
      height: 3vw;
      width: 10vw;
      text-decoration: none;
      color: inherit;
      /* justify-self: center; */
      border-radius: 40px;
      border: 2px solid #81b3e2;
      transition: background-color 0.6s ease;
      justify-content: center;
      align-items: center;
      /* align-content: center; */
      flex-wrap: nowrap; 
    }
    .showcase-product-image { aspect-ratio: 1; object-fit: contain; object-position: center; width:40%;max-width: 70%;; align-self: stretch; min-width: 240px; margin: auto 0; }



    @media (max-width: 1400px) {
      .showcase-product-section{padding: 10vw 3.5vw;}
    }

    @media (max-width: 1000px) {
      .showcase-product-section{padding: 90px 25px;}
      .showcase-content-wrapper { flex-direction: column-reverse; align-items: center;gap:10px;width: 100%; }
      .showcase-breadcrumb { font-size: 18px; padding-left: 10px;}
      .showcase-text-content{width: 100%;max-width: 100%;}
      .showcase-product-title { font-size:25px;}
      .showcase-product-description { font-size:15px;}
      .showcase-product-image { width: 70%; align-self: center; margin-top:  30px;} 
      .showcase-product-meta { font-size: 15px; margin-top: 5px;}
      .showcase-contact-button{width: 95px;height: 32px;}
      .showcase-showcase-contact-button-wrapper{font-size: 10px;}
    }


    /*contact us form*/

    .contactus-container {
            padding: 150px 50px;
            background-color: #d3d3d3;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            display: flex;
            justify-content: space-evenly;
            font-family: Outfit;
            
  }

  .contactus-content{
    width: 70vw;
  }
  .contactus-title{
    text-align: center;
    font-size: 2.7vw;
    
    font-weight: 600;
    margin-bottom: 20px;
    color: black;

  }
 
  .inputbox1{
    display: flex; flex-wrap: nowrap; padding:5px 5px;gap:5px;     justify-content: space-evenly;
    width: 100%;
  }

  .inputarea {
    width: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: white;
    font-size: 1.4vw;
    color: #d3d3d3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 350;
  }

  .inputbox2{
    display: flex; flex-wrap: wrap;     justify-content: space-evenly;
    width: 100%;
    padding:5px 5px;gap:5px;
  }

  .inputarea2{
   
    width: 50%;
    padding: 10px;
    margin: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: white;
    font-size: 1.4vw;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 350;
  }

  .contacttextarea {
      height: 10vw;
      resize: none;
  }
  .contactusbutton-container {
      display: flex;
      justify-content: center;
  }
  .contactus-button{
    background-color: white;
    font-size: 1.1vw;
    color: #4a5568;
    font-weight: bold;
    padding: 10px 20px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    cursor: pointer;
    height: 3vw;
        width: 10vw;
        border-radius: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }


  
  .contactus-button:hover {
    background-color: #81b3e2; /* Change background color on hover */
    color: #fff;
  }


  @media (max-width: 1024px) {
    .contactus-title{
      font-size: 25px;
    }
     .inputbox1{
    display: flex; flex-wrap: wrap; padding:2px 2px;gap:0px;     justify-content: space-evenly;
    width: 100%;
  }
  .inputarea2 {
    width: 100%;
    font-size: 15px;
  }
  .inputarea{
    font-size: 15px;
  }

  .inputbox2{
    padding:2px 2px;gap:0px; 
  }

  .contactus-button{
    width: 95px;
    height: 32px;
    font-size: 10px;
  }



}


.address-section{
  display: flex;
}
  /*addres contact us*/
  .address-container {
    width: 95vw;
    max-width: 100%;
    padding: 7.8vw 7.8vw;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    font-size: 1vw;
    font-family: Outfit;
    align-self: center;
}





@media (min-width: 450px) {
    .address-container {
        grid-template-columns: repeat(2, 1fr);
    
    }
}
@media (min-width: 1024px) {
    .address-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1280px) {
    .address-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
.address {
    margin-bottom: 16px;
}
.address-title {
  font-size: 1.4vw;
    font-weight: bold;
    margin-bottom: 10px;
}
.address-detail{
  
    margin: 4px 0px 10px;
    
}
.address-number-data{
  
  margin: 4px 0px 10px;
  
}
.address-email{
  
  margin: 4px 0px 10px;
  
}
.address-number{
  
    font-weight: bold;
    margin: 4px 5px;
}



@media (max-width: 1024px) {
  .address-container {
      font-size: 11px;
      
  }

  .address-title {
    font-size: 15px;
  }
}