/* 
Brown rgba(88,50,41,1)
Cream rgba(232,214,187,1)
Orange rgba(248,164,118,1) */

/* Mobile Devices (Portrait phones) */
@media screen and (max-width: 575.98px) {
  .typed {
      font-size: 4vh !important;
      top: 42vh !important;
  }

  .button {
      padding: 2vw;
  }

  .buttons {
    display: inline !important
  }

  .socials li {
      margin: 0 8px;
  }
  .navbar-brand2 {
    max-height: 8vh !important;
  }

  .btn-brown {
    width: 44vw !important;
  }

  .buttons {
    top: 58vh !important;
  }
  .buttons li {
    padding: 2vh 0vh;
  }
  .bacc {
    bottom: 13vh !important;
  }
  .bacc img {
    width: 10vw !important;
  }
}

/* Small Devices (Landscape phones) */
@media screen and (min-width: 576px) and (max-width: 767.97px) {
  .typed {
      font-size: 4vh !important;
      top: 42vh !important;
  }

  .button {
      padding: 2vw;
  }
  .btn-brown {
    width: 25vw !important;
  }

  .socials li {
      margin: 0 4px;
  }
  .navbar-brand2 {
    max-height: 10vh !important;
  }
  .buttons {
    display: inline !important;
    top: 58vh !important;

  }
  .buttons li {
    padding: 1vh 0vh;
  }
  .bacc {
    bottom: 14vh;
  }
  .bacc img {
    width: 10vw !important;
  }
}

/* Medium Devices (Tablets) */
@media screen and (min-width: 768px) and (max-width: 991.99px) {
  .typed {
      font-size: 5vh !important;
      top: 40vh;
  }
  .buttons {
    display: inline !important;
  }
  .button {
      padding: 1.25vw;
      top: 60vh;
  }
  .btn-brown {
    width: 25vw !important;
  }

  .socials li {
      margin: 0 2px;
  }
  .navbar-brand2 {
    max-height: 10vh !important;
  }
  .buttons li {
    padding: 1vh 0vh;
  }
  .bacc {
    bottom: 14vh;
  }

}

/* Large Devices (Desktops) */
@media screen and (min-width: 992px) and (max-width: 1199.99px) {
  .typed {
      font-size: 6vh;
  }
  .navbar-brand2 {
    max-height: 10vh!important;
  }
  .btn-brown {
    width: 20vw !important;
  }  
  .buttons {
    display: inline !important;
    top: 60vh;
  }
  .buttons li {
    padding: 1vh 0vh;
  }
}

/* Extra Large Devices (Large Desktops) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) {
  .typed {
      font-size: 6vh;
  }
  .navbar-brand2 {
    max-height: 16vh !important;
  }
  .buttons {
    /* display: inline !important; */
    top: 64vh !important;
  }

  .buttons li {
    padding: 1vh 0vh;
  }
}

/* XX-Large Devices (Extra Large Desktops) */
@media screen and (min-width: 1400px) {
  .typed {
      font-size: 6vh;
  }

  .navbar-brand2 {
    /* max-height: 15vh !important; */
    top: 60vh;
  }
  .btn-brown {
    width: 12vw !important;
  }
}
/* Landing Page */

:root {
  --bs-body-font-family: 'Oswald', sans-serif !important;
  --bs-heading-color: rgba(102, 51, 51, 1) !important;
  }

a {
  text-decoration: none !important;
}

body, html {
  height: 100%;
  align-items: center;
  font-family: 'Oswald', sans-serif;
  overflow-y: hidden;
}

h1 {
  position:absolute;
  top: 32vh;
  font-size: 8vh !important;
  color: rgba(102, 51, 51, 1);
}

h2 {
  position:absolute;
  top: 42vh;
  font-size: 6vh !important;
  color: rgba(102, 51, 51, 1);
}

h3 {
  position:absolute;
  top: 55vh;
  font-size: 4vh !important;
  color: rgba(102, 51, 51, 1);
}

p {
  font-family: 'Lato', sans-serif;
  color: rgba(102, 51, 51, 1);
}

.center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.bg {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.75)), url("landing4.jpg");
  height: 100%;
  object-fit: fill;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Navbar Brand */
.navbar-brand {
  position: absolute;
  top: 5vh;
  /* height: 20vh; */
  max-height: 40vh;
  z-index: 100;
}

.navbar-brand2 {
  position: absolute;
  top: 38vh;
  max-height: 30vh;
  z-index: 100;
}

/* Buttons Section */
.buttons {
  z-index: 100;
  position: absolute;
  top: 62vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.buttons h3 {
  color:rgba(102, 51, 51, 1);
}

.buttons img {
  max-height: 7.5vh;
}

/* Mid Section */
.mid {
  opacity: 0;
  transition-delay: 5s;
  transition: 1s ease-in-out;
}

.mid.visible {
  opacity: 1;
}

/* Social Icons */
.socials {
  position: absolute;
  bottom: 5vh;
}

.fab {
  transition: 0.3s;
  font-size: 4vh;
  margin: 1vw;
  color:rgba(102, 51, 51, 1);
}

.fab:hover {
  transform: scale(1.15);
}

.bacc {
  position: absolute;
  bottom: 10vh;
}

.bacc img {
  width: 6vw;
}

/* Copyright Section */
.copyright {
  color: rgba(102, 51, 51, 1);
  position: absolute;
  bottom: 2vh;
  font-size: 2vh;
}

/* Show Class */
.show {
  transition: 1s;
}

/* Label Style */
label {
  color: #333;
}

/* Send Button Style */
.btn-brown {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}

/* Help Block with Errors */
.help-block.with-errors {
  color: #ff5050;
  margin-top: 5px;
}

/* Messages Section */
.messages {
  position: absolute;
  z-index: 999;
}

.btn-brown {
  display: block;
  box-sizing: border-box;
  margin: 0.5vw;
  width: 12vw; 
  background: #fff; /* fallback color for old browsers */
  background: rgba(255, 255, 255, 0); 
  border-radius: 20px;
  border: 3px solid  rgba(102, 51, 51, 1);
  color: rgba(102, 51, 51, 1); 
  text-align: center;
  font-size: 2vh;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;   
  text-decoration: none !important; 
  letter-spacing: 1px; 
  transition: all 0.4s ease-out; 
}

.btn-brown:hover {
  transform: scale(1.05);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

/* .btn-landing,
.btn-landing *,
.btn-landing :after,
.btn-landing :before,
.btn-landing:after,
.btn-landing:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-landing {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color:  rgba(88,50,41,1);
  background-image: none;
  color:  white;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-landing:disabled {
  cursor: default;
}

.btn-landing:-moz-focusring {
  outline: auto;
}

.btn-landing svg {
  display: block;
  vertical-align: middle; 
}*/

.btn-landing [hidden] {
  display: none;
}

.btn-landing {
  border-radius: 99rem;
  border-width: 2px;
  margin: 0vh 0.3vw;
  padding: 1.2vh 2vw;
  z-index: 0;
}

.btn-landing,
.btn-landing .text-container {
  overflow: hidden;
  position: relative;
}

.btn-landing .text-container {
  display: block;
  mix-blend-mode: difference;
}

.btn-landing .text {
  display: block;
  position: relative;
}

.btn-landing:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

.btn-landing:after,
.btn-landing:before {
  --skew: 0.2;
  background:  rgba(232,214,187,1);
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.btn-landing:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 103.5%;
  z-index: -1;
}

.btn-landing:hover:before {
  --progress: 100%;
}

.btn-landing:hover:after {
  --progress: -102%;
}