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

body {
    background: var(--body-bg-color) !important;
    font-family: var(--font-family) !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-size: 22px;
    color: var(--text-black);
    margin-bottom: 0 !important;
}

p {
    font-size: 16px;
    color: var(--text-paragraph-color);
}

ul {
    padding: 0 !important;
}

li {
    list-style: none !important;
}

a {
    text-decoration: none !important;
}

header {
    width: 100%;
    padding-top: 10px;
    position: absolute;
    z-index: 2;
}

.header_flex .header_logo {
    height: 80px;
}

.header_flex .header_logo .logo {
    width: 100%;
    height: 100%;
}

.header_flex {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
}

.header_flex .navbar {
    display: flex;
    gap: 25px;
    margin-right: 10px;
    margin-bottom: 0 !important;
    margin-top: 15px;
}

.header_flex ul li a {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
}


.navbar li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 0%;
    height: 2px;
    background-color: #425492;
    transition: width 0.3s ease;
}

.navbar li a.navActive::after {
    width: 100%;
}

.navbar li {
    position: relative;
}




.bars_icon {
    display: none;
    background: transparent;
    border: 2px solid var(--bg-white);
    border-radius: 4px;
    padding: 0px 8px;
    font-size: 20px;
    color: var(--text-white) !important;
}

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

.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
}

.offcanvas-body ul li {
    margin-bottom: 4px;
    padding: 6px 0;
}

.offcanvas-body ul li a {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.offcanvas-body ul li a:hover {
    color: var(--text-black) !important;
}





.hero_section {
    width: 100%;
    height: 650px;
    background-image: url("../images/hero_bg_img.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* .hero_section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%; 
  background-image: url("../images/overlay_banner.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2; 
}

.hero_section > * {
  position: relative;
  z-index: 3;
} */


.hero_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 95vh;
    text-align: center;
}

.hero_content h2 {
    width: 60%;
    font-size: 45px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 18px !important;
}

.hero_content p {
    color: var(--text-white);
    font-size: 18px;
    width: 62%;
}

.button_flex {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.button_flex button {
    border: none;
    background: transparent;
}

.button_flex .left_button {
    background: var(--button-bg-color);
    color: var(--text-white);
    padding: 8px 40px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button_flex .left_button:hover {
    background: transparent;
    border: 2px solid var(--button-bg-color);
    color: var(--button-bg-color);
}

.button_flex .right_button {
    background: var(--bg-white);
    color: var(--text-dark-black);
    padding: 8px 40px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button_flex .right_button:hover {
    background: transparent;
    border: 2px solid var(--bg-white);
    color: var(--bg-white);
}

/* about section styling */
.about_section {
    width: 100%;
    padding: 40px 0;
}

.about_area {
    width: 100%;
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(to bottom, #C3DFED, #DFF0F7);
    display: flex;
    gap: 20px;
    align-items: center;
}

.custom_text {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-black);
}

.custom_text span {
    color: var(--text-light-color);
}

.about_area p {
    font-size: 18px;
}

.about_area a {
    color: var(--text-light-color) !important;
    font-weight: 600;
}

.about_area .about_img {
    width: 90%;
    height: 90%;
}

.about_area .about_img img {
    width: 100%;
    height: 100%;
}

/* Recommended Projects section styling start */
.recommended_section {
    width: 80%;
    margin: 0 auto;
    padding: 40px 0;
}

.recommended_content {
    text-align: center;
}

.custom_text {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-black);
}

.custom_text span {
    color: var(--text-light-color);
}

.recommended_content p {
    font-size: 18px;
}

.filter_box {
    width: 100%;              
    max-width: 100%;       
    height: 55px;
    padding: 0 20px;
    background: #F0EFFB;
    border-radius: 8px;
    border: 1.5px solid #DEDEDE;
    margin-top: 25px;
    display: flex;
    gap: 20px;
    align-items: center;
    overflow-x: auto;         
    overflow-y: hidden;
    white-space: nowrap;      
    scrollbar-width: thin;    
}


.filter_box::-webkit-scrollbar {
    height: 6px;
}

.filter_box::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.filter_box .icon_flex {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 4px 6px;
    transition: all 0.3s ease;
}

.filter_box .icon_flex.active {
    background: #f7c04a;
    color: #000;
}

.filter_box .icon_flex i {
    font-size: 16px;
    color: var(--text-black);
    opacity: .5;
}

.filter_box .icon_flex h2 {
    font-size: 16px;
    color: var(--text-black);
    opacity: .5;
    font-weight: 500;
}

.filter_box .icon_flex:hover,
.filter_box .icon_flex.active {
    background: var(--bg-white);
    border-radius: 4px;
}

.filter_box .icon_flex:hover h2,
.filter_box .icon_flex:hover i,
.filter_box .icon_flex.active i,
.filter_box .icon_flex.active h2 {
    color: var(--text-light-color);
    opacity: 1;
}

.recommended_boxes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.recommended_custom_box {
    display: none;
}

.recommended_boxes .recommended_box {
    width: 100%;
    height: auto;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
}

.recommended_boxes .recommended_box .recommended_image {
    width: 100%;
    height: 200px;
}

.recommended_boxes .recommended_box .recommended_image img {
    width: 100%;
    height: 100%;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.recommended_boxes .recommended_box .recommended_popular {
    width: 38%;
    height: 30px !important;
    background: var(--popular-bg-color);
    padding: 6px;
    display: flex;
    gap: 5px;
    align-items: center;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 0px;
    position: absolute;
    top: 48%;
    left: -10px;
}

.recommended_boxes .recommended_box .recommended_popular img {
    width: 22px;
    height: 15px;
}

.recommended_boxes .recommended_box .recommended_popular span {
    color: var(--text-white);
    font-weight: 600;
    font-size: 14px;
}

.recommended_boxes .recommended_box .recommended_text {
    padding: 0 10px;
    margin-top: 30px;
    overflow: hidden;
}

.recommended_boxes .recommended_box .recommended_text h2 {
    font-size: 20px;
    color: var(--text-light-color);
    font-weight: 600;
    margin-bottom: 6px !important;
}

.recommended_boxes .recommended_box .recommended_text span {
    font-size: 16px;
    color: var(--text-black);
    opacity: .5;
    font-weight: 500;
}

.recommended_boxes .recommended_box .recommended_text h3 {
    font-size: 24px;
    color: var(--text-black);
    font-weight: 700;
    margin-bottom: 6px !important;
    height: 52px;
}

.recommended_boxes .recommended_box .recommended_text p {
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1.5px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 0 !important;
}

.recommended_boxes .recommended_box .recommended_text .recommended_icon_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    transition: all 0.4s ease;
}

.recommended_boxes .recommended_box .recommended_text .recommended_icon_flex .recommended_icon_flex_ {
    display: flex;
    align-items: center;
    gap: 5px;
}

.recommended_boxes .recommended_box .recommended_text .recommended_icon_flex .recommended_icon_flex_ img {
    width: 20px !important;
}

.recommended_boxes .recommended_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 10px rgba(88, 180, 233, .3);
}

/* .recommended_boxes .recommended_box:hover .recommended_text .recommended_icon_flex {
    background: var(--button-bg);
} */

/* Explored Our Properties styling start */
.explored_section {
    width: 100%;
    background: var(--explored-bg-color);
    padding: 40px 0;
}

.explored_box_image {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.explored_box_image img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.explored_box_image {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

/* Image Styling */
.explored_box_image img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.explored_box_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    pointer-events: none;
    transition: background 0.3s ease;
}

.explored_box_image:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

.explored_box_image .explored_rent {
    position: absolute;
    top: 10px;
    left: 10px;
    border: none;
    background: #429283;
    color: var(--text-white);
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 6px;
    margin-bottom: 0 !important;
    z-index: 99;
}

.explored_box_image .explored_buy {
    background: #425492;
}

.explored_box_image .explored_overly {
    width: 100%;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
}

.explored_box_image .explored_overly .explored_overly_flex {
    display: flex;
    gap: 5px;
    align-items: center;
}

.explored_box_image .explored_overly .explored_overly_flex img {
    width: 20px;
}

.explored_box_image .explored_overly .explored_overly_flex span {
    color: var(--text-white);
}

.explored_box h2 {
    font-size: 20px;
    color: var(--text-dark-black);
    margin-top: 5px;
    font-weight: 700;
}

.explored_box p {
    margin-top: 6px;
    font-weight: 500;
}


/* Explore Nearby Locations section styling start */
.locations_section {
    width: 100%;
    padding: 40px 0;
}

.locations_section .locations_text {
    text-align: left !important;
}

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

.locations_section .locations_images .small_img {
    display: flex;
    gap: 20px;
    position: relative;
}

.locations_section .locations_images .small_image,
.locations_section .locations_images .big_img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.locations_section .locations_images .small_image::after,
.locations_section .locations_images .big_img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.locations_section .locations_images .small_image::before,
.locations_section .locations_images .big_img::before {
    content: "Explore Now";
    position: absolute;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
    transition: all 0.5s ease;
}

.locations_section .locations_images .small_image:hover img,
.locations_section .locations_images .big_img:hover img {
    transform: scale(1.1);
}

.locations_section .locations_images .small_image:hover::after,
.locations_section .locations_images .big_img:hover::after {
    opacity: 1;
}

.locations_section .locations_images .small_image:hover::before,
.locations_section .locations_images .big_img:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.locations_section .locations_images .small_img img,
.locations_section .locations_images .big_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.locations_section .locations_images .small_image {
    width: 100%;
    height: 100%;
    position: relative;
}

.locations_section .locations_images .text {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
}

.locations_section .locations_images .text p {
    margin-bottom: 0 !important;
    color: var(--text-white);
    font-size: 16px;
    font-weight: 500;
}

.locations_section .locations_images .text h2 {
    font-size: 26px;
    color: var(--text-white);
    font-weight: 600;
    margin-bottom: 0 !important;
}

/* Client Testimonials section styling start */
.testimonials_section {
    width: 100%;
    background: var(--explored-bg-color);
    padding: 40px 0;
}

.testimonials-carousel .item {
    width: 45%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 50px 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.testimonials-carousel .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.testimonials-carousel .quote {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.quote-icon {
    color: var(--text-black) !important;
    font-size: 24px;
    opacity: 0.3;
}

.quote-left {
    position: absolute;
    top: 50px;
    left: 9px;
}

.quote-right {
    position: absolute;
    bottom: 135px;
    right: 8px;
}

.testimonials-carousel .client-name {
    font-weight: 600;
    color: #0f172a;
}

.testimonials-carousel .client-role {
    color: #64748b;
    font-size: 14px;
}

.owl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 15px;
}

.owl-nav button {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.owl-nav button:hover {
    background: var(--text-light-color) !important;
    color: #fff !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.owl-nav button:hover span {
    color: var(--text-white) !important;
}

.owl-nav button i {
    pointer-events: none;
}

.owl-nav button span {
    font-size: 34px;
    color: var(--text-light-color) !important;
}




















/* newslatter_section styling */
.newslatter_section {
    width: 100%;
    padding: 50px 0;
}

.newslatter_section .subscribe {
    width: 100%;
    margin: 0 auto;
    padding: 20px 35px;
    border-radius: 16px;
    background: linear-gradient(to bottom, #C3DFED, #DFF0F7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.newslatter_section .subscribe h1 {
    font-size: 30px;
    color: var(--text-black);
    font-weight: 600;
}

.newslatter_section .subscribe h1 span {
    color: var(--text-light-color);
}

.newslatter_section .subscribe p {
    color: var(--text-black);
    font-size: 18px;
    font-weight: 500;
}

.input_section {
    display: flex;
}

.input_section input {
    background: #FFFFFF4D;
    border: none;
    padding: 20px 0;
    padding-left: 20px;
    width: 400px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    outline: none;
}

.input_section input::placeholder {
    color: var(--text-black);
}

.input_section .subscribe_btn {
    width: fit-content;
    border: none;
    padding: 0 10px;
    background: var(--popular-bg-color);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    color: var(--text-white);
    transition: all 0.3s ease;
}

.input_section .subscribe_btn:hover {
    background: #ca1527;

}



/* footer section styling */
footer {
    width: 100%;
    padding-top: 40px;
    background-image: url("../images/footer_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

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

footer .footer-img img {
    width: 180px;
}

footer .footer-img p {
    font-size: 17px;
    margin-top: 10px;
    color: var(--text-color);
}

.offcanvas-body .socail_media {
    display: flex;
    gap: 20px;
    align-items: center;
}

footer .footer-flex .socail_media {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: end;
}

.offcanvas-body .socail_media .socail_media_circle,
footer .footer-flex .socail_media .socail_media_circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.offcanvas-body .socail_media .socail_media_circle:hover,
footer .footer-flex .socail_media .socail_media_circle:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    transform: translateY(-3px);
    background: var(--primary-color);
}

.offcanvas-body .socail_media .socail_media_circle img,
footer .footer-flex .socail_media .socail_media_circle img {
    width: 20px;
}

.offcanvas-body .socail_media .socail_media_circle:hover img,
footer .footer-flex .socail_media .socail_media_circle:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7496%) hue-rotate(193deg) brightness(90%) contrast(118%);
}

.offcanvas-body .socail_media .socail_media_circle .facebook,
footer .footer-flex .socail_media .socail_media_circle .facebook {
    width: 12px;
}

footer .socail-media-link ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: end;
    margin-top: 20px;
}

footer .socail-media-link ul li a {
    font-size: 18px;
    color: var(--navbar-color);
    font-weight: 500;
    text-decoration: none !important;
}

footer .socail-media-link ul li a:hover {
    color: var(--navbar-hover-color);
}

footer .socail-media-link ul span {
    color: var(--text-color) !important;
}

footer .bottom_text {
    border-top: 1.5px solid var(--bg-white);
    color: var(--text-white) !important;
    font-weight: 500;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 0 !important;
}

footer .bottom_text a {
    color: var(--text-white) !important;
    text-decoration: underline !important;
}


/* about page section styling start */
.same_section {
    width: 100%;
    height: 280px;
    background-image: url("../images/hero_bg_img.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* .same_section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  background-image: url("../images/overlay_banner.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2; 
}

.same_section > * {
  position: relative;
  z-index: 3;
} */

.same_section h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-white);
    margin-top: 90px;
}

.same_section p {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white);
}

.about_verify_section {
    width: 100%;
    padding: 20px 0;
}

.about_verify_section .about_verify_boxes {
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.about_verify_section .about_verify_boxes .about_verify_box {
    width: 100%;
    padding: 35px 15px;
    border-radius: 6px;
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease;
}

.about_verify_section .about_verify_boxes .about_verify_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(88, 180, 233, .2);
}

.about_verify_section .about_verify_boxes .about_verify_box .circle_icon {
    width: 50px;
    height: 50px;
    background: var(--light-yellow-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    margin-bottom: 20px;
}

.about_verify_section .about_verify_boxes .about_verify_box .circle_icon img {
    width: 35px;
}

.about_verify_section .about_verify_boxes .about_verify_box h2 {
    font-size: 22px;
    font-weight: 600;
    height: 40px;
    color: var(--text-black);
}

.about_verify_section .about_verify_boxes .about_verify_box h2 span {
    color: var(--text-light-color);
}

.about_verify_section .about_verify_boxes .about_verify_box p {
    font-size: 15px;
    margin-bottom: 0 !important;
    text-align: center;
}

/* Meet The Team section styling */
.team_section {
    width: 100%;
    padding: 30px 0;
    background: #DEDEDE99;
}

.team_content_section {
    display: flex;
    align-items: center;
    gap: 40px;
}

.team_content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.team_content h2 span {
    color: #0ea5e9;
}

.team_content p {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    max-width: 400px;
}

.team_images {
    display: flex;
    align-items: stretch;
    height: 400px;
    width: 700px;
    border-radius: 12px;
    overflow: hidden;
    gap: 10px;
}

.team_img {
    position: relative;
    width: 100px;
    /* default for all */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s ease;
}

/* Default first image expanded */
.team_img:first-child {
    width: 400px;
}


/* When hovering over container, shrink all */
.team_images:hover .team_img {
    width: 100px;
}

/* When hovering a specific image, expand it */
.team_images .team_img:hover {
    width: 400px;
}

/* Image styling */
.team_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

/* Overlay */
.team_overlay {
    position: absolute;
    inset: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.team_overlay .team_overlay_text {
    display: flex;
    flex-direction: column;
}

.team_images:hover .team_overlay_text p {
    transform: rotate(0deg);
}

.team_img:hover .team_overlay {
    justify-content: space-between;
    align-items: start;
    background: rgba(0, 0, 0, 0.5);
}

.team_img:first-child .team_overlay_text h3 {
    transform: rotate(0deg);
}

.team_overlay h3 {
    font-size: 16px;
    margin: 0;
    letter-spacing: 1px;
    color: var(--text-white);
    transform: rotate(-90deg);
    width: 100%;
    margin-bottom: 20px !important;
}

.team_overlay p {
    font-size: 13px;
    margin: 0;
    color: var(--text-white);
}

.team_images:hover h3 {
    transform: rotate(0deg);
}

/* contact styling start */
.text_heading {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-dark-black);
}

.text_heading span {
    color: var(--text-light-color);
}

.contact_color {
    color: var(--text-dark-black);
    transition: all 0.4s ease;
}

.contact_color:hover {
    color: var(--text-light-color);
}

.contact_form select {
    width: 100%;
    border: none !important;
    outline: none !important;
    padding: 10px 14px;
    border-radius: 4px;
    background: var(--form-bg-color) !important;
}

.contact_form select:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.contact_form textarea,
.contact_form input {
    width: 100%;
    border: none !important;
    outline: none !important;
    background: var(--form-bg-color) !important;
    padding: 10px 14px;
    border-radius: 4px;
}

.contact_img {
    width: 95%;
    height: 240px;
    border-radius: 10px;
}

.contact_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.custom_button {
    text-decoration: none;
    width: fit-content;
    border: none;
    background: var(--bg-light-color);
    color: var(--text-white);
    transition: all 0.5s ease;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    border: 2px solid transparent;
}

.custom_button:hover {
    border: 2px solid var(--bg-light-color);
    background: transparent;
    color: var(--text-light-color);
}

.map_section {
    width: 100%;
    height: 450px;
}

.map_section iframe {
    width: 100%;
    height: 100%;
}

.dropdown {
    position: relative;
}

.filter_dropdowns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.dropdown_box {
    position: relative;
}

.filter_flex_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.dropdown_box select {
    width: 208px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--form-bg-color);
    color: var(--text-black);
    border: none;
    padding: 9px 25px 9px 34px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    opacity: .5;
    font-weight: 500;
    border: 1.5px solid #DEDEDE;
}

.dropdown_box::after {
    content: "\f107";
    /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-dark-black);
    opacity: .6;
}

.dropdown_box select:focus+.dropdown_box::after,
.dropdown_box:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Left-side icon */
.icon_left {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--text-black);
    font-size: 16px;
    pointer-events: none;
    z-index: 99;
    opacity: .5;
}

.recommended_text_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.recommended_text_flex .heart_circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #DEDEDE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommended_text_flex .heart_circle i {
    color: var(--text-black);
    opacity: .6;
}

.view_more_btn {
    width: 150px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    border: none;
    background: var(--button-bg);
    color: var(--text-white);
    padding: 8px 30px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.view_more_btn:hover {
    background: #e3af2c;
}

.recommended_custom_box:nth-child(-n+3) {
    display: block;
}


/* Rentals section styling start */
.rentals_section {
    width: 100%;
    padding: 40px 0;
    background: linear-gradient(to bottom, #b4d7e8, #DFF0F7);
}

.rentals_section h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-black);
    text-align: center;
}

.rentals_section h2 span {
    color: var(--text-light-color);
}

.rentals_section p {
    text-align: center;
}

.rentals_flex_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    margin-top: 40px;
}

.rental_box {
    width: 100%;
    padding: 10px;
    background: #EDFDFF;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1.5px solid #DEDEDE;
    transition: all 0.4s ease;
}

.rental_box:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.rental_box .rental_img {
    width: 220px;
    height: 150px;
    border-radius: 6px;
}

.rental_box .rental_img img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.rental_content h2 {
    font-size: 22px;
    font-weight: 600;
    text-align: start !important;
    color: var(--text-light-color) !important;
    margin-bottom: 6px !important;
}

.rental_content h2 span {
    color: var(--text-dark-black) !important;
    opacity: .6;
    font-size: 18px;
}

.rental_content h3 {
    font-size: 20px;
    font-weight: 600;
    text-align: start !important;
    margin-bottom: 6px !important;
}

.rental_content p {
    font-size: 16px;
    font-weight: 500;
    text-align: start !important;
}

.rental_content .recommended_icon_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.recommended_icon_flex_ {
    display: flex;
    align-items: center;
    gap: 3px;
}







/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 998;
}

.overlay.formActive {
    opacity: 1;
    visibility: visible;
}

/* Form Panel */
.form-container {
    position: fixed;
    top: 0;
    right: -400px;
    /* hidden position */
    width: 400px;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    box-sizing: border-box;
    transition: right 0.5s ease;
    z-index: 999;
    display: none;
    overflow-y: auto;
}

.form-container.formActive {
    right: 0;
    /* slide in */
}

.form-container h2 {
    margin-top: 0;
    font-size: 22px;
    text-align: center;
    color: #333;
}

.form-container input,
.form-container textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
}

.form-container button.submit-btn {
    width: 100%;
    background: #007bff;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    float: right;
    cursor: pointer;
}

@media (max-width: 480px) {
    .form-container {
        width: 100%;
    }
}






@media (max-width: 768px) {
    .nav_links {
        display: none;
    }

    .bars_icon {
        display: block;
    }

    .team_content_section {
        flex-direction: column;
    }

    .team_images {
        height: 300px;
    }

    .team_img {
        flex: 1 !important;
    }

    .image_flex {
        flex-direction: column;
        gap: 20px;
    }

    .left_image {
        width: 100%;
        height: 350px;
    }

    .right_image_flex {
        display: flex;
        gap: 20px;
    }

    .living-section {
        width: 100%;
        padding-bottom: 20px;
    }

    .living_flex {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .living-content {
        flex: 1;
        width: 80%;
        margin: 0 auto;
    }

    .right_margin {
        margin-top: 0px !important;
    }

}

@media (max-width: 568px) {
    .hero_section {
        height: 500px;
    }

    .hero_content {
        height: 60vh;
    }

    .hero_content h2 {
        font-size: 22px;
        font-weight: 600;
        color: var(--text-white);
        margin-bottom: 10px !important;
    }

    .hero_content p {
        color: var(--text-white);
        font-size: 12px;
    }

    .about_area {
        flex-direction: column;
    }

    .about_area .about_img {
        width: 100%;
        height: 90%;
    }

    .custom_text {
        font-size: 22px;
    }

    .recommended_content p {
        font-size: 15px;
    }

    .recommended_boxes {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 40px;
    }

    .locations_section .locations_images {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .newslatter_section .subscribe {
        flex-direction: column;
        gap: 10px;
    }

    .testimonials-carousel .item {
        width: 80%;
    }

    .filter_box {
        width: 100%;
        height: 45px;
        overflow-x: auto;
    }

    .recommended_boxes {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 40px;
    }

    .input_section input {
        padding: 14px 0;
        padding-left: 10px;
        width: 236px;
    }

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

    .offcanvas-body .socail_media {
        justify-content: start;

    }

    footer .footer-flex .socail_media {
        justify-content: center;
    }

    footer .socail-media-link ul {
        justify-content: center;
        margin-top: 20px;
    }

    .newslatter_section .subscribe p {
        font-size: 15px;
    }

    .button_flex .left_button {
        padding: 8px 25px;
        font-size: 16px;
    }

    .about_verify_section .about_verify_boxes {
        width: 95%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        overflow-x: auto;
    }

    .about_verify_section .about_verify_boxes .about_verify_box {
        width: 100%;
        padding: 35px 15px;
        width: 250px;
    }

    .filter_flex_box {
        flex-direction: column;
        gap: 0;
    }

    .rentals_flex_area {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        width: 100%;
        margin: 0 auto;
        margin-top: 40px;
    }

    .rental_box {
        width: 100%;
        padding: 10px;
        background: #EDFDFF;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        border: 1.5px solid #DEDEDE;
        transition: all 0.4s ease;
    }

    .rental_box .rental_img {
        width: 100%;
        height: 200px;
        border-radius: 6px;
    }

    .rental_content {
        width: 100%;
    }

    .same_section h2 {
        font-size: 22px;
        margin-bottom: 8px !important;
        margin-top: 90px;
    }

    .recommended_boxes .recommended_box .recommended_text h3 {
        font-size: 20px;
    }

    .rentals_section h2 {
        font-size: 22px;
        font-weight: 600;
        color: var(--text-black);
        text-align: center;
    }

    .newslatter_section .subscribe h1 {
        font-size: 22px;
        margin-bottom: 5px !important;
    }

    .newslatter_section .subscribe p {
        font-size: 14px;
    }

    .bg_color_1 {
        background: #585981;
        bottom: 50%;
    }

    .bg_color_2 {
        background: var(--popular-bg-color);
        bottom: 45%;
    }

    .dropdown_box select {
        width: 260px;
    }

    .team_images {
        width: 100%;
        height: auto;
        overflow-x: auto;
    }

    .team_img {
        width: 100%;
        height: 220px;
    }

    .team_img:first-child {
        width: 200px;
    }

    .team_images:hover .team_img,
    .team_images .team_img:hover {
        width: 100px;
    }

    .team_overlay h3 {
        transform: rotate(0deg);
        font-size: 15px;
    }

    .team_overlay p {
        font-size: 12px;
    }

    .recommended_boxes .recommended_box .recommended_text span {
        font-size: 14px;
    }

    .recommended_boxes .recommended_box .recommended_text p {
        font-size: 14px;
    }

    .same_section {
        width: 100%;
        height: 250px;
        background-image: url("../images/hero_bg_img.png");
        background-repeat: no-repeat;
        background-size: inherit;
    }

    .filter_dropdowns {
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    .left_image {
        width: 100%;
        height: 300px !important;
    }

    .content h1 {
        font-size: 24px !important;
    }

    .recommended_popular {
        bottom: 100px;
    }

    .product_detail_section {
        width: 100%;
        padding: 20px 0 !important;
    }

    .right_image_flex {
        display: flex;
        gap: 20px;
    }

    .right_content h2 {
        font-size: 20px !important;
    }

    .living-section {
        width: 100%;
        padding-bottom: 20px !important;
    }

    .living-content h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }

    .living_flex {
        flex-direction: column;
        gap: 20px !important;
        align-items: center;
    }

    .living-content {
        flex: 1;
        width: 80%;
        margin: 0 auto;
    }

    .features-grid {
        display: grid;
    	
    }

    .features-section {
        padding: 20px 0 !important;
    }

    .faq-section h2 {
        font-size: 22px !important;
    }

    .features-section h2 {
        font-size: 20px !important;
    }

    .faq-container {
        width: 100% !important;
    }

    .faq-question {
        font-size: 16px !important;
    }

    .faq-answer {
        font-size: 14px !important;
    }

    .newslatter_section {
        width: 100%;
        padding: 20px 0 !important;
    }

    .faq-section {
        width: 100%;
        margin: 20px 0px !important;
        padding: 0 20px;
    }

    .enquiry-box {
        width: 100% !important;
    }

    .enquiry-box h3 {
        font-size: 20px !important;
    }

    .enquiry-box button {
        padding: 6px !important;
        font-size: 16px !important;
    }

    .recommended_boxes .recommended_box .recommended_image {
        width: 100%;
        height: 230px;
    }
    .right_content h2 {
        font-size: 18px !important;
    }
}

@media (max-width: 400px) {
    .same_section h2 {
        font-size: 22px;
        margin-bottom: 8px !important;
    }

    .same_section p {
        font-size: 16px;
    }

    .button_flex .right_button {
        font-size: 16px;
        padding: 8px 16px;
    }

    .recommended_boxes {
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 40px;
    }

    .filter_box {
        width: 100%;
        height: 45px;
        overflow-x: auto;
    }

    .locations_section .locations_images .small_img {
        flex-direction: column;
    }

    .testimonials-carousel .item {
        width: 90%;
    }

    .input_section input {
        padding: 14px 0;
        padding-left: 10px;
        width: 236px;
    }

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

    .offcanvas-body .socail_media {
        justify-content: start;

    }

    footer .footer-flex .socail_media {
        justify-content: center;
    }

    footer .socail-media-link ul {
        justify-content: center;
        margin-top: 20px;
    }

    .recommended_boxes .recommended_box .recommended_text h3 {
        font-size: 20px;
    }

    .recommended_boxes .recommended_box .recommended_text {
        padding: 0 5px;
    }

    .filter_flex_box {
        flex-direction: column;
        gap: 0;
    }

    .rentals_section h2 {
        font-size: 22px;
        font-weight: 600;
        color: var(--text-black);
        text-align: center;
    }

    .rentals_flex_area {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        width: 100%;
        margin: 0 auto;
        margin-top: 40px;
    }

    .rental_box {
        width: 100%;
        padding: 10px;
        background: #EDFDFF;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        border: 1.5px solid #DEDEDE;
        transition: all 0.4s ease;
    }

    .rental_box .rental_img {
        width: 100%;
        height: 200px;
        border-radius: 6px;
    }

    .rental_content {
        width: 100%;
    }

    .locations_section .locations_images .text h2 {
        font-size: 22px;
    }

    .about_verify_section .about_verify_boxes {
        width: 95%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        overflow-x: auto;
    }

    .about_verify_section .about_verify_boxes .about_verify_box {
        width: 100%;
        padding: 35px 15px;
        width: 250px;
    }

    .team_images {
        width: 400px;
        display: flex;
        align-items: stretch;
        height: 400px;
        border-radius: 12px;
        overflow-x: auto;
        gap: 10px;
    }

    .newslatter_section .subscribe h1 {
        font-size: 22px;
        margin-bottom: 5px !important;
    }

    .newslatter_section .subscribe p {
        font-size: 15px;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px 60px;
        text-align: center !important;
        justify-content: center !important;
        width: 80% !important;
    }

    .living-content h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 480px) {
    .hero_content {
        height: 75vh;
    }
}

@media (max-width: 400px) {
    .hero_content {
        height: 85vh;
    }
}

@media (max-width: 350px) {
    .hero_content {
        height: 95vh;
    }
}

.offcanvas-menu {
    list-style: none;
    margin: 0;
}

.offcanvas-menu>li {
    margin-bottom: 8px;
}

.dropdown_toggle {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-white);
}

.dropdown_sab_menu {
    list-style: none;
    padding-left: 12px;
    margin: 6px 0 0 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
    /* background: var(--bg-white); */
}

.dropdown_sab_menu li {
    padding: 6px 0;
    color: var(--text-black) !important;
}

.has-dropdown.open>.dropdown_sab_menu {
    max-height: 600px;
    margin-left: 30px;
}

.has-dropdown.open .dropdown-icon {
    transform: rotate(180deg);
    transition: transform 200ms ease;
}

.dropdown-icon {
    transition: transform 200ms ease;
}

.has-dropdown .dropdown_toggle:focus {
    outline: none;
}


.ffcanvas-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--text-dark-black) !important;
}

.enquiry-form .form-label {
    font-weight: 600;
    color: var(--text-black);
    display: flex !important;
}

.enquiry-form .form-control {
    border-radius: 6px;
    box-shadow: none;
}

.enquiry-form .form-control:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.captcha-box {
    background: #f1f1f1;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    user-select: none;
}

.btn-primary {
    background-color: var(--button-bg) !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 0;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.captcha-section img {
    width: 150px;
}

.dropdown_box select option {
    font-size: 14px !important;
    font-weight: 500 !important;
}

.text_lowercase {
    text-transform: capitalize;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-wrapper select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 35px;
    cursor: pointer;
}

.custom-select-wrapper::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
}

.hover-dropdown button {
    border: none;
    background: transparent;
    color: var(--text-white);
    font-weight: 500;
    font-size: 18px;
}

.dropdown-menu a:active {
    background: transparent !important;
    color: var(--text-dark-black);
}

.dropdown-menu[data-bs-popper] {
    top: 164% !important;
    left: 0;
    margin-top: .125rem;
}



.footer_icons {
    display: flex;
    gap: 10px;
    position: fixed;
    right: 0;
    bottom: 40%;
    z-index: 999;
}

.footer_icons {
    width: 40px;
    height: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

/* 🔥 When hover, slide out smoothly without pushing others */
.footer_icons span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s ease;
    margin-right: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Hover effect */
.footer_icons:hover {
    width: 160px;
    justify-content: space-between;
    padding: 0 10px 0 15px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.footer_icons:hover span {
    opacity: 1;
    width: auto;
    margin-right: 10px;
}

/* Icon image styling */
.footer_bootom .footer_icons img {
    width: 25px;
}

/* Background colors */
.bg_color_1 {
    background: #585981;
    bottom: 55%;
}

.bg_color_2 {
    background: var(--popular-bg-color);
    bottom: 47.5%;
}

.bg_color_3 {
    background: #58b4e9;
}

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

.phone_nu span {
    font-size: 20px;
    font-weight: 700;
}

.phone_nu img {
    width: 30px;
}



/* product details section styling start */
.product_detail_section {
    width: 100%;
    padding: 40px 0;
}

.product_detail_section .recommended_icon_flex {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 20px;
}

.image_flex {
    display: flex;
    gap: 20px;
}

.left_image {
    width: 100%;
    height: 450px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.left_image::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.7) 100%);
    top: 0;
    left: 0;
}

.recommended_popular {
    position: absolute;
    bottom: 120px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--popular-bg-color);
    padding: 6px 10px;
    color: var(--text-white);
    font-size: 14px;
    font-weight: 500;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 0px;
}

.content {
    position: absolute;
    bottom: 40px;
    z-index: 2;
    padding: 0 30px;
}

.content h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-white);
}

.content h1 span {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-white);
    opacity: .7;
}

.left_image img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.right_imgae {
    width: 320px;
    height: 216px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.right_imgae::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.7) 100%);
    top: 0;
    left: 0;
}

.right_imgae img {
    height: 100%;
}



.right_content {
    position: absolute;
    bottom: 40px;
    z-index: 2;
    padding: 0 20px;
}

.right_content h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
}


.living-section {
    width: 100%;
    padding-bottom: 40px;
}

.living_flex {
    display: flex;
    gap: 40px;
    align-items: start;
}

.living-content {
    flex: 1;
    min-width: 300px;
    margin-top: 100px;

    height: 90vh; 
    overflow-y: auto;  
    padding-right: 10px;    
}

.living-content h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 25px !important;
    line-height: 1.4;
}

.living-content h2 span {
    color: var(--text-light-color);
    /* light blue */
}

.living-content p {
    font-size: 15px;
    color: var(--text-black);
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.living-features {
    font-size: 15px;
    color: var(--text-black);
}

.living-features i {
    color: var(--text-light-color);
    margin-right: 8px;
}

/* Right side form */
.enquiry-box {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 30px;
    border-radius: 6px;
    width: 450px;
    height: auto;
    flex-shrink: 0;

    position: sticky;
    top:20px;   /* distance from top while sticking */
}

.enquiry-box h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 20px !important;
}

.enquiry-box h3 span {
    color: var(--text-light-color);
}

.enquiry-box input {
    width: 100%;
    padding: 10px;
    margin-bottom:5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.enquiry-box input:focus {
    border-color: var(--text-light-color);
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-row .captcha_flex {
    display: flex;
    gap: 10px;
    margin-top: -6px;
}

.captcha-row .captcha_flex .refresh {
    cursor: pointer;
}

.enquiry-box button {
    width: 100%;
    background-color: var(--text-light-color);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background 0.3s;
    margin-top: 10px;
}

.enquiry-box button:hover {
    background-color: var(--text-light-color);
}

.features-section {
    background-color: #f5f5f5;
    padding: 40px 0px;
    text-align: center;
}

.features-section h2 {
    font-size: 26px;
    color: var(--text-black);
    margin-bottom: 40px;
    font-weight: 600;
}

.features-section h2 span {
    color: var(--text-light-color);
}

.features-grid {
       display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 60px;
    text-align: left;
    justify-content: center;
    max-width: 886px;
    margin: 0 auto;
    margin-top: 30px;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black);
}

.feature-item i {
    color: var(--text-light-color);
    margin-right: 10px;
    font-size: 16px;
}

.faq-section {
    width: 100%;
    margin: 40px 0px;
    padding: 0 20px;
}

.faq-section h2 {
    text-align: center;
    font-size: 28px;
    color: var(--text-black);
    font-weight: 600;
    margin-bottom: 40px;
}

.faq-container {
    width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    padding: 18px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.faq-item.active {
    background-color: #f4f7ff;
    border: 1px solid var(--text-light-color);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-black);
    font-size: 18px;
}

.faq-toggle {
    background: #f1f3ff;
    border-radius: 6px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--text-light-color);
    font-weight: bold;
    transition: 0.3s;
}

.faq-item.active .faq-toggle {
    background: var(--text-light-color);
    color: white;
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 16px;
    color: var(--text-black);
    margin-top: 8px;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.product_popular_section {
    width: 100%;
    padding: 50px 0;
    background: #DEDEDE99;
}

.product_popular_section h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-black);
}

.product_popular_section h2 span {
    color: var(--text-light-color);
}

.product_popular_section .recommended_box .recommended_popular {
    height: 30px !important;
}



.owl-theme .owl-nav {
    position: absolute;
    top: 40% !important;
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    transform: translateX(-50%);
}

.owl-theme .owl-nav button {
    background: #fff !important;
    color: #0ea5e9 !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    transition: 0.3s;
}

.owl-theme .owl-nav button:hover {
    background: #0ea5e9 !important;
    color: #fff !important;
}

.right_imgae,
.right_margin {
    width: 288px;
    height: 217px;
    position: relative;
    z-index: 1;
    overflow: hidden;
   
}

.right_margin .owl-carousel .item {
    width: 288;
    height: 225px;
}

.right_margin .owl-carousel .item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px;
}

.right_margin::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.7) 100%);
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.right_content {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: start;
    align-items: end;
    z-index: 3;
    padding-bottom: 24px;
}

.right_content h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.explored-carousel .owl-nav,
.right_margin .owl-nav {
    display: none !important;
}


.locations {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--button-bg-color);
    color: var(--text-white);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 16px;
}

.recommended_box.hide {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    transition: all 0.4s ease;
}

/* Smooth fade-in when reappearing */
.recommended_box.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: all 0.4s ease;
}
.recommended_box.hidden {
  display: none;
}



.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.gallery-modal.active {
    display: block;
}

.popup-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    border-radius: 8px;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: -40px;
    font-size: 40px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}
.gallery_carousel{
    width: 100%;
    height: 40%;
    overflow: hidden;
}

.gallery_carousel img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}