/* =====================================================
   GANESH ART - GLOBAL THEME
===================================================== */

:root {
    --brand-orange: #f47721;
    --brand-orange-dark: #df5d0b;
    --brand-magenta: #d91f78;
    --brand-cyan: #28b9c6;
    --brand-teal: #1597a8;
    --brand-purple: #55449b;
    --brand-navy: #172b49;

    --text-main: #243247;
    --text-muted: #66758a;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --border: #e8edf3;

    --radius-card: 20px;
    --shadow-soft: 0 12px 35px rgba(30, 47, 74, .07);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    color: var(--text-main);
    background: var(--surface);
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

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

.section-heading {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 12px;
}

.section-heading .highlight {
    color: var(--brand-orange);
}

.section-subtitle {
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 35px;
}

.section-eyebrow {
    color: var(--brand-magenta);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =====================================================
   HEADER AND NAVIGATION
===================================================== */

.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 100;
}

.site-header .navbar {
    padding: 12px 0;
}

.site-logo {
    width: 158px;
    height: auto;
    display: block;
}

.navbar-nav {
    gap: 5px;
}

.navbar-nav .nav-link {
    color: var(--brand-navy);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 11px !important;
    transition: color .2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--brand-orange);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 17px;
}

.btn-brand {
    background: var(--brand-orange);
    color: #fff;
    border: 1px solid var(--brand-orange);
    border-radius: 9px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-brand {
    background: #fff;
    color: var(--brand-orange-dark);
    border: 1px solid var(--brand-orange);
    border-radius: 9px;
    padding: 11px 19px;
    font-weight: 800;
}

.btn-outline-brand:hover {
    background: var(--brand-orange);
    color: #fff;
}

.cart-link {
    position: relative;
    font-size: 21px;
    color: var(--brand-navy);
    padding: 5px;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--brand-orange);
    color: #fff;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.hero-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 20%,
            rgba(40, 185, 198, .10), transparent 30%),
        linear-gradient(120deg, #ffffff, #f7f9fc);
    padding: 65px 0;
}

.hero-title {
    color: var(--brand-navy);
    font-size: clamp(36px, 4.5vw, 62px);
    line-height: 1.12;
    letter-spacing: -1.8px;
    font-weight: 800;
    margin: 15px 0;
}

.hero-title .highlight {
    color: var(--brand-orange);
}

.hero-description {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 560px;
    margin-bottom: 25px;
}

.hero-image {
    width: 100%;
    max-height: 430px;
    object-fit: contain;
}

/* =====================================================
   TRUST / SERVICE HIGHLIGHTS
===================================================== */

.trust-strip {
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 25px 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 8px 15px;
}

.trust-icon {
    color: var(--brand-orange);
    font-size: 28px;
}

.trust-item h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.trust-item p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 3px 0 0;
}

/* =====================================================
   EXPERTISE CATEGORY CARDS
===================================================== */

.expertise-section {
    padding: 75px 0;
    background: #fff;
}

.expertise-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 20px;
    overflow: hidden;
    border-radius: 10px 38px 10px 38px;
    text-align: center;
    color: var(--brand-navy);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(30, 47, 74, .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.expertise-card::after {
    content: "";
    position: absolute;
    width: 75px;
    height: 75px;
    right: -38px;
    bottom: -38px;
    border: 1px solid rgba(255, 255, 255, .7);
    transform: rotate(45deg);
    pointer-events: none;
}

.expertise-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft);
    color: var(--brand-navy);
}

.expertise-card .category-name {
    position: relative;
    z-index: 1;
    overflow-wrap: anywhere;
}

.expertise-card:nth-child(8n + 1) {
    background: #d9f7fa;
}

.expertise-card:nth-child(8n + 2) {
    background: #fff0c9;
}

.expertise-card:nth-child(8n + 3) {
    background: #d9faeb;
}

.expertise-card:nth-child(8n + 4) {
    background: #ffeadf;
}

.expertise-card:nth-child(8n + 5) {
    background: #fbe0f0;
}

.expertise-card:nth-child(8n + 6) {
    background: #e8e1ff;
}

.expertise-card:nth-child(8n + 7) {
    background: #e0f9df;
}

.expertise-card:nth-child(8n + 8) {
    background: #d8f8f8;
}

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

.product-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 15px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.product-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    background: var(--surface-soft);
    padding: 16px;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card-body {
    padding: 19px;
}

.product-card-title {
    color: var(--brand-navy);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
}

.product-card-description {
    color: var(--text-muted);
    font-size: 13px;
}

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

.gallery-image {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--surface-soft);
}

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

.site-footer {
    background: #f7f9fc;
    border-top: 1px solid var(--border);
}

.footer-cta {
    padding: 28px 0;
}

.footer-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(110deg, #fff0df, #fff8f0);
}

.footer-cta h2 {
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    color: var(--brand-navy);
    margin: 7px 0;
}

.footer-cta p {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-main {
    padding-top: 45px;
    padding-bottom: 40px;
}

.footer-logo {
    width: 165px;
    height: auto;
}

.footer-description {
    max-width: 290px;
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 13px;
}

.footer-tagline {
    color: var(--brand-orange-dark);
    font-size: 13px;
    font-weight: 800;
}

.footer-heading {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--brand-navy);
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-contact a,
.footer-contact span {
    color: var(--text-muted);
    font-size: 13px;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--brand-orange-dark);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
}

.footer-contact i {
    color: var(--brand-orange);
    margin-top: 5px;
}

.footer-contact-button {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-orange-dark);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 17px 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.footer-bottom p,
.footer-bottom a,
.footer-separator {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.footer-separator {
    padding: 0 9px;
}

/* =====================================================
   PAGE BANNER / EMPTY STATES
===================================================== */

.page-banner {
    padding: 55px 0;
    background: linear-gradient(110deg, #f5f9ff, #fff7ef);
}

.page-banner h1 {
    color: var(--brand-navy);
    font-weight: 800;
}

.page-banner p {
    color: var(--text-muted);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1199px) {
    .navbar-nav .nav-link {
        padding: 10px 7px !important;
        font-size: 12px;
    }

    .site-logo {
        width: 140px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 15px 0 8px;
    }

    .navbar-nav {
        align-items: stretch !important;
    }

    .navbar-nav .nav-link {
        padding: 10px 4px !important;
        font-size: 14px;
    }

    .header-actions {
        justify-content: flex-start;
        margin-top: 15px;
    }

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

    .hero-image {
        margin-top: 25px;
        max-height: 350px;
    }

    .section-padding,
    .expertise-section {
        padding: 55px 0;
    }
}

@media (max-width: 575.98px) {
    .site-logo {
        width: 125px;
    }

    .hero-title {
        letter-spacing: -.8px;
    }

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

    .expertise-card {
        min-height: 105px;
        padding: 13px;
        font-size: 13px;
        border-radius: 9px 27px 9px 27px;
    }

    .product-card-image {
        height: 175px;
    }

    .footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .trust-item {
        padding: 10px 0;
    }
}


/* HOMEPAGE HERO ILLUSTRATION */

.hero-visual {
    min-height: 360px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f4fbfd, #fff4eb);
    border-radius: 30px 70px 30px 70px;
}

.hero-decoration {
    position: absolute;
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.hero-triangle-one {
    background: #46c5cb;
    top: 28px;
    right: 35px;
    transform: rotate(30deg);
}

.hero-triangle-two {
    background: #ffb16f;
    bottom: 25px;
    left: 30px;
    transform: rotate(-25deg);
}

.hero-product {
    position: absolute;
    width: 145px;
    min-height: 190px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    border: 5px solid #fff;
    border-radius: 8px;
    box-shadow: 0 20px 45px rgba(30, 47, 74, .14);
    text-align: center;
    font-weight: 800;
    color: var(--brand-navy);
}

.hero-product i {
    font-size: 58px;
}

.hero-product span {
    font-size: 13px;
}

.hero-product-back {
    background: #e1f8f8;
    transform: rotate(-12deg) translate(-85px, -5px);
}

.hero-product-front {
    background: #fff0dc;
    transform: rotate(7deg) translate(15px, 25px);
    z-index: 2;
}

.hero-product-side {
    background: #eee9ff;
    transform: rotate(15deg) translate(115px, -15px);
}

.hero-caption {
    position: absolute;
    bottom: 18px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-teal);
    font-size: 12px;
    font-weight: 800;
    z-index: 3;
}

/* SERVICE CARDS */

.service-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 20px;
    border-radius: 15px;
    background: #fff0df;
    color: var(--brand-orange);
    font-size: 24px;
}

.service-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--brand-navy);
}

.service-card p {
    color: var(--text-muted);
    font-size: 14px;
}

.service-card a {
    color: var(--brand-orange-dark);
    font-size: 13px;
    font-weight: 800;
}

/* PORTFOLIO PROMO */

.portfolio-promo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 35px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(110deg, #f4fbfd, #fff7ef);
}

.portfolio-promo .section-heading {
    margin: 10px 0;
}

.portfolio-promo p {
    color: var(--text-muted);
}

@media (max-width: 575.98px) {
    .hero-visual {
        min-height: 310px;
    }

    .hero-product {
        width: 105px;
        min-height: 155px;
        padding: 12px 7px;
        gap: 12px;
    }

    .hero-product i {
        font-size: 42px;
    }

    .hero-product-back {
        transform: rotate(-12deg) translate(-65px, -5px);
    }

    .hero-product-front {
        transform: rotate(7deg) translate(5px, 20px);
    }

    .hero-product-side {
        transform: rotate(15deg) translate(70px, -15px);
    }

    .portfolio-promo {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px;
    }
}



/* PRODUCT DETAILS */

.detail-main-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 25px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 20px;
}

.detail-main-image > img {
    width: 100%;
    height: 420px;
    object-fit: contain;
}

.image-fallback {
    min-height: 250px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-muted);
}

.image-fallback i {
    font-size: 48px;
    color: var(--brand-orange);
}

.product-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-thumbnail {
    width: 75px;
    height: 75px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.product-thumbnail.active,
.product-thumbnail:hover {
    border-color: var(--brand-orange);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-detail-title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 15px;
}

.product-detail-intro {
    color: var(--text-muted);
    line-height: 1.8;
}

.product-specifications {
    border-top: 1px solid var(--border);
    margin-top: 22px;
}

.specification-row {
    display: grid;
    grid-template-columns: minmax(110px, 35%) 1fr;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.specification-label {
    font-weight: 800;
    color: var(--brand-navy);
}

.specification-value {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.product-long-description h3,
.quotation-heading {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 15px;
}

.product-long-description > div {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}

.quotation-options {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(30, 47, 74, .04);
}

.option-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.option-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.option-item:has(input:checked) {
    border-color: var(--brand-orange);
    background: #fff8f1;
}

.option-item input {
    margin-top: 5px;
    accent-color: var(--brand-orange);
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .detail-main-image {
        min-height: 270px;
    }

    .detail-main-image > img {
        height: 300px;
    }

    .quotation-options {
        padding: 18px;
    }

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


/* Parent product cards: text only, no product images */

.parent-product-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-height: 190px;
    height: 100%;
    padding: 24px;
    border: 1px solid #e8edf3;
    border-radius: 12px 30px 12px 30px;
    background: linear-gradient(145deg, #ffffff, #f7f9fc);
    box-shadow: 0 8px 25px rgba(30, 47, 74, .05);
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease;
}

.parent-product-card:hover {
    transform: translateY(-5px);
    border-color: #f47721;
    box-shadow: 0 15px 35px rgba(30, 47, 74, .10);
}

.parent-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff0df;
    color: #f47721;
    font-size: 21px;
}

.parent-product-name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    color: #172b49;
    overflow-wrap: anywhere;
}

.parent-product-arrow {
    font-size: 12px;
    font-weight: 800;
    color: #df5d0b;
}

@media (max-width: 575.98px) {
    .parent-product-card {
        min-height: 165px;
        padding: 17px;
        gap: 12px;
    }

    .parent-product-name {
        font-size: 14px;
    }
}


/* PRODUCT IMAGE LINK */

.product-card-image-link {
    display: block;
    color: inherit;
}

.product-card-image {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

.product-card-image img {
    transition: transform .3s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.04);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #718096;
    background: #f4f7fb;
    font-size: 12px;
}

.product-image-placeholder i {
    font-size: 38px;
    color: #e58b43;
}

.product-size {
    color: #66758a;
    font-size: 12px;
    margin-bottom: 15px;
}

/* EMPTY PRODUCT STATE */

.empty-products {
    padding: 55px 20px;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    background: #f9fbfd;
}

.empty-products-icon {
    font-size: 42px;
    color: #e58b43;
    margin-bottom: 18px;
}

.empty-products h2 {
    font-size: 24px;
    font-weight: 800;
    color: #172b49;
}

.empty-products p {
    color: #66758a;
    margin: 12px 0 22px;
}