/* ===== CSS TOKENS ===== */

:root{
  --bg-dark:#0f1f3d;--bg1:#132040;--bg2:#1a2d52;
  --blue:#1a3c6e;--blue-d:#0f2548;--blue-l:#e8f0fc;--blue-mid:#2563a8;--blue-glow:#2563a8;
  --white:#ffffff;--offwhite:#f4f7fc;
  --accent:#2563a8;--accent-l:#dbeafe;
  --lblue:#bae6fd;
  --text:#1a1a2e;--muted:#6b7280;--border:#dde3ee;
  --glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.12);
  --transition: .38s cubic-bezier(.4, 0, .2, 1);
  --shadow:0 4px 24px rgba(26,60,110,.08);
  --shadow-lg:0 20px 60px rgba(26,60,110,.14);
  --font-body:  'Inter',  sans-serif;
      --border: #e2e8f0;
  --r:12px;--r-lg:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;cursor:default}
img{display:block;width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font-family:'Poppins',sans-serif;cursor:default}
::-webkit-scrollbar{width:4px}

/* hide custom cursor ring for standard arrow */
#cur,#cur2{display:none !important;}
::-webkit-scrollbar-track{background:#f0f4ff}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}


/* ===== CUSTOM CURSOR ===== */

#cur,#cur2{position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);will-change:left,top}
#cur{width:9px;height:9px;background:var(--blue-mid);transition:width .15s,height .15s,background .2s}
#cur2{width:34px;height:34px;border:1.5px solid rgba(26,60,110,.4);transition:width .25s,height .25s}
body.cursor-hover #cur{width:16px;height:16px;background:var(--blue)}
body.cursor-hover #cur2{width:56px;height:56px;border-color:rgba(26,60,110,.3)}
body.cursor-dark #cur{background:rgba(255,255,255,.9)}
body.cursor-dark #cur2{border-color:rgba(255,255,255,.4)}


/* ===== LOADER ===== */

#loader{
  position:fixed;inset:0;background:var(--white);z-index:99995;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .8s,visibility .8s;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-yantra{width:80px;height:80px;animation:spinY 3s linear infinite}
.loader-yantra svg{width:100%;height:100%}
.loader-text{font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;letter-spacing:3px;color:var(--blue);text-transform:uppercase;animation:blinkText 1.4s ease-in-out infinite}
.loader-bar{width:180px;height:2px;background:rgba(26,60,110,.1);overflow:hidden;position:relative;border-radius:2px}
.loader-bar::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:barSlide 1.6s ease-in-out infinite}
@keyframes spinY{to{transform:rotate(360deg)}}
@keyframes blinkText{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes barSlide{to{left:200%}}


/* ===== PAGE TRANSITION ===== */

#app{min-height:60vh;transition:opacity .25s,transform .25s}
#app.out{opacity:0;transform:translateY(12px)}

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

.sec{padding:90px 5%}
.sec-alt{background:var(--offwhite)}
.sec-hd{text-align:center;margin-bottom:52px}
.sec-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue-mid);margin-bottom:12px}
.sec-tag::before,.sec-tag::after{content:'';width:20px;height:2px;background:var(--blue-mid);opacity:.3}
.sec-h2{font-family:'Poppins',sans-serif;font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:700;color:var(--text);margin-bottom:14px;line-height:1.2}
.sec-h2 em{font-style:normal;color:var(--blue-mid)}
.sec-desc{font-size:15px;font-weight:300;color:var(--muted);line-height:1.8;max-width:560px;margin:0 auto}
.reveal{transition:opacity .8s,transform .8s;}
.reveal-l{transition:opacity .9s,transform .9s;}
.reveal-r{transition:opacity .9s,transform .9s;}
.reveal.up,.reveal-l.up,.reveal-r.up{opacity:1;transform:none}


/* ===== UTIL ===== */

.btn-primary{display:inline-block;padding:13px 30px;background:var(--blue);border:none;border-radius:8px;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--white);box-shadow:0 6px 24px rgba(26,60,110,.22);transition:all .3s;cursor:pointer}
.btn-primary:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 10px 30px rgba(26,60,110,.35)}
.btn-outline{display:inline-block;padding:13px 30px;background:transparent;border:1.5px solid var(--blue);border-radius:8px;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--blue);transition:all .3s;cursor:pointer}
.btn-outline:hover{background:var(--blue);color:var(--white)}
.view-all{text-align:center;margin-top:48px}
.empty{text-align:center;padding:60px;color:var(--muted);font-size:15px}
.tag{display:inline-block;padding:4px 12px;border-radius:50px;font-size:11px;font-weight:600;letter-spacing:.5px;background:var(--blue-l);color:var(--blue)}



/* TIMELINE */
.timeline {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--blue), var(--accent));
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 36px);
    margin-bottom: 44px;
    position: relative;
}

.timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: calc(50% + 36px);
}

.timeline-dot {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--accent));
    border: 3px solid var(--bg-dark);
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: 0 0 0 5px rgba(14, 165, 233, .15);
}

.timeline-content {
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 22px 26px;
    max-width: 340px;
    transition: all var(--transition);
}

.timeline-content:hover {
    border-color: rgba(14, 165, 233, .35);
    box-shadow: var(--shadow);
}

.timeline-year {
    font-size: .75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 6px;
}

.timeline-content h4 {
    font-family: var(--font-body);
    font-size: .96rem;
    font-weight: 700;
    margin-bottom: 7px;
    color: white;
}

.timeline-content p {
    font-size: .84rem;
    color: white;
}
.director-box{
  display:flex !important;
  gap:40px !important;
  align-items:center !important;
  background:#f8f9fb !important;
  padding:30px !important;
  border-radius:12px !important;
  max-width:1100px !important;
  margin:0 auto !important;
}

/* IMAGE SIDE */
.director-img{
  flex:0 0 40% !important;
}

.director-img img{
  width:100% !important;
  height:320px !important;
  object-fit:cover !important;
  border-radius:12px !important;
}

/* CONTENT SIDE */
.director-content{
  flex:0 0 60% !important;
}

.director-content h3{
  font-size:28px !important;
  margin-bottom:15px !important;
}

.director-content p{
  color:#555 !important;
  line-height:1.8 !important;
  font-size:15px !important;
}
/* ===== SECTION ===== */
.sec{
  padding:90px;
  height: 100%;
  margin:auto;
}

/* ===== GRID ===== */
.ev-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:25px;
}

/* ===== CARD ===== */
.ev-card{
  display:flex;
  gap:15px;
  padding:18px;
  background:#fff;
  border-radius:10px;
  border:1px solid #eee;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:0.3s;
  position:relative;
}

.ev-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

/* ===== DATE BOX ===== */
.ev-date-col{
  min-width:60px;
  text-align:center;
  background:#111;
  color:#fff;
  border-radius:8px;
  padding:10px 6px;
}

.ev-day{
  font-size:20px;
  font-weight:700;
}

.ev-mon{
  font-size:12px;
  letter-spacing:1px;
}

/* ===== BODY ===== */
.ev-body{
  flex:1;
}

/* ===== TYPE ===== */
.ev-type{
  font-size:11px;
  color:#888;
  margin-bottom:5px;
}

/* ===== TITLE ===== */
.ev-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
  color:#111;
}

/* ===== META ===== */
.ev-meta{
  font-size:12px;
  color:#666;
}

/* ===== DESCRIPTION ===== */
.ev-body p{
  margin-top:8px;
}

/* ===== BUTTON ===== */
.ev-btn{
  display:inline-block;
  margin-top:12px;
  padding:6px 14px;
  font-size:12px;
  background:#111;
  color:#fff;
  border-radius:4px;
  text-decoration:none;
  transition:0.3s;
}

.ev-btn:hover{
  background:#333;
}

/* ===== PAGE HEADER ===== */
.ph{
  padding:40px 20px;
  background:#f9f9f9;
  border-bottom:1px solid #eee;
}

.ph-title{
  font-size:28px;
  margin:10px 0;
}

.ph-sub{
  font-size:14px;
  color:#666;
}

.ph-bc{
  font-size:12px;
  color:#888;
}

.ph-bc-btn{
  text-decoration:none;
  color:#111;
}

/* ===== EMPTY MESSAGE ===== */
.no-data{
  text-align:center;
  width:100%;
  padding:40px;
  color:#999;
}

/* ===== ANIMATION ===== */
.reveal{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 0.6s forwards;
}

.footer .flogo{
  width: 55%;
}

footer .contact
{
  margin-left:40px;
} 


@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

  .ev-card{
    flex-direction:column;
  }

  .ev-date-col{
    width:100%;
    display:flex;
    justify-content:center;
    gap:10px;
  }

  .ev-day{
    font-size:18px;
  }

  .ev-mon{
    font-size:13px;
  }

}


@media(max-width:480px){

  #core-values
  {
    grid-template-columns:repeat(1,1fr) !important;
  }

  #missionvision
  {
    grid-template-columns:repeat(1,1fr) !important;
  }
  .sec{
   padding:20px;
  }
  .director-box {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media(max-width:768px){

  /* Parent grid ko column bana do */
  .sec > div{
    display:flex !important;
    flex-direction:column !important;
    gap:30px !important;
  }

  /* LEFT content (Why Partner) */
  .reveal-l{
    order:1;
  }

  /* RIGHT form */
  .form-box{
    order:2;
  }

}