/* =========================================================
   SAKI FRONTEND
   GLOBAL STYLE
========================================================= */

:root {

    /* Primary */
    --frontend-green: #00843D;
    --frontend-green-dark: #006B32;
    --frontend-green-light: #EAF6EF;

    /* Accent */
    --frontend-orange: #F7941D;
    --frontend-orange-dark: #E57F08;
    --frontend-orange-light: #FFF4E5;

    /* Text */
    --frontend-text: #1F2937;
    --frontend-text-dark: #111827;
    --frontend-muted: #6B7280;

    /* Background */
    --frontend-bg: #F8FAFC;
    --frontend-white: #FFFFFF;

    /* Border */
    --frontend-border: #E5E7EB;

    /* Radius */
    --frontend-radius: 12px;
    --frontend-radius-lg: 16px;

    /* Shadow */
    --frontend-shadow:
        0 4px 20px rgba(15, 23, 42, .06);

    --frontend-shadow-hover:
        0 10px 30px rgba(15, 23, 42, .10);

}


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--frontend-white);

    color: var(--frontend-text);

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.7;

}


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

a {

    color: var(--frontend-green);

    transition:
        color .2s ease,
        background-color .2s ease;

}


a:hover {

    color: var(--frontend-green-dark);

}


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

.frontend-section {

    padding: 80px 0;

}


.frontend-section-sm {

    padding: 60px 0;

}


.frontend-section-light {

    background: var(--frontend-bg);

}


/* =========================================================
   SECTION HEADER
========================================================= */

.frontend-section-header {

    margin-bottom: 40px;

}


.frontend-section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: var(--frontend-orange);

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.frontend-section-label::before {

    content: "";

    width: 24px;

    height: 2px;

    background: var(--frontend-orange);

}


.frontend-section-title {

    margin: 0;

    color: var(--frontend-text-dark);

    font-size: 32px;

    font-weight: 700;

    line-height: 1.3;

}


.frontend-section-description {

    max-width: 680px;

    margin-top: 12px;

    margin-bottom: 0;

    color: var(--frontend-muted);

    font-size: 15px;

}


/* =========================================================
   BUTTON
========================================================= */

.frontend-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 20px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    border: 1px solid transparent;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


/* Primary */

.frontend-btn-primary {

    background: var(--frontend-green);

    border-color: var(--frontend-green);

    color: #FFFFFF;

}


.frontend-btn-primary:hover {

    background: var(--frontend-green-dark);

    border-color: var(--frontend-green-dark);

    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(0, 132, 61, .20);

}


/* Orange */

.frontend-btn-orange {

    background: var(--frontend-orange);

    border-color: var(--frontend-orange);

    color: #FFFFFF;

}


.frontend-btn-orange:hover {

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

    border-color: var(--frontend-orange-dark);

    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(247, 148, 29, .20);

}


/* Outline */

.frontend-btn-outline {

    background: transparent;

    border-color: var(--frontend-green);

    color: var(--frontend-green);

}


.frontend-btn-outline:hover {

    background: var(--frontend-green);

    color: #FFFFFF;

}


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

.frontend-card {

    height: 100%;

    background: var(--frontend-white);

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

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

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

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

}


.frontend-card:hover {

    transform: translateY(-3px);

    border-color: rgba(0, 132, 61, .20);

    box-shadow: var(--frontend-shadow-hover);

}


/* =========================================================
   BADGE
========================================================= */

.frontend-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 10px;

    border-radius: 999px;

    background: var(--frontend-green-light);

    color: var(--frontend-green);

    font-size: 12px;

    font-weight: 600;

}


.frontend-badge-orange {

    background: var(--frontend-orange-light);

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

}


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

.frontend-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   TEXT
========================================================= */

.frontend-text-muted {

    color: var(--frontend-muted);

}


.frontend-text-green {

    color: var(--frontend-green);

}


.frontend-text-orange {

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

}


/* =========================================================
   DIVIDER
========================================================= */

.frontend-divider {

    width: 100%;

    height: 1px;

    background: var(--frontend-border);

}


/* =========================================================
   BACK TO TOP
========================================================= */

.frontend-back-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 1020;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 10px;

    background: var(--frontend-green);

    color: #FFFFFF;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .2s ease;

}


.frontend-back-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.frontend-back-top:hover {

    background: var(--frontend-green-dark);

}


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

@media (max-width: 991.98px) {

    .frontend-section {

        padding: 65px 0;

    }


    .frontend-section-title {

        font-size: 28px;

    }

}


@media (max-width: 767.98px) {

    .frontend-section {

        padding: 50px 0;

    }


    .frontend-section-sm {

        padding: 45px 0;

    }


    .frontend-section-title {

        font-size: 25px;

    }


    .frontend-section-description {

        font-size: 14px;

    }

}