/* UNIVERSAL MOBILE SAFE RULES */

*{
    box-sizing:border-box;
    }
    
    img{
    max-width:100%;
    height:auto;
    }
    
    body{
    margin:0;
    overflow-x:hidden;
    }
html{
    scroll-behavior:smooth;
    }
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    }
    
   
    
    
    .logo{
    color:white;
    font-size:22px;
    font-weight:700;
    }
    
    /* HERO */
    .hero{
        text-align:center;
        padding:120px 20px;
        background:#f4fff4;
        color:#000;
        }
        
        .hero h1{
        font-size:40px;
        margin-bottom:20px;
        }
        
        .hero p{
        max-width:700px;
        margin:auto;
        line-height:1.6;
        margin-bottom:30px;
        }
    
    .hero h1{
    font-size:40px;
    margin-bottom:20px;
    }
    
    .hero p{
    max-width:700px;
    margin:auto;
    line-height:1.6;
    margin-bottom:30px;
    }
    
    .btn{
    background:#ffc107;
    padding:12px 25px;
    text-decoration:none;
    color:black;
    border-radius:6px;
    font-weight:600;
    }
    
    /* FEATURES */
    .features{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:60px 20px;
    flex-wrap:wrap;
    }
    
    .feature-card{
    background:white;
    padding:25px;
    width:280px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    }
    
    /* FOOTER */
    .footer{
        color:white;
        text-align:center;
        padding:18px;
        font-size:15px;
        margin-top:40px;
        }

    /* PAGE HEADER */
.page-header{
    background:#e8f5e9;
    padding:60px 20px;
    text-align:center;
    }
    
    .page-header h1{
    font-size:34px;
    }
    
    /* ABOUT SECTION */
    .about-section{
    padding:60px 20px;
    max-width:900px;
    margin:auto;
    text-align:center;
    line-height:1.7;
    }
    
    /* COMMITTEE */
    .committee{
    padding:60px 20px;
    text-align:center;
    }
    
    .committee-container{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:30px;
    }
    
    .member-card{
    background:white;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    width:220px;
    }
    
    .member-card img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
    }
    /* ADMISSION INFO */
.admission-info{
    max-width:900px;
    margin:auto;
    padding:50px 20px;
    text-align:center;
    line-height:1.7;
    }
    
    .notice-box{
    background:#fff3cd;
    padding:20px;
    border-radius:8px;
    margin-top:20px;
    }
    
    /* DOCUMENT LIST */
    .documents{
    text-align:center;
    padding:40px 20px;
    }
    
    .documents ul{
    list-style:none;
    margin-top:20px;
    }
    
    .documents li{
    margin:10px 0;
    font-weight:500;
    }
    
    /* FORM */
    .application-form{
        max-width:600px;
        margin:60px auto;
        padding:60px 25px;
        background:#ffffff;
        border-radius:12px;
        box-shadow:0 5px 20px rgba(0,0,0,0.08);
        }
    
        .application-form h2{
            margin-bottom:25px;
            text-align:center;
            }    
    .application-form form{
    display:flex;
    flex-direction:column;
    gap:15px;
    }
    
    .application-form input,
    .application-form select{
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    }
    /* PRINCIPAL */
.principal{
    text-align:center;
    padding:60px 20px;
    }
    
    .principal img{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
    }
    
    /* STAFF GRID */
    .staff-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    padding:40px 20px;
    }
    
    .staff-card{
    background:white;
    padding:20px;
    width:230px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    font-weight:500;
    line-height:1.6;
    }

    /* GALLERY */
.gallery-section{
    padding:50px 20px;
    text-align:center;
    }
    
    .gallery-section h2{
    margin-bottom:25px;
    }
    
    .gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:20px;
    max-width:1000px;
    margin:auto;
    }
    
    .gallery-grid img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    transition:0.3s;
    }
    
    .gallery-grid img:hover{
    transform:scale(1.05);
    }

    /* CONTACT */
.contact-container{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    padding:50px 20px;
    }
    
    .contact-card{
    background:white;
    padding:25px;
    width:260px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    }
    
    .map-section{
    padding:40px 20px;
    text-align:center;
    }
    
    .map-section h2{
    margin-bottom:20px;
    }

    .staff-card:hover,
.member-card:hover,
.feature-card:hover,
.contact-card:hover{
transform:translateY(-5px);
transition:0.3s;
}

.whatsapp{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#25D366;
    color:white;
    font-size:24px;
    padding:15px 18px;
    border-radius:50%;
    text-decoration:none;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
    }

    @media(max-width:768px){

        .navbar{
        flex-direction:column;
        gap:10px;
        }
        
        .hero h1{
        font-size:26px;
        }
        
        .features{
        flex-direction:column;
        align-items:center;
        }
        
        }

        /* FORM PAPER STYLE */
.form-paper{
    max-width:1000px;
    margin:40px auto;
    background:white;
    padding:30px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    }
    
    .form-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px;
    }
    
    .form-table td,
    .form-table th{
    border:1px solid #ccc;
    padding:10px;
    }
    
    .form-table input,
    .form-table select{
    width:100%;
    padding:8px;
    border:none;
    outline:none;
    }
    
    .photo-box{
        width:150px;
        text-align:center;
        font-weight:bold;
        vertical-align:top;
        }
        
        .photo-box input{
        width:100%;
        font-size:12px;
        }

        .form-table label{
            margin-right:15px;
            font-weight:500;
            }

            .form-table select{
                width:100%;
                padding:8px;
                border:none;
                outline:none;
                background:#fff;
                }


/* NAVBAR */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    padding:20px 40px;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }
    
    .navbar nav{
    display:flex;
    align-items:center;
    gap:25px;
    }
    
    .navbar a{
    color:white;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    }
    
    .logo{
        display:flex;
        align-items:center;
        gap:10px;
        }
        
        .logo img{
        height:70px;
        }
        
        .school-name{
        font-size:22px;
        font-weight:800;
        color:white;
        letter-spacing:1px;
        }
    
  /* DROPDOWN */

.dropdown{
    position:relative;
    }
    
    .dropdown-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:white;
    min-width:200px;
    border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,0.15);
    z-index:9999;
    }
    
    .dropdown-menu a{
    display:block;
    padding:10px 15px;
    color:#333;
    text-decoration:none;
    }
    
    .dropdown-menu a:hover{
    background:#f2f2f2;
    }
    
    .dropdown-menu.show{
    display:block;
    }
    
    /* FOOTER */
    
    .footer{
    color:white;
    text-align:center;
    padding:20px;
    margin-top:40px;
    font-size:15px;
    }
                
                .footer{
                color:white;
                text-align:center;
                padding:20px;
                margin-top:40px;
                }  

/* HISTORY PAGE */

.page-header{
    text-align:center;
    padding:40px 20px;
    }
    
    .history-container{
    max-width:900px;
    margin:auto;
    padding:20px;
    line-height:1.8;
    font-size:17px;
    color:#444;
    }
    
    .history-container p{
    margin-bottom:20px;
    }
    
    /* LEGACY SECTION */
    
    .legacy-section{
    padding:40px;
    display:flex;
    justify-content:center;
    }
    
    .legacy-card{
    display:flex;
    gap:25px;
    background:#f9f9f9;
    padding:25px;
    border-radius:10px;
    box-shadow:0 3px 15px rgba(0,0,0,0.1);
    max-width:900px;
    align-items:center;
    }
    
    .legacy-card img{
    width:140px;
    border-radius:10px;
    }
    
    .legacy-text h2{
    margin-bottom:10px;
    }
   /* COMMITTEE PAGE */

.committee-section{
    padding:60px 20px;
    text-align:center;
    }
    
    .committee-container{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    margin-top:30px;
    }
    
    .member-card{
    background:#fff;
    padding:25px;
    width:260px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    transition:0.3s;
    }
    
    .member-card:hover{
    transform:translateY(-5px);
    }
    
    .member-card img{
        width:220px;
        height:260px;
        object-fit:cover;
        border-radius:8px;
        margin-bottom:15px;
        border:3px solid #e91e63;
        }
    .member-card h3{
    margin-bottom:5px;
    }
    
    .member-card p{
    color:#777;
    font-size:14px;
    } 
    .hero{
        min-height:90vh;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        color:white;
        background:#f48fb1;
        }
        
        .hero h1{
        font-size:52px;
        font-weight:800;
        margin-bottom:15px;
        }
        
        .hero-text{
        max-width:750px;
        line-height:1.7;
        font-size:18px;
        font-weight:500;
        margin-top:10px;
        }
        
        .hero-logo{
        width:220px;
        margin-top:-35px;
        margin-bottom:25px;
        }


        .features{
            display:flex;
            justify-content:center;
            gap:35px;
            padding:70px 20px;
            flex-wrap:wrap;
            background:#fafafa;
            }
            
            .card{
            background:white;
            padding:35px;
            border-radius:12px;
            width:100%;
            max-width:320px;
            text-align:center;
            box-shadow:0 5px 20px rgba(0,0,0,0.08);
            transition:0.3s;
            }
            
            .card:hover{
            transform:translateY(-6px);
            }
            
            .icon{
            font-size:40px;
            margin-bottom:15px;
            color:#e91e63;
            }
            
            .card h3{
            margin-bottom:10px;
            font-size:20px;
            }
            
            .card p{
            color:#666;
            line-height:1.6;
            font-size:15px;
            }

            /* ADMISSION PAGE */

.admission-container{
    text-align:center;
    padding:40px 20px;
    max-width:900px;
    margin:auto;
    }
    
    .admission-container h2{
        font-size:36px;
        font-weight:700;
        margin-bottom:15px;
        color:#333;
        }
    .admission-text{
    font-size:17px;
    line-height:1.7;
    color:#444;
    margin-bottom:25px;
    }
    
    .notice-box{
    background:#f3e1b9;
    padding:20px;
    border-radius:8px;
    max-width:600px;
    margin:20px auto;
    font-size:15px;
    }
    
    .documents{
    text-align:center;
    padding:40px 20px;
    }
    
    .documents h2{
    margin-bottom:20px;
    }
    
    .document-list{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
        max-width:800px;
        margin:auto;
        padding:0;
        list-style:none;
        }
        
        .document-list li{
        background:#ffffff;
        padding:15px 20px;
        border-radius:8px;
        box-shadow:0 3px 10px rgba(0,0,0,0.1);
        font-size:15px;
        min-width:250px;
        text-align:center;
        border-left:4px solid #e91e63;
        }
    
    .apply-section{
    text-align:center;
    margin:40px 0;
    }

    /* DOCUMENT BOX */

.documents{
    text-align:center;
    padding:50px 20px;
    }
    
    .documents-box{
    background:white;
    max-width:600px;
    margin:25px auto;
    padding:30px 40px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    text-align:left;
    }
    
    .documents-box ul{
    list-style:disc;
    padding-left:20px;
    }
    
    .documents-box li{
    font-size:16px;
    line-height:1.9;
    color:#333;
    margin-bottom:8px;
    }

    /* PRINCIPAL SECTION */

.principal{
    text-align:center;
    padding:50px 20px;
    }
    
    .principal-photo{
        width:260px;
        height:300px;
        object-fit:cover;
        border-radius:6px;
        margin-bottom:15px;
        box-shadow:0 6px 15px rgba(0,0,0,0.2);
        }
    
    .principal h2{
    margin-bottom:5px;
    }
    
    .designation{
    font-weight:600;
    color:#e91e63;
    margin-bottom:5px;
    }

    /* PRINCIPAL PHOTO FIX */

.principal img{
    width:260px;
    height:320px;
    object-fit:cover;
    border-radius:5px !important;
    }

    /* PRINCIPAL SECTION */

.principal-section{
    display:flex;
    justify-content:center;
    margin-top:40px;
    margin-bottom:40px;
    }
    
    .staff-card{
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    text-align:center;
    width:300px;
    }
    
    .staff-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:3px;
    border:3px solid #e91e63;
    margin-bottom:15px;
    }
    
    .staff-card h3{
    margin:10px 0 5px;
    font-size:20px;
    font-weight:600;
    }
    
    .staff-card p{
    margin:0;
    color:#555;
    }

    /* PRINCIPAL CARD */

.principal-section{
    display:flex;
    justify-content:center;
    margin:40px 0;
    }
    
    .principal-section .staff-card{
    width:350px;        /* horizontal width you wanted */
    }
    
    .principal-section .staff-card img{
    width:100%;
    height:auto;        /* keep full image */
    object-fit:contain; /* do not crop */
    border-radius:10px;
    border:3px solid #e91e63;
    }

    /* WEBSITE THEMES */

/* Pink Theme */
body.pink .navbar,
body.pink footer{
color:white;
}

/* Blue Theme */
body.blue .navbar,
body.blue footer{
background:#2196f3;
}

/* Green Theme */
body.green .navbar,
body.green footer{
background:#4caf50;
}

/* Classic White Theme */
body.white .navbar,
body.white footer{
background:#333;
}

.gallery-title{
    text-align:center;
    font-size:28px;
    margin:50px 0 20px;
    font-weight:bold;
    }
    
    .gallery-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    margin-bottom:40px;
    }
    
    .gallery-img{
    width:260px;
    height:180px;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    }

   /* ================= FINAL MOBILE RESPONSIVE FIX ================= */

@media screen and (max-width:768px){

    /* GLOBAL */
    
    body{
    padding:0;
    margin:0;
    overflow-x:hidden;
    }
    
    /* NAVBAR */
    
    .navbar{
    flex-direction:column;
    align-items:center;
    padding:12px;
    text-align:center;
    }
    
    .navbar nav{
    flex-direction:column;
    gap:8px;
    }
    
    .logo img{
    height:55px;
    }
    
    /* HERO */
    
    .hero{
    height:auto;
    padding:50px 20px;
    }
    
    .hero-logo{
    width:100px;
    margin-bottom:15px;
    }
    
    .hero h1{
    font-size:26px;
    line-height:1.3;
    }
    
    .hero-text{
    font-size:15px;
    line-height:1.6;
    }
    
    .btn{
    font-size:14px;
    padding:10px 18px;
    }
    
    /* FEATURES */
    
    .features{
    flex-direction:column;
    align-items:center;
    gap:20px;
    }
    
    .card{
    width:95%;
    max-width:350px;
    }
    
    /* STAFF */
    
    .staff-container{
    flex-direction:column;
    align-items:center;
    }
    
    .staff-card{
    width:95%;
    max-width:350px;
    }
    
    /* COMMITTEE */
    
    .committee-container{
    flex-direction:column;
    align-items:center;
    }
    
    .member-card{
    width:95%;
    max-width:350px;
    }
    
    /* GALLERY */
    
    .gallery-row{
    flex-direction:column;
    align-items:center;
    }
    
    .gallery-img{
    width:95%;
    height:auto;
    }
    
    /* FORMS */
    
    .form-paper{
    width:95%;
    padding:20px;
    }
    
    .form-table{
    font-size:14px;
    }
    
    /* FOOTER */
    
    footer{
    font-size:14px;
    padding:15px;
    text-align:center;
    }
    
    }

    @media (max-width:768px){

        .navbar{
        flex-direction:column;
        align-items:center;
        padding:10px;
        }
        
        .navbar nav{
        flex-direction:column;
        gap:8px;
        text-align:center;
        }
        
        .hero{
        padding:40px 20px;
        }
        
        .hero h1{
        font-size:26px;
        }
        
        .hero-logo{
        width:100px;
        }
        
        .hero-text{
        font-size:15px;
        }
        
        .features{
        flex-direction:column;
        align-items:center;
        }
        
        .card{
        width:100%;
        max-width:320px;
        }
        
        }



        /* ===== FINAL MOBILE FIX ===== */
@media (max-width:768px){

    /* Prevent horizontal cut/cropping */
    html, body{
      overflow-x:hidden;
    }
    
    /* NAVBAR */
    .navbar{
      flex-direction:column;
      align-items:center;
      padding:12px 15px;
    }
    
    .navbar nav{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      width:100%;
    }
    
    /* Logo smaller */
    .logo img{
      height:50px;
    }
    
    /* HERO */
    .hero{
      min-height:auto;
      padding:40px 15px;
    }
    
    .hero-logo{
      width:90px;
    }
    
    .hero h1{
      font-size:24px;
      line-height:1.3;
    }
    
    .hero-text{
      font-size:15px;
    }
    
    /* CARDS */
    .features{
      flex-direction:column;
      align-items:center;
    }
    
    .card{
      width:100%;
      max-width:320px;
    }
    
    /* GALLERY */
    .gallery-row{
      flex-direction:column;
      align-items:center;
    }
    
    .gallery-img{
      width:100%;
      max-width:350px;
      height:auto;
    }
    
    /* STAFF + COMMITTEE */
    .staff-container,
    .committee-container{
      flex-direction:column;
      align-items:center;
    }
    
    .staff-card,
    .member-card{
      width:100%;
      max-width:320px;
    }
    
    /* FORMS */
    .form-paper{
      width:95%;
      padding:20px;
    }
    
    /* TABLES (important to stop cropping) */
    .form-table{
      display:block;
      overflow-x:auto;
    }
    
    /* FOOTER */
    footer{
      text-align:center;
      font-size:14px;
    }
    
    }

    /* HAMBURGER MENU */

.menu-toggle{
    display:none;
    font-size:28px;
    color:white;
    cursor:pointer;
    }
    
    /* MOBILE */
    
    @media (max-width:768px){
    
    .navbar{
    flex-direction:row;
    justify-content:space-between;
    padding:15px;
    }
    
    .menu-toggle{
    display:block;
    }
    
    .navbar nav{
    display:none;
    flex-direction:column;
    background:inherit;
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    text-align:center;
    padding:15px 0;
    }
    
    .navbar nav.active{
    display:flex;
    }
    
    .navbar nav a{
    padding:10px 0;
    }
    
    }

    /* HISTORY PAGE MOBILE FIX */

@media (max-width:768px){

    .legacy-card{
    flex-direction:column;
    text-align:center;
    }
    
    .legacy-card img{
    width:160px;
    height:auto;
    margin-bottom:15px;
    }
    
    .legacy-text{
    padding:0 10px;
    }
    
    }

    .logo-link{
        display:flex;
        align-items:center;
        gap:10px;
        text-decoration:none;
        color:white;
        }

/* FINAL HERO FIX (OVERRIDES ALL ABOVE) */

.hero{
  background:#fcfcfc!important;
  color:#333 !important;
  }
  
  .hero h1{
  color:#222 !important;
  }
  
  .hero-text{
  color:#555 !important;
  }  
  
/* MAIN FEATURE CARD - CENTERED & WIDE */

.main-member{
  display:flex;
  justify-content:center;
  }
  
  .highlight{
  width:450px;          /* increase width */
  max-width:95%;
  text-align:center;
  padding:25px;
  }
  
  /* IMAGE */
  
  .highlight img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  margin-bottom:15px;
  }
  
  /* TEXT */
  
  .member-desc{
  font-size:16px;
  color:#120808;
  line-height:1.8;
  margin-top:12px;
  text-align:justify;
  }

  /* FORCE FIX FOR MURALI IMAGE */

  .highlight img{
    width:100%;
    height:350px;        /* fixed height */
    object-fit:cover;    /* fills space */
    object-position:top; /* VERY IMPORTANT → keeps face visible */
    border-radius:10px;
    }
/* FORCE TEXT FIX */

.highlight .member-desc{
  font-size:14px !important;
  color:#333 !important;
  line-height:1.8 !important;
  }