@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; }

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

/*Navbar*/
.navbar { background-color: transparent !important; }
.navbar img { max-width: 200px; height: auto; }
.navbar ul { text-align: center; font-size: 1.3em; }
.navbar li .nav-link { color: black !important; }
.navbar li .nav-link:hover { color: grey !important; transition: 0.7s; }

/*Hero Section*/
#hero { padding: 12% 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://www.ghostforge.co.za/images/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; }

/*About Section*/
#about { padding: 12% 5%; text-align: center; background-color: var(--black); background-image: url("https://www.ghostforge.co.za/images/about-bg.png"); background-size: cover; background-position: center center; height: auto; width: 100%; }
#about .row { margin-top: 3%; }
#about 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; }
#about .card { background-color: var(--white); text-align: left; border: none; border-radius: 20px; display: flex; flex-direction: column; height: 100%; box-shadow: 0px 4px 10px rgba(211, 175, 43, 0.5); }
#about .card h2 { background-color: var(--gold); color: var(--black); font-weight: 600; padding: 15px 30px; width: fit-content; border-bottom-right-radius: 20px; border-top-left-radius: 20px; }
#about .card p { padding: 20px; font-weight: 500; flex: 1; }
#about .card i { padding-right: 10px; font-weight: 700; }

/*Shop Section*/
#shop { padding: 12% 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("https://www.ghostforge.co.za/images/shop-bg.jpg"); background-size: cover; background-position: center center; height: 100vh; width: 100%; }
#shop 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; }
#shop p { text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); color: var(--white); font-size: 1.5em; } 
#shop 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; }
#shop a:hover { background: linear-gradient(90deg, #d4af37, #f0c95d); color: var(--black); opacity: 90%; transition: background 0.5s, color 0.5s, opacity 0.5s; }

/*Contact Section*/
#contact { padding: 12% 5%;  width: 100%; background-color: var(--black); background-image: url("https://www.ghostforge.co.za/images/about-bg.png"); background-size: cover; background-position: center center; height: auto; width: 100%;  }
#contact h1 { text-align: center !important; 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); }
#contact p { text-align: center; color: var(--white); }
#contact form { width: 80%; display: block; margin: auto; padding-top: 3%; }
#contact label { text-align: left; font-size: 1.2em; font-weight: 500; color: var(--white); }
#contact input, #contact textarea { background-color: var(--black); padding: 2% 3%; border: 2px solid var(--gold); color: var(--white); }
#contact select { background-color: var(--black); padding: 2% 3%; border: 2px solid var(--gold); color: var(--white); width: 100%; }
#contact button { border: 2px solid var(--gold); background-color: var(--black); padding: 15px 50px; border-radius: 7px; font-size: 1em; font-weight: 500; display: block; margin: 3% auto;  }
#contact button:hover { background-color: var(--gold); transition: 0.5s; color: var(--black); opacity: 70%; }
#message-container { text-align: center; color: var(--bg-color); display: block; margin: auto; }

/*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(--black); }
footer a:hover { color: var(--gold); 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; }
    
    #about, #contact { padding: 10% 5%; } 
    #about .card h2 { font-size: 1.2em; }
    #about .card p { font-size: 1em; }

    #shop a { margin: 10% 0 0 0; width: auto; align-self: flex-start; }

    #contact h1 { text-align: left; display: inline-block; }
    #contact p { text-align: left; }
    #contact button { margin: 10% 49% 0% 0% ; }
    #contact form { width: 100%; } 
    #contact input, #contact textarea { padding: 2% 3%; }
    #contact button { margin-top: 3%; }
}