/* ============================================================
   SERVICE DETAIL PAGE  —  service-detail.css
   All classes are prefixed .sd-* to avoid any collisions
   ============================================================ */

/* ── Design tokens ── */
:root {
    --sd-cyan: #009AB5;
    --sd-cyan-mid: #3DBFEA;
    --sd-blue-dark: #206C86;
    --sd-card-bg: #DCF3FF;
    --sd-faq-bg: #FFF5D5;
    --sd-approach-bg: #FFF5D5;
    --sd-stats-bg: #009AB5;
    --sd-text: #222222;
    --sd-gray: #555555;
    --sd-border: #D1E5EB;
    --sd-white: #ffffff;
}

/* =============================================
   COMMON
============================================= */
.sd-container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sd-hero, .sd-intro{ font-family: 'Poppins', 'Roboto', Arial, sans-serif; }

/* =============================================
   SECTION 1: HERO
============================================= */
.sd-hero{
    position: relative;
    width: 100%;
    height:280px;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

/* =============================================
   SECTION 2: INTRO + OFFER BAR
============================================= */
.sd-intro{ padding: 70px 0 0; }
.sd-intro > .sd-container{ padding-bottom: 60px; }   /* offer bar se pehle ka gap */

.sd-intro h2{ margin: 0 0 28px; font-size: 34px; font-weight: 700; color: #000000;}
.sd-intro > .sd-container p{ margin: 0 0 22px; font-size: 17.5px; line-height: 2; color: #000000; }

/* Blue offer bar — ab intro ke andar, full-width */
.sd-offer-bar{
    background: linear-gradient(to right, #1D75BC, #186CB0);
    padding: 30px 0;
}
.sd-offer-bar .sd-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 65px;
}
.sd-offer-bar h2{ margin: 0; color: #fff; font-size: 24px; font-weight: 700; }

/* =============================================
   RESPONSIVE (Sections 1 + 2)
============================================= */
@media (max-width: 992px){
    .sd-hero{ height: 320px; }
    .sd-offer-bar .sd-container{ justify-content: center; text-align: center; }
}
@media (max-width: 576px){
    .sd-hero{ height: 160px; }
    .sd-intro h2{ font-size: 24px; }
    .sd-offer-bar h2{ font-size: 19px; }
    .sd-offer-bar .sd-container{ gap: 10px; }
}
/* =============================================
   SECTION 3: PROCESS (PINK CARDS + 01, 02...)
============================================= */
.sd-process{  padding: 70px 0; text-align: center; font-family: 'Poppins', 'Roboto', Arial, sans-serif; }
.sd-process h2{ margin: 0 0 20px; font-size: 30px; font-weight: 700; color: #000000;}
.sd-process > .sd-container > p{
    max-width: 1000px; margin: 0 auto 50px;
    font-size: 17.5px; line-height: 1.9; color: #000000;
}

.sd-process ul{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    text-align: left;
    counter-reset: step;                      /* 01, 02, 03... auto numbers */
}
.sd-process ul li{
    counter-increment: step;
    background: #FFE2F2;
    padding: 28px 20px 24px;
    position: relative;
    border: 2px solid transparent;           
    transition: border-color .3s;
}
.sd-process ul li:hover{ border-color: #1D75BC; }
.sd-process ul li::before{                    
    content: counter(step, decimal-leading-zero);
    position: absolute; top: 12px; right: 18px;
    color: #1D75BC; font-size: 26px; font-weight: 700;
}
.sd-process ul li h3{ margin: 14px 0 12px; font-size: 18px; font-weight: 700; color: #000000;}
.sd-process ul li p{ margin: 0; font-size: 16px; line-height: 1.7; color: #000000; }

/* =============================================
   SECTION 4: WHY BRING + TYPES
============================================= */
.sd-why{  padding: 40px 0 0; font-family: 'Poppins', 'Roboto', Arial, sans-serif; }
.sd-why > .sd-container{ padding-bottom: 70px; }

.sd-why > .sd-container h2{ margin: 0 0 24px; font-size: 34px; font-weight: 700; color: #000000;}
.sd-why > .sd-container p{ margin: 0 0 24px; font-size: 17.5px; line-height: 1.95; color: #000000; }
.sd-why > .sd-container ul{ list-style: disc; padding-left: 22px; margin: 0 0 26px; }
.sd-why > .sd-container ul li{ margin-bottom: 13px; font-size: 16.5px; font-weight: 600; color: #000000;}

/* Types (pink block, ab why ke andar full-width) */
.sd-types{ background: #FFE2F2; padding: 15px 0; }
.sd-types h2{ margin: 0 0 18px; font-size: 34px; font-weight: 700; color: #000000;}
.sd-types > .sd-container > p{ margin: 0 0 40px; font-size: 18px; line-height: 1.9; color: #000000; }
.sd-types ul{ list-style: none; margin: 0; padding: 0; }
.sd-types ul li{ position: relative; padding-left: 36px; margin-bottom: 34px; }
.sd-types ul li::before{                      /* arrow */
    content: "→";
    position: absolute; left: 0; top: 0;
    color: #9E1F63; font-size: 20px;
}
.sd-types ul li h3{ margin: 0 0 10px; font-size: 19px; font-weight: 700; color: #000000; }
.sd-types ul li p{ margin: 0; font-size: 17px; line-height: 1.8; color: #000000;   }

/* =============================================
   SECTION 5: FAMOUS + CTA + FAQ
============================================= */




.sd-famous{  padding: 80px 0 0; text-align: center; font-family: 'Poppins', 'Roboto', Arial, sans-serif; }
.sd-famous > .sd-container{ padding-bottom: 90px; }

.sd-famous > .sd-container h2{ margin: 0 0 16px; font-size: 34px; font-weight: 700; color: #000000;}
.sd-famous > .sd-container > p{
    max-width: 640px; margin: 0 auto 75px;
    font-size: 17.5px; line-height: 1.3; color: #000000;
}

.sd-famous > .sd-container ul{
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px;
}
.sd-famous > .sd-container ul li{
    position: relative;
    margin-top: 45px;                          /* diamond overlap space */
    padding: 65px 18px 28px;
    border: 1px solid #E1E1E1;
    transition: border-color .3s;
}
.sd-famous > .sd-container ul li:hover{ border-color: #9E1F63; }



.sd-famous > .sd-container ul li::before{      
    content: "";
    position: absolute; top: -45px; left: 50%;
    width: 88px; height: 88px; margin-left: -44px;
    background: #9E1F63;
    transform: rotate(45deg);
}



.sd-famous > .sd-container ul li::after{       
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f46c";                   
    position: absolute; top: -45px; left: 50%;
    width: 88px; height: 88px; margin-left: -44px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 34px;                    
}




.sd-famous > .sd-container ul li h3{ margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #000000;}
.sd-famous > .sd-container ul li p{ margin: 0; font-size: 17px; line-height: 1.7; color: #000000; }








/* ---------- CTA (blue strip + magenta box) ---------- */
.sd-cta{ position: relative;  padding: 30px 0 0; }
.sd-cta::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 95px;
    background: #1D75BC;
}
.sd-cta .sd-container > div{
    position: relative; z-index: 2;
    background: #9E1F63;
    border-radius: 8px;
    padding: 42px 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 25px; flex-wrap: wrap;
    margin-bottom: 48px;
    top: -35px;
}
.sd-cta .sd-container > div::before{           /* dashed inner border */
    content: "";
    position: absolute; inset: 12px;
    border: 2px dashed rgba(255,255,255,.55);
    border-radius: 5px;
    pointer-events: none;
}
.sd-cta h3{ margin: 0; color: #fff; font-size: 25px; font-weight: 700; line-height: 1.4; }
.sd-cta a{
    position: relative;
    background: #1D75BC; color: #fff;
    padding: 13px 30px;
    font-size: 15px; text-decoration: none;
    transition: background .25s;
}
.sd-cta a:hover{ background: #9E1F63; border: 2px solid #1D75BC; }

/* ---------- FAQ ---------- */
.sd-faq{ background: #fff; padding: 80px 0 90px; }
.sd-faq h2{ margin: 0 0 35px; font-size: 30px; font-weight: 700; color: #000000;}
.sd-faq .faq-item{
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 16px;
    transition: border-color .3s;
}
.sd-faq .faq-item.active{ border-color: #9E1F63; }
.sd-faq .faq-question{
    display: flex; align-items: center; justify-content: space-between; gap: 15px;
    padding: 17px 22px;
    cursor: pointer;
    font-size: 19px; font-weight: 600; color: #000000;
    text-align: left;
}
.sd-faq .faq-question::after{                  
    content: "";
    flex-shrink: 0;
    width: 9px; height: 9px;
    border-right: 2.5px solid #1D75BC;
    border-bottom: 2.5px solid #1D75BC;
    transform: rotate(45deg);
    transition: transform .3s;
}
.sd-faq .faq-item.active .faq-question::after{ transform: rotate(225deg); }
.sd-faq .faq-answer{ display: none; padding: 0 22px 18px; }
.sd-faq .faq-item.active .faq-answer{ display: block; }
.sd-faq .faq-answer p{ margin: 0; font-size: 17px; line-height: 1.8; color: #000000; }

/* =============================================
   RESPONSIVE (Sections 3, 4, 5)
============================================= */
@media (max-width: 992px){
    .sd-process ul,
    .sd-famous > .sd-container ul{ grid-template-columns: repeat(2, 1fr); }
    .sd-cta .sd-container > div{ flex-direction: column; text-align: center; }
}
@media (max-width: 576px){
    .sd-process h2,
    .sd-why > .sd-container h2,
    .sd-types h2,
    .sd-famous > .sd-container h2,
    .sd-faq h2{ font-size: 24px; }

    .sd-process ul,
    .sd-famous > .sd-container ul{ grid-template-columns: 1fr; }

    .sd-famous > .sd-container ul li{ margin-top: 50px; }
    .sd-cta .sd-container > div{ padding: 32px 25px; }
    .sd-cta h3{ font-size: 20px; }
}