@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.cdnfonts.com/css/mateo');
@import url('https://fonts.cdnfonts.com/css/delicious-handrawn');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    /* border: 1px red solid; */

}

html{
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
body{
    background: #F5F1EA;
    
    
}
header{
    padding: 12px 192px;
    background: #F2E1C2;
    display: flex;
    position: fixed;
    width: 100%;
    z-index: 5;
}
header img{
    width: 56px;
}
nav{
    display: flex;
    margin-left: 40px;
    gap: 24px;

}
nav a{
    margin: auto;
    font-weight: 600;
    font-size: 18px;
    color: #D98E32;

}
.dropdown {
  float: left;
  overflow: hidden;
  margin: auto;
  font-weight: 600;
  font-size: 18px;
  color: #D98E32;

}

/* Dropdown button */
.dropdown .dropbtn {
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 18px;
  color: #D98E32;
  background-color: #F2E1C2;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: none;
  color: #1F1408;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F5F1EA;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #1F1408;
  color: #F2E1C2;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
h1{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-weight: 800;
    font-size: 120px;
    color: white;
    width: 100%;
    text-align: center;
    animation-name: text;
    animation-duration: 4s;
    font-family: 'Mateo', sans-serif;

}
@keyframes text {
   0% {
     opacity: 0;

   }
   20% {
     letter-spacing: 25px;
     opacity: 0;
   }
   85% {
     letter-spacing: 8px;

   }
   100% {
      opacity: 1;
   }
 }
.swiper-container {
   width: 100vw;
   height: 100vh;
 }
 
 .swiper-slide {
   background-color: #fcfcfc;
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   color: #fcfcfc;
   font-size: 24px;
 }
 
 .swiper-slide > .swiper-slide-cover {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: transparent no-repeat 50% 50% /cover;

 }
 .swiper-slide .slide-01 {
   background-image: url(assets/IMG1.JPG);
   transform-origin: 50% 50%;
   filter: brightness(0.3);
 }
 
 .swiper-slide .slide-02 {
   background-image: url(assets/IMG2.JPG);
   transform-origin: 50% 50%;
   filter: brightness(0.3);
 }
 
 .swiper-slide .slide-03 {
   background-image: url(assets/IMG3.JPG);
   transform-origin: 50% 50%;
   filter: brightness(0.3);
 }
 
 .swiper-slide .slide-04 {
   background-image: url(assets/IMG4.JPG);
   transform-origin: 50% 50%;
   filter: brightness(0.3);
 }
 .swiper-scale-effect .swiper-slide-cover {
   transition-timing-function: linear;
   transition-duration: 20s;
   transform: scale(1);
 }
 
 .swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
   transform: scale(1.5);
 }

 @keyframes slide{
    0% {transform: translateX(0);}
    20% {transform: translateX(0);}
    30% {transform: translateX(-25%);}
    50% {transform: translateX(-25%);}
    55% {transform: translateX(-50%);}
    75% {transform: translateX(-50%);}
    80% {transform: translateX(-75%);}
    100% {transform: translateX(-75%);}
 }

 #projeto h2{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 48px;
    font-weight: bold;
    color: #1F1408;
    font-size: 48px;
    font-family: 'Delicious Handrawn', sans-serif;
                                                
                                                

 }
 
.topo{
	text-align: center;
	margin: auto;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 500;
	width: 924px; 
	color: #1F1408;
 }
		 
		 
 .titulo {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 48px;
    font-weight: bold;
    color: #1F1408;
    font-size: 48px;
    font-family: 'Delicious Handrawn', sans-serif;
}


 #projeto p{
    text-align: center;
    margin: auto;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    width: 924px; 
    color: #1F1408;
 }

 #projeto {
    background: url('assets/Pasiagem.svg'); 
    background-repeat: no-repeat;
    background-size: 1900px, cover;
    background-position: center -300px;
    overflow:hidden
    
 }
 #pontoscomercial h2{
  text-align: center;
  margin-top: 80px;
  margin-bottom: 48px;
  font-weight: bold;
  color: #1F1408;
  font-size: 48px;
  font-family: 'Delicious Handrawn', sans-serif;                                                                                       
}
.comercial-ce, .comercial-pb{
  display: flex;
  margin: auto 192px;
  margin-bottom: 24px;
}
.comercial-ce .cover1{
  background-image: url(assets/ponto_ce.jpg);
  height: 400px;
  width: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;  
    background-position: center;                                                     
}
#pontoscomercial .text1{
  width: 80%;
  margin: auto 0;
}
#pontoscomercial button{
  width: 220px;
  height: 48px;
  margin: 0 auto;
  display: block;
  cursor:pointer;

  font-size: 20px;
  font-weight: bold;
  color: #F5F1EA;
  background-color: #1F1408;
  border-radius: 8px;
}

.comercial-ce h3, .comercial-pb h3{
    margin: 0 auto;
    height: fit-content;
  width: fit-content;
    /* flex-wrap: wrap; */
    text-align: center;
    font-weight: bold;
    color: #1F1408;
    font-size: 50px;
    font-family: 'Delicious Handrawn', sans-serif;


}
hr.custom-hr {
	border: none;
	height: 2px; /* Ajusta a grossura */
	background-color: #C8BCA6; /* Ajusta a cor */
}
		
		
.comercial-ce p, .comercial-pb p{
  margin: 24px auto;
  height: fit-content;
width: 80%;
  /* flex-wrap: wrap; */
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
.comercial-ce .local, .comercial-pb .local{
  display: flex;
  margin: 24px auto;
  height: fit-content;
width: fit-content;
  gap: 16px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.comercial-ce .local p, .comercial-pb .local p{
  margin: auto 0;
  width: fit-content;
  font-weight: 500;
}
.comercial-ce{
  display: flex;
  margin: auto 192px;
  margin-bottom: 24px;
}
.comercial-pb{
  flex-direction: row-reverse;
}
.comercial-pb .cover1{
  background-image: url(assets/ponto_pb.jpg);
  height: 400px;
  width: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;  
    background-position: center;                                                   
    

}
 #aplicativo button{
    width: 188px;
    height: 48px;

    display: block;
    margin: 0 auto;

    font-size: 20px;
    font-weight: bold;
    color: #F5F1EA;
    background-color: #1F1408;
    border-radius: 8px;
    margin-top: 32px;
    margin-bottom: 50px;

 }
 #app{
    display: flex;
    margin: auto 192px;
    justify-content: center;


 }
#app img{
display: block;
height: 744px;

margin: 80px 0 80px 112px;

}
#app .text{

    margin: auto 0;


}
#app h3{

    margin: auto 0;

    flex-wrap: wrap;

    font-weight: bold;
    width: 618px;
    font-size: 58px;
    font-family: 'Delicious Handrawn', sans-serif;


}
#app p{

    width: 618px; 

    margin: auto 0;
    font-weight: 500;
    font-size: 18px;
    margin-top: 8px;
    text-align: left;
}

.qrcode{
    height: 240px;
    /* width: 1244px; */
    background-color: #F2E1C2;
    border-radius: 16px;
    display: flex;
    margin: auto 192px;
    background-image: url(assets/Screens.png);
    
    background-position:  right center ;
    background-repeat: no-repeat;

}
.qrcode img{
    margin: auto 56px;
    height: 160px;
}
#bannercode{
    /* height: 240px; */
    display: flex;
    flex-direction: column;
    margin: auto 56px;

    row-gap: 16px;

}
#bannercode p{
   text-align: left;
   font-size: 48px;
   font-family: 'Delicious Handrawn', sans-serif;
   width: fit-content;
}
#bannercode a{
    color: black;
    background-color: white;
    width: 260px;
    height: 90px;
    display: flex;
    border-radius: 8px;
    justify-content: center;
    margin: auto 0;

    
} 
a .fa-brands{
    margin: auto 8px auto 0px;
    
    font-size: 60px;

}
a .market-button-title {
    display: block;
    color: #222;
    font-size: 1.825rem;
    font-weight: 800;
}
a .market-button-subtitle {
    margin: auto 0;
    display: block;
    color: #888;
    font-size: 1.15rem;
}
#pontos{
    overflow: hidden;
}
.pontos-pb, .pontos-ce{
   display: flex;
   margin: 80px auto 48px;
   justify-content: center;
}
.pontos-pb, .pontos-ce h2{
  /* text-align: center !important; */
 margin: auto 0;
  color: #1F1408;
  width: fit-content;
  font-size: 48px;
  font-family: 'Delicious Handrawn', sans-serif;
                                              
}
.pontos-pb img{
   width: 80px;
   height: 80px;
   margin: auto 0;
   
}
.pontos-ce img{
   width: 80px;
   height: 80px;
   margin: auto 0;
   
}
#politica .produtores h4{
    /* text-align: center !important; */
   margin: auto 0;
    font-weight: bold;
    color: #1F1408;
    width: fit-content;
    font-size: 48px;
    font-family: 'Delicious Handrawn', sans-serif;
                                                
 }
 .produtores{
  display: flex;
  margin: 0px auto 48px;
  justify-content: center;
}
.produtores img{
  width: 80px;
  height: 80px;
  margin: auto 0;
  
}



 .btn {

   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   outline: none;
 }
 
 .btn:active {
   transform: scale(0.9);
 }
 
 
 
 .btn_new {

   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   outline: none;
 }
 
 .btn:active {
   transform: scale(0.9);
 }
 
 .close-modal {
   background: none;
   border: none;
   font-size: 1.5rem;
 }
 
 .modal {
   width: 450px;
   position: fixed;
   top: -50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   border: 1px solid #ccc;
   border-radius: 10px;
   z-index: 20;
   background-color: #fff;
   transition: top 0ms ease-in-out 300ms,
   opacity 300ms ease-in-out,
   magin-top 300ms ease-in-out;


 }
 
 .modal.active {
   top: 50%;
   opacity: 1;
   margin-top: 0;
   transition: top 0ms ease-in-out 0ms,
               opacity 300ms ease-in-out,
               magin-top 300ms ease-in-out;
 }
 
 .modal .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #ccc;
   padding: 0.5rem;
   background-color: #f2e0c3;
 }
 
 .modal .body {
   padding: 0.75rem;
 }
 
 #overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 2;
 }
 
 #overlay.active {
   display: block;
 }


.slide-container{
    /* background-color: #888; */
    margin: auto 192px;
    /* margin-bottom: 48px; */
    overflow: visible;
    /* padding: 60px 0; */
    
}
.slide-container2{
   /* background-color: #888; */
   margin: auto 192px;
   /* margin-bottom: 48px; */
   overflow: visible;
   /* padding: 60px 0; */
   
}
.slide-content{
    
    margin: 0 70px;
    /* overflow: visible; */

}
.slide-content2{
    
   margin: 0 70px;
   /* overflow: visible; */

}
 .card {
    height: 408px;
    background-color: #FFFFFF;
    border-radius: 8px;
    opacity: .5;
    

 }

 .swiper-slide:not(.swiper-slide-next +  .swiper-slide +  .swiper-slide + .swiper-slide, .swiper-slide-prev){
    opacity: 1;
 }

 .card .image-content{
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 160px;
 }
 .card img{

    width: 320px;
    margin-top: -20px;

 }
 .card button{
    margin-bottom: 24px;
    margin-left: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1F1408;
    border: none;
    background: none;
 }
 .card h4{
   margin: 16px;
   font-size: 18px;
   font-weight: 700;
   color: #1F1408;
  background-color: none;
}
 .card p{
    margin: 16px;
    font-size: 14px;
    color: #1F1408;
    height: 138px;
    
 }
 .swiper-navBtn {
   color: white;
    height: 50px;
    width: 50px;
    transform: translateY(-40%);
    background: #1F1408;
    border-radius: 50%;

  }

  .swiper-navBtn::before,
  .swiper-navBtn::after {
    font-size: 24px;
  }
  
  .swiper-button-next{
    margin-left: 50px;
  }

  
  .swiper2-button-next{
    margin-left: 50px;
  }
  .swiper-pagination{
    content-visibility: hidden;
  }
  .swiper-pagination2{
   content-visibility: hidden;
 }

 
  #realizadores h2{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 48px;
    font-weight: bold;
    color: #1F1408;
    font-size: 48px;
    font-family: 'Delicious Handrawn', sans-serif;
 }
 #realizadores .card-content{
   display: flex;
   margin: 0 192px 0;
   justify-content: space-between;
   
 }
 #realizadores .card-realizador{
    width: 200px;
    height: 165px;
    background-color: white;
    border-radius: 8px;
    margin: 0 0;
    justify-content: center;
    align-items: center;
    display: flex;
    
 }
 #realizadores .card-realizador img{
    width: 160px;
    margin: auto;
 }
 #realizadores .card-content{
   margin-bottom: 24px;
 }

#parceiros h2{
   text-align: center;
   margin-top: 80px;
   margin-bottom: 48px;
   font-weight: bold;
   color: #1F1408;
   font-size: 48px;
   font-family: 'Delicious Handrawn', sans-serif;
}
#parceiros .card-content{
   display: flex;
   margin: 0 192px 16px;
   justify-content: space-between;
   
}
#parceiros .card-contentf{
   display: flex;
   margin: 0 192px 48px;
   justify-content: center;
   gap: 0 120px;
   
}
#parceiros .card-parceiro{
   width: 150px;
   height: 135px;
   background-color: white;
   border-radius: 8px;
   margin: 0 0;
   justify-content: center;
   align-items: center;
   display: flex;
   
}
#parceiros .card-parceiro img{
   width: 135px;
   margin: auto;
}
 #contato{
    /* border: 1px red solid; */
   
    background-color: #F2E1C2;
    
 }
 #contato h2{
    text-align: center;
    padding-top: 80px;
    padding-bottom: 48px;
    font-weight: bold;
    color: #1F1408;
    font-size: 48px;
    font-family: 'Delicious Handrawn', sans-serif;

 }
 form{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 800px;
 }
 form input{
    height: 38px;
    border-radius: 8px;
    border: none;
    background-color: #F5F1EA;
 }
 form p1{
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 20px;
 }
 .dbl-field{
    display: flex;
    /* margin: 0 344px; */

    margin-bottom: 16px;
    gap: 0 124px;
    

 }
 .field{

    display: grid;
    margin: 0 auto;
    width: 100%;
    
 }
.field-subject{

    display: grid;
    padding-bottom: 8px;
    width: 100%;
    
 }
 form input{
    padding: 0px 15px;
    font-size: 15px;
    
 }
 .field-subject textarea{
    height: 178px;
    border-radius: 8px;
    border: none;
    outline: none;
    background-color: #F5F1EA;
    resize: none;
    padding: 10px 15px;
    font-size: 15px;
 }
 .field-subject input:focus{

    border: none;
    outline: none;

 }
 .field input:focus{

    border: none;
    outline: none;

 }
 form .button-area{
   display: flex;
   margin-top: 24px;
   gap: 16px;

 }

 .button-area span{
   margin: auto 0;
   display: none;
 }
 #contato button{
    width: 188px;
    height: 48px;


    cursor:pointer;

    font-size: 20px;
    font-weight: bold;
    color: #F5F1EA;
    background-color: #1F1408;
    border-radius: 8px;
    margin-top: auto;


 }
 .socials{

    margin: 48px 192px 0;
    display: flex;
    justify-content: space-between;
    padding-bottom: 32px;

 }
 .socials-icons{
    margin: auto 0;
    
 }
 .socials img{
    width: 70px;

 }

 .socials a .fa-brands{
    font-size: 30px;
    color: #1F1408;
    margin-left: 16px;


 }
 footer{
    background-color: #F2E1C2;
    display: flex;
    justify-content: space-between;

 }
 hr{
    /* margin-top: 32px; */
    border: 1px solid #1F1408;
    margin: 0 192px;

 }
 footer p{
    padding: 32px 0;
    margin: 0 192px;
 }
 footer .links-footer{
    padding: 32px 0;
    margin-right: 192px;

 }
 footer .links-footer a{
   color: #1F1408;
    margin-left: 24px;
    font-weight: 600;
 }
 li {
   list-style: disc outside none;
   display: list-item;
   margin-left: 2em;
   }
   #politica{
      padding: 126px 56px 0;
    }
   
    #politica h2{
      justify-content: center;
      align-items: center;
      display: flex;
      font-size: 48px;
      padding-top: 30px;
      font-family: 'Delicious Handrawn', sans-serif;
      margin-bottom: 18px;
    }
    #politica p2{

      margin: 40px 0;
      font-size: 18px;
      font-weight: 400;
      color: #1F1408;
      line-height: 25px;
   
   }
   #politica h3{
      margin: 20px 0;
      color: #1F1408;
   }
 #map{
   padding-top: 126px;
 }

 #map h2{
   margin: auto 14px;
   justify-content: center;
   align-items: center;
   display: flex;
   font-size: 48px;
   font-family: 'Delicious Handrawn', sans-serif;
 }
 #map p{
   text-align: center;
   margin: 20px 182px 24px;

   font-size: 18px;
   font-weight: 500;

   color: #1F1408;

}


#map img{
   width: 80px;
   height: 80px;
   margin: auto 0;
   
}
 #map iframe{
   display: flex;
   margin: 0 192px 48px;

   
 }

 #social{
   margin: auto 192px;
   margin-bottom: 48px;
   /* justify-content: center; */
 }

 .grid h2{
   font-family: 'Delicious Handrawn', sans-serif;
   margin: auto;
   font-size: 70px;
   color: #1F1408;
 }

 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-gap: 1rem;
 }
 
 .grid > a {
   /* ... */
   display: grid;
   transition: .1s;
 }
 
 .grid > a::before {
   content: "";
   padding-bottom: 100%;
   display: block;
 }
 .grid > #textgrid::before {
   content: "";
   padding-bottom: 100%;
   display: block;
 }

 .grid > a::before,
 .grid > a > img {
   grid-area: 1 / 1 / 2 / 2;
 }
 .grid > h2::before,
 .grid >  h2 {
   grid-area: 1 / 1 / 2 / 3;
 }

 .grid #insta1{
   background-image: url(assets/insta1.jpg);
   background-size:cover;
   display: block;
 }
 .grid #insta2{
   background-image: url(assets/insta2.png);
   background-size:cover;
   display: block;
 }
 .grid #insta3{
   background-image: url(assets/insta3.jpg);
   background-size:cover;
   display: block;
 }
 .grid #insta4{
   background-image: url(assets/insta4.png);
   background-size:cover;
   display: block;
 }
 .grid #insta5{
   background-image: url(assets/insta5.png);
   background-size:cover;
   display: block;
 }
 .grid #insta6{
   background-image: url(assets/insta6.png);
   background-size:cover;
   display: block;
 }
 .grid a:hover{
   transform: scale(1.1);
 }

 .table_component {
  overflow: auto;
  margin: auto 192px;
}

.table_component table {
  border: 1px solid #dededf;
  height: 100%;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: left;
}

.table_component caption {
  caption-side: top;
  text-align: left;
}

.table_component th {
  border: 1px solid #dededf;
  background-color: #F2E1C2;
  color: #1F1408;
  padding: 5px;
}

.table_component td {
  border: 1px solid #dededf;
  background-color: #ffffff;
  color: #1F1408;
  padding: 5px;
}