/* ===========================================
   PRIVACY POLICY PAGE
=========================================== */

html{

    scroll-behavior:smooth;
}

.privacy-page{
    background:#f5f7fb;
    padding:80px 0;
}

/* Main Wrapper */

.privacy-wrapper{
    max-width:1400px;
    margin:auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:32px;

    align-items:start;
}

/* ===========================================
   LEFT NAVIGATION
=========================================== */

.privacy-sidebar{

    position:sticky;

    top:20px;

    max-height:calc(100vh - 40px);

    overflow-y:auto;

    background:#fff;

    border:1px solid #e8edf3;
    border-radius:18px;

    padding:28px;

    box-shadow:
        0 10px 35px rgba(15,23,42,.05);
}

.privacy-sidebar-title{

    font-size:22px;
    font-weight:700;

    color:#1d2939;

    margin-bottom:25px;
}

.privacy-nav{

    list-style:none;

    margin:0;
    padding:0;
}

.privacy-nav li{

    margin-bottom:8px;
}

.privacy-nav li:last-child{

    margin-bottom:0;
}

.privacy-nav a{

    position:relative;

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 18px;

    border-radius:12px;

    color:#667085;

    transition:.25s;
}


.privacy-nav a:hover{

    background:#f6f7fb;

    color:#101828;
}

.privacy-nav a.active{

    background:#fff3e6;

    color:#ff9800;

    font-weight:600;
}

.privacy-nav a.active::before{

    content:"";

    position:absolute;

    left:-28px;

    top:10px;

    bottom:10px;

    width:4px;

    border-radius:20px;

    background:#ff9800;
}


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

.privacy-content{

    display:flex;

    flex-direction:column;

    gap:28px;
}


/* ===========================================
   REUSABLE CONTENT CARD
=========================================== */

.policy-card{

    background:#fff;

    border-radius:18px;

    border:1px solid #e8edf3;
    scroll-margin-top:110px;


    padding:38px;

    box-shadow:
        0 10px 35px rgba(15,23,42,.05);
}

.policy-card:last-child{

    margin-bottom:0;
}


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

.policy-card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;
}

.policy-card-icon{

    width:44px;
    height:44px;

    border-radius:12px;

    background:#fff3e6;

    color:#ff9800;

    display:flex;

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

    font-size:20px;

    flex-shrink:0;
}

.policy-card-title{

    font-size:28px;

    font-weight:700;

    color:#101828;

    margin:0;
}
/* ===========================================
   CONTENT TYPOGRAPHY
=========================================== */

.policy-card p{

    font-size:16px;

    line-height:1.9;

    color:#475467;

    margin:0 0 18px;
}

.policy-card p:last-child{

    margin-bottom:0;
}


/* ===========================================
   HEADINGS
=========================================== */

.policy-card h3{

    font-size:22px;

    font-weight:700;

    color:#101828;

    margin:35px 0 18px;
}

.policy-card h4{

    font-size:18px;

    font-weight:600;

    color:#101828;

    margin:28px 0 14px;
}


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

.policy-divider{

    width:100%;

    height:1px;

    background:#e9edf3;

    margin:35px 0;
}


/* ===========================================
   LISTS
=========================================== */

.policy-card ul{

    margin:18px 0;

    padding-left:22px;
}

.policy-card ol{

    margin:18px 0;

    padding-left:24px;
}

.policy-card li{

    color:#475467;

    line-height:1.9;

    margin-bottom:10px;
}

.policy-card li:last-child{

    margin-bottom:0;
}


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

.policy-card a{

    color:#1e5eff;

    text-decoration:none;

    font-weight:500;
}

.policy-card a:hover{

    text-decoration:underline;
}


/* ===========================================
   HIGHLIGHT BOX
=========================================== */

.policy-note{

    background:#f8fafc;

    border-left:4px solid #ff9800;

    padding:18px 22px;

    border-radius:12px;

    margin:25px 0;
}

.policy-note p{

    margin:0;
}


/* ===========================================
   SIMPLE TABLE
=========================================== */

.policy-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;
}

.policy-table th{

    background:#f8fafc;

    color:#101828;

    text-align:left;

    padding:14px 18px;

    border:1px solid #e5e7eb;
}

.policy-table td{

    padding:14px 18px;

    border:1px solid #e5e7eb;

    color:#475467;
}


/* ===========================================
   CONTACT BOX
=========================================== */

.policy-contact{

    background:#f8fafc;

    border:1px solid #e8edf3;

    border-radius:14px;

    padding:24px;
}

.policy-contact p{

    margin-bottom:12px;
}

.policy-contact p:last-child{

    margin-bottom:0;
}

.privacy-sidebar::-webkit-scrollbar{

    width:5px;
}

.privacy-sidebar::-webkit-scrollbar-thumb{

    background:#d0d5dd;

    border-radius:10px;
}


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

@media (max-width:992px){

    .privacy-wrapper{

        grid-template-columns:1fr;
    }

    .privacy-sidebar{

        position:relative;

        top:0;
    }

}

@media (max-width:768px){

    .policy-card{

        padding:26px;
    }

    .policy-card-title{

        font-size:24px;
    }

    .privacy-sidebar{

        padding:22px;
    }

    .privacy-sidebar-title{

        font-size:20px;
    }

}
/* ===========================================
   HERO SECTION
=========================================== */

.privacy-hero{

    background:linear-gradient(135deg,#18257c 0%,#232f8f 100%);

    color:#fff;

    text-align:center;

    padding:90px 20px;

    position:relative;

    overflow:hidden;
}

.privacy-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    top:-260px;
    left:-180px;
}

.privacy-hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

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

    bottom:-240px;
    right:-150px;
}

.privacy-hero .container{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;
}


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

.privacy-hero-icon{

    width:90px;
    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

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

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

    display:flex;

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

    font-size:38px;

    backdrop-filter:blur(10px);
}


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

.privacy-hero-title{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:22px;

    color:#fff;
}


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

.privacy-hero-description{

    max-width:760px;

    margin:auto;

    font-size:21px;

    line-height:1.8;

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


/* ===========================================
   LAST UPDATED
=========================================== */

.privacy-updated{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    padding:12px 22px;

    border-radius:50px;

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

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

    font-size:15px;

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

    backdrop-filter:blur(12px);
}


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

@media(max-width:768px){

    .privacy-hero{

        padding:70px 18px;
    }

    .privacy-hero-title{

        font-size:40px;
    }

    .privacy-hero-description{

        font-size:17px;
    }

    .privacy-hero-icon{

        width:72px;
        height:72px;

        font-size:30px;
    }

}