:root{--primary: #9e0c0f;--primary-light: #d32f2f;--primary-dark: #7b1c1c;--secondary: #f5f5f5;--text: #212121;--text-light: #757575;--white: #ffffff;--accent: #ffc107}*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}body{background-color: var(--secondary);color: var(--text);line-height: 1.6}.container{max-width: 1200px;margin: 0 auto;padding: 0 20px}header{background: linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color: var(--white);padding: 20px 0;position: relative;overflow: hidden}.header-content{display: flex;justify-content: space-between;align-items: center;position: relative;z-index: 2}.logo{display: flex;align-items: center;background-image: url("../logo_umm_white.png");background-position: left;background-repeat: no-repeat}.logo-text{margin-left: 91px;font-size: 1.5rem;font-weight: bold}.logo-text span{font-size: 0.8rem}nav ul{display: flex;list-style: none}nav ul li{margin-left: 25px}nav ul li a{color: var(--white);text-decoration: none;font-weight: 500;transition: all 0.3s ease;position: relative}nav ul li a::after{content: "";position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background-color: var(--white);transition: width 0.3s ease}nav ul li a:hover::after{width: 100%}nav ul li a.menu-active::after{width: 100%}.header-bg{position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0.1}.hero{padding: 80px 0;background-image: url("../assets/banner/banner.jpg");background-color: rgba(0, 0, 0, 0.6);background-blend-mode: overlay;background-size: cover;background-position: center;color: rgba(255, 255, 255, 0.8);text-align: center;position: relative;overflow: hidden}.hero-content{max-width: 800px;margin: 0 auto;position: relative;z-index: 2}.hero h1{font-size: 3rem;margin-bottom: 20px;animation: fadeInDown 1s ease}.hero p{font-size: 1.2rem;margin-bottom: 30px;animation: fadeInUp 1s ease}.hero-buttons{display: flex;justify-content: center;gap: 20px;animation: fadeIn 1.5s ease}.btn{padding: 12px 30px;border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;display: inline-flex;align-items: center}.btn-primary{background-color: var(--white);color: var(--primary);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)}.btn-primary:hover{transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)}.btn-outline{border: 2px solid var(--white);color: var(--white)}.btn-outline:hover{background-color: var(--white);color: var(--primary)}.btn .iconify{margin-right: 8px}.stats{padding: 80px 0;background-color: var(--white)}.stats-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px}.stat-card{background: linear-gradient(145deg, #ffffff, #f0f0f0);border-radius: 15px;padding: 30px;text-align: center;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;position: relative;overflow: hidden}.stat-card::before{content: "";position: absolute;top: 0;left: 0;width: 5px;height: 100%;background: linear-gradient(to bottom, var(--primary), var(--primary-dark))}.stat-card:hover{transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1)}.stat-icon{font-size: 3rem;color: var(--primary);margin-bottom: 20px}.stat-number{font-size: 2.5rem;font-weight: 700;color: var(--primary);margin-bottom: 10px}.stat-title{font-size: 1.2rem;color: var(--text-light)}.research{padding: 80px 0;background-color: var(--secondary)}.section-header{text-align: center;margin-bottom: 60px}.section-header h2{font-size: 2.5rem;color: var(--primary);margin-bottom: 20px;position: relative;display: inline-block}.section-header h2::after{content: "";position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: linear-gradient(to right, var(--primary), var(--primary-dark));border-radius: 2px}.section-header p{max-width: 700px;margin: 0 auto;color: var(--text-light);font-size: 1.1rem}.research-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px}.research-card{background-color: var(--white);border-radius: 15px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);transition: all 0.3s ease}.research-card:hover{transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1)}.research-img{height: 200px;background-color: var(--primary);position: relative;overflow: hidden}.research-img::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, var(--primary-light), var(--primary-dark));opacity: 0.8}.research-content{padding: 25px}.research-content h3{font-size: 1.5rem;color: var(--primary);margin-bottom: 15px}.research-content p{color: var(--text-light);margin-bottom: 20px}.research-link{display: inline-flex;align-items: center;color: var(--primary);text-decoration: none;font-weight: 600;transition: all 0.3s ease}.research-link:hover{color: var(--primary-dark)}.research-link .iconify{margin-left: 5px;transition: transform 0.3s ease}.research-link:hover .iconify{transform: translateX(5px)}.charts{padding: 80px 0;background-color: var(--secondary)}.chart-container{display: grid;grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));gap: 40px;margin-top: 40px}.chart-card{background-color: var(--white);border-radius: 15px;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08)}.chart-title{text-align: center;color: var(--primary);margin-bottom: 20px;font-size: 1.5rem}.community-service{padding: 80px 0;background-color: var(--secondary)}.timeline{position: relative;max-width: 800px;margin: 0 auto;padding: 40px 0}.timeline::after{content: "";position: absolute;width: 6px;background-color: var(--primary);top: 0;bottom: 0;left: 50%;margin-left: -3px;border-radius: 3px;z-index: 1}.timeline-item{position: relative;width: 50%;margin-bottom: 50px;opacity: 0;transform: translateY(50px);transition: all 0.8s ease;z-index: 2}.timeline-item.visible{opacity: 1;transform: translateY(0)}.timeline-item:nth-child(odd){left: 0;padding-right: 40px}.timeline-item:nth-child(even){left: 50%;padding-left: 40px}.timeline-content{background-color: var(--white);border-radius: 10px;padding: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);position: relative;z-index: 2}.timeline-content::after{content: "";position: absolute;width: 20px;height: 20px;background-color: var(--white);top: 20px;transform: rotate(45deg);z-index: -1}.timeline-item:nth-child(odd) .timeline-content::after{right: -10px}.timeline-item:nth-child(even) .timeline-content::after{left: -10px}.timeline-date{font-weight: 700;color: var(--primary);margin-bottom: 10px;font-size: 1.1rem}.timeline-title{font-size: 1.2rem;margin-bottom: 10px;color: var(--text)}.timeline-desc{color: var(--text-light)}.timeline-icon{position: absolute;width: 50px;height: 50px;background: linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;z-index: 3;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2)}.timeline-item:nth-child(odd) .timeline-icon{right: -25px;top: 20px}.timeline-item:nth-child(even) .timeline-icon{left: -25px;top: 20px}.timeline-icon .iconify{font-size: 1.5rem}.team{padding: 80px 0;background-color: var(--white)}.team-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px}.team-card{background-color: var(--white);border-radius: 15px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);transition: all 0.3s ease;text-align: center}.team-card:hover{transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1)}.team-img{height: 250px;background: linear-gradient(45deg, var(--primary-light), var(--primary-dark));position: relative;overflow: hidden}.team-content{padding: 25px}.team-name{font-size: 1.25rem;color: var(--primary);margin-bottom: 5px}.team-role{color: var(--text-light);margin-bottom: 15px}.team-social{display: flex;justify-content: center;gap: 15px}.team-social a{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background-color: var(--secondary);color: var(--primary);transition: all 0.3s ease}.team-social a:hover{background-color: var(--primary);color: var(--white)}footer{background: linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color: var(--white);padding: 60px 0 30px}.footer-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 40px;margin-bottom: 40px}.footer-logo{font-size: 1.8rem;font-weight: 700;margin-bottom: 20px}.footer-desc{margin-bottom: 20px;opacity: 0.9}.footer-heading{font-size: 1.2rem;margin-bottom: 20px;position: relative;padding-bottom: 10px}.footer-heading::after{content: "";position: absolute;bottom: 0;left: 0;width: 40px;height: 3px;background-color: var(--white);border-radius: 2px}.footer-links{list-style: none}.footer-links li{margin-bottom: 10px}.footer-links a{color: var(--white);text-decoration: none;opacity: 0.9;transition: all 0.3s ease;display: flex;align-items: center}.footer-links a:hover{opacity: 1;padding-left: 5px}.footer-links .iconify{margin-right: 10px}.footer-bottom{text-align: center;padding-top: 30px;border-top: 1px solid rgba(255, 255, 255, 0.1)}@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}@keyframes fadeInUp{from{opacity: 0;transform: translateY(20px)}to{opacity: 1;transform: translateY(0)}}@keyframes fadeInDown{from{opacity: 0;transform: translateY(-20px)}to{opacity: 1;transform: translateY(0)}}@keyframes fadeInLeft{from{opacity: 0;transform: translateX(-20px)}to{opacity: 1;transform: translateX(0)}}@keyframes fadeInRight{from{opacity: 0;transform: translateX(20px)}to{opacity: 1;transform: translateX(0)}}@media (max-width: 992px){.header-content{flex-direction: column}nav ul{margin-top: 20px;flex-wrap: wrap;justify-content: center}nav ul li{margin: 0 10px 10px}.hero h1{font-size: 2.5rem}.chart-container{grid-template-columns: 1fr}}@media (max-width: 768px){.timeline::after{left: 31px}.timeline-item{width: 100%;padding-left: 70px;padding-right: 25px;margin-bottom: 50px}.timeline-item:nth-child(even){width: 100%;padding-left: 70px;padding-right: 25px;left: 0}.timeline-item:nth-child(odd) .timeline-icon,.timeline-item:nth-child(even) .timeline-icon{left: 11px;right: auto;top: 20px}.timeline-item:nth-child(odd) .timeline-content::after,.timeline-item:nth-child(even) .timeline-content::after{left: -10px;right: auto}.timeline-content{padding: 20px}.timeline-title{font-size: 1.2rem}.timeline-icon{width: 50px;height: 50px}.timeline-icon .iconify{font-size: 1.5rem}.hero-buttons{flex-direction: column;align-items: center}}