/* =========================================================
KIYA LEARNING AUSTRALIA
ABOUT PAGE
EDUCATION THEME
========================================================= */

.about-page {
overflow: hidden;
background: #fffaf7;
color: #303136;
}

/* =========================================================
HERO
========================================================= */

.about-page-hero {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
padding: 85px 0 70px;
overflow: hidden;
background:
linear-gradient(
115deg,
rgba(17, 25, 39, .98) 0%,
rgba(17, 25, 39, .93) 48%,
rgba(17, 25, 39, .68) 100%
);
color: #fff;
}

.about-hero-image {
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(
90deg,
rgba(17,25,39,.96) 0%,
rgba(17,25,39,.88) 40%,
rgba(17,25,39,.50) 72%,
rgba(17,25,39,.25) 100%
),
url("/frontend/images/about-australia.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.02);
}

.about-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(
circle at 82% 20%,
rgba(242, 102, 74, .20),
transparent 25%
),
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.18)
);
pointer-events: none;
}

/* =========================================================
GRID
========================================================= */

.about-hero-grid {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: .055;

background-image:
    linear-gradient(
        rgba(255,255,255,.5) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.5) 1px,
        transparent 1px
    );

background-size: 42px 42px;

}

/* =========================================================
HERO GLOW
========================================================= */

.about-hero-glow {
position: absolute;
width: 520px;
height: 520px;
right: -190px;
top: -190px;
border-radius: 50%;
background: rgba(244,81,30,.12);
filter: blur(30px);
pointer-events: none;
z-index: 2;
}

.about-page-hero .container {
position: relative;
z-index: 5;
}

/* =========================================================
HERO CONTENT
========================================================= */

.about-hero-content {
max-width: 760px;
}

.about-page-hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ff907c;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.6px;
}

.about-page-hero h1 {
margin: 15px 0 20px;
max-width: 760px;
color: #fff;
font-size: clamp(42px, 5.3vw, 68px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -2px;
}

.about-page-hero h1 span {
display: block;
color: #ff765f;
}

.about-page-hero p {
max-width: 660px;
margin: 0;
color: rgba(255,255,255,.76);
font-size: 16px;
line-height: 1.85;
}

/* =========================================================
HERO ACTIONS
========================================================= */

.about-hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
margin-top: 28px;
}

.about-hero-btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 21px;
border-radius: 10px;
background: linear-gradient(
135deg,
#f4511e,
#dc3f13
);
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
box-shadow:
0 12px 30px rgba(244,81,30,.22);
transition: .25s ease;
}

.about-hero-btn i {
transition: transform .25s ease;
}

.about-hero-btn {
color: #fff;
transform: translateY(-2px);
}

.about-hero-btn i {
transform: translate(3px,-3px);
}

.about-hero-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,.82);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: .2s ease;
}

.about-hero-link i {
color: #ff806d;
font-size: 19px;
}

.about-hero-link {
color: #fff;
}

/* =========================================================
BREADCRUMB
========================================================= */

.about-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
padding: 8px 13px;
min-height: 30px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 7px;
background: rgba(255,255,255,.05);
backdrop-filter: blur(8px);
font-size: 11px;
}

.about-breadcrumb a {
color: rgba(255,255,255,.88);
text-decoration: none;
transition: .2s ease;
}

.about-breadcrumb a {
color: #ff806d;
}

.about-breadcrumb span {
color: rgba(255,255,255,.35);
}

.about-breadcrumb span {
color: #ff806d;
font-weight: 600;
}

/* =========================================================
HERO CARD
========================================================= */

.about-hero-card {
position: relative;
overflow: hidden;
padding: 18px;
border-radius: 24px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.16);
backdrop-filter: blur(14px);
box-shadow:
0 30px 80px rgba(0,0,0,.28);
}

.about-hero-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -75px;
bottom: -85px;
border-radius: 50%;
background: rgba(244,81,30,.12);
pointer-events: none;
}

/* =========================================================
HERO IMAGE
========================================================= */

.about-hero-card-image {
position: relative;
overflow: hidden;
height: 190px;
border-radius: 17px;
background: #17181d;
}

.about-hero-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .5s ease;
}

.about-hero-card .about-hero-card-image img {
transform: scale(1.05);
}

.about-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.02),
rgba(0,0,0,.55)
);
}

.about-image-badge {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 11px;
border-radius: 8px;
background: rgba(17,25,39,.82);
border: 1px solid rgba(255,255,255,.15);
color: #fff;
font-size: 10px;
font-weight: 700;
backdrop-filter: blur(8px);
}

.about-image-badge i {
color: #7ddc9b;
}

/* =========================================================
CODE / LEARNING WINDOW
========================================================= */

.about-code-window {
position: relative;
overflow: hidden;
margin-top: 15px;
border-radius: 15px;
background: #0d0e12;
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 15px 35px rgba(0,0,0,.20);
}

.code-window-top {
height: 40px;
display: flex;
align-items: center;
gap: 7px;
padding: 0 13px;
background: #17181d;
border-bottom: 1px solid rgba(255,255,255,.06);
}

.code-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}

.code-dot.red {
background: #ff5f57;
}

.code-dot.yellow {
background: #ffbd2e;
}

.code-dot.green {
background: #28c840;
}

.code-file {
margin-left: 7px;
color: rgba(255,255,255,.42);
font-family: monospace;
font-size: 10px;
}

.code-content {
padding: 19px 17px 21px;
display: flex;
flex-direction: column;
gap: 9px;
font-family: "Courier New", monospace;
font-size: 11px;
line-height: 1.6;
}

.code-line {
color: rgba(255,255,255,.63);
white-space: nowrap;
}

.code-keyword {
color: #ff806d;
font-weight: 700;
}

.code-string {
color: #a9e879;
}

.code-function {
color: #ff9b86;
}

.code-success {
color: #a9e879;
}

/* =========================================================
HERO CARD CONTENT
========================================================= */

.about-card-content {
position: relative;
z-index: 3;
display: flex;
align-items: center;
gap: 14px;
margin-top: 17px;
padding: 3px 2px;
}

.about-card-icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: rgba(244,81,30,.13);
border: 1px solid rgba(244,81,30,.22);
color: #ff806d;
font-size: 18px;
}

.about-card-content h3 {
margin: 0 0 4px;
color: #fff;
font-size: 16px;
font-weight: 700;
}

.about-card-content p {
margin: 0;
color: rgba(255,255,255,.56);
font-size: 11px;
line-height: 1.55;
}

/* =========================================================
COMMON EYEBROW
========================================================= */

.about-page .eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
color: #f4511e;
text-transform: uppercase;
letter-spacing: 1.7px;
font-size: 11px;
font-weight: 800;
}

.about-page .eyebrow.light {
color: #ff806d;
}

/* =========================================================
INTRO
========================================================= */

.about-intro {
background: #fff;
}

.about-intro h2,
.why-about-section h2,
.about-process h2,
.about-learning-areas h2 {
margin: 12px 0 22px;
color: #18191d;
font-size: clamp(34px,4vw,48px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.8px;
}

.about-intro h2 span,
.why-about-section h2 span,
.about-process h2 span,
.about-learning-areas h2 span {
color: #f4511e;
}

.about-intro p {
color: #72747a;
line-height: 1.85;
}

.about-intro .lead {
color: #505158;
font-size: 17px;
line-height: 1.8;
}

/* =========================================================
FEATURE GRID
========================================================= */

.about-feature-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 18px;
}

.about-feature {
padding: 27px;
border: 1px solid #eee2de;
border-radius: 18px;
background: #fff;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.about-feature {
transform: translateY(-5px);
border-color: rgba(244,81,30,.20);
box-shadow:
0 18px 40px rgba(0,0,0,.07);
}

.feature-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #fff0ec;
color: #f4511e;
font-size: 21px;
margin-bottom: 17px;
}

.about-feature h4 {
margin-bottom: 8px;
color: #18191d;
font-size: 18px;
font-weight: 700;
}

.about-feature p {
margin: 0;
color: #72747a;
font-size: 13px;
line-height: 1.7;
}

/* =========================================================
AUSTRALIA LEARNING STRIP
========================================================= */

.australia-learning-strip {
position: relative;
overflow: hidden;
padding: 55px 0;
background:
radial-gradient(
circle at 85% 30%,
rgba(244,81,30,.18),
transparent 26%
),
linear-gradient(
135deg,
#18191d,
#101114
);
}

.australia-learning-inner {
display: flex;
align-items: center;
gap: 24px;
}

.australia-learning-icon {
flex: 0 0 66px;
width: 66px;
height: 66px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: rgba(244,81,30,.13);
border: 1px solid rgba(244,81,30,.22);
color: #ff806d;
font-size: 27px;
}

.australia-learning-content {
flex: 1;
}

.australia-learning-content h3 {
margin: 8px 0 7px;
color: #fff;
font-size: 27px;
font-weight: 800;
}

.australia-learning-content h3 span {
color: #ff806d;
}

.australia-learning-content p {
max-width: 700px;
margin: 0;
color: rgba(255,255,255,.63);
font-size: 14px;
line-height: 1.7;
}

.australia-learning-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: #fff;
font-size: 12px;
font-weight: 700;
}

.australia-learning-badge i {
color: #ff806d;
}

/* =========================================================
STATS
========================================================= */

.about-stats {
position: relative;
overflow: hidden;
padding: 60px 0;
background:
radial-gradient(
circle at 80% 20%,
rgba(244,81,30,.12),
transparent 25%
),
#18191d;
color: #fff;
}

.about-stats::before {
content: "";
position: absolute;
inset: 0;
opacity: .035;
background-image:
linear-gradient(
rgba(255,255,255,.4) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.4) 1px,
transparent 1px
);
background-size: 40px 40px;
}

.about-stats .container {
position: relative;
z-index: 2;
}

.stat-box {
padding: 20px;
border-right: 1px solid rgba(255,255,255,.08);
}

.stat-box i {
font-size: 27px;
color: #ff806d;
}

.stat-box h3 {
margin: 11px 0 5px;
color: #fff;
font-size: 25px;
font-weight: 800;
}

.stat-box p {
margin: 0;
color: rgba(255,255,255,.58);
font-size: 13px;
}

/* =========================================================
MISSION / VISION
========================================================= */

.mission-section {
background: #fff8f5;
}

.mission-card {
position: relative;
overflow: hidden;
height: 100%;
padding: 40px;
border-radius: 22px;
background: #fff;
border: 1px solid #eee2de;
box-shadow:
0 10px 35px rgba(0,0,0,.035);
transition: .3s ease;
}

.mission-card::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -70px;
bottom: -85px;
border-radius: 50%;
background: rgba(244,81,30,.035);
pointer-events: none;
}

.mission-card {
transform: translateY(-5px);
box-shadow:
0 18px 45px rgba(0,0,0,.07);
}

.mission-icon {
position: relative;
z-index: 2;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #fff0ec;
color: #f4511e;
font-size: 24px;
margin-bottom: 24px;
}

.mission-card h3 {
position: relative;
z-index: 2;
margin: 12px 0 18px;
color: #18191d;
font-size: 27px;
font-weight: 800;
}

.mission-card p {
position: relative;
z-index: 2;
color: #72747a;
line-height: 1.8;
}

/* =========================================================
WHY CHOOSE
========================================================= */

.why-about-section {
background: #fff;
}

.section-description {
max-width: 680px;
color: #72747a;
line-height: 1.75;
}

.why-card {
position: relative;
height: 100%;
padding: 30px;
border: 1px solid #eee2de;
border-radius: 20px;
background: #fff;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.why-card {
transform: translateY(-5px);
border-color: rgba(244,81,30,.20);
box-shadow:
0 18px 40px rgba(0,0,0,.065);
}

.why-card > i {
display: inline-flex;
width: 54px;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 15px;
background: #fff0ec;
color: #f4511e;
font-size: 22px;
margin-bottom: 19px;
}

.why-card h4 {
margin-bottom: 9px;
color: #18191d;
font-size: 19px;
font-weight: 700;
}

.why-card p {
margin: 0;
color: #72747a;
font-size: 14px;
line-height: 1.7;
}

/* =========================================================
LEARNING AREAS
========================================================= */

.about-learning-areas {
background: #fff8f5;
}

.learning-area-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.learning-area-card {
position: relative;
height: 100%;
padding: 30px;
border-radius: 20px;
background: #fff;
border: 1px solid #eee2de;
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.learning-area-card {
transform: translateY(-5px);
border-color: rgba(244,81,30,.20);
box-shadow:
0 18px 40px rgba(0,0,0,.065);
}

.learning-area-icon {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border-radius: 15px;
background: #fff0ec;
color: #f4511e;
font-size: 22px;
}

.learning-area-card h4 {
margin-bottom: 9px;
color: #18191d;
font-size: 19px;
font-weight: 700;
}

.learning-area-card p {
margin: 0;
color: #72747a;
font-size: 14px;
line-height: 1.7;
}

/* =========================================================
PROCESS
========================================================= */

.about-process {
background: #fff;
}

.process-card {
position: relative;
height: 100%;
padding: 34px 28px;
border-radius: 20px;
background: #fff;
border: 1px solid #eee2de;
transition: .3s ease;
}

.process-card {
transform: translateY(-5px);
box-shadow:
0 16px 38px rgba(0,0,0,.065);
}

.process-number {
position: absolute;
top: 18px;
right: 20px;
font-family: monospace;
font-size: 11px;
font-weight: 800;
color: #c9c1bd;
}

.process-card > i {
display: block;
font-size: 29px;
color: #f4511e;
margin-bottom: 21px;
}

.process-card h4 {
color: #18191d;
font-size: 19px;
font-weight: 700;
}

.process-card p {
margin: 0;
color: #72747a;
font-size: 14px;
line-height: 1.7;
}

/* =========================================================
CTA
========================================================= */

.about-cta {
position: relative;
overflow: hidden;
padding: 80px 0;
background:
linear-gradient(
110deg,
rgba(17,25,39,.98),
rgba(17,25,39,.88)
),
url("/frontend/images/about-australia.jpg");
background-size: cover;
background-position: center;
}

.about-cta-image {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 90% 50%,
rgba(244,81,30,.18),
transparent 28%
);
pointer-events: none;
}

.about-cta-code {
position: absolute;
right: 5%;
bottom: -65px;
color: rgba(244,81,30,.045);
font-family: monospace;
font-size: 230px;
font-weight: 900;
line-height: 1;
pointer-events: none;
}

.cta-box {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.cta-box h2 {
margin: 12px 0;
color: #fff;
font-size: clamp(32px,4vw,48px);
font-weight: 800;
letter-spacing: -.8px;
}

.cta-box h2 span {
color: #ff6b5c;
}

.cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.7;
}

.about-cta-btn {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 23px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#f4511e,
#d83d10
);
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow:
0 10px 25px rgba(244,81,30,.20);
transition: .25s ease;
}

.about-cta-btn i {
transition: transform .25s ease;
}

.about-cta-btn {
color: #fff;
transform: translateY(-2px);
box-shadow:
0 14px 30px rgba(244,81,30,.28);
}

.about-cta-btn i {
transform: translate(3px,-3px);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {

.about-page-hero {
    min-height: auto;
    padding: 75px 0 60px;
}

.about-hero-card {
    max-width: 620px;
    margin: 0 auto;
}

.australia-learning-inner {
    align-items: flex-start;
    flex-wrap: wrap;
}

.australia-learning-content {
    flex: 1 1 calc(100% - 100px);
}

.australia-learning-badge {
    margin-left: 90px;
}

.learning-area-grid {
    grid-template-columns: repeat(2, 1fr);
}

.cta-box {
    flex-direction: column;
    align-items: flex-start;
}

.stat-box {
    border-right: 0;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

.about-page-hero {
    padding: 62px 0 48px;
}

.about-page-hero h1 {
    font-size: 38px;
    letter-spacing: -.9px;
}

.about-page-hero p {
    font-size: 15px;
    line-height: 1.7;
}

.about-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.about-hero-btn {
    width: 100%;
}

.about-hero-link {
    padding-left: 3px;
}

.about-breadcrumb {
    margin-top: 17px;
    padding: 6px 10px;
    min-height: 28px;
    font-size: 10px;
}

.about-hero-card {
    padding: 14px;
    border-radius: 19px;
}

.about-hero-card-image {
    height: 180px;
}

.code-content {
    padding: 17px 13px 19px;
    font-size: 9px;
}

.about-card-content {
    gap: 11px;
}

.about-card-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
}

.about-intro h2,
.why-about-section h2,
.about-process h2,
.about-learning-areas h2 {
    font-size: 34px;
}

.about-feature-grid {
    grid-template-columns: 1fr;
}

.about-feature,
.mission-card,
.why-card,
.learning-area-card {
    padding: 25px;
}

.australia-learning-inner {
    flex-direction: column;
    gap: 17px;
}

.australia-learning-content {
    width: 100%;
}

.australia-learning-content h3 {
    font-size: 23px;
}

.australia-learning-badge {
    margin-left: 0;
}

.learning-area-grid {
    grid-template-columns: 1fr;
}

.mission-card h3 {
    font-size: 25px;
}

.about-stats {
    padding: 45px 0;
}

.stat-box {
    padding: 15px 10px;
}

.stat-box h3 {
    font-size: 21px;
}

.about-cta {
    padding: 60px 0;
}

.cta-box h2 {
    font-size: 34px;
}

.about-cta-code {
    font-size: 150px;
    right: -15px;
    bottom: -30px;
}

.about-cta-btn {
    width: 100%;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.about-page-hero {
    padding: 52px 0 40px;
}

.about-page-hero h1 {
    font-size: 33px;
}

.about-page-hero p {
    font-size: 14px;
}

.about-breadcrumb {
    font-size: 10px;
    padding: 6px 10px;
}

.about-hero-card {
    padding: 12px;
}

.about-hero-card-image {
    height: 155px;
}

.code-window-top {
    height: 36px;
}

.code-content {
    gap: 7px;
    font-size: 8px;
}

.about-card-content h3 {
    font-size: 14px;
}

.about-card-content p {
    font-size: 10px;
}

.about-intro h2,
.why-about-section h2,
.about-process h2,
.about-learning-areas h2 {
    font-size: 30px;
}

.mission-card h3 {
    font-size: 23px;
}

.cta-box h2 {
    font-size: 30px;
}

.about-cta-btn {
    width: 100%;
}

}