* {
  padding: 0px;
  margin: 0px;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}


@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

/* colors */
:root {
  --blue: #BFEDF3FF;
  --yellow: #FFF0A0FF;
  --brown: #563410FF;
  --cream: #FBF3E9FF;
  --green-500: #8FB799FF;
  --green-50: #EFF5F1FF;
  --green-950: #0A100BFF;
  --green-100: #E0EBE3FF;
  --green-200: #C1D7C6FF;
  --green-300: #A2C3AAFF;
  --green-400: #83AF8EFF;
  --green-600: #507C5BFF;
  --green-700: #3C5D44FF;
  --green-800: #283E2DFF;
  --green-900: #141F17FF;
  --orange-500: #E09D56FF;
  --orange-50: #FBF3E9FF;
  --orange-950: #160D04FF;
  --orange-100: #F7E6D4FF;
  --orange-200: #EFCDA9FF;
  --orange-300: #EEB377FF;
  --orange-400: #DF9B53FF;
  --orange-600: #AC6820FF;
  --orange-700: #814E18FF;
  --orange-800: #563410FF;
  --orange-900: #2B1A08FF;
  --gradient-orange: linear-gradient(180deg, #EFCDA9FF 0%, #EEB377FF 100%);
  --footer-blue: linear-gradient(180deg, rgba(191, 237, 243, 0.00) 0%, #BFEDF3 100%);
}

html {
  background-color: floralwhite;
}

html {
  align-content: center;
  font-family: "Kumbh Sans", "sans-serif";
  color: var(--brown);
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  margin-top: 72px;
}

p {
  letter-spacing: 2px;
}



/* typography */
h1 {
  font-family: "Kumbh Sans", sans-serif;
  font-size: 5.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  /* padding-bottom: 1rem; */
}

h2 {
  /* Heading 2 */
  font-family: "Kumbh Sans", sans-serif;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-bottom: 1.2rem;
}

h3 {
  /* Heading 3 */
  font-family: "Kumbh Sans", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-bottom: .5rem;
}

h4 {
  /* Subtitle */
  font-family: "Kumbh Sans", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding-bottom: .1rem;
}

p {
  /* Body 2 */
  font-family: "Kumbh Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.6px;
}

/* .container {
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
} */

a {
  text-decoration: none;
  color: var(--brown);
  font-weight: 500;
}

a:hover {
  color: var(--green-500);
  font-weight: 750;
}

a:active {
  color: var(--orange-500);
  font-weight: 500;
}

a:visted {
  color: #563410;

}

/*header*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  padding: 0 5vw;
  /*design*/
  background-color: var(--green-100);
  color: #563410;
  font-family: "Kumbh Sans", "sans-serif";
  font-size: 20px;
  /*flex information*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .main-nav {
  /* grid-column-start: 1/2 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  /* grid-column: 3/4; */
  padding: 10px;
  margin: auto;
}

header .utilities {
  /* grid-column: 5/6; */
  /* padding: 10px; */
}

.utilities img {
  height: 24px;
  margin: 0px 10px;
}


/*navigation*/
.dropbtn {
  background-color: var(--green-100);
  color: var(--brown);
  padding: 24px;
  font-family: "Kumbh Sans", "sans-serif";
  /* font-size: 16px; */
  border: none;
  transition: font-weight .3s ease-in
}

.dropbtn:hover,
.dropbtn:active {
  font-weight: bold;
}

.dropbtn a:hover {
  color: var(--brown) font-weight:800;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--cream);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.dropdown-content a {
  color: var(--brown);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: var(--green-100);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: var(--green-100);
}

  .utilities input[type="text"]{
    background-color: white;
    border-radius: 10px;
    border: 0px;
    padding: 15px;
    margin: 10px;
    width: 225px;
    font-family: Kumbh Sans, sans-serif;

  }

  .utilities input[type="button"]{
    border-radius: 10px;
    border: 0px;
    padding: 10px;
    margin: 0 10px 10px 10px;
    width: 225px;
    font-family: Kumbh Sans, sans-serif;
    background-color: var(--orange-500);
  }

  .utilities .dropbtn{
    padding: 24px 0;
  }

/*three column structure*/
.three-column {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.category {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

/* container structures */
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5%;
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 10% 5%;
  grid-gap: 20px;
}

.grid-container img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
}

.half-width {
  height: 100%;
}

.section-title {
  grid-column: 1/3;
  grid-row: 1;
}

.section-title h2 {
  text-align: left;
}

.text {
  padding: 16px;
}

.half-width {
  grid-column: span 1;
}

.full-width {
  grid-column: span 2;
}

.full-height {
  min-height: 100vh;
}

.two-column-flex {
  display: flex;
  width: 100%;
}

/* wave divider */

.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(124% + 1.3px);
  height: 104px;
}

.wave-divider .shape-fill {
  fill: var(--green-500);
}

/*footer*/
footer {
  background: var(--footer-blue, linear-gradient(180deg, rgba(191, 237, 243, 0.00) 0%, #BFEDF3 100%));
  position: relative;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
  padding: 5%;
}

footer p {
  font-size: .8rem;
}

footer #footer-nav {
  grid-column: 1/2;
}

footer #footer-nav ul {
  list-style: none;
}

#footer-nav nav ul:first-child>li>a {
  color: var(--orange-500);
}

#footer-nav nav ul>ul>li {
  text-indent: .7rem;
}

footer #copyright {
  grid-column: 1/3;
  grid-row: 2;
}

footer #call-to-action {
  grid-column: 2/3;
}

footer #call-to-action p {
  font-size: 1.2rem;
  font-weight: 600;
}

.social-media img {
  margin: 8px 8px 8px 0;
}

footer #image {
  grid-column: 3/4;
  grid-row: 1/3;
}

footer #image img {
  width: 250px;
}

/*components*/
.button {
  padding: 16px;
  margin: 10px 0;
  border-radius: 10px;
  text-align: center;
  background-color: var(--green-500);
  color: var(--cream);
}

.button a {
  color: var(--cream);
}

.button.button:hover {
  background-color: var(--green-200);
  font-weight: bold;
}

.button.button:hover a {
  color: var(--brown);
}

.button:active {
  background-color: var(--cream);
  color: var(--green-500);
  font-weight: 500;
}

footer #call-to-action input[type=email] {
  background-color: var(--cream);
  border-radius: 10px 0 0 10px;
  border: 0px;
  height: 2rem;
  padding: 25px;
  width: 225px;
  font-family: Kumbh Sans, sans-serif;
}

#subscribe-btn {
  border-radius: 0 10px 10px 0;
  width: 75;
}

#subscribe {
  display: flex;
  align-items: center;
  margin: 10px 0;
}