@media (min-width: 0px)  and (max-width: 369px)
{	
     html {
      font-size: 50%;
      overflow-x: hidden !important;
    } 
  
    /* Reset margin and padding for body */
    body {
      width: 100%;
      margin: 0;
      padding: 0;
      
    }
	 .background-image {
            width: 330px;
            height: 230px;
            clip-path: none;
            border-radius: 25px; /* Remove the clip-path on smaller screens */
            border-style: none;
          }
     .main-nav-list {
      list-style: none;
      display: flex;
      justify-content: center; /* Center the menu items horizontally */
      gap: .3rem;
      flex-direction: row; /* Display the menu items next to each other */
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translate(0%, 40%); /* Center the menu horizontally */
      margin: 0;
      padding: 0;
      text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
    }	

   .main-nav-link {
      flex: 1; /* Equal width for all menu items */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.8rem;
      font-weight: 500;
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease-in-out, transform 0.6s ease;
      border-radius: 10px;
      border: #fff solid 1.3px;
      padding: 1rem 2rem;
      text-align: center; /* Center the text within each link */
      width: 100%; /* Make sure the links take the full width */
      white-space: nowrap; /* Prevent line breaks in menu items */
      overflow: hidden; /* Hide any overflowing content */
      text-overflow: ellipsis; /* Add ellipsis (...) for long texts */
    }
       .grid {
      row-gap: 4.8rem;
    }
  
    .grid--2-cols,
    .grid--3-cols,
    .grid--4-cols {
      grid-template-columns: 1fr;
    }
  
    /* Main navigation container */
    .main-nav {
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
  
    /* Make the images take the full height */
    .main-nav .nav-item-image {
      width: 100%;
      height: 50vh; /* Adjust the height as needed */
      object-fit: cover;
    }
  
    /* Center the logo and title on the image */
    .main-logo {
      width: 30%;
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 999;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      backface-visibility: hidden;
    }
  
    /* Position the title above the menu */
    .nav-title {
      position: absolute;
      bottom: calc(0vh + 40px); /* Adjust the distance from the image bottom */
      left: 52%;
      transform: translateX(-50%);
      z-index: 2;
      width: 100%;
      color: #f5eee8;
      font-size: 2.2rem;
      font-weight: bold;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
      opacity: 1;
    }
     /* Styling for the link hover effect */
    .main-nav-link::before {
      content: "";
      position: absolute;
      margin-top: 3px;
      padding-top: 1.5px;
      bottom: -5px;
      left: 50%;
      width: 0;
      height: 3px;
      background-color: #fff;
      transition: width 0.4s ease;
      transform: translateX(-50%);
      background-color: #34869e;
    }
  
    /* Adjust the hover effect width to full width */
    .main-nav-link:hover::before {
      width: 100%;
    }
  
    .hws-nav-item .main-nav-list li,
    .hbs-nav-item .main-nav-list li {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  
    .hbs-nav-item:hover img,
    .hws-nav-item:hover img {
      filter: blur(0px) brightness(100%) sepia(0%) hue-rotate(0deg);
    }
    .hbs-nav-item:hover,
    .hws-nav-item:hover {
      width: 100%;
      transform: translateY(0) scale(1);
    }
    .main-nav-link:hover {
      transform: scale(1);
      color: #000 !important;
      border: #fff solid 1.3px;
      background-color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
    }
  
    .scroll-down-arrow {
      opacity: 0;
    }
  
    /**************************/
    /* Hero Styling */
    /**************************/
    .section-hero {
      height: 18rem;
      padding: 2rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; /* Add relative positioning to .section-hero */
    }
  
    .heading-primary {
      font-size: 4.5rem;
      padding: 0.6rem 1.5rem;
      gap: 0.7rem;
    }
  
    .right-text,
    .left-text {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 3.2rem;
      text-align: center;
      align-self: center;
    }
  
    .floating-text {
      font-size: 1.4rem;
      max-width: 90%;
      width: 90%;
      padding: 5px;
      text-align: center;
      animation: none;
      opacity: 1;
      position: absolute;
      bottom: 1rem; /* Position the floating text at the bottom of the container */
      left: 50%; /* Center the floating text horizontally */
      transform: translateX(-50%);
      white-space: normal; /* Allow the text to wrap to multiple lines if needed */
      font-family: "Arial", sans-serif;
      text-align: center;
    }
  
    .invisible {
      display: none;
    }
  
    /**************************/
    /* Certification-Section Styling */
    /**************************/
    .section-certificats {
      margin: 0.5rem 0;
      padding: 3rem 0;
    }
  
    .heading-secondary {
      font-size: 2.9em;
    }
  
    .logos {
      margin: 1rem 0;
      gap:0.5rem
    }
  
    .certif-item{
      align-items: center;
    }
    .heading-featured-in {
      font-family: "Roboto", "Arial", sans-serif;
      font-size: 1.6rem;
      text-transform: uppercase;
      letter-spacing: 0.95px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 1rem;
      padding-left: 1.88%;
      color: #999;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }
  
    /* Style the certification logos and titles */
    .certif-item img {
      width: 85%;
      height: auto;
      border-radius: 18%;
      filter: grayscale(100%);
      opacity: 0.6;
    }
  
    .certif-item:hover img {
      transform: scale(1.1);
      filter: grayscale(0%);
      opacity: 0.8;
    }
  
    /* Add a new background color to the section */
    .section-featured {
      padding: 2.5em 2rem;
      background-color: #fff;
    }
  
    .container {
      text-align: center;
    }
  
    /* Adjust the color of the certification titles */
    .certif-title {
      font-family: "Roboto", "Arial", sans-serif;
      font-size: 1.2rem;
      font-weight: bold;
      color: #777; /* Use the color #777 from the images */
      text-transform: uppercase; /* Convert the text to uppercase */
      letter-spacing: 1px; /* Add some letter spacing */
      transition-delay: 0.005s;
      margin: 0;
    }
  
    /* Media queries for responsiveness */
  
      .logos {
        flex-direction: column; /* Stack the certification logos vertically on smaller screens */
        align-items: center; /* Center the logos horizontally */
      }
  
      .heading-featured-in {
        font-size: 1.4rem; /* Decrease the font size for smaller screens */
        padding-left: 0; /* Remove the left padding for smaller screens */
      }
  
      .section-featured {
        padding: 1.5em 1rem; /* Decrease the padding for smaller screens */
      }
  
      .certif-item img {
        width: 100%; /* Make the certification logos take full width */
        max-width: 200px; /* Limit the maximum width of the logos */
        margin-bottom: 1rem; /* Add some spacing between the logos */
      }
  
      .costum-margin {
        margin-bottom: 10px; /* Decrease the bottom margin for smaller screens */
      }
    
    
    /**************************/
    /* qui-somme-nous Styling */
    /**************************/
    .section-qui-sommes-nous{
      margin-top: 2rem;
      
    }
  /* New section */
  .block-middle-text {
      text-transform: uppercase;
      padding: 0 10px;
      font-weight: 600;
      font-size: 15px;
      color: #777;
    }
    
    .block-middle-icon {
      filter: brightness(0.3) invert(1) sepia(1) saturate(50) hue-rotate(180deg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(1.4);
    }
    
    .block-middle-icon img {
      padding: 25px;
    }
    
    .block-middle {
      display: flex;
      align-items: center; /* Center the contents vertically */
      margin-bottom: 20px;
    }
    
    /* Media query for responsiveness */
  
    .homepage-title {
      margin-top: 2rem; /* Decrease the top margin on smaller screens */
      margin-bottom: 2rem; /* Decrease the bottom margin on smaller screens */
    }
  
    .block-middle {
      flex-direction:  column-reverse; /* Stack the icon and text vertically on smaller screens */
      align-items: center; /* Center the contents horizontally */
      text-align: center; /* Center the text horizontally */
    }
  
    .block-middle-icon img {
      padding: 15px; /* Adjust the padding on smaller screens */
    }
  
    .block-middle-icon {
      transform: scale(1); /* Adjust the icon size on smaller screens */
    }
    
    /* Fix the order of flex items when text appears before images */
    .inverse {
       display: flex; 
       flex-direction: column; 
    }
  
    /* Trustworthy section */
  /* Trustworthy section */
  .section-trustworthy {
      margin-bottom: 0;
      background-color: #fff;
      position: relative;
      display: flex; /* Use flexbox to position elements side by side */
    }
    
    .background-image {
      width: 60%;
      height: 60vh;
      background-color: #b3b4b3;
      background-image: url("/src/templates/test/image/16.webp");
      background-size: cover;
      background-position: left;
      background-repeat: no-repeat;
      clip-path: circle(30% at 47% 50%);
      background-size: 100%;
      transform: scale(1);
      background-color: #fff;
      transition: clip-path 0.8s ease-in-out, transform 0.8s ease-in-out, width 0.8s ease-in-out, height 0.8s ease-in-out;
    }
    
    .text-content {
      position: absolute;
      max-width: 25%;
      top: 50%;
      right: 14%;
      transform: translateY(-50%), transform 0.8s ease-in-out;
      transition: color 1s ease;
      color: #34869e;
    }
    
    .text-content p {
      font-size: 1.6rem;
      color: #000;
      line-height: 1.5;
      text-align: justify;
      margin-right: 9px;
    }
    
    /* Additional styling for the text */
    .text-content h2 {
      font-size: 2.5rem;
      font-weight: 500;
      color: inherit;
      margin-bottom: 1.6rem;
      text-align: start;
      line-height: 1.2;
      word-wrap: break-word;
    }
    
    .white-color {
      color: #fff !important;
    }
    
    .text-desc {
      opacity: 1;
      transition: opacity 1.2s ease-in-out;
      font-size: 1.7rem !important;
    }
	
  .btn {
        display: block; /* Make the button a block element to take full width on mobile */
        max-width: 300px !important;; /* Set a maximum width for the button */
        margin: 1rem auto !important; /* Center the button horizontally */
        background-color: #000 !important; /* Change the button background color to black on mobile */
        color: #fff !important; /* Change the button text color to white on mobile */
        border-color: #fff !important; /* Change the button border color to white on mobile */
        opacity:1 !important;
    }
    
    /* Media query for responsiveness */

      .section-trustworthy {
        flex-direction: column; /* Stack the image and text vertically on smaller screens */
        align-items: center; /* Center the contents horizontally */
        margin-top: 3rem;
      }
    
      .background-image {
        width: 330px;
        height: 230px;
        clip-path: none;
        border-radius: 25px; /* Remove the clip-path on smaller screens */
        border-style: none;
      }
    
      .text-content {
        max-width: 87.5%; /* Take 90% width on smaller screens */
        text-align: center; /* Center the text horizontally */
        transform: none; /* Remove transform on smaller screens */
        margin-top: 1rem; /* Add margin on top to separate from the image */
        font-size: 1.2rem !important; /* Make the text smaller */
        position: static; /* Remove absolute positioning on smaller screens */
      }
    
      .text-content h2 {
        font-size: 2rem; /* Make the heading smaller */
      }
    
      .text-content p {
        font-size: 1.2rem; /* Make the paragraph smaller */
        color: #000; /* Set the paragraph color to black */
      }

    
    
  /**************************/
  /* Support SECTION Styling */
  /**************************/
  
  /* Additional styles for all screen sizes */
  /**************************/
  /* Support SECTION Styling */
  /**************************/
  
  /* Additional styles for all screen sizes */
  .section-support {
      background-color: #fff;
      display: grid;
      grid-template-columns: 55fr 45fr;
      align-items: center;
    }
    
    .support-container {
      padding: 9.6rem;
    }
    
    .support {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 0rem;
      column-gap: 8rem;
    }
    
    .support-img {
      width: 6.4rem;
      border-radius: 50%;
      margin-bottom: 1.2rem;
    }
    
    .support-text {
      font-size: 1.8rem;
      line-height: 1.8;
      margin-bottom: 1.6rem;
    }
    
    .support-name {
      font-size: 1.6rem;
      color: #6f6f6f;
    }
    
    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.6rem;
      padding: 1.6rem;
    }
    
    .gallery-item {
      overflow: hidden;
    }
    
    .gallery-item img {
      display: block;
      width: 100%;
      transition: all 0.4s;
    }
    
    .gallery-item img:hover {
      transform: scale(1.1);
    }
    
    /* Mobile styles */

      .section-support {
        grid-template-columns: 1fr; /* Change the grid layout to single column */
        align-items: center; /* Center the items vertically */
        justify-content: center; /* Center the items horizontally */
      }
    
      .support-container {
        padding: 2rem; /* Reduce the padding for better mobile display */
      }
    
      .support {
        grid-template-columns: 1fr; /* Change the grid layout to single column */
        row-gap: 1.6rem; /* Add some gap between elements */
        column-gap: 0; /* Remove column gap */
      }
    
      .support-img {
        width: 4rem; /* Reduce the image size for better mobile display */
        margin-bottom: 0.8rem; /* Reduce the margin between image and text */
      }
    
      .support-text {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the text horizontally */
        text-align: center; /* Center the text horizontally */
      }
    
      .gallery {
        padding: 1rem; /* Reduce the padding for better mobile display */
      }
    
      .gallery-item {
        overflow: hidden;
        border-radius: 10px; /* Add border-radius to images for a better look */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box-shadow */
      }
    
      .subheading {
        text-align: center;
      }
    
      .heading-secondary {
        text-align: center;
      }
    
      .heading-tertiary {
        font-size: 2rem;
      }
    
      .mobile-users {
        max-width: 61%;
        font-size: 1.7rem;
        margin: 0 auto; /* Center the text horizontally */
      }
    
    

  
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/
@media (min-width: 370px)  and (max-width: 574px) {
    /* Set the font size for smaller screens */
    html {
      font-size: 50%;
      overflow-x: hidden !important;
    } 
  
    /* Reset margin and padding for body */
    body {
      width: 100%;
      margin: 0;
      padding: 0;
      
    }
  
    .grid {
      row-gap: 4.8rem;
    }
  
    .grid--2-cols,
    .grid--3-cols,
    .grid--4-cols {
      grid-template-columns: 1fr;
    }
  
    /* Main navigation container */
    .main-nav {
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
  
    /* Make the images take the full height */
    .main-nav .nav-item-image {
      width: 100%;
      height: 50vh; /* Adjust the height as needed */
      object-fit: cover;
    }
  
    /* Center the logo and title on the image */
    .main-logo {
      width: 30%;
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 999;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      backface-visibility: hidden;
    }
  
    /* Position the title above the menu */
    .nav-title {
      position: absolute;
      bottom: calc(0vh + 40px); /* Adjust the distance from the image bottom */
      left: 52%;
      transform: translateX(-50%);
      z-index: 2;
      width: 100%;
      color: #f5eee8;
      font-size: 2.2rem;
      font-weight: bold;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
      opacity: 1;
    }
  
    /* Main navigation menu items */
    .main-nav-list {
      list-style: none;
      display: flex;
      justify-content: center; /* Center the menu items horizontally */
      gap: .5rem;
      flex-direction: row; /* Display the menu items next to each other */
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translate(0%, 40%); /* Center the menu horizontally */
      margin: 0;
      padding: 0;
      text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
    }
  
    /* Main navigation links */
    .main-nav-link {
      flex: 1; /* Equal width for all menu items */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease-in-out, transform 0.6s ease;
      border-radius: 10px;
      border: #fff solid 1.3px;
      padding: 1rem 2rem;
      text-align: center; /* Center the text within each link */
      width: 100%; /* Make sure the links take the full width */
      white-space: nowrap; /* Prevent line breaks in menu items */
      overflow: hidden; /* Hide any overflowing content */
      text-overflow: ellipsis; /* Add ellipsis (...) for long texts */
    }
  
    /* Styling for the link hover effect */
    .main-nav-link::before {
      content: "";
      position: absolute;
      margin-top: 3px;
      padding-top: 1.5px;
      bottom: -5px;
      left: 50%;
      width: 0;
      height: 3px;
      background-color: #fff;
      transition: width 0.4s ease;
      transform: translateX(-50%);
      background-color: #34869e;
    }
  
    /* Adjust the hover effect width to full width */
    .main-nav-link:hover::before {
      width: 100%;
    }
  
    .hws-nav-item .main-nav-list li,
    .hbs-nav-item .main-nav-list li {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  
    .hbs-nav-item:hover img,
    .hws-nav-item:hover img {
      filter: blur(0px) brightness(100%) sepia(0%) hue-rotate(0deg);
    }
    .hbs-nav-item:hover,
    .hws-nav-item:hover {
      width: 100%;
      transform: translateY(0) scale(1);
    }
    .main-nav-link:hover {
      transform: scale(1);
      color: #000 !important;
      border: #fff solid 1.3px;
      background-color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
    }
  
    .scroll-down-arrow {
      opacity: 0;
    }
  
    /**************************/
    /* Hero Styling */
    /**************************/
    .section-hero {
      height: 18rem;
      padding: 2rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; /* Add relative positioning to .section-hero */
    }
  
    .heading-primary {
      font-size: 4.5rem;
      padding: 0.6rem 1.5rem;
      gap: 0.7rem;
    }
  
    .right-text,
    .left-text {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 3.2rem;
      text-align: center;
      align-self: center;
    }
  
    .floating-text {
      font-size: 1.4rem;
      max-width: 90%;
      width: 90%;
      padding: 5px;
      text-align: center;
      animation: none;
      opacity: 1;
      position: absolute;
      bottom: 1rem; /* Position the floating text at the bottom of the container */
      left: 50%; /* Center the floating text horizontally */
      transform: translateX(-50%);
      white-space: normal; /* Allow the text to wrap to multiple lines if needed */
      font-family: "Arial", sans-serif;
      text-align: center;
    }
  
    .invisible {
      display: none;
    }
  
    /**************************/
    /* Certification-Section Styling */
    /**************************/
    .section-certificats {
      margin: 0.5rem 0;
      padding: 3rem 0;
    }
  
    .heading-secondary {
      font-size: 2.9em;
    }
  
    .logos {
      margin: 1rem 0;
      gap:0.5rem
    }
  
    .certif-item{
      align-items: center;
    }
    .heading-featured-in {
      font-family: "Roboto", "Arial", sans-serif;
      font-size: 1.6rem;
      text-transform: uppercase;
      letter-spacing: 0.95px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 1rem;
      padding-left: 1.88%;
      color: #999;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }
  
    /* Style the certification logos and titles */
    .certif-item img {
      width: 85%;
      height: auto;
      border-radius: 18%;
      filter: grayscale(100%);
      opacity: 0.6;
    }
  
    .certif-item:hover img {
      transform: scale(1.1);
      filter: grayscale(0%);
      opacity: 0.8;
    }
  
    /* Add a new background color to the section */
    .section-featured {
      padding: 2.5em 2rem;
      background-color: #fff;
    }
  
    .container {
      text-align: center;
    }
  
    /* Adjust the color of the certification titles */
    .certif-title {
      font-family: "Roboto", "Arial", sans-serif;
      font-size: 1.2rem;
      font-weight: bold;
      color: #777; /* Use the color #777 from the images */
      text-transform: uppercase; /* Convert the text to uppercase */
      letter-spacing: 1px; /* Add some letter spacing */
      transition-delay: 0.005s;
      margin: 0;
    }
  
    /* Media queries for responsiveness */
  
      .logos {
        flex-direction: column; /* Stack the certification logos vertically on smaller screens */
        align-items: center; /* Center the logos horizontally */
      }
  
      .heading-featured-in {
        font-size: 1.4rem; /* Decrease the font size for smaller screens */
        padding-left: 0; /* Remove the left padding for smaller screens */
      }
  
      .section-featured {
        padding: 1.5em 1rem; /* Decrease the padding for smaller screens */
      }
  
      .certif-item img {
        width: 100%; /* Make the certification logos take full width */
        max-width: 200px; /* Limit the maximum width of the logos */
        margin-bottom: 1rem; /* Add some spacing between the logos */
      }
  
      .costum-margin {
        margin-bottom: 10px; /* Decrease the bottom margin for smaller screens */
      }
    
    
    /**************************/
    /* qui-somme-nous Styling */
    /**************************/
    .section-qui-sommes-nous{
      margin-top: 2rem;
      
    }
  /* New section */
  .block-middle-text {
      text-transform: uppercase;
      padding: 0 10px;
      font-weight: 600;
      font-size: 13.6px;
      color: #777;
    }
    
    .block-middle-icon {
      filter: brightness(0.3) invert(1) sepia(1) saturate(50) hue-rotate(180deg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(1.4);
    }
    
    .block-middle-icon img {
      padding: 25px;
    }
    
    .block-middle {
      display: flex;
      align-items: center; /* Center the contents vertically */
      margin-bottom: 20px;
    }
    
    /* Media query for responsiveness */
  
    .homepage-title {
      margin-top: 2rem; /* Decrease the top margin on smaller screens */
      margin-bottom: 2rem; /* Decrease the bottom margin on smaller screens */
    }
  
    .block-middle {
      flex-direction:  column-reverse; /* Stack the icon and text vertically on smaller screens */
      align-items: center; /* Center the contents horizontally */
      text-align: center; /* Center the text horizontally */
    }
  
    .block-middle-icon img {
      padding: 15px; /* Adjust the padding on smaller screens */
    }
  
    .block-middle-icon {
      transform: scale(1); /* Adjust the icon size on smaller screens */
    }
    
    /* Fix the order of flex items when text appears before images */
    .inverse {
       display: flex; 
       flex-direction: column; 
    }
  
    /* Trustworthy section */
  /* Trustworthy section */
  .section-trustworthy {
      margin-bottom: 0;
      background-color: #fff;
      position: relative;
      display: flex; /* Use flexbox to position elements side by side */
    }
    
    .background-image {
      width: 60%;
      height: 60vh;
      background-color: #b3b4b3;
      background-image: url("/src/templates/test/image/16.webp");
      background-size: cover;
      background-position: left;
      background-repeat: no-repeat;
      clip-path: circle(30% at 47% 50%);
      background-size: 100%;
      transform: scale(1);
      background-color: #fff;
      transition: clip-path 0.8s ease-in-out, transform 0.8s ease-in-out, width 0.8s ease-in-out, height 0.8s ease-in-out;
    }
    
    .text-content {
      position: absolute;
      max-width: 25%;
      top: 50%;
      right: 14%;
      transform: translateY(-50%), transform 0.8s ease-in-out;
      transition: color 1s ease;
      color: #34869e;
    }
    
    .text-content p {
      font-size: 1.6rem;
      color: #000;
      line-height: 1.5;
      text-align: justify;
      margin-right: 9px;
    }
    
    /* Additional styling for the text */
    .text-content h2 {
      font-size: 2.5rem;
      font-weight: 500;
      color: inherit;
      margin-bottom: 1.6rem;
      text-align: start;
      line-height: 1.2;
      word-wrap: break-word;
    }
    
    .white-color {
      color: #fff !important;
    }
    
    .text-desc {
      opacity: 1;
      transition: opacity 1.2s ease-in-out;
      font-size: 1.7rem !important;
    }
	
  .btn {
        display: block; /* Make the button a block element to take full width on mobile */
        max-width: 300px !important;; /* Set a maximum width for the button */
        margin: 1rem auto !important; /* Center the button horizontally */
        background-color: #000 !important; /* Change the button background color to black on mobile */
        color: #fff !important; /* Change the button text color to white on mobile */
        border-color: #fff !important; /* Change the button border color to white on mobile */
        opacity:1 !important;
    }
    
    /* Media query for responsiveness */

      .section-trustworthy {
        flex-direction: column; /* Stack the image and text vertically on smaller screens */
        align-items: center; /* Center the contents horizontally */
        margin-top: 3rem;
      }
    
      .background-image {
        width: 360px;
        height: 230px;
        clip-path: none;
        border-radius: 25px; /* Remove the clip-path on smaller screens */
        border-style: none;
      }
    
      .text-content {
        max-width: 87.5%; /* Take 90% width on smaller screens */
        text-align: center; /* Center the text horizontally */
        transform: none; /* Remove transform on smaller screens */
        margin-top: 1rem; /* Add margin on top to separate from the image */
        font-size: 1.2rem !important; /* Make the text smaller */
        position: static; /* Remove absolute positioning on smaller screens */
      }
    
      .text-content h2 {
        font-size: 2rem; /* Make the heading smaller */
      }
    
      .text-content p {
        font-size: 1.2rem; /* Make the paragraph smaller */
        color: #000; /* Set the paragraph color to black */
      }

    
    
  /**************************/
  /* Support SECTION Styling */
  /**************************/
  
  /* Additional styles for all screen sizes */
  /**************************/
  /* Support SECTION Styling */
  /**************************/
  
  /* Additional styles for all screen sizes */
  .section-support {
      background-color: #fff;
      display: grid;
      grid-template-columns: 55fr 45fr;
      align-items: center;
    }
    
    .support-container {
      padding: 9.6rem;
    }
    
    .support {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 0rem;
      column-gap: 8rem;
    }
    
    .support-img {
      width: 6.4rem;
      border-radius: 50%;
      margin-bottom: 1.2rem;
    }
    
    .support-text {
      font-size: 1.8rem;
      line-height: 1.8;
      margin-bottom: 1.6rem;
    }
    
    .support-name {
      font-size: 1.6rem;
      color: #6f6f6f;
    }
    
    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.6rem;
      padding: 1.6rem;
    }
    
    .gallery-item {
      overflow: hidden;
    }
    
    .gallery-item img {
      display: block;
      width: 100%;
      transition: all 0.4s;
    }
    
    .gallery-item img:hover {
      transform: scale(1.1);
    }
    
    /* Mobile styles */

      .section-support {
        grid-template-columns: 1fr; /* Change the grid layout to single column */
        align-items: center; /* Center the items vertically */
        justify-content: center; /* Center the items horizontally */
      }
    
      .support-container {
        padding: 2rem; /* Reduce the padding for better mobile display */
      }
    
      .support {
        grid-template-columns: 1fr; /* Change the grid layout to single column */
        row-gap: 1.6rem; /* Add some gap between elements */
        column-gap: 0; /* Remove column gap */
      }
    
      .support-img {
        width: 4rem; /* Reduce the image size for better mobile display */
        margin-bottom: 0.8rem; /* Reduce the margin between image and text */
      }
    
      .support-text {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the text horizontally */
        text-align: center; /* Center the text horizontally */
      }
    
      .gallery {
        padding: 1rem; /* Reduce the padding for better mobile display */
      }
    
      .gallery-item {
        overflow: hidden;
        border-radius: 10px; /* Add border-radius to images for a better look */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box-shadow */
      }
    
      .subheading {
        text-align: center;
      }
    
      .heading-secondary {
        text-align: center;
      }
    
      .heading-tertiary {
        font-size: 2rem;
      }
    
      .mobile-users {
        max-width: 61%;
        font-size: 1.7rem;
        margin: 0 auto; /* Center the text horizontally */
      }
    
    

  }
    /* Larger phone lasd scape */
  
    @media (min-width: 577px) and (max-width: 780px) {
        html {
          font-size: 60%;
          overflow-x: hidden !important;
        }
      
        /* Reset margin and padding for body */
        body {
          width: 100%;
          margin: 0;
          padding: 0;
        }
      
        .grid {
          row-gap: 4.8rem;
        }
      
        .grid--2-cols,
        .grid--3-cols,
        .grid--4-cols {
          grid-template-columns: 1fr;
        }
      
        /* Main navigation container */
        .main-nav {
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
          height: 100vh;
          margin: 0;
          padding: 0;
        }
      
        /* Make the images take the full height */
        .main-nav .nav-item-image {
          width: 100%;
          height: 50vh; /* Adjust the height as needed */
          object-fit: cover;
        }
      
        /* Center the logo and title on the image */
        .main-logo {
          width: 30%;
          position: absolute;
          top: 15px;
          left: 15px;
          z-index: 999;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
          backface-visibility: hidden;
        }
      
        /* Position the title above the menu */
        .nav-title {
          position: absolute;
          bottom: calc(0vh + 50px); /* Adjust the distance from the image bottom */
          left: 52%;
          transform: translateX(-50%);
          z-index: 2;
          width: 100%;
          color: #f5eee8;
          font-size: 2.2rem;
          font-weight: bold;
          transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
          box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
          opacity: 1;
        }
      
        /* Main navigation menu items */
        .main-nav-list {
          list-style: none;
          display: flex;
          justify-content: center; /* Center the menu items horizontally */
          gap: 1rem;
          flex-direction: row; /* Display the menu items next to each other */
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          transform: translate(0%, 40%); /* Center the menu horizontally */
          margin: 0;
          padding: 0;
          text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
        }
      
        /* Main navigation links */
        .main-nav-link {
          flex: 1; /* Equal width for all menu items */
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.2rem;
          font-weight: 500;
          text-decoration: none;
          color: #fff;
          transition: color 0.3s ease-in-out, transform 0.6s ease;
          border-radius: 10px;
          border: #fff solid 1.3px;
          padding: 1rem 2rem;
          text-align: center; /* Center the text within each link */
          width: 100%; /* Make sure the links take the full width */
          white-space: nowrap; /* Prevent line breaks in menu items */
          overflow: hidden; /* Hide any overflowing content */
          text-overflow: ellipsis; /* Add ellipsis (...) for long texts */
        }
      
        /* Styling for the link hover effect */
        .main-nav-link::before {
          content: "";
          position: absolute;
          margin-top: 3px;
          padding-top: 1.5px;
          bottom: -5px;
          left: 50%;
          width: 0;
          height: 3px;
          background-color: #fff;
          transition: width 0.4s ease;
          transform: translateX(-50%);
          background-color: #34869e;
        }
      
        /* Adjust the hover effect width to full width */
        .main-nav-link:hover::before {
          width: 100%;
        }
      
        .hws-nav-item .main-nav-list li,
        .hbs-nav-item .main-nav-list li {
          opacity: 1;
          transition: opacity 0.3s ease-in-out;
        }
      
        .hbs-nav-item:hover img,
        .hws-nav-item:hover img {
          filter: blur(0px) brightness(100%) sepia(0%) hue-rotate(0deg);
        }
        .hbs-nav-item:hover,
        .hws-nav-item:hover {
          width: 100%;
          transform: translateY(0) scale(1);
        }
        .main-nav-link:hover {
          transform: scale(1);
          color: #000 !important;
          border: #fff solid 1.3px;
          background-color: #fff;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
        }
      
        .scroll-down-arrow {
          opacity: 0;
        }
      
        /**************************/
        /* Hero Styling */
        /**************************/
        .section-hero {
          height: 18rem;
          padding: 2rem 1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative; /* Add relative positioning to .section-hero */
        }
      
        .heading-primary {
          font-size: 4.5rem;
          padding: 0.6rem 1.5rem;
          gap: 0.7rem;
        }
      
        .right-text,
        .left-text {
          padding-left: 20px;
          padding-right: 20px;
          font-size: 3.2rem;
          text-align: center;
          align-self: center;
        }
      
        .floating-text {
          font-size: 1.4rem;
          max-width: 90%;
          width: 90%;
          padding: 5px;
          text-align: center;
          animation: none;
          opacity: 1;
          position: absolute;
          bottom: 1rem; /* Position the floating text at the bottom of the container */
          left: 50%; /* Center the floating text horizontally */
          transform: translateX(-50%);
          white-space: normal; /* Allow the text to wrap to multiple lines if needed */
          font-family: "Arial", sans-serif;
          text-align: center;
        }
      
        .invisible {
          display: none;
        }
      
        /**************************/
        /* Certification-Section Styling */
        /**************************/
        .section-certificats {
          margin: 0.5rem 0;
          padding: 3rem 0;
        }
      
        .heading-secondary {
          font-size: 2.9em;
        }
      
        .logos {
          margin: 1rem 0;
          gap: 0.5rem;
        }
      
        .certif-item {
          align-items: center;
        }
        .heading-featured-in {
          font-family: "Roboto", "Arial", sans-serif;
          font-size: 1.6rem;
          text-transform: uppercase;
          letter-spacing: 0.95px;
          font-weight: 600;
          text-align: center;
          margin-bottom: 1rem;
          padding-left: 1.88%;
          color: #999;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
          transition: color 0.3s ease, text-shadow 0.3s ease;
        }
      
        /* Style the certification logos and titles */
        .certif-item img {
          width: 85%;
          height: auto;
          border-radius: 18%;
          filter: grayscale(100%);
          opacity: 0.6;
        }
      
        .certif-item:hover img {
          transform: scale(1.1);
          filter: grayscale(0%);
          opacity: 0.8;
        }
      
        /* Add a new background color to the section */
        .section-featured {
          padding: 2.5em 2rem;
          background-color: #fff;
        }
      
        .container {
          text-align: center;
        }
      
        /* Adjust the color of the certification titles */
        .certif-title {
          font-family: "Roboto", "Arial", sans-serif;
          font-size: 1.6rem;
          font-weight: bold;
          color: #777; /* Use the color #777 from the images */
          text-transform: uppercase; /* Convert the text to uppercase */
          letter-spacing: 1px; /* Add some letter spacing */
          transition-delay: 0.005s;
          margin: 0;
        }
      
        /* Media queries for responsiveness */
      
          .logos {
            flex-direction: column; /* Stack the certification logos vertically on smaller screens */
            align-items: center; /* Center the logos horizontally */
          }
      
          .heading-featured-in {
            font-size: 1.4rem; /* Decrease the font size for smaller screens */
            padding-left: 0; /* Remove the left padding for smaller screens */
          }
      
          .section-featured {
            padding: 1.5em 1rem; /* Decrease the padding for smaller screens */
          }
      
          .certif-item img {
            width: 100%; /* Make the certification logos take full width */
            max-width: 200px; /* Limit the maximum width of the logos */
            margin-bottom: 1rem; /* Add some spacing between the logos */
          }
      
          .costum-margin {
            margin-bottom: 10px; /* Decrease the bottom margin for smaller screens */
          }
        
      
        /**************************/
        /* qui-somme-nous Styling */
        /**************************/
        .section-qui-sommes-nous {
          margin-top: 2rem;
        }
        /* New section */
        .block-middle-text {
          text-transform: uppercase;
          padding: 0 10px;
          font-weight: 600;
          font-size: 13.6px;
          color: #777;
        }
      
        .block-middle-icon {
          filter: brightness(0.3) invert(1) sepia(1) saturate(50) hue-rotate(180deg);
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          transform: scale(1.4);
        }
      
        .block-middle-icon img {
          padding: 25px;
        }
      
        .block-middle {
          display: flex;
          align-items: center; /* Center the contents vertically */
          margin-bottom: 20px;
        }
      
        /* Media query for responsiveness */
      
        .homepage-title {
          margin-top: 2rem; /* Decrease the top margin on smaller screens */
          margin-bottom: 2rem; /* Decrease the bottom margin on smaller screens */
        }
      
        .block-middle {
          flex-direction: column-reverse; /* Stack the icon and text vertically on smaller screens */
          align-items: center; /* Center the contents horizontally */
          text-align: center; /* Center the text horizontally */
        }
      
        .block-middle-icon img {
          padding: 15px; /* Adjust the padding on smaller screens */
        }
      
        .block-middle-icon {
          transform: scale(1.2); /* Adjust the icon size on smaller screens */
        }
      
        /* Fix the order of flex items when text appears before images */
        .inverse {
          display: flex;
          flex-direction: column;
        }
      
        /* Trustworthy section */
        /* Trustworthy section */
        .section-trustworthy {
          margin-bottom: 0;
          background-color: #fff;
          position: relative;
          display: flex; /* Use flexbox to position elements side by side */
        }
      
        .background-image {
          width: 60%;
          height: 60vh;
          background-color: #b3b4b3;
          background-image: url("/src/templates/test/image/16.webp");
          background-size: cover;
          background-position: left;
          background-repeat: no-repeat;
          clip-path: circle(30% at 47% 50%);
          background-size: 100%;
          transform: scale(1);
          background-color: #fff;
          transition: clip-path 0.8s ease-in-out, transform 0.8s ease-in-out,
          width 0.8s ease-in-out, height 0.8s ease-in-out;
        }
      
        .text-content {
          position: absolute;
          max-width: 25%;
          top: 50%;
          right: 14%;
          transform: translateY(-50%), transform 0.8s ease-in-out;
          transition: color 1s ease;
          color: #34869e;
        }
      
        .text-content p {
          font-size: 1.6rem;
          color: #000;
          line-height: 1.5;
          text-align: justify;
          margin-right: 9px;
        }
      
        /* Additional styling for the text */
        .text-content h2 {
          font-size: 2.5rem;
          font-weight: 500;
          color: inherit;
          margin-bottom: 1.6rem;
          text-align: start;
          line-height: 1.2;
          word-wrap: break-word;
        }
      
        .white-color {
          color: #fff !important;
        }
      
        .text-desc {
          opacity: 1;
          transition: opacity 1.2s ease-in-out;
          font-size: 2rem !important;
        }
      
        /* Media query for responsiveness */
      
        .section-trustworthy {
          flex-direction: column; /* Stack the image and text vertically on smaller screens */
          align-items: center; /* Center the contents horizontally */
          margin-top: 3rem;
        }
      
        .background-image {
          width: 360px;
          height: 230px;
          clip-path: none;
          border-radius: 25px; /* Remove the clip-path on smaller screens */
          border-style: none;
        }
      
        .text-content {
          max-width: 90%; /* Take 90% width on smaller screens */
          text-align: center; /* Center the text horizontally */
          transform: none; /* Remove transform on smaller screens */
          margin-top: 1rem; /* Add margin on top to separate from the image */
          font-size: 1.2rem !important; /* Make the text smaller */
          position: static; /* Remove absolute positioning on smaller screens */
        }
      
        .text-content h2 {
          font-size: 2rem; /* Make the heading smaller */
        }
      
        .text-content p {
          font-size: 1.2rem; /* Make the paragraph smaller */
          color: #000; /* Set the paragraph color to black */
        }
      
        /**************************/
        /* Support SECTION Styling */
        /**************************/
      
        /* Additional styles for all screen sizes */
        /**************************/
        /* Support SECTION Styling */
        /**************************/
      
        /* Additional styles for all screen sizes */
        .section-support {
          background-color: #fff;
          display: grid;
          grid-template-columns: 55fr 45fr;
          align-items: center;
        }
      
        .support-container {
          padding: 9.6rem;
        }
      
        .support {
          display: grid;
          grid-template-columns: 1fr;
          row-gap: 0rem;
          column-gap: 8rem;
        }
      
        .support-img {
          width: 6.4rem;
          border-radius: 50%;
          margin-bottom: 1.2rem;
        }
      
        .support-text {
          font-size: 1.8rem;
          line-height: 1.8;
          margin-bottom: 1.6rem;
        }
      
        .support-name {
          font-size: 1.6rem;
          color: #6f6f6f;
        }
      
        .gallery {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1.6rem;
          padding: 1.6rem;
	  margin-left: 80px;
        }
        .gallery img{
          width: 100%;
	
        }
      
        .gallery-item {
          overflow: hidden;
        }
      
        .gallery-item img {
          display: block;
          width: 100%;
          transition: all 0.4s;
          
        }
      
        .gallery-item img:hover {
          transform: scale(1.1);
        }
      
        /* Mobile styles */
      
        .section-support {
          grid-template-columns: 1fr; /* Change the grid layout to single column */
          align-items: center; /* Center the items vertically */
          justify-content: center; /* Center the items horizontally */
        }
      
        .support-container {
          padding: 2rem; /* Reduce the padding for better mobile display */
        }
      
        .support {
          grid-template-columns: 1fr; /* Change the grid layout to single column */
          row-gap: 1.6rem; /* Add some gap between elements */
          column-gap: 0; /* Remove column gap */
        }
      
        .support-img {
          width: 4rem; /* Reduce the image size for better mobile display */
          margin-bottom: 0.8rem; /* Reduce the margin between image and text */
        }
      
        .support-text {
          display: flex;
          flex-direction: column;
          align-items: center; /* Center the text horizontally */
          text-align: center; /* Center the text horizontally */
        }
      
        .gallery {
          padding: 1rem; /* Reduce the padding for better mobile display */
        }
      
        .gallery-item {
          overflow: hidden;
          border-radius: 10px; /* Add border-radius to images for a better look */
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box-shadow */
        }
      
        .subheading {
          text-align: center;
        }
      
        .heading-secondary {
          text-align: center;
        }
      
        .heading-tertiary {
          font-size: 2rem;
        }
      
        .mobile-users {
          max-width: 61%;
          font-size: 1.7rem;
          margin: 0 auto; /* Center the text horizontally */
        }
      }
      
      @media (min-width: 781px) and (max-width: 1099px) {
          html {
            font-size: 70%;
            overflow-x: hidden !important;
          }
        
          /* Reset margin and padding for body */
          body {
            width: 100%;
            margin: 0;
            padding: 0;
          }
        
          .grid {
            row-gap: 4.8rem;
          }
        
          .grid--2-cols,
          .grid--3-cols,
          .grid--4-cols {
            grid-template-columns: 1fr;
          }
        
          /* Main navigation container */
          .main-nav {
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            height: 100vh;
            margin: 0;
            padding: 0;
          }
        
          /* Make the images take the full height */
          .main-nav .nav-item-image {
            width: 100%;
            height: 50vh; /* Adjust the height as needed */
            object-fit: cover;
          }
        
          /* Center the logo and title on the image */
          .main-logo {
            width: 30%;
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 999;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            backface-visibility: hidden;
          }
        
          /* Position the title above the menu */
          .nav-title {
            position: absolute;
            bottom: calc(0vh + 50px); /* Adjust the distance from the image bottom */
            left: 52%;
            transform: translateX(-50%);
            z-index: 2;
            width: 100%;
            color: #f5eee8;
            font-size: 2.2rem;
            font-weight: bold;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
            opacity: 1;
          }
        
          /* Main navigation menu items */
          .main-nav-list {
            list-style: none;
            display: flex;
            justify-content: center; /* Center the menu items horizontally */
            gap: 1rem;
            flex-direction: row; /* Display the menu items next to each other */
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            transform: translate(0%, 40%); /* Center the menu horizontally */
            margin: 0;
            padding: 0;
            text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.9);
          }
        
          /* Main navigation links */
          .main-nav-link {
            flex: 1; /* Equal width for all menu items */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: 500;
            text-decoration: none;
            color: #fff;
            transition: color 0.3s ease-in-out, transform 0.6s ease;
            border-radius: 10px;
            border: #fff solid 1.3px;
            padding: 1rem 2rem;
            text-align: center; /* Center the text within each link */
            width: 100%; /* Make sure the links take the full width */
            white-space: nowrap; /* Prevent line breaks in menu items */
            overflow: hidden; /* Hide any overflowing content */
            text-overflow: ellipsis; /* Add ellipsis (...) for long texts */
          }
        
          /* Styling for the link hover effect */
          .main-nav-link::before {
            content: "";
            position: absolute;
            margin-top: 3px;
            padding-top: 1.5px;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 3px;
            background-color: #fff;
            transition: width 0.4s ease;
            transform: translateX(-50%);
            background-color: #34869e;
          }
        
          /* Adjust the hover effect width to full width */
          .main-nav-link:hover::before {
            width: 100%;
          }
        
          .hws-nav-item .main-nav-list li,
          .hbs-nav-item .main-nav-list li {
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
          }
        
          .hbs-nav-item:hover img,
          .hws-nav-item:hover img {
            filter: blur(0px) brightness(100%) sepia(0%) hue-rotate(0deg);
          }
          .hbs-nav-item:hover,
          .hws-nav-item:hover {
            width: 100%;
            transform: translateY(0) scale(1);
          }
          .main-nav-link:hover {
            transform: scale(1);
            color: #000 !important;
            border: #fff solid 1.3px;
            background-color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
          }
        
          .scroll-down-arrow {
            opacity: 0;
          }
        
          /**************************/
          /* Hero Styling */
          /**************************/
          .section-hero {
            height: 18rem;
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative; /* Add relative positioning to .section-hero */
          }
        
          .heading-primary {
            font-size: 4.5rem;
            padding: 0.6rem 1.5rem;
            gap: 0.7rem;
          }
        
          .right-text,
          .left-text {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 3.2rem;
            text-align: center;
            align-self: center;
          }
        
          .floating-text {
            font-size: 1.4rem;
            max-width: 90%;
            width: 90%;
            padding: 5px;
            text-align: center;
            animation: none;
            opacity: 1;
            position: absolute;
            bottom: 1rem; /* Position the floating text at the bottom of the container */
            left: 50%; /* Center the floating text horizontally */
            transform: translateX(-50%);
            white-space: normal; /* Allow the text to wrap to multiple lines if needed */
            font-family: "Arial", sans-serif;
            text-align: center;
          }
        
          .invisible {
            display: none;
          }
        
          /**************************/
          /* Certification-Section Styling */
          /**************************/
          .section-certificats {
            margin: 0.5rem 0;
            padding: 3rem 0;
          }
        
          .heading-secondary {
            font-size: 2.9em;
          }
        
          .logos {
            margin: 1rem 0;
            gap: 0.5rem;
          }
        
          .certif-item {
            align-items: center;
          }
          .heading-featured-in {
            font-family: "Roboto", "Arial", sans-serif;
            font-size: 1.6rem;
            text-transform: uppercase;
            letter-spacing: 0.95px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 1rem;
            padding-left: 1.88%;
            color: #999;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
            transition: color 0.3s ease, text-shadow 0.3s ease;
          }
        
          /* Style the certification logos and titles */
          .certif-item img {
            width: 85%;
            height: auto;
            border-radius: 18%;
            filter: grayscale(100%);
            opacity: 0.6;
          }
        
          .certif-item:hover img {
            transform: scale(1.1);
            filter: grayscale(0%);
            opacity: 0.8;
          }
        
          /* Add a new background color to the section */
          .section-featured {
            padding: 2.5em 2rem;
            background-color: #fff;
          }
        
          .container {
            text-align: center;
          }
        
          /* Adjust the color of the certification titles */
          .certif-title {
            font-family: "Roboto", "Arial", sans-serif;
            font-size: 1.6rem;
            font-weight: bold;
            color: #777; /* Use the color #777 from the images */
            text-transform: uppercase; /* Convert the text to uppercase */
            letter-spacing: 1px; /* Add some letter spacing */
            transition-delay: 0.005s;
            margin: 0;
          }
        
          /* Media queries for responsiveness */
        
            .logos {
              flex-direction: column; /* Stack the certification logos vertically on smaller screens */
              align-items: center; /* Center the logos horizontally */
            }
        
            .heading-featured-in {
              font-size: 1.4rem; /* Decrease the font size for smaller screens */
              padding-left: 0; /* Remove the left padding for smaller screens */
            }
        
            .section-featured {
              padding: 1.5em 1rem; /* Decrease the padding for smaller screens */
            }
        
            .certif-item img {
              width: 100%; /* Make the certification logos take full width */
              max-width: 200px; /* Limit the maximum width of the logos */
              margin-bottom: 1rem; /* Add some spacing between the logos */
            }
        
            .costum-margin {
              margin-bottom: 10px; /* Decrease the bottom margin for smaller screens */
            }
          
        
          /**************************/
          /* qui-somme-nous Styling */
          /**************************/
          .section-qui-sommes-nous {
            margin-top: 2rem;
          }
          /* New section */
          .block-middle-text {
            text-transform: uppercase;
            padding: 0 10px;
            font-weight: 600;
            font-size: 15px;
            color: #777;
          }
        	  .btn {
        display: block; /* Make the button a block element to take full width on mobile */
        max-width: 300px !important;; /* Set a maximum width for the button */
        margin: 1rem auto !important; /* Center the button horizontally */
        background-color: #000 !important; /* Change the button background color to black on mobile */
        color: #fff !important; /* Change the button text color to white on mobile */
        border-color: #fff !important; /* Change the button border color to white on mobile */
        opacity:1 !important;
        width :50% !important;
    }
          .block-middle-icon {
            filter: brightness(0.3) invert(1) sepia(1) saturate(50) hue-rotate(180deg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            transform: scale(1.4);
          }
        
          .block-middle-icon img {
            padding: 25px;
          }
        
          .block-middle {
            display: flex;
            align-items: center; /* Center the contents vertically */
            margin-bottom: 20px;
          }
        
          /* Media query for responsiveness */
        
          .homepage-title {
            margin-top: 2rem; /* Decrease the top margin on smaller screens */
            margin-bottom: 2rem; /* Decrease the bottom margin on smaller screens */
          }
        
          .block-middle {
            flex-direction: column-reverse; /* Stack the icon and text vertically on smaller screens */
            align-items: center; /* Center the contents horizontally */
            text-align: center; /* Center the text horizontally */
          }
        
          .block-middle-icon img {
            padding: 15px; /* Adjust the padding on smaller screens */
          }
        
          .block-middle-icon {
            transform: scale(1.2); /* Adjust the icon size on smaller screens */
          }
        
          /* Fix the order of flex items when text appears before images */
          .inverse {
            display: flex;
            flex-direction: column;
          }
        
          /* Trustworthy section */
          /* Trustworthy section */
          .section-trustworthy {
            margin-bottom: 0;
            background-color: #fff;
            position: relative;
            display: flex; /* Use flexbox to position elements side by side */
          }
        
          .background-image {
            width: 70%;
            height: 70vh;
            background-color: #b3b4b3;
            background-image: url("/src/templates/test/image/16.webp");
            background-size: cover;
            background-position: left;
            background-repeat: no-repeat;
            clip-path: circle(30% at 47% 50%);
            background-size: 100%;
            transform: scale(1);
            background-color: #fff;
            transition: clip-path 0.8s ease-in-out, transform 0.8s ease-in-out,
            width 0.8s ease-in-out, height 0.8s ease-in-out;
            overflow: hidden;
          }
        
          .text-content {
            position: absolute;
            max-width: 25%;
            top: 50%;
            right: 14%;
            transform: translateY(-50%), transform 0.8s ease-in-out;
            transition: color 1s ease;
            color: #34869e;
          }
        
          .text-content p {
            font-size: 1.6rem;
            color: #000;
            line-height: 1.5;
            text-align: justify;
            margin-right: 9px;
          }
        
          /* Additional styling for the text */
          .text-content h2 {
            font-size: 2.5rem;
            font-weight: 500;
            color: inherit;
            margin-bottom: 1.6rem;
            text-align: start;
            line-height: 1.2;
            word-wrap: break-word;
          }
        
          .white-color {
            color: #fff !important;
          }
        
          .text-desc {
            opacity: 1;
            transition: opacity 1.2s ease-in-out;
            font-size: 2rem !important;
          }
        
          /* Media query for responsiveness */
        
          .section-trustworthy {
            flex-direction: column; /* Stack the image and text vertically on smaller screens */
            align-items: center; /* Center the contents horizontally */
            margin-top: 3rem;
          }
        
          .background-image {
            width: 360px;
            height: 230px;
            clip-path: none;
            border-radius: 25px; /* Remove the clip-path on smaller screens */
            border-style: none;
          }
        
          .text-content {
            max-width: 90%; /* Take 90% width on smaller screens */
            text-align: center; /* Center the text horizontally */
            transform: none; /* Remove transform on smaller screens */
            margin-top: 1rem; /* Add margin on top to separate from the image */
            font-size: 1.2rem !important; /* Make the text smaller */
            position: static; /* Remove absolute positioning on smaller screens */
          }
        
          .text-content h2 {
            font-size: 2rem; /* Make the heading smaller */
          }
        
          .text-content p {
            font-size: 1.2rem; /* Make the paragraph smaller */
            color: #000; /* Set the paragraph color to black */
          }
        
          /**************************/
          /* Support SECTION Styling */
          /**************************/
        
          /* Additional styles for all screen sizes */
          /**************************/
          /* Support SECTION Styling */
          /**************************/
        
          /* Additional styles for all screen sizes */
          .section-support {
            background-color: #fff;
            display: grid;
            grid-template-columns: 55fr 45fr;
            align-items: center;
          }
        
          .support-container {
            padding: 9.6rem;
          }
        
          .support {
            display: grid;
            grid-template-columns: 1fr;
            row-gap: 0rem;
            column-gap: 8rem;
          }
        
          .support-img {
            width: 6.4rem;
            border-radius: 50%;
            margin-bottom: 1.2rem;
          }
        
          .support-text {
            font-size: 1.8rem;
            line-height: 1.8;
            margin-bottom: 1.6rem;
          }
        
          .support-name {
            font-size: 1.6rem;
            color: #6f6f6f;
          }
        
          .gallery {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.6rem;
            padding: 1.6rem;
	    align-self:center;
          }
          .gallery img{
            width: 100%;
          }
        
          .gallery-item {
            overflow: hidden;
          }
        
          .gallery-item img {
            display: block;
            width: 100%;
            transition: all 0.4s;
            
          }
        
          .gallery-item img:hover {
            transform: scale(1.1);
          }
        
          /* Mobile styles */
        
          .section-support {
            grid-template-columns: 1fr; /* Change the grid layout to single column */
            align-items: center; /* Center the items vertically */
            justify-content: center; /* Center the items horizontally */
          }
        
          .support-container {
            padding: 2rem; /* Reduce the padding for better mobile display */
          }
        
          .support {
            grid-template-columns: 1fr; /* Change the grid layout to single column */
            row-gap: 1.6rem; /* Add some gap between elements */
            column-gap: 0; /* Remove column gap */
          }
        
          .support-img {
            width: 4rem; /* Reduce the image size for better mobile display */
            margin-bottom: 0.8rem; /* Reduce the margin between image and text */
          }
        
          .support-text {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center the text horizontally */
            text-align: center; /* Center the text horizontally */
          }
        
          .gallery {
            padding: 1rem; /* Reduce the padding for better mobile display */
          }
        
          .gallery-item {
            overflow: hidden;
            border-radius: 10px; /* Add border-radius to images for a better look */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle box-shadow */
          }
        
          .subheading {
            text-align: center;
          }
        
          .heading-secondary {
            text-align: center;
          }
        
          .heading-tertiary {
            font-size: 2rem;
          }
        
          .mobile-users {
            max-width: 61%;
            font-size: 1.7rem;
            margin: 0 auto; /* Center the text horizontally */
          }
        }
      
      
       @media (min-width: 1100px) and (max-width: 1400px) {
          html {
            font-size: 60%;
            overflow-x: hidden !important;
          }
        
          /* Reset margin and padding for body */
          body {
            width: 100%;
            margin: 0;
            padding: 0;
          }
        
          .grid {
            row-gap: 4.8rem;
          }
        
          .grid--2-cols,
          .grid--3-cols,
          .grid--4-cols {
            grid-template-columns: 1fr;
          }
        
          
        
          /**************************/
          /* Hero Styling */
          /**************************/
          .section-hero {
            height: 20rem;
            padding: 2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative; /* Add relative positioning to .section-hero */
          }
        
          .heading-primary {
            font-size: 4.5rem;
            padding: 0.6rem 1.5rem;
            gap: 0.7rem;
          }
        
          .right-text,
          .left-text {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 4rem;
            text-align: center;
            align-self: center;
          }
        
          .floating-text {
            font-size: 2rem;
            max-width: 90%;
            width: 90%;
            padding: 5px;
            text-align: center;
            animation: none;
            opacity: 1;
            position: absolute;
            bottom: 1rem; /* Position the floating text at the bottom of the container */
            left: 50%; /* Center the floating text horizontally */
            transform: translateX(-50%);
            white-space: normal; /* Allow the text to wrap to multiple lines if needed */
            font-family: "Arial", sans-serif;
            text-align: center;
          }
        
          .invisible {
            display: none;
          }
        
          /**************************/
          /* Certification-Section Styling */
          /**************************/
          .section-certificats {
            margin: 0.5rem 0;
            padding: 3rem 0;
          }
        
          .heading-secondary {
            font-size: 2.9em;
          }
        
          .logos {
            margin: 1rem 0;
            gap: 0.5rem;
          }
        
          .certif-item {
            align-items: center;
          }
          .heading-featured-in {
            font-family: "Roboto", "Arial", sans-serif;
            font-size: 1.6rem;
            text-transform: uppercase;
            letter-spacing: 0.95px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 1rem;
            padding-left: 1.88%;
            color: #999;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
            transition: color 0.3s ease, text-shadow 0.3s ease;
          }
        
          /* Style the certification logos and titles */
          .certif-item img {
            width: 85%;
            height: auto;
            border-radius: 18%;
            filter: grayscale(100%);
            opacity: 0.6;
          }
        
          .certif-item:hover img {
            transform: scale(1.1);
            filter: grayscale(0%);
            opacity: 0.8;
          }
        
          /* Add a new background color to the section */
          .section-featured {
            padding: 2.5em 2rem;
            background-color: #fff;
          }
        
          .container {
            text-align: center;
          }
        
          /* Adjust the color of the certification titles */
          .certif-title {
            font-family: "Roboto", "Arial", sans-serif;
            font-size: 1.6rem;
            font-weight: bold;
            color: #777; /* Use the color #777 from the images */
            text-transform: uppercase; /* Convert the text to uppercase */
            letter-spacing: 1px; /* Add some letter spacing */
            transition-delay: 0.005s;
            margin: 0;
          }
        
          /* Media queries for responsiveness */
        
            .logos {
              flex-direction: row; /* Stack the certification logos vertically on smaller screens */
              align-items: center; /* Center the logos horizontally */
            }
        
            .heading-featured-in {
              font-size: 1.4rem; /* Decrease the font size for smaller screens */
              padding-left: 0; /* Remove the left padding for smaller screens */
            }
        
            .section-featured {
              padding: 1.5em 1rem; /* Decrease the padding for smaller screens */
            }
        
            .certif-item img {
              width: 100%; /* Make the certification logos take full width */
              max-width: 350px; /* Limit the maximum width of the logos */
              margin-bottom: 1rem; /* Add some spacing between the logos */
            }
        
            .costum-margin {
              margin-bottom: 10px; /* Decrease the bottom margin for smaller screens */
            }
          
        
          /**************************/
          /* qui-somme-nous Styling */
          /**************************/
          .text-content {
              position: absolute;
              max-width: 25%;
      
              top: 30%;
              right: 14%;
              transform: translateY(-10%);
              transition: color 1s ease, transform 0.8s ease-in-out;
              color:#34869e;  
            }
          
            .text-content p {
              font-size: 16px;
              color: inherit;
              line-height: 1.5;
              text-align: justify;
              margin-right:9px;	
            }
            /* Additional styling for the text */
            .text-content h2 {
              font-size: 3rem;
              font-weight: 500;
              color: inherit;
              margin-bottom: 1.6rem;
              text-align: start;
              line-height: 1.2;
              word-wrap: break-word;
            }
            
            .white-color{
              color: #fff !important
            }
            
            .text-desc{
              opacity: 0;
              transition:opacity 1.2s ease-in-out;
	      
            }
        
          /**************************/
          /* Support SECTION Styling */
          /**************************/
        
          /* Additional styles for all screen sizes */
          /**************************/
          /* Support SECTION Styling */
          /**************************/
          
    
         .gallery {
              align-self: last baseline;
              margin: 0;
              padding: 0;
         }
         .subheading{
          margin-top: 2rem;
         }
         .section-qui-sommes-nous{
          margin-top: 0rem;
         }
       }