     /* Base font for the body */
      body {
        /* font-family: 'Inter', sans-serif; */
        font-family: 'Playfair Display', serif;

      }


        /* Hover dropdown for desktop */
    @media (min-width: 992px) {
      .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
      }
    }
      /* Navbar overall styling */
      .navbar {
        height: 70px; /* Fixed height for the navbar */
        padding-top: 0; /* Remove top padding to fit height */
        padding-bottom: 0; /* Remove bottom padding to fit height */
        background-color: #23435c !important; /* Dark blue background */
        display: flex; /* Ensure content aligns centrally */
        align-items: center; /* Center items vertically */
        z-index: 999;
      }

      /* Navbar Brand (Logo) adjustments */
      .navbar-brand img {
        max-height: 50px; /* Slightly reduced logo size for smaller navbar */
        margin-right: 15px; /* Adjust space */
        filter: brightness(0)
          invert(1); /* Optional: Makes dark logos white for contrast */
      }

      /* Navigation Links */
      .navbar-nav .nav-link {
        font-weight: 600; /* Semi-bold weight for a refined look */
        font-size: 0.9rem; /* Further reduced font size for a smaller height */
        letter-spacing: 0.5px; /* Subtle letter spacing */
        color: #fff; /* White text for links */
        transition: color 0.3s ease-in-out; /* Smooth color transition on hover */
        padding-top: 8px; /* Further reduced top padding to decrease height */
        padding-bottom: 8px; /* Further reduced bottom padding to decrease height */
        padding-left: 15px; /* Slightly reduced horizontal spacing */
        padding-right: 15px; /* Slightly reduced horizontal spacing */
      }

      .navbar-nav .nav-link:hover,
      .navbar-nav .nav-link.active {
        color: #ffc107; /* Light yellow/orange on hover and for active link */
      }

      /* Dropdown Toggles (e.g., arrows) */
      .navbar-nav .dropdown-toggle::after {
        display: inline-block;
        width: 0.4em; /* Smaller width for a subtle caret */
        height: 0.4em; /* Smaller height */
        margin-left: 0.4em; /* Space between text and caret */
        vertical-align: 0.15em; /* Adjust arrow position */
        content: '';
        border-right: 0.08em solid; /* Explicit border for the right side */
        border-bottom: 0.08em solid; /* Explicit border for the bottom side */
        border-top: 0; /* No top border */
        border-left: 0; /* No left border */
        color: #fff; /* Explicitly set color to white */
        transform: rotate(45deg); /* Rotate to make it point down */
        transition: transform 0.2s ease-in-out; /* Smooth transition for rotation */
      }

      /* Rotate caret on dropdown open */
      .navbar-nav .dropdown-toggle[aria-expanded='true']::after {
        transform: rotate(-135deg); /* Rotate up when dropdown is open */
      }

      /* Dropdown Menu Items (for desktop dropdowns) */
      .dropdown-menu .dropdown-item {
        font-family: 'Inter', sans-serif; /* Consistent font for dropdowns */
        font-weight: 400; /* Normal weight for readability */
        font-size: 0.9rem; /* Slightly smaller for dropdown items */
        color: #23435c; /* Dark blue text for dropdown items */
        transition: background-color 0.3s ease-in-out,
          color 0.3s ease-in-out; /* Smooth transition on hover */
      }

      .dropdown-menu .dropdown-item:hover {
        background-color: #1f3a5600; /* Light background on hover */
        color: #23435c; /* Dark blue text on hover */
      }

      /* "Get A Free Quote" Button */
      .btn-custom-quote {
        background-color: #23435c; /* Fallback for browsers not supporting gradients */
        background-image: linear-gradient(
          to right,
          #23435c,
          #007bff
        ); /* Dark blue to Standard Bootstrap Blue gradient */
        border: none; /* No border for seamless gradient */
        color: white;
        transition: background-position 0.3s ease-in-out,
          transform 0.2s ease-in-out,
          box-shadow 0.2s ease-in-out; /* Smooth transitions for hover effects */
        padding: 8px 15px; /* Further reduced padding for a smaller button */
   
        display: inline-flex; /* For aligning text and arrow */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        background-size: 200% 100%; /* Wider background for gradient slide effect */
        background-position: left center; /* Start with left side of gradient */
        font-family: 'Playfair Display', serif; /* Font family for the button */
        font-weight: 500; /* Adjusted to medium weight for better readability */
        font-size: 0.95rem; /* Reduced font size for the button */
        letter-spacing: 0.5px; /* Adjusted letter spacing */
      }

      .btn-custom-quote:hover {
        background-position: right center; /* Slide background to right on hover */
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */
      }

      /* Arrow inside the button */
      .btn-custom-quote span.ms-1 {
        transition: transform 0.2s ease-in-out; /* Smooth arrow movement */
      }

      .btn-custom-quote:hover span.ms-1 {
        transform: translateX(3px); /* Move arrow slightly right on hover */
      }

      .navbar .nav-link.dropdown-toggle {
       color: #fff;
       font-weight: 500;
       position: relative;
     }

     .navbar .dropdown-menu {
  background-color: #23435c;
  border: none;
  border-radius: 0 0 10px 10px;
  margin-top: 5px;
  animation: fadeIn 0.3s ease-in-out;
}

/* Dropdown animation */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
  color: #fff;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect */
.dropdown-menu .dropdown-item:hover {
  background-color: #fff;
  color: #23435c;
  font-weight: 500;
}
      /* --- Mobile Specific Styles --- */
      @media (max-width: 991.98px) {
        /* Applies to screens smaller than 'lg' breakpoint (typical for tablets/phones) */

        .navbar-toggler {
          border-color: rgba(255, 255, 255, 0.5); /* White border for toggler */
        }

        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Ensures white hamburger lines */
        }

        .navbar-collapse {
          background-color: #23435c; /* Dark background for collapsed menu */
          padding: 15px; /* Padding inside the expanded menu */
          margin-top: 10px; /* Space between toggler and expanded menu */
          border-radius: 5px; /* Slightly rounded corners for the expanded menu */
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        }

        .navbar-nav .nav-item {
          margin-bottom: 5px; /* Spacing between nav items in mobile view */
        }

        .navbar-nav .nav-link {
          padding-top: 10px; /* More vertical padding for mobile links */
          padding-bottom: 10px;
        }

        .btn-custom-quote {
          width: 100%; /* Make button full width on mobile */
          margin-top: 15px; /* Space above the button */
          margin-left: 0 !important; /* Remove left margin for full width */
        }

        /* Ensure dropdown menus in mobile are readable */
        .navbar-collapse .dropdown-menu {
            background-color: #f8f9fa; /* Light background for dropdown items */
            border: none; /* Remove border */
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Subtle inner shadow */
            margin-top: 5px; /* Space from parent link */
        }

        .navbar-collapse .dropdown-menu .dropdown-item {
            color: #23435c; /* Dark text for dropdown items in mobile menu */
            padding-left: 25px; /* Indent dropdown items */
        }
      }


/* banner contact start */
   
   .custom-contact-wrapper {
    position: absolute;
    top: 40px;
    left: 0;
    right: 10px;
    max-width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    display: flex
;
    justify-content: flex-end;
    align-items: center;
    /* z-index: 0; */
    padding: 20px;
}

    .custom-contact-box {
      background: #fff;
      padding: 30px;
      width: 400px;
      max-width: 100%;
      border-radius: 10px;
      position: relative;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      margin-right: 0;
      margin-bottom: 50px;

    }

    .custom-close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      color: #333;
      cursor: pointer;
    }

    .custom-contact-title {
      margin-bottom: 20px;
      font-size: 22px;
      color: #23435c;
      text-align: center;
    }

    .custom-input {
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      font-size: 16px;
      border-radius: 5px;
    }

    .contact-submit-btn {
      width: 100%;
      background: #23435c;
      color: white;
      border: none;
      padding: 12px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .contact-submit-btn:hover {
      background: #1c354a;
    }

    /* 📱 Mobile View: center & full width */
    @media (max-width: 576px) {
      .custom-contact-wrapper {
        justify-content: center;
        align-items: flex-start;
        padding-top: 40px;
      }

      .custom-contact-box {
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 0;
        padding: 20px;
        margin: 0;
        top: 70px;
      }

      .custom-close-btn {
        top: 15px;
        right: 15px;
        font-size: 26px;
      }

      .custom-contact-title {
        font-size: 20px;
      }
    }

    .contact-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #23435c, #4a79a8);
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.contact-submit-btn:hover {
  background: linear-gradient(135deg, #1d3247, #3b6a99);
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* banner contact end */

/* floating icons start */
        /* floating icons end */
    .floating-btn {
      position: fixed;
      left: -300px; /* for animation */
      color: white;
      border-radius: 0 40px 40px 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      padding: 12px 14px;
      transition: all 0.6s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
      animation: slideIn 1.2s forwards, floatUp 1s ease-in-out 1.2s;
    }

    @keyframes slideIn {
      to {
        left: 0;
      }
    }

    @keyframes floatUp {
      0% {
        transform: translateY(30px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .floating-btn i {
      font-size: 38px;
      margin-right: 12px;
      transition: transform 0.5s ease;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }

    .floating-btn span {
      white-space: nowrap;
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      transition: all 0.4s ease;
      font-weight: bold;
      display: block;
    }

    .floating-btn:hover {
      padding-right: 20px;
    }

    .floating-btn:hover span {
      opacity: 1;
      max-width: 250px;
      margin-left: 5px;
    }

    .floating-btn:hover i {
      transform: rotate(360deg);
    }

    .floating-btn a {
      display: flex;
      align-items: center;
      color: white;
      text-decoration: none;
    }

    /* Gradient buttons */
    .whatsapp-btn {
      top: 63%;
      background: linear-gradient(135deg, #25d366, #128c7e);
      box-shadow: 0 0 12px rgba(37, 211, 102, 0.5);
    }

    .mail-btn {
      top: 75%;
      background: linear-gradient(135deg, #fc466b, #3f5efb);
      box-shadow: 0 0 12px rgba(63, 94, 251, 0.5);
    }

    /* Touch tap effect (mobile support) */
    .floating-btn.active span {
      opacity: 1;
      max-width: 250px;
      margin-left: 5px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .floating-btn {
        padding: 10px 12px;
        max-width: 90%;
      }

      .floating-btn span {
        font-size: 13px;
      }

      .floating-btn i {
        font-size: 30px;
      }

      .floating-btn.active span {
        max-width: 180px;
      }
    }

    @media (max-width: 480px) {
      .floating-btn {
        padding: 20px 10px;
      }

      .floating-btn span {
        font-size: 12px;
      }

      .floating-btn i {
        font-size: 28px;
      }

      .floating-btn.active span {
        max-width: 150px;
      }
    }
    /* floating icons end */



    /* floatingcontact form start */
      /* .custom-modal-dialog {
        max-width: 700px;
    }

    .custom-popup-wrapper {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(15px);
        padding: 20px 25px;
        border-radius: 16px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .custom-close-icon {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 22px;
        cursor: pointer;
        color: #23435c;
        z-index: 1000;
    }

    .custom-popup-form h3 {
        font-size: 24px;
        font-weight: 700;
        color: #23435c;
        margin-bottom: 20px;
        text-align: center;
    }

    .custom-form-group {
        position: relative;
        margin-bottom: 15px;
    }

    .custom-form-group i {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #23435c;
        font-size: 16px;
        z-index: 2;
    }

    .custom-input {
        padding: 10px 12px 10px 40px;
        border-radius: 30px;
        border: 1.5px solid #ccc;
        background-color: rgba(255, 255, 255, 0.4);
        color: #23435c;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .custom-input:focus {
        border-color: #23435c;
        box-shadow: 0 0 12px rgba(35, 67, 92, 0.2);
        background-color: rgba(255, 255, 255, 0.9);
        outline: none;
    }

    .custom-label {
        position: absolute;
        top: 12px;
        left: 45px;
        color: #888;
        font-size: 14px;
        pointer-events: none;
        transition: 0.2s ease all;
    }

    .custom-input:focus+.custom-label,
    .custom-input:not(:placeholder-shown):valid+.custom-label {
        top: -8px;
        left: 38px;
        font-size: 12px;
        color: #23435c;
        background-color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

    .custom-submit-btn {
        width: 100%;
        padding: 10px;
        font-weight: 600;
        border: none;
        border-radius: 30px;
        background: linear-gradient(135deg, #23435c, #4a79a8);
        color: white;
        transition: all 0.3s ease-in-out;
    }

    .custom-submit-btn:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 25px rgba(35, 67, 92, 0.3);
    }

    .custom-floating-img img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        border-radius: 15px;
        animation: float 6s ease-in-out infinite;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 768px) {
        .custom-modal-dialog {
            max-width: 92%;
        }

        .custom-floating-img img {
            height: 200px;
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    } */
    /* floatingcontact form start */
