:root {
    --blue: #155EEF;
    --blue-dark: #0D3FAF;
    --blue-light: #EAF2FF;

    --gold: #efbf04;
    --gold-light: #F4D98B;

    --dark: #172033;
    --text: #344054;
    --muted: #667085;

    --white: #ffffff;
    --light: #F7F9FC;
    --border: #E6EAF0;

    --shadow:
        0 20px 60px rgba(16, 24, 40, .08);
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1180px, 90%);
    margin: auto;
}


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

.contact-modern-hero {
    min-height: 680px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(circle at 85% 20%,
            rgba(21, 94, 239, .10),
            transparent 28%),
        linear-gradient(135deg,
            #FFFFFF 0%,
            #F7FAFF 55%,
            #EEF5FF 100%);
}


/* Decorative circles */

.contact-modern-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -130px;

    border-radius: 50%;

    border:
        70px solid rgba(21, 94, 239, .035);
}

.contact-modern-hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(201, 154, 50, .07);
}

.hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(21, 94, 239, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(21, 94, 239, .035) 1px,
            transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(to bottom,
            black,
            transparent);
}

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);
}

.glow-one {
    width: 280px;
    height: 280px;

    right: 15%;
    top: 20%;

    background:
        rgba(21, 94, 239, .08);
}

.glow-two {
    width: 200px;
    height: 200px;

    left: 10%;
    bottom: 0;

    background:
        rgba(201, 154, 50, .06);
}

.hero-top {
    position: absolute;

    top: 35px;
    left: 5%;
    right: 5%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 5;
}

.mini-label,
.small-title {
    color: var(--blue);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}

.mini-label {
    display: flex;

    align-items: center;

    gap: 10px;
}

.mini-label span {
    width: 32px;
    height: 2px;

    background:
        var(--gold);
}

.hero-number {
    color: #98A2B3;

    font-size: 11px;

    letter-spacing: 2px;
}

.hero-main {
    position: relative;

    z-index: 3;

    width: 100%;

    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    align-items: center;

    gap: 80px;
}

.hero-title h1 {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(55px, 8vw, 105px);

    line-height: .95;

    letter-spacing: -5px;

    font-weight: 800;

    color: var(--dark);
}

.hero-title h1 span {
    color: var(--blue);
}

.hero-title h1 strong {
    color: transparent;

    -webkit-text-stroke:
        1.5px #98A2B3;

    font-weight: 800;
}

.hero-description {
    max-width: 400px;
}

.hero-description p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 28px;
}

.scroll-btn {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 15px 21px;

    border:
        1px solid var(--border);

    background:
        rgba(255, 255, 255, .85);

    color: var(--dark);

    font-size: 11px;

    font-weight: 700;

    border-radius: 6px;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, .06);

    transition: .3s;
}

.scroll-btn i {
    color: var(--blue);
}

.scroll-btn:hover {
    color: white;

    background:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(21, 94, 239, .18);
}

.scroll-btn:hover i {
    color: white;
}

.hero-bottom {
    position: absolute;

    bottom: 30px;

    left: 5%;
    right: 5%;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);

    color: #98A2B3;

    font-size: 9px;

    letter-spacing: 2px;
}


/* ==========================================
   CONTACT INFORMATION
========================================== */

.modern-contact-info {
    padding: 80px 0;

    background:
        var(--white);
}

.section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    margin-bottom: 55px;
}

.section-heading h2,
.enquiry-intro h2,
.location-content h2 {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(40px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -3px;

    color: var(--dark);

    margin-top: 14px;
}

.section-heading h2 span,
.enquiry-intro h2 span,
.location-content h2 span {
    color: var(--blue);
}

.section-heading p {
    max-width: 400px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}

.modern-info-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.modern-info-card {
    /* min-height: 300px; */

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background:
        var(--white);

    box-shadow:
        0 8px 30px rgba(16, 24, 40, .045);

    transition:
        transform .35s,
        box-shadow .35s,
        border .35s;
}

.modern-info-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -70px;
    bottom: -70px;

    border-radius: 50%;

    background:
        var(--blue-light);

    transition: .4s;
}

.modern-info-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(21, 94, 239, .25);

    box-shadow:
        var(--shadow); 
        
        cursor: pointer;
}

.modern-info-card:hover::after {
    transform:
        scale(1.8);
}

.card-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 2;
}

.info-icon {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        var(--blue-light);

    color:
        var(--blue);

    font-size: 17px;
}

.card-top>i {
    color:
        #98A2B3;

    font-size: 12px;
}

.card-content {
    position: relative;

    z-index: 2;
}

.card-content span {
    color:
        var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.card-content h3 {
    margin-top: 10px;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 20px;

    line-height: 1.35;

    color: var(--dark);
}

.card-content p {
    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin-top: 10px;
}


/* ==========================================
   ENQUIRY SECTION
========================================== */

.modern-enquiry {
    padding: 80px 0;

    background:
        #F7F9FC;
}

.enquiry-layout {
    display: grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap: 100px;

    align-items: center;
}

.enquiry-intro>p {
    max-width: 470px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;

    margin:
        25px 0 45px;
}

.project-points {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.project-points>div {
    display: flex;

    align-items: center;

    gap: 18px;
}

.project-points span {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--blue-light);

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;
}

.project-points p {
    color:
        var(--text);

    font-size: 13px;
}


/* FORM */

.modern-form-card {
    padding: 45px;

    background:
        var(--white);

    border:
        1px solid var(--border);

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(16, 24, 40, .08);
}

.form-heading {
    margin-bottom: 35px;
}

.form-heading>span {
    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.form-heading h3 {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 27px;

    color:
        var(--dark);

    margin-top: 9px;
}

.form-heading em {
    color:
        var(--blue);

    font-style: normal;
}

.input-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 22px;
}

.modern-input {
    margin-bottom: 23px;
}

.modern-input label {
    display: block;

    color:
        #667085;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 9px;
}

.modern-input input,
.modern-input select,
.modern-input textarea {
    width: 100%;

    outline: none;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background:
        #FBFCFE;

    color:
        var(--dark);

    padding:
        13px 14px;

    font-size: 13px;

    transition: .3s;
}

.modern-input input::placeholder,
.modern-input textarea::placeholder {
    color:
        #AAB2C0;
}

.modern-input input:focus,
.modern-input select:focus,
.modern-input textarea:focus {
    border-color:
        var(--blue);

    background:
        var(--white);

    box-shadow:
        0 0 0 3px rgba(21, 94, 239, .07);
}

.modern-input textarea {
    min-height: 110px;

    resize: vertical;
}

.modern-input select {
    cursor: pointer;
}

.modern-input select option {
    color:
        var(--dark);

    background:
        white;
}

.send-btn {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        17px 20px;

    border:
        none;

    border-radius: 7px;

    color:
        white;

    background:
        linear-gradient(100deg,
            var(--blue),
            #3B82F6);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 12px 25px rgba(21, 94, 239, .18);

    transition: .3s;
}

.send-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px rgba(21, 94, 239, .25);
}

.secure-note {
    text-align: center;

    color:
        #98A2B3;

    font-size: 9px;

    margin-top: 15px;
}

.secure-note i {
    color:
        var(--blue);

    margin-right: 5px;
}


/* ==========================================
   LOCATION
========================================== */

.modern-location {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    min-height: 530px;

    background:
        var(--white);
}

.location-image {
    position: relative;

    min-height: 530px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #EEF5FF,
            #F8FAFC);
}

.location-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(rgba(21, 94, 239, .06) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(21, 94, 239, .06) 1px,
            transparent 1px);

    background-size:
        65px 65px;
}

.map-grid {
    position: absolute;

    width: 70%;
    height: 70%;

    left: 15%;
    top: 15%;

    opacity: .7;

    background-image:
        linear-gradient(25deg,
            transparent 48%,
            rgba(21, 94, 239, .12) 49%,
            transparent 50%),
        linear-gradient(-25deg,
            transparent 48%,
            rgba(21, 94, 239, .12) 49%,
            transparent 50%);

    background-size:
        90px 90px;
}

.map-pin {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        white;

    background:
        var(--blue);

    box-shadow:
        0 0 0 14px rgba(21, 94, 239, .08),

        0 0 0 30px rgba(21, 94, 239, .04),

        0 15px 35px rgba(21, 94, 239, .2);

    z-index: 3;
}

.pin-pulse {
    position: absolute;

    inset: -18px;

    border:
        1px solid rgba(21, 94, 239, .35);

    border-radius: 50%;

    animation:
        pulse 2s infinite;
}

@keyframes pulse {

    0% {
        transform: scale(.7);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }

}

.map-label {
    position: absolute;

    left: 50%;
    top:
        calc(50% + 70px);

    transform:
        translateX(-50%);

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;
}

.location-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        70px 10%;

    border-left:
        1px solid var(--border);
}

.location-content p {
    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.9;

    margin:
        25px 0 30px;
}

.direction-btn {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        14px 19px;

    border:
        1px solid var(--border);

    border-radius: 6px;

    color:
        var(--dark);

    font-size: 10px;

    font-weight: 800;

    transition: .3s;
}

.direction-btn i {
    color:
        var(--blue);
}

.direction-btn:hover {
    color:
        white;

    background:
        var(--blue);

    border-color:
        var(--blue);
}

.direction-btn:hover i {
    color:
        white;
}


/* ==========================================
   FINAL CTA
========================================== */

.modern-final {
    min-height: 500px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #F5F9FF,
            #FFFFFF);

    border-top:
        1px solid var(--border);
}

.final-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(21, 94, 239, .07);

    filter:
        blur(70px);
}

.final-content {
    position: relative;

    z-index: 2;
}

.final-content h2 {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(50px, 7vw, 95px);

    line-height: .98;

    letter-spacing: -5px;

    color:
        var(--dark);

    margin:
        18px 0 38px;
}

.final-content h2 span {
    color:
        var(--blue);
}

.final-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        16px 23px;

    color:
        white;

    background:
        var(--blue);

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(21, 94, 239, .18);

    transition: .3s;
}

.final-btn:hover {
    background:
        var(--blue-dark);

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(21, 94, 239, .25);
}

.final-big-text {
    position: absolute;

    right: -30px;

    bottom: -75px;

    color: transparent;

    font-size:
        clamp(130px, 20vw, 280px);

    font-weight: 800;

    letter-spacing: -15px;

    -webkit-text-stroke:
        1px rgba(21, 94, 239, .06);

    pointer-events: none;
}


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

@media(max-width: 1000px) {

    .hero-main {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .hero-description {
        max-width: 500px;
    }

    .modern-info-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .enquiry-layout {
        grid-template-columns:
            1fr;

        gap: 60px;
    }

    .modern-location {
        grid-template-columns:
            1fr;
    }

    .location-image {
        min-height: 430px;
    }

    .location-content {
        border-left: none;

        border-top:
            1px solid var(--border);
    }
}


@media(max-width: 650px) {

    .contact-modern-hero {
        min-height: 690px;
    }

    .hero-title h1 {
        font-size: 52px;

        letter-spacing: -3px;
    }

    .hero-bottom {
        overflow: hidden;

        white-space: nowrap;

        gap: 25px;
    }

    .hero-bottom span {
        font-size: 7px;
    }

    .section-heading {
        flex-direction: column;

        align-items: flex-start;
    }

    .modern-info-grid {
        grid-template-columns:
            1fr;
    }

    .modern-info-card {
        min-height: 260px;
    }

    .input-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }

    .modern-form-card {
        padding:
            30px 20px;
    }

    .modern-contact-info,
    .modern-enquiry {
        padding:
            80px 0;
    }

    .location-content {
        padding:
            65px 5%;
    }

    .final-content h2 {
        font-size:
            52px;

        letter-spacing:
            -3px;
    }

    .final-big-text {
        font-size:
            120px;
    }
}