/* Custom Styles for NAJ356 AIRSOFT AND TACTICAL SUPPLIES TRADING */

        :root {

            --primary-color: #2c3e50;

            --secondary-color: #34495e;

            --accent-color: #e74c3c;

            --text-light: #ecf0f1;

            --bg-dark: #1a1a1a;

        }

        

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        

        /* Hero Section */

        .hero-section {

            position: relative;

            height: 600px;

            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 

                        url('/public/sources/img/banner-long.jpg') center/cover;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            color: white;

        }

        

        .hero-content h1 {

            font-size: 3.5rem;

            font-weight: 700;

            margin-bottom: 1rem;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);

        }

        

        .hero-content p {

            font-size: 1.3rem;

            margin-bottom: 2rem;

            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);

        }

        

        .hero-content .location {

            font-size: 1.1rem;

            margin-bottom: 0.5rem;

            opacity: 0.9;

        }

        

        .btn-hero {

            background-color: var(--accent-color);

            color: white;

            padding: 0.8rem 2.5rem;

            font-size: 1.1rem;

            border: none;

            border-radius: 4px;

            transition: all 0.3s;

        }

        

        .btn-hero:hover {

            background-color: #c0392b;

            transform: translateY(-2px);

            box-shadow: 0 4px 8px rgba(0,0,0,0.3);

        }

        

        /* Section Headings */

        .section-heading {

            text-align: center;

            margin: 4rem 0 3rem;

            font-size: 2.5rem;

            font-weight: 700;

            color: var(--primary-color);

        }

        

        /* Product Cards */

        .product-card {

            border: 1px solid #ddd;

            border-radius: 8px;

            overflow: hidden;

            transition: all 0.3s;

            margin-bottom: 2rem;

            background: white;

        }

        

        .product-card:hover {

            box-shadow: 0 8px 16px rgba(0,0,0,0.15);

            transform: translateY(-5px);

        }

        

        .product-image {

            width: 100%;

            height: 250px;

            object-fit: cover;

            background-color: #f8f9fa;

        }

        

        .product-info {

            padding: 1.5rem;

        }

        

        .product-title {

            font-size: 1.1rem;

            font-weight: 600;

            margin-bottom: 0.5rem;

            color: var(--primary-color);

        }

        

        .product-price {

            font-size: 1.3rem;

            color: var(--accent-color);

            font-weight: 700;

        }

        

        /* Gallery */

        .gallery-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 1rem;

            margin: 3rem 0;

        }

        

        .gallery-item {

            position: relative;

            overflow: hidden;

            border-radius: 8px;

            height: 200px;

            background-color: #f0f0f0;

        }

        

        .gallery-item img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.3s;

        }

        

        .gallery-item:hover img {

            transform: scale(1.1);

        }

        

        /* Brands Section */

        .brands-section {

            background-color: #f8f9fa;

            padding: 4rem 0;

        }

        

        .brand-logo {

            height: 80px;

            object-fit: contain;

            filter: grayscale(100%);

            opacity: 0.7;

            transition: all 0.3s;

        }

        

        .brand-logo:hover {

            filter: grayscale(0%);

            opacity: 1;

        }

        

        

        /* Responsive */

        @media (max-width: 768px) {

            .hero-content h1 {

                font-size: 2.5rem;

            }

            

            .hero-section {

                height: 500px;

            }

            

            .section-heading {

                font-size: 2rem;

            }

        }