/* =====================================================
RESPONSIVE CSS
PART 1
HEADER + HERO + ABOUT
Creative Door Media
===================================================== */


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

@media (max-width:1200px){

.container{
width:92%;
}

.hero-left h1{
font-size:58px;
line-height:68px;
}

.hero-left p{
font-size:17px;
line-height:30px;
max-width:100%;
}

.hero-wrapper{
gap:50px;
}

.about .container{
gap:50px;
}

.about-right h2{
font-size:42px;
}

.section-title h2{
font-size:42px;
}

}


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

@media (max-width:992px){

/* NAVBAR */

.menu{
display:block;
z-index:1001;
}

nav{

display:none;
position:absolute;

top:100%;
left:0;

width:100%;

background:#071A2D;

padding:25px;

flex-direction:column;

gap:20px;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

nav.active{

display:flex;

}

.talk-btn{

display:none;

}


/* HERO */

.hero{

min-height:auto;

padding:170px 0 100px;

}

.hero-wrapper{

flex-direction:column;

text-align:center;

gap:60px;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-right img{

max-width:550px;
margin:auto;

}

.hero-btns{

justify-content:center;
flex-wrap:wrap;

}

.hero-stats{

justify-content:center;
flex-wrap:wrap;

gap:45px;

}

.hero-left h1{

font-size:52px;
line-height:62px;

}


/* ABOUT */

.about{

padding:90px 0;

}

.about .container{

display:flex;
flex-direction:column;

text-align:center;

}

.about-left,
.about-right{

width:100%;

}

.about-left img{

max-width:600px;

margin:auto;

}

.about-right ul{

display:flex;
flex-direction:column;
align-items:center;

}

.about-right ul li{

justify-content:center;

}

}



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

@media (max-width:768px){

/* HEADER */

header{

padding:15px 0;

}

.logo img{

width:70px;

}

.logo h2{

font-size:18px;

}


/* HERO */

.hero{

padding:150px 0 80px;

}

.hero-left h1{

font-size:42px;
line-height:52px;

}

.hero-left p{

font-size:16px;
line-height:28px;

}

.hero-btns{

flex-direction:column;

gap:15px;

}

.primary-btn,
.outline-btn{

width:100%;

justify-content:center;

}

.hero-stats{

gap:30px;

}

.hero-stats h2{

font-size:34px;

}


/* ABOUT */

.about{

padding:80px 0;

}

.about-right h2{

font-size:34px;

}

.about-right p{

font-size:16px;

line-height:28px;

}

.section-title h2{

font-size:34px;

}

}


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

@media (max-width:576px){

.container{

width:90%;

}

.hero{

padding:140px 0 70px;

}

.hero-left h1{

font-size:36px;
line-height:46px;

}

.hero-left p{

font-size:15px;

}

.hero-stats{

gap:20px;

}

.hero-stats h2{

font-size:28px;

}

.hero-stats p{

font-size:14px;

}

.about-right h2{

font-size:30px;

}

.section-title h2{

font-size:30px;

}

}


/* ==========================================
480px
========================================== */

@media (max-width:480px){

.logo img{

width:60px;

}

.logo h2{

font-size:16px;

}

.hero{

padding-top:135px;

}

.hero-left h1{

font-size:32px;
line-height:42px;

}

.hero-left p{

font-size:15px;
line-height:26px;

}

.hero-right img{

max-width:100%;

}

.hero-btns{

gap:12px;

}

.about{

padding:70px 0;

}

.about-right h2{

font-size:28px;

}

.about-right p{

font-size:15px;

line-height:26px;

}

.about-right ul li{

font-size:15px;

}

.section-title h2{

font-size:28px;

}

}


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

@media (max-width:360px){

.hero-left h1{

font-size:28px;
line-height:38px;

}

.hero-left p{

font-size:14px;

}

.logo h2{

font-size:15px;

}

.primary-btn,
.outline-btn{

padding:14px 20px;

font-size:14px;

}

.about-right h2{

font-size:25px;

}

}

/* =====================================================
PART 2
SERVICES + PORTFOLIO + GALLERY + STATS
===================================================== */


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

@media (max-width:1200px){

.service-grid{
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.portfolio-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.products-grid{
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.gallery-wrapper{
grid-template-columns:repeat(3,1fr);
height:760px;
gap:16px;
}

.large{height:320px;}
.medium{height:220px;}
.small{height:140px;}
.tall{height:400px;}

}


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

@media (max-width:992px){

.services,
.portfolio,
.products,
.stats,
.gallery{

padding:90px 0;

}

/* SERVICES */

.service-grid{

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

gap:22px;

}

.service-card{

padding:35px 25px;

}

/* PORTFOLIO */

.portfolio-grid{

grid-template-columns:1fr;

gap:25px;

}

/* PRODUCTS */

.products-grid{

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

}

/* STATS */

.stats-grid{

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

}

/* GALLERY */

.gallery-wrapper{

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

height:650px;

}

.gallery-column:nth-child(3){

display:none;

}

.large{height:280px;}
.medium{height:200px;}
.small{height:130px;}
.tall{height:340px;}

}


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

@media (max-width:768px){

.services,
.portfolio,
.products,
.stats,
.gallery{

padding:80px 0;

}

/* SERVICES */

.service-grid{

grid-template-columns:1fr;

}

.service-card{

padding:35px 30px;

}

/* PORTFOLIO */

.overlay{

padding:30px;

}

.overlay h3{

font-size:24px;

}

.overlay p{

font-size:15px;

}

/* PRODUCTS */

.products-grid{

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

gap:20px;

}

.product-card{

padding:25px 18px;

}

.product-card img{

width:75px;
height:75px;

}

/* STATS */

.stats-grid{

grid-template-columns:1fr;

}

.stat-card{

padding:35px;

}

.stat-card h2{

font-size:42px;

}

/* GALLERY */

.gallery-wrapper{

grid-template-columns:1fr;

height:auto;

}

.gallery-column:nth-child(2),
.gallery-column:nth-child(3){

display:none;

}

.large,
.medium,
.small,
.tall{

height:auto;

}

.gallery-item img,
.gallery-item video{

aspect-ratio:16/9;

}

}


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

@media (max-width:576px){

.products-grid{

grid-template-columns:1fr;

}

.product-card{

padding:25px;

}

.stat-card{

padding:30px 25px;

}

.service-card{

padding:30px 22px;

}

.overlay{

padding:22px;

}

.overlay h3{

font-size:22px;

}

}


/* ==========================================
480px
========================================== */

@media (max-width:480px){

.service-card h3{

font-size:22px;

}

.service-card p{

font-size:15px;
line-height:26px;

}

.product-card h3{

font-size:20px;

}

.product-card p{

font-size:14px;
line-height:24px;

}

.stat-card h2{

font-size:36px;

}

.stat-card p{

font-size:15px;

}

.gallery-item{

border-radius:15px;

}

}


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

@media (max-width:360px){

.service-card{

padding:25px 18px;

}

.product-card{

padding:22px 16px;

}

.overlay{

padding:18px;

}

.overlay h3{

font-size:20px;

}

.overlay a{

width:100%;
text-align:center;

}

}

/* =====================================================
PART 3
PROCESS + TESTIMONIAL + CONTACT + FOOTER
FINAL RESPONSIVE FIXES
=====================================================*/


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

@media (max-width:1200px){

.process-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.footer-grid{
grid-template-columns:2fr 1fr 1fr;
gap:30px;
}

.contact-wrapper{
gap:40px;
}

}


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

@media (max-width:992px){

.process,
.testimonial,
.contact-section,
footer{

padding:90px 0;

}

/* PROCESS */

.process-grid{

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

}

.process-card{

padding:35px 25px;

}

/* CONTACT */

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-info{

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

}

.contact-map iframe{

height:420px;

}

/* TESTIMONIAL */

.testimonial-slider{

max-width:100%;

}

.testimonial-card{

padding:35px;

}

/* FOOTER */

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid p,
.footer-grid a{

text-align:center;

}

.footer-grid i{

margin:0 8px;

}

}


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

@media (max-width:768px){

.process,
.testimonial,
.contact-section,
footer{

padding:80px 0;

}

/* PROCESS */

.process-grid{

grid-template-columns:1fr;

}

.process-card{

padding:35px 25px;

}

/* CONTACT */

.contact-info{

grid-template-columns:1fr;

}

.contact-card{

flex-direction:column;

text-align:center;

padding:30px 20px;

}

.contact-card i{

margin-bottom:10px;

}

.contact-map iframe{

height:350px;

}

/* TESTIMONIAL */

.testimonial-card{

padding:30px 25px;

}

.testimonial-card p{

font-size:16px;
line-height:28px;

}

.client-circle{

width:75px;
height:75px;

}

.client-info h3{

font-size:20px;

}

/* FOOTER */

.footer-grid{

gap:40px;

}

.copyright{

font-size:14px;

}

}


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

@media (max-width:576px){

.process-card{

padding:30px 20px;

}

.number{

width:65px;
height:65px;
font-size:24px;

}

.contact-map iframe{

height:300px;

}

.contact-card{

padding:25px 18px;

}

.footer-grid{

gap:35px;

}

}


/*=========================================
480px
=========================================*/

@media (max-width:480px){

.process-card h3{

font-size:22px;

}

.process-card p{

font-size:15px;
line-height:26px;

}

.testimonial-card{

padding:25px 20px;

}

.testimonial-card p{

font-size:15px;

}

.client-circle{

width:65px;
height:65px;

}

.contact-card h3{

font-size:18px;

}

.contact-card p,
.contact-card a{

font-size:14px;

}

.footer-grid h2{

font-size:22px;

}

.footer-grid h3{

font-size:20px;

}

.footer-grid p,
.footer-grid a{

font-size:14px;

line-height:26px;

}

}


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

@media (max-width:360px){

.process-card{

padding:25px 18px;

}

.testimonial-card{

padding:20px 18px;

}

.contact-card{

padding:20px 15px;

}

.contact-map iframe{

height:250px;

}

.footer-grid{

gap:30px;

}

}


/*=========================================
GLOBAL RESPONSIVE FIXES
=========================================*/

html,
body{

overflow-x:hidden;

}

img,
video{

max-width:100%;
height:auto;
display:block;

}

iframe{

max-width:100%;

}

.container{

width:min(92%,1280px);

margin:auto;

}

section{

overflow:hidden;

}

*{

word-wrap:break-word;

}

.primary-btn,
.outline-btn,
.service-btn{

touch-action:manipulation;

}

input,
textarea,
button{

font-size:16px;

}

a{

-webkit-tap-highlight-color:transparent;

}