/*
COLORS:
Rosa: #D43E80
Groc: #FFE300
Alternatiu: #253140
*/

/*General*/
body{
    font-family: 'Montserrat'; 
} 

a{
    text-decoration: none;
}


/*header.html*/
.navbar{
    background-color: #253140;       
}

.navbar-brand{
    font-family: 'Knewave'; 
    color: #D43E80;
    font-size: 25px; 
}

.navbar-brand:hover
{
    color: #D43E80;
}

.nav-link
{
    color: #FFE300;
}

.nav-link:hover{
    color: #fff399;
}


/*index.php*/
.bgImg{
    background-attachment: fixed;
    background-position: center;            
    background-size: cover;
}

#bgImg1 {
    background-image: url('images/bg1.jpg');
}

#bgImg2 {
    background-image: url('images/bg2.jpg');
}

#bgImg3 {
    background-image: url('images/bg3.jpg');
}

.banda{
    background-color: #253140;
    
    text-align: justify;            
    color: white;    
}

.btn-fm{
    background-color: #253140;
    color: #FFE300;
}

.btn-fm:hover{
    background-color: #2f3e51;
    color: #FFE300;
}

.btn-fm:active{
    background-color: #2f3e51;
    color: #FFE300;
}


.btn-fm-groc{    
    background-color: #FFE300;
    color: #D43E80;
}

.btn-fm-groc:hover{
    background-color: #ffea4d;
    color: #D43E80;
}

.btn-fm-groc:active{
    background-color: #ffea4d;
    color: #D43E80;
}



.bg2Img3{
    height: 200px;
    background-image: url('images/bg3.jpg');
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: cover;
}

.bg2Img4{
    height: 200px;
    background-image: url('images/bg4.jpg');
    background-repeat: no-repeat;    
    background-size: cover;
}


/*proximes.php*/
/* Estilo para limitar la altura de la imagen */
.limited-height-img {
    height: 40vh;
    width: 100%;
    object-fit: cover;
}


/************ NEW **************/

/* Aseguramos que el carousel ocupe el 100% de la altura del viewport */
.carousel-item {
    height: 40vh; /* 100% de la altura del viewport */
}
.carousel-item img {
    height: 100%; /* Imagen ocupando toda la altura */
    object-fit: cover; /* Para que la imagen se ajuste sin distorsionar */
}



/* Establecemos un contenedor de 1:1 (cuadrado) para la imagen */
.card-img-top-festa {
    width: 100%;          /* Ancho completo */
    height: 0;            /* Altura inicial en 0 */
    padding-top: 100%;     /* El padding-top del 100% crea la relación de aspecto 1:1 */
    position: relative;
    overflow: hidden;
}

.card-img-top-festa img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Ajusta la imagen sin distorsionar */
}


.image-container-resum {
    height: 200px; /* Altura fija para todas las imágenes */
    overflow: hidden; /* Recorta la imagen si es necesario */
}

.card-img-top-resum {
    height: 100%; /* La imagen ocupa toda la altura del contenedor */
    width: 100%; /* La imagen ocupa toda la anchura del contenedor */
    object-fit: cover; /* Ajusta la imagen dentro del contenedor sin distorsionarla */
}




/* SECCIONS */
.img-farra{
    background-image: url('../images/backgrounds/farra.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-festesmajors{
    background-image: url('../images/backgrounds/festesmajors.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-festes{
    background-image: url('../images/backgrounds/festes.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-halloween{
    background-image: url('../images/backgrounds/halloween.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-quines{
    background-image: url('../images/backgrounds/quines.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-carnaval{
    background-image: url('../images/backgrounds/carnaval.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-capdany{
    background-image: url('../images/backgrounds/capdany.jpg'); /* Reemplaza con la ruta de tu imagen */
}


.img-tonteig{
    background-image: url('../images/backgrounds/tonteig.jpg'); /* Reemplaza con la ruta de tu imagen */
}
.img-vermuteo{
    background-image: url('../images/backgrounds/vermuteo.jpg'); /* Reemplaza con la ruta de tu imagen */
}
.img-tardeo{
    background-image: url('../images/backgrounds/tardeo.jpg'); /* Reemplaza con la ruta de tu imagen */
}


.img-jarana{
    background-image: url('../images/backgrounds/jarana.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-festivals{
    background-image: url('../images/backgrounds/festivals.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-markets{
    background-image: url('../images/backgrounds/markets.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.img-fires{
    background-image: url('../images/backgrounds/fires.jpg'); /* Reemplaza con la ruta de tu imagen */
}

.image-header {    
    height: 30vh; /* Altura de la portada */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* Degradado de negro con transparencia */
    z-index: 1;
}

h1, h5 {
    position: relative;
    z-index: 2;    
}


/*---- HALLOWEEN ----*/

.nav-link.halloween {
  color: #ff7518;
  font-weight: bold;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.nav-link.halloween:hover {
  color: #ffae42; /* un to més clar per remarcar */
  text-shadow: 0 0 8px #ff7518, 0 0 15px #ff2200;
}

.halloween-btn {
  color: #ff7518; /* taronja Halloween */
  font-weight: bold;
  transition: text-shadow 0.3s ease, color 0.3s ease;
}

.halloween-btn:hover {
  color: #ffae42; /* taronja més clar quan fas hover */
  text-shadow: 0 0 8px #ff7518, 0 0 15px #ff2200;
}