*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#070002;
  color:#fff;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
}

/* POPUP */
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.popup-box{
  width:50%;
  max-width:800px;
  background:#5b0014;
  border:2px solid #ffb300;
  border-radius:18px;
  padding:15px;
  position:relative;
  box-shadow:0 0 30px #ff9d00;
}

.popup-box img{
  width:100%;
  border-radius:8px;
}

.close-btn{
  position:absolute;
  top:8px;
  right:10px;
  background:#ffbf22;
  border:none;
  font-size:22px;
  cursor:pointer;
  border-radius:50%;
  width:34px;
  height:34px;
}

/* HEADER */
.top{
  width:100%;
  padding:12px 4%;
  background:#050002;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:contain;
}

.logo h1{
  font-size:32px;
  color:#ffbf22;
  line-height:1.1;
}

.logo h1 span{
  color:#fff;
}

.tagline{
  color:#ffd77a;
  font-size:16px;
  margin-top:5px;
}

.contact{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font: size 18px;
}

.contact i{
  color:#ffbf22;
  margin-right:6px;
  font: size 18px;
}
.contact span{
    font: size 18px;
}

.auth{
  display:flex;
  gap:12px;
}

.auth button{
  padding:11px 22px;
  border-radius:7px;
  border:1px solid #ffb300;
  color:#fff;
  background:linear-gradient(145deg,#740018,#220005);
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 0 12px rgba(255,179,0,.45);
}

.auth .register{
  background:linear-gradient(145deg,#ffbf22,#ff8a00);
  color:#210006;
}

/* 3D NAVBAR */
nav{
  width:98%;
  padding:8px 4% 12px;
  background:#050002;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  max-width:1800px;
  margin:0 auto;
  border:2px solid #ffb300;
  border-radius:35px;
  overflow:hidden;
  background:linear-gradient(145deg,#8a001d,#230006);
  box-shadow:
    0 0 20px rgba(255,179,0,.9),
    inset 0 0 20px rgba(255,255,255,.18);
}

nav a{
  min-height:70px;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:bold;
  border-right:1px solid rgba(255,255,255,.18);
  transition:.3s;
}

nav a:last-child{
  border-right:none;
}

nav i{
  font-size:24px;
  color:#ffca28;
  text-shadow:0 0 14px #ffb300;
}

nav a:hover,
nav a.active{
  background:linear-gradient(145deg,#ffbf22,#700014);
  transform:translateY(-3px);
}

/* HERO */
.hero{
  width:100%;
  min-height:520px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.25)),
    url("../images/hero1.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  padding:45px 7%;
  position:relative;
}

.hero-content{
  max-width:520px;
}

.welcome{
  font-size:28px;
  color:#ffd77a;
  font-style:italic;
}

.hero h1{
  font-size:64px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 5px 12px #000;
}

.hero h1 span{
  color:#ffbf22;
}

.hero p{
  margin-top:15px;
  font-size:22px;
  line-height:1.4;
}

.quote-box{
  position:absolute;
  right:50%;
  top:20%;
  background:rgba(90,0,20,.85);
  border:2px solid #ffb300;
  border-radius:14px;
  padding:25px;
  font-size:25px;
  line-height:1.8;
  text-align:center;
  box-shadow:0 0 18px rgba(255,179,0,.6);
  min-width:240px;
  max-width:440px;
  min-height:270px;
  max-height:400px;
}
.quote-box::before{
    content:"“";
    position:absolute;
    left:5px;
    top: -55px;
    font-size:80px;
    color:#ffbf22;
    font-family:Georgia, serif;
    font-weight:bold;
    Z-index:5;
}
.quote-box::after{
    content:"”";
    position:absolute;
    right:5px;
    bottom: -93px;
    font-size:80px;
    color:#ffbf22;
    font-family:Georgia, serif;
    font-weight:bold;
    z-index:5;
}

/* STATS */
.stats{
  width:88%;
  margin:-35px auto 25px;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:linear-gradient(145deg,#8a001d,#25000a);
  border:1px solid #ffb300;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 0 20px rgba(255,179,0,.35);
}

.stat{
  padding:18px 10px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.2);
}

.stat:last-child{
  border-right:none;
}

.stat i{
  font-size:30px;
  color:#ffbf22;
}

.stat h3{
  font-size:28px;
  margin-top:6px;
}

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

/* CARDS */
.cards{
  width:94%;
  margin:25px auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

.card{
  background:#fff;
  color:#222;
  border-radius:10px;
  overflow:hidden;
  border:2px solid #ffb300;
  text-align:center;
  position:relative;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  transition:.3s;
}

.card:hover{
  transform:translateY(-7px);
}

.card img{
  width:100%;
  height:145px;
  object-fit:cover;
}

.icon-circle{
  width:55px;
  height:55px;
  border-radius:50%;
  background:linear-gradient(145deg,#8a001d,#2c0008);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:-28px auto 8px;
  position:relative;
  z-index:2;
  border:3px solid #ffbf22;
  color:#fff;
  font-size:22px;
}

.card h3{
  color:#8a001d;
  font-size:18px;
  margin-bottom:8px;
}

.card p{
  font-size:14px;
  padding:0 12px;
  line-height:1.4;
}

.card button{
  margin:14px 0 16px;
  padding:8px 22px;
  border-radius:6px;
  border:1px solid #8a001d;
  background:#fff;
  color:#8a001d;
  font-weight:bold;
  cursor:pointer;
}

/* FOOTER */
footer{
  width:94%;
  margin:25px auto;
  background:linear-gradient(145deg,#5b0014,#170006);
  border:1px solid #ffb300;
  border-radius:14px;
  padding:25px;
  box-shadow:0 0 20px rgba(255,179,0,.25);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.3fr 1.5fr 1.4fr;
  gap:28px;
}

.footer-grid h3{
  font-size:20px;
  margin-bottom:12px;
  color:#fff;
}

.footer-grid p,
.footer-grid li{
  font-size:14px;
  line-height:1.7;
  color:#eee;
}

.footer-grid ul{
  list-style:none;
}

.footer-grid li::before{
  content:"› ";
  color:#ffbf22;
  font-weight:bold;
}

.footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 16px;
}

.footer-social i{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(145deg,#8a001d,#8a001d);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  box-shadow:0 7px 0 #33000b,0 0 15px rgba(255,179,0,.7);
  
}

.member-box{
  border:1px solid #ffb300;
  border-radius:10px;
  padding:15px;
  background:rgba(255,255,255,.06);
}

.member-box h3{
  font-size:24px;
  color:#fff;
}

.bottom{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:22px;
  padding-top:15px;
  text-align:center;
  font-size:14px;
}

/* TABLET */
@media(max-width:1000px){
  .top{
    justify-content:center;
    text-align:center;
  }

  .contact{
    justify-content:center;
  }

  nav{
    grid-template-columns:repeat(3,1fr);
    border-radius:22px;
    width:95%;
    margin: 0 auto;
    max-width: 1350px;
  }

  .hero{
    min-height:500px;
  }

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

  
  .stats{
    width:94%;
    grid-template-columns:repeat(3,1fr);
    margin:20px auto;
  }

  .cards{
    grid-template-columns:repeat(3,1fr);
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* MOBILE */
@media(max-width:600px){
  .top{
    padding:12px;
  }

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

  .logo img{
    width:72px;
    height:72px;
  }

  .logo h1{
    font-size:24px;
  }

  .tagline{
    font-size:14px;
  }

  .contact{
    display:none;
  }

  .auth button{
    padding:10px 16px;
  }

  nav{
    width:94%;
    grid-template-columns:repeat(2,1fr);
    border-radius:18px;
    padding:0;
  }

  nav a{
    min-height:72px;
    font-size:12px;
  }

  .hero{
    min-height:520px;
    padding:35px 18px;
    justify-content:center;
    text-align:center;
  }

  .welcome{
    font-size:22px;
  }

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

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

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .stat h3{
    font-size:23px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .card img{
    height:190px;
  }

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

  .footer-social{
    justify-content:center;
  }
}


/* ===== HERO1 MOBILE RESPONSIVE FIX ===== */
/* Desktop par hero1.jpg cover rahegi, mobile par image crop/katne se bachegi */
.hero{
  background-position:center center;
}

/* Quote box ko safe responsive banaya */
.quote-box{
  box-sizing:border-box;
}

@media(max-width:768px){
  .hero{
    /* Mobile par hero image ko top se full width me show karne ke liye */
    min-height:auto;
    padding:62vw 16px 28px;
    background:
      linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.82) 58%,rgba(0,0,0,.95)),
      url("../images/hero1.jpg") top center / 100% auto no-repeat;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }

  .hero-content{
    width:100%;
    max-width:100%;
    padding:16px 8px 0;
  }

  .welcome{
    font-size:20px;
  }

  .hero h1{
    font-size:34px;
    line-height:1.08;
  }

  .hero p{
    font-size:16px;
    line-height:1.45;
    margin-top:10px;
  }

  .quote-box{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    max-width:340px;
    min-width:0;
    min-height:auto;
    max-height:none;
    margin:18px auto 0;
    padding:16px 14px;
    font-size:18px;
    line-height:1.55;
  }

  .quote-box::before{
    top:-35px;
    left:8px;
    font-size:54px;
  }

  .quote-box::after{
    right:8px;
    bottom:-58px;
    font-size:54px;
  }

  .popup-box{
    width:92%;
  }
}

@media(max-width:420px){
  .hero{
    padding-top:66vw;
  }

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

  .quote-box{
    max-width:310px;
    font-size:16px;
  }
}


/* ===== VJM FOOTER SOCIAL 3D COLOR FIX - SAME SIZE ===== */
.footer-social{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:10px 0 16px !important;
  align-items:center !important;
}

.footer-social i{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:20px !important;
  color:#fff !important;
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.35) !important;
  text-shadow:0 2px 3px rgba(0,0,0,.45) !important;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.55),
    inset 0 -7px 10px rgba(0,0,0,.35),
    0 7px 0 rgba(45,0,10,.85),
    0 0 18px rgba(255,179,0,.65) !important;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}

.footer-social i::after{
  content:"" !important;
  position:absolute !important;
  top:5px !important;
  left:7px !important;
  width:55% !important;
  height:32% !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.38) !important;
  filter:blur(1px) !important;
  pointer-events:none !important;
}

.footer-social i:hover{
  transform:translateY(-5px) scale(1.08) !important;
  filter:saturate(1.25) brightness(1.08) !important;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.6),
    inset 0 -7px 10px rgba(0,0,0,.38),
    0 11px 0 rgba(45,0,10,.85),
    0 0 25px rgba(255,213,80,.9) !important;
}

.footer-social .fa-facebook-f{
  background:linear-gradient(145deg,#3d7cff,#0547c9 55%,#00256f) !important;
}

.footer-social .fa-instagram{
  background:radial-gradient(circle at 30% 25%,#ffe36a 0 16%,#ff2a7a 42%,#9b00e8 72%,#3b1aff 100%) !important;
}

.footer-social .fa-youtube{
  background:linear-gradient(145deg,#ff3b3b,#d60000 58%,#680000) !important;
}

.footer-social .fa-whatsapp{
  background:linear-gradient(145deg,#38f56f,#0fb83c 55%,#006b23) !important;
}

.footer-social .fa-telegram{
  background:linear-gradient(145deg,#42d6ff,#138bd6 58%,#064c8b) !important;
}

.footer-social .fa-linkedin-in{
  background:linear-gradient(145deg,#2da9ff,#0a66c2 58%,#003f80) !important;
}

@media(max-width:600px){
  .footer-social{
    justify-content:center !important;
  }
  .footer-social i{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    font-size:20px !important;
  }
}