.about-page-breadcrumb { background: var(--white); padding: 14px 0; border-bottom: 1px solid var(--gray-200); } .about-page-breadcrumb .breadcrumb-list { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; } .about-page-breadcrumb .breadcrumb-list a { color: var(--gray-500); text-decoration: none; } .about-page-breadcrumb .breadcrumb-list .current { color: var(--primary); font-weight: 600; } .about-page-hero { position: relative; overflow: hidden; background: var(--gradient-dark); padding: 72px 0 76px; } .about-page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.15), transparent 40%), radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.12), transparent 35%); } .about-page-hero .container { position: relative; z-index: 2; text-align: center; } .about-page-hero h1 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 800; color: var(--white); } .about-page-hero p { max-width: 680px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; } .about-page-section { padding: 90px 0; background: #f6fbff; } .about-page-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: center; } .about-page-image { position: relative; } .about-page-image-main { min-height: 520px; overflow: hidden; border-radius: 28px; background: var(--gradient-main); box-shadow: var(--shadow-xl); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.28); font-size: 7rem; } .about-page-image-main img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--white); } .about-page-badge { position: absolute; right: -24px; bottom: -24px; display: flex; align-items: center; gap: 14px; padding: 22px 28px; border-radius: 22px; background: var(--white); box-shadow: var(--shadow-lg); } .about-page-badge-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success); color: var(--white); font-size: 1.4rem; } .about-page-badge-icon img { width: 28px; height: 28px; object-fit: contain; } .about-page-badge-text strong { display: block; font-family: 'Outfit', sans-serif; font-size: 2rem; color: var(--dark); line-height: 1; } .about-page-badge-text span { display: block; margin-top: 6px; color: var(--gray-500); } .about-page-content h2 { font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 800; color: var(--dark); line-height: 1.15; margin-bottom: 22px; } .about-page-content h2 span { color: var(--primary); } .about-page-content p { color: var(--gray-600); font-size: 1.02rem; line-height: 1.85; margin-bottom: 16px; } .about-page-content p:last-of-type { margin-bottom: 0; } .about-highlights-head { margin-top: 26px; margin-bottom: 18px; } .about-highlights-head h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--dark); font-weight: 800; } .about-highlights-head p { margin: 0; font-size: 0.95rem; } .about-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .highlight-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow); } .highlight-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(16, 185, 129, 0.12); color: var(--success); font-size: 1.1rem; flex-shrink: 0; } .highlight-content h4 { margin: 0 0 4px; font-size: 1rem; color: var(--dark); font-weight: 700; } .highlight-content p { margin: 0; font-size: 0.92rem; line-height: 1.5; } .mission-vision-section, .values-section, .history-section, .stats-section { padding: 88px 0; } .mission-vision-section { background: #f7fbff; } .mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .mv-card { position: relative; overflow: hidden; padding: 34px; border-radius: 28px; background: var(--white); border: 1px solid rgba(3, 105, 161, 0.08); box-shadow: var(--shadow-lg); transition: transform 0.4s ease, box-shadow 0.4s ease; } .mv-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gradient-main); } .vision-card { border-top-color: #22d3ee; } .mv-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: rgba(3, 105, 161, 0.12); color: var(--primary); font-size: 1.9rem; box-shadow: var(--shadow); margin-bottom: 24px; transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease; } .mv-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .mv-card:hover .mv-icon { background: var(--gradient-main); color: var(--white); transform: translateY(-4px) rotate(-8deg); } .mv-card h3 { margin: 0 0 14px; font-size: 1.6rem; color: var(--dark); font-family: 'Outfit', sans-serif; font-weight: 800; } .mv-card p { margin: 0; color: var(--gray-600); line-height: 1.8; } .mv-decoration { position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(34, 211, 238, 0.08); pointer-events: none; } .section-header-centered { text-align: center; max-width: 760px; margin: 0 auto 42px; } .section-header-centered .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--light); color: var(--primary); font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; } .section-header-centered .section-title { margin: 0 0 12px; font-family: 'Outfit', sans-serif; font-size: 2.4rem; color: var(--dark); font-weight: 800; } .section-header-centered .section-desc { margin: 0 auto; text-align: center; color: var(--gray-600); line-height: 1.8; max-width: 700px; } .values-section { background: #f7fbff; } .values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .value-card { position: relative; overflow: hidden; padding: 40px 25px; border-radius: 20px; background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); text-align: center; transition: all 0.4s ease; } .value-card::before { content: ''; position: absolute; inset: 0; background: var(--gradient-main); opacity: 0; transition: opacity 0.4s ease; } .value-card > * { position: relative; z-index: 1; } .value-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: transparent; } .value-card:hover::before { opacity: 1; } .value-icon, .stat-icon { width: 68px; height: 68px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: rgba(3, 105, 161, 0.1); color: var(--primary); font-size: 1.5rem; transition: all 0.4s ease; } .value-card:hover .value-icon { background: rgba(255, 255, 255, 0.2); color: var(--white); } .value-card h4 { margin: 0 0 10px; color: var(--dark); font-size: 1.08rem; font-weight: 800; transition: color 0.4s ease; } .value-card:hover h4 { color: var(--white); } .value-card p { margin: 0; color: var(--gray-600); font-size: 0.95rem; line-height: 1.7; transition: color 0.4s ease; } .value-card:hover p { color: rgba(255, 255, 255, 0.92); } .history-section { position: relative; overflow: hidden; background: var(--gradient-dark); } .history-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .history-section .container { position: relative; z-index: 1; } .history-section .section-badge { background: rgba(255, 255, 255, 0.1); color: var(--accent); } .history-section .section-title { color: var(--white); } .history-section .section-desc { color: rgba(255, 255, 255, 0.75); } .history-timeline { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding-top: 18px; } .timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: rgba(255, 255, 255, 0.2); transform: translateX(-50%); } .timeline-item { position: relative; display: flex; align-items: center; width: 100%; min-height: 150px; margin-bottom: 36px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item-left { flex-direction: row-reverse; } .timeline-item-left .timeline-content { text-align: right; padding-right: 80px; padding-left: 0; } .timeline-item-right .timeline-content { padding-left: 80px; text-align: left; } .timeline-dot { position: absolute; left: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.3); } .timeline-content { flex: 0 0 calc(50% - 46px); } .timeline-year { display: inline-block; margin-bottom: 8px; padding: 8px 18px; border-radius: 999px; background: var(--accent); color: var(--darker); font-weight: 800; font-size: 1.05rem; } .timeline-content h4 { margin: 14px 0 12px; color: var(--white); font-size: 1.25rem; font-weight: 800; line-height: 1.3; } .timeline-content p { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.8; font-size: 1rem; } .stats-section { background: #eef8ff; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .stat-card { padding: 30px 24px; border-radius: 24px; background: rgba(232, 244, 255, 0.9); text-align: center; box-shadow: var(--shadow-lg); transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } .stat-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); background: var(--white); } .stat-number { font-family: 'Outfit', sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1.1; } .stat-label { margin-top: 10px; color: var(--dark); font-weight: 700; } .stat-text { margin-top: 8px; color: var(--gray-500); font-size: 0.9rem; } @media (max-width: 1199.98px) { .values-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .about-page-grid, .mv-grid { grid-template-columns: 1fr; } .about-page-badge { right: 18px; bottom: 18px; } } @media (max-width: 767.98px) { .about-page-hero { padding: 52px 0 58px; } .about-page-hero h1, .about-page-content h2 { font-size: 2.2rem; } .about-highlights, .values-grid, .stats-grid { grid-template-columns: 1fr; } .about-page-image-main { min-height: 360px; } .about-page-badge { position: static; margin-top: 18px; width: fit-content; } .mission-vision-section, .values-section, .history-section, .stats-section, .about-page-section { padding: 70px 0; } .timeline-line { left: 30px; } .timeline-dot { left: 30px; } .timeline-item, .timeline-item-left, .timeline-item-right { flex-direction: column; align-items: flex-start; padding-left: 60px; } .timeline-item-left .timeline-content, .timeline-item-right .timeline-content { text-align: left; padding: 0; flex: 1 1 auto; } .timeline-content h4 { font-size: 1.45rem; } .timeline-content p { font-size: 1rem; } } .content-breadcrumb { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 1rem 0; } .content-breadcrumb-list { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; color: #64748b; font-size: 0.92rem; } .content-breadcrumb-list a { color: #64748b; text-decoration: none; transition: color 0.2s ease; } .content-breadcrumb-list a:hover, .content-breadcrumb-list .current { color: #0369a1; } .page-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 65%, #0ea5e9 100%); color: #fff; padding: 4rem 0 4.4rem; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.14), transparent 35%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, 0.18), transparent 30%); } .page-hero .container { position: relative; z-index: 1; text-align: center; } .page-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #67e8f9; font-size: 0.86rem; font-weight: 700; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 0.9rem; } .page-hero p { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; } .page-content { padding: 3rem 0 5rem; background: #f1f5f9; } .blog-layout, .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; } .blog-main, .detail-sidebar { display: grid; gap: 1.5rem; } .section-surface, .sidebar-widget, .detail-main { background: #fff; border: 1px solid #dbeafe; border-radius: 1.5rem; box-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.18); } .list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .list-title { font-size: 1.55rem; font-weight: 800; color: #0c4a6e; margin: 0; } .list-count { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-size: 0.88rem; font-weight: 700; } .blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .blog-card { background: #fff; border-radius: 1.5rem; border: 1px solid #dbeafe; overflow: hidden; box-shadow: 0 16px 38px -26px rgba(15, 23, 42, 0.2); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 28px 44px -28px rgba(2, 132, 199, 0.32); border-color: #7dd3fc; } .blog-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); } .blog-card-image, .popular-post-image, .detail-hero, .announcement-image, .related-image { background: linear-gradient(135deg, #075985 0%, #22d3ee 100%); } .blog-card-image { position: relative; height: 230px; overflow: hidden; } .blog-card.featured .blog-card-image { height: 100%; min-height: 300px; } .blog-card-image img, .popular-post-image img, .detail-hero img, .announcement-image img, .related-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .blog-card:hover .blog-card-image img, .announcement-card:hover .announcement-image img, .related-item:hover .related-image img { transform: scale(1.05); } .blog-card-image-placeholder, .popular-post-image-placeholder, .related-image-placeholder, .announcement-image-placeholder, .media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.45); font-size: 2.8rem; } .blog-card-category, .announcement-category, .detail-hero-category, .related-category { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: #eff6ff; color: #0369a1; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; width: fit-content; max-width: 100%; align-self: start; } .blog-card-category { position: absolute; top: 1rem; left: 1rem; background: rgba(255, 255, 255, 0.92); } .announcement-category.important, .detail-hero-category.important, .related-category.important { background: rgba(239, 68, 68, 0.12); color: #dc2626; } .announcement-category.general, .detail-hero-category.general, .related-category.general { background: rgba(16, 185, 129, 0.12); color: #059669; } .announcement-category.hr, .detail-hero-category.hr, .related-category.hr { background: rgba(245, 158, 11, 0.12); color: #d97706; } .announcement-category.it, .detail-hero-category.it, .related-category.it { background: rgba(14, 165, 233, 0.12); color: #0284c7; } .announcement-category.fresh, .detail-hero-category.fresh, .related-category.fresh { background: rgba(59, 130, 246, 0.12); color: #2563eb; } .announcement-category.urgent, .detail-hero-category.urgent, .related-category.urgent { background: rgba(234, 88, 12, 0.12); color: #ea580c; } .blog-card-content, .announcement-content { padding: 1.45rem; } .blog-card.featured .blog-card-content { padding: 1.9rem; } .blog-card-meta, .announcement-meta, .detail-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #64748b; font-size: 0.88rem; margin-bottom: 0.95rem; } .blog-card-meta span, .announcement-meta span, .detail-meta-item { display: inline-flex; align-items: center; gap: 0.45rem; } .blog-card-meta i, .announcement-meta i, .detail-meta-item i { color: #0369a1; } .blog-card-title, .announcement-title, .detail-main-title, .detail-hero-title { font-size: 1.35rem; line-height: 1.4; font-weight: 800; color: #0c4a6e; margin-bottom: 0.8rem; } .blog-card.featured .blog-card-title { font-size: 1.7rem; } .blog-card-title a, .announcement-title a, .popular-post-content a { color: inherit; text-decoration: none; } .blog-card-excerpt, .announcement-excerpt, .detail-summary, .detail-body p { color: #64748b; font-size: 0.96rem; line-height: 1.8; } .blog-card-excerpt, .announcement-excerpt { margin-bottom: 1rem; } .announcement-card { display: flex; background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid #dbeafe; box-shadow: 0 16px 38px -26px rgba(15, 23, 42, 0.2); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .announcement-card:hover { transform: translateY(-4px); box-shadow: 0 28px 44px -28px rgba(2, 132, 199, 0.32); border-color: #7dd3fc; } .announcements-list { display: flex; flex-direction: column; gap: 1.35rem; } .announcement-card.has-image .announcement-image { display: block; } .announcement-image { display: none; width: 280px; min-height: 200px; flex-shrink: 0; overflow: hidden; } .announcement-card:not(.has-image) { flex-direction: column; } .announcement-card:not(.has-image) .announcement-content { padding: 1.6rem 1.8rem; } .announcement-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eff6ff; } .announcement-attachments { display: flex; gap: 0.5rem; flex-wrap: wrap; } .attachment-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 0.85rem; background: #f8fafc; color: #475569; font-size: 0.8rem; font-weight: 600; transition: all 0.25s ease; } .attachment-badge:hover { background: #e0f2fe; color: #0369a1; } .attachment-badge.pdf i { color: #ef4444; } .attachment-badge.word i { color: #2563eb; } .attachment-badge.excel i { color: #16a34a; } .attachment-badge.powerpoint i { color: #ea580c; } .blog-card-link, .announcement-link, .back-btn { display: inline-flex; align-items: center; gap: 0.55rem; color: #0369a1; font-weight: 700; text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; } .blog-card-link:hover, .announcement-link:hover { gap: 0.8rem; } .load-more-wrapper { display: flex; justify-content: center; margin-top: 1.9rem; } .load-more-btn { border: 1px solid #0ea5e9; background: #fff; color: #0369a1; border-radius: 999px; padding: 0.9rem 1.5rem; font-family: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.2; display: inline-flex; align-items: center; gap: 0.6rem; box-shadow: 0 16px 28px -24px rgba(2, 132, 199, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .load-more-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 22px 32px -24px rgba(2, 132, 199, 0.4); } .load-more-btn:disabled { opacity: 0.7; cursor: default; } .sidebar { display: grid; gap: 1.5rem; } .sidebar-widget { padding: 1.5rem; } .sidebar-widget-title { font-size: 1.08rem; color: #0c4a6e; font-weight: 800; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.95rem; border-bottom: 1px solid #e2e8f0; } .search-form, .filter-search { display: flex; gap: 0.75rem; align-items: center; position: relative; z-index: 3; } .filter-search { min-width: min(100%, 320px); } .search-form input, .filter-search input { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 0.9rem; padding: 0.85rem 1rem; font-family: inherit; font-size: 0.95rem; line-height: 1.2; background: #fff; position: relative; z-index: 3; } .search-form button, .filter-search button { border: none; border-radius: 0.9rem; width: 52px; height: 52px; padding: 0; background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 28px -22px rgba(2, 132, 199, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; z-index: 3; } .search-form button:hover, .filter-search button:hover { transform: translateY(-1px); box-shadow: 0 20px 30px -22px rgba(2, 132, 199, 0.45); } .search-form button i, .filter-search button i { font-size: 0.95rem; line-height: 1; } .popular-post-list { display: grid; gap: 1rem; } .popular-post { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 0.9rem; text-decoration: none; } .popular-post-image { height: 82px; border-radius: 1rem; overflow: hidden; } .popular-post-content h4 { font-size: 0.96rem; font-weight: 800; color: #0c4a6e; line-height: 1.45; margin-bottom: 0.35rem; } .popular-post-date { font-size: 0.8rem; color: #64748b; } .filter-bar { background: #fff; border-radius: 1.25rem; padding: 1.25rem 1.4rem; margin-bottom: 1.75rem; box-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.18); border: 1px solid #dbeafe; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 4; } .filter-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; min-width: 0; position: relative; z-index: 3; } .filter-tab { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0.7rem 1.1rem; background: #fff; color: #475569; border: 1px solid #cbd5e1; border-radius: 999px; font-family: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: all 0.2s ease; } .filter-tab:hover { background: #f0f9ff; color: #0369a1; border-color: #7dd3fc; } .filter-tab.active { background: #0369a1; color: #fff; border-color: #0369a1; } .detail-main { overflow: hidden; } .detail-hero { position: relative; min-height: 350px; overflow: hidden; } .detail-hero.detail-hero-media-only { min-height: auto; height: auto; background: #fff; } .detail-hero-clean { border-bottom: 1px solid #eff6ff; } .detail-hero.detail-hero-media-only img { width: 100%; height: auto; object-fit: contain; display: block; } .detail-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; background: linear-gradient(to top, rgba(2, 6, 23, 0.75) 0%, transparent 100%); } .detail-hero-title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; line-height: 1.2; } .detail-header-no-image { padding: 1.6rem 2rem 1.35rem; border-bottom: 1px solid #e2e8f0; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .detail-header-plain { border-bottom: 1px solid #eff6ff; } .detail-header-stacked { display: grid; gap: 0.6rem; border-bottom: none; } .detail-meta-inline { padding: 0; border-bottom: none; margin: 0; gap: 0.8rem; } .detail-header-summary { margin: 0; font-size: 1.04rem; line-height: 1.75; color: #475569; } .detail-header-no-image .detail-hero-title { color: #0c4a6e; } .detail-meta { padding: 1.05rem 2rem; border-bottom: 1px solid #eff6ff; } .detail-body { padding: 1.55rem 2rem 2rem; } .detail-body > :first-child { margin-top: 0; } .detail-body h2, .detail-body h3, .detail-body h4 { color: #0c4a6e; font-weight: 800; margin: 1.8rem 0 0.85rem; } .detail-body img { max-width: 100%; height: auto; border-radius: 1rem; } .detail-body ul, .detail-body ol { margin: 1rem 0 1.5rem; padding-left: 1.35rem; color: #334155; line-height: 1.85; } .detail-body li { margin-bottom: 0.55rem; } .detail-body strong { color: #0c4a6e; font-weight: 700; } .detail-summary { margin-bottom: 1.3rem; font-size: 1rem; line-height: 1.9; } .detail-main .detail-summary { font-size: 1.05rem; line-height: 1.95; color: #475569; } .detail-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.75rem; } .detail-tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; border-radius: 999px; background: #eff6ff; color: #0369a1; font-size: 0.78rem; font-weight: 700; } .detail-alert { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.45rem; border-radius: 0 1rem 1rem 0; margin: 1.75rem 0; border-left: 4px solid transparent; } .detail-alert.danger { background: rgba(239, 68, 68, 0.08); border-left-color: #ef4444; } .detail-alert.info { background: rgba(3, 105, 161, 0.08); border-left-color: #0369a1; } .detail-alert.warning { background: rgba(245, 158, 11, 0.08); border-left-color: #f59e0b; } .detail-alert.success { background: rgba(16, 185, 129, 0.08); border-left-color: #10b981; } .detail-alert-icon { width: 44px; height: 44px; border-radius: 0.95rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; } .detail-alert.danger .detail-alert-icon { background: #ef4444; } .detail-alert.info .detail-alert-icon { background: #0369a1; } .detail-alert.warning .detail-alert-icon { background: #d97706; } .detail-alert.success .detail-alert-icon { background: #16a34a; } .detail-alert-content h4 { font-size: 1rem; font-weight: 800; color: #0c4a6e; margin: 0 0 0.45rem; } .detail-alert-content p { margin: 0; line-height: 1.8; } .detail-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .detail-gallery-item { position: relative; height: 180px; overflow: hidden; border-radius: 1.1rem; background: linear-gradient(135deg, #075985 0%, #22d3ee 100%); cursor: pointer; } .detail-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-gallery-item::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #fff; background: rgba(3, 105, 161, 0.42); opacity: 0; transition: opacity 0.2s ease; } .detail-gallery-item:hover::after { opacity: 1; } .detail-attachments { margin-top: 2rem; padding-top: 1.8rem; border-top: 2px solid #f1f5f9; } .detail-attachments-title { font-size: 1.15rem; font-weight: 800; color: #0c4a6e; display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; } .attachments-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .attachment-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid #dbeafe; border-radius: 1rem; text-decoration: none; color: inherit; background: #fff; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .attachment-item:hover { transform: translateY(-2px); border-color: #7dd3fc; box-shadow: 0 18px 32px -28px rgba(2, 132, 199, 0.45); } .attachment-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .attachment-icon.pdf { background: rgba(239, 68, 68, 0.12); color: #ef4444; } .attachment-icon.word { background: rgba(37, 99, 235, 0.12); color: #2563eb; } .attachment-icon.excel { background: rgba(22, 163, 74, 0.12); color: #16a34a; } .attachment-icon.powerpoint { background: rgba(234, 88, 12, 0.12); color: #ea580c; } .attachment-icon.file { background: rgba(71, 85, 105, 0.12); color: #475569; } .attachment-info { min-width: 0; flex: 1; } .attachment-info h5 { font-size: 0.95rem; font-weight: 800; color: #0c4a6e; margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-info span { color: #64748b; font-size: 0.82rem; } .attachment-download { width: 2.7rem; height: 2.7rem; border-radius: 0.9rem; background: #0369a1; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .detail-share { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.45rem 2rem 2rem; border-top: 1px solid #eff6ff; } .detail-share-label { font-weight: 700; color: #0c4a6e; display: inline-flex; align-items: center; gap: 0.55rem; } .detail-share-label i { color: #0369a1; } .detail-share-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .share-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.9rem; color: #fff; text-decoration: none; transition: transform 0.2s ease; } .share-btn:hover { transform: translateY(-2px); } .share-btn.facebook { background: #1877f2; } .share-btn.twitter { background: #1d9bf0; } .share-btn.linkedin { background: #0a66c2; } .share-btn.whatsapp { background: #25d366; } .share-btn.copy { background: #334155; } .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid #eff6ff; } .info-list li:last-child { border-bottom: none; } .info-list li span:first-child { color: #64748b; font-size: 0.9rem; } .info-list li span:last-child { font-weight: 700; color: #0c4a6e; font-size: 0.9rem; text-align: right; } .related-list { display: grid; gap: 1rem; } .related-item { display: flex; gap: 0.9rem; padding: 0.1rem 0; text-decoration: none; } .related-item.no-image { display: block; padding: 0.9rem 1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .related-image { width: 70px; height: 70px; border-radius: 0.9rem; overflow: hidden; flex-shrink: 0; } .related-content { min-width: 0; flex: 1; } .related-title { font-size: 0.94rem; font-weight: 700; color: #0c4a6e; line-height: 1.45; margin-bottom: 0.25rem; transition: color 0.2s ease; } .related-item:hover .related-title { color: #0369a1; } .related-date { font-size: 0.78rem; color: #64748b; } .back-btn { justify-content: center; width: 100%; padding: 0.95rem 1.2rem; border-radius: 1rem; background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%); color: #fff; box-shadow: 0 20px 40px -28px rgba(2, 132, 199, 0.55); } .sidebar-widget-back { padding: 1rem; } .back-btn:hover { color: #fff; transform: translateY(-2px); } .detail-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; } .detail-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 92px; padding: 1.05rem 1.2rem; background: #fff; border: 1px solid #dbeafe; border-radius: 1.3rem; text-decoration: none; color: inherit; box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease, border-color 0.2s ease; } .detail-nav-item:hover { transform: translateY(-2px); border-color: #7dd3fc; } .detail-nav-item.next { flex-direction: row-reverse; text-align: right; } .detail-nav-icon { width: 3rem; height: 3rem; border-radius: 1rem; background: #e0f2fe; color: #0369a1; display: grid; place-items: center; flex-shrink: 0; } .detail-nav-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .detail-nav-content span { display: block; color: #64748b; font-size: 0.8rem; margin-bottom: 0.3rem; } .detail-nav-content strong { color: #0c4a6e; font-size: 0.95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fade-card { opacity: 0; transform: translateY(24px); transition: opacity 0.45s ease, transform 0.45s ease; } .fade-card.is-visible { opacity: 1; transform: translateY(0); } .hidden-item { display: none !important; } .filtered-out { display: none !important; } .empty-state { padding: 2rem; text-align: center; color: #64748b; } .gallery-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(2, 6, 23, 0.86); padding: 2rem; } .gallery-lightbox.active { display: flex; } .gallery-lightbox-frame { position: relative; max-width: min(960px, 92vw); width: 100%; background: #fff; border-radius: 1.4rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.6); } .gallery-lightbox-media { background: #0f172a; } .gallery-lightbox-image { width: 100%; max-height: 70vh; object-fit: contain; background: #0f172a; } .gallery-lightbox-caption { padding: 1.25rem 1.4rem 1.5rem; background: #fff; } .gallery-lightbox-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: #0c4a6e; } .gallery-lightbox-description { margin: 0.45rem 0 0; color: #64748b; font-size: 0.95rem; line-height: 1.75; } .gallery-lightbox-close, .gallery-lightbox-nav { position: absolute; border: none; background: rgba(15, 23, 42, 0.7); color: #fff; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; } .gallery-lightbox-close { top: -1rem; right: -1rem; } .gallery-lightbox-nav.prev { left: -1.25rem; top: calc(50% - 23px); } .gallery-lightbox-nav.next { right: -1.25rem; top: calc(50% - 23px); } @media (max-width: 1100px) { .blog-layout, .detail-layout { grid-template-columns: 1fr; } .blog-card.featured { grid-template-columns: 1fr; } .blog-card.featured .blog-card-image { min-height: 240px; } .announcement-card { flex-direction: column; } .announcement-image { width: 100%; height: 220px; } } @media (max-width: 768px) { .blog-grid, .detail-gallery-grid, .attachments-grid, .detail-nav { grid-template-columns: 1fr; } .page-content { overflow-x: hidden; } .page-content .container { position: relative; z-index: 4; } .filter-bar, .search-form { flex-direction: column; align-items: stretch; padding: 1rem; } .filter-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; -ms-overflow-style: none; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-search { width: 100%; min-width: 0; max-width: 100%; flex-direction: row; align-items: center; gap: 0.55rem; } .filter-search input { flex: 1 1 auto; } .filter-search button { width: 48px; height: 48px; } .filter-tab, .filter-search input, .filter-search button { pointer-events: auto; touch-action: manipulation; } .detail-body, .detail-meta, .detail-header-no-image, .detail-share, .detail-hero-overlay { padding-left: 1.25rem; padding-right: 1.25rem; } .announcement-footer { flex-direction: column; align-items: stretch; } .gallery-lightbox-close, .gallery-lightbox-nav.prev, .gallery-lightbox-nav.next { position: static; margin-top: 1rem; } .gallery-lightbox-frame { display: flex; flex-direction: column; align-items: center; } } .page-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 65%, #0ea5e9 100%); color: #fff; padding: 4rem 0 4.4rem; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.14), transparent 35%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, 0.18), transparent 30%); } .page-hero .container { position: relative; z-index: 1; text-align: center; } .page-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #67e8f9; font-size: 0.86rem; font-weight: 700; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 0.9rem; color: #fff; } .page-hero p { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; } .page-content { padding: 3rem 0 5rem; background: #f1f5f9; } .content-breadcrumb.org-page-breadcrumb, .org-page-breadcrumb { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 15px 0; } .org-page-breadcrumb .breadcrumb-list, .org-page-breadcrumb .content-breadcrumb-list { display: flex; align-items: center; gap: 10px; list-style: none; font-size: 0.9rem; flex-wrap: wrap; margin: 0; padding: 0; } .org-page-breadcrumb .breadcrumb-list li, .org-page-breadcrumb .content-breadcrumb-list li { display: flex; align-items: center; gap: 10px; } .org-page-breadcrumb .breadcrumb-list a, .org-page-breadcrumb .content-breadcrumb-list a { color: var(--gray-500); text-decoration: none; transition: color 0.3s ease; } .org-page-breadcrumb .breadcrumb-list a:hover, .org-page-breadcrumb .content-breadcrumb-list a:hover { color: var(--primary); } .org-page-breadcrumb .breadcrumb-list .separator, .org-page-breadcrumb .content-breadcrumb-list .separator { color: var(--gray-400); font-size: 0.8rem; } .org-page-breadcrumb .breadcrumb-list .current, .org-page-breadcrumb .content-breadcrumb-list .current { color: var(--primary); font-weight: 600; } .org-chart-container { background: var(--white); border-radius: 24px; padding: 40px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .org-top-level { text-align: center; margin-bottom: 22px; } .org-top-card { display: inline-block; background: var(--gradient-dark); color: #fff; padding: 20px 50px; border-radius: 16px; box-shadow: var(--shadow-lg); } .org-top-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 0 0 5px; } .org-top-card span { font-size: 0.9rem; opacity: 0.82; } .org-connector { display: flex; justify-content: center; margin: 20px 0; } .org-connector-line { width: 3px; height: 40px; background: var(--gray-300); } .org-tree { max-width: 900px; margin: 0 auto; } .org-tree-outline { max-width: 1120px; margin: 0 auto; } .org-outline-surface { background: #fff; border: 1px solid #d9e4ef; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 48px -34px rgba(15, 23, 42, 0.18); } .org-outline-node + .org-outline-node { border-top: 1px solid #e6edf5; } .org-outline-row { min-height: 66px; display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: #fff; transition: background 0.25s ease, box-shadow 0.25s ease; position: relative; } .org-outline-row:hover { background: #f9fcff; } .org-outline-row.is-root { background: linear-gradient(90deg, rgba(14, 116, 144, 0.05) 0%, rgba(255, 255, 255, 1) 22%); } .org-outline-row.is-toggle { cursor: pointer; } .org-outline-button, .org-outline-leaf { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .org-outline-button { border: 0; background: transparent; color: var(--primary-dark); cursor: pointer; padding: 0; font-size: 0.95rem; } .org-outline-button i, .org-outline-leaf i { transition: transform 0.25s ease, opacity 0.25s ease; } .org-outline-row.is-open .org-outline-button i { transform: rotate(90deg); } .org-outline-leaf { color: var(--primary-dark); opacity: 0.75; } .org-outline-link { text-decoration: none; color: var(--dark); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; line-height: 1.45; min-width: 0; } .org-outline-link strong { font-size: 1rem; font-weight: 800; color: var(--primary-dark); } .org-outline-link span { color: var(--dark); font-weight: 600; } .org-outline-children { display: none; background: #fff; } .org-outline-row.is-open + .org-outline-children { display: block; } .org-outline-node .org-outline-node { border-top: 1px solid #edf3f8; } .org-outline-node .org-outline-node .org-outline-row::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: #d9e4ef; opacity: 0.9; } .org-outline-node.depth-0 > .org-outline-row::before { display: none; } .org-branch { margin-bottom: 10px; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; background: var(--white); } .org-branch:hover { border-color: var(--primary-light); } .org-branch.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.1); } .org-branch-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 25px; background: var(--white); cursor: pointer; transition: all 0.3s ease; user-select: none; gap: 20px; } .org-branch-header:hover { background: var(--light); } .org-branch.active .org-branch-header { background: var(--primary); color: #fff; } .org-branch-info { display: flex; align-items: center; gap: 15px; min-width: 0; } .org-branch-icon { width: 45px; height: 45px; background: var(--light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.2rem; transition: all 0.3s ease; flex-shrink: 0; } .org-branch.active .org-branch-icon { background: rgba(255, 255, 255, 0.2); color: #fff; } .org-branch-title h4 { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dark); margin: 0 0 2px; transition: color 0.3s ease; } .org-branch.active .org-branch-title h4 { color: #fff; } .org-branch-title span { font-size: 0.85rem; color: var(--gray-500); transition: color 0.3s ease; } .org-branch.active .org-branch-title span { color: rgba(255, 255, 255, 0.8); } .org-branch-toggle { width: 30px; height: 30px; background: var(--gray-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 0.8rem; transition: all 0.3s ease; flex-shrink: 0; } .org-branch.active .org-branch-toggle { background: rgba(255, 255, 255, 0.2); color: #fff; transform: rotate(180deg); } .org-branch-content { display: none; padding: 0 25px 20px; background: var(--white); } .org-branch.active .org-branch-content { display: block; } .org-members { list-style: none; padding: 15px 0 0; margin: 0; border-top: 1px solid var(--gray-100); } .org-member { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-bottom: 8px; background: var(--gray-50); border-radius: 10px; transition: all 0.3s ease; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; color: inherit; } .org-member:hover { background: var(--light); border-left-color: var(--primary); transform: translateX(5px); } .org-member-root { border-left-color: var(--primary); background: linear-gradient(90deg, rgba(2, 132, 199, 0.08) 0%, rgba(255, 255, 255, 1) 28%); } .org-member-avatar { width: 40px; height: 40px; background: var(--gradient-main); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .org-member-info h5 { font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--dark); margin: 0 0 2px; } .org-member-info span { font-size: 0.8rem; color: var(--gray-500); } .org-sub-branch { margin-top: 15px; margin-left: 20px; padding-left: 20px; border-left: 2px solid var(--gray-200); } .org-sub-branch-header { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--light); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 8px; user-select: none; } .org-sub-branch-header:hover { background: rgba(3, 105, 161, 0.1); } .org-sub-branch-header.active { background: var(--primary); color: #fff; } .org-sub-branch-header i { font-size: 0.8rem; transition: transform 0.3s ease; } .org-sub-branch-header.active i { transform: rotate(90deg); } .org-sub-branch-header h5 { font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600; margin: 0; flex: 1; } .org-sub-branch-content { display: none; padding-left: 15px; } .org-sub-branch-header.active + .org-sub-branch-content { display: block; } .org-person-branch { margin-top: 18px; } .org-person-branch-shell { display: grid; gap: 10px; } .org-member-branch-card { margin-bottom: 0; border-left-width: 0; box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.32); } .org-member-branch-card:hover { transform: translateY(-2px); border-left-color: transparent; } .org-person-branch-toggle { background: #eef6fd; border: 1px solid rgba(191, 219, 254, 0.9); margin-left: 12px; } .org-person-branch-toggle:hover { background: rgba(219, 234, 254, 0.95); } .org-person-branch-toggle h5 { font-size: 0.92rem; } .org-visual { margin-top: 50px; padding-top: 40px; border-top: 2px solid var(--gray-100); } .org-visual-title { text-align: center; margin-bottom: 30px; } .org-visual-title h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; } .org-visual-title h3 i { color: var(--primary); } .org-chart-visual { display: flex; flex-direction: column; align-items: center; gap: 12px; } .org-level { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 0; position: relative; } .org-level::before { content: ''; position: absolute; top: -18px; left: 50%; width: 2px; height: 18px; background: var(--gray-300); } .org-level:first-child::before { display: none; } .org-card { background: var(--white); border: 2px solid var(--gray-200); border-radius: 12px; padding: 15px 25px; text-align: center; min-width: 180px; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 10px 22px -20px rgba(15, 23, 42, 0.35); } .org-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: var(--shadow-lg); } .org-card h4 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; margin: 0 0 3px; color: var(--dark); } .org-card span { font-size: 0.8rem; color: var(--gray-500); } .org-level:not(:last-child)::after { content: ''; width: 2px; height: 22px; background: rgba(148, 163, 184, 0.4); margin: 0 auto; display: block; } .organization-empty { text-align: center; color: var(--gray-500); padding: 40px 20px; } .organization-profile-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 65%, #0ea5e9 100%); padding: 4rem 0 4.4rem; position: relative; overflow: hidden; } .organization-profile-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.14), transparent 35%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, 0.18), transparent 30%); } .profile-hero-decoration { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%); top: -150px; right: -150px; } .organization-profile-hero .container { position: relative; z-index: 2; text-align: center; } .organization-profile-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #67e8f9; font-size: 0.86rem; font-weight: 700; margin-bottom: 1rem; } .organization-profile-hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: white; margin-bottom: 0.9rem; } .organization-profile-hero .subtitle { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; font-weight: 600; } .organization-profile-content { margin-top: 0; padding: 3rem 0 5rem; position: relative; background: linear-gradient(180deg, #f7fbff 0%, #edf5fa 100%); } .organization-profile-grid { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; } .organization-profile-sidebar { position: sticky; top: 100px; } .profile-card { background: var(--white); border-radius: 28px; overflow: hidden; box-shadow: 0 28px 50px -34px rgba(15, 23, 42, 0.34); border: 1px solid var(--gray-200); } .profile-image { height: 360px; background: var(--gradient-main); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .profile-image::before, .profile-image::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); } .profile-image::before { width: 148px; height: 148px; top: 40px; right: 36px; } .profile-image::after { width: 190px; height: 190px; bottom: -72px; left: -52px; } .profile-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 2; } .profile-image-placeholder { width: 168px; height: 168px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-size: 4.5rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .profile-badge { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--primary); padding: 9px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; box-shadow: var(--shadow); } .profile-info { padding: 34px 30px 30px; text-align: center; } .profile-info h2 { font-family: 'Outfit', sans-serif; color: var(--dark); font-size: 1.7rem; font-weight: 800; margin-bottom: 8px; } .profile-info .position { color: var(--primary); font-weight: 700; font-size: 1.02rem; line-height: 1.5; margin: 0 auto 22px; max-width: 250px; } .profile-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .profile-social a { width: 46px; height: 46px; border-radius: 50%; background: var(--light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .profile-social a:hover { transform: translateY(-3px); background: var(--gradient-main); color: var(--white); } .profile-contact { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--gray-200); text-align: left; } .profile-contact-item { display: flex; gap: 12px; color: var(--gray-600); font-size: 0.92rem; align-items: flex-start; } .profile-contact-item i { width: 38px; height: 38px; border-radius: 14px; background: #eef8ff; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-contact-item span { line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; flex: 1; min-width: 0; } .organization-profile-main { display: flex; flex-direction: column; gap: 30px; } .content-card { background: var(--white); border-radius: 20px; padding: 35px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .content-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--gray-100); } .content-card-icon { width: 50px; height: 50px; background: var(--gradient-main); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.3rem; flex-shrink: 0; } .content-card-header h3 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--dark); margin: 0; } .message-content { position: relative; padding-left: 30px; } .message-content::before { content: '"'; position: absolute; top: -20px; left: -10px; font-size: 6rem; color: var(--light); font-family: Georgia, serif; line-height: 1; } .organization-richtext, .organization-richtext p, .biography-content p { color: var(--gray-600); font-size: 1.05rem; line-height: 1.9; margin-bottom: 20px; } .organization-richtext p:last-child, .biography-content p:last-child { margin-bottom: 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-card { text-align: center; padding: 25px 15px; background: var(--light); border-radius: 16px; transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .stat-card-icon { width: 60px; height: 60px; background: var(--gradient-main); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; margin: 0 auto 16px; } .stat-card-number { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--dark); line-height: 1; margin-bottom: 8px; } .stat-card-label { color: var(--primary); font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; } .organization-stat-description { color: var(--gray-500); font-size: 0.86rem; line-height: 1.6; margin: 0; } .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--gray-200); } .timeline-item { position: relative; padding-bottom: 30px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -26px; top: 5px; width: 14px; height: 14px; background: var(--gradient-main); border-radius: 50%; border: 3px solid var(--white); box-shadow: var(--shadow); } .timeline-date { display: inline-block; background: var(--light); color: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; } .timeline-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 5px; } .timeline-subtitle { color: var(--gray-500); font-size: 0.95rem; line-height: 1.7; margin: 0; } .organization-related-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .organization-related-list { display: grid; gap: 12px; } .organization-related-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-radius: 16px; padding: 12px; background: #f8fbfe; border: 1px solid rgba(203, 213, 225, 0.8); transition: transform 0.3s ease, border-color 0.3s ease; } .organization-related-link:hover { transform: translateY(-2px); border-color: rgba(3, 105, 161, 0.22); } .organization-related-link img, .organization-related-placeholder { width: 58px; height: 58px; border-radius: 18px; object-fit: cover; flex-shrink: 0; } .organization-related-placeholder { display: flex; align-items: center; justify-content: center; background: var(--gradient-main); color: var(--white); font-weight: 800; } .organization-related-link strong { display: block; color: var(--dark); font-size: 0.92rem; margin-bottom: 3px; } .organization-related-link span { display: block; color: var(--gray-500); font-size: 0.82rem; } .organization-empty { text-align: center; color: var(--gray-500); padding: 40px 20px; } @media (max-width: 992px) { .org-chart-container { padding: 26px; } .organization-profile-grid { grid-template-columns: 1fr; } .organization-profile-sidebar { position: static; max-width: 380px; margin: 0 auto; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-content, .organization-profile-content { padding: 2.5rem 0 4.4rem; } .org-chart-container, .content-card { padding: 20px; } .org-branch-header { padding: 15px 18px; } .org-level { flex-direction: column; align-items: center; } .org-outline-row { padding: 12px 16px; } .org-outline-link strong, .org-outline-link span { font-size: 0.95rem; } .page-hero h1 { font-size: 2rem; } .organization-profile-hero h1 { font-size: 2rem; } .content-card-header h3 { font-size: 1.2rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .page-hero h1 { font-size: 1.6rem; } .organization-profile-hero { padding: 3rem 0 3.25rem; } .organization-profile-hero h1 { font-size: 1.6rem; } .org-chart-header h2 { font-size: 1.4rem; } .org-branch-icon { width: 38px; height: 38px; font-size: 1rem; } .org-branch-title h4 { font-size: 1rem; } .profile-image { height: 320px; } .profile-info h2 { font-size: 1.5rem; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; } .stat-card { padding: 20px 10px; } .stat-card-number { font-size: 1.6rem; } .message-content { padding-left: 0; } .message-content::before { display: none; } } .content-breadcrumb { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 14px 0; } .content-breadcrumb-list { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; } .content-breadcrumb-list a { text-decoration: none; color: var(--gray-500); transition: color 0.2s ease; } .content-breadcrumb-list a:hover { color: var(--primary); } .content-breadcrumb-list .current { color: var(--primary); font-weight: 600; } .page-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 65%, #0ea5e9 100%); color: #fff; padding: 4rem 0 4.4rem; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.14), transparent 35%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, 0.18), transparent 30%); } .page-hero .container { position: relative; z-index: 1; text-align: center; } .page-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #67e8f9; font-size: 0.86rem; font-weight: 700; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 0.9rem; color: #fff; line-height: 1.18; } .page-hero p { max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; } .page-content { padding: 50px 0 90px; background: var(--gray-100); } .legal-wrapper { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; align-items: start; } .legal-sidebar, .legal-content { background: var(--white); border-radius: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .legal-sidebar { position: sticky; top: 110px; padding: 26px; } .legal-sidebar-title { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 2px solid var(--gray-100); margin-bottom: 16px; font-family: 'Outfit', sans-serif; font-size: 1.06rem; font-weight: 700; color: var(--dark); } .legal-sidebar-title i { color: var(--primary); } .legal-nav { list-style: none; display: grid; gap: 6px; } .legal-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; color: var(--gray-600); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: all 0.25s ease; } .legal-nav a:hover, .legal-nav a.active { background: var(--light); color: var(--primary); } .legal-nav a i { width: 18px; color: var(--primary); text-align: center; } .legal-content { padding: 40px; } .legal-header { margin-bottom: 26px; padding-bottom: 24px; border-bottom: 2px solid var(--gray-100); } .legal-header h1 { display: flex; align-items: flex-start; gap: 15px; font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 2.5vw, 2.15rem); font-weight: 800; color: var(--dark); margin-bottom: 15px; line-height: 1.22; } .legal-header h1 i { color: var(--primary); font-size: 1.2rem; margin-top: 6px; } .legal-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; color: var(--gray-500); } .legal-meta span { display: inline-flex; align-items: center; gap: 8px; } .legal-meta i { color: var(--primary); } .page-featured-media { margin-bottom: 28px; border-radius: 20px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); } .page-featured-media img { width: 100%; display: block; max-height: 420px; object-fit: cover; } .legal-body { color: var(--gray-600); font-size: 1rem; line-height: 1.9; } .legal-body > :first-child { margin-top: 0; } .legal-body p { margin-bottom: 18px; } .legal-body h2 { font-family: 'Outfit', sans-serif; font-size: 1.38rem; font-weight: 700; color: var(--dark); margin: 34px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--gray-100); } .legal-body h3 { font-family: 'Outfit', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--dark); margin: 22px 0 12px; } .legal-body ul, .legal-body ol { margin: 20px 0; padding-left: 0; list-style: none; } .legal-body ul li, .legal-body ol li { padding: 12px 0 12px 35px; position: relative; border-bottom: 1px solid var(--gray-100); } .legal-body ul li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--success); font-size: 0.95rem; } .legal-body ol { counter-reset: page-list; } .legal-body ol li { counter-increment: page-list; } .legal-body ol li::before { content: counter(page-list); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700; } .legal-body table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: 0.92rem; overflow: hidden; border-radius: 16px; } .legal-body th, .legal-body td { padding: 14px 16px; text-align: left; border: 1px solid var(--gray-200); } .legal-body th { background: var(--light); color: var(--dark); font-weight: 700; } .legal-body img { max-width: 100%; border-radius: 18px; margin: 16px 0; box-shadow: var(--shadow); } .page-special-boxes, .page-module-section { margin-top: 36px; } .page-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .page-action-buttons--after-hero { margin: -6px 0 22px; } .page-action-buttons--after-content { margin-top: 20px; } .page-action-buttons--bottom { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--gray-200); } .page-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1px solid transparent; transition: all 0.2s ease; } .page-action-button:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .page-action-button--solid.page-action-button--primary { background: var(--primary); color: #fff; } .page-action-button--solid.page-action-button--secondary { background: var(--gray-500); color: #fff; } .page-action-button--solid.page-action-button--success { background: var(--success); color: #fff; } .page-action-button--solid.page-action-button--warning { background: var(--warning); color: #fff; } .page-action-button--solid.page-action-button--danger { background: var(--danger); color: #fff; } .page-action-button--solid.page-action-button--dark { background: var(--dark); color: #fff; } .page-action-button--solid.page-action-button--light { background: var(--light); color: var(--dark); border-color: var(--gray-200); } .page-action-button--outline.page-action-button--primary { color: var(--primary); border-color: var(--primary); } .page-action-button--outline.page-action-button--secondary { color: var(--gray-500); border-color: var(--gray-400); } .page-action-button--outline.page-action-button--success { color: var(--success); border-color: var(--success); } .page-action-button--outline.page-action-button--warning { color: var(--warning); border-color: var(--warning); } .page-action-button--outline.page-action-button--danger { color: var(--danger); border-color: var(--danger); } .page-action-button--outline.page-action-button--dark { color: var(--dark); border-color: var(--dark); } .page-action-button--outline.page-action-button--light { color: var(--gray-500); border-color: var(--gray-300); } .page-action-button--soft.page-action-button--primary { color: var(--primary); background: rgba(3, 105, 161, 0.11); } .page-action-button--soft.page-action-button--secondary { color: var(--gray-600); background: rgba(100, 116, 139, 0.14); } .page-action-button--soft.page-action-button--success { color: var(--success); background: rgba(16, 185, 129, 0.12); } .page-action-button--soft.page-action-button--warning { color: #b45309; background: rgba(245, 158, 11, 0.14); } .page-action-button--soft.page-action-button--danger { color: var(--danger); background: rgba(239, 68, 68, 0.12); } .page-action-button--soft.page-action-button--dark { color: var(--dark); background: rgba(15, 23, 42, 0.12); } .page-action-button--soft.page-action-button--light { color: var(--gray-700); background: rgba(241, 245, 249, 0.9); border: 1px solid var(--gray-200); } .page-special-boxes { display: grid; gap: 16px; } .page-special-box { display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 22px 24px; border-radius: 18px; border-left: 4px solid var(--primary); background: var(--light); } .page-special-box-icon { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-main); color: #fff; font-size: 1.2rem; } .page-special-box-content h4 { font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: var(--dark); margin-bottom: 8px; } .page-special-box-content p { margin: 0; color: var(--gray-600); line-height: 1.75; } .page-special-box--warning { background: rgba(245, 158, 11, 0.08); border-left-color: var(--warning); } .page-special-box--warning .page-special-box-icon { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); } .page-special-box--danger { background: rgba(239, 68, 68, 0.08); border-left-color: var(--danger); } .page-special-box--danger .page-special-box-icon { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); } .page-special-box--success { background: rgba(16, 185, 129, 0.08); border-left-color: var(--success); } .page-special-box--success .page-special-box-icon { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); } .page-module-section h2 { display: flex; align-items: center; gap: 12px; font-family: 'Outfit', sans-serif; font-size: 1.38rem; font-weight: 700; color: var(--dark); margin-bottom: 18px; } .page-module-section h2 i { color: var(--primary); } .page-feature-grid { display: grid; gap: 18px; } .page-feature-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 18px; border: 2px solid var(--gray-200); background: var(--white); transition: all 0.25s ease; } .page-feature-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } .page-feature-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; } .page-feature-content h4 { font-family: 'Outfit', sans-serif; color: var(--dark); font-size: 1.02rem; margin-bottom: 8px; } .page-feature-content p { margin: 0; color: var(--gray-500); line-height: 1.75; } .page-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .page-gallery-item { position: relative; border: none; border-radius: 18px; overflow: hidden; background: var(--gray-100); cursor: pointer; padding: 0; min-height: 220px; box-shadow: var(--shadow); } .page-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-gallery-overlay { position: absolute; inset: 0; background: rgba(8, 47, 73, 0.58); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.25s ease; } .page-gallery-item:hover .page-gallery-overlay { opacity: 1; } .page-gallery-overlay i { font-size: 1.8rem; } .page-document-grid { display: grid; gap: 16px; } .page-document-card { display: grid; grid-template-columns: 58px 1fr 42px; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--gray-200); text-decoration: none; transition: all 0.25s ease; } .page-document-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); } .page-document-icon { width: 58px; height: 58px; border-radius: 16px; background: var(--light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; } .page-document-content h4 { font-family: 'Outfit', sans-serif; color: var(--dark); font-size: 1rem; margin-bottom: 6px; } .page-document-content p { color: var(--gray-500); margin: 0 0 4px; font-size: 0.92rem; } .page-document-content span { color: var(--gray-400); font-size: 0.82rem; } .page-document-action { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-main); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .page-faq-list { display: grid; gap: 14px; } .page-faq-item { border: 1px solid var(--gray-200); border-radius: 16px; background: var(--white); overflow: hidden; } .page-faq-question { width: 100%; border: none; background: transparent; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--dark); cursor: pointer; text-align: left; } .page-faq-question i { color: var(--primary); transition: transform 0.25s ease; } .page-faq-item.is-open .page-faq-question i { transform: rotate(180deg); } .page-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .page-faq-answer-inner { padding: 0 20px 20px; color: var(--gray-600); line-height: 1.8; } .page-gallery-lightbox { position: fixed; inset: 0; background: rgba(8, 47, 73, 0.88); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.28s ease; z-index: 2100; padding: 26px; } .page-gallery-lightbox.active { opacity: 1; visibility: visible; } .page-gallery-lightbox-frame { width: 100%; max-width: 960px; border-radius: 22px; overflow: hidden; position: relative; background: var(--white); box-shadow: var(--shadow-xl); } .page-gallery-lightbox-media { display: flex; align-items: center; justify-content: center; background: #0b2940; max-height: 70vh; } .page-gallery-lightbox-image { max-width: 100%; max-height: 70vh; object-fit: contain; } .page-gallery-lightbox-caption { padding: 22px 24px; } .page-gallery-lightbox-title { font-family: 'Outfit', sans-serif; font-size: 1.18rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; } .page-gallery-lightbox-description { color: var(--gray-600); margin: 0; } .page-gallery-lightbox-close, .page-gallery-lightbox-nav { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(3, 105, 161, 0.92); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } .page-gallery-lightbox-close { top: 16px; right: 16px; } .page-gallery-lightbox-nav.prev { top: 50%; left: 18px; transform: translateY(-50%); } .page-gallery-lightbox-nav.next { top: 50%; right: 18px; transform: translateY(-50%); } .fade-card { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-card.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1100px) { .legal-wrapper { grid-template-columns: 1fr; } .legal-sidebar { position: static; } } @media (max-width: 768px) { .page-hero { padding: 3rem 0 3.2rem; } .legal-content, .legal-sidebar { padding: 22px; } .legal-header h1 { font-size: 1.5rem; } .page-special-box, .page-document-card, .page-feature-card { grid-template-columns: 1fr; } .page-document-card { display: block; } .page-document-icon, .page-document-action { margin-bottom: 12px; } .page-gallery-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .page-hero h1 { font-size: 1.75rem; } .legal-meta { flex-direction: column; gap: 10px; } } .content-breadcrumb { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 14px 0; } .content-breadcrumb-list { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; } .content-breadcrumb-list a { text-decoration: none; color: var(--gray-500); transition: color 0.2s; } .content-breadcrumb-list a:hover { color: var(--primary); } .content-breadcrumb-list .current { color: var(--primary); font-weight: 600; } .page-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 65%, #0ea5e9 100%); color: #fff; padding: 4rem 0 4.4rem; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.14), transparent 35%), radial-gradient(circle at 80% 0%, rgba(56, 189, 248, 0.18), transparent 30%); } .page-hero .container { position: relative; z-index: 1; } .page-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #67e8f9; font-size: 0.86rem; font-weight: 700; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 0.9rem; color: #fff; } .page-hero p { max-width: 720px; margin: 0 auto; color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; } .page-hero.page-hero-centered { text-align: center; } .page-content { padding: 50px 0 90px; background: var(--gray-100); } .project-filter { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-bottom: 40px; } .project-filter-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; width: 100%; } .project-filter-label { font-weight: 700; color: var(--gray-600); font-size: 0.9rem; } .filter-tab { padding: 10px 22px; background: var(--white); border: 2px solid var(--gray-200); border-radius: 999px; color: var(--gray-600); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.25s ease; font-family: inherit; } .filter-tab:hover { border-color: var(--primary); color: var(--primary); } .filter-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; } .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .project-card { background: var(--white); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--gray-200); transition: transform 0.35s ease, box-shadow 0.35s ease; } .project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .project-card-image { position: relative; height: 220px; background: var(--gradient-main); overflow: hidden; display: block; text-decoration: none; } .project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .project-card:hover .project-card-image img { transform: scale(1.04); } .project-card-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.4); } .project-card-category { position: absolute; top: 14px; left: 14px; padding: 6px 14px; background: var(--white); color: var(--primary); border-radius: 999px; font-size: 0.75rem; font-weight: 600; box-shadow: var(--shadow); z-index: 2; } .project-card-status { position: absolute; top: 14px; right: 14px; padding: 6px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: #fff; z-index: 2; } .project-card-status.completed { background: var(--success); } .project-card-status.ongoing { background: var(--warning); } .project-card-status.planned { background: var(--primary); } .project-card-status.canceled { background: var(--danger); } .project-card-content { padding: 24px; } .project-card-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--gray-500); margin-bottom: 10px; } .project-card-meta i { color: var(--primary); } .project-card-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 12px; } .project-card-content h3 a { color: inherit; text-decoration: none; } .project-card-content h3 a:hover { color: var(--primary); } .project-card-excerpt { color: var(--gray-500); font-size: 0.9rem; line-height: 1.7; margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .project-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--gray-100); gap: 12px; } .project-card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; text-decoration: none; transition: gap 0.2s ease; } .project-card-link:hover { gap: 12px; } .project-progress { display: flex; align-items: center; gap: 8px; } .project-progress-bar { width: 80px; height: 6px; background: var(--gray-200); border-radius: 6px; overflow: hidden; } .project-progress-fill { height: 100%; background: var(--gradient-main); border-radius: 6px; } .project-progress-text { font-size: 0.8rem; font-weight: 600; color: var(--primary); } .load-more-wrapper { text-align: center; margin-top: 50px; } .load-more-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--white); color: var(--primary); border-radius: 12px; font-weight: 600; font-size: 1rem; border: 2px solid var(--primary); cursor: pointer; transition: all 0.25s ease; } .load-more-btn:hover { background: var(--primary); color: #fff; } .content-layout { display: grid; grid-template-columns: 1fr 350px; gap: 40px; align-items: start; } .project-detail { background: var(--white); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .project-detail-image { height: 380px; position: relative; background: var(--gradient-main); overflow: hidden; } .project-detail-image img { width: 100%; height: 100%; object-fit: cover; } .project-detail-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: rgba(255, 255, 255, 0.35); } .project-detail-badges { position: absolute; top: 20px; left: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .project-badge { padding: 7px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow); } .project-badge.category { background: var(--white); color: var(--primary); } .project-badge.status { color: #fff; background: var(--success); } .project-badge.status.ongoing { background: var(--warning); } .project-badge.status.planned { background: var(--primary); } .project-badge.status.canceled { background: var(--danger); } .project-detail-content { padding: 40px; } .project-detail-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; font-size: 0.92rem; color: var(--gray-500); } .project-meta-item { display: flex; align-items: center; gap: 8px; } .project-meta-item i { color: var(--primary); width: 18px; } .project-detail-title { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--dark); margin-bottom: 26px; line-height: 1.28; letter-spacing: -0.02em; } .project-progress-section { background: var(--light); border-radius: 16px; padding: 25px; margin-bottom: 30px; } .project-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .project-progress-header h4 { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 8px; } .project-progress-header h4 i { color: var(--primary); } .project-progress-percent { font-size: 1.4rem; font-weight: 800; color: var(--primary); } .project-progress-bar-lg { width: 100%; height: 10px; background: var(--gray-200); border-radius: 6px; overflow: hidden; } .project-progress-fill-lg { height: 100%; background: var(--gradient-main); border-radius: 6px; } .project-detail-body { color: var(--gray-600); font-size: 1.05rem; line-height: 1.9; } .project-detail-body > :first-child { margin-top: 0; } .project-detail-body h2 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); margin: 36px 0 20px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; } .project-detail-body h2 i { color: var(--primary); font-size: 1.1rem; } .project-detail-body p { margin-bottom: 20px; } .project-detail-body img { max-width: 100%; border-radius: 16px; box-shadow: var(--shadow); margin: 18px 0; } .project-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 30px 0 32px; } .project-stat-card { background: var(--light); border-radius: 16px; padding: 24px 18px; text-align: center; border: 1px solid var(--gray-100); transition: transform 0.28s ease, box-shadow 0.28s ease; } .project-stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .project-stat-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--gradient-main); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; font-size: 1.15rem; } .project-stat-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--dark); line-height: 1.1; } .project-stat-label { font-size: 0.86rem; color: var(--gray-500); margin-top: 6px; } .project-goal-list { list-style: none; display: grid; gap: 0; margin: 22px 0 34px; padding: 0; } .project-goal-list li { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); } .project-goal-list li i { color: var(--success); } .project-phase-list { display: grid; gap: 24px; margin: 28px 0 34px; } .project-phase-item { position: relative; display: flex; gap: 20px; } .project-phase-item:not(:last-child)::before { content: ''; position: absolute; left: 20px; top: 42px; bottom: -24px; width: 2px; background: var(--gray-200); } .project-phase-icon { width: 42px; height: 42px; border-radius: 999px; background: var(--gradient-main); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; position: relative; z-index: 1; box-shadow: var(--shadow); } .project-phase-content { flex: 1; background: var(--light); border-radius: 14px; padding: 20px 22px; } .project-phase-period { font-size: 0.82rem; font-weight: 700; color: var(--primary); display: inline-block; margin-bottom: 6px; } .project-phase-content h4 { font-family: 'Outfit', sans-serif; font-size: 1.02rem; margin-bottom: 6px; color: var(--dark); } .project-phase-content p { margin-bottom: 0; font-size: 0.95rem; color: var(--gray-500); } .project-results { color: var(--gray-600); line-height: 1.9; padding-top: 4px; } .project-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 12px; } .project-gallery-item { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: #f8fafc; border: 1px solid var(--gray-200); cursor: pointer; transition: transform 0.25s ease; padding: 8px; } .project-gallery-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; } .project-gallery-item:hover { transform: scale(1.03); } .project-gallery-overlay { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; background: rgba(3, 105, 161, 0.65); opacity: 0; transition: opacity 0.25s ease; border-radius: 10px; } .project-gallery-item:hover .project-gallery-overlay { opacity: 1; } .project-gallery-overlay i { font-size: 1.8rem; color: #fff; } .project-detail-footer { margin-top: 36px; padding-top: 28px; border-top: 2px solid var(--gray-100); } .project-share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .project-share-label { font-weight: 600; color: var(--dark); display: inline-flex; align-items: center; gap: 8px; } .project-share-label i { color: var(--primary); } .share-buttons { display: flex; gap: 10px; } .share-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform 0.2s ease; } .share-btn:hover { transform: translateY(-3px); } .share-btn.facebook { background: #1877f2; } .share-btn.twitter { background: #1da1f2; } .share-btn.linkedin { background: #0a66c2; } .share-btn.whatsapp { background: #25d366; } .sidebar { position: sticky; top: 110px; } .sidebar-widget { background: var(--white); border-radius: 20px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .sidebar-widget-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--gray-100); display: flex; align-items: center; gap: 8px; } .sidebar-widget-title i { color: var(--primary); } .project-info-list { list-style: none; } .project-info-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); } .project-info-item:last-child { border-bottom: none; padding-bottom: 0; } .project-info-label { color: var(--gray-500); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; } .project-info-label i { color: var(--primary); width: 18px; } .project-info-value { font-weight: 600; color: var(--dark); font-size: 0.9rem; } .related-project { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); } .related-project:last-child { border-bottom: none; padding-bottom: 0; } .related-project-image { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--gradient-main); flex-shrink: 0; } .related-project-image img { width: 100%; height: 100%; object-fit: cover; } .related-project-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); font-size: 1.4rem; } .related-project-content h4 { font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--dark); margin-bottom: 6px; } .related-project-content h4 a { color: inherit; text-decoration: none; } .related-project-content h4 a:hover { color: var(--primary); } .related-project-status { font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; display: inline-block; background: rgba(3, 105, 161, 0.1); color: var(--primary); } .related-project-status.completed { background: rgba(16, 185, 129, 0.12); color: var(--success); } .related-project-status.ongoing { background: rgba(245, 158, 11, 0.12); color: var(--warning); } .related-project-status.planned { background: rgba(3, 105, 161, 0.12); color: var(--primary); } .related-project-status.canceled { background: rgba(239, 68, 68, 0.12); color: var(--danger); } .back-to-list { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--gradient-main); color: #fff; text-decoration: none; border-radius: 12px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; width: 100%; justify-content: center; } .back-to-list:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .gallery-lightbox { position: fixed; inset: 0; background: rgba(8, 47, 73, 0.86); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 2000; padding: 30px; } .gallery-lightbox.active { opacity: 1; visibility: visible; } .gallery-lightbox-frame { background: var(--white); border-radius: 22px; max-width: 960px; width: 100%; box-shadow: var(--shadow-xl); position: relative; overflow: hidden; } .gallery-lightbox-media { background: #0b2940; display: flex; align-items: center; justify-content: center; max-height: 70vh; } .gallery-lightbox-image { max-width: 100%; max-height: 70vh; object-fit: contain; } .gallery-lightbox-caption { padding: 22px 26px; } .gallery-lightbox-title { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; } .gallery-lightbox-description { color: var(--gray-600); font-size: 0.95rem; } .gallery-lightbox-close, .gallery-lightbox-nav { position: absolute; border: none; background: rgba(3, 105, 161, 0.92); color: #fff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; } .gallery-lightbox-close { top: 18px; right: 18px; } .gallery-lightbox-nav.prev { left: 20px; top: 50%; transform: translateY(-50%); } .gallery-lightbox-nav.next { right: 20px; top: 50%; transform: translateY(-50%); } .gallery-lightbox-close:hover, .gallery-lightbox-nav:hover { transform: scale(1.05); } .hidden-item { display: none !important; } .fade-card { opacity: 0; transform: translateY(18px); transition: all 0.5s ease-out; } .fade-card.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, 1fr); } .content-layout { grid-template-columns: 1fr; } .sidebar { position: static; } } @media (max-width: 768px) { .page-hero { padding: 3rem 0 3.2rem; } .project-grid { grid-template-columns: 1fr; } .project-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-detail-image { height: 260px; } .project-detail-content { padding: 24px; } .project-detail-title { font-size: 1.6rem; } .project-gallery { grid-template-columns: repeat(2, 1fr); } .project-filter { align-items: stretch; margin-bottom: 32px; } .project-filter-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; } .project-filter-row::-webkit-scrollbar { display: none; } .project-filter-label, .project-filter-row .filter-tab { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 520px) { .project-stats-grid { grid-template-columns: 1fr; } .project-gallery { grid-template-columns: 1fr; } .project-gallery-item { height: 180px; } } .breadcrumb { background: var(--white); padding: 15px 0; border-bottom: 1px solid var(--gray-200); } .breadcrumb-list { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .breadcrumb-list li { display: flex; align-items: center; gap: 10px; } .breadcrumb-list a { color: var(--gray-500); text-decoration: none; transition: color 0.3s ease; } .breadcrumb-list a:hover { color: var(--primary); } .breadcrumb-list .separator { color: var(--gray-400); font-size: 0.8rem; } .breadcrumb-list .current { color: var(--primary); font-weight: 600; } .page-hero { position: relative; overflow: hidden; background: var(--gradient-dark); padding: 60px 0; } .page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .page-hero-decoration { position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%); } .page-hero .container { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; } .page-hero-icon { width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: rgba(255, 255, 255, 0.1); color: var(--accent); font-size: 2.5rem; backdrop-filter: blur(10px); } .page-hero-icon img { width: 50px; height: 50px; object-fit: contain; } .page-hero-content h1 { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--white); } .page-hero-content p { max-width: 680px; margin: 12px auto 0; color: rgba(255, 255, 255, 0.82); } .page-content { padding: 50px 0 80px; } .content-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } .sidebar { position: sticky; top: 100px; } .sidebar-menu { background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); } .sidebar-title { display: flex; align-items: center; gap: 10px; padding: 20px 25px; background: var(--gradient-main); color: var(--white); font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; } .sidebar-nav { padding: 15px; } .sidebar-item { margin-bottom: 5px; } .sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: var(--gray-600); text-decoration: none; border-radius: 12px; transition: all 0.3s ease; font-weight: 500; font-size: 0.95rem; } .sidebar-link:hover { background: var(--light); color: var(--primary); } .sidebar-link.active { background: var(--primary); color: var(--white); } .sidebar-link.active:hover { background: var(--primary-dark); } .sidebar-link-button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; } .sidebar-link i { font-size: 0.8rem; transition: transform 0.3s ease; } .sidebar-link.has-submenu { justify-content: space-between; } .sidebar-link.has-submenu.open > .fa-chevron-down { transform: rotate(180deg); } .sidebar-link-main { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .sidebar-link .link-icon { width: 24px; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 1rem; } .sidebar-link .link-icon img { width: 20px; height: 20px; object-fit: contain; } .sidebar-link .link-text { flex: 1; } .sidebar-submenu { display: none; margin: 8px 0 0 46px; padding: 0 0 10px 14px; border-left: 2px solid var(--gray-200); } .sidebar-submenu.open { display: block; } .sidebar-submenu a { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--gray-500); text-decoration: none; transition: color 0.3s ease; } .sidebar-submenu a.active, .sidebar-submenu a:hover { color: var(--primary); } .main-content { min-width: 0; } .service-header { background: var(--white); border-radius: 20px; padding: 35px; margin-bottom: 30px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .service-header-top { display: flex; align-items: flex-start; gap: 25px; margin-bottom: 25px; } .service-icon-large { width: 100px; height: 100px; background: var(--gradient-main); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: var(--white); flex-shrink: 0; } .service-icon-large img { width: 60px; height: 60px; object-fit: contain; } .service-header-info { flex: 1; } .service-header-info .overline { display: inline-block; background: var(--light); color: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .service-header-info h2 { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 10px; } .service-header-info .short-desc { color: var(--gray-500); font-size: 1.05rem; line-height: 1.7; margin: 0; } .service-image { width: 100%; height: 350px; background: var(--gradient-main); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .service-image img { width: 100%; height: 100%; object-fit: cover; } .service-image-placeholder { font-size: 5rem; color: rgba(255, 255, 255, 0.3); } .service-image-placeholder img { width: 72px; height: 72px; object-fit: contain; } .service-content { background: var(--white); border-radius: 20px; padding: 35px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); margin-bottom: 30px; } .service-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .service-content h3 i, .service-gallery h3 i { color: var(--primary); } .service-content h4 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--dark); margin: 25px 0 15px; } .service-content p { color: var(--gray-600); font-size: 1rem; line-height: 1.9; margin-bottom: 20px; } .service-content ul { list-style: none; margin-bottom: 25px; padding: 0; } .service-content ul li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); } .service-content ul li:last-child { border-bottom: none; } .service-content ul li i { color: var(--success); margin-top: 4px; } .sidebar-contact { margin-top: 25px; padding: 25px; background: var(--white); border-radius: 20px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); text-align: center; } .sidebar-contact-icon { width: 60px; height: 60px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light); color: var(--primary); font-size: 1.5rem; } .sidebar-contact h4 { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--dark); } .sidebar-contact p { margin: 0 0 15px; color: var(--gray-500); font-size: 0.85rem; } .sidebar-contact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--gradient-main); color: var(--white); text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; } .sidebar-contact-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .service-list-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; } .service-list-header h2 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 2.1rem; color: var(--dark); } .service-list-count { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; background: var(--light); color: var(--primary); font-weight: 600; white-space: nowrap; } .service-list { display: grid; gap: 24px; } .service-list-item { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; background: var(--white); border-radius: 28px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-list-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .service-list-image { position: relative; min-height: 280px; background: var(--gradient-main); overflow: hidden; } .service-list-image img { width: 100%; height: 100%; object-fit: cover; } .service-list-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.26); font-size: 5rem; } .service-list-image-placeholder img { width: 64px; height: 64px; object-fit: contain; } .service-list-icon { position: absolute; top: 24px; left: 24px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--white); color: var(--primary); font-size: 1.9rem; box-shadow: var(--shadow); z-index: 2; } .service-list-icon img { width: 34px; height: 34px; object-fit: contain; } .service-list-content { padding: 42px; display: flex; flex-direction: column; justify-content: center; } .service-list-content .overline { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--light); color: var(--primary); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 22px; } .service-list-content h3 { margin: 0 0 18px; font-family: 'Outfit', sans-serif; font-size: 2rem; color: var(--dark); } .service-list-content .short-desc { margin: 0 0 26px; color: var(--gray-500); font-size: 1.15rem; line-height: 1.8; } .service-list-link { display: inline-flex; align-items: center; gap: 12px; color: var(--primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; transition: gap 0.3s ease; } .service-list-link:hover { gap: 16px; } .service-detail-card { background: var(--white); border-radius: 28px; padding: 42px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); } .service-detail-image { width: 100%; max-height: 420px; margin-bottom: 28px; border-radius: 22px; object-fit: cover; } .service-detail-overline { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--light); color: var(--primary); font-size: 0.92rem; font-weight: 700; margin-bottom: 18px; } .service-detail-card h2 { margin: 0 0 16px; font-family: 'Outfit', sans-serif; font-size: 2.35rem; color: var(--dark); } .service-detail-summary { margin: 0 0 28px; color: var(--gray-500); font-size: 1.1rem; line-height: 1.8; } .service-rich-body { color: var(--gray-600); font-size: 1.05rem; line-height: 1.9; } .service-rich-body h3, .service-rich-body h4 { margin-top: 28px; margin-bottom: 14px; font-family: 'Outfit', sans-serif; color: var(--dark); } .service-feature-groups { display: grid; gap: 26px; margin-top: 36px; } .service-feature-group { padding: 30px; border-radius: 24px; background: var(--light); border: 1px solid var(--gray-200); } .service-feature-group h3 { margin: 0 0 10px; font-family: 'Outfit', sans-serif; color: var(--dark); font-size: 1.55rem; } .service-feature-group>p { margin: 0 0 22px; color: var(--gray-500); line-height: 1.8; } .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .feature-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: var(--light); border-radius: 20px; transition: all 0.3s ease; } .feature-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .feature-icon { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--gradient-main); color: var(--white); font-size: 1.2rem; } .feature-icon img { width: 32px; height: 32px; object-fit: contain; } .feature-content h5 { margin: 0 0 8px; font-family: 'Outfit', sans-serif; font-size: 1rem; color: var(--dark); } .feature-content p { margin: 0; color: var(--gray-500); line-height: 1.5; font-size: 0.85rem; } .service-gallery { background: var(--white); border-radius: 20px; padding: 35px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); } .service-gallery h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .gallery-item { position: relative; height: 180px; overflow: hidden; border-radius: 12px; background: var(--gradient-main); cursor: pointer; transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.03); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-item-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(255, 255, 255, 0.3); } .gallery-item-overlay { position: absolute; inset: 0; background: rgba(3, 105, 161, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item-overlay i { font-size: 2rem; color: var(--white); } .gallery-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 30px; background: rgba(2, 6, 23, 0.84); backdrop-filter: blur(8px); } .gallery-lightbox.open { display: flex; } .gallery-lightbox-dialog { width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 18px; } .gallery-lightbox-dialog img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 18px; box-shadow: var(--shadow-xl); background: rgba(255, 255, 255, 0.04); } .gallery-lightbox-caption { width: min(960px, 100%); padding: 16px 20px; border-radius: 16px; background: rgba(15, 23, 42, 0.72); color: var(--white); text-align: center; } .gallery-lightbox-caption strong { display: block; margin-bottom: 6px; font-size: 1.05rem; } .gallery-lightbox-caption span { color: rgba(255, 255, 255, 0.78); line-height: 1.6; font-size: 0.95rem; } .gallery-lightbox-close, .gallery-lightbox-nav { border: 0; cursor: pointer; color: var(--white); background: rgba(255, 255, 255, 0.12); transition: all 0.3s ease; } .gallery-lightbox-close:hover, .gallery-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); } .gallery-lightbox-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; font-size: 1.1rem; } .gallery-lightbox-nav { width: 56px; height: 56px; border-radius: 50%; font-size: 1.2rem; } .gallery-lightbox-nav.prev { margin-right: 20px; } .gallery-lightbox-nav.next { margin-left: 20px; } .load-more-wrapper { display: flex; justify-content: center; margin-top: 30px; } .load-more-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 1.5px solid var(--primary); border-radius: 14px; background: var(--white); color: var(--primary); font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .load-more-btn:hover { background: var(--primary); color: var(--white); } .load-more-btn[disabled] { opacity: 0.6; cursor: default; } .service-list-item-hidden { display: none; } .empty-state { padding: 28px; border-radius: 22px; background: var(--light); border: 1px solid var(--gray-200); color: var(--gray-500); text-align: center; } @media (max-width: 1200px) { .content-layout { grid-template-columns: 1fr; } .sidebar { position: static; } .service-list-item { grid-template-columns: 1fr; } .service-list-image { min-height: 240px; } } @media (max-width: 991px) { .feature-grid, .gallery-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .service-list-header { flex-direction: column; align-items: flex-start; } .service-list-content, .service-detail-card { padding: 28px; } .service-list-content h3, .service-header-info h2 { font-size: 1.8rem; } .service-list-content .short-desc { font-size: 1rem; } .service-header-top { flex-direction: column; align-items: center; text-align: center; } .service-header-info .overline { margin: 0 auto 10px; } } @media (max-width: 767px) { .breadcrumb-list { flex-wrap: wrap; } .page-hero { padding: 42px 0; } .page-hero .container { flex-direction: column; align-items: flex-start; } .page-hero-content h1 { font-size: 2rem; } .service-header, .service-content, .service-gallery { padding: 25px; } .service-icon-large { width: 80px; height: 80px; font-size: 2rem; } .service-header-info h2 { font-size: 1.5rem; } .service-image { height: 250px; } .gallery-lightbox { padding: 20px 12px; } .gallery-lightbox-nav { width: 44px; height: 44px; } .gallery-lightbox-nav.prev { margin-right: 8px; } .gallery-lightbox-nav.next { margin-left: 8px; } } body{background:var(--gray-100)} .breadcrumb{background:var(--white);padding:15px 0;border-bottom:1px solid var(--gray-200)} .breadcrumb-list{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;font-size:.9rem;flex-wrap:wrap} .breadcrumb-list a{color:var(--gray-500);text-decoration:none;transition:color .3s} .breadcrumb-list a:hover{color:var(--primary)} .breadcrumb-list .separator{color:var(--gray-400);font-size:.8rem} .breadcrumb-list .current{color:var(--primary);font-weight:600} .page-hero{background:var(--gradient-dark);padding:60px 0;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.5} .page-hero .container{position:relative;z-index:2;text-align:center} .page-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:var(--accent,#f59e0b);padding:8px 18px;border-radius:50px;font-size:.85rem;font-weight:600;margin-bottom:15px} .page-hero h1{font-family:'Outfit',sans-serif;font-size:2.5rem;font-weight:800;color:#fff;margin-bottom:10px} .page-hero p{color:rgba(255,255,255,.8);font-size:1rem;max-width:500px;margin:0 auto} .page-content{padding:50px 0 80px} .filter-section{background:var(--white);border-radius:20px;padding:20px 25px;margin-bottom:30px;box-shadow:var(--shadow);border:1px solid var(--gray-200);display:flex;flex-direction:column;gap:15px} .category-scroll-wrapper{position:relative} .category-tabs{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px} .category-tabs::-webkit-scrollbar{height:3px} .category-tabs::-webkit-scrollbar-track{background:transparent} .category-tabs::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px} .category-tabs::-webkit-scrollbar-thumb:hover{background:var(--gray-400)} .scroll-fade-right{position:absolute;top:0;right:0;bottom:4px;width:50px;background:linear-gradient(to right,transparent,var(--white));pointer-events:none;transition:opacity .3s} .scroll-fade-right.hidden{opacity:0} .category-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--gray-100);color:var(--gray-600);border:2px solid transparent;border-radius:12px;font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s;white-space:nowrap;flex-shrink:0} .category-tab i{font-size:.95rem} .category-tab:hover{background:var(--light);color:var(--primary);border-color:var(--primary-light)} .category-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)} .category-tab .count{background:rgba(255,255,255,.2);padding:2px 7px;border-radius:20px;font-size:.7rem;margin-left:4px} .category-tab:not(.active) .count{background:var(--gray-200);color:var(--gray-600)} .search-box{display:flex;gap:10px} .search-box input{flex:1;padding:11px 16px;border:2px solid var(--gray-200);border-radius:12px;font-family:inherit;font-size:.9rem;transition:all .3s} .search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(3,105,161,.1)} .search-box button{padding:11px 20px;background:var(--gradient-main);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap} .search-box button:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .results-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 5px} .results-count{font-size:.95rem;color:var(--gray-500)} .results-count strong{color:var(--dark)} .sort-select{padding:8px 35px 8px 15px;border:2px solid var(--gray-200);border-radius:10px;font-family:inherit;font-size:.85rem;color:var(--gray-600);cursor:pointer;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px center/16px;appearance:none} .items-list{display:flex;flex-direction:column;gap:15px} .item-card{background:var(--white);border-radius:16px;padding:25px;box-shadow:var(--shadow);border:2px solid var(--gray-200);transition:all .3s;display:flex;gap:20px;align-items:flex-start} .item-card:hover{border-color:var(--primary-light);transform:translateY(-2px);box-shadow:var(--shadow-lg)} .item-icon{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0} .item-icon.cat-ihale{background:linear-gradient(135deg,rgba(245,158,11,.15) 0%,rgba(245,158,11,.05) 100%);color:var(--warning)} .item-icon.cat-mevzuat{background:linear-gradient(135deg,rgba(139,92,246,.15) 0%,rgba(139,92,246,.05) 100%);color:var(--purple,#8b5cf6)} .item-icon.cat-faaliyet{background:linear-gradient(135deg,rgba(16,185,129,.15) 0%,rgba(16,185,129,.05) 100%);color:var(--success)} .item-icon.cat-default{background:linear-gradient(135deg,rgba(3,105,161,.15) 0%,rgba(3,105,161,.05) 100%);color:var(--primary)} .item-content{flex:1;min-width:0} .item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:10px;flex-wrap:wrap} .item-category{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;background:rgba(3,105,161,.1);color:var(--primary)} .item-dates{display:flex;gap:15px;flex-wrap:wrap} .item-date{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--gray-500)} .item-date i{color:var(--gray-400)} .item-date.deadline{color:var(--danger,#ef4444);font-weight:600} .item-date.deadline i{color:var(--danger,#ef4444)} .item-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;color:var(--dark);margin-bottom:8px;line-height:1.4} .item-description{color:var(--gray-500);font-size:.9rem;line-height:1.7;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .item-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;padding-top:15px;border-top:1px solid var(--gray-100)} .item-files{display:flex;gap:10px;flex-wrap:wrap} .file-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--gray-100,#f1f5f9);border:2px solid var(--gray-200);border-radius:10px;color:var(--gray-600);font-size:.85rem;font-weight:600;text-decoration:none;transition:all .3s} .file-btn:hover{border-color:var(--primary);background:var(--light);color:var(--primary);transform:translateY(-2px)} .file-btn i{font-size:1.1rem} .file-btn.ext-pdf i{color:#ef4444} .file-btn.ext-doc,.file-btn.ext-docx{}.file-btn.ext-doc i,.file-btn.ext-docx i{color:#2563eb} .file-btn.ext-xls i,.file-btn.ext-xlsx i{color:#16a34a} .file-btn .file-size{font-size:.75rem;color:var(--gray-400);font-weight:400} .item-status{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:.8rem;font-weight:700} .item-status.active{background:rgba(16,185,129,.1);color:var(--success)} .item-status.active::before{content:'';width:8px;height:8px;background:var(--success);border-radius:50%;animation:pulse 2s infinite} .item-status.closed{background:rgba(239,68,68,.1);color:#ef4444} .item-status.upcoming{background:rgba(245,158,11,.1);color:var(--warning)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .load-more-wrapper{text-align:center;margin-top:40px} .load-more-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:var(--white);border:2px solid var(--gray-200);border-radius:14px;color:var(--gray-600);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s} .load-more-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)} .load-more-btn:disabled{opacity:.5;cursor:not-allowed} .load-more-info{margin-top:15px;font-size:.9rem;color:var(--gray-500)} .empty-state{text-align:center;padding:60px 20px;background:var(--white);border-radius:20px;box-shadow:var(--shadow)} .empty-state-icon{width:100px;height:100px;background:var(--light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;font-size:2.5rem;color:var(--gray-400)} .empty-state h3{font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:700;color:var(--dark);margin-bottom:10px} .items-loading{display:flex;justify-content:center;padding:40px;color:var(--gray-400)} @media(max-width:768px){ .filter-section{padding:15px} .item-card{flex-direction:column} .item-icon{width:50px;height:50px;font-size:1.2rem} .item-footer{flex-direction:column;align-items:flex-start} } @media(max-width:480px){ .filter-section{padding:12px} .category-tab{padding:9px 14px;font-size:.82rem} .category-tab i{display:none} .item-card{padding:18px} .item-title{font-size:1rem} .search-box button span{display:none} .page-hero h1{font-size:1.8rem} } .hero-description{font-size:1.1rem;color:rgba(255,255,255,.8);margin-bottom:30px;max-width:450px;animation:slideUp .8s ease-out .1s backwards}.hero-description p{margin:0 0 12px}.hero-description p:last-child{margin-bottom:0}.services-section-actions{display:flex;justify-content:center;margin-top:22px}.services-all-link{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:999px;background:var(--light);color:var(--primary);text-decoration:none;font-weight:700;transition:transform .3s ease,box-shadow .3s ease}.services-all-link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.service-card-link{display:block;text-decoration:none;color:inherit}.service-card-link .service-card{height:100%}.service-card-link:hover .service-card{transform:translateY(-6px);box-shadow:var(--shadow-xl)}.announcement-badge.info{background:rgba(14,165,233,.12);color:#0284c7}.about-img-main.has-image{background:transparent;overflow:hidden}.about-img-main.has-image::before{display:none}.about-img-main img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:20px}.about-badge-icon img{width:26px;height:26px;object-fit:contain}.projects{padding:90px 0;background:var(--gray-100)}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.project-card{background:var(--white);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all .35s ease}.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.project-image{position:relative;height:190px;background:var(--gradient-main);overflow:hidden}.project-image img{width:100%;height:100%;object-fit:cover}.project-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:2.8rem}.project-status{position:absolute;top:14px;right:14px;padding:6px 14px;border-radius:16px;font-size:.75rem;font-weight:600;color:#fff}.project-status.completed{background:var(--success)}.project-status.ongoing{background:var(--warning)}.project-status.planned{background:var(--primary)}.project-status.canceled{background:var(--danger)}.project-category{position:absolute;top:14px;left:14px;padding:6px 14px;border-radius:16px;background:var(--white);color:var(--primary);font-size:.75rem;font-weight:600;box-shadow:var(--shadow)}.project-content{padding:22px 24px 24px}.project-content h3{font-family:'Outfit',sans-serif;font-size:1.2rem;font-weight:700;color:var(--dark);margin-bottom:10px}.project-content p{color:var(--gray-500);font-size:.9rem;line-height:1.6;margin-bottom:18px}.project-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.85rem;color:var(--gray-500)}.project-meta i{color:var(--primary)}.project-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary);text-decoration:none;font-weight:600}.projects-more{display:flex;justify-content:center;margin-top:28px}.home-section-bg-white{background:var(--white)!important}.home-section-bg-gray{background:var(--gray-100)!important}.home-section-bg-dark{background:var(--gradient-dark)!important}.home-section-bg-dark .section-badge,.home-section-bg-dark .section-title,.home-section-bg-dark .section-desc,.home-section-bg-dark h2,.home-section-bg-dark h3,.home-section-bg-dark p,.home-section-bg-dark span,.home-section-bg-dark a:not(.btn):not(.services-all-link):not(.project-link){color:var(--white)!important}.home-section-bg-dark .service-card,.home-section-bg-dark .leader-card,.home-section-bg-dark .news-card,.home-section-bg-dark .announcements-column,.home-section-bg-dark .project-card{background:rgba(255,255,255,.96)}.home-section-bg-dark .services-all-link{background:rgba(255,255,255,.12);color:var(--white)}.news-column-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.news-view-all-btn{display:inline-flex;align-items:center;gap:8px;width:auto;margin:0 0 18px;padding:10px 16px;position:relative;z-index:2}.news-card{display:flex;flex-direction:column}.news-image-link{display:block;text-decoration:none;color:inherit}.news-image{height:190px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(14,165,233,.28);position:relative;overflow:hidden;padding:0}.news-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}.news-content{padding:18px;display:flex;flex-direction:column;gap:8px}.news-content h4{margin-bottom:0}.news-title-link{color:inherit;text-decoration:none;display:inline-block}.news-title-link:hover{color:var(--primary)}.leader-image-link{display:block;text-decoration:none;color:inherit}.leader-content h3 a{color:inherit;text-decoration:none!important;border-bottom:0!important;display:inline-block}.leader-content h3 a:hover{color:var(--primary);text-decoration:none!important}.leadership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:920px;margin:0 auto}.leadership-grid .leader-image{height:300px}.leadership-grid .leader-content{padding:26px 26px 28px}.leader-slider-container.is-compact{overflow:visible}.leader-slider-container.is-compact .leader-slider{overflow:visible}.leader-slider-container.is-compact .leader-slider-track{justify-content:center;transform:none!important}.leader-slider-container.is-compact .leader-slide{flex:0 0 calc(50% - 13px);min-width:calc(50% - 13px);max-width:360px}.leader-slider-container.is-single .leader-slide{flex:0 0 min(360px,100%);min-width:min(360px,100%)}@media (max-width:1100px){.news-image{height:170px}}@media (max-width:1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}.leadership-grid{grid-template-columns:1fr;max-width:420px;gap:28px}.leader-slider-container.is-compact .leader-slide,.leader-slider-container.is-single .leader-slide{flex:0 0 100%;min-width:100%;max-width:none}}@media (max-width:768px){.projects-grid{grid-template-columns:1fr}.news-column-header{align-items:flex-start;flex-direction:column}.news-view-all-btn{margin-bottom:14px}.news-image{height:180px}}@media (max-width:600px){.leader-main{max-width:100%}.leadership-grid{max-width:100%}.news-image{height:160px}}