:root { --primary-color: #E91E63; --secondary-color: #333; --white: #ffffff; --light-bg: #f8f9fa; --dark-bg: #1a1a1a; } 

body { font-family: 'DM Sans', 'Helvetica', 'Arial', sans-serif; line-height: 1.6; font-feature-settings: 'rlig'; /* Optional: For advanced font rendering (OpenType features) */
 text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 
 
/* Top Bar */
.top-bar { background-color: var(--white); border-bottom: 1px solid #eee; font-size: 14px; } 

.text-pink { color: var(--primary-color); } 

.btn-book-sm { background-color: var(--primary-color); color: var(--white); padding: 4px 12px; border-radius: 20px; font-size: 12px; text-decoration: none; transition: all 0.3s ease; } 

.btn-book-sm:hover { background-color: #d81b60; color: var(--white); } 

.btn-book-md { background-color: var(--primary-color); color: var(--white); padding: 10px 15px; border-radius: 50px; font-size: 16px; text-decoration: none; transition: all 0.3s ease; min-width: 180px; } 

.btn-book-md:hover { background-color: #d81b60; color: var(--white); } 

/* Navigation */
.navbar { background-color: var(--white); padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } 

.navbar-nav .nav-link { color: var(--secondary-color); font-weight: 600; padding: 0.5rem 1rem; transition: color 0.3s ease; font-size: 16px; text-align: center; } 

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--primary-color); } 

.btn-book, .btn-book:hover, .btn-book:visited { background-color: var(--primary-color); color: var(--white) !important; padding: 8px 20px !important; !i; !; border-radius: 25px; transition: all 0.3s ease; margin-left: 15px; display: block; width: 100%; max-width: 250px; } 

.btn-book:hover { background-color: #d81b60; transform: translateY(-2px); } 

/* Hero Section */
.hero { height: 80vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); } 

.hero video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } 

.hero-content { z-index: 1; position: relative; } 
.hero-content h1 { font-size: 3.6rem; margin-bottom: 1rem; font-weight: 700; text-shadow: 0 0 4px hsl(0deg 0% 0% / 50%); } 

.hero-content p { font-size: 1.5rem; margin-bottom: 2rem; } 

.btn-book-lg { background-color: var(--primary-color); color: var(--white); padding: 15px 40px; border-radius: 30px; font-size: 1.2rem; text-decoration: none; transition: all 0.3s ease; } 

.btn-book-lg:hover { background-color: #d81b60; color: var(--white); transform: translateY(-3px); } 

/* Section Titles */
.section-title { font-size: 2rem; color: var(--secondary-color); margin-bottom: 3rem; position: relative; padding-bottom: 15px; font-weight: 600; } 

.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--primary-color); } 

/* Package Cards */
.packages { padding: 5rem 0; background-color: var(--light-bg); } 

.package-card { background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; position: relative; } 

.package-badge { position: absolute; top: 20px; right: -30px; background: var(--primary-color); color: var(--white); padding: 5px 30px; transform: rotate(45deg); font-size: 12px; font-weight: bold; } 

.package-card:hover { transform: translateY(-10px); } 

.package-card img { width: 100%; height: 280px; object-fit: cover; } 

.package-info { padding: 1.5rem; text-align: center; } 

.package-info h3 { font-size: 1rem; color: var(--secondary-color); margin-bottom: 1rem; font-weight: 700; } 

.price { color: var(--primary-color); font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; } 

.price span { font-size: 0.74rem; color: #666; font-weight: normal; } 

.package-features { list-style: none; padding: 0; margin-bottom: 1.5rem; } 

.package-features li { margin-bottom: 0.5rem; color: #666; font-size: 0.94rem; } 

.package-features i { color: var(--primary-color); margin-right: 0.5rem; } 

.package-buttons { display: flex; gap: 10px; justify-content: center; } 

.btn-inquiry { background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 8px 20px; border-radius: 25px; transition: all 0.3s ease; text-decoration: none; } 

.btn-inquiry:hover { background-color: var(--primary-color); color: var(--white); } 

/* About Section */
.about { padding: 5rem 0; background-color: var(--white); } 

.about h2 { color: var(--secondary-color); margin-bottom: 2rem; font-size: 2rem; font-weight: 700; } 

.about p { color: #666; margin-bottom: 1.5rem; } 

.btn-learn-more { background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 10px 30px; border-radius: 25px; transition: all 0.3s ease; text-decoration: none; } 

.btn-learn-more:hover { background-color: var(--primary-color); color: var(--white); } 

/* PM Quote Section */
.pm-quote { padding: 5rem 0; background-color: var(--light-bg); } 

.quote-box { background: var(--white); border-radius: 15px; padding: 3rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 3rem; } 

.quote-content p { font-size: 1.2rem; color: #666; font-style: italic; margin-bottom: 1rem; } 

.quote-author { color: var(--secondary-color); font-weight: bold; font-style: normal; } 

.pm-image { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; } 

/* Nearby Resorts */
.nearby-resorts { padding: 5rem 0; background-color: var(--white); } 

.resort-card { text-align: center; background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } 

.resort-card:hover { transform: translateY(-10px); } 

.resort-card img { width: 100%; height: 200px; object-fit: cover; } 

.resort-info { padding: 1.5rem; } 

.resort-info h3 { font-size: 1.2rem; color: var(--secondary-color); margin-bottom: 1rem; } 

.resort-info p { color: #666; margin-bottom: 1.5rem; } 

.resort-info a.btn.btn-book { margin: 0 auto; } 

.modal-content .close { border: none; background: none; position: absolute; top: 5px; right: 5px; font-size: 36px; } 
h2.moalTitle { font-size: 20px; font-weight: 700; margin-bottom: 15px; } 

.modal-content { max-width: 380px; } 

.form-group { margin-bottom: 10px; } 

.form-group label { font-size: 14px; } 

.form-group .form-control { border-radius: 2px; } 
.modal-body { padding: 20px 25px; } 
.error-message { color: red; font-size: 12px; } 
/* Responsive Adjustments */
@media (max-width: 768px){
 .hero-content h1 { font-size: 2.5rem; } 
 
 .hero-content p { font-size: 1.2rem; } 
 
 .section-title { font-size: 2rem; } 
 
 .package-buttons { flex-direction: column; } 
 
 .top-bar .col-md-4 { text-align: center; margin-bottom: 5px; } 
 
 .quote-box { flex-direction: column; text-align: center; } 
 
 .pm-image { width: 150px; height: 150px; } 
 }