/* =====================================================
   DEVMIXA – FINAL PREMIUM LANDING DESIGN (STABLE)
===================================================== */

.location-page {
    background: #f3f6ff;
    color: #0f172a;
}

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

.location-hero {
    padding: 170px 0 130px;
    background: linear-gradient(135deg,#0f172a,#1e3a8a);
    text-align: center;
    position: relative;
}

.location-hero h1 {
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.location-hero .subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    max-width: 750px;
    margin: 0 auto 60px;
}

.location-hero .city-section-image img {
    border-radius: 24px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.4);
}

/* ================= SECTION BASE ================= */

.location-services,
.location-seo,
.location-technology {
    padding: 150px 0;
}

.location-services { background: #ffffff; }
.location-seo { background: #f7f9ff; }
.location-technology { background: #ffffff; }

/* GRID */
.location-services .container,
.location-seo .container,
.location-technology .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    align-items: center;
}
/* ================= GRID ================= */

.location-services .container,
.location-seo .container,
.location-technology .container,
.location-city .container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:45px;
}

/* =========================================================
   1️⃣ SERVICES – DOUBLE LAYER FLOATING FRAME
========================================================= */

.location-services .container > div{
    position:relative;
    background:#fff;
    padding:40px;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.location-services .container > div::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:28px;
    border:2px solid #2563eb;
    opacity:.25;
    z-index:-1;
}

/* =========================================================
   2️⃣ SEO – SIDE CUT FRAME (Modern Corporate)
========================================================= */

.location-seo .container > div{
    background:#fff;
    padding:40px;
    position:relative;
    border-left:8px solid #7c3aed;
    border-bottom:8px solid #7c3aed;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* =========================================================
   3️⃣ TECHNOLOGY – ANGLED TECH FRAME
========================================================= */

.location-technology .container > div{
    background:#fff;
    padding:40px;
    position:relative;
    clip-path:polygon(
        0% 0%, 
        95% 0%, 
        100% 8%, 
        100% 100%, 
        5% 100%, 
        0% 92%
    );
    box-shadow:0 25px 50px rgba(0,0,0,0.1);
}

.location-technology .container > div::before{
    content:"";
    position:absolute;
    inset:-6px;
    clip-path:polygon(
        0% 0%, 
        95% 0%, 
        100% 8%, 
        100% 100%, 
        5% 100%, 
        0% 92%
    );
    background:#0ea5e9;
    opacity:.2;
    z-index:-1;
}

/* =========================================================
   4️⃣ CITY SECTION – GLASS BORDER FRAME
========================================================= */

.location-city .container > div{
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(10px);
    padding:40px;
    border-radius:24px;
    border:2px solid rgba(16,185,129,0.4);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* ================= HOVER EFFECT ================= */

.location-services .container > div:hover,
.location-seo .container > div:hover,
.location-technology .container > div:hover,
.location-city .container > div:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,0.15);
    transition:.4s ease;
}

/* ================= TEXT STYLE ================= */

.location-page h3{
    font-size:20px;
    font-weight:600;
    margin-bottom:15px;
    color:#0f172a;
}

.location-page p{
    font-size:15px;
    line-height:1.8;
    color:#475569;
}
/* ================= IMAGE ================= */

/* ================= CITY IMAGE FIX ================= */

.location-city .city-section-image img{
    width: 85%;
    max-width: 520px;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
    display:block;
    margin:0 auto;
}
/* ================= HEADING STYLE ================= */

.location-page h2 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.25;

    /* Premium gradient text */
    background: linear-gradient(90deg,#2563eb,#60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PARAGRAPH */
.location-page p {
    font-size: 18px;
    line-height: 1.9;
    color: #475569;
}

/* Reverse layout */
.location-seo .container {
    direction: rtl;
}
.location-seo .container > * {
    direction: ltr;
}

/* ================= WHY SECTION ================= */

.location-why {
    padding: 150px 0;
    background: #f4f8ff;
    text-align: center;
}

.location-why h2 {
    margin-bottom: 40px;
}

.location-why ul {
    margin-top: 30px;
    display: inline-block;
    text-align: left;
}

.location-why li {
    font-size: 18px;
    margin-bottom: 18px;
    padding-left: 30px;
    position: relative;
}

.location-why li::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}

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

@media (max-width: 992px) {
    .location-services .container,
    .location-seo .container,
    .location-technology .container {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .location-page h2 {
        font-size: 28px;
    }

    .location-services .container > :not(.city-section-image),
    .location-seo .container > :not(.city-section-image),
    .location-technology .container > :not(.city-section-image) {
        padding: 40px;
    }

    .location-hero h1 {
        font-size: 32px;
    }
}






/* ================= INTRO SECTION IMAGE SIZE FIX ================= */

/* Desktop */
@media (min-width:1025px){

    .location-intro .container{
        display:grid;
        grid-template-columns:1.2fr 0.8fr;
        align-items:center;
        gap:80px;
    }

    .location-intro .city-section-image{
        text-align:right;
    }

    .location-intro .city-section-image img{
        width:100%;
        max-width:480px;   /* yaha size control */
        height:auto;
    }
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){

    .location-intro .container{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:50px;
    }

    .location-intro .city-section-image img{
        max-width:420px;
        width:100%;
    }
}











/* ===== INTRO IMAGE – SIMPLE VISIBLE FRAME (NO SIZE CHANGE) ===== */

.location-intro .city-section-image{
    position:relative;
    display:inline-block;
}

.location-intro .city-section-image::before{
    content:"";
    position:absolute;
    top:12px;
    left:12px;
    right:-12px;
    bottom:-12px;
    border:2px solid #2563eb;
    border-radius:26px;
    z-index:0;
}

.location-intro .city-section-image img{
    position:relative;
    z-index:1;
    border-radius:22px;
}



/* ===== HERO & INTRO CLEAN SEPARATION ===== */

.location-hero{
    padding-bottom:160px;   /* thoda extra breathing space */
}

.location-intro{
    padding-top:100px;      /* upar se space */
}




















/* ===== PARAGRAPH WHITE SPACE FIX ===== */

.location-page p{
    margin-top:0;
    margin-bottom:12px;  /* control gap */
}

.location-page p:last-child{
    margin-bottom:0;
}





















/* =====================================================
   DEVMIXA – FINAL ULTRA PREMIUM DYNAMIC SYSTEM
   (Applies ONLY to injected 35 sections)
===================================================== */

.city-dynamic{
    position:relative;
    padding:180px 0;
    overflow:hidden;
}

/* Soft layered background depth */
.city-dynamic::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:420px;
    height:420px;
    background:radial-gradient(circle,#2563eb30,transparent 70%);
    z-index:0;
}

.city-dynamic::after{
    content:"";
    position:absolute;
    bottom:-120px;
    left:-120px;
    width:420px;
    height:420px;
    background:radial-gradient(circle,#7c3aed25,transparent 70%);
    z-index:0;
}

.city-dynamic .container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:130px;
    align-items:center;
}

/* ================= CARD SYSTEM ================= */

.city-dynamic .container > div{
    position:relative;
    padding:65px;
    border-radius:32px;
    background:linear-gradient(145deg,#ffffff,#f6f9ff);
    border:1px solid rgba(255,255,255,0.6);
    backdrop-filter:blur(16px);

    box-shadow:
        0 40px 120px rgba(0,0,0,0.08),
        0 10px 30px rgba(0,0,0,0.05);

    transition:.6s cubic-bezier(.19,1,.22,1);
}

/* Hover lift */
.city-dynamic .container > div:hover{
    transform:translateY(-14px) scale(1.02);
    box-shadow:
        0 70px 180px rgba(0,0,0,0.15),
        0 20px 50px rgba(0,0,0,0.08);
}

/* Subtle premium highlight edge */
.city-dynamic .container > div::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:36px;
    background:linear-gradient(135deg,#2563eb20,#7c3aed20);
    z-index:-1;
}

/* ================= HEADINGS ================= */

.city-dynamic h2{
    font-size:44px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:35px;

    background:linear-gradient(90deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.city-dynamic p{
    font-size:19px;
    line-height:2;
    color:#475569;
    margin-bottom:20px;
}

/* ================= LIST PREMIUM ================= */

.city-dynamic ul{
    margin-top:30px;
}

.city-dynamic li{
    list-style:none;
    position:relative;
    padding-left:38px;
    margin-bottom:20px;
    font-size:18px;
    font-weight:500;
}

.city-dynamic li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    box-shadow:0 0 0 6px rgba(124,58,237,0.15);
}

/* ================= IMAGE ULTRA FRAME ================= */

.city-dynamic .city-section-image{
    position:relative;
}

.city-dynamic .city-section-image img{
    width:100%;
    max-width:580px;
    border-radius:36px;
    box-shadow:
        0 50px 150px rgba(0,0,0,0.2),
        0 20px 60px rgba(0,0,0,0.1);
    transition:.6s ease;
}

/* Glow frame */
.city-dynamic .city-section-image::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50px;
    background:linear-gradient(135deg,#2563eb,#7c3aed,#0ea5e9);
    opacity:.15;
    z-index:-1;
}

/* Image hover float */
.city-dynamic .city-section-image img:hover{
    transform:translateY(-12px) scale(1.05);
}

/* ================= ALTERNATING FLOW ================= */

.city-dynamic:nth-of-type(even) .container{
    direction:rtl;
}

.city-dynamic:nth-of-type(even) .container > *{
    direction:ltr;
}

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

@media(max-width:1024px){

    .city-dynamic{
        padding:120px 0;
    }

    .city-dynamic .container{
        grid-template-columns:1fr;
        gap:70px;
    }

    .city-dynamic h2{
        font-size:32px;
    }
}






/* =====================================================
   FINAL ENTERPRISE 5 STYLE SYSTEM
   Clean • Premium • Tech Consistent • No Repetition
===================================================== */

/* =====================================================
   STYLE 1 – Core Tech Blue (Authority)
===================================================== */

.city-style-1{
    position:relative;
    background:linear-gradient(180deg,#f0f6ff,#ffffff);
}

.city-style-1::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:450px;
    height:450px;
    background:radial-gradient(circle,#2563eb30,transparent 70%);
}

.city-style-1 .container > div{
    border-top:4px solid #2563eb;
}

.city-style-1 h2{
    background:linear-gradient(90deg,#2563eb,#3b82f6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =====================================================
   STYLE 2 – Strategic Violet (Growth)
===================================================== */

.city-style-2{
    position:relative;
    background:linear-gradient(180deg,#f6f0ff,#ffffff);
}

.city-style-2::before{
    content:"";
    position:absolute;
    bottom:-150px;
    left:-150px;
    width:520px;
    height:520px;
    background:radial-gradient(circle,#7c3aed25,transparent 70%);
}

.city-style-2 .container > div{
    border-left:4px solid #7c3aed;
}

.city-style-2 h2{
    background:linear-gradient(90deg,#7c3aed,#a855f7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =====================================================
   STYLE 3 – Innovation Teal (Technology)
===================================================== */

.city-style-3{
    position:relative;
    background:linear-gradient(180deg,#f0fdfa,#ffffff);
}

.city-style-3::before{
    content:"";
    position:absolute;
    top:-100px;
    left:-100px;
    width:380px;
    height:380px;
    background:radial-gradient(circle,#0ea5e930,transparent 70%);
}

.city-style-3::after{
    content:"";
    position:absolute;
    bottom:-120px;
    right:-120px;
    width:380px;
    height:380px;
    background:radial-gradient(circle,#14b8a620,transparent 70%);
}

.city-style-3 .container > div{
    border-top:4px solid #0ea5e9;
}

.city-style-3 h2{
    background:linear-gradient(90deg,#0ea5e9,#14b8a6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =====================================================
   STYLE 4 – Corporate Slate (Enterprise Trust)
===================================================== */

.city-style-4{
    position:relative;
    background:linear-gradient(180deg,#f8fafc,#ffffff);
}

.city-style-4::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:600px;
    height:600px;
    background:radial-gradient(circle,#33415515,transparent 70%);
}

.city-style-4 .container > div{
    border:1px solid #e5e7eb;
    border-top:4px solid #334155;
}

.city-style-4 h2{
    background:linear-gradient(90deg,#334155,#64748b);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/* =====================================================
   STYLE 5 – Soft Sky Accent (Modern SaaS)
===================================================== */

.city-style-5{
    position:relative;
    background:linear-gradient(180deg,#eef6ff,#ffffff);
}

.city-style-5::before{
    content:"";
    position:absolute;
    top:-80px;
    left:25%;
    width:500px;
    height:300px;
    background:radial-gradient(circle,#60a5fa30,transparent 70%);
}

.city-style-5 .container > div{
    border-top:4px solid #60a5fa;
}

.city-style-5 h2{
    background:linear-gradient(90deg,#3b82f6,#60a5fa);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}






.city-dynamic .city-section-image img{
    width:100%;
    max-width:580px;
    height:auto;
    border-radius:28px;
    display:block;
}
























/* ==========================================
   GLOBAL CONTROL OVERRIDE (SAFE ADDITION)
   Add at very end of CSS
========================================== */

/* Reduce overall section height */
.location-intro,
.location-services,
.location-seo,
.location-technology,
.location-why {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Tighten hero */
.location-hero {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
}

/* Control grid spacing */
.location-services .container,
.location-seo .container,
.location-technology .container,
.location-city .container {
    gap: 50px !important;
}

/* Tight paragraph spacing */
.location-page p {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.7 !important;
}

/* Reduce heading bottom space */
.location-page h2 {
    margin-bottom: 16px !important;
}

/* Reduce subtitle bottom gap */
.location-hero .subtitle {
    margin-bottom: 30px !important;
}

/* Reduce card inner padding slightly */
.location-services .container > div,
.location-seo .container > div,
.location-technology .container > div,
.location-city .container > div {
    padding: 30px !important;
}
















/* ======================================================
   INTRO SECTION – ULTRA PREMIUM ENTERPRISE STYLE
====================================================== */

.location-intro{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#f8faff 0%, #ffffff 100%);
    overflow:hidden;
}

/* Background abstract tech glow */
.location-intro::before{
    content:"";
    position:absolute;
    top:-150px;
    left:-150px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(37,99,235,.20), transparent 70%);
}

.location-intro::after{
    content:"";
    position:absolute;
    bottom:-150px;
    right:-150px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(124,58,237,.15), transparent 70%);
}

/* Main premium content card */
.location-intro .container{
    position:relative;
    z-index:2;

    background:#ffffff;
    padding:70px 80px;
    border-radius:40px;

    box-shadow:
        0 80px 200px rgba(0,0,0,.08),
        0 20px 60px rgba(0,0,0,.05);

    border:1px solid #e2e8f0;
}

/* Typography upgrade */
.location-intro .container p{
    font-size:18px;
    line-height:1.9;
    color:#334155;
    margin-bottom:18px;
    max-width:800px;
}

/* First paragraph premium emphasis */
.location-intro .container p:first-of-type{
    font-size:20px;
    font-weight:600;
    color:#0f172a;
}

/* Subtle separator effect */
.location-intro .container p + p{
    padding-top:10px;
}

/* Remove excessive width spread */
.location-intro .container{
    max-width:1100px;
    margin:auto;
}

/* Responsive */
@media(max-width:992px){

    .location-intro{
        padding:80px 0;
    }

    .location-intro .container{
        padding:40px;
        border-radius:25px;
    }

    .location-intro .container p{
        font-size:16px;
    }
}