/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette */
    --color-bg-navy: #121212;
    /* Changed from Navy to Dark Gray/Black */
    --color-bg-anthracite: #1C1C1C;
    --color-black: #000000;

    --color-text-white: #E6E6E6;
    --color-text-gray: #A0A0A0;

    --color-accent-silver: #C0C0C0;
    --color-accent-blue: #E31E24;
    /* Changed from Blue to Logo Red */

    /* Typography */
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-text-white);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    border: 1px solid var(--color-accent-silver);
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background-color: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 15px rgba(227, 30, 36, 0.5);
    /* Red glow */
}

/* Contact Page Styles */
.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

.address-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--color-accent-blue);
    text-align: center;
}

.address-card h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--color-text-white);
}

.address-card p {
    font-size: 1.2rem;
    color: var(--color-text-gray);
    line-height: 1.6;
}

.map-container {
    width: 100%;
    height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: grayscale(100%) invert(92%) contrast(83%);
    /* Dark mode map effect */
    border-radius: 4px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Header */
header {
    background-color: rgba(18, 18, 18, 0.95);
    /* Adjusted for dark theme */
    padding: 10px 0;
    /* Slightly reduced padding to accommodate larger logo without massive header */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 100px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.9rem;
    color: var(--color-text-gray);
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-text-white);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent-blue);
    transition: width 0.3s ease;
}

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

/* Language Switcher */
.lang-switch {
    margin-left: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

.lang-switch a {
    font-size: 0.85rem;
    color: var(--color-text-gray);
    font-weight: 500;
    transition: all 0.3s ease;
}

.lang-switch a:hover,
.lang-switch a.active {
    color: var(--color-text-white);
}

.lang-switch span {
    color: var(--color-text-gray);
    font-size: 0.8rem;
    opacity: 0.5;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #2a2a2a 0%, #121212 100%);
    /* Neutral dark gradient */
}

/* Abstract Topographic Map Background Effect (Placeholder) */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(18, 18, 18, 0.7), rgba(18, 18, 18, 0.9)),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 11px);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.hero h2 {
    font-size: 1.2rem;
    color: var(--color-accent-silver);
    font-weight: 500;
    margin-bottom: 30px;
    font-family: var(--font-body);
}

/* Page Header */
.page-header {
    padding-top: 180px;
    padding-bottom: 50px;
    background: linear-gradient(to bottom, var(--color-bg-navy), #1c1c1c);
}

/* Sections General */
section {
    padding: 80px 0;
}

.section-title {
    margin-bottom: 50px;
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--color-accent-blue);
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--color-text-white);
}

/* Intro Section */
.intro {
    background-color: var(--color-bg-anthracite);
    position: relative;
}

.intro p {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    max-width: 900px;
    line-height: 1.8;
}

/* Why Us Section */
.why-us {
    background-color: var(--color-black);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--color-accent-blue);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--color-accent-silver);
    margin-bottom: 20px;
    display: block;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--color-text-gray);
    font-size: 0.95rem;
}

/* Footer */
footer {
    background-color: #0d0d0d;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    margin-bottom: 25px;
}

.footer-logo img {
    height: 90px;
    width: auto;
    filter: none;
    opacity: 1;
}

.footer-desc {
    color: var(--color-text-gray);
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 400px;
}

.footer-column h4 {
    color: var(--color-text-white);
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-accent-blue);
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--color-text-gray);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--color-accent-blue);
    transform: translateX(5px);
}

.footer-contact p {
    color: var(--color-text-gray);
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.footer-contact i,
.footer-contact span.icon {
    color: var(--color-accent-blue);
    font-style: normal;
    font-weight: bold;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.2);
    margin-left: 20px;
}

.footer-bottom-links a:hover {
    color: var(--color-text-white);
}

/* Responsive & Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1001;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--color-text-white);
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .footer-bottom-links {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: 70px;
        /* Below header */
        height: calc(100vh - 70px);
        width: 100%;
        background-color: var(--color-bg-navy);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: right 0.4s ease-in-out;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .lang-switch {
        margin-left: 0;
        /* Reset margin for mobile usually, but lang switch is inside nav on this site? No, it's separate in HTML. */
        /* If lang-switch is outside nav-links in HTML, we might need to hide it or move it into menu.
           Based on current HTML, it's a sibling. Let's adjust. */
        display: none;
        /* Temporarily hide duplicate lang switch if we want to put it in menu, or keep it visible in header */
    }

    /* We should probably allow the lang switch to remain visible in header or move it. 
       For now, let's keep it visible in the header next to hamburger if possible, or hide it if it breaks layout.
       Let's keep it but adjust styling if needed.
    */
    .lang-switch {
        display: flex;
        border: none;
        margin-left: auto;
        margin-right: 20px;
        padding-left: 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero h2 {
        font-size: 1rem;
    }

    .page-header {
        padding-top: 130px;
    }
}

/* Contact Page Restructuring */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Info takes less space, Form takes more */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 60px;
    /* Added bottom margin */
}

@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}

.contact-info-wrapper .address-card {
    height: 100%;
    text-align: left;
    /* Override default center alignment */
    padding-left: 30px;
    /* Add some padding for better spacing */
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* Increased gap */
    margin-bottom: 30px;
    /* Increased bottom margin */
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item .icon {
    font-size: 1.8rem;
    /* Slightly larger icons */
    color: var(--color-accent-blue);
    min-width: 30px;
    /* Ensure icon has space */
    margin-top: -3px;
    /* Align icon with top of text line */
}

.detail-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: var(--color-text-white);
}

.detail-item span {
    color: var(--color-text-gray);
    font-size: 1rem;
    line-height: 1.6;
}

.detail-item a {
    color: var(--color-text-gray);
    transition: color 0.3s ease;
    text-decoration: none;
}

.detail-item a:hover {
    color: var(--color-accent-blue);
}

.form-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 4px solid var(--color-accent-blue);
}

.form-card h3 {
    margin-bottom: 30px;
    font-size: 1.5rem;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-white);
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    background: rgba(0, 0, 0, 0.5);
}

.map-container-full {
    width: 100%;
    height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: grayscale(100%) invert(92%) contrast(83%);
    border-radius: 4px;
    overflow: hidden;
}

.map-container-full iframe {
    width: 100%;
    height: 100%;
    border: 0;
}