* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-size: 62.5%;
    --nav-height: 7.2rem;

    --color-text: #f0f0f0;
    --paragraphy-color: #111111;
    --p-color: #444444;
    --p-color-2: #6b6b6b;

    --background-dourado: #8c7851;
    --headline-dourado: #fffffe;
    --card-paragraphy-dourado: #020826;
    --card-dourado: #eaddcf;

    --background: #f9f4ef;
    --card-background: #fffffe; 
    --headline: #020826;
    --paragraphy: #716040;
}  

html {
    scroll-behavior: smooth;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
  }

  body, input, textarea, button {
    font-family: "Cormorant", serif;
  }
  
  ul {
    list-style: none;
  }

  body {
    font-size: 1.6rem;
    text-align: center;
    font-weight: 700;
  
    overflow: overlay;
  }

  .wrapper {
    width: min(70rem, 100%);
    margin-inline: auto;
  
    padding-inline: 2.4rem;
  }

  .wrapper-home {
    width: min(130rem, 100%);
    margin-inline: auto;
  
    padding-inline: 2.4rem;
  }
  
  section {
    padding-block: 10rem;
  }

/* SHAPE DIVIDER =================== */
.custom-shape-divider-bottom-1706013025 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-1706013025 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 101px;
}

.custom-shape-divider-bottom-1706013025 .shape-fill {
  fill: var(--background);
}

/* HOME =================== */
#home {
  background-image: url(./assets/skyscrapers_-_91744\ \(1080p\)\ -\ frame\ at\ 0m14s.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
}

#home .banner video {
  display: none;
}

.banner {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  .banner .content .left {
    display: flex;
    gap: 5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .banner .content .left img.logo {
    width: 20rem;
    position: relative;
    z-index: 1;
  }

  .banner .right {
    position: relative;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .banner span {
    font-weight: 500;
    color: #e0e0e0;
    font-size: 1.6rem;
  }

  .banner h1 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-text);

    text-shadow: 5px 12px 10px rgba(10, 10, 10, 0.121), 0px -5px 35px rgba(255,255,255,0.3);
  }

  #home .banner a {
    color: #111111;
  }

  #home .right a svg {
    fill: var(--background-dourado);
    filter: drop-shadow(3px 6px 30px #111111);

    transition: all 200ms ease-in-out;
  }

  #home .right a:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(6px 12px 30px #111111);
  }

/* services =================== */
#services {
  background-color: var(--background);
}

#services .content {
  margin-top: -7rem;
}

#services .content h2 {
  font-size: 3rem;
  font-weight: 500;

  margin-bottom: 2rem;
}

#services .content h2 span {
  font-weight: 800;
}

#services .content p {
  font-weight: 500;
  color: var(--p-color);
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

#services .content p strong {
  color: #111111;
  font-weight: 700;
}

#services .content img {
  max-width: 100%;
  border-radius: 1.5rem;
  box-shadow:  20px 20px 60px #b4b4b4,
             -10px -10px 60px #ffffff2f;

  object-fit: cover;
  aspect-ratio: 16/9;
}

#services .areas h2 {
  font-size: 3rem;
  font-weight: 500;

  margin-top: 8rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

#services .areas .cards a .card.button {
  display: flex;
  align-items: center;
  justify-content: center;
}

#services .areas .cards a .card.button h3 {
  font-size: 2rem;
}

#services .areas .cards a .card.button ion-icon {
  font-size: 4rem;
}

#services .areas .cards a .card.button:hover ion-icon {
  animation: movearrow 1s infinite ease-in-out;
}

#services .areas .cards {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 4rem;
}

#services .wrapper a {
  text-decoration: none;
}

#services .areas .cards .card {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  gap: 2rem;

  background-color: #181818;
  border-radius: 1rem;
  padding: 2rem;

  box-shadow: 2px 4px 20px #5f5f5f;
  transition: all 200ms ease-in-out;
  min-height: 27rem;
}

#services .areas .cards .card:hover h3 {
  transition: all 200ms ease-in-out;
  color: #716040;
}

#services .areas .cards .card:hover p {
  color: var(--p-color);
  font-weight: 800;
}

#services .areas .cards .card:hover ion-icon {
  color: var(--background-dourado);

  transition: all 200ms ease-in-out;
}

#services .areas .cards .card:hover {
  background-color: var(--background);
  box-shadow: 4px 8px 30px #7c7c7c63;
  cursor: pointer;
}

#services .areas .cards .card h3 {
  color: var(--headline-dourado);
}

#services .areas .cards .card p {
  color: #c2c2c2;
  font-size: 1.8rem;
  font-weight: 400;
  transition: all 200ms ease-in-out;
}

#services .areas .cards .card ion-icon {
  color: var(--headline-dourado);
  font-size: 3rem;
}

#services .areas .buttonDesktop {
  display: none;
}

/* advogados =================== */
#advogados {
  background-color: var(--background-dourado);
  position: relative;
}

#advogados h2 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--headline-dourado);
  margin-top: 8rem;
  margin-bottom: 3rem;
  text-transform: uppercase;
}

#advogados .content {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

#advogados .advogado .perfil img {
  width: 70%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}

#advogados .advogado .text h3 {
  color: var(--headline-dourado);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

#advogados .advogado .text p {
  font-weight: 300;
  font-size: 1.4rem;
  font-family: 'Poppins', sans-serif;
  color: #e4e4e4;
}

/* shape divider advogados =================== */
.custom-shape-divider-top-1705434002 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1705434002 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

.custom-shape-divider-top-1705434002 .shape-fill {
  fill: var(--background);
}

/* BLOG=================== */
#blog {
  background-color: var(--paragraphy-color);
}

#blog h2 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--background);
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-transform: uppercase;
}

#blog .cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  gap: 8rem;
}

#blog .cards .card {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
}

#blog .cards .card img {
  aspect-ratio: 16/9;
  width: 100%;
  border: 4px solid var(--background-dourado);
  border-radius: 1rem;

  box-shadow:  29px 29px 58px #0a0a0a,
  -29px -29px 58px #181818;
}

#blog .cards .card span {
  font-size: 1.8rem;
  font-weight: 400;
  color: #a1a1a1;
}

#blog .cards .card h3 {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--background);
  font-family: 'Poppins', sans-serif;
}

#blog .cards .card a {
  text-decoration: none;
}

#blog .cards .card a button {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text);
  border: none;
  background: transparent;
  font-size: 1.6rem;
  margin-top: 1rem;
  opacity: .7;
  transition: all 200ms ease-in-out;
}

#blog .cards .card a button ion-icon {
  font-size: 1.6rem;
  color: var(--color-text);

  transition: all 200ms ease-in-out;
}

#blog .cards .card a button:hover {
  cursor: pointer;
  opacity: 1;
}

#blog .cards .card a button:hover ion-icon {
  transform: translateX(4px);
}

/* sobre =================== */
#sobre {
  background-color: var(--background);
}

#sobre .content h2 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--paragraphy-color);
  margin-bottom: 3rem;
  text-transform: uppercase;
  text-align: left;
}

#sobre .content p {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--p-color);
  text-align: left;
}

#sobre .content a {
  text-decoration: none;
}

#sobre .content a button {
  color: var(--background);
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paragraphy-color);
  border: none;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  margin-top: 2rem;
  transition: all 200ms ease-in-out;
}

#sobre .content a button ion-icon {
  font-size: 1.6rem;

  transition: all 200ms ease-in-out;
}

#sobre .content a button:hover {
  cursor: pointer;
  filter: brightness(.9);
}

#sobre .content a button:hover ion-icon {
  transform: translateX(4px);
}

#sobre .content .text {
  margin-bottom: 5rem;
}

#sobre img {
  width: 100%;
  border-radius: 2rem;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* contato =================== */
#contato {
  background-image: url(./assets/Captura\ de\ tela\ 2024-01-22\ 174925.png);
}

#contato header h2 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--background);
  text-transform: uppercase;
  margin-bottom: .8rem;
}

#contato header p {
  font-weight: 500;
  color: var(--background)
}

#contato form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  justify-content: center;

  margin-top: 5rem;
}

#contato form label {
  color: var(--background);
}

#contato form input {
  width: 100%;
  border: none;
  padding: 1.5rem;
  color: #d8d8d8;
  border-radius: 1rem;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.7px);
  -webkit-backdrop-filter: blur(6.7px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#contato input::placeholder {
  color: #bebebe;
}

#contato form input:focus {
  border: 1px solid #fff;
}

#contato form button {
  background-color: var(--background-dourado);
  border: none;
  outline: none;
  color: #d8d8d8;
  transition: all 200ms ease-in-out;
  padding: 1rem 2rem;
  border-radius: 1rem;
  margin-top: 1rem;
}

#contato form button:hover {
  background-color: var(--background);
  color: #111111;
  cursor: pointer;
}

/* footer =================== */
#footer {
  background-color: #111111;
  font-family: 'Poppins', sans-serif;
}

#footer .wrapper {
  padding: 3rem;
}

#footer .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

#footer img.logo {
  width: 12rem;
}

#footer .content ion-icon {
  font-size: 3rem;
  color: #d8d8d8;
}

#footer .content p {
  color: #b1b1b1;
  font-weight: 400;
}

#footer .content .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

#footer .content p.phone {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #9e7f41;
  text-decoration: none;
}

#footer .content a {
  color: #9e7f41;
  text-decoration: none;
}

#footer .content p.phone ion-icon {
  font-size: 2.5rem;
  color: #9e7f41;
}

#footer .content strong {
  color: #d8d8d8;
  font-size: 1.4rem;
}

#footer .foot {
  width: 100%;
  background-color: #161616;
  padding: 1.5rem;
  border-radius: 2rem 2rem 0 0;
}

#footer .foot p {
  color: #c5c5c5;
}

#footer .foot p a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

#footer .foot p a:hover {
  color: #78c900;
}

/* buttonWhatsapp =================== */
#buttonWhatsapp {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;

  opacity: 0;
  visibility: hidden;

  transform: translateY(100%);
  transition: all 300ms ease-in-out;
}

#buttonWhatsapp.show {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

#buttonWhatsapp svg {
  width: 4rem;
  transition: all 300ms ease-in-out;
}

#buttonWhatsapp svg:hover {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .wrapper {
    width: min(80rem, 100%);
  }

  header#home .wrapper-home .banner .content {
    height: 90vh;
  }

  header#home {
    height: 90vh;
  }

  header#home .banner {
      height: 90vh
  }

  section#services .content {
    margin-top: initial;
  }

  section#services .areas .cards {
    grid-template-columns: 1fr 1fr;
  }

  section#advogados .wrapper .content img {
    width: 30rem;
  }

  section#blog .wrapper .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .wrapper {
    width: min(133rem, 100%);
  }

  header#home .banner .content header h1 { 
    font-size: 5rem;
  }

  header#home .wrapper-home .banner .content {
    height: 80vh;
  }

  header#home {
    background-image: inherit;
    background-repeat: inherit;
    background-size: inherit;
    height: 80vh;
  }

  header#home .banner video {
    display: inherit;
  }
  
  header#home .banner {
      width: 100%;
      height: 80vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  header#home .banner .content .left {
    margin-top: 5rem;
  }
  
  header#home .banner video {    
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100vh;
  
    filter: brightness(.5);
  }

  header#home .banner span {
    font-size: 2rem;
  }

  #buttonWhatsapp svg {
    width: 5rem;
    transition: all 300ms ease-in-out;
  }

  section#services .wrapper .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: self-end;
    gap: 10rem;
 }

 section#services .wrapper .content .text {
  text-align: left;
 }

 section#services .wrapper .content .text p {
  font-size: 2.5rem;
 }

 section#services .wrapper .text h2,
 section#services .wrapper .areas h2,
 section#sobre .wrapper h2,
 section#blog .wrapper h2 {
  font-size: 3rem;
  text-align: left;
 }

 section#sobre .wrapper p {
  text-align: left;
 }

 section#services .wrapper .areas {
  margin-top: 15rem;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }
  
 section#services .wrapper .areas h2 {
  margin-bottom: 10rem;
 }

 section#services .areas .cards {
  grid-template-columns: 1fr 1fr 1fr;
}

section#services .areas .cards a.button {
  display: none;
}

section#services .areas .buttonDesktop {
  display: initial;
}

section#services .areas .buttonDesktop button {
  margin-top: 5rem;
  padding: 1.5rem 2.5rem;
  font-weight: 500;
  color: var(--headline-dourado);
  background-color: var(--paragraphy-color);
  box-shadow: 2px 2px 10px #00000027;
  border: none;
  border-radius: 1rem;

  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: .5rem;

  transition: all 200ms ease-in-out;
}

section#services .areas .buttonDesktop button:hover {
  cursor: pointer;
  background-color: var(--card-background);
  color: var(--background-dourado);
}

section#advogados .wrapper h2 {
  display: none;
}

section#advogados .wrapper .content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

section#advogados .wrapper .content img {
  width: 40rem;
}

section#advogados .wrapper .content h3 {
  font-size: 3rem;
}

section#advogados .wrapper .content p {
  font-size: 1.8rem;
}

section#blog .wrapper .cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

section#blog .wrapper .cards .card {
  text-align: left;
  align-items: start;
}

section#blog .wrapper .cards .card h3 {
  font-size: 2rem;
}

section#blog .wrapper .cards .card img {
  border: .5px solid var(--background-dourado);
}

section#sobre .wrapper p {
  font-size: 2.5rem;
}

section#sobre .wrapper .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}

section#sobre .wrapper .content img {
  aspect-ratio: 16/10;
}

section#sobre .wrapper .content .swiper {
  width: 100%;
}

section#contato {
  background-image: inherit;
}

section#contato .wrapper {
  display: grid;
  grid-template-areas: "A B";
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 10rem;
}

section#contato .wrapper input {
  width: 90%;
}

section#contato .wrapper header {
  grid-area: B;
}

section#contato .wrapper header h2 {
  font-size: 3.5rem;
}

section#contato .wrapper header p {
  font-size: 1.8rem;
}

section#contato .wrapper form {
  grid-area: A;
}

section#contato .wrapper button {
  font-size: 1.8rem;
}

footer#footer .wrapper {
  padding: 4rem;
}

footer#footer .wrapper .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
}

@media (min-width: 1300px) {
  .wrapper {
    width: min(150rem, 100%);
  }
}

@media (min-width: 1700px) {
  .wrapper {
    width: min(170rem, 100%);
  }

  :root {
    font-size: 65%;
  }
}

@keyframes movearrow {
  50% {
    transform: translateX(5px);
  }
}