@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500&display=swap');

	/* Root Style */
	*{ scroll-behavior: smooth;  --bg-color: #000000; --text-main: #ffffff; --text-muted: #a1a1a1; --btn-size: 45px; }

	/* Base Body Font */
	body { font-family: 'Raleway', sans-serif; }

	/* Heading Font */
	h1, h2, h3 { font-family: 'Playfair Display', serif; }

	/* Custom Nav Icon Box Styling */
	.nav-icon-box { position: relative; }
	.nav-icon-box .tooltip { white-space: nowrap; }

	/* Active Nav State - for visual feedback */
	.nav-icon-box.active-nav {
		background-color: #365314; /* A slightly darker green for active */
		transform: scale(1.15); /* Slightly larger when active */
	}

        .social-feed-section {
            padding: 100px 0;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* --- Header --- */
        .feed-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 40px;
            margin-bottom: 40px;
        }

        .subtitle {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 10px;
            display: block;
        }

        .main-title {
            font-size: 36px;
            font-weight: 500;
            margin: 0;
        }

        /* --- Arrows --- */
        .nav-buttons {
            display: flex;
            gap: 10px;
        }

        .nav-btn {
            width: var(--btn-size);
            height: var(--btn-size);
            border-radius: 50%;
            background: #000;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }

        .nav-btn svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: #fff; /* White Arrows */
            stroke-width: 2px;
        }

        /* --- Carousel --- */
        .carousel-wrapper {
            position: relative;
            padding: 0 40px;
			
        }

        .carousel-container {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: var(--gap);
            scrollbar-width: none; /* Firefox */
        }

        .carousel-container::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

        .carousel-item {
            flex: 0 0 calc(25% - 15px); /* 4 images on desktop */
            min-width: 280px;
            aspect-ratio: 4 / 5;
            border-radius: 2px;
            overflow: hidden;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
			filter: grayscale(20%); /* Softens the look */
			transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.5s ease;
        }

        .carousel-item:hover img {
            transform: scale(1.08);
			filter: grayscale(0%);
			transform: scale(1.05);
        }
		
		.carousel-viewport {
			scroll-snap-type: x mandatory;
		}
		.carousel-item { /* or .card */
			scroll-snap-align: start;
		}

        @media (max-width: 768px) {
            .feed-header { flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 20px; }
            .carousel-wrapper { padding: 0 20px; }
            .main-title { font-size: 28px; }
        }