/* ==========================================
   MAIN
========================================== */

.privacy-wrapper {
    padding: 70px 0;
    background: #F5F7FA;
}
.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

.privacy-layout{

    display:grid;

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

    gap:35px;

    align-items:start;
}
.section-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg,#05162a);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.policy-cta {
    margin-top: 30px;
    padding: 40px;
    border-radius: var(--radius);
    background: linear-gradient(135deg,#05162a);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ==========================================
   TABLE OF CONTENTS
========================================== */

.privacy-toc{

    position:sticky;

    top:25px;

    background:#fff;

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

    border-radius:var(--radius);

    padding:24px;

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

.toc-heading{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:17px;

    font-weight:800;

    color:var(--heading);

    margin-bottom:18px;
}

.toc-heading:before{

    content:"";

    width:4px;
    height:21px;

    border-radius:5px;

    background:var(--gold);
}

.privacy-toc ul{

    list-style:none;

    padding:0;
}

.privacy-toc li{

    margin:0 0 3px;
}

.privacy-toc a{

    display:block;

    padding:9px 11px;

    border-radius:8px;

    color:var(--muted);

    font-size:13px;

    transition:.25s ease;
}

.privacy-toc a:hover{

    background:#F3F6F9;

    color:var(--navy);

    padding-left:16px;
}

/* ==========================================
   INTRO
========================================== */

.policy-intro{

    position:relative;

    overflow:hidden;

    background:#fff;

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

    border-radius:var(--radius);

    padding:32px 35px;

    margin-bottom:24px;

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

.policy-intro:after{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    right:-70px;
    top:-70px;

    border-radius:50%;

    background:rgba(217,164,65,.10);
}

.policy-intro h2{

    color:var(--heading);

    font-size:25px;

    margin-bottom:12px;
}

.policy-intro p{

    color:var(--text);

    font-size:15px;
}

/* ==========================================
   POLICY SECTIONS
========================================== */

.policy-section{

    background:#fff;

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

    border-radius:var(--radius);

    padding:30px 34px;

    margin-bottom:20px;

    box-shadow:
    0 7px 28px rgba(5,22,42,.045);

    scroll-margin-top:25px;

    transition:.25s ease;
}

.policy-section:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 40px rgba(5,22,42,.08);
}

/* SECTION HEADER */

.section-title{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:17px;
}



.policy-section h2{

    color:var(--heading);

    font-size:24px;

    line-height:1.3;

    padding-top:5px;
}

.policy-section h3{

    color:var(--navy);

    font-size:19px;

    margin:25px 0 10px;
}

.policy-section p{

    font-size:15px;

    color:var(--text);

    margin-bottom:13px;
}

.policy-section p:last-child{

    margin-bottom:0;
}

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

.policy-section ul,
.policy-section ol{

    margin-top:12px;

    margin-bottom:15px;
}

.policy-section li{

    color:var(--text);

    font-size:15px;
}

.policy-section li::marker{

    color:var(--gold);

    font-weight:700;
}

/* ==========================================
   FAQ STYLE
========================================== */

.faq-question{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--navy);

    font-size:18px;

    font-weight:700;

    margin-top:23px;

    margin-bottom:9px;
}

.faq-question:before{

    content:"Q";

    width:28px;
    height:28px;

    display:flex;

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

    border-radius:7px;

    background:#FFF5DE;

    color:#9B6A13;

    font-size:12px;

    font-weight:800;
}

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

.policy-note{

    padding:18px 20px;

    margin:18px 0;

    background:#FFF9ED;

    border-left:4px solid var(--gold);

    border-radius:0 12px 12px 0;

    color:#5B461C;

    font-size:14px;
}

.security-box{

    padding:20px;

    margin:18px 0;

    background:#F1F6FA;

    border:1px solid #DCE8F1;

    border-radius:12px;
}

/* ==========================================
   CTA
========================================== */



.policy-cta:before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-90px;
    top:-100px;

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

    border-radius:50%;
}

.policy-cta h2{

    position:relative;

    font-size:28px;

    margin-bottom:8px;
}

.policy-cta p{

    position:relative;

    max-width:620px;

    margin:0 auto 22px;

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

    font-size:15px;
}

.policy-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:8px;

    background:#3374C4;

    color:#fff;

    font-size:14px;

    font-weight:700;

    transition:.25s;
}


/* ==========================================
   TABLET
========================================== */

@media(max-width:1000px){

    .privacy-layout{

        grid-template-columns:1fr;
    }

    .privacy-toc{

        position:relative;

        top:auto;
    }

    .privacy-toc ul{

        display:grid;

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

        gap:3px;
    }
}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){
    
    
    .contact-hero {
	margin-top: 22%;
}
}
/* ==========================================
   MOBILE
========================================== */

@media(max-width:700px){

    .container{

        width:calc(100% - 24px);
    }

    .privacy-hero{

        padding:70px 15px 60px;
    }

    .privacy-hero h1{

        font-size:41px;
    }

    .hero-description{

        font-size:15px;
    }

    .privacy-wrapper{

        padding:40px 0;
    }

    .privacy-toc{

        padding:18px;
    }

    .privacy-toc ul{

        grid-template-columns:1fr;
    }

    .policy-intro,
    .policy-section{

        padding:24px 20px;

        border-radius:14px;
    }

    .policy-section h2{

        font-size:21px;
    }

    .policy-section h3{

        font-size:18px;
    }

    .policy-section p,
    .policy-section li{

        font-size:14px;
    }

    .section-icon{

        width:36px;
        height:36px;

        border-radius:9px;
    }

    .faq-question{

        font-size:16px;
    }

    .policy-cta{

        padding:32px 20px;
    }

    .policy-cta h2{

        font-size:23px;
    }

}

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

@media(max-width:480px){

    .privacy-hero h1{

        font-size:34px;
    }

    .breadcrumb{

        font-size:12px;
    }

    .policy-section{

        padding:20px 17px;
    }

    .section-title{

        gap:10px;
    }

    .policy-section h2{

        font-size:19px;
    }

    .policy-section ul,
    .policy-section ol{

        padding-left:19px;
    }

    .back-top{

        width:40px;
        height:40px;

        right:15px;
        bottom:15px;
    }
}