.page-about { color: #F2FFF6; overflow-x: hidden; } .page-about__hero-section { margin: 0; padding-top: 10px; box-sizing: border-box; } .page-about__hero-image { margin-bottom: 24px; } .page-about__hero-img { display: block; width: 100%; height: auto; aspect-ratio: 17 / 5; object-fit: cover; border-radius: 16px; } .page-about__hero-content { text-align: center; max-width: 860px; margin: 0 auto; padding: 0 16px; } .page-about__hero-title { font-size: clamp(1.8rem, 4.5vw, 3rem); margin: 0 0 12px; color: #F2FFF6; font-weight: 700; line-height: 1.25; letter-spacing: 1px; } .page-about__hero-description { font-size: 1.125rem; color: #A7D9B8; max-width: 780px; margin: 0 auto; line-height: 1.7; } .page-about__intro { padding: 64px 16px; } .page-about__intro-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; } .page-about__intro-text { flex: 1 1 450px; min-width: 280px; } .page-about__intro-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 24px; color: #F2FFF6; } .page-about__intro-paragraph { font-size: 1rem; color: #A7D9B8; margin-bottom: 16px; line-height: 1.8; } .page-about__intro-stats { flex: 1 1 400px; min-width: 280px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .page-about__stat-item { flex: 1 1 150px; text-align: center; background: #11271B; border: 1px solid #2E7A4E; border-radius: 16px; padding: 24px 16px; } .page-about__stat-number { font-size: 2.75rem; font-weight: 800; color: #F2C14E; display: block; line-height: 1.2; } .page-about__stat-label { color: #A7D9B8; font-size: 0.9375rem; display: block; } .page-about__mission-section { padding: 0 16px 64px; } .page-about__mission-card { background: linear-gradient(145deg, #11271B, #08160F); border: 1px solid #2E7A4E; border-radius: 20px; padding: 36px; max-width: 900px; margin: 0 auto; text-align: center; } .page-about__mission-title { font-size: clamp(1.6rem, 3vw, 2.3rem); color: #F2C14E; margin: 0 0 24px; font-weight: 700; } .page-about__mission-text { font-size: 1.125rem; line-height: 1.75; color: #F2FFF6; max-width: 780px; margin: 0 auto; } .page-about__values-section { padding: 20px 16px 64px; background: rgba(17, 39, 27, 0.35); margin-top: 20px; } .page-about__values-inner { max-width: 1100px; margin: 0 auto; } .page-about__values-title { text-align: center; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #F2FFF6; margin: 0 0 44px; position: relative; } .page-about__values-title::after { content: ""; position: absolute; bottom: -14px; left: 50%; width: 80px; height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, #57E38D, #22C768); border-radius: 4px; } .page-about__values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .page-about__value-item { background: #11271B; border: 1px solid #2E7A4E; border-radius: 16px; padding: 28px 24px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: transform 0.3s ease, border-color 0.3s ease; } .page-about__value-item:hover { transform: translateY(-6px); border-color: #57E38D; } .page-about__value-subtitle { color: #57E38D; font-size: 1.3rem; margin: 0 0 12px; } .page-about__value-text { color: #A7D9B8; line-height: 1.65; } .page-about__partners-logo-section { padding: 64px 16px; } .page-about__partners-logo-header { text-align: center; max-width: 800px; margin: 0 auto 28px; } .page-about__partners-logo-label { font-size: 0.875rem; letter-spacing: 2px; text-transform: uppercase; color: #F2C14E; margin: 0 0 8px; } .page-about__partners-logo-title { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 700; color: #F2FFF6; margin-bottom: 12px; } .page-about__partners-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; justify-items: center; max-width: 1200px; width: 100%; margin: 0 auto; } .page-about__partners-logo-item { display: flex; flex-direction: column; align-items: center; padding: 20px 12px; background: #11271B; border: 1px solid #2E7A4E; border-radius: 18px; width: 100%; max-width: 240px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .page-about__partners-logo-item:hover { transform: translateY(-6px); box-shadow: 0 12px 35px rgba(87, 227, 141, 0.12); } .page-about__partners-logo-img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; display: block; } .page-about__partners-logo-caption { font-size: 0.9rem; color: #A7D9B8; text-align: center; max-width: 180px; line-height: 1.5; margin: 6px auto 0; } .page-about__partners-logo-item:nth-child(5) { grid-column: 2; } .page-about__partners-logo-item:nth-child(6) { grid-column: 3; } .page-about__guide-section { padding: 0 16px 80px; } .page-about__guide-item { display: flex; flex-direction: column; gap: 32px; background: #11271B; border: 1px solid #2E7A4E; border-radius: 20px; max-width: 1100px; margin: 0 auto; padding: 28px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .page-about__guide-figure { margin: 0; } .page-about__guide-figure-img { display: block; width: 100%; max-width: 840px; height: auto; max-height: 480px; margin: 0 auto; border-radius: 16px; object-fit: cover; } .page-about__guide-content { padding: 0 8px; max-width: 800px; margin: 0 auto; } .page-about__guide-title { color: #57E38D; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin: 0 0 20px; text-align: left; } .page-about__guide-paragraph { color: #A7D9B8; line-height: 1.8; font-size: 1.0625rem; } @media (max-width: 1024px) { .page-about__intro-inner { flex-direction: column; } .page-about__partners-logo-grid { grid-template-columns: repeat(3, 1fr); } .page-about__partners-logo-item:nth-child(4) { grid-column: auto; } .page-about__partners-logo-item:nth-child(5) { grid-column: auto; } .page-about__partners-logo-item:nth-child(6) { grid-column: auto; } .page-about__partners-logo-item:nth-child(3) { grid-column: 2; } } @media (max-width: 768px) { .page-about { color: #F2FFF6; } .page-about__hero-section { padding-top: 10px; } .page-about__hero-img { max-width: 100% !important; height: auto !important; aspect-ratio: 2 / 1; } .page-about__hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem); } .page-about__hero-description { font-size: 1rem; } .page-about__intro { padding: 44px 14px; } .page-about__intro-stats { flex-direction: column; align-items: center; } .page-about__stat-item { width: 100%; max-width: 320px; } .page-about__mission-card { padding: 28px 18px; } .page-about__values-grid { grid-template-columns: 1fr; } .page-about__partners-logo-section { padding: 48px 14px; } .page-about__partners-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .page-about__partners-logo-item { width: 100%; padding: 16px 8px; max-width: none; } .page-about__partners-logo-item:nth-child(5), .page-about__partners-logo-item:nth-child(6), .page-about__partners-logo-item:nth-child(3) { grid-column: auto; } .page-about__partners-logo-img { max-width: 100% !important; height: auto !important; } .page-about__partners-logo-caption { font-size: 0.85rem; } .page-about__guide-section { padding-bottom: 50px; } .page-about__guide-item { padding: 20px 14px; gap: 20px; } .page-about__guide-figure-img { width: 100%; margin: 0 auto; max-width: 100%; max-height: none; } .page-about__guide-content { padding: 0; } .page-about__guide-title { font-size: 1.5rem; } .page-about img { max-width: 100% !important; height: auto !important; } }