html {
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

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

.container {
  margin-left: auto;
  margin-right: auto;
}

.flex-content {
  display: flex;
  align-items: center;
  padding: 0 150px;
}

.row {
  padding-top: 40px;
}


/* FONTES */

/* Texto dos banners */
h1 {
  font-family: 'Open Sans';
  font-size: 44px;
  color: #fff;
}

/* Títulos das seções */
h2 {
  font-family: 'Poiret One';
  font-size: 60px;
  color: #B24ABF;
  text-align: center;
}

/* Subítulos no slider Nossos Serviços */
h3 {
  font-family: 'Open Sans';
  font-size: 36px;
  color: #FFF;
}

/* Subítulos em Nossos Projetos */
h4 {
  font-family: 'Open Sans';
  font-size: 32px;
  color: #424242;
}


p {
  font-family: "Open Sans";
  font-size: 15px;
  color: #424242;
}



/* VÍDEOS */

.flex-video {
  width: 60%; 
  min-width: 3em; 
  margin:0 auto;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin:0 auto;
}

.video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  border: 2px solid #9D9D9D;
}


/* MENU DE NAVEGAÇÃO */

.navbar {
  background-color: #fff;
  position: fixed !important;
  width: 100%;
  z-index: 1000;
  padding: 0px;
  box-shadow: 0px 3px 5px #c4c4c4;
}

.navbar .container {
  max-width: 100%;
  padding: 0;
}

.navbar .logo {
  padding: 0 0 0 15px !important;
}

.navbar .logo img {
  width: 80%;
  height: 80%;
}

.nav-item {
  padding-left: 40px;
}

.nav-item .text {
  color: #54026F !important;
  font-size: 18px;
}

.nav-item .text:hover {
  color: #34025f !important;
  transform: scale(1.3, 1.3);
}

.nav-item .purple-button {
  background-color: #420347 !important;
  color: #fff !important;
  font-size: 18px;
  width: 200px;
  text-decoration: none;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  padding: 1rem;
}

.nav-item .purple-button:hover {
  background-color: #34025f !important;
}

.navbar-dark .navbar-toggler {
  margin-right: 1rem;
  background: #b311cd;
  box-shadow: 0 0 0.5em #c4c4c4;
}

.navbar-nav {
  align-items: center !important;
}




/* BANNER INICIAL */

.banner-inicial {
  background: linear-gradient(to right,rgba(147, 61, 173, 0), rgba(44, 4, 57, 0.8)), url(./imagens/banner-topo.png) no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background-position-x: center;
}

.banner-inicial .banner-texto {
  z-index: 2 !important;
  padding: 2% 10% 0 60%;
}

.banner-inicial h1 {
  text-align: right;
}






/* CONHEÇA A DESIGNA */

.conheca-a-designa h2 {
  text-align: left;
  margin-bottom: 15px;
}



/* SERVIÇOS CAROUSEL - DESKTOP */

#servicos {
  padding: 80px 0 0 0 !important;
}

.servicos {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 530px;
  margin-bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: "DM Sans", sans-serif;
  transition: background 0.4s ease-in;
}

.servicos-mobile {
  display: none;
}

.servicos-container {
  width: 80%;
  max-width: 800px;
  max-height: 500px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.servicos-container input[type=radio] {
  display: none;
}

.servicos-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

.servicos-card {
  position: absolute;
  width: 100%;
  height: 500px;
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid #D9D9D9;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  text-align: center;
  padding: 15px 80px;
  transform-origin: center center;
  transition: transform 0.4s ease-in-out; 
}

.servicos-card p {
  color: #fff;
}

.servicos-mobile .servicos-card {
  height: 230px;
}

.servicos-mobile .servicos-card p {
  color: #54026F;
  background-color: white;
  font-weight: bold;
  position: absolute;
}



#card-servico-1, #card-servico-5 {
  background-image: url(./imagens/servicos/servico1.png);
  background-size: cover;
  background-position-x: center;
}

#card-servico-2, #card-servico-6 {
  background-image: url(./imagens/servicos/servico2.png);
  background-size: cover;
  background-position-x: center;
}

#card-servico-3, #card-servico-7 {
  background-image: url(./imagens/servicos/servico3.png);
  background-size: cover;
  background-position-x: center;
}

#card-servico-4, #card-servico-8 {
  background-image: url(./imagens/servicos/servico4.png);
  background-size: cover;
  background-position-x: center;
}

#servico-1:checked ~ .servicos-content #card-servico-4, 
#servico-2:checked ~ .servicos-content #card-servico-1, 
#servico-3:checked ~ .servicos-content #card-servico-2,
#servico-4:checked ~ .servicos-content #card-servico-3 {
  transform: translatex(-13%) scale(0.8);
  z-index: 0
}

#servico-1:checked ~ .servicos-content #card-servico-2, 
#servico-2:checked ~ .servicos-content #card-servico-3, 
#servico-3:checked ~ .servicos-content #card-servico-4,
#servico-4:checked ~ .servicos-content #card-servico-1 {
  transform: translatex(13%) scale(0.8);
  z-index: 0;
}

#servico-1:checked ~ .servicos-content #card-servico-1, 
#servico-2:checked ~ .servicos-content #card-servico-2, 
#servico-3:checked ~ .servicos-content #card-servico-3,
#servico-4:checked ~ .servicos-content #card-servico-4 {
  transform: translatex(0) scale(1);
  z-index: 1;
}

/* SERVIÇOS CAROUSEL - MOBILE */

#servico-5:checked ~ .servicos-content #card-servico-8, 
#servico-6:checked ~ .servicos-content #card-servico-5, 
#servico-7:checked ~ .servicos-content #card-servico-6,
#servico-8:checked ~ .servicos-content #card-servico-7 {
  transform: translatex(-13%) scale(0.8);
  z-index: 0
}

#servico-5:checked ~ .servicos-content #card-servico-6, 
#servico-6:checked ~ .servicos-content #card-servico-7, 
#servico-7:checked ~ .servicos-content #card-servico-8,
#servico-8:checked ~ .servicos-content #card-servico-5 {
  transform: translatex(13%) scale(0.8);
  z-index: 0;
}

#servico-5:checked ~ .servicos-content #card-servico-5, 
#servico-6:checked ~ .servicos-content #card-servico-6, 
#servico-7:checked ~ .servicos-content #card-servico-7,
#servico-8:checked ~ .servicos-content #card-servico-8 {
  transform: translatex(0) scale(1);
  z-index: 1;
}




.slider-navigation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.slider-dot-desk, .slider-dot-mob  {
  width: 15px;
  height: 15px;
  background-color: #aaa;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.slider-dot-desk.active,.slider-dot-mob.active {
  background-color: #333;
}




/* CLIENTES */

.clientes h2 {
  font-size: 40px;
  text-align: center;
}

.customer-logos {
  background: var(--Gradiente-diagonal, linear-gradient(169deg, #AF3EBD -21.31%, #009BCF 156.81%));
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 10px 0;
}

.slide img {
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 15px;
}

.logo-media img {
  padding: 45px 15px;
}

.logo-grande img {
  padding: 60px 15px;
}




/* PROJETOS */

#projetos {
  padding: 80px 0 0 0 !important;
}

#projetos h2 {
  padding: 0 !important;
}

.projetos-mobile {
  display: none;
}

.projetos-mobile div {
  margin-top: 35px;
}

.sombra-titulo {
  font-family: 'Open Sans';
  font-size: 100px;
  color: rgba(66, 66, 66, 0.05);
  position: absolute;
  top: -82px;
}

.imagem img {
  max-width: 100%;
}


/* EBOOK */


.ebook {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F6F6F6;
  padding-top: 80px;
}

.ebook-mobile {
  display: none;
}

.ebook .bloco-texto {
  text-align: center;
}

.ebook .sombra-titulo {
  left: 20%;
}


/* EBOOK SLIDER */

.ebook-slider {
  width: 90%;
  margin: 0px auto;
}

.ebook-slider .slick-slide {
  margin: 0px 0px;
  display: flex !important;
  align-items: center;
  min-height: 600px !important;
}

.slick-slide img {
width: 100%;
transform: scale(0.9);
}

.slick-prev:before,
.slick-next:before {
  color: black !important;
}

.slick-prev:before {
  font-family: Montsserat;
  content: url(./imagens/prev-arrow.png) !important;
}

.slick-next:before {
  font-family: Montsserat;
  content: url(./imagens/next-arrow.png) !important;
}






/* BANNER FINAL */

.banner-final {
  background: url(./imagens/banner-final.png) no-repeat;
  background-size: cover;
  display: flex;
  background-position-x: center;
}

.banner-final .banner-texto {
  z-index: 2 !important;
  padding: 5% 55% 0 10%;
  
}

.banner-final .banner-texto h1, .banner-final .banner-texto h3 {
  font-family: Montserrat !important;
  line-height: 127.5%;
  text-align: left;
}

.banner-final .banner-texto h1 {
  font-size: 55px;
  margin-bottom: 20px;
}



/* FOOTER */

footer {
  background: linear-gradient(183deg, rgba(143, 16, 158, 0.48) 1.84%, rgba(140, 226, 255, 0.80) 97.8%);
}

.footer-centralized {
  margin: 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo img {
  width: 75%;
  padding: 30px;
}

.logos-redes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 10px 30px;
}

.footer-container a {
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.whats {
  background: url(./imagens/whats.png);
}

.mail {
  background: url(./imagens/email.png);
 }

.facebook {
  background: url(./imagens/facebook.png);
}

.linkedin {
  background: url(./imagens/linkedin.png);
}

.instagram {
  background: url(./imagens/instagram.png);
}

.designa-logo {
  display: block;
  width: 24rem;
  height: 15rem;
  background: url(imagens/designa-logo.svg);
  background-size: 24rem 15rem;
}


.direitos p {
  color: #54026F;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
}




/* RESPONSIVIDADE */


@media (max-width: 384px) {

  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 36px;
    line-height: 44px;
  }

  h3 {
    font-size: 18px;
    line-height: 22px;
  }

  h5 {
    font-weight: 600;
    font-size: 11px;
    line-height: 150%;
  }

  p {
    font-size: 14px;
  }

  .flex-content {
    padding: 0 30px;
  }

  .clientes h2 {
    font-size: 25px;
  }

  

  .servicos-card {
    padding: 15px 30px;
  }

  .servicos-desktop {
    display: none;
  }

  .servicos-mobile {
    display: flex;
    min-height: 545px !important;
  }

  #card-servico-5 p {
    top: 228px;
    padding: 15px 12px 40px 12px;
  }
  
  #card-servico-6 p {
    top: 228px;
    padding: 15px 12px 80px 12px;
  }
  
  #card-servico-7 p {
    top: 228px;
    padding: 15px 12px 60px 12px;
  }
  
  #card-servico-8 p {
    top: 228px;
    padding: 15px 12px 0px 12px;
  }


  .logo-grande img {
    padding: 20px;
  }


  .projetos-mobile {
    display: block;
  }

  .projetos-desktop {
    display: none;
  }

  .sombra-titulo {
    font-size: 60px;
    top: -47px;
  }

  .ebook-mobile {
    display: block;
  }

  .slick-next {
    right: -5px !important;
  }

  .slick-prev {
    left: -15px !important;
  }

  .ebook-desktop {
    display: none;
  }

  .ebook .sombra-titulo {
    left: 33%;
}

  .banner-inicial, .banner-final {
    min-height: 240px;
  }

  .conheca-a-designa .video {
    margin-bottom: 30px;
  }

  .banner-inicial .banner-texto {
    padding: 10% 4% 0 40%;
    font-size: 22px;
    line-height: 25px;
  }

  .banner-final .banner-texto {
    padding: 10% 45% 0 4%;
    line-height: 25px;
  }

  .banner-final .banner-texto h1 {
    font-size: 25px;
    margin-bottom: 10px;
  }

  .banner-final .banner-texto h3 {
    font-size: 15px;
  }

  .footer-centralized {
    margin: 0px;
}

  .footer-logo img {
    width: 90%;
    padding: 10px;
}

.footer-container {
  padding: 25px 0;
}


  
}

/* // X-Small devices (portrait phones, less than 576px) */
@media screen and (min-width: 385px) and (max-width: 428px) {

  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 36px;
    line-height: 44px;
  }

  h3 {
    font-size: 18px;
    line-height: 22px;
  }

  h5 {
    font-weight: 600;
    font-size: 11px;
    line-height: 150%;
  }

  p {
    font-size: 14px;
  }

  .flex-content {
    padding: 0 30px;
  }

  .clientes h2 {
    font-size: 25px;
  }

  

  .servicos-card {
    padding: 15px 30px;
  }

  .servicos-desktop {
    display: none;
  }

  .servicos-mobile {
    display: flex;
    min-height: 545px !important;
  }

  #card-servico-5 p {
    top: 228px;
    padding: 15px 12px 40px 12px;
  }
  
  #card-servico-6 p {
    top: 228px;
    padding: 15px 12px 80px 12px;
  }
  
  #card-servico-7 p {
    top: 228px;
    padding: 15px 12px 60px 12px;
  }
  
  #card-servico-8 p {
    top: 228px;
    padding: 15px 12px 0px 12px;
  }


  .logo-grande img {
    padding: 20px;
  }


  .projetos-mobile {
    display: block;
  }

  .projetos-desktop {
    display: none;
  }

  .sombra-titulo {
    font-size: 60px;
    top: -47px;
  }

  .ebook-mobile {
    display: block;
  }

  .slick-next {
    right: -5px !important;
  }

  .slick-prev {
    left: -15px !important;
  }

  .ebook-desktop {
    display: none;
  }

  .ebook .sombra-titulo {
    left: 33%;
}

  .banner-inicial, .banner-final {
    min-height: 240px;
  }

  .conheca-a-designa .video {
    margin-bottom: 30px;
  }

  .banner-inicial .banner-texto {
    padding: 10% 4% 0 40%;
    font-size: 22px;
    line-height: 25px;
  }

  .banner-final .banner-texto {
    padding: 10% 45% 0 4%;
    line-height: 25px;
  }

  .banner-final .banner-texto h1 {
    font-size: 25px;
    margin-bottom: 10px;
  }

  .banner-final .banner-texto h3 {
    font-size: 15px;
  }

  .footer-centralized {
    margin: 0px;
}

  .footer-logo img {
    width: 90%;
    padding: 10px;
}

.footer-container {
  padding: 25px 0;
}

}


/* // X-Small devices (portrait phones, less than 576px) */
@media screen and (min-width: 429px) and (max-width: 467px) {

  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 36px;
    line-height: 44px;
  }

  h3 {
    font-size: 18px;
    line-height: 22px;
  }

  h5 {
    font-weight: 600;
    font-size: 11px;
    line-height: 150%;
  }

  p {
    font-size: 14px;
  }

  .flex-content {
    padding: 0 30px;
  }

  .clientes h2 {
    font-size: 25px;
  }

  

  .servicos-card {
    padding: 15px 30px;
  }

  .servicos-desktop {
    display: none;
  }

  .servicos-mobile {
    display: flex;
    min-height: 505px !important;
  }

  #card-servico-5 p {
    top: 228px;
    padding: 15px 12px 40px 12px;
  }
  
  #card-servico-6 p {
    top: 228px;
    padding: 15px 12px 60px 12px;
  }
  
  #card-servico-7 p {
    top: 228px;
    padding: 15px 12px 60px 12px;
  }
  
  #card-servico-8 p {
    top: 228px;
    padding: 15px 12px 0px 12px;
  }


  .logo-grande img {
    padding: 20px;
  }


  .projetos-mobile {
    display: block;
  }

  .projetos-desktop {
    display: none;
  }

  .sombra-titulo {
    font-size: 60px;
    top: -47px;
  }

  .ebook-mobile {
    display: block;
  }

  .slick-next {
    right: -5px !important;
  }

  .slick-prev {
    left: -15px !important;
  }

  .ebook-desktop {
    display: none;
  }

  .ebook .sombra-titulo {
    left: 33%;
}

  .banner-inicial, .banner-final {
    min-height: 240px;
  }

  .conheca-a-designa .video {
    margin-bottom: 30px;
  }

  .banner-inicial .banner-texto {
    padding: 10% 4% 0 40%;
    font-size: 22px;
    line-height: 25px;
  }

  .banner-final .banner-texto {
    padding: 10% 45% 0 4%;
    line-height: 25px;
  }

  .banner-final .banner-texto h1 {
    font-size: 25px;
    margin-bottom: 10px;
  }

  .banner-final .banner-texto h3 {
    font-size: 15px;
  }

  .footer-centralized {
    margin: 0px;
}

  .footer-logo img {
    width: 90%;
    padding: 10px;
}

.footer-container {
  padding: 25px 0;
}

}


/* // X-Small devices (portrait phones, less than 576px) */
@media screen and (min-width: 468px) and (max-width: 575.98px) {
  
  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 36px;
    line-height: 44px;
  }

  h3 {
    font-size: 18px;
    line-height: 22px;
  }

  h5 {
    font-weight: 600;
    font-size: 11px;
    line-height: 150%;
  }

  p {
    font-size: 14px;
  }

  .flex-content {
    padding: 0 30px;
  }

  .clientes h2 {
    font-size: 25px;
  }

  

  .servicos-card {
    padding: 15px 30px;
  }

  .servicos-desktop {
    display: none;
  }

  .servicos-mobile {
    display: flex;
    min-height: 480px !important;
  }

  #card-servico-5 p {
    top: 228px;
    padding: 15px 13px 40px 13px;
  }
  
  #card-servico-6 p {
    top: 228px;
    padding: 15px 13px 60px 13px;
  }
  
  #card-servico-7 p {
    top: 228px;
    padding: 15px 13px 60px 13px;
  }
  
  #card-servico-8 p {
    top: 228px;
    padding: 15px 13px 0px 13px;
  }

  .logo-grande img {
    padding: 20px;
  }

  .projetos-mobile {
    display: block;
  }

  .projetos-desktop {
    display: none;
  }

  .sombra-titulo {
    font-size: 60px;
    top: -47px;
  }

  .ebook-mobile {
    display: block;
  }

  .ebook .sombra-titulo {
    left: 33%;
}

  .slick-next {
    right: -5px !important;
  }

  .slick-prev {
    left: -15px !important;
  }

  .ebook-desktop {
    display: none;
  }

  .banner-inicial, .banner-final {
    min-height: 240px;
  }

  .conheca-a-designa .video {
    margin-bottom: 30px;
  }

  .banner-inicial .banner-texto {
    padding: 10% 4% 0 40%;
    font-size: 22px;
    line-height: 25px;
  }

  .banner-final .banner-texto {
    padding: 10% 45% 0 4%;
    line-height: 25px;
  }

  .banner-final .banner-texto h1 {
    font-size: 25px;
    margin-bottom: 10px;
  }

  .banner-final .banner-texto h3 {
    font-size: 15px;
  }

  .footer-centralized {
    margin: 0px;
}

  .footer-logo img {
    width: 90%;
    padding: 10px;
}

.footer-container {
  padding: 25px 0;
}


}


/* // Medium devices (tablets, 768px and up) */
@media screen and (min-width: 576px) and (max-width: 768px) {

  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-family:  Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
  }

  .flex-content {
    padding: 0 60px;
  }

  .projetos-mobile {
    display: block;
  }

  .projetos-desktop {
    display: none;
  }

  .ebook-mobile {
    display: block;
  }

  .slick-next {
    right: -5px !important;
  }

  .slick-prev {
    left: -15px !important;
  }

  .ebook-desktop {
    display: none;
  }

  .banner-inicial, .banner-final {
    min-height: 320px;
  }

  .banner-inicial .banner-texto {
    padding: 4% 4% 0 40%;
    font-size: 28px;
    line-height: 35px;
  }

  .banner-final .banner-texto {
    padding: 5% 40% 0 10%;
  }

  .banner-final .banner-texto h1 {
    font-size: 35px !important;
  }

  .conheca-a-designa .video {
    margin: 30px 0;
  }

  .conheca-a-designa iframe {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  }

  .footer-container a {
    width: 20px;
    height: 20px;
  }
}

/* // Large devices (desktops, 992px and up) */
@media screen and (min-width: 769px) and (max-width: 992px) {


  h1 {
    font-size: 24px;
    line-height: 29px;
  }

  h3 {
    /* h5 */
    font-family:  Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
  }

  .banner-inicial, .banner-final {
    min-height: 415px;
  }

    .banner-final .banner-texto h1 {
      font-size: 5vh;
  }

  .banner-final .banner-texto {
    padding: 5% 50% 0 10%;
  }

}

/* // X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 993px) and (max-width: 1200px) {
  
  .nav-item {
    margin-right: 20px !important;
  }

  .banner-inicial, .banner-final {
    min-height: 540px;
  }

  .banner-texto h1 {
    font-size: 60px !important;
  }

  h1 {
    font-size: 32px;
  }

  h3  {
    font-size: 28px;
    text-align: start;
  }

  .banner-final .banner-texto {
    padding: 5% 40% 0 10%;
}

}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1201px) and (max-width: 1400px) {

  .banner-inicial, .banner-final {
    min-height: 640px;
  }

}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1401px) {

  .banner-inicial, .banner-final {
    min-height: 750px;
  }

}