/*
@charset "utf-8";*/

a {  text-decoration:none;}
.select2-container {
width: 100% !important;
padding: 0;
}



.clr { clear:both; padding:0; margin:0; font-size:0px; line-height:0px;}
.clear { clear:both;}





/* form */

ol { list-style:none;}

ol li { display:block; clear:both;}

ol li label { display:block; margin:0; padding:16px 0 0 0;}

ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;}

ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}

ol li .send { margin:16px 0 0 0;}




.searchclass
{
color:#666666;
  font-size:14px;
  font-family:Verdana;
  font-weight:bold;
}
.matchesbig{
  font-size:20px;
  font-weight:bold;
  color:#666666;
}
.searchhead{
 font-weight:bold;
 font-family:Verdana;
 font-size:14px;
 color:#666666  !important;
}
.mybuttonclass{
background-color:#666666; 
color:#fff; 
}
.mybuttonclass:hover{
background-color:#666666; 
color:#ccc; 
}

.mybackground {
	background-color:#666666;
}

.boxxed
{
	overflow:hidden;
	background-color:#f5f5f5;
	padding:20px 30px;
	border:solid 1px #dddddd;
}



/***2024 ***/

@font-face {
    font-family: baskerville;
    src: url(/font/baskerville-old-face.ttf);
}


.bg-primary {
    background-color: #666666 !important;
}
.border-primary {
    border-color: #666666 !important;
}
.btn-primary {
    background-color: #666666 !important;

}
.btn-primary:hover {
    background-color: #666666 !important;
}

.custom-bg-primary {
    background-color: #666666 !important;
    /* Custom primary color */
}

.custom-text-primary {
    color: #666666;
    /* Custom primary text color */
}

.custom-bg-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}

.custom-text-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}


.custom-small {
    font-size: small;
}

.custom-text-secondary {
    color: #EF8613;
    /* Custom primary text color */
}

.navbar {
     background-color: #FFFFFF; /* Cambia este color al que prefieras */
    }
/* Custom style to make all navbar text white */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
    color: black;
    /* Force text color to white */
}

.navbar-toggler-icon {
    filter: invert(1);
    /* Make the hamburger icon white */
}

/* Center the navbar menu on mobile view */
.navbar-collapse {
    justify-content: center;
    /* Center items when collapsed */
}

.banner-text {
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-shadow:
        -4px 4px 0 #000,
        4px 4px 0 #000;

}

.custom-hover:hover {
    background-color:#666666;
	color: #CCCCCC!important;
}

.bg-costom {
    background-color: #666666;
}
.nav-link {
    margin-right: 35px;
}

.primary1 {
    background-color: #666666 !;

}

.section {
    margin-top: 50px;
}

.card-border {
    border-color: #FFFFFF;
}

.costom-border {
    border: 1px solid  #666666;
    border-radius: 10px;
}

.btn-primary {
    background-color:  #666666;
}
.text-primary,h2,h3,h4{
	color:  #666666 !important;
}
.co-bg-secondary {
    background-color: #666666;
}
.color-menu {
    background-color: #000;
}
.text-c-primary {
    color:  #666666;
}

.text-c-secondary {
    color: #666666;
}

/*accordion Remove focus outline */
.no-focus:focus {
    outline: none;
    box-shadow: none;

}

/* accordion Remove hover effects */
.no-hover:hover {
    background-color: none;
    color: none;
}

/*  accordion items */
.accordion-item {
    border-width: 2px;
    border-style: solid;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

/* booking imge  opacity */
.bg-booking {
    background-color: #666666;
    opacity: 0.9;
}

/* wallet image opacity */
.bg-wallet {
    background-color:#666666;
    opacity: 0.9;
}
.reservation {
    position: relative;
}

.reservation-badge {
    background-color: chartreuse;
    padding: 10px;
    border-radius: 50px;
    height: 5px;
    width: 5px;
    position: absolute;
    left: 30px;
    top: 20px;
}

.pay-btn-shadow {
    background-color: #477DBD;
    border-radius: 12px;
    box-shadow: 0 4px 0 #365a91;
    transition: all 0.2s ease-in-out;
}

.banner-principal {
	height: 270px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

/* media query */

@media (min-width: 992px) {

    /* Applies from large screens (lg) and up */
    .custom-width {
        max-width: 550px;
        /* Restricts width on larger screens */
    }
	.banner-principal {
		height: 350px;
	}
}

@media (max-width: 767px) {
	.banner-principal {
		height: 160px;
	}
    .banner-text {
        font-size: 36px;

        /* Adjust to fit mobile view */
    }

    .option-section {
        flex-direction: column;
        text-align: center;
    }

    .ranking-section {
        flex-direction: column;
        text-align: center;
    }

    .accept-btn {
        text-align: center;
        margin-bottom: 20px;
    }

    .section {
        margin-top: 100px;

    }

    .dropdown-btn {
        width: 100%;
        margin-bottom: 10px;
    }


}







/*CHATGPT IMPROVE*/
/* Estilos para el menú */
.nav-link {
    transition: color 0.3s, background-color 0.3s; /* Transición suave */
}

.navbar-brand img {
    transition: transform 0.3s; /* Transición para el logo */
}

.navbar-brand img:hover {
    transform: scale(1.4); /* Efecto de zoom al pasar el mouse */
}

.nav-item .nav-link.active {
    font-weight: bold; /* Negrita para el enlace activo */
    color: #666666  !important; /* Color del texto activo */
}
/* Estilo para la cabecera del menú en dispositivos móviles y tablets */
@media (max-width: 992px) {
    .navbar {
        background-color: #FFFFFF; /* Cambia este color al que prefieras */
    }
    .navbar .nav-link {
        color: ; /* Cambia el color del texto si es necesario */
    }
}

/* Texto responsivo */
.responsive-text {
    font-size: min(4vw, 40px); /* Máximo 40px, ajustado según el ancho disponible */
    font-size: clamp(18px, 2.5vw, 36px); /* Ajuste adaptable */
    width: 100%; /* Asegura que no se desborde */
    white-space: normal; /* Permite saltos de línea */
    text-align: center; /* Centrado */
    line-height: 1.2; /* Mejora la legibilidad */
}

.responsive-img {
    width: clamp(35px, 8vw, 70px); /* Mínimo 40px, Máximo 70px, Escala con el ancho de la pantalla */
    transition: width 0.3s ease-in-out; /* Animación suave */
}

/* HOVER ON BOOK ONLINE */
.card-link {
        text-decoration: none;
    }

    .hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-effect:hover {
        transform: scale(1.05);  /* Aumenta ligeramente el tamaño */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);  /* Sombra para un efecto de "clickeable" */
    }

    .hover-effect:active {
        transform: scale(0.98);  /* Efecto de pulsación, reduce el tamaño */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  /* Sombra más suave al hacer clic */
    }