/* TABLE OF CONTENTS:
----------------------------------------------------------------

--------------------------------------------------------------

1. Default Theme CSS
    1.1 Preloader
    1.2 Section Heading
    1.3 Section Button
    1.4 Section Pattern Animation

2. Menu Area CSS
    2.1 Menu CSS
    2.2 Drop Down Menu CSS
    2.3 Sticy Menu CSS
    2.4 Fullscreen Search CSS

3. Header Area CSS
	3.1 Header Pattern Image
	3.2 Header ArtWork Animation
	3.3 Intro Text
	3.4 Header Button

4. Home About Area CSS
	4.1 Home About Content

5. Service Area CSS
	5.1 Curve SVG
	5.2 Single Service Pattern
	5.3 Single Service Animation
	5.4 Single Service Text

6. Portfolio Area CSS
	6.1 Portfolio Pattern
	6.2 Portfolio Item
	6.3 Portfolio Item Arrow

7. Expertise Area CSS

8. Counter Area CSS
	8.1 Single Counter

9. Testimonial Area CSS
	9.1 Left Content
	9.2 Right Content
	9.3 Testimonial Arrow

10. Pricing Area CSS
	10.1 Single Price
	10.2 Single Price Button
	10.3 Price Pattern Animation

11. Blog Area CSS	
	11.1 Single Blog Image
	11.2 Single Blog PostDate
	11.3 Single Blog Content

12. Footer Area CSS
	12.1 Footer Social
	12.2 Footer Content
	12.3 Copyright Text


++++++OTHER PAGES++++++


13. Blog Details Page
	13.1 Blog Banner
	13.2 Blog Side
	13.3 Blog Search
	13.4 Blog Social Share
	13.5 Blog Author
	13.6 Blog Category
	13.7 Blog Tags
	13.8 Blog Comments
	13.9 Blog Comments Reply

14. Blog List Area CSS
	14.1 Blog Pagination

15. Team Area CSS
	15.1 Team Banner
	15.2 Team Content
	15.3 Team Social

16. Contact Us Area CSS
	16.1 Contact Us Banner
	16.2 Contact Pattern
	16.2 Contact Pattern
	16.3 Single Contact Info
	16.4 Contact Form
	16.5 Contact Form Button

17. Portfolio Area CSS
	17.1 Portfolio Banner
	17.2 Portfolio Content
	17.3 Portfolio Filtering

18. Portfolio Details Area CSS
	18.1 Project  Description
	18.2 Project  Technology
	18.3 Project  Slider

19. About Us Area CSS
	19.1 About Us Banner
	19.2 About Hero Text
	19.3 About Video
	19.4 About Video Icon
	19.5 About Counter
	19.6 About Section Content

20. 404 Area CSS

21. Call to Action
--------------------------------------------------------------

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

/*==================== 1. Default Theme CSS ===================*/

html,
body {
	font-family: 'Montserrat', sans-serif !important;
	height: 100%;
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased; /* Opcional: hace que la letra se vea más fina y pro */
	
}

::-moz-selection {
	background: #FF88A7;
	color: #f7f7f7;
	text-shadow: none;
}

::selection {
	background: #FF88A7;
	color: #f7f7f7;
	text-shadow: none;
}

a:focus {
	outline: 0px solid
}

img {
	width: auto;
	height: auto
}

p {
	font-family: 'Montserrat', sans-serif !important; 
	font-weight: 400; /* Peso ligero para elegancia */ 
	line-height: 1.6; /* Más espacio entre líneas para que sea fácil de leer */ 
	color: #363636;  
	margin-bottom: 20px; 
}

h1, h2, h3, h4, h5, h6 { 
	font-family: 'Montserrat', sans-serif !important; 
	font-weight: 900 !important; 
	text-transform: uppercase; 
	letter-spacing: -2px; 
	line-height: 0.85; 
	margin: 0 0 15px; /* Mantenemos un margen abajo similar al que tenías */ 
}

/* Jerarquía de tamaños para Corredor Cinema */ 
h1 { 
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */ 
} 
h2 { 
	font-size: clamp(2.5rem, 8vw, 4.5rem); /* Títulos de sección */ }
h3 { 
	font-size: clamp(2rem, 6vw, 3.5rem); /* Subtítulos importantes */ 
} 
h4, h5 { 
	font-size: 1.5rem; letter-spacing: 0px; /* Un poco más de aire para textos pequeños */ 
	
}



.credits-wall {
    padding: 80px 10%;
    background-color: #141414;
    text-align: center;
}

.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1px));
    gap: 40px;
    margin-top: 50px;
}

/* Una línea sutil para separar */
.credit-item {
    border-left: 1px solid #727272; 
    padding-left: 20px;
    text-align: left;
}

.credit-item p {
    font-style: italic;
    
    line-height: 1.6;
}

.credit-item span {
    display: block;
    margin-top: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size: 0.9rem;
    color: #141414;
}



a {
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

a:hover {
	color: #FF88A7;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0 none;
}

ul {
	list-style: outside none none;
	margin: 0;
	padding: 0
}

.container {
	max-width: 1300px;
}

.default-margin-mt {
	margin-top: 30px
}

#scrollUp {
	bottom: 0;
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	right: 10px;
	text-align: center;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	font-size: 45px;
}

/* 1.1 Preloader*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FF88A7;
	z-index: 9;
	height: 100%;
}

#status {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100;
	height: 100;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 9;
}

#status img {
	height: 100%;
	width: 100%;
}

/*1.2 Section Heading*/

.section-heading-1 h4 {
	font-size: 23px;
	text-transform: capitalize;
}

.section-heading-1 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block
}

.section-heading-1 h3:before {
	position: absolute;
	content: '';
	right: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.section-heading-1 p {
	color: #363636;
}



.section-heading-2 {
	padding-bottom: 45px
}

.section-heading-2 h4 {
	font-size: 23px;
	text-transform: capitalize;
}

.section-heading-2 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block
}

.section-heading-2 h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.section-heading-2 p {
	color: #363636
}

.section-heading-3 {
	padding-bottom: 45px;
	text-align: left;
}

.section-heading-3 h4 {
	font-size: 23px;
	text-transform: capitalize;
}



.section-heading-3 h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block
}

.section-heading-3 h3:before {
	position: absolute;
	content: '';
	left: 0%;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.section-heading-3 p {
	color: #363636
}



/*1.3 Section Button*/
.section-button a {
	background: linear-gradient(270deg, #727272 0%, #727272 100%);
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 0px;
	color: #f7f7f7;
	padding: 10px 30px;
	font-weight: 700;
	font-size: 18px;
	text-transform: capitalize;
	margin-top: 25px;
	display: inline-block;
}

.section-button a:hover {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
	font-size: 22px;
}

.section-button img {
	width: 40%;
	
	
}

/*1.4 Section Pattern Animation*/
.e-pattern {
	position: absolute;
	right: 360px;
	top: 200px;
	z-index: -1;
}

.e-pattern img {
	-webkit-animation: ep 3s linear infinite;
	animation: ep 3s linear infinite;
}

@keyframes ep {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*=========2. Menu Area CSS==========*/
.main-navigation {
	width: 100%;
	background-color: #141414;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
}

.logo-area img {
	padding: 26px 0;
	width: 250px;
}

/*2.1 Menu CSS*/
.main-menu {
	margin-right: 85px;
}

.main-menu ul li {
	display: inline-block;
	margin-left: 25px;
	position: relative;
}

.main-menu ul li a {
	color: #f7f7f7;
	display: inline-block;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1px;
	position: relative;
	font-weight: 700;
	padding: 54px 0 42px 0;
	transition: .5s
}

.main-menu ul li a:hover {
	color: #FF88A7;
	font-size: 24px;
}

.main-menu ul li a:before {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #FF88A7;
	left: 0;
	top: 67%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply
}

.main-menu ul li a:after {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #FF88A7;
	right: 0;
	top: 67%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;
	
}

.main-menu ul li a.current:before {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #FF88A7;
	left: 0;
	top: 67%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;

}

.main-menu ul li a.current:after {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #FF88A7;
	right: 0;
	top: 67%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;
	
}

.main-menu ul li a.current {
	color: #FF88A7;
}

.main-menu ul li a:hover:before {
	width: 50%;
	-webkit-transform: translateX(100%);
	transform: translateX(100%)
}

.main-menu ul li a:hover:after {
	width: 50%;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%)
}

.f-right {
	float: right;
}

.mean-container .mean-nav {
	margin-top: 0;
	background: rgba(25, 25, 25, 0.8);
}

.main-menu ul li i {
	margin-left: 5px;
}

#mobile-menu {
	display: block;
}

/*2.2 Drop Down Menu CSS*/
.main-menu ul li ul.dropdown {
	position: absolute;
	right: 0;
	top: 130%;
	width: 350px;
	background-color: #f7f7f7;
	-webkit-box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	border: solid 1.9px;
	border-image: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	border-image-slice: 1;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .5s;
	transition: .5s;
	padding: 15px;
}

ul.dropdown li a:before {
	position: absolute;
	content: '';
	background-color: transparent;
	height: 0;
	left: 0;
	top: 0;
	opacity: 0
}

ul.dropdown li a:after {
	position: absolute;
	content: '';
	background-color: transparent;
	height: 0;
	right: 0;
	top: 0;opacity: 0
}

.main-menu ul li:hover ul.dropdown {
	top: 106%;
	opacity: 1;
	visibility: visible
}

.main-menu ul li ul.dropdown li a:hover {
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text
}

.main-menu ul li ul.dropdown li {
	display: block;
	margin-left: 15px
}

.main-menu ul li ul.dropdown li a {
	padding: 12px 0px;
	-webkit-transition: .5s;
	transition: .5s;
	position: relative;
	color: #727272;
	font-weight: 600
}

/*2.3 Sticy Menu CSS*/

.main-navigation.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	background: #141414;
	-webkit-box-shadow: transparent;
	box-shadow: transparent;
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	-webkit-animation: sticky 1s;
	animation: sticky 1s;
}



@-webkit-keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

@keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

/* 2.4 Fullscreen Search CSS*/
#search {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #FF88A7;
	background: -webkit-gradient(linear-gradient, left top, right top, from(rgba(35, 35, 35, 0.9)), to(rgba(92, 92, 92, 0.9)));
	background: linear-gradient(270deg, #727272 0%, #727272 100%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	opacity: 0;
	-webkit-transition: all .3s;
	transition: all .3s;
	will-change: transform, opacity;
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	visibility: hidden
}

.search-icon-area {
	position: absolute;
	right: 20px;
	top: 29px;
}

.search-icon-area i {
	background-color: #f7f7f7;
	color: #FF88A7;
	font-size: 20px;
	padding: 13px;
	border-radius: 50%
}

.close-btn:hover {
	color: #363636;
}

#search:target {
	height: 100vh !important;
	opacity: 1;
	-webkit-transition: .4s;
	transition: .4s;
	visibility: visible
}

#search:target .close-btn {
	display: block;
}

#searchbox {
	background: transparent;
	border: solid #f7f7f7;
	border-width: 0 0 1px 0;
	color: #f7f7f7;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	font-size: 25px;
	max-width: 66%;
	outline: 0;
	padding: 10px 3px;
}

.close-btn {
	display: none;
	color: #f7f7f7;
	font-size: 2rem;
	position: absolute;
	top: 0.5rem;
	right: 2rem;
}


/*======= 3. Header Area CSS =========*/
.header-content-area {
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-image: url('img/header-corredor-cinema.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	position: relative;
	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;
}


/*3.1 Header Pattern Image*/
.header-pattern-1 {
	position: absolute;
	left: 50%;
	top: 13%
}

.header-pattern-2 {
	position: absolute;
	left: 0%;
	top: 48%;
}

.header-pattern-2 img {
	-webkit-animation: spin 10s linear infinite;
	animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
	100% {
	    -webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*3.2 Header ArtWork Animation */
.header-animation-area {
	position: relative;
}








.header-1-artwork {
	position: absolute;
	right: 0px;
	bottom: -150px;
}

.layer {
	position: relative;
	z-index: -1
}

.layer-1 {
	position: absolute;
	left: -120px;
	bottom: 70px;
}

.layer-2 {
	position: absolute;
	right: 250px;
	bottom: 130px;
}

.layer-3 {
	position: absolute;
	right: 130px;
	top: -180px;
	z-index: -1;
}

.layer-3 img {
	-webkit-animation: spin 7s linear infinite;
	animation: spin 7s linear infinite;
}





@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*3.3 Intro Text*/
.intro-text {
	text-align: left;
	padding-top: -10px;
}

.intro-text-2 {
	text-align: right;
	padding-top: 150px;
}

.intro-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
	
}

.intro-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;
	
}

/*3.4 Header Button */
.learnmore {
	margin-top: 25px;
	position: relative;
	display: inline-block
}

.learnmore2 {
	position: absolute;
	right: -55px;
	top: 7px;
	z-index: 9;
	display: inline-block;
}

.learnmore .skill-btn {
	background: #FF88A7;
	-webkit-box-shadow: 0px 1px 26px rgba(0, 0, 0, 0.62);
	box-shadow: 0px 1px 26px rgba(0, 0, 0, 0.62);
	border-radius: 50px;
	text-decoration: none;
	color: #f7f7f7;
	text-transform: capitalize;
	display: inline-block;
	padding: 15px 40px;
	-webkit-transition: .5s;
	transition: .5s;
	font-size: 16px;
	font-weight: 700;
}

.skill-btn-youtube i {
	color: #f7f7f7;
	font-size: 140px;
	transition: .5s;
}

.skill-btn-youtube i:hover {
	color: #FF88A7;
}

.learnmore .skill-btn:hover {
	color: #727272;
	background-color: #f7f7f7
}



/*========= 4. Home About Area CSS =========*/
.home-about-area {
	padding: 120px 0 0px 0;
	background-color: #f7f7f7;
	

}

/*4.1 Home About Content*/
.home-about-image {
	text-align: right
}

.home-about-image img {
	width: 88%
}

.home-about-image video {
    width: 100%;
    border-radius: 0px;
	box-shadow: 0px 1px 31px rgba(187, 187, 187, 0.45);
	
	
}




.home-about-text {
	text-align: right;
	padding-right: 70px;
	position: relative;
	z-index: 1;
	margin-bottom: 120px;
}

/*========= 5. Service Area CSS ==========*/
.services-area {
	padding: 120px 0 120px 0;
	background: -webkit-linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7f7f7);
	background: linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7f7f7);
	position: relative;
}

.layer-40 {
	position: absolute;
	right: 50px;
	top: -170px;
	z-index: 1;
}

.layer-40 img {
	-webkit-animation: spin 7s linear infinite;
	animation: spin 7s linear infinite;
}

@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


/*5.1 Curve SVG*/
#curve {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(180deg);
}

#curve path {
	fill: #f7f7f7;
}

.single-service {
	background: #f7f7f7;
	box-shadow: 0px 1px 35px rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	text-align: center;
	padding: 50px 14px !important;
	position: relative;
	z-index: 1
}



/*5.2 Single Service Pattern*/
.servive-p-1 {
	position: absolute;
	top: 0px;
	right: 50px;
	z-index: 1;
}


.servive-p-2 {
	position: absolute;
	bottom: -20px;
	left: 45px;
}


/*5.3 Single Service Animation*/
.servive-p-1 img {
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;
}

.servive-p-2 img {
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;	
}

.servive-p-3 img {
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;	
}


@keyframes sp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*5.4 Single Service Text*/
.service-text h3 {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.service-text p {
	font-size: 16.5px;
	line-height: 24px;
}

.service-icon img {
	height: 100px;
	margin-bottom: 80px;
}



.service-icon video {
	width: 100%;
	border-radius: 0px;
	margin-bottom: 25px;
	box-shadow: 0px 1px 31px rgba(187, 187, 187, 0.45);
	
	
}




.service-mt-30 {
	margin-top: 30px;
}

/*=========6. Portfolio Area CSS==========*/

.portfolio-area {
	padding: 60px 0 120px 0;
	
	background: -webkit-linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7f7f7);
	background: linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7f7f7);
		
	

}

/*6.1 Portfolio Pattern*/
.portfolio-pattern {
	position: relative;
	z-index: 1px;
}

.p-pattern {
	position: absolute;
	top: -40px;
	right: 130px;
	z-index: 0;
}

.p-pattern img {
	-webkit-animation: pp 3s linear infinite;
	animation: pp 3s linear infinite;
}

@keyframes pp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.portfolio-button-area {
	text-align: right;
}



/*6.2 Portfolio Item*/
.single-portfolio-item {
	position: relative;
	margin: 0 15px;
	
}

.single-portfolio-item img {
	border-radius: 0px;
	width: 100%;
	
}


.single-portfolio-item:last-child {
	margin-right: 0px;
}

.single-portfolio-item:hover .portfolio-item-content {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.portfolio-item-content {
	position: absolute;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.95);
	transition: .6s;
	visibility: hidden;
	opacity: 1;
	transform: scale(.7);
	border-radius: 0px;
}

.item-icon {
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
}

.item-icon i {
	background-color: #D7D7D7;
	color: #f7f7f7;
	font-size: 30px;
	height: 60px;
	width: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	transition: .5s;
}

.item-icon i:hover {
	background-color: #FF88A7;
}

.item-text {
	position: absolute;
	bottom: 10px;
	left: 0;
	padding: 20px;
}

.item-text h5 {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-weight: 700;
	font-size: 22px;
}

.item-text p {
	font-size: 16px;
	line-height: 22px;
}

/*6.3 Portfolio Item Arrow*/
.left-arrow {
	position: absolute;
	right: 90px;
	top: -70px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 0px;
	text-align: center;
	border: 20px solid #FF88A7;
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: #f7f7f7;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: .5;
	transition: .5s;
}

.right-arrow {
	position: absolute;
	right: 30px;
	top: -70px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 0px;
	text-align: center;
	border: 20px solid #FF88A7;
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: #f7f7f7;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: .5;
	transition: .5s;
}

.right-arrow:hover {
	opacity: 1;
}

.left-arrow:hover {
	opacity: 1;
}

/*========= 7. Expertise Area CSS==========*/
.expertise-area {
	padding: 120px 0 60px 0;
	background-color: #f7f7f7;
}

.expertise-image img {
	width: 100%;
}


.expertise-image video {
	width: 100%;
	border-radius: 0px;
	box-shadow: 0px 1px 31px rgba(187, 187, 187, 0.45);
}





.home-expertise-text {
	text-align: right;
	padding-right: 70px;
	position: relative;
	z-index: 1;
}





/*========= 8. Counter Area CSS==========*/
.main-counter-area {
	padding: 120px 0 0px 0;
	background: -webkit-linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7F7F7);
    background: linear-gradient(to top, rgba(136, 136, 136, 0.5), #F7f7f7, #F7F7F7);
}

/*8.1 Single Counter*/
.single-count-area {
	background-color: #f7f7f7;
	box-shadow: 0px 1px 31px rgba(187, 187, 187, 0.45);
	border-radius: 0px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	padding: 50px 0 !important;
}

.single-count-item-mb {
	margin-bottom: 30px;
}

.home-counter-text {
	text-align: right;
	padding-right: 70px;
	position: relative;
	z-index: 1;
	margin-bottom: 120px;
}


.single-count-area video {
	width: 85%;
	border-radius: 0px;
}


.single-count-area span {
	font-size: 29px;
	color: #727272 !important;
	margin-top: 15px;
	display: inline-block;
}

.single-count-area p {
	font-size: 17px;
	color: #727272;
}

.counter-area-small {
	padding-right: 50px;
	margin-bottom: 120px;
}

.layer-80 {
	position: absolute;
	left: 310px;
	bottom: 140px;
	z-index: 0;
}

.layer-80 img {
	-webkit-animation: spin 7s linear infinite;
	animation: spin 7s linear infinite;
}



.layer-90 {
	position: absolute;
	right: 310px;
	bottom: -305px;
	z-index: 0;
}

.layer-90 img {
	-webkit-animation: spin 7s linear infinite;
	animation: spin 7s linear infinite;
}




/*========= 9. Testimonial Area CSS==========*/
.client-area {
	background-color: #CECECE;
	padding: 70px;
}

.testimonial-area {
	padding: 120px 0 60px 0;
	background-color: #f7f7f7;
	
}

.testimonial-area-1 {
	padding: 60px 0 120px 0;
	background-color: #f7f7f7;
	
}

/*9.1 Left Content*/
.left-content {
	float: left;
	width: 70%;
	position: relative;
}

.testi-slider-text {
	margin-top: 30px;
	padding: 0 0 0 15px;
}

.testi-slider-text h4 {
	font-size: 22px;
	font-weight: 700;
	margin-top: 20px;
}

.testi-slider-text h5 {
	text-transform: capitalize;
	font-size: 18px;
}

.right-quote {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.quotation {
	padding-left: 15px;
	
}



/*9.2 Right Content*/
.right-content {
	overflow: hidden;
	width: 30%;
	
}

.testimonial-img {
	text-align: right;
}

.testimonial-img img {
	width: 100%;
	display: inline;
	border-radius: 100% 100% 100% 100% / 35% 35% 35% 35%;
	animation: morph 2s ease-in-out infinite both alternate;
}

@keyframes morph {
	0% {
		border-radius: 50% 50% 50% 50% / 0% 0% 0% 0%;
	}

	100% {
		border-radius: 68% 68% 68% 68% / 100% 100% 100% 100%;
	}
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}

/*9.3 Testimonial Arrow*/
.left-arrow-2 {
	position: absolute;
	left: 15px;
	bottom: 0px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 0px;
	text-align: center;
	border: 20px solid #FF88A7;
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: #f7f7f7;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: .5;
	transition: .5s;
	z-index: 9;
}

.right-arrow-2 {
	position: absolute;
	left: 75px;
	bottom: 0px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 0px;
	text-align: center;
	border: 20px solid #FF88A7;
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: #f7f7f7;
	-webkit-background-clip: text;
	cursor: pointer;
	opacity: .5;
	transition: .5s;
}

.right-arrow-2:hover {
	opacity: 1;
}

.left-arrow-2:hover {
	opacity: 1;
}

/*========= 10. Pricing Area CSS =========*/
.pricing-plan-area {
	padding: 120px 0;
	background-color: #D5D5D5;
}

/*10.1 Single Price*/
.single-price {
	background: #fbfbfb;
	box-shadow: 0px 4px 25px rgba(36, 35, 35, 0.09);
	border-radius: 20px;
	position: relative;
	transition: .6s;
}

.single-price.active-s {
	background: #f7f7f7;
	box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.09);
	border-radius: 20px;
	transform: translateY(-10px);
}

.single-price:hover {
	background-color: #f7f7f7;
	box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.09);
}

.single-price:hover .package h3 {
	background: linear-gradient(180deg, #727272 0%, #727272 229.46%);
}

.single-price:hover .price-button a {
	background: linear-gradient(180deg, #727272 0%, #727272 229.46%);
}

.package h3 {
	background: #F5F5F5;
	border-radius: 20px 20px 0px 0px;
	text-align: center;
	padding: 30px 0;
	color: #727272;
	font-weight: 700;
	font-size: 32px;
	transition: .2s;
}

.package.active-h h3 {
	background: linear-gradient(180deg, #727272 0%, #727272 229.46%);
	color: #f7f7f7;
	padding: 35px 0;
}

.price-qoute {
	padding: 10px 0 5px 50px;
}

.price-qoute h2 {
	color: #FF88A7;
	font-size: 30px;
	margin-top: 10px;
	font-weight: 900;
}

.price-qoute h2 span {
	font-size: 27px;
	font-weight: 700;
}

.price-details {
	padding: 0 50px;
}

.price-details ul li {
	line-height: 40px;
	color: #5c5e71;
	font-size: 17px;
}

.price-details ul i {
	color: #FF88A7;
	margin-right: 10px;
}

/*10.2 Single Price Button*/
.price-button {
	text-align: center;
}

.price-button a {
	background: #f7f7f7;
	box-shadow: 0px 2px 15px rgba(214, 214, 214, 0.25);
	border-radius: 68px;
	color: #727272;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25);
	padding: 13px 30px;
	display: inline-block;
	margin: 30px 0;
	font-weight: 700;
}

.price-button.active-b a {
	background: linear-gradient(180deg, #727272 0%, #727272 229.46%);
	color: #f7f7f7;
}

/*10.3 Price Pattern Animation*/
.price-pattern {
	position: absolute;
	right: 30px;
	top: 30px;
	
}

.price-pattern img {
	-webkit-animation: ptp 3s linear infinite;
	animation: ptp 3s linear infinite;
}

@keyframes ptp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*========= 11. Blog Area CSS==========*/
.home-blog-area {
	background-color: #ececec;
	padding: 120px 0;
}

/*11.1 Single Blog Image*/
.s-blog-image {
	position: relative;
	overflow: hidden;
}

.home-single-blog:hover .s-blog-image img {
	transform: scale(1.1)
}

.s-blog-image img {
	width: 100%;
	transition: .5s;
	transform: scale(1)
}


.s-blog-image video {
	width: 100%;
	border-radius: 15px;
}




/*11.2 Single Blog PostDate*/
.blog-post-date {
	position: absolute;
	right: 0;
	top: 30px;
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	border-radius: 30px 0px 0px 30px;
	color: #f7f7f7;
	width: 80px;
	height: 40px;
	font-weight: 700;
	text-transform: capitalize;
	line-height: 40px;
	text-align: center;
	transition: .5s;
}

.s-blog-image:hover .blog-post-date {
	width: 95px;
}

/*11.3 Single Blog Content*/
.s-blog-content {
	margin-top: 25px;
}

.s-blog-content h4 {
	font-weight: 700;
	color: #727272;
	text-transform: capitalize;
}

.s-blog-content a {
	font-weight: 700;
	display: inline-block;
	color: #FF88A7;
	margin-top: 5px;
	margin-bottom: 10px
}

.s-blog-content a:hover {
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

/*========= 11. Footer Area CSS ==========*/

.big-footer {
	background-color: #727272;
	padding: 180px 0;
	background-image: url('img/f-pattern.png');
}

#footer-fixed {
	width: 100%;
}

.footer-logo img {
	width: 250px;
	-webkit-animation: ep 3s linear infinite;
	animation: ep 3s linear infinite;
}

.footer-logo p {
	color: #f7f7f7;
	line-height: 26px;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 15px;
}


/*12.1 Footer Social*/
.social ul li {
	display: inline-block;
	margin-right: 15px;
}
.social ul li:last-child {
	margin-right: 0
}
.social ul li a {
	display: inline-block;
	color: #f7f7f7;
	font-size: 30px;
	text-align: center;
	-webkit-transition: .5s;
	transition: .5s;
	margin-top: 20px
}
.social ul li a:hover {
	color: #FF88A7
}
.social h3 {
	color: #f7f7f7;
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-top: 5px;
}
.social p {
	color: #efefef;
	font-size: 16px;
	line-height: 30px;
	margin-top: 30px	
}


/*12.2 Footer Content*/
.footer-heading h3 {
	font-family: 'Montserrat', sans-serif !important; 
	color: #f7f7f7;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 5px
}

.footer-content ul {
	margin-top: 30px;
}

.footer-content.footer-cont-mar-40 ul {
	margin-top: 0px
}

.footer-content ul li a {
	font-family: 'Montserrat', sans-serif !important; 
	color: #efefef;
	font-size: 16px;
	text-transform: uppercase !important;
	line-height: 30px;
}

.footer-content span {
	font-family: 'Montserrat', sans-serif !important; 
	font-style: italic;
	color: #ff88a7;
	font-size: 16px;
	text-transform: lowercase !important;
	line-height: 30px;
}



.footer-content ul li a:hover {
	color: #ff88a7;
	font-size: 21px;
}

.footer-content form {
	margin-top: 120px
}

.footer-content form input#leadgenaration {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #f7f7f7;
	color: #f7f7f7;
	padding: 15px 0px;
	margin-bottom: 30px;
	-webkit-transition: .5s;
	transition: .5s;
	display: block;
	width: 100%
}

.footer-content form input#subscribe {
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	box-shadow: 0px 2px 15px rgba(164, 164, 164, 0.25);
	border-radius: 68px;
	border: none;
	color: #f7f7f7;
	padding: 10px 25px;
	cursor: pointer;
	-webkit-transition: all .5s;
	transition: all .5s;
	font-size: 15px;
	
}

.footer-content form input#subscribe:hover {
	background: linear-gradient(252.62deg, #FF88A7 8.92%, #FF88A7 96.59%);
}

.footer-content form input#leadgenaration:focus {
	padding: 15px 10px;
}

/*12.3 Copyright Text*/
footer {
	background-color: #141414;
	text-align: center;
	padding: 40px 0;
	width: 100%;
}

footer p {
	margin: 0;
	color: #ff88a7;
	font-size: 17px;
}

/*============= 13. Blog Details Page ==============*/
/*13.1 Blog Banner*/

.blog-hero-banner {
	background-image: url(img/blog/blog-bg-lala.jpg);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.blog-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.40);
}

.blog-hero-banner h1 {
	color: #f7f7f7;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.blog-hero-banner p {
	color: #f7f7f7;
}


.blog-hero-banner1 {
	background-image: url(img/blog/blog-bg-chabela.jpg);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.blog-hero-banner1:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
}


.blog-hero-banner1 h1 {
	color: #f7f7f7;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.blog-hero-banner1 p {
	color: #f7f7f7;
}


.blog-hero-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.blog-hero-banner-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
}

.blog-hero-banner-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;	
}

.blog-hero-banner-text p {
	color: #f7f7f7;
}


.blog-hero-banner1-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.blog-hero-banner1-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
}

.blog-hero-banner1-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;	
}

.blog-hero-banner1-text p {
	color: #f7f7f7;
}


.blog-body {
	background-color: #f7f7f7
}

.blog-area {
	padding: 120px 0;
}

/*13.2 Blog Side*/
.left-side {
	padding: 60px 20px 20px 0px
}

.right-side {
	padding: 60px 0px 20px 20px
}

.left-side-2 {
	padding: 60px 20px 20px 0px
}

.right-side-2 {
	padding: 60px 0px 20px 20px
}





.blog-post-heading {
	margin-top: 50px;
	background-color: #F7F7F7;
	margin-bottom: 15px;
	padding: 0px;
}
.blog-post-heading h1 {
	font-size: 32px;
	font-weight: 600;
	text-transform: capitalize;
	padding-top: 20px
}
.blog-post-heading h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block;
}
.blog-post-heading h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}
.blog-post-heading p {
	color: #363636;
}
.blog-post-heading span {
	font-weight: 700;
	text-transform: capitalize;
}


/*13.3 Blog Search*/
.blog-search input {
	width: 100%;
	background-color: #F9F9F9;
	border: none;
	padding: 15px 10px;
	position: relative
}

.blog-search-icon-small {
	position: absolute;
	top: 72px;
	right: 30px;
	background: none;
	border: none;
	color: #ddd;
	font-size: 20px;
	cursor: pointer
}

.blog-body-content {
	padding: 30px 0;
}

.blog-body-content p {
	font-size: 16.5px;
	line-height: 28px !important
}

.blog-inner {
	padding: 30px 0;
}

.blog-inner img {
	width: 100%;
}

.blog-inner2 {
	padding: 20px 0;
}

.blog-inner2 img {
	width: 100%;
}


/*13.4 Blog Social Share*/
.blog-share {
	margin-top: 30px;
}

.blog-share h4 {
	font-size: 18px;
	font-weight: 600;
	
	margin-bottom: 15px
}

.blog-share ul {
	margin-top: 20px
}

.blog-share ul li {
	display: inline-block;
	margin-right: 8px;
}

.blog-share ul li a {
	display: inline-block;
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	color: #f7f7f7;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-align: center;
	font-size: 15px;
}



.author-content {
	background-color: #F7F7F7;
	padding: 20px
}



/*13.5 Blog Author*/
.author-profile {
	margin-top: 40px
}

.author-profile h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px
}

.author-profile h4 {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
	
}

.author-profile p {
	padding-right: 30px
}


.author-profile img {
	width: 100%;
	margin-bottom: 30px;
}


.author-profile span {
	
	font-size: 18px;
}



/*13.6 Blog Category*/
.main-category {
	margin-top: 40px
}

.main-category h3 {
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px
}

.category-list {
	background-color: #F9F9F9;
	padding: 20px
}

.category-list ul li {
	padding: 11px 0;
	border-bottom: 1px solid #ebebeb;
	color: #212121;
	font-size: 15px
}

.category-list ul li:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.category-list ul li:first-child {
	padding-top: 0
}

.category-list ul li a {
	color: #363636;
	font-size: 15px;
	text-transform: capitalize;
}

.category-list ul li a:hover {
	background: linear-gradient(238.45deg, #FF88A7 3.32%, #FF88A7 98.6%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}


/*13.7 Blog Tags*/
.main-tags {
	margin-top: 40px
}

.main-tags h3 {
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin: 0;
	padding-bottom: 10px;
	color: #363636;
	padding-left: 20px
}

.tag-list {
	background-color: #F9F9F9;
	padding: 20px
}

.tag-list ul li {
	display: inline-block;
	margin: 5px
}

.tag-list ul li a {
	padding: 5px;
	font-size: 15px;
	color: #363636;
	display: inline-block;
	border: 1px solid #ebebeb;
	text-transform: capitalize;
}

.tag-list ul li a:hover {
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	border: 1px solid transparent
}

/*13.8 Blog Comments*/
.single-comment {
	margin-bottom: 25px;
	display: block
}

.single-comment:last-child {
	margin-bottom: 0
}

.comment-heading h4 {
	font-size: 21px;
	margin: 40px 0;
	font-weight: 600;
	text-transform: capitalize;
}

.image-box {
	float: left;
	margin-right: 20px
}

.image-box img {
	width: 80px;
	height: 80px
}

.text-box {
	overflow: hidden
}

.text-box p {
	font-size: 16px;
	line-height: 26px;
	margin: 0
}

/*13.9 Blog Comments Reply*/
.text-box a.replay {
	background-color: #F9F9F9;
	color: #212121;
	padding: 2px 11px;
	display: inline-block;
	text-transform: capitalize;
	font-size: 13px;
	margin-top: 10px;
}

.text-box a.replay:hover {
	background: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
}

.nesting-reply {
	margin-top: 30px;
	overflow: hidden;
}

.nesting-reply img {
	width: 60px;
	height: 60px
}

.nesting-reply a.replay {
	background-color: #F9F9F9;
	color: #212121;
	padding: 2px 9px;
	display: inline-block;
	text-transform: capitalize;
	font-size: 13px;
	margin-top: 10px;
}

.comment-field input {
	width: 100%;
	background-color: #F8F8F8;
	margin-bottom: 20px;
	padding: 10px;
	border: none
}

.comment-field textarea {
	width: 100%;
	background-color: #F8F8F8;
	margin-bottom: 10px;
	border: none;
	padding: 10px
}

.comment-field #postcomment {
	background: linear-gradient(270deg, #727272 0%, #727272 100%);
	border-radius: 68px;
	color: #f7f7f7;
	padding: 10px 30px;
	font-weight: 700;
	font-size: 18px;
	text-transform: capitalize;
	margin-top: 25px;
	display: inline-block;
	border: none;
	cursor: pointer
}

.comment-field #postcomment:hover {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
}

/*=========== 14. Blog List Area CSS =============*/
.blog-hero-home {
	background-image: url(img/blog/blog-<strong>home</strong>.jpg);
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size: cover;
	position: relative;
}

.blog-hero-home:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.33);
}

.blog-home-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.blog-home-text h1 {
	color: #f7f7f7;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.blog-home-text p {
	color: #F9F9F9;
}

.main-blog-list {
	padding: 120px 0;
}


/*14.1 Blog Pagination*/
.next-previous-page {
	margin: 60px 0 0 0
}

.page-link {
	padding: .7rem 1.2rem;
	color: #727272;
	margin: 0 1px;
}

.page-link:hover {
	z-index: 2;
	color: #f7f7f7;
	text-decoration: none;
	background-color: #727272;
	border-color: #727272;
}

.page-item.active .page-link {
	z-index: 1;
	color: #f7f7f7;
	background-color: #727272;
	border-color: #727272;
}

.pagination {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*========= 15. Team Area CSS =========*/
.team-area {
	background-color: #ECECEC;
	border-top-right-radius: 0px;
	padding: 120px 0
}

/*15.1 Team Banner*/
.team-hero-banner {
	background-color: #f7f7f7;
	background-image: url("img/team/team-bg_lala_y_chabela_corredor.jpg");
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative
}

.team-hero-banner img {
	width: 100%;
}

.team-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 10%;
	background-color: rgba(0, 0, 0, 0.45);
}

.team-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.team-banner-text h1 {
	color: #f7f7f7;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 40px;
}

.team-banner-text p {
	color: #f7f7f7;
}

/*15.2 Team Content*/
.team-image {
	position: relative;
	overflow: hidden;
	border-radius: 0px;
}

.team-image img {
	width: 100%
}

.person-name {
	margin-top: 30px;
	transition: .6s
}

.person-name h4 {
	font-size: 22px;
	font-weight: 700;
	margin-top: 20px;
}

.person-name p {
	color: #363636;
	font-size: 18px;
	text-transform: capitalize;
}


.team-content {
	position: absolute;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transform: scale(.7);
	-webkit-transition: .6s;
	transition: .8s;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px
}

.team-image:hover .team-content {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.single-team:hover .person-name {
	margin-left: 15px
}

/*15.3 Team Social*/
.team-social {
	position: absolute;
	bottom: 10px;
	left: 0;
	padding: 20px;
}


.team-social ul li {
	display: inline-block;
	margin-right: 7px
}

.team-social ul li a {
	display: inline-block;
	color: #727272;
	font-size: 16px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid #727272;
	border-radius: 50%
}

.team-social ul li a:hover {
	color: #f7f7f7;
	background: linear-gradient(270deg, #727272 0%, #727272 100%);
	border: 1px solid transparent
}

.team-social h5 {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-weight: 700;
	font-size: 22px;
}

.team-social p {
	font-size: 16px;
	line-height: 22px;
}

/*========= 16. Contact Us Area CSS =========*/

.contactus-area {
	background-color: #f7f7f7;
	padding: 160px 0 120px 0;
}

/*16.1 Contact Us Banner*/
.contact-hero-banner {
	background-color: #f7f7f7;
	background-image: url("img/contact-bg.png");
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.contact-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.contact-hero-banner img {
	width: 100%;
}




.contact-banner-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.contact-banner-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
}

.contact-banner-text p {
	color: #f7f7f7;
}

.contact-banner-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;	
}













/*16.2 Contact Pattern*/

.contact-left-bg {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1
}

.contact-left-bg img {
	-webkit-animation: cp1 3s linear infinite;
	animation: cp1 3s linear infinite;
}

@keyframes cp1 {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.contact-right-bg {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1
}

.contact-right-bg img {
	-webkit-animation: cp2 3s linear infinite;
	animation: cp2 3s linear infinite;
}

@keyframes cp2 {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(-30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*16.3 Single Contact Info*/
.single-contact-area {
	position: relative;
	z-index: 1
}

.single-contact-info {
	background-color: #f7f7f7;
	-webkit-box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.25);
	box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.25);
	padding: 80px 0;
	text-align: center;
	margin: 0 20px;
}

.info-icon {
	margin-top: -125px;
	margin-bottom: 50px
}

.info-icon i {
	background: linear-gradient(180deg, #FF88A7 0%, #FF88A7 100%);
	color: #f7f7f7;
	height: 90px;
	width: 90px;
	line-height: 90px;
	text-align: center;
	border-radius: 50%;
	font-size: 35px
}

.info-content h6 {
	background: linear-gradient(180deg, #727272 0%, #727272 100%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-weight: 700;
	text-transform: capitalize;
	font-size: 22px
}

/*16.4 Contact Form*/
.contact-form-area {
	background: #f7f7f7;
	-webkit-box-shadow: 0px 9px 45px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 25px rgba(194, 194, 194, 0.25);
	border-radius: 26px;
	padding: 100px;
	margin-top: 120px;
	position: relative;
	z-index: 1
}

.contact-form-heading h3 {
	color: #727272;
	text-align: center;
	margin-bottom: 60px;
	font-weight: 700
}

.contact-form-area input[type='text'] {
	width: 49.6%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #727272;
	padding: 10px 5px;
	color: #727272
}

.contact-form-area input[type='email'] {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #727272;
	margin-top: 60px;
	margin-bottom: 60px;
	color: #727272;
	padding: 10px 5px
}

.contact-form-area textarea {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #727272;
	color: #727272;
	padding: 10px 5px
}

/*16.5 Contact Form Button*/
.send-btn {
	text-align: center;
	margin-top: 80px
}

#formsend {
	background: linear-gradient(270deg, #727272 0%, #727272 100%);
	color: #f7f7f7;
	border: none;
	padding: 12px 42px;
	text-transform: capitalize;
	font-weight: 700;
	cursor: pointer;
	-webkit-transition: .5s;
	transition: .5s;
	border-radius: 68px;
}

#formsend:hover {
	background: linear-gradient(270deg, #FF88A7 0%, #FF88A7 100%);
}

/*=========== 17. Portfolio Area CSS ==============*/

.portfolio-main-area {
	background-color: #f7f7f7;
	padding: 120px 0;
}

/*17.1 Portfolio Banner*/
.portfolio-hero-banner {
	background-color: #f7f7f7;
	background-image: url(img/portfolio/portfolio-bg.jpg);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative
}

.portfolio-hero-banner img {
	width: 100%;
}

.portfolio-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
}


.portfolio-hero-banner1 {
	background-color: #f7f7f7;
	background-image: url("img/bg-nacho.jpg");
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.portfolio-hero-banner1:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.35);
}

.portfolio-hero-banner1 img {
	width: 100%;
}


.portfolio-hero-banner2 {
	background-color: #f7f7f7;
	background-image: url("img/team/team-bg_lala_y_chabela_corredor.jpg");
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.portfolio-hero-banner2 img {
	width: 100%;
}

.portfolio-hero-banner2:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.30);
}


.portfolio-hero-banner3 {
	background-color: #f7f7f7;
	background-image: url("img/bg-diana.jpg");
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative
}

.portfolio-hero-banner3:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.35);
}

.portfolio-hero-banner3 img {
	width: 100%;
}

/*17.2 Portfolio Content*/
.portfolio-hero-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.portfolio-hero-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
}

.portfolio-hero-text p {
	color: #f7f7f7;
}

.portfolio-hero-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;
	
}


.portfolio-intro p {
	text-align: center;
	font-weight: 600;
	margin-bottom: 60px;
	font-size: 20px
}

.single-portfolio img {
	width: 100%
}

.single-portfolio {
	overflow: hidden;
}

.portfolio-image {
	position: relative;
}

.portfolio-image img {
	border-radius: 10px
}

.portfolio-titile h4 {
	font-size: 18px;
	text-transform: capitalize;
	color: #727272;
	font-weight: 700;
	margin-top: 13px;
	transition: .6s
}

.portfolio-headmove:hover .portfolio-titile h4 {
	margin-left: 15px
}

.portfolio-content {
	position: absolute;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-transition: 1s;
	transition: .6s;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transform: scale(.7);
	border-radius: 10px;
}

.portfolio-content a {
	background: linear-gradient(180deg, #727272 0%, #727272 100%);
	background-clip: border-box;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	text-transform: capitalize;
	font-size: 17px;
	font-weight: 700;
	margin-top: 10px;
	display: block
}

.portfolio-content p {
	color: #727272;
	font-size: 17px;
	line-height: 25px;
}

.single-portfolio:hover .portfolio-content {
	opacity: 1;
	visibility: visible;
	transform: scale(1)
}

/*17.3 Portfolio Filtering*/
.portfolio-filter {
	text-align: center;
	margin-bottom: 30px
}

.portfolio-filter li {
	display: inline-block;
	margin-right: 25px;
	position: relative
}

.portfolio-filter li:last-child {
	margin-right: 0px
}

.portfolio-filter li a {
	display: inline-block;
	padding: 8px 0px;
	color: #000;
	text-transform: capitalize;
}

.portfolio-filter li.active:before {
	position: absolute;
	content: "";
	width: 100%;
	-webkit-box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.1);
	border: solid 1px transparent;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	border-image: linear-gradient(255.91deg, #727272 5.33%, #727272 92.37%);
	bottom: 0;
	left: 0;
	-webkit-transition: 1s;
	transition: 1s;
}

/*========= 18. Portfolio Details Area CSS=========*/
.portfolio-details {
	padding: 120px 0;
	background-color: #f7f7f7;
}

.portfolio-details-box {
	background-color: #f7f7f7;
	-webkit-box-shadow: 0px 4px 60px rgba(191, 191, 191, 0.25);
	box-shadow: 0px 4px 60px rgba(191, 191, 191, 0.25);
}

.portfolio-screenshot img {
	width: 100%
}

.portfolio-screenshot video {
	width: 100%
}

/*18.1 Project  Description*/
.project-description h3 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
}

.project-description h4 {
	
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
	
}

.project-description p {
	padding-right: 30px
}

.project-name {
	margin-top: 50px;
	background-color: #F7F7F7;
	margin-bottom: 15px;
	padding: 30px
}



.project-name h1 {
	font-size: 32px;
	font-weight: 600;
	text-transform: capitalize;
	padding-top: 20px
}

.project-name h3 {
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block;
}

.project-name h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.project-name p {
	color: #363636;
}






.project-info {
	background: #f7f7f7;
	box-shadow: 0px 4px 50px rgba(196, 196, 196, 0.4);
	margin-top: 50px;
	padding: 30px
}

.project-info h3 {
	
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block
	
}
.project-info h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.project-info p {
	color: #363636;
}


.project-info h4 {
	
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 10px;
	
}

.project-info h4 span {
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
}




.project-brief {
	margin-top: 50px;
}



.margin-top-project {
	margin-top: 40px
}

/*18.2 Project  Technology*/
.project-technology h3 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
}

.project-technology {
	margin-top: 40px;
	background-color: #FAFAFA;
	padding: 30px
}

.project-technology ul li {
	display: inline-block;
	text-transform: capitalize;
	font-size: 16px;
	margin: 5px;
	background-color: #f7f7f7;
	padding: 5px 10px;
	-webkit-transition: .5s;
	transition: .5s;
}

.project-technology ul li:hover {
	background: linear-gradient(180deg, #727272 0%, #727272 100%);
}

/*18.3 Project-Slider*/
.left-arrow-3 {
	position: absolute;
	left: 47%;
	bottom: 15px;
	z-index: 1;
	color: #f7f7f7;
	cursor: pointer;
	transform: translateX(-50%);
}

.right-arrow-3 {
	position: absolute;
	right: 47%;
	bottom: 15px;
	z-index: 1;
	color: #f7f7f7;
	cursor: pointer;
	transform: translateX(-50%);
}

/*======== 19. About Us Area CSS =======*/

.abou-us-area {
	padding: 120px 0 60px 0;
	background-color: #f7f7f7
}

/*19.1 About Us Banner*/
.about-hero-banner {
	background-color: #f7f7f7;
	background-image: url(img/about-banner.jpg);
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.about-hero-banner img {
	width: 100%;
}

.about-hero-banner:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
}

/*19.2 About Hero Text*/
.about-hero-text {
	position: absolute;
	left: 0;
	top: 55%;
	right: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.about-hero-text h1 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important; 
	text-transform: uppercase;
	font-size: clamp(3rem, 10vw, 6rem); /* El título más grande */
	letter-spacing: -2px;  
	line-height: 0.9;
	color: #f7f7f7;
	margin-bottom: 0px;
}

.about-hero-text p {
	color: #f7f7f7;
}

.about-hero-text h2 {
	color: #FF88A7;
	font-size: clamp(2rem, 6vw, 3.5rem);  /* Títulos de sección */
	letter-spacing: -1px;  
	line-height: 1;
}












/*19.3 About Video*/ 
.video-play-button:before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 80px;
	height: 80px;
	background: #FF88A7;
	border-radius: 50%;
	-webkit-animation: pulse-border 1500ms ease-out infinite;
	animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 80px;
	height: 80px;
	background: rgba(182, 14, 00, 0.2);
	border-radius: 50%;
	-webkit-transition: all 200ms;
	transition: all 200ms;
}

.video-play-button:hover:after {
	background: #FF88A7;
}

.video-play-button img {
	position: relative;
	z-index: 3;
	max-width: 100%;
	width: auto;
	height: auto;
}

.video-play-button span {
	display: block;
	position: relative;
	z-index: 3;
	width: 0px;
	height: 0;
	border-left: 20px solid #f7f7f7;
	border-top: 14px solid transparent;
	border-bottom: 13px solid transparent;
	margin-right: -6px;
}

@-webkit-keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

.video-overlay {
	position: fixed;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	-webkit-transition: all ease 500ms;
	transition: all ease 500ms;
}

.video-overlay.open {
	position: fixed;
	z-index: 1000;
	opacity: 1;
}

.video-overlay-close {
	position: absolute;
	z-index: 1000;
	top: 15px;
	right: 20px;
	font-size: 36px;
	line-height: 1;
	font-weight: 400;
	color: #f7f7f7;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all 200ms;
	transition: all 200ms;
}

.video-overlay-close:hover {
	color: #FF88A7;
}

.video-overlay iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
}

.youtube-video-wrapper {
	background: url('img/about-video.png') top center no-repeat;
	background-size: cover;
	padding: 160px 0;
	position: relative;
	text-align: center;
	border-radius: 0px;
}

.youtube-video-wrapper2 {
	background: url('') top center no-repeat;
	background-size: cover;
	padding: 40px 0 11px 0;
	position: relative;
	text-align: center;
	border-radius: 15px;
}

.popup-gallery {
	display: inline-block;
	position: relative;
}

/*19.4 About Video Icon*/

.youtube-video-icon {
	width: 100px;
	height: 100px;
	border: 2px solid #f7f7f7;
	border-radius: 50% 50%;
	display: inline-block;
	background: #f7f7f7;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}

.youtube-video-icon i {
	font-size: 60px;
	line-height: 100px;
	color: #FF88A7;
	margin-left: 10px;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}

.about-team img {
	width: 40%
}

.about-team video {
	width: 100%;
	border-radius: 15px;
}






/*19.5 About Counter*/
.about-counter-area {
	background-color: #CECECE;
	padding: 120px 0
}

.about-counter-text {
	text-align: left !important
}

/*19.6 About Section Content*/
.about-section-title h4 {
	font-size: 23px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.about-section-title h3 {
	
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 35px;
	position: relative;
	font-size: 35px;
	display: inline-block
	
}

.about-section-title h3:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FF88A7;
	height: 5px;
	width: 70px;
}

.about-section-title p {
	color: #363636;
}


.about-section-separate {
	margin-top: 120px;
}

.about-content-right {
	text-align: right
}

/*====== 20. 404 Area CSS ========*/
.error-page-area {
	height: 100vh;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #f7f7f7;
	padding: 120px 0;
}

.error-text {
	text-align: center
}

.error-text h2 {
	
	font-weight: 700;
	margin-top: 40px;
	font-size:28px;
}

.error-text a {
	background-color: #727272;
	
	font-weight: 600;
	padding: 15px 30px;
	color: #f7f7f7;
	display: inline-block;
	margin-top: 30px;
	border: 2px solid transparent;
	border-radius: 68px
}

.error-text a:hover {
	border: 2px solid #727272;
	color: #727272;
	background-color: #727272
}


/*============== 21. Call to Action ============*/
.callto-action {
	background-color: #727272;
	color: #f7f7f7;
	padding: 115px 0 115px 0;
}

.callto-action-text h5 {
	font-size: 30px;
}

.callto-action span {
	font-weight: 700
}

.callto-action-btn {
	text-align: right
}

.callto-action-btn a {
	background: #464646;
	border-radius: 0px;
	text-transform: capitalize;
	padding: 12px 40px;
	margin-top: -5px;
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	-webkit-transition: .7s;
	transition: .7s;
	
	
	border: 1px solid #f7f7f7;
	color: #f7f7f7
}

.callto-action-btn a:hover {
	background: linear-gradient(252.62deg, #FF88A7 8.92%, #FF88A7 96.59%);
	border: 2px solid transparent;
	font-size: 22px;
		
		
}