:root {
    --primary-color: #d4af37;
    /* Elegant Gold */
    --primary-dark: #b59228;
    --bg-color: #0a192f;
    /* Royal Navy Blue */
    --bg-lighter: #112240;
    --text-color: #ffffff;
    --text-muted: #8892b0;
    --font-heading: 'Great Vibes', cursive;
    --font-subheading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    --glass-bg: rgba(16, 28, 55, 0.9);
    --glass-border: rgba(212, 175, 55, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Typography */
h1,
h2,
h3 {
    color: var(--primary-color);
}

h1 {
    font-family: var(--font-heading);
    font-weight: 400;
}

h2 {
    font-family: var(--font-subheading);
    margin-bottom: 1rem;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-up {
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

.delay-1 {
    animation-delay: 0.3s;
}

.delay-2 {
    animation-delay: 0.6s;
}

.delay-3 {
    animation-delay: 0.9s;
}

/* Cover Section */
.cover-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at center, #1a2a47 0%, var(--bg-color) 100%);
    position: relative;
    z-index: 100;
}

.cover-content h3 {
    font-family: var(--font-subheading);
    letter-spacing: 3px;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--text-color);
}

.names-wrapper h1 {
    font-size: 4rem;
    line-height: 1.2;
}

.ampersand {
    font-family: var(--font-subheading);
    font-size: 2rem;
    color: var(--text-muted);
}

.date-display {
    margin: 2rem 0;
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding: 10px 20px;
    display: inline-block;
}

/* Main Content */
.hidden {
    display: none;
}

.content-section {
    padding: 4rem 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.text-center {
    text-align: center;
}

.bismillah {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

/* Cards & Components */
.detail-card,
.timer-box {
    background: var(--bg-lighter);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-box i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Calendar Styling */
.calendar-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.calendar-table th {
    color: var(--primary-color);
    padding: 10px;
    font-family: var(--font-subheading);
}

.calendar-table td {
    padding: 10px;
}

.selected-date {
    background-color: var(--primary-color);
    color: var(--bg-color);
    border-radius: 50%;
    font-weight: bold;
}

/* Countdown */
.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 2rem 0;
}

.timer-box {
    padding: 10px;
    min-width: 60px;
    margin: 0;
}

.timer-box span {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* Form */
.form-group {
    margin-bottom: 1.5rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--bg-lighter);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: white;
    font-family: var(--font-body);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Footer */
footer {
    padding: 2rem;
    background-color: var(--bg-lighter);
    color: var(--text-muted);
}

.hashtag {
    font-family: var(--font-subheading);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* Floating Navigation */
.floating-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    gap: 15px;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 400px;
    justify-content: space-between;
}

.floating-nav a {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    transition: color 0.3s;
}

.floating-nav a i {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.floating-nav a:hover,
.floating-nav a.active {
    color: var(--primary-color);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--bg-lighter);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--primary-color);
    width: 90%;
    max-width: 350px;
    position: relative;
    text-align: center;
    animation: fadeInUp 0.3s ease;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

.contact-item {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-item i {
    font-size: 1.5rem;
    color: #25d366;
    /* WhatsApp Green */
}

/* Mobile Responsiveness */

/* --- Agency Portfolio Styles --- */

body.agency-mode {
    background-color: #f8f9fa;
    color: #333;
    font-family: 'Montserrat', sans-serif;
}

.agency-header {
    background: #fff;
    padding: 1.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

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

/* .agency-header .logo removed as it is now an image */
.logo-img {
    height: 60px;
    /* Adjust height as needed */
    width: auto;
    object-fit: contain;
}

.agency-header nav a {
    text-decoration: none;
    color: #333;
    margin-left: 20px;
    font-weight: 500;
}

.btn-nav {
    background: #0a192f;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
}

/* Hero */
.hero {
    background: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.8)), url('assets/hero-bg.jpg');
    /* Graceful fallback if no image */
    background-color: #0a192f;
    height: 45vh;
    /* Reduced height */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-top: 60px;
    /* Offset for sticky header */
}

.hero-title {
    font-size: 4rem;
    /* Larger impact */
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: -1px;
    /* Tighter for modern serif look */
    margin-bottom: 1.5rem;
    color: #d4af37;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* ... existing sections ... */

.section-title-agency {
    text-align: center;
    font-size: 3rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    margin-bottom: 1.5rem;
    /* Reduced from 3.5rem */
    color: #0a192f;
    position: relative;
    display: block;
    /* Fixed alignment */
}

/* Templates Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    /* Slightly wider minmax */
    gap: 40px;
    /* Increased gap */
    margin-top: 20px;
    justify-content: center;
    /* Center the grid items if line isn't full */
}

.template-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

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

.card-info {
    padding: 20px;
}

.card-info h3 {
    color: #0a192f;
    margin-bottom: 10px;
}

.card-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.btn-outline {
    border: 1px solid #0a192f;
    color: #0a192f;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    flex: 1;
    text-align: center;
}

.btn-solid {
    background: #0a192f;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    flex: 1;
    text-align: center;
}

/* Features - Landscape View */
.features-grid {
    display: flex;
    /* Flex is better for single row landscape */
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    text-align: center;
    flex-wrap: wrap;
    /* Wrap only on small screens */
}

.feature-item {
    flex: 1;
    min-width: 200px;
}

.feature-item i {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 15px;
}

/* Contact - Beautiful Redesign */
#contact .container {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding-bottom: 60px;
    /* Added padding to prevent button touching footer */
}

#contact h2 {
    margin-bottom: 10px;
}

.btn-whatsapp {
    background: #25d366;
    color: white;
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Agency Fonts */
/* ... */

/* Demo Back Badge */
.demo-badge {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(10, 25, 47, 0.85);
    color: #d4af37;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    z-index: 9999;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.demo-badge:hover {
    background: #d4af37;
    color: #0a192f;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .agency-header .container {
        flex-direction: column;
        gap: 15px;
    }

    .agency-header nav {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .agency-header nav a {
        margin-left: 0;
        font-size: 0.9rem;
    }

    .hero {
        height: auto;
        min-height: 50vh;
        padding-top: 100px;
        padding-bottom: 50px;
    }

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

    .features-grid {
        flex-direction: column;
        /* Stack on mobile */
        align-items: center;
    }

    .feature-item {
        width: 100%;
        max-width: 300px;
    }

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

    /* Sticky WhatsApp Button for Mobile */
    .btn-whatsapp {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        padding: 12px 20px;
        font-size: 1rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        /* Ensure it stands out */
        border: 2px solid white;
        /* Contrast against page */
    }

    /* Hide the original contact section button to avoid duplicate fixed buttons? 
       Actually user said "whatsapp button to down", likely meaning move the button FROM the contact section TO the bottom of the screen.
       We can just style the existing .btn-whatsapp inside #contact to be fixed if we want, OR duplicate it. 
       Better approach: The current logic applies fixed positioning to the EXISTING .btn-whatsapp class on mobile.
       This effectively "moves" it from the document flow to the bottom right.
       We should add a placeholder in the flow so layout doesn't break, or just accept it floats.
    */
}