@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;900&display=swap');

:root {
    --primary-color: #FF4500;
    /* Scarlet */
    --secondary-color: #6c757d;
    --dark-bg: #121212;
    --dark-surface: #1e1e1e;
    --text-color: #e0e0e0;
    --accent-color: #FF6347;
    /* Tomato */
    --font-family: 'Inter', sans-serif;
    --title-font: 'Outfit', sans-serif;
}

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

/* Typography Title Style - Base (Solid) */
.typography-title {
    font-family: var(--title-font);
    font-size: 4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Reduced spacing for Outfit */
    color: white;
    /* Solid white by default */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5em;
}

/* Gradient Modifier for Main Page */
.typography-gradient {
    background: linear-gradient(to right, #ffffff 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-color);
    /* Fallback */
    text-shadow: none;
    /* Remove text shadow for cleaner gradient */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}


/* Bootstrap Overrides for Scarlet Theme */
.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: #CC3700 !important;
    /* Darker scarlet */
    border-color: #CC3700 !important;
}

.text-info {
    color: var(--accent-color) !important;
}

.btn-info {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

.btn-info:hover {
    background-color: #E55335 !important;
    border-color: #E55335 !important;
}

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

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

.fade-in {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

/* Navbar */
.navbar {
    background-color: rgba(30, 30, 30, 0.9) !important;
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary-color) !important;
    /* Changed to primary */
}

.nav-link {
    color: var(--text-color) !important;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--accent-color) !important;
}



/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Changed to flex-start for left align logic, though structure handles it */
    text-align: left;
    /* Changed to left */
    color: white;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/hero_bg_v2.png');
    /* New Image */
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Removed Ken Burns Effect for simpler feel */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Ensure full width for container */
}

.hero-title {
    font-size: 4rem;
    /* Increased slightly */
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: none;
    /* Removed heavy glow */
    letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #e0e0e0;
    margin-bottom: 2.5rem;
    font-weight: 300;
    max-width: 600px;
    /* Limit width for readability */
}

/* Horizontal Scroll Section */
.scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Scroll Buttons */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    backdrop-filter: blur(5px);
}

.scroll-btn:hover {
    transform: scale(1.1);
}

.scroll-btn.left {
    left: 0;
    transform: translateX(-50%);
}

.scroll-btn.right {
    right: 0;
    transform: translateX(50%);
}

.container {
    overflow: visible;
}

.scroll-item {
    flex: 0 0 auto;
    width: 300px;
    transition: transform 0.3s;
    scroll-snap-align: start;
}

.scroll-item:hover {
    transform: scale(1.05);
}

/* Page Layout Utilities */
.page-spacer-vertical {
    margin-top: 150px;
    margin-bottom: 150px;
}

.mb-spacer {
    margin-bottom: 150px !important;
}

.scroll-item img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.scroll-item.square-frame {
    width: 350px;
    height: 350px;
    background-color: var(--dark-surface);
    /* or a lighter gray if preferred */
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-right: 15px;
    /* Add some spacing since width is larger */
}

.scroll-item.square-frame img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: none;
    /* Shadow on frame instead? */
}

/* Cards */
.card {
    background-color: var(--dark-surface);
    border: 1px solid #333;
    color: var(--text-color);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-color);
    /* Changed to primary */
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color) !important;
}

.hover-lift:hover .card-title {
    color: var(--primary-color) !important;
    transition: color 0.3s ease;
}

.hover-lift:hover .arrow-hover {
    opacity: 1 !important;
    transform: translateX(5px);
    transition: all 0.3s ease;
}

/* Footer */
footer {
    background-color: var(--dark-surface);
    padding: 2rem 0;
    margin-top: auto;
    border-top: 1px solid #333;
}

/* Common Section Styles */
section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--primary-color);
    /* Changed to primary */
}

/* Contact Form */
.form-control {
    background-color: #2c2c2c;
    border: 1px solid #444;
    color: white;
}

.form-control:focus {
    background-color: #333;
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.25);
}

.feature-icon {
    max-width: 250px;
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}

.hover-primary:hover {
    color: var(--primary-color) !important;
    transform: translateY(-3px);
}

.transition-all {
    transition: all 0.3s ease;
}

/* Custom Tabs */
.nav-tabs {
    border-bottom: 2px solid #333;
}

.nav-tabs .nav-link {
    color: var(--secondary-color);
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: white;
    border-color: transparent;
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 3px solid var(--primary-color);
}

/* Hover Dropdown for Desktop */
@media (min-width: 992px) {
    .dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .dropend:hover>.dropdown-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: 0;
        margin-left: 0;
    }
}

/* Ensure nested dropdowns display correctly on mobile/when open */
.dropend .dropdown-menu {
    display: none;
    /* Hidden by default */
}

/* Show nested menu on hover for desktop (handled by media query) or check specifically for open class if using JS click, 
   but for this pure CSS hover approach on desktop, the media query handles it. 
   For mobile, we rely on Bootstrap's data-bs-toggle although nested menus in standard BS5 require extra JS or CSS to show. 
   Simplest mobile fix: shift it slightly indented.
*/
@media (max-width: 991.98px) {
    .dropend .dropdown-menu {
        display: none;
        /* Hide default absolute */
        position: static;
        margin-left: 1rem;
        float: none;
    }


    .dropend .dropdown-toggle.show+.dropdown-menu,
    .dropend .dropdown-menu.show {
        display: block;
    }
}

/* Support Card Styles */
.support-card {
    background-color: var(--dark-surface);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-color);
}

.support-card:hover .support-title {
    color: var(--primary-color);
}

.support-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    transition: color 0.3s;
}

.support-card:hover .support-icon {
    color: var(--primary-color);
}

.support-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.support-desc {
    font-size: 0.95rem;
    color: #aeaeae;
    line-height: 1.5;
    margin-bottom: 0;
}

.bg-dark-surface {
    background-color: var(--dark-surface) !important;
}