/* =========================================================
   RESPONSIVE.CSS
   HAZLO FACIL TRAVEL
========================================================= */

/* =========================================================
   LARGE DEVICES
   <= 1400px
========================================================= */

@media(max-width:1400px){

    .hero-content h1 {

        font-size:
            clamp(
                3rem,
                6vw,
                5.5rem
            );

    }

}

/* =========================================================
   DESKTOP
   <= 1200px
========================================================= */

@media(max-width:1200px){

    .hero-section {

        padding:
            130px 0
            90px;

    }

    .subscription-card {

        padding: 50px;

    }

    .quote-box {

        padding: 60px;

    }

    .count-box {

        width: 150px;
        height: 150px;

    }

}

/* =========================================================
   TABLETS
   <= 991px
========================================================= */

@media(max-width:991px){

    .hero-section {

        text-align: center;

    }

    .hero-content h1 {

        font-size:
            clamp(
                2.8rem,
                7vw,
                4.5rem
            );

        line-height: 1.1;

    }

    .hero-description {

        font-size: 1.05rem;

    }

    .main-logo {

        max-width: 380px;

    }

    .hero-badges {

        justify-content: center;

    }

    .countdown-wrapper {

        gap: 18px;

    }

    .count-box {

        width: 130px;
        height: 130px;

    }

    .count-box span {

        font-size: 2.8rem;

    }

    .subscription-card {

        padding: 45px;

    }

    .service-card {

        margin-bottom: 30px;

    }

    .quote-box h2 {

        font-size: 2.2rem;

    }

    .stat-card {

        margin-bottom: 25px;

    }

    .footer-title {

        margin-top: 40px;

    }

}

/* =========================================================
   MOBILE LANDSCAPE
   <= 768px
========================================================= */

@media(max-width:768px){

    body {

        overflow-x: hidden;

    }

    .topbar {

        padding: 12px 0;

    }

    .topbar span {

        font-size: 11px;

        letter-spacing: 1px;

    }

    .hero-section {

        min-height: auto;

        padding:
            160px 0
            80px;

    }

    .hero-content h1 {

        font-size:
            clamp(
                2.3rem,
                9vw,
                3.5rem
            );

        margin-bottom: 25px;

    }

    .hero-description {

        font-size: .98rem;

        line-height: 1.8;

    }

    .hero-subtitle {

        font-size: .75rem;

        padding:
            10px 18px;

    }

    .main-logo {

        max-width: 300px;

    }

    .scroll-indicator {

        display: none;

    }

    .countdown-wrapper {

        justify-content: center;

        gap: 15px;

    }

    .count-box {

        width: 110px;
        height: 110px;

        border-radius: 24px;

    }

    .count-box span {

        font-size: 2.2rem;

    }

    .count-box small {

        font-size: .7rem;

        letter-spacing: 1px;

    }

    .subscription-card {

        padding: 35px;

        border-radius: 28px;

    }

    .subscription-card h3 {

        font-size: 1.6rem;

    }

    .custom-input {

        height: 62px;

        padding-left: 54px;

    }

    .custom-btn {

        height: 64px;

        font-size: .9rem;

    }

    .section-title h2 {

        font-size: 2rem;

    }

    .section-title p {

        font-size: 1rem;

    }

    .service-card {

        padding: 32px;

    }

    .service-card h3 {

        font-size: 1.5rem;

    }

    .quote-box {

        padding: 40px;

    }

    .quote-box h2 {

        font-size: 1.8rem;

    }

    .quote-box p {

        font-size: 1rem;

    }

    .stat-card {

        padding: 35px;

    }

    .stat-card h2 {

        font-size: 3rem;

    }

    footer {

        padding:
            80px 0
            40px;

        text-align: center;

    }

    .footer-description {

        max-width: 100%;

    }

    .footer-title::after {

        left: 50%;

        transform:
            translateX(-50%);

    }

    .footer-contact li {

        justify-content: center;

    }

    .social-icons {

        justify-content: center;

    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

}

/* =========================================================
   MOBILE PORTRAIT
   <= 576px
========================================================= */

@media(max-width:576px){

    .hero-section {

        padding-top: 150px;

    }

    .hero-content h1 {

        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );

        letter-spacing: -1px;

    }

    .hero-description {

        font-size: .92rem;

    }

    .hero-badges {

        gap: 10px;

    }

    .badge-item {

        font-size: .8rem;

        padding:
            12px 18px;

    }

    .countdown-wrapper {

        gap: 10px;

    }

    .count-box {

        width: 92px;
        height: 92px;

        border-radius: 18px;

    }

    .count-box span {

        font-size: 1.8rem;

    }

    .count-box small {

        font-size: .6rem;

    }

    .subscription-card {

        padding: 28px;

    }

    .subscription-card h3 {

        font-size: 1.4rem;

        line-height: 1.5;

    }

    .subscription-card p {

        font-size: .92rem;

    }

    .custom-input {

        height: 58px;

        font-size: .92rem;

    }

    .custom-btn {

        height: 60px;

        font-size: .82rem;

        letter-spacing: 1px;

    }

    .section-title {

        margin-bottom: 50px;

    }

    .section-title h2 {

        font-size: 1.8rem;

    }

    .section-title p {

        font-size: .92rem;

    }

    .service-card {

        padding: 28px;

    }

    .icon-box {

        width: 80px;
        height: 80px;

        font-size: 1.7rem;

    }

    .quote-box {

        padding: 30px;

    }

    .quote-box h2 {

        font-size: 1.5rem;

    }

    .stat-card {

        padding: 30px;

    }

    .stat-card h2 {

        font-size: 2.5rem;

    }

    .footer-logo {

        max-width: 190px;

    }

    .footer-links a {

        font-size: .92rem;

    }

    .footer-bottom p {

        font-size: .82rem;

    }

    .whatsapp-float {

        width: 65px;
        height: 65px;

        font-size: 1.6rem;

        right: 18px;
        bottom: 18px;

    }

}

/* =========================================================
   EXTRA SMALL DEVICES
   <= 400px
========================================================= */

@media(max-width:400px){

    .hero-content h1 {

        font-size: 1.8rem;

    }

    .hero-description {

        font-size: .88rem;

    }

    .count-box {

        width: 82px;
        height: 82px;

    }

    .count-box span {

        font-size: 1.5rem;

    }

    .count-box small {

        font-size: .55rem;

    }

    .badge-item {

        width: 100%;

        justify-content: center;

        text-align: center;

    }

    .subscription-card {

        padding: 22px;

    }

    .custom-input {

        height: 54px;

    }

    .custom-btn {

        height: 56px;

    }

    .service-card {

        padding: 24px;

    }

    .quote-box {

        padding: 24px;

    }

}

/* =========================================================
   HEIGHT FIXES
========================================================= */

@media(max-height:700px){

    .hero-section {

        min-height: auto;

        padding:
            140px 0
            80px;

    }

}

/* =========================================================
   RETINA / HIGH DPI
========================================================= */

@media(min-resolution:192dpi){

    .main-logo {

        image-rendering:
            -webkit-optimize-contrast;

    }

}