/*
==================================================================
Theme Name: Alquiler Aulas
Version: 1.0
Author: Neobrand®
Author URI: https://neobrand.com
==================================================================
*/

.header_nav .nav-item,
.header_nav .nav-link {
	margin-right: 0;
}

.header_nav-list {
	gap: 50px;
}

.container {
	max-width: 1280px;
}

.container--contacts {
	max-width: unset;
}

#topbar {
	width: 100%;
	height: 40px;
	background-color: #ff7a01;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
}

#topbar .container {
	display: flex;
	justify-content: space-between;
}

#topbar .container > div {
	display: flex;
	gap: 20px;
}

#topbar .container a {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
}

.header {
	height: 100px;
	margin-top: 40px;
	transition: all 280ms ease;
	position: sticky !important;
	top: 0;
}

.header.sticky {
	height: 100px;
}

.page {
	margin-top: 0 !important;
}

#topbar .container a .fa-phone {
	transform: rotate(45deg);
	margin-right: -3px;
}

.footer_copyright {
	padding: 20px 0;
	background: #ff7a01;
	color: #fff;
}

.contacts_secondary-form {
	width: 100%;
}

.contacts {
	background: #f8fafd;
}

.home .contacts,
.contact .contacts {
	background: #fff;
}

.contacts_info-main_block.align-items-center .icon {
	top: 0;
}

.underline {
	padding: 0 3px 1.5px 5px;
	background-color: color-mix(in srgb,currentColor 25%,transparent);
	border-radius: 5px;
}

.theme-element {
	color: #fff;
	background-color: #ff7a01;
}

.theme-element--light {
	background-color: #fff;
	color: #ff7a01;
}

.home .hero_gallery {
	position: relative;
}

.home .hero_gallery .slide {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 1s ease;
	border-radius: 1;
	position: absolute;
	top: 0;
	left: 0;
}

.home .hero_gallery .slide.active {
	opacity: 1;
}

.room .description {
	gap: 20px;
}

.room .description ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.room .description ul li {
	list-style: square;
}

.icon-meters {
	width: 18px;
	height: 18px;
	background: url('img/meters.svg');
	background-size: cover;
}

sup {
	font-size: 10px;
	font-weight: 600;
	transform: translateY(-4px);
}

.room .facilities_list {
	row-gap: 20px;
}

.room .room_main-cards_card h3 {
	font-size: 24px;
	margin-bottom: 20px;
	text-align: center;
}

.room .room_main-cards_card .booking_btn {
	margin-top: 0;
}

.contacts_info-header_text {
	max-width: 100%;
}

.rooms_list-item .item-wrapper .main_info {
	width: 500px;
}

.about_stages-main p:not(:last-child) {
	margin-bottom: 20px;
}

.rooms_list-item.seo .item-wrapper {
	height: fit-content;
}

.rooms_list-item.seo .item-wrapper .main {
	width: 100%;
}

.rooms_list-item.seo .item-wrapper .main_info {
	width: 100%;
	gap: 20px;
}

.rooms_list-item.seo h2 {
	font-size: 32px;
}

.rooms_list-item.seo h3 {
	font-size: 24px;
}

.rooms_list-item.seo h2 strong,
.rooms_list-item.seo h3 strong {
	color: #ff7a01;
}

.about_stages-main {
	padding-left: 100px;
}

.rooms_list-item.seo .item-wrapper .main_info ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.rooms_list-item.seo .item-wrapper .main_info ul li {
	list-style: square;
}

.about_main {
	max-width: 650px;
}

.about_media {
	height: 720px;
}

.about_info {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home .about_info {
	padding: 60px 30px 40px 30px;
	border-radius: 8px;
	background-color: #f8fafd;
}

.home section.about {
	padding-top: 0;
}

.about_info p {
	width: 100%;
}

.about_info > p {
	width: 50%;
}

body.about .about_info .about_main-list {
	padding-bottom: 40px;
	margin-bottom: 60px;
	border-bottom: 1px solid #f8fafd;
}

.about_main-list {
	max-width: 100%;
	text-align: left;
}

.about_main-list_item {
	width: 25%;
}

.about_main-list_item .icon {
	min-width: 80px;
	height: 80px;
}

.about_main-list_item .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: invert(58%) sepia(62%) saturate(4479%) hue-rotate(359deg) brightness(105%) contrast(101%);
}

.about_sub-list {
	margin-top: 40px;
}

.about_sub-list li {
	width: 100%;
}

.about_sub-list .icon {
	min-width: fit-content;
	height: fit-content;
}
.about_sub-list .text {
	max-width: 100%;
}

.wpcf7-select {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #808385;
	height: 56px;
	background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23808385%22%2F%3E%3C%2Fsvg%3E') no-repeat right 19px top 55%;
	background-size: 18px 18px;
	font-family: OpenSans, sans-serif;
	padding: 0 20px;
	line-height: 1.4;
	appearance: none;
	cursor: pointer;
	font-size: 16px;
	color: #818385;
	font-weight: 400;
}

.wpcf7-select.change {
	color: #2c3c4a;
	font-size: 18px;
}

.showinfo {
	margin-top: 10px;
	cursor: pointer;
}

.w-100 {
	width: 100%;
}

.w-50 {
	width: 50%;
}

.privacy-info {
	font-size: 14px;
	display: none;
}

.contacts_form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -12px;
}

.contacts_form .submit-form {
	width: 100%;
	margin-top: 20px;
	justify-content: space-between;
	align-items: center;
}

.contacts_form .submit-form .wpcf7-list-item {
	margin-left: 0;
}

.contacts_form .submit-form .wpcf7-list-item label {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}

.contacts_form .submit-form .wpcf7-list-item input {
	width: 18px;
	height: 18px;
}

.contacts_form .submit-form .wpcf7-list-item label a {
	text-decoration: underline;
}

.contacts_form .btn {
	margin-top: 0;
}

.wpcf7-response-output {
	width: 100%;
	margin: 0;
	margin-top: 20px;
	text-align: center;
}

.contact-info {
	margin-top: 60px;
	gap: 60px;
	margin-left: 0;
}

.contact-info > div {
	width: calc(50% - 30px);
	background: #fff;
	border-radius: 8px;
	padding: 30px;
	box-shadow: 0 2px 30px rgba(44,60,74,.08);
	gap: 20px;
}

.contact-info h3 {
	font-size: 24px;
}

.contact-info  ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-info  ul li {
	list-style: square;
}

#contact-map {
	height: 500px;
	position: relative;
}

#contact-map iframe {
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
}

#gotop {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-color: #fff;
	opacity: 0;
	transform: translateY(20px);
	box-shadow: 0 2px 30px rgba(44,60,74,.08);
	color: #ff7a01;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 280ms ease;
	position: fixed;
	right: 20px;
	bottom: 20px;
}

#gotop.active {
	opacity: 1;
	transform: translateY(0);
}

.mt-40 {
	margin-top: 40px;
}

.reviews_slider--main {
	border-left-color: #ff7a01;
}

/* Estilos de la imagen y texto */
.distribucion-imagen {
    position: relative;
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

.distribucion-imagen img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Estilo y animación del texto */
.texto-distribucion {
    position: absolute;
    top: -15%;  /* Ajusta el texto sobre la imagen */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'poppins', sans-serif;
    font-size: 36px;
    color: black;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 1;
    animation: deslizamiento 2s ease-in-out forwards; /* Agrega la animación, 'forwards' para mantener la posición final */
	 /* Aseguramos que el texto esté en una sola línea */
    white-space: nowrap;  /* Impide que el texto se divida */
    overflow: hidden;     /* Oculta el texto que sobrepase el límite del contenedor */
}

/* Para pantallas pequeñas */
@media (max-width: 1023px) {
    .distribucion-imagen img {
        animation: aparecer-imagen 3s ease-in-out forwards;
         max-width: 100%;  /* En pantallas pequeñas, la imagen se adapta al contenedor */
        margin-top: 30px; /* Mueve la imagen más abajo en pantallas pequeñas */
    }

/* Para pantallas pequeñas (dispositivos móviles) */
@media (max-width: 1023px) {
    .texto-distribucion {
        font-size: 20px;  /* Tamaño más pequeño para evitar que se salga de la pantalla */
        animation: aparecer 3s ease-in-out forwards;
        top: -7%;  /* Ajustamos el top para evitar que se superponga con las imágenes anteriores */
    }
}

* Para el texto, en pantallas grandes, no debe moverse */
    .texto-distribucion {
        position: absolute;
        top: 30%;  /* Mantén el texto fijo en una sola posición en pantallas grandes */
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Poppins', sans-serif;
        font-size: 28px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: black;
        opacity: 1;
        white-space: nowrap;
    }
}

/* Animación para el movimiento */
@keyframes deslizamiento {
    0% {
        top: 0%;
        opacity: 0;
    }
    50% {
        top: -11%;
        opacity: 1;
    }
    100% {
        top: -11%; /* Se queda en esta posición al final */
	}