*{

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}

body{

  font-family: Arial, Helvetica, sans-serif;

  background: #F5F7FB;

  color: #0F172A;

  overflow-x: hidden;

}

img{

  max-width: 100%;

  display: block;

}

html{

  scroll-behavior: smooth;

}

/* HEADER */

.header{

  position: sticky;

  top: 0;

  z-index: 999;

  background:
  rgba(255,255,255,0.97);

  backdrop-filter: blur(14px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 16px 40px;

  border-bottom:
  1px solid rgba(255,255,255,0.5);

  box-shadow:

  0 2px 8px rgba(15,23,42,0.04),

  0 8px 24px rgba(15,23,42,0.06),

  0 16px 40px rgba(15,23,42,0.05);

}

/* LOGO */

.logo{

  height: 68px;

  width: auto;

  object-fit: contain;

}

/* MENU */

.menu{

  display: flex;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;

}

.menu a{

  text-decoration: none;

  color: #0F172A;

  font-weight: 600;

  font-size: 15px;

  padding: 10px 18px;

  border-radius: 14px;

  transition: 0.3s;

}

/* HOVER */

.menu a:hover{

  background: #EEF2FF;

  color: #2563EB;

}

/* BOTÃO HEADER */

.btn-header{

  background:
  linear-gradient(
  45deg,
  #22C55E,
  #3B82F6
  );

  color: white !important;

  border-radius: 14px;

  box-shadow:
  0 4px 15px rgba(59,130,246,0.18);

}

/* CARROSSEL */

.carousel-section{

  padding: 20px;

}

.carousel-container{

  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius: 24px;

  background: white;

  box-shadow:
  0 8px 28px rgba(15,23,42,0.06);

}

.carousel-slide{

  display: none;

}

.carousel-slide img{

  width: 100%;

  height: auto;

  max-height: 520px;

  object-fit: contain;

  display: block;

  background: white;

}

/* ANIMAÇÃO */

.fade{

  animation: fade 1s;

}

@keyframes fade{

  from{

    opacity: .4;

  }

  to{

    opacity: 1;

  }

}

/* SEÇÕES */

.secao{

  padding: 50px 20px;

}

.secao h2{

  font-size: 32px;

  margin-bottom: 25px;

  color: #0F172A;

}

/* GRID */

.grid{

  display: grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap: 24px;

}

/* CARD */

.card{

  background: white;
  text-align: center;

  border-radius: 22px;

  overflow: hidden;

  box-shadow:
  0 6px 22px rgba(15,23,42,0.06);

  transition: 0.3s;

}

.card:hover{

  transform: translateY(-6px);

  box-shadow:
  0 12px 30px rgba(15,23,42,0.10);

}

.card > img{

  width: 100%;

  height: 240px;

  object-fit: contain;

  background: white;

  padding: 14px;

}

.card h3{

  padding: 0 15px;

  margin-top: 8px;

}

/* BOTÃO WHATS */

.btn-whats{

  background:
  linear-gradient(
  45deg,
  #22C55E,
  #16A34A
  );

  color: white;

  border: none;

  padding: 12px;

  border-radius: 14px;

  width: calc(100% - 30px);

  margin: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-weight: bold;

  cursor: pointer;

  transition: 0.3s;

}

.btn-whats:hover{

  transform: scale(1.02);

}

.btn-whats img{

  width: 22px;

  height: 22px;

  object-fit: contain;

  background: transparent;

}

/* CONTATO */

.contato{

  padding: 60px 20px;

  text-align: center;

  background:
  linear-gradient(
  45deg,
  #3B82F6,
  #22C55E
  );

  color: white;

}

.contato h2{

  font-size: 36px;

  margin-bottom: 14px;

}

.contato p{

  max-width: 600px;

  margin: auto;

  line-height: 1.6;

}

.btn-contato{

  display: inline-block;

  background: white;

  color: #0F172A;

  padding: 14px 24px;

  border-radius: 14px;

  text-decoration: none;

  font-weight: bold;

  margin-top: 24px;

}

/* RESPONSIVO */

@media(max-width:900px){

  .header{

    padding: 14px 20px;

    flex-direction: column;

    gap: 14px;

  }

}

@media(max-width:600px){

  .header{

    padding: 12px;

  }

  .logo{

    height: 52px;

  }

  .menu{

    justify-content: center;

    gap: 8px;

  }

  .menu a{

    font-size: 13px;

    padding: 8px 12px;

  }

  .carousel-section{

    padding: 12px;

  }

  .carousel-container{

    border-radius: 18px;

  }

  .secao{

    padding: 35px 14px;

  }

  .secao h2{

    font-size: 24px;

  }

  .grid{

    grid-template-columns: 1fr;

  }

  .card > img{

    height: 220px;

  }

  .contato{

    padding: 45px 18px;

  }

  .contato h2{

    font-size: 28px;

  }

  .btn-contato{

    width: 100%;

  }

}