/* ---------------- FONTS ---------------- */

@font-face {
font-family: 'Astina';
src: url('fonts/Astina.ttf') format('truetype');
}

@font-face{
	font-family: 'EdwardianScript';
src: url('fonts/EdwardianScript.ttf') format('truetype');
}
@font-face{
	font-family: 'Optima';
src: url('fonts/Optima.ttf') format('truetype');
}

/* ---------------- GLOBAL ---------------- */

body {
margin: 0;
background: #EBE8DE;
font-family: 'Libre Baskerville', serif;
color: #5f5b4f;
line-height: 1.7;
}

h1, h2, h3 {
font-family: 'Cormorant Garamond', serif;
color: #8a6a5a;
margin-bottom: 15px;
}

.container {
width: 85%;
margin: auto;
padding: 20px 0;
}

.section {
margin-bottom: 60px;
}

/* ---------------- HEADER ---------------- */

.header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 18px 8%;
background: #EBE8DE;
border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

/* LEFT BRAND */

.brand-center {
font-family: 'Optima', serif;
/*font-weight: bold;*/
font-size: 30px;
color: #8a6a5a;
}

/* CENTER LOGO */

.logo-left {
text-align: center;
justify-self: start;   /* ensures left alignment */
}

.logo-left img {
height: 70px;
width: auto;
display: block;
margin: auto;

```
/* color adjustment (temporary fix for white logo) */
filter: brightness(0) saturate(100%) invert(40%) sepia(15%) saturate(400%) hue-rotate(330deg);
```

}

/* RIGHT NAV */

.nav-right {
display: flex;
justify-content: flex-end;
gap: 25px;
}

.nav-right a {
text-decoration: none;
font-family: 'Optima', serif;
font-size: 15px;
color: #8a6a5a;
position: relative;
font-weight: bold;
}

/* LUXURY UNDERLINE HOVER */

.nav-right a::after {
content: "";
position: absolute;
width: 0%;
height: 1px;
bottom: -4px;
left: 0;
background: #8a6a5a;
transition: 0.3s ease;
}

.nav-right a:hover::after {
width: 100%;
}

/* ---------------- HERO ---------------- */

.hero {
height: 100vh;
display: flex;
align-items: center;
text-align: center;
background: url('https://images.unsplash.com/photo-1519741497674-611481863552') center/cover no-repeat;
}

.hero-content {
width: 70%;
margin: auto;
}

.hero h1 {
font-size: 42px;
}

.hero p {
margin-top: 15px;
}

/* ---------------- BUTTONS ---------------- */

.btn {
/*background: #CAAE9D;*/
background: #88947F;
padding: 12px 28px;
border-radius: 30px;
text-decoration: none;
color: white;
display: inline-block;
margin: 15px 10px 0 10px;
font-family: 'Optima', serif;
transition: 0.3s;
font-size: 15px;
font-weight: bold;
}

.btn:hover {
opacity: 0.85;
}

/* ---------------- GRID ---------------- */

.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

/* ---------------- IMAGES ---------------- */

img {
width: 100%;
}

/* ---------------- FOOTER ---------------- */

.footer {
text-align: center;
padding: 40px;
font-size: 12px;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width: 900px) {

```
.header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
}

.nav-right {
    justify-content: center;
    flex-wrap: wrap;
}

.logo-center img {
    height: 60px;
}

.grid-3 {
    grid-template-columns: 1fr;
}

.hero h1 {
    font-size: 30px;
}

.hero-content {
    width: 90%;
}
```

}

/* ---------------- BANNER ---------------- */

.banner {
    height: 85vh;
    background: url('images/banner_section_1.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* overlay for luxury readability */
.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgba(235, 232, 222, 0.55);*/ /* your ivory overlay */
	background: rgba(30, 25, 20, 0.5);
    z-index: 1;
}

/* content */
.banner-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 70%;
}

/* heading in Astina */
.banner-overlay h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 60px;
    /*color: #8a6a5a;*/ /* back to your brand brown */
	color: #FFFFFF;
    line-height: 1.3;
	/*font-weight: normal;*/
}

/* buttons spacing */
.banner-buttons {
    margin-top: 25px;
}

/* description below */
.banner-description {
    text-align: center;
    max-width: 800px;
	color: #36454F;
}

.banner-description p {
    margin: 0 0 8px 0;
}

.custom-font {
  font-family: 'Astina', serif;
  font-size: 40px;
  font-weight: bold;
}