:root {
  --department-blue: #075bd8;
  --department-blue-dark: #0047b7;
  --department-text: #232323;
  --department-paragraph: #55738c;
  --department-background: #f7faff;
  --department-card: #ffffff;
}

/* =====================================
   Active Navigation
===================================== */

.submenu-active {
  color: var(--department-blue) !important;
  font-weight: 700 !important;
}

/* =====================================
   Departments Banner
===================================== */

.departments-banner {
  min-height: 420px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image: url("images/about1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.departments-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 66, 176, 0.36);
  transition: background 0.35s ease;
}

.departments-banner-content {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  color: #ffffff;
}

.departments-banner-content h1 {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(43px, 5vw, 70px);
  line-height: 1.1;
  font-weight: 800;
}

.departments-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.departments-breadcrumb a,
.departments-breadcrumb span,
.departments-breadcrumb i {
  color: #ffffff;
}

.departments-breadcrumb a:hover {
  text-decoration: underline;
}

/* =====================================
   Departments Section
===================================== */

.departments-section {
  padding: 100px 0 175px;
  background-color: var(--department-background);
  transition: background-color 0.35s ease;
}

.departments-heading {
  max-width: 760px;
  margin: 0 auto 55px;
  text-align: center;
}

.departments-heading > span {
  display: block;
  margin-bottom: 8px;
  color: var(--department-blue);
  font-size: 16px;
  font-weight: 700;
}

.departments-heading h2 {
  margin: 0 0 17px;
  color: var(--department-text);
  font-size: clamp(32px, 4vw, 47px);
  line-height: 1.25;
  font-weight: 700;
}

.departments-heading p {
  margin: 0;
  color: var(--department-paragraph);
  font-size: 16px;
  line-height: 1.8;
}

/* =====================================
   Department Cards
===================================== */

.department-card {
  min-height: 285px;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(7, 91, 216, 0.34);
  border-radius: 5px;
  background-color: var(--department-card);
  box-shadow: 0 10px 28px rgba(30, 75, 120, 0.08);
  cursor: pointer;
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.35s ease;
}

/* الطبقة الزرقاء من اليسار */

.department-card::before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: var(--department-blue);
  transition: width 0.48s ease;
}

/* الطبقة الزرقاء من اليمين */

.department-card::after {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  background-color: var(--department-blue);
  transition: width 0.48s ease;
}

.department-card:hover::before,
.department-card:hover::after {
  width: 51%;
}

.department-card:hover {
  border-color: var(--department-blue);
  transform: translateY(-9px);
  box-shadow: 0 20px 42px rgba(0, 71, 183, 0.23);
}

.department-content {
  min-height: 285px;
  position: relative;
  z-index: 1;
  padding: 34px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.department-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--department-blue);
  font-size: 48px;
  transition:
    color 0.4s ease,
    background-color 0.4s ease,
    transform 0.55s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease;
}

.department-card h3 {
  margin: 0 0 13px;
  color: var(--department-text);
  font-size: 23px;
  font-weight: 700;
  transition: color 0.4s ease;
}

.department-card p {
  max-width: 320px;
  margin: 0;
  color: var(--department-paragraph);
  font-size: 14px;
  line-height: 1.75;
  transition: color 0.4s ease;
}

.department-card a {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    color 0.35s ease;
}

.department-card:hover .department-icon {
  color: #ffffff;
  transform: rotateY(360deg) scale(1.08);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
}

.department-card:hover h3,
.department-card:hover p {
  color: #ffffff;
}

.department-card:hover a {
  opacity: 1;
  transform: translateY(0);
}

.department-card a:hover {
  color: #dceaff;
}

/* =====================================
   Dark Mode
===================================== */

body.dark-mode {
  --department-text: #ffffff;
  --department-paragraph: #d0d5dd;
  --department-background: #1b1b1b;
  --department-card: #1d1d1d;
}

body.dark-mode .departments-banner-overlay {
  background: rgba(2, 10, 24, 0.72);
}

body.dark-mode .departments-section {
  background-color: #1b1b1b;
}

body.dark-mode .departments-heading h2 {
  color: #ffffff;
}

body.dark-mode .departments-heading p {
  color: #cbd3dd;
}

/* Dark Cards */

body.dark-mode .department-card {
  border-color: rgba(7, 91, 216, 0.48);
  background-color: #1d1d1d;
  box-shadow:
    0 0 13px rgba(255, 255, 255, 0.18),
    0 0 27px rgba(255, 255, 255, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.53);
}

body.dark-mode .department-card:hover {
  border-color: #3384f3;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.22),
    0 0 38px rgba(51, 132, 243, 0.38),
    0 21px 46px rgba(0, 0, 0, 0.64);
}

body.dark-mode .department-card h3 {
  color: #ffffff;
}

body.dark-mode .department-card p {
  color: #d2d7df;
}

/* Dark Icon Glow */

body.dark-mode .department-icon {
  position: relative;
  color: #3e8af2;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.35),
    0 0 19px rgba(62, 138, 242, 0.55);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 17px rgba(62, 138, 242, 0.46));
}

body.dark-mode .department-icon::after {
  content: "";
  width: 105px;
  height: 105px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(62, 138, 242, 0.16) 42%,
    rgba(62, 138, 242, 0) 74%
  );
  filter: blur(9px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.dark-mode .department-card:hover .department-icon {
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 24px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 23px rgba(74, 151, 255, 0.78));
}

body.dark-mode .department-card:hover h3,
body.dark-mode .department-card:hover p,
body.dark-mode .department-card:hover a {
  color: #ffffff;
}

/* Footer after Departments */

body.dark-mode .departments-section + .about-footer {
  background-color: #0c0c0c;
}

/* =====================================
   Responsive
===================================== */

@media (max-width: 991px) {
  .departments-banner {
    min-height: 350px;
  }

  .departments-section {
    padding: 80px 0 155px;
  }

  .departments-heading {
    margin-bottom: 45px;
  }

  .department-card,
  .department-content {
    min-height: 270px;
  }
}

@media (max-width: 767px) {
  .departments-banner {
    min-height: 310px;
  }

  .departments-banner-content h1 {
    margin-bottom: 14px;
  }

  .departments-breadcrumb {
    font-size: 15px;
  }

  .departments-section {
    padding: 65px 0 135px;
  }

  .departments-heading {
    margin-bottom: 38px;
    text-align: left;
  }

  .departments-heading h2 {
    font-size: 31px;
  }

  .department-card,
  .department-content {
    min-height: 255px;
  }
}

@media (max-width: 480px) {
  .departments-banner {
    min-height: 275px;
  }

  .departments-banner-content h1 {
    font-size: 38px;
  }

  .department-content {
    padding: 30px 20px;
  }

  .department-icon {
    width: 60px;
    height: 60px;
    font-size: 40px;
  }

  .department-card h3 {
    font-size: 20px;
  }
}