html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-padding, 80px);
}

.container {
    padding-top: 0px;
    
}

 /* carousel styling */

.body{
    scroll-behavior: smooth;
}

.carousel {
    margin-bottom: 20px;
}

.carousel-inner {
    width: 100%;   
}


.carousel-item img {
    margin-top: 40px;
    width: 100%;
    height: 80vh;
    object-fit: cover;
    object-position: center;
}


.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
        rgb(82, 106, 135,1) 0%,
        rgb(82, 106, 135,1) 43%,    
      transparent 68%);
    z-index: 1;
}

/* Base styles */
.carousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 30%;
    left: 0px; /* Adjusted to align the content properly */
    right: 0px; /* Adjusted to align the content properly */
    color: #ffffff; /* White text color for captions */
    text-align: left; /* Default text alignment */
}

.carousel-caption h1, .carousel-caption p, .carousel-caption .btn {
    color: #ffffff; /* White text color for captions */
}

.carousel-caption .btn {
    width: 180px;
    height: 45px;
    margin-right: 20px;
    flex: 1;
    margin-left: 20px;
}

.carousel-caption a.btn {
    margin-top: 15px;
    padding: 5px 0px;
    font-size: 1.2rem;
    white-space: nowrap;
    
}

.carousel-item { 
    transition: opacity 0.5s;
  }
  
.carousel-item.active {
    opacity: 1;
  }
  
.carousel-item:not(.active) {
    opacity: 1;
  }
.carousel-slide {
    transition: transform 0.5s ease-out;
  }
  .continue-button {
    position: relative;
  }
  
  .hint {
    display: block;
    margin-top: 2px; /* adjust this value to position the text at the bottom of the button */
    font-size: 12px;
    color: #ffffff;
    padding-left: 10%;
  }




@media (max-width: 768px) { /* Adjust the breakpoint as needed */
    /* Hide carousel images and controls */
    .carousel-item img,
    .carousel-indicators,
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }

    /* Cover the carousel with a plain background */
    .carousel-item {
        background-color: #1c355e !important; /* Replace with your preferred solid color */
        height: 90vh; /* Adjust the height as necessary */
        display: flex !important; /* Ensure the container is displayed as a flexbox */
        align-items: center; /* Vertically center the text */
        justify-content: center; /* Horizontally center the text */
        transition: none;
        transition: none;
    }

    .carousel-slide{
        transition: none;
    }

    
    /* Remove the linear gradient overlay */
    .carousel-item::before {
        display: none !important;
    }

    /* Styling the text and buttons */
    .carousel-caption {
        position: relative !important; /* Override Bootstrap positioning */
        top: 10%;
        transform: none;
        text-align: center; /* Center text for smaller screens */
        color: white !important; /* Ensure text is visible against the background color */
        display: block; /* Make sure the caption is visible */
        
    }

    .carousel-caption h1{
        font-size: 40px;
        padding-left: 0%;
        padding-right: 20%;
    }
    .carousel-caption p{
        font-size: 18px;
        padding-top:7%;
        padding-right: 30%;
        padding-left: 0%;
        justify-content: center;
        
    }
    .carousel-caption a.btn{
        width: 150px;
        height: 50px;
        padding-top: 5%;
        padding-right: 5%;
        margin-right: 10px;
        flex: 1;
        margin-left: 10px;
    }

    .carousel-caption .btn{
        padding-left: 50px;
    }
    .carousel-caption h1, .carousel-caption p, .carousel-caption .btn {
        color: white !important; /* Ensure all elements have white text */
        margin: 0 auto;
    }

    .carousel {
        background-color: #ffffff !important; /* Ensure entire carousel has a plain background */
    }
}


/* section-3 styling */


.section_3 h4 {
    padding-top: 2%;
    text-align: center;
    font-family: 'Open Sans, Helvetica, Arial, Lucida, sans-serif';
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 10px;
}

.maroon-color {
    color: #c82b3e;
 
}

.section_3 h2 {
    text-align: center;
    font-family: 'DM Serif Display', Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 40px;
    color: #303e50;
    padding-inline: 10%;
}

.img-small {
    max-width: 50px;
    
}

.feature-section {
    background-color: #eef3f7;
    padding: 50px;
    font-weight: 400;
    letter-spacing: normal;
    margin-top: 60px;
    text-align: center;
}

.feature-section .row .col-md-3 h4{
    padding: 0px;
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: #303e50 !important;
    margin-bottom: 10px ;
    /* padding-inline: 30px; */
}
.feature-section .row .col-md-4 h4{
    padding: 0px;
    text-align: center;
    font-family: 'DM Serif Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: #303e50 !important;
  
    /* padding-inline: 30px; */
}


@media (max-width: 480px) {
    #faq p {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px; /* You can adjust the font size if needed */
    }
}


.feature-section .col-md-4 {
    margin: 0px; /* adjust the value to your desired spacing */
}

.mt-4 p{
    padding-top: 30px;
    font-weight: 500;
    font-size: 15px;
    padding-inline: 10px;
}


/* FAQ section */
.my-5 h3{
    font-family: 'DM Serif Display', Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 41px;
    color: #1c355e !important;
    letter-spacing: 0px;
    padding-bottom: 12px;
}

.my-5 h2{
    color: #232323;
}

.my-5 p{
    font-weight: 400;
    font-size: 18px;
    
   
}

mark {
    background-color: #ffffff;
    color: #851f2b;
    font-weight: 600;
}

.accordion_two_section {
    background: #ffffff;
}

.ptb-100 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.accordionTwo .accordion {
    
    margin-bottom: 0;
}

.accordionTwo .card {
    background-color: #ffffff;
    border: #ffffff;
}

.accordionTwo .card-header {
    background: #ffffff;
    padding: 10px;
    padding-bottom: 10px;
}

.accordionTwo .card-header .btn {
    color: #253f6c;
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
    text-decoration: none;
    
    
}

.accordionTwo .card-header .btn.collapsed {
    border-color: #dedfe2;
    background-color: #f4f4f4;
    padding: 20px;
    
}

.accordionTwo .card-body {
    padding: 0px 30px;
    background: #ffffff;
    font-size: 18px;
    padding-bottom: 2%;
       
}

.accordionTwo .card-header .btn:after {
    content: "\2212";
    font-family: 'FontAwesome';
    float: right;
    color: #f4f4f4;
    background: #ffffff;
    border-radius: 60%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 19px;
    border-color: #232323;
    
    
}
.btn-link:focus, .btn-link:hover {
    box-shadow: none;
    outline: none;
  }


.accordionTwo .card-header .btn.collapsed:after {
    content: "\2b";
    color: #fff;
    background: #c82b3e;
    
}

a:link {
    text-decoration: #ffffff;

}


.contact-section p{
    padding: 25px;
   
}

.contact-section h2{
    padding: 30px;
    font-family: 'DM Serif Display', serif;
    color:#303e50;
    font-weight: 600;
}

.contact-section{
    /* background-color: #fbf2e0; */
    padding: 0px;
    font-size: 17px;
    padding: 10px;
    
}

.contact-section .img-custom {
    width: 85px; /* adjust the width to your desired size */
    height: 80px; /* adjust the height to your desired size */
    margin: 10px; /* add some margin for better spacing */
  }
  
   
  .contact-section .col-md-2 {
    flex-basis: 5%; /* adjust the width of each column */
    max-width: 150%; /* adjust the max-width of each column */
    padding-left: 50px;
  }
  
  /* @media (min-width: 820px) and (max-width: 1180px) {
    .contact-section .row .col-lg-6.text-center {
      
      justify-content: center;
    }
    .contact-section .row .col-lg-6.text-center .row {
      justify-content: center;
    }
    .contact-section .row .col-lg-6.text-center .col-lg-4 {
      margin: 0 10px;
    }
  }
  About section styling */
.about-section{
    background-color: #fbf2e0;
    
    
}
.about-section h3{
    padding-top: 50px;
    font-family: 'DM Serif Display', serif;
    color:#303e50;
    font-weight: 600;
    font-size: 29px;
}


.about-section p{
    padding:20px;
    font-size: 18px;
    margin-left: 0px;
    color: #595959!important;
      
}


.about-section .btn{
    border-radius: 15px;
    border-width: 3px !important;
    width: 160px;
    height: 40px;
    margin-bottom: 50px;
    margin-top: 15px;
    font-size: 17px;
    font-weight: 600 !important;
    font-family: 'Open Sans';
    white-space: nowrap;
}


@media (max-width: 768px) {
    .about-section h3 {
        font-size: 2rem;
        padding-top: 20px;
        padding: auto;
    }

    .about-section p {
        font-size: 1rem;
    
    }

    .about-section .btn {
        width: 35%;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .about-section h3 {
        font-size: 2rem;
        padding-top: 35px;
        
    }

    .about-section p {
        font-size: 1rem;
    }

    .about-section .btn {
        width: 50%;
        height: 45px;
    }
    
.footer-section .img{
    text-align: center;
}
}

/* Footer scetion */

.footer-section{
    background-color: #0c113f;
    padding-bottom: 100px;
}

.footer-section p{
    padding: 45px;
    color: #fff;
}

.modal-body {
    margin: 20px; 
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 700;
}
  
.modal-body h5 {
    margin-bottom: 20px;
    font-weight: 700;
}
  
.modal-body .btn {
    font-size: 18px;
    padding: 6px 12px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.modal-body .form-row{
    padding: 10px;
}
.btn-sm {
    width: 200px;
    margin: 5px;
}


/* Styles for the modal on mobile devices */
@media (max-width: 768px) {
    /* Adjust modal body padding */
    .modal-body {
        padding: 5px; 
        margin: 0; 
        
    }

    /* Ensure continue button is at the top */
    .modal-body .btn-primary {
        width: 100%;
        font-size: 16px;
        padding: 10px;
        margin-bottom: 25px; /* Space between continue button and form */
    }


   
    .modal-body h5 {
        font-size: 20px;
        margin-top: 10%;
        margin-bottom: 15px; 
        text-align: center;
    }

    /* Input fields in individual rows */
    .modal-body .form-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 0px;
    }

    .modal-body .form-row .col-md-6,
    .modal-body .form-row .col-md-12 {
        flex: 1;
        max-width: 100%; 
        padding: 6px 5px; /* Adjust padding for better spacing */
    }

    /* Error message */
    #errorMessage {
        font-size: 14px;
        padding: 10px;
        margin: 10px 0;
    }
    
}



.visually-hidden {
    position: absolute;
    top: -40px; /* Hide it off-screen */
    left: 0;
    transform: translateY(-120%);
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Show skip links only when focused */
.visually-hidden:focus {
    position: static; /* Bring it into view */
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    transform: none;
    background: #007BFF; /* Optional: Add a background color */
    color: white; /* Optional: Ensure contrast */
    padding: 10px;
    text-decoration: none;
    z-index: 1000; /* Ensure visibility above other elements */
    outline: 2px solid #0056b3; /* Optional: Add focus outline */
}

/* Ensure all interactive elements have a visible focus outline */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007BFF; /* Blue outline */
    outline-offset: 2px; /* Creates space around the outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Optional: adds glow */
}

/* For custom interactive elements */
[tabindex]:focus {
    outline: 3px dashed #FFA500; /* Orange dashed outline */
}