@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap');

:root { --bg-color: #031327; --header: #FFBD59; --red-accent: #FF5757; --white-accent: #D9D9D9; }

body { overflow-x: hidden; scroll-behavior: smooth; background-color: var(--bg-color); }

h1, h2, h3, h4, h5 { font-family: "Adamina", serif; font-weight: 550; font-style: normal; text-transform: uppercase; }
p, a, li {  font-family: "Adamina", serif; font-optical-sizing: auto; font-weight: 500; 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.1), rgba(0, 0, 0, 0.1)), url("https://www.fashionflare.co.za/images/hero-bg.jpg"); background-size: cover; background-position: center center; height: 100vh; width: 100%; color: var(--bg-color); }

/*About Section*/
#about { padding: 5%;  width: 100%; text-align: center; color: var(--header); }
#about .row { margin-top: 3%; }
#about .card { background-color: transparent; text-align: left; border: 2px solid var(--header); border-radius: 20px; display: flex; flex-direction: column; height: 100%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
#about .card h2 { background-color: var(--header); color: var(--bg-color); font-weight: 600; padding: 10px 15px; 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: 5%; background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("https://www.fashionflare.co.za/images/shop-bg.jpg"); background-size: cover; background-position: center center; height: 100vh; width: 100%; color: var(--bg-color); }
#shop a { background-color: var(--bg-color); color: var(--header); font-weight: 500; font-size: 1.3em; padding: 13px 35px; outline: none; border: none; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 30px;  }
#shop a:hover { background-color: var(--header); color: var(--bg-color); transition: 0.8s; font-weight: 500; }

/*Contact Section*/
#contact { padding: 5%;  width: 100%; color: var(--header); }
#contact h1, #contact p { text-align: center; }
#contact form { width: 80%; display: block; margin: auto; padding-top: 3%; }
#contact label { font-family: "Adamina", serif; text-align: left; font-size: 1.2em; }
#contact input, #contact textarea { background-color: transparent; padding: 2% 3%; border: 2px solid var(--header); color: var(--white-accent); font-family: "Adamina", serif; border-radius: 10px; }
#contact button {  background-color: transparent; padding: 10px 55px; outline: none; border: 2px solid var(--header); color: var(--header); font-family: "Adamina", serif; border-radius: 30px; display: block; margin: auto; font-size: 1.3em; }
#contact button:hover { background-color: var(--header); color: var(--bg-color); transition: 0.8s; font-weight: 500; }
#message-container { text-align: center; color: var(--bg-color); display: block; margin: auto; }

/*Footer*/
footer .container-fluid { color: var(--white-accent); 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){ 
    #about, #contact { padding: 10% 5%; } 
    #about .card h2 { font-size: 1.2em; }
    #about .card p { font-size: 1em; }
    #contact form { width: 100%; } 
    #contact input, #contact textarea { padding: 2% 3%; }
    #contact button { margin-top: 3%; }
}