.nav-bt {
  margin-top: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.navbar-img {
  width: 100%;
}
.navbar-img-mobile {
  display: none;
  width: 100%;
}

/* --------------- SOBRE MIM - DESKTOP ---------------*/
.sobre-mim {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
}

.sobre-mim-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.sobre-mim-quadro {
  position: relative;
  background-color: var(--color-5);
  width:300px;
  height: 400px;
  margin: -20px 0 0 20px;


}

.sobre-mim-img {
  position: absolute;
  width: 300px;
  height: 400px;
  margin: 20px 0 0px -20px;
  
  background-repeat: no-repeat;
  background-size: cover;

}

.sobre-mim-text {
  min-width: 300px;
  max-width: 700px;
  width: 50%;
  text-align: left;
}

/* ------------------ SOBRE MEUS SERVIÇOS ------------------- */
.meus-servicos {
  background-color: var(--color-5);
  height: auto;
}

.meus-servicos-text {
  margin-top: 50px;
  color: var(--color-font-1);
  text-align: left;

}

.meus-servicos-text p {
  margin-block-start: 0.4em;
  font-weight: 400;
  text-align: left;
}

.meus-principais-servicos {
  margin-top: 50px;
}

.meus-principais-servicos-box {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  height: 730px;
}

.meus-principais-servicos-box-card {
  width: 32%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  text-align: left;

}

.meus-principais-servicos-box-card-img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #414141;
  width: 100%;
  height: 12vw;



}

.meus-principais-servicos-box-card-text {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  height: auto;
  font-size: 1.1em;
}

.meus-principais-servicos-box-card-text-title {
  color: var(--color-3);
  font-weight: 700;
  font-size: 1.6em;
}

.meus-principais-servicos-box-card-text-description {
  color: #414141;
  font-size: 1em;

}

.meus-principais-servicos-box-card-saiba-mais {

  text-decoration: none;
  color: var(--color-3);
  font-weight: 700;
}

/* --------------------- blog -------------------------------*/

.blog {
  margin-top: 50px;

}

.blog-box {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;

}

.box-seta-esquerda,
.box-seta-direita {
  height: 20vw;
  width: 50px;
  display: flex;
  align-items: center;


}

.box-seta-esquerda {
  justify-content: left;

}

.box-seta-direita {

  justify-content: right;

}

.seta-esquerda {
  width: 16px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: -4px;
}

.blog-seta-esquerda {

  position: relative;
  width: 8px;
  height: 15px;
  background-color: #ddd;
  rotate: 45deg;

}

.blog-seta-esquerda span {

  position: absolute;
  width: 8px;
  height: 15px;
  background-color: #ddd;
  rotate: 90deg;
  margin: 4px 0 0 4px;

}

.seta-direita {
  width: 16px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 8px;
}



.blog-seta-direita {

  position: relative;
  width: 8px;
  height: 15px;
  background-color: #ddd;
  rotate: -135deg;

}

.blog-seta-direita span {

  position: absolute;
  width: 8px;
  height: 15px;
  background-color: #ddd;
  rotate: 90deg;
  margin: 4px 0 0 4px;

}

.blog-gallery {

  display: flex;

  overflow-x: scroll;


}

.blog-gallery::-webkit-scrollbar {
  display: none;

}

.blog-sp {
  padding: 0 1vw;
  display: flex;
  align-items: center;
  justify-content: center;

}

.blog-bg {
  width: 40vw;
  min-width: 300px;
  max-width: 600px;
  height: 20vw;
  min-height: 300px;
  max-height: 350px;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-border {
  width: 80%;
  height: 80%;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-color: #ffffff;

  border-width: 3px;


}

.blog-border-bottom {
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-bottom-style: solid;
  border-image: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #ffffff00 40%, #ffffff00 60%, #ffffff 60%, #ffffff 100%) 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-style-1);
  color: #ffffff;
  font-size: 3em;
  font-weight: 700;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.video-frame {
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 650px;

}

/* Depoimento */
.depoimento-gallery {

  display: flex;

  overflow-x: scroll;


}

.depoimento-gallery::-webkit-scrollbar {
  display: none;

}

.depoimento-bg {
  width: 40vw;
  min-width: 300px;
  max-width: 600px;
  height: 20vw;
  min-height: 200px;
  max-height: 350px;
  background-color: #efefef;
  color: #414141;
  border-radius: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 15px;
  box-sizing: border-box;
  font-size: 1.2em;
  font-weight: 600;

}

.depoimento-box-title {
  height: 50px;
  font-size: 1.2em;
}

.depoimento-box-description {
  height: 100%;
  font-weight: 300;
}


@media screen and (max-width: 1000px) {
  .navbar-img {
    display: none;
  }
  .navbar-img-mobile {
    display: inline-block;
    
  }
  .sobre-mim {
    display: flex;
    flex-direction: column;
    gap: 50px;


  }

  .sobre-mim-box {
    display: flex;

    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    ;

  }

  .sobre-mim-img {
    width: 300px;
    height: 400px;

    background-repeat: no-repeat;
    background-size: cover;

  }

  .sobre-mim-text {
    min-width: none;
    max-width: none;

    width: 100%;
    text-align: left;
  }

  /* -------------------------------------sobre meus servicos mobile ---------------------*/
  .meus-principais-servicos-box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    height: auto;
  }

  .meus-principais-servicos-box-card {
    width: 100%;
    min-height: 500px;
    height: auto;
    background-color: #ffffff;
    border-radius: 15px;

  }

  .meus-principais-servicos-box-card-img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #414141;
    width: 100%;
    height: 80vw;
    max-height: 500px;
    min-height: 300px;

  }

  .meus-principais-servicos-box-card-text {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 300px;
    height: auto;
  }



  /* blog */
  .blog {
    margin-top: 50px;

  }

  .blog-box {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
  }

  .box-seta {
    height: 50vw;
    width: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;



  }

  .seta-esquerda {
    width: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -4px;
  }

  .blog-seta-esquerda {

    position: relative;
    width: 8px;
    height: 15px;
    background-color: #ddd;
    rotate: 45deg;

  }

  .blog-seta-esquerda span {

    position: absolute;
    width: 8px;
    height: 15px;
    background-color: #ddd;
    rotate: 90deg;
    margin: 4px 0 0 4px;

  }

  .seta-direita {
    width: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 8px;
  }



  .blog-seta-direita {

    position: relative;
    width: 8px;
    height: 15px;
    background-color: #ddd;
    rotate: -135deg;

  }

  .blog-seta-direita span {

    position: absolute;
    width: 8px;
    height: 15px;
    background-color: #ddd;
    rotate: 90deg;
    margin: 4px 0 0 4px;

  }

  .blog-gallery {

    display: flex;

    overflow-x: scroll;


  }

  .blog-gallery::-webkit-scrollbar {
    display: none;

  }

  .blog-sp {
    padding: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .blog-bg {
    width: 78vw;
    min-width: 300px;
    max-width: 500px;
    height: 50vw;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blog-border {
    width: 80%;
    height: 80%;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-color: #ffffff;

    border-width: 3px;


  }

  .blog-border-bottom {
    width: 100%;
    height: 100%;
    border-width: 3px;
    border-bottom-style: solid;
    border-image: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #ffffff00 40%, #ffffff00 60%, #ffffff 60%, #ffffff 100%) 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4em;
    font-weight: 700;
    text-shadow: black 0.1em 0.1em 0.2em;
  }
  .video-frame {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 200px;
   

  
  }
 
  /* --------------------------depoimento mobile---------------------- */
  /* Depoimento */
  .depoimento-gallery {

    display: flex;

    overflow-x: scroll;


  }

  .depoimento-gallery::-webkit-scrollbar {
    display: none;

  }

  .depoimento-bg {
    width: 78vw;
    min-width: 300px;
    max-width: 500px;
    height: 50vw;

    background-color: #efefef;
    color: #414141;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    padding: 20px 15px;
    box-sizing: border-box;
    font-size: 0.8em;
    font-weight: 600;
  }


  /* #grad1 {
  height: 200px;
  background-color: red; 
  background-image: repeating-linear-gradient(red, yellow 20%, white 30%,white 40%,green 40%, green 100%);
 */
}