/* ===========================================================
   PRIVACY POLICY
   INDO NATURA EXPORTER
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:
    linear-gradient(
    135deg,
    #07192f,
    #0a2848,
    #0d3f45);

}



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

.privacy-hero{

    padding:95px 20px 70px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.privacy-hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

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

    border-radius:50%;

    background:
    radial-gradient(
    rgba(16,185,129,.20),
    transparent 70%);

}

.privacy-hero::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-160px;
    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(14,165,233,.18),
    transparent 70%);

}

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    backdrop-filter:blur(15px);

    color:#34d399;

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.privacy-hero h1{

    margin-top:30px;

    font-size:3.2rem;

    font-weight:800;

    color:#fff;

}

.privacy-hero h1 span{

    color:#34d399;

}

.privacy-hero p{

    max-width:760px;

    margin:25px auto;

    color:#d8e4ef;

    line-height:1.9;

    font-size:1.08rem;

}

.hero-update{

    display:inline-flex;

    gap:12px;

    align-items:center;

    margin-top:15px;

    padding:14px 25px;

    border-radius:50px;

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

    backdrop-filter:blur(18px);

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

    color:#fff;

}



/* ===========================================================
   SEARCH
=========================================================== */

.privacy-search{

    padding-bottom:30px;

}

.search-box{

    max-width:720px;

    margin:auto;

    display:flex;

    align-items:center;

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

    backdrop-filter:blur(18px);

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

    border-radius:60px;

    padding:15px 25px;

}

.search-box i{

    color:#34d399;

    margin-right:15px;

}

.search-box input{

    width:100%;

    border:none;

    background:none;

    color:#fff;

    font-size:16px;

}

.search-box input::placeholder{

    color:#b9c7d6;

}



/* ===========================================================
   MENU
=========================================================== */

.policy-menu{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:35px auto 55px;

}

.policy-menu a{

    padding:10px 18px;

    border-radius:30px;

    color:#fff;

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

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

    backdrop-filter:blur(14px);

    transition:.35s;

}

.policy-menu a:hover{

    background:#10b981;

    color:#fff;

    transform:translateY(-3px);

}



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

.policy-section{

    padding:25px 0;

}



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

.policy-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:24px;

    padding:40px;

    display:flex;

    gap:30px;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

}

.policy-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 50px rgba(16,185,129,.20);

}



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

.policy-icon{

    width:75px;

    height:75px;

    flex-shrink:0;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
    135deg,
    #10b981,
    #0ea5e9);

    color:#fff;

    font-size:28px;

    box-shadow:
    0 12px 30px rgba(16,185,129,.30);

}



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

.policy-content{

    flex:1;

}

.policy-content h2{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

    font-weight:700;

}

.policy-content h4{

    color:#34d399;

    margin-bottom:15px;

}

.policy-content p{

    color:#dce6ef;

    line-height:1.9;

    margin-bottom:20px;

}

.policy-content ul{

    color:#dce6ef;

}

.policy-content li{

    margin-bottom:10px;

}



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

.policy-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

    margin-top:25px;

}



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

.info-box{

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

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

    border-radius:18px;

    padding:25px;

    transition:.3s;

}

.info-box:hover{

    background:rgba(16,185,129,.10);

    transform:translateY(-4px);

}



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

.highlight-box{

    margin-top:25px;

    background:
    linear-gradient(
    135deg,
    rgba(16,185,129,.18),
    rgba(14,165,233,.15));

    border-left:5px solid #34d399;

    padding:20px;

    border-radius:15px;

    color:#fff;

}



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

.contact-card{

    text-align:center;

}

.company-box{

    margin-top:25px;

    padding:30px;

    border-radius:18px;

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

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

}

.company-box h4{

    color:#34d399;

    margin-bottom:15px;

}

.company-box p{

    margin-bottom:10px;

}



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

.contact-card .btn{

    padding:14px 35px;

    border-radius:50px;

    font-weight:700;

}



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

@media(max-width:992px){

.policy-card{

flex-direction:column;

text-align:center;

}

.policy-icon{

margin:auto;

}

}

@media(max-width:768px){

.privacy-hero{

padding:70px 20px 50px;

}

.privacy-hero h1{

font-size:2.3rem;

}

.policy-card{

padding:28px;

}

.search-box{

padding:13px 20px;

}

.policy-content h2{

font-size:1.6rem;

}

}

@media(max-width:576px){

.hero-badge{

font-size:.7rem;

}

.policy-menu{

gap:8px;

}

.policy-menu a{

font-size:.78rem;

padding:8px 14px;

}

.company-box{

padding:20px;

}

}