/* ==========================================
   RESPONSIVE CSS
   PART 1
   Breakpoints:
   1200px
   992px
========================================== */


/* ==========================================
   LARGE TABLETS & SMALL DESKTOPS
   (1200px)
========================================== */

@media (max-width:1200px){

    /* ===========================
       CONTAINER
    =========================== */

    .container{

        width:92%;
        max-width:1100px;
        margin-inline:auto;

    }

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

    section{

        padding:110px 0;

    }

    /* ===========================
       HERO
    =========================== */

    .hero-content,
    .branding-hero-content{

        max-width:850px;

    }

    .hero-content h1,
    .branding-hero-content h1{

        font-size:clamp(3.5rem,6vw,4.8rem);

    }

    .hero-content p,
    .branding-hero-content p{

        max-width:700px;

    }

}


/* ==========================================
   TABLETS & LAPTOPS
   (992px)
========================================== */

@media (max-width:992px){

    /* ===========================
       GLOBAL
    =========================== */

    section{

        padding:90px 0;

    }

    .container{

        width:92%;
        max-width:100%;

    }

    h1{

        font-size:clamp(2.8rem,6vw,3.8rem);
        line-height:1.15;

    }

    h2{

        font-size:clamp(2.2rem,5vw,3rem);
        line-height:1.2;

    }

    p{

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

    }

    /* ===========================
       HEADER
    =========================== */

    header{

        padding:15px 0;

    }

    .navbar{

        justify-content:space-between;
        align-items:center;

    }

    .logo h2{

        font-size:24px;

    }

    .logo span{

        width:46px;
        height:46px;

        font-size:20px;

    }

    /* ===========================
       NAVIGATION
    =========================== */

    .menu-toggle{

        display:block;
        z-index:1002;

    }

    .contact-btn{

        display:none;

    }

    .nav-menu{

        position:fixed;

        top:0;
        right:-100%;

        width:min(85vw,320px);
        height:100vh;

        background:#fff;

        display:flex;
        justify-content:center;
        align-items:center;

        box-shadow:-10px 0 40px rgba(0,0,0,.12);

        transition:.35s ease;

        z-index:1001;

    }

    .nav-menu.active{

        right:0;

    }

    .nav-menu ul{

        display:flex;
        flex-direction:column;

        gap:35px;

        text-align:center;

    }

    .nav-menu ul li a{

        font-size:22px;
        font-weight:600;

    }

    /* ===========================
       HERO
    =========================== */

    .hero,
    .branding-hero{

        min-height:auto;

        text-align:center;

        padding:120px 0 90px;

    }

    .hero-content,
    .branding-hero-content{

        max-width:760px;

        margin-inline:auto;

    }

    .hero-buttons{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:18px;

        margin-top:40px;

    }

    /* ===========================
       SECTION HEADING
    =========================== */

    .section-heading{

        max-width:720px;

        margin:0 auto 70px;

    }

    .section-heading h2{

        margin-bottom:20px;

    }

    .section-heading p{

        max-width:650px;

        margin-inline:auto;

    }

    /* ===========================
       GLOBAL GRIDS
    =========================== */

    .services-grid,
    .why-grid,
    .portfolio-grid,
    .pricing-grid,
    .team-grid,
    .enterprise-features{

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

        gap:30px;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .process-grid{

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

        gap:30px;

    }

    .footer-grid{

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

        gap:40px;

    }

    /* ===========================
       CARDS
    =========================== */

    .service-card,
    .why-card,
    .portfolio-card,
    .pricing-card,
    .process-card,
    .team-card,
    .contact-card{

        padding:36px;

    }

    /* ===========================
       FORMS
    =========================== */

    .contact-form{

        padding:40px;

    }

    .contact-form .form-group{

        display:grid;

        gap:20px;

    }

    /* ===========================
       ICONS
    =========================== */

    .service-icon,
    .why-icon,
    .process-icon,
    .contact-icon{

        width:72px;
        height:72px;

        font-size:30px;

    }

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

    .footer{

        text-align:left;

    }

}


/* ==========================================
   RESPONSIVE CSS
   PART 2
   Breakpoints:
   768px
   576px
========================================== */


/* ==========================================
   TABLETS & MOBILE
   (768px)
========================================== */

@media (max-width:768px){

    /* ===========================
       GLOBAL
    =========================== */

    section{

        padding:70px 0;

    }

    .container{

        width:90%;
        max-width:100%;
        margin-inline:auto;

    }

    h1{

        font-size:clamp(2.2rem,8vw,3rem);
        line-height:1.15;

    }

    h2{

        font-size:clamp(1.9rem,7vw,2.5rem);
        line-height:1.25;

    }

    p{

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

    }

    /* ===========================
       HEADER
    =========================== */

    header{

        padding:12px 0;

    }

    .logo h2{

        font-size:22px;

    }

    .logo span{

        width:42px;
        height:42px;

        font-size:18px;

    }

    /* ===========================
       HERO
    =========================== */

    .hero,
    .branding-hero{

        min-height:auto;

        padding:100px 0 70px;

        text-align:center;

    }

    .hero-content,
    .branding-hero-content{

        width:100%;
        max-width:680px;

        margin-inline:auto;

    }

    .hero-content h1,
    .branding-hero-content h1{

        margin-bottom:25px;

    }

    .hero-content p,
    .branding-hero-content p{

        margin-bottom:35px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:18px;

        width:100%;

    }

    .btn,
    .btn-outline,
    .contact-btn{

        width:100%;
        max-width:320px;

    }

    /* ===========================
       SECTION HEADING
    =========================== */

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        margin-bottom:18px;

    }

    .section-heading p{

        width:100%;

    }

    /* ===========================
       GRIDS
    =========================== */

    .services-grid,
    .why-grid,
    .portfolio-grid,
    .pricing-grid,
    .contact-grid,
    .process-grid,
    .team-grid,
    .footer-grid,
    .enterprise-features{

        grid-template-columns:1fr;

        gap:24px;

    }

    /* ===========================
       CARDS
    =========================== */

    .service-card,
    .why-card,
    .portfolio-card,
    .pricing-card,
    .process-card,
    .team-card,
    .contact-card{

        padding:30px;

        border-radius:22px;

    }

    /* ===========================
       IMAGES
    =========================== */

    img{

        display:block;

        width:100%;
        height:auto;

    }

    .hero-image img,
    .about-image img,
    .portfolio-image img{

        border-radius:20px;

    }

    /* ===========================
       ICONS
    =========================== */

    .service-icon,
    .why-icon,
    .contact-icon,
    .process-icon{

        width:64px;
        height:64px;

        font-size:26px;

    }

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

    .contact-form{

        padding:30px;

    }

    .contact-form .form-group{

        display:flex;

        flex-direction:column;

        gap:18px;

    }

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

        width:100%;

        padding:16px 18px;

        font-size:16px;

    }

    .contact-form textarea{

        min-height:160px;

    }

    /* ===========================
       ENTERPRISE
    =========================== */

    .enterprise-box{

        padding:40px 25px;

    }

    .enterprise-box h2{

        font-size:34px;

    }

    /* ===========================
       FAQ
    =========================== */

    .faq-item{

        padding:24px;

    }

    .faq-item h3{

        font-size:20px;

    }

    /* ===========================
       FLOATING SOCIAL
    =========================== */

    .floating-contact{

        right:15px;

        bottom:20px;

        top:auto;

        transform:none;

        gap:12px;

    }

    .floating-btn{

        width:50px;
        height:50px;

        font-size:20px;

    }

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

    .footer{

        text-align:center;

    }

    .footer-top{

        margin-bottom:60px;

    }

}


/* ==========================================
   SMALL MOBILE
   (576px)
========================================== */

@media (max-width:576px){

    .container{

        width:92%;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.75rem;

    }

    p{

        font-size:15px;

    }

    .nav-menu{

        width:100%;

    }

    .hero{

        padding:90px 0 60px;

    }

    .btn,
    .btn-outline,
    .contact-btn{

        min-height:54px;

        font-size:16px;

    }

    .service-card,
    .why-card,
    .portfolio-card,
    .pricing-card,
    .process-card,
    .team-card,
    .contact-card,
    .contact-form{

        padding:24px;

    }

    .service-icon,
    .why-icon,
    .contact-icon,
    .process-icon{

        width:58px;
        height:58px;

        font-size:22px;

    }

    iframe{

        width:100%;

    }

    table{

        display:block;

        overflow-x:auto;

        width:100%;

    }

}


/* ==========================================
   PERFORMANCE
========================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}