/* ==========================================================================
   BOOSTARO GLOBAL VARIABLES & TYPOGRAPHY
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap'); /*[cite: 2] */

:root {
  --main-color: #9e1d3a;      /* Primary Product Color */
  --main-light: #fdf2f4;      /* Soft Complementary Background */
  --accent-color: #ffcc00;    /* High-Converting Yellow[cite: 2] */
  --accent-hover: #e6b800;    /* Darker Yellow for Hover[cite: 2] */
  --success-color: #28a745;   /* Green for Best Value/Checkmarks[cite: 2] */
  --text-dark: #222222;       /* Primary Text[cite: 2] */
  --text-muted: #555555;      /* Secondary Text[cite: 2] */
  --light-bg: #f8f9fa;        /* Light Gray Background[cite: 2] */
}

body {
  font-family: 'Jost', sans-serif; /*[cite: 2] */
  font-weight: 400; /*[cite: 2] */
  color: var(--text-dark); /*[cite: 2] */
  background-color: #ffffff; /*[cite: 2] */
  overflow-x: hidden; /*[cite: 2] */
  scroll-behavior: smooth; /*[cite: 2] */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; /*[cite: 2] */
  letter-spacing: 0.5px; /*[cite: 2] */
}

/* ==========================================================================
   BOOTSTRAP COLOR OVERRIDES
   ========================================================================== */
.text-primary { color: var(--main-color) !important; } /*[cite: 2] */
.bg-primary { background-color: var(--main-color) !important; } /*[cite: 2] */
.border-primary { border-color: var(--main-color) !important; } /*[cite: 2] */

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.header {
  transition: all 0.3s ease-in-out; /*[cite: 2] */
  border-bottom: 1px solid #eeeeee; /*[cite: 2] */
}

.nav-links a {
  position: relative; /*[cite: 2] */
  transition: color 0.3s ease; /*[cite: 2] */
}

.nav-links a:hover {
  color: var(--main-color) !important; /*[cite: 2] */
}

.nav-links a::after {
  content: ''; /*[cite: 2] */
  position: absolute; /*[cite: 2] */
  width: 0; /*[cite: 2] */
  height: 2px; /*[cite: 2] */
  bottom: -5px; /*[cite: 2] */
  left: 0; /*[cite: 2] */
  background-color: var(--main-color); /*[cite: 2] */
  transition: width 0.3s ease; /*[cite: 2] */
}

.nav-links a:hover::after {
  width: 100%; /*[cite: 2] */
}

/* ==========================================================================
   BUTTONS & HOVER EFFECTS
   ========================================================================== */
.btn-warning {
  background-color: var(--accent-color); /*[cite: 2] */
  border-color: var(--accent-color); /*[cite: 2] */
  color: #000; /*[cite: 2] */
  transition: all 0.3s ease; /*[cite: 2] */
}

.btn-warning:hover {
  background-color: var(--accent-hover); /*[cite: 2] */
  border-color: var(--accent-hover); /*[cite: 2] */
  transform: translateY(-2px); /*[cite: 2] */
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.4) !important; /*[cite: 2] */
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /*[cite: 2] */
}

.hover-lift:hover {
  transform: translateY(-8px); /*[cite: 2] */
  box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; /*[cite: 2] */
}

.hover-primary {
  transition: color 0.2s ease; /*[cite: 2] */
}

.hover-primary:hover {
  color: var(--main-color) !important; /*[cite: 2] */
}

/* Pulse Animation for CTA Buttons */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(158, 29, 58, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(158, 29, 58, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(158, 29, 58, 0); }
}

/* ==========================================================================
   CUSTOM COMPONENT STYLES
   ========================================================================== */
.drop-shadow {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); /*[cite: 2] */
}

.accordion-button:not(.collapsed) {
  background-color: var(--main-light); /*[cite: 2] */
  color: var(--main-color) !important; /*[cite: 2] */
  box-shadow: none; /*[cite: 2] */
}

.accordion-button:focus {
  box-shadow: none; /*[cite: 2] */
  border-color: rgba(0,0,0,0.125); /*[cite: 2] */
}

/* Specific Border Overrides for Boostaro Styling */
.border-4 {
  border-width: 4px !important;
}

/* ==========================================================================
   MOBILE SIDEBAR (OFFCANVAS)
   ========================================================================== */
.mobile-sidebar {
  position: fixed; /*[cite: 2] */
  top: 0; /*[cite: 2] */
  right: -100%; /*[cite: 2] */
  width: 85%; /*[cite: 2] */
  max-width: 320px; /*[cite: 2] */
  height: 100vh; /*[cite: 2] */
  background-color: var(--main-color); /*[cite: 2] */
  padding: 30px 20px; /*[cite: 2] */
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); /*[cite: 2] */
  z-index: 1050; /*[cite: 2] */
  overflow-y: auto; /*[cite: 2] */
  box-shadow: -5px 0 20px rgba(0,0,0,0.2); /*[cite: 2] */
}

.mobile-sidebar.open {
  right: 0; /*[cite: 2] */
}

.sidebar-overlay {
  position: fixed; /*[cite: 2] */
  inset: 0; /*[cite: 2] */
  background: rgba(0, 0, 0, 0.6); /*[cite: 2] */
  backdrop-filter: blur(3px); /*[cite: 2] */
  opacity: 0; /*[cite: 2] */
  visibility: hidden; /*[cite: 2] */
  transition: all 0.3s ease; /*[cite: 2] */
  z-index: 1040; /*[cite: 2] */
}

.sidebar-overlay.show {
  opacity: 1; /*[cite: 2] */
  visibility: visible; /*[cite: 2] */
}

.close-btn {
  background: none; /*[cite: 2] */
  border: none; /*[cite: 2] */
  color: #ffffff; /*[cite: 2] */
  font-size: 40px; /*[cite: 2] */
  position: absolute; /*[cite: 2] */
  top: 15px; /*[cite: 2] */
  right: 20px; /*[cite: 2] */
  cursor: pointer; /*[cite: 2] */
  line-height: 1; /*[cite: 2] */
  transition: transform 0.3s ease; /*[cite: 2] */
}

.close-btn:hover {
  transform: rotate(90deg); /*[cite: 2] */
}

.sidebar-nav a {
  transition: padding-left 0.3s ease, color 0.3s ease; /*[cite: 2] */
}

.sidebar-nav a:hover {
  padding-left: 10px; /*[cite: 2] */
  color: var(--accent-color) !important; /*[cite: 2] */
}

/* ==========================================================================
   RESPONSIVE TWEAKS (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 991px) {
  .shadow-lg.border-success {
    transform: scale(1) !important; /*[cite: 2] */
    border-width: 3px !important; /*[cite: 2] */
  }
  
  .shadow-lg.border-success:hover {
    transform: translateY(-10px) !important; /*[cite: 2] */
  }
  
  .display-5 { font-size: 2.5rem; } /*[cite: 2] */
  .display-6 { font-size: 2rem; } /*[cite: 2] */
}

@media (max-width: 768px) {
  .hero-section {
    text-align: center; /*[cite: 2] */
  }
  
  .hero-section ul li {
    text-align: left; /*[cite: 2] */
  }

  .img-fluid {
    max-width: 100%; /*[cite: 2] */
    height: auto; /*[cite: 2] */
  }
  
  .bg-primary h2, .guarantee-section h2 {
    text-align: center !important; /*[cite: 2] */
    font-size: 28px !important; /*[cite: 2] */
  }
  
  .bg-primary p, .guarantee-section p {
    text-align: justify; /*[cite: 2] */
  }
}