/* =====================================================
   COOLTECH PUBLIC THEME
   LIGHT / DARK MODE
===================================================== */


/* ================= LIGHT MODE ================= */

:root {

    --primary: #087fe5;

    --bg: #ffffff;

    --section-alt: #f4f8fb;

    --card: #ffffff;

    --header-bg: #ffffff;

    --footer-bg: #032238;

    --text: #10283d;

    --muted: #687988;

    --border: #e3ebf1;

}


/* ================= DARK MODE ================= */

body.dark-mode {

    --primary: #19a8ff;

    --bg: #07141f;

    --section-alt: #0a1b29;

    --card: #0d2232;

    --header-bg: #07141f;

    --footer-bg: #030d15;

    --text: #f1f7fb;

    --muted: #9db0bd;

    --border: #1d3547;

}


/* DARK MODE HEADER */

body.dark-mode .header {
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}


/* DARK MODE CARDS */

body.dark-mode .service-card,
body.dark-mode .testimonial,
body.dark-mode .experience-badge {
    box-shadow: none;
}


/* DARK MODE HOVER */

body.dark-mode .service-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}


/* DARK MODE THEME BUTTON */

body.dark-mode .theme-toggle i::before {
    content: "\f185";
}


/* Keep icon hidden when replaced */

body.dark-mode .theme-toggle i {
    font-size: 0;
}

body.dark-mode .theme-toggle i::before {
    font-size: 15px;
}


/* ================= TRANSITIONS ================= */

body,
.header,
.mobile-nav,
.trust-bar,
.service-card,
.testimonial,
.experience-badge,
.theme-toggle {
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* =====================================================
   HERO IMAGE + LIGHT / DARK MODE POLISH
   Safe override layer — existing JS functions unchanged.
===================================================== */

.hero{
    position:relative;
    min-height:520px;
    overflow:hidden;
    isolation:isolate;
    background:var(--hero-bg, #dbeffc);
}

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    z-index:0;
    transition:opacity .35s ease, filter .35s ease, transform .6s ease;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg,
            rgba(3,34,56,.96) 0%,
            rgba(3,34,56,.82) 43%,
            rgba(3,34,56,.48) 68%,
            rgba(3,34,56,.16) 100%);
    transition:background .35s ease;
}

.hero-content{
    position:relative;
    z-index:2;
    min-height:520px;
    display:flex;
    align-items:center;
    padding:60px 20px;
}

.hero-text{
    color:#fff;
}

.hero .eyebrow{
    color:#49c5ff !important;
}

.hero h1{
    color:#fff;
}

.hero h1 span{
    color:#49c5ff !important;
}

.hero p,
.hero-features span{
    color:rgba(255,255,255,.92);
}

.hero-features i{
    color:#49c5ff !important;
}

.hero .primary-btn{
    background:var(--primary) !important;
    border-color:var(--primary) !important;
    color:#fff !important;
}

.hero .outline-btn{
    border-color:rgba(255,255,255,.78) !important;
    color:#fff !important;
    background:rgba(0,0,0,.08) !important;
}

.hero .outline-btn:hover{
    background:#fff !important;
    color:#08243a !important;
}

body.dark-mode{
    --hero-bg:#06131e;
}

body.dark-mode .hero-overlay{
    background:
        linear-gradient(90deg,
            rgba(2,13,23,.98) 0%,
            rgba(2,13,23,.91) 45%,
            rgba(2,13,23,.62) 72%,
            rgba(2,13,23,.25) 100%);
}

body.dark-mode .hero-image{
    filter:saturate(.92) brightness(.84);
}

body:not(.dark-mode) .hero-image{
    filter:saturate(1.04) brightness(1.02);
}

/* General public light/dark surfaces */
.services,
.contact{
    background:var(--bg);
    color:var(--text);
}

.section-heading h2,
.about-content h2,
.contact-content h2{
    color:var(--text);
}

.service-card{
    background:var(--card);
    border-color:var(--border);
    color:var(--text);
}

.service-content h3{
    color:var(--text);
}

.service-content p,
.service-content li{
    color:var(--muted);
}

body.dark-mode .service-card{
    background:var(--card) !important;
    border-color:var(--border) !important;
}

body.dark-mode .service-card:hover{
    border-color:rgba(25,168,255,.55) !important;
}

body.dark-mode .mobile-nav{
    background:var(--header-bg);
    border-color:var(--border);
}

body.dark-mode .theme-toggle{
    background:var(--card);
    color:var(--text);
    border-color:var(--border);
}

body.dark-mode .trust-details-btn,
body.dark-mode .service-btn{
    color:#fff !important;
}

/* Smooth theme transition without changing JS behavior */
body,
.header,
.mobile-nav,
.trust-bar,
.services,
.about,
.gallery,
.testimonials,
.contact,
.service-card,
.testimonial,
.experience-badge,
.contact-card,
.contact-form,
input,
textarea,
select{
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

@media (max-width:768px){
    .hero{
        min-height:300px !important;
        height:300px !important;
    }
    .hero-image{
        object-position:center;
    }
    .hero-overlay{
        background:
            linear-gradient(180deg,
                rgba(3,34,56,.92) 0%,
                rgba(3,34,56,.82) 55%,
                rgba(3,34,56,.68) 100%);
    }
    body.dark-mode .hero-overlay{
        background:
            linear-gradient(180deg,
                rgba(2,13,23,.95) 0%,
                rgba(2,13,23,.86) 55%,
                rgba(2,13,23,.72) 100%);
    }
    .hero-content{
        min-height:300px !important;
        padding:15px 16px 10px !important;
    }
}

/* =========================================================
   FOGS FINAL UI POLISH — THEME + FIXED HEADER + MODALS
   IMPORTANT: visual/CSS only. Firestore, Cloudinary and
   existing JavaScript functions are intentionally untouched.
========================================================= */

/* ---------- REAL THEME TOKENS ---------- */
body.light-mode {
  --primary: #0b9fe8;
  --bg: #f7fbfe;
  --section-alt: #edf6fb;
  --card: #ffffff;
  --header-bg: rgba(255,255,255,.97);
  --footer-bg: #062238;
  --text: #10283d;
  --muted: #64798a;
  --border: #d9e8f1;
  --surface-strong: #ffffff;
  --modal-shadow: 0 30px 90px rgba(5,31,49,.22);
}

body.dark-mode {
  --primary: #21a9f4;
  --bg: #06131e;
  --section-alt: #0a1d2b;
  --card: #0d2435;
  --header-bg: rgba(6,19,30,.97);
  --footer-bg: #020a11;
  --text: #f3f8fc;
  --muted: #a5b8c6;
  --border: #1c394d;
  --surface-strong: #102a3d;
  --modal-shadow: 0 30px 90px rgba(0,0,0,.55);
}

html, body {
  background: var(--bg);
  color: var(--text);
}

/* ---------- LOCKED INDEX HEADER ---------- */
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 82px;
  z-index: 11000 !important;
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 8px 30px rgba(2,24,40,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body {
  padding-top: 82px;
}

.header .nav-container {
  width: 100%;
  height: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

.nav a,
.logo-text strong,
.logo-text span,
.theme-toggle,
.admin-login-btn {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.mobile-nav {
  top: 82px !important;
  z-index: 10999 !important;
  background: var(--header-bg) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Anchor jumps should never hide behind the fixed header. */
section[id], footer[id] {
  scroll-margin-top: 96px;
}

/* ---------- ALL PUBLIC SECTIONS ---------- */
.services,
.about,
.gallery,
.testimonials,
.contact,
#brands,
.trust-bar {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.about,
.testimonials,
.trust-bar,
#brands {
  background: var(--section-alt) !important;
}

.section-heading h2,
.about-content h2,
.contact-content h2,
.service-content h3,
.brand-card span,
.trust-item strong {
  color: var(--text) !important;
}

.section-heading p,
.about-content p,
.service-content p,
.service-content ul li,
.brand-card span,
.trust-item span {
  color: var(--muted) !important;
}

/* ---------- TRUST / WHY CARDS: NEW COHESIVE DESIGN ---------- */
.trust-bar {
  padding: 22px 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

.trust-grid {
  gap: 14px !important;
  padding-left: 24px;
  padding-right: 24px;
}

.trust-item {
  position: relative;
  min-height: 118px;
  padding: 18px !important;
  gap: 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--card) !important;
  box-shadow: 0 8px 24px rgba(3,30,48,.06) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.trust-item::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -42px;
  top: -42px;
  border-radius: 50%;
  background: rgba(33,169,244,.08);
  pointer-events: none;
}

.trust-item:hover {
  transform: translateY(-4px);
  border-color: rgba(33,169,244,.48) !important;
  box-shadow: 0 16px 34px rgba(3,40,64,.11) !important;
}

.trust-item > i {
  position: relative;
  z-index: 1;
  min-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, rgba(33,169,244,.18), rgba(33,169,244,.07)) !important;
  border: 1px solid rgba(33,169,244,.22) !important;
  color: var(--primary) !important;
  font-size: 19px !important;
}

.trust-item > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.trust-item strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

.trust-item span {
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

.trust-details-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(11,159,232,.18);
}

body.dark-mode .trust-item {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

body.dark-mode .trust-item:hover {
  box-shadow: 0 18px 38px rgba(0,0,0,.32) !important;
}

/* ---------- SERVICE CARDS ---------- */
.services {
  padding-top: 58px !important;
  padding-bottom: 62px !important;
}

.service-grid {
  gap: 20px !important;
}

.service-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(3,30,48,.07) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(33,169,244,.55) !important;
  box-shadow: 0 20px 42px rgba(3,40,64,.13) !important;
}

.service-image {
  height: 205px !important;
}

.service-content {
  padding: 18px !important;
}

.service-icon {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 11px !important;
  background: linear-gradient(145deg, #21a9f4, #087fca) !important;
  box-shadow: 0 8px 18px rgba(11,159,232,.22);
}

.service-content h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.service-content p {
  font-size: 12px !important;
}

.service-content ul li {
  font-size: 11.5px !important;
}

.service-btn {
  min-height: 42px;
  background: linear-gradient(135deg, #16a5ed, #0b8fd4) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(11,159,232,.16);
}

body.dark-mode .service-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* ---------- SERVICE REQUEST MODAL: LIGHT/DARK FIX ---------- */
.service-modal {
  background: rgba(1,14,24,.72) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.service-modal-content {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--modal-shadow) !important;
}

.service-modal-content h2,
.service-modal-content label {
  color: var(--text) !important;
}

.service-modal-content > p {
  color: var(--muted) !important;
}

.modal-close {
  background: var(--section-alt) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.modal-close:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

#acInstallationForm input,
#acInstallationForm select,
#acInstallationForm textarea,
#acMaintenanceForm input,
#acMaintenanceForm select,
#acMaintenanceForm textarea,
#refrigerationForm input,
#refrigerationForm select,
#refrigerationForm textarea,
#commercialForm input,
#commercialForm select,
#commercialForm textarea {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

#acInstallationForm input::placeholder,
#acInstallationForm textarea::placeholder,
#acMaintenanceForm input::placeholder,
#acMaintenanceForm textarea::placeholder,
#refrigerationForm input::placeholder,
#refrigerationForm textarea::placeholder,
#commercialForm input::placeholder,
#commercialForm textarea::placeholder {
  color: var(--muted) !important;
  opacity: .9;
}

.service-submit-btn {
  background: linear-gradient(135deg, #16a5ed, #0b8fd4) !important;
}

/* ---------- BOOKING CHOOSER ---------- */
.booking-chooser-modal {
  background: rgba(1,14,24,.74) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.booking-chooser-card {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--modal-shadow) !important;
}

.booking-chooser-heading h2,
.booking-service-option strong {
  color: var(--text) !important;
}

.booking-chooser-heading p,
.booking-service-option small {
  color: var(--muted) !important;
}

.booking-chooser-close {
  background: var(--section-alt) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.booking-service-option {
  background: var(--section-alt) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ---------- SECOND PICTURE: FULLER, PREMIUM WHY MODAL ---------- */
.why-info-modal {
  padding: 14px !important;
  background: rgba(1,14,24,.76) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.why-info-box {
  width: min(940px, 100%) !important;
  max-width: 940px !important;
  max-height: min(92vh, 820px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 26px !important;
  box-shadow: var(--modal-shadow) !important;
}

.why-info-content {
  width: 100%;
  overflow-y: auto !important;
  padding: 34px 38px 26px !important;
  margin: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.why-info-icon {
  width: 70px !important;
  height: 70px !important;
  margin: 0 auto 15px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(33,169,244,.18), rgba(33,169,244,.06)) !important;
  border: 1px solid rgba(33,169,244,.20);
  color: var(--primary) !important;
  font-size: 28px !important;
}

.why-info-box h2 {
  text-align: center !important;
  color: var(--text) !important;
  font-size: clamp(25px, 4vw, 34px) !important;
  line-height: 1.15 !important;
  margin: 0 0 7px !important;
  letter-spacing: -.5px;
}

.why-info-box > .why-info-content > p,
.why-info-content > p {
  text-align: center !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  margin: 0 0 20px !important;
}

.why-info-img {
  width: 100% !important;
  margin: 0 0 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--section-alt) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.why-info-img img {
  width: 100% !important;
  height: clamp(190px, 32vw, 310px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

.why-info-message {
  width: 100% !important;
  padding: 20px 22px !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: var(--section-alt) !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.why-info-message i {
  color: var(--primary) !important;
}

.why-info-message strong {
  color: var(--text) !important;
}

.why-info-close {
  top: 18px !important;
  right: 18px !important;
  z-index: 5 !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
}

.why-info-close:hover {
  background: var(--primary) !important;
}

.why-info-ok {
  flex: 0 0 auto;
  width: auto !important;
  min-height: 48px;
  margin: 0 38px 28px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #16a5ed, #0b8fd4) !important;
  box-shadow: 0 10px 22px rgba(11,159,232,.18);
  font-size: 14px !important;
}

/* ---------- WORK DETAIL MODALS: SAME THEME AS WHY MODAL ---------- */
.work-detail-modal {
  background: rgba(1,14,24,.78) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 14px !important;
}

.work-detail-box {
  width: min(940px, 100%) !important;
  max-width: 940px !important;
  max-height: calc(100vh - 28px) !important;
  margin: auto !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  box-shadow: var(--modal-shadow) !important;
  overflow-y: auto !important;
}

.work-detail-header {
  min-height: 230px;
  height: 230px !important;
  position: relative;
}

.work-detail-header h2,
.work-detail-header i {
  position: relative;
  z-index: 1;
}

.work-detail-header h2 {
  font-size: clamp(25px, 4vw, 36px) !important;
}

.work-detail-content {
  padding: 30px 34px 34px !important;
}

.work-detail-content h3 {
  color: var(--text) !important;
  font-size: 23px;
  margin-bottom: 8px;
}

.work-detail-content > p,
.detail-item span {
  color: var(--muted) !important;
}

.detail-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--section-alt);
}

.detail-item i {
  color: var(--primary) !important;
}

.work-detail-cta {
  background: var(--section-alt) !important;
  border: 1px solid var(--border);
}

.work-detail-cta p {
  color: var(--text) !important;
  font-weight: 600;
}

.btn-primary {
  background: #062238 !important;
  color: #fff !important;
}

body.dark-mode .btn-primary {
  background: var(--primary) !important;
}

/* ---------- BRANDS: REMOVE HARD-CODED WHITE FEEL IN DARK MODE ---------- */
.brand-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 24px rgba(3,30,48,.06) !important;
}

body.dark-mode .brand-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

body.dark-mode .brand-card span {
  color: var(--text) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 850px) {
  .header {
    height: 70px !important;
  }

  body {
    padding-top: 70px;
  }

  .header .nav-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .mobile-nav {
    top: 70px !important;
  }

  .logo {
    gap: 8px !important;
    min-width: 0;
  }

  .logo-icon,
  .logo-icon img {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px;
  }

  .logo-text strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  .logo-text span {
    font-size: 7px !important;
    letter-spacing: 1px !important;
  }

  .theme-toggle {
    width: 39px !important;
    height: 39px !important;
  }

  .mobile-menu {
    color: var(--text) !important;
  }

  .trust-bar {
    padding: 14px 0 !important;
  }

  .trust-grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 10px !important;
  }

  .trust-item {
    min-height: 112px !important;
    padding: 13px 11px !important;
    border-radius: 16px !important;
    gap: 9px !important;
  }

  .trust-item > i {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }

  .trust-item strong {
    font-size: 11px !important;
  }

  .trust-item span {
    font-size: 9px !important;
  }

  .trust-details-btn {
    width: auto !important;
    align-self: flex-start !important;
    padding: 6px 10px !important;
  }

  .services {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }

  .section-heading h2 {
    font-size: 24px !important;
  }

  .service-card {
    border-radius: 18px !important;
  }

  .service-image {
    height: 190px !important;
  }

  .why-info-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .why-info-box {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .why-info-content {
    padding: 30px 18px 22px !important;
  }

  .why-info-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
  }

  .why-info-box h2 {
    font-size: 25px !important;
  }

  .why-info-box > .why-info-content > p,
  .why-info-content > p {
    font-size: 13px !important;
  }

  .why-info-img {
    border-radius: 15px !important;
  }

  .why-info-img img {
    height: 205px !important;
  }

  .why-info-message {
    padding: 17px 16px !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }

  .why-info-ok {
    margin: 0 18px 18px !important;
    min-height: 50px;
  }

  .why-info-close {
    top: 14px !important;
    right: 14px !important;
  }

  .work-detail-modal {
    padding: 0 !important;
  }

  .work-detail-box {
    width: 100vw !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .work-detail-header {
    height: 205px !important;
  }

  .work-detail-content {
    padding: 24px 18px 28px !important;
  }

  .work-detail-content h3 {
    font-size: 20px;
  }

  .work-detail-grid {
    gap: 9px !important;
  }
}

@media (max-width: 430px) {
  .logo-icon,
  .logo-icon img {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px;
  }

  .logo-text strong {
    font-size: 14px !important;
  }

  .logo-text span {
    font-size: 6.5px !important;
  }

  .theme-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  .mobile-menu {
    width: 38px !important;
    height: 38px !important;
    font-size: 22px !important;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-item {
    min-height: 118px !important;
  }
}














/* =========================================================
   FOG'S FINAL THEME BUTTON + THEME RELIABILITY OVERRIDES
   Visual/UI only. Existing JS behavior is preserved.
========================================================= */

/* The theme control stays locked to the viewport. */
body > .theme-toggle,
.theme-toggle#themeToggle {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  z-index: 12000 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

/* Make the light/dark variables apply consistently to the public page. */
html:not(.dark) body.light-mode {
  --primary: #087fe5;
  --bg: #ffffff;
  --section-alt: #f4f8fb;
  --card: #ffffff;
  --header-bg: rgba(255,255,255,.97);
  --footer-bg: #032238;
  --text: #10283d;
  --muted: #687988;
  --border: #e3ebf1;
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.dark body.dark-mode {
  --primary: #19a8ff;
  --bg: #07141f;
  --section-alt: #0a1b29;
  --card: #0d2232;
  --header-bg: rgba(6,19,30,.97);
  --footer-bg: #030d15;
  --text: #f1f7fb;
  --muted: #9db0bd;
  --border: #1d3547;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Main public sections follow the selected theme. */
html:not(.dark) body.light-mode .services,
html:not(.dark) body.light-mode .about,
html:not(.dark) body.light-mode .gallery,
html:not(.dark) body.light-mode .testimonials,
html:not(.dark) body.light-mode .contact {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html:not(.dark) body.light-mode .section-alt,
html:not(.dark) body.light-mode .brands,
html:not(.dark) body.light-mode #brands {
  background: var(--section-alt) !important;
  color: var(--text) !important;
}

html.dark body.dark-mode .services,
html.dark body.dark-mode .about,
html.dark body.dark-mode .gallery,
html.dark body.dark-mode .testimonials,
html.dark body.dark-mode .contact {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.dark body.dark-mode .section-alt,
html.dark body.dark-mode .brands,
html.dark body.dark-mode #brands {
  background: var(--section-alt) !important;
  color: var(--text) !important;
}

/* Keep text readable when theme changes. */
html.dark body.dark-mode h2,
html.dark body.dark-mode h3,
html.dark body.dark-mode p,
html.dark body.dark-mode .section-title,
html.dark body.dark-mode .section-heading {
  color: inherit;
}

/* Small screens: keep the control clear of browser edges. */
@media (max-width: 600px) {
  body > .theme-toggle,
  .theme-toggle#themeToggle {
    right: 12px !important;
    bottom: 12px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}



























/* =========================================================
   FOGS CONTACT CHANNEL CHOOSER
   Used after service forms and product inquiries.
========================================================= */
.fogs-channel-overlay{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,14,25,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.fogs-channel-overlay.show{opacity:1;visibility:visible}
.fogs-channel-card{
  width:min(100%,520px);
  max-height:min(90vh,720px);
  overflow:auto;
  background:var(--card,#fff);
  color:var(--text,#10283d);
  border:1px solid var(--border,#dce9f1);
  border-radius:24px;
  padding:26px;
  box-shadow:0 28px 90px rgba(0,0,0,.32);
  transform:translateY(16px) scale(.97);
  transition:transform .25s ease;
}
.fogs-channel-overlay.show .fogs-channel-card{transform:translateY(0) scale(1)}
.fogs-channel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}
.fogs-channel-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--primary,#087fe5);margin-bottom:5px}
.fogs-channel-head h2{margin:0;color:var(--text,#10283d);font-size:21px;line-height:1.25}
.fogs-channel-close{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border,#dce9f1);border-radius:50%;background:var(--section-alt,#f4f8fb);color:var(--text,#10283d);cursor:pointer}
.fogs-channel-message{padding:14px;border:1px solid var(--border,#dce9f1);border-radius:15px;background:var(--section-alt,#f4f8fb);font-size:11px;line-height:1.65;color:var(--muted,#687988);white-space:pre-wrap;word-break:break-word;margin-bottom:16px}
.fogs-channel-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fogs-channel-option{min-height:72px;border:1px solid var(--border,#dce9f1);border-radius:15px;background:var(--card,#fff);color:var(--text,#10283d);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:800;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.fogs-channel-option:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,35,55,.10)}
.fogs-channel-option i{font-size:23px}
.fogs-channel-option.messenger i{color:#0084ff}
.fogs-channel-option.viber i{color:#7360f2}
.fogs-channel-option.whatsapp i{color:#25d366}
.fogs-channel-note{margin:14px 0 0;text-align:center;font-size:10px;color:var(--muted,#687988);line-height:1.5}
body.dark-mode .fogs-channel-card{box-shadow:0 28px 90px rgba(0,0,0,.55)}
@media(max-width:560px){
  .fogs-channel-card{padding:20px;border-radius:20px}
  .fogs-channel-options{grid-template-columns:1fr}
  .fogs-channel-option{min-height:54px;flex-direction:row;justify-content:flex-start;padding:0 16px}
  .fogs-channel-option i{width:30px;text-align:center}
}