/*
 Theme Name: Paradise Entertainment
 Theme URI:
 Description: DG Theme Child Theme
 Author: danielgoehr.de
 Author URI: http://www.danielgoehr.com/
 Template: dg_theme
 Version: 999.0
*/

/*
You can start adding your own styles here. Use !important to overwrite styles if needed. */

root, body {
    font-family: "Inter", Arial, Helvetica, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: "Inter";
    --black: #000;
    --black2: #181818;
    --grey: #8E8E8E;
    --white: #F1F1F1;
    --white2: #b6b6b6;
    --orange: #E44525;
    --green: #34925F;
    --yellow: #EEA736;
    --font-size-xxl: 80px;
    --font-size-xl: 42px;
    --font-size-l: 40px;
    --font-size-ml: 36px;
    --font-size-mm: 24px;
    --font-size-m: 18px;
    --font-size-s: 16px;
    --font-size-xs: 14px;
    & img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

body {
    height: 100%;
    color: var(--white);
    background-color: var(--black);
}

#content {
    background: url('./img/bg-all-trans.webp') repeat 50% 0% / 120%;
}

.home #content {
    background: url('./img/bg-all-trans.webp') repeat 50% 0% / 120%, 
        url('./img/bg-bottom.webp') no-repeat bottom / 100% auto;
}

#main {
    padding-left: 36px;
    padding-right: 36px;
    max-width: 1280px;
    box-sizing: border-box;
}

@media(max-width: 767.98px) {
    root, body {
        --font-size-xxl: 40px;
        --font-size-xl: 32px;
        --font-size-l: 28px;
        --font-size-ml: 26px;
        --font-size-mm: 20px;
        --font-size-m: 16px;
    }

    body.mobile-menu-open {
        overflow-y: hidden;
    }
    
    #main, nav.main-menu .content-container {
        padding-left: 36px;
        padding-right: 36px;
    }
}

/* Typography */

:is(h1, h2, h3, h4, h5, h6, p) {
    margin-top: 0;
}

h1 {
    font-family: "Aileron";
    font-weight: 600;
    font-size: var(--font-size-xxl);
    line-height: .9em;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
}

h2 {
    font-family: "Aileron";
    font-weight: 700;
    font-size: var(--font-size-xl);
    line-height: .94em;
    text-align: center;
    text-transform: uppercase;
    color: var(--orange);
}

h3 {
    font-family: "Inter";
    font-weight: 700;
    font-size: var(--font-size-l);
    line-height: .86em;
    color: var(--white2);
}

h4 {
    font-family: "Inter";
    font-weight: 700;
    font-size: var(--font-size-ml);
    line-height: .86em;
}

p {
    font-family: "Inter";
    font-weight: 400;
    font-size: var(--font-size-m);
    line-height: 1.5;
    color: var(--white);
}

a {
    text-decoration: none;
    color: var(--orange);
    transition: color .3s;
}

p a {
    text-decoration: none;
}

/* Typography END */

/* Navigation / Nav Bar */
/* desktop */
nav.main-menu {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 50px 80px;
    left: 50%;
    height: fit-content;
    background-color: transparent;
    /* background: linear-gradient(180deg, var(--black) 0%, var(--black) 30%, transparent 100%); */
    transform: translateX(-50%);
    transition: top .5s, border-radius .3s, width .3s, background-color .3s, opacity .5s;
    &:before {
        content: "";
        position: absolute;
        top: 50px;
        left: 0;
        height: 1px;
        width: 100%;
        background-color: var(--white);
        opacity: .2;
        transition: opacity .3s, top .3s;
    }
    & .navbar-menu-wrapper {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
        justify-content: space-between;
        align-items: center;
        & ul li {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
    & .navbar-header {
        align-items: center;
        grid-column: 1 / 2;
        grid-row: 2;
        margin-left: 50px;
        padding-right: 20px;
        z-index: 1;
        & a {
            height: 20px;
            width: auto;
        }
        & .navbar-headline-wrapper {
            display: none;
        }
    }
    & .navbar-menu {
        grid-column: 2 / 3;
        grid-row: 2;
        margin-right: 18px;
        & ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            column-gap: 60px;
            padding-left: 0;
            & li {
                margin-left: 0;
                & a {
                    font-weight: 500;
                    font-size: var(--font-size-s);
                    line-height: 1;
                    color: var(--white);
                    transition: color .3s;
                }
            }
        }
    }
    & .pe-button {
        grid-column: 3 / 4;
        grid-row: 2;
        margin-right: 50px;
    }
    & .navbar-social-menu {
        grid-column: 3 / 4;
        grid-row: 1;
        margin-right: 50px;
        opacity: 1;
        overflow: hidden;
        transition: opacity .3s, width .3s, height .3s;
    }
}

/* Social Media Icons */
div.navbar-social-menu {
    overflow: hidden;
    & ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 8px;
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    overflow: hidden;
        & li {
            margin-left: 0;
            position: relative;
            height: 32px;
            width: 32px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            overflow: hidden;
            cursor: pointer;
            &:before {
                content: "";
                display: block;
                position: absolute;
                height: 100%;
                width: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                opacity: 0;
                transition: opacity .3s;
                pointer-events: none;
            }
            &.pe-spotify {
                background-image: url(./img/spotify.svg);
                &:before {
                    background-image: url(./img/spotify-hover.svg);
                }
            }
            &.pe-youtube {
                background-image: url(./img/youtube.svg);
                &:before {
                    background-image: url(./img/youtube-hover.svg);
                }
            }
            &.pe-instagram {
                background-image: url(./img/instagram.svg);
                &:before {
                    background-image: url(./img/instagram-hover.svg);
                }
            }
            &.pe-facebook {
                background-image: url(./img/facebook.svg);
                &:before {
                    background-image: url(./img/facebook-hover.svg);
                }
            }
            &.pe-apple {
                background-image: url(./img/apple.svg);
                &:before {
                    background-image: url(./img/apple-hover.svg);
                }
            }
            &.pe-tiktok {
                background-image: url(./img/tiktok.svg);
                &:before {
                    background-image: url(./img/tiktok-hover.svg);
                }
            }
            &.pe-linkedin {
                background-image: url(./img/linkedin.svg);
                &:before {
                    background-image: url(./img/linkedin-hover.svg);
                }
            }
            & a {
                color: transparent !important;
            }
        }
    }
}

.header-up:not(.mobile-menu-open) nav.main-menu,
.header-down.top-nav-small nav.main-menu:not(.collapse) {
    top: -100dvh;
    opacity: 0;
    transition: top 1s, opacity .5s;
    pointer-events: auto;
}

/* Navbar on scroll (desktop) */
nav.pill-menu {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 60px;
    column-gap: 24px;
    top: -100px;
    left: 50%;
    position: fixed;
    border-radius: 30px;
    height: fit-content;
    width: 688px;
    background: var(--orange);
    box-sizing: border-box;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .5s, top .5s;
    z-index: 9999;
    & .navbar-menu-wrapper {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / 4;
        grid-row: 1 ;
        justify-content: space-between;
        align-items: center;
        & ul li {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
    & .navbar-header {
        display: flex;
        align-items: center;
        grid-column: 1 / 2;
        grid-row: 1;
        margin-left: 20px;
        padding-right: 0;
        z-index: 1;
        & a {
            height: 16px;
            width: auto;
            & img {
                height: 100%;
                width: auto;
                filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7492%) hue-rotate(200deg) brightness(117%) contrast(101%);
            }
        }
        & .navbar-headline-wrapper {
            display: none;
        }
    }
    & .navbar-menu {
        grid-column: 2 / 3;
        grid-row: 1;
        justify-self: center;
        margin-right: 0;
        & ul {
            display: flex;
            flex-direction: row;
            column-gap: 20px;
            padding-left: 0;
            list-style: none;
            & li {
                margin-left: 0;
                & a {
                    font-weight: 500;
                    font-size: var(--font-size-s);
                    line-height: 1;
                    color: var(--black);
                    transition: color .3s;
                }
            }
        }
    }
    & .pe-button {
        grid-column: 3 / 4;
        grid-row: 1;
        justify-self: end;
        margin-right: 10px;
    }
}

.header-down.top-nav-small nav.pill-menu {
    top: 20px;
    opacity: 1;
}

@media(max-width:1079.98px) {
    nav.main-menu {
        & .navbar-header {
            margin-left: 36px;
        }
        & .navbar-menu {
            & ul {
                column-gap: 24px;
            }
        }
        & .pe-button {
            margin-right: 36px;
        }
        & .navbar-social-menu {
            margin-right: 36px;
        }
    }
}

@media(max-width:767.98px) {
    /* mobile */
    nav.pill-menu {
        display: none;
    }

    nav.main-menu {
        grid-template-columns: 1fr;
        grid-template-rows: 64px;
        container-type: inline-size;
        top: 0;
        border-radius: 0;
        height: 64px;
        width: 100%;
        background-color: var(--black);
        &:before {
            top: 64px;
        }
        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 30px;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, var(--black) 0%, transparent 100%);
        }
        & .navbar-header {
            grid-column: 1 / 2;
            grid-row: 1;
            margin-left: 0;
            padding-left: 36px;
            padding-right: 36px;
            width: 100cqw;
            background-color: transparent;
            box-sizing: border-box;
            transition: border-radius .3s;
            & a {
                height: 20px;
            }
        }
        & .navbar-menu-wrapper {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 120px;
            padding-bottom: 86px;
            width: 100cqw;
            height: 100dvh;
            background-color: var(--black);
            background-image: url(./img/mobile-menu-background.png);
            background-repeat: no-repeat;
            background-position: bottom center;
            background-size: cover;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            opacity: 0;
            z-index: -1;
            transform: translateY(-100dvh);
            transition: transform .5s, opacity .3s .2s;
            & ul {
                padding: 0;
                height: fit-content;
            }
            & .navbar-menu {
                grid-column: 1;
                grid-row: 1 / 2;
                position: relative;
                top: unset;
                margin-left: 36px;
                margin-right: 36px;
                width: calc(100cqw - 72px);
                background-color: transparent;
                opacity: 1;
                & ul {
                    display: flex;
                    flex-direction: column;
                    column-gap: 24px;
                    padding-left: 0;
                    & li {
                        border-bottom: solid 1px var(--grey);
                        padding-top: 25px;
                        padding-bottom: 25px;
                        & a {
                            font-size: 36px;
                            text-align: left;
                            color: var(--black);
                        }
                    }
                }
            }
            & .pe-button {
                grid-column: 1;
                grid-row: 2 / 3;
                margin: 68px auto 36px;
            }
            & .navbar-social-menu {
                grid-column: 1;
                grid-row: 3 / 4;
                margin-left: auto;
                margin-right: auto;
                width: fit-content;
                & ul {
                    justify-content: center;
                    column-gap: 12px;
                    & li {
                        margin-left: 0;
                        height: 45px;
                        width: 45px;
                    }
                }
            }
        }
        & .navbar-button {
            padding: 20px 36px;
            height: 10px;
            width: 40px;
            & .bar {
                border-radius: 0;
                height: 2px;
                background-color: var(--white);
            }
        }
    }

    /*.header-up:not(.mobile-menu-open) nav.main-menu:not(.collapse), */
    .header-down.top-nav-small nav.main-menu:not(.collapse) {
        top: 0;
        opacity: 1;
        transition: top 1s, opacity .5s, width .5s;
    }

    /* Navbar on scroll (mobile) */
    body.top-nav-small:not(.mobile-menu-open) nav.main-menu:not(.collapse) {
        grid-template-rows: 60px;
        top: 14px;
        border-radius: 30px;
        height: 60px;
        width: calc(100% - 72px);
        background-color: var(--orange);
        animation-name: none;
        transition: top 1s, opacity .5s, width .5s .3s;
        &:before {
            top: -20px;
        }
        & .navbar-header {
            margin-left: 0;
            border-radius: 30px;
            padding-left: 20px;
            padding-right: 20px;
            background-color: var(--orange);
        }
        & .navbar-button {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    /* Nav menu open (mobile) */
    body.mobile-menu-open.top-nav-small nav.main-menu {
        top: 14px;
    }

    body.mobile-menu-open.top-nav-small nav.main-menu,
    body.mobile-menu-open nav.main-menu {
        top: 0;
        grid-template-rows: 64px;
        container-type: inline-size;
        width: 100%;
        animation-name: none;
        &:before {
            top: 64px;
            opacity: .2;
        }
        & .navbar-header {
            margin-left: 0;
            & a {
                height: 20px;
                & img {
                    filter: none;
                }
            }
        }
        & .navbar-menu-wrapper {
            opacity: 1;
            transform: translateY(0);
            & .navbar-menu ul li a {
                color: var(--white);
            }
        }
        & .navbar-social-menu {
            height: 45px;
            opacity: 1;
        }
    }

    .mobile-menu-open .navbar-button {
        transform: translateX(0)
    }

    .mobile-menu-open .navbar-button .bar:nth-child(1) {
        transform: rotate(45deg) translateX(6px) translateY(0px);
    }

    .mobile-menu-open .navbar-button .bar:nth-child(2) {
        transform: rotate(-45deg) translate(5px, 0px);
        opacity: 1;
    }
}
/* Navigation / Nav Bar END */

/* Footer */
footer.footer {
    padding: 0;    
    width: 100%;
    background-color: var(--black);
    & #inner-footer {
        margin-left: auto;
        margin-right: auto;
        padding: 56px 20px 110px;
        max-width: 1280px;
        box-sizing: border-box;
    }
}

.pe-footer-outer-wrapper {
    display: grid;
    grid-template-columns: 270px calc(100% - 540px) 230px;
    grid-template-rows: auto auto;
    row-gap: 40px;
    column-gap: 20px;
    align-items: baseline;
    justify-content: start;
    padding-bottom: 120px;
    & .pe-footer-logo {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        height: 26px;
        width: 248px;
    }
    & .pe-footer-claim {
        grid-column: 1;
        grid-row: 2;
        & p {
            font-size: 21px;
            letter-spacing: .05em;
            color: var(--grey);
            & strong {
                font-weight: 400;
                color: var(--white);
            }
        }
    }
    & .navbar-social-menu {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    & .pe-footer-company {
        grid-column: 3;
        grid-row: 1 / 3;
        display: grid;
        grid-template-rows: subgrid;
        width: 100%;
        & > :first-child {
            grid-row: 1;
        }
        & > :last-child {
            grid-row: 2;
        }
    }
    & nav .cf {
        justify-content: start;
        align-self: baseline;
        & ul {
            text-align: left;
            display: flex;
            flex-direction: column;
            row-gap: 6px;
            margin: 0;
            padding-left: 0;
            list-style: none;
            & li {
                display: block;
                & a, p {
                    font-family: "Inter";
                    font-weight: 600;
                    font-size: var(--font-size-xs);
                    line-height: 1.5;
                    text-decoration: none;
                    color: var(--white2);
                    opacity: .8;
                    transition: opacity .3s;
                }
            }
        }
    }
    & .pe-footer-subnav-header {
        font-family: "Aileron";
        font-weight: 700;
        font-size: var(--font-size-m);
        line-height: .8;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--white);
        align-self: end;
        margin-bottom: 0;
    }
}

.pe-footer-bottom {
    margin-left: auto;
    margin-right: auto;
    border-top: solid 2px var(--grey);
    padding: 12px 0 16px;
    max-width: 1280px;
    box-sizing: border-box;
    & p {
        font-weight: 600;
        font-size: var(--font-size-xs);
        text-align: center;
        color: var(--white2);
    }
}

@media(max-width:1079.98px) {
    .pe-footer-outer-wrapper {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        padding-bottom: 48px;
        & .pe-footer-logo {
            grid-column: 1 / 3;
        }
        & .pe-footer-claim {
            grid-column: 1 / 3;
            grid-row: 2;
        }
        & .navbar-social-menu {
            justify-self: end;
            grid-column: 3;
        }
        & .pe-footer-company {
            display: block;
            grid-column: 1 / 4;
            grid-row: 3;
            & .pe-footer-subnav-header {
                margin-bottom: 18px;
            }
            & #menu-footer-links {
                width: 100%;
                flex-direction: row;
                column-gap: 20px;
                row-gap: 14px;
                flex-wrap: wrap;
            }
        }
    }
}

@media(max-width:767.98px) {
    footer.footer {
        & #inner-footer {
            padding: 48px 36px 48px;
        }
    }
    .pe-footer-outer-wrapper {
        & .pe-footer-claim {
            grid-column: 1 / 4;
            max-width: 560px;
        }
    }
}

@media(max-width:480px) {
    .pe-footer-outer-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        padding-bottom: 18px;
        & .pe-footer-logo {
            grid-column: 1;
            grid-row: 2;
        }
        & .pe-footer-claim {
            grid-column: 1;
            grid-row: 3;
        }
        & .navbar-social-menu {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
        }
        & .pe-footer-company {
            grid-column: 1;
            grid-row: 4;
            & #menu-footer-links {
                flex-direction: column;
                row-gap: 14px;
                flex-wrap: nowrap;
            }
        }
    }
    .pe-footer-bottom p {
        text-align: left;
    }
}
/* Footer END */


/* Buttons */
.pe-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
    align-items: center;
    position: relative;
    border-radius: 20px;
    width: fit-content;
    background-color: var(--white);
    cursor: pointer;
    transition: background-color .3s;
    &.glass {
        background-color: rgba(0,0,0,.2);
        box-shadow: inset -2px -1px 3px 0px rgba(255,255,255,0.3), -2px 0px 1px 0px rgba(255,255,255,0.4);
        backdrop-filter: blur(4px);
        transition: background-color.3s, box-shadow .3s;
        &::after {
            filter: none;
        }
        & a {
            color: var(--white);
        }
    }
    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        margin-right: 20px;
        height: 10px;
        width: 20px;
        background-image: url(./img/arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        transform: translateY(-50%);
        filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7492%) hue-rotate(200deg) brightness(117%) contrast(101%);
        pointer-events: none;
    }
    /* &:hover {
        background-color: var(--orange);
    } */
    & a {
        font-family: "Inter";
        font-weight: 600;
        font-size: var(--font-size-s);
        line-height: 20px;
        text-decoration: none;
        color: var(--black);
        padding: 10px 50px 10px 20px;
    }
}

/* Wordpress Default Button */
.wp-block-buttons {
    column-gap: 26px;
    row-gap: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: 686px;
    & > .wp-block-button {
        display: unset;
    }
    .wp-block-button__link {
        color: unset;
        background-color: unset;
    }
}

/* Buttons END */


/* Hero Section */
.pe-hero-outer-wrapper {
    container-type: inline-size;
    margin-bottom: 120px;
    width: 100%;
    & h1 {
        margin-bottom: 48px;
    }
    & .pe-map-wrapper {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 48cqw auto;
        height: 100%;
        width: 100%;
        background-image: url(./img/worldmap_desktop.svg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
        & .pe-branches-wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, auto);
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            & .pe-branch-wrapper {
                display: grid;
                grid-template-rows: subgrid;
                grid-column: span 1;
                grid-row: span 3;
                padding-left: 24px;
                padding-right: 24px;
                & .pe-branch-no {
                    font-family: "Aileron";
                    font-weight: 900;
                    font-size: var(--font-size-xxl);
                    line-height: .94em;
                    letter-spacing: -0.02em;
                    color: var(--white);
                    margin-bottom: 30px;
                }
                & .pe-branch-loc {
                    font-family: "Inter";
                    font-weight: 700;
                    font-size: var(--font-size-mm);
                    line-height: .84em;
                    color: var(--white);
                    margin-bottom: 20px;
                    & span {
                        color: var(--yellow);
                    }
                }
                & p {
                    font-size: var(--font-size-xs);
                    line-height: 1.8em;
                    color: var(--white2);
                }
            }
        }
    }
    & .pe-button.toggle-text {
        display: none;
    }
}

@media(max-width:1079.98px) {
    .pe-hero-outer-wrapper {
        & .pe-map-wrapper {
            grid-template-rows: 45cqw auto;
            background-image: url(./img/worldmap_tablet.svg);
            & .pe-branches-wrapper {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(6, auto);
                grid-auto-flow: column;
                & .pe-branch-wrapper {
                    grid-column: span 1;
                    grid-row: span 3;
                    padding-left: 20px;
                    padding-right: 20px;
                }
            }
        }
    }
}

@media(max-width: 797.98px) {
    .pe-hero-outer-wrapper {
        margin-bottom: 60px;
        & .pe-map-wrapper {
            grid-template-rows: 50cqw auto;
            background-image: url(./img/worldmap_mobile.svg);
            & .pe-branches-wrapper {
                display: flex;
                flex-direction: column-reverse;
                & .pe-branch-wrapper {
                    display: flex;
                    flex-direction: column;
                    & .pe-branch-no {
                        display: none;
                        margin-bottom: 14px;
                    }
                    & .pe-branch-loc {
                        margin-bottom: 14px;
                    }
                    & p {
                        font-size: 0;
                        margin-bottom: 0;
                        transition: font-size .3s;
                        &.show {
                            font-size: var(--font-size-s);
                        }
                    }
                }
            }
        }
        & .pe-button.toggle-text {
            position: relative;
            display: flex;
            margin-top: 14px;
            margin-bottom: 32px;
            padding-right: 50px;
            &:after {
                position: absolute;
                top: 16px;
                right: 16px;
                margin-right: 0;
                height: 10px;
                width: 16px;
                transform: rotate(90deg);
                transition: transform .1s ease-in-out;
            }
            &.show:after {
                transform: rotate(-90deg);
            }
        }
    }
}

/* Hero Section END */

/* Section Gutenberg Editor */
#main {
    padding-top: 236px;
    padding-bottom: 150px;
}

.entry-content.page, header.article-header, .pe-section-pss-content {
    & p, ol, ul, h1, h2, h3, h4 {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 36px;
        width: 100%;
        max-width: 686px;
    }
    & h1 {
        margin-bottom: 68px;
    }
    & p {
        color: var(--grey);
    }
    & ol {
        padding-inline-start: 20px;
        & li {
            font-size: var(--font-size-s);
            line-height: 1.8
        }
    }
}

@media(max-width:767.98px) {
    #main {
        padding-top: 124px;
        padding-bottom: 60px;
    }

    .entry-content.page, header.article-header, .pe-section-pss-content {
        & p, ul, h1, h2, h3, h4 {
            margin-bottom: 24px;
        }
        & h1 {
            margin-bottom: 48px;
        }
        & h2, h3, h4 {
            font-weight: 600;
        }
    }
}
/* Section Gutenberg Editor END */

/* ACF Sections General */
.pe-section-wrapper {
    margin-bottom: 120px;
    &:last-of-type {
        margin-bottom: 0;
    }
    & h2 {
        text-align: center;
        color: var(--orange);
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        max-width: 686px;
    }
    & > div > p {
        text-align: center;
        letter-spacing: .05em;
        color: var(--grey);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        max-width: 686px;
        & strong {
            font-weight: 400;
            color: var(--white);
        }
    }
    & .pe-button {
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-width:767.98px) {
    .pe-section-wrapper {
        margin-bottom: 60px;
    }
}

/* Sections General END */

/* Section Services */

.pe-section-wrapper .pe-section-services > p {
    margin-bottom: 48px;
}

.pe-section-services h3 {
    font-size: var(--font-size-l);
    line-height: 1.06em;
    color: var(--white);
}

.pe-service-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 26px;
    row-gap: 32px;
}

.pe-service-card-wrapper h3 {
    text-align: right;
}

.pe-service-card-popup h3 {
    text-align: left;
}

.pe-service-card-inner-wrapper {
    min-width: 0;
    
    & .pe-service-card-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        border-radius: 15px;
        padding: 40px 36px 32px;
        height: 550px;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        z-index: 1;
        & img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
            z-index: -1;
            transition: top .3s, left .3s, height .3s, width .3s;
        }
        & p {
            font-weight: 500;
            margin-bottom: 0;
        }
    }
}

.pe-popup-cover {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 100dvh;
    width: 100dvw;
    background-color: #00000050;
    backdrop-filter: blur(0);
    transform: translateX(-50%) translateY(-50%);
    z-index: 100001;
    transition: backdrop-filter .5s;
    pointer-events: auto;
    &.open {
        display: block;
        backdrop-filter: blur(5px);
    }
}

.pe-service-card-popup {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 15px;
    padding: 36px 42px;
    width: 100%;
    max-width: 650px;
    max-height: calc(100dvh - 40px);
    background-color: var(--black);
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    .pe-service-close {
        position: absolute;
        top: 16px;
        right: 22px;
        padding: 20px;
        height: 24px;
        width: 24px;
        background-image: url(./img/close.svg);
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    & h3 {
        grid-row: 1;
        grid-column: 1;
        align-self: center;
        margin-bottom: 0;
    }
    & img {
        grid-row: 1;
        grid-column: 2;
        aspect-ratio: 1 / 1;
    }
    & .pe-service-popup-text-wrapper {
        grid-row: 3;
        grid-column: 1 / 3;
        margin-bottom: 36px;
        & p {
            font-size: var(--font-size-xs);
            line-height: 1.8;
            color: var(--white2);
            margin-bottom: 24px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
    & .pe-button {
        grid-row: 4;
        grid-column: 1 / 3;
        margin-left: 0;
        margin-right: 0;
        background-color: rgba(0,0,0,.2);
        box-shadow: inset -2px -1px 3px 0px rgba(255,255,255,0.3), -2px 0px 1px 0px rgba(255,255,255,0.4);
        backdrop-filter: blur(4px);
        transition: background-color.3s, box-shadow .3s;
        &::after {
            filter: none;
        }
        /* &:hover {
            background-color: var(--orange);
            box-shadow: inset -2px -1px 3px 0px rgba(255,255,255,0.0), -2px 0px 1px 0px rgba(255,255,255,0.0);
        } */
        & a {
            color: var(--white);
        }    
    }
}

@media(max-width:1079px) {
    .pe-service-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        column-gap: 36px;
        row-gap: 24px;
    }
}

@media(max-width: 767.98px) {
    .pe-service-cards-wrapper {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }

    .pe-service-card-popup {
        grid-template-columns: 1fr;
        top: 20px;
        padding: 24px 20px 0;
        width: calc(100% - 40px);
        transform: translateX(-50%) translateY(0);
        & h3 {
            grid-row: 2;
            grid-column: 1;
            margin-bottom: 28px;
        }
        & img {
            grid-row: 1;
            grid-column: 1;
        }
        & .pe-service-popup-text-wrapper {
            grid-row: 3;
        }
        & .pe-button {
            margin-bottom: 24px;
        }
    }

    .pe-service-card-inner-wrapper {
        & .pe-service-card-wrapper {
            padding: 24px 36px;
        }
    }
}
/* Section Services END */


/* Section Partners */
.pe-section-partners h2 {
    margin-bottom: 48px;
}

.partners-subsection-inner-wrapper {
    & + .partners-subsection-inner-wrapper {
        margin-top: 66px;
    }
    & h3 {
        font-weight: 500;
        font-size: var(--font-size-m);
        line-height: 1.8;
        color: var(--white);
        text-align: center;
        margin-bottom: 40px;
    }
}

.pe-partners-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    row-gap: 38px;
    position: relative;
    margin-bottom: 65px;
    padding-bottom: 40px;
    &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        max-width: 530px;
        background-color: var(--white);
        background: linear-gradient(90deg, rgba(142,142,142,0) 0%, rgba(142,142,142,1) 44.23%, rgba(142,142,142,1) 65.87%, rgba(142,142,142,0) 100%);
        opacity: .5;
    }
    &:last-of-type {
        margin-bottom: 0;
    }
    & .pe-icon-wrapper {
        height: 45px;
        max-width: 250px;
        filter: brightness(0) saturate(100%) invert(64%) sepia(2%) saturate(0%) hue-rotate(96deg) brightness(91%) contrast(85%);
        & img {
            object-fit: contain;
        }
    }
}

@media(max-width: 767.98px) {
    .partners-subsection-inner-wrapper {
        & + .partners-subsection-inner-wrapper {
            margin-top: 48px;
        }
        & .pe-partners-icons {
            row-gap: 24px;
            padding-bottom: 24px;
        }
    }
}
/* Section Partners END */


/* Section Pro Press */
.pe-section-propress > h2 {
    margin-bottom: 68px;
}

.pe-press-date,
.pe-blog-date {
    font-family: "Aileron";
    font-weight: 700;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    white-space: nowrap;
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 3;
    border-radius: 100px;
    padding: 4px 12px;
    height: 30px;
    width: fit-content;
    background-color: var(--black);
    box-sizing: border-box;
}

.pe-press-la-outer-wrapper {
    position: relative;
    padding: 48px 36px 24px;
    margin-bottom: 86px;
    z-index: 1;
    & .pe-press-la-img-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
        height: 100%;
        width: 100%;
        background-color: var(--black);
        overflow: hidden;
        z-index: -1;
        &:after{
            content: "";
            display: block;
            position: absolute;
            height:100%;
            width: 100%;
            background: linear-gradient(90deg, rgba(228, 69, 37, 0.75) 1.44%, rgba(238, 167, 54, 0.75) 45%, rgba(52, 146, 95, 0.75) 100%);
        }
        & .pe-press-la-img {
            position: relative;
            height: auto;
            width: 50%;
            &:before {
                content: "";
                display:block;
                position: absolute;
                top: 0;
                left: 0;
                height:100%;
                width: 200px;
                background: linear-gradient(90deg, var(--black) 0%, transparent 100%);
            }
            & img {
                object-fit: cover;
            }
        }
    }
    & .pe-press-la-inner-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        justify-items: start;
        align-content: start;
        & .pe-press-la-logo-wrapper {
            grid-column: 1;
            grid-row: 1;
            margin-bottom: 30px;
            height: 36px;
        }
        & h3 {
            font-size: var(--font-size-xl);
            line-height: 1.08em;
            letter-spacing: .05em;
            color: var(--white);
            grid-column: 1 / 2;
            grid-row: 2;
            margin-bottom: 40px;
        }
        & .pe-press-date {
            color: var(--white);
            border: 1px solid var(--white);
            background-color: transparent;
        }
        & .pe-button {
            grid-column: 2;
            grid-row: 3;
            margin-right: 0;
        }
    }
}

.pe-press-swiper {
    position: relative;
    height: fit-content;
    width: 100%;
    .pe-press-slide-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        & .pe-press-slide-img-wrapper {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            width: 100%;
            aspect-ratio: 5 / 3;
            overflow: hidden;
            margin-bottom: 30px;
            & img {
                object-fit: cover;
            }
        }
        & .pe-press-date-logo-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            column-gap: 10px;
            row-gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            & .pe-press-date {
                color: var(--green);
                border: 1px solid var(--green);
            }
            & img {
                max-height: 29px;
                width: auto;
            }
        }
        & h4 {
            font-family: "Aileron";
            font-weight: 700;
            font-size: var(--font-size-mm);
            line-height: 1.5;
            letter-spacing: .05em;
            color: var(--white);
            margin-bottom: 10px;
        }
        & p {
            font-size: var(--font-size-s);
            line-height: 1.8;
            color: var(--white2);
            margin-bottom: 20px;
        }
        & .pe-button {
            margin-left: 2px;
            margin-right: 2px;
            margin-bottom: 20px;
        }
    }   
    & .pe-swiper-pagination {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        column-gap: 10px;
        margin-top: 30px;
        margin-bottom: 30px;
        & .swiper-pagination-bullet {
            background-color: var(--grey);
            height: 14px;
            width: 14px;
            opacity: .4;
        }
        & .swiper-pagination-bullet-active {
            background-color: var(--grey);
            opacity: 1;
        }
    }
}

.pe-swiper-outer-wrapper {
    position: relative;
    width: 100%;
    & .pe-swiper-button {
        position: absolute;
        top: 200px;
        left: -128px;
        border-radius: 30px;
        height: 60px;
        width: 60px;
        background-color: var(--black2);
        background-image: url(./img/arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px auto;
        transform: rotate(-180deg);
        cursor: pointer;
        &.pe-swiper-button-next {
            left: unset;
            right: -128px;
            transform: rotate(0deg);
        }
    }
}

.pe-press-swiper .swiper-slide * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -o-user-select: none !important;
}

.swiper-button-next,
.swiper-button-prev {
    pointer-events: auto;
    touch-action: manipulation;
}

@media(max-width: 1640px) {
    .pe-swiper-outer-wrapper {
        & .pe-swiper-button {
            left: -80px;
            z-index: 2;
            &.pe-swiper-button-next {
                right: -80px;
            }
        }
    }
}

@media(max-width: 1370px) {
    .pe-swiper-outer-wrapper {
        & .pe-swiper-button {
            top: unset;
            bottom: 8px;
            left: 0;
            z-index: 2;
            &.pe-swiper-button-next {
                right: 0;
            }
        }
    }
}

@media(max-width:767.98px) {
    .pe-section-propress > h2 {
        margin-bottom: 48px;
    }

    .pe-press-la-outer-wrapper {
        padding: 124px 36px 24px;
        margin-bottom: 40px;
        & .pe-press-la-img-wrapper {
            & .pe-press-la-img {
                height: 60%;
                width: 100%;
                &:before {
                    top: unset;
                    bottom: 0;
                    height: 100px;
                    width: 100%;
                    background: linear-gradient(0deg, var(--black) 0%, transparent 100%);
                }
            }
        }
        & .pe-press-la-inner-wrapper {
            grid-template-columns: 1fr 1fr;
            & h3 {
                grid-column: 1 / 3;
            }
        }
    }
}

@media(max-width:480px) {
    .pe-press-la-outer-wrapper {
        padding: 160px 24px 24px;
        & .pe-press-la-inner-wrapper {
            grid-template-columns: 1fr;
            & h3 {
                font-size: var(--font-size-mm);
                grid-column: 1 / 2;
            }
            & .pe-button {
                grid-column: 1;
                grid-row: 4;
                margin-top: 24px;
                margin-left: 0;
            }
        }
    }
}
/* Section Pro Press END */

/* PE Section Blog */
.pe-section-blog {
    & h2 {
        margin-bottom: 48px;
    }
}

.pe-blog-outer-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    & .pe-blog-category-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        column-gap: 44px;
        justify-content: center;
        align-items: center;
        margin-bottom: 68px;
        & .pe-blog-cat-select {
            font-family: "Aileron";
            font-weight: 400;
            font-weight: var(--font-size-mm);
            letter-spacing: .05em;
            color: var(--grey);
            transition: color .3s;
            cursor: pointer;
            &:before {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                bottom: -14px;
                height: 0;
                width: 0;
                background-color: var(--white);
                transition: all .3s;
            }
            &.active {
                color: var(--white);
                position: relative;
                &:before {
                    height: 2px;
                    width: 100%;
                }
            }
        }
    }
    & .pe-blog-sections-outer-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        overflow: hidden;
        & .pe-blog-cat-section-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr;
            grid-column: 1;
            grid-row: 1;
            column-gap: 40px;
            opacity: 0;
            transform: translateX(100dvw);
            transition: opacity .3s, transform .5s;
            &.active {
                opacity: 1;
                transform: translateX(0);
            }
            & .pe-blog-item-wrapper {
                display: flex;
                flex-direction: column;
                & .pe-blog-meta-wrapper {
                    display: flex;
                    flex-direction: row;
                    justify-items: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    column-gap: 10px;
                    margin-bottom: 18px;
                    & .pe-blog-date {
                        color: var(--green);
                        border: 1px solid var(--green);
                    }
                    & .pe-tag-wrapper {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;
                        column-gap: 10px;
                        flex-wrap: wrap;
                        & .pe-blog-cat {
                            font-family: "Aileron";
                            font-weight: 700;
                            font-size: var(--font-size-xs);
                            line-height: 1.5;
                            letter-spacing: .05em;
                            color: var(--grey);
                            margin-bottom: 0;
                        }
                    }
                }
                & .pe-blog-img {
                    border-top-left-radius: 15px;
                    border-top-right-radius: 15px;
                    width: 100%;
                    aspect-ratio: 5 / 3;
                    overflow: hidden;
                    margin-bottom: 30px;
                    & img {
                        object-fit: cover;
                    }
                }
                & h4 {
                    font-family: "Aileron";
                    font-weight: 700;
                    font-size: var(--font-size-mm);
                    line-height: 1.5;
                    letter-spacing: .05em;
                    color: var(--white);
                    margin-bottom: 18px;
                }
                & .pe-blog-teaser {
                    color: var(--white2);
                }
                .pe-button {
                    margin-left: 2px;
                    margin-right: 2px;
                }
            }
        }
    }
}

.pe-button:has(.excerpt-read-more) {
    margin-top: 24px;
}

@media(max-width: 1079.98px) {
    .pe-blog-outer-wrapper {
        & .pe-blog-sections-outer-wrapper {
            & .pe-blog-cat-section-wrapper {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto;
                column-gap: 36px;
                row-gap: 36px;
            }
        }
    }
}

@media(max-width: 767.98px) {
    .pe-blog-outer-wrapper {
        & .pe-blog-category-wrapper {
            column-gap: 24px;
            row-gap: 16px;
            flex-wrap: wrap;
        }
        & .pe-blog-sections-outer-wrapper {
            & .pe-blog-cat-section-wrapper {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
            }
        }
    }
}
/* PE Section Blog END */

/* PE Section Socials */
.pe-section-socials {
    & .navbar-social-menu {
        margin-bottom: 68px;
        & ul {
            justify-content: center;
        }
    }
    & #sb_instagram {
        padding-bottom: 48px !important;
        & #sbi_images {
            padding: 0;
        }
    }
}

@media(max-width: 767.98px) {
    .pe-section-socials {
        & .navbar-social-menu {
            margin-bottom: 48px;
        }
    }
    & #sb_instagram {
        padding-bottom:24px !important;
    }
}
/* PE Section Socials END */

/* PE Join Paradise */
.pe-form-toggle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 16px;
}

button.pe-button {
    font-family: "Inter";
    font-weight: 600;
    font-size: var(--font-size-s);
    line-height: 20px;
    color: var(--white);
    margin-left: 2px;
    margin-right: 2px;
    border: none;
    padding: 10px 50px 10px 20px;
    cursor: pointer;
    &.pe-active-form {
        color: var(--black);
        background-color: var(--white);
        box-shadow: inset -2px -1px 3px 0px rgba(255, 255, 255, 0.0), -2px 0px 1px 0px rgba(255, 255, 255, 0.0);
        &:after {
            filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7492%) hue-rotate(200deg) brightness(117%) contrast(101%);
        }
    }
}

.pe-join-pe-form-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 0;
    overflow: hidden auto;
    /* transition: height .5s; */
}

.pe-join-pe-form-wrapper:has(.pe-show-form) {
    /* height:566px; */
    height: fit-content;
}

.wpcf7:has(#pe-form-artist, #pe-form-label) {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .5s, opacity .5s;
}

.wpcf7.pe-show-form:has(#pe-form-artist, #pe-form-label) {
    opacity: 1;
    transform: translateX(0);
}

#main .wpcf7-form {
    margin-bottom: 0;
}

#main .wpcf7-form .pe-form-section {
    margin: 0 auto 48px;
    max-width: 686px;
    &:last-of-type {
        margin-bottom: 0;
    }
    & p {
        font-weight: 500;
        font-size: var(--font-size-m);
        color: var(--white);
        margin-bottom: 24px;
        &:last-child {
            margin-bottom: 0;
        }
        & a {
            text-decoration: none;
            color: var(--orange);
            opacity: 1;
            cursor: pointer;
            transition: color .3s;
        }
    }
    & label {
        font-weight: 500;
        font-size: var(--font-size-m);
        color: var(--white);
        display: block;
        padding: 0 0;
        margin-bottom: 14px;
        & + br {
            display: none;
            margin-bottom: 0;
            height: 0;
        }
    }
    & .wpcf7-form-control-wrap {
        display: block;
        height: fit-content;
        width: 100%;
    }
    & input, textarea, select {
        font-family: "Inter";
        font-weight: 400;
        font-size: var(--font-size-s);
        color: var(--white);
        outline-color: var(--yellow);
        border: 1px solid var(--grey);
        border-radius: 30px;
        padding: 10px 20px;
        width: 100%;
        background-color: var(--black);
        box-sizing: border-box;
        &::placeholder {
            color: var(--white2);
        }
    }
    & select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="%238E8E8E"/></svg>');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 20px;
        cursor: pointer;
    }
    & label:has(input[type="checkbox"], input[type="radio"]) {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: fit-content;
        padding: 0 16px 0 0;
        & :is(input[type="checkbox"], input[type="radio"]) {
            margin-right: 10px;
            width: fit-content;
        }
    }
    & textarea {
        border-radius: 16px;
    }
    & .wpcf7-checkbox {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        & .wpcf7-list-item > label {
            margin-bottom: 0;
        }
        & .wpcf7-list-item-label {
            text-wrap: nowrap;
        }
    }
    & .wpcf7-radio {
        display: flex;
        flex-direction: row;
        column-gap: 16px;
        & .wpcf7-list-item > label {
            margin-bottom: 0;
        }
    }
    & p:has(> span .wpcf7-validates-as-required) > label:after {
        content: "\00a0*";
        display: inline;
        color: var(--orange);
    }
    & .wpcf7-not-valid-tip {
        color: var(--orange);
        display: block;
        margin-top: 4px;
    }
    & .small-text {
        font-size: var(--font-size-s);
        color: var(--white);
    }
    & .wpcf7-captchac {
        border: 1px solid var(--white);
        border-radius: 30px;
        padding: 10px 20px;
        height: 30px;
        width: auto;
        background-color: var(--white);
    }
    & p:has(.wpcf7-submit) {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    & .wpcf7-submit {
        font-family: "Inter";
        font-weight: 600;
        font-size: var(--font-size-s);
        line-height: 20px;
        text-transform: none;
        color: var(--black);
        position: relative;
        border: none;
        width: fit-content;
        background-color: var(--white);
        cursor: pointer;
        transition: color .3s .3s, background-color .3s;
    }
}

.pe-form-section.separation-line {
    position: relative;
    padding-bottom: 48px;
    &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        max-width: 530px;
        background-color: var(--white);
        background: linear-gradient(90deg, rgba(142, 142, 142, 0) 0%, rgba(142, 142, 142, 1) 44.23%, rgba(142, 142, 142, 1) 65.87%, rgba(142, 142, 142, 0) 100%);
        opacity: .5;
    }
}

.pe-form-2col {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 26px;
    margin-bottom: 24px;
    &:last-child {
        margin-bottom: 0;
    }
    & > div {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 50%;
    }
    & > div > p {
        display: flex;
        flex-direction: column;
        &:first-of-type{
            justify-content: space-between;
            height: 100%;
        }
        &:last-of-type {
            margin-bottom: 0 !important;
        }
    }
}

#main .wpcf7-form .wpcf7-response-output {
    margin: 48px auto 48px;
    border-radius: 30px;
    max-width: 686px;
}

@media(max-width:480px) {
    .pe-form-2col {
        flex-direction: column;
        row-gap: 24px;
        margin-bottom: 24px;
        & > div {
            width: 100%;
        }
        & > div > p {
            justify-content: flex-start;
            height: fit-content;
        }
    }
}
/* PE Join Paradise END */


/* PE PSS Content */
.pe-section-wrapper .pe-section-pss-content {
    & p {
        text-align: left;
        color: var(--grey);
    }
    & h2 {
        text-align: left;
    }
    & p.pe-pss-overline {
        font-family: "Aileron";
        font-weight: 600;
        font-size: var(--font-size-ml);
        line-height: .94em;
        letter-spacing: .03em;
        color: var(--white);
        margin-bottom: 4px;
    }
}

.pe-pss-embed-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 686px;
    & iframe {
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        overflow: hidden;
    }
}

.pe-pss-quote-wrapper {
    font-weight: 500;
    font-size: var(--font-size-l);
    line-height: 1.3em;
    letter-spacing: .02em;
    text-align: center;
    color: var(--white);
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        max-width: 530px;
        background-color: var(--white);
        background: linear-gradient(90deg, rgba(142,142,142,0) 0%, rgba(142,142,142,1) 44.23%, rgba(142,142,142,1) 65.87%, rgba(142,142,142,0) 100%);
        opacity: .5;
    }
    &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        max-width: 530px;
        background-color: var(--white);
        background: linear-gradient(90deg, rgba(142,142,142,0) 0%, rgba(142,142,142,1) 44.23%, rgba(142,142,142,1) 65.87%, rgba(142,142,142,0) 100%);
        opacity: .5;
    }
}


.pe-pss-img-text-cols-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    margin-left: auto;
    margin-right: auto;
    max-width: 686px;
}

.pe-pss-img-text-col-wrapper {
    display: grid;
    grid-template-columns: 230px auto;
    column-gap: 26px;
    align-items: start;
    position: relative;
    padding-bottom: 32px;
    &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        max-width: 530px;
        background-color: var(--white);
        background: linear-gradient(90deg, rgba(142, 142, 142, 0) 0%, rgba(142, 142, 142, 1) 44.23%, rgba(142, 142, 142, 1) 65.87%, rgba(142, 142, 142, 0) 100%);
        opacity: .5;
    }
    &:last-of-type {
        padding-bottom: 0;
        &:after {
            display: none;
        }
    }
    & .pe-pss-img {
        grid-column: 1;
        overflow: hidden;
        & img {
            border-radius: 15px;
            object-fit: contain;
        }
        &.logo img {
            border-radius: 0;
            height: 45px;
            width: auto;
            max-width: 220px;
            object-fit: contain;
        }
    }
    & .pe-pss-text {
        grid-column: 2;
        & p:last-child {
            margin-bottom: 0;
        }
    }
}

.pe-pss-contact-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 60px;
    margin-left: auto;
    margin-right: auto;
    max-width: 686px;
    & .pe-button {
        margin: 0;
    }
    & .navbar-social-menu ul {
        justify-content: flex-start;
        margin-bottom: 0;
    }
}

@media(max-width: 767.98px) {
    .pe-section-wrapper .pe-section-pss-content p.pe-pss-overline {
        letter-spacing: .06em;
    }
    .pe-pss-img-text-cols-wrapper {
        row-gap: 24px;
    }
    .pe-pss-img-text-col-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: 24px;
        padding-bottom: 24px;
        & .pe-pss-img {
            grid-column: 1;
            grid-row: 1;
            & img {
                object-fit: cover;
            }
        }
        & .pe-pss-text {
            grid-column: 1;
            grid-row: 2;

        }
    }

    .pe-pss-contact-wrapper {
        row-gap: 48px;
    }
}

/* PE PSS Content END */

/* 404 */
.error404 .entry-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 686px;
}
/* 404 END */

/* Hover States */
@media(hover:hover) {
    /* general link hover */
    a:hover {
        opacity: .8;
    }
    /* desktop menu items no-scroll */
    nav.main-menu .navbar-menu li a:hover {
        color: var(--orange);
        opacity: 1;
    }
    /* icon hover social menu */
    /* fades in icon with the hover color */
    div.navbar-social-menu ul li:hover:before {
        opacity: 1;   
    }
    /* hover scrolled navbar */
    nav.main-menu.top-nav-small.header-down {
        & .navbar-menu ul li a:hover {
            color: var(--white);
        }
        & .pe-button:hover {
            background-color:var(--black);
            & a {
                color: var(--white);
                opacity: 1;
            }
        }
        & .pe-button:hover:after {
            filter: none;
        }
    }

    /* footer menu items */
    .pe-footer-outer-wrapper nav .cf ul li a:hover {
        opacity: 1;
    }
    /* buttons */
    .pe-button {
        &.glass {
            &:hover {
                background-color: var(--orange);
                opacity: 1;
                box-shadow: inset -2px -1px 3px 0px rgba(255,255,255,0.0), -2px 0px 1px 0px rgba(255,255,255,0.0);
            }
        }
        &:hover {
            background-color: var(--orange);
            opacity: 1;
        }
    }
    .pe-service-card-popup .pe-button:hover {
        background-color: var(--orange);
        opacity: 1;
        box-shadow: inset -2px -1px 3px 0px rgba(255,255,255,0.0), -2px 0px 1px 0px rgba(255,255,255,0.0);
    }
    /* Services Cards */
    & .pe-service-card-inner-wrapper .pe-service-card-wrapper img:hover {
        top: -10px;
        left: -10px;
        height: calc(100% + 20px);
        width: calc(100% + 20px);
    }
    /* blog category */
    .pe-blog-outer-wrapper .pe-blog-category-wrapper .pe-blog-cat-select:hover {
       color: var(--white); 
    }
    /* contact form text links */
    #main .wpcf7-form .pe-form-section p a:hover {
        opacity: .8;
    }
    /* contact form submit button */
    #main .wpcf7-form .pe-form-section .wpcf7-submit:hover {
        background-color: var(--orange);
    }
}
/* Hover States END */