/* =========================================================
REXUS88 GARAGE
MOTO GARAGE DARK
RESPONSIVE STYLESHEET
========================================================= */

/* =========================================================
01. LARGE TABLET / SMALL LAPTOP
1200px
========================================================= */

@media (max-width: 1200px) {


/* CONTAINER */

.container {

    width: min(
        calc(100% - 40px),
        1100px
    );

}


/* HEADER */

.main-nav {

    gap: 20px;

}


.main-nav a {

    font-size: 14px;

}


/* HERO */

.hero {

    min-height: 820px;

}


.hero-content {

    max-width: 760px;

}


.hero-number {

    right: 2%;

    font-size: 14rem;

}


/* PRODUCT */

.products-grid {

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

    gap: 18px;

}


.product-info {

    padding: 20px;

}


.product-info h3 {

    font-size: 28px;

}


/* REVIEWS */

.reviews-grid {

    gap: 16px;

}


.review-card {

    padding: 25px;

}


/* CONTACT */

.contact-grid {

    gap: 45px;

}


.contact-form-wrapper {

    padding: 35px;

}


/* FOOTER */

.footer-main {

    gap: 35px;

}


}

/* =========================================================
02. TABLET
992px
========================================================= */

@media (max-width: 992px) {


/* GENERAL */

.container {

    width: min(
        calc(100% - 36px),
        850px
    );

}


.section-space {

    padding-block: 85px;

}


h1 {

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

}


h2 {

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

}


/* HEADER */

.header-inner {

    min-height: 76px;

}


.main-nav {

    gap: 15px;

}


.main-nav a {

    font-size: 12px;

    letter-spacing: .04em;

}


.logo-mark {

    width: 39px;

    height: 39px;

}


.logo-text strong {

    font-size: 23px;

}


.logo-text small {

    font-size: 6px;

}


/* HERO */

.hero {

    min-height: 760px;

}


.hero-content {

    padding-top: 80px;

}


.hero-content p {

    max-width: 520px;

    font-size: 15px;

}


.hero-number {

    font-size: 11rem;

    right: -1%;

    bottom: 7%;

}


/* PAGE HERO */

.page-hero {

    min-height: 490px;

}


.page-hero-content {

    padding-bottom: 60px;

}


/* SECTION HEADING */

.section-heading {

    margin-bottom: 40px;

}


/* PRODUCT GRID */

.products-grid {

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

}


.card-grid {

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

}


/* DETAIL */

.product-detail {

    padding-block: 85px;

}


.product-detail-grid {

    gap: 40px;

}


.product-detail-info h1 {

    font-size:
        clamp(
            3.5rem,
            8vw,
            5.5rem
        );

}


/* ABOUT */

.about-story-grid {

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

}


.about-stats {

    gap: 10px;

}


.about-stat {

    padding: 18px;

}


.about-stat strong {

    font-size: 34px;

}


/* REVIEWS */

.reviews-grid {

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

}


.reviews-grid
.review-card:last-child {

    grid-column: 1 / -1;

}


/* FAQ */

.faq-intro-grid {

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

}


.faq-category {

    grid-template-columns:
        220px 1fr;

    gap: 35px;

}


.faq-links-grid {

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

}


/* CONTACT */

.contact-grid {

    grid-template-columns:
        1fr;

    gap: 60px;

}


.contact-info {

    max-width: 700px;

}


.garage-location {

    min-height: 580px;

}


/* FOOTER */

.footer-main {

    grid-template-columns:
        1.5fr 1fr 1fr;

}


.footer-contact {

    grid-column: 1 / -1;

}


}

/* =========================================================
03. MOBILE LANDSCAPE / SMALL TABLET
768px
========================================================= */

@media (max-width: 768px) {


/* =====================================================
   GENERAL
===================================================== */

.container {

    width: calc(100% - 30px);

}


.section-space {

    padding-block: 70px;

}


h1 {

    font-size:
        clamp(
            3.2rem,
            13vw,
            5rem
        );

}


h2 {

    font-size:
        clamp(
            2.7rem,
            11vw,
            4rem
        );

}


.section-heading {

    display: block;

}


.section-heading .text-link {

    display: inline-block;

    margin-top: 20px;

}


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

.site-header {

    background:
        rgba(5,5,5,.75);

    backdrop-filter:
        blur(10px);

}


.header-inner {

    min-height: 70px;

}


.main-nav {

    display: none;

}


.header-button {

    display: inline-flex;

    padding: 9px 12px;

    font-size: 11px;

}


.logo-mark {

    width: 37px;

    height: 37px;

    font-size: 23px;

}


.logo-text strong {

    font-size: 22px;

}


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

.hero {

    min-height: 720px;

    align-items: end;

}


.hero-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.88) 55%,
            rgba(0,0,0,.98)
        );

}


.hero-content {

    padding-top: 120px;

    padding-bottom: 80px;

}


.hero-content h1 {

    margin-top: 17px;

    margin-bottom: 20px;

}


.hero-content p {

    font-size: 14px;

    line-height: 1.75;

}


.hero-buttons {

    margin-top: 27px;

}


.hero-buttons .btn {

    flex: 1 1 180px;

}


.hero-number {

    display: none;

}


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

.page-hero {

    min-height: 430px;

    align-items: end;

}


.page-hero-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.94)
        );

}


.page-hero-content {

    padding-bottom: 48px;

}


.page-hero-content h1 {

    font-size:
        clamp(
            3.3rem,
            14vw,
            5rem
        );

}


.page-hero-content p {

    margin-top: 18px;

    font-size: 13px;

}


/* =====================================================
   BREADCRUMBS
===================================================== */

.breadcrumbs .container {

    min-height: 50px;

}


.breadcrumbs ol {

    font-size: 10px;

}


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

.btn {

    min-height: 50px;

    padding-inline: 20px;

    font-size: 13px;

}


/* =====================================================
   PRODUCT GRID
===================================================== */

.products-grid,
.card-grid {

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

    gap: 12px;

}


.product-image {

    aspect-ratio: 1 / .88;

}


.product-info {

    padding: 16px;

}


.product-info h3 {

    font-size: 24px;

}


.product-info p {

    font-size: 11px;

}


.product-meta {

    margin-top: 15px;

    padding-top: 13px;

}


.product-price {

    font-size: 20px;

}


.product-link {

    font-size: 10px;

}


.product-badge {

    top: 9px;

    left: 9px;

    padding: 5px 7px;

    font-size: 8px;

}


/* =====================================================
   FILTER
===================================================== */

.product-filters {

    display: block;

}


.filter-list {

    gap: 6px;

}


.filter-button {

    padding: 7px 10px;

    font-size: 10px;

}


/* =====================================================
   PRODUCT DETAIL
===================================================== */

.product-detail {

    padding-block: 65px;

}


.product-detail-grid {

    gap: 35px;

}


.product-detail-info h1 {

    font-size:
        clamp(
            3.3rem,
            14vw,
            5rem
        );

}


.detail-price {

    font-size: 31px;

}


.spec-grid {

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

}


.spec-item {

    padding: 15px;

}


.spec-item strong {

    font-size: 17px;

}


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

.about-story-grid {

    grid-template-columns:
        1fr;

    gap: 45px;

}


.about-image {

    max-width: 620px;

}


.about-image::after {

    right: -10px;

    bottom: -10px;

}


.about-content h2 {

    margin-top: 15px;

}


.about-stats {

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

}


.about-stat strong {

    font-size: 30px;

}


.about-stat span {

    font-size: 8px;

}


/* =====================================================
   REVIEWS
===================================================== */

.reviews-grid {

    grid-template-columns:
        1fr;

}


.reviews-grid
.review-card:last-child {

    grid-column: auto;

}


.review-card {

    padding: 24px;

}


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

.faq-intro-grid {

    grid-template-columns:
        1fr;

    gap: 35px;

}


.faq-intro-image {

    order: -1;

}


.faq-intro-image img {

    aspect-ratio: 16 / 10;

}


.faq-category {

    grid-template-columns:
        1fr;

    gap: 25px;

    padding-block: 40px;

}


.faq-category-heading h2 {

    font-size: 34px;

}


.faq-item summary {

    font-size: 18px;

}


.faq-answer {

    padding-right: 20px;

}


.faq-links-grid {

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

}


.faq-link-card {

    min-height: 150px;

    padding: 20px;

}


.faq-link-card strong {

    font-size: 24px;

}


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

.faq-feature-banner {

    min-height: 500px;

}


.faq-feature-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.95)
        );

}


.faq-feature-content {

    padding-block: 60px;

}


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

.contact-grid {

    gap: 45px;

}


.contact-form-wrapper {

    padding: 25px 20px;

}


.form-row {

    grid-template-columns:
        1fr;

    gap: 0;

}


.contact-form {

    margin-top: 27px;

}


.contact-item {

    padding-block: 17px;

}


.contact-item strong,
.contact-item a {

    font-size: 18px;

}


.garage-location {

    min-height: 560px;

}


.garage-location-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.94)
        );

}


.garage-location-content {

    padding-block: 70px;

}


.location-meta {

    gap: 25px;

}


.contact-faq-grid {

    grid-template-columns:
        1fr;

}


.contact-final-cta {

    padding-block: 75px;

}


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

.footer-main {

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

    gap: 40px 25px;

    padding-block: 55px;

}


.footer-brand {

    grid-column: 1 / -1;

}


.footer-contact {

    grid-column: auto;

}


.footer-bottom {

    flex-direction: column;

    justify-content: center;

    padding-block: 20px;

    text-align: center;

}


}

/* =========================================================
04. MOBILE
576px
========================================================= */

@media (max-width: 576px) {


/* =====================================================
   GENERAL
===================================================== */

.container {

    width: calc(100% - 24px);

}


.section-space {

    padding-block: 58px;

}


.eyebrow {

    font-size: 10px;

    letter-spacing: .14em;

}


.eyebrow::before {

    width: 20px;

}


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

.header-inner {

    min-height: 64px;

}


.logo {

    gap: 8px;

}


.logo-mark {

    width: 34px;

    height: 34px;

    font-size: 21px;

}


.logo-text strong {

    font-size: 20px;

}


.logo-text small {

    font-size: 5px;

    letter-spacing: .14em;

}


.header-button {

    padding: 8px 10px;

}


.header-button span {

    display: none;

}


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

.hero {

    min-height: 680px;

}


.hero-content {

    padding-bottom: 65px;

}


.hero-content h1 {

    font-size:
        clamp(
            3rem,
            17vw,
            4.3rem
        );

}


.hero-content p {

    font-size: 13px;

}


.hero-buttons {

    flex-direction: column;

}


.hero-buttons .btn {

    width: 100%;

}


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

.page-hero {

    min-height: 390px;

}


.page-hero-content {

    padding-bottom: 38px;

}


.page-hero-content h1 {

    font-size:
        clamp(
            3rem,
            16vw,
            4.4rem
        );

}


.page-hero-content p {

    font-size: 12px;

    line-height: 1.65;

}


/* =====================================================
   BREADCRUMB
===================================================== */

.breadcrumbs .container {

    min-height: 46px;

}


.breadcrumbs ol {

    font-size: 9px;

    gap: 7px;

}


.breadcrumbs li:not(:last-child)::after {

    margin-left: 7px;

}


/* =====================================================
   PRODUCT GRID
===================================================== */

.products-grid,
.card-grid {

    grid-template-columns:
        1fr;

    gap: 15px;

}


.product-image {

    aspect-ratio: 16 / 10;

}


.product-info {

    padding: 19px;

}


.product-info h3 {

    font-size: 28px;

}


.product-info p {

    font-size: 12px;

}


.product-price {

    font-size: 22px;

}


/* =====================================================
   PRODUCT DETAIL
===================================================== */

.product-detail {

    padding-block: 55px;

}


.product-detail-info h1 {

    font-size:
        clamp(
            3rem,
            16vw,
            4.5rem
        );

}


.detail-actions {

    flex-direction: column;

}


.detail-actions .btn {

    width: 100%;

}


.spec-grid {

    grid-template-columns:
        1fr 1fr;

}


.spec-item {

    padding: 13px 11px;

}


.spec-item span {

    font-size: 8px;

}


.spec-item strong {

    font-size: 15px;

}


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

.about-stats {

    grid-template-columns:
        1fr;

}


.about-stat {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 17px;

}


.about-stat strong {

    font-size: 32px;

}


.about-stat span {

    margin-top: 0;

    text-align: right;

}


/* =====================================================
   REVIEWS
===================================================== */

.review-card {

    padding: 21px;

}


.review-card blockquote {

    font-size: 13px;

}


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

.faq-intro-image img {

    aspect-ratio: 4 / 3;

}


.faq-category {

    padding-block: 32px;

}


.faq-category-heading h2 {

    font-size: 31px;

}


.faq-item summary {

    font-size: 17px;

    padding-block: 19px;

}


.faq-answer p {

    font-size: 12px;

}


.faq-links-grid {

    grid-template-columns:
        1fr;

}


.faq-link-card {

    min-height: 125px;

}


.faq-feature-banner {

    min-height: 470px;

}


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

.contact-info h2,
.form-heading h2 {

    font-size:
        clamp(
            2.8rem,
            14vw,
            4rem
        );

}


.contact-item {

    gap: 12px;

}


.contact-icon {

    width: 35px;

    height: 35px;

    font-size: 10px;

}


.contact-item strong,
.contact-item a {

    font-size: 17px;

}


.contact-item p {

    font-size: 10px;

}


.contact-form-wrapper {

    padding: 23px 16px;

}


.form-group input,
.form-group select,
.form-group textarea {

    padding: 13px;

    font-size: 13px;

}


.form-submit {

    align-items: stretch;

    flex-direction: column;

}


.form-submit .btn {

    width: 100%;

}


.form-submit small {

    max-width: none;

}


.garage-location {

    min-height: 520px;

}


.garage-location-content {

    padding-block: 60px;

}


.location-meta {

    display: grid;

    grid-template-columns:
        1fr;

    gap: 18px;

}


.garage-location-content .btn {

    width: 100%;

}


.mini-faq summary {

    font-size: 16px;

}


.mini-faq p {

    font-size: 11px;

}


.contact-final-inner h2 {

    font-size:
        clamp(
            2.8rem,
            14vw,
            4rem
        );

}


.cta-buttons {

    flex-direction: column;

}


.cta-buttons .btn {

    width: 100%;

}


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

.footer-main {

    grid-template-columns:
        1fr;

    gap: 35px;

    padding-block: 48px;

}


.footer-brand,
.footer-contact {

    grid-column: auto;

}


.footer-column h3 {

    font-size: 18px;

}


.footer-bottom {

    font-size: 9px;

}


.footer-legal {

    gap: 15px;

}


}

/* =========================================================
05. VERY SMALL MOBILE
400px
========================================================= */

@media (max-width: 400px) {


.container {

    width: calc(100% - 20px);

}


.logo-text small {

    display: none;

}


.header-button {

    font-size: 9px;

}


.hero {

    min-height: 640px;

}


.hero-content h1 {

    font-size:
        clamp(
            2.8rem,
            17vw,
            3.8rem
        );

}


.page-hero-content h1 {

    font-size:
        clamp(
            2.8rem,
            17vw,
            4rem
        );

}


.product-info h3 {

    font-size: 25px;

}


.spec-grid {

    grid-template-columns:
        1fr;

}


.spec-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.spec-item span {

    margin-bottom: 0;

}


.spec-item strong {

    text-align: right;

}


.contact-form-wrapper {

    padding: 20px 13px;

}


}

/* =========================================================
06. REDUCED MOTION
========================================================= */

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


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

    scroll-behavior: auto !important;

    transition-duration:
        .01ms !important;

    animation-duration:
        .01ms !important;

    animation-iteration-count:
        1 !important;

}


}