@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#overview {
    position: relative;
}

#features {
    position: relative;
}


img,
video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

:root {
    /* the only two colours in the palette */
    --brown: #4E3B2E;
    --cream: #F1DCB0;

    /* accents derived from the two brand colours — used sparingly, for depth */
    --gold: #B08D57;
    --cream-light: #F8EBCD;
    --cream-deep: #E7CE9D;

    --font-display: "Playfair Display", "Gilda Display", Georgia, serif;
    --font-text: "Cormorant Garamond", Georgia, serif;
}

h1, h2, h3 {
    letter-spacing: 0.03em;
}

.logo_tit p,
.phase_tit h2,
.over_div h3,
.feat_div h3,
.section-title h2 {
    letter-spacing: 0.08em;
}

body::-webkit-scrollbar {
    width: 0.5em;
    background-color: var(--brown);
    border-left: none;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--brown);
    outline: 1px solid var(--brown);
    border-radius: 15px;
}

body {
    background-color: var(--cream);
    color: var(--brown);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
}

p,
ul li {
    font-family: var(--font-text);
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6,
.modal-title {
    font-family: var(--font-display);
}

.nav-link,
.accordion-button,
button,
input,
select,
textarea {
    font-family: var(--font-text);
}

/* Preloader */

/* Preloader end */

.header {
    padding: 1rem 5rem 0;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

/* the scrim is drawn taller than the bar and faded to nothing, so there is no
   hard edge sitting across the hero photo */
.header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 260%;
    background: linear-gradient(to bottom,
            rgba(78, 59, 46, 0.55) 0%,
            rgba(78, 59, 46, 0.32) 40%,
            rgba(78, 59, 46, 0.12) 72%,
            rgba(78, 59, 46, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.offcanvas-header {
    justify-content: end;
}

.hambergur {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hambergur a {
    text-decoration: none;
}

.ham_flex {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hambergur img {
    width: 50px;
}

.req_call p {
    right: 36px;
    position: relative;
}

.hambergur p,
.req_call p {
    font-family: var(--font-text);
    font-size: 18px;
    color: var(--cream);
    margin: 0;
    text-transform: capitalize;
}

/* the source file is 1934px wide, so the flex item has to be capped or the
   logo grows to fill the whole header */
.logo {
    flex: 0 0 auto;
    max-width: 230px;
    /* nudged off the very top edge so the wordmark sits inside the scrim */
    margin-top: 14px;
}

.logo a img {
    width: 100%;
    height: auto;
    background-color: var(--cream);
    padding: 8px 14px;
}

/* the wordmark ships as dark brown artwork, so instead of parking it on a cream
   plate we recolour it to cream through its own alpha and let the scrim show
   through. The plate above stays as the fallback where masks are unsupported. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .logo a {
        display: block;
        background-color: var(--cream);
        -webkit-mask: url("../images/Chasmitha.png") no-repeat center / contain;
        mask: url("../images/Chasmitha.png") no-repeat center / contain;
    }

    .logo a img {
        visibility: hidden;
        background: none;
        padding: 0;
    }
}

.navbar-nav .nav-item a {
    font-family: var(--font-text);
    font-size: 20px;
    color: var(--brown) !important;
}

.navbar-nav .nav-item {
    text-align: center;
}

/*****************  *******************************/
.section__banner {
    width: 100%;
    position: relative;
    background-color: var(--cream);
}

.ban_video {
    position: absolute;
    top: 36%;
    right: 53%;
    width: 10%;
}

.ban_title {
    font-family: var(--font-display);
    font-size: 9vw;
    color: var(--cream);
    text-transform: uppercase;
    position: absolute;
    top: 20%;
    left: 7%;
    width: fit-content;
    margin: 0;
}

.ban_para {
    font-family: var(--font-display);
    font-size: 2.7vw;
    color: var(--cream);
    text-align: right;
    position: absolute;
    right: 3%;
    bottom: 3%;
    width: 25%;
    margin: 0;
    line-height: normal;
}

/***************** Title *******************************/

.logo_tit img {
    width: 13%;
}

.logo_tit p {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--cream);
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: transparent;
    text-transform: uppercase;
    margin-top: 15px;
}

.logo_tit h2 {
    font-family: var(--font-display);
    font-size: 60px;
    color: var(--cream);
    text-align: center;
    text-transform: uppercase;
}

.phase_tit {
    /* display: flex; */
    justify-content: center;
    margin-top: 5%;
    position: relative;
}

/* .phase_tit::after {
    content: "";
    position: absolute;
    right: 49%;
    top: 0;
    height: 70px;
    border-right: 1px solid var(--brown);
} */
.phase_tit h2 {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--cream);
    text-align: center;
    text-transform: uppercase;
    /* width: 40%; */
}

/***************** overview *******************************/

#overview .ameni-carousel .owl-nav img {
    width: 34px;
}

.section__over {
    width: 100%;
    padding: 70px 0;
    background-color: var(--cream);

    position: relative;
}

.bg_effect {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 80%), url(../images/ameni.webp) !important;
}

.over_img img {
    width: 92%;
}

.over1_img {
    position: absolute;
    bottom: -13%;
    right: -11%;
    width: 50%;
}

.over_div h2 {
    color: var(--brown);
    font-family: var(--font-display);
    font-size: 4rem;
    text-transform: capitalize;
    margin: 0;
}

.over_div h3 {
    color: var(--brown);
    font-family: var(--font-display);
    font-size: 2.8rem;
    line-height: 110%;
    text-transform: uppercase;
    /* margin-top: -3%; */
}

.over_div p {
    color: var(--brown);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 2.15rem;
    margin-left: 5%;
}

.high_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

.high_div img {
    width: 60px !important;
}

.high_div p {
    font-weight: 500;
    color: var(--brown);
    font-size: 1rem;
    margin: 0;
    text-align: center;
}

/*********************** Features *********************************/

.feat_div h2 {
    color: var(--brown);
    font-family: var(--font-display);
    font-size: 4rem;
    text-transform: capitalize;
    text-align: center;
    margin: 0;
}

/* keeps the possessive lowercase inside an uppercased title */
.tit_low {
    text-transform: lowercase;
    font-size: 0.7em;
}

.feat_div h3 {
    color: var(--brown);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 110%;
    text-transform: uppercase;
    text-align: center;
    /* margin-top: -2%; */
}

.feat_div p {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 2.15rem;
    color: var(--brown);
    text-align: center;
    margin-top: 25px;
}

.feat_para p {
    font-size: 1.1rem;
    color: var(--brown);
    -webkit-text-stroke-width: 0.16px;
    -webkit-text-stroke-color: transparent;
    width: 80%;
    margin: 0 auto;
}

.feat-swiper-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}

.feat-swiper-nav .swiper-button.swiper-button-prev-1,
.feat-swiper-nav .swiper-button.swiper-button-next-1 {
    position: static;
    width: 44px;
    height: 44px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.feat-swiper-nav .swiper-button.swiper-button-prev-1 img,
.feat-swiper-nav .swiper-button.swiper-button-next-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feat-swiper-nav .swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/*********************** Configuration / Floor Plans *********************************/

.section__conf {
    width: 100%;
    padding: 50px 0;
    background-color: var(--cream);
    position: relative;
}

.fp_head p {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
    letter-spacing: 0.04em;
    margin-top: 18px;
}

/* tabs sit on cream here, so flip the dark-section tab palette */
.section__conf .nav-tabs {
    gap: 14px;
    flex-wrap: wrap;
}

.section__conf .nav-tabs .nav-link {
    background-color: transparent;
    border: 1px solid var(--brown);
    color: var(--brown);
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    padding: 12px 26px;
}

.section__conf .nav-tabs .nav-link span {
    display: block;
    font-family: var(--font-text);
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    opacity: 0.95;
    margin-top: 3px;
}

.section__conf .nav-tabs .nav-link:focus,
.section__conf .nav-tabs .nav-link:hover {
    border: 1px solid var(--brown);
    background-color: rgba(78, 59, 46, 0.08);
}

.section__conf .nav-tabs .nav-item.show .nav-link,
.section__conf .nav-tabs .nav-link.active {
    background-color: var(--brown);
    color: var(--cream);
    border: 1px solid var(--brown);
}

/* arrows only drive the mobile track; hidden by Bootstrap above md */
.fp_nav_arrows {
    display: none;
}

.fp_card {
    border: 1px solid rgba(78, 59, 46, 0.35);
    background-color: rgba(78, 59, 46, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
}

.fp_card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: #ffffff;
}

/* plans stay blurred teasers on the card; the button below opens the enquiry */

.fp_card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}


.fp_card__body {
    padding: 18px 20px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}

.fp_card__specs {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    color: var(--brown);
    border-top: 1px solid rgba(176, 141, 87, 0.4);
    /* Cormorant ships old-style figures by default, which drop below the
       baseline and read as a second typeface next to the caps labels */
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum" 1, "onum" 0;
    font-feature-settings: "lnum" 1, "onum" 0;
}

.fp_card__specs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid rgba(176, 141, 87, 0.4);
}

.fp_card__specs span {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
}

.fp_card__specs strong {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: right;
}

.fp_card__body h4 {
    font-family: var(--font-display);
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.1rem;
    margin: 0;
}

.fp_btn {
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cream);
    background: var(--brown);
    border: 1px solid var(--brown);
    border-radius: 3.125rem;
    padding: 11px 30px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.fp_btn:hover,
.fp_btn:focus {
    background: transparent;
    color: var(--brown);
}

/*********************** Amenities *********************************/

.section__ameni {
    padding: 70px 0;
    position: relative;
    z-index: 1;
    /* background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 80%), url(../images/ameni.webp); */
    background-color: var(--cream);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ameni_para p {
    width: 80%;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 2.15rem;
    color: var(--brown);
}

.amen_image img {
    height: 390px;
}

.amen_image p {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(78, 59, 46, 0.82);
    width: fit-content;
    padding: 5px 10px;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-align: center;
    margin: 0;
}

.section__ameni .owl-carousel .owl-nav .owl-next img,
.section__ameni .owl-carousel .owl-nav .owl-prev img {
    width: 70% !important;
}

.section__ameni .owl-carousel .owl-nav .owl-prev {
    position: absolute;
    left: 0;
}

.section__ameni .owl-carousel .owl-nav .owl-next {
    position: absolute;
    left: 7%;
}

/* .section__ameni .owl-carousel:not(.active) img {
    height: auto;
}

.section__ameni .owl-carousel .active img {
    height: 500px;
} */

/*********************** Connectivity *********************************/

.section__connect {
    width: 100%;
    position: relative;
    padding: 50px 0;
    background-color: var(--cream);
    overflow: hidden;
}

.accordion-item {
    border: none;
    background-color: transparent;
}

.accordion-button {
    background-color: transparent !important;
    border-bottom: 1px solid var(--brown);
}

.accordion-button p {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--brown);
    text-transform: uppercase;
}

.accordion-body p {
    font-size: 1.2rem;
    line-height: 1.9rem;
    color: var(--brown);
}

.accordion-body p img {
    width: 18px;
    /* filter: invert(1); */
}

.accordion-button::after {
    /* filter: invert(1); */
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0 !important;
}

.accordion-button:focus {
    border-bottom: 1px solid var(--brown) !important;
    box-shadow: none !important;
}

#connectivity .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) !important;

}

/**************************** FAQ **********************************/

.section__faq {
    width: 100%;
    padding: 70px 0;
    background-color: var(--cream);
    position: relative;
}

.faq_div .accordion-button p {
    text-transform: none;
    color: var(--brown);
    letter-spacing: 0.02em;
}

.faq_div .accordion-button {
    padding: 18px 0;
}

.faq_div .accordion-body {
    padding: 5px 0 20px;
}

.faq_div .accordion-body p {
    line-height: 1.95rem;
    margin-bottom: 8px;
}

.faq_div .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%);
}

/**************************** Key Specifications **********************************/

.section__spec {
    width: 100%;
    padding: 80px 0;
    background-color: var(--cream);
    position: relative;
}

.spec_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
}

.spec_card {
    background-color: var(--cream-light);
    border: 1px solid rgba(176, 141, 87, 0.5);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(78, 59, 46, 0.12);
    padding: 28px 26px 30px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.spec_card:hover {
    border-color: var(--gold);
    box-shadow: 0 22px 46px rgba(78, 59, 46, 0.18);
    transform: translateY(-5px);
}

.spec_card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(176, 141, 87, 0.4);
}

.spec_card__num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--gold);
}

.spec_card__head h4 {
    font-family: var(--font-display);
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
    text-align: right;
}

.spec_card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spec_card__list li {
    position: relative;
    padding: 9px 0 9px 20px;
    font-size: 1.12rem;
    line-height: 1.6rem;
    color: var(--brown);
    border-bottom: 1px dashed rgba(176, 141, 87, 0.3);
}

.spec_card__list li:last-child {
    border-bottom: none;
}

.spec_card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--gold), #6f5733);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.18);
}

@media screen and (max-width: 991px) {
    .section__spec {
        padding: 60px 0;
    }

    .spec_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 575px) {
    .spec_grid {
        grid-template-columns: 1fr;
    }

    .spec_card {
        padding: 24px 22px 26px;
    }
}

/**************************** Gallery **********************************/

.section__gal {
    width: 100%;
    padding: 50px 0;
    background-color: var(--cream);
    position: relative;
}

.plan_img p {
    position: absolute;
    bottom: 8%;
    left: 5%;
    width: fit-content;
    padding: 10px 20px;
    background: var(--brown);
    font-weight: 500;
    font-size: 1rem;
    color: var(--brown);
    text-align: center;
    cursor: pointer;
    margin: 0;
}

/* tabs ccs */

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brown);
    text-align: center;
    text-transform: uppercase;
    background-color: var(--brown);
    border: 1px solid var(--brown);
    border-radius: 40px;
    margin: 0 15px;
    padding: 10px 30px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--cream);
    background-color: transparent;
}

/* .nav-link.active{
    border: 1px solid var(--brown) !important;
} */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: transparent;
    border: 1px solid var(--brown);
}

/* tabs css end */

#gallery .feat_div p {
    font-size: 1.5rem;
    line-height: 2.3rem;
}

.section__gal .owl-carousel:not(.active.center) img {
    transform: scale(0.9);
    transition: all 1s ease;
}

.section__gal .owl-carousel .active.center img {
    transform: scale(1);
    transition: all 1s ease;
}

/* the gallery reads as pasted rectangles without a frame — double-line gold
   frame on each slide so the carousel reads as one composed wall of prints */
.section__gal .gal_image {
    position: relative;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(78, 59, 46, 0.16);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.section__gal .gal_image::before,
.section__gal .gal_image::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.section__gal .gal_image::before {
    inset: 0;
    border: 1px solid rgba(176, 141, 87, 0.6);
    border-radius: 14px;
}

.section__gal .gal_image::after {
    inset: 6px;
    border: 1px solid rgba(176, 141, 87, 0.35);
    border-radius: 10px;
}

.section__gal .gal_image img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.section__gal .gal_image:hover {
    box-shadow: 0 26px 54px rgba(78, 59, 46, 0.24);
    transform: translateY(-4px);
}

/* tinted veil + circular zoom chip, hinting at the Fancybox lightbox */
.section__gal .gal_image .img-overlay {
    position: absolute;
    inset: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 59, 46, 0);
    opacity: 0;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.section__gal .gal_image:hover .img-overlay {
    opacity: 1;
    background: rgba(78, 59, 46, 0.28);
}

.section__gal .gal_image .img-overlay::before {
    content: "";
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(248, 235, 205, 0.9);
    background:
        rgba(78, 59, 46, 0.65)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8ebcd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
        center / 40% no-repeat;
    transition: transform 0.4s ease;
}

.section__gal .gal_image:hover .img-overlay::before {
    transform: rotate(90deg) scale(1.08);
}

/* keep the frame shadows from clipping against the carousel's overflow */
.section__gal .owl-stage-outer {
    padding: 10px 4px 34px;
}

.section__gal .owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 45%;
    right: 0;
}

.section__gal .owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: 45%;
    left: 0;
}

.section__gal .owl-carousel .owl-nav .owl-next img,
.section__gal .owl-carousel .owl-nav .owl-prev img {
    width: 80%;
    transform: initial;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
}

/************************* Contact ***************************/

.cont_left {
    padding-left: 60px;
}

.cont_div h2 {
    font-family: var(--font-text);
    text-align: center;
    font-weight: 500;
    font-size: 1.9rem;
    color: var(--brown);
    line-height: 1.5;
    letter-spacing: 0.08988rem;
    text-transform: uppercase;
}

.cont_div h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--cream);
    text-transform: uppercase;
    line-height: 1;
}

.cont_div p {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
}

.sub_btn {
    width: fit-content;
    padding: 15px 30px;
    border-radius: 3.125rem;
    background: var(--brown);
    border: none;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.sub_btn:hover {
    opacity: 0.85;
}

.sub_btn span {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--brown);
    text-align: center;
}

/************************* Footer ***************************/

.section__footer {
    width: 100%;
    padding: 30px 0;
    background-color: var(--brown);
}

.foot_div img {
    width: 18%;
    background-color: var(--cream);
    padding: 10px 20px;
    margin-bottom: 1.5rem;
}

.foot_div span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cream);
}

.foot_div p {
    font-size: 15px;
    text-align: center;
}

.fixed_div {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: var(--cream);
    padding: 10px 0;
    text-align: center;
    z-index: 2;
}

.fixed_div button,
.fixed_div a {
    color: var(--brown);
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    background-color: transparent !important;
    border: none !important;
}

.div_line {
    border-right: 1px solid var(--brown);
}

/*********************Modal *******************************/

.modal-content {
    background: transparent;
    border: none;
}

.modal-body {
    background-color: var(--cream);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.modal-body h2 {
    font-family: var(--font-display);
    font-size: 25px;
    color: var(--brown);
    text-transform: uppercase;
}

.modal-body p {
    font-size: 14px;
    color: var(--cream);
}

.modal-body .sub_btn {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 15px;
    color: var(--cream);
    width: fit-content;
    padding: 15px 30px;
    border-radius: 3.125rem;
    background-color: var(--brown);
    border: 1px solid var(--brown);
}

.modal-body .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    /* filter: invert(1); */
}

.modal-body .input-group-addon i {
    margin-top: 5px;
}

.about-btn {
    display: flex;
    justify-content: center;
}

.over-form {
    border: 1px solid var(--brown);
    padding: 40px 15px;

}

.form-group {
    height: 65px;
}

.input-group-addon p {
    color: var(--cream);
    font-size: 15px;
}

.form-control {
    border: 1px solid rgba(78, 59, 46, 0.45) !important;
    background-color: transparent !important;
    color: var(--brown) !important;
    border-radius: 0.25rem;
    font-size: 1.1rem;
}

.input-group>.form-control:focus {
    box-shadow: none !important;
    background: transparent !important;
}

.error {
    color: var(--brown);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
}

/**************Thank You  **************************/

.thank__sec {
    width: 100%;
    position: relative;
    background-color: var(--cream);
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.thank_wrap {
    background: var(--brown);
    padding: 20px;
    margin: 10% 0;
    box-shadow: rgba(78, 59, 46, 0.18) 0px 50px 100px -20px, rgba(78, 59, 46, 0.22) 0px 30px 60px -30px;
    border: 1px solid var(--brown);
}

.check_sign {
    background: var(--cream);
    padding: 20px;
    height: 100px;
    width: 100px;
    border: 3px solid var(--brown);
    border-radius: 50%;
    margin: 0 auto;
}

.check_sign i {
    font-size: 55px;
    color: var(--brown);
}

/* pages without a photographic hero don't need the header scrim */
.page--plain .header::before {
    display: none;
}

/* ...and there the cream wordmark would vanish, so keep it brown */
.page--plain .logo a {
    background-color: var(--brown);
}

/* the menu glyph is light, so it gets its own brown plate on cream */
.page--plain .hambergur {
    background: var(--brown);
    border-radius: 50%;
    padding: 6px;
}

.section-title h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 25px;
    color: var(--cream);
}

.section-title h2 span {
    color: var(--brown);
}

.oops-greet,
.oops-subtitle {
    font-size: 20px;
    color: var(--cream);
}

.go_txt {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 15px;
    color: var(--brown);
    background-color: var(--cream) !important;
    border-radius: 3.125rem;
    border: 1px solid var(--brown);
    width: fit-content;
    padding: 15px 30px;
    margin: 15px auto 0;

}

/*******  ***********/

.btn_dwnld {
    position: fixed;
    bottom: 46%;
    width: fit-content;
    padding: 10px 20px;
    background-color: var(--cream);
    color: var(--brown);
    font-family: var(--font-text);
    border: 1px solid var(--brown);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    z-index: 1;
    right: -62px;
    transform: rotate(270deg);
}

.btn_enq {
    position: fixed;
    bottom: 26%;
    width: fit-content;
    padding: 10px 20px;
    background-color: var(--cream);
    color: var(--brown);
    font-family: var(--font-text);
    border: 1px solid var(--brown);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    z-index: 1;
    right: -38px;
    transform: rotate(270deg);
}

#pageloader {
    background: rgba(241, 220, 176, 0.94);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999999;
    top: 0;
}

#pageloader img {
    left: 50%;
    width: 100px;
    margin-left: -32px;
    margin-top: -32px;
    position: absolute;
    top: 50%;
}


/*==================== Two-colour system: rhythm & polish ====================*/

/* Alternating cream / brown grounds, as in the brochure */
.sec--dark {
    background-color: var(--brown) !important;
    background-image: none !important;
}

.sec--dark .feat_div h2,
.sec--dark .feat_div h3,
.sec--dark .feat_div p,
.sec--dark .over_div h2,
.sec--dark .over_div h3,
.sec--dark .over_div p,
.sec--dark .cont_div h2,
.sec--dark p,
.sec--dark h2,
.sec--dark h3 {
    color: var(--cream);
}

.sec--dark .div_line {
    background: var(--cream);
    border-color: var(--cream);
}

/* Gilded rule beneath every section title, as on the brochure spreads */
.feat_div h3::after,
.over_div h3::after,
#contact .cont_div h2::after {
    content: "";
    display: block;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(176, 141, 87, 0.15) 100%);
    opacity: 1;
    margin: 18px 0 0;
}

/* centred titles get a rule that fades to both edges */
.feat_div h3::after,
#contact .cont_div h2::after {
    background: linear-gradient(90deg, rgba(176, 141, 87, 0.15) 0%, var(--gold) 50%, rgba(176, 141, 87, 0.15) 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Image captions always read against their brown plate */
.amen_image p {
    color: var(--cream);
}

/* Buttons: solid brown on cream, solid cream on brown */
.sub_btn span,
.plan_img p {
    color: var(--cream);
}

.sec--dark .sub_btn,
.sec--dark .plan_img p {
    background: var(--cream);
}

.sec--dark .sub_btn span,
.sec--dark .plan_img p {
    color: var(--brown);
}

/* Modal plates are cream, so the button is a solid brown pill with cream text */
.modal-body .sub_btn span {
    color: var(--cream);
}

/* Gallery tabs: was white-on-cream and unreadable when active */
.nav-tabs .nav-link {
    background-color: transparent;
    border: 1px solid var(--cream);
    color: var(--cream);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--cream);
    color: var(--brown);
    border: 1px solid var(--cream);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border: 1px solid var(--cream);
    background-color: rgba(241, 220, 176, 0.18);
}

/* Accordions: brown chevron instead of Bootstrap's default near-black */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234E3B2E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    filter: none !important;
}

.accordion-button {
    border-bottom: 1px solid rgba(78, 59, 46, 0.35);
}

.accordion-button:not(.collapsed) {
    border-bottom: 1px solid var(--brown);
}

/* Forms on the cream ground */
.form-control::placeholder {
    color: rgba(78, 59, 46, 0.6);
}

.form-control:focus {
    border: 1px solid var(--brown) !important;
}

/* Side tabs & sticky bar */
.btn_dwnld,
.btn_enq {
    background-color: var(--brown);
    color: var(--cream);
    border: 1px solid var(--brown);
    letter-spacing: 0.06em;
}

.fixed_div {
    border-top: 1px solid rgba(78, 59, 46, 0.35);
}

.fixed_div button,
.fixed_div a {
    color: var(--brown);
    letter-spacing: 0.04em;
}

/* Footer */
.foot_div p,
.foot_div span {
    color: var(--cream);
}

.foot_div p {
    opacity: 0.88;
}

/* Thank-you card */
.section-title h2 span {
    color: var(--cream);
    font-style: italic;
}

/* Exterior renders ship in two ratios (2.0 and 1.75), so the carousel
   heights disagreed. Lock the frame to 7:4 and crop, never scale. */
#nav-home .gal_image img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
    object-position: center;
}

/*==================== Overview: copy left, form right ====================*/

#overview {
    padding: 90px 0;
}

/* the neighbouring sections run near-full-bleed, so don't leave a narrow
   Bootstrap container stranded in the middle of a wide screen */
#overview > .container {
    width: min(92%, 1660px);
    max-width: none;
}

/* copy column — everything flush to one left edge */
#overview .over_div {
    max-width: 46rem;
}

#overview .over_div h3 {
    margin-bottom: 0;
}

#overview .over_div p {
    margin-left: 0;
    margin-bottom: 1.15rem;
    line-height: 2.15rem;
}

#overview .over_div p:last-child {
    margin-bottom: 0;
}

/* form card */
#overview .over-form {
    border: 1px solid var(--brown);
    padding: 45px 40px;
    max-width: 27rem;
    margin-left: auto;
}

/* a larger card on desktop, filling its column */
@media screen and (min-width: 992px) {
    #overview .over-form {
        max-width: 100%;
        padding: 60px 50px;
        /* nudged right, away from the copy */
        margin-left: 3rem;
    }

    #overview .over-form .cont_div h2 {
        font-size: 1.85rem;
    }

    #overview .over-form .form-group {
        height: 82px;
    }

    #overview .over-form .form-control {
        height: 58px;
        font-size: 1.05rem;
        padding: 12px 20px;
    }

    #overview .over-form .sub_btn {
        padding: 18px 46px;
    }

    #overview .over-form .sub_btn span {
        font-size: 1.1rem;
    }

    #overview .over-form .about-btn {
        margin-top: 14px;
    }
}

/* on wide screens it can also sit a little into the container gutter */
@media screen and (min-width: 1400px) {
    #overview .over-form {
        margin-right: -1.75rem;
    }
}

#overview .over-form .cont_div h2 {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

#overview .over-form .cont_div h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    background: var(--brown);
    opacity: 0.5;
    margin: 16px auto 0;
}

#overview .over-form .form-control {
    height: 46px;
    padding: 10px 16px;
}

#overview .over-form .about-btn {
    margin-top: 6px;
}

/* highlight strip runs full width, closing the overview section, set off from
   the copy above it by a gilded hairline */
#overview .ameni-carousel {
    width: 100%;
    padding-top: 46px;
    margin-top: 56px;
    border-top: 1px solid rgba(176, 141, 87, 0.45);
}

#overview .high_div p {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7rem;
    text-transform: uppercase;
}

/* on desktop the highlights read as one row with hairline separators, so the
   carousel is only ever initialised on mobile (owl hides an un-inited track) */
@media screen and (min-width: 992px) {
    #overview .ameni-carousel {
        display: flex !important;
        align-items: stretch;
    }

    #overview .ameni-carousel > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        padding: 0 24px;
        border-left: 1px solid rgba(78, 59, 46, 0.3);
    }

    #overview .ameni-carousel > [class*="col-"]:first-child {
        border-left: none;
        padding-left: 0;
    }

    #overview .ameni-carousel > [class*="col-"]:last-child {
        padding-right: 0;
    }

    #overview .high_div {
        margin-bottom: 0;
        height: 100%;
        justify-content: flex-start;
    }

    #overview .high_div p {
        font-size: 1.2rem;
    }

}

@media screen and (max-width: 991px) {
    #overview {
        padding: 60px 0;
    }

    #overview .over-form,
    #overview .over_div {
        max-width: 100%;
        margin-left: 0;
    }
}

/*==================== Connectivity: copy + map ====================*/

#connectivity {
    padding: 90px 0;
}

#connectivity > .container {
    width: min(92%, 1660px);
    max-width: none;
}

#connectivity .over_div {
    max-width: 42rem;
}

#connectivity .conn_div {
    margin-top: 2.5rem;
}

/* accordion rows read as a clean index list */
#connectivity .accordion-item + .accordion-item {
    margin-top: 2px;
}

#connectivity .accordion-button {
    padding: 20px 4px;
    border-bottom: 1px solid rgba(78, 59, 46, 0.28);
    transition: padding-left 0.25s ease, border-color 0.25s ease;
}

#connectivity .accordion-button:hover {
    padding-left: 12px;
    border-bottom-color: var(--brown);
}

#connectivity .accordion-button p {
    font-size: 1.25rem;
    letter-spacing: 0.09em;
    color: var(--brown);
}

#connectivity .accordion-button:not(.collapsed) {
    border-bottom: 1px solid var(--brown);
}

#connectivity .accordion-body {
    padding: 18px 4px 22px;
}

#connectivity .accordion-body .row + .row {
    margin-top: 6px;
}

#connectivity .accordion-body p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.98rem;
}

#connectivity .accordion-body p img {
    flex: 0 0 auto;
}

/* Frame the embedded map so it reads as a deliberate plate rather than a
   bare iframe */
#connectivity .map_img {
    border: 1px solid var(--brown);
    padding: 12px;
}

#connectivity .map_img iframe {
    display: block;
    width: 100%;
    aspect-ratio: 1110 / 633;
    height: auto;
}

@media screen and (max-width: 991px) {
    #connectivity {
        padding: 60px 0;
    }

    #connectivity .over_div {
        max-width: 100%;
    }
}

/*==================== Features: asymmetric image grid ====================*/

#features {
    padding: 55px 0 90px;
}

/* match the overview's gutter instead of a narrow centred container */
#features > .container {
    width: min(92%, 1660px);
    max-width: none;
}

#features .feat_div {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

#features .feat_div p {
    margin-top: 1.1rem;
}

.feat_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* each feature is a framed plate with its caption set below, so the images
   stay modest and the copy is always legible */
.feat_card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(241, 220, 176, 0.05);
    border: 1px solid rgba(176, 141, 87, 0.45);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.feat_card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.feat_card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s ease;
}

.feat_card:hover img {
    transform: scale(1.05);
}

/* a gilded index sits in the corner of each plate */
.feat_card__num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    color: var(--cream);
    background: rgba(78, 59, 46, 0.85);
    border-right: 1px solid rgba(176, 141, 87, 0.7);
    border-bottom: 1px solid rgba(176, 141, 87, 0.7);
    padding: 8px 14px;
}

.feat_card__body {
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feat_card__eyebrow {
    font-family: var(--font-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.feat_card__body h4 {
    font-family: var(--font-display);
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    font-size: 1.25rem;
    margin: 0;
}

.feat_card__body h4::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    background: var(--gold);
    margin: 14px 0 0;
}

.feat_card__body p {
    color: var(--cream);
    opacity: 0.82;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 14px 0 0;
}

@media screen and (max-width: 1199px) {
    .feat_grid {
        gap: 18px;
    }

    .feat_card__body {
        padding: 22px 20px 24px;
    }

    .feat_card__body h4 {
        font-size: 1.1rem;
    }

    .feat_card__body p {
        font-size: 0.98rem;
    }
}

@media screen and (max-width: 991px) {
    #features {
        padding: 60px 0;
    }

    .feat-swiper .feat_card {
        height: auto;
    }

    .feat_card__body {
        padding: 20px 18px 24px;
    }

    .feat_card__body h4 {
        font-size: 1.15rem;
    }

    .feat_card__body p {
        font-size: 0.95rem;
    }
}

/*==================== Features: dark ground ====================*/

/* the page alternates cream / brown so the long light run is broken up */
#features {
    background-color: var(--brown);
    background-image:
        radial-gradient(110% 80% at 50% 0%, rgba(176, 141, 87, 0.16) 0%, rgba(78, 59, 46, 0) 60%),
        repeating-linear-gradient(135deg, rgba(241, 220, 176, 0.03) 0px, rgba(241, 220, 176, 0.03) 1px, rgba(241, 220, 176, 0) 1px, rgba(241, 220, 176, 0) 10px) !important;
    overflow: hidden;
}

#features::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0) 0%, rgba(176, 141, 87, 0.8) 50%, rgba(176, 141, 87, 0) 100%);
    z-index: 2;
}

#features > .container {
    position: relative;
    z-index: 1;
}

#features .feat_div p {
    opacity: 0.85;
}

/* a gilded kicker above the section title */
.sec_eyebrow {
    display: block;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    margin-bottom: 14px;
}

@media screen and (max-width: 991px) {
    .sec_eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        margin-bottom: 10px;
    }
}

/* cards: gilded edge, lifted off the dark ground */
#features .feat_card {
    border: 1px solid rgba(176, 141, 87, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

#features .feat_card:hover {
    border-color: var(--gold);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.4);
    transform: translateY(-6px);
}

/* the dark arrow art needs a light disc to read against the brown ground */
#features .feat-swiper-nav .swiper-button.swiper-button-prev-1,
#features .feat-swiper-nav .swiper-button.swiper-button-next-1 {
    background: var(--cream-light);
    border: 1px solid rgba(176, 141, 87, 0.7);
    border-radius: 50%;
    padding: 10px;
}

@media screen and (max-width: 991px) {
    #features .feat_card {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    }

}


/*==================== Floor Plans: deeper tonal ground ====================*/

/* connectivity above and the gallery below both sit on flat grounds, so this
   section takes the third tone in the palette — a deeper tan — to keep the
   page from reading as one continuous block of cream */
#configuration {
    background-color: var(--cream-deep);
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(248, 235, 205, 0.85) 0%, rgba(231, 206, 157, 0) 60%),
        repeating-linear-gradient(135deg, rgba(78, 59, 46, 0.04) 0px, rgba(78, 59, 46, 0.04) 1px, rgba(78, 59, 46, 0) 1px, rgba(78, 59, 46, 0) 10px);
    padding: 80px 0;
    overflow: hidden;
}

#configuration::before,
#configuration::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0) 0%, rgba(176, 141, 87, 0.75) 50%, rgba(176, 141, 87, 0) 100%);
    z-index: 2;
}

#configuration::before {
    top: 0;
}

#configuration::after {
    bottom: 0;
}

#configuration > .container {
    position: relative;
    z-index: 1;
}

/* the cards lift off the deeper ground */
#configuration .fp_card {
    background-color: var(--cream-light);
    border: 1px solid rgba(176, 141, 87, 0.5);
    box-shadow: 0 16px 36px rgba(78, 59, 46, 0.14);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

#configuration .fp_card:hover {
    border-color: var(--gold);
    box-shadow: 0 22px 46px rgba(78, 59, 46, 0.2);
    transform: translateY(-4px);
}

#configuration .fp_card__specs {
    border-top-color: rgba(176, 141, 87, 0.45);
}

/* the inactive villa tabs read against the deeper tan */
#configuration .nav-tabs .nav-link {
    background-color: rgba(248, 235, 205, 0.55);
}

#configuration .nav-tabs .nav-link:focus,
#configuration .nav-tabs .nav-link:hover {
    background-color: rgba(248, 235, 205, 0.9);
}

#configuration .nav-tabs .nav-link.active {
    background-color: var(--brown);
}

@media screen and (max-width: 991px) {
    #configuration {
        padding: 55px 0;
    }

    #configuration .fp_card {
        box-shadow: 0 10px 24px rgba(78, 59, 46, 0.14);
    }
}


/*==================== Contact: deeper tonal ground ====================*/

/* the FAQ above sits on plain cream, so the closing section takes the deeper
   tan — the same third tone used by the floor plans */
#contact {
    background-color: var(--cream-deep);
    background-image:
        radial-gradient(110% 80% at 50% 0%, rgba(248, 235, 205, 0.85) 0%, rgba(231, 206, 157, 0) 60%),
        repeating-linear-gradient(135deg, rgba(78, 59, 46, 0.04) 0px, rgba(78, 59, 46, 0.04) 1px, rgba(78, 59, 46, 0) 1px, rgba(78, 59, 46, 0) 10px);
    padding: 80px 0;
    overflow: hidden;
}

#contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0) 0%, rgba(176, 141, 87, 0.75) 50%, rgba(176, 141, 87, 0) 100%);
    z-index: 2;
}

#contact > .container {
    position: relative;
    z-index: 1;
}

/* the visit image is framed rather than floating on the ground */
#contact .cont_img {
    border: 1px solid rgba(176, 141, 87, 0.5);
    box-shadow: 0 20px 44px rgba(78, 59, 46, 0.18);
}

#contact .cont_img img {
    display: block;
}

/* the form sits on a lifted card, matching the overview enquiry panel */
#contact .cont_left {
    background: linear-gradient(160deg, var(--cream-light) 0%, var(--cream) 100%);
    border: 1px solid rgba(176, 141, 87, 0.55);
    box-shadow: 0 24px 56px rgba(78, 59, 46, 0.16);
    padding: 44px 40px;
    position: relative;
}

/* the form card is set off from the image beside it; the column is narrowed by
   the same amount so the two halves still fit one row */
@media screen and (min-width: 992px) {
    #contact .cont_left {
        margin-left: 40px;
        flex: 0 0 auto;
        width: calc(50% - 40px);
    }
}

#contact .cont_left::before,
#contact .cont_left::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold);
    pointer-events: none;
}

#contact .cont_left::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
}

#contact .cont_left::after {
    right: 12px;
    bottom: 12px;
    border-left: none;
    border-top: none;
}

#contact .cont_div p {
    color: var(--brown);
    opacity: 0.8;
}

@media screen and (max-width: 991px) {
    #contact {
        padding: 55px 0;
    }

    #contact .cont_left {
        padding: 32px 22px;
        box-shadow: 0 14px 32px rgba(78, 59, 46, 0.14);
    }

    #contact .cont_img {
        box-shadow: 0 12px 28px rgba(78, 59, 46, 0.16);
    }
}

/*==================== Project Highlights ====================*/

/* a faint gilded wash behind the strip, so the section reads as its own
   spread rather than another flat brown band */
#highlights {
    overflow: hidden;
}

#highlights::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(176, 141, 87, 0.22) 0%, rgba(176, 141, 87, 0) 70%),
        radial-gradient(45% 40% at 50% 100%, rgba(176, 141, 87, 0.14) 0%, rgba(176, 141, 87, 0) 70%);
    pointer-events: none;
}

#highlights .container {
    position: relative;
    z-index: 1;
}

.high_head {
    text-align: center;
}

.high_eyebrow {
    display: block;
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

#highlights .feat_div h3 {
    font-size: 3.2rem;
}

/* the strip is a carousel at every width; owl owns the layout */
.high-grid {
    position: relative;
}

/* room for the hover lift and its shadow, which the stage would otherwise clip */
.high-grid .owl-stage-outer {
    padding: 10px 0 26px;
    margin: -10px 0 -26px;
}

.high-grid .owl-stage {
    display: flex;
}

/* the stage clips at its own edge, so every card is inset a couple of pixels
   to keep its left and right hairlines visible */
.high-grid .owl-item {
    display: flex;
    padding: 0 2px;
}

/* each highlight is its own gilded card */
.high-grid .high_div {
    position: relative;
    width: 100%;
    min-height: 236px;
    margin-bottom: 0;
    padding: 40px 16px;
    gap: 20px;
    justify-content: center;
    background: linear-gradient(160deg, rgba(241, 220, 176, 0.07) 0%, rgba(241, 220, 176, 0.015) 100%);
    border: 1px solid rgba(176, 141, 87, 0.42);
    transition: background 0.45s ease, border-color 0.45s ease, transform 0.45s ease,
        box-shadow 0.45s ease;
}

/* gilded corner brackets — the brochure's framing device */
.high-grid .high_div::before,
.high-grid .high_div::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gold);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.high-grid .high_div::before {
    top: 8px;
    left: 8px;
    border-right: 0;
    border-bottom: 0;
}

.high-grid .high_div::after {
    bottom: 8px;
    right: 8px;
    border-left: 0;
    border-top: 0;
}

.high-grid .high_div:hover {
    background: linear-gradient(160deg, rgba(176, 141, 87, 0.2) 0%, rgba(176, 141, 87, 0.05) 100%);
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(24, 16, 10, 0.28);
}

.high-grid .high_div:hover::before,
.high-grid .high_div:hover::after {
    opacity: 1;
}

/* the icon sits in a thin gilded ring that warms on hover */
.high_ico {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(176, 141, 87, 0.55);
    color: var(--cream);
    transition: border-color 0.45s ease, background 0.45s ease, transform 0.45s ease;
}

.high_ico svg {
    width: 38px;
    height: 38px;
    display: block;
    transition: color 0.45s ease;
}

.high-grid .high_div:hover .high_ico {
    border-color: var(--gold);
    background: rgba(176, 141, 87, 0.16);
    transform: scale(1.06);
}

.high-grid .high_div:hover .high_ico svg {
    color: var(--cream-light);
}

.high-grid .high_div p {
    color: var(--cream);
    /* the display serif, as on every other card title on the page */
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1.75;
    text-transform: uppercase;
}

/* nav and dots sit clear of the cards */
.high-grid .owl-nav {
    margin-top: 30px;
}

.high-grid .owl-nav img {
    width: 52px;
}

.high-grid .owl-nav button.owl-prev,
.high-grid .owl-nav button.owl-next {
    background: transparent !important;
    margin: 0 18px !important;
    padding: 0 !important;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.high-grid .owl-nav button.owl-prev:hover,
.high-grid .owl-nav button.owl-next:hover {
    transform: scale(1.08);
}

.high-grid .owl-nav button:hover {
    opacity: 1;
}

.high-grid .owl-dots {
    margin-top: 14px;
}

.high-grid .owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 0 5px;
    background: rgba(241, 220, 176, 0.3);
    transition: background 0.3s ease, transform 0.3s ease;
}

.high-grid .owl-dots .owl-dot.active span,
.high-grid .owl-dots .owl-dot:hover span {
    background: var(--gold);
    transform: scale(1.3);
}

/* the strip breathes wider than the text container on large screens, so the
   five cards fill the spread instead of leaving deep side gutters */
@media screen and (min-width: 1200px) {
    #highlights .container {
        max-width: 1480px;
    }

    .high-grid .high_div {
        min-height: 280px;
        padding: 48px 26px;
        gap: 24px;
    }

    .high_ico {
        width: 96px;
        height: 96px;
    }

    .high_ico svg {
        width: 46px;
        height: 46px;
    }

    .high-grid .high_div p {
        font-size: 1.08rem;
        letter-spacing: 0.13em;
    }
}

@media screen and (min-width: 1600px) {
    #highlights .container {
        max-width: 1680px;
    }

    .high-grid .high_div {
        min-height: 310px;
    }

    .high-grid .high_div p {
        font-size: 1.15rem;
    }
}

@media screen and (max-width: 1199px) {
    .high-grid .high_div {
        min-height: 220px;
        padding: 34px 18px;
        gap: 18px;
    }

    .high_ico {
        width: 70px;
        height: 70px;
    }

    .high_ico svg {
        width: 34px;
        height: 34px;
    }

    .high-grid .high_div p {
        font-size: 0.93rem;
        letter-spacing: 0.1em;
    }
}

@media screen and (max-width: 991px) {
    .high-grid .owl-nav img {
        width: 40px;
    }

    .high_eyebrow {
        font-size: 0.8rem;
        letter-spacing: 0.3em;
    }

    #highlights .feat_div h3 {
        font-size: 2.4rem;
    }
}

/* phones: one compact card at a time — kept short so it never fills the screen */
@media screen and (max-width: 575px) {
    #highlights {
        padding: 55px 0;
    }

    #highlights .feat_div h3 {
        font-size: 1.9rem;
    }

    #highlights .feat_div.mb-5 {
        margin-bottom: 2rem !important;
    }

    .high-grid .high_div {
        /* narrower than the slide, so the card doesn't run edge to edge */
        width: 92%;
        max-width: 330px;
        margin: 0 auto;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 18px 16px;
        gap: 14px;
    }

    .high-grid .high_div::before,
    .high-grid .high_div::after {
        display: none;
    }

    .high_ico {
        width: 66px;
        height: 66px;
        flex: 0 0 66px;
    }

    .high_ico svg {
        width: 34px;
        height: 34px;
    }

    .high-grid .high_div p {
        text-align: left;
        font-size: 0.95rem;
        letter-spacing: 0.11em;
        line-height: 1.55;
    }

    .high-grid .owl-nav {
        margin-top: 22px;
    }

    .high-grid .owl-nav img {
        width: 34px;
    }
}