:root {
            --color-primary: #de0002;
            --color-gray-bg: #f3f5f6;
            --color-accent: #f7b317;
        }
        @tailwind base;
        @tailwind components;
        @tailwind utilities;
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            }
            .bg-gradient-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            }
            .line-clamp-2 {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .slider-height {
                height: calc((100vh - 80px) * 2 / 3);
                min-height: 330px;
            }
            .slider-height-mobile {
                height: calc((100vh - 70px) * 2 / 3);
                min-height: 260px;
            }
			.img-square {
				aspect-ratio: 1/1;
				object-fit: contain;
			}
        }
        .section-title-underline::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--color-primary);
        }
        body {
            margin-top: 80px;
            font-family: system-ui, sans-serif;
        }
        @media (max-width: 768px) {
			body {
				margin-top: 70px !important;
			}
			.banner-slider {
				height: calc((100vh - 70px) * 2 / 3) !important;
				min-height: 260px !important;
				margin-top: -70px !important;
				top: 70px !important;
			}
			.banner-slider [data-index] {
				align-items: flex-start !important;
				padding-top: 2rem !important;
			}
			.banner-slider [data-index] .relative.z-2 {
				top: 0 !important;
				transform: translateY(0) !important;
				margin-top: 0 !important;
			}
			.banner-slider [data-index] .relative.z-2 h2 {
				margin-bottom: 0.8rem !important;
				line-height: 1.1 !important;
			}
			.banner-slider [data-index] .relative.z-2 p {
				margin-bottom: 1rem !important;
				font-size: 0.9rem !important;
			}
			.nav-fixed {
				height: 70px !important;
			}
			.news-item-mobile {
				display: block !important;
			}
			.news-item-mobile .news-img {
				width: 100% !important;
				height: 200px !important;
				margin-bottom: 1rem !important;
			}
		}
        .business-img-container {
            height: 200px !important;
        }
        .news-item-mobile {
            gap: 1.5rem !important;
        }
        #bannerSlider > div[data-index] {
            transition: opacity 1s ease-in-out;
            pointer-events: none;
        }
        #bannerSlider > div[data-index].opacity-100 {
            pointer-events: auto;
        }
        #sliderPrev, #sliderNext, #sliderDots {
            z-index: 30;
        }
        #mobile-menu {
            background-color: white !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            max-height: calc(100vh - 70px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            z-index: 1000;
            transition: opacity 0.2s ease;
        }
        #mobile-menu a,
        #mobile-menu span,
        #mobile-menu div:not(.bg-primary):not(.bg-white) {
            color: #333333 !important;
        }
        #mobile-menu a:hover {
            color: var(--color-primary) !important;
        }
        #mobile-menu .border-b {
            border-bottom-color: #e5e7eb !important;
        }
        #mobile-lang-wrapper span {
            color: #333333 !important;
        }
        #mobile-lang-wrapper .group-hover\:block {
            background: white;
        }
        body.menu-open #mobile-menu a,
        body.menu-open #mobile-menu span,
        body.menu-open #mobile-menu .text-black {
            color: #333333 !important;
        }
        #navbar:not(.bg-primary) #mobile-menu a,
        #navbar:not(.bg-primary) #mobile-menu span {
            color: #333333 !important;
        }
        #mobile-menu .container > div > a,
        #mobile-menu .container > div > div > a {
            color: #1f2937 !important;
        }
        body.menu-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        .group-hover\:block a {
            color: #000000 !important;
        }
        .group-hover\:block a:hover {
            color: var(--color-primary) !important;
        }