@font-face {
            font-family: 'Corporative Soft';
            src: url('../fonts/CorporativeSoft-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
		@font-face {
            font-family: 'Monsterize';
            src: url('../fonts/Monsterize-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
 /* General Styles */
        body, html {
            margin: 0;
            padding: 0;
            font-family: Corporative Soft;
            background-color: #0e222a; /* Black Theme */
            color: #fff;
            scroll-behavior: smooth;
        }
        section {
            padding: 50px 20px;
            text-align: center;
        }

        /* Header Section (Logo + Navigation) */
        header {
            position: fixed;
            width: 100%;
            /* margin-bottom: 80px; */
            top: 0;
            left: 0;
            background: rgb(0 0 0 / 59%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* padding: 10px 20px; */
            z-index: 1000;
        }

        /* Logo */
        .logo img {
            padding: 15px;
            width: 180px;
            height: auto;
        }

        /* Navigation */
        /* Navigation */
        nav {
            /* position: fixed; */
            width: 100%;
            top: 0;
            left: 0;
            /* background: rgba(0, 0, 0, 0.8); */
            padding: 15px 0;
            text-align: center;
            z-index: 1000;
        }
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }
        nav ul li {
            position: relative;
            margin: 0 15px;
        }
        nav ul li a {
            text-decoration: none;
            color: #fff;
            padding: 10px 15px;
            font-size: 22px;
            display: block;
        }
        nav ul li:hover > ul {
            display: block;
        }
        nav ul ul {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            top: 100%;
            left: 0;
            display: none;
            padding: 0;
        }
        nav ul ul li {
            width: 200px;
            text-align: left;
        }
        nav ul ul li a {
            padding: 10px;
        }

        /* Mobile Menu */
        .menu-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }
            nav ul {
                display: none;
                flex-direction: column;
                background: rgba(255, 255, 255, 0.1);
                position: absolute;
                top: 50px;
                right: 10px;
                width: 200px;
                text-align: center;
                padding: 10px;
            }
            nav ul.active {
                display: flex;
            }
        }

        /* Home Slider */
        #home {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: url('../img/bg.webp') center/cover no-repeat;
            min-height: 123vh;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
        }
		
        #home h1 {
            font-size: 76px;
            font-weight: bold;
            margin: 10px 0;
        }
		.warp-text {
        display: inline-block;
        font-size: 36px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
      
        text-shadow: 2px 2px 5px rgba(255,255,255,0.3);
    }
        .tagline-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        #home .tagline {
            font-size: 59px;
            margin-top: 40px;
            font-weight: bold;
            color: #ffcc00; /* Highlighted color */
            background: rgb(0 0 0 / 81%);
            padding: 10px 20px;
            border-radius: 10px;
            display: inline-block;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
        }
        .tagline img {
            width: 50px; /* Adjust size */
            height: auto;
        }
		#about{
			background-image: url(../img/bg-p-3.png);
			background-repeat: no-repeat;
			background-position: 40rem 18rem;
			background-size: 716px;
		}

        /* Product Categories */
        #products {
            background: url(../img/bg-p.webp) center / cover no-repeat;
            /* background: rgba(255, 255, 255, 0.1); */
            /* background: url('img/bg-p.jpg'); */
        }
		#product-2{
			background: url(../img/bg-p-2.webp) center / cover no-repeat;
		}
		#product-3{
			background: url(../img/bg-p-3.webp) center / cover no-repeat;
		}
		#product-4{
			background: url(../img/bg-p-4.webp) bottom / cover no-repeat;
		}
		h1{
			font-family: Monsterize;
			color: #008a8d;
			font-size: 75px;
			line-height: 0;
		}
		h2{
		    font-family: Corporative Soft;
		    font-size: 45px;
		    margin-bottom: 0px;
		    margin-top: 0px;
		}
        .product-category {
            margin-bottom: 0px;
        }
        .product-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: auto;
            gap: 20px;
            padding: 20px;
        }
        .product-item {
            flex: 1 1 calc(25% - 20px);
            max-width: calc(25% - 20px);
            background: rgb(0 0 0);
            padding: 20px;
            border: 2px solid #008a8d;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        .product-item:hover {
            transform: scale(1.05);
        }
        .product-item img {
            width: 100%;
            text-align: center;
            height: auto;
            border-radius: 10px;
            margin: 0px auto;
        }
        .product-item h3 {
            margin-top: 30px;
            font-size: 27px;
            font-family: Corporative Soft;
            line-height: 27px;
        }
			#contact p {
				font-size: 24px;
				line-height: 20px;
			}
        #contact p a{
				color: white;
             text-decoration: none;
			}
        /* Responsive Design */
        @media (max-width: 900px) {
            .product-item {
                flex: 1 1 calc(50% - 20px);
                max-width: calc(50% - 20px);
            }
        }
        @media (max-width: 600px) {
            .product-item {
                flex: 1 1 100%;
                max-width: 100%;
            }
            h1 {
                font-family: Monsterize;
                color: #008a8d;
                font-size: 52px;
                line-height: 5px;
            }
        }

        /* Footer */
        footer {
            background: rgba(255, 255, 255, 0.1);
            text-align: center;
            padding: 10px;
            position: relative;
        }

        @media (max-width: 900px) {
            .product-container {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
		/* Container for Two Columns */
        .container {
            display: flex;
            flex-wrap: wrap;
            max-width: 1230px;
            margin: 0px auto;
            /* padding: 20px; */
            gap: 20px;
        }

        /* Two Column Layout */
        .column {
            /* flex: 1; */
            padding: 20px;
            /* background: rgba(0, 51, 51, 0.8); */
            border-radius: 10px;
            /* min-width: 300px; */
        }

        .column h2 {
		    text-align: left;
		    font-size: 2.2rem;
		    margin-bottom: 10px;
		    /* text-transform: uppercase; */
		    }
		.column h2::before {
            content: "“ ";
            font-size: 4rem;
            color: #008c8f;
            font-weight: 900;
            line-height: 0px;
        }
		.column h5{
			font-size: 1.3rem;
			text-align: left;
			margin-bottom: -18px;
			margin-top: 30px;
			/* line-height: 0px; */
		}

        .column p {
		    text-align: left;
		    font-size: 1.2rem;
		    line-height: 1.6;
		    }

        /* Responsive: Stack Columns on Small Screens */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .column {
                width: 100%;
            }
        }