html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  scroll-behavior: smooth;
}



@font-face {
  font-family: 'YourFontName';
  /*a name to be used later*/
  src: url('Berlin\ Sans\ FB\ Demi\ Bold.ttf');
  /*URL to font*/
}



@font-face {
  font-family: 'Labrada';
  /*a name to be used later*/
  src: url('Labrada-VariableFont_wght.ttf');
  /*URL to font*/
}




.titleholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  font-family: 'YourFontName';
  text-align: center;
  margin: auto;
  font-size: 1500%;
  color: whitesmoke;
  text-shadow: 5px 5px 1px rgba(137, 137, 137, 0.463);

}

@media (max-width: 768px) {
  .title {

    font-size: 6rem;
    margin-bottom: 10px;
  }

}


body {

  background-color: #dcc8ab;

  overflow-x: hidden;
  /* Hide scrollbars */

}


.sidebuttons {
  display: grid;
  left: 1%;
  height: 50%;
  margin-top: 12%;
  width: 10px;
  position: fixed;
  justify-content: space-between;
}

.sidebutton {
  background-color: #eadecb;
  width: 3.5px;
  display: flex;
  height: 90%;
  border-radius: 15px;
}

.sidebuttonactive {
  background-color: #292622 !important;

}

.section {
  height: 40vw;
  width: 40%;
  vertical-align: middle;
  padding-top: 15%;
}

.teamsection {
  height: 30vw;

}

.servicesimage {
  padding-top: 10%;

}


@media (max-width: 768px) {
  .section {
    height: 180vw;
    width: 80%;
    vertical-align: middle;
  }

}

.labrada {
  font-family: 'labrada' !important;

}

.sidesection {
  position: relative;
  left: 10%;
  font-family: labrada;
}


@media (max-width: 768px) {

  .sidesection {
    position: relative;
    left: 10%;
    top: 30vw;
    font-family: labrada;
  }

}

.buttonbelow {
  background-color: #000000;
  color: whitesmoke;
  width: 10vh;
  border-radius: 50%;
}



/* CSS */
.button-17 {
  margin-top: 10px;
  align-items: center;
  appearance: none;
  background-color: #292622;
  border-radius: 24px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 1px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 5px 0;
  box-sizing: border-box;
  color: whitesmoke;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: labrada;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;

  width: auto;
  will-change: transform, opacity;
  z-index: 0;
}

.button-17:hover {
  background: #000000b0;
}

/* CSS */
.button-18 {
  margin-top: 10px;
  align-items: center;
  appearance: none;
  background-color: whitesmoke;
  border-radius: 24px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 1px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 5px 0;
  box-sizing: border-box;
  color: #292622;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: labrada;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;

  width: auto;
  will-change: transform, opacity;
  z-index: 0;
}

.button-18:hover {
  background: #000000b0;
}

.Horns {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}


.Horns2 {
  width: 80%;
  position: absolute;
  transform: translate(-50%, 50%);
  bottom: -20%;
  left: 50%;

}

.relative {
  position: relative;

}

.sociallogo {
  width: 30px;
  height: 30px;
  transform: translate(-50%, 50%);

}



.aboutus {
  position: fixed;
  bottom: 2vh;
  right: 2vh;
  min-width: 23vh;
  height: 7.5vh;
  background-color: #eadecb;
  box-shadow: 2px 2px 1px rgba(137, 137, 137, 0.463);
  border-radius: 5px;

}

.aboutus:hover {
  background-color: #c4baa9;

}

.sitting_deer {
  position: fixed;
  height: 130%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
}

.aboutuslogo {
  position: absolute;
  width: 5vh;
  right: 80%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;

}

.forestcanvas {
  display: inline;

}

.foresttitle {
  font-size: 5em;

}


.arrow {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(-50%, -50%);

}


.nextfont {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.titleaboutus {

  font-family: 'Labrada', serif;
  font-size: 1.2em;
  color: black;

}

.Jointhedeerz {
  font-family: 'Labrada', serif;
  color: black;
  font-size: 0.8em;
}




ul {
  position: fixed;

  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);


}





@media (min-width: 768px) {
  .computernone {

    display: none !important;
  }

}

@media (max-width: 768px) {
  .mobilenone {

    display: none !important;
  }

}



li {

  display: inline-block;

}



.link {
  color: whitesmoke;
}

.subtitle {
  fill: whitesmoke;
  justify-content: center;
  margin-top: 35vh;

}

.logopadding {
  padding: 0.35vh 1vh !important;
}

.navbuttons {
  display: table-cell;
  float: right !important;
  margin-top: 2vh;
  position: relative;
  z-index: 1000;



}

.navfont {
  width: 100%;
  display: table;
  min-height: 10vh;
  z-index: 5;

}

li a {

  color: #292622;
  font-family: 'Labrada' !important;
  text-align: center;
  padding: 0.4vh 2vh;
  text-decoration: none;


  /* margin-right: 10vh; */
  font-size: 1em;
  font-family: 'Labrada';


  background-color: #e6d3ba;
  border-radius: 5px;
  margin-left: 1vh;
  margin-right: 1vh;
  display: table;



}

.lg {
  background-color: #0000;

  border-color: #0000;
}

li a:hover:not(.lg) {
  background-color: #eadecb;
  border-radius: 5px;

}


.activea {
  background-color: #eadecb;
  border-color: #292622;
  border-width: 1px;
  border-style: solid;
}

.active {
  text-decoration: underline;
  text-decoration-color: #292622;


}



h3 {

  color: whitesmoke;
}

.galleryimage {
  margin: 0;
  margin-top: 20px;
  position: absolute;
  top: 30%;
  left: 70%;
  -ms-transform: translate(-25%, -25%);
  transform: translate(-25%, -25%);
  height: 25vw;
}

.iframe {
  width: 40vw;
  height: 40vw;
  margin-top: 10vw;
  margin-left: 5vw;
}

.content {

  margin-top: -5vh;
  margin-bottom: 50vh;
}

@media (max-width: 768px) {
  .content {

    margin-bottom: 3vh;
  }

}

.pic {
  width: 30vh;
  position: fixed;
  bottom: 0px;
  left: 0px;
}


h1 {
  text-align: left;
  font-family: 'YourFontName';
  color: whitesmoke;

}





.verticalcenter {
  vertical-align: middle;
  padding-left: 1vh;
}

h2 {

  font-size: 2vh;
  font-family: 'YourFontName';
  padding-bottom: 1vh;
  color: whitesmoke;
}


.onpolygon {
  margin-top: -2.5vh;
  color: #292622;
  font-size: 2.5em;
}



.logonav {
  top: 0;
  position: absolute;
  left: 3%;
  float: left;
  width: 11vh;
  height: 11vh;
  z-index: 100;
}


#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
  margin-left: 10px;
  margin-top: 10px;

}


#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: rgb(0, 0, 0);
  margin: 6px 0;
  transition: 0.4s;
  z-index: 100;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: whitesmokec1;
  position: fixed;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
}

.mobile-menu li {
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
  header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}






.flex {
  display: flex;
}

.teamtitle {
  text-align: center;
  text-shadow: 3px 3px 1px rgba(137, 137, 137, 0.463);
  font-size: 4em;

}

.teamsubtitle {
  text-align: center;
  color: rgba(137, 137, 137, 0.463);
  font-size: 1.5em;
}

.teamimage {
  width: 80%;
  justify-content: center;
  border-radius: 5px;
  margin-top: 10%;
}

.teamcolumn {
  margin: 1vh;
  background-color: #eadecb;
  height: 10vw;
  width: 6.8vw;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
}

.teamcolumn:hover {
  margin: 1vh;
  background-color: #eadecb;
  height: 15vw;
  width: 10vw;
  font-size: 1em;
}

.teamcolumn .subtext {
  visibility: hidden;
  padding: 2px;
  font-size: 0.7em;

}

.teamcolumn:hover .subtext {
  visibility: visible;
}


.flexservicescolumn {
  display: flex;
  width: 120%;
}


@media (max-width: 768px) {

  .serviceimage {
    width: 70%;
    justify-content: center;
    margin-top: 10%;
  }

  .servicecolumn {
    margin: 1vh;
    background-color: #e6d3ba;
    height: 30vw;
    width: 20vw;
  }

  .flexservicescolumn {
    flex-wrap: wrap;

  }


  .servicecolumn:hover {
    margin: 1vh;
    background-color: #e6d3ba;
    height: 52vw;
    width: 30vw;
    font-size: 1em;
  }
}


.flexteamcolumn {
  display: flex;
  width: 120%;

}

@media (max-width: 768px) {

  .teamimage {
    width: 70%;
    justify-content: center;
    margin-top: 10%;
  }

  .teamcolumn {
    margin: 1vh;
    background-color: #e6d3ba;
    height: 30vw;
    width: 20vw;

  }

  .flexteamcolumn {
    flex-wrap: wrap;

  }


  .teamcolumn:hover {
    margin: 1vh;
    background-color: #e6d3ba;
    height: 52vw;
    width: 30vw;
    font-size: 1em;
  }
}

.sketch {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-position: 0px -30vh;

  height: 80%;
  width: 100vw;
  background-image: url('./forest/sketch.png');
}

.relative {
  position: relative;
}


.teamsquare {
  position: absolute;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 10vw;
  width: 30vw;
  background-color: #dcc8ab;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}

.gallery {
  position: absolute;
  top: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.gallery-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.gallery-item {
  position: relative;

  margin: 3vh;
  width: 35vh;
  height: 40vh;
  border-radius: 5px;
  overflow: hidden;
  /* Hide any overflowing content */
  background-color: #f1dfc3;
  border-style: solid;
  border-color: rgba(137, 137, 137, 0.463);
  border-width: 2px;
  text-align: center;
}

.gallery-item img {
  padding-top: 10%;
  justify-content: center;
  width: 80%;
  height: 80%;
  object-fit: cover;
  /* Scale the image to cover the container */
  margin: auto;
  display: block;
}

.gallery-item-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
}


.gallery-item h1 {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

@media (max-width: 768px) {
  .gallery-item {
    width: calc(50% - 20px);
    /* Set the width to 50% to fit 2 items per row with margins */
  }
}

.heredeer {
  position: absolute;
  width: 40vh;
  bottom: 0%;
  right: 8%;
  z-index: 100;
}

@media (max-width: 768px) {
  .heredeer {
    position: absolute;
    width: 30vh;
    bottom: 0%;
    left: 3%;
    z-index: 100;
  }

}

.image1,
.image2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.image2 {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}








.splide__slide {
  padding: 6rem;
  display: flex;
  justify-content: center;
  background: #ECF0F1;

}

.splide__slide__container {
  width: 600px;
  text-align: center;
}

.slide__content {
  margin: 1rem 0;
  font-size: 1.3rem;
}

.slide-img__wrapper {
  display: flex;
  align-items: center;

}

.slide-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  max-width: 100%;
  max-height: 100%;
}

.slide-img__caption {
  margin-left: 1rem;
}

.slide-img__caption span {
  color: #2E86C1;
  font-weight: 500;
}


.servicescolumn1 {
  display: flex;
  width: 100%;
  background-color: #eadecb;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
}


.servicesillustrationimageholder {
  width: 50%;
  text-align: center;
  margin: 1vh;

}

.lefttextalign {
  text-align: left !important;


}



.artworkcolumn {
  width: 50%;

}

.servicesillustrationimage {
  width: 100%;
  border-radius: 5px;





}



.artworktitle {
  font-family: 'YourFontName' !important;
  text-align: center;
  color: #000000;
  font-size: 2rem;
}




.servicescolumn2 {

  width: 45%;

  border-radius: 5px;
  background-color: #eadecb;
  padding: 1vh;
  -moz-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);


}

.servicescolumn2 img {



  border-radius: 5px;


}


.servicescolumnlast {
  margin-right: 0%;

  width: 20%;
  border-radius: 5px;
  background-color: #eadecb;
  padding: 1vh;
  aspect-ratio: 1 / 1;

}


.servicesholder {
  margin-top: 1vh;
  width: 100%;
  display: flex;
}

.section p {
  font-family: labrada;
}



.firstbuttondiv {
  background-color: #eadecb;
  width: 45%;
  cursor: pointer;
  height: 5vw;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  line-height: 5vw;
  text-align: center;
  color: #000000 !important;
  font-size: 2em;
  padding-left: 2vh;
  margin-right: 10%;

}

.firstbuttondiv h1 {
  color: #000000 !important;
  font-family: Labrada;
}

.secondbuttondiv {
  background-color: #eadecb;
  width: 45%;
  cursor: pointer;
  height: 5vw;
  border-radius: 5px;
  -moz-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 3px rgba(137, 137, 137, 0.463);
  line-height: 5vw;
  text-align: center;
  padding-left: 1vh;
  font-size: 2em;

}

.secondbuttondiv h1 {
  color: #000000 !important;
  font-family: Labrada;
}


.firstbuttondiv:hover {

  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);
}

.secondbuttondiv:hover {

  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);
}


.front {

  background-size: cover;
  background-image: url("Deerz_illustration.png");
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;

}

.front2 {
  background-size: cover;
  background-image: url("pandaworld-4.jpeg");
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.front3 {
  background-size: contain;
  background-image: url("banner\ 1400.gif");
  background-position: center;

  background-repeat: no-repeat;
  background-color: #000000;
  width: 100%;
  height: 100%;
}

.front4 {
  background-size: cover;
  background-image: url("game.png");
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
}


.slider-container {
  margin-top: 3%;
  background-size: cover;

  background-position: center;
  position: absolute;
  width: 95%;
  height: 48vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);
  display: flex;
  align-items: center;
  justify-content: center;


}

.slider {
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overflow-y: hidden;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 48vw;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
  scroll-snap-align: center;
}

.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid rgb(255, 255, 255);
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.338);
  border-radius: 5px;
}

.slide a:hover {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid rgb(255, 255, 255);
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.138);

}

a.slide__prev {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}



.firstslide {
  position: absolute;
  top: 15%;
  left: 8%;
  width: 20%;
  height: 65%;
  background-color: #dcc8ab;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);
  padding: 3vh;


}

.firstslide h1 {
  font-family: 'Labrada';
  color: #000000;
}

.firstslide h2 {
  font-family: 'Labrada';
  color: #000000;
  text-align: left;
}

.slidefirst {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  text-shadow: 3px 3px 1px rgba(137, 137, 137, 0.463);

}

.slidefirst2 {
  position: absolute;
  top: 60%;
  left: 20%;
  transform: translate(-50%, -50%);
  text-shadow: 3px 3px 1px rgba(137, 137, 137, 0.463);

}




.servicesbox {
  position: absolute;
  top: 110%;
  left: 2.5%;
  width: 94.5%;
  display: flex;
  justify-content: space-between;
  padding-top: 3vw;
}

.servicesbox2 {
  position: absolute;
  top: 230%;
  left: 2.5%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30vw;
}

.servicebox {
  position: relative;
  display: flex;
  background-color: #e6d3ba;
  width: 28vw;
  height: 20vw;
  border-radius: 15px;
  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);

}

.buttonbox {
  position: relative;
}

.clienttext {
  background-color: #ffffffc3;
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 20%;
  left: 0%;
  border-radius: 13px;
  display: table-cell;
  vertical-align: middle;
  padding-top: 5%;
  padding-bottom: 5%;
}

.buttonbox button {
  width: 9vw;
  height: 9vw;
  margin: 0.5vw;
  border-radius: 15px;
}

.auto {}

.serviceicon {
  position: absolute;
  top: 25%;
  left: 50%;
  font-size: 4em;
  transform: translate(-50%, -50%);
  color: #dcc8ab;
}

.servicetext {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3em;
  transform: translate(-50%, -50%);
  color: #292622;
}


.arrow2,
.arrow2:before {
  position: absolute;
  left: 50%;
}

.arrow2 {
  width: 40px;
  height: 40px;
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 2px #fff solid;
  border-bottom: 2px #fff solid;
  top: 94%;
}

.arrow2:before {
  content: '';
  width: 20px;
  height: 20px;
  top: 50%;
  margin: -10px 0 0 -10px;
  border-left: none;
  border-top: none;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: arrow;
}

@keyframes arrow {
  100% {
    opacity: 1;
  }

  1% {
    opacity: 0;
    transform: translate(-10px, -10px);
  }

  100% {
    opacity: 1;
  }
}

.Servicebox3 {
  width: 48.8vw;
  background-image: url('IMG_8972.png');
  background-size: contain;
  background-position: center;
  border-radius: 15px;
  border-style: solid;
  border-color: #292622;
  border-width: 0.3vh;
  
}



.servicesbox3 {
  position: absolute;
  top: 160%;
  left: 2.5%;
  display: flex;
  height: 25vw;
  /* background-color: #e6d3ba;
  border-radius: 15px;
  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463); */

}


.servicesbox3inside {
  display: flex;

}

.deerztext {
  color: #292229;
  font-family: 'labrada', sans-serif;
  margin: auto;
  width: 60%;
}

.subtextservice {
  color: #292229;
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, -50%);
  font-family: 'labrada';
  font-size: 1em;
  width: 100%;
  text-align: center;
}




.Footer {
  background-color: #dcc8ab;
  width: 100%;
  height: 40vw;


}

.roundedfooter {
  position: relative;
  height: 35vw;
  top: 2.5vw;
  width: 95%;
  left: 2.5%;
  background-color: whitesmoke;
  border-radius: 15px;
  -moz-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  -webkit-box-shadow: 0 0 5px rgba(137, 137, 137, 0.463);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.463);
  display: flex !important;
}

.footerdeerztext {
  color: #292622;

  font-family: 'labrada', sans-serif;
  position: absolute;
  bottom: 10%;
}


.companyfootertext {
  color: #858585;
  font-family: 'labrada', sans-serif;

  font-size: 1.2em;
  text-align: left;
}

.divclassfootertext h2 {
  font-size: 1.2em;

  color: #292622;
  font-family: 'labrada', sans-serif;
  text-align: left;
}

.footeratext {
  font-size: 1.2em;

  color: #292622;
  font-family: 'labrada', sans-serif;
  text-align: left;
}

.divclassfootertext {
  position: absolute;
  top: 50%;
  Left: 5%;
  cursor: pointer;
}