@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&family=Manrope:wght@300&display=swap');

/* 
font-family: 'Jost', sans-serif;
font-family: 'Manrope', sans-serif;
*/

:root{
    --yellow: #FDFC08;
    --red: #FF1A00;
    --black: #000000
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    font-family: 'Manrope', sans-serif;
    color: #000000;
}

html, body, main {
    overflow-x: hidden;
    background-color: #F0F8FF !important;
}
html h1, html h2, html h3, html h4, html h5, html h6{
  font-family: 'Jost', sans-serif !important;
}

main{
    width: 90%;
    margin: 0 auto;
}

.visible{
    display: flex !important;
    visibility: visible !important;
}

.hidden{
    display: none !important;
    visibility: hidden !important;
}


/* Start Navbar Style */
.menu{
    height: 100px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 3000 !important;
}

.menu_logo img{
    /* width: 30%; */
    cursor: pointer;
    padding: 20px;
}

.menu_container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    max-width: 90rem;
    height: 100%;
}

.menu_links{
    height: 100%;
    transition: transform .5s;
    display: flex;
    background-color: none;
    margin-top: 1%;
}

.menu_item{
    list-style: none;
    position: relative;
    height: 100%;
    --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
    --transform: rotate(-90deg);
}

.menu_item--active{
    --transform: rotate(0);
    --background: none;
}

.menu_item--show{
    background-color: none;
}

.menu_item:hover{
    --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    --transform: rotate(0);
}

.menu_item::before{
    content: "";
    height: 3px;
    width: 0%;
    background: #FFFFFF;
    position: absolute;
    left: 0;
    bottom: 5px;
    transition: 0.4s ease-out;
}

.menu_item:hover::before{
    width: 100%;
}

.menu_nesting{
    list-style: none;
    transition: clip-path .3s;
    clip-path: var(--clip);
    position: absolute;
    right: 0;
    bottom: 0;
    width: max-content;
    transform: translateY(100%);
    background: linear-gradient(-145deg,  var(--black), var(--red) , var(--yellow)) !important;  
    box-shadow: 0 10px 20px #000000;

}

.menu_link{
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    padding: 0 1.875rem;
    display: flex;
    height: 100%;
    align-items: center;
    background-color: none;
}

.menu_link:hover{
    color: #ccbfbf;
}

.menu_arrow{
    transition: transform .3s;
    display: block;
    margin-left: .1875rem;
}

.menu_link--inside{
    padding: .9375rem 3.125rem .9375rem .625rem;
}

.menu_link--inside:hover{
    color: #ccbfbf;;
}

.menu_hamburguer{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .9375rem;
    cursor: pointer;
    display: none;
}

.menu_img{
    display: block;
    width: 2.25rem;
}

nav {
    background: linear-gradient(to top,  var(--black), var(--red) , var(--yellow)) !important;  
    box-shadow: 0 10px 20px #000000;
}
nav .menu_nesting{
    background: linear-gradient(to right,  var(--black), var(--red) , var(--yellow)) !important;  
    box-shadow: 0 10px 20px #000000;
}


/* End Navbar Style */

/* float buttons */

.btnWsp{
    position: fixed;
    bottom: 3.125rem;
    right: 1.25rem;
    z-index: 1500 !important;
}

.up{
    position: fixed;
    /* line-height: 64px; */
    bottom: 100px;
    right: 30px;
    text-align: center;
    z-index: 100;
}

.banner{
    display: flex;
    margin: 10% auto 0 auto;
    width: 98%;
    background: url('../assets/img/banda02.png');
    background-size: cover;
    height: 90px;
}

/* float buttons */

/* hero */

.hero {
    height: 80vh;
    margin-top: 3%;
    position: relative;
    background-image: url('../assets/logo/logoP.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position:  center;
    border: 4px solid var(--black);
    border-radius: 0px 30px;
}
.hero-grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}   
.hero-diagonal{
    position: absolute;
    bottom: -0.5px;
    width: 100%;
    height: 20vw;
    z-index: 2;
    fill: rgba(255, 255, 0, 0.719);
    opacity: 0.85;
    border-radius: 0 0 0 30px;
}
.hero-content{
    position: relative;
    height: 650px;
    padding: 60px;
    padding-top: 10vw;
    padding-bottom: 10vw;
    z-index: 1;
    text-align: center;
}
.heading{
    font-size: 40px;
    max-width: 700px;
    font-weight: 350;
    margin: 0 auto;
    color: #000000;
    line-height: 3;
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 60px;
}
  
/* .hero-scroll {
    width: 45px;
    height: 80px;
    box-shadow: inset 0 0 0 1px #000000;
    border-radius: 25px;
    position: relative;
    display: inline-block;
    left: 45%;
    z-index: 50;
}
.hero-scroll:before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    background: #000000;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
} */
.content{
    width: 100%;
    max-width: 95%;
    font-size: 18px;
    color: #000000;
    margin: 0 auto;
    padding: 20px 0;
    text-align: justify;
    line-height: 1.9;
    letter-spacing: 1px;
}
.content p{
    margin-top: 0.5% !important;
    margin-bottom: 60px;
}
.content h1{
    display: inline !important;
}

/* hero */

#company, #partners, #products, #contact{
    padding: 2px;
}

.section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 80px auto;
}
.section h2{
    text-align: start;
    margin: 15px 0;
    color: #000000;
    font-size: 38px;
    padding: 2px;
    font-family: 'Nova Round', cursive;
}

.section p{
    margin: 0 auto;
    padding: 2px;
}

.hero-scroll2 {
    width: 45px;
    height: 80px;
    box-shadow: inset 0 0 0 1px #000000;
    border-radius: 25px;
    position: relative;
    display: inline-block;
  }
  .hero-scroll2:before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    background: #000000;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
  }

  .partners{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .cards-partners{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    max-width: 1400px;
    margin: 5% auto;
  }

  .blog-card {
    max-width: 350px;
    width: 100%;
    height: 400px;
    position: relative;
    font-family: 'Droid Serif', serif;
    color:#fff;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0 25px;
    box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition:all 0.4s;
  }

  .rep-card{
    max-width: 300px;
    width: 100%;
    height: 350px;
    position: relative;
    font-family: 'Droid Serif', serif;
    color:#fff;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0 25px;
    box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition:all 0.4s;
  }

  .acces-card{
    max-width: 500px;
    width: 100%;
    height: 550px;
    position: relative;
    font-family: 'Droid Serif', serif;
    color:#fff;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0 25px;
    box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition:all 0.4s;
  }

  .blog-card a, .rep-card a, .acces-card a{ 
    color:#fff;
    text-decoration:none;
    transition:all 0.2s
  }
  .blog-card .color-overlay, .rep-card .color-overlay, .acces-card .color-overlay {
    background: rgba(64, 84, 94,0.5);
    width: 550px;
    height: 500px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
  }
  .blog-card .gradient-overlay, .rep-card .gradient-overlay, .acces-card .gradient-overlay {  
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 550px;
    height: 500px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
  }
  .blog-card:hover:nth-child(1), .blog-card:hover:nth-child(4), .blog-card:hover:nth-child(7), .blog-card:hover:nth-child(10), .blog-card:hover:nth-child(13), .rep-card:hover:nth-child(1), .rep-card:hover:nth-child(4), .rep-card:hover:nth-child(7), .rep-card:hover:nth-child(10), .rep-card:hover:nth-child(13), .rep-card:hover:nth-child(16), .rep-card:hover:nth-child(19), .acces-card:hover:nth-child(1), .acces-card:hover:nth-child(4){
      box-shadow: 0px 10px 30px 0px var(--yellow);
      border-radius: 25px 0;
  }
  .blog-card:hover:nth-child(2), .blog-card:hover:nth-child(5), .blog-card:hover:nth-child(8), .blog-card:hover:nth-child(11), .blog-card:hover:nth-child(14), .rep-card:hover:nth-child(2), .rep-card:hover:nth-child(5), .rep-card:hover:nth-child(8), .rep-card:hover:nth-child(11), .rep-card:hover:nth-child(14), .rep-card:hover:nth-child(17), .rep-card:hover:nth-child(20), .acces-card:hover:nth-child(2), .acces-card:hover:nth-child(3){
    box-shadow: 0px 10px 30px 0px var(--red);
    border-radius: 25px 0;
}
  .blog-card:hover:nth-child(3), .blog-card:hover:nth-child(6), .blog-card:hover:nth-child(9), .blog-card:hover:nth-child(12), .blog-card:hover:nth-child(15), .rep-card:hover:nth-child(3), .rep-card:hover:nth-child(6), .rep-card:hover:nth-child(9), .rep-card:hover:nth-child(12), .rep-card:hover:nth-child(15),  .rep-card:hover:nth-child(18){
    box-shadow: 0px 10px 30px 0px var(--black);
    border-radius: 25px 0;
  }
  .blog-card:hover .card-info {
    opacity: 1;
    bottom: 100px;
  }
  .blog-card:hover .color-overlay, .rep-card:hover .color-overlay, .acces-card:hover .color-overlay {
    background: rgba(64, 64, 70,0.8);
  }
  .blog-card:hover .title-content{
    margin-top:70px
  }
  .rep-card:hover .title-content{
    margin-top: 250px;
  }
  .acces-card:hover .title-content{
    margin-top: 400px;
  }
  .title-content {
    text-align: center;
    margin: 170px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 0;
    left: 0;
    transition:all 0.6s
  }
  
  .blog-card:hover h3:after, .rep-card:hover h3:after, .acces-card:hover h3:after{
    animation: changeLetter 0.3s 1 linear;
    width:80%
  }
  
  .blog-card h3, .blog-card h1, .rep-card h3, .rep-card h1, .acces-card h3, .acces-card h1 {
    font-size: 1.9em;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0;
    display:inline-block;
  }
  .blog-card h3 a, .rep-card h3 a, .acces-card h3 a{  
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
    transition:all 0.2s
  }
  .blog-card h3 a:hover, .rep-card h3 a:hover, .acces-card h3 a:hover{
    text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
    color: var(--red);
  }
  h3:after {
    content: " ";
    display: block; 
    width: 10%;
    height: 2px;
    margin: 20px auto;
    border: 0;
    background: var(--yellow);
    transition:all 0.2s
  }
  
  @keyframes changeLetter {
    0% {
      width: 10%;
    }
    100% {
      width: 80%;
    }
  }
  
  .intro {
    width: 170px;
    margin: 0 auto;
    color: #ddd;
    font-style: italic;
    line-height: 18px;
  }
  .intro a{
    color: #ddd
  }
  .intro a:hover{
    text-decoration:underline
  }
  .card-info {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    position: absolute;
    bottom: -40px;
    left: 0;
    margin: 0 auto;
    padding: 0 50px;
    font-style: 16px;
    line-height: 24px;
    z-index: 20;
    opacity: 0;
    transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1);
  }
  .card-info p{
    color: #FFFFFF;
    box-shadow: #444;
  }
  
  .card-info a{
    display:block;
    width: 45%;
    margin:15px auto;
    background: var(--yellow);
    color:#444;
    padding:3px 10px;
    border-radius: 0 10px;
    font-size:0.8em;
    font-weight: bold;
  }
  .card-info a:hover{
    background: var(--red);
    color:#fff;
    border-radius: 10px 0px;
  }
  .card-info a:hover span{
     filter: brightness(10);
     opacity:1
  }
  
  .licon{
    position:relative;  
     width:23px;
     height:15px;
     vertical-align:middle;
  }
  .licon:before{
    content:"";
     background:url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg?) -2px -6px no-repeat;
     background-size:250px;
     width:26px;
     height:20px;
     display:inline-block;
     vertical-align:middle;
     position:absolute;
     top:-3px;
     left:0;
  }

  /* products style */

  .content-galery{
    background: url('../assets/logo/logoPtransp.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    background-attachment: fixed;
  }

.products{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.card-products, .card-products2, .card-products3{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: nowrap;
}

.cardd{
  width: 47%;
}

.card-products .card-background{
  width: 100%;
  height: 70vh;
  margin-top: 5%;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear; 
}
.card-products2 .card-background2{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  height: 27vh;
  background: linear-gradient(to top,  var(--black), var(--red) , var(--yellow)) !important; 
  border-radius: 24px;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear; 
}
.card-background2 img{
  margin-left: 15%;
}

.card-products3 .card-background3{
  width: 100%;
  height: 70vh;
  margin: 3% auto 1% auto;
  background-size: cover !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  border-radius: 24px;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear; 
}

.card-products .card-background:hover {
  transform: scale(1.05) translateZ(0);
}

.products-card:hover > .card-products .cardd:not(:hover) .card-background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card-products2 .card-background2:hover {
  transform: scale(1.05) translateZ(0);
}

.products-card:hover > .card-products2 .cardd:not(:hover) .card-background2{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card-products3 .card-background3:hover {
  transform: scale(1.05) translateZ(0);
}

.products-card:hover > .card-products3 .cardd:not(:hover) .card-background3{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.cardd:before{
  content: '';
  padding-bottom: 150%;
  width: 100%;
}

.card-content{
  padding: 24px;
}

.card-category{
  color: #FFFFFF !important;
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.card-heading{
  color: #FFFFFF;
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}

.card-heading2{
  color: #FFFFFF;
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
}
  

.text-products{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 90%;
  margin: 5% auto;
  text-align: justify;
  padding: 40px 80px;
  border-radius: 0 80px;
  border: 3px solid #000000a8;
}
.text-products p{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.caract-gen{
  margin: 0 auto;
  text-align: center;
}
.caract-gen h3{
  margin-bottom: 3%;
}
.caract-gen p, .caract-gen i{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.text-products h3:after, .caract-gen h3:after{
    display: none; 
}

/* products style */

/* contact style  */

.contact{
  width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 120px;
    margin: 0 auto;
    /* padding: 10px; */
}

form{
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
}

.user{
    display: flex;
    width: 100%;
}

.label-form{
    display: flex;
    align-items: center;
}

form label{
    margin-right: 20px;
}
form label i{
    font-size: 2rem;
}
form input, textarea{
    width: 100%;
    padding: .5rem;
    border-radius: .625rem;
    border: none;
    box-shadow: .1875rem .1875rem var(--details);
    background-color: #ebd2d2;
}

.form-button{
    display: flex;
    justify-content: center;
}
form button{
    /* background: #FDBB2D; */
    background: linear-gradient(to bottom,  var(--black), var(--red) , var(--yellow)) !important;  
    box-shadow: 0 10px 20px #000000;
    color: #FFFFFF;
    padding: 15px;
    border-radius: 0 30px;
    font-weight: bold;
    cursor: pointer;
    transition: all .5s;
}
.form-button i{
    margin-left: 10px;
    color: #FFFFFF;
}
form button:hover{
    background: linear-gradient(to bottom, var(--yellow), var(--red),  var(--black) ) !important;  
    transition: all .5s;
    transform: scale(1.2);
    border-radius: 30px 0px;
}

.maps{
  display: flex;
  width: 100%;
}

footer {
    width: 100%;
    background: linear-gradient(to top,  var(--black), var(--red) , var(--yellow)) !important;  
    box-shadow: 0 10px 20px #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.footer-logo img{
    width: 15%;
    margin: 1% auto;
}

.menu-footer{
    display: flex;
    gap: 25px;
}
.menu-footer a{
    color: var(--black);
    font-size: 20px;
    margin-right: 1%;
}
.menu-footer a i{
  font-size: 30px;
}
.menu-footer a:hover{
    color: #F0F8FF;
}

@-webkit-keyframes wiggle {
    0% {transform: rotateZ(2deg);}
    50% {transform: rotateZ(-2deg);}
    100% {transform: rotateZ(2deg);}
}

@mixin iconTransition{
    transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

@mixin wiggler{
    animation-name: wiggle;
    animation-duration: .4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.wrap {
    width: 35%;
    padding: 1%;
    margin: 1% auto;
    text-align: center;
}

.social{
    font-size: 2.5em;
    height: 50px;
    overflow: hidden;
    border-bottom: 1px solid var(--yellow);
}

.social i{
    position: relative;
    top: 25px;
    margin: 0 10px;
    transition: .5s all;

    @include iconTransition;  

    &:hover{
       top: -6px;
        transition: .5s all;
      }
}

.fb{
    color: #3B5998;
}

.tw{
    color: #09AEEC;
}

.ig{
    color:#7f1db8;
}

.gm{
    color: var(--yellow);
}

.copyright{
    color: #F0F8FF;
}

.copyright a b{
    transition: .5s all;
    color: #F0F8FF;
}
.copyright a b:hover{
    color: #767779;
    transition: .5s all;
}

.content-galery h2{
  margin: 10% auto 0 auto;
}
.container{
  padding: 75px 0;
  margin: 5% auto;
  width: 1140px;
}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}



.thumb{
  margin-bottom: 30px;
}
    
.page-top{
  margin-top:85px;
}
img.zoom {
  width: 100%;
  height: 200px;
  border-radius:5px;
  object-fit:cover;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
}
.transition {
  -webkit-transform: scale(1.2); 
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.modal-header {
  border-bottom: none;
}
.modal-title {
  color:#000;
}
.modal-footer{
  display:none;  
}