@font-face {
  font-family: ephesis;
  src: url(./Fonts/Ephesis/Ephesis-Regular.ttf);
}
@font-face {
  font-family: roboto;
  src: url(./Fonts/Roboto/Roboto-Black.ttf);
}
@font-face {
  font-family: dancingScript;
  src: url(./Fonts/Dancing_Script/DancingScript-VariableFont_wght.ttf);
}
@font-face {
  font-family: monserat;
  src: url(./Fonts/Montserrat/static/Montserrat-ExtraLight.ttf);
}
@font-face {
  font-family: kanit;
  src: url(./Fonts/Kanit/Kanit-SemiBold.ttf);
}
@font-face {
  font-family: raleway;
  src: url(./Fonts/Raleway/Raleway-VariableFont_wght.ttf);
}
.servicesPage {
  width: 100%;
  box-sizing: border-box;
  background-color: #0d0d0d;
  background-image: url(./img/BackgroundNew0.jpg);
  background-size: contain;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-position-y: 35vh;
  display: none;
  min-height: calc(100vh - 12vw);
}

.upperSection {
  display: flex;
  height: 31vw;
  background-color: #0d0d0d;
  padding-top: 4vw;
  font-family: raleway;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.15s;
}
.upperTextSection {
  margin-left: 8vw;
  margin-right: 8vw;
  box-shadow: 0.8vw 0.8vw 0.8vw black;
  position: relative;
  padding: 0 4vw;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.1s;
}
.upperTextSection hr {
  width: 10vw;
  margin-left: 0;
  margin-bottom: 2vw;
}
.upperTextSection h2 {
  font-size: 2.5vw;

  margin-bottom: 0.1vw;
}
.upperText {
  font-size: 1.3vw;
  line-height: 2vw;
}
.upperImg {
  height: 31vw;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.5s;
}
.lowerSection {
  display: flex;
  height: 29vw;

  padding-top: 4vw;
  font-family: raleway;
  padding-bottom: 9vw;
}
.lowerTextSection {
  margin-left: 8vw;
  margin-right: 8vw;
  box-shadow: -0.8vw -0.8vw 0.8vw black;
  background-color: #0d0d0d;
  position: relative;
  padding: 0 4vw;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.5s;
  /*   display: flex;
  justify-content: center;
  flex-direction: column; */
}
.hrLineOne {
  height: 0.2vw;
  width: 10vw;
  border-bottom: 0.1vw solid #e2bf6e;
  margin-left: 0;
  margin-bottom: 1vw;
}
.hrLineTwo {
  height: 0.2vw;
  width: 17vw;
  border-bottom: 0.1vw solid #e2bf6e;
  margin-left: 0;
  margin-bottom: 1vw;
}
.lowerTextSection h2 {
  font-size: 2.5vw;

  margin-bottom: 0.1vw;
}
.lowerText {
  font-size: 1.3vw;
  line-height: 2vw;
}
.lowerImg {
  height: 29vw;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.6s;
}

@media (min-width: 667px) and (orientation: portrait) {
  .servicesPage {
    width: 100%;
    box-sizing: border-box;
    background-color: #0d0d0d;
    background-image: url(./img/BackgroundNew0.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: 35vh;
    display: none;
    min-height: calc(100vh - 12vw);
  }

  .upperSection {
    display: flex;
    height: 36vw;
    background-color: #0d0d0d;
    padding-top: 4vw;
    font-family: raleway;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.15s;
  }
  .upperTextSection {
    margin-left: 3vw;
    margin-right: 4vw;
    box-shadow: 0.8vw 0.8vw 0.8vw black;
    position: relative;
    padding: 0 4vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.1s;
  }
  .upperTextSection hr {
    width: 10vw;
    margin-left: 0;
    margin-bottom: 2vw;
  }
  .upperTextSection h2 {
    font-size: 3.5vw;

    margin-bottom: 0.1vw;
  }
  .upperText {
    font-size: 1.6vw;
    line-height: 2.2vw;
  }
  .upperImg {
    height: 36vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.5s;
  }
  .lowerSection {
    display: flex;
    height: 35vw;

    padding-top: 4vw;
    font-family: raleway;
    padding-bottom: 9vw;
  }
  .lowerTextSection {
    margin-left: 4vw;
    margin-right: 3vw;
    box-shadow: -0.8vw -0.8vw 0.8vw black;
    background-color: #0d0d0d;
    position: relative;
    padding: 0 4vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.5s;
    /*   display: flex;
    justify-content: center;
    flex-direction: column; */
  }
  .hrLineOne {
    height: 0.2vw;
    width: 13vw;
    border-bottom: 0.1vw solid #e2bf6e;
    margin-left: 0;
    margin-bottom: 1vw;
  }
  .hrLineTwo {
    height: 0.2vw;
    width: 17vw;
    border-bottom: 0.1vw solid #e2bf6e;
    margin-left: 0;
    margin-bottom: 1vw;
  }
  .lowerTextSection h2 {
    font-size: 3.5vw;

    margin-bottom: 0.1vw;
  }
  .lowerText {
    font-size: 1.6vw;
    line-height: 2.2vw;
  }
  .lowerImg {
    height: 35vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.6s;
  }
}

@media (max-width: 666px) {
  .servicesPage {
    min-height: calc(100vh - 19vw);
  }
}
@media only screen and (max-width: 666px) and (orientation: portrait) {
  .servicesPage {
    width: 100%;
    box-sizing: border-box;
    background-color: #0d0d0d;
    background-image: url(./img/Background\ 2.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: 35vh;
    display: none;
    min-height: calc(100vh - 60vw);
    height: 430vw;
  }

  .upperSection {
    display: flex;
    height: 190vw;
    background-color: #0d0d0d;
    padding-top: 4vw;
    font-family: raleway;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.15s;
    margin-top: 17.5vw;
  }
  .upperTextSection {
    margin-left: 2vw;
    margin-right: 2vw;
    box-shadow: 0.8vw 0.8vw 0.8vw black;
    position: relative;
    padding: 0 4vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.1s;
    background-image: url(./img/servicesPhoto1Bg3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .upperTextSection hr {
    width: 10vw;
    margin-left: 0;
    margin-bottom: 2vw;
  }
  .upperTextSection h2 {
    font-size: 9vw;
    margin-bottom: 0.1vw;
    margin-top: 7vw;
  }
  .upperText {
    font-size: 4.7vw;
    line-height: 6.6vw;
  }
  .upperImg {
    height: 27vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.5s;
    display: none;
  }
  .lowerSection {
    display: flex;
    height: 175vw;
    padding-top: 4vw;
    font-family: raleway;
    padding-bottom: 9vw;
    margin-top: 0vw;
    margin-bottom: -5vw;
  }
  .lowerTextSection {
    margin-left: 2vw;
    margin-right: 2vw;
    box-shadow: -0.8vw -0.8vw 0.8vw black;
    background-color: #0d0d0d;
    position: relative;
    padding: 0 4vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.5s;
    background-image: url(./img/servicesPhoto2Bg3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 5vw;
  }
  .hrLineOne {
    height: 0.2vw;
    width: 35vw;
    border-bottom: 0.1vw solid #e2bf6e;
    margin-left: 0;
    margin-bottom: 3vw;
  }
  .hrLineTwo {
    height: 0.2vw;
    width: 65vw;
    border-bottom: 0.1vw solid #e2bf6e;
    margin-left: 0;
    margin-bottom: 3vw;
  }
  .lowerTextSection h2 {
    font-size: 9vw;
    margin-bottom: 0.1vw;
    margin-top: 7vw;
  }
  .lowerText {
    font-size: 4.7vw;
    line-height: 6.6vw;
  }
  .lowerImg {
    height: 29vw;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.6s;
    display: none;
  }
}
@keyframes logo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}