/*------------------------------------------------------------------
Project:Make up Artist Template
Author: The_Krishna        
-------------------------------------------------------------------*/

/*----------------Table of contents Start---------------------------
1 Default css
2.Hero css
3.Social media css
4.Services css
5.Worksec css
6.Product css
7.Testimonial css
8.Client css
9.Price css
10.Appointment css
11.Blog css
12.Offer css
13.Inquiry css
14.Contact css
15.Map css
16.Bottom css
17.Scanner modal css
18.Share modal css
19.Single product css
20.Single blog css
21.Preloader
22.Work css

---------Table of contents End-----------------------------------*/

/*------------------------ [Color codes] ------------------------                     
Background:     #EED4C7 
Content:        #A6725D,#141414,#D39E7E,#737373 
-------------------------------------------------------------------*/

/************************ 1 Default css ***************************/
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	width: 100%;
	height: 100%;
}
*, ::after, ::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
a:focus, a {
	outline: none;
	text-decoration: none;
	cursor: pointer;
} 
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	padding: 0;
}

/*--------color de fondo ----------*/ 

body {
	max-width: 425px;
	margin: 0 auto;
	height: 100%;
	background: #003785; /*--------color de fondo ----------*/ 
}
svg{
	vertical-align: middle;
}
input{
	outline-width: 0;
	outline-offset: 0;
	outline: 0;
	border: none;
	outline: none;
	width: 100%;
}
textarea{
	outline-width: 0;
	outline-offset: 0;
	outline: 0;
	resize: none;
}
ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
::-webkit-scrollbar { 
	display: none; 
}
.overflow{
	overflow-y: scroll;
}
.container{
	padding: 0 16px;
}
.mt-30{
	margin-top: 30px;
}
.mt-20{
	margin-top: 20px;
}
.mt-15{
	margin-top: 15px;
}
.mt-10{
	margin-top: 10px;
}
.mt-5{
	margin-top: 5px !important;
}
.pt-20{
	padding-top: 20px;
}
.mlr-auto{
	margin-left: auto;
	margin-right: auto;
}

/* -----------Fondo De Interior Tarjeta -----------*/
.ceo-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: #81c9fa; /* -----------Fondo De Interior Tarjeta -----------*/
	padding-bottom: 20px;
}
.red-color{
	filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(1773%) hue-rotate(332deg) brightness(88%) contrast(87%);
}
.site-content{
	width: 100%;
	height: 100%;
}

/************************ 2.Hero css ***************************/
.hero-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding-top: 15px;
}


/* --------Fondo del Cuadrado De inicio -------*/ 
.hero-logo {
	width: 72px;
	height: 72px;
	border-radius: 36px;
	background: var(--1, #81c9fa); /* --------Fondo del Cuadrado De inicio -------*/  
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-sec {
	background: url(../images/hero-sec/bg-img.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 220px;
}
.bottom-shape{
	position: absolute;
	bottom: 0;
	width: 100%;
}
.custom-language-btn {
	padding: 0;
	margin: 0;
	padding: 4px 8px 4px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 32px;
	border-width: 0 !important;
	border-radius: 16px;
	background: var(--20, #b9ffff);
	backdrop-filter: blur(8px);
	color: var(--1, #b9ffff);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}
.custom-language-btn:hover,
.custom-language-btn:active,
.custom-language-btn:focus,
.dropdown-item:active,
.btn.show,
.dropdown-item:hover
{
	background: var(--20, #1465bb) !important;
	color: var(--1, #1465bb) !important;
}

/* --------Contorno Del Circulo Imagen Perfil------------*/
.oval-frame {
	border: 5px solid white;
	border-radius: 50%;
}

/* ------------------COlor Del  titulo pirncipal Nombre De La Empresa----------*/ 
.profile-name h1 {
	color: var(--20, black);
	font-family: Poppins;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px;
}

/* -------------------- Color Descripcion de la Empresa -----------*/ 
.profile-name p {
	color: var(--26, #141414);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}
.profile-sec {
	display: flex;
	align-items: end;
	gap: 16px;
	width: 100%;
}
.profile-sec-content {
	margin-top: -80px;
	z-index: 99;
	position: relative;
}
.flag-icon {
	width: 25px;
	height: 20px;
	margin-right: 10px;
}


.dropdown-item {
	color: var(--14, #b9ffff);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}

/************************ 3.Social media css ***************************/
.social-icon-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}


/* ---------------------------Fondo de los iconos de compARTIR ------- */

.social-icon-content-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(0, 55, 133, 0.873);  /*---SOMBRAS ICONOS PARA COMPARTIR ------*/ 
	border-radius: 12px;
	padding: 8px;
	border: 1px solid transparent;
}

/* --------------------- Contorno de los iconos para compartir  ------------------------*/
.social-icon-content-wrap:hover {
	transition: all 0.3s ease-in-out;
	border: 1px solid #2196f3;
	border-radius: 0;
	background: transparent;
}


/* -------------------------- 1er parrafo Descripcion Negocio ----------------*/  
.social-icon-para p {
	color: var(--26, #141414);
	text-align: center;
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/************************ 4.Services css ***************************/

/* ------------------------ Titulo pequeño De servicios ---------------*/ 
.makeup-services-top p {
	color: var(--17, #FFF);
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 16px;
}

/* ------------------------ Titulo Grande y principal  De servicios ---------------*/ 
.makeup-services-top h2 {
	color: var(--20, #141414);
	text-align: center;
	font-family: Poppins;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	text-transform: capitalize;
}
.services-img img {
	border-radius: 6px;
}

/* ----------------------- titulos De los  servicicios ----------------------*/  
.services-content h3,
.work-content h3 {
	color: var(--26, #FFF);
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
}

/* -------------------------------- Descripcion de los servicios --------------------------*/ 
.services-content ul li,
.services-content p,
.work-content p {
	color: var(--14, #141414);
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}
.services-content ul {
	list-style-type: disc;
	padding-left: 16px;
}
.services-bottom-wrap {
	display: flex !important;
	gap: 15px;
}
.slick-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	margin-top: 15px;
}

/* ---------------------------------- Botonoes de desplazar la informacion ---------------------------------*/ 
.slick-dots button {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: #003785;
	text-indent: -9999px;
}

/*-------------------------------- Barra de los botenes de desplazar la infromacion -----------------*/ 
.slick-dots li.slick-active button{
	background-color: #003785;
	width: 30px;
	height: 10px;
}

/************************ 5.Worksec css ***************************/
.work-bottom-sec-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.work-content{
	text-align: center;
	width: 33.33%;
}

/************************ 6.Product css ***************************/
/*--------------------- Contorno de nuestros Productos ----------------*/ 
.product-slide {
	border-radius: 12px;
	border: 1px solid var(--10, #003785);
	background: var(--1, #FFF); /*-------- Caja de Nuestros PRoductos----*/
	box-shadow: 5px 5px 10px 0px rgba(6, 166, 166, 0.20);  /*----- Fondo Caja prodcuctos---*/ 
	padding: 10px;
	width: min-content;
}

/*------------------------------------- fONDO CAJA DE FLECHAS DE NUSTRO PRODUCTO ------------------------------*/ 
.product-sec .slick-custom-arrow {
	position: absolute;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	background: #000000;
}
.product-sec .slick-custom-arrow-left {
	left: 5px;
	top: 84px;
}
.product-sec .slick-custom-arrow-right {
	right:5px;
	top: 84px;
}

/*-------------------------------- fLECHAS DE NUESTRO PRODUCTO----------------------------------*/ 
.product-sec i.fa-solid.fa-arrow-right, 
.product-sec i.fa-solid.fa-arrow-left {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: white;
}
.slick-list {
	padding-left: 16px;
}
.slick-slide {
	padding-right: 16px;
}

/*------------------- TITULO DENTRO DE LA CAJA DE NUESTROS PRODCTOS ------------------*/ 
.product-bottom h3 {
	color: var(--26, #141414);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
}

/*----------------------------- DESCRIPCION DE LA CAJA DE PRODUCTOS------------*/ 
.product-bottom p {
	color: var(--14, #737373);
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}
.product-img img {
	border-radius: 6px;
	width: 100%;
}


.product-price p {
	width: 100%;
	border-radius: 5px;
	background: var(--17, #003785); /*------- FONDO DE LA CAJA DE  PRECIO--------*/ 
	padding: 6px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--1, #FFF);   /*--------------------------- COLOR DE PALABRAS DE CAJA DE PRECIO---*/ 
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
}


.view-product a {
	color: var(--1, #FFF); /*--------- lETRAS DE OTROS SERVICIOS ---------------*/ 
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	border-radius: 5px;
	background: var(--20, #003785);   /*------------------ fONDO DE OTROS SERICIOS ---------------------*/ 
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	border: 1px solid #003785; /* --------------------- mARGEN DE CUADRO DE OTROS SERVICIOS ------*/ 
	transition: all 0.3s ease-in-out;
}


.view-product a:hover{
	color:#003785; /*-------------- COLOR AL DAR CLICK EN LA CAJA DE OTROS SERVICIOS --------------*/ 
	background: transparent;
	border: 1px solid #003785; /*--------------- mARGEN AL DAR CLICK EN CAJA DE OTRS SERVICIOS ----- */ 
	transition: all 0.3s ease-in-out;
}
.gallery-img img{
	border-radius: 12px;
	width: 100%;
}

.gallery-sec {
	background: #F5F5F5; /*------------------ FONDO DE NUESTRAS OBRAS -----*/ 
	padding-top: 30px;
	padding-bottom: 30px;
}

/************************ 7.Testimonial css ***************************/
.testimonial-sec {
	background: #141414;
	padding: 30px 0;
}
.client-img-sec{
	border-radius: 50%;
}
.testimonial-sec-content h3 {
	color: var(--1, #FFF);
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
}
.testimonial-sec-content p {
	color: var(--10, #A6A6A6);
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}
.testimonial-sec-content {
	border: 1px solid var(--17, #7f0000);
	padding: 20px 15px;
	margin: 0 16px;
}
#testimonial-slider .carousel-control-prev-icon {
	background-image: url(../svg/left-slider-icon.svg) !important;
}
#testimonial-slider .carousel-control-next-icon  {
	background-image: url(../svg/right-slider-icon.svg) !important;
}
#testimonial-slider .carousel-control-next-icon, 
#testimonial-slider .carousel-control-prev-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size:unset !important;
	border-radius: 20px;
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(359deg) brightness(105%) contrast(101%);
}
#testimonial-slider .carousel-control-next, 
#testimonial-slider .carousel-control-prev{
	top: unset;
	bottom: unset;
	z-index: 1;
	display: inline-flex;
	border: 0;
	opacity: 1;
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 10%);
	border-radius: 50%;
}
#testimonial-slider .carousel-control-prev {
	left: 40px;
	bottom: 20px;
}
#testimonial-slider .carousel-control-next {
	right: 40px;
	bottom: 20px;
}

/************************ 8.Client css ***************************/
.logo-slide-wrap {
	width: 100%;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

/************************ 9.Price css ***************************/
.price-sec {
	background: var(--16, #F5F5F5);
	padding: 30px 0;
}
.price-content {
	background: var(--1, #FFF);
	padding: 20px;
}
.contact-price a {
	width: fit-content;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--1, #FFF);
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
	border-radius: 5px;
	background: var(--20, #7f0000);
	margin: 0 auto;
}
.price-txt1 {
	color: var(--26, #141414);
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
}
.price-content h2 {
	color: var(--17, #D39E7E);
	text-align: center;
	font-family: Poppins;
	font-size: 64px;
	font-style: normal;
	font-weight: 700;
	line-height: 64px;
}
.price-txt2 {
	color: var(--26, #7f0000);
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}

/************************ 10.Appointment css ***************************/
.appointment-sec .info-person{
	color: var(--26, #141414);
}
.appointment-sec{
	padding-top: 30px;
	padding-bottom: 30px;
}
.appointment-form {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
}
.appointment-date {
	width: 50%;
}
.input-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px;
	column-gap: 12px;
	border-radius: 12px;
	border: 1px solid var(--10, #A6A6A6);
	background: var(--1, #FFF);
	box-shadow: 5px 5px 10px 0px rgba(166, 166, 166, 0.20);	
}
select:focus-visible{
	outline: 0;
}
.ui-datepicker-header a.ui-datepicker-next {
	right: 0;
	background: url(../svg/right-arrow.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 50%;
}
.ui-datepicker-header a.ui-datepicker-prev {
	left: 0;
	background: url(../svg/right-arrow.svg);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 50%;
	transform: rotate(180deg);
}
.ui-datepicker-header a>span {
	display: none;
}
#ui-datepicker-div {
	display: none;
	background-color: #fff;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
	margin-top: 0.25rem;
	border-radius: 0.5rem;
	padding: 0.5rem;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.ui-datepicker-calendar thead th {
	padding: 0.25rem 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 400;
	color: #78909C;
}
.ui-datepicker-calendar tbody td {
	width: 2.5rem;
	text-align: center;
	padding: 0;
}
div#ui-datepicker-div {
	z-index: 500 !important;
}
.ui-datepicker-calendar tbody td a {
	display: block;
	border-radius: 0.25rem;
	line-height: 2rem;
	transition: 0.3s all;
	color: #546E7A;
	font-size: 0.875rem;
	text-decoration: none;
}
.ui-datepicker-calendar tbody td a:hover {
	background: rgb(166 114 93 / 8%);
}
.ui-datepicker-calendar tbody td a.ui-state-active {
	background: var(--11, #a6725d);
	color: white;
}
.ui-datepicker-header a.ui-corner-all {
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 2rem;
	height: 2rem;
	margin: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.3s all;
}
.ui-datepicker-title {
	text-align: center;
	line-height: 32px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	font-family: Poppins;
}

/************************ 11.Blog css ***************************/
.makeup p {
	background: var(--26, #141414);
	padding: 5px;
	width: fit-content;
	color: var(--10, #A6A6A6);
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
}
.blog-details p {
	color: var(--10, #A6A6A6);
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
}
.blog-details h3 {
	color: var(--26, #141414);
	text-align: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 30px;
}
.blog-details {
	background: #F5F5F5;
	padding: 15px 20px 20px 20px;
	margin: 0 30px;
	margin-top: -30px;
	position: relative;
	z-index: 99;
}
.makeup {
	position: absolute;
	top: 10px;
	left: 10px;
}
.blog-content {
	position: relative;
}
.blog-content:hover .blog-details h3 {
	color: #98ff96;
}

/************************ 12.Offer css ***************************/
.offer-sec{
	background: url(../images/main-img/discount-img.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 260px;
	background-color: var(--26, #141414);
}
.offer-txt h2 {
	color: var(--18, #EED4C7);
	text-align: right;
	font-family: Poppins;
	font-size: 64px;
	font-style: normal;
	font-weight: 700;
	line-height: 64px; 
}
.offer-txt h3,
.offer-txt h4 {
	color: var(--18, #EED4C7);
	text-align: right;
	font-family: Poppins;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}
.offer-txt h4{
	color: var(--1, #FFF) !important;
}
.offer-content {
	padding: 15px;
	border: 1px solid var(--18, #98ff96);
}
.offer-sec-wrap-bg {
	padding: 15px;
}
.offer-txt {
	width: 50%;
	margin-left: auto;
}

/************************ 13.Inquiry css ***************************/
.input-wrapper-form {
	border-radius: 12px;
	border: 1px solid var(--10, #A6A6A6);
	background: var(--1, #FFF);
	box-shadow: 5px 5px 10px 0px rgba(166, 166, 166, 0.20);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
}
.info-person {
	color: var(--14, #737373);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px;
	text-transform: uppercase;
	width: 100%;
}
.input-wrapper-form input,
.input-wrapper-form textarea {
	color: var(--10, #A6A6A6);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}
.input-wrapper-form input::placeholder{
	color: var(--10, #A6A6A6);
}
.inquiry-sec {
	background: rgb(166 114 93 / 8%);
	padding-top: 30px;
	padding-bottom: 30px;
}

/************************ 14.Contact css ***************************/
.contact-details {
	display: flex;
	gap: 12px;
	border-radius: 12px;
	background: rgba(0, 216, 171, / 8%); /*---- fONDO DE LAS CAJAS DE CONTACTO --------*/ 
	padding: 12px;
}
.contact-icon {
	border-radius: 6px;
	background: #141414;     /* ----------- FONDO DE LAS CAJAS DE ICONOS ----*/ 
	padding: 10px;
	width: 44px;
	height: 44px;
}
.contact-content h4 {
	color: var(--14, #737373); /* --------------- tITULOS DE LAS CAJAS DE CONTACTO ------------------------*/ 
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px; 
	text-transform: uppercase;
}
.contact-content p {
	color: var(--2, #000);     /*------------------- cONTENIDO DE LA CAJA DE CONTACTO----------*/ 
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	transition: all 0.3s ease-in-out;
}
.contact-content p:hover {
	text-decoration: underline;
	color: #009d6f !important;  /* -------cAMBIO DE COLOR EN CAJAS AL DPASAR MOSUE---*/ 
	transition: all 0.3s ease-in-out;
}
.contact-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.days-txt {
	color: var(--2, #000);       /* --------------------- HORARIO COMERCIAL LETRAS----*/ 
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 26px;
}
.contact-list .time-txt {
	color: var(--2, #000);           /*---------- HORARIO COMERCIAL NUMEROS ------------*/ 
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	width: 55%;
}
.contact-content {
	width: 90%;
}

/************************ 15.Map css ***************************/
.map-img iframe{
	width: 100%;
	height: 250px;
	border-radius: 12px;
}

/************************ 16.Bottom css ***************************/
.add-to-btn {
	margin-left: auto;
}
.add-to-contact {
	position: fixed;
	width: 100%;
	bottom: 0;
	max-width: 425px;
	left: 0;
	right: 0;
	padding-bottom: 20px;
	z-index: 99;
}
.add-to-contact-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}
.scan-btn {
	width: 60px;
	height: 60px;
	background: var(--20, #003785); /*----- FONDO BOTONES DE SHARE O COMPARTIR  Y QR --------*/ 
	filter: drop-shadow(0px 4px 8px rgba(0, 55, 133, 0.32)); /*--- sOMBBRA DE BOTONES COMPARTIR Y QR -------*/ 
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.add-to-btn-sec {
	display: flex;
	align-items: center;
	border-radius: 30px;
	background: var(--2, #000);
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.32);
	padding: 6px 6px 6px 30px;
	justify-content: end;
	width: fit-content;
	gap: 8px;
}
.plus-btn {
	border-radius: 24px;
	background: var(--1, #FFF);
	padding: 12px;
}
.add-txt {
	color: var(--1, #FFF);
	text-align: center;
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
}
.footer p {
	color: var(--2, #000); /*----cOLOR DE LA MARCA QUE VA HASTA ABAJO ------*/ 
	text-align: center;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

/************************ 17.Scanner modal css ***************************/
#product-modal,
#share-media-modal {
	background: linear-gradient(180deg, rgba(18, 21, 28, 0.56) 0%, rgba(18, 21, 28, 0.24) 100%); /*-- SOMBRA VENTNA COMPARTIR*/
	backdrop-filter: blur(4px);
}
#product-modal .modal-content,
#share-media-modal .modal-content {
	border-radius: 24px;
}
.scan-content {
	text-align: center;
	border: 2px solid #003785; /*----------- cONTORNO DE CUADRO QR ------------*/ 
	height: auto;
	width: 250px;
	margin: 0 auto;
	padding: 12px;
	border-radius: 8px;
}
.scanner img {
	width: 100%;
    height: auto;
}
.scan-txt {
	padding: 14px;
	background: #003785; /* ------------- FONDO DE QR ESCANEAME----------------------- */ 
	border-radius: 8px;
}
.scan-txt p {
	color: var(--2, #fff); /*----------------------- LETRAS ESCANEAME -----------*/ 
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}
.btn1 a {
	color: var(--1, #FFF);    /* ------------------ COLOR DE LETRAS DE ESCANERA Y COMPARTIR-----------*/ 
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	border-radius: 8px;
	background: #000000;  /*---------------FONDOS DE CUDFRO DE DESCRAGRA Y COMPARTIR ---------------------*/ 
	padding: 12px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.qr-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.btn1 {
	width: 140px;
}
.modal-title{
	color: var(--2, #000);   /*----------- TITULO DE COMPARTIR DE REDES SOCIALES ------------------*/ 
	font-family: Poppins;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; 
}

/************************ 18.Share modal css ***************************/
.social-media-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.social-media-img {
	width: 60px;
	height: 60px;
	background: transparent;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out; 
}
.social-media-img:hover {
	background: #003785; /*------------- FONDO AL PASAR MOUSE EN ICONOS PARA COMPARTIR -------------*/ 
	transition: all 0.3s ease-in-out;
}
.social-media-img img {
	filter: brightness(0) saturate(100%) invert(0%) sepia(99%) saturate(3%) hue-rotate(13deg) brightness(99%) contrast(100%);
	width: 30px;
	height: 30px;
}
.social-media-img:hover.social-media-img img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(7%) hue-rotate(323deg) brightness(104%) contrast(102%);
	transition: all 0.3s ease-in-out;
}

/************************ 19.Single product css ***************************/
.product-content-main {
	background: white;
	height: 100%;
	width: 100%;
	overflow: auto;
	padding-bottom: 20px;
}
#product-main .product-sec-wrap, 
#blog-main .product-sec-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}
.product-title {
	color: var(--2, #000);
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	text-transform: uppercase;
}
.buy-now a {
	color: var(--1, #FFF);
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	border-radius: 5px;
	background: var(--15, #98ff96);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
}
#product-main .product-slide{
	width: 100%;
}
.single-product {
	display: flex;
	align-items: center;
	gap: 12px;
}
.product-price.buy-now-product a{
	border: 2px solid #A6725D !important;
	background: transparent !important;
	color: #98ff96 !important;
	padding: 8px;
	display: flex;
}
.product-price.buy-now-product a:hover{
	background: #A6725D !important;
	border: 2px solid transparent !important; 
	color: white !important;
	transition: all 0.3s ease-in-out;
}
.custom-lbl-feedback {
	color: var(--2, #000);
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
}
.feedback-email input, .custom-textarea-product, .custom-select-subject select {
	border-radius: 12px;
	border: 1px solid var(--10, #f50101) !important;
	box-shadow: 5px 5px 10px 0px rgba(166, 166, 166, 0.20);
	padding: 14px;
	width: 100%;
	color: var(--14, #737373);
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	margin-top: 5px;
}
.product-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: end;
}
.discard-btn a {
	background: #737373;
	color: white;
}

/************************ 20.Single blog css ***************************/
#blog-modal .modal-content,
#work-modal .modal-content{
	background: #161616;
	border: 2px solid rgb(115 115 115 / 34%);
	border-radius: 24px;
}
.date-type i, .admin-type i, .comments-type i {
	color: #98ff96;
	margin-right: 5px;
}
blockquote {
	padding: 40px 40px 10px 40px;
	font-size: 15px;
	border-left: none;
	font-style: italic;
	position: relative;
}
.blog-content h4,
.work-top-content h3 {
	font-size: 24px;
	color: #fff;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
}
.blog-meta span,
.list-style-one li {
	color: #b1b1b1;
	font-size: 14px;
	font-weight: 400;
	padding-right: 10px;
	font-family: 'Poppins', sans-serif;
}
.list-style-one {
	padding-left: 16px;
}
.blog-content p,
.work-top-content p {
	letter-spacing: 0.50px;
	color: #b1b1b1;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}
blockquote p {
	font-size: 16px !important;
	line-height: 28px;
	color: #c5c5c5 !important;
}
blockquote::before {
	position: absolute;
	top: 20px;
	left: 0px;
	content: "\f10d ";
	font-family: fontawesome;
	font-size: 34px;
	color: #c5c5c5;
}
.blog-content h5,
.widget-title {
	font-size: 18px;
	color: #f5f5f5;
	margin: 20px 0px;
	font-family: 'Poppins', sans-serif;
}
.img-blog img {
	float: left;
	width: 50%;
	height: 100%;
	max-height: 450px;
	object-fit: cover;
}
.img-blog .b-image-one {
	padding-right:7px;
}
.img-blog .b-image-two {
	padding-left: 7px;
}
.img-blog {
	margin: 15px 0px 15px;
	overflow: hidden;
}
#blog-modal,
#work-modal {
	background: black;
	backdrop-filter: blur(4px);
}
#blog-modal .modal-content{
	border-radius: 24px;
}
.btn-close{
	opacity: 1;
}
#work-modal .btn-close,
#blog-modal .btn-close{
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(107deg) brightness(109%) contrast(101%);
}
.btn-close:focus{
	box-shadow: none;
}
.comments-heading h3 {
	border-bottom: 1px solid #666;
	color: #c5c5c5;
	font-size: 18px;
	padding: 0 0 10px;
	text-transform: capitalize;
	font-family: 'Poppins', sans-serif;
}
.post-img {
	display: inline-block;
	float: left;
	padding-right: 15px;
}
.pst-content p a {
	color: #fff;
	font-size: 15px;
	font-family: 'Poppins', sans-serif;
}
.pst-content .date-type {
	font-size: 14px;
	color: #999999;
	line-height: 28px;
	font-family: 'Poppins', sans-serif;
}
.recent-single-post img {
	width: 100%;
	max-width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid #98ff96;
}
.recent-single-post {
	display: block;
	overflow: hidden;
	padding: 15px 0px;
}
.pst-content {
	padding-left: 20px;
	padding-top: 10px;
}
#blog-modal .social-icon-content-wrap{
	background: white;
	border-radius: 50%;
}
.social-icon-content-modal.mt-15 {
	display: flex;
	align-items: center;
	gap: 12px;
}

/************************ 21.Preloader ***************************/
canvas {
	position: fixed;
	top: 0;
	z-index: -1;
	height: 100vh;
	left: 0;
}
.preloader {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	background: white; /*-------------------- FONDO CUANDO ESTA CARGANDO -----------------*/ 
	z-index: 999;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#square5 {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 60px;
	width: 60px;
	margin: -25px 0 0 -25px;
}
#square5 span {
	width: 25px;
	height: 25px;
	display: inline-block;
	-webkit-animation: square5 1.7s infinite ease-in-out both;
	animation: square5 1.7s infinite ease-in-out both;
}
#square5 span:nth-child(1) {
	left: 11px;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	background: #98ff96;   /*------ rECTANGULO CUANDO ESTA CARGANDO ---------*/ 
}
#square5 span:nth-child(2) {
	left: 22px;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
	background: #98ff96; /*------ rECTANGULO CUANDO ESTA CARGANDO ---------*/ 
}
#square5 span:nth-child(3) {
	left: 33px;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
	background: #271F1F; /*------ rECTANGULO CUANDO ESTA CARGANDO ---------*/ 
}
#square5 span:nth-child(4) {
	left: 44px;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	background: #98ff96; /*------ rECTANGULO CUANDO ESTA CARGANDO ---------*/ 
}
@keyframes square5 {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}

	50% {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

	100% {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
}

/************************ 22.Work css ***************************/
.list-style-one li {
	display: flex;
}
.list-style-one li:before {
	width: 20px;
	height: 20px;
	flex: none;
	color: #fff;
	margin-top: 4px;
	font-size: 10px;
	line-height: 20px;
	background: #98ff96;
	content: "\f00c";
	font-weight: 600;
	margin-right: 10px;
	border-radius: 50%;
	text-align: center;
	font-family: Font Awesome\ 5 Free;
}
.services-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.product-add-content{
	background-image: url(../images/gallery/popup4.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	position: relative;
}