/* ==================================
   Global Variables
================================== */

:root {

    --primary-blue: #18479b;
    --dark-blue: #0b2d68;
    --deep-blue: #081f49;

    --light-blue: #edf4ff;

    --orange: #f58220;
    --dark-orange: #d9670c;

    --canada-red: #d52b1e;
    --soft-red: #fff1f0;

    --white: #ffffff;

    --light-background: #f7f9fc;

    --dark-text: #142033;
    --body-text: #667085;

    --border-color: #e4e9f0;

    --small-shadow:
        0 12px 35px rgba(14, 45, 95, 0.08);

    --large-shadow:
        0 25px 70px rgba(14, 45, 95, 0.14);

}


/* ==================================
   Global Reset
================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Manrope", sans-serif;

    color: var(--dark-text);

    background-color: var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

ul {

    list-style: none;

}

img {

    max-width: 100%;

    display: block;

}

button,
input,
select,
textarea {

    font-family: inherit;

}

button {

    cursor: pointer;

}

.container {

    width: min(1180px, 90%);

    margin-inline: auto;

}

.section {

    padding: 110px 0;

}

.hidden-field {

    display: none;

}


/* ==================================
   Premium Floating Navbar
================================== */

.site-header {

    width: 100%;

    position: fixed;

    top: 18px;
    left: 0;

    z-index: 1000;

    transition:
        top 0.3s ease;

}

.premium-navbar {

    min-height: 82px;

    padding: 12px 15px 12px 18px;

    position: relative;

    display: flex;
    align-items: center;

    gap: 28px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #31303F,
            #394863
        );

    box-shadow:
        0 20px 60px rgba(7, 29, 68, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        min-height 0.3s ease,
        border-radius 0.3s ease,
        box-shadow 0.3s ease;

}

.site-header.scrolled {

    top: 8px;

}

.site-header.scrolled .premium-navbar {

    min-height: 72px;

    box-shadow:
        0 15px 45px rgba(7, 29, 68, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

}


/* ==================================
   Premium Brand
================================== */

.premium-brand {

    display: flex;
    align-items: center;

    gap: 13px;

    flex-shrink: 0;

}

.premium-logo {

    width: 52px;
    height: 52px;

    position: relative;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            var(--orange),
            #ffab61
        );

    box-shadow:
        0 12px 28px rgba(245, 130, 32, 0.3);

    overflow: hidden;

}

.premium-logo::before {

    content: "";

    width: 45px;
    height: 45px;

    position: absolute;

    top: -23px;
    right: -20px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.2);

}

.premium-logo span {

    position: relative;

    z-index: 2;

    color: var(--white);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1px;

}

.premium-brand-text {

    display: flex;
    flex-direction: column;

    line-height: 1.15;

}

.premium-brand-text strong {

    color: var(--white);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1.3px;

}

.premium-brand-text span{

    color:#FFFFFF;

    opacity:0.82;

    letter-spacing:2px;

    font-size:11px;

    font-weight:600;

}

/* ==================================
   Navbar Links
================================== */

.premium-nav-links {

    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 5px;

}

.premium-nav-links li {

    position: relative;

}

.premium-nav-links a {

    min-height: 44px;

    padding: 0 14px;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;

    font-weight: 700;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;

}

.premium-nav-links a:hover {

    color: var(--white);

    background-color: rgba(255, 255, 255, 0.08);

}

.premium-nav-links a.active {

    color: var(--white);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11);

}

.premium-nav-links a.active::after {

    content: "";

    width: 5px;
    height: 5px;

    position: absolute;

    left: 50%;
    bottom: 5px;

    border-radius: 50%;

    background-color: var(--orange);

    transform: translateX(-50%);

    box-shadow:
        0 0 10px rgba(245, 130, 32, 0.8);

}


/* ==================================
   Navbar Actions
================================== */

.navbar-actions {

    display: flex;
    align-items: center;

    gap: 12px;

}

.premium-phone {

    display: flex;
    align-items: center;

    gap: 10px;

}

.phone-icon {

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 11px;

    color: var(--orange);

    background-color: rgba(255, 255, 255, 0.07);

    font-size: 13px;

}

.phone-text {

    display: flex;
    flex-direction: column;

    line-height: 1.1;

}

.phone-text span {

    color: rgba(255, 255, 255, 0.55);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}

.phone-text strong {

    margin-top: 5px;

    color: var(--white);

    font-size: 11px;

    font-weight: 800;

}

.premium-navbar-button {

    min-height: 50px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 13px;

    color: var(--white);

    background:
        linear-gradient(
            145deg,
            var(--orange),
            #e86e0f
        );

    box-shadow:
        0 12px 30px rgba(245, 130, 32, 0.26);

    font-size: 11px;

    font-weight: 800;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}

.premium-navbar-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 16px 35px rgba(245, 130, 32, 0.36);

}

.premium-navbar-button i {

    transition:
        transform 0.25s ease;

}

.premium-navbar-button:hover i {

    transform: translateX(4px);

}


/* ==================================
   Mobile Menu Button
================================== */

.premium-menu-button {

    width: 46px;
    height: 46px;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 12px;

    background-color: rgba(255, 255, 255, 0.08);

}

.premium-menu-button span {

    width: 20px;
    height: 2px;

    display: block;

    border-radius: 10px;

    background-color: var(--white);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;

}

.premium-menu-button.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}

.premium-menu-button.active span:nth-child(2) {

    opacity: 0;

}

.premium-menu-button.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}

.mobile-contact-link {

    display: none;

}


/* ==================================
   Hero Section
================================== */

.hero {

    position: relative;

    overflow: hidden;

    padding-top: 125px;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #ffffff 55%,
            #f0f5fc 55%,
            #eaf2ff 100%
        );

}

.hero-grid-lines {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(24, 71, 155, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(24, 71, 155, 0.035) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

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

}

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(10px);

}

.hero-glow-one {

    width: 320px;
    height: 320px;

    left: -180px;
    top: 50px;

    background-color: rgba(213, 43, 30, 0.07);

}

.hero-glow-two {

    width: 420px;
    height: 420px;

    right: -210px;
    bottom: 0;

    background-color: rgba(245, 130, 32, 0.09);

}

.hero-layout {

    min-height: 680px;

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items: center;

    gap: 70px;

}

.hero-content {

    max-width: 680px;

}

.hero-badge {

    width: fit-content;

    padding: 8px 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid rgba(213, 43, 30, 0.15);

    border-radius: 50px;

    color: var(--canada-red);

    background-color: var(--soft-red);

    font-size: 12px;

    font-weight: 800;

}

.hero-badge i {

    font-size: 16px;

}

.hero-small-heading {

    margin-top: 24px;

    color: var(--primary-blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}

.hero-title {

    margin-top: 14px;

    max-width: 690px;

    font-family: "Playfair Display", serif;

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );

    line-height: 1.08;

    letter-spacing: -0.8px;

}

.hero-title span {

    display: block;

    color: var(--primary-blue);

}

.hero-description {

    max-width: 620px;

    margin-top: 24px;

    color: var(--body-text);

    font-size: 16px;

}

.hero-buttons {

    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 14px;

}

.main-button {

    min-height: 56px;

    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: none;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;

}

.main-button:hover {

    transform: translateY(-3px);

}

.orange-button {

    color: var(--white);

    background-color: var(--orange);

    box-shadow:
        0 15px 30px rgba(245, 130, 32, 0.25);

}

.orange-button:hover {

    background-color: var(--dark-orange);

}

.outline-button {

    color: var(--primary-blue);

    background-color: var(--white);

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

}

.outline-button:hover {

    box-shadow: var(--small-shadow);

}

.hero-statistics {

    margin-top: 42px;

    display: flex;
    flex-wrap: wrap;

    gap: 34px;

}

.hero-stat {

    padding-right: 30px;

    display: flex;
    flex-direction: column;

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

}

.hero-stat:last-child {

    border-right: none;

}

.hero-stat strong {

    color: var(--dark-blue);

    font-size: 18px;

}

.hero-stat span {

    color: var(--body-text);

    font-size: 11px;

}


/* ==================================
   Hero Image Area
================================== */

.hero-image-area {

    min-height: 560px;

    position: relative;

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

}

.image-circle {

    width: 420px;
    height: 420px;

    position: absolute;

    border: 1px solid rgba(24, 71, 155, 0.14);

    border-radius: 50%;

}

.image-circle::before,
.image-circle::after {

    content: "";

    position: absolute;

    border: 1px solid rgba(24, 71, 155, 0.08);

    border-radius: 50%;

}

.image-circle::before {

    inset: 28px;

}

.image-circle::after {

    inset: 58px;

}

.hero-person-card {

    width: 365px;
    height: 490px;

    position: relative;

    z-index: 2;

    overflow: hidden;

    border: 9px solid var(--white);

    border-radius:
        190px
        190px
        26px
        26px;

    background:
        linear-gradient(
            145deg,
            var(--primary-blue),
            var(--dark-blue)
        );

    box-shadow: var(--large-shadow);

}

.person-placeholder {

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 16px;

    color: rgba(255, 255, 255, 0.78);

    text-align: center;

}

.person-placeholder i {

    font-size: 96px;

    opacity: 0.45;

}

.person-placeholder span {

    max-width: 200px;

    font-size: 13px;

}

.hero-person-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: top center;

}

.floating-info-card {

    min-width: 205px;

    padding: 15px 17px;

    position: absolute;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 15px;

    background-color: rgba(255, 255, 255, 0.94);

    box-shadow: var(--large-shadow);

    backdrop-filter: blur(15px);

}

.floating-icon {

    min-width: 42px;
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: var(--white);

    background-color: var(--primary-blue);

}

.orange-icon {

    background-color: var(--orange);

}

.floating-info-card > div:last-child {

    display: flex;
    flex-direction: column;

}

.floating-info-card strong {

    font-size: 12px;

}

.floating-info-card span {

    color: var(--body-text);

    font-size: 10px;

}

.local-card {

    top: 76px;
    right: -35px;

}

.client-card {

    left: -35px;
    bottom: 64px;

}


/* ==================================
   Hero Bottom Strip
================================== */

.hero-bottom-strip {

    position: relative;

    z-index: 3;

    color: var(--white);

    background-color: var(--dark-blue);

}

.strip-content {

    min-height: 92px;

    display: grid;

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

    align-items: center;

    gap: 24px;

}

.strip-content div {

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

    gap: 10px;

    font-size: 13px;

    font-weight: 700;

}

.strip-content i {

    color: var(--orange);

}


/* ==================================
   Shared Section Styles
================================== */

.section-small-heading {

    color: var(--primary-blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}

.section-title {

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size:
        clamp(
            36px,
            4.5vw,
            58px
        );

    line-height: 1.08;

    letter-spacing: -0.8px;

}

.section-heading-row {

    margin-bottom: 48px;

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    align-items: end;

    gap: 50px;

}

.section-heading-row > p {

    color: var(--body-text);

}

.section-text-link {

    color: var(--primary-blue);

    font-size: 14px;

    font-weight: 800;

}

.section-text-link i {

    margin-left: 7px;

}


/* ==================================
   About Section
================================== */

.about-section {

    background-color: var(--white);

}

.about-layout {

    display: grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    align-items: center;

    gap: 90px;

}

.about-image-area {

    position: relative;

}

.about-image-card {

    height: 540px;

    padding: 22px;

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

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            var(--light-blue),
            var(--white)
        );

    box-shadow: var(--large-shadow);

}

.about-placeholder {

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 18px;

    border-radius: 22px;

    color: var(--primary-blue);

    background:
        linear-gradient(
            145deg,
            #f4f7fb,
            #eaf1fb
        );

}

.about-placeholder i {

    font-size: 90px;

    opacity: 0.28;

}

.about-placeholder span {

    color: var(--body-text);

    font-size: 13px;

}

.about-floating-card {

    padding: 18px;

    position: absolute;

    right: -34px;
    bottom: 45px;

    display: flex;
    align-items: center;

    gap: 13px;

    border-radius: 16px;

    background-color: var(--white);

    box-shadow: var(--large-shadow);

}

.about-floating-icon {

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: var(--white);

    background-color: var(--orange);

}

.about-floating-card > div:last-child {

    display: flex;
    flex-direction: column;

}

.about-floating-card strong {

    font-size: 13px;

}

.about-floating-card span {

    color: var(--body-text);

    font-size: 10px;

}

.about-content > p {

    margin-top: 18px;

    color: var(--body-text);

}

.about-check-list {

    margin: 28px 0;

    display: grid;

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

    gap: 14px;

}

.about-check-list div {

    font-size: 13px;

    font-weight: 700;

}

.about-check-list i {

    margin-right: 7px;

    color: var(--orange);

}


/* ==================================
   Services Section
================================== */

.services-section {

    background-color: var(--light-background);

}

.services-grid {

    display: grid;

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

    gap: 22px;

}

.service-card {

    min-height: 390px;

    padding: 30px 26px;

    position: relative;

    overflow: hidden;

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

    border-radius: 22px;

    background-color: var(--white);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}

.service-card:hover {

    transform: translateY(-8px);

    border-color: transparent;

    box-shadow: var(--large-shadow);
    background:#31303F;

}

.service-number {

    position: absolute;

    top: 16px;
    right: 22px;

    color: rgba(24, 71, 155, 0.08);

    font-family: "Playfair Display", serif;

    font-size: 44px;

}

.service-icon {

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    color: var(--white);

    background:#4F6FAF;

    font-size: 20px;

}

.service-card h3 {

    margin-top: 28px;

    font-size: 21px;

}

.service-card p {

    margin-top: 14px;

    color: var(--body-text);

    font-size: 13px;

}

.service-card a {

    position: absolute;

    left: 26px;
    bottom: 28px;

    color: var(--dark-orange);

    font-size: 13px;

    font-weight: 800;

}

.service-card a i {

    margin-left: 6px;

}


/* ==================================
   Why Choose Section
================================== */

.why-section {

    position: relative;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--dark-blue),
            #123d83
        );

}

.why-section::after {

    content: "";

    width: 500px;
    height: 500px;

    position: absolute;

    top: -190px;
    right: -180px;

    border: 70px solid rgba(255, 255, 255, 0.025);

    border-radius: 50%;

}

.why-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    align-items: center;

    gap: 90px;

}

.light-heading {

    color: #ffb16f;

}

.white-title {

    color: var(--white);

}

.why-content > p {

    margin-top: 18px;

    color: rgba(255, 255, 255, 0.72);

}

.why-list {

    margin-top: 36px;

    display: grid;

    gap: 22px;

}

.why-item {

    display: grid;

    grid-template-columns:
        52px
        1fr;

    align-items: start;

    gap: 16px;

}

.why-item > span {

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #ffb16f;

    background-color: rgba(255, 255, 255, 0.08);

    font-weight: 800;

}

.why-item h3 {

    font-size: 17px;

}

.why-item p {

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;

}

.why-action-card {

    padding: 48px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 28px;

    background-color: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);

}

.canada-icon {

    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    color: var(--canada-red);

    background-color: var(--white);

    font-size: 32px;

}

.why-action-card > p {

    margin-top: 32px;

    color: #ffb16f;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

}

.why-action-card h3 {

    margin: 12px 0 28px;

    font-family: "Playfair Display", serif;

    font-size: 34px;

    line-height: 1.2;

}

.white-button {

    color: var(--dark-blue);

    background-color: var(--white);

}


/* ==================================
   Process Section
================================== */

.process-section {

    background-color: var(--white);

}

.center-section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}

.center-section-heading > p:last-child {

    margin-top: 16px;

    color: var(--body-text);

}

.process-grid {

    position: relative;

    display: grid;

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

    gap: 22px;

}

.process-grid::before {

    content: "";

    height: 1px;

    position: absolute;

    top: 40px;
    left: 12%;
    right: 12%;

    background-color: var(--border-color);

}

.process-card {

    position: relative;

    z-index: 2;

    padding: 0 15px;

    text-align: center;

}

.process-number {

    width: 80px;
    height: 80px;

    margin: 0 auto;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    color: var(--primary-blue);

    background-color: var(--white);

    box-shadow:
        0 10px 30px rgba(14, 45, 95, 0.08);

    font-weight: 800;

}

.process-card > i {

    margin-top: 28px;

    color: var(--orange);

    font-size: 23px;

}

.process-card h3 {

    margin-top: 14px;

    font-size: 18px;

}

.process-card p {

    margin-top: 8px;

    color: var(--body-text);

    font-size: 12px;

}


/* ==================================
   Contact Section
================================== */

.contact-section {

    background-color: var(--light-background);

}

.contact-layout {

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    align-items: start;

    gap: 70px;

}

.contact-content > p {

    margin-top: 18px;

    color: var(--body-text);

}

.contact-information {

    margin-top: 35px;

    display: grid;

    gap: 16px;

}

.contact-information > * {

    padding: 16px 0;

    display: flex;
    align-items: center;

    gap: 14px;

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

}

.contact-icon {

    min-width: 46px;
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: var(--primary-blue);

    background-color: var(--light-blue);

}

.contact-information > * > div:last-child {

    display: flex;
    flex-direction: column;

}

.contact-information small {

    color: var(--body-text);

    font-size: 10px;

    letter-spacing: 1px;

}

.contact-information strong {

    margin-top: 3px;

    font-size: 13px;

}


/* ==================================
   Contact Form
================================== */

.contact-form-card {

    padding: 38px;

    border-radius: 24px;

    background-color: var(--white);

    box-shadow: var(--large-shadow);

}

.form-heading span {

    color: var(--dark-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

}

.form-heading h3 {

    margin-top: 5px;

    font-family: "Playfair Display", serif;

    font-size: 32px;

}

form {

    margin-top: 28px;

}

.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 16px;

}

.form-group {

    margin-bottom: 17px;

}

.form-group label {

    margin-bottom: 7px;

    display: block;

    font-size: 11px;

    font-weight: 800;

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 14px 15px;

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

    border-radius: 12px;

    color: var(--dark-text);

    background-color: #fbfcfe;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

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

    box-shadow:
        0 0 0 4px rgba(24, 71, 155, 0.08);

}

textarea {

    resize: vertical;

}

.form-submit-button {

    width: 100%;

}

.form-note {

    margin-top: 12px;

    color: var(--body-text);

    font-size: 9px;

    text-align: center;

}


/* ==================================
   Footer
================================== */

.footer {

    padding: 70px 0 25px;

    color: var(--white);

    background:#31303F;

}

.footer-grid {

    display: grid;

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

    gap: 45px;

}

.footer-brand-area p {

    max-width: 360px;

    margin-top: 20px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;

}

.footer-column {

    display: flex;
    flex-direction: column;

    gap: 10px;

}

.footer-column h4 {

    margin-bottom: 8px;

    font-size: 13px;

}

.footer-column a,
.footer-column span {

    color: rgba(255, 255, 255, 0.64);

    font-size: 12px;

}

.footer-column a:hover {

    color: var(--white);

}

.footer-bottom {

    margin-top: 50px;

    padding-top: 22px;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.5);

    font-size: 10px;

}


/* ==================================
   WhatsApp Button
================================== */

.whatsapp-button {

    width: 58px;
    height: 58px;

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--white);

    background-color: #25d366;

    box-shadow:
        0 18px 40px rgba(37, 211, 102, 0.32);

    font-size: 25px;

    transition:
        transform 0.25s ease;

}

.whatsapp-button:hover {

    transform:
        translateY(-4px)
        scale(1.04);

}


/* ==================================
   Scroll Reveal Animation
================================== */

.reveal {

    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;

}

.reveal.show {

    opacity: 1;

    transform: translateY(0);

}


/* ==================================
   Responsive - Tablet
================================== */

@media (max-width: 1120px) {

    .phone-text {

        display: none;

    }

    .premium-phone {

        width: 42px;
        height: 42px;

    }

    .phone-icon {

        width: 42px;
        height: 42px;

    }

}


@media (max-width: 1020px) {

    .premium-navbar-button,
    .premium-phone {

        display: none;

    }

    .premium-menu-button {

        margin-left: auto;

        display: flex;

    }

    .premium-nav-links {

        width: 100%;

        margin: 0;

        padding: 14px;

        position: absolute;

        top: calc(100% + 12px);
        left: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        border: 1px solid rgba(255, 255, 255, 0.12);

        border-radius: 17px;

        background:
            linear-gradient(
                145deg,
                rgba(8, 30, 71, 0.99),
                rgba(17, 57, 125, 0.99)
            );

        box-shadow:
            0 25px 60px rgba(7, 29, 68, 0.35);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-12px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;

    }

    .premium-nav-links.show {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

    .premium-nav-links a {

        width: 100%;

        min-height: 48px;

        padding: 0 15px;

        justify-content: flex-start;

    }

    .premium-nav-links a.active::after {

        width: 4px;
        height: 20px;

        left: 5px;
        top: 50%;
        bottom: auto;

        border-radius: 10px;

        transform: translateY(-50%);

    }

    .mobile-contact-link {

        margin-top: 5px;

        display: block;

    }

    .mobile-contact-button {

        justify-content: center !important;

        color: var(--white) !important;

        background:
            linear-gradient(
                145deg,
                var(--orange),
                #e86e0f
            ) !important;

    }

    .hero {

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

    }

    .hero-layout {

        padding: 90px 0 70px;

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-badge{
        background:#EEF2F7;

        color:#31303F;

        border:1px solid #D9E1EC;
    }
    .hero-buttons,
    .hero-statistics {

        margin-left: auto;
        margin-right: auto;

        justify-content: center;

    }

    .hero-description {

        margin-left: auto;
        margin-right: auto;

    }

    .strip-content {

        padding: 22px 0;

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

    }

    .about-layout,
    .why-layout,
    .contact-layout {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .about-image-area {

        width: 100%;
        max-width: 650px;

        margin-inline: auto;

    }

    .about-floating-card {

        right: 20px;

    }

    .section-heading-row {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .services-grid {

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

    }

    .process-grid {

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

        gap: 45px 20px;

    }

    .process-grid::before {

        display: none;

    }

    .footer-grid {

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

    }

}


/* ==================================
   Responsive - Mobile
================================== */

@media (max-width: 640px) {

    .section {

        padding: 82px 0;

    }

    .site-header {

        top: 8px;

    }

    .premium-navbar {

        min-height: 68px;

        padding: 8px 9px 8px 11px;

        border-radius: 15px;

    }

    .premium-logo {

        width: 44px;
        height: 44px;

        border-radius: 13px;

    }

    .premium-brand-text strong {

        font-size: 12px;

    }

    .premium-brand-text span {

        font-size: 8px;

    }

    .premium-menu-button {

        width: 42px;
        height: 42px;

    }

    .hero {

        padding-top: 100px;

    }

    .hero-layout {

        min-height: auto;

        padding-top: 65px;

    }

    .hero-title {

        font-size: 48px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .main-button {

        width: 100%;

    }

    .hero-statistics {

        gap: 20px;

    }

    .hero-stat {

        padding-right: 18px;

    }

    .hero-image-area {

        min-height: 500px;

    }

    .hero-person-card {

        width: 285px;
        height: 410px;

    }

    .image-circle {

        width: 330px;
        height: 330px;

    }

    .floating-info-card {

        min-width: 175px;

    }

    .local-card {

        top: 55px;
        right: 0;

    }

    .client-card {

        left: 0;
        bottom: 35px;

    }

    .strip-content {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .strip-content div {

        justify-content: flex-start;

    }

    .about-image-card {

        height: 420px;

    }

    .about-floating-card {

        width: fit-content;

        margin: -30px auto 0;

        position: relative;

        right: auto;
        bottom: auto;

    }

    .about-check-list,
    .services-grid,
    .process-grid,
    .form-row,
    .footer-grid {

        grid-template-columns: 1fr;

    }

    .service-card {

        min-height: 350px;

    }

    .why-action-card,
    .contact-form-card {

        padding: 28px;

    }

    .testimonial-card {

        padding: 48px 24px;

    }

    .footer-bottom {

        flex-direction: column;

    }

    .whatsapp-button {

        width: 52px;
        height: 52px;

        right: 16px;
        bottom: 16px;

    }

}
.about-layout-single {
    grid-template-columns: 1fr;
    max-width: 900px;
}

.about-layout-single .about-content {
    text-align: center;
}

.about-layout-single .about-content > p {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.about-layout-single .about-check-list {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.about-layout-single .section-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.actual-logo-box {
    padding: 8px;
    background: var(--white);
}

.actual-logo-box::before {
    display: none;
}

.navbar-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ==================================================
   ARIF KHAN WEBSITE — PREMIUM DARK EXP UPGRADE
   Paste this complete code at the END of style.css
================================================== */


/* ==================================================
   Updated Premium Colour Palette
================================================== */

:root {

    /* Main Brand */

    --primary-blue: #4F6FAF;
    --dark-blue: #31303F;
    --deep-blue: #252432;

    /* Light Theme */

    --light-blue: #EEF2F7;

    /* Grey Theme */

    --body-text: #6B7280;
    --dark-text: #31303F;

    /* Background */

    --white: #FFFFFF;
    --light-background: #F8FAFC;

    /* Borders */

    --border-color: #D9E1EC;

    /* Accent */

    --silver: #C9D2DF;

    /* Remove Orange */

    --orange: #4F6FAF;
    --dark-orange: #31303F;

    /* Remove Red */

    --canada-red: #4F6FAF;
    --soft-red: #EEF2F7;

}


/* ==================================================
   Premium Body Background
================================================== */

body {
    background-color: var(--white);
}


/* ==================================================
   Darker Premium Floating Navbar
================================================== */

.site-header {
    top: 16px;
}

.premium-navbar {
    min-height: 78px;

    border: 1px solid rgba(255, 255, 255, 0.11);

    background:
        linear-gradient(
            115deg,
            rgba(4, 24, 52, 0.98) 0%,
            rgba(5, 35, 73, 0.98) 48%,
            rgba(8, 52, 103, 0.97) 100%
        );

    box-shadow:
        0 22px 65px rgba(2, 19, 41, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.site-header.scrolled .premium-navbar {
    background:
        linear-gradient(
            115deg,
            rgba(3, 21, 45, 0.99),
            rgba(6, 41, 84, 0.99)
        );

    box-shadow:
        0 18px 55px rgba(2, 18, 39, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ==================================================
   Premium Logo Styling
================================================== */

.actual-logo-box {
    width: 58px;
    height: 58px;

    padding: 7px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 16px;

    background-color: var(--white);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22);
}

.navbar-logo-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.premium-brand-text strong {
    font-size: 15px;
    letter-spacing: 1.5px;
}

.premium-brand-text span {
    color: var(--light-orange);
    font-size: 9px;
    letter-spacing: 1px;
}


/* ==================================================
   Premium Navigation Links
================================================== */

.premium-nav-links a {
    padding: 0 15px;

    color: rgba(255, 255, 255, 0.70);

    font-size: 12px;
    font-weight: 700;
}

.premium-nav-links a:hover {
    color: var(--white);

    background-color: rgba(255, 255, 255, 0.09);
}

.premium-nav-links a.active {
    color: var(--white);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.06)
        );
}

.premium-nav-links a.active::after {
    background-color: var(--orange);

    box-shadow:
        0 0 12px rgba(245, 130, 32, 0.95);
}


/* ==================================================
   Premium Navbar CTA
================================================== */

.premium-navbar-button {
    min-height: 51px;

    padding: 0 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background:
        linear-gradient(
            135deg,
            #ff963d,
            var(--orange),
            #dd6509
        );

    box-shadow:
        0 14px 34px rgba(245, 130, 32, 0.32);

    font-size: 11px;
    letter-spacing: 0.2px;
}

.premium-navbar-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 42px rgba(245, 130, 32, 0.45);
}

.phone-icon {
    color: var(--light-orange);

    border-color: rgba(255, 255, 255, 0.13);

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


/* ==================================================
   Premium Dark Hero Section
================================================== */

.hero {
    min-height: 100vh;

    padding-top: 125px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(31, 93, 158, 0.48),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(245, 130, 32, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #31303F 0%,
            #404B65 45%,
            #4F6FAF 100%
        );
}

.hero-grid-lines {
    opacity: 0.42;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;
}

.hero-glow-one {
    width: 420px;
    height: 420px;

    top: -120px;
    left: -220px;

    background-color: rgba(245, 130, 32, 0.15);

    filter: blur(35px);
}

.hero-glow-two {
    width: 500px;
    height: 500px;

    right: -230px;
    bottom: -140px;

    background-color: rgba(36, 105, 177, 0.27);

    filter: blur(40px);
}


/* ==================================================
   Hero Typography
================================================== */

.hero-small-heading {
    color: var(--light-orange);

    font-size: 11px;
    letter-spacing: 2.5px;
}

.hero-title {
    color: var(--white);

    text-shadow:
        0 14px 40px rgba(0, 0, 0, 0.22);
}

.hero-title span {
    position: relative;

    display: inline-block;

    color: var(--light-orange);
}

.hero-title span::after {
    content: "";

    width: 100%;
    height: 10px;

    position: absolute;

    left: 0;
    bottom: 4px;

    z-index: -1;

    border-radius: 20px;

    background-color: rgba(245, 130, 32, 0.16);
}

.hero-description {
    max-width: 610px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.9;
}


/* ==================================================
   Canadian Location Badge
================================================== */

.hero-badge {
    color: var(--white);

    border-color: rgba(255, 255, 255, 0.15);

    background-color: rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(10px);
}

.hero-badge i {
    color: #ff5549;
}


/* ==================================================
   Premium Hero Buttons
================================================== */

.orange-button {
    border: 1px solid rgba(255, 255, 255, 0.10);

    background:#4F6FAF;

    color:white;

    box-shadow: 0 12px 30px rgba(79,111,175,.25);
}

.orange-button:hover {
    background:#31303F;

    box-shadow:
        0 21px 48px rgba(245, 130, 32, 0.45);
}

.hero .outline-button {
    color: var(--white);

    border-color: rgba(255, 255, 255, 0.20);

    background-color: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);
}

.hero .outline-button:hover {
    border-color: rgba(255, 255, 255, 0.34);

    background-color: rgba(255, 255, 255, 0.14);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);
}


/* ==================================================
   Hero Statistics
================================================== */

.hero-stat {
    border-color: rgba(255, 255, 255, 0.16);
}

.hero-stat strong {
    color: var(--white);

    font-size: 20px;
}

.hero-stat span {
    color: rgba(255, 255, 255, 0.58);
}


/* ==================================================
   Premium Realtor Image
================================================== */

.image-circle {
    width: 440px;
    height: 440px;

    border-color: rgba(255, 255, 255, 0.13);
}

.image-circle::before,
.image-circle::after {
    border-color: rgba(255, 255, 255, 0.07);
}

.hero-person-card {
    width: 385px;
    height: 520px;

    border: 8px solid rgba(255, 255, 255, 0.96);

    border-radius:
        200px
        200px
        28px
        28px;

    background:
        linear-gradient(
            145deg,
            #164d8b,
            #061f42
        );

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.38);
}

/* This fixes your current HTML class hero-person-image */

.hero-person-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: top center;
}


/* ==================================================
   Floating Hero Cards
================================================== */

.floating-info-card {
    border: 1px solid rgba(255, 255, 255, 0.60);

    background-color: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.28);
}

.floating-info-card strong {
    color: var(--dark-blue);
}

.floating-icon {
    background:#4F6FAF;
}

.orange-icon {
    background:
        linear-gradient(
            135deg,
            #ff9b48,
            var(--orange)
        );
}


/* ==================================================
   Hero Bottom Strip
================================================== */

.hero-bottom-strip {
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            90deg,
            #03172f,
            #062750,
            #03172f
        );
}

.strip-content div {
    color: rgba(255, 255, 255, 0.82);
}

.strip-content i {
    color: var(--light-orange);
}


/* ==================================================
   Premium About Section Without Image
================================================== */

.about-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(24, 71, 155, 0.06),
            transparent 30%
        ),
        var(--white);
}

.about-section::before {
    content: "AK";

    position: absolute;

    top: 20px;
    right: 5%;

    color: rgba(11, 45, 104, 0.025);

    font-family: "Playfair Display", serif;
    font-size: 230px;
    font-weight: 800;

    pointer-events: none;
}

.about-layout-single {
    max-width: 980px;

    padding: 65px 70px;

    position: relative;

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

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(242, 247, 253, 0.96)
        );

    box-shadow:
        0 30px 90px rgba(4, 29, 61, 0.12);
}

.about-layout-single::before {
    content: "";

    width: 90px;
    height: 5px;

    position: absolute;

    top: 0;
    left: 50%;

    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            var(--primary-blue),
            var(--orange)
        );

    transform: translateX(-50%);
}

.about-layout-single .about-content > p {
    line-height: 1.9;
}

.about-check-list div {
    padding: 14px 17px;

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

    border-radius: 13px;

    background-color: var(--white);

    box-shadow:
        0 8px 24px rgba(4, 29, 61, 0.06);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.about-check-list div:hover {
    transform: translateY(-3px);

    border-color: rgba(245, 130, 32, 0.35);

    box-shadow:
        0 14px 30px rgba(4, 29, 61, 0.10);
}


/* ==================================================
   Premium Services Section
================================================== */

.services-section {
    background:
        linear-gradient(
            180deg,
            #f3f7fc,
            #eef4fb
        );
}

.service-card {
    min-height: 405px;

    border-color: rgba(12, 50, 101, 0.10);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbfe
        );

    box-shadow:
        0 12px 38px rgba(4, 29, 61, 0.06);
}

.service-card::before {
    content: "";

    width: 100%;
    height: 5px;

    position: absolute;

    top: 0;
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--primary-blue),
            var(--orange)
        );

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform 0.35s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    color: var(--white);

    border-color: transparent;

    background:
        linear-gradient(
            145deg,
            #092e5e,
            #041d3d
        );

    transform: translateY(-10px);

    box-shadow:
        0 28px 70px rgba(4, 29, 61, 0.26);
}

.service-card:hover h3 {
    color: var(--white);
}

.service-card:hover p {
    color: rgba(255, 255, 255, 0.68);
}

.service-card:hover .service-number {
    color: rgba(255, 255, 255, 0.08);
}

.service-card:hover a {
    color: var(--light-orange);
}

.service-card:hover .service-icon {
    color: var(--dark-blue);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dce9f8
        );
}


/* ==================================================
   Stronger Why Section
================================================== */

.why-section {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(31, 92, 158, 0.32),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #03182f,
            #062a56,
            #0a3d76
        );
}

.why-action-card {
    border-color: rgba(255, 255, 255, 0.14);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.05)
        );

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(18px);
}


/* ==================================================
   Premium Process Section
================================================== */

.process-number {
    border: 4px solid var(--white);

    color: var(--white);

   background:#4F6FAF;

    box-shadow:
        0 15px 35px rgba(4, 29, 61, 0.22);
}

.process-card:hover .process-number {
    background:#31303F;

    transform: translateY(-5px);
}

.process-number {
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


/* ==================================================
   Premium Testimonial
================================================== */

.testimonial-card {
    border: none;

    color: var(--white);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(245, 130, 32, 0.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #041d3d,
            #0a3b72
        );

    box-shadow:
        0 30px 85px rgba(4, 29, 61, 0.25);
}

.testimonial-quote {
    color: rgba(255, 255, 255, 0.12);
}

.testimonial-label {
    color: var(--light-orange);
}

.testimonial-person span {
    color: rgba(255, 255, 255, 0.58);
}

.testimonial-avatar {
    color: var(--dark-blue);

    background-color: var(--white);
}


/* ==================================================
   Premium Contact Form
================================================== */

.contact-section {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(24, 71, 155, 0.06),
            transparent 30%
        ),
        #f4f7fb;
}

.contact-form-card {
    border: 1px solid rgba(12, 50, 101, 0.08);

    box-shadow:
        0 30px 85px rgba(4, 29, 61, 0.16);
}

.form-heading {
    padding-bottom: 20px;

    border-bottom: 1px solid var(--border-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    min-height: 52px;

    background-color: #f8fafc;
}

.form-group textarea {
    min-height: 135px;
}


/* ==================================================
   Premium Footer
================================================== */

.footer {
    background:
        linear-gradient(
            135deg,
            #02142b,
            #05244b
        );
}


/* ==================================================
   Mobile Dark Hero Fix
================================================== */

@media (max-width: 1020px) {

    .hero {
        background:
            radial-gradient(
                circle at 50% 65%,
                rgba(31, 93, 158, 0.35),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #03182f,
                #062a56
            );
    }

    .hero-layout {
        padding-top: 75px;
    }

    .hero-content {
        margin-inline: auto;
    }

    .local-card {
        right: 5px;
    }

    .client-card {
        left: 5px;
    }

}


@media (max-width: 640px) {

    .hero-title {
        font-size: 45px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-person-card {
        width: 285px;
        height: 410px;
    }

    .image-circle {
        width: 330px;
        height: 330px;
    }

    .about-layout-single {
        padding: 45px 24px;

        border-radius: 23px;
    }

    .about-check-list div {
        text-align: left;
    }

    .actual-logo-box {
        width: 46px;
        height: 46px;

        padding: 6px;
    }

}
/* ==================================
   Arif Commitment Section
================================== */

.commitment-section {
    padding: 0 0 110px;

    background-color: var(--white);
}

.commitment-card {
    padding: 75px 65px;

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(245, 130, 32, 0.17),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #03182f,
            #062a56,
            #0a3d76
        );

    box-shadow:
        0 30px 85px rgba(4, 29, 61, 0.25);

    text-align: center;
}

.commitment-card::before {
    content: "";

    width: 260px;
    height: 260px;

    position: absolute;

    top: -150px;
    left: -120px;

    border: 45px solid rgba(255, 255, 255, 0.035);

    border-radius: 50%;
}

.commitment-heading {
    max-width: 760px;

    margin-inline: auto;

    position: relative;

    z-index: 2;
}

.commitment-heading h2 {
    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: clamp(36px, 4.5vw, 56px);

    line-height: 1.1;
}

.commitment-heading > p:last-child {
    max-width: 680px;

    margin: 18px auto 0;

    color: rgba(255, 255, 255, 0.7);
}

.commitment-grid {
    margin-top: 48px;

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 22px;
}

.commitment-item {
    padding: 30px 24px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 20px;

    background-color: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(12px);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.commitment-item:hover {
    transform: translateY(-8px);

    border-color: rgba(245, 130, 32, 0.4);

    background-color: rgba(255, 255, 255, 0.11);
}

.commitment-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto;

    display: grid;
    place-items: center;

    border-radius: 16px;

    color: var(--dark-blue);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #dce9f8
        );

    font-size: 21px;
}

.commitment-item h3 {
    margin-top: 22px;

    font-size: 18px;
}

.commitment-item p {
    margin-top: 10px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 12px;
}

.commitment-button {
    margin-top: 38px;

    position: relative;

    z-index: 2;
}

@media (max-width: 850px) {

    .commitment-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {

    .commitment-section {
        padding-bottom: 82px;
    }

    .commitment-card {
        padding: 55px 24px;

        border-radius: 24px;
    }

}


/* ==================================================
   FINAL BLUE + WHITE + GREY THEME OVERRIDE
   Keep this at the absolute END of style.css
================================================== */

:root {
    --primary-blue: #506CAA;
    --dark-blue: #31303F;
    --deep-blue: #252432;

    --moss-grey: #686672;
    --frosted-blue: #91A3C9;

    --light-blue: #EEF2F7;
    --light-background: #F8FAFC;

    --white: #FFFFFF;
    --dark-text: #31303F;
    --body-text: #686672;
    --border-color: #D9E1EC;
    --silver: #C9D2DF;

    /* Old orange variable names now point to blue */
    --orange: #506CAA;
    --dark-orange: #31303F;
    --light-orange: #91A3C9;

    --canada-red: #506CAA;
    --soft-red: #EEF2F7;
}


/* Navbar */

.premium-navbar {
    background:
        linear-gradient(
            135deg,
            #31303F 0%,
            #3D4964 52%,
            #506CAA 100%
        );
}

.site-header.scrolled .premium-navbar {
    background:
        linear-gradient(
            135deg,
            #292834,
            #3C4966
        );
}

.premium-nav-links a.active::after {
    background-color: #91A3C9;

    box-shadow:
        0 0 12px rgba(145, 163, 201, 0.85);
}

.phone-icon {
    color: #91A3C9;
}


/* Navbar CTA */

.premium-navbar-button {
    background:
        linear-gradient(
            135deg,
            #607DB8,
            #506CAA
        );

    box-shadow:
        0 14px 34px rgba(80, 108, 170, 0.32);
}

.premium-navbar-button:hover {
    background:
        linear-gradient(
            135deg,
            #506CAA,
            #31303F
        );

    box-shadow:
        0 18px 42px rgba(49, 48, 63, 0.30);
}


/* Hero */

.hero {
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(145, 163, 201, 0.30),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(80, 108, 170, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #31303F 0%,
            #404B65 46%,
            #506CAA 100%
        );
}

.hero-glow-one {
    background-color: rgba(145, 163, 201, 0.18);
}

.hero-glow-two {
    background-color: rgba(80, 108, 170, 0.24);
}

.hero-small-heading {
    color: #D5DEEF;
}

.hero-title span {
    color: #DCE4F2;
}

.hero-title span::after {
    background-color: rgba(145, 163, 201, 0.18);
}

.hero-badge i {
    color: #DCE4F2;
}


/* Main Buttons */

.orange-button {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #607DB8,
            #506CAA
        );

    box-shadow:
        0 14px 32px rgba(80, 108, 170, 0.30);
}

.orange-button:hover {
    background:
        linear-gradient(
            135deg,
            #506CAA,
            #31303F
        );

    box-shadow:
        0 18px 40px rgba(49, 48, 63, 0.28);
}


/* Hero image cards */

.floating-icon,
.orange-icon {
    background:
        linear-gradient(
            135deg,
            #607DB8,
            #506CAA
        );
}

.hero-bottom-strip {
    background:
        linear-gradient(
            90deg,
            #292834,
            #3D4964,
            #292834
        );
}

.strip-content i {
    color: #B8C5DF;
}


/* About */

.about-layout-single::before {
    background:
        linear-gradient(
            90deg,
            #31303F,
            #506CAA,
            #91A3C9
        );
}

.about-check-list i {
    color: #506CAA;
}

.about-check-list div:hover {
    border-color: rgba(80, 108, 170, 0.42);
}


/* Services */

.service-card::before {
    background:
        linear-gradient(
            90deg,
            #31303F,
            #506CAA,
            #91A3C9
        );
}

.service-icon {
    background:
        linear-gradient(
            135deg,
            #607DB8,
            #506CAA
        );
}

.service-card:hover {
    background:
        linear-gradient(
            145deg,
            #31303F,
            #414C67
        );
}

.service-card:hover a {
    color: #C8D3E8;
}


/* Why Choose Section */

.why-section {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(145, 163, 201, 0.25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #31303F,
            #414C67,
            #506CAA
        );
}

.light-heading,
.why-action-card > p {
    color: #D5DEEF;
}

.why-item > span {
    color: #D5DEEF;
}


/* Process */

.process-number {
    background:
        linear-gradient(
            145deg,
            #607DB8,
            #506CAA
        );
}

.process-card:hover .process-number {
    background:
        linear-gradient(
            145deg,
            #506CAA,
            #31303F
        );
}

.process-card > i {
    color: #506CAA;
}


/* Contact */

.form-heading span {
    color: #506CAA;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #506CAA;

    box-shadow:
        0 0 0 4px rgba(80, 108, 170, 0.10);
}


/* Commitment Section */

.commitment-card {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(145, 163, 201, 0.20),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #31303F,
            #414C67,
            #506CAA
        );
}

.commitment-item:hover {
    border-color: rgba(145, 163, 201, 0.55);
}

.commitment-icon {
    color: #506CAA;
}


/* Footer */

.footer {
    background:
        linear-gradient(
            135deg,
            #252432,
            #31303F
        );
}


/* Mobile Theme */

@media (max-width: 1020px) {

    .premium-nav-links {
        background:
            linear-gradient(
                145deg,
                #31303F,
                #465474
            );
    }

    .mobile-contact-button {
        background:
            linear-gradient(
                135deg,
                #607DB8,
                #506CAA
            ) !important;
    }

    .hero {
        background:
            radial-gradient(
                circle at 50% 65%,
                rgba(145, 163, 201, 0.24),
                transparent 34%
            ),
            linear-gradient(
                180deg,
                #31303F,
                #506CAA
            );
    }

}

.exp-navbar-logo{
    width:70px;
    margin-top:8px;
    display:block;
    object-fit:contain;
}

/* ==================================================
   TWO-LEVEL PREMIUM NAVBAR
   Paste at the absolute END of style.css
================================================== */


/* Main Header Container */

.two-level-header {
    width: 100%;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    transition:
        transform 0.35s ease;
}


/* ==================================================
   Top Information Bar
================================================== */

.header-top-bar {

    width:100%;

    height:40px;

    background:#FFFFFF;

    border-bottom:1px solid #E5EAF2;

    transition:.35s;
}

.top-bar-content {
    height: 100%;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 30px;
}

.top-bar-item{

    color:#31303F;

    font-size:10px;

    font-weight:700;

}

.top-bar-item i{

    color:#506CAA;

}

.top-phone {
    justify-self: center;

    transition:
        color 0.25s ease;
}

.top-phone:hover{

    color:#506CAA;

}

.top-exp-brand {
    justify-self: end;

    display: inline-flex;
    align-items: center;
}

.top-exp-logo-box{

    width:78px;
    height:29px;

    padding:0;

    background:transparent;

    border:none;

    box-shadow:none;

}

.top-exp-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==================================================
   Main Navbar Wrapper
================================================== */

.main-navbar-wrapper {
    padding: 12px 0;

    transition:
        padding 0.35s ease,
        background-color 0.35s ease;
}

.main-premium-navbar {
    min-height: 78px;

    padding: 10px 12px 10px 14px;

    position: relative;

    display: flex;
    align-items: center;

    gap: 28px;

   border: 1px solid rgba(255,255,255,.12);

    border-radius: 20px;

   background:

        linear-gradient( 135deg,#31303F,#3C4966,#506CAA);

    box-shadow:

0 18px 45px rgba(0,0,0,.20);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        min-height 0.35s ease,
        border-radius 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease;
}


/* ==================================================
   Main Arif Khan Brand
================================================== */

.main-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}

.main-brand-logo {
    width: 54px;
    height: 54px;

    padding: 6px;

    display: grid;
    place-items: center;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #EEF2F7
        );

    box-shadow:
        0 9px 25px rgba(49, 48, 63, 0.10);
}

.main-brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.main-brand-text {
    display: flex;
    flex-direction: column;
    color: white;
    line-height: 1.12;
}

.main-brand-text strong {
    color:#D7E3F7;

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

    letter-spacing: 1.2px;
}

.main-brand-text span {
    margin-top: 6px;

    color: #506CAA;

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

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


/* ==================================================
   Center Navigation Capsule
================================================== */

.main-nav-links {
    margin-left: auto;

    padding: 5px;

    display: flex;
    align-items: center;

    gap: 3px;

    border: 1px solid rgba(217, 225, 236, 0.90);

    border-radius: 14px;

    background:

rgba(255,255,255,.12);

border:

1px solid rgba(255,255,255,.10);
}

.main-nav-links li {
    position: relative;
}

.main-nav-links .nav-link {
    min-height: 43px;

    padding: 0 15px;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

   color:rgba(255,255,255,.75);

    font-size: 11px;
    font-weight: 750;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.main-nav-links .nav-link:hover {
   color:white;

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

}

.main-nav-links .nav-link.active {
    background:white;

    color:#31303F;
}

.main-nav-links .nav-link.active::after {
    display: none;
}


/* ==================================================
   Schedule a Call Button
================================================== */

.schedule-call-button {
    min-height: 54px;

    padding: 5px 6px 5px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    border: 1px solid rgba(80, 108, 170, 0.18);

    border-radius: 15px;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            #607DB8,
            #506CAA
        );

    box-shadow:
        0 13px 30px rgba(80, 108, 170, 0.28);

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

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.schedule-call-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #506CAA,
            #31303F
        );

    box-shadow:
        0 17px 36px rgba(49, 48, 63, 0.26);
}

.schedule-arrow {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #506CAA;

    background-color: var(--white);

    transition:
        transform 0.25s ease;
}

.schedule-call-button:hover .schedule-arrow {
    transform: translateX(3px);
}


/* ==================================================
   Header Scroll State
================================================== */

.two-level-header.scrolled .header-top-bar {
    height: 0;

    opacity: 0;

    transform: translateY(-100%);
}

.two-level-header.scrolled .main-navbar-wrapper {
    padding: 8px 0;
}

.two-level-header.scrolled .main-premium-navbar {
    min-height: 70px;

    border-radius: 17px;

    background-color: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 16px 45px rgba(49, 48, 63, 0.18);
}

.two-level-header.scrolled .main-brand-logo {
    width: 48px;
    height: 48px;
}


/* ==================================================
   Mobile CTA Hidden on Desktop
================================================== */

.mobile-navbar-cta {
    display: none;
}


/* ==================================================
   Hero Space Adjustment
================================================== */

.hero {
    padding-top: 165px;
}


/* ==================================================
   Tablet Navigation
================================================== */

@media (max-width: 1080px) {

    .schedule-call-button {
        display: none;
    }

    .premium-menu-button {
        margin-left: auto;

        display: flex;
    }

    .main-nav-links {
        width: 100%;

        margin: 0;
        padding: 12px;

        position: absolute;

        top: calc(100% + 12px);
        left: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

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

        border-radius: 16px;

        background-color: rgba(255, 255, 255, 0.98);

        box-shadow:
            0 24px 60px rgba(49, 48, 63, 0.22);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-12px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }

    .main-nav-links.show {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .main-nav-links .nav-link {
        width: 100%;

        min-height: 48px;

        padding: 0 15px;

        justify-content: flex-start;
    }

    .mobile-navbar-cta {
        display: block;

        margin-top: 6px;
    }

    .mobile-schedule-button {
        width: 100%;
        min-height: 50px;

        padding: 0 16px;

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

        gap: 10px;

        border-radius: 11px;

        color: var(--white);

        background:
            linear-gradient(
                135deg,
                #607DB8,
                #506CAA
            );

        font-size: 12px;
        font-weight: 800;
    }

}


/* ==================================================
   Mobile Header
================================================== */

@media (max-width: 700px) {

    .header-top-bar {
        height: 35px;
    }

    .top-bar-content {
        grid-template-columns:
            1fr
            auto;

        gap: 12px;
    }

    .top-phone {
        display: none;
    }

    .top-bar-item {
        font-size: 8px;
    }

    .top-exp-logo-box {
        width: 67px;
        height: 25px;
    }

    .main-navbar-wrapper {
        padding: 8px 0;
    }

    .main-premium-navbar {
        min-height: 68px;

        padding: 8px 9px;

        border-radius: 15px;
    }

    .main-brand-logo {
        width: 45px;
        height: 45px;

        border-radius: 12px;
    }

    .main-brand-text strong {
        font-size: 12px;
    }

    .main-brand-text span {
        margin-top: 4px;

        font-size: 7px;
    }

    .hero {
        padding-top: 130px;
    }

}

/* =========================================
   MOBILE NAVBAR TEXT VISIBILITY FIX
   Keep this at the very end of style.css
========================================= */

@media (max-width: 1080px) {

    /* Mobile dropdown container */
    .main-nav-links {
        background: #ffffff !important;
        border: 1px solid #d9e1ec !important;
    }

    /* All mobile menu links */
    .main-nav-links li .nav-link {
        width: 100% !important;
        min-height: 48px;

        padding: 0 16px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        color: #31303f !important;
        background: transparent !important;

        border-radius: 11px;

        font-size: 13px;
        font-weight: 700;
    }

    /* Link hover */
    .main-nav-links li .nav-link:hover {
        color: #31303f !important;
        background: #eef2f7 !important;
    }

    /* Active link */
    .main-nav-links li .nav-link.active {
        color: #ffffff !important;

        background: linear-gradient(
            135deg,
            #607db8,
            #506caa
        ) !important;

        box-shadow: 0 8px 20px rgba(80, 108, 170, 0.22);
    }

    /* Remove old active indicator */
    .main-nav-links li .nav-link.active::after {
        display: none !important;
    }

    /* Mobile Schedule button */
    .main-nav-links .mobile-schedule-button {
        color: #ffffff !important;

        background: linear-gradient(
            135deg,
            #607db8,
            #506caa
        ) !important;
    }
}
.form-success-message {
    display: none;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #91A3C9;
    border-radius: 12px;
    color: #31303F;
    background: #EEF2F7;
    font-size: 13px;
    font-weight: 700;
}

.form-success-message i {
    margin-right: 7px;
    color: #506CAA;
}

/* ==================================================
   NETLIFY FORM SUCCESS POPUP
================================================== */

.success-popup {
    position: fixed;
    inset: 0;

    z-index: 99999;

    padding: 24px;

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

    background-color: rgba(25, 28, 40, 0.58);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.success-popup.show {
    opacity: 1;
    visibility: visible;
}

.success-box {
    width: min(440px, 100%);

    padding: 48px 36px 36px;

    position: relative;

    border: 1px solid rgba(145, 163, 201, 0.45);
    border-radius: 26px;

    color: #31303f;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(145, 163, 201, 0.22),
            transparent 30%
        ),
        #ffffff;

    box-shadow:
        0 35px 90px rgba(22, 27, 45, 0.32);

    text-align: center;

    transform: translateY(25px) scale(0.94);

    transition:
        transform 0.35s ease;
}

.success-popup.show .success-box {
    transform: translateY(0) scale(1);
}

.success-icon {
    width: 82px;
    height: 82px;

    margin: 0 auto 23px;

    display: grid;
    place-items: center;

    border: 7px solid #eef2f7;
    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #607db8,
            #506caa
        );

    box-shadow:
        0 15px 35px rgba(80, 108, 170, 0.28);

    font-size: 30px;
}

.success-label {
    margin-bottom: 8px;

    color: #506caa;

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

    letter-spacing: 2px;
}

.success-box h2 {
    color: #31303f;

    font-family: "Playfair Display", serif;
    font-size: 42px;
    line-height: 1.1;
}

.success-box > p:not(.success-label) {
    max-width: 340px;

    margin: 17px auto 0;

    color: #686672;

    font-size: 13px;
    line-height: 1.8;
}

.success-close-button {
    min-height: 52px;

    margin-top: 28px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: none;
    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #607db8,
            #506caa
        );

    box-shadow:
        0 13px 30px rgba(80, 108, 170, 0.25);

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

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.success-close-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #506caa,
            #31303f
        );

    box-shadow:
        0 17px 38px rgba(49, 48, 63, 0.25);
}

body.popup-open {
    overflow: hidden;
}


/* Submit button loading state */

.form-submit-button {
    position: relative;
}

.form-submit-button.is-loading {
    pointer-events: none;
    opacity: 0.78;
}

.form-submit-button.is-loading i {
    animation: formSpinner 0.8s linear infinite;
}

@keyframes formSpinner {
    to {
        transform: rotate(360deg);
    }
}


/* Error message */

.form-error-message {
    display: none;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #d7a7a7;
    border-radius: 11px;

    color: #7d3030;
    background-color: #fff4f4;

    font-size: 12px;
    font-weight: 700;
}

.form-error-message.show {
    display: block;
}


@media (max-width: 600px) {

    .success-box {
        padding: 42px 24px 30px;

        border-radius: 22px;
    }

    .success-box h2 {
        font-size: 36px;
    }

    .success-icon {
        width: 74px;
        height: 74px;

        font-size: 27px;
    }

    .success-close-button {
        width: 100%;
    }

}

/* =========================================
   MOBILE CONTACT FORM INPUT FIX
   Keep this at the absolute end of style.css
========================================= */

.form-group {
    position: relative;
}

.form-group label {
    position: relative;
    z-index: 1;
}

.form-group input,
.form-group select,
.form-group textarea {
    position: relative;
    z-index: 2;

    width: 100%;

    /* Prevents automatic zoom on iPhone/mobile */
    font-size: 16px !important;

    line-height: 1.4;

    -webkit-appearance: none;
    appearance: none;

    touch-action: manipulation;
}

.form-group input {
    min-height: 52px;
}

.form-group select {
    min-height: 52px;
}

.form-group textarea {
    min-height: 135px;
}


/* Mobile-specific form adjustments */

@media (max-width: 700px) {

    .contact-form-card {
        position: relative;
        z-index: 2;

        width: 100%;
        padding: 25px 18px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;

        padding: 15px 14px;

        border-radius: 11px;
    }

    .form-group label {
        font-size: 12px;
    }

}

/* =========================================
   MOBILE FORM FOCUS + HEADER JUMP FIX
========================================= */

@media (max-width: 700px) {

    /*
       Keep the header dimensions stable on mobile.
       Prevents layout jumping when keyboard opens.
    */

    .two-level-header.scrolled .header-top-bar {
        height: 35px;
        opacity: 1;
        transform: none;
    }

    .two-level-header.scrolled .main-navbar-wrapper {
        padding: 8px 0;
    }

    .two-level-header.scrolled .main-premium-navbar {
        min-height: 68px;
        border-radius: 15px;
    }

    .two-level-header.scrolled .main-brand-logo {
        width: 45px;
        height: 45px;
    }

    /*
       Better focus behavior for mobile form fields
    */

    #contactForm input,
    #contactForm select,
    #contactForm textarea {
        font-size: 16px !important;
        scroll-margin-top: 150px;
    }

    #contactForm input:focus,
    #contactForm select:focus,
    #contactForm textarea:focus {
        transform: none !important;
    }

}

/* =========================================
   FIX INVISIBLE MOBILE NAV OVERLAY
   Keep this at the absolute end of style.css
========================================= */

@media (max-width: 1080px) {

    /* Closed mobile menu must not receive clicks */
    .main-nav-links {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-12px);
    }

    /* Open mobile menu */
    .main-nav-links.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0);
    }

    /* Links should follow parent menu visibility */
    .main-nav-links li .nav-link {
        visibility: inherit !important;
        pointer-events: auto;
    }

    .main-nav-links .mobile-schedule-button {
        visibility: inherit !important;
    }

}

/* =========================================
   TOP BAR ALIGNMENT + BIGGER EXP LOGO
========================================= */

.top-bar-content {
    height: 100%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 20px;
}

/* Location stays on left */
.top-bar-content > .top-bar-item:first-child {
    grid-column: 1;
    justify-self: start;
}

/* eXp logo exact center */
.top-exp-brand {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phone moves to right */
.top-phone {
    grid-column: 3;
    grid-row: 1;

    justify-self: end;
}

/* Bigger eXp logo */
.top-exp-logo-box {
    width: 125px;
    height: 42px;

    padding: 2px 5px;

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

    border: none;
    background: transparent;
    box-shadow: none;
}

.top-exp-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}
@media (max-width: 700px) {

    .top-bar-content {
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
    }

    .top-bar-content > .top-bar-item:first-child {
        font-size: 8px;
        line-height: 1.2;
    }

    .top-exp-logo-box {
        width: 95px;
        height: 36px;
    }

    .top-phone {
        display: flex !important;

        font-size: 8px;
        white-space: nowrap;
        gap: 5px;
    }

    .top-phone i {
        font-size: 9px;
    }
}

/* =========================================
   HERO EXP LOGO
========================================= */

.hero-exp-logo {
    width: 145px;
    height: 58px;

    margin-top: 24px;
    padding: 7px 12px;

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

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18);
}

.hero-exp-logo img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;
}

@media (max-width: 1020px) {

    .hero-exp-logo {
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 640px) {

    .hero-exp-logo {
        width: 125px;
        height: 50px;
    }

}

/* =========================================
   CONTACT EXP LOGO
========================================= */

.contact-heading-with-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.contact-exp-logo {
    width: 105px;
    height: 45px;

    padding: 4px 8px;

    flex-shrink: 0;

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

    border: 1px solid #d9e1ec;
    border-radius: 10px;

    background: #ffffff;
}

.contact-exp-logo img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;
}

@media (max-width: 500px) {

    .contact-heading-with-logo {
        align-items: flex-start;
    }

    .contact-exp-logo {
        width: 85px;
        height: 38px;
    }

    .form-heading h3 {
        font-size: 27px;
    }

}

/* =========================================
   FOOTER DUAL LOGOS
========================================= */

.footer-brand-logos {
    display: flex;
    align-items: center;

    gap: 18px;
}

.footer-arif-logo {
    width: 75px;
    height: 58px;

    padding: 6px;

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

    border-radius: 12px;

    background: #ffffff;
}

.footer-exp-logo {
    width: 115px;
    height: 52px;

    padding: 5px 9px;

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

    border-radius: 10px;

    background: #ffffff;
}

.footer-arif-logo img,
.footer-exp-logo img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;
}

.footer-logo-divider {
    width: 1px;
    height: 42px;

    display: block;

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

@media (max-width: 640px) {

    .footer-brand-logos {
        gap: 12px;
    }

    .footer-arif-logo {
        width: 65px;
        height: 52px;
    }

    .footer-exp-logo {
        width: 100px;
        height: 47px;
    }

}

/* Navbar Regina REALTOR text white */

.main-brand-text span {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* Remove hero decorative circle lines
   without changing image alignment */

.image-circle {
    border-color: transparent !important;
}

.image-circle::before,
.image-circle::after {
    border: none !important;
}

/* =========================================
   HERO BUY SELL INVEST STRIP
========================================= */

.hero-highlights {
    width: 100%;

    margin-top: 38px;
    padding-top: 24px;

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

    gap: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-highlights span:not(.hero-highlight-dot) {
    color: rgba(255, 255, 255, 0.9);

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

    letter-spacing: 2.4px;
    text-transform: uppercase;

    white-space: nowrap;
}

.hero-highlight-dot {
    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background-color: #91a3c9;

    box-shadow: 0 0 10px rgba(145, 163, 201, 0.7);
}


/* Mobile */

@media (max-width: 700px) {

    .hero-highlights {
        margin-top: 30px;
        padding-top: 20px;

        justify-content: center;
        flex-wrap: wrap;

        gap: 12px 14px;
    }

    .hero-highlights span:not(.hero-highlight-dot) {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .hero-highlight-dot {
        width: 4px;
        height: 4px;
    }

}
/* ============================
   HERO NAME BADGE
============================ */

.hero-image-area{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.hero-name-badge{

    width:190px;

    margin-top:18px;

    padding:12px 16px;

    border-radius:14px;

    background:#506CAA;

    text-align:center;

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

}

.hero-name-badge h3{

    margin:0;

    font-size:18px;

    font-weight:800;

    letter-spacing:.5px;

    color:#fff;

}

.hero-name-badge p{

    margin:4px 0 8px;

    font-size:10px;

    letter-spacing:1.5px;

    color:#E8EEF9;

    text-transform:uppercase;

}
.badge-exp-logo{

    width:58px;

    height:auto;

    display:block;

    margin:0 auto;

}
@media(max-width:768px){

.hero-name-badge{

width:200px;

margin-top:18px;

padding:14px 18px;

}

.hero-name-badge h3{

font-size:18px;

}

.hero-name-badge p{

font-size:10px;

}

}
@media(max-width:768px){

.badge-exp-logo{

    width:70px;

    margin-top:12px;

}

}

@media (max-width:768px){

    .hero-name-badge{
        width:170px;
        padding:10px 14px;
    }

    .hero-name-badge h3{
        font-size:16px;
    }

    .hero-name-badge p{
        font-size:9px;
    }

    .badge-exp-logo{
        width:50px;
    }

}