/*
Theme Name: Phuket Easy Travel
Description: Custom theme for Phuket Easy Travel website with rental services, tours, and WhatsApp booking
Version: 1.0
Author: Custom Development
*/


/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8fafc;
}

/* Header Styles */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.site-header.scrolled .top-bar {
    transform: translateY(-100%);
}

.site-header.scrolled .mobile-contact-info {
    transform: translateY(-100%);
}

.site-header.scrolled .main-navigation {
    margin-top: 0;
    transform: translateY(0);
    transition: all 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Top Bar */
.top-bar {
    background-color: #FFFFFF;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E5E7EB;
    transition: transform 0.3s ease;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #00214D;
}

.contact-info .separator {
    color: #00214D;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #00214D;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    color: #D8AE5E;
}

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 1rem;
}

.lang-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #00214D;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lang-link:hover {
    background-color: rgba(216, 174, 94, 0.1);
    color: #D8AE5E;
}

.lang-link.lang-active {
    background-color: #D8AE5E;
    color: #ffffff;
    font-weight: 600;
}

.faq-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #00214D;
    text-decoration: none;
    transition: color 0.3s ease;
}

.faq-link:hover {
    color: #D8AE5E;
}

/* Main Navigation */
.main-navigation {
    background-color: #00214D;
    padding: 1rem 0;
    transition: all 0.3s ease;
    position: relative;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 50px;
    width: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #D9D9D9;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-links a:hover {
    color: #FFFFFF;
}

/* Dropdown Menu Styles */
.nav-links .menu-item-has-children {
    position: relative;
}

.nav-links .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #00214D;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0 0 8px 8px;
    display: none;
}

.nav-links .menu-item-has-children:hover .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-links .sub-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-links .sub-menu li:last-child {
    border-bottom: none;
}

.nav-links .sub-menu li a {
    display: block;
    padding: 0.75rem 1rem;
    color: #D9D9D9;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    list-style: none;
}

.nav-links .sub-menu li {
    list-style: none;
}

.nav-links .sub-menu {
    list-style: none;
}

.nav-links .sub-menu li a:hover {
    color: #D8AE5E;
    background-color: rgba(216, 174, 94, 0.1);
}



/* Mobile Menu Toggle */
.mobile-menu-wrapper {
    display: none;
    align-items: center;
    gap: 1rem;
}

/* Mobile Contact Icon */
.mobile-contact-icon {
    display: none;
    background: none;
    border: none;
    color: #D9D9D9;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
    transition: color 0.3s ease;
    align-items: center;
    justify-content: center;
}

.mobile-contact-icon svg {
    transform: translateY(-1px);
}

.mobile-contact-icon:hover {
    color: #D8AE5E;
}

@media (max-width: 768px) {
    .mobile-contact-icon {
        display: flex;
    }
}

/* Mobile Language Switcher */
.mobile-language-switcher {
    display: none; /* Hidden on desktop */
    align-items: center;
    gap: 0.25rem;
}

.mobile-lang-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: #D9D9D9;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 28px;
    text-align: center;
}

.mobile-lang-link:hover {
    color: #D8AE5E;
    background: rgba(216, 174, 94, 0.1);
}

.mobile-lang-link.lang-active {
    color: #D8AE5E;
    background: rgba(216, 174, 94, 0.15);
    font-weight: 700;
}

/* Mobile Contact Popup */
.mobile-contact-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.mobile-contact-popup.active {
    display: block;
}

.mobile-contact-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.mobile-contact-popup-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #00214D;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.mobile-contact-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-contact-popup-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.mobile-contact-popup-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.mobile-contact-popup-close:hover {
    color: #D8AE5E;
}

.mobile-contact-popup-links {
    padding: 1rem 0 2rem;
}

.mobile-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.mobile-contact-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: #D8AE5E;
    color: #D8AE5E;
}

.mobile-contact-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #ffffff;
    transition: color 0.3s ease;
}

.mobile-contact-item:hover svg {
    color: #D8AE5E;
}

.mobile-contact-item span {
    flex: 1;
}

/* Fix iOS phone link color */
.mobile-contact-item[href^="tel:"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.mobile-contact-item[href^="tel:"]:hover {
    color: #D8AE5E !important;
    -webkit-text-fill-color: #D8AE5E !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-contact-info {
    display: none;
    background-color: #FFFFFF;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E5E7EB;
    transition: transform 0.3s ease;
}

.mobile-contact-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    color: #00214D;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #D9D9D9;
    transition: 0.3s;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Hero Video Section */
.hero-video-section {
    position: relative;
    height: 85vh;
    max-height: 85vh;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.video-fallback {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
}

/* Show fallback if video fails to load */
.video-container:not(:has(video[src])) .video-fallback {
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 33, 77, 0.7) 0%, rgba(0, 33, 77, 0.4) 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.video-overlay .container {
    width: 100%;
    max-width: none;
    padding-left: 4rem;
}

.hero-content {
    text-align: left;
    color: white;
    max-width: 700px;
    padding: 0;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    font-family: 'Inter', sans-serif;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 0.4rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

/* Button-specific reset */
button.cta-button {
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.cta-button.primary {
    background-color: #D8AE5E;
    color: white;
    border-color: #D8AE5E;
}

.cta-button.primary:hover {
    background-color: transparent;
    color: #D8AE5E;
    border-color: #D8AE5E;
    transform: translateY(-2px);
}

.cta-button.secondary {
    background-color: transparent;
    color: white;
    border-color: white;
}

.cta-button.secondary:hover {
    background-color: white;
    color: #00214D;
    transform: translateY(-2px);
}

/* Advantages Section */
.advantages-section {
    background-color: #00214D;
    padding: 4rem 0;
    color: white;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.advantage-card {
    text-align: center;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-5px);
}

.advantage-icon {
    color: #D8AE5E;
    margin-bottom: 1.5rem;
}

.advantage-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.advantage-card p {
    color: #D9D9D9;
    line-height: 1.6;
}

.advantage-highlight {
    font-size: 2rem;
    font-weight: 700;
    color: #D8AE5E;
    margin: 0.5rem 0;
}

/* Services Section */
.services-section {
    padding: 4rem 0;
    background-color: #f8fafc;
}

.service-icon {
    color: #D8AE5E;
    margin-bottom: 1rem;
}

.service-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e3a8a;
    font-family: 'Montserrat', sans-serif;
}

.service-card p {
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service-link {
    color: #D8AE5E;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.service-link:hover {
    color: #B8941F;
}

/* Hero Section (fallback) */
.hero-section {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.hero-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background-color: white;
    color: #3b82f6;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Services Grid */
.services-section {
    padding: 4rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #1e3a8a;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.service-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5e7eb;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e3a8a;
}

.service-card p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.service-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.service-link:hover {
    color: #1e40af;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Rental Categories */
.rental-categories {
    padding: 2rem 0;
}

.category-section {
    margin-bottom: 3rem;
}

.category-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e3a8a;
}

.category-description {
    color: #6b7280;
    margin-bottom: 2rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.product-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1e3a8a;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 1rem;
}

.product-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

.product-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #6b7280;
}

.product-features li::before {
    content: "✓";
    color: #059669;
    font-weight: bold;
}

.whatsapp-button {
    width: 100%;
    background: #25d366;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.whatsapp-button:hover {
    background: #128c7e;
    color: white;
}

.btn-secondary {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    margin-right: 0.5rem;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background: #d1d5db;
    color: #374151;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* No products message */
.no-products {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary {
    display: inline-block;
    background: #3b82f6;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background: #2563eb;
    color: white;
}

/* Page header */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 1rem;
}

.page-description {
    font-size: 1.25rem;
    color: #6b7280;
}

/* Footer */
.site-footer {
    background: #00214D;
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

/* Contact Info Styles */
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #D9D9D9;
}

.contact-item svg {
    color: #D8AE5E;
    flex-shrink: 0;
}

.contact-item span {
    font-size: 0.875rem;
}

/* Footer Links Styles */
.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.footer-links a {
    color: #D9D9D9;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    padding: 0.25rem 0;
}

.footer-links a:hover {
    color: #D8AE5E;
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
    }
}

/* Social Icons in Footer */
.footer-section .social-icons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-section .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #D9D9D9;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-section .social-link:hover {
    color: #D8AE5E;
    transform: translateY(-2px);
}

/* Google Rating Badge in Footer */
.footer-google-rating {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid #374151;
}

.google-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.google-rating-link:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
    border-color: #D8AE5E;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(216, 174, 94, 0.2);
}

.google-rating-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.google-icon {
    flex-shrink: 0;
}

.rating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.rating-stars {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rating-text {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .google-rating-link {
        padding: 0.6rem 1rem;
    }
    
    .rating-number {
        font-size: 1.1rem;
    }
    
    .stars svg {
        width: 14px;
        height: 14px;
    }
    
    .rating-text {
        font-size: 0.75rem;
    }
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 1rem;
    text-align: center;
    color: #9ca3af;
}

.footer-bottom p {
    color: #D8AE5E;
    font-size: 0.9rem;
    margin: 0;
}

.privacy-link {
    color: #D8AE5E;
    text-decoration: none;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Responsive Design */
/* Стили для телефонных ссылок на iPhone */
a[href^="tel:"] {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[href^="tel:"]:active {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
    
    .mobile-contact-info {
        display: block;
    }
    
    .main-navigation {
        padding: 1.5rem 0 0.75rem 0;
    }
    
    .nav-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .site-logo {
        order: 1;
    }
    
    .nav-menu {
        order: 3;
        width: 100%;
    }
    
    .mobile-menu-wrapper {
        order: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
    }
    
    .site-logo {
        display: flex;
        align-items: center;
    }
    
    .mobile-language-switcher {
        display: flex; /* Show on mobile */
    }
    
    .social-icons {
        gap: 0.5rem;
    }
    
    .social-link {
        width: 28px;
        height: 28px;
    }
    
    .nav-content {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .nav-menu {
        order: 3;
        width: 100%;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 1rem;
        display: none;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .mobile-menu-wrapper {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .hero-content h2 {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .whatsapp-button {
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .top-bar-content {
        padding: 0 0.5rem;
    }
    
    .contact-info {
        font-size: 0.75rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .social-icons {
        gap: 0.25rem;
    }
    
    .social-link {
        width: 24px;
        height: 24px;
    }
    
    .nav-content {
        padding: 0 0.5rem;
    }
    
    .logo-image {
        height: 40px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-button {
        width: 100%;
        max-width: 300px;
    }
    
    .hero-video-section {
        height: 85vh;
        max-height: 85vh;
        min-height: 500px;
    }
    
    .video-container {
        width: 100%;
        height: 100%;
    }
    
    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    
    .video-overlay {
        justify-content: center;
    }
    
    .video-overlay .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-content {
        text-align: center;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .cta-button {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Mobile Advantages */
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .advantage-card {
        padding: 1.5rem;
    }
    
    .advantage-card h3 {
        font-size: 1.25rem;
    }
    
    .advantage-highlight {
        font-size: 1.5rem;
    }
    
    /* Mobile Dropdown Styles */
    .nav-links .sub-menu {
        display: none;
        background-color: #00214D;
        margin-top: 0;
        padding: 0;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-links .menu-item-has-children.active .sub-menu {
        display: block !important;
    }
    
    /* Force show sub-menu when active */
    .nav-links li.active .sub-menu {
        display: block !important;
    }
    
    /* Sub-menu items */
    .nav-links .sub-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #00214D;
    }
    
    .nav-links .sub-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-links .sub-menu li a {
        display: block;
        padding: 0.75rem 2rem;
        color: #D9D9D9;
        font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .nav-links .sub-menu li a:hover {
        color: #D8AE5E;
        background-color: rgba(216, 174, 94, 0.1);
    }
    
    /* Mobile menu item with children */
    .nav-links .menu-item-has-children > a {
        position: relative;
        padding-right: 2rem;
    }
    
    .nav-links .menu-item-has-children > a::after {
        content: '+';
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        font-weight: bold;
        transition: transform 0.3s ease;
    }
    
    .nav-links .menu-item-has-children.active > a::after {
        transform: translateY(-50%) rotate(45deg);
    }
    
    
}

/* Page Placeholder Styles */
.page-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.page-placeholder h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    margin-bottom: 1rem;
}

.page-placeholder p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

.page-info {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #D8AE5E;
}

.page-info p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #555;
}

/* Category Page Styles */
.category-header {
    text-align: center;
    padding: 3rem 0 2rem 0;
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    margin-bottom: 3rem;
}

.category-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.category-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}


.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.category-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.category-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.category-item-content {
    padding: 2rem;
}

.category-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #00214D;
    margin-bottom: 1rem;
}

.category-item h3 a {
    color: #00214D;
    text-decoration: none;
    transition: color 0.3s ease;
}

.category-item h3 a:hover {
    color: #D8AE5E;
}

.category-item p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.category-link {
    display: inline-block;
    background: #D8AE5E;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.category-link:hover {
    background: #c49d4a;
    transform: translateY(-2px);
}

.no-content {
    text-align: center;
    padding: 3rem;
    color: #666;
    font-style: italic;
}

/* Rental Categories Grid */
.rental-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.rental-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 33, 77, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 33, 77, 0.1);
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
}

.rental-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    z-index: 0;
}

.rental-card[style*="--bg-image"]::before {
    background-image: var(--bg-image);
}

.rental-card:hover {
    box-shadow: 0 16px 48px rgba(0, 33, 77, 0.15);
}

.rental-card:hover .rental-card-overlay {
    background: rgba(0, 33, 77, 0.7);
}

.rental-card:hover::before {
    transform: scale(1.1);
}

.rental-card:hover .rental-button {
    background: linear-gradient(135deg, #B8941F, #D8AE5E);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(216, 174, 94, 0.4);
}

.rental-card:hover .rental-button svg {
    transform: translateX(4px);
}

.rental-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 33, 77, 0.6);
    transition: all 0.3s ease;
    z-index: 2;
}

.rental-card-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rental-card-header {
    margin-bottom: 1.5rem;
}

.rental-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rental-card-body {
    flex-grow: 1;
    margin-bottom: 2rem;
}

.rental-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.rental-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.feature-item svg {
    color: #D8AE5E;
    flex-shrink: 0;
}

.rental-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
}

.rental-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
    pointer-events: none;
}

.rental-button svg {
    transition: transform 0.3s ease;
}

.rental-button:hover svg {
    transform: translateX(4px);
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.no-products-content {
    max-width: 400px;
    margin: 0 auto;
}

.no-products-content svg {
    color: #D8AE5E;
    margin-bottom: 1.5rem;
}

.no-products-content h3 {
    font-size: 1.5rem;
    color: #00214D;
    margin-bottom: 1rem;
}

.no-products-content p {
    color: #666;
    line-height: 1.6;
}

/* Rental Products Grid */
.rental-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.rental-product-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 33, 77, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 33, 77, 0.1);
    position: relative;
}

.rental-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 33, 77, 0.15);
}

.product-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rental-product-card:hover .product-image img {
    transform: scale(1.05);
}

.featured-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
}

.product-content {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #00214D;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.price-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D8AE5E;
}

.product-specs {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.spec-item:last-child {
    margin-bottom: 0;
}

.spec-item svg {
    color: #D8AE5E;
    flex-shrink: 0;
}

.spec-label {
    font-weight: 600;
    color: #333;
    min-width: 60px;
}

.spec-value {
    color: #666;
    font-weight: 500;
}


/* Product Detail Page Styles */
.product-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Main Content Grid - Desktop Layout */
.product-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Booking Form in Right Column - Add margin between info and form */
.product-info-column .booking-form-block {
    margin-top: 2rem;
}

.product-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e9ecef;
}

.product-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    margin-bottom: 1rem;
}

.product-price {
    font-size: 1.5rem;
    color: #D8AE5E;
    font-weight: 600;
}

.price-label {
    font-size: 1rem;
    color: #666;
    margin-right: 0.5rem;
}

/* Product Gallery */
.product-gallery {
    margin-bottom: 3rem;
}

.main-image {
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.main-image:hover img {
    transform: scale(1.02);
}

.gallery-thumbnails {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: #D8AE5E;
    transform: scale(1.05);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info Block */
.product-info-block {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.product-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #D8AE5E;
}

.product-info-block h2 {
    font-size: 1.8rem;
    color: #00214D;
    margin: 0;
}

.product-info-block .product-price {
    font-size: 1.5rem;
    color: #D8AE5E;
    font-weight: 600;
}

.product-info-block .price-label {
    font-size: 1rem;
    color: #666;
    margin-right: 0.5rem;
}

.product-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

.product-specs h3 {
    font-size: 1.3rem;
    color: #00214D;
    margin-bottom: 1rem;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.specs-grid .spec-item {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Rental Policies Block */
.rental-policies-block {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.rental-policies-block h2 {
    font-size: 1.8rem;
    color: #00214D;
    margin-bottom: 1.5rem;
}

.policies-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.policies-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    padding-left: 1.5rem;
}

.policies-list li:last-child {
    border-bottom: none;
}

.policies-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #D8AE5E;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Booking Form Block */
.booking-form-block {
    background: linear-gradient(135deg, #00214D, #1a3a5c);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 33, 77, 0.3);
}

.booking-form-block h2 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.booking-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Force form field styles */
.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="date"],
.booking-form textarea {
    background: #ffffff !important;
    color: #333 !important;
    border: 2px solid #e9ecef !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.booking-form input[type="text"]:focus,
.booking-form input[type="tel"]:focus,
.booking-form input[type="date"]:focus,
.booking-form textarea:focus {
    outline: none !important;
    border-color: #D8AE5E !important;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.1) !important;
    background: #ffffff !important;
    color: #333 !important;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

/* Убираем стили для лейблов, так как их больше нет */

/* Booking Form Styles - Override any conflicting styles */
.booking-form .form-group input,
.booking-form .form-group textarea {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #333 !important;
    font-family: 'Inter', sans-serif !important;
}

.booking-form .form-group input[type="date"] {
    position: relative !important;
    background: #ffffff !important;
    color: #333 !important;
    cursor: pointer !important;
}

.booking-form .form-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #D8AE5E !important;
    background: #D8AE5E !important;
    border: 1px solid #D8AE5E !important;
    border-radius: 3px !important;
    padding: 2px !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    opacity: 1 !important;
    z-index: 10 !important;
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}

.booking-form .form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: #B8941F !important;
    border-color: #B8941F !important;
}

/* Кастомные плейсхолдеры для полей дат */
.booking-form .form-group input[type="date"] {
    position: relative;
}

.booking-form .form-group input[type="date"]::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    z-index: 1;
}

.booking-form .form-group input[type="date"]:not(.has-value)::before {
    display: block;
}

.booking-form .form-group input[type="date"].has-value::before,
.booking-form .form-group input[type="date"]:focus::before {
    display: none;
}

/* Стили для текста даты - скрываем нативный текст когда поле пустое */
.booking-form .form-group input[type="date"]:not(.has-value)::-webkit-datetime-edit-text,
.booking-form .form-group input[type="date"]:not(.has-value)::-webkit-datetime-edit-month-field,
.booking-form .form-group input[type="date"]:not(.has-value)::-webkit-datetime-edit-day-field,
.booking-form .form-group input[type="date"]:not(.has-value)::-webkit-datetime-edit-year-field {
    color: transparent !important;
}

/* Показываем текст даты только когда есть значение */
.booking-form .form-group input[type="date"].has-value::-webkit-datetime-edit-text,
.booking-form .form-group input[type="date"].has-value::-webkit-datetime-edit-month-field,
.booking-form .form-group input[type="date"].has-value::-webkit-datetime-edit-day-field,
.booking-form .form-group input[type="date"].has-value::-webkit-datetime-edit-year-field {
    color: #333 !important;
}

/* Убираем возможность ручного ввода */
.booking-form .form-group input[type="date"] {
    caret-color: transparent !important;
}

/* Дополнительные стили для Firefox */
.booking-form .form-group input[type="date"]:not(.has-value) {
    color: transparent !important;
}

.booking-form .form-group input[type="date"].has-value {
    color: #333 !important;
}

.booking-form .form-group input:focus,
.booking-form .form-group textarea:focus {
    outline: none !important;
    border-color: #D8AE5E !important;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.1) !important;
    background: #ffffff !important;
    color: #333 !important;
}

.booking-form .form-group input::placeholder,
.booking-form .form-group textarea::placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
}

.booking-form .form-group input::-webkit-input-placeholder,
.booking-form .form-group textarea::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.booking-form .form-group input::-moz-placeholder,
.booking-form .form-group textarea::-moz-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.booking-form .form-group input:-ms-input-placeholder,
.booking-form .form-group textarea:-ms-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.booking-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(216, 174, 94, 0.3);
}

.whatsapp-booking-btn,
.email-booking-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-booking-btn {
    background: #25D366;
    color: white;
}

.whatsapp-booking-btn:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.email-booking-btn {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: #ffffff;
}

.email-booking-btn:hover {
    background: linear-gradient(135deg, #B8941F, #D8AE5E);
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-detail {
        padding: 1rem 0;
    }
    
    .product-title {
        font-size: 2rem;
    }
    
    .product-info-block,
    .rental-policies-block,
    .booking-form-block {
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .booking-actions {
        flex-direction: column;
    }
    
    .whatsapp-booking-btn,
    .email-booking-btn {
        width: 100%;
        justify-content: center;
    }
    
    .gallery-thumbnails {
        justify-content: flex-start;
    }
    
    .gallery-thumb {
        width: 60px;
        height: 60px;
    }
    
    .product-info-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .product-info-block .product-price {
        font-size: 1.3rem;
    }
    
    .booking-form-block {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .booking-form-block h2 {
        font-size: 1.5rem;
    }
    
    /* Мобильные иконки календаря */
    .booking-form .form-group input[type="date"]::-webkit-calendar-picker-indicator {
        width: 24px !important;
        height: 24px !important;
        background-size: 18px 18px !important;
    }
}

.product-actions {
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
    margin-top: 1rem;
}

.view-details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #00214D, #1a3a5c);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.view-details-btn:hover {
    background: linear-gradient(135deg, #1a3a5c, #00214D);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 33, 77, 0.3);
}

.whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 0.9rem;
}

.whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E, #25D366);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn svg {
    flex-shrink: 0;
}

/* Contact Us Section */
/* About Us Section */
.about-us-section {
    padding: 6rem 0;
    background: #ffffff;
}

.about-us-content {
    display: flex;
    align-items: stretch;
    min-height: 500px;
    position: relative;
    overflow: visible;
}

.about-us-left {
    flex: 1;
    background: #ffffff;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.about-us-left h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.about-us-left p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #00214D;
    margin-bottom: 1.5rem;
}

.about-us-right {
    flex: 0.8;
    background: url('https://phuketeasytravel.com/wp-content/uploads/2025/11/51bd509cf2345b6221c562d1aaa4b028.jpeg') right center / cover no-repeat;
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.about-us-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 1;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.about-us-image {
    position: absolute;
    left: -80px;
    bottom: 0;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
}

.about-us-image img {
    height: 500px;
    width: auto;
    object-fit: contain;
    object-position: bottom;
}

.about-us-text {
    margin-left: 7rem;
    padding-right: 3rem;
    padding-left: 1rem;
    z-index: 3;
    position: relative;
}

.about-us-text p {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.founder-name {
    font-style: italic;
    font-size: 0.9rem;
    color: #ffffff !important;
    margin-top: 1rem;
}

/* Responsive About Us */
@media (max-width: 768px) {
    .about-us-content {
        flex-direction: column;
        overflow: visible;
        border-radius: 30px;
    }
    
    .about-us-left {
        padding: 3rem 2rem;
        background: #ffffff;
        border-radius: 30px 30px 0 0;
    }
    
    .about-us-left h2 {
        font-size: 2rem;
    }
    
    .about-us-right {
        background: url('https://phuketeasytravel.com/wp-content/uploads/2025/11/51bd509cf2345b6221c562d1aaa4b028.jpeg') center center / cover no-repeat;
        padding: 3rem 2rem;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 0 0 30px 30px;
        overflow: hidden;
    }
    
    .about-us-right::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
        border-radius: 0 0 30px 30px;
    }
    
    .about-us-image {
        display: none;
    }
    
    .about-us-text {
        margin-left: 0;
        padding-right: 0;
        order: 2;
        max-width: 100%;
    }
    
    .about-us-text p {
        text-align: center;
        margin-bottom: 1rem;
    }
}

/* Blog Styles */
.blog-header {
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.blog-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.blog-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.blog-header .category-description {
    font-size: 1.1rem;
    opacity: 0.8;
    font-style: italic;
    margin-bottom: 1rem;
}

.blog-categories-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.category-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.category-filter-btn:hover,
.category-filter-btn.active {
    background: #D8AE5E;
    color: #00214D;
    border-color: #D8AE5E;
    transform: translateY(-2px);
}

.blog-posts-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.blog-card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.blog-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-thumbnail {
    transform: scale(1.05);
}

.blog-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.blog-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 33, 77, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-card:hover .blog-card-overlay {
    opacity: 1;
}

.read-more-btn {
    background: #D8AE5E;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    background: #c49d4a;
    transform: translateY(-2px);
    color: white;
}

.blog-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-meta {
    margin-bottom: 1rem;
}

.blog-date {
    color: #D8AE5E;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-category {
    background: rgba(216, 174, 94, 0.2);
    color: #D8AE5E;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-title {
    margin-bottom: 1rem;
}

.blog-title a {
    color: #00214D;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: #D8AE5E;
}

.blog-excerpt {
    color: #6c757d;
    line-height: 1.6;
    flex-grow: 1;
}

.no-posts {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
}

.no-posts h3 {
    color: #00214D;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.no-posts p {
    color: #6c757d;
    font-size: 1.1rem;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.blog-pagination .page-numbers {
    display: inline-block;
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    background: white;
    color: #00214D;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: #00214D;
    color: white;
    border-color: #00214D;
}

/* Responsive Blog */
@media (max-width: 768px) {
    .blog-header h1 {
        font-size: 2.5rem;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .blog-card-image {
        height: 200px;
    }
    
    .blog-card-content {
        padding: 1.25rem;
    }
    
    .blog-title a {
        font-size: 1.2rem;
    }
    
    .blog-categories-filter {
        gap: 0.5rem;
    }
    
    .category-filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* Single Post Styles */
.single-post-header {
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.post-date {
    color: #D8AE5E;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-category {
    background: rgba(216, 174, 94, 0.2);
    color: #D8AE5E;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.post-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

/* Featured image styles removed */

.post-content-section {
    padding: 4rem 0;
    background: white;
}

.post-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    color: #00214D;
    font-family: 'Montserrat', sans-serif;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

.post-tags {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.post-tags h4 {
    color: #00214D;
    margin-bottom: 1rem;
}

.tag {
    display: inline-block;
    background: #f8f9fa;
    color: #00214D;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #D8AE5E;
    color: white;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.post-navigation a {
    color: #00214D;
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.post-navigation a:hover {
    background: #00214D;
    color: white;
    border-color: #00214D;
}

.related-posts-section {
    background: #f8f9fa;
    padding: 4rem 0;
}

.related-posts-section h3 {
    color: #00214D;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-post-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.related-post-image {
    height: 200px;
    overflow: hidden;
}

.related-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-thumbnail {
    transform: scale(1.05);
}

.related-post-content {
    padding: 1.5rem;
}

.related-post-content h4 {
    margin-bottom: 0.5rem;
}

.related-post-content h4 a {
    color: #00214D;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.related-post-content h4 a:hover {
    color: #D8AE5E;
}

.related-post-date {
    color: #D8AE5E;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Responsive Single Post */
@media (max-width: 768px) {
    .post-title {
        font-size: 2.5rem;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    /* Featured image mobile styles removed */
    
    .post-content {
        font-size: 1rem;
    }
    
    .post-navigation {
        flex-direction: column;
        gap: 1rem;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

.contact-us-section {
    background: #ffffff;
    padding: 4rem 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #e0e0e0;
}

.contact-us-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.contact-us-text {
    flex: 1;
    padding-right: 2rem;
}

.contact-us-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #00214D;
}

.contact-us-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333333;
}

.contact-us-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.contact-us-btn {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
}

.contact-us-btn:hover {
    background: linear-gradient(135deg, #B8941F, #D8AE5E);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(216, 174, 94, 0.4);
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00214D;
    font-size: 1.1rem;
    font-weight: 500;
}

.contact-phone svg {
    color: #D8AE5E;
}

@media (max-width: 768px) {
    .contact-us-content {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-us-text {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .contact-us-actions {
        align-items: center;
    }
}

/* Contact Modal */
.contact-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #00214D;
    margin: 5% auto;
    padding: 0;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #D8AE5E;
}

.modal-body {
    display: flex;
    min-height: 400px;
    height: 100%;
}

.modal-left {
    flex: 1;
    padding: 2rem;
    background: #00214D;
    border-radius: 16px 0 0 16px;
}

.modal-left h3 {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 600;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group input,
.form-group textarea {
    padding: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #D8AE5E;
    background: rgba(255, 255, 255, 0.15);
}

.submit-btn {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #B8941F, #D8AE5E);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
}

.modal-right {
    flex: 1;
    padding: 2rem;
    background: linear-gradient(135deg, #1a3a5c, #00214D);
    border-radius: 0 16px 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 100%;
}

.contact-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.person-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #D8AE5E;
    box-shadow: 0 8px 24px rgba(216, 174, 94, 0.3);
}

.person-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-info h4 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.person-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.modal-social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.modal-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s ease;
    text-decoration: none;
}

.modal-social-link:hover {
    background: #D8AE5E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-us-content h2 {
        font-size: 2rem;
    }
    
    .contact-us-content p {
        font-size: 1rem;
    }
    
    .modal-content {
        width: 95%;
        margin: 2% auto;
        max-height: 85vh;
    }
    
    .modal-body {
        flex-direction: column;
    }
    
    .modal-left,
    .modal-right {
        padding: 2rem;
    }
    
    .modal-left {
        border-radius: 16px 16px 0 0;
    }
    
    .modal-right {
        border-radius: 0 0 16px 16px;
    }
    
    .person-image {
        width: 100px;
        height: 100px;
    }
    
    .modal-social-links {
        gap: 0.75rem;
    }
    
    .modal-social-link {
        width: 35px;
        height: 35px;
    }
}

/* Activities Grid */
.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.activity-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.activity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #D8AE5E;
}

.activity-card-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    background: transparent;
}

.activity-icon,
.tour-icon,
.villa-icon {
    display: none;
}

.activity-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
}

.activity-card-content {
    padding: 0 2rem 1rem 2rem;
}

.activity-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.activity-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.activity-card-footer {
    padding: 1rem 2rem 2rem 2rem;
    background: transparent;
}

.activity-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 33, 77, 0.2);
}

.activity-button:hover {
    background: linear-gradient(135deg, #D8AE5E 0%, #c49d4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 174, 94, 0.3);
    color: white;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.service-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #D8AE5E;
}

.service-card-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    background: transparent;
}

.service-icon {
    display: none;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
}

.service-card-content {
    padding: 0 2rem 1rem 2rem;
}

.service-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.service-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.service-card-footer {
    padding: 1rem 2rem 2rem 2rem;
    background: transparent;
}

.service-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 33, 77, 0.2);
}

.service-button:hover {
    background: linear-gradient(135deg, #D8AE5E 0%, #c49d4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 174, 94, 0.3);
    color: white;
}

/* Tours Grid */
.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.tour-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}
.tours-grid .tour-card {
    background: transparent;
}

.tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #D8AE5E;
}

.tour-card-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    background: transparent;
}

.tour-icon {
    display: none;
}

.tour-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
}

.tour-card-content {
    padding: 0 2rem 1rem 2rem;
}

.tour-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tour-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tour-card-footer {
    padding: 1rem 2rem 2rem 2rem;
    background: transparent;
}

.tour-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 33, 77, 0.2);
}

.tour-button:hover {
    background: linear-gradient(135deg, #D8AE5E 0%, #c49d4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 174, 94, 0.3);
    color: white;
}

/* Villas Grid */
.villas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.villa-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}
.villas-grid .villa-card {
    background: transparent;
}

.villa-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #D8AE5E;
}

.villa-card-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    background: transparent;
}

.villa-icon {
    display: none;
}

.villa-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
}

.villa-card-content {
    padding: 0 2rem 1rem 2rem;
}

.villa-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.villa-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.villa-card-footer {
    padding: 1rem 2rem 2rem 2rem;
    background: transparent;
}

.villa-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #00214D 0%, #1a3a5c 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 33, 77, 0.2);
}

.villa-button:hover {
    background: linear-gradient(135deg, #D8AE5E 0%, #c49d4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 174, 94, 0.3);
    color: white;
}

.no-content-wrapper {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.no-content-wrapper svg {
    color: #D8AE5E;
    margin-bottom: 1.5rem;
}

.no-content-wrapper h3 {
    font-size: 1.5rem;
    color: #00214D;
    margin-bottom: 1rem;
}

.no-content-wrapper p {
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .rental-categories-grid,
    .activities-grid,
    .services-grid,
    .tours-grid,
    .villas-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .rental-card-header,
    .rental-card-content,
    .rental-card-footer,
    .activity-card-header,
    .activity-card-content,
    .activity-card-footer,
    .service-card-header,
    .service-card-content,
    .service-card-footer,
    .tour-card-header,
    .tour-card-content,
    .tour-card-footer,
    .villa-card-header,
    .villa-card-content,
    .villa-card-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .rental-icon,
    .activity-icon,
    .service-icon,
    .tour-icon,
    .villa-icon {
        width: 60px;
        height: 60px;
    }
    
    .rental-icon svg,
    .activity-icon svg,
    .service-icon svg,
    .tour-icon svg,
    .villa-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .rental-title,
    .activity-title,
    .service-title,
    .tour-title,
    .villa-title {
        font-size: 1.3rem;
    }
}

/* Mobile Layout for Product Detail - Stack everything vertically */
@media (max-width: 768px) {
    .product-main-grid {
        display: block;
        gap: 0;
        margin-bottom: 2rem;
    }
    
    .product-gallery-column {
        margin-bottom: 2rem;
    }
    
    .product-info-column .booking-form-block {
        margin-top: 1.5rem;
    }
    
    /* Mobile Gallery Adjustments */
    /* Убрали ограничение высоты для мобильных */
    
    .gallery-thumb {
        width: 60px;
        height: 60px;
    }
    
    /* Mobile adjustments for product cards */
    .rental-product-card {
        height: auto; /* allow content below image to be visible */
    }
    
    .product-image {
        height: 150px; /* smaller image height on mobile */
    }
    
    .product-content {
        padding: 1rem;
    }
    
    .product-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .product-specs {
        padding: 0.75rem;
    }
    
    .spec-item {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; }
.bg-white { background-color: white; }
.rounded { border-radius: 0.375rem; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Scoped card enhancements for rental category pages only */
body.tax-rental_category .rental-product-card { position: relative; }

/* Taller image on category cards */
body.tax_rental_category .product-image,
body.tax-rental_category .product-image { height: 360px; }

/* Darken + blur image on hover, only within category */
body.tax-rental_category .product-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
body.tax-rental_category .rental-product-card:hover .product-image::after { opacity: 1; }
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(3px) brightness(0.85); }

/* Show title + specs over image on hover (do not affect single pages) */
body.tax-rental_category .product-title,
body.tax-rental_category .product-specs {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none; /* keep button below clickable */
    transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Centered within image block */
body.tax-rental_category .product-title { top: 50%; transform: translateY(-100px); margin: 0; font-size: 1.35rem; }
body.tax-rental_category .product-specs { top: 50%; transform: translateY(-20px); display: flex; justify-content: center; gap: 1rem; }

body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs { opacity: 1; }

/* Keep price and button below image */
body.tax-rental_category .product-price { margin-top: 0.5rem; }

@media (max-width: 768px) {
    body.tax-rental_category .product-image { height: 360px; }
    body.tax-rental_category .product-title { font-size: 1rem; transform: translateY(-55px); }
    body.tax-rental_category .product-specs { gap: 0.6rem; font-size: 0.9rem; }
}

/* Centered price and Forum font on rental category cards */
body.tax-rental_category .product-price {
    display: block;
    text-align: center;
    margin-top: 1rem;
}
body.tax-rental_category .price-label,
body.tax-rental_category .price-value {
    font-family: 'Forum', serif;
    line-height: 1.1;
}
body.tax-rental_category .price-label {
    font-weight: 400;
    color: #666666;
    margin-right: 0.35rem;
}
body.tax-rental_category .price-value {
    font-weight: 500; /* a bit thinner than before */
    color: #D8AE5E;
}

/* Increase mobile image height for category cards */
@media (max-width: 768px) {
    body.tax-rental_category .product-image { height: 240px; }
}

body.tax-rental_category .price-label,
body.tax-rental_category .price-value {
    font-family: inherit; /* revert to default (Inter) */
}

/* Fine-tune price appearance on category cards */
body.tax-rental_category .price-value { font-weight: 600; font-size: 1.25rem; }

/* Increase mobile image height further so image fills more */
@media (max-width: 768px) {
    body.tax-rental_category .product-image { height: 280px; }
}

/* Mobile: make image taller so it fills more */
@media (max-width: 768px) {
    body.tax-rental_category .product-image { height: 320px; }
}

/* Minimal overlay typography on hover (category pages only) */
body.tax-rental_category .rental-product-card:hover .product-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: none;
}
body.tax-rental_category .rental-product-card:hover .product-specs {
    gap: 0.7rem;
    font-size: 0.95rem;
    text-shadow: none;
}

/* Blur/dim image and price on hover, keep button clickable and visually clean */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) brightness(0.82); }
body.tax-rental_category .rental-product-card:hover .product-image::after { opacity: 1; }
body.tax-rental_category .rental-product-card:hover .product-price { opacity: 0.6; filter: blur(1px); transition: opacity .2s ease; }

/* Hover overlay refinements: bigger title, vertical specs, no box */
body.tax-rental_category .rental-product-card:hover .product-title {
    font-size: 1.6rem; /* larger title on hover */
    font-weight: 700;
}

/* Position specs just below the title within image area */
body.tax-rental_category .product-specs {
    flex-direction: column; /* stack items vertically */
    align-items: center;
    gap: 0.5rem;
}

/* Minimal spec items (icon + text inline) */
body.tax-rental_category .product-specs .spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff; /* white over dark overlay */
    margin: 0; /* remove extra spacing */
}
body.tax-rental_category .product-specs .spec-label { color: #ffffff; font-weight: 600; }
body.tax-rental_category .product-specs .spec-value { color: #D8AE5E; font-weight: 600; }

/* Ensure overlay itself has no background box (only the dimmed image layer) */
body.tax-rental_category .rental-product-card:hover .product-specs,
body.tax-rental_category .rental-product-card:hover .product-title { background: transparent; box-shadow: none; }

/* Darken lower content area (price zone) on hover, keep button clean */
body.tax-rental_category .product-content { position: relative; }
body.tax-rental_category .product-content::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    bottom: 6.5rem; /* leave space for the button area */
    background: rgba(0,0,0,0);
    border-radius: 0 0 16px 16px;
    pointer-events: none;
    transition: background 0.25s ease;
    z-index: 1;
}
body.tax-rental_category .rental-product-card:hover .product-content::before {
    background: rgba(0,0,0,0.35);
}
/* Ensure text sits above the dark layer */
body.tax-rental_category .product-price { position: relative; z-index: 2; }
body.tax-rental_category .product-actions { position: relative; z-index: 3; }

/* Remove any panel/border from specs overlay */
body.tax-rental_category .product-specs { background: transparent !important; border: none !important; box-shadow: none !important; }

/* Center overlay and full-card dim/blur on hover (category pages) */
body.tax-rental_category .rental-product-card { position: relative; }

/* Remove earlier partial overlay on content */
body.tax-rental_category .product-content::before { display: none !important; }

/* Full-card dark overlay */
body.tax-rental_category .rental-product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2; /* below centered text, above base content */
}
body.tax-rental_category .rental-product-card:hover::after { opacity: 1; }

/* Keep base content layers under overlay, button above */
body.tax-rental_category .product-image,
body.tax-rental_category .product-content { position: relative; z-index: 1; }
body.tax-rental_category .product-actions { position: relative; z-index: 4; }

/* Center title and specs in the card */
body.tax-rental_category .product-title,
body.tax-rental_category .product-specs {
    left: 50%;
    transform: translate(-50%, 0);
}
body.tax-rental_category .product-title { position: absolute; top: 45%; transform: translate(-50%, -60%); text-align: center; }
body.tax-rental_category .product-specs { position: absolute; top: 55%; transform: translate(-50%, -10%); text-align: center; }

/* Ensure they sit above the overlay */
body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs { opacity: 1; z-index: 5; }

/* Blur both image and lower content except the button */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) brightness(0.82); }
body.tax-rental_category .rental-product-card:hover .product-price,
body.tax-rental_category .rental-product-card:hover .product-content > *:not(.product-actions) { opacity: 0.6; filter: blur(1px); transition: opacity .2s ease; }

/* Full-card hover dim with exclusions (category pages) */
body.tax-rental_category .rental-product-card { position: relative; }
body.tax-rental_category .rental-product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2; /* sits under overlays/text/button */
}
body.tax-rental_category .rental-product-card:hover::after { opacity: 1; }

/* Layering: base content below, button/text above */
body.tax-rental_category .product-image,
body.tax-rental_category .product-content { position: relative; z-index: 1; }
body.tax-rental_category .product-actions { position: relative; z-index: 6; }

/* Center overlays */
body.tax-rental_category .product-title,
body.tax-rental_category .product-specs {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
}
body.tax-rental_category .product-title { top: 45%; font-size: 1.6rem; font-weight: 700; }
body.tax-rental_category .product-specs { top: 58%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs { opacity: 1; z-index: 5; }

/* Blur rule: image and regular content blur, but NOT title/specs/button */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) brightness(0.82); }
body.tax-rental_category .rental-product-card:hover .product-content > *:not(.product-actions):not(.product-title):not(.product-specs) {
    opacity: 0.6;
    filter: blur(1px);
    transition: opacity .2s ease;
}

/* Make product-content non-positioned so overlays can anchor to card */
body.tax-rental_category .product-content { position: static; z-index: auto; }

/* Full-card overlay (already added) remains; raise z-index for safe stacking */
body.tax-rental_category .rental-product-card::after { z-index: 3; }
body.tax-rental_category .product-actions { position: relative; z-index: 6; }

/* Center title/specs in the middle of the entire card */
body.tax-rental_category .rental-product-card .product-title,
body.tax-rental_category .rental-product-card .product-specs {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
body.tax-rental_category .rental-product-card .product-title { top: 44%; font-size: 1.7rem; font-weight: 700; }
body.tax-rental_category .rental-product-card .product-specs { top: 58%; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs { opacity: 1; z-index: 7; }

/* Uniform blur: blur image and all direct content children except overlays and button */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) brightness(0.82); }
body.tax-rental_category .rental-product-card:hover .product-content > *:not(.product-actions):not(.product-title):not(.product-specs) {
    filter: blur(1.5px);
    opacity: 0.6;
}

/* Final hover overrides to ensure uniform blur/dim and keep overlays clean */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) !important; }
body.tax-rental_category .rental-product-card:hover .product-content > * { filter: blur(1.5px) !important; opacity: 0.6 !important; }
body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs,
body.tax-rental_category .rental-product-card:hover .product-actions { filter: none !important; opacity: 1 !important; }

/* Rental category: center overlays within image area and blur only image */
/* Disable full-card overlay */
body.tax-rental_category .rental-product-card::after { display: none !important; }

/* Image overlay (dark layer) */
body.tax-rental_category .product-image { position: relative; }
body.tax-rental_category .product-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
body.tax-rental_category .rental-product-card:hover .product-image::after { opacity: 1; }

/* Blur only the image */
body.tax-rental_category .rental-product-card:hover .product-image img { filter: blur(4px) !important; }
/* Ensure lower content is not blurred */
body.tax-rental_category .rental-product-card:hover .product-content > * { filter: none !important; opacity: 1 !important; }

/* Position title/specs relative to image block height */
/* Desktop (image height: 360px) */
body.tax-rental_category .rental-product-card .product-title,
body.tax-rental_category .rental-product-card .product-specs { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 5; }
body.tax-rental_category .rental-product-card .product-title { top: 180px; /* center of 360px */ font-size: 1.7rem; font-weight: 700; }
body.tax-rental_category .rental-product-card .product-specs { top: 230px; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
body.tax-rental_category .rental-product-card:hover .product-title,
body.tax-rental_category .rental-product-card:hover .product-specs { opacity: 1; }

/* Mobile (image height: 360px too; keep same positions). If changed later, adjust here */
@media (max-width: 768px) {
    body.tax-rental_category .rental-product-card .product-title { top: 180px; font-size: 1.5rem; }
    body.tax-rental_category .rental-product-card .product-specs { top: 230px; }
}

/* Nudge title/specs slightly higher (center within 360px image) */
body.tax-rental_category .rental-product-card .product-title { top: 165px; }
body.tax-rental_category .rental-product-card .product-specs { top: 215px; }

/* Mobile adjustments (same image height currently) */
@media (max-width: 768px) {
    body.tax-rental_category .rental-product-card .product-title { top: 165px; }
    body.tax-rental_category .rental-product-card .product-specs { top: 215px; }
}

/* Reduce gap between image and lower content (price) */
body.tax-rental_category .product-price { margin-top: 0.25rem; }

/* Raise title/specs higher within the image */
body.tax-rental_category .rental-product-card .product-title { top: 140px; }
body.tax-rental_category .rental-product-card .product-specs { top: 190px; }

@media (max-width: 768px) {
    body.tax-rental_category .rental-product-card .product-title { top: 140px; }
    body.tax-rental_category .rental-product-card .product-specs { top: 190px; }
}

/* Move overlay content closer to the top edge */
body.tax-rental_category .rental-product-card .product-title { top: 110px; }
body.tax-rental_category .rental-product-card .product-specs { top: 160px; }

@media (max-width: 768px) {
    body.tax-rental_category .rental-product-card .product-title { top: 110px; }
    body.tax-rental_category .rental-product-card .product-specs { top: 160px; }
}

/* Activities and Services cards with background images (like rental) */
.activities-grid .activity-card,
.services-grid .service-card,
.tours-grid .tour-card,
.villas-grid .villa-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 33, 77, 0.1);
    border: 1px solid rgba(0, 33, 77, 0.08);
    background: transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.activities-grid .activity-card::before,
.services-grid .service-card::before,
.tours-grid .tour-card::before,
.villas-grid .villa-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.35s ease;
    z-index: 1;
    opacity: 0;
}
.activities-grid .activity-card[style*="--bg-image"]::before,
.services-grid .service-card[style*="--bg-image"]::before,
.tours-grid .tour-card[style*="--bg-image"]::before,
.villas-grid .villa-card[style*="--bg-image"]::before {
    opacity: 1;
}
.activities-grid .activity-card::after,
.services-grid .service-card::after,
.tours-grid .tour-card::after,
.villas-grid .villa-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
    z-index: 2;
    opacity: 0;
}
.activities-grid .activity-card[style*="--bg-image"]::after,
.services-grid .service-card[style*="--bg-image"]::after,
.tours-grid .tour-card[style*="--bg-image"]::after,
.villas-grid .villa-card[style*="--bg-image"]::after {
    opacity: 1;
}
.activities-grid .activity-card:hover::before,
.services-grid .service-card:hover::before,
.tours-grid .tour-card:hover::before,
.villas-grid .villa-card:hover::before { transform: scale(1.04); }

/* Content on top */
.activity-card-header, .activity-card-content, .activity-card-footer,
.service-card-header, .service-card-content, .service-card-footer,
.tour-card-header, .tour-card-content, .tour-card-footer,
.villa-card-header, .villa-card-content, .villa-card-footer { position: relative; z-index: 3; }

/* Header and title styling to be readable over image */
.activity-card-header, .service-card-header, .tour-card-header, .villa-card-header { padding: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.activity-title, .service-title, .tour-title, .villa-title { color: #fff; margin: 0; font-size: 1.25rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.activity-icon svg, .service-icon svg, .tour-icon svg, .villa-icon svg { color: #D8AE5E; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }

/* Body */
.activity-card-content, .service-card-content, .tour-card-content, .villa-card-content { padding: 0 1.25rem 1rem 1.25rem; }
.activity-description, .service-description, .tour-description, .villa-description { color: #eaeff6; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.activity-features .feature-item span, .service-features .feature-item span, .tour-features .feature-item span, .villa-features .feature-item span { color: #f3f6fb; }

/* Footer button spacing */
.activity-card-footer, .service-card-footer, .tour-card-footer, .villa-card-footer { padding: 0 1.25rem 1.25rem 1.25rem; }

/* Ensure card has a minimum image area height like rental */
.activities-grid .activity-card, .services-grid .service-card, .tours-grid .tour-card, .villas-grid .villa-card { min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; }

@media (max-width: 768px) {
    .activities-grid .activity-card, .services-grid .service-card, .tours-grid .tour-card, .villas-grid .villa-card { min-height: 280px; }
    .activity-title, .service-title, .tour-title, .villa-title { font-size: 1.05rem; }
}

/* Unify title style with rental cards */
.activities-grid .activity-title,
.services-grid .service-title,
.services-grid .service-card h3.service-title,
.tours-grid .tour-title,
.villas-grid .villa-title {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    letter-spacing: 0.01em;
    text-shadow: 0 6px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    margin-bottom: 0 !important;
}

/* Unify buttons with rental button style */
.activity-button, .service-button, .tour-button, .villa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0.9rem 1.25rem;
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, #0E2A57, #133E80);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(16, 42, 87, 0.35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.activity-button:hover, .service-button:hover, .tour-button:hover, .villa-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(16, 42, 87, 0.45);
}

.activity-button svg, .service-button svg, .tour-button svg, .villa-button svg { stroke: currentColor; }

/* Activities page: remove category header background */
body.page-template-page-activities .category-header { background: transparent; box-shadow: none; }

/* Tighten top spacing in cards */
.activities-grid .activity-card .activity-card-header,
.services-grid .service-card .service-card-header { padding-top: 0.6rem; }
.activities-grid .activity-card .activity-card-content,
.services-grid .service-card .service-card-content { padding-top: 0.5rem; }

/* Full clickable area for cards */
.card-full-link {
    position: absolute;
    inset: 0;
    z-index: 4; /* under the main CTA button */
}
.activity-card-footer .activity-button { position: relative; z-index: 6; }

/* Force remove background for Activities page header */
body.page-id-44 .category-header,
body.page-template-page-activities .category-header,
body.page-template-page-activities-php .category-header {
    background: transparent !important;
    box-shadow: none !important;
}

/* Bring activity/service card title closer to the top edge */
.activities-grid .activity-card .activity-title,
.services-grid .service-card .service-title { margin-top: 0.1rem; }

/* Activities page header text color to brand blue */
body.page-id-44 .category-header h1,
body.page-id-44 .category-header p,
body.page-template-page-activities .category-header h1,
body.page-template-page-activities .category-header p { color: #00214D !important; }

/* Match rental top spacing (2rem) for Activities & Services cards */
.activities-grid .activity-card .activity-card-header,
.services-grid .service-card .service-card-header,
.tours-grid .tour-card .tour-card-header,
.villas-grid .villa-card .villa-card-header { padding: 2rem 1.25rem 0 1.25rem !important; }
.activities-grid .activity-card .activity-card-content,
.services-grid .service-card .service-card-content,
.tours-grid .tour-card .tour-card-content,
.villas-grid .villa-card .villa-card-content { padding: 0 1.25rem 1rem 1.25rem !important; }

/* Make activity/service buttons exactly like rental buttons */
.activity-button, .service-button, .tour-button, .villa-button {
    background: linear-gradient(135deg, #102b59, #194182) !important;
    box-shadow: 0 8px 24px rgba(16, 42, 87, 0.35);
}
.activity-button:hover, .service-button:hover, .tour-button:hover, .villa-button:hover {
    background: linear-gradient(135deg, #194182, #2457a0) !important;
}

/* Golden CTA buttons like on rental cards */
.activity-button, .service-button, .tour-button, .villa-button {
    background: linear-gradient(135deg, #D8AE5E, #B8941F) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(216, 174, 94, 0.35);
}
.activity-button:hover, .service-button:hover, .tour-button:hover, .villa-button:hover {
    background: linear-gradient(135deg, #C99D46, #A47E1B) !important;
    box-shadow: 0 12px 34px rgba(216, 174, 94, 0.45);
}

/* Align activity/service card content from the top (not bottom) */
.activities-grid .activity-card, .services-grid .service-card, .tours-grid .tour-card, .villas-grid .villa-card { display: flex; flex-direction: column; justify-content: flex-start !important; }

/* Remove any default margin on titles and tighten header spacing */
.activity-title, .service-title, .tour-title, .villa-title { margin: 0 !important; }
.activities-grid .activity-card .activity-card-header,
.services-grid .service-card .service-card-header,
.tours-grid .tour-card .tour-card-header,
.villas-grid .villa-card .villa-card-header { padding: 0.75rem 1.25rem 0 1.25rem !important; }

/* Slightly larger top spacing for card titles */
.activities-grid .activity-card .activity-card-header,
.services-grid .service-card .service-card-header,
.tours-grid .tour-card .tour-card-header,
.villas-grid .villa-card .villa-card-header { padding: 1.25rem 1.25rem 0 1.25rem !important; }

/* Keep CTA footer at the bottom of the card */
.activity-card-footer, .service-card-footer, .tour-card-footer, .villa-card-footer { margin-top: auto; padding: 0 1.25rem 1.25rem 1.25rem; }

/* ===================================
   VILLA ARCHIVE CARDS (NEW DESIGN)
   =================================== */
.villas-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.villa-archive-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 33, 77, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 33, 77, 0.05);
}

.villa-archive-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 33, 77, 0.15);
}

.villa-card-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image Section */
.villa-card-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.villa-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

/* Gallery slider on hover */
.villa-card-image {
    position: relative;
}

.villa-card-image .gallery-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.villa-card-image .gallery-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.villa-card-image .gallery-images img:first-child {
    opacity: 1;
}

/* Gallery indicators */
.villa-gallery-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Desktop: show on hover, Mobile: always visible (via JS) */
.villa-archive-card:hover .villa-gallery-indicators {
    opacity: 1;
}

@media (max-width: 768px) {
    .villa-gallery-indicators {
        opacity: 1 !important;
    }
}

.villa-gallery-indicators .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.villa-gallery-indicators .indicator.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}

.villa-card-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.villa-card-no-image .icon {
    font-size: 64px;
    opacity: 0.3;
}

/* Price Badge - COMPACT */
.villa-card-price {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #D8AE5E 0%, #C9A04E 100%);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(216, 174, 94, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.villa-card-price .price-from {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.villa-card-price .price-amount {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 2px 0;
}

.villa-card-price .price-period {
    font-size: 0.65rem;
    opacity: 0.85;
}

/* Location Badge */
.villa-card-location {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 33, 77, 0.9);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 2;
}

.villa-card-location .location-icon {
    font-size: 14px;
}

/* Card Body */
.villa-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.villa-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00214D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

/* Main Specs - 3 IN ROW (Desktop) */
.villa-card-specs {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.villa-card-specs .spec-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: center;
}

.villa-card-specs .spec-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.villa-card-specs .spec-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
}

.villa-card-specs .spec-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #00214D;
    line-height: 1;
}

.villa-card-specs .spec-label {
    font-size: 0.7rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Features/Amenities */
.villa-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.villa-card-features .feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #00214D;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(0, 33, 77, 0.08);
}

.villa-card-features .feature-icon {
    font-size: 16px;
}

/* CTA Button */
.villa-card-cta {
    margin-top: auto;
    width: 100%;
}

.villa-card-cta .cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(135deg, #00214D 0%, #003875 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 33, 77, 0.2);
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
}

.villa-card-cta .cta-button:hover {
    background: linear-gradient(135deg, #003875 0%, #00214D 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 33, 77, 0.3);
}

.villa-card-cta .cta-button svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.villa-card-cta .cta-button:hover svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1200px) {
    .villas-archive-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .villas-archive-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .villa-card-image {
        height: 240px;
    }
    
    .villa-card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
    }
    
    .villa-card-title {
        font-size: 1.3rem;
        margin-bottom: 16px;
    }
    
    /* Mobile: All specs in ONE row - compact */
    .villa-card-specs {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    
    .villa-card-specs .spec-item {
        flex: 1;
        padding: 8px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    
    .villa-card-specs .spec-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        width: 100%;
    }
    
    .villa-card-specs .spec-icon {
        font-size: 20px;
        margin-bottom: 4px;
        line-height: 1;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .villa-card-specs .spec-value {
        font-size: 1.1rem;
    }
    
    .villa-card-specs .spec-label {
        font-size: 0.65rem;
        line-height: 1.1;
    }
    
    .villa-card-price {
        top: 12px;
        right: 12px;
        padding: 6px 10px;
    }
    
    .villa-card-price .price-from,
    .villa-card-price .price-period {
        font-size: 0.6rem;
    }
    
    .villa-card-price .price-amount {
        font-size: 1.1rem;
    }
    
    .villa-card-location {
        bottom: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    /* Keep specs in one row even on small mobile */
    .villa-card-specs {
        gap: 6px;
        align-items: stretch;
    }
    
    .villa-card-specs .spec-item {
        padding: 6px 4px;
        justify-content: flex-start;
    }
    
    .villa-card-specs .spec-icon {
        font-size: 18px;
        height: 18px;
        line-height: 1;
    }
    
    .villa-card-specs .spec-value {
        font-size: 1rem;
    }
    
    .villa-card-specs .spec-label {
        font-size: 0.6rem;
    }
    
    .villa-card-features .feature-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* Services page header: remove background and set brand text color */
body.page-id-7 .category-header,
body.page-template-page-services .category-header,
body.page-template-page-services-php .category-header { background: transparent !important; box-shadow: none !important; }
body.page-id-7 .category-header h1,
body.page-id-7 .category-header p,
body.page-template-page-services .category-header h1,
body.page-template-page-services .category-header p { color: #00214D !important; }

/* Ensure service CTA is above full-card link overlay */
.service-card-footer .service-button,
.tour-card-footer .tour-button,
.villa-card-footer .villa-button { position: relative; z-index: 6; }

/* Rental pages header: same style as Activities */
/* Apply to archive and taxonomy pages */
body.post-type-archive-rental_product .main-content .category-header,
body.archive.rental_product .main-content .category-header,
body.tax-rental_category .main-content .category-header,
body.taxonomy-rental_category .main-content .category-header,
.post-type-archive-rental_product .main-content .category-header,
.archive.rental_product .main-content .category-header,
.tax-rental_category .main-content .category-header {
    background: transparent !important;
    box-shadow: none !important;
}
body.post-type-archive-rental_product .main-content .category-header h1,
body.post-type-archive-rental_product .main-content .category-header p,
body.archive.rental_product .main-content .category-header h1,
body.archive.rental_product .main-content .category-header p,
body.tax-rental_category .main-content .category-header h1,
body.tax-rental_category .main-content .category-header p,
body.taxonomy-rental_category .main-content .category-header h1,
body.taxonomy-rental_category .main-content .category-header p,
.post-type-archive-rental_product .main-content .category-header h1,
.post-type-archive-rental_product .main-content .category-header p,
.archive.rental_product .main-content .category-header h1,
.archive.rental_product .main-content .category-header p,
.tax-rental_category .main-content .category-header h1,
.tax-rental_category .main-content .category-header p {
    color: #00214D !important;
}

/* Tours and Villas pages header: same style as Rental */
/* Universal rule for all pages with main-content and category-header - MUST be after base styles */
/* Use multiple selectors for maximum compatibility */
body .main-content .category-header,
.main-content .category-header,
body.page-template-page-tours .main-content .category-header,
body.page-template-page-villas .main-content .category-header {
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 3rem 0 2rem 0 !important;
    margin-bottom: 3rem !important;
    text-align: center !important;
}
body .main-content .category-header h1,
.main-content .category-header h1,
body.page-template-page-tours .main-content .category-header h1,
body.page-template-page-villas .main-content .category-header h1 {
    color: #00214D !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}
body .main-content .category-header p,
.main-content .category-header p,
body.page-template-page-tours .main-content .category-header p,
body.page-template-page-villas .main-content .category-header p {
    color: #00214D !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.2rem !important;
}

/* Specific overrides for page templates */
body.page-template-page-tours .main-content .category-header,
body.page-template-page-tours-php .main-content .category-header,
body.page-template-page-villas .main-content .category-header,
body.page-template-page-villas-php .main-content .category-header {
    background: transparent !important;
    box-shadow: none !important;
}
body.page-template-page-tours .main-content .category-header h1,
body.page-template-page-tours .main-content .category-header p,
body.page-template-page-tours-php .main-content .category-header h1,
body.page-template-page-tours-php .main-content .category-header p,
body.page-template-page-villas .main-content .category-header h1,
body.page-template-page-villas .main-content .category-header p,
body.page-template-page-villas-php .main-content .category-header h1,
body.page-template-page-villas-php .main-content .category-header p {
    color: #00214D !important;
}

/* For archive pages */
body.post-type-archive-tour .main-content .category-header,
body.archive.tour .main-content .category-header,
body.post-type-archive-villa .main-content .category-header,
body.archive.villa .main-content .category-header,
.post-type-archive-tour .main-content .category-header,
.archive.tour .main-content .category-header,
.post-type-archive-villa .main-content .category-header,
.archive.villa .main-content .category-header {
    background: transparent !important;
    box-shadow: none !important;
}
body.post-type-archive-tour .main-content .category-header h1,
body.post-type-archive-tour .main-content .category-header p,
body.archive.tour .main-content .category-header h1,
body.archive.tour .main-content .category-header p,
body.post-type-archive-villa .main-content .category-header h1,
body.post-type-archive-villa .main-content .category-header p,
body.archive.villa .main-content .category-header h1,
body.archive.villa .main-content .category-header p,
.post-type-archive-tour .main-content .category-header h1,
.post-type-archive-tour .main-content .category-header p,
.archive.tour .main-content .category-header h1,
.archive.tour .main-content .category-header p,
.post-type-archive-villa .main-content .category-header h1,
.post-type-archive-villa .main-content .category-header p,
.archive.villa .main-content .category-header h1,
.archive.villa .main-content .category-header p {
    color: #00214D !important;
}

/* ==========================================
   FEATURED SERVICES TILES (Main Page)
   Independent styles - will not affect other sections
   ========================================== */

.featured-services-section {
    padding: 4rem 0;
    background: #ffffff;
}

.featured-services-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    margin-bottom: 3rem;
}

/* Grid Layout */
.featured-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

/* Individual Tile */
.featured-service-tile {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
}

/* Tile Sizes */
.featured-service-tile.tile-size-large {
    grid-column: span 2;
    grid-row: span 2;
}

.featured-service-tile.tile-size-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.featured-service-tile.tile-size-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.featured-service-tile.tile-size-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Overlay - Dark gradient */
.tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 100%
    );
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Content */
.tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
    color: #ffffff;
}

.tile-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

.tile-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    color: #f0f0f0;
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Hover Effect */
.featured-service-tile:hover {
    transform: scale(1.05);
    z-index: 10;
}

.featured-service-tile:hover .tile-overlay {
    opacity: 0.9;
}

.featured-service-tile:hover .tile-title {
    transform: translateY(-3px);
}

/* Large tile - bigger text */
.featured-service-tile.tile-size-large .tile-title {
    font-size: 2rem;
}

.featured-service-tile.tile-size-large .tile-description {
    font-size: 1.1rem;
}

/* Small tile - compact text */
.featured-service-tile.tile-size-small .tile-title {
    font-size: 1.25rem;
}

.featured-service-tile.tile-size-small .tile-description {
    font-size: 0.85rem;
}

/* Tablet */
@media (max-width: 1024px) {
    .featured-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        grid-auto-rows: 180px;
    }
    
    .featured-service-tile.tile-size-large,
    .featured-service-tile.tile-size-wide {
        grid-column: span 2;
    }
    
    .featured-service-tile.tile-size-tall,
    .featured-service-tile.tile-size-small {
        grid-column: span 1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .featured-services-section {
        padding: 2.5rem 0;
    }
    
    .featured-services-section .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .featured-services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        grid-auto-rows: 220px;
    }
    
    /* All tiles full width on mobile */
    .featured-service-tile.tile-size-large,
    .featured-service-tile.tile-size-wide,
    .featured-service-tile.tile-size-tall,
    .featured-service-tile.tile-size-small {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .tile-content {
        padding: 1.25rem;
    }
    
    .tile-title {
        font-size: 1.35rem;
    }
    
    .tile-description {
        font-size: 0.9rem;
    }
    
    .featured-service-tile.tile-size-large .tile-title {
        font-size: 1.5rem;
    }
    
    /* Disable hover zoom on mobile */
    .featured-service-tile:hover {
        transform: none;
    }
}

/* ===============================================
   VILLA DETAIL PAGE STYLES
   =============================================== */

.villa-detail {
    padding: 20px 0 60px;
}

/* Villa Header */
.villa-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.villa-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
    text-shadow: none;
}

.villa-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: #D8AE5E;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(216, 174, 94, 0.2);
}

.villa-price-tag .price-label {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
}

.villa-price-tag .price-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.villa-price-tag .price-period {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
}

/* Main Grid */
.villa-main-grid {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 40px;
    align-items: start;
}

/* Left Column */
.villa-left-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Gallery Block */
.villa-gallery-block {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.villa-main-image,
.villa-main-image-container {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

.villa-main-image img,
.villa-main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.villa-gallery-block:hover .villa-main-image img,
.villa-gallery-block:hover .villa-main-image-container img {
    transform: scale(1.05);
}

/* Gallery Navigation Arrows */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    opacity: 0;
}

.villa-main-image:hover .gallery-nav,
.villa-main-image-container:hover .gallery-nav,
.yacht-main-image-container:hover .gallery-nav {
    opacity: 1;
}

.gallery-nav:hover {
    background: #00214D;
    color: white;
}

.gallery-nav:hover svg {
    stroke: white;
}

.gallery-nav svg {
    stroke: #00214D;
    transition: stroke 0.3s ease;
}

.gallery-prev {
    left: 15px;
}

.gallery-next {
    right: 15px;
}

/* Gallery Counter */
.gallery-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 33, 77, 0.85);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10;
}

/* Mobile: Always show arrows */
@media (max-width: 768px) {
    .gallery-nav {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
    
    .gallery-prev {
        left: 10px;
    }
    
    .gallery-next {
        right: 10px;
    }
    
    .gallery-counter {
        bottom: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

.villa-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 15px;
    background: #f9f9f9;
}

.villa-gallery-thumb {
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.villa-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.villa-gallery-thumb:hover,
.villa-gallery-thumb.active {
    border-color: #D8AE5E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 174, 94, 0.3);
}

/* Villa Information Block */
.villa-info-block {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.villa-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #00214D 0%, #003875 100%);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 33, 77, 0.15);
}

.villa-location-badge .location-icon {
    font-size: 16px;
}

.villa-location-badge .location-text {
    font-weight: 600;
}

.villa-info-block h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
}

.villa-description {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    text-shadow: none;
}

.villa-description p {
    margin-bottom: 15px;
    text-shadow: none;
}

.villa-description * {
    text-shadow: none !important;
}

/* Villa Specifications Block */
.villa-specs-block {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.villa-specs-block h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00214D;
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Specs in right column - more compact */
.villa-right-column .villa-specs-block {
    padding: 25px;
}

.villa-right-column .villa-specs-block h2 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-right-column .villa-specs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.villa-spec-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    border-left: 4px solid #D8AE5E;
    transition: all 0.3s ease;
}

.villa-spec-item:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(216, 174, 94, 0.2);
    transform: translateX(5px);
}

.villa-spec-item svg {
    color: #D8AE5E;
    flex-shrink: 0;
}

.villa-spec-item .spec-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.spec-content {
    display: flex;
    flex-direction: column;
}

.villa-spec-item .spec-label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.villa-spec-item .spec-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #00214D;
}

/* Spec items in right column - more compact */
.villa-right-column .villa-spec-item {
    padding: 12px 15px;
    gap: 12px;
}

.villa-right-column .villa-spec-item svg {
    width: 18px;
    height: 18px;
}

.villa-right-column .villa-spec-item .spec-icon {
    font-size: 18px;
}

.villa-right-column .villa-spec-item .spec-label {
    font-size: 0.75rem;
}

.villa-right-column .villa-spec-item .spec-value {
    font-size: 1rem;
}

/* Villa Policies Block */
.villa-policies-block {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.villa-policies-block h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00214D;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-policies-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.villa-policies-list li {
    padding: 12px 15px 12px 45px;
    margin-bottom: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    position: relative;
    color: #555;
    font-size: 0.95rem;
}

.villa-policies-list li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #D8AE5E;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Policies in right column - more compact */
.villa-right-column .villa-policies-block {
    padding: 25px;
}

.villa-right-column .villa-policies-block h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-right-column .villa-policies-list li {
    padding: 10px 12px 10px 35px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

/* Map Block in Right Column */
.villa-right-column .villa-map-block {
    padding: 25px;
}

.villa-right-column .villa-map-block h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-right-column .villa-policies-list li::before {
    left: 12px;
    font-size: 1rem;
}

/* Villa Map Block */
.villa-map-block {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.villa-map-block h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00214D;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #D8AE5E;
}

.villa-map-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.villa-map-container iframe {
    display: block;
}

/* Right Column - Booking Form */
.villa-right-column {
    position: relative;
}

/* Right column blocks spacing */
.villa-right-column > * {
    margin-bottom: 25px;
}

.villa-right-column > *:last-child {
    margin-bottom: 0;
}

.villa-booking-form-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.villa-booking-form-block {
    background: #00214D;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid #D8AE5E;
}

.villa-booking-form-block h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 25px 0;
    text-align: center;
}

.villa-booking-form .form-group {
    margin-bottom: 15px;
}

.villa-booking-form input,
.villa-booking-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.villa-booking-form input::placeholder,
.villa-booking-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.villa-booking-form input:focus,
.villa-booking-form textarea:focus {
    outline: none;
    border-color: #D8AE5E;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.villa-booking-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* Date input styling for dark background */
.villa-booking-form input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
}

.villa-booking-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.7;
    padding: 5px;
}

.villa-booking-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Date input icon visible */
.villa-booking-form input[type="date"]::-webkit-inner-spin-button,
.villa-booking-form input[type="date"]::-webkit-clear-button {
    display: none;
}

/* Hide date text when no value selected */
.villa-booking-form input[type="date"]:not(.has-value)::-webkit-datetime-edit {
    color: transparent;
}

/* Show date text when value is selected */
.villa-booking-form input[type="date"].has-value::-webkit-datetime-edit {
    color: #fff !important;
}

/* Firefox support */
.villa-booking-form input[type="date"]:not(.has-value) {
    color: transparent;
}

.villa-booking-form input[type="date"].has-value {
    color: #fff !important;
}

/* Show placeholder when no value */
.villa-booking-form input[type="date"]:not(.has-value):before {
    content: attr(placeholder);
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.villa-booking-form input[type="number"] {
    color: #fff;
}

.villa-booking-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.villa-booking-actions button {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.whatsapp-booking-btn {
    background: #25D366;
    color: #fff;
}

.whatsapp-booking-btn:hover {
    background: #1fb855;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.email-booking-btn {
    background: #D8AE5E;
    color: #fff;
}

.email-booking-btn:hover {
    background: #c79a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(216, 174, 94, 0.4);
}

.email-booking-btn:disabled,
.whatsapp-booking-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .villa-main-grid {
        grid-template-columns: 1fr;
    }
    
    .villa-booking-form-sticky {
        position: static;
    }
    
    .villa-header {
        text-align: center;
    }
    
    .villa-info-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .villa-title {
        font-size: 2rem;
    }
    
    .villa-specs-grid {
        grid-template-columns: 1fr;
    }
    
    /* Right column specs stay 2 columns on tablet */
    .villa-right-column .villa-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .villa-booking-form-sticky {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .villa-detail {
        padding: 10px 0 40px;
    }
    
    .villa-header {
        margin-bottom: 20px;
    }
    
    .villa-title {
        font-size: 1.75rem;
    }
    
    .villa-main-image,
    .villa-main-image-container {
        height: 300px;
    }
    
    .villa-gallery-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .villa-gallery-thumb {
        height: 80px;
    }
    
    .villa-info-block,
    .villa-specs-block,
    .villa-policies-block,
    .villa-map-block,
    .villa-booking-form-block {
        padding: 20px;
        border-radius: 15px;
    }
    
    .villa-info-block h2,
    .villa-specs-block h2,
    .villa-policies-block h2,
    .villa-map-block h2 {
        font-size: 1.5rem;
    }
    
    .villa-booking-form-block h2 {
        font-size: 1.3rem;
    }
    
    /* Reset right column overrides on mobile */
    .villa-right-column .villa-specs-block,
    .villa-right-column .villa-policies-block {
        padding: 20px;
    }
    
    .villa-right-column .villa-specs-block h2,
    .villa-right-column .villa-policies-block h2 {
        font-size: 1.5rem;
    }
    
    .villa-right-column .villa-spec-item {
        padding: 15px;
    }
    
    .villa-right-column .villa-spec-item svg {
        width: 20px;
        height: 20px;
    }
    
    .villa-right-column .villa-spec-item .spec-label {
        font-size: 0.85rem;
    }
    
    .villa-right-column .villa-spec-item .spec-value {
        font-size: 1.1rem;
    }
    
    /* Keep 2 columns on mobile for right column specs */
    .villa-right-column .villa-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .villa-right-column .villa-policies-list li {
        padding: 12px 15px 12px 40px;
        font-size: 0.9rem;
    }
}

/* ==========================================
   YACHT RENTAL CARDS (Boat Category)
   Similar to Villa Cards but adapted for yachts
   ========================================== */

.yacht-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.yacht-archive-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 33, 77, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.yacht-archive-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 33, 77, 0.15);
}

.yacht-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image Section with Gallery */
.yacht-card-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.yacht-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.yacht-card-image {
    position: relative;
}

.yacht-card-image .gallery-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.yacht-card-image .gallery-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.yacht-card-image .gallery-images img:first-child {
    opacity: 1;
}

/* Gallery Indicators */
.yacht-gallery-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.yacht-archive-card:hover .yacht-gallery-indicators {
    opacity: 1;
}

.yacht-gallery-indicators .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.yacht-gallery-indicators .indicator.active {
    background: #ffffff;
    width: 24px;
    border-radius: 4px;
}

/* Price Badge */
.yacht-card-price {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(13, 71, 161, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.yacht-card-price .price-from {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yacht-card-price .price-amount {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.yacht-card-price .price-period {
    font-size: 0.7rem;
    opacity: 0.9;
}

/* Featured Badge */
.yacht-featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #D8AE5E 0%, #C8941D 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(216, 174, 94, 0.3);
    z-index: 5;
}

/* No Image Placeholder */
.yacht-card-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yacht-card-no-image .icon {
    font-size: 4rem;
    opacity: 0.3;
}

/* Card Body */
.yacht-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.yacht-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00214D;
    margin: 0;
    line-height: 1.3;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

/* Main Specifications Grid - matching villa cards style exactly */
.yacht-card-specs {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.yacht-card-specs .spec-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 8px;
    background: #f9f9f9;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 100%;
}

.yacht-card-specs .spec-item:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.15);
    transform: translateY(-2px);
}

.yacht-card-specs .spec-icon {
    font-size: 1.5rem;
    line-height: 1;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yacht-card-specs .spec-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
}

.yacht-card-specs .spec-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00214D;
    line-height: 1.2;
    text-align: center;
}

.yacht-card-specs .spec-label {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    font-weight: 500;
}

/* CTA Button */
.yacht-card-cta {
    margin-top: auto;
}

.yacht-card-cta .cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.yacht-card-cta .cta-button:hover {
    background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 71, 161, 0.25);
}

.yacht-card-cta .cta-button svg {
    transition: transform 0.3s ease;
}

.yacht-card-cta .cta-button:hover svg {
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .yacht-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .yacht-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 2rem 0;
    }
    
    .yacht-card-image {
        height: 240px;
    }
    
    .yacht-card-title {
        font-size: 1.3rem;
    }
    
    .yacht-card-price {
        top: 12px;
        right: 12px;
        padding: 6px 10px;
    }
    
    .yacht-card-price .price-from,
    .yacht-card-price .price-period {
        font-size: 0.6rem;
    }
    
    .yacht-card-price .price-amount {
        font-size: 1.1rem;
    }
    
    .yacht-card-specs {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .yacht-card-specs .spec-item {
        flex: 1;
        min-width: 0;
        padding: 10px 6px;
        justify-content: flex-start;
    }
    
    .yacht-card-specs .spec-icon {
        font-size: 1.2rem;
        height: 20px;
    }
    
    .yacht-card-specs .spec-value {
        font-size: 1rem;
    }
    
    .yacht-card-specs .spec-label {
        font-size: 0.7rem;
    }
    
    .yacht-card-body {
        padding: 20px;
        gap: 15px;
    }
}

/* Desktop: Slideshow on hover */
@media (min-width: 769px) {
    .yacht-card-image[data-yacht-id].hovering .gallery-images img {
        opacity: 0;
    }
    
    .yacht-card-image[data-yacht-id].hovering .gallery-images img.active {
        opacity: 1;
    }
}

/* Mobile: Touch swipe */
@media (max-width: 768px) {
    .yacht-card-image .gallery-images {
        touch-action: pan-y pinch-zoom;
    }
}

@media (max-width: 480px) {
    /* Keep specs in one row even on small mobile */
    .yacht-card-specs {
        gap: 6px;
        align-items: stretch;
    }
    
    .yacht-card-specs .spec-item {
        padding: 6px 4px;
        justify-content: flex-start;
    }
    
    .yacht-card-specs .spec-icon {
        font-size: 1rem;
        height: 18px;
    }
    
    .yacht-card-specs .spec-value {
        font-size: 0.9rem;
    }
    
    .yacht-card-specs .spec-label {
        font-size: 0.65rem;
    }
}

/* Marina Location Badge (on image) */
.yacht-card-location {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 33, 77, 0.9);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 2;
}

.yacht-card-location .location-icon {
    font-size: 16px;
}

.yacht-card-location .location-text {
    line-height: 1;
}

/* Feature Specs (Type, Speed, etc.) - as badges */
.yacht-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.yacht-card-features .feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
    color: #0d47a1;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(13, 71, 161, 0.15);
}

.yacht-card-features .feature-icon {
    font-size: 16px;
}

/* Mobile responsive for location and features */
@media (max-width: 768px) {
    .yacht-card-location {
        bottom: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    .yacht-card-features .feature-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* ============================================
   VISA RUN / BORDER RUN PAGE STYLES
   ============================================ */

.visa-run-page {
    background: #f8fafc;
}

/* Hero Section */
.visa-hero {
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(135deg, #00214D 0%, #003d80 50%, #0059b3 100%);
    overflow: hidden;
}

.visa-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    background-size: 100% 100%, 100% 100%, 60px 60px;
}

.visa-hero .container {
    position: relative;
    z-index: 1;
}

.visa-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.visa-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.visa-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
}

.visa-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

.visa-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.visa-hero p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.6;
}

.visa-hero .hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.visa-hero .btn-primary,
.visa-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.visa-hero .btn-primary {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.visa-hero .btn-primary:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.visa-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.visa-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Section Titles */
.visa-run-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00214D;
    text-align: center;
    margin-bottom: 15px;
}

.visa-run-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

/* Difference Section */
.visa-difference {
    padding: 80px 0;
    background: #fff;
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.difference-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.difference-card.border-run {
    border: 2px solid #10b981;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.1);
}

.difference-card.visa-run {
    border: 2px solid #6366f1;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
}

.difference-card:hover {
    transform: translateY(-5px);
}

.difference-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.border-run .difference-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

.border-run .difference-icon svg {
    stroke: #059669;
}

.visa-run .difference-icon {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.visa-run .difference-icon svg {
    stroke: #4f46e5;
}

.difference-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.difference-card p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
}

.stamp-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
}

.border-run .stamp-badge {
    background: #d1fae5;
    color: #059669;
}

.visa-run .stamp-badge {
    background: #e0e7ff;
    color: #4f46e5;
}

/* Destinations Section */
.visa-destinations {
    padding: 80px 0;
    background: #f8fafc;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.destination-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.destination-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.destination-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.destination-type {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.destination-type.visa {
    background: #e0e7ff;
    color: #4f46e5;
}

.destination-type.border {
    background: #d1fae5;
    color: #059669;
}

.destination-type.border-visa {
    background: linear-gradient(135deg, #d1fae5 0%, #e0e7ff 100%);
    color: #1e293b;
}

.destination-flag {
    font-size: 2rem;
}

.destination-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.destination-card p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 50px;
}

.destination-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.destination-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.9rem;
}

.destination-meta svg {
    stroke: #94a3b8;
}

.destination-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.option-tag {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.option-tag.van {
    background: #fef3c7;
    color: #92400e;
}

.option-tag.air {
    background: #dbeafe;
    color: #1e40af;
}

/* Safety Section */
.visa-safety {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003366 100%);
}

.visa-safety .section-title,
.visa-safety .section-subtitle {
    color: #fff;
}

.visa-safety .section-subtitle {
    opacity: 0.8;
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.safety-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.safety-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.safety-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.safety-icon svg {
    stroke: #fff;
}

.safety-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.safety-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Included Section */
.visa-included {
    padding: 80px 0;
    background: #fff;
}

.included-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 24px;
    padding: 50px;
}

.included-wrapper h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 30px;
    text-align: center;
}

.included-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.included-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 12px;
    font-weight: 500;
    color: #1e293b;
}

.included-list svg {
    stroke: #10b981;
    flex-shrink: 0;
}

.tips-box {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border-left: 4px solid #f59e0b;
}

.tips-box h4 {
    font-size: 1.1rem;
    color: #92400e;
    margin-bottom: 15px;
}

.tips-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-box li {
    padding: 8px 0;
    color: #64748b;
    font-size: 0.95rem;
}

/* FAQ Section */
.visa-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.faq-question {
    width: 100%;
    padding: 25px 30px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: #f8fafc;
}

.faq-question span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
}

.faq-question svg {
    stroke: #64748b;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 0 30px 25px;
    color: #64748b;
    line-height: 1.7;
}

/* CTA Section */
.visa-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.visa-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.visa-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 35px;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-whatsapp,
.btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp {
    background: #fff;
    color: #25D366;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.btn-phone {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-phone:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Visa Run Page Responsive */
@media (max-width: 1024px) {
    .safety-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .visa-hero {
        padding: 80px 0 60px;
    }
    
    .visa-hero-image img {
        object-position: center 80%;
    }
    
    .visa-hero h1 {
        font-size: 2.2rem;
    }
    
    .visa-hero p {
        font-size: 1rem;
    }
    
    .visa-hero .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .visa-hero .btn-primary,
    .visa-hero .btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .difference-grid {
        grid-template-columns: 1fr;
    }
    
    .difference-card {
        padding: 30px;
    }
    
    .destinations-grid {
        grid-template-columns: 1fr;
    }
    
    .safety-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .safety-card {
        padding: 25px;
    }
    
    .included-wrapper {
        padding: 30px 20px;
    }
    
    .included-list {
        grid-template-columns: 1fr;
    }
    
    .visa-run-page .section-title {
        font-size: 1.8rem;
    }
    
    .visa-cta h2 {
        font-size: 1.8rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-whatsapp,
    .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .faq-question {
        padding: 20px;
    }
    
    .faq-question span {
        font-size: 1rem;
    }
    
    .faq-answer p {
        padding: 0 20px 20px;
    }
}

/* ============================================
   DRIVER LICENSE PAGE STYLES
   ============================================ */

.driver-license-page {
    background: #f8fafc;
}

/* DL Hero Section */
.dl-hero {
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #2b6cb0 100%);
    overflow: hidden;
}

.dl-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

.dl-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.dl-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.dl-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.dl-hero .container {
    position: relative;
    z-index: 1;
}

.dl-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.dl-hero .hero-badge {
    display: inline-block;
    background: rgba(72, 187, 120, 0.2);
    color: #68d391;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid rgba(72, 187, 120, 0.3);
}

.dl-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.dl-hero p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.6;
}

.dl-hero .hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.dl-hero .btn-primary,
.dl-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dl-hero .btn-primary {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.dl-hero .btn-primary:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.dl-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.dl-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* DL Section Titles */
.driver-license-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a365d;
    text-align: center;
    margin-bottom: 15px;
}

.driver-license-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

/* Why Section */
.dl-why {
    padding: 80px 0;
    background: #fff;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.why-card {
    text-align: center;
    padding: 30px 20px;
    border-radius: 16px;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.why-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
}

.why-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* License Types Section */
.dl-types {
    padding: 80px 0;
    background: #f8fafc;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.type-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.type-card.popular {
    border: 2px solid #d69e2e;
    background: linear-gradient(180deg, #fffff0 0%, #fff 100%);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d69e2e 0%, #ecc94b 100%);
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.type-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.type-icon.car {
    background: linear-gradient(135deg, #3182ce 0%, #63b3ed 100%);
}

.type-icon.bike {
    background: linear-gradient(135deg, #38a169 0%, #68d391 100%);
}

.type-icon.both {
    background: linear-gradient(135deg, #d69e2e 0%, #ecc94b 100%);
}

.type-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

.type-icon.both .type-emoji {
    font-size: 1.8rem;
    letter-spacing: 2px;
}

.type-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 15px;
}

.type-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.type-price {
    font-size: 2rem;
    font-weight: 700;
    color: #2b6cb0;
    margin-bottom: 15px;
}

.type-card.popular .type-price {
    color: #d69e2e;
}

.type-validity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Process Section */
.dl-process {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
}

.dl-process .section-title {
    color: #fff;
}

.dl-process .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.process-step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d69e2e 0%, #ecc94b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #1a365d;
    margin: 0 auto 25px;
    position: relative;
    z-index: 1;
}

.step-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Details Section */
.dl-details {
    padding: 80px 0;
    background: #fff;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.details-card {
    padding: 40px;
    border-radius: 20px;
}

.details-card.requirements {
    background: #f8fafc;
}

.details-card.included {
    background: linear-gradient(135deg, #ebf8ff 0%, #fff 100%);
    border: 1px solid #bee3f8;
}

.details-card h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a365d;
    margin-bottom: 25px;
}

.details-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.details-card li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #475569;
    font-size: 0.95rem;
}

.details-card li:last-child {
    border-bottom: none;
}

.details-card li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #38a169;
}

.details-card .tips-box {
    margin-top: 30px;
    padding: 25px;
    background: rgba(214, 158, 46, 0.1);
    border-radius: 12px;
    border-left: 4px solid #d69e2e;
}

.details-card .tips-box h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 15px;
}

.details-card .tips-box ul {
    margin: 0;
}

.details-card .tips-box li {
    padding: 8px 0;
    border-bottom: none;
    font-size: 0.9rem;
}

/* DL FAQ Section */
.dl-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.dl-faq .faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.dl-faq .faq-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dl-faq .faq-question {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a365d;
    transition: all 0.3s ease;
}

.dl-faq .faq-question:hover {
    background: #f8fafc;
}

.dl-faq .faq-question svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: #2b6cb0;
}

.dl-faq .faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.dl-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dl-faq .faq-answer p {
    padding: 0 25px 20px;
    color: #64748b;
    line-height: 1.7;
}

/* DL CTA Section */
.dl-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
}

.dl-cta .cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.dl-cta h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.dl-cta p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
}

.dl-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.dl-cta .btn-whatsapp,
.dl-cta .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dl-cta .btn-whatsapp {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 25px rgba(37, 211, 102, 0.4);
}

.dl-cta .btn-whatsapp:hover {
    background: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.dl-cta .btn-phone {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.dl-cta .btn-phone:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* DL Responsive */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .types-grid .type-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .process-timeline::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .dl-hero {
        padding: 80px 0 60px;
    }
    
    .dl-hero h1 {
        font-size: 2.2rem;
    }
    
    .dl-hero p {
        font-size: 1rem;
    }
    
    .dl-hero .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .dl-hero .btn-primary,
    .dl-hero .btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .why-grid {
        grid-template-columns: 1fr;
    }
    
    .types-grid {
        grid-template-columns: 1fr;
    }
    
    .types-grid .type-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }
    
    .process-timeline {
        grid-template-columns: 1fr;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
    }
    
    .driver-license-page .section-title {
        font-size: 1.8rem;
    }
    
    .dl-cta h2 {
        font-size: 1.8rem;
    }
    
    .dl-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .dl-cta .btn-whatsapp,
    .dl-cta .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ============================================
   AIRPORT TRANSFER PAGE STYLES
   ============================================ */

.airport-transfer-page {
    background: #f8fafc;
}

/* AT Hero Section */
.at-hero {
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%);
    overflow: hidden;
}

.at-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

.at-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.at-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.at-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.at-hero .container {
    position: relative;
    z-index: 1;
}

.at-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.at-hero .hero-badge {
    display: inline-block;
    background: rgba(14, 165, 233, 0.3);
    color: #7dd3fc;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid rgba(125, 211, 252, 0.3);
}

.at-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.at-hero p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.6;
}

.at-hero .hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.at-hero .btn-primary,
.at-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.at-hero .btn-primary {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.at-hero .btn-primary:hover {
    background: #1da851;
    transform: translateY(-2px);
}

.at-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.at-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* AT Section Titles */
.airport-transfer-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0c4a6e;
    text-align: center;
    margin-bottom: 15px;
}

.airport-transfer-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

/* Services Section */
.at-services {
    padding: 80px 0;
    background: #fff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: #f8fafc;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.service-card.popular {
    border-color: #0ea5e9;
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
}

.service-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.service-emoji {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.service-features {
    font-size: 0.85rem;
    color: #0ea5e9;
    font-weight: 500;
}

/* Destinations Section */
.at-destinations {
    padding: 80px 0;
    background: #f8fafc;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.destination-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.dest-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.dest-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 5px;
}

.dest-time {
    font-size: 0.85rem;
    color: #64748b;
}

.dest-price {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #64748b;
}

.dest-price strong {
    font-size: 1.3rem;
    color: #0ea5e9;
}

.price-note {
    text-align: center;
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 30px;
}

/* Vehicles Section */
.at-vehicles {
    padding: 80px 0;
    background: #fff;
}

.vehicles-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.vehicle-card-new {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.vehicle-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.vehicle-card-new.premium {
    border: 2px solid #d69e2e;
    box-shadow: 0 4px 25px rgba(214, 158, 46, 0.2);
}

.vehicle-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.vehicle-card-new:hover .vehicle-image img {
    transform: scale(1.08);
}

.vehicle-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.vehicle-badge.economy {
    background: #0ea5e9;
}

.vehicle-badge.premium-badge {
    background: linear-gradient(135deg, #d69e2e 0%, #ecc94b 100%);
}

.vehicle-badge.suv-badge {
    background: #38a169;
}

.vehicle-badge.van-badge {
    background: #6366f1;
}

.vehicle-info {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #D8AE5E 0%, #B8941F 100%);
}

.vehicle-info h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.vehicle-pax {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 8px;
}

.vehicle-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 15px;
}

.vehicle-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-features li {
    font-size: 0.85rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Keep old styles for backward compatibility */
.vehicles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.vehicle-card {
    text-align: center;
    padding: 30px 20px;
    background: #f8fafc;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.vehicle-emoji {
    font-size: 3rem;
    margin-bottom: 15px;
}

.vehicle-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 5px;
}

.vehicle-card p {
    font-size: 0.9rem;
    color: #64748b;
}

/* Why Section */
.at-why {
    padding: 80px 0;
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
}

.at-why .section-title {
    color: #fff;
}

.at-why .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.at-why .why-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.at-why .why-emoji {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.at-why .why-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.at-why .why-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Transfer Booking Form Section */
.at-booking-form {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.booking-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.booking-form-header {
    background: linear-gradient(135deg, #D8AE5E 0%, #B8941F 100%);
    padding: 30px 40px;
    text-align: center;
}

.booking-form-header h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.booking-form-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.transfer-form {
    padding: 40px;
}

.transfer-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.transfer-form .form-group {
    display: flex;
    flex-direction: column;
}

.transfer-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.transfer-form input,
.transfer-form select {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #334155;
    -webkit-appearance: none;
    appearance: none;
}

.transfer-form input[type="date"],
.transfer-form input[type="time"] {
    cursor: pointer;
    position: relative;
}

.transfer-form input[type="date"]::-webkit-calendar-picker-indicator,
.transfer-form input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.transfer-form select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.transfer-form input:focus,
.transfer-form select:focus {
    outline: none;
    border-color: #D8AE5E;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.2);
}

.transfer-form input::placeholder {
    color: #64748b;
    opacity: 1;
}

.form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-submit-transfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 50px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

.btn-submit-transfer:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

@media (max-width: 768px) {
    .transfer-form {
        padding: 25px;
    }
    
    .transfer-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .booking-form-header {
        padding: 25px 20px;
    }
    
    .booking-form-header h2 {
        font-size: 1.5rem;
    }
    
    .btn-submit-transfer {
        width: 100%;
        padding: 16px 30px;
    }
}

/* Booking Steps Section */
.at-booking {
    padding: 80px 0;
    background: #fff;
}

.booking-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;
}

.booking-step {
    flex: 1;
    max-width: 280px;
    text-align: center;
}

.booking-step .step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 auto 20px;
}

.booking-step h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 10px;
}

.booking-step p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}

.step-arrow {
    font-size: 2rem;
    color: #cbd5e1;
    margin-top: 15px;
}

/* Included Section */
.at-included {
    padding: 60px 0;
    background: #f0f9ff;
}

.at-included .included-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.at-included h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0c4a6e;
    margin-bottom: 30px;
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.included-item {
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* AT FAQ Section */
.at-faq {
    padding: 80px 0;
    background: #fff;
}

.at-faq .faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.at-faq .faq-item {
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.at-faq .faq-question {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0c4a6e;
    transition: all 0.3s ease;
}

.at-faq .faq-question:hover {
    background: #e0f2fe;
}

.at-faq .faq-question svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: #0ea5e9;
}

.at-faq .faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.at-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.at-faq .faq-answer p {
    padding: 0 25px 20px;
    color: #64748b;
    line-height: 1.7;
}

/* AT CTA Section */
.at-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
}

.at-cta .cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.at-cta h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.at-cta p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
}

.at-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.at-cta .btn-whatsapp,
.at-cta .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.at-cta .btn-whatsapp {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 25px rgba(37, 211, 102, 0.4);
}

.at-cta .btn-whatsapp:hover {
    background: #1da851;
    transform: translateY(-3px);
}

.at-cta .btn-phone {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.at-cta .btn-phone:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* AT Responsive */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-grid .service-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vehicles-grid-new {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .at-why .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .included-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .at-hero {
        padding: 80px 0 60px;
    }
    
    .at-hero h1 {
        font-size: 2.2rem;
    }
    
    .at-hero p {
        font-size: 1rem;
    }
    
    .at-hero .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .at-hero .btn-primary,
    .at-hero .btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid .service-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }
    
    .destinations-grid {
        grid-template-columns: 1fr;
    }
    
    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .at-why .why-grid {
        grid-template-columns: 1fr;
    }
    
    .booking-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .included-grid {
        grid-template-columns: 1fr;
    }
    
    .airport-transfer-page .section-title {
        font-size: 1.8rem;
    }
    
    .at-cta h2 {
        font-size: 1.8rem;
    }
    
    .at-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .at-cta .btn-whatsapp,
    .at-cta .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ========================================
   MOVING SERVICE PAGE STYLES
======================================== */

.moving-service-page {
    font-family: 'Montserrat', sans-serif;
}

/* Hero Section */
.ms-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ms-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
    z-index: 1;
}

.ms-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.ms-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ms-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 33, 77, 0.85) 0%, rgba(0, 61, 128, 0.7) 100%);
}

.ms-hero .container {
    position: relative;
    z-index: 3;
}

.ms-hero-content {
    max-width: 700px;
    color: white;
    padding: 60px 0;
}

.ms-hero .hero-badge {
    display: inline-block;
    background: rgba(216, 174, 94, 0.2);
    color: #D8AE5E;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(216, 174, 94, 0.3);
}

.ms-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.ms-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

.ms-hero .hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ms-hero .btn-primary,
.ms-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ms-hero .btn-primary {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.ms-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.ms-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.ms-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Services Section */
.ms-services {
    padding: 80px 0;
    background: #f8fafc;
}

.moving-service-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #00214D;
    margin-bottom: 15px;
}

.moving-service-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.ms-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.ms-service-card {
    background: white;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.ms-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #D8AE5E;
}

.ms-service-card .service-emoji {
    font-size: 3rem;
    margin-bottom: 20px;
}

.ms-service-card h3 {
    color: #00214D;
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.ms-service-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.ms-service-card .service-features {
    color: #D8AE5E;
    font-size: 0.85rem;
    font-weight: 500;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* Why Choose Us Section */
.ms-why {
    padding: 80px 0;
    background: white;
}

.ms-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.ms-why-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.ms-why-card:hover {
    background: linear-gradient(135deg, #00214D, #003d80);
}

.ms-why-card:hover h4,
.ms-why-card:hover p {
    color: white;
}

.ms-why-card .why-emoji {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.ms-why-card h4 {
    color: #00214D;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ms-why-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Process Section */
.ms-process {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.ms-process .section-title {
    color: white;
}

.ms-process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.ms-process-step {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ms-process-step .step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.ms-process-step h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.ms-process-step p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ms-process .step-arrow {
    color: #D8AE5E;
    font-size: 2rem;
    font-weight: 300;
}

/* Form Section */
.ms-form-section {
    padding: 80px 0;
    background: #f8fafc;
}

.ms-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.ms-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.ms-form-header h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 10px;
}

.ms-form-header p {
    color: #64748b;
}

.moving-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.moving-form .form-group {
    display: flex;
    flex-direction: column;
}

.moving-form .form-group.full-width {
    grid-column: span 2;
}

.moving-form label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.moving-form input,
.moving-form select,
.moving-form textarea {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #334155;
    font-family: 'Montserrat', sans-serif;
}

.moving-form input:focus,
.moving-form select:focus,
.moving-form textarea:focus {
    outline: none;
    border-color: #D8AE5E;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.2);
}

.moving-form input::placeholder,
.moving-form textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.moving-form select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.moving-form textarea {
    resize: vertical;
    min-height: 100px;
}

.moving-form .form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-submit-moving {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-submit-moving:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Included Section */
.ms-included {
    padding: 60px 0;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
}

.ms-included-wrapper {
    text-align: center;
}

.ms-included h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: white;
    margin-bottom: 40px;
}

.ms-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.ms-included .included-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px 20px;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    font-size: 0.95rem;
}

/* FAQ Section */
.ms-faq {
    padding: 80px 0;
    background: white;
}

.ms-faq .faq-list {
    max-width: 800px;
    margin: 50px auto 0;
}

.ms-faq .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #f8fafc;
}

.ms-faq .faq-question {
    width: 100%;
    padding: 20px 25px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #00214D;
    font-family: 'Montserrat', sans-serif;
}

.ms-faq .faq-question svg {
    transition: transform 0.3s ease;
    color: #D8AE5E;
}

.ms-faq .faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.ms-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.ms-faq .faq-answer p {
    padding: 0 25px 20px;
    color: #64748b;
    line-height: 1.6;
}

/* CTA Section */
.ms-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.ms-cta .cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.ms-cta h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
}

.ms-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    margin-bottom: 30px;
}

.ms-cta .cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.ms-cta .btn-whatsapp,
.ms-cta .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ms-cta .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.ms-cta .btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.ms-cta .btn-phone {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
}

.ms-cta .btn-phone:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(216, 174, 94, 0.4);
}

/* Moving Service Responsive */
@media (max-width: 1024px) {
    .ms-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ms-included-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ms-hero h1 {
        font-size: 2.2rem;
    }
    
    .ms-hero p {
        font-size: 1.1rem;
    }
    
    .ms-hero .hero-buttons {
        flex-direction: column;
    }
    
    .ms-hero .btn-primary,
    .ms-hero .btn-secondary {
        justify-content: center;
    }
    
    .ms-services-grid {
        grid-template-columns: 1fr;
    }
    
    .ms-why-grid {
        grid-template-columns: 1fr;
    }
    
    .ms-process-steps {
        flex-direction: column;
    }
    
    .ms-process .step-arrow {
        transform: rotate(90deg);
    }
    
    .ms-form-wrapper {
        padding: 30px 20px;
    }
    
    .moving-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .moving-form .form-group.full-width {
        grid-column: span 1;
    }
    
    .ms-included-grid {
        grid-template-columns: 1fr;
    }
    
    .moving-service-page .section-title {
        font-size: 1.8rem;
    }
    
    .ms-cta h2 {
        font-size: 1.8rem;
    }
    
    .ms-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .ms-cta .btn-whatsapp,
    .ms-cta .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ========================================
   FAST TRACK PAGE STYLES
======================================== */

.fast-track-page {
    font-family: 'Montserrat', sans-serif;
}

/* Hero Section */
.ft-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ft-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
    z-index: 1;
}

.ft-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.ft-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ft-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 33, 77, 0.85) 0%, rgba(0, 61, 128, 0.7) 100%);
}

.ft-hero .container {
    position: relative;
    z-index: 3;
}

.ft-hero-content {
    max-width: 700px;
    color: white;
    padding: 60px 0;
}

.ft-hero .hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.ft-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.ft-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

.ft-hero .hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ft-hero .btn-primary,
.ft-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ft-hero .btn-primary {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.ft-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.ft-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.ft-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* What is Fast Track Section */
.ft-what {
    padding: 60px 0;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
}

.ft-what-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.ft-what h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
}

.ft-what p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Services Section */
.ft-services {
    padding: 80px 0;
    background: #f8fafc;
}

.fast-track-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #00214D;
    margin-bottom: 15px;
}

.fast-track-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.ft-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.ft-service-card {
    background: white;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    position: relative;
}

.ft-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #D8AE5E;
}

.ft-service-card.popular {
    border-color: #D8AE5E;
    background: linear-gradient(to bottom, #fffbf0, #ffffff);
}

.ft-service-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ft-service-card .service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.ft-service-card h3 {
    color: #00214D;
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.ft-service-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 70px;
}

.ft-service-card .service-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D8AE5E;
    margin-bottom: 15px;
}

.ft-service-card .service-features {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* Benefits Section */
.ft-benefits {
    padding: 80px 0;
    background: white;
}

.ft-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.ft-benefit-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.ft-benefit-card:hover {
    background: linear-gradient(135deg, #00214D, #003d80);
}

.ft-benefit-card:hover h4,
.ft-benefit-card:hover p {
    color: white;
}

.ft-benefit-card .benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.ft-benefit-card h4 {
    color: #00214D;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ft-benefit-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Process Section */
.ft-process {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.ft-process .section-title {
    color: white;
}

.ft-process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.ft-process-step {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ft-process-step .step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.ft-process-step h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.ft-process-step p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ft-process .step-arrow {
    color: #D8AE5E;
    font-size: 2rem;
    font-weight: 300;
}

/* Ideal For Section */
.ft-ideal {
    padding: 60px 0;
    background: #f8fafc;
}

.ft-ideal-wrapper {
    text-align: center;
}

.ft-ideal h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 40px;
}

.ft-ideal-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.ft-ideal .ideal-item {
    background: white;
    padding: 20px 15px;
    border-radius: 12px;
    color: #334155;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.ft-ideal .ideal-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: #D8AE5E;
}

/* Form Section */
.ft-form-section {
    padding: 80px 0;
    background: white;
}

.ft-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #f8fafc;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.ft-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.ft-form-header h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 10px;
}

.ft-form-header p {
    color: #64748b;
}

.fast-track-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.fast-track-form .form-row.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.fast-track-form .form-group {
    display: flex;
    flex-direction: column;
}

.fast-track-form .form-group.full-width {
    grid-column: span 2;
}

.fast-track-form label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.fast-track-form input,
.fast-track-form select,
.fast-track-form textarea {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    color: #334155;
    font-family: 'Montserrat', sans-serif;
}

.fast-track-form input:focus,
.fast-track-form select:focus,
.fast-track-form textarea:focus {
    outline: none;
    border-color: #D8AE5E;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.2);
}

.fast-track-form input::placeholder,
.fast-track-form textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.fast-track-form select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.fast-track-form textarea {
    resize: vertical;
    min-height: 80px;
}

.fast-track-form .form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-submit-ft {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-submit-ft:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* FAQ Section */
.ft-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.ft-faq .faq-list {
    max-width: 800px;
    margin: 50px auto 0;
}

.ft-faq .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    background: white;
}

.ft-faq .faq-question {
    width: 100%;
    padding: 20px 25px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #00214D;
    font-family: 'Montserrat', sans-serif;
}

.ft-faq .faq-question svg {
    transition: transform 0.3s ease;
    color: #D8AE5E;
}

.ft-faq .faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.ft-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.ft-faq .faq-answer p {
    padding: 0 25px 20px;
    color: #64748b;
    line-height: 1.6;
}

/* CTA Section */
.ft-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.ft-cta .cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.ft-cta h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
}

.ft-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    margin-bottom: 30px;
}

.ft-cta .cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.ft-cta .btn-whatsapp,
.ft-cta .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ft-cta .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.ft-cta .btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.ft-cta .btn-phone {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
}

.ft-cta .btn-phone:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(216, 174, 94, 0.4);
}

/* Fast Track Responsive */
@media (max-width: 1024px) {
    .ft-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ft-ideal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ft-hero h1 {
        font-size: 2.2rem;
    }
    
    .ft-hero p {
        font-size: 1.1rem;
    }
    
    .ft-hero .hero-buttons {
        flex-direction: column;
    }
    
    .ft-hero .btn-primary,
    .ft-hero .btn-secondary {
        justify-content: center;
    }
    
    .ft-services-grid {
        grid-template-columns: 1fr;
    }
    
    .ft-service-card p {
        min-height: auto;
    }
    
    .ft-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .ft-process-steps {
        flex-direction: column;
    }
    
    .ft-process .step-arrow {
        transform: rotate(90deg);
    }
    
    .ft-ideal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ft-form-wrapper {
        padding: 30px 20px;
    }
    
    .fast-track-form .form-row,
    .fast-track-form .form-row.three-cols {
        grid-template-columns: 1fr;
    }
    
    .fast-track-form .form-group.full-width {
        grid-column: span 1;
    }
    
    .fast-track-page .section-title {
        font-size: 1.8rem;
    }
    
    .ft-cta h2 {
        font-size: 1.8rem;
    }
    
    .ft-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .ft-cta .btn-whatsapp,
    .ft-cta .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ========================================
   ADDITIONAL STAFF PAGE STYLES
======================================== */

.additional-staff-page {
    font-family: 'Montserrat', sans-serif;
}

/* Hero Section */
.staff-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.staff-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
    z-index: 1;
}

.staff-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.staff-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.staff-hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 33, 77, 0.85) 0%, rgba(0, 61, 128, 0.7) 100%);
}

.staff-hero .container {
    position: relative;
    z-index: 3;
}

.staff-hero-content {
    max-width: 700px;
    color: white;
    padding: 60px 0;
}

.staff-hero .hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.staff-hero h1 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.staff-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

.staff-hero .hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.staff-hero .btn-primary,
.staff-hero .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.staff-hero .btn-primary {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.staff-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.staff-hero .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.staff-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Introduction Section */
.staff-intro {
    padding: 60px 0;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
}

.staff-intro-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.staff-intro h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
}

.staff-intro p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Services Section */
.staff-services {
    padding: 80px 0;
    background: #f8fafc;
}

.additional-staff-page .section-title {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #00214D;
    margin-bottom: 15px;
}

.additional-staff-page .section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.staff-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.staff-service-card {
    background: white;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
}

.staff-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #D8AE5E;
}

.staff-service-card .service-emoji {
    font-size: 3rem;
    margin-bottom: 20px;
}

.staff-service-card h3 {
    color: #00214D;
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.staff-service-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 65px;
}

.staff-service-card .service-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #D8AE5E;
    margin-bottom: 15px;
}

.staff-service-card .service-features {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

/* Why Choose Us Section */
.staff-why {
    padding: 80px 0;
    background: white;
}

.staff-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.staff-why-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.staff-why-card:hover {
    background: linear-gradient(135deg, #00214D, #003d80);
}

.staff-why-card:hover h4,
.staff-why-card:hover p {
    color: white;
}

.staff-why-card .why-emoji {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.staff-why-card h4 {
    color: #00214D;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.staff-why-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Occasions Section */
.staff-occasions {
    padding: 60px 0;
    background: #f8fafc;
}

.staff-occasions-wrapper {
    text-align: center;
}

.staff-occasions h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 40px;
}

.staff-occasions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.staff-occasions .occasion-item {
    position: relative;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    height: 200px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
}

.staff-occasions .occasion-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 33, 77, 0.85) 0%, rgba(0, 33, 77, 0.3) 50%, transparent 100%);
    transition: all 0.3s ease;
}

.staff-occasions .occasion-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.staff-occasions .occasion-item:hover::before {
    background: linear-gradient(to top, rgba(216, 174, 94, 0.9) 0%, rgba(216, 174, 94, 0.4) 50%, transparent 100%);
}

.staff-occasions .occasion-text {
    position: relative;
    z-index: 2;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 25px 20px;
    width: 100%;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Process Section */
.staff-process {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.staff-process .section-title {
    color: white;
}

.staff-process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.staff-process-step {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.staff-process-step .step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.staff-process-step h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.staff-process-step p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}

.staff-process .step-arrow {
    color: #D8AE5E;
    font-size: 2rem;
    font-weight: 300;
}

/* Form Section */
.staff-form-section {
    padding: 80px 0;
    background: white;
}

.staff-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #f8fafc;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.staff-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.staff-form-header h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #00214D;
    margin-bottom: 10px;
}

.staff-form-header p {
    color: #64748b;
}

.staff-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.staff-form .form-group {
    display: flex;
    flex-direction: column;
}

.staff-form .form-group.full-width {
    grid-column: span 2;
}

.staff-form label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.staff-form input,
.staff-form select,
.staff-form textarea {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    color: #334155;
    font-family: 'Montserrat', sans-serif;
}

.staff-form input:focus,
.staff-form select:focus,
.staff-form textarea:focus {
    outline: none;
    border-color: #D8AE5E;
    box-shadow: 0 0 0 3px rgba(216, 174, 94, 0.2);
}

.staff-form input::placeholder,
.staff-form textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.staff-form select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.staff-form textarea {
    resize: vertical;
    min-height: 100px;
}

.staff-form .form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-submit-staff {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-submit-staff:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* FAQ Section */
.staff-faq {
    padding: 80px 0;
    background: #f8fafc;
}

.staff-faq .faq-list {
    max-width: 800px;
    margin: 50px auto 0;
}

.staff-faq .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    background: white;
}

.staff-faq .faq-question {
    width: 100%;
    padding: 20px 25px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #00214D;
    font-family: 'Montserrat', sans-serif;
}

.staff-faq .faq-question svg {
    transition: transform 0.3s ease;
    color: #D8AE5E;
}

.staff-faq .faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.staff-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.staff-faq .faq-answer p {
    padding: 0 25px 20px;
    color: #64748b;
    line-height: 1.6;
}

/* CTA Section */
.staff-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #00214D 0%, #003d80 100%);
}

.staff-cta .cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.staff-cta h2 {
    font-family: 'Alexandria', 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
}

.staff-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    margin-bottom: 30px;
}

.staff-cta .cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.staff-cta .btn-whatsapp,
.staff-cta .btn-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.staff-cta .btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.staff-cta .btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.staff-cta .btn-phone {
    background: linear-gradient(135deg, #D8AE5E, #B8941F);
    color: white;
}

.staff-cta .btn-phone:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(216, 174, 94, 0.4);
}

/* Additional Staff Responsive */
@media (max-width: 1024px) {
    .staff-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .staff-occasions .occasion-item {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .staff-hero h1 {
        font-size: 2.2rem;
    }
    
    .staff-hero p {
        font-size: 1.1rem;
    }
    
    .staff-hero .hero-buttons {
        flex-direction: column;
    }
    
    .staff-hero .btn-primary,
    .staff-hero .btn-secondary {
        justify-content: center;
    }
    
    .staff-services-grid {
        grid-template-columns: 1fr;
    }
    
    .staff-service-card p {
        min-height: auto;
    }
    
    .staff-why-grid {
        grid-template-columns: 1fr;
    }
    
    .staff-occasions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .staff-occasions .occasion-item {
        height: 150px;
    }
    
    .staff-occasions .occasion-text {
        font-size: 0.95rem;
        padding: 15px;
    }
    
    .staff-process-steps {
        flex-direction: column;
    }
    
    .staff-process .step-arrow {
        transform: rotate(90deg);
    }
    
    .staff-form-wrapper {
        padding: 30px 20px;
    }
    
    .staff-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .staff-form .form-group.full-width {
        grid-column: span 1;
    }
    
    .additional-staff-page .section-title {
        font-size: 1.8rem;
    }
    
    .staff-cta h2 {
        font-size: 1.8rem;
    }
    
    .staff-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .staff-cta .btn-whatsapp,
    .staff-cta .btn-phone {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}