:root {
  --darkGreen: #233F24;
  --lightGreen: #BDDBBF;
  --purple: #661DA1;
  --chocolate: #542633;
  --orange: #FC6B38;
  --yellow: #F0E62D;
  --pink: #F66CE1;
  --blueMagenta: #B6B4FF;
  --melon: #F2BBAA;
  --brown: #8E6A2E;
}
.ctas_container {
	display: flex;
}
.cta_container {
    border: 2px solid #fff;
    cursor: pointer;
    width: 33.33%;
    overflow: hidden;
    position: relative;
}
.cta_title {
    height: 100%;
    backdrop-filter: brightness(0.5);
    align-content: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.cta_text {
    padding: 20px;
    color: var(--darkGreen);
    display: flex;
    flex-flow: column;
    align-items: center;
    background-size: cover;
    min-height: 500px;
    justify-content: center;
}
.cta_text .button {
    width: fit-content;
}
.cta_foreground {
    height: 100%;
    position: absolute !important;
    width: 100%;
    align-content: center;
    z-index: 1;
    background-size: cover;
}
.cta_foreground h2 {
    align-self: center;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 1;
    display: grid;
    text-transform: unset;
    color: #fff;
    position: relative;
    display: none;
}

#cta_2 .cta_text p {
    color: var(--darkGreen);
}
#cta_2 .cta_text .button {
    border-color: var(--darkGreen);
    color: var(--darkGreen);
}
#cta_2 .cta_text .button:hover {
    border-color: var(--orange);
    color: var(--orange);
}
#cta_1 .cta_text .button:hover,
#cta_3 .cta_text .button:hover {
    border-color: var(--orange);
    color: var(--orange);
}
#cta_1 .cta_text p,
#cta_3 .cta_text p  {
    color: var(--darkGreen);
}
.cta_foreground img {
    /* filter: brightness(50%); */
}
#cta_1 .cta_foreground {
    background-image: url('/wp-content/uploads/2023/11/Interiors_262-Large.jpg');
}
#cta_1 .cta_text {
    background-image: url('/wp-content/uploads/2025/09/Joia-Restaurant-hover.png');
}
#cta_2 .cta_foreground {
    /* background-image: url('/wp-content/uploads/2025/09/1024-1535-2.jpg'); */
    background-image: url('/wp-content/uploads/2025/09/@adashandasplashxJOIABatterseaBar-firstphotos-2-2.jpg');
}
#cta_2 .cta_text {
    /* background-image: url('/wp-content/uploads/2025/09/Perola-hover.png'); */
    background-image: url('/wp-content/uploads/2025/09/perola-minty-hover.png');
}
#cta_3 .cta_foreground {
    /* background-image: url('/wp-content/uploads/2025/04/JOIA-RebeccaHopePhotography-March2025-0736.jpg'); */
    background-image: url('/wp-content/uploads/2025/09/JOIA-Rooftop-scaled.jpg');

}
#cta_3 .cta_text {
    background-image: url('/wp-content/uploads/2025/09/Rooftop-hover.png');
}

.cta_container:hover .cta_foreground {
    animation: slideDown 0.5s forwards;
}
.cta_container .cta_foreground {
    animation: slideUp 0.5s forwards;
}

.subtitle {
    color: #fff;
    margin-top: 10px;
    /* font-size: 0.5em;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0; */
}

@media (max-width: 810px) {
    .ctas_container {
        flex-flow: column;
    }
    .cta_container {
        width: 100%;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(100%);
    }
}
@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

#module-new .second-column .button {
  color: var(--darkGreen);
  border-color: var(--darkGreen);
  background: white;
}
#module-new .second-column .button:hover {
  color: var(--melon);
  border-color: var(--melon);
}
@media (min-width: 811px) {
  #module-new {
    display: flex;
    background: url(https://joiabattersea.staging.tempurl.host/wp-content/uploads/2025/09/cocktail_bar_2x.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #module-new .second-column {
    position: relative;
    overflow: hidden;
    align-content: center;
    background: url(https://joiabattersea.staging.tempurl.host/wp-content/uploads/2025/09/Mask-Group-2.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: bottom right;
  }
  #module-new .second-column .txt-container,
  #module-new .second-column .flex-row-container {
    padding: 30px 100px 0px 100px;
  }
}
@media (max-width: 810px) {
  #module-new {
    display: flex;
    background: url(https://joiabattersea.staging.tempurl.host/wp-content/uploads/2025/09/cocktail_bar_2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    flex-flow: column;
  }
  #module-new .second-column {
    position: relative;
    overflow: hidden;
    align-content: center;
    background: url(https://joiabattersea.staging.tempurl.host/wp-content/uploads/2025/09/Mask-Group-2.png);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: bottom right;
  }
  #module-new .second-column .txt-container,
  #module-new .second-column .flex-row-container {
    padding: 20px 40px;
  }
}

.container:has(#module-new) {
    max-width: 100% !important;
}