/*==============================
  Variables: Base Color Palette
==============================*/
:root {
  --base-color: #504a4e;
  --secondary-color: #c6c09c;
  --tertiary-color: #db7705;
  --alternate-color: #80a1c1;
  --dark-gray: #181a19;
  --medium-gray: #797471;
}
/*==============================
  Navbar + Brand Styles
==============================*/
header .navbar-brand img {
  max-height: 80px;
}
a.navbar-brand img {
  max-width: 150%;
}
@media only screen and (max-width: 767px) {
  a.navbar-brand img {
    max-width: 80%;
  }
}
header.sticky .navbar-brand {
  padding: 5px 0;
}
.navbar .navbar-nav .nav-link {
  color: var(--dark-gray) !important;
}
/*==============================
  Button Styles
==============================*/
.btn.btn-al-blue {
  background-color: var(--alternate-color);
  color: var(--white);
}
.btn.btn-al-blue:hover {
  background-color: var(--tertiary-color);
}
.btn.btn-al-orange {
  background-color: var(--tertiary-color);
  color: var(--white);
}
.btn.btn-al-orange:hover {
  background-color: var(--alternate-color);
}
.btn.btn-al-blue-alt {
  background-color: var(--alternate-color);
  color: var(--white);
}
.btn.btn-al-blue-alt:hover {
  background-color: var(--white);
  color: var(--alternate);
}
.btn.btn-al-orange-alt {
  background-color: var(--tertiary-color);
  color: var(--white);
}
.btn.btn-al-orange-alt:hover {
  background-color: var(--white);
  color: var(--alternate);
}
.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:active,
.btn.btn-transparent-light-gray:hover,
.btn.btn-transparent-light-gray:active,
.btn.btn-box-shadow.btn-base-color:hover,
.btn.btn-box-shadow.btn-base-color:active {
  background-color: var(--alternate-color);
  border-color: var(--alternate-color);
  color: var(--white);
}
/*==============================
  Text Utilities
==============================*/
.text-al-blue,
.text-alt-blue {
  color: var(--alternate-color);
}
.text-al-orange {
  color: var(--tertiary-color);
}
a.text-al-blue:hover {
  color: var(--secondary-color);
}
a.text-al-orange:hover {
  color: var(--secondary-color);
}
/*==============================
  Background Utilities
==============================*/
.bg-al-blue {
  background-color: var(--alternate-color);
}
.bg-al-orange {
  background-color: var(--tertiary-color);
}
/*==============================
  Hover Effects
==============================*/
.hover-box.dark-hover:hover i {
  color: var(--alternate-color) !important;
  -webkit-text-stroke-color: var(--white);
}
.hover-box.dark-hover:hover span:not(.btn-double-text) {
  color: var(--tertiary-color) !important;
  -webkit-text-stroke-color: var(--white);
}
/*==============================
  Overlay Layers
==============================*/
.transparent-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(210, 210, 210, 0.3); /* 70% transparency */
  z-index: 2; /* Covers background, under content */
}
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(219, 119, 5, 0.4); /* Adjust opacity/color */
  z-index: 1; /* Behind content, above background */
  pointer-events: none;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--alternate-color);
  opacity: 0.6; /* Adjust if needed */
  z-index: 1; /* Sits behind number but above background image */
  pointer-events: none;
}
.cover-background span {
  position: relative;
  z-index: 2;
}
/*==============================
  Section Positioning Layer
==============================*/
section.position-relative > .container,
section.position-relative > .bg-base-color,
section.position-relative figure,
section.position-relative .col-xxl-5 {
  position: relative;
  z-index: 2;
}
/*==============================
  About Us Grid
==============================*/
.bg-sliding-line {
  background-image: linear-gradient(
    135deg,
    transparent 45%,
    #d1b9b2 45%,
    #d1b9b2 55%,
    transparent 0
  );
  background-size: 5px 5px;
}
/*==============================
  Sidebar
==============================*/
.sidebar {
  position: sticky;
  top: 80px;
  /* Adjust this value as needed to avoid overlap with the sticky menu */
  align-self: start;
}
/*==============================
  Contact Page Form
==============================*/
.contact-form-style-03 {
  margin-top: -100px;
}
@media (max-width: 991px) {
  .contact-form-style-03 {
    margin-top: 0;
  }
}
/*==============================
  Calendar
==============================*/
.calendar-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Default ratio (4:3) */
  height: 0;
  overflow: hidden;
}
.calendar-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Optional: Force a taller calendar height on mobile */
@media (max-width: 767px) {
  .calendar-responsive {
    padding-bottom: 120%; /* Makes iframe taller on small screens */
  }
}
/*==============================
  Logo Rotation
==============================*/
@media (max-width: 768px) {
  .animation-rotation {
    animation: none !important;
    /* Or remove transform, transition, etc., as needed */
  }
}
/*==============================
  Dybugger
==============================*/
/* Outline all elements with a colored border */
/* * {
  outline: 1px solid rgba(255, 0, 0, 0.2); 
  background-color: rgba(
    0,
    255,
    0,
    0.05
  );
}
body * {
  margin: 1px !important;
  padding: 1px !important;
}
* {
  box-sizing: border-box !important;
} */