@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ===== COLOR PALETTE ===== */
:root{
  --primary:#0b2a4a;
  --accent:#1e88e5;
  --light:#f4f7fb;
  --navitemcolor1:#fff;
}

/* GENERAL */
html{
  scroll-behavior: smooth;
}
body{
  font-family: "Open Sans", sans-serif;
  color:#333;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.section{
  padding:80px 0;
}

/* ================= NAVBAR ================= */
.navbar{
  min-height:80px;
  transition:all .35s ease;
}
.navbar-default{
  background:transparent;
  border:none;
}
.navbar.scrolled{
  min-height:60px;
  background:#ffffff;
  box-shadow:0 5px 20px rgba(0,0,0,.15);
}

/* BRAND */
.navbar-brand{
  height:80px;
  line-height:50px;
  font-size:20px;
  font-weight:700;
  color:var(--primary)!important;
  color: var(--navitemcolor1)!important;
  transition:all .35s ease;
}
.navbar.scrolled .navbar-brand{
  height:60px;
  line-height:30px;
  color:var(--primary)!important;
}

/* NAV LINKS */
.navbar-nav>li>a{
  padding:30px 15px;
  font-weight:600;
  color:var(--primary)!important;
  color: var(--navitemcolor1)!important;
  position:relative;
  transition:all .3s ease;
}
.navbar.scrolled .navbar-nav>li>a{
  padding:20px 15px;
  color:var(--primary)!important;
}

/* HOVER EFFECT */
.navbar-nav>li>a:after{
  content:'';
  position:absolute;
  left:50%;
  bottom:18px;
  width:0;
  height:2px;
  background:var(--accent);
  transition:.3s ease;
  transform:translateX(-50%);
}
.navbar-nav>li>a:hover{
  color:var(--accent)!important;
}
.navbar-nav>li>a:hover:after{
  width:60%;
}

/* SECTION TITLE */
.section-title{
  text-align:center;
  margin-bottom:60px;
}
.section-title h2{
  color:var(--primary);
  font-weight:700;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.section-title h2:after{
  content:'';
  width:60%;
  height:3px;
  background:var(--accent);
  position:absolute;
  bottom:0;
  left:20%;
  transform:scaleX(0);
  transition:.6s ease;
}
.section-title[data-aos].aos-animate h2:after{
  transform:scaleX(1);
}

/* HERO */
.hero{
  background:url('img/hero-bg.jpg') center/cover no-repeat;
  padding:160px 20px;
  color:#fff;
  position:relative;
}
.hero:before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(11,42,74,.75);
}
.hero-content{
  position:relative;
  z-index:2;
}
.hero h1{
  font-size:38px;
  font-weight:700;
  margin-top: 20px;
}
.hero p{
  font-size:18px;
  margin:20px 0;
}
.hero .btn{
  background:var(--accent);
  border:none;
}

/* OBJECTIVE */
.objective-img{
  position:relative;
}
.objective-img img{
  width:100%;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.objective-img:after{
  content:'';
  position:absolute;
  inset:0;
  /*background:linear-gradient(135deg, rgba(30,136,229,.25), rgba(11,42,74,.25));*/
  border-radius:12px;
}

/* SCHEDULE */
.table thead{
  background:var(--primary);
  color:#fff;
}

/* COORDINATOR */
.coordinator{
  background:var(--light);
}
.coordinator-card{
  background:#fff;
  padding:35px;
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  text-align:center;
  transition:.4s;
}
.coordinator-card:hover{
  transform:translateY(-8px);
}
.coordinator-card img{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid var(--accent);
  margin-bottom:15px;
}

/* BACK TO TOP */
#backToTop{
  position:fixed;
  bottom:30px;
  right:30px;
  width:45px;
  height:45px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  text-align:center;
  line-height:45px;
  font-size:20px;
  display:none;
  cursor:pointer;
  z-index:999;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}

/* FOOTER */
footer{
  background:var(--primary);
  color:#ccc;
  padding:25px 0;
  text-align:center;
}


.cta{
  margin-top: 20px;
}
.hero .date{
  margin-top: 40px;
}


/*  SCHEDULE */
/* SCHEDULE */
.schedule-panel {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
}

.schedule-heading {
  padding: 15px 20px;
  background: #f5f9f6;
  cursor: pointer;
  position: relative;
}

.schedule-heading h4 {
  margin: 0;
  font-weight: 600;
  color: #1f3d2b;
}

.schedule-heading .toggle-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #3fa46a;
}

.schedule-body {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #eee;
}