/* =========================================================
   PSK ROOFING V2 - RESPONSIVE CSS
========================================================= */


/* =========================================================
   LARGE DEVICES
   1200px and below
========================================================= */

@media screen and (max-width: 1200px) {

    :root {

        --font-size-h1: 58px;
        --font-size-h2: 42px;
        --font-size-h3: 34px;

    }

    .container-custom {
        max-width: 1140px;
    }

}


/* =========================================================
   MEDIUM DEVICES
   991px and below
========================================================= */

@media screen and (max-width: 991px) {

    :root {

        --section-padding: 90px;

        --font-size-h1: 48px;
        --font-size-h2: 38px;
        --font-size-h3: 30px;
        --font-size-h4: 26px;

    }

    .container-custom {
        max-width: 960px;
    }

    /* =========================
       NAVBAR
    ========================= */

    .main-navbar {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .navbar-wrapper {
        position: relative;
    }

    .navbar-logo img {
        width: 150px;
    }

    .navbar-menu {
        gap: 25px;
    }

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

    .hero-section {

        min-height: auto;

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

    .hero-title {
        font-size: 52px;
    }

    .hero-description {
        font-size: 18px;
        max-width: 90%;
    }

    /* =========================
       GRID SYSTEMS
    ========================= */

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

    .services-layout,
    .projects-layout,
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .cta-section {
        padding: 60px;
    }

}


/* =========================================================
   TABLETS
   767px and below
========================================================= */

@media screen and (max-width: 767px) {

    :root {

        --section-padding: 70px;

        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 26px;
        --font-size-h4: 22px;

    }

    body {
        font-size: 15px;
    }

    .container-custom {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* =========================
       NAVBAR
    ========================= */

    .main-navbar {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-logo img {
        width: 140px;
    }

    .navbar-menu {

        top: 76px;

        height: calc(100vh - 76px);

        padding-top: 50px;
    }

    .navbar-menu li a {
        font-size: 18px;
    }

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

    .hero-section {

        padding-top: 160px;
        padding-bottom: 100px;
    }

    .hero-title {

        font-size: 42px;

        line-height: 1.2;
    }

    .hero-description {

        font-size: 16px;

        max-width: 100%;
    }

    /* =========================
       SECTION HEADERS
    ========================= */

    .section-header {
        margin-bottom: 50px;
    }

    .section-description {
        font-size: 16px;
    }

    /* =========================
       GRID SYSTEMS
    ========================= */

    .grid-2,
    .grid-3,
    .grid-4,
    .services-layout,
    .projects-layout,
    .industry-grid {

        grid-template-columns: 1fr;
    }

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

    .service-card,
    .project-card,
    .industry-card,
    .stats-card {

        padding: 30px;
    }

    .project-image img {
        height: 240px;
    }

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

    .cta-section {
        padding: 40px 30px;
    }

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

    .footer-bottom {

        text-align: center;
    }

}


/* =========================================================
   MOBILE DEVICES
   575px and below
========================================================= */

@media screen and (max-width: 575px) {

    :root {

        --font-size-h1: 34px;
        --font-size-h2: 28px;
        --font-size-h3: 24px;

    }

    .container-custom {
        padding-left: 15px;
        padding-right: 15px;
    }

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

    .hero-section {

        padding-top: 150px;
        padding-bottom: 90px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-description {
        font-size: 15px;
    }

    /* =========================
       BUTTONS
    ========================= */

    .btn-custom {

        width: 100%;

        padding: 15px 20px;
    }

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

    .service-card,
    .industry-card,
    .stats-card {

        padding: 25px;
    }

    .project-content {
        padding: 25px;
    }

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

    .cta-section {
        padding: 35px 25px;
    }

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

    .main-footer {
        padding-top: 70px;
    }

    .footer-bottom {
        margin-top: 50px;
    }

}


/* =========================================================
   SMALL MOBILE DEVICES
   400px and below
========================================================= */

@media screen and (max-width: 400px) {

    .hero-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    .service-title,
    .project-title {
        font-size: 20px;
    }

}