#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(97, 72, 8); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #bf7113; /* Add a dark-grey background on hover */
}
* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}
.navbar {
  /* border: 4px solid rgb(216, 49, 49); */
  border-bottom: 1px solid gray;
  height: 70px;
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
}

.left-nav {
  /* Forgot the height and width of the container inside the container */
  height: auto;
  width: 30%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  /* border: 4px dashed yellow; */
}

.left-nav a > img {
  width: 100px;
}

/* START OF TEXT ANIMATION */

.left-nav-word {
  overflow: hidden;
  /* font-size: 18px; */
}

/* Animation */
.left-nav-word > p {
  animation: animated-text 2s steps(30, end) 1s 1 normal both;
}

/* text animation */

@keyframes animated-text {
  from {
    width: 0;
  }
  to {
    width: 92px;
  }
}
.right-nav {
  display: flex;
  width: 70%;
  /* border: 4px dashed green; */
  justify-content: space-evenly;
  align-items: center;
}

/* END OF TEXT ANIMATION */

/*  HOVER FEATURE TO INCLUDE MUST BE APPLIED TO EACH CLASS IN THE MENU */

.right-nav a {
  color: black;
}
.right-nav a:link {
  text-decoration: none;
}
.right-nav a:hover {
  color: rgb(248, 212, 123);
  text-decoration: underline;
}

/* END OF NAVBAR */
.hero-banner {
  height: 700px;
  width: auto;
  /* border: 4px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.logos > img {
  width: 600px;
}

.video {
  /* border:4px dashed pink; */
  position: absolute;
  z-index: -1;
  object-fit: cover;
}
@media (min-aspect-ratio: 16/9) {
  .video {
    width: 100%;
    height: inherit;
  }
}

/* END OF VIDEO CSS */

.row-one {
  /* border: 4px dashed orange; */
  background-color: rgb(245, 250, 245);
  /* background-color: (244,242,240); */
  display: flex;
  width: 100%;
  height: 730px;
  justify-content: space-evenly;
  align-items: center;
}
.row-one-image {
  /* border: 4px dotted red; */
  height: inherit;
  width: 500px;
}
.row-one-image > img {
  height: inherit;
  width: inherit;
}

.row-one-text {
  /* border: 4px dashed purple; */
  height: inherit;
  width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: justify;
}

.row-one-text > p {
  font-size: 17px;
 
}

/* 100% with makes it look like it has no borders on the left or right */

.row-two-container {
  /* border: 4px dashed paleturquoise; */
  width: 100%;
  height: 750px;
  background-image: url("hompage-img/wine-bottle-background.jpg");



  /* changed the direction of the slaskf or it to load */
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
/* PERHAPS THESE SHOULD BE IN A CLASS CALLED CARD SO SIZE CAN BE MADE WITH ONE LINE OF CODE INSTEAD OF 3 TIMES
 */

.row-two-card-1 {
  border: 1px solid gray;
  background-image: url('hompage-img/paper-texture.jpg');
  width: 300px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

}

/* START OF CARD ONE */
.row-two-card-1-blurb {
  border: 2px solid gray;
  width: 90%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row-two-card-1-blurb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card1-text {
  /* border: 2px solid black; */
  width: 90%;
  height: 30%;
  display: flex;
  justify-content: center;
}
/* END OF CARD 1 */

/* START OF ROW TWO CARD */
.row-two-card-2 {
  background-image: url('hompage-img/paper-texture.jpg');
  border: 1px solid gray;

  width: 300px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selfcontainer {
  border: 3px solid rgb(28, 27, 27);
  
background-image: url("hompage-img/frostboy.jpg");
  width: 280px;
  height: 480px;
  background-size: cover;
  background-position: center;
  color: white;
}

.blurb {
  /* border: 4px solid red; */
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.text {
  color: gainsboro;
  font-size: x-large;
  font-style: italic;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


.frostbox {
  background-color: rgba(245, 242, 243, 0.3);
  /* border:2px solid rgb(20, 196, 149); */
  backdrop-filter: blur(7px);
  border-radius: 5px;
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frostbox>p{
  font-size:x-large;
}

/* END OF ROW TWO CARD */

/* ROW-THREE-START */

.row-two-card-3 {
  /* background-color: rgb(245, 250, 245); */
  border: 1px solid gray;
  
  background-image: url('hompage-img/paper-texture.jpg');
  width: 300px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.row-two-card-3-blurb {
  border: 2px solid gray;
  width: 90%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row-two-card-3-blurb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card3-text {
  /* border: 4px dashed rgb(36, 51, 166); */
  width: 90%;
  height: 30%;
  display: flex;
  justify-content: center;
}


.row-three-container{
/* border:1px solid maroon; */
background-color: rgb(245, 250, 245);
height:640px;
background-image: url("hompage-img/row-3-bg.jpg");

object-fit: cover;

}





/* START OF FOOTER */
.footer-container {
  /* border-top: 1px solid gray; */
  /* border: 4px solid orangered; */
  height: 110px;
  margin-bottom: 0;
  margin-left: 70px;
  /* margin-top:100%; */
}

/* margin 100% from the top keeps it at the bottom */

.footer {
  border-top: 2px solid#e7e9eb;
  height: 90px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: justify;
}



.footer-logos {
  /* border: 4px solid green; */
  display: flex;
  flex-direction: column;
  /* width:100px; */
  align-items: center;
  justify-content: center;
}

.footer-logos > img {
  width: 80px;
}

.follow-buttons {
  /* border:4px solid yellow; */
  width:90px;
  padding-top: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}


.follow-buttons a >img{
  width:15px;
}

.copyright {
  /* border: 4px solid red; */
  align-items: center;
  text-align: center;
  padding-right: 50px;
}

/* END OF FOOTER */