/* ===========================
   Brand Color Variables
=========================== */
:root {
  --color-primary: #cc5a18;   /* Primary Blue */
  --color-light-gray: #ff701e; /* Light Gray */
  --color-success: #34A853;   /* Success Green */
  --color-error: #EA4335;     /* Error Red */
  --color-accent: #FBBC04;    /* Accent Yellow */
  --color-dark: #231F20;      /* Dark Gray / Black */
}

/* ===========================
   General Styles
=========================== */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ===========================
   Navbar Container
   =========================== */
.navbar {
  background-color: var(--color-light-gray);
  border-bottom: 2px solid silver;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Use this for a dark header:
.navbar {
  background-color: var(--color-dark);
  border-bottom: none;
}
*/

/* ===========================
   Navbar Logo
=========================== */
.navbar-light .navbar-brand img {
  max-height: 70px;
}

/* ===========================
   Nav Links
=========================== */
.navbar-nav .nav-link {
  font-size: 1.1rem;
  font-weight: bold;
  color: black !important;
  transition: color 0.3s ease;
}

/* Dark header version:
.navbar-nav .nav-link {
  color: white !important;
}
*/

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* Dark header hover example:
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-accent) !important;
}
*/

/* ===========================
   Dropdown Menu
=========================== */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: white;
}

.dropdown-menu .dropdown-item {
  color: black;
  padding: 10px 20px;
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: silver;
  color: var(--color-primary);
}

/* ===========================
   Navbar Toggler (Mobile)
=========================== */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  color: var(--color-primary);
}

/* ===========================
   CTA Button (Enquire Now)
=========================== */
.enquire-now-container {
  margin-left: 15px;
}

.btn-site-green {
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.btn-site-green:hover {
  background: #3367d6; /* Slightly darker shade */
  border: 1px solid #3367d6;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Optional general link hover - not needed if you have .nav-link */
nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* If you have a different CTA, like a round button, customize:
.btn-cta:hover {
  background-color: #3367d6; 
}
*/

/* Loader Wrapper */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; /* or your brand background color */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Loader Wrapper */
#loader-wrapper {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; /* or your brand background */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the logo spin */
#loader img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: spin 2s linear infinite; /* spin effect */
}

/* Keyframes for spin */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}