/*
Theme Name: Harmony Global Immigration - Static
Author: Explode Solution
Version: 2.0
Description: Clean 4-page static WordPress theme for Harmony Global Immigration.
*/
:root{--green:#8bcf22;--green2:#5d9d16;--navy:#102a46;--text:#263746;--muted:#687785;--light:#f5f9f0;--border:#e5eadf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.65}a{text-decoration:none;color:inherit}.container{width:min(1120px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid var(--border)}.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;color:var(--navy);font-weight:900}.logo{width:50px;height:50px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;border:3px solid #fff;box-shadow:0 4px 12px #0002}.brand b{font-size:20px}.brand small{display:block;color:var(--green2);letter-spacing:1.5px;font-size:11px}.nav{display:flex;gap:28px;align-items:center;font-weight:700}.nav a:hover{color:var(--green2)}.cta{background:var(--green);color:#fff;padding:11px 18px;border-radius:30px;font-weight:800}.toggle{display:none;background:none;border:0;font-size:29px;color:var(--navy)}
.hero{background:linear-gradient(135deg,#f3f9eb,#fff);padding:90px 0}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.tag{display:inline-block;background:#e9f6d9;color:var(--green2);padding:7px 13px;border-radius:30px;font-size:13px;font-weight:800}.hero h1{font-size:clamp(42px,6vw,68px);line-height:1.05;color:var(--navy);margin:18px 0}.hero h1 span,h2 span{color:var(--green2)}.hero p{font-size:18px;color:var(--muted);max-width:620px}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.btn{display:inline-block;padding:13px 21px;border-radius:30px;font-weight:800}.green{background:var(--green);color:#fff}.dark{background:var(--navy);color:#fff}
.hero-art{height:330px;border-radius:28px;background:linear-gradient(145deg,#173f68,#0d263e);display:grid;place-items:center;box-shadow:0 20px 50px #102a4620;position:relative;overflow:hidden}.hero-art:before{content:"";position:absolute;width:360px;height:360px;border:2px solid #8bcf2266;border-radius:50%}.hero-art strong{font-size:70px;color:var(--green);z-index:1}
.section{padding:78px 0}.alt{background:var(--light)}.heading{text-align:center;max-width:720px;margin:0 auto 42px}.heading h2{font-size:40px;line-height:1.15;color:var(--navy);margin:10px 0}.heading p{color:var(--muted)}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{padding:27px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 8px 25px #102a4608}.icon{font-size:30px}.card h3{color:var(--navy);margin:12px 0 8px}.card p{color:var(--muted);font-size:14px}.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.list{display:grid;gap:15px}.item{display:flex;gap:12px}.check{width:28px;height:28px;flex:0 0 auto;background:var(--green);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900}.item b{color:var(--navy);display:block}.item span{color:var(--muted);font-size:14px}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px}.num{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900}.step h3{color:var(--navy)}.step p{color:var(--muted);font-size:14px}.pagehero{padding:65px 0;background:linear-gradient(135deg,#f3f9eb,#fff)}.pagehero h1{font-size:52px;color:var(--navy);margin:12px 0}.content{max-width:900px;margin:auto}.content h2{font-size:32px;color:var(--navy);margin-top:38px}.content p,.content li{color:var(--muted)}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.service{border:1px solid var(--border);border-radius:20px;padding:28px;background:#fff}.service h3{color:var(--navy);font-size:24px}.service ul{padding-left:20px;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}.contact-box{border:1px solid var(--border);border-radius:20px;padding:28px}.contact-box h2{color:var(--navy)}.form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form input,.form select,.form textarea{width:100%;padding:13px;border:1px solid #dbe3e7;border-radius:10px;font:inherit}.form textarea{grid-column:1/-1;min-height:130px}.form button{border:0;cursor:pointer}.full{grid-column:1/-1}.notice{background:#fff8db;border-left:4px solid #f1c62c;padding:15px;border-radius:8px;color:#66591f;font-size:14px}.footer{background:#0c1d30;color:#d7e1e8;padding:55px 0 22px}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer h3{color:#fff}.footer a:hover{color:var(--green)}.bottom{border-top:1px solid #ffffff1c;margin-top:35px;padding-top:18px;font-size:13px;display:flex;justify-content:space-between}
@media(max-width:900px){.nav{display:none;position:absolute;top:78px;left:4%;right:4%;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 35px #0002}.nav.open{display:flex}.nav a{padding:13px}.toggle{display:block}.header-cta{display:none}.hero-grid,.split,.contact-grid{grid-template-columns:1fr}.grid4,.process{grid-template-columns:1fr 1fr}.footergrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero{padding:58px 0}.section{padding:58px 0}.grid4,.process,.service-grid,.form{grid-template-columns:1fr}.form textarea,.full{grid-column:auto}.pagehero h1{font-size:40px}.footergrid{grid-template-columns:1fr}.bottom{flex-direction:column}.hero-art{height:260px}

.graphics-block{margin:0 auto 35px}.graphics-block img{display:block;width:100%;max-width:1000px;height:auto;margin:auto;border-radius:24px}.hero-art{padding:0!important;background:transparent!important;box-shadow:none!important}.hero-art img{width:100%;height:100%;object-fit:cover;border-radius:28px}
/* =========================================
   HARMONY GLOBAL - MOBILE RESPONSIVE FIX
   ========================================= */

@media screen and (max-width: 1100px) {

    .container {
        width: 92% !important;
        max-width: 92% !important;
    }

    /* HEADER */
    .header-inner {
        height: 70px !important;
    }

    .nav {
        display: none !important;
        position: absolute !important;
        top: 70px !important;
        left: 4% !important;
        right: 4% !important;
        width: auto !important;
        background: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 35px rgba(0,0,0,.15) !important;
        z-index: 9999 !important;
    }

    .nav.open {
        display: flex !important;
    }

    .nav a {
        padding: 14px !important;
        font-size: 16px !important;
    }

    .toggle {
        display: block !important;
        background: none !important;
        border: 0 !important;
        font-size: 30px !important;
        color: #102a46 !important;
    }

    .header-cta {
        display: none !important;
    }

    /* HERO */
    .hero {
        padding: 55px 0 !important;
    }

    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: stretch !important;
    }

    .hero-grid > div {
        width: 100% !important;
    }

    .hero h1 {
        font-size: 42px !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: 16px !important;
    }

    .hero-art {
        width: 100% !important;
        max-width: 520px !important;
        margin: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* SERVICES GRAPHIC */
    .graphics-block {
        width: 100% !important;
        overflow: hidden !important;
    }

    .graphics-block img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* SERVICE CARDS */
    .grid4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }

    /* WHY HARMONY */
    .split {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
        align-items: stretch !important;
    }

    .split > div {
        width: 100% !important;
    }

    /* PROCESS */
    .process {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }

    /* DESTINATIONS */
    .destinations {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }

    /* CONTACT */
    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* FOOTER */
    .footergrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media screen and (max-width: 600px) {

    .container {
        width: 90% !important;
        max-width: 90% !important;
    }

    /* HEADER */
    .brand b {
        font-size: 16px !important;
    }

    .brand small {
        font-size: 9px !important;
    }

    .logo {
        width: 44px !important;
        height: 44px !important;
    }

    /* HERO */
    .hero {
        padding: 45px 0 !important;
    }

    .hero h1 {
        font-size: 38px !important;
    }

    .hero-art {
        max-width: 100% !important;
        border-radius: 22px !important;
    }

    /* BUTTONS */
    .buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .btn {
        padding: 11px 16px !important;
        font-size: 13px !important;
    }

    /* SECTION */
    .section {
        padding: 55px 0 !important;
    }

    .heading h2 {
        font-size: 30px !important;
    }

    /* SERVICE GRAPHIC */
    .graphics-block img {
        border-radius: 18px !important;
    }

    /* SERVICE CARDS */
    .grid4 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .card {
        padding: 22px !important;
    }

    /* WHY SECTION */
    .split {
        gap: 25px !important;
    }

    .item {
        gap: 10px !important;
    }

    /* PROCESS */
    .process {
        grid-template-columns: 1fr !important;
    }

    .step {
        padding: 20px !important;
    }

    /* DESTINATIONS */
    .destinations {
        grid-template-columns: 1fr !important;
    }

    /* FORM */
    .form {
        grid-template-columns: 1fr !important;
    }

    .form textarea,
    .form .full {
        grid-column: auto !important;
    }

    /* FOOTER */
    .footergrid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .bottom {
        flex-direction: column !important;
        gap: 8px !important;
    }
}