@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Rajdhani', sans-serif;
            scroll-behavior: smooth;
            background-color: #f5f5f5;
        }
        
        .tactical-bg {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpattern id='pattern' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='20' height='20' fill='%23232323'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23333333'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23pattern)'/%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }
        
        .camo-pattern {
            background-color: #2a2a2a;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23333333' fill-opacity='0.2'/%3E%3C/svg%3E");
        }
        
        .btn-tactical {
            background-color: #4CAF50;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-tactical:hover {
            background-color: #3e8e41;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .btn-tactical:active {
            transform: translateY(0);
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        }
        
        .btn-tactical::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
        }
        
        .btn-tactical:hover::after {
            animation: shine 1.5s infinite;
        }
        
        .bg-dark-400{
            background-color: #000000;
        }
        @keyframes shine {
            100% {
                transform: translateX(100%);
            }
        }
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .whatsapp-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .countdown-timer {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
        }
        
        .form-input:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
        }
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .brand-logo {
            /* height: 80px; Tailwind class h-28 is now used */
            display: flex; /* Already set by Tailwind 'flex' */
            flex-direction: column; /* Already set by Tailwind 'flex-col' */
            align-items: center; /* Already set by Tailwind 'items-center' */
            justify-content: center; /* Already set by Tailwind 'justify-center' */
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .brand-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        .brand-logo img {
            /* max-height: 64px; Tailwind class max-h-16 is used */
            /* width: auto; Tailwind class w-auto is used */
            /* object-fit: contain; Tailwind class object-contain is used */
            margin-bottom: 0.5rem; /* Add some space between logo and name if Tailwind mt-2 on name is not enough */
        }

        .brand-logo .product-name {
            font-size: 0.75rem; /* Tailwind text-xs */
            color: #4a5568; /* Tailwind text-gray-700 */
            text-align: center; /* Tailwind text-center */
            margin-top: 0.5rem; /* Tailwind mt-2 */
            text-decoration: none;
        }

        .brand-logo .product-name:hover {
            color: #48bb78; /* Tailwind hover:text-green-500 */
        }
        
        .image-container {
            overflow: hidden;
            position: relative;
        }
        
        .image-container img {
            transition: transform 0.5s ease;
        }
        
        .image-container:hover img {
            transform: scale(1.05);
        }

/* Logo Styles */
header .container img.h-10.w-auto {
    max-height: 40px; /* Tailwind h-10 is 2.5rem or 40px */
    width: auto;
    object-fit: contain; /* Ensures the logo scales nicely */
}

footer .container img.h-10.w-auto {
    max-height: 40px; /* Tailwind h-10 is 2.5rem or 40px */
    width: auto;
    object-fit: contain; /* Ensures the logo scales nicely */
}