:root {
  --bg: #f9f7f0;
  --primary: #1c402e;
  --secondary: #6e7075;
}
@font-face {
  font-family: "Garet-Book";
  src: url("assets/fonts/Garet-Book.woff2") format("woff2"),
    url("assets/fonts/Garet-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Garet-Heavy";
  src: url("assets/fonts/Garet-Heavy.woff2") format("woff2"),
    url("assets/fonts/Garet-Heavy.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Maharlika-Regular";
  src: url("assets/fonts/Maharlika-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "TTHoves-Regular";
  src: url("assets/fonts/TTHoves-Regular.woff2") format("woff2"),
    url("assets/fonts/TTHoves-Regular.woff") format("woff");
  src: url();
}

@font-face {
  font-family: "Kulachat";
  src: url("assets/fonts/Kulachat.woff2") format("woff2"),
    url("assets/fonts/Kulachat.woff") format("woff");
}
@font-face {
  font-family: "Lustria-Regular";
  src: url("assets/fonts/Lustria-Regular.ttf") format("truetype");
}

/* Example of how to use the fonts in your CSS styles */
body {
  font-family: "TTHoves-Regular ", sans-serif; /* Use Garet-Book as the default font */
  /* background: linear-gradient(to left, #ffffff, #dbeeff); */
  background-color: var(--bg);
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  /* font-size: 20px; */
}

.container {
  /* max-width: 900px; */
  margin: 0 auto;
  /* padding: 0 1em; */
  display: grid;
  grid-template-columns: 2fr 2fr; /* Two equal-width columns */
  grid-template-rows: 100%; /* Fill the available height */
  height: 100%; /* Fill the height of the viewport */
  color: var(--primary);
}

.column1 {
  /*background-color: #242831; /* Background color for the first column */
  /*background-color: rgb(56 60 69);*/
  margin-left: 1.5rem;
}

.column2 {
  /* background-color: #cceeff; Background color for the second column */
  padding: 20px; /* Add padding or content as needed */
}

header h1 {
  font-family: "Maharlika-Regular", sans-serif; /* Use Garet-Heavy for headings */
  text-transform: uppercase;
  font-size: 32px;
  margin-bottom: 0;
}
h1 {
  text-transform: uppercase;
  font-family: "Lustria-Regular", serif;
}
header {
  display: flex;
  justify-content: left;
  letter-spacing: 0.32rem;
  /* margin-bottom: 4em; */
  /* background-color: #cfdee3; */
  /* background-color: #242831; Background color for the first column */

  padding-left: 1.5rem;
  padding-bottom: 1rem;
  /* color: #242831; */
}

header div {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

header hr {
  border: none;
  border-top: solid 1px #242831;
  margin: 0;
}

header ul {
  padding: 0;
  margin: 0;
}

header li {
  text-transform: uppercase;
  font-size: 0.8rem;
  list-style: none;
  padding-left: 0;
}

section {
  padding-left: 1.5rem;
  padding-right: 3rem;
}

.sections {
  display: flex;
  flex-direction: column;
  align-content: center;
  gap: 2rem;
}

.sections p {
  font-size: 1.25rem;
  font-weight: 100;
  color: var(--secondary);
}

a {
  color: var(--bg);
  /* border-radius: 1.5em; */
  text-decoration: none;
  padding: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--primary);
}

@media only screen and (max-device-width: 812px) and (orientation: portrait) {
  .container {
    display: flex;
    flex-direction: column;
    /* grid-template-columns: 1fr; */
    /* grid-template-rows: 2fr 2fr 2fr 2fr; */
    min-width: 0;
    margin: 0;
  }
  .column1 {
    margin: 0;
  }
  .sales-column-1 h1 {
    font-size: 1.6rem;
    margin-right: 0;
    margin-top: 0;
  }
  .image-container {
    width: 90vw;
    height: auto;
  }
  .social {
    margin-top: 2rem;
  }
  .sales-text {
    max-width: 90vw;
    margin-top: 0;
  }

  .container a.button {
    font-size: 1.25rem;
    font-family: Lustria-Regular, serif;
    padding: 0.8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 160px;
    text-align: center;
  }
  header {
    padding-bottom: 0;
  }
}