/* ===================================== */ /* ✅ GLOBAL RESET (ALL PLATFORMS) */ /* ===================================== */  * { box-sizing: border-box; }  body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #ffffff; color: #1a1a1a; line-height: 1.5; }  img { max-width: 100%; height: auto; display: block; }  /* ===================================== */ /* ✅ HEADER + NAV (ALL PAGES) */ /* ===================================== */  header { background: white; padding: 18px 28px; border-bottom: 3px solid #c9a24d;  display: flex; justify-content: space-between; align-items: center;  position: sticky; top: 0; z-index: 999; }  header img { height: 65px; }  nav { display: flex; gap: 18px; }  nav a { text-decoration: none; font-weight: bold; color: black; font-size: 15px; white-space: nowrap; }  nav a:hover { color: #8b0000; }  /* ===================================== */ /* ✅ BUTTONS */ /* ===================================== */  .btn { display: inline-block; padding: 14px 34px; background: #c9a24d; color: white; text-decoration: none; font-weight: bold; border-radius: 35px; transition: 0.25s ease; }  .btn:hover { background: #8b0000; transform: translateY(-3px); }  /* ===================================== */ /* ✅ HOME HERO */ /* ===================================== */  .hero { background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url("white-suburban-beach.png");  background-size: cover; background-position: center; min-height: 85vh;  display: flex; justify-content: center; align-items: center; text-align: center;  padding: 40px 20px; }  .hero-content { color: white; max-width: 850px; }  .hero h1 { font-size: clamp(32px, 5vw, 58px); margin-bottom: 15px; text-shadow: 0 4px 12px rgba(0,0,0,0.8); }  .hero p { font-size: clamp(15px, 2vw, 20px); }  /* ===================================== */ /* ✅ REVIEWS SLIDER */ /* ===================================== */  .reviews-section { padding: 80px 20px; text-align: center; background: #f8f8f8; }  .reviews-section h2 { font-size: clamp(26px, 4vw, 38px); color: #8b0000; }  .reviews-subtext { font-size: 16px; color: #444; margin-bottom: 40px; }  .reviews-slider { overflow: hidden; max-width: 1000px; margin: auto; }  .reviews-track { display: flex; gap: 20px; animation: scrollReviews 18s linear infinite; }  .review-card { min-width: 260px; background: white; padding: 25px; border-radius: 14px; border-top: 5px solid #c9a24d; box-shadow: 0 8px 18px rgba(0,0,0,0.12); text-align: center; }  .review-stars { color: gold; font-size: 18px; margin-bottom: 12px; }  @keyframes scrollReviews { from { transform: translateX(0); } to { transform: translateX(-50%); } }  /* ===================================== */ /* ✅ BEACH SECTION */ /* ===================================== */  .beach-section { background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("Anguilla-home.jpg");  background-size: cover; background-position: center; padding: 110px 20px; text-align: center; color: white; }  .beach-overlay h2 { font-size: clamp(26px, 4vw, 46px); text-shadow: 0 4px 12px rgba(0,0,0,0.8); }  .tagline { font-size: 18px; font-style: italic; }  /* ===================================== */ /* ✅ SERVICES PAGE */ /* ===================================== */  .section { max-width: 1100px; margin: auto; padding: 70px 20px; }  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }  .card { background: white; padding: 28px; border-radius: 12px; border-top: 4px solid #c9a24d; box-shadow: 0 8px 18px rgba(0,0,0,0.12); transition: 0.25s ease; }  .card:hover { transform: translateY(-6px); }  .price { color: #8b0000; font-weight: bold; }  /* ===================================== */ /* ✅ FLEET HERO */ /* ===================================== */  .fleet-hero { background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)), url("suburban-home.jpg");  background-size: cover; background-position: center; min-height: 55vh;  display: flex; justify-content: center; align-items: center; text-align: center; }  .fleet-hero-text { color: white; padding: 20px; }  .fleet-hero-text h1 { font-size: 55px; font-weight: bold; margin-bottom: 10px; text-shadow: 0 4px 14px rgba(0,0,0,0.9); }  .fleet-hero-text p { font-size: 20px; text-shadow: 0 3px 10px rgba(0,0,0,0.8); }  /* ===================================== */ /* ✅ FLEET CARD DESKTOP */ /* ===================================== */  .fleet-section { padding: 80px 20px; display: flex; justify-content: center; }  .fleet-card { max-width: 1100px; width: 100%;  background: white; border-radius: 22px; overflow: hidden;  display: flex; align-items: stretch;  border-top: 6px solid #c9a24d; box-shadow: 0 15px 35px rgba(0,0,0,0.18); }  /* IMAGE LEFT */ .fleet-image { flex: 0 0 48%; }  .fleet-image img { width: 100%; height: 100%; object-fit: cover; }  /* INFO RIGHT */ .fleet-info { flex: 1; padding: 45px; }  .fleet-title { font-size: 32px; font-weight: bold; color: #8b0000; margin-bottom: 15px; }  .fleet-info p { font-size: 16px; margin-bottom: 18px; }  .fleet-info ul { padding-left: 18px; margin-bottom: 25px; }  .fleet-info li { margin-bottom: 8px; }  /* BUTTON */ .fleet-buttons a { display: inline-block; padding: 14px 34px; background: #c9a24d; color: white; font-weight: bold; text-decoration: none; border-radius: 35px; transition: 0.25s ease; }  .fleet-buttons a:hover { background: #8b0000; transform: translateY(-3px); }  /* ===================================== */ /* ✅ FOOTER */ /* ===================================== */  footer { text-align: center; padding: 25px; border-top: 3px solid #c9a24d; margin-top: 60px; }  /* ===================================== */ /* ✅ MOBILE FIXES */ /* ===================================== */  @media (max-width: 768px) {  header { flex-direction: column; }  /* NAV SCROLL */ nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; width: 100%; justify-content: flex-start; padding: 10px 0; }  nav a { flex: 0 0 auto; padding: 8px 12px; }  nav::-webkit-scrollbar { display: none; }  /* ===================================== */ /* ✅ FLEET MOBILE PERFECT */ /* ===================================== */  .fleet-card { flex-direction: column; max-height: 680px; }  /* IMAGE TOP */ .fleet-image { width: 100%; height: 260px; }  .fleet-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }  /* SCROLLING INFO */ .fleet-info { padding: 25px; max-height: 330px; overflow-y: auto; }  /* BUTTON FIXED BOTTOM */ .fleet-buttons { padding: 20px; border-top: 1px solid #eee; background: white; }  .fleet-buttons a { width: 100%; text-align: center; padding: 15px; font-size: 16px; } } /* ===================================== */ /* ✅ SMALL HERO FOR REVIEWS */ /* ===================================== */  .reviews-hero-small { background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)), url("suburban-home.jpg"); background-size: cover; background-position: center; min-height: 35vh; display: flex; justify-content: center; align-items: center; text-align: center; } /* ===================================== */ /* ✅ REVIEWS HERO (MATCH ABOUT ONLY) */ /* ===================================== */  .reviews-hero { background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)), url("PHOTO-2025-10-23-19-06-31.jpg");  background-size: cover; background-position: center; min-height: 40vh; /* same smaller size */ display: flex; justify-content: center; align-items: center; text-align: center; }  /* ===================================== */ /* TESTIMONIALS - HOTEL STYLE */ /* ===================================== */  .reviews-hero { background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url("PHOTO-2025-10-23-19-06-31.jpg"); background-size: cover; background-position: center; min-height: 40vh; display: flex; justify-content: center; align-items: center; text-align: center; }  .reviews-intro { text-align: center; padding: 80px 20px 40px; background: #f9f9f9; }  .intro-container { max-width: 800px; margin: auto; }  .reviews-intro h2 { font-size: 30px; margin-bottom: 20px; color: #1a1a1a; }  .gold-divider { width: 80px; height: 3px; background: #c9a24d; margin: 20px auto; }  .reviews-intro p { font-size: 16px; color: #555; }  .centered-testimonials { padding: 100px 20px; background: #ffffff; }  .testimonial-container { max-width: 800px; margin: auto; display: flex; flex-direction: column; gap: 60px; }  .testimonial-card { background: #ffffff; padding: 60px 50px; border-radius: 20px; border-top: 4px solid #c9a24d; box-shadow: 0 20px 40px rgba(0,0,0,0.08); text-align: center; transition: 0.4s ease; }  .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.12); }  .testimonial-card .review-stars { font-size: 24px; color: #c9a24d; margin-bottom: 25px; }  .testimonial-text { font-size: 18px; line-height: 1.7; color: #444; margin-bottom: 25px; font-style: italic; }  .testimonial-name { font-weight: bold; color: #8b0000; }  .leave-review-section { background: #f4f4f4; padding: 100px 20px; text-align: center; }  .leave-box { max-width: 600px; margin: auto; }  .leave-box h3 { font-size: 28px; margin-bottom: 15px; }  .leave-box p { margin-bottom: 30px; color: #555; }  @media (max-width: 768px) { .testimonial-card { padding: 40px 25px; } }  /* ===================================== */ /* TESTIMONIALS HERO */ /* ===================================== */  .reviews-hero { background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url("PHOTO-2025-10-23-19-06-31.jpg"); background-size: cover; background-position: center; min-height: 40vh; display: flex; justify-content: center; align-items: center; text-align: center; }  /* Red hero heading */ .red-heading { color: #8b0000; }  /* ===================================== */ /* HOTEL STYLE TESTIMONIALS */ /* ===================================== */  .reviews-intro { text-align: center; padding: 80px 20px 40px; background: #f9f9f9; }  .intro-container { max-width: 800px; margin: auto; }  .reviews-intro h2 { font-size: 30px; margin-bottom: 20px; color: #1a1a1a; }  .gold-divider { width: 80px; height: 3px; background: #c9a24d; margin: 20px auto; }  .reviews-intro p { font-size: 16px; color: #555; }  .hotel-style { padding: 80px 20px; background: #ffffff; }  .hotel-card { background: #ffffff; padding: 40px; border-radius: 18px; border-top: 5px solid #c9a24d; box-shadow: 0 15px 30px rgba(0,0,0,0.08); min-width: 320px; text-align: center; }  .hotel-card .review-stars { font-size: 22px; color: #c9a24d; margin-bottom: 15px; }  .testimonial-text { font-size: 16px; color: #444; font-style: italic; margin-bottom: 15px; }  .testimonial-name { font-weight: bold; color: #8b0000; }  /* Slower scroll */ .hotel-style .reviews-track { animation: scrollReviews 26s linear infinite; }  .leave-review-section { background: #f4f4f4; padding: 100px 20px; text-align: center; }  .leave-box { max-width: 600px; margin: auto; }  .leave-box h3 { font-size: 28px; margin-bottom: 15px; }  .leave-box p { margin-bottom: 30px; color: #555; }  @media (max-width: 768px) { .hotel-card { min-width: 260px; padding: 30px; } }  /* ===================================== */ /* ABOUT HERO STYLE (FOR TESTIMONIALS MATCH) */ /* ===================================== */  .about-hero { background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), url('PHOTO-2025-10-23-19-06-31.jpg');  background-repeat: no-repeat; background-position: center; background-size: contain; padding: 100px 20px; text-align: center; }  .about-hero h1 { font-size: 38px; color: #8b0000; margin-bottom: 10px; }  .about-hero p { font-size: 18px; color: #333; }  /* MOBILE MATCH */ @media (max-width: 768px) { .about-hero { padding: 70px 15px; background-size: 85%; }  .about-hero h1 { font-size: 30px; } }  /* ================= TESTIMONIAL CTA LUXURY FIX ================= */  .leave-review-section { background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url("Anguilla-home.jpg");  background-size: cover; background-position: center; padding: 140px 20px; text-align: center; color: #ffffff; }  .leave-review-section h3 { font-size: 32px; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; text-shadow: 0 4px 18px rgba(0,0,0,0.8); }  .leave-review-section p { font-size: 18px; margin-bottom: 30px; opacity: 0.95; text-shadow: 0 3px 10px rgba(0,0,0,0.8); }   /* ================= FLEET BOTTOM HERO / FOOTER ================= */ .fleet-footer-hero { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('fleet-footer.png'); background-size: cover; background-position: center; text-align: center; padding: 60px 20px; /* smaller than top hero for footer look */ color: white; border-top: 3px solid #c9a24d; /* optional luxury accent */ }  .fleet-footer-hero h2 { font-size: 36px; margin-bottom: 15px; font-weight: bold; text-shadow: 0 3px 8px rgba(0,0,0,0.5); }  .fleet-footer-hero p { font-size: 18px; margin-bottom: 25px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }   /* ===================================== */ /* ✅ FLEET FOOTER HERO - SERVICE ICONS WITH NICE TEXT */ /* ===================================== */ .fleet-footer-services { display: flex; justify-content: center; gap: 60px; margin-top: 40px; flex-wrap: wrap; }  .fleet-footer-services .service-item { display: flex; flex-direction: column; align-items: center; text-align: center; color: #ffffff; /* white text */ font-family: Arial, Helvetica, sans-serif; }  .fleet-footer-services .service-item img { width: 50px; height: 50px; margin-bottom: 12px; object-fit: contain; }  .fleet-footer-services .service-item p { margin: 0; font-weight: bold; font-size: 16px; text-transform: capitalize; letter-spacing: 0.5px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }  /* MOBILE ADJUSTMENT */ @media (max-width: 768px) { .fleet-footer-services { gap: 30px; }  .fleet-footer-services .service-item img { width: 40px; height: 40px; margin-bottom: 8px; }  .fleet-footer-services .service-item p { font-size: 14px; } }
/* ===================================== */
/* ✅ FLEET BOTTOM HERO / FOOTER WITH ICONS */
/* ===================================== */

.fleet-footer-hero {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('fleet-footer.png');
background-size: cover;
background-position: center;
text-align: center;
padding: 60px 20px; /* smaller than top hero for footer look */
color: white;
border-top: 3px solid #c9a24d; /* luxury accent */
}

.fleet-footer-hero h2 {
font-size: 36px;
margin-bottom: 15px;
font-weight: bold;
text-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

.fleet-footer-hero p {
font-size: 18px;
margin-bottom: 25px;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.fleet-footer-hero .btn {
display: inline-block;
padding: 15px 40px;
font-size: 18px;
font-weight: bold;
border-radius: 35px;
background: #c9a24d;
color: white;
text-decoration: none;
transition: 0.25s ease;
margin-bottom: 40px;
}

.fleet-footer-hero .btn:hover {
background: #8b0000;
transform: translateY(-3px);
}

/* ===================================== */
/* ✅ ICONS IN FLEET FOOTER */
/* ===================================== */

.fleet-footer-icons {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 20px;
flex-wrap: wrap;
}

.fleet-footer-icons .service-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}

.fleet-footer-icons .service-item i {
font-size: 50px;
margin-bottom: 12px;
}

.fleet-footer-icons .service-item span {
margin: 0;
font-weight: bold;
font-size: 16px;
text-transform: capitalize;
letter-spacing: 0.5px;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ================= MOBILE ADJUSTMENT ================= */
@media (max-width: 768px) {
.fleet-footer-hero {
padding: 50px 15px;
}

.fleet-footer-hero h2 {
font-size: 28px;
}

.fleet-footer-hero p {
font-size: 16px;
margin-bottom: 20px;
}

.fleet-footer-hero .btn {
padding: 12px 30px;
font-size: 16px;
margin-bottom: 30px;
}

.fleet-footer-icons {
gap: 30px;
}

.fleet-footer-icons .service-item i {
font-size: 40px;
margin-bottom: 8px;
}

.fleet-footer-icons .service-item span {
font-size: 14px;
}
}


/* ================= FLEET FOOTER HERO ICONS ================= */
.fleet-footer-icons {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
flex-wrap: wrap;
}

.fleet-footer-icons .service-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #333333; /* <-- Icon and text color, change to match sunset (#333, #444, etc.) */
font-family: Arial, Helvetica, sans-serif;
transition: color 0.3s ease;
}

.fleet-footer-icons .service-item i {
font-size: 36px; /* icon size */
margin-bottom: 12px;
}

.fleet-footer-icons .service-item span {
font-weight: bold;
font-size: 16px;
text-transform: capitalize;
letter-spacing: 0.5px;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.fleet-footer-icons .service-item:hover {
color: #c9a24d; /* <-- hover color for icon and text */
}

/* ================= MOBILE ADJUSTMENT ================= */
@media (max-width: 768px) {
.fleet-footer-icons {
gap: 30px;
}
.fleet-footer-icons .service-item i {
font-size: 30px;
margin-bottom: 8px;
}
.fleet-footer-icons .service-item span {
font-size: 14px;
}
}

/* ================= FLEET FOOTER HERO ICONS ================= */
.fleet-footer-icons {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
flex-wrap: wrap;
}

.fleet-footer-icons .service-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #c9a24d; /* <-- Standard color for icon & text (gold accent / sunset) */
font-family: Arial, Helvetica, sans-serif;
}

.fleet-footer-icons .service-item i {
font-size: 36px; /* icon size */
margin-bottom: 12px;
}

.fleet-footer-icons .service-item span {
font-weight: bold;
font-size: 16px;
text-transform: capitalize;
letter-spacing: 0.5px;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ================= MOBILE ADJUSTMENT ================= */
@media (max-width: 768px) {
.fleet-footer-icons {
gap: 30px;
}
.fleet-footer-icons .service-item i {
font-size: 30px;
margin-bottom: 8px;
}
.fleet-footer-icons .service-item span {
font-size: 14px;
}
}

/* ================= HEADER ================= */
.site-header {
width: 100%;
background: #ffffff;
border-bottom: 3px solid #c9a24d;
padding: 12px 30px;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
height: 65px;
}

/* Desktop nav */
.site-nav {
display: flex;
gap: 25px;
}

.site-nav a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 15px;
}

.site-nav a:hover {
color: #8b0000;
}

/* Mobile icons hidden on desktop */
.mobile-icons {
display: none;
}

.mobile-icons a,
.mobile-icons button {
background: none;
border: none;
font-size: 22px;
color: #000;
cursor: pointer;
margin-left: 12px;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
.site-nav {
display: none; /* hide nav links on mobile */
}

.mobile-icons {
display: flex;
align-items: center;
}

.logo img {
height: 50px;
}
}

/* ================= HEADER ================= */
.site-header {
width: 100%;
background: #000; /* black background */
color: white;
border-bottom: 2px solid #c9a24d;
font-family: Arial, Helvetica, sans-serif;
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
padding: 12px 20px;
}

.site-header .logo img {
height: 65px;
}

/* Desktop Navigation */
.desktop-nav {
display: flex;
gap: 22px;
}

.desktop-nav a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.25s;
}

.desktop-nav a:hover {
color: #c9a24d;
}

/* Mobile Icons */
.mobile-icons {
display: none;
gap: 20px;
font-size: 22px;
cursor: pointer;
color: white;
}

/* Mobile Navigation */
.mobile-nav {
display: none;
flex-direction: column;
background: #000;
padding: 15px 20px;
gap: 12px;
}

.mobile-nav a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}

.mobile-nav a:hover {
color: #c9a24d;
}

.mobile-nav.active {
display: flex;
}

/* ================= RESPONSIVE ================= */
@media(max-width: 768px) {
.desktop-nav {
display: none;
}

.mobile-icons {
display: flex;
}
}


/* ================= HEADER STYLING ================= */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: transparent; /* transparent so logo looks clean */
position: sticky;
top: 0;
z-index: 999;
}

header .logo img {
height: 100px; /* Big logo */
max-height: 120px;
width: auto;
display: block;
}

header nav {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 30px;
}

header nav a {
text-decoration: none;
font-weight: bold;
color: #1a1a1a; /* Dark text for nav */
font-size: 16px;
transition: 0.3s ease;
}

header nav a:hover,
header nav a.active {
color: #c9a24d; /* Highlight color on hover or active page */
}



/* ================= HEADER - LOGO + NAV ================= */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 28px;
background: white; /* Keep same as before */
border-bottom: 3px solid #c9a24d;
position: sticky;
top: 0;
z-index: 999;
}

.main-header .logo img {
max-height: 120px; /* Big logo for desktop */
width: auto;
}

.nav-links {
display: flex;
gap: 20px;
}

.nav-links a {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 15px;
padding: 8px 12px;
transition: 0.25s;
border-radius: 8px; /* Rounded rectangle style */
}

.nav-links a:hover,
.nav-links a.active {
background: #c9a24d;
color: white;
}

/* ================= HAMBURGER MENU FOR MOBILE ================= */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}

.hamburger span {
display: block;
width: 28px;
height: 3px;
background: black;
border-radius: 2px;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
.nav-links {
position: absolute;
top: 100%;
right: 0;
background: white;
flex-direction: column;
width: 200px;
display: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
border-radius: 8px;
}

.nav-links.active {
display: flex;
}

.hamburger {
display: flex;
}

.nav-links a {
padding: 12px 20px;
}

.main-header .logo img {
max-height: 100px; /* Adjust logo smaller on mobile */
}
}

/* ================= LOGO BIGNESS ================= */
header .logo img {
max-height: 120px; /* Make the logo taller */
width: auto; /* Keep proportions correct */
display: block; /* Ensure proper spacing */
}


}

/* ================= UPDATED HEADER & LOGO ================= */
header {
background-color: #ffffff; /* Solid header background */
padding: 0 28px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100px; /* Set a fixed header height */
border-bottom: 3px solid #c9a24d;
position: sticky;
top: 0;
z-index: 999;
}

header .logo img {
height: 100%; /* Fill the full header height */
max-height: 100px; /* Optional max height */
object-fit: contain;
}

header nav {
display: flex;
gap: 18px;
align-items: center;
}

header nav a {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 15px;
padding: 10px 20px;
border-radius: 8px; /* Rounded rectangle effect */
transition: 0.3s ease;
position: relative;
}

header nav a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 4px;
background-color: #c9a24d; /* Gold hover underline */
border-radius: 2px;
transition: width 0.3s ease;
}

header nav a:hover::after {
width: 100%; /* Full width on hover */
}

/* ================= MOBILE HEADER ================= */
@media (max-width: 768px) {
header {
flex-direction: row;
justify-content: space-between;
height: 80px;
padding: 0 15px;
}

header .logo img {
height: 100%;
max-height: 80px;
}

header nav {
display: none; /* Use hamburger menu instead */
}
}

/* ================= BIG HEADER LOGO FIX ================= */
header {
display: flex;
justify-content: space-between;
align-items: center;
background: white; /* solid header background */
height: 120px; /* adjust header height if needed */
padding: 0 28px; /* horizontal padding for spacing */
}

header .logo img {
height: 100%; /* fills the full header height */
width: auto; /* keeps aspect ratio */
max-height: none; /* override any old max-height */
}


/* Make the logo fill the header height */
header .logo img {
height: 100%; /* fill the header vertically */
max-height: none; /* remove any max-height restriction */
width: auto; /* keep original aspect ratio */
display: block; /* remove any extra spacing */
}

/* Optional: remove padding inside the header that shrinks logo */
header {
padding-top: 0;
padding-bottom: 0;
}

/* ================= HEADER + LOGO ================= */
.main-header {
height: 120px; /* set header height */
background-color: #ffffff; /* solid background */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
position: relative;
z-index: 999;
}

/* Logo fills full header height */
.main-header .logo img {
height: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}

/* Hamburger icon styling (mobile) */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
}

.hamburger span {
display: block;
height: 3px;
width: 25px;
background-color: #8b0000; /* dark red bars */
border-radius: 2px;
}

/* Nav links default desktop layout */
.nav-links {
display: flex;
gap: 20px;
align-items: center;
}

.nav-links a {
text-decoration: none;
color: #000;
font-weight: bold;
padding: 8px 16px;
border-radius: 6px; /* makes them slightly rounded rectangles */
transition: 0.25s ease;
}

.nav-links a:hover {
background-color: #c9a24d; /* gold hover */
color: #fff;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
right: 0;
background: #ffffff;
width: 220px;
box-shadow: 0 5px 18px rgba(0,0,0,0.12);
padding: 15px;
border-radius: 0 0 10px 10px;
}
.nav-links.active {
display: flex;
}
.nav-links a {
padding: 12px;
}
}


/* ================= DESKTOP LOGO HEIGHT FIX ================= */
@media (min-width: 769px) {
/* Ensure header has consistent height */
.main-header {
height: 120px; /* adjust if you want taller header */
}

/* Make logo fill full header height */
.main-header .logo img {
height: 100%; /* fill the header vertically */
width: auto; /* keep aspect ratio */
max-height: none; /* override any old max-height */
display: block; /* remove extra spacing */
object-fit: contain; /* keep proportions */
}
}
/* ================= DESKTOP LOGO FIX ================= */
@media(min-width: 769px) {
/* Ensure main header is tall enough */
.main-header {
height: 120px; /* Adjust if you want taller header */
align-items: center;
padding: 0 28px; /* horizontal spacing */
background-color: #ffffff; /* solid header background */
}

/* Logo styling for desktop */
.main-header .logo {
display: flex;
align-items: center;
justify-content: flex-start; /* left-aligned */
max-height: 100%;
}

.main-header .logo img {
height: 100%; /* fills the header height */
width: auto; /* preserve aspect ratio */
object-fit: contain; /* no cropping */
display: block;
}

/* Ensure nav aligns properly with logo */
.nav-links {
align-items: center;
gap: 20px;
}
}




/* ================= DESKTOP CENTERED HEADER ================= */
@media(min-width: 1200px) {
/* Center the header content on very wide screens */
.main-header {
max-width: 1200px; /* max width of content */
margin: 0 auto; /* center header horizontally */
padding: 0 28px; /* spacing inside header */
height: 120px; /* keep header tall enough for logo */
display: flex;
align-items: center;
justify-content: space-between; /* logo left, nav right */
background-color: #ffffff; /* solid header background */
border-bottom: 3px solid #c9a24d;
}

/* Logo stays fully visible */
.main-header .logo img {
height: 100%; /* fills header height */
width: auto; /* maintain proportions */
object-fit: contain; /* no cropping */
display: block;
}

/* Nav links aligned on the right */
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
}