/*
Theme Name: twentytwenty-gtg
Author: Global Top Group
Author URI: Your URL
Description: This theme is...
Version: 1.0
*/
:root {
    font-size: 16px;
    color: var(--text-primary);
    font-family: "Sarabun", "Roboto Condensed";
    --primary-color: #243447;
    --ps: rgb(36, 52, 71, 0);
    --secondary-color: #476f95;
    --accent-a: #b6985b;
    --accent-b: #cdba96;
    --accent-c: #b9a98d;
    --text-primary:#ffffff;
    --text-secondary:#e7e7e7;
    --black-primary:#000000;

    --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;
}

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;
}

/* Zoho Forms Start*/

#crmWebToEntityForm {
    background-color: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

#crmWebToEntityForm form{
    flex: 1;
}

.zcwf_col_lab, .zcwf_col_fld_slt, .zcwf_col_fld > input {
    font-family: "Sarabun", "Roboto Condensed";;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.zcwf_col_fld > input[type=reset]{
    background-color: var(--text-primary);
}

.zcwf_row {
    display: flex;
    align-items: center;
}

.wf_customMessageBox{
			font-family: Arial, Helvetica, sans-serif;
			color:  #132C14;
			background:   #F5FAF5;
			box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25);
			max-width: 90%;
			width: max-content;
			word-break: break-word;
			z-index: 11000;
			border-radius: 6px;
			border: 1px solid  #A9D3AB;
			min-width: 100px;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			position: fixed;
			top: 20px;
			left: 50%;
			transform: translate(-50%, 0);
		}
		.wf_customCircle{
			position: relative;
			background-color:  #12AA67;
			border-radius: 100%;
			width: 20px;
			height: 20px;
			flex: none;
			margin-right: 7px;
		}
		.wf_customCheckMark{
			box-sizing: unset !important;
			position: absolute;
			transform: rotate(45deg)translate(-50%, -50%);
			left: 6px;
			top: 9px;
			height: 8px;
			width: 3px;
			border-bottom: 2px solid  #fff;
			border-right: 2px solid  #fff;
		}
		.wf_customClose{
			box-sizing: border-box;
			position: relative;
			width: 18px;
			height: 18px;
		}
		.wf_customClose::after, .wf_customClose::before{
			content: '';
			display: block;
			box-sizing: border-box;
			position: absolute;
			width: 12px;
			height: 1.5px;
			background:  #616E88;
			transform: rotate(45deg);
			border-radius: 5px;
			top: 8px;
			left: 8px;}
		.wf_customClose::after{
			transform: rotate(-45deg)}

        html,body{
			margin: 0px;
		}
		.formsubmit.zcwf_button{
			color: var(--text-primary) !important;
			background-color: var(--accent-a);
		}
		#crmWebToEntityForm.zcwf_lblLeft{
			width: 100%;
			padding: 25px;
			margin: 0 auto;
			box-sizing: border-box;
		}
		#crmWebToEntityForm.zcwf_lblLeft *{
			box-sizing: border-box;
		}
		#crmWebToEntityForm {text-align: left;
		}
		#crmWebToEntityForm *{
		direction: ltr;
		}
		.zcwf_lblLeft .zcwf_title{
		word-wrap: break-word;
		padding: 0px 6px 10px;
		font-weight: bold }
		.zcwf_lblLeft.cpT_primaryBtn:hover{
		background: linear-gradient(#02acff 0,#006be4 100%)no-repeat padding-box !important;
		box-shadow: 0 -2px 0 0  #0159b9 inset !important;
		border: 0 !important;
		color:  #fff !important;
		outline: 0 !important;
		}
		.zcwf_lblLeft .zcwf_col_fld input[ type  = text], input[ type  = password], .zcwf_lblLeft .zcwf_col_fld textarea{
		width: 100%;
		border: 1px solid  #c0c6cc !important;
		resize: vertical;
		float: left;
        padding: 1rem;
		}
		.zcwf_lblLeft .zcwf_col_lab{
		width: 30%;
		word-break: break-word;
		padding: 0px 6px 0px;
		margin-right: 10px;
		margin-top: 5px;
		float: left;
		min-height: 1px;
		}
		.zcwf_lblLeft .zcwf_col_fld{
		float: left;
		width: 68%;
		padding: 0px 6px 0px;
		position: relative;
		margin-top: 5px;
		}
		.zcwf_lblLeft .zcwf_privacy {padding: 6px;
		}
		.zcwf_lblLeft .wfrm_fld_dpNn {display: none;
		}
		.dIB {display: inline-block;
		}
		.zcwf_lblLeft .zcwf_col_fld_slt{
		width: 100%;
		border: 1px solid  #ccc;
		background:  #fff;
		font-size: 12px;
		float: left;
		resize: vertical;
		padding: 1rem;
		}
		.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after{
		content: '';
		display: table;
		clear: both;
		}
		.zcwf_lblLeft .zcwf_col_help{
		float: left;
		margin-left: 7px;
		font-size: 12px;
		max-width: 35%;
		word-break: break-word;
		}
		.zcwf_lblLeft .zcwf_help_icon{
		cursor: pointer;
		width: 16px;
		height: 16px;
		display: inline-block;
		background:  #fff;
		border: 1px solid  #c0c6cc;
		color:  #c1c1c1;
		text-align: center;
		font-size: 11px;
		line-height: 16px;
		font-weight: bold;
		border-radius: 50%;
		}
		.zcwf_lblLeft .zcwf_row {margin: 15px 0px;
		}
		.zcwf_lblLeft .formsubmit{
		margin-right: 5px;
		cursor: pointer;
		color:  #313949;
		font-size: 1rem;
        text-transform: uppercase;
		}
		.zcwf_lblLeft .zcwf_privacy_txt{
		width: 90%;
		color: rgb(0, 0, 0);
		font-size: 12px;
		font-family: Arial;
		display: inline-block;
		vertical-align: top;
		color:  #313949;
		padding-top: 2px;
		margin-left: 6px;
		}
		.zcwf_lblLeft .zcwf_button{
		font-size: 1rem;
		color:  #313949;
		border: none;
		padding: 0.5rem 1rem;
		cursor: pointer;
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
        text-transform: uppercase;
		}
		.zcwf_lblLeft .zcwf_tooltip_over{
		position: relative;
		}
		.zcwf_lblLeft .zcwf_tooltip_ctn{
		position: absolute;
		background:  #dedede;
		padding: 3px 6px;
		top: 3px;
		border-radius: 4px;
		word-break: break-word;
		min-width: 100px;
		max-width: 150px;
		color:  #313949;
		z-index: 100;
		}
		.zcwf_lblLeft .zcwf_ckbox{
		float: left;
		}
		.zcwf_lblLeft .zcwf_file{
		width: 55%;
		box-sizing: border-box;
		float: left;
		}
		.cBoth:after{
		content: '';
		display: block;
		clear: both;
		}
		@media all and  (max-width: 600px){
		.zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld{
		float: none !important;
		}
		.zcwf_lblLeft .zcwf_col_help {width: 40%;
		}
		}

/* Zoho Forms End*/

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

body {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: "TH-Head", "Playfair Display";
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
}

h2 {
    font-family: "TH-Head", "Playfair Display";
    font-size: 3rem;
    font-weight: 600;
    margin: 0;
}

h3 {
    font-family: "TH-Head", "Playfair Display";
    font-size: 2.25rem;
    font-weight: 500;
    margin: 0;
}

.subheading {
    font-family: "Sarabun", "Roboto Condensed";
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
}

p, li {
    font-family: "Sarabun", "Roboto Condensed";
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.5rem;
}

.label {
    font-family: "Sarabun", "Roboto Condensed";
    font-size: 1rem;
    font-weight: 500;
    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(--text-primary);
    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*/

    /* Read More Read Less */

        /* Hides all the expandees */
        .expandable .expandee {
            display: none;
        }

        /* Shows the expandee when .expanded is added to the parent of expandee */
        .expanded .expandee {
            display: block;
        }

    /* Button primary */

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

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

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

        .button-primary-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-primary) !important;
            transition: all ease 0.2s;
            padding: 1rem 2rem;
            text-align: center;
            border-bottom: 4px solid var(--accent-a);
        }

    /* 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 underline */

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

            font-family: "Sarabun", "Roboto Condensed";
            font-size: 1rem;
            font-weight: 500;
            margin: 0;
        }

    /* Accordian */

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

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

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

        .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: 4/5;
        }

        .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 */
        padding-top: 10rem; /* Location of the box */
        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 */
        }

        /* Modal Content (image) */
        .modal-content {
        margin: auto;
        display: block;
        width: 75%;
        }

        /* 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;
        }

        @-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: 5rem;
        right: 5rem;
        color: var(--text-primary);
        font-size: 4rem;
        font-weight: bold;
        transition: 0.3s;

        }

        .close:hover,
        .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
        }


        /* Global Padding */

        footer, .faq-card-container ,  .properties, .review, .blog, .benefit-cta,
        .accordian, .invest-card-wrapper, .invest-hero-wrapper, .invest-manage-wrapper, .invest-membercard, .blog-wrapper {
            padding: 3.75rem;
        }

/* Global Elements Ends*/

/* Navbar Starts */

nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    transition: all 0.3s ease;
}

.navbar{
    display: flex;
    color: var(--text-primary);
    padding: 1rem 3.75rem;
}

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

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

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

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

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

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

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

.nav-prop {
    position: relative;
}

.nav-prop > button {
    background-color: transparent;
    font-style: normal;
    font-family: "Sarabun", "Roboto Condensed";
    appearance: none;
    border: none;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    height: 100%;
    transition: color 0.2s ease-in-out;
}

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

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

.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(--text-primary);
    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 {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background-color: var(--accent-a);
    color: var(--black-primary);
    flex: 1 1 100%;
    padding: 1rem;
}

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

.navlink-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    cursor: auto;
}

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

.nav-lang {
    display: flex;
    height: 100%;
    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: "Sarabun", "Roboto Condensed";
    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: "Sarabun", "Roboto Condensed";
    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;
}

.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: none;
}

.nav-burger > button {
    background-color: transparent;
    font-style: normal;
    font-family: "Sarabun", "Roboto Condensed";
    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: "Sarabun", "Roboto Condensed";
    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: "Sarabun", "Roboto Condensed";
    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;
}

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

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.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 {
    text-align: center;
    justify-content: center;
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 40vw;
    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;
}

.video-bg {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2)), url(/wp-content/uploads/media/vid-thumb.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Navbar Ends */

/* Homepage Starts */

    /* Benefit Starts */

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

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

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

    .benefit-title {
        flex: 1 1 50%;
        color: var(--accent-c);
    }

    .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;
    }

    .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: 2.5rem 3.75rem;
            border-bottom: 4px solid var(--accent-a);
    }

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

    .swiper-review {
        width: 60%;
    }

    .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;
    }

    .slide {
        color: var(--black-primary);
        width: 60%;
        height: 60%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        padding: 3.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        transition: opacity 0.2s ease-in-out;
        z-index: 1;
    }

    .slide[data-active] {
        opacity: 1;
        z-index: 1;
    }

    .carousel-button {
        position: absolute;
        background: none;
        border: none;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        cursor: pointer;
        border: 2px solid var(--primary-color);
        padding: 0;
        transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out;
        display: flex;
    }

    .carousel-button svg {
        fill: var(--primary-color);
    }

    .carousel-button:hover svg {
        fill: var(--text-primary);
    }

    .carousel-button:hover {
        border: 2px solid var(--primary-color);
        background-color: var(--primary-color);
    }

    .carousel-button > svg {
        width: 50px;
        height: 50px;
    }

    .carousel-button.prev {
        left: 1rem;
    }

    .carousel-button.next {
        right: 1rem;
    }

    .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: center;
        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: center;
        gap: 1rem;
    }

    .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;
        padding: 0 2rem;
        width: 50%;
    }

    .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;
    }

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


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

    .prop-card {
        display: flex;
        position: relative;
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
        flex-direction: column;
        overflow: hidden;
    }

    .prop-card > a {
        width: 100%;
        height: 28vw;
        display: block;
        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 > a > img {
        transform: scale(1);
    }

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

    .prop-filter1 {
        padding: 0.5rem 1rem;
        background-color: var(--accent-a);
        color: var(--black-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;
    }

    .prop-title-container {
        color: var(--text-primary);
        display: flex;
        flex-direction: column;
        padding: 1.25rem;
        gap: 0.5rem;
        transition: padding 0.2s ease-in-out;
    }

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

    .prop-info-top h3 {
        color: var(--accent-c);
    }

    .prop-cta-container {
        display: flex;
        margin-left: auto;
    }

    .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;
        pointer-events: auto;
    }

    .prop-cta:hover {
        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: 2rem;
    }

    .blog-preview-wrapper {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .blog-preview {
        background-color: var(--text-primary);
        width: 25%;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: var(--primary-color);
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
    }

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

    .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-img:hover img {
        scale: 1.05;
    }

    .blog-preview-text {
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .href-underline {
        text-decoration: underline;
        transition: color 0.2s ease-in-out;
        width: max-content;
    }


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

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

    .href-underline:hover::after {
        transform: scaleX(1);
    }

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

/* Homepage Ends */

/* Footer Start*/

footer {
    background-color: var(--primary-color);
    border-bottom: 4px solid var(--accent-a);
    color: var(--text-primary);
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.footer-title {
    color: var(--accent-a);
}

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

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

.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(--text-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: "Sarabun", "Roboto Condensed";
    appearance: none;
    border: none;
    font-size: 4rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    position: absolute;
    right: 3.75rem;
    top: 3.75rem;
    display: flex;
}

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

/* Footer Start*/

/* Properties Page Start*/

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

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

/* Properties Page End*/

/* Project Page Starts*/

.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: 4.5rem;
}

.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;
}

.list {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* Hide scrollbar in Firefox */
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
  display: none;
}

.item {
    flex-shrink: 0;
    width: 80%;
    height: 100%;
    background-color: #FFF;
    scroll-snap-align: center;
    display: flex;
}

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

.project-button {
    height: 100%;
    position: absolute;
    border: none;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 0 3.75rem;
    display: flex;
    align-items: center;
}

.project-button svg {
    fill: var(--text-primary);
    transition: fill 0.2s ease-in-out;
}

.project-button:hover svg {
    fill: var(--accent-a);
}

.project-button > svg {
    width: 50px;
    height: 50px;
}

.project-button.prev {
    left: 0;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
}

.project-button.next {
    right: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.proj-nav {
    display: flex;
    background-color: var(--text-primary);
    position: sticky;
    z-index: 500;
    transition: top 0.3s ease;
}

.proj-nav-wrap {
    padding: 0 8rem;
    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: 2.5rem 8rem;
    color: var(--primary-color);
    display: flex;
    gap: 2.5rem;
}

.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: wrap;
    display: flex;
    gap: 1rem;
}

.overview-cta {
    display: flex;
    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: 700px;
}

.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-wrapper {
    display: flex;
    padding: 0 15rem 3.75rem 15rem;
}

.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-right: 15rem;
}

.gallery-close {
    background-color: transparent;
    font-style: normal;
    font-family: "Sarabun", "Roboto Condensed";
    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: 2.5rem;
    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 {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.prop-infogfx p {
    text-align: left;
}

.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-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    color: var(--primary-color);
    padding: 0 8rem 3.75rem 8rem;
}

.overview-background {
    background: var(--text-primary);
    height: calc(100% - 300px);
    position: absolute;
    top: 300px;
    width: 100%;
    z-index: 0;
}

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

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

.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(--primary-color);
    display: none;
}

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

.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: 5rem;
    grid-area: 1 / 1 / 5 / 7;
    order: 1;
    z-index: 1;
}

.griditem4 { 
    grid-area: 4 / 8 / 7 / 13;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    order: 4;
    z-index: 1;
}

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

.location {
    position: relative;
    background-color: var(--text-secondary);
}

.location-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
}

.location-background {
    background: var(--text-primary);
    height: calc(100% - 150px);
    position: absolute;
    top: 150px;
    width: 100%;
    z-index: 0;
}

.location-wrapper iframe {
    flex: 1;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.2);
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    justify-content: flex-end;
}

.proj-details {
    padding: 2.5rem 8rem;
    color: var(--primary-color);
}

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

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

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

.proj-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 2.5rem 2.5rem;
}

.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-detail-info-wrapper {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

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


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

.proj-contact-wrapper {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 3.75rem;
    flex-direction: column;
    gap: 1.25rem;
    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: "Sarabun", "Roboto Condensed";
    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: "Sarabun", "Roboto Condensed";
    border: none;
    outline: none;
    font-weight: 400;
}

.proj-contact-input-text {
    font-style: normal;
    font-family: "Sarabun", "Roboto Condensed";
    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;
    }

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

    .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%;
    }
    
    .swiper-plan {
        width: 80%;
    }
    
    .swiper-invest {
        width: 60%;
    }

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

    .swiper-header {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 1rem;
    }
    
    .swiper-slide {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .swiper-slide > img {
        width: 100%;
        height: auto;
        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(--primary-color)!important;
        border: 1px solid var(--primary-color)!important;
        padding: 1rem;
    }

    .swiper-light {
        color: var(--accent-c) !important;
        border: 1px solid var(--accent-c)!important;
        padding: 1rem;
    }
    
/* Testimonial Page End*/

/* About Page Starts */

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

    .about-hero-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

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

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

    .about-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3.75rem;
        gap: 1rem;
    }

    .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;
    }

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

    .about-info-img {
        flex: 1 0 0px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .about-info-img img {
        display: block;
        width: 100%;
        height: 30vw;
        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: 3.75rem;
        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;
        color: var(--text-secondary);
        background-color: var(--primary-color);
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 3.75rem;
    }

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

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

    .info-vision{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .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;
        color: var(--primary-color);
        background-color: var(--text-primary);
        position: relative;
        z-index: -3;
    }

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

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

    .timeline-left {
        text-align: left;
        justify-content: flex-end;
        align-items: stretch;
    }

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

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

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

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

    .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;
    }

    .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-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.blog-item-wrapper {
    flex: 1 1 33%;
    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: 4.5rem;
}

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

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

.blog-body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3.75rem;
    width: 60%;
}

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

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

.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;
}

.blog-body-section h2{
    font-size: 1.5rem;
}

.blog-body-section h3{
    font-size: 1.25rem;
}

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

.pbold {
    font-family: "Sarabun", "Roboto Condensed";
    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: center;
    padding-top: 10rem;
}

.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;
}

.invest-card-wrapper {
    display: flex;
    position: relative;
    color: var(--primary-color);
    gap: 1rem;
    flex-direction: row-reverse;
    align-items: center;
}

.invest-card-container {
    display: flex;
    color: var(--text-primary);
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

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

.invest-card {
    color: var(--primary-color);
    background-color: var(--text-primary);
    border-radius: 0.5rem;
    max-width: 25%;
    height: 300px;
    padding: 1.5rem;
}

.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: 2.5rem;
}

.award-display-wrapper {
    display: flex;
    padding: 2.5rem;
    justify-content: center;
}

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

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

/* Invest Page Ends */

@media only screen and (max-width: 1500px){ 

    .overview-grid {
        display: flex;
        flex-direction: column;
    }

    .griditem-img iframe {
        aspect-ratio: 16/9;
    }

    .gallery-display-wrapper {
        padding: 0 3.75rem 3.75rem 3.75rem;
    }

    .gallery-top {
        padding-right: 3.75rem;
    }

    .griditem3 {
        padding: 0;
    }

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

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

    .about-hero {
        height: 25vw;
        border-bottom: 4px solid var(--accent-a);
    }

    .invest-card {
        height: auto;
        max-width: 100%;
    }

    .invest-card-container {
        flex-direction: column;
    }

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

    .accordian-container {
        width: 100%;
    }

}


@media only screen and (max-width: 1200px) {

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .close {
        right: 3.75rem;
        font-size: 3rem;
    }

    .swiper-invest {
        width: 100%;
    }

    /* 1200 Global Element */

    .accordian-container {
        flex-direction: column;
    }

    .accordian-header {
        align-items: flex-start;
        margin-bottom: 0;
    }

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


    .navbar{
        padding: 1rem 2.5rem;
    }

    .nav-right {
        gap: 2rem;
    }

    .nav-burger {
        display: block;
    }

   .nav-item {
        display: none;
    }

    .video-wrapper {
        position: relative;
        height: 60vh;
        padding: 0;
    }

    .video-wrapper video {
        height: 100%;
        object-fit: cover;
    }

    /* Global Padding */

    .testimonial, footer, .faq-card-container , .properties,
    .overview-heading, .location-wrapper, .proj-details,
    .proj-contact-wrapper, .review, .about-vision,
    .blog, .blog-hero-wrapper, .blog-body, .blog-wrapper,
    .accordian,.invest-hero-wrapper, .invest-manage-wrapper, .benefit-title-container, .invest-membercard, .invest-card-wrapper
     {
        padding: 2.5rem;
    }

    .subheading {
        font-size: 1.25rem;
    }

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

    .benefit {
        flex-direction: column;
    }

    .slide {
        padding: 2.5rem;
    }

    .faqs {
        flex-direction: column;
    }

    .faq-card {
        padding: 0 1rem;
        width: 80%;
    }

    .prop-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .prop-card img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    .prop-card > a {
        height: 40vw;
    }

    .blog-preview-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .blog-preview {
        width: 50%;
    }

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

    .contact-us-close {
        right: 2.5rem;
        top: 2.5rem;
    }

    .contact-form {
        width: 60vw;
    }

    /* Project Page */

    .proj-nav {
        padding: 0 2.5rem;
        justify-content: center;
    }

    .location-wrapper {
        flex-direction: column;
    }

    .location-wrapper iframe{
        width: 100%;
        aspect-ratio: 1/1;
    }

    .overview-grid {
        padding: 0 2.5rem 2.5rem 2.5rem;
    }

    .prop-infogfx {
        flex: 1 1 45%;
        display: flex;
        flex-direction: column;
    }

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

    /* About Us */

    .about-hero {
        height: auto;
    }

    .about-hero-wrapper {
        padding-top: 5rem;
        position: relative;
    }

    .about-container {
        padding: 2.5rem;
    }

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

    .about-info-img img {
        height: 40vw;
    }

    .about-info-img {
        flex: 1;
        position: relative;
        width: auto;
    }

    .about-info-text {
        padding: 0;
    }

    .about-vision {
        flex-direction: column;
    }

    .info-vision-container {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .info-vision {
        gap: 2rem;
        flex-direction: row;
    }
    
    /* Invest Page */

    .invest-hero {
        justify-content: flex-start;
        padding-top: 5rem;
    }

    .invest-hero-text {
        align-items: flex-start;
    }

    .invest-info-img h2 {
        top: 20%;
        bottom: 0;
        left: 2.5rem;
    }

    .invest-card-wrapper {
        flex-direction: column;
    }

    /* Privacy Page */

    .blog-body {
        width: 80%;
    }

}

@media only screen and (max-width: 768px){

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .hide-mobile {
        display: none;
    }

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

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

    .swiper-slide > img {
        height: 100%;
    }

    .award-display {
        width: 100%;
    }

    .award-display-wrapper {
        padding: 1rem;
}

    .navbar{
        padding: 1rem;
    }

    .nav-cta {
        display: none;
    }

    .hero-title {
        font-size: 2rem;
    }

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

    .nav-right {
        gap: 1.5rem;
    }

    .hero {
        top: auto;
        left: 0;
        bottom: 0;
        transform: translate(0,0);
    }

    .hero-container {
        padding: 1rem;
        align-items: flex-start;
    }

    .swiper-header {
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 4px solid var(--accent-a);
        background-color: var(--primary-color);
        color: var(--text-primary);
    }

    .swiper-review {
        width: 100%;
    }

    .faq-card {
        width: 100%;
        padding: 0;
    }

    .faq-card-container {
        align-items: flex-start;
    }

    .faq-card-header {
        align-items: flex-start;
    }

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


    /* Global Padding */

    .testimonial {
        gap: 0.5rem;
    }

    .testimonial, .properties, .faq-card-container ,footer,
    .properties, .overview-heading,
    .review, .about-vision,
    .blog, .blog-hero-wrapper, .blog-body, .blog-wrapper,
    .accordian, .invest-manage-wrapper, .invest-hero-wrapper, .invest-card-wrapper, .invest-membercard {
        padding: 2rem 1rem;
    }

    .benefit-title-container {
        padding: 1rem;
        background: var(--primary-color);
    }

    .benefit-about {
        flex-direction: column;
        color: var(--text-primary);
    }

    .benefit-cta {
        padding: 3.75rem 1rem;
    }

    .carousel-button {
        top: auto;
        bottom: 2rem;
        transform: translateY(0);
    }

    .slide {
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        padding: 1.5rem;
        width: 80%;
        height: 80%;
    }

    .item {
        height: 60vw;
    }

    .carousel-button.prev {
        left: 20%;
    }

    .carousel-button.next {
        right: 20%;
    }

    .carousel-button > svg {
        width: 40px;
        height: 40px;
    }

    .prop-title-container {
        padding: 0.5rem;
    }

    .prop-filter-container {
        padding: 0.5rem;
    }

    .prop-card > a {
        min-height: 250px;
        height: 50vw;
    }

    .prop-info-bottom {
        display: none;
    }

    .prop-card:hover .prop-title-container {
        padding-bottom: 0.5rem;
    }

    .prop-info-top .subheading {
        font-size: 1rem;
    }

    .blog-preview {
        width: 100%;
    }

    .blog-preview-text {
        padding: 1rem;
    }

    .footer-group {
        flex-direction: column;
    }

    .contact-us-close {
        right: 2rem;
        top: 0;
    }

    .contact-form {
        width: 80vw;
    }

    /* Project Page */

    .overview-heading {
        flex-direction: column;
    }

    .overview-cta {
        display: none;
    }

    .griditem4-item {
        flex: 1 1 40%;
    }

    .project-button {
        padding: 0 1rem;
    }

    .overview-grid {
        padding: 1rem;
        gap: 1rem;
        color: var(--text-primary);
    }

    .proj-nav {
        padding: 0;
    }

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

    .proj-header {
        padding: 0rem 0;
        align-items: flex-start;
    }

    .proj-wrapper {
        display: none;
    }

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

    .proj-details {
        padding: 1rem;
    }

    .proj-detail-info-wrapper {
        gap: 1rem;
    }

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

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

    .griditem2, .griditem4 {
        display: none;
    }

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

    .floorplan {
        flex-direction: column;
    }

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

    .swiper-plan {
        width: 100%;
    }

    .gallery-display-wrapper {
        padding: 0 1rem 1rem 1rem;
    }

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

    .location-wrapper {
        padding: 0;
    }

    .proj-contact-wrapper {
        padding: 2.5rem 0rem;
    }

    .gallery-top {
        padding-right: 1rem;
    }

    /* About Page */

    .about-hero-wrapper {
        top: 30%;
    }

    .about-container {
        padding: 1rem;
    }

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

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

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

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

    .about-info-wrapper {
        padding: 1rem;
    }

    .about-info-img {
        border-bottom: 2px solid var(--text-secondary);
    }

    .timeline-text:nth-child(1) {
        border: none;
    }

    .info-vision-wrap {
        padding: 0;
    }

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

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

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

    .about-timeline-progress {
        left: 6px;
    }

    .timeline-right {
        padding: 1rem;
    }

    /* testimonial */

    .review-container {
        display: flex;
        flex-direction: column;
    }

    .prop-hero {
        height: 50vw;
    }

    /* Blog Post Page */

    .blog-body-wrapper {
        justify-content: flex-start;
    }

    .blog-body {
        width: 100%;
    }

    /* 768 Investor Page */

    .invest-info-img h2 {
        left: 1rem;
    }

    .info-item {
        padding: 1rem;
    }

    .manage-svg svg {
        width: 35px;
        height: 35px;
    }

    .invest-membercard {
        flex-direction: column;
    }

}


@media only screen and (max-width: 479px){

    /* Main Page */

    :root {
        font-size: 13px;
    }

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

    .slide {
        padding: 1.5rem;
        width: 80%;
        height: 60%;
        gap: 0.5rem;
    }

    .item {
        width: 90%;
        height: 100vw;
    }

    .close {
        font-size: 2rem;
        right: 2.5rem;
    }

    .griditem-img2 {
        aspect-ratio: 3 / 4;
    }

    /* Project Page */

    .nav-left svg{
        height: 30px;
    }

    .proj-nav {
        flex-direction: column;
    }

    .proj-nav-wrap {
        flex-direction: column;
        width: 100%;
        box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
        position: absolute;
        left: 0;
        top: calc(100%);
        transform: translateY(-0.5rem);
        opacity: 0;
        z-index: -1;
        pointer-events: none;
    }

    .overview-logo img{
        width: 250px;
    }
    
    .proj-nav-item {
        padding: 1rem;
    }

    .proj-cta {
        padding: 1.5rem;
    }

    /* Testimonial */

    .prop-hero {
        height: 80vw;
    }

    /* Blog Page */

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

}

.all-links {
    background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/img/harmonia/harmonia-thumb.webp);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    min-height: 100vh;
}

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

.harmonia-link {
    display: flex;
    width: 100%;
}

.harmonia-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;
    }