/*=====================================
RESPONSIVE.CSS
======================================*/

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

@media (max-width:1400px){

.container{

width:92%;

}

.hero h1{

font-size:58px;

}

.hero-logo{

width:290px;

height:165px;

}

.section-title h2{

font-size:42px;

}

.single-banner{

width:300px;

height:300px;

}

.dia-banner-content .cd-headline{

font-size:36px;

}

.dia-banner-content h1:last-of-type{

font-size:62px;

}

}

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

@media (max-width:1200px){

.navbar{

gap:25px;

}

nav ul{

gap:18px;

}

.hero{

padding-top:160px;

padding-bottom:100px;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:19px;

}

.hero-buttons{

gap:15px;

}

.rate-grid,

.market-grid,

.steps-grid,

.counter-grid,

.contact-grid,

.footer-grid{

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

}

}

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

@media (max-width:992px){

.header{

padding:18px 0;

}

.mobile-btn{

display:block;

font-size:28px;

cursor:pointer;

color:#fff;

}

nav{

display:none;

}

.logo img{

height:72px;

}

.hero{

text-align:center;

}

.hero-logo{

width:250px;

height:142px;

}

.hero h1{

font-size:46px;

line-height:1.2;

}

.hero p{

font-size:18px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.btn-primary,

.btn-secondary{

padding:15px 30px;

}

.section-title{

margin-bottom:50px;

}

section{

padding:80px 0;

}

.top-sect{

padding-top:100px;

}

.dia-banner-content{

min-height:calc(100vh - 100px);

}

.single-banner{

width:260px;

height:260px;

}

.dia-banner-content .cd-headline{

font-size:30px;

}

.dia-banner-content h1:last-of-type{

font-size:54px;

}

.dia-banner-btn a{

padding:14px 22px;

}

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

@media (max-width:768px){

.hero{

padding-top:140px;

padding-bottom:80px;

}

.hero-logo{

width:220px;

height:126px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.section-title h2{

font-size:36px;

}

.section-title p{

font-size:16px;

}

.rate-grid,

.market-grid,

.steps-grid,

.counter-grid,

.contact-grid,

.footer-grid{

grid-template-columns:1fr;

}

.download-fixed{

right:15px;

bottom:20px;

padding:12px 20px;

font-size:15px;

}

.logo img{

height:60px;

}

.top-sect{

padding-top:92px;

}

.dia-banner-content{

min-height:calc(100vh - 92px);

}

.single-banner{

width:260px;

}

.dia-banner-content .cd-headline{

font-size:26px;

}

.dia-banner-content h1:last-of-type{

font-size:46px;

}

}

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

@media (max-width:576px){

.container{

width:94%;

}

.header{

padding:15px 0;

}

.hero{

padding-top:120px;

}

.hero-logo{

width:180px;

height:104px;

}

.hero h1{

font-size:32px;

line-height:1.25;

}

.hero p{

font-size:15px;

margin:15px 0 25px;

}

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

padding:15px;

}

.section-title h2{

font-size:30px;

}

.section-title{

margin-bottom:40px;

}

.rate-card,

.market-card,

.step-card,

.contact-card,

.counter-card{

padding:25px 20px;

}

.footer{

padding:60px 0 25px;

}

.footer h3{

font-size:24px;

}

.footer-bottom{

font-size:14px;

}

.single-banner{

width:200px;

height:200px;

}

.dia-banner-content .cd-headline{

font-size:22px;

}

.dia-banner-content h1:last-of-type{

font-size:38px;

}

.dia-banner-btn{

flex-direction:column;

align-items:stretch;

}

.dia-banner-btn a{

width:100%;

}

}

/*=====================================
420px
======================================*/

@media (max-width:420px){

.hero-logo{

width:160px;

height:92px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}

.logo img{

height:52px;

}

.download-fixed{

padding:10px 16px;

font-size:13px;

}

.download-fixed i{

font-size:18px;

}

.social-links{

justify-content:center;

flex-wrap:wrap;

}

.single-banner{

width:180px;

height:180px;

}

.dia-banner-content .cd-headline{

font-size:20px;

}

.dia-banner-content h1:last-of-type{

font-size:34px;

}

}

/*=====================================
360px
======================================*/

@media (max-width:360px){

.hero h1{

font-size:24px;

}

.hero-logo{

width:145px;

height:84px;

}

.section-title h2{

font-size:26px;

}

.rate-card h3,

.market-card h3{

font-size:20px;

}

.rate-card h4{

font-size:18px;

}

.btn-primary,

.btn-secondary{

font-size:15px;

padding:13px;

}

.contact-card h3,

.step-card h3{

font-size:20px;

}

.counter-card h2{

font-size:40px;

}

.footer{

text-align:center;

}

.single-banner{

width:160px;

height:160px;

}

.dia-banner-content .cd-headline{

font-size:18px;

}

.dia-banner-content h1:last-of-type{

font-size:30px;

}

.footer-contact li{

justify-content:center;

}

}

/*=====================================
LANDSCAPE MOBILE
======================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding-top:90px;

padding-bottom:50px;

min-height:auto;

}

.hero-logo{

width:140px;

height:80px;

}

.hero h1{

font-size:30px;

}

}

/*=====================================
END OF RESPONSIVE.CSS
======================================*/