/* =====================================================================
   VISIONARY INSPECTION AND TECHNICAL SERVICES
   Global Site Theme — single source of truth for brand colors,
   typography and shared components. Loaded once, sitewide, from
   header.php. Do not duplicate Bootstrap/FontAwesome links on
   individual pages — they are already loaded globally.
   ===================================================================== */

:root{
  /* ---- Brand palette (keep in sync everywhere) ---- */
  --vi-navy:        #0b132b;   /* primary dark / headings / nav text   */
  --vi-navy-2:      #142450;   /* secondary dark shade for gradients   */
  --vi-blue:        #0072bc;   /* primary brand blue (buttons, links)  */
  --vi-blue-dark:   #00518a;   /* hover / active state of primary blue */
  --vi-accent:      #00aaff;   /* light accent blue (hover highlights) */
  --vi-light-bg:    #f5f7fa;   /* light section background             */
  --vi-white:       #ffffff;
  --vi-text:        #2b2f38;   /* body copy                            */
  --vi-text-muted:  #667085;
  --vi-border:      #e4e8ee;
  --vi-shadow:      0 4px 16px rgba(11, 19, 43, 0.08);
  --vi-radius:      10px;
}

/* ---- Base ---- */
body{
  font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
  color: var(--vi-text);
  background-color: var(--vi-white);
}
h1, h2, h3, h4, h5, h6{
  font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  color: var(--vi-navy);
}
a{ color: var(--vi-blue); text-decoration: none; }
a:hover{ color: var(--vi-blue-dark); }

/* ---- Buttons (overrides Bootstrap defaults sitewide) ---- */
.btn-primary{
  background-color: var(--vi-blue) !important;
  border-color: var(--vi-blue) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--vi-blue-dark) !important;
  border-color: var(--vi-blue-dark) !important;
}
.btn-outline-primary{
  color: var(--vi-blue) !important;
  border-color: var(--vi-blue) !important;
}
.btn-outline-primary:hover{
  background-color: var(--vi-blue) !important;
  color: #fff !important;
}
.text-primary{ color: var(--vi-blue) !important; }
.bg-primary{ background-color: var(--vi-blue) !important; }

/* ---- Navbar ---- */
.navbar{
  background: var(--vi-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.navbar-brand img{ height: 50px; transition: transform .3s ease; }
.navbar-brand img:hover{ transform: scale(1.05); }
.navbar-nav .nav-link{
  color: var(--vi-navy) !important;
  font-weight: 500;
  letter-spacing: .3px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--vi-blue) !important; }
.dropdown-menu{
  background-color: var(--vi-light-bg);
  border: 1px solid var(--vi-border);
  box-shadow: var(--vi-shadow);
}
.dropdown-menu .dropdown-item{ color: var(--vi-navy); }
.dropdown-menu .dropdown-item:hover{ background-color: var(--vi-blue); color: #fff; }
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{ display:block; margin-top:0; }
}

/* ---- Generic section / hero helpers used across inner pages ---- */
.vi-hero{
  background: linear-gradient(135deg, var(--vi-navy) 0%, var(--vi-navy-2) 100%);
  color: #fff;
  padding: 70px 0;
}
.vi-hero h1, .vi-hero h2{ color:#fff; }
.section-light{ background-color: var(--vi-light-bg); }
.section-white{ background-color: var(--vi-white); }

.card, .service-card, .product-card{
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius);
  box-shadow: var(--vi-shadow);
}

/* ---- Legal / static content pages (About, Privacy, Terms, Refund, Pricing) ---- */
.legal-page{ padding: 60px 0 80px; }
.legal-page h1{ margin-bottom: 8px; }
.legal-page .updated{ color: var(--vi-text-muted); margin-bottom: 30px; }
.legal-page h2{ margin-top: 34px; margin-bottom: 12px; font-size: 1.3rem; border-left: 4px solid var(--vi-blue); padding-left: 12px; }
.legal-page p, .legal-page li{ color: var(--vi-text); line-height: 1.75; }
.legal-page table{ width:100%; border-collapse: collapse; margin: 16px 0; }
.legal-page table th, .legal-page table td{ border:1px solid var(--vi-border); padding:10px 12px; text-align:left; }
.legal-page table th{ background: var(--vi-light-bg); color: var(--vi-navy); }

/* ---- Footer ---- */
footer.bg-dark{ background-color: var(--vi-navy) !important; }
.whatsapp-float{
  position: fixed; width: 60px; height: 60px; bottom: 25px; right: 25px;
  background: url('whatsapp.jpeg') no-repeat center center;
  background-size: contain; border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3); z-index: 100;
  transition: all .3s ease;
}
.whatsapp-float:hover{ transform: scale(1.1); }