.elementor-22450 .elementor-element.elementor-element-dbce5ec{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-22450 .elementor-element.elementor-element-e41c1e9{margin-top:30px;margin-bottom:30px;padding:0px 0px 0px 0px;}.elementor-22450 .elementor-element.elementor-element-9143820{color:#000000;}.elementor-22450 .elementor-element.elementor-element-9143820 a{color:#5C8018;}.elementor-22450 .elementor-element.elementor-element-a0c3b1f:not(.elementor-motion-effects-element-type-background), .elementor-22450 .elementor-element.elementor-element-a0c3b1f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#f9f8f8;}.elementor-22450 .elementor-element.elementor-element-a0c3b1f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 10px 0px;}.elementor-22450 .elementor-element.elementor-element-a0c3b1f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-22450 .elementor-element.elementor-element-a0c3b1f > .elementor-shape-top svg{height:220px;transform:translateX(-50%) rotateY(180deg);}.elementor-22450 .elementor-element.elementor-element-937e715 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-22450 .elementor-element.elementor-element-937e715{padding:10px 0px 10px 0px;}@media(max-width:767px){.elementor-22450 .elementor-element.elementor-element-a6cc6e8 > .elementor-element-populated{margin:0px 0px 20px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-22450 .elementor-element.elementor-element-6f67cae > .elementor-element-populated{margin:0px 0px 20px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-22450 .elementor-element.elementor-element-a6cc6e8{width:100%;}.elementor-22450 .elementor-element.elementor-element-6f67cae{width:100%;}.elementor-22450 .elementor-element.elementor-element-0c2efa0{width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-22450 .elementor-element.elementor-element-a6cc6e8{width:100%;}.elementor-22450 .elementor-element.elementor-element-6f67cae{width:100%;}}/* Start custom CSS for html, class: .elementor-element-2351212 */:root {
      --edu-dark: #1d4d6d;
      --edu-blue: #0a1428;
      --edu-accent: #fbbf24; /* Amber */
      --edu-glass: rgba(255, 255, 255, 0.03);
      --edu-border: rgba(255, 255, 255, 0.1);
    }

    .edu-hero {
      position: relative;
      display: flex;
      align-items: center;
      padding: 100px 5%;
      overflow: hidden;
    }

    /* Cinematic Background */
    .edu-bg-media {
      position: absolute;
      inset: 0;
      background: url('/wp-content/uploads/2026/04/faculty-of-education-uniosun-scaled.jpg') center/cover;
      opacity: 0.25;
      filter: grayscale(100%) contrast(120%);
      z-index: 1;
    }

    .edu-bg-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 50%, rgba(10, 20, 40, 0.8) 0%, var(--edu-dark) 80%);
      z-index: 2;
    }

    /* Content Layout */
    .edu-container {
      position: relative;
      z-index: 10;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
    }

    .edu-layout {
      display: flex;
      flex-direction: column;
      gap: 50px;
    }

    /* Top Navigation-like Badge */
    .edu-breadcrumb {
      display: flex;
      align-items: center;
      gap: 15px;
      animation: fadeInDown 0.8s ease;
      margin-top: 20px;
    }

    .edu-pill {
      background: var(--edu-accent);
      color: var(--edu-dark);
      padding: 6px 18px;
      border-radius: 100px;
      font-weight: 800;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .edu-location-line {
      color: #ffffff;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Headline Styling */
    .edu-title {
      max-width: 900px;
      margin-top: -70px;
    }

    .edu-title h1 {
      font-size: clamp(3rem, 8vw, 6.5rem);
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -3px;
      color: #FFFFFF;
    }

    .edu-stroke {
      -webkit-text-stroke: 1px rgba(255,255,255,0.3);
      color: transparent;
    }

    .edu-accent-text {
      color: var(--edu-accent);
      position: relative;
    }

    /* Floating Stats Bar */
    .edu-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1px;
      background: var(--edu-border);
      border: 1px solid var(--edu-border);
      border-radius: 24px;
      overflow: hidden;
      backdrop-filter: blur(20px);
      margin-top: 20px;
    }

    .stat-box {
      background: var(--edu-dark);
      padding: 30px;
      transition: 0.4s;
    }

    .stat-box:hover {
      background: #5C8018;
    }

    .stat-box i {
      color: var(--edu-accent);
      font-size: 1.5rem;
      margin-bottom: 15px;
      display: block;
    }

    .stat-box h4 {
      font-size: 1.1rem;
      margin-bottom: 5px;
      color: #FFFFFF;
    }

    .stat-box span {
      font-size: 0.85rem;
      color: #FFFFFF;
    }

    /* Action Layer */
    .edu-actions {
      display: flex;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
      margin-top: -50px;
    }

    .btn-main {
      background: white;
      color: black;
      padding: 22px 45px;
      border-radius: 100px;
      text-decoration: none;
      font-weight: 700;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 15px;
      transition: 0.3s;
    }

    .btn-main:hover {
      transform: scale(1.05);
      background: var(--edu-accent);
      color: #FFFFFF;
    }

    .btn-ghost {
      color: white;
      text-decoration: none;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--edu-accent);
      padding-bottom: 5px;
    }

    /* Decorations */
    .edu-circle-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
      bottom: -100px;
      right: -100px;
      filter: blur(60px);
      z-index: 3;
    }

    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @media (max-width: 768px) {
        
    }

    @media (max-width: 768px) {
      .edu-hero { padding-top: 150px; }
      .edu-actions { flex-direction: column; align-items: flex-start; }
      .btn-main { width: 100%; justify-content: center; }
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2794af2 *//* ====================== FACULTY OF EDUCATION SECTION ====================== */

.education-section {
  background: #1d4d6d;
  color: #e2e8f0;
  padding: 30px 0;
}

.education-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.kicker {
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 2.9rem;
  color: white;
  margin: 16px 0 18px;
  line-height: 1.1;
}

.section-header p {
  max-width: 720px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 1.15rem;
}

/* Programmes Grid */
.programmes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px;
  margin-bottom: 30px;
}

.programme-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 40px 36px;
  transition: all 0.3s ease;
}

.programme-card:hover {
  transform: translateY(-8px);
  border-color: #fbbf24;
}

.card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e2937;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  margin-bottom: 28px;
}

.programme-card h3 {
  color: white;
  font-size: 1.55rem;
  margin-bottom: 12px;
}

.programme-card p {
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.6;
}

.programme-list {
  list-style: none;
  padding: 0;
}

.programme-list li {
  padding: 8px 0;
  color: #ffffff;
  line-height: 2.1;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Vision & Mission */
.vision-mission {
  background: linear-gradient(135deg, #1d4d6d, #1d4d6d);
  border-radius: 28px;
  padding: 60px 60px;
  margin-bottom: 0px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 70px;
}

.vision-card{
    background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 40px 36px;
  transition: all 0.3s ease;
}

.vision-card .icon-wrapper {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.vision-card .icon-wrapper i {
  color: #fbbf24;
}

.vision-card h3 {
  font-size: 2rem;
  color: white;
  margin-bottom: 16px;
}

.vision-card p {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #ffffff;
}

/* Why Choose Us */
.why-choose-header {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 80px;
}

.why-choose-header h2 {
  font-size: 2.8rem;
  color: white;
  margin: 16px 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.why-card {
  background: rgba(255,255,255,0.05);
  padding: 36px;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s;
}

.why-card:hover {
  transform: translateY(-5px);
}

.why-card i {
  font-size: 3.5rem;
  color: #fbbf24;
  margin-bottom: 20px;
}

.why-card h4 {
  color: white;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.why-card p {
  color: #ffffff;
}

/* Accreditation Note */
.accreditation-note {
  text-align: center;
  margin-top: 80px;
  font-size: 1.05rem;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .education-section {
    padding: 80px 0px;
  }
  
  .education-container {
  padding-left: 10px;
  padding-right: 10px;
}
  
  .section-header h2,
  .why-choose-header h2 {
    font-size: 2.4rem;
  }
  
  .vision-mission {
    padding: 60px 30px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-963f94a */.faculty-dept-slider-wrapper {
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
        position: relative;
    }

    /* Section Header with Webometric Keywords */
    .dept-slider-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .dept-slider-header h2 {
        font-size: 2.4em;
        color: #003366;
        border-bottom: 4px solid #f9c234;
        display: inline-block;
        padding-bottom: 12px;
        margin-bottom: 15px;
    }

    .dept-slider-header p {
        font-size: 1.1em;
        color: #555;
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Slider Container - Exact 3 per view */
    .faculty-dept-slider {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 30px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 10px 5px 30px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .faculty-dept-slider::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Department Cards - Exactly 3 per view */
    .dept-card {
        flex: 0 0 calc(33.333% - 20px); /* 3 cards minus gap adjustment */
        min-width: 300px;
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,51,102,0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        scroll-snap-align: start;
        border: 1px solid #eee;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .dept-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,51,102,0.15);
        border-color: #f9c234;
    }

    /* Image Container with Overlay for Text */
    .dept-image {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

    .dept-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .dept-card:hover .dept-image img {
        transform: scale(1.05);
    }

    .dept-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to top, rgba(0,51,102,0.3), transparent);
    }

    /* Department Code Badge (Webometric) */
    .dept-code {
        position: absolute;
        top: 15px;
        right: 15px;
        background: #f9c234;
        color: #003366;
        padding: 5px 15px;
        border-radius: 30px;
        font-weight: 700;
        font-size: 0.85em;
        z-index: 2;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* Card Content */
    .dept-card h3 {
        font-size: 1.4em;
        margin: 20px 20px 10px;
        color: #000000;
        line-height: 1.4;
        min-height: 70px;
    }

    .dept-card h3 a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s;
    }

    .dept-card h3 a:hover {
        color: #5C8018;
        text-decoration: underline;
    }

    .dept-card p {
        font-size: 0.95em;
        color: #555;
        margin: 0 20px 20px;
        line-height: 1.6;
        flex: 1;
    }

    /* Button with original green color #5C8018 and hover gold #f9c234 */
    .dept-link {
        display: block;
        margin: 0 20px 25px;
        padding: 14px 12px;
        background: #5C8018; /* Original green */
        color: white;
        text-align: center;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s;
        border: 2px solid transparent;
    }

    .dept-link:hover {
        background: #f9c234; /* Hover gold */
        color: #000000; /* Dark blue text for contrast */
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(249,194,52,0.3);
    }

    /* Indicators (dots) - Navigation Only, No Arrows */
    .slider-indicators {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 35px;
    }

    .slider-indicator {
        width: 14px;
        height: 14px;
        background: #ccc;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        padding: 0;
    }

    .slider-indicator:hover {
        background: #5C8018;
        transform: scale(1.2);
    }

    .slider-indicator.active {
        background: #f9c234;
        transform: scale(1.3);
        box-shadow: 0 0 0 3px rgba(249,194,52,0.3);
    }

    /* Webometric Hidden Metadata */
    .webometric-meta {
        display: none;
    }

    /* Responsive Breakpoints */
    @media (max-width: 1100px) {
        .dept-card {
            flex: 0 0 calc(33.333% - 20px);
            min-width: 280px;
        }
    }

    @media (max-width: 900px) {
        .dept-card {
            flex: 0 0 calc(50% - 15px); /* 2 cards on tablet */
        }
        
        .dept-slider-header h2 {
            font-size: 2em;
        }
    }

    @media (max-width: 600px) {
        .dept-card {
            flex: 0 0 100%; /* 1 card on mobile */
        }
        
        .dept-slider-header h2 {
            font-size: 1.8em;
        }
        
        .dept-slider-header p {
            font-size: 1em;
            padding: 0 10px;
        }
        
        .slider-indicators {
            gap: 12px;
        }
    }/* End custom CSS */