:root{
    --container: 1120px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --shadow: 0 8px 28px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
   
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color:var(--ink);
    background:#f5f5f5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }

 
  .nav-wrap{
    background:
      url("") center/cover no-repeat,
      #0b0b10;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav{
    max-width:var(--container);
    margin:0 auto;
    height:64px;
    padding:0 18px;
    display:flex; align-items:center; justify-content:space-between;
    color:#e9eef5;         
  }  
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px}
  .brand img{ height:28px; width:auto; display:block }
  .menu{ display:flex; gap:22px; align-items:center; opacity:.95; font-size:14px }
  .menu a{ color:#e9eef5; text-decoration:none; position:relative }
  .menu a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transition:background .2s ease }
  .menu a:hover::after{ background:rgba(255,255,255,.5) }
  .lang{ display:flex; gap:8px }
  .pill{
    background:#ffd84d; color:#191a1c; font-weight:700;
    padding:6px 10px; border-radius:999px; font-size:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.2); cursor:pointer;
  }


  @media (max-width: 1024px){
    :root{ --container: 920px }
    .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; row-gap:22px }
  }
  @media (max-width: 768px){
    :root{ --container: 680px }
    .nav{ height:58px }
    .menu{ display:none }  /* mobile: hide center menu */
    .lang .pill{ padding:6px 9px }
    .card{ padding:20px }
    .cta{ padding: 44px 16px 64px }
  }
  @media (max-width: 480px){
    :root{ --container: 520px }
    .nav{ padding:0 12px }
    .hero{ padding:24px 16px 8px }
    .card{ padding:16px 14px; border-radius: var(--radius-md) }
    .footer-grid{ grid-template-columns: 1fr 1fr }
  }

 




   

    .profile-card {
      width: 100%;
      height: 520px;
      background: #000;
      border-radius: 25px;
      color: white;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
      transition: all 0.4s ease;
      transform: scale(1);
    }

    /* Hover Zoom + Glow */
    .profile-card:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px rgba(15, 107, 241, 0.45);
    }

    .profile-card img.bg {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out, transform 5s ease;
    }

    .profile-card img.bg.active {
      opacity: 1;
      transform: scale(1.05);
    }

    .profile-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60%;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
    }

    .profile-bottom {
      position: absolute;
      bottom: 20px;
      left: 25px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .preview-circle {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #f3f4f6;
      background-color: white;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .profile-card:hover .preview-circle {
      border-color: #01732b;
      box-shadow: 0 0 20px rgba(3, 101, 48, 0.7);
    }

    .preview-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-info {
      text-align: left;
      line-height: 1.2;
    }

    .profile-info h5 {
      margin: 0;
      font-size: 25px;
      font-weight: 600;
      margin-left: 23px;
      margin-top: 23px;
    }

    .profile-info p {
      margin: 0;
      font-size: 13px;
      opacity: 0.8;
       margin-left: 23px;
      margin-top: 2px;
    }

    /* Description box under card */
    .desc-box {
  background: #ffffff;
  border-radius: 15px;
  padding: 14px 18px;
  font-size: 19px;
  color: #333;
  margin-top: 15px;
  width: 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  text-align: justify;        /* 👈 Equal alignment both sides */
  text-justify: inter-word;   /* 👈 Makes spacing look natural */
  transition: all 0.3s ease;
}

.desc-box:hover {
  box-shadow: 0 0 25px rgba(15, 107, 241, 0.25);
  transform: translateY(-3px);
}


    @media (max-width: 991px) {
      .profile-card {
        height: 500px;
      }
    }

    @media (max-width: 767px) {
      .profile-card {
        height: 480px;
      }
    }


    @media (max-width: 768px) {
  .job-wrapper {
    margin-bottom: 55px;   /* card ke beech ka gap */
  }
}



    


  .vv-copy{
  text-align: center !important;
}


  .vv-footer{
    position: relative;
    isolation:isolate;
    color:var(--ink);
    overflow:hidden;
    padding-top:64px;
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
      radial-gradient(900px 500px at 85% 20%, rgba(0,0,0,.25), transparent 60%),
      linear-gradient(90deg, var(--violet-deep) 0%, #3b2376 40%, #2c1a6a 60%, var(--violet-deep) 100%);
  }

  /* abstract blobs (like screenshot) */
  .vv-footer::before,
  .vv-footer::after{
    content:"";
    position:absolute; inset:auto -15% -18% -15%;
    height:70%;
    
    opacity:.9;
    z-index:0;
  }
  .vv-footer::before{
    inset:auto -10% -35% -10%;
    filter: blur(2px);
  }

  /* CTA */
  .vv-cta{
    text-align:center;
    max-width:920px;
    margin:0 auto 40px;
    padding:0 16px;
    position:relative;
    z-index:1;
  }
  .vv-cta h2{
    font-size: clamp(28px, 4vw, 54px);
    line-height:1.05;
    margin:0 0 12px;
    font-weight:800;
    letter-spacing:.2px;
  }
  .vv-cta p{
    margin:0 auto 20px;
    max-width:720px;
    color:var(--muted);
  }
  .vv-btn{
    display:inline-block;
    padding:12px 22px;
    background:linear-gradient(180deg, var(--btn), #1fa650);
    color:#08130a;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 0 0 10px rgba(52,199,89,.08), 0 6px 30px rgba(52,199,89,.35);
    transition: transform .18s ease, box-shadow .2s ease;
  }
  .vv-btn:hover{ transform: translateY(-1px); box-shadow:0 0 0 12px rgba(52,199,89,.10), 0 10px 36px rgba(52,199,89,.45)}

  /* Grid */
  .vv-wrap{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:40px auto 28px;
    padding:0 20px 10px;
    display:grid;
    grid-template-columns: 1.1fr repeat(4, 1fr) 1.2fr;
    gap:28px 40px;
    align-items:start;
  }

  .col h4{
    font-size:12px;
    letter-spacing:.18em;
    color:#e9e5ff;
    margin:0 0 12px;
  }
  .col ul{list-style:none; padding:0; margin:0}
  .col li{margin:10px 0}
  .col a{color:#e7e7f4; text-decoration:none}
  .col a:hover{ text-decoration:underline }

  /* brand */
  .brand .logo{
    font-family: "Georgia", "Times New Roman", serif;
    font-size:54px;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;
    color:#fff;
  }

  /* social */
  .social .icons{ display:flex; gap:14px; }
  .social .icons a{
    width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center;
    background:rgba(255,255,255,.1);
    color:#e9e9f7; font-size:16px;
    border:1px solid rgba(255,255,255,.14);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .social .icons a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.26) }

  /* copyright */
  .vv-copy{
    position:relative; z-index:1;
    padding:18px 22px 36px;
    color:#b7b7c8;
    font-size:13px;
    max-width:1200px; margin:0 auto;
  }

  /* Responsive */
  @media (max-width: 1024px){
    .vv-wrap{
      grid-template-columns: 1fr 1fr;
      gap:28px;
    }
    .brand{ grid-column: 1 / -1; }
  }
  @media (max-width: 640px){
    .vv-cta{ margin-bottom: 24px; }
    .vv-wrap{
      grid-template-columns: 1fr;
    }
    .brand .logo{ font-size:42px; }
    .social .icons a{ width:38px; height:38px; font-size:15px; }
    .vv-copy{ padding-bottom:28px; }
  }


  @media (max-width: 640px){
  /* One column + center all columns */
  .vv-wrap{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* Center headings + lists for every col (brand & social included) */
  .vv-wrap .col{
    width: 100%;
    text-align: center !important;
  }

  /* Make UL full-center (override earlier inline-block/left rules) */
  .vv-wrap .col ul{
    display: block !important;
    margin: 0 auto;
    padding: 0;
    text-align: center !important;
  }

  /* Neat spacing and no bullets */
  .vv-wrap .col li{
    list-style: none;
    margin: 8px 0;
  }

  /* Allow long links to wrap (fixes ABOUT’s last item) */
  .vv-wrap .col a{
    white-space: normal !important;
  }

  /* Brand logo centered */
  .vv-wrap .brand img{
    display: block;
    margin: 0 auto;
  }

  /* Social icons row centered */
  .vv-wrap .social .icons{
    justify-content: center;
    width: 100%;
  }
}


.os-copy p{
  text-align: justify;           /* दोनों किनारों से बराबर */
  text-align-last: justify;      /* आख़िरी लाइन भी justify */
  text-justify: inter-word;      /* शब्दों के बीच spacing समायोजित */
  hyphens: auto;                 /* बड़े शब्दों पर hyphenation (बेहतर spacing) */
}



/* put this after your existing CSS */
.a3-text{
  text-align: justify;
  text-align-last: left !important;   /* या start */
}

/* tidy typography */
.a3-text{ text-align: justify; text-align-last: left; line-height:1.9; }
.a3-list{
  margin:12px 0 0; padding-left:1.1rem;
  list-style: disc;                    /* bullets */
}
.a3-list li{ margin:6px 0; line-height:1.9; text-align:left; }



/* Our Story → paragraph alignment fix */
.os-copy{ text-align: left; }                 /* center inherit ko override */
.os-copy p{
  margin: 0;
  line-height: 1.9;
  text-align: justify;                        /* dono kinare se barabar */
  text-align-last: left !important;           /* last line middle na ho */
  text-justify: inter-word;                   /* behtar spacing */
  hyphens: auto;                              /* lambi words pe hyphen allow */
}




/* Our Top Faculise  css code here that the part of here word here that the name of that   */

.head_name {
  text-align: center;
  position: relative;
  top: -33px;
}

.head_name p {
  font-size: 35px;
  color: #b30089;
  font-weight: bolder;
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  font-family: "Inter", sans-serif;
  animation: textGlow 2.5s ease-in-out infinite;
}

/* Glow Animation */
@keyframes textGlow {
  0% {
    color: #b30089;
    text-shadow: 0 0 0px transparent;
  }
  50% {
    color: #b30089; /* blue glow phase */
    
  }
  100% {
    color: #b30089;
    text-shadow: 0 0 0px transparent;
  }
}

/* Responsive for smaller screens */
@media (max-width: 576px) {
  .head_name p {
    font-size: 35px;
  }
}


.job-wrapper {
  position: relative;
  width: 380px;
}

.top-gif {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;  /* size adjust */
  height: auto;
  z-index: 10;
}




.job-card {
    padding-top: 50px !important; /* space increase */
}
/* Only for laptop & desktop */



/* Card hover */
.job-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* GIF ko bhi same hover lagao */
.job-wrapper:hover .top-gif {
    transform: translateX(-50%) translateY(-6px) scale(1.02);
    transition: all 0.3s ease;
}

.lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
  display: block;
}




.lead {
  margin: 0 auto !important;   /* paragraph center me */
  max-width: 900px;            /* optional: content ko neat look */
  text-align: left;            /* aapka original style */
}



.muted.mt-2 li {
    list-style-type: disc;
    list-style-position: inside; /* bullet text ke bilkul paas */
              /* perfect alignment */
    text-indent: -5px;           /* bullet aur text ek line me */
    margin-left: 15px;           /* thoda right shift for clean look */
}

.muted.mt-2 {
    padding-left: 0;
}

.muted.mt-2 li {
    list-style-type: disc;
    margin-left: 20px;    /* Bullet + text ek straight line */
    padding-left: 0;
}


/* footer yaha se start hai  */
.site-footer {
  background:  
    radial-gradient(
      circle at center,
      #8f9bff 0%,
      #6f7dff 30%,
      #4a5cff 55%,
      #2f3fd1 75%,
      #1f2aa8 100%
    );
  padding: 60px 20px;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo {
  width: 150px;
  margin-bottom: 15px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
}

.social-icons {
  margin: 15px 0;
}

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none;
}

.footer-col h4 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #ffffff;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
}

.footer-col ul li a:hover {
  color: #ffffff;
}

.footer-qr img {
  width: 160px;
  margin-top: 15px;
}

/* =========================
   Mobile Responsive
========================= */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-icons a {
    margin: 0 8px;
  }

  .footer-qr img {
    margin: 15px auto 0;
  }
}

.icon {
  display: inline-block;
  width: 16px;
  margin-right: 8px;
  font-style: normal;
  color: #000;
}

.icon.clock::before {
  content: "🕒";
}

.icon.phone::before {
  content: "📞";
  color: black;
}

.icon.whatsapp::before {
  content: "💬";
}

.icon.mail::before {
  content: "✉️";
}

.social-icons a {
  color: #000;
  font-size: 18px;
  margin-right: 12px;
  text-decoration: none;
}

.social-icons a:hover {
  color: #ff7a00; /* brand hover color (optional) */
}

/* footer yaha pe end hai  */