/* =========================================================
   Santique Design — Theme Overrides
   Keep this AFTER css/style.css in your HTML.
   ========================================================= */

/* -------------------------------
   1) Color System (CSS Variables)
   ------------------------------- */
:root{
  --sd-bg:            #D5D6D7;    /* Background */
  --sd-text:          #6E6E6E;    /* Body text */
  --sd-heading:       #4D4D4D;    /* Headings */
  --sd-link:          #8268B6;    /* Link Highlight */
  --sd-link-hover:    #6f58a0;    /* Slightly darker than link */
  --sd-accent1:       #664E33;    /* Accent 1 */
  --sd-accent2:       #2E93E9;    /* Accent 2 */
  --sd-white:         #FFFFFF;
  --sd-black:         #000000;

  /* Navbar gradient @ 75% opacity */
  --sd-navbar-top:    rgba(213,214,215,0.75); /* D5D6D7 */
  --sd-navbar-bot:    rgba(255,255,255,0.75); /* FFFFFF */
}

/* -------------------------------
   2) Typography & Links
   ------------------------------- */
body{ color: var(--sd-text); }
h1, h2, h3, h4, h5, h6{ color: var(--sd-heading); }

a{
  color: var(--sd-link);
  text-decoration: none;
}
a:hover, a:focus{
  color: var(--sd-link-hover);
  text-decoration: underline;
}

hr{ border-top-color: rgba(0,0,0,0.08); }

/* -------------------------------
   3) Buttons
   ------------------------------- */
.btn-primary{
  background-color: var(--sd-link);
  border-color: var(--sd-link);
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--sd-link-hover);
  border-color: var(--sd-link-hover);
}

/* -------------------------------
   4) Navbar Gradient (75% opacity)
   ------------------------------- */
#ftco-navbar,
#ftco-navbar.ftco-navbar-light,
.navbar.ftco-navbar-light,
.navbar.scrolled,
.navbar.scrolled.awake,
.navbar.scrolled.sleep{
  background: linear-gradient(to bottom, var(--sd-navbar-top) 0%, var(--sd-navbar-bot) 100%) !important;
  box-shadow: none;
  border-color: transparent;
  backdrop-filter: saturate(120%) blur(4px);
}

/* Neutralize forced .bg-dark */
#ftco-navbar.bg-dark{
  background: linear-gradient(to bottom, var(--sd-navbar-top), var(--sd-navbar-bot)) !important;
}

/* Nav link readability on light gradient */
#ftco-navbar .navbar-nav > .nav-item > .nav-link{ color: var(--sd-heading); }
#ftco-navbar .navbar-nav > .nav-item > .nav-link:hover,
#ftco-navbar .navbar-nav > .nav-item.active > .nav-link{ color: var(--sd-link); }

/* When scrolled: slightly more opaque + stronger blur + shadow */
.navbar.scrolled,
.navbar.scrolled.awake,
.navbar.scrolled.sleep{
  background: linear-gradient(
    to bottom,
    rgba(213,214,215,0.92) 0%,
    rgba(255,255,255,0.92) 100%
  ) !important;
  backdrop-filter: saturate(130%) blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Darker links when scrolled for contrast */
.navbar.scrolled .navbar-nav > .nav-item > .nav-link{ color: #3d3d3d; }
.navbar.scrolled .navbar-nav > .nav-item > .nav-link:hover,
.navbar.scrolled .navbar-nav > .nav-item.active > .nav-link{ color: var(--sd-link); }

/* -------------------------------
   5) Instagram Responsive Grid
   ------------------------------- */

.insta-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
}

.insta-grid .insta-item {
  position: relative;
  display: block;
  width: calc(25% - 16px);          /* 4 per row on desktop */
  flex: 0 0 calc(25% - 16px);       /* prevent flex fudging width in Chrome */
  min-width: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.15s ease;
  aspect-ratio: 3 / 4;              /* modern browsers */
}

/* Fallback for Chrome quirks / older browsers */
.insta-grid .insta-item::before {
  content: "";
  display: block;
  padding-top: 133.333%;            /* 4:3 portrait (height = width * 4/3) */
}

/* Nice hover */
.insta-grid .insta-item:hover { transform: translateY(-1px); }

/* Responsive breakpoints */
@media (max-width: 991.98px) {
  .insta-grid .insta-item { width: calc(33.333% - 16px); flex-basis: calc(33.333% - 16px); }
}
@media (max-width: 767.98px) {
  .insta-grid .insta-item { width: calc(50% - 16px); flex-basis: calc(50% - 16px); }
}
@media (max-width: 480px) {
  .insta-grid .insta-item { width: 100%; flex-basis: 100%; }
}

/* -------------------------------
   6) Services — Icon Box + Inline SVG
   ------------------------------- */
.icon-box{
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin: 0 auto 16px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  color: #4D4D4D; /* default icon color via currentColor */
}

.service-svg{
  width: 40px; height: 40px;
  fill: currentColor;
  display: block;
}

.services{ text-align: center; }
.services .text{ text-align: center; }
.services .text h3{ margin-bottom: .35rem; }

.services:hover .icon-box{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  color: var(--sd-link);
}

/* Responsive icon sizing */
@media (max-width: 575.98px){
  .icon-box{ width:72px; height:72px; }
  .service-svg{ width:36px; height:36px; }
}
@media (min-width: 1200px){
  .icon-box{ width:96px; height:96px; }
  .service-svg{ width:48px; height:48px; }
}

/* -------------------------------
   7) Contact / Info harmony
   ------------------------------- */
.contact-section .info.bg-light{ color: var(--sd-text); }
.contact-section .info a{ color: var(--sd-link); }
.contact-section .info a:hover{ color: var(--sd-link-hover); }

.contact-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 2rem;
}
.contact-box .form-control{
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}
.contact-box .btn{ min-width: 160px; }

/* -------------------------------
   8) Utilities
   ------------------------------- */
.section-light{ background-color: var(--sd-white); color: var(--sd-text); }
.section-tint{  background-color: var(--sd-bg); }
.text-accent1{ color: var(--sd-accent1); }
.text-accent2{ color: var(--sd-accent2); }
.bg-accent1{  background-color: var(--sd-accent1); }
.bg-accent2{  background-color: var(--sd-accent2); }

.do-list .ion-ios-checkmark-circle {
  color: #8268B6 !important;
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 8px;
}

/* -------------------------------
   HERO — video background (original working setup)
   ------------------------------- */
.hero-wrap {
  position: relative;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-wrap .overlay,
.hero-wrap .container {
  position: relative;
  z-index: 1;
}

.hero-wrap > .container,
.hero-wrap > .container > .row,
.hero-wrap .slider-text {
  height: 100%;
}

/* -------------------------------
   9) Footer styled like navbar
   ------------------------------- */
.footer-bar {
  background: linear-gradient(
    to bottom,
    var(--sd-navbar-top) 0%,
    var(--sd-navbar-bot) 100%
  );
  border-top: 1px solid rgba(0,0,0,0.05);
  color: var(--sd-heading);
  padding: 20px 0;
}
.footer-bar p {
  margin: 0;
  font-size: 14px;
  color: var(--sd-heading);
}

/* -------------------------------
   10) Contact form button in purple
   ------------------------------- */
#contactForm .btn-primary {
  background-color: #8268B6;
  border-color: #8268B6;
}
#contactForm .btn-primary:hover,
#contactForm .btn-primary:focus {
  background-color: #6f58a0;
  border-color: #6f58a0;
}

/* -------------------------------
   11) Blurred overlay boxes
   ------------------------------- */
.why-stage-box {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.do-list li {
  font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.6;
}

.text-overlay-box {
  background: rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 24px;
  border-radius: 0;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}

.logo {
  height: 50px;
  width: auto;
}

/* ABOUT US background */
#about {
  background-image: url('images/intro.jpg');
  background-size: cover;         /* fills the section */
  background-repeat: no-repeat;
  background-position: left center; /* hard-locks to left, crops right */
}

/* Force MENU (navbar-toggler) to grey in all states */
#ftco-navbar .navbar-toggler,
.ftco-navbar-light .navbar-toggler,
.ftco-navbar-light.scrolled .navbar-toggler,
.navbar-dark .navbar-toggler,
.navbar.scrolled .navbar-toggler {
  color: #6E6E6E !important;          /* grey */
  border-color: transparent !important;
}

/* Ensure the Open Iconic glyph inherits the same color */
#ftco-navbar .navbar-toggler .oi {
  color: inherit !important;
}

/* Hero logo styling */
.hero-logo {
  all: unset;
  height: 100px;
  width: auto;
  display: block;
  margin-top: 16px;
}