/* es una buena practica dejar todos los estilos en el css y no en el html
si se usan en el html estos al parecer le ganan a los que estan en el css y
puede producir conflictos a la larga */

/* variables de la raiz */
:root{
    /* colores */
    --clr-negro: black;
    --clr-blanco: white;
    --clr-dorado: #f4d229;
    --clr-amarillo-claro: #e6d690;
    --clr-azul: #7892c2;
    /* fuentes */
    --ff-title: 'Roboto', sans-serif;
    --ff-title-weight: 500;
    --ff-paragraph: 'Poppins', sans-serif;
    --ff-paragraph-weight: 300;
    --ff-paragraph-size: 1.3125rem;
    


}

*,
*::before,
*::after{
    box-sizing: border-box;
}

/* asigna las variables de la raiz al comportamiento por defecto en body */
body{
    font-family: var(--ff-paragraph);
    font-weight: var(--ff-paragraph-weight);
    font-size: var(--ff-paragraph-size);
    line-height: 1.6;
}


/* controlar la altura de las navbar si sobrepasa el ancho minimo
 util para controlar tambien el ajuste de la siguiente seccion */
@media only screen and (min-width: 600px) {
    .navbar {
     height: 5vh !important; 
    }
 }
 @media only screen and (min-width: 768px) {
    .navbar {
     height: 5vh !important; 
   } 
 }
/* controla altura y ancho del boton si sobrepasa el min-width */
 @media only screen and (min-width: 768px) {
    .btn {
     height: 3rem !important; 
     width: 4rem !important;
   } 
 }

/* esto hace que los iconos del header se muestren en fila horizontal y justifica el contenido en el centro
y elimina los puntos de enumeracion de la lista */
 ul.iconos {
    list-style-type: none;
    display: flex;
    justify-content: center; 
    margin: 0;
    padding: 0;
}

/* iconos centrados */
.header-icons {
    list-style-type: none;
    margin-inline: auto;
    width: 100%;
    
}


p {
    color:var(--clr-blanco)
}

.banner {
    padding-top: 15vh;
    /* porcentaje de pantalla */
    height:80vh; 
    background: url('imagenes_paginaweb/imagenes/new_banner.jpg');
    background-size:cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(0,0,0,.7);
    color: var(--clr-blanco);
    position: relative;  
}
/* junstificar el titulo del banner */
/*es contenido por el conteainer--narrow*/
#header-banner{
    
    color: var(--clr-blanco);
    font-family: var(--ff-title);
    font-weight: var(--ff-title-weight);
    text-align: center;
    /*background-color: #000000;*/
    display: flex;
    justify-content: center;
    align-items: center;    
    height: 3 rem;
        
}


/* mantener el texto pegado al margen establecido en banner */
.bgimage{
    padding-top: 0;
    
    
}

/* overflow hidden esconde el elemento si se sale del elemento html que lo contiene
en este caso el botón de contacto */
.w3-container {
    padding-top: 5vh;
    height: 65vh;  /* 85 porciento de la pantalla lo pongo un poco menos que las dimensiones del banner */
    overflow: hidden;
    
}

.container-video-banner{
    width:100%;
    height: 40vh;
    margin: auto; /* Center horizontally */
}
.video-youtube{
    margin: 0 auto;
    display: flex; /* video centrado en la pantalla*/
}
/* la clase split para que miestre en columnas */
/* esta es solo el area del boton, no el botón en si mismo */
.button-banner{
    padding-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;    
    height: 2rem;  
    
}

.button {
    background-color:var(--clr-azul);
    border-radius:10px;
    color: var(--clr-negro);
    border:1px solid #4e6096;
    margin-inline: auto;
    padding-block: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;    
    
}


.button:hover {

	background:linear-gradient(to bottom, var(--clr-dorado) 5%,  var(--clr-amarillo-claro) 100%);
	background-color: var(--clr-negro);
    color: var(--clr-negro);
}
.button:active {
	position:relative;
	top:10px;
}

#about{
    align-items: center;
    justify-content: center;
    background-color: var(--clr-negro); 
    
}

/* configurar el titulo de la seccion about */
#about-header,#service-header, #portfolio-header, #contact-header {
    margin-top: 1rem;
    color: var(--clr-negro);
    font-family: var(--ff-title);
    font-weight: var(--ff-title-weight);
    
}

#link-portfolio{
    margin: auto;
    align-items: center;
    justify-content: center;
}

/* imagen de la seccion about */
.imageAboutPage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 17rem;
    aspect-ratio: 4 / 5; /* si se especifica aspect-ratio y width automaticamente se calcula la altura*/
    
}


.about-text {
    margin-top: 1rem;
    color:var(--clr-negro)
}

/* usar fixed para fijar navs durante el scroll en pantalla
width para que ocupe todo el ancho
z-index para que este por encima de cualquier elemento
entre mas grande el numero le gana a los z-index de menor numero*/
.navbars{
    position:fixed;
    width:100%;
    z-index: 1;
}

/* centrar mas el nombre y el boton de la navbar secundaria */
.navbar-brand{
    margin-left: 0.8rem;
    
}

/*para aplicar un estilo a una clase anidada toca partir desde la clase nodriza */
.navbar .navbar-brand{
    color:var(--clr-dorado)
}
.navbar-toggler {
    
    margin-right: 0.8rem;
    
}

/* distribucion de todas las divisones con clase container */
.container {
    
    margin-inline: auto;
    min-width: min(90%, 70.5rem);
}

/* ancho maximo del container--narrow */
/*contiene al titulo*/
.container--narrow {
    
    margin-inline: auto !important;
    justify-content: center;
    text-align: center;
    
}

/*whatsapp button*/
.whatsapp-btn-container{
    position: fixed;
    right: 1rem;
    bottom: 0rem; /*inferior a la psoicion fnal de la animacion, desplazamiento hacia arriba*/
    padding: 1rem;
    z-index: 1;
    animation: fade-up 1500ms forwards; /*nombre de la anim fade-up, duracion 1seg
                                            y forward para que permanezca un segundo*/
    animation-delay: 1000ms; /*después de 1seg*/
}

@keyframes fade-up {
    100% {
        bottom: 5rem; /*la posicion final de la animacion*/
        opacity: 1;
    }
}

.whatsapp-btn-container .whatsapp-btn {
    font-size: 3.5rem;
    display: inline-block;
    transition: all 400ms;

}

.whatsapp-btn-container .whatsapp-btn:hover {
    transform: scale(1.2)
}

.whatsapp-btn-container span{
    position: absolute;
    top: -1rem;
    
    left: -2rem;
    font-size: large;
    font-weight: bold;
    color: var(--clr-dorado); 
    transform: rotateZ(20deg) translateX(0.2rem);
    opacity: 0;
    transition: all 400ms;
}

/* comportamiento cuando se hace hover sobre el boton*/
.whatsapp-btn-container .whatsapp-btn:hover + span {
    transform: rotateZ(0deg) translateX(0rem);
    opacity: 1;
}



#santiago, #camilo, #nicolas, #grisela, #carlos{
    color: var(--clr-blanco);
    margin-top: 1rem;
    
    font-weight: bold;
}

.split{
    display: flex;
        
}


/* espacio entre divs que estan precedidas por otro elemento div */
div + div {
    margin-left: 1rem;

  }

.btn{
    
    margin-top: 0.8rem;
    height: 2rem;
    width: 4rem;
    
  }


/* color cuando se oprime el boton dropdown de servicios en la navbar y los infos en about*/
.dropdown-toggle:hover {
	background:linear-gradient(to bottom,var(--clr-azul) 5%, #476e9e 100%);
    color: var(--clr-negro);
	background-color:var(--clr-negro);
    border-radius:10px;
	border:2px solid var(--clr-negro);  
}

/* cambio de color del icono al deseado en la seccion de about */
#info-icon1, #info-icon2, #info-icon3, #info-icon4, #info-icon5 {
    color: var(--clr-dorado); 
  }

/* cambio de color cuando hover en el icono de info o en el botón en si mismo */

#info-icon1:hover {
    color: var(--clr-negro); 
  }


#info-icon2:hover {
    color: var(--clr-negro); 
  }

#info-icon3:hover {
    color: var(--clr-negro); 
  }


#info-icon4:hover {
    color: var(--clr-negro); 
  }


#info-icon5:hover {
    color: var(--clr-negro); 
  }

/*fin parte de cambio de colores */
.dropdown-toggle:active {
	position:relative;
	top:5px;
}

.dropdown-toggle{
    color: var(--clr-azul);
}



#services {
    align-items: center;
    justify-content: center;
}

/* el elemento card hace tarjetas pero tiene el inconveniente que se sobrepone al navbar */
.card {
    
    margin-inline: auto;
    
}

/* lo que ocurre cuando se hace un hover sobre el elemento */
.card:hover {
    background:linear-gradient(to bottom,var(--clr-amarillo-claro) 5%, #fefefe 100%);
	background-color:var(--clr-amarillo-claro);
}

.card-body{
    
    align-items: center;
    justify-content: center;
}

.card-title {
    margin-top: 0.5rem;
    color:var(--clr-negro);
    font-weight: bold;
    
}

.card-text {
    
    margin-top: 0.5rem;
    color:var(--clr-negro)
}

.servicesIcon {
    font-size: 4em;
    text-align: center;
    width: 100%;
}

/* solo hay hasta mt-5 que es 3rem hay que hacer la clase y especificar aqui */
.mt-6 {
    margin-top: 3.7rem; 
}

/*audiovisuales*/

#audiovisuales {
    align-items: center;
    justify-content: center;
    background-color: var(--clr-negro); 
    height: 60vh;
    margin-top: 1rem;    
} 



#audiovisuales-text{
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: white;
    text-align: center;
}
#audiovisuales-header{
    margin-bottom: 1rem;
    padding-top: 1rem;
    color: white;
}

.card-text-portfolio{
    display:none;
    margin-top: 0.5rem;
    color:var(--clr-negro);        
}

.btn-text-portfolio {
    margin-block: 1rem;
    align-items: center;
    justify-content: center;
}


.button-portfolio {
    background:linear-gradient(to bottom, var(--clr-azul) 5%, #476e9e 100%);
	background-color:#7892c2;
    margin-inline: auto;
    border-radius:10px;
	border:1px solid #4e6096;
    padding-block: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;    
    
}

.button-portfolio:hover {
	background:linear-gradient(to bottom,var(--clr-dorado) 5%,  var(--clr-amarillo-claro) 100%);
	background-color:var(--clr-negro);
}

.button-portfolio:active {
	position:relative;
	top:10px;
}

.link-porfolio {
    font-weight: bolder;  
}

#about-header, #about-text{
    color: white;
}



.button-contact {
    display: flex;
    justify-content: right;
    align-items: right;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

/* social media icons styling */
.social-icons {
    font-size: 2rem;
    cursor: pointer;
}

.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: var(--clr-dorado);
}

.fab {
    color: var(--clr-negro);
}
/* footer styling */
#footer {
    background-color: var(--clr-azul);
    text-align: center;
}    

.footer-text {
    
    /* top right bottom left */
    margin:0px 0px -20px 0px;
    font-size: 1rem;
}