:root { --annur: #278347; --annur-dark: #155b32; --annur-light: #94d65a; --ink: #173124; --muted: #647369; --cream: #f6faf4; --white: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--cream); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.deviceShow { display: none; }
.site-header { position: sticky; z-index: 1000; top: 0; border-bottom: 1px solid rgba(21,91,50,.08); background: rgba(255,255,255,.94); box-shadow: 0 8px 25px rgba(12,59,31,.05); backdrop-filter: blur(14px); }.site-nav { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 25px; }.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }.brand img { display: block; width: auto; max-height: 48px; }.site-menu { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }.site-menu > a { position: relative; display: inline-flex; gap: 7px; align-items: center; padding: 12px 12px; border-radius: 9px; color: #314a3b; font-size: 14px; font-weight: 750; transition: color .2s, background .2s; }.site-menu > a > i { display: none; }.site-menu > a::after { position: absolute; bottom: 5px; left: 50%; width: 0; height: 2px; border-radius: 2px; background: var(--annur); content: ""; transform: translateX(-50%); transition: width .22s ease; }.site-menu > a:hover { color: var(--annur); background: #f2f9ef; }.site-menu > a:hover::after, .site-menu > a.active::after { width: calc(100% - 24px); }.site-menu > a.active { color: var(--annur); }.site-menu > a.nav-login::after { display: none; }.site-menu > a.nav-contact { margin-left: 11px; padding: 12px 16px; background: var(--annur); box-shadow: 0 9px 18px rgba(39,131,71,.18); color: #fff; }.site-menu > a.nav-contact i { display: inline-block; }.site-menu > a.nav-contact:hover { background: var(--annur-dark); color: #fff; transform: translateY(-1px); }.site-menu > a.nav-contact::after { display: none; }.nav-toggle, .nav-close, .mobile-menu-heading, .nav-overlay { display: none; }
.mobile-contact-float { display: none; }
.header.navbar-area { position: sticky; top: 0; z-index: 100; padding: 12px 0; background: rgba(255,255,255,.92) !important; border-bottom: 1px solid rgba(21,91,50,.08); box-shadow: 0 8px 25px rgba(12,59,31,.05); backdrop-filter: blur(14px); }
.header.navbar-area .nav-inner { padding: 0; }
.header.navbar-area .navbar-brand img { max-height: 48px; width: auto; }
.header.navbar-area .navbar-nav .nav-item a { color: #294235; font-size: 14px; font-weight: 700; padding: 11px 13px; position: relative; }
.header.navbar-area .navbar-nav .nav-item a::after { content: ""; position: absolute; height: 2px; width: 0; left: 13px; bottom: 5px; background: var(--annur); transition: width .25s ease; }
.header.navbar-area .navbar-nav .nav-item a:hover, .header.navbar-area .navbar-nav .nav-item a:focus { color: var(--annur); }
.header.navbar-area .navbar-nav .nav-item a:hover::after { width: calc(100% - 26px); }
.header.navbar-area .add-list-button .btn { background: var(--annur); border: 0; padding: 12px 17px; border-radius: 12px; box-shadow: 0 9px 18px rgba(39,131,71,.18); font-weight: 700; }
.header.navbar-area .add-list-button .btn:hover { background: var(--annur-dark); transform: translateY(-1px); }
.hero-carousel { position: relative; isolation: isolate; min-height: min(680px, calc(100vh - 74px)); overflow: hidden; background: #12542e; }
.hero-carousel::before, .hero-carousel::after { content: ""; position: absolute; border-radius: 999px; z-index: -1; filter: blur(4px); opacity: .62; }
.hero-carousel::before { width: 34rem; height: 34rem; right: -12rem; top: -15rem; background: #b6ec62; animation: orbFloat 11s ease-in-out infinite; }
.hero-carousel::after { width: 28rem; height: 28rem; left: -14rem; bottom: -15rem; background: #36ba71; animation: orbFloat 13s ease-in-out infinite reverse; }
.hero-slides { position: relative; min-height: inherit; }
.hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: scale(1.035); transition: opacity .8s ease, transform 4.5s ease; background: linear-gradient(120deg, rgba(10,61,34,.97), rgba(30,117,58,.88)); }
.hero-slide.active { opacity: 1; pointer-events: auto; transform: scale(1); }
.hero-slide .container, .hero-slide .row { min-height: inherit; }
.hero-copy { color: var(--white); max-width: 660px; padding: 80px 0 95px; }
.hero-eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 8px 13px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; background: rgba(255,255,255,.13); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.hero-copy h1 { margin: 0 0 20px; color: var(--white); font-size: clamp(38px, 5.2vw, 70px); line-height: 1.06; letter-spacing: -.045em; }
.hero-copy p { max-width: 560px; margin-bottom: 30px; color: rgba(255,255,255,.84); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { padding: 14px 22px; border: 1px solid transparent; border-radius: 12px; background: var(--white); color: var(--annur-dark); font-weight: 800; }
.hero-actions .btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.hero-actions .btn-outline { background: transparent; border-color: rgba(255,255,255,.52); color: var(--white); }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 500px; }
.hero-photo { width: min(430px, 86%); aspect-ratio: .92; object-fit: cover; border: 10px solid rgba(255,255,255,.16); border-radius: 34px; box-shadow: 0 28px 60px rgba(0,0,0,.24); animation: photoDrift 7s ease-in-out infinite; }
.hero-card { position: absolute; left: 0; bottom: 66px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 20px 35px rgba(0,0,0,.16); color: var(--annur-dark); font-size: 14px; font-weight: 800; animation: cardFloat 5s ease-in-out infinite; }
.hero-card small { display: block; margin-top: 3px; color: #627469; font-weight: 600; }
.hero-dots { position: absolute; z-index: 3; left: 50%; bottom: 34px; display: flex; gap: 9px; transform: translateX(-50%); }
.hero-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); transition: transform .25s, background .25s; }
.hero-dot.active { background: var(--white); transform: scale(1.45); }
.section { padding: 88px 0; }
.section-title { margin-bottom: 43px; }
.section-title h3 { display: inline-block; margin-bottom: 11px; padding: 7px 12px; border-radius: 9px; background: #e6f5df; color: var(--annur); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.section-title h2, .our-achievement .title h2 { color: var(--ink); font-size: clamp(29px, 3vw, 42px); letter-spacing: -.035em; }
.section-title p { color: var(--muted); font-size: 16px; }
.features { background: #fff; }
.features .single-feature { height: calc(100% - 22px); border: 1px solid #e7eee8; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(17,73,37,.06); transition: transform .25s, box-shadow .25s; }
.features .single-feature:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(17,73,37,.13); }
.features .single-feature i { background: #e5f5df; color: var(--annur); }
.our-achievement { background: linear-gradient(135deg, #155b32, #2d934f); color: #fff; }
.our-achievement .title h2, .our-achievement .single-achievement p { color: #fff; }
.our-achievement .single-achievement { min-height: 100%; margin-bottom: 18px; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(255,255,255,.09); }
.purpose-section { padding: 92px 0 72px; overflow: hidden; }
.purpose-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 31px; }
.purpose-label { display: inline-block; margin-bottom: 9px; color: #b9ed83; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.purpose-heading h2 { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 51px); letter-spacing: -.04em; }
.purpose-controls { display: flex; gap: 10px; }
.purpose-control { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .2s, transform .2s; }
.purpose-control:hover, .purpose-control:focus { background: #fff; color: var(--annur-dark); transform: translateY(-2px); }
.purpose-track { display: flex; gap: 20px; overflow-x: auto; padding: 5px 2px 17px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.purpose-track::-webkit-scrollbar { display: none; }
.purpose-card { position: relative; display: flex; flex: 0 0 calc((100% - 40px) / 3); min-height: 255px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 19px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)); box-shadow: inset 0 1px rgba(255,255,255,.12); color: #fff; scroll-snap-align: start; transition: transform .25s, background .25s; }
.purpose-card::after { content: ""; position: absolute; width: 110px; height: 110px; right: -36px; bottom: -42px; border-radius: 50%; background: rgba(184,237,130,.14); }
.purpose-card:hover { background: rgba(255,255,255,.2); transform: translateY(-6px); }
.purpose-card > i { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: rgba(188,239,129,.19); color: #d6ff9c; font-size: 23px; }
.purpose-card p { position: relative; z-index: 1; margin: 22px 0 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.65; }
.purpose-number { position: absolute; z-index: 1; top: 26px; right: 25px; color: rgba(255,255,255,.46); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.purpose-hint { margin: 3px 0 0; color: rgba(255,255,255,.72); font-size: 13px; }
.purpose-hint i { margin-right: 6px; color: #b9ed83; }
.pricing-table { background: #fff; }
.pricing-table .single-table { overflow: hidden; border: 1px solid #e6eee8; border-radius: 18px; box-shadow: 0 12px 28px rgba(17,73,37,.07); transition: transform .25s; }
.pricing-table .single-table:hover { transform: translateY(-7px); }
.pricing-table .button .btn { border-radius: 0; background: var(--annur); }
.teacher-section { background: radial-gradient(circle at 86% 4%, #eaf6e2 0, transparent 26%), #fff; }
.teacher-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.teacher-card { overflow: hidden; border: 1px solid #e3ece5; border-radius: 21px; background: #fff; box-shadow: 0 14px 34px rgba(22,77,43,.08); opacity: 0; transform: translateY(25px); transition: opacity .55s ease var(--teacher-delay), transform .55s ease var(--teacher-delay), box-shadow .3s ease; }
.teacher-card.is-visible { opacity: 1; transform: translateY(0); }
.teacher-card:hover { box-shadow: 0 22px 42px rgba(22,77,43,.18); transform: translateY(-9px); }
.teacher-photo { position: relative; height: 310px; overflow: hidden; background-position: center; background-size: cover; transition: transform .55s ease; }
.teacher-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 43%, rgba(8,40,23,.72)); }
.teacher-card:hover .teacher-photo { transform: scale(1.055); }
.teacher-badge { position: absolute; z-index: 1; top: 15px; left: 15px; padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--annur-dark); font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.teacher-badge i { color: #77bc38; margin-right: 3px; }
.teacher-info { position: relative; padding: 20px 20px 21px; background: #fff; }
.teacher-role { display: block; margin-bottom: 8px; color: var(--annur); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.teacher-info h3 { min-height: 48px; margin: 0 0 12px; color: var(--ink); font-size: 19px; line-height: 1.27; }
.teacher-info p { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 13px; border-top: 1px solid #edf2ee; color: #627369; font-size: 14px; line-height: 1.45; }
.teacher-info p i { margin-top: 2px; color: #80bf3c; }
.student-section { min-height: 610px; padding: 76px 0 90px; background: radial-gradient(circle at 88% 12%, #d9f2cb 0, transparent 24%), radial-gradient(circle at 0 70%, #edf8e8 0, transparent 27%), #fff; }
.student-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 38px; overflow: hidden; margin-bottom: 30px; padding: 52px 58px; border-radius: 26px; background: linear-gradient(120deg, #104f2d, #288f4c); box-shadow: 0 22px 42px rgba(17,83,42,.18); color: #fff; }
.student-hero::after { content: ""; position: absolute; right: -115px; bottom: -170px; width: 390px; height: 390px; border: 50px solid rgba(209,255,141,.13); border-radius: 50%; }
.student-kicker { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.14); color: #d4ffa6; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.student-hero h1 { margin: 0 0 14px; color: #fff; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.05em; }
.student-hero h1 em { color: #c9f58e; font-style: normal; }
.student-hero p { max-width: 640px; margin: 0; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.7; }
.student-total { position: relative; z-index: 1; display: flex; flex: 0 0 192px; align-items: center; justify-content: center; min-height: 192px; flex-direction: column; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.12); text-align: center; backdrop-filter: blur(8px); }
.student-total i { margin-bottom: 5px; color: #d4ffa6; font-size: 27px; }.student-total strong { color: #fff; font-size: 54px; line-height: 1; }.student-total span { margin-top: 7px; color: rgba(255,255,255,.83); font-size: 13px; font-weight: 700; }
.student-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.student-stat-card { position: relative; overflow: hidden; padding: 29px; border: 1px solid #e1ece3; border-radius: 19px; background: #fff; box-shadow: 0 13px 30px rgba(19,79,40,.07); opacity: 0; transform: translateY(24px); transition: opacity .55s ease var(--teacher-delay), transform .55s ease var(--teacher-delay), box-shadow .25s ease; }
.student-stat-card.is-visible { opacity: 1; transform: translateY(0); }.student-stat-card:hover { box-shadow: 0 20px 35px rgba(19,79,40,.14); transform: translateY(-5px); }
.student-stat-card::after { content: ""; position: absolute; right: -38px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; background: #eaf7e2; }.student-stat-card.female::after { background: #f4eee8; }.student-stat-card.total::after { background: #e0f3cc; }
.student-stat-icon { position: relative; z-index: 1; display: grid; width: 47px; height: 47px; place-items: center; margin-bottom: 23px; border-radius: 14px; background: #e8f7e1; color: var(--annur); font-size: 22px; }.student-stat-card.female .student-stat-icon { background: #f5eee7; color: #b56e47; }.student-stat-card.total .student-stat-icon { background: #dff3cb; color: #3f892d; }
.student-stat-card > span, .student-stat-card > strong, .student-stat-card > p { position: relative; z-index: 1; }.student-stat-card > span { display: block; color: #607267; font-size: 14px; font-weight: 700; }.student-stat-card > strong { display: block; margin: 6px 0 13px; color: var(--ink); font-size: 48px; line-height: 1; letter-spacing: -.05em; }.student-stat-card > p { display: flex; gap: 8px; align-items: center; margin: 0; color: #617268; font-size: 13px; }.student-stat-card > p i { color: #80bf3c; }
.student-note { display: flex; gap: 10px; align-items: center; margin-top: 23px; padding: 14px 17px; border: 1px solid #e2ece4; border-radius: 12px; background: #fff; color: #607267; font-size: 13px; }.student-note i { color: var(--annur); font-size: 18px; }
.news-section, .news-detail-section { min-height: 610px; padding: 78px 0 90px; background: radial-gradient(circle at 92% 8%, #d8f1c5 0, transparent 22%), #f6faf4; }
.news-page-header { max-width: 700px; margin: 0 auto 44px; text-align: center; }.news-kicker { display: inline-flex; gap: 7px; align-items: center; margin-bottom: 14px; color: var(--annur); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.news-page-header h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(38px, 5vw, 61px); line-height: 1.03; letter-spacing: -.06em; }.news-page-header h1 em { color: var(--annur); font-style: normal; }.news-page-header p { margin: 0; color: #65766a; font-size: 16px; line-height: 1.7; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }.news-card { overflow: hidden; border: 1px solid #e1ebe2; border-radius: 20px; background: #fff; box-shadow: 0 13px 31px rgba(23,82,44,.07); opacity: 0; transform: translateY(24px); transition: opacity .55s ease var(--teacher-delay), transform .55s ease var(--teacher-delay), box-shadow .3s ease; }.news-card.is-visible { opacity: 1; transform: translateY(0); }.news-card:hover { box-shadow: 0 24px 42px rgba(23,82,44,.15); transform: translateY(-7px); }.news-image { display: block; height: 218px; overflow: hidden; background: #eaf3e8; }.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }.news-card:hover .news-image img { transform: scale(1.07); }.news-content { padding: 21px 21px 23px; }.news-meta { display: flex; flex-wrap: wrap; gap: 10px 15px; margin-bottom: 13px; color: #718176; font-size: 12px; font-weight: 700; }.news-meta span { display: inline-flex; gap: 5px; align-items: center; }.news-meta i { color: #73af3d; }.news-content h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.23; }.news-content h2 a { color: var(--ink); transition: color .2s; }.news-content h2 a:hover { color: var(--annur); }.news-content p { display: -webkit-box; overflow: hidden; margin: 0 0 20px; color: #64746a; font-size: 14px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.news-link { display: inline-flex; gap: 8px; align-items: center; color: var(--annur); font-size: 13px; font-weight: 800; }.news-link i { transition: transform .2s; }.news-link:hover { color: var(--annur-dark); }.news-link:hover i { transform: translateX(4px); }.news-card-featured { grid-column: span 2; display: grid; grid-template-columns: .95fr 1.05fr; }.news-card-featured .news-image { height: 100%; min-height: 300px; }.news-card-featured .news-content { align-self: center; padding: 32px; }.news-card-featured .news-content h2 { font-size: 29px; }.news-card-featured .news-content p { -webkit-line-clamp: 4; font-size: 15px; }.news-pagination-wrap { display: flex; justify-content: center; margin-top: 39px; }.news-pagination { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }.news-pagination li a { display: grid; min-width: 39px; height: 39px; place-items: center; padding: 0 11px; border: 1px solid #dfebe1; border-radius: 10px; background: #fff; color: var(--annur); font-size: 13px; font-weight: 800; }.news-pagination li.active a, .news-pagination li a:hover { border-color: var(--annur); background: var(--annur); color: #fff; }.news-empty { padding: 60px 20px; border: 1px dashed #cbdccc; border-radius: 18px; background: #fff; text-align: center; }.news-empty i { color: var(--annur); font-size: 35px; }.news-empty h2 { margin: 14px 0 5px; }.news-empty p { color: #65766a; }
.news-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 28px; max-width: 1160px; margin: 0 auto; }.news-article, .related-news { border: 1px solid #e1ebe2; border-radius: 20px; background: #fff; box-shadow: 0 13px 31px rgba(23,82,44,.07); }.news-article { padding: 38px; }.back-to-news { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 26px; color: var(--annur); font-size: 13px; font-weight: 800; }.back-to-news:hover { color: var(--annur-dark); }.news-article h1 { margin: 0 0 24px; color: var(--ink); font-size: clamp(31px, 4vw, 48px); line-height: 1.13; letter-spacing: -.045em; }.news-detail-image { display: block; width: 100%; height: auto; max-height: none; margin-bottom: 30px; border-radius: 14px; object-fit: contain; }.news-article-body { color: #46594d; font-size: 16px; line-height: 1.85; }.news-article-body img { max-width: 100%; height: auto; border-radius: 10px; }.news-article-body p { margin-bottom: 1.2em; }.news-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 35px; padding-top: 23px; border-top: 1px solid #e6eee7; color: #66776c; font-size: 13px; font-weight: 700; }.news-share div { display: flex; flex-wrap: wrap; gap: 8px; }.news-share a { padding: 7px 10px; border-radius: 8px; background: #eaf6e4; color: var(--annur); font-size: 12px; }.related-news { position: sticky; top: 96px; padding: 25px; }.related-news h2 { margin: 0 0 18px; color: var(--ink); font-size: 24px; }.related-news-item { display: grid; grid-template-columns: 58px 1fr 15px; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid #edf1ed; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.35; }.related-news-item img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }.related-news-item small { display: block; margin-top: 4px; color: #7a887d; font-size: 11px; font-weight: 600; }.related-news-item > i { color: var(--annur); font-size: 11px; transition: transform .2s; }.related-news-item:hover { color: var(--annur); }.related-news-item:hover > i { transform: translateX(3px); }
.gallery-section { min-height: 610px; padding: 78px 0 88px; background: radial-gradient(circle at 86% 0, #d9f1cc 0, transparent 24%), #f6faf4; }.gallery-page-header { max-width: 690px; margin: 0 auto 42px; text-align: center; }.gallery-page-header h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(39px, 5vw, 61px); line-height: 1.03; letter-spacing: -.06em; }.gallery-page-header h1 em { color: var(--annur); font-style: normal; }.gallery-page-header p { margin: 0; color: #65766a; font-size: 16px; line-height: 1.7; }.gallery-grid { column-count: 4; column-gap: 18px; }.gallery-card { position: relative; display: block; width: 100%; margin: 0 0 18px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #dcebdd; box-shadow: 0 11px 25px rgba(16,72,38,.09); break-inside: avoid; cursor: zoom-in; opacity: 0; transform: translateY(19px); transition: opacity .5s ease var(--teacher-delay), transform .5s ease var(--teacher-delay), box-shadow .25s ease; }.gallery-card.is-visible { opacity: 1; transform: translateY(0); }.gallery-card:hover { box-shadow: 0 19px 36px rgba(16,72,38,.18); transform: translateY(-5px); }.gallery-card img { display: block; width: 100%; height: auto; transition: transform .5s ease; }.gallery-card:hover img { transform: scale(1.06); }.gallery-overlay { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 34px 16px 14px; background: linear-gradient(transparent, rgba(8,45,25,.85)); color: #fff; font-size: 13px; font-weight: 800; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; text-align: left; }.gallery-card:hover .gallery-overlay, .gallery-card:focus .gallery-overlay { opacity: 1; transform: translateY(0); }.gallery-overlay i { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 50%; background: #fff; color: var(--annur); font-size: 15px; }.gallery-modal { position: fixed; z-index: 9999; inset: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; padding: 34px 6vw; background: rgba(3,22,12,.94); backdrop-filter: blur(10px); }.gallery-modal[hidden] { display: none; }.gallery-modal-figure { display: flex; width: 100%; max-width: 1100px; max-height: calc(100vh - 80px); align-items: center; justify-content: center; flex-direction: column; margin: auto; }.gallery-modal-figure img { display: block; max-width: 100%; max-height: calc(100vh - 135px); border-radius: 9px; box-shadow: 0 22px 55px rgba(0,0,0,.38); object-fit: contain; }.gallery-modal-figure figcaption { max-width: 100%; margin-top: 14px; color: #fff; font-size: 15px; font-weight: 700; text-align: center; }.gallery-modal-close, .gallery-modal-nav { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.11); color: #fff; transition: background .2s, transform .2s; }.gallery-modal-close:hover, .gallery-modal-nav:hover { background: #fff; color: var(--annur-dark); transform: scale(1.07); }.gallery-modal-close { position: absolute; top: 22px; right: 27px; width: 44px; height: 44px; }.gallery-modal-nav { width: 51px; height: 51px; justify-self: center; font-size: 20px; }.gallery-open { overflow: hidden; }
.contact-section { min-height: 630px; padding: 78px 0 90px; background: radial-gradient(circle at 8% 6%, #e7f6de 0, transparent 26%), #f6faf4; }.contact-page-header { max-width: 760px; margin: 0 auto 44px; text-align: center; }.contact-page-header h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(39px, 5vw, 61px); line-height: 1.03; letter-spacing: -.06em; }.contact-page-header h1 em { color: var(--annur); font-style: normal; }.contact-page-header p { margin: 0; color: #65766a; font-size: 16px; line-height: 1.7; }.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid #deebdf; border-radius: 23px; background: #fff; box-shadow: 0 20px 42px rgba(19,77,41,.11); }.contact-info-panel { padding: 39px; background: linear-gradient(145deg, #104e2d, #237c43); color: #fff; }.contact-intro > span { color: #c7f394; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.contact-intro h2 { margin: 9px 0; color: #fff; font-size: 31px; line-height: 1.2; letter-spacing: -.035em; }.contact-intro p { margin: 0 0 25px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.65; }.contact-item { display: grid; grid-template-columns: 43px minmax(0, 1fr) 16px; gap: 14px; align-items: center; margin-top: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.16); color: #fff; transition: padding .2s; }.contact-item:hover { padding-left: 5px; color: #fff; }.contact-item > i { color: #c7f394; font-size: 13px; }.contact-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; background: rgba(203,244,156,.16); color: #d7ffad; font-size: 19px; }.contact-item small, .contact-item strong { display: block; }.contact-item small { margin-bottom: 3px; color: rgba(255,255,255,.64); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.contact-item strong { color: #fff; font-size: 14px; line-height: 1.45; word-break: break-word; }.contact-address { grid-template-columns: 43px minmax(0, 1fr); }.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }.contact-actions a { display: inline-flex; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 10px; background: #fff; color: var(--annur-dark); font-size: 13px; font-weight: 800; }.contact-actions a + a { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; }.contact-map-panel { position: relative; min-height: 530px; background: #dceadc; }.contact-map-panel iframe { width: 100%; height: 100%; min-height: 530px; border: 0; filter: saturate(.85); }.map-label { position: absolute; z-index: 1; top: 20px; left: 20px; display: flex; gap: 10px; align-items: center; padding: 10px 13px; border: 1px solid #e0ebe0; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 9px 20px rgba(0,0,0,.12); color: var(--annur-dark); }.map-label > i { font-size: 21px; }.map-label span { font-size: 13px; font-weight: 800; }.map-label small { display: block; margin-top: 2px; color: #718176; font-size: 11px; font-weight: 600; }
.vision-section { padding: 80px 0 91px; overflow: hidden; background: radial-gradient(circle at 12% 9%, #eaf8e0 0, transparent 24%), #fff; }.vision-heading { max-width: 780px; margin: 0 auto 45px; text-align: center; }.vision-heading h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(39px, 5vw, 60px); line-height: 1.04; letter-spacing: -.06em; }.vision-heading h1 em { color: var(--annur); font-style: normal; }.vision-heading p { margin: 0; color: #66776c; font-size: 16px; line-height: 1.7; }.vision-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 23px; align-items: stretch; }.vision-statement { position: relative; display: flex; min-height: 490px; justify-content: center; flex-direction: column; overflow: hidden; padding: 45px; border-radius: 23px; background: linear-gradient(145deg, #114d2d, #258449); box-shadow: 0 20px 42px rgba(18,80,42,.19); color: #fff; }.vision-statement > *:not(.vision-orb) { position: relative; z-index: 1; }.vision-label { display: inline-flex; align-self: flex-start; margin-bottom: 30px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; color: #d4f6a6; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.vision-statement > i { margin-bottom: 20px; color: #c8f392; font-size: 33px; }.vision-statement h2 { margin: 0 0 18px; color: #fff; font-size: clamp(31px, 3.2vw, 45px); line-height: 1.17; letter-spacing: -.045em; }.vision-statement p { max-width: 430px; margin: 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.75; }.vision-orb { position: absolute; border-radius: 50%; background: rgba(204,245,148,.12); }.orb-one { top: -107px; right: -105px; width: 290px; height: 290px; }.orb-two { bottom: -74px; right: 24px; width: 155px; height: 155px; border: 28px solid rgba(255,255,255,.08); background: transparent; }.mission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.mission-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 15px; min-height: 236px; padding: 28px 24px; overflow: hidden; border: 1px solid #e0ebe1; border-radius: 19px; background: #fff; box-shadow: 0 12px 28px rgba(19,79,40,.07); opacity: 0; transform: translateY(22px); transition: opacity .55s ease var(--teacher-delay), transform .55s ease var(--teacher-delay), box-shadow .25s ease; }.mission-card.is-visible { opacity: 1; transform: translateY(0); }.mission-card:hover { box-shadow: 0 21px 37px rgba(19,79,40,.14); transform: translateY(-5px); }.mission-card > span { position: absolute; top: 20px; right: 20px; color: #cfddcf; font-size: 12px; font-weight: 800; }.mission-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #e5f5de; color: var(--annur); font-size: 21px; }.mission-card h3 { margin: 10px 0 9px; color: var(--ink); font-size: 20px; }.mission-card p { grid-column: span 2; margin: 4px 0 0; color: #64746a; font-size: 14px; line-height: 1.65; }
.call-action { background: linear-gradient(145deg, #173f29, #237640); }
.call-action .cta-content h2, .call-action .cta-content p { color: #fff; }
.call-action .galeri { overflow: hidden; border-radius: 14px; border: 2px solid rgba(255,255,255,.2); }
.footer { margin-top: 0; background: #103d25; }
.footer .footer-top { padding: 42px 0 27px; }
.footer .footer-bottom { padding: 17px 0; border-top: 1px solid rgba(255,255,255,.14); text-align: center; }
.footer .footer-bottom p { margin: 0; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.footer .endFooter { display: none; }
.footer .logo img { max-height: 48px; width: auto; }
.pagination.tes { gap: 8px; flex-wrap: wrap; }
.pagination.tes li a { border-radius: 9px; background: #fff; color: var(--annur); }
@keyframes orbFloat { 50% { transform: translate(-30px, 35px) scale(1.12); } }
@keyframes photoDrift { 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes cardFloat { 50% { transform: translateY(-10px); } }
@media (max-width: 991px) { .site-nav { min-height: 68px; }.brand img { max-height: 43px; }.nav-toggle { display: grid; width: 43px; height: 43px; place-content: center; gap: 5px; padding: 0; border: 1px solid #dce9df; border-radius: 11px; background: #f7fbf5; }.nav-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--annur-dark); transition: transform .25s, opacity .25s; }.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }.nav-overlay { position: fixed; z-index: 1001; inset: 0; display: block; visibility: hidden; background: rgba(6,35,19,.38); opacity: 0; transition: opacity .35s ease, visibility .35s ease; }.nav-overlay.is-open { visibility: visible; opacity: 1; }.site-menu { position: fixed; z-index: 1002; top: 0; right: 0; display: flex; width: min(84vw, 355px); height: 100vh; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 4px; padding: 19px; overflow-y: auto; background: #fff; box-shadow: -20px 0 50px rgba(0,0,0,.17); opacity: 0; transform: translateX(105%); transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }.site-menu.is-open { opacity: 1; transform: translateX(0); }.mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid #e7efe8; color: var(--annur-dark); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.nav-close { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 10px; background: #eef7ea; color: var(--annur-dark); }.site-menu > a { min-height: 48px; padding: 13px 12px; border-radius: 11px; font-size: 15px; }.site-menu > a > i { display: inline-block; width: 22px; color: var(--annur); font-size: 17px; }.site-menu > a::after { display: none; }.site-menu > a.active { background: #eaf6e4; color: var(--annur-dark); }.site-menu > a.nav-login { margin-top: 8px; border-top: 1px solid #e8efe8; border-radius: 0; padding-top: 20px; }.site-menu > a.nav-contact { justify-content: center; margin: 14px 0 0; padding: 14px; }.hero-copy { text-align: center; padding: 72px 0 15px; } .hero-actions { justify-content: center; } .hero-visual { min-height: 360px; } .hero-photo { width: min(310px, 72%); border-width: 7px; } .hero-card { left: 12%; bottom: 30px; } }
@media (max-width: 991px) { .purpose-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 991px) { .teacher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teacher-photo { height: 330px; } }
@media (max-width: 991px) { .student-hero { padding: 43px; } .student-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .student-stat-card.total { grid-column: span 2; } }
@media (max-width: 991px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.news-card-featured { grid-column: span 2; }.news-detail-layout { grid-template-columns: 1fr; }.related-news { position: static; }.related-news-item { max-width: none; } }
@media (max-width: 991px) { .gallery-grid { column-count: 3; } }
@media (max-width: 991px) { .contact-layout { grid-template-columns: 1fr; }.contact-map-panel, .contact-map-panel iframe { min-height: 420px; } }
@media (max-width: 991px) { .vision-layout { grid-template-columns: 1fr; }.vision-statement { min-height: 370px; }.mission-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .site-nav { min-height: 63px; }.brand img { max-height: 39px; }.hero-carousel { min-height: 650px; } .hero-copy { padding-top: 58px; } .hero-copy h1 { font-size: 39px; } .hero-copy p { font-size: 16px; } .hero-actions .btn { padding: 12px 15px; } .hero-visual { min-height: 300px; } .hero-photo { width: 235px; border-radius: 25px; } .hero-card { left: 4%; bottom: 19px; font-size: 12px; } .section { padding: 62px 0; } .section-title { margin-bottom: 30px; } }
@media (max-width: 575px) { .mobile-contact-float { position: fixed; z-index: 950; right: 16px; bottom: 18px; display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }.mobile-contact-float a { display: flex; align-items: center; min-width: 48px; height: 48px; justify-content: flex-start; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 99px; background: var(--annur); box-shadow: 0 12px 25px rgba(14,74,38,.26); color: #fff; transition: width .28s cubic-bezier(.2,.8,.2,1), transform .2s, background .2s; }.mobile-contact-float a:hover, .mobile-contact-float a:focus { width: 139px; background: var(--annur-dark); color: #fff; transform: translateY(-2px); }.mobile-contact-float i { display: grid; width: 47px; height: 47px; flex: 0 0 47px; place-items: center; font-size: 20px; }.mobile-contact-float span { padding-right: 15px; white-space: nowrap; font-size: 12px; font-weight: 800; }.mobile-contact-float .float-whatsapp { background: #1ca951; }.mobile-contact-float .float-whatsapp:hover, .mobile-contact-float .float-whatsapp:focus { background: #11823b; } }
@media (max-width: 575px) { .purpose-section { padding: 66px 0 54px; } .purpose-heading { align-items: center; margin-bottom: 23px; } .purpose-controls { gap: 7px; } .purpose-control { width: 39px; height: 39px; } .purpose-card { flex-basis: 84%; min-height: 230px; padding: 23px; } .purpose-card p { font-size: 15px; } .purpose-hint { font-size: 12px; } }
@media (max-width: 575px) { .teacher-grid { gap: 15px; } .teacher-photo { height: 230px; } .teacher-info { padding: 15px; } .teacher-info h3 { min-height: 0; font-size: 16px; } .teacher-info p { font-size: 13px; } .teacher-badge { top: 10px; left: 10px; padding: 5px 8px; font-size: 10px; } }
@media (max-width: 575px) { .student-section { min-height: 0; padding: 48px 0 58px; } .student-hero { display: block; padding: 31px 25px; border-radius: 20px; } .student-hero p { font-size: 14px; } .student-total { width: 145px; min-height: 145px; margin: 26px auto 0; } .student-total strong { font-size: 44px; } .student-stat-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 14px; } .student-stat-card, .student-stat-card.total { grid-column: auto; padding: 23px; } .student-stat-card > strong { font-size: 43px; } .student-stat-icon { margin-bottom: 16px; } .student-note { align-items: flex-start; font-size: 12px; } }
@media (max-width: 575px) { .news-section, .news-detail-section { padding: 49px 0 60px; }.news-page-header { margin-bottom: 29px; text-align: left; }.news-page-header h1 { font-size: 39px; }.news-page-header p { font-size: 14px; }.news-grid { grid-template-columns: 1fr; gap: 16px; }.news-card-featured { display: block; grid-column: auto; }.news-card-featured .news-image, .news-image { height: 210px; min-height: 0; }.news-card-featured .news-content { padding: 20px; }.news-card-featured .news-content h2, .news-content h2 { font-size: 21px; }.news-detail-layout { gap: 17px; }.news-article { padding: 23px 19px; border-radius: 16px; }.news-article h1 { font-size: 31px; }.news-article-body { font-size: 15px; }.news-share { display: block; }.news-share div { margin-top: 10px; }.related-news { padding: 20px; border-radius: 16px; } }
@media (max-width: 575px) { .gallery-section { padding: 49px 0 58px; }.gallery-page-header { margin-bottom: 28px; text-align: left; }.gallery-page-header h1 { font-size: 39px; }.gallery-page-header p { font-size: 14px; }.gallery-grid { column-count: 2; column-gap: 11px; }.gallery-card { margin-bottom: 11px; border-radius: 11px; }.gallery-overlay { display: none; }.gallery-modal { grid-template-columns: 45px minmax(0, 1fr) 45px; padding: 25px 5px; }.gallery-modal-nav { width: 37px; height: 37px; font-size: 15px; }.gallery-modal-close { top: 12px; right: 12px; width: 37px; height: 37px; }.gallery-modal-figure img { max-height: calc(100vh - 108px); }.gallery-modal-figure figcaption { font-size: 13px; } }
@media (max-width: 575px) { .contact-section { padding: 49px 0 60px; }.contact-page-header { margin-bottom: 29px; text-align: left; }.contact-page-header h1 { font-size: 39px; }.contact-page-header p { font-size: 14px; }.contact-layout { border-radius: 17px; }.contact-info-panel { padding: 27px 21px; }.contact-intro h2 { font-size: 27px; }.contact-map-panel, .contact-map-panel iframe { min-height: 350px; }.map-label { top: 13px; left: 13px; } }
@media (max-width: 575px) { .vision-section { padding: 50px 0 61px; }.vision-heading { margin-bottom: 29px; text-align: left; }.vision-heading h1 { font-size: 39px; }.vision-heading p { font-size: 14px; }.vision-statement { min-height: 353px; padding: 29px 25px; border-radius: 19px; }.vision-label { margin-bottom: 20px; }.vision-statement h2 { font-size: 30px; }.vision-statement p { font-size: 14px; }.mission-list { grid-template-columns: 1fr; gap: 13px; margin-top: 13px; }.mission-card { min-height: 0; padding: 22px; }.mission-card h3 { margin-top: 9px; }.mission-card p { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }