/* Sanghmitra Girls International School

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

html {
scroll-behavior: smooth;
}

body {
font-family: 'Cormorant Garamond', Georgia, serif;
line-height: 1.6;
position: relative;
overflow-x: hidden;
}

@import
url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@400;500&display=swap');

h1, h2, h3 {
font-family: 'Playfair Display', serif;
}

body, p, li {
font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', Georgia, serif;
}

#nav-menu li a{
color: #fff !important;
font-size: 18px !important;
}

#nav-menu li a:hover{
color: #f17cbd !important;
scale: calc(0.1);
}
/* ========== SCROLL REVEAL ANIMATIONS (DPS-Style) ========== */

/* Fade In Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes scaleUp {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* Scroll Reveal Classes */
.scroll-reveal {
opacity: 0;
}

.scroll-reveal.revealed {
animation-fill-mode: forwards;
}

.fade-up.revealed {
animation: fadeInUp 0.8s ease-out forwards;
}

.fade-down.revealed {
animation: fadeInDown 0.8s ease-out forwards;
}

.fade-left.revealed {
animation: fadeInLeft 0.8s ease-out forwards;
}

.fade-right.revealed {
animation: fadeInRight 0.8s ease-out forwards;
}

.fade-in.revealed {
animation: fadeIn 0.8s ease-out forwards;
}

.scale-up.revealed {
animation: scaleUp 0.8s ease-out forwards;
}

/* Stagger Delays for Sequential Animations */
.scroll-reveal.delay-1 { animation-delay: 0.1s; }
.scroll-reveal.delay-2 { animation-delay: 0.2s; }
.scroll-reveal.delay-3 { animation-delay: 0.3s; }
.scroll-reveal.delay-4 { animation-delay: 0.4s; }
.scroll-reveal.delay-5 { animation-delay: 0.5s; }
.scroll-reveal.delay-6 { animation-delay: 0.6s; }

/* ========== READ MORE FUNCTIONALITY ========== */
.expandable-text {
position: relative;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-text.collapsed {
max-height: 4.5em; /* approximately 3 lines */
}

.expandable-text.collapsed::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2em;
background: linear-gradient(to bottom, transparent, white);
pointer-events: none;
}

.expandable-text.expanded {
max-height: 1000px;
}

.read-more-btn {
transition: all 0.3s ease;
display: inline-block;
}

.read-more-btn:hover {
transform: translateX(5px);
}

.read-more-btn.hidden {
display: none;
}

/* ========== INTERACTIVE HOVER EFFECTS ========== */

/* Card Lift Effect */
.hover-lift {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}

.hover-lift:hover {
transform: translateY(-12px);
}

/* Marquee animation for scrolling alerts */
/* ...existing code... */

@keyframes marquee {
    0% { 
        transform: translateX(100vw); 
    }
    100% { 
        transform: translateX(-100%); 
    }
}

.marquee {
    display: inline-block;
    min-width: 100%;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    will-change: transform;
    padding-right: 50px;
}

.marquee:hover {
    animation-play-state: paused;
}

/* ...existing code... */

.hover-lift::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(1, 90, 125, 0.05), rgba(212, 175, 55, 0.05));
opacity: 0;
transition: opacity 0.4s ease;
border-radius: inherit;
pointer-events: none;
}

.hover-lift:hover::before {
opacity: 1;
}

/* Image Zoom Effect */
.image-zoom {
overflow: hidden;
position: relative;
}

.image-zoom img {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
width: 100%;
}

.image-zoom:hover img {
transform: scale(1.1);
}

.image-zoom::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(125, 18, 1, 0.3), rgba(2, 2, 44, 0.3));
opacity: 0;
transition: opacity 0.4s ease;
}

.image-zoom:hover::after {
opacity: 1;
}


/* ========== BACKGROUND ANIMATIONS ========== */

/* Animated Gradient Background */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.animated-gradient {
background: linear-gradient(
-45deg,
rgba(125, 18, 1, 0.05),
rgba(2, 2, 44, 0.05),
rgba(212, 175, 55, 0.05),
rgba(233, 233, 244, 0.05)
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}

/* Floating Shapes */
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-30px) rotate(5deg);
}
66% {
transform: translateY(-15px) rotate(-5deg);
}
}

@keyframes floatSlow {
0%, 100% {
transform: translateY(0px) translateX(0px);
}
50% {
transform: translateY(-50px) translateX(30px);
}
}

.floating-shape {
position: absolute;
opacity: 0.1;
pointer-events: none;
will-change: transform;
}

.shape-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(125, 18, 1, 0.4), transparent);
border-radius: 50%;
top: 10%;
left: -5%;
animation: float 20s ease-in-out infinite;
filter: blur(50px);
}

.shape-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(2, 2, 44, 0.3), transparent);
border-radius: 50%;
bottom: 10%;
right: -5%;
animation: floatSlow 25s ease-in-out infinite;
filter: blur(60px);
}

.shape-3 {
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);
border-radius: 50%;
top: 50%;
right: 10%;
animation: float 18s ease-in-out infinite 5s;
filter: blur(45px);
}

/* ========== COUNTER ANIMATION ========== */
.counter {
font-weight: bold;
transition: all 0.3s ease;
}

/* ========== NUMBER COUNTING EFFECT ========== */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.counting {
animation: countUp 0.5s ease-out;
}

/* ========== SECTION DIVIDERS ========== */
.section-divider {
position: relative;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(125, 18, 1, 0.3), transparent);
margin: 4rem auto;
max-width: 200px;
}

.section-divider::before,
.section-divider::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #7D1201;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}

.section-divider::before {
left: 0;
}

.section-divider::after {
right: 0;
}

/* ========== PARALLAX SECTIONS ========== */
.parallax-section {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* ========== HERO SLIDER ENHANCEMENTS ========== */
.hero-slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.5s ease-in-out, transform 20s ease-in-out;
transform: scale(1);
}

.hero-slide.active {
opacity: 1;
transform: scale(1.05);
}

.hero-overlay {
background: linear-gradient(
135deg,
rgba(2, 2, 44, 0.85) 0%,
rgba(125, 18, 1, 0.7) 50%,
rgba(2, 2, 44, 0.8) 100%
);
position: relative;
}

/* Animated Overlay Pattern */
@keyframes overlayPulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}

.hero-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(125, 18, 1, 0.2) 0%, transparent 50%);
animation: overlayPulse 8s ease-in-out infinite;
}

/* Slider Dots */
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid white;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot.active {
background: white;
width: 40px;
border-radius: 6px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}

/* ========== NAVIGATION ENHANCEMENTS ========== */
#navbar {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#navbar.scrolled {
background: rgba(2, 2, 44, 0.98);
/* shadow removed per request */
box-shadow: none;
backdrop-filter: blur(20px);
}

/* Nav Link Hover Effect */
#nav-menu a {
position: relative;
transition: all 0.3s ease;
}

#nav-menu a::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: #7D1201;
transition: all 0.3s ease;
transform: translateX(-50%);
}

#nav-menu a:hover::after,
#nav-menu a.active::after {
width: 100%;
}

/* ========== BUTTON ANIMATIONS ========== */
.btn-animate {
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-animate::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}

.btn-animate:hover::before {
width: 300px;
height: 300px;
}

.btn-animate:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(125, 18, 1, 0.3);
}

/* ========== CARD ENHANCEMENTS ========== */
.enhanced-card {
background: white;
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}

.enhanced-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s;
}

.enhanced-card:hover::before {
left: 100%;
}

.enhanced-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(125, 18, 1, 0.15);
}

/* ========== TEXT ANIMATIONS ========== */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.text-slide-left {
animation: slideInLeft 0.8s ease-out;
}

.text-slide-right {
animation: slideInRight 0.8s ease-out;
}

/* ========== LOADING ANIMATIONS ========== */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}

.loading-shimmer {
animation: shimmer 2s infinite;
background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
background-size: 1000px 100%;
}

/* ========== CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: #e9e9f4;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7D1201, #9d2f1f);
border-radius: 6px;
border: 2px solid #e9e9f4;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #9d2f1f, #7D1201);
}

/* ========== FOCUS STYLES ========== */
:focus-visible {
outline: 3px solid rgba(125, 18, 1, 0.5);
outline-offset: 3px;
}

/* ========== FAQ ACCORDION ========== */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease;
padding: 0 2rem;
}

.faq-answer.active {
max-height: 500px;
padding: 1.5rem 2rem;
}

.faq-icon {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.5rem;
font-weight: bold;
}

.faq-question.active .faq-icon {
transform: rotate(180deg);
}

.faq-item {
transition: all 0.3s ease;
}

.faq-item:hover {
transform: translateX(5px);
}

/* ========== TESTIMONIAL SLIDER ========== */
.testimonial-track {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-slide {
flex-shrink: 0;
}

.testimonial-dot {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.testimonial-dot:hover {
opacity: 0.8;
transform: scale(1.2);
}

.testimonial-dot.active {
transform: scale(1.3);
}

/* ========== MOBILE MENU ========== */
#mobile-menu {
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== UTILITY CLASSES ========== */
.glass-effect {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
.hero-slide.active {
transform: scale(1.1);
}

.hover-lift:hover {
transform: translateY(-6px);
}
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* ========== PRINT STYLES ========== */
@media print {
nav, footer, button, .floating-shape {
display: none;
}

body {
background: white;
color: black;
}
}
/* ========== ADMISSION POPUP MODAL ========== */
#admission-popup {
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease-out;
}

@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.animate-scale-in {
animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#admission-popup.hidden {
display: none !important;
}

/* Popup form styling */
#popup-enquiry-form input:focus,
#popup-enquiry-form select:focus {
transform: translateY(-2px);
}

/* Close button hover effect */
#close-popup:hover {
transform: rotate(90deg) scale(1.1);
}

/* 2) Center the copyright, keep back-to-top on right for md+ screens */
footer.bg-navy .pt-6 {
position: relative; /* make absolute centering work */
}

/* center the copyright text horizontally */
footer.bg-navy .pt-6 > p.text-gray-400 {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
text-align: center;
}

/* place Back to top at the right, vertically centered */
footer.bg-navy .pt-6 #back-to-top {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}

/* MOBILE / small screens: revert to stacked layout (so nothing overlaps) */
@media (max-width: 767px) {
footer.bg-navy .pt-6 {
display: flex;
flex-direction: column;
align-items: center;
}

footer.bg-navy .pt-6 > p.text-gray-400,
footer.bg-navy .pt-6 #back-to-top {
position: static;
transform: none;
margin: 0.4rem 0 0 0;
}

#webTitle{
font-size: 14px !important;
}

}

/* ========== ADDITIONAL MOBILE RESPONSIVE STYLES ========== */

/* Mobile Menu Enhancements */
@media (max-width: 768px) {
#navbar {
padding: 0.75rem 1rem;
}

#navbar .container {
padding: 0;
}

#mobile-menu {
max-height: 400px;
overflow-y: auto;
}

#mobile-menu li a {
font-size: 14px;
}

/* Hero Section Mobile */
#home h1 {
font-size: 1.75rem;
line-height: 1.3;
}

#home p {
font-size: 1rem;
}

.container {
padding-left: 1rem;
padding-right: 1rem;
}

/* Section Padding */
section {
padding-top: 2rem;
padding-bottom: 2rem;
}

/* Form Improvements */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 0.75rem 1rem;
}

label {
margin-bottom: 0.5rem;
}

/* Button Sizing */
button,
.btn {
min-height: 44px; /* Touch-friendly */
}

/* Image Gallery */
.grid {
gap: 0.75rem;
}

/* Testimonial Mobile */
.testimonial-slide {
padding: 0 1rem;
}

.bg-navy-light {
padding: 1rem 1.5rem;
}

/* FAQ Mobile */
.faq-question {
padding: 1rem;
font-size: 0.95rem;
}

.faq-icon {
font-size: 1.25rem;
}

/* Card Adjustments */
.rounded-3xl {
border-radius: 1rem;
}
}

/* gallery stylesheet */
.gallery-section {
padding: 4rem 1rem;
}

.gallery-container {
max-width: 1400px;
margin: 0 auto;
}

.gallery-title {
text-align: center;
font-size: 2.8rem;
margin-bottom: 1.2rem;
font-weight: 700;
letter-spacing: -0.5px;
}

.gallery-subtitle {
text-align: center;
color: #a0a0c0;
margin-bottom: 3rem;
font-size: 1.1rem;
}

.gallery-grid {
column-count: 4;
column-gap: 1.2rem;
width: 100%;
}

.gallery-item {
break-inside: avoid;
margin-bottom: 1.2rem;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #1a1a22;
box-shadow: 0 4px 15px rgba(0,0,0,0.35);
transition: all 0.28s ease;
}

.gallery-item:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

.gallery-item img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
transform: scale(1.08);
}

.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.4rem 1.2rem 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
color: white;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}

.gallery-item:hover .gallery-caption {
opacity: 1;
transform: translateY(0);
}

.gallery-caption h3 {
font-size: 1.15rem;
margin-bottom: 0.35rem;
}

.gallery-caption p {
font-size: 0.9rem;
opacity: 0.85;
}


@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}

/* Optional: Pause on hover */
.marquee-container:hover .marquee-content {
animation-play-state: paused;
}

.gallery-bgr{
background-image:url('./images/gallery-bgr.png');
background-repeat: no-repeat;
background-size: cover;
}

#dsk-cms-login {
position: relative; /* container for pseudo-elements */
display: inline-block;
}

/* Top and bottom underline bars (hidden by scale, animate on hover) */
#dsk-cms-login::before,
#dsk-cms-login::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor; /* follows element color; change to white if needed */
transform: scaleX(0);
transition: transform 0.22s ease;
z-index: 2;
}

/* top bar */
#dsk-cms-login::before {
top: -6px; /* place above the element */
transform-origin: right; /* animate from right-to-left for top */
}

/* bottom bar */
#dsk-cms-login::after {
bottom: -6px; /* place below the element */
transform-origin: left; /* animate from left-to-right for bottom */
}

#dsk-cms-login:hover::before,
#dsk-cms-login:hover::after {
transform: scaleX(1);
}
/* Responsive */
@media (max-width: 1100px) {
.gallery-grid { column-count: 3; }
}

@media (max-width: 768px) {
.gallery-grid { column-count: 2; }
.gallery-title { font-size: 2.3rem; }
#dsk-cms-login{
display: none !important;
}
}

@media (max-width: 500px) {
.gallery-grid { column-count: 1; }
}

/* Extra small devices */
@media (max-width: 480px) {
#navbar h1 {
font-size: 0.85rem;
}

#navbar .w-12 {
width: 2rem;
height: 2rem;
}

#home h1 {
font-size: 1.5rem;
}

#home p {
font-size: 0.875rem;
}

.grid-cols-2 {
gap: 0.5rem;
}

section {
padding: 1.5rem 1rem;
}

.mx-auto.max-w-6xl {
padding-left: 0.5rem;
padding-right: 0.5rem;
}

h2 {
font-size: 1.5rem !important;
}

h3 {
font-size: 1.125rem !important;
}

p {
font-size: 0.875rem;
}

/* Facility cards stack properly */
.flex.flex-col.md\:flex-row {
flex-direction: column;
}

.md\:w-2\/5,
.md\:w-3\/5 {
width: 100%;
}

/* Improved button spacing */
button {
width: 100%;
margin-bottom: 0.5rem;
}

/* Better spacing for lists */
ul, ol {
margin-left: 1rem;
}

li {
margin-bottom: 0.25rem;
}
}

.mission-vision-aim:hover{
	scale: calc(0.95);
	transition: all 0.3s ease;
}