/* Main CSS Stylesheet */

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Variables */
    --primary-color: #328E6E;
    --primary-dark: #046b30;
    --secondary-color: #2ecc71;
    --secondary-dark: #E1EEBC;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --success-color: #2ecc71;
    --info-color: #3498db;
    --gray-light: #f5f5f5;
    --gray: #ddd;
    --gray-dark: #95a5a6;
    
    /* Font Variables */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Roboto', sans-serif;
    
    /* Sizing Variables */
    --header-height: 70px;
    --container-width: 1450px;
    --border-radius: 4px;
    --transition-speed: 0.3s;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

/* ===== CONTAINER & LAYOUT ===== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.site-content {
    min-height: calc(100vh - var(--header-height) - 100px);
    padding: 2rem 0;
}

/* ===== HEADER & NAVIGATION ===== */
.site-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.site-branding {
  display: flex;
  align-items: center;
}

.logo {
  height: 60px;
  margin-right: 1rem;
}

.site-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-color);
}

.main-navigation {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 30px;
  top: 70%;
  transform: translateY(-50%);
}

.nav-menu li {
  margin-left: 1.5rem;
}

.nav-menu li a {
  display: flex;
  align-items: center;
  color: var(--dark-color);
  font-weight: 500;
}

.nav-menu li a i {
  margin-right: 0.5rem;
}

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

.user-menu {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
}

.user-info {
  text-align: right;
  margin-right: 1rem;
}

.username {
  display: block;
  font-weight: 500;
}

.role-badge {
  display: inline-block;
  font-size: 0.75rem;
  background-color: var(--primary-color);
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.logout-btn {
  display: flex;
  align-items: center;
  background-color: var(--light-color);
  color: var(--dark-color);
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background-color var(--transition-speed);
}

.logout-btn i {
  margin-right: 0.3rem;
}

.logout-btn:hover {
  background-color: var(--gray);
  color: var(--dark-color);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--dark-color);
  position: relative;
  transition: background-color var(--transition-speed);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--dark-color);
  transition: transform var(--transition-speed);
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* Mobile menu active state */
.mobile-menu-active .hamburger {
  background-color: transparent;
}

.mobile-menu-active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.mobile-menu-active .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}
@media screen and (min-width: 993px) {
  .nav-menu {
      display: flex;
      list-style-type: none;
      margin: 0;
      padding: 0;
      position: static; /* Change from absolute to static */
      transform: none;  /* Remove transform */
  }
  
  .main-navigation {
      display: flex;
      align-items: center;
      justify-content: flex-end; /* Align to right */
      flex-grow: 1;
  }
  
  .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  /* Give some space between menu items */
  .nav-menu li {
      margin-left: 1.5rem;
      margin-right: 0;
  }
  
  /* Position login button with some space after the menu */
  .auth-buttons {
      margin-left: 1.5rem;
  }
}

/* Responsive styles */
@media screen and (max-width: 992px) {
  .mobile-menu-toggle {
      display: block;
      z-index: 101;
  }
  
  .main-navigation {
      position: fixed;
      top: var(--header-height);
      left: -100%;
      width: 100%;
      height: calc(100vh - var(--header-height));
      background-color: white;
      flex-direction: column;
      align-items: flex-start;
      padding: 1.5rem;
      transition: left 0.3s ease;
      overflow-y: auto;
  }
  
  .mobile-menu-active .main-navigation {
      left: 0;
  }
  
  .nav-menu {
      flex-direction: column;
      width: 100%;
      position: static;
      transform: none;
      right: 0;
  }
  
  .nav-menu li {
      margin: 0 0 1rem 0;
      width: 100%;
  }
  
  .nav-menu li a {
      padding: 0.5rem 0;
      width: 100%;
      border-bottom: 1px solid var(--light-color);
  }
  
  .user-menu {
      flex-direction: column;
      align-items: flex-start;
      margin: 1.5rem 0 0 0;
      width: 100%;
  }
  
  .user-info {
      margin: 0 0 1rem 0;
      text-align: left;
  }
  
  .auth-buttons {
      margin-top: 1.5rem;
      width: 100%;
  }
  
  .auth-buttons .btn {
      width: 100%;
      text-align: center;
  }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
}

.btn-success {
    background-color: var(--success-color);
    color: white !important;
}

.btn-success:hover {
    background-color: #27ae60;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white !important;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--gray);
    color: var(--dark-color) !important;
}

.btn-outline:hover {
    background-color: var(--gray-light);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-icon {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending {
    background-color: var(--warning-color);
    color: white;
}

.status-approved, .status-published {
    background-color: var(--success-color);
    color: white;
}

.status-rejected {
    background-color: var(--danger-color);
    color: white;
}

/* ===== FORM STYLES ===== */
.form-container {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--gray-dark);
    font-size: 0.875rem;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.inline-form {
    display: inline;
}

/* ===== ALERT STYLES ===== */
.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* ===== TABLE STYLES ===== */
.table-responsive {
    overflow-x: auto;
}

.content-table,
.approval-table,
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.content-table th,
.approval-table th,
.admin-table th {
    background-color: var(--dark-color);
    color: white;
    text-align: left;
    padding: 1rem;
    font-weight: 500;
}

.content-table td,
.approval-table td,
.admin-table td {
    padding: 1rem;
    border-top: 1px solid var(--gray);
}

.content-table tr:hover,
.approval-table tr:hover,
.admin-table tr:hover {
    background-color: var(--gray-light);
}

.actions {
    display: flex;
    gap: 0.5rem;
}

.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 500;
}

.filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--gray);
    border-radius: var(--border-radius);
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box input {
    padding: 0.5rem;
    border: 1px solid var(--gray);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    width: 250px;
}

.search-box button {
    padding: 0.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
}

/* ===== DASHBOARD STYLES ===== */
.dashboard-header {
    margin-bottom: 2rem;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.stat-card.highlight {
    border-left: 4px solid var(--primary-color);
}

.stat-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 1rem;
    width: 50px;
    text-align: center;
}

.stat-content h3 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
}

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.action-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.action-card.highlight {
    border-left: 4px solid var(--primary-color);
}

.action-card h3 {
    margin-bottom: 0.5rem;
}

.action-card p {
    margin-bottom: 1.5rem;
    color: var(--gray-dark);
}

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--danger-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.recent-activity {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.recent-activity h2 {
    margin-bottom: 1.5rem;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    border-bottom: 1px solid var(--gray-light);
    padding-bottom: 1rem;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.activity-icon.member {
    background-color: var(--info-color);
}

.activity-icon.post {
    background-color: var(--secondary-color);
}

.activity-details {
    flex-grow: 1;
}

.activity-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.activity-date {
    color: var(--gray-dark);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* ===== USER PAGE STYLES ===== */
.welcome-section {
    text-align: center;
    margin-bottom: 3rem;
}

.welcome-section h1 {
    margin-bottom: 0.5rem;
}

.dashboard-grid,
.members-grid,
.blog-grid,
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.dashboard-card,
.member-card,
.blog-card,
.post-card {
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed);
}

.dashboard-card:hover,
.member-card:hover,
.blog-card:hover,
.post-card:hover {
    transform: translateY(-5px);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.card-content {
    padding: 1.5rem;
}

.card-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.card-content p {
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
}

.member-image,
.blog-image,
.post-image {
    height: 200px;
    overflow: hidden;
}

.member-image img,
.blog-image img,
.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info,
.blog-content,
.post-content {
    padding: 1.5rem;
}

.member-position,
.post-meta,
.blog-meta {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 1rem;
}

.member-bio {
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
}

.view-all {
    text-align: center;
    margin-top: 2rem;
}

/* ===== BANNER SECTION STYLES ===== */
.ul-banner {
  max-height: 600px;
  position: relative;
  background-color: var(--ul-black);
  overflow: hidden;
  color: white;
  z-index: 1;
}

.ul-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/banner-bg-shape.svg) no-repeat center center/cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.ul-banner-container {
  max-width: clamp(922px, 90.38vw, 1720px);
  width: 100%;
  margin: auto;
}

.ul-banner-txt {
  padding: clamp(50px, 5vw, 100px) 0;
  margin-top: -50px;
  z-index: 1;
  color: white;
}

.ul-banner-txt-vector {
  position: absolute;
  z-index: 0;
  bottom: 0;
  pointer-events: none;
  left: clamp(15px, 4.2vw, 80px);
  max-width: clamp(284px, 29.64vw, 564px);
  color: white;
}

.ul-banner-sub-title {
  font-weight: 600;
  letter-spacing: 0.25em;
  margin-bottom: clamp(4px, 0.4vw, 8px);
  color: white;
}

.ul-banner-title {
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 80px);
  font-family: var(--font-quicksand, sans-serif);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: clamp(10px, 1vw, 20px);
  margin-left: -5px;
  color: white;
}

.ul-banner-descr {
  font-size: clamp(15px, 0.95vw, 18px);
  font-weight: 500;
  margin-bottom: clamp(15px, 1.5vw, 30px);
  color: white;
}

.ul-banner-btns {
  display: flex;
  margin-top: 15px;
  gap: clamp(20px, 2.1vw, 40px);
  align-items: center;
  flex-wrap: wrap;
  color: white;
}

.ul-banner-stat {
  display: flex;
  gap: clamp(7px, 0.53vw, 10px);
  align-items: center;
}

.ul-banner-stat .imgs {
  display: flex;
  align-items: center;
}

.ul-banner-stat .imgs > * {
  width: clamp(40px, 2.63vw, 50px);
  aspect-ratio: 1/1;
  margin-left: calc(0% - clamp(12px, 0.79vw, 15px));
  border: 3px solid white;
  border-radius: 999px;
  background-color: var(--ul-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 0.74vw, 14px);
  font-weight: 800;
  color: var(--ul-primary);
}

.ul-banner-stat .imgs > *:first-child {
  margin-left: 0;
}

.ul-banner-stat .txt {
  font-size: clamp(11px, 0.74vw, 14px);
  font-weight: 600;
}

.ul-banner-img {
  position: relative;
  width: max-content;
  z-index: 1;
}

.ul-banner-img .img-wrapper {
  background: linear-gradient(180deg, var(--ul-primary) 0%, rgba(235, 83, 16, 0) 51%, var(--ul-primary) 100%);
  padding-left: 10px;
  clip-path: polygon(20.444% 6.836%, 20.444% 6.836%, 21.079% 1.445%, 21.969% -3.298%, 23.149% -7.442%, 24.655% -11.037%, 26.521% -14.129%, 28.783% -16.769%, 31.475% -19.005%, 34.633% -20.885%, 38.291% -22.458%, 42.485% -23.773%, 42.485% -23.773%, 51.821% -25.092%, 61.13% -24.265%, 70.354% -21.642%, 79.44% -17.571%, 88.329% -12.403%, 96.968% -6.486%, 105.299% -0.169%, 113.267% 6.199%, 120.817% 12.269%, 127.892% 17.691%, 127.892% 17.691%, 133.187% 21.665%, 138.424% 25.901%, 143.431% 30.413%, 148.036% 35.215%, 152.067% 40.322%, 155.351% 45.748%, 157.717% 51.507%, 158.992% 57.614%, 159.004% 64.083%, 157.581% 70.928%, 157.581% 70.928%, 154.251% 78.396%, 149.391% 84.901%, 143.283% 90.358%, 136.208% 94.679%, 128.447% 97.778%, 120.283% 99.568%, 111.997% 99.963%, 103.871% 98.874%, 96.186% 96.217%, 89.224% 91.904%, 89.224% 91.904%, 84.824% 88.551%, 80.861% 85.901%, 77.197% 83.943%, 73.692% 82.666%, 70.205% 82.06%, 66.599% 82.113%, 62.733% 82.815%, 58.469% 84.155%, 53.665% 86.122%, 48.184% 88.705%, 48.184% 88.705%, 41.958% 91.563%, 36.284% 93.719%, 31.115% 95.169%, 26.403% 95.908%, 22.102% 95.934%, 18.165% 95.243%, 14.544% 93.83%, 11.192% 91.692%, 8.062% 88.825%, 5.108% 85.226%, 5.108% 85.226%, 3.102% 82.034%, 1.619% 78.74%, 0.63% 75.368%, 0.106% 71.943%, 0.017% 68.487%, 0.333% 65.024%, 1.025% 61.58%, 2.062% 58.177%, 3.417% 54.84%, 5.058% 51.592%, 5.058% 51.592%, 8.7% 45.01%, 11.636% 39.594%, 13.954% 35.08%, 15.745% 31.209%, 17.099% 27.718%, 18.105% 24.347%, 18.852% 20.834%, 19.431% 16.919%, 19.932% 12.34%, 20.444% 6.836%);
}

.ul-banner-img .img-wrapper img {
  max-height: clamp(0px, 65.74vw, 1251px);
  width: 100%;
  max-width: clamp(300px, 50.45vw, 960px);
  aspect-ratio: 960/1000;
  clip-path: polygon(20.444% 6.836%, 20.444% 6.836%, 21.079% 1.445%, 21.969% -3.298%, 23.149% -7.442%, 24.655% -11.037%, 26.521% -14.129%, 28.783% -16.769%, 31.475% -19.005%, 34.633% -20.885%, 38.291% -22.458%, 42.485% -23.773%, 42.485% -23.773%, 51.821% -25.092%, 61.13% -24.265%, 70.354% -21.642%, 79.44% -17.571%, 88.329% -12.403%, 96.968% -6.486%, 105.299% -0.169%, 113.267% 6.199%, 120.817% 12.269%, 127.892% 17.691%, 127.892% 17.691%, 133.187% 21.665%, 138.424% 25.901%, 143.431% 30.413%, 148.036% 35.215%, 152.067% 40.322%, 155.351% 45.748%, 157.717% 51.507%, 158.992% 57.614%, 159.004% 64.083%, 157.581% 70.928%, 157.581% 70.928%, 154.251% 78.396%, 149.391% 84.901%, 143.283% 90.358%, 136.208% 94.679%, 128.447% 97.778%, 120.283% 99.568%, 111.997% 99.963%, 103.871% 98.874%, 96.186% 96.217%, 89.224% 91.904%, 89.224% 91.904%, 84.824% 88.551%, 80.861% 85.901%, 77.197% 83.943%, 73.692% 82.666%, 70.205% 82.06%, 66.599% 82.113%, 62.733% 82.815%, 58.469% 84.155%, 53.665% 86.122%, 48.184% 88.705%, 48.184% 88.705%, 41.958% 91.563%, 36.284% 93.719%, 31.115% 95.169%, 26.403% 95.908%, 22.102% 95.934%, 18.165% 95.243%, 14.544% 93.83%, 11.192% 91.692%, 8.062% 88.825%, 5.108% 85.226%, 5.108% 85.226%, 3.102% 82.034%, 1.619% 78.74%, 0.63% 75.368%, 0.106% 71.943%, 0.017% 68.487%, 0.333% 65.024%, 1.025% 61.58%, 2.062% 58.177%, 3.417% 54.84%, 5.058% 51.592%, 5.058% 51.592%, 8.7% 45.01%, 11.636% 39.594%, 13.954% 35.08%, 15.745% 31.209%, 17.099% 27.718%, 18.105% 24.347%, 18.852% 20.834%, 19.431% 16.919%, 19.932% 12.34%, 20.444% 6.836%);
}

.ul-banner-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #1E252F -5.34%, rgba(30, 37, 47, 0) 39.75%);
}

.ul-banner-img-vectors > * {
  position: absolute;
  z-index: -1;
}

.ul-banner-img-vectors .vector-1 {
  top: clamp(92px, 9.56vw, 182px);
  left: clamp(50px, 6.31vw, 120px);
}

.ul-banner-img-vectors .vector-2 {
  bottom: clamp(40px, 4.73vw, 90px);
  right: clamp(135px, 12.35vw, 235px);
}

.ul-banner-vectors > * {
  position: absolute;
}

.ul-banner-vectors .vector-1 {
  top: clamp(50px, 3.42vw, 65px);
  left: 0;
  max-width: clamp(72px, 5.83vw, 111px);
}

.ul-banner-vectors .vector-2 {
  left: 0;
  bottom: clamp(5px, 1.47vw, 28px);
  max-width: clamp(80px, 8.2vw, 156px);
}

.ul-banner-vectors .vector-3 {
  right: 0;
  top: clamp(16px, 1vw, 19px);
  max-width: clamp(106px, 9.93vw, 189px);
}

/* Banner Style 2 */
.ul-banner-2 {
  background-color: transparent;
  max-width: var(--container-width);
  margin: auto;
  border-radius: clamp(20px, 2.1vw, 40px);
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
  height: 600px;
}

.ul-banner-2::before {
  content: none;
}

.ul-banner-2-slider {
  clip-path: polygon(29.268% 100%, 2.168% 100%, 2.168% 100%, 1.816% 99.939%, 1.483% 99.763%, 1.172% 99.481%, 0.888% 99.103%, 0.635% 98.638%, 0.418% 98.096%, 0.242% 97.486%, 0.111% 96.819%, 0.028% 96.103%, 0% 95.349%, 0% 4.651%, 0% 4.651%, 0.028% 3.897%, 0.111% 3.181%, 0.242% 2.514%, 0.418% 1.904%, 0.635% 1.362%, 0.888% 0.897%, 1.172% 0.519%, 1.483% 0.237%, 1.816% 0.061%, 2.168% 0%, 97.832% 0%, 97.832% 0%, 98.184% 0.061%, 98.517% 0.237%, 98.828% 0.519%, 99.112% 0.897%, 99.365% 1.362%, 99.582% 1.904%, 99.758% 2.514%, 99.889% 3.181%, 99.972% 3.897%, 100% 4.651%, 100% 95.349%, 100% 95.349%, 99.972% 96.103%, 99.889% 96.819%, 99.758% 97.486%, 99.582% 98.096%, 99.365% 98.638%, 99.112% 99.103%, 98.828% 99.481%, 98.517% 99.763%, 98.184% 99.939%, 97.832% 100%, 71.614% 100%, 71.614% 100%, 71.262% 99.939%, 70.929% 99.763%, 70.618% 99.481%, 70.333% 99.103%, 70.081% 98.638%, 69.864% 98.096%, 69.688% 97.486%, 69.557% 96.819%, 69.474% 96.103%, 69.446% 95.349%, 69.446% 95.137%, 69.446% 95.137%, 69.418% 94.383%, 69.336% 93.667%, 69.204% 93%, 69.028% 92.39%, 68.811% 91.848%, 68.558% 91.383%, 68.274% 91.005%, 67.963% 90.723%, 67.63% 90.547%, 67.278% 90.486%, 33.604% 90.486%, 33.604% 90.486%, 33.252% 90.547%, 32.919% 90.723%, 32.607% 91.005%, 32.323% 91.383%, 32.071% 91.848%, 31.854% 92.39%, 31.678% 93%, 31.546% 93.667%, 31.464% 94.383%, 31.436% 95.137%, 31.436% 95.349%, 31.436% 95.349%, 31.407% 96.103%, 31.325% 96.819%, 31.194% 97.486%, 31.017% 98.096%, 30.801% 98.638%, 30.548% 99.103%, 30.264% 99.481%, 29.953% 99.763%, 29.619% 99.939%, 29.268% 100%);
  z-index: 1;
  height: 600px;
}

.ul-banner-2-slider-navigation {
  position: absolute;
  bottom: clamp(10px, 0.68vw, 13px);
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

.ul-banner-2-slider-navigation button {
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ul-banner-2-thumb-slider {
  margin: 0 10px;
  width: 140px;
}

.ul-banner-2-thumb-slider img {
  width: clamp(35px, 2.1vw, 40px);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

.ul-banner-2-slide {
  padding: clamp(100px, 12.35vw, 235px) clamp(15px, 3.15vw, 60px);
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 400px;
}

.ul-banner-2-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ul-banner-2-slide-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan gambar menutupi area secara proporsional */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.ul-banner-2-slide .ul-banner-txt {
  padding: 0;
  max-width: 100%;
}

.ul-banner-2-slide .ul-banner-sub-title {
  color: white;
}

.ul-banner-2-slide .ul-banner-sub-title::before {
  background-color: white;
}

.ul-banner-2-slide .ul-banner-title {
  line-height: 1.2;
}

.ul-banner-2-slide .ul-btn {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  transition: all 0.3s ease;
}

.ul-banner-2-slide .ul-btn:hover {
  background-color: white;
  color: var(--ul-black, #1E252F);
}

/* Responsive Styles */
@media screen and (max-width: 1399px) {
  .ul-banner-2-slider-navigation {
    bottom: 0;
  }
}

@media screen and (max-width: 991px) {
  .ul-banner-container {
    max-width: calc(100% - 30px);
  }
  
  .ul-banner-txt {
    padding-top: 0;
  }
  
  .ul-banner-img {
    margin-left: auto;
    margin-right: -15px;
  }
  
  .ul-banner-img .img-wrapper {
    padding-left: 0;
  }
  
  .ul-banner-2 {
    margin: 0 15px 50px;
  }
  
  .ul-banner-2-slide {
    padding: 80px clamp(15px, 3.15vw, 60px) 120px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .ul-banner-2-slide .col-md-7 {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .ul-banner-img .img-wrapper img {
    max-width: clamp(300px, 70.45vw, 990px);
    max-height: none;
  }
  
  .ul-banner-vectors .vector-2 {
    left: auto;
    right: 0;
    transform: scale(-1);
    opacity: 0;
  }
  
  .ul-banner-2-slider {
    height: 500px;
    clip-path: polygon(16.124% 100%, 7.168% 100%, 7.168% 100%, 6.006% 99.888%, 4.903% 99.562%, 3.874% 99.042%, 2.935% 98.344%, 2.1% 97.486%, 1.383% 96.486%, 0.8% 95.361%, 0.365% 94.129%, 0.094% 92.809%, 0% 91.416%, 0% 8.584%, 0% 8.584%, 0.094% 7.191%, 0.365% 5.871%, 0.8% 4.639%, 1.383% 3.514%, 2.1% 2.514%, 2.935% 1.656%, 3.874% 0.958%, 4.903% 0.438%, 6.006% 0.112%, 7.168% 0%, 92.832% 0%, 92.832% 0%, 93.994% 0.112%, 95.097% 0.438%, 96.126% 0.958%, 97.065% 1.656%, 97.9% 2.514%, 98.617% 3.514%, 99.2% 4.639%, 99.635% 5.871%, 99.906% 7.191%, 100% 8.584%, 100% 91.416%, 100% 91.416%, 99.906% 92.809%, 99.635% 94.129%, 99.2% 95.361%, 98.617% 96.486%, 97.9% 97.486%, 97.065% 98.344%, 96.126% 99.042%, 95.097% 99.562%, 93.994% 99.888%, 92.832% 100%, 83.787% 100%, 83.787% 100%, 83.117% 99.935%, 82.482% 99.748%, 81.89% 99.448%, 81.349% 99.047%, 80.868% 98.553%, 80.456% 97.977%, 80.12% 97.329%, 79.87% 96.62%, 79.714% 95.86%, 79.659% 95.058%, 79.659% 95.058%, 79.567% 93.684%, 79.299% 92.381%, 78.87% 91.166%, 78.295% 90.056%, 77.588% 89.069%, 76.763% 88.222%, 75.837% 87.533%, 74.822% 87.02%, 73.733% 86.699%, 72.586% 86.588%, 49.731% 86.588%, 27.325% 86.588%, 27.325% 86.588%, 26.177% 86.699%, 25.089% 87.02%, 24.074% 87.533%, 23.147% 88.222%, 22.323% 89.069%, 21.616% 90.056%, 21.04% 91.166%, 20.612% 92.381%, 20.343% 93.684%, 20.251% 95.058%, 20.251% 95.058%, 20.197% 95.86%, 20.041% 96.62%, 19.79% 97.329%, 19.455% 97.977%, 19.042% 98.553%, 18.561% 99.047%, 18.02% 99.448%, 17.428% 99.748%, 16.793% 99.935%, 16.124% 100%);
  }
  
  .ul-banner-2-slide {
    padding: 60px 15px 100px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .ul-banner-title {
    font-size: clamp(24px, 5vw, 36px);
    margin-left: 0;
  }
  
  .ul-banner-descr {
    font-size: 14px;
  }
  
  .ul-banner-btns {
    margin-top: 20px;
  }
  
  .ul-banner-2-slider-navigation {
    bottom: 10px;
    width: 90%;
  }
  
  .ul-banner-2-thumb-slider {
    margin: 0 5px;
    width: 100px;
  }
  
  .ul-banner-2-thumb-slider img {
    width: 25px;
    height: 25px;
  }

  .ul-banner-2-thumb-slider .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media screen and (max-width: 479px) {
  .ul-banner-2-slider {
    height: 450px;
    clip-path: polygon(8.152% 100%, 4.839% 100%, 4.839% 100%, 4.054% 99.966%, 3.309% 99.867%, 2.615% 99.709%, 1.981% 99.497%, 1.417% 99.236%, 0.934% 98.932%, 0.54% 98.59%, 0.247% 98.216%, 0.063% 97.814%, 0% 97.391%, 0% 2.609%, 0% 2.609%, 0.063% 2.186%, 0.247% 1.784%, 0.54% 1.41%, 0.934% 1.068%, 1.417% 0.764%, 1.981% 0.503%, 2.615% 0.291%, 3.309% 0.133%, 4.054% 0.034%, 4.839% 0%, 95.484% 0%, 95.484% 0%, 96.216% 0.032%, 96.911% 0.124%, 97.559% 0.272%, 98.151% 0.47%, 98.677% 0.713%, 99.129% 0.997%, 99.496% 1.316%, 99.77% 1.665%, 99.941% 2.04%, 100% 2.435%, 100% 97.391%, 100% 97.391%, 99.937% 97.814%, 99.753% 98.216%, 99.46% 98.59%, 99.066% 98.932%, 98.583% 99.236%, 98.019% 99.497%, 97.385% 99.709%, 96.691% 99.867%, 95.946% 99.966%, 95.161% 100%, 91.525% 100%, 91.525% 100%, 90.769% 99.968%, 90.048% 99.876%, 89.373% 99.728%, 88.752% 99.529%, 88.195% 99.284%, 87.712% 98.997%, 87.311% 98.674%, 87.001% 98.318%, 86.792% 97.935%, 86.694% 97.529%, 86.452% 95.058%, 86.318% 94.143%, 86.318% 94.143%, 86.203% 93.746%, 85.983% 93.372%, 85.666% 93.026%, 85.262% 92.711%, 84.779% 92.432%, 84.226% 92.195%, 83.613% 92.002%, 82.947% 91.859%, 82.238% 91.77%, 81.495% 91.739%, 49.032% 91.739%, 18.229% 91.739%, 18.229% 91.739%, 17.499% 91.769%, 16.802% 91.855%, 16.146% 91.993%, 15.539% 92.179%, 14.991% 92.409%, 14.509% 92.68%, 14.102% 92.985%, 13.779% 93.323%, 13.547% 93.688%, 13.417% 94.076%, 13.226% 95.058%, 12.984% 97.529%, 12.984% 97.529%, 12.885% 97.935%, 12.676% 98.318%, 12.367% 98.674%, 11.966% 98.997%, 11.482% 99.284%, 10.925% 99.529%, 10.305% 99.728%, 9.63% 99.876%, 8.909% 99.968%, 8.152% 100%);
  }
  
  .ul-banner-2-slide {
    padding: 50px 15px 80px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .ul-banner-title {
    font-size: clamp(22px, 4.5vw, 30px);
  }
  
  .ul-banner-descr {
    font-size: 13px;
  }
  
  .ul-banner-2-slider-navigation {
    display: none; /* Hide on very small screens */
  }
}

/* Responsive height adjustments for different screen sizes */
@media (min-width: 768px) {
  .ul-banner-2-slide {
    min-height: 450px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .ul-banner-2-slide {
    min-height: 500px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .ul-banner-2-slide {
    min-height: 550px;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

  /* Basic reset and layout structure */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto; /* This makes main take up all available space */
}

/* Home page specific fix */
body.home main {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Footer Styles */
.site-footer {
  background: linear-gradient(135deg, rgba(2, 60, 49, 0.9), rgba(4, 107, 48, 0.8));
  color: #fff;
  padding: 3rem 0 1rem;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0; /* Ensure no margin at bottom */
  flex-shrink: 0; /* Prevent footer from shrinking */
  position: relative; /* Changed from static */
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, #023c31, #046b30);
}

.footer-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-column {
  flex: 1 1 250px;
}

.footer-column h3 {
  color: var(--secondary-dark);
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.8rem;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--secondary-dark);
}

.footer-column p {
  color: #fff;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
  display: inline-block;
  position: relative;
  padding-left: 15px;
}

.footer-links a::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.footer-links a:hover {
  color: var(--secondary-dark);
  transform: translateX(5px);
}

.footer-links a:hover::before {
  opacity: 1;
  transform: translateX(-5px);
}

.footer-column i {
  color: var(--secondary-dark);
  margin-right: 10px;
  width: 16px;
  text-align: center;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 1rem;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.social-icon:hover, .social-icon:active, .social-icon:focus {
  background-color: var(--secondary-dark);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  outline: none;
}

.social-icon i {
  color: #fff !important; 
  transition: color 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
}

.footer-bottom p {
  margin: 0.5rem 0;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
  .footer-columns {
      gap: 1.5rem;
  }
  
  .footer-column {
      flex: 1 1 200px;
  }
}

@media (max-width: 768px) {
  .site-footer {
      padding: 2.5rem 0 1rem;
  }
  
  .footer-columns {
      gap: 2rem 1rem;
  }
  
  .footer-column {
      flex: 1 1 45%;
  }
}

@media (max-width: 576px) {
  .footer-column {
      flex: 1 1 100%;
  }
  
  .social-icons {
      justify-content: center;
  }
  
  .footer-column h3 {
      text-align: center;
  }
  
  .footer-column h3::after {
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
  }
  
  .footer-column p,
  .footer-links {
      text-align: center;
  }
  
  .footer-links a {
      padding-left: 0;
  }
  
  .footer-links a::before {
      display: none;
  }
}

.ul-section-spacing {
  padding-top: 60px;
  padding-bottom: 60px;
}

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

.ul-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.ul-section-sub-title {
  color: var(--primary-dark);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}

.ul-section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ul-btn {
  background-color: var(--primary-dark);
  color: #fff;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ul-btn:hover {
  background-color: #fff; /* White background on hover */
  color: var(--primary-dark); /* Text changes to primary dark color */
  border: 1px solid var(--primary-dark); /* Optional: adds a border */
}

.ul-btn i {
  width: 30px;
  height: 30px;
  background-color: #fff;
  color: var(--primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s ease;
}

.ul-btn:hover i {
  background-color: var(--primary-dark); /* Icon background changes on hover */
  color: #fff; /* Icon color changes on hover */
}

.ul-blog {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  background: #f5f5f5;
}

.ul-blog-img {
  position: relative;
  overflow: hidden;
}

.ul-blog-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.ul-blog-img .date {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: var(--primary-color);
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  border-radius: 5px;
}

.ul-blog-img .date .number {
  font-size: 24px;
  font-weight: 700;
  display: block;
  line-height: 1;
}

.ul-blog-txt {
  padding: 20px;
}

.ul-blog-infos {
  display: flex;
  margin-bottom: 15px;
}

.ul-blog-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  margin-right: 15px;
}

.ul-blog-title {
  font-size: 18px;
  font-weight: 700;
  color: #1E252F;
  display: block;
  margin-bottom: 15px;
  line-height: 1.4;
  text-decoration: none;
}

.ul-blog-btn {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ul-blog-btn .icon {
  font-size: 14px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row > * {
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex: 0 0 auto;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.justify-content-center {
  justify-content: center;
}

/* Row with 3 columns for large screens */
.row-cols-lg-3 > * {
  width: 33.33%;
}

/* For tablet and mobile */
@media (max-width: 991px) {
  .ul-section-heading {
      flex-direction: column;
      align-items: flex-start;
      text-align: center;
  }
  
  .ul-section-heading .ul-btn {
      margin-top: 20px;
  }
  
  /* 2 columns for medium screens */
  .row-cols-md-2 > * {
      width: 50%;
  }
}

@media (max-width: 767px) {
  .row-cols-md-3 > * {
      width: 100%;
  }
  
  .row-cols-2 > * {
      width: 100%;
  }
}

@media (min-width: 992px) {
  /* 3 columns for large screens */
  .row-cols-lg-3 > * {
      width: 33.33%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* 2 columns for medium screens */
  .row-cols-md-2 > * {
      width: 50%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .row-cols-sm-2 > * {
      width: 50%;
  }
}

@media (max-width: 575px) {
  .row-cols-xxs-1 > * {
      width: 100%;
  }
}

/* Additional CSS for the new pages and components */

/* Page Header */
.ul-page-header {
  background: linear-gradient(135deg, rgba(2, 60, 49, 0.9), rgba(4, 107, 48, 0.8)), url('../img/page-header-bg.jpg') no-repeat center/cover;
  padding: 30px 0;
  color: #fff;
  position: relative;
  margin-bottom: 30px;
}

.ul-page-header-content {
  text-align: center;
}

.ul-page-header h1 {
  font-size: 36px;
  margin-bottom: 15px;
  color: #fff;
}

.ul-breadcrumb {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ul-breadcrumb li {
  font-size: 16px;
  position: relative;
  padding: 0 15px;
}

.ul-breadcrumb li:not(:last-child)::after {
  content: '/';
  position: absolute;
  right: -3px;
  top: 0;
}

.ul-breadcrumb li a {
  color: #ffffff;
  text-decoration: none;
}

.ul-breadcrumb li a:hover {
  color: #2ecc71;
}

/* About Section */
.ul-about-img {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ul-about-content {
  padding: 20px 0;
}

.ul-about-features {
  margin-top: 30px;
}

.ul-feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.ul-feature-item i {
  font-size: 24px;
  color: var(--primary-color);
  margin-right: 15px;
  margin-top: 3px;
}

.ul-feature-item h4 {
  font-size: 18px;
  margin-bottom: 8px;
}

.ul-feature-item p {
  margin-bottom: 0;
  color: #666;
}

/* Activities Section */
.ul-activity-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.3s ease;
}

.ul-activity-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ul-activity-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ul-activity-icon i {
  font-size: 30px;
  color: #fff;
}

.ul-activity-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.ul-activity-card p {
  color: #666;
  margin-bottom: 0;
}

/* CTA Section */
.ul-cta-section {
  padding: 50px 0;
  background: linear-gradient(135deg, #023c31, #046b30);
  color: #fff;
  margin-top: 30px;
}

.ul-cta-wrapper {
  padding: 20px;
  border-radius: 10px;
}

.ul-cta-section h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #fff;
}

.ul-cta-section p {
  font-size: 16px;
  margin-bottom: 0;
  color: rgba(255,255,255,0.8);
}

.ul-cta-section .ul-btn {
  background-color: #fff;
  color: var(--primary-color);
  font-weight: 600;
  padding: 12px 25px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-top: 10px;
}

.ul-cta-section .ul-btn i {
  font-size: 14px;
}

.ul-cta-section .ul-btn:hover {
  background-color: var(--light-color);
}

/* Vision & Mission Styles */
.ul-vision-box, .ul-mission-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.ul-vision-box h3, .ul-mission-box h3 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.ul-vision-box h3 i, .ul-mission-box h3 i {
  margin-right: 15px;
  font-size: 24px;
}

.ul-mission-box ul {
  padding-left: 20px;
}

.ul-mission-box li {
  margin-bottom: 10px;
}

/* Values Section */
.ul-value-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  height: 100%;
  transition: all 0.3s ease;
}

.ul-value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ul-value-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ul-value-icon i {
    font-size: 30px;
    color: #fff;
}

.ul-value-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.ul-value-card p {
    color: #666;
}

/* Achievement Counter */
.ul-counter-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.ul-counter-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1;
}

.ul-counter-box h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

/* Struktur Organisasi Styles */
.ul-leader-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.ul-leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ul-leader-img {
    height: 300px;
    overflow: hidden;
}

.ul-leader-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ul-leader-info {
    padding: 20px;
    text-align: center;
}

.ul-leader-info h4 {
    font-size: 20px;
    margin-bottom: 5px;
}

.ul-leader-position {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.ul-leader-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ul-leader-socials a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s ease;
}

.ul-leader-socials a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.ul-department-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    height: 100%;
}

.ul-department-header {
    background-color: var(--primary-color);
    padding: 20px;
    color: #fff;
    display: flex;
    align-items: center;
}

.ul-department-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.ul-department-icon i {
    font-size: 24px;
    color: #fff;
}

.ul-department-header h4 {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
}

.ul-department-body {
    padding: 20px;
}

.ul-department-members {
    margin-top: 15px;
}

.ul-member-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

.ul-member-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ul-member-name {
    font-weight: 600;
}

.ul-member-position {
    color: #666;
}

.ul-komisariat-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.ul-komisariat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ul-komisariat-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.ul-komisariat-leader {
    font-weight: 600;
    margin-bottom: 5px;
}

.ul-komisariat-info {
    color: #666;
    margin-bottom: 0;
}

.ul-org-chart-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Contact Page Styles */
.ul-contact-info-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    height: 100%;
}

.ul-contact-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ul-contact-icon i {
    font-size: 30px;
    color: #fff;
}

.ul-contact-info-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.ul-contact-info-item p {
    color: #666;
    margin-bottom: 0;
}

.ul-map-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
}

.ul-map {
    border-radius: 10px;
    overflow: hidden;
    height: 400px;
}

.ul-office-hours {
    margin-top: 20px;
}

.ul-hours-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

.ul-hours-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ul-hours-item .day {
    font-weight: 600;
}

.ul-hours-item .time {
    color: #666;
}

.ul-contact-form-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
}

.ul-contact-form {
    margin-top: 20px;
}

.ul-contact-form .form-group {
    margin-bottom: 20px;
}

.ul-contact-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.ul-contact-form .form-control {
    height: auto;
    padding: 12px 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 100%;
}

.ul-contact-form textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

.ul-quick-contact-section {
    background-color: #f9f9f9;
    padding: 30px 0;
}

.ul-quick-contact-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.ul-btn-whatsapp {
    background-color: #25D366;
    color: #fff;
}

.ul-btn-whatsapp:hover {
    background-color: #128C7E;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .ul-page-header {
        padding: 40px 0;
    }
    
    .ul-page-header h1 {
        font-size: 30px;
    }
    
    .ul-section-title {
        font-size: 30px;
    }
    
    .ul-leader-img {
        height: 250px;
    }
    
    .ul-contact-form-wrapper,
    .ul-map-wrapper {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .ul-page-header {
        padding: 30px 0;
    }
    
    .ul-page-header h1 {
        font-size: 24px;
    }
    
    .ul-section-title {
        font-size: 24px;
    }
    
    .ul-about-img {
        margin-bottom: 30px;
    }
    
    .ul-cta-section h2 {
        font-size: 24px;
    }
    
    .ul-cta-section .ul-btn {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
    }
}

/* Enhanced Testimonial Section Styles */
.ul-testimonial-section {
  background-color: #f8f9fa;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.ul-testimonial-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/img/pattern-bg.png');
  opacity: 0.05;
  pointer-events: none;
}

.ul-section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.ul-testi-section-title {
  text-align: center;
  margin: 0 auto 15px;
  position: relative;
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  color: #333;
}

.ul-testi-section-title:after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 10px auto 0;
}

.section-description {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  color: #555;
}

.testimonial-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
}

.ul-testimonial-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  padding: 25px;
  margin: 15px 5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--primary-color);
  height: calc(100% - 30px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 10px); 
}

.ul-testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.ul-testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 80px;
  color: rgba(26, 115, 232, 0.1);
  font-family: Georgia, serif;
  line-height: 1;
  z-index: 0;
}

.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.testimonial-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  border: 3px solid var(--primary-color);
  transition: all 0.3s ease;
}

.ul-testimonial-card:hover .testimonial-img {
  border-color: var(--primary-color);
}

.testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-author {
  flex: 1;
}

.testimonial-author h4 {
  margin: 0 0 5px;
  font-size: 18px;
  color: #333;
}

.testimonial-author p {
  margin: 0;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.testimonial-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  text-align: center
}

.testimonial-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0;
  align-items: center;
}


/* Navigation styles */
.ul-testimonial-navigation {
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.testimonial-prev,
.testimonial-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-prev:hover,
.testimonial-next:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Pagination styles */
.swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--primary-color);
  transform: scale(1.3);
}



/* Responsive styles */
@media (max-width: 768px) {
  .ul-testimonial-card {
      padding: 20px;
  }
  
  .testimonial-header {
      flex-direction: column;
      text-align: center;
  }
  
  .testimonial-img {
      margin-right: 0;
      margin-bottom: 15px;
  }
  
  .testimonial-content p {
      font-size: 15px;
      text-align: center
  }
  

}

@media (max-width: 480px) {
  .ul-testimonial-navigation {
      gap: 10px;
  }
  
  .testimonial-prev,
  .testimonial-next {
      width: 40px;
      height: 40px;
      font-size: 16px;
  }
}

.search-section {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
}

.search-form .input-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.search-form .form-control {
  border-radius: 8px 0 0 8px;
  border: 1px solid #ced4da;
  padding: 12px 20px;
  font-size: 16px;
  height: auto;
  box-shadow: none;
  transition: all 0.3s ease;
}

.search-form .form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-form .btn-primary {
  border-radius: 0 8px 8px 0;
  padding: 12px 20px;
  background-color: #007bff;
  border-color: #007bff;
  transition: all 0.3s ease;
}

.search-form .btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

.search-form .btn-outline-secondary {
  border-radius: 8px;
  padding: 12px 20px;
  transition: all 0.3s ease;
  border: 1px solid #6c757d;
  background-color: white;
  color: #6c757d;
}

.search-form .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: white;
}

/* Add a highlighting effect for search results */
.highlight-match {
  background-color: rgba(255, 230, 0, 0.2);
  padding: 2px;
  border-radius: 3px;
}

/* No results message styling */
.no-results {
  text-align: center;
  padding: 40px 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-top: 20px;
}

.no-results i {
  color: #dee2e6;
  margin-bottom: 15px;
}

.no-results h3 {
  color: #6c757d;
  margin-bottom: 10px;
}

.no-results p {
  color: #adb5bd;
}

@media (max-width: 767px) {
  .search-form .input-group {
      flex-direction: column;
      align-items: stretch;
  }
  
  .search-form .form-control {
      border-radius: 8px;
      margin-bottom: 10px;
  }
  
  .search-form .btn-primary {
      border-radius: 8px;
      margin-bottom: 10px;
  }
  
  .search-form .btn-outline-secondary {
      width: 100%;
  }
}

.container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-section {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 2rem 0;
  margin-bottom: 2rem;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.header-section h1 {
  font-weight: 700;
  font-size: 2.2rem;
  margin: 0;
  opacity: 0.9;
  color: white;
}

.member-komisariat {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-top: 0.5rem;
}

.profile-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  transition: transform 0.3s;
}

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

.profile-image-container {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-bg);
}

.profile-image {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
  padding: 0 1.5rem 1.5rem 1.5rem;
  justify-content: center;
}

.info-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.info-card h2 {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-color);
}

.info-card h3 {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 1.5rem 0 1rem 0;
}

.info-group {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.info-group label {
  font-weight: 600;
  color: var(--primary-color);
  width: 100px;
  margin: 0;
}

.info-group span {
  flex: 1;
}

.training-item {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.training-item label {
  font-weight: 600;
  color: var(--primary-color);
  width: 100px;
  margin: 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 10px;
}

.contact-item i {
  color: var(--primary-color);
  width: 25px;
  text-align: center;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s;
  margin-top: 1rem;
  text-decoration: none;
}

.back-button:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-edit {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 600;
}

.btn-delete {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 600;
}

.btn-edit:hover, .btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  margin: 1.5rem 0;
}

@media (max-width: 767.98px) {
  .profile-image {
      width: 200px;
      height: 200px;
  }
  
  .header-section {
      padding: 1.5rem 0;
  }
  
  .header-section h1 {
      font-size: 1.8rem;
  }
  
  .info-card {
      padding: 1.5rem;
  }
}