.fan-club-header{
    padding:100px;
    height:80vh;
    background-image: url("../../images/fond-fan-club.png");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    & .fan-club-header-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        & p{
            margin:2px 0;
            padding:0;
        }
    }
}

.cta-container{
    margin:30px 0;
    display:flex;
    gap:30px;
}

.phoenix-cta a{
        font-family:'Rambla';
        font-weight:400;
        font-size:0.9rem;
        color:var(--white);
        border:1px solid var(--white);
        padding: 15px 30px;
        margin:15px 0 0 0;
        transition: all 0.3s ease;
        border-radius:0;
        background-color:transparent;
        &:hover{
            background-color:var(--white);
            border:1px solid var(--black);
            color:var(--black);
            transition: all 0.3s ease;
        }
}

.fan-club-avantages{
    width:65%;
    margin:50px auto !important;
    flex-grow: unset !important;
    flex-basis: unset !important;
    & h2{
        font-size:2.5rem !important;
    }
    & p{
        padding: 5px 0 !important;
    }
    & .fan-club-accordion{
        margin:70px 0 20px 0;
        & .eb-accordion-title-prefix-icon{
            font-size:25px !important;
            height:25px !important;
            width:25px !important;
        }
    }
}


.fan-club-communaute{
    padding:100px;
    background-image: url("../../images/fond-fan-club-02.png");
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    & .fan-club-header-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        & p{
            margin:2px 0;
            padding:0;
            width:70%;
            margin:0 auto;
        }
    }
}

.fan-club-rejoindre{
    padding:100px;
    background-image: url("../../images/fond-fan-club-03.png");
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    & .fan-club-header-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        & p{
            margin:2px 0;
            padding:0;
            width:70%;
            margin:0 auto;
        }
    }
}

.fan-club-photos{
    width:65%;
    margin:30px auto  80px auto!important;
    flex-grow: unset !important;
    flex-basis: unset !important;
    & h2{
        margin:0;
        padding:0 0 50px 0;
        font-size:2.5rem !important;
    }
}

.wp-block-gutsliders-photo-carousel .swiper-container-outer{
    height:auto;
    & img{
        aspect-ratio: 1/1;
        object-fit: contain;
    }
}


/* ---------------------------------------
--------------- responsive ---------------
--------------------------------------- */
@media screen and (max-width:1024px){
    .fan-club-header h1 {
        font-size: 50px;
        text-align: left;
    }

    .fan-club-header{
        padding:70px 100px;
        height:100%;
        & .fan-club-header-content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            & p{
                margin:2px 0;
                padding:0;
                text-align:left;
            }
        }
    }

    .cta-container{
        gap:10px;
        justify-content: flex-start !important;
    }

    .fan-club-avantages{
        margin: 20px 100px !important;
        width:100%;
        & h2{
        font-size:2rem !important;
        text-align:left;
        }
        & p{
            padding: 5px 0 !important;
        }
        & .fan-club-accordion{
            margin:50px 0 0px 0;
        }
    }   

    .fan-club-communaute, .fan-club-rejoindre{
        padding:70px 100px;
        & .fan-club-header-content{
        justify-content: start;
        & p{
            width:100%;
            margin:0;
            text-align: left;
        }
        & h2{
            text-align: left;
            font-size:2rem !important;
        }
    }
}

    .fan-club-photos{
        width:100%;
        margin:20px 100px !important;
        & h2{
            padding:0 0 30px 0;
            font-size:2rem !important;
        }
    }


}

@media screen and (max-width:781px){
    .fan-club-header{
        padding:50px;
    }

    .fan-club-avantages{
        margin:20px 50px !important;
        & h2{
        font-size:1.6rem !important;
        width:85%;
        text-align: left;
        }
        & p{
            padding: 5px 0 !important;
        }
        & .fan-club-accordion{
        & .eb-accordion-title-prefix-icon{
            font-size:20px !important;
            height:20px !important;
            width:20px !important;
        }
    }
    }   

    .phoenix-cta a{
        font-size:0.8rem;
        padding: 12px 25px;
        margin:0;
}

    .fan-club-communaute, .fan-club-rejoindre{
        padding:50px;
        & .fan-club-header-content{
        & p{
            font-size:0.8rem;
            text-transform: none;
        }
        & h2{
            font-size:1.6rem !important;
        }
    }
}

    .fan-club-photos{
        margin:50px !important;
        & h2{
            padding:0 0 30px 0;
            font-size:1.6rem !important;
        }
    }
}

@media screen and (max-width:768px){
    .fan-club-header h1 {
        font-size: 40px;
        margin: 110px 0 0px 0;
  }
  .fan-club-header, .fan-club-communaute, .fan-club-rejoindre{
    background-attachment: scroll;
  }
}

@media screen and (max-width:576px){
    .fan-club-header h1 {
        font-size: 35px;
        line-height:1;
        margin: 90px 0 20px 0;
  }

      .fan-club-header{
        padding:30px;
    }

    .fan-club-avantages{
        margin:10px 30px !important;
        & h2{
        font-size:1.2rem !important;
        width:100%;
        }
        & p{
            padding: 5px 0 !important;
        }
    }   

    .fan-club-communaute, .fan-club-rejoindre{
        padding:30px;
        & .fan-club-header-content{
        & h2{
            font-size:1.2rem !important;
        }
    }
}

    .fan-club-photos{
        margin:30px !important;
        & h2{
            padding:0 0 30px 0;
            font-size:1.2rem !important;
        }
    }
}