*{margin:0;padding:0;box-sizing:border-box;}

/* -------- Header -------- */
.learning-title{
  text-align:center;
  background:#0a192f;
  color:#fff;
  padding:50px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
}
.learning-title h1{
  font-size:2.4rem;
  color:#64ffda;
}
.learning-title p{
  color:#ccd6f6;
  margin-top:8px;
}

/* -------- Scrollable Container -------- */
.learning-wrapper{
  position:relative;
  margin:60px auto;
  max-width:1300px;
  overflow:hidden;
  padding:0 50px;
}

.scroll-container{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:25px;
}
.scroll-container::-webkit-scrollbar{
  height:10px;
}
.scroll-container::-webkit-scrollbar-thumb{
  background:#64ffda;
  border-radius:5px;
}
.scroll-container::-webkit-scrollbar-track{
  background:#0a192f;
  border-radius:5px;
}

/* -------- Department Card -------- */
.department{
  flex:0 0 300px;
  background:#fff;
  border-radius:20px;
  padding:40px 25px;
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
  opacity:0;
  transform:translateY(40px);
}
.department.visible{
  opacity:1;
  transform:translateY(0);
  transition:all 0.6s ease-out;
}
.department:hover{
  transform:translateY(-10px);
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.department i{
  font-size:2.5rem;
  color: blue;
  margin-bottom:15px;
}
.department h2{
  color:#0a192f;
  margin-bottom:10px;
  font-size:1.4rem;
}
.department p{
  color:#555;
  font-size:0.95rem;
  margin-bottom:15px;
}
.department a{
  background: black;
  padding: 6px 12px 6px 12px;
  border-radius: 6px;
  text-decoration:none;
  color: white;
  font-weight:600;
  font-size: 22px;
  letter-spacing: 1.4px;
}
.department a:hover{
  background-color: blue;
  color: white;
}

/* -------- Navigation Arrows -------- */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#0a192f;
  color:#64ffda;
  border:none;
  font-size:1.6rem;
  padding:10px 14px;
  border-radius:50%;
  cursor:pointer;
  transition:background 0.3s ease;
  z-index:10;
}
.arrow:hover{
  background:#112240;
}
.left-arrow{left:10px;}
.right-arrow{right:10px;}

/* -------- Responsive -------- */
@media(max-width:700px){
.learning-title h1{font-size:1.9rem;}
  .department{flex:0 0 230px;padding:30px 20px;}
  .wrapper{padding:0 30px;}
}