/*-- SECTION 1 --*/

h1 {
    margin: 0;
    padding: 0;
    font-family: 'Yuji Syuku', serif;
}

/* These are the colors for the header "After School STEM Clubs */
.blue {
    color: rgb(36, 139, 224);
}

.purple {
    color: rgb(214, 122, 214);
}

.yellow {
    color: rgb(240, 160, 160);
}

.green {
    color: rgb(133, 221, 111);
}

.green {
    color: rgb(133, 221, 111);
}

h2 {
    margin-bottom: 0;
}


/*-- Section 2 --*/

.section-club-acts {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}


/*-- Section 3 --*/
/*-- Check swiper-carousels.css for rest of the css --*/

.stem-clubs-gallery-div {
    width: 100%;
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 15px;
}

/*-- Media --*/

@media (max-width:750px) {
    .stem-clubs-gallery-div {
        width: 100%;
    }
}


/* -- Section 3 - some CSS in club-package.css file --*/

.section-our-sc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 5px;
}

.section-our-sc h2 {
    margin-bottom: 25px;
    margin-top: 0;
}

.club-package:nth-child(1n) {
    background-color: rgb(122, 165, 245);
}

.club-package:nth-child(2n) {
    background-color: rgb(235, 172, 235);
}

.club-package:nth-child(3n) {
    background-color: rgb(240, 160, 160);
}

.club-package:nth-child(4n) {
    background-color: rgb(162, 236, 143);
}

.club-package:nth-child(5n) {
    background-color: rgb(238, 231, 211);
}

.club-package:nth-child(6n) {
    background-color: rgb(103, 207, 181);
}

/*-- This makes sure the button stays at the same height from bottom --*/

.book-now-btn,
.book-now-btn:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.book-now-btn:hover {
    background-color: rgb(238, 231, 231);
}

.faded-btn,
.faded-btn:hover {
    cursor: default;
    background-color: rgb(95, 93, 93);
    color: rgb(197, 189, 189);
}


/* -- Section 1 - Media -- */

@media (max-width:750px) {

    .section-our-sc .para-std-w {
        width: 100%;
    }

    .section-our-sc {
        /* Only centres the content when there is 2 items in each row*/
        justify-content: center;
    }
}