/* ✅ CSS ভেরিয়েবলস (Custom CSS Variables for Easy Theming) */
:root{--primary-red:#E63946;--dark-khaki:#6B0000;--light-khaki:#b84b00;--white:#FFF;--black:#333;--light-gray:#f0f2f5;--medium-gray:#777;--card-bg:#FFF;--box-shadow-light:rgba(0,0,0,.1);--box-shadow-dark:rgba(0,0,0,.15);--animation-duration:.8s;--accent-color:#C82333;--light-accent-color:#f7e6e8;--notice-item-bg:#f9f9f9;--notice-item-border-left:#8B4513;--popup-bg:#f0f8ff;--popup-border:#333;--school-header-color:darkgreen;--school-header-bg:#e6ffe6;--notice-title-bg:green;--notice-title-color:white;--link-btn-bg:#007bff;--download-btn-bg:#28a745;--close-btn-bg:#dc3545}

/* 🏠 সাধারণ বডি এবং টাইপোগ্রাফি (General Body & Typography) */
html,body{font-family:'Poppins',sans-serif;margin:0;padding:0;width:100%;background-color:var(--light-gray);color:var(--black);line-height:1.7;scroll-behavior:smooth;overflow-x:hidden}
body.no-scroll{overflow:hidden}
.container{max-width:1200px;margin:30px auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}

/* 🏷️ হেডার সেকশন (Header Section) */
.main-header{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--primary-red) 0%,#B83227 50%,var(--dark-khaki) 100%);color:var(--white);padding:60px 20px 20px;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.3);position:relative;overflow:hidden;z-index:900;width:100%;box-sizing:border-box}
.header-content{position:relative;z-index:2;flex-grow:1;text-align:center}
/* .logo-container Style */
.main-header .logo-container{background:url('PHS-LOGO.png') center/cover no-repeat var(--white);filter:blur(.8px);width:130px;height:130px;border-radius:50%;border:6px solid rgba(255,255,255,.9);margin:0 auto 20px;position:relative;overflow:hidden;z-index:10;user-select:none;pointer-events:none;animation:pulse 2s infinite alternate ease-in-out}
/* Watermark ::before and ::after */
.main-header .logo-container::before{content:"P\A H\A S";white-space:pre;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:.8;color:rgba(0,0,0,.6);font-size:2.5em;font-weight:900;z-index:11;pointer-events:none;text-shadow:0 0 5px rgba(255,255,255,.8);opacity:.8}
.main-header .logo-container::after{content:"P S";white-space:nowrap;position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);letter-spacing:15px;font-size:2.5em;width:100%;color:rgba(0,0,0,.6);font-weight:900;z-index:11;pointer-events:none;text-shadow:0 0 5px rgba(255,255,255,.8);opacity:.8;text-align:center}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{transform:scale(1.05);box-shadow:0 0 0 15px rgba(255,255,255,0)}}
.main-header h1{margin:0;font-size:3.8em;letter-spacing:2px;text-shadow:3px 3px 6px rgba(0,0,0,.7);font-weight:700}
.main-header .tagline{font-size:1.5em;font-style:italic;opacity:.9;margin-top:15px;font-weight:300}
.main-header .slogan{font-size:1.8em;margin-top:25px;font-weight:600;animation:fadeIn 2s ease-in-out forwards}
@keyframes fadeIn{to{opacity:1}} /* fadeIn অ্যানিমেশন শুধুমাত্র স্কেলেটন */
.slogan .sparkle-emoji{animation:sparkle 1.5s infinite alternate;display:inline-block;transform:scale(1);transition:transform .3s ease}
@keyframes sparkle{0%{opacity:.5;text-shadow:0 0 5px rgba(255,255,0,.7);transform:scale(1)}50%{opacity:1;text-shadow:0 0 10px rgba(255,255,0,.9),0 0 20px rgba(255,255,200,.6);transform:scale(1.1)}100%{opacity:.5;text-shadow:0 0 5px rgba(255,255,0,.7);transform:scale(1)}}
.slogan .sparkle-emoji:hover{animation-play-state:paused;opacity:1;text-shadow:0 0 15px #ff0,0 0 25px rgba(255,255,200,.8),0 0 35px rgba(255,255,255,.5);transform:scale(1.2)}
.top-login-button{position:absolute;top:20px;right:20px;background-color:var(--primary-red);color:var(--white);padding:6px 15px;border:1px solid var(--white);border-radius:5px;text-decoration:none;font-weight:600;font-size:.9em;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:1002;display:inline-block;white-space:nowrap}
.top-login-button:hover{background-color:var(--accent-color);transform:translateY(-2px) scale(1.02);box-shadow:0 6px 15px rgba(0,0,0,.4);border-color:var(--light-gray)}

/* 🖼️ হিরো সেকশন (Scrolling Images) */
.hero-section{position:relative;height:500px;overflow:hidden;background-color:#eee;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:500}
.hero-images{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-images::-webkit-scrollbar{display:none}
.hero-image{flex-shrink:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7);transform:scale(1);transition:filter .5s ease,transform .5s ease;scroll-snap-align:start}
.hero-section:hover .hero-image{filter:brightness(1);transform:scale(1.02)}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;color:var(--white);font-size:3em;font-weight:700;text-align:center;text-shadow:3px 3px 8px rgba(0,0,0,.8);opacity:1;transform:translateY(0);animation:fadeInOverlay 3s forwards 1.5s;transition:opacity .5s ease,transform .5s ease}
.hero-section:hover .hero-overlay{opacity:0;transform:translateY(-100%)}
@keyframes fadeInOverlay{to{opacity:1}}

/* 📜 স্ক্রলিং টেক্সট (Marquee/Scrolling Line স্টাইল) */
.scrolling-line-container{width:100%;overflow:hidden;padding:10px 0 0 0;position:relative}
.scrolling-wrapper{display:flex;width:max-content;flex-shrink:0;animation:scrollText 30s linear infinite;white-space:nowrap;font-size:1.2em;color:var(--dark-khaki);font-weight:900}
@keyframes scrollText{from{transform:translateX(10%)}to{transform:translateX(-90%)}}
.scrolling-line-container:hover .scrolling-wrapper{animation-play-state:paused}
.marquee-spacer{padding:0 80px}
.marquee-default-msg{width:max-content;padding-left:100px}

/* 📰 নোটিস আইটেম এবং পপ-আপ (notice-item & Pop-up) */
.notice-item{cursor:pointer;margin:10px 0;padding:8px 10px;background-color:var(--notice-item-bg);border-left:6px solid var(--notice-item-border-left);border-radius:4px;transition:background-color 0.3s;display:flex;justify-content:space-between;align-items:center}
.notice-item.hover{transform:translateY(-5px) scale(1.02);box-shadow:0 8px 15px rgba(0,0,0,.15);background-color:var(--light-accent-color)}

/* ⚠️ ইনফো/এরর/লোডিং বক্স (Info/Error/Loading Box) */
.info-box{font-size:18px;font-weight:bold;padding:10px;border-radius:8px;text-align:center;max-width:320px;margin:0 auto}
.error-box{border:2px solid #ff9999;background-color:#ffe6e6;color:#cc0000}
.loading-box{border:2px solid #6495ED;background-color:#E6F0FF;color:#4169E1}
.avail-msg{color:#FFFFFF;background-color:#E74C3C;border:1px solid #C0392B;box-shadow:0 5px 15px rgba(231, 76, 60, 0.4);padding:10px 15px;border-radius:5px;font-weight:600;font-size:14px;text-align:center;margin:10px auto;width:80%;display:block;letter-spacing:0.5px}
/* CSS2 থেকে .avail-msg ওভাররাইড - শুধুমাত্র অ্যানিমেশন যোগ করতে (স্বতন্ত্র ব্যবহার নিশ্চিত) */
.avail-msg.flex-style{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Arial',sans-serif;font-size:1.2rem;font-weight:bold;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.4);background:linear-gradient(45deg,#ff4e50,#fc913a);border-radius:10px;padding:15px 30px;box-shadow:0 4px 8px rgba(0,0,0,.2);margin:20px auto;max-width:fit-content;animation:pulse 1.5s infinite ease-in-out}

/* 🌐 পপ-আপ ওভারলে এবং বক্স */
#notice-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:9998}
.notice-popup-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:90vh;overflow-y:auto;background:var(--popup-bg);padding:20px;border:2px solid var(--popup-border);border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.7);z-index:9999;text-align:center;max-width:90%;min-width:240px;font-family:Arial, sans-serif;pointer-events:auto}
#notice-popup{width:300px;position:fixed;max-height:90vh;overflow-y:auto;padding:20px !important;box-sizing:border-box} /* CSS2 এর অতিরিক্ত স্টাইল */

/* পপ-আপের ভেতরের স্টাইল */
.notice-popup-box .school-header{color:var(--school-header-color);background-color:var(--school-header-bg);font-size:18px;font-weight:bold;margin-bottom:10px;font-family:'Times New Roman', serif}
.notice-popup-box .notice-title{background-color:var(--notice-title-bg);color:var(--notice-title-color);font-weight:bold;font-size:15px;padding:10px;border-radius:5px;margin-bottom:15px}
.notice-popup-box .notice-date{margin-bottom:10px}
.notice-popup-box .notice-subject{color:var(--school-header-color);background-color:var(--school-header-bg);font-weight:bold;font-size:14px;padding:6px;border-radius:4px;margin-bottom:12px}
.popup-buttons{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.popup-link-btn{background-color:var(--link-btn-bg);color:white;padding:6px 10px;border-radius:5px;font-weight:bold;font-size:12px;text-decoration:none}
.popup-buttons .download-btn{background-color:var(--download-btn-bg)}
.popup-buttons .close-btn{background-color:var(--close-btn-bg)}

/* 🔘 কাস্টম বাটন এবং পেজিনেশন */
.custom-button{padding:8px 15px;margin:0 5px;background-color:var(--link-btn-bg);color:white;border:none;border-radius:5px;cursor:pointer;transition:opacity 0.3s, background-color 0.3s}
.custom-button.disabled{opacity:0.6;cursor:not-allowed}
.pagination-controls{display:flex;justify-content:center;align-items:center;margin:20px 0}
.pagination-controls .page-info{margin:0 10px;font-weight:bold}

/* 💎 কার্ড স্টাইল (Card Styles for Sections) */
.card{background:var(--card-bg);border-radius:15px;box-shadow:0 10px 30px var(--box-shadow-light);padding:25px 20px 30px;transition:transform .4s ease,box-shadow .4s ease;border-top:8px solid var(--dark-khaki);overflow:hidden;position:relative}
.card:hover{transform:translateY(-10px);box-shadow:0 15px 40px var(--box-shadow-dark)}
h2{color:var(--dark-khaki);font-size:2.5em;margin-bottom:25px;padding-bottom:12px;border-bottom:3px solid var(--primary-red);display:inline-block;position:relative;overflow:hidden;width:100%;text-align:center}
h2 .icon{margin-right:18px;color:var(--primary-red);font-size:1.4em;animation:iconBounce 1s infinite alternate;vertical-align:middle}
@keyframes iconBounce{0%{transform:translateY(0)}100%{transform:translateY(-5px)}}
h3{color:var(--black);font-size:1.8em;margin:30px 0 15px;border-left:5px solid var(--light-khaki);padding-left:15px}
p{margin-bottom:18px;font-size:1.15em;line-height:1.8}
a{color:var(--primary-red);text-decoration:none;transition:color .3s ease,text-decoration .3s ease}
a:hover{color:var(--dark-khaki);text-decoration:underline}
ul{list-style:none;padding:0;margin:0}
.class-list li{background-color:var(--light-gray);margin-bottom:10px;padding:15px 20px;border-left:6px solid var(--dark-khaki);border-radius:8px;display:flex;align-items:center;font-size:1.1em;box-shadow:0 3px 8px rgba(0,0,0,.08);transition:transform .2s ease,background-color .2s ease}
.class-list li:hover{transform:translateX(5px);background-color:#e0e6eb}
.check-icon{color:#28a745;margin-right:12px;font-size:1.2em}
.subject-combo strong{color:var(--dark-khaki)}

/* 🧑‍💼 প্রিন্সিপাল সেকশন (Principal Section) */
.principal-message{background:linear-gradient(135deg,#fefefe 0%,#fefefe 100%);border-top:8px solid var(--dark-khaki)}
.principal-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:25px;width:100%}
.principal-photo{width:180px;height:180px;border-radius:50%;object-fit:cover;border:5px solid var(--primary-red);box-shadow:0 8px 20px rgba(0,0,0,.2);flex-shrink:0;margin:25px 0 15px;animation:principalPulse 2.5s infinite alternate ease-in-out}
@keyframes principalPulse{0%{transform:scale(1);box-shadow:0 8px 20px rgba(0,0,0,.2),0 0 0 0 rgba(230,57,70,.7)}100%{transform:scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 15px rgba(230,57,70,0)}}
.principal-text{flex-grow:1}
.principal-text h3{margin-top:0;font-size:1.5em;color:var(--dark-khaki);border-left:none;padding-left:0}
.principal-text p{font-size:1.1em;line-height:1.7;color:var(--black)}

/* 🗣️ কোট সেকশন (Quotes Section) */
.quotes{background:linear-gradient(135deg,#e6f7ff 0%,#cceeff 100%);border-top:8px solid #007bff}
.quote-item{margin-bottom:25px;padding:20px;border-left:6px solid #0056b3;background-color:#f0faff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);transition:background-color .3s ease}
.quote-item:hover{background-color:#e3f2fd}
.quote-text{font-size:1.3em;font-style:italic;color:#444;margin-bottom:10px}
.quote-author{text-align:right;font-weight:600;color:var(--dark-khaki);font-size:1.1em;margin-bottom:5px}
.quote-english{font-size:1.1em;color:#666;margin-top:10px;border-top:1px dashed #ccc;padding-top:10px}
.quote-author-english{text-align:right;font-weight:400;color:#888;font-size:.95em}

/* 🔗 গুরুত্বপূর্ণ লিঙ্ক (Important Links Section) */
.important-links{background:linear-gradient(135deg,#fefefe 0%,#fefefe 100%);padding:30px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.1);margin-bottom:30px;border-left:none;transition:transform .3s ease,box-shadow .3s ease}
.important-links:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
.important-links h2{color:var(--dark-khaki);font-size:2em;margin-bottom:25px;text-align:center;position:relative;border-bottom:0;padding-bottom:0}
.important-links h2 .icon{margin-right:10px;color:var(--primary-red)}
.important-links h2::after{content:'';display:block;width:100%;height:3px;background-color:var(--accent-color);margin-top:10px;border-radius:5px}
.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;justify-content:center}
.link-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f9f9f9;padding:15px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.08);transition:all .3s ease;text-decoration:none;color:var(--text-color);font-weight:600;border-left:6px solid var(--dark-khaki)}
.link-item:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 8px 15px rgba(0,0,0,.15);background-color:var(--light-accent-color)}
.link-item .link-icon{font-size:3em;color:var(--primary-red);margin-bottom:10px;transition:transform .3s ease,color .3s ease}
.link-item:hover .link-icon{transform:scale(1.1);color:var(--dark-khaki)}

/* 📸 গ্যালারি সেকশন (Gallery Section) */
.gallery{background:linear-gradient(135deg,#fdf6e3 0%,#fae6b5 100%);border-top:8px solid var(--dark-khaki)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:20px}
.gallery-image{width:100%;height:200px;object-fit:cover;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;cursor:pointer}
.gallery-image:hover{transform:scale(1.05) rotate(2deg);box-shadow:0 10px 25px rgba(0,0,0,.2);filter:brightness(1.1)}

/* 💻 লগইন বাটন (Login Button) */
.login-button-container{text-align:center;margin:60px auto}
.login-button{display:inline-block;background-color:var(--dark-khaki);color:var(--white);padding:20px 45px;font-size:1.8em;border-radius:60px;text-decoration:none;transition:all .4s ease;box-shadow:0 10px 25px rgba(230,57,70,.5);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.login-button:hover{background-color:var(--accent-color);transform:translateY(-8px) scale(1.03);box-shadow:0 15px 35px rgba(230,57,70,.7)}
.login-button .fas{margin-right:15px;font-size:1em}

/* 🦶 ফুটার (Footer) */
.main-footer{background-color:var(--black);color:var(--light-gray);text-align:center;padding:30px 20px;font-size:1em;margin-top:50px;border-top:8px solid var(--dark-khaki);box-shadow:0 -4px 15px rgba(0,0,0,.2)}
.main-footer p{margin:8px 0}

/* ☰ মেনু ও সাইডবার (Menu & Sidebar) */
.menu-button{background-color:#FF5733;color:#FFF;border:2px solid #FF5733;padding:10px 12px;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;justify-content:center;align-items:center;position:relative;z-index:1001;box-shadow:0 4px 8px rgba(0,0,0,.25);transition:background-color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.menu-button i{color:inherit;transition:transform .3s ease}
.menu-button:hover i{transform:rotate(90deg)}
.menu-button:hover{background-color:#E64A19;border-color:#E64A19;transform:scale(1.05);box-shadow:0 6px 12px rgba(0,0,0,.35)}
.header-buttons{position:fixed;top:10px;left:20px;z-index:1001}
.sidebar-menu{position:fixed;top:0;left:-320px;width:300px;height:100%;background:linear-gradient(to bottom,#E6FFE6,#FFF0F5);box-shadow:2px 0 10px rgba(0,0,0,.4);transition:left .4s ease-in-out;z-index:1000;overflow-y:auto;padding-top:20px;display:flex;flex-direction:column}
.sidebar-menu.active{left:0}
.sidebar-menu a{padding:15px 20px;text-decoration:none;color:#333;font-size:16px;display:block;transition:background-color .3s ease,color .3s ease,padding-left .3s ease;border-bottom:1px solid #eee;text-shadow:-1px -1px 0 var(--white),1px -1px 0 var(--white),-1px 1px 0 var(--white),1px 1px 0 var(--white)}
.sidebar-menu a:hover{background-color:#E0FFFF;color:#0056b3;padding-left:25px}
.sidebar-menu a.active-link{background-color:#00008B;color:white;font-weight:bold}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:999;opacity:0;visibility:hidden;transition:opacity .4s ease-in-out,visibility .4s ease-in-out}
.overlay.active{opacity:1;visibility:visible}

/* ✨ অন্যান্য স্টাইল এবং অ্যানিমেশন */
.uniform-description p,.uniform-description ul{background-color:#fff8e1;padding:15px 25px;border-radius:10px;border-left:6px solid #FFC107;margin-bottom:15px;font-style:italic;color:#555;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.uniform-description .note{font-size:1em;color:var(--medium-gray);background:none;border:none;padding:0;margin-top:20px;font-style:normal}
.contact-info p .icon{color:var(--primary-red);margin-right:12px;font-size:1.2em}
.blinking-text{color:var(--primary-red);font-weight:700;font-size:1.2em;animation:blink 1s infinite alternate;display:flex;align-items:center;justify-content:center;margin-top:20px;padding:10px;border:2px dashed var(--primary-red);border-radius:8px}
@keyframes blink{0%{opacity:1}100%{opacity:.4}}
.map-container{text-align:center;margin-top:30px}
.map-container iframe{width:100%;max-width:900px;height:500px;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:all .4s ease}
.animated-card{opacity:0;transform:translateY(20px);animation:fadeInSlideUp var(--animation-duration) ease-out forwards}
.animated-card.fade-in{animation-delay:.1s}.animated-card.fade-in.delay-1{animation-delay:.3s}.animated-card.fade-in.delay-2{animation-delay:.5s}.animated-card.fade-in.delay-3{animation-delay:.7s}.animated-card.fade-in.delay-4{animation-delay:.9s}.animated-card.fade-in.delay-5{animation-delay:1.1s}.animated-card.fade-in.delay-6{animation-delay:1.3s}.animated-card.fade-in.delay-7{animation-delay:1.5s}
@keyframes fadeInSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animated-button{opacity:0;animation:fadeInScaleUp 1s ease-out forwards 1.8s}
@keyframes fadeInScaleUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.fullscreen-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.9);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;cursor:pointer}
.fullscreen-overlay.active{opacity:1;visibility:visible}
.fullscreen-overlay img{max-width:90%;max-height:90%;object-fit:contain;border-radius:8px;box-shadow:0 0 20px rgba(255,255,255,.5);transform:scale(.8);transition:transform .3s ease}
.fullscreen-overlay.active img{transform:scale(1)}
.section-content-wrapper{max-height:180px;overflow:hidden;position:relative;transition:max-height .5s ease-out;padding-bottom:30px}
.section-content-wrapper.expanded{max-height:1500px;padding-bottom:0}
.section-content-wrapper::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:50px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));pointer-events:none}
.section-content-wrapper.expanded::after{display:none}
.toggle-button{display:block;width:fit-content;margin:15px auto 0;padding:4px 8px;background-color:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;font-size:.85rem;font-weight:600;transition:background-color .3s ease}
.toggle-button:hover{background-color:#45a049}
.toggle-button.less-btn{background-color:#f44336}
.toggle-button.less-btn:hover{background-color:#da190b}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.new-badge{background:linear-gradient(45deg,#ff4500,#0047ab,#ff007f,#ffd700);background-size:400% 400%;color:white;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;margin-left:6px;display:inline-block;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 0 15px rgba(255,69,0,.9),0 0 25px rgba(255,136,0,.7);animation:colorShift 4s linear infinite,pulseGlow 1.2s infinite alternate ease-in-out,floatUp 2s infinite ease-in-out}
@keyframes colorShift{0%,50%,100%{background-position:0% 50%}25%,75%{background-position:100% 50%}}
@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 10px rgba(255,69,0,.8),0 0 20px rgba(0,71,171,.6)}100%{transform:scale(1.15);box-shadow:0 0 25px rgba(255,0,127,1),0 0 45px rgba(255,215,0,.9)}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body::-webkit-scrollbar{width:12px;height:12px}
body::-webkit-scrollbar-track{background:var(--light-gray);border-radius:10px;box-shadow:inset 0 0 4px rgba(0,0,0,.1)}
body::-webkit-scrollbar-thumb{background-color:var(--primary-red);border-radius:10px;border:3px solid var(--light-gray);transition:background-color .3s ease}
body::-webkit-scrollbar-thumb:hover{background-color:var(--dark-khaki)}
body{scrollbar-width:thin;scrollbar-color:var(--primary-red) var(--light-gray)}
section[id]{scroll-margin-top:320px}

/* 📱 মিডিয়া কোয়েরি (Media Queries) */
@media (max-width: 1024px){
.main-header h1{font-size:3em}
.hero-section{height:450px}
.hero-overlay{font-size:2.5em}
.container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px}
.card{padding:30px}
h2{font-size:2.2em}
.principal-info{flex-direction:column;text-align:center}
.principal-photo{margin-bottom:20px}
}
@media (min-width: 1024px) {
#notice-popup {width: 650px;max-width: 50%;}
.notice-popup-box .school-header {font-size: 24px;}
}
@media (max-width: 768px){
.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gallery-image{height:150px}
#notice-popup{width:400px;max-width:90%}
.scrolling-wrapper{animation:scrollText 35s linear infinite;font-size:1em}
.main-header{padding:30px 15px;padding-left:70px;padding-right:70px}
.main-header h1{font-size:2em}
.main-header .tagline{font-size:.8em}
.main-header .slogan{font-size:1em}
.hero-section{height:400px}
.hero-overlay{font-size:2em}
.container{grid-template-columns:1fr;padding:15px;gap:25px}
h2{font-size:2em;margin-bottom:20px}
h3{font-size:1.6em}
p{font-size:1.05em}
.principal-photo{width:150px;height:150px}
.principal-text h3{font-size:1.8em}
.map-container iframe{height:400px}
.login-button{padding:16px 35px;font-size:1.6em;width:90%;box-sizing:border-box}
.blinking-text{font-size:1.1em;padding:8px}
.links-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.link-item .link-icon{font-size:2.5em}
.link-text{font-size:.95em}
.top-login-button{top:15px;right:15px;padding:4px 12px;font-size:.8em}
.menu-button{top:15px;left:15px;padding:6px 12px;font-size:.8em}
}
@media (min-width: 601px) {
#notice-popup{width:600px;max-width:60%;}
.notice-popup-box .school-header {font-size: 22px;}
}
@media (max-width: 480px){
.links-grid{grid-template-columns:1fr}
.main-header h1{font-size:1.4em}
.main-header .tagline{font-size:.6em}
.main-header .slogan{font-size:.8em}
.main-header .logo-container{width:100px;height:100px}
.main-header .logo-container::before,.main-header .logo-container::after{font-size:2.2em}
.hero-section{height:350px}
.hero-overlay{font-size:1.6em}
h2{font-size:1.7em}
.quote-text{font-size:1.1em}
.login-button{font-size:1.3em;padding:14px 25px}
.map-container iframe{height:300px}
.top-login-button{top:10px;right:10px;padding:3px 10px;font-size:.75em}
.menu-button{top:10px;left:10px;padding:5px 10px;font-size:.75em}
.main-header{padding-left:60px;padding-right:60px}
}