/* ----------------------------------------------------------------------------------------
* 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
-------------------------------------------------------------------------------------- */
/* 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;
}
.pt31{
	padding-top: 31%;
}
.pb15{
	padding-bottom: 15px;
}
.pt20{
	padding-top: 20px;
}
.pt30{
	padding-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: absolute;
    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(--secondary-color);
	border-bottom: 1px solid var(--dark-divider-color);
	backdrop-filter: blur(30px);
}

.navbar{
	padding: 30px 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: 300px !important;  /* Ajusta este ancho según necesites */
    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 15px !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: 0;
	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 20px !important;
	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: none;
}

.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(--primary-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(--white-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(--white-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;
	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.25rem;
	font-size: 400;
	line-height: 1.6;
	
}
/*===============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: 70%;
	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: 100px 0;
}

.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: 100px 0 0;
}
.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: 100px 0;
}

.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;
}

/************************************/
/***      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;
}

.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: 100px 0;
}

.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);
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}
.footer-links i{
	font-size: 20px;
	color: #fff;
}
.footer-links ul{
	list-style: none;
	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: 50px 0;
}
.mb20{
	margin-bottom:20px;
}
.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: 100px 0;
}

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

.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.2;
	object-fit: cover;
	border-radius: 40px;
}

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

.techonology-content .section-title h2{
	width: 100%;
	max-width: 500px;
}
/* ======================================================= */
/* ========== 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: 20px 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 .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 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;
}

/* ======================================================= */
/* ====== ESTILOS PARA TARJETAS DE PRECIOS (COMPACTAS) ====== */
/* ======================================================= */

.service-price-card {
    border: 1px solid #eef2f7;
    border-radius: 15px;
    padding: 15px; /* Padding reducido para hacerlas más pequeñas */
    text-align: center;
    margin-bottom: 20px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.service-price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 36, 110, 0.1);
    border-color: var(--secondary-color);
}
.price-card-cost {
    font-size: 1.5rem; /* Tamaño de precio reducido */
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.price-card-title {
    font-size: 0.9rem; /* Tamaño de título reducido */
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 15px;
    flex-grow: 1;
}
/* El recordatorio de descuento ahora tiene formato de separador */
.discount-reminder {
    background-color: var(--secondary-color); /* Fondo Turquesa */
    padding: 20px 25px;
    border-radius: 15px;
    margin-top: 10px; /* Espacio para separarlo de las tarjetas */
    text-align: center;
}
.discount-reminder .discount-text {
    color: var(--white-color);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}
.discount-reminder .discount-text strong {
    font-weight: 700;
}

/* --- Sección de Urgencias (sin cambios) --- */
.urgency-contact {
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 25px;
    margin-top: 30px;
    text-align: center;
}
.urgency-contact .textp{
        text-align: center;
        font-size: 0.9rem;
        font-weight: 400;
}
.urgency-contact p {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}
.btn-service-card {
    font-size: 13px;
    padding: 8px 15px !important; /* Botón más compacto */
    font-weight: 600;
}

/* --- 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 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 */
}