.clubs-landing {
    width: 80%;
    margin: auto;
    padding-top: 4rem;
}

.clubs-head {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 5rem;
}

.clubs-head-photo {
    width: 14rem;
    margin-right: 4rem;
}

.clubs-head-right {
    display: flex;
    flex-direction: column;
}

.clubs-head-right > i {
    font-size: 3rem;
    color: #D0D0D0;
}

.clubs-head-right p {
    font-size: 1.05rem;
    color: #222;
}

.clubs-head-quote1 {
    margin-bottom: 0.5rem;
}

.clubs-head-quote2 {
    transform: rotateZ(180deg);
    margin-right: 3rem;
    justify-self: flex-end;
}

/* Club card */
.clubs-cardsouter {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: auto;
}
.clubs-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.club-card {
    width: 15rem;
    box-shadow: 0.710191px 1.42038px 2.84076px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    /* margin: 2rem 0rem; */
}

.clubcard-top {
    background-size: cover;
    background-position: center;
    height: 8rem;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clubcard-logo {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    position: absolute;
    top: 3.5rem;
}

.clubcard-bottom {
    padding: 2rem 1rem 0rem 1rem;
}

.clubcard-title {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #262626;
    font-size: 1.1rem;
    font-weight: 600;
}

.clubcard-subTitle {
    text-align: center;
    margin-bottom: 0.7rem;
    color: #262626;
    font-size: 1rem;
    font-weight: 500;
}

.clubcard-text {
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.clubcard-more {
    background-color: #F2F2F2;
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #0046B2;
    font-weight: 600;
}

/* Card flip */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    width: 15rem;
    border-radius: 4px;
    margin: 2rem 1rem;
    /* height: fit-content; */
    min-height: 20rem;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
  
  .flip-card-back {
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
    border-radius: 4px;
}

.clubcard-backinner {
    background-color: rgba(0, 0, 0, 0.53);
    width: 100%;
    height: 100%;
    /* position: relative; */
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    justify-content: space-between;
  }

  .clubcard-logoback {
      width: 5rem;
      height: 5rem;
    border-radius: 50%;
    border: 2px solid rgba(244, 201, 0, 0.8); 
    position: absolute;
    top: -1.5rem;
    left: -1.5rem;
}

.clubcard-titleback {
    text-align: center;
    margin-left: 2rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

.clubcard-subTitleback {
    margin-left: 2rem;
    text-align: center;
    margin-bottom: 0.8rem;
    color: #F4C900;
    font-size: 1rem;
    font-weight: 500;
}

.clubcardback-line1 {
    height: 2px;
    background-color: rgba(244, 201, 0, 0.8);;
    width: 70%;
}

.clubcardback-line2 {
    height: 2px;
    background-color: rgba(244, 201, 0, 0.8);;
    width: 70%;
    align-self: flex-end;
}

.clubcardback-text {
    font-size: 0.9rem;
    color: #FFF;
    margin: 1rem;
}

.clubscardback-bottom {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.clubcard-open {
    margin-bottom: 1rem;
    padding: 0.4rem 1.2rem;
    outline: none;
    border: none;
    background-color: #EEE;
    border-radius: 8px;
    color: #111;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.clubcard-open:hover {
    transform: scale(1.02);
    color: #333;
    background-color: #DDD;
}

/* CLubs modal Phone */
.clubModalPhone {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #000000AA;
    z-index: 999999999999;
    display: none;
    justify-content: center;
    align-items: center;
}

.clubModalPhone-inner {
    width: 85%;
    height: 85%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clubcardMobile-top {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 1.5rem 1rem 0 1rem;
}

.clubcardMobile-logo {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
}

.clubcard-titlePhone {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #083479;
    font-size: 1rem;
    font-weight: 600;
}

.clubcard-subTitlePhone {
    text-align: center;
    margin-bottom: 0.7rem;
    color: #2e2e2e;
    font-size: 0.9rem;
    font-weight: 500;
}

.clubcardMobileText {
    font-size: 0.85rem;
    color: #222;
    margin-bottom: 0.7rem;
}

.clubcardMobile-content {
    padding: 0 1rem 0 1rem;
}

.clubcardMobile-topOuter {
    overflow-y: scroll;
}

.clubcardMobile-bottom {
    background-color: #eaf7ff;
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-size: 1rem;
    color: #0046B2;
    font-weight: 600;
}

.clubcardMobile-peopleTop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-top: 0.4rem; */
    padding-bottom: 0.5rem;
    border-top: 0.4px solid rgb(212, 212, 212);
}

.clubcardMobile-peopleTop img {
    width: 5rem;
    height: 5rem;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    border-radius: 50%;
}

.clubcardMobile-peopleTop h4 {
    font-weight: 500;
    font-size: 0.9rem;
}

.clubcardMobile-people h5 {
    margin-top: 0.5rem;
    margin-left: 1rem;
    color: #555;
}

.clubcardMobile-peopleBottom {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.4rem;
}

.clubcardMobile-peopleBottomItem {
    flex: 1;
    margin: 0 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.clubcardMobile-peopleBottomItem img {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.2rem;
}

.clubcardMobile-peopleBottom h4 {
    font-size: 0.8rem;
    font-weight: 500;
}

.clubcardMobile-aimDiv, .clubcardMobile-impDiv, .clubcardMobile-activityDiv {
    border-top: 0.4px solid rgb(212, 212, 212);
    margin-top: 0.5rem;
    padding-top: 0.8rem
}

.clubcardMobile-aimHeading, .clubcardMobile-impHeading, .clubcardMobile-activityHeading {
    margin-left: 1rem;
    font-size: 0.9rem;
    color: #083479;   
}

.clubcardMobile-aimList, .clubcardMobile-impList, .clubcardMobile-activityList {
    margin-left: 1rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: #444;
    margin-bottom: 1rem;
}

/* Club Modal */

.clubModal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #000000bb;
    z-index: 999999999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

#modal-hint {
    margin-top: 1rem;
    color: #FFF;
    font-size: 0.9rem;
    background-color: rgba(255, 255, 255, 0.144);
    padding: 0.3rem 1rem;
    border-radius: 5rem;
}

.clubModal-inner {
    width: 85%;
    height: 85%;
}

.swiper {
    width: 100%;
    height: 100%;
  }

.swiper-button-next, .swiper-button-prev {
    color: #FFF !important;
}

.swiper-pagination {
    color: #000000 !important;
}

.swiper-slide img {
    width: 85% !important;
    height: auto !important; 
    /* width: auto !important;
    height: 100% !important;  */
}

  .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .clubs-head-right > h3 {
      margin-top: 1rem;
      font-size: 1.1rem;
      color: rgb(44, 44, 44);
  }

  .clubs-head-right > h5 {
      margin-top: 0.2rem;
      font-size: 1rem;
      color: rgb(44, 44, 44);
  }


  /* Media queries */

  @media only screen and (max-width: 1366px) {
    .clubModal-inner {
        width: 90%;
        height: 90%;
    }
  }

  @media only screen and (max-width: 1000px) {
    .clubModal-inner {
        width: 95%;
        height: 95%;
    }
    .swiper-slide img {
        width: 90% !important;
    }
  }

  @media only screen and (max-width: 800px) {
    .clubs-head {
        flex-direction: column;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .clubs-head-photo {
        width: 14rem;
        margin-right: 1rem;
        margin-bottom: 2rem;
    }

    .clubs-cards {
        justify-content: center;
    }

    .flip-card:hover .flip-card-inner {
        transform: rotateY(0deg);
      }
  }