html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}
html, body {
  overflow-x: hidden;
}
:root {
  --blue-green: #00acc1;
  --green-blue: #aad03a;
  --ccchange-col: #333;
  --cchange-col: white;
  --bg2-color: #f7f7f7;
  --bg-color: #ebf8db;   /* Light background */
  --text-color: #333;     /* Dark text */
  --primary-color: #aad03a;  /* Lime green */
  --secondary-color: #0090af;  /* Teal blue */
  --border-color: rgba(0, 0, 0, 0.2);  /* Light border */
  transition: all 0.5s ease; /* Smooth transition for theme change */
}
.dark-theme {
  --blue-green: #aad03a ;
  --green-blue: #00acc1;
  --ccchange-col: #d5f1a1;
  --cchange-col:black;
  --main-title: #ebf8db;
  --bg2-color: #00181c;
  --bg-color: #00262f;   /* Dark muted green */
  --text-color: #f0f0f0;  /* Light text */
  --primary-color: #aad03a;  /* Softer green */
  --secondary-color: #00acc1;  /* Brighter cyan */
  --border-color: rgba(255, 255, 255, 0.1);  /* Soft white border */
}
html{
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body {
    transition: background-color 0.5s ease, color 0.5s ease;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: Arial, sans-serif;
}
a, button, img {
  -webkit-tap-highlight-color: transparent;
}
/* General Reset */
body, a, button {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
  }
  
  /* Navbar Container */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 2px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  background-color: var(--bg-color);
  /*background: linear-gradient(to left, white, var(--primary-color), white); /* Gradient */
  /*position: sticky;  Prioritize navbar visibility */
  top: 0;
  z-index: 1000;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
  padding-left: 32px; /* Added left padding instead of gap */
} /* Logo Styling */
.logo img {
    width: 160px; /* Big Logo */
    height: auto;  
    margin-bottom: 5px;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.logo img:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 1000px) {
  .dropbtn{
    font-size: 12px;
  }
}
  /* Burger Menu */
.burger-menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.burger-menu .line {
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.burger-menu.active .line:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.burger-menu.active .line:nth-child(2) {
  opacity: 0;
}

.burger-menu.active .line:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* Responsive Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
  justify-content: end;
  transition: max-height 0.3s ease;
  margin: 0 auto; /* Centers the nav links */
}

.nav-links.mobile-hidden {
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
}

.nav-links.mobile-visible {
  max-height: 500px; /* Adjust as needed */
}
  .dropdown {
    position: relative;
  }
  
  .dropbtn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 18px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .dropbtn:hover {
    color: var(--secondary-color); 
  }
  .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 160px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
    z-index: 1001;
  }
  
  .dropdown-content a {
    color: var(--text-color);
    padding: 10px 15px;
    display: block;
    text-align: left;
    transition: all 0.3s ease;
  }
  
  .dropdown-content a:hover {
    background-color: var(--secondary-color);
    color: white;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dark-theme{
    .dropdown-content{
      background: #00181c;
    }
    .dropdown-content a:hover{
      background-color: #485e1a;
    }
  }
  .contact-button {
    width: 140px;
    height: auto;
    float: left;
    transition: .5s linear;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    margin: 0 5px;
    background: var(--primary-color);
    text-transform: uppercase;
    font-weight: 900;
  }
  
  .contact-button:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    box-sizing: border-box;
    transform: translateX(100%);
  }
  
  .contact-button:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    transform: translateX(-100%);
  }
  
  .contact-button:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  
  .contact-button:hover:before {
    border-color: var(--secondary-color);
    height: 100%;
    transform: translateX(0);
    transition: .3s transform linear, .3s height linear .3s;
  }
  
  .contact-button:hover:after {
    border-color: var(--secondary-color);
    height: 100%;
    transform: translateX(0);
    transition: .3s transform linear, .3s height linear .5s;
  }
  .Buttonforcontact{
    color: #ebf8d9;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* LIGHT SWITCH 200 LINES LMFAO*/
.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  box-sizing: border-box;
}
.toggle label:before {
  content: "";
  width: 16px;
  height: 40px;
  background: linear-gradient(#7a9e2d, #77c2bb) no-repeat center;
  background-size: 2px 64px;
  display: inline-block;
  transition: 0.2s ease-in;
}
.toggle label:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 6px solid #7a9e2d;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:checked + label:before {
  background-image: linear-gradient(#7a9e2d, #77c2bb);
}
.toggle input[type="checkbox"]:checked + label:after {
  top: 32px;
  border-color: #009688;
}

/* LIGHT SWITCH 200 LINES LMFAO*/
/* Mobile version*/
.dark-theme2{
  display: block;
  padding: 15px 20px;
  padding-left: 20px;
  padding-top: 15px;
  padding-right: 0;
  padding-bottom: 15px;
}
/* The switch container */
.switch {
  --transition: 300ms;
  --transition500: 500ms;
  --color-dark: #0c0f14;
  --color-darkGray: #21262e;
  --color-gray: #52555a;
  --color-offwhite: #cecece;
  --shadow-color: var(--color-dark);
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: fit-content;
  background-color: var(--color-dark);
  border-radius: 30px;
  padding: 4px;
  transition: var(--transition500);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
}

/* Svg styles */
.switch .svg {
  transition: var(--transition);
  position: absolute;
  left: 9px;
}
.switch .moon {
  width: 10px;
  fill: var(--color-gray);
  opacity: 1;
}

/*checkbox styles */
.switch .circle {
  appearance: none;
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 0px;
  background-color: var(--color-darkGray);
  border: 1px solid var(--color-darkGray);
  transition: var(--transition500);
  box-shadow: 1px 1px 20px 3px var(--color-darkGray);
}

.switch:has(.circle:checked) {
  background: var(--color-offwhite);
}

.switch .circle:hover {
  margin-left: 3px;
}
.switch .circle:checked:hover {
  margin-left: -3px;
}

.switch .circle:checked {
  left: calc(100% - 18px);
  background: #00acc1;
  border-color: white;
  box-shadow: 1px 1px 30px 12px white;
}

.switch:has(.circle:checked) > .sun {
  opacity: 1;
}

.switch:has(.circle:checked) > .moon {
  opacity: 0;
}

.mobiletheme{
  display: flex;
  overflow-y: hidden; /* Enables scrolling if content is too long */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-right: 70px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 3;
  margin-top: auto; /* Pushed to the bottom */
  margin-bottom: 0; /* Ensure it's not being pushed by any extra space */
}
.eerr3{
  display: flex;
  flex-direction: column;
  flex-grow: 0; /* Prevents it from taking extra height */
  max-height: calc(100vh - 60px); /* Account for the header or any padding above */
  overflow: hidden; /* Allows scrolling if content overflows */
}
.sidebar ul{
  margin-top: 0px;
}
/* Mobile version*/
.mobilenav{
  display: none;
}
.rdng{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.navright{
  display: flex;
  margin-left: auto;
}
.overlay2{

  display: none;
}
.sidebar{
  display: none;
}
@media (max-width: 768px) {
  .navbar {
      display: none;
  }

  .mobilenav {
    display: block;
  }

  .monavc {
    background-color: var(--bg-color);
    color: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px ;
    border-bottom: 2px solid;
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
  }
  .mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--bg-color);
  }

  .mobile-burger-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .mobile-burger-menu .mobile-line {
    width: 20px;
    height: 3px;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
  }
  .mobile-logo img {
    width: 60px;
    height: auto;
    padding-left: 50px;
  }
  .mobile-logo a {
    width: 0px;
    height: 0px;
    color: black;
  }
  .mobile-contact-button {
    background-color: transparent;
    border: none;
    padding: 5px 15px;
    color: var(--primary-color);
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
  }

  .mobile-contact-button .mobile-contact-link {
    text-decoration: none;
    color: inherit;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background-color: rgba(213, 241, 161, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden; /* Disable internal scrolling */
    max-height: 100vh;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out ,height 0.3s ease;
    justify-content: flex-start;
    gap:0px;
  }
  .sidebar.active {
      opacity: 1;
      transform: translateX(0);
  }
  .close-btn {
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    align-self: center;
    margin-left: 10px;
  }

  .sidebar ul {
    list-style: none;
    padding: 0;
    width: 100%;
  }

  .sidebar li {
    width: 100%;
  }

  .sidebar a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: black;
    border-top: 1px solid
  }
  .sidebar ul li:last-child {
    border-bottom: 1px solid
  } 
  .sidebar a:hover {
    background-color: #d5f1a1;
  }

  .overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    transition: opacity 0.3s ease-in-out;
    z-index: 999;
  }

  .overlay2.show-overlay {
    display: block;
  }
  .sidebar {
    overflow: visible; /* Allow submenu to be visible outside */
  }

  .customs-dropdown {
    position: relative;
  }

  .customs-menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%; /* Makes it appear under "Customs" */
    background-color: rgba(213, 241, 161, 0.8);
    backdrop-filter: blur(10px);
    list-style: none;
    padding: 0;
    min-width: 250px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-10px); /* Starts slightly above */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    visibility: hidden;
  }

  .customs-menu li {
    border-top: 1px solid;
  }

  .customs-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
  }
  .customs-dropdown.open .customs-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  .customs-dropdown a {
    display: flex;
    align-items: center;
  }
  .arrow1{
    text-align: center;
    padding-left: 10px;

  }
  .arrow1 img {
    width: 12px;
    height: 12px;
  }
  /* When dropdown is open */
  .customs-dropdown.open .customs-menu {
      opacity: 1;
      transform: rotate(90deg) scale(0.6); /* Rotate and keep the smaller size */
      visibility: visible;
  }
  .customs-dropdown.open .arrow1 img {
    transform: rotate(90deg); /* Rotate the arrow 90 degrees */
  }
}
.connectbtn{
  color: #7a9e2d;
  font-weight: bold;
  font-size: 17px;
}
.connectbtn:hover{
  color: #485e1a;
}
.dark-theme .connectbtn:hover{
  color: #eaf8d7;
}
.dark-theme .dropbtn:hover{
  color: #eaf8d7;
}
@media (max-width:1200px){
  .nav-links{
    gap: 20px;
  }
  .dropbtn{
    font-size: 2vm;
    padding: 2px;
  }
  .contact-button{
    width: 10vw;
  }
  .logo img{
    width: 150px;
  }
}
@media (max-width:1050px){
  .navbar{
    padding: 15px 5px;
  }
  .nav-links{
    font-size: 2vw;
    gap: 15px;
  }
  .contact-button{
    width: 100px;
  }
}
/* hero */
.hero-section {
  background: linear-gradient(180deg, var(--bg-color),var(--cchange-col) );
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  color: var(--text-color);
}
/* First Hero with the video***/
.video-section {
  position: relative;
  width: 100%;
  height: 120vh; /* Increase height to make the video visible for a longer time */
  overflow: hidden;
}

.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;  /* Set video to fill the full width of the screen */
  height: 120vh; /* Increase the height to make the video visible for a longer time */
  object-fit: cover; /* Ensures the video covers the screen without distortion */
  z-index: -1; /* Keeps the video behind any other content */
}
/* Add a black overlay to make the text clearer */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 0; /* Place the overlay behind the text */
}
.content-overlay {
  position: absolute;
  top: 40%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* True centering */
  text-align: center;
  color: white; /* White text */
  z-index: 1; /* Ensure text is on top of the video */
}
/* ARROW HERE */
.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top: 100%; /* Move the arrow below the text */
  transform: translateX(-10%);
  margin-left:-5em;
  background: linear-gradient(135deg, rgba(167, 207, 60, 0.7), rgba(0, 144, 175, 0.7)); /* Gradient with transparency */  
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
  box-shadow:0px 0px 5px 0px var(--text-color);
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: black transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}
.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}


.hint {
  position:absolute;
  top:0.6em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}


.arrow-wrap:hover .hint {
  opacity:1;
}


  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }
/* ARROW HERE */
.logo {
  max-width: 300px; /* Adjust logo size */
  margin-bottom: -10px;
}

.Nom-1 {
  font-size: 70px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); /* Gradient from left to right */
  -webkit-background-clip: text; /* Makes the gradient apply to the text */
  color: transparent; /* Makes the text color transparent so the gradient shows */
}

/*custom-hero*/
/* Overall Hero Section */
.dryal-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  background-color: none;
  position: relative;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 10px -10px rgba(170, 208, 58, 0.5), 
              0 10px 20px -10px rgba(0, 144, 175, 0.5);
  border: none; /* Remove the original border */
}
.dryal-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 0 10px rgba(170, 208, 58, 0.7), 0 0 15px rgba(0, 144, 175, 0.7);
}
/* Hero Text Content */
.dryal-content {
  max-width: 50%;
  animation: fadeInLeft 1s ease-in-out;
}

.dryal-content h1 {
  font-size: 3rem;
  font-weight: bold;
  color: var(--ccchange-col);
  margin-bottom: 20px;
}

.dryal-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 30px;
}

.dryal-button {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.dryal-photo-container {
  position: relative;
  display: flex;
  justify-content: flex-start; /* Align the image to the left */
  margin-right: 150px; /* Add space on the right for the stats */
}

.dryal-photo {
  max-width: 100%; /* Adjust the image size as needed */
  object-fit: cover;
  margin-left: -20%;
  
}
.dryal-button:hover {
  background-color: var(--secondary-color);
}

/* Hero Image */
.dryal-image-container {
  position: relative;
  max-width: 50%;
  animation: fadeInRight 1s ease-in-out;
  overflow: visible;
}

.dryal-photo {
  width: 100%;
  border-radius: 12px;
  /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);*/
  position: relative;
}
.dryal-photo::after {
  content: '';
  position: absolute;
  bottom: -10px; /* Adjust distance below the logo */
  left: 50%;
  transform: translateX(-50%); /* Center the underline */
  width: 60%; /* Adjust width of the underline */
  height: 4px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 0 10px rgba(170, 208, 58, 0.7), 0 0 15px rgba(0, 144, 175, 0.7);
  border-radius: 5px; /* Optional: adds rounded edges */
}
/* Statistics Section */
.dryal-stats {
  position: absolute;
  top:70%;
  right: -25px; /* Adjust the distance from the photo */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: none;
  padding: 10px 15px;
  border-radius: 8px;
}
.pmobile{
  display: none;
}
.dryal-stat {
  text-align: left;
  color: var(--blue-green);
}

.dryal-stat h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.dryal-stat p {
  margin: 0;
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.Mob-Im{
  display: none;
}
.dryal-logo-mob{
  display: none;
}
@media (max-width: 768px) {
  .video-background{
    display: none;
  }
  .Mob-Im{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;  /* Set video to fill the full width of the screen */
    height: 120vh; /* Increase the height to make the video visible for a longer time */
    object-fit: cover; /* Ensures the video covers the screen without distortion */
    z-index: -1; /* Keeps the video behind any other content */
    }
  .logo{
    width: 200px;
  }
  .video-section{
    width: 100%;
    height: 90vh;
  }
  .Nom-1{
    font-size: 10vw
  }
  .arrow-wrap{
    display: none;
  }
  .dryal-photo{
    display: none;
  }
  .dryal-stats{
    display: none;
  }
  .dryal-hero {
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    padding-top: 10px;
    height: 500px;
  }

  /* Content section */
  .dryal-content {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .dryal-content h1 {
    font-size: 9vw;
    margin-bottom: 15px;
  }

  .dryal-content p {
    font-size: vw;
    color: var(--text-color);
  }
}
@media (max-width: 620px) {
  .dryal-content p {
    font-size: 3vw;
    color: var(--text-color);
  }
}
@media (max-width: 420px) {
  .dryal-content p {
    font-size: 3.7vw;
    color: var(--text-color);
  }
}
@media (max-width: 320px) {
  .dryal-content p {
    font-size: 4vw;
    color: var(--text-color);
  }
  .dryal-hero{
    height: 460px;
  }
}
/* block for only mobile */
.dryalmobblock{
  display: none;
}
@media (max-width: 768px) {
  .dryalmobblock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items horizontally */
    gap: 20px;
    margin: 20px;
  }
  
  .dryal-stat2 {
    background-color: rgba(210, 255, 154, 0.5);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    width: 300px;
  }
  /* Hover effect to raise the box */
  .dryal-stat2:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  /* Make the number bigger */
  .dryal-stat2 h3 {
    font-size: 4rem;
    color: rgb(170,208,58);
    margin-bottom: 10px;
    font-weight: bold;
    transition: color 0.3s ease;
  }
  
  /* Adjust the text under the number */
  .dryal-stat2 p {
    font-size: 1.3rem;
    color: #000000;
    margin: 10px 0;
    font-weight: bold;
    font-family: Arial,sans-serif
  }
  
  /* Mobile description under each stat box */
  .dryal-stat2 .pmobile {
    display: block;
    font-size: 0.875rem;
    color: #555;
    padding-top: 10px;
    line-height: 1.5;
  }
  
  /* Optional: Add a small icon or image above the text for more flair */
  .dryal-stat2 i {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 10px;
  }
}
/* Block 1: Centered Logo */
/* General Styling for the apah container */
.apah {
  text-align: center;
  padding: 40px;
  background-color: #f7f7f7;
}
.dark-theme .apah{
  background-color: transparent;
}

/* Logo Styling */
.logo-container {
  margin-bottom: 30px;
  animation: fadeIn 1s ease-in-out forwards;
}

.main-logo {
  width: 300px; /* Adjust logo size as necessary */
  height: auto;
}

/* Styling for the Heading */
.intro-text h2 {
  font-size: 36px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 20px;
  font-family: 'Arial', sans-serif;
  position: relative;
  display: inline-block;
}

.intro-text h2::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 157px;
  height: 4px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 5px;
}

/* Styling for the Content Columns */
.extra-content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.column {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 30%;
  min-width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dark-theme .column{
  box-shadow: 0 0 5px #00262f, 0 0 10px #00262f;
  animation: neonGlow 1.5s infinite alternateease-in-out;
  background: linear-gradient(45deg, #00181c, #00262f, #00181c);
}

.column:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Paragraph Text Styling */
.column p {
  font-size: 18px;
  color: var(--text-color);
  line-height: 1.6;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  margin-bottom: 20px;
}

.column p strong {
  font-size: 20px;
  color: var(--blue-green);
  display: block;
  margin-bottom: 10px;
}

/* Cool Separators with Animations */
.column::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInSeparator 1s ease-in-out forwards;
}

/* Animation for Heading */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.values-grid{
  display: none;
}
@media (max-width: 425px){
  .column{
    min-width: 60vw;
    margin: 0 auto; /* Center the column */
  }
  .column p{
    font-size: 14px;
  }
}
@media (max-width: 768px) { 
  .main-logo {
    width: 60vw;
  }
  .apah {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the blocks horizontally */
  }
  .apah .column {
    width: 80%; /* Adjust the width as needed */
    margin: 10px 0; /* Add some vertical spacing between blocks */
  }
  .intro-text h2 {
    font-size: 6vw;
    text-align: center; /* Center the text */
  }
  .intro-text h2::after {
    background: none;
  }
  .column {
    min-width: 60vw;
  }
  .block-callout-mob {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything */
    text-align: center;
    max-width: 90%;
    margin: auto;
  }
  
  .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(3, auto); /* 3 rows */
    gap: 15px;
    margin-top: 20px;
  }
  
  .value-block {
    background: #ebf8d9;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 4vw;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    min-height: 90px;
  }
  .dark-theme{
    .value-block{
      background: #00262f;
    }
  }
  .value-block span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  
 }
}

/* Animation for the Separator Line */
@keyframes fadeInSeparator {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
/* Block 2: Split Sections */
.block-split {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 60px;
}

.block-split.reverse {
  flex-direction: row-reverse;
}

.split-text {
  flex: 1;
  padding: 20px;
}

.split-text h3 {
  font-size: 24px;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.split-text p {
  line-height: 1.6;
  font-size: 18px;
}

.split-image {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 70px;
  /*border-radius: 10%;
  border: 5px solid var(--primary-color);  Cool green border 
  box-shadow: 0 4px 10px rgba(170, 208, 58, 0.5); *//* Subtle green shadow */
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.split-image img {
  width: 140%;
  height: auto;
  border-radius: 10px;
}
.block-callout-mob{
  display: none;
}


/* Block 3: Full-Width Callout */
/* Main background */
body {
  background-color: var(--bg-color);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Block Callout Container */
.block-callout {
  text-align: start;
  padding: 50px 20px;
  border-bottom: 4px solid;
  border-top: 4px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  margin-bottom: 250px;
}

/* Logo container with animation */
.logo-container {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.center-logo {
  width: 600px;
  height: auto;
  animation: zoomIn 2s ease-in-out;
}
@media (max-width: 784px) {
  .center-logo{
    width: 60vw;
  }
}

/* Zoom-in animation for logo */
@keyframes zoomIn {
  0% {
      transform: scale(0.5);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

/* Text container */
.text-container22 {
  color: var(--secondary-color);
  background-color: none;
  padding: 30px;
  border-radius: 200px;
  max-width: max;
  margin: 0 auto;
}

/* Heading style */
.text-container22 h2 {
  color: #000000;
  font-size: 2.5em;
  margin-bottom: 20px;
}

/* Paragraph and list items */
.text-container22 p, .text-container22 ul {
  color: #656867;
  font-size: 0.95em;
  line-height: 1.6;
}

/* Style the list */
.text-container22 ul {
  list-style-type: none;
  padding-left: 3;
  margin-left: 0px;
}

.text-container22 ul li {
  margin: 5px 0;
}

.text-container22 ul li strong {
  color: #6d615c;
}

.dark-theme{
  .text-container22 h2 {
    color: #eaf8d7;
  }
  .text-container22 p, .text-container22 ul {
    color: white;
  }
  
  .text-container22 ul li strong {
    color: #0090af;
  }
}
/* Animations */
@keyframes fadeInZoom {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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


.block-split {
  animation: fadeInUp 1s ease;
}

.reverse {
  animation: fadeInUp 1.2s ease;
}

@media (max-width: 768px) {
  .split-image{
    display: none;
  }
  .split-text p{
    font-size: 14px;
  }
  .block-callout{
    display: none;
  }
  .text-container22 h2{
    font-size: 1.5em;
  }
  .block-callout-mob{
    display: block;
    text-align: center;
    padding: 50px 20px;
    border-bottom: 4px solid;
    border-top: 4px solid;
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
    margin-bottom: 250px;
  }
}
/*BLOCK 4*/
.block4{
  background: linear-gradient(270deg, #4694a6, white, #acc16e);
  background-size: 300% 300%;
  animation: backgroundShift 30s infinite linear;
  background-position: 0% 50%; /* Starting position for a smooth transition */
  width: 100%;
  height: 1000px;
  display: flex;
  justify-content: center;
}

@keyframes backgroundShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%; /* Midpoint to create smooth movement */
  }
  100% {
    background-position: 0% 50%; /* Return to starting point for seamless loop */
  }
}
.block5 {
  background: linear-gradient(to left, var(--secondary-color), white, #ebf8d9); /* Gradient */
  width: 1300px;
  height: 800px;
  position: relative;
  top: -150px;
  border-radius: 15px; /* Rounded corners for a polished look */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

.block5split {
  display: flex; /* Enable horizontal layout */
  flex-direction: row; /* Ensure horizontal split */
  height: 100%; /* Stretch to parent height */
}

.block5left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Crop the image to stay inside */
  position: relative;
  
}

.block5left img {
  width: 120%; /* Keep image responsive */
  height: 100%; /* Maintain aspect ratio */
  object-fit: cover; /* Make sure the image covers the area properly */
  position: relative;
  left: -50px; /* Shift the image left */
}
.block5right {
  flex: 1; /* Equal width for both sides */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: space-between; /* Text at the top, button at the bottom */
  padding: 40px; /* Add some spacing */
  text-align: left; /* Align text to the left */
  font-family: 'Roboto', sans-serif; /* Modern and clean font */
}

.block5right h1 {
  font-size: 2.5rem; /* Make the title bigger */
  font-weight: bold;
  margin-bottom: 20px; /* Spacing under the title */
  color: var(--text-color); /* Darker text for readability */
}

.block5right p {
  font-size: 1.2rem; /* Make the paragraph larger */
  line-height: 1.8; /* Better readability */
  color: #555; /* Subtle contrast for the paragraph text */
}

.dryal-button2 {
  background-color: none;
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  padding: 15px 40px;
  font-size: 1.2rem; /* Bigger button text */
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  align-self: flex-start; /* Align the button to the left */
  animation: pulse 2s infinite;
  box-shadow: 0 4px 15px rgba(0, 144, 175, 0.5);
}

.dryal-button2:hover {
  background-color: var(--secondary-color);
  box-shadow: 0 4px 15px rgba(0, 144, 175, 0.5);
  color: var(--text-color); /* Slight text color change on hover */
}
.dark-theme{
  .block5 {
    background: linear-gradient(20deg, #00262f, #004a5b,#00262f); /* Gradient */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
  }
  .block5right h1 {
    color: #d5f1a1;
  }
  
  .block5right p {
    color: var(--text-color); /* Subtle contrast for the paragraph text */
  }
  
  .dryal-button2 {
    border: 2px solid var(--blue-green);
    color: var(--blue-green);
    box-shadow: 0 4px 15px var(--blue-green);
  }
  
  .dryal-button2:hover {
    background-color: var(--blue-green);
    color: var(--text-color); /* Slight text color change on hover */
  }

  .block4{
  background: linear-gradient(270deg, #00262f, #000000, #485e1a);
  background-size: 300% 300%;
  animation: backgroundShift 15s infinite linear;
  }
  .textleft{
    color: white;
  }
}
.textbellowblock5 {
  display: flex; /* Enable horizontal alignment */
  width: 100%; /* Full-width container */
  height: 200px; /* Adjust height as needed */
  padding: 20px; /* Add spacing */
  box-sizing: border-box; /* Include padding in the dimensions */
  gap: 20px; /* Space between the two text sections */
  font-family: "Roboto", sans-serif; /* Clean, modern font */
  margin-top: 60px;
  animation: fadeIn5 2s ease-in;
}
@keyframes fadeIn5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Equal width for both text sections */
.textright-container,
.textleft-container {
  flex: 1; /* Each text takes half the width */
  display: flex;
  text-align: start; /* Center the actual text */
}

.textright {
  font-size: 1.8rem; /* Make the right text larger */
  font-weight: bold;
  color: var(--text-color);
  margin: 0;
}

.textleft {
  font-size: 1.2rem; /* Slightly smaller for the left text */
  line-height: 1.5;
  color: #555;
  margin: 0;
}
/* Responsive Design */

@media (max-width: 768px) {
    .block5split {
      flex-direction: column;
    }
  
    .block5right h1 {
      font-size: 4.5vw;
    }
    .block5right{
      background-color: var(--bg-color);
      border-bottom: 4px solid;
      border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      border-image-slice: 1;
    }
    .block5right p {
      font-size: 3.6vw;
    }
    .textbellowblock5{
      padding: 10px;
      margin-top: 40px;
    }
    .block5left img{
      position: absolute;
    }
    .block4{
      background: #eaf8d7;
      height: 1150px;
    }
  
    .textright {
      font-size: 20px;
    }
  
    .textleft {
      font-size: 2.5vw;
  }
  .block5{
    background-color: #ebf8d9;
  }
}
@media (max-width: 768px) {
  .block-split {
    flex-direction: column;
  }

  .split-image {
    order: -1;
  }
}
@media (max-width: 768px) {
  .block-split {
    flex-direction: column;
  }

  .split-image {
    order: -1;
  }
}
@media (max-width:550px){
  .block4{
    height: 1000px;
  }
}
@media (max-width:320px){
  .dryal-button2{
    font-size: 0.9em;
  }
  .textleft {
    font-size: 9px;
}

}
@media (max-width:425px){
  .textleft {
    font-size: 9px;
}
.block4{
  height: 1000px;
}
}
@media (max-width: 375px) {
  .block5right h1{
    font-size: 30px;
  }
}

/* FOOTER CSS */
.footer {
  background: var(--bg-color);
  background: linear-gradient(180deg,white,#ebf8d9);
  padding: 10px 10px;
  color: var(--text-color);
  font-size: 18px; /* Larger font size for the footer */
  /*text-align: center;  Centered content */
}

/* Footer Content */
.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
  text-align: start;
  border-bottom: 4px solid;
  border-top: 4px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
}

.footer-column {
  
  flex: 2;
  min-width: 250px;
  margin-right: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-top: 10px;
  border-image-source: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  align-items: flex-start;
}

.footer-column h3 {
  font-size: 24px; /* Larger title size */
  color: var(--secondary-color);
  margin-bottom: 15px;
  font-weight: bold;
  text-align: start;
}

.footer-column p {
  font-size: 18px; /* Bigger paragraph text */
  color: #555;
}

.footer-column ul {
  list-style-type: none;
  padding: 0;
}

.footer-column ul li {
  margin: 15px 0;
}

.footer-column ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 18px; /* Bigger text for links */
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.footer-column ul li a.active {
  color: var(--primary-color); /* Active page color */
}
.footer-column ul li a.active i {
  color: var(--primary-color);
}
.footer-column ul li a i {
  margin-right: 10px; /* Space between the icon and text */
  color: var(--secondary-color); /* Icon color */
  font-size: 20px; /* Icon size */
}

.footer-column ul li a:hover {
  color: var(--primary-color);
}

.footer-column ul li a:hover i {
  color: var(--primary-color);
}

/* Footer Bottom */
.footer-bottom {
  align-items: center; /* Align vertically */
  margin-top: 30px;
  font-size: 16px;
  color: #555;
}

.footer-bottom p {
  margin: 0;
  text-align: center;
}
.footer-logo{
  height: 60px;
  position: relative; /* Enable positioning */
  top: -71px; /* Move the logo upwards */
}

.secure-lock {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--secondary-color);
  text-align: center;
}

.secure-lock i {
  margin-right: 10px;
  color: var(--primary-color); /* Green color for the lock icon */
}

/* Media Queries */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-column {
    margin-bottom: 20px;
    text-align: center;
  }

  .footer-column ul li a {
    font-size: 20px;
  }
}
.dark-theme{
  .footer {
    background: linear-gradient(180deg,#000000,#00262f);
    color: #d5f1a1;
  }
  
  /* Footer Content */
  .footer-content {
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  }
  
  .footer-column {
    border-image-source: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  }
  
  .footer-column h3 {
    color: var(--secondary-color);
  }
  
  .footer-column p {
    color: white;
  }
  .footer-column ul li a {
    color: var(--text-color);
  }
  .footer-column ul li a.active {
    color: #d5f1a1; /* Active page color */
  }
  .footer-column ul li a.active i {
    color: #d5f1a1;
  }
  .footer-column ul li a i {
    color: var(--secondary-color); /* Icon color */
  }
  
  .footer-column ul li a:hover {
    color: var(--primary-color);
  }
  
  .footer-column ul li a:hover i {
    color: var(--primary-color);
  }
  .footer-bottom {
    color: white;
  }
  .secure-lock {
    color: var(--secondary-color);
  }
  
  .secure-lock i {
    color: var(--primary-color); /* Green color for the lock icon */
  }
}
/*NEWSLETTER*/
.newsletter {
  background-color: #ebf8d9;
  color: var(--secondary-color); /* Main blue for text */
  padding: 40px 20px;
  border-radius: 20px;
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

.newsletter h4 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--blue-green); /* Main blue for heading */
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 10px;
  border-radius: 30px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto; /* Center the input container */
}

.email-input {
  width: 100%; /* Make sure it takes full available width */
  padding: 12px 20px 12px 50px; /* Added padding for email icon */
  border: none;
  border-radius: 30px;
  background-color: #d5f1a1;
  color: #292524; /* Dark text color */
  font-size: 18px;
  outline: none;
  transition: all 0.15s ease;
}

.email-input:focus {
  border-bottom: 3px solid var(--primary-color); /* Green border on focus */
  box-shadow: 0 0 8px rgba(170, 208, 58, 0.5);
  background-color: rgba(170, 208, 58, 0.1); /* Light green on focus */
}

.subscribe-btn {
  font-size: 14px;
  display: inline-block;
  padding: 12px 20px;
  background-color: var(--primary-color); /* Main green for the button */
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  color: #292524; /* Dark text color */
  margin-left: 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.subscribe-btn:hover {
  background-color: var(--secondary-color); /* Switch to blue on hover */
}
.email-icon {
  position: absolute;
  left: 20px; /* Positioned at the beginning of the email input */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  fill: var(--secondary-color); /* Blue color for the icon */
  transition: transform 0.3s ease;
}
.email-icon:hover {
  transform: translateY(-50%) scale(1.2);
}
.dark-theme{
  .newsletter {
    box-shadow: 0 0 10px #00262f, 0 0 20px #0090af;
    animation: neonGlow 1.5s infinite alternate ease-in-out;
    background:linear-gradient(45deg, #00181c, #00262f,#00181c);
    color: var(--secondary-color);    
  }
  @keyframes neonGlow {
    0% { box-shadow: 0 0 5px #00acc1, 0 0 10px #00acc1; }
    50% { box-shadow: 0 0 15px #00acc1, 0 0 30px #00acc1; }
    100% { box-shadow: 0 0 5px #00acc1, 0 0 10px #00acc1; }
  }
  .email-input {
    background-color: #000000;
    color: #fff;
  }
  .email-input:focus {
    border-bottom: 3px solid var(--primary-color); /* Green border on focus */
    box-shadow: 0 0 8px rgba(170, 208, 58, 0.5);
    background-color: rgba(170, 208, 58, 0.1); /* Light green on focus */
  }
  
  .subscribe-btn {
    background-color: #000000; 
    color: white; /* Dark text color */
  }
  
  .subscribe-btn:hover {
    background-color: var(--secondary-color); /* Switch to blue on hover */
  }
  
  .email-icon {
    fill: #aad03a; /* Blue color for the icon */
  }
}
.popup {
  position: fixed;
  top: -100px; /* Start off-screen */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(121, 0, 0,0.95);
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.popup.show {
  top: 20px; /* Slides down */
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}

.hidden {
  display: none;
}

/*Footer for mobile */
.footermob{
  display: none;
}

@media (max-width: 768px){
  .footer{
    display: none;
  }
  /* Mobile Footer */
  .footermob {
    display: block;
    background: var(--bg-color);
    background: linear-gradient(180deg,white,#ebf8d9);
    padding: 20px 10px;
    color: var(--text-color);
    font-size: 16px;
    text-align: center;
    border-bottom: 4px solid;
    border-top: 4px solid;
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
  }
  
  /* Logo and Company Name */
  .footermob .footer-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .footermob .footer-logo {
    height: 100px;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
  }
  /* Location and Contact */
  .footermob .footer-column {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px auto;
    padding: 20px;
  }

  .footermob .footer-column h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 10px;
  }

  .footermob .footer-column p {
    font-size: 16px;
    color: #555;
    margin: 8px;
  }

  /* Company Info */
  .footermob .company-info {
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Align the text left */
    max-width: 300px; /* Limit the width of the company info section */
  }

  .footermob .footer-column ul {
    list-style-type: none;
    padding: 0;
    text-align: left; /* Ensure links align left */
  }

  .footermob .footer-column ul li {
    margin: 8px 0;
  }

  .footermob .footer-column ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 16px;
  }

  .footermob .footer-column ul li a:hover {
    color: var(--primary-color);
  }

  /* Newsletter */
  .footermob .newsletter {
    background-color: #ebf8d9;
    color: var(--secondary-color);
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    max-width: 80%;
    margin: 0px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footermob .newsletter h4 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .footermob .input-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding: 10px;
    border-radius: 30px;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  .footermob .email-input {
    width: 100%;
    padding: 12px 20px 12px 50px;
    border: none;
    border-radius: 30px;
    background-color: #d5f1a1;
    color: #292524;
    font-size: 11px;
    outline: none;
  }

  .footermob .email-input:focus {
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 0 8px rgba(170, 208, 58, 0.5);
    background-color: rgba(170, 208, 58, 0.1);
  }

  .footermob .subscribe-btn {
    font-size: 10px;
    display: inline-block;
    padding: 12px 20px;
    background-color: var(--primary-color);
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    color: #292524;
    margin-left: 5px;
  }
  .error-message {
    margin-top: 15px;
    font-size: 16px;
    color: red;
    display: none; /* Hide by default */
}

  .footermob .subscribe-btn:hover {
    background-color: var(--secondary-color);
  }

  /* Footer Bottom */
  .footermob .footer-bottom {
    margin-top: 20px;
    font-size: 14px;
    color: #555;
  }

  .footermob .footer-bottom p {
    margin: 0;
  }
  .footermob .footer-column {
    text-align: center;
  }

  .footermob .company-info {
    text-align: center;
    max-width: 100%;
  }

  .footermob .footer-logo {
    height: 160px;
  }

  .footermob .footer-column ul li a {
    font-size: 18px;
  }

}
@media (max-width: 600px) {
  .footermob .footer-logo {
    height: 130px;
  }
}
@media (max-width: 376px) {
  .footermob .footer-logo {
    height: 100px;
  }
}
@media (max-width: 321px) {
  .footermob .footer-column{
    padding-left: 20px;
  }
}
.dark-theme {
  .footermob{
    background: linear-gradient(180deg, #000000, #00262f);
  }
  .footer-column p{
    color: white;
  }
  .footer-column p i{
    color: #0090af;
  }
  .footermob .newsletter{
    background: linear-gradient(180deg, #00181c, #00262f);  
    border: 1px solid #485e1a; /* Bright cyan border */
    box-shadow: 0 0 5px #485e1a, 0 0 10px #485e1a; /* Glowing effect */
  }
  .footermob .email-input {
    color: white;
  }

}
/*Block 3*/

.split-text{
  margin: 0px;
  margin-right: 20%;
  padding: 15px;
}

.Grandtitre{
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 10px;
  color: var(--primary-color);
}

.titreblock{
  margin-top: 70px;
  color: var(--secondary-color);
  font-size: 35px;
}

/*
QUI NOUS SOMMES
*/
/*
QUI NOUS SOMMES
*/
/*
QUI NOUS SOMMES
*/
/*
QUI NOUS SOMMES
*/
/*
QUI NOUS SOMMES
*/
/* Hero Section - Full Image Coverage */
.heroQNS1 {
  position: relative;
  display: flex;
  justify-content: flex-start;    
  align-items: center; /* Vertically center the text */
  text-align: center;
  width: 100%;
  height: 55vh; /* Full screen height */
  color: white; /* Ensure text is visible */
  margin-bottom: 0px; /* Add space below the hero section */ /*back to 30px if something wrong happens*/
  overflow: hidden; /* Prevent overflow of image */
}

.Mob-ImQNS {
  position: absolute;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  object-fit: cover; /* Make the image cover the section */
  z-index: -1; /* Ensure image stays behind the text */
}

.heroQNS1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh; /* Set to 100% instead of 120% */
  background: rgba(0, 0, 0, 0.68); /* Dark overlay */
  z-index: 2; /* Keep it behind text but above image */
}
.titreQNS {
  position: relative;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 4.5rem; /* Adjust as needed */
  font-weight: bold;
  text-align: start;
  margin-left: 4rem;
  padding-bottom: 0.5rem; /* Space between text and border */
  border-bottom: 4px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  animation: borderAnimation 2s linear infinite;
  z-index: 2;
}
.dark-theme .titreQNS{
  color: #d5f1a1;
}
.heroQNS2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
 background: none;
 border-bottom: 4px solid;
 border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));
 border-image-slice: 1;
 animation: borderAnimation 2s linear infinite;
}
@keyframes borderAnimation {
  0% {
      border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));
  }
  50%{
     border-image-source: linear-gradient(45deg, var(--secondary-color), var(--primary-color), var(--secondary-color));
  }
  100% {
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));   
  }
}

.QNS2split {
  display: flex;
  width: 100%;
  max-width: 1200px;
  justify-content: space-between;
}

.split-img2 {
  position: relative;
  flex: 1; /* Take 1 part of the available space */
  max-width: 50%; /* Ensure image does not exceed 50% width */
  display: flex;
  justify-content: center;
  align-items: center;
  left: -60px;
}

.big-image {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure image scales nicely */
  box-shadow: 0 0 10px #00262f, 0 0 20px #0090af;
  animation: neonGlow 1.5s infinite alternateease-in-out;
  background: linear-gradient(45deg, #00181c, #00262f, #00181c);
  border-radius: 30px;
}

.split-text2 {
  position: relative;
  left: 60px;
  flex: 1.5; /* Take 1.5 parts of the available space */
  max-width: 50%; /* Ensure text doesn't exceed 50% width */
  font-family: 'Roboto', sans-serif; /* Use your desired font */
  font-size: 16px;
  color: var(--text-color); /* Text color */
  line-height: 1.6;
  overflow-y: auto; /* Scroll if content exceeds height */
}
.split-text2 p{
  margin-top: 50px;
}

.heroQNS3 {
  display: flex;
  justify-content: space-between; /* Ensures space between the text and image */
  align-items: center; /* Centers items vertically */
  padding: 50px; /* Adjust as needed for spacing */
  background : linear-gradient(90deg,#ebf8d9,#ebf8d9,#ebf8d9);
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a shadow for the floating effect */
  border-radius: 10px; /* Rounded corners for the floating block */
  transition: all 0.3s ease;
  margin-bottom: 80px
}
.values-text {
  width: 50%; /* Adjust the width to control how much space the text takes */
  padding-right: 20px; /* Space between text and image */
}
.values-text p::before {
  content: "\2714"; /* Unicode for check mark ✔ */
  margin-right: 10px; /* Space between the check mark and the text */
  color: green; /* Check mark color */
  font-size: 20px; /* Adjust size of the check mark */
  vertical-align: middle; /* Align the check mark with text */
}

.values-text h2 {
  margin-bottom: 20px; /* Space after title */
}

.values-text p {
  margin-bottom: 15px; /* Space between paragraphs */
}

.values-image {
  width: 40%; /* Adjust the width for the image container */
}

.values-image img {
  width: 100%; /* Ensures the image covers its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Optional: rounded corners for the image */
}
.heroQNS4{
  margin-bottom: 200px;
}
.logocontainerQNS4{
  display: flex;
  justify-content: center;
}
.QNS4text{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-weight: bold;
  font-size: 18px;
}
.QNS4image{
  width: 750px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.QSN5-team {
  text-align: center;
  background-color: #eaf8d7; /* background color */
  background: linear-gradient(180deg ,#f1fae4, #f3fbe9);
  padding: 50px 0;
}

.QSN5-team h2 {
  color: var(--secondary-color); /* main blue */
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.QSN5-team-member {
  display: inline-block;
  margin: 20px;
  text-align: center;
  width: 200px;
}

.QSN5-team-member img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 5px solid var(--primary-color); /* main green */
}

.QSN5-team-member h3 {
  color: var(--secondary-color); /* main blue */
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  margin-top: 15px;
}

.QSN5-team-member p {
  color: var(--primary-color); /* main green */
  font-family: 'Lato', sans-s
}
.H22{
  display: none;
}
@media (max-width: 1024px) {
  .H22{
    display: block;
  }
  .H21{
    display: none;
  }
  .QNS4text{
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .QNS2split {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .split-img2 {
    max-width: 100%;
    left: 0;
  }

  .split-text2 {
    max-width: 90%;
    left: 0;
  }

  .heroQNS3 {
    flex-direction: column;
    padding: 30px;
    text-align: center;
  }

  .values-text,
  .values-image {
    width: 100%;
    padding-right: 0;
  }

  .QSN5-team-member {
    width: 180px;
  }
}
@media (max-width: 768px) {
  .H22{
    display: block;
  }
  .H21{
    display: none;
  }
  .hero-section{
    gap: 20px;
    padding-top: 5px;
  }
  .titreQNS {
    font-size: 3rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
  }

  .heroQNS2 {
    padding: 20px;
  }

  .split-img2 {
    max-width: 100%;
  }

  .split-text2 {
    font-size: 14px;
  }

  .heroQNS3 {
    padding: 20px;
  }

  .QNS4image {
    width: 100%;
  }

  .QSN5-team h2 {
    font-size: 2rem;
  }

  .QSN5-team-member {
    width: 150px;
  }
}
@media (max-width: 480px) {
  .H22{
    display: block;
  }
  .H21{
    display: none;
  }
  .titreQNS {
    font-size: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .split-text2 {
    font-size: 13px;
  }
  .Mob-ImQNS {
    height: 30vh; /* Allow image height to be auto */
  }

  .heroQNS1 {
    height: 30vh; /* Reduce the hero section height */
    padding-top: 0px;
    margin-bottom: 0px;
  }
  .heroQNS1::before{
    height: 100%;
  }

  .titreQNS {
    font-size: 2rem; /* Adjust font size for smaller screens */
  }
  .heroQNS3 {
    padding: 15px;
  }

  .QSN5-team-member {
    width: 130px;
  }

  .QSN5-team-member img {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 320px){
  .titreQNS{
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .Mob-ImQNS{
    display: none ;
  }
  .heroQNS1::before{
    display: none;
  }
  .heroQNS1{
    height: 15vh;
    justify-content: center;
    margin-bottom: 0px;
    padding-top: 20px;
    width: 100%;
  }
  .titreQNS{
    color: var(--secondary-color);
    animation: fadeIn 4s forwards;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
  .dark-theme{
    .heroQNS1{
      background: #00262f;
    }
    .title-mainE{
      color: #d5f1a1;
    }
    .title-descriptionE{
      color: white;
    }
  }
}
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
/* Expertises */
.TitleExp {
  text-align: center;
  margin: 40px 0;
  }
  .title-mainE {
  font-size: 36px;
  font-weight: bold;
  color: var(--ccchange-col);
  margin-bottom: 20px;
  }
  .title-descriptionE {
  font-size: 18px;
  color: var(--color-gray);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  }
  .cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
  margin: 30px;
  }
  .card {
  background: linear-gradient(180deg, #f1fae4, #f3fbe9);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  .card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  }
  .card-text {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  .card-text h3 {
  font-size: 24px;
  color: #7a9e2d;
  margin-bottom: 10px;
  font-weight: bold;
  }
  .card-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 15px;
  }
  .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  @media (max-width: 768px) {
  .cards-container {
  grid-template-columns: 1fr;
  }
  }
  @media (max-width: 480px) {
  .card img {
  height: 180px;
  }
  .card-text h3 {
  font-size: 19px;
  }
  .card-text p {
  font-size: 14px;
  }
}
.dark-theme{
  .card{
    background:linear-gradient(45deg, #00181c, #00262f,#00181c);
  }
  .card h3{
    color: #d5f1a1;
  }
  .card-text p{
    color: white;
  }
  .heroQNS3{
    border: 3px solid #00262f;
    box-shadow: 0 0 10px #00262f, 0 0 20px #0090af;
    animation: neonGlow 1.5s infinite alternate ease-in-out;
    background:linear-gradient(45deg, #00181c, #00262f,#00181c);
  }
  @keyframes neonGlow {
    0% { box-shadow: 0 0 5px #00acc1, 0 0 10px #00acc1; }
    50% { box-shadow: 0 0 15px #00acc1, 0 0 30px #00acc1; }
    100% { box-shadow: 0 0 5px #00acc1, 0 0 10px #00acc1; }
}

}
/* Contact */
/* Contact */
/* Contact */
/* Contact */
/* Contact */
/* Contact */
/* Contact */
.contact-container {
  font-family: Arial, sans-serif;
  display: grid;
  background: linear-gradient(180deg ,#d5f1a1,#ebf8db);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 20px;
  gap: 40px;
  row-gap: 0px;
  width: 1250px;
  margin: 0 auto;
  border-radius: 30px;
  animation: fadeInScale 1s ease-in-out;
  }
  @keyframes fadeInScale {
  0% {
  opacity: 0;
  transform: scale(0.9);
  }
  100% {
  opacity: 1;
  transform: scale(1);
  }
  }
  .dark-theme {
    .contact-header h1{
      color: #d5f1a1;
    }
    .contact-container{
      box-shadow: 0 0 10px #00262f, 0 0 20px #00262f;
      animation: neonGlow 1.5s infinite alternateease-in-out;
      background: linear-gradient(45deg, #00181c, #00262f, #00181c);
    }
    .contact-left-title p{
      color: #f0f0f0;
    }
    .contact-icons{
      background: transparent;
    }
    .contact-inputs{
      background-color: #00262f;
      border: 1px solid #00acc1 ;
    }
    .contact-inputs::placeholder{
      color: #c7c7c7;
    }
    .icon-box{
      background: #00262f;
    }
    .icon{
      color: #00262f;
      background: #00181c;
    }

  }
    
  .contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  .contact-left {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
  padding: 30px ;
  width: auto;
  border-right: 4px solid var(--primary-color);
  }
  .contact-right {
  flex: 1;
  max-width: 600px;
  padding: 30px;
  border-radius: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: auto;
  }
  .contact-header {
  grid-column: span 2;
  text-align: center;
  padding-top: 10px;
  border-bottom: 4px solid var(--primary-color);
  width: 100%;
  }
  .contact-header h1 {
  font-size: 40px;
  font-weight: 600;
  color: var(--text-color);
  }
  .contact-left-title p {
  font-weight: 200;
  color: black;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
  }
  .contact-right p{
  font-size: 18px;
  }
  .contact-inputs {
  width: 93%;
  height: 48px;
  border: 3px solid var(--primary-color);
  outline: none;
  padding-left: 15px;
  font-size: 16px;
  color: #4694a6;
  border-radius: 25px;
  transition: all 0.3s ease-in-out;
  }
  .contact-left textarea {
  height: 120px;
  padding-top: 10px;
  border-radius: 15px;
  }
  .contact-inputs:focus {
  border-color: var(--secondary-color);
  background: #f5fff1;
  }
  .contact-inputs::placeholder {
  color: #666;
  font-weight: 500;
  }
  .contact-left button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 18px;
  color: white;
  font-weight: 600;
  gap: 10px;
  border: none;
  border-radius: 25px;
  background: var(--primary-color);
  transition: all 0.3s ease;
  cursor: pointer;
  }
  .contact-left button:hover {
  background: var(--secondary-color);
  }
  .contact-left button img {
  height: 16px;
  }
  .contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex-direction: row;
  align-items: center;
  }
  .contact-item i {
  font-size: 20px;
  color: var(--secondary-color);
  }
  .titreAA {
  font-size: 20px;
  }
  .contact-item p {
  margin: 0;
  font-size: 16px;
  color: var(--text-color);
  }
  @media (max-width: 1350px) {
  .contact-container {
  width: 90%;
  max-width: 1100px;
  padding: 30px;
  gap: 30px;
  }
  .contact-header h1 {
  font-size: 34px;
  }
  .contact-left-title p,
  .contact-right p,
  .contact-item p {
  font-size: 16px;
  }
  .contact-left,
  .contact-right {
  padding: 20px;
  }
  }
  @media (max-width: 900px) {
  .contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  padding: 15px;
  gap: 20px;
  }
  .contact-left {
  order: 1;
  width: 100%;
  max-width: 500px;
  border-right: none;
  padding: 20px;
  }
  .contact-right {
  order: 2;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  }
  .contact-header {
  width: 100%;
  text-align: center;
  }
  .contact-item {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  }
  .contact-left button {
  width: 100%;
  }
  }
  .contact-icons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 30px;
  padding: 20px;
  background: #ebf8d9;
  border-top: 4px solid var(--primary-color);
  border-bottom: 4px solid var(--primary-color);
  flex-wrap: wrap;
  }
  .icon-box p {
  max-width: 150px;
  word-wrap: break-word;
  text-align: center;
  margin: 0 auto;
  white-space: normal;
  }
  .icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  min-width: 200px;
  max-width: 250px;
  text-align: center;
  margin: 10px;
  }
  .icon-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }
  .icon {
  font-size: 20px;
  color: var(--primary-color);
  background: #d5f1a1;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease-in-out;
  margin-bottom: 10px;
  }
  .icon-box:hover .icon {
  background: var(--primary-color);
  color: #fff;
  }
  .icon-box p {
  margin: 0;
  font-size: 14px;
  color: var(--text-color);
  word-wrap: break-word;
  max-width: 230px;
  text-align: center;
  }
  .icon-box p span {
  font-weight: bold;
  color: var(--secondary-color);
  }
  .icon-box a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 14px;
  }
  .icon-box a:hover {
  text-decoration: underline;
  }
  @media (max-width: 768px) {
  .contact-icons {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  .icon-box {
  min-width: 50%;
  max-width: 100%;
  margin-bottom: 10px;
  }
  .icon {
  width: 50px;
  height: 50px;
  font-size: 24px;
  }
  .contact-info .icon-box:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
  }
  }
  .local {
  width: 100%;
  height: 80vh;
  border: 10px solid;
  border-image: linear-gradient(45deg, #ebf8d9, var(--primary-color), #d5f1a1) 1;
  animation: borderAnimation 5s infinite linear;
  box-sizing: border-box;
  }
  @keyframes borderAnimation {
  0% {
  border-image-source: linear-gradient(45deg, #ebf8d9, var(--primary-color), #d5f1a1);
  }
  50% {
  border-image-source: linear-gradient(45deg, var(--primary-color), #d5f1a1 , #ebf8d9);
  }
  100% {
  border-image-source: linear-gradient(45deg, #ebf8d9, var(--primary-color), #d5f1a1);
  }
  }
  .contact-map{
  width: 100%;
  height: 100%;
  }
  .contact-map .maps{
  width: 100%;
  height: 100%;
  }
  
  @media (max-width: 768px) {
  .contact-container{
  padding: 20px;
  }
  .contact-left-title p{
  font-size: 16px;
  }
  @media (max-width:320px){
    .contact-container{
      padding: 15px;
      }
      .contact-left-title p{
      font-size: 14px;
      }
  }
  .local{
  border: 7px solid;
  border-image: linear-gradient(45deg, #ebf8d9, var(--primary-color), #d5f1a1) 1;
  animation: borderAnimation 5s infinite linear;
  box-sizing: border-box;
  }
  }
  /* CSR */
  /* CSR */
  /* CSR */
  /* CSR */
  /* CSR */
  /* CSR */
  /* CSR */
  /* CSR */
  .csr-page .titreQNS{
    display: flex;
    font-size: 50px;
    flex-direction: column;
    width: fit-content;
    justify-content: flex-start;
    align-items: center;
    }
    .csr-page .T22{
    margin: 0;
    }
    .csr-page .QNS4text{
    font-size: 15px;
    }
    .CSRcontainer{
      display: flex;
      width: 90%;
      flex-direction: row;
      align-items: center;
      margin-left: 20px;
      margin-right: auto;
    }
    .CSRcontainer p{
      font-size: 18px;
      color: var(--text-color);
      width: 55%;
      border-left: 4px solid var(--primary-color);
      padding-left: 70px;
      padding-right: 10px;
      line-height: 30px;
    }
    .CSRcontainer h3{
      text-align: end;
      font-size: 32px;
      line-height: 40px;
      margin-right: 10px;
    }
    .CSRcontainer .contact-button{
      text-transform: none;
      font-size: 16px;
      width: 150px;
      text-align: center;
      justify-content: center;
      display: flex;
      align-items: center;
    }
@media screen and (max-width: 768px) {
  .CSRcontainer{
  flex-direction: column;
  }
  .CSRcontainer p {
  width: 90%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  font-size: 16px;
  line-height: 26px;
  border-left: 0px;
  border-top: 4px solid var(--primary-color);
  }
  .CSRcontainer h3 {
  text-align: center;
  font-size: 28px;
  line-height: 36px;
  margin-right: 0;
  }
  .CSRcontainer .contact-button {
  width: 100%;
  max-width: 200px;
  margin: 10px auto;
  font-size: 14px;
  padding: 10px;
  }
  .titressdd{
  display: flex;
  align-items: center;
  justify-content: center;
  }
}
    .CBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 5%;
    padding-top: 3px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    background-color: #dceebc;
    padding-bottom: 0px;
    }
    .CBL{
      display: flex;
      align-items: center;
      flex-direction: column ;
    }
    .CBL1{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 650px;
    padding: 10px;
    border-bottom: 0px;
    }
    .CBL1 h2{
    font-size: 50px;
    color: #7a9e2d;
    }
    .CBlock-title h2{
    font-size: 40px;
    color: #7a9e2d;
    }
    .CBlock-1, .CBlock-2, .CBlock-3 {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    .CBlock-1 ul, .CBlock-3 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 50px;
    }
    .CBlock-1 li, .CBlock-3 li {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    }
    .CBlock-1 li h3, .CBlock-3 li h3 {
    font-size: 1.8vw;
    font-weight: bold;
    margin-top: 10px;
    }
    .CBlock-1 li p, .CBlock-3 li p {
    font-size: 1.2rem;
    color: #555;
    margin-top: 10px;
    }
    .CBlock-1 li i, .CBlock-3 li i {
    font-size: 3vw;
    color: var(--primary-color);
    }
    .CBlock-2 {
    justify-content: center;
    align-items: center;
    padding: 20px;
    }
    .image-wrapper {
    position: absolute;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .CBlock-1 {
    text-align: end;
    }
    .image-wrapper img {
    width: 90%;
    max-width: 400px;
    height: auto;
    object-fit: cover;
    border: 2px solid #7a9e2d;
    border-radius: 50%;
    animation: fadeScale 3s ease-in-out forwards;
    }
    @keyframes fadeScale {
    0% {
    opacity: 0;
    transform: scale(0.8);
    }
    100% {
    opacity: 1;
    transform: scale(1);
    }
    }
    .image-wrapper img:hover {
    box-shadow: 0 0 20px rgba(122, 158, 45, 0.8);
    transition: box-shadow 0.3s ease-in-out;
    }
    .CBlock .CBLmob{
      display: none;
    }
    @media (max-width: 768px) {
    .CBlock {
    flex-direction: column;
    gap: 0px;
    }
    .CBlock-2{
      display: none;
    }
    .CBlock-1, .CBlock-2, .CBlock-3 {
    width: 100%;
    min-width: unset;
    }
    .CBlock-1 li i, .CBlock-3 li i {
    font-size: 8vw;
    }
    .CBlock-1 li h3, .CBlock-3 li h3 {
    font-size: 5vw;
    }
    .CBlock-1 li p, .CBlock-3 li p {
    font-size: 4vw;
    }
    .image-wrapper img {
    max-width: 90%;
    }
    .CBL1{
      width: auto;
      height: auto;
    }
    .CBL1 h2{
      width: auto;
      font-size: 30px;
    }
    }
    @media (min-width: 1024px) {
    .CBlock-1, .CBlock-2, .CBlock-3 {
    width: 30%;
    }
    .CBlock-1 li i, .CBlock-3 li i {
    font-size: 2vw;
    }
    .CBlock-1 li h3, .CBlock-3 li h3 {
    font-size: 2vw;
    }
    .CBlock-1 li p, .CBlock-3 li p {
    font-size: 1.2rem;
    }
    }
    .CBlockM{
    width: 100%;
    height: 40%;
    background-color: #dceebc;
    padding-bottom: 44px ;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    .CBlock2-title {
    text-align: center;
    margin-bottom: 20px;
    flex-direction: column;
    font-size: 31px;
    font-weight: bold;
    color: #7a9e2d;
    }
    .CBlock2-title h1 {
    text-align: center;
    }
    .CBlock2 {
    list-style-type: none;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px ;
    }
    .CBlock2 ul{
    list-style-type: none;
    padding-left: 0;
    }
    .CBlock2 li{
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .icon-img{
    filter: invert(34%) sepia(73%) saturate(1628%) hue-rotate(163deg) brightness(95%) contrast(102%);
    list-style-type: none;
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    object-fit: cover;
    }
    .CBlock2-1,
    .CBlock2-2,
    .CBlock2-3{
    width: 27%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 3px solid #d5f1a1;
    background: #eaf8d7 ;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .CBlock2-1:hover,
    .CBlock2-2:hover,
    .CBlock2-3:hover{
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
    .CBlock2 p{
    margin-top: 40px;
    font-size: 20px;
    width: 80%;
    }
    .CBlock2 h2{
    font-size: 40px;
    color: #7a9e2d;
    margin: 20px 0;
    }
    .CBlock2-1 h2{
    margin-top: 20px;
    margin-bottom: 10px;
    }
    .CBlock2 .div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: 4px solid black;
    background-color: white;
    padding: 10px;
    width: 100%;
    margin: 5px auto;
    }
    .heroQNS11{
    display: none;
    }
    @media (max-width: 768px) {
    .CBlock {
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 5%;
    }
    .heroQNS11{
    display: block;
    }
    .CBlock-1, .CBlock-2, .CBlock-3 {
    width: 100%;
    min-width: unset;
    text-align: center;
    }
    .CBlock-1 ul, .CBlock-3 ul {
    margin-top: 20px;
    }
    .csr-page .titreQNS{
    display: none;
    }
    .csr-page .heroQNS1{
    display: none;
    }
    .csr-page .titreQNSmob{
    position: relative;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid;
    border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
    z-index: 2;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    color: var(--secondary-color);
    animation: fadeIn 4s forwards;
    }
    .CBlock-1 li, .CBlock-3 li {
    align-items: center;
    border-bottom: 2px solid;
    }
    .CBlock-1 li i, .CBlock-3 li i {
    font-size: 10vw;
    }
    .CBlock-1 li h3, .CBlock-3 li h3 {
    font-size: 6vw;
    }
    .CBlock-1 li p, .CBlock-3 li p {
    font-size: 4vw;
    }
    .image-wrapper img {
    max-width: 80%;
    border-width: 1px;
    }
    .CBlockM {
    height: auto;
    padding-bottom: 30px;
    background: none;
    border-top: 3px solid;
    border-bottom: 3px solid;
    border-image-source: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
    }
    .CBlock2 {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    }
    .CBlock2-title{
    font-size: 20px;
    }
    .CBlock2-title h1{
    margin-bottom: 0;
    }
    .CBlock2-1, .CBlock2-2, .CBlock2-3 {
    width: 80%;
    height: auto;
    border: 2px solid #d5f1a1;
    }
    .CBlock2 p {
    font-size: 16px;
    width: 90%;
    line-height: 1.5;
    }
    .icon-img {
    width: 60px;
    height: 60px;
    }
    }
    @media (max-width: 1024px) {
    .CBlock {
    flex-wrap: wrap;
    padding: 3%;
    }
    .CBlock-1, .CBlock-2, .CBlock-3 {
    width: 48%;
    }
    .CBlock-2 {
    justify-content: center;
    }
    .CBlock2 p {
    font-size: 18px;
    }
    .CBlock2 h2 {
    font-size: 35px;
    }
    .icon-img {
    width: 65px;
    height: 65px;
    }
    }
    .dark-theme{
      .CBlock{
        background: transparent;
        border: 0px;
      }
      .CBlock h3{
        color: #d5f1a1;
      }
      .CBlock-3 li p, .CBlock-1 li p{
        color: white;
      }
      .CBlockM{
        background-color: transparent;
        box-shadow: none;
      }
      .CBlock2-1,
      .CBlock2-2,
      .CBlock2-3{
        border: 0px;
        box-shadow: 0 0 10px #00262f, 0 0 20px #00262f;
        animation: neonGlow 1.5s infinite alternateease-in-out;
        background: linear-gradient(45deg, #00181c, #00262f, #00181c);
      }
      .CBlock2 h2{
        color: #d5f1a1;
      }
    }
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
/* mots du president */
.msdp-page h2 {
  font-size: 18px;
}
.msdp-page .split-text2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
@media (max-width: 768px) {
.msdp-page .H22 {
  
  font-size: 16px;
}
}
@media (max-width: 320px) {
  .msdp-page .H22 {
    font-size: 14px;
  }
  }

/* FAQ */
/* FAQ */
/* FAQ */
/* FAQ */
/* FAQ */
/* FAQ */
/* FAQ */
.FAQBlock{
  gap: 80px;
  max-width: 800px;
    margin: auto;
    font-family: inherit; 
    margin-bottom: 40px;
}
.FAQBlock ,.FAQBlock1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
}
.FAQBlock h1{
  font-size: 40px;
  color: #7a9e2d;
  margin-bottom: 0px;
}
.FAQBlock h1:after{
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: var(--primary-color);
  margin: 10px auto;
  border-radius: 20px;
  margin-bottom: 2px;
}
.FAQBlock2{
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: none;
  justify-content: center;
  align-items: center;
  border-bottom: 3px solid;
  border-image-source: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 2;
}
.faq-item{
  width: 100%;
  border: 1px solid var(--text-color);
  padding: 10px 0;
  display: flex;
  justify-content: center;
  background-color: #dceebc;
  margin-bottom: 30px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.faq-question{
  justify-content: space-between;
  background: none;
  border: none;
  width : 100%;
  text-align: left;
  font-size: 1rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 10px ;
  display: flex;
  align-items: center;
  font-family:  'Roboto', sans-serif;
  padding-left: 20px;
}

.faq-question:focus {
  outline: none;
}

.iconFAQ{ 
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    padding: 0px 10px;
    border: 1px solid var(--primary-color);
}
.faq-answer{
  
  width: inherit;
  padding: 10px;
  font-size: 1rem;
  color: #555;
  display:none;
  background-color: #dceebc;
  transition: max-height 1.5s ease-out, padding 1.5s ease-out; 
  padding: 0 40px; 
  margin-top: -30px;
  margin-bottom: 30px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.faq-answer.open {
  max-height: 500px; 
  padding: 10px 40px;
}

.faq-question.active .iconFAQ{
  content: "-";
}
.AVA{
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.AVA h1{
  font-size: 50px;
  margin: 20px 0px;
}
.AVA h1::after{
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: var(--primary-color);
  margin: 10px auto;
  border-radius: 20px;
  margin-bottom: 2px;
  margin-top: 20px;
}
.contact-btn{
  background-color: #dceebc;
  color: #7a9e2d;
  padding: 12px 30px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease-in;
  border: none;
}
.contact-btn:hover{
  background-color: #7a9e2d;
  color: white;
  cursor: pointer;
  border: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .FAQ-page .heroQNS1{
    display: none;
  }
  .FAQBlock1{
    text-align: center;
  }
}
@media (max-width: 320px){
  .FAQBlock{
    width: 90%
  }
  .FAQBlock h1{
    font-size: 30px;
  }
}
.dark-theme{
  .faq-item{
    border: 0px;
    box-shadow: 0 0 5px #00262f, 0 0 10px #0090af;
    animation: neonGlow 1.5s infinite alternateease-in-out;
    background: linear-gradient(45deg, #00181c, #00262f, #00181c);
  }
  .faq-answer{
    border: 0px;
    box-shadow: 0 5px 5px #00262f, 0 5px 10px #0090af;
    background: transparent;
  }
  .faq-answer p{
    color: #f0f0f0;
  }
}
/* ENGLISH */
/* ENGLISH */
/* ENGLISH */
/* ENGLISH */
/* ENGLISH */

.home-en .intro-text h2::after{
  width: 70px;
}

/* ARABIC */
/* ARABIC */
/* ARABIC */
/* ARABIC */
/* ARABIC */
.home-ar,
.about-ar,
.csr-ar,
.expertise-ar,
.FAQ-ar,
.presidentmessage-ar,
.contact-ar{
 .nav-links{
  flex-direction: row-reverse;
}
 a{
  text-align: right;
}
 .contact-button{
  font-size: 20px;
  text-align: center ;
}
 .dryal-hero{
  flex-direction: row-reverse;
  text-align: right;
}
 .dryal-image-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
 .dryal-photo{
  width: 100%;
  position: relative;
  left: 19%;
}
 .dryal-stats{
  position: absolute;
  flex-direction: row-reverse;
  gap: 20px;
  top: 95%;
  right: 5%;
}
 .dryal-hero{
  align-items: center;
}
 .intro-text h2::after{
  width: 60px;
  left: 80%;
}
 p{
  text-align: right;
  font-size: 22px;

}
 .block-split{
  flex-direction: row-reverse;
  text-align: right;
}
 .split-text{
  margin-right: 0;
  margin-left: 15%;
}
 .text-container22{
  text-align: right;
}
.text-container22 ul{
  padding-left: 0px;
  padding-right: 40px;
}
 li{
  font-size: 18px;
}
 .block5right{
  text-align: right;
}
 .textleft{
  text-align: right;
}
 .footer-content{
  flex-direction: row-reverse;
}
 .contact-location p{
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
}
 .footer-column h3{
  text-align: right;
}
 .contact-location{
  text-align: right;
}
 .footer-column a{
  text-align: right;
  flex-direction: row-reverse;
  gap: 20px;
  font-size: 22px;
}
 .secure-lock{
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}
 .footer-bottom{
  display: flex;
  flex-direction: column;
}
 .monavc{
  flex-direction: row-reverse;
  padding-left: 0px;
  padding-right: 15px;
}
 .mobile-logo img{
  padding-left: 0px;
  padding-right: 50px;
}
 .dryal-stats h3{
  text-align: center;
}
 .textright{
  text-align: right;
}
.heroQNS1{
  justify-content: flex-end;
  
}
.titreQNS{
  margin-left: 0;
  margin-right: 4rem;
}
.H21{
  text-align: right;
}
.QSN5-team-member p{
  text-align: center;
}
.heroQNS3{
  flex-direction: row-reverse;
}
.values-text h2{
  font-size: 28px;
}
.values-text{
  padding-left: 20px;
  padding-right: 0px;
  text-align: right;
}
.values-text p::before{
  margin-right: 0px;
  margin-left: 10px;
}
.CSRcontainer p{
  width: 50%;
  border-left: none;
  border-right: 4px solid #aad03a;
  padding-left: 20px;
  padding-right: 70px;
}
.CSRcontainer h3{
  text-align: right;
  width: 20%;
}
.csr-page .QNS4text {
  font-size: 22px;
}
.CBlock2 ul {
  padding-right: 0px;
}
.CBlock2 p {
  text-align: center;
  margin-top: 20px;
}
.QNS4text{
  font-size: 22px;
}
.CBlock-1 p{
  text-align: left;
}

.contact-left{
  border-right: 0px ;
  border-left: 4px solid var(--primary-color);
}
.dude{
  flex-direction: row-reverse;
}
.icon-box p{
  text-align: center;
  font-size: 18px;
}
.rdng{
  flex-direction: row-reverse;
}
.customs-dropdown a{
  flex-direction: row-reverse;
}
.arrow1{
  transform: rotate(180deg);
}
.customs-dropdown.open .arrow1 img {
  transform: rotate(-90deg); /* Rotate the arrow 90 degrees */
}
.mobiletheme{
  flex-direction: row-reverse;
  padding-right: 0px;
  padding-left: 70px;
}
.dark-theme2{
  padding-left: 0px;
  text-align: right;
  padding-right: 20px;
}
.navbar{
  flex-direction: row-reverse;
}
.navright{
  flex-direction: row-reverse;
  margin-left: 0px;
  margin-right: auto;
}
.dropbtn{
  font-size: 20px;
}
@media (max-width:900px){
  .contact-left{
    border-left: 0px;
  }
  .contact-info p{
    text-align: center;
    font-size: 20px;
  }
  .dude{
    flex-direction: column;
  }
}
@media (max-width:768px){
  .faq-question{
    text-align: right;
  }
}
@media (max-width: 768px){
  .CSRcontainer p{
    width: 90%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    font-size: 20px;
    line-height: 26px;
    border-left: 0px;
    border-right: 0px;
  }
  .iconFAQ{
    margin-right: 10px;
  }
  .CSRcontainer h3{
    width: 90%;
  }
  .CBlock-1 li p, .CBlock-3 li p {
    font-size: 4.5vw;
    text-align: center;
  }
  .CBlock-1 li h3, .CBlock-3 li h3 {
    font-size: 7vw;
  }
   .sidebar{
    visibility: hidden; /* Completely hide the sidebar */
    left: auto;
    right: 0; /* Change left to right */
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); /* Change to negative for right shadow */
  }
   .sidebar.active{
    visibility: visible; /* Make the sidebar visible */
    opacity: 1;
  }
   .dryal-content{
    text-align: center;
  }
   .dryal-stat2 p{
    text-align: center;
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
  }
   .dryal-stat2 .pmobile{
    font-size: 20px;
  }
   .intro-text h2{
    font-size: 28px;
  }
   .block-split{
    padding: 10px;
  }
   .block-callout-mob h2{
    font-size: 52px;
    color: #7a9e2d;
  }
   .block-callout-mob p{
    text-align: center;
  }
   .value-block span{
    font-size: 3.5vw;
  }
   .textright{
    font-size: 6vw;
  }
   .textleft{
    font-size: 4vw;
  }
   .footermob .footer-column p{
    flex-direction: row-reverse;
    display: flex;
    gap: 5px;
  }
   .mobile-contact-link{
    font-size: 18px;
  }
  /*About*/
  .heroQNS1 {
    justify-content: center;
}
  .titreQNS{
    margin-right: 0px;
  }
  .split-text2 p{
    text-align: center;
  }
  .heroQNS3{
    flex-direction: column;
  }
  .heroQNS3 h2{
    text-align: center;
  }
}
  
@media (max-width: 420px){
  .dryal-content p{
    font-size: 18px;
  }
   .dryal-content{
    text-align: center;
  }
}
}
#progress {
  position: fixed;
  bottom: 20px;
  right: 10px;
  height: 38px;
  width: 38px;
  display: block;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10000;
} 
#progress-value {
  display: block;
  position: relative;
  height: calc(100% - 5px);
  width: calc(100% - 5px);
  background-color: #f0f0f0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  color: #0090af;
  z-index: 10000;
}
.progress-icon{
  width: 12px; /* Adjust the size of the image */
  height: 12px; /* Keep the aspect ratio */
  transform: rotate(270deg); /* Rotate the image */
  filter: invert(36%) sepia(95%) saturate(1645%) hue-rotate(163deg) brightness(89%) contrast(101%);
  align-self: center;
}
.dark-theme{
  #progress span{
    color: #00acc1;
  }
  #progress-value {
    background-color: #00262f;
  }
}
.contact1{
  align-items: start;
}
.dark-theme .contact-right h2{
  color: #d5f1a1;
}
@media (max-width:900px){
  .contact1{
      align-items: center;
  }
}
/* Info Navbar */
.infonavbar {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid;
  border-image-source: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  background-color: var(--bg-color);
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: var(--blue-green);
}

.left1-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 50px;
}

.left1-info a {
  text-decoration: none;
  color: var(--blue-green);
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.left1-info a:hover {
  color: #00acc1;
}

.left1-info a .fa {
  margin-right: 8px;
  font-size: 16px;
}

.right1-info {
  display: flex;
  align-items: center;
  padding-right: 50px;
}

.right1-info a {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
}

.whatsapp-img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  color: rebeccapurple;
}

@media (max-width: 768px) {
  .infonavbar{
    display: none;
  }
}
/* Langues */
.navbar .logo{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
/* Dropdown Button */
.langue-dropdown {
  position: relative;
  display: inline-block;
}
.langue-dropbtn {
  background: var(--bg-color);
  border: 2px solid transparent;
  background-origin: border-box;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-right: 2px solid #009688;
  height: 100%;
  padding: 9px 15px;
  margin: 0px;
  transition: background-color 0.3s ease;
}
.langue-dropbtn.active{
  background-color: #d5f1a1;
}
.dark-theme .langue-dropbtn.active{
  background-color: #00181c;
}
.whatsapp1-icon{
  border-left: 2px solid #009688;
  border-right: 2px solid #009688;
  height: 100%;
  padding: 0 15px;
  display: flex;
  align-items: center;
  margin: -10px 0; /* Compensate for infobar padding */
  transition: background-color 0.3s ease;
}
.whatsapp1-icon:hover {
  background-color: #d5f1a1;
}
.langue-dropbtn:hover {
  background-color: #d5f1a1;
}
.dark-theme .langue-dropbtn:hover {
  background-color: #00181c;
}
.dark-theme .whatsapp1-icon:hover {
  background-color: #00181c;
}
.langue-dropdown .flag-icon {
  width: 25px; /* Flag size */
  height: 25px;
}

/* Dropdown Content */
.langue-dropdown-content {
  display: none;
  position: absolute;
  background-color: #d5f1a1;
  max-width: 100px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 4;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease-in-out;
  border-right: 2px solid #009688;
  border-left: 2px solid #009688;
}
.langue-dropdown-content a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.langue-dropdown-content a img{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.langue-dropdown-content a {
  color: #333;
  padding: 5px 5px;
  text-decoration: none;
  border-bottom: 1px solid #0090af;
}
.dark-theme .langue-dropdown-content a{
  color: #fff;
}
.langue-dropdown-content a:first-child{
  border-top: 1px solid #0090af;
}
.langue-dropdown-content a:hover {
  background-color: #acc16e;
}
.langue-dropdown-content .drop-active{
  background-color: #acc16e;
}
.langue-dropdown {
  position: relative;
  display: inline-block;
}
.langue-dropbtn i{
  color: #0090af;
}
.dark-theme{
  .langue-dropdown-content {
    background-color: #00181c;
  }
  .langue-dropdown-content a:hover {
    background-color: #004a5b;
  }
  .langue-dropdown-content .drop-active{
    background-color: #004a5b;
  }
}
/* Login Page */
/* Login Page */
/* Login Page */
/* Login Page */
/* Login Page */
/* Login Page */

.login-page .hero-section{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-page .hero-section {
  position: relative;
  height: 100vh;
  background-image: url('Images/airplane-8892881.jpg'); /* Replace with your image URL */
  background-size: cover;
  background-position: center;
}

.login-page .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
  z-index: 1;
}

.login-container {
  position: relative;
  z-index: 2;
  background-color: var(--bg-color);
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 30px;
  width: 350px;
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
    font-size: 28px;
}

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

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--ccchange-col);
    font-weight: 500;
    transition: color 0.3s ease;
}

.input-group input {
    width: 90%;
    padding: 12px;
    border: 2px solid #aad03a;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: var(--input-bg);
    color: var(--text-color);
}

.input-group input:focus {
    border-color: #0090af;
    box-shadow: 0 0 8px rgba(0, 144, 175, 0.3);
    outline: none;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #aad03a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.login-btn:hover {
    background-color: #0090af;
    transform: translateY(-2px);
}

.login-btn:active {
    transform: translateY(1px);
}

.forgot-password {
    display: flex;
    text-align: center;
    margin-top: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.forgot-password a {
    color: #0090af;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    
}
.forgot-password a:hover {
    color: #aad03a;
    text-decoration: none;
    display: inline-block;
}
.login-description {
    text-align: center;
    font-size: 18px;
    color: var(--text-color);
    margin-bottom: 30px;
    line-height: 1.5;
}
.login-page{
  .footer-col2{
    display: none;
  }
  .newsletter{
    display: none;
  }
  .footer-logo{
    display: none;
  }
  .contact-location{
    text-align: center;
    flex-direction: row;
  }
  .footer-column h3{
    display: none;
  }
  .footer{
    padding-top: 0px;
    background: var(--bg-color);
  }
  .footer-content{
    text-align: center;
  }
  
}
.login-page {
  /* Styling for the navbar */
  .navbar {
    display: flex;
    justify-content: space-between;  /* Space out elements between left and right */
    align-items: center;
    padding: 15px;
    background-color: var(--bg-color);
    padding-top: 5px;
  }

  /* Styling for the back link */
  .back-header {
    font-size: 22px;
    font-weight: bold;
  }

  /* Styling for the back link text */
  .back-link {
    color: #aad03a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-left: 30px;
  }

  .back-link i {
    margin-right: 8px;  /* Space between the arrow and text */
  }

  .back-link:hover {
    color: #485e1a;
  }

  /* Center the logo */
  .logo-container {
    flex: 2;
    text-align: center;
    margin: 0px;
  }

  .logo {
    max-width: 100px;  /* Adjust size of the logo */
    height: auto;
  }
  .div1{
    width: 10%;
    height: auto;
  }
  .div3{
    width: 10%;
    height: auto;
  }
  .div2{
    width: 80%;
    height: auto;
  }
}
/* Mobile styling for screens with a width of 768px or less */
@media (max-width: 768px) {
  .login-page{
    /* Hero section adjustment */
    .hero-section {
      height: auto;
      padding: 30px 15px;
  }

  /* Navbar */
  .navbar {
      padding: 10px;
      padding-top: 0px;
  }

  .back-link {
      font-size: 18px; /* Smaller font for mobile */
      padding-left: 15px; /* Less space for the back link */
      padding-top: 10px; /* Adjust the space above */
  }

  .logo-container {
      flex: none; /* Disable flex for logo container */
  }

  .logo {
      max-width: 80px;  /* Smaller logo size on mobile */
  }

  /* Adjust input fields and buttons */
  .login-container {
      width: 90%;  /* Increase width to fit better on mobile */
      padding: 20px;  /* Less padding to make the container more compact */
  }

  .input-group input {
      width: 95%;  /* Full width for input fields on mobile */
      padding: 10px;  /* Adjust padding for mobile */
  }

  .login-btn {
      padding: 15px;  /* Larger button padding for mobile */
      font-size: 18px;  /* Larger text for mobile */
  }

  /* Adjust forgot-password link */
  .forgot-password {
      margin-top: 15px;
      font-size: 14px;
  }

  /* Adjust description font size */
  .login-description {
      font-size: 16px;  /* Smaller font for mobile */
      margin-bottom: 20px;
  }

  /* Footer adjustments */
  .footer {
      padding: 10px;
      text-align: center;
  }

  /* Make the footer content more compact */
  .contact-location {
      text-align: center;
      flex-direction: column;  /* Stack the items vertically on small screens */
  }

  .footer-content {
      font-size: 14px; /* Smaller footer text */
  }

  /* Hide footer elements that aren't necessary on mobile */
  .footer-col2, .newsletter, .footer-logo, .footer-column h3 {
      display: none;
  }
  }
}
@media (max-width: 480px){
  .login-page{
    .navbar{
      padding-top: 0px;
    }
    .back-link{
      font-size: 14px;
    }
  }
}
/* NOT FOUND */
/* NOT FOUND */
/* NOT FOUND */
/* NOT FOUND */


#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.notfound {
  max-width: 767px;
  width: 100%;
  line-height: 1.4;
  padding: 0px 15px;
}

.notfound .notfound-404 {
  position: relative;
  height: 150px;
  line-height: 150px;
  margin-bottom: 25px;
}

.notfound .notfound-404 h1 {
  font-family: 'Titillium Web', sans-serif;
  font-size: 186px;
  font-weight: 900;
  margin: 0px;
  text-transform: uppercase;
  background: url('Images/text.png');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-position: center;
}

.notfound h2 {
  font-family: 'Titillium Web', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.notfound p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.notfound a {
  font-family: 'Titillium Web', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: none;
  background: #aad03a;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 1px;
  margin-top: 15px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
    height: 110px;
    line-height: 110px;
  }
  .notfound .notfound-404 h1 {
    font-size: 120px;
  }
}
@media (max-width: 767px){
  .notfound{
    max-width: 700px;
    margin: 0px 20px;
    padding: 0;
    line-height: 1.3;
  }
  .notfound p,h2{
    max-width: 80%;
  }
}
.notfound-ar{
  
}