/**
 * Theme Name:     Aegis 2025
 * Author:         Aegis
 * Text Domain:	   aegis-2025
 * Description:    Aegis 2025
 */

*{margin:0;padding:0;box-sizing:border-box;outline:none}
:root {
    font-size: 13px;
    --font-main:"TH-Body", "EN-Font";
    color: var(--text-primary);
    --primary-color: #0A2943;
    --ps: rgb(36, 52, 71, 0);
    --secondary-color: #5A6A78;
    --accent-a: #50A8F2;
    --accent-b: #E5F3FF;
    --text-primary:#ffffff;
    --text-secondary:#C5C5C5;
    --black-primary:#000000;

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

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

    --swiper-navigation-size: 16px !important;
    --swiper-navigation-color: var(--primary-color);

    --vw-min: 1200;
}
@media screen and (max-width:768px){
	:root{
		--vw-min:750;
	}
}

@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;
    } 
}
@media (min-width: 900px) {
    :root {
        --margin-b: 3.125rem;
        --gap-big: 4rem;
        --gap-mid: 2rem;

        --text-h1: 3rem;
        --text-h2: 2.5rem;
        --text-h3: 2rem;
    }
}
@media (min-width: 1200px) {
    :root {
        --margin-b: 6rem;
        --gap-big: 6rem;
    }
}

body {
    -webkit-text-size-adjust:100%;
	background-color:#fff;
	color:var(--color-black);
	font-family:var(--font-main);
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight:400;
	letter-spacing:0.05em;
	word-wrap:break-word;
	font-feature-settings:"palt";
}
@media (max-width: 768px) {
    body {
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

/* ==================== */
/* Interchange Element */
/* ==================== */

    .show {
        display: flex !important;
    }

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

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

    .col-8 {
        flex: 1 1 80%;
    }

    .col-7 {
        flex: 1 1 60%;
    }

    .col-6 {
        flex: 1 1 60%;
    }

    .col-5 {
        flex: 1 1 50%;
    }

    .col-4 {
        flex: 1 1 40%;
    }

    .col-3 {
        flex: 1 1 30%;
    }

    .col-2 {
        flex: 1 1 20%;
    }

    .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(--accent-a);
    }

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

    .bg-blue {
    background-color: var(--accent-b);
    }

    .bg-blue .tagline > .subheading {
        color: var(--accent-a);
    }

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

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

    .bg-contact {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-image: linear-gradient(0deg, rgba(36, 52, 71, 0.5)), url(https://globaltopgroup.com/wp-content/uploads/img/marina/parking.webp);
    }
    
    .j-center {
        justify-content: center;
    }

    .a-center {
        align-items: center;
    }

/* ==================== */
/* Base Setup */
/* ==================== */

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

body {
    margin: 0;
    padding: 0;
}

h1, .h1 {
    font-family: var(--font-main);
    font-size: min(calc(64 / var(--vw-min) * 100vw), 64px);
    font-weight: 700;
    margin: 0;
}

h2, .h2 {
    font-family: var(--font-main);
    font-size: min(calc(48 / var(--vw-min) * 100vw), 48px);
    font-weight: 600;
    margin: 0;
}

h3, .h3 {
    font-family: var(--font-main);
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    font-weight: 500;
    margin: 0;
}

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

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

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

.subheading {
    font-family: var(--font-main);
    /* font-size: var(--text-sh); */
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 500;
    margin: 0;
}

p, li {
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 400;
    margin: 0;
    line-height: 2rem;
}
@media screen and (max-width:768px){
    p, li {
        line-height: 2.25rem;
    }
}

.label {
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}

.pbold {
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 500;
    margin: 0;
}

/* ==================== */
/* Animations */
/* ==================== */

.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(--accent-a);
    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;
}

/* ==================== */
/* Global Elements */
/* ==================== */

/* Base Button Container */

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

/* Button Main */

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

.btn-main:hover {
    background-color: var(--black-primary);
}

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

/* Button White */

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

.btn-white:hover {
    background-color: var(--accent-a);
}

.btn-white-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 */

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

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

.btn-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 Color */

.btn-outline {
    border: 2px solid var(--accent-a);
    background: none;
    transition: background-color 0.2s ease-in-out;
    padding: 0;
    cursor: pointer;
}

.btn-outline:hover {
    background-color: var(--accent-b);
}

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

/* Button outline White */

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

.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-white-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 outline dark */

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

.btn-outline-dark:hover {
    background-color: var(--accent-b);
}

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

/* Button underline */

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

    font-family: var(--font-main);
    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);
}

/* ==================== */
/* Nav Start */
/* ==================== */

header {
    position: relative;
}

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

.nav-bg {
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    border-bottom: 1px solid var(--text-secondary);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-mid);
    padding: var(--gap-sm);
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
}
@media screen and (max-width:768px) {
    .navbar {
        width: 100%;
        padding: calc(16 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
    }
}

.logo {
    display: flex;
    justify-content: center;
}

.nav-block {
    align-items: center;
    display: flex;
    gap: min(calc(20 / var(--vw-min) * 100vw), 20px);;
}

.nav-desktop {
    display: flex;
    gap: min(calc(20 / var(--vw-min) * 100vw), 20px);;
}
@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }
}

.nav-burger {
    display: none;
}
@media screen and (max-width:768px){
    .nav-burger {
        display: block;
    }
}

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

.nav-burger svg {
    fill: var(--primary-color);
    width: auto;
    height: calc(48 / var(--vw-min) * 100vw);
}

.sidebar {
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    position: fixed;
    background-color: var(--text-primary);
    color: var(--primary-color);
    z-index: 999;
    transform: translateX(100vw);
    transition-property: opacity, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    pointer-events: none;
    user-select: none;
    overscroll-behavior: contain;
}

.sidebar.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    user-select: auto;
}

.sidenav__inner {
    width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
    margin: 0 auto;
    min-height: min(calc(640 / var(--vw-min) * 100vw), 640px);
    padding-top: min(calc(96 / var(--vw-min) * 100vw), 96px);
}
@media screen and (max-width: 768px) {
    .sidenav__inner {
        width: 100%;
        padding: calc(64 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
        min-height:calc(184.8vw + 1px);
    }
}

.sidenav-container {
    display: flex;
    justify-content: flex-end;
}

.sidenav__content {
    margin-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.sidenav__btn {
    background-color: transparent;
    appearance: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    display: flex;
}

.sidenav__btn svg{
    width: 2rem;
    height: auto;
    fill: var(--primary-color);
}

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

.sidenav-prop > button {
    background-color: transparent;
    font-style: normal;
    font-family: "TH-Body" , "EN-Font";
    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:last-child {
    border-bottom: 1px solid var(--text-secondary);
}

.show-map {
    display: block;
    z-index: 0;
}

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

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

.logo svg {
    width: 7rem;
    height: 4rem;
    filter: drop-shadow(0 2px 5px 0 rgb(0, 0, 0, 0.4));
    fill: var(--black-primary);
}

.logo img {
    width: auto;
    height: min(calc(48 / var(--vw-min) * 100vw), 48px);
}
@media (max-width: 768px) {
    .logo img {
        height: calc(48 / var(--vw-min) * 100vw);
    }
}

.right {
    justify-content: flex-end;
}

.right > .nav-cta {
    display: flex;
}
@media (max-width: 768px) {
    .right > .nav-cta {
        display: none;
    }
}

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

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

.nav-cta a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: all ease 0.2s;
    text-align: center;
}

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

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

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

.nav-lang svg {
    pointer-events: none;
    width: auto;
    height: 1rem;
}

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

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

.nav-lang-menu {
    position: absolute;
    left: 50%;
    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: translate(-50%, -16px);
    transition: all 0.2s ease-in-out;
}

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

.lang-links {
    width: 100%;
}

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

.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-lang-arrow {
    transform: rotate(-180deg);
    transition: transform 0.2s ease-in-out;
}

.nav-lang.active .nav-lang-arrow {
    transform: rotate(0deg);
}

/* ==================== */
/* Base Setup */
/* ==================== */

#fullWrap {
    position: relative;
    z-index: 50;
}

.sections {
    position: relative;
    z-index: 100;
}

/* ==================== */
/* BG Elements */
/* ==================== */

.kv__fixed {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    transition: all 0.6s ease;
}

.kv__fixedInner {
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: url(/wp-content/uploads/img/pattaya-view.webp) no-repeat center center / cover;
}
@supports (background-image:url(/wp-content/uploads/img/pattaya-view.webp)){
	.kv__fixedInner{
		background-image:url(/wp-content/uploads/img/pattaya-view.webp);
	}
}

/* 1. When BG Light */
/* ==================== */

#kvLight {
    opacity: 0;
}

body.is-preview #kvLight,
body.is-benefit #kvLight
{
    opacity: 1;
}

.kv__fixedInner2 {
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--text-primary);
    /* background-image: url(../img/common/bg_light.png), linear-gradient(to bottom, #cbc4f8 0%, #f5babf 100%);
    background-size: min(calc(77 / var(--vw-min) * 100vw), 77px) min(calc(133 / var(--vw-min) * 100vw), 133px), 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: center center; */
}

/* Hero Start */

.banner {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    border: 0;
    z-index: 100;
}
@media screen and (max-width:768px) {
    .banner {
        min-height: calc(100dvh - 200px);
    }
}

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

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

.search-banner {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    transform: translateY(-50%);
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-mid);
    width: min(calc(800 / var(--vw-min) * 100vw), 800px);
}
@media screen and (max-width:768px){
    .hero-container {
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

.banner__title {
    color: var(--text-primary);
    width: 100%;
    text-shadow: 2px 5px 4px rgb(0, 0, 0, 0.4);
    text-align: center;
}

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

.fv__toNext{
	position:absolute;
	left:50%;
	bottom:0;
	margin-left:max(calc(-40 / var(--vw-min) * 100vw),-40px);
}
@media screen and (max-width:768px){
	.fv__toNext{
		display:none;
	}
}
.fv__toNextLink{
	display:block;
	position:relative;
	width:min(calc(80 / var(--vw-min) * 100vw),80px);
	height:min(calc(120 / var(--vw-min) * 100vw),120px);
	text-decoration:none;
	color:#fff;
	font-size:min(calc(12 / var(--vw-min) * 100vw),12px);
	transition:all 0.3s ease;
}
@media screen and (hover:hover){
	.fv__toNextLink:hover{
		color:var(--color-salmon);
	}
}
.fv__toNextLink:before{
	content:'';
	position:absolute;
	left:50%;
	top:0;
	width:min(calc(9 / var(--vw-min) * 100vw),9px);
	height:min(calc(9 / var(--vw-min) * 100vw),9px);
	border-radius:50%;
	background:var(--black-primary);
	margin-left:max(calc(-4 / var(--vw-min) * 100vw),-4px);
	z-index:10;
	transition:all 0.3s ease;
}
@media screen and (hover:hover){
	.fv__toNextLink:hover:before{
		top:calc(100% - min(calc(9 / var(--vw-min) * 100vw),9px));
	}
}
.fv__toNextLabel{
	writing-mode:vertical-rl;
	position:absolute;
	width:min(calc(30 / var(--vw-min) * 100vw),30px);
	right:0;
	top:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
	line-height:1;
}
.fv__toNextLine{
	position:absolute;
	left:50%;
	width:1px;
	top:0;
	bottom:0;
	background:#fff;
}
.fv__toNextLine:before{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:0;
	background:var(--black-primary);
	animation:scrollLine 3s ease-in-out reverse infinite;
	transition:all 0.3s ease;
}
@media screen and (hover:hover){
	.fv__toNextLink:hover .fv__toNextLine:before{
		animation:unset;
		height:100%;
	}
}

@keyframes scrollLine{
	0%{
		height:0;
		bottom:0;
	}
	20%,40%{
		height:100%;
		bottom:0;
	}
	60%,100%{
		height:0;
		bottom:100%;
	}
}

/* ==================== */
/* Main Body */
/* ==================== */

.home-search {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.input-wrap {
    display: flex;
    background-color: var(--text-primary);
    width: 100%;
}

.input-wrap input {
    padding: var(--gap-mid);
    border: none;
    width: 100%;

    font-family: var(--font-main);
    font-size: var(--text-sh);
    font-weight: 500;
    margin: 0;
}

.input-wrap > button {
    background-color: var(--text-primary);
    padding: var(--gap-sm) var(--gap-mid);
    border: none;
    cursor: pointer;
}

.input-wrap > button > svg {
    fill: var(--primary-color);
    width: 1.5rem;
    height: auto;
    transform: rotate(-45deg);
}

.home-listing {
    display: flex;
    outline: 2px solid var(--text-primary);
    display: none;
}

.home-listing label {
    padding: 0.5rem 1rem;
    border: none;
    width: max-content;

    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

.home-listing:has(input[type=radio]) label {
    display: grid;
    flex-direction: row;
    align-items: center;
    background-color: rgba(197, 197, 197, 0.5);
}

.home-listing > div:has(input[type="radio"]:checked) label {
    background-color: var(--accent-a);
}

.home-listing input[type=radio] {
    position:absolute;
    opacity: 0;
}

.tagline {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.tagline > .subheading {
    color: var(--secondary-color);
}

.body-blue .tagline > .subheading {
    color: var(--accent-a);
}

.tagline-text-item {
    flex: 1;
    display: flex;
    align-items: flex-end;
}

/* Standard Style Start*/

.body-wrap {
    color: var(--primary-color);
    position: relative;
    z-index: 100;
}

.bg-primary p,
.bg-primary ul{
    color: var(--text-secondary);
}

/* Standard Style End*/

/* ==================== */
/* Swiper */
/* ==================== */

.bullet-color {
    background-color: rgba(10, 41, 67, 0.8);
    padding: 0.25rem 0.5rem;
    margin: 0 4px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.5);
    border: 1px solid var(--primary-color);
}

.bullet-color-active {
    background-color: rgb(80, 168, 242, 0.8);
    border: 1px solid var(--text-primary);
}

.swiper-pagination {
    display: flex;
    justify-content: center;
}

.swiper-button-next, .swiper-button-prev {
    border: 1px solid var(--text-primary)!important;
    background-color: rgb(80, 168, 242, 0.5);
    padding: 1rem;
    transition-property: color, background-color ;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    backdrop-filter: blur(2px);
}

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

.swiper-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--secondary-color);
}

.swiper-head {
    display: flex;
    align-items: flex-end;
}

.swiper-head > h3{
    color: var(--text-primary);
}

.swiper-head > p{
    color: var(--text-secondary);
}

.swiper,
.swiper * {
box-sizing: content-box;
}

.leaflet-control-attribution {
    display: none;
}

/* 1. Featured Project */
/* ==================== */

.feature__inner {
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
    /* opacity:0; */
	/* transform:translateY(min(calc(50 / var(--vw-min) * 100vw),50px)); */
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
@media screen and (max-width: 768px) {
    .feature__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

/* body.is-feature .feature__inner,
body.is-preview .feature__inner
{
	opacity:1;
	transform:translateY(0);
} */

.feature__content {
    margin: 0 auto min(calc(65 / var(--vw-min) * 100vw), 65px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
}

.feature__swiper img {
    aspect-ratio: 5/2;
    object-fit: cover;
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    .feature__swiper img {
        aspect-ratio: 5/3;
        object-fit: cover;
}
}


/* New Feature */

.feature__card {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s ease-in-out;
    min-width: 0;
    min-height: 0;
}

.feature__card:hover {
    box-shadow: 0px 0px 8px rgba(0,0,0,0.8);
}

.feature__info__wrap {
    display: flex;
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px);;
    background-color: var(--text-primary);
    gap: var(--gap-sm);
    align-items: flex-end;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--primary-color);
}

.feature__price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature__sale {
    background-color: var(--primary-color);
    color: var(--text-primary);
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(12 / var(--vw-min) * 100vw), 12px);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    font-weight: 500;
}

.feature__rent {
    border: solid 2px var(--primary-color);
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(12 / var(--vw-min) * 100vw), 12px);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    font-weight: 500;
}

.feature__head {
    margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .feature__rent, .feature__sale, .feature__head{
		font-size:calc(32 / var(--vw-min) * 100vw);
	}
}

.feature__body {
    color: var(--secondary-color);
    width: 100%;
}

.feature__location {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.feature__info {
    width: 100%;
}

.feature__img {
    flex: 1 1 80%;
    display: flex;
}

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

/* 2. Listing Preview */
/* ==================== */

.preview__inner {
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .preview__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

.preview__content {
    margin: 0 auto min(calc(65 / var(--vw-min) * 100vw), 65px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
}

.proj-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
@media screen and (max-width: 768px) {
    .proj-wrap {
        grid-template-columns: 1fr;
    }
}

.proj-card {
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
    cursor: pointer;
}

.card-img {
    display: flex;
}

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

.card-info {
    padding: var(--gap-sm);
    color: var(--primary-color);
    background-color: var(--accent-b);
}

.card-price {
    padding: var(--gap-sm);
    color: var(--text-primary);
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: center;
}

.card-price h3 {
    color: var(--accent-a);
}

/* 3. Benefit Start */
/* ==================== */

.benefit__inner {
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .benefit__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

.benefit__content {
    margin: 0 auto min(calc(65 / var(--vw-min) * 100vw), 65px);
    display: flex;
    flex-direction: column;
    gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.benefit-wrap {
    display: flex;
    gap: var(--gap-mid);
}
@media screen and (max-width: 1200px) {
    .benefit-wrap {
        flex-direction: column;
    }
}

.benefit-card {
    background-color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--gap-mid);
    flex: 1 1 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}

.benefit-icon > svg {
    width: 6rem;
    height: 6rem;
    fill: var(--accent-a);
}

.benefit-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.benefit-text > h3 {
    text-align: center;
}

.benefit-text > p {
    color: var(--secondary-color);
    text-align: center;
}

/* 4. Step Start */
/* ==================== */

.step-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-mid);
}

.step-card-wrap {
    display: flex;
    flex-direction: column;
}

.step-card {
    display: flex;
    gap: var(--gap-sm);
}

.step-number > span {
    font-size: var(--text-h3);
    color: var(--accent-a);
}

.step-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.break {
    position: relative;
}

.break:after {
    content: '';
    position: absolute;
    width: 60%;
    height: 2px;
    bottom: -0.5rem;
    left: 0;
    background-color: var(--secondary-color);
}

/* 5. News Start */
/* ==================== */

.news__inner {
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .news__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

.news__content {
    margin: 0 auto min(calc(65 / var(--vw-min) * 100vw), 65px);
    display: flex;
    flex-direction: column;
    gap: var(--gap-mid);
}

.news-wrap {
    display: flex;
    gap: var(--gap-mid);
}
@media screen and (max-width: 1200px) {
    .news-wrap {
        flex-direction: column;
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
    flex: 1 1 30%;
}

.news-img {
    display: flex;
}

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

.news-info {
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    background-color: var(--primary-color);
    padding: var(--gap-mid);
    gap: var(--gap-sm);
}

.news-info p {
    text-align: left;
    color: var(--text-secondary);
}
/* ==================== */
/* Footer Contact */
/* ==================== */

.cform__inner {
    width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .cform__inner {
        width: 100%;
        padding: calc(48 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
    }
}

.cform__contact {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: min(calc(64 / var(--vw-min) * 100vw),64px) min(calc(48 / var(--vw-min) * 100vw),48px);
    flex-direction: column;
    gap: var(--gap-sm);
    background: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.4));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width:768px){
	.cform__contact{
		padding: calc(32 / var(--vw-min) * 100vw);
	}
}

.contact-wrap h2{
    text-align: center;
}

#leadForm {
    width: 100%;
}

.cform__input, .cform__phone > input{
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    display: block;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px);
    width: 100%;
    min-height: 46px;
    border: none;
    outline: none;
}

.cform__input, .cform__phone {
    margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
    margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
}

.cform__phone {
    display: flex;
    position: relative;
}

.cform__phoneCountry {
    display: flex;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px);
    min-height: 46px;
    background-color: var(--text-primary);
    color: var(--black-primary);
    gap: min(calc(8 / var(--vw-min) * 100vw), 8px);
    align-items: center;
    border-right: 1px solid var(--black-primary);
    cursor: pointer;
    min-width: min(calc(120 / var(--vw-min) * 100vw), 120px);
}
@media screen and (max-width:768px){
	.cform__phoneCountry{
		min-width: calc(160 / var(--vw-min) * 100vw);
	}
}

.cform__phoneDropdown {
    border-top: 1px solid var(--black-primary);
    position: absolute;
    width: max-content;
    top: 100%;
    list-style-type: none;
    background-color: var(--text-secondary);
    color: var(--black-primary);
    opacity: 0;
    transform: translateY(min(calc(8 / var(--vw-min) * 100vw),8px));
    transition-property: opacity, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    pointer-events:none;
    max-height:  min(calc(320 / var(--vw-min) * 100vw), 320px);
    overflow-y: scroll;
}
@media screen and (max-width:768px){
	.cform__phoneDropdown{
		max-height: calc(480 / var(--vw-min) * 100vw);
        width: 100%;
	}
}

.cform__phoneDropdown.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events:auto;
}

.cform__phoneDropdown li[data-iso] {
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(16 / var(--vw-min) * 100vw), 16px);
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-items: center;
    color: var(--black-primary);
}

.cform__phoneDropdown li[data-iso]:hover {
    background-color: var(--text-primary);
}

.cform__phoneCode, .cform__phoneFlag {
    user-select: none;
}

.cform__phoneDropdown--search {
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(16 / var(--vw-min) * 100vw), 16px);
    position: sticky;
    top: 0;
    background-color: var(--text-secondary);
    border-bottom: 1px solid var(--black-primary);
}

.cform__phoneDropdown--search input{
    border: 2px solid var(--accent-a);
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px);
    min-height: 46px;
}
@media screen and (max-width:768px){
	.cform__phoneDropdown--search input{
        width: 100%;
	}
}

.cform__title {
    text-align: center;
    margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
}

.cform__recaptcha{
    margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
}

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

.grecaptcha-badge { 
    visibility: hidden !important; 
    display: none !important;
}


/* Footer Start */

footer {
    background-color: var(--black-primary);
}

.footer__inner {
    padding: calc(96 / var(--vw-min) * 100vw) 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--gap-mid);
    width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .footer__inner {
        width: 100%;
        padding: calc(48 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
    }
}

@media screen and (max-width: 768px) {
    .footer-logo {
        order: 1;
    }
}

.footer-logo img {
    width: auto;
    height: 2rem;
}
@media screen and (max-width: 768px) {
    .footer-logo img{
        width: calc(270 / var(--vw-min) * 100vw);
        height: auto;
    }
}

.footer-logo svg {
    height: 2rem;
    width: auto;
    fill: var(--text-primary);
}

.footer__content {
    display: flex;
    gap: var(--gap-mid);
    width: 100%;
    justify-content: center;
}
@media screen and (max-width: 768px) {
    .footer__content {
        flex-direction: column;
    }
}

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

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

.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;
    gap: var(--gap-sm);
    align-items: flex-start;
}

.footer-item svg{
    width: 1.5rem;
    fill: var(--text-primary);
}

.copyright {
    display: flex;
    gap: 2rem;
}
@media screen and (max-width:768px) {
    .copyright {
        flex-direction: column;
        align-items: center;
    }
}

.copyright-wrapper {
    gap: 1rem;
    color: var(--text-secondary);
}
@media screen and (max-width:768px) {
    .copyright-wrapper {
        order: 0;
    }
}


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

.social-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--accent-a);
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out;
}

.social-item svg{
    width: 20px;
    height: 20px;
    fill: var(--accent-a);
    transition: fill 0.2s ease-in-out;
}

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

.social-item {
    display: flex;
}

.vl {
    border-left: 1px solid var(--text-secondary);
    height: 4rem;
}

/* ==================== */
/* Map Page */
/* ==================== */

.leaflet-popup-content {
    font-family: var(--font-main);
}

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

.pin-link {
    margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
    justify-content: center;
    width: 100%;
    display: flex;
    background-color: var(--primary-color);
    color: var(--text-primary) !important;
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(16 / var(--vw-min) * 100vw), 16px);
}

#map {
    width: 100%;
    height: 100%;
}

.map-wrap {
    flex: 1 1 auto;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    position: static;
    visibility: visible;
    width: 50%;
}
@media screen and (max-width: 900px){
    .map-wrap {
        position: absolute;
        visibility: hidden;
        width: 100%;
    }
}
@media screen and (min-width: 1200px){
    .map-wrap {
        width: 100%;
    }
}

.map-show {
    visibility: visible;;
}

.mobile-map {
    /* position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0); */
    display: none;
    z-index: 10;
}
@media screen and (max-width: 900px) {
    .mobile-map {
        display: block;
    }
}

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

.button-map-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--black-primary);
    transition: all ease 0.2s;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px) min(calc(32 / var(--vw-min) * 100vw), 32px);
    text-align: center;
}

.search-body {
    padding-top: min(calc(72 / var(--vw-min) * 100vw), 72px);
    position: relative;
    height: calc(var(--vh) - 92px);
}
@media screen and (max-width: 768px) {
    .search-body {
        padding-top: calc(96 / var(--vw-min) * 100vw);
        height: calc(var(--vh) - 80px);
    }
}

.search-container {
    display: flex;
    height: 100%;
    position: relative;
    /* height: calc(var(--vh) - calc(130 / var(--vw-min) * 100vw)); */
}

.search-section {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    overscroll-behavior: contain;
    color: var(--primary-color);
    padding: min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.search__title {
    margin-bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    font-weight: 600;
}

.search-nav {
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px);
    border-bottom: 1px solid var(--text-secondary);
    display: flex;
    gap: var(--gap-sm);
    color: var(--primary-color);
    flex-wrap: wrap;
    background-color: var(--text-primary);
    justify-content: center;
}
@media screen and (max-width: 768px) {
    .search-nav select{
		padding: calc(16 / var(--vw-min) * 100vw);
	}
}

.search-nav select {
    padding-left: 0.5rem;
    font-weight: 500;
    font-family: "TH-Body" , "EN-Font";
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    width: min(calc(180 / var(--vw-min) * 100vw), 180px);
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--secondary-color);
    height: 100%;
}
@media screen and (max-width: 768px) {
    .search-nav select{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}


.search-nav [data-listing] {
    border: 2px solid var(--accent-a);
}

.search-nav select option {
    font-family: "TH-Body" , "EN-Font";
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    color: var(--primary-color);
    font-weight: 500;
    background-color: var(--text-primary);
}
@media screen and (max-width: 768px) {
    .search-nav select option{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}

.search-nav select:hover,select:focus  {
    background-color: var(--accent-b);
    outline-style: none;
    border: 2px solid var(--accent-a);
}

.leaflet-marker-icon.highlight-marker {
  filter: drop-shadow(0 0 5px yellow);
  transform: scale(1.2);
  transition: transform 0.3s, filter 0.3s;
}

.search-wrapper {
    display: flex;
    flex: 1 1 30%;
}
@media screen and (max-width: 768px) {
    .search-wrapper{
		flex: 1 1 100%;
	}
}


.search-wrapper input {
    padding: var(--gap-sm);
    width: 100%;
    font-family: var(--font-main);
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 500;
    margin: 0;
    border: 2px solid var(--text-secondary);
}
@media screen and (max-width: 768px) {
    .search-wrapper input{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}

.search-nav-price {
    display: flex;
    gap: var(--gap-sm);
    position: relative;
}

/* Hidden as queried post do not separate between sale and rent */
.search-type {
    display: none;
}

.nav-price-label {
    position: static;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0);
    padding: 0;
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    z-index: 1;
    gap: var(--gap-sm);
    background-color: var(--text-primary);
}
@media screen and (max-width: 768px) {
    .nav-price-label {
        position: absolute;
        display: none;
        flex-direction: column;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
        top: 3.5rem;
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
    .nav-price-label.is-active {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .nav-price-label{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}

.price-btn-bar {
    background-color: var(--accent-a);
    padding: 1rem 0;
}

.nav-price-label label{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
}
@media screen and (max-width: 768px){ 
    .nav-price-label label{
        flex-direction: column;
        align-items: flex-start;
        padding: calc(4 / var(--vw-min) * 100vw) calc(8 / var(--vw-min) * 100vw);
    }
}

.nav-price-button {
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-family: "TH-Body" , "EN-Font";
    font-size: var(--text-sm);
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid var(--secondary-color);
    background-color: transparent;
    display: none;
}
@media screen and (max-width: 768px) {
    .nav-price-button {
        display: block;
    }
}

input {
    font-size: 1rem;
}

.user-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--black-primary);
}
@media screen and (min-width:640px) {
    .user-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.search-card {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s ease-in-out;
    min-width: 0;
    min-height: 0;
}

.search-card:hover {
    box-shadow: 0px 0px 8px rgba(0,0,0,0.8);
}

.search-info-wrap {
    display: flex;
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px);;
    background-color: var(--text-primary);
    gap: var(--gap-sm);
    align-items: flex-end;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--primary-color);
}

.result-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-sale {
    background-color: var(--primary-color);
    color: var(--text-primary);
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(12 / var(--vw-min) * 100vw), 12px);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    font-weight: 500;
}

.price-rent {
    border: solid 2px var(--primary-color);
    padding: min(calc(8 / var(--vw-min) * 100vw), 8px) min(calc(12 / var(--vw-min) * 100vw), 12px);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    font-weight: 500;
}

.result-header {
    margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .price-rent, .price-sale, .result-header{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}

.search-location {
    color: var(--secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-info {
    width: 100%;
}

.result-link {
    background-color: var(--primary-color);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    height: max-content;
    width: 100%;
    transition: background-color 0.2s ease-in-out;
    box-sizing: border-box;
    text-align: center;
}

.result-link:hover {
    background-color: var(--black-primary);
}

.search-img {
    flex: 1 1 80%;
    display: flex;
}

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

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

.search-btn:hover {
    background-color: var(--black-primary);
}

.search-btn-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary) !important;
    transition: all ease 0.2s;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px) min(calc(32 / var(--vw-min) * 100vw), 32px);
    text-align: center;
}

.search-pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.search-pagination > button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 800;
    font-size: var(--text-sh);
    transition: background-color 0.2s ease-in-out;
    padding: 1rem 1.5rem;
    border-radius: 100%;
}

.search-pagination > button:hover {
    background: rgba(197, 197, 197, 0.5);
}

.search-pagination > .page-active {
    border: var(--accent-a) solid 2px;
    background: rgba(80, 168, 242, 0.2);
}

.hide {
    display: none;
}

/* ==================== */
/* Shared Single */
/* ==================== */

.breadcrumbs {
    list-style-type: none;
    display: flex;
}
@media screen and (max-width: 768px) {
    .breadcrumbs{
		display: none;
	}
}

.breadcrumbs li {
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    color: var(--secondary-color);
}

.breadcrumbs a {
    color: var(--primary-color);
}

.breadcrumbs__arrow{
    display: flex;
    align-items: center;
    margin-left: min(calc(8 / var(--vw-min) * 100vw), 8px);
    margin-right: min(calc(8 / var(--vw-min) * 100vw), 8px);
}

.breadcrumbs__arrow svg{
    fill: var(--secondary-color);
    width: auto;
    height: min(calc(8 / var(--vw-min) * 100vw), 8px);
}

.base__single {
    padding-top: min(calc(120 / var(--vw-min) * 100vw), 120px);
}
@media screen and (max-width:768px) {
    .base__single {
        padding-top: 80px;
    }
}

.base__inner {
    width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
    margin: 0 auto min(calc(64 / var(--vw-min) * 100vw), 64px);
}
@media screen and (max-width:768px) {
    .base__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

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

.base__inner li {
    list-style-position: inside;
}

.base__catch {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: min(calc(64 / var(--vw-min) * 100vw), 64px);;
}

.base__title {
    font-size: min(calc(64 / var(--vw-min) * 100vw), 64px);
    margin: 0 auto min(calc(32 / var(--vw-min) * 100vw), 32px);
    font-weight: 800;
}

.base__content {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
    gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
    justify-content: center;
    color: var(--black-primary);
}
@media screen and (max-width:768px) {
    .base__content {
        grid-template-columns: 1fr;
    }
}

.ar_item {
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.4);
}

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

.ar__link:hover .ar__thumb img,
.ar__link:hover .promo-item-head img {
    scale: 1.05;
}

.ar__thumb, .promo-item-head {
    display: flex;
    overflow: hidden;
}

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

.ar__title {
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 600;
    padding: min(calc(16 / var(--vw-min) * 100vw), 16px);
}

.ar__content {
    display: flex;
}

/* ==================== */
/* Property Single */
/* ==================== */

.property__single {
    padding-top: min(calc(120 / var(--vw-min) * 100vw), 120px);
}
@media screen and (max-width:768px) {
    .property__single {
        padding-top: 80px;
    }
}

.property__inner {
    color: var(--black-primary);
    width: min(calc(1400 / 1600 * 100vw), 1400px);
    margin: 0 auto;
}
@media screen and (max-width:768px) {
    .property__inner {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw) 0;
    }
}

.property__box {
    background-color: var(--accent-b);
    padding: min(calc(24 / var(--vw-min) * 100vw), 24px);
    margin-bottom: min(calc(32 / var(--vw-min) * 100vw), 32px); ;
}

.property__title {
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    margin: 0 auto min(calc(32 / var(--vw-min) * 100vw), 32px);
    color: var(--primary-color);
    font-weight: 700;
}

.property__swiper {
    margin: 0 auto min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.property__swiper img{
    width: 100%;
    height: auto;
    aspect-ratio: 8/3;
    object-fit: cover;
}
@media screen and (max-width:768px) {
    .property__swiper img {
        aspect-ratio: 3/2;
    }
}

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

.property__content p{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
@media screen and (max-width:768px) {
    .property__content p {
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.property__content h2{
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 700;
}
@media screen and (max-width:768px) {
    .property__content h2 {
        font-size: calc(32 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.property__content h3{
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 600;
}
@media screen and (max-width:768px) {
    .property__content h3 {
        font-size: calc(32 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.property__content ul, .property__content ol{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}

@media screen and (max-width:768px) {
    .property__content ul, .property__content ol{
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.property__content li {
    list-style-position: inside;
}

.property__map {
    width: 100%;
    height: min(calc(500 / var(--vw-min) * 100vw), 500px);;
}

.property__query {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
@media screen and (max-width: 768px) {
    .property__query {
        grid-template-columns: 1fr;
    }
}

.property__pagination {
    width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
    margin: min(calc(16 / var(--vw-min) * 100vw), 16px) auto 0;
    display: flex;
    justify-content: center;
    gap: min(calc(16 / var(--vw-min) * 100vw), 16px);;
}
@media screen and (max-width: 768px) {
    .property__pagination {
        width: 100%;
    }
}

.ajax-page.active {
    border: var(--accent-a) solid 2px;
    background: rgba(80, 168, 242, 0.2);
}

.ajax-page {
    color: var(--black-primary);
    padding: 1rem 1.5rem;
    border-radius: 100%;
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px) auto;
    font-weight: 500;
}

/* ==================== */
/* Blog Archive Page */
/* ==================== */

.blog-pagination {
    display: flex;
    justify-content: center;
    padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}

.page-numbers {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 800;
    font-size: var(--text-sh);
    transition: background-color 0.2s ease-in-out;
    padding: 1rem 1.5rem;
    border-radius: 100%;
}

.page-numbers.current {
    border: var(--accent-a) solid 2px;
    background: rgba(80, 168, 242, 0.2);
}

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

/* ==================== */
/* Blog Post Page */
/* ==================== */

.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;
    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" , "Roboto Condensed";
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* ==================== */
/* About Page */
/* ==================== */

.about__inner p{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
@media screen and (max-width:768px) {
    .about__inner p {
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.about__inner h2{
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 700;
}
@media screen and (max-width:768px) {
    .about__inner h2 {
        font-size: calc(32 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.about__inner h3{
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 600;
}
@media screen and (max-width:768px) {
    .about__inner h3 {
        font-size: calc(32 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.about__inner ul, .about__inner ol{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}

@media screen and (max-width:768px) {
    .about__inner ul, .about__inner ol{
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(32 / var(--vw-min) * 100vw);
    }
}

.about__inner li {
    list-style-position: inside;
}