@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');

html{
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    overflow-x: hidden;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}




/*NAV END*/

/*SECTION FOTOSJUGADORES*/

#fotosJugadores {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    margin-top: 90px;
    margin-bottom: 45px;
    padding-top: 45px;
}

.titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

h2 {
    line-height: normal;
    overflow: hidden;
    text-align: center;
}

.underline {
    width: 100px;
    border-bottom: 3px solid black;
}

#carouselExampleControls {
    width: 95%;
    /*height: 800px;*/
    overflow: hidden;
}

.slide img{
    height: auto;
    object-fit:contain;
}

/*.carousel-item img {
    margin-bottom: 400px;
}*/

/*FOTOSJUGADORES END*/

/*SECTION PARTIDOS*/

.banner {
    height: 300px;
    width: 100vw;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.separarBotones {
    display: flex;
    gap: 40px;
}

.banner h2 {
    color: white;
    font-size: 50px;
}

.btn {
    width: 300px;
}

/*PARTIDOS END*/

/*SECTION NOTICIAS*/

#noticias {
    scroll-margin-top: 200px;
    width: 100vw;
    height: auto;
    padding: 45px 0;
    background: radial-gradient(circle at top left, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at bottom left, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at top right, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at bottom right, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle, transparent 25%, #206424 26%), linear-gradient(45deg, transparent 46%, #155826 47%, #155826 52%, transparent 53%), linear-gradient(135deg, transparent 46%, #155826 47%, #155826 52%, transparent 53%);
    background-size: 6em 6em;
    background-color: #206424;
    opacity: 1;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

#noticias .titulo {
    color: white;
}

#noticias .titulo .underline {
    border-color: white;
}

.containerNoticias {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.card {
    width: 430px;
    height: auto;
    overflow: hidden;
    margin: 10px 0;
    transition: all 1s;
}

.card-body {
    overflow-y: hidden;
    z-index: 10;
    background-color: white;
}

.card-body button {
    width: 100%;
}

.card img {
    height: 300px;
    object-fit:cover;
    transition: all 1s;
}

.card h6 {
    line-height: normal;
}

.card img:hover {
    transform: scale(1.1);
}

/*NOTICIAS END*/

/*SECTION DIRECTIVA*/

#directiva {
    scroll-margin-top: 200px;
    padding: 45px 0;
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.cardDirectiva {
    width: 1300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    box-shadow:
    1.1px 0px 2.2px rgba(0, 0, 0, 0.02),
    2.7px 0px 5.3px rgba(0, 0, 0, 0.028),
    5.1px 0px 10px rgba(0, 0, 0, 0.035),
    9.2px 0px 17.9px rgba(0, 0, 0, 0.042),
    17.1px 0px 33.4px rgba(0, 0, 0, 0.05),
    41px 0px 80px rgba(0, 0, 0, 0.07)
    ;
    border-radius: 5px;
}

.contenedorTexto {
    width: 75%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 2;
    padding-left: 0 15px;
}

.contenedorFoto {
    width: 20%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fotoDirectiva {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nombre {
    font-size: 40px;
    font-weight: 500;
}

.cargo {
    font-size: 25px;
    font-style: italic;
}

/*DIRECTIVA END*/

/*SECTION HISTORIA DEL CLUB*/

#historiaClub {
    width: 100vw;
    height: auto;
    padding: 45px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 80px;
}

.historias {
    width: 80vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 150px;
}

.historia {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
    overflow: hidden;
}

.reversa {
    flex-direction: row-reverse;
}

.historia p {
    width: 50%;
    font-size: 20px;
    line-height: normal;
}

.historia img {
    width: 50%;
    height: 450px;
}

/*HISTORIA DEL CLUB END*/

/*SECTION CONTACTO*/

#contacto {
    width: 100%;
    height: auto;
    padding: 45px 0;
    background: radial-gradient(circle at top left, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at bottom left, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at top right, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle at bottom right, transparent 9%, #155826 10%, #155826 15%, transparent 16%), radial-gradient(circle, transparent 25%, #206424 26%), linear-gradient(45deg, transparent 46%, #155826 47%, #155826 52%, transparent 53%), linear-gradient(135deg, transparent 46%, #155826 47%, #155826 52%, transparent 53%);
    background-size: 6em 6em;
    background-color: #206424;
    opacity: 1;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

#contacto .titulo {
    color: white;
}

#contacto .titulo .underline {
    border-color: white;
}

.formulario{
    margin-top: 45px;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
}

form {
    width: 48%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    
}

form h5 {
    text-align: center;
    width: 80%;
    overflow: hidden;
}

form h2 {
    text-align: center;
}

label {
    width: 80%;
    text-align: left;
}

input {
    height: 40px;
    width: 80%;
    font-size: 20px;
    outline: 0;
    border: 0;
    border-bottom: 2px solid #155826;
}

textarea {
    width: 80%;
    font-size: 20px;
    outline: 0;
    border: 0;
    border-bottom: 2px solid #155826;
}

#enviar {
    width: 33%;
    background: white;
    border-radius: 20px;
    border: 2px solid #155826;
    transition: all .3s;
}

#enviar:hover {
    background: #155826;
    color: white;
}

/*CONTACTO END*/

/*SECTION PATROCINADORES*/

#patrocinadores{
    width: 100%;
    height: auto;
    padding: 5vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 5vh;
}

.containerPatrocinadores {
    width: 80vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.containerPatrocinadores img {
    height: 200px;
}

/*PATROCINADORES END*/

@media screen and (max-width : 1720px) {
    form {
        width: 70%;
    }

    .containerNoticias {
        gap: 30px;
    }
}

@media screen and (max-width : 1300px) {
    #directiva {
        padding: 10px;
    }

    .cardDirectiva {
        width: 100%;
    }

    .contenedorFoto {
        width: 260px;
    }
}

@media screen and (max-width : 1175px) {
    .containerNoticias {
        width: 95%;
    }

    .formulario{
        width: 90vw;
    }

    form {
        width: 90%;
    }

    .historias {
        gap: 50px;
    }

    .containerPatrocinadores{
        flex-wrap: wrap;
        gap: 10px;
    }

    .containerPatrocinadores img{
        min-width: 300px;
    }
}

@media screen and (max-width : 1000px) {
    .historia{
        flex-direction: column;
    }

    .historia p, .historia img{
        width: auto;
    }

    .historia p {
        font-size: 15px;
    }
}

@media screen and (max-width : 850px) {
    .banner {
        height: auto;
        padding: 50px 0;
    }

    .nombre {
        font-size: 25px;
    }

    .cargo {
        font-size: 17px;
    }

    .funciones {
        font-size: 14px;
    }

    .formulario{
        width: 90vw;
    }

    form {
        width: 100%;
    }
}

@media screen and (max-width : 551px) {
    #partidos h2 {
        font-size: 30px;
    }

    .containerNoticias{
        gap: 10px;
    }

    .cardDirectiva {
        width: 300px;
        padding: 20px 0;
        flex-direction: column;
    }

    .contenedorTexto {
        text-align: center;
        gap: 10px;
        padding: 0;
    }

    .funciones {
        text-align: justify;
    }

    .containerPatrocinadores{
        width: 95%;
        flex-direction: column;
    }

    .containerPatrocinadores img{
        max-width: 70vw;
    }

    .nombre {
        font-size: 30px;
    }

    .cargo {
        font-size: 20px;
    }
}