/* =========================================================
   SIMBA CEMENT
   RESPONSIVE STYLESHEET
   ========================================================= */


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   1200px AND BELOW
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --container: 1100px;
    }

    .nav-links {
        gap: 18px;
    }

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

    .nav-cta {
        padding: 0 15px;
    }

    .hero {
        min-height: 650px;
    }

    .hero h1 {
        font-size: clamp(46px, 6vw, 72px);
    }

    .why-simba-container {
        gap: 50px;
    }

    .footer-grid {
        gap: 30px;
    }

}


/* =========================================================
   TABLETS
   992px AND BELOW
   ========================================================= */

@media (max-width: 992px) {

    .section-padding {
        padding: 80px 0;
    }


    /* -----------------------------------------
       TOP BAR
    ----------------------------------------- */

    .top-bar-container {
        min-height: 38px;
    }

    .top-left {
        display: none;
    }

    .top-bar-container {
        justify-content: center;
    }


    /* -----------------------------------------
       NAVIGATION
    ----------------------------------------- */

    .nav-container {
        min-height: 75px;
    }

    .navbar {
        position: fixed;
        top: 75px;
        left: 0;
        width: 100%;
        height: calc(100vh - 75px);
        padding: 30px 5%;
        background: var(--white);
        border-top: 1px solid var(--border);
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);

        transition: var(--transition);
    }

    .navbar.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid var(--border);
    }

    .nav-links a {
        width: 100%;
        height: auto;
        min-height: 55px;
        justify-content: space-between;
        font-size: 15px;
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links a.active {
        color: var(--primary);
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        min-height: 620px;

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.87),
                rgba(0, 0, 0, 0.58)
            ),
            url("../images/hero/cement-hero.jpg")
            center/cover no-repeat;
    }

    .hero-content {
        max-width: 650px;
    }

    .hero h1 {
        font-size: clamp(44px, 7vw, 68px);
    }


    /* -----------------------------------------
       TRUST
    ----------------------------------------- */

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

    .trust-item:nth-child(2) {
        border-right: none;
    }

    .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }


    /* -----------------------------------------
       PRODUCTS
    ----------------------------------------- */

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

    .product-card:last-child {
        grid-column: 1 / -1;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }


    /* -----------------------------------------
       WHY SIMBA
    ----------------------------------------- */

    .why-simba-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-simba-image {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .why-simba-image > img {
        height: 500px;
    }

    .why-simba-content {
        max-width: 700px;
        margin: 0 auto;
    }


    /* -----------------------------------------
       STEPS
    ----------------------------------------- */

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .step-card {
        padding: 35px 20px;
    }


    /* -----------------------------------------
       DELIVERY
    ----------------------------------------- */

    .delivery-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .delivery-content {
        max-width: 700px;
    }

    .delivery-image {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

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


    /* -----------------------------------------
       FINAL CTA
    ----------------------------------------- */

    .final-cta-container {
        flex-direction: column;
        align-items: flex-start;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 30px;
    }

}


/* =========================================================
   MOBILE LANDSCAPE / LARGE PHONES
   768px AND BELOW
   ========================================================= */

@media (max-width: 768px) {

    .container {
        width: min(92%, 600px);
    }

    .section-padding {
        padding: 70px 0;
    }


    /* -----------------------------------------
       TOP BAR
    ----------------------------------------- */

    .top-right {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .top-right a {
        font-size: 11px;
    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .nav-container {
        min-height: 70px;
    }

    .navbar {
        top: 70px;
        height: calc(100vh - 70px);
    }

    .logo img {
        width: 46px;
        height: 46px;
    }

    .logo-title {
        font-size: 20px;
    }

    .logo-subtitle {
        font-size: 8px;
    }

    .nav-icon {
        width: 39px;
        height: 39px;
    }

    .cart-icon {
        width: 39px;
        height: 39px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        min-height: 650px;
    }

    .hero-content {
        padding: 70px 0;
    }

    .hero-tag {
        font-size: 9px;
    }

    .hero h1 {
        margin-bottom: 20px;
        font-size: clamp(40px, 10vw, 58px);
        letter-spacing: -2px;
    }

    .hero p {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-buttons {
        margin-bottom: 35px;
    }

    .hero-features {
        gap: 20px;
    }

    .hero-feature strong {
        font-size: 12px;
    }

    .hero-feature span {
        font-size: 10px;
    }


    /* -----------------------------------------
       TRUST
    ----------------------------------------- */

    .trust-section {
        margin-top: -30px;
    }

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

    .trust-item,
    .trust-item:nth-child(2) {
        min-height: 85px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .trust-item:last-child {
        border-bottom: none;
    }


    /* -----------------------------------------
       SECTION HEADINGS
    ----------------------------------------- */

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 35px;
    }

    .section-heading h2,
    .why-simba-content h2,
    .delivery-content h2,
    .final-cta h2 {
        font-size: 34px;
    }


    /* -----------------------------------------
       PRODUCTS
    ----------------------------------------- */

    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .product-image {
        height: 330px;
    }

    .product-info {
        padding: 22px;
    }

    .quick-view {
        opacity: 1;
        transform: translate(-50%, 0);
    }


    /* -----------------------------------------
       WHY SIMBA
    ----------------------------------------- */

    .why-simba-section {
        padding: 70px 0;
    }

    .why-simba-image > img {
        height: 420px;
    }

    .experience-card {
        right: 15px;
        bottom: 20px;
        width: 160px;
        padding: 20px;
    }

    .experience-card strong {
        font-size: 18px;
    }


    /* -----------------------------------------
       STEPS
    ----------------------------------------- */

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .step-card {
        padding: 35px 25px;
    }


    /* -----------------------------------------
       BULK
    ----------------------------------------- */

    .bulk-section {
        min-height: 500px;
    }

    .bulk-content h2 {
        font-size: 40px;
    }


    /* -----------------------------------------
       DELIVERY
    ----------------------------------------- */

    .delivery-image img {
        height: 380px;
    }

    .delivery-image::after {
        right: -10px;
        bottom: -10px;
    }


    /* -----------------------------------------
       FINAL CTA
    ----------------------------------------- */

    .final-cta {
        padding: 60px 0;
    }

    .final-cta-container {
        gap: 25px;
    }

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

    .final-cta-buttons .btn {
        flex: 1;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer {
        padding-top: 60px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        padding: 20px 0;
        flex-direction: column;
        align-items: flex-start;
    }


    /* -----------------------------------------
       WHATSAPP
    ----------------------------------------- */

    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 52px;
        height: 52px;
        min-height: 52px;
        padding: 0;
        justify-content: center;
    }

    .whatsapp-float span {
        display: none;
    }

}


/* =========================================================
   SMALL PHONES
   576px AND BELOW
   ========================================================= */

@media (max-width: 576px) {

    .container {
        width: 91%;
    }


    /* -----------------------------------------
       TOP BAR
    ----------------------------------------- */

    .top-bar {
        display: none;
    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .nav-container {
        min-height: 66px;
    }

    .navbar {
        top: 66px;
        height: calc(100vh - 66px);
    }

    .logo {
        gap: 7px;
    }

    .logo img {
        width: 42px;
        height: 42px;
    }

    .logo-title {
        font-size: 18px;
    }

    .logo-subtitle {
        font-size: 7px;
        letter-spacing: 3px;
    }

    .nav-actions {
        gap: 7px;
    }

    .nav-icon,
    .cart-icon {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }


    /* -----------------------------------------
       SEARCH
    ----------------------------------------- */

    .search-overlay {
        padding-top: 100px;
    }

    .search-container {
        width: 92%;
        padding: 30px 20px;
    }

    .search-container h2 {
        padding-right: 30px;
        font-size: 22px;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form button {
        min-height: 48px;
        justify-content: center;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        min-height: 670px;
    }

    .hero-content {
        padding: 60px 0;
    }

    .hero-tag {
        max-width: 100%;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .hero h1 {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1.02;
    }

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

    .hero-buttons {
        width: 100%;
        flex-direction: column;
    }

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

    .hero-features {
        flex-direction: column;
        gap: 15px;
    }


    /* -----------------------------------------
       SECTIONS
    ----------------------------------------- */

    .section-padding {
        padding: 60px 0;
    }

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

    .section-heading h2,
    .why-simba-content h2,
    .delivery-content h2,
    .final-cta h2 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .section-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    /* -----------------------------------------
       TRUST
    ----------------------------------------- */

    .trust-item {
        padding: 16px;
    }

    .trust-icon {
        width: 43px;
        height: 43px;
        font-size: 16px;
    }


    /* -----------------------------------------
       PRODUCTS
    ----------------------------------------- */

    .product-image {
        height: 300px;
    }

    .product-image img {
        width: 68%;
    }

    .product-info h3 {
        font-size: 19px;
    }

    .product-info p {
        font-size: 12px;
    }

    .product-price strong {
        font-size: 18px;
    }


    /* -----------------------------------------
       WHY SIMBA
    ----------------------------------------- */

    .why-simba-section {
        padding: 60px 0;
    }

    .why-simba-image > img {
        height: 350px;
    }

    .experience-card {
        right: 10px;
        bottom: 10px;
        width: 140px;
        padding: 16px;
    }

    .experience-card strong {
        font-size: 16px;
    }

    .experience-card span {
        font-size: 9px;
    }

    .why-simba-content > p {
        font-size: 13px;
    }

    .benefit h3 {
        font-size: 14px;
    }

    .benefit p {
        font-size: 11px;
    }


    /* -----------------------------------------
       HOW IT WORKS
    ----------------------------------------- */

    .step-card {
        padding: 30px 20px;
    }

    .step-icon {
        width: 65px;
        height: 65px;
        font-size: 21px;
    }

    .step-card h3 {
        font-size: 17px;
    }


    /* -----------------------------------------
       BULK
    ----------------------------------------- */

    .bulk-section {
        min-height: 530px;
    }

    .bulk-content h2 {
        font-size: 34px;
    }

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

    .bulk-buttons {
        flex-direction: column;
    }

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


    /* -----------------------------------------
       DELIVERY
    ----------------------------------------- */

    .delivery-image img {
        height: 300px;
    }

    .delivery-features {
        gap: 12px;
    }


    /* -----------------------------------------
       FINAL CTA
    ----------------------------------------- */

    .final-cta {
        padding: 50px 0;
    }

    .final-cta-buttons {
        flex-direction: column;
    }

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


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-column {
        width: 100%;
    }

    .footer-bottom {
        gap: 12px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 12px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   400px AND BELOW
   ========================================================= */

@media (max-width: 400px) {

    .container {
        width: 90%;
    }

    .logo-text {
        display: none;
    }

    .nav-icon {
        display: none;
    }

    .hero {
        min-height: 650px;
    }

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

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

    .product-image {
        height: 270px;
    }

    .product-info {
        padding: 18px;
    }

    .product-bottom {
        align-items: center;
    }

    .add-to-cart {
        width: 42px;
        height: 42px;
    }

    .why-simba-image > img {
        height: 300px;
    }

    .experience-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: -5px;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .delivery-image::after {
        display: none;
    }

}


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

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

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

    .nav-links a {
        min-height: 45px;
    }

    .hero {
        min-height: 600px;
    }

    .hero-content {
        padding: 45px 0;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .top-bar,
    .header,
    .whatsapp-float,
    .search-overlay,
    .hero-buttons,
    .nav-actions,
    .final-cta {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .hero {
        min-height: auto;
        color: #000;
        background: none;
    }

}