*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  font-family:Segoe UI, sans-serif;
}

body{

font-family:Arial, Helvetica, sans-serif;
background:#0f2a45;
color:#333;
}




  



.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 6%;
background:#081f38;
position:relative;
}

.logo img{
height:70px;
}

.nav{
display:flex;
gap:30px;
}

.nav a{
text-decoration:none;
color:white;
font-size:16px;
}

/* menu icon */

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}

/* mobile */

@media (max-width:768px){

.menu-toggle{
display:block;
}

.nav{
position:absolute;
top:100%;
left:0;
width:100%;
background:#081f38;
flex-direction:column;
align-items:center;
display:none;
}

.nav a{
padding:15px;
width:100%;
text-align:center;
}

.nav.active{
display:flex;
}

}

@media (max-width: 768px){





.hero{
flex-direction: column;
text-align: center;
padding: 40px 20px;
}

.hero-left{
width: 100%;
}

.hero-left h1{
font-size: 32px;
}

.hero-left p{
font-size: 16px;
max-width: 100%;
}

.hero-right{
width: 100%;
margin-top: 30px;
}

.hero-right img{
width: 260px;
}

.dots{
justify-content: center;
transition: 0.6s;
}

}
.hero-right img{
max-width:100%;
height:auto;
display:block;
margin:auto;
}

/* ===== HERO ===== */
.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px;
font-family:sans-serif;
}


.hero-left{
width:50%;
}

.hero-left h1{
font-size:48px;
line-height:1.2;
margin-bottom:20px;
}

.hero-left span{
color:#7a4dff;
}

.hero-left p{
font-size:18px;
color:#555;
max-width:500px;
line-height:1.6;
}

.dots{
margin-top:30px;
}

.dots span{
height:10px;
width:10px;
background:#ccc;
display:inline-block;
border-radius:50%;
margin-right:8px;
}

.dots .active{
background:#7a4dff;
}



.hero-right{
position:relative;
width:700px;
height:450px;
gap: 20px;
}

.hero-right img{
position:absolute;
width:650px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.img1{
left:20px;
top:40px;
transform:rotate(-5deg);
}

.img2{
right:0;
bottom:0;
transform:rotate(10deg);
}


/* ===== FOOTER ===== */

.footer{
  background:#0a0f1c;
  padding:60px 8% 20px;
  color:#ccc;

}

.footer-container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start; /* important */
  flex-wrap:wrap;
  gap:40px;
}

.footer-col{
  flex:1 1 200px;   /* fix column width */
  min-width:200px;
}

.footer-col h3{
  font-size:22px;
  margin-bottom:15px;
}

.footer-col h4{
  margin-bottom:15px;
  color:#00ffc8;
}

.footer-col p{
  font-size:14px;
  line-height:1.6;
}

.footer-col ul{
  list-style:none;
  padding:0; /* add */
}

.footer-col ul li{
  margin-bottom:10px;
  font-size:14px;
}

.footer-col ul li a{
  text-decoration:none;
  color:#ccc;
  transition:.3s;
}

.footer-col ul li a:hover{
  color:#00ffc8;
}

.footer-bottom{
  text-align:center;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid #111;
  font-size:13px;
  color:#777;
}

/* Responsive */

@media(max-width:900px){
  .footer-container{
    flex-direction:column;
    text-align:center;
  }
}

.hero-section{
background:linear-gradient(135deg,#020b1a,#0b2a4d,#05172b);
padding:100px 10%;
color:white;
}

.hero-container{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
flex-wrap:wrap;
}

.hero-left{
max-width:550px;
}

.hero-left h1{
font-size:48px;
font-weight:700;
line-height:1.3;
}

.highlight{
color:#00e5ff;
}

.brand{
color:#00ff9d;
}

.hero-text{
margin:20px 0;
font-size:18px;
opacity:0.85;
}

.hero-buttons{
margin-top:30px;
display:flex;
gap:15px;
}

.btn{
padding:14px 28px;
border-radius:30px;
text-decoration:none;
font-size:16px;
display:inline-flex;
align-items:center;
gap:10px;
}

.primary{
background:#00e5ff;
color:#000;
}

.secondary{
border:2px solid #00e5ff;
color:#00e5ff;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,229,255,0.3);
}


@keyframes float{

0%{transform:translateY(0)}
50%{transform:translateY(-15px)}
100%{transform:translateY(0)}

}

header{
display:flex;
align-items:center;
height:80px;
padding:0 20px;
}

.logo{
width:200px;
margin-top:5px;
}

.mission-section{
padding:80px 0;
background:#041421;
}

.mission-background{
background-size:cover;
background-position:center;
border-radius:12px;
overflow:hidden;
position:relative;
}

.mission-overlay{
background:rgba(0,0,0,0.65);
padding:80px 60px;
}

.mission-grid{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
flex-wrap:wrap;
}

.mission-left{
flex:1;
}

.mission-title{
font-size:42px;
color:#00e5ff;
font-weight:700;
}

.mission-right{
flex:2;
}

.mission-text{
font-size:18px;
line-height:1.7;
color:#fff;
max-width:600px;
}

.container{
width:90%;
margin:auto;
}

/* hover glow */

.mission-background:hover{
box-shadow:0 15px 40px rgba(0,229,255,0.3);
transition:0.4s;
}

.section-heading{
text-align:center;
margin:80px auto;
max-width:800px;
color:white;
}

.agent-pill{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
background:rgba(0,229,255,0.08);
border:1px solid rgba(0,229,255,0.3);
padding:14px 20px;
border-radius:40px;
backdrop-filter:blur(10px);
}

.first-colum-icon i{
font-size:22px;
color:#00e5ff;
}

.first-colum-text h4{
font-size:16px;
font-weight:500;
line-height:1.6;
}

.feature-title{
margin-top:25px;
font-size:42px;
font-weight:700;
color:#00e5ff;
}

.feature-title i{
margin-right:10px;
color:#00ff9d;
}

.subtitle{
margin-top:10px;
opacity:0.8;
font-size:17px;
}

/* glow hover */

.agent-pill:hover{
box-shadow:0 10px 30px rgba(0,229,255,0.4);
transition:0.4s;
}


.security-section{
background:linear-gradient(135deg,#020b1a,#081f38,#020b1a);
padding:100px 8%;
color:white;
text-align:center;
}

.title{
font-size:42px;
margin-bottom:60px;
color:#00e5ff;
font-weight:700;
}

.security-container{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

/* FEATURES */

.features{
display:flex;
flex-direction:column;
gap:25px;
max-width:300px;
}

.card{
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:12px;
text-align:left;
border:1px solid rgba(255,255,255,0.1);
transition:0.4s;
backdrop-filter:blur(10px);
}

.card h3{
font-size:18px;
margin-bottom:8px;
color:#00e5ff;
}

.card p{
font-size:14px;
opacity:0.85;
line-height:1.6;
}

/* HOVER EFFECT */

.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,229,255,0.25);
}

/* PHONE */

.phone{
position:relative;
width:280px;
display:flex;
justify-content:center;
align-items:center;
}

.phone img{
width:260px;
border-radius:25px;
box-shadow:0 20px 40px rgba(0,0,0,0.6);
z-index:2;
}

/* BACKGROUND CIRCLES */

.bg-circle{
position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:0.6;
}

.c1{
width:200px;
height:200px;
background:#00e5ff;
top:-40px;
left:-40px;
}

.c2{
width:180px;
height:180px;
background:#00ff9d;
bottom:-40px;
right:-40px;
}

.c3{
width:150px;
height:150px;
background:#3a7bff;
top:50%;
left:-70px;
}

/* RESPONSIVE */

@media(max-width:900px){

.security-container{
flex-direction:column;
}

.features{
max-width:100%;
}

.phone{
margin:40px 0;
}

}


.pricing-section{
background:linear-gradient(135deg,#020b1a,#081f38,#020b1a);
padding:100px 8%;
color:white;
}

.pricing-container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.pricing-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:14px;
padding:40px 30px;
width:340px;
transition:0.4s;
backdrop-filter:blur(10px);
position:relative;
}

.pricing-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,229,255,0.25);
}

/* premium highlight */

.pricing-card.premium{
border:2px solid #00e5ff;
box-shadow:0 0 25px rgba(0,229,255,0.3);
}

/* header */

.plan-header{
text-align:center;
margin-bottom:20px;
}

.plan-title{
font-size:24px;
margin-bottom:10px;
color:#00e5ff;
}

/* badge */

.discount-badge{
background:#00e5ff;
color:black;
font-size:12px;
padding:6px 10px;
border-radius:20px;
display:inline-block;
margin-bottom:10px;
font-weight:600;
}

/* price */

.price-box{
margin:10px 0;
}

.new-price{
font-size:36px;
font-weight:700;
color:#00ff9d;
}

.old-price{
margin-left:10px;
text-decoration:line-through;
opacity:0.6;
}

.license{
font-size:13px;
opacity:0.8;
}

/* features */

.features-list{
list-style:none;
padding:0;
margin:25px 0;
}

.features-list li{
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.08);
font-size:14px;
}

/* button */

.buy-btn{
display:block;
text-align:center;
padding:14px;
background:#00e5ff;
color:black;
border-radius:30px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.buy-btn:hover{
box-shadow:0 0 20px #00e5ff;
transform:scale(1.05);
}

.premium-btn{
background:#00ff9d;
}

.premium-btn:hover{
box-shadow:0 0 20px #00ff9d;
}

/* responsive */

@media(max-width:900px){

.pricing-container{
flex-direction:column;
align-items:center;
}

}


.features-list li{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
font-size:15px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.features-list i{
color:#00ff9d;
font-size:18px;
}

.steps-section{
padding:80px 10%;

text-align:center;
color:white;
}

.steps-title{
font-size:34px;
margin-bottom:60px;
}

.steps-container{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.step-card{
background:#132a45;
padding:30px;
width:250px;
border-radius:12px;
transition:0.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.step-card:hover{
transform:translateY(-10px);
}

.step-number{
width:50px;
height:50px;
background:#25d3a2;
color:black;
font-weight:bold;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
margin:0 auto 15px;
}

.step-card h3{
margin-bottom:10px;
color:#25d3a2;
}

.step-card p{
font-size:14px;
color:#cfd8e3;
}




/* SECTION */

.custom-feature-section{
padding:100px 8%;
background:#081f38;
color:white;
font-family:Arial, sans-serif;
}

/* HEADING */

.section-heading{
text-align:center;
margin-bottom:60px;
}

.section-heading h2{
font-size:38px;
margin-top:15px;
color:#00e5ff;
}

.agent-pill{
display:inline-block;
background:rgba(255,255,255,0.08);
padding:10px 18px;
border-radius:30px;
font-size:14px;
}

.agent-pill i{
color:#00ff9d;
margin-right:6px;
}

/* GRID */

.custom-feature-items{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

/* CARD */

.custom-feature-item{
background:rgba(255,255,255,0.05);
border-radius:12px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.08);
transition:0.4s;
}

/* HOVER */

.custom-feature-item:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,229,255,0.25);
}

/* IMAGE */

.custom-feature-thumb img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}

/* CONTENT */

.custom-feature-content{
padding:20px;
}

.custom-feature-content h4{
font-size:18px;
margin-bottom:8px;
color:#00ff9d;
}

.custom-feature-content p{
font-size:14px;
line-height:1.6;
opacity:0.9;
}

/* SCROLL ANIMATION */

.custom-feature-item{
opacity:0;
transform:translateY(50px);
transition:all 0.6s ease;
}

.custom-feature-item.show{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width:768px){

.section-heading h2{
font-size:28px;
}

.custom-feature-thumb img{
height:160px;
}

}



/* section */
.benefits-section {
  padding: 80px 6%;
  background: #081f38;
  color: #fff;
  font-family: Arial, sans-serif;
}

/* grid */
.benefits-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  justify-items: center; /* center each card in its cell */
}

/* card */
.benefit-card {
  background: #0f2a45;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: 0.3s;
  width: 100%;        /* fill the grid cell */
  max-width: 300px;   /* optional: prevent cards from being too wide */
  opacity: 1;         /* make visible */
  transform: translateY(0); /* reset animation offset */
}

/* hover effect */
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 229, 255, 0.3);
}

/* image */
.benefit-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* content */
.benefit-content {
  padding: 18px;
  text-align: center;
}

.benefit-content i {
  font-size: 26px;
  color: #00ff9d;
  margin-bottom: 10px;
}

.benefit-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #00e5ff;
}

.benefit-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #d9d9d9;
}




.customer-reviews {
      padding: 60px 6%;
      background: #081f38;
      color: #00e5ff;
      font-family: Arial, sans-serif;
      text-align: center;
    }

    /* Header / Title */
    .customer-reviews h2 {
      font-size: 36px;
      margin-bottom: 50px;
      color: #00e5ff;
    }

    /* Agent Pill */
    .agent-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 20px;
    }

    .agent-pill h4 {
      font-size: 20px;
      color: #00ff9d;
    }

    .agent-pill i {
      color: #ffd700; /* star color */
    }

    /* Swiper container */
    .swiper-container-wrapper {
      max-width: 900px;
      margin: 0 auto;
    }

    /* Single card with all reviews */
    .swiper-slide {
      background: #0f2a45;
      border-radius: 20px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
      box-shadow: 0 10px 30px rgba(0, 229, 255, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .swiper-slide:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 40px rgba(0, 229, 255, 0.35);
    }

   .customer-reviews{
  padding:60px 20px;
  text-align:center;
}

.reviews-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:25px;
  margin-top:40px;
}

.reviewer-item{
  background:rgba(255,255,255,0.05);
  padding:25px;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  transition:0.3s;
}

.reviewer-item:hover{
  transform:translateY(-8px);
}

.reviewer-img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:10px;
}

.reviewer-name{
  font-weight:600;
  font-size:18px;
}

.reviewer-role{
  font-size:14px;
  color: #00ff9d;
  margin-bottom:10px;
}

.review-text{
  font-size:14px;
  color:white;
}
@media(max-width:992px){
  .reviews-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:600px){
  .reviews-grid{
    grid-template-columns: 1fr;
  }
}


    /* Hero Section */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100px 6%;
  background: #081f38;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-left {
  flex: 1;
  z-index: 2;
}

.hero-left h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #00e5ff;
}

.hero-left p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #ccc;
}

.hero-left button {
  padding: 12px 30px;
  background: #00ff9d;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  color: #081f38;
  transition: 0.3s;
}

.hero-left button:hover {
  background: #00e5ff;
}



#heroCanvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}


.feature-section{
padding:100px 8%;
background:#081f38;
color:white;
font-family:Arial;
}

.feature-heading{
text-align:center;
font-size:42px;
margin-bottom:80px;
color:#00e5ff;
}

.feature-row{
display:flex;
align-items:center;
gap:70px;
margin-bottom:90px;
}

.feature-row.reverse{
flex-direction:row-reverse;
}

.feature-img img{
width:100%;
max-width:420px;
border-radius:15px;
box-shadow:0 20px 45px rgba(0,229,255,0.3);
transition:0.4s;
}

.feature-img img:hover{
transform:scale(1.08);
}

.feature-text{
max-width:500px;
}

.feature-text h3{
font-size:30px;
color:#00ff9d;
margin-bottom:15px;
}

.feature-text p{
font-size:16px;
line-height:1.8;
color:#d0d0d0;
}

/* responsive */

@media(max-width:900px){

.feature-row{
flex-direction:column;
text-align:center;
}

.feature-row.reverse{
flex-direction:column;
}

}


.faq-section{
padding:100px 8%;
background:#081f38;
color:white;
font-family:Arial;
}

.faq-title{
text-align:center;
font-size:42px;
margin-bottom:60px;
color:#00e5ff;
}

.faq-container{
max-width:900px;
margin:auto;
}

.faq-item{
background:#0f2a45;
margin-bottom:18px;
border-radius:10px;
overflow:hidden;
transition:0.3s;
border:1px solid rgba(255,255,255,0.08);
}

.faq-item:hover{
box-shadow:0 8px 25px rgba(0,229,255,0.25);
}

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
font-size:18px;
cursor:pointer;
}

.faq-toggle{
background:#00ff9d;
border:none;
width:35px;
height:35px;
border-radius:50%;
font-size:20px;
cursor:pointer;
}

.faq-answer{
padding:0 20px;
max-height:0;
overflow:hidden;
transition:all 0.4s ease;
color:#d0d0d0;
line-height:1.7;
}

.faq-item.active .faq-answer{
padding:20px;
max-height:300px;
}


.protection-section{
padding:100px 8%;
background:#071a2d;
color:white;
text-align:center;
font-family:Arial;
}

.protection-title{
font-size:40px;
margin-bottom:80px;
color:#00e5ff;
}

.timeline{
position:relative;
max-width:800px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
width:4px;
height:100%;
background:#00e5ff;
transform:translateX(-50%);
}

.timeline-item{
position:relative;
width:50%;
padding:30px;
opacity:0;
transform:translateY(50px);
transition:0.6s;
}

.timeline-item:nth-child(odd){
left:0;
text-align:right;
}

.timeline-item:nth-child(even){
left:50%;
text-align:left;
}

.circle{
width:45px;
height:45px;
background:#00ff9d;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:black;
position:absolute;
top:30px;
}

.timeline-item:nth-child(odd) .circle{
right:-23px;
}

.timeline-item:nth-child(even) .circle{
left:-23px;
}

.timeline-item.show{
opacity:1;
transform:translateY(0);
}

.timeline-item h3{
color:#00ff9d;
margin-bottom:10px;
}

.timeline-item p{
font-size:14px;
color:#d3d3d3;
line-height:1.6;
}


.protection-simple{
padding:100px 8%;
background:#081f38;
color:white;
font-family:Arial;
}

.protection-main-title{
text-align:center;
font-size:38px;
margin-bottom:60px;
color:#00e5ff;
}

.protection-list{
max-width:900px;
margin:auto;
display:flex;
flex-direction:column;
gap:30px;
}

.protection-row{
display:flex;
gap:20px;
align-items:flex-start;
padding:25px;
border-bottom:1px solid rgba(255,255,255,0.1);
transition:0.3s;
}

.protection-row i{
font-size:28px;
color:#00ff9d;
margin-top:5px;
}

.protection-row h3{
color:#00ff9d;
margin-bottom:8px;
}

.protection-row p{
color:#d3d3d3;
line-height:1.6;
font-size:14px;
}

.protection-row:hover{
background:#0f2a45;
transform:translateX(8px);
}



.contact-page{
padding:100px 8%;
background:#061a2f;
color:white;
font-family:Arial;
}

.contact-heading{
text-align:center;
font-size:40px;
color:#00e5ff;
margin-bottom:15px;
}

.contact-intro{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:60px;
color:#cfcfcf;
line-height:1.6;
}

.contact-layout{
display:flex;
justify-content:center;
gap:60px;
flex-wrap:wrap;
}

/* LEFT SIDE */

.contact-details{
max-width:420px;
}

.contact-details h3{
color:#00ff9d;
margin-bottom:15px;
}

.contact-details p{
color:#d0d0d0;
line-height:1.6;
}

.contact-info{
margin-top:25px;
}

.contact-info p{
margin-bottom:10px;
}

.contact-info i{
color:#00e5ff;
margin-right:10px;
}

/* FORM */

.contact-form{
background:#0b2a47;
padding:35px;
border-radius:8px;
width:360px;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form h3{
color:#00ff9d;
margin-bottom:10px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border:none;
outline:none;
border-radius:5px;
background:#071f38;
color:white;
}

.contact-form textarea{
height:120px;
resize:none;
}

.contact-form button{
margin-top:10px;
padding:12px;
border:none;
background:#00e5ff;
border-radius:5px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

.contact-form button:hover{
background:#00c4d6;
}



.about-crakshak{
padding:100px 10%;
background:#0a192f;
color:white;
font-family:Arial;
}

.about-title{
text-align:center;
font-size:42px;
margin-bottom:60px;
color:#00e5ff;
}

.about-content{
max-width:900px;
margin:auto;
}

.about-content h2{
margin-top:30px;
color:#00ff9d;
border-left:4px solid #00ff9d;
padding-left:12px;
transition:0.3s;
}

.about-content h2:hover{
transform:translateX(6px);
}

.about-content p{
margin-top:10px;
line-height:1.8;
color:#d0d0d0;
}

.about-tagline{
text-align:center;
margin-top:50px;
font-size:24px;
color:#00e5ff;
}






body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#0f2a45;
color:#333;
}


/* HERO */

.policy-hero{

background:linear-gradient(135deg,#081f38,#0c3d6d);

color:white;

text-align:center;

padding:100px 20px;

}

.hero-content h1{

font-size:48px;

margin-bottom:15px;

}

.hero-content p{

max-width:700px;

margin:auto;

opacity:0.9;

line-height:1.6;

}


/* CONTENT */

.policy-container{

max-width:1000px;

margin:auto;

padding:60px 20px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}


/* CARD */

.policy-card{

background: rgba(0,229,255,0.25);

padding:30px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

transition:0.3s;

}

.policy-card:hover{

transform:translateY(-6px);

}

.policy-card h2{

color:#081f38;

margin-bottom:15px;

}

.policy-card ul{

padding-left:20px;

}

.policy-card li{

margin-bottom:8px;

}

.email{

font-weight:bold;

color:#081f38;

}


/* FOOTER */

.policy-footer{

background:#081f38;

color:white;

text-align:center;

padding:20px;

margin-top:40px;

}


/* MOBILE */

@media(max-width:768px){

.hero-content h1{

font-size:32px;

}

.policy-container{

grid-template-columns:1fr;

}

}



body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:white;
line-height:1.9;
}


/* HERO */

.terms-hero{

background:#0f2a45;

color:white;

text-align:center;

padding:80px 20px;

}

.terms-hero h1{

font-size:42px;

margin-bottom:10px;

}



/* CONTENT */

.terms-container{

max-width:900px;

margin:auto;

padding:50px 20px;

background: #081f38;

}


.terms-container h2{

color:#081f38;

margin-top:30px;

font-size:22px;

}


.terms-container p{

margin-top:10px;

}


.email{

font-weight:bold;

color:#081f38;

}



/* FOOTER */

.terms-footer{

background:#081f38;

color:white;

text-align:center;

padding:20px;

margin-top:40px;

}


/* MOBILE */

@media(max-width:768px){

.terms-hero h1{

font-size:30px;

}

.terms-container{

padding:40px 15px;

}

}