/* 

Theme Name: Pame Hair 
Theme URI:    
Author:       
Author URI:   
Description:  
Version:      
Tested up to: 
Requires PHP: 
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  storefront
Tags:         

*/


/* NOTEBOOK > 15" */

@media screen and (min-width: 1440px) { 
    
}

@media screen and (max-width: 1440px) {
   
}

/* NOTEBOOK < 13" */

@media screen and (min-width: 1280px) { 
    
}

@media screen and (max-width: 1280px) {
   
}

/* TABLETS E CELULAR PAISAGEM */

@media screen and (min-width: 991px) { 
    
}

@media screen and (max-width: 991px) {
    
}

/* CELULAR COM TELA GRANDE */

@media screen and (min-width: 767px) {

}

@media screen and (max-width: 767px) {

}

/* CELULAR */

@media screen and (min-width: 575px) { 
    
}

@media screen and (max-width: 575px) {
   
}



body {
font-family: "Lato", sans-serif;
color:#ffffff;
background-color: #4659e0;
overflow-x:hidden;
box-sizing: border-box;
}

section {
  overflow: hidden;
}


/*Menu - navegação*/


.navbar, .menu-collapse {
	background-color: #4659e0;
}


.navbar-brand img {
  width: 80px;
}
.navbar-nav {
  align-items: center;
}
.navbar .navbar-nav .nav-link {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-size: 1.8em;
  padding:0.5em 0.8em;
  color: #ffffff;
  transition:.4s;
  font-weight:500;
  position: relative;
  text-decoration: none;
}

.navbar .navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fea8c2;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.navbar .navbar-nav .nav-link:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.navbar .navbar-nav .nav-link:active {
	color: #fea8c2;
}

.navbar .navbar-nav .nav-link:hover {
	color: #fea8c2;

}
@media screen and (min-width: 768px) {
  .navbar-brand img {
    width: 100px;
  }
  .navbar-brand {
    margin-right: 0;
    padding: 0 1em;
  }
}




/*Títulos*/

.subtitulo {
 
  font-optical-sizing: auto;
  -webkit-text-stroke: 2px #ffffff;
  color:#fea8c2;
  font-weight: 600;
}

.titulo-roxo {
 
  font-optical-sizing: auto;
  -webkit-text-stroke: 1px #fea8c2;
  color:#4659e0;
  font-weight: 600;
}

.rosa {
  color:#fea8c2;
}
.roxo {
	color:#061dbf;
}

/*Texto rolante*/

#animated-text-strip {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
}

#animated-text-strip .marquee {
  white-space: nowrap;
  animation: marquee 15s linear infinite;
  max-width: none;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}



/*Links*/

.linha{
  color: #fea8c2;
  position: relative;
  text-decoration: none;
}

.linha::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fea8c2;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.linha:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.linha2{
  color: #061dbf;
  position: relative;
  text-decoration: none;
}

.linha2::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #061dbf;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.linha2:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  transform: Toogler(45deg); /* Ou outro efeito */
  transition: .5s;
}


.redes a {
	background-color: transparent;
	color: gray;
	font-size: 1.2rem;
	border: none;
}

.redes a:hover {
	background-color: transparent;
	color: #010101;
}

/*Topo*/
.bg {
  width: 100%;
  background-color: transparent;
  background:url(../pame-hair/images/bg.svg);
  background-attachment:inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-2 {
  width: 100%;
  background-color: transparent;
  background:url(../pame-hair/images/bg-2.svg);
  background-attachment:inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-redes {
  width: 100%;
  background-color: transparent;
  background:url(../pame-hair/images/bg-redes.svg);
  background-attachment:inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-rosa {
	background-color: #fea8c2;
}

/*Títulos*/

.rosa {
	color:#fea8c2;
}

/*Texto horizontal rolante*/

.scrolling-text {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--color-just-black);
}
.scrolling-text .rail {
  display: flex;
}
.scrolling-text .rail h4 {
  white-space: nowrap;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: ls(120);
  line-height: 1em;
  margin: 0 30px 0 0;
  color: var(--color-surface-white);
}





/*Botões*/

        button {
          border:none;
          color:#010101;
          position: relative; 
          background-color: transparent; 
        }

        .seta {
            position: absolute; 
            top: 18px; 
            left:-26px;
            transform: rotate(0deg); 
            transition: transform 0.3s ease-in-out;
        }

       button:hover .seta {
        transform: translateX(20px); 
       
      }

.btn-outline-secondary {
  border-color:#e67e22;
}

.btn-outline-secondary:hover {
  border-color:#e67e22;
  background-color: #e67e22;
}

.seta-2 {
border:none;
color:#010101;
position: relative; 
background-color: transparent; 
}
.seta-bt {
  position: absolute; 
  top: -18px; 
  transform: rotate(0deg); 
  transition: transform 0.3s ease-in-out;
}
.seta-2:hover .seta-bt {
   transform: translateY(20px); 
}

.seta-texto {
border:none;
color:#010101;
position: relative; 
background-color: transparent; 
}
.seta-3{
  position: absolute; 
  left: -18px; 
  transform: rotate(0deg); 
  transition: transform 0.3s ease-in-out;
}
.seta-texto:hover .seta-3{
   transform: translateX(20px); 
}

/*Onde Estamos*/

.onde-estamos {
  margin-top: -25px;
}

/*Área do cliente*/
.rotatable {
  transition: transform 0.5s ease; /* Transição suave */
}

.rotatable:hover {
  transform: rotate(360deg); /* Rotação de 360 graus */
}

 /*Vídeo*/
 video {
  margin-bottom: -6px;
  bottom:0;
 }

 /*Redes*/

.quadro {
  margin-top: -50px;
}

/*Contato*/

.contact-form {

	border-top:1px solid #e67e22;

}


.form-control:hover {
  border-color:#e67e22; 
}

/*Rodapé*/


.rdp .nav-link {
  font-size:1rem;
}

.rdp .nav-link:hover {
	color: #010101;
  text-transform: none;

}