/* ===================================================
   MOBILE ORGANIZATION – SAFE (PC NOT AFFECTED)
   =================================================== */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* ---------- TOPBAR ---------- */
  .topbar {
    display: none;
  }

  /* ---------- NAVBAR ---------- */
  .navbar-brand {
    font-size: 16px;
    white-space: nowrap;
  }

  .navbar-collapse {
    background: #fff;
    border-radius: 16px;
    padding: 12px 0;
    margin-top: 10px;
  }

  .navbar-nav {
    align-items: center;
    text-align: center;
  }

  .navbar-nav .nav-link {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* SEARCH + FOOTER ICONS CENTERED */
/* SEARCH + FOOTER ICONS — PERFECT CENTER */
.nav-search,
.nav-footer-btn {
  margin: 12px 0 0 0 !important; /* kill ms-2 / ms-3 */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


  /* ---------- SEARCH OVERLAY ---------- */
  .search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .search-overlay.active {
    display: flex;
  }

  .search-box {
    width: 100%;
    max-width: 360px;
    padding: 22px 18px;
    border-radius: 16px;
    text-align: center;
  }

  /* ---------- SIDE FOOTER ---------- */
  .side-footer-content {
    width: 100%;
    max-width: 360px;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 16px;
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  /* ---------- SHOP MODAL ---------- */
  .shop-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .shop-modal.active {
    display: flex;
  }

  .shop-modal-content {
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px 18px;
    border-radius: 18px;
    text-align: center;
  }

  .modal-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
  }

  .modal-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
  }

  .modal-line i {
    font-size: 22px;
    margin-top: 4px;
  }

  /* ---------- HERO ---------- */
  .hero-slide h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .hero-slide h5 {
    font-size: 14px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* ---------- INTRO / CARDS ---------- */
  .intro-card,
  .product-card,
  .stat-box,
  .why-step,
  .process-step {
    text-align: center;
  }

  .why-step {
    flex-direction: column;
    gap: 10px;
  }

  .process-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .process-line {
    display: none;
  }

  /* ---------- FOOTER ---------- */
  .footer-top {
    text-align: center;
  }

  .footer-links li,
  .footer-contact li {
    justify-content: center;
  }

}


/* ===================================================
   SHOP MODAL – MOBILE ONLY (PC NOT TOUCHED)
   =================================================== */
@media (max-width: 768px) {

  /* Modal wrapper */
  .shop-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,.75);
    align-items: center;
    justify-content: center;
    padding: 14px;
  }

  .shop-modal.active {
    display: flex;
  }

  /* Modal content */
  .shop-modal-content {
    width: 100%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 18px;
    border-radius: 18px;
    text-align: center;
  }

  /* Close button */
  .shop-modal-content .close-modal {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 26px;
  }

  /* Titles */
  .shop-modal-content h2 {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .shop-modal-content .modal-subtitle {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  /* Category lines */
  .modal-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
  }

  .modal-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.04);
    text-align: left;
  }

  .modal-line i {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 4px;
  }

  .modal-line h4 {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .modal-line span {
    font-size: 13px;
    line-height: 1.4;
    display: block;
  }

  /* Button */
  .shop-modal-content .modal-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 30px;
    text-align: center;
  }

}


/* ===================================================
   HERO BUTTONS – MOBILE ONLY (PC NOT TOUCHED)
   =================================================== */
@media (max-width: 768px) {

  .hero-buttons {
    display: flex;
    flex-direction: column;      /* stack buttons */
    align-items: center;         /* center horizontally */
    gap: 12px;                   /* clean spacing */
    margin-top: 18px;
    width: 100%;
  }

  .hero-buttons a {
    width: 100%;                 /* same width */
    max-width: 260px;            /* not too wide */
    text-align: center;
    padding: 12px 18px;
    font-size: 15px;
    border-radius: 30px;
  }

}


/* ===================================================
   STATS BOX SPACING – MOBILE ONLY
   =================================================== */
@media (max-width: 768px) {

  .stats-section .row {
    row-gap: 16px;   /* space between boxes */
  }

  .stat-box {
    margin-bottom: 0; /* keep clean, spacing handled by row-gap */
  }

}


/* ===================================================
   MARBLE VIDEOS – MOBILE STABLE LAYOUT
   =================================================== */
@media (max-width: 768px) {

  .marble-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
    border-radius: 14px;
    object-fit: cover;
  }

}





/* ===================================================
   FIREPLACE SECTION – MOBILE FIX (Only for Fireplace Section)
   =================================================== */

@media (max-width: 768px) {

  /* FIREPLACE SECTION WRAPPER */
  .fireplace-wrapper {
    display: flex;
    flex-direction: column; /* Stack image and text */
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center; /* Center the text */
  }

  /* FIREPLACE IMAGE */
  .fireplace-image {
    width: 100%; /* Full width image */
    max-width: 300px; /* Limit max size */
    margin-bottom: 20px;
  }

  .fireplace-image img {
    width: 100%; /* Ensure the image takes full width */
    height: auto;
    display: block;
    border-radius: 12px; /* Optional: Add rounded corners */
    margin: 0 auto; /* Center the image */
  }

  /* FIREPLACE TEXT CONTENT */
  .fireplace-text {
    width: 90%; /* Limit text width */
    margin: 0 auto;
    padding: 0 15px;
     padding-left: 10px;
  }

  .fireplace-text h2 {
    font-size: 22px;
     padding-left: 20px;
    margin-bottom: 20px;
    text-align: center; /* Center the heading */
  }

  .fireplace-text p {
    font-size: 16px;
    padding-left: 10px;
    margin-bottom: 20px;
    text-align: center; /* Center the paragraph */
  }

  .fireplace-text ul {
    padding-left: 0;
    list-style: none;
    padding-left: 20px;
  }

  .fireplace-text ul li {
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: 14px;
    text-align: center; /* Center the list items */
  }

}






/* Visual Blocks */
.about-ultra-right {
    width: 48%;
}

.about-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.visual-block {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.visual-block h3 {
    font-size: 18px;
    color: #dc2626;
    margin-bottom: 10px;
}

.visual-block p {
    font-size: 14px;
    color: #555;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .about-ultra {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
        font-size: 16px;
    }

    .about-ultra-left,
    .about-ultra-right {
        width: 100%;
        text-align: center;
    }

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

    .about-ultra-left h1 {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .about-lead {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .about-stats div {
        margin-bottom: 15px;
    }

    .about-stats strong {
        font-size: 16px;
    }

    .about-stats span {
        font-size: 13px;
    }

    .about-visual {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .visual-block {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .visual-block h3 {
        font-size: 16px;
        color: #dc2626;
        margin-bottom: 8px;
    }

    .visual-block p {
        font-size: 12px;
        color: #555;
    }
}



/* For mobile devices */
@media only screen and (max-width: 768px) {

    /* Stack contact-left and contact-right vertically */
    .contact-ultra-pro {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    /* Make sure text content is centered and the heading is responsive */
    .contact-left {
        text-align: center;
        margin-bottom: 20px;
    }

    .contact-left h1 {
        font-size: 24px;
    }

    .contact-left p {
        font-size: 14px;
    }

    /* Adjust image size for mobile */
    .contact-left .direct-visual img {
        width: 100%;
        height: auto;
    }

    /* Make the contact-right section full-width */
    .contact-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Adjust the contact cards layout */
    .contact-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
    }

    .contact-card i {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .contact-card h4 {
        font-size: 16px;
    }

    .contact-card span {
        font-size: 14px;
    }

    /* Ensure the modal looks good on mobile */
    .call-modal, .email-modal {
        padding: 15px;
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .call-option, .email-option {
        font-size: 14px;
        display: block;
        margin: 10px 0;
    }

    .close-call, .close-email {
        margin-top: 20px;
    }

    /* Make the location modal full-width */
    .modal-map iframe {
        width: 100%;
        height: 300px;
        border: 0;
    }

    /* Adjust the trade-readiness section */
    .trade-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .trade-signal {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Adjust the trade-footer for mobile */
    .trade-footer {
        text-align: center;
        font-size: 14px;
        margin-top: 30px;
    }

    /* Adjust the trade-invite section */
    .trade-invite-inner {
        text-align: center;
    }

    .trade-invite-inner h3 {
        font-size: 20px;
    }

    .trade-invite-inner p {
        font-size: 14px;
    }
}



/* Ensure the section takes up full width with padding */
@media (max-width: 768px) {
    .services-ultra {
        display: block;
        padding: 20px;
        position: relative;  /* Make sure this section is relative to avoid shifting */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    /* Left content section */
    .services-ultra-left {
        text-align: center;
        margin-bottom: 30px;
        position: relative;  /* Prevents any potential overflow issues */
    }

    /* Heading and subheading sizes */
    .services-ultra-left h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .services-ultra-left h1 span {
        color: #dc2626;  /* Red color accent */
    }

    .services-intro {
        font-size: 16px;
        margin-top: 20px;
    }

    .services-list div {
        text-align: left;
        margin-bottom: 15px;
    }

    .services-list div strong {
        font-size: 18px;
        color: #333;
    }

    .services-list div span {
        font-size: 14px;
        color: #777;
    }

    /* Visual frame to be centered and responsive */
    .services-ultra-visual {
        display: block;
        margin-top: 20px;
        text-align: center;
        position: relative;  /* Fix the visual section position */
    }

    .visual-frame {
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

    .visual-overlay {
        display: block;
        margin-top: 15px;
        font-size: 14px;
    }

    .visual-overlay span {
        display: block;
        margin: 5px 0;
    }

    /* Service Framework Section */
    .service-framework {
        padding: 30px;
        position: relative;  /* Fix position of framework */
    }

    .framework-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .framework-header h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .framework-header p {
        font-size: 16px;
    }

    /* Flow steps styling */
    .framework-flow {
        display: block;
    }

    .flow-step {
        margin-bottom: 30px;
        text-align: center;
    }

    .step-index {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10px;
    }

    .flow-step h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .flow-step p {
        font-size: 14px;
        color: #fff;
    }

    /* Footer section */
    .services-sign {
        text-align: center;
        margin-top: 30px;
    }

    .services-sign span {
        font-size: 18px;
        font-weight: bold;
    }

    .services-sign em {
        display: block;
        font-size: 14px;
        margin-top: 5px;
        color: #777;
    }
}







/* Mobile View - Max Width 768px */
@media (max-width: 768px) {
    .gypsum-ultra-left {
        font-size: 14px; /* Smaller font size */
        padding: 15px; /* Reduced padding for mobile */
        max-width: 100%; /* Full width on mobile */
        position: relative;
        left: 78px; /* Reset left position */
        margin-left: auto; /* Center the block */
        margin-right: auto; /* Center the block */
        text-align: center; /* Center text */
        width: 100%; /* Force width to 100% */
    }

    .gypsum-ultra-left h1 {
        font-size: 28px; /* Adjust heading size for mobile */
        text-align: center; /* Center the heading text */
    }

    .gypsum-ultra-left p {
        font-size: 14px; /* Smaller text for paragraphs */
        text-align: center; /* Force center alignment on mobile */
        margin-top: 15px; /* Reduced space between paragraphs */
    }

    .gypsum-points {
        margin-top: 15px;
    }

    .gypsum-points div {
        font-size: 14px; /* Smaller text for points */
        margin-bottom: 8px; /* Reduced spacing between points */
    }

    .gypsum-btn {
        font-size: 14px; /* Smaller button text */
        padding: 10px 20px; /* Smaller padding */
        width: 100%; /* Button takes full width on mobile */
        text-align: center; /* Center the button text */
    }
}

/* Mobile View - Max Width 480px (for very small screens) */
@media (max-width: 480px) {
    .gypsum-ultra-left {
        padding: 10px; /* Further reduced padding */
        font-size: 12px; /* Smaller font size for very small screens */
    }

    .gypsum-ultra-left h1 {
        font-size: 24px; /* Make heading smaller on small screens */
    }

    .gypsum-btn {
        font-size: 12px; /* Even smaller button text */
        padding: 8px 16px; /* Adjust button padding */
    }
}










@media (max-width: 768px) {

    /* Ensure the section takes up full width with padding */
    .gypsum-ultra {
        display: block;
        padding: 20px;
    }


    .gypsum-points {
        font-size: 14px;
        margin-top: 15px;
    }

    .gypsum-points div {
        margin-bottom: 10px;
        text-align: left;
    }

    /* Button Styles */
    .gypsum-btn {
        margin-top: 5px;
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        cursor: pointer;
    }

    /* Right content section (gypsum-ultra-right) */
    .gypsum-ultra-right {
        margin-top: 30px;
        display: flex;
        flex-direction: column; /* Stack the cards vertically */
        align-items: flex-start; /* Align the cards to the left */
        width: 100%; /* Make it take up full width */
    }

    .gypsum-card {
        margin-bottom: 15px;
        width: 100%; /* Full width of the container */
        text-align: left;
        padding: 15px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .gypsum-card span {
        font-size: 18px;
        color: #dc2626;
        margin-right: 10px;
    }

    .gypsum-card h4 {
        font-size: 16px;
        color: #333;
    }

    /* Modal */
    .gypsum-ultra-modal {
        display: block;
        padding: 10px;
    }

    .gypsum-ultra-overlay {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .gypsum-ultra-panel {
        padding: 30px;
        border-radius: 8px;
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 50px auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .gypsum-ultra-close {
        background: transparent;
        border: none;
        font-size: 24px;
        position: absolute;
        top: 10px;
        right: 10px;
        color: red;
        cursor: pointer;
    }

    .gypsum-ultra-panel h2 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
    }

    .gypsum-ultra-panel p {
        font-size: 16px;
        color: #666;
    }

}


/* Mobile Styles */
@media (max-width: 768px) {

    /* Ensure the section takes up full width with padding */
    .cement-ultra {
        display: block;
        padding: 20px;
    }

    /* Left content section */
    .cement-left {
        text-align: center;
        margin-bottom: 30px;
    }

    /* Heading and subheading sizes */
    .cement-left h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .cement-left h1 span {
        color: #dc2626;  /* Red color accent */
    }

    .cement-left .cement-badge {
        font-size: 16px; /* Adjusted for mobile */
        margin-bottom: 10px;
    }

    .cement-left p {
        font-size: 16px;
        margin-top: 20px;
        line-height: 1.5;
    }

    .cement-points {
        font-size: 14px;
        margin-top: 15px;
        text-align: left;
    }

    .cement-points li {
        margin-bottom: 10px;
    }

    /* Button Styles */
    .cement-btn {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #dc2626;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    /* Right content section (cement-right) */
    .cement-right {
        display: flex;
        flex-direction: column; /* Stack images vertically */
         padding-left:-120px   /* Center images horizontally */
        width: 100%;
    }

    .cement-stack img {
        width: 55%; /* Make images take full width of the container */
        max-width: 400px; /* Restrict the max width */
        height: auto;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}


@media (max-width: 768px) {

.brand-signature{
     font-size: 16px;
        margin-top: 20px;
        line-height: 1.5;
        right: -70px;

}

}


/* Mobile Styles */
@media (max-width: 768px) {
    .cement-modal-box {
        padding: 35px;
    }

    .cement-modal-content h2 {
        font-size: 20px;
    }

    .cement-modal-content p {
        font-size: 14px;
    }

    .cement-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .cement-gallery img {
        height: 400px; /* Maintain aspect ratio for smaller screens */
    }

        .cement-close {
        background: transparent;
        border: none;
        font-size: 24px;
        position: absolute;
        color: red;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
}





/* Mobile View Specific Fixes */
@media (max-width: 768px) {
    /* General Section Styles */
    .trust-orbit, .services-ultra {
        display: block;
        padding: 20px;
        position: relative;  /* Make sure this section is relative to avoid shifting */
        overflow-x: hidden; /* Prevent horizontal overflow */
    }

    /* Trust Orbit Section */
    .trust-orbit {
        padding: 10px; /* Reduced padding */
        text-align: center; /* Ensure text is centered */
    }

    .trust-orbit-left {
        width: 100%;
        padding: 15px;
        text-align: center;
    }

    .trust-orbit-left h2 {
        font-size: 22px; /* Slightly smaller font */
        line-height: 1.3;
    }

    .trust-orbit-left p {
        font-size: 14px;
        margin-top: 15px;
    }

    /* Orbit Core Section */
    .orbit-core {
        width: 70px; /* Slightly smaller circle */
        height: 70px;
        margin-bottom: 20px;
        background-color: #dc2626; /* Red color accent */
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }

    /* Orbit Ring Section */
    .orbit-ring {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .orbit-card {
        width: 100%; /* Makes cards fit to screen */
        padding: 15px;
        margin-top: 10px;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
        opacity: 0.85;
    }

    .orbit-card.active {
        opacity: 1;
    }

    .orbit-card p {
        font-size: 12px; /* Adjust paragraph font */
    }

    .orbit-card span {
        font-size: 14px; /* Adjust the span font size */
        color: #dc2626; /* Red color accent */
        font-weight: bold;
    }

    /* Trust Intel Section */
    .trust-header {
        margin-bottom: 15px;
    }

    .trust-header h2 {
        font-size: 20px;
    }

    .trust-header p {
        font-size: 13px;
    }

    /* Grid Section */
    .trust-grid {
        display: grid;
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: 15px;
    }

    .trust-node {
        padding: 15px;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
    }

    .trust-node p {
        font-size: 12px;
        color: #555;
    }

    .trust-node strong {
        font-size: 14px;
        font-weight: bold;
    }

    /* Visual Content Section (like services-ultra visual) */
    .services-ultra-visual {
        display: block;
        margin-top: 20px;
        text-align: center;
        position: relative;
    }

    .visual-frame {
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

    .visual-overlay {
        display: block;
        margin-top: 15px;
        font-size: 14px;
    }

    .visual-overlay span {
        display: block;
        margin: 5px 0;
    }

    /* Footer section adjustments */
    .services-sign {
        text-align: center;
        margin-top: 30px;
    }

    .services-sign span {
        font-size: 18px;
        font-weight: bold;
    }

    .services-sign em {
        display: block;
        font-size: 14px;
        margin-top: 5px;
        color: #777;
    }
}

/* Mobile View - Very Small Screens (Max Width: 480px) */
/* Mobile Specific Adjustments */