/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Dentaire - Dentist & Dental Clinic HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. CTA Box css
06. About Us css
07. Our Services css
08. Why Choose Us css
09. How It Work Css
10. Our Team Css
11. Our Testiminial css
12. Our Blog Css
13. Our Contact Us css
14. Footer css
15. About us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Team Page css
21. Team Single css
22. Gallery Page css
23. Technology Page css
24. Testimonial Page css 
25. Contact us Page css
26.	FAQs Page css
27. Make Appointment Page css
28. 404 Page css
29. Responsive css
-------------------------------------------------------------------------------------- */
/*.main-footer {
    margin-top: auto;
}*/
/* Contenedor flotante */
.floating-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

/* Ventana de chat flotante */
.chat-bubble {
    background-color: #fff;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    font-size: 14px;
    max-width: 200px;
    text-align: center;
    position: relative;
}
.chat-bubble p{
  padding-top: 10px;
  color:#000; 
  font-weight: bold;
}
/* Triángulo en la burbuja para simular un bocadillo */
.chat-bubble::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Botón flotante */
.floating-chat-button {
    background-color: transparent; /* Color de WhatsApp */
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(96, 170, 170, 0.2);
    position: relative;
    animation: ring-animation 2s infinite;
}

/* Animación de efecto ring */
@keyframes ring-animation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    }
}

.floating-chat-button:hover {
    animation: none;
}

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/	

:root{
	--primary-color			: #00246e;
	--secondary-color		: #00bfc4;
	--text-color			: #527282;
	--accent-color			: #1E84B5;
	--white-color			: #FFFFFF;
	--divider-color			: #FFFFFF1F;
	--dark-divider-color	: #0E384C1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Poppins", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/


body{
		 font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--text-color);
    background-color: var(--white-color)
}

p{
	line-height: 1.8em;
	margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}
.pt0{
	padding-top:0px;
}
.pb0{
	padding-bottom:0px;
}
.pt31{
	padding-top: 31%;
}
.pb15{
	padding-bottom: 15px;
}
.pt20{
	padding-top: 20px;
}
.pt30{
	padding-top: 30px;
}
.mt30{
	margin-top: 30px;
}
.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--white-color);
	background: var(--secondary-color);
	/*text-transform: capitalize;*/
	padding: 14px 50px 14px 20px;
	border-radius: 99px;
	border: none;
	transition: all 0.5s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default:hover{
	background-color: transparent;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--white-color);
	background-image: url('../images/arrow-blue.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px auto;
	transform: translate(-10px, -50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover:before{
	transform: translate(-10px, -50%) rotate(45deg);
	background-size: 10px auto;
}

.btn-default::after{ 
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
	width: 0;
	height: 100%;
	border-radius: 99px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover::after{
	width: 100%;
}

.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover:before{
	background-color: var(--secondary-color);
}

.btn-default.btn-highlighted::after{
	background-color: var(--white-color);
}

#magic-cursor{
	position: fixed !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
}

#ball{
	position: fixed;
	display: block;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 8px !important;
	height: 8px !important;
	background: var(--accent-color);
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity:1 !important;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--primary-color) transparent var(--primary-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
    top: 50%;
    left: 50%;
    
    /* El truco para centrarlo perfectamente */
    transform: translate(-50%, -50%);
    
    /* Lo trae al frente de los arcos giratorios */
    z-index: 10;
}
/* --- Añadir SÓLO si el z-index no funcionó --- */
#loading-icon img {
    width: 90px; /* Puedes ajustar este tamaño a tu gusto */
    height: auto;
}
@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-row{
	margin-bottom: 60px;
}

.section-row .section-title{
	text-align: center;
	margin-bottom: 0;
}

.section-btn{
	text-align: end;
}

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 1.25rem;
    font-weight: 500;
	line-height: 1.5em;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
	padding-left: 20px;
    margin-bottom: 10px;
}

.section-title h3::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url("../images/icon-sub-heading.svg") no-repeat;
	background-position: left center;
	background-size: cover;
	width: 12px;
	height: 12px;
}

.section-title h1{
	font-size: 54px;
	font-weight: 700;
	margin-bottom: 0;
}

.section-title h2{
	font-size: 44px;
	font-weight: 700;
	margin-bottom: 0;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header{
	background-color: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	position: relative;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    transform: translateY(0);
	background: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	backdrop-filter: blur(30px);
}

.navbar{
	padding: 15px 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}
/* --- Forzar visibilidad del logo SVG en el header --- */
header .navbar-brand img {
   display: block !important;
    width: 240px !important;  /* Reducido de 300px para un header más compacto */
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 9px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	padding: 14px 10px !important;
	color: var(--primary-color);
	/*text-transform: capitalize;*/
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 10px 0; /* ¡SOLUCIÓN! Añade 10px de padding arriba y abajo */
	margin: 0;
	list-style: none;
	width: 240px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: var(--primary-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
    width: 250px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 25px !important;
	font-size: 15px;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--accent-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
    display: block;
}
.header-btn a{
	background-color:#FFA500;

}
.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: var(--primary-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--white-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 10px 20px;
	color: var(--primary-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-color);
}

.slicknav_menu ul ul li a{
    padding: 10px 20px 10px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--accent-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
	color: var(--accent-color);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero{
	background: var(--secondary-color) url('../images/hero-bg.svg') no-repeat;
	background-position: center center;
	background-size: auto;
	padding: 50px 0 0;
}

.hero-content{
	padding-right: 100px;
}

.hero-content-body{
	border-bottom: 1px solid var(--dark-divider-color);
	/*padding-bottom: 30px;
	margin-bottom: 30px;*/
}
.mb0{
	margin-bottom: 0px !important;
}
.google-rating ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.google-rating ul li{
	display: inline-block;
	/*text-transform: capitalize;*/
	color: var(--primary-color);
	margin-right: 10px;
}

.google-rating ul li:last-child{
	margin-right: 0;
}

.google-rating ul li span{
	color: #FFA800;
	margin-left: 5px;
}

.google-rating ul li i{
	font-size: 14px;
	color: #FFA800;
}

.hero-image{
	position: relative;
}

.hero-img{
	position: relative;
	z-index: 1;
}

.hero-icon-list .hero-icon-box-1{
	position: absolute;
	top: 0px;
	right: 0;
	transform: translate(-50% , 150px);
	background-color: var(--white-color);
	border-radius: 100%;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 40px 0px #0E384C1A;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.hero-icon-list .hero-icon-box-2{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translate(50% , -50%);
	background-color: var(--white-color);
	border-radius: 100%;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 40px 0px #0E384C1A;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.hero-icon-list .hero-icon-box-3{
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(-80px , -50%);
	background-color: var(--white-color);
	border-radius: 100%;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 40px 0px #0E384C1A;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.hero-icon-list .hero-icon-box-1:hover,
.hero-icon-list .hero-icon-box-2:hover,
.hero-icon-list .hero-icon-box-3:hover{
	background-color: transparent;
}

.hero-icon-list .hero-icon-box-1:before,
.hero-icon-list .hero-icon-box-2:before,
.hero-icon-list .hero-icon-box-3:before{
	content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 100px;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    height: 100%;
}

.hero-icon-list .hero-icon-box-1:hover:before,
.hero-icon-list .hero-icon-box-2:hover:before,
.hero-icon-list .hero-icon-box-3:hover:before{
	transform: scale(1);
}

.hero-icon-list .hero-icon-box-1 img,
.hero-icon-list .hero-icon-box-2 img,
.hero-icon-list .hero-icon-box-3 img{
	position: relative;
	z-index: 1;
	max-width: 56px;
	transition: all 0.3s ease-in-out;
}

.hero-icon-list .hero-icon-box-1:hover img,
.hero-icon-list .hero-icon-box-2:hover img,
.hero-icon-list .hero-icon-box-3:hover img{
	filter: brightness(0) invert(1);
}

.icon-star-image{
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(50%, 50%);
}


.icon-star-image img{
	max-width: 60px;
	animation: zoom 1s linear 1s infinite;
}

@keyframes zoom{
	0%{
	  transform: scale(1);
	}
	50%{
	  transform: scale(0.8);
	}
	100%{
	  transform: scale(1);
	}
  }

.export-dantist-box{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(-100px);
	background-color: var(--white-color);
	box-shadow: 0px 0px 40px 0px #00000021;
	border-radius: 14px;
	display: flex;
	align-items: center;
	padding: 10px;
	animation: exportmoveobject 3s infinite linear alternate;
	z-index: 2;
}

@keyframes exportmoveobject{
	50%{
		left: 50px;
	}
}

.export-dantist-box .icon-box{
	margin-right: 10px;
}

.export-dantist-box .icon-box img{
	max-width: 78px;
	border-radius: 14px;
}

.export-dantist-content{
	width: calc(100% - 88px);
}

.export-dantist-content h3{
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.export-dantist-content p{
	font-size: 14px;
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

.hero.hero-book-appointment{
	padding: 100px 0;
}

.hero-book-appointment .appointment-form{
	box-shadow: 0px 4px 40px 0px #0000000F;
    border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	text-align: center;
	padding: 40px;
	margin-left: 100px;
}

.hero-appointment-form-title{
	margin-bottom: 30px;
}

.hero-appointment-form-title h2{
	font-size: 36px;
	margin-bottom: 10px;
}

.hero-appointment-form-title h2 span{
	color: var(--accent-color);
}

.hero-appointment-form-title p{
	margin: 0;
}

.hero.bg-image{
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 60px 0;
}

.hero.bg-image::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 45%;
	width: 100%;
	height: 100%;
}

.hero.bg-image .hero-content{
	position: relative;	
	text-align: left;
	width: 100%;
	max-width: 100% !important; /* Aumentamos el ancho máximo al 100% */
    text-align: center; /* Centramos el texto para un mejor efecto visual */
	margin: 0 auto;
	padding-right: 0;
	z-index: 1;
}

.hero.bg-image .hero-content .section-title p,
.hero.bg-image .hero-content .section-title h3,
.hero.bg-image .hero-content .section-title h2,
.hero.bg-image .hero-content .section-title h1 span,
.hero.bg-image .hero-content .section-title h1{
	color: var(--white-color);
}

.hero.bg-image .hero-content .section-title h1{
	font-size: 80px;
	margin-top: 40px;
	font-weight: 700;
	line-height: 1.2;
}
.hero.bg-image .hero-content .section-title h2{
	font-size: 2.25rem;
	font-weight: 700;

}
.hero.bg-image .hero-content .section-title p{
	font-size: 1.40rem;
	font-size: 400;
	line-height: 1.6;
	
}
/*=======================BANNER=====================================*/
/* ======================================================= */
/* ====== ESTILOS PARA EL NUEVO BANNER DE SERVICIO ====== */
/* ======================================================= */

/* --- Contenedor Principal del Banner --- */
.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh; /* <-- ¡ESTE ES EL ÚNICO CAMBIO! Aumentamos la altura */
    padding: 60px 0;
    overflow: hidden;
    background-color: var(--primary-color);
}

/* --- Contenedor de la Imagen de Fondo --- */
.hero-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-banner-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Capa de Color Superpuesta --- */
.hero-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0.30; /* Un poco más oscuro para que el texto resalte */
    z-index: 2;
}

/* --- Contenedor del Contenido (Texto y Reseñas) --- */
.hero-banner-content {
    position: relative;
    z-index: 3;
    color: var(--white-color);
}
.hero-banner-content .hero-content-body{
    border-bottom: 1px solid rgba(255, 255, 255, 21%);
    /*padding-bottom: 30px;*/
    margin-bottom: 30px;
}
/* --- Adaptamos los estilos de la plantilla para el contenido del banner --- */
.hero-banner .section-title h1,
.hero-banner .section-title p {
    color: var(--white-color); /* Aseguramos que el texto sea blanco */
}

/* Usamos los mismos tamaños de fuente de la plantilla para mantener la consistencia */
.hero-banner .section-title h1 {
    font-size: 80px; /* Tamaño original de la plantilla */
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-banner .section-title p {
    font-size: 1.25rem; /* Tamaño original de la plantilla */
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-banner .google-rating ul li {
    color: var(--white-color); /* Aseguramos que el texto de las reseñas sea blanco */
}

/* --- Estilos Responsivos --- */
@media (max-width: 991px) {
    .hero-banner .section-title h1 {
        font-size: 44px; /* Tamaño responsive original de la plantilla */
    }
}

@media (max-width: 767px) {
    .hero-banner {
        min-height: 70vh; /* Altura más adecuada para móviles */
    }
    .hero-banner .section-title h1 {
        font-size: 34px; /* Tamaño responsive móvil original */
    }
    .hero-banner .section-title p {
        font-size: 1.1rem;
    }
}
/*===============LOGO BANNER===================================*/

.hero-logo-wrapper {
    /* Le damos un espacio inferior para separarlo de las reseñas */
   /* margin-bottom: 30px;*/
    text-align: center;
}

.hero-logo-wrapper img {
    max-width: 200px; /* Mantenemos el tamaño de escritorio */
    height: auto;
    opacity: 0.9;
}

.hero-logo-text {
    color: var(--white-color);
    font-size: 1.2rem;
    font-weight: 500;
    /*margin-top: 15px;*/
    opacity: 0.9;
    text-align: center;
}
/* ======================================================= */
/* ====== ESTILOS PARA PRECIOS Y TOOLTIP EN EL BANNER ====== */
/* ======================================================= */

/* --- 1. Arreglo de estilos para los precios --- */
/* Hacemos la regla más específica para que supere a la de la plantilla */
.hero .hero-content .section-title .lista-precios .precio-item {
    font-size: 1.4rem !important; /* ~17.6px */
    font-weight: 500 !important;
    color: #fff !important; /* Un poco más sutil que el blanco puro */
    line-height: 1.5 !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

/* --- 2. Estilos para el Tooltip --- */

/* El contenedor del elemento que tendrá el tooltip */
.tooltip-activator {
    position: relative; /* Indispensable para que el tooltip se posicione correctamente */
    cursor: help; /* Cambia el cursor para indicar que hay información extra */
   /* border-bottom: 1px dotted rgba(255, 255, 255, 0.5); *//* Línea punteada sutil */
    display: inline-block; /* Ajusta el contenedor al texto */
}

/* El cuerpo del tooltip (la caja de texto) */
.tooltip-activator::after {
    content: attr(data-tooltip); /* Toma el texto del atributo data-tooltip */
    position: absolute;
    bottom: 150%; /* Lo posiciona arriba del texto */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: var(--white-color); /* Fondo blanco */
    color: var(--primary-color); /* Texto oscuro */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem; /* 14.4px */
    font-weight: 400;
    width: 280px; /* Ancho fijo para que el texto se distribuya */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    /* Efecto de aparición/desaparición */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

/* El pequeño triángulo/flecha del tooltip */
.tooltip-activator::before {
    content: '';
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(20px); /* Lo posiciona debajo de la caja */
    
    border: 8px solid transparent;
    border-top-color: var(--white-color); /* El color de la flecha */

    /* Efecto de aparición/desaparición */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 11;
}

/* Muestra el tooltip al pasar el mouse (hover) */
.tooltip-activator:hover::after,
.tooltip-activator:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: 130%; /* Pequeño efecto de subida al aparecer */
}
.hero.bg-image .hero-content .section-title h3::before{
	filter: brightness(0) invert(1);
}

.hero.bg-image .hero-content .hero-content-body{
    border-bottom: 1px solid rgba(255, 255, 255, 21%);
    /*padding-bottom: 30px;*/
    margin-bottom: 30px;
}
.hero-content-body p{
	font-size: 1.25rem;
	color: var(--white-color);
	
}
.hero.bg-image .hero-content .google-rating ul li{
	color: var(--white-color);
}
.mt0{
 margin-top: 0px !important;
}
.hero.bg-image.hero-slider{
	background: none;
	padding: 0;
}

.hero-slider-layout .hero-slide{
	position: relative;
    padding: 150px 0;
}

.hero.hero-slider .hero-slider-layout{
	position: relative;
	z-index: 2;
}

.hero-slider-layout .hero-slide::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 35%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider .hero-slider-layout .hero-slide .hero-content{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.hero-slider-layout .swiper-pagination{
    bottom: 80px;
}

.hero-slider-layout .swiper-pagination .swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero-slider-layout .swiper-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero.bg-image.hero-video{
	position: relative;
	overflow: hidden;
}

.hero.bg-image.hero-video::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 45%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* ======================================================= */
/* ====== ESTILOS PARA EL BOTÓN DE SONIDO DEL BANNER ====== */
/* ======================================================= */

.hero-bg-video .video-sound-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-sound-toggle {
    position: absolute;
    bottom: 30px; /* Posición desde abajo */
    right: 30px;  /* Posición desde la derecha */
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5; /* Asegura que esté por encima del video */
}

.video-sound-toggle:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* Ocultar en móviles para no saturar la pantalla (opcional pero recomendado) */
@media (max-width: 767px) {
    .video-sound-toggle {
        display: none;
    }
    
}
/************************************/
/***        05. CTA Box css	      ***/
/************************************/

.cta-box{
	background-color: var(--primary-color);
	padding: 50px 0;
}

.cta-box-item{
	display: flex;
	align-items: center;
	border-right: 1px solid var(--divider-color);
	margin-right: 15px;
	padding-right: 15px;
}

.cta-box .col-lg-4:nth-child(2) .cta-box-item{
	border: none;
	padding-right: 0;
	margin-right: 0;
}

.cta-box-item .icon-box{
	margin-right: 20px;
}

/*.cta-box-item .icon-box img{
	max-width: 40px;
}*/
.cta-box-item .icon-box i{
font-size: 25px;
color:#00bfc4;
}
.cta-box-content{
	width: calc(100% - 60px);
}

.cta-box-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color:  var(--white-color);
	margin-bottom: 10px;
}

.cta-box-content p{
	color: var(--white-color);
	margin: 0;
}
/* ======================================================= */
/* ====== SOLUCIÓN FINAL: CENTRADO HORIZONTAL Y VERTICAL DEL BOTÓN CTA ====== */
/* ======================================================= */

/* 1. Hacemos que todas las columnas en esta fila tengan la misma altura */
.cta-box .row {
    align-items: stretch !important; /* Anula el 'align-items-center' del HTML */
}

/* 2. Ahora que la columna es alta, centramos su contenido en ambos ejes */
.cta-box .row > .col-lg-4:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Centra verticalmente */
    align-items: center;       /* ¡CAMBIO CLAVE! Centra horizontalmente */
    text-align: center;        /* Asegura que el texto interno esté centrado */
}

/* 3. Ajuste de espaciado para el botón */
.cta-box .row > .col-lg-4:last-of-type .cta-box-btn {
    margin-top: 15px; /* Espacio entre el texto y el botón */
}


/* --- Estilos Responsive para Tablet y Móvil --- */
@media (max-width: 991px) {
    /* Añade un espacio superior cuando se apila */
    .cta-box .row > .col-lg-4:last-of-type {
        margin-top: 30px;
    }
}
/*.cta-box-btn{
	text-align: left;
}*/

/************************************/
/***       06. About Us css	      ***/
/************************************/

.about-us{
	/*padding: 40px 0;*/
	padding-top: 40px;
	padding-bottom: 40px;
}

.about-image{
	background: url('../images/about-bg-image.svg') no-repeat;
	background-position: center center;
	background-size: auto;
	position: relative;
	margin-right: 50px;
	padding-bottom: 200px;
}

.about-img-1{
	width: 410px;
}

.about-img-2 figure,
.about-img-1 figure{
	display: block;
}

.about-img-1 img{
	aspect-ratio: 1 /0.96;
	object-fit: cover;
	border-radius: 40px;
}

.about-img-2{
	position: absolute;
	bottom: 0;
	right: 0;
}

.about-img-2 img{
	aspect-ratio: 1 /0.72;
	object-fit: cover;
	border: 7px solid var(--white-color);
	border-radius: 40px;
}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
/* ====== CENTRAR EL BOTÓN EN LA SECCIÓN "ABOUT US" ====== */
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* 1. Seleccionamos el contenedor del botón en la sección "About Us" */
.about-us .about-us-footer {
    text-align: center; /* ¡Esta es la línea clave! Centra todo el contenido */
    margin-top: 30px; /* Añade un espacio superior para separarlo de la lista */
    margin-bottom: 20px; /* Añade un espacio inferior para separarlo del párrafo final */
}

/* 2. Opcional: Centramos también el párrafo final para mantener la coherencia */
.about-us .about-content .section-title p {
    text-align: center;
}
.about-experience{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-50%, 50%);
}

.about-experience img{
	animation: rotate 30s infinite linear;
}

@keyframes rotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}

.about-us-body{
	margin-bottom: 40px;
}

.about-us-body ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.about-us-body ul li{
    position: relative;
    width: calc(50% - 10px);
    font-weight: 600;
    color: var(--primary-color);
    /*text-transform: capitalize;*/
    padding-left: 30px;
}

.about-us-body ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 3px;
    left: 0;
}

/************************************/
/***     07. Our Services css	  ***/
/************************************/

.our-services {
    position: relative; /* Necesario para posicionar los botones */
    padding: 50px 0 70px;
}
.services-carousel-nav .swiper-button-prev,
.services-carousel-nav .swiper-button-next {
    color: var(--accent-color); /* Color de las flechas */
    background-color: var(--white-color);
    border: 1px solid var(--dark-divider-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.services-carousel-nav .swiper-button-prev:hover,
.services-carousel-nav .swiper-button-next:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.services-carousel-nav .swiper-button-prev {
    left: -22px; /* Posiciona el botón a la izquierda, fuera del contenedor */
}

.services-carousel-nav .swiper-button-next {
    right: -22px; /* Posiciona el botón a la derecha, fuera del contenedor */
}
.services-carousel .swiper-pagination-bullet {
    background: var(--primary-color);
    opacity: 0.5;
}

.services-carousel .swiper-pagination-bullet-active {
    background: var(--accent-color);
    opacity: 1;
}

.services-carousel .swiper-pagination {
    margin-top: 30px;
    position: static; /* Para que aparezca debajo de los slides */
}
/* ---- Añadir para movimiento constante en el carrusel de servicios ---- */

.our-services .icon-star-image{
	position: absolute;
	top: 40%;
	left: 0;
	transform: translate(-20px, -50%);
}

.service-item{
	position: relative;
	background-color: var(--white-color);
	box-shadow: 0px 4px 40px 0px #0000000F;
	border-radius: 30px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
    z-index: 1;
}

.service-item:before{
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--primary-color);
    border-radius: 0px;
    transition: all 0.4s ease-in-out;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.service-item:hover:before{
    top: 0;
}

.service-item .icon-box{
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}

.service-item .icon-box img{
	width: 60px !important;  /* Ajusta este tamaño si es necesario */
    height: 60px !important; /* Ajusta este tamaño si es necesario */
	transition: all 0.5s ease-in-out;
}

.service-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-body{
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}

.service-body h3{
	font-size: 20px;
	font-weight: 600;
	/*text-transform: capitalize;*/
	margin-bottom: 20px;
	transition: 0.5s ease-in-out;
}

.service-item:hover .service-body p,
.service-item:hover .service-body h3{
	color: var(--white-color);
}

.service-body p{
	margin: 0;
	transition: 0.5s ease-in-out;
}

.read-more-btn{
	position: relative;
	z-index: 1;
}

.read-more-btn a{
	position: relative;
	display: inline-block;
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	padding-right: 35px;
	transition: all 0.5s ease-in-out;
}

.service-item:hover .read-more-btn a{
	color: var(--white-color);
}

.service-item:hover .read-more-btn a:hover{
	color: var(--accent-color);
}

.read-more-btn a::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
	background-size: 10px auto;
	background-color: var(--accent-color);
	border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: 0.4s ease-in-out;
}

.read-more-btn a:hover:after{
	background-size: 10px auto;
	transform: rotate(45deg);
}

.services-box-footer{
	width: 100%;
	/*max-width: 500px;*/
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
}
.services-box-footer .texto-condiciones {
    font-size: 12px !important;       /* Tamaño de letra de 12px */
    text-align: left !important;      /* Alineación a la izquierda */
    line-height: 1.6 !important;      /* Mejora la legibilidad entre líneas */
    /*max-width: 800px; */                /* Limita el ancho de línea para que no sea muy largo */
    margin-top: 20px auto 20px auto;         /* Centra el bloque de texto en la sección */
    color: #527282;                   /* Un color gris oscuro para que no compita con los títulos */
}
.services-box-footer .text-inversion{
	font-size: 18px !important;
	margin-top: 20px auto 0px auto;         /* Centra el bloque de texto en la sección */
    color: #00246e;   
}
.our-services .container-fluid{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}
.mt40{
	margin-top: 40px;
}
/* --- Código para igualar la altura de las tarjetas de servicio --- */

/* 1. Hacemos que el contenedor del slide sea flexible para que la tarjeta
      pueda estirarse. Swiper lo hace por defecto, pero esto lo asegura. */
.services-carousel .swiper-slide {
    display: flex;
    height: auto; /* Permite que la altura se ajuste al contenido más alto */
}

/* 2. Hacemos que nuestra tarjeta (.service-item) ocupe toda la altura 
      disponible y la convertimos en una columna flexible. */
.services-carousel .service-item {
    display: flex;
    flex-direction: column;
    width: 100%; /* Asegura que ocupe todo el ancho del slide */
}

/* 3. ¡LA PARTE MÁS IMPORTANTE! 
      Le decimos al cuerpo del servicio (la sección con el párrafo) que "crezca" 
      y ocupe todo el espacio vertical sobrante. */
.services-carousel .service-item .service-body {
    flex-grow: 1;
}
/*Video*/
.intro-clinic-video{
	padding: 100px 0 50px;
}

.visit-clinic{
	position: relative;
	background: url('../images/visit-clinic-bg.jpg') no-repeat;
	background-position: center center;
	background-size: auto;
	border-radius: 40px;
	padding: 150px 0;
}

.visit-clinic::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--primary-color);
	border-radius: 40px;
	opacity: 60%;
	width: 100%;
	height: 100%;
}

.visit-clinic-content{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.visit-clinic-content .section-title h3,
.visit-clinic-content .section-title h2{
	color: var(--white-color);
}

.visit-clinic-content .section-title h3::before{
	filter: brightness(0) invert(1);
}

.visit-clinic-btn .play-btn{
	display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--accent-color);
    background: var(--white-color);
    text-transform: capitalize;
    padding: 14px 50px 14px 20px;
    border-radius: 99px;
    border: none;
    transition: all 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
	cursor: none;
    z-index: 1;
}

.visit-clinic-btn .play-btn:hover{
	background-color: transparent;
	color: var(--white-color);
}

.visit-clinic-btn .play-btn::before{
    content: '\f04b';
	font-family: 'Font Awesome 6 Free';
	font-size: 12px;
	font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background-color: var(--accent-color);
	color: var(--white-color);
	border-radius: 50%;
    transform: translate(-10px, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
    transition: all 0.4s ease-in-out;
}

.visit-clinic-btn .play-btn:hover:before{
	background-color: var(--white-color);
	color: var(--primary-color);
}

.visit-clinic-btn .play-btn::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.visit-clinic-btn .play-btn:hover::after{
    width: 106%;
}

.our-counter{
	padding: 50px 0 70px;
}

.counter-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.counter-title{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.counter-title h2{
	font-size: 44px;
	margin-bottom: 5px;
}

.counter-title h3{
	font-size: 20px;
	font-weight: 600;
	/*text-transform: capitalize;*/
}

.counter-content p{
	margin: 0;
}

/************************************/
/***     08. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	position: relative;
	background: rgba(0, 191, 196, 20%) url('../images/why-choose-us-bg.svg') no-repeat;
	background-position: top center;
	background-size: auto;
	padding: 100px 0;
}

.why-choose-us .icon-star-image{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(10px, -50%);
}

.why-choose-box-1{
	position: relative;
	z-index: 1;
}

.why-choose-box-1 .why-choose-item{
	flex-direction: row-reverse;
}

.why-choose-box-1 .why-choose-item .icon-box{
    margin-left: 15px;
	margin-right: 0;
}

.why-choose-box-1 .why-choose-item .why-choose-content{
	text-align: right;
}

.why-choose-item{
    display: flex;
    align-items: center;
	margin-bottom: 60px;
}

.why-choose-item:last-child{
	margin-bottom: 0;
}

.why-choose-item .icon-box{
    margin-right: 15px;
}

.why-choose-item .icon-box img{
	width: 48px !important;  /* Ajusta este tamaño si es necesario */
    height: 48px !important; /* Ajusta este tamaño si es necesario */
}

.why-choose-content{
    width: calc(100% - 63px);
}

.why-choose-content h3{
	font-size: 20px;
	font-weight: 600;
	/*text-transform: capitalize;*/
	margin-bottom: 5px;
}

.why-choose-content p{
	margin: 0;
}

.why-choose-image{
	position: relative;
	z-index: 1;
}

/************************************/
/***     09. How It Work Css	  ***/
/************************************/

.how-it-work{
	padding-top: 100px;
	padding-bottom: 80px;
}

.how-it-work-img figure{
	display: block;
}

.how-it-work-img img{
	aspect-ratio: 1 / 1.05;
	object-fit: cover;
	border-radius: 40px;
}

.how-it-work-content{
	margin-left: 25px;
}
/* ======================================================= */
/* ====== ESTILOS PARA EL CONTENEDOR DE VIDEO POPUP ====== */
/* ======================================================= */
/* Contenedor principal del video y la vista previa */
/* ESTE ES TU CÓDIGO ACTUAL */
/* CÓDIGO CORREGIDO Y FINAL */
.how-it-work .video-container-inline {
    position: relative;
    display: block;
    border-radius: 40px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 36, 110, 0.15);
    background-color: #000;
    aspect-ratio: 1 / 1.05; /* <-- ¡ESTE ES EL CAMBIO CLAVE! Usa la proporción original. */
}

/* Imagen de vista previa (thumbnail) */
.how-it-work .video-container-inline .video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
    transition: all 0.4s ease;
    z-index: 2; /* Por encima del video, debajo del botón de play */
}

/* Botón de 'play' superpuesto */
.how-it-work .video-container-inline .play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 3; /* Siempre visible encima de la imagen */
}

/* Ícono de 'play' (el triángulo) */
.how-it-work .video-container-inline .play-button-overlay i {
    font-size: 30px;
    color: var(--primary-color);
    padding-left: 5px;
}

/* El reproductor de video, posicionado para llenar el contenedor */
.how-it-work .video-container-inline .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1; /* Detrás de la imagen al principio */
}

/* --- Efectos Hover --- */

.how-it-work .video-container-inline:hover .video-thumbnail {
    transform: scale(1.05);
    filter: brightness(80%);
}

.how-it-work .video-container-inline:hover .play-button-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--secondary-color);
}

.how-it-work .video-container-inline:hover .play-button-overlay i {
    color: var(--white-color);
}


.faq-accordion.how-work-accordion .accordion-item{
	position: relative;
	background: none;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

.faq-accordion.how-work-accordion .accordion-item:last-child{
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.faq-accordion.how-work-accordion .accordion-header{
	position: relative;
}

.faq-accordion.how-work-accordion .accordion-item .icon-box{
	position: absolute;
	left: 0;
	top: 4px;
}

.faq-accordion.how-work-accordion .accordion-item .icon-box img{
	/*max-width: 40px;*/
	 display: inline-block !important;
    width: 50px !important;  /* Tamaño deseado para el ícono */
    height: 50px !important; /* Mantenemos la proporción cuadrada */
    visibility: visible !important;
    opacity: 1 !important;
}
/*.faq-accordion.how-work-accordion .accordion-item .icon-box i{
	font-size: 25px;
	color:#00bfc4;
}*/
.faq-accordion.how-work-accordion .accordion-item .accordion-button{
	position: relative;
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 600;
	/*text-transform: capitalize;*/
	border: none;
	box-shadow: none;
	padding: 5px 35px 5px 60px;
}

.faq-accordion.how-work-accordion .accordion-header .accordion-button::after,
.faq-accordion.how-work-accordion .accordion-header .accordion-button.collapsed::after{
	content: '\f077';
	position: absolute;
	top: 50%;
	right: 0;
	font-family: 'Font Awesome 6 Free';
	font-size: 20px;
    font-weight: 900;
	color: var(--primary-color);
	transform: translate(0px, -50%);
	transition: all 0.3s ease-in-out;
}

.faq-accordion.how-work-accordion .accordion-header .accordion-button.collapsed::after{
	transform: rotate(-180deg) translate(0px, 50%);
}

.faq-accordion.how-work-accordion .accordion-item .accordion-body{
	padding: 10px 35px 0px 60px;
}

.faq-accordion.how-work-accordion .accordion-item .accordion-body p{
	margin: 0;
}
/* ======================================================= */
/* ====== AJUSTE DE ALINEACIÓN PARA SECCIÓN DE PRECIOS ====== */
/* ======================================================= */

/* Seleccionamos la fila específica dentro de la sección "how-it-work"
   y cambiamos su alineación vertical de 'center' a 'flex-start' */
/*.how-it-work > .container > .row {
    align-items: flex-start !important;
}*/
/************************************/
/***      10. Our Team Css	      ***/
/************************************/

.our-team{
	position: relative;
	padding: 100px 0 70px;
	background: var(--secondary-color) url('../images/our-team-bg.svg') no-repeat;
	background-position: top center;
	background-size: auto;
}

.our-team .icon-star-image{
	position: absolute;
	top: auto;
    bottom: 0;
    left: 0;
	transform: translate(-20px, -50%);
}

.team-member-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	z-index: 1;
}

.team-image{
    position: relative;
    overflow: hidden;
	border-radius: 30px;
	margin-bottom: 20px;
}

.team-image img{
	width: 100%;
	aspect-ratio: 1/1.2;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-content{
text-align: center;
}
 
.team-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

.team-social-icon{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
	margin: 0 auto; 
	transform: translateY(101%);
	text-align: center;
	z-index: 1;
    transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-social-icon{
	transform: translateY(-20px);
}

.team-social-icon ul{
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-social-icon ul li{
	display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
	height: 38px;
	width: 38px;
	background-color: var(--primary-color);
	border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.team-social-icon ul li a i{
    color: var(--white-color);
    font-size: 18px;
	transition: all 0.3s ease-in-out;
}

.team-social-icon ul li a:hover{
	background: var(--accent-color);
}

/************************************/
/***   11. Our Testimonials Css   ***/
/************************************/

.our-testimonials{
	padding: 100px 0 30px;
}

.our-testimonials .section-title{
	text-align: center;
}

.testimonial-image{
	position: relative;
	padding-bottom: 90px;
	margin-right: 20px;
}

.testimonial-img img{
	aspect-ratio: 1 / 1.1;
	border-radius: 40px;
	object-fit: cover;
}

.testimonial-rating-box{
	position: absolute;
	background: var(--secondary-color);
	border: 6px solid var(--white-color);
	border-radius: 30px;
	right: 0;
	bottom: 0;
	padding: 30px;
	max-width: 450px;
}

.rating-counter-item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--divider-color);
}

.rating-counter-item .rating-counter-number{
	min-width: 125px;
	margin-right: 20px;
}

.rating-counter-item .rating-counter-number h3{
	color: var(--white-color);
	font-size: 44px;
}

.rating-counter-item .rating-counter-content{
	width: calc(100% - 145px);
}

.rating-counter-item .rating-counter-content p{
	color: var(--white-color);
	margin: 0;
}

.service-rating ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.service-rating ul li{
	color: var(--white-color);
	/*text-transform: capitalize;*/
	margin-right: 20px;
}

.service-rating ul li:last-child{
	margin-right: 0;
}

.service-rating ul li i{
    font-size: 14px;
    color: #FFA800;
}

.our-testimonials .swiper-wrapper{
	cursor: none;
}

.testimonial-item .testimonial-quote-image{
	margin-bottom: 30px;
}

.testimonial-item .testimonial-quote-image img{
	max-width: 50px;
}

.testimonial-item .testimonial-content{
	margin-bottom: 30px;
}

.testimonial-content p{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 500;
	margin: 0;
}

.testimonial-item .testimonial-body{
	display: flex;
	align-items: center;
}

.testimonial-body .author-image{
	margin-right: 10px;
}

.testimonial-body .author-image img{
	max-width: 64px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.testimonial-body .author-content{
	width: calc(100% - 74px);
}

.testimonial-body .author-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.testimonial-body .author-content p{
	text-transform: capitalize;
	margin: 0;
}

.testimonial-btn{
	display: flex;
	align-items: center;
	justify-content: left;
	margin-top: 40px;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 40px;
	height: 40px;
	background-color: var(--secondary-color);
	border-radius: 6px;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next{
	margin-left: 20px;
}


.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover{
	background-color: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../images/arrow-white.svg") no-repeat center center;
    background-size: 12px auto;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-prev::before{
	transform: rotate(225deg);
}

/************************************/
/***       12. Our Blog  Css	  ***/
/************************************/

.our-blog{
	position: relative;
	padding: 100px 0 70px;
	background: rgba(0, 191, 196, 20%) url('../images/our-blog-bg.svg') no-repeat;
	background-position: center center;
	background-size: auto;
}

.our-blog .icon-star-image{
	position: absolute;
    top: 50%;
    left: 0;
    transform: translate(50%, -50%);
	z-index: 0;
}

.blog-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	z-index: 1;
}

.blog-item .post-featured-image{
	border-radius: 30px;
	overflow: hidden;
	margin-bottom: 30px;
}

.blog-item .post-featured-image a{
	cursor: none;
	display: block;
}

.blog-item .post-featured-image img{
	border-radius: 30px;
	aspect-ratio: 1 / 0.66;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.blog-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-body{
	margin-bottom: 15px;
}

.post-item-body h2{
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	/*text-transform: capitalize;*/
	margin-bottom: 20px;
}

.post-item-body h2 a{
	color: inherit;
}

.post-item-body p{
	margin: 0;
}

.post-item-footer a.read-more-btn{
	position: relative;
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	padding-right: 35px;
	transition: 0.5s ease-in-out;
}

.post-item-footer a.read-more-btn::after{
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    bottom: 0;
    background-image: url("../images/arrow-white.svg");
    background-repeat: no-repeat;
    background-position: center center;
	background-size: 10px auto;
	background-color: var(--accent-color);
	border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: 0.4s ease-in-out;
}

.post-item-footer a.read-more-btn:hover::after{
	transform: rotate(45deg);
	background-color: var(--primary-color);
}

.post-item-footer a.read-more-btn:hover{
	color: var(--primary-color);
}

/************************************/
/***    13. Our Contact Us css	  ***/
/************************************/

.contact-now{
	padding: 0px 0 50px;
}

.contact-google-map .google-map-iframe,
.contact-google-map .google-map-iframe iframe{
	width: 100%;
	height: 600px;
	border-radius: 30px;
}

.contact-google-map .google-map-iframe iframe{
	/*filter: grayscale(1);*/
	transition: all 0.3s ease-in-out;
}

.contact-google-map .google-map-iframe iframe:hover{
	/*filter: grayscale(0);*/
}

.contact-now-content{
	margin-left: 30px;
}

.contact-now-info{
	margin-bottom: 40px;
}

.contact-info-list{
	position: relative;
    padding-left: 38px;
    margin-bottom: 30px;
}

.contact-info-list:last-child{
	margin-bottom: 0;
}

.contact-info-list .icon-box{
    position: absolute;
    top: 0px;
    left: 0px;
}
.contact-info-list .icon-box{
	font-size: 25px;
	color: #00bfc4;
}

/*.contact-info-list .icon-box img{
	width: 100%;
	max-width: 28px;
}*/

.contact-info-list .contact-info-content p{
	margin: 0;
}

/************************************/
/***        14. Footer css  	  ***/
/************************************/

footer.main-footer{
	padding: 100px 0 0;
	background: var(--primary-color) url('../images/footer-bg.svg') no-repeat;
	background-position: center center;
	background-size: auto;
}

.footer-logo{
	margin-bottom: 35px;
}

.footer-logo img{
	width: 100%;
	max-width: 220px;
}

.about-footer-content p{
	color: var(--white-color);
	margin-bottom: 0;
}
.about-footer-content .text-condicion{
	font-size: 12px;
}
.about-footer-content .text-hastag{
	font-size: 40px;
}
.footer-links h3{
	color: var(--white-color);
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}
.footer-links i{
	font-size: 20px;
	color: #fff;
}
.footer-links ul{
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

.footer-links ul li{
	margin-bottom: 10px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li a{
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:hover a{
	color: var(--accent-color);
}

.footer-quick-links,
.footer-social-links{
	margin-left: 50px;
}

.footer-copyright{
	border-top: 1px solid var(--divider-color);
	padding: 30px 0;
	text-align: center;
	margin-top: 60px;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin: 0;
}

/************************************/
/***     15. About us Page css	  ***/
/************************************/

.page-header{
	background: var(--secondary-color) url('../images/page-header-bg.svg') no-repeat;
	background-position: center center;
	background-size: contain;
	padding: 100px 0;
}

.page-header-box h1{
	font-size: 54px;
    font-weight: 700;
	text-align: center;
	color: var(--accent-color);
	margin-bottom: 20px;
}

.page-header-box h1 span{
	color: var(--primary-color);
}

.page-header-box ol{
	margin: 0;
	padding: 0;
	justify-content: center;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--accent-color);
}

.page-about-us .about-us-body{
    margin-bottom: 0px;
}

.insurance-company-carousel{
	background: var(--secondary-color);
	padding: 60px 0;
}

.insurance-carousel-title h3{
	font-size: 24px;
	font-weight: 600;
	text-transform: capitalize;
}

.company-carousel .swiper-wrapper .swiper-slide{
	text-align: center;
}

.company-carousel .swiper-wrapper .swiper-slide .company-logo img{
	max-width: 200px;
}

.about-how-it-work .how-it-work-content{
	margin: 0 25px 0 0;
}

.dental-process{
	padding: 100px 0 70px;
}

.dental-process .section-title{
	max-width: 560px;
	margin: 0 auto;
}

.dental-process-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.dental-process-image{
	position: relative;
	margin-bottom: 30px;
	border-radius: 40px;
	overflow: hidden;
}

.dental-process-image .dental-process-img img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: brightness(80%);
	border-radius: 40px;
	transition: all 0.4s ease-in-out;
}

.dental-process-item:hover .dental-process-img img{
	transform: scale(1.1);
}

.dental-process-image .dental-process-number{
	position: absolute;
	background: var(--white-color);
	border-radius: 16px;
	left: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.dental-process-item:hover .dental-process-image .dental-process-number{
	background-color: transparent;
}

.dental-process-image .dental-process-number::before{
	content: '';
	display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
	height: 100%;
	width: 100%;
	background-color: var(--primary-color);
    border-radius: 16px;
	transform: scale(0);
    transition: all 0.4s ease-in-out;
    height: 100%;
}

.dental-process-item:hover .dental-process-image .dental-process-number::before{
	transform: scale(1);
}

.dental-process-image .dental-process-number h3{
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 600;
	transition: all 0.4s ease-in-out;
}

.dental-process-item:hover .dental-process-number h3{
	color: var(--white-color);
}

.dental-process-item .dental-process-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.dental-process-item .dental-process-content p{
	margin: 0;
}

.expertise-experience-content{
	margin-right: 30px;
}

.expertise-experience-body ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.expertise-experience-body ul li{
    position: relative;
    width: calc(50% - 10px);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 30px;
}

.expertise-experience-body ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 3px;
    left: 0;
}

.expertise-experience-img figure{
	display: block;
}

.expertise-experience-img img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 40px;
}

/************************************/
/***     16. Services Page css	  ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

.page-services .service-item{
	border: 1px solid var(--dark-divider-color);
}

/************************************/
/***    17. Service Single css	  ***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.service-sidebar{
	margin-right: 25px;
	position: sticky;
	top: 20px;
}

.service-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 40px;
}

.service-catagery-list h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-catagery-list ul li{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

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

.service-catagery-list ul li a{
	display: block;
    position: relative;
    color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a{
	color: var(--accent-color);
}

.service-catagery-list ul li a::after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
	transform: translate(0px, -50%);
	background-image: url('../images/arrow-blue.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px auto;
	width: 12px;
	height: 12px;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a::after{
	transform: translate(0px, -50%) rotate(45deg);
}

.sidebar-cta-box{
	background: var(--accent-color);
	border-radius: 30px;
	padding: 40px;
	text-align: center;
}

.sidebar-cta-box .icon-box{
	margin-bottom: 30px;
}

.sidebar-cta-box .icon-box img{
	max-width: 64px;
}

.sidebar-cta-box .cta-content{
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content h3{
	color: var(--white-color);
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content p{
	color: var(--white-color);
	margin: 0;
}

.cta-contact-btn .btn-default{
	background: var(--white-color);
	color: var(--accent-color);
}

.cta-contact-btn .btn-default::before{
	background-color: var(--secondary-color);
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat ;
    background-position: center center;
	background-size: 10px auto;
}

.cta-contact-btn .btn-default:hover{
	background-color: transparent;
	color: var(--white-color);
}

.service-single-content{
	padding-bottom: 100px;
}

.service-featured-image{
	margin-bottom: 30px;
}

.service-featured-image figure{
	display: block;
}

.service-featured-image img{
	aspect-ratio: 1 / 0.61;
	object-fit: cover;
	border-radius: 40px;
}

.service-entry h2{
	font-size: 44px;
	margin-bottom: 30px;
}

.service-entry h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-entry p{
	margin-bottom: 30px;
}

.service-entry p:last-child{
	margin-bottom: 0px;
}

.service-entry ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
}

.service-entry ul li{
	position: relative;
    width: calc(50% - 10px);
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 600;
	padding-left: 30px;
	text-transform: capitalize;
}

.service-entry ul li:before{
	content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
}

.service-entry-image{
	margin-bottom: 30px;
}

.service-entry-img-1 figure,
.service-entry-img-2 figure{
	display: block;
}

.service-entry-img-1 img,
.service-entry-img-2 img{
	aspect-ratio: 1 / 0.8;
    object-fit: cover;
	border-radius: 40px;
}

.faqs-section-title{
	margin-bottom: 60px;
}

.faqs-section-title h2{
	font-size: 44px;
}

.service-faqs .faq-accordion .accordion-item{
	border: 2px solid var(--dark-divider-color);
	border-radius: 10px;
	margin-bottom: 20px;
}

.service-faqs .faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.service-faqs .faq-accordion .accordion-item .accordion-button::after,
.service-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '';
	position: absolute;
	right: 0px;
	top: 50%;
	bottom: auto;
	transform: translate(-20px, -50%) rotate(135deg);
	background-image: url("../images/arrow-white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 8px auto;
	border-radius: 50%;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	transition: all 0.3s ease-in-out;
}

.service-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translate(-20px, -50%) rotate(45deg);
}

.service-faqs .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	text-transform: capitalize;
	padding: 15px 50px 15px 20px;
}

.service-faqs .accordion-body{
	padding: 0 20px 20px 20px;
}

.service-faqs .accordion-body p{
	margin: 0;
}

/************************************/
/***    18. Blog Archive css	  ***/
/************************************/

.page-blog{
	padding: 100px 0;
}

.page-blog .blog-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

.post-pagination{
    margin-top: 30px;
    text-align: center;
}

.post-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.post-pagination ul li a,
.post-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 6px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.post-pagination ul li.active a, 
.post-pagination ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/***     19. Blog Single css	  ***/
/************************************/

.page-single-post{
	padding: 100px 0;
}

.post-single-meta ol li.breadcrumb-item{
	font-size: 18px;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--accent-color);
    margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;
}

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 40px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	/*border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;*/
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	margin: 0 0 0.6em;
}

.post-entry h1{
	font-size: 54px;
}

.post-entry h2{
	font-size: 44px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 18px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 18px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 35px 40px;
    background-size: 45px;
    border-radius: 40px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	color: var(--primary-color);
	font-size: 22px;
	font-weight: 600;
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-size: 22px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--accent-color);
    color: var(--white-color);
	border-radius: 6px;
    padding: 8px 20px;
    margin-left: 10px;
    margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background-color: var(--accent-color);
    color: var(--white-color);
	border-radius: 6px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background-color: var(--primary-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a i{
    color: var(--secondry-color);
}

/************************************/
/***      20. Team Page css  	  ***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

/************************************/
/***   21. Team Single Page css	  ***/
/************************************/

.page-team-single{
	padding: 100px 0 25px;
}

.page-team-single .row{
	background-color: var(--primary-color);
	border-radius: 35px 30px 30px 35px;
}
/* ======================================================= */
/* ====== ESTILOS PARA LA SECCIÓN DE ESPECIALISTA ====== */
/* ======================================================= */

/* --- Estilos para la lista principal (sin cambios) --- */
.page-team-single .member-detail-body ul li {
    /*display: flex;*/
    align-items: flex-start;
    margin-bottom: 20px;
}

/* --- Estilos para el nuevo bloque del premio --- */
.member-award {
    display: flex;
    align-items: center; /* Centra verticalmente el ícono con el texto */
    margin-top: 40px; /* Espacio para separarlo de la lista de arriba */
}

.award-icon {
    margin-right: 25px; /* Espacio entre el ícono y el texto */
}

.award-icon i {
    font-size: 5rem; /* ~80px, hace el ícono mucho más grande */
    color: var(--secondary-color); /* Color dorado/amarillo para la medalla */
}

.award-text {
    font-size: 1.1rem; /* ~17.6px */
    color: var(--white-color);
    line-height: 1.6;
}

.award-text strong {
    color: var(--secondary-color); /* Resalta el nombre de la medalla con el mismo color */
}

/* --- Estilos Responsive --- */
@media (max-width: 767px) {
    .member-award {
        flex-direction: column; /* Apila el ícono sobre el texto en móviles */
        text-align: center;
    }
    .award-icon {
        margin-right: 0;
        margin-bottom: 15px; /* Espacio entre el ícono y el texto en móviles */
    }
    .award-icon i {
        font-size: 4rem; /* Reduce un poco el tamaño del ícono en móviles */
    }
}
/*END*/

.team-member-image{
	height: 100%;
}

.team-member-image figure{
	height: 100%;
}

.team-member-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 30px 0 0 30px;
}

.team-member-details{
	margin-left: 30px;
	height: 100%;
	padding: 50px 30px;
}

.member-detail-header{
	margin-bottom: 40px;
}

.member-detail-header h2{
	font-size: 32px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.member-detail-header p{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
	margin: 0;
}

.member-detail-content{
	margin-bottom: 40px;
}

.member-detail-content p{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
}

.member-detail-content p:last-child{
	margin-bottom: 0;
}

.member-detail-body{
	margin-bottom: 40px;
}

.member-detail-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.member-detail-body ul li{
	font-size: 18px;
	color: var(--white-color);
	/*display: flex;*/
	margin-bottom: 15px;
}

.member-detail-body ul li:last-child{
	margin-bottom: 0;
}

.member-detail-body ul li span{
	width: 30%;
	font-weight: 500;
}

.member-social-list ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-social-list ul li{
    display: inline-block;
    margin-right: 20px;
}

.member-social-list ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    transition: all 0.2s ease-in-out;
}

.member-social-list ul li:hover a{
    color: var(--accent-color);
}

.member-social-list ul li a i{
    font-size: 20px;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.about-member-details{
	padding: 25px 0 100px;
}

.about-member-info{
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
}

.member-info-title{
	margin-bottom: 30px;
}

.member-info-title h2{
	font-size: 32px;
	text-transform: capitalize;
}

.member-info-content p:last-child{
	margin-bottom: 0;
}

.member-winning-awards{
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
}

.winning-awards-content{
	margin-bottom: 30px;
}

.winning-awards-content h2{
	font-size: 32px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.winning-awards-content p:last-child{
	margin-bottom: 0;
}

.winning-awards-box .row .col-6{
	padding: 0;
}

.winning-awards-box{
	text-align: center;
}

.winning-award-img img{
	max-height: 135px;
}

.winning-award-img.img-box-1{
	border-right: 1px solid var(--dark-divider-color);
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 35px;
}

.winning-award-img.img-box-2{
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 35px;
}

.winning-award-img.img-box-3{
	padding-top: 35px;
	border-right: 1px solid var(--dark-divider-color);
}

.winning-award-img.img-box-4{
	padding-top: 35px;
}

.team-member-skills{
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
}

.member-skills-title{
	margin-bottom: 30px;
}

.member-skills-title h2{
	font-size: 32px;
	text-transform: capitalize;
}

.team-member-skills .skills-progress-bar{
	margin-bottom: 35px;
}

.team-member-skills .skills-progress-bar:last-child{
	margin-bottom: 0;
}

.skillbar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.skillbar .skill-data .skill-title{	
	font-size: 20px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
}

.skillbar .skill-data .skill-no{
	font-size: 22px;
	font-weight: 500;
	color: var(--primary-color);
	margin-left: 20px;
}

.skillbar .skill-progress{
	width: 100%;
	height: 10px;
	background: var(--secondary-color);
	border-radius: 99px;
	position: relative;
}

.skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--accent-color);
	border-radius: 99px;
}

.team-sidebar-cta{
	position: relative;
	background: var(--white-color);
	padding: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	z-index: 1;
}

.cta-info-content{
	display: flex;
}

.cta-info-content .icon-box{
	position: relative;
	background: var(--accent-color);
	border-radius: 10px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	overflow: hidden;
}

.cta-info-content .icon-box:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background-color: var(--primary-color);
    transition: all 0.4s ease-in-out;
    height: 100%;
}

.cta-info-content:hover .icon-box:before{
	top: 0;
}

.cta-info-content .icon-box img{
	position: relative;
	z-index: 1;
	max-width: 35px;
}

.cta-info-content .cta-content{
	width: calc(100% - 80px);
}

.cta-info-content .cta-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.cta-info-content .cta-content p{
	margin-bottom: 30px;
}

/************************************/
/***     22. Gallery Page css	  ***/
/************************************/

.our-gallery-page{
	padding: 100px 0 70px; 
}

.photo-gallery{
	margin-bottom: 30px;
	border-radius: 20px;
	overflow: hidden;
}

.photo-gallery a{
	cursor: none;
}

.photo-gallery figure{
	position: relative;
}

.photo-gallery figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	border-radius: 20px;
	opacity: 0%;
	visibility: hidden;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.photo-gallery:hover figure::before{
	opacity: 80%;
	visibility: visible;
	transform: scale(1);
}

.photo-gallery figure::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(-50%);
	width: 65px;
	height: 65px;
	margin: 0 auto;
	background: var(--accent-color) url("../images/icon-eye.svg") no-repeat;
	background-position: center center;
	background-size: 40px auto;
	border-radius: 50%;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
}

.photo-gallery:hover figure::after{
	opacity: 1;
	visibility: visible;
}

.photo-gallery img{
	position: relative;
	aspect-ratio: 1 / 0.95;
    object-fit: cover;
	border-radius: 20px;
}

.mfp-arrow-left:before,
.mfp-arrow-right:before{
	border: none;
}

.mfp-arrow-left:after{
	border-right: 13px solid var(--accent-color);
	opacity: 1;
}	

.mfp-arrow-right:after{
	border-left: 13px solid var(--accent-color);
	opacity: 1;
}

/************************************/
/***    23. Technology Page css	  ***/
/************************************/

.page-techonology{
	padding: 50px 0;
}

.page-techonology .row.techonology-item{
	margin-bottom: 50px;
}

.page-techonology .row.techonology-item:last-child{
	margin-bottom: 0;
}

.page-techonology .row.techonology-item:nth-child(even){
	flex-direction: row-reverse;
}

.techonology-image-box{
	display: flex;
	gap: 20px;
}

.techonology-image-1,
.techonology-image-2{
	width: 100%;
}

.techonology-image-box figure{
	display: block;
}

.techonology-image-box img{

	width: 100%;
	aspect-ratio:1 / 1;
	object-fit: cover;
	border-radius: 40px;
}

.techonology-content .section-title{
	margin-bottom: 0;
}

.techonology-content .section-title h2{
	width: 100%;
	/*max-width: 500px;*/
}
/* --- Sección de Beneficios --- */
.benefits-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* Un fondo muy sutil para diferenciar la sección */
}

.benefit-item {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    height: 100%;
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 25px;
    background-color: #43B6B4; /* El color turquesa de tu imagen */
    border-radius: 50%;
    color: #ffffff;
    font-size: 36px;
    transition: background-color 0.3s ease;
}

.benefit-item:hover .benefit-icon {
    background-color: #0d2c3f; /* Un color oscuro de tu paleta para el hover */
}

.benefit-content h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #0d2c3f; /* Color de título de tu plantilla */
    margin-bottom: 10px;
}

.benefit-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

.benefit-content p strong {
    color: #0d2c3f; /* Resalta las palabras clave */
}

/* --- Clases para Grid Responsive de 5 columnas --- */
/* En pantallas grandes (desktops), creamos 5 columnas iguales */
@media (min-width: 992px) {
    .col-lg-2-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
/* ======================================================= */
/* ========== ESTILOS PARA LA SECCIÓN CTA ========== */
/* ======================================================= */

.cta-section {
    padding: 100px 0; /* Espacio arriba y abajo de la sección */
    background-color: var(--white-color); /* O el color de fondo de tu página */
}

.cta-box2 {
    background-color: var(--primary-color); /* Color de fondo azul oscuro de tu paleta */
    color: var(--white-color);
    padding: 50px 60px;
    border-radius: 30px; /* Bordes redondeados como en otras secciones */
    box-shadow: 0px 10px 40px rgba(14, 56, 76, 0.2); /* Sombra sutil para un efecto "flotante" */
}

.cta-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cta-text li {
    font-size: 1.1rem; /* 17.6px - Un poco más grande para ser legible */
    font-weight: 400;
    margin-bottom: 1rem;
    display: flex; /* Para alinear el ícono con el texto */
    align-items: center;
}

.cta-text li:last-child {
    margin-bottom: 0;
}

.cta-text li svg {
    min-width: 24px; /* Asegura que el ícono no se encoja */
    margin-right: 12px;
}

/* Estilos para el botón dentro del CTA */
.cta-button-wrapper {
    text-align: right; /* Alinea el botón a la derecha en pantallas grandes */
}

.btn-default.cta-button {
    background-color: var(--white-color);
    color: var(--accent-color); /* Texto del botón en azul claro */
    border: 2px solid transparent;
}

/* Efecto hover moderno para el botón */
.btn-default.cta-button:hover {
    background-color: transparent;
    color: var(--white-color);
    border-color: var(--white-color);
}

.btn-default.cta-button:hover::before {
    background-color: var(--white-color);
    background-image: url('../images/arrow-blue.svg'); /* Revertir al ícono de flecha azul */
}

/* ======================================================= */
/* =================== ESTILOS RESPONSIVE =================== */
/* ======================================================= */

@media (max-width: 991px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-box2 {
        padding: 40px 30px;
        text-align: center; /* Centra todo el texto en móvil */
    }

    .cta-text li {
        justify-content: center; /* Centra el ícono y el texto en móvil */
        text-align: left; /* Mantiene el texto de la línea alineado a la izquierda */
        font-size: 1rem;
    }

    .cta-button-wrapper {
        text-align: center; /* Centra el botón en móvil */
        margin-top: 30px;
    }
}
/************************************/
/***   24. Testimonial Page css	  ***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

.testimonial-box-item{
	background: var(--white-color);
	box-shadow: 0px 4px 40px 0px #0000000F;
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
}

.testimonial-box-item .testimonial-box-header{
	margin-bottom: 20px;
}

.testimonial-quote-img{
	margin-bottom: 20px;
}

.testimonial-quote-img img{
	max-width: 32px;
}

.testimonial-box-header .testimonial-rating{
	margin-bottom: 20px;
}

.testimonial-box-header .testimonial-rating i{
	font-size: 16px;
	color: #F5A200;
	margin-right: 5px;
}

.testimonial-box-header .testimonial-box-content p{
	margin: 0;
}

.testimonial-box-body{
	display: flex;
	align-items: center;
}

.testimonial-box-body .author-box-image{
	width: 56px;
	height: 56px;
	margin-right: 10px;
}

.testimonial-box-body .author-box-image img{
	width: 56px;
	height: 56px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 50%;
}

.testimonial-box-body .author-box-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.testimonial-box-body .author-box-content{
	width: calc(100% - 66px);
}

.testimonial-box-body .author-box-content p{
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***   25. Contact us Page css	  ***/
/************************************/

.page-contact{
	padding: 100px 0 50px;
}

.contact-us-content{
	margin-right: 30px;
}

.contact-us-item{
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 30px;
	box-shadow: 0px 4px 40px 0px #0000000F;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

/* .contact-us-content .col-md-6:nth-last-child(-n + 2) .contact-us-item{
	height: auto;
	margin-bottom: 0;
} */

.contact-us-item .icon-box{
	background: var(--secondary-color);
	border-radius: 100px;
	height: 52px;
	width: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
/*.contact-us-item .icon-box i{
	font-size: 20px;
	color:#00bfc4 ;
}*/
.contact-us-item .icon-box img{
	max-width: 30px;
}

.contact-us-item .contact-info-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.contact-us-item .contact-info-content p{
	width: 100%;
	max-width: 220px;
	margin: 0;
}

.google-map-iframe,
.google-map-iframe iframe{
	width: 100%;
	height: 735px;
	border-radius: 30px;
}

.contact-us-form{
	padding: 50px 0 100px;
}

.contact-us-img figure{
	display: block;
}

.contact-us-img img{
	width: 100%;
	aspect-ratio: 1 / 1.05;
	object-fit: cover;
	border-radius: 40px;
}

.contact-form{
	margin-left: 30px;
}

.contact-form .form-control{
    padding: 15px 20px;
    background-color: transparent;
	border: 1px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
}

/************************************/
/***      26. FAQs Page css 	  ***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.faq-sidebar{
	position: sticky;
	top: 20px;
	margin-right: 20px;
}

.faq-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
}

.faq-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-catagery-list ul li{
	position: relative;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
	padding-right: 25px;
}

.faq-catagery-list ul li:last-child{
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;	
}

.faq-catagery-list ul li:before{
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	transform: translateY(6px);
	background: url('../images/arrow-blue.svg') no-repeat center center;
	background-size: 12px auto;
	width: 14px;
	height: 14px;
	transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover:before{
	transform: translateY(6px) rotate(45deg);
}

.faq-catagery-list ul li a{
	color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a{
	color: var(--accent-color);
}

.page-faqs .faqs-section{
	margin-bottom: 60px;
}

.page-faqs .faqs-section:last-child{
	margin-bottom: 0;
}

.page-faqs .faqs-section-title{
	margin-bottom: 30px;
}

.page-faqs .faq-accordion .accordion-item{
	border: 2px solid var(--dark-divider-color);
	border-radius: 10px;
	margin-bottom: 20px;
}

.page-faqs .faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.page-faqs .faq-accordion .accordion-item .accordion-button::after,
.page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '';
	position: absolute;
	right: 0px;
	top: 50%;
	bottom: auto;
	transform: translate(-20px, -50%) rotate(135deg);
	background-image: url("../images/arrow-white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 8px auto;
	border-radius: 50%;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	transition: all 0.3s ease-in-out;
}

.page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translate(-20px, -50%) rotate(45deg);
}

.page-faqs .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	text-transform: capitalize;
	padding: 15px 50px 15px 20px;
}

.page-faqs .accordion-body{
	padding: 0 20px 20px 20px;
}

.page-faqs .accordion-body p{
	margin: 0;
}

/***************************************/
/***  27. Make Appointment Page css  ***/
/***************************************/

.page-book-appointment{
	padding: 100px 0;
}

.page-book-appointment .book-appointment-form{
	max-width: 1050px;
	margin: 0 auto;
	box-shadow: 0px 4px 40px 0px #0000000F;
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
}

.book-appointment-form .section-title{
	text-align: center;
}

.book-appointment-form .appointment-form{
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.appointment-form .form-control{
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
}

/************************************/
/*** 	   28. 404 Page css       ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page .error-page-content{
	text-align: center;
}

.error-page-content-heading{
	margin-bottom: 30px;
}

.error-page-content-heading h2{
	font-size: 44px;
}

.error-page-content-heading h2 span{
	color: var(--accent-color);
}

.error-page-content-body p{
	margin-bottom: 30px;
}

/************************************/
/***     29. responsive css       ***/
/************************************/

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

	.navbar{
        padding: 12px 0px;
    }
	
	.main-menu ul li{
		margin: 0;
	}
	.services-carousel-nav .swiper-button-prev,
    .services-carousel-nav .swiper-button-next {
        display: none;
    }
}

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

	#magic-cursor{
        display: none !important;
    }

    .slicknav_nav li, .slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.section-row{
		margin-bottom: 40px;
	}

	.section-title{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 44px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 15px;
	}
.hero-content-body p{
	
	color: var(--white-color);
	
}
	.section-btn{
        text-align: left;
        margin-top: 20px;
    }

	.hero{
		background-size: 100% auto;
	}

	.hero-content{
		padding-right: 0px;
		margin-bottom: 30px;
	}

	.hero-content-body{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.hero-image{
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}

	.hero-img{
		text-align: center;
	}

	.hero-img img{
		max-width: 60%;
	}

	.export-dantist-box{
		transform: translateY(-50px);
	}

	.export-dantist-box .icon-box img{
		max-width: 58px;
	}

	.export-dantist-content{
		width: calc(100% - 68px);
	}
	
	.hero-icon-list .hero-icon-box-1{
		top: 60px;
		right: 60px;
		transform: translate(-50% , 50%);
		width: 70px;
		height: 70px;
	}

	.hero-icon-list .hero-icon-box-2{
		top: 50%;
		bottom: 0;
		left: 100px;
		transform: translate(50%, -50%);
		width: 70px;
		height: 70px;
	}

	.hero-icon-list .hero-icon-box-2{
		top: 50%;
		bottom: 0;
		left: 100px;
		transform: translate(50%, -50%);
		width: 70px;
		height: 70px;
	}

	.hero-icon-list .hero-icon-box-3{
		right: 0;
		bottom: 0;
		transform: translate(-100px, -50%);
		width: 70px;
		height: 70px;
	}
	.hero-icon-list .hero-icon-box-1 img,
	.hero-icon-list .hero-icon-box-2 img,
	.hero-icon-list .hero-icon-box-3 img{
		max-width: 40px;
	}

	.hero.hero-book-appointment{
		padding: 50px 0;
	}

	.hero-book-appointment .appointment-form{
		padding: 30px;
		margin-left: 0px;
	}

	.hero-appointment-form-title h2{
		font-size: 32px;
	}

	.hero.bg-image{
		padding: 100px 0;
	}

	.hero.bg-image .hero-content .section-title h1{
		font-size: 80px;
	}

	.hero-slider-layout .hero-slide{
		padding: 100px 0;
	}

	.hero-slider-layout .swiper-pagination{
		bottom: 40px;
	}

	.cta-box{
		padding: 25px 0;
	}


	.cta-box-btn{
		text-align: center;
		margin-top: 30px;
	}

	.cta-box-content h3{
		font-size: 18px;
	}

	.about-us{
		padding: 50px 0;
	}

	.about-image{
		max-width: 560px;
		margin-right: 0px;
		margin: 0 auto;
		margin-bottom: 30px;
		padding-bottom: 150px;
	}

	.about-us-body{
		margin-bottom: 30px;
	}

	.our-services{
		padding: 50px 0 0;
	}

	.service-item{
		padding: 20px;
	}

	.service-item .icon-box{
		margin-bottom: 15px;
	}

	.service-body{
		margin-bottom: 15px;
	}

	.service-body h3{
		margin-bottom: 15px;
	}

	.services-box-footer{
		margin-top: 10px;
		text-align: center;
	}

	.intro-clinic-video{
		padding: 50px 0 25px;
	}

	.visit-clinic{
		padding: 100px 0;
	}

	.visit-clinic-content{
		max-width: 550px;
	}

	.our-counter{
		padding: 25px 0 20px;
	}

	.counter-title h2{
		font-size: 36px;
	}

	.counter-title{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.why-choose-us{
		padding: 50px 0;
		background-size: 100% auto;
	}

	.why-choose-us .icon-star-image{
		transform: translate(10px, 50%);
	}

	.why-choose-box-1 .why-choose-item{
		flex-direction: row;
	}
	
	.why-choose-box-1 .why-choose-item .icon-box{
		margin-left: 0px;
		margin-right: 15px;
	}
	
	.why-choose-box-1 .why-choose-item .why-choose-content{
		text-align: left;
	}

	.why-choose-item{
		margin-bottom: 30px;
	}

	.why-choose-image{
		margin-top: 30px;
		text-align: center;
	}

	/* ======================================================= */
/* ====== SOLUCIÓN DEFINITIVA PARA AMPLIAR SECCIÓN DE PRECIOS ====== */
/* ======================================================= */

/* 1. Usamos nuestra clase personalizada para forzar el ancho */
.precios-footer-ancho {
    max-width: 800px !important; /* Forzamos el ancho, superando cualquier estilo de la plantilla */
    margin: 40px auto 0 !important;
}

/* 2. Estilos para los textos (sin cambios, pero los mantenemos para mejorar la legibilidad) */
.precios-footer-ancho .precio-item {
    font-size: 1.1rem;
    color: #527282;
    line-height: 1.6;
}

.precios-footer-ancho .text-inversion {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-top: 25px;
}

.precios-footer-ancho .texto-condiciones {
    font-size: 0.85rem;
    color: #7a8a92;
    line-height: 1.7;
    margin-top: 25px;
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 25px;
}
	.how-it-work{
		padding: 50px 0;
	}

	.how-it-work-img{
		margin-bottom: 30px;
	}

	.how-it-work-img img{
		aspect-ratio: 1 / 0.85;
	}

	.how-it-work-content{
		margin-left: 0px;
	}

	.faq-accordion.how-work-accordion .accordion-item{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.faq-accordion.how-work-accordion .accordion-item .icon-box{
		top: 0px;
	}

	.our-team{
		padding: 50px 0 20px;
		background-size: 100% auto;
	}

	.our-testimonials{
		padding: 50px 0;
	}
	
	.testimonial-image{
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

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

	.testimonial-rating-box{
		max-width: 420px;
		padding: 20px;
	}

	.rating-counter-item{
		margin-bottom: 15px;
	}

	.rating-counter-item .rating-counter-number{
		min-width: 100px;
	}

	.rating-counter-item .rating-counter-number h3{
		font-size: 34px;
	}

	.rating-counter-item .rating-counter-content{
		width: calc(100% - 120px);
	}

	.service-rating ul li{
		margin-right: 15px;
	}

	.testimonial-item .testimonial-quote-image{
		margin-bottom: 20px;
	}

	.testimonial-item .testimonial-content{
		margin-bottom: 20px;
	}

	.testimonial-content p{
		font-size: 16px;
	}

	.testimonial-btn{
		margin-top: 30px;
	}

	.our-blog{
		padding: 50px 0 20px;
		background-size: 100% auto;
	}

	.our-blog .icon-star-image{
		top: 40%;
		transform: translate(0%, -50%);
	}

	.blog-item .post-featured-image{
		margin-bottom: 20px;
	}

	.post-item-body h2{
		margin-bottom: 15px;
	}

	.post-item-footer a.read-more-btn{
		padding-right: 30px;
	}

	.post-item-footer a.read-more-btn::after{
		top: 0;
		background-size: 8px auto;
		width: 20px;
    	height: 20px;
	}

	.contact-now{
		padding: 50px 0;
	}

	.contact-google-map .google-map-iframe{
		margin-bottom: 30px;
	}

	.contact-google-map .google-map-iframe,
	.contact-google-map .google-map-iframe iframe{
		height: 450px;
	}

	.contact-now-content{
		margin-left: 0px;
	}

	.contact-now-info{
		margin-bottom: 30px;
	}
	
	.contact-info-list{
		margin-bottom: 20px;
	}

	footer.main-footer{
		padding: 50px 0 0;
		background-size: 100% auto;
	}

	.about-footer{
		margin-bottom: 40px;
	}
	
	.footer-logo{
		margin-bottom: 20px;
	}

	.footer-quick-links,
	.footer-social-links{
		margin-left: 0;
	}
	
	.footer-copyright{
		margin-top: 40px;
		padding: 20px 0;
	}

	.page-header{
		background-size: contain;
		padding: 50px 0;
	}
	
	.page-header-box h1{
		font-size: 44px;
		margin-bottom: 10px;
	}

	.insurance-company-carousel{
		padding: 40px 0;
	}

	.insurance-carousel-title{
		margin-bottom: 30px;
	}

	.insurance-carousel-title h3{
		font-size: 22px;
	}

	.company-carousel .swiper-wrapper .swiper-slide .company-logo img{
		max-width: 180px;
	}

	.about-how-it-work .how-it-work-img{
        margin-bottom: 0px;
    }

	.about-how-it-work .how-it-work-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.dental-process{
		padding: 50px 0 20px;
	}

	.dental-process-image{
		margin-bottom: 20px;
	}

	.expertise-experience-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.expertise-experience-img img{
		aspect-ratio: 1 / 0.7;
	}
	
	.page-services{
		padding: 50px 0 20px;
	}

	.page-service-single{
		padding: 50px 0;
	}

	.service-sidebar{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.service-catagery-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.service-catagery-list h3{
		margin-bottom: 20px;
	}
	
	.sidebar-cta-box{
		padding: 30px;
	}

	.sidebar-cta-box .icon-box{
		margin-bottom: 20px;
	}

	.sidebar-cta-box .cta-content h3{
		font-size: 30px;
	}

	.service-single-content{
		padding-bottom: 50px;
	}

	.service-entry h2{
		font-size: 36px;
	}

	.service-entry h3{
		margin-bottom: 20px;
	}

	.service-entry p{
		margin-bottom: 20px;
	}

	.service-entry ul{
		margin-bottom: 20px;
	}

	.service-entry-image{
		margin-bottom: 20px;
	}

	.faqs-section-title{
		margin-bottom: 40px;
	}

	.faqs-section-title h2{
		font-size: 36px;
	}

	.service-faqs .accordion-header .accordion-button{
		font-size: 18px;
	}

	.page-blog{
		padding: 50px 0;
	}

	.page-blog .blog-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.post-pagination{
		margin-top: 10px;
	}

	.post-single-meta ol li i{
		font-size: 20px;
	}

	.page-single-post{
		padding: 50px 0;
	}

	.post-image{
		margin-bottom: 20px;
	}

	.post-entry blockquote{
		background: var(--secondary-color) url('../images/icon-blockquote.svg') no-repeat 30px 35px;
        background-size: 45px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

	.post-entry h2{
		font-size: 36px;
	}

	.post-entry ul li{
		font-size: 16px;
	}

	.post-tag-links{
		padding: 0 0px;
	}

	.post-tags{
		margin-bottom: 10px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.post-tags .tag-links a{
		font-size: 16px;
		padding: 8px 15px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

	.page-team-single{
		padding: 50px 0 25px;
	}

	.page-team-single .row{
		border-radius: 40px 40px 30px 30px;
	}

	.team-member-image img{
		border-radius: 30px 30px 0 0px;
	}

	.team-member-details{
		margin-left: 0px;
		padding: 30px;
	}

	.member-detail-header{
		margin-bottom: 30px;
	}

	.member-detail-header h2{
		font-size: 28px;
	}

	.member-detail-content{
		margin-bottom: 30px;
	}

	.member-detail-body{
		margin-bottom: 30px;
	}

	.about-member-details{
		padding: 25px 0 50px;
	}

	.about-member-info{
		padding: 30px;
	}

	.member-info-title{
		margin-bottom: 20px;
	}

	.member-info-title h2{
		font-size: 28px;
	}

	.member-winning-awards{
		padding: 30px;
		margin-bottom: 30px;
	}

	.winning-award-img.img-box-1,
	.winning-award-img.img-box-2{
		padding-bottom: 25px;
	}

	.winning-award-img.img-box-4,
	.winning-award-img.img-box-3{
		padding-top: 25px;
	}

	.winning-awards-content h2{
		font-size: 28px;
		margin-bottom: 20px;
	}

	.team-member-skills{
		padding: 30px;
	}

	.member-skills-title{
		margin-bottom: 20px;
	}

	.member-skills-title h2{
		font-size: 28px;
	}

	.skillbar .skill-data{
		margin-bottom: 10px;
	}

	.skillbar .skill-data .skill-title{
		font-size: 18px;
	}

	.skillbar .skill-data .skill-no{
		font-size: 20px;
	}

	.team-sidebar-cta{
		padding: 30px;
	}

	.cta-info-content{
		display: block;
	}

	.cta-info-content .icon-box{
		margin-right: 0;
		margin-bottom: 20px;
	}

	.cta-info-content .cta-content{
		width: 100%;
	}

	.cta-info-content .cta-content p{
		margin-bottom: 20px;
	}

	.our-gallery-page{
		padding: 50px 0 20px;
	}

	.page-techonology{
		padding: 50px 0;
	}

	.page-techonology .row.techonology-item{
		margin-bottom: 50px;
	}

	.techonology-image-box{
		margin-bottom: 30px;
	}

	.techonology-content .section-title h2{
		max-width: 100%;
	}

	.page-testimonials{
		padding: 50px 0 20px;
	}

	.testimonial-box-item{
		padding: 20px;
	}

	.testimonial-box-item .testimonial-box-header{
		margin-bottom: 15px;
	}

	.testimonial-quote-img{
		margin-bottom: 15px;
	}

	.testimonial-box-header .testimonial-rating{
		margin-bottom: 15px;
	}

	.page-contact{
		padding: 50px 0 25px;
	}

	.contact-us-content{
		margin-right: 0px;
	}

	.contact-us-item{
		padding: 20px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 500px;
	}

	.contact-us-form{
		padding: 25px 0 50px;
	}

	.contact-us-img{
		margin-bottom: 30px;
	}

	.contact-us-img img{
		aspect-ratio: 1 / 0.9;
	}

	.contact-form{
		margin-left: 0;
	}

	.contact-form .form-control{
		padding: 12px 20px;
	}

	.page-faqs{
		padding: 50px 0;
	}

	.faq-sidebar{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.faq-catagery-list{
		padding: 20px;
	}

	.faq-catagery-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.page-faqs .faqs-section{
		margin-bottom: 40px;
	}

	.page-faqs .accordion-header .accordion-button{
		font-size: 18px;
	}

	.page-book-appointment{
		padding: 50px 0;
	}

	.page-book-appointment .book-appointment-form{
		padding: 30px;
	}

	.appointment-form .form-control{
		padding: 12px 20px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-content-heading{
		margin-bottom: 20px;
	}
	
	.error-page-content-heading h2{
		font-size: 36px;
	}	

	.error-page-content-body p{
		margin-bottom: 20px;
	}
}

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

	.section-row{
        margin-bottom: 30px;
    }

	.section-title{
		margin-bottom: 20px;
	}

	.section-title h1{
		font-size: 34px;
	}

	.section-title h2{
		font-size: 28px;
	}

	.google-rating ul{
		text-align: center;
	}

	.google-rating ul li{
		margin-right: 5px;
	}

	.google-rating ul li:last-child{
		width: 100%;
	}

	.hero-img img{
        max-width: 80%;
    }

	.export-dantist-box{
		transform: translateY(-20px);
	}

	.export-dantist-box .icon-box img{
        max-width: 48px;
    }

	.export-dantist-content{
        width: calc(100% - 58px);
    }

	.export-dantist-content h3{
		font-size: 16px;
		margin-bottom: 0;
	}
	
	.hero-icon-list .hero-icon-box-1{
		top: 30px;
		right: 0px;
		width: 60px;
		height: 60px;
	}

	.hero-icon-list .hero-icon-box-2{
		left: 10px;
		width: 60px;
		height: 60px;
	}

	.hero-icon-list .hero-icon-box-3{
		transform: translate(-10px, -50%);
		width: 60px;
		height: 60px;
	}
	
	.hero-icon-list .hero-icon-box-1 img,
	.hero-icon-list .hero-icon-box-2 img,
	.hero-icon-list .hero-icon-box-3 img{
		max-width: 30px;
	}

	.icon-star-image img{
		max-width: 50px;
	}

	.hero-book-appointment .appointment-form{
        padding: 30px 20px;
    }

	.hero-appointment-form-title h2{
        font-size: 28px;
    }

	.hero.bg-image{
		padding: 50px 0;
	}

	.hero.bg-image .hero-content .section-title h1{
        font-size: 36px;
    }

	.hero-slider-layout .hero-slide{
		padding: 50px 0 80px;
	}

	.hero-slider-layout .swiper-pagination{
		bottom: 30px;
	}

	.cta-box-item{
		margin-right: 0px;
		padding-right: 0px;
		border: none;
		margin-bottom: 20px;
	}

	.cta-box .col-lg-4:nth-child(2) .cta-box-item{
		margin-bottom: 0;
	}

	.cta-box-content h3{
        font-size: 16px;
		margin-bottom: 5px;
    }

	.cta-box-btn{
		text-align: left;
	}

	.about-image{
        max-width: 100%;
		background-size: contain;
        padding-bottom: 80px;
    }

	.about-img-1{
		width: 100%;
	}

	.about-img-2{
		width: 250px;
	}

	.about-experience{
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        transform: translate(50px, -30px);
    }

	.about-experience img{
		max-width: 100px;
	}

	.about-us-body ul{
		display: block;
	}

	.about-us-body ul li{
		width: 100%;
		margin-bottom: 15px;
	}

	.about-us-body ul li:last-child{
		margin-bottom: 0;
	}

	.service-body h3{
		font-size: 18px;
        margin-bottom: 10px;
    }

	.visit-clinic{
        padding: 50px 15px;
    }

	.counter-title h2{
        font-size: 28px;
    }

	.counter-title h3{
		font-size: 18px;
	}

	.counter-title{
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

	.why-choose-us .icon-star-image{
		transform: translate(-10px, -50%);
	}

	.why-choose-content h3{
		font-size: 18px;
	}

	.why-choose-image{
        margin-top: 30px;
        margin-bottom: 30px;
    }

	.faq-accordion.how-work-accordion .accordion-item .icon-box img{
		max-width: 35px;
	}

	.faq-accordion.how-work-accordion .accordion-item .accordion-button{
		font-size: 18px;
		padding: 5px 30px 5px 50px;
	}

	.faq-accordion.how-work-accordion .accordion-header .accordion-button::after{
		font-size: 18px;
	}

	.faq-accordion.how-work-accordion .accordion-item .accordion-body{
		padding: 10px 30px 0px 0px;
	}

	.our-team .icon-star-image{
		transform: translate(-10px, -50%);
	}

	.team-content h3{
		font-size: 18px;
	}

	.testimonial-img{
		margin-bottom: 20px;
	}

	.testimonial-rating-box{
		max-width: 300px;
        padding: 15px;
		left: 0;
		margin: 0 auto;
	}

	.rating-counter-item .rating-counter-number{
		min-width: 70px;
		margin-right: 10px;
	}

	.rating-counter-item .rating-counter-content{
		width: calc(100% - 80px);
	}

	.rating-counter-item .rating-counter-content p{
		font-size: 14px;
	}

	.rating-counter-item .rating-counter-number h3{
		font-size: 24px;
	}

	.service-rating ul li{
		font-size: 14px;
		margin-right: 10px;
	}

	.service-rating ul li i{
		font-size: 12px;
	}

	.testimonial-item .testimonial-quote-image img{
		max-width: 40px;
	}

	.testimonial-body .author-content h3{
		font-size: 18px;
	}

	.our-blog .icon-star-image{
        top: 43%;
    }

	.post-item-body{
		margin-bottom: 10px;
	}

	.post-item-body h2{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.contact-google-map .google-map-iframe,
	.contact-google-map .google-map-iframe iframe{
        height: 350px;
    }

	.footer-quick-links,
	.footer-social-links{
		margin-bottom: 40px;
	}
	.pt31{
		padding-top: 0px;
	}
	.about-footer-content p{
		text-align: center;
	}
	.about-footer-content .text-hastag{
		font-size: 20px;
	}
	.footer-links h3{
		margin-bottom: 15px;
	}

	.footer-copyright{
		padding: 10px 0;
	}

	.page-header-box h1{
		font-size: 34px;
	}

	.insurance-carousel-title{
        margin-bottom: 20px;
    }

	.insurance-carousel-title h3{
		font-size: 20px;
	}

	.company-carousel .swiper-wrapper .swiper-slide .company-logo img{
		max-width: 150px;
	}

	.dental-process-image .dental-process-number h3{
		font-size: 18px;
	}

	.dental-process-item .dental-process-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.expertise-experience-body ul li{
		width: 100%;
	}

	.service-catagery-list h3{
		font-size: 18px;
	}

	.sidebar-cta-box{
        padding: 20px;
    }
	
	.sidebar-cta-box .cta-content h3{
		font-size: 24px;
	}

	.service-entry ul{
		display: block;
	}

	.service-entry ul li{
		width: 100%;
		margin-bottom: 15px;
	}

	.service-entry ul li:last-child{
		margin-bottom: 0px;
	}

	.service-entry-img-1{
		margin-bottom: 20px;
	}

	.faqs-section-title{
		margin-bottom: 20px;
	}

	.faqs-section-title h2{
		font-size: 28px;
	}

	.service-faqs .accordion-header .accordion-button{
		font-size: 16px;
		padding: 10px 40px 10px 10px;
	}

	.service-faqs .faq-accordion .accordion-item .accordion-button::after,
	.service-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
		height: 20px;
		width: 20px;
		transform: translate(-10px, -50%) rotate(135deg);
	}

	.service-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
		transform: translate(-10px, -50%) rotate(45deg);
	}

	.service-faqs .accordion-body{
		padding: 0 10px 10px 10px;
	}

	.post-single-meta ol li i{
        font-size: 18px;
    }

	.post-image figure,
	.post-image img{
		aspect-ratio: 1 / 0.70;
	}

	.post-entry blockquote{
		background: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 20px 20px;
        background-size: 35px;
        padding: 55px 20px 20px 20px;
	}
	
	.post-entry h2{
		font-size: 28px;
	}

	.tag-links{
		font-size: 20px;
	}

	.team-member-details{
        padding: 20px;
    }

	.member-detail-header{
        margin-bottom: 20px;
    }

	.member-detail-header h2{
        font-size: 24px;
    }

	.member-detail-content p{
		font-size: 16px;
	}

	.member-detail-body{
        margin-bottom: 20px;
    }

	.member-detail-body ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }

	.member-detail-body ul li span{
		width: 45%;
		font-weight: 500;
	}

	.about-member-info{
        padding: 20px;
    }

	.member-info-title h2{
		font-size: 24px;
	}

	.member-winning-awards{
		padding: 20px;
	}

	.winning-awards-content h2{
		font-size: 24px;
	}

	.winning-award-img.img-box-2,
	.winning-award-img.img-box-1{
		padding-bottom: 20px;
	}

	.winning-award-img.img-box-4,
	.winning-award-img.img-box-3{
		padding-top: 20px;
	}

	.winning-award-img img{
		max-height: 120px;
	}

	.team-member-skills{
        padding: 20px;
    }

	.member-skills-title h2{
        font-size: 24px;
    }

	.team-member-skills .skills-progress-bar{
		margin-bottom: 25px;
	}

	.skillbar .skill-data .skill-title{
        font-size: 16px;
    }

	.skillbar .skill-data .skill-no{
        font-size: 18px;
    }

	.team-sidebar-cta{
		padding: 20px;
	}

	.cta-info-content .icon-box{
		width: 50px;
		height: 50px;
	}

	.cta-info-content .icon-box img{
		max-width: 30px;
	}

	.techonology-image-box{
		gap: 10px;
		margin-bottom: 20px;
	}

	.testimonial-box-body .author-box-content h3{
		font-size: 18px;
	}

	.contact-us-content{
		margin-bottom: 30px;
	}

	.contact-us-info .col-lg-6:last-child .contact-us-item{
		margin-bottom: 0;
		height: auto;
	}

	.contact-us-item .icon-box{
		margin-bottom: 15px;
	}

	.contact-us-item .contact-info-content h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
        height: 350px;
    }

	.page-faqs .faqs-section{
        margin-bottom: 30px;
    }

	.page-faqs .faqs-section-title{
		margin-bottom: 20px;
	}

	.page-faqs .accordion-header .accordion-button{
		font-size: 16px;
		padding: 10px 40px 10px 10px;
	}

	.page-faqs .faq-accordion .accordion-item .accordion-button::after,
	.page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
		height: 20px;
		width: 20px;
		transform: translate(-10px, -50%) rotate(135deg);
	}

	.page-faqs .faq-accordion .accordion-item .accordion-button.collapsed::after{
		transform: translate(-10px, -50%) rotate(45deg);
	}

	.page-faqs .accordion-body{
		padding: 0 10px 10px 10px;
	}

	.page-book-appointment .book-appointment-form{
		padding: 20px;
	}

	.error-page-content-heading h2{
        font-size: 28px;
    }
}
/* ======================================================= */
/* ========== ESTILOS PARA SECCIÓN SEPARADORA ========== */
/* ======================================================= */

.slogan-separator {
    background-color: var(--primary-color); /* Usa el color azul principal de tu plantilla */
    padding: 40px 0; /* Espacio vertical para que el texto respire */
    text-align: center;
}

.slogan-separator .slogan-text {
    color: var(--white-color); /* Texto en color blanco */
    font-size: 1.8rem; /* Tamaño de letra llamativo (~28px) */
    font-weight: 600; /* Semi-negrita para un look moderno */
    margin: 0; /* Elimina cualquier margen por defecto del h2 */
}

/* --- Estilos para hacerlo responsive --- */
@media (max-width: 767px) {
	.award-icon i{
    	font-size: 4rem;
    }
    .slogan-separator {
        padding: 30px 15px; /* Reduce el padding en móviles */
    }

    .slogan-separator .slogan-text {
        font-size: 1.3rem; /* Reduce el tamaño del texto en móviles (~21px) */
    }
    
}
@media (min-width: 360px) and (max-width: 640px){
	    .hero-logo-wrapper img {
        max-width: 180px !important; /* Tamaño para móvil */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA LA SECCIÓN DE PUNTOS CLAVE (FEATURES) ====== */
/* ======================================================= */

/* --- Estructura General de la Sección --- */
.feature-section {
    padding: 100px 0;
    background-color: #f8fafc; /* Un fondo muy sutil para separar la sección */
}

/* --- Estilo de las Tarjetas (Features) --- */
.feature-item {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 35px 30px;
    text-align: center;
    border: 1px solid #eef2f7;
    box-shadow: 0 5px 25px rgba(0, 36, 110, 0.05); /* Sombra muy suave para efecto "flotante" */
    transition: all 0.3s ease;
    height: 100%; /* ¡Importante para que todas las tarjetas ocupen la misma altura! */

    /* Flexbox para alinear contenido verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-icon {
    margin-bottom: 20px;
}

.feature-icon img {
  width: 60px !important;
    height: 60px !important;
}

.feature-body {
    /* Flexbox para asegurar que el contenido crezca y alinee los títulos */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.feature-body h3 {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.feature-body p {
    font-size: 1rem; /* 16px */
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    /* Esto asegura que el párrafo ocupe el espacio y empuje el título hacia arriba */
    flex-grow: 1; 
}

/* --- Efecto Hover Interactivo --- */
.feature-item:hover {
    transform: translateY(-8px); /* Eleva la tarjeta al pasar el mouse */
    box-shadow: 0 15px 40px rgba(0, 36, 110, 0.1); /* Sombra más pronunciada */
    border-color: var(--secondary-color); /* Borde con el color de acento */
}

/* --- Rejilla de 5 columnas para Escritorio (copiado de antes) --- */
@media (min-width: 992px) {
    .feature-section .row {
        display: flex;
        flex-wrap: wrap;
    }
    .feature-section .col-custom-5 {
        flex: 0 0 20%;
        max-width: 20%;
        padding: 0 15px; /* Espacio entre columnas */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA LA GALERÍA CON FILTROS ====== */
/* ======================================================= */

/* --- Estilos para los botones de filtro --- */
.gallery-filters {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-filters button {
    background-color: transparent;
    border: 2px solid var(--dark-divider-color);
    color: var(--primary-color);
    padding: 10px 25px;
    margin: 5px;
    border-radius: 99px; /* Botones tipo píldora */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-filters button:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.gallery-filters button.active {
    background-color: var(--secondary-color); /* Color de acento para el filtro activo */
    color: var(--white-color);
    border-color: var(--secondary-color);
}

/* --- Estilos para la animación de Isotope --- */
.gallery-grid .gallery-item {
    transition: transform 0.4s, opacity 0.4s;
}
/* ======================================================= */
/* ====== ESTILOS PARA EL SEPARADOR AZUL CON IMAGEN ====== */
/* ======================================================= */

/* --- Contenedor Principal --- */
.feature-separator {
    background-color: var(--primary-color); /* Usa el color azul principal de tu plantilla */
    padding: 80px 0; /* Espacio vertical generoso */
    position: relative;
    overflow: hidden; /* Evita que elementos animados se desborden */
}

/* --- Estilos para la Imagen --- */
.separator-image-wrapper {
    text-align: center; /* Centra la imagen en móvil */
}

.separator-image {
    width: 100%;
    max-width: 500px; /* Limita el tamaño máximo de la imagen */
    height: auto;
    border-radius: 30px; /* Bordes redondeados consistentes con tu diseño */
    object-fit: cover;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra para dar profundidad */
}

/* --- Estilos para el Contenido (Texto y Botón) --- */
.separator-content .section-title {
    margin-bottom: 30px; /* Espacio entre el texto y el botón */
}

/* --- Anulación de colores para que el texto sea visible en fondo azul --- */
.feature-separator .section-title h3,
.feature-separator .section-title h2,
.feature-separator .section-title p {
    color: var(--white-color); /* ¡Importante! Cambia el texto a blanco */
}

/* --- Hace que el pequeño icono del H3 también sea blanco --- */
.feature-separator .section-title h3::before {
    filter: brightness(0) invert(1);
}

/* --- Estilos Responsive para Móviles y Tablets --- */
@media (max-width: 991px) {
    .feature-separator {
        padding: 60px 0; /* Reduce el padding en pantallas pequeñas */
        text-align: center;
    }

    .separator-image-wrapper {
        margin-bottom: 40px; /* Añade espacio entre la imagen y el texto cuando se apilan */
    }

    .separator-content .section-title,
    .separator-btn {
        text-align: center; /* Centra todo el contenido en móvil */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN GARANTÍA (CORREGIDA) ====== */
/* ======================================================= */

/* --- Contenedor Principal --- */
.guarantee-separator {
    background-color: var(--primary-color); /* Fondo azul oscuro */
    padding: 60px 0;
    overflow: hidden;
}

/* --- Contenedor de la Imagen (AQUÍ ESTÁ LA CORRECCIÓN) --- */
.guarantee-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Se elimina el 'background-color' y el 'padding' para que no haya marco */
    background-color: transparent !important;
    padding: 0 !important;
}

/* --- Estilos para la imagen del sello --- */
.guarantee-image-wrapper img {
    max-width: 100%; /* <-- CAMBIAMOS ESTE VALOR A 100% */
    height: auto;
    border-radius: 0; 
}

/* --- Contenido de Texto --- */
.guarantee-content .section-title {
    margin-bottom: 0; /* Quitamos margen inferior ya que no hay botón */
}

/* --- Anulación de colores para que el texto sea visible --- */
.guarantee-separator .section-title h2,
.guarantee-separator .section-title p {
    color: var(--white-color); /* Texto en blanco */
}

/* Estilo específico para la línea de condiciones */
.guarantee-separator .guarantee-conditions {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 20px;
}

/* --- Estilos Responsive --- */
@media (max-width: 991px) {
    .guarantee-separator {
        padding: 50px 15px;
        text-align: center;
    }

    .guarantee-image-wrapper {
        margin-bottom: 40px; /* Espacio entre imagen y texto en móvil */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA LA SECCIÓN DE CARACTERÍSTICAS ====== */
/* ======================================================= */
/* ====== ESTILOS PARA LA SECCIÓN DE CARACTERÍSTICAS (MODIFICADO) ====== */
/* ======================================================= */

/* --- Estructura General de la Sección --- */
.key-features-section {
    padding: 100px 0;
    background-color: #f8fafc;
}

/* --- Estilo de las Tarjetas Individuales --- */
.feature-card {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 30px 15px; /* Reducimos el padding para que quepa mejor */
    text-align: center;
    border: 1px solid var(--dark-divider-color);
    box-shadow: 0 5px 25px rgba(0, 36, 110, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* --- Círculo que contiene el Ícono (un poco más pequeño) --- */
.feature-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* Hacemos el círculo un poco más pequeño */
    height: 80px;
    margin-bottom: 20px;
    background-color: #f6f9fb;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* --- Ícono SVG dentro del círculo --- */
.feature-card-icon img {
    width: 55px; /* Ajustamos el tamaño del icono */
    height: 55px;
}

/* --- Contenedor del Texto --- */
.feature-card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* --- Título de la Tarjeta (un poco más pequeño) --- */
.feature-card-body h3 {
    font-size: 1rem; /* Reducimos el tamaño de la fuente para que no se rompa */
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
    margin: 0;
}

/* --- Efecto Hover (sin cambios) --- */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 36, 110, 0.1);
    border-color: var(--secondary-color);
}

.feature-card:hover .feature-card-icon {
    background-color: var(--primary-color);
}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN DE FAQS CON IMAGEN ====== */
/* ======================================================= */

.faq-image-wrapper {
    text-align: center; /* Centra la imagen en pantallas pequeñas */
    margin-bottom: 40px; /* Espacio inferior cuando se apila en móvil */
}

.faq-image-wrapper img {
    border-radius: 30px; /* Bordes redondeados consistentes con el diseño */
    box-shadow: 0 10px 40px rgba(0, 36, 110, 0.1);
    width: 100%;
    height: auto;
}

/* --- Ajuste responsive para pantallas grandes --- */
@media (min-width: 992px) {
    .faq-image-wrapper {
        margin-bottom: 0; /* Elimina el margen inferior en desktop */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA LA NUEVA SECCIÓN CTA DE PROMOCIÓN (ACTUALIZADO) ====== */
/* ======================================================= */

/* --- Contenedor principal de la sección --- */
.promo-cta-section {
   padding-top: 0px;
   padding: 30px;
    /*background-color: #f8fafc;*/
}

/* --- La caja de CTA --- */
.promo-cta-box {
   background-color: var(--secondary-color);
    padding: 40px 60px;
    border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0, 36, 110, 0.15);
}

/* --- Título dentro de la caja (ahora alineado a la izquierda) --- */
.promo-cta-title {
      color: var(--white-color);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.promo-cta-title strong {
    font-weight: 700;
}

/* --- Contenedor del botón (ahora alineado a la derecha) --- */
.promo-cta-btn {
    text-align: right; /* Alineación a la derecha en desktop */
}
.promo-cta-btn .btn-default {
    padding: 14px 50px 14px 25px; /* Aumentamos el padding para hacerlo más grande */
    font-size: 18px; /* Aumentamos ligeramente la fuente */
    font-weight: 600;
    white-space: nowrap;
}

/* Ajustamos el círculo de la flecha para que sea proporcional */
.promo-cta-btn .btn-default::before {
    width: 32px;
    height: 32px;
}

/* --- Estilo del botón (copiado del paso anterior) --- */
.btn-promo-orange {
    background-color: #FFA500;
    color: var(--white-color) !important;
}
.btn-promo-orange:hover {
    color: var(--white-color) !important;
}
.btn-promo-orange::after {
    background: var(--primary-color);
}

/* --- Estilos Responsivos --- */
@media (max-width: 991px) { /* Para tablets y móviles */
    .promo-cta-box {
        padding: 40px 30px;
    }
    .promo-cta-title {
        text-align: center; /* Centramos el texto cuando se apila */
        margin-bottom: 25px; /* Añadimos espacio entre el texto y el botón */
    }
    .promo-cta-btn {
        text-align: center; /* Centramos el botón cuando se apila */
    }
}

@media (max-width: 767px) { /* Solo para móviles */
    .promo-cta-title {
        font-size: 1.8rem;
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA LISTA DE PRECIOS VISIBLE ====== */
/* ======================================================= */

.price-list-wrapper.visible-prices {
    margin-bottom: 40px; /* Espacio entre la lista y el inicio del acordeón */
    padding-bottom: 30px; /* Espacio debajo del último precio */
    border-bottom: 1px solid var(--dark-divider-color); /* Línea divisoria sutil */
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1rem;
}

.price-item:last-child {
    margin-bottom: 0;
}

.price-item-service {
    color: var(--text-color);
}

.price-item-cost {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.1rem;
}
/* ======================================================= */
/* ====== ESTILOS PARA LA CAJA DE PROMOCIÓN INSERTADA ====== */
/* ======================================================= */

/* ======================================================= */
/* ====== ESTILOS DEFINITIVOS PARA CTA DE PROMOCIÓN (VERSIÓN FINAL) ====== */
/* ======================================================= */

.inserted-promo-box {
    background-color: var(--secondary-color); /* Fondo Turquesa */
    padding: 30px 40px; /* Padding ajustado */
    border-radius: 20px;
    margin-top: 30px;
    box-shadow: 0 5px 25px rgba(0, 36, 110, 0.1);
}

/* Usamos Flexbox en la fila para un control avanzado */
.inserted-promo-box .row {
    display: flex;
    justify-content: space-between; /* Mantiene el espacio entre los elementos */
    align-items: center;
    width: 100%;
}

.inserted-promo-title {
    color: var(--white-color);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.inserted-promo-title strong {
    font-weight: 700;
}

.inserted-promo-btn {
    text-align: right;
    white-space: nowrap; /* Evita que el botón se parta */
}
.btn-service-card {
    font-size: 13px;
    padding: 8px 15px !important; /* Botón más compacto */
    font-weight: 600;
}
/* Botón Naranja Compacto (sin cambios) */
.btn-promo-orange {
    /* Mantenemos el color y el hover del botón naranja */
    background-color: #FFA500;
    color: var(--white-color) !important;
}
.btn-promo-orange:hover {
    color: var(--white-color) !important;
}
.btn-promo-orange::after {
    background: var(--primary-color);
}

/* --- ESTILOS RESPONSIVE (LA SOLUCIÓN CLAVE) --- */

/* Para tablets (donde empieza el problema) */
@media (max-width: 991px) {
    .inserted-promo-title {
        font-size: 1.3rem; /* Reducimos un poco el texto para dar más espacio */
    }
}

/* Para móviles */
@media (max-width: 767px) {
    .inserted-promo-box .row {
        flex-direction: column; /* Forzamos el apilamiento SÓLO en móviles */
    }
    .inserted-promo-title {
        text-align: center;
        margin-bottom: 25px;
    }
    .inserted-promo-btn {
        text-align: center;
    }
     header .navbar-brand img{
        width: 180px; /* Reducido de 200px para mejor proporción */
    }
}

/* ======================================================= */
/* ====== ESTILOS PARA MODAL DE PRECIOS Y SERVICIOS ====== */
/* ======================================================= */

.modal-content {
    border-radius: 20px !important;
    border: none;
    box-shadow: 0 10px 50px rgba(0, 36, 110, 0.2);
}

.modal-header {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--dark-divider-color);
    padding: 25px 30px;
}

.modal-title-wrapper .modal-title {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
}

.modal-title-wrapper .modal-subtitle {
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.6;
}
.modal-promo-style .btn-close {
    filter: none; /* Quitamos el filtro blanco */
    opacity: 0.7;
}
.modal-promo-style .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* ¡CORRECCIÓN! Esto hace el icono de cierre blanco */
    opacity: 0.8;
}

.btn-close {
    background-size: 1em;
}

.modal-body {
    padding: 30px;
}
/*========MODAL PROMO=============================*/
/* ======================================================= */
/* ====== ESTILOS PARA MODAL DE PROMOCIÓN PERSONALIZADO ====== */
/* ======================================================= */

.modal-promo-style {
    background-color: var(--white-color);
    border-radius: 20px !important;
}

.modal-promo-style .modal-header {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--dark-divider-color);
    padding: 15px 25px; /* Padding reducido */
}

.modal-promo-style .modal-title-wrapper .modal-title {
    font-size: 1.4rem; /* Título más pequeño */
}
.modal-promo-style .modal-title-wrapper .modal-subtitle {
    font-size: 0.85rem; /* Subtítulo más pequeño */
    line-height: 1.4;
    margin-top: 5px;
}
/*.modal-promo-style .modal-title-wrapper .modal-title,
.modal-promo-style .modal-title-wrapper .modal-subtitle {
    color: var(--text-color); 
}*/
.modal-promo-style .btn-close {
    filter: none;
    opacity: 0.7;
}

.modal-promo-style .modal-body {
    padding: 20px 25px; /* Padding del cuerpo reducido */
}

/* --- Estilos para las tarjetas de precios DENTRO del modal --- */
.modal-promo-style .service-price-card {
    background-color: var(--white-color);
    border-color: #eef2f7;
    /* El resto de los estilos de la tarjeta se mantienen */
}

/* --- Footer del Modal --- */
.modal-footer-cta {
    margin-top: 15px;
}


.promo-modal-title {
    color: var(--white-color); /* Texto en blanco */
    font-size: 2.2rem;
    font-weight: 500;
    text-align: left;
}

.promo-modal-title strong {
    font-weight: 700;
}

.promo-modal-btn {
    text-align: right;
}

/* El botón .btn-highlighted (blanco) funciona perfecto aquí */

@media (max-width: 991px) {
    .promo-modal-title {
        text-align: center;
        margin-bottom: 25px;
    }
    .promo-modal-btn {
        text-align: center;
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA TARJETAS DE PRECIOS (COMPACTAS) ====== */
/* ======================================================= */

.service-price-card {
    border: 1px solid #eef2f7;
    border-radius: 12px; /* Bordes menos pronunciados */
    padding: 10px; /* Padding de la tarjeta muy reducido */
    text-align: center;
    margin-bottom: 15px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Eliminamos el efecto hover para evitar cambios de layout */
.service-price-card:hover {
    transform: none;
    box-shadow: none;
}
.price-card-cost {
    display: none; /* Ocultamos el precio para ganar espacio crucial */
}

.price-card-title {
    font-size: 0.9rem; /* Título compacto */
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 10px; /* Espacio mínimo antes del botón */
    flex-grow: 1;
    line-height: 1.4;
}
.price-card-action .btn-default {
    padding: 8px 15px !important; /* Botón muy pequeño */
    font-size: 13px !important;
}
/* El recordatorio de descuento ahora tiene formato de separador */
.discount-reminder {
    background-color: var(--secondary-color);
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: center;
}
.discount-reminder .discount-text {
    color: var(--white-color);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}
.discount-reminder .discount-text strong {
    font-weight: 700;
}

/* Sección de Urgencias (más compacta) */
.urgency-contact {
    padding-top: 15px;
    margin-top: 15px;
    text-align: center;
    border-top: 1px solid var(--dark-divider-color);
}
.urgency-contact p {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 10px;
}
.urgency-contact .textp{
        text-align: center;
        font-size: 0.85rem;
        font-weight: 400;
}
/* Sección de Urgencias2 (más compacta) */
.urgency-contact2 {
    padding-top: 15px;
    margin-top: 15px;
    text-align: center;
    border-top: 1px solid var(--dark-divider-color);
}
.urgency-contact2 p {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}
.urgency-contact2 .textp{
        text-align: center;
        font-size: 0.85rem;
        font-weight: 400;
}

/* ======================================================= */
/* ====== ESTILOS PARA BOTONES CON ICONOS ESPECÍFICOS ====== */
/* ======================================================= */

/* Primero, ocultamos la flecha original en los botones con la nueva clase */
.btn-icon::before {
    display: none !important;
}

/* Damos estilo al contenedor del botón para alinear el texto y el icono */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el texto y el icono */
    padding-right: 25px !important; /* Ajustamos el padding para que se vea bien */
}

/* Estilo para los nuevos iconos */
.btn-icon i {
    font-size: 1.2em; /* Hacemos el icono un poco más grande que el texto */
}
/*====================*/

/* ======================================================= */
/* ====== AJUSTE PARA HEADER EN MÓVIL (LOGO Y MENÚ) ====== */
/* ======================================================= */

/* Se aplica a tablets y pantallas más pequeñas */
@media (max-width: 991px) {
    /* 1. Hacemos que el contenedor del header sea un flexbox */
    .navbar > .container {
        display: flex;
        justify-content: space-between; /* ¡La clave! Empuja el logo a la izq. y el menú a la der. */
        align-items: center; /* Centra verticalmente ambos elementos */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
        max-width: 100%; /* Anula cualquier max-width previo */
    }

    /* 2. Ajustamos el tamaño del logo para que quepa cómodamente */
    header .navbar-brand img {
        width: 200px !important; /* Puedes ajustar este tamaño si lo ves muy grande o pequeño */
        height: auto !important;
    }

    /* 3. Aseguramos que el botón del menú (toggle) no tenga márgenes que interfieran */
    .navbar-toggle {
        margin: 0;
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN DE BENEFICIOS ORTODONCIA INVISIBLE====== */
/* ======================================================= */

.benefits-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Fondo claro para separar de otras secciones */
}

.benefit-item {
    text-align: center;
    padding: 20px;
    height: 100%;
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    background-color: #e9ebed; /* Color turquesa de tu marca */
    border-radius: 50%;
    transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
    background-color: var(--primary-color); /* Cambia al azul oscuro en hover */
    transform: scale(1.05); /* Efecto de zoom sutil */
}

.benefit-icon img {
    width: 50px; /* Tamaño del icono SVG dentro del círculo */
    height: 50px;
}

.benefit-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Aseguramos que el texto en negrita use el color principal de la marca */
.benefit-content p strong {
    color: var(--primary-color);
}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN VIDEO ORTODONCIA ====== */
/* ======================================================= */

.video-gallery-section {
    padding: 80px 0;
    overflow: hidden; /* Evita que las animaciones se desborden */
}

.main-video-wrapper {
    height: 100%; /* Asegura que el wrapper ocupe toda la altura de la columna */
    display: flex;
    flex-direction: column;
}

/* --- Columna Izquierda: Video --- */
.main-video-wrapper, .stacked-gallery-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.video-player-container {
    width: 100%;
    background-color: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 36, 110, 0.1);
    flex-grow: 1; /* ¡LA CLAVE! Hace que el contenedor del video crezca */
    display: flex; /* Permite que el video interno se ajuste */
}

.video-player-container video {
    width: 100%;
    height: 100%;
    display: block;
}

.video-caption {
    padding-top: 20px;
}

.video-caption h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* --- Columna Derecha: Imágenes Apiladas --- */
.stacked-gallery-wrapper {
    gap: 25px; /* Espacio entre las dos imágenes */
}

.stacked-image-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 36, 110, 0.1);
    flex-grow: 1; /* Permite que las imágenes se estiren para igualar alturas */
    display: flex;
}

.stacked-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.stacked-image-item:hover img {
    transform: scale(1.05);
}

.stacked-image-item .image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.stacked-image-item .image-caption p {
    color: var(--white-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* --- Estilos Responsivos --- */
@media (max-width: 991px) {
    .main-video-wrapper {
        margin-bottom: 40px; /* Espacio entre el video y las imágenes en móvil */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN DE PASOS DEL PROCESO ====== */
/* ======================================================= */

.process-steps-section {
    padding: 80px 0;
}

/* Fila que contendrá la línea de proceso */
.process-steps-row {
    position: relative; /* Necesario para posicionar la línea punteada */
    display: flex;
    flex-wrap: wrap; /* Permite que se apile en móvil */
}

/* La línea punteada que conecta los pasos */
.process-steps-row::before {
    content: '';
    position: absolute;
    top: 50px; /* Alinea verticalmente con el centro de los íconos */
    left: 10%;
    right: 10%;
    height: 2px;
    background-image: linear-gradient(to right, var(--dark-divider-color) 60%, transparent 40%);
    background-size: 15px 2px;
    background-repeat: repeat-x;
    z-index: 1; /* Detrás de los íconos */
}

.process-step-item-col {
    padding: 0 15px;
}

.process-step-item {
    text-align: center;
    position: relative;
    z-index: 2; /* Encima de la línea */
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    background-color: var(--secondary-color); /* Color turquesa */
    border: 5px solid var(--white-color); /* Borde blanco para "cortar" la línea punteada */
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 36, 110, 0.1);
}

.step-icon img {
    width: 55px;
    height: 55px;
}

.step-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.step-description {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.6;
}

/* --- Estilos Responsivos --- */
@media (max-width: 991px) {
    /* Ocultamos la línea de proceso en tablets y móviles */
    .process-steps-row::before {
        display: none;
    }

    .process-step-item-col {
        width: 50%; /* 2 columnas en tablet */
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .process-step-item-col {
        width: 100%; /* 1 columna en móvil */
    }
}
/* ======================================================= */
/* ====== ESTILOS PARA TARJETAS DE PROCESO HORIZONTALES ====== */
/* ======================================================= */

.process-cards-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Fondo claro para destacar las tarjetas */
}

/* La tarjeta individual */
.process-card {
    background-color: var(--white-color);
    border: 1px solid #eef2f7;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 36, 110, 0.1);
    border-color: var(--secondary-color);
}

/* La flecha que conecta las tarjetas */
.process-card:not(:last-child)::after {
    content: '\f061'; /* Código del icono de flecha de Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--secondary-color);
    opacity: 0.5;
    z-index: 1;
}

/* Encabezado de la tarjeta (icono y número) */
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    margin-right: 15px;
}

.card-icon img {
    width: 30px;
    height: 30px;
}

.card-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
}

/* Cuerpo de la tarjeta (título y descripción) */
.card-body h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.card-body p {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

/* --- Estilos Responsivos --- */
@media (max-width: 1199px) {
    .col-lg {
        flex-basis: auto; /* Permite que Bootstrap maneje el ancho */
    }
}

@media (max-width: 991px) {
    /* Ocultamos las flechas en tablet y móvil */
    .process-card:not(:last-child)::after {
        display: none;
    }
    
    .row > .col-lg {
        width: 50%;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .row > .col-lg {
        width: 100%;
    }

}
/* ======================================================= */
/* ====== ESTILOS PARA SECCIÓN DE CASOS TRATABLES ====== */
/* ======================================================= */

.treatable-cases-section {
    padding: 80px 0;
}

.case-card {
    background-color: var(--white-color);
    border: 1px solid #eef2f7;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 36, 110, 0.1);
}

.case-image {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.case-image img {
    width: 100%;
    height: auto;
    display: block;
}

.case-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}
/* ======================================================= */
/* ====== ESTILOS PARA BOTONES DE SERVICIOS RELACIONADOS ====== */
/* ======================================================= */

/* Contenedor de la fila de botones */
.related-buttons-row {
    margin-bottom: 50px; /* Espacio entre los botones y las tarjetas de abajo */
}

/* Estilo para los botones tipo píldora */
.btn-related {
    display: inline-block;
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--dark-divider-color);
    padding: 12px 30px;
    margin: 5px;
    border-radius: 50px; /* Bordes completamente redondeados */
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-related:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 36, 110, 0.1);
}
/* ======================================================= */
/* ====== ESTILOS PARA LEYENDA EN MODAL ====== */
/* ======================================================= */

.modal-legal-note {
   text-align: center;
        font-size: 0.85rem;
        font-weight: 400;
}
.modal-legal-note a {
    color: var(--primary-color);
    font-weight: 600;
}
/* --- ¡NUEVO! Estilos para las tarjetas de la PÁGINA (más grandes y con precio) --- */
.page-service-card {
    padding: 20px; /* Padding más grande */
    margin-bottom: 20px;
}
.page-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 36, 110, 0.1);
    border-color: var(--secondary-color);
}
.page-service-card .price-card-cost {
    display: block; /* Muestra el precio en las tarjetas de la página */
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.page-service-card .price-card-title {
    font-size: 0.9rem; /* Mantenemos el tamaño de título */
    margin-bottom: 15px;
}
.page-service-card .price-card-action .btn-default {
    padding: 10px 20px !important; /* Botón más grande */
    font-size: 14px !important;
}

/* --- Estilo para los botones de las tarjetas de la PÁGINA --- */
.btn-service-card {
    font-weight: 600;
}
/* ====== ESTILO PARA BOTONES DENTRO DEL MENÚ MÓVIL ====== */
/* ======================================================= */
.slicknav_nav .btn-default {
    /* Quitamos el padding original del enlace de menú */
    padding: 0 !important;
    margin: 10px 15px; /* Margen para centrarlo y darle espacio */
    border-radius: 50px;
    display: block; /* Hacemos que ocupe su propia línea */
}
.slicknav_nav .btn-default {
    color: var(--white-color) !important;
    font-weight: 600;
    text-align: center;
    /* Reaplicamos el padding aquí para simular el botón */
    padding: 12px 20px !important;
}
.slicknav_nav .btn-promo-orange {
    background-color: #FFA500;
}
.slicknav_nav .btn-icon::before {
    display: none !important;
}
/* ======================================================= */
/* ====== CORRECCIÓN DEFINITIVA PARA FOOTER EQUILIBRADO ====== */
/* ======================================================= */

/*
 * Usamos Flexbox en la fila principal del footer para controlar
 * la distribución de las columnas.
*/
footer.main-footer .row {
    display: flex;
    flex-wrap: wrap; /* Permite que se apilen en pantallas pequeñas */
    justify-content: space-between; /* Distribuye el espacio uniformemente */
}

/*
 * Le damos a cada columna del footer una base flexible para que se
 * distribuyan correctamente en el espacio disponible.
*/
footer.main-footer .col-lg-4 {
    flex: 1; /* Permite que cada columna crezca para ocupar el espacio */
    min-width: 300px; /* Ancho mínimo para evitar que se compriman demasiado */
}