* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

:root {
  --colorBackgroundMain: #fcfcfc;
  --gradientOverlay: linear-gradient(
    45deg,
    rgba(2, 27, 39, 0.4),
    rgba(2, 27, 39, 0.4)
  );
  --gradientMain: linear-gradient(190deg, #525252, #021b27);
  --colorContrastLight: #ebebeb;
  --colorContrastDark: #141414;
  --colorBackgroundLight: #f5f5f5;
  --colorBackgroundCards: #f0860f;
  --colorFunctionPrimary: #f6b66f;
  --colorFunction200: #f0860f;
  --colorFunctionSecundary: #086391;
  --colorFunctionSecundary200: #0a85c2;
  --colorFunctionSecundary300: rgba(8, 99, 145, 0.8);
  --colorFeedbackSucess: #00ac47;
  --colorFunctionSecundaryHover: #525252;
  --colorGrayScale100: #cccccc;
  --colorGrayScale200: #292929;
  --colorGrayScale400: #8a8a8a;
  --efectShadowMain: 0px 3px 8px rgba(5, 66, 97, 0.1);
  --efectShadowImg: 4px 4px 8px rgba(204, 204, 204, 0.1);
  --fontTypeBrand: "Cantarell", sans-serif;
  --fontTypeMain: "Roboto", sans-serif;
  --fontSize16: 0.875rem;
  --fontSize16: 1rem;
  --fontSize18: 1.125rem;
  --fontSize20: 1.25rem;
  --fontSize24: 1.5rem;
  --fontSize32: 2rem;
  --fontSize40: 2.5rem;
  --fontLineHeight: 1.5rem;
  --fontWeightTitle: 700;
  --fontWeightSubTitle: 500;
  --fontWeightTextAux: 300;
  --fontWeightTextQuote: 100;
}

@keyframes moving {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  40% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes movingY {
  0% {
    opacity: 0;
    transform: translateY(250px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes movingLogo {
  0% {
    width: 0px;
    opacity: 0;
    transform: rotate(359deg);
  }
  40% {
    width: 10px;
  }
  60% {
    width: 20px;

    opacity: 0.5;
  }
  100% {
    width: 80px;
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body {
  background-color: var(--colorBackgroundMain);
}

a {
  text-decoration: none;
}

/* ================= PRELOADER - LOAD SCREEN ================= */

.preLoader {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background-image: var(--gradientMain);
}

.preLoader .logo .logoTitle {
  display: flex;
  flex-direction: column;
  color: var(--colorContrastLight);
  font-family: var(--fontTypeBrand);
  font-size: var(--fontSize20);
  font-weight: var(--fontWeightTitle);
  margin-left: 69px;
  margin-top: -45px;
  line-height: 1.3rem;
}

.fadeOutJS {
  animation: fadeOut 1.2s linear forwards;
}

.logoTitleJS {
  animation: moving 0.6s ease-in-out forwards;
}

.logoAnimated {
  animation: movingLogo 0.4s linear forwards;
}

.reveal {
  transform: scale(0.1) translateX(240px);
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.reveal.active {
  transform: scale(1) translateX(0);
  opacity: 1;
}

/* ================= HEADER - STICK HEAD ================= */

.headerMenu0 {
  max-width: 100vw;
  height: auto;
  margin: auto;
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.headerMenu0 .logo {
  display: flex;
  align-items: center;
}

.headerMenu0 .logo .logoTitle {
  display: flex;
  flex-direction: column;
  color: var(--colorContrastLight);
  font-family: var(--fontTypeBrand);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightTitle);
  letter-spacing: 1px;
  margin-left: 69px;
  margin-top: -45px;
  line-height: 1.3rem;
}

.jsStickHeader {
  max-width: 100vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 4rem;
  position: sticky;
  top: 0px;
  z-index: 10;
  background-image: var(--gradientMain);
}

/* ================= HEADER - CABECALHO DO SITE ================= */

header .container {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(
      67deg,
      rgba(2, 27, 39, 0.9),
      rgba(2, 27, 39, 0.6)
    ),
    url(/assets/images/hero.opti.webp);
  background-position: center;
  background-size: cover;
}

header .container .headerMenu {
  max-width: 1200px;
  height: auto;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

header .container .headerMenu .logo,
.siteFooter .logo {
  display: flex;
  align-items: center;
}

header .container .headerMenu .logo .logoTitle,
.siteFooter .logo .logoTitle {
  display: flex;
  flex-direction: column;
  color: var(--colorContrastLight);
  font-family: var(--fontTypeBrand);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightTitle);
  line-height: 1.3rem;
  margin: 0px 0px -16px -10px;
}

header .container .headerMenu nav,
.headerMenu0 nav {
  display: flex;
  gap: 1.25rem;
}

header .container .headerMenu nav ul,
.headerMenu0 nav ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
}

header .container .headerMenu nav ul li,
.headerMenu0 nav ul li {
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightSubTitle);
  cursor: pointer;
}

header .container .headerMenu nav ul li a,
.headerMenu0 nav ul li a {
  text-decoration: none;
  color: var(--colorContrastLight);
  transition: 0.3s;
  font-weight: var(--fontWeightSubTitle);
}

header .container .headerMenu nav ul li a:focus,
header .container .headerMenu nav ul li a:hover,
.headerMenu0 nav ul li a:hover {
  text-decoration: underline 3px var(--colorFunctionPrimary);
  text-underline-offset: 0.75rem;
  letter-spacing: 2px;
}

header .container .headerMenu nav button,
.headerMenu0 nav button {
  background-color: var(--colorFunctionPrimary);
  color: var(--colorContrastDark);
  padding: 0.5rem 1rem;
  border: 2px solid var(--colorFunctionPrimary);
  border-radius: 4px;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightSubTitle);
  cursor: pointer;
  transition: 0.3s;
}

header .container .headerMenu nav button:hover,
.headerMenu0 nav button:hover {
  background-color: inherit;
  border: 2px solid var(--colorFunctionPrimary);
  color: var(--colorContrastLight);
}

header .container .headerMenu nav button a,
.headerMenu0 nav button a,
.siteFooter nav ul button a {
  color: var(--colorContrastdark);
}

header .container .headerContent {
  display: flex;
  flex-direction: column;
  max-width: 1127px;
  margin: 5rem auto;
  padding: 1rem;
  color: var(--colorContrastLight);
  animation: movingY 0.6s ease-in-out 1s forwards;
}

header .container .headerContent h1 {
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize40);
}

header .container .headerContent p {
  margin-top: 0.5rem;
  max-width: 55%;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSizeText);
  line-height: var(--fontLineHeight);
}

header .container .headerContent button {
  width: 30%;
  margin-top: 1rem;
  padding: 12px 16px;
  background-color: inherit;
  border: 2px solid var(--colorFunctionPrimary);
  border-radius: 4px;
  color: var(--colorContrastLight);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightTitle);
  transition: 0.3s;
  cursor: pointer;
}

header .container .headerContent button:hover {
  background-color: var(--colorFunctionPrimary);
  color: var(--colorContrastDark);
}

/* ================= MAIN - SECTION SERVICES ================= */

main .containerServices {
  max-width: 1127px;
  height: auto;
  margin: auto;
  padding: 10rem 2rem;
  overflow: hidden;
}

main .containerServices .card-container{
  position: relative;

}

main .containerServices .card-container .service-all{
  width: 40rem;
  height: 40rem;
  padding: 4rem;
  border-radius: 1rem;
  background-color: var(--colorBackgroundCards);
}

main .containerServices .card-container .service-all p{
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize40);
  font-weight: var(--fontWeightTitle);
  color: var(--colorGrayScale200);
}

main .containerServices .card-container .cards{
  position: absolute;
  top: 10rem;
  left: 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  
}

main .containerServices .cardInfo {
  width: auto;
  height: 250px;
  padding: 1rem;
  background-color: #f5f7f8;
  box-shadow: var(--efectShadowMain);
  border-radius: 4px;
}

main .containerServices .cardInfo .icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}

main .containerServices .cardInfo .icon svg {
  width: var(--fontSize40);
  fill: var(--colorBackgroundCards);
}

main .containerServices .cardInfo .icon h2,
main .containerServices .cardInfo .icon h3 {
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  color: var(--colorContrastDark);
}

main .card-item{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

main .containerServices .cardInfo p {
  margin-top: 0.5rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
  color: var(--colorContrastDark);
}

/* ================= MAIN - SECTION BENEFITS ================= */

main .benefits {
  display: flex;
  justify-content: space-evenly;
  width: 100vw;
  height: auto;
  padding: 4rem 0px;
  background-image: var(--gradientMain);
  overflow: hidden;
}

main .resource {
  width: 13rem;
  flex-direction: column;
  margin: auto;
  color: var(--colorContrastLight);
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
}

main .resource svg {
  width: 3.5rem;
  fill: var(--colorFunctionPrimary);
}

main .resource h3{
  max-width: 100;
}

/* ================= MAIN - SECTION ABOUT ================= */

main .cases {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  background-color: var(--colorBackgroundLight);
  box-shadow: var(--efectShadowMain);
overflow: hidden;
}

main .cases .about{
  width: 100%;
  display: flex;
  padding: 4rem;
  background-image: linear-gradient(
    67deg,
    rgba(2, 27, 39, 0.9),
    rgba(2, 27, 39, 0.6)
  ),
  url(/assets/images/gerador3.opti.webp);
  background-position: center;
  background-size: cover;
}

main .cases .services{
  width: 100%;
  display: flex;
  padding: 4rem;
}

main .cases .about .info h3{
  margin-top: 2rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize40);
  font-weight: var(--fontWeightTitle);
  color: var(--colorGrayScale100);
}

main .cases .about .info p{
  margin-top: 0.5rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
  color: var(--colorContrastLight);
}

main .cases .services .info h3{
  margin-top: 5rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize40);
  font-weight: var(--fontWeightTitle);
  color: var(--colorGrayScale200);
}

main .cases .services .info p{
  margin-top: 0.5rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
  color: var(--colorContrastDark);
}

main .cases .about .images{
  max-width: 50rem;
  margin-left: 5rem;
}

main .cases .services .images{
  max-width: 50rem;
  margin-right: 5rem;
}

main .cases .about .images img,
main .cases .services .images img{
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--efectShadowImg);
}

main .cases .about .images .thumb{
  position: relative;
  left: -12rem;
  display: flex;
  margin-top: 1rem;
  justify-content: center;
  gap: 1rem;
}
main .cases .about .images .thumb img{
  width: 80%;
}

main .cases .services .images .thumb{
  position: relative;
  left: 12rem;
  display: flex;
  margin-top: 1rem;
  justify-content: center;
  gap: 1rem;
}


/* ================= MAIN - SECTION ABOUT ================= */

main .contact {
  max-width: 1127px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

main .contact .content {
  display: flex;
  width: 100%;
  padding: 1rem;
}

main .contact .content .socialNetworks {
  background-image: var(--gradientMain);
  width: 40%;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
  justify-content: space-evenly;
  position: relative;
}

main .contact .content .socialNetworks h3 {
  top: 2rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize24);
  color: var(--colorContrastLight);
}

main .contact .content .socialNetworks p {
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
  line-height: 24px;
  color: var(--colorBackgroundLight);
}

main .contact .content .socialNetworks .social-icones-collection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

main .contact .content .socialNetworks .iconsSocial svg {
  width: 36px;
  transition: 0.3s;
  filter: grayscale(1);
}

main .contact .content .socialNetworks .iconsSocial svg:hover {
  width: 48px;
  filter: grayscale(0);
}

main .contact .content .meContact {
  width: 100%;
  padding: 2rem;
  border-radius: 0 8px 8px 0px;
  background-color: var(--colorFunctionSecundaryHover);
}

.form .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form label {
  margin-top: var(--fontSize16);
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  color: var(--colorContrastLight);
  font-weight: var(--fontWeightSubTitle);
}

.form input,
textarea {
  background-color: var(--colorContrastLight);
  border: none;
  padding: 0.5rem 0.125rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
}

.form figcaption {
  margin-top: 4px;
  font-family: var(--fontTypeMain);
  font-size: 14px;
  color: var(--colorBackgroundMain);
}

.form button {
  background-color: var(--colorBackgroundCards);
  border: none;
  border-radius: 4px;
  margin-top: 2rem;
  width: 100%;
  padding: 0.75rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightSubTitle);
  transition: 0.3s;
  cursor: pointer;
}

.form button:hover {
  background-color: var(--colorFunctionPrimary);
}

.form button:focus {
  background-color: var(--colorFeedbackSucess);
}

/* ================= MAIN - ICON CALL ME WHATSAPP ================= */

main .callMe {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  width: 56px;
  height: 56px;
  bottom: 2rem;
  left: 92vw;
  margin-bottom: 2rem;
  border-radius: 50%;
  background-color: var(--colorBackgroundCards);
  cursor: pointer;
  transition: 0.3s;
}

main .callMe:hover,
.callMe svg:hover {
  background-color: var(--colorFunctionPrimary);
  fill: var(--colorContrastDark);
  transform: scale(1.2);
}

main .callMe svg {
  width: var(--fontSize32);
  fill: var(--colorContrastLight);
}

/* ================= FOOTER - RODAPE ================= */

.siteFooter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--colorContrastDark);
  padding: 2rem;
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize16);
  color: var(--colorBackgroundLight);
}

.siteFooter .descFooter {
  max-width: 30%;
  line-height: var(--fontLineHeight);
}

.siteFooter .navFooter nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
}

.siteFooter .navFooter nav ul li {
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize18);
  font-weight: var(--fontWeightSubTitle);
  cursor: pointer;
}

.siteFooter .navFooter nav ul li a {
  text-decoration: none;
  color: var(--colorContrastLight);
  transition: 0.3s;
  font-weight: var(--fontWeightSubTitle);
}

.siteFooter .navFooter nav ul li a:hover {
  text-decoration: underline 2px var(--colorFunctionPrimary);
  text-underline-offset: 4px;
}

.siteFooter .iconsFooter {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: var(--fontSize32);
  font-family: var(--fontTypeMain);
  font-size: 12px;
  font-weight: var(--fontWeightSubTitle);
}

.siteFooter .iconsFooter .iconsSocial span{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.siteFooter .iconsSocial svg {
  width: var(--fontSize24);
  transition: 0.3s ease-in-out;
}

.siteFooter .iconsSocial:hover svg {
  transform: scale(1.3);
}

footer .madeFor {
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--colorGrayScale200);
  color: var(--colorGrayScale400);
  font-family: var(--fontTypeMain);
  font-size: var(--fontSize12);
}

footer .madeFor a {
  color: var(--colorGrayScale400);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: 0.3s;
}

footer .madeFor a:hover {
  color: var(--colorGrayScale100);
  font-size: var(--fontSize18);
  text-decoration: none;
}

/* ================= RESPONSIVIDADE - TABLET AND PHONE  ================= */

@media (max-width: 960px) {
  .headerMenu0 {
    padding: 0.75rem;
  }

  .headerMenu0 .logo svg,
  header .container .headerMenu .logo svg {
    width: 4rem;
  }

  .headerMenu0 .logo .logoTitle {
    display: none;
  }

  header .container .headerMenu .logo {
    flex-direction: column;
  }

  header .container .headerMenu .logo .logoTitle {
    font-size: var(--fontSize14);
  }

  header .container .headerMenu nav ul,
  .headerMenu0 nav ul {
    gap: 0.5rem;
  }

  header .container .headerMenu nav ul li,
  .headerMenu0 nav ul li {
    font-size: var(--fontSize16);
  }

  header .container .headerMenu nav ul button,
  .headerMenu0 nav ul button {
    font-size: var(--fontSize16);
  }

  header .container .headerContent p {
    max-width: 80%;
  }

  header .container .headerContent button {
    width: 55%;
  }

  main .containerServices .card-container .service-all{
    width: 30rem;
  }

  main .containerServices .card-container .service-all p{
    font-size: var(--fontSize32);
  }

  main .containerServices .card-container .cards{
    position: relative;
    margin-top: -40rem;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0 5rem 1rem;
    gap: 2rem;
  }

  main .containerServices .cardInfo {
    min-width: 300px;
  }

  main .benefits {
    flex-direction: column;
    gap: var(--fontSize40);
  }

  main .cases .about,
  main .cases .services{
    flex-direction: column-reverse;
    gap: 2rem;
    padding: 2rem;
  }

  main .cases .about .images{
    margin: auto;
    max-width: 50rem;
  }

  main .cases .services .images{
    max-width: 50rem;
    margin: auto;
  }


  main .cases .about .images .thumb,
  main .cases .services .images .thumb{
    position: inherit;
   flex-direction: column;
  }


  main .cases .about .images .thumb img{
    width: 100%;
  }

  main .contact {
    height: auto;
  }

  main .contact .content .socialNetworks {
    width: 25%;
    padding: 0.75rem;
    position: relative;
    align-items: center;
  }

  main .contact .content .socialNetworks h3 {
    font-size: var(--fontSize16);
  }

  main .contact .content .socialNetworks p {
    display: none;
  }

  main .contact .content .meContact {
    width: 75%;
    padding: 1rem;
  }

  .form label {
    font-size: var(--fontSize16);
  }

  .form input,
  textarea {
    padding: 0.4rem;
  }

  .form figcaption {
    font-size: 12px;
  }

  main .callMe {
    left: 85%;
  }

  .siteFooter {
    flex-direction: column;
  }

  .siteFooter .descFooter {
    padding: var(--fontSize16);
    max-width: 100%;
  }

  .siteFooter .navFooter nav ul {
    padding: var(--fontSize16);
    flex-direction: row;
  }
}