/* =========================================================
LEGAL PAGE STYLE
========================================================= */

body.legal-page{

margin:0;
padding:0;

font-family:
"Poppins",
Arial,
sans-serif;

background:#f6f8fc;

color:#111;

overflow-x:hidden;

}

.legal-page *{

box-sizing:border-box;

}

.legal-page a{

text-decoration:none;

}

.legal-page .container{

max-width:1100px;

margin:auto;

padding:0 20px;

}

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

.legal-hero{

padding:95px 0 45px;

background:
linear-gradient(
135deg,
#0b1d63 0%,
#172f8f 50%,
#ff4d6d 100%
);

color:#fff;

position:relative;

overflow:hidden;

}

.legal-hero::before{

content:'';

position:absolute;

width:320px;
height:320px;

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

border-radius:50%;

top:-120px;
right:-100px;

}

.legal-hero .container{

position:relative;

z-index:2;

}

.legal-hero .breadcrumb{

margin-bottom:22px;

position:relative;

z-index:5;

}

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

.breadcrumb{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

font-size:14px;

margin-bottom:16px;

opacity:.95;

}

.breadcrumb a{

color:#fff;

}

.breadcrumb .active{

font-weight:700;

}

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

.legal-hero h1{

font-size:42px;

font-weight:800;

margin-bottom:15px;

line-height:1.2;

}

.legal-hero p{

max-width:780px;

font-size:16px;

line-height:1.9;

opacity:.96;

margin:0;

}

.last-updated{

margin-top:20px;

font-size:14px;

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

display:inline-flex;

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

padding:10px 18px;

border-radius:40px;

backdrop-filter:blur(8px);

font-weight:600;

}

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

.legal-content{

padding:70px 0;

background:#f6f8fc;

}

.legal-wrapper{

display:grid;

grid-template-columns:
280px 1fr;

gap:30px;

align-items:start;

}

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

.legal-sidebar{

position:sticky;

top:110px;

background:#fff;

border-radius:22px;

padding:28px;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

}

.legal-sidebar h3{

font-size:20px;

margin-bottom:22px;

color:#111;

font-weight:700;

}

.legal-sidebar ul{

list-style:none;

padding:0;
margin:0;

}

.legal-sidebar li{

margin-bottom:14px;

}

.legal-sidebar a{

color:#444;

font-size:15px;

transition:.3s;

}

.legal-sidebar a:hover{

color:#ff4d6d;

padding-left:4px;

}

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

.legal-main{

display:flex;

flex-direction:column;

gap:28px;

}

.legal-intro-card,
.legal-section{

background:#fff;

border-radius:24px;

padding:40px;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

}

.legal-intro-card h2,
.legal-section h2{

font-size:28px;

margin-bottom:18px;

color:#111;

position:relative;

padding-left:18px;

font-weight:800;

}

.legal-intro-card h2::before,
.legal-section h2::before{

content:'';

position:absolute;

left:0;
top:8px;

width:6px;
height:32px;

border-radius:20px;

background:
linear-gradient(
180deg,
#ff7b00,
#ff2f92
);

}

.legal-intro-card p,
.legal-section p{

font-size:16px;

line-height:1.9;

color:#444;

margin-bottom:18px;

}

.legal-section ul{

padding-left:22px;

}

.legal-section li{

margin-bottom:12px;

line-height:1.8;

color:#444;

}

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

.notice-box{

background:#fff7f8;

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

padding:24px;

border-radius:18px;

margin-top:25px;

}

.notice-box strong{

display:block;

margin-bottom:10px;

font-size:17px;

font-weight:700;

color:#111;

}

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

.legal-cta{

padding:0 0 80px;

}

.legal-cta-box{

background:
linear-gradient(
135deg,
#ff7b00,
#ff2f92
);

border-radius:30px;

padding:60px 35px;

text-align:center;

color:#fff;

box-shadow:
0 20px 45px rgba(255,77,109,.18);

}

.legal-cta-box h2{

font-size:40px;

line-height:1.2;

margin-bottom:16px;

font-weight:800;

}

.legal-cta-box p{

max-width:720px;

margin:auto;

font-size:16px;

line-height:1.9;

opacity:.96;

}

.legal-cta-btns{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

margin-top:30px;

}

.legal-btn{

display:inline-flex;

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

padding:15px 28px;

border-radius:40px;

font-size:15px;

font-weight:700;

transition:.3s;

min-width:220px;

}

.legal-btn:hover{

transform:
translateY(-3px);

}

.primary-btn{

background:#fff;

color:#111;

}

.secondary-btn{

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

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

color:#fff;

}

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

@media(max-width:992px){

.legal-wrapper{

grid-template-columns:1fr;

}

.legal-sidebar{

position:relative;

top:auto;

}

}

@media(max-width:768px){

.legal-hero{

padding:95px 0 40px;

}

.legal-hero .container{

padding-top:12px;

}

}

.legal-hero h1{

font-size:32px;

}

.legal-intro-card,
.legal-section{

padding:28px;

}

.legal-section h2,
.legal-intro-card h2{

font-size:24px;

}

.legal-cta-box{

padding:45px 24px;

}

.legal-cta-box h2{

font-size:30px;

}

.legal-btn{

width:100%;

min-width:auto;

}

@media(max-width:480px){

.legal-hero{

padding:105px 0 40px;

}

.legal-hero .container{

padding-top:10px;

}

.legal-hero h1{

font-size:28px;

}

.legal-intro-card,
.legal-section{

padding:22px;

}

.legal-cta-box h2{

font-size:26px;

}

}