@charset "utf-8";

@font-face {
  font-family: 'Font Awesome 6 Free';
  src: 
  src:   url('../fonts/fa-brands-400.woff2?v=6.7.2') format('woff2'),
  url('../fonts/fa-brands-400.ttf?v=6.7.2') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  src:
  src: url('../fonts/fa-regular-400.woff2?v=6.7.2') format('woff2'),
  url('../fonts/fa-regular-400.ttf?v=6.7.2') format('truetype'), 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  src: 
  src: url('../fonts/fa-solid-900.woff2?v=6.7.2') format('woff2'),
  url('../fonts/fa-solid-900.ttf?v=6.7.2') format('truetype'),
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  src: 
  src: url('../fonts/fa-v4compatibility.woff2?v=6.7.2') format('woff2'),
  url('../fonts/fa-v4compatibility.ttf?v=6.7.2') format('truetype'),
  font-weight: normal;
  font-style: normal;
}



/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

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

/* Header Styles */
header {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    position: relative;
    z-index: 100;
    transition: all 0.3s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
}

.logo a {
    text-decoration: none;
    color: #333;
}

:root {
    --primary-color: #4285f4;
    --secondary-color: #00c9ff;
    --accent-color: #6e45e2;
    --gradient-primary: linear-gradient(135deg, #4285f4, #6e45e2);
    --transition: all 0.3s ease;
}

.highlight {
    color: var(--primary-color);
}

nav {
    display: flex;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: var(--transition);
    padding: 5px 0;
    position: relative;
}

nav ul li a:hover {
    color: var(--primary-color);
}

nav ul li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    bottom: 0;
    left: 0;
    transition: var(--transition);
}

nav ul li a:hover:after,
nav ul li a.active:after {
    width: 100%;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.5em;
}














.btn-sm {
  padding: 8px 20px;
  font-size: 0.9rem;
}
.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
 font-style: normal;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

.section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}
/* Tabs */
.tabs {
    margin-top: 80px;
}

.tab-header {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.tab-item {
    padding: 15px 30px;
    cursor: pointer;
    font-weight: 500;
    position: relative;
}

.tab-item:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    transition: var(--transition);
}

.tab-item.active {
    color: var(--primary-color);
}

.tab-item.active:after {
    width: 100%;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Courses */
.course-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.course-item {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.course-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.course-image {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.course-item:hover .course-image img {
    transform: scale(1.1);
}

.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--gradient-primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.course-details {
    padding: 20px;
}

.course-details h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.course-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--gray-color);
}

/* Resources */
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.resource-item {
    display: flex;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.resource-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.resource-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

.resource-details h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}





















/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    padding: 50px 0 20px;
    margin-top: 50px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-logo h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.footer-logo p {
    color: #ccc;
    font-size: 0.9em;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links a {
    color: #fff;
    margin-left: 15px;
    font-size: 1.2em;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--primary-color);
}

/* Particles Container */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
}

/* General Article Styles */
.article-content-section {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

/* Card-like Article Card (Container) */
.article-card {
    background-color: #fff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    margin: 20px 0 40px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 102, 51, 0.1); /* Subtle border with HZAU green */
}


/* Article Content within Card */
.article-content {
    margin-top: 25px;
}



.article-content p:first-of-type {
    margin-top: 0;
}

.article-content p:last-of-type {
    margin-bottom: 0;
}

.article-content h2 {
    color: var(--primary-color);
    border-bottom: 1px solid rgba(66, 133, 244, 0.2);
    padding-bottom: 10px;
    margin-top: 30px;
}

.article-content h3 {
    color: var(--primary-color);
    margin-top: 25px;
}

.article-content-section h1, 
.article-content-section h2, 
.article-content-section h3 {
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.article-content-section h1 {
    font-size: 2.2em;
    border-bottom: 2px solid #006633; /* HZAU Green */
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.article-content-section h2 {
    font-size: 1.8em;
    margin-top: 30px;
}

.article-content-section h3 {
    font-size: 1.4em;
    margin-top: 25px;
}

.article-content-section p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* Article Title within Card */
.article-title {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 102, 51, 0.15);
    margin-bottom: 25px;
}



.article-title h1 {
    margin: 0;
    color: #006633; /* HZAU Green */
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1.3;
}



/* Article Card positioning */
.article-section {
    position: relative;
    margin-top: -120px;
    z-index: 2;
}

.article-card {
    position: relative;
    z-index: 2;
}

/* Article Tags */
.article-tags {
    margin-top: 30px;
    margin-bottom: 30px;
}

.article-tags span {
    display: inline-block;
    background-color: #f0f0f0;
    color: #555;
    padding: 8px 15px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}

.article-tags span:hover {
    background-color: #006633; /* HZAU Green */
    color: #fff;
}

/* Author Box Removed */

/* Related Articles */
.related-articles {
    margin-bottom: 30px;
}

.related-articles h3 {
    font-size: 1.6em;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

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

.related-article-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s, box-shadow 0.3s;
}

.related-article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.related-article-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.related-article-content {
    padding: 15px;
}

.related-article-content h4 {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--primary-color);
    line-height: 1.4;
}

.related-article-content span {
    font-size: 0.85em;
    color: #777;
}

.related-article-content span i {
    margin-right: 5px;
}

/* Article Breadcrumbs */
.article-breadcrumbs {
    font-size: 0.85em; /* Slightly smaller */
    color: #777;      /* Default color for separators if not overridden */
    margin-bottom: 20px; /* Increased space below breadcrumbs */
    padding: 10px 0;
    /* border-bottom: 1px solid #f0f0f0; /* Optional: lighter border or remove entirely */
}

.article-breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.article-breadcrumbs a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.article-breadcrumbs .breadcrumb-separator {
    margin: 0 8px; /* Space around the '>' separator */
    color: #aaa;  /* Color for the separator itself */
}

.article-breadcrumbs span:not(.breadcrumb-separator) { /* Targets the current page text part */
    color: #555; /* Current page text color */
    font-weight: 500; /* Slightly bolder for current page */
}

.article-breadcrumbs i.fa-home {
    margin-right: 5px; /* Space after home icon */
}

/* Article Header */
.article-header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    max-height: 500px;
}

.header-image-container {
    width: 100%;
   height:500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
 /*background-image: linear-gradient(225deg, rgba(20,162,235,0.4) 0%,rgba(218,188,255,0.4) 100%);*/
   
}

.header-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .article-main-content {
        flex-direction: column;
    }
    .article-body {
        width: 100%;
        max-width: 100%;
    }
    .related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        display: none;
        z-index: 100;
    }
    nav.active {
        display: block;
    }
    nav ul {
        flex-direction: column;
        padding: 15px 0;
    }
    nav ul li {
        margin: 0;
        text-align: center;
    }
    nav ul li a {
        display: block;
        padding: 12px 20px;
    }
    .menu-toggle {
        display: block;
    }
.header-image-container {
         height: auto;
}
.logo h1 {
  font-size: 1.4rem;
}
}

@media (max-width: 768px) {
    .article-card {
        padding: 25px;
    }
    .article-title h1 {
        font-size: 1.8em;
    }
    .related-articles-grid {
        grid-template-columns: 1fr;
    }
    .header-image {
        max-height: 300px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .article-card {
        padding: 20px;
        margin: 10px 0 30px;
    }
    .article-title h1 {
        font-size: 1.5em;
    }
    .article-content h2 {
        font-size: 1.3em;
    }
    .article-content h3 {
        font-size: 1.1em;
    }
    .article-content p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .article-content-section h1 {
        font-size: 1.8em;
    }
    .article-content-section h2 {
        font-size: 1.5em;
    }
    .article-content-section h3 {
        font-size: 1.2em;
    }
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .article-content-section {
        padding: 20px;
    }
    .related-articles-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}

/* Adjust .article-body to be full width by default now */
.article-body {
    width: 100%;
    max-width: 100%; /* Or a specific max-width like 960px if desired for readability */
    flex: 0 0 100%;
    padding-right: 0; /* Remove any padding that was there to separate from sidebar */
}

.article-main-content {
    display: flex; /* This might be adjusted if .article-body is the only child */
    /* If .article-body is the only child, flex might not be needed here anymore, 
       or could be simplified. For now, let's assume it might contain other elements 
       or the structure is kept for future flexibility. */
}