/* ===== RESET & BASE STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
img {
max-width: 100%;
height: auto;
}
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p {
margin-bottom: 1rem;
color: #666;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
/* ===== UTILITY CLASSES ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #666;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 18px 35px;
border-radius: 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s ease;
border: none;
cursor: pointer;
font-size: 1rem;
position: relative;
overflow: hidden;
box-shadow:
0 8px 20px rgba(var(--primary-rgb), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: perspective(500px) rotateX(0deg);
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.cta-button:hover {
transform: perspective(500px) rotateX(-5deg) translateY(-3px);
box-shadow:
0 15px 35px rgba(var(--primary-rgb), 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, var(--primary), var(--accent));
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:active {
transform: perspective(500px) rotateX(-2deg) translateY(-1px);
}
/* ===== HEADER & NAVIGATION ===== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
}
.header.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo a {
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-link {
color: #333;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 20px;
transition: all 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary);
background: rgba(var(--primary-rgb), 0.1);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
padding: 10px;
z-index: 1001;
position: relative;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.bar {
width: 28px;
height: 3px;
background: #333;
transition: all 0.3s ease;
border-radius: 3px;
}
/* ===== HERO SECTION ===== */
.hero {
min-height: 100vh;
background:
linear-gradient(135deg, rgba(var(--primary-rgb), 0.85) 0%, rgba(var(--accent-rgb), 0.8) 100%),
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 300px 300px, 250px 250px, 120px 120px;
background-position: 0% 0%, 100% 100%, 50% 50%;
animation: floatElements 25s ease-in-out infinite;
opacity: 0.6;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 450px 450px, 380px 380px, 300px 300px;
background-position: -60% -60%, 160% 160%, 80% 20%;
animation: floatElementsComplex 40s ease-in-out infinite reverse;
transform-style: preserve-3d;
opacity: 0.5;
z-index: 1;
}
@keyframes floatElements {
0%, 100% {
transform: translateY(0px) translateX(0px) rotate(0deg);
background-position: 0% 0%, 100% 100%, 50% 50%;
}
25% {
transform: translateY(-20px) translateX(10px) rotate(1deg);
background-position: 5% 5%, 95% 95%, 45% 55%;
}
50% {
transform: translateY(0px) translateX(-10px) rotate(0deg);
background-position: -5% 10%, 105% 90%, 55% 45%;
}
75% {
transform: translateY(20px) translateX(10px) rotate(-1deg);
background-position: 10% -5%, 90% 105%, 50% 50%;
}
}
@keyframes floatElementsSlow {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
background-position: -50% -50%, 150% 150%;
}
33% {
transform: translateY(-15px) translateX(-15px) scale(1.05);
background-position: -45% -45%, 145% 145%;
}
66% {
transform: translateY(15px) translateX(15px) scale(0.95);
background-position: -55% -55%, 155% 155%;
}
}
.hero-small {
height: 60vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
margin-top: 80px;
}
.hero-content {
max-width: 800px;
padding: 0 20px;
z-index: 2;
position: relative;
transform: perspective(1000px) rotateX(0deg);
animation: heroContentFloat 6s ease-in-out infinite;
}
@keyframes heroContentFloat {
0%, 100% {
transform: perspective(1000px) rotateX(0deg) translateY(0px);
}
50% {
transform: perspective(1000px) rotateX(2deg) translateY(-10px);
}
}
.hero-title {
font-size: 3.5rem;
color: white;
margin-bottom: 1rem;
font-weight: 700;
text-shadow:
2px 2px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(255, 255, 255, 0.2),
0 0 40px rgba(var(--primary-rgb), 0.3);
letter-spacing: -1px;
transform: perspective(500px) rotateY(0deg);
animation: titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow {
0% {
text-shadow:
2px 2px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(255, 255, 255, 0.2),
0 0 40px rgba(var(--primary-rgb), 0.3);
}
100% {
text-shadow:
2px 2px 8px rgba(0, 0, 0, 0.3),
0 0 30px rgba(255, 255, 255, 0.4),
0 0 60px rgba(var(--primary-rgb), 0.5);
}
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
animation: subtitleFade 3s ease-in-out infinite alternate;
}
@keyframes subtitleFade {
0% { opacity: 0.9; }
100% { opacity: 1; }
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
conic-gradient(from 45deg at 20% 20%, transparent 0deg, rgba(255, 255, 255, 0.05) 90deg, transparent 180deg),
conic-gradient(from 225deg at 80% 80%, transparent 0deg, rgba(var(--accent-rgb), 0.1) 90deg, transparent 180deg);
animation: overlayPulse 8s ease-in-out infinite;
}
@keyframes overlayPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* 3D Floating Elements */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 350px 350px, 280px 280px, 150px 150px;
background-position: -20% -20%, 120% 120%, 50% 50%;
animation: floatElements3D 30s ease-in-out infinite;
transform-style: preserve-3d;
opacity: 0.7;
}
@keyframes floatElements3D {
0%, 100% {
transform: translateY(0px) translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg);
background-position: -20% -20%, 120% 120%, 50% 50%;
}
25% {
transform: translateY(-25px) translateX(15px) translateZ(10px) rotateX(5deg) rotateY(2deg);
background-position: -15% -15%, 115% 115%, 45% 55%;
}
50% {
transform: translateY(0px) translateX(-15px) translateZ(-5px) rotateX(0deg) rotateY(-2deg);
background-position: -25% -10%, 125% 110%, 55% 45%;
}
75% {
transform: translateY(25px) translateX(15px) translateZ(5px) rotateX(-5deg) rotateY(1deg);
background-position: -10% -25%, 110% 125%, 50% 50%;
}
}
/* Additional 3D Dry Cleaning Elements */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 450px 450px, 380px 380px, 300px 300px;
background-position: -60% -60%, 160% 160%, 80% 20%;
animation: floatElementsComplex 40s ease-in-out infinite reverse;
transform-style: preserve-3d;
opacity: 0.5;
z-index: 1;
}
@keyframes floatElementsComplex {
0%, 100% {
transform: translateY(0px) translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
background-position: -60% -60%, 160% 160%, 80% 20%;
}
20% {
transform: translateY(-30px) translateX(20px) translateZ(15px) rotateX(8deg) rotateY(3deg) rotateZ(1deg);
background-position: -55% -55%, 155% 155%, 75% 25%;
}
40% {
transform: translateY(15px) translateX(-25px) translateZ(-10px) rotateX(-5deg) rotateY(-3deg) rotateZ(-2deg);
background-position: -65% -50%, 165% 150%, 85% 15%;
}
60% {
transform: translateY(-15px) translateX(10px) translateZ(20px) rotateX(3deg) rotateY(5deg) rotateZ(1deg);
background-position: -50% -65%, 150% 165%, 70% 30%;
}
80% {
transform: translateY(30px) translateX(-15px) translateZ(-5px) rotateX(-8deg) rotateY(-2deg) rotateZ(-1deg);
background-position: -70% -55%, 170% 155%, 90% 10%;
}
}
/* Steam Animation */
@keyframes steamRise {
0% {
transform: translateY(0px) scale(1) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-50px) scale(1.5) rotate(180deg);
opacity: 0.4;
}
100% {
transform: translateY(-100px) scale(2) rotate(360deg);
opacity: 0;
}
}
/* Washing Machine Bubbles Effect */
.hero .hero-content::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 2px, transparent 3px),
radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.15) 3px, transparent 4px),
radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.08) 2.5px, transparent 3.5px),
radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.12) 1.5px, transparent 2.5px);
background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px;
transform: translate(-50%, -50%);
animation: bubbleDance 15s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes bubbleDance {
0%, 100% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
25% {
transform: translate(-45%, -55%) rotate(90deg) scale(1.1);
background-position: 25% 25%, -25% 25%, 50% -25%, -50% 50%;
}
50% {
transform: translate(-55%, -45%) rotate(180deg) scale(0.9);
background-position: 50% 50%, -50% 50%, 100% -50%, -100% 100%;
}
75% {
transform: translate(-50%, -50%) rotate(270deg) scale(1.05);
background-position: 75% 75%, -75% 75%, 150% -75%, -150% 150%;
}
}
/* 3D Perspective Enhancement */
.hero {
perspective: 1000px;
transform-style: preserve-3d;
}
/* Additional Dry Cleaning Icons Floating */
.hero-content::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
url('data:image/svg+xml,'),
url('data:image/svg+xml,');
background-size: 200px 200px, 300px 300px;
background-position: 90% 10%, 10% 90%;
animation: iconFloat 25s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes iconFloat {
0%, 100% {
background-position: 90% 10%, 10% 90%;
transform: rotate(0deg);
}
33% {
background-position: 85% 15%, 15% 85%;
transform: rotate(120deg);
}
66% {
background-position: 95% 5%, 5% 95%;
transform: rotate(240deg);
}
}
/* ===== WHY CHOOSE US SECTION ===== */
.why-choose-us {
padding: 80px 0;
background: #f8f9fa;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
.feature-card h3 {
color: #333;
margin-bottom: 1rem;
}
.feature-card p {
color: #666;
line-height: 1.6;
}
/* ===== TESTIMONIALS SECTION ===== */
.testimonials {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
color: white;
}
.testimonials .section-title {
color: white;
}
.testimonials-slider {
position: relative;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
border-radius: 15px;
}
.testimonial-slide {
display: none;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 3rem;
border-radius: 15px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.testimonial-slide.active {
display: block;
}
.testimonial-content p {
font-size: 1.2rem;
font-style: italic;
margin-bottom: 2rem;
color: white;
line-height: 1.8;
}
.testimonial-author h4 {
color: white;
margin-bottom: 0.5rem;
}
.testimonial-author span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.testimonial-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.testimonial-nav button {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 12px 16px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-nav button:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* ===== SPECIAL OFFER SECTION ===== */
.special-offer {
padding: 60px 0;
background: #f8f9fa;
}
.offer-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.offer-content h2 {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1rem;
}
.offer-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
}
/* ===== SERVICES PAGE STYLES ===== */
.services-main {
padding: 80px 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
text-align: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
.service-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.5rem;
}
.service-features span {
color: #28a745;
font-size: 0.9rem;
font-weight: 500;
}
.service-guarantee {
background: #f8f9fa;
padding: 3rem;
border-radius: 15px;
margin: 4rem 0;
}
.guarantee-content h3 {
text-align: center;
color: var(--primary);
margin-bottom: 2rem;
}
.guarantee-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.guarantee-item {
display: flex;
align-items: center;
gap: 1rem;
}
.guarantee-item i {
color: var(--accent);
font-size: 1.5rem;
}
.cta-section {
text-align: center;
margin-top: 4rem;
}
.cta-section h3 {
color: var(--primary);
margin-bottom: 1rem;
}
/* ===== PRICING PAGE STYLES ===== */
.pricing-main {
padding: 100px 0;
background: linear-gradient(180deg, #f9fbff 0%, #ffffff 55%);
}
.pricing-header {
text-align: center;
max-width: 780px;
margin: 0 auto 3.5rem;
}
.pricing-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1.1rem;
border-radius: 999px;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pricing-eyebrow i {
font-size: 0.9rem;
}
.pricing-header h2 {
margin-top: 1.4rem;
margin-bottom: 1rem;
font-size: 2.8rem;
color: #1f2c45;
}
.pricing-header p {
font-size: 1.05rem;
color: #5c657a;
line-height: 1.7;
}
.pricing-highlights {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2.5rem;
}
.highlight-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: white;
color: #1f2c45;
border-radius: 999px;
padding: 0.65rem 1.3rem;
border: 1px solid rgba(var(--primary-rgb), 0.15);
box-shadow: 0 12px 24px rgba(23, 61, 140, 0.08);
font-weight: 500;
font-size: 0.95rem;
}
.highlight-chip i {
color: var(--accent);
font-size: 1rem;
}
.pricing-tabs {
display: flex;
justify-content: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.pricing-tab {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
background: white;
border-radius: 18px;
padding: 1.3rem 1.7rem;
min-width: 220px;
border: 1px solid rgba(var(--primary-rgb), 0.15);
box-shadow: 0 18px 35px rgba(19, 41, 82, 0.1);
color: #1f2c45;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.pricing-tab .tab-title {
font-weight: 600;
font-size: 1rem;
}
.pricing-tab .tab-subtitle {
font-size: 0.85rem;
color: #6a7391;
}
.pricing-tab:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.pricing-tab:hover {
transform: translateY(-4px);
}
.pricing-tab.active {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
box-shadow: 0 22px 45px rgba(var(--primary-rgb), 0.35);
border-color: transparent;
}
.pricing-tab.active .tab-subtitle {
color: rgba(255, 255, 255, 0.8);
}
.pricing-panels {
position: relative;
}
.pricing-panel {
display: none;
animation: fadeUp 0.4s ease;
}
.pricing-panel.active {
display: block;
}
.pricing-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.8rem;
}
.price-card {
background: white;
border-radius: 24px;
padding: 1.9rem;
box-shadow: 0 24px 45px rgba(20, 44, 90, 0.08);
border: 1px solid rgba(var(--primary-rgb), 0.12);
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.price-card:hover {
transform: translateY(-10px);
box-shadow: 0 28px 50px rgba(20, 44, 90, 0.15);
border-color: rgba(var(--accent-rgb), 0.2);
}
.price-card-badge {
position: absolute;
top: 18px;
right: 18px;
background: linear-gradient(135deg, var(--accent), var(--primary));
color: white;
padding: 0.35rem 0.9rem;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.price-card-top {
display: flex;
gap: 1.1rem;
align-items: flex-start;
}
.price-card-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.92), rgba(var(--accent-rgb), 0.92));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
flex-shrink: 0;
}
.price-card h3 {
margin-bottom: 0.35rem;
font-size: 1.25rem;
color: #1f2c45;
}
.price-card p {
margin: 0;
color: #6a7391;
font-size: 0.95rem;
line-height: 1.6;
}
.price-card-bottom {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.price-value {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.02em;
}
.price-caption {
font-size: 0.9rem;
color: #7f8aa7;
}
.pricing-note {
margin-top: 2.8rem;
padding: 1.6rem 1.8rem;
background: rgba(var(--primary-rgb), 0.08);
border: 1px solid rgba(var(--primary-rgb), 0.12);
border-radius: 18px;
display: flex;
gap: 1rem;
align-items: flex-start;
color: #405171;
line-height: 1.6;
}
.pricing-note i {
font-size: 1.3rem;
color: var(--accent);
margin-top: 0.1rem;
}
.pricing-note a {
color: var(--accent);
text-decoration: underline;
}
.pricing-benefits {
margin: 5rem 0 4rem;
padding: 3rem;
border-radius: 26px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--accent-rgb), 0.08));
border: 1px solid rgba(var(--primary-rgb), 0.14);
}
.pricing-benefits h3 {
text-align: center;
color: #1f2c45;
margin-bottom: 2.5rem;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1.5rem;
}
.benefit-item {
display: flex;
gap: 1rem;
padding: 1.6rem;
border-radius: 18px;
background: white;
border: 1px solid rgba(var(--primary-rgb), 0.12);
box-shadow: 0 18px 30px rgba(18, 38, 73, 0.08);
}
.benefit-item i {
font-size: 1.4rem;
color: var(--accent);
margin-top: 0.2rem;
}
.benefit-item h4 {
color: #1f2c45;
margin-bottom: 0.35rem;
}
.benefit-item p {
color: #6a7391;
margin: 0;
line-height: 1.6;
}
.special-offers {
margin: 4rem 0;
}
.special-offers h3 {
text-align: center;
color: #1f2c45;
margin-bottom: 2.2rem;
}
.offers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.offer-card {
background: white;
padding: 2.2rem 2rem;
border-radius: 22px;
border: 1px solid rgba(var(--primary-rgb), 0.12);
box-shadow: 0 20px 40px rgba(18, 45, 95, 0.1);
text-align: center;
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
}
.offer-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 0.35rem 1rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.offer-value {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.5rem;
}
.offer-percent {
font-size: 2.4rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.02em;
}
.offer-caption {
font-size: 0.95rem;
color: #6a7391;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.offer-card p {
margin: 0;
color: #556070;
line-height: 1.6;
}
.offer-card span {
font-size: 0.85rem;
color: #8b94ad;
}
.full-price-section .download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.6rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.full-price-section .download-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
.price-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}
.price-table th,
.price-table td {
padding: 1rem 1.4rem;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.price-table th {
background: rgba(var(--primary-rgb), 0.08);
color: #1f2c45;
font-weight: 600;
}
.price-table tr:last-child td {
border-bottom: none;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 992px) {
.pricing-main {
padding: 80px 0;
}
.pricing-header h2 {
font-size: 2.4rem;
}
.pricing-tabs {
gap: 0.8rem;
}
.pricing-tab {
min-width: 200px;
}
.price-card {
padding: 1.6rem;
}
.pricing-benefits {
padding: 2.5rem;
}
}
@media (max-width: 768px) {
.highlight-chip {
padding: 0.6rem 1rem;
}
.pricing-tabs {
justify-content: flex-start;
}
.pricing-tab {
width: 100%;
}
.pricing-panel-grid {
gap: 1.4rem;
}
.price-card-icon {
width: 48px;
height: 48px;
}
.pricing-benefits {
margin: 4rem 0 3rem;
}
}
@media (max-width: 576px) {
.pricing-header h2 {
font-size: 2rem;
}
.pricing-header p {
font-size: 0.95rem;
}
.pricing-highlights {
gap: 0.7rem;
}
.highlight-chip {
font-size: 0.85rem;
}
.price-card {
padding: 1.5rem;
border-radius: 20px;
}
.price-value {
font-size: 1.9rem;
}
.pricing-note {
flex-direction: column;
}
.full-price-section .download-btn {
width: 100%;
}
}
/* ===== BOOKING PAGE STYLES ===== */
.booking-coming-soon {
padding: 120px 0 80px;
background: #f8f9fa;
}
.coming-soon-card {
background: #fff;
padding: 3rem;
border-radius: 24px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(var(--primary-rgb), 0.08);
position: relative;
overflow: hidden;
margin-bottom: 3rem;
}
.coming-soon-card::after {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), transparent 70%);
z-index: 0;
}
.coming-soon-card > * {
position: relative;
z-index: 1;
}
.coming-soon-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent);
padding: 0.6rem 1.4rem;
border-radius: 999px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.75rem;
}
.coming-soon-badge i {
font-size: 1rem;
}
.coming-soon-card h2 {
color: var(--primary);
margin-top: 1.5rem;
}
.contact-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin: 2.5rem 0 2rem;
}
.action-button {
display: flex;
align-items: center;
gap: 0.75rem;
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
padding: 16px 28px;
border-radius: 18px;
min-width: 220px;
justify-content: center;
}
.action-button i {
font-size: 1.2rem;
}
.action-button.call-action {
background: linear-gradient(135deg, var(--primary), #1d6ef2);
box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.3);
}
.action-button.call-action:hover {
background: linear-gradient(135deg, #1d6ef2, var(--accent));
}
.action-button.whatsapp-action {
background: linear-gradient(135deg, #25d366, #1ebe5d);
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.35);
}
.action-button.whatsapp-action:hover {
background: linear-gradient(135deg, #1ebe5d, #159c47);
}
.action-button.visit-action {
background: linear-gradient(135deg, #ff7a18, #ffb547);
box-shadow: 0 15px 35px rgba(255, 122, 24, 0.35);
}
.action-button.visit-action:hover {
background: linear-gradient(135deg, #ff9340, #ff7a18);
}
.contact-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2.5rem;
}
.meta-item {
background: rgba(255, 255, 255, 0.6);
border-radius: 18px;
padding: 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.meta-item i {
font-size: 1.5rem;
color: var(--accent);
}
.meta-item h4 {
margin-bottom: 0.3rem;
}
.pricing-reference {
background: rgba(255, 255, 255, 0.9);
border-radius: 24px;
padding: 2.5rem 3rem;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(var(--primary-rgb), 0.05);
}
.pricing-reference h3 {
color: var(--primary);
text-align: center;
margin-bottom: 2rem;
}
.price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.2rem;
margin-bottom: 1.5rem;
}
.price-item {
background: #fff;
border-radius: 18px;
padding: 1.3rem 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.price-item .item-name {
color: #555;
}
.price-item .item-price {
color: var(--primary);
}
.pricing-note {
text-align: center;
font-size: 0.9rem;
color: #777;
}
@media (max-width: 992px) {
.coming-soon-card {
padding: 2.5rem;
}
.contact-meta {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.hero {
min-height: 72vh;
padding: 110px 0 70px;
background: linear-gradient(165deg, rgba(var(--primary-rgb), 0.92), rgba(var(--accent-rgb), 0.88));
}
.hero-content {
padding: 0;
animation: none;
}
.hero-title {
font-size: 2.4rem;
margin-bottom: 0.8rem;
animation: none;
}
.hero-subtitle {
font-size: 1.05rem;
margin-bottom: 1.5rem;
animation: none;
}
.hero::before,
.hero::after {
opacity: 0;
background: none;
content: none;
animation: none;
}
.hero-overlay {
display: none;
}
.hero {
perspective: none;
transform-style: flat;
}
.hero .hero-content::before,
.hero-content::after {
content: none;
animation: none;
background: none;
}
.coming-soon-card {
padding: 2.2rem;
text-align: center;
}
.contact-actions {
flex-direction: column;
align-items: stretch;
}
.action-button {
width: 100%;
}
.contact-meta {
grid-template-columns: 1fr;
}
.meta-item {
justify-content: center;
text-align: left;
}
}
@media (max-width: 600px) {
.hero {
min-height: 65vh;
padding: 100px 0 60px;
background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.94), rgba(var(--accent-rgb), 0.9));
}
.hero::before,
.hero::after {
background: none;
opacity: 0;
}
.hero-overlay {
display: none;
}
.hero-content {
background: rgba(0, 0, 0, 0.1);
padding: 1.75rem 1.5rem;
border-radius: 18px;
gap: 1.25rem;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}
.hero-title {
font-size: 2rem;
text-shadow: none;
letter-spacing: -0.5px;
}
.hero-subtitle {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.92);
text-shadow: none;
}
.hero .cta-button {
width: 100%;
max-width: 260px;
margin: 0 auto;
display: block;
}
}
@media (max-width: 480px) {
.hero {
min-height: 60vh;
padding: 90px 0 50px;
}
.hero-content {
padding: 1.5rem;
}
.hero-title {
font-size: 1.85rem;
}
.hero-subtitle {
font-size: 0.95rem;
line-height: 1.55;
}
.coming-soon-card {
padding: 2rem;
}
.action-button {
padding: 14px 24px;
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.hero::before,
.hero::after,
.hero-content,
.hero-title,
.hero-subtitle,
.hero-small,
.hero-small .hero-content,
.hero-small .hero-title,
.hero-small .hero-subtitle {
animation: none !important;
transform: none !important;
}
.hero::before,
.hero::after {
background-position: center;
opacity: 0.35;
}
.cta-button,
.action-button,
.nav-link,
.contact-card,
.meta-item {
transition-duration: 0.2s;
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.booking-form {
padding: 80px 0;
background: #f8f9fa;
}
.booking-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
margin-bottom: 4rem;
}
.booking-info h2 {
color: var(--primary);
margin-bottom: 1rem;
}
.booking-features {
margin-top: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.feature-item i {
color: var(--accent);
font-size: 1.3rem;
margin-top: 0.2rem;
}
.feature-item h4 {
margin-bottom: 0.3rem;
color: #333;
}
.feature-item p {
font-size: 0.9rem;
}
.booking-form-container {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(var(--primary-rgb), 0.1);
position: relative;
overflow: hidden;
}
.booking-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
.form h3 {
color: var(--primary);
margin-bottom: 2rem;
text-align: center;
position: relative;
}
.form h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 2px;
}
.form-group {
margin-bottom: 2rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: #333;
position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
background: #fafafa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
background: white;
transform: translateY(-2px);
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 18px;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: relative;
overflow: hidden;
box-shadow:
0 10px 25px rgba(var(--primary-rgb), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(var(--primary-rgb), 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:active {
transform: translateY(-1px);
}
/* Form Animation */
.form-group {
animation: slideInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.form-group:nth-child(6) { animation-delay: 0.6s; }
.form-group:nth-child(7) { animation-delay: 0.7s; }
.form-group:nth-child(8) { animation-delay: 0.8s; }
.form-group:nth-child(9) { animation-delay: 0.9s; }
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced Success Modal */
.success-modal {
background: white;
padding: 3rem;
border-radius: 20px;
max-width: 500px;
margin: 20px;
text-align: center;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(var(--primary-rgb), 0.1);
animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
overflow: hidden;
}
.success-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
@keyframes successPop {
0% {
opacity: 0;
transform: scale(0.5) translateY(50px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.close-modal-btn {
background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
color: white;
border: none;
padding: 15px 35px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.close-modal-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.close-modal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.3);
}
.close-modal-btn:hover::before {
left: 100%;
}
/* ===== FULL PRICE LIST SECTION ===== */
.full-price-section {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
padding: 80px 0;
margin: 4rem 0;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.full-price-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
animation: waveFlow 15s ease-in-out infinite;
}
@keyframes waveFlow {
0%, 100% {
transform: translateX(0) scaleY(1);
}
50% {
transform: translateX(-20px) scaleY(1.1);
}
}
.price-list-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.price-list-content {
color: white;
}
.price-list-content h3 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: white;
}
.price-list-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}
.price-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 3rem;
}
.price-feature {
display: flex;
align-items: center;
gap: 0.8rem;
color: white;
}
.price-feature i {
background: rgba(255, 255, 255, 0.2);
padding: 8px;
border-radius: 50%;
font-size: 1rem;
}
.view-prices-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: white;
color: var(--primary);
padding: 18px 35px;
border-radius: 35px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.view-prices-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
transition: left 0.6s ease;
}
.view-prices-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.view-prices-btn:hover::before {
left: 100%;
}
.price-list-visual {
position: relative;
height: 400px;
}
.floating-price-cards {
position: relative;
width: 100%;
height: 100%;
}
.mini-price-card {
position: absolute;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: white;
animation: floatCard 6s ease-in-out infinite;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.mini-price-card .item {
font-size: 0.9rem;
font-weight: 500;
}
.mini-price-card .price {
font-size: 1.3rem;
font-weight: 700;
color: #FFD700;
}
.card-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.card-2 {
top: 60%;
left: 60%;
animation-delay: 1.5s;
}
.card-3 {
top: 10%;
right: 10%;
animation-delay: 3s;
}
.card-4 {
bottom: 20%;
left: 20%;
animation-delay: 4.5s;
}
@keyframes floatCard {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
/* ===== ENHANCED BOOKING EXPERIENCE ===== */
.booking-form-container {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(var(--primary-rgb), 0.1);
position: relative;
overflow: hidden;
}
.booking-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
.form h3 {
color: var(--primary);
margin-bottom: 2rem;
text-align: center;
position: relative;
}
.form h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 2px;
}
.form-group {
margin-bottom: 2rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: #333;
position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
background: #fafafa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
background: white;
transform: translateY(-2px);
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 18px;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: relative;
overflow: hidden;
box-shadow:
0 10px 25px rgba(var(--primary-rgb), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(var(--primary-rgb), 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:active {
transform: translateY(-1px);
}
/* Form Animation */
.form-group {
animation: slideInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.form-group:nth-child(6) { animation-delay: 0.6s; }
.form-group:nth-child(7) { animation-delay: 0.7s; }
.form-group:nth-child(8) { animation-delay: 0.8s; }
.form-group:nth-child(9) { animation-delay: 0.9s; }
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced Success Modal */
.success-modal {
background: white;
padding: 3rem;
border-radius: 20px;
max-width: 500px;
margin: 20px;
text-align: center;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(var(--primary-rgb), 0.1);
animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
overflow: hidden;
}
.success-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
@keyframes successPop {
0% {
opacity: 0;
transform: scale(0.5) translateY(50px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.close-modal-btn {
background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
color: white;
border: none;
padding: 15px 35px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.close-modal-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.close-modal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.3);
}
.close-modal-btn:hover::before {
left: 100%;
}
/* ===== HERO BOOKING SECTION ===== */
.hero-booking {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
padding: 120px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-booking::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
animation: waveFlow 15s ease-in-out infinite;
}
@keyframes waveFlow {
0%, 100% {
transform: translateX(0) scaleY(1);
}
50% {
transform: translateX(-20px) scaleY(1.1);
}
}
.hero-booking h1 {
color: white;
font-size: 3.5rem;
margin-bottom: 1.5rem;
animation: heroTitle 1s ease-out;
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.hero-booking p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.3rem;
max-width: 600px;
margin: 0 auto 3rem;
animation: heroSubtitle 1s ease-out 0.3s both;
}
@keyframes heroTitle {
from {
opacity: 0;
transform: translateY(-50px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes heroSubtitle {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== INTERACTIVE STEPS PROGRESS ===== */
.booking-steps {
display: flex;
justify-content: center;
margin: 4rem 0;
padding: 0 2rem;
position: relative;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
max-width: 200px;
}
.step-number {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #e9ecef, #dee2e6);
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 1rem;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
.step.active .step-number {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
transform: scale(1.1);
box-shadow:
0 10px 25px rgba(var(--primary-rgb), 0.3),
0 0 0 4px rgba(var(--primary-rgb), 0.1);
animation: pulse 2s infinite;
}
.step.completed .step-number {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
transform: scale(1.05);
}
@keyframes pulse {
0%, 100% {
box-shadow:
0 10px 25px rgba(var(--primary-rgb), 0.3),
0 0 0 4px rgba(var(--primary-rgb), 0.1);
}
50% {
box-shadow:
0 15px 35px rgba(var(--primary-rgb), 0.4),
0 0 0 8px rgba(var(--primary-rgb), 0.2);
}
}
.step-title {
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.step.active .step-title {
color: var(--primary);
}
.step-description {
font-size: 0.9rem;
color: #6c757d;
text-align: center;
transition: color 0.3s ease;
}
.step.active .step-description {
color: #495057;
}
.step::after {
content: '';
position: absolute;
top: 30px;
left: 60%;
width: 80%;
height: 2px;
background: #dee2e6;
z-index: 1;
transition: background 0.4s ease;
}
.step:last-child::after {
display: none;
}
.step.completed::after {
background: linear-gradient(90deg, #28a745, #20c997);
}
/* ===== ANIMATED ICONS ===== */
.step-number i {
transition: transform 0.3s ease;
}
.step.active .step-number i {
animation: iconBounce 1s ease-in-out infinite alternate;
}
@keyframes iconBounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-3px);
}
}
/* ===== ENHANCED FORM SECTIONS ===== */
.form-section {
opacity: 0;
transform: translateX(50px);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: none;
}
.form-section.active {
opacity: 1;
transform: translateX(0);
display: block;
}
.form-section.sliding-out {
transform: translateX(-50px);
opacity: 0;
}
/* ===== FLOATING ACTION BUTTONS ===== */
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 3rem;
gap: 1rem;
}
.nav-btn {
padding: 15px 30px;
border: none;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 0.5rem;
}
.prev-btn {
background: #f8f9fa;
color: #6c757d;
border: 2px solid #e9ecef;
}
.prev-btn:hover {
background: #e9ecef;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.next-btn {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.3);
}
.next-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.4);
}
.next-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.next-btn:hover::before {
left: 100%;
}
/* ===== PROGRESS BAR ===== */
.form-progress {
width: 100%;
height: 6px;
background: #f1f3f4;
border-radius: 3px;
margin: 2rem 0;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* ===== FLOATING TIPS ===== */
.floating-tip {
position: fixed;
background: var(--primary);
color: white;
padding: 12px 20px;
border-radius: 25px;
font-size: 0.9rem;
box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
z-index: 1000;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
max-width: 300px;
animation: tipFloat 3s ease-in-out infinite;
}
.floating-tip.show {
opacity: 1;
transform: translateY(0);
}
@keyframes tipFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* ===== ENHANCED MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
.hero-booking h1 {
font-size: 2.5rem;
}
.booking-steps {
flex-direction: column;
gap: 2rem;
}
.step::after {
display: none;
}
.form-navigation {
flex-direction: column;
}
.nav-btn {
width: 100%;
justify-content: center;
}
.booking-form-container {
margin: 1rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 1.8rem;
}
.feature-card,
.service-card,
.pricing-card {
padding: 1.5rem;
}
.booking-form-container,
.contact-form-section {
padding: 1.5rem;
}
.pricing-card.featured {
transform: none;
}
}
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feature-card,
.service-card,
.pricing-card,
.testimonial-slide {
animation: fadeInUp 0.6s ease-out;
}
/* ===== FORM VALIDATION STYLES ===== */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.form-group.success input,
.form-group.success select,
.form-group.success textarea {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
/* ===== LOADING STATES ===== */
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.submit-btn.loading {
background: #ccc;
}
.submit-btn.loading::after {
content: "";
width: 16px;
height: 16px;
margin-left: 8px;
border: 2px solid transparent;
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== THEME VARIABLES ===== */
:root {
--primary: #1E90FF; /* Blue */
--primary-rgb: 30, 144, 255;
--accent: #28a745; /* Green */
--accent-rgb: 40, 167, 69;
--bg: #ffffff;
--surface: #f8f9fa;
--text: #333333;
--muted: #666666;
}
/* Royal Navy & Gold */
body.theme-royal {
--primary: #0D47A1;
--primary-rgb: 13, 71, 161;
--accent: #F4B400;
--accent-rgb: 244, 180, 0;
}
/* Modern Teal */
body.theme-teal {
--primary: #0FB9B1;
--primary-rgb: 15, 185, 177;
--accent: #10AC84;
--accent-rgb: 16, 172, 132;
}
/* Warm Coral */
body.theme-coral {
--primary: #FF6B6B;
--primary-rgb: 255, 107, 107;
--accent: #FF9F43;
--accent-rgb: 255, 159, 67;
}
/* Purple Luxe */
body.theme-purple {
--primary: #6C5CE7;
--primary-rgb: 108, 92, 231;
--accent: #E84393;
--accent-rgb: 232, 67, 147;
}
/* Slate Minimal */
body.theme-slate {
--primary: #334155; /* Slate */
--primary-rgb: 51, 65, 85;
--accent: #14B8A6; /* Teal */
--accent-rgb: 20, 184, 166;
}
/* ===== FOOTER STYLES ===== */
.footer {
background: #1a1a1a;
color: #ffffff;
padding: 60px 0 20px;
margin-top: 4rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h3 {
color: #10AC84;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 600;
}
.footer-section p {
color: #cccccc;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 0.8rem;
}
.footer-section ul li a {
color: #cccccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #10AC84;
}
.social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #0FB9B1;
color: white;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: #10AC84;
transform: translateY(-2px);
}
.contact-info p {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
color: #cccccc;
}
.contact-info i {
color: #10AC84;
width: 20px;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 2rem;
text-align: center;
color: #999;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.footer {
padding: 40px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.social-icons {
justify-content: center;
}
}
/* ===== CONTACT PAGE STYLES ===== */
.contact-main {
padding: 80px 0;
background: linear-gradient(135deg, #f8fffe 0%, #f0fffe 100%);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-info-section h2 {
color: #0FB9B1;
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
}
.contact-info-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #0FB9B1, #10AC84);
border-radius: 2px;
}
.contact-info-section > p {
font-size: 1.1rem;
color: #666;
margin-bottom: 3rem;
line-height: 1.7;
}
.contact-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 3rem;
}
.contact-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow:
0 10px 30px rgba(15, 185, 177, 0.1),
0 0 0 1px rgba(15, 185, 177, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0FB9B1, #10AC84);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow:
0 20px 40px rgba(15, 185, 177, 0.15),
0 0 0 1px rgba(15, 185, 177, 0.1);
}
.contact-card:hover::before {
transform: scaleX(1);
}
.contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #0FB9B1, #10AC84);
border-radius: 50%;
margin-bottom: 1.5rem;
color: white;
font-size: 1.5rem;
box-shadow: 0 10px 25px rgba(15, 185, 177, 0.3);
}
.contact-details h3 {
color: #333;
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.contact-details p {
color: #0FB9B1;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.contact-details span {
color: #666;
font-size: 0.9rem;
}
.business-hours-section {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.business-hours-section h3 {
color: #333;
margin-bottom: 1.5rem;
font-size: 1.4rem;
}
.faq-section {
margin-top: 4rem;
background: white;
border-radius: 18px;
box-shadow: 0 16px 45px rgba(15, 185, 177, 0.12);
padding: 2.5rem;
}
.faq-section h3 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #0FB9B1;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
border: 1px solid rgba(15, 185, 177, 0.15);
border-radius: 14px;
background: #f9fffe;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item.open {
border-color: rgba(15, 185, 177, 0.4);
box-shadow: 0 12px 30px rgba(15, 185, 177, 0.15);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding: 1.2rem 1.5rem;
background: transparent;
border: none;
font-size: 1.1rem;
font-weight: 600;
color: #0a3d62;
cursor: pointer;
text-align: left;
}
.faq-question:focus-visible {
outline: 3px solid rgba(15, 185, 177, 0.35);
outline-offset: 2px;
}
.faq-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(15, 185, 177, 0.12);
color: #0FB9B1;
transition: transform 0.3s ease, background 0.3s ease;
}
.faq-item.open .faq-icon {
transform: rotate(180deg);
background: rgba(15, 185, 177, 0.2);
}
.faq-answer {
padding: 0 1.5rem 1.5rem;
color: #555;
line-height: 1.7;
font-size: 1rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
max-height: 240px;
}
.hours-grid {
display: grid;
gap: 1rem;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f8fffe;
border-radius: 8px;
border-left: 4px solid #0FB9B1;
}
.hours-item .day {
font-weight: 600;
color: #333;
}
.hours-item .time {
color: #0FB9B1;
font-weight: 500;
}
.contact-form-section {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(15, 185, 177, 0.05);
position: relative;
overflow: hidden;
}
.contact-form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #0FB9B1, #10AC84);
}
.contact-form h3 {
color: #333;
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.contact-form .form-group {
margin-bottom: 1.5rem;
}
.contact-form label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: #333;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
background: #fafafa;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: #0FB9B1;
box-shadow: 0 0 0 4px rgba(15, 185, 177, 0.1);
background: white;
transform: translateY(-2px);
}
.contact-form .submit-btn {
width: 100%;
background: linear-gradient(135deg, #0FB9B1, #10AC84);
color: white;
padding: 18px;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: relative;
overflow: hidden;
box-shadow:
0 10px 25px rgba(15, 185, 177, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.contact-form .submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.contact-form .submit-btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(15, 185, 177, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-form .submit-btn:hover::before {
left: 100%;
}
.map-section {
margin-top: 4rem;
text-align: center;
}
.map-section h3 {
color: #333;
font-size: 2rem;
margin-bottom: 2rem;
}
.map-container {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.map-container iframe {
width: 100%;
height: 400px;
border: none;
}
.map-info {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-align: left;
}
.map-info h4 {
color: #0FB9B1;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.map-info p {
color: #666;
line-height: 1.6;
margin-bottom: 0.8rem;
}
/* WhatsApp CTA Button */
.whatsapp-cta {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
animation: pulse 2s infinite;
}
.whatsapp-btn {
display: flex;
align-items: center;
gap: 1rem;
background: #25D366;
color: white;
padding: 15px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
}
.whatsapp-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}
.whatsapp-btn i {
font-size: 1.5rem;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-cards {
grid-template-columns: 1fr;
}
.contact-form-section {
padding: 2rem;
}
.faq-section {
margin-top: 3rem;
padding: 2rem 1.5rem;
}
.faq-question {
padding: 1rem 1.25rem;
font-size: 1rem;
}
.faq-answer {
padding: 0 1.25rem 1.25rem;
}
.contact-info-section h2 {
font-size: 2rem;
}
.map-container iframe {
height: 300px;
}
.whatsapp-cta {
bottom: 20px;
right: 20px;
}
.whatsapp-btn {
padding: 12px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 1.8rem;
}
.feature-card,
.service-card,
.pricing-card {
padding: 1.5rem;
}
.booking-form-container,
.contact-form-section {
padding: 1.5rem;
}
.pricing-card.featured {
transform: none;
}
}
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.feature-card,
.service-card,
.pricing-card,
.testimonial-slide {
animation: fadeInUp 0.6s ease-out;
}
/* ===== FORM VALIDATION STYLES ===== */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.form-group.success input,
.form-group.success select,
.form-group.success textarea {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
/* ===== LOADING STATES ===== */
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.submit-btn.loading {
background: #ccc;
}
.submit-btn.loading::after {
content: "";
width: 16px;
height: 16px;
margin-left: 8px;
border: 2px solid transparent;
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== THEME VARIABLES ===== */
:root {
--primary: #1E90FF; /* Blue */
--primary-rgb: 30, 144, 255;
--accent: #28a745; /* Green */
--accent-rgb: 40, 167, 69;
--bg: #ffffff;
--surface: #f8f9fa;
--text: #333333;
--muted: #666666;
}
/* Royal Navy & Gold */
body.theme-royal {
--primary: #0D47A1;
--primary-rgb: 13, 71, 161;
--accent: #F4B400;
--accent-rgb: 244, 180, 0;
}
/* Modern Teal */
body.theme-teal {
--primary: #0FB9B1;
--primary-rgb: 15, 185, 177;
--accent: #10AC84;
--accent-rgb: 16, 172, 132;
}
/* Warm Coral */
body.theme-coral {
--primary: #FF6B6B;
--primary-rgb: 255, 107, 107;
--accent: #FF9F43;
--accent-rgb: 255, 159, 67;
}
/* Purple Luxe */
body.theme-purple {
--primary: #6C5CE7;
--primary-rgb: 108, 92, 231;
--accent: #E84393;
--accent-rgb: 232, 67, 147;
}
/* Slate Minimal */
body.theme-slate {
--primary: #334155; /* Slate */
--primary-rgb: 51, 65, 85;
--accent: #14B8A6; /* Teal */
--accent-rgb: 20, 184, 166;
}
/* ===== FOOTER STYLES ===== */
.footer {
background: #1a1a1a;
color: #ffffff;
padding: 60px 0 20px;
margin-top: 4rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h3 {
color: #10AC84;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 600;
}
.footer-section p {
color: #cccccc;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 0.8rem;
}
.footer-section ul li a {
color: #cccccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #10AC84;
}
.social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #0FB9B1;
color: white;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background: #10AC84;
transform: translateY(-2px);
}
.contact-info p {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
color: #cccccc;
}
.contact-info i {
color: #10AC84;
width: 20px;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 2rem;
text-align: center;
color: #999;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.footer {
padding: 40px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.social-icons {
justify-content: center;
}
}
/* ===== COMPREHENSIVE MOBILE RESPONSIVENESS ===== */
/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
.container {
padding: 0 30px;
}
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2.2rem;
}
.pricing-grid,
.service-grid,
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* Enhanced Mobile Navigation (768px and below) */
@media (max-width: 768px) {
/* Navigation Improvements */
.header {
padding: 0.8rem 0;
}
.nav-container {
padding: 0 15px;
}
.logo a {
font-size: 1.5rem;
}
.hamburger {
display: flex;
}
.nav-menu {
position: fixed;
right: -100%;
top: 0;
flex-direction: column;
background: white;
width: 280px;
height: 100vh;
text-align: center;
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
padding-top: 80px;
gap: 0;
z-index: 999;
overflow-y: auto;
}
.nav-menu.active {
right: 0;
}
.nav-item {
margin: 0;
border-bottom: 1px solid #f0f0f0;
}
.nav-link {
display: block;
padding: 1.2rem 2rem;
font-size: 1.1rem;
border-radius: 0;
transition: all 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.1));
color: var(--primary);
transform: translateX(5px);
}
/* Hero Section Mobile */
.hero {
height: 100vh;
padding-top: 80px;
}
.hero-small {
height: 50vh;
min-height: 400px;
margin-top: 70px;
}
.hero-title {
font-size: 2.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
padding: 0 20px;
}
.cta-button {
padding: 15px 30px;
font-size: 0.95rem;
}
/* Container and Spacing */
.container {
padding: 0 20px;
}
.section-title {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.section-subtitle {
font-size: 1rem;
padding: 0 10px;
margin-bottom: 2rem;
}
/* Typography Mobile */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }
p {
font-size: 0.95rem;
line-height: 1.7;
}
/* Grid Layouts Mobile */
.features-grid,
.service-grid,
.pricing-grid,
.benefits-grid,
.offers-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Cards Mobile */
.feature-card,
.service-card,
.pricing-card,
.offer-card {
padding: 2rem 1.5rem;
margin: 0;
}
.pricing-card.featured {
transform: none;
scale: 1;
}
/* Forms Mobile */
.booking-content,
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.booking-form-container,
.contact-form-section {
padding: 2rem 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 16px;
font-size: 16px; /* Prevents zoom on iOS */
}
.submit-btn {
padding: 16px;
font-size: 1rem;
min-height: 54px; /* Better touch target */
}
/* Contact Cards */
.contact-cards {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.contact-card {
padding: 1.5rem;
}
/* Pricing Full List */
.full-price-section {
padding: 2rem 1rem;
}
.price-list-container {
flex-direction: column;
}
.price-list-visual {
margin-top: 2rem;
}
/* Map Section */
.map-container iframe {
height: 300px;
}
/* WhatsApp Button Mobile */
.whatsapp-cta {
bottom: 20px;
right: 20px;
}
.whatsapp-btn {
padding: 12px 20px;
font-size: 0.9rem;
}
}
/* Small Mobile Styles (480px and below) */
@media (max-width: 480px) {
/* Ultra-compact mobile optimization */
.container {
padding: 0 15px;
}
.header {
padding: 0.6rem 0;
}
.logo a {
font-size: 1.3rem;
}
.nav-menu {
width: 100%;
right: -100%;
}
.nav-menu.active {
right: 0;
}
/* Hero Extra Small */
.hero {
height: 90vh;
padding-top: 70px;
}
.hero-small {
height: 45vh;
min-height: 350px;
margin-top: 60px;
}
.hero-title {
font-size: 2rem;
padding: 0 10px;
}
.hero-subtitle {
font-size: 1rem;
padding: 0 15px;
}
.cta-button {
padding: 14px 25px;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
/* Typography Extra Small */
.section-title {
font-size: 1.8rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1rem; }
/* Cards Extra Compact */
.feature-card,
.service-card,
.pricing-card,
.offer-card,
.contact-card {
padding: 1.5rem 1.2rem;
}
.feature-icon,
.service-icon,
.pricing-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.price {
font-size: 2rem;
}
/* Forms Extra Compact */
.booking-form-container,
.contact-form-section {
padding: 1.5rem 1.2rem;
}
.form h3 {
font-size: 1.5rem;
}
.form-group label {
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 14px;
font-size: 16px;
}
/* Better Touch Targets */
button,
.cta-button,
.submit-btn,
.nav-link {
min-height: 48px;
touch-action: manipulation;
}
/* Tables Mobile */
table {
font-size: 0.85rem;
}
th, td {
padding: 0.8rem 0.5rem;
}
/* Modals Mobile */
.success-modal {
margin: 15px;
padding: 2rem 1.5rem;
}
/* Pricing Benefits/Offers */
.pricing-benefits,
.special-offers,
.service-guarantee {
padding: 2rem 1.5rem;
}
/* Map Mobile */
.map-container iframe {
height: 250px;
}
/* Footer Extra Small */
.footer-section h3 {
font-size: 1.2rem;
}
.footer-section p,
.footer-section li {
font-size: 0.9rem;
}
.social-icon {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
/* WhatsApp Button Small */
.whatsapp-btn {
padding: 10px 16px;
font-size: 0.85rem;
}
.whatsapp-btn span {
display: none; /* Hide text on very small screens */
}
.whatsapp-btn i {
margin: 0;
}
}
/* Landscape Mobile Optimization */
@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
.hero {
height: auto;
min-height: 100vh;
padding: 100px 0 50px;
}
.hero-small {
height: auto;
min-height: 70vh;
padding: 80px 0 40px;
}
.nav-menu {
height: 100vh;
overflow-y: auto;
}
}
/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
/* Better touch targets */
button,
a,
.cta-button,
.nav-link,
.submit-btn,
.hamburger {
min-width: 44px;
min-height: 44px;
touch-action: manipulation;
}
/* Remove hover effects on touch devices */
.feature-card:hover,
.service-card:hover,
.pricing-card:hover,
.contact-card:hover,
.offer-card:hover {
transform: none;
}
/* Active states instead of hover for touch */
.feature-card:active,
.service-card:active,
.pricing-card:active {
transform: scale(0.98);
}
.cta-button:active,
.submit-btn:active {
transform: scale(0.95);
}
}
/* ===== ADDITIONAL MOBILE UX IMPROVEMENTS ===== */
/* Prevent text size adjustment on orientation change in iOS */
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Smooth scrolling for iOS */
body {
-webkit-overflow-scrolling: touch;
}
/* Improve tap highlight */
* {
-webkit-tap-highlight-color: rgba(30, 144, 255, 0.2);
}
/* Remove input zoom on iOS */
@media screen and (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
font-size: 16px !important; /* Prevents zoom on iOS */
}
}
/* Better button states for mobile */
button:active,
.cta-button:active,
.submit-btn:active {
opacity: 0.8;
}
/* Smooth transitions for mobile interactions */
.nav-link,
.cta-button,
.submit-btn,
.feature-card,
.service-card,
.pricing-card {
transition: all 0.2s ease;
}
/* Improve mobile table scrolling */
@media (max-width: 768px) {
#fullPriceTable {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 100%;
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* Fix for iOS input shadows */
input,
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Smooth animations on mobile */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}