/* ===========================================
   Responsive CSS
=========================================== */

/* Laptop */

@media (max-width:1200px){

.hero h1{
font-size:58px;
}

.hero h3{
font-size:26px;
}

.company h2,
.download-app h2{
font-size:38px;
}

.profile-card img{
width:280px;
}

}

/* Tablet */

@media (max-width:992px){

nav{
display:none;
}

.mobile-menu{
display:block;
color:#fff;
}

.hero{
padding:150px 0 80px;
}

.hero-grid{
grid-template-columns:1fr;
text-align:center;
gap:50px;
}

.hero-btn{
justify-content:center;
}

.profile-card{
max-width:500px;
margin:auto;
}

.counter .container{
grid-template-columns:repeat(2,1fr);
}

.company-grid{
grid-template-columns:1fr;
}

.company-card{
text-align:center;
}

.company-card img{
margin:auto;
margin-bottom:20px;
}

}

/* Mobile */

@media (max-width:768px){

.container{
width:92%;
}

header{
padding:15px 0;
}

.logo img{
width:50px;
}

.hero{
padding-top:120px;
}

.top-title{
font-size:12px;
padding:8px 15px;
}

.hero h1{
font-size:38px;
line-height:1.4;
}

.hero h3{
font-size:22px;
}

.hero p{
font-size:16px;
line-height:30px;
}

.hero-btn{
flex-direction:column;
gap:15px;
}

.btn,
.btn-outline{
width:100%;
text-align:center;
padding:15px;
}

.profile-card{
padding:25px;
}

.profile-card img{
width:220px;
}

.profile-card h2{
font-size:28px;
}

.counter{
padding:70px 0;
}

.counter .container{
grid-template-columns:1fr;
gap:20px;
}

.box{
padding:30px;
}

.box h2{
font-size:36px;
}

.company{
padding:80px 0;
}

.company h2{
font-size:32px;
}

.company-card{
padding:25px;
}

.company-card h3{
font-size:24px;
}

.company-card p{
font-size:15px;
line-height:28px;
}

.download-app{
padding:80px 0;
}

.download-app h2{
font-size:30px;
}

.download-app p{
font-size:15px;
line-height:28px;
}

.download-btn{
display:block;
width:100%;
padding:16px;
font-size:16px;
}

}

/* Small Mobile */

@media (max-width:480px){

.hero h1{
font-size:30px;
}

.hero h3{
font-size:18px;
}

.hero p{
font-size:15px;
}

.profile-card img{
width:180px;
}

.profile-card h2{
font-size:24px;
}

.company h2,
.download-app h2{
font-size:26px;
}

.box h2{
font-size:30px;
}

.box p{
font-size:15px;
}

}