tag:not(:first-of-type) { /* Styles here */ }
tag:nth-of-type(1) { /* Styles here */ }
tag:last-of-type { /* Styles here */ }
tag:nth-of-type(even) { /* Styles here */ }
tag:nth-of-type(odd) { /* Styles here */ }
tag:first-child { /* Styles here */ }
tag:last-child { /* Styles here */ }
[tag-name] { /* Styles for all elements with the attribute "tag-name" */ }
[tag-name="value"] { /* Styles for elements where the attribute "tag-name" equals "value" */ }
[tag-name*="value"] { /* Styles for elements where "value" is part of the attribute value */ }
[tag-name^="value"] { /* Styles for elements where the attribute value starts with "value" */ }
[tag-name$="value"] { /* Styles for elements where the attribute value ends with "value" */ }
[tag-name~="value"] { /* Styles for elements where "value" is a whole word in the attribute */ }
[tag-name|="value"] { /* Styles for elements with an attribute value that starts with "value" or is exactly "value" */ }
parent > child { /* Styles for direct children only */ }
ancestor descendant { /* Styles for all descendants, not just direct children */ }
sibling + sibling { /* Styles for the immediate next sibling */ }
sibling ~ sibling { /* Styles for all subsequent siblings */ }


@font-face { font-family: "BACKED"; src:  url("fonts/BACKED.TTF") format("truetype"); }
@font-face { font-family: "POPPINS-BOLD"; src:  url("fonts/POPPINS-BOLD.TTF") format("truetype"); }
@font-face { font-family: "POPPINS-ITALIC"; src:  url("fonts/POPPINS-ITALIC.TTF") format("truetype"); }
@font-face { font-family: "POPPINS-MEDIUM"; src:  url("fonts/POPPINS-MEDIUM.TTF") format("truetype"); }
@font-face { font-family: "POPPINS-REGULAR"; src:  url("fonts/POPPINS-REGULAR.TTF") format("truetype"); }
@font-face { font-family: "ROBOTO-BOLD"; src:  url("fonts/ROBOTO-BOLD.TTF") format("truetype"); }

:root {
	/* Fonts */ 
    --font-BACKED: "BACKED", sans-serif;
    --font-POPPINS-BOLD: "POPPINS-BOLD", sans-serif;
    --font-POPPINS-ITALIC: "POPPINS-ITALIC", sans-serif;
    --font-POPPINS-MEDIUM: "POPPINS-MEDIUM", sans-serif;
    --font-POPPINS-REGULAR: "POPPINS-REGULAR", sans-serif;
    --font-ROBOTO-BOLD: "ROBOTO-BOLD", sans-serif;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    --scale-start: var(--scale-end);
    --ease-elastic: ease-out;
    --ease-bounce-out: ease-out;
    --hover-offset: 0;
    --ease-elastic: linear(
        0, 0.186 2.1%, 0.778 7.2%, 1.027 9.7%, 1.133, 1.212, 1.264, 1.292 15.4%,
        1.296, 1.294, 1.285, 1.269 18.9%, 1.219 20.9%, 1.062 25.8%, 0.995 28.3%,
        0.944 31.1%, 0.93, 0.921, 0.92 35.7%, 0.926, 0.94 39.7%, 1.001 47%, 1.014,
        1.021 52.4%, 1.02 56.4%, 1 65.5%, 0.994 70.7%, 1.001 88.4%, 1
    );
    --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}

footer .contact-container .footer-container, 
footer .contact-container .ctc-form, 
footer .copy-right,
#review h1, #review .label, #review .box,
#gallery img,
#chooseus p, #chooseus h1, #chooseus .btn,
#banner p, #banner h1, #banner .btn, #banner .box2,
#services .btn, #services p, #services h1,
#about .btn, #about p, #about h1 {
  opacity: 0;
}

.animate__backInUp {
  animation: backInUp 1s both;
  opacity: 1;
}

@keyframes trigger {
  to {
    --animate: true;
  }
}
@keyframes pop {
  from {
    scale: var(--scale-start);
  }
  to {
    scale: var(--scale-end);
  }
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1920px, 0, 0) scaleX(3);
    transform: translate3d(-1920px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}