/*==================================================
THEME-1 POLICY PAGE
PART 1
Hero + Sidebar + Layout
==================================================*/

/*=========================================
ROOT
==========================================*/

:root {

    --policy-primary: #111111;
    --policy-secondary: #666666;
    --policy-light: #fafafa;
    --policy-border: #ececec;
    --policy-radius: 14px;
    --policy-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}

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

.policy-section {

    padding: 100px 0;

}

.policy-container {

    max-width: 1320px;

    margin: auto;

}

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

.policy-hero {

    position: relative;

    padding: 90px 0;

    background: #f8f8f8;

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

    overflow: hidden;

}

.policy-hero::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .03);

    left: -120px;

    top: -120px;

}

.policy-hero::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .03);

    right: -80px;

    bottom: -80px;

}

.policy-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

}

.policy-subtitle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 24px;

    border-radius: 40px;

    background: #fff;

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

    color: #666;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

.policy-hero h1 {

    font-size: 54px;

    font-weight: 800;

    color: #111;

    margin-bottom: 20px;

}

/*=========================================
BREADCRUMB
==========================================*/

.policy-breadcrumb {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    padding: 0;

    margin: 0;

    list-style: none;

}

.policy-breadcrumb li {

    color: #999;

    font-size: 15px;

}

.policy-breadcrumb a {

    color: #666;

    text-decoration: none;

    transition: .35s;

}

.policy-breadcrumb a:hover {

    color: #111;

}

/*=========================================
LAYOUT
==========================================*/

.policy-wrapper {

    padding: 100px 0;

    background: #fff;

}

/*=========================================
SIDEBAR
==========================================*/

.policy-sidebar {

    position: sticky;

    top: 120px;

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

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

    background: #fff;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .03);

}

.policy-sidebar-title {

    background: #111;

    color: #fff;

    padding: 20px 25px;

    font-size: 20px;

    font-weight: 700;

}

.policy-sidebar ul {

    list-style: none;

    margin: 0;

    padding: 12px 0;

}

.policy-sidebar li {

    margin: 0;

}

.policy-sidebar a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 24px;

    text-decoration: none;

    color: #666;

    border-left: 3px solid transparent;

    transition: .35s;

}

.policy-sidebar a:hover {

    background: #fafafa;

    border-left-color: #111;

    color: #111;

    padding-left: 30px;

}

.policy-sidebar a.active {

    background: #fafafa;

    color: #111;

    font-weight: 600;

    border-left-color: #111;

}

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

.policy-card {

    background: #fff;

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

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

    padding: 55px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .03);

}

.policy-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

    padding-bottom: 20px;

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

}

.policy-meta span {

    color: #888;

}

.policy-meta strong {

    color: #111;

    font-weight: 700;

}

.policy-card h2 {

    font-size: 44px;

    font-weight: 800;

    color: #111;

    margin-bottom: 22px;

}

.policy-card p {

    color: #666;

    line-height: 2;

    margin-bottom: 20px;

    font-size: 16px;

}

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

@media(max-width:991px) {

    .policy-wrapper {

        padding: 80px 0;

    }

    .policy-sidebar {

        position: relative;

        top: auto;

        margin-bottom: 40px;

    }

    .policy-card {

        padding: 40px;

    }

    .policy-hero h1 {

        font-size: 40px;

    }

}

@media(max-width:767px) {

    .policy-wrapper {

        padding: 60px 0;

    }

    .policy-hero {

        padding: 60px 0;

    }

    .policy-hero h1 {

        font-size: 30px;

    }

    .policy-card {

        padding: 25px;

    }

    .policy-card h2 {

        font-size: 30px;

    }

    .policy-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}

/*==================================================
THEME-1 POLICY PAGE
PART 2
Policy Items + Support Card + Progress + Animation
==================================================*/

/*=========================================
POLICY ITEM
==========================================*/

.policy-item {

    margin-top: 60px;

    padding-top: 40px;

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

    scroll-margin-top: 120px;

}

.policy-item:first-child {

    margin-top: 0;

    padding-top: 0;

    border-top: none;

}

.policy-item-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;

}

.policy-item-header h3 {

    margin: 0;

    font-size: 30px;

    font-weight: 700;

    color: #111;

}

.policy-anchor {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    background: #f5f5f5;

    color: #666;

    transition: .35s;

}

.policy-anchor:hover {

    background: #111;

    color: #fff;

    transform: rotate(45deg);

}

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

.policy-list {

    margin: 25px 0 0;

    padding-left: 22px;

}

.policy-list li {

    margin-bottom: 12px;

    color: #666;

    line-height: 1.9;

}

/*=========================================
ALERT
==========================================*/

.policy-alert {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    margin-top: 30px;

    padding: 24px;

    background: #fafafa;

    border-left: 4px solid #111;

    border-radius: 8px;

}

.policy-alert i {

    font-size: 24px;

    color: #111;

    flex-shrink: 0;

}

.policy-alert div {

    color: #666;

    line-height: 1.9;

}

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

.policy-support {

    margin-top: 70px;

    background: linear-gradient(135deg, #111, #2b2b2b);

    border-radius: 18px;

    padding: 55px;

    display: flex;

    align-items: center;

    gap: 35px;

    color: #fff;

    overflow: hidden;

    position: relative;

}

.policy-support::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

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

    top: -120px;

    right: -120px;

}

.policy-support-icon {

    width: 90px;

    height: 90px;

    min-width: 90px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

}

.policy-support-icon i {

    font-size: 42px;

    color: #fff;

}

.policy-support-content {

    position: relative;

    z-index: 2;

}

.policy-support-content span {

    display: block;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #ddd;

    margin-bottom: 10px;

}

.policy-support-content h3 {

    color: #fff;

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 18px;

}

.policy-support-content p {

    color: #ddd;

    line-height: 1.9;

    margin-bottom: 30px;

}

.policy-support-btns {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.policy-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 34px;

    border-radius: 8px;

    background: #fff;

    color: #111;

    font-weight: 600;

    text-decoration: none;

    transition: .35s;

}

.policy-btn:hover {

    background: #d4af37;

    color: #111;

}

.policy-print {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 30px;

    border-radius: 8px;

    background: transparent;

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

    color: #fff;

    cursor: pointer;

    transition: .35s;

}

.policy-print:hover {

    background: #fff;

    color: #111;

}

/*=========================================
READING PROGRESS
==========================================*/

.policy-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: #111;

    z-index: 99999;

}

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

.policy-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: #111;

    color: #fff;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .35s;

    z-index: 999;

}

.policy-top.show {

    opacity: 1;

    visibility: visible;

    transform: none;

}

.policy-top:hover {

    background: #000;

    transform: translateY(-5px);

}

/*=========================================
SCROLL ANIMATION
==========================================*/

.policy-item,
.policy-support {

    opacity: 0;

    transform: translateY(40px);

    transition: all .8s ease;

}

.policy-item.show,
.policy-support.show {

    opacity: 1;

    transform: none;

}

/*=========================================
SMOOTH SCROLL
==========================================*/

html {

    scroll-behavior: smooth;

}

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

@media(max-width:991px) {

    .policy-support {

        flex-direction: column;

        text-align: center;

        padding: 45px 30px;

    }

    .policy-support-btns {

        justify-content: center;

    }

}

@media(max-width:767px) {

    .policy-item-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .policy-item-header h3 {

        font-size: 24px;

    }

    .policy-alert {

        flex-direction: column;

    }

    .policy-support {

        padding: 35px 25px;

    }

    .policy-support h3 {

        font-size: 28px;

    }

    .policy-support-btns {

        flex-direction: column;

    }

    .policy-btn,
    .policy-print {

        width: 100%;

    }

    .policy-top {

        width: 46px;

        height: 46px;

        right: 15px;

        bottom: 15px;

    }

}