/*==========================================================
YAYA SPORTS
Responsive
==========================================================*/


/*==========================================================
1600px
==========================================================*/

@media (max-width:1600px){

.hero{

    max-width:900px;

}

.hero h1{

    font-size:90px;

}

}


/*==========================================================
1400px
==========================================================*/

@media (max-width:1400px){

.hero{

    width:90%;

}

.hero h1{

    font-size:80px;

}



}


/*==========================================================
1200px
==========================================================*/

@media (max-width:1200px){

.hero{

    padding:60px 40px;

}

.hero h1{

    font-size:72px;

}

.hero p{

    font-size:18px;

}

.logo{

    width:250px;

}

}


/*==========================================================
992px
==========================================================*/

@media (max-width:992px){

.hero{

    padding:50px 30px;

}

.hero h1{

    font-size:64px;

}

.company{

    letter-spacing:6px;

}



}


/*==========================================================
768px
==========================================================*/

@media (max-width:768px){

body{

    overflow:auto;

}

main{

    padding:20px;

}

.hero{

    width:100%;

    padding:45px 25px;

}

.logo{

    width:250px;

}

.company{

    font-size:15px;

    letter-spacing:5px;

}

.hero h1{

    font-size:54px;

}

.hero p{

    font-size:17px;

    line-height:1.8;

}



.btn{

    width:220px;

    height:58px;

}

.social{

    gap:14px;

}

.social a{

    width:50px;

    height:50px;

    font-size:18px;

}

footer{

    position:relative;

    margin-top:35px;

    bottom:auto;

    left:auto;

    transform:none;

}

}


/*==========================================================
576px
==========================================================*/

@media (max-width:576px){

.hero{

    border-radius:25px;

    padding:35px 18px;

}

.logo{

    width:250px;

}

.hero h1{

    font-size:44px;

    letter-spacing:2px;

}

.company{

    font-size:13px;

    letter-spacing:3px;

}

.hero p{

    font-size:15px;

}



.btn{

    width:100%;

}

.social{

    flex-wrap:wrap;

}

}


/*==========================================================
400px
==========================================================*/

@media (max-width:400px){

.hero{

    padding:30px 15px;

}

.logo{

    width:200px;

}

.hero h1{

    font-size:36px;

}

.company{

    font-size:12px;

}

.hero p{

    font-size:14px;

}



footer{

    font-size:12px;

}

}