body {
            font-family: 'Anek Bangla', sans-serif;
            background-color: #000;
            color: #f5f5f5;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Custom Scrollbar for better UX */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #111;
        }
        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Consistent Section Layouts */
        .section-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            position: relative;
            z-index: 2; /* To be above the canvas */
            padding-left: 1rem;
            padding-right: 1rem;
        }
        /* Hero section will have full height */
        .section-container:first-of-type {
            min-height: 100vh;
            padding: 4rem 1rem;
        }
        /* All other sections will have content-based height */
        .section-container:not(:first-of-type) {
            min-height: auto;
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        @media (max-width: 768px) {
            .section-container:first-of-type {
                padding: 2rem 1rem;
            }
            .section-container:not(:first-of-type) {
                padding: 2rem 1rem;
            }
        }
        
        /* Three.js Canvas Styles */
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* Base Animations */
        .animate-on-scroll {
            opacity: 0;
        }

        /* Custom Section Animations */
        @keyframes textSmoke {
            0% { opacity: 0; filter: blur(20px); transform: translateY(50px); }
            100% { opacity: 1; filter: blur(0); transform: translateY(0); }
        }
        .text-smoke-in {
            animation: textSmoke 1.5s forwards;
        }

        @keyframes cardFadeIn {
            0% { opacity: 0; transform: scale(0.9) rotateX(15deg); }
            100% { opacity: 1; transform: scale(1) rotateX(0deg); }
        }
        .card-fade-in {
            animation: cardFadeIn 1s ease-out forwards;
        }

        @keyframes numberCount {
            0% { content: "0"; }
            10% { content: "1"; }
            20% { content: "2"; }
            30% { content: "3"; }
            40% { content: "4"; }
            50% { content: "5"; }
            100% { content: "5"; }
        }
        
        .number-count::after {
            content: "0";
            animation: numberCount 1s steps(5) forwards;
        }
        
        /* Glowing Button */
        @keyframes glowing-button-bg {
            0%, 100% { box-shadow: 0 0 10px #f59e0b, 0 0 20px #f59e0b, 0 0 30px #f59e0b; }
            50% { box-shadow: 0 0 20px #fbbf24, 0 0 40px #fbbf24, 0 0 60px #fbbf24; }
        }
        .glowing-button {
            animation: glowing-button-bg 2s infinite ease-in-out;
        }

        /* New Animation for section transitions */
        @keyframes slideInFromBottom {
            from { transform: translateY(100vh); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .slide-in-on-scroll {
            opacity: 0;
        }
        
        /* New Down Arrow Animation */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .bounce-arrow {
            animation: bounce 1.5s infinite;
        }
        
        /* New Typing Effect */
        .typing-text::after {
            content: '|';
            animation: blink-caret .75s step-end infinite;
            display: inline-block;
            margin-left: 2px;
        }
        @keyframes blink-caret {
            from, to { color: transparent }
            50% { color: #f59e0b; }
        }
        
        /* Cigarette Animation */
        .cigarette-container {
            position: relative;
            max-width: 250px;
            width: 80%;
            height: 50px;
            margin: 0 auto;
        }
        .cigarette-body {
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #f5f5f5 70%, #facc15 100%);
            border-radius: 5px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 15px #facc15;
            animation: burn 2s infinite ease-in-out;
        }
        @keyframes burn {
            0%, 100% { box-shadow: 0 0 10px #facc15, 0 0 20px #facc15; }
            50% { box-shadow: 0 0 20px #facc15, 0 0 40px #facc15; }
        }

        /* CSS-based smoke animation */
        .smoke-puff {
            position: absolute;
            top: -50px;
            left: 70%;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: scale(0.1);
            animation: puff 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        .smoke-puff:nth-child(2) {
            animation-delay: 1s;
        }
        .smoke-puff:nth-child(3) {
            animation-delay: 2s;
        }

        @keyframes puff {
            0% { transform: scale(0.1); opacity: 0; }
            50% { transform: scale(1.2); opacity: 0.8; filter: blur(5px); }
            100% { transform: scale(2); opacity: 0; filter: blur(10px); transform: translateY(-100px); }
        }