@import url("/css/animated-bg.css");

:root{
--green:#08783f;
--green-dark:#055a2f;
--green-deep:#033b20;
--green-light:#eaf7ef;
--orange:#f28c28;
--orange-dark:#d96f0b;
--orange-light:#fff2e3;
--white:#fff;
--cream:#fffaf0;
--black:#111;
--text:#333;
--muted:#6b7280;
--border:#d9e8df;
--light:#f3faf6;
--container:1180px;
--header-height:78px;
--shadow:0 10px 28px rgba(3,59,32,.12);
--radius:14px;
--transition:.25s ease
}

*{margin:0;padding:0;box-sizing:border-box}

html{
scroll-behavior:smooth;
scroll-padding-top:90px
}

body{
font-family:Arial,Helvetica,sans-serif;
color:var(--text);
background:var(--cream);
line-height:1.6;
overflow-x:hidden
}

body.menu-open,
body.lightbox-open,
body.developer-modal-open{
overflow:hidden
}

img{
max-width:100%;
height:auto;
display:block
}

button,
input,
textarea,
select{
font:inherit
}

button{
cursor:pointer
}

a{
color:var(--green);
text-decoration:none;
transition:var(--transition)
}

a:visited{
color:var(--green)
}

a:hover{
color:var(--orange)
}

a:active{
color:var(--orange-dark)
}

button,
a{
-webkit-tap-highlight-color:transparent
}

.container{
width:min(92%,var(--container));
margin:auto
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar{
position:relative;
z-index:1001;
color:var(--white);
background:linear-gradient(
90deg,
var(--green-deep),
var(--green-dark),
var(--green)
);
font-size:14px;
overflow:hidden
}

.top-bar:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.13) 45%,
transparent 65%
);
transform:translateX(-100%);
animation:topShine 7s linear infinite
}

.top-bar .container{
position:relative;
z-index:1;
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}

.top-bar a,
.top-bar a:visited{
color:var(--white);
font-weight:700
}

.top-bar a:hover{
color:var(--orange)
}


/* =========================================================
   HEADER
========================================================= */

.header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.97);
backdrop-filter:blur(12px);
border-bottom:3px solid var(--orange);
box-shadow:0 4px 18px rgba(0,0,0,.08)
}

.nav-container{
min-height:var(--header-height);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}


/* =========================================================
   BRAND
========================================================= */

.brand,
.brand:visited{
display:flex;
align-items:center;
gap:10px;
color:var(--green);
flex-shrink:0
}

.brand:hover{
color:var(--green)
}

.logo-container{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0
}

.school-logo{
width:58px;
height:58px;
object-fit:contain
}

.brand-name{
display:flex;
flex-direction:column;
line-height:1.05
}

.brand-name strong{
color:var(--green);
font-size:18px
}

.brand-name span{
color:var(--orange);
font-size:11px;
font-weight:800;
letter-spacing:.5px
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:3px
}

.desktop-nav>a,
.desktop-nav>a:visited{
position:relative;
display:inline-flex;
align-items:center;
min-height:50px;
padding:0 11px;
color:var(--green);
font-size:14px;
font-weight:700
}

.desktop-nav>a:after{
content:"";
position:absolute;
left:11px;
right:11px;
bottom:5px;
height:3px;
background:var(--orange);
border-radius:5px;
transform:scaleX(0);
transition:transform var(--transition)
}

.desktop-nav>a:hover,
.desktop-nav>a.active{
color:var(--orange)
}

.desktop-nav>a:hover:after,
.desktop-nav>a.active:after{
transform:scaleX(1)
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.apply-button,
.apply-button:visited{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
margin-left:5px;
padding:10px 18px;
color:var(--white)!important;
background:var(--orange);
border:2px solid var(--orange);
border-radius:10px;
font-weight:800;
box-shadow:0 5px 14px rgba(242,140,40,.22)
}

.apply-button:hover{
color:var(--white)!important;
background:var(--green);
border-color:var(--green);
transform:translateY(-2px)
}


/* =========================================================
   MORE MENU
========================================================= */

.more-menu{
position:relative
}

.more-button{
display:inline-flex;
align-items:center;
gap:7px;
min-height:50px;
padding:0 11px;
border:0;
background:transparent;
color:var(--green);
font-size:14px;
font-weight:700
}

.more-button:hover{
color:var(--orange)
}

.hamburger-icon{
display:flex;
flex-direction:column;
gap:3px
}

.hamburger-icon span{
width:17px;
height:2px;
display:block;
background:currentColor;
border-radius:3px
}

.more-menu .dropdown{
position:absolute;
top:100%;
right:0;
width:235px;
padding:9px 0;
background:var(--white);
border-top:4px solid var(--orange);
border-radius:0 0 12px 12px;
box-shadow:var(--shadow);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:var(--transition);
z-index:1100
}

.more-menu:hover .dropdown,
.more-menu:focus-within .dropdown,
.more-menu.open .dropdown{
opacity:1;
visibility:visible;
transform:translateY(0)
}

.more-menu .dropdown a{
display:block;
padding:11px 18px;
color:var(--green);
font-size:14px;
font-weight:600
}

.more-menu .dropdown a:hover,
.more-menu .dropdown a.active{
color:var(--white);
background:var(--green)
}


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

.mobile-menu-button{
width:46px;
height:46px;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
padding:8px;
border:2px solid var(--green);
border-radius:10px;
background:var(--white)
}

.mobile-menu-button span{
width:24px;
height:3px;
display:block;
background:var(--green);
border-radius:3px;
transition:var(--transition)
}

.mobile-menu-button:hover{
background:var(--green)
}

.mobile-menu-button:hover span{
background:var(--white)
}

.mobile-menu-button.active span:nth-child(1){
transform:translateY(8px) rotate(45deg)
}

.mobile-menu-button.active span:nth-child(2){
opacity:0
}

.mobile-menu-button.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg)
}

.mobile-nav{
display:none;
flex-direction:column;
width:100%;
max-height:calc(100vh - var(--header-height));
overflow-y:auto;
background:var(--cream);
border-top:3px solid var(--orange);
box-shadow:var(--shadow)
}

.mobile-nav.open,
.mobile-nav.show,
.mobile-nav.active{
display:flex
}

.mobile-nav>a,
.mobile-nav>a:visited{
display:block;
width:100%;
padding:13px 20px;
color:var(--green);
background:var(--white);
border-bottom:1px solid var(--border);
font-weight:700
}

.mobile-nav>a:hover,
.mobile-nav>a.active{
color:var(--white);
background:var(--green)
}

.mobile-nav .mobile-apply{
width:calc(100% - 40px);
margin:12px 20px;
color:var(--white)!important;
background:var(--orange);
border:0;
border-radius:10px;
text-align:center
}

.mobile-nav .mobile-apply:hover{
background:var(--green)
}


/* =========================================================
   OPENING SCREEN
========================================================= */

.opening-screen{
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
overflow:hidden;
background:
radial-gradient(circle at 15% 20%,rgba(242,140,40,.18),transparent 28%),
radial-gradient(circle at 85% 80%,rgba(255,255,255,.12),transparent 30%),
linear-gradient(135deg,var(--green-deep),var(--green));
color:var(--white);
text-align:center;
transition:opacity .6s ease,visibility .6s ease
}

.opening-screen.hide{
opacity:0;
visibility:hidden;
pointer-events:none
}

.opening-content{
width:min(650px,100%);
position:relative;
z-index:2
}

.opening-badge{
display:inline-flex;
flex-direction:column;
margin-bottom:25px;
padding:12px 24px;
color:var(--white);
border:2px solid rgba(255,255,255,.7);
border-radius:14px;
font-size:18px;
font-weight:800;
letter-spacing:2px;
animation:badgeFloat 3s ease-in-out infinite
}

.opening-badge span{
color:var(--orange);
font-size:11px;
letter-spacing:1px
}

.opening-small{
color:var(--orange);
font-size:13px;
font-weight:800;
letter-spacing:2px
}

.opening-content h1{
margin:10px 0;
color:var(--white);
font-size:clamp(34px,7vw,64px);
line-height:1.05
}

.opening-motto{
color:rgba(255,255,255,.9);
font-size:18px;
font-style:italic
}

.opening-counter{
margin:25px 0 5px;
color:var(--orange);
font-size:clamp(55px,12vw,90px);
font-weight:900;
line-height:1
}

.opening-message{
color:rgba(255,255,255,.85)
}

.opening-line{
width:min(420px,90%);
height:6px;
margin:22px auto 0;
overflow:hidden;
background:rgba(255,255,255,.2);
border-radius:20px
}

.opening-line span{
display:block;
width:0;
height:100%;
background:var(--orange);
border-radius:20px;
transition:width 1s linear
}


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

.hero{
position:relative;
padding:105px 0;
overflow:hidden;
color:var(--white);
background:
linear-gradient(90deg,rgba(3,59,32,.96),rgba(8,120,63,.78)),
url("../images/students-group.jpg") center/cover no-repeat
}

.hero:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
transparent,
rgba(242,140,40,.08),
transparent
);
animation:heroSweep 8s ease-in-out infinite
}

.hero-content{
position:relative;
z-index:2
}

.hero-label{
display:inline-block;
padding:7px 13px;
color:var(--green-deep);
background:var(--orange);
border-radius:30px;
font-size:12px;
font-weight:900;
letter-spacing:1.3px;
box-shadow:0 5px 15px rgba(0,0,0,.12)
}

.hero h1{
max-width:850px;
margin:18px 0 20px;
color:var(--white);
font-family:Georgia,serif;
font-size:clamp(40px,6vw,70px);
line-height:1.05
}

.hero h1 span{
display:block;
color:var(--orange)
}

.hero p{
max-width:700px;
color:rgba(255,255,255,.94);
font-size:17px
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px
}


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

.page-hero{
position:relative;
padding:75px 0;
overflow:hidden;
color:var(--white);
background:
linear-gradient(120deg,var(--green-deep),var(--green))
}

.page-hero h1{
position:relative;
z-index:2;
font-family:Georgia,serif;
font-size:clamp(35px,5vw,58px)
}

.page-hero p{
position:relative;
z-index:2;
max-width:700px;
margin-top:10px;
color:rgba(255,255,255,.84)
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section{
position:relative;
padding:82px 0;
overflow:hidden;
background:var(--cream)
}

.section:nth-of-type(even){
background:var(--light)
}

.section-heading{
position:relative;
z-index:2;
max-width:760px;
margin:0 auto 42px;
text-align:center
}

.section-heading h2{
margin:8px 0 12px;
color:var(--green-deep);
font-family:Georgia,serif;
font-size:clamp(30px,4vw,48px);
line-height:1.12
}

.section-heading h2 span{
color:var(--orange)
}

.section-heading p{
color:var(--muted)
}

.section-heading.light h2{
color:var(--white)
}

.section-heading.light p{
color:rgba(255,255,255,.85)
}

.section-label{
display:inline-block;
color:var(--orange-dark);
font-size:12px;
font-weight:900;
letter-spacing:1.5px
}


/* =========================================================
   QUICK INFO
========================================================= */

.quick-info{
position:relative;
padding:24px 0;
overflow:hidden;
background:var(--green-dark);
color:var(--white)
}

.quick-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.quick-card{
position:relative;
display:flex;
align-items:center;
gap:14px;
padding:20px;
overflow:hidden;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius);
transition:var(--transition)
}

.quick-card:after{
content:"";
position:absolute;
width:80px;
height:80px;
right:-35px;
top:-35px;
border-radius:50%;
background:rgba(242,140,40,.18)
}

.quick-card:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.15)
}

.quick-icon{
font-size:31px
}

.quick-card strong{
display:block;
color:var(--white)
}

.quick-card span{
display:block;
color:rgba(255,255,255,.75);
font-size:13px
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:55px;
align-items:center
}

.welcome-image{
position:relative;
overflow:hidden;
border-radius:20px;
box-shadow:var(--shadow);
background:var(--white)
}

.welcome-image:after{
content:"";
position:absolute;
inset:0;
border:4px solid rgba(242,140,40,.35);
border-radius:20px;
pointer-events:none
}

.welcome-image img{
width:100%;
height:100%;
min-height:320px;
object-fit:cover;
transition:transform .6s ease
}

.welcome-image:hover img{
transform:scale(1.04)
}

.welcome-content{
position:relative;
z-index:2
}

.welcome-content h2{
margin:10px 0 18px;
color:var(--green-deep);
font-family:Georgia,serif;
font-size:clamp(32px,4vw,50px);
line-height:1.1
}

.welcome-content h2 span{
color:var(--orange)
}

.welcome-content p{
margin-bottom:15px
}


/* =========================================================
   FEATURE CARDS
========================================================= */

.feature-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}

.feature-card{
position:relative;
padding:28px;
overflow:hidden;
background:rgba(255,255,255,.94);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 7px 20px rgba(3,59,32,.07);
transition:transform .3s ease,box-shadow .3s ease
}

.feature-card:before{
content:"";
position:absolute;
width:100px;
height:100px;
right:-45px;
top:-45px;
border-radius:50%;
background:rgba(242,140,40,.12)
}

.feature-card:hover{
transform:translateY(-7px);
box-shadow:var(--shadow)
}

.feature-icon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:17px;
font-size:28px;
background:var(--orange-light);
border-radius:16px;
animation:iconFloat 4s ease-in-out infinite
}

.feature-card h3{
margin-bottom:9px;
color:var(--green-deep);
font-size:21px
}

.feature-card p{
margin-bottom:17px;
color:var(--muted)
}

.text-link{
font-weight:800
}


/* =========================================================
   SCHOOL LIFE
========================================================= */

.school-life{
background:
linear-gradient(
135deg,
rgba(3,59,32,.98),
rgba(8,120,63,.94)
),
url("../images/schoolenvironment.png") center/cover;
color:var(--white)
}

.school-life .feature-card{
background:rgba(255,255,255,.96)
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:12px 22px;
color:var(--white)!important;
background:var(--green);
border:2px solid var(--green);
border-radius:10px;
font-weight:800;
transition:var(--transition);
box-shadow:0 5px 15px rgba(3,59,32,.12)
}

.btn:visited{
color:var(--white)
}

.btn:hover{
color:var(--white)!important;
background:var(--orange);
border-color:var(--orange);
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(242,140,40,.2)
}

.btn-primary,
.btn-orange{
background:var(--orange);
border-color:var(--orange)
}

.btn-primary:hover,
.btn-orange:hover{
background:var(--green);
border-color:var(--green)
}

.btn-outline{
color:var(--green)!important;
background:transparent;
border:2px solid var(--green)
}

.hero .btn-outline{
color:var(--white)!important;
border-color:var(--white)
}

.btn-outline:hover,
.hero .btn-outline:hover{
color:var(--white)!important;
background:var(--green);
border-color:var(--green)
}


/* =========================================================
   CONTENT CARDS
========================================================= */

.content-card{
position:relative;
padding:32px;
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow)
}


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

.admissions-cta{
position:relative;
padding:70px 0;
overflow:hidden;
color:var(--white);
background:
linear-gradient(
110deg,
var(--green-deep),
var(--green-dark),
var(--green)
)
}

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

.cta-inner h2{
margin:7px 0;
font-family:Georgia,serif;
font-size:clamp(30px,4vw,48px)
}

.cta-inner p{
color:rgba(255,255,255,.84)
}


/* =========================================================
   FORMS
========================================================= */

input,
textarea,
select{
width:100%;
padding:12px 14px;
color:var(--text);
background:var(--white);
border:1px solid #cbdcd2;
border-radius:9px;
outline:0;
transition:var(--transition)
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--green);
box-shadow:0 0 0 3px rgba(8,120,63,.1)
}

textarea{
min-height:130px;
resize:vertical
}

label{
display:block;
margin-bottom:6px;
color:var(--green-deep);
font-weight:700
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-filters{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin:0 auto 35px
}

.gallery-filter{
padding:10px 18px;
color:var(--green);
background:var(--white);
border:2px solid var(--green);
border-radius:30px;
font-weight:800;
transition:var(--transition)
}

.gallery-filter:hover,
.gallery-filter.active{
color:var(--white);
background:var(--green);
border-color:var(--green)
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}

.gallery-item{
position:relative;
min-height:280px;
overflow:hidden;
margin:0;
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 5px 18px rgba(0,0,0,.06);
cursor:pointer;
transition:var(--transition)
}

.gallery-item:hover{
transform:translateY(-5px);
box-shadow:var(--shadow)
}

.gallery-item img{
width:100%;
height:280px;
object-fit:cover;
transition:transform .45s ease
}

.gallery-item:hover img{
transform:scale(1.06)
}

.gallery-item figcaption{
position:absolute;
right:0;
bottom:0;
left:0;
padding:38px 18px 16px;
color:var(--white);
background:linear-gradient(
transparent,
rgba(0,0,0,.82)
)
}

.gallery-item figcaption strong{
display:block;
font-size:16px
}

.gallery-item figcaption span{
display:block;
margin-top:2px;
color:rgba(255,255,255,.78);
font-size:12px
}

.gallery-item.hidden,
.gallery-item.is-hidden{
display:none
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox{
position:fixed;
inset:0;
z-index:12000;
display:flex;
align-items:center;
justify-content:center;
padding:25px;
background:rgba(3,59,32,.94);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:var(--transition)
}

.gallery-lightbox.show{
opacity:1;
visibility:visible;
pointer-events:auto
}

.gallery-lightbox img{
max-width:min(1000px,92vw);
max-height:78vh;
object-fit:contain;
border-radius:12px;
box-shadow:0 15px 50px rgba(0,0,0,.35)
}

#lightboxCaption{
max-width:800px;
margin-top:15px;
color:var(--white);
text-align:center
}

#lightboxCaption strong{
display:block;
font-size:20px
}

#lightboxCaption span{
color:rgba(255,255,255,.75)
}

#lightboxClose,
#lightboxPrev,
#lightboxNext{
position:absolute;
z-index:2;
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
color:var(--white);
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.3);
border-radius:50%;
font-size:24px
}

#lightboxClose{
right:25px;
top:25px
}

#lightboxPrev{
left:25px;
top:50%;
transform:translateY(-50%)
}

#lightboxNext{
right:25px;
top:50%;
transform:translateY(-50%)
}

#lightboxClose:hover,
#lightboxPrev:hover,
#lightboxNext:hover{
background:var(--orange);
border-color:var(--orange)
}


/* =========================================================
   UNIFIED FOOTER
========================================================= */

.site-footer{
position:relative;
overflow:hidden;
color:rgba(255,255,255,.88);
background:
radial-gradient(
circle at 10% 15%,
rgba(242,140,40,.13),
transparent 24%
),
radial-gradient(
circle at 90% 80%,
rgba(255,255,255,.06),
transparent 22%
),
linear-gradient(
135deg,
var(--green-deep),
var(--green-dark)
)
}

.site-footer:before{
content:"";
position:absolute;
width:230px;
height:230px;
right:-90px;
top:-90px;
border:35px solid rgba(242,140,40,.12);
border-radius:50%;
animation:footerOrbit 12s linear infinite
}

.site-footer:after{
content:"";
position:absolute;
width:150px;
height:150px;
left:-65px;
bottom:-65px;
border-radius:50%;
background:rgba(255,255,255,.045);
animation:footerFloat 7s ease-in-out infinite
}

.footer-main{
position:relative;
z-index:2;
padding:65px 0 42px
}

.footer-container{
display:grid;
grid-template-columns:1.45fr repeat(3,1fr);
gap:34px
}

.footer-brand h2{
margin-bottom:8px;
color:var(--white);
font-family:Georgia,serif;
font-size:25px
}

.footer-brand>p{
max-width:310px;
color:rgba(255,255,255,.72)
}

.footer-brand-motto{
display:inline-block;
margin:15px 0;
padding:7px 12px;
color:var(--green-deep);
background:var(--orange);
border-radius:20px;
font-size:12px;
font-weight:900
}

.footer-column h3{
margin-bottom:14px;
color:var(--orange);
font-size:15px;
letter-spacing:.5px
}

.footer-column a{
display:block;
margin:8px 0;
color:rgba(255,255,255,.75);
font-size:14px
}

.footer-column a:hover{
color:var(--orange);
transform:translateX(3px)
}

.footer-contact-item{
margin:8px 0;
color:rgba(255,255,255,.75);
font-size:14px
}


/* =========================================================
   STAFF PORTAL
========================================================= */

.footer-staff-login{
position:relative;
z-index:2;
margin:12px auto 0;
padding:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
border-radius:16px;
text-align:center
}

.footer-staff-login h3{
margin-bottom:5px;
color:var(--white)
}

.footer-staff-login p{
margin-bottom:13px;
color:rgba(255,255,255,.7);
font-size:13px
}

.footer-staff-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:11px 20px;
color:var(--white)!important;
background:var(--orange);
border:2px solid var(--orange);
border-radius:10px;
font-weight:800
}

.footer-staff-login-button:hover{
color:var(--white)!important;
background:var(--green);
border-color:var(--green)
}


/* =========================================================
   DEVELOPER
========================================================= */

/* =========================
   DEVELOPER SHOWCASE
   ========================= */

.developer-section{
padding:70px 20px;
background:linear-gradient(135deg,#f7faf8,#eef7f1);
}

.developer-container{
max-width:1050px;
margin:auto;
}

.developer-card{
display:grid;
grid-template-columns:170px 1fr;
align-items:center;
gap:30px;
padding:30px;
background:#fff;
border:1px solid rgba(8,120,63,.1);
border-radius:28px;
box-shadow:0 18px 50px rgba(0,0,0,.1);
overflow:hidden;
}

.developer-photo-wrap{
width:170px;
height:170px;
border-radius:50%;
padding:6px;
background:linear-gradient(135deg,#08783f,#f28c28);
box-shadow:0 12px 35px rgba(8,120,63,.2);
}

.developer-photo{
width:100%;
height:100%;
display:block;
object-fit:cover;
border-radius:50%;
background:#fff;
border:5px solid #fff;
}

.developer-info{
min-width:0;
}

.developer-label{
display:inline-block;
margin-bottom:8px;
color:#08783f;
font-size:.72rem;
font-weight:900;
letter-spacing:.18em;
}

.developer-info h2{
margin:0 0 8px;
color:#123b27;
font-size:clamp(1.45rem,3vw,2.1rem);
font-weight:900;
}

.developer-info p{
margin:0 0 20px;
color:#64756b;
font-size:.95rem;
line-height:1.7;
}

.developer-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 20px;
border:0;
border-radius:14px;
background:#08783f;
color:#fff;
font:inherit;
font-weight:800;
cursor:pointer;
box-shadow:0 8px 22px rgba(8,120,63,.2);
transition:.25s ease;
}

.developer-button:hover{
transform:translateY(-2px);
background:#065f32;
box-shadow:0 12px 28px rgba(8,120,63,.28);
}

.developer-contacts{
margin-top:22px;
padding:28px;
background:#fff;
border:1px solid rgba(8,120,63,.1);
border-radius:24px;
box-shadow:0 12px 35px rgba(0,0,0,.07);
}

.developer-contact-header h3{
margin:5px 0 0;
color:#123b27;
font-size:1.35rem;
font-weight:900;
}

.developer-modal-text{
margin:12px 0 22px;
color:#65746c;
line-height:1.65;
}

.developer-contact-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.developer-contact-link{
display:flex;
align-items:center;
gap:13px;
padding:15px;
text-decoration:none;
border:1px solid rgba(8,120,63,.1);
border-radius:16px;
background:#f8fbf9;
color:#173c29;
transition:.25s ease;
}

.developer-contact-link:hover{
transform:translateY(-2px);
background:#fff;
border-color:rgba(8,120,63,.3);
box-shadow:0 8px 22px rgba(0,0,0,.07);
}

.developer-contact-icon{
width:42px;
height:42px;
flex:0 0 42px;
display:grid;
place-items:center;
border-radius:12px;
background:#e8f5ed;
font-size:1.15rem;
}

.developer-contact-link strong{
display:block;
font-size:.9rem;
font-weight:900;
}

.developer-contact-link small{
display:block;
margin-top:3px;
color:#748078;
font-size:.75rem;
}

@media(max-width:650px){

.developer-section{
padding:50px 15px;
}

.developer-card{
grid-template-columns:1fr;
text-align:center;
padding:25px 18px;
}

.developer-photo-wrap{
margin:auto;
width:145px;
height:145px;
}

.developer-info{
display:flex;
flex-direction:column;
align-items:center;
}

.developer-contact-grid{
grid-template-columns:1fr;
}

.developer-contacts{
padding:22px 16px;
}

   }


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom{
position:relative;
z-index:2;
padding:19px 0;
background:rgba(0,0,0,.16);
color:rgba(255,255,255,.65);
font-size:13px
}

.footer-bottom .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px
}

.footer-bottom a{
color:var(--orange);
font-weight:800
}

.footer-bottom a:hover{
color:var(--white)
}


/* =========================================================
   LEGACY FOOTER SAFETY
========================================================= */

#site-footer{
display:block
}

.site-footer-placeholder{
display:none
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible{
outline:3px solid var(--orange);
outline-offset:3px
}

::selection{
color:var(--white);
background:var(--green)
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes topShine{
0%{transform:translateX(-100%)}
55%,100%{transform:translateX(100%)}
}

@keyframes badgeFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}

@keyframes heroSweep{
0%,100%{
transform:translateX(-20%);
opacity:.2
}
50%{
transform:translateX(20%);
opacity:.5
}
}

@keyframes iconFloat{
0%,100%{
transform:translateY(0) rotate(0)
}
50%{
transform:translateY(-4px) rotate(2deg)
}
}

@keyframes footerOrbit{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

@keyframes footerFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-18px)}
}

@keyframes developerReveal{
from{
opacity:0;
transform:translateY(-8px)
}
to{
opacity:1;
transform:translateY(0)
}
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:1050px){

.desktop-nav>a{
padding:0 8px;
font-size:13px
}

.desktop-nav>a:after{
left:8px;
right:8px
}

.footer-container{
grid-template-columns:1.3fr 1fr 1fr
}

.developer-contact-grid{
grid-template-columns:repeat(2,1fr)
}

}


/* =========================================================
   RESPONSIVE — MOBILE NAV
========================================================= */

@media(max-width:850px){

.desktop-nav{
display:none
}

.mobile-menu-button{
display:flex
}

.quick-grid{
grid-template-columns:1fr
}

.welcome-grid{
grid-template-columns:1fr;
gap:35px
}

.feature-grid{
grid-template-columns:repeat(2,1fr)
}

.gallery-grid{
grid-template-columns:repeat(2,1fr)
}

.footer-container{
grid-template-columns:1fr 1fr
}

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

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media(max-width:600px){

:root{
--header-height:70px
}

.top-bar .container{
min-height:34px;
font-size:11px;
justify-content:center
}

.top-bar .container>div{
display:none
}

.nav-container{
min-height:var(--header-height)
}

.logo-container,
.school-logo{
width:48px;
height:48px
}

.brand-name strong{
font-size:15px
}

.brand-name span{
font-size:9px
}

.section{
padding:60px 0
}

.page-hero{
padding:58px 0
}

.hero{
padding:75px 0
}

.hero h1{
font-size:clamp(36px,12vw,52px)
}

.hero p{
font-size:15px
}

.hero-buttons{
flex-direction:column;
align-items:stretch
}

.hero-buttons .btn{
width:100%
}

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

.gallery-grid{
grid-template-columns:1fr
}

.gallery-item img{
height:250px
}

.welcome-image img{
min-height:250px
}

.section-heading{
margin-bottom:30px
}

.section-heading h2{
font-size:32px
}

.footer-main{
padding:45px 0 30px
}

.footer-container{
grid-template-columns:1fr;
gap:25px
}

.developer-container{
align-items:flex-start;
flex-direction:column
}

.developer-card{
align-items:flex-start
}

.developer-photo{
width:65px;
height:65px;
flex-basis:65px
}

.developer-button{
width:100%
}

.developer-contact-grid{
grid-template-columns:1fr 1fr
}

.footer-bottom .container{
flex-direction:column;
text-align:center
}

.content-card{
padding:22px
}

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:380px){

.brand-name{
display:none
}

.developer-contact-grid{
grid-template-columns:1fr
}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

*,
*:before,
*:after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:.01ms!important
}

}