.single-image-section {
  position: relative;
  overflow: hidden; /* was hidden */
}

.single-image-section {
  position: relative;
  min-height: 108vh;
  overflow: hidden;
  z-index: 1;
}

/* Make sure the hero image fills the section but doesn't push content down */
.single-image-section img.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Center and pad the hero content (if present) */
.single-image-section > .container-fluid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px; /* adjust for navbar */
  padding-bottom: 100px;
}

.contact-body {
  position: relative;
  background-color: #fff; /* or #fff if you prefer pure white */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: -60px; /* overlap slightly with hero */
  padding: 80px 0;
  z-index: 2;
  overflow: hidden; /* smooth curved edge */
}

/* Optional: smooth transition if the hero has dark image behind */
.contact-body::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, transparent, #f5f8ff 80%);
  z-index: 1;
}
    
    /* Custom class to prevent wrapping on small screens */
    .no-wrap-on-sm {
        display: flex;
        flex-wrap: wrap;
    }
    
    @media (max-width: 767px) {
        .no-wrap-on-sm {
            overflow-x: auto; /* Adds horizontal scrolling if necessary */
        }
    
        .no-wrap-on-sm .col-md-6:nth-of-type(3),
        .no-wrap-on-sm .col-md-6:nth-of-type(4) {
            flex: 0 0 100%; /* Ensures each column takes up full width */
            max-width: 100%; /* Ensures each column takes up full width */
        }
    
        .no-wrap-on-sm .col-md-6:first-of-type, 
        .no-wrap-on-sm .col-md-6:nth-of-type(2) {
            flex: 0 0 50%; /* Ensures each column takes up half the width */
            max-width: 50%; /* Ensures each column takes up half the width */
        }
        
        .no-wrap-on-sm .col-12 {
            flex: 0 0 100%; /* Full width for textarea and button */
            max-width: 100%; /* Full width for textarea and button */
        }
    }
    
    /* General styles */
    .custom-mb-sm.contact-title {
        margin-bottom: 1.5rem;
        margin-left: 10px; 
        margin-bottom:-5px;
    }

    @media (max-width: 767.98px) {
    .row.contact-row {
        margin-left: -40px;
        margin-right: -40px;
    }

    .custom-mb-sm.contact-title {
        margin-bottom: 1.5rem;
        margin-left: 0px; 
        margin-bottom:-5px;
    }
}
    
 
        /* Custom class to prevent wrapping on small screens */
    /* Custom class to prevent wrapping on small screens */
    .no-wrap-on-sm {
        display: flex;
        flex-wrap: wrap;
    }
    
    @media (max-width: 767px) {
        .no-wrap-on-sm {
           
            overflow-x: auto; /* Adds horizontal scrolling if necessary */
        }
    
        .no-wrap-on-sm .col-md-6 {
            flex: 0 0 50%; /* Ensures each column takes up half the width */
            max-width: 50%; /* Ensures each column takes up half the width */
        }
        
        .no-wrap-on-sm .col-12 {
            flex: 0 0 100%; /* Full width for textarea and button */
            max-width: 100%; /* Full width for textarea and button */
        }
    }
    
    

    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
        max-width: 500px;
        text-align: center;
    }
    
    /* Close Button */
    .close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    @media (min-width: 767px) and (max-width: 1100px)  {
    textarea.form-control {
min-height: 280px;
    }
}
    .close-btn:hover,
    .close-btn:focus {
        color: #383835;
        text-decoration: none;
        cursor: pointer;
    }
    
 .bg-light-grey {
    background-color: #EEF2F7;
}


 
/* FAQ Section Styles */
.faq-container {
      margin-top: -60px;
    margin: 0 auto; /* Center the section */
    max-width: 1200px; /* Optional: restrict max width for large screens */
 

}

.faq-container h2 {
    text-align: left;
    margin-bottom: 20px;
}

.faq-container p {
    text-align:left;
    margin-bottom: 40px;
}




.faq-item .question {


}

.faq-item .answer {
 

}

/* Media Queries */
@media (max-width: 1400px) {
    .faq-container {
        padding: 20px; /* Ensure padding on medium screens */
    }
}

@media (max-width: 767px) {
    .faq-container {
        padding: 15px; /* Reduce padding on smaller screens if needed */
    }

    .faq-item {
        border-radius: 5px; /* Adjust border radius for smaller screens */
    }
}

    /* Remove padding from the trial-support-section */

/* General styles for the columns */
.trial-support-section .column {
  flex: 1;
  min-width: 250px;
  margin: 30px; /* Default margin for desktop */
  padding: 30px; /* Default padding for desktop */
}

.trial-support-section .column .image-container {
  width: 100%;
}

.column img.full-width-image {
  width: 100%; /* Ensure the image spans the full width of the container */
  height: auto;
  display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .four-columns {
    flex-direction: column;
    align-items: center;
  }

  .trial-support-section .column {
    width: 100%;
    margin: 10px 0; /* Reduced margin for mobile to decrease the gap */
    padding: 15px; /* Reduced padding for mobile */
  }

  .column img {
    width: 100%;
  }

  .trial-header {
    margin-top: 20px; /* Decrease margin-top for mobile to reduce the gap */
    margin-bottom: -5px; /* Slight adjustment to keep consistent spacing */
  }

  .buttons {
    margin-top: 10px; /* Reduce top margin for mobile */
  }
}

/* Responsive adjustments */
@media (max-width: 990px) and (min-width: 767px) {
 
    .trial-support-section .column {
        width: 100%;
        margin: 10px 0; /* Reduced margin for medium screens */
        padding: 20px; /* Adjusted padding for medium screens */
    }

    .column img {
        width: 100%;
    }

    .trial-header {
        margin-top: 20px; /* Decrease margin-top for medium screens */
        margin-bottom: 10px; /* Adjust margin-bottom for consistency */
    }

    .buttons {
        margin-top: 10px; /* Reduce top margin for medium screens */
    }
}

@media (max-width: 767px) {
  

    .trial-support-section .column {
        width: 100%;
        margin: 10px 0; /* Reduced margin for mobile */
        padding: 15px; /* Reduced padding for mobile */
    }

    .column img {
        width: 100%;
    }

    .trial-header {
        margin-top: 20px; /* Decrease margin-top for mobile */
        margin-bottom: -5px; /* Slight adjustment for spacing */
    }

    .buttons {
        margin-top: 10px; /* Reduce top margin for mobile */
    }
}

@media (max-width: 767.98px) {
 /* desktop row */
.row.contact-icons-row {
  position: relative;
  transform: translateY(-40px);   /* moves both boxes up 20px */
}

/* mobile version, if it has the d-md-none class */
.row.g-4.contact-icons-row.d-md-none {
  position: relative;
  transform: translateY(-40px);
}

}

.faq-section-header h3 {
  margin-top: 0;
  margin-bottom: 0; /* optional */
}