a {
  flex: 1;
  text-decoration: none;
  display: flex;
}

/* ################################################### div styles ################################################################## */

.header-div{
  position: absolute;
  top: 1vh;
  left: 0px;
  width: 100%;
  height: 65px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.navbar-div{
  display: flex;
  flex-direction: row;
  width: clamp(500px, 50%, 2000px);
  height: 100%;
  border-radius: 32.5px;
  background-color: black;
}

.intro-img-div{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /*background-color: green;*/
}

.brand-flex{
  position: absolute;
  top: 35vh;
  left: 0px;
  width: 100%;
  z-index: 0;
  display: flex;
  flex-direction: row;
}

.null-div-brand{
  z-index: 0;
  flex: 1;
  opacity: 0.25;
}

.logo-and-slogan-flex{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.structure-flex{
  position: absolute;
  top: 100vh;
  left: 0px;
  width: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 247, 236);
}

.null-div-structure{
  width: 100%;
  height: 50vh;
}

.onv-flex{
  position: relative;
  top: 20vh;
  height: 500px;
  margin-left: 3vw;
  margin-right: 3vw;
  display: flex;
  flex-direction: row;
}

.null-div-onv{
  flex: 0.10;
}

.onv-txt-and-button-flex{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.onv-txt-div{
  flex: 4;
}

.onv-button-div{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.onv-img-div{
  flex: 1;
}

.rdd-flex{
  height: 500px;
  margin-left: 3vw;
  margin-right: 3vw;
  display: flex;
  flex-direction: row;
}

.null-div-rdd{
  flex: 0.20;
}

.rdd-txt-and-button-flex{
  flex: 4;
  display: flex;
  flex-direction: column;
}

.rdd-txt-div{
  flex: 1;
}

.rdd-button-div{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.rdd-video-div{
  flex: 1;
}

.infobar-div{
  flex: 1;
  width: 100%;
  /*height: clamp(200px,30vh,2000px);*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: 0.8;
  gap: 2vw;
}

.info-contacts-div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 50px;
  opacity: 0.97;
}

.info-insta-icon-div{
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
}

.info-face-icon-div{
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:aliceblue;
}

/* ################################################### img styles ################################################################## */
.home-icon-img{
  object-fit: contain;
  width: 30%;
  margin-bottom: 9px;
  margin-right: 6px;
}

.intro-img{
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  opacity: 0.45;
}

.logo-img{
  width: clamp(500px, 40vw, 2000px);
  height: 25vh;
  z-index: 0;
  object-fit: cover;
}

.onv-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.rdd-video{
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: left;
}

.insta-icon-img{
  object-fit: contain;
  width: 8vw;
  height: 8vw;
  border-radius: 8vw;
  cursor: pointer;
}

.face-icon-img{
  object-fit: contain;
  width: 8vw;
  height: 8vw;
  border-radius: 8vw;
  cursor: pointer;
}

/* ################################################### txt styles ################################################################## */

h2{
  text-align: center;
  font-size: clamp(30px, 2.5vw, 200rem);
  font-family: 'Dancing Script', cursive;
  font-weight: 400;
  color: rgb(203, 46, 46);
}

p{
  text-indent: 30px;
  font-family: 'Poppins', 'Times New Roman';
  font-size: clamp(1rem,1.1vw,200rem);
}

.slogan{
  text-indent: 0px;
  text-align: center;
  color: darkred;
  font-family: 'Allura', cursive;
  font-weight: 400;
  font-size: clamp(2rem,3vw,200rem);
}

.contacts-h2{
  color: rgb(255, 247, 236);
}

.contacts-txt{
  text-indent: 0px;
  margin-top: 0px;
  color: rgb(255, 247, 236);
}

/* ################################################### but styles ################################################################## */

.structure-but{
  width: 200px;
  height: 50px;
  margin: auto;
  font-size: clamp(1.2rem,1.5vw,200rem);
  font-family: 'Dancing Script', cursive;
  color: rgb(255, 247, 236);
  background-color: rgb(243, 41, 41);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.structure-but:hover{
  color: rgb(243, 41, 41);
  background-color: rgb(255, 247, 236);
  border-style: solid;
  border-color: rgb(243, 41, 41);;
  border-radius: 25px;
  cursor: pointer;
}

.structure-but:active{
  opacity: 0.8;
}

.navbar-but-left{
  flex: 1;
  font-family: 'Allura', cursive;
  font-size: clamp(25px,1.7vw,2000px);
  border: none;
  border-top-left-radius: 5.0vh;
  border-bottom-left-radius: 5.0vh;
  background-color: rgb(255, 229, 193);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-but-left:hover{
  color: rgb(243, 41, 41);
  opacity: 0.97;
}

.navbar-but-right{
  flex: 1;
  font-family: 'Allura', cursive;
  font-size: clamp(25px,1.7vw,2000px);
  border: none;
  border-top-right-radius: 5.0vh;
  border-bottom-right-radius: 5.0vh;
  background-color: rgb(255, 229, 193);
  cursor: pointer;
}

.navbar-but-right:hover{
  color: rgb(243, 41, 41);
  opacity: 0.97;
}

.navbar-but-mid{
  flex: 1;
  font-family: 'Allura', cursive;
  font-size: clamp(25px,1.7vw,2000px);
  border: none;
  background-color: rgb(255, 229, 193);
  cursor: pointer;
}

.navbar-but-mid:hover{
  color: rgb(243, 41, 41);
  opacity: 0.97;
}