.navbar { 
    position: fixed; top: 0; left: 0; right: 0; background:hsla(202, 100%, 37%, 0.97) ; z-index: 1000; 
    padding: 0.2rem 0; transition: all .4s ease; width: 100%; 
}
.body{
  overflow:hidden;
    font-family: "Times New Roman", Times, serif !important;
}
* { font-family: "Times New Roman", Times, serif !important; }
.refer-banner .row {
  height: 100vh;            
  display: flex;
  flex-wrap: nowrap !important;
}
/* ================================
   FIX FOR FIXED HEADER OVERLAP
================================ */
:root {
  --header-height: 70px; /* adjust if needed */
}

.refer-banner {
  margin-top: var(--header-height);
}

.left-parallax,
.right-widget-area {
  height: 100%;             
}

.right-widget-area {
        margin-top:60px;
  background: #fff;
}
.login-card {
  width: 430px;
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 12px;
  position: absolute;
  bottom: 0px;     /* FIX: places card at bottom like old one */
  right: 50px;      /* FIX: aligns to right side */
  text-align: left;
  z-index: 99;
}
@media (min-height:500px) and (max-height: 850px) {
  .login-card {
    top: 130px !important;
    bottom: auto !important;
  }
}


@media (max-width: 991px) {
  .right-widget-area {
     margin-top: -250px !important;
     padding: 0px 5px;
     height: auto !important;
  }

  .login-card {
    position: relative !important;   /* REMOVE fixed bottom-right */
    width: 100% !important;          /* FULL WIDTH */
    max-width: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-top: 30px !important;     /* push it down below text */
  }

  /* Push text content down so card fits nicely */
  .refer-content {
    margin-bottom: 120px !important;
  }
}

/* Small mobiles */
@media (max-width: 480px) {
  .login-card {
    padding: 15px;
  }
}
/* LOGO */
.login-card .login-logo {
  display: block;
  width: 80px;
  margin: 0 auto 10px auto;
}

.login-logo {
  width: 180px !important;
}

/* ROLE */
.role-box {
  margin-bottom: 6px;
  font-size: 15px;
}
.role-box label {
  margin-right: 10px;
}

/* INPUTS */
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%;
  padding: 12px;
  font-size: 10px;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  margin-bottom: 7px;
}

/* Show Password Checkbox */
.login-card .show-pass {
  margin-bottom: 8px;
}

/* BUTTONS */
.login-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.login-btn-row button {
  flex: 1;
  padding: 5px;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: 400;
}

.btn-login { background: #17a2b8; }
.btn-forgot { background: #dc3545; }
.btn-ocp    { background: #007bff; }

/* PARALLAX IMAGE */
.parallax-image {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: url('images/DSU 4.webp') center/cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
}

.parallax-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* adjust opacity here */
}

/* TEXT ON LEFT */
.refer-content {
  position: absolute;
  top: 150px;
  left: 30px;
  color: #fff; 
  max-width: 750px;
}

.refer-heading {
  font-size: 53px;
  font-weight: 700;
    color: hsl(0, 0%, 0%);

}

.refer-sub {
  font-size: 26px;
  margin-top: 10px;
  font-weight:800;

}

.programme-box {
  margin-top: 25px;
  padding: 15px 20px;
 background: rgba(0, 70, 153, 0.85);
  border-radius: 6px;
  display: inline-block;
}

.programme-box h4 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
}

.accreditation-logos {
  margin-bottom: 25px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.accreditation-logos img {
  height: 80px;
  padding: 6px 10px;
  border-radius: 6px;
  filter: drop-shadow(0 2px 4px hsl(0, 100%, 100%));
}
/* Responsive */
@media (max-width: 768px) {
.refer-content {
  position: absolute;
  align-items:center;
  justify-content:center;
  top: 160px;
  left: 20px;
  color: #fff; 
  max-width: 350px;
}
.refer-heading {
  font-size: 32px;
  font-weight: 700;
  align-items: center;
    color: hsl(0, 0%, 0%);
}
.accreditation-logos img {
  height: 55px;
    padding: 2px 0px;
    gap:1px !important;
}
.refer-sub {
  font-size: 20px;
  margin-top: 10px;
  opacity: 0.9;
}
.login-card {
  width: 350px;
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 12px;
  bottom: 40px;     /* FIX: places card at bottom like old one */
  right: 10px;      /* FIX: aligns to right side */
  text-align: left;
  z-index: 99;
}
}

/* ===============================
   Programs Offered Section (DSU Style)
   =============================== */

.programs-offered-section {
  width: 100%;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.programs-container {
  width: 80%; /* 80% width */
  background: linear-gradient(135deg, #003f7f 0%, #005de8 100%);
  padding: 60px 40px;
  border-radius: 16px;        /* Rounded corners */
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); /* Soft shadow */
  text-align: center;
  color: #ffffff;
  z-index: 999;
}

/* Title */
.program-title {
  font-size: 2.4rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 25px;
}

/* Program list */
.program-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.program-list li {
  font-size: 1.3rem;
  padding: 10px 22px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: 0.3s ease;
}

.program-list li:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-3px);
}

/* Scroll indicator */
.scroll-indicator {
  margin-top: 40px;
  color: #ffffff;
  opacity: 0.9;
}

.scroll-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-text {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .programs-container {
    width: 90%;
    padding: 10px 15px;

  }
}

/* Section Background */
.dsu-terms-section {
  width: 100%;
  padding: 70px 20px;
  background: linear-gradient(135deg, #003f7f 0%, #005de8 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Card Container */
.dsu-terms-card {
  width: 80%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 40px 35px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #fff;
}

/* Title */
.terms-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin-bottom: 10px;
}

/* Accent Line */
.terms-divider {
  width: 80px;
  height: 4px;
  background: #ffca28;  /* DSU gold-yellow accent */
  margin: 0 auto 25px auto;
  border-radius: 5px;
}

/* List */
.terms-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.terms-list li {
  font-size: 1.1rem;
  line-height: 1.7;
  padding-left: 25px;
  margin-bottom: 15px;
  position: relative;
}

/* Blue bullet with glow */
.terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  background: #ffca28; 
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 202, 40, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .dsu-terms-card {
    width: 95%;
    padding: 30px 25px;

  }
}