/* =========================
GLOBAL RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins','Segoe UI',Arial,sans-serif;

background:linear-gradient(180deg,#f4f7fb,#eef3f9);

color:#333;

line-height:1.7;

}

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

.privacy-hero{

height:320px;

background:
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee")
center/cover no-repeat;

position:relative;

display:flex;

align-items:center;

justify-content:center;

}

.hero-overlay{

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:linear-gradient(
120deg,
rgba(26,115,232,0.9),
rgba(0,180,219,0.8)
);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:20px;

color:#fff;

}

.hero-overlay h1{

font-size:2.7rem;

font-weight:700;

margin-bottom:10px;

letter-spacing:0.5px;

}

.hero-overlay p{

font-size:1.15rem;

max-width:700px;

opacity:0.95;

}

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

.privacy-container{

max-width:1050px;

margin:-70px auto 60px;

padding:20px;

}

/* =========================
POLICY CARDS
========================= */

.policy-card{

background:#ffffff;

border-radius:14px;

padding:28px 32px;

margin-bottom:26px;

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

transition:all 0.35s ease;

position:relative;

overflow:hidden;

}

/* subtle hover */

.policy-card:hover{

transform:translateY(-5px);

box-shadow:
0 16px 40px rgba(0,0,0,0.12);

}

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

.policy-card i{

color:#1a73e8;

font-size:1.4rem;

margin-right:8px;

}

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

.policy-card:first-child{

text-align:center;

font-size:1.05rem;

padding-top:35px;

}

.policy-card:first-child i{

font-size:2.3rem;

display:block;

margin-bottom:14px;

color:#0b57d0;

}

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

.policy-card h2{

font-size:1.4rem;

margin-bottom:12px;

color:#1c355e;

display:flex;

align-items:center;

gap:6px;

}

/* underline accent */

.policy-card h2::after{

content:"";

flex-grow:1;

height:2px;

background:linear-gradient(
90deg,
rgba(26,115,232,0.4),
transparent
);

margin-left:8px;

}

/* =========================
TEXT PARAGRAPH
========================= */

.policy-card p{

font-size:16px;

color:#444;

margin-bottom:10px;

text-align:justify;

}

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

.policy-card.highlight{

background:
linear-gradient(
135deg,
#e8f0fe,
#f3f8ff
);

border-left:6px solid #1a73e8;

}

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

.media-card{

border-left:5px solid #ff6b35;

background:#fffaf6;

}

.media-card i{

color:#ff6b35;

}

/* highlight AI paragraph */

.media-card p:nth-child(4){

background:#fff3e8;

padding:12px;

border-radius:6px;

font-style:italic;

}

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

.contact-card{

background:
linear-gradient(
135deg,
#1a73e8,
#00b4db
);

color:#fff;

text-align:center;

}

.contact-card h2{

color:#fff;

}

.contact-card a{

display:inline-block;

margin-top:10px;

color:#fff;

font-weight:600;

font-size:1.05rem;

text-decoration:none;

padding:8px 16px;

border-radius:6px;

background:rgba(255,255,255,0.15);

transition:0.3s;

}

.contact-card a:hover{

background:rgba(255,255,255,0.25);

transform:translateY(-2px);

}

.contact-card i{

color:#fff;

}

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

@media (max-width:900px){

.hero-overlay h1{

font-size:2.2rem;

}

.hero-overlay p{

font-size:1rem;

}

.privacy-container{

margin-top:-50px;

}

.policy-card{

padding:24px;

}

.policy-card h2{

font-size:1.3rem;

}

.policy-card p{

font-size:15px;

}

}

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

@media (max-width:600px){

.privacy-hero{

height:250px;

}

.hero-overlay h1{

font-size:1.8rem;

}

.hero-overlay p{

font-size:0.95rem;

}

.privacy-container{

margin-top:-35px;

padding:15px;

}

.policy-card{

padding:20px;

border-radius:10px;

}

.policy-card h2{

font-size:1.2rem;

}

.policy-card p{

font-size:15px;

line-height:1.75;

}

.contact-card a{

font-size:15px;

width:100%;

}

}

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

@media (max-width:400px){

.hero-overlay h1{

font-size:1.6rem;

}

.policy-card{

padding:18px;

}

.policy-card p{

font-size:14px;

}

}