@font-face {
  font-family: geo_m;
  src: url("./fonts/TKT-Medium-Caps.ttf");
}
@font-face {
  font-family: geo_r;
  src: url("./fonts/TKT-Regular-Caps.ttf");
}
@font-face {
  font-family: k2d;
  src: url("./fonts/K2D-Bold.ttf");
}
* {
  box-sizing: border-box;
  margin: 0;
  scroll-behavior: smooth;
  padding: 0;
}

*::selection {
  background: #ff681d;
  color: white;
}

body {
  letter-spacing: 1px;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 10px;
  background: white;
}

body::-webkit-scrollbar-thumb {
  background: #ff681d;
}

.contentContainer {
  width: 90%;
  margin: auto;
}

.Content {
  width: 100%;
  overflow-x: hidden;
}

nav {
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  transition: 0.8s;
}
nav .logoNav {
  display: flex;
  align-items: center;
  letter-spacing: 2px;
  font-family: k2d;
  font-size: 20px;
  cursor: pointer;
  color: #ff681d;
}
nav .logoNav img {
  height: 50px;
  max-height: 50px;
  margin-right: 15px;
}
nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}
nav ul li {
  position: relative;
  letter-spacing: 1px;
  list-style: none;
  font-size: 18px;
  font-family: geo_m;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  justify-content: center;
}
nav ul li a {
  color: black;
  text-decoration: none;
}
nav ul li a:hover {
  color: #ff681d;
}
nav ul li::after {
  content: "";
  position: absolute;
  background: #ff681d;
  height: 2px;
  width: 0px;
  bottom: -5px;
  transition: 0.2s;
}
nav ul li:hover:after {
  width: 100%;
}
nav ul li:hover {
  color: #ff681d;
}
nav ul .actNav {
  color: #ff681d;
}
nav ul .actNav::after {
  width: 100%;
}

.section1 {
  margin-top: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}
.section1 .sectionHalf {
  width: 50%;
}
.section1 .sectionHalf .hiWord {
  transition: 1s;
}
.section1 .sectionHalf h3 {
  font-size: 42px;
  color: #ff681d;
  font-family: geo_r;
  letter-spacing: 5px;
}
.section1 .sectionHalf p {
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 2px;
  font-size: 18px;
  margin-top: 10px;
  font-family: geo_r;
  margin-bottom: 30px;
}
.section1 .sectionHalf a {
  width: 300px;
}
.section1 .sectionHalf .call {
  height: 38px;
  width: 100%;
  letter-spacing: 2px;
  color: white;
  font-family: geo_r;
  font-size: 18px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  background: linear-gradient(90deg, #ff681d 0%, #de4a00 100%);
}
.section1 .sectionHalf .infoT {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 300px;
  letter-spacing: 1px;
  font-family: geo_m;
  font-size: 18px;
  border-radius: 5px;
  color: #ff681d;
  margin-top: 10px;
  background: rgba(255, 104, 29, 0.1);
}
.section1 .secondHalf .starterBG {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 1s;
}
.section1 .secondHalf .starterBG img {
  width: 70%;
  max-width: 600px;
}
.section1 .secondHalf .starterBG::before {
  content: "";
  position: absolute;
  height: 120%;
  width: 150%;
  left: 20;
  background: #ff681d;
  z-index: -1;
  transform: skewX(-40deg);
}

.sectionStarter {
  text-align: center;
  font-family: geo_r;
  color: #ff681d;
  font-size: 36px;
  letter-spacing: 5px;
  transition: 1s;
  margin-bottom: 50px;
}

.servicesRow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 150px;
}
.servicesRow .serviceCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 380px;
  font-family: geo_r;
  letter-spacing: 2px;
  font-size: 16px;
  height: 145px;
  background: #ffffff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  transition: scale 0.2s, transform 1s, opacity 1s;
}
.servicesRow .serviceCard:hover {
  font-weight: 500;
  scale: 1.1;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
}
.servicesRow .serviceCard .serviceLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  aspect-ratio: 1;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #ff681d;
  user-select: none;
}
.servicesRow .serviceCard .serviceLogo img {
  width: 60%;
}

.an1 {
  transform: translateY(-150px);
  opacity: 0;
}

.an2 {
  transform: translateY(200px);
  opacity: 0;
}

.an3 {
  transform: translateX(-150px);
  opacity: 0;
}

.an4 {
  transform: translateX(150px);
  opacity: 0;
}

.an5 {
  opacity: 0;
}

.contactSection {
  margin-bottom: 150px;
  margin-top: 150px;
  display: flex;
  align-items: center;
  position: relative;
}
.contactSection .secH {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contactSection .infoRow {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 60px;
}
.contactSection .infoRow .infoCard {
  display: flex;
  gap: 20px;
  transition: transform 1s, opacity 1s;
}
.contactSection .infoRow .infoCard .logoInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(255, 104, 29, 0.1);
}
.contactSection .infoRow .infoCard .logoInfo img {
  width: 60%;
}
.contactSection .infoRow .infoCard .contInfo .startInfo {
  color: rgba(0, 0, 0, 0.9);
  font-family: geo_r;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 15px;
}
.contactSection .infoRow .infoCard .contInfo .desInfo {
  color: rgba(0, 0, 0, 0.7);
  font-family: geo_r;
  letter-spacing: 2px;
  font-size: 16px;
}
.contactSection .infoRow .infoCard .contInfo .desInfo span {
  color: rgba(0, 0, 0, 0.7);
  font-family: k2d;
}
.contactSection .clickSection {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.contactSection .clickSection h2 {
  color: #ff681d;
  font-family: geo_r;
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: 400;
  margin-bottom: 50px;
  transition: 1s;
}
.contactSection .clickSection .socButtons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contactSection .clickSection .socButtons a {
  text-decoration: none;
  width: 100%;
}
.contactSection .clickSection .socButtons .socB {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 10px;
  border: 0;
  color: white;
  font-family: k2d;
  font-size: 18px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 1s, opacity 1s;
}
.contactSection .clickSection .socButtons .socB img {
  position: absolute;
  height: 60%;
  left: 15px;
}
.contactSection .clickSection .socButtons .viberB {
  background: linear-gradient(90deg, #8500ed 0%, #3600d1 100%);
}
.contactSection .clickSection .socButtons .viberB:hover {
  box-shadow: 0 0 30px rgba(134, 0, 237, 0.5);
}
.contactSection .clickSection .socButtons .whatsappB {
  background: linear-gradient(90deg, #3aff7d 0%, #00d1ac 100%);
}
.contactSection .clickSection .socButtons .whatsappB:hover {
  box-shadow: 0 0 30px rgba(58, 255, 124, 0.5);
}
.contactSection .clickSection .socButtons .callB {
  font-family: geo_r;
  background: linear-gradient(90deg, #ff681d 0%, #e44c00 100%);
}
.contactSection .clickSection .socButtons .callB:hover {
  box-shadow: 0 0 30px rgba(255, 104, 29, 0.5);
}

.starterButtons {
  display: flex;
  flex-direction: column;
}

.bgDecoration {
  position: absolute;
  z-index: -1;
  left: -25%;
  height: 600px;
  top: -100%;
}

.bgDecoration2 {
  position: absolute;
  z-index: -1;
  height: 600px;
  right: -10%;
  top: -100%;
}

footer {
  background: #ff681d;
  padding: 30px 0;
  padding-bottom: 10px;
}
footer a {
  text-decoration: none;
}
footer .footerContainer {
  display: flex;
  justify-content: space-between;
  font-family: geo_r;
  position: relative;
}
footer .footerContainer .footerStarter {
  color: white;
  letter-spacing: 2px;
  font-size: 19px;
  margin-bottom: 15px;
}
footer .footerContainer .footerOption {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  cursor: pointer;
  letter-spacing: 2px;
  font-size: 17px;
  transition: 0.2s;
}
footer .footerContainer .footerOption:hover {
  color: white;
}

.footerLine {
  height: 2px;
  width: 100%;
  background: #ff8446;
  margin: 10px 0;
  margin-top: 30px;
}

.contSpacer {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-family: k2d;
  text-transform: uppercase;
  color: #ff8446;
}

.footerRow {
  display: flex;
  flex-direction: column;
}

.socFooter {
  position: absolute;
  bottom: 0;
  left: 0;
}
.socFooter img {
  height: 30px;
  cursor: pointer;
}

@media (max-width: 1150px) {
  .section1 .sectionHalf h3 {
    font-size: 24px;
  }
  .section1 .sectionHalf p {
    font-size: 16px;
  }
}
@media (max-width: 1000px) {
  .section1 {
    flex-direction: column;
    gap: 100px;
  }
  .section1 .secondHalf {
    width: 100%;
  }
  .section1 .secondHalf .starterBG img {
    width: 60%;
  }
  .section1 .secondHalf .starterBG::before {
    height: 110%;
    width: 150%;
    left: 15%;
  }
  .section1 .sectionHalf {
    width: 100%;
  }
  .section1 .sectionHalf .hiWord {
    width: 100%;
  }
  .section1 .sectionHalf .hiWord .starterButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  .section1 .sectionHalf .hiWord .starterButtons .infoT {
    margin: 0;
  }
  .section1 .sectionHalf h3 {
    text-align: center;
    font-size: 32px;
  }
  .section1 .sectionHalf p {
    text-align: center;
    font-size: 18px;
  }
  .contactSection {
    margin-top: 80px;
    flex-direction: column;
    gap: 100px;
  }
  .contactSection .secH {
    width: 100%;
  }
  footer .footerContainer {
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 50px;
  }
  #cc1 {
    text-align: center;
  }
}
@media (max-width: 700px) {
  nav ul {
    display: none;
  }
  .section1 .sectionHalf .hiWord .starterButtons {
    gap: 15px;
  }
}
@media (max-width: 450px) {
  .sectionStarter {
    font-size: 26px;
  }
  .section1 .secondHalf .starterBG img {
    width: 100%;
  }
  .section1 .secondHalf .starterBG::before {
    height: 130%;
    width: 150%;
    left: 5%;
  }
  .section1 .sectionHalf h3 {
    font-size: 22px;
  }
  .section1 .sectionHalf p {
    font-size: 14px;
  }
}