/* ==========================================================
   INNER SERVICE PAGE TEMPLATE — Matches rawcode/service-detail.php
   Colors, spacing, layout from Tailwind classes converted to CSS
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --yellow: #f9b234;
    --black: #000000;
    --dark-card: #272727;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;
    --blue-accent: #636eb0;
    --radius: 0.75rem;
    --radius-xl: 1rem;
}
* { box-sizing: border-box; }


/* ===== MOBILE CALL BUTTON (shared with parent) ===== */
.ist-mobile-call { display:none; background:var(--yellow); padding:0.75rem; border-radius:var(--radius-xl); align-items:center; gap:1.25rem; text-decoration:none; color:var(--black); position:relative; z-index:20; margin-bottom:0.75rem; }
.ist-mobile-call__ring { position:relative; width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center; margin-left:0.75rem; }
.ist-mobile-call__ping { position:absolute; width:100%; height:100%; border-radius:9999px; background:#22c55e; opacity:0.75; animation:ist-ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.ist-mobile-call__icon { position:relative; width:3.5rem; height:3.5rem; background:#22c55e; border-radius:9999px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); color:white; }
.ist-mobile-call__text { display:flex; flex-direction:column; text-align:left; }
.ist-mobile-call__label { font-size:1.25rem; font-weight:600; }
.ist-mobile-call__number { font-size:1.875rem; font-weight:700; }
@keyframes ist-ping { 75%,100% { transform:scale(2); opacity:0; } }
@media(max-width:767px){ .ist-mobile-call{display:flex;} }


/* ===== HERO BANNER (Yellow BG + Image) ===== */
.ist-hero { background:var(--yellow); padding:1rem 2rem; position:relative; z-index:1; }
.ist-hero__overlay { background:rgba(255,255,255,0.7); position:absolute; left:0; top:0; width:100%; height:100%; display:none; }
.ist-hero__inner { margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:2.5rem; z-index:10; position:relative; }
.ist-hero__content { width:50%; }
.ist-hero__title { font-family:'Inter',sans-serif; font-size:2.25rem; font-weight:800; line-height:1.15; margin:0 0 1.5rem; letter-spacing:-0.025em; color:var(--black); }
.ist-hero__subtitle { font-size:1.125rem; margin:0 0 1.5rem; font-style:italic; width:85%; color:var(--black); line-height:1.6; }
.ist-hero__badges { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; }
.ist-badge { background:var(--white); padding:0.5rem; border-radius:0.5rem; text-decoration:none; display:block; }
.ist-badge img { height:50px; width:auto; display:block; }
.ist-hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:0.75rem; }
.ist-hero__image { width:50%; }
.ist-hero__image img { width:100%; height:450px; object-fit:cover; object-position:top; display:block; }

@media(min-width:768px){
    .ist-hero { padding:1rem 2rem 0 2rem; }
    .ist-hero__inner { flex-direction:row; }
}
@media(max-width:767px){
    .ist-hero__overlay { display:block; }
    .ist-hero__inner { flex-direction:column; }
    .ist-hero__content { width:100%; }
    .ist-hero__title { font-size:1.5rem; }
    .ist-hero__image { width:100%; }
    .ist-hero__image img { height:auto; }
    .ist-hero__subtitle { width:100%; }
}
@media(min-width:768px) and (max-width:1023px){
    .ist-hero__title { font-size:1.875rem; }
    .ist-hero__content { width:50%; }
    .ist-hero__image { width:50%; }
}


/* ===== BUTTONS ===== */
.ist-btn { display:inline-block; padding:0.75rem 1.5rem; border-radius:0.5rem; font-family:'Inter',sans-serif; font-weight:700; font-size:0.875rem; text-decoration:none; transition:all 0.3s; cursor:pointer; border:none; text-align:center; }
.ist-btn--dark { background:var(--black); color:var(--white); box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.ist-btn--dark:hover { background:var(--gray-900); color:var(--white); transform:scale(1.05); }
.ist-btn--yellow { background:var(--yellow); color:var(--black); box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.ist-btn--yellow:hover { box-shadow:0 8px 12px rgba(0,0,0,0.15); transform:scale(1.05); }
.ist-btn--full { width:100%; }


/* ===== ARTICLE / CONTENT SECTIONS ===== */
.ist-article { padding:3rem 1rem; }
.ist-article__container { max-width:72rem; margin:0 auto; }

/* Schema meta (hidden) */
.ist-article meta { display:none; }

/* Section grid (2 columns alternating) */
.ist-sec { margin-bottom:4rem; }
.ist-sec:last-child { margin-bottom:0; }
.ist-sec__grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.ist-sec__img img { width:100%; border-radius:var(--radius); box-shadow:0 10px 15px rgba(0,0,0,0.1); object-fit:cover; display:block; }
.ist-sec__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--gray-900); margin:0 0 1rem; line-height:1.3; }
.ist-sec__title--mobile { display:none; font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:700; color:var(--gray-900); margin:0 0 1rem; line-height:1.3; }
.ist-sec__title--desktop { display:block; }
.ist-sec__desc { font-family:'Inter',sans-serif; font-size:1.125rem; line-height:1.625; color:var(--blue-accent); }
.ist-sec__desc p { margin:0 0 1rem; }
.ist-sec__desc ul { list-style:none; padding:0; margin:0 0 1rem; }
.ist-sec__desc ul li { padding:0.25rem 0; color:var(--blue-accent); font-size:1.125rem; }
.ist-sec__desc strong { color:var(--gray-800); }

@media(max-width:767px){
    .ist-sec__grid { grid-template-columns:1fr; gap:1.5rem; }
    .ist-sec__title { font-size:1.5rem; }
    .ist-sec__title--mobile { display:block; }
    .ist-sec__title--desktop { display:none; }
}


/* ===== WHY CHOOSE US (reuses spt- prefix from service-page-styles.css) ===== */
.ist-why { background:var(--black); padding:4rem 1rem; }
.ist-why__header { max-width:40rem; margin:0 auto 3rem; text-align:center; }
.ist-why__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--white); margin:0 0 1rem; }
.ist-why__subtitle { color:var(--gray-400); font-size:1.125rem; margin:0; }
.ist-why__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:72rem; margin:0 auto; }
.ist-why-card { background:var(--dark-card); padding:1.5rem; border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; }
.ist-why-card:hover { box-shadow:0 20px 25px rgba(0,0,0,0.15); transform:translateY(-4px); }
.ist-why-card__title { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:600; color:var(--yellow); margin:0 0 0.5rem; }
.ist-why-card__icon { display:block; margin-bottom:1rem; }
.ist-why-card__desc { color:var(--gray-300); font-size:0.875rem; margin:0; line-height:1.5; }
.ist-yellow { color:var(--yellow); }
@media(max-width:767px){ .ist-why__grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .ist-why__grid{grid-template-columns:1fr;} }


/* ===== MAP ===== */
.ist-map { padding:3rem 1rem; background:var(--white); }
.ist-map__grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:80rem; margin:0 auto; }
.ist-map__text { padding-top:2.5rem; }
.ist-map__title { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:800; color:var(--gray-900); margin:0 0 1rem; }
.ist-map__areas { color:var(--gray-600); font-size:1rem; margin:0 0 1.5rem; line-height:1.6; }
.ist-map__embed { border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 10px 15px rgba(0,0,0,0.1); }
.ist-map__embed iframe { width:100%; height:320px; border:0; display:block; }
@media(max-width:767px){ .ist-map__grid{grid-template-columns:1fr;} .ist-map__text{text-align:center;} }


/* ===== REVIEWS ===== */
.ist-reviews { background:#8c8c8c; padding:3rem 1rem; }
.ist-reviews__grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:72rem; margin:0 auto; }
.ist-reviews__img img { width:100%; border-radius:var(--radius); display:block; }
.ist-reviews__title { font-family:'Inter',sans-serif; font-size:1.875rem; font-weight:700; color:var(--gray-900); margin:0 0 2.5rem; }
.ist-reviews__cards { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.ist-review { background:linear-gradient(to bottom right,var(--gray-200),var(--gray-100)); padding:1.5rem; border-radius:0.5rem; box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; margin:0; border:none; }
.ist-review:hover { transform:scale(1.05); }
.ist-review p { font-style:italic; margin:0 0 1rem; color:var(--black); font-size:0.95rem; line-height:1.5; }
.ist-review footer { color:var(--black); font-weight:600; font-size:0.9rem; }
.ist-stars { color:var(--yellow); margin-right:0.5rem; }
.ist-review__sep { display:inline; }
.ist-reviews__cta { margin-top:2.5rem; }
@media(max-width:767px){ .ist-reviews__grid{grid-template-columns:1fr;} .ist-reviews__cards{grid-template-columns:1fr;} .ist-review__sep{display:none;} }


/* ===== FAQ ===== */
.ist-faq { background:var(--white); padding:4rem 1rem; }
.ist-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:72rem; margin:0 auto; align-items:center; }
.ist-faq__heading { font-family:'Inter',sans-serif; font-size:2.25rem; font-weight:800; margin:0 0 0.5rem; }
.ist-faq__line { width:5rem; height:0.25rem; background:var(--yellow); border-radius:9999px; margin-bottom:3rem; }
.ist-faq-item { background:var(--gray-50); padding:1.5rem; border-radius:var(--radius-xl); box-shadow:0 10px 15px rgba(0,0,0,0.1); transition:all 0.3s; margin-bottom:1rem; }
.ist-faq-item:hover { transform:scale(1.05); }
.ist-faq-item__q { display:flex; align-items:center; gap:0.75rem; }
.ist-faq-item__icon { color:var(--yellow); font-size:1.5rem; }
.ist-faq-item__q h3 { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:600; color:var(--gray-900); margin:0 0 0.5rem; }
.ist-faq-item p { color:var(--gray-700); font-size:1rem; margin:0; line-height:1.5; }
.ist-faq__img { background:linear-gradient(to top,var(--yellow),var(--white)); border-radius:0 0 var(--radius-xl) var(--radius-xl); }
.ist-faq__img img { width:100%; display:block; }
@media(max-width:767px){ .ist-faq__grid{grid-template-columns:1fr;} .ist-faq-item__q{flex-direction:column;text-align:center;} }


/* ===== BANNER SECTION OVERLAYS (mobile) ===== */
@media(max-width:767px){
    .ist-hero .banner_heading { color:#000; }
}