/*paleta colores
#415367 azul 
#d9b13f amarillo
#f7f7f7 blanco
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background: linear-gradient(to top, rgb(41, 41, 41), rgb(65, 83, 103)); /* Aquí defines el gradiente */
    height: calc(100vh);
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;

}

.linea1 {
  color: #d9b13f; /* Color de la línea */
  width: 90%; /* Ancho de la línea */
  border-style: solid;
  border: none; /* Elimina el borde por defecto */
  border-top: 0.1rem solid #d9b13f; /* Crea la línea con color y grosor */
  margin: 0 auto; /* Centra la línea */
  margin-bottom: 2rem;
  margin-top: 1rem;
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 2rem;
}

p {
    font-size: 1.6rem;
}

img {
    width: 35vw; /* 50% del ancho de la pantalla */
    height: 35vw; /* mantiene la proporción original */
}

/*header*/

.logo {
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%); /* Para compatibilidad con navegadores antiguos */
    height: 4rem;
    width: 4rem;
}

.navbar {
    padding-top: 0.2rem;
    padding-left: 0.1rem;
    letter-spacing: 0.2rem;
    padding-right: 15rem;
    /*color: #fff;*/
    background-color: #415367;
    border-bottom: #415367;
    border-style: solid;
    border-width: thin;
    box-shadow: 0.2rem 0.2rem 0.4rem #FADF05;
  }

.nav-item {
    color: #fff;
}

li {
  list-style: none;
  padding-left: 0; /* opcional, para quitar indentación */
}

/*Banner1*/
  /*Banner1 section*/
  .banner-section {
    clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /*background-attachment: fixed;*/
    background-size: contain;  /* Ajusta la imagen para que se vea completa */
    background-position: center;
    background-repeat: no-repeat;  /* Evita que la imagen se repita */
    height: 85vh;
    width: 100%; 
}
/*Seccion Oferta de valor - vive futbol desde otro angulo*/

  .seccion1 {
    background-color: #273036;
  }

  #imgSct1 {
    padding-top: 1rem;
    height: 25rem;
    width: 25rem;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    border-radius: 25%;
  }

#seccion1Parrafo {
  padding-top: 10rem;
  padding-left: 5rem;
}

/*Seccion Nosotros*/


  #imgSct2 {
    padding-top: 1rem;
    padding-left: 1rem;
    height: 30rem;
    width: 40rem;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    border-radius: 25%;
  }

  #iconosSct2 i{
    font-size: 1.5rem;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    width: 3rem;
    background-color: #d9b13f;
    margin: 1.3rem;
    color: #d9b13f;
    border-radius: 25%;
  }

  #iconosSct2 p{
    padding-left: 2rem;
    padding-top: 1.2rem;
  }

/*Seccion Blog*/

/*Seccion Contacto*/
/* Cambiar el color del texto a blanco */
.contactoIconos img {
  color: #d9b13f;
  display: inline-flex; /* Para que el icono y el texto estén en la misma línea */
  align-items: center;  /* Alinea verticalmente el texto con el icono */
  font-size: 3.5rem;
  height: 3.5rem;
  width: 3.5rem;
}

.contactoIconos .iconos p {
  margin: 0;  /* Elimina el margen del <p> para que se ajuste bien junto al icono */
  padding-left: 0.6rem;  /* Un pequeño espacio entre el icono y el texto */
  
  font-size: 1.5rem;
  font-style: normal;
}

.tiktokLogo {
    color: #48733C;
    height: 25%;
    width: 25%;
}

/* Cambiar el color de los iconos a verde */
/*.col-md-6 .uil {
  color: green;
}*/


/*Responsividad*/


 @media (max-width: 768px) {

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.linea1 {
  color: #d9b13f; /* Color de la línea */
  width: 90%; /* Ancho de la línea */
  border-style: solid;
  border: none; /* Elimina el borde por defecto */
  border-top: 0.1rem solid #d9b13f; /* Crea la línea con color y grosor */
  /*margin: 0 auto; /* Centra la línea */
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.4rem;
}

p {
    font-size: 1rem;
}

/*header*/

.logo {
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%); /* Para compatibilidad con navegadores antiguos */
    height: 2rem;
    width: 2rem;
}

.navbar {
    padding-top: 0.2rem;
    /*padding-left: 0.1rem;*/
    letter-spacing: 0.1rem;
    padding-right: 2rem;
    /*color: #fff;*/
    background-color: #415367;
    border-bottom: #415367;
    border-style: solid;
    border-width: thin;
    box-shadow: 0.2rem 0.2rem 0.4rem #FADF05;
  }

.nav-item {
    color: #FCF3F0;
    font-size: 0.6rem;
    padding-left: 0.5rem;
}

li {
  list-style: none;
  padding-left: 0; /* opcional, para quitar indentación */
}

/*Banner1*/
  /*Banner1 section*/
  .banner-section {
    clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-attachment: fixed;
    background-size: contain;  /* Ajusta la imagen para que se vea completa */
    background-position: center;
    background-repeat: no-repeat;  /* Evita que la imagen se repita */
    height: 30vh;
    width: 100%; 
}
/*Seccion Oferta de valor*/

  #imgSct1 {
    padding-top: 1rem;
    height: 8rem;
    width: 8rem;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    border-radius: 25%;
  }

  #seccion1Parrafo {
  padding-top: 2rem;
  padding-left: 2.5rem;
}

/*Seccion Nosotros*/

 #imgSct2 {
    padding-top: 1rem;
    padding-left: 0rem;
    height: 8rem;
    width: 8rem;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    border-radius: 25%;
  }

  #iconosSct2 {
    padding-left: 0.5rem;
  }

 #iconosSct2 i{
    font-size: 1rem;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    width: 2rem;
    height: 1.5rem;
    background-color: #d9b13f;
    margin: 0.5rem;
    color: #d9b13f;
    /*border-radius: 25%;*/
  }

  #iconosSct2 p{
    padding-left: 1rem;
    padding-top: 0.6rem;
  }

/*Seccion Blog*/

/*Seccion Contacto*/
/* Cambiar el color del texto a blanco */
.col-md-3 .iconos {
  color: #000BE0;
  display: inline-flex; /* Para que el icono y el texto estén en la misma línea */
  align-items: center;  /* Alinea verticalmente el texto con el icono */
  font-size: 3rem;
}

.col-md-3 .iconos p {
  margin: 0;  /* Elimina el margen del <p> para que se ajuste bien junto al icono */
  padding-left: 0.6rem;  /* Un pequeño espacio entre el icono y el texto */
  font-size: 1rem;
  font-style: normal;
}



 }

 /*footer*/

 .footerText1 {
    font-size: 2rem;
 }