.hide {
    display: none !important;
}

.attractions {
    /* height: 79rem; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    gap: 4rem;
    padding: 10rem 5rem;
    background-color: #CDF5FE;
    background-image: url("../img/assets/wave-pool.png"), url("../img/assets/palm-trees-cropped.png");
    background-repeat: no-repeat;
    background-size: 60%, 40%;
    background-position: left bottom, right bottom;
}

.attractions-head-container {
    width: 46.75rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.2rem;
}

.attractions .select-attractions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.attractions .select-attractions .attractions-head-container h1 {
    color: var(--primaryblue-10);
    font-family: "Frontspring Demo Chesna Grotesk Bold";
    font-size: 2.25rem;
}

.attractions-head-container h4 {
    font-family: "AG Book Rounded";
    color: var(--primaryblue-8);
    line-height: 2.1875rem;
}

.attractions .select-attractions .attractions-body-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 1rem;
}

.move-left, .move-right {
    display: flex;
    width: 3.125rem;
    height: 3.125rem;
    /* padding: 1.6875rem 2.25rem; */
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    background-color: var(--primaryblue-8);
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.move-left:hover, .move-right:hover {
    /* color: rgba(255, 255, 255, 0.5); */
    background-color: rgba(67, 138, 178, 0,5);
    transform: translateY(-0.4em);
    box-shadow: 0 8px 8px -4px rgb(67, 138, 178);
}

.move-left:active, .move-right:active {
    transform: scale(0.95);
}

.pool-attractions {
    width: 10.75rem;
    background-color: white;
    color: #F06900;
    padding: 0.5rem 0.0625rem;
    border-radius: 0.625rem;
    border: 3px solid var(--secondoryorange-6);
    cursor: pointer;
    transition: 0.3s;
    font-family: "AG Book Rounded";
    font-size: 1rem;
    line-height: 1.875rem;
}

.pool-attractions:hover {
    background-color: rgb(255, 153, 73);
    color: white;
}

.pool-attractions:active {
    transform: translateY(-0.4em);
    box-shadow: 0 4px 10px -2px var(--secondoryorange-4);
    transform: scale(0.95);
}

.selected-button-attractions {
    border: 3px solid var(--secondoryorange-6);
    background-color: #FF9949;
    color: white;
}

.attractions .attractions-details {
    height: 27rem;
    background-color: #FFF9F1;
    border-radius: 1.25rem;
    opacity: 0.95;
    padding: 3.75rem;
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.attractions-details .attractions-gallery {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 0.5rem;
}

/* ALL POOL GALLERY */
/* ANCESTOR */
.attractions-gallery .main-attractions {
    /* background-image: url("img/pool/wave-pool.jpeg"); */
    background-size: cover;
    background-position: center;    
    background-repeat: no-repeat;
    height: 19.875rem;
}

.colapse-attractions .small-attractions {
    /* background-image: url("img/pool/gallery.jpeg"); */
    width: 6.8125rem;
    height: 6.1875rem;
    background-size: cover;
    background-repeat: no-repeat;
}
/* END OF ANCESTOR */

/* kiddy pool */
.main-attractions-kiddy-pool {
    background-image: url("../img/pool/pool/kiddy-pool/kiddy-pool-1.jpg");
}

.small-attractions-kiddy-pool:nth-of-type(1) {
    background-image: url("../img/pool/pool/kiddy-pool/kiddy-pool-2.jpg");
}

.small-attractions-kiddy-pool:nth-of-type(2) {
    background-image: url("../img/pool/pool/kiddy-pool/kiddy-pool-3.jpg");
    background-position: bottom;
}

.small-attractions-kiddy-pool:nth-of-type(3) {
    background-image: url("../img/pool/pool/kiddy-pool/kiddy-pool-4.jpg");
    background-position: center;
}

.small-attractions-kiddy-pool:nth-of-type(4) {
    background-image: url("../img/pool/pool/kiddy-pool/kiddy-pool-5.jpg");
    background-position: bottom;
}
/* END OF KIDDY POOL */

/* BOM BLAZTER */
.main-attractions-bom-blazter {
    background-image: url("../img/pool/pool/bom-blazter/blazter-1.jpg");
}

.small-attractions-bom-blazter:nth-of-type(1) {
    background-image: url("../img/pool/pool/bom-blazter/blazter-2.jpg");
    background-position: center;
}

.small-attractions-bom-blazter:nth-of-type(2) {
    background-image: url("../img/pool/pool/bom-blazter/blazter-3.jpg");
    background-position: center;
}

.small-attractions-bom-blazter:nth-of-type(3) {
    background-image: url("../img/pool/pool/bom-blazter/blazter-4.jpg");
    background-position: center;
}

.small-attractions-bom-blazter:nth-of-type(4) {
    background-image: url("../img/pool/pool/bom-blazter/blazter-5.jpg");
    background-position: center;
}
/* END OF BOM BLAZTER */

/* BLUE TORNADO */
.main-attractions-blue-tornado {
    background-image: url("../img/pool/pool/blue-tornado/blue-tornado-2.jpg");
}

.small-attractions-blue-tornado:nth-of-type(1) {
    background-image: url("../img/pool/pool/blue-tornado/blue-tornado-1.jpg");
    background-position: center;
}

.small-attractions-blue-tornado:nth-of-type(2) {
    background-image: url("../img/pool/pool/blue-tornado/blue-tornado-3.jpg");
    background-position: center;
}

.small-attractions-blue-tornado:nth-of-type(3) {
    background-image: url("../img/pool/pool/blue-tornado/blue-tornado-4.jpg");
    background-position: center;
}

.small-attractions-blue-tornado:nth-of-type(4) {
    background-image: url("../img/pool/pool/blue-tornado/blue-tornado-5.jpg");
    background-position: center;
}
/* END OF BLUE TORNADO */

/* RED SPIRAL */
.main-attractions-red-spiral {
    background-image: url("../img/pool/pool/red-spiral/red-spiral-2.jpg");
    background-position: bottom;
}

.small-attractions-red-spiral:nth-of-type(1) {
    background-image: url("../img/pool/pool/red-spiral/red-spiral-1.jpg");
    background-position: center;
}

.small-attractions-red-spiral:nth-of-type(2) {
    background-image: url("../img/pool/pool/red-spiral/red-spiral-3.jpg");
    background-position: center;
}

.small-attractions-red-spiral:nth-of-type(3) {
    background-image: url("../img/pool/pool/red-spiral/red-spiral-4.jpg");
    background-position: center;
}

.small-attractions-red-spiral:nth-of-type(4) {
    background-image: url("../img/pool/pool/red-spiral/red-spiral-5.jpg");
    background-position: center;
}
/* END OF RED SPIRAL */

/* RACE SLIDE */
.main-attractions-race-slide {
    background-image: url("../img/pool/pool/race-slide/race-1.jpg");
}

.small-attractions-race-slide:nth-of-type(1) {
    background-image: url("../img/pool/pool/race-slide/race-2.jpg");
    background-position: bottom;
}

.small-attractions-race-slide:nth-of-type(2) {
    background-image: url("../img/pool/pool/race-slide/race-3.jpg");
    background-position: center;
}

.small-attractions-race-slide:nth-of-type(3) {
    background-image: url("../img/pool/pool/race-slide/race-4.jpg");
    background-position: bottom;
}

.small-attractions-race-slide:nth-of-type(4) {
    background-image: url("../img/pool/pool/race-slide/race-5.jpg");
    background-position: center;
}
/* END OF RACE SLIDE */

/* LAZY RIVER */
.main-attractions-lazy-river {
    background-image: url("../img/pool/pool/lazy-river/river-1.jpg");
}

.small-attractions-lazy-river:nth-of-type(1) {
    background-image: url("../img/pool/pool/lazy-river/river-2.jpg");
    background-position: bottom;
}

.small-attractions-lazy-river:nth-of-type(2) {
    background-image: url("../img/pool/pool/lazy-river/river-3.jpg");
    background-position: center;
}

.small-attractions-lazy-river:nth-of-type(3) {
    background-image: url("../img/pool/pool/lazy-river/river-4.jpg");
    background-position: bottom;
}

.small-attractions-lazy-river:nth-of-type(4) {
    background-image: url("../img/pool/pool/lazy-river/river-5.jpg");
    background-position: bottom;
}
/* END OF LAZY RIVER */

/* WAVE POOL */
.main-attractions-wave-pool {
    background-image: url("../img/pool/pool/wave-pool/wave-1.jpg");
}

.small-attractions-wave-pool:nth-of-type(1) {
    background-image: url("../img/pool/pool/wave-pool/wave-2.jpg");
    background-position: bottom;
}

.small-attractions-wave-pool:nth-of-type(2) {
    background-image: url("../img/pool/pool/wave-pool/wave-3.jpg");
    background-position: bottom;
}

.small-attractions-wave-pool:nth-of-type(3) {
    background-image: url("../img/pool/pool/wave-pool/wave-4.jpg");
    background-position: bottom;
}

.small-attractions-wave-pool:nth-of-type(4) {
    background-image: url("../img/pool/pool/wave-pool/wave-5.jpg");
    background-position: bottom;
}
/* END OF WAVE POOL */

/* END ALL POOL GALLERY */

.attractions-gallery .colapse-attractions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.attractions-details .pool-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
}

.pool-details .pool-details-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pool-details .pool-details-header h2 {
    font-family: "AG Book Rounded";
    font-size: 1.75rem;
    color: var(--primaryblue-10);
}

.pool-details .pool-details-header p {
    font-family: "Plus Jakarta Sans Bold";
    font-size: 1rem;
    font-weight: 700;
    color: var(--primaryblue-10);
}

.pool-details .pool-description p {
    font-family: "AG Book Rounded";
    font-size: 1rem;
    color: var(--primaryblue-10);
    line-height: 1.875rem;
}

.pool-details .requirement {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    font-family: "Plus Jakarta Sans";
    font-size: 1rem;
    color: var(--primaryblue-10);
}

#requirement-gap-3 {
    gap: 3rem;
}

.p-logo-container div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pool-details .requirement p.p-header {
    font-family: "Plus Jakarta Sans Bold";
    font-weight: 1000;
}

.pool-details-header .logo-header-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.logo-header-container .logo-header {
    background-image: url("../img/icons/age.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5625rem;
    height: 1.347rem;
}

.p-logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.p-logo-container .attractions-logo {
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.5625rem;
    height: 2.41225rem;
}

.pool-icon {
    background-image: url("../img/icons/pool.png");
}

.weight-icon {
    background-image: url("../img/icons/weight.png");
}

.height-icon {
    background-image: url("../img/icons/height.png");
}

/* SELECT MENU */
.mobile-attractions-body-container {
    display:flex;
    justify-content: center;
    align-items:center;
    flex-wrap:wrap;
    padding:0;
    margin:0;
    height:auto;
    width:100vw;
    font-family: "AG Book Rounded";
    color:#FFF;
}

.select {
    display:flex;
    flex-direction: column;
    position:relative;
    width:250px;
    height:40px;
    cursor: pointer;
    border-radius: 2.625rem;
}

.option {
    padding:0 30px 0 10px;
    min-height:40px;
    display:flex;
    align-items:center;
    background: var(--Secondary-Orange, #FF9949);
    border-top: var(--Secondary-Orange, #FF9949) solid 1px;
    position:absolute;
    top:0;
    width: 100%;
    pointer-events:none;
    order:2;
    z-index:1;
    transition: background .4s ease-in-out;
    box-sizing:border-box;
    overflow:hidden;
    white-space:nowrap;
    cursor: pointer;
    /* border-radius: 0.625rem; */
}

.option:hover {
    background:var(--Secondary-Orange, rgb(255, 153, 73));
    /* background-color: rgba(255, 153, 73, 0.5); */
}

.select:focus .option {
    position:relative;
    pointer-events:all;
}

input {
    opacity:0;
    position:absolute;
    left:-99999px;
}

input:checked + label {
    order: 1;
    z-index:2;
    background: var(--Secondary-Orange, #FF9949);;
    border-top:none;
    position:relative;
}

input:checked + label:after {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    position:absolute;
    right:10px;
    top:calc(50% - 2.5px);
    pointer-events:none;
    z-index:3;
}

input:checked + label:before {
    position:absolute;
    right:0;
    height: 40px;
    width: 40px;
    content: '';
    background: var(--Secondary-Orange, #FF9949);
}


/* END OF SELECT MENU */

/* RESPONSIVE ATTRACTIONS RIDES */
.mobile-attractions-body-container {
    display: none;
}

@media (max-width: 500px) { 
    .mobile-attractions-body-container {
        display: flex;
    }
    
    .attractions {
        background-image: none;
        padding: 3rem;
        align-items: center;
    }

    .attractions-head-container h1 {
        font-size: 1.25rem !important;
    }

    .attractions-head-container h4 {
        font-size: 1rem !important;
        line-height: normal;
        letter-spacing: 0.05rem;
    }

    .attractions {
        /* width: 90% !important; */
        align-items: center;
    }

    .attractions-head-container {
        width: 100% !important;
    }

    .select-attractions {
        width: 80%;
    }

    .attractions-body-container {
        display: none !important;
    }

    .attractions-details {
        height: auto !important;
        width: 80%;
        flex-direction: column !important;
        align-items: center;
        gap: 0 !important;
        padding: 3.75rem 2rem 0 !important;
    }

    .main-attractions {
        width: 100% !important;
        height: 13rem !important;
    }

    .small-attractions {
        height: 2.5rem !important;
    }

    .attractions-gallery {
        width: 100% !important;
    }

    .pool-details {
        width: 100%;
        padding: 3rem;
    }

    .requirement {
        align-items: flex-start;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .pool-details-header {
        text-align: center !important;
    }

    .pool-details-header h2 {
        font-size: 1.25rem !important;
    }

    .pool-description {
        text-align: center;
    }

    .pool-description p {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }

    .logo-header-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-header-container p {
        font-size: 0.625rem !important;
    }

    .attractions-logo {
        /* width: 1.5rem !important; */
        height: 2rem !important;
    }

    .p-logo-container p {
        font-size: 0.625rem;
    }
}

/* END RESPONSIVE ATTRACTIONS RIDES */