/*=========================================
RESPONSIVE DESIGN
Author: Muba Portfolio
=========================================*/

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

@media (max-width:1400px){

.hero,
.about-container,
.content{

max-width:1200px;

}

.navbar{

max-width:1200px;

}

}

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

@media (max-width:1200px){

section{

padding:100px 35px;

}

.hero{

grid-template-columns:1fr;

text-align:center;

gap:60px;

padding-top:160px;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

}

.hero-buttons{

justify-content:center;

}

.hero-social{

justify-content:center;

}

.hero p{

margin:auto auto 35px;

}

.hero-image{

margin:auto;

}

.about-container{

grid-template-columns:1fr;

gap:60px;

}

.content{

grid-template-columns:1fr;

text-align:center;

}

.content-right{

margin-top:30px;

}

.stats{

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

}

.featured-grid{

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

}

.services-grid{

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

}

.toolbox-grid{

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

}

.video-grid{

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

}

.projects-grid{

grid-template-columns:1fr;

}

.process-grid{

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

}

.numbers-grid{

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

}

.principles-grid{

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

}

.journey-container{

grid-template-columns:1fr;

}

.contact-container{

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

}

.social-grid{

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

}

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

@media (max-width:992px){

.nav-links{

display:none;

}

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

}

.navbar{

padding:16px 25px;

}

.logo span{

font-size:20px;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:54px;

line-height:1.1;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:17px;

}

.hero-image{

width:340px;

height:340px;

}

.one{

width:400px;

height:400px;

top:-30px;

left:-30px;

}

.two{

width:460px;

height:460px;

top:-60px;

left:-60px;

}

.three{

display:none;

}

.about-grid{

grid-template-columns:1fr;

}

.featured-grid,
.services-grid,
.toolbox-grid,
.video-grid,
.projects-grid,
.process-grid,
.numbers-grid,
.principles-grid,
.social-grid,
.contact-container{

grid-template-columns:1fr;

}

.vision-list{

grid-template-columns:1fr;

}

.timeline-wrapper{

padding-left:35px;

}

.timeline-dot{

left:-35px;

}

.cta-box{

padding:60px 35px;

}

.section-header h2{

font-size:42px;

}

.content-left h2{

font-size:42px;

}

.vision h2{

font-size:44px;

}

.footer-content h2{

font-size:34px;

}

}

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

@media (max-width:768px){

section{

padding:80px 20px;

}

.navbar{

width:95%;

padding:15px 20px;

}

.hero{

padding:140px 20px 60px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:20px;

}

.hero p{

font-size:16px;

}

.hero-image{

width:280px;

height:280px;

}

.one{

width:320px;

height:320px;

top:-20px;

left:-20px;

}

.two{

display:none;

}

.stats{

grid-template-columns:1fr;

gap:20px;

}

.section-header{

margin-bottom:50px;

}

.section-header h2{

font-size:34px;

}

.section-header p{

font-size:16px;

}

.about-content h3{

font-size:30px;

}

.content-left h2{

font-size:34px;

}

.vision h2{

font-size:36px;

}

.cta-box h2{

font-size:36px;

}

.footer-social{

flex-wrap:wrap;

}

.btn,

.btn-outline{

width:100%;

justify-content:center;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

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

@media (max-width:576px){

html{

font-size:15px;

}

body{

overflow-x:hidden;

}

section{

padding:70px 18px;

}

.navbar{

width:95%;

padding:14px 18px;

border-radius:18px;

}

.logo img{

width:42px;

height:42px;

}

.logo span{

display:none;

}

.hero{

padding:130px 18px 50px;

gap:40px;

}

.hero h1{

font-size:34px;

line-height:1.15;

}

.hero h2{

font-size:18px;

}

.hero p{

font-size:15px;

line-height:1.8;

}

.hero-image{

width:230px;

height:230px;

}

.one{

width:270px;

height:270px;

}

.tag{

font-size:13px;

padding:8px 16px;

}

.btn,
.btn-outline{

padding:15px 20px;

font-size:15px;

}

.section-header{

margin-bottom:40px;

}

.section-header h2{

font-size:30px;

}

.section-header p{

font-size:15px;

}

.stat-card,
.about-box,
.belief-card,
.timeline-content,
.service-card,
.project-card,
.tool-card,
.video-card,
.number-card,
.principle-card,
.journey-card,
.contact-card{

padding:25px;

}

.project-card img{

height:220px;

}

.content-right img{

width:100%;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

.footer-content h2{

font-size:28px;

}

.footer-content p{

font-size:15px;

}

.footer-social a{

width:48px;

height:48px;

}

}


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

@media (max-width:400px){

.hero h1{

font-size:28px;

}

.hero h2{

font-size:17px;

}

.hero-image{

width:190px;

height:190px;

}

.one{

width:230px;

height:230px;

}

.section-header h2{

font-size:26px;

}

.about-content h3{

font-size:24px;

}

.content-left h2{

font-size:26px;

}

.vision h2{

font-size:28px;

}

.cta-box h2{

font-size:26px;

}

.process-card,
.service-card,
.tool-card,
.number-card,
.contact-card{

padding:20px;

}

}