/* =========================================================
   GLOBAL VARIABLES
========================================================= */
:root{
  /* testimonials */
  --tst-accent:#1d4ed8;
  --tst-ink:#0f172a;
  --tst-text:#475569;
  --tst-muted:#64748b;
  --tst-border:rgba(15,23,42,.10);
  --tst-shadow:none;
  --tst-radius:18px;

  /* recruiters carousel */
  --rec-accent:#1d4ed8;
  --rec-ink:#0f172a;
  --rec-text:#475569;
  --rec-muted:#cfe0ff;
  --rec-border:rgba(15,23,42,.10);
  --rec-radius:18px;

  /* apply banner */
  --applyb-accent:#1d4ed8;
  --applyb-ink:#0f172a;
  --applyb-text:#475569;
  --applyb-muted:#64748b;
  --applyb-border:rgba(15,23,42,.12);
  --applyb-radius:22px;

  /* about cm */
  --cm-accent:#1d4ed8;
  --cm-dark:#0f172a;
  --cm-text:#475569;
  --cm-border:rgba(15,23,42,.10);
  --cm-photo-h:580px;
}

/* utility */
.mt-80{ margin-top:80px !important; }
.w-80{ min-width:80%; }

/* =========================================================
   ADVANCED ABOUT SECTION (Professional)
========================================================= */
.about-pro{ padding:10px; }

.about-pro .about-pro-accent{ color:#1d4ed8; font-weight:900; }

.about-pro .about-pro-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
}
.about-pro .about-pro-media img{
  width:100%;
  height:460px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
}
.about-pro .about-pro-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
  pointer-events:none;
}

.about-pro .about-pro-badge{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:13px;
  color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.about-pro .about-pro-content{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:28px 26px;
  box-shadow:0 16px 40px rgba(0,0,0,0.06);
}

.about-pro .about-pro-kicker{
  margin:0 0 10px;
  display:inline-block;
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  background:#1d4ed8;
  border:1px solid rgba(51,65,85,0.12);
  padding:8px 12px;
  border-radius:999px;
}

.about-pro .about-pro-title{
  margin:0 0 14px;
  font-size:28px;
  line-height:1.25;
  font-weight:900;
  color:#0f172a;
}

.about-pro .about-pro-text{
  margin:0 0 14px;
  font-size:14.5px;
  line-height:1.85;
  color:#475569;
}

.about-pro .about-pro-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.about-pro .about-pro-item p{
  margin:0;
  font-size:14px;
  color:#334155;
  line-height:1.6;
}
.about-pro .about-pro-item strong{ color:#0f172a; }
.about-pro .about-pro-item .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#1d4ed8;
  margin-top:6px;
  flex:0 0 10px;
  box-shadow:0 0 0 4px rgba(29,78,216,0.12);
}

.about-pro .about-pro-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.about-pro .about-pro-btn{
  background:#0f172a;
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.08);
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  text-decoration:none;
}
.about-pro .about-pro-btn:hover{
  opacity:.95;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(15,23,42,0.20);
  color:#fff;
}

.about-pro .about-pro-link{
  font-weight:700;
  color:#1d4ed8;
  text-decoration:none;
}
.about-pro .about-pro-link:hover{ text-decoration:underline; }

/* Side highlights card */
.about-pro .about-pro-sidecard{ padding:16px 16px 14px; margin-top:16px; }

.about-pro .about-pro-sidecard-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.about-pro .about-pro-sidecard-head h4{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#0f172a;
}
.about-pro .about-pro-sidecard-head .tag{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid rgba(51,65,85,0.12);
  color:#334155;
}

.about-pro .about-pro-stats .stat{ margin-bottom:10px; }

.about-pro .stat-box{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:12px;
  background:#f8fafc;
}
.about-pro .stat-num{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
  line-height:1.1;
}
.about-pro .stat-label{
  font-size:12.5px;
  color:#475569;
  margin-top:4px;
  font-weight:700;
}

.about-pro .about-pro-mini-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.about-pro .about-pro-btn2{
  background:#0f172a;
  color:#fff;
  border-radius:12px;
  font-weight:800;
  padding:9px 12px;
  border:1px solid rgba(15,23,42,0.08);
  text-decoration:none;
}
.about-pro .about-pro-btn2:hover{ color:#fff; opacity:.95; }

.about-pro .about-pro-btn3{
  background:#fff;
  color:#0f172a;
  border-radius:12px;
  font-weight:900;
  padding:9px 12px;
  border:1px solid rgba(0,0,0,0.10);
  text-decoration:none;
}
.about-pro .about-pro-btn3:hover{ opacity:.95; }

@media (max-width: 991px){
  .about-pro .about-pro-media img{ height:360px; }
  .about-pro .about-pro-content{ margin-top:18px; }
  .about-pro .about-pro-title{ font-size:24px; }
}

/* =========================================================
   ABOUT-PRO STRIP
========================================================= */
.about-pro-strip{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:0;
}
.ap-strip-item{
  flex:1 1 25%;
  min-width:240px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  position:relative;
}
.ap-strip-item:not(:last-child):after{
  content:"";
  position:absolute;
  right:0;
  top:18%;
  height:64%;
  width:1px;
  background:rgba(0,0,0,0.08);
}
.ap-text{ line-height:1.2; }
.ap-title{
  font-weight:900;
  font-size:14px;
  color:#0f172a;
}
.ap-desc{
  margin-top:4px;
  font-weight:700;
  font-size:13px;
  color:#475569;
  line-height:1.35;
}
.ap-strip-item .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#1d4ed8;
  margin-top:6px;
  flex:0 0 10px;
  box-shadow:0 0 0 4px rgba(29,78,216,0.12);
}
@media (max-width:991px){
  .ap-strip-item{ flex:1 1 50%; }
  .ap-strip-item:not(:last-child):after{ display:none; }
}
@media (max-width:767px){
  .ap-strip-item{ flex:1 1 100%; }
}

/* =========================================================
   VIDEO
========================================================= */
.sihm-video{ background:aliceblue; }

.sihm-video-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 14px 34px rgba(0,0,0,0.06);
}
.sihm-video-head h2{
  margin:0 0 6px;
  font-size:22px;
  font-weight:900;
  color:#0f172a;
  text-align:center;
}
.sihm-video-head p{
  margin:0 0 14px;
  color:#64748b;
  line-height:1.7;
  text-align:center;
}
.sihm-yt-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.sihm-yt-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* =========================================================
   COURSES GRID + HOVER OVERLAY (Bootstrap 3 friendly)
========================================================= */
.course-grid{ display:flex; flex-wrap:wrap; }
.course-col{ display:flex; }

.course-card{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
}
.course-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,0.10);
}

.course-thumb{
  position:relative;
  width:100%;
  overflow:hidden;
  display:block;
}
.course-thumb img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .25s ease;
}
.course-card:hover .course-thumb img{ transform:scale(1.07); }

/* whole image click layer */
.course-thumb-link{
  position:absolute;
  inset:0;
  z-index:1;
}

/* badge */
.course-badge{
  position:absolute;
  top:12px;
  right:12px;
  border:1px solid rgba(0,0,0,0.10);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:#1d4ed8;
  z-index:2;
  white-space:nowrap;
  pointer-events:none;
}

/* course name overlay (ON image) */
.course-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:14px 16px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.00));
  transition:opacity .2s ease;
}
.course-overlay-title{
  margin:0;
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,0.45);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-width:85%;
}

/* hover overlay */
.course-info--hover{
  position:absolute;
  inset:0;
  padding:14px 16px 16px;
  background:linear-gradient(to top, #1d4ed8, rgba(0,0,0,0.60));
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:3;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  pointer-events:none; /* click-through */
}
.course-info--hover *{ pointer-events:auto; }

.course-thumb:hover .course-info--hover,
.course-card:hover .course-info--hover,
.course-card:focus-within .course-info--hover{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* hide course name when hover overlay opens */
.course-thumb:hover .course-overlay,
.course-card:hover .course-overlay,
.course-card:focus-within .course-overlay{
  opacity:0;
}

.course-info--hover .course-eligibility{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,0.92);
}
.course-info--hover .course-eligibility strong{ color:#fff; }

.course-footer{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.course-mini-link{
  font-weight:800;
  color:#fff;
  text-decoration:none;
  opacity:.95;
}
.course-mini-link:hover{ text-decoration:underline; }

/* button inside overlay */
.course-info--hover .course-footer .btn.btn-dark{
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,0.18) !important;
  box-shadow:none !important;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.course-info--hover .course-footer .btn.btn-dark:hover,
.course-info--hover .course-footer .btn.btn-dark:focus{
  background:#e5e7eb !important;
  color:#111 !important;
  border-color:rgba(0,0,0,0.25) !important;
  text-decoration:none;
}
.course-info--hover .course-footer .btn.btn-dark:active{
  background:#d1d5db !important;
  transform:translateY(1px);
}

@media (max-width: 991px){
  .course-thumb img{ height:210px; }
}
@media (max-width: 767px){
  .course-thumb img{ height:200px; }
  .course-overlay-title{ font-size:16px; }
}

/* Touch/mobile: show info as normal content (not overlay) */
@media (hover:none), (pointer:coarse), (max-width:767px){
  .course-info--hover{
    position:static;
    inset:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    background:#fff;
    color:#111;
    overflow:visible;
    pointer-events:auto;
    border-top:1px solid rgba(0,0,0,0.08);
  }
  .course-info--hover .course-eligibility{ color:#334155; }
  .course-info--hover .course-eligibility strong{ color:#0f172a; }
  .course-mini-link{ color:#0f172a; }

  .course-info--hover .course-footer .btn.btn-dark{
    background:#111 !important;
    color:#fff !important;
    border-color:#111 !important;
  }
  .course-info--hover .course-footer .btn.btn-dark:hover,
  .course-info--hover .course-footer .btn.btn-dark:focus{
    background:#000 !important;
    border-color:#000 !important;
    color:#fff !important;
  }
}

/* =========================================================
   CAREER OPPORTUNITIES
========================================================= */
.career-opps{ background:#f5f5f5; }

.career-opps .site-heading h2{ margin-bottom:10px; }

.career-opps .section-subtitle{
  margin:0 auto 25px;
  max-width:720px;
  font-size:15px;
  line-height:1.7;
  color:#666;
}

.career-intro{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:12px;
  padding:18px;
  margin-bottom:22px;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}
.career-intro p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#555;
}

.career-col{ margin-bottom:18px; }

.career-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.07);
  border-radius:12px;
  padding:18px 18px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:140px;
}
.career-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.10);
}
.career-card h3{
  font-size:16px;
  margin:0 0 10px;
  font-weight:700;
  color:#111;
  position:relative;
  padding-left:14px;
}
.career-card h3:before{
  content:"";
  width:5px;
  height:16px;
  border-radius:4px;
  background:#111;
  position:absolute;
  left:0;
  top:2px;
  opacity:.75;
}
.career-card p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#555;
}

/* =========================================================
   ADVISOR SECTION (Numbered Accent Cards) - Scoped to #advisor
========================================================= */
#advisor.career-opps{ background:aliceblue; }

#advisor .career-intro{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:18px;
  margin-bottom:22px;
  box-shadow:0 8px 22px rgba(0,0,0,0.05);
}

#advisor .career-grid{ counter-reset:careerItem; }

/* grid -> flex (4 per row desktop) */
#advisor .career-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
#advisor .career-grid:before,
#advisor .career-grid:after{ content:none !important; }

#advisor .career-grid .career-col{
  float:none !important;
  display:flex;
  margin-bottom:18px;
  clear:none !important;
}
#advisor .career-grid .career-card{ width:100%; }

#advisor .career-card--v2{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  padding:22px 18px 18px 72px;
  box-shadow:0 10px 28px rgba(0,0,0,0.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
  min-height:unset;
}

/* accent strip */
#advisor .career-card--v2:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:var(--accent, #111);
  opacity:.85;
}

/* number badge */
#advisor .career-card--v2:before{
  counter-increment:careerItem;
  content:counter(careerItem, decimal-leading-zero);
  position:absolute;
  left:18px;
  top:18px;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(0,0,0,0.06);
  color:#111;
  font-weight:800;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#advisor .career-card--v2:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.10);
  border-color:rgba(0,0,0,0.10);
}

#advisor .career-card--v2 h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  color:#121212;
  padding-left:0;
}
#advisor .career-card--v2 h3:before{ display:none; }

#advisor .career-card--v2 p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:#555;
}

/* accents by position */
#advisor .career-col:nth-child(1) .career-card--v2{ --accent:#0f172a; }
#advisor .career-col:nth-child(2) .career-card--v2{ --accent:#1d4ed8; }
#advisor .career-col:nth-child(3) .career-card--v2{ --accent:#0f766e; }
#advisor .career-col:nth-child(4) .career-card--v2{ --accent:#7c3aed; }
#advisor .career-col:nth-child(5) .career-card--v2{ --accent:#b45309; }
#advisor .career-col:nth-child(6) .career-card--v2{ --accent:#be123c; }
#advisor .career-col:nth-child(7) .career-card--v2{ --accent:#047857; }
#advisor .career-col:nth-child(8) .career-card--v2{ --accent:#334155; }

/* responsive columns */
@media (max-width:767px){
  #advisor .career-grid .career-col{ flex:0 0 100%; }
}
@media (min-width:768px) and (max-width:991px){
  #advisor .career-grid .career-col{ flex:0 0 50%; }
}
@media (min-width:992px){
  #advisor .career-grid .career-col{ flex:0 0 25%; }
}

/* =========================================================
   TESTIMONIALS
========================================================= */
.tst-sec{
  padding:clamp(40px, 5vw, 78px) 0;
  background:#fff;
  position:relative;
  overflow:hidden;
}
.tst-sec::before{
  content:"";
  position:absolute;
  inset:0;
  background:none;
  pointer-events:none;
}
.tst-sec .container{ position:relative; z-index:2; }

.tst-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 18px;
}
.tst-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(15,23,42,.55);
  margin-bottom:10px;
}
.tst-title{
  margin:0 0 10px;
  font-weight:900;
  color:var(--tst-ink);
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.15;
}
.tst-sub{
  margin:0;
  color:var(--tst-muted);
  font-size:15px;
  line-height:1.8;
  text-wrap:pretty;
}

.tst-slider{
  position:relative;
  margin-top:22px;
  padding:0 64px;
}
.tst-viewport{
  overflow:hidden;
  border-radius:var(--tst-radius);
  outline:none;
}
.tst-track{
  display:flex;
  width:100%;
  will-change:transform;
  transition:transform .45s ease;
}
.tst-slide{ flex:0 0 100%; padding:4px; }

.tst-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:991.98px){
  .tst-grid{ grid-template-columns:1fr; }
}

.tst-card{
  position:relative;
  background:#fff;
  border:1px solid var(--tst-border);
  border-radius:var(--tst-radius);
  box-shadow:none !important;
  padding:18px;
  height:100%;
  overflow:hidden;
}
.tst-quote{
  position:absolute;
  right:14px;
  top:12px;
  font-size:34px;
  color:rgba(29,78,216,.12);
}
.tst-stars{
  color:#f59e0b;
  font-size:13px;
  margin-bottom:10px;
}
.tst-text{
  margin:0 0 14px;
  color:var(--tst-text);
  font-size:15px;
  line-height:1.9;
  text-align:justify;
  text-wrap:pretty;
}

.tst-footer{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:6px;
  border-top:1px dashed rgba(15,23,42,.14);
}
.tst-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--tst-accent), #8a5cff);
  box-shadow:0 8px 18px rgba(2,6,23,.10);
  flex:0 0 44px;
}
.tst-name{ font-weight:900; color:var(--tst-ink); line-height:1.2; }
.tst-role{ font-size:13px; color:rgba(15,23,42,.60); margin-top:2px; }

.tst-control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  padding:0;
  z-index:10;
}
.tst-prev{ left:12px; }
.tst-next{ right:12px; }

.tst-controlIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  display:grid;
  place-items:center;
  box-shadow:none !important;
  color:rgba(15,23,42,.80);
  transition:transform .16s ease;
}
.tst-controlIcon:hover{ transform:translateY(-2px); }

.tst-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.tst-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(29,78,216,.25);
  cursor:pointer;
}
.tst-dot.is-active{ background:var(--tst-accent); }

@media (max-width:576px){
  .tst-slider{ padding:0 46px; }
  .tst-controlIcon{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .tst-prev{ left:8px; }
  .tst-next{ right:8px; }
}

/* =========================================================
   RECRUITERS CAROUSEL
========================================================= */
.rec-sec{
  padding:clamp(40px, 5vw, 78px) 0;
  position:relative;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(29,78,216,1), rgba(29,78,216,.86)),
    url("images/travveling_full_hd_2.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.rec-sec::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.10), transparent 48%),
    radial-gradient(circle at 82% 24%, rgba(34,197,94,.08), transparent 52%);
  pointer-events:none;
}
.rec-sec .container{ position:relative; z-index:2; }

.rec-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 18px;
}
.rec-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:10px;
}
.rec-title{
  margin:0 0 10px;
  font-weight:900;
  color:#fff;
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.15;
}
.rec-sub{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:15px;
  line-height:1.8;
  text-wrap:pretty;
}

.rec-carousel{
  position:relative;
  margin-top:22px;
  padding:0 56px;
}
.rec-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  outline:none;
}
.rec-viewport::-webkit-scrollbar{ display:none; }

.rec-track{
  display:flex;
  gap:14px;
  padding:10px 6px;
  scroll-snap-type:x mandatory;
}

.rec-item{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:clamp(150px, 16vw, 190px);
  height:84px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.94);
  display:grid;
  place-items:center;
}
.rec-item img{
  max-width:78%;
  max-height:52px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.05) opacity(.85);
  transition:filter .18s ease, transform .18s ease;
}
.rec-item:hover img{
  filter:none;
  transform:translateY(-1px);
}

.rec-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  padding:0;
  z-index:4;
}
.rec-prev{ left:8px; }
.rec-next{ right:8px; }

.rec-btnIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  color:rgba(15,23,42,.78);
  transition:transform .16s ease;
}
.rec-btnIcon:hover{ transform:translateY(-2px); }

@media (max-width:576px){
  .rec-carousel{ padding:0 44px; }
  .rec-btnIcon{
    width:38px;
    height:38px;
    border-radius:12px;
  }
}

/* =========================================================
   APPLY BANNER
========================================================= */
.applyb-sec{ background:#fff; }

.applyb-wrap{
  padding:clamp(22px, 3vw, 34px);
  text-align:center;
}
.applyb-wrap > *{ position:relative; z-index:2; }

.applyb-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(15,23,42,.60);
  margin-bottom:10px;
}
.applyb-title{
  margin:0 0 10px;
  font-weight:900;
  color:var(--applyb-ink);
  font-size:clamp(24px, 3.1vw, 38px);
  line-height:1.12;
}
.applyb-sub{
  margin:0 auto 16px;
  color:var(--applyb-text);
  font-size:15.6px;
  line-height:1.85;
  max-width:78ch;
  text-wrap:pretty;
}
.applyb-pills{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.applyb-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.82);
  font-size:13px;
  font-weight:800;
}
.applyb-pill i{ color:var(--applyb-accent); }

.applyb-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.applyb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 22px;
  border-radius:16px;
  background:#1d4ed8;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  transition:transform .16s ease;
  gap:10px;
}
.applyb-btn:hover{ transform:translateY(-2px); color:#fff; }

.applyb-btn-ghost{
  background:rgba(255,255,255,.50);
  color:rgba(15,23,42,.85);
  border:1px solid rgba(15,23,42,.12);
}
.applyb-btn-ghost:hover{ color:#0f172a; }

.applyb-foot{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(15,23,42,.62);
  font-size:12.5px;
}
.applyb-foot i{ color:var(--applyb-accent); }
.applyb-foot a{
  color:rgba(15,23,42,.72);
  text-decoration:none;
  font-weight:800;
}
.applyb-foot a:hover{ color:#0f172a; }
.applyb-dot{ opacity:.6; }

@media (max-width:576px){
  .applyb-actions{ gap:10px; }
  .applyb-btn,
  .applyb-btn-ghost{ width:100%; }
}

/* =========================================================
   CM ABOUT SECTION
========================================================= */
.cm-sec{ padding:0 0; background:#fff; }

.cm-wrap{
  position:relative;
  background:aliceblue;
  padding:55px 325px;
  overflow:hidden;
}

.cm-head{ margin-bottom:14px; }
.cm-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(15,23,42,.55);
  margin-bottom:8px;
}
.cm-title{
  font-size:34px;
  font-weight:900;
  color:var(--cm-dark);
  margin:0;
  line-height:1.15;
}
.cm-title-accent{ color:#1d4ed8; }

.cm-body p{
  color:var(--cm-text);
  font-size:15.5px;
  line-height:1.95;
  margin:0 0 14px;
  text-align:justify;
}

.cm-photoCard{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--cm-border);
  box-shadow:0 18px 45px rgba(2,6,23,.10);
  background:#fff;
  height:var(--cm-photo-h);
}
.cm-photoCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cm-nameplate{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border:1px solid rgba(15,23,42,.10);
}
.cm-np-name{ font-weight:900; color:var(--cm-dark); line-height:1.2; }
.cm-np-role{ color:rgba(15,23,42,.60); font-size:13px; margin-top:2px; }

/* desktop vertical centering */
@media (min-width:992px){
  .cm-contentCol{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:var(--cm-photo-h);
  }
}

/* responsive */
@media (max-width:991.98px){
  :root{ --cm-photo-h:320px; }
  .cm-wrap{ padding:26px 18px; }
  .cm-title{ font-size:26px; }
}



  :root{
    --hx-border:rgba(255,255,255,.10);
    --hx-text:#eaf0ff;
    --hx-muted:#dbe5ff;
    --hx-accent:#6c7cff;
    --hx-accent2:#22c55e;
  }

  .hx-hospitality{
    position:relative;
    overflow:hidden;
    padding:64px 16px;
    color:var(--hx-text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;

    /* ✅ Single background image + overlay for readability */
    background-image:
      linear-gradient(rgba(29,78,216,.86), rgba(29,78,216,.86)),
      url("images/travveling_full_hd_2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hx-container{
    max-width:1160px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap:22px;
    align-items:start;
    position:relative;
    z-index:1;
  }

  .hx-hero{ padding:10px 6px; }

  .hx-eyebrow{
    margin:0 0 10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(234,240,255,.80);
    font-size:12px;
  }

  .hx-title{
    font-size:34px;
    font-weight:800;
    color:#ffffff;
    margin:0 0 12px;
    line-height:1.2;
  }

  .hx-subtitle{
    margin:0 0 18px;
    color:var(--hx-muted);
    line-height:1.75;
    font-size:15.5px;
    max-width:52ch;
  }

  .hx-pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
  .hx-pill{
    padding:9px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.08);
    font-size:12.5px;
    color:rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
  }

  .hx-cta{ display:flex; gap:12px; flex-wrap:wrap; }

  .hx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 16px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    color:#0b1020;
    background:linear-gradient(135deg, var(--hx-accent), #8a5cff);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.16);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .hx-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.28); }

  .hx-btn-ghost{
    color:var(--hx-text);
    background:rgba(255,255,255,.10);
    box-shadow:none;
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
  }
  .hx-btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.25); }

  .hx-panel{ display:flex; flex-direction:column; gap:14px; }

  .hx-box{
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:18px;
    backdrop-filter: blur(10px);
  }

  .hx-box-accent{
    border-color: rgba(34,197,94,.22);
    background:rgba(0,0,0,.18);
  }

  .hx-boxhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }

  .hx-h3{
    font-size:22px;
    font-weight:800;
    color:#ffffff;
    margin:0;
    line-height:1.2;
  }

  .hx-chip{
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.92);
    white-space:nowrap;
    backdrop-filter: blur(8px);
  }

  .hx-chip-dark{
    border-color: rgba(34,197,94,.28);
    background:rgba(34,197,94,.14);
  }

  .hx-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

  .hx-card{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.18);
    transition:transform .16s ease, border-color .16s ease;
    min-height:64px;
    backdrop-filter: blur(10px);
  }

  .hx-card:hover{
    transform:translateY(-2px);
    border-color: rgba(255,255,255,.26);
  }

  .hx-ic{
    width:36px; height:36px;
    border-radius:12px;
    display:grid; place-items:center;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    font-size:18px;
  }

  .hx-cardtitle{ font-weight:700; font-size:13.5px; margin-top:1px; color:#fff; }
  .hx-cardtext{ color:rgba(234,240,255,.85); font-size:12.5px; line-height:1.35; margin-top:2px; }

  .hx-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 12px; }

  .hx-tag{
    padding:9px 11px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.16);
    font-size:13px;
    color:rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
  }

  .hx-note{
    margin:0;
    color:rgba(255,255,255,.90);
    line-height:1.7;
    font-size:13.8px;
    padding:12px;
    border-radius:14px;
    border:1px dashed rgba(255,255,255,.22);
    background:rgba(0,0,0,.16);
    backdrop-filter: blur(10px);
  }

  @media (max-width: 980px){
    .hx-container{ grid-template-columns:1fr; }
    .hx-title{ font-size:32px; }
  }
  @media (max-width: 520px){
    .hx-grid{ grid-template-columns:1fr; }
  }

  :root{
    /* Change this to your college primary color */
        --vm-accent: #1d4ed8;      /* orange highlight like screenshot */
    --vm-dark: #0f172a;
    --vm-muted: #64748b;
    --vm-border: rgba(15, 23, 42, .10);
    --vm-soft: #eef5f7;        /* soft panel background (vision section) */
  }

  /* Common section spacing */
  .vm-sec{ padding: 0px 0; }

  /* Title like screenshot: first word colored (Mission/Vision) */
  .vm-title{
    font-size: 34px;
    font-weight: 800;
    color: var(--vm-dark);
    margin: 0;
    line-height: 1.2;
  }
  .vm-title .vm-accent{ color: var(--vm-accent); }

  /* Top row text (right side in screenshot) */
  .vm-lead{
    color: var(--vm-muted);
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
  }

  /* Mission list styling (professional, not flashy) */
  .vm-list{
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--vm-muted);
    font-size: 15px;
    line-height: 1.85;
  }
  @media (min-width: 992px){
    .vm-list{ columns: 2; column-gap: 28px; }   /* keeps mission compact & neat */
    .vm-list li{ break-inside: avoid; }
  }

  /* 4 image tiles like screenshot */
  .vm-tiles{ margin-top: 28px; }
  .vm-tile{
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--vm-border);
    box-shadow: 0 14px 35px rgba(2, 6, 23, .06);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .vm-tile:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(2, 6, 23, .10);
  }
  .vm-tile img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
  }

  /* Vision panel like screenshot (soft rounded box) */
  .vm-panel{
    background:aliceblue;
    padding: 55px 325px;
    position: relative;
    overflow: hidden;
  }
  .vm-panelm{
    
    padding: 55px 325px;
    position: relative;
    overflow: hidden;
  }

  /* subtle diagonal highlight */
  .vm-panel:before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.35) 35%, rgba(255,255,255,0) 60%);
    clip-path: polygon(0 0, 58% 0, 42% 100%, 0% 100%);
    pointer-events:none;
  }

  /* subtle circles (institutional look) */
  .vm-panel:after{
    content:"";
    position:absolute;
    width: 380px;
    height: 380px;
    right: -140px;
    top: -140px;
    background: radial-gradient(circle, rgba(15,23,42,.08), transparent 60%);
    border-radius: 50%;
    pointer-events:none;
  }

  .vm-panel > *{ position: relative; } /* keep content above pseudo elements */

  /* Big image on vision right (like screenshot) */
  .vm-hero{
    background:#fff;
    border-radius: 18px;
    border: 1px solid var(--vm-border);
    box-shadow: 0 18px 45px rgba(2, 6, 23, .08);
    padding: 14px;
  }
  .vm-hero img{
    width: 100%;
    height: 320px;
    object-fit: contain; /* keep your vision.png clean */
    display:block;
    border-radius: 12px;
    background: #fff;
  }
.vm-panel{ position:relative; }

  /* BIG LIGHT BACKGROUND WORD */
  .vm-watermark{
  position: absolute;
    left: 16%;
    bottom: 20%;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: clamp(344px, 8vw, 1070px);
    color: rgb(15 23 42 / 3%);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  /* keep your real content above watermark */
  .vm-panel .row,
  .vm-panel .vm-title,
  .vm-panel .vm-lead,
  .vm-panel .vm-hero{
    position: relative;
    z-index: 2;
  }
  /* Mission list bullet exactly like the image (blue dot inside soft circle) */
.vm-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  color: var(--vm-muted);
  font-size: 15px;
  line-height: 1.85;
}

@media (min-width: 992px){
  .vm-list{ columns: 2; column-gap: 28px; }
  .vm-list li{ break-inside: avoid; }
}

.vm-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}

/* the symbol */
.vm-list li::before{
  content: "";
width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #1d4ed8;
    margin-top: 9px;
    flex: 0 0 10px;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);
}
  /* Responsive */
  @media (max-width: 991.98px){
    .vm-sec{ padding: 45px 0; }
    .vm-title{ font-size: 26px; }
    .vm-panel{ padding: 28px 20px; }
    .vm-hero img{ height: 260px; }
  }

:root{
  --pm-accent:#1d4ed8;
  --pm-dark:#0f172a;
  --pm-text:#475569;
  --pm-border:rgba(15,23,42,.10);
}

/* Section */
.pm-sec{ padding: 70px 0; background:#fff; }
.pm-wrap{
  
  padding: 0px 0;
}

/* Heading */
.pm-head{ margin-bottom: 18px; }
.pm-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin-bottom: 10px;
}
.pm-title{
  font-size: 34px;
  font-weight: 900;
  color: var(--pm-dark);
  margin: 0;
  line-height: 1.15;
}
.pm-title-accent{ color: var(--pm-accent); }

/* Body */
.pm-body{

  padding: 0px 0px;
}
.pm-body p{
  color: var(--pm-text);
  font-size: 15.5px;
  line-height: 1.95;
  margin: 0 0 14px;
  text-align: justify;
}
.pm-body p:first-child{
  font-weight: 700;
  color: var(--pm-dark);
  text-align: left;
}

/* Closing quote */
.pm-quote{
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--pm-accent);
  background: rgba(29,78,216,.06);
  border-radius: 12px;
  color: var(--pm-dark);
}

/* Responsive */
@media (max-width: 991.98px){
  .pm-wrap{ padding: 26px 0; }
  .pm-title{ font-size: 26px; }
  .pm-body{ padding: 18px; }
}

<!-- =========================
     Testimonials CSS (add once)
========================== -->

:root{
  --tst-accent: #1d4ed8;
  --tst-ink: #0f172a;
  --tst-text: #475569;
  --tst-muted: #64748b;
  --tst-border: rgba(15,23,42,.10);
  --tst-shadow: 0 18px 45px rgba(2,6,23,.08);
  --tst-radius: 18px;
}

.tst-sec{
  padding: clamp(40px, 5vw, 78px) 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.tst-sec::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 12%, rgba(29,78,216,.08), transparent 45%),
    radial-gradient(circle at 85% 28%, rgba(34,197,94,.08), transparent 45%),
    radial-gradient(circle at 55% 92%, rgba(99,102,241,.08), transparent 50%);
  pointer-events:none;
}

.tst-sec .container{ position:relative; z-index:2; }

.tst-head{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 18px;
}

.tst-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin-bottom: 10px;
}

.tst-title{
  margin:0 0 10px;
  font-weight: 900;
  color: var(--tst-ink);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
}

.tst-sub{
  margin:0;
  color: var(--tst-muted);
  font-size: 15px;
  line-height: 1.8;
  text-wrap: pretty;
}

/* Slider core */
.tst-slider{
  position: relative;
  margin-top: 22px;
}

.tst-viewport{
  overflow: hidden;
  border-radius: var(--tst-radius);
  outline: none;
}

.tst-track{
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .45s ease;
}

.tst-slide{
  flex: 0 0 100%;
  padding: 4px;
}

/* Grid (2 cards desktop, 1 card mobile) */
.tst-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 991.98px){
  .tst-grid{ grid-template-columns: 1fr; }
}

/* Card design */
.tst-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--tst-border);
  border-radius: var(--tst-radius);
  box-shadow: var(--tst-shadow);
  padding: 18px 18px;
  height: 100%;
  overflow: hidden;
}

.tst-quote{
  position:absolute;
  right: 14px;
  top: 12px;
  font-size: 34px;
  color: rgba(29,78,216,.12);
}

.tst-stars{
  color: #f59e0b;
  font-size: 13px;
  margin-bottom: 10px;
}

.tst-text{
  margin: 0 0 14px;
  color: var(--tst-text);
  font-size: 15px;
  line-height: 1.9;
  text-align: justify;
  text-wrap: pretty;
}

.tst-footer{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed rgba(15,23,42,.14);
}

.tst-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--tst-accent), #8a5cff);
  box-shadow: 0 10px 22px rgba(2,6,23,.12);
  flex: 0 0 44px;
}

.tst-name{
  font-weight: 900;
  color: var(--tst-ink);
  line-height: 1.2;
}

.tst-role{
  font-size: 13px;
  color: rgba(15,23,42,.60);
  margin-top: 2px;
}

/* Controls */
.tst-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  z-index: 5;
}
.tst-prev{ left: 10px; }
.tst-next{ right: 10px; }

.tst-controlIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  display:grid;
  place-items:center;
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  color: rgba(15,23,42,.80);
  transition: transform .16s ease;
}
.tst-controlIcon:hover{ transform: translateY(-2px); }

/* Dots */
.tst-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.tst-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(29,78,216,.25);
  cursor: pointer;
}
.tst-dot.is-active{
  background: var(--tst-accent);
}