/* ====================================
   PALAIS ASMAA - Traditional Marrakech Kasbah Theme
   ==================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #2c1810;
    overflow-x: hidden;
    background: #fdf8f0;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

/* ====================================
   MARRAKECH ZELLIGE COLOR PALETTE
   Terracotta:      #B5502E (kasbah clay walls)
   Deep Red:        #8B2635 (traditional zellige red)
   Gold:            #D4AF37 (brass & lantern gold)
   Majorelle Blue:  #1E3F8F (Jardin Majorelle blue)
   Emerald:         #0F6B4D (mint-tea green tile)
   Sand:            #FDF8F0 (plaster cream)
   ==================================== */
:root {
    --terracotta: #b5502e;
    --terracotta-dark: #8f3d22;
    --red: #8b2635;
    --red-dark: #6b1d2a;
    --gold: #d4af37;
    --gold-light: #e8cc6a;
    --blue: #1e3f8f;
    --blue-dark: #16326f;
    --emerald: #0f6b4d;
    --emerald-dark: #0b5039;
    --cream: #fdf8f0;
    --cream-dark: #f5e8d5;
    --ink: #3d2314;
    --ink-soft: #5a3e2b;
}

/* Reusable zellige tile texture (8-point star lattice) */
.zellige-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Cpath d='M45 5 L54 25 L76 15 L64 34 L85 45 L64 56 L76 75 L54 65 L45 85 L36 65 L14 75 L26 56 L5 45 L26 34 L14 15 L36 25 Z'/%3E%3Ccircle cx='45' cy='45' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 90px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(135deg, #8b2635 0%, #6b1d2a 100%);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 4px solid var(--gold);
    box-shadow: 0 2px 0 0 var(--blue), 0 4px 0 0 var(--emerald);
}

.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(139, 38, 53, 0.5);
}

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

.nav-logo h2 {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Amiri', serif;
    letter-spacing: 1px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #fdf8f3;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 0;
}

.nav-menu a:hover {
    color: var(--gold);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--gold);
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #fdf8f0 0%, #f5e8d5 100%);
    padding: 100px 20px 50px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%238b2635' stroke-width='1' opacity='0.55'%3E%3Cpath d='M45 5 L54 25 L76 15 L64 34 L85 45 L64 56 L76 75 L54 65 L45 85 L36 65 L14 75 L26 56 L5 45 L26 34 L14 15 L36 25 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 90px;
    opacity: 0.45;
}

.hero-content {
    flex: 1;
    max-width: 550px;
    z-index: 2;
    position: relative;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.moroccan-ornament {
    color: var(--gold);
    font-size: 2rem;
    margin: 1rem 0;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
    animation: lanternGlow 3s ease-in-out infinite;
}

.hero-title {
    font-size: 3.5rem;
    color: var(--red);
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    font-weight: 400;
}

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

.hero-image {
    flex: 1;
    position: relative;
    animation: fadeInRight 1s ease-out;
}

.hero-image::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
    border: 2px dashed rgba(212, 175, 55, 0.5);
    pointer-events: none;
    max-width: 500px;
    height: 460px;
    margin: 0 auto;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    height: 450px;
    object-fit: cover;
    border-radius: 50% 50% 10px 10px / 24% 24% 10px 10px;
    box-shadow: 0 25px 50px rgba(139, 38, 53, 0.3);
    border: 5px solid var(--gold);
    display: block;
    margin: 0 auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 22px 4px 22px 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #8b2635 0%, #a0364a 100%);
    color: var(--gold);
    border: 2px solid var(--gold);
    box-shadow: 0 4px 15px rgba(139, 38, 53, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.5);
    background: linear-gradient(135deg, #a0364a 0%, #8b2635 100%);
}

.btn-secondary {
    background: transparent;
    color: var(--red);
    border: 2px solid var(--red);
}

.btn-secondary:hover {
    background: var(--red);
    color: var(--gold);
    transform: translateY(-3px);
}

.btn-large {
    padding: 16px 36px;
    font-size: 1.1rem;
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-subtitle {
    display: inline-block;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}

.section-header h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
    color: var(--red);
    background: linear-gradient(120deg, var(--red) 0%, var(--terracotta) 45%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.moroccan-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.moroccan-divider::before,
.moroccan-divider::after {
    content: '';
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.moroccan-divider span {
    color: var(--gold);
    font-size: 1.2rem;
    position: relative;
    box-shadow:
        -34px 0 0 -3px var(--terracotta),
        -17px 0 0 -4px var(--blue),
        17px 0 0 -4px var(--emerald),
        34px 0 0 -3px var(--terracotta);
    border-radius: 50%;
}

/* About Section */
.about {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--blue), var(--emerald), var(--gold), var(--red));
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    font-size: 2rem;
    color: var(--red);
    margin-bottom: 1.5rem;
    font-family: 'Amiri', serif;
}

.about-text p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.about-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, #fdf8f3, #f5ebe0);
    border-radius: 8px;
    border: 1px solid var(--gold);
}

.about-feature:nth-child(1) i { color: var(--red); }
.about-feature:nth-child(2) i { color: var(--blue); }
.about-feature:nth-child(3) i { color: var(--emerald); }

.about-feature span {
    font-size: 0.9rem;
    color: var(--ink-soft);
    font-weight: 500;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 50% 50% 15px 15px / 26% 26% 15px 15px;
    box-shadow: 0 20px 40px rgba(139, 38, 53, 0.2);
    border: 4px solid rgba(212, 175, 55, 0.85);
}

.about-image .image-frame {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100%;
    height: 100%;
    border: 4px solid var(--gold);
    border-radius: 50% 50% 15px 15px / 26% 26% 15px 15px;
    z-index: -1;
}

/* Features Section */
.features {
    padding: 80px 0;
    background: linear-gradient(135deg, #8b2635 0%, #6b1d2a 100%);
    position: relative;
    overflow: hidden;
}

.features::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.18'%3E%3Cpath d='M45 5 L54 25 L76 15 L64 34 L85 45 L64 56 L76 75 L54 65 L45 85 L36 65 L14 75 L26 56 L5 45 L26 34 L14 15 L36 25 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 90px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}

.feature-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gold);
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card:nth-child(1) .feature-icon { background: var(--gold); }
.feature-card:nth-child(2) .feature-icon { background: var(--emerald-dark); }
.feature-card:nth-child(3) .feature-icon { background: var(--blue); }

.feature-icon i {
    font-size: 1.8rem;
    color: #8b2635;
}

.feature-card:nth-child(2) .feature-icon i,
.feature-card:nth-child(3) .feature-icon i {
    color: var(--gold-light);
}

.feature-card h4 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-family: 'Amiri', serif;
}

.feature-card p {
    color: #fdf8f3;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Rooms Section */
.rooms {
    padding: 100px 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23b5502e' stroke-width='1' opacity='0.08'%3E%3Cpath d='M45 5 L54 25 L76 15 L64 34 L85 45 L64 56 L76 75 L54 65 L45 85 L36 65 L14 75 L26 56 L5 45 L26 34 L14 15 L36 25 Z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, #fdf8f3 0%, #f5ebe0 100%);
    background-size: 90px 90px, cover;
}

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

.room-card {
    background: white;
    border-radius: 50% 50% 15px 15px / 10% 10% 15px 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(139, 38, 53, 0.15);
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.room-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    box-shadow: 0 20px 50px rgba(139, 38, 53, 0.25);
}

.room-card:nth-child(3n+1):hover { border-color: var(--terracotta); }
.room-card:nth-child(3n+2):hover { border-color: var(--blue); }
.room-card:nth-child(3n+3):hover { border-color: var(--emerald); }

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

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

.room-card:hover .room-image img {
    transform: scale(1.1);
}

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

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

.room-content {
    padding: 2rem;
}

.room-content h3 {
    font-size: 1.5rem;
    color: var(--red);
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
}

.room-content p {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.room-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.room-features span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    background: #fdf8f3;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--gold);
}

.room-features i {
    color: var(--red);
    font-size: 0.9rem;
}

/* Amenities Section */
.amenities {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.amenities::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--blue), var(--emerald), var(--gold), var(--red));
}

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

.amenity-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, #fdf8f3 0%, #f5ebe0 100%);
    border-radius: 15px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.amenity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.amenity-card:hover::before {
    transform: scaleX(1);
}

.amenity-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold);
    box-shadow: 0 15px 35px rgba(139, 38, 53, 0.2);
}

.amenity-card i {
    font-size: 3rem;
    color: var(--red);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.amenity-card:nth-child(6n+1) i { color: var(--terracotta); }
.amenity-card:nth-child(6n+2) i { color: var(--blue); }
.amenity-card:nth-child(6n+3) i { color: var(--emerald); }
.amenity-card:nth-child(6n+4) i { color: var(--red); }
.amenity-card:nth-child(6n+5) i { color: var(--terracotta-dark); }
.amenity-card:nth-child(6n+6) i { color: var(--blue-dark); }

.amenity-card:hover i {
    color: var(--gold);
    transform: scale(1.1);
}

.amenity-card h3 {
    font-size: 1.3rem;
    color: var(--red);
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
}

.amenity-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Gallery Section */
.gallery {
    padding: 100px 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%231e3f8f' stroke-width='1' opacity='0.06'%3E%3Cpath d='M45 5 L54 25 L76 15 L64 34 L85 45 L64 56 L76 75 L54 65 L45 85 L36 65 L14 75 L26 56 L5 45 L26 34 L14 15 L36 25 Z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, #fdf8f3 0%, #f5ebe0 100%);
    background-size: 90px 90px, cover;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: 50% 50% 15px 15px / 16% 16% 15px 15px;
}

.gallery-item:nth-child(1):hover { border-color: var(--terracotta); box-shadow: 0 15px 35px rgba(181, 80, 46, 0.35); }
.gallery-item:nth-child(2):hover { border-color: var(--blue); box-shadow: 0 15px 35px rgba(30, 63, 143, 0.35); }
.gallery-item:nth-child(3):hover { border-color: var(--emerald); box-shadow: 0 15px 35px rgba(15, 107, 77, 0.35); }
.gallery-item:hover {
    border-color: var(--gold);
    box-shadow: 0 15px 35px rgba(139, 38, 53, 0.3);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--blue), var(--emerald), var(--gold), var(--red));
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.contact-item i {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b2635 0%, #a0364a 100%);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-item h4 {
    color: var(--red);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    font-family: 'Amiri', serif;
}

.contact-item p {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.contact-cta {
    background: linear-gradient(135deg, #fdf8f3 0%, #f5ebe0 100%);
    padding: 3rem;
    border-radius: 15px;
    border: 3px solid var(--gold);
    text-align: center;
    position: relative;
}

.contact-cta::before,
.contact-cta::after {
    content: '◆';
    position: absolute;
    top: -14px;
    color: var(--gold);
    background: #fdf8f0;
    width: 26px;
    text-align: center;
    font-size: 1rem;
}

.contact-cta::before { left: 30px; }
.contact-cta::after { right: 30px; }

.contact-cta h3 {
    color: var(--red);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
}

.contact-cta p {
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #8b2635 0%, #6b1d2a 100%);
    color: #fdf8f3;
    padding: 60px 0 30px;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gold), var(--blue), var(--emerald), var(--gold));
}

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

.footer-section h3,
.footer-section h4 {
    color: var(--gold);
    margin-bottom: 1.5rem;
    font-family: 'Amiri', serif;
}

.footer-section h3 {
    font-size: 1.5rem;
}

.footer-section p {
    color: #f5ebe0;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section ul li a {
    color: #f5ebe0;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.footer-section ul li a:hover {
    color: var(--gold);
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: var(--gold);
    color: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.social-links a:nth-child(1) { background: var(--gold); color: var(--red); }
.social-links a:nth-child(2) { background: var(--terracotta); color: var(--cream); }
.social-links a:nth-child(3) { background: var(--blue); color: var(--cream); }
.social-links a:nth-child(4) { background: var(--emerald); color: var(--cream); }

.social-links a:hover {
    transform: translateY(-3px) rotate(360deg);
    background: #f5ebe0;
    color: var(--red);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    color: #f5ebe0;
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lanternGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.9);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: linear-gradient(135deg, #8b2635 0%, #6b1d2a 100%);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
        border-bottom: 4px solid var(--gold);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

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

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .hero {
        flex-direction: column;
        padding: 120px 20px 50px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-image {
        margin-top: 2rem;
    }

    .hero-image img {
        height: 350px;
    }

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .rooms-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .contact-cta {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .about-features {
        flex-direction: column;
    }

    .room-features {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Print styles */
@media print {
    .navbar,
    .hero-buttons,
    .footer,
    .btn {
        display: none;
    }
}