/* ===========================================
   Large Devices (1200px)
=========================================== */

@media (max-width:1200px){

.container{

    width:90%;

}

.hero h1{

    font-size:52px;

}

.section-title h2{

    font-size:38px;

}

}


/* ===========================================
   Laptop Devices (992px)
=========================================== */

@media (max-width:992px){

.container{

    width:92%;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.logo h2{

    font-size:28px;

}

nav{

    width:100%;

    margin-top:20px;

}

nav ul{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

nav ul li{

    list-style:none;

}

nav ul li a{

    font-size:15px;

}

.btn{

    padding:12px 24px;

    font-size:15px;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    width:90%;

    margin:auto;

}

}


/* ===========================================
   Tablet Devices (768px)
=========================================== */

@media (max-width:768px){

.container{

    width:94%;

}

header{

    padding:15px 0;

}

header .container{

    flex-direction:column;

}

.logo{

    margin-bottom:15px;

}

nav{

    margin-bottom:20px;

}

nav ul{

    flex-direction:column;

    align-items:center;

    gap:12px;

}

nav ul li a{

    display:block;

    padding:8px 0;

}

.btn{

    display:inline-block;

    padding:12px 25px;

}

.section-title{

    margin-bottom:40px;

}

.section-title h5{

    font-size:16px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    width:100%;

    font-size:15px;

    line-height:1.8;

}

}


/* ===========================
   Mobile Navigation
=========================

.menu-toggle{

    display:block;

}

header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

}

header .btn{

    display:none;

}

nav{

    width:100%;
    display:none;

}

nav.active{

    display:block;

}

nav ul{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:25px 0;

}

.hero-content{

    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero-left h1{

    font-size:34px;

}

.hero-buttons{

    flex-direction:column;
    gap:15px;

}

== */



/* ===========================================
   Mobile Devices (576px)
=========================================== */

@media (max-width:576px){

.container{

    width:95%;

}

.logo h2{

    font-size:24px;

}

nav ul{

    gap:10px;

}

nav ul li a{

    font-size:14px;

}

.btn{

    width:100%;

    text-align:center;

    margin-top:10px;

}

.section-title h2{

    font-size:26px;

}

.section-title h5{

    font-size:15px;

}

.section-title p{

    font-size:14px;

}

}
/* ===== Header ===

header .container{
    flex-direction:column;
    align-items:center;
    gap:20px;
}

nav ul{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.btn{
    width:100%;
    max-width:250px;
}

/* ===== Hero ===== */

.hero{
    padding:60px 0;
}

.hero-content{
    flex-direction:column;
    text-align:center;
}

.hero-left,
.hero-right{
    width:100%;
}

.hero-left h1{
    font-size:34px;
}

.hero-left p{
    font-size:16px;
}

.hero-right img{
    width:100%;
    max-width:320px;
    margin:30px auto 0;
    display:block;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:center;
}

.hero-buttons .btn,
.hero-buttons .btn-outline{
    width:100%;
    max-width:280px;
}

/* ===========================================
   Small Mobile (400px)
=========================================== */

@media (max-width:400px){

.logo h2{

    font-size:22px;

}

nav ul li a{

    font-size:13px;

}

.section-title h2{

    font-size:22px;

}

.btn{

    padding:10px 20px;

    font-size:14px;

}

}



/* ===========================================
   HERO SECTION RESPONSIVE
=========================================== */

@media (max-width:1200px){

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    gap:15px;

}

}

@media (max-width:992px){

.hero .hero-content{

    flex-direction:column;

    text-align:center;

}

.hero-left{

    margin-bottom:30px;

}

.hero h1{

    font-size:42px;

}

.hero-right img{

    width:80%;

}

}

@media (max-width:768px){

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:15px;

}

.hero-right img{

    width:100%;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

}

@media (max-width:576px){

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:14px;

}

}


/* ===========================================
   ABOUT SECTION RESPONSIVE
=========================================== */

@media (max-width:992px){

.about-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.about-image img{

    width:80%;

    margin:auto;

}

}

@media (max-width:576px){

.about-image img{

    width:100%;

}

.about-text p{

    font-size:14px;

}

}


/* ===========================================
   SERVICES SECTION RESPONSIVE
=========================================== */

@media (max-width:1200px){

.service-grid{

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

    gap:20px;

}

}

@media (max-width:992px){

.service-grid{

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

}

}

@media (max-width:768px){

.service-grid{

    grid-template-columns:1fr;

}

.service-card{

    text-align:center;

}

}


/* ===========================================
   PROJECT / PORTFOLIO GRID
=========================================== */

@media (max-width:1200px){

.project-grid{

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

}

}

@media (max-width:992px){

.project-grid{

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

}

}

@media (max-width:768px){

.project-grid{

    grid-template-columns:1fr;

}

.project-card img{

    width:100%;

}

}


/* ===========================================
   STAT BOXES (USED IN MULTIPLE PAGES)
=========================================== */

@media (max-width:992px){

.stats .container{

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

    gap:20px;

}

}

@media (max-width:576px){

.stats .container{

    grid-template-columns:1fr;

}

}


/* ===========================================
   WHY US / BENEFITS SECTION
=========================================== */

@media (max-width:992px){

.why-grid{

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

    gap:20px;

}

}

@media (max-width:768px){

.why-grid{

    grid-template-columns:1fr;

}

.why-card{

    text-align:center;

}

}


/* ===========================================
   PROCESS SECTION
=========================================== */

@media (max-width:992px){

.process-grid{

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

    gap:20px;

}

}

@media (max-width:768px){

.process-grid{

    grid-template-columns:1fr;

}

.process-card{

    text-align:center;

}

}


/* ===========================================
   PRICING SECTION
=========================================== */

@media (max-width:992px){

.pricing .service-grid{

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

}

}

@media (max-width:768px){

.pricing .service-grid{

    grid-template-columns:1fr;

}

}


/* ===========================================
   TESTIMONIALS SECTION
=========================================== */

@media (max-width:992px){

.testimonial-grid{

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

}

}

@media (max-width:768px){

.testimonial-grid{

    grid-template-columns:1fr;

}

.testimonial-card{

    text-align:center;

}

}


/* ===========================================
   CTA SECTION
=========================================== */

@media (max-width:768px){

.cta h2{

    font-size:28px;

}

.cta p{

    font-size:14px;

}

.cta .btn{

    display:block;

    margin-top:15px;

}

}


/* ===========================================
   CONTACT FORM
=========================================== */

@media (max-width:992px){

.contact-form .form-row{

    flex-direction:column;

    gap:15px;

}

}

@media (max-width:576px){

.contact-form input,
.contact-form select,
.contact-form textarea{

    font-size:14px;

    padding:12px;

}

}


/* ===========================================
   FOOTER
=========================================== */

@media (max-width:992px){

.footer-grid{

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

    gap:20px;

}

}

@media (max-width:768px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-box{

    margin-bottom:20px;

}

.social-icons{

    justify-content:center;

}

}


/* ===========================================
   MAP SECTION
=========================================== */

@media (max-width:768px){

.map-container iframe{

    height:300px;

}

}



/* ===========================================
   GLOBAL SMALL SCREEN FIXES
=========================================== */

@media (max-width:480px){

body{

    font-size:14px;

}

h1,h2,h3{

    word-break:break-word;

}

p{

    line-height:1.7;

}

}


/* ===========================================
   BUTTON FIXES (ALL PAGES)
=========================================== */

@media (max-width:576px){

.btn,
.btn-outline{

    width:100%;

    text-align:center;

    display:block;

}

}


/* ===========================================
   IMAGE RESPONSIVENESS FIX
=========================================== */

img{

    max-width:100%;

    height:auto;

}


/* ===========================================
   SECTION SPACING FIX
=========================================== */

@media (max-width:768px){

section{

    padding:60px 0;

}

.section-title{

    margin-bottom:30px;

}

}


/* ===========================================
   HERO TEXT ALIGN FIX (SMALL MOBILE)
=========================================== */

@media (max-width:400px){

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:13px;

}

}


/* ===========================================
   NAVIGATION EDGE FIX (VERY SMALL DEVICES)
=========================================== */

@media (max-width:360px){

nav ul li a{

    font-size:12px;

}

.logo h2{

    font-size:20px;

}

}


/* ===========================================
   FORM BUTTON FIX
=========================================== */

@media (max-width:576px){

.contact-form button{

    width:100%;

}

}


/* ===========================================
   BACK TO TOP BUTTON
=========================================== */

@media (max-width:768px){

#topBtn{

    width:45px;

    height:45px;

    font-size:16px;

}

}


/* ===========================================
   FINAL TOUCH: SMOOTH EXPERIENCE
=========================================== */

html{

    scroll-behavior:smooth;

}