/*======================================
 HERO SECTION
=======================================*/

.apartment-section {

    position: relative;

    min-height: 100vh;

    background: url("../images/apparmants.png") center/cover no-repeat;

    overflow: hidden;

    display: flex;

    align-items: center;

}

/*=============================
Hero
=============================*/

.apartment-hero {

    position: relative;

    height: 100vh;

    background: url("../images/Project/Project\ Page\ Banner.jpg.jpeg") center/cover;

    overflow: hidden;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,

            rgba(0, 0, 0, .75),

            rgba(0, 0, 0, .45),

            rgba(0, 0, 0, .15));

}

.apartment-hero .container {

    position: relative;

    z-index: 2;

}

/* .hero-badge{

display:inline-block;

padding:10px 24px;

background:#0B4843;

color:#fff;

border-radius:40px;

margin-bottom:25px;

letter-spacing:2px;

text-transform:uppercase;

font-size:13px;

} */

.apartment-hero h1 {

    font-size: 70px;

    font-weight: 700;

    color: #fff;

    line-height: 1.1;

    margin-bottom: 25px;

}

.apartment-hero p {

    font-size: 20px;

    color: #f5f5f5;

    max-width: 620px;

    line-height: 1.8;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.hero-buttons .btn {

    padding: 16px 36px;

    border-radius: 50px;

    font-weight: 600;

    transition: .4s;

}

.hero-buttons .btn:hover {

    transform: translateY(-5px);

}

/*============================
Floating Card
============================*/

.hero-card {

    position: absolute;

    right: 6%;

    bottom: 8%;

    width: 360px;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .25);

    padding: 35px;

    border-radius: 25px;

    z-index: 3;

    color: #fff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);

}

.hero-card small {

    display: inline-block;

    margin-bottom: 12px;

    color: #d8f3ef;

    letter-spacing: 1px;

}

.hero-card h3 {

    margin-bottom: 25px;

    font-size: 28px;

}

.hero-info {

    display: flex;

    justify-content: space-between;

    margin-bottom: 30px;

}

.hero-info h4 {

    font-size: 32px;

    font-weight: 700;

}

.hero-info span {

    font-size: 14px;

    opacity: .9;

}

.enquire-btn {

    width: 100%;

    background: #0B4843;

    color: #fff;

    padding: 14px;

    border-radius: 50px;

}

.enquire-btn:hover {

    background: #fff;

    color: #0B4843;

}

/*============================
Scroll
============================*/

.scroll-down {

    position: absolute;

    left: 50%;

    bottom: 20px;

    transform: translateX(-50%);

    z-index: 3;

}

.scroll-down span {

    display: block;

    width: 28px;

    height: 48px;

    border: 2px solid #fff;

    border-radius: 30px;

    position: relative;

}

.scroll-down span::before {

    content: "";

    position: absolute;

    width: 6px;

    height: 6px;

    background: #fff;

    left: 50%;

    transform: translateX(-50%);

    top: 8px;

    border-radius: 50%;

    animation: scrollMove 2s infinite;

}

@keyframes scrollMove {

    0% {

        opacity: 1;

        top: 8px;

    }

    100% {

        opacity: 0;

        top: 28px;

    }

}

/*============================
Responsive
============================*/

@media(max-width:991px) {

    .apartment-hero {

        height: auto;

        padding: 120px 0 60px;

    }

    .apartment-hero h1 {

        font-size: 46px;

    }

    .hero-card {

        position: relative;

        right: auto;

        bottom: auto;

        margin: 50px auto 0;

        width: 100%;

        max-width: 400px;

    }


    .gallery-small {

        position: relative;

        width: 100%;

        bottom: auto;

        right: auto;

        margin-top: 20px;

        border: 0;

    }

    .floating-badge {

        position: relative;

        left: auto;

        top: auto;

        display: inline-block;

        margin: 20px 0;

    }

    .lifestyle-gallery {

        padding-right: 0;

    }

    .section-title {

        font-size: 36px;

    }


    .section-heading {

        font-size: 38px;

    }


    .apartment-content h3 {

        font-size: 24px;

    }

    .location-wrapper {

        height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .location-center {

        position: relative;

        transform: none;

        left: auto;

        top: auto;

        margin-bottom: 40px;

    }

    .location-item {

        position: relative;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

        width: 100%;

    }

    .location-wrapper::before,

    .location-wrapper::after {

        display: none;

    }


    .gallery-grid {

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

    }

    .gallery-item.large {

        grid-column: span 2;

    }


    .investment-badge {

        right: 20px;

    }


    .final-cta-box {

        text-align: center;

        padding: 45px 30px;

    }

    .final-cta h2 {

        font-size: 36px;

    }

    .cta-buttons {

        align-items: center;

        margin-top: 35px;

    }

    .stats-title {

        font-size: 36px;

    }


}

@media(max-width:576px) {

    .apartment-hero h1 {

        font-size: 34px;

    }

    .apartment-hero p {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .btn {

        width: 100%;

    }


    .section-title {

        font-size: 30px;

    }

    .section-text {

        font-size: 16px;

    }

    .feature-card {

        padding: 20px;

    }

    .project-stats {

        padding: 70px 0;

    }

    .stats-title {

        font-size: 30px;

    }

    .stats-text {

        font-size: 16px;

    }

    .stats-card {

        padding: 30px 20px;

    }

    .stats-card h3 {

        font-size: 42px;

    }


    .amenities-section {

        padding: 35px 0;

    }

    .section-heading {

        font-size: 30px;

    }

    .section-description {

        font-size: 16px;

    }


    .apartment-section {

        padding: 70px 0;

    }


    .gallery-grid {

        grid-template-columns: 1fr;

    }

    .gallery-item.large {

        grid-column: span 1;

        height: 260px;

    }

    .gallery-item {

        height: 220px;

    }


    .investment-section {

        /* padding:70px 0; */
        padding: 0px 0 70px 0;

    }

    .investment-badge {

        position: relative;

        right: auto;

        bottom: auto;

        margin-top: 20px;

        display: inline-block;

    }


    .final-cta {

        padding: 70px 0;

    }

    .final-cta h2 {

        font-size: 30px;

    }

    .final-cta p {

        font-size: 16px;

    }

    .cta-buttons {

        width: 100%;

    }

    .cta-buttons .btn {

        width: 100%;

    }

}

/*=========================================
Lifestyle Section
=========================================*/

.lifestyle-section {

    padding: 100px 0;

    background: #f8f9fa;

}

.section-subtitle {

    color: #0B4843;

    text-transform: uppercase;

    font-weight: 600;

    letter-spacing: 2px;

}

.section-title {

    font-size: 48px;

    font-weight: 700;

    margin: 20px 0;

    color: #222;

}

.section-text {

    color: #666;

    line-height: 1.9;

    font-size: 18px;

}

/* Gallery */

.lifestyle-gallery {

    position: relative;

    padding-right: 80px;

}

.gallery-large {

    width: 100%;

    border-radius: 25px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

}

.gallery-small {

    position: absolute;

    width: 230px;

    bottom: -40px;

    right: 0;

    border: 8px solid #fff;

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .2);

    transition: .4s;

}

.gallery-small:hover {

    transform: translateY(-10px);

}

/* Floating Badge */

.floating-badge {

    position: absolute;

    left: -20px;

    top: 40px;

    background: #0B4843;

    color: #fff;

    padding: 25px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .2);

}

.floating-badge h3 {

    font-size: 42px;

    margin: 0;

}

.floating-badge span {

    font-size: 14px;

}

/* Feature Card */

.feature-card {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    padding: 25px;

    background: #fff;

    border-radius: 18px;

    margin-bottom: 20px;

    transition: .35s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}

.feature-card:hover {

    transform: translateX(12px);

    border-left: 5px solid #0B4843;

}

.feature-card i {

    font-size: 34px;

    color: #0B4843;

}

.feature-card h5 {

    font-weight: 600;

    margin-bottom: 10px;

}

.feature-card p {

    color: #666;

    margin: 0;

    line-height: 1.8;

}

/* Button */

.lifestyle-btn {

    background: #0B4843;

    color: #fff;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 600;

}

.lifestyle-btn:hover {

    background: #08342f;

    color: #fff;

}

/*=========================================
PROJECT STATISTICS
=========================================*/

.project-stats {

    position: relative;

    padding: 100px 0;

    background: url("../images/states-bg2.jpg") center/cover;

    overflow: hidden;

}

.stats-overlay {

    position: absolute;

    inset: 0;

    background: rgba(8, 22, 22, .88);

}

.project-stats .container {

    position: relative;

    z-index: 2;

}

.stats-subtitle {

    color: #9dd7c9;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-weight: 600;

}

.stats-title {

    color: #fff;

    font-size: 48px;

    font-weight: 700;

    margin: 20px 0;

}

.stats-text {

    color: #d8d8d8;

    font-size: 18px;

    line-height: 1.8;

}

/* Card */

.stats-card {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 25px;

    padding: 40px 25px;

    text-align: center;

    color: #fff;

    transition: .4s;

    height: 100%;

}

.stats-card:hover {

    transform: translateY(-10px);

    background: #0B4843;

}

.stats-card i {

    font-size: 42px;

    color: #9dd7c9;

    margin-bottom: 20px;

}

.stats-card h3 {

    display: inline-block;

    font-size: 54px;

    font-weight: 700;

    margin-bottom: 10px;

}

.stats-card .plus {

    font-size: 26px;

    font-weight: 600;

}

.stats-card h6 {

    font-size: 20px;

    margin-top: 10px;

    margin-bottom: 10px;

}

.stats-card p {

    color: #ddd;

    margin: 0;

}


/*====================================
Amenities
====================================*/

.amenities-section {

    padding: 50px 0;

    background: #ffffff;

}

.section-tag {

    display: inline-block;

    padding: 8px 22px;

    border-radius: 50px;

    background: #0B4843;

    color: #fff;

    font-size: 13px;

    letter-spacing: 2px;

    margin-bottom: 20px;

}

.section-heading {

    font-size: 46px;

    font-weight: 700;

    margin-bottom: 20px;

    color: #222;

}

.section-description {

    font-size: 18px;

    color: #666;

    line-height: 1.8;

}

/* Card */

.amenity-card {

    background: #fff;

    border-radius: 25px;

    padding: 35px;

    text-align: center;

    transition: .4s;

    position: relative;

    overflow: hidden;

    border: 1px solid #eee;

    height: 100%;

}

.amenity-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: #0B4843;

    transform: scaleX(0);

    transition: .4s;

}

.amenity-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);

}

.amenity-card:hover::before {

    transform: scaleX(1);

}

.icon-box {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: #eef7f5;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    transition: .4s;

}

.icon-box i {

    font-size: 38px;

    color: #0B4843;

}

.amenity-card:hover .icon-box {

    background: #0B4843;

    transform: rotate(10deg);

}

.amenity-card:hover .icon-box i {

    color: #fff;

}

.amenity-card h5 {

    font-size: 22px;

    margin-bottom: 15px;

    font-weight: 600;

}

.amenity-card p {

    color: #666;

    line-height: 1.8;

}

/*=========================================
Apartment Section
=========================================*/

.apartment-section {

    background: #f8f9fa;

    padding: 100px 0;

}

/* Card */

.apartment-card {

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    transition: .4s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    height: 100%;

}

.apartment-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

}

/* Image */

.apartment-image {

    position: relative;

    overflow: hidden;

}

.apartment-image img {

    width: 100%;

    height: 270px;

    object-fit: cover;

    transition: .5s;

}

.apartment-card:hover img {

    transform: scale(1.08);

}

.area-badge {

    position: absolute;

    left: 20px;

    top: 20px;

    background: #0B4843;

    color: #fff;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

}

/* Content */

.apartment-content {

    padding: 30px;

}

.apartment-content h3 {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 10px;

}

.apartment-content h4 {

    color: #0B4843;

    margin-bottom: 25px;

    font-size: 22px;

}

.apartment-content ul {

    list-style: none;

    padding: 0;

    margin-bottom: 30px;

}

.apartment-content li {

    margin-bottom: 14px;

    color: #555;

}

.apartment-content i {

    color: #0B4843;

    margin-right: 10px;

}

/* Button */

.apartment-btn {

    width: 100%;

    padding: 14px;

    background: #0B4843;

    color: #fff;

    border-radius: 40px;

    transition: .3s;

}

.apartment-btn:hover {

    background: #08332f;

    color: #fff;

}

/*====================================
LOCATION
====================================*/

.location-section {

    padding: 100px 0;

    background: #f8f9fa;

}

.location-wrapper {

    position: relative;

    max-width: 900px;

    height: 650px;

    margin: auto;

}

.location-center {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}

.location-pin {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: #0B4843;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    color: #fff;

    font-size: 50px;

    box-shadow: 0 20px 40px rgba(11, 72, 67, .35);

}

.location-center h4 {

    margin-top: 20px;

    font-weight: 700;

}

.location-center small {

    color: #777;

}

/* Cards */

.location-item {

    position: absolute;

    width: 230px;

    background: #fff;

    border-radius: 20px;

    padding: 25px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    transition: .4s;

}

.location-item:hover {

    transform: translateY(-8px);

}

.location-item i {

    font-size: 34px;

    color: #0B4843;

    margin-bottom: 15px;

}

.location-item h5 {

    font-size: 20px;

    margin-bottom: 10px;

}

.location-item span {

    color: #666;

}

/* Positions */

.top-left {

    top: 0;

    left: 80px;

}

.top-right {

    top: 0;

    right: 80px;

}

.left {

    left: 0;

    top: 220px;

}

.right {

    right: 0;

    top: 220px;

}

.bottom-left {

    bottom: 0;

    left: 80px;

}

.bottom-right {

    bottom: 0;

    right: 80px;

}

/* Connector Lines */

.location-wrapper::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 2px;

    height: 450px;

    background: #d8d8d8;

    transform: translate(-50%, -50%);

}

.location-wrapper::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 450px;

    height: 2px;

    background: #d8d8d8;

    transform: translate(-50%, -50%);

}

/*====================================
Gallery
====================================*/

.gallery-section {

    padding: 100px 0;

    background: #fff;

}

/* Masonry */

.gallery-grid {

    display: grid;

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

    gap: 20px;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 25px;

    cursor: pointer;

}

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}

.gallery-item.large {

    grid-column: span 2;

    grid-row: span 2;

}

/* Overlay */

.gallery-overlay {

    position: absolute;

    inset: 0;

    background: rgba(11, 72, 67, .65);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: .4s;

}

.gallery-overlay i {

    color: #fff;

    font-size: 42px;

    transform: scale(.6);

    transition: .3s;

}

.gallery-item:hover img {

    transform: scale(1.12);

}

.gallery-item:hover .gallery-overlay {

    opacity: 1;

}

.gallery-item:hover .gallery-overlay i {

    transform: scale(1);

}

/* Heights */

.gallery-item.large {

    height: 520px;

}

.gallery-item {

    height: 250px;

}

/*====================================
Investment Section
====================================*/

.investment-section {

    /* padding:100px 0; */
    padding: 0px 0 100px 0;
    background: #f8f9fa;

}

.investment-image {

    position: relative;

}

.investment-image img {

    border-radius: 30px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

}

.investment-badge {

    position: absolute;

    bottom: 30px;

    right: -20px;

    background: #0B4843;

    color: #fff;

    padding: 25px 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);

}

.investment-badge h3 {

    font-size: 40px;

    margin: 0;

}

.investment-list {

    margin: 40px 0;

}

.investment-item {

    display: flex;

    gap: 20px;

    margin-bottom: 25px;

    padding: 20px;

    background: #fff;

    border-radius: 18px;

    transition: .3s;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);

}

.investment-item:hover {

    transform: translateX(10px);

}

.investment-item i {

    font-size: 34px;

    color: #0B4843;

}

.investment-item h5 {

    margin-bottom: 8px;

    font-weight: 600;

}

.investment-item p {

    margin: 0;

    color: #666;

}

.investment-btn {

    background: #0B4843;

    color: #fff;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 600;

}

.investment-btn:hover {

    background: #08332f;

    color: #fff;

}

/*=====================================
Sticky Enquiry
======================================*/

.sticky-enquiry {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 95%;

    max-width: 1200px;

    background: #ffffff;

    border-radius: 70px;

    padding: 18px 30px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

    z-index: 999;

}

.sticky-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.sticky-left h5 {

    margin: 0;

    font-weight: 700;

}

.sticky-left p {

    margin: 0;

    color: #666;

    font-size: 15px;

}

.sticky-right {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.sticky-btn {

    border: none;

    text-decoration: none;

    padding: 14px 26px;

    border-radius: 40px;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

    transition: .3s;

}

.sticky-btn:hover {

    transform: translateY(-4px);

    color: #fff;

}

.call-btn {

    background: #0B4843;

}

.whatsapp-btn {

    background: #25D366;

}

.enquiry-btn {

    background: #1d3557;

}

.brochure-btn {

    background: #d4a017;

}

/* Mobile */

@media(max-width:768px) {

    .sticky-enquiry {

        left: 0;

        bottom: 0;

        transform: none;

        width: 100%;

        padding: 12px;

        border-radius: 20px 20px 0 0;

    }

    .sticky-wrapper {

        flex-direction: column;

        gap: 15px;

    }

    .sticky-left {

        text-align: center;

    }

    .sticky-right {

        width: 100%;

        display: grid;

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

        gap: 10px;

    }

    .sticky-btn {

        justify-content: center;

        padding: 14px;

    }

}

/*====================================
Footer CTA
====================================*/

.footer-cta {

    background: #f8f9fa;

    padding: 80px 0 0;

}

.cta-box {

    background: #0B4843;

    color: #fff;

    border-radius: 30px;

    padding: 60px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

.cta-tag {

    display: inline-block;

    margin-bottom: 20px;

    letter-spacing: 2px;

    color: #cce7e3;

}

.cta-box h2 {

    font-size: 46px;

    margin-bottom: 20px;

}

.cta-box p {

    font-size: 18px;

    color: #dfeceb;

}

.cta-btn {

    display: inline-block;

    padding: 18px 40px;

    background: #fff;

    color: #0B4843;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.cta-btn:hover {

    background: #d4f2ec;

}

/*=================================
FINAL CTA
==================================*/

.final-cta {

    padding: 0px 0px 90px 0px;

    background: #f7f8fa;

}

.final-cta-box {

    background: linear-gradient(135deg, #0B4843, #13685f);

    color: #fff;

    border-radius: 30px;

    padding: 70px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

.cta-label {

    display: inline-block;

    margin-bottom: 18px;

    letter-spacing: 2px;

    font-size: 14px;

    color: #d5efe9;

}

.final-cta h2 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 20px;

}

.final-cta p {

    font-size: 18px;

    color: #eef7f5;

    line-height: 1.8;

    max-width: 650px;

}

.cta-buttons {

    display: flex;

    flex-direction: column;

    gap: 18px;

    align-items: flex-end;

}

.cta-primary {

    background: #fff;

    color: #0B4843;

    padding: 16px 35px;

    border-radius: 50px;

    font-weight: 600;

}

.cta-primary:hover {

    background: #f2f2f2;

    color: #0B4843;

}

.cta-secondary {

    border: 2px solid #fff;

    color: #fff;

    padding: 16px 35px;

    border-radius: 50px;

    font-weight: 600;

}

.cta-secondary:hover {

    background: #fff;

    color: #0B4843;

}