.hero {
    height: 100vh;
    background: url('1A.jpg') no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.parallax {
    background-attachment: fixed;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    color: #f5f5f5;
    z-index: 1;
    max-width: 50%;
}

.hero-text h1 {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.8);
    font-family: 'Futura', sans-serif;
    color: #c19b2a;
    letter-spacing: 2px;
}

.hero-text p {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: #e0e0e0;
    font-style: italic;
}

.scroll-left {
    opacity: 0;
    transform: translateX(-100px);
    animation: scrollLeft 1.2s ease forwards;
}

.scroll-left:nth-child(1) { animation-delay: 0.5s; }
.scroll-left:nth-child(2) { animation-delay: 0.7s; }
.scroll-left:nth-child(3) { animation-delay: 0.9s; }
.scroll-left:nth-child(4) { animation-delay: 1.1s; }

@keyframes scrollLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.btn-primary {
    background-color: #c19b2a;
    border-color: #c19b2a;
    padding: 0.8rem 2.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #a17f24;
    border-color: #a17f24;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-outline-light {
    border-color: #e0e0e0;
    color: #e0e0e0;
    padding: 0.8rem 2.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #c19b2a;
    border-color: #c19b2a;
    color: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.animate-btn {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    text-align: center;
}

.scroll-icon {
    display: inline-block;
    color: #f5f5f5;
    font-size: 2rem;
    animation: bounce 2s infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Architectural Lines */
.architectural-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create a grid-like pattern with gold, white, and silver lines */
    background: 
        /* Diagonal gold lines (45deg) */
        linear-gradient(
            45deg,
            transparent 0%,
            transparent 48%,
            rgba(193, 155, 42, 0.02) 50%, /* Gold */
            transparent 52%,
            transparent 100%
        ),
        /* Diagonal gold lines (135deg) */
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 48%,
            rgba(193, 155, 42, 0.02) 50%, /* Gold */
            transparent 52%,
            transparent 100%
        ),
        /* Diagonal white lines (45deg) */
        linear-gradient(
            45deg,
            transparent 0%,
            transparent 48%,
            rgba(245, 245, 245, 0.015) 50%, /* White */
            transparent 52%,
            transparent 100%
        ),
        /* Diagonal white lines (135deg) */
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 48%,
            rgba(245, 245, 245, 0.015) 50%, /* White */
            transparent 52%,
            transparent 100%
        ),
        /* Diagonal silver lines (30deg) */
        linear-gradient(
            30deg,
            transparent 0%,
            transparent 48%,
            rgba(211, 211, 211, 0.01) 50%, /* Silver */
            transparent 52%,
            transparent 100%
        ),
        /* Diagonal silver lines (150deg) */
        linear-gradient(
            150deg,
            transparent 0%,
            transparent 48%,
            rgba(211, 211, 211, 0.01) 50%, /* Silver */
            transparent 52%,
            transparent 100%
        ),
        /* Horizontal grid lines */
        linear-gradient(
            to right,
            rgba(193, 155, 42, 0.01) 1px, /* Gold */
            transparent 1px
        ),
        /* Vertical grid lines */
        linear-gradient(
            to bottom,
            rgba(245, 245, 245, 0.01) 1px, /* White */
            transparent 1px
        );
    background-size: 
        150px 150px, /* Diagonal gold lines (increased for less density) */
        150px 150px, /* Diagonal gold lines */
        200px 200px, /* Diagonal white lines (increased for less density) */
        200px 200px, /* Diagonal white lines */
        180px 180px, /* Diagonal silver lines (slightly different size for variety) */
        180px 180px, /* Diagonal silver lines */
        75px 75px, /* Horizontal grid lines (increased for less density) */
        75px 75px; /* Vertical grid lines */
    z-index: 0;
    animation: 
        diagonalGoldMove 40s linear infinite, /* Diagonal gold lines */
        diagonalWhiteMove 50s linear infinite, /* Diagonal white lines */
        diagonalSilverMove 45s linear infinite, /* Diagonal silver lines */
        gridHorizontalMove 30s linear infinite, /* Horizontal grid */
        gridVerticalMove 30s linear infinite; /* Vertical grid */
}

/* Animation for diagonal gold lines (moving top-left to bottom-right) */
@keyframes diagonalGoldMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1000px 1000px;
    }
}

/* Animation for diagonal white lines (moving bottom-right to top-left) */
@keyframes diagonalWhiteMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1500px -1500px;
    }
}

/* Animation for diagonal silver lines (moving top-right to bottom-left) */
@keyframes diagonalSilverMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1200px 1200px;
    }
}

/* Animation for horizontal grid lines (moving left to right) */
@keyframes gridHorizontalMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 500px 0;
    }
}

/* Animation for vertical grid lines (moving top to bottom) */
@keyframes gridVerticalMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 500px;
    }
}