/* Global Styles */
:root {
    --primary-color: #D32F2F;
    /* Key brand color */
    --primary-hover: #b71c1c;
    --text-dark: #2c3e50;
    --text-light: #ecf0f1;
    --bg-white: #ffffff;
    --bg-light-gray: #f4f7f6;
    --bg-dark: #1a1a1a;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.2);
    --transition: all 0.3s ease;
}

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

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

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition);
    /* Gradient overlay for readability without a solid block background */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Add a solid background on scroll via JS if desired, 
   but prompt asks for "menu with logo above main image, with shadow to read well". 
   The gradient above achieves this. We can also add text-shadow. */

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

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}

.logo img {
    height: 60px;
    width: auto;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    /* White logo with shadow */
}

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

nav a {
    text-decoration: none;
    color: #fff;
    /* White text for contrast against hero */
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: var(--transition);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Text shadow for readability */
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-color);
    transition: var(--transition);
}

nav a:hover::after {
    width: 100%;
}

nav a:hover {
    color: var(--text-light);
}

.language-switch {
    display: flex;
    align-items: center;
    color: white;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    margin-left: 10px;
}

.lang-option {
    opacity: 0.6;
    transition: var(--transition);
}

.lang-option:hover,
.lang-option.active {
    opacity: 1;
    color: var(--primary-color);
}

.lang-divider {
    margin: 0 5px;
    opacity: 0.6;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
}

.hero-content {
    max-width: 800px;
    padding: 2rem;
    animation: fadeInUp 1s ease-out;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

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

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

/* Common Section Styles */
section {
    padding: 6rem 1rem;
}

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

.section-title {
    text-align: center;
    margin-bottom: 4rem;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    margin: 1rem auto 0;
}

/* About Section */
.about {
    background-color: var(--bg-white);
}

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

.about-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.about-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.about-image img:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Services / What We Do */
.services {
    background-color: var(--bg-light-gray);
    position: relative;
}

/* Decorative visual for services */
.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    /* Above pattern */
    z-index: 1;
}

.services-grid.reverse {
    direction: rtl;
}

.services-grid.reverse>* {
    direction: ltr;
}

.service-text h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.service-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

.service-list li {
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
    font-weight: 500;
}

.service-list li::before {
    content: "✓";
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Contact Section */
.contact {
    background-image: linear-gradient(to right, #141e30, #243b55);
    color: #fff;
    text-align: center;
}

.contact .section-title {
    color: #fff;
}

.contact .section-title::after {
    background: #fff;
}

.contact p {
    font-size: 1.2rem;
    color: #cfcfcf;
}

.contact-info {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.contact-info div {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    min-width: 250px;
    transition: var(--transition);
}

.contact-info div:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.contact-info h3 {
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    color: var(--primary-color);
}

footer {
    padding: 2rem;
    background: #0f141f;
    color: #7f8c8d;
    text-align: center;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        background-attachment: scroll;
        background-position: 65% center;
    }

    .hamburger {
        display: block;
        z-index: 1001;
    }

    /* Remove nav from flex flow so space-between works for logo and hamburger only */
    nav {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        gap: 0;
        flex-direction: column;
        background-color: #1a1a1a;
        width: 100%;
        height: 100vh;
        text-align: center;
        transition: 0.3s;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .nav-item {
        margin: 16px 0;
    }

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


    .hero-content h1 {
        font-size: 2.8rem;
    }

    .about-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-grid.reverse {
        direction: ltr;
        /* Reset direction for mobile */
    }

    .service-image img {
        height: 300px;
    }

    .contact-info {
        gap: 2rem;
    }
}