/* SHARED STYLESHEET: style.css */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&family=Noto+Sans+Armenian:wght@400;700&display=swap');

:root {
    --primary-color: #d62828;
    --secondary-color: #f77f00;
    --info-color: #0077b6;
    --success-color: #2a9d8f;
    --warning-color: #e9c46a;
    --page-bg: #f0f4f8;
    --header-footer-bg: #ffffff;
    --text-color: #333;
    --logo-font: 'Nunito', sans-serif;
    --body-font: 'Noto Sans Armenian', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--body-font);
    background-color: var(--page-bg);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============ HEADER & NAVIGATION STYLES ============ */
.site-header {
    background-color: var(--header-footer-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.logo a { text-decoration: none; }
.logo-image { max-height: 40px; display: block; }

/* Navigation Links */
.main-nav ul { list-style: none; display: flex; gap: 30px; }
.main-nav a { 
    text-decoration: none; 
    color: var(--text-color); 
    font-weight: 700; 
    font-size: 16px; 
    position: relative; 
    padding-bottom: 5px; 
}

.main-nav a::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 3px; 
    background-color: var(--primary-color); 
    transition: width 0.3s ease; 
}

.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

/* Mobile Menu Toggle Button (Hidden on Desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-color);
    cursor: pointer;
}

/* ============ MAIN CONTENT STYLES ============ */
main { padding: 50px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; flex-grow: 1; }

.hero-section { text-align: center; margin-bottom: 50px; }
.hero-section h1 { font-family: var(--logo-font); font-size: 48px; color: var(--primary-color); margin-bottom: 10px; }
.hero-section p { font-size: 20px; color: #555; max-width: 600px; margin: 0 auto; }

.section-title { font-size: 32px; margin-bottom: 30px; margin-top: 20px; text-align: center; color: var(--text-color); }

.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; width: 100%; max-width: 1200px; }
.game-card { background-color: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.game-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); }
.game-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.game-card h3 { font-size: 20px; padding: 20px; text-align: center; }

.game-category { width: 100%; max-width: 1200px; margin-bottom: 60px; }
.category-title { font-size: 28px; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--secondary-color); color: var(--primary-color); }

/* ============ FOOTER STYLES ============ */
.site-footer { background-color: #343a40; color: #f8f9fa; padding: 40px 20px; text-align: center; }
.site-footer .social-links { margin-bottom: 20px; }
.site-footer .social-links a { color: white; font-size: 24px; margin: 0 15px; transition: color 0.3s; }
.site-footer .social-links a:hover { color: var(--secondary-color); }
.site-footer .footer-slogan { font-style: italic; margin-bottom: 10px; color: #ced4da; }
.site-footer .copyright { font-size: 14px; color: #adb5bd; }

/* ============ OTHER COMPONENTS ============ */
.promo-banner-container { width: 100%; max-width: 1200px; padding: 0 10px; margin-bottom: 50px; }
.promo-banner { display: block; border-radius: 16px; background-color: #ffffff; padding: 20px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; }
.promo-banner:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.promo-banner-image { width: 100%; height: auto; display: block; border-radius: 8px; }

/* Forms */
.form-container { background-color: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); width: 100%; max-width: 800px; margin-bottom: 50px; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-color); font-size: 16px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; font-family: var(--body-font); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.2); }
.form-group textarea { resize: vertical; }
.radio-group, .checkbox-group { display: flex; gap: 25px; flex-wrap: wrap; }
.radio-group label, .checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.radio-group input, .checkbox-group input { accent-color: var(--primary-color); width: 18px; height: 18px; }
.submit-btn { display: block; width: 100%; padding: 15px; font-size: 18px; font-weight: 700; color: #fff; background-color: var(--primary-color); border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; font-family: var(--logo-font); }
.submit-btn:hover { background-color: #a71e1e; transform: translateY(-2px); }
#form-status { margin-top: 20px; text-align: center; font-size: 16px; font-weight: 700; }

/* Portfolio Section */
.portfolio-section { width: 100%; max-width: 1200px; margin-bottom: 60px; padding: 40px 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); }
.section-description { text-align: center; font-size: 18px; color: #555; max-width: 700px; margin: -15px auto 40px auto; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }
.portfolio-card { background-color: #f8f9fa; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.portfolio-card img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid #eee; }
.portfolio-card h3 { font-size: 18px; padding: 20px; text-align: center; font-weight: 700; }
.portfolio-cta-container { text-align: center; }
.portfolio-cta-btn { display: inline-block; padding: 12px 30px; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--secondary-color); border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, transform 0.2s ease; }
.portfolio-cta-btn:hover { background-color: #d86e00; transform: translateY(-2px); }

/* Order Hero Section (Cards) */
.order-hero-section-flex { display: flex; flex-direction: row; align-items: center; gap: 40px; width: 100%; background-color: #ffffff; padding: 30px 40px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.hero-section-link { display: block; text-decoration: none; color: inherit; max-width: 1100px; width: 100%; margin-bottom: 60px; }
.hero-section-link:hover .order-hero-section-flex { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.hero-image-container { flex: 1; max-width: 300px; min-width: 200px; }
.hero-banner-vertical { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.hero-text-container { flex: 2; text-align: left; }
.hero-text-container h1 { font-size: 38px; color: var(--primary-color); margin-bottom: 15px; font-family: var(--logo-font); text-decoration: none; }
.hero-text-container p { font-size: 18px; color: #555; line-height: 1.7; text-decoration: none; }

/* Language Flag Icons */
.flag-icon { height: 24px; width: auto; display: block; border-radius: 3px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.main-nav a.language-btn:hover .flag-icon { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.main-nav a.language-btn::after { display: none; }


/* ============ MOBILE RESPONSIVE STYLES (THE IMPORTANT PART) ============ */
@media (max-width: 820px) {
    .order-hero-section-flex { flex-direction: column; padding: 30px; }
    .hero-text-container { text-align: center; }
    .hero-text-container h1 { font-size: 32px; }
    .hero-text-container p { font-size: 16px; }
}

@media (max-width: 768px) {
    /* Header Structure for Mobile */
    .header-container {
        flex-wrap: wrap; /* Allows the menu to drop down */
    }

    .menu-toggle {
        display: block; /* Show hamburger button */
    }

    /* Navigation Hidden by Default on Mobile */
    .main-nav {
        display: none;
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid #eee;
    }

    /* When JavaScript adds the 'active' class, show the menu */
    .main-nav.active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav li {
        width: 100%;
        text-align: center;
    }

    .main-nav a {
        display: block;
        padding: 15px 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .main-nav a.language-btn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Text resizing for mobile */
    .hero-section h1 { font-size: 32px; }
    .hero-section p { font-size: 16px; padding: 0 10px; }
    .section-title, .category-title { font-size: 26px; }
    
    main { padding: 30px 10px; }
    
    .section-description { font-size: 16px; }
    .form-container { padding: 25px; }
    .portfolio-section { padding: 30px 15px; }
}

/* Menu Animation */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

<!-- CAROUSEL CSS (ADDED HERE) -->
    <style>
        /* Slideshow container */
        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: 20px auto;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* Hide the images by default */
        .mySlides {
            display: none;
        }

        /* Images inside the slider */
        .mySlides img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
        }

        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background-color: rgba(0,0,0,0.3);
            text-decoration: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }