/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#172033;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

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

button,
input,
select{
    font-family:inherit;
}

.container{
    width:min(1180px,92%);
    margin:auto;
}


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

header{
    height:76px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4%;
    position:sticky;
    top:0;
    z-index:9999;
    border-bottom:1px solid #edf0f5;
    box-shadow:0 3px 18px rgba(0,0,0,.04);
}

.logo img{
    width:155px;
    height:58px;
    object-fit:contain;
}

nav ul{
    display:flex;
    list-style:none;
    gap:30px;
}

nav a{
    font-size:14px;
    font-weight:600;
    color:#394150;
    transition:.25s;
}

nav a:hover{
    color:#0066cc;
}

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

.header-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#26364a;
    background:#f4f7fb;
}

.header-cart{
    position:relative;
}

.cart-count{
    position:absolute;
    top:-5px;
    right:-5px;
    background:#0066cc;
    color:#fff;
    width:19px;
    height:19px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
}

.call-btn,
.order-btn{
    padding:10px 17px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
}

.call-btn{
    color:#0066cc;
    border:1px solid #d7e7f8;
}

.order-btn{
    background:#0066cc;
    color:#fff;
}

.order-btn:hover{
    background:#0055aa;
}


/* =====================================================
   MOBILE NAV
===================================================== */

.mobile-menu{
    display:none;
    font-size:23px;
    cursor:pointer;
}

@media(max-width:900px){

    nav{
        display:none;
    }

    .mobile-menu{
        display:block;
    }

    .call-btn{
        display:none;
    }

    header{
        padding:0 5%;
    }

}


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

.hero{
    background:
    radial-gradient(circle at 90% 15%,rgba(0,102,204,.10),transparent 28%),
    linear-gradient(180deg,#ffffff,#f5f9ff);

    padding:70px 0 55px;
}

.hero-inner{
    width:min(1180px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:55px;
    align-items:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 13px;
    border-radius:30px;

    background:#eaf4ff;
    color:#0066cc;

    font-size:12px;
    font-weight:700;
    margin-bottom:17px;
}

.hero h1{
    font-size:52px;
    line-height:1.13;
    letter-spacing:-1.7px;
    margin-bottom:18px;
    color:#122033;
}

.hero h1 span{
    color:#0066cc;
}

.hero-text{
    max-width:610px;
    font-size:16px;
    color:#667085;
    margin-bottom:25px;
}

.hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:28px;
}

.hero-points span{
    background:#fff;
    border:1px solid #e6ebf2;
    padding:8px 12px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    color:#42526a;
}

.hero-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.primary-btn{
    background:#0066cc;
    color:white;
    padding:13px 20px;
    border-radius:9px;
    font-weight:700;
    font-size:14px;
}

.secondary-btn{
    background:white;
    color:#0066cc;
    border:1px solid #cfe1f5;
    padding:13px 20px;
    border-radius:9px;
    font-weight:700;
    font-size:14px;
}

.hero-stats{
    display:flex;
    gap:40px;
    margin-top:35px;
}
.hero-stat .stat-number{
    font-size:24px;
    font-weight:700;
    color:#16243a;
}

.hero-stat p{
    color:#7a8494;
    font-size:11px;
}

.hero-image{
    position:relative;
}

.hero-image img{
    width:100%;
    height:440px;
    object-fit:cover;
    border-radius:24px;
    box-shadow:0 25px 55px rgba(20,70,120,.16);
}

.hero-floating{
    position:absolute;
    left:-25px;
    bottom:25px;

    background:white;
    border-radius:14px;
    padding:14px 17px;

    box-shadow:0 15px 40px rgba(0,0,0,.13);

    display:flex;
    align-items:center;
    gap:12px;
}

.hero-floating-icon{
    width:42px;
    height:42px;
    background:#eaf4ff;
    color:#0066cc;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-floating strong{
    display:block;
    font-size:13px;
}

.hero-floating small{
    color:#7a8494;
    font-size:10px;
}

@media(max-width:850px){

    .hero-inner{
        grid-template-columns:1fr;
    }

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

    .hero-image img{
        height:350px;
    }

    .hero-floating{
        left:15px;
    }
}


/* =====================================================
   SECTION COMMON
===================================================== */

section{
    padding:65px 0;
}

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

.section-heading .small{
    color:#0066cc;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.section-heading h2{
    font-size:34px;
    line-height:1.2;
    margin:7px 0 9px;
}

.section-heading p{
    max-width:620px;
    margin:auto;
    color:#7a8494;
    font-size:13px;
}


/* =====================================================
   SERVICES
===================================================== */

.services{
    background:#fff;
}

.services-grid{
    width:min(1180px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.service-card{
    border:1px solid #e7ecf2;
    background:#fff;
    border-radius:15px;
    padding:22px;
    transition:.25s;
}

.service-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(30,60,100,.09);
}

.service-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf4ff;
    color:#0066cc;
    font-size:20px;
    margin-bottom:17px;
}

.service-card h3{
    font-size:17px;
    margin-bottom:7px;
}

.service-card p{
    font-size:11px;
    color:#7a8494;
    margin-bottom:14px;
}

.service-card img{
    width:100%;
    height:145px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
}

.service-price{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.service-price strong{
    color:#0066cc;
    font-size:15px;
}

.service-price a{
    font-size:11px;
    color:#0066cc;
    font-weight:700;
}

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

@media(max-width:550px){
    .services-grid{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   PRICE ESTIMATOR
===================================================== */

.estimator{
    background:#f4f8fd;
}

.estimator-box{
    width:min(1000px,92%);
    margin:auto;

    background:white;
    border-radius:20px;
    border:1px solid #e3eaf3;

    padding:30px;

    display:grid;
    grid-template-columns:1fr .8fr;
    gap:35px;

    box-shadow:0 15px 40px rgba(30,70,110,.06);
}

.estimator-left h2{
    font-size:25px;
    margin-bottom:8px;
}

.estimator-left>p{
    color:#7a8494;
    font-size:12px;
    margin-bottom:23px;
}

.step{
    margin-bottom:20px;
}

.step-title{
    font-size:12px;
    font-weight:700;
    margin-bottom:9px;
}

.option-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.option{
    border:1px solid #dce4ee;
    background:#fff;
    padding:9px 13px;
    border-radius:8px;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
}

.option.active{
    border-color:#0066cc;
    background:#eaf4ff;
    color:#0066cc;
}

.service-check{
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #e5eaf1;
    padding:9px 11px;
    border-radius:8px;
    margin-bottom:7px;
    cursor:pointer;
}

.service-check input{
    accent-color:#0066cc;
}

.service-check span{
    flex:1;
    font-size:11px;
}

.service-check strong{
    font-size:11px;
    color:#0066cc;
}

.estimate-result{
    background:#f6faff;
    border:1px solid #dcecff;
    border-radius:16px;
    padding:25px;
    align-self:center;
}

.estimate-result .label{
    font-size:11px;
    color:#7a8494;
}

.estimate-total{
    font-size:38px;
    font-weight:800;
    color:#0066cc;
    margin:6px 0 10px;
}

.estimate-result ul{
    list-style:none;
    margin:15px 0;
}

.estimate-result li{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px dashed #dce3eb;
    font-size:11px;
}

.estimate-btn{
    width:100%;
    border:0;
    background:#0066cc;
    color:white;
    padding:12px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
}

@media(max-width:800px){
    .estimator-box{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   PRODUCTS
===================================================== */

.products{
    background:#fff;
}

.product-grid{
    width:min(1180px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.product-card{
    border:1px solid #e7ecf2;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    transition:.25s;
}

.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.product-card img{
    width:100%;
    height:190px;
    object-fit:cover;
}

.product-info{
    padding:17px;
}

.product-card h3{
    font-size:15px;
    margin-bottom:6px;
}

.rating{
    color:#ffb400;
    font-size:11px;
    margin-bottom:7px;
}

.product-price{
    font-size:18px;
    font-weight:800;
    color:#0066cc;
}

.product-price span{
    font-size:10px;
    font-weight:500;
    color:#7a8494;
}

.product-info p{
    font-size:10px;
    color:#7a8494;
    margin:5px 0 13px;
}

.product-buttons{
    display:flex;
    gap:7px;
}

.product-buttons a,
.product-buttons button{
    flex:1;
    text-align:center;
    padding:9px 5px;
    border-radius:7px;
    font-size:10px;
    font-weight:700;
}

.view-product{
    background:#f0f6fc;
    color:#0066cc;
}

.add-cart{
    border:0;
    background:#0066cc;
    color:#fff;
    cursor:pointer;
}

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

@media(max-width:550px){
    .product-grid{
        grid-template-columns:1fr;
    }
}


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

.reviews{
    background:#f6f9fc;
}

.review-grid{
    width:min(1050px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.review-card{
    background:#fff;
    border:1px solid #e7ecf2;
    border-radius:15px;
    padding:22px;
}

.reviewer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:13px;
}

.reviewer img{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.reviewer h3{
    font-size:13px;
}

.reviewer small{
    color:#7a8494;
    font-size:9px;
}

.review-stars{
    color:#ffb400;
    font-size:11px;
}

.review-card>p{
    color:#667085;
    font-size:11px;
}

@media(max-width:700px){
    .review-grid{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   PRINTING GUIDES
===================================================== */

.guides{
    background:#fff;
}

.guide-grid{
    width:min(1050px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.guide-card{
    border:1px solid #e7ecf2;
    border-radius:15px;
    overflow:hidden;
    background:#fff;
}

.guide-card img{
    width:100%;
    height:170px;
    object-fit:cover;
}

.guide-content{
    padding:18px;
}

.guide-tag{
    color:#0066cc;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.guide-card h3{
    font-size:14px;
    margin:7px 0;
}

.guide-card p{
    font-size:10px;
    color:#7a8494;
}

.guide-card a{
    display:inline-block;
    margin-top:12px;
    color:#0066cc;
    font-size:10px;
    font-weight:700;
}

@media(max-width:700px){
    .guide-grid{
        grid-template-columns:1fr;
    }
}


/* =====================================================
   BULK CTA
===================================================== */

.bulk-cta{
    width:min(1180px,92%);
    margin:25px auto 65px;

    border-radius:22px;

    background:
    linear-gradient(110deg,#005bb8,#0080e8);

    color:white;

    padding:48px;

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

.bulk-cta h2{
    font-size:30px;
    line-height:1.2;
    margin-bottom:8px;
}

.bulk-cta p{
    font-size:12px;
    opacity:.9;
    max-width:650px;
}

.bulk-cta a{
    background:#fff;
    color:#0066cc;
    padding:13px 20px;
    border-radius:8px;
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}

@media(max-width:700px){
    .bulk-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:32px;
    }
}


/* =====================================================
   URGENT PRINTING
===================================================== */

.urgent{
    background:#101c2c;
    color:#fff;
    text-align:center;
}

.urgent .section-heading h2{
    color:#fff;
}

.urgent .section-heading p{
    color:#aeb8c6;
}

.urgent-box{
    width:min(850px,92%);
    margin:auto;
}

.urgent-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.urgent-buttons a{
    padding:12px 20px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}

.urgent-call{
    background:#fff;
    color:#101c2c;
}

.urgent-whatsapp{
    background:#25D366;
    color:#fff;
}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter{
    padding:50px 0;
    background:#fff;
}

.newsletter-box{
    width:min(800px,92%);
    margin:auto;
    text-align:center;
}

.newsletter-box h2{
    font-size:25px;
}

.newsletter-box p{
    font-size:11px;
    color:#7a8494;
    margin:6px 0 20px;
}

.newsletter-form{
    display:flex;
    max-width:550px;
    margin:auto;
}

.newsletter-form input{
    flex:1;
    height:45px;
    border:1px solid #dce3ec;
    padding:0 14px;
    border-radius:8px 0 0 8px;
    outline:none;
}

.newsletter-form button{
    border:0;
    background:#0066cc;
    color:white;
    padding:0 20px;
    border-radius:0 8px 8px 0;
    font-weight:700;
    cursor:pointer;
}


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

footer{
    background:#0d1725;
    color:white;
    padding:55px 0 0;
}

.footer-grid{
    width:min(1180px,92%);
    margin:auto;

    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:40px;
}

.footer-grid h2{
    font-size:24px;
    margin-bottom:10px;
}

.footer-grid h3{
    font-size:14px;
    margin-bottom:15px;
}

.footer-grid p,
.footer-grid li{
    color:#aeb8c6;
    font-size:11px;
}

.footer-grid ul{
    list-style:none;
}

.footer-grid li{
    margin-bottom:8px;
}

.footer-grid a:hover{
    color:#fff;
}

.social-icons{
    display:flex;
    gap:9px;
}

.social-icons a{
    width:36px;
    height:36px;
    border-radius:8px;
    background:#182638;
    display:flex;
    align-items:center;
    justify-content:center;
}

.copyright{
    border-top:1px solid #1e2c3e;
    text-align:center;
    padding:18px;
}

.copyright p{
    font-size:10px;
    color:#8290a2;
}

@media(max-width:800px){

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

@media(max-width:500px){

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


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;

    width:55px;
    height:55px;

    border-radius:50%;

    background:#25D366;
    color:white;

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

    font-size:27px;

    box-shadow:0 8px 25px rgba(37,211,102,.35);

    z-index:999;
}


/* =====================================================
   TOP BUTTON
===================================================== */

#topBtn{
    position:fixed;
    right:22px;
    bottom:88px;

    width:40px;
    height:40px;

    border:0;
    border-radius:50%;

    background:#0066cc;
    color:#fff;

    cursor:pointer;

    display:none;

    z-index:998;
}


/* =====================================================
   TOAST
===================================================== */

.toast{
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translateX(-50%) translateY(80px);

    background:#172033;
    color:#fff;

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

    font-size:11px;

    opacity:0;
    transition:.3s;

    z-index:10000;
}

.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}


/* =====================================================
   FINAL ESTIMATOR
===================================================== */

.estimator.final-estimator{
    padding:55px 0 65px;
}

.estimator.final-estimator .section-heading{
    display:none;
}

@media(max-width:800px){
    .estimator.final-estimator{
        padding:45px 0 55px;
    }
}