/* 
 * Noyan Works Corporate Design System
 * Methodology: BEM (Block Element Modifier)
 * Author: Noyan Works Dev Team
 * V2 - Premium UI Polish
 */

/* Import Premium Font 'Outfit' */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&display=swap');

:root {
    /* Color Palette */
    --color-primary: #0B2341;
    /* Deep Navy Blue */
    --color-primary-rgb: 11, 35, 65;
    --color-accent: #DAA520;
    /* Soft Gold/Amber */
    --color-accent-rgb: 218, 165, 32;
    --color-bg-body: #ffffff;
    --color-bg-section: #f8f9fa;
    --color-text-main: #1a1a1a;
    --color-text-muted: #5a6b7c;
    --color-white: #ffffff;

    /* Shadows & Effects */
    --shadow-soft: 0 10px 40px rgba(11, 35, 65, 0.08);
    --shadow-hover: 0 20px 50px rgba(11, 35, 65, 0.12);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Typography */
    --font-family-base: 'Outfit', -apple-system, sans-serif;
    --font-size-base: 16px;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    display: flex;
    flex-direction: column;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    /* Brand Navy */
    border-radius: 5px;
    border: 2px solid #f1f1f1;
    /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background: #0c2461;
    /* Slightly darker on hover */
}

main {
    flex: 1 0 auto;
    /* Push footer down */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    padding: var(--spacing-lg) 0;
    position: relative;
    overflow: hidden;
}

/* Typography Utilities */
.heading-1,
.heading-2,
.heading-3 {
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.heading-1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    /* Defined explicit size, slightly smaller than before */
    font-weight: 800;
    display: block;
    /* Removed flex column as it might not be needed or causing flow issues */
    color: #ffffff;
}

.brand-name {
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary) 0%, #2a5298 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.brand-desc {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.3;
    max-width: 100%;
}

.heading-2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
}

.heading-3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.text-lead {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    font-weight: 400;
    max-width: 600px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Layout Utilities */
.container {
    width: 90%;
    max-width: 1400px;
    /* Wider container for 100vh look */
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 3rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 30px rgba(11, 35, 65, 0.25);
}

.btn--primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(11, 35, 65, 0.35);
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
    background: transparent;
}

/* Inner pages header - Strict styling to ensure visibility */
.header.header--inner {
    background: #0B2341;
    /* Fallback */
    background: linear-gradient(135deg, #0B2341 0%, #0c2461 100%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    /* Sometimes fixed helps, sometimes relative is better for inner, but let's stick to fixed to keep it consistent */
    position: fixed;
}

.header--scrolled {
    background: rgba(11, 35, 65, 0.98);
    backdrop-filter: blur(10px);
    padding: 0.8rem 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Remove container constraint for header to allow full width usage if needed,
   or keep it if we want alignment with content. The user said "pages go under navbar".
   This usually happens because header has no background or is not wide enough.
*/

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    /* Increased side padding */
}

.nav__logo {
    display: flex;
    align-items: center;
    z-index: 100;
}

.logo-img {
    height: 120px;
    /* ABICIM: Increased heavily as requested */
    width: auto;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.header--scrolled .logo-img {
    height: 80px;
    /* Shrink on scroll */
}

/* Inner header logo adjustment if needed users might want it regular colored? 
   No, keep white for inner header dark bg. */

.nav__menu {
    display: flex;
    align-items: center;
    gap: 3rem;
    /* Wider, cleaner spacing */
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 10000;
    /* Ensure menu items are clickable and on top */
}

.nav__link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav__link:hover,
.nav__link--active {
    color: #ffffff;
    opacity: 1;
    transform: translateY(-1px);
}

/* Language Switcher */
.nav__lang {
    position: relative;
    margin-left: 1rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.nav__lang-current {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav__lang:hover .nav__lang-current {
    color: #ffffff;
}

.nav__lang .arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

.nav__lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    min-width: 120px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav__lang:hover .nav__lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__lang-dropdown a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: #1a1a2e;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.nav__lang-dropdown a:hover {
    background: #f5f5f7;
    color: var(--color-primary);
}

.nav__lang-dropdown a.active {
    font-weight: 700;
    color: var(--color-primary);
    background: #f0f2ff;
}

/* Mobile adjustments for lang switcher could go into the media query below if needed, 
   but for now it will just sit at the end of the flex container */

/* Reference indicates active/hover state might result in full opacity or underline?
   Reference image shows plain text. Let's keep it clean. */

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.nav__toggle-bar {
    width: 28px;
    height: 2px;
    background-color: #fff;
    /* White bars */
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Menu */
@media (max-width: 968px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        background: var(--color-primary);
        /* Dark bg for mobile menu */
        flex-direction: column;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 0.4s ease;
        border-radius: 0;
        gap: 2rem;
    }

    .nav__menu--active {
        transform: translateX(0);
    }

    .logo-img {
        height: 70px;
    }

    /* Slightly larger on mobile if needed */
    .header {
        padding: 1rem 0;
    }

    .nav {
        padding: 0 1rem;
    }

    .nav__toggle {
        display: flex;
        z-index: 10001;
    }

    /* Mobile Language Switcher */
    .nav__lang {
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav__lang-current {
        display: none;
        /* Hide default dropdown trigger on mobile */
    }

    .nav__lang-dropdown {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        background: transparent;
        box-shadow: none;
        width: auto;
        min-width: 0;
        padding: 0;
        display: flex;
        gap: 1rem;
        margin-top: 0;
    }

    .nav__lang-dropdown a {
        color: rgba(255, 255, 255, 0.6);
        padding: 0.5rem 1rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        font-size: 0.9rem;
    }

    .nav__lang-dropdown a.active {
        background: #ffffff;
        color: var(--color-primary);
        font-weight: 600;
        border-color: #ffffff;
    }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    /* Professional shiny gradient */
    background: radial-gradient(circle at 0% 0%, #30336b 0%, #0B2341 50%, #0c2461 100%);
    overflow: hidden;
    padding-top: 120px;
    /* Account for bigger header */
    z-index: 1;
    /* Lower than header */
}

/* Initial overlay effect like reference image? */
.hero::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    top: -200px;
    right: -200px;
    border-radius: 50%;
    pointer-events: none;
}

.hero::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
    bottom: -100px;
    left: -100px;
    border-radius: 50%;
    pointer-events: none;
    display: block;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Text takes slightly more space */
    align-items: center;
    gap: 2rem;
}

.hero__content {
    color: #ffffff;
    z-index: 2;
    padding-right: 0;
}

/* Typography Overrides for Hero (White Theme) */
.hero .heading-1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    /* Reduced significantly from 4.5rem max */
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Remove the "brand-name" gradient logic for the Hero, keep it solid white */
.hero .brand-name {
    display: block;
    background: none;
    -webkit-text-fill-color: #ffffff;
    font-weight: 700;
}

.hero .brand-desc {
    display: block;
    font-size: inherit;
    /* Inherit from H1 or set new */
    color: #ffffff;
    font-weight: 700;
}

.hero .text-lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 550px;
}

/* Buttons - Outline Style as per reference */
.hero__buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-store {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    /* Square-ish rounded like reference */
    padding: 0.8rem 1.5rem;
    color: #fff;
    transition: all 0.3s ease;
    min-width: 180px;
    text-decoration: none;
}

.btn-store:hover {
    background: #ffffff;
    color: var(--color-primary);
    /* Text becomes dark/brand color */
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-store svg.icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
    /* Matches text color */
}

.btn-store__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.btn-store__text .small {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.btn-store__text .big {
    font-size: 1.2rem;
    font-weight: 600;
}

.btn-store--google {
    /* Optional specific styling for Google if needed */
}

/* Image Styling */
/* Hero Phones Composition */
.hero__phones {
    position: relative;
    width: 580px;
    height: 550px;
    margin: 3rem auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Glow Effect Behind */
.hero__phones::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160%;
    /* Increased size */
    height: 160%;
    /* Stronger, blue-tinted glow */
    background: radial-gradient(circle, rgba(67, 97, 238, 0.4) 0%, rgba(67, 97, 238, 0.1) 50%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
    /* Changed from 1 to 0 to be safe behind phones */
    pointer-events: none;
    filter: blur(40px);
    /* Soften the edges */
}

/* Floor Shadow Underneath */
.hero__phones::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
    filter: blur(5px);
}

.phone-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
    transition: all 0.5s ease;
}

/* Center Phone: Makam - Largest */
.phone-center {
    height: 500px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: float 6s ease-in-out infinite;
}

/* Left Phone: Mukav */
.phone-left {
    height: 380px;
    left: 0;
    z-index: 5;
    transform: translate(0, -50%) scale(0.95);
    animation: float 6s ease-in-out infinite;
    animation-delay: 1s;
}

/* Right Phone: Loren */
.phone-right {
    height: 380px;
    right: 0;
    z-index: 5;
    transform: translate(0, -50%) scale(0.95);
    animation: float 6s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes float {
    0% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-15px) rotate(1deg);
    }

    100% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }
}

/* Separate float keyframes for side phones since they don't use translate(-50%, -50%) */
@keyframes floatSide {
    0% {
        transform: translate(0, -50%) translateY(0px);
    }

    50% {
        transform: translate(0, -50%) translateY(-15px);
    }

    100% {
        transform: translate(0, -50%) translateY(0px);
    }
}

.phone-left,
.phone-right {
    animation-name: floatSide;
}


@media (max-width: 968px) {
    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero__content {
        padding-right: 0;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero .text-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__phones {
        width: 100%;
        max-width: 480px;
        /* Slightly wider to allow spread */
        height: 350px;
        margin-top: 2rem;
        /* Move down from navbar on mobile too if needed */
    }

    .phone-center {
        height: 320px;
    }

    .phone-left,
    .phone-right {
        height: 240px;
        /* Adjust positions for smaller screen */
    }

    .phone-left {
        left: -10px;
        /* Push slightly out */
    }

    .phone-right {
        right: -10px;
        /* Push slightly out */
    }

    .hero__image {
        order: 1;
    }

    .brand-name {
        font-size: 3.5rem;
    }

    .brand-desc {
        font-size: 1.25rem;
    }

    /* Fix overlapping issue on mobile */
    .hero {
        padding-bottom: 200px;
    }

    .scroll-down {
        bottom: 30px;
        /* Lower on mobile */
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        /* Ensure it takes full width for centering if needed, but flex centering handles it */
        justify-content: center;
    }
}

/* Scroll Down Indicator */
.scroll-down {
    position: absolute;
    bottom: 80px;
    /* Moved up from 30px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

/* Back To Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9990;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: #0c2461;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.scroll-down:hover {
    opacity: 1;
}

.scroll-mouse {
    width: 26px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 20px;
    position: relative;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: #ffffff;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

.scroll-text {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@keyframes scrollWheel {
    0% {
        top: 6px;
        opacity: 1;
    }

    100% {
        top: 20px;
        opacity: 0;
    }
}

/* Card Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

/* Base Card Style */
.card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Soft diffuse shadow */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Reduced shadow intensity */
}

/* Card Visual - Base Structure */
.card__visual {
    height: 220px;
    /* Increased from 180px */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    background: #f8f9fa;
    /* Fallback */
    transition: all 0.5s ease;
}

.card__image {
    max-width: 160px;
    /* Increased from 100px */
    max-height: 160px;
    /* Increased from 100px */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    transition: transform 0.5s ease;
}

/* 1. Makam: Darker Teal - Best contrast for Gold Text */
.card--makam .card__visual {
    background: linear-gradient(135deg, #134E5E 0%, #71B280 100%);
    /* Deep Teal to Soft Green */
    border-bottom: 4px solid #DBB468;
}

.card--makam:hover {
    box-shadow: 0 20px 40px rgba(19, 78, 94, 0.2);
    border-color: rgba(219, 180, 104, 0.3);
}

.card--makam:hover .card__visual {
    background: linear-gradient(135deg, #0e3d4a 0%, #5d976a 100%);
}


/* 2. Mukav: Clean Sky Blue */
.card--mukav .card__visual {
    background: linear-gradient(135deg, #E3F2FD 0%, #90CAF9 100%);
    /* Lighter Blue */
    border-bottom: 4px solid #1976D2;
}

.card--mukav:hover {
    box-shadow: 0 20px 40px rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.3);
}

.card--mukav:hover .card__visual {
    background: linear-gradient(135deg, #d0e7fb 0%, #7ab9f5 100%);
}


/* 3. Loren: Elegant Beige */
.card--loren .card__visual {
    background: linear-gradient(135deg, #F9F5EC 0%, #E3D5C0 100%);
    /* Cream to Warm Beige */
    border-bottom: 4px solid #A4907C;
}

.card--loren:hover {
    box-shadow: 0 20px 40px rgba(164, 144, 124, 0.2);
    border-color: rgba(164, 144, 124, 0.3);
}

.card--loren:hover .card__visual {
    background: linear-gradient(135deg, #f2eadb 0%, #d6c3a6 100%);
}


/* Hover Animation for Logos */
.card:hover .card__image {
    transform: scale(1.08) translateY(-5px);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

/* Card Body */
.card__body {
    padding: 2.5rem 2rem;
    background: #ffffff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    gap: 1.5rem;
    /* Space between title and badge */
    min-height: 180px;
    /* Enforce height since content is minimal */
    text-align: center;
}

.card__title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0;
    /* Handled by gap */
    color: var(--color-primary);
    line-height: 1.2;
}

.card__desc {
    display: none;
    /* In case explicit element remains somewhere */
}

/* Badge Updates */
.badge {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--color-bg-section);
    color: var(--color-primary);
    margin-top: 0;
    /* Layout handled by gap */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Subtle pop for the badge */
}

/* Modern Contact Card */
.contact-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    /* Deep soft shadow */
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    overflow: hidden;
    margin-top: 2rem;
    min-height: 600px;
}

/* Left Side: Info */
.contact-info {
    background: var(--color-primary);
    background: linear-gradient(135deg, #0B2341 0%, #1a3c61 100%);
    color: #ffffff;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Changed from space-between to move content up */
    position: relative;
    overflow: hidden;
}

/* Decorative Circle */
.contact-decor-circle {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.contact-info__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.contact-info__desc {
    font-size: 1.05rem;
    opacity: 0.8;
    margin-bottom: 3rem;
    /* Kept margin for spacing between text and details */
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.detail-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.detail-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.detail-link,
.detail-text {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.detail-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* Right Side: Form */
.contact-form-wrapper {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Updated Input Styles for Contact */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 2px solid #eef2f6;
    /* Very subtle border */
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #f8faff;
    /* Slightly tinted input bg */
    transition: all 0.3s ease;
    color: var(--color-primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #a0aab8;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 35, 65, 0.05);
    /* Glow */
}

.btn--block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.2rem;
    font-size: 1.1rem;
    background: var(--color-primary);
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: 0 10px 20px rgba(11, 35, 65, 0.15);
    /* Shadow added */
}

.btn--block:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(11, 35, 65, 0.25);
    background: #000;
}

/* Success/Error States */
.success-message {
    text-align: center;
    padding: 3rem;
    background: #f0fff4;
    border-radius: 16px;
    border: 2px solid #c6f6d5;
}

.success-icon {
    width: 64px;
    height: 64px;
    stroke: #2f855a;
    fill: none;
    stroke-width: 2;
    margin-bottom: 1rem;
}

.error-banner {
    padding: 1rem;
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    color: #c53030;
    margin-bottom: 2rem;
    border-radius: 8px;
    font-weight: 500;
}

/* Responsive Cards */
@media (max-width: 900px) {
    .contact-card {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info,
    .contact-form-wrapper {
        padding: 2.5rem;
    }
}

/* Footer Modern Dark Theme */
.footer {
    flex-shrink: 0;
    background-color: var(--color-primary);
    /* Dark Navy */
    color: #ffffff;
    padding: var(--spacing-lg) 0;
    border-top: none;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 2;
}

.footer__logo img {
    height: 140px;
    /* ABICIM: Increased heavily to 140px as requested */
    width: auto;
    filter: brightness(0) invert(1);
    /* Make logo white */
}

.footer__nav {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer__link {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-size: 0.95rem;
    position: relative;
    transition: all 0.3s ease;
}

.footer__link:hover {
    color: #ffffff;
    opacity: 1;
    text-decoration: none;
    transform: translateY(-2px);
}

.footer__stores {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 1.5rem 0;
}

/* Footer Buttons - Outline White */
.footer .btn-store {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.footer .btn-store:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.footer__copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Inner Page Modern Header (Mini Hero) */
.page-header {
    background: linear-gradient(135deg, #0B2341 0%, #0c2461 100%);
    padding: 180px 0 80px 0;
    /* Space for fixed header */
    text-align: center;
    color: #ffffff;
    position: relative;
    margin-bottom: 0;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: #ffffff;
    transform: skewY(-2deg);
    /* Stylish angle */
    z-index: 1;
}

.page-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.page-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Standard Page Section */
.page-section {
    padding: var(--spacing-lg) 0;
    background: #fff;
    min-height: 60vh;
}

/* Typography for inner pages */
.content-block h2 {
    color: var(--color-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-block p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

/* Re-use existing media queries for mobile but adjust */
@media (max-width: 768px) {
    .footer__content {
        flex-direction: column;
        text-align: center;
    }

    .page-header {
        /* Increased padding to prevent white shape from cutting text */
        padding: 140px 1rem 120px 1rem;
    }

    .page-header::after {
        /* Less aggressive skew on mobile */
        transform: skewY(-2deg);
        bottom: -20px;
        height: 60px;
        /* Smaller decorative bar */
    }

    .page-title {
        font-size: 2.2rem;
        /* Smaller title on mobile */
        margin-bottom: 0.5rem;
    }

    .page-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

@media (max-width: 968px) {
    .hero__image img {
        max-width: 280px;
    }

    .footer__nav {
        gap: 1rem;
        flex-direction: column;
    }

    .hero__buttons {
        justify-content: center;
    }

    /* Ensure hero text doesn't hit edges */
    .hero__content {
        padding: 0 1rem;
    }
}

/* Animations Triggers */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}