/*@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Tsukimi+Rounded:wght@300;400;500;600;700&display=swap');
/* Cores personalizadas */

/*
:root {
    --bg-yellow: #fff1cf;
    --bg-blue: #c2d6f4;
    --bg-green: #e6ffd4;
    --bg-pink: #FFDEEA;
    --bg-color: #FFDEEA;
    --heading-color: #a95ea2;
    --subheading-color: #91FFD1;
    --text-color: #bf537c;
    --accent-color: #FFB784;
  } 
*/
  
  /*all:unset;  remove estilos setados pelo user-agent */

  :root {
    --bg-yellow: #fff1cf;
    --bg-blue: #b3e7ff;
    --bg-green: #daeec9;
    --bg-pink: #FFDEEA;
    --bg-color: #FFDEEA;
    --heading-color: #a95ea2;
    --subheading-color: #91FFD1;
    --text-color: #bf537c;
    --accent-color: #FFB784;
  }


  @font-face {
  font-family: 'Tsukimi Rounded';
  src: url('TsukimiRounded-Light.ttf') format('truetype'),
       url('TsukimiRounded-Regular.ttf') format('truetype'),
       url('TsukimiRounded-Medium.ttf') format('truetype'),
       url('TsukimiRounded-SemiBold.ttf') format('truetype'),
       url('TsukimiRounded-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  
}

.cs-page-loading {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -webkit-transition: all .4s .2s ease-in-out;

  transition: all .4s .2s ease-in-out;

  background-color: #fff;

  opacity: 0;

  visibility: hidden;

  z-index: 9999;

}

.cs-page-loading.active {

  opacity: 1;

  visibility: visible;

}

.cs-page-loading-inner {

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  text-align: center;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  -webkit-transition: opacity .2s ease-in-out;

  transition: opacity .2s ease-in-out;

  opacity: 0;

}

.cs-page-loading.active > .cs-page-loading-inner {

  opacity: 1;

}

.cs-page-loading-inner > span {

  display: block;

  /*font-family: 'Inter', sans-serif;*/

  font-size: 2rem;

  font-weight: normal;

  color: #ebb1af;

}

.cs-page-spinner {

  display: inline-block;

  width: 2.75rem;

  height: 2.75rem;

  margin-bottom: .75rem;

  vertical-align: text-bottom;

  border: .15em solid #ebb1af;

  border-right-color: transparent;

  border-radius: 50%;

  -webkit-animation: spinner .75s linear infinite;

  animation: spinner .75s linear infinite;

}

@-webkit-keyframes spinner {

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes spinner {

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}


  /* Estilos personalizados */
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /*font-family: 'Quicksand', sans-serif;*/
    font-family: 'Tsukimi Rounded', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
  }

  .bg-yellow {
    background-color: var(--bg-yellow);
  }

  .bg-pink {
    background-color: var(--bg-pink);
  }

  .bg-blue {
    background-color: var(--bg-blue);
  }

  .bg-green {
    background-color: var(--bg-green);
  }



  .subheading {
    color: var(--subheading-color);
  }

  .accent-color {
    color: var(--accent-color);
  }

  .bg-accent-color {
    background-color: var(--accent-color);
  }


  .divisor-e{
    width: 100%;
    height: 80px;
    transform: scaleX(-1) scaleY(-1);
  }

  .divisor-ed{
    width: 100%;
    height: 80px;
    transform: scaleX(-1) scaleY(1);
  }

  .divisor-d{
    width: 100%;
    height: 80px;
    
  }
  .divisor-de{
    width: 100%;
    height: 80px;
    transform: scaleX(1) scaleY(-1);
  }

 .divisor-yellow svg g{
  fill: var(--bg-yellow);
}

 .divisor-blue svg g{
  fill: var(--bg-blue);
}

 .divisor-green svg g{
  fill: var(--bg-green);
}

 .divisor-pink svg g{
  fill: var(--bg-color);
}


/*-------------- NAVBAR-----*/

.navbar {
  background-color: transparent;
  transition: background-color 0.27s ease-in-out;
  padding-bottom: 0;
}

.navbar-toggler {
  background-color: rgb(255 255 255 / 46%);
}

.nav-link {
  color: #FFFFFF;
}

.nav-link{
  font-weight: 500;
}

.nav-link:hover{
  font-weight: 600;
  color: #e9b3e8 !important;
  text-shadow: 1px 1px 0px #842987;
}

.nav-link-scrolled{
  color: #cd85c6 !important;
}

.nav-link-scrolled:hover{
  color: #994e91 !important;
  text-shadow: 1px 1px 0px #f0f0f0 !important;
}


.navbar.fade-out {
  background-color: #ffffff; /* Cor de fundo desejada */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.logo-dra {
  /*
  filter: brightness(-100%) saturate(0%) invert(100%);
  -webkit-filter: brightness(-100%) saturate(0%) invert(100%);
  -moz-filter: brightness(-100%) saturate(0%) invert(100%);
  */
  width: 250px;
  height: auto;
}

.logo-dra-roll {
  filter: brightness(0) saturate(100%) invert(98%) sepia(31%) saturate(7424%) hue-rotate(305deg) brightness(87%) contrast(90%);
  -webkit-filter: brightness(0) saturate(100%) invert(98%) sepia(31%) saturate(7424%) hue-rotate(305deg) brightness(87%) contrast(90%);
 -moz-filter: brightness(0) saturate(100%) invert(98%) sepia(31%) saturate(7424%) hue-rotate(305deg) brightness(87%) contrast(90%);

}


/*--------------------------*/

.bear-svg{
  width: 55px;
}

a{
  text-decoration: none;
  color: #cd80ff;
}

.foto-dra {
    max-height: 630px;
}

.text-shadow {
    text-shadow: 1px 1px 0px #31224c;
}

  .btn-primary {
    color: #5a84c2;
    background-color: #c2d6f4;
    border-color: #c2d6f4;
}

.gradiente-linear{
  padding-bottom: 45px;
}

@media (max-width: 576px) {
  .gradiente-linear{
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, #282405 130%);
    padding-top: 80px;
  }

  .foto-dra {
    max-height: 550px;
    margin-left: 80px;
  }

}

.tag {
opacity: 0;
transform: translate(0, 7vh);
transition: all 0.7s;
}

.tag.visible {
opacity: 1;
transform: translate(0, 0);
}

#sobre {
    background: linear-gradient(to bottom, rgb(0 8 154 / 34%) 0%, #514b14ab 100%), url(../imagens/site/bg-head.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

.sobre{
  height: calc(100% + 90px) !important;
}

.opacity-1{
  opacity: 1 !important;
}

#servicos{
  background-image: url('../imagens/site/bg-toys-e.png');
  background-repeat: no-repeat ;
}

@media (max-width: 767px) {
    #servicos{
      background-size: contain;
    }
}


#servicos p{
    background-color: #ffecbe;
    color: #a98660;
    padding: 1rem;
    border-radius: 15px;
    font-size: 20px;
    -webkit-box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
    -moz-box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
    box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
}

#servicos h2{
    padding: 1rem;
    color: #c99d37;
    font-weight: bold;
}

#horarios{
  background-image: url('../imagens/site/bg-toys-d.png');
  background-repeat: no-repeat ;
  background-size: contain;
  background-position: bottom right;
}

#horarios h2{
    color: #bb778f;
    font-weight: bold;
}

#horarios p{
    color: #bb778f;
    font-size: 20px;
}


#depoimentos{
  background-image: url('../imagens/site/bg-toys-e.png');
  background-repeat: no-repeat ;
  background-size: contain;
}

.owl-stage{
  padding-bottom: 10px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #7db1ff !important;
}
.owl-theme .owl-dots .owl-dot span {
    background: #849abb !important;
}

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: .75rem;
  background-color: #d0ccae;
}

.icon-color{
 filter: invert(62%) sepia(23%) saturate(453%) hue-rotate(17deg) brightness(98%) contrast(91%);
}

#open-layer-sobre{
  color: #fcff80;
}

.layer-sobre {
 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(31, 12, 31, 0.75); /* Cor de fundo inicialmente transparente */
  backdrop-filter: blur(8px); /* Desfoque do fundo */
  z-index: 9999;
  opacity: 0; /* Opacidade inicialmente 0 */
  pointer-events: none; /* Impede interações com a layer oculta */
  transition: opacity 0.5s ease; /* Efeito de transição de fade */
}

.layer-sobre.active {
  opacity: 1; /* Opacidade 1 ao ativar a layer */
  pointer-events: auto; /* Permite interações com a layer visível */
}

.layer-sobre p{
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #000;
}


#close-layer-sobre {
  position: absolute;
  top: 10px;
  right: 10px;
}

#depoimentos h2{
  text-align: center;
  font-weight: bold;
  color: #81b1c7;
  margin-bottom: 35px;
}

.item{
  width: 90%;
}

.depoimentos-quote{
  position: absolute;
  font-size: 62px;
  left: -40px;
  top: -30px;
}

.depoimentos-box {
    background-color: #86c2dd;
    color: #ffffff;
    padding: 1.3rem;
    border-radius: 15px;
    -webkit-box-shadow: 3px 3px 0px 0px #fff;
    -moz-box-shadow: 3px 3px 0px 0px #fff;
    box-shadow: 3px 3px 0px 0px #fff;

    /*
    -webkit-box-shadow: 3px 3px 0px 0px rgba(120,174,255,0.45);
    -moz-box-shadow: 3px 3px 0px 0px rgba(120,174,255,0.45);
    box-shadow: 3px 3px 0px 0px rgb(120 174 255 / 45%);
    */
}

.depoimentos-box p{
    font-size: 17px;
    line-height: 22px;
}

.depoimentos-box .nome{
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  float: right;
}

#contato {
    background-image: url(../imagens/site/bg-toys-d.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    color:#8ca17c !important;
}

#contato h3{
  font-weight: bold;
  color:#8ca17c !important;
}

#contato p{
  font-size: 18px;
}


.img-clock{
  width: 500px;
  position:absolute;
  margin-top: -115px;
  margin-left: 30px;
}

.img-calendario{
  width: 500px;
  position:absolute;
  margin-top: -115px;
  margin-left: 30px;
}

@media (max-width: 576px) {
  .text-clock{
    margin-bottom: 135px;
  }
  .img-clock{
    position: absolute;
    margin-top: -195px;
    width: 290px;
    margin-left: 73px;
  }

}

.media-insta{
  /*width: 100%
  height: 500px
  max-width: 200px;
  
  background-size: cover;
  background-position: center;
  
  overflow: hidden;*/
  border-radius: 20px;
  -webkit-box-shadow: 4px 4px 0px 0px rgba(176,169,123,0.45);
  -moz-box-shadow: 4px 4px 0px 0px rgba(176,169,123,0.45);
  box-shadow: 4px 4px 0px 0px rgba(176,169,123,0.45);

}

#instagram{
  background-image: url('../imagens/site/bg-toys-bl.png');
  background-repeat: no-repeat ;
  background-size: contain;
  background-position: bottom left;
}

#instagram p{
    background-color: #ffecbe;
    color: #a98660;
    padding: 1rem;
    border-radius: 15px;
    font-size: 16px;
    margin-top: 20px;
    -webkit-box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
    -moz-box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
    box-shadow:  3px 3px 0px 0px rgba(176,169,123,0.45);
}


footer p{
  margin: 0;
}

/* ///////// IPHONE screen //////////*/

@media only screen and (min-width: 375px) and (max-width: 812px){ 
  #sobre {
    background-attachment: scroll !important;
  }

}

@media only screen and (min-width: 375px) and (max-width: 812px) and (orientation: portrait) { 
  #sobre {
    background-attachment: scroll !important;
  }
  
}

@media only screen and (min-width: 375px) and (max-width: 812px) and (orientation: landscape) { 
  #sobre {
    background-attachment: scroll !important;
  }
  

}