/* base main */

/* color */


.color-w{
    color: #fff;
}

.color-pblack{
    color: var(--MainParagraphDark);
}

.color-pgray{
    color: var(--ParagraphGrey);
}

/* basic paragraph/title/section */

.section-sub-title-container{
    display: flex;
    flex-direction: initial;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.sub-title-icon{
    width: 50px;
    height: 17px;
    background-color: var(--MainColor);
    border-radius: 25px;
}

.sub-title-text{
    color: var(--MainParagraphDark);
    font-size: 18px;
    font-weight: 700;
}

.section-title{
    font-size: 48px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
}

.second-title {
    font-size: 32px;
    font-weight: 600;
    line-height: normal;
}

.paragraph{
    font-size:16px;
    font-weight: 500;
    line-height: 143%;
}

.grey-section{
    background-color: var(--MainLightGrey);
    padding: 80px 0;
}

.white-section{
    background-color: #fff;
    padding: 80px 0;
}

@media only screen and (max-width: 800px) {

    .section-title {
        font-size: 32px;
        line-height: 40px;
    }

    .grey-section{
        padding: 40px 0;
    }

    .white-section{
        padding: 40px 0;
    }
}

/* main hero */

.swiper.swiperHero {
    height: 100%;
}

.hero-bg-1{
    background:url(../images/index-img/main-hero-background-1.webp);
    background-repeat: no-repeat;
    background-position: initial;
    background-size: cover;
}

.hero-bg-2{
    background:url(../images/index-img/main-hero-background-2.webp);
    background-repeat: no-repeat;
    background-position: initial;
    background-size: cover;
}

.hero-bg-3{
    background:url(../images/index-img/main-hero-background-3.webp);
    background-repeat: no-repeat;
    background-position: initial;
    background-size: cover;
}

.main-hero {
    height: 640px;
}

.hero-slide-subtitle {
    color: var(--MainColor);
    font-size: 24px;
    font-weight: 700;
}

.hero-slide-container {
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    width: 85%;
    max-width: 1000px;
    align-items: center;
    margin: auto;
    text-align: center;
}

.hero-title {
    color: #FFF;
    font-size:64px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px; /* 112.5% */
    text-transform: uppercase;
}

.hero-paragraph {
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
}

.hero-buttons-div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-button-produtos {
    height: fit-content;
    width: fit-content;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--MainDark);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    transition: .3s ease-in-out;
}

.hero-button-produtos path{
    transition: .3s ease-in-out;
}

.hero-button-produtos:hover {
    background-color: var(--MainColor);
    color: var(--MainDark);
}

.hero-button-produtos:hover path{
    stroke: var(--MainDark);
}

.hero-button-servicos {
    height: fit-content;
    width: fit-content;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--MainColor);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--MainDark);
    transition: .3s ease-in-out;
}

.hero-button-servicos path{
    transition: .3s ease-in-out;
}

.hero-button-servicos:hover {
    background-color: var(--MainDark);
    color: var(--MainColor);
}

.hero-button-servicos:hover path{
    stroke: var(--MainColor);
}

.swiper-hero-prev,
.swiper-hero-next {
  cursor: pointer;
  position: absolute;
  top: calc(50% - 48px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.04),
    0px 8px 32px 0px rgba(0, 0, 0, 0.08);
  z-index: 999;
  opacity: 1;
  background-color: #fff;
}

.swiper-hero-prev {
  left: 5%;
}

.swiper-hero-next {
  right: 5%;
}

.swiper-pagination {
    position: relative!important;
    bottom: 0!important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #F4AC19;
    opacity: 1;
}

span.swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.7;
}

@media only screen and (max-width: 1200px) {
    .swiper-hero-prev {
      left: 2%;
    }
    
    .swiper-hero-next {
      right: 2%;
    }
}

@media only screen and (max-width: 1100px) {

    .hero-title {
        font-size:48px;
        line-height: 56px;
    }
}

@media only screen and (max-width: 800px) {

    .hero-title {
        font-size:40px;
        line-height: 48px;
    }
    
    .hero-paragraph {
        font-size: 16px;
    }

    .hero-slide-container {
        gap: 16px;
        width: 95%;
    }
}
@media only screen and (max-width: 500px) {
    
    .main-hero {
        height: 540px;
    }
    
    .hero-title {
        font-size:32px;
        line-height: 40px;
    }
    
    .swiper-hero-prev,
    .swiper-hero-next {
        display:none;
    }
}

@media only screen and (max-width: 400px) {

    .hero-buttons-div {
        flex-direction:column;
    }

    .hero-button-produtos,
    .hero-button-servicos{
        width: 120px;
    }
}

/* Quem Somos */
.quem-somos-content {
    position: relative;
    z-index: 2;
    background-color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-left: 25px solid var(--MainColor);
    margin-top: -144px;
    min-height: 450px;
    padding: 24px 64px;
}

.quem-somos-sub-title-container{
    display: flex;
    gap: 16px;
    align-items: center;
}

.quem-somos-text-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.quem-somos-title {
    color: var(--MainParagraphDark);
    font-size: 36px;
    font-weight: 600;
    line-height: normal;
}

.quem-somos-topics-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quem-somos-topic {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 8px;
}

.quem-somos-button {
    height: fit-content;
    width: fit-content;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--MainColor);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--MainDark);
    transition: .3s ease-in-out;
}

.quem-somos-button  path{
    transition: .3s ease-in-out;
}

.quem-somos-button:hover {
    background-color: var(--MainDark);
    color: var(--MainColor);
}

.quem-somos-button:hover path{
    stroke: var(--MainColor);
}

.quem-somos-topics-division {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.quem-somos-topic-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 165%;
    margin-bottom: 8px;
}

@media only screen and (max-width: 1100px) {
    .quem-somos-content {
        grid-template-columns:1fr;
        gap: 32px;
        padding: 40px 64px;
    }
}

@media only screen and (max-width: 800px) {
    .quem-somos-content {
        border-left: 16px solid var(--MainColor);
        margin-top: -120px;
        padding: 40px 24px;
    }
    .quem-somos-text-container {
        gap: 16px;
    }
    .quem-somos-title {
        font-size: 28px;
    }
}

@media only screen and (max-width: 500px) {

    .quem-somos-topics-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .quem-somos-content {
        border-left: 8px solid var(--MainColor);
        position: inherit;
        margin: auto;
        padding: 40px 16px;
    }
}

/* produtos */
.produtos-title-container{
    max-width: 925px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: auto;
}

.produtos-title-container p {
    max-width: 750px;
    margin: auto;
}

.produtos-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin: 80px 0;
}

.produtos-card {
    display: flex;
    flex-direction: column;
    background: #FFF;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.25);
    max-width: 413px;
}

.produtos-card img {
    display: flex;
}

.produtos-card-text-container {
    padding: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: -webkit-fill-available;
    justify-content: center;
}

.produtos-card-subtitle {
    color: var(--ParagraphGrey);
    font-size: 12px;
    font-weight: 700;
}

.produtos-card-title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
} 

.produtos-button{
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--MainColor);
  padding: 16px 24px;
  justify-content:space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--MainDark);
  transition: .3s ease-in-out;
  margin: auto;
}

.produtos-button path{
    transition: .3s ease-in-out;
}

.produtos-button:hover{
  background-color: var(--MainDark);
  color: var(--MainColor);
}

.produtos-button:hover path{
    stroke: var(--MainColor);
}

@media only screen and (max-width: 1050px) {
    .produtos-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 800px) {
    .produtos-content {
        margin: 40px 0;
        gap:24px;
    }
}

@media only screen and (max-width: 550px) {
    .produtos-content {
        grid-template-columns: 1fr;
    }
    
    .produtos-card {
        margin: auto;
    }
}

@media only screen and (max-width: 350px) {
    .produtos-button{
      padding: 16px;
    }
}

/* servicos */

.servicos-title-container{
    max-width: 900px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: auto;
}

.servicos-card {
    display: flex;
    flex-direction: column;
}

.servicos-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 32px;
    margin-top: 80px;
}

.servcard-1, .servcard-2 {
    width: 49%;
}

.servcard-3, .servcard-4, .servcard-5 {
    width: 32%;
}

.servicos-card-text-container {
    padding: 16px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-evenly;
}

.servicos-img{
    min-height: 227px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.serv-img1{
    background-image:url(../images/index-img/manutencao-preventiva.webp);
}

.serv-img2{
    background-image: url(../images/index-img/assistencia-tecnica.webp);
}

.serv-img3{
    background-image:url(../images/index-img/montagem-de-equipamentos.webp);
}

.serv-img4{
    background-image:url(../images/index-img/pecas-de-reposicao.webp);
}

.serv-img5{
    background-image:url(../images/index-img/manutencao-corretiva.webp);
}

.servicos-card-subtitle {
    color: var(--ParagraphGrey);
    font-size: 12px;
    font-weight: 700;
}

.servicos-card-title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
}

@media only screen and (max-width: 1100px) {
    .servcard-3, .servcard-4, .servcard-5 {
        width: 49%;
    }
}

@media only screen and (max-width: 1000px) {
    .servcard-1, .servcard-2, .servcard-3, .servcard-4, .servcard-5 {
        width: 48%;
    }
}

@media only screen and (max-width: 800px) {
    .servicos-content {
        margin-top: 40px;
        row-gap: 24px;
    }
}

@media only screen and (max-width: 500px) {
    .servcard-1, .servcard-2, .servcard-3, .servcard-4, .servcard-5 {
        width:100%;
    }
}

/* nossos destaques */

.destaques-section{
    background-color: var(--MainParagraphDark);
    padding: 80px 0;
}

.destaques-title-container {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.destaques-sub-title-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.destaques-title-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 360px;
    justify-content: center;
}

.destaques-sub-title-text {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}

.destaques-title-paragraph {
    color: #FFF;
    font-size:20px;
    font-weight: 700;
}

.destaques-title-paragraph-content {
    max-width: 500px;
    width: 50%;
    min-height: 140px;
    border-left: 22px solid var(--MainColor);
    padding: 40px;
    display: flex;
    align-items: center;
    background-color: #1F1F1F;
}

@media only screen and (max-width: 800px) {
    .destaques-title-container {
        flex-direction:column;
    }
    
    .destaques-title-paragraph-content {
        width: auto;
        border-left: 16px solid var(--MainColor);
    }

    .destaques-section{
        padding: 40px 0;
    }
    
}

@media only screen and (max-width: 600px) {
    
    .destaques-title-paragraph-content {
        padding:24px;
    }
}

@media only screen and (max-width: 400px) {
    
    .destaques-title-paragraph-content {
        border-left: 16px solid var(--MainColor);
        padding: 16px;
    }

    .destaques-title-paragraph {
        font-size:16px;
    }
}

/* destaque swiper */

.swiper-container{
    width: 90%;
    margin: 0 auto;
    margin-top: 80px;
}

.destaqueSwiper .swiper-slide.Scard-slide {
    height: auto;
}

.Scard-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.destaque-Scard {
    height: 100%;
    width: 95%;
    max-width: 406px;
    background-color: #fff;
}

.destaque-Scard-container {
    padding: 8px;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
}

.destaque-Scard-subtitle {
    position: relative;
    right: -65%;
    top: -48px;
    margin-bottom: -40px;
    display: flex;
    width: 120px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: var(--MainColor);
    color: var(--MainParagraphDark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    outline: 2px solid #fff;
}

.destaque-Scard-text-container {
    padding: 24px 16px 16px 16px;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.destaque-Scard-container img {
    display: flex;
}

.destaque-scard-title {
    color:#000;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.destaque-scard-separator {
    width: auto;
    height: 1px;
    background-color: #939393;
    margin: 16px 0;
}

.destaque-scard-paragraph {
    color: #5C5C5C;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 143%;
}

.destaque-scard-button{
  margin-top: 24px;
  height: fit-content;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: var(--MainParagraphDark);
  transition: .3s ease-in-out;
}

.destaque-scard-button path{
    transition: .3s ease-in-out;
}

.destaque-scard-button:hover{
    background-color: var(--MainColor);
    color: var(--MainParagraphDark);
}

.destaque-scard-button:hover path{
    stroke: var(--MainParagraphDark);
}

.destaque-swiper-prev,
.destaque-swiper-next {
  cursor: pointer;
  position: absolute;
  top: calc(50% - 48px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.04),
    0px 8px 32px 0px rgba(0, 0, 0, 0.08);
  z-index: 999;
  opacity: 1;
  background-color: var(--MainColor);
}

.destaque-swiper-prev {
  left: 0%;
}

.destaque-swiper-next {
  right: 0%;
}

@media only screen and (max-width: 800px) {
    .swiper-container{
        width: 95%;
        margin-top: 40px;
    }
    .destaque-Scard-subtitle {
        right: -60%;
    }
}

@media only screen and (max-width: 400px) {
    .destaque-Scard-subtitle {
        right: -55%;
    }
}

/* porque nos */

.porque-nos-title-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
    max-width: 950px;
    margin: auto;
}

.porque-nos-content {
    margin: auto;
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.porque-nos-card {
    background-color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.porque-nos-card-count{
    color: var(--MainColor);
    font-size:48px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
}

.porque-nos-card li {
    margin-left: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 143%;
    color: var(--ParagraphGrey);
}

@media only screen and (max-width: 1100px) {
    .porque-nos-card {
        padding: 32px;
        gap: 24px;
    }
}

@media only screen and (max-width: 1000px) {
    .porque-nos-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .porque-nos-card {
        padding: 24px;
        gap: 16px;
    }

}

@media only screen and (max-width: 550px) {
    .porque-nos-content {
        grid-template-columns: 1fr;
    }
}