*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f5ef;color:#20251e}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:#172016}
.bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(10,18,10,.82),rgba(10,18,10,.35),rgba(10,18,10,.15)),url("assets/banner1.png");background-size:cover;background-position:center;transform:scale(1.02)}
.wrap{position:relative;z-index:2;width:min(1180px,92%);margin:auto;color:#fff}
.brand{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800;letter-spacing:.06em;margin:0 0 12px}
.tag{font-size:clamp(1.15rem,2.2vw,1.65rem);max-width:620px;line-height:1.55;margin:0 0 32px;color:rgba(255,255,255,.9)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:999px;background:#fff;color:#172016;text-decoration:none;font-weight:700;font-size:1rem;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:.2s}
.btn:hover{transform:translateY(-2px);background:#f0e8d4}
.note{margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.72)}
.features{background:#f7f5ef;padding:64px 0}.grid{width:min(1000px,92%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border-radius:18px;padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.06)}.card h3{margin:0 0 10px}.card p{margin:0;color:#62685f;line-height:1.6}
footer{text-align:center;padding:25px;color:#777;font-size:.9rem}
@media(max-width:700px){.hero{min-height:88vh}.grid{grid-template-columns:1fr}.wrap{text-align:center}.tag{margin-left:auto;margin-right:auto}.btn{width:100%;max-width:300px}}


/* =========================================================
   HILLMARK HERO IMAGE SLIDER
   ========================================================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 560px;
    overflow: hidden;
    background: #172016;
}


/* SLIDES */

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

    background-size: cover;
    background-position: center;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1s ease,
        transform 7s ease;

    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}


/* CONTENT */

.hero-content {
    position: relative;
    z-index: 3;

    width: min(1180px, 90%);

    margin: auto;

    color: #fff;

    padding-bottom: 20px;
}


.hero-small {
    display: inline-block;

    margin-bottom: 15px;

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

    letter-spacing: 3px;

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


.hero-content h1 {
    margin: 0 0 18px;

    max-width: 720px;

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

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.02em;
}


.hero-content p {
    max-width: 600px;

    margin: 0 0 30px;

    font-size: clamp(
        16px,
        2vw,
        21px
    );

    line-height: 1.6;

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


/* BUTTON */

.hero-btn {
    display: inline-flex;

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

    gap: 12px;

    padding: 15px 28px;

    border-radius: 50px;

    background: #fff;

    color: #172016;

    text-decoration: none;

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        background .25s ease,
        gap .25s ease;
}


.hero-btn span {
    font-size: 22px;

    line-height: 1;
}


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

    background: #f0e8d4;

    gap: 18px;
}


/* ARROWS */

.hero-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 52px;
    height: 52px;

    border: none;

    border-radius: 50%;

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

    color: #fff;

    font-size: 38px;

    line-height: 1;

    cursor: pointer;

    display: flex;

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

    backdrop-filter: blur(8px);

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-arrow:hover {
    background: rgba(255,255,255,.9);

    color: #172016;

    transform:
        translateY(-50%)
        scale(1.08);
}


.hero-prev {
    left: 28px;
}


.hero-next {
    right: 28px;
}


/* DOTS */

.hero-dots {
    position: absolute;

    z-index: 10;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;
}


.hero-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-dot.active {
    width: 30px;

    border-radius: 20px;

    background: #fff;
}


/* MOBILE */

@media (max-width: 700px) {

    .hero-slider {
        height: 78vh;
        min-height: 520px;
    }


    .hero-slide {
        background-position: center;
    }


    .hero-content {
        width: 88%;

        text-align: center;

        padding-bottom: 25px;
    }


    .hero-small {
        font-size: 11px;

        letter-spacing: 2px;
    }


    .hero-content h1 {
        font-size: 38px;

        line-height: 1.12;
    }


    .hero-content p {
        font-size: 15px;

        line-height: 1.55;

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


    .hero-btn {
        padding: 14px 24px;

        font-size: 15px;
    }


    .hero-arrow {
        width: 40px;
        height: 40px;

        font-size: 28px;
    }


    .hero-prev {
        left: 12px;
    }


    .hero-next {
        right: 12px;
    }


    .hero-dots {
        bottom: 20px;
    }

}


/* =========================================================
   HILLMARK EXPLORE SECTION
   ========================================================= */

.hm-explore-section {
    position: relative;
    padding: 90px 20px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #f5faf1 0%,
            #fffdf6 50%,
            #f3f8fc 100%
        );
}


/* BACKGROUND DECORATION */

.hm-explore-bg::before,
.hm-explore-bg::after {
    content: "";
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    filter: blur(70px);

    opacity: .25;

    pointer-events: none;
}

.hm-explore-bg::before {
    top: -120px;
    left: -100px;
    background: #9bd66f;
}

.hm-explore-bg::after {
    right: -100px;
    bottom: -120px;
    background: #8cc8ee;
}


/* CONTAINER */

.hm-explore-container {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.hm-explore-heading {
    text-align: center;
    margin-bottom: 50px;
}

.hm-explore-heading span {
    display: inline-block;

    margin-bottom: 8px;

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

    letter-spacing: 3px;

    color: #5d8050;
}

.hm-explore-heading h2 {
    margin: 0;

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

    color: #17251b;
}

.hm-explore-heading p {
    margin: 12px auto 0;

    max-width: 550px;

    font-size: 17px;

    color: #667066;
}


/* =========================================================
   GRID
   ========================================================= */

.hm-explore-grid {
    display: grid;

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

    gap: 25px;
}


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

.hm-explore-card {
    position: relative;

    min-height: 330px;

    padding: 35px 30px;

    border-radius: 24px;

    overflow: hidden;

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.08);

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


.hm-explore-card:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.14);
}


/* =========================================================
   CARD COLORS
   ========================================================= */

.hm-card-green {
    background:
        linear-gradient(
            145deg,
            #f8fff3,
            #dff3c9
        );
}

.hm-card-orange {
    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffedc4
        );
}

.hm-card-blue {
    background:
        linear-gradient(
            145deg,
            #f5fbff,
            #dcefff
        );
}


/* =========================================================
   NUMBER
   ========================================================= */

.hm-card-number {
    position: absolute;

    top: 20px;
    right: 22px;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: .55;
}


/* =========================================================
   ICON
   ========================================================= */

.hm-card-icon {
    width: 82px;
    height: 82px;

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

    margin-bottom: 30px;

    border-radius: 22px;

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.07);

    transition:
        transform .4s ease;
}

.hm-card-icon span {
    font-size: 38px;
}


.hm-explore-card:hover .hm-card-icon {
    transform:
        rotate(-7deg)
        scale(1.08);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hm-card-content {
    position: relative;
    z-index: 3;
}

.hm-card-content h3 {
    margin: 0 0 12px;

    font-size: 25px;

    font-weight: 800;
}

.hm-card-content p {
    max-width: 320px;

    margin: 0 0 25px;

    line-height: 1.65;

    font-size: 16px;

    color: #4f5b52;
}


/* =========================================================
   LINKS
   ========================================================= */

.hm-card-content a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
        gap .25s ease;
}

.hm-card-content a:hover {
    gap: 16px;
}


.hm-card-content a span {
    font-size: 21px;
}


/* COLORS */

.hm-card-green h3,
.hm-card-green a {
    color: #28702b;
}

.hm-card-orange h3,
.hm-card-orange a {
    color: #c76b00;
}

.hm-card-blue h3,
.hm-card-blue a {
    color: #176da8;
}


/* =========================================================
   GLOW
   ========================================================= */

.hm-card-glow {
    position: absolute;

    width: 170px;
    height: 170px;

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

    border-radius: 50%;

    opacity: .55;

    filter: blur(5px);

    transition:
        transform .5s ease;
}

.hm-card-green .hm-card-glow {
    background: #9bd66f;
}

.hm-card-orange .hm-card-glow {
    background: #ffd166;
}

.hm-card-blue .hm-card-glow {
    background: #83c6ef;
}


.hm-explore-card:hover .hm-card-glow {
    transform: scale(1.35);
}


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

@media(max-width: 900px) {

    .hm-explore-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: auto;
    }

    .hm-explore-card {
        min-height: 290px;
    }

}


@media(max-width: 576px) {

    .hm-explore-section {
        padding: 65px 18px;
    }

    .hm-explore-heading h2 {
        font-size: 32px;
    }

    .hm-explore-heading p {
        font-size: 15px;
    }

    .hm-explore-card {
        padding: 28px 24px;
        border-radius: 20px;
    }

}
/* =========================================================
   HILLMARK EXPLORE SECTION
   ========================================================= */

.hm-explore-section {
    position: relative;
    padding: 90px 20px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f5faf1 0%,
            #fffdf6 50%,
            #f3f8fc 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.hm-explore-bg::before,
.hm-explore-bg::after {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    filter: blur(70px);

    opacity: .25;

    pointer-events: none;
}


.hm-explore-bg::before {

    top: -120px;
    left: -100px;

    background: #9bd66f;
}


.hm-explore-bg::after {

    right: -100px;
    bottom: -120px;

    background: #8cc8ee;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.hm-explore-container {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.hm-explore-heading {

    text-align: center;

    margin-bottom: 50px;
}


.hm-explore-heading > span {

    display: inline-block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    color: #5d8050;
}


.hm-explore-heading h2 {

    margin: 0;

    font-size: 42px;

    font-weight: 800;

    color: #17251b;
}


.hm-explore-heading p {

    margin: 12px auto 0;

    max-width: 550px;

    font-size: 17px;

    color: #667066;

    line-height: 1.6;
}


/* =========================================================
   GRID
   ========================================================= */

.hm-explore-grid {

    display: grid;

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

    gap: 25px;
}


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

.hm-explore-card {

    position: relative;

    min-height: 330px;

    padding: 35px 30px;

    border-radius: 24px;

    overflow: hidden;

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.08);

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


.hm-explore-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.14);
}


/* =========================================================
   CARD COLORS
   ========================================================= */

.hm-card-green {

    background:
        linear-gradient(
            145deg,
            #f8fff3,
            #dff3c9
        );
}


.hm-card-orange {

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #ffedc4
        );
}


.hm-card-blue {

    background:
        linear-gradient(
            145deg,
            #f5fbff,
            #dcefff
        );
}


/* =========================================================
   NUMBER
   ========================================================= */

.hm-card-number {

    position: absolute;

    top: 20px;
    right: 22px;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: .55;
}


/* =========================================================
   ICON
   ========================================================= */

.hm-card-icon {

    width: 82px;
    height: 82px;

    display: flex;

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

    margin-bottom: 30px;

    border-radius: 22px;

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.hm-card-icon i {

    font-size: 38px;

    line-height: 1;
}


/* ICON HOVER */

.hm-explore-card:hover .hm-card-icon {

    transform:
        rotate(-7deg)
        scale(1.08);

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


/* INDIVIDUAL ICON COLORS */

.hm-card-green .hm-card-icon i {

    color: #28702b;
}


.hm-card-orange .hm-card-icon i {

    color: #c76b00;
}


.hm-card-blue .hm-card-icon i {

    color: #176da8;
}


/* =========================================================
   CONTENT
   ========================================================= */

.hm-card-content {

    position: relative;

    z-index: 3;
}


.hm-card-content h3 {

    margin: 0 0 12px;

    font-size: 25px;

    font-weight: 800;
}


.hm-card-content p {

    max-width: 320px;

    margin: 0 0 25px;

    line-height: 1.65;

    font-size: 16px;

    color: #4f5b52;
}


/* =========================================================
   LINKS
   ========================================================= */

.hm-card-content a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
        gap .25s ease;
}


.hm-card-content a:hover {

    gap: 15px;
}


.hm-card-content a i {

    font-size: 19px;

    line-height: 1;

    transition:
        transform .25s ease;
}


.hm-card-content a:hover i {

    transform:
        translateX(3px);
}


/* LINK COLORS */

.hm-card-green h3,
.hm-card-green a {

    color: #28702b;
}


.hm-card-orange h3,
.hm-card-orange a {

    color: #c76b00;
}


.hm-card-blue h3,
.hm-card-blue a {

    color: #176da8;
}


/* =========================================================
   GLOW
   ========================================================= */

.hm-card-glow {

    position: absolute;

    width: 170px;
    height: 170px;

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

    border-radius: 50%;

    opacity: .55;

    filter: blur(5px);

    transition:
        transform .5s ease;
}


.hm-card-green .hm-card-glow {

    background: #9bd66f;
}


.hm-card-orange .hm-card-glow {

    background: #ffd166;
}


.hm-card-blue .hm-card-glow {

    background: #83c6ef;
}


.hm-explore-card:hover .hm-card-glow {

    transform:
        scale(1.35);
}


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

@media(max-width: 900px) {

    .hm-explore-grid {

        grid-template-columns: 1fr;

        max-width: 600px;

        margin: auto;
    }


    .hm-explore-card {

        min-height: 290px;
    }

}


@media(max-width: 576px) {

    .hm-explore-section {

        padding: 65px 18px;
    }


    .hm-explore-heading h2 {

        font-size: 32px;
    }


    .hm-explore-heading p {

        font-size: 15px;
    }


    .hm-explore-card {

        padding: 28px 24px;

        border-radius: 20px;
    }


    .hm-card-icon {

        width: 70px;
        height: 70px;

        margin-bottom: 25px;
    }


    .hm-card-icon i {

        font-size: 32px;
    }


    .hm-card-content h3 {

        font-size: 23px;
    }

}