/* Vedant Capital site styles.
 *
 * Ported from the legacy stylesheet: this file IS the design (hero art,
 * mobile menu, filter dropdowns, carousels, modals, checkboxes), so its
 * rules carry over intact with image URLs moved under /static/. Utility
 * classes come from the Tailwind Play runtime (web/static/tailwind.js) with
 * the inline config in web/layouts/base.gohtml; never restate a utility
 * here. */

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

/* Section spacing tokens. Declared here rather than in the Tailwind
   config: the Play runtime appends its stylesheet after this file, so a
   config-generated .mb-space150 would override the responsive overrides in
   the media queries below. */
.mb-space150 {
    margin-bottom: 150px;
}

.mb-space60 {
    margin-bottom: 60px;
}

.py-space60 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.py-space50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* The one variant-prefixed spacing class in the markup. Tailwind cannot
   generate variants of classes it does not own, so the media rule is
   hand-written here (the class name keeps the arbitrary-variant spelling). */
@media (max-width: 1024px) {
    .max-\[1024px\]\:mb-space60 {
        margin-bottom: 60px;
    }
}

body {
    color: rgb(var(--foreground-rgb));
    user-select: none;
}

.text-balance {
    text-wrap: balance;
}

/* font-family: 'Inter'; */
/* font-family: "Kufam"; */

body {
    font-family: "Kufam";
}

input:focus {
    outline: none;
}

select {
    background: transparent;
    color: #c1bec8;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: #fff;
    /* box-shadow: inset 0 0 4px #833cf5; */
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #833cf5;
    border-radius: 10px;
}

.contactUS {
    background: url(/static/images/btnBG.svg) no-repeat 0 0;
    transition: ease-in-out 0.5s;
    width: 142px;
    height: 48px;
    display: flex;
    text-align: center;
    color: #fff;
    align-items: center;
    justify-content: center;
}

.contactUS:hover {
    opacity: 0.8;
}

.contactBG {
    background: url(/static/images/gayBG.svg) no-repeat 0 0;
    position: absolute;
    top: -112px;
    left: 0;
    width: 100%;
    height: 780px;
    display: block;
    z-index: -1;
}

.contactBG:before {
    content: "";
    background: #f2f4f7;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
}

.infoBox:before {
    content: "";
    background: url(/static/images/gayBG-02.svg) no-repeat 0 0;
    width: 145px;
    height: 145px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 100%;
}

.cstmCheckbox {
    display: block;
}

.cstmCheckbox input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.cstmCheckbox label {
    position: relative;
    font-size: 12px;
    color: #544b67;
    line-height: 20px;
    display: block;
    padding-left: 28px;
    font-family: "inter";
}

.cstmCheckbox label a {
    color: #833cf5;
    text-decoration: underline;
}

.cstmCheckbox label a:hover {
    text-decoration: none;
}

.cstmCheckbox label:before {
    content: "";
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #ebe5f3;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
}

.cstmCheckbox input:checked + label:before {
    background-color: #833cf5;
    border-color: #833cf5;
}

.cstmCheckbox input:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 8px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.homeHeroBG {
    background: url(/static/images/homeHeroBG.svg) no-repeat center 0;
    margin: -120px 0 100px;
    padding: 120px 0 0;
    height: 820px;
}

.searchBTN {
    background: url(/static/images/searchBG.svg) no-repeat 0 0;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.investIndia {
    background: url(/static/images/investIndiaBG.svg) no-repeat center 0;
    height: 820px;
}

.whyUS {
    background: url(/static/images/whyUsHeroBG.svg) no-repeat center 0;
    height: 820px;
}

.AboutUs {
    background: url(/static/images/aboutHeroBG.svg) no-repeat center 0;
    height: 820px;
}

.Extensivemarket {
    border: 1px solid rgba(202, 197, 204, 0.5);
    border-radius: 100px;
    padding: 15px 20px 11px;
    color: #14052c;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    position: absolute;
    top: 26px;
    left: -20px;
}

.Extensivemarket i {
    position: absolute;
    top: 48px;
    right: 0;
}

.ComprehensiveInvestor {
    border: 1px solid rgba(202, 197, 204, 0.5);
    border-radius: 100px;
    padding: 15px 20px 11px;
    color: #14052c;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    position: absolute;
    bottom: 66px;
    right: 0;
}

.ComprehensiveInvestor i {
    position: absolute;
    top: -72px;
    left: 0;
}

.PersonalizedInvestment {
    display: inline-block;
    position: absolute;
    bottom: 106px;
    left: -580px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.PersonalizedInvestment p {
    border: 1px solid rgba(202, 197, 204, 0.5);
    border-radius: 100px;
    padding: 15px 20px 11px;
    color: #14052c;
    font-size: 16px;
    line-height: 20px;
}

.PersonalizedInvestment i {
    position: absolute;
    top: -183px;
    right: -210px;
}

label + .checkbox-dropdown {
    border-color: rgba(131, 60, 245, 0.4);
}

.checkbox-dropdown {
    width: auto;
    max-width: 200px;
    min-width: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ebe5f3;
    padding: 10px;
    position: relative;
    /* margin: 0 auto; */
    user-select: none;
}

/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #c1bec8;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: #c1bec8;
    border-top-color: #fff;
    margin-top: -9px;
}

.checkbox-dropdown-list {
    background-color: white;
    box-shadow: 0px 4px 14px rgba(106, 70, 165, 0.1);
    list-style: none;
    z-index: 99;
    position: absolute;
    top: 110%; /* align the dropdown right below the dropdown text */
    border: 0;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
    opacity: 0; /* hide the dropdown */
    border-radius: 6px;
    min-width: 220px;

    transition: opacity 0.4s ease-in-out;
    /* height: 100px; */
    /* overflow: scroll; */
    /* overflow-x: hidden; */
    pointer-events: none; /* avoid mouse click events inside the dropdown */
}

.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}

div.react-responsive-modal-modal {
    width: calc(100% - 40px);
    max-width: 1200px;
    border-radius: 6px;
    padding: 20px;
}

.modalTitle {
    padding: 0 0 20px;
}

.modalTitle h3 {
    margin: 0;
    display: block;
    font-size: 18px;
    color: #14052c;
    line-height: 30px;
    font-weight: 600;
}

.modalBody {
    display: flex;
    gap: 28px;
    position: relative;
    align-items: flex-start;
    overflow: visible;
}

/* Make sure we override any conflicts */
.modalBody .react-multi-carousel-list.GalleryCarousel {
    height: 500px;
}

.modalBody
.react-multi-carousel-list.GalleryCarousel
ul.react-multi-carousel-track,
.modalBody
.react-multi-carousel-list.GalleryCarousel
ul.react-multi-carousel-track
li
> div {
    height: 100%;
}

button.react-responsive-modal-closeButton {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(20, 5, 44, 0.15);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 20px;
    right: 20px;
}

button.react-responsive-modal-closeButton:hover {
    background: rgba(20, 5, 44, 0.15);
}

button.react-responsive-modal-closeButton svg {
    width: 18px;
}

.SliderRoot {
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    touch-action: none;
    width: 100%;
    height: 20px;
    margin-bottom: 15px;
}

.SliderTrack {
    background: rgba(131, 60, 245, 0.2);
    position: relative;
    flex-grow: 1;
    border-radius: 9999px;
    height: 3px;
}

.SliderRange {
    position: absolute;
    background: var(--purple-normal, #833cf5);
    border-radius: 9999px;
    height: 100%;
}

.SliderThumb {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--purple-normal, #833cf5);
    border-radius: 6px;
    cursor: pointer;
}

.SliderThumb:focus {
    outline: none;
    box-shadow: none;
}

.textElipse {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: 50px;
}

.inactive {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    inset: 0;
}

.overlay {
    position: absolute;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    inset: 0;
    border-radius: 10px;
}

.getTouch {
    background: url(/static/images/getTouch.jpg) no-repeat center 0;
    height: 622px;
}

.gmnoprint {
    display: none !important;
}

button.gm-control-active.gm-fullscreen-control {
    display: none !important;
}

.filterButton {
    margin: 0;
    background-color: #ebe5f34d;
    color: black;
    border: 1px solid #ebe5f3;
    border-radius: 8px;
    width: fit-content;
}

.chooseLocation {
    width: 150px;
}

.propertyType {
    width: 230px;
}

.priceRange {
    width: 160px;
}

.cstMCheckbox input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.cstMCheckbox label {
    position: relative;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    color: #544b67;
    line-height: 16px;
    gap: 8px;
    padding: 3px 0 0 28px;
}

.cstMCheckbox label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    display: block;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border: 1px solid #ebe5f3;
    border-radius: 4px;
}

.cstMCheckbox input:checked + label:before {
    background: #833cf5;
}

.cstMCheckbox input:checked + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 7px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.captionBG {
    background: url(/static/images/captionBG.svg) no-repeat 100% 0 / cover;
}

.propertyFeatures > div:last-child {
    display: none;
}

/* Doubled selector on purpose: this resets the element's own py-3/px-6
   utilities, and the Play runtime's stylesheet loads after this file, so an
   equal-specificity reset would lose. */
.propertyFeatures.propertyFeatures {
    background: transparent !important;
    padding: 0;
}

.propertyFeatures .mx-12.block {
    display: none;
}

.propertyFeatures {
    border-radius: 8px;
}

.propertyFeatures .flex.items-center.gap-4 {
    background: rgba(235, 229, 243, 0.3);
    padding: 8px 10px;
}

.mobileMenu {
    display: none;
}

input[type="radio"] {
    accent-color: #833cf5;
}

.optionDropDown {
    z-index: 10;
    position: relative;
}

.rangeInput > .grid.gap-2 {
    width: 100%;
}

.cstMCheckbox .truncate {
    white-space: normal;
}

.Currency {
    width: 115px;
}

.PropertyDevelopers > div > ul > li {
    border: 1px solid #ebe5f3;
    border-radius: 8px;
    padding: 24px;
    margin: 0 10px 0 0;
}

@media (max-width: 767px) {
    .PropertyDevelopers > div > ul > li {
        padding: 16px;
        margin: 0;
    }
}

.GalleryCarousel + ul,
.GalleryCarousel {
    height: 500px;
}

.GalleryCarousel + ul {
    overflow: auto;
}

.filter-box .checkbox-dropdown:nth-child(1) .checkbox-dropdown-list,
.filter-box .checkbox-dropdown:nth-child(2) .checkbox-dropdown-list {
    left: 0 !important;
    right: auto;
}

/* Medis CSS started */

/*.mostCarouse img {*/
/*  width: 100%;*/
/*}*/

/*.mostCarouse:after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  border-bottom: solid 40px transparent;*/
/*  border-right: solid 40px transparent;*/
/*  border-left: solid 40px #fff;*/
/*  border-top: solid 40px #fff;*/
/*}*/

.mostCarouse {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Adjust the padding-top percentage based on the desired aspect ratio */
    overflow: hidden;
}

.mostCarouse img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mostCarouse:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-bottom: solid 40px transparent;
    border-right: solid 40px transparent;
    border-left: solid 40px #fff;
    border-top: solid 40px #fff;
}

.property-image-container-thumbnail {
    position: relative;
    width: 100%;
    height: 280px; /* Adjust the height as needed */
    overflow: hidden;
}

.property-image-container-thumbnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1025px) {
    .property-image-container-thumbnail {
        width: 392px; /* Adjust the width as needed */
        height: 100%;
    }
}

.Currency {
    width: 115px;
}

.srhFilter > div:nth-child(1) > div,
.srhFilter > div:nth-child(2) > div,
.srhFilter > div:nth-child(3) > div {
    font-size: 13px;
    text-align: right;
}

.browseCarouselImg ul li > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.browseCarouselImg ul li img {
    /*min-height: 580px;*/
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.browseCarouselThumb > div {
    min-height: calc(50% - 8px);
    position: relative;
    overflow: hidden;
}

.browseCarouselThumb > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.browseCarouselThumb > div:hover img {
    transform: scale(1.05);
}

.filter-option {
    position: relative;
    padding: 5px;
}

.filter-option:hover .filter-dropdown {
    display: grid;
    gap: 16px;
    width: calc(100% + 10px);
    padding: 16px;
    position: absolute;
    top: 100%;
    left: -5px;
    z-index: 11;
}

.filter-dropdown {
    display: none;
    padding: 12px 16px 16px;
    background: #ffffff;
    box-shadow: 0px 4px 14px rgba(106, 70, 165, 0.1);
    border-radius: 6px;
}

.blur-part {
    height: 48px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.blur-part > .property-year {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    height: 32px;
}

.blur-part > .property-year > span {
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.blur-part > .property-year > span > i {
    background-color: transparent;
    padding: 0;
}

.blur-part > .property-year > span > i > img:nth-child(1) {
    display: none;
}

.blur-part > .property-year > span > i > img:nth-child(2) {
    display: block;
    width: 20px;
}

.blur-img {
    height: 48px;
    overflow: hidden;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.blur-img > span {
    background-position: 0 100%;
    height: 48px;
    filter: blur(6px);
    width: 100%;
    display: block;
    background-size: 100% auto;
}

.filter-box .checkbox-dropdown:nth-child(7) .checkbox-dropdown-list {
    min-width: 270px;
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .filter-box .checkbox-dropdown:nth-child(6) .checkbox-dropdown-list,
    .filter-box .checkbox-dropdown:nth-child(7) .checkbox-dropdown-list {
        left: 0 !important;
        right: auto;
    }
}

@media (max-width: 1279px) {
    .homeHeroBG {
        min-height: 100%;
    }

    .homeHeroBG {
        margin-bottom: 100px;
    }

    .infoBox:before {
        display: none;
    }

    .Extensivemarket {
        top: 21px;
    }

    .whyUS,
    .AboutUs {
        height: 630px;
    }

    .PersonalizedInvestment i {
        top: -133px;
        right: -160px;
    }

    .PersonalizedInvestment i img {
        max-width: 150px;
    }

    .PersonalizedInvestment {
        left: -550px;
    }

    .ComprehensiveInvestor {
        bottom: 20px;
    }

    .ComprehensiveInvestor i {
        top: -43px;
    }

    .ComprehensiveInvestor i img {
        max-width: 140px;
    }

    .whyUS {
        background-position: -200px 0;
    }

    .realEstate-01 img {
        max-width: 280px;
    }

    /* Doubled class for specificity: beats the Tailwind `top-10` utility the
       JSX carries, whose generated CSS is injected after this stylesheet. */
    .realEstate-01.realEstate-01 {
        top: 0;
    }

    .realEstate-02 img {
        max-width: 280px;
    }

    .realEstate-02 {
        right: 200px;
    }

    .mb-space150 {
        margin-bottom: 100px;
    }
}

@media (min-width: 1279px) {
    .revertGetTouch,
    .articlesGetTouch,
    .blogPostGetTouch,
    .whyusGetTouch,
    .aboutGetTouch {
        background-position: center 0 !important;
    }
}

@media (min-width: 768px) {
    .revertGetTouch {
        background: url(/static/images/getTouch-left.png) no-repeat;
        background-position: 100% 0;
    }

    .articlesGetTouch {
        background: url(/static/images/article.png) no-repeat;
        background-position: 100% 0;
    }

    .blogPostGetTouch {
        background: url(/static/images/blogFTR.png) no-repeat;
        background-position: 100% 0;
    }

    .whyusGetTouch {
        background: url(/static/images/whyus.png) no-repeat;
        background-position: 100% 0;
    }

    .aboutGetTouch {
        background: url(/static/images/about.png) no-repeat;
        background-position: 100% 0;
    }

    .revertGetTouch > div > div > div {
        margin-left: auto;
    }
}

@media (max-width: 1024px) {
    .GalleryCarousel {
        height: auto;
    }

    .GalleryCarousel + ul {
        display: none !important;
    }

    .modalBody .react-multi-carousel-list {
        width: 100%;
    }

    .filterHome {
        background: #fff;
        border-radius: 6px;
        padding: 10px;
        width: 100%;
        display: block;
    }

    .filterHome > div:first-child {
        display: block;
        padding: 0;
        width: 100%;
    }

    .filterHome > div:first-child > div {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .filterHome > div:first-child > div > div {
        margin-left: auto;
    }

    .investRealEstate > img {
        display: none;
    }

    .investRealEstate {
        padding: 30px 0;
        justify-content: center;
    }

    .homeHeroBG {
        margin-bottom: 70px;
    }

    .contactBG {
        display: none;
    }

    .GetTouch {
        background: #f2f4f7;
        position: relative;
        padding: 52px 0;
        margin: 0 0 40px;
    }

    .GetTouch::before {
        content: "";
        background: #f2f4f7;
        width: 200%;
        left: -50%;
        top: 0;
        position: absolute;
        height: 100%;
        z-index: -1;
    }

    .infoBox:before {
        display: none;
    }

    .contactUS {
        display: none;
    }

    .ComprehensiveInvestor,
    .PersonalizedInvestment p {
        padding: 11px 20px 7px;
        font-size: 15px;
    }

    .Extensivemarket {
        top: 0;
        left: auto;
        right: 0;
        padding: 11px 20px 7px;
        font-size: 15px;
    }

    .Extensivemarket i {
        top: 40px;
        right: 60px;
    }

    .PersonalizedInvestment i img {
        max-width: 100px;
    }

    .PersonalizedInvestment {
        left: -450px;
        bottom: 60px;
    }

    .PersonalizedInvestment i {
        top: -79px;
        right: -100px;
    }

    .homeHeroBG,
    .whyUS,
    .AboutUs {
        height: 580px;
    }

    .ComprehensiveInvestor {
        bottom: 40px;
    }

    .ComprehensiveInvestor i {
        left: 60px;
    }

    .whyUS {
        background-position: -200px 0;
    }

    .investIndia h2 {
        max-width: 480px;
        padding: 30px 0 0;
        margin: 0 0 20px;
    }

    .investIndia p {
        margin-bottom: 10px;
    }

    .realEstate-01 img {
        max-width: 200px;
    }

    /* Doubled class for specificity: beats the Tailwind `right-[355px]`
       utility on the same element (generated CSS is injected later). */
    .realEstate-02.realEstate-02 {
        right: 0;
    }

    .realEstate-02 img {
        max-width: 200px;
    }

    /* Doubled class for specificity (0,2,0): the JSX carries Tailwind
       arbitrary utilities (left-[-100px], max-w-[605px]) whose generated CSS
       is injected after this stylesheet, so a single-class rule would lose
       the cascade and the card would hang 100px off the left edge. */
    .investmentQuote.investmentQuote {
        left: 15px;
        max-width: 500px;
    }

    .mb-space60 {
        margin-bottom: 60px;
    }

    .py-space60 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .mb-space150 {
        margin-bottom: 60px;
    }

    .results .checkbox-dropdown-list {
        left: auto;
        right: 0;
    }

    body.openMenu {
        overflow: hidden;
    }

    .mobileMenu {
        position: fixed;
        width: 0;
        right: -100%;
        top: 0;
        overflow-x: scroll;
        background: #14052c;
        z-index: 100;
        height: 100vh;
        text-align: center;
        padding: 30px 10px;
        transition: ease-in-out 0.5s;
        opacity: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    body.openMenu .mobileMenu {
        opacity: 1;
        right: 0;
        width: 375px;
        overflow: auto;
    }

    body.openMenu .mobileMenuDIV {
        width: 100%;
        right: 0;
    }

    .mobileMenuDIV {
        content: "";
        background: rgba(0, 0, 0, 0.5);
        width: 0;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: -1;
        overflow: hidden;
        transition: ease-in-out 0.5s;
    }

    .mobileMenu > a {
        display: block;
    }

    .mobileMenu > div > img {
        margin: 0 auto;
    }

    .mobileMenu > a > img {
        margin: 0 auto;
    }

    .mobileMenu > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobileMenu > ul > li {
        margin: 2px 0;
    }

    .mobileMenu > ul > li > a {
        color: #fff;
        font-size: 22px;
        font-weight: 500;
        display: block;
        line-height: 30px;
        padding: 12px 5px;
    }

    .mobileMenu > ul > li > a:hover {
        background: #833cf5;
        border-radius: 8px;
    }

    .Currency {
        font-size: 15px;
    }

    .contactMenu {
        background: url(/static/images/contactBG.svg) no-repeat 0 0 !important;
        margin: 0 0 20px;
    }

    .browseCarouselImg > .carousel-container {
        height: auto;
    }

    .browseCarouselImg ul li img {
        min-height: auto;
    }

    .browseCarouselThumb {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .browseCarouselThumb > div {
        flex: 0 0 auto;
        width: 242px;
        height: 150px !important; /* Using !important to ensure this height is applied */
        min-height: 150px !important; /* Override any min-height settings */
    }
}

@media (max-width: 767px) {
    div.react-responsive-modal-modal {
        width: auto;
    }

    .searchBTN.searchBTN {
        background: #833cf5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .searchBTN img {
        max-width: 30px;
    }

    .searchBTN span {
        display: block;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

    .propertyFeatures.propertyFeatures {
        background: transparent !important;
        padding: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .homeHeroBG {
        margin-bottom: 60px;
        height: auto;
        background-size: cover;
        padding-bottom: 40px;
    }

    .getTouch {
        background: rgba(235, 229, 243, 1) !important;
        height: auto;
        max-width: 407px;
        margin: 0 auto;
    }

    .getTouch > div + img {
        max-width: 100%;
    }

    .whyInvest {
        background: none !important;
    }

    footer > div {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    footer > div > div > div:first-child {
        width: 100%;
        padding-bottom: 2rem;
    }

    footer br {
        display: none;
    }

    footer > div > div > div:nth-child(4) {
        width: 100%;
        max-width: 100%;
        padding-top: 2rem;
    }

    .AboutUs > div > div:nth-child(2) {
        display: grid;
    }

    .AboutUs > div > div:nth-child(2) > img:nth-child(1) {
        order: 3;
        margin-top: -20px;
    }

    .AboutUs > div > div:nth-child(2) > img:nth-child(2) {
        order: 1;
    }

    .AboutUs > div > div:nth-child(2) > img:nth-child(3) {
        order: 2;
    }

    .Extensivemarket {
        top: 0;
        left: auto;
        right: 92px;
        position: relative;
        display: inline-block;
        width: fit-content;
        margin: 0 0 60px auto;
    }

    .Extensivemarket i {
        top: 19px;
        right: -80px;
        transform: rotate(-180deg);
    }

    .ComprehensiveInvestor {
        bottom: 40px;
        position: relative;
        width: fit-content;
        margin: 0 0 0 auto;
        right: 150px;
    }

    .PersonalizedInvestment i,
    .ComprehensiveInvestor i {
        display: none;
    }

    .ComprehensiveInvestor:before {
        background: url(/static/images/line-05.svg) no-repeat 0 0;
        content: "";
        width: 65px;
        height: 80px;
        position: absolute;
        top: 14px;
        transform: rotate(-180deg);
        right: -62px;
    }

    .AboutUs {
        height: auto;
        padding-bottom: 50px;
        background-size: cover;
    }

    .whyUS {
        padding-bottom: 50px;
        height: auto;
    }

    .PersonalizedInvestment {
        left: auto;
        bottom: auto;
        position: relative;
        order: 4;
        margin: 30px 0 0 30px;
    }

    .PersonalizedInvestment:before {
        background: url(/static/images/line-08.svg) no-repeat 0 0;
        content: "";
        width: 32px;
        height: 112px;
        position: absolute;
        top: -84px;
        left: -20px;
    }

    /* Doubled selectors below outweigh the elements' own Tailwind utility
       classes (.flex, py-10, gap-3), which the Play runtime appends after
       this file. */
    .boxes.boxes {
        display: block;
        padding: 75px 1rem 1rem;
    }

    .boxes:nth-child(2n + 2) > img {
        width: 196px;
        height: 196px;
        top: -98px;
        transform: rotate(45deg);
        left: 50%;
        margin-left: -98px;
        max-width: initial;
    }

    .boxes:nth-child(2n + 1) > img {
        width: 196px;
        height: 196px;
        top: -98px;
        transform: rotate(-45deg);
        left: 50%;
        margin-left: -98px;
        max-width: initial;
    }

    .boxes > div:nth-child(2) {
        margin: 0 0 20px;
    }

    .boxes > div:nth-child(2) span {
        display: none;
    }

    .boxes:before {
        content: "";
        background: url(/static/images/line-09.svg) no-repeat 100% 0;
        width: 50%;
        height: 44px;
        display: block;
        position: absolute;
        left: 0;
        top: 30px;
    }

    .boxes > div:nth-child(2) > i > img {
        margin: 0 auto;
    }

    .boxes > div:nth-child(3) {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .investIndia h2 {
        font-size: 24px;
        text-align: center;
        max-width: 100%;
    }

    .investIndia p {
        font-size: 14px;
        text-align: center;
    }

    .realEstate-IMGS > div {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }

    .investIndia > div {
        display: grid;
        text-align: center;
        gap: 20px;
    }

    .investIndia > div > div:nth-child(1) {
        order: 1;
    }

    .investIndia > div > div:nth-child(2) {
        order: 3;
        display: flex;
        justify-content: center;
        gap: 10px;
        align-items: flex-end;
    }

    .investIndia > div > div:nth-child(2) img {
        max-height: 150px;
    }

    .investIndia > div > div:nth-child(3) {
        order: 2;
        position: relative;
        left: auto;
        bottom: auto;
        top: auto;
        margin: 0 auto;
        max-width: 100%;
        padding: 30px 20px 30px 80px;
        text-align: left;
    }

    .investIndia > div > div:nth-child(3) p {
        text-align: left;
        margin: 0;
    }

    .investmentQuote span:nth-child(1) {
        left: 20px;
    }

    .investmentQuote span img {
        width: 40px;
        min-width: 40px;
    }

    .investIndia {
        height: auto;
        background-size: cover;
    }

    .propertyType {
        width: auto;
    }

    .overlay {
        font-size: 18px;
    }

    .whyUS {
        background: url(/static/images/whyus-bg.png) no-repeat center 0;
        height: 820px;
        position: relative;
    }

    .whyUS:after {
        content: "";
        background: url(/static/images/whyus-img.png) no-repeat 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 366px;
        height: 408px;
        display: block;
    }

    .mbl-bg {
        height: 48px;
        width: 100%;
        margin: 0;
        padding: 8px 16px;
        position: absolute;
        top: -48px;
        z-index: 10;
        left: 0;
    }

    .mbl-bg-blur {
        height: 48px;
        overflow: hidden;
        width: 100%;
        background: rgba(0, 0, 0, 0.15);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }

    .mbl-bg-blur > span {
        background-position: 0 100%;
        height: 48px;
        filter: blur(6px);
        width: 100%;
        display: block;
        background-size: 100% auto;
    }

    .mbl-bg > span {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        height: 32px;
    }

    .mbl-bg > span > i {
        background-color: transparent;
    }

    .mbl-bg > span > i > img {
        width: 20px;
    }

    .heart {
        position: absolute;
        top: 20px;
        right: 16px;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.15);
        padding: 6px;
    }

    .propertyFeatures > div:nth-child(1) {
        order: 5;
    }
}

.property-image-container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* This sets a 4:3 aspect ratio. Adjust as needed. */
    overflow: hidden;
}

.property-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* Ensure image is centered both horizontally and vertically */
}

/* Override for flex container */
.property-image-container.flex {
    padding-top: 0; /* Remove padding-top for flex containers */
    height: 100%; /* Set explicit height */
}

.property-image-container.flex .property-image {
    position: relative; /* Reset position for flex children */
}

.browseCarouselImg > .carousel-container {
    height: 580px; /* Adjust this value as needed */
}

.browseCarouselImg > .carousel-container .react-multi-carousel-item {
    height: 100%;
}

.browseCarouselImg > .carousel-container .react-multi-carousel-track {
    height: 100%;
}

@media (min-width: 1025px) {
    .browseCarouselImg > .carousel-container {
        height: 368px; /* Match the height of the thumbnail grid (2x180px + 8px gap) */
    }

    .browseCarouselThumb {
        grid-template-rows: repeat(2, 180px);
    }

    /* Ensure the container maintains proper ratio on desktop */
    .property-image-container {
        padding-top: 368px; /* Fixed height to match thumbnails */
    }
}

@media (max-width: 1024px) {
    .browseCarouselImg > .carousel-container {
        height: auto;
    }

    .browseCarouselImg ul li img {
        min-height: auto;
    }

    .browseCarouselThumb {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .browseCarouselThumb > div {
        flex: 0 0 auto;
        width: 242px;
        height: 150px !important; /* Using !important to ensure this height is applied */
        min-height: 150px !important; /* Override any min-height settings */
    }
}

.article-body ol {
    list-style-type: decimal;
    padding-left: 20px;
}

.article-body b {
    font-weight: 600;
    font-size: large;
}

.article-body img {
    width: 70%;
    margin: 1rem auto;
}

.browseCarouselThumb .overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Gallery modal image styling */
.gallery-modal-wrapper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.gallery-dialog {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.gallery-carousel-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.gallery-image-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.gallery-thumbnail-image {
    border-radius: 10px;
    display: block;
    height: 100%;
    margin: auto;
    width: 100%;
    object-fit: cover;
}

/* Fix thumbnails on desktop - critical rules with high specificity */
@media (min-width: 1025px) {
    /* Force the main gallery layout */
    .modalBody {
        display: flex !important;
        flex-direction: row !important;
        gap: 28px !important;
    }

    /* Control main carousel width */
    .modalBody .react-multi-carousel-list,
    .modalBody .react-multi-carousel-list.GalleryCarousel {
        width: calc(100% - 208px) !important;
    }

    /* Control thumbnail list positioning */
    .modalBody .react-multi-carousel-dot-list {
        width: 208px !important;
        display: grid !important;
        gap: 15px !important;
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        height: 500px !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding-right: 10px !important;
    }

    /* Ensure gallery dots are visible */
    .gallery-dot-list,
    .react-multi-carousel-dot-list {
        display: grid !important;
    }

    /* Fix for specific class that may be used */
    ul.react-multi-carousel-dot-list {
        display: grid !important;
    }

    /* Ensure dots are properly styled */
    .modalBody .react-multi-carousel-dot {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 10px 0 !important;
    }

    .modalBody .react-multi-carousel-dot button {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Fix thumbnail image sizing */
    .modalBody .react-multi-carousel-dot-list img.gallery-thumbnail-image {
        height: 120px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Style for active/inactive thumbnails */
    .modalBody .react-multi-carousel-dot--active img.gallery-thumbnail-image {
        border: 2px solid #833cf5 !important;
    }

    .modalBody .react-multi-carousel-dot .inactive {
        background: rgba(255, 255, 255, 0.5) !important;
    }
}

/* Modal responsive styles */
@media (max-width: 1024px) {
    .gallery-image-container {
        height: 300px;
    }

    .modal-body .react-multi-carousel-list {
        width: 100% !important;
    }

    .gallery-dot-list {
        display: none !important;
    }

    /* Fix modal width */
    .react-responsive-modal-modal {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    /* Fix modal container */
    .react-responsive-modal-container {
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Fix modal overlay */
    .react-responsive-modal-overlay {
        overflow: hidden !important;
    }
}

/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
    .gallery-image-container {
        height: 250px;
    }

    .react-responsive-modal-modal {
        width: 90% !important;
        padding: 10px !important;
    }
}

/* Improve modal styling for mobile */
@media (max-width: 767px) {
    /* Only apply block display to modalBody on mobile */
    .modalBody {
        display: block !important;
        padding: 0;
        overflow: hidden;
    }

    /* Hide the thumbnails completely on mobile */
    .modalBody .react-multi-carousel-dot-list {
        display: none !important;
    }

    /* Make the carousel take full width on mobile */
    .modalBody .react-multi-carousel-list {
        width: 100% !important;
    }

    .modalTitle {
        padding: 0 0 10px;
    }

    .modalTitle h3 {
        font-size: 16px;
    }

    /* Ensure arrows are visible but not too large */
    .react-multi-carousel-list button {
        z-index: 10 !important;
    }

    /* Additional styling for carousel buttons on mobile */
    .react-multi-carousel-list button.react-multiple-carousel__arrow {
        min-width: 30px !important;
        min-height: 30px !important;
        background: rgba(255,255,255,0.7) !important;
        border-radius: 50% !important;
    }

    .react-multi-carousel-list button.react-multiple-carousel__arrow::before {
        font-size: 12px !important;
        color: #833cf5 !important;
    }

    /* Position the buttons properly */
    .react-multi-carousel-list button.react-multiple-carousel__arrow--left {
        left: 5px !important;
    }

    .react-multi-carousel-list button.react-multiple-carousel__arrow--right {
        right: 5px !important;
    }
}

highlight {
    font-weight: bold;
    color: #833cf5;
}