/* Fonts */
@font-face {
  font-family: "Space Grotesk";
  src:
    	local("Space Grotesk"),
    	url("ttf/SpaceGroteskVariable.ttf") format("truetype"),
}
@font-face {
	font-family: "Roboto";
	src:
		local("Roboto"),
		url("ttf/RobotoVariable.ttf") format("truetype")
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
	    font-family: "Roboto", sans-serif;
        }

        body { 
            line-height: 1.6;
            color: #333;
        }

        /* Navbar Styles */
        nav {
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        nav ul li a {
            color: #222222;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: #298675;
        }
	
	.nav-logo {
		font-family: "Space Grotesk", monospace;
		font-size: 30px;
		font-weight: 700;
	}

        /* Hero Section Styles */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 2rem;
            align-items: center;
        }

        .hero-content h1 {
	    font-family: "Space Grotesk", monospace;
            font-size: 3.5em;
            color: #237675;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-content p {
            font-size: 1.2rem;
            color: #175774;
            line-height: 1.8;
	    margin-bottom: 1em;
        }

        .hero-image {
            width: 100%;
            height: 400px;
            background: center no-repeat url("assets/img/can.svg");
	    background-size: contain;
        }

	.primary {
		background: linear-gradient(0.25turn, #2e9575, #175774);
		border: none;
		padding: 1em 1em;
		transition-duration: 0.5s;
	} .primary a {
		font-size: 20px;
		font-weight: 500;
		color: #ffffff;
		text-decoration: none;
	} .primary:hover {
		transform: scale(1.05);
		filter: drop-shadow(0 0 10px #2222228A);

	}
        /* Footer Styles */
        footer {
            background-color: #298675 /*#175774*/;
            color: white;
            padding: 3rem 2rem 2rem;
            margin-top: 6rem;
        }
	footer a {
		color: #222222;
	}

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .footer-logo {
	    width: 150px;
	    height: 100px;
	    background: center no-repeat url("assets/img/logo-extended.png");
	    background-size: contain;
        }

        .footer-links {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .footer-links a {
            color: #ecf0f1;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #222222;
        }

        .footer-bottom {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            font-size: 0.9rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero {
                grid-template-columns: 1fr;
            }

            .hero-content h1 {
                font-size: 3em;
            }

            nav ul {
                flex-direction: column;
                gap: 1rem;
            }

            .footer-content {
                flex-direction: column;
                text-align: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 1rem;
            }
        }