@media screen and (max-width: 576px) {
    nav{
        flex-direction: column;
        gap: 40px;
    }
    .banner-image img{
        width: 90%;
    }
    .banner{
        width: 100%;
    }
    .banner p{
        padding-left: 10px;
        padding-right: 10px;
    }
    .banner h1{
        font-size: 50px;
    }
    .features{
        flex-direction: column;
        width: 100%;
    }
    .features-sec-left{
        grid-template-columns: repeat(1, 1fr);
    }
    .features-sec-right{
        text-align: center;
        padding: 40px 10px 0px;
        width: 100%;
    }
    .facts-sec-up-content{
        width: 100%;
        text-align: center;
        padding: 0px 10px 0px;
    }
    .facts-box{
        grid-template-columns: repeat(1, auto);
        justify-content: center;
        gap: 50px;
    }
    .sponsor-upeer-content{
        width: 100%;
    }
    .sponsor-section{
        width: 100%;
    }
    .sponsors-images{
        grid-template-columns: repeat(1, auto);
        gap: 60px;
    }
    .footer-p{
        text-align: center;
        padding: 0 40px;
    }
    .experience-sec{
        flex-direction: column;
    }
    .experience-left-content{
        margin-right: 0px;
        text-align: center;
        width: 100%;
    }
    .ex-p-m{
        padding: 0 10px;
    }
    .experience-right-content{
        width: 100%;
        margin-top: 80px;
        text-align: center;
    }
    .experience-right-content img{
        width: 90%;
    }
    .ex-position{
        width: 250px;
        height: 150px;
        margin: -76px auto;
    }
    .ex-position h1{
        font-size: 40px;
    }
    .ex-position p{
        font-size: 20px;
    }
    .ex-box{
        width: 100%;
        
    }
    footer{
        margin-bottom: 116px;
    }
}