/* Theme Name: Monotipia
Text Domain: Monotipia
Version:4.2 
Description: Tema Criado em parceria com o Estúdio Monotipia, desenvolvido por Luca Monticelli (lmonticelli@gmail.com)
Tags: responsive,wordpress theme, bootstrap
Author: Luca Monticelli
Author URI: https://estudiomonotipia.com/
heme URI:  https://estudiomonotipia.com/ */

html {
  margin-top: 0 !important;
}
#wpadminbar {
  position: fixed !important;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  font-family: 'HostGrotesk'!important;
}
.fonte-400{font-weight: 400;}
.fonte-500{font-weight: 500;}
.fonte-600{font-weight: 600;}
.fonte-700{font-weight: 700;}
.fonteInter,
.fonteInter p{font-family: Inter!important;}
p {
  font-size: 16px;
  line-height: 1.78;
  color: #3f3f45FF;
}
.fs-88{font-size: 88px;}
.fs-72{font-size: 72px;}
.fs-64{font-size: 64px;}
.fs-58{font-size: 58px;}
.fs-48{font-size: 48px;}
.fs-44{font-size: 44px;}
.fs-40{font-size: 40px;}
.fs-38{font-size: 38px;}
.fs-30{font-size: 30px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px;}
.fs-14, .fs-14 p{font-size: 14px;}
.fs-12{font-size: 12px;}

.letter-spacing-1{letter-spacing: 1px;}

header {
  height: 80px;
  z-index: 9999;
  background-color: white;
}
main {
  padding-top: 90px;
}
.logo img {
  width: 152px;
  object-fit: contain;
}

.menu a {
  font-family: 'HostGrotesk';
  font-size: 14px;
  font-weight: 700;
  color: #000000FF;
  line-height: 16px;
}

.efeito-vidro {
  background: rgba( 0, 0, 0, 0.20 );
  backdrop-filter: blur( 3.5px );
  -webkit-backdrop-filter: blur( 3.5px );
}

#monotipia {
  border-top: 1px solid #0092d4FF;
}

.btn-obras {
  text-decoration: none;
  border: 1px solid #a9a9b2FF;
  padding: 6px 12px;
  border-radius: 50px;
  color: #1f1f20FF;
  background-color: #fff;
}
.btn-obras.active {
  background-color: #0081ccFF;
  border-color: #0081ccFF;
  color: #fff;
}
.btn-obras:hover {
  background-color: #0081ccFF;
  border-color: #0081ccFF;
  color: #fff;
  opacity: 1;
}
.btn-obras svg path,
.btn-obras svg rect {
  stroke: #0081cc!important;
  stroke-width: 0;
}
.btn-obras:hover svg path,
.btn-obras:hover svg rect,
.btn-obras.active svg path {
  stroke: #fff!important;
}

.grey-300 {color: #d7d7dcFF}
.grey-500 {color: #5f5f66FF;}
.grey-600 {color: #3f3f45FF;}
.grey-700 {color: #1f1f20FF;}
.grey-800 {color: #000000FF;}
.bg-grey-600 {background-color: #3f3f45FF;}

.btn-outline-dark:hover span {
  color: #fff;
}
.btn-outline-white {
  border: 1px solid #fff;
}

#contato img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}
#contato h2 {
  line-height: 1.1;
}

#carouselHome {
    height: 85vh; /* altura total da tela */
}
#carouselHome .carousel-item,
#carouselHome .carousel-item img {
    height: 85vh;
}
#carouselHome .carousel-item img {
    object-fit: cover; /* cobre o espaço sem distorcer */
    filter: blur(0px) brightness(0.9);
    opacity: 0.9;
}
#titulo_home {
  z-index: 9;
  border: 1px solid white;
  border-radius: 8px;
  left: 50px;
  bottom: 50px;
}
#titulo_home p {
  color: #fff;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 0;
}
#titulo_home h1 {
  color: #fff;
  font-weight: 600;
  font-size: 72px;
}

.swiper {
  width: 100%;
  height: 600px;
}
.swiper-button-prev {
    top: 60px!important;
    right: 100px!important;
    left: auto!important;
}
.swiper-button-next {
    top: 60px!important;
    right: 66px!important;
}
.swiper-button-prev,
.swiper-button-next {
  width: 30px!important;
  height: 30px!important;
}
.swiper-button-prev:after, .swiper-button-next:after {
  content: ''!important;
}
.swiper-slide img {
  height: 380px;
  width: 100%;
  object-fit: cover;
}
.icone-hover {
    visibility: hidden;
}
.card {
  overflow: hidden;
}
.card .imagem {
  height: 380px;
  overflow: hidden;
  border-radius: 8px;
} 
.card img {
  display: block; /* remove espaço de inline-block */
  width: 100%; /* garante que sempre ocupe todo o card */
  height: 380px;
  transition: transform 0.4s ease; /* animação suave */
  border-radius: 8px;
}
.card:hover img {
  transform: scale(1.06); /* aumenta em 10% */
}
.card:hover .icone-hover {
    visibility: visible;
}

.carousel-control-prev {
  bottom: 50px !important;
    right: 115px;
    border: 1px solid white !important;
    height: 56px;
    position: absolute !important;
    top: inherit !important;
    width: 56px !important;
    border-radius: 4px;
    left: inherit !important;
}
.carousel-control-next {
    bottom: 50px!important;
    right: 50px!important;
    border: 1px solid white!important;
    height: 56px;
    position: absolute!important;
    top: inherit!important;
    width: 56px!important;
    border-radius: 4px;
}

#sobre-home {
  padding: 100px 0 200px;
}
#banner-home {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 700px;
}
#banner-home p {
  font-size: 104px;
  line-height: 1;
}
#contratar-home {
  padding: 80px 16px;
}
#contratar-home h2 {
  color: #000000FF;
  font-size: 48px;
  line-height: 1;
}
#contratar-home .separador {
  border-top: 1px solid #17afefFF;
  /* width: 670px; */
}
#contratar-home img {
    background: #EFEFF4;
    padding: 25px;
    border-radius: 4px;
}
#conteudo-contratar-home {
  margin-top: 70px;
  padding-left: 125px;
}

.main-image img {
  height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
#conteudo-obra {
  padding-top: 30px;
  margin-top: 50px;
  border-top: 2px solid #D7D7DC;
}
.icone-obra {
  background-color: #efeff4FF;
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

#banner-obra {
  background-color: #95E9B5;
  margin-bottom: 120px;
}

.myGallery {
    padding: 0 16%; /* mostra 16% de cada lado */
    box-sizing: border-box;
    height: 500px; /* pode mudar o valor livremente */
}

.myGallery .swiper-slide {
    width: 68% !important; /* imagem central ocupa 68% */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container para manter border-radius */
.image-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden; /* garante o corte */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* mantém proporção */
    display: block;
    cursor: pointer;
}

/* Bullets abaixo da galeria */
.swiper-pagination {
    position: static!important;
    margin-top: 8px;
    text-align: center;
}

.swiper-pagination-bullet {
    background: #666;
    opacity: 0.6;
    width: 6px;
    height: 6px;
}

.swiper-pagination-bullet-active {
    width: 20px!important;
    border-radius: 100px!important;
}

#fotos {
  margin-bottom: 100px;
}

.swiper-valores .image {
  width: 370px;
}
.swiper-valores .conteudo {
  width: calc(100% - 370px);
  padding-right: 100px;
  border-radius: 0 6px 6px 0;
}
.swiper-valores .swiper-slide img {
  height: 500px;
  border-radius: 6px 0 0 6px;
}
.swiper-valores .swiper-button-next {
      top: 70px !important;
    right: 165px!important;
}
.swiper-valores .swiper-button-prev {
    top: 70px !important;
    right: 200px !important;
}
#historia .container {
  width: 850px;
}
#historia .container img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}
#historia .container video {
  width: 200px;
  height: 200px;
}

.w-55 {
  width: 55%;
}

.sidebar-mobile {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar-mobile a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar-mobile a:hover {
  color: #f1f1f1;
}

.sidebar-mobile .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

#banner-obras {
  padding-top: 170px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#banner-obras h1 {
  font-weight: 600;
}

a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

.w3-sidebar {
  z-index: 9999!important;
}

.btn-vendas {
  background: #2cd46b80;;
}

.fundo-redes-sociais {
  background-color: #efeff4;
}

.page-template-sobre main {
  background-color: #EFEFF4;
}

#menuSidebar {
  background-color: #0072b5FF!important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar-mobile {padding-top: 15px;}
  .sidebar-mobile a {font-size: 18px;}
}

@media screen and (max-width: 768px) {
  #carouselHome,
  #carouselHome .carousel-item,
  #carouselHome .carousel-item img {
      height: 60vh;
  }
  /* .w3-sidebar {
    padding-top: 120px;
  } */
  #icone-sobre {
    width: 138px;
    bottom: -200px;
    left: -30px;
  }
  #sobre-home {
    padding: 60px 0 100px;
  }
  #sobre-home p.fs-30,
  #contratar-home p.fs-30 {
    font-size: 20px;
  }
  #contratar-home h2,
  #sobre h1 {
    font-size: 32px;
  }
  #contratar-home h2 br {
    display: none;
  }
  #titulo_home {
    left: 0;
    border: none;
  }
  #titulo_home h1 {
    font-size: 44px;
    color: #000000FF;
  }
  #titulo_home p {
    font-size: 20px;
    color: #5f5f66FF;
  }
  #banner-home p {
    font-size: 44px;
    text-align: center;
  }
  #obras-home {
    padding-top: 100px;
  }
  .swiper-obras p.fs-40 {
    font-size: 20px;
  }
  .swiper-obras h2.fs-58 {
    font-size: 40px;
  }
  .swiper-obras .swiper-wrapper {
    margin-top: 70px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 156px!important;
  }
  .swiper-button-next {
    right: 0!important;
  }
  .swiper-button-prev {
    right: 34px!important;
  }
  #conteudo-contratar-home {
    padding-left: 16px;
  }
  #conteudo-contratar-home p {
    font-size: 20px;
  }
  #contato h2 {
    font-size: 32px;
    margin: 32px 0;
  }
  #contato p {
    margin-bottom: 30px;
  }
  #monotipia p {
    text-align: center;
  }
  .swiper-valores .image {
    width: 100%;
  }
  #historia {
    padding: 60px 0;
  }
  #historia p.fs-48 {
    font-size: 30px;
  }
  #historia svg {
    width: 34px;
    height: 31px;
  }
  #historia .container {
    width: 100%;
  }
  .card .imagem {
    height: 340px;
  }
  #banner-obras p {
    font-size: 20px;
  }
  #banner-obras h1 {
    font-size: 30px;
        font-weight: 600;
    padding-right: 50px;
  }
  #banner-obras {
    padding-top: 120px;
  }
}

@media screen and (min-width: 769px) {
  #sobre {
    padding-bottom: 150px;
  }
  #contratar-home .separador {
    width: 670px;
  }
  #icone-sobre {
    bottom: -60px;
    width: 270px;
    height: auto;
  }
  #obras-home {
    padding: 70px 0 0;
  }
}