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

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

body{

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

background:linear-gradient(180deg,#f5f8fd,#edf3f9);

color:#333;

line-height:1.7;

}


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

.terms-hero{

background:
linear-gradient(135deg,#0077cc,#00b4d8),
url("https://images.unsplash.com/photo-1501785888041-af3ef285b470")
center/cover no-repeat;

color:#fff;

padding:90px 20px 80px;

text-align:center;

position:relative;

overflow:hidden;

}

.hero-content{

max-width:900px;

margin:auto;

}

.terms-hero h1{

font-size:2.7rem;

font-weight:600;

margin-bottom:12px;

letter-spacing:0.4px;

}

.terms-hero p{

font-size:1.15rem;

opacity:0.95;

max-width:650px;

margin:auto;

}


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

.terms-wrapper{

max-width:1050px;

margin:-60px auto 60px;

padding:0 20px;

}


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

.terms-card{

background:#ffffff;

padding:28px 32px;

margin-bottom:24px;

border-radius:14px;

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

transition:all 0.35s ease;

position:relative;

overflow:hidden;

}

/* subtle hover animation */

.terms-card:hover{

transform:translateY(-5px);

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

}


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

.terms-card h2{

font-size:1.35rem;

color:#0b5ed7;

margin-bottom:12px;

display:flex;

align-items:center;

gap:6px;

}

/* underline effect */

.terms-card h2::after{

content:"";

flex-grow:1;

height:2px;

background:linear-gradient(90deg,#0b5ed7,transparent);

margin-left:10px;

opacity:0.35;

}


/* =========================
TEXT STYLE
========================= */

.terms-card p{

font-size:16px;

color:#444;

line-height:1.75;

text-align:justify;

}


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

.terms-card.highlight{

background:linear-gradient(135deg,#eef8ff,#f5fcff);

border-left:6px solid #00b4d8;

}


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

.terms-card.contact{

text-align:center;

background:linear-gradient(135deg,#0077cc,#00b4d8);

color:#fff;

}

.terms-card.contact h2{

color:#fff;

}

.terms-card.contact p{

color:#f4f4f4;

}

.terms-card.contact a{

display:inline-block;

margin-top:8px;

font-weight:500;

color:#fff;

text-decoration:none;

padding:8px 16px;

border-radius:6px;

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

transition:all 0.3s;

}

.terms-card.contact a:hover{

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

transform:translateY(-2px);

}


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

@media (max-width:900px){

.terms-hero{

padding:70px 20px 70px;

}

.terms-hero h1{

font-size:2.2rem;

}

.terms-hero p{

font-size:1rem;

}

.terms-wrapper{

margin-top:-45px;

}

.terms-card{

padding:24px;

}

.terms-card h2{

font-size:1.25rem;

}

.terms-card p{

font-size:15px;

}

}


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

@media (max-width:600px){

.terms-hero{

padding:60px 20px;

}

.terms-hero h1{

font-size:1.9rem;

}

.terms-hero p{

font-size:0.95rem;

}

.terms-wrapper{

margin-top:-35px;

padding:0 15px;

}

.terms-card{

padding:20px;

border-radius:10px;

}

.terms-card h2{

font-size:1.2rem;

}

.terms-card p{

font-size:15px;

line-height:1.75;

}

.terms-card.contact a{

width:100%;

text-align:center;

}

}


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

@media (max-width:400px){

.terms-hero h1{

font-size:1.6rem;

}

.terms-card{

padding:18px;

}

.terms-card p{

font-size:14px;

}

}