/* ===========================
   Brand Color Variables
=========================== */
:root {
      --color-primary: #4285F4;
      --color-light-gray: #E6E6E6;
      --color-success: #34A853;
      --color-error: #EA4335;
      --color-accent: #FBBC04;
      --color-dark: #231F20;
      --title-font: 'Jost', sans-serif;
      --body-font: 'Roboto', sans-serif;
    }

    body {
      font-family: var(--body-font);
      margin: 0;
      padding: 0;
      font-size: 17px;
      overflow-x: hidden;
      scroll-behavior: smooth !important;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--title-font);
    }

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

/* ===========================
   Navbar Container
=========================== */
.navbar {
  background-color: var(--color-light-gray);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 999;
  border-radius: 80px 0px 0px 0px;
  padding:0px;
  font-family: var(--title-font);
}

/* 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: normal;
  color: #4d5765 !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: none;
}

/* 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: none;
}

/* 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 Animation */
#loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #007bff; /* your brand color */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

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

.gradient-btn {
  background: linear-gradient(135deg, #1062fe, #e65c00);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: none;
}

/* Shine animation overlay */
.gradient-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  z-index: 2;
  animation: shine 2.5s infinite;
}

@keyframes shine {
  100% {
    left: 100%;
  }
}
   .site-logo {
  max-width: 285px;   /* adjust as per design */
  height: auto;       /* keep aspect ratio */
  display: block;
}

/* Tablet screens */
@media (max-width: 992px) {
  .site-logo {
    max-width: 160px;
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  .site-logo {
    max-width: 215px;
    margin: 0 auto;   /* centers logo if inside flex/center block */
  }
  .navbar {
    border-radius: 57px 0px 0px 0px;
}
}