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

body{
background:#07162f;
color:white;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #f5e6c8; /* matches your cream/gold text */
}

.stat-icon {
  width: 110px;
  height: 110px;
  margin: 15px 0;
  padding: 5px;
  background: rgba(0,183,255,0,08);
  border: 1px solid rgba(0,183,255,0.4);
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0,183,255,0.5), 
  0 0 30px rgba(0,183,255,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(0,183,255,0.8 )
    0 0 45px rgba(0,183,255,0.4);



}

.stat-label {
  font-size: 1rem;
  color: #ffffff;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    background:#081b38;
    position:sticky;
    top:0;
    z-index:1000;
}

nav{
    display:none;
    position:absolute;
    top:75px;
    left:20px;
    width:220px;
    background:#081b38;
    border-radius:12px;
    padding:20px;
    flex-direction:column;
    box-shadow:0 0 20px rgba(0,183,255,.4);
    z-index:1000;
}

nav.active{
    display:flex;
}

.header-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo img{
    height: 40px;
    display: block;
}

.logo-text{
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

.logo{
font-size:30px;
font-weight:700;
color:#00b7ff;
}

nav{
    display:none;
    position:absolute;
    top:80px;
    left:20px;
    background:#081b38;
    width:220px;
    border-radius:12px;
    padding:20px;
    flex-direction:column;
    box-shadow:0 0 20px rgba(0,183,255,.4);
    z-index:1000;
}

nav.active{
    display:flex;
}

nav a{
text-decoration:none;
color:white;
margin:0 20px;
transition:.3s;
}

nav a:hover{
color:#00b7ff;
}

.btn{
background:#007BFF;
padding:12px 24px;
border-radius:30px;
cursor:pointer;
color: white;
text-decoration: none;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:100px 8%;
}

.left{
width:50%;
}

.left h1{
font-size:60px;
margin-bottom:20px;
}

.left p{
font-size:20px;
color:#cfd6e5;
margin-bottom:30px;
}

.buttons button{
padding:15px 35px;
border:none;
margin-right:15px;
cursor:pointer;
font-size:18px;
border-radius:30px;
}

.primary{
background:#007BFF;
color:white;
}

.secondary{
background:white;
color:#007BFF;
}

.right img{
width:600px;
border-radius:30px;
box-shadow:0 0 20px rgba(0,123,255,.2);
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding:80px 8%;
}

.card{
background:#0d2245;
padding:40px;
text-align:center;
border-radius:20px;
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
background:#007BFF;
}

.card h2{
font-size:40px;
}

.features{
padding:100px 8%;
}

.features h2{
text-align:center;
font-size:45px;
margin-bottom:50px;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.feature{
background:#0d2245;
padding:40px;
border-radius:20px;
text-align:center;
transition:.4s;
box-shadow: 0 0 20px rgba(0, 183, 255, 0.5),
            0 0 40px rgba(0, 183, 255, 0.2);
}

.feature:hover{
transform:scale(1.05);
box-shadow: 0 0 30px rgba(0, 183, 255, 0.8),
            0 0 50px rgba(0, 183, 255, 0.4);
}

.feature i{
font-size:50px;
color:#00b7ff;
margin-bottom:20px;
}

.site-footer{
background:#081b38;
color:white;
padding:60px 8% 20px;
margin-top:80px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
padding-bottom:40px;
border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-col h3.footer-logo{
font-size:28px;
color:#00b7ff;
margin-bottom:15px;
}

.footer-col h4{
color:#00C2FF;
margin-bottom:20px;
font-size:18px;
}

.footer-col p{
color:#cfd6e5;
line-height:1.6;
margin-bottom:10px;
font-size:15px;
}

.footer-col a{
display:block;
color:#cfd6e5;
text-decoration:none;
margin-bottom:12px;
transition:.3s;
}

.footer-col a:hover{
color:#00C2FF;
}

.footer-bottom{
text-align:center;
padding-top:20px;
color:#cfd6e5;
font-size:14px;
}

.menu-toggle{
display:block;
font-size: 34px;
color:white;
cursor:pointer;
}

@media(max-width:900px){
.footer-grid{
grid-template-columns:1fr;
}
}

@media(max-width:900px){

.hero{
flex-direction:column;
}

.left,.right{
width:100%;
text-align:center;
}

.right img{
width:100%;
margin-top:40px;
}

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

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

.hero{
flex-direction:column;
}

.left,.right{
width:100%;
text-align:center;
}

.right img{
width:100%;
margin-top:40px;
}

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

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

.menu-toggle{
display:block;
font-size:32px;
cursor:pointer;
color:white;
}

nav{
display:none;
position:absolute;
top:80px;
left:20px;
background:#081b38;
border-radius:15px;
padding:20px;
width:220px;
flex-direction:column;
box-shadow:0 0 20px rgba(0,183,255,.4);
}

nav.active{
display:flex;
}

nav a{
margin:12px 0;
display:block;
}

.btn{
display:none;
}

}
.page-hero{
    text-align:center;
    padding:90px 10%;
    background: linear-gradient(rgba(7, 22, 47, 0.75), rgba(7, 22, 47, 0.75)),
      url('images/about-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}

.page-hero h1{
    font-size:55px;
    margin-bottom:20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0,0.6);
}

.page-hero p{
    max-width:800px;
    margin:auto;
    font-size:20px;
    text-shadow: 0 1px 6px rgba(0,0,0,0,0.5);
}

.about-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    padding:80px 8%;
}

.about-box{
    background:#0d2245;
    padding:35px;
    border-radius:20px;
    transition:.3s;
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.5),
                0 0 40px rgba(0, 183, 255, 0.2);
}

.step .about-box{
    box-shadow: none;
    border: none;
}

.step .about-box:hover{
    box-shadow: none;
    transform: none;
}

.about-box:hover{
    transform:translateY(-8px);
    box-shadow: 0 0 30px rgba(0, 183, 255, 0.8),
                0 0 50px rgba(0, 183, 255, 0.4);
}
.timeline{
    padding:80px 8%;
    text-align:center;
}

.timeline-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:40px;
}

.step{
    background:#0d2245;
    padding:30px;
    border-radius:20px;
    transition:.3s;
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.5),
                0 0 40px rgba(0, 183, 255, 0.2);
}

.step:hover{
    transform:translateY(-8px);
    box-shadow: 0 0 30px rgba(0, 183, 255, 0.8),
                0 0 50px rgba(0, 183, 255, 0.4);
}

.values{
    padding:80px 8%;
}

.team{
    padding:80px 8%;
}

.active{
    color:#00bfff;
    font-weight:600;
}
.about-icon{
    display: block;
    font-size: 70px;
    color: #00bfff;
    text-align: center;
    margin-bottom: 15px;
}
.about-box{
    text-align: left;
}
.about-box i {
    font-size: 70px;
  color: #00bfff;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.about-box h2 {
  color: #f5e6c8;
  margin-bottom: 15px;
  text-align: center;
}

.about-box h3 {
  text-align: center;
  color: #f5e6c8;
  margin-bottom: 15px;
}

.about-box p {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 10px;
}
.about-box li {
 text-align: left;
  line-height: 1.6;
  margin-bottom: 10px;  
} 


.about-box ul {
  list-style: disc;
  padding-left: 20px;
  text-align: left;

}



.pipeline-image {
  max-width: 100%;
  width: 100%;
  max-width: 1000px;
  display: block;
  margin: 30px auto;
  padding: 15px;
  border-radius: 20px;
  background: rgba(0, 183, 255, 0.05);
  border: 1px solid rgba(0, 183, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 183, 255, 0.5),
              0 0 40px rgba(0, 183, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pipeline-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(0, 183, 255, 0.8),
              0 0 50px rgba(0, 183, 255, 0.4);
}
.project-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.project-card h3,
.project-card p {
  text-align: left;
  width: 100%;
}

.project-card p {
  margin-bottom: 25px;
}

.project-card .status {
  margin-top: auto;
  align-self: flex-start;
}
.project-card h3 {
  min-height: 60px;
}

.map-container {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  margin-top: 20px;
}

.map-container iframe {
  display: block;
  width: 100%;
}

.login-form input[type="email"],
.login-form input[type="password"]{
width:100%;
padding:15px;
margin-bottom:20px;
border:1px solid rgba(255,255,255,.2);
outline:none;
border-radius:15px;
background:#061730;
color:white;
font-size:16px;
}

.login-options{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
font-size:14px;
color:#cfd6e5;
gap: 15px;
}

.login-options .remember{
display:flex;
align-items:center;
gap: 10px;
white-space: nowrap;
flex-shrink: 0;
}

.login-options .remember input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    vertical-align:middle;

}

.login-options .forgot-link{
color:#00C2FF;
text-decoration:underline;
white-space: nowrap;
}

.signup-btn{
width:100%;
background:#007BFF;
border:none;
color:white;
padding:15px;
border-radius:15px;
font-size:18px;
cursor:pointer;
margin-bottom:20px;
transition:.3s;
}

.signup-btn:hover{
background:#00C2FF;
}

.google-btn{
width:100%;
background:#061730;
border:1px solid rgba(255,255,255,.2);
color:white;
padding:15px;
border-radius:15px;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:20px;
transition:.3s;
}

.google-btn:hover{
background:#102b5c;
}

.signup-text{
text-align:center;
color:#cfd6e5;
font-size:14px;
}

.signup-text a{
color:#00C2FF;
text-decoration:underline;
}

hr{
    margin:35px 0;
    border:1px solid rgba(255,255,255,.1);
}

textarea{
    width:100%;
    height:120px;
    padding:15px;
    border-radius:15px;
    background:#061730;
    color:white;
    border:1px solid rgba(255,255,255,.2);
    resize:none;
    margin-top:15px;
}

.feedback-btn{
    width:100%;
    margin-top:20px;
    padding:15px;
    border:none;
    border-radius:15px;
    background:#007BFF;
    color:white;
    cursor:pointer;
}

/* =========================================================
   DCHIPP - Apply Now Button + Internship Application Form
   ========================================================= */
:root{
  --navy-dark:#071427;
  --navy:#0b1e35;
  --navy-light:#122a47;
  --cyan:#00bfff;
  --cyan-glow:rgba(0,191,255,.35);
  --green:#00c896;
  --purple:#8b5cf6;
  --orange:#f5a623;
  --text-light:#eaf4ff;
  --text-muted:#9fb3c8;
  --border:#1f3a5c;
}

/* ---------- Apply Now button (place inside your existing offer-card) ---------- */
.apply-btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cyan);
  color:#04121f;
  font-weight:700;
  font-size:.85rem;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  letter-spacing:.3px;
  font-family:'Poppins',sans-serif;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.apply-btn:hover{
  background:#33d1ff;
  box-shadow:0 0 16px var(--cyan-glow);
  transform:translateY(-1px);
}
.apply-btn i{font-size:.8rem;}

/* ---------- Modal overlay ---------- */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(2,8,17,.75);
  backdrop-filter:blur(4px);
  z-index:1000;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
}
.modal-overlay.active{display:flex;}

.form-card{
  background:var(--navy);
  border:1px solid var(--border);
  border-radius:16px;
  width:100%;
  max-width:760px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:fadeUp .3s ease;
  font-family:'Poppins',sans-serif;
  color:var(--text-light);
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* header */
.form-header{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  padding:28px 30px 22px;
  position:relative;
  border-bottom:1px solid var(--border);
}
.close-btn{
  position:absolute;top:18px;right:18px;
  background:none;border:none;color:var(--text-muted);
  font-size:1.3rem;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.close-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.form-header-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--navy-dark);
  border:2px solid var(--cyan);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  color:var(--cyan);font-size:1.3rem;
}
.form-header h2{
  font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:.3px;
}
.form-header p{
  color:var(--text-muted);font-size:.85rem;margin-top:6px;
}

/* step progress */
.step-progress{
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  padding:20px 30px 0;
}
.step-dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  background:var(--navy-light);
  border:2px solid var(--border);
  color:var(--text-muted);
  transition:all .25s ease;
}
.step-line{
  flex:1;max-width:50px;height:2px;background:var(--border);transition:background .25s ease;
}
.step-dot.active{
  border-color:var(--cyan);
  background:var(--cyan);
  color:#04121f;
  box-shadow:0 0 12px var(--cyan-glow);
}
.step-dot.done{
  border-color:var(--green);
  background:var(--green);
  color:#04121f;
}
.step-line.done{background:var(--green);}

/* body / steps */
.form-body{padding:26px 30px 10px;}
.form-step{display:none;animation:fadeIn .25s ease;}
.form-step.active{display:block;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.step-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:700;
  padding:6px 14px;border-radius:20px;
  margin-bottom:20px;
  color:#04121f;
}
.step-tag.tag-1{background:var(--cyan);}
.step-tag.tag-2{background:var(--green);}
.step-tag.tag-3{background:var(--purple);color:#fff;}
.step-tag.tag-4{background:var(--orange);}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 20px;
}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.85rem;font-weight:600;color:var(--text-light);}
.field label .req{color:#ff6b6b;margin-left:2px;}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  background:var(--navy-dark);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  color:var(--text-light);
  font-family:'Poppins',sans-serif;
  font-size:.9rem;
  outline:none;
  width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:80px;}
.field input::placeholder,.field textarea::placeholder{color:#5c7089;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-glow);
}
.phone-field{display:flex;gap:8px;}
.phone-field .prefix{
  background:var(--navy-light);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  font-size:.9rem;color:var(--text-muted);
  display:flex;align-items:center;
}
.phone-field input{flex:1;}

.upload-box{
  border:1.5px dashed var(--border);
  border-radius:10px;
  padding:26px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  color:var(--text-muted);
  display:block;
}
.upload-box:hover{border-color:var(--cyan);background:rgba(0,191,255,.05);}
.upload-box i{font-size:1.4rem;color:var(--cyan);margin-bottom:8px;display:block;}
.upload-box .file-name{font-size:.8rem;color:var(--green);margin-top:6px;display:block;}
.upload-box small{display:block;margin-top:4px;color:#5c7089;font-size:.75rem;}
.upload-box input[type=file]{display:none;}

.link-field{position:relative;}
.link-field input{padding-right:44px;}
.link-field i{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--cyan);
}

/* declaration */
.declaration-box{
  background:rgba(245,166,35,.08);
  border:1px solid rgba(245,166,35,.35);
  border-radius:12px;
  padding:20px;
  display:flex;gap:14px;
  margin-bottom:10px;
}
.declaration-box i.decl-icon{
  color:var(--orange);font-size:1.4rem;margin-top:2px;
}
.declaration-box h4{color:var(--orange);font-size:1rem;margin-bottom:6px;}
.declaration-box p{color:var(--text-muted);font-size:.85rem;line-height:1.5;margin-bottom:12px;}
.checkbox-row{display:flex;align-items:center;gap:10px;}
.checkbox-row input{width:18px;height:18px;accent-color:var(--orange);}
.checkbox-row label{font-size:.85rem;color:var(--text-light);}

.summary-list{
  background:var(--navy-dark);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:18px;
  font-size:.85rem;
  color:var(--text-muted);
}
.summary-list div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--border);}
.summary-list div:last-child{border-bottom:none;}
.summary-list span.k{color:var(--text-light);font-weight:600;}

/* footer / nav buttons */
.form-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 30px 30px;
  gap:12px;
}
.btn{
  border:none;border-radius:8px;
  padding:12px 26px;
  font-family:'Poppins',sans-serif;
  font-weight:700;font-size:.9rem;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-next, .btn-submit{
  background:var(--cyan);color:#04121f;margin-left:auto;
}
.btn-submit{background:var(--orange);}
.btn-next:hover, .btn-submit:hover{transform:translateY(-1px);box-shadow:0 0 16px var(--cyan-glow);}
.btn-back{
  background:transparent;color:var(--text-muted);
  border:1px solid var(--border);
}
.btn-back:hover{color:#fff;border-color:var(--cyan);}

/* ---------- Success screen ---------- */
.success-screen{
  display:none;
  text-align:center;
  padding:60px 30px;
}
.success-screen.active{display:block;}
.success-screen .success-icon{
  width:76px;height:76px;
  border-radius:50%;
  background:rgba(0,200,150,.12);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.success-screen .success-icon i{font-size:2.2rem;color:var(--green);}
.success-screen h3{
  font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:10px;
}
.success-screen p{color:var(--text-muted);font-size:.9rem;line-height:1.5;max-width:420px;margin:0 auto;}

.team-members{
    padding:80px 8%;
}

.team-members h2{
    color:white;
    margin-bottom:40px;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
}

.team-grid .feature{
    padding:30px;
    text-align:center;
}

@media(max-width:900px){
    .team-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:500px){
    .team-grid{
        grid-template-columns:1fr;
    }
}
.team .grid{
    align-items:stretch;
}

.team .grid .feature{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:280px;
}

.team .grid .feature h3{
    min-height:70px;
    line-height:1.3;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:0;
    color:#00bfff;
}

.team .grid .feature p{
    margin-top:15px;
    padding-top:0;
}
html, body{
    overflow-x:hidden;
    max-width:100%;
}

.trainee-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.trainee-card{
background:#0d2245;
padding:18px;
border-radius:14px;
text-align:center;
transition:.3s;
box-shadow: 0 0 15px rgba(0, 183, 255, 0.4),
            0 0 30px rgba(0, 183, 255, 0.15);
}

.trainee-card:hover{
transform:translateY(-6px);
box-shadow: 0 0 22px rgba(0, 183, 255, 0.7),
            0 0 35px rgba(0, 183, 255, 0.3);
}

.trainee-card h3{
color:white;
font-size:17px;
margin:0;
}

.team-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00bfff;
    display: block;
    margin: 0 auto 15px auto;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
}

.feature {
    text-align: center;
}