:root {
  --verde: #9DCC3E;
  --branco: #ffffff;
  --preto: #201D1F;
}

.hero {
  position: relative;
  height: 10vh;
 
  color: var(--branco);
  padding: 40px 8%;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background: url("../img/hero-bg.jpg") center center no-repeat;
  background-size: cover;

  /* garante sobra para qualquer tela */
}

/* HEADER */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  background-color: transparent;
}

.site-header.scrolled {
  background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 8%;
}

.logo {
  height: 70px !important;
  transition: filter 0.3s ease;
}
.site-header.scrolled .logo {
  height: 56px !important;
}
/* BOTÃO HEADER */
.btn-header {
  background: #9DCC3E;
  color: #201D1F;
  padding: 7px 16px !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

/* quando fundo fica branco */
.site-header.scrolled .btn-header {
  background: #9DCC3E;
  color: #201D1F;
}

/* BOTÃO TOPO */
.btn-outline {
  background: var(--verde);
  color: var(--preto);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-outline:hover {
  background: #88b832;
}

/* CONTEÚDO CENTRAL */
.hero-content {
  min-width: 400px;
  max-width: 1800px !important;
  margin-top: 1vh;
}

.hero-content h1 {
    color: #fff;
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 20px;
}
header {
  position: relative;
   padding: 10px;
}
.hero-content p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 30px;
}

/* CTA */
.btn-primary {
  background: var(--verde);
  color: var(--preto);
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: #88b832;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

section {
  padding: 80px 10%;
  position: relative;
}
.hero {
      background-image: url('../img/bg.jpg');

}

.parallax {
   background-repeat: no-repeat;
  background-size: 2000;
  background-attachment: fixed;
  background-position: left;
  
}
.parallax2 {
   background-repeat: no-repeat;
  background-size: 2000 ;
  background-attachment: fixed;
  
}
.sobre {
  position: relative;
  overflow: hidden;
  inset: 0;
  background-image: url('../img/bg2.jpg');
 background-size: 120% auto; /* 👈 maior horizontalmente */
  background-position: center;
  background-repeat: repeat;
  will-change: transform;
}
.sobre h1 {
    color: #fff;
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 20px;
}
.dark {
  color: white;
}

.hero {
  height: 90vh;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

h1, h2 {
  color: var(--verde);
  margin-bottom: 20px;
}

.btn {
  color: #fff !important;
  position: relative;
  overflow: hidden;
  background: var(--verde);
  color: var(--preto);
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #88b832;
}

/* Ripple real */
.btn .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25); /* onda escura */
  transform: scale(0);
  animation: ripple-animation 700ms ease-out;
  pointer-events: none;
}
.btn-form {
  position: relative;
  border-radius: 50%;
  margin-bottom: 15px;
  margin-top: 15px;
  width: 100%;
  background-color: #4597bb;
  color: #fff;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}
.btn-form:hover {
  background: #3486aa;
}
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}




.ripple:active::after {
  width: 300px;
  height: 300px;
  transition: width .4s ease, height .4s ease;
}

/* CAROUSEL */
 .carrousel {
      max-width: 1100px;
      margin: 100px auto;
      position: relative;
      background: transparent;
      padding: 40px 0;
    }

    .carrousel_viewport {
      overflow: hidden;
      height: 600px;
      width: 100%;
    }

    .carrousel_track {
      display: flex;
  align-items: center;
  gap: 32px; /* espaço entre os cards */
  transition: transform 0.6s ease;
    }

    .carrousel_item {
       flex: 0 0 28%;
       align-items: center;
       text-align: center;
        background: transparent;
        border-radius: 16px;
        padding: 20px;
        box-sizing: border-box;
        opacity: 0.7;
         border: solid 2px #7b7b7d ;
        transform: scale(0.9);
        transition:
          transform 0.6s ease,
          border 0.6s ease,

          opacity 0.6s ease,
          box-shadow 0.6s ease;
    }

    .carrousel_item img {
      width: 100%;
      border-radius: 12px;
      transition: transform 0.6s ease;
    }
  .carrousel_item.center img {
      transform: scale(1.05);
    }
    .aux {
      text-align: justify !important;
       opacity: 0;
       color:  #7b7b7d;
        max-height: 0;
        overflow: auto;
        transition:
          opacity 0.4s ease,
          max-height 0.4s ease;
    }
  .carrousel_item.center {
    flex: 0 0 36%;
    opacity: 1;
    transform: scale(1);
    border: solid 1px #7b7b7d ;
    z-index: 2;
  }
    .carrousel_item.center .aux {
      margin-top: 15px;
      opacity: 1;
       max-height: 200px;
    }

    .carousel_arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 35px;
      background: transparent;
      color: #7b7b7d;
      border: none;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
.carrousel_item h3 {
  margin-top: 10px;
  font-weight: 600;
    font-size: 22px!important;
  text-align: center !important;
  margin-bottom: 12px;
}
.carrousel_item.center h3 {
    font-size: 24px!important;
  text-align: center !important;
  margin-bottom: 12px;
}
    .carousel_arrow.left { left: -50px; }
    .carousel_arrow.right { right: -50px; }
/* FORM */
.form {
  color: #7b7b7d;
  width: 100%;
  border: solid 2px #4597bb ;
  border-radius: 15px;
  padding: 25px;
}
.field {
  margin-bottom: 20px;
}
.field input{
  height: 60px;
  border: solid 2px #4597bb ;
  border-radius: 15px;
  color: #7b7b7d;
  transition: 0.6s;
}

label {
  display: block;
  margin-bottom: 5px;
  transition: color .3s;
}

input {
  width: 100%;
  padding: 10px;
}

/* FOOTER */
footer {
  background: #111;
  padding: 40px;
}
.footer-buttons {
    width: 100% !important;

}
.footer-btn {
  width: 100% !important;
  border-radius: 40px;

  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  transition: all .3s;
}

.footer-btn:hover {
  background: white;
  color: black;
}


.footer-area {
    padding: 125px 0 110px;
    position: relative;
    background: #000;
    z-index: 1;
}
.widge-about-text {
    margin-top: 25px;
}
.widge-social-icon {
  width: 100%;
  font-size: 45px;
    margin-top: 25px;
}
.widget-title h4 {
    font-size: 24px;
     

    margin-bottom: 30px;
    margin-top: 0;
    position: relative;
    color: #fff;
    font-weight: 600;
}
.widge-social-icon a{
	background: transparent;
    height: 35px;
    width: 35px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    transition: .3s;
	margin-right: 32px;
}
.single-widget.upper{
    position: relative;
    padding-left: 35px;
}
.single-widget.upper::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    height: 300px;
    width: 1px;
    background-color: #fff;
}
.widge-link ul li:first-child {
    padding-top: 0;
}
.widge-link ul li {
    position: relative;
    list-style: none;
    margin-bottom: 13px;
}
.widge-link ul li a {
    color: #646464;
    font-size: 16px;
    display: inline-block;
    transition: .5s;
    padding: 0 0 0 20px;
    text-decoration: none;
}
.widge-link ul li::before {
    position: absolute;
    content: "\f061";
    left: 0;
    top: 0;
    font-size: 12px;
    font-family: "FontAwesome";
    font-weight: 900;
    color: #fff;
	padding-right: 14px;
}
.widget-inner {
    margin-top: 0px;
    margin-bottom: 0;
}
.widget-social-information {
    overflow: hidden;
    margin-bottom: 8px;
}
.widget-social-information h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 5px;
}
.widget-social-information p{
	color: #fff;
    font-size: 16px;
    font-weight: 400;
}
.widget-icon {
      margin-top: -15px;
    font-size: 30px !important;
    margin-right: 17px;
    overflow: hidden;
}
.widget-icon i {
    height: 45px;
    width: 45px;
    background: transparent;
    color: #fff;
    text-align: center;
    line-height: 45px;
    border-radius: 50%;
    font-size: 18px;
}
.widge-social-icon a:hover {
    font-size: 50px;
    background: transparent;
    color: #fff;
}
.widge-link ul li a:hover {
    color: #fff;
}
.widge-link ul li:hover:before {
    color: #fff;
}
/*============================
	footer-area-end
==============================*/

/*============================
	footer-copy-right-area-start
==============================*/
.footer-copyright-area{
	background: #000;
	padding:20px 0;
}
.copyright-text {
	text-align:center;
}
.copyright-text p {
    color: #fff;
    padding: 0;
    margin: 1px 0 0;
}
/*============================
	footer-copy-right-area-end
==============================*/





@media only screen and (max-width: 1100px) {
    .sobre {
      text-align: justify;
      background-size: cover;
      background-position: right !important;
      background-repeat: no-repeat;
    }
    .imgfoo {
      width: 260px;
    }
    .carrousel_item {
     flex: auto auto 10%;
      width: 100%;
    }
     .carrousel_item.center .aux {
      font-size: 12px !important;
      max-height: 200px;
     }
    .carrousel_item .center {
    flex: auto auto 90%;
    width: 700px!important;
  }
    .carrousel_viewport {
      width: 100%;
    }
}
@media only screen and (max-width: 800px) {

  .carrousel_item.center .aux {
      font-size: 10px !important;
      max-height: 200px;
     }
 }