/* static/css/site.css */

/* --- Color palette --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Cairo:wght@400;600&family=Playfair+Display:wght@500;700&display=swap");


/* ---------- PRIMARY COLORS ---------- */
:root {
  --navy-blue: #0b3d91;
  --green: #2e8b57;
  --yellow: #f4c430;
  --light-grey: #f2f2f2;
  --dark-grey: #4f4f4f;
  --accent-color: var(--green); /* for buttons and highlights */
}

/* ===== NAVBAR ===== */
.navbar-light .navbar-nav .nav-link {
  color: var(--navy-blue);
  font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--green);
}

.btn-book {
  background-color: var(--green);
  color: white;
  border: none;
}

.btn-book:hover {
  background-color: var(--navy-blue);
}

/* ===== HERO SECTION ===== */
.hero-overlay h1,
.hero-overlay p {
  color: var(--yellow); /* bright contrast on video */
  text-shadow: 2px 2px var(--dark-grey);
}

/* ===== ABOUT SECTION ===== */
.about-title {
  color: var(--navy-blue);
}

.about-lead {
  color: var(--dark-grey);
}

.read-more-link {
  color: var(--green);
}

.read-more-link:hover {
  color: var(--navy-blue);
}

/* ===== APARTMENTS CARDS ===== */
.room-card {
  border: 1px solid var(--light-grey);
}

.room-card .card-title {
  color: var(--navy-blue);
}

.room-card .stars i {
  color: var(--yellow);
}

/* ===== SIGNATURE SERVICES ===== */
#signature-services {
  background-color: var(--light-grey);
}

.services-carousel .card-body h5 {
  color: var(--navy-blue);
}

.services-carousel .card-body p {
  color: var(--dark-grey);
}

#signature-services a {
  color: var(--green);
}

#signature-services a:hover {
  color: var(--navy-blue);
}

/* ===== CTA SECTION ===== */

.cta-section h2 {
  color: var(--yellow);
}

.cta-section p {
  color: var(--light-grey);
}

.cta-link {
  color: var(--green);
}

.cta-link:hover {
  color: var(--yellow);
  border-bottom: none;
}

/* ===== REVIEWS ===== */
.reviews-section {
  background-color: var(--light-grey);
}

.review-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.review-card h6 {
  color: var(--navy-blue);
}

/* ===== FOOTER ===== */
.site-footer {
  background-color: #06064f;
  color: white;
}

.site-footer a {
  color: var(--yellow);
}

.site-footer a:hover {
  color: var(--green);
}

.amenity-box {
  border: 1px solid var(--green);
  color: var(--navy-blue);
}

.amenity-box:hover {
  border-color: var(--yellow);
  transform: scale(1.05);
}

/* ===== MODAL ===== */
.modal-content {
  border-radius: 1rem;
}

.modal-header .modal-title {
  color: var(--green);
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  border: 1px solid var(--green);
}

/* ===== FLOATING CHAT BUTTON ===== */
.chat-btn {
  background-color: var(--green);
  color: white;
  border-radius: 50%;
}

.chat-btn:hover {
  background-color: var(--navy-blue);
  color: var(--yellow);
}

/* Signature Services Section Colors */
#signature-services {
  background-color: #2e8b57; /* green background example, can switch to #f4c430 (yellow) or #f2f2f2 (light grey) */
  color: #fff; /* default text color */
}


/* Carousel cards */
.services-carousel .card-body h5 {
  color: #f2f2f2; /* light grey so it pops against green */
  font-weight: 600;
}

.services-carousel .card-body p {
  color: #e0f7e0; /* softer greenish-white for description */
}

/* Card background / border */
.services-carousel .card {
  background-color: rgba(255, 255, 255, 0.05); /* slight transparency */
  border: none;
}

/* Read More link */
#signature-services a {
  color: #f4c430; /* yellow link */
}

#signature-services a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Amenities icons */
#amenities i {
  color: #f4c430; /* yellow icons on green background */
}

#amenities span {
  color: #fff; /* white text for amenities */
}


  /* ===== FORCE HERO TITLE SLIDE UP (PARALLAX HEADER) ===== */
.hero-animate .hero-title {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  animation: heroSlideUpForce 1s ease-out forwards !important;
}

/* Reuse same animation */
@keyframes heroSlideUpForce {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== FORCE HERO TITLE ANIMATION ===== */
.hero-animate .hero-title {
  opacity: 0 !important;
  transform: translateY(60px) !important;
  animation: heroSlideUpForce 1s ease-out forwards !important;
}

/* Keyframes */
@keyframes heroSlideUpForce {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* GLOBAL WHATSAPP BUTTON */

.global-whatsapp{
position:fixed !important;
bottom:25px !important;
right:25px !important;

width:65px;
height:65px;

display:flex;
align-items:center;
justify-content:center;

background:#25D366;
color:white;

font-size:34px;
border-radius:50%;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,0.35);

z-index:999999 !important;

transition:transform 0.25s ease, box-shadow 0.25s ease;

}

/* HOVER */

.global-whatsapp:hover{
transform:scale(1.12);
box-shadow:0 15px 40px rgba(0,0,0,0.45);
}

/* PULSE ANIMATION */

.global-whatsapp::after{
content:"";
position:absolute;
width:65px;
height:65px;
border-radius:50%;
background:rgba(37,211,102,0.4);
animation:whatsappPulse 2s infinite;
z-index:-1;
}

@keyframes whatsappPulse{
0%{
transform:scale(1);
opacity:0.8;
}
70%{
transform:scale(1.6);
opacity:0;
}
100%{
transform:scale(1.6);
opacity:0;
}
}

/* MOBILE SIZE */

@media(max-width:768px){

.global-whatsapp{
width:60px;
height:60px;
font-size:30px;
bottom:20px;
right:20px;
}

}