:root{
  --blue:#0f2375;
  --orange:#ff7a00;
  --text:#ffffff;
  --card:#f1f1f1;
  --primary:#0d1aff;
}

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

body{
    font-family:'Poppins', sans-serif;
    /* background:#0c2c60; */
    color:#fff;
}


/* ================== HEADER ==================== */
.header{
  background:var(--blue);
  padding:18px 40px;
}

.nav{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* two ticker rows */
.ticker{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#f2f2f2;
  padding:14px 0;
  overflow:hidden;
  position:relative;
}

/* faint edges */
.ticker::before,
.ticker::after{
  content:"";
  position:absolute;
  top:0;
  width:230px;
  height:100%;
  pointer-events:none;
  z-index:2;
}

.ticker::before{
  left:0;
  background:linear-gradient(to right,#faf7f7,transparent);
}

.ticker::after{
  right:0;
  background:linear-gradient(to left,#fdf8f8,transparent);
}

.coin img{
  width:18px;
  height:18px;
}

/* LOGO */
.logo{
  font-weight:800;
  font-size:40px;
  color:var(--orange);
  display:flex;
  align-items:center;
  /* gap:8px; */
}

.logo span{
  border:2px solid var(--orange);
  padding:2px 8px;
  font-size:14px;
  color:#fff;
}

/* MENU */
.menu{
  display:flex;
  gap:28px;
}

.menu a{
  color:#cfd6ff;
  text-decoration:none;
  font-size:14px;
}

.menu a.active{
  color:var(--orange);
}

/* BUTTON */
.btn{
  background:var(--orange);
  color:#fff;
  padding:10px 18px;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
  display:flex;
  gap:8px;
  align-items:center;
}

/* ===== TICKER ===== */
.ticker-wrap{
  display:flex;
  gap:40px;
  white-space:nowrap;
  animation:scroll 25s linear infinite;
}

.ticker-wrap.reverse{
  animation:scrollReverse 25s linear infinite;
}

.coin{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#333;
}

.green{color:#1db954;}
.red{color:#e53935;}

@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes scrollReverse{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .menu{display:none;}
}

/* ============hero section=========== */
/* ================= HERO ================= */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:90px 120px;
    /* background-color:#0c2c60; */
    background-blend-mode: multiply;
    background: 
    /* linear-gradient(rgba(10,36,80,0.96), rgba(10,36,80,0.96)), */
    url('images/j3.JPG') center/cover no-repeat;
}

/* ================= LEFT ================= */

.lef{
    max-width:640px;
}

.lef h1{
    font-family:'Montserrat', sans-serif;
    font-size:2.4rem;
    font-weight:800;
    line-height:1.25;
    letter-spacing:0.5px;
}

.gradient-text{
    background:linear-gradient(90deg,#dfdbd7,#ff8c32);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.lef p{
    margin-top:30px;
    font-size:16px;
    line-height:1.9;
    color:#cfd8ff;
    max-width:580px;
}

.buttons{
    margin-top:40px;
    display:flex;
    gap:22px;
}

.btn-orange{
    background:#ff8c32;
    padding:15px 32px;
    border-radius:30px;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    border:2px solid #ff8c32;
    box-shadow:0 0 20px rgba(255,140,50,0.35);
}

.btn-outline{
    padding:15px 32px;
    border-radius:30px;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    border:2px solid rgba(255,255,255,0.7);
}

/* ================= RIGHT CARD ================= */

.righ{
    width:500px;
    padding:40px;
    border-radius:25px;
    border:2px solid rgba(255,255,255,0.35);
    backdrop-filter:blur(8px);
}

.righ h2{
    font-family:'Montserrat', sans-serif;
    font-size:28px;
    margin-bottom:35px;
}

/* ================= COUNTDOWN ================= */

.countdown{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.count-box{
    text-align:center;
}

.count-box h3{
    font-size:32px;
    font-weight:700;
}

.count-box span{
    font-size:13px;
    color:#cfcfcf;
}

.colon{
    font-size:28px;
    font-weight:700;
}

/* ================= PROGRESS ================= */

.progress-label{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.progress{
    height:18px;
    background:#e6e6e6;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:12px;
}

.progress-bar{
    width:36%;
    height:100%;
    background:#2f5dff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    font-weight:600;
}

.softcap{
    font-size:14px;
    margin-bottom:15px;
}

.accept{
    font-size:13px;
    color:#cfcfcf;
}
/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
    .hero{
        padding:70px 60px;
    }

    .lef h1{
        font-size:48px;
    }

    .righ{
        width:440px;
    }
}

@media (max-width: 992px) {

    .hero{
        flex-direction:column;
        text-align:center;
        gap:60px;
    }

    .lef{
        max-width:100%;
    }

    .lef p{
        margin-left:auto;
        margin-right:auto;
    }

    .buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .right{
        width:100%;
        max-width:500px;
    }

    .countdown{
        justify-content:center;
        gap:15px;
    }
}

@media (max-width: 600px) {

    .hero{
        padding:60px 25px;
    }

    .lef h1{
        font-size:34px;
        line-height:1.3;
    }

    .lef p{
        font-size:14px;
    }

    .btn-orange,
    .btn-outline{
        padding:12px 20px;
        font-size:14px;
    }

    .righ{
        padding:25px;
    }

    .count-box h3{
        font-size:22px;
    }

    .colon{
        font-size:20px;
    }

    .progress{
        height:14px;
    }

    .progress-bar{
        font-size:11px;
    }
}
/* another respon check */
/* ================= RESPONSIVE ================= */

@media (max-width: 1200px){

    .hero{
        padding: 60px 40px;
        gap: 40px;
    }

    .hero h1{
        font-size: 42px;
    }

    .righ{
        padding: 30px;
    }
}

/* ===== Tablet ===== */

@media (max-width: 992px){

    .hero{
        flex-direction: column;
        text-align: center;
        padding: 60px 30px;
    }

    .lef,
    .righ{
        width: 100%;
    }

    .buttons{
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .countdown{
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .progress-label{
        font-size: 14px;
    }

    .ticker{
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===== Mobile ===== */

@media (max-width: 600px){

    .hero{
        padding: 40px 20px;
    }

    .hero h1{
        font-size: 28px;
        line-height: 1.3;
    }

    .hero p{
        font-size: 14px;
    }

    .buttons{
        flex-direction: column;
        align-items: center;
    }

    .buttons a{
        width: 100%;
        text-align: center;
    }

    .countdown{
        gap: 6px;
    }

    .count-box h3{
        font-size: 20px;
    }

    .count-box span{
        font-size: 12px;
    }

    .colon{
        font-size: 18px;
    }

    .progress{
        height: 25px;
    }

    .progress-bar{
        font-size: 13px;
    }

    .softcap,
    .accept{
        font-size: 12px;
    }
}

/* ===============================
    second section 
================================== */

/* ===== TOP STATS ===== */
.stats{
  background:#efefef;
  padding:70px 20px;
}

.stats-wrap{
  max-width:1150px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.stat{
  background:var(--card);
  padding:28px 20px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.stat h3{
  margin:0 0 10px;
  font-size:28px;
  font-weight:700;
}

.stat p{
  margin:0;
  color:#555;
  font-size:16px;
}

/* ===== BLUE SECTION ===== */
.features{
  background:var(--blue);
  color:#fff;
  padding:80px 20px;
}

.features-wrap{
  max-width:1150px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  text-align:center;
}

.feature{
  max-width:340px;
  margin:auto;
}

.icon{
  font-size:34px;
  margin-bottom:16px;
  opacity:.95;
}

.feature h3{
  margin:0 0 12px;
  font-size:24px;
}

.feature p{
  margin:0;
  color:#d7ddff;
  line-height:1.7;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .stats-wrap{
    grid-template-columns:repeat(2,1fr);
  }
  .features-wrap{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .stats-wrap{
    grid-template-columns:1fr;
  }
}

/* ===========4th sections=============== */
/* ============= TOKEN SECTION ================= */
/* video style */

.token-right{
    overflow:hidden;
}

.token-right video{
    transition: transform 0.5s ease;
}

.token-right:hover video{
    transform: scale(1.05);
}

.token-right{
    overflow:hidden;
}

.token-right video{
    transition: transform 0.5s ease;
}

.token-right:hover video{
    transform: scale(1.05);
}

/* ends */

.token-section{
    padding:80px 20px;
}

.token-container{
    max-width:1200px;
   margin-left: 10%;
   margin-right: 10%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

/* LEFT */
.token-left h1{
    font-size:40px;
    color:#1f3b6d;
    margin-bottom:20px;
    text-align: left;
}
.token-left{
    align-items: flex-start;
    text-align: left;

}
.subtitle{
    color:#555;
    margin-bottom:5px;
}

.supply{
    color:#333;
    margin-bottom:20px;
}

.distribution{
    list-style:none;
}

.distribution li{
    margin-bottom:12px;
    color:#555;
    display:flex;
    align-items:center;
}

/* DOT COLORS */
.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right:10px;
}

.community{background:#d97706;}
.liquidity{background:#a3a36b;}
.team{background:#8b0ea5;}
.sale{background:#20b2aa;}
.reserve{background:#0b3d91;}
.dev{background:#1d4ed8;}

/* RIGHT IMAGE */
.token-right{
    display:flex;
    justify-content:center;
}

.token-right img{
    width:100%;
    max-width:520px;
}

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

.cta{
    background:#2d4b8c;
    color:white;
    padding:60px 20px;
}

.cta-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
}

.cta-text h2{
    font-size:34px;
    margin-bottom:10px;
}

.cta-text p{
    opacity:.9;
}

/* BUTTON */
.cta-btn{
    padding:16px 36px;
    border:none;
    border-radius:30px;
    background:#ff7a00;
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.cta-btn:hover{
    background:#e96d00;
}

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

/* Tablet */
@media(max-width:992px){

    .token-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    /* .distribution li{
        justify-content:;
    } */

    .cta-container{
        flex-direction:column;
        text-align:center;
    }

}

/* Mobile */
@media(max-width:600px){

    .token-left h1{
        font-size:28px;
    }

    .cta-text h2{
        font-size:24px;
    }

    .token-right img{
        max-width:350px;
    }

}

/* ================= RIGHT SIDE ================= */

.right{
    flex:1;
}

.right h2{
    font-size:32px;
    margin-bottom:30px;
    font-weight:600;
    color:#2c3e50;
}

/* ================= FAQ ================= */

.faq-item{
    background:#fff;
    border-radius:8px;
    margin-bottom:15px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    overflow:hidden;
}

.faq-question{
    padding:18px 20px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:500;
    color:#333;
}

.faq-icon{
    font-size:20px;
    font-weight:600;
}

.faq-answer{
    padding:18px 20px;
    border-top:1px solid #eee;
    display:none;
    color:#555;
    font-size:14px;
    line-height:1.6;
    background:#fafafa;
}

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

@media (max-width: 992px){
    .section{
        flex-direction:column;
        text-align:center;
        padding:60px 40px;
    }

    .right{
        width:100%;
    }

    .right h2{
        font-size:28px;
    }

    .faq-question{
        text-align:left;
    }
}

@media (max-width: 600px){
    .section{
        padding:50px 20px;
    }

    .right h2{
        font-size:24px;
    }

    .faq-question{
        font-size:14px;
    }

    .faq-answer{
        font-size:13px;
    }
}
/* ===============end=========================== */


/* =====================5th sections=========== */
/* <!-- ===============why Us=========================== --> */


:root{
  --bg1:#1f3c88;
  --bg2:#294a9b;
  --text:#ffffff;
  --muted:#d6dcff;
  --bar:#6c86ff;
  --bar-bg:#d9d9d9;
}

/* SECTION */
.why{
  position:relative;
  padding:90px 20px;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow:hidden;
}

/* subtle dots */
.why::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
}

/* container */
.why-container{
  max-width:1150px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  position:relative;
  z-index:2;
}

/* heading */
.why-title{
  text-align:center;
  margin-bottom:60px;
}

.why-title h2{
  font-size:36px;
  margin:0;
  font-weight:700;
}

.why-title p{
  margin-top:10px;
  color:var(--muted);
}

/* left list */
.why-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.why-item strong{
  display:block;
  margin-bottom:6px;
}

.why-item p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* right bars */
.why-bars{
  display:flex;
  flex-direction:column;
  gap:28px;
  justify-content:center;
}

.bar-block span{
  display:block;
  margin-bottom:10px;
}

.bar{
  width:100%;
  height:18px;
  background:var(--bar-bg);
  border-radius:4px;
  overflow:hidden;
}

.bar-fill{
  height:100%;
  width:0;
  background:var(--bar);
  border-radius:4px;
  transition:width 1.4s ease;
}

/* responsive */
@media(max-width:900px){
  .why-container{
    grid-template-columns:1fr;
    gap:40px;
  }
  .why{
    padding:70px 18px;
  }
}

@media(max-width:600px){
  .why-title h2{
    font-size:28px;
  }
}


/* =================app sections=============== */
    .store-buttons{
    margin-top:40px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.store-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    transition: all 0.3s ease;
}

.store-btn svg{
    flex-shrink:0;
}

/* Zoom Hover Effect */
.store-btn:hover{
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
/* ================= SECTION ================= */
.ap_section{
background:#ecf5fc;
}

.app-section{
    padding:50px 0px;
    text-align:center;
    margin: 0rem 10%;
    font-family:'Poppins', sans-serif;
}

.app-section h2{
    font-size:38px;
    font-weight:700;
    margin-bottom:10px;
    color:#000;
}

.app-section .subtitle{
    font-size:16px;
    color:#555;
    margin-bottom:60px;
}

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

.app-container{
    display:flex;
    align-items:center;
    justify-content:center;
    
}

/* LEFT IMAGE */

.app-left{
    flex:1;
    display:flex;
    justify-content:center;
}

.app-left img{
    width:100%;
    max-width:270px;
}

/* RIGHT CONTENT */

.app-right{
    flex:1;
    text-align:left;
}

.app-right p{
    font-size:15px;
    line-height:1.8;
    color:#555;
    margin-bottom:20px;
}

/* LIST */

.featur{
    display:flex;
    align-items:flex-start;
    margin-bottom:18px;
  text-align: left;
}

.featur span{
    color:#3b82f6;
    font-weight:700;
    margin-right:10px;
    font-size:18px;
    line-height:1.5;
    text-align: left;
}

.featur p{
    margin:0;
    font-size:14px;
    color:#555;
    text-align: left;
}


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

@media (max-width: 992px){

    .app-section{
        padding:70px 40px;
    }

    .app-container{
        flex-direction:column;
        text-align:center;
        gap:50px;
    }

    .app-right{
        text-align:center;
    }

    .featur{
        justify-content:center;
        text-align:left;
    }

    .store-buttons{
        justify-content:center;
    }
}

@media (max-width: 600px){
    .app-section{
    padding:90px 0px;
    text-align:center;
    margin: 0rem 3%;
}

    .app-section h2{
        font-size:30px;
    }

    .app-section .subtitle{
        font-size:14px;
    }
     .app-right p{
        margin:0  3%;
    }

    .app-right p{
        font-size:14px;
        text-align:justify;
    }

    .featur p{
        font-size:13px;
    }

    .store-buttons a{
        padding:10px 18px;
        font-size:13px;
    }
}

 /* <!-- =================user tes=========== --> */
    .blue{
  background: linear-gradient(#3b82f6,#f97316);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.orange{
  background: linear-gradient(90deg,#f97316,#fb923c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.card{
  min-width:calc(33.333% - 20px);
  background:#fff;
  padding:40px 30px;
  border-radius:20px;

  /* UPDATED outline */
  border:1px solid #c289f8;
  /* box-shadow:
    0 10px 30px rgba(0,0,0,.04),
    0 0 0 1px rgba(168,85,247,.15) inset; */
}


.card .text{
  color:rgb(58, 58, 145);   /* muted gray like UI */
  line-height:1.7;
  font-weight:400;
  
}

.card h4{
  color:#111827;   /* name slightly dark */
}

.role{
  color:#9ca3af;   /* lighter subtitle */
}

/* ====================================== */
    .success{
  padding:80px 20px;
  background:#f6f7fb;
  font-family:system-ui;
}

.container{
  max-width:1200px;
  margin:auto;
  text-align:center;
}

.head h2{
  font-size:28px;
  font-weight:700;
}

/* .blue{color:#3b82f6;}
.orange{color:#f97316;} */

.head p{
  margin-top:10px;
  color:#555;
  max-width:720px;
  margin-inline:auto;
}

/* slider */
.slider{
  margin-top:50px;
  overflow:hidden;
  position:relative;
}

.slides{
  display:flex;
  transition:.5s;
  gap:30px;
}

/* card */
.card{
  min-width:calc(33.333% - 20px);
  background:#fff;
  padding:40px 30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* .card .text{
  color:#555;
  line-height:1.7;
} */

.stars{
  color:#f59e0b;
  margin:20px 0;
  letter-spacing:4px;
  font-size:18px;
}

.card h4{
  margin:5px 0;
}

.role{
  color:#777;
  font-size:14px;
}

.card img{
  width:70px;
  margin-top:20px;
}

/* controls */
.controls{
  margin-top:30px;
}

.controls button{
  width:38px;
  height:38px;
  border:none;
  background:#a3e635;
  cursor:pointer;
  margin:0 5px;
  border-radius:6px;
  font-size:18px;
}

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

@media (max-width:1024px){
  .card{
    min-width:calc(50% - 15px);
  }
}

@media (max-width:700px){
  .card{
    min-width:100%;
  }

  .head h2{
    font-size:22px;
  }
}

/* <!-- ======================7th sections=============== -->
 <!-- =========================float icons================== --> */
    .crypto-section{
    background:#d7e8f8;
    padding:100px 0 0 0;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.crypto-section h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.crypto-section .sub-text{
    color:#555;
    margin-bottom:60px;
}

/* ===== Slider ===== */
/* ===== Slider ===== */

.slider{
    width:100%;
    overflow:hidden;
}

.slide-track{
    display:flex;
    gap:40px;
    animation: scroll 25s linear infinite;
    width:max-content; /* Important fix */
}

.slide-track img{
    width:180px;
    object-fit:contain;
    flex-shrink:0; /* Prevent squishing */
}

/* Infinite scrolling animation */
@keyframes scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}


@media(max-width:992px){

    .crypto-section h2{
        font-size:32px;
    }

    .slide-track{
        gap:25px;
    }

    .slide-track img{
        width:130px;
    }
}

@media(max-width:600px){

    .crypto-section{
        padding:70px 0 0 0;
    }

    .crypto-section h2{
        font-size:24px;
    }

    .sub-text{
        font-size:14px;
        padding:0 20px;
    }

    .slide-track{
        gap:15px;
    }

    .slide-track img{
        width:90px;
    }
}
/* ===== SVG Shape ===== */

.shape{
    display:block;
    width:100%;
    height:120px;
}
.shape{
    transform: rotate(180deg);
    position: relative;
    top: -1px;
}
.elementor-shape-fill{
    fill:#a4c9db;
}



.shape.bottom{
    position: absolute;
  bottom:0;
  left:0;
}


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

@media(max-width:992px){

    .crypto-section h2{
        font-size:32px;
    }

    .slide-track img{
        width:130px;
        margin:0 25px;
    }
}

@media(max-width:600px){

    .crypto-section{
        padding:70px 0 0 0;
    }

    .crypto-section h2{
        font-size:24px;
    }

    .sub-text{
        font-size:14px;
        padding:0 20px;
    }

    .slide-track img{
        width:100px;
        margin:0 15px;
    }
}

/* <!-- ========================8th sections====================== -->
 <!-- =====================================faq================== --> */


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

.crypto-faq-section{
    padding:80px 100px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
}

/* ================= LEFT SIDE ================= */

.crypto-faq-left{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

.crypto-faq-left img{
    width:100%;
    max-width:700px;
}

/* ================= RIGHT SIDE ================= */

.crypto-faq-right{
    flex:1;
}

.crypto-faq-right h2{
    font-size:32px;
    margin-bottom:30px;
    font-weight:600;
    color:#2c3e50;
}

/* ================= FAQ ================= */

.crypto-faq-item{
    background:#fff;
    border-radius:8px;
    margin-bottom:15px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    overflow:hidden;
}

.crypto-faq-question{
    padding:18px 20px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:500;
    color:#333;
}

.crypto-faq-icon{
    font-size:20px;
    font-weight:600;
}

.crypto-faq-answer{
    padding:18px 20px;
    border-top:1px solid #eee;
    display:none;
    color:#555;
    font-size:14px;
    line-height:1.6;
    background:#fafafa;
}

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

@media (max-width: 992px){
    .crypto-faq-section{
        flex-direction:column;
        text-align:center;
        padding:60px 40px;
    }

    .crypto-faq-right{
        width:100%;
    }

    .crypto-faq-right h2{
        font-size:28px;
    }

    .crypto-faq-question{
        text-align:left;
    }
}

@media (max-width: 600px){
    .crypto-faq-section{
        padding:50px 20px;
    }

    .crypto-faq-right h2{
        font-size:24px;
    }

    .crypto-faq-question{
        font-size:14px;
    }

    .crypto-faq-answer{
        font-size:13px;
    }
}

/* ================= LEFT ORBIT SYSTEM ================= */

.crypto-faq-orbit-wrapper{
    position:relative;
    width:460px;
    height:460px;
}

.crypto-faq-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,0,0,0.08);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.crypto-faq-ring1{
    width:380px;
    height:380px;
}

.crypto-faq-ring2{
    width:460px;
    height:460px;
}

.crypto-faq-phone{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
}

.crypto-faq-phone img{
    width:250px;
    height: 300px;
}

.crypto-faq-orbit{
    position:absolute;
    width:100%;
    height:100%;
    animation:cryptoRotate 30s linear infinite;
}

.crypto-faq-icon-box{
    position:absolute;
    width:70px;
    height:70px;
    background:#111827;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 15px 35px rgba(0,0,0,0.25);
    animation:cryptoCounterRotate 30s linear infinite;
}

.crypto-faq-icon-box img{
    width:32px;
     position:absolute;
    width:70px;
    height:70px;
    border-radius:50%;
}

/* Icon positions */

.crypto-faq-i1{ top:0%; left:50%; transform:translate(-50%,-50%); }
.crypto-faq-i2{ top:25%; right:0%; transform:translate(50%,-50%); }
.crypto-faq-i3{ bottom:25%; right:0%; transform:translate(50%,50%); }
.crypto-faq-i4{ bottom:0%; left:50%; transform:translate(-50%,50%); }
.crypto-faq-i5{ bottom:25%; left:0%; transform:translate(-50%,50%); }
.crypto-faq-i6{ top:25%; left:0%; transform:translate(-50%,-50%); }

/* Dots */

.crypto-faq-dot{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    animation:cryptoFloat 6s ease-in-out infinite;
}

.crypto-faq-d1{ background:#7c4dff; top:15%; left:60%; }
.crypto-faq-d2{ background:#ff8c32; bottom:20%; right:20%; animation-delay:1s; }
.crypto-faq-d3{ background:#00c2ff; top:60%; left:15%; animation-delay:2s; }
.crypto-faq-d4{ background:#00d084; top:30%; right:25%; animation-delay:3s; }

/* Animations */

@keyframes cryptoRotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes cryptoCounterRotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(-360deg); }
}

@keyframes cryptoFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

/* Responsive Orbit */

@media(max-width:768px){

    .crypto-faq-orbit-wrapper{
        width:340px;
        height:340px;
    }

    .crypto-faq-ring1{ width:270px; height:270px; }
    .crypto-faq-ring2{ width:340px; height:340px; }

    .crypto-faq-phone img{
        width:170px;
    }

    .crypto-faq-icon-box img{
        width:50px;
        height:50px;
        font-size:20px;
    }
    .crypto-faq-phone img{
    width:150px;
    height: 200px;
}
}

    /* ===== FOOTER ===== */

.footer{
  background:#06090f;
  color:#cbd5e1;
  font-family:system-ui;
}

/* layout */
.container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:80px;
  padding:70px 0;
}

/* columns */
.footer-col{
  max-width:420px;
}

.footer-col h3{
  font-size:14px;
  letter-spacing:1px;
  color:#fff;
}

/* underline line */
.line{
  width:260px;
  height:2px;
  background:#2b6cff;
  margin:12px 0 18px;
  position:relative;
}

.line::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:70%;
  height:2px;
  background:#d1d5db;
}

/* text */
.footer-col p{
  color:#94a3b8;
  line-height:1.7;
}

.email{
  color:#fff;
  margin-bottom:10px;
}

.service{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#94a3b8;
  display:inline-block;
}

/* subscribe */
.subscribe{
  margin-top:20px;
  display:flex;
}

.subscribe input{
  background:transparent;
  border:1px solid #334155;
  padding:10px 12px;
  color:#fff;
  width:200px;
  outline:none;
}

.subscribe button{
  background:#2b6cff;
  border:none;
  color:#fff;
  padding:10px 16px;
  cursor:pointer;
}

/* bottom */
.footer-bottom{
  background:#0b2a63;
  padding:18px 0;
}

.bottom-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}

.links a{
  color:#cbd5e1;
  text-decoration:none;
  margin:0 6px;
}

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

/* Tablet */
@media (max-width: 992px){

  .footer-top{
    flex-direction: column;
    gap: 50px;
  }

  .footer-col{
    width: 100%;
  }

  .bottom-flex{
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .links{
    justify-content: center;
  }

}


/* Mobile */
@media (max-width: 600px){
    .footer-col {
        padding-bottom:10px;
    }
  .footer{
    text-align: center;
  }

  .footer-top{
    padding: 0 20px;
  }

  .footer-bottom{
    padding: 20px 15px;

  }

  .bottom-flex p{
    font-size: 14px;
  }

  .links{
    flex-wrap: wrap;
    gap: 8px;
  }

}
/* ===== SUBSCRIBE RESPONSIVE FIX ===== */

.subscribe{
  display: flex;
  width: 100%;
  gap: 10px;
}

.subscribe input{
  flex: 1;
  min-width: 0;   /* prevents overflow issue */
}

.subscribe button{
  white-space: nowrap; /* prevents text breaking */
}

/* Mobile */
@media (max-width:600px){

  .footer-top{
    flex-direction: column;
    gap: 40px;
  }

  .bottom-flex{
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

}

/* 
<!-- ==========================footer ends============= --> */