/* ===========================
   HotStarVPS Premium Theme
=========================== */

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

body{

font-family:'Poppins',sans-serif;
background:#08111f;
color:#ffffff;
line-height:1.7;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

a{

text-decoration:none;
transition:.3s;

}

ul{

list-style:none;

}

/* Header */

.top-header{

background:#0d1b31;
padding:18px 0;
position:sticky;
top:0;
z-index:999;
border-bottom:1px solid rgba(255,255,255,.08);

}

.top-header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo h2{

font-size:28px;
color:#4fc3ff;

}

.logo span{

font-size:14px;
color:#cccccc;

}

nav ul{

display:flex;
gap:28px;

}

nav a{

color:white;
font-weight:500;

}

nav a:hover{

color:#4fc3ff;

}

/* Hero */

.hero{

padding:90px 0;
background:linear-gradient(135deg,#08111f,#10284b);

}

.hero-grid{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:40px;
align-items:center;

}

.hero h1{

font-size:52px;
line-height:1.2;
margin-bottom:20px;

}

.hero p{

color:#d5d5d5;
font-size:18px;
margin-bottom:30px;

}

.hero-buttons{

display:flex;
gap:18px;

}

.btn-primary{

background:#2196f3;
padding:14px 30px;
border-radius:8px;
font-weight:600;
color:white;

}

.btn-primary:hover{

background:#42a5f5;

}

.btn-secondary{

border:2px solid #2196f3;
padding:14px 30px;
border-radius:8px;
color:white;

}

.btn-secondary:hover{

background:#2196f3;

}

/* Hero Card */

.hero-card{

background:#10243f;
padding:35px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.hero-card h3{

margin-bottom:18px;
color:#4fc3ff;

}

.hero-card li{

padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);

}

/* Sections */

section{

padding:80px 0;

}

.section-title{

text-align:center;
font-size:38px;
margin-bottom:50px;
color:#4fc3ff;

}

/* Feature Cards */

.feature-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}

.feature-box{

background:#10243f;
padding:30px;
border-radius:16px;
transition:.3s;

}

.feature-box:hover{

transform:translateY(-8px);

}

.feature-box h3{

margin-bottom:15px;

}

/* Infrastructure */

.infra-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}

.infra-card{

background:#10243f;
padding:30px;
border-radius:16px;
transition:.3s;
border:1px solid rgba(255,255,255,.06);

}

.infra-card:hover{

transform:translateY(-8px);

}

.infra-card h3{

margin-bottom:15px;
color:#4fc3ff;

}

/* Legal Cards */

.legal-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.legal-card{

display:block;
background:#10243f;
padding:30px;
border-radius:16px;
color:white;
transition:.3s;
border:1px solid rgba(255,255,255,.06);

}

.legal-card:hover{

background:#17365d;
transform:translateY(-6px);

}

.legal-card h3{

margin-bottom:15px;
color:#4fc3ff;

}

/* Support */

.support-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;

}

.support-box{

background:#10243f;
padding:35px;
border-radius:16px;

}

.support-box li{

padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);

}

/* CTA */

.call-to-action{

background:linear-gradient(135deg,#10284b,#0d1b31);
text-align:center;

}

.call-to-action h2{

font-size:40px;
margin-bottom:20px;

}

.call-to-action p{

max-width:700px;
margin:auto;
margin-bottom:35px;
color:#d5d5d5;

}

.cta-buttons{

display:flex;
justify-content:center;
gap:20px;

}

/* Footer */

.footer{

background:#050b16;
padding:70px 0 20px;

}

.footer-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

}

.footer h3{

margin-bottom:18px;
color:#4fc3ff;

}

.footer p,
.footer li{

color:#cfcfcf;
margin-bottom:10px;

}

.footer a{

color:#cfcfcf;

}

.footer a:hover{

color:#4fc3ff;

}

.copyright{

margin-top:50px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
color:#999;

}

/* Responsive */

@media(max-width:992px){

.hero-grid,
.feature-grid,
.infra-grid,
.support-grid,
.footer-grid,
.legal-grid{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero-buttons,
.cta-buttons{

justify-content:center;
flex-wrap:wrap;

}

.top-header .container{

flex-direction:column;
gap:20px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;

}

.hero h1{

font-size:38px;

}

.section-title{

font-size:30px;

}

.call-to-action h2{

font-size:32px;

}

}

@media(max-width:600px){

.container{

width:94%;

}

.hero{

padding:60px 0;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.btn-primary,
.btn-secondary{

display:block;
width:100%;
text-align:center;

}

.hero-buttons{

flex-direction:column;

}

}