/* URL: --DOMAIN--/wp-content/themes/bambooNine/styleGuide/styles.html */

/* Mango Grotesque Font */
@import url("../../fonts/mangoGrotesque/mangoGrotesque.css");

/* Switzer Font */
@import url("../../fonts/switzer/switzer.css");

/* CoveredByYourGrace Font */
@import url("../../fonts/CoveredByYourGrace/CoveredByYourGrace.css");

:root {
    /* Primary colours */
    --enigmaYellow: #DDB425; /* rgb(221, 180, 37) */
    --enigmaBlack: #1B1B1A; /* rgb(27, 27, 26) */
    --enigmaGreen: #34423A; /* rgb(52, 66, 58) */
    --enigmaGreenLight: #35BA83; /* rgb(53, 186, 131) */
    --enigmaRadiation: #00BD7E; /* RGB (0, 189, 126 */
    --enigmaToxic: #043A30; /* RGB (4, 58, 48) */
    --enigmaInk: #242350; /* RGB (36, 35, 80) */
    --enigmaXenon: #807AFF; /* RGB (128, 122, 255) */   
    --enigmaWhite: #FFFFFF; /* rgb(255, 255, 255) */

    /* Secondary colours */
    --enigmaCorporate: #2E313B; /* rgb(46, 49, 59) */
    --enigmaDarkGrey: #282827; /* rgb(40, 40, 39) */
    --enigmaGrey: #3C414D; /* rgb(60, 65, 77) */
    --enigmaLightGrey: #4F5353; /* rgb(79, 83, 83) */

    /* Tints */
    --enigmaYellow20: #DDB42533; /* 20% opacity */ /* rgba(221, 180, 37, 0.2) */
    --enigmaYellow40: #DDB42566; /* 40% opacity */ /* rgba(221, 180, 37, 0.4) */
    --enigmaYellow60: #DDB42599; /* 60% opacity */ /* rgba(221, 180, 37, 0.6) */
    --enigmaYellow80: #DDB425CC; /* 80% opacity */ /* rgba(221, 180, 37, 0.8) */

    --enigmaBlack20: #1B1B1A33; /* 20% opacity */ /* rgba(27, 27, 26, 0.2) */
    --enigmaBlack40: #1B1B1A66; /* 40% opacity */ /* rgba(27, 27, 26, 0.4) */
    --enigmaBlack60: #1B1B1A99; /* 60% opacity */ /* rgba(27, 27, 26, 0.6) */
    --enigmaBlack80: #1B1B1ACC; /* 80% opacity */ /* rgba(27, 27, 26, 0.8) */

    --enigmaGreen20: #34423A33; /* 20% opacity */ /* rgba(52, 66, 58, 0.2) */
    --enigmaGreen40: #34423A66; /* 40% opacity */ /* rgba(52, 66, 58, 0.4) */
    --enigmaGreen60: #34423A99; /* 60% opacity */ /* rgba(52, 66, 58, 0.6) */
    --enigmaGreen80: #34423ACC; /* 80% opacity */ /* rgba(52, 66, 58, 0.8) */

    --enigmaGreenLight20: #35BA8333; /* 20% opacity */ /* rgb(53, 186, 131, 0.2) */
    --enigmaGreenLight40: #35BA8366; /* 40% opacity */ /* rgb(53, 186, 131, 0.4) */
    --enigmaGreenLight60: #35BA8399; /* 60% opacity */ /* rgb(53, 186, 131, 0.6) */
    --enigmaGreenLight80: #35BA83CC; /* 80% opacity */ /* rgb(53, 186, 131, 0.8) */

    --enigmaWhite20: #FFFFFF33; /* 20% opacity */ /* rgba(255, 255, 255, 0.2) */
    --enigmaWhite40: #FFFFFF66; /* 40% opacity */ /* rgba(255, 255, 255, 0.4) */
    --enigmaWhite60: #FFFFFF99; /* 60% opacity */ /* rgba(255, 255, 255, 0.6) */
    --enigmaWhite80: #FFFFFFCC; /* 80% opacity */ /* rgba(255, 255, 255, 0.8) */

    --enigmaCorporate20: #2E313B33; /* 20% opacity */ /* rgba(46, 49, 59, 0.2) */
    --enigmaCorporate40: #2E313B66; /* 40% opacity */ /* rgba(46, 49, 59, 0.4) */
    --enigmaCorporate60: #2E313B99; /* 60% opacity */ /* rgba(46, 49, 59, 0.6) */
    --enigmaCorporate80: #2E313BCC; /* 80% opacity */ /* rgba(46, 49, 59, 0.8) */

    --enigmaLightGrey20: #4F535333; /* 20% opacity */ /* rgb(79, 83, 83, 0.2) */
    --enigmaLightGrey40: #4F535366; /* 40% opacity */ /* rgb(79, 83, 83, 0.4) */
    --enigmaLightGrey60: #4F535399; /* 60% opacity */ /* rgb(79, 83, 83, 0.6) */
    --enigmaLightGrey80: #4F5353CC; /* 80% opacity */ /* rgb(79, 83, 83, 0.8) */

    --enigmaGrey20: #3C414D33; /* 20% opacity */ /* rgb(60, 65, 77, 0.2) */
    --enigmaGrey40: #3C414D66; /* 40% opacity */ /* rgb(60, 65, 77, 0.4) */
    --enigmaGrey60: #3C414D99; /* 60% opacity */ /* rgb(60, 65, 77, 0.6) */
    --enigmaGrey80: #3C414DCC; /* 80% opacity */ /* rgb(60, 65, 77, 0.8) */

    --enigmaDarkGrey20: #28282733; /* 20% opacity */ /* rgb(40, 40, 39, 0.2) */
    --enigmaDarkGrey40: #28282766; /* 40% opacity */ /* rgb(40, 40, 39, 0.4) */
    --enigmaDarkGrey60: #28282799; /* 60% opacity */ /* rgb(40, 40, 39, 0.6) */
    --enigmaDarkGrey80: #282827CC; /* 80% opacity */ /* rgb(40, 40, 39, 0.8) */

    /* enigmaRadiation */
    --enigmaRadiation20: #00BD7E33; /* 20% opacity */
    --enigmaRadiation40: #00BD7E66; /* 40% opacity */
    --enigmaRadiation60: #00BD7E99; /* 60% opacity */
    --enigmaRadiation80: #00BD7ECC; /* 80% opacity */

    /* enigmaToxic */
    --enigmaToxic20: #043A3033; /* 20% opacity */
    --enigmaToxic40: #043A3066; /* 40% opacity */
    --enigmaToxic60: #043A3099; /* 60% opacity */
    --enigmaToxic80: #043A30CC; /* 80% opacity */

    /* enigmaInk */
    --enigmaInk20: #24235033; /* 20% opacity */
    --enigmaInk40: #24235066; /* 40% opacity */
    --enigmaInk60: #24235099; /* 60% opacity */
    --enigmaInk80: #242350CC; /* 80% opacity */

    /* enigmaXenon */
    --enigmaXenon20: #807AFF33; /* 20% opacity */
    --enigmaXenon40: #807AFF66; /* 40% opacity */
    --enigmaXenon60: #807AFF99; /* 60% opacity */
    --enigmaXenon80: #807AFFCC; /* 80% opacity */


    /* Font weights */
    --extraBold: 800;
    --bold: 700;
    --semiBold: 600;
    --regular: 400;
    --light: 300;
    --extraLight: 200;

    /* Font familys */
    --mangoGrotesqueExtraBold: 'MangoGrotesqueExtraBold', sans-serif;
    --mangoGrotesqueBold: 'MangoGrotesqueBold', sans-serif;
    --mangoGrotesqueSemiBold: 'MangoGrotesqueSemiBold', sans-serif;
    --mangoGrotesqueMedium: 'MangoGrotesqueMedium', sans-serif;
    --switzerBold: 'Switzer-Bold', sans-serif;
    --switzer: 'Switzer-Regular', sans-serif;

    /* Spacing */
    --containerSpacing: 110px;
    --contentSpacing: 10px;

    --headerBannerHeight : calc( 100vh - 50px );
}

.large {
    font-family: var(--mangoGrotesqueExtraBold);
    font-size: 160px;
    line-height: 133px;
}

.medium {
    font-family: var(--mangoGrotesqueExtraBold);
    font-size: 140px;
    line-height: 116px;
}
.medium.subheading {
    font-family: var(--mangoGrotesqueExtraBold);
    font-size: 100px;
    line-height: 133px;
    text-transform: uppercase;
}

.tiny {
    font-family: var(--switzerBold);
    font-size: 14px;
    line-height: normal;
    margin-bottom: var(--contentSpacing);
}

h1, .h1 {
    font-family: var(--mangoGrotesqueBold);
    font-size: 64px;
    line-height: normal;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

h2, .h2 {
    font-family: var(--mangoGrotesqueBold);
    font-size: 45px;
    line-height: normal;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

h3, .h3 {
    font-family: var(--mangoGrotesqueSemiBold);
    font-size: 32px;
    line-height: normal;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

h4, .h4 {
    font-family: var(--switzer);
    font-size: 23px;
    line-height: normal;
    margin-bottom: 15px;
}

h5, .h5 {
    font-family: var(--switzer);
    font-size: 22px;
    line-height: normal;
    margin-bottom: 10px;
}

h6, .h6 {
    font-family: var(--switzer);
    font-size: 20px;
    line-height: normal;
    margin-bottom: 10px;
}

p, li, span, textarea, input, .paragraph {
    font-family: var(--switzer);
    font-size: 16px;
    line-height: normal;
    margin-bottom: var(--contentSpacing);
}  

strong {
    font-family: var(--switzerBold);
    font-size: 16px;
    line-height: normal;
    margin-bottom: var(--contentSpacing);
}

a {
    font-family: var(--switzer);
    font-size: 16px;
    line-height: normal;
    margin-bottom: var(--contentSpacing);
    color: var(--enigmaYellow);
    text-decoration: underline;
}

a:hover {
    color: var(--enigmaWhite80);
}

/* Superscript & Subscript - for trademark symbols and other inline formatting */
sup, sub {
    font-size: 0.6em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.45em;
}

sub {
    bottom: -0.25em;
}

/* Superscript in headings - Manual positioning for trademark symbols (™, ®, ©) */
h1 sup, .h1 sup,
.heading.giant sup,
.heading.large sup {
    font-size: 0.4em;
    top: -1.05em;
    /* Adjust positioning if needed for your specific font */
    /* margin-left: 2px; */
}

h2 sup, .h2 sup,
.heading.medium sup {
    font-size: 0.45em;
    top: -0.85em;
}

h3 sup, .h3 sup,
.heading.small sup {
    font-size: 0.5em;
    top: -0.8em;
}

h4 sup, .h4 sup,
h5 sup, .h5 sup,
h6 sup, .h6 sup {
    font-size: 0.55em;
    top: -0.65em;
}

/* Optional: Use a different font for sup tags if the main font doesn't support symbols well */
/* Uncomment and adjust if needed */
/* 
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup,
.heading sup {
    font-family: Arial, sans-serif;
    font-weight: normal;
}
*/

ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: var(--contentSpacing);
}

ol {
    list-style-type: decimal;
    padding-left: 20px;
    margin-bottom: var(--contentSpacing);
}

/* section {
    position: relative;
    min-width: 1920px;
} */

.full-container {
    width: 100%;
    position: relative;
    z-index: 1;
}

.small-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 24px;
}

.tiny-container {
    width: 800px;
    margin: auto;
}

button, .button.outline, a.button.filled {
    background-color: var(--enigmaWhite);
    border: 1px solid var(--enigmaYellow);
    border-radius: 20px;
    color: var(--enigmaYellow);
    display: inline-block;
    font-size: 16px;
    font-family: 'Switzer-Regular';
    font-weight: bold;
    text-decoration: none;
    padding: 8px 28px;
    width: auto;
    height: auto;
    cursor: pointer;
    transition: all 0.35s ease-in-out;
    text-wrap: nowrap;
    position: relative;
    z-index: 12;
}

button:hover, .button.outline:hover, a.button.filled:hover {
    background-color: var(--enigmaYellow);
    color: var(--enigmaWhite);
}

.button.outline {
    background-color: transparent;
}

div.cta-button.button.outline {
    background: unset;
    border: unset;
    padding: unset;
}

.cta-book, .cta-fom, .cta-cu, .cta-ol, .cta-git, .cta-lm, .cta-alau, .cta-md, .cta-vm, .cta-dm, .cta-call {
    /* font-family: var(--switzer); */
    border-radius: 2px;
    background-color: transparent;
    color: var(--enigmaYellow);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    line-height: normal;
    margin-bottom: var(--contentSpacing);
    position: relative;
    z-index: 10;
}

.cta-book::after, .cta-fom::after, .cta-cu::after, .cta-ol::after, .cta-git::after, .cta-lm::after, .cta-alau::after, .cta-md::after, .cta-vm::after, .cta-dm::after, .cta-call::after {
    content: "";
    position: absolute;
    display: block;
    top: calc(50% - 5px);
    width: 20px;
    height: 20px;
    background: url('../../assets/arrow-right-yellow.svg') no-repeat center;
    background-size: 100%;
    transition: width 0.5s ease-in-out;
}
.cta-book::after {
    right: 85px;
}
.cta-fom::after {
    right: 45px;
}
.cta-cu::after {
    right: 70px;
}
.cta-ol::after {
    right: 40px;
}
.cta-git::after,
.cta-md::after {
    right: 60px;
}
.cta-lm::after {
    right: 70px;
}
.cta-alau::after {
    right: 40px;
}
.cta-vm::after {
    right: 75px;  /* Similar to Learn More (70px) but slightly adjusted */
}
.cta-dm::after {
    right: 35px;  /* Similar to A Lot About Us (40px) but slightly adjusted */
}
.cta-call::after {
    right: 100px;
}

.cta-book path, .cta-fom path, .cta-cu path, .cta-ol path, .cta-git path, .cta-lm path, .cta-alau path, .cta-md path, .cta-vm path, .cta-dm path, .cta-call path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke: var(--enigmaYellow);
    transition: stroke 1000ms ease-in-out 400ms;
    animation: dash-from 550ms ease-in-out forwards;
    stroke-width: 4;
    transform-origin: 0 52%;
}

.cta-book path {
    scale: 0.69 0.68;
}

.cta-fom path {
    scale: 0.88 0.67;
}

.cta-cu path {
    scale: 0.75 0.7;
}

.cta-ol path {
    scale: 0.9 0.7;
}

.cta-git path,
.cta-md path {
    scale: 0.81 0.7;
}
.cta-lm path {
    scale: 0.78 0.65;
}
.cta-alau path {
    scale: 0.89 0.7;
}
.cta-vm path {
    scale: 0.76 0.68;
}
.cta-dm path {
    scale: 0.93 0.72;  /* Similar to A Lot About Us but adjusted for "Download Menu" width */
}
.cta-call path {
    scale: 0.67 0.68;
}

.cta-book:hover svg path, .cta-fom:hover svg path, .cta-cu:hover svg path, .cta-ol:hover svg path, .cta-git:hover svg path, .cta-lm:hover svg path, .cta-alau:hover svg path, .cta-md:hover svg path, .cta-vm:hover svg path, .cta-dm:hover svg path, .cta-call:hover svg path {
    stroke: var(--enigmaYellow);
    stroke-dashoffset: 100;
    transition: stroke 400ms;
    animation: dash-to 350ms ease-in-out forwards;
}

.cta-book text, .cta-fom text, .cta-cu text, .cta-ol text, .cta-git text, .cta-lm text, .cta-alau text, .cta-md text, .cta-vm text, .cta-dm text, .cta-call text {
    font-size: 34px;
    font-family: var(--mangoGrotesqueBold);
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--enigmaYellow);
}

@keyframes dash-to {
    to {
        stroke-dashoffset: 0;
    }
}

/* Call Us — mobile/desktop swap */
.cta-call-mobile {
    display: grid;
    justify-content: center;
}
.cta-call-desktop {
    display: none;
}

@media only screen and (min-width: 769px) {
    .cta-call-desktop {
        display: inline;
    }
    .cta-call-mobile {
        display: none;
    }
}

.cta-call-desktop .cta-call-number {
    font-size: 80px;
    font-family: var(--mangoGrotesqueBold);
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--enigmaYellow);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-right: 40px;
}
.cta-call-desktop .cta-call-number::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(calc(-50% - 4px));
    right: 0;
    width: 20px;
    height: 20px;
    background: url('../../assets/arrow-right-yellow.svg') no-repeat center;
    background-size: 100%;
}

@keyframes dash-from {
    from {
        stroke-dashoffset: 0;
    }
}

label {
    font-size: 16px;
    color: var(--darkGrey);
    font-weight: var(--semiBold);
    display: inline-block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: var(--contentSpacing);
    font-size: 16px;
    color: var(--enigmaWhite);
    border: 0px;
    border-bottom: 1px solid var(--enigmaWhite);
    background-color: transparent;
}

textarea {
    min-width: 100%;
    padding: 15px 20px;
    margin-bottom: var(--contentSpacing);
    font-size: 16px;
    color: var(--enigmaWhite);
    border: 0px;
    border-bottom: 1px solid var(--enigmaWhite);
    background-color: transparent;
    height: 150px;
}

input[type="email"] {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: var(--contentSpacing);
    font-size: 16px;
    color: var(--enigmaWhite);
    border: 0px;
    border-bottom: 1px solid var(--enigmaWhite);
    background-color: transparent;
}

input[type="password"] {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: var(--contentSpacing);
    font-size: 16px;
    color: var(--enigmaWhite);
    border: 0px;
    border-bottom: 1px solid var(--enigmaWhite);
    background-color: transparent;
}

select {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    margin-bottom: var(--contentSpacing);
    color: var(--enigmaWhite);
    border: 0px;
    border: 1px solid var(--enigmaWhite);
    background-color: transparent;
}

option {
    color: var(--enigmaBlack)
}

fieldset {
    margin-top: 20px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: var(--contentSpacing);
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-content: center;
    border: 0px;
    border: 2px solid var(--enigmaWhite);
    cursor: pointer;
    background-color: transparent;
}

input[type="checkbox"]:before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 23px 23px var(--enigmaWhite);
    transform-origin: center center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: transparent;
}

input[type="checkbox"]:checked:before {
    transform: scale(1);
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: var(--contentSpacing);
    color: var(--enigmaWhite);
    border: 0px;
    border: 2px solid var(--enigmaWhite);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: 0.2s ease-in-out border;
    background-color: transparent;
}

input[type="radio"]:checked {
    border: 5px solid var(--enigmaWhite);
    transition: 0.2s ease-in-out border;
}

input[type="range"] {
    background-color: var(--enigmaBlack);
    border: 0px;
    border: 2px solid var(--enigmaWhite);
    margin-bottom: var(--contentSpacing);
    width: 100%;
    height: 15px;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    accent-color: var(--enigmaWhite);
    background-color: transparent;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    background: var(--enigmaBlack); 
    box-shadow: 0px 3px 6px var(--enigmaWhite);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--enigmaBlack); 
    box-shadow: 0px 3px 6px var(--enigmaWhite);
    cursor: pointer;
}

::placeholder {
    color: var(--enigmaWhite);
    opacity: 1; /* Firefox */
  }
  
::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--enigmaWhite);
}

.content-text.normal p {
    font-size: 16px;
    line-height: normal;
}
.content-text.medium p {
    font-size: 19px;
    line-height: normal;
}
.content-text.larger p {
    font-size: 32px;
    line-height: normal;
}
.content-text.uppercase p {
    text-transform: uppercase;
}

.content-text.lowercase p {
    text-transform: lowercase;
}

.content-text.capitalize p {
    text-transform: capitalize;
}

/* Tablet Media Queries */
@media (min-width: 960px) and (max-width: 1440px){
    section {
        max-width: 1440px;
    }

    .full-container {
        width: 100%;
    }

    .small-container {
        width: 100%;
    }
}

@media (min-width: 783px) and (max-width: 959px) {

    .large {
        font-size: 100px;
        line-height: 90px;
    }

    h1, .h1:not(.heading) {
        font-size: 45px;
    }

    h2, .h2:not(.heading) {
        font-size: 26px;
        line-height: 28px;
    }

    h3, .h3:not(.heading) {
        font-size: 18px;
        line-height: 26px;
        font-weight: 700;
    }
}


/* Large Mobile Media Queries */
@media (max-width: 782px) {
    
    section {
        width: 100%;
    }

    .full-container {
        width: 100%;
    }

    .small-container {
        width: 100%;
    }

    .large {
        font-size: 64px;
        line-height: 61px;
        letter-spacing: 2px;
    }

    h1, .h1 {
        font-size: 45px;
        line-height: 48px;
    }

    h2, .h2 {
        font-size: 36px;
        line-height: 38px;
    }

    h3, .h3 {
        font-size: 24px;
        line-height: 26px;
        font-weight: 700;
    }
}

/* Small Mobile Media Queries */

@media (max-width: 640px) {
    .cta-cu::after {
        right: 50px;
    }
    .cta-git::after, .cta-md::after {
        right: 38px;
    }
    .polaroid-movement-content .cta-button.animated .cta-ol svg,
    .polaroid-movement-content .cta-button.animated .cta-alau svg {
        width: 205px;
    }
    .cta-alau::after {
        right: 35px;
    }
    .cta-lm::after {
        right: 45px;
    }
    .cta-ol::after {
        right: 40px;
    }
    .escape-room-block .escape-room-cta .cta-button.animated svg,
    .polaroid-movement-content .cta-button.animated svg {
        width: 184px;
    }
    .escape-room-block .escape-room-cta .cta-button.animated a.cta-book,
    .escape-room-block .escape-room-cta .cta-button.animated a.cta-md, 
    .polaroid-movement-content .cta-button.animated a.cta-book,
    .polaroid-movement-content .cta-button.animated a.cta-md {
        padding-right: 0;
        padding-top: 0;
        margin-top: -40px;
    }
    .escape-room-cta .cta-book, 
    .escape-room-cta .cta-md,
    .polaroid-movement-content .cta-book, 
    .polaroid-movement-content .cta-md {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .escape-room-cta .cta-book::after, 
    .escape-room-cta .cta-md::after, 
    .polaroid-movement-content .cta-book::after, 
    .polaroid-movement-content .cta-md::after {
        top: calc(50% - 5px);
    }
    .escape-room-cta .cta-book::after,
    .polaroid-movement-content .cta-book::after {
        right: 38px;
    }
    .escape-room-cta .cta-md::after,
    .polaroid-movement-content .cta-md::after {
        right: 10px;
    }
}