@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Norican&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amarante&display=swap');














/* assinatura de nomes */
.parisienne-regular {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}

.sacramento-regular {
  font-family: "Sacramento", cursive;
  font-weight: 400;
  font-style: normal;
}
.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}
.great-vibes-regular {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}
.norican-regular {
  font-family: "Norican", cursive;
  font-weight: 400;
  font-style: normal;
}

/* assinatura de nomes */

/* links botão */
.pirata-one-regular {
  font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.berkshire-swash-regular {
  font-family: "Berkshire Swash", serif;
  font-weight: 400;
  font-style: normal;
}

/* links botão */

/* headers titulos */
.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

/* headers titulos */



/* descrição */
.marck-script-regular {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-style: normal;
}
.charm-regular {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-bold {
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}
.amarante-regular {
  font-family: "Amarante", serif;
  font-weight: 400;
  font-style: normal;
}

/* descrição */






/* rose dark hr */
.rose-dark-hr{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/* rose dark hr */

/* mine separadora */
.mine-separadora{
	height: 92px;
	background-image: url("imagens/mine-separadora.png");
	background-position: center;
	background-size: cover;
}
.mine-separadora h1{
	text-align: center;
	color: white;
}
.mine-separadora2{
	height: 87px;
	background-image: url( "imagens/mine-separadora2.png");
	background-position: center;
	background-size: cover;
}
/* mine separadora */


/* klua blog intro */
.klua-blog-intro-index-bg{
	background-image: url(  "imagens/1777160145307.png");
	background-position: center;
	background-size: cover;
	height: auto;
	
	
}
.klua-blog-intro-index-mid{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.klua-blog-intro-index-card-index{
	width: 85%;
	height: 650px;
background: #2A7B9B;
background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(235, 12, 123, 1) 0%, rgba(18, 17, 17, 0.69) 0%, rgba(18, 16, 18, 0.7) 100%);
}
.klua-blog-intro-index-card-float-boxs{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.klua-blog-intro-index-card-profile-bg{
	height: auto;
	width: auto;
}
.klua-blog-intro-index-card-profile-bg li{
	display: inline;

}
.klua-blog-intro-index-card-profile{
	width: 490px;
	height:490px;
	background-image: url(  "logo.png");
	background-position: center;
	background-size: cover;
	margin-left: 8px;
}
.klua-blog-intro-index-card-description{
	width: 65%;
	height: 420px;
	margin: 8px;
	border: 2px solid #cc3399;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-right-color: transparent;
}
.klua-blog-intro-index-card-description h1{
	text-align: center;
	color: white;
	font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}
.klua-blog-intro-index-card-description p{
	text-align: center;
	color: white;
	font-size: 22px;
	background: #2A7B9B;
background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(235, 12, 123, 1) 0%, rgba(18, 17, 17, 0.69) 0%, rgba(18, 16, 18, 0.7) 100%);
	padding: 8px;
	  font-family: "Amarante", serif;
  font-weight: 400;
  font-style: normal;
}
.klua-blog-intro-index-header{
	background-color: white;
	padding: 8px;
	
}
.klua-blog-intro-index-header h1{
	text-align: center;
	font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
	font-size: 52px;
	color: black;
}
/* klua blog intro */




/* SLIDER */


/* SLIDER */
.slider{
    width:100%;
    height:890px;
    position:relative;
    overflow:hidden;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:1.2s ease-in-out;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img.bg{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(45%);
}

/* conteúdo */
.content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:#fff;
    max-width:600px;
}

.meta{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:20px;
}

.meta img{
    width:65px;
    height:65px;
    border-radius:50%;
    border:2px solid #fff;
    object-fit:cover;
}

.info{
    display:flex;
    flex-direction:column;
}

.date{
    font-size:14px;
    opacity:.8;
}

.tag{
    font-size:13px;
    color:#ff4da6;
    letter-spacing:1px;
}

.content h1{
    font-size:58px;
    margin-bottom:20px;
    line-height:1.1;
}

.content p{
    font-size:18px;
    line-height:1.7;
    opacity:.9;
}

/* indicadores */
.dots{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:5;
}

.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ffffff55;
    cursor:pointer;
    transition:.3s;
}

.dot.active{
    background:#ff4da6;
    transform:scale(1.2);
}

@media(max-width:900px){
    .content h1{
        font-size:38px;
    }

    .slider{
        height:700px;
    }

    .content{
        left:5%;
        right:5%;
    }
}
/* slider */


/* xxxxx icones style xxxx */
.fa-briefcase{
	background-color: #e600ac;
	padding: 8px;
	border-radius: 30px;
	font-size: 19px;
	color:#ffb3ec;
}
/* xxxxx icones style xxxx */




/* xxxxx perfil klua xxxx */
.perfil-klua-background{
	background-image: url(  "imagens/perfil-index-img.png");
	background-position: center;
	background-size: cover;
	height: 850px;
	padding-bottom: 200px;
}
.perfil-klua-mind-flw-margin-fx{
	height: 220px;
}

	
	.divider-x-dark-moon{
	background-image: url( "imagens/teste.png");
	background-position: center;
	background-size: cover;
	height: 420px;
		
	
}

.perfil-klua-mind-flw{
	float:right;
	width: 52%;
	height: auto;
	margin-right: 50px;
}
.perfil-klua-img-autora{
	background-image: url();
	
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.perfil-klua-biograph{
	background: #2A7B9B;
background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(235, 14, 146, 0.44) 0%, rgba(18, 17, 17, 0.51) 100%);
	height: auto;
	padding: 12px;
	width: 100%;
border-radius: 20px 60px;
	
}
.perfil-klua-autora-nome h1{
	  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: 75px;
	color: white;
	text-align: center;
}

.perfil-klua-biograph p {
	text-align: center;
	color: white;
	
	font-size: 19px;
	font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
	padding: 8px;
}

.hr-dark-flower-flw{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}




.perfil-klua-biograph-trabalho-index{
	background-color: black;
	height: auto;
}
.perfil-klua-biograph-trabalho-mid-margin{
	height: 200px;
}
.perfil-klua-biograph-trabalho-mid{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	
}
.perfil-klua-biograph-trabalho{
	
	background-image: url(  "imagens/2232232.jpg");
	background-position: center;
	background-size: cover;
	height: 400px;
	width: 100%;
	border-top-color: transparent;
	
	
}
.perfil-klua-biograph-trabalho li{
	display: inline;
	margin: 5px;
	background-color: #ff99e6;
	padding: 12px;
		border-radius: 20px 60px;
	
}
.perfil-klua-biograph-trabalho a{
	color: black;
	font-size: 25px;
}

/* xxxx header xxxxx */
.header-dark-luar-top-divider{
	background-color: black;
	height: 30px;
}
.header-dark-luar-design-top{
	background: #2A7B9B;
background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(235, 14, 146, 1) 0%, rgba(18, 17, 17, 1) 100%);
	height: 15px;
}
.header-dark-luar{
	height: 384px;
	background-image: url(  "imagens/1776526327686.jpg");
	background-position: center;
	background-size: cover;
	
}
.header-dark-luar-titulo-margin-fx{
	
	height: 248px;
}
.header-dark-luar-titulo h1{
	color: white;
	text-align:  center;
	 font-size: 52px;
	 font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
	
}
.header-dark-luar-footer{
	background-color: black;
	height: 90px;
}
.header-dark-luar-footer p{
	color: white;
	text-align: center;
	font-size: 25px;
}
/* xxxx header xxxxx */



/* xxxx inicio do blog xxxxx */
.blog-klua-intro-section-ico-border{
	height: 60px;
	background-color: black;
}
		.blog-klua-intro-section-ico{
			
			background-color: black;
				height:10px;
		
	
		}
.blog-klua-intro-section-box-mid-ico{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	
	
}
.blog-klua-intro-section-box-card-ico{
	  width:95px;
    height: 95px;
	background-image: url(  "../designer/d46bb6692124be089855240b242132fe.png");
	background-position: center;
	background-size: cover;
	border-radius: 60px;
	margin-top: -38px;
	border: 8px solid black;
}


/* xxxx blog klua intro xxx xxxxx */



/* xxxx blog klua social media xxx xxxxx */
.blog-klua-media-social{
	height: auto;
	
	
}

.blog-klua-media-social-box-mid{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: -65px;
	
}
.social-media-section-card-bg{
	width: 100%;
	height: 410px;
	background-image: url(  "imagens/social-media-bg.png");
	background-position: center;
	background-size: cover;
}
.social-media-section-card-icon-flw{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	margin-top: 95px;
}
.social-media-section-card-icon-img{
	margin: 8px;
}
.social-media-section-card-img-instagram{
	background-image: url( "../socialmedia/social-media-dark-moon/instagram.png");
	background-position: center;
	background-size: cover;
	width: 180px;
	height: 180px;
	filter: drop-shadow(5px 5px 8px #ff3399);
		
}
.social-media-section-card-img-tiktok{
	background-image: url( "../socialmedia/social-media-dark-moon/tiltok.png");
	background-position: center;
	background-size: cover;
	width: 180px;
	height: 180px;
	filter: drop-shadow(5px 5px 8px #ff3399);
}
.social-media-section-card-img-youtube{
	background-image: url( "../socialmedia/social-media-dark-moon/youtube.png");
	background-position: center;
	background-size: cover;
	width: 180px;
	height: 180px;
	filter: drop-shadow(5px 5px 8px #ff3399);
}
.social-media-section-card-img-whatsapp{
	background-image: url(  "../socialmedia/social-media-dark-moon/whatsapp.png");
	background-position: center;
	background-size: cover;
	width: 180px;
	height: 180px;
	filter: drop-shadow(5px 5px 8px #ff3399);
}
.social-media-section-card-img-email{
	background-image: url(  "../socialmedia/social-media-dark-moon/email.png");
	background-position: center;
	background-size: cover;
	width: 180px;
	height: 180px;
	filter: drop-shadow(5px 5px 8px #ff3399);
}
/* xxxx blog klua social media xxx xxxxx */


/* xxxx banners xxx xxxxx */

.separadora-hr-bg{
	background-color: black;
	height: auto;
}
.separadora-hr{
	background-image: url(  );
	background-position: center;
	background-size: cover;
	height:320px;
}
.separadora-hr-txt{
	height: 92px;
	padding: 5px;
	background-color: black;
}
.separadora-hr-txt p{
	text-align: center;
	color: white;
}
.separadora-hr-tag{
	height: 92px;
	padding: 8px;
	background-color: white;
}
.banner-dark-moon-s1{
	background-image: url( "imagens/1776526681891.jpg");
	height: 850px;
}

.em-breve-banner{
	height: 750px;
	background-color: white;
}

/* xxxx banners xxx xxxxx */






/* Linha HR temática */
.dark-hr{
    border:none;
    height:70px;
    margin:40px auto;
    width:90%;
    position:relative;
    overflow:visible;
}

/* Linha lateral */
.dark-hr::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(
        to right,
        transparent,
        #ff4fd8,
        #8b00ff,
        #ff4fd8,
        transparent
    );
    box-shadow:0 0 12px #ff4fd8;
    transform:translateY(-50%);
}

/* Lua central */
.dark-hr::after{
    content:"☾";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:38px;
    color:#ff66e0;
    background:#050505;
    padding:0 18px;
    text-shadow:
        0 0 10px #ff4fd8,
        0 0 20px #8b00ff,
        0 0 30px #ff4fd8;
    animation:moonGlow 2s infinite alternate;
}

@keyframes moonGlow{
    from{
        opacity:0.7;
        transform:translate(-50%,-50%) scale(1);
    }
    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.12);
    }
}
/* Linha HR temática */


/* Noticias Post */
.blog-post-index{
	height: auto;
	background-image: url(  "imagens/1776526681891.jpg");
	background-position: center;
	background-size: cover;
	
}
.blog-post-index-box-mid{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}


.blog-post-index-navbar-logo{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
	margin-top: 120px;
}
.blog-post-index-navbar-logo-bg{
	width: 70px;
	height: 70px;
	border-radius: 60px;
	background-image: url( "logo.png");
	background-position: center;
	background-size: cover;
}
.blog-post-index-navbar{
	width: 290px;
	height: 900px;
	margin-right: 30px;
	background-image: url(  "imagens/navbar2.png");
	background-position: center;
	background-size: cover;
	padding: 25px;
	text-align: center;
	filter: drop-shadow(5px 5px 15px #ff33cc);
	
}
.blog-post-index-navbar-margin{
	height: 120px;
}
.blog-post-index-navbar li {
	list-style: none;
	list-style-type: none;
	padding: 8px;
}
.blog-post-index-navbar a{
	color: #ffccf2;
	font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
	font-size: 20px
}
.blog-post-index-navbar a:hover{
	filter: drop-shadow(5px 5px 15px #ff33cc);
}
.blog-post-index-card-scroll-post{
background: #2A7B9B;
background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(33, 30, 29, 1) 0%, rgba(222, 51, 202, 1) 0%, rgba(3, 2, 2, 0.64) 0%, rgba(230, 25, 185, 0.51) 99%);
	height: 705px;
	width: 38%;
}
.blog-post-index-card-scroll-post h1{
	text-align: center;
	color: white;
	margin: 5px;
}
.dark-moon-button{
	display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.dark-moon-button-bg{
	width: 490px;
	height: 230px;
	margin-right: 30px;
	background-image: url(  "imagens/buttom.png");
	background-position: center;
	background-size: cover;
	filter: drop-shadow(5px 5px 15px #330026);
	text-align: center;
}
.dark-moon-button-bg-margin{
	height: 110px;
}
.dark-moon-button-bg a{
	color: #ffccf2;
	font-size: 45px;
	font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.dark-moon-button-bg a:hover{
	filter: drop-shadow(5px 5px 15px #ff33cc);
}
/* Noticias Post */





