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

@media (max-width: 1400px) {

    .container {
        max-width: 1140px;
    }

    .hero h1 {
        font-size: 64px;
    }

}

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

@media (max-width: 1200px) {

    section {
        padding: 90px 6%;
    }

    .navbar {
        width: 94%;
    }

    .hero h1 {
        font-size: 56px;
    }

    .hero p {
        font-size: 17px;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

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

@media (max-width: 992px) {

    .menu-btn {
        display: block;
        z-index: 1002;
    }

    .quote-btn {
        display: none;
    }

    .nav-links {

        position: fixed;

        top: 90px;
        right: -100%;

        width: 280px;
        height: calc(100vh - 90px);

        background: #111;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        padding-top: 50px;

        gap: 30px;

        transition: .4s;

    }

    .nav-links.active {

        right: 0;

    }

    .nav-links li a {

        color: white;

        font-size: 18px;

    }

    .hero {

        text-align: center;

    }

    .hero h1 {

        font-size: 48px;

    }

    .hero h4 {

        font-size: 20px;

    }

    .hero p {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .container {

        flex-direction: column;

    }

    .why-us .container,
    .about .container {

        display: flex;

        flex-direction: column;

        gap: 40px;

    }

    .left,
    .right,
    .about-image,
    .about-text {

        width: 100%;

    }

    .gallery {

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

    }

    .service-grid {

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

        gap: 25px;

    }

    .counter-section {

        display: grid;

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

        gap: 30px;

    }

}

/*==========================================
            MOBILE DEVICES
==========================================*/

@media (max-width: 768px) {

    section {

        padding: 70px 20px;

    }

    h2 {

        font-size: 34px;

    }

    .navbar {

        height: 80px;

    }

    .logo {

        font-size: 28px;

    }

    .hero {

        min-height: 100vh;

        padding-top: 80px;

    }

    .hero h1 {

        font-size: 40px;

        line-height: 1.3;

    }

    .hero p {

        font-size: 15px;

        width: 100%;

    }

    .btn-primary,
    .btn-secondary {

        width: 240px;

        text-align: center;

    }

    .service-grid {

        grid-template-columns: 1fr;

    }

    .gallery {

        grid-template-columns: 1fr;

    }

    .counter-section {

        grid-template-columns: 1fr;

    }

    .contact form {

        width: 100%;

    }

    .contact input,
    .contact textarea {

        width: 100%;

    }

    footer {

        text-align: center;

    }

}

/*==========================================
            SMALL PHONES
==========================================*/

@media (max-width: 576px) {

    .hero h1 {

        font-size: 32px;

    }

    .hero h4 {

        font-size: 16px;

        letter-spacing: 2px;

    }

    h2 {

        font-size: 30px;

    }

    p {

        font-size: 14px;

    }

    .logo {

        font-size: 24px;

    }

    .service-card {

        padding: 30px 20px;

    }

    .counter {

        padding: 25px;

    }

    .swiper-slide {

        padding: 30px 20px;

    }

    .contact {

        padding-bottom: 60px;

    }

    .contact button {

        width: 100%;

    }

}

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

@media (max-width: 400px) {

    .hero h1 {

        font-size: 28px;

    }

    .hero p {

        font-size: 13px;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

    }

    .logo {

        font-size: 22px;

    }

}

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

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

    .hero {

        min-height: auto;

        padding: 120px 20px 80px;

    }

    .hero h1 {

        font-size: 42px;

    }

}

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

img {

    max-width: 100%;

    height: auto;

}

/*==========================================
            TABLE RESPONSIVENESS
==========================================*/

table {

    width: 100%;

    display: block;

    overflow-x: auto;

}

/*==========================================
            FORM ELEMENTS
==========================================*/

input,
textarea,
button {

    font-size: 16px;

}

/*==========================================
            SMOOTH MOBILE SCROLL
==========================================*/

html {

    -webkit-text-size-adjust: 100%;

}

body {

    overflow-x: hidden;

}