/* =========================================================
   CREATIVE ENDS RESPONSIVE SYSTEM
========================================================= */

/* =========================================================
   LARGE DESKTOPS
========================================================= */

@media (max-width: 1600px) {

    h1 {

        font-size: 68px;

    }

    .hero-content h1 {

        font-size: 72px;

    }

}

/* =========================================================
   LAPTOPS
========================================================= */

@media (max-width: 1400px) {

    h1 {

        font-size: 60px;

    }

    h2 {

        font-size: 46px;

    }

    .hero-content h1 {

        font-size: 64px;

    }

    .services-grid,
    .portfolio-grid {

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

    }

    .process-grid {

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

    }

    .client-logos {

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

    }

}

/* =========================================================
   TABLETS LANDSCAPE
========================================================= */

@media (max-width: 1200px) {

    section {

        padding: 100px 0;

    }

    .about-grid,
    .contact-grid {

        grid-template-columns: 1fr;

    }

    .about-image-wrapper {

        max-width: 700px;
        margin: auto;

    }

    .footer-grid {

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

    }

    .testimonial-slider {

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

    }

    .counter-grid {

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

    }

}

/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 992px) {

    h1 {

        font-size: 52px;

    }

    h2 {

        font-size: 42px;

    }

    h3 {

        font-size: 30px;

    }

    section {

        padding: 90px 0;

    }

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

    .mobile-menu-btn {

        display: flex;

    }

    .nav-links {

        position: fixed;

        top: 90px;
        left: 0;

        width: 100%;

        background: rgba(10,10,10,0.98);

        backdrop-filter: blur(20px);

        flex-direction: column;

        padding: 40px 20px;

        gap: 25px;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-30px);

        transition: all 0.4s ease;

    }

    .nav-links.mobile-nav-active {

        opacity: 1;
        visibility: visible;

        transform: translateY(0px);

    }

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

    .hero-section {

        min-height: auto;

        padding-top: 180px;
        padding-bottom: 120px;

    }

    .hero-content h1 {

        font-size: 58px;

    }

    .hero-stats {

        gap: 35px;

    }

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

    .services-grid,
    .portfolio-grid,
    .process-grid,
    .testimonial-slider {

        grid-template-columns: 1fr;

    }

    .client-logos {

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

    }

    .cta-box {

        padding: 70px 40px;

    }

}

/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 768px) {

    body {

        font-size: 15px;

    }

    h1 {

        font-size: 44px;

    }

    h2 {

        font-size: 36px;

    }

    h3 {

        font-size: 28px;

    }

    section {

        padding: 80px 0;

    }

    .section-header {

        margin-bottom: 50px;

    }

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

    .hero-content {

        text-align: center;

    }

    .hero-content h1 {

        font-size: 48px;

    }

    .hero-content p {

        font-size: 16px;

        margin-left: auto;
        margin-right: auto;

    }

    .hero-btn-group {

        justify-content: center;

    }

    .hero-stats {

        justify-content: center;
        text-align: center;

    }

    .scroll-indicator {

        display: none;

    }

    /* =========================================
       ABOUT
    ========================================= */

    .about-feature-list {

        grid-template-columns: 1fr;

    }

    .about-experience-box {

        position: relative;

        right: auto;
        bottom: auto;

        margin-top: 25px;

        width: 100%;

    }

    /* =========================================
       COUNTERS
    ========================================= */

    .counter-grid {

        grid-template-columns: 1fr;

    }

    /* =========================================
       CLIENTS
    ========================================= */

    .client-logos {

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

    }

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

    .contact-info-box,
    .contact-form {

        padding: 40px 25px;

    }

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

    .cta-box {

        padding: 60px 25px;

    }

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

    .footer-grid {

        grid-template-columns: 1fr;

    }

    .footer-bottom {

        text-align: center;

    }

}

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

@media (max-width: 576px) {

    .container {

        padding-left: 16px;
        padding-right: 16px;

    }

    h1 {

        font-size: 38px;

    }

    h2 {

        font-size: 32px;

    }

    h3 {

        font-size: 25px;

    }

    p {

        font-size: 15px;

    }

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

    .navbar {

        min-height: 80px;

    }

    .logo img {

        width: 180px;

    }

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

    .hero-section {

        padding-top: 160px;

    }

    .hero-content h1 {

        font-size: 40px;

    }

    .hero-subtitle {

        padding: 10px 18px;

        font-size: 13px;

    }

    .hero-btn-group {

        flex-direction: column;

        width: 100%;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

    }

    .hero-stat h3 {

        font-size: 36px;

    }

    /* =========================================
       SERVICES
    ========================================= */

    .service-card {

        padding: 35px 25px;

        min-height: auto;

    }

    .service-icon {

        width: 75px;
        height: 75px;

    }

    .service-icon i {

        font-size: 32px;

    }

    /* =========================================
       PORTFOLIO
    ========================================= */

    .portfolio-overlay {

        padding: 25px;

    }

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

    .faq-question {

        padding: 22px 24px;

        font-size: 16px;

    }

    .faq-answer-content {

        padding:
        0 24px 24px;

    }

    /* =========================================
       WHATSAPP
    ========================================= */

    .whatsapp-float {

        width: 58px;
        height: 58px;

        font-size: 26px;

        right: 18px;
        bottom: 18px;

    }

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

    .back-to-top {

        width: 48px;
        height: 48px;

        right: 18px;
        bottom: 90px;

    }

}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    h1 {

        font-size: 34px;

    }

    h2 {

        font-size: 28px;

    }

    .hero-content h1 {

        font-size: 34px;

    }

    .hero-stats {

        flex-direction: column;

        gap: 20px;

    }

    .portfolio-filter {

        gap: 10px;

    }

    .filter-btn {

        width: 100%;

    }

}

/* =========================================================
   LANDSCAPE PHONES
========================================================= */

@media (max-height: 600px) and (orientation: landscape) {

    .hero-section {

        min-height: auto;

        padding-top: 140px;
        padding-bottom: 80px;

    }

    .scroll-indicator {

        display: none;

    }

}

/* =========================================================
   HIGH RESOLUTION SCREENS
========================================================= */

@media (min-width: 1800px) {

    .container {

        max-width: 1500px;

    }

    h1 {

        font-size: 84px;

    }

    h2 {

        font-size: 62px;

    }

    .hero-content h1 {

        font-size: 92px;

    }

}

/* =========================================================
   REDUCE MOTION ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}

/* =========================================================
   PRINT STYLES
========================================================= */

@media print {

    header,
    footer,
    .whatsapp-float,
    .back-to-top,
    .mobile-menu-btn {

        display: none !important;

    }

    body {

        background: #FFFFFF;
        color: #000000;

    }

}

/* =========================================================
   END OF FILE
========================================================= */