header {
  display: flex;
  width: 100%;
  height: 120px;
  padding: 20px 100px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  background-color: var(--green);
  transition: 0.5s;
}

.logo {
  width: 350px;
  height: auto;
  transition: .5s;
}

header a {
  color: var(--text-light);
}

header.rolar {
  background-color: #77b4a8;
  padding: 10px 150px;
  height: 60px;
}

header.rolar .logo {
  width: 150px;
}

header.rolar #div-navbar-buttons {
  width: 150px;
  justify-content: space-between;
}

header nav {
  display: flex;
  width: 450px;
  height: auto;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
}

#div-navbar-buttons {
  display: flex;
  width: 350px;
  height: auto;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
  transition: .5s;
}

#div-navbar-buttons img {
  width: 80%;
}

#div-navbar-buttons img {
  width: 75%;
}

#hero {
  height: 95vh;
  top: 100px;
  background-image: url(../images/bg-main-1.JPG);
  background-repeat: no-repeat;
  background-size: cover;
}

#opacity {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: left;
  align-items: center;
  background-color: #00000066;
}

#hero-aside {
  display: grid;
  gap: 20px;
  width: 50%;
  max-width: 100%;
  margin: 200px 0px 200px 100px;
}

#hero-section {
  display: none;
}

#hero-aside h1,
p,
a {
  color: var(--text-light);
}

#hero-aside h1 {
  font-size: var(--title-size);
  font-weight: bold;
}

#hero-aside p {
  font-size: 30px;
}

#hero-aside a {
  display: flex;
  width: 340px;
  height: 90px;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  background-color: var(--green);
  border-radius: 10px;
}

#tratamentos {
  display: flex;
  width: 100%;
  background-color: #d9d9d920;
  justify-content: space-between;
  padding: 60px 100px 60px 100px;
}

#tratamentos-aside {
  display: grid;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

#tratamentos-aside h1 {
  font-size: var(--title-size);
  color: var(--green);
}

#tratamentos-aside h2 {
  font-size: 25px;
  font-weight: normal;
  text-justify: distribute;
  color: black;
}

#tratamentos-aside ul {
  list-style: none;
  font-size: 20px;
}

.tratamentos-span {
  font-weight: bold;
  font-size: 20px;
}

#tratamentos-images {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#tratamentos-images img {
  width: 230px;
  height: auto;
}

/* .a.aparecer {
  width: 230px;
  height: auto;
  filter: none;
  transition: .6s;
  margin: 20px;
  border-radius: 50px;
  left: 0%;
} */

.tratamentos-images-center {
  display: block;
  max-width: 270px;
  margin-right: 0px;
  justify-content: center;
}

.tratamentos-photos {
  margin: 20px;
  border-radius: 50px;
  /* position: relative;
  filter: blur(10px);
  transition: .6s; */
}

#dra-alessandra {
  display: flex;
  width: 100%;
  padding: 60px 100px 60px 100px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background-color: var(--doricWhite);
}

#dra-alessandra-image {
  width: 630px;
  height: auto;
  border-radius: 20px;
}

#dra-alessandra-aside {
  display: block;
  width: 60%;
  justify-content: right;
  align-items: center;
}

#dra-alessandra-aside h1 {
  font-size: var(--title-size);
  color: var(--green);
}

#dra-alessandra-aside h2 {
  font-size: 30px;
  font-weight: normal;
}

#list {
  display: grid;
  list-style: none;
  gap: 20px;
}

#list li {
  padding: 10px;
  display: flex;
  gap: 20px;
  width: 100%;
  font-size: 25px;
  justify-content: left;
  align-items: center;
  height: 60px;
  background-color: var(--doricWhitefull);
}

.list-image {
  width: 32px;
  height: 42px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/workspace_premium.svg);
  color: black;
}

#sobre-nos {
  width: 100%;
  display: flex;
  gap: 100px;
  align-items: center;
  background-color: #d9d9d960;
  padding: 60px 100px 60px 100px;
}
#texts {
  display: flex;
  width: 70%;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  align-items: start;
}

#texts h1 {
  font-size: var(--title-size);
  color: var(--green);
}

#texts p {
  font-size: 20px;
  color: black;
  text-align: justify;
  text-justify: distribute;
}

/*Outro*/
.carousel-container {
  width: 50%;
  max-width: 750px;
  height: 500px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel__slide {
  display: none;
  width: 100%;
  height: 100%;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.carousel__slide.active {
  display: block;
}

.carousel__prev,
.carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 5px;
}

.carousel__prev {
  left: 10px;
}

.carousel__next {
  right: 10px;
}



#depoimentos {
  display: flex;
  padding: 60px 100px 60px 100px;
  gap: 100px;
  flex-direction: column;
  background-color: #d9d9d990;
  justify-content: center;
  align-items: center;
}

#depoimentos h1 {
  font-size: var(--title-size);
  color: var(--green);
}

#depoimentos-a {
  display: flex;
  width: 340px;
  height: 90px;
  background-color: var(--green);
  justify-content: center;
  align-items: center;
  color: var(--text-light);
  font-size: 25px;
  border-radius: 20px;
}

#contato {
  display: flex;
  padding: 60px 100px 60px 100px;
  background-color: #d9d9d9BB;
  justify-content: space-between;
  align-items: center;
}

#contato-aside{
  width: 50%;
  border-right: 3px solid black;
}

#contato h1 {
  font-size: 30px;
  color: var(--green);
}

#contato a {
  margin-left: 20px;
}

#contato a img{
  width: 30px;
}

.contato-text {
  display: flex;
  margin-top: 25px;
  justify-content: start;
  align-items: start;
}

.contato-text img {
  height: auto;
  width: 20px;
  margin-top: 2px;
}

.contato-text p {
  font-size: 17px;
  color: var(--text-dark);
}

footer {
  width: 100%;
  background-color: var(--green);
  padding: 20px 100px 20px 100px;
}

.footer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 100%;
}

.footer-image {
  width: 300px;
  height: auto;
}

.footer-image img {
  width: 100%;
  height: 100%;
}
.footer-text {
  display: flex;
  justify-content: center;
  width: 600px;
  height: auto;
}

.footer-text p {
  color: var(--text-dark);
  font-size: auto;
}