/*
Theme Name: Koncept Play
Text Domain: koncept-play
Author: Koncept Play
Description: Koncept Play Theme for 2025
Version: 1.0
*/
:root {
    font-size: 13px;
    color: var(--text-primary);
    font-family: "TH-Body";
    --primary-color: #243447;
    --ps: rgb(36, 52, 71, 0);
    --secondary-color: #476f95;
    --backup-color: #374c66;
    --accent-a: #b6985b;
    --accent-b: #cdba96;
    --accent-c: #b9a98d;
    --accent-d: #857946;
    --text-primary:#ffffff;
    --text-secondary:#F2F2F2;
    --black-primary:#000000;
    --black-secondary:#1c1c1c;

    --margin-b: 1rem;
    --gap-big: 2rem;
    --gap-mid: 1rem;
    --gap-sm: 0.5rem;

    --hero-h1: 3rem;

    --text-h1: 2rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-sh: 1.25rem;
    --text-sm: 1rem;

    --swiper-pagination-color: var(--accent-a);
    --swiper-navigation-size: 16px !important;
}

.main-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-home {
    background-image: linear-gradient(0deg, rgba(242, 224, 186, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-marina {
    background-image: linear-gradient(0deg, rgba(212, 230, 245, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-harmonia {
    background-image: linear-gradient(0deg, rgba(219, 240, 194, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-olympus {
    background-image: linear-gradient(0deg, rgba(245, 229, 219, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-paradise {
    background-image: linear-gradient(0deg, rgba(219, 224, 226, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-pattaya {
    background-image: linear-gradient(0deg, rgba(253, 230, 206, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-pratumnak {
    background-image: linear-gradient(0deg, rgb(202, 192, 180, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-thecloud {
    background-image: linear-gradient(0deg, rgba(172, 208, 228, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-tower {
    background-image: linear-gradient(0deg, rgba(221, 196, 170, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

.bg-tropicana {
    background-image: linear-gradient(0deg, rgba(213, 221, 198, 0.5)), url(/wp-content/uploads/img/generic/marble2.webp);
}

html {
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
}

a {
    text-decoration: none;
}

.section-404 {
    min-height: 80vh;
}

.privacy-link a {
    color: var(--accent-a) !important;
}

.privacy-img img {
    width: 100%;
    height: auto;
} 

.indent {
    text-indent: 1rem;
}

.indent2 {
    text-indent: 2rem;
}

main {
    color: var(--text-primary);
}

body {
    margin: 0;
    padding: 0;
}

h1, .h1 {
    font-family: "TH-Body";
    font-size: var(--text-h1);
    font-weight: 700;
    margin: 0;
}

h2, .h2 {
    font-family: "TH-Body";
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0;
}

h3, .h3 {
    font-family: "TH-Body";
    font-size: var(--text-h3);
    font-weight: 600;
    margin: 0;
}

.hero1 {
    font-family: "TH-Body";
    font-size: var(--hero-h1);
    font-weight: 800;
    margin: 0;
}

.hero2 {
    font-family: "TH-Body";
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0;
}

.hero3 {
    font-family: "TH-Body";
    font-size: var(--text-h3);
    font-weight: 600;
    margin: 0;
}

.subheading {
    font-family: "TH-Body";
    font-size: var(--text-sh);
    font-weight: 400;
    margin: 0;
}

p, li {
    font-family: "TH-Body";
    font-size: var(--text-sm);
    font-weight: 400;
    margin: 0;
    line-height: 2rem;
}

.label {
    font-family: "TH-Body";
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

/* Animations Start*/

.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--backup-color);
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after, .hover-underline-animation:focus::after {
    transform: scaleX(1);
}

.hover-underline-animation.left::after {
  transform-origin: bottom right;
}

.hover-underline-animation.left:hover::after, .hover-underline-animation.left:focus::after {
  transform-origin: bottom left;
}

.hover-underline-animation.center::after {
  transform-origin: bottom center;
}

.hover-underline-animation.center:hover::after, .hover-underline-animation.center:focus::after {
  transform-origin: bottom center;
}

.hover-underline-animation.right::after {
  transform-origin: bottom left;
}

.hover-underline-animation.right:hover::after, .hover-underline-animation.right:focus::after {
  transform-origin: bottom right;
}

/* Animations End*/

/* Global Elements Starts*/

    /* Button primary */

        .button-container {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .button-primary {
            border: none;
            background: var(--black-primary);
            transition: background-color 0.2s ease-in-out;
            padding: 0;
            cursor: pointer;
        }

        .button-primary:hover {
            background-color: var(--black-secondary);
        }

        .button-primary-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-primary);
            transition: all ease 0.2s;
            padding: 1rem 2rem;
            text-align: center;
        }

    /* Button secondary */

        .button-secondary {
            border: none;
            background: var(--accent-a);
            transition: background-color 0.2s ease-in-out;
            padding: 0;
            cursor: pointer;
        }

        .button-secondary:hover {
            background-color: var(--text-primary);
        }

        .button-secondary-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--black-primary);
            transition: all ease 0.2s;
            padding: 1rem 2rem;
            text-align: center;
        }

    /* Button Outline */

        .button-outline {
            border: 2px solid var(--text-primary);
            background-color: transparent;
            transition: background-color 0.2s ease-in-out;
            padding: 0;
            cursor: pointer;
        }

        .button-outline:hover {
            background-color: var(--secondary-color);
        }

        .button-outline-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-primary);
            transition: all ease 0.2s;
            padding: 1rem 2rem;
            text-align: center;
        }

    /* Button underline */

        .button-underline {
            background-color: transparent;
            border: none;
            width: max-content;
            padding: 0;
            text-decoration: underline;
            cursor: pointer;

            font-family: "TH-Body";
            font-size: 1rem;
            font-weight: 500;
            margin: 0;
        }

    /* Accordian */

        .accordian {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: var(--gap-big) 0;
        }

        .accordian-container {
            display: flex;
            gap: 1.5rem;
            color: var(--primary-color);
            width: 100%;
            flex-direction: column;
        }

        .flex-r {
            flex-direction: column;
        }

        .accordian-header {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            position: relative;
        }

        .accordian-title {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .accordian-arrow {
            display: flex;
            align-items: center;
            transition: transform 0.2s ease-in-out;
            transform: rotate(-90deg);
        }

        .accordian-arrow svg{
            fill: var(--text-primary);
            width: 10px;
            height: 10px;
        }

        .accordian-header img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 16/4;
        }

        .accordian-card-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            flex: 1 1 50%;
        }

        .accordian-card {
            display: flex;
            flex-direction: column;
        }

        .accordian-card-info {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.2s ease-out;
        }

        .accordian-p {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
        }

        .accordian-card-title {
            cursor: pointer;
            padding: 1rem 1rem;
            color: var(--text-primary);
            background: var(--primary-color);
            border-bottom: 4px solid var(--accent-a);
            transition: border 200ms ease-in-out;
            user-select: none;
            display: flex;
            gap: 1rem;
        }

        .accordian-card-title.active > .accordian-arrow {
            transform: rotate(0deg);
        }

    /* Gallery Zoom */
    /* The Modal (background) */
        .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 4000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        justify-content: center;
        align-items: center;
        }

        /* Modal Content (image) */
        .modal-content {
        margin: auto;
        display: block;
        max-height: 80vh;
        max-width: 80vw;
        }

        /* Caption of Modal Image */
        #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
        }

        /* Add Animation */
        .modal-content, #caption {  
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
        }

        /* Add Animation */
        .modal-content, #caption {  
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)}
        }

        @keyframes zoom {
        from {transform:scale(0.1)} 
        to {transform:scale(1)}
        }

        /* The Close Button */
        .close {
        position: absolute;
        top: 0;
        right: 0;
        color: var(--text-primary);
        font-size: 4rem;
        font-weight: bold;
        transition: 0.3s;
        width: 100%;
        height: 100%;
        }


        /* Global Padding */

        .blog {
            padding: 3.75rem;
        }

    /* Hero header */

    .hero-base {
        position: relative;
        height: 60vw;
        width: 100%;
        background-color: var(--primary-color);
    }

    .hero-base-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }

    .hero-base-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--gap-big) 0;
        margin-left: 0;
        gap: 1rem;
        width: 100%;
    }

    .hero-title {
        color: var(--text-primary);
        
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: left;
        text-shadow: 2px 5px 4px rgb(0, 0, 0, 0.4);
    }

/* Global Elements Ends*/

/* Navbar Starts */

nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    transition: all 0.3s ease;
    background-color: var(--text-primary);
}

.navbar{
    display: flex;
    padding: 1rem 0;
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-left svg,
.nav-left img{
    display: block;
    width: auto;
    height: 40px;
}

.nav-right {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: right;
    gap: 1rem;
}

.nav-item {
    display: none;
    height: 100%;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--black-primary);
    transition: color ease 0.2s;
    font-weight: 600;
}

.nav-item:hover{
    color: var(--backup-color);
}

.nav-cta {
    display: none;
    align-items: center;
    text-decoration: none;
    background-color: var(--black-primary);
    transition: all ease 0.2s;
    text-decoration: none;
    border: 2px solid var(--black-primary);
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
}

.nav-cta:hover {
    background-color: var(--black-secondary);
    border: 2px solid var(--black-secondary); 
    color: var(--text-primary);
}

.nav-prop {
    position: relative;
}

.nav-prop > button {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 1rem;
    color: var(--black-primary);
    cursor: pointer;
    height: 100%;
    transition: color 0.2s ease-in-out;
    font-weight: 600;
}

.nav-prop > button:hover{
    color: var(--backup-color);
}

.nav-prop.active > button{
    color: var(--backup-color);
}

.nav-prop-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    background-color: var(--text-primary);
    color: var(--primary-color);
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: all 0.2s ease-in-out;
    width: 250px;
}

.nav-prop.active::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--backup-color);
    transition: transform 0.25s ease-out;
}

.nav-prop.active > button + .nav-prop-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.prop-links {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
}

.link {
    padding: 1rem;
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid var(--text-secondary);
}

.link:hover {
    text-decoration: none;
    color: var(--black-primary);
    background-color: var(--text-secondary);
}

.prop-links > a:hover {
    background-color: var(--accent-b);
}

.navlink-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    cursor: auto;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
}

.navlink-subgroup-title {
    cursor: auto;
    padding: 0.5rem 1.5rem;
}

.nav-lang {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 0.5rem;
    gap: 0.5rem;
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    position: relative;
}

.nav-lang:hover > button{
    background-color: var(--text-secondary);
    color: var(--black-primary);
    border-color: var(--text-secondary);
}

.nav-lang > button {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    height: 100%;
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--text-primary);
    gap: 0.5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.nav-lang svg {
    pointer-events: none;
    width: 18px;
    height: 12px;
}

.nav-lang.active {
    background-color: var(--text-secondary);
}

.nav-lang.active > button{
    color: var(--black-primary);
    border-color: var(--text-secondary);
}

.nav-lang-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    background-color: var(--text-primary);
    color: var(--primary-color);
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: all 0.2s ease-in-out;
}

.nav-lang.active > button + .nav-lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-links {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.lang-link {
    display: flex;
    flex: 1;
    padding: 1rem;
    text-decoration: none;
    color: var(--primary-color);
    border-bottom: 1px solid var(--text-secondary);
    transition: all 0.2s ease-in-out;
    gap: 0.5rem;
}

.lang-link:hover {
    text-decoration: none;
    color: var(--black-primary);
    background-color: var(--text-secondary);
}

.lang-svg-wrapper svg{
    pointer-events: none;
    width: 18px;
    height: 12px;
}

.nav-burger {
    display: block;
}

.nav-burger > button {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    height: 100%;
    transition: color 0.2s ease-in-out;
    padding: 0;
    display: flex;
}

.navbar-side {
    padding: 1rem;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.sidebar {
    position: fixed;
    opacity: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--text-primary);
    color: var(--primary-color);
    z-index: 999;
    transform: translateX(100vw);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: scroll;
}

.sidenav-container {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 2rem 1rem 0;
    flex: 1 1 0%;
}

.sidenav-item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 100%;
}

.sidenav-close {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 3rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    display: flex;
    width: max-content;
}

.sidenav-prop {
    position: relative;
    display: flex;
    flex-direction: column;
}

.sidenav-prop > button {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease-in-out;
    border-top: 1px solid var(--text-secondary);
    padding: 1rem;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
}

.sidenav-prop > button.active {
    color: var(--text-primary);
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

.sidenav-prop.active > button {
    color: var(--secondary-color);
}

.sidenav-prop-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.sidenav-prop-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.sidenav-prop-main{
    background-color: var(--accent-a);
    color: var(--primary-color);
    flex: 1 1 100%;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.sidenav-subgroup {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
}

.sidenav-subgroup-item {
    display: flex;
    flex-direction: column;
}

.sidelink {
    flex: 1;
    padding: 1rem;
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.2s ease-in-out;
    text-align: center;
    font-size: 1.5rem;
}

.sidenav-item {
    padding: 1rem;
    text-decoration: none;
    color: var(--primary-color);
    border-top: 1px solid var(--text-secondary);
    transition: all 0.2s ease-in-out;
    appearance: none;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
}

.sidenav-item:nth-last-child(1) {
    border-bottom: 1px solid var(--text-secondary);
}

.navbar-side {
    display: none;
}

.show {
    display: flex !important;
}

.show2 {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.show3 {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* Koncept Theme Start */

.bg-white {
    background-color: var(--text-primary);
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3 {
    color: var(--text-primary);
}

.bg-secondary {
    background-color: var(--text-secondary);
}

.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary p,
.bg-secondary span {
    color: var(--black-primary);
}

.bg-section {
    padding: var(--gap-big) 0;
}

.promo {
    display: flex;
    height: 100vh;
    object-fit: cover;
}

.promo {
    height: 100% !important;
}

.promo-display {
    width: 100%;
    display: flex;
    justify-content: center;
}

.category-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--gap-mid);
}

.category-carousel {
    display: flex;
    gap: var(--gap-mid);
    width: 100%;
}

.cat-overflow {
    overflow: visible !important;
}

.cat-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
    /* max-width: 33%; */
}

.cat-item {
    display: flex;
    position: relative;
    filter: drop-shadow(0 2px 5px 0 rgb(0, 0, 0, 0.2));
    flex-direction: column;
    overflow: hidden;
    transition-property: box-shadow, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    border-radius: 2rem;
    aspect-ratio: 1/1;
}

.cat-item::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
}

.cat-img {
    width: 100%;
    min-height: 250px;
    height: 50vw;
    display: flex;
    position: relative;
}

.cat-img img{
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    transform: scale(1.1);
}

.cat-item:hover > .cat-img > img {
    transform: scale(1);
}

.cat-title {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.cat-title h3{
    padding: var(--gap-mid) 0;
    color: var(--text-primary);
    text-align: center;
}

.about-wrap {
    color: var(--black-primary);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 200vh;
    justify-content: center;
}

.about-item {
    z-index: 1;
    padding: var(--gap-mid);
    box-sizing: border-box;
}

.about1 {
    flex: 0 1 80%;
}

.about2 {
    flex: 1 1 50%;
}

.about3 {
    flex: 1 1 50%;
}

.about-text {
    position: sticky;
    text-align: center;
    padding-top: 5rem;
    top: 0;
}

.about {
    min-height: 200vh;
    position: relative;
}

.about-bg {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    right: 0%;
    bottom: 0;
    z-index: 0;
}

.about-img-wrap {
    position: relative;
    width: 100%;
    overflow-x: clip;
}

.about-img{
    position: sticky;
    top: 50%;
    width: 100%;
    height: auto;
    opacity: 0.5;
    transform: translateX(20%);
}

.tiktok {
    display: flex;
    gap: var(--gap-mid);
    overflow: auto;
    width: 100%;
}

/* Koncept Theme End */

.hero {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    transform: translate(0, 0);
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--gap-big) var(--margin-b);
}

.hero-location {
    color: var(--text-primary);
    display: flex;
    width: 100%;
    font-style: normal;
    text-shadow: 2px 5px 4px rgb(0, 0, 0, 0.4);
}

.hero-location, .hero-title, .hero-desc {
    text-align: left;
    justify-content: flex-start;
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 60vh;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.video-wrapper video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    filter: brightness(80%);
    object-fit: cover;
}

/* Navbar Ends */

/* Homepage Starts */

    /* Benefit Starts */

    .benefit {
        display: flex;
        flex-direction: column;
    }

    .benefit-title-container {
        display: flex;
        align-items: center;
        flex: 1;
        padding: var(--gap-big) 0;
        background-color: var(--primary-color);
        border-bottom: 4px solid var(--accent-a);
    }

    .benefit-about, .benefit-award {
        display: flex;
        flex-direction: column;
        color: var(--text-primary);
        gap: 1.5rem;
    }

    .benefit-about h1, .benefit-about h2 {
        color: var(--accent-c);
    }

    .benefit-award h1, .benefit-award h2 {
        color: var(--accent-c);
    }

    .benefit-title {
        flex: 1 1 50%;
        display: flex;
        gap: 1rem;
        flex-direction: column;
        justify-content: center;
    }

    .award-text {
        text-align: center;
    }

    .benefit-img {
        flex: 1 1 60%;
        display: flex;
    }

    .benefit-img img {
        width: 100%;
        height: auto;
    }

    .benefit-copy {
        flex: 1 1 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    .benefit-copy button {
        color: var(--accent-c);
    }

    .benefit-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: var(--gap-big);
    }

    .benefit-cta h2 {
        text-align: center;
    }

    .benefit-cta-container {
        background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/img/marina/marina-room6.webp);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }

    /* Testimonial */

    .testimonial {
        background-color: var(--primary-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-primary);
        position: relative;
        padding: var(--gap-mid) var(--gap-big);
        border-bottom: 4px solid var(--accent-a);
        gap: 0.5rem;
    }

    .testimonial-display {
        width: 80%;
        display: flex;
        height: 15vw;
        justify-content: center;
        position: relative;
    }

    .swiper-review {
        width: 100%;
    }

    .testimonial-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 1rem;
        padding: 2rem 0;
    }

    .testimonial-card > .subheading {
        width: 80%;
        text-align: center;
    }

    .swiper-testimonial-author {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .testimonial-heading {
        z-index: 1;
        text-align: center;
        color: var(--accent-c);
    }

    .testimonial-carousel{
        width: 100%;
        position: relative;
        height: 100%;
    }

    .testimonial-carousel > ul{
        margin: 0;
        padding: 0rem;
        list-style: none;
    }

    .testimonial-bg svg{
        width: 50%;
        height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        fill: #44505E;
    }

    .testimonial-cta-container {
        display: flex;
    }

    /* FAQs */

    .faqs {
        display: flex;
    }

    .faqs h2{
        color: var(--primary-color);
    }

    .faqs h3{
        color: var(--primary-color);
    }

    .faq-card-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .faq-cta-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .faq-cta-container {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .faq-card-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: var(--gap-big) 0;
    }

    .faq-card-title {
        cursor: pointer;
        padding: 1rem 1rem;
        color: var(--text-primary);
        background: var(--primary-color);
        border-bottom: 4px solid var(--secondary-color);
        transition: border 200ms ease-in-out;
        user-select: none;
        display: flex;
        gap: 1rem;
    }

    .faq-card-title:hover {
        border-color: var(--accent-a);
    }

    .faq-card-title.active {
        border-color: var(--accent-a);
    }

    .faq-card-title.active > .accordian-arrow {
        transform: rotate(0deg);
    }

    .faq-card {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .faq-card-info {
        color: var(--primary-color);
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease-out;
    }

    .faq-card-info p > a {
        color: var(--primary-color);
    }

    .faq-card-info p {
        padding: 1rem;
    }

    /* Properties */

    .properties {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: var(--gap-big) 0;
        width: 100%;
    }

    .prop-heading {
        display: flex;
        justify-content: center;
        color: var(--primary-color);
    }

    .prop-container {
        display: flex;
        flex-direction: column;
        gap: var(--gap-mid);
    }

    .prop-card {
        display: flex;
        position: relative;
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.2);
        flex-direction: column;
        overflow: hidden;
        transition-property: box-shadow, transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
    }

    .prop-img {
        width: 100%;
        min-height: 250px;
        height: 50vw;
        display: flex;
        position: relative;
        background-repeat:no-repeat;
        background-position:center;
        background-size: cover;
    }

    .prop-card img{
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease-in-out;
        transform: scale(1.1);
    }

    .prop-card:hover {
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.8);
        transform: translateY(-0.5rem);
    }

    .prop-card:hover .prop-title-container{
        color: var(--text-primary);
    }

    .prop-card:hover > .prop-img > img {
        transform: scale(1);
    }

    .prop-filter-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        padding: 0.5rem;
        display: flex;
        gap: 0.5rem;
        pointer-events: none;
    }

    .prop-filter1 {
        padding: 0.5rem 1rem;
        background-color: var(--black-primary);
        color: var(--text-primary);
    }

    .prop-filter2 {
        padding: 0.5rem 1rem;
        background-color: var(--primary-color);
        color: var(--text-primary);
    }

    .prop-title-wrapper {
        width: 100%;
        background-color: var(--primary-color);
        border-bottom: 4px solid var(--accent-a);
        pointer-events: none;
        z-index: 1;
        flex-grow: 1;
    }

    .prop-title-container {
        color: var(--accent-c);
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
        transition-property: padding, color;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
    }

    .prop-info-top {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .prop-cta-container {
        display: flex;
        margin-left: auto;
        align-items: center;
        gap: 1rem;
    }

    .prop-cta {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--text-primary);
        transition: all ease 0.2s;
        border: 2px solid var(--text-primary);
        padding: 1rem 2rem;
        text-align: center;
        gap: 1rem;
    }

    .text-arrow {
        transition: transform 0.2s ease-in-out;
    }

    .prop-card:hover .text-arrow {
        transform: translateX(1rem);
    }

    .prop-card:hover .prop-cta {
        background-color: var(--accent-a);
        border: 2px solid var(--accent-a);
        color: var(--black-primary);
    }

    .prop-cta-view-container {
        display: flex;
        justify-content: center;
    }

    .prop-cta-view {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--text-primary);
        transition: all ease 0.2s;
        padding: 1rem 2rem;
        text-align: center;
    }

    /* Blog */

    .blog {
        color: var(--primary-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-mid);
        padding: var(--gap-mid) 0;
    }

    .blog-preview-wrapper {
        display: flex;
        gap: var(--gap-mid);
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .blog-preview {
        background-color: var(--text-primary);
        width: 100%;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--primary-color);
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.2);
        transition-property: box-shadow, transform, color;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
    }

    .blog-preview-img {
        overflow: hidden;
        display: flex;
    }

    .blog-preview-img img {
        transition: scale 0.2s ease-in-out;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16/9;
    }

    .blog-preview:hover {
        transform: translateY(-0.5rem);
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.8);
        color: var(--black-primary);
    }

    .blog-preview-text {
        padding: var(--gap-mid);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .blog-btn-wrap {
        display: flex;
        gap: 0.5rem;
    }

    .blog-btn, .blog-arrow {
        transition: transform 0.2s ease-in-out;
    }

    .blog-preview:hover .blog-btn {
        transform: translateX(0.5rem);
    }

    .blog-preview:hover .blog-arrow {
        transform: translateX(1rem);
    }

/* Homepage Ends */

/* Footer Start*/

footer {
    background-color: var(--text-primary);
    color: var(--black-primary);
    width: 100%;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: var(--gap-big) 0;
}

.footer-container {
    display: flex;
    width: 100%;
    gap: 1rem;
    flex-direction: column;
}

.footer-group {
    display: flex;
    flex: 1;
    gap: 1rem;
    flex-direction: column;
}

.footer-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.footer-item-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.footer-item{
    text-decoration: none;
    color: var(--black-primary);
    display: flex;
    max-width: max-content;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.social-item svg{
    width: 20px;
    height: 20px;
    fill: var(--accent-a);
    transition: fill 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border: 2px solid var(--accent-a);
    padding: 0.5rem;
    border-radius: 20px;
}

.footer-social svg:hover{
    fill: var(--text-primary);
    background-color: var(--accent-a);
}

.social-item {
    display: flex;
}

.copyright {
    display: flex;
    font-style: normal;
    color: var(--text-primary);
}

.copyright a{
    text-decoration: none;
    color: var(--text-primary);
}

.contact-us {
    background-color: rgba(0, 0, 0, .9);
    display: none;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3000;
    justify-content: center;
    color: var(--text-primary);
}

.contact-us.visible {
    display: flex;
}

.contact-us-close {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 4rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    position: absolute;
    right: var(--margin-b);
    top: var(--margin-b);
    display: flex;
}

.contact-us-close svg{
    width: 2rem;
    height: auto;
    fill: var(--text-primary);
}

.contact-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

/* Footer Start*/

/* Properties Page Start*/

.prop-hero {
    position: relative;
    height: 80vw;
    width: 100%;
}

.prop-hero img{
    position: absolute;
    object-fit: cover;
    filter: brightness(60%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Properties Page End*/

/* New Project Page Start */

.overview2 {
    background-color: var(--primary-color);
    padding: var(--gap-big) 0;
}

.overview2-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
    align-items: center;
}

.overview2-header h1 {
    color: var(--accent-a);
}

.overview2-detail-wrap {
    background-color: var(--text-secondary);
    padding: var(--gap-big) 0;
}

.overview2-detail-wrap {
    color: var(--primary-color);
}

.overview2-detail {
    color: var(--primary-color);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.overview2-detail-card {
    flex: 1 1 50%;
    padding: var(--gap-mid);
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.overview2-detail-text{
    flex: 4;
}

.overview2-detail-img{
    flex: 1;
    display: flex;
}

.overview2-detail-img svg{
    width: 2.5rem;
    height: auto;
    fill: var(--accent-a);
}

.location2 {
    display: flex;
    background-color: var(--primary-color);
    flex-direction: column;
}

.location2 h2 {
    color: var(--accent-a);
}

.location2-a {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    background-color: var(--backup-color);
    box-shadow: 4px 0px 8px 0 rgb(0, 0, 0, 0.4);
}

.location2-banner {
    flex: 1;
    display: flex;
}

.location2-text {
    text-align: center;
    padding: var(--gap-mid);
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
    align-items: center;
    justify-content: center;
}

.location2-item {
    text-align: left;
}

.location2-a img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.location2-b {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-mid);
    padding: var(--gap-big);
}

.location2-map {
    width: 90%;
    display: flex;
}

.location2-map iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.facility {
    color: var(--text-primary);
    background-color: var(--black-secondary);
}

.facility h2{
    color: var(--accent-a);
}

.facility-header {
    padding: var(--gap-big) 0;
}

.facility-display {
    padding: var(--gap-big) 0;
    background-color: var(--black-secondary);
}

.facility-section-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap-big);
    width: 100%;
}

.facility-section {
    display: flex;
    gap: var(--gap-big);
    flex-direction: column;
}

.facility-img {
    flex: 1 1 60%;
    display: flex;
    gap: 1rem;
    order: 1;
}

.facility-img img {
    width: 100%;
    height: auto;
}

.facility-text {
    flex: 1 1 40%;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
    text-align: center;
}

.facility-text h3 {
    color: var(--accent-a)
}

.facility-b {
    flex-direction: column;
}

.facility-text-b {
    align-items: center;
}

.facility-img-item {
    flex: 1;
}

.facility-swiper-wrap {
    width: 100%;
    order: 1;
}

.proj-room {
    color: var(--primary-color);
}

.proj-room-display {
    padding: var(--gap-big) 0;
}

.room-section-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap-big);
    width: 100%;
}

.room-section-wrap h2{
    text-align: center;
}

.room-section {
    display: flex;
    gap: 0;
    flex-direction: column;
    box-shadow: 0 0px 8px 0 rgb(0, 0, 0, 0.4);
}

.room-img {
    flex: 1 1 60%;
    display: flex;
    gap: 1rem;
    order: 1;
}

.room-img img {
    width: 100%;
    height: auto;
}

.room-text {
    flex: 1 1 50%;
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order: 2;
    text-align: center;
    padding-top: 1rem;
    background-color: rgb(255, 255, 255, 0.5);
}

.room-text h3 {
    color: var(--primary-color);
}

.room-text-b {
    align-items: center;
}

.room-img-item {
    flex: 1;
}

.room-swiper-wrap {
    width: 100%;
    order: 1;
}

.room-info {
    display: flex;
    gap: var(--gap-mid);
    padding: 0 var(--gap-mid);
    flex-direction: column-reverse;
}

.room-info-item {
    text-align: left;
}

.room-img {
    flex: 1;
}

.room-img img {
    width: 100%;
    height: auto;
}

.room-floor ul{
    display: flex;
    flex-wrap: wrap;
}

.room-floor li{
    flex: 1 1 50%;
}

/* Project Page Starts*/

.hide-mobile {
    display: none;
}

.project {
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.project-display {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 6rem;
}

.project-carousel {
    width: 100%;
    position: relative;
}

.project-carousel ul{
    padding: 0;
    margin: 0;
}

.project-slide {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    transition-delay: 200ms;
}

.project-slide > img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.project-slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

.projectimg {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.proj-nav, .proj-nav2 {
    display: none;
    background-color: var(--text-primary);
    position: sticky;
    z-index: 500;
    transition: top 0.3s ease;
    justify-content: center;
}

.proj-nav-wrap {
    padding: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: flex;
}

.proj-nav-wrap2 {
    padding: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: flex;
}

.proj-nav-item {
    background-color: var(--text-primary);
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    text-decoration: none;
    color: var(--primary-color);
}

.scrollpos {
    position: relative;
    display: inline-block;
}

.scrollpos::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-a);
}

.overview-wrapper {
    position: relative;
}

.overview-heading {
    padding: var(--gap-mid);
    color: var(--primary-color);
    display: flex;
    gap: 2.5rem;
    flex-direction: column;
}

.overview-info-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent-a);
    position: relative;
}

.overview-prop-filter {
    display: flex;
    gap: 1rem;
}

.overview-info-wrapper {
    flex: 3;
}

.overview-info {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.overview-cta {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 2;
    text-decoration: none;
    width: max-content;
}

.overview-logo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.overview-logo img{
    width: 250px;
}

.gallery {
    position: fixed;
    z-index: 3000;
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
    flex-direction: column;
}

.gallery-display {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 85vh;
}

.gallery-item-wrap {
    display: flex;
}

.gallery-item {
    flex: 1;
    display: flex;
    padding: 0.5rem;
}

.gallery-top {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--gap-big);
}

.gallery-close {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body";
    appearance: none;
    border: none;
    font-size: 4rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    display: flex;
    width: max-content;
}

.proj-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--primary-color);
    appearance: none;
    border: none;
    color: var(--text-primary);
    padding: var(--gap-mid);
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    height: max-content;
    text-align: left;
}

.proj-cta:hover {
    background-color: var(--secondary-color);
}

.prop-infogfx {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 1 1 45%;
}

.prop-infogfx p {
    text-align: left;
    flex: 1 1 70%;
}

.prop-infogfx span {
    flex: 1 1 30%;
}

.media-view {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.media-button {
    appearance: none;
    border: none;
    color: var(--primary-color);
    background-color: transparent;
    border: 2px solid var(--accent-a);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.media-button:hover {
    background-color: var(--accent-a);
    color: var(--black-primary);
}

.overview-main {
    position: relative;
}

.overview-award {
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    justify-content: center;
    gap: 2rem;
}

.award-img {
    width: 30%;
}

.award-img img {
    width: 100%;
    height: auto;
}

.overview-grid {
    display: flex;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    color: var(--text-primary);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.overview-background {
    height: calc(100% - 150px);
    top: 150px;
    background: var(--primary-color);
    border-bottom: 4px solid var(--accent-a);
    position: absolute;
    width: 100%;
    z-index: 0;
}

.overview-display {
    display: flex;
    gap: 2rem;
    z-index: 1;
    flex-direction: column;
}

.overview-map {
    display: flex;
    gap: 2rem;
    z-index: 1;
    align-items: center;
    flex-direction: column;
}

.map-item {
    flex: 1 1 50%;
    display: flex;
    width: 100%;
}

.map-item iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.overview-text {
    flex: 1 1 50%;
}

.overview-text button {
    color: var(--accent-a);
}

.griditem-img {
    width: 100%;
    height: 100%;
}

.griditem-img iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.griditem-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.griditem-img2 {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.griditem-img2 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.griditem1 { 
    grid-area: 5 / 2 / 7 / 7;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; 
    order: 2;
    z-index: 1;
}

.griditem1 button {
    color: var(--accent-a);
    display: block;
}

.griditem2 { 
    grid-area: 1 / 7 / 4 / 13;
    cursor: pointer;
    order: 3;
    z-index: 1;
    display: none;
}

.proj-video {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.proj-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.griditem3 {
    padding-top: 0;
    grid-area: 1 / 1 / 5 / 7;
    order: 1;
    z-index: 1;
}

.griditem4 { 
    grid-area: 4 / 8 / 7 / 13;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    order: 4;
    z-index: 1;
    color: var(--text-primary);
}

.griditem4-item-wrapper {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.proj-details {
    padding: var(--gap-mid);
    color: var(--primary-color);
}

.proj-wrapper {
    display: flex;
    flex-direction: column;
}

.proj-wrap-hide {
    display: none;
}

.proj-wrapper-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.proj-wrapper-mobile .accordian {
    padding: 0;
}

.proj-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: var(--gap-mid) 0;
}

.proj-topic-wrapper {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 0;
    border-top: 4px solid var(--accent-a);
    border-bottom: 4px solid var(--accent-a);
    gap: 1rem;
}

.item-break {
    border: 1px solid var(--secondary-color);
    width: 100%;
}

.item-break2 {
    border: 1px solid var(--accent-a);
    width: 100%;
}

.proj-topic-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.proj-topic-item {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.proj-topic-item iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.proj-detail-info-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1rem;
}

.proj-detail-img img{
    width: 100%;
    height: auto;
}

.floorplan {
    flex-direction: column;
}

.floorplan > .proj-detail-info {
    width: 100%;
}

.proj-detail-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    width: 100%;
}


.proj-contact {
    color: var(--text-primary);
}

.proj-contact-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: var(--gap-big) var(--gap-mid);
    flex-direction: column;
    gap: var(--gap-sm);
    background-image:linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)), 
      url(/wp-content/uploads/img/cen-pattaya.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.proj-contact-input {
    font-style: normal;
    font-family: "TH-Body";
    border: none;
    outline: none;
    font-weight: 400;
    padding: 1rem;
}

#phone {
    width: 100%;
}

.iti__dropdown-content {
    color: var(--primary-color);
}

.iti__search-input {
    padding: 1rem;
    font-style: normal;
    font-family: "TH-Body";
    border: none;
    outline: none;
    font-weight: 400;
}

.proj-contact-input-text {
    font-style: normal;
    font-family: "TH-Body";
    border: none;
    outline: none;
    font-weight: 400;
    padding: 1.25rem;
}

.proj-contact-submit {
    display: flex;
    justify-content: center;
}

.proj-contact-submit > button {
    background-color: transparent;
    appearance: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    height: 100%;
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--text-primary);
    padding: 1rem 2rem;
}

.proj-contact-submit:hover button {
    background-color: var(--text-primary);
    color: var(--primary-color);
}

/* Project Page Ends*/

/* Testimonial Page Start*/

    .review {
        display: flex;
        flex-direction: column;
        background-color: var(--text-secondary);
        gap: 2.5rem;
        padding: var(--gap-big) 0;
    }

    .review-container {
        gap: 1rem 1rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .review-card {
        display: flex;
        flex-direction: column;
        background-color: var(--text-primary);
        color: var(--primary-color);
    }

    .review-card-author {
        display: flex;
        gap: 1rem;
        align-items: center;
        background-color: var(--primary-color);
        color: var(--text-primary);
        padding: 1.5rem;
        border-bottom: 4px solid var(--accent-a);
    }

    .review-card-text {
        padding: 1.5rem;
    }

/* Swiper */

    .swiper-full {
        width: 100%;
        height: 80vw;
    }

    .swiper-tiktok {
        width: 100%;
    }

    .swiper-cat {
        width: 100%;
    }
    
    .swiper-plan {
        width: 100%;
    }
    
    .swiper-invest {
        width: 100%;
    }

    .swiper-wrap {
        flex: 1 1 30%;
    }

    .swiper-header {
        display: flex;
        align-items: center;
        padding: 1rem;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 4px solid var(--accent-a);
        background-color: var(--primary-color);
        color: var(--text-primary);
    }
    
    .swiper-slide {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .swiper-slide > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .invest-slide-img > img {
        object-fit: contain !important;
    }

    .swiper-proj-detail img {
        aspect-ratio: 16/9;
    }

    .proj-hero > img{
        aspect-ratio: 16/9;
    }

    .swiper-pagination {
        padding: 0.5rem;
    }

    .swiper-button-next, .swiper-button-prev {
        color: var(--black-primary)!important;
        border: 1px solid var(--text-primary)!important;
        background-color: rgba(212, 230, 245, 0.5);
        padding: 1rem;
        transition-property: color, background-color ;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
    }

    .swiper-button-next:hover, .swiper-button-prev:hover {
        color: var(--black-primary)!important;
        background-color: var(--text-primary);
        padding: 1rem;
    }

    
/* Testimonial Page End*/

/* About Page Starts */

    .about-title {
        color: var(--text-primary);
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: left;
    }

    .about-page {
        color: var(--primary-color);
    }

    .about-info-main {
        display: flex;
        flex-direction: column;
    }

    .about-info-wrapper {
        display: flex;
        position: relative;
        flex: 1 1 20vw;
        background-color: var(--text-primary);
        gap: 1rem;
        flex-direction: column;
    }

    .about-info-img {
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
        width: auto;
    }

    .about-info-img img {
        display: block;
        width: 100%;
        height: 40vw;
        border-radius: inherit;
        object-fit: cover;
    }   

    .about-info-text {
        flex: 1 0 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: var(--primary-color);
        padding: 0;
        background-color: var(--text-primary);

    }

    .info-item-container {
        width: 100%;
        border-bottom: 1px solid var(--text-secondary);
    }

    .about-info-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .about-vision {
        display: flex;
        background-color: var(--text-secondary);
        color: var(--primary-color);
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: var(--gap-big) 0;
    }

    .info-vision-container {
        display: flex;
        color: var(--primary-color);
        background-color: var(--text-primary);
        border-radius: 0.5rem;
        padding: 1.5rem;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .info-vision-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .info-vision {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        height: 100%;
        gap: 1rem;
    }

    .about-service {
        color: var(--primary-color);
        display: flex;
        padding: 3.75rem;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .service-item {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .service-item-text {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    .about-timeline {
        display: flex;
        justify-content: center;
        background-color: var(--primary-color);
        color: var(--text-primary);
        position: relative;
        z-index: -3;
    }

    .about-timeline-part {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        position: relative;
    }

    .about-timeline-item {
        display: grid;
        z-index: 2;
        grid-template-rows: auto;
        grid-auto-columns: 1fr;
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
        position: relative;

        grid-template-columns: 4rem 1fr;
        width: auto;
    }

    .timeline-left {
        text-align: left;
        align-items: stretch;
        margin-bottom: 1.5rem;
        grid-area: 1/2/2/3;
        background-color: var(--text-primary);
        color: var(--primary-color);
        padding: 1rem;
    }

    .timeline-left > h2 {
        position: sticky;
        top: 50vh;
    }

    .timeline-mid {
        justify-content: flex-start;
        grid-area: 1/1/3/2;
    }

    .timeline-circle {
        background-color: var(--accent-b);
        border-radius: 100%;
        width: 1rem;
        height: 1rem;
        position: sticky;
        top: 50vh;
    }

    .timeline-right {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
    }

    .timeline-right-img {
        width: 100%;
    }

    .timeline-right-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .about-timeline-progress {
        z-index: -2;
        background-color: var(--text-secondary);
        width: 2px;
        height: 100%;
        position: absolute;
        left: 6px;
    }

    .timeline-progressbar {
        z-index: -1;
        background-color: var(--accent-a);
        width: 2px;
        height: 50vh;
        position: fixed;
        inset: 0 auto 50vh
    }

    .about-cta {
        color: var(--text-primary);
        width: 100%;
        background-image:linear-gradient(rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/img/generic/pattaya6.webp);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }

    .about-cta-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3.75rem;
        gap: 2rem;
        height: 20vw;
    }

/* About Page Ends */

/* Blog Page Starts */

.blog-pagination {
    padding: var(--gap-big);
}

.blog-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding-top: var(--gap-big);
}

.page-numbers {
    color: var(--text-primary);
    background-color: var(--primary-color);
    padding: 0.5rem 1rem;
    font-family: "TH-Body";
    font-size: var(--text-sh);
    font-weight: 400;
    margin: 0;
}

.blog-item-wrapper {
    flex: 1 1 100%;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
}

.blog-item {
    display: flex;
    text-decoration: none;
    color: var(--primary-color);
    flex-direction: column;
    background-color: var(--text-primary);
    height: 100%;
}

.blog-item:hover .blog-item-head img {
    scale: 1.05;
}

.blog-item-head {
    display: flex;
    overflow: hidden;
}

.blog-item-head img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
    transition: scale 0.2s ease-in-out;
}

.blog-item-title {
    padding: 1.5rem;
}

.blog-item-text {
    display: flex;
}

/* Blog Page Ends */

/* Blog Post Page Starts*/

.blog-hero {
    display: flex;
    background-color: var(--primary-color);
    justify-content: center;
    padding-top: 6rem;
}

.blog-title {
    text-align: left;
}

.blog-body-wrapper {
    color: var(--black-primary);
    display: flex;
    justify-content: flex-start;
}

.blog-body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: var(--gap-big);
    width: 100%;
}

.blog-body-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-body-section a{
    text-decoration: underline;
    font-weight: 500;
    color: var(--secondary-color);
    transition: color 0.2s ease-in-out;

    border: none;
    background: none;
}

.blog-body-section a:hover {
    color: var(--accent-a);
}

.blog-body-section table{
    border: 1px solid var(--text-secondary);
    margin: 0 0 15px;
    text-align: left;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.blog-body-section tr td {
    border-top: 1px solid var(--text-secondary);
    padding: 6px 24px;
}

.blog-body-section h1{
    font-size: 2rem;
    max-width: fit-content;
}

.blog-body-section h2{
    font-size: 1.5rem;
    color: var(--accent-a);
    max-width: fit-content;
}

.blog-body-section h3{
    font-size: 1.25rem;
    max-width: fit-content;
}

.blog-body-section ul {
    margin: 0;
}

.blog-body-img img{
    width: 100%;
    height: auto;
}

.pbold {
    font-family: "TH-Body";
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Blog Post Page Ends*/

/* Invest Page Starts */

.invest-hero {
    position: relative;
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: flex-start;
    padding-top: 5rem;
}

.invest-hero img {
    position: absolute;
    object-fit: cover;
    filter: brightness(50%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.invest-hero-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    padding: var(--gap-big);
}

.invest-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}

.invest-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invest-h2 {
    display: flex;
    justify-content: center;
}

.invest-info-img {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 50%;
}

.invest-info-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.invest-info-text {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: var(--primary-color);
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--gap-mid);
}

.award-display-wrapper {
    display: flex;
    padding: var(--gap-mid);
    justify-content: center;
}

.award-display {
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--primary-color);
    flex-direction: column;
    gap: 1rem;
}

.award-display p{
    text-align: center;
}

/* Invest Page Ends */

.all-links {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    min-height: 100vh;
}

.body-section, .gallery-display-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.all-link {
    display: flex;
    width: 100%;
    color: var(--text-primary);
}

.all-link a {
    color: var(--text-primary);
    padding: 2.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: center;
}


/* WIP Translation */
    a[hreflang="zh-hans"] {
        display: none;
    }

    a[hreflang="ru"] {
        display: none;
    }



/* Rework */

.body-section, .navbar, .footer-wrapper, .gallery-display-wrapper, .gallery-top {
    margin-left: var(--margin-b);
    margin-right: var(--margin-b);
    max-width: none;
    width: auto;
}

@media (min-width: 640px) {

    :root {
        font-size: 16px;
        --margin-b: 1.875rem;
        --gap-big: 2.5rem;
        --gap-mid: 2rem;

        --text-h1: 2.5rem;
        --text-h2: 2rem;
        --text-h3: 1.75rem;
    } 

    p, li {
        line-height: 1.75rem;
    }

    .hero-base {
        height: 40vw;
    }

    .nav-cta {
        display: flex;
    }

    .prop-title-container, .prop-filter-container {
        padding: 1.25rem;
    }

    .faq-card {
        width: 80%;
    }

    .faq-card-container, .faq-card-header {
        align-items: center;
    }
    
    .blog-preview {
        width: 80%;
    }

    .swiper-full {
        height: auto;
    }

    .swiper-slide > img {
        height: auto;
    }

    .proj-nav, .proj-nav2 {
        display: flex;
    }

    .proj-nav-wrap {
        padding: 0 8rem;
    }

    .overview-background {
        height: calc(100% - 300px);
        top: 300px;
        background-color: var(--text-primary);
        border-bottom: 0;
    }

    .overview-logo img{
        width: 400px;
    }

    .overview-grid {
        color: var(--primary-color);
        padding: 0 var(--gap-mid) var(--gap-mid) var(--gap-mid);
    }

    .hide-mobile {
        display: block;
    }

    .overview-text button {
        display: none;
        color: var(--primary-color);
    }

    .proj-header {
        align-items: center;
    }

    .griditem1 button {
        display: none;
        color: var(--primary-color);
    }

    .griditem2, .griditem4 {
        display: flex;
    }

    .griditem4 {
        color: var(--primary-color);
    }

    .blog-body-wrapper {
        justify-content: center;
    }

    .blog-body {
        width: 80%;
    }

    .blog-item-wrapper {
        flex: 1 1 33%;
    }

    .about-vision {
        color: var(--text-secondary);
        background-color: var(--primary-color);
    }

    .footer-group {
        flex-direction: row;
    }
    
    .about-timeline {
        color: var(--primary-color);
        background-color: var(--text-primary);
    }

    .timeline-circle {
        background-color: var(--primary-color);
    }

    .timeline-left {
        margin-bottom: 0;
        padding: 0;
        grid-area: auto;
    }

    .timeline-right {
        padding: 0;
    }

    .about-timeline-progress {
        left: auto;
    }

    .timeline-mid {
        justify-content: center;
        display: flex;
        grid-area: auto;
    }

    .about-timeline-item {
        grid-template-columns: 1fr 120px 1fr;
        width: 100%;
    }

}

@media (min-width: 900px) {

    :root {
        --margin-b: 3.125rem;
        --gap-mid: 2rem;

        --hero-h1: 4rem;

        --text-h1: 3rem;
        --text-h2: 2.5rem;
        --text-h3: 2rem;
    }

    .nav-right {
        gap: 2rem;
    }

    .hero {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .hero-base {
        height: 35vw;
    }

    .prop-hero {
        height: 50vw;
    }

    .prop-img {
        height: 40vw;
    }

    .hero-location, .hero-title, .hero-desc {
        text-align: center;
        justify-content: center;
    }

    .benefit-about {
        flex-direction: row;
    }

    .benefit-award {
        flex-direction: row-reverse;
    }

    .location2 {
        flex-direction: row;
    }

    .overview2-detail-card {
        flex: 1 1 25%;
    }

    .facility-section, .room-section {
        flex-direction: row;
        gap: var(--gap-big);
        box-shadow: none;
    }

    .facility-b {
        flex-direction: column;
    }

    .facility-text, .facility-img, .facility-swiper-wrap, .room-text, .room-img, .room-swiper-wrap {
        order: 0;
    }

    .facility-swiper-wrap, .room-swiper-wrap {
        flex: 1 1 50%;
        width: 50%;
    }

    .room-info {
        flex-direction: row;
    }
    
    .overview-heading {
        flex-direction: row;
    }

    .overview-background {
        height: calc(100% - 400px);
        top: 400px;
    }

    .overview-display {
        flex-direction: row;
    }

    .overview-info {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .proj-wrap-hide {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .proj-wrapper-mobile {
        display: none;
    }

    .proj-detail-info-wrapper {
        flex-direction: row;
    }

    .floorplan {
        flex-direction: row;
    }

    .floorplan > .proj-detail-info {
        width: 30%;
    }

    .proj-detail-info {
        flex: 1 1 30%;
        width: 30%;
    }

    .swiper-header {
        flex-direction: column;
        border-bottom: 0 solid var(--accent-a);
        background-color: transparent;
        color: var(--primary-color);
    }

    .review-container {
        display: grid;        
        flex-direction: row;
    }

    .about-timeline-part {
        width: 70%;
    }

    .about-img-wrap {
        width: 70%;
    }

}

@media (min-width: 1200px) {

    :root {
        --margin-b: 6rem;
        --gap-big: 3.75rem;
    }

    .nav-burger {
        display: none;
    }

    .nav-item {
        display: flex;
    }

    .video-wrapper {
        height: 40vw;
    }

    .hero-base {
        height: 20vw;
    }

    .hero-container {
        align-items: center;
    }

    .blog-preview {
        width: 33%;
    }

    .prop-hero {
        height: 30vw;
    }

    .prop-img {
        height: 28vw;
    }

    .prop-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
    }

    .blog-preview-wrapper {
        flex-direction: row;
        align-items: normal;
        width: 80%;
    }

    .proj-nav {
        justify-content: flex-start;
    }

    .proj-nav2 {
        justify-content: center;
    }

    .overview-background {
        height: calc(100% - 650px);
        top: 650px;
    }

    .overview-heading {
        padding: 2.5rem 8rem;
    }

    .overview-logo img{
        width: 500px;
    }

    .overview-grid {
        padding: 0 8rem 3.75rem 8rem;
    }

    .overview-cta {
        display: flex;
    }

    .overview-map {
        flex-direction: row;
    }

    .map-item {
        width: 50%;
    }

    .proj-details {
        padding: 2.5rem 8rem;
    }

    .swiper-review {
        width: 60%;
    }

    .accordian-container {
        flex-direction: row;
        width: 80%;
    }

    .accordian-header img {
        aspect-ratio: 4 / 5;
    }

    .flex-r {
        flex-direction: row-reverse;
    }

    .swiper-invest {
        width: 80%;
    }

    .invest-hero {
        justify-content: center;
        padding-top: 10rem;
    }

    .blog-body {
        width: 50%;
    }

    .about-info-wrapper {
        flex-direction: row;
    }

    .about-info-wrapper:nth-child(odd) {
        flex-direction: row-reverse;
    }

    .about-info-text {
        padding: var(--gap-big) 0;
    }

    .info-vision {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-vision-container {
        max-width: 25%;
        height: 200px;
    }
    
    .about-info-img img {
        height: 30vw;
    }

    .footer-container {
        flex-direction: row;
    }
    
}

@media (min-width: 1600px) {

    .body-section, .navbar, .footer-wrapper, .gallery-display-wrapper, .gallery-top {
        margin-inline: auto;
        max-width: calc(1600px - var(--margin-b) * 2);
        width: 100%;
    }

    .faq-card {
        width: 50%;
    }

    .prop-img {
        height: 20vw;
    }

    .overview-logo img{
        width: 700px;
    }

    .overview-grid {
        display: flex;
    }

    .griditem3 {
        padding-top: 5rem;
    }

    .about-timeline-part {
        width: 50%;
    }

}