/* ===========================
   RESET
=========================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;
}

/* ===========================
   COLORS
=========================== */

:root{

--primary:#0b6b43;

--secondary:#f3c543;

--dark:#06281d;

--white:#ffffff;

--light:#f4f7f5;

--shadow:0 15px 40px rgba(0,0,0,.15);

}

/* ===========================
   CONTAINER
=========================== */

.container{

width:90%;

max-width:1200px;

margin:auto;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(0,0,0,.45);

backdrop-filter:blur(10px);

transition:.4s;

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:85px;

}

/* ===========================
   LOGO
=========================== */

.logo{

display:flex;

align-items:center;

gap:15px;

text-decoration:none;

color:white;

}

.logo img{

width:65px;

height:65px;

border-radius:50%;

background:white;

padding:3px;

box-shadow:var(--shadow);

}

.logo-text h2{

font-size:20px;

font-weight:bold;

line-height:1;

}

.logo-text p{

font-size:12px;

letter-spacing:2px;

color:#ddd;

}

/* ===========================
   NAVIGATION
=========================== */

nav{

display:flex;

gap:30px;

}

nav a{

color:white;

font-weight:600;

text-decoration:none;

position:relative;

transition:.3s;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--secondary);

transition:.4s;

}

nav a:hover{

color:var(--secondary);

}

nav a:hover::after{

width:100%;

}

/* ===========================
   MENU BUTTON
=========================== */

#menuBtn{

display:none;

font-size:35px;

color:white;

cursor:pointer;

}

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

.hero{

height:100vh;

min-height:650px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

}

/* ===========================
   BACKGROUND SLIDER
=========================== */

.slider{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:-3;

}

.slide{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

opacity:0;

transform:scale(1.15);

transition:opacity 2s ease, transform 8s linear;

}

.slide.active{

opacity:1;

transform:scale(1);

}

/* ===========================
   OVERLAY
=========================== */

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(

rgba(0,0,0,.60),

rgba(8,55,36,.72)

);

z-index:-2;

}

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

.hero-content{

text-align:center;

color:white;

width:90%;

max-width:900px;

animation:fadeUp 1.4s ease;

}

.hero-logo{

width:120px;

height:120px;

border-radius:50%;

background:white;

padding:8px;

margin-bottom:25px;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.hero-content h1{

font-size:65px;

line-height:1.1;

margin-bottom:20px;

font-weight:900;

text-shadow:0 5px 20px rgba(0,0,0,.5);

}

.hero-content p{

font-size:22px;

margin-bottom:35px;

color:#f3f3f3;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

display:inline-block;

padding:15px 35px;

background:var(--secondary);

color:#111;

font-weight:bold;

border-radius:50px;

text-decoration:none;

transition:.4s;

box-shadow:var(--shadow);

}

.btn:hover{

transform:translateY(-6px);

background:white;

}

.btn2{

background:transparent;

border:2px solid white;

color:white;

}

.btn2:hover{

background:white;

color:#111;

}

/* ===========================
   ANIMATION
=========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ===========================
   ABOUT SECTION
=========================== */

#about{

padding:100px 0;

background:#ffffff;

}

#about h2{

font-size:42px;

text-align:center;

color:var(--primary);

margin-bottom:25px;

}

#about p{

max-width:900px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#555;

text-align:center;

}

/* ===========================
   SECTION TITLE
=========================== */

section h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

color:var(--primary);

position:relative;

}

section h2::after{

content:"";

display:block;

width:80px;

height:4px;

background:var(--secondary);

margin:15px auto;

border-radius:50px;

}

/* ===========================
   PROGRAMS
=========================== */

#programs{

padding:100px 0;

background:var(--light);

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.5s;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:var(--secondary);

}

.card:hover{

transform:translateY(-10px);

}

.card h3{

color:var(--primary);

font-size:22px;

margin-bottom:15px;

}

.card p{

color:#666;

line-height:1.7;

}

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

#gallery{

padding:100px 0;

background:#fff;

}

.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}

.gallery img{

width:100%;

height:250px;

object-fit:cover;

border-radius:18px;

box-shadow:var(--shadow);

transition:.5s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.05);

}

/* ===========================
   MANAGEMENT
=========================== */

#management{

padding:100px 0;

background:#fff;

}

.management-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.management-card{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:.4s;

border-top:5px solid var(--secondary);

}/* ===========================
   MOBILE RESPONSIVE MENU
=========================== */

@media (max-width: 768px){

    .header .container{
        height:75px;
    }

    .logo{
        gap:8px;
    }

    .logo img{
        width:55px;
        height:55px;
    }

    .logo-text h2{
        font-size:16px;
    }

    .logo-text p{
        font-size:9px;
        letter-spacing:1px;
    }

    #menuBtn{
        display:block;
        font-size:32px;
        z-index:1001;
    }

    nav{

        position:absolute;

        top:75px;

        right:-100%;

        width:100%;

        background:rgba(6,40,29,.98);

        display:flex;

        flex-direction:column;

        gap:0;

        padding:15px 0;

        transition:.4s ease;

    }

    nav.active{
        right:0;
    }

    nav a{
        padding:16px 25px;
        font-size:18px;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    nav a::after{
        display:none;
    }

}
/* ===========================
   PROFESSIONAL AUDIO LIBRARY
=========================== */

#audio{
    padding:100px 0;
    background:#f8f9fa;
}

.audio-intro{
    text-align:center;
    max-width:700px;
    margin:15px auto 40px;
    color:#666;
}

.audio-category{
    background:#fff;
    border-radius:15px;
    margin-bottom:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    overflow:hidden;
}

.audio-category summary{
    list-style:none;
    cursor:pointer;
    padding:20px 25px;
    font-size:22px;
    font-weight:700;
    color:var(--primary);
    background:#fff;
    border-left:6px solid var(--secondary);
    transition:.3s;
}

.audio-category summary:hover{
    background:#f4f4f4;
}

.audio-list{
    padding:25px;
}

.audio-item{
    background:#fafafa;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
    border:1px solid #eee;
}

.audio-item h4{
    margin-bottom:15px;
    color:var(--primary);
}

.audio-item audio{
    width:100%;
    margin-bottom:15px;
}

.download-btn{
    display:inline-block;
    padding:10px 20px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
    transition:.3s;
}

.download-btn:hover{
    background:var(--secondary);
    color:#111;
    transform:translateY(-2px);
}

@media(max-width:768px){

.audio-category summary{
    font-size:18px;
    padding:18px;
}

.audio-list{
    padding:18px;
}

.audio-item{
    padding:15px;
}

.download-btn{
    width:100%;
    text-align:center;
}

}
/* ===========================
   VIDEO SECTION
=========================== */

#video{
    padding:100px 0;
    background:#fff;
}

.video-intro{
    text-align:center;
    max-width:700px;
    margin:15px auto 40px;
    color:#666;
}

#video .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

#video video{
    width:100%;
    border-radius:15px;
    margin:15px 0;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
/* ===========================
   AUDIO SEARCH
=========================== */

.audio-search{
    margin:25px auto 35px;
    max-width:500px;
}

#audioSearch{
    width:100%;
    padding:15px 20px;
    border:2px solid #ddd;
    border-radius:50px;
    outline:none;
    font-size:16px;
    transition:.3s;
}

#audioSearch:focus{
    border-color:var(--primary);
    box-shadow:0 0 10px rgba(0,0,0,.15);
}
/* ===========================
   VIDEO LIBRARY
=========================== */

#video{
    padding:100px 0;
    background:#f8f9fa;
}

.video-intro{
    text-align:center;
    max-width:700px;
    margin:15px auto 25px;
    color:#666;
}

.video-search{
    max-width:500px;
    margin:0 auto 40px;
}

#videoSearch{
    width:100%;
    padding:15px 20px;
    border:2px solid #ddd;
    border-radius:50px;
    outline:none;
    font-size:16px;
    transition:.3s;
}

#videoSearch:focus{
    border-color:var(--primary);
    box-shadow:0 0 10px rgba(0,0,0,.15);
}

.video-category{
    background:#fff;
    margin-bottom:25px;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.video-category summary{
    cursor:pointer;
    list-style:none;
    padding:20px 25px;
    font-size:22px;
    font-weight:bold;
    color:var(--primary);
    border-left:6px solid var(--secondary);
    transition:.3s;
}

.video-category summary:hover{
    background:#f5f5f5;
}

.video-list{
    padding:25px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.video-item{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:15px;
    padding:18px;
}

.video-item h4{
    margin-bottom:15px;
    color:var(--primary);
}

.video-item video{
    width:100%;
    border-radius:12px;
    margin-bottom:15px;
    background:#000;
}

@media(max-width:768px){

.video-category summary{
    font-size:18px;
    padding:18px;
}

.video-list{
    grid-template-columns:1fr;
    padding:18px;
}

.video-item{
    padding:15px;
}

}

/* ===========================
   AUTOMATIC MEDIA STATUS
=========================== */
.media-loading{
    text-align:center;
    color:#666;
    padding:25px 10px;
    font-size:16px;
}

/* ===========================
   MORE BUTTON / COLLAPSED MEDIA
=========================== */
.more-media-btn{
    display:block;
    margin:0 auto 10px;
    padding:12px 28px;
    border:0;
    border-radius:40px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}
.more-media-btn:hover{
    background:var(--secondary);
    color:#111;
    transform:translateY(-2px);
}
.audio-list.collapsed .media-extra,
.video-list.collapsed .media-extra,
.gallery.collapsed .media-extra{
    display:none;
}
.gallery-item img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:var(--shadow);
    transition:.5s;
    cursor:pointer;
}
.gallery-item img:hover{transform:scale(1.05)}