/* =========================================================
   HINDU COURT MARRIAGE PAGE
   ADVOCATES ACT
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.hm-page {

    --hm-navy: #06182f;
    --hm-navy-2: #0b2948;
    --hm-blue: #124c7d;

    --hm-gold: #d7a84b;
    --hm-gold-dark: #b9892d;
    --hm-gold-light: #f5dfaa;

    --hm-white: #ffffff;
    --hm-black: #101828;

    --hm-text: #273444;
    --hm-muted: #6b7787;

    --hm-bg: #f6f8fb;
    --hm-bg-2: #eef3f8;

    --hm-border: #e1e7ef;

    --hm-radius: 22px;

    color: var(--hm-text);
    background: var(--hm-white);

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;
}


/* =========================================================
   COMMON
========================================================= */

.hm-page *,
.hm-page *::before,
.hm-page *::after {
    box-sizing: border-box;
}

.hm-page img {
    max-width: 100%;
    display: block;
}

.hm-container {

    width: min(1320px, calc(100% - 40px));

    margin: 0 auto;
}

.hm-section {

    padding: 100px 0;

    position: relative;
}

.hm-section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.hm-section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--hm-gold-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.hm-section-heading h2,
.hm-content h2 {

    margin: 0;

    color: var(--hm-navy);

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.hm-section-heading h2 span,
.hm-content h2 span {

    color: var(--hm-gold-dark);

    display: inline;
}

.hm-section-heading p {

    margin: 18px auto 0;

    max-width: 680px;

    color: var(--hm-muted);

    font-size: 16px;

    line-height: 1.8;
}


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

.hm-hero {

    min-height: 690px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image:
        url("../images/hindu-court-marriage-hero.jpg");

    background-size: cover;

    background-position: center;
}

.hm-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 34, .97) 0%,
            rgba(4, 20, 39, .91) 43%,
            rgba(4, 20, 39, .65) 70%,
            rgba(4, 20, 39, .45) 100%
        );
}

.hm-hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(350px, .75fr);

    gap: 70px;

    align-items: center;

    padding: 80px 0;
}

.hm-hero-content {

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

.hm-breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

    font-size: 13px;

    color: rgba(255,255,255,.65);
}

.hm-breadcrumb a {

    color: var(--hm-gold-light);

    text-decoration: none;

    display: flex;

    gap: 7px;

    align-items: center;
}

.hm-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 15px;

    border: 1px solid rgba(215,168,75,.4);

    background: rgba(215,168,75,.09);

    color: var(--hm-gold-light);

    border-radius: 50px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 20px;
}

.hm-hero h1 {

    margin: 0;

    max-width: 780px;

    font-size: clamp(44px, 5.5vw, 72px);

    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -2.5px;
}

.hm-hero h1 span {

    display: block;

    color: var(--hm-gold-light);
}

.hm-hero-content > p {

    max-width: 680px;

    margin: 25px 0 30px;

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

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

.hm-hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-bottom: 32px;
}

.hm-btn {

    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: .3s ease;

    border: 1px solid transparent;
}

.hm-btn-gold {

    background: var(--hm-gold);

    color: var(--hm-navy);
}

.hm-btn-gold:hover {

    background: #efc66c;

    color: var(--hm-navy);

    transform: translateY(-3px);
}

.hm-btn-outline {

    color: white;

    border-color: rgba(255,255,255,.35);

    background: rgba(255,255,255,.06);
}

.hm-btn-outline:hover {

    background: white;

    color: var(--hm-navy);

    transform: translateY(-3px);
}

.hm-btn-whatsapp {

    background: #25d366;

    color: white;
}


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

.hm-trust-points {

    display: flex;

    flex-wrap: wrap;

    gap: 24px;
}

.hm-trust-points div {

    display: flex;

    align-items: center;

    gap: 9px;

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

    font-size: 13px;

    font-weight: 600;
}

.hm-trust-points i {

    color: var(--hm-gold);
}


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

.hm-hero-card {

    padding: 30px;

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

    border-radius: 24px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.25);

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

    position: relative;
}

.hm-card-top {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 22px;

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

.hm-card-icon {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    border-radius: 15px;

    display: grid;

    place-items: center;

    color: var(--hm-navy);

    background: linear-gradient(
        135deg,
        var(--hm-gold),
        var(--hm-gold-light)
    );

    font-size: 23px;
}

.hm-card-top small {

    color: var(--hm-gold-dark);

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800;
}

.hm-card-top h3 {

    margin: 4px 0 0;

    color: var(--hm-navy);

    font-size: 19px;

    line-height: 1.3;
}

.hm-card-list {

    padding: 22px 0;
}

.hm-card-list div {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 0;

    color: var(--hm-text);

    font-size: 14px;

    font-weight: 600;
}

.hm-card-list i {

    color: #168653;

    font-size: 14px;
}

.hm-card-bottom {

    padding-top: 20px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}

.hm-card-bottom span {

    color: var(--hm-muted);

    font-size: 12px;

    font-weight: 700;
}

.hm-card-bottom span i {

    color: var(--hm-gold-dark);

    margin-right: 5px;
}

.hm-card-bottom a {

    color: var(--hm-navy);

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;
}

.hm-card-bottom a i {

    color: var(--hm-gold-dark);

    margin-left: 5px;
}


/* =========================================================
   STATS
========================================================= */

.hm-stats {

    position: relative;

    z-index: 5;

    margin-top: -45px;
}

.hm-stats-grid {

    display: grid;

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

    background: white;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(7,26,51,.12);

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

    overflow: hidden;
}

.hm-stat-card {

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-right: 1px solid var(--hm-border);
}

.hm-stat-card:last-child {

    border-right: 0;
}

.hm-stat-icon {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    display: grid;

    place-items: center;

    background: #f7efd9;

    color: var(--hm-gold-dark);

    font-size: 18px;
}

.hm-stat-card strong {

    display: block;

    color: var(--hm-navy);

    font-size: 24px;

    line-height: 1;
}

.hm-stat-card span {

    display: block;

    margin-top: 5px;

    color: var(--hm-muted);

    font-size: 12px;

    font-weight: 600;
}


/* =========================================================
   TWO COLUMN
========================================================= */

.hm-two-column {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: center;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.hm-image-box {

    position: relative;

    padding-right: 25px;

    padding-bottom: 25px;
}

.hm-image-box::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 55%;

    height: 55%;

    border-radius: 22px;

    background: var(--hm-gold);

    z-index: 0;
}

.hm-image-box img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 540px;

    object-fit: cover;

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(6,24,47,.16);
}

.hm-image-badge {

    position: absolute;

    z-index: 3;

    left: -25px;

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 18px;

    background: white;

    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0,0,0,.16);
}

.hm-image-badge-icon {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    background: var(--hm-navy);

    color: var(--hm-gold);

    border-radius: 11px;
}

.hm-image-badge strong {

    display: block;

    color: var(--hm-navy);

    font-size: 13px;
}

.hm-image-badge span {

    display: block;

    margin-top: 3px;

    color: var(--hm-muted);

    font-size: 11px;
}

.hm-content p {

    color: var(--hm-muted);

    font-size: 16px;

    line-height: 1.85;

    margin: 20px 0;
}


/* =========================================================
   CHECK LIST
========================================================= */

.hm-check-list {

    display: grid;

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

    gap: 13px;

    margin-top: 25px;
}

.hm-check-list div {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    color: var(--hm-text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;
}

.hm-check-list i {

    color: #198754;

    margin-top: 2px;
}


/* =========================================================
   LAW SECTION
========================================================= */

.hm-law-section {

    background: var(--hm-bg);
}

.hm-law-grid {

    display: grid;

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

    gap: 20px;
}

.hm-law-card {

    background: white;

    padding: 30px;

    min-height: 310px;

    border-radius: var(--hm-radius);

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

    position: relative;

    overflow: hidden;

    transition: .3s ease;
}

.hm-law-card:hover {

    transform: translateY(-8px);

    border-color: var(--hm-gold);

    box-shadow:
        0 20px 45px rgba(7,26,51,.1);
}

.hm-card-number {

    position: absolute;

    top: 20px;

    right: 20px;

    color: #dfe5ec;

    font-size: 42px;

    font-weight: 900;
}

.hm-law-icon {

    width: 60px;

    height: 60px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    background: #f8efd9;

    color: var(--hm-gold-dark);

    font-size: 22px;

    margin-bottom: 25px;
}

.hm-law-card h3 {

    color: var(--hm-navy);

    margin: 0 0 12px;

    font-size: 20px;
}

.hm-law-card p {

    color: var(--hm-muted);

    line-height: 1.75;

    font-size: 14px;

    margin: 0;
}


/* =========================================================
   FEATURE / ELIGIBILITY
========================================================= */

.hm-feature-grid {

    display: grid;

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

    gap: 20px;
}

.hm-feature-card {

    padding: 30px;

    background: white;

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

    border-radius: var(--hm-radius);

    transition: .3s ease;
}

.hm-feature-card:hover {

    transform: translateY(-6px);

    border-color: var(--hm-gold);

    box-shadow: 0 20px 45px rgba(7,26,51,.08);
}

.hm-feature-icon {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    background: var(--hm-navy);

    color: var(--hm-gold);

    border-radius: 15px;

    margin-bottom: 22px;

    font-size: 20px;
}

.hm-feature-card h3 {

    color: var(--hm-navy);

    margin: 0 0 10px;

    font-size: 18px;
}

.hm-feature-card p {

    margin: 0;

    color: var(--hm-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   DOCUMENTS
========================================================= */

.hm-documents {

    background: var(--hm-bg);
}

.hm-doc-grid {

    display: grid;

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

    gap: 20px;
}

.hm-doc-card {

    padding: 30px;

    background: white;

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

    border-radius: var(--hm-radius);

    position: relative;

    overflow: hidden;

    transition: .3s ease;
}

.hm-doc-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 50px rgba(7,26,51,.1);

    border-color: var(--hm-gold);
}

.hm-doc-icon {

    width: 58px;

    height: 58px;

    border-radius: 15px;

    display: grid;

    place-items: center;

    background: #f7efd9;

    color: var(--hm-gold-dark);

    font-size: 21px;

    margin-bottom: 22px;
}

.hm-doc-card h3 {

    color: var(--hm-navy);

    font-size: 18px;

    margin: 0 0 10px;
}

.hm-doc-card p {

    color: var(--hm-muted);

    font-size: 14px;

    line-height: 1.75;

    margin: 0;

    padding-right: 15px;
}

.hm-doc-arrow {

    position: absolute;

    right: 22px;

    bottom: 22px;

    color: var(--hm-gold-dark);

    font-size: 12px;
}


/* =========================================================
   PROCESS
========================================================= */

.hm-process {

    background: white;
}

.hm-timeline {

    max-width: 950px;

    margin: 0 auto;

    position: relative;
}

.hm-timeline::before {

    content: "";

    position: absolute;

    top: 25px;

    bottom: 25px;

    left: 31px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            var(--hm-gold),
            #dfe5ec
        );
}

.hm-process-step {

    position: relative;

    display: grid;

    grid-template-columns:
        65px 65px 1fr;

    gap: 20px;

    align-items: center;

    margin-bottom: 22px;

    padding: 20px;

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

    border-radius: 17px;

    background: white;

    transition: .3s ease;
}

.hm-process-step:hover {

    transform: translateX(8px);

    border-color: var(--hm-gold);

    box-shadow: 0 15px 40px rgba(7,26,51,.08);
}

.hm-process-number {

    color: var(--hm-gold-dark);

    font-size: 12px;

    font-weight: 900;

    text-align: center;
}

.hm-process-icon {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    background: var(--hm-navy);

    color: var(--hm-gold);

    border-radius: 50%;

    position: relative;

    z-index: 2;

    font-size: 18px;
}

.hm-process-content h3 {

    margin: 0 0 6px;

    color: var(--hm-navy);

    font-size: 18px;
}

.hm-process-content p {

    margin: 0;

    color: var(--hm-muted);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   CERTIFICATE
========================================================= */

.hm-certificate {

    background: var(--hm-bg);
}

.hm-certificate-visual {

    display: flex;

    justify-content: center;
}

.hm-certificate-paper {

    width: min(100%, 470px);

    min-height: 430px;

    padding: 45px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f7f0df
        );

    border: 12px solid #e7d8b6;

    outline: 1px solid #c8aa6d;

    box-shadow:
        0 30px 60px rgba(7,26,51,.16);

    text-align: center;

    position: relative;
}

.hm-certificate-top {

    width: 65px;

    height: 65px;

    margin: 0 auto 18px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--hm-gold-dark);

    border: 2px solid var(--hm-gold);

    font-size: 23px;
}

.hm-certificate-paper small {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #80672d;
}

.hm-certificate-paper h3 {

    color: var(--hm-navy);

    font-family: Georgia, serif;

    font-size: 30px;

    line-height: 1.3;

    letter-spacing: 3px;

    margin: 20px 0;
}

.hm-certificate-paper > p {

    color: #776d5b;

    font-size: 14px;
}

.hm-certificate-line {

    width: 70%;

    height: 1px;

    margin: 20px auto;

    background: #cdbb92;
}

.hm-certificate-seal {

    position: absolute;

    bottom: 25px;

    right: 25px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    border: 2px solid #c7a54f;

    color: #b68b32;

    opacity: .8;
}


/* =========================================================
   BENEFITS
========================================================= */

.hm-benefits {

    background: var(--hm-navy);

    color: white;
}

.hm-benefits .hm-section-label {

    color: var(--hm-gold-light);
}

.hm-benefits .hm-section-heading h2 {

    color: white;
}

.hm-benefit-grid {

    display: grid;

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

    gap: 20px;
}

.hm-benefit-card {

    padding: 32px;

    border-radius: 20px;

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

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

    transition: .3s ease;
}

.hm-benefit-card:hover {

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

    transform: translateY(-7px);
}

.hm-benefit-card > i {

    color: var(--hm-gold);

    font-size: 27px;

    margin-bottom: 25px;
}

.hm-benefit-card h3 {

    color: white;

    margin: 0 0 10px;

    font-size: 18px;
}

.hm-benefit-card p {

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

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   WHY US
========================================================= */

.hm-why-image {

    position: relative;
}

.hm-why-image img {

    width: 100%;

    height: 560px;

    object-fit: cover;

    border-radius: 25px;
}

.hm-experience-card {

    position: absolute;

    left: -25px;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: var(--hm-gold);

    color: var(--hm-navy);

    padding: 20px 25px;

    border-radius: 15px;

    box-shadow: 0 15px 40px rgba(0,0,0,.2);
}

.hm-experience-card strong {

    font-size: 36px;

    line-height: 1;
}

.hm-experience-card span {

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;
}

.hm-why-list {

    margin-top: 28px;
}

.hm-why-list > div {

    display: flex;

    gap: 15px;

    padding: 17px 0;

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

.hm-why-list > div:last-child {

    border-bottom: 0;
}

.hm-why-list > div > span {

    width: 45px;

    height: 45px;

    flex: 0 0 45px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: #f8efd9;

    color: var(--hm-gold-dark);
}

.hm-why-list strong {

    display: block;

    color: var(--hm-navy);

    font-size: 15px;
}

.hm-why-list p {

    margin: 5px 0 0;

    font-size: 13px;

    line-height: 1.5;
}


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

.hm-faq {

    background: var(--hm-bg);
}

.hm-faq-wrapper {

    max-width: 900px;

    margin: 0 auto;
}

.hm-faq details {

    background: white;

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

    border-radius: 14px;

    margin-bottom: 12px;

    overflow: hidden;
}

.hm-faq summary {

    padding: 21px 24px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    color: var(--hm-navy);

    font-size: 15px;

    font-weight: 800;

    list-style: none;
}

.hm-faq summary::-webkit-details-marker {

    display: none;
}

.hm-faq summary i {

    color: var(--hm-gold-dark);

    transition: .3s ease;
}

.hm-faq details[open] summary i {

    transform: rotate(45deg);
}

.hm-faq details p {

    padding: 0 24px 22px;

    margin: 0;

    color: var(--hm-muted);

    font-size: 14px;

    line-height: 1.8;
}


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

.hm-cta {

    position: relative;

    overflow: hidden;

    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #071a33,
            #0d385f
        );

    color: white;
}

.hm-cta-pattern {

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    right: -130px;

    top: -180px;

    border: 70px solid rgba(215,168,75,.08);
}

.hm-cta-container {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;
}

.hm-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--hm-gold-light);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    margin-bottom: 15px;
}

.hm-cta h2 {

    margin: 0;

    max-width: 700px;

    color: white;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;
}

.hm-cta h2 span {

    color: var(--hm-gold-light);
}

.hm-cta p {

    max-width: 650px;

    margin: 18px 0 0;

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

    font-size: 15px;

    line-height: 1.7;
}

.hm-cta-buttons {

    display: flex;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.hm-disclaimer {

    padding: 25px 0;

    background: #f1f3f6;

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

.hm-disclaimer .hm-container {

    display: flex;

    align-items: flex-start;

    gap: 15px;
}

.hm-disclaimer-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: #916e20;

    background: #f8efd9;
}

.hm-disclaimer strong {

    display: block;

    color: var(--hm-navy);

    font-size: 13px;

    margin-bottom: 5px;
}

.hm-disclaimer p {

    margin: 0;

    color: #707b89;

    font-size: 11px;

    line-height: 1.7;
}





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

@media (max-width: 1200px) {

    .hm-hero-container {

        gap: 40px;
    }

    .hm-law-grid {

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

    .hm-benefit-grid {

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

}


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

@media (max-width: 992px) {

    .hm-section {

        padding: 75px 0;
    }

    .hm-hero-container {

        grid-template-columns: 1fr;

        padding: 70px 0;
    }

    .hm-hero-card {

        max-width: 600px;
    }

    .hm-stats-grid {

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

    .hm-stat-card:nth-child(2) {

        border-right: 0;
    }

    .hm-stat-card:nth-child(-n+2) {

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

    .hm-two-column {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hm-image-box {

        max-width: 700px;
    }

    .hm-feature-grid {

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

    .hm-doc-grid {

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

    .hm-cta-container {

        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 768px) {

    .hm-container {

        width: min(100% - 30px, 1320px);
    }

    .hm-hero {

        min-height: auto;
    }

    .hm-hero h1 {

        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .hm-hero-content > p {

        font-size: 15px;
    }

    .hm-trust-points {

        flex-direction: column;

        gap: 12px;
    }

    .hm-check-list {

        grid-template-columns: 1fr;
    }

    .hm-feature-grid,
    .hm-doc-grid {

        grid-template-columns: 1fr;
    }

    .hm-law-grid {

        grid-template-columns: 1fr;
    }

    .hm-benefit-grid {

        grid-template-columns: 1fr;
    }

    .hm-process-step {

        grid-template-columns:
            45px 55px 1fr;

        gap: 10px;

        padding: 15px;
    }

    .hm-process-number {

        font-size: 10px;
    }

    .hm-process-icon {

        width: 48px;

        height: 48px;
    }

    .hm-image-box img {

        height: 430px;
    }

    .hm-why-image img {

        height: 430px;
    }

    .hm-experience-card {

        left: 15px;

        bottom: 20px;
    }

    .hm-cta-buttons {

        width: 100%;

        flex-wrap: wrap;
    }

}


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

@media (max-width: 576px) {

    .hm-section {

        padding: 60px 0;
    }

    .hm-hero-container {

        padding: 55px 0;
    }

    .hm-hero h1 {

        font-size: 37px;
    }

    .hm-eyebrow {

        font-size: 9px;
    }

    .hm-hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .hm-btn {

        width: 100%;
    }

    .hm-stats {

        margin-top: -25px;
    }

    .hm-stat-card {

        padding: 18px;

        gap: 10px;
    }

    .hm-stat-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;
    }

    .hm-stat-card strong {

        font-size: 20px;
    }

    .hm-stat-card span {

        font-size: 10px;
    }

    .hm-image-box {

        padding-right: 10px;

        padding-bottom: 10px;
    }

    .hm-image-box img {

        height: 370px;

        border-radius: 18px;
    }

    .hm-image-badge {

        left: 5px;

        bottom: 25px;
    }

    .hm-certificate-paper {

        min-height: 390px;

        padding: 30px 20px;
    }

    .hm-certificate-paper h3 {

        font-size: 24px;
    }

    .hm-cta {

        padding: 65px 0;
    }

    .hm-cta-buttons {

        flex-direction: column;

        width: 100%;
    }

    .hm-disclaimer .hm-container {

        flex-direction: column;
    }

    .hm-floating-buttons {

        right: 12px;

        bottom: 15px;
    }

}


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

@media (max-width: 380px) {

    .hm-hero h1 {

        font-size: 32px;
    }

    .hm-stat-card {

        padding: 14px;
    }

    .hm-stat-icon {

        display: none;
    }

    .hm-process-step {

        grid-template-columns:
            35px 45px 1fr;
    }

    .hm-process-icon {

        width: 42px;

        height: 42px;

        font-size: 15px;
    }

}