:root {
  --shadow-color: 0deg 0% 63%;
  --shadow-elevation-low:
    0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.24),
    0.7px 0.6px 1.1px -0.9px hsl(var(--shadow-color) / 0.31),
    1.6px 1.3px 2.6px -1.7px hsl(var(--shadow-color) / 0.38);
  --shadow-elevation-medium:
    0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.25),
    1.5px 1.2px 2.4px -0.6px hsl(var(--shadow-color) / 0.31),
    3.4px 2.8px 5.5px -1.2px hsl(var(--shadow-color) / 0.36),
    7.9px 6.3px 12.5px -1.7px hsl(var(--shadow-color) / 0.42);
  --shadow-elevation-high:
    0.4px 0.3px 0.6px hsl(var(--shadow-color) / 0.23),
    2.8px 2.3px 4.5px -0.2px hsl(var(--shadow-color) / 0.26),
    5.2px 4.2px 8.3px -0.5px hsl(var(--shadow-color) / 0.28),
    8.1px 6.5px 12.9px -0.7px hsl(var(--shadow-color) / 0.31),
    12.4px 9.9px 19.6px -1px hsl(var(--shadow-color) / 0.34),
    18.5px 14.9px 29.4px -1.2px hsl(var(--shadow-color) / 0.36),
    27.4px 21.9px 43.4px -1.5px hsl(var(--shadow-color) / 0.39),
    39.5px 31.7px 62.7px -1.7px hsl(var(--shadow-color) / 0.41);
}

html {
  background-color: white;
  font-family: "Taviraj", serif;
  scroll-behavior: smooth;
}

main {
  height: fit-content;
  width: auto;
  background-color: white;
  margin-top: 165px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Abeezee", sans-serif;
}

body  {
  margin: 0;
}

p {
  margin: 0;
}

.navigation-items {
  display: flex;
  flex-direction: row;
  text-align: center;
  width: 90%;
  justify-content: space-around;
  font-family: "Abeezee", sans-serif;
  align-items: center;
  font-size: 3ch;
  font-weight: bolder;

}

.navigation {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color: #66bdc9;
  width: 100%;
  justify-content: space-around;
  overflow: auto;
}

.hero_text {
  color: #1d3a3a;
  font-size: 8ch;
  text-align: center;
}

.btn-text {
  color: white;
  background-color: transparent;
  border-color: transparent;
  font-family: "ABeezee", sans-serif;
  font-weight: bolder;
  padding: .5em;
  font-size: 4ch;
  transition: all 0.5s ease;
}

button.btn-text:hover {
  color: #1d3a3a;
}

.btn-primary {
  border: none;
  color: white;
  background-color: #376f70;
  padding: 1em;
  font-size: 3ch;
  border-radius: 0.2em;
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  transition: all 0.5s ease;
  box-shadow: var(--shadow-elevation-high);
}

button.btn-primary:hover {
  background-color: white;
  color: #1d3a3a;
}

.btn-rise-logo {
  background-image: url(../images/RiseLogoAsset\ 1.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  padding: 1em;
  font-size: 5ch;
  transition: all 0.5s ease;
}

.call-to-action {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rise-image {
  background-image: url(../images/BuyNowCan_Lemon.png);
  background-size: cover;
  background-position: 0%;
  width: 100%;
  min-height: 600px;
  background-repeat: no-repeat;
  padding: 3em;
}

.flavors-drop {
  margin: 2em;
  text-align: center;
}

.btn-flavors {
  color: white;
  background-color: #376f70;
  border: none;
  padding: 1em;
  font-size: 3ch;
  border-radius: 0.2em;
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  transition: all 0.5s ease;
  box-shadow: var(--shadow-elevation-high);
}

button.btn-flavors:hover {
  background-color: white;
  color: #1d3a3a;
  border-color: black;
}

.flavors-menu {
  height: auto;
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 2em;
  margin-top: auto;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 3em;
  background-color: transparent;
  box-shadow: var(--shadow-elevation-high);
  border-radius: 0.3em;
  scroll-behavior: smooth;
  transition: all 0.5s ease;
}

.flavors-lemon-stack {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.flavors-lemon {
  background-image: url(../images/BuyNowCan_Lemon.png);
  background-color: white;
  background-size: cover;
  margin: 1em;
  border-radius: 0.1em;
  height: 200px;
  width: 300px;
}

.flavors-watermelon {
  background-image: url(../images/BuyNowCan_Watermelon.png);
  background-color: white;
  background-size: cover;
  margin: 1em;
  border-radius: .1em;
  height: 200px;
  width: 300px;

}

.flavors-watermelon-stack {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.flavors-guava-stack {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  justify-content: center;
  align-content: center;
}

.flavor-text {
  text-align: center;
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  font-size: 3ch;
}

.ATC-button-stack {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 1em;
  max-width: 500px;
  box-shadow: var(--shadow-elevation-medium);
}

.btn-subtract {
  border: none;
  color: #376f70;
  background-color: white;
  padding: .5em;
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  font-size: 3ch;
  transition: all 0.5s ease;
  width: 33%;
  text-align: center;
}

button.btn-subtract:hover {
  background-color: #376f70;
  color: white;
}

.btn-addition {
  border: none;
  color: #376f70;
  background-color: white;
  padding: .5em;
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  font-size: 3ch;
  transition: all 0.5s ease;
  width: 33%;
  text-align: center;
}

button.btn-addition:hover {
  background-color: #376f70;
  color: white;
}

.ATC-number {
  font-family: "Abeezee", sans-serif;
  font-weight: bolder;
  font-size: 3ch;
  padding-left: 2em;
  padding-right: 2em;
}

div.shopify-checkout {
  display: flex;
  flex-direction: row;
  height: 125px;
  width: 90%;
  padding: 2em;
  margin: auto;
  justify-content: center;
}

button.shopify-checkout {
  font-family: "Abeezee", sans-serif;
  font-size: 3ch;
  font-weight: bolder;
  width: auto;
  height: auto;
  background-color: #376f70;
  color: white;
  border: none;
  border-radius: 0.2em;
  padding-right: 2em;
  padding-left: 2em;
  transition: all 0.5s ease;
  box-shadow: var(--shadow-elevation-high);
  align-items: center;

}

button.shopify-checkout:hover {
  background-color: white;
  color: #1d3a3a;
}

#shopify-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}

.about-us {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 243px;
}

.about-text {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin: 2em;
  width: 50%;
}

.google-maps {
  display: flex;
  margin: 8em;
}

.footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  background-color: #66bdc9;
  margin-top: 4em;
  justify-content: space-between;
}

.footer-text-left {
  font-family: "Abeezee", sans-serif;
  font-size: 3ch;
  min-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 40px;
  padding-top: 26.352px;
  padding-bottom: 45.352px;

}

.address  {
  color: #1d3a3a;
}

.phone  {
  color: #1d3a3a;
}

.email  {
  color: #1d3a3a;
}

.footer-text-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  padding-right: 0em;
  width: 50%;
  margin-right: 40px;
  font-size: 3ch;
}

.instagram {
  font-family: "Abeezee", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 100%;
  justify-content: flex-end;
}

.facebook {
  font-family: "Abeezee", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 100%;
  justify-content: flex-end;

}

.twitter {
  font-family: "Abeezee", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 100%;
  justify-content: flex-end;

}

a:link {
  text-decoration: none;
  color: #1d3a3a;
}

a:visited {
  text-decoration: none;
  color: #1d3a3a;
}

a:hover {
  color: #376f70;
}

a:active {
  color: #1d3a3a;

}