/* 
  General styling for the body and html elements.
  Sets the font, background color, and overall appearance.
*/
*{ 
    margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root font size set to 62.5% for rem scaling */
html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  font-size: 1.6rem; /* 16px */
}


/* ------ entry animations -------- */
.welcome-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* On top of the nav */
}

/* Tune once here and both animations stay synced */
:root {
  --flyDur: 0.0s;        /* time for the bee to fly in */
  --settleDur: 1.5s;     /* time for shrink + text rise (same for both) */
  --startDelay: .2s;     /* slight initial pause */
  --easing: cubic-bezier(.2,.8,.2,1);
}

/* Center stack with spacing (unchanged if you already have it) */
.welcome-text{
  color:#fff; text-align:center;
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}

/* 1) Bee flies in (keeps scale 2), 2) then shrinks to 1x */
#welcome-logo{
  opacity:1;
  transform-origin:center;
  transform:  scale(2);
  /* transform: translateX(-120vw) scale(2); */
  will-change: transform, opacity;
  animation:
    /* beeFlyIn var(--flyDur) var(--easing) var(--startDelay) forwards, */
    beeSettle var(--settleDur) var(--easing) calc(var(--startDelay) + var(--flyDur)) forwards;
}

/* @keyframes beeFlyIn {
  from { transform: translateX(-120vw) scale(2); }
  to   { transform: translateX(0)       scale(2); }
} */

@keyframes beeSettle {
  from { transform: translateX(0) scale(2); }
  to   { transform: translateX(0) scale(1); }
}
/* Main text styling and animation */
.text-main {
  font-size: 7rem;
    opacity: 0; /* Start fully transparent */
    animation: fadeIn 2s forwards, /* Fade in over 2 seconds */
               moveUp 2s 1s forwards; /* Move up after the fade-in is complete */
    /* Explanation:
       - 'fadeIn 2s forwards': Start fading in immediately, over 2 seconds.
       - 'moveUp 2s 2s forwards': Start moving up after a delay of 2 seconds (once fade-in is done), over 2 seconds. */
}

/* Subtitle moves up on the exact same clock as the bee’s shrink */
.text-sub{
  font-size:4rem;
  opacity:0;
  transform: translateY(18px);
  will-change: transform, opacity;
  animation: subRise var(--settleDur) var(--easing) calc(var(--startDelay) + var(--flyDur)) forwards;
}

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

/* Keyframes for fading in */
@keyframes fadeIn {
    from {
        opacity: 0; /* Start fully transparent */
    }
    to {
        opacity: 1; /* End fully opaque */
    }
}

/* Keyframes for moving up */
@keyframes moveUp {
    from {
        transform: translateY(0); /* Start from original position */
    }
    to {
        transform: translateY(-20px); /* Move 50px up */
    }
}

@keyframes slideUp {
 
  /*  start changing opacity at 50%. this will land when the welcom overlay is almost to the top */
  50%{
    opacity: 1;
  }
  
  80%{
opacity: .5;
  }
    100%{
      /*  the transform will be fluid starting at 0 to 100 since I didn't specify it anywhere else */
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes moveIcon{
  from{
    
    transform: translateX(-50%);
  }
  to{
 
    transform: translateX(-50%);
  }
}


/*  ----------------------- Contact form --------------------- */
/* Popup Container Styling */
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark background with transparency */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; /* Smooth transition for appearance */
    z-index: 1000; /* Ensures the popup is on top */
}
/* header is hidden on larger screen. it will be displayed on smaller ones */
.popup-header{
  height: 8rem;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
 /* hide on larg screens. this will replace the image on smaller screens */
 display: none;
}


/*  Contact h1  */
.contact-h1{
  font-size: 3.4rem;
  margin: 0 0 3rem;
 
}
.popup-logo{
  margin: 2rem 0 0 2rem;
   width: 20rem;
}
/* Show Popup */
.popup-container.show {
    display: flex; /* Flexbox for centering content */
    opacity: 1; /* Full visibility */
}

/* Popup Content Styling */
.popup-content {
    background: white;
    width:85%;
    max-width: 900px;
    /* the button is inline-block this will center */
    /* text-align: center; */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    transform: scale(0.8); /* Initial scale down for animation */
    transition: transform 0.3s ease; /* Smooth scale up on show */
    opacity: 0;
}

.popup-container.show .popup-content {
    transform: scale(1); /* Scale up to normal size */
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px;
    color: #FDD051;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: #f3b50a; /* Color change on hover */
}


/* Image Container Styling */
.image-container {
    flex: 1.4; /* Takes up 1/3 of the popup */
   
    overflow: hidden; /* Ensures the image doesn't overflow */
}

.image-container img {
    width: 100%;
    height: 100%;

    object-fit: cover; /* Ensures the image covers the container without distortion */
    /*  position the image */
   
    object-position: 70%;
    /* transform: scale(.89); */
}

/* Form Container Styling */
.form-container {
    flex: 1.8; /* Takes up 2/3 of the popup */
    padding: 4rem; /* Adds space around the form */
     min-width: 300px; /* Minimum width for responsiveness */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers the form vertically */
    align-items: center;
}

/* Form Input Styling */
form input,
form textarea {
    width: 100%; /* Full width of the container */
    padding: 10px; /* Padding for input */
    margin-bottom: 15px; /* Space between inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size for readability */
    resize: vertical; /* Allows resizing vertically for textarea */
}




/* Reusable Button Styling */
.ripple-button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden; /* Hides the ripple effect overflow */
    transition: transform 0.3s ease; /* Smooth transform transition */
    outline: none; /* Removes outline on focus */
}

/* Ripple Effect Styling */
.ripple-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s, opacity 0.6s;
}

/* Ripple Effect on Hover */
.ripple-button:hover {
    transform: translateY(-2px); /* Slight upward movement */
}

.ripple-button:active::before {
    transform: scale(2);
    opacity: 0;
    transition: none; /* Instant transformation on click */
}

/* Responsive Design */
@media (max-width: 768px) {
    .popup-content {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        max-height: 90%; /* Maximum height for responsiveness */
    }

    .image-container{
      /*  hide the image on small screens */
      display: none;
    }

    /* show the header on smaller screens*/
    .popup-header{
      
          display: inline-block;
      }
    .form-container {
        width: 100%; /* Full width for both containers */
        height: 100%;
        min-height: 50vh; /* Minimum height for responsiveness */
    }
}
/* ------- resource ------- */
/* 
  Styling for resource rows to make them responsive and stylish.
  Each row contains a button and a text paragraph, arranged in alternating order.
*/
.resource-row {
  display: flex; /* Flexbox layout for easy horizontal alignment */
  align-items: center; /* Aligns items vertically at the center */
  justify-content: space-between; /* Distributes space between button and text */
  margin: 20px 0; /* Adds vertical margin between rows */
}

/* 
  Reverses the order of items in the row when 'reverse' class is applied.
  Used to alternate button and text placement on each row.
*/
.resource-row.reverse {
  flex-direction: row-reverse; /* Reverses the order of flex items */
}

.faq-resources-container {
  margin: 4rem auto 5rem;
  max-width: 1100px;
  padding: 0 1.5rem;
}

.faq-resources-container .additional-resources-title {
  margin: 6rem auto 2.5rem;
  text-align: center;
}

.faq-resources-container p {
  margin-bottom: 2.5rem;
  line-height: 1.7;
  text-align: center;
}

.faq-resources-container h3 {
  margin: 5rem auto 0rem;
  text-align: center;
  color: #1a1919;
}

/* 
  Styling for the resource buttons.
  Creates a modern, stylish appearance for the buttons.
*/
.resource-button {
  background-color: #333; /* Dark background for contrast */
  color: #FDD051; /* Text color matching the theme */
  padding: 12px 24px; /* Adds padding around the button text */
  text-decoration: none; /* Removes underline from the link */
  border-radius: 5px; /* Rounded corners for modern look */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  font-size: 16px; /* Sets font size */
  text-align: center; /* Centers text inside the button */
  min-width: min(90rem, 100%);
  flex: 1 1 clamp(220px, 45%, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
  Hover effect for resource buttons.
  Changes background color for user feedback.
*/
.resource-button:hover {
  background-color: #FDD051; /* Changes button background on hover */
  color: #333; /* Changes text color on hover */
}

/* 
  Styling for the resource text paragraphs.
  Ensures good readability and responsiveness.
*/
.resource-text {
  flex: 1; /* Allows text to expand and fill available space */
  margin: 0 20px; /* Adds horizontal margin between text and button */
  font-size: 14px; /* Sets a readable font size */
  line-height: 1.6; /* Improves readability by increasing line height */
}

.faq-resources-container .button-container {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  justify-content: center;
  gap: 1.6rem;
}
#gov-req-text{

  margin-top: 8rem;
}
/* --- the body */
.about-section {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center align */
  justify-content: center; /* Centers horizontally */
  min-height: 50vh; /* Allow enough space for content without forcing overflow */
  text-align: center;
  /* background-color: #fffafa; */
  margin: 0 0 0 0;
  margin-bottom: 20rem;
  /* min-height: 90vh; */
  padding: 10rem 2rem 2rem 2rem;
  gap: 1.5rem; /* Controls spacing between elements */
}


/* 
font-size: clamp(min, preferred, max);
•	min → The smallest value (prevents text from shrinking too much).
	•	preferred → The dynamic value that changes based on screen width (e.g., vw or em).
	•	max → The largest value (prevents text from growing too much). */
.about-section h1 {
 /* position: absolute;
 top: 10rem; */
width: 100%;
  text-align: center;
font-size: clamp(4rem, 8vw, 6rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom:5rem;
 
}

/* 
font-size: clamp(min, preferred, max);
•	min → The smallest value (prevents text from shrinking too much).
	•	preferred → The dynamic value that changes based on screen width (e.g., vw or em).
	•	max → The largest value (prevents text from growing too much). */
/*  this is the text in all about section on home screen */
.about-right {
  flex: 1.3;
  text-align: left;
  min-width: 300px;
  max-width: 130rem;
  padding: 0rem 4rem 2rem 2rem;
  box-sizing: border-box;
     
  /* text-align: left; */
}


.about-right p {
  font-size: clamp(1.6rem, 2vw, 2rem);
  color: #6f6b6b;
  line-height: 1.6;
}
/* .about-section-text{

} */


.about-left {
  flex: .7;
  min-width: 100px;
  min-height: 300px;
  display: flex;
  margin: 0 8rem 0 10rem ;
  align-items: center;
  justify-content: center;
}

.about-left img {
  width: 140%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;

  max-height: 400px; /* Adjust this as needed */
}



@media screen and (max-width: 1000px) {
  .about-section {
    min-height: auto;
    margin: 8rem 0 6rem 0;
    padding: 8rem 2rem 6rem 2rem;
  }
.about-left {

  min-width: 100px;
  min-height: 300px;
 
  margin: 0 6rem 0 2rem ;

}

.about-left img {
  width: 140%;

  max-height: 400px; /* Adjust this as needed */
}

.about-right {

  padding: 2rem 1rem 2rem 2rem;
  
}

}
/* Responsive Design */
@media screen and (max-width: 768px) {
  .about-section {
    margin: 6rem 0 6rem 0;
    padding: 6rem 1.5rem 4rem 1.5rem;
    min-height: auto;
    flex-direction: column;
  }



  
  .about-left{
    padding: 0px;
    margin: 0;
    min-width: 100%;
  }
  .about-right {
    min-width: 100%;
  }

  .about-right h1 {
    text-align: center;
  }
}


/* Home: Services intro (replaces "Trusted Land Services" block) */
#services-intro { margin-top: 6rem; padding-top: 0; }

#services-intro .about-heading{
  margin: 1.2rem 0 1.2rem 0;
  text-align: center;
  line-height: 1.15;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw + .2rem, 4.2rem);
}

#services-intro .about-right{
  /* you already have .about-right styles; this tightens spacing for this section */
  max-width: 130rem;
  margin: 0 auto;
  text-align: left;  /* keep body copy left-aligned for readability */
}

#services-intro .about-right p{
  margin: 0 0 1.2rem 0;
  color: #444;
  line-height: 1.65;
  font-size: clamp(1.6rem, 1.2vw + .9rem, 2.0rem);
}


/* 
  Styling for the iframe popup overlay (div with class 'iframe-popup').
  Used to display content pages in a popup iframe.
*/
.iframe-popup, .contact-form-popup {
  display: none; /* Hides the popup by default */
  position: fixed; /* Fixes the popup in place, relative to the viewport */
  top: 0; /* Positions the popup at the top of the viewport */
  left: 0; /* Positions the popup at the left of the viewport */
  width: 100vw; /* Makes the popup take up the full width of the viewport */
  height: 100vh; /* Makes the popup take up the full height of the viewport */
  /* background-color: rgba(0, 0, 0, 0.7); Adds a semi-transparent black background */
  justify-content: center; /* Centers the iframe or form horizontally */
  align-items: center; /* Centers the iframe or form vertically */
}

/* 
  Styling for the iframe and contact form content within popups.
  Centers content and provides padding for a better user experience.
*/
.iframe-popup iframe, .contact-form-popup .popup-content {
  background-color: #FFF; /* Sets a white background for the iframe and form content */
  width: 100%; /* Makes the content take up 80% of the popup width */
  height: 100%; /* Makes the content take up 80% of the popup height */
  padding: 0px; /* Adds padding around the content for spacing */
}

/* 
  Styling for the close button (span with class 'close').
  Allows users to close the popup overlay.
*/
.iframe-popup .close, .contact-form-popup .close {
  position: absolute; /* Positions the close button absolutely within the popup */
  top: 20px; /* Positions the close button 20px from the top */
  right: 20px; /* Positions the close button 20px from the right */
  font-size: 30px; /* Sets a large font size for the close button */
  color: #FFF; /* Sets the color of the close button to white */
  cursor: pointer; /* Changes cursor to pointer on hover */
}


/* Styling for the main content slider and learn more button */
/* .background-slider, .learn-more, .iframe-popup, .contact-form-popup { */
  /* Existing styles for responsiveness and design */
/* } */

/* Services */

.container-services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 4.6rem; /* 30px */
     display: inline-block;
  background-image: linear-gradient(to right, #EBC2AF, #232934);
  background-size: 100% 4px; /* Height of the underline */
  background-repeat: no-repeat;
  background-position: 0 100%; /* Position the underline below text */
}

/* General Bullet List Styles */
.bullet-list {
  display: flex; /* Use Flexbox for layout */
  flex-wrap: wrap; /* Allow items to wrap to the next row */

  gap: 2rem; /* Space between items */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.bullet-list li {
    justify-self: space-evenly;
  align-self: stretch;
  flex: 1 1 calc(50% - 2rem); /* Take up 50% of the width minus the gap */
  padding: 1.5rem;
 margin-top: 6rem;
  box-sizing: border-box; /* Ensure padding is included in the width calculation */
}

.bullet-list h3 {
  font-size: 3rem; /* 20px */
  margin-bottom: 0.5rem;
}

.bullet-list p {
  margin: 0;
  font-size: 1.6rem; /* 16px */
}

/* Responsive Design: Switch to one column on smaller screens */

.services-text {
  margin: 0;
  font-size: 2rem !important; /* 16px */
}

/* blockquote {
  font-style: italic;
  margin: 0 0 1rem;
  font-size: 1.8rem;
}

cite {
  display: block;
  text-align: right;
  font-size: 1.4rem;
  color: #555;
} */
/* Wave Container */
/* Wave Container */
.wave-container {
  position: relative;
  height: auto;
  background: url('https://media.istockphoto.com/id/2178302292/photo/close-up-businessman-hand-writing-content-or-somethings-on-notebook-with-using-laptop-at.webp?a=1&b=1&s=612x612&w=0&k=20&c=xCu5eRe5BEf_dRTMSdd4Mkr_c2JNACqzum-RrwRCu5k=') no-repeat center/cover;
 /* width: 100vw; */
  text-align: center;
 color: #fff;
  margin: 0;
  padding: 8rem 2rem;
}

/*  create an overlay for the image */
.wave-container::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(56, 53, 53, 0.687); /* Adjust the opacity */
  pointer-events: none; /* Prevent interaction with the overlay */
}
.wave-container .content {
  z-index: 10 !important;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.wave-container h1 {
  /* color: #333; */
  font-size: 2.5rem;

  z-index: 10;
  margin-bottom: 1rem;
}

.wave-container p {
 color: #d2c6c6;
  font-size: 1.2rem;
}
/* wave on the bottom of carousel */
.carousel-wave-bottom{
  position: absolute;
  bottom: 0; /* Always position at the top of the container */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 100;
  /* z-index:; Keep it behind the content */
}



.carousel-wave-bottom.small {
  transform: scaleY(1) translateY(-0%); /* Ensure it stays aligned at the top */
}

.carousel-wave-bottom.medium {
  transform: scaleY(1) translateY(0%); /* Adjust depth slightly */
}

.carousel-wave-bottom.large {
  transform: scaleY(1) translateY(0%); /* Adjust depth further */
}


/* other containers wave for the top of them */
.wave {
  position: absolute;
  top: 0; /* Always position at the top of the container */
  left: 0;
  width: 100%;
  height: auto;
  /* z-index:; Keep it behind the content */
}

.wave.small {
  transform: scaleY(-1) translateY(100%); /* Ensure it stays aligned at the top */
}

.wave.medium {
  transform: scaleY(-1) translateY(100%); /* Adjust depth slightly */
}

.wave.large {
  transform: scaleY(-1) translateY(100%); /* Adjust depth further */
}




/* bottom wave */
.wave-bottom-layer {
  position: absolute;
  top: auto; /* Keep it at the bottom of the container */
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-right: 2rem;
  z-index: 1;
}

.wave-bottom {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: auto;
  padding-right: 2rem;
}

.wave-bottom.small {
  transform: scaleY(1) translateY(0%); /* Flip the wave vertically */
}

.wave-bottom.medium {
  transform: scaleY(1) translateY(0%); /* Flip and layer slightly higher */
}

.wave-bottom.large {
  transform: scaleY(1) translateY(0%); /* Flip and layer furthest back */
}
.wave-bottom.clipped-image {
  transform: scaleY(1) translateY(0%); /* Flip and layer furthest back */
}

/* Content Container */
.why-content-container  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
 
  margin: 13rem 0;
}




.why-content-container  .image {
  flex: 1;
  text-align: center;
  padding: 1.5rem; /* 15px */
}

.why-content-container .image img {
  max-width: 100%;
  height: auto;
  border-radius: 0.8rem; /* 8px */
}


/* why us section on home page */
/* Why Choose Us Section */


.why-choose-us {
  position: relative;
  background: url('/images/ben-white-gEKMstKfZ6w-unsplash.jpg') no-repeat center/cover;
  color: white;
  text-align: center;
  margin: 0;
  max-width: 100vw;
  padding: clamp(6rem, 8vw, 10rem) clamp(2rem, 5vw, 8rem);
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 75rem;
  height: auto;
  overflow: hidden;
}

.why-us-overlay {
  position: relative;
  background: rgba(255, 255, 255, 0.205);
  width: 80%;
  height: 100%;
  padding: 0;
}
.why-content {
  margin:6rem auto 0;
  border-radius: 14px;
  max-width: 900px;
  text-align: center;
  padding:  clamp(2rem, 3vw, 3.6rem);
  position: relative;
  overflow: hidden;
  color: #f4f6fb;
}

.why-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Heading */
#why-us-header {
  /* makes the text only take the space of the text lenght */
  display: inline-block;
   /* background-image: linear-gradient(to right,  #FCC838,#dfa609); */
  background-size: 100% 5px; /* Height of the underline */
  background-repeat: no-repeat;
  background-position: 0 100%; /* Position the underline below text */
 /* create an underline */
  /*       display: inline-block;
  background-image: linear-gradient(to right, #6A6056, #232934);
  background-size: 100% 1px;  
  background-repeat: no-repeat;
  background-position: 0 100%;Position the underline below text */
  font-size: 4.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

  color: rgb(0, 0, 0);
 
}



/* Bullet List */
.benefits-list {
  list-style-type: disc; /* Standard bullet points */
  text-align: left;
  padding-left: 2rem;
  
  max-width: 750px;
  margin: 4rem auto 4rem;
}

/* Paragraph */
.benefits-list li {
  font-size: 2rem;
  color: #1a1919;
  margin-bottom: 2rem;
}
#why .benefits-list li{
  margin-bottom: 2rem;
  font-size: clamp(1.6rem, 1.2vw + 1rem, 2.0rem);
  line-height: 1.6;
}
#why-us-header{
  font-size: clamp(2.6rem, 3.8vw + .4rem, 4.2rem);
}
/* Call-to-Action Button */
.why-cta-button  {
  display: inline-block;
  background:linear-gradient(135deg,  #e96835, #FCC838);
  color: white;
  padding: 1.2rem 2.5rem;
  font-size: 1.8rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s;
}

.why-why-cta-button:hover {
   background:linear-gradient(135deg,  #e54201, #FCC838);
  transform: scale(1.01);
}


/*  popup contact */



@keyframes popupSlideIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Popup Overlay Styling */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 12, 24, 0.68);
    backdrop-filter: blur(8px);
    display: none; 
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow-y: auto;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.popup.show {
    display: flex; /* Show the popup */
    opacity: 1;
    z-index: 1000;
}

/* Right Container - Form and Details */
.popup-form-container {
    flex: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    padding: 3rem 2.2rem;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 20px 20px;
    position: relative; /* Needed for the close button */
}

/* Popup Content */
.contact-popup-content {
    display: flex;
    flex-direction: column;
    width: min(90vw, 960px);
    max-width: 960px; /* Maximum width */
    background: #fff; /* White background */
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25); /* Modern shadow */
    overflow: visible;
    animation: popupSlideIn 0.3s ease-in-out;
    position: relative;
}

/* Text fonts and styiling */
.popup-image-container h3, .popup-form-container h2,
.popup-form-container h3, 
.radio-group label {
    font-family: 'Montserrat', sans-serif; /* Modern and bold for headings */
    font-weight: 600; /* Semi-bold for emphasis */
   
}




/* Inputs and Textarea */
.popup-form input, .popup-form textarea {
    width: 95%;
    padding: 1.2rem 1.4rem;
    margin: 1rem  0 0 1rem ;
    border: 1px solid #dfe3eb;
    border-radius: 12px;
    font-size: 1.6rem;
    background: #f6f8fb; /* Light background */
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.popup-form input:focus, .popup-form textarea:focus {
    border-color: #007BFF; /* Modern blue border */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.popup-brand-bar {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 1.2rem 1.6rem;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(135deg, #0f172a, #2c2f3d);
    color: #f5f7fb;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.popup-brand-logo {
    width: 90px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    margin: 0;
}

.popup-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
    align-items: flex-start;
}

.popup-brand-title {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    color: #ffffff;
}

.popup-brand-tagline {
    font-size: 1.4rem;
    color: #d6e3ff;
}

/* Textarea Specific */
.popup-form textarea {
    min-height: 140px;
    resize: none;
    background: #f0f4f8;
}

.popup-form-container .popup-form {
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    padding: 22 ;
    margin-top: 1.5rem;
}

.popup-form-container .popup-form::-webkit-scrollbar {
    width: 6px;
}

.popup-form-container .popup-form::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.35);
    border-radius: 999px;
}

.popup-form-container .popup-form::-webkit-scrollbar-track {
    background: transparent;
}

.popup-form-container .popup-form input,
.popup-form-container .popup-form textarea,
.popup-form-container .popup-form button,
.popup-form-container .popup-form .purpose-dropdown,
.popup-form-container .popup-form .purpose-select-wrapper,
.popup-form-container .popup-form .purpose-select {
    width: 100%;
    margin-left: 0;
}

.popup-form-container .popup-form input,
.popup-form-container .popup-form textarea,
.popup-form-container .popup-form button {
    margin-right: 0;
}

.popup-form-container .popup-form button {
    margin-left: 0;
}

/* Radio Buttons */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin: 1rem 0 0rem 0;
}
.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    flex: 1 1 calc(50% - 1.2rem);
    justify-content: flex-start;
    background: #f8fafc;
    border: 1px solid #e1e8f5;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    color: #0f172a;
    transition: border 0.2s ease, background 0.2s ease;
}
.radio-group input[type="radio"] {
    margin: 0;
    padding: 0;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    accent-color: #f48b2f;
}

.radio-group label:hover {
    border-color: #f8a24a;
    background: #fff8f1;
}

.purpose-select-wrapper {
  display: none;
  width: 100%;
  margin-top: 1rem;
  position: relative;
}

.purpose-select {
  width: 100%;
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1px solid #d7dbe7;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  color: #1f2933;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.popup-form .purpose-select-wrapper {
  margin: 1rem 0 0 0;
}

.popup-form .purpose-select {
  width: 95%;
  margin: 0 0 0 1rem;
}

.purpose-select:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.purpose-select--native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.purpose-dropdown {
  position: relative;
  width: 100%;
  margin-top: 0.8rem;
}

.popup-form .purpose-dropdown {
  width: 95%;
  margin: 0.8rem 0 0 1rem;
}

.purpose-dropdown-toggle {
  width: 100%;
  border: 1px solid #d7dbe7;
  border-radius: 12px;
  background: #f8fafc;
  padding: 1.2rem 1.4rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  color: #1f2933;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.purpose-dropdown-toggle:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.25);
  outline-offset: 2px;
}

.purpose-dropdown-label {
  flex: 1;
  text-align: left;
}

.purpose-dropdown-chevron {
  width: 1.2rem;
  height: 1.2rem;
  border-right: 2px solid #1f2933;
  border-bottom: 2px solid #1f2933;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.purpose-dropdown.open .purpose-dropdown-chevron {
  transform: rotate(-135deg);
}

.purpose-dropdown-options {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  position: absolute;
  left: 0;
  top: calc(100% + 0.6rem);
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.15);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 15;
  max-height: 230px;
  overflow-y: auto;
}

.purpose-dropdown.open .purpose-dropdown-options {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.purpose-dropdown-option {
  padding: 1rem 1.6rem;
  font-size: 1.55rem;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.purpose-dropdown-option:hover {
  background: #f5f7fb;
}

.purpose-dropdown-option.is-selected {
  background: #fff2e5;
  color: #c05621;
  font-weight: 600;
}

.purpose-dropdown-option.is-placeholder {
  font-size: 1.4rem;
  color: #94a3b8;
  cursor: default;
}

.purpose-dropdown-option.is-placeholder:hover {
  background: transparent;
}

/* 
.radio-group label {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
} */

/* The input label text */
.purpose{
   font-size: clamp(1.4rem, 0.8vw + 1rem, 1.8rem) !important;
}

@media (max-width: 640px) {
    .radio-group label {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .radio-group {
      display: none;
    }
    .purpose-select-wrapper {
      display: block;
    }
}

/*  text styling  */
.popup-form input, .popup-form textarea, 
.popup-form button {
    font-family: 'Roboto', sans-serif; /* Clean and approachable */
    font-size: 1.6rem; /* Standard size */
    color: #333; /* Text color */
}
/* Submit Button */
.popup-form button {
    width: 95%;
    background: linear-gradient(120deg, #0f172a, #26345c);
    color: #fff;
    padding: 1.4rem;
    margin: 2rem 0 0rem 1rem;
    border: none;
    border-radius: 14px;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popup-form button:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 2.4rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}

.close-btn::before {
  content: "×";
  line-height: 1;
}

.close-btn span {
  display: none !important;
}

.close-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
}

/* Left Container - Image */
.popup-image-container {
    flex: 1; /* Take equal space */
    background: radial-gradient(circle at 20% 20%, rgba(252, 205, 94, 0.4), transparent 55%), #111827;
    display: flex;
    min-height: 100%;
    flex-direction: column; /* Stack image and text */
    justify-content: center;
    align-items: center;
    padding: 4.5rem 2.5rem;
    text-align: center; /* Center the name and title */
    gap: 1.4rem;
    border-radius: 20px 0 0 20px;
}

.popup-image-container img {
    width: 16rem;
    height: 16rem;
    border-radius: 1.4rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    object-fit: cover ;
    object-position: top; /* Aligns the top of the image with the container */
    box-shadow: 0 25px 55px rgba(8, 16, 32, 0.45);
}


/* image text */
.popup-image-container h3 {
    font-family: 'Montserrat', sans-serif; /* Modern and bold for headings */
    font-weight: 600; /* Semi-bold for emphasis */
    font-size: 2.6rem;
    color: #fff; /* Slightly darker for better contrast */
    margin:0rem 0 0 0;
     /* text-decoration: underline;
  text-decoration-color: white; */
}


.popup-image-container p {
    font-size: 1.6rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}


/*  text in form */
.popup-form-container h2{
    font-size: clamp(2.6rem, 1vw + 2rem, 3.2rem);
    position: relative;
    margin: 0 auto 2rem auto;
    text-align: center;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.popup-form-container h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px; /* Thickness of the underline */
  background: linear-gradient(120deg, #fdb74d, #f87a33); /* Gradient colors */
 /* animation: fadeColor 3s infinite alternate;  Animation for color fade */
}



/* ✅ Fully Responsive Styling */
@media (max-width: 900px) {
    .contact-popup-content {
        flex-direction: column; /* Stack vertically on smaller screens */
    }

    .popup-image-container {
        width: 100%;
        padding: 3rem 2.5rem;
        border-radius: 20px 20px 0 0;
    }

    .popup-form-container {
        padding: 3rem 2.2rem;
        border-radius: 0 0 20px 20px;
    }

    .close-btn {
        top: 1.2rem;
        right: 1.2rem;
    }
}

@media (max-width: 768px) {
  .why-choose-us h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
  }
  
  .why-choose-us p,
  .benefits-list li {
    margin: 4rem 1rem;
    font-size: 1.7rem;
  }

  .cta-button {
    font-size: 1.6rem;
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .popup-form-container {
       
        min-height: 70vh;
       
    }

.popup-form textarea {
    height: 20rem;
 
}
  .why-choose-us{
    height: 200vh;
  }
  /* .why-choose-us {
    padding: 5rem 1rem;
    
  } */

  .overlay {
    padding: 2.5rem 1.2rem;
  }

  #why-us-header {
    font-size: 2.8rem;
  }
  
  .why-choose-us p,
  .benefits-list li {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  
  .why-us-overlay{
    padding-top: 4rem;
  }
  .why-cta-button {
    font-size: 1.4rem;
   
    padding: 0.9rem 1.8rem;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
  .wave-container h1 {
    font-size: 3rem; /* 30px */
  }

   .bullet-list li {
   margin: 1rem;
    flex: 1 1 100%; /* Full width on small screens */
  }
  .wave-container p {
    font-size: 2.rem; /* 14px */
  }


  .wave-container{
    padding:1rem ;
  }
.bullet-list li{
    padding: 1rem;
  }
 
  .why-content-container {
    flex-direction: column;
  }


  .why-content-container  .text,
  .why-content-container  .image {
    text-align: center;
  }
}

@media (max-width: 500px) { 

/* Close button. take to just an x on smaller screens */
.close-btn span:first-child {
 margin-right: 2rem;
  transform: rotate(45deg);
}

.close-btn span:last-child {
  margin-right: 2rem;
  transform: rotate(-45deg) ;
}
/* Hide the middle span  on hove*/
/* .close-btn span:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
} */

.close-btn span:nth-child(2) {
  opacity: 0;
}

  /*  Put the images in a column */
.contact-popup-content{
    flex-direction: column;
    margin-top: 4rem;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.popup {
    align-items: flex-start;
    padding: 1rem;
}

.popup-form-container {
    padding: 2.2rem 1.6rem 2.4rem;
    border-radius: 0 0 16px 16px;
}

.popup-form-container .popup-form {
    max-height: calc(100vh - 260px);
    padding: 0;
    margin-top: 1rem;
}

.popup-brand-bar {
    padding: 1rem 1.2rem;
}

.close-btn {
    top: 1rem;
    right: 1rem;
}
 .wave-container {
    min-height: auto; /* Ensure small screens allow auto height */
    padding-bottom: 12rem; /* Prevents cut-off */
  }

     .about-section  {

      
margin-top:0px ;
margin-bottom: 10rem;
padding-top: 0;
  }
       .about-section h1 {
margin-top:0px ;
margin-bottom: 1rem;
padding-top: 0;
  }
  .why-choose-us{
    flex: 1;
    min-height: 100vh;
    padding:  10px 0 20px!important;
    overflow-y: auto;
  }

  .why-content{
    margin: 2rem auto;
  }
 .bullet-list li{
    padding: 1rem;
  }
  .bullet-list h3{
    font-size: 2.5rem;
  }
  .services-text{
    font-size: 1.5rem !important;
  } 
 }
 

 /* Services intro */
#services .services-subtitle{
  margin: 0 0 .6rem 0;
  text-align: center;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(2.0rem, 3.6vw + .2rem, 3.2rem);
}
#services .services-intro{
  max-width: 110rem;
  margin: 0 auto 2rem;
  padding: 0 1.6rem;
}
#services .services-text{
  margin: .4rem auto 0;
  max-width: 85ch;
  line-height: 1.65;
  font-size: clamp(1.6rem, 1.2vw + .9rem, 2.0rem);
}

/* List spacing (uses your existing .bullet-list grid) */
#services .bullet-list h3{
  font-size: clamp(2.0rem, 1.4vw + 1rem, 2.6rem);
  margin-bottom: .6rem;
}
#services .bullet-list p{
  font-size: clamp(1.5rem, 1.0vw + 1rem, 1.9rem);
  line-height: 1.6;
}

.footer-note {
  text-align: center;
  font-size: 1.4rem;
  color: #444;
  margin: 4rem 0;
}