:root{--accent:#2b6cb0;--muted:#f4f6fb}
body{
font-family:Arial,Helvetica,sans-serif;
margin:0;
color:#222
}

header{
background:linear-gradient(90deg, #ffffff 0%, #eef6ff 100%);
padding:24px 16px;
border-bottom:1px solid #e6eef8
}

.container{
max-width:1100px;
margin:0 auto;
padding:0 16px
}
       
 nav{
display:flex;
align-items:center;
justify-content:space-between;
position:relative
}
        
nav .brand{
display:flex;
gap:12px;
align-items:center
}
        
.brand img{
height:54px
}
        
.menu-toggle{
display:none;
background:transparent;
border:0;
cursor:pointer;
padding:8px;
border-radius:6px
}
        
.menu-toggle .bar{
display:block;
width:22px;
height:2px;
background:var(--accent);
margin:4px 0;
border-radius:2px
}
        
.main-menu{
background:var(--accent);
color:#fff
}
        
.main-menu .container{
padding:6px 16px
}
        
.main-menu .menu{
display:flex;
gap:30px;
align-items:center
}
        
.main-menu a{
color:#fff;
text-decoration:none;
font-weight:600;
padding:8px 2px;
border-radius:6px
}
        
.main-menu a:hover{
background:rgba(255,255,255,0.08)
}
        
.nav-links a{
margin-left:16px;
color:var(--accent);
text-decoration:none;
font-weight:600
}

/*======================*/
.menu-btn{
font-size:28px;
cursor:pointer;
display:none;
}

/* Overlay */
.overlay{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
top:0;
left:0;
opacity:0;
visibility:hidden;
transition:0.3s;
}

/* Side Menu */
.side-menu1{
position:fixed;
top:0;
right:-390px;
width:345px;
height:100%;
background:white;
padding-left:14px;  
transition:0.4s ease;
}
body.no-scroll {
overflow: hidden;
}
.side-menu1{
list-style:none;
margin-top:40px;
}

.side-menu1{
margin-bottom:14px;
}

.side-menu1 a{
text-decoration:none;
color:#333;
font-size:13px;
font-weight:bold;
}
.side-menu1  a:hover{
color:orange;
}

/* Active */
.side-menu1.active{
right:0;
}

.overlay.active{
opacity:1;
visibility:visible;
}


/*===============*/        
.hero{
display:flex;
flex-wrap:wrap;
gap:24px;
align-items:center;
padding:32px 0
}
        
.hero .text{
flex:1 1 320px
}
        
.hero h1{
margin:0 0 8px;
font-size:28px
}
        
.hero p{
width:100%;
margin-left:3px;
color:#444;
word-spacing:2px;
}

.small1{
margin-top:-15px;
word-spacing:1.8px;
}
       
.hero img{
display:flex;
flex-direction:column;
max-width:100%;
border-radius:8px;
margin-top:-23px;
}

center h1{
padding:8px 0;
}

center h2{
padding-top:10px;
}
        
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin:24px 0
}
        
.card{
background:white;
padding:16px;
border-radius:8px;
box-shadow:0 1px 3px rgba(15,23,42,0.06)
}
        
.card h4{
margin:8px 0 4px;
color:#1a365d;
font-size:1.05rem
}
        
.card p{
margin:5px 8px;
text-align:justify;
color:#556;
font-size:.9rem;
margin-top:-5px;
margin-bottom:25px;
}

.card h3{
margin-left:6px;
}

/*============ Video layout========= */
        
/* Video row responsive fix */
.video-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 12px auto;
}

.video-left,
.video-left video {
  width: 45%;
  max-width: 600px; /* Desktop max width */
  height: auto;
  border-radius: 8px;
}

.video-right {
  flex: 1;
  min-width: 250px;
}

.video-right h3 {
  font-size: 1.7rem;
}

.video-right .small2 {
  width: 100%;
  margin-top: 10px;
  font-size: 1rem;
  position: static; /* remove absolute */
}

#principal {
margin-top: 18px;
padding: 20px;
}

#principal h2 {
margin-bottom: 28px;
margin-top: -20px;
margin-left:-17px;
}

/* Flex layout */
.principal-box { 
display: flex; 
margin-left:-17px; 
gap: 20px; 
align-items: flex-start; 
} 
/* Text */ 
.principal-text { 
flex: 1; 
}

.principal-name {
margin-bottom: 5px;
margin-top: 1px;
color: #1a365d;
font-weight: 700;
}

#student{
width:588px;
margin-top:1px;
text-align:justify;
word-spacing:1.8px;
}

#images h4{
margin-left:5px;
}

#images p{
margin-left:6px;
margin-top:3px;
text-align:justify;
}

.footer-links{
display:flex;
flex-direction:column;
}

.footer-links a{
color:#fff;
text-decoration:none;
margin-right:30px;
}

.footer1 h3{
margin-left:95px;
margin-top:2px;
color:#1a365d
}
.footer1 p{
margin-left:95px;
max-width:240px;
}

.footer2 h3{
margin-left:87px;
margin-top:2px;
color:#1a365d
}
.footer2 p{
margin-left:95px;
}



        footer{
            background:#000;
            color:#fff;
            padding:18px 0;
            margin-top:32px;
            border-top:1px solid rgba(255,255,255,0.08);
        }
        footer h3{color:#fff !important}
        footer .small{font-size:0.9rem;color:#ddd}
        footer a{color:inherit}
        
        @media(max-width:600px){
           /* .menu-toggle{display:inline-flex;align-items:center}*/
            .nav-links{display:none;position:absolute; right:16px;top:72px;background:white;padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(11,27,56,0.08);flex-direction:column;gap:4px;min-width:160px}
            .nav-links.open{display:flex;}
            .nav-links a{margin:8px 0;margin-left:0}
            .main-menu{display:block;}
           
.menu{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.menu a{
flex: 1 45%;   /* 2 items ek row */
text-align:center;
padding:6px;
font-size:14px;
}

#small02{
margin-top:10px;
}
        }
       
/* Image responsive */
.principal-box img {
    width: 160px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(11,27,56,0.06);
}



/* 📱 Mobile view */
@media (max-width: 768px) {
    
body{
overflow-x:hidden;
}
/*================*/
.menu-btn{
display:block;
width:auto;
height:auto;
cursor:pointer;
font-size:28px;
}
body.no-scroll {
overflow: hidden;
}
.close-btn{
display:block;
width:auto;
height:auto;
text-align:right;
cursor:pointer;
font-size:25px;
margin-top:10px;
margin-right:10px;
}

.side-menu1{
display:block;
position:fixed;
top:0;
right:-310px;
width:310px;
height:100%;
background:white;
padding-left:14px;
transition:0.4s ease;
}

.side-menu1{
list-style:none;
margin-top:40px;
margin-bottom:14px;
padding:20px 0;
}

.side-menu1 a{
display:block;
text-decoration:none;
color:#333;
font-size:13px;
font-weight:bold;
padding:10px 20px;
}

.side-menu1 a:hover{
color:orange;
}
#main-nav{
display:none;
}

/*========================*/

.video-row {
flex-direction: column;
align-items: center;
}

.video-left {
width: 100%;
}

.video-left video {
width: 100%;
height: auto;
}

.video-right {
width: 100%;
}

  .video-right h3{ 
width:270px; 
margin-top:-17px; 
font-size:25px; 
white-space:nowrap; 
} 
.small2{ 
position:absolute; 
width:88%; 
margin-top:-15px; 
font-size:14px;
line-height:1.3; 
text-align:justify; 
}

#small02{
margin-top:-10px;
}

               
#principal{
height:600px;
}

#principal h2{
margin-top:-5px;
}

.principal-box { 
flex-direction: column; 
text-align: center; 
} 

.principal-box { 
width: 580px; 
margin-left:-18px; 
margin-top:-10px; 
} 

.principal-name { 
margin-top: 5px; 
margin-right:330px; 
font-size:15px; 
white-space:nowrap; 
} 

#student{ 
max-width:88%; 
margin-top:10px; 
text-align:justify; 
font-size:13px; 
position:absolute; 
}
  
.footer1 h3{
margin-left:1px;
}
.footer1 p{
margin-left:5px;
}

.footer2 h3{
margin-left:1px;
}

.footer2 a{
margin-right:220px;
}
}


@media (min-width:769px) and (max-width:992px){

body{
overflow-x:hidden;
}

.section{
margin-top:85px;
}

.video-row{
flex-direction: row;
}

.video-left{
width: 100%;
height: auto;
margin-left:125px;
margin-top:15px;
}

.video-left video{
width: 100%;
height: auto;
}

.video-right h3{
width:100%;
font-size:26px;
margin-top:0;
}

.small2{
position:relative;
width:100%;
margin-top:10px;
font-size:15px;
line-height:1.5;
text-align:justify;
}

#principal{
height:auto;
}

.principal-box{
flex-direction:row;
width:100%;
margin-left:-17px;
margin-top:80px;
}

.principal-name{
margin-top:-50px;
margin-right:0;
font-size:18px;
white-space:normal;
}

#student{
max-width:73%;
margin-top:10px;
text-align:justify;
font-size:15px;
position:relative;
}

.footer1 h3,
.footer1 p{
margin-left:5px;
margin-right:8px;
}

.footer2 h3{
margin-left:65px;
}

.footer2 a{
margin-left:-15px;
}
}