html,body {
    overflow-x: hidden;
}


.banner {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}

@media (max-width: 767px) {
    .banner {
        min-height: 90vh;
    }
}




.hero {
    position: relative;
   
    background: #000;
    color: white;
}
.hero::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -5%;
    width: 110%;
    height: 100px;
    
    border-top: 9px solid red;
    background: radial-gradient(70% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
    
    border-radius: 100% 100% 0 0;
}

@media (max-width: 767px) {
    .hero::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -5%;
    
    width: 110%;
    height: 35px;
    
    border-top: 9px solid rgb(186, 33, 33);
    background: radial-gradient(70% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
    
    border-radius: 50% 50% 0 0;
}
}


.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}




.modalimg{
    width: 100%;
    height: 300px;
}