/* navigation bar */
body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #EFF0F5;
}

body{
    min-height: 100vh;
    max-width: 100vw;
    line-height: 1.4;
    /* padding: 20px 40px; */
    background-color: #EFF0F5;
    color: #0E1B4D;
    overflow-x: hidden;
}

html,body{
    height: 100%;
    width: 100%;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 10px 5%; */
    position: sticky;
    top: 0;
    background-color: #EFF0F5;
    border-bottom: solid 6px #850616;
}

.logo{
    cursor: pointer;
    /* margin-left: -600px; */
}

nav{
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    height: 70px;
    list-style: none;
}

nav ul{
    display: flex;
    gap: 30px;
    align-items: center;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
}

nav ul li a{
    transition: all 0.3s ease 0s;
}

nav li a:hover{
    color: #850616
}

.nav li, a, button{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #0E1B4D;
    text-decoration: none;
}

.menu-icon{
    display: none;
}

.menu-icon i{
    color: black;
    font-size: 30px;
}

/* .responsive-button {
    font-size: 23px;
    background-color: #850616;
    color: white;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding: 10px 20px; */
    /* max-width: 100%; Make button take up the width of its container
    box-sizing: border-box; Prevent button from overflowing
    width: auto; Allow button width to be flexible */
/* } */

/* Media query for mobile devices */
/* @media (max-width: 600px) {
    .responsive-button {
        font-size: 18px;  /* Make text smaller on mobile */
        /* padding: 8px 16px; Adjust padding for mobile */
    /* }
} */

/* button{
    margin-left: 20px;
    padding: 9px 25px;
    background-color: rgba(#0E1B4D);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: rgba(#4a5ca3);

} */

/* body */

.banner{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    /* border-top: solid 10px;
    border-color: #850616; */
    width: 100%; /* Ensure it takes full width */
    height: auto; /* Maintain aspect ratio */
    padding: 0; /* Remove any padding */
    
}

.slogan{
    text-align: center;
    color: #0E1B4D;
    font-size: 55px;
}

label{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 650;
    font-size: 17px;
    color:#850616;
}

#faq{
    margin: 100px;
    width: 600px;
    box-sizing: border-box;
    margin-top: 35px;
}

#faq h2{
    color:#0E1B4D;
    text-align: center;
}

#faq li{
    list-style: none;
    width: 100%;
    margin-bottom: 10px;
    background:white;
    padding: 10px;
    border-radius: 4px;
    color:#0E1B4D;
}

#faq li label{
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#faq li label span{
    transform: rotate(90deg);
    font-size: 20px;
    color:#0E1B4D;
}

#faq label + input[type="radio"]{
    display: none;
}

#faq .answer{
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5sec;
    font-size: 16px;
}

#faq label + input[type="radio"]:checked + .answer{
    max-height: 400px;
}

.mid{
    display: flex;
    margin-top: 0;
    justify-content: center;
}

/* .mid img{
    margin-top: 100px;
} */

.maps{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    padding: 10px 5%;
}

.maps h2{
    color:#0E1B4D;
    text-align: center;
}

.maps iframe{
    border-radius: 15px;

}

#subtext{
    text-align: center;
    color:#850616;
    padding: 0;
    margin-top: 0%;
}

.reviews{
    /* align-items: center; */
    padding: 10px 5%;
}

.reviewcontainer{
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
    align-items: center;
    margin-left: -40px;
}

.testimonial{
    width: 365px;
    height: 351px;
    border-radius: 15px;
    margin-bottom: 45px;
    /* border: solid 2px #850616; */
}

.secondvideo{
    /* align-items: center; */
    margin-top: -100px;
}

footer{
    display: flex;
    justify-content:center;
    align-items: center;
    margin-right: 40px;
    /* padding: 8px; */
    /* position: sticky; */
    bottom: 10px;
    /* background-color: #EFF0F5; */
    /* border-top: solid 6px #0E1B4D; */
    /* border-bottom: solid 6px #0E1B4D; */
}

/* footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    position: sticky;
    top: 0;
    background-color:#132469;
    border-bottom: solid 12px #850616;
    color: #EFF0F5;
    text-align: center;
}

.subscribe{
    text-align: center;
    color:#EFF0F5;
    font-size: 55px;
}

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

.reviews h2{
    color: #0E1B4D;
} */

h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h3{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h4{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


/* for screen types: */

/* Mobile Styles */

@media (max-width:768px) {
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        text-align: center;
        background: #EFF0F5;
        gap: 0;
        overflow: hidden; 
    }
    nav ul li{
        padding: 20px;
        padding-top: 10px;
        justify-content: center;
        display: block;
        text-align: center;
    }
    .menu-icon{
        display: block;
    }
    #menuList{
        transition: all 0.5s;
    }
}

@media (max-width: 768px) {
   
    .slogan {
        font-size: 37px; /* Adjust slogan font size */
    }

    #faq {
        margin: 20px; /* Adjust FAQ margins */
        width: auto; /* Allow auto width */
    }

    .reviewcontainer {
        grid-template-columns: 1fr; /* Stack reviews */
    }

    .testimonial {
        width: 100%; /* Full width for testimonials */

    }

    /* button {
        width: 100%; Full width buttons
        margin-top: 10px; Space above buttons
    } */

    .maps {
        flex-direction: column; /* Stack maps */
        align-items: center; /* Center align */
    }

    .maps iframe {
        width: 100%; /* Responsive iframe */
        height: auto; /* Adjust height */
    }
}

@media (max-width: 480px) {
    .slogan {
        font-size: 28px; /* Further reduce slogan size */
    }

    #faq li {
        padding: 15px; /* Increase FAQ item padding */
    }

    label {
        font-size: 15px; /* Reduce label font size */
    }

    /* button {
        font-size: 16px; Adjust button font size
        padding: 10px; Adjust button padding
    } */
}

@media (max-width: 768px) {
    .banner {
        /* Additional styles if needed */
        height: 175px;
        /* width: auto; */
        /* object-fit: cover; Ensures the image covers the area */
        /* object-position: -667px; Default to center */
        width: 100%;
    }
}

@media (max-width: 768px) {
    .mid {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center align items */
        width: 100%; /* Full width */
        margin: 0; /* Remove default margins */
        margin-top: -70px;
    }

    #faq {
        margin: 20px 0; /* Margin for spacing on mobile */
        width: 90%; /* Full width on mobile for better spacing */
        max-width: 600px; /* Keep max-width for readability */
        margin-left: -67px;
    }

    .my-video {
        width: 90%; /* Full width on mobile */
        height: auto; /* Maintain aspect ratio */
        margin-top: -40px; /* Space above the video */
    }

    #faq h2 {
        margin-top: 20px; /* Space above the heading */
        margin-left: 35px;
    }
}

@media (max-width: 768px) {
.video {
    width: 90%; /* Full width on mobile */
    height: auto; /* Maintain aspect ratio */
}
}

/* .video{
    display: flex;
    margin-top: 0;
    justify-content: center;
} */

form{
    /* padding: 10px 30px; */
    display: flex;
    align-items: center;
    justify-content:center;
    /* position: relative; */
    /* padding-right: 40px; */
    height: 70px;
    list-style: none;
}

form ul{
    display: flex;
    gap: 30px;
    align-items: center;
    margin-left: -40px
}

form ul li{
    list-style-type: none;
    display: inline-block;
}

form ul li a{
    transition: all 0.3s ease 0s;
}

  /* button */
  .btn {
    /* margin: 100px; */
    padding: 15px 40px;
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:#850616;
    left: 0;
    top: 0;
    border-radius: 10px;
  }
  /* glow */
  .btn::before {
    content: "";
    background: linear-gradient(
      45deg,
      #FF0000, #FF7300, #FFFB00, #48FF00,
      #00FFD5, #002BFF, #FF00C8, #FF0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height:  calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
  }
  
  @keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
  }
  
  /* hover */
  .btn:hover::before {
    opacity: 1;
  }
  
  .btn:active:after {
    background: transparent;
  }
  
  .btn:active {
    color: #000;
    font-weight: bold;
  }