/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

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

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

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-nav {
        display: none;
    }
}

/* =========================================================
   900PX
========================================================= */

@media (max-width: 900px) {

    .nav {
        min-height: 70px;
    }

    .hamburger {
        display: block;
    }

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

    .nav-links {
        position: fixed;

        top: 0;
        right: -100%;

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

        height: 100vh;

        padding: 110px 35px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;

        background: #ffffff;

        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.15);

        transition: 0.4s ease;

        z-index: 10001;
        overflow-y: auto;
        height: 100dvh;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 21px;
        font-weight: 700;
    }

    .hero {
        min-height: 90svh;

        padding-top: 135px;
    }

    .hero h1 {
        font-size: clamp(42px, 8vw, 65px);
    }

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-image {
        position: relative;

        top: auto;

        align-self: auto;
    }

    .about-content {
        max-width: none;
    }

    .about-image img {
        height: 450px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .map-card {
        min-height: 400px;
    }
}

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

@media (max-width: 768px) {

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

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

    .logo {
        font-size: 18px;
    }

    .logo-mark {
        width: 5px;
        height: 24px;
    }

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

    .hero {
        min-height: auto;

        padding: 125px 20px 75px;

        background-position: center center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.88) 0%,
                rgba(5, 5, 5, 0.78) 45%,
                rgba(5, 5, 5, 0.58) 100%
            );
    }

    .hero-content {
        align-items: center;

        text-align: center;
    }

    .hero-badge {
        font-size: 11px;

        padding: 7px 12px;
    }

    .hero h1 {
        font-size: 39px;

        letter-spacing: -1.5px;
    }

    .hero h1::after {
        width: 9px;
        height: 9px;

        margin-left: 5px;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;

        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

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

    .hero-info {
        grid-template-columns: 1fr;

        margin-top: 25px;
    }

    .hero-info-item {
        min-height: 75px;
    }
    
    .hero-info-item:last-child {
        grid-column: auto;
    }

    /* =====================================================
       SECTIONS
    ===================================================== */

    .section {
        padding: 75px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 33px;
    }

    .section-heading p {
        font-size: 15px;
    }

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

    .about-section {
        padding: 75px 0;
    }

    .about-heading {
        margin-bottom: 35px;
    }

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-image {
        position: relative;

        top: auto;

        align-self: auto;
    }

    .about-image img {
        height: 340px;
    }

    .image-accent {
        width: 60px;
        height: 60px;

        right: -10px;
        bottom: -10px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-content p {
        font-size: 15px;
    }

    .about-eyebrow {
        font-size: 11px;
    }

    /* =====================================================
       GENERATION
    ===================================================== */

    .about-generation {
        padding: 14px;

        gap: 12px;
    }

    .generation-icon {
        width: 48px;
        height: 48px;

        font-size: 22px;
    }

    .generation-content > span {
        font-size: 10px;
    }

    .generation-content strong {
        font-size: 15px;
    }

    .generation-content p {
        font-size: 13px;
    }

    /* =====================================================
       GOOGLE
    ===================================================== */

    .google-rating {
        padding: 14px;

        gap: 11px;
    }

    .google-rating-icon {
        width: 48px;
        height: 48px;

        font-size: 22px;
    }

    .google-rating-main {
        gap: 6px;
    }

    .google-rating-main strong {
        font-size: 14px;
    }

    .google-stars {
        font-size: 13px;
    }

    .google-rating-content p {
        font-size: 13px;
    }

    .google-rating-link {
        width: 36px;
        height: 36px;

        font-size: 16px;
    }

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

    .about-list {
        grid-template-columns: 1fr;
    }

    .about-list div {
        font-size: 14px;
    }

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

    .cards {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .card {
        min-height: auto;

        padding: 26px 22px;
    }

    .card h3 {
        font-size: 19px;
    }

    .card p {
        font-size: 14px;
    }

    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .gallery-card {
        height: 330px;
    }

    .gallery-overlay p {
        font-size: 13px;
    }

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

    .cta {
        padding: 85px 20px;
    }

    .cta h2 {
        font-size: 34px;
    }

    .cta p {
        font-size: 15px;
    }

    .cta-buttons {
        flex-direction: column;

        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
    }

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

    .contact-section {
        padding: 75px 0;
    }

    .contact-card {
        padding: 25px;
    }

    .contact-card-header h3 {
        font-size: 18px;
    }

    .contact-detail {
        padding: 13px 10px;
    }

    .contact-detail strong {
        font-size: 14px;
    }

    .contact-detail span {
        font-size: 12px;
    }

    .contact-hours strong {
        font-size: 14px;
    }

    .phone-list a {
        font-size: 14px;
    }

    .map-card {
        min-height: 350px;
    }

    .map-button {
        left: 15px;
        right: 15px;

        justify-content: center;

        font-size: 13px;
    }

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

    .footer {
        padding-top: 50px;
    }

    .footer-content {
        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;
    }

    .footer-brand {
        margin: 0 auto;
    }

    .footer-contact {
        align-items: center;
    }

    .footer-contact a,
    .footer-contact span {
        font-size: 14px;
    }

    .footer-bottom .container {
        flex-direction: column;

        text-align: center;

        gap: 5px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

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

@media (max-width: 480px) {

    .logo {
        font-size: 16px;
    }

    .hero {
        padding: 115px 18px 65px;
    }

    .hero-badge {
        font-size: 10px;
    }

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

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

    .hero-info-item strong {
        font-size: 24px;
    }

    /* =====================================================
       SECTIONS
    ===================================================== */

    .section {
        padding: 65px 0;
    }

    .section-heading h2 {
        font-size: 29px;
    }

    .section-heading p {
        font-size: 15px;
    }

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

    .about-section {
        padding: 65px 0;
    }

    .about-heading {
        margin-bottom: 35px;
    }

    .about-content h2 {
        font-size: 29px;
    }

    .about-content p {
        font-size: 15px;
    }

    .about-image img {
        height: 280px;
    }

    /* =====================================================
       GENERATION
    ===================================================== */

    .about-generation {
        align-items: flex-start;
    }

    .generation-content strong {
        font-size: 14px;
    }

    .generation-content p {
        font-size: 13px;
    }

    /* =====================================================
       GOOGLE
    ===================================================== */

    .google-rating {
        align-items: flex-start;
    }

    .google-rating-main {
        display: block;
    }

    .google-stars {
        margin-top: 4px;
    }

    .google-rating-main strong {
        font-size: 14px;
    }

    .google-rating-content p {
        font-size: 13px;
    }

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

    .about-list div {
        font-size: 14px;
    }

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

    .card h3 {
        font-size: 18px;
    }

    .card p {
        font-size: 14px;
    }

    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-card {
        height: 285px;
    }

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

    .cta h2 {
        font-size: 32px;
    }

    .cta p {
        font-size: 15px;
    }

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

    .contact-card {
        padding: 20px;
    }

    .contact-detail {
        padding: 12px 5px;

        gap: 11px;
    }

    .contact-icon {
        width: 40px;
        height: 40px;

        font-size: 16px;
    }

    .contact-detail strong {
        font-size: 14px;
    }

    .contact-detail span {
        font-size: 12px;
    }

    .phone-list a {
        font-size: 14px;
    }

    .map-card {
        min-height: 300px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

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

        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .nav-links {
        padding-top: 75px;
        padding-bottom: 25px;

        gap: 16px;
    }

    .nav-links a {
        font-size: 18px;
    }
}