/* ================================= */

/* :::::::::: 1. General ::::::::::: */

/* ================================= */



html,

body {

    font-family: "Open Sans", sans-serif;

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    font-size: 13px;

    -webkit-text-size-adjust: 100%;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

a {

	text-decoration: none !important;

	color: #fff; /* Color de texto blanco para los enlaces */

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	-ms-transition: all 0.3s ease-in-out;

	-o-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

}



a:hover {

	  text-decoration: none !important;

	  color: #8f8f8f;

	  -webkit-transition: all 0.3s ease-in-out;

	  -moz-transition: all 0.3s ease-in-out;

	  -ms-transition: all 0.3s ease-in-out;

	  -o-transition: all 0.3s ease-in-out;

	  transition: all 0.3s ease-in-out;

}



/* Estilos para el header */

header {

    min-height: 100vh;

    position: relative;

    height: 100vh;

    width: 100%;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7); /* Filtro negro semitransparente */

    z-index: 1;

}



/* Estilos para el contenido dentro del header */

.header-content {

    position: relative; 

    text-align: center;

    color: #fff; /* Color de texto blanco para el contenido */

    z-index: 2;

}



.header-content h1 {

    font-size: 2.5em;

    color: #fff;

    font-weight: 300;

    letter-spacing: 1px;

    padding-bottom: 10px;

    font-family: "Raleway", sans-serif;

}



.header-content .countdown {

    font-size: 2em;

    margin-top: 10px;

    font-family: 'Iceberg', sans-serif;

    color: #fff;

}



.header-content .countdown div {

    display: inline-block;

    margin: 0 20px;

}



.header-content .countdown div span {

    display: block;

    font-size: 0.5em;

}



.header-content .social-links {

    margin-top: 20px;

}



.header-content .social-links a {

    display: inline-flex;

    align-items: center;

    margin: 0 10px;

    color: #fff; /* Color de texto blanco para los iconos de redes sociales */

    font-size: 1.2em;

}



.header-content .social-links a i {

    margin-right: 5px;

}



/* Clase para la imagen de fondo */

.hero-background {

    background-image: url('../images/banner-by-artist.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}