/* ==========================================================
   TechCredible - Service landing page (services/<slug>)
   Used only by services.php
   ========================================================== */
:root {
   --svc-primary: #f98c1e;
   --svc-primary-dark: #ef6a17;
   --svc-dark: #1f2732;
   --svc-text: #5a6270;
   --svc-tint: #fff6ee;
   --svc-tint-2: #f5f8fc;
   --svc-border: #ece7e2;
}

/* ---------- shared ---------- */
.svc-eyebrow {
   display: inline-block;
   color: var(--svc-primary-dark);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 12px;
}
.svc-btn,
.svc-btn-outline,
.svc-btn-white {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 15px;
   line-height: 1;
   transition: all .25s ease;
   text-decoration: none;
}
.svc-btn {
   background: linear-gradient(90deg, var(--svc-primary-dark), var(--svc-primary));
   color: #fff !important;
   padding: 15px 28px;
   box-shadow: 0 10px 24px rgba(239, 106, 23, .28);
}
.svc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(239, 106, 23, .38); }
.svc-btn-outline {
   border: 1.5px solid var(--svc-primary-dark);
   color: var(--svc-primary-dark) !important;
   padding: 12px 24px;
   background: #fff;
}
.svc-btn-outline:hover { background: var(--svc-primary-dark); color: #fff !important; }
.svc-btn-white {
   background: #fff;
   color: var(--svc-primary-dark) !important;
   padding: 16px 30px;
   white-space: nowrap;
}
.svc-btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .15); }
.svc-btn i, .svc-btn-outline i, .svc-btn-white i { font-size: 13px; }

.svc-head {
   max-width: 820px;
   margin: 0 auto 50px;
   text-align: center;
}
.svc-head h2 {
   font-size: 38px;
   line-height: 1.25;
   color: var(--svc-dark);
   margin-bottom: 16px;
}
.svc-head p { color: var(--svc-text); font-size: 17px; line-height: 1.75; margin: 0; }

/* ---------- hero (background image) ---------- */
.svc-hero {
   position: relative;
   overflow: hidden;
   padding: 150px 0 110px;
   min-height: 560px;
   display: flex;
   align-items: center;
   background-color: #0d1b2e;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
.svc-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(8, 18, 34, .88) 0%, rgba(8, 18, 34, .65) 45%, rgba(8, 18, 34, .15) 100%);
}
.svc-hero .container { z-index: 2; }
.svc-hero .svc-eyebrow { color: var(--svc-primary); }
.svc-hero h1 {
   font-size: 54px;
   line-height: 1.15;
   font-weight: 800;
   color: #fff;
   margin-bottom: 22px;
}
.svc-hero h1 span { display: block; color: var(--svc-primary); }
.svc-hero-text p {
   font-size: 18px;
   line-height: 1.75;
   color: rgba(255, 255, 255, .88);
   max-width: 560px;
   margin-bottom: 32px;
}
.svc-breadcrumb {
   list-style: none;
   padding: 0;
   margin: 36px 0 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 14px;
   color: rgba(255, 255, 255, .75);
}
.svc-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .45); }
.svc-breadcrumb a { color: #fff; font-weight: 600; }

/* ---------- intro ---------- */
.svc-intro { padding: 100px 0 40px; background: #fff; }
.svc-head-2 { margin-bottom: 20px; }
.svc-intro .svc-head + .svc-head-2 { margin-top: 70px; }

/* ---------- alternating sub-service rows ---------- */
.svc-item { padding: 70px 0; background: #fff; }
.svc-item-alt { background: var(--svc-tint); }
.svc-item-text { max-width: 520px; padding: 10px 0; }
.svc-item .flex-lg-row-reverse .svc-item-text { margin-left: auto; }
.svc-num {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--svc-primary-dark);
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 10px;
}
.svc-num::after { content: ""; width: 40px; height: 2px; background: rgba(239, 106, 23, .35); }
.svc-item-text h3 { font-size: 30px; line-height: 1.3; margin-bottom: 16px; }
.svc-item-text h3 a { color: var(--svc-dark); }
.svc-item-text h3 a:hover { color: var(--svc-primary-dark); }
.svc-item-text p { color: var(--svc-text); font-size: 16px; line-height: 1.8; margin-bottom: 28px; }
.svc-item-img {
   display: block;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 24px 50px rgba(31, 39, 50, .14);
}
.svc-item-img img {
   width: 100%;
   aspect-ratio: 10 / 7;
   object-fit: cover;
   transition: transform .5s ease;
}
.svc-item-img:hover img { transform: scale(1.04); }

/* ---------- why choose ---------- */
.svc-why { padding: 100px 0; background: linear-gradient(180deg, var(--svc-tint) 0%, #fff 100%); }
.svc-card {
   height: 100%;
   background: #fff;
   border: 1px solid var(--svc-border);
   border-radius: 18px;
   padding: 34px 26px;
   text-align: center;
   transition: all .25s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(31, 39, 50, .09); border-color: transparent; }
.svc-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 22px;
   margin-bottom: 20px;
}
.svc-icon-1 { background: linear-gradient(135deg, #ff9a3c, #ef5a17); }
.svc-icon-2 { background: linear-gradient(135deg, #b18cff, #7b4ddb); }
.svc-icon-3 { background: linear-gradient(135deg, #5fd39a, #22a56b); }
.svc-icon-4 { background: linear-gradient(135deg, #5ea8ff, #2468e0); }
.svc-card h4 { font-size: 19px; color: var(--svc-dark); margin-bottom: 10px; }
.svc-card p { color: var(--svc-text); font-size: 15px; line-height: 1.7; margin: 0; }

/* ---------- use cases ---------- */
.svc-usecases { padding: 90px 0; background: var(--svc-tint-2); }
.svc-usecase {
   height: 100%;
   display: flex;
   gap: 18px;
   align-items: flex-start;
   background: #fff;
   border-radius: 16px;
   padding: 26px;
   border: 1px solid #e6ebf2;
}
.svc-usecase-icon {
   flex: 0 0 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--svc-tint);
   color: var(--svc-primary-dark);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
}
.svc-usecase h4 { font-size: 18px; color: var(--svc-dark); margin-bottom: 6px; }
.svc-usecase p { color: var(--svc-text); font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- FAQ (image + accordion) ---------- */
.svc-faq { padding: 100px 0; background: #fff; }
.svc-faq-img { border-radius: 20px; overflow: hidden; }
.svc-faq-img img { width: 100%; object-fit: cover; }
.svc-faq .accordion-style .card-body { color: var(--svc-text); line-height: 1.75; }

/* ---------- request a free quote ---------- */
.svc-quote { padding: 90px 0; background: #fff; border-top: 1px solid #f1ece7; }

/* ---------- product page extras ---------- */
.svc-head p + p { margin-top: 14px; }
.svc-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.svc-btn-ghost {
   display: inline-flex;
   align-items: center;
   border-radius: 50px;
   padding: 14px 28px;
   font-weight: 600;
   font-size: 15px;
   line-height: 1;
   color: #fff !important;
   border: 1.5px solid rgba(255, 255, 255, .7);
   transition: all .25s ease;
}
.svc-btn-ghost:hover { background: #fff; color: var(--svc-dark) !important; }
.svc-icon-5 { background: linear-gradient(135deg, #ff7aa8, #e0336f); }
.svc-icon-6 { background: linear-gradient(135deg, #4fd1d9, #1795a8); }
.svc-feature-panel {
   position: relative;
   overflow: hidden;
   aspect-ratio: 10 / 7;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;
   text-align: center;
   padding: 30px;
   background:
      radial-gradient(circle at 80% 20%, rgba(249, 140, 30, .35), transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(94, 168, 255, .25), transparent 45%),
      linear-gradient(135deg, #13233a 0%, #0b1626 100%);
   box-shadow: 0 24px 50px rgba(31, 39, 50, .14);
}
.svc-feature-panel::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
   background-size: 22px 22px;
}
.svc-feature-panel-icon {
   position: relative;
   width: 110px;
   height: 110px;
   border-radius: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 46px;
   color: #fff;
   background: linear-gradient(135deg, var(--svc-primary), var(--svc-primary-dark));
   box-shadow: 0 18px 40px rgba(239, 106, 23, .45);
}
.svc-feature-panel-title { position: relative; color: #fff; font-size: 24px; font-weight: 700; }
.svc-feature-panel-brand {
   position: relative;
   color: rgba(255, 255, 255, .6);
   font-size: 13px;
   letter-spacing: 2px;
   text-transform: uppercase;
}
@media (max-width: 575px) {
   .svc-feature-panel-icon { width: 84px; height: 84px; font-size: 34px; border-radius: 22px; }
   .svc-feature-panel-title { font-size: 20px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
   .svc-hero h1 { font-size: 46px; }
}
@media (max-width: 991px) {
   .svc-hero { padding: 110px 0 70px; min-height: 0; }
   .svc-hero::before { background: rgba(8, 18, 34, .78); }
   .svc-hero h1 { font-size: 38px; }
   .svc-head h2 { font-size: 30px; }
   .svc-intro { padding: 70px 0 20px; }
   .svc-item { padding: 50px 0; }
   .svc-item-text { max-width: none; margin-bottom: 30px; }
   .svc-item-text h3 { font-size: 26px; }
   .svc-why, .svc-faq, .svc-usecases, .svc-quote { padding: 70px 0; }
}
@media (max-width: 575px) {
   .svc-hero h1 { font-size: 32px; }
   .svc-hero-text p, .svc-head p { font-size: 16px; }
   .svc-head h2 { font-size: 26px; }
}