@font-face {
    font-family: titlee;
    src:url(fonts/Nautica-Bold.ttf);
  }
  .titlE {
    font-family: titlee;
    src:url(fonts/Nautica-Bold.ttf);
    padding-top: 4.7cm;
    text-align: center;
    font-size: 140px;
  }
  @font-face {
    font-family: body;
    src:url(fonts/AppleGaramond-Italic.ttf);
  }
  .bodyy {
    font-family: body;
    font-size: 20px;
    padding-bottom: 2.5cm;
    color:#3d1d1a;
  }
  .navbaR {
    font-family: navbaR;
    src:url(fonts/Montserrat-Bold.ttf);
  }
  @font-face {
    font-family: navbaR;
    src:url(fonts/Montserrat-Bold.ttf);
}
.navbaAR {
  font-family: navbaR;
  src:url(fonts/Montserrat-Medium.ttf);
}
@font-face {
  font-family: navbaR;
  src:url(fonts/Montserrat-Medium.ttf);
  padding-right: 1cm;
}
.about {
    font-family: about;
    padding-top: 2cm;
    font-size: 60px;
  }
  @font-face {
    font-family: about;
    src:url(fonts/Montserrat-Medium.ttf);
  }
  .aboutbody {
    font-family: aboutbody;
    padding-top: 20px;
    font-size: 20px;
    text-align: justify;
    color:#3d1d1a;
  }
  @font-face {
    font-family: aboutbody;
    src:url(fonts/Montserrat-Regular.ttf);
  }
  .aboutbody2 {
    font-family: aboutbody2;
    font-size: 15px;
    text-align: left;
  }
  @font-face {
    font-family: aboutbody2;
    src:url(fonts/Montserrat-Regular.ttf);
    text-align: left;
  }
  .aboutbody3 {
    font-family: aboutbody3;
    font-size: 30px;
    padding-top: 20px;
    text-align: justify;
  }
  @font-face {
    font-family: aboutbody3;
    src:url(fonts/Montserrat-Regular.ttf);
  }
.container2 {display:inline-block;
            padding-top: 2cm;
}
.texting{  font-size: 65px;
        justify-content: center;
        font-family: body;
        src:url(fonts/AppleGaramond-Italic.ttf);
        color:#3d1d1a;
        border-right: 5px solid;
        width:100%;
        white-space:nowrap;
        overflow: hidden;
        animation:  typing 3s steps(26),
                    cursor 1s step-end infinite alternate;
    }        
/*cursor blinking*/
@keyframes cursor{
    50% {border-color: transparent;}
}

/*typing effect*/
@keyframes typing{
    from {width: 0;}
}
.block{
    animation:appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}
@font-face {
    font-family: years;
    src:url(fonts/Montserrat-Medium.ttf);
    text-align: center;
  }
  .years {
    font-family: years;
    src:url(fonts/Montserrat-Medium.ttf);
    padding-top: 1rem;
    text-align: center;
    font-size: 55px;
    color:#3d1d1a
  }
@font-face {
    font-family: years;
    src:url(fonts/Montserrat-Regular.ttf);
}
.years2 {
    font-family: years;
    src:url(fonts/Montserrat-Regular.ttf);
    padding-top: 1cm;
    text-align: center;
    font-size: 15px;
    color:#3d1d1a
}
.container3 {
  position: relative;
  display: block;
  width: 70%;
  height: auto;
  padding-bottom: 0rem;
  padding-top: 2rem;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #dc342e;
  opacity: 100%;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  border-radius: 7px;
}

.container:hover .overlay {
  height: 16%;
  transform: scale(1);
}

.text {
  font-family: years;
  src:url(fonts/Montserrat-Regular.ttf);
  color: #3d1d1a;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  align-items: center;
}
@font-face {
  font-family: slider-title;
  src:url(fonts/AppleGaramond.ttf);
}
.slider-title {
  font-family: slider-title;
  src:url(fonts/AppleGaramond.ttf);
  text-align: center;
  font-size: 35px;
}
@font-face {
  font-family: slider-body;
  src:url(fonts/AppleGaramond-Italic.ttf);
}
.slider-body {
  font-family: slider-body;
  src:url(fonts/AppleGaramond-Italic.ttf);
  text-align: center;
  font-size: 20px;
}
.fa-brands{
  background: #dc342e;
  color: white;
  border-radius: .7rem;
  text-align: center;
}
.fa-instagram{
  padding: 10px;
  text-align: center;
}
.fa-linkedin{
  padding: 10px;
  text-align: center;
}
.fa-square-behance{
  padding: 10px;
  text-align: center;
}
.fa-envelope{
  background: #dc342e;
  color: white;
  border-radius: .7rem;
  text-align: center;
  padding: 10px;
}
.socmed-title {
  font-family: socmed-title;
  src:url(fonts/AppleGaramond-BoldItalic.ttf);
  text-align: center;
  font-size: 20px;
  padding-top: .4cm;
}
@font-face {
  font-family: socmed-title;
  src:url(fonts/AppleGaramond-BoldItalic.ttf);
}
.bottom{
  font-family: be-low;
  src:url(fonts/AppleGaramond.ttf);
  text-align: center;
  font-size: 15px;
}
@font-face {
  font-family: be-low;
  src:url(fonts/AppleGaramond.ttf);
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 20%;
}
.space{
  padding-bottom: 3cm;
}
.cl{
  padding-top: 1%;
}
@font-face {
  font-family: body;
  src:url(fonts/AppleGaramond-Italic.ttf);
}
.end {
  font-family: body;
  font-size: 20px;
  color:#3d1d1a;
  text-align: center;
}