body {
        margin: 0;
        padding: 0;
    }


    /* ===== AREA BANNER CSS START ===== */

    .area-banner {
        position: relative;
        height: 650px;
        display: flex;
        align-items: center;
        background: url('../image/bbb.webp') center/cover no-repeat;
        overflow: hidden;
    }

    .area-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(0,0,0,0.75), rgba(0,0,0,0.3));
        top: 0;
        left: 0;
    }

    .area-content {
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .area-top {
        font-size: 14px;
        letter-spacing: 2px;
        color: #27cce0;
        margin-bottom: 10px;
    }

    .area-title {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.2;
    }

    .area-title span {
        color: #d84c7f;
    }

    .area-desc {
        margin-top: 15px;
        color: #ccc;
        max-width: 500px;
        line-height: 1.7;
    }

    .area-buttons {
        margin-top: 25px;
    }

    .area-btn-main {
        background: #d84c7f;
        color: #fff;
        padding: 12px 30px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        margin-right: 10px;
        transition: 0.3s;
    }

    .area-btn-main:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(216,76,127,0.4);
    }

    .area-btn-outline {
        border: 1px solid #fff;
        color: #fff;
        padding: 12px 28px;
        border-radius: 30px;
        text-decoration: none;
        transition: 0.3s;
    }

    .area-btn-outline:hover {
        background: #fff;
        color: #d84c7f;
    }

    @media (max-width: 768px) {

        .area-banner {
            height: auto;
            padding: 100px 0;
            text-align: center;
        }

        .area-title {
            font-size: 32px;
        }

        .area-desc {
            margin: auto;
        }

    }

    /* ===== AREA BANNER CSS END ===== */



    /* ===== AREA INTRO SECTION CSS START ===== */

.area-intro-section {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* glow effect */
.area-intro-section::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area-intro-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area-intro-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}

.area-intro-title span {
    background: linear-gradient(90deg, #d84c7f, #d84c7f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* text */
.area-intro-desc {
    color: #ccc;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* mobile */
@media (max-width: 768px) {

    .area-intro-title {
        font-size: 26px;
    }

    .area-intro-desc {
        font-size: 14px;
        padding: 0 10px;
    }

}

/* ===== AREA INTRO SECTION CSS END ===== */




/* ===== AREA PROFILE CARDS CSS START ===== */

.area-cards-section {
    background: linear-gradient(135deg, #111010, #111010);
    padding: 80px 0;
}

/* CARD */
.area-card {
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #1cbbcd, #1cbbcd);
    transition: 0.4s;
}

.area-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* IMAGE */
.area-card-img {
    position: relative;
}

.area-card-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* NAME */
.area-name {
    position: absolute;
    top: 10px;
    left: 15px;
    color: #fff;
    font-weight: 700;
}

/* LOCATION (TOP RIGHT) */
.area-location {
    position: absolute;
    top: 10px;
    right: 15px;
    background: #ffc107;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
}

/* BODY */
.area-card-body {
    padding: 15px;
}

/* PRICE */
.area-price {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-weight: 600;
}

.area-price strong {
    color: #00e676;
}

/* TAGS */
.area-tags {
    margin-top: 10px;
}

.area-tags span {
    background: #ffc107;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 5px;
}

/* STATUS */
.area-status-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
}

.verified {
    color: #00e676;
}

.online {
    color: #f7f9f9;
}

/* ACTION BUTTONS */
.area-action {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.area-action a {
    width: 42px;
    background-color: #00e676;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}

/* CALL */
.area-call {
    background-color: #b42b1c !important;
    color: #1b191a;
}

/* WHATSAPP */
.area-whatsapp {
    background: rgba(39,204,224,0.2);
    color: #27cce0;
}

.area-action a:hover {
    transform: scale(1.1);
}

/* MOBILE */
@media (max-width: 768px) {

    .area-card-img img {
        height: 200px;
    }

}

/* ===== AREA PROFILE CARDS CSS END ===== */



/* ===== AREA6 BEFORE AFTER CSS START ===== */

.area6-before-after {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.area6-before-after::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area6-before-after::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area6-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area6-title span {
    color: #d84c7f;
}

.area6-sub {
    color: #bbb;
    margin-top: 10px;
}

/* layout */
.area6-wrapper {
    display: flex;
    gap: 50px;
}

/* columns */
.area6-col {
    flex: 1;
    padding-left: 20px;
    border-left: 2px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

.area6-col:hover {
    transform: translateY(-5px);
}

/* headings */
.area6-col.before h4 {
    color: #ff4d4d;
}

.area6-col.after h4 {
    color: #27cce0;
}

/* list */
.area6-col ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.area6-col ul li {
    margin-bottom: 12px;
    color: #ccc;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

/* icons */
.area6-col.before ul li::before {
    content: "✖";
    position: absolute;
    left: 0;
    color: #ff4d4d;
}

.area6-col.after ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #00e676;
}

/* highlight line */
.area6-col.before {
    border-left: 2px solid #ff4d4d;
}

.area6-col.after {
    border-left: 2px solid #27cce0;
}

/* mobile */
@media (max-width: 768px) {

    .area6-title {
        font-size: 26px;
    }

    .area6-wrapper {
        flex-direction: column;
        gap: 30px;
    }

}

/* ===== AREA6 BEFORE AFTER CSS END ===== */



/* ===== AREA2 WHY CHOOSE US (MINIMAL VERSION) START ===== */

.area2-why-lite {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.area2-why-lite::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area2-why-lite::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area2-why-lite-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area2-why-lite-title span {
    color: #d84c7f;
}

.area2-why-lite-sub {
    color: #bbb;
    margin-top: 10px;
}

/* layout */
.area2-why-lite-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* LEFT */
.area2-why-lite-left {
    flex: 1;
}

.area2-why-item {
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 2px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

.area2-why-item:hover {
    border-left: 2px solid #27cce0;
    transform: translateX(5px);
}

.area2-why-item h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
}

.area2-why-item p {
    color: #ccc;
    font-size: 14px;
}

/* RIGHT VISUAL */
.area2-why-lite-right {
    flex: 1;
    position: relative;
    height: 300px;
}

.area2-why-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #27cce0;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
    top: 50px;
    left: 50px;
}

.area2-why-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #27cce0, transparent);
    left: 50%;
    transform: translateX(-50%);
}

/* MOBILE */
@media (max-width: 768px) {

    .area2-why-lite-title {
        font-size: 26px;
    }

    .area2-why-lite-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .area2-why-lite-right {
        height: 150px;
    }

}

/* ===== AREA2 WHY CHOOSE US (MINIMAL VERSION) END ===== */


/* ===== AREA1 COMPARISON SECTION START ===== */

.area1-compare-lite {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.area1-compare-lite::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area1-compare-lite::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area1-compare-lite-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area1-compare-lite-title span {
    color: #d84c7f;
}

.area1-compare-lite-sub {
    color: #bbb;
    margin-top: 10px;
}

/* layout */
.area1-compare-wrapper {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* columns */
.area1-compare-col {
    flex: 1;
    padding: 25px;
    border-left: 2px solid rgba(255,255,255,0.1);
    transition: 0.3s;
    position: relative;
}

.area1-compare-col:hover {
    transform: translateY(-5px);
    border-left: 2px solid #27cce0;
}

/* highlight */
.area1-compare-col.highlight {
    border-left: 2px solid #27cce0;
    background: rgba(39,204,224,0.05);
}

/* badge */
.area1-compare-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #27cce0;
    color: #000;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
}

/* headings */
.area1-compare-heading {
    font-size: 20px;
    margin-bottom: 15px;
}

.area1-compare-heading.red {
    color: #ff4d4d;
}

.area1-compare-heading.blue {
    color: #27cce0;
}

.area1-compare-heading.yellow {
    color: #ffc107;
}

/* list */
.area1-compare-list {
    list-style: none;
    padding: 0;
}

.area1-compare-list li {
    color: #ccc;
    margin-bottom: 10px;
    font-size: 14px;
    position: relative;
    padding-left: 18px;
}

.area1-compare-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #27cce0;
}

/* mobile */
@media (max-width: 768px) {

    .area1-compare-lite-title {
        font-size: 26px;
    }

    .area1-compare-wrapper {
        flex-direction: column;
    }

    .area1-compare-col {
        padding: 20px;
    }

}

/* ===== AREA1 COMPARISON SECTION END ===== */



/* ===== AREA4 GALLERY CSS START ===== */

.area4-section {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.area4-section::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area4-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area4-gallery-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area4-gallery-title span {
    color: #d84c7f;
}

.area4-gallery-sub {
    color: #bbb;
    margin-top: 10px;
}

/* card */
.area4-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.area4-gallery-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: 0.4s;
}

/* overlay */
.area4-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: #fff;
    opacity: 0;
    transition: 0.4s;
}

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

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

.area4-gallery-overlay h5 {
    margin: 0;
    font-size: 16px;
}

/* mobile */
@media (max-width: 768px) {

    .area4-gallery-title {
        font-size: 26px;
    }

    .area4-gallery-card img {
        height: 180px;
    }

}

/* ===== AREA4 GALLERY CSS END ===== */



/* ===== AREA5 LITE PRICING CSS START ===== */

.area5-lite {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
}

/* title */
.area5-lite-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area5-lite-title span {
    color: #d84c7f;
}

.area5-lite-sub {
    color: #bbb;
    margin-top: 10px;
}

/* layout */
.area5-lite-wrapper {
    display: flex;
    gap: 40px;
}

/* column */
.area5-lite-col {
    flex: 1;
    padding-left: 20px;
    border-left: 2px solid rgba(255,255,255,0.1);
    position: relative;
    transition: 0.3s;
}

.area5-lite-col:hover {
    transform: translateY(-5px);
    border-left: 2px solid #27cce0;
}

/* highlight */
.area5-lite-col.highlight {
    border-left: 2px solid #27cce0;
}

/* badge */
.area5-lite-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #27cce0;
    color: #000;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 20px;
}

/* price */
.area5-lite-price {
    margin: 10px 0;
}

.area5-lite-price .old {
    display: block;
    color: #777;
    text-decoration: line-through;
}

.area5-lite-price strong {
    font-size: 28px;
    color: #27cce0;
}

/* list */
.area5-lite-col ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.area5-lite-col ul li {
    color: #ccc;
    margin-bottom: 8px;
    font-size: 14px;
    padding-left: 15px;
    position: relative;
}

.area5-lite-col ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #27cce0;
}

/* button */
.area5-lite-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 30px;
    background: #d84c7f;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.area5-lite-btn.highlight-btn {
    background: linear-gradient(90deg, #27cce0, #d84c7f);
}

.area5-lite-btn:hover {
    transform: translateY(-3px);
}

/* mobile */
@media (max-width: 768px) {

    .area5-lite-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .area5-lite-title {
        font-size: 26px;
    }

}

/* ===== AREA5 LITE PRICING CSS END ===== */



/* ===== AREA LANDMARK CSS START ===== */

.area-landmark-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area6 {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding-bottom: 20px;
}

.area-landmark-title span {
    color: #d84c7f;
}

.area-landmark-sub {
    color: #bbb;
    margin-top: 10px;
}

/* CARD */
.area-landmark-card {
    padding: 25px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.area-landmark-card:hover {
    transform: translateY(-8px);
    border: 1px solid rgba(39,204,224,0.5);
}

/* ICON */
.area-landmark-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

/* TEXT */
.area-landmark-card h5 {
    color: #fff;
    margin-bottom: 5px;
}

.area-landmark-card p {
    color: #ccc;
    font-size: 13px;
}

/* MOBILE */
@media (max-width: 768px) {

    .area-landmark-title {
        font-size: 26px;
    }

    .area-landmark-card {
        padding: 20px;
    }

}

/* ===== AREA LANDMARK CSS END ===== */



/* ===== AREA MAP CSS START ===== */

.area7 {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 40px;
}

.area-map-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
}

.area-map-content {
    flex: 1;
}

.area-map-content h2 {
    font-size: 38px;
    color: #fff;
    font-weight: 800;
}

.area-map-content h2 span {
    color: #d84c7f;
}

.area-map-content p {
    color: #ccc;
    margin: 15px 0;
    line-height: 1.7;
}

.area-map-content ul {
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}

.area-map-content ul li {
    color: #ddd;
    margin-bottom: 8px;
    font-size: 14px;
}

.area-map-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    background: linear-gradient(90deg, #27cce0, #d84c7f);
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.area-map-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(39,204,224,0.3);
}

.area-map-box {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.area-map-box iframe {
    width: 100%;
    height: 350px;
    border: 0;
}

/* MOBILE */
@media (max-width: 768px) {

    .area-map-wrapper {
        flex-direction: column;
    }

    .area-map-content h2 {
        font-size: 26px;
    }

    .area-map-box iframe {
        height: 250px;
    }

}

/* ===== AREA MAP CSS END ===== */



/* ===== AREA FAQ CSS START ===== */

.area8 {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 40px;
}

.area-faq-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area-faq-title span {
    color: #d84c7f;
}

.area-faq-sub {
    color: #bbb;
    margin-top: 10px;
}

.area-faq {
    max-width: 800px;
    margin: auto;
}

.area-faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
}

.area-faq-item input {
    display: none;
}

.area-faq-question {
    display: block;
    color: #fff;
    font-size: 16px;
    padding: 18px 0;
    cursor: pointer;
    position: relative;
}

.area-faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    font-size: 18px;
    color: #27cce0;
    transition: 0.3s;
}

.area-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
}

.area-faq-answer p {
    color: #ccc;
    font-size: 14px;
    padding-bottom: 15px;
}

.area-faq-item input:checked ~ .area-faq-answer {
    max-height: 200px;
}

.area-faq-item input:checked + .area-faq-question::after {
    content: "-";
}

/* MOBILE */
@media (max-width: 768px) {

    .area-faq-title {
        font-size: 26px;
    }

}

/* ===== AREA FAQ CSS END ===== */



/* ===== AREA INTERNAL LINKING SECTION START ===== */

.area-internal-section {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* glow effects */
.area-internal-section::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: #27cce0;
    filter: blur(120px);
    opacity: 0.12;
    top: -50px;
    left: -50px;
}

.area-internal-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: #d84c7f;
    filter: blur(120px);
    opacity: 0.12;
    bottom: -50px;
    right: -50px;
}

/* title */
.area-internal-title {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
}

.area-internal-title span {
    color: #d84c7f;
}

.area-internal-sub {
    color: #bbb;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* link box */
.area-link-box {
    display: block;
    padding: 30px;
    border-radius: 18px;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    transition: 0.3s;
    height: 100%;
}

.area-link-box:hover {
    transform: translateY(-8px);
    border: 1px solid rgba(216,76,127,0.5);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* text */
.area-link-box h4 {
    color: #fff;
    margin-bottom: 10px;
}

.area-link-box p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
}

.area-link-box span {
    display: inline-block;
    margin-top: 10px;
    color: #27cce0;
    font-weight: 600;
}

/* mobile */
@media (max-width: 768px) {

    .area-internal-title {
        font-size: 26px;
    }

    .area-link-box {
        padding: 20px;
        text-align: center;
    }

}

/* ===== AREA INTERNAL LINKING SECTION END ===== */