/* --- GLOBAL VARIABLES & RESET --- */
        :root {
            --bg-color: #000;
            --accent-color: #ebd8a3;
            --text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
			font-family: "Montserrat", sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--accent-color);
            overflow: hidden; /* Prevents default scrolling on desktop */
			line-height: 140%;
        }

        button {
            cursor: pointer;
            border: none;
            outline: none;
        }
.spl-text {
	font-family: "Alex Brush", cursive;
	font-weight: 400;
	line-height: 80%;
}

        /* --- DESKTOP LAYOUT --- */
        .wrapper {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
            border: solid 15px rgb(0 0 0);
            border-radius: 30px;
        }

        .slides-container {
            width: 100%;
            height: 100%;
            transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        .slide {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
			object-position: top;
            opacity: 0.95; /* Mild dark background */
            z-index: -1;
        }
h1 {
	font-size: 7vw;
	line-height: 105%;
	color: var(--accent-color);
	text-shadow: var(--text-shadow);
}
.wrapper-90p {
	width: 90%;
	margin: 0 auto;
}
.text-overlay {
	position: absolute;
	top: 50%;
	left: 8%;
	padding: 25px 40px;
	max-width: 50%;
	opacity: 0; /* Starts hidden for animation */
	color: var(--accent-color);;
}
.text-overlay p {
	padding: 10px;
	background: linear-gradient(90deg, rgb(0 0 0 / 50%), transparent);
	margin-top: 20px;
}
        /* Alternating Text Boxes */
        .info-box {
            position: absolute;
            bottom: 7%;
            background: rgba(0, 0, 0, 0.85);
            padding: 25px 25px;
            max-width: 450px;
            opacity: 0; /* Starts hidden for animation */
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        /* Left-aligned for even slides */
        .slide:nth-child(even) .info-box {
            left: 5%;
            border-left: 4px solid var(--accent-color);
        }

        /* Right-aligned for odd slides */
        .slide:nth-child(odd) .info-box {
            right: 5%;
            border-right: 4px solid var(--accent-color);
            text-align: right;
        }

        .info-box h2 {
            font-size: 50px;
            font-weight: 400;
            margin-bottom: 10px;
            line-height: 1.2;
        }

        .btn-know-more {
            background: transparent;
            color: var(--accent-color);
            border: 1px solid var(--accent-color);
            padding: 10px 20px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .btn-know-more:hover {
            background: var(--accent-color);
            color: var(--bg-color);
        }

        /* Desktop Popup Center */
        .popup-overlay {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.95);
            border: 1px solid var(--accent-color);
            padding: 40px;
            width: 60%;
            max-width: 700px;
            z-index: 100;
            text-align: center;
        }

        .popup-overlay p {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 25px;
            color: #ccc;
        }

        .btn-close {
            background: var(--accent-color);
            color: var(--bg-color);
            padding: 8px 25px;
            font-weight: bold;
        }

        /* Desktop Vertical Dots */
        .desktop-dots {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 50;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(235, 216, 163, 0.3);
            border: 2px solid var(--accent-color);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .dot.active, .dot:hover {
            background: var(--accent-color);
            transform: scale(1.4);
        }

        /* Dot Tooltips */
        .dot::after {
            content: attr(data-title);
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-color);
            color: var(--bg-color);
            padding: 4px 10px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .dot:hover::after {
            opacity: 1;
        }

        /* --- DESKTOP ANIMATIONS --- */

		#slide-0 .text-overlay {
            animation: slideUpBoxMain 0.8s ease-out 0.5s forwards;
        }
        .slide.active-slide .info-box, .slide.active-slide .text-overlay {
            animation: slideUpBox 0.8s ease-out 0.7s forwards;
        }

        .popup-overlay.anim-open {
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        @keyframes slideUpBoxMain {
            from { opacity: 0; transform: translateY(-40%); }
            to { opacity: 1; transform: translateY(-50%); }
        }
		@keyframes slideUpBox {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes popIn {
            from { opacity: 0; transform: translate(-50%, -40%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        /* --- MOBILE LAYOUT & OVERRIDES --- */
        .mobile-nav { display: none; }

.thoughts-slider-wrapper {
	display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
}
.thoughts-slider-wrapper h2 {
	font-size: 5vw;
    margin-bottom: 30px;
    text-align: center;
}
.owl-next span, .owl-prev span {
	width: 50px;
	height: 50px;
	text-align: center;
	display: block;
	background-color: var(--accent-color);
	color: #000;
	margin: 3px;
	font-size: 40px;
	line-height: 42px;
}
.owl-nav {
	margin-top: 5px;
	text-align: center;
}

@media (max-width: 768px) {
            body { overflow: hidden; } /* Container handles horizontal sliding */
            
            .wrapper { width: 100vw; height: 100vh; overflow-y: auto; border-radius: 0; border-width: 10px; }
            
            .slides-container {
                display: flex;
                flex-direction: row;
                width: 300vw; /* 3 slides = 300vw */
                min-height: 100vh;
                padding-bottom: 20%;
            }

            .slide {
                width: 100vw;
                min-height: 100vh;
                flex-shrink: 0;
                overflow-y: auto; /* Allow vertical scroll per slide */
                overflow-x: auto;
                display: flex;
                flex-direction: column;
                padding-bottom: 20%; /* Space for bottom nav */
                margin-bottom: 20%;
            }

            .bg-image {
                position: relative;
            }
			
h1 {
	font-size: 12vw;
}
.text-overlay {
	bottom: 20%;
	left: 5%;
	padding: 5%;
	max-width: 90%;
}
.text-overlay p {
	margin-top: 10px;
}

            /* Stack Elements Vertically */
            .info-box {
                position: relative;
                bottom: auto; left: auto; right: auto;
                width: 90%;
                margin: -20px auto 20px auto;
                text-align: left !important;
                border: none !important;
                border-top: 4px solid var(--accent-color) !important;
                opacity: 0; /* For mobile animation */
            }
			.info-box h2 {
				font-size: 40px;
				line-height: 1;
			}
			
			.slide:nth-child(odd) .info-box {
				left: 5%;
				border-left: 4px solid var(--accent-color);
				right: auto;
			}

			/* Right-aligned for odd slides */
			.slide:nth-child(even) .info-box {
				right: 5%;
				border-right: 4px solid var(--accent-color);
				text-align: right;
				left: auto;
			}

            .btn-know-more { display: none; } /* Hide button on mobile */

            /* Convert Popup to inline detailed content */
            .popup-overlay {
                display: block !important;
                position: relative;
                top: auto; left: auto; transform: none;
                width: 90%;
                margin: 0 auto;
                background: transparent;
                border: none;
                border-left: 2px solid rgba(235, 216, 163, 0.3);
                padding: 10px 20px;
                text-align: left;
                opacity: 0; /* For mobile animation */
            }

            .btn-close { display: none; } /* Hide close button */
            .desktop-dots { display: none; } /* Hide desktop dots */

            /* Mobile Navigation Bottom Bar */
            .mobile-nav {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: fixed;
                bottom: 0px; /* Hidden initially */
                left: 0;
                width: 100%;
                background: linear-gradient(to top, rgba(0, 0, 0,1) 60%, rgba(0, 0, 0,0));
                padding: 30px 20px 20px 20px;
                transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 200;
            }

            .mobile-nav.active, .mobile-nav.show {
                bottom: 0;
            }

            .mobile-buttons {
                display: flex;
                justify-content: space-between;
                width: 100%;
                max-width: 300px;
                margin-bottom: 15px;
            }

            .mobile-buttons button {
                background: var(--accent-color);
                color: var(--bg-color);
                padding: 10px 20px;
                font-weight: bold;
                border-radius: 4px;
            }

            .mobile-buttons button:disabled {
                opacity: 0.3;
            }

            .mobile-dots {
                display: flex;
                gap: 10px;
            }
            .mobile-dots .dot { pointer-events: none; } /* Non-clickable */

            /* Mobile Animations */
            .slide.active-slide .info-box {
                animation: slideInLeft 0.8s ease forwards 0.4s;
            }
            .slide.active-slide .popup-overlay {
                animation: slideInRight 0.8s ease forwards 0.6s;
            }
	
.thoughts-slider-wrapper h2 {
	font-size: 12vw;
}

            @keyframes slideInLeft {
                from { opacity: 0; transform: translateX(-50px); }
                to { opacity: 1; transform: translateX(0); }
            }
            @keyframes slideInRight {
                from { opacity: 0; transform: translateX(50px); }
                to { opacity: 1; transform: translateX(0); }
            }
        }