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

:root { --gold: #D3AF2B;  --gold-gradient: linear-gradient(90deg, #d4af37, #f0c95d); --black: #000000; --white: #FFFFFF; }

body { overflow-x: hidden; scroll-behavior: smooth; }

h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-style: normal; text-transform: uppercase; }
p, a, li { font-family: 'Lato', sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
/*Navbar*/
.navbar { background-color: transparent !important; }
.navbar img { max-width: 250px; height: auto; }
.navbar ul { text-align: center; font-size: 1.3em; }
.navbar li .nav-link { color: var(--header) !important; }
.navbar li .nav-link:hover { background-color: var(--primary); color: #FFF !important; transition: 0.7s; }

/*Section*/
section h1 { font-size: calc(1.8em + 2vw); }
section h2 { font-size: 1.5em }
section p { font-size: 1.2em; padding: 1% 0; }

/*Hero Section*/
#hero { padding: 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://www.ghostforge.co.za/images/terms/hero-img.jpg"); background-size: cover; background-position: center center; height: 100vh; width: 100%; }
#hero h1 { text-align: center; color: transparent; background-image: var(--gold-gradient); background-clip: text; -webkit-background-clip: text; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); display: inline-block; }
#hero p { text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); color: var(--white); font-size: 1.5em; } 
#hero a { border: 2px solid var(--gold); background: transparent; padding: 15px 25px; border-radius: 7px; font-size: 1em; font-weight: 500; margin-top: 3%; color: var(--gold); text-decoration: none; transition: background 0.5s, color 0.5s, opacity 0.5s; }
#hero a:hover { background: linear-gradient(90deg, #d4af37, #f0c95d); color: var(--black); opacity: 90%; transition: background 0.5s, color 0.5s, opacity 0.5s; }

/*Terms Section*/
#terms { padding: 8% 5%; }
#terms img { max-width: 200px; height: auto; display: block; margin: auto; padding-bottom: 20px; }
#terms h2 { color: var(--red); font-size: 3em; text-align: center; font-weight: 600; padding-bottom: 3%; }
#terms h3 { color: var(--red); font-size: 1.5em; text-align: left; font-weight: 600; }
#terms p { color: var(--blue); font-size: 1.2em; font-weight: 500; }
#terms li { color: var(--red); font-size: 1.1em; font-weight: 500; }

/*Footer*/
footer .container-fluid { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); padding: 6vh 5vw; font-size: 1.1em; font-weight: 500; border-top: 2px solid var(--header); }
footer a { text-decoration: none; color: var(--white-accent); }
footer a:hover { color: var(--header); transition: 0.8s; }

/*Media Queries*/
@media(max-width: 768px){ 
    #hero h1, #shop h1 { text-align: left; }
    #hero p, #shop p { text-align: left; }
    #hero a { margin: 10% 0 0 0; width: auto; align-self: flex-start; }
    
    /* Terms */
    #terms { padding: 10vh 5vw; }
    #terms img { max-width: 120px; }
    #terms h2 { font-size: 1.8em; text-align: left; }
    #terms p { font-size: 1em; text-align: left !important; }
     
    footer a, #footer p { font-size: 1em; }
}