/*#region General Styles */
.page_row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    background-image: var(--background_image);
    background-size: cover;
    background-position: center;
    background-attachment: var(--background_attachment);
}

.page_row--overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.page_row__column {
    position: relative;
}

.page_row__column__inline {
    padding: var(--padding);
    width: 100%;
}

.centre_text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.content_cta_container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.content_cta {
    background-color: var(--button-background);
    border-radius: 5px;
    color: var(--button-color);
    padding: 7px;
    text-decoration: none;
    width: fit-content;
}

.page_row__column--img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/*#endregion General Styles */

/* #region Social Media */
.chat_with_us {
    background: linear-gradient(90deg, var(--pc), var(--ac));
    border: 2px solid var(--pc);
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 20px;
    border-radius: 20px 20px 0px 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 60px;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: none;
}

.chat_with_us:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px color-mix(in srgb, var(--pc) 45%, transparent);
}

.chat_with_us::before {
    content: '';
    position: absolute;
    border: 1px solid var(--pc);
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    border-radius: 20px 20px 0px 20px;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat_with_us:hover::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

.chat_with_us__whatsapp_icon {
    height: 23px;
    width: 23px;
}

.chat_with_us__text {
    color: black;
}

/* #endregion */

/* #region Page Loader */
.page_loader {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--bg);
    border: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page_loader__conatiner {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
}

.page_loader .box_wrap {
    width: 70%;
    height: 70%;
    position: relative;
    transform: rotate(-45deg);
}

.page_loader .box_wrap .box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(135, 0, 0, .6);
    background: linear-gradient(to right, var(--pc), var(--ac));
    background-position: 0% 50%;
    background-size: 1000% 1000%;
    visibility: hidden;
}

.page_loader .box_wrap .box.one {
    animation: moveGradient 20s infinite, oneMove 4s infinite;
}

.page_loader .box_wrap .box.two {
    animation: moveGradient 20s infinite, twoMove 4s .15s infinite;
}

.page_loader .box_wrap .box.three {
    animation: moveGradient 20s infinite, threeMove 4s .3s infinite;
}

.page_loader .box_wrap .box.four {
    animation: moveGradient 20s infinite, fourMove 4s .575s infinite;
}

.page_loader .box_wrap .box.five {
    animation: moveGradient 20s infinite, fiveMove 4s .725s infinite;
}

.page_loader .box_wrap .box.six {
    animation: moveGradient 20s infinite, sixMove 4s .875s infinite;
}

@keyframes moveGradient {
    to {
        background-position: 100% 50%;
    }
}

@keyframes oneMove {
    0% {
        visibility: visible;
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

@keyframes twoMove {
    0% {
        visibility: visible;
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

@keyframes threeMove {
    0% {
        visibility: visible;
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(0% 70% 70% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(35% 70% 35% 0 round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

@keyframes fourMove {
    0% {
        visibility: visible;
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

@keyframes fiveMove {
    0% {
        visibility: visible;
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

@keyframes sixMove {
    0% {
        visibility: visible;
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    14.2857% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    28.5714% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    42.8571% {
        clip-path: inset(70% 0 0 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    57.1428% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    71.4285% {
        clip-path: inset(35% 0% 35% 70% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    85.7142% {
        clip-path: inset(35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }

    100% {
        clip-path: inset(70% 35% 0% 35% round 5%);
        animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}

.loadingScreen {
    width: fit-content;
    margin-top: -50px;
}

.loadingScreen .loadingScreen__text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    color: var(--fg);
    text-transform: uppercase;
    font-size: 30px;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span {
    font-size: 30px;
    padding: 5px;
    vertical-align: middle;
    backface-visibility: hidden;
    display: inline-block;
    animation-name: charColor;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(1) {
    animation-delay: 100ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(2) {
    animation-delay: 200ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(3) {
    animation-delay: 300ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(4) {
    animation-delay: 400ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(5) {
    animation-delay: 500ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(6) {
    animation-delay: 600ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(7) {
    animation-delay: 700ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(8) {
    animation-delay: 800ms;
}

.loadingScreen .loadingScreen__text .loadingScreen__text__span:nth-child(9) {
    animation-delay: 900ms;
}

@keyframes charColor {
    0% {
        color: var(--bg);
        /* lighten(#ddd, 46%) */
    }

    50% {
        color: var(--fg);
    }

    100% {
        color: var(--bg);
        /* lighten(#ddd, 46%) */
    }
}

/* #endregion */

/* #region Global Notification Popup */
#global_notification_popup {
    position: absolute;
    z-index: 12;
    top: 40px;
    right: 0;
    height: auto;
    width: 400px;
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification_popup__container {
    height: auto;
    display: flex;
    position: relative;
    gap: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    border-radius: 5px;
    width: 100%;
    padding: 10px 5px 10px 10px;
    min-height: 60px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.65)
}

.notification_popup__container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 20px;
    border-left: 1px solid;
    border-right: 2px solid;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    transform: translate(0, -50%);
}

.notification_popup__container {
    border: 1px solid rgba(36, 241, 6, 0.64);
    background: rgba(28, 45, 35, 0.85);
    color: rgb(76, 197, 74);
}

.notification_popup__icon {
    flex-shrink: 0;
    height: 30px;
    width: 30px;
}

.notification_popup__massage {
    color: rgb(76, 197, 74);
    !important;
}

/* #endregion */

/* #region Standard Layouts */
.svg_loader {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg);
}

.svg_container {
    width: 50%;
    height: 200px;
}

.svg_container>path {
    fill: none;
    stroke-width: 8;
    stroke: white;
    stroke-dasharray: 5000;
    /* total path length */
    stroke-dashoffset: 5000;
    /* hide the stroke initially */
}

.page_row[data-row-layout="layout_1"] .page_row__column {
    flex: 1 1 100%;
    width: 100%;
}

.page_row[data-row-layout="layout_1_1"] .page_row__column {
    flex: 1 1 50%;
    width: 50%;
}

.page_row[data-row-layout="layout_2_3"] .page_row__column:nth-child(1) {
    flex: 1 1 40%;
    width: 40%;
}

.page_row[data-row-layout="layout_2_3"] .page_row__column:nth-child(2) {
    flex: 1 1 60%;
    width: 60%;
}

.page_row[data-row-layout="layout_3_7"] .page_row__column:nth-child(1) {
    flex: 1 1 30%;
    width: 30%;
}

.page_row[data-row-layout="layout_3_7"] .page_row__column:nth-child(2) {
    flex: 1 1 70%;
    width: 70%;
}

.page_row[data-row-layout="layout_1_2_2_2_1"] .page_row__column:nth-child(1),
.page_row[data-row-layout="layout_1_2_2_2_1"] .page_row__column:nth-child(5) {
    flex: 1 1 12.5%;
    width: 12.5%;
}

.page_row[data-row-layout="layout_1_2_2_2_1"] .page_row__column:nth-child(2),
.page_row[data-row-layout="layout_1_2_2_2_1"] .page_row__column:nth-child(3),
.page_row[data-row-layout="layout_1_2_2_2_1"] .page_row__column:nth-child(4) {
    flex: 1 1 25%;
    width: 25%;
}

/* #endregion Standard Layouts */

/* #region Custom Layouts */

/* #region Skyline Left */
.skyline_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.skyline_left__left_block {
    flex: 1 1 50%;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.skyline_left__image_container {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.skyline_left__image_container img {
    height: 100%;
    object-fit: cover;
}

.skyline_left__image_container:first-child {
    width: 40%;
}

.skyline_left__image_container:first-child::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--pc);
    opacity: 0.7;
    left: 0;
    top: 0;
}

.skyline_left__image_container:last-child {
    width: 60%;
}

.skyline_left__image_container:last-child::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 100%;
    background-color: var(--fg);
    opacity: 0.6;
    left: 0;
    top: 0;
}

.skyline_left__image_container:last-child::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    background-color: var(--fg);
    opacity: 0.6;
    left: 0;
    top: 0;
}

.skyline_left__right_block {
    flex: 1 1 50%;
    width: 50%;
    padding: 2% 4%;
}

/* #endregion Skyline Left */

/* #region Skyline Right */
.skyline_right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.skyline_right__right_block {
    flex: 1 1 50%;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.skyline_right__image_container {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.skyline_right__image_container img {
    height: 100%;
    object-fit: cover;
}

.skyline_right__image_container:first-child {
    width: 60%;
}

.skyline_right__image_container:first-child::before {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 55px;
    background-color: var(--ac);
    height: 450px;
    width: 40px;
    z-index: 2;
}

.skyline_right__image_container:first-child::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 100%;
    background-color: var(--pc);
    right: 0;
    top: 0;
}

.skyline_right__image_container:last-child {
    width: 40%;
}

.skyline_right__image_container:last-child::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--pc);
    opacity: 0.7;
    left: 0;
    top: 0;
}

.skyline_right__image_container:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -40px;
    background-color: var(--fg);
    height: 250px;
    width: 25px;
    z-index: 2;
}

.skyline_right__left_block {
    flex: 1 1 50%;
    width: 50%;
    padding: 2% 4%;
}

/* #endregion Skyline Right */

/* #endregion Custom Layouts */

/* #region Responsive Design */

[data-display="all"] {
    display: flex;
}

[data-display="desktop_only"] {
    display: flex;
}

[data-display="mobile_only"] {
    display: none;
}

@media (max-width: 768px) {
    .page_row {
        flex-direction: column;
        flex: 1 1 100%;
    }

    .page_row__column {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .page_row__column__inline {
        padding: calc(var(--has_padding) * 5%);
    }

    .skyline_left,
    .skyline_right {
        flex-direction: column;
    }

    .skyline_left__left_block,
    .skyline_left__right_block,
    .skyline_right__left_block,
    .skyline_right__right_block {
        width: 100%;
        flex: 1 1 100%;
        padding: 20px 0px;
    }

    .skyline_left__right_block,
    .skyline_right__left_block {
        padding: 5%;
    }

    .skyline_left__image_container,
    .skyline_right__image_container {
        height: 350px;
    }

    .skyline_right__image_container:first-child::before {
        height: 300px;
    }

    [data-display="mobile_only"] {
        display: flex;
    }

    [data-display="desktop_only"] {
        display: none;
    }
}

@media (max-width: 430px) {
    [data-display="mobile_only"] {
        display: flex;
    }

    [data-display="desktop_only"] {
        display: none;
    }
}

/* #endregion Responsive Design */