/* ==========================================================
   ADGRO MEDIA - DESIGN SERVICES PAGE
   File: design-services.css
   Theme: Purple / Pink / Black
   ========================================================== */

:root{
    --adgro-purple:#76245d;
    --adgro-purple-dark:#3d1230;
    --adgro-purple-light:#a94487;
    --adgro-pink:#d66ca9;
    --adgro-black:#08070a;
    --adgro-bg:#f7f4f7;
    --adgro-border:#e8dfe6;
    --adgro-text:#241e23;
    --adgro-muted:#756b72;
    --shadow:0 15px 45px rgba(64,25,51,.08);
    --shadow-lg:0 25px 70px rgba(61,18,48,.15);
    --transition:.35s ease;
}

body{
    color:var(--adgro-text);
    background:#fff;
    overflow-x:hidden;
}

.design-category-hero{
    position:relative;
    overflow:hidden;
    padding:0 0 90px;
    color:#fff;
    background:
    radial-gradient(circle at 85% 20%,rgba(214,108,169,.25),transparent 28%),
    linear-gradient(135deg,var(--adgro-black),var(--adgro-purple-dark) 55%,var(--adgro-purple));
}
.design-category-hero::before{
    content:"";
    position:absolute;
    width:520px;height:520px;
    right:-180px;top:-80px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 0 40px rgba(255,255,255,.03);
}
.service-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:25px 0 45px;
    font-size:.9rem;
}
.service-breadcrumb a{
    color:rgba(255,255,255,.8);
    text-decoration:none;
}
.service-breadcrumb i{color:var(--adgro-pink)}
.service-kicker{
    display:inline-block;
    margin-bottom:18px;
    padding-left:14px;
    border-left:4px solid var(--adgro-pink);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:2px;
}
.design-category-hero h1{
    font-size:clamp(2.7rem,5vw,4.8rem);
    line-height:1.05;
    font-weight:900;
    margin-bottom:20px;
}
.design-category-hero h1 strong{color:var(--adgro-pink)}
.design-category-hero p{
    color:rgba(255,255,255,.78);
    line-height:1.8;
    font-size:1.05rem;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}
.btn-call,.btn-whatsapp{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 24px;
    border-radius:10px;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:var(--transition);
}
.btn-call{background:var(--adgro-purple)}
.btn-call:hover{
    background:var(--adgro-purple-light);
    transform:translateY(-3px);
}
.btn-whatsapp{background:#25D366}
.btn-whatsapp:hover{
    background:#16a34a;
    transform:translateY(-3px);
}

.design-hero-card{
    position:relative;
    overflow:hidden;
    padding:40px;
    border-radius:28px;
    background:#fff;
    color:var(--adgro-text);
    box-shadow:var(--shadow-lg);
}
.design-hero-card::before{
    content:"";
    position:absolute;
    width:180px;height:180px;
    right:-70px;top:-70px;
    border-radius:50%;
    background:rgba(214,108,169,.12);
}
.design-hero-icon{
    width:68px;height:68px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    color:#fff;
    background:linear-gradient(135deg,var(--adgro-purple),var(--adgro-purple-light));
}
.design-hero-card h2{
    font-size:2.3rem;
    margin:20px 0 10px;
    font-weight:900;
}
.design-hero-card h2 span{color:var(--adgro-purple)}
.hero-card-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:20px;
}
.hero-card-tags span{
    background:#fff;
    border:1px solid var(--adgro-border);
    padding:8px 14px;
    border-radius:30px;
    font-size:.8rem;
    font-weight:600;
}

.category-intro,
.design-process-section,
.local-seo-section{
    padding:90px 0;
}
.section-heading{
    max-width:760px;
    margin:0 auto 50px;
}
.section-heading span{
    color:var(--adgro-purple);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:2px;
}
.section-heading h2{
    font-size:clamp(2rem,4vw,3.2rem);
    margin:15px 0;
    font-weight:900;
}
.section-heading h2 strong{color:var(--adgro-purple)}
.section-heading p{
    color:var(--adgro-muted);
    line-height:1.8;
}

.printing-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.printing-service-card{
    position:relative;
    padding:30px;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--adgro-border);
    overflow:hidden;
    transition:var(--transition);
    box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.printing-service-card::before{
    content:"";
    position:absolute;
    width:120px;height:120px;
    right:-55px;bottom:-55px;
    border-radius:50%;
    background:rgba(214,108,169,.08);
}
.printing-service-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
    border-color:rgba(118,36,93,.25);
}
.service-number{
    position:absolute;
    top:18px;right:20px;
    font-size:2.2rem;
    font-weight:900;
    color:#ece3ea;
}
.service-icon{
    width:56px;height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    background:rgba(118,36,93,.10);
    color:var(--adgro-purple);
    font-size:1.4rem;
    transition:var(--transition);
}
.printing-service-card:hover .service-icon{
    color:#fff;
    background:linear-gradient(135deg,var(--adgro-purple),var(--adgro-purple-light));
}
.printing-service-card h3{
    font-size:1.15rem;
    font-weight:800;
    margin-bottom:12px;
}
.printing-service-card p{
    color:var(--adgro-muted);
    line-height:1.65;
    min-height:90px;
}
.printing-service-card a{
    color:var(--adgro-purple);
    text-decoration:none;
    font-weight:700;
}
.printing-service-card a:hover{color:var(--adgro-purple-dark)}

.design-process-section{
    background:linear-gradient(180deg,#faf8fa,var(--adgro-bg));
}
.design-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.design-process-card{
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    position:relative;
    border:1px solid var(--adgro-border);
    transition:var(--transition);
}
.design-process-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}
.design-process-card span{
    position:absolute;
    top:18px;left:18px;
    color:var(--adgro-pink);
    font-weight:800;
}
.design-process-card i{
    width:70px;height:70px;
    margin:10px auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:1.8rem;
    background:linear-gradient(135deg,var(--adgro-purple),var(--adgro-purple-light));
}
.design-process-card h3{
    font-size:1.15rem;
    font-weight:800;
}
.design-process-card p{
    color:var(--adgro-muted);
    font-size:.92rem;
    line-height:1.6;
}

.local-seo-box{
    background:var(--adgro-bg);
    border-radius:28px;
    padding:55px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.local-seo-box::before{
    content:"";
    position:absolute;
    left:-90px;top:-90px;
    width:200px;height:200px;
    border-radius:50%;
    background:rgba(214,108,169,.08);
}
.local-seo-box>span{
    color:var(--adgro-purple);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:2px;
}
.local-seo-box h2{
    font-size:clamp(2rem,4vw,3rem);
    margin:16px 0;
    font-weight:900;
}
.local-seo-box h2 strong{color:var(--adgro-purple)}
.local-seo-box p{
    max-width:700px;
    margin:0 auto 30px;
    color:var(--adgro-muted);
    line-height:1.8;
}
.location-info{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.location-info div{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    background:#fff;
    border-radius:50px;
    border:1px solid var(--adgro-border);
}
.location-info i{color:var(--adgro-purple)}
.location-info a{
    text-decoration:none;
    color:var(--adgro-purple);
    font-weight:700;
}

.category-cta{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    color:#fff;
    text-align:center;
    background:linear-gradient(135deg,var(--adgro-purple-dark),var(--adgro-black));
}
.category-cta::before{
    content:"";
    position:absolute;
    width:380px;height:380px;
    right:-140px;top:-140px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
}
.category-cta .container{position:relative;z-index:2}
.category-cta span{
    color:var(--adgro-pink);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:2px;
}
.category-cta h2{
    font-size:clamp(2.2rem,4vw,3.5rem);
    font-weight:900;
    margin:18px 0;
}
.category-cta h2 strong{color:var(--adgro-pink)}
.category-cta p{
    max-width:650px;
    margin:0 auto 30px;
    color:rgba(255,255,255,.72);
    line-height:1.8;
}
.cta-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.cta-buttons a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 24px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:var(--transition);
}
.cta-buttons a:first-child{background:var(--adgro-purple)}
.cta-buttons a:last-child{background:#25D366}
.cta-buttons a:hover{transform:translateY(-3px)}

@media (max-width:1200px){
    .printing-service-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:992px){
    .printing-service-grid,
    .design-process-grid{grid-template-columns:repeat(2,1fr)}
    .design-hero-card{margin-top:20px}
}
@media (max-width:768px){
    .design-category-hero h1{font-size:2.4rem}
    .hero-buttons,.cta-buttons{flex-direction:column}
    .hero-buttons a,.cta-buttons a{
        width:100%;
        justify-content:center;
    }
    .printing-service-grid,
    .design-process-grid{grid-template-columns:1fr}
    .printing-service-card p{min-height:auto}
    .location-info{flex-direction:column}
    .location-info div{
        justify-content:center;
        border-radius:14px;
    }
    .local-seo-box{padding:35px 20px}
    .category-intro,
    .design-process-section,
    .local-seo-section,
    .category-cta{padding:60px 0}
}

@media (max-width:576px){
    .service-breadcrumb{
        padding:18px 0 30px;
        font-size:.78rem;
    }
    .design-category-hero{padding-bottom:60px}
    .design-category-hero h1{font-size:2.15rem}
    .design-category-hero p{font-size:.95rem}
    .design-hero-card{padding:28px 22px}
    .design-hero-card h2{font-size:1.9rem}
    .printing-service-card{padding:26px 22px}
    .section-heading{margin-bottom:35px}
    .local-seo-box h2{font-size:1.9rem}
}

a:focus-visible{
    outline:3px solid rgba(214,108,169,.55);
    outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}