@charset "UTF-8";

/* =========================
GLOBAL SECTION
========================= */

#market-area{

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fcfc 100%
    );
}

/* =========================
BREADCRUMB
========================= */

.breadcrumb-wrapper{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:15px;

    font-weight:500;
}

.breadcrumb-wrapper a{

    color:#00a79d;

    text-decoration:none;

    transition:0.3s ease;
}

.breadcrumb-wrapper a:hover{

    color:#12263a;
}

.breadcrumb-separator{

    color:#98a2b3;
}

.active-breadcrumb{

    color:#667085;
}

/* =========================
INTRO TEXT
========================= */

.market-short-intro{

    max-width:1050px;

    margin:auto auto 50px;

    font-size:18px;

    line-height:2;

    color:#667085;
}

/* =========================
ABOUT TEXT
========================= */

.about-text{

    max-width:1050px;

    margin:auto;

    font-size:18px;

    line-height:2;

    color:#667085;
}

.about-text span{

    color:#00a79d;

    font-weight:700;
}

/* =========================
CITY GRID
========================= */

.area-box{

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.98),
        rgba(248,252,252,0.96)
    );

    border-radius:28px;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 10px 28px rgba(16,24,40,0.05);

    transition:0.35s ease;

    position:relative;

    overflow:hidden;
}

.area-box::before{

    content:'';

    position:absolute;

    top:-40px;
    right:-40px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(0,167,157,0.05);
}

.area-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.12);
}

/* =========================
CITY ICON
========================= */

.city-marker-icon{

    width:74px;
    height:74px;

    border-radius:24px;

    background:rgba(0,167,157,0.10);

    color:#00a79d;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 24px;

    font-size:34px;
}

/* =========================
CITY CARD TITLE
========================= */

.area-box h5{

    font-size:26px;

    font-weight:700;

    color:#12263a;

    margin-bottom:16px;
}

/* =========================
CITY CARD TEXT
========================= */

.area-box p{

    font-size:16px;

    line-height:1.9;

    color:#667085;

    margin-top:18px;
}

/* =========================
SERVICE BADGE
========================= */

.service-count-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(0,167,157,0.12);

    color:#00a79d;

    font-size:13px;

    font-weight:700;

    letter-spacing:0.3px;
}

/* =========================
DETAIL AREA BOX
========================= */

.city-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:24px;
}

.city-icon{

    color:#00a79d;

    font-size:22px;
}

.city-link{

    color:#12263a;

    text-decoration:none;

    font-weight:700;

    font-size:24px;

    transition:0.3s ease;
}

.city-link:hover{

    color:#00a79d;
}

/* =========================
AREA LINKS
========================= */

.two-column{

    column-count:2;

    column-gap:26px;
}

.two-column li{

    margin-bottom:12px;

    break-inside:avoid;
}

.two-column li a{

    display:flex;

    align-items:center;

    color:#475467;

    text-decoration:none;

    padding:10px 14px;

    border-radius:14px;

    transition:0.3s ease;

    font-size:15px;

    font-weight:500;
}

.two-column li a:hover{

    background:rgba(0,167,157,0.08);

    color:#00a79d;

    transform:translateX(5px);
}

/* =========================
PREMIUM SEO SECTION
========================= */

.premium-seo-section{

    padding:90px 0;
}

.premium-seo-box{

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.98),
        rgba(248,252,252,0.96)
    );

    border-radius:36px;

    padding:70px;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 20px 60px rgba(16,24,40,0.08);

    position:relative;

    overflow:hidden;
}

.premium-seo-box::before{

    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:50%;

    background:rgba(0,167,157,0.05);
}

/* =========================
SEO BADGE
========================= */

.seo-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(0,167,157,0.10);

    color:#00a79d;

    font-size:14px;

    font-weight:700;

    margin-bottom:28px;
}

/* =========================
SEO TITLE
========================= */

.premium-seo-title{

    font-size:52px;

    line-height:1.25;

    font-weight:800;

    color:#12263a;

    margin-bottom:26px;

    max-width:980px;
}

/* =========================
SEO SUBTITLE
========================= */

.premium-seo-subtitle{

    font-size:20px;

    line-height:2;

    color:#667085;

    margin-bottom:38px;

    max-width:1000px;
}

/* =========================
SEO CONTENT
========================= */

.premium-seo-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:26px;

    margin-bottom:40px;
}

.premium-seo-content p{

    background:#fff;

    padding:28px;

    border-radius:24px;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 8px 24px rgba(16,24,40,0.05);

    font-size:16px;

    line-height:1.9;

    color:#667085;

    margin:0;
}

.premium-seo-content a{

    color:#00a79d;

    font-weight:700;

    text-decoration:none;
}

/* =========================
SEO FEATURES
========================= */

.seo-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;
}

.seo-feature-item{

    padding:14px 22px;

    border-radius:50px;

    background:#fff;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 6px 18px rgba(0,0,0,0.04);

    font-size:14px;

    font-weight:700;

    color:#344054;

    transition:0.3s ease;
}

.seo-feature-item:hover{

    background:#00a79d;

    color:#fff;

    transform:translateY(-3px);
}

/* =========================
FAQ SECTION
========================= */

.faq-section{

    padding:90px 0;
}

.premium-faq-wrapper{

    max-width:1000px;

    margin:auto;
}

.faq-card{

    background:#fff;

    border-radius:24px;

    margin-bottom:24px;

    border:1px solid rgba(0,167,157,0.08);

    box-shadow:
    0 10px 28px rgba(16,24,40,0.05);

    overflow:hidden;

    transition:0.35s ease;
}

.faq-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 42px rgba(0,0,0,0.10);
}

.faq-question{

    width:100%;

    border:none;

    background:none;

    padding:28px 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-align:left;

    cursor:pointer;
}

.faq-question span{

    font-size:20px;

    line-height:1.7;

    font-weight:700;

    color:#12263a;

    max-width:90%;
}

.faq-icon{

    width:44px;
    height:44px;

    min-width:44px;

    border-radius:50%;

    background:rgba(0,167,157,0.10);

    color:#00a79d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    transition:0.3s ease;
}

.faq-question:hover .faq-icon,
.faq-question[aria-expanded="true"] .faq-icon{

    background:#00a79d;

    color:#fff;

    transform:rotate(45deg);
}

.faq-answer{

    padding:
    0 32px 30px;

    font-size:17px;

    line-height:1.9;

    color:#667085;
}

/* =========================
CTA SECTION
========================= */

.cta-box{

    background:
    linear-gradient(
        135deg,
        #00a79d 0%,
        #008b82 100%
    );

    border-radius:36px;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,167,157,0.25);
}

.cta-box::before{

    content:'';

    position:absolute;

    top:-100px;
    right:-100px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:rgba(255,255,255,0.08);
}

.cta-box h3{

    font-size:42px;

    font-weight:800;

    color:#fff;
}

.cta-box .lead{

    max-width:900px;

    margin:auto;

    font-size:19px;

    line-height:1.9;
}

.cta-box .btn{

    min-width:190px;

    border-radius:50px;

    font-weight:700;

    padding:14px 26px;

    transition:0.3s ease;
}

.cta-box .btn:hover{

    transform:translateY(-3px);
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px){

.premium-seo-content{

    grid-template-columns:1fr;
}

.premium-seo-title{

    font-size:40px;
}

.cta-box h3{

    font-size:34px;
}

}

@media(max-width:768px){

.two-column{

    column-count:1;
}

.premium-seo-box,
.cta-box{

    padding:36px 22px !important;

    border-radius:28px;
}

.premium-seo-title{

    font-size:30px;

    line-height:1.35;
}

.premium-seo-subtitle{

    font-size:16px;

    line-height:1.8;
}

.faq-question{

    padding:22px;
}

.faq-question span{

    font-size:16px;
}

.faq-answer{

    padding:
    0 22px 24px;

    font-size:15px;
}

.cta-box h3{

    font-size:28px;
}

.cta-box .lead{

    font-size:16px;
}

}

/* =========================
MOBILE IMPROVEMENTS
========================= */

@media (max-width:768px){

/* ==================================
1. CITY CARDS → 2 PER ROW
REMOVE DESCRIPTION
================================== */

#market-area .row.text-center{
display:flex;
flex-wrap:wrap;
margin-left:-6px;
margin-right:-6px;
}

#market-area .row.text-center > div{

width:50%;

max-width:50%;

padding-left:6px;

padding-right:6px;

margin-bottom:12px;
}

.area-box{

padding:18px !important;

border-radius:20px;

height:100%;
}

/* hide description */

.area-box p{
display:none;
}

/* smaller icon */

.city-marker-icon{

width:52px;
height:52px;

font-size:24px;

margin-bottom:14px;
}

/* title */

.area-box h5{

font-size:18px;

margin-bottom:10px;

line-height:1.4;
}

/* badge */

.service-count-badge{

padding:8px 12px;

font-size:11px;

}


/* ==================================
2. DETAILED SERVICE AREA
KEEP 2 COLUMNS IN MOBILE
================================== */

.two-column{

column-count:2 !important;

column-gap:14px;

}

.two-column li{

margin-bottom:8px;

}

.two-column li a{

padding:12px 14px;

font-size:16px;

line-height:1.65;

font-weight:500;

border-radius:12px;

}


/* city heading */

.city-link{

font-size:18px;

}

.city-heading{

margin-bottom:18px;

}

}