* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline
}

:root {
    --black: #000000;
    --white: #ffffff;
    --gray: #999999;
    --dark-gray: #545A5B;
    --border-color: #545a5b80;
    --yelow-bg: #F2EFDC;
    --yellow-dark: #FCCD79;
    --orange: #EB5642;
    --dark-red: #A11E21;
    --studio: #608767;
    --modern: #6398B4;
    --classic: #536F84;
    --student: #D05932;
    --heritage: #fbcc79;
    --aqua_blue: #8CD2D2;
    --sky: #98D2DB;
    --font-Regular: 'Harmonia Sans Pro Cyr';
    --font-Semi_bold: 'Harmonia Sans Pro Cyr Semi Bd';
    --font-bold: 'Harmonia Sans Pro Cyr';
    --font-italic: 'Editorial New';
    --light-yellow: #f8f6ed;
    --heading-lg: 4.5rem;
    --heading-xl: 4rem;
    --heading-md: 3rem;
    --heading-sm: 2rem;
    --heading-xs: 1.5rem;
    --text-content: 1.125rem;
    --text-content-sm: 1.25rem;
    --container-width: 1280px;
}

/***Dark Mode CSS***/

[data-theme="dark"] {
    --black: #ffffff;
    --white: #000000;
    --gray: #999999;
    --yelow-bg: #8cd2d2;
    --orange: #EB5642;
    --light-yellow: #8cd2d2;
    --border-color: #ffffff80;
    --dark-gray: #fff;
}

/***END Dark**/
@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Light.eot');

    src: local('Harmonia Sans Pro Cyr Light'), local('HarmoniaSansProCyr-Light'),

        url('../fonts/HarmoniaSansProCyr-Light.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Light.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Light.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Light.ttf') format('truetype');

    font-weight: 300;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Regular.eot');

    src: local('Harmonia Sans Pro Cyr'), local('HarmoniaSansProCyr-Regular'),

        url('../fonts/HarmoniaSansProCyr-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Regular.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Regular.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Regular.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr Semi Bd';

    src: url('../fonts/HarmoniaSansProCyr-SemiBd.eot');

    src: local('Harmonia Sans Pro Cyr Semi Bd'), local('HarmoniaSansProCyr-SemiBd'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-SemiBd.ttf') format('truetype');

    font-weight: 600;

    font-style: normal;

}

@font-face {

    font-family: 'Harmonia Sans Pro Cyr';

    src: url('../fonts/HarmoniaSansProCyr-Bold.eot');

    src: local('Harmonia Sans Pro Cyr Bold'), local('HarmoniaSansProCyr-Bold'),

        url('../fonts/HarmoniaSansProCyr-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/HarmoniaSansProCyr-Bold.woff2') format('woff2'),

        url('../fonts/HarmoniaSansProCyr-Bold.woff') format('woff'),

        url('../fonts/HarmoniaSansProCyr-Bold.ttf') format('truetype');

    font-weight: bold;

    font-style: normal;

}

@font-face {

    font-family: 'Editorial New';

    src: url('../fonts/EditorialNew-Regular.eot');

    src: local('Editorial New Regular'), local('EditorialNew-Regular'),

        url('../fonts/EditorialNew-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/EditorialNew-Regular.woff2') format('woff2'),

        url('../fonts/EditorialNew-Regular.woff') format('woff'),

        url('../fonts/EditorialNew-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Editorial New';

    src: url('../fonts/EditorialNew-Medium.eot');

    src: local('Editorial New Medium'), local('EditorialNew-Medium'),

        url('../fonts/EditorialNew-Medium.eot?#iefix') format('embedded-opentype'),

        url('../fonts/EditorialNew-Medium.woff2') format('woff2'),

        url('../fonts/EditorialNew-Medium.woff') format('woff'),

        url('../fonts/EditorialNew-Medium.ttf') format('truetype');

    font-weight: 500;

    font-style: normal;

}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}



table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    color: var(--black);
    text-decoration: none;
    outline: none;
    transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    cursor: pointer;
}

/*Reset CSS end*/



/* global classes */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-word-break: keep-all;
    word-break: keep-all;
    -webkit-word-break: keep-all;
    -moz-word-break: keep-all;
    word-wrap: break-word;
}

input[type="button"],
input[type="submit"] {
    border: none;
    cursor: pointer;
    outline: none;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    line-height: 1.5;
    position: relative;
    font-family: 'Harmonia Sans Pro Cyr';
    color: var(--black);
    background: var(--white);
    font-size: var(--text-content);
}

.fl {
    float: left
}

.fr {
    float: right
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.pr {
    position: relative;
}

.overflow-h {
    overflow: hidden;
}

.pad0 {
    padding: 0px
}

.mar0 {
    margin: 0px
}

.clear {
    clear: both;
}

.disnon {
    display: none
}

.disblk {
    display: block
}

.text-uppercase {
    text-transform: uppercase;
}

.wrapper {
    width: 1200px;
    margin: 0 auto
}

h1 {
    font-size: 24px;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 20px;
}

.blackoverlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    display: none
}

.amination {
    position: relative;
    overflow: hidden
}

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

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

.d-flex {

    display: flex;

}

section {
    overflow: hidden;
}



.container {
    margin: 0 auto;
    max-width: var(--container-width);
}



@media screen and (min-width:1600px) {

    /* .container{margin: 0 auto;max-width: 1440px;} */

    .partner-slider img {
        max-height: 750px;
    }

    :root {

        --container-width: 1440px;

    }

    .event-img-4 {

        height: 637px !important;

    }

    .slider-property .collections-content-blk p {

        font-size: 18px !important;

    }



}



.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

p {
    /* M-10 — rem so the user's browser font-size setting takes effect;
       1.125rem is exactly 18px at the default 16px root, so the default
       rendering is unchanged. */
    font-size: 1.125rem;
    line-height: 24px;
    margin-bottom: 10px;
}

.fontwg500 {
    font-weight: 500 !important
}

.fontwg400 {
    font-weight: 400 !important
}

.img-blk {
    display: flex;
}

.flex-start {
    align-items: flex-start !important;
}

.line-height0 {
    line-height: 0
}



/** START Dark CSS**/

.theme-switch input#checkbox {

    visibility: hidden;

}

.theme-switch {

    -webkit-appearance: none;

    appearance: none;

    height: 50px;

    width: 50px;

    background-color: var(--black);

    position: fixed;

    right: 0;

    border-radius: 50% 0 0 50%;

    outline: none;

    cursor: pointer;

    top: 150px;

    z-index: 999;

}

.darkHeader .theme-switch {

    top: 10px
}

.theme-switch:after {

    content: url(../images/moon.svg);

    position: absolute;

    height: 30px;

    width: 30px;

    top: 0;

    left: 0;

    right: 0;

    border-radius: 50%;

    bottom: 0;

    margin: auto;

}

[data-theme="dark"] .theme-switch:after {

    content: url(../images/sun.svg) !important;

}

.language-switch {
    position: fixed;
    right: 0;
    top: 205px;
    width: 52px;
    height: 50px;
    background-color: var(--black);
    border-radius: 999px 0 0 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    color: #fff;
    transition: background 0.2s ease, color 0.2s ease;
}

.language-switch:hover,
.language-switch:focus-within {
    background: #ffffff;
    color: #000000;
}

.language-toggle {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
}

.language-toggle:focus {
    outline: none;
}

.language-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.language-label-current {
    opacity: 1;
    transform: translateY(0);
}

.language-label-other {
    opacity: 0;
    transform: translateY(6px);
}

.language-switch:hover .language-label-current,
.language-switch:focus-within .language-label-current {
    opacity: 0;
    transform: translateY(-6px);
}

.language-switch:hover .language-label-other,
.language-switch:focus-within .language-label-other {
    opacity: 1;
    transform: translateY(0);
}

.darkHeader .language-switch {
    top: 65px;
}

/** START Dark CSS**/



/**** STRAT COLOR CSS******/

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}

.text-studio {
    color: var(--studio) !important;
}

.text-modern {
    color: var(--modern) !important;
}

.text-classic {
    color: var(--classic) !important;
}

.text-student {
    color: var(--student) !important;
}

.text-aqua_blue {
    color: var(--aqua_blue) !important;
}

.text-dark-gray {
    color: var(--dark-gray) !important;
}

.text-dark-red {
    color: var(--dark-red) !important;
}

.text-sky {
    color: var(--sky) !important;
}



.bg-black {
    background-color: var(--black) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-studio {
    background-color: var(--studio) !important;
}

.bg-modern {
    background-color: var(--modern) !important;
}

.bg-classic {
    background-color: var(--classic) !important;
}

.bg-student {
    background-color: var(--student) !important;
}

.bg-aqua_blue {
    background-color: var(--aqua_blue) !important;
}

.bg-dark-red {
    background-color: var(--dark-red) !important;
}

.bg-sky {
    background-color: var(--sky) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-yellow-dark {
    background-color: var(--yellow-dark) !important;
}

.bg-yellow-bg {
    background-color: var(--yellow-bg) !important;
}


/**** END COLOR CSS******/





/**** STRAT Padding CSS******/

.ptb-gap-15 {
    padding: 15px 0;
}

.pt-gap-15 {
    padding-top: 15px;
}

.pb-gap-15 {
    padding-bottom: 15px;
}

.ptb-gap-24 {
    padding: 24px 0;
}

.pt-gap-24 {
    padding-top: 24px;
}

.pb-gap-24 {
    padding-bottom: 24px;
}

.ptb-gap-30 {
    padding: 30px 0;
}

.pt-gap-30 {
    padding-top: 30px;
}

.pb-gap-30 {
    padding-bottom: 30px;
}

.ptb-gap-45 {
    padding: 45px 0;
}

.pt-gap-45 {
    padding-top: 45px;
}

.pb-gap-45 {
    padding-bottom: 45px;
}

.ptb-gap-60 {
    padding: 60px 0;
}

.pt-gap-60 {
    padding-top: 60px;
}

.pb-gap-60 {
    padding-bottom: 60px;
}

.ptb-gap-80 {
    padding: 80px 0;
}

.pt-gap-80 {
    padding-top: 80px;
}

.pb-gap-80 {
    padding-bottom: 80px;
}

.bg-yellow {
    background: var(--yelow-bg);
}

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



/**** END Padding CSS******/



/**** Heading Button CSS******/

.heading-lg {

    font-size: var(--heading-lg);

    line-height: 120%;

    margin-bottom: 25px;

}

.heading-xl {

    font-size: var(--heading-xl) !important;

    line-height: 120%;

    margin-bottom: 25px;

}

.heading-md {

    font-size: var(--heading-md);

    line-height: 110%;

    margin-bottom: 10px;

}

.heading-sm {

    font-size: var(--heading-sm);

    line-height: 110%;

    margin-bottom: 15px;

}

.heading-xs {

    font-size: var(--heading-xs);

    line-height: 110%;

    margin-bottom: 10px;

    font-weight: 600;

}

.heading-regular {

    font-size: var(--text-content);

    line-height: 120%;

    margin-bottom: 10px;

    font-weight: 600;

}

.change-font {

    font-family: var(--font-italic);

    letter-spacing: -1px;

}

.home .banner-wrap span.change-font {

    letter-spacing: -1px;

}

span.change-font i strong {

    font-weight: 500;

}

.text-sm {

    font-size: 20px;

    line-height: 135%;

}

/**** START Button CSS******/



.btn-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

    text-transform: uppercase;

    margin-top: 15px;

    border-bottom: 2px solid var(--black);

    font-size: 16px;

    line-height: 1.8;

    position: relative;

}

.link::before,
.link::after {

    position: absolute;

    width: 100%;

    height: 0.5px;

    background: var(--black);

    top: 100%;

    left: 0;

    pointer-events: none;

}

.btn-link svg path {

    stroke: var(--black);

}

.btn-link::before {

    content: "";

    height: 100%;

    top: 0;

    opacity: 0;

}



.btn-link::after {

    content: '';

    transition: opacity 0.3s;

}

.btn-link:hover::before {

    opacity: 1;

    animation: coverUp 0.3s ease forwards;

}



.btn-link:hover::after {

    opacity: 0;

}

.link-white {

    border-color: var(--white);

    color: var(--white);

}

.link.link-white::before,
.link.link-white::after {

    background-color: var(--white);

}

.link-white svg path {

    stroke: var(--white);

}

@keyframes coverUp {

    0% {

        transform-origin: 50% 100%;

        transform: scale3d(1, 0.045, 1);

    }



    50% {

        transform-origin: 50% 100%;

        transform: scale3d(1, 1, 1);

    }



    51% {

        transform-origin: 50% 0%;

        transform: scale3d(1, 1, 1);

    }



    100% {

        transform-origin: 50% 0%;

        transform: scale3d(1, 0.045, 1);

    }

}

.btn-arthaus {

    background: var(--black);

    padding: 12px 24px;

    border-radius: 100px;

    color: var(--white);

    display: inline-block;

    position: relative;

    overflow: hidden;

    font-size: 18px;

    letter-spacing: 1px;

    font-family: var(--font-Semi_bold);

    text-transform: uppercase;

    line-height: 1.2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}


.btn-policies {

    background: var(--white);

    padding: 6px 12px;

    border-radius: 100px;

    color: var(--black);

    display: inline-block;

    position: relative;

    overflow: hidden;

    font-size: 10px;

    letter-spacing: 0.8px;

    font-family: var(--font-Semi_bold);

    text-transform: uppercase;

    line-height: 0.8;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}


.btn-arthaus.btn-white {
    background: var(--white);
    color: var(--black);
}

.btn-arthaus span {

    position: relative;

    z-index: 3;

}

.btn-hover::before,
.btn-hover::after {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.btn-hover::before {

    content: '';

    background: var(--orange);

    width: 120%;

    left: -125%;

    transform: skew(30deg);

    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);

}



.btn-hover:hover::before {

    transform: translate3d(100%, 0, 0);

}



/**** END Button CSS******/





/* START HEADER CSS */

.nav-drop {

    display: flex;

    align-items: center;

    gap: 5px;

}

.nav-drop span {

    display: flex;

}

.nav-drop span svg {

    stroke: var(--gray);

}

/* mobile menu start */

.burger {

    position: relative;

    display: none;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    width: 1.6rem;

    height: 1.15rem;

    opacity: 0;

    visibility: hidden;

    background: transparent;

}

.burger-line {

    position: absolute;

    display: block;

    right: 0;

    width: 100%;

    height: 2.1px;

    opacity: 1;

    border: none;

    outline: none;

    border-radius: 1rem;

    background: var(--black);

}

.burger-line:nth-child(1) {

    top: 0px;

}

.burger-line:nth-child(2) {

    top: 0.5rem;

    width: 70%;

}

.burger-line:nth-child(3) {

    top: 1rem;

}

.overlay {

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    width: 100%;

    z-index: 9;

    opacity: 0;

    visibility: hidden;

    transition: all 0.35s ease-in-out;

    background-color: rgba(0, 0, 0, 0.65);

}

.hidden-desktop-nav {
    display: none;
}





/* mobile menu end */

.closemenu {
    display: none;
}

.closemenu svg path {
    fill: var(--black);
}

.sticky-book {

    position: fixed;

    width: 130px;

    height: 130px;

    right: 35px;

    bottom: 38%;

    z-index: 99;

    cursor: pointer;

}

.sticky-book svg {

    width: 130px;

    height: 130px;

}

.header-wrap {
    padding: 22px 0;
    position: relative;
    z-index: 999;
}

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

.logoblk {
    width: 150px;
}

.right-header {
    width: 38%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

/* Increased from 32% to accommodate longer Spanish text */

.right-header li.dropdown-nav ul {

    opacity: 0;

    position: absolute;

    background: var(--white);

    right: 0;

    top: 70px;

    width: 230px;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 4;

    padding-left: 0;

    border-radius: 6px;

    border: 1px solid var(--dark-gray);

}

.dropdown-space {

    position: relative;

}

.right-header .dropdown-space li.dropdown-nav:hover>ul,

.right-header .dropdown-space li.dropdown-nav ul li:hover>ul,

.right-header .dropdown-space li.dropdown-nav:active>ul,

.right-header .dropdown-space li.dropdown-nav ul li:active>ul {

    opacity: 1;

    visibility: visible;

}



.right-header .dropdown-space li.dropdown-nav ul li a {

    color: var(--black);

    line-height: 1;

    padding: 18px 24px;

    display: block;

}

.right-header .dropdown-space li.dropdown-nav ul li a:hover {

    background: var(--light-yellow);

}

.right-header .dropdown-space li.dropdown-nav ul li a.active {

    background: var(--light-yellow);

    color: var(--orange);



}

.right-header .dropdown-space li {

    position: relative;

}

.right-header .dropdown-space li.dropdown-nav ul:after {

    content: "";

    top: -21px;

    right: 22px;

    position: absolute;

    width: 20px;

    height: 20px;

    border-bottom: 15px solid var(--black);

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    z-index: -2;

}



.right-header .dropdown-space li.dropdown-nav ul:before {

    content: "";

    top: -19px;

    right: 22px;

    position: absolute;

    width: 19px;

    height: 19px;

    border-bottom: 15px solid var(--white);

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    z-index: -1;

}



.right-header .dropdown-space li .No-list li:first-child a {

    border-radius: 8px 8px 0 0;

}

.right-header .dropdown-space li .No-list li:last-child a {

    border-radius: 0 0 8px 8px;

}

.center-menu .nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.center-menu .nav ul {

    display: block;

}

.center-menu .nav li a.active {

    color: var(--orange);

}

li.flex {

    border-top: 2px solid var(--orange);

}

.header-wrap {

    transition: transform .3s ease;

    transition: transform .9s cubic-bezier(.215, .61, .355, 1), padding .4s, background-color .4s;

    transition: transform .9s cubic-bezier(.215, .61, .355, 1), padding .4s, background-color .4s, -webkit-transform .9s cubic-bezier(.215, .61, .355, 1);

}

.header-wrap.scrollUp {

    padding: 12px 0;

    transform: translateY(-100%);



}

.header-wrap.darkHeader {

    position: fixed;

    width: 100%;

    z-index: 99;

    background: var(--white);

    padding: 12px 0;

    transition: 0.5s all ease-in-out;

    transform: translateY(0%);

}



.center-menu .nav li {

    position: relative;

}

.center-menu .nav li a {

    display: flex;

    align-items: center;

    gap: 5px;

    text-transform: uppercase;

    font-size: 18px;

    line-height: 1.3;

    color: var(--black);

}



.center-menu .nav li a svg {

    stroke: var(--gray);

}

.logoblk svg path {

    fill: var(--black);

}

.right-header a {
    text-transform: uppercase;

    font-size: 18px;

    color: var(--black);
}





.right-header a.btn-arthaus {

    background: var(--black);

    color: var(--white) !important;

}

.right-header a.active {

    color: var(--orange);

}





.center-menu .nav li.dropdown-nav ul {

    opacity: 0;

    position: absolute;

    background: var(--white);

    left: 0;

    top: 50px;

    width: 240px;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 4;

    padding-left: 0;

    border-radius: 6px;

    border: 1px solid var(--light-yellow);

}



.center-menu .nav li.dropdown-nav:hover>ul,

.center-menu .nav li.dropdown-nav ul li:hover>ul,

.center-menu .nav li.dropdown-nav:active>ul,

.center-menu .nav li.dropdown-nav ul li:active>ul {

    opacity: 1;

    visibility: visible;

}



.center-menu .nav li.dropdown-nav ul li a {

    color: var(--black);

    line-height: 1;

    padding: 18px 24px;

}

.center-menu .nav li.dropdown-nav ul li a:hover {

    background: var(--light-yellow);

}

.center-menu .nav li.dropdown-nav ul li a.active {

    background: var(--light-yellow);

    color: var(--orange);



}



.center-menu .nav li.dropdown-nav ul li:last-child a {

    border-bottom: none;

}



.center-menu .nav li.dropdown-nav ul ul {

    top: 0;

    left: 242px;

    background: var(--white)
}



.center-menu .nav li.dropdown-nav ul ul li a:hover,

.center-menu .nav li.dropdown-nav ul ul li a:active {

    background: var(--light-yellow);

}

.center-menu .nav li.dropdown-nav ul:before {

    content: "";

    top: -19px;

    left: 22px;

    position: absolute;

    width: 19px;

    height: 19px;

    border-bottom: 15px solid var(--light-yellow);

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

}



/* END HEADER CSS */



/* START BANNNER CSS */

.banner-img {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.text-hide-desktop {
    display: none;
}

.text-hide-mobile {
    display: block;
}



.slide-from-left {

    width: 100%;

    height: 100%;

    background-color: var(--black);

    position: relative;

    animation: slide-from-left 1.3s 1 linear forwards;

    position: absolute;

}



@keyframes slide-from-left {

    0% {
        left: 0;
        opacity: 1
    }

    99% {
        left: 99%;
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0;
        display: none
    }

}

@-webkit-keyframes slide-from-left {

    0% {
        left: 0;
        opacity: 1
    }

    99% {
        left: 99%;
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0;
        display: none
    }

}

/* END BANNNER CSS */





/** START CAMPNY LIST SECTION**/



.compant-list-wrap {

    gap: 20px;

    align-items: flex-start;

}

.col-3 {
    width: 33.33%;
}

.company-img {

    margin: 0;

    padding: 0;

    display: flex;

}

/* Live/Work/Join tile images render as identical squares regardless of the
   image's intrinsic dimensions or browser cache state. The <picture> wrapper
   acts as a square container; the <img> fills it via object-fit: cover. */
.company-img picture {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.company-img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.company-content-blk {

    background: var(--yelow-bg);

    padding: 30px 10px;

}

.company-content-blk p {

    min-height: 100px;

}

.effect-img-canvas {
    width: 100%;
    position: relative;
}

/** End CAMPNY LIST SECTION**/



/** END IMPACT  SECTION**/

.sub-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.text-orange {
    color: var(--orange);
}

.impact-box-wrap {
    gap: 50px;
}

.effect-img {

    width: 100%;

    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);

}

.effect-img-circle {

    width: 100%;

    border-radius: 320px 320px 0 0;

}

.effect-img-budget {

    width: 100%;

    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);



}

.budget-content {
    padding-left: 50px;
}

/** END IMPACT  SECTION**/





/** START CAMPNY LIST SECTION**/

.col-4 {
    width: 25%;
}

.col-8 {
    width: 75%;
}

.collections-list-wrap {

    gap: 20px;

    align-items: flex-start;

}

.collections-img {

    margin: 0;

    padding: 0;

    display: flex;

}



.collections-content-blk {

    padding: 30px 10px;

}

.collections-content-blk p {

    min-height: 80px;

}

.heading-collection {

    font-family: var(--font-Regular);

    line-height: 110%;

    margin-bottom: 0px;

    font-size: var(--heading-xl);

}

.list-month {

    gap: 24px;

    padding-top: 15px;

}

.list-month li {

    padding: 1px 0;

    font-family: var(--font-Regular);

    font-size: 18px;

    letter-spacing: 0.3px;

    border-right: 2px solid #53595a80;

    padding-right: 24px;

}



.list-month li:last-child {

    border-right: none
}

.lease-month {

    margin-top: 24px;

}

/** End CAMPNY LIST SECTION**/





/* Slider CSS */



.img-slider .slick-dots {

    bottom: 50px;

}

.img-slider .slick-dots li {

    width: 12px;

}

.img-slider .slick-dots li button {

    width: 12px;

    height: 12px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--white);

}

.img-slider .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--white);

}





.banner-slider .slick-dots {

    bottom: 50px;

}

.banner-slider .slick-dots li {

    width: 12px;

}

.banner-slider .slick-dots li button {

    width: 12px;

    height: 12px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--white);

}

.banner-slider .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--white);

}



.slider-sec-bottom {

    width: 100%;

    height: 100%;

}

.slider-property .slick-slide {

    margin-left: 10px;

    margin-right: 10px;

}

.slider-property .slick-list {

    margin-left: -10px;

    margin-right: -10px;

}

.slider-property .slick-dots,
.studio-theme .slider-property .slick-dots,
.classic-theme .slider-property .slick-dots,
.student-theme .slider-property .slick-dots,
.workspace-theme .slider-property .slick-dots {

    bottom: -20px !important;

    position: absolute !important;

    width: 100% !important;

    text-align: center !important;

    z-index: 2 !important;

    display: block !important;

}

/* Hide navigation for modern collection specifically */
.modern-theme .slider-property .slick-dots,
.modern-theme .slider-property .img-slide-arrow1 {
    display: none !important;
}

/* Conference slider dots styling */
.slider-conference .slick-dots,
.workspace-theme .slider-conference .slick-dots {

    bottom: -20px !important;

    position: absolute !important;

    width: 100% !important;

    text-align: center !important;

    z-index: 2 !important;

    display: block !important;

}

.slider-conference .slick-dots li,
.workspace-theme .slider-conference .slick-dots li {

    width: 12px !important;

    height: 12px !important;

    margin: 0 5px !important;

    display: inline-block !important;

    position: relative !important;

}

.slider-conference .slick-dots li button,
.workspace-theme .slider-conference .slick-dots li button {

    width: 12px !important;

    height: 12px !important;

    background: transparent !important;

    border-radius: 50% !important;

    border: 1px solid var(--black) !important;

    padding: 0 !important;

    margin: 0 !important;

    font-size: 0 !important;

    line-height: 0 !important;

    cursor: pointer !important;

    display: block !important;

    color: transparent !important;

    outline: none;  /* S-05: was !important, which defeated every focus style */

}

.slider-conference .slick-dots li.slick-active button,
.workspace-theme .slider-conference .slick-dots li.slick-active button {

    opacity: 1 !important;

    background: var(--black) !important;

}

.slider-property .slick-dots li,
.modern-theme .slider-property .slick-dots li,
.studio-theme .slider-property .slick-dots li,
.classic-theme .slider-property .slick-dots li,
.student-theme .slider-property .slick-dots li,
.workspace-theme .slider-property .slick-dots li {

    width: 12px !important;

    height: 12px !important;

    margin: 0 5px !important;

    display: inline-block !important;

    position: relative !important;

}

.slider-property .slick-dots li button,
.modern-theme .slider-property .slick-dots li button,
.studio-theme .slider-property .slick-dots li button,
.classic-theme .slider-property .slick-dots li button,
.student-theme .slider-property .slick-dots li button,
.workspace-theme .slider-property .slick-dots li button {

    width: 12px !important;

    height: 12px !important;

    background: transparent !important;

    border-radius: 50% !important;

    border: 1px solid var(--black) !important;

    padding: 0 !important;

    margin: 0 !important;

    font-size: 0 !important;

    line-height: 0 !important;

    cursor: pointer !important;

    display: block !important;

    color: transparent !important;

    outline: none;  /* S-05: was !important, which defeated every focus style */

}

.slider-property .slick-dots li.slick-active button,
.modern-theme .slider-property .slick-dots li.slick-active button,
.studio-theme .slider-property .slick-dots li.slick-active button,
.classic-theme .slider-property .slick-dots li.slick-active button,
.student-theme .slider-property .slick-dots li.slick-active button,
.workspace-theme .slider-property .slick-dots li.slick-active button {

    opacity: 1 !important;

    background: var(--black) !important;

}

.slider-property .collections-content-blk p {

    font-size: 16px;

}

.img-slide-arrow1 {

    position: absolute;

    width: 53px;

    height: 53px;

    border: none;

    outline: none;

    background: transparent;

    bottom: -80px;

    cursor: pointer;

}



.img-slide-arrow1.prev-arrow {

    right: calc(100% - 50%);

}



.img-slide-arrow1.next-arrow {

    left: calc(100% - 50%);

}

.img-slide-arrow1:hover svg path {

    fill: var(--black);

}

[data-theme="dark"] .img-slide-arrow1:hover svg path {

    fill: var(--white);

}





.slider-heading-wrap {

    position: absolute;

    width: 300px;

    height: 20%;

}

.slider-heading-wrap.live {

    top: 20%;

    left: 15%;

}

.slide-img {

    position: relative;

}

.slider-heading-wrap.work {

    right: 30%;

    bottom: 30%;

}

.heading-lg.heading-banner {

    font-size: 180px;

    display: inline-flex;

    padding: 5px 20px;

    line-height: 0.9;

    align-items: center;

    padding-top: 20px;

    color: #fff;

    text-shadow: -3px 1px 50px #000000a3;

}

.slider-heading-wrap {}

.banner-slider .slick-slide.slick-active .slider-heading-wrap {

    -webkit-animation-name: slideInLeft;

    animation-name: slideInLeft;

}

/* END Slider CSS */

/*******Start Footer CSS******/

.footer-section {

    background-color: var(--black);

    color: var(--white);

}

.footer-section a {
    color: var(--white);
}

.footer-logo {

    width: 14%;

}

.footer-logo svg path {

    fill: var(--white);

}



.tour-box-blk {

    width: 20%;

}

.middle-nav {
    width: 66%;
    justify-content: center;
    gap: 30px;
    margin-left: 20px;

}

.tour-box-blk .btn-white {

    width: 100%;

    text-align: center;

    padding: 10px 20px;

    margin-top: 20px;

}

/* .tour-box-blk .heading-md{

    font-size: var(--heading-xl);

} */

.navlist {
    width: 122px;
}

.navlist.nav-live {

    width: 170px;

}

.navlist.nav-work {

    width: 170px;

}

.navlist.nav-about {

    width: 160px;

}

/* .navlist.nav-join {

    width: 94px;

} */

.nav-list-name {

    font-family: var(--font-italic);

    font-size: 28px;

    margin-bottom: 15px;

}

.footer-nav-list li {

    margin-bottom: 10px;

    font-family: var(--font-Regular);

}

ul.list-nav-footer {

    display: flex;

    align-items: center;

    gap: 20px;

}

.footer-copyright {
    padding-bottom: 40px;
}

/*******END Footer CSS******/





/*****Living CSS****/







table,
td,
th {

    text-align: center;

}



table {

    border-collapse: collapse;

    width: 100%;

    font-size: 18px;

    color: var(--black);

    text-align: center;

}



th,
td {

    padding: 10px 15px;

    min-height: 71px;

    height: 70px;

    display: table-cell;

    vertical-align: middle;

}

.table-blank th {

    width: 20%;

    text-align: center;

    font-size: 24px;

    font-weight: 600;

}

.table-blank th:nth-child(1),
.table-blank td:nth-child(1) {

    text-align: left;

}

.table-blank th:nth-child(2),
.table-blank td:nth-child(2) {

    background: var(--yelow-bg);

}

.table-blank th:nth-child(4),
.table-blank td:nth-child(4) {

    background: var(--yelow-bg);

}

.table-blank tr {

    border-bottom: 1px solid var(--border-color);

}

.table-blank tbody tr:last-child {

    border: none;

}

.table-blank svg path {

    stroke: var(--black) !important;

}

.bettter-svg {

    margin-bottom: 30px;

}

.better-wrap {

    gap: 50px;

}



.better-wrap .col-4 {

    position: relative;

}

.better-wrap .col-4:before {

    content: "";

    position: absolute;

    width: 1px;

    height: 100%;

    right: -25px;

    background: var(--border-color);

    min-height: 300px;

}

.better-wrap .col-4:last-child::before {

    display: none;

}

.col-3 .bettter-content-blk {

    padding-right: 30px;

}

.better-wrap .col-3 {

    position: relative;

}

.better-wrap .col-3:before {

    content: "";

    position: absolute;

    width: 1px;

    height: 100%;

    right: -25px;

    background: var(--border-color);

    min-height: 200px;

}

.better-wrap .col-3:last-child::before {

    display: none;

}

ul.default-list {

    list-style: disc;

    margin-left: 20px;

    padding-bottom: 20px;

    display: block;

}

.bettter-svg svg path {

    fill: var(--black);

}



/***Banner fadeIn***/

.fadein-img-canvas {

    position: relative;

    width: 100%;

    height: 600px;

}

.bgfade_chnage {

    position: absolute;

    width: 100%;

    height: 550px;

}

.effect-img-canvas {

    width: 100%;

}

.effect-fade-canvas_1,
.effect-fade-canvas_2 {

    position: absolute;

    top: 0;

    width: 100%;

    height: 550px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    z-index: -9;

    opacity: 0;

    animation-name: fade;

    animation-duration: 8s;

    animation-iteration-count: infinite;

}

.effect-fade-canvas_1 {

    animation-delay: 0s;

}

.effect-fade-canvas_2 {

    animation-delay: 4s;

}





@keyframes fade {

    00.00% {
        opacity: 0;
        z-index: -10;
    }

    06.25% {
        opacity: 1;
        z-index: -10;
    }

    31.25% {
        opacity: 1;
        z-index: -12;
    }

    37.50% {
        opacity: 1;
        z-index: -14;
    }

    100.0% {
        opacity: 0;
        z-index: -16;
    }

}



/***Banner fadeIn***/



/***Banner Before After**/

.before-after-container .img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    z-index: 5;

}

.before-after-container .background-img1.exterior {

    background-image: url(../images/living/studio-1.jpg);

    background-repeat: no-repeat;

}

.before-after-container .foreground-img1.exterior {

    background-image: url(../images/living/studio.jpg);

    background-repeat: no-repeat;

    width: 50%;

}

.before-after-container {

    position: relative;

    width: 100%;

    height: 550px;

    border: 2px solid var(--white);

    margin: 0 auto;

}

.fg-img-txt-1 {

    background: hsla(0, 0%, 100%, 0.75);

    border-radius: 9px;

    line-height: 1;

    padding: 10px;

    position: absolute;

    bottom: 7%;

    left: 1.5%;

    z-index: 10;

    font-weight: 700;

}

.bai-slider-1 {

    position: absolute;

    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    height: 100%;

    background: rgba(#f2f2f2, 0.3);

    outline: none;

    margin: 0;

    transition: all 0.2s;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 20;

    opacity: 0;

}



/* M-11 — removed: this injected the visible word "Internal" through CSS
   content, which is untranslatable and unselectable. No element with
   class="background-img1" exists in any template, so it was dead. */

.bai-slider-button-1 {

    pointer-events: none;

    position: absolute;

    cursor: pointer;

    border-radius: 10px;

    padding: 10px 20px;

    background-color: var(--white);

    color: var(--orange);

    left: calc(50% - 94px);

    top: calc(50% - 18px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 20;

    width: max-content;

    transform: rotate(90deg);

}

.bai-slider-button-1:before {

    content: "";

    padding: 7px;

    display: inline-block;

    border: solid var(--white);

    border-width: 0 3px 3px 0;

    transform: rotate(45deg);

    position: relative;

    top: 32px;

    left: 44px;

}

.bai-slider-button-1:after {

    content: "";

    padding: 7px;

    display: inline-block;

    border: solid var(--white);

    border-width: 0 3px 3px 0;

    transform: rotate(225deg);

    position: relative;

    bottom: 30px;

    left: -83.5px;

}



.item-content-bond {

    max-width: var(--container-width);

    margin: auto;

    padding: 0;

    width: var(--container-width);

}

/***Banner Before After**/





/*****Living CSS END****/

/***Collection page****/

.parent {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(2, 1fr);

    grid-column-gap: 30px;

    grid-row-gap: 20px;

}



.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 2 / 1 / 3 / 2;
}

.div3 {
    grid-area: 1 / 2 / 3 / 3;
}

.div4 {
    grid-area: 1 / 3 / 2 / 4;
}

.div5 {
    grid-area: 2 / 3 / 3 / 4;
}



.banner-right-box {

    height: calc(100vh - 91px);

}

.banner-left-box {

    padding: 17vh 8vw;

    display: flex;

    align-items: center;

    height: calc(100vh - 91px);

}

.btn-studio {

    background: #9EC3AB;

    color: var(--black);

    margin-top: 10px;

}

.btn-studio:hover {
    color: var(--black);
}

.btn-studio.btn-hover::before {

    background: var(--white) !important;

}

.btn-stdio-green {

    background: var(--studio);

}

.btn-stdio-green.btn-hover::before {

    background: var(--black) !important;

}





.studio-collection p {

    min-height: auto;

}

.mb0 {

    margin-bottom: 0 !important;

}

.box-img-right {

    position: relative;

}

.why-arthuas p {

    min-height: auto;

}

.why-arthuas .collections-content-blk {

    padding: 20px 10px 0px 10px;

    background: transparent;

}

.studio-theme .sticky-book svg path {

    fill: var(--black);

}



.studio-theme .sticky-book svg rect {

    fill: #9EC3AB;

}

.studio-theme .collections-list-blk.bg-yellow:hover {

    background: #9EC3AB;

}

.studio-theme .btn-hover::before {

    background: var(--studio);

}



html[data-theme="dark"] .studio-theme .bg-yellow {

    background: #9EC3AB;

}

html[data-theme="dark"] .logo-power path {

    fill: #fff;

}

.parallax {

    background-attachment: fixed;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center -200px;

}



.collections-list-blk.bg-yellow:hover {

    background: #DCF2EE;

}

.btn-middle-block {

    text-align: center;

}

#hide_studio .compant-list-wrap .collections-list-blk:first-child,
#hide_modern .compant-list-wrap .collections-list-blk:nth-child(2),
#hide_classic .compant-list-wrap .collections-list-blk:nth-child(3),
#hide_student .compant-list-wrap .collections-list-blk:nth-child(4) {

    display: none;

}



/****mordern theme start****/



.modern-theme .sticky-book svg path {

    fill: var(--black);

}



.modern-theme .sticky-book svg rect {

    fill: #98D2DB;

}



.modern-theme .btn-hover::before {

    background: var(--modern);

}



html[data-theme="dark"] .modern-theme .bg-yellow {

    background: #98D2DB;

}

.modern-theme .btn-studio {

    background: #98D2DB;

}



.modern-theme .collections-list-blk.bg-yellow:hover {

    background: #98D2DB;

}

.modern-theme .btn-stdio-green {

    background: var(--modern);

}

.modern-theme .btn-stdio-green.btn-hover::before {

    background: var(--black) !important;

}

.modern-theme .img-slide-arrow1 svg path {

    fill: var(--modern) !important;

}

.modern-theme .img-slide-arrow1:hover svg path {

    fill: var(--black) !important;

}

[data-theme="dark"] .modern-theme .img-slide-arrow1:hover svg path {

    fill: var(--white) !important;

}

.modern-theme .text-studio {

    color: var(--modern) !important;

}

.modern-theme .collections-list-blk.bg-yellow:hover {

    background: #98D2DB;

}



/****mordern theme End****/



/****workspace theme start****/



.workspace-theme .sticky-book svg path {

    fill: var(--black);

}



.workspace-theme .sticky-book svg rect {

    fill: var(--orange);

}



.workspace-theme .btn-hover::before {

    background: var(--orange);

}



html[data-theme="dark"] .workspace-theme .bg-yellow {

    background: var(--orange);

}

.workspace-theme .btn-studio {

    background: var(--orange);

}



.workspace-theme .collections-list-blk.bg-yellow:hover {

    background: var(--orange);

}

.workspace-theme .btn-stdio-green {

    background: var(--orange);

}

.workspace-theme .btn-stdio-green.btn-hover::before {

    background: var(--black) !important;

}

.workspace-theme .img-slide-arrow1 svg path {

    fill: var(--orange) !important;

}

.workspace-theme .img-slide-arrow1:hover svg path {

    fill: var(--black) !important;

}

[data-theme="dark"] .workspace-theme .img-slide-arrow1:hover svg path {

    fill: var(--white) !important;

}

.workspace-theme .text-studio {

    color: var(--orange) !important;

}



.workspace-theme .nav-bottom-left .img-slide-arrow1 svg path,
.workspace-theme .nav-top-right .img-slide-arrow1 svg path {

    fill: none !important;

    stroke: var(--black);

}

.workspace-theme .nav-bottom-left .img-slide-arrow1:hover svg path,
.workspace-theme .nav-top-right .img-slide-arrow1 svg path {

    fill: none !important;

}

[data-theme="dark"] .workspace-theme .nav-bottom-left .img-slide-arrow1:hover svg path,
.workspace-theme .nav-top-right .img-slide-arrow1 svg path {

    fill: none !important;



}



/****mordern theme End****/



/****Classic theme start****/



.classic-theme .sticky-book svg path {

    fill: var(--black);

}



.classic-theme .sticky-book svg rect {

    fill: #96A7BD;

}



.classic-theme .btn-hover::before {

    background: var(--classic);

}



html[data-theme="dark"] .classic-theme .bg-yellow {

    background: #96A7BD;

}

.classic-theme .btn-studio {

    background: #96A7BD;

}



.classic-theme .collections-list-blk.bg-yellow:hover {

    background: #96A7BD;

}

.classic-theme .btn-stdio-green {

    background: var(--classic);

}

.classic-theme .btn-stdio-green.btn-hover::before {

    background: var(--black) !important;

}

.classic-theme .img-slide-arrow1 svg path {

    fill: var(--classic) !important;

}

.classic-theme .img-slide-arrow1:hover svg path {

    fill: var(--black) !important;

}

[data-theme="dark"] .classic-theme .img-slide-arrow1:hover svg path {

    fill: var(--white) !important;

}

.classic-theme .text-studio {

    color: var(--classic) !important;

}



/****mordern theme End****/

/****Classic theme start****/



.student-theme .sticky-book svg path {

    fill: var(--black);

}



.student-theme .sticky-book svg rect {

    fill: #E38340;

}



.student-theme .btn-hover::before {

    background: var(--student);

}



html[data-theme="dark"] .student-theme .bg-yellow {

    background: #E38340;

}

.student-theme .btn-studio {

    background: #E38340;

}



.student-theme .collections-list-blk.bg-yellow:hover {

    background: #E38340;

}

.student-theme .btn-stdio-green {

    background: var(--student);

}

.student-theme .btn-stdio-green.btn-hover::before {

    background: var(--black) !important;

}

.student-theme .img-slide-arrow1 svg path {

    fill: var(--student) !important;

}

.student-theme .img-slide-arrow1:hover svg path {

    fill: var(--black) !important;

}

[data-theme="dark"] .student-theme .img-slide-arrow1:hover svg path {

    fill: var(--white) !important;

}

.student-theme .text-studio {

    color: var(--student) !important;

}



/****mordern theme End****/









/***Collection page end****/





/******flexstay CSSS******/

/* tab css */



.hide {

    display: none;

}



.tab-nav {

    max-width: 300px;

    margin: 0 auto;

    border: 1px solid var(--border-color);

    border-radius: 5px;

}

.tab-nav button {

    width: 100%;

    padding: 12px 24px 12px 24px;

    border: none;

    background: transparent;

    color: var(--black);

    border-radius: 8px;

    border: 1px solid transparent;

    font-size: 22px;

    cursor: pointer;

    font-weight: 600;

    opacity: 0.5;

    line-height: 1;

    font-family: 'Harmonia Sans Pro Cyr';

}

.tab-nav button:hover {

    opacity: 1;

}

.tab-nav button.active {

    border: 1px solid var(--studio);

    opacity: 1;

}

.tab-nav ul {

    display: none;

    flex-wrap: wrap;

    flex-direction: column;

    justify-content: center;

}

.tab-nav ul.show {

    display: block;

}

@media(min-width: 992px) {

    .tab-nav {

        max-width: 100%;

        border: 0;

    }

    .tab-nav ul {

        gap: 16px;

        flex-direction: row;

    }

}

@media(max-width: 1400px) {

    .collection-banner .banner-left-box {

        padding: 17vh 4vw !important;

    }

}





.tab-content {

    padding-top: 30px;

    margin-top: 0;

}

.mobile-select {

    position: relative;

    max-width: 300px;

    margin: 0 auto;

    padding: 12px 16px;

    padding-right: 48px;

    cursor: pointer;

}

.mobile-select::after {

    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>');

    display: inline-block;

    position: absolute;

    line-height: 1;

    right: 16px;

    top: 14px;

}

.mobile-select.active::after {

    transform: rotate(180deg);

}

@media(min-width: 992px) {

    .mobile-select {

        display: none;

    }

    .tab-nav ul {

        display: flex;

    }

}





/* tab css */









.checklist-list li {

    font-size: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 11px;

}



.checklist-list {

    padding-top: 15px;

}

.bd-flex-stay .better-wrap .col-4:before {

    min-height: 180px;

}

.btn-center-block {

    display: flex;

    align-items: center;

    justify-content: center;

}

.flex-studio-list .collections-content-blk p {

    min-height: auto;

}

.icon-list-wrap {

    gap: 0px;

    align-items: flex-start;

    flex-wrap: wrap;

}

.icon-center {

    margin-bottom: 15px;

}

.icon-list-box {

    margin-bottom: 40px;

}

.icon-center svg path {

    stroke: var(--black);

}

.number {

    background: #000;

    border-radius: 100px;

    color: #fff;

    display: inline-block;

    position: relative;

    overflow: hidden;

    font-size: 24px;

    line-height: 30px;

    letter-spacing: 1px;

    font-family: var(--font-Semi_bold);

    text-transform: uppercase;

    width: 40px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.list_number_point,
.list_number_point02 {

    position: absolute;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 10px 20px;

    transition: 0.5s all ease-in-out;

    cursor: pointer;

    border-radius: 30px;

}

.list_number_point:hover,
.list_number_point02:hover {

    background: #ffffff50;

    box-shadow: 4px 4px 24px 0px #0000001F;

}



.list_number_point.point_one {

    left: 37%;

    top: 28%;

}

.list_number_point.point_two {

    left: 60.5%;

    top: 10%;

}

.list_number_point.point_three {

    left: 73.5%;

    top: 24%;

}

.list_number_point.point_four {

    left: 15%;

    top: 44%;

}

.list_number_point.point_five {

    left: 77%;

    top: 73%;

}

.hover_text {

    font-size: 20px;

    line-height: 30px;

    font-family: var(--font-bold);

    font-weight: 700;

    opacity: 0;

    left: -20px;

    transition: 0.5s all ease-in-out;

    position: relative;

    color: #000;

}

.list_number_point:hover span.hover_text,
.list_number_point02:hover span.hover_text {

    opacity: 1;

    left: 0;

}



.list_number_point02.point_one {

    left: 23%;

    top: 14%;

}

.list_number_point02.point_two {

    left: 67%;

    top: 29%;

}

.list_number_point02.point_three {

    left: 78%;

    top: 65%;

}

.list_number_point02.point_four {

    left: 39%;

    top: 67%;

}



.table-blank.table-simple th:nth-child(2),
.table-blank.table-simple td:nth-child(2),
.table-blank.table-simple td:nth-child(4),
.table-blank.table-simple th:nth-child(4) {

    background-color: inherit;

}

.table-blank.table-simple th,
.table-blank.table-simple td {

    font-weight: normal;

    font-size: 18px;

    min-height: 75px;

    height: 75px;

}

.table-blank.table-simple th:nth-child(1),
.table-blank.table-simple td:nth-child(1) {

    text-align: center;

}









/********Solor page ******/

.logo-power {

    margin-bottom: 30px;

}



/***** Power Css***/

/* FAQ CSS */

.accordion {

    max-width: 880px;

    margin: 0 auto;

    padding: 0 10px;

}

.accordion .accordion-item {

    border-bottom: 1px solid #545A5B40;

}

.accordion button {

    position: relative;

    display: block;

    text-align: left;

    width: 100%;

    padding: 24px 0;

    font-size: var(--font-Regular);

    font-weight: 400;

    border: none;

    background: none;

    outline: none;

    color: var(--black);

    cursor: pointer;

}

.accordion button .accordion-title {

    padding: 1em 1.5em 1em 0;

}

.accordion-title-h2 {

    color: var(--black);

    font-family: var(--font-bold);

    font-size: 18px;

    font-weight: 700;

    line-height: 27px;

    text-transform: uppercase;

}

.accordion button .icon {

    display: inline-block;

    position: absolute;

    top: 0;

    right: 0;

    width: 20px;

    height: 20px;

    /* border: 1px solid; */

    /* border-radius: 22px; */

    bottom: 0;

    margin: auto 0;

}

.accordion button .icon::before {

    display: block;

    position: absolute;

    content: url('data:image/svg+xml,<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 0.999999L7.21905 6.33061C7.66844 6.7158 8.33156 6.7158 8.78095 6.33061L15 1" stroke="black" stroke-width="1.5" stroke-linecap="round"/></svg>');

    top: 0;

    left: 0;

    width: 16px;

    height: 20px;

    right: 0;

    bottom: 0;

    margin: auto;

}

.accordion button[aria-expanded='true'] .icon::before {

    content: url('data:image/svg+xml,<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7L7.21905 1.66939C7.66844 1.2842 8.33156 1.2842 8.78095 1.66939L15 7" stroke="black" stroke-width="1.5" stroke-linecap="round"/></svg>');

}

.accordion .accordion-content {

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    transition: opacity 200ms linear, max-height 200ms linear;

    will-change: opacity, max-height;

}

.accordion button[aria-expanded='true']+.accordion-content {

    opacity: 1;

    max-height: 30em;

    transition: all 200ms linear;

    will-change: opacity, max-height;

    padding-bottom: 25px;

}

.accordion button[aria-expanded='true'] {

    color: #03b5d2;

}

.accordion button[aria-expanded='true'] .icon::after {

    width: 0;

}

.hide-sticky .sticky-book {

    display: none;

}

.accordion-content ul {

    list-style: disc;

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    list-style-type: disc;

    font-family: var(--font-Regular);

    margin-left: 30px;

    line-height: 24px;

}

/***** Power Css***/



/******** ABOUT US START******/

.box-right-wrap {

    display: flex;

    align-items: center;

    justify-content: flex-end;

}

.box-right-blk {

    width: 640px;

    padding: 80px 80px 80px 48px;

}

.fixed-box-blk {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}

.ab-banner-left-box {

    padding: 13vh 6vw 13vh 3vw;

    display: flex;

    align-items: center;

    height: calc(100vh - 91px);

}

.typing-text {

    color: var(--orange);

}



.typing-text::after {

    content: "|";

    animation: blink 1s step-end infinite;

}

.typing_effect_img {

    transition: background-image 1s ease-in-out;

    width: 100%;

    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);

}



@keyframes blink {

    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0;

    }

}



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

    .typing-container {

        font-size: 1.5rem;

    }

    .breadcrumb-list {
        align-items: center;
    }

    .breadcrumb-list li {
        align-items: center;
        line-height: 1.2;
        gap: 8px;
    }

    .breadcrumb-list li::after {
        display: flex;
        align-items: center;
        align-self: center;
        line-height: 0;
        flex-shrink: 0;
    }

    .breadcrumb-list li a {
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
    }

}



.banner-slider.purpose-sec .slick-dots li button {

    background: var(--black);

}

.banner-slider.purpose-sec .slick-dots li.slick-active button {

    background: var(--orange);

}

.banner-slider.purpose-sec .slick-dots {

    left: 50px;

    text-align: left;

}

.banner-slider.purpose-sec .hover-slider.prev-arrow {

    left: -55px;

    right: auto;

}

.banner-slider.purpose-sec .hover-slider.next-arrow {

    right: -55px;

    left: auto;

}





/******** ABOUT US END******/



/***Imapct Page Start***/



.partner-slider .slider-content {

    z-index: 2;

    position: absolute;

    top: 50%;

    left: 0;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    max-width: var(--container-width);

    margin: 0 auto;

    width: var(--container-width);

    right: 0;

}



.partner-slider .slick-slider {

    margin: 0;

    padding: 0 !important;

}







.slider-control {

    z-index: 99999;

    position: absolute;

    right: 0;

    bottom: 14%;

    max-width: var(--container-width);

    margin: 0 auto;

    width: var(--container-width);

    left: 100px;

}



.slider-partner-wrap {

    position: relative;

}

.slider-control .next-partner,

.slider-control .prev-partner {

    display: inline-block;

    border: none;

    color: var(--black);

    -webkit-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;

    cursor: pointer;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: transparent;

}

.slider-control .next-partner svg path,

.slider-control .prev-partner svg path {

    stroke: var(--black)
}

.partner-slider img {

    width: 100%;

    object-fit: cover;

}

.partner-left-wrap {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

}

.partner-left-blk {

    width: 640px;

    padding: 40px 40px 100px 48px;

    min-height: 620px;

}

.partner-logo {

    padding-bottom: 15px;

}

.partner-logo img {

    width: 120px;

    height: auto;

}

.partner-logo.IRC img {

    width: 90px;

    height: auto;

}

.image-grid-wrap {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(2, 1fr);

    grid-column-gap: 0px;

    grid-row-gap: 0px;

    gap: 25px;

}



.image-grid1 {
    grid-area: 1 / 1 / 3 / 3;
}

.image-grid2 {
    grid-area: 1 / 3 / 2 / 4;
}

.image-grid3 {
    grid-area: 2 / 3 / 3 / 4;
}

.foundation-blk {

    width: 60%;

    padding-left: 7%;

}

.found-right-logo {

    position: absolute;

    right: 0;

    top: 0;

}

.percent {

    &:after {

        content: '%';

    }

}

.plus {

    &:after {

        content: '+';

        position: relative;

        top: -10px;

        left: 5px;

    }

}

.counter {

    margin-bottom: 5px;

}

/***Imapct Page End***/





/***sustainability Page Start***/

.sb-better-wrap {

    display: flex;

    flex-wrap: wrap;

    width: 85%;

    margin: 0 auto;

}

.sb-better-blk {

    padding: 30px;

    text-align: center;

}

.find-canvas-wrap {

    width: 440px;

    padding: 80px 80px 80px 48px;

}

/***sustainability Page End***/





/******Art Program Start*****/

.fixed-box-art {

    width: 100%;

    text-align: center;

}

.banner-art-wrap {

    margin-top: 50px;

}

.img-box {
    width: 100%;
}

.box-left-content {

    padding: 50px;

}

.box-right-content {

    padding: 50px 50px 50px 25px;

}

.hidden {

    display: none;

}

.artist-popup.fancybox-content {

    max-width: var(--container-width);

    width: 100%;

    background-color: var(--white);

}

.artist-popup .img-slide-arrow1.prev-arrow {

    left: 15px;

    right: auto;

}



.artist-popup .img-slide-arrow1.next-arrow {

    right: 15px;

    left: auto;

}



.artist-popup .img-slide-arrow1 {

    bottom: 0;

    top: 0;

    z-index: 2;

    margin: auto 0;

    opacity: 0;

    transition: all 0.5s ease-in-out;

}



.artist-popup .img-slider:hover .img-slide-arrow1 {

    opacity: 1;

}





ul.list {

    list-style: disc;

    display: flex;

    flex-wrap: wrap;

    gap: 0px;

    list-style-type: disc;

    font-family: var(--font-Regular);

    margin-left: 30px;

    line-height: 18px;

    align-items: flex-start;

}

ul.list li {

    width: 100%;

}

.login-content-blk {

    padding: 32px 32px;

}

.login-content-blk p,
.login-content-blk ul {

    min-height: 75px;

    margin-bottom: 20px;

}

a.btn-arthaus.btn-login {

    line-height: 1.2;

    width: 100%;

    text-align: center;

}

.login-img {

    border-radius: 200px 200px 0px 0px;

    overflow: hidden;

}

/******Art Program End*****/



/***** login page Start****/

.applink {

    display: flex;

    gap: 20px;

    margin-top: 30px;

}

/***** login page End****/









/****Property CSS****/

.breadcrumb-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}

.breadcrumb-list li {

    color: #fff;

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: var(--font-Semi_bold);

    line-height: 1;

}

.breadcrumb-list li a {

    color: #fff;

    font-weight: 400;

    font-family: var(--font-Regular);

    line-height: 1;

}

.breadcrumb-list li::after {

    content: url('data:image/svg+xml,<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.42868 13L7.90215 7.78095C8.28734 7.33156 8.28734 6.66844 7.90215 6.21905L3.42867 1" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>');

    display: flex;

    align-items: center;

    flex-shrink: 0;

}

.breadcrumb-list li:last-child::after {

    display: none;

}

.banner-property-box {

    display: flex;

    flex-wrap: wrap;

    align-content: space-between;

    height: calc(100vh - 91px);

    padding-top: 30px;

    padding-bottom: 60px;

    position: relative;

    z-index: 3;

}

.property-banner:before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0;

    z-index: 1;

}

.property-banner:after {

    content: "";

    position: absolute;

    width: 100%;

    height: 50%;

    bottom: 0;

    left: 0;

    background: rgb(0, 0, 0);

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);

    opacity: 0;

    z-index: 2;

}


.property-banner .text-white {
    color: #fff !important;
}

.icon-list-blk li {

    font-size: var(--heading-sm);

    font-family: var(--font-italic);

    color: var(--white);

    gap: 20px;

    border-bottom: 1px solid var(--white);

    padding-bottom: 15px;

    width: 100%;

    display: flex;

    flex-wrap: wrap;



}

.icon-list-blk {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}

.rent-infomation svg.fill path {

    fill: var(--white);

    stroke: transparent;

}

.rent-infomation svg path {

    stroke: var(--white);

}

.list.pro-list {

    gap: 7px;

    font-size: 20px;

}

.amenities-wrap {

    gap: 25px;

}

.box-amenities {

    padding: 20px 32px;

}

.flex-row-revese {

    flex-direction: row-reverse;

}

.img-blk a {

    display: flex;

}

.btn-gallery {

    position: absolute;

    bottom: 50px;

    left: 50px;

}

.icon-score-blk {

    gap: 15px;

}

.score-content-blk .heading-xs {

    margin-bottom: 5px;

}

.icon-box-wrap {

    display: flex;

    justify-content: center;

}

.studio-theme .bettter-svg svg path {

    fill: var(--studio);

}

.modern-theme .bettter-svg svg path {

    fill: var(--modern);

}

.classic-theme .bettter-svg svg path {

    fill: var(--classic);

}

.student-theme .bettter-svg svg path {

    fill: var(--student);

}

.tour-form-popup.fancybox-content {

    max-width: 720px;

    width: 100%;

    background-color: var(--white);

}



/********FORM CSS*********/

.firstnames {

    gap: 25px;

}

.form-control {

    height: 48px;

    background: var(--white);

    border: 1px solid var(--border-color);

    margin-bottom: 20px !important;

    width: 100%;

    padding: 8px;

    border-radius: 4px;

    font-size: 16px;

    font-family: var(--font-Regular);

}



input::placeholder {

    color: var(--border-color);

    font-family: var(--font-Regular);

    font-size: 16px;

}

textarea::placeholder {

    color: var(--border-color);

    font-family: var(--font-Regular);

    font-size: 16px;

}

.btn-form-submit {

    background: var(--orange);

    padding: 12px 24px;

    border-radius: 100px;

    color: var(--white);

    display: inline-block;

    position: relative;

    overflow: hidden;

    font-size: 18px;

    letter-spacing: 1px;

    font-family: var(--font-Semi_bold);

    text-transform: uppercase;

    line-height: 1.2;

    width: 100%;

}

.studio-theme .btn-form-submit {

    background: var(--studio);

}

.modern-theme .btn-form-submit {

    background: var(--modern);

}

.classic-theme .btn-form-submit {

    background: var(--classic);

}

.student-theme .btn-form-submit {

    background: var(--student);

}

input:is(:-webkit-autofill, :autofill) {

    appearance: menulist-button;

    background-image: none !important;

    background-color: #fff !important;

    color: fieldtext !important;

}

.fancybox-slide--html .fancybox-close-small {

    color: currentColor;

    padding: 6px;

    right: 0;

    top: 0;

    margin: 5px;

}

/****Property CSS END****/



/*******FIND CSS START*******/

.list-tab-space {

    border-bottom: 1px solid #545A5B40;

}

.list-tab-space li a {

    padding: 14px 14px;

    font-size: 18px;

    font-family: var(--font-Semi_bold);

    color: var(--gray);

    display: inline-flex;

    position: relative;

    top: 1px;

}

.list-tab-space li a.active {

    border-bottom: 2px solid var(--modern);

}

.list-tab-space li a.active,
.list-tab-space li a.active:hover {

    color: var(--modern);

}

.list-tab-space li a:hover {

    color: var(--black);

}

.search-form {

    display: flex;

    justify-content: center;

    gap: 10px;

}

.search-form .form-control {

    height: 40px;

    background: var(--white);

    border: 1px solid var(--border-color);

    margin-bottom: 20px !important;

    width: 100%;

    padding: 8px 16px 8px 16px;

    border-radius: 4px;

    font-size: 16px;

    outline: none;

}

.search-form .form-control:focus {

    border-color: #000;

}

.search-form input.form-control::placeholder {

    color: var(--black);

    font-family: var(--font-Regular);

    font-size: 16px;

}

.search-box {

    position: relative;

}

.search-box .form-control {

    min-width: 300px;

}

.drop-down .form-control {

    min-width: 170px;

}

.search-btn {

    background: transparent;

    border: none;

    outline: none;

    position: absolute;

    right: 15px;

    top: 7px;

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.search-btn svg circle,
.search-btn svg path {

    stroke: #00000066;

}

.find-space-section {

    overflow: visible !important;

}

/* doropdown CSS */

/* the code below is for the dropdown menu */

.wrapper-dropdown {

    position: relative;

    display: inline-block;

    min-width: 100%;

    width: 100%;

    height: 40px;

    border-radius: 4px;

    background: transparent;

    text-align: left;

    color: var(--black);

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    margin-bottom: 20px;

    border: 1px solid var(--border-color);

    min-width: 170px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 16px;

    background-color: var(--white);

    padding: 8px 16px 8px 16px;

}



.scrollable-menu {

    height: auto;

    max-height: 200px;

    overflow-x: hidden;

}



.arrow {

    margin-left: 10px;

    margin-right: 10px;

    float: right;

    rotate: 180deg;

}





.arrow svg {

    transition: all 0.3s;

}



.wrapper-dropdown::before {

    position: absolute;

    top: 50%;

    right: 16px;

    margin-top: -2px;

}



.rotated {

    transform: rotate(-180deg);

}



.wrapper-dropdown .dropdown {

    transition: 0.3s;

    position: absolute;

    top: 120%;

    right: 0;

    left: 0;

    margin: 0;

    padding: 0;

    list-style: none;

    z-index: 99;

    border-radius: 4px;

    box-shadow: inherit;

    background: inherit;

    -webkit-transform-origin: top;

    -moz-transform-origin: top;

    -ms-transform-origin: top;

    transform-origin: top;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    opacity: 0;

    visibility: hidden;

    width: 240px;

    border: 1px solid var(--border-color);

    padding: 8px 0px 8px 0px !important;

    overflow: hidden;

}

.wrapper-dropdown.active {

    border-color: var(--black);

}



.wrapper-dropdown .dropdown li {

    padding: 8px;

    line-height: 1.4;

    overflow: hidden;

}



.wrapper-dropdown .dropdown li:last-child {

    border-bottom: none;

}



.wrapper-dropdown .dropdown li:hover {

    background-color: var(--yelow-bg);

}



.wrapper-dropdown.active .dropdown {

    opacity: 1;

    visibility: visible;

}



/* doropdown END */



.property-resuilt {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}



.property-map {

    width: 44%;

}

.property-listing-wrap {

    width: 56%;

}

.property-listing {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    flex-wrap: wrap;

}

.listing-card {

    width: calc(50% - 12px);

    border: 1px solid #545A5B40;

    border-radius: 4px;

}

.card-img-slider .slick-dots {

    bottom: 0px;

}

.card-img-slider .slick-dots li {

    width: 4px;

}

.card-img-slider .slick-dots li button {

    width: 5px;

    height: 5px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--white);

    padding: 3px;

}

.card-img-slider .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--white);

}

.card-slide-arrow {

    position: absolute;

    width: 30px;

    height: 30px;

    border: none;

    outline: none;

    background: transparent;

    cursor: pointer;

    top: 0;

    bottom: 0;

    z-index: 22;

    margin: auto 0;

    opacity: 0;

    visibility: hidden;

    transition: all cubic-bezier(0.075, 0.82, 0.165, 1);

}

.card-img-slider:hover .card-slide-arrow {

    visibility: visible;

    opacity: 1;

    transition: all cubic-bezier(0.075, 0.82, 0.165, 1);

}



.card-slide-arrow.prev-arrow {

    left: 15px;

}



.card-slide-arrow.next-arrow {

    right: 15px;

}

.card-slide-arrow:hover svg path {

    stroke: var(--black);

}

[data-theme="dark"] .card-slide-arrow:hover svg path {

    fill: var(--white);

}



.listing-details {

    font-size: 10px;

    color: #545A5B;



    padding: 12px 8px 12px 8px;

}

.listing-name {
    font-size: 20px;
    font-family: var(--font-bold);
    font-weight: 700;
}

.flex-list {

    display: flex;

    justify-content: flex-start;

    gap: 50px;

    margin: 10px 0;

}

.list-price-list-dots {

    align-items: flex-end;

    padding-top: 0px;

}

.list-price-list-dots li span {

    font-size: 16px;

    font-family: var(--font-Semi_bold);

    font-weight: 600;

    line-height: 1;

    position: relative;

    top: 2px;

}

.list-price-list-dots li {

    position: relative;

}



.list-price-list-dots li:before {

    content: "";

    position: absolute;

    width: 4px;

    height: 4px;

    background: #545A5B;

    left: -11px;

    border-radius: 50%;

    top: 0;

    bottom: 0;

    margin: auto 0;

    opacity: 0.15;

}

.list-price-list-dots li:first-child:before {

    display: none;

}

.list-price-list-icon {

    align-items: center;

    padding-top: 3px;

    gap: 15px;

}



.list-price-list-icon li {

    display: flex;

    gap: 3px;

}

a.btn-listing ,
button.btn-listing {

    background: #F5F5F5;

    padding: 6px 12px;

    border-radius: 2px;

    font-size: 10px;

    color: #000;

    text-transform: uppercase;

    width: 100%;

    display: inline-block;

    text-align: center;

    line-height: 12px;

    font-family: var(--font-Semi_bold);

    font-weight: 600;

    letter-spacing: 0.5px;

}

a.btn-listing:hover ,
button.btn-listing:hover {

    background: #6398B4;

    color: #fff;

}

.list-btn-list {

    gap: 10px;

    padding-top: 0px;

    margin-bottom: 0;

}

.list-btn-list li {

    width: 33.3%;

}

.results {

    font-size: 16px;

    font-family: var(--font-Semi_bold);

    font-weight: 600;

    margin-bottom: 4px;

    margin-top: -5px;

}

/*******FIND CSS END*******/





/***Contact page for css***/



.contact-form li .tab-btn {

    display: flex;

    gap: 10px;

    row-gap: 10px;

    column-gap: 10px;

    align-items: center;

    justify-content: center;

    padding: 8px 24px 8px 24px;

}

.tab-nav button#workspaces.active {

    border: 1px solid #A11E21;

    opacity: 1;

}

.form-label {

    margin-bottom: 5px;

    display: inline-block;

    color: var(--black);

}

select.form-control {

    color: var(--border-color);

}

select.form-control option {

    color: var(--black);

    background-color: var(--white);

}

select.form-control option:focus {

    color: var(--black) !important;

    background-color: var(--yelow-bg) !important;

}

textarea.form-control {

    height: 100px;

}

.form-wrap-contact {
    padding: 48px;
    border-radius: 4px;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.workspace-form {

    align-items: flex-start;

    gap: 30px;

}

.form-box-blk.hide-box {

    display: none;

}

.icon-box {

    text-align: center;

    width: 100%;

}

.form-thank-you-blk {

    display: none;

}

.form-thank-you-blk.active {

    display: flex;

    text-align: center;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

}





/******* WORK CSS**/





.svg-right-blk svg {

    width: 100%;

}

a.btn-listing-work ,
button.btn-listing-work {

    background: var(--white);

    border-radius: 2px;

    color: var(--dark-red);

    width: 100%;

    display: inline-block;

    text-align: center;

    font-family: var(--font-Semi_bold);

    font-weight: 600;

    letter-spacing: 0.5px;

    padding: 12px 20px;

    font-size: 16px;

    letter-spacing: 1px;

    font-family: var(--font-Semi_bold);

    text-transform: uppercase;

    line-height: 1.2;

    display: inline-flex;

    justify-content: center;

    align-items: center;

}

a.btn-listing-work:hover ,
button.btn-listing-work:hover {

    background: var(--orange);

    color: #fff;

}

.list-price-work {

    padding-bottom: 30px;

    padding-top: 30px;

}

.list-price-work li span {

    font-family: var(--font-Semi_bold);

    font-weight: 600;

    padding-top: 10px;

    display: inline-block;

    margin-bottom: 0;

}

.text-underline {

    text-decoration: underline;

}

.work-content-blk {

    padding: 30px 10px;

}

.work-content-blk .btn-link {

    margin-top: 0;

}



#hide_studio.compant-list-wrap .collections-list-blk:first-child,
#hide_medium.compant-list-wrap .collections-list-blk:nth-child(2),
#hide_premium.compant-list-wrap .collections-list-blk:nth-child(3) {

    display: none;

}

.wokspace-btn-list li {

    width: auto;

    min-width: 190px;

}

.artist-box .box-img-right {

    padding-left: 45px;

}



/* Storage Spaces */



.price-left-content {

    padding: 30px;

}



.price-box-wrap {

    gap: 30px;

}

.text-content-ft {

    padding: 6px 12px 6px 12px;

    border: 1px solid #545A5B40;

    gap: 10px;

    font-size: var(--text-content-sm);

    display: inline-block;

    color: var(--studio);

    margin-bottom: 10px;

}



.price-text.heading-md span {

    font-size: var(--text-content-sm);

    position: relative;

    top: -5px;

}

/* JOIN Page */

.membership-box-wrap {

    gap: 24px;

}

.membership-text strong {
    color: var(--dark-red);
}

.membership-text.heading-xl span {

    font-size: var(--heading-sm);

    position: relative;

    top: -5px;

}

.membership-left-content {

    border: 1px solid #545A5B80;

    padding: 32px 24px 32px 24px;

}



.membership-left-content .checklist-list li {

    margin-bottom: 24px;

    line-height: 1.2;

    gap: 15px;

}

.membership-left-content .checklist-list li.hide-check {

    opacity: 0.25;

}

.membership-left-content .checklist-list li span {

    width: calc(100% - 35px);

}





/* Add-ons section */

.membership-addons-wrap {
    border-top: 1px solid #545A5B80;
    padding-top: 24px;
}

.membership-addons-wrap h3 {
    margin-bottom: 16px;
}

.membership-addons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.membership-addons-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

.membership-addons-list li span {
    font-size: var(--text-content);
}


/*****EVENTS */

.eventbox-wrap {

    display: flex;

    gap: 24px;

    flex-wrap: wrap;

}

.event-img-wrap {

    column-gap: 24px;

}

.event-box-blk {

    flex-wrap: wrap;

    row-gap: 24px;

}



.event-img-4 {

    height: 600px;

}

.event-img-3,
.event-img-3 {

    width: 100%;

    height: 300px;

}

.event-img-3 .img-blk,
.event-img-3 .img-blk,
.event-img-4 .img-blk {

    width: 100%;

    height: 100%;

}

.event-img-3 img,
.event-img-3 img,
.event-img-4 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.nav-bottom-left .img-slide-arrow1.prev-arrow {

    left: 0;

    right: auto;

}

.nav-bottom-left .img-slide-arrow1.next-arrow {

    left: 65px;

    right: auto;

}



.slide-img-blk {

    padding: 0 12px;

}

.confrece-rom-wrap {

    border-bottom: 1px solid var(--dark-gray);

}

.confrece-rom-wrap:last-child {

    border-bottom: none;

}

.pricing-table .table-blank th:nth-child(1),
.pricing-table .table-blank td:nth-child(1) {

    text-align: center;

}



.pricing-table .table-blank,
.testimonial-box-wrap {

    max-width: 1000px;

    margin: auto;

}

.unbold {
    font-weight: 400 !important;
}



.dark-dot .slick-dots li {

    width: 12px;

}

.dark-dot .slick-dots li button {

    width: 12px;

    height: 12px;

    background: transparent;

    border-radius: 50%;

    border: 1px solid var(--black);

}

.dark-dot .slick-dots li.slick-active button {

    opacity: 1;

    background: var(--black);

}

.gallery-box-wrap {

    flex-wrap: wrap;

    gap: 24px;

}

.gallery-box-wrap .col-3 {

    width: calc(33.33% - 24px);

}

.slider-conference.slick-slider {

    margin: 0 -15px;

}

.forum-section .slide-img-blk {

    display: inline-block
}

.slick-arrow.slick-disabled {

    opacity: 0.25;

}

.nav-top-right .img-slide-arrow1.prev-arrow {

    right: 65px;

}

.nav-top-right .img-slide-arrow1.next-arrow {

    right: 0;

    left: auto;

}



.nav-top-right .img-slide-arrow1 {

    bottom: auto;

    top: -100px;

}

.forum-popup.fancybox-content {

    max-width: 860px;

    width: 100%;

    background-color: var(--white);

}

.gap-24 {

    gap: 24px;

}

.heading-blk.w-50 .heading-xl {

    margin-bottom: 0px;

}



/****comman*/

li.breck-box {

    border-bottom: 1px solid #fff;

    padding-bottom: 10px;

}

.heading-wrap .sub-heading {

    margin-bottom: 20px;

}

.collection-banner .btn-left-block {

    padding-top: 15px;

}

.heading-blk.w-50 .heading-xl .change-font {

    letter-spacing: 1px;

}



.hover-slider {

    position: absolute;

    width: 53px;

    height: 53px;

    border: none;

    outline: none;

    background: transparent;

    bottom: -80px;

    cursor: pointer;

    bottom: 0;

    top: 0;

    z-index: 2;

    margin: auto 0;

    opacity: 0;

    transition: all 0.5s ease-in-out;

}

.hover-slider.prev-arrow {

    left: 15px;

    right: auto;

}

.hover-slider.next-arrow {

    right: 15px;

    left: auto;

}

.slick-slider:hover .hover-slider {

    opacity: 0.7;

}

.ame-content-blk {

    padding: 15px 0;

}

.ame-slider .collections-img img {

    height: 260px;

    object-fit: cover;

}

.social-icons {
    display: flex;
    justify-content: space-evenly;
    /* or space-around / space-between as needed */
    align-items: center;
    margin-top: 10px;
    /* optional, adds some space between the logo and icons */
}

.social-feed-section {
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Amenities Grid */
.amenities-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center the items */
    gap: 20px;
    /* Use gap for spacing */
    padding: 0 15px;
    /* Add some padding */
}

.amenity-grid-item {
    flex: 0 0 calc(25% - 20px);
    /* 4 columns accounting for gap */
    max-width: calc(25% - 20px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.amenity-grid-item .collections-list-blk {
    width: 100%;
    height: 100%;
    /* Make items equal height */
    display: flex;
    flex-direction: column;
}

.amenity-grid-item .collections-img img {
    width: 100%;
    /* Fill container width */
    height: 100%;
    /* Fill container height */
    object-fit: cover;
    display: block;
    /* margin: 0 auto; Removed */
}

.amenity-grid-item .ame-content-blk {
    flex-grow: 1;
    /* Allow text block to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically */
    padding: 15px 5px;
    /* Adjust padding */
}

/* Responsive */
@media (max-width: 990px) {
    .amenity-grid-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 540px) {
    .amenity-grid-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .amenity-grid-item .collections-img img {
        width: 100%;
        /* Full width on mobile */
        height: auto;
        /* Maintain aspect ratio */
    }
}

/* === Accessibility remediation — 2026-08-18 ==========================
   Appended last so these rules win over the earlier declarations they
   correct. Keep this block together; each rule cites its finding. ==== */

/* C-01 — the burger and close-menu controls are now <button> elements.
   Reset the UA button styling so the visual is unchanged. */
.burger,
.closemenu {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* C-02 — submenus are hidden with visibility+opacity, so they must be
   revealed the same way. :focus-within covers tabbing through the links;
   .is-open is set by the disclosure button in includes/script.php. */
.center-menu .nav li.dropdown-nav:focus-within > ul,
.center-menu .nav li.dropdown-nav.is-open > ul,
.right-header .dropdown-space li.dropdown-nav:focus-within > ul,
.right-header .dropdown-space li.dropdown-nav.is-open > ul {
    opacity: 1;
    visibility: visible;
}

/* C-04 — .mobile-select is now a <button> so it can be operated by keyboard.
   It sits inside <nav class="tab-nav">, so the pre-existing `.tab-nav button`
   rule (opacity .5, font-size 22px, its own padding and border) would otherwise
   capture it. This restores exactly what the old <div> rendered, and is scoped
   tightly enough to beat that rule. The display value is left to the existing
   @media(min-width:992px){.mobile-select{display:none}} on desktop. */
.tab-nav button.mobile-select,
button.mobile-select {
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    opacity: 1;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 12px 16px;
    padding-right: 48px;
}

@media (max-width: 991px) {
    .tab-nav button.mobile-select,
    button.mobile-select {
        display: block;
    }
}

/* C-09 — both banner scrims were disabled with opacity:0 while white text,
   breadcrumbs and icons render on top of the photograph. */
.property-banner:before {
    opacity: 0.35;
}

.property-banner:after {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}


/* === Serious findings — 2026-08-18 ================================== */

/* S-06 — the brand palette is unchanged. These are darker paired variants used
   ONLY where a brand colour is text on a light background, or is the fill
   behind small white text. Fills, chips, borders and large display type keep
   the original brand values. Every value below is >= 4.5:1 on white. */
/* Revised after the live axe run: these were computed against white only, but
   the same classes sit on the cream band (--light-yellow #f2efdc) on work.php,
   join.php and the collection pages, where 4.5:1 was missed by ~0.6. Each value
   is now >= 4.5:1 on BOTH white and cream, and is a 5-8% darkening of the
   original hue rather than a different colour. */
:root {
    --studio-text: #527459;      /* pairs with --studio  #608767 */
    --modern-text: #497186;      /* pairs with --modern  #6398B4 */
    --classic-text: #536f84;     /* --classic already passes on both */
    --student-text: #b24c2a;     /* pairs with --student #D05932 */
    --orange-text: #bb4534;      /* pairs with --orange  #EB5642 */
    --sky-text: #527276;         /* pairs with --sky     #98D2DB */
    --aqua_blue-text: #4d7373;   /* pairs with --aqua_blue #8CD2D2 */
    --gray-text: #6c6c6c;        /* pairs with --gray    #999999 */
}

.text-studio    { color: var(--studio-text) !important; }
.text-modern    { color: var(--modern-text) !important; }
.text-classic   { color: var(--classic-text) !important; }
.text-student   { color: var(--student-text) !important; }
.text-sky       { color: var(--sky-text) !important; }
.text-aqua_blue { color: var(--aqua_blue-text) !important; }
.text-orange    { color: var(--orange-text) !important; }

/* Brand colour used as text elsewhere in the sheet.
   The themed .text-studio rules MUST carry !important: the originals earlier in
   this sheet are `.modern-theme .text-studio { color: var(--modern) !important }`,
   so an equal-specificity replacement without !important loses and the darker
   token never applies. Live axe run found join.php still rendering #eb5642 at
   3.53:1 for exactly this reason. */
.modern-theme .text-studio                  { color: var(--modern-text) !important; }
.student-theme .text-studio                 { color: var(--student-text) !important; }
.classic-theme .text-studio                 { color: var(--classic-text) !important; }
.workspace-theme .text-studio               { color: var(--orange-text) !important; }

.list-tab-space li a.active                 { color: var(--modern-text); }
.center-menu .nav li a.active,
.right-header a.active,
.bai-slider-button-1,
.typing-text                                { color: var(--orange-text); }
.accordion button[aria-expanded='true']     { color: #0a7f92; }
.list-tab-space li a,
.text-content-ft                            { color: var(--gray-text); }

/* Brand colour as a fill behind small white text */
.btn-form-submit,
a.btn-listing-work:hover                    ,
button.btn-listing-work:hover                    { background-color: var(--orange-text); }
a.btn-listing:hover                         ,
button.btn-listing:hover                         { background-color: var(--modern-text); }

/* S-06 — form text and borders were derived from a 50%-alpha grey: the
   placeholder and the selected <select> value rendered at 2.28:1, and the
   field border at 2.27:1 against a 3:1 requirement. */
input::placeholder,
textarea::placeholder                       { color: #737779; opacity: 1; }
select.form-control                         { color: #1a1a1a; }
.form-control                               { border-color: #545a5b; }

/* S-05 — one focus indicator for the whole site. The white halo keeps the
   ring visible on brand-coloured bands as well as on white, which the old
   #007cba outline did not (1.12:1 on the studio green). */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="switch"]):focus-visible {
    outline: 3px solid #0b3d91 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #ffffff !important;
}

@supports selector(:focus-visible) {
    :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus:not(:focus-visible) {
        outline: none;
    }
}

/* S-13 — content revealed on hover must also appear on keyboard focus. */
.card-img-slider:hover .card-slide-arrow,
.card-img-slider:focus-within .card-slide-arrow,
.card-slide-arrow:focus-visible {
    visibility: visible;
    opacity: 1;
}

.list_number_point:hover span.hover_text,
.list_number_point:focus-within span.hover_text,
.list_number_point02:hover span.hover_text,
.list_number_point02:focus-within span.hover_text {
    opacity: 1;
    left: 0;
}

.artist-popup .img-slider:hover .img-slide-arrow1,
.artist-popup .img-slider:focus-within .img-slide-arrow1,
.img-slide-arrow1:focus-visible {
    opacity: 1;
}

.tab-nav button:focus-visible { opacity: 1; }

/* S-16 — nothing targeted 320px: the smallest populated breakpoint was 400px
   and the 360px block was empty. At 400% zoom a desktop user gets this width. */
@media screen and (max-width: 480px) {
    .search-box .form-control,
    .drop-down .form-control {
        min-width: 0;
        width: 100%;
    }
}

/* S-14 — replaces `opacity: .25`, which put the excluded rows at roughly
   1.9:1 and erased the distinction entirely in forced-colours mode. */
.membership-left-content .checklist-list li.hide-check {
    opacity: 1;
    color: #6b6b6b;
}

/* S-07 — pause/play control injected next to any autoplaying carousel. */
/* S-07 — the pause/play control js/a11y-carousel.js injects into any
   autoplaying slider. It is a child of the slider, positioned by script against
   the last dot so it reads as part of that slideshow's controls. It is
   deliberately NOT inside <ul class="slick-dots">: slick rewrites the aria-label
   and role of every button in that list. */
.a11y-slider-toggle {
    position: absolute;
    z-index: 5;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border: 1px solid #545a5b;
    border-radius: 50%;
    opacity: 1;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* Sliders whose dots are absent or hidden by a theme: pin it to the corner so
   it is still adjacent to the motion it controls. */
.a11y-slider-toggle.a11y-slider-toggle--pinned {
    right: 16px;
    bottom: 16px;
}

.a11y-slider-toggle:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.a11y-slider-toggle svg {
    width: 12px;
    height: 12px;
    display: block;
    pointer-events: none;
}

/* M-05 — a non-colour cue for the current page, so the state survives
   colour-vision deficiency and forced-colours mode. */
.center-menu .nav li a[aria-current="page"],
.right-header a[aria-current="page"],
.list-tab-space li a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* M-18 — controls that were <a href="#"> are now <button>.
   :where() gives this zero specificity, so it only strips the browser's own
   button defaults: any styling the element's own classes provide (background,
   font-size, the .btn-link underline) still wins. Scoped to data-was-link so
   the buttons that were always buttons are untouched. */
button:where([data-was-link]) {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* Several button styles were element-qualified as `a.<class>`, so a converted
   <button> matched nothing. Those selectors have been widened in place to
   `a.<class>, button.<class>` rather than restating the styles here. */

/* .btn-link and .link style a text link, but they were also being applied to
   real <button> elements, which then kept the browser's grey background, border
   and 13px Arial. Eight of those buttons carried a hand-copied inline reset
   whose `font: inherit` also beat the class's own 16px/600, so they rendered
   differently from the identical <a> version of the same CTA. One rule at zero
   specificity strips only the UA defaults and lets the class win. */
button:where(.btn-link, .link) {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* Booking panel shown where the Yardi Kube embed used to be (their CSP refuses
   the frame). Deliberately plain so it inherits the page's type scale. */
.external-booking {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 24px;
    border: 1px solid #d9dee3;
    border-radius: 12px;
    text-align: center;
}

.external-booking__title {
    font-size: 1.5rem;
    margin: 0 0 12px;
}

.external-booking__intro {
    margin: 0 0 24px;
}

.external-booking__action {
    margin: 0 0 20px;
}

.external-booking__help {
    margin: 0;
    font-size: 0.9375rem;
    color: #545a5b;
}

.external-booking__page-title {
    text-align: center;
    margin: 40px 0 0;
}

/* 404 page (served via ErrorDocument in .htaccess). */
.error-page {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.error-page__links {
    list-style: none;
    padding: 0;
    margin: 28px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: center;
}

.error-page__help {
    font-size: 0.9375rem;
    color: #545a5b;
}

/* N-04 — the phone number is a tel: link now; it should look exactly like the
   plain text it replaced. (These rules were lost in an earlier edit to the
   block below and are restored here.) */
.footer-phone {
    color: inherit;
    text-decoration: none;
}

.footer-phone:hover,
.footer-phone:focus-visible {
    text-decoration: underline;
}

/* The "Apartments" item in the Find your space submenu is a <button> (it opens
   the search dialog rather than navigating). Every rule that styles this menu is
   written as `... li a`, so the button matched none of them and rendered in the
   inherited font, unstyled and unindented next to "INDUSTRIAL & RETAIL".
   Scoped to the converted control so no other button in the header is affected. */
.right-header button[data-was-link] {
    text-transform: uppercase;
    font-size: 18px;
    color: var(--black);
}

.right-header .dropdown-space li.dropdown-nav ul li button[data-was-link] {
    color: var(--black);
    line-height: 1;
    padding: 18px 24px;
    display: block;
    width: 100%;
    text-align: left;
    transition: 0.3s;
}

.right-header .dropdown-space li.dropdown-nav ul li button[data-was-link]:hover {
    background: var(--light-yellow);
}

/* The rounded corners of the submenu panel are applied to the first and last
   items, again via `a` only, so the button's hover highlight had square corners
   poking outside the panel's radius. */
.right-header .dropdown-space li .No-list li:first-child button[data-was-link] {
    border-radius: 8px 8px 0 0;
}

.right-header .dropdown-space li .No-list li:last-child button[data-was-link] {
    border-radius: 0 0 8px 8px;
}


/* Same problem as the .right-header submenu, in the burger/centre menu: the
   "Find your space" item and its "Apartments" child are <button>s (they open
   the search dialog instead of navigating), and every rule that styles this
   menu is written `.center-menu .nav li a`. Without these companions the two
   controls render in the inherited body font at the wrong size with no
   padding, next to correctly styled links. */
.center-menu .nav li button[data-was-link] {
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.3;
    color: var(--black);
    transition: 0.3s;
}

.center-menu .nav li.dropdown-nav ul li button[data-was-link] {
    color: var(--black);
    line-height: 1;
    padding: 18px 24px;
    width: 100%;
    text-align: left;
    transition: 0.3s;
}

.center-menu .nav li.dropdown-nav ul li button[data-was-link]:hover {
    background: var(--light-yellow);
}


/* Live axe run — link-in-text-block (WCAG 1.4.1). The email address inside the
   404 help paragraph was distinguished from the surrounding text by colour
   alone, so it disappears for anyone who cannot perceive that difference.
   The same applies to any link sitting inside body copy. */
.error-page__help a,
.error-page p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Live audit — WCAG 1.4.10 Reflow. `ul.list-nav-footer` is a flex row that never
   wraps, so the footer legal links held the document 50px wider than a 320px
   viewport on EVERY page: the whole site scrolled sideways at that width.
   Measured on contact.php: 50px of overflow, 0px once this nav can wrap. */
ul.list-nav-footer {
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
}

.footer-copyright {
    flex-wrap: wrap;
    row-gap: 16px;
}

.right-nav {
    max-width: 100%;
}


/* Live audit — .sr-only must never occupy layout, but it is defined at a
   specificity of 0,1,0 and loses to ordinary content rules. On join.php
   `.membership-left-content .checklist-list li span { width: calc(100% - 35px) }`
   (0,3,1) won, so each "Included:" span was still 285px wide: clip() hides the
   paint but not the box, and the page scrolled sideways at a 320px viewport.
   The sizing properties are forced so no content rule can reinflate them. */
.sr-only:not(:focus):not(:focus-within),
.visually-hidden:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ------------------------------------------------------------------------
   S-06 follow-up, found on the live site 2026-08-19.
   css/home.css defines --theme-primary-text on .theme-studios / .theme-modern /
   .theme-classic / .theme-student, and is loaded by index.php ONLY. Two problems:
   that file never reaches the collection pages at all, and those class names are
   backwards anyway -- the
   collection pages put the theme on the BODY as .studio-theme / .modern-theme /
   .classic-theme / .student-theme. So on exactly the pages that need it the
   token was never defined, and the raw brand colour kept rendering as text on
   the pale theme tint — axe measured #608767 on #e7ede8 at 3.42:1 across nine
   "N Available" pills on studio-collection.php.

   Two fixes: define the token for the real body classes, and give the rules
   enough specificity to win. The collection pages carry their own inline
   <style> with `.pill-available { color: var(--theme-primary) }`, and an inline
   stylesheet beats an external one at equal specificity regardless of order —
   which is why the original single-class rule lost. `body .a.b` (0,2,1) clears
   it without needing !important.
   Every value below is >= 4.5:1 on the 15% tint, the 25% hover tint, and white.
   ------------------------------------------------------------------------ */
body.studio-theme  { --theme-primary-text: #4b6a51; }
body.modern-theme  { --theme-primary-text: #456a7d; }
body.classic-theme { --theme-primary-text: #496275; }
body.student-theme { --theme-primary-text: #a04426; }

body .unit-status-pill.pill-available,
body .floorplan-card-availability,
body .floorplan-chip,
body .floorplan-expand-btn,
body .property-item-container .themed-btn-outline {
    color: var(--theme-primary-text, #4b6a51);
}

body .property-card-top .card-incentive-chip,
body .collection-tag,
body .themed-btn-fill,
body .themed-btn-outline:hover {
    background: var(--theme-primary-text, #4b6a51);
}