/* Global Re-Sets & Dark Theme */
:root {
    --bg-color: #000000;
    --bg-darker: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --accent: #D4AF37;
    /* Gold/Bronze accent */
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

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

a:hover {
    color: var(--accent);
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
    font-weight: 600;
    letter-spacing: -0.5px;
}

h1 {
    color: #ffffff;
}

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

.section-padding {
    padding: 100px 0;
}

.bg-darker {
    background-color: var(--bg-darker);
}

#philosophy {
    position: relative;
    background-color: #fff;
    background-image: radial-gradient(#e5e5e5 1.5px, transparent 1.5px);
    background-size: 30px 30px;
}

/* Sticky Social */
.sticky-social {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 999;
}

.sticky-social a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.sticky-social a:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Navbar */
.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    transition: all 0.3s ease;
}

.navbar-custom.sticky-header {
    position: sticky;
    top: 0;
}

.navbar-custom .nav-logo-img {
    height: 60px;
    width: auto;
    transition: all 0.3s ease;
}

.navbar-custom .nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 0;
    position: relative;
    transition: all 0.3s ease;
}

.navbar-custom .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #D4AF37;
    transition: width 0.3s ease;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: #fff;
}

.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after {
    width: 100%;
}

.apple-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.nav-links {
    display: flex;
    gap: 35px;
    align-items: center;
}

.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    color: #D4AF37;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 15px 0;
    transition: all 0.3s ease;
    text-align: center;
}

.mobile-nav-link:hover {
    color: #D4AF37;
    transform: translateX(10px);
}

.mobile-menu-close {
    margin-top: 30px;
}

.nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #fff;
}

.nav-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Hero Slider */
.hero-section {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#heroCarousel,
.carousel-inner,
.carousel-item {
    height: 100%;
}

.object-fit-cover {
    object-fit: cover !important;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 20;
    text-align: center;
    opacity: 0.8;
    pointer-events: none;
    /* Let clicks pass through */
}

.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
}

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

@keyframes scrollWheel {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

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

/* Models Grid */
.model-item {
    height: 500px;
    transition: transform 0.3s ease;
}

.model-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.loader-container {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 60px;
    /* Reduced from 100px */
    height: auto;
    z-index: 2;
    animation: logoPulse 2s ease-in-out infinite;
}

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

.model-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    opacity: 1;
}

/* Process Steps */
.process-step {
    padding: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.05);
}

.step-number {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.step-title {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

/* Process Section Background */
#process {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
        url('https://mopaexclusive.com/media/modelgaleri/b5265f-3a4d8b-feris-10.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Video Overlay Section */
.video-overlay-section {
    position: relative;
    padding: 100px 0;
    color: #fff;
}

.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Make sure users can't interact with bg video */
}

.video-bg-container iframe,
.video-bg-container video {
    width: 100vw;
    height: 56.25vw;
    /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

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


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

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

/* Hero Text Animations */
.slide-in-top {
    animation: slideInTop 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-bottom {
    animation: slideInBottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.3s;
}

.fade-in {
    animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 0.6s;
}

/* Reset animations when slide changes (handled by BS but keyframes re-trigger if element recreates or toggle class, strict loop might need JS but CSS both keeps end state) */
.carousel-item.active .slide-in-top,
.carousel-item.active .slide-in-bottom,
.carousel-item.active .fade-in {
    /* Animations trigger when .active class is applied */
}

@keyframes slideInTop {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-content {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
    }

    /* Hide links on mobile for now or implement burger */
    .sticky-social {
        display: none;
    }

    .model-item {
        height: 350px;
    }

    .section-padding {
        padding: 60px 0;
    }
}

/* Scrollytelling Showcase Styles */
.showcase-section {
    position: relative;
    background: #000;
    height: 400vh;
    /* Extra height to allow scrolling for 5 items */
}

.sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.content-left {
    width: 40%;
    height: 100vh;
    position: relative;
    /* Context for absolute positioning of text */
    z-index: 2;
    padding-left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Position text absolutely so they switch in place */
.scroll-text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%) translateX(-50px);
    opacity: 0;
    filter: blur(10px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    max-width: 450px;
    z-index: 10;
    /* Glassmorphism background for text for better readability */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scroll-text.active {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
    pointer-events: auto;
}

.visual-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 65%;
    height: 100vh;
    mask-image: linear-gradient(to right, transparent, black 15%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%);
}

.showcase-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1s ease-in-out, transform 8s linear;
}

.showcase-img.active {
    opacity: 1;
    transform: scale(1);
    /* Slow zoom out effect while active */
    z-index: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .showcase-section {
        height: auto;
    }

    .sticky-container {
        position: relative;
        height: auto;
        flex-direction: column;
    }

    .content-left {
        width: 100%;
        height: auto;
        padding: 40px 20px;
        text-align: center;
    }

    .visual-right {
        position: relative;
        width: 100%;
        height: 50vh;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .scroll-text {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
        margin-bottom: 40px;
        pointer-events: auto;
    }

    .showcase-img {
        position: relative;
        opacity: 1;
        height: 100%;
        display: none;
    }

    .showcase-img.active {
        display: block;
    }
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo-wrapper {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: logoPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.5));
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.preloader-ring {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 4px solid transparent;
    border-top: 4px solid #D4AF37;
    border-right: 4px solid #D4AF37;
    border-radius: 50%;
    animation: spinRing 1.5s linear infinite;
    z-index: 1;
}

.preloader-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-bottom: 4px solid #D4AF37;
    border-left: 4px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    animation: spinRingReverse 2s linear infinite;
}

.preloader-ring::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 3px solid transparent;
    border-top: 3px solid rgba(212, 175, 55, 0.6);
    border-right: 3px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    animation: spinRing 2.5s linear infinite reverse;
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinRingReverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Preloader responsive */
@media (max-width: 768px) {
    .preloader-logo-wrapper {
        width: 180px;
        height: 180px;
    }
    
    .preloader-ring {
        width: 240px;
        height: 240px;
    }
}

/* Call to Action Section - Enhanced */
.cta-section {
    background: linear-gradient(135deg, #000 0%, #111 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    animation: rotateBg 20s linear infinite;
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
}

@keyframes rotateBg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.cta-icon-box {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(212, 175, 55, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

/* Mobile Menu & Responsive Fixes */
.mobile-menu-btn {
    display: none;
    /* Hidden by default on desktop; shown in media query */
    background: transparent !important;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    /* Slightly larger */
    z-index: 2000;
    /* Ensure strictly above navbar and overlay */
    cursor: pointer;
    padding: 10px;
    /* Larger touch target */
}

.mobile-menu-btn:focus {
    outline: none;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-link {
    font-size: 1.5rem;
    color: #fff;
    margin: 15px 0;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    text-decoration: none;
}

.mobile-menu-overlay.active .mobile-nav-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

/* Responsive Fixes for Scrollytelling Models Section */
@media (max-width: 991px) {
    .showcase-section {
        height: auto !important;
        /* Disable scrolly height */
        padding: 60px 0;
        background: #000;
    }

    .sticky-container {
        position: relative !important;
        height: auto !important;
        flex-direction: column;
        top: auto !important;
        display: flex;
    }

    /* Images Container */
    .visual-right {
        width: 100%;
        height: auto;
        position: relative;
        padding: 20px;
        order: 1;
        /* Images on top */
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Text Container */
    .content-left {
        width: 100%;
        height: auto;
        padding: 0 20px;
        order: 2;
        /* Text below images */
        display: flex;
        flex-direction: column;
        gap: 40px;
        /* Space out texts */
        margin-top: 20px;
    }

    /* Individual Image Styling */
    .showcase-img {
        position: relative;
        opacity: 1 !important;
        /* Force visible */
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
        transform: none !important;
        display: block !important;
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
    }

    /* Individual Text Styling */
    .scroll-text {
        position: relative;
        top: auto;
        left: auto;
        transform: none !important;
        opacity: 1 !important;
        /* Force visible */
        filter: none !important;
        pointer-events: auto;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        padding: 20px;
        display: block !important;
        margin-bottom: 10px;
    }

    .scroll-text.active {
        opacity: 1;
        transform: none;
    }

    /* Improve label visibility */
    .scroll-text h2 {
        font-size: 2rem;
        color: var(--accent);
    }
}

/* We need to restructure this content via HTML or clever CSS. 
       The current structure has all texts in .content-left and all images in .content-right.
       On mobile, we want Image 1 -> Text 1 -> Image 2 -> Text 2. 
       This structure is hard to achieve with pure CSS grid/flex if they are in separate parent containers.
       
       Solution for now: Make the 'scrollytelling' sticky logic invisible on mobile and specific text/images visible only if active? 
       No, user wants to see them.
       
       Alternative: On mobile, the current HTML structure (left col with all texts, right col with all images) 
       is bad for vertical stacking (I1 T1, I2 T2). 
       
       Since we can't easily change HTML structure based on viewport without duplication, 
       we will stack the whole column of Images then the whole column of Texts? No, that's confusing.
       
       Let's display them as a slideshow or keep simplistic 'Stack' where users swipe images?
       
       Actually, for the sake of the user request "slider broken on mobile", I will attempt to simply fix the layout so it's readable.
       I'll keep the images on top and put *active* text below them, relying on the JS which still runs. 
       If JS runs, it will only show ONE image and ONE text at a time based on scroll.
       But on mobile scrolling height is removed so logic breaks.
       
       Better approach for now:
       Force Show JS to pick based on simple scroll is hard if container is auto height.
       
       Correct Fix:
       Disable JS logic on mobile? 
       Or just style it so images are a scrollable horizontal list?
       
       Let's try to make it look decent: All images stacked with margin, and we hide the text column? 
       Or make images 100% width and overlaid text?
       
       Let's go with:
       .content-right (Images) -> Display all images stacked vertically.
       .content-left (Texts) -> Display all texts stacked vertically corresponding to images?
       This is hard because they are in different containers.
       
       User just wants it fixed. The uploaded image shows overlapping text on dark bg.
       
       I will use `display: none` on the text column for now and just show images? No, text is important.
       
       Let's try: Mobile Layout -> Images with Overlay Text.
       I can't moving text into image container with CSS.
       
       Okay, I will prioritize making it "functional".
       I will set `.showcase-section` to `height: auto` and show the content.
       Since we have 5 images and 5 texts, but they are separated.
       
       I will make `.content-right` (images) fixed height carousel?
       
       Let's stick to the CSS fix I started:
       Make `.content-right` display images in a column.
       Make `.content-left` display texts in a column.
       But how to align them?
       
       Actually, if I look at the HTML structure (I need to verify it first, but assuming standard):
       <div sticky-container>
         <div left>...texts...</div>
         <div right>...images...</div>
       </div>
       
       If I just stack Left on top of Right, we get Text1, Text2... then Img1, Img2... Bad.
       
       Maybe I can use `display: grid` on `.sticky-container`? 
       No, children are div.left and div.right.
       
       Okay, I will settle for: Show Images in a generic Slider/Scroll-snap horizontal view, and underneath a text area that changes?
       Too complex for CSS only.
       
       Simple fix: 
       On mobile, just hide the scrolly section logic and show a fallback "Mobile Model List" if possible?
       Or, update HTML to have interleaved content (Item -> Img + Text) which works for both if styled right.
       
       Let's try to fix the current overlap first.
       The user reported "overlap". 
       I will set .sticky-container to block, 
       .content-left to absolute bottom (overlay on image),
       and let JS control the active state.
       The problem is without scroll height, JS won't toggle active states.
       
       I will add a small JS fix to auto-cycle on mobile?
       frequency: high.
       
       Let's try the CSS 'All Visible' approach.
       I'll make `.content-left` and `.content-right` both `width: 100%`.
       I'll hide the whole section on mobile and replace it with a simpler structure? 
       No, that requires HTML work.
       
       Let's try to Fix the 'Overlap' and make it usable.
       Mobile:
       Container relative.
       Images: Absolute full cover? No, stacked.
       
       Let's go with:
       Images hidden except active.
       Text hidden except active.
       Arrows to navigate?
       
       Wait, I can just make the section standard 'scrollable' content if I use `position: sticky` correctly on elements?
       
       Let's try this:
       Mobile = Simple list.
       WE NEED TO CHANGE HTML STRUCTURE for this to be responsive-friendly (Interleaved data).
       
       But I must only use existing tools.
       I will write a script to move elements on mobile? No.
       
       Let's just fix the "broken" part (overlapping/black space).
       I'll enable `pointer-events: auto` and ensure texts have background.
       The screenshot shows text over black.
       
       I will set `.showcase-section` height to `100vh` on mobile too, but ensure overflow-y scroll?
       No, that messes up main scroll.
       
       Okay, the most robust quick fix for mobile "overlap":
       1. Set `.showcase-section` height to `auto`.
       2. Hide the Text column (`.content-left`).
       3. Show all Images (`.content-right`) stacked vertically with `margin-bottom`.
       4. Add a label on top of each image using pseudo-elements? Hard.
       
       Better:
       I will CSS-Grid the parent?
       
       Let's look at HTML structure of models section.
       Step 1: Check HTML.
    */

position: relative;
width: 220px;
height: 220px;
display: flex;
justify-content: center;
align-items: center;
}

.loader-logo {
    width: 100px;
    height: auto;
    z-index: 2;
    /* Optional: subtle pulse for logo */
    animation: logoPulse 2s ease-in-out infinite;
}

/* Partners Slider */
.partners-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 40px 0;
}

.partners-track {
    display: inline-flex;
    align-items: center;
    gap: 60px;
    animation: scrollPartners 40s linear infinite;
}

.partner-logo-item {
    flex: 0 0 auto;
    width: 150px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.partner-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes scrollPartners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Footer Styles */
.footer-link {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--accent);
    padding-left: 5px;
}

.social-footer a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-footer a:hover {
    font-size: 0.8rem;
    text-decoration: none;
}

/* Footer Updates */
.footer-minimal-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.footer-minimal-links a {
    color: #888;
    /* Grey */
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-minimal-links a:hover {
    color: var(--accent);
}

/* Google Translate Styling - Dark & Oval */
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0px !important;
}

.goog-te-gadget-simple {
    background-color: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    transition: all 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.goog-te-gadget-simple:hover {
    border-color: var(--accent) !important;
    background-color: #111 !important;
}

.goog-te-menu-value,
.goog-te-menu-value span,
.goog-te-gadget-simple span,
.goog-te-gadget-simple {
    color: #ffffff !important;
}

.goog-te-menu-value span {
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
}

.goog-te-gadget-icon {
    display: none !important;
    /* Hide default Google icon if desired for cleaner look, or keep it */
}

/* Restore G icon if user wants it, but style it. User image shows it. 
   If we hide .goog-te-gadget-icon, the text moves left. 
   Let's keep the icon but filter it to match dark mode if needed, 
   or just let the black background handle it. 
   Actually, hiding it makes it look more custom "oval border". 
   I'll hide it for a sleeker look as requested "daha şık". 
   If user really wants the icon they can ask to bring it back.
*/
.goog-te-gadget-icon {
    /* filter: invert(1) grayscale(1); */
    /* Optional: make it white */
}

@media (max-width: 991px) {

    .nav-links,
    .social-header,
    .nav-btn {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block;
        /* Show only on mobile */
    }

    .hero-section {
        height: 100vh;
    }

    .carousel-caption h1 {
        font-size: 2.5rem;
    }
}

/* Restoring Preloader Animations - GLOBAL SCOPE */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes logoPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

.spinner-ring {
    animation: spin 1s linear infinite;
}


/* Mobile Models Card Styles */
.mobile-model-card {
    position: relative;
    height: 60vh;
    width: 100%;
    margin-bottom: 25px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background: #000;
}

.mobile-model-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
    opacity: 0.7;
}

.mobile-model-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    text-align: left;
}

.mobile-model-card:active .mobile-model-image,
.mobile-model-card:focus .mobile-model-image {
    transform: scale(1.05);
    /* Zoom effect on touch */
}