/*==================================================
RESPONSIVE
LARGE DESKTOP
==================================================*/

@media (max-width:1600px){

.hero-title{

font-size:105px;

}

.showcase-overlay h2{

font-size:90px;

}

.project-content h3{

font-size:58px;

}

.about-left h2{

font-size:62px;

}

.section-title h2{

font-size:62px;

}

}

/*==================================================
LAPTOP
==================================================*/

@media (max-width:1400px){

.container{

width:94%;

}

.hero-title{

font-size:90px;

}

.hero-description{

font-size:18px;

max-width:600px;

}

.about-section .container{

gap:80px;

}

.about-right img{

height:600px;

}

.statistics-grid{

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

gap:30px;

}

.services-grid{

grid-template-columns:1fr 1fr;

}

.project-row{

gap:60px;

}

.project-image img{

height:580px;

}

.project-content h3{

font-size:52px;

}

.process-grid{

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

}

.gallery-grid{

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

}

.footer-grid{

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

gap:50px;

}

}
/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

.header{

padding:18px 0;

}

.header .container{

flex-wrap:wrap;

justify-content:space-between;

}

.logo h2{

font-size:34px;

}

.logo p{

font-size:9px;

letter-spacing:2px;

}

nav{

display:none;

}

.quote-btn{

padding:14px 24px;

font-size:11px;

}

.hero{

height:90vh;

}

.hero-content{

padding-top:120px;

}

.hero-title{

font-size:70px;

}

.hero-description{

font-size:17px;

max-width:100%;

}

.hero-buttons{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.hero-stats{

display:grid;

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

gap:30px;

}

.about-section{

padding:120px 0;

}

.about-section .container{

grid-template-columns:1fr;

gap:60px;

}

.about-right img{

height:500px;

}

.statistics{

padding:120px 0;

}

.statistics-grid{

grid-template-columns:1fr 1fr;

}

.services{

padding:120px 0;

}

.services-grid{

grid-template-columns:1fr;

}

.project-row,

.project-row.reverse{

grid-template-columns:1fr;

}

.project-row.reverse .project-image,

.project-row.reverse .project-content{

order:unset;

}

.project-image img{

height:450px;

}

.project-content h3{

font-size:46px;

}

.why-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr 1fr;

}

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.gallery-item.large{

grid-row:span 1;

}

.contact-banner .container{

grid-template-columns:1fr;

gap:50px;

}

.contact-right{

justify-content:flex-start;

}

.footer-grid{

grid-template-columns:1fr;

text-align:left;

}

}
/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

.header{

padding:15px 0;

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo h2{

font-size:28px;

letter-spacing:2px;

}

.logo p{

font-size:8px;

letter-spacing:1.5px;

}

.quote-btn{

padding:12px 18px;

font-size:10px;

letter-spacing:1px;

}

.hero{

height:100vh;

}

.hero-content{

padding-top:110px;

text-align:left;

}

.hero-title{

font-size:52px;

line-height:1;

}

.hero-description{

font-size:16px;

line-height:1.8;

margin-bottom:35px;

}

.hero-buttons{

width:100%;

}

.btn-primary,

.btn-secondary{

width:100%;

justify-content:center;

}

.hero-stats{

grid-template-columns:1fr;

gap:20px;

margin-top:40px;

}

.scroll-indicator{

display:none;

}

/* ABOUT */

.about-left h2{

font-size:46px;

}

.about-left p{

font-size:16px;

}

.about-right img{

height:380px;

}

/* SECTION TITLES */

.section-title h2{

font-size:46px;

}

.statistics-heading h2{

font-size:46px;

}

/* STATS */

.statistics-grid{

grid-template-columns:1fr;

}

/* SERVICES */

.service-card{

padding:35px;

}

.service-card h3{

font-size:30px;

}

.service-number{

font-size:58px;

}

/* PROJECTS */

.project-content h3{

font-size:40px;

}

.project-content p{

font-size:16px;

}

.project-image img{

height:340px;

}

/* SHOWCASE */

.showcase-overlay h2{

font-size:55px;

}

.showcase-overlay p{

font-size:17px;

}

/* PROCESS */

.process-grid{

grid-template-columns:1fr;

}

.process-card{

padding:35px;

}

/* TESTIMONIAL */

.testimonial h2{

font-size:34px;

}

/* GALLERY */

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item{

height:320px;

}

.gallery-item.large{

height:420px;

}

/* CONTACT */

.contact-left h2{

font-size:44px;

}

.contact-left p{

font-size:16px;

}

/* FOOTER */

.footer{

padding:80px 0 30px;

}

.footer-column h2{

font-size:36px;

}

.footer-column h3{

font-size:22px;

}

.footer-social{

justify-content:flex-start;

}

.footer-bottom{

margin-top:50px;

}

}
/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:480px){

.container{

width:94%;

}

.logo h2{

font-size:22px;

letter-spacing:1px;

}

.logo p{

font-size:7px;

letter-spacing:1px;

}

.quote-btn{

padding:10px 14px;

font-size:9px;

}

.hero{

height:100vh;

}

.hero-title{

font-size:40px;

line-height:1.05;

}

.hero-description{

font-size:15px;

}

.hero-buttons{

gap:12px;

}

.btn-primary,
.btn-secondary{

padding:15px;

font-size:11px;

}

.hero-stats{

gap:15px;

}

.stat-item h3{

font-size:38px;

}

.about-left h2{

font-size:36px;

}

.section-title h2{

font-size:36px;

}

.statistics-heading h2{

font-size:36px;

}

.service-card{

padding:28px;

}

.service-card h3{

font-size:26px;

}

.project-content h3{

font-size:32px;

}

.project-image img{

height:260px;

}

.showcase-overlay h2{

font-size:42px;

}

.showcase-overlay p{

font-size:15px;

}

.process-card{

padding:28px;

}

.process-card h1{

font-size:60px;

}

.contact-left h2{

font-size:34px;

}

.footer-column h2{

font-size:30px;

}

.footer-column h3{

font-size:20px;

}

.footer-social{

flex-wrap:wrap;

gap:12px;

justify-content:flex-start;

}

.gallery-item{

height:240px;

}

.gallery-item.large{

height:320px;

}

}
/*==================================================
LANDSCAPE & FINAL FIXES
==================================================*/

@media (max-width:900px) and (orientation:landscape){

.hero{

height:auto;

min-height:100vh;

padding:120px 0 80px;

}

.hero-content{

padding-top:60px;

}

.hero-title{

font-size:60px;

}

}

/*==================================================
GLOBAL MOBILE FIXES
==================================================*/

img{

max-width:100%;

height:auto;

display:block;

}

video{

max-width:100%;

height:auto;

}

.container{

margin:auto;

}

section{

overflow:hidden;

}

body{

overflow-x:hidden;

}

*{

box-sizing:border-box;

}

input,
textarea,
select,
button{

font-family:inherit;

}

iframe{

width:100%;

border:0;

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

a,
button,
img{

transition:.35s ease;

}

/*==================================================
DISABLE LARGE EFFECTS ON MOBILE
==================================================*/

@media (max-width:768px){

.cursor,
.cursor2{

display:none;

}

.showcase:hover .showcase-image img,

.project-image:hover img,

.gallery-item:hover img,

.about-right:hover img{

transform:none;

}

}

/*==================================================
THE END
==================================================*/
.image-counter{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

color:#fff;

font-size:18px;

font-weight:600;

padding:12px 22px;

background:rgba(0,0,0,.45);

border-radius:50px;

backdrop-filter:blur(15px);

letter-spacing:2px;

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

.project-overlay h1{

font-size:38px;

}

.project-overlay p{

font-size:16px;

padding:0 20px;

}

.gallery-grid{

grid-template-columns:1fr;

}

}