/* ---------- Fonts ---------- */
/* General body text */
@font-face{
  font-family: 'applefont';
  src: url(../asserts/fonts/SF-Pro-Text-Regular.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

body, p, span, a, li, button, input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

/* Paragraphs or content sections with a serif look */
.serif-text {
  font-family: "Noto Serif", serif;
}

/* For classic serif styles */
.pt-serif {
  font-family: "PT Serif", serif;
}

/* For condensed and bold titles */
.condensed {
  font-family: "Roboto Condensed", sans-serif;
}


/* ---------- NAVBAR ---------- */
.custom-navbar {
  background: transparent;
  transition: background-color 0.8s ease;
  z-index: 1000;
}
.custom-navbar.scrolled {
  background-color: #000;
}

/* Main navbar container */
.navbar {
  z-index: 1000;
  height: 68px;
  padding: 0 20px;
  display: flex;
  align-items: center;
}


@media (min-width: 992px) and (max-width: 1399px) {

  #mainNav{
    margin: 0px;
  }
  .navbar-nav li a{
   font-size: 16px;
  }
  
} 
/* Brand (logo + text). Use gap:0 to remove space */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0;       /* no gap between logo and text */
  margin: 0;
}

/* Logo: single canonical definition (no padding-left!) */
.navbar-brand .logo {
  display: block;
  width: 75px;
  height: 75px;
  margin: 0;
  padding: 0;
  line-height: 0;
  background-image: url("../asserts/AgapeLogo1.webp"); /* verify assets path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Brand text — ensure your HTML uses <h5> (as in your snippet) */
.navbar-brand h5 {
  margin: 0;
  padding-left: 8px; /* optional small spacing; set to 0 if you want absolutely no gap */
  font-size: 28px;
  color: #fff; /* override or keep as needed */
}

/* If you use special highlight spans */
.logo-highlight {
  color: rgb(241, 118, 73);
}

/* Nav links & spacing */
.navbar-nav .nav-item {
  margin: 0 12px;
}
.nav-link {
  color: #cad2c5 !important;
  font-size: 18px;
  transition: 0.4s;
}
.nav-link:hover {
  color: #f9cf26 !important;
}

/* Call & WhatsApp buttons: target the actual buttons in markup */
.d-flex.gap-3 > a.btn {
  background-color: #d8b31f;
  border-radius: 8px;
  color: black;
  font-size: 16px;
  transition: 0.4s;
}
.d-flex.gap-3 > a.btn:hover {
  background-color: #f9cf26;
}



/* ---------- RESPONSIVE ---------- */
@media (max-width: 576px) {
  .navbar {
    height: auto;
    padding: 8px;
  }
  .navbar-brand .logo {
    width: 60px;
    height: 60px;
  }
  .navbar-brand h5 {
    font-size: 18px;
    padding-left: 6px; /* keep small spacing for tiny screens */
  }
}

@media (max-width: 992px) {
  .navbar {
    height: 75px;
    padding: 10px;
  }
  .navbar-nav .nav-item {
    margin: 0 8px;
  }
}


@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #4e4747; /* solid black background */
    padding: 10px 0;
  }

  .navbar-nav .nav-link {
    color: #fff !important;
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Hover and focus effect */
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background-color: #222;
    color: #ffcc00 !important; /* yellow on hover */
    border-radius: 5px;
  }

  /* Active link (current page) style */
  .navbar-nav .nav-link.active {
    background-color: transparent !important;
    color: #fff !important; /* white like others */
  }

  .dropdown-menu {
    background-color: #000 !important;
  }
  .chat {
    display: none !important;
  }
}
@media (max-width: 991px) {
  .chat {
    display: none !important;
  }
}

/* Floating Buttons for Mobile */
.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.floating-buttons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.floating-buttons a:hover {
  transform: scale(1.1);
}

.call-btn {
  background-color: #cfc0af; /* Call */
}

.whatsapp-btn {
  background-color: #25d366; /* WhatsApp */
}

/* ---------- FOOTER (consolidated) ---------- */
.footer {
  background-color: #312f2d;
  color: white;
}

.footer-card a,
.foot a {
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
  color: white;
  transition: color 0.3s;
  font-size: 17px;
}

.footer-card a:hover,
.foot a:hover,
.footer-card p:hover,
.foot p:hover,
.footer1 p:hover {
  color: #f9cf26;
  cursor: pointer;
}

.footer-card h1,
.footer1 h4 {
  font-size: 24px;
  margin-bottom: 15px;
  transition: color 0.3s;
  color: #f27649;
}

.footer-card h1:hover,
.footer1 h4:hover {
  color: skyblue;
}

.foot h5 {
  color: #f27649;
  font-size: 24px;
}
.foot h5:hover {
  color: #ff6600;
}

.reserv {
  font-size: 16.5px;
}
.policy li a{
 color: #d0ffd2cc !important
}
p{
  font-size: 16 px;
} 
/*
============================================================
   MOBILE SLIDE MENU
   With Blurred Background Image + Dim Overlay
   ============================================================ */
#mobileMenu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100vh;
  overflow: hidden; /* Important: prevents blur overflow */
  z-index: 9999;
  transition: left 0.3s ease;
}

/* MENU VISIBLE */
#mobileMenu.show {
  left: 0;
}

/* BACKGROUND IMAGE HOLDER (BLURRED) */
#mobileMenu .menu-bg {
  position: absolute;
  inset: 0;
  background: url('mobile-image.jpg') center/cover no-repeat;
  filter: blur(2px);         /* <--- TRUE BLUR */
  transform: scale(1.1);      /* avoids edges showing */
  z-index: 1;
}

/* DIM LAYER OVER IMAGE */
#mobileMenu .menu-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* dark overlay */
  z-index: 2;
}

/* MENU CONTENT (SHARP TEXT) */
#mobileMenu .menu-content {
  position: relative;
  z-index: 3;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* LINKS */
#mobileMenu .menu-content .m-link {
  color: #ffffff;
  padding: 15px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-size: 18px !important;
}


/* ============================================================
   OVERLAY (BEHIND MENU)
   ============================================================ */
#navOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(6px); /* blur page behind */
  background: rgba(0, 0, 0, 0.612);
  z-index: 9998;
}

#navOverlay.active {
  display: block;
}


/* ============================================================
   RESPONSIVE BACKGROUND SWITCHING
   ============================================================ */

/* MOBILE IMAGE (VERTICAL) */
@media (max-width: 768px) {
  #mobileMenu .menu-bg {
    background: url('../asserts/modern1.webp') center/cover no-repeat;
  }
}

@media (min-width: 500px) and (max-width: 649px) {
    #mobileMenu {
  position: fixed;
  top: 0;
  left: -340px;
  width: 340px;
}
}
@media (min-width: 650px) and (max-width: 768px) {
    #mobileMenu {
  position: fixed;
  top: 0;
  left: -340px;
  width: 340px;
}
}
/* TABLET IMAGE (HORIZONTAL) */
@media (min-width: 769px) and (max-width: 1024px) {
    #mobileMenu {
  position: fixed;
  top: 0;
  left: -460px;
  width: 460px;
}

  #mobileMenu .menu-bg {
    background: url('modern.jpg') center/cover no-repeat;
  }
}

#mobileMenu .menu-content .m-link {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

/* Delays for each menu item */
#mobileMenu.show .m-link:nth-child(1) { transition-delay: 0.15s; }
#mobileMenu.show .m-link:nth-child(2) { transition-delay: 0.24s; }
#mobileMenu.show .m-link:nth-child(3) { transition-delay: 0.31s; }
#mobileMenu.show .m-link:nth-child(4) { transition-delay: 0.40s; }
#mobileMenu.show .m-link:nth-child(5) { transition-delay: 0.49s; }
#mobileMenu.show .m-link:nth-child(6) { transition-delay: 0.58s; }

/* When menu is opened */
#mobileMenu.show .menu-content .m-link {
  opacity: 1;
  transform: translateX(0);
}