/* ----------------------------------
           Hero Section & Video Background
        ----------------------------------- */
        .hero-section {
            position: relative;
            height: 100vh;
            min-height: 500px;
            width: 100%;
            overflow: hidden;
        }

        .bg-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            z-index: 1;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        /* Mobile specific video height optimization */
        @media (max-width: 767.98px) {
            .hero-section {
                height: 80vh;
                min-height: 450px;
            }
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 2;
        }

        /* ----------------------------------
           Transparent & Sticky Header / Navbar
        ----------------------------------- */
        .header-navbar {
            position: fixed; /* Fixed header on scroll */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 12px 0;
            transition: all 0.3s ease-in-out;
        }

        /* Class applied via JS when page is scrolled */
        .header-navbar.scrolled {
            background: rgba(11, 11, 11, 0.92) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
            padding: 8px 0;
            border-bottom-color: rgba(255, 255, 255, 0.15);
        }

        /* Brand Logo Style */
        .brand-logo {
            color: #ffffff;
            font-weight: 800;
            font-size: 22px;
            line-height: 1.1;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-decoration: none;
        }
        .brand-logo span {
            display: block;
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 3px;
            color: #d1d1d1;
        }

        /* Nav Links */
        .header-navbar .nav-link {
            color: #ffffff !important;
            font-weight: 600;
            font-size: 13px;
            padding: 10px 15px !important;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .header-navbar .nav-link:hover, 
        .header-navbar .nav-link.active {
            color: #ffffff !important;
            position: relative;
        }

        .header-navbar .nav-link.active::after,
        .header-navbar .nav-item.dropdown:hover .nav-link::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 16px;
            right: 16px;
            height: 3px;
            background-color: #ffffff;
        }

        /* Custom Dropdown Styling */
        .custom-dropdown-menu {
            background: rgba(18, 18, 18, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 0;
            padding: 10px 0;
            margin-top: 13px !important;
            min-width: 200px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .custom-dropdown-menu .dropdown-item {
            color: #e0e0e0;
            font-size: 14px;
            padding: 10px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
        }

        .custom-dropdown-menu .dropdown-item:last-child {
            border-bottom: none;
        }

        .custom-dropdown-menu .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            padding-left: 25px;
        }

        /* Call Button Style */
        .phone-box {
            border: 1px solid rgba(255, 255, 255, 0.7);
            color: #ffffff;
            padding: 8px 20px;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .phone-box:hover {
            background: #ffffff;
            color: #000000;
            border-color: #ffffff;
        }

        /* Mobile Hamburger Icon */
        .navbar-toggler-custom {
            border: none;
            background: transparent;
            color: #ffffff;
            font-size: 22px;
            outline: none;
            padding: 0;
        }

        /* ----------------------------------
           Mobile Offcanvas Menu Design
        ----------------------------------- */
        .offcanvas-dark {
            background-color: #111111;
            color: #ffffff;
            width: 280px !important;
        }

        .offcanvas-dark .btn-close {
            filter: invert(1);
        }

        .offcanvas-dark .nav-link {
            color: #e0e0e0;
            font-size: 15px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .offcanvas-dark .dropdown-menu {
            background-color: #1a1a1a;
            border: none;
            padding-left: 15px;
        }

        .offcanvas-dark .dropdown-item {
            color: #bbb;
            padding: 8px 0;
        }

        /* Simplified Highlighted Contact Phone Box in Mobile Menu */
        .mobile-contact-highlight {
            background: #ffffff;
            color: #000000;
            border-radius: 6px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            margin-top: auto;
        }

        .mobile-contact-highlight i {
            font-size: 20px;
        }

        .mobile-contact-highlight:hover {
            background: #e6e6e6;
            color: #000000;
        }



       /* searchbar*/
        /* Section & Wrapper */
    .property-search-section {
        background-color: #0d0d0d;
    }

    .search-box-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Search Header Tabs */
    .search-tab-btn {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 6px 14px;
        transition: all 0.3s ease;
    }

    .search-tab-btn:hover {
        color: #ffffff;
    }

    .search-tab-btn.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Form Field Labels */
    .search-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: block;
    }

    /* Inputs & Select Elements */
    .custom-input,
    .custom-select {
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 13px;
        height: 46px;
        outline: none;
        transition: border-color 0.3s ease;
        appearance: none; /* removes default browser arrow for select */
    }

    .custom-input:focus,
    .custom-select:focus {
        border-color: #ffffff;
    }

    .custom-input::placeholder {
        color: rgba(255, 255, 255, 0.35);
    }

    .custom-select option {
        background: #141414;
        color: #ffffff;
        padding: 10px;
    }

    /* Field Icons */
    .input-icon {
        color: rgba(255, 255, 255, 0.4);
        font-size: 13px;
        pointer-events: none;
    }

    /* Submit Button */
    .btn-search-submit {
        background: #ffffff;
        color: #000000;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        height: 46px;
        transition: all 0.3s ease;
    }

    .btn-search-submit:hover {
        background: #e0e0e0;
        color: #000000;
        transform: translateY(-1px);
    }
       /* searchbar*/


      /* upcomming with slider*/
       /* Section Background */
    .upcoming-projects-section {
        background-color: #111111;
        color: #ffffff;
    }

    .header-line {
        width: 60px;
        height: 3px;
        background-color: #ffffff;
    }

    /* Project Card Styling */
    .project-card {
        position: relative;
        height: 420px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .project-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Dark Overlay on Image */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.65) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.4s ease;
    }

    /* Center Content Container */
    .project-content {
        z-index: 2;
        transform: translateY(0);
        transition: transform 0.4s ease;
    }

    .project-title {
        font-size: 22px;
        letter-spacing: 1.5px;
    }

    .project-location {
        font-size: 14px;
        color: #d1d1d1;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    /* Explore Button Style */
    .btn-explore {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.85);
        color: #ffffff;
        padding: 10px 24px;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }

    .btn-explore:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    }

    /* Hover Zoom Effects */
    .project-card:hover .project-img {
        transform: scale(1.08);
    }

    .project-card:hover .project-overlay {
        background: rgba(0, 0, 0, 0.55);
    }

    /* Owl Carousel Custom Navigation & Dots Styling */
    .project-slider .owl-nav button.owl-prev,
    .project-slider .owl-nav button.owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.6) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 0;
        font-size: 18px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .project-slider .owl-nav button.owl-prev { left: -20px; }
    .project-slider .owl-nav button.owl-next { right: -20px; }

    .project-slider .owl-nav button.owl-prev:hover,
    .project-slider .owl-nav button.owl-next:hover {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .project-slider .owl-dots {
        margin-top: 25px !important;
    }

    .project-slider .owl-dot span {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 0 !important;
        transition: all 0.3s ease;
    }

    .project-slider .owl-dot.active span {
        background: #ffffff !important;
        width: 25px !important;
    }
      /* upcomming with slider*/


     /* featured properties*/
      /* Section Background */
    .featured-properties-section {
        background-color: #0d0d0d;
        color: #ffffff;
    }

    .featured-properties-section .header-line {
        width: 60px;
        height: 3px;
        background-color: #ffffff;
    }

    /* Top Right Custom Navigation Buttons */
    .featured-properties-section .slider-btn {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .featured-properties-section .slider-btn:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    }

    .slider-btn.swiper-button-disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Property Card Container */
    .property-card {
        background: #161616;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.4s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .property-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    }

    /* Swiper Height Equalizer */
    .featured-properties-section .swiper-slide {
        height: auto;
        display: flex;
    }

    /* Property Image & Overlay Elements */
    .property-img-wrapper {
        position: relative;
        height: 250px;
        overflow: hidden;
        width: 100%;
    }

    .property-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .property-card:hover .property-img {
        transform: scale(1.08);
    }

    .property-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.75);
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 6px 14px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
    }

    .property-price {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: rgba(18, 18, 18, 0.85);
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        padding: 6px 14px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
    }

    /* Content Typography & Features */
    .property-title {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .property-title a {
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .property-title a:hover {
        color: #d1d1d1;
    }

    .property-location {
        font-size: 13px;
        color: #a0a0a0;
        margin-bottom: 0;
    }

    .property-features {
        font-size: 13px;
        color: #cccccc;
    }

    .property-features i {
        color: #ffffff;
    }

    .border-secondary-subtle {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* View Details Button */
    .featured-properties-section .btn-view-details {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #ffffff;
        padding: 10px 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        background: transparent;
        transition: all 0.3s ease;
    }

    .featured-properties-section .btn-view-details:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    }
     /* featured properties*/

     /*blog*/
     /* Section Background */
    .blog-section {
        background-color: #111111;
        color: #ffffff;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Section Header Custom Underline */
    .header-line {
        width: 60px;
        height: 3px;
        background-color: #ffffff;
    }

    /* Right Action Button Style (View All Blogs) */
    .btn-view-all {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #ffffff;
        padding: 10px 24px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.03);
        transition: all 0.3s ease;
    }

    .btn-view-all i {
        transition: transform 0.3s ease;
    }

    .btn-view-all:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    }

    .btn-view-all:hover i {
        transform: translateX(6px);
    }

    /* Blog Card Container */
    .blog-card {
        background: #181818;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.4s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .blog-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    }

    /* Blog Image & Overlay Elements */
    .blog-img-wrapper {
        position: relative;
        height: 230px;
        overflow: hidden;
    }

    .blog-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .blog-card:hover .blog-img {
        transform: scale(1.08);
    }

    .blog-category {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 5px 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
    }

    /* Content Typography & Meta */
    .blog-meta {
        font-size: 12px;
        color: #888888;
    }

    .blog-title {
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: 0.5px;
    }

    .blog-title a {
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .blog-title a:hover {
        color: #d1d1d1;
    }

    .blog-excerpt {
        font-size: 13px;
        color: #aaaaaa;
        line-height: 1.6;
    }

    /* Read More Button Link */
    .btn-read-more {
        display: inline-block;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-read-more i {
        transition: transform 0.3s ease;
    }

    .btn-read-more:hover {
        color: #d1d1d1;
    }

    .btn-read-more:hover i {
        transform: translateX(5px);
    }
     /*blog*/


    /* contact*/
     /* Section Background & Global Text */
    .contact-page-section {
        background-color: #0d0d0d;
        color: #ffffff;
    }

    /* Back Link & Badges */
    .btn-back-link {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: color 0.3s ease;
    }

    .btn-back-link:hover {
        color: #ffffff;
    }

    .badge-tag {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 6px 12px;
    }

    .badge-tag.highlighted {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    /* Header Box & Cards */
    .property-header-box {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .info-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Icon Box */
    .icon-box {
        width: 42px;
        height: 42px;
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 16px;
        flex-shrink: 0;
    }

    /* Custom Form Input & Labels */
    .custom-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.7);
        display: block;
        font-weight: 600;
    }

    .custom-input {
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 13px;
        padding: 12px 14px;
        outline: none;
        transition: border-color 0.3s ease;
    }

    .custom-input:focus {
        border-color: #ffffff;
    }

    .custom-select {
        cursor: pointer;
    }

    .custom-select option {
        background-color: #141414;
        color: #ffffff;
    }

    /* Action Buttons */
    .btn-action-primary {
        display: block;
        background: #ffffff;
        color: #000000;
        border: 1px solid #ffffff;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: all 0.3s ease;
    }

    .btn-action-primary:hover {
        background: transparent;
        color: #ffffff;
    }

    .btn-action-whatsapp {
        display: block;
        background: transparent;
        color: #25D366;
        border: 1px solid #25D366;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: all 0.3s ease;
    }

    .btn-action-whatsapp:hover {
        background: #25D366;
        color: #000000;
    }
    /* contact*/

    /*image gallery*/
     /* Section Background & Global Text */
    .gallery-page-section {
        background-color: #0d0d0d;
        color: #ffffff;
    }

    /* Back Link & Badges */
    .btn-back-link {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: color 0.3s ease;
    }

    .btn-back-link:hover {
        color: #ffffff;
    }

    .badge-tag {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 6px 12px;
        backdrop-filter: blur(4px);
    }

    .badge-tag.highlighted {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    /* Banner & Cards */
    .property-header-box {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .info-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Filter Buttons */
    .gallery-filter-btn {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 10px 20px;
        transition: all 0.3s ease;
    }

    .gallery-filter-btn:hover,
    .gallery-filter-btn.active {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    /* Gallery Card & Image Zoom */
    .gallery-img-wrapper {
        height: 280px;
    }

    .gallery-img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .gallery-card:hover .gallery-img {
        transform: scale(1.08);
    }

    /* Hover Overlay */
    .gallery-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .gallery-card:hover .gallery-overlay {
        opacity: 1;
    }

    .btn-action-icon {
        width: 45px;
        height: 45px;
        background: #ffffff;
        color: #000000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        font-size: 16px;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .btn-action-icon:hover {
        transform: scale(1.1);
        background: #e0e0e0;
        color: #000000;
    }
    /*image gallery*/


    /*video gallery*/
    /* Section Background & Global Text */
    .video-gallery-section {
        background-color: #0d0d0d;
        color: #ffffff;
    }

    /* Back Link & Badges */
    .video-gallery-section .btn-back-link {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: color 0.3s ease;
    }

    .video-gallery-section .btn-back-link:hover {
        color: #ffffff;
    }

    .video-gallery-section .badge-tag {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 6px 12px;
        backdrop-filter: blur(4px);
    }

    .video-gallery-section .badge-tag.highlighted {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    .video-gallery-section .badge-duration {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        font-size: 10px;
        font-weight: 600;
        padding: 5px 10px;
        backdrop-filter: blur(4px);
    }

    /* Banner & Cards */
    .video-gallery-section .property-header-box {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .video-gallery-section .info-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Filter Buttons */
    .video-gallery-section .gallery-filter-btn {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 10px 20px;
        transition: all 0.3s ease;
    }

    .video-gallery-section .gallery-filter-btn:hover,
    .video-gallery-section .gallery-filter-btn.active {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    /* Video Card & Thumbnail Zoom */
    .video-gallery-section .video-thumb-wrapper {
        height: 280px;
    }

    .video-gallery-section .video-thumb {
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .video-gallery-section .video-card:hover .video-thumb {
        transform: scale(1.08);
    }

    /* Hover Overlay */
    .video-gallery-section .video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-gallery-section .video-card:hover .video-overlay {
        opacity: 1;
    }

    .video-gallery-section .btn-play-icon {
        width: 55px;
        height: 55px;
        background: #ffffff;
        color: #000000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        font-size: 18px;
        padding-left: 3px; /* centers the play icon optically */
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .video-gallery-section .btn-play-icon:hover {
        transform: scale(1.15);
        background: #e0e0e0;
        color: #000000;
    }
    /*video gallery*/


   /* blog details*/
    /* Section & Global Text */
    .blog-details-section {
        background-color: #0d0d0d;
        color: #ffffff;
    }

    /* Back Link & Badges */
    .btn-back-link {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        transition: color 0.3s ease;
    }

    .btn-back-link:hover {
        color: #ffffff;
    }

    .badge-tag {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 6px 12px;
    }

    .badge-tag.highlighted {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    /* Cards & Header Banner */
    .property-header-box {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .info-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-blog-img {
        max-height: 480px;
        object-fit: cover;
    }

    /* Typography & Content Styling */
    .blog-text {
        color: rgba(255, 255, 255, 0.75);
        font-size: 15px;
        line-height: 1.8;
    }

    .custom-quote {
        background: #0b0b0b;
        border-left: 3px solid #ffffff;
    }

    .italic-text {
        font-style: italic;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Tags & Social Share Buttons */
    .tag-link {
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.7);
        padding: 4px 10px;
        font-size: 11px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .tag-link:hover {
        color: #ffffff;
        border-color: #ffffff;
    }

    .social-share-btn {
        width: 32px;
        height: 32px;
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .social-share-btn:hover {
        background: #ffffff;
        color: #000000;
    }

    /* Sidebar Category & Recent Articles */
    .category-item {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 13px;
        padding: 8px 12px;
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
    }

    .category-item:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .category-count {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
    }

    .recent-thumb {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .recent-title {
        font-size: 12px;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .recent-post-card:hover .recent-title {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .bg-gradient-box {
        background: linear-gradient(180deg, #181818 0%, #0b0b0b 100%);
    }

    /* Forms */
    .custom-input {
        background: #0b0b0b;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 13px;
        padding: 10px 14px;
        outline: none;
        transition: border-color 0.3s ease;
    }

    .custom-input:focus {
        border-color: #ffffff;
    }

    .btn-action-primary {
        display: block;
        background: #ffffff;
        color: #000000;
        border: 1px solid #ffffff;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 12px;
        transition: all 0.3s ease;
    }

    .btn-action-primary:hover {
        background: transparent;
        color: #ffffff;
    }
   /* blog details*/


        /*footer*/
        /* Main Footer Container */
    .main-footer {
        background-color: #0b0b0b;
        color: #b0b0b0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 14px;
    }

    /* Brand Logo Style in Footer */
    .footer-brand .brand-logo {
        font-weight: 800;
        font-size: 20px;
        line-height: 1.1;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: inline-block;
    }
    .footer-brand .brand-logo span {
        display: block;
        font-size: 9px;
        font-weight: 400;
        letter-spacing: 3px;
        color: #d1d1d1;
    }

    .footer-desc {
        line-height: 1.6;
        font-size: 16px;
        color: #999999;
    }

    /* Section Titles */
    .footer-title {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.5px;
        position: relative;
        padding-bottom: 10px;
    }

    .footer-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: #ffffff;
    }

    /* Navigation Links */
    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        color: #a0a0a0;
        text-decoration: none;
        font-size: 16px;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .footer-links a:hover {
        color: #ffffff;
        transform: translateX(5px);
    }

    /* Contact Details */
    .footer-contact-info li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 16px;
        color: #a0a0a0;
    }

    .footer-contact-info i {
        color: #ffffff;
        margin-top: 3px;
        font-size: 14px;
    }

    /* Newsletter Input Box */
    .newsletter-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0;
        color: #ffffff;
        font-size: 13px;
        padding: 10px 15px;
    }

    .newsletter-input:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: #ffffff;
        box-shadow: none;
        color: #ffffff;
    }

    .newsletter-input::placeholder {
        color: #777777;
    }

    .btn-newsletter {
        background: #ffffff;
        color: #000000;
        border: 1px solid #ffffff;
        border-radius: 0;
        padding: 10px 18px;
        transition: all 0.3s ease;
    }

    .btn-newsletter:hover {
        background: #e0e0e0;
        color: #000000;
    }

    /* Hotline Box */
    .footer-hotline-box {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 12px 18px;
        display: inline-block;
        width: 100%;
        transition: border-color 0.3s ease;
    }

    .footer-hotline-box:hover {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .hotline-icon {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 16px;
    }

    .hotline-number {
        color: #ffffff;
        font-size: 18px;
        font-weight: 800;
        text-decoration: none;
        letter-spacing: 1px;
    }

    /* Bottom Copyright Section */
    .bottom-footer {
        background-color: #050505;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .copyright-text {
        font-size: 16px;
        color: #777777;
    }

    /* Social Icons */
    .footer-social-links {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    @media (min-width: 768px) {
        .footer-social-links {
            justify-content: flex-end;
        }
    }

    .footer-social-links a {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .footer-social-links a:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        transform: translateY(-3px);
    }
        /*footer*/