*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:#081b3a;background:#fff}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.navbar{height:78px;display:flex;align-items:center;gap:30px;padding:10px 5%;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid #e8eef7}.brand{display:flex;align-items:center;gap:10px;margin-right:auto}.brand-logo{width:205px;height:58px;object-fit:contain;object-position:left center}.footer-logo{filter:brightness(0) invert(1);opacity:.95}.brand-mark{font-weight:900;font-size:44px;line-height:.8;color:#0B1B35;position:relative;text-shadow:9px 0 #ff4b1f}.brand strong,.brand em{display:block;font-style:normal;line-height:1}.brand strong{font-size:23px;letter-spacing:.5px}.brand em{font-size:16px;letter-spacing:3px;color:#ff4b1f}.brand small{display:block;font-size:7px;margin-top:5px;letter-spacing:.4px;color:#1b3156}nav{display:flex;gap:23px;font-size:13px;font-weight:700}nav a{padding:26px 0;border-bottom:2px solid transparent}nav a.active,nav a:hover{color:#ff4b1f;border-color:#ff4b1f}.nav-actions{display:flex;align-items:center;gap:10px}.search-btn{border:0;background:none;font-size:25px}.quote-btn,.quote-btn:hover{transition:.2s}.quote-btn{border:0}.nav-actions .quote-btn{background:#ff4b1f;color:white;padding:13px 23px;border-radius:28px;font-weight:800}.menu-toggle{display:none;background:none;border:0;font-size:25px}.hero{min-height:530px;padding:48px 5%;display:grid;grid-template-columns:42% 58%;overflow:hidden;background:linear-gradient(100deg,#fff 0%,#f5f9ff 52%,#eaf3ff 100%)}.eyebrow{color:#0B1B35;font-weight:800;letter-spacing:3px;font-size:12px;margin:0 0 10px}.hero h1,h2{font-family:"Barlow Condensed",sans-serif;margin:0;line-height:.9;text-transform:uppercase}.hero h1{font-size:72px;letter-spacing:-1px;color:#081b3a}.hero h1 span,h2 span{color:#ff4b1f}.lead{line-height:1.65;color:#35445e}.hero-actions{display:flex;gap:16px;margin:24px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:30px;padding:15px 26px;font-weight:800;border:1px solid #0B1B35}.primary{background:#ff4b1f;color:#fff;border-color:#ff4b1f}.secondary{background:white;color:#0b2a5a}.outline{background:white;color:#0B1B35}.trust-row{display:flex;gap:30px;margin-top:35px}.trust-row>div{display:flex;align-items:center;gap:8px;font-size:23px;color:#0B1B35}.trust-row span{display:flex;flex-direction:column;font-size:10px;color:#172d51}.trust-row small{font-weight:500}.hero-products{position:relative;min-height:430px}.orb{position:absolute;width:540px;height:540px;border-radius:50%;background:#0B1B35;right:-20px;top:-60px;opacity:.95}.mock{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;box-shadow:0 22px 45px rgba(0,30,80,.18);border-radius:10px}.mock-shirt{width:245px;height:210px;background:#111;color:#fff;right:235px;top:10px;transform:rotate(3deg);font-size:35px}.mock-bag{width:210px;height:265px;background:#f6efe2;color:#0B1B35;right:20px;top:70px;font-size:48px}.mock-box{width:150px;height:130px;color:#fff;font-size:55px}.mock-box.blue{right:200px;top:210px;background:#082c63}.mock-box.orange{right:330px;top:255px;background:#ff4b1f}.mock-cap{width:150px;height:80px;background:#111;color:#fff;right:400px;top:285px;border-radius:50px;font-size:28px}.mock-card{width:180px;height:105px;background:#fff;color:#0B1B35;right:60px;top:310px;font-size:22px}.section{padding:70px 5%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}.section-heading h2,h2{font-size:56px}.section-heading>p{color:#4b5d79;line-height:1.5}.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.product-card{border:1px solid #dce5f2;border-radius:17px;padding:12px;background:#fff;box-shadow:0 10px 25px rgba(9,45,90,.06)}.product-art{height:150px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:58px;font-weight:900;color:#fff;margin-bottom:13px;background:linear-gradient(135deg,#0B1B35,#5da2ff)}.product-art.tshirt{background:#111}.product-art.cap{background:linear-gradient(135deg,#13284a,#5477a8)}.product-art.paperbag{background:#d9c4a0;color:#0B1B35}.product-art.labels{background:#eef4ff;color:#ff4b1f}.product-art.cards{background:#fff;border:1px solid #dbe4f0;color:#0B1B35}.product-card h3{margin:0 0 6px;font-size:18px}.product-card p{font-size:12px;line-height:1.5;color:#56647b;min-height:54px}.mini-quote{width:100%;border:0;background:#ff4b1f;color:#fff;border-radius:20px;padding:10px;font-weight:800}.services-strip{padding-top:30px}.service-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.service{border:1px solid #e1e8f2;background:#fff;border-radius:14px;padding:18px 8px;color:#0B1B35;font-size:30px;box-shadow:0 8px 22px rgba(9,45,90,.05)}.service span{display:block;color:#172d51;font-size:11px;font-weight:700;margin-top:10px}.dark-section{background:#071b3c;color:#fff;display:grid;grid-template-columns:35% 65%;gap:40px}.dark-section .eyebrow{color:#ff7a55}.dark-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.dark-cards>div{border:1px solid rgba(255,255,255,.15);padding:28px;border-radius:15px}.dark-cards b{color:#ff4b1f}.dark-cards p{color:#bac8dc;line-height:1.6;font-size:13px}.website-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.web-preview{background:#0B1B35;border-radius:18px;padding:10px;box-shadow:0 20px 50px rgba(12,86,201,.2)}.browser-bar{height:25px;display:flex;gap:5px;align-items:center;padding-left:8px}.browser-bar i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.7}.web-screen{height:260px;background:#fff;border-radius:10px;padding:35px;color:#0B1B35;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.web-screen b{font-family:"Barlow Condensed";font-size:46px;line-height:.9;margin:10px 0}.web-screen button{background:#ff4b1f;color:#fff;border:0;border-radius:20px;padding:10px 18px}.portfolio{background:#071b3c;color:#fff;padding:60px 5%}.portfolio .section-heading a{color:#ff7a55}.portfolio-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.portfolio-grid div{height:150px;border-radius:12px;background:linear-gradient(135deg,#123b72,#0B1B35);display:flex;align-items:end;padding:15px;font-weight:800;border:1px solid #285993}.about-copy{max-width:750px;font-size:18px;line-height:1.8;color:#52627b}.quote-banner{margin:35px 5% 70px;border-radius:30px;padding:35px 45px;background:linear-gradient(90deg,#f1f7ff,#fff);display:flex;justify-content:space-between;align-items:center;border:1px solid #dbe6f5}.quote-banner h2{font-size:54px}footer{background:#06152f;color:#fff;padding:40px 5%;display:flex;align-items:center;gap:30px}footer p{color:#aebbd0;font-size:12px}.modal{position:fixed;inset:0;background:rgba(0,15,35,.7);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal.show{display:flex}.modal-card{width:min(700px,100%);max-height:92vh;overflow:auto;background:#fff;padding:35px;border-radius:18px;position:relative}.close{position:absolute;right:20px;top:12px;border:0;background:none;font-size:32px}.modal-card h2{font-size:52px}.modal-card>p:not(.eyebrow){color:#66748a}.modal-card form{display:grid;gap:15px;margin-top:22px}.modal-card label{font-size:12px;font-weight:800;display:grid;gap:7px}.modal-card input,.modal-card select{padding:13px;border:1px solid #d4dce8;border-radius:8px;font:inherit}.modal-card small{font-size:10px;color:#8993a2;font-weight:500}.submit{border:0;background:#ff4b1f;color:#fff;padding:15px;border-radius:8px;font-weight:800}.whatsapp-float{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:#16b957;color:#fff;display:grid;place-items:center;font-size:30px;z-index:60;box-shadow:0 10px 25px #0003}
@media(max-width:1100px){nav{gap:13px}.product-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:repeat(4,1fr)}.portfolio-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}.hero-products{min-height:350px}.hero-copy{z-index:2}.dark-section{grid-template-columns:1fr}.website-section{grid-template-columns:1fr}}
@media(max-width:760px){.navbar{height:68px;padding:8px 5%}.navbar nav,.nav-actions{display:none}.menu-toggle{display:block}.brand small{display:none}.brand strong{font-size:18px}.brand em{font-size:12px}.brand-mark{font-size:34px}.hero{padding:45px 5% 25px}.hero h1{font-size:52px}.hero-products{min-height:310px;transform:scale(.85);transform-origin:top center}.trust-row{gap:12px;flex-wrap:wrap}.trust-row>div{font-size:18px}.section{padding:50px 5%}.section-heading{display:block}.section-heading h2,h2{font-size:44px}.product-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.dark-cards{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.quote-banner{margin:25px 5% 45px;padding:28px;display:block}.quote-banner h2{font-size:44px}.quote-banner .btn{margin-top:20px;width:100%}footer{display:block}.modal-card{padding:25px 20px}.modal-card h2{font-size:42px}}

.brand-logo {
    width: 210px;
    height: 65px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .brand-logo {
        width: 155px;
        height: 50px;
    }
}
.hero-image {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    object-fit: contain;
}
@media (max-width: 760px) {
    .hero-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}
.hero-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 620px;
    margin: auto;
}

.hero-image-grid img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    box-shadow: 0 10px 25px rgba(0, 40, 100, 0.15);
}

.hero-image-grid img:first-child {
    grid-column: span 2;
    height: 210px;
}

@media (max-width: 760px) {
    .hero-image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* =========================
   PROJECTS PREVIEW
========================= */

.projects-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 760px;
    margin: auto;
}

.project-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce5f2;
}

.project-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.projects-more {
    display: block;
    width: fit-content;
    margin: 22px auto 0;
    background: #ff4b1f;
    color: #ffffff;
    padding: 13px 25px;
    border-radius: 30px;
    font-weight: 800;
}


/* MOBILE */

@media (max-width: 760px) {

    .projects-preview {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .project-box {
        aspect-ratio: 1 / 1;
    }

}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.brand-logo {
    width: 70px;
    height: 60px;
    object-fit: contain;
}

.brand-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.brand-name strong {
    font-size: 22px;
    font-weight: 900;
    color: #0B1B35;
    letter-spacing: 1px;
    white-space: nowrap;
}

.brand-name small {
    display: block;
    margin-top: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #4b5d79;
    white-space: nowrap;
}
@media (max-width: 760px) {

    .brand-logo {
        width: 55px;
        height: 50px;
    }

    .brand-name strong {
        font-size: 16px;
    }

    .brand-name small {
        font-size: 6px;
        letter-spacing: 0.6px;
    }
}
.services-section {
    padding: 80px 5%;
    background: #ffffff;
}

.services-heading {
    max-width: 1100px;
    margin: 0 auto 45px;
}

.services-heading .eyebrow {
    color: #1261d6;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.services-heading h2 {
    margin: 0;
    font-size: 58px;
    line-height: .95;
    color: #071b3c;
    font-weight: 900;
}

.services-heading h2 span {
    color: #ff4b1f;
}

.services-intro {
    max-width: 700px;
    margin-top: 20px;
    color: #60708a;
    font-size: 18px;
    line-height: 1.6;
}

.services-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-card {
    padding: 28px 22px 22px;
    background: #fff;
    border: 1px solid #dce5f2;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(10, 50, 100, .06);
    transition: .25s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(10, 50, 100, .12);
    border-color: #1261d6;
}

.service-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf4ff;
    color: #1261d6;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
}

.service-card h3 {
    color: #071b3c;
    font-size: 20px;
    margin: 0 0 10px;
}

.service-card p {
    color: #66758c;
    font-size: 14px;
    line-height: 1.55;
    min-height: 66px;
    margin-bottom: 20px;
}

.mini-quote {
    width: 100%;
    border: 0;
    background: #ff4b1f;
    color: #fff;
    padding: 12px 15px;
    border-radius: 9px;
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
}

.mini-quote:hover {
    background: #e83f17;
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-heading h2 {
        font-size: 48px;
    }
}

@media (max-width: 600px) {
    .services-section {
        padding: 55px 5%;
    }

    .services-heading h2 {
        font-size: 42px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .service-card {
        padding: 20px 15px 15px;
        border-radius: 15px;
    }

    .service-card h3 {
        font-size: 16px;
    }

    .service-card p {
        font-size: 12px;
        min-height: auto;
    }

    .service-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }
}
/* =========================
   ARAMBH SERVICES
========================= */

#printing {
    padding: 80px 5%;
    background: #f7faff;
}

#printing .section-heading {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

#printing .eyebrow {
    color: #0B1B35;
    font-weight: 800;
    letter-spacing: 3px;
}

#printing .section-heading h2 {
    font-size: 58px;
    color: #071b3c;
    margin: 10px 0 15px;
}

#printing .section-heading h2 span {
    color: #ff4b1f;
}

#printing .lead {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
}

/* Service Grid */

#printing .service-grid {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Service Card */

#printing .service-card {
    background: #ffffff;
    border: 1px solid #dce6f4;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(8, 45, 90, 0.06);
    transition: 0.25s ease;
}

#printing .service-card:hover {
    transform: translateY(-6px);
    border-color: #0B1B35;
    box-shadow: 0 15px 35px rgba(8, 45, 90, 0.12);
}

/* Icons */

#printing .service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;
    color: #0B1B35;

    border-radius: 14px;

    font-size: 25px;
    font-weight: 900;

    margin-bottom: 20px;
}

/* Titles */

#printing .service-card h3 {
    color: #071b3c;
    font-size: 19px;
    margin: 0 0 10px;
}

/* Description */

#printing .service-card p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    min-height: 65px;
    margin-bottom: 18px;
}

/* Quote Button */

#printing .mini-quote {
    width: 100%;
    border: none;
    background: #ff4b1f;
    color: #ffffff;

    padding: 11px 15px;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

    transition: 0.2s;
}

#printing .mini-quote:hover {
    background: #e83d13;
}

/* Tablet */

@media (max-width: 1000px) {

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

}

/* Mobile */

@media (max-width: 600px) {

    #printing {
        padding: 55px 5%;
    }

    #printing .section-heading h2 {
        font-size: 42px;
    }

    #printing .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    #printing .service-card {
        padding: 18px 14px;
    }

    #printing .service-card h3 {
        font-size: 15px;
    }

    #printing .service-card p {
        font-size: 11px;
        min-height: auto;
    }

    #printing .service-icon {
        width: 45px;
        height: 45px;
        font-size: 21px;
    }

}
/* =========================
   PROFESSIONAL SERVICE ICONS
========================= */

#printing .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1261d6;
}

#printing .service-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    color: #1261d6;
}
/* Popular Categories Images */

.product-image {
    width: 100%;
    aspect-ratio: 10 / 9;
    border-radius: 24px;
    overflow: hidden;
    background: #eef4ff;
    margin-bottom: 25px;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

  /* =========================
   ARAMBH MULTIMEDIA FOOTER
========================= */

.site-footer {
    background: #061936;
    color: #ffffff;
    margin-top: 0;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    padding: 70px 5% 50px;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 45px;
}


/* BRAND */

.footer-brand img {
    width: 70px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 12px;
}

.footer-brand h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 1px;
}

.footer-brand > p {
    color: #b8c6dc;
    font-size: 13px;
    line-height: 1.6;
}

.footer-description {
    max-width: 300px;
    margin-top: 18px;
}


/* COLUMNS */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column h4 {
    color: #ff4b1f;
    font-size: 14px;
    letter-spacing: 2px;
    margin: 0 0 20px;
}

.footer-column a {
    color: #b8c6dc;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: 0.2s ease;
}

.footer-column a:hover {
    color: #ffffff;
    transform: translateX(3px);
}


/* CONTACT */

.footer-contact p {
    color: #b8c6dc;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.footer-quote {
    border: none;
    background: #ff4b1f;
    color: #ffffff;
    padding: 13px 18px;
    border-radius: 25px;
    font-weight: 800;
    margin-top: 10px;
    cursor: pointer;
}


/* BOTTOM */

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);

    max-width: 1200px;
    margin: auto;
    padding: 22px 5%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-bottom p {
    margin: 0;
    color: #9fb0c8;
    font-size: 12px;
}


/* MOBILE */

@media (max-width: 760px) {

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 35px 25px;
        padding: 50px 7% 40px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-brand h3 {
        font-size: 20px;
    }

    .footer-column h4 {
        font-size: 12px;
    }

    .footer-column a,
    .footer-contact p {
        font-size: 12px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding: 20px 7%;
    }

}
  .hero-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 600;
}

.hero-contact span {
    color: #526581;
}

.hero-contact a {
    color: #0B1B35;
    text-decoration: none;
    font-weight: 800;
}

.hero-contact a:hover {
    color: #ff4b1f;
}
  .instagram-link {
    display: block;
    width: fit-content;
    margin: 12px auto 0;
    color: #0B1B35;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: 0.2s ease;
}

.instagram-link:hover {
    color: #ff4b1f;
}
  /* =========================
   HERO ANIMATION
========================= */

.hero-copy {
    animation: heroFadeUp 0.8s ease-out both;
}

.hero-products {
    animation: heroFadeUp 1s ease-out 0.15s both;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
  /* =========================
   PROJECT BOX ANIMATION
========================= */

.project-box {
    animation: projectFadeUp 0.7s ease-out both;
}

.project-box:nth-child(1) {
    animation-delay: 0.1s;
}

.project-box:nth-child(2) {
    animation-delay: 0.2s;
}

.project-box:nth-child(3) {
    animation-delay: 0.3s;
}

.project-box:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes projectFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-box img {
    transition: transform 0.4s ease;
}

.project-box:hover img {
    transform: scale(1.05);
}
  /* =========================
   SERVICES CARD ANIMATION
========================= */

.service-card {
    animation: serviceFadeUp 0.7s ease-out both;
}

.service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.service-card:nth-child(2) {
    animation-delay: 0.2s;
}

.service-card:nth-child(3) {
    animation-delay: 0.3s;
}

.service-card:nth-child(4) {
    animation-delay: 0.4s;
}

.service-card:nth-child(5) {
    animation-delay: 0.5s;
}

.service-card:nth-child(6) {
    animation-delay: 0.6s;
}

.service-card:nth-child(7) {
    animation-delay: 0.7s;
}

.service-card:nth-child(8) {
    animation-delay: 0.8s;
}

@keyframes serviceFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-7px);
}
  /* =========================
   BUTTON ANIMATION
========================= */

.quote-btn,
.projects-more,
.instagram-link {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quote-btn:hover,
.projects-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(12, 86, 201, 0.18);
}

.quote-btn:active,
.projects-more:active {
    transform: scale(0.97);
}
  /* =========================
   PRODUCT IMAGE ANIMATION
========================= */

.product-image {
    overflow: hidden;
}

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

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

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}
  /* =========================
   SECTION HEADING ANIMATION
========================= */

.section-heading {
    animation: headingFadeUp 0.8s ease-out both;
}

.section-heading .eyebrow {
    animation: headingFadeUp 0.6s ease-out both;
}

.section-heading h2 {
    animation: headingFadeUp 0.8s ease-out 0.1s both;
}

.section-heading .lead {
    animation: headingFadeUp 0.8s ease-out 0.2s both;
}

@keyframes headingFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================
   VIDEO PRELOADER
========================= */

#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    width: 100%;
    height: 100vh;

    background: #000;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader video {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}
#preloader video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#preloader.playing video {
    opacity: 1;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
  /* =========================
   PREMIUM NAVY + GOLD THEME
========================= */

:root {
    --primary: #0B1B35;
    --dark: #071426;
    --gold: #C9A24A;
    --gold-dark: #B48A35;
    --light: #F7F7F5;
    --soft: #EEF2F7;
}


/* Main Blue → Navy */

.navbar {
    color: var(--primary);
}

.brand-name strong {
    color: var(--primary);
}

nav a.active,
nav a:hover {
    color: var(--gold);
}


/* Buttons */

.quote-btn,
.mini-quote,
.projects-more {
    background: var(--gold);
}

.quote-btn:hover,
.mini-quote:hover,
.projects-more:hover {
    background: var(--gold-dark);
}


/* Headings */

h1,
h2,
h3,
.section-heading h2 {
    color: var(--dark);
}


/* Gold highlights */

h1 span,
.section-heading h2 span {
    color: var(--gold);
}


/* Section backgrounds */

.section,
#products,
#printing {
    background: var(--light);
}


/* Service icons */

.service-icon {
    background: #F4EBD8;
    color: var(--gold);
}


/* Cards */

.product-card,
.service-card {
    background: #FFFFFF;
    border-color: #E3E6EB;
}


/* Project button */

.projects-more {
    color: #FFFFFF;
}


/* Instagram */

.instagram-link {
    color: var(--gold);
}

.instagram-link:hover {
    color: var(--gold-dark);
}


/* Footer */

.site-footer {
    background: var(--dark);
}

.site-footer h3,
.site-footer h4 {
    color: var(--gold);
}


/* Hero contact */

.hero-contact a {
    color: var(--gold);
}

.hero-contact a:hover {
    color: var(--gold-dark);
}
  /* =========================
   FINAL NAVY + GOLD POLISH
========================= */

/* Old Orange → Gold */

.hero-copy h1 span,
.section-heading h2 span,
#printing .section-heading h2 span,
.branding-section h2 span,
.website-section h2 span,
.quote-section h2 span {
    color: #C9A24A !important;
}


/* All CTA Buttons */

.quote-btn,
.mini-quote,
.projects-more,
.footer-quote {
    background: #C9A24A !important;
    border-color: #C9A24A !important;
    color: #ffffff !important;
}

.quote-btn:hover,
.mini-quote:hover,
.projects-more:hover,
.footer-quote:hover {
    background: #B48A35 !important;
}


/* Old Blue Icons → Navy */

.service-icon,
.service-icon svg {
    color: #0B1B35 !important;
}

.service-icon {
    background: #F4EBD8 !important;
}
/* =========================
   FINAL ARAMBH THEME
========================= */

:root {
    --navy: #0B1B35;
    --dark: #071426;
    --gold: #C9A24A;
    --gold-dark: #B48A35;
    --cream: #F7F7F5;
}


/* NAVIGATION */

nav a.active,
nav a:hover {
    color: var(--gold);
    border-color: var(--gold);
}


/* HEADINGS */

.hero h1 span,
h2 span,
.section-heading h2 span {
    color: var(--gold) !important;
}


/* BUTTONS */

.nav-actions .quote-btn,
.primary,
.mini-quote,
.projects-more,
.footer-quote,
.submit {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
}

.nav-actions .quote-btn:hover,
.primary:hover,
.mini-quote:hover,
.projects-more:hover,
.footer-quote:hover,
.submit:hover {
    background: var(--gold-dark) !important;
}


/* SERVICES */

#printing .service-icon {
    background: #F4EBD8 !important;
    color: var(--navy) !important;
}

#printing .service-icon svg {
    color: var(--navy) !important;
}


/* SMALL ACCENTS */

.eyebrow,
.hero-contact a,
.instagram-link {
    color: var(--gold) !important;
}


/* PROJECT BUTTON */

.projects-more {
    color: #fff !important;
}


/* FOOTER */

.site-footer {
    background: var(--dark);
}

.footer-column h4 {
    color: var(--gold) !important;
}
  /* =========================
   PORTFOLIO FINAL COLORS
========================= */

.portfolio h1 span,
.portfolio .section-heading h2 span {
    color: #C9A24A !important;
}

.portfolio .section-heading a {
    color: #C9A24A !important;
}

.portfolio .filter-btn.active {
    background: #C9A24A !important;
    border-color: #C9A24A !important;
    color: #fff !important;
}

.portfolio .filter-btn {
    color: #0B1B35 !important;
    border-color: #0B1B35 !important;
}

.portfolio .filter-btn:hover {
    background: #C9A24A !important;
    border-color: #C9A24A !important;
    color: #fff !important;
}
  /* =========================
   FINAL SERVICES FIX
========================= */

#printing .service-card,
.service-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#printing .service-card b,
.service-card b {
    color: #C9A24A !important;
}

#printing .service-card h3,
.service-card h3 {
    color: #0B1B35 !important;
}

#printing .service-card p,
.service-card p {
    color: #5B6B84 !important;
}

#printing .service-icon,
.service-icon {
    background: #F4EBD8 !important;
    color: #0B1B35 !important;
}

#printing .service-icon svg,
.service-icon svg {
    color: #0B1B35 !important;
    stroke: #0B1B35 !important;
}

/* Website mockup button */
.web-screen button {
    background: #C9A24A !important;
    color: #FFFFFF !important;
}

/* Orange headings/numbers */
.services-strip .eyebrow,
.services-strip .service-card b {
    color: #C9A24A !important;
}

/* Service section heading */
.services-strip h2 span {
    color: #C9A24A !important;
}
  /* SERVICE NUMBERS - FINAL GOLD */

#printing .service-card b,
#printing .service-card strong,
#printing .service-card .number,
#printing .service-card .service-number {
    color: #C9A24A !important;
}
  /* FINAL BRANDING SECTION COLORS */

.dark-section .dark-cards b {
    color: #C9A24A !important;
}

.dark-section .dark-cards h3 {
    color: #0B1B35 !important;
}

.dark-section .dark-cards p {
    color: #5B6B84 !important;
}
  /* =========================
   BRANDING CARDS GOLD BORDER
========================= */

.dark-cards > div {
    border: 2px solid #C9A24A !important;
    border-radius: 24px;
    padding: 32px;
    background: #FFFFFF;
    box-sizing: border-box;
}
  /* PRELOADER BLACK COVER FIX */

#preloader {
    background: #000 !important;
}

#preloader video {
    visibility: hidden !important;
    opacity: 0 !important;
}

#preloader.playing video {
    visibility: visible !important;
    opacity: 1 !important;
}
  #preloader video {
    display: none !important;
}

#preloader.playing video {
    display: block !important;
}
  .ratecard-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 11px 24px;
    border: 2px solid #C9A24A;
    border-radius: 30px;
    background: transparent;
    color: #0B1B35;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: 0.3s ease;
}

.ratecard-btn:hover {
    background: #C9A24A;
    color: #ffffff;
    transform: translateY(-2px);
}
  /* =========================
   PRODUCT CALCULATOR
========================= */

.product-box {
    max-width: 650px;
    margin: 0 auto;
    padding: 30px;
    background: #ffffff;
    border: 2px solid #C9A24A;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(8, 23, 47, 0.12);
}

.product-box h3 {
    color: #0B1B35;
    font-size: 26px;
    margin-bottom: 25px;
}

.product-box label {
    display: block;
    margin-top: 18px;
    margin-bottom: 7px;
    color: #0B1B35;
    font-size: 14px;
    font-weight: 800;
}

.product-box select {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #D7DEE9;
    border-radius: 12px;
    background: #F8FAFC;
    color: #0B1B35;
    font-size: 15px;
    font-weight: 600;
    outline: none;
}

.product-box select:focus {
    border-color: #C9A24A;
}

.rate-result {
    margin-top: 28px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #0B1B35,
        #102B50
    );
    text-align: center;
}

.rate-result span {
    display: block;
    color: #E1C36A;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rate-result strong {
    display: block;
    margin-top: 8px;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 900;
}

/* =====================================================
   MODERN BRANDING SECTION — ARAMBH
   Compact, premium and mobile-first
===================================================== */

.branding-modern {
    background: #F7F7F5;
    padding-top: 62px;
    padding-bottom: 68px;
}

.branding-heading {
    max-width: 1180px;
    margin: 0 auto 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
}

.branding-heading h2 {
    font-size: 56px;
    line-height: .92;
}

.branding-intro {
    max-width: 390px;
    margin: 0 0 5px;
    color: #5B6B84;
    font-size: 14px;
    line-height: 1.7;
}

.branding-modern-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.branding-card {
    position: relative;
    min-height: 245px;
    padding: 25px 25px 22px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-top: 3px solid #C9A24A;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(8, 23, 47, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.branding-card:hover {
    transform: translateY(-5px);
    border-color: #C9A24A;
    box-shadow: 0 18px 40px rgba(8, 23, 47, .10);
}

.branding-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.branding-number {
    color: #C9A24A;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.branding-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #F4EBD8;
    color: #0B1B35;
}

.branding-icon svg {
    width: 22px;
    height: 22px;
}

.branding-card h3 {
    margin: 0 0 10px;
    color: #0B1B35 !important;
    font-size: 23px;
    line-height: 1.15;
}

.branding-card p {
    margin: 0;
    max-width: 330px;
    color: #5B6B84 !important;
    font-size: 13px;
    line-height: 1.65;
}

.branding-link {
    display: inline-block;
    margin-top: 18px;
    color: #0B1B35;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid #C9A24A;
    padding-bottom: 3px;
}

.branding-link:hover {
    color: #B48A35;
}

@media (max-width: 900px) {
    .branding-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .branding-modern-grid {
        grid-template-columns: 1fr;
    }

    .branding-card {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .branding-modern {
        padding: 48px 5% 52px;
    }

    .branding-heading {
        margin-bottom: 22px;
    }

    .branding-heading h2 {
        font-size: 43px;
    }

    .branding-intro {
        font-size: 13px;
        line-height: 1.6;
    }

    .branding-modern-grid {
        gap: 13px;
    }

    .branding-card {
        padding: 20px;
        border-radius: 16px;
    }

    .branding-card-top {
        margin-bottom: 16px;
    }

    .branding-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .branding-card h3 {
        font-size: 20px;
    }

    .branding-card p {
        font-size: 12px;
    }

    .branding-link {
        margin-top: 14px;
    }
}


/* =========================================================
   FINAL ARAMBH FOOTER — COMPACT PREMIUM MOBILE VERSION
========================================================= */
.site-footer{
    background:#071426;
    color:#fff;
    margin-top:0;
}

.footer-container{
    max-width:1200px;
    margin:auto;
    padding:36px 5% 25px;
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr 1.15fr;
    gap:28px;
}

.footer-brand img{
    width:58px;
    height:50px;
    object-fit:contain;
    margin-bottom:7px;
}

.footer-brand h3{
    margin:0 0 6px;
    font-size:18px;
    letter-spacing:.8px;
}

.footer-brand > p,
.footer-description{
    color:#b8c6dc;
    font-size:12px;
    line-height:1.45;
}

.footer-description{
    max-width:260px;
    margin-top:9px;
}

.footer-column h4{
    color:#C9A24A !important;
    font-size:12px;
    letter-spacing:1.8px;
    margin:0 0 13px;
}

.footer-column a{
    color:#b8c6dc;
    text-decoration:none;
    font-size:12px;
    margin-bottom:7px;
    line-height:1.3;
    transition:.2s ease;
}

.footer-contact p{
    color:#b8c6dc;
    font-size:12px;
    line-height:1.45;
    margin:0 0 8px;
}

.footer-quote{
    border:none;
    background:#C9A24A !important;
    color:#fff !important;
    padding:10px 16px;
    border-radius:22px;
    font-size:12px;
    font-weight:800;
    margin-top:5px;
    cursor:pointer;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10);
    max-width:1200px;
    margin:auto;
    padding:13px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.footer-bottom p{
    margin:0;
    color:#9fb0c8;
    font-size:10px;
    line-height:1.4;
}

/* =========================================================
   RATE CARD — HEADER + HERO
========================================================= */
.ratecard-nav-link{
    color:#C9A24A !important;
    font-weight:700;
}
.ratecard-nav-link:hover{
    color:#fff !important;
}

.hero-ratecard-btn{
    display:inline-flex;
    align-items:center;
    gap:13px;
    margin:18px 0 8px;
    padding:11px 15px 11px 12px;
    background:rgba(255,255,255,.97);
    border:1px solid #C9A24A;
    border-radius:15px;
    color:#071426;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    transition:.25s ease;
}
.hero-ratecard-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 13px 30px rgba(0,0,0,.20);
}
.ratecard-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#071426;
    color:#C9A24A;
    font-size:22px;
    font-weight:800;
}
.ratecard-copy{
    display:flex;
    flex-direction:column;
    text-align:left;
    line-height:1.1;
}
.ratecard-copy small{
    font-size:9px;
    letter-spacing:1.5px;
    color:#7a8495;
    margin-bottom:4px;
}
.ratecard-copy strong{
    font-size:14px;
    letter-spacing:.6px;
}
.ratecard-arrow{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#C9A24A;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    margin-left:4px;
}

@media(max-width:760px){
    .footer-container{
        grid-template-columns:1fr 1fr;
        gap:24px 18px;
        padding:30px 7% 22px;
    }
    .footer-brand{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:52px 1fr;
        column-gap:12px;
        align-items:center;
    }
    .footer-brand img{
        width:52px;
        height:48px;
        grid-row:1 / span 2;
        margin:0;
    }
    .footer-brand h3{
        font-size:17px;
        margin:0 0 2px;
    }
    .footer-brand > p{
        font-size:10px;
        margin:0;
    }
    .footer-description{
        grid-column:1 / -1;
        max-width:100%;
        font-size:11px;
        line-height:1.45;
        margin:2px 0 0;
    }
    .footer-column h4{
        font-size:11px;
        letter-spacing:1.6px;
        margin-bottom:10px;
    }
    .footer-column a{
        font-size:11px;
        margin-bottom:6px;
    }
    .footer-contact{
        grid-column:1 / -1;
    }
    .footer-contact p{
        font-size:11px;
        line-height:1.4;
        margin-bottom:7px;
    }
    .footer-quote{
        padding:9px 15px;
        font-size:11px;
        margin-top:3px;
    }
    .footer-bottom{
        flex-direction:column;
        text-align:center;
        padding:11px 7%;
        gap:4px;
    }
    .footer-bottom p{
        font-size:9px;
    }

    .hero-ratecard-btn{
        margin-top:14px;
        padding:9px 12px 9px 10px;
        gap:10px;
        border-radius:13px;
    }
    .ratecard-icon{
        width:38px;
        height:38px;
        font-size:20px;
    }
    .ratecard-copy small{
        font-size:8px;
    }
    .ratecard-copy strong{
        font-size:12px;
    }
    .ratecard-arrow{
        width:29px;
        height:29px;
        font-size:15px;
    }
}
/* =========================
   SHARVI ENTERPRISES AD
========================= */

.sharvi-ad {
  position: relative;
  width: min(1100px, calc(100% - 30px));
  margin: 35px auto 25px;
  background: #ffffff;
  border: 1px solid rgba(201, 162, 74, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(7, 20, 38, 0.12);
}

.sharvi-ad-label {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(7, 20, 38, 0.88);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.sharvi-ad-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 20, 38, 0.85);
  color: #ffffff;
  font-size: 22px;
  line-height: 32px;
  cursor: pointer;
  transition: 0.25s ease;
}

.sharvi-ad-close:hover {
  background: #C9A24A;
  color: #071426;
  transform: rotate(90deg);
}

.sharvi-ad-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sharvi-ad-link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

.sharvi-ad-cta {
  text-align: center;
  padding: 12px 15px;
  background: #071426;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: 0.25s ease;
}

.sharvi-ad-link:hover .sharvi-ad-cta {
  background: #C9A24A;
  color: #071426;
}

@media (max-width: 600px) {

  .sharvi-ad {
    width: calc(100% - 20px);
    margin: 25px auto 18px;
    border-radius: 14px;
  }

  .sharvi-ad-label {
    top: 8px;
    left: 9px;
    font-size: 8px;
    padding: 4px 7px;
  }

  .sharvi-ad-close {
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 19px;
  }

  .sharvi-ad-cta {
    font-size: 11px;
    padding: 11px 8px;
  }

}