/* assets/styles.css */

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
  --purple: #6f3b83;
  --purple-dark: #4f2a5a;
  --accent-red: #b31b1b;
  --muted: #777;
  --card-bg: #f7f1f7;
}

*{box-sizing:border-box}
body{
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #222;
  background: #fff;
  margin:0;
}

/* top header bar */
.topbar{
  background: linear-gradient(90deg,#570a0f,#8c1720);
  padding: 8px 18px;
  color: #fff;
}
.topbar .small-logo{height:44px}
.topbar .access-controls .btn{
  color:#fff; background: rgba(255,255,255,0.08); border:0; margin-left:6px; border-radius:6px; padding:6px 10px;
}
.topbar .access-controls .btn.active{background: rgba(255,255,255,0.14)}

/* main hero with banner */
.hero{
  height: 420px;
  background-position: center;
  background-size: cover;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
}
.hero .hero-inner{
  position:relative; z-index:2; color:#fff; width:100%; max-width:1100px; padding:20px;
}
.hero h1{
  font-size:34px; letter-spacing:1px; font-weight:800; margin:0 0 6px;
  text-transform:uppercase;
}
.hero p.sub{font-weight:700; color:#fff; margin:0 0 8px}

/* floating buttons on hero */
.hero .hero-buttons{position:absolute; top:22px; right:22px; z-index:3}
.hero .hero-buttons .btn{margin-left:8px; border-radius:26px; padding:8px 18px}

/* curved white section bottom decoration */
.curve-bottom{
  height:80px;
  background: #fff;
  border-top-left-radius: 100% 40px;
  border-top-right-radius: 100% 40px;
  margin-top:-40px;
}

/* content area */
.container-main{max-width:1200px;margin:auto;padding:28px 20px}

/* left helpdesk card */
.help-card{
  background:#505f69; color:#fff; padding:20px; border-radius:6px; width:100%;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05);
}
.help-card small{color:#f4dcdc}
.help-card .help-phone{margin-top:10px; font-size:15px}

/* Latest updates scroll area */
.latest {
  border-left: 1px solid #eee;
  padding-left: 18px;
}
.updates-list{max-height:420px; overflow:auto; padding-right:8px}
.update-card{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px 6px; border-bottom:1px dotted #ccc; margin-bottom:6px;
}
.date-box{
  width:72px; text-align:center; background: #fff;
}
.date-box .day{background:var(--accent-red); color:#fff; padding:10px; font-weight:800; display:block; border-radius:6px}
.date-box .month{display:block; background:#fff; color:#222; border:1px solid rgba(0,0,0,0.06); padding:6px; margin-top:6px; border-radius:6px}

/* apply button */
.apply-btn{
  background: #b22a2a; color:#fff; border-radius:8px; padding:10px 14px; border:0;
  box-shadow: 0 2px 12px rgba(178,42,42,0.15);
}

/* footer links carousel look */
.other-web{
  display:flex; gap:18px; align-items:center; justify-content:flex-start; padding:22px 0;
}
.other-web img{height:60px; background:#fff; padding:8px; border-radius:6px; box-shadow: 0 2px 6px rgba(0,0,0,0.06)}

/* privacy section */
.privacy{background:#fff;padding:28px 18px;border-radius:8px;margin-top:8px}
.footer-dark{background:#1b1b1b;color:#fff;padding:18px;text-align:center;margin-top:18px}

/* responsive small tweaks */
@media (max-width:991px){
  .hero{height:340px}
  .hero h1{font-size:26px}
}
@media (max-width:720px){
  .hero{height:300px}
  .hero .hero-buttons{display:none}
  .other-web{overflow:auto}
}