/* Table of Contents
--------------------------------
1. Global & Root Styles
2. Header Styles
3. Hero Section
4. General Section Styles
5. About Section
6. Story Section (Timeline)
7. Momos Section (Grid)
8. Partnership Section
9. Contact Section
10. Footer
11. Responsive Design
--------------------------------*/

/* 1. Global & Root Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary: #d35400;
    --secondary: #f39c12;
    --accent: #e74c3c;
    --light: #f5f5f5;
    --dark: #333;
    --nepal-blue: #2980b9;
    --nepal-red: #c0392b;
}

body {
    background-color: #fff;
    color: var(--dark);
    line-height: 1.6;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48HRleHQgeD0iNTAiIHk9IjUwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmaWxsPSJyZ2JhKDIxNiwgMTE4LCAxMDIsIDAuMSkiPk5ITTwvdGV4dD48L3N2Zz4=');
    background-repeat: repeat;
    background-attachment: fixed;
}

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

/* 2. Header Styles */
header {
    background: linear-gradient(135deg, var(--nepal-red) 0%, var(--primary) 100%);
    height: 80px; /* CRITICAL: Establishes a fixed height for the entire header. */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    height: 100%;        /* Takes the full 80px height from the header. */
    padding: 10px 0;     /* Creates 10px of space top and bottom. Usable space is now 60px. */
    text-decoration: none;
    /* IMPORTANT: The following rule helps prevent the logo from shrinking if text wraps */
    flex-shrink: 0; 
}

.logo img {
    height: 78px;        /* CRITICAL: Makes the image fill the usable height (60px). */    
    width: auto;         /* CRITICAL: Browser calculates width to maintain the 1:1 square ratio. */
    object-fit: contain; /* Best practice to ensure scaling is correct. */
    display: block;      /* Prevents extra space below the image. */
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    color: var(--secondary);
}


/* 3. Hero Section */
.hero {
    background: url('../images/Banner1.png') no-repeat center center/cover;
    height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
    color: white;
    text-align: center;
    width: 100%;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background: var(--secondary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 4. General Section Styles */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--primary);
}

.section-title p {
    color: #777;
    max-width: 700px;
    margin: 0 auto;
}

/* 5. About Section */
.about-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-image {
    flex: 1;
    min-width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.05);
}

/* 6. Story Section (Timeline) */
.story {
    background-color: #f9f9f9;
}

.story-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.timeline {
    position: relative;
    margin: 50px 0;
    padding-left: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.timeline-item {
    width: 50%;
    padding: 20px 40px;
    position: relative;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 32px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
}

.timeline-item:nth-child(odd)::before {
    right: -10px;
}

.timeline-item:nth-child(even)::before {
    left: -10px;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    color: var(--primary);
    margin-bottom: 10px;
}

/* 7. Momos Section (Grid) */
.momos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.momo-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.momo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

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

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

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

.momo-details {
    padding: 20px;
}

.momo-details h3 {
    color: var(--primary);
    margin-bottom: 10px;
}

.momo-details p {
    color: #777;
    font-size: 14px;
    margin-bottom: 15px;
}

.special-badge {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

/* 8. Partnership Section */
.partnership {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.partnership-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.partnership-text {
    flex: 1;
    min-width: 300px;
}

.partnership-form {
    flex: 1;
    min-width: 300px;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* 9. Contact Section */
.contact {
    background-color: white;
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    color: var(--primary);
    margin-bottom: 20px;
}

.contact-details {
    margin-bottom: 30px;
}

.contact-details p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-details i {
    color: var(--primary);
    margin-right: 10px;
    font-size: 18px;
    width: 24px;
}

.contact-form {
    flex: 1;
    min-width: 300px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 10. Footer */
footer {
    background: var(--dark);
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 30px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h3 {
    color: var(--secondary);
    margin-bottom: 20px;
    font-size: 18px;
}

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

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--secondary);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #444;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
    color: #bbb;
    font-size: 14px;
}

/* 11. Responsive Design */
@media (max-width: 768px) {
    /* Responsive Header Adjustments */
    header {
        height: auto; /* Allow header height to be flexible */
        padding: 15px 0; /* Add padding back for smaller screens */
    }

    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .logo {
        height: 50px; /* Adjust logo height for mobile */
        margin-bottom: 15px; /* Add space between logo and nav */
        padding: 0; /* Remove vertical padding on mobile */
    }
    
    nav ul {
        margin-top: 0;
        justify-content: center;
        flex-wrap: wrap; /* Allow nav items to wrap */
        padding: 0;
    }
    
    nav ul li {
        margin: 5px 10px;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1.2rem;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 20px;
        text-align: left;
    }
    
    .timeline-item:nth-child(even) {
        left: 0;
    }
    
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        left: 10px;
    }
}