@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        
        body {
            background-color: #fff;
            padding: 0; 
            font-family: Montserrat, sans-serif;
            font-optical-sizing: auto;
            margin: 0;
        }

        .main-wrapper {
            background: linear-gradient(180deg, #fff 0%, #d1f0eb 100%);
            border-radius: 0 0 24px 24px;
        }

        .navbar {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .navbar-brand {
            font-size: 1.2rem; 
            color: #111;
        }

        .nav-link {
            color: #333;
            margin: 0 12px;
            font-size: 0.95rem;
            transition: color 0.2s;
        }

        .nav-link:hover, .nav-link.active {
            color: #31b3a3 !important; 
        }

        @keyframes deal-cards {
            0% {
                opacity: 0;
                transform: translateX(-100vw) rotate(-60deg);
            }

            100% {
                opacity: 1;
                transform: var(--fan-transform);
            }
        }

        .hero-section {
            flex-grow: 1; 
        }

        .image-stack {
            padding: 4rem 0;
        }

        .stack-img {
            width: 250px !important; 
            height: 250px !important; 
            border-radius: 12px; 
            border: 2px solid #fff;
            margin-left: -65px; 
            transform-origin: bottom center; 
            transform: var(--fan-transform);
            animation: deal-cards 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0.3s ease, margin 0.3s ease;
        }

        .stack-img:first-child { 
            margin-left: 0; 
        }

        .stack-img:nth-child(1) { 
            --fan-transform: rotate(-15deg) translateY(10px); 
            z-index: 1; 
            animation-delay: 0.1s; 
        }

        .stack-img:nth-child(2) { 
            --fan-transform: rotate(-10deg) 
            translateY(5px); 
            z-index: 2; 
            animation-delay: 0.2s; 
        }

        .stack-img:nth-child(3) { 
            --fan-transform: rotate(-5deg) translateY(2px); 
            z-index: 3; 
            animation-delay: 0.3s; 
        }

        .stack-img:nth-child(4) { 
            --fan-transform: rotate(0deg) translateY(0px); 
            z-index: 4; 
            animation-delay: 0.4s; 
        }

        .stack-img:nth-child(5) { 
            --fan-transform: rotate(5deg) translateY(2px); 
            z-index: 5; 
            animation-delay: 0.5s; 
        }

        .stack-img:nth-child(6) { 
            --fan-transform: rotate(10deg) translateY(5px); 
            z-index: 6; 
            animation-delay: 0.6s; 
        }

        .stack-img:nth-child(7) { 
            --fan-transform: rotate(15deg) translateY(10px); 
            z-index: 7; 
            animation-delay: 0.7s; 
        }

        .stack-img:hover {
            transform: scale(1.15) translateY(-20px) rotate(0deg); 
            z-index: 20; 
            box-shadow: 0 15px 30px #00000066;
            margin: 0 15px 0 -50px; 
        }

        @media (width > 768px) {
            body { 
                padding: 0 1.5rem 1.5rem 1.5rem; 
            }

            .main-wrapper {
                min-height: calc(100vh - 1.5rem); 
            }

            .navbar-brand { 
                font-size: 1.4rem; 
            }

            .stack-img {
                width: 150px; 
                height: 200px;
                border-radius: 14px; 
                border: 3px solid #fff; 
                margin-left: -90px;
            }

            .stack-img:hover {
                transform: scale(1.1) translateY(-30px) rotate(0deg); 
                margin: 0 20px 0 -70px; 
            }

            .stack-img:nth-child(1) { 
                --fan-transform: rotate(-15deg) translateY(15px); 
            }

            .stack-img:nth-child(2) { 
                --fan-transform: rotate(-10deg) translateY(8px); 
            }

            .stack-img:nth-child(7) { 
                --fan-transform: rotate(15deg) translateY(15px); 
            }
        }

        @media (width > 992px) {
            .stack-img {
                width: 200px; 
                height: 250px;
                border-radius: 16px; 
                border: 4px solid #fff; 
                margin-left: -120px; 
            }

            .stack-img:hover {
                transform: scale(1.1) translateY(-40px) rotate(0deg); 
                margin: 0 30px 0 -90px; 
            }

            .stack-img:nth-child(1) { 
                --fan-transform: rotate(-15deg) translateY(20px); 
            }

            .stack-img:nth-child(2) { 
                --fan-transform: rotate(-10deg) translateY(10px); 
            }

            .stack-img:nth-child(3) { 
                --fan-transform: rotate(-5deg) translateY(5px); 
            }

            .stack-img:nth-child(5) { 
                --fan-transform: rotate(5deg) translateY(5px); 
            }

            .stack-img:nth-child(6) { 
                --fan-transform: rotate(10deg) translateY(10px); 
            }

            .stack-img:nth-child(7) { 
                --fan-transform: rotate(15deg) translateY(20px); 
            }
        }

        .btn-teal {
            background-color: #31b3a3; 
            color: white; 
            border: none; 
            font-weight: 600;
        }

        .btn-teal:hover { 
            background-color: #279688; 
            color: white; 
        }

        .btn-outline-teal {
            background-color: transparent; 
            color: #31b3a3; 
            border: 2px solid #31b3a3; 
            font-weight: 600;
        }

        .btn-outline-teal:hover { 
            background-color: #31b3a3; 
            color: white; 
        }

@media (width <= 767.98px) {
    .stack-img {
        width: 100px !important; 
        height: 100px !important;
    }

}

@media (width >= 768px) and (width <= 991.98px) {
    
    .stack-img {
        width: 140px !important; 
        height: 140px !important;
    }

}

@media (width >= 768px) and (width <= 1199.98px) and (orientation: landscape) {
    .stack-img {
        width: 200px !important; 
        height: 200px !important;
    }

    .stack-img:nth-child(1) { 
        --fan-transform: rotate(-15deg) translateY(15px); 
    }

    .stack-img:nth-child(7) { 
        --fan-transform: rotate(15deg) translateY(15px); 
    }
}

.text-teal-dark { 
    color: #0d9468; 
}

.bg-light-teal { 
    background-color: #dcf5e7; 
}

.bg-dark-teal { 
    background-color: #0d7554; 
}

.rounded-4x { 
    border-radius: 24px; 
}

.story-overlay {
    background: linear-gradient(to top, #000000e6 0%, #00000066 60%, transparent 100%);
}