/* ======================================

   MAKA HONIG

   RESPONSIVE DESIGN

====================================== */

/* Laptop */

@media (max-width:1200px){

.hero-left h1{

font-size:60px;

}

.hero-left h2{

font-size:28px;

}

.cards{

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

}

}

/* Tablet */

@media (max-width:992px){

header .container{

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

}


nav{

    display:none;

    width:100%;

}

nav.show-menu{

    display:block;

}

nav ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

    margin-top:20px;

}

nav a{

    width:280px;

    text-align:center;

}

.hero{

padding-top:220px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-left p{

margin:auto;

margin-bottom:35px;

}

.buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-right{

margin-top:40px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}

/* Mobitel */

@media (max-width:768px){

.hero-left h1{

font-size:42px;

}

.hero-left h2{

font-size:24px;

}

.hero-left p{

font-size:17px;

}

.cards{

grid-template-columns:1fr;

}

.card{

padding:30px;

}

.coming-soon h2{

font-size:34px;

}

.coming-soon p{

font-size:17px;

}

.btn{

width:100%;

text-align:center;

}

.buttons{

flex-direction:column;

}

.logo img{

height:50px;

}

}

/* Mali telefoni */

@media (max-width:480px){

.container{

width:94%;

}

.hero{

padding-top:200px;

padding-bottom:80px;

}

.hero-left h1{

font-size:34px;

}

.hero-left h2{

font-size:20px;

}

.hero-left p{

font-size:16px;

line-height:1.6;

}

nav ul{

gap:15px;

font-size:15px;

}

.language button{

padding:8px 14px;

font-size:14px;

}

footer{

padding:50px 0 20px;

}

}
@media (max-width:768px){

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-right img{

    display:block;

    width:90%;

    max-width:460px;

    margin:0 auto;

    transform:none !important;

}

.hero-right img:hover{

    transform:none !important;

}

}
@media (max-width:768px){

.hero-right{

    text-align:center;

}

.hero-right img{

    display:block;

    margin:0 auto;

    max-width:90%;

    transform:none !important;

}

.hero-right img:hover{

    transform:none !important;

}

}