* {margin:0; padding:0; box-sizing:border-box;}
        body {font-family: Arial, sans-serif; line-height:1.6; color:#333; padding-top: 100px;}
        a {text-decoration:none;}
        ul {list-style:none;}

        html {scroll-behavior: smooth;}
                                      /* ==== Header ==== */
        header {background:#fff; 
            box-shadow:0 2px 10px rgba(0,0,0,0.05); 
            position: fixed; 
            top: 0; left: 0; width: 100%; z-index: 1000;}
        .navbar {
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:20px 60px;
        }
        .logo img {height:60px;}

        .nav-links {display:flex; gap:30px;}
        .nav-links a {
            color:#1a2036;
            font-weight:500;
            transition:0.3s;
        }
        .nav-links a:hover {color:#c07d56}

        section {
            scroll-margin-top: 120px;
        }

                                         /* ==== Hero Section ==== */ 
#about-hero { 
    position: relative;
    height: 450px;
    text-align: center;  
    color: #fff; 
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-hero-bg{
    position:absolute;
    width:100%;
    height: 450px;
    background-image: url('about/about_hero-bg1.JPG'); 
    background-size: cover; 
    background-position: center; 
    z-index:-3;
}

.about-hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 102, 204, 0.7); /* цэнхэр overlay */
}

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

.about-hero-content h1{
    font-size:60px;
    margin-bottom:20px;
}

                                               /* ==== who we are Section ==== */
#who-we-are {
    padding: 100px 20px;
    background: #f9f9f9;
}
.who-we-are-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    gap: 60px;
}
.who-we-are-text {
    flex: 1;
}
.who-we-are-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #c07d56;
    letter-spacing: 2px;
    margin-bottom: 18px;
    position: relative;
}
.who-we-are-text h2 {
    font-size: 2em;
    margin-bottom: 30px;
}
.who-we-are-text p {
    font-size: 1.1em;
    line-height: 1.6;
    text-align: justify;
}
.who-we-are-image img{
    width: 100%;
    max-width: 500px; 
    border-radius: 10px;
    position: relative;
}
                                       /*==== video section ====*/
#organization-video {
    padding: 120px 20px;
    background: #e7e5e4;

}
.organization-video-container{
    max-width: 1200px;
    margin: 0 auto;
}
.organization-video {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.organization-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
}

                                       /* ==== goal ==== */
#goal {
    padding: 100px 20px;
    background: #f9f9f9;
}
.goal-container {
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.goal-text {
    flex: 1;
    text-align: center;
}
.goal-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #c07d56;
    letter-spacing: 2px;
    margin-bottom: 10px;
    position: relative;
}
.goal-text h3 {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 30px;
}
.goal-text p {
    font-size: 1.1em;
    line-height: 1.6;
}

                                       /* ==== vision ==== */
#vision {
    padding: 100px 20px;
    background: #f9f9f9;
}    
.vision-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; 
    gap: 60px;
}    
.vision-text {
    flex: 1;
}
.vision-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #c07d56;
    letter-spacing: 2px;
    margin-bottom: 10px;
    position: relative;
}
.vision-text h4 {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 30px;
}
.vision-text p {
    font-size: 1.1em;
    line-height: 1.6;
    text-align: justify;
}
.vision-image img{
    width: 100%;
    max-width: 700px; 
    border-radius: 10px;
    position: relative;
}
                                             /* ==== Footer ==== */
footer{
background:#1a2036;
color: #fff;
padding:60px 20px 20px;
}

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
}

.footer-col h3{
margin-bottom:20px;
}

.footer-col p{
line-height:1.6;
color:#ccc;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col ul li a{
color:#ccc;
transition:0.3s;
}

.footer-col ul li a:hover{
color:#f06f24;
}

.social-icons{
display:flex;
gap:15px;
margin-top:10px;
}

.social-icons a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#2b3155;
color:#fff;
border-radius:50%;
font-size:18px;
transition:0.3s;
}

.social-icons a:hover{
background:#f06f24;
transform:translateY(-3px);
box-shadow: 0 10px 10px rgba(0,0,0,0.3);
}

.footer-bottom{
text-align:center;
margin-top:40px;
padding-top:20px;
border-top:1px solid rgba(48, 48, 48, 0.38);
color:#aaa;
}

                                 /* ==== Reveal ==== */
/* SECTION animation */

.about-reveal-fade{
opacity:0;
transition:all 0.5s ease;
}

.about-reveal-fade.active{
opacity:1;
}

.about-reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}
.about-reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

.about-reveal-down {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 2s ease;
}
.about-reveal-down.active {
  opacity: 1;
  transform: translateY(0);
}

.about-reveal-herotext {
  opacity: 0;
  transform: translateY(30px);
  transition: all 2s ease;
}
.about-reveal-herotext.active {
  opacity: 1;
  transform: translateY(0);
}
.about-delay-1 { transition-delay: 0.1s; }
.about-delay-2 { transition-delay: 0.3s; }
.about-delay-3 { transition-delay: 0.5s; }
.about-delay-4 { transition-delay: 0.7s; }
.about-delay-5 { transition-delay: 0.9s; }


                                  /* ==== Responsive ==== */
        @media (max-width:1024px){

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

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

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

    .org-image img{
        max-width: 80%;
    }

}

@media (max-width:768px){

header{
    flex-direction: column;
    padding:15px;
}

.nav-menu{
    flex-direction: column;
    gap:10px;
    margin-top:10px;
}

.hero{
    padding:100px 20px;
    text-align:center;
}

.hero h1{
    font-size:28px;
}

.hero p{
    font-size:16px;
}

.lesson-grid{
    grid-template-columns:1fr;
}

.letter-grid{
    grid-template-columns:1fr;
}

.lesson-card img{
    width:100%;
    height:auto;
}

}

@media (max-width:480px){

.hero h1{
    font-size:24px;
}

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

.org-btn{
    padding:10px 18px;
    font-size:14px;
}

.lesson-card{
    padding:10px;
}

}