/*======================================
        RESPONSIVE DESIGN
======================================*/

@media(max-width:1200px){

.hero{

    flex-direction:column;

    text-align:center;

}

.hero-left{

    width:100%;

}

.hero-right{

    width:100%;

    margin-top:60px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.footer-container{

    grid-template-columns:1fr;

}

}



@media(max-width:768px){

.navbar{

    flex-direction:column;

    gap:25px;

}

nav ul{

    flex-direction:column;

    text-align:center;

    gap:20px;

}

.hero{

    padding:60px 30px;

}

.hero h1{

    font-size:52px;

}

.hero p{

    font-size:18px;

}

.buttons{

    flex-direction:column;

}

.cards{

    grid-template-columns:1fr;

}

footer{

    padding:60px 30px;

}

}



@media(max-width:500px){

.hero h1{

    font-size:40px;

}

.badge{

    font-size:12px;

}

.logo img{

    width:130px;

}

.footer-logo{

    width:140px;

}

}