* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
.phone-number {
    font-family: Arial, sans-serif; 
}
.phone-number1{
    display: none;
}      
body{
    overflow-x:hidden;
}



html {
    scroll-behavior: smooth;
}


.logo {
    width: 180px; 
}

.navbar {
    padding: 1rem 0;
    height: 20vh;
}

.navbar-nav {
    gap: 15px;
}

.navbar-nav .nav-link {
    color: black;
    font-weight: 500;
}

.rqst-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 40px;
    font-weight: bold;
    padding: 20px;
    
}

.hero{
    height: 90vh;
    background-image: url("../images/sf-slider-1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    margin-top: 0px; 
    /* background-color: #f8f9fa; */
    display: flex;
   
}

.scaffolding-coverage-list i{
    font-weight:bolder;
    font-size: 18px;
}
.text-box{
    display: flex;
    max-width: auto;
    text-align: left;
    margin-right: 50%;
    align-items: center;
    flex-direction: column;
    height: auto;
    /* background-color: red; */
    justify-content: center;
    
}

.title {
    font-size: 3.5rem;
    font-weight: bold;
}

.highlight {
    color: #ebc808;
}

.subtitle {
    font-size: 1.25rem;
    margin-top: 15px;
}

.lead {
    font-size: small;
}

.container-frame {
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.image-frame {
    height: 350px;
    width: 350px;
    border: 10px solid #ebc808;
    display: flex;
    align-items: center;
}

.image-frame img {
    width: 100%;
    margin-left: -20%;
}

.custom-hr {
    margin-left: 34%;
    width: 30%;
    border-top: 6px solid #ffd901af;
    opacity: 0.75;
}

.card-container {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 2em;
    margin-left: 16%;
}

.card {
    width: 350px;
    height: 200px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 3px #ebc808;
}

.card-body {
    padding: 15px;
}

.card-img {
    width: 50px;
    height: 50px;
    margin: 10px 0;
}

.container-q {
    margin-top: 10%;
    background: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 10px;
}

.question {
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.answer {
    display: none;
    padding: 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
    margin-top: 5px;
    background: #e9ecef;
}

.container-toll {
    position: relative;
    height: 40vh;
    background-image: url('../images/portrait-of-successful-business-team-working-in-office-1024x683.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    display: grid;
    align-items: center;
    padding: 20px;
}
.container-toll i{
    font-size: 3.5rem;
}

.container-toll::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: grid;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.container-toll > * {
    position: relative;
    z-index: 2;
}

.container-feedback {
    height: 60vh;
    padding: 20px;
}
.quote{
    margin-right: 20%;
    position: fixed;
}



    .rotate-button{
    position: fixed;
    margin-left: 100%;
    
    
    width: 50px; 
    height: 200px; /* Adjust height as needed */
     /* Adjust position if necessary */
    display: inline-block; /* Ensures the button behaves like a block element */
    writing-mode: vertical-rl; /* Rotates the text to read vertically */
    text-align: center; /* Centers the text */
    padding: 20px;
    display: flex;
    align-items: center;
    background-color: #ebc808;
    color: black;
    border-radius: 6px;
    z-index: 3;
    margin-top: -13%;
      
    }
    .scroll {
        opacity: 0; /* Start invisible */
        transform: translateX(-100px); /* Start position to the left */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
        
        
        
        
    }
    
    .scroll.animate {
            padding-left: 118px !important;
        opacity: 1; /* Fully visible */
        transform: translateX(0); /* Slide to original position */
    }
    
   

    .slide-in {
        animation: slideInRight 1s ease-out;
        }
        .scrollc {
            opacity: 0; /* Start invisible */
            transform: translateY(100px); /* Start position below the viewport */
            transition: opacity 0.5s ease-out, transform 0.5s ease-out; 
        }
        
        .scrollc.animate {
            opacity: 1; /* Fully visible */
            transform: translateY(0); /* Slide to original position */
        }


        
.main{
    height: 100vh;
    width: 100%;
    background-image: url('../images/ofc.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.msg-box{
    margin-top: 30%;
    height: 400px;
    width: 800px;
    text-align: center;
    color: #e9ecef;
    z-index: 1;
}
.main{
    background-color: rgba(0, 0, 0, 0.8);
    display: grid;
    align-items: center;
    justify-content: center;
    
}
/* Center the form and make it responsive */
.form-cont{
    height: 100vh;
    width: 100%;
    background-color: red;
}
.container-form {
    z-index:1 !important;
   
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
    padding: 0 15px;
    
}

.form-container {
    width: 100%;
    max-width: 1150px; /* Maximum width of the form */
    border: 2px solid black; /* Black border around the form */
    padding: 20px;
    border-radius: 10px; /* Optional: rounded corners */
    background-color:lightgray; /* Light background color */
}

/* Optional: Add space between the header and the form */
h1 {
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: center;
}

/* Style for the form elements */
.form-label {
    font-weight: bold;
}

.form-control, .form-select {
    border-radius: 5px;
}

/* Button style */
.btn {
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2rem;
}


.text-center {
    text-align: center;
}


.row {
    margin-bottom: 15px;
}

.choose {
    position: relative;
    width: 100%; 
    height: 100vh; /* Adjust to fit your container */
    overflow: hidden; /* To keep the rotated image within bounds */
}

.choose::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 6%;
    right: 10%;
    width: 100%;
    height: 70vh;
    background-image: url('../images/dotted.png');
    background-size: contain;
    background-repeat: repeat;
    background-position: center;
    transform: rotate(-50deg); 
    z-index: -1;
    filter: blur(6px) grayscale(70%) brightness(100%);
}
.cont{
    width: 50%;
    
}


@media (max-width: 1024px) {
    .text-box {
        margin-right: 0;
        text-align: center;
        padding: 20px;
    }

    .title {
        font-size: 2.5rem;
    }

    .image-frame {
        height: 250px;
        width: 250px;
    }

    .custom-hr {
        margin-left: 25%;
        width: 50%;
    }

    .card-container {
        justify-content: center;
       
    }

    .hero {
        height: 80vh;
        margin-top: 0;
    }
}
.heading {
    margin-top: 20%;
    color: #333;
}

.coverage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    color: black;
    font-size: 1rem;
}

.list-item p {
    margin: 0 0 0 0.5rem;
}

.highlight-icon {
    color: #ebc808;
    font-weight: bolder;
    font-size: 1.25rem;
    
}

/* Default styles for scaffolding section */

.scaffolding-container li{
    color: #333;
    /*font-family: Arial, Helvetica, sans-serif;*/
    /* background-color: red; */

}

.scaffolding-heading {
    font-size: 1.5rem;
    color: black;
    margin-bottom: 1.5rem;
}

.scaffolding-coverage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scaffolding-list-item {
    display: flex;
    align-items: center; /* Align icon and text on the same line */
    margin-bottom: 1rem;
    font-size: 1rem;
    color: black;
}

.scaffolding-list-item p {
    margin: 0 0 0 0.5rem; /* Space between icon and text */
    flex: 1; /* Allow text to take remaining space */
}

.scaffolding-icon {
    color: #ebc808;
    font-weight: bolder;
    font-size: 1rem;
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Responsive styles */
@media (max-width: 768px) {
    .scaffolding-container {
        padding: 0 1rem;
    }

    .scaffolding-heading {
        font-size: 1.25rem;
        text-align: center;
    }

    .scaffolding-list-item {
        font-size: 0.95rem;
    }

    .scaffolding-icon {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .scaffolding-container {
        padding: 0 0.5rem;
    }
    .scaffolding-list-item{
     align-items: start;
     margin-top:2;
    }
   

    .scaffolding-heading {
        font-size: 1.1rem;
        text-align: center;
    }

    .scaffolding-list-item {
        flex-direction: row;
        align-items: flex-start;
        font-size: 1.2rem;
    }

    .scaffolding-list-item p {
        margin-top: 0.5rem;
    }

    .scaffolding-icon {
        font-size: 0.9rem;
        margin-right: 0.5rem;
    }
}



/* Responsive Design for Mobile Devices */
@media (max-width: 550px) {
    .title {
        font-size: 2rem;
    }
     .scroll.animate{
         padding-left:26px !important;
         
     }
    .phone-number1{
        display: block;
        font-family: Arial, Helvetica, sans-serif;
    }  

    .hero {
        background-size: cover;
        height: 70vh;
    }

    .rqst-box {

        display: inline-block;
    
        margin-top: 15px;
        align-items: center;
        display: flex;
       justify-content: center;
       text-align: center;
    }

    .image-frame {
        height: 300px;
        width: 300px;
    }

    .card {
        width: 90%;
        height: auto;
    }

    .container-frame,
    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .custom-hr {
        margin-left: 10%;
        width: 80%;
    }
    .container-form{
        margin-top: 20%;
    }
    .choose{
       
       height: auto';
    }
    
}



/* Extra Small Devices */
@media (max-width: 576px) {
    #form{
        margin-top: -2% !important;
    }

    .title {
        font-size: 1.5rem;
    }
    .choose{
        height: auto;
    }
    

    .subtitle,
    .lead {
        font-size: smaller;
    }

    .image-frame {
       
       
        height: 250px;
        width: 250px;
    }

    .card {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .navbar-nav {
        flex-direction: column;
        gap: 10px;
    }

    .container-toll {
        height: 30vh;
    }

    .container-feedback {
        height: auto;
        padding: 10px;
    }
    .container-frame{
        height: auto;
    }
}
@media (max-width: 768px) {
    .form-label {
        font-size: 0.9rem;
    }
    .container .row {
        margin: 0;
    }
    .container .col-md-8, .container .col-lg-6, .container .col-sm-12 {
        padding: 1rem;
        background-color: red;
    }
    .choosse{
        height: auto;
    }
}

/* Initially hide answers */
.answer {
    display: none;
    overflow: hidden;
    max-height: 0;
    padding: 0 10px;
    transition: max-height 0.5s ease, padding 0.3s ease;
    border: 2px solid#ebc808;
    text-decoration: none;
}


.question{
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    background-color: whitesmoke;
   
    /* border: 1px solid #ebc808; */
    margin: 5px 0;
    text-decoration: none;
}

/* Optional: Style for when the question is active */
.question.active {
    background-color: #ebc808;
}

/* Navbar Styling */
.navbar {
    background-color: #ffffff; /* Light background for navbar */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 15vh;
}

.navbar-brand .logo {
    max-width: 150px;
}

.rqst-box {
    background-color: #ebc808;
    color: #333;
}
/* Overlay to dim the background */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it sits above everything else */
  }
  
  /* Loader CSS remains unchanged */
  .loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
  }
  
  @keyframes l3 {
    20% { background-position: 0%   0%, 50%  50%, 100%  50%; }
    40% { background-position: 0% 100%, 50%   0%, 100%  50%; }
    60% { background-position: 0%  50%, 50% 100%, 100%   0%; }
    80% { background-position: 0%  50%, 50%  50%, 100% 100%; }
  }
  
.hero {
    position: relative;
    background-image: url('../images/sf-slider-1.webp'); /* Replace with actual image path */
    background-size: cover;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: left;
    color: white;
    padding-top: 5rem; /* Adjust top padding if navbar overlaps */
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 /* Dark overlay for better text contrast */
    z-index: 1;
}

.text-box {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    text-align: left; /* Align text to the left */
    max-width: 50%; /* Limit the text box width */
    padding-left: 2rem; /* Spacing from the left edge */
    /* background-color: red; */
    margin-left: 0;
   top: 30%;
}

.title {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.subtitle,
    .lead {
        font-size: smaller;
    }

.highlight {
    color: #ebc808;
     /* Yellow color for emphasis */
     margin-left: -67px;
    
     
}

.subtitle {
    width: 60%;
    font-size: 1.5rem;
    /*font-family: 'Times New Roman', Times, serif;*/
    font-weight: bold;
    margin-bottom: 2.5rem;
    /* background-color: red; */
    margin-right: -50px;
}

.rotate-button {
    position:absolute;
    padding: 0.75rem 2rem;
    background-color: #ebc808;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    color: black;
    transition: transform 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    margin-right: 60px;
    position-area: y-end
}



.quote-link {
    color: black;
    text-decoration: none;
   
}

/* Button on the Right Side */


/* Responsive Adjustments */
@media (max-width: 992px) {
    .text-box {
        max-width: 70%;
        padding-left: 1rem;
    }
    .title {
        font-size: 2.5rem;
    }
    .subtitle {
        font-size: 1.25rem;
    }
    .rotate-button {
        padding: 0.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 60vh;
        padding-top: 3rem;
    }
    .text-box {
        max-width: 80%;
    }
    .title {
        font-size: 2rem;
    }
    .subtitle {
        font-size: 1rem;
    }
    .rotate-button {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 576px) {
    .hero {
        height: 50vh;
        padding-top: 2rem;
    }
    .rqst-box{
        display:none;
    }
    .title {
        font-size: 1.75rem;
        margin-left: -35%;
    }
    .highlight {
        font-size: 1.75rem;
        margin-left: -20%;
    }
    .subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;margin-left: -50%;
    }
    .rotate-button {
        padding: 0.5rem 0.75rem;
    }
}



.container {
    max-width: 800px; 
    margin: 0 auto; 
}

.text-sm {
   
    margin-bottom: 1rem; /* Space below the heading */
    padding-left: 0; /* Remove padding, align text to the left */
    font-family: 'Arial', sans-serif;
   
}

.para{

    font-size: 1.25rem;
    /* background-color: red; */
    padding-left: 1.5rem; /* Add padding to align the list with the text */
    list-style-type: none; /* Remove default bullet points */
    margin: 0; /* Remove default margin to ensure alignment */
    width: 100%;
    padding: 20px;
    /* background-color: red; */
    text-align: justify;
    /* background-color: red; */
    font-size: 2.5rem;
    
}

.para ul li {
    margin-bottom: 0.5rem; /* Space between list items */
    font-size: 3.5rem; /* Adjust font size for better readability */
    padding-left: 0; /* Remove any additional left padding */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: justify;
    
    
    
}

ul li i {
    margin-right: 0.5rem; /* Space between the check icon and text */
}
.heading {
    font-weight: bold;
    font-size: 2.5rem;
    margin-top: 3rem; /* Adjust as needed for desktop */
    text-align: center; /* Optional: for centered text */
}

/* Medium screens (up to 768px) */
@media (max-width: 768px) {
    .heading {
        position: relative;
        font-size: 2rem;
        margin-top: -7%;
    }
}

/* Small screens (up to 550px) */
@media (max-width: 550px) {
    .heading {
        position:relative;
        font-size: 1.5rem;
       
        line-height: 1.2;
         
    }
    .para{
        font-size:small;
        text-align: justify;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
}

footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #000;
    color: white;
    font-family: 'Courier New', Courier, monospace!important;
}
footer .img-fluid {
    max-width: 500px; /* Increase the logo size */
    margin-bottom: 1rem;
}


footer .container {
    max-width: 1200px;
    margin: 0 auto;
    
    
}

footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
}

footer .col-md-4 {
    flex: 1 1 30%; /* Each column takes up 30% width in medium and larger screens */
    margin-bottom: 2rem;
   
}

footer h5 {
    font-weight: bold;
    color: #fff;
    margin-bottom: 1rem;
    
}

footer p {
    line-height: 1.6;
    color: #bbb;
   
}

footer a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

footer a:hover {
    color: #ebc808;
}

footer i {
    color: #ebc808;
    margin-right: 0.5rem;
}

footer .img-fluid {
   
    margin-bottom: 1rem;
}

footer .fs-6 {
    font-size: 0.875rem;
}

footer .container .col-md-4.mb-4 {
    margin-bottom: 2rem;
}

/* Bottom section for the copyright */
.btm {
    background-color: #ebc808;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.rquest-box{
position: fixed !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-200%) !important;
width: 250px !important;
height: 50px !important;
background-color: #FFCA2C !important;
border: 1px solid black !important;
text-align: center !important;
z-index: 4 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
rotate: 90deg !important;
float: right !important;
margin-left: -70% !important;
font-size: 17px !important;
color: black !important;
padding: 10px !important;
font-weight: 600 !important;
border-bottom-right-radius: 30px !important;
border-bottom-left-radius: 30px !important;
}

.w-100 p{
    font-size: 0.875rem;
    margin-top: 20px;
    
}

/* Responsive adjustments */
@media (max-width: 768px) {
    footer .col-md-4 {
        flex: 1 1 100%; /* Full width on smaller screens */
        margin-bottom: 1rem;
    }

    footer h5 {
        font-size: 1.25rem;
    }

    footer p {
        font-size: 0.875rem;
    }

    .w-100 {
        font-size: 0.75rem;
    }
}
/* Scoped to the 'claims-list' section */
.claims-list {
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.claims-list .row {
    display: flex;
    flex-wrap: wrap;
}

.claims-list .col-12 {
    flex: 1 1 100%;
}

.claims-list .col-md-6 {
    flex: 1 1 50%;
}

.claims-list .text-start {
    text-align: left;
}



.claims-list .lead {
    font-size: 1.1rem;
}

.claims-list .lh-lg {
    line-height: 1.75;
}

.claims-list .fs-4 {
    font-size: 1.5rem;
}

.claims-list .fs-6 {
    font-size: 1rem;
}



@media (max-width: 768px) {
    .claims-list .fs-4 {
        font-size: 1.25rem; /* Smaller font size for smaller screens */
    }

    .claims-list .fs-6 {
        font-size: 0.875rem;
    }

    .claims-list .col-12, .claims-list .col-md-6 {
        flex: 1 1 100%;
    }
}
#tollfree {
    padding: 20px;
}

#tollfree .display-5 h1 {
    font-size: 2rem; /* Large heading for big screens */
}

#tollfree .toll-free-number {
    font-size: 3rem; /* Larger font for phone number */
}

#tollfree .toll-free-icon {
    width: 6%; /* Adjust phone icon size */
    margin-right: 10px; /* Space between icon and number */
}

#tollfree .toll-free-text h1 {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: normal;
}

@media (max-width: 768px) {
    #tollfree .display-5 h1 {
        font-size: 1.5rem; /* Smaller heading for mobile screens */
    }

    #tollfree .toll-free-number {
        font-size: 2rem; /* Smaller font for the phone number on mobile */
    }

    #tollfree .toll-free-icon {
        width: 10%; /* Bigger icon on smaller screens */
    }

    #tollfree .toll-free-text h1 {
        font-size: 1.2rem; /* Slightly smaller text */
    }
}

@media (max-width: 480px) {
    #tollfree .display-5 h1 {
        font-size: 1.25rem; /* Further reduce heading size for very small screens */
    }
    .scroll{
       
        
      
        
    }

    #tollfree .toll-free-number {
        font-size: 1.8rem; /* Smaller number font size */
    }

    #tollfree .toll-free-icon {
        width: 15%; /* Larger icon size for small screens */
    }

    #tollfree .toll-free-text h1 {
        font-size: 1rem; /* Reduce text size even more */
    }
    #tollfree .toll-free  i {
        font-size: 1rem; /* Reduce text size even more */
    }
}
#feedback {
    padding: 40px 0;
}

#feedback h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

#feedback p {
    font-size: 1.2rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto 40px;
}

#feedback .lead {
    font-size: 1rem;
    font-style: italic;
}

#feedback .custom-hr {
    width: 50px;
    border: 2px solid #ebc808;
    margin: 20px auto;
}

#feedback .col-md-6 {
    margin-bottom: 20px;
}

#feedback .col-12 {
    margin-bottom: 20px;
}

#feedback .text-center h6 {
    font-size: 1rem;
    color: #333;
    font-weight: bold;
}

@media (max-width: 768px) {
    #feedback h1 {
        font-size: 2rem;
    }

    #feedback p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    #feedback .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #feedback .col-md-6 {
        max-width: 90%;
    }

    #feedback .lead {
        font-size: 1rem;
    }

    #feedback .custom-hr {
        width: 30px;
    }

    #feedback .text-center h6 {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #feedback h1 {
        font-size: 1.5rem;
    }

    #feedback .lead {
        font-size: 0.9rem;
    }

    #feedback .text-center h6 {
        font-size: 0.8rem;
    }

    #feedback p {
        font-size: 0.9rem;
    }

    #feedback .custom-hr {
        width: 30px;
    }
}

#contact {
    padding: 40px 0;
    background-color: lightgray;
}

#contact h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;

}



.faq .question {
    /* background-color: #fff; */
    padding: 15px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  
   
}

.faq .question:hover {
    background-color: #ebc808;
    color: #fff;
}

.faq .answer {
    display: none;
    padding: 10px 15px;
    font-size: 1rem;
    color: #555;
    /* background-color: #f9f9f9; */
    border: 1px solid #ddd;
    border-radius: 5px;
    max-height: 200px; /* Limit the height of the answer */
    overflow-y: auto; /* Add scroll if content exceeds the height */
    text-align: left;
}

.faq .answer ul {
    padding-left: 20px;
}

.faq .answer li {
    list-style-type: disc;
    margin-bottom: 5px;
    font-size: smaller;
}

@media (max-width: 768px) {
    #contact h1 {
        font-size: 2rem;
    }

    .faq .question {
        font-size: 1rem;
        padding: 10px;
    }

    .faq .answer {
        font-size: 0.9rem;
    }
}

@media (max-width: 550px) {
    #contact h1 {
        font-size: 1.5rem;
    }

    .faq .question {
        font-size: 1rem;
        padding: 8px;
       
    }
    .faq .question{
       width: 150%;
    }

    .faq .answer {
        font-size: 0.8rem;
        width: 150%;
        text-align: start;
    }
}

/* General styles for larger screens */
.container {
    padding: 2rem;
}

.container-form {
    
    padding: 2rem;
}

.scroll h1 {
    font-size: 2rem;
}

/* Media query for tablets (max-width: 768px) */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .col-md-6 {
        width: 100%;
        padding: 0 1rem;
    }

    .container-form {
        width: 100%;
        padding: 1rem;
    }

    .form-container {
        padding: 1rem;
    }

    .scroll h1 {
        font-size: 1.75rem;
    }

    .scroll p.lead {
        font-size: 0.9rem;
    }
}


@media (max-width: 576px) {
    .container {
        padding: 1rem;
    }

    .container-form {
        padding: 1rem;
    }

    h1, .scroll h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    .form-container {
        width: 100%;
        padding: 1rem;
    }

    .mb-3 label,
    .mb-3 input,
    .mb-3 select {
        font-size: 0.9rem;
    }

    /* Adjusting the image size and alignment */
    .image-frame img {
        width: 100%;
        height: auto;
    }

    /* Adjusting the icon and text size */
    .fa-circle-check {
        font-size: 0.8rem;
    }

    .lh-lg p {
        font-size: 0.9rem;
        line-height: 1.2;
    }

   
    
    
    .row, .scroll .row {
        flex-direction: column;
    }

    .col-md-8, .col-lg-6, .col-sm-12 {
        width: 100%;
    }

    /* Adjust button alignment and size */
    .text-center button {
        width: 100%;
        font-size: 1rem;
    }
}
/* General Styles */
#contact {
    background-color: lightgray;
}

.container-contact-fluid {
    display: flex;
    justify-content: center;
    background-color: lightgray;
}

#contact h1 {
    font-size: 1.8rem;
    text-align: center;
    white-space: nowrap; /* Ensures text stays on one line */
    margin-bottom: 1.5rem;
    color: #333;
}

.faq {
    width: 100%;
    max-width: 800px;
  margin: auto;
}

.faq-item {
    margin-bottom: 0.5rem;
    /* background-color: #fff; */
    padding: -4rem;
    border-radius: 5px;
    /* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); */

   
}

.question {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align icon and text */
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    /* background-color: red; */
    font-family: Arial, Helvetica, sans-serif;
    
   
}

.question span {
    flex: 1;
    display: inline-block;
    /*font-family: Arial, Helvetica, sans-serif;*/
   
    
}

.answer {
    display: none;
    padding-top: 0.5rem;
    font-size: 1rem;
    scrollbar-width: none;
}

.answer p,
.answer ul {
    margin: 0;
}

.answer ul {
    list-style: disc;
    padding-left: 20px;
    
}

/* Responsive Styling */
@media (max-width:768px) {
    #contact h1 {
        font-size: 1.5rem;
        padding: 0 1rem;
    }

    .faq-item {
        padding: 0.8rem;
    }

    .question {
        font-size: 0.95rem;
    }

    .answer {
        font-size: 0.9rem;
    }

}
.icons i{
    font-weight:bold;
}


@media (max-width: 576px) {
    #contact h1 {
        font-size: 1.3rem;
        padding: 0 0.5rem;
        white-space: nowrap; /* Ensures it stays on one line */
    }

    .faq-item {
        padding: 0.7rem;
    }

    .question {
        font-size: 0.9rem;
        
    }

    .answer {
        font-size: 0.85rem;
    }
}
@media (max-width: 550px) {
    #contact h1 {
       
    }

    .faq .question {
        font-size: 0.8rem;
       
         padding: 8px;
        width:180%;
        margin-left:-30%;
       
    }

    .faq .answer {
        font-size: 0.8rem;
        overflow-y: hidden;
        max-height: fit-content;
         width:180%;
        margin-left:-30%;
    }
    
} 
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%);
}
.custom-hr {
    border: 1px solid #6c757d;
    width: 25%;
}

/* Position indicators at bottom for mobile */
@media (max-width: 767.98px) {
    .carousel-indicators {
        position: static;
        margin-top: 2rem;
        margin-bottom: 0;
    }
    
    .carousel-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0 5px;
        background-color: #000;
        opacity: 0.5;
    }
    
    .carousel-indicators [data-bs-target].active {
        opacity: 1;
        background-color: #000;
    }
}