/* ============================= Responsive: Hero & Slider only (scoped to avoid affecting other components) ============================= */ /* Background image sections (breadcrumb/hero blocks that use data-background) */ .bg_img { background-repeat: no-repeat; background-position: center center; background-size: cover; } /* Default hero height variable */ .hero { --hero-height: clamp(280px, 55vh, 720px); } /* Hero slider container and slides */ .hero .slider-container { position: relative; width: 100%; overflow: hidden; } /* Make hero/slider images fill width and crop gracefully */ .hero .slider-container img, .hero .swiper-slide img, .hero .swiper-container .swiper-slide img { width: 100%; height: var(--hero-height); object-fit: cover; display: block; } /* Slider navigation buttons in hero (if present) */ .hero .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; border: none; background: rgba(0, 0, 0, 0.35); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .hero .slider-btn:hover { background: rgba(0, 0, 0, 0.5); } .hero .prev-btn { left: 12px; } .hero .next-btn { right: 12px; } /* Breadcrumb section spacing becomes fluid (reduced height) */ /* Reduced padding so breadcrumb/bg image appears shorter across pages */ section.breadcrumb.bg_img { /* smaller min/max and reduced viewport fraction */ padding-top: clamp(30px, 8vh, 120px); padding-bottom: clamp(20px, 6vh, 80px); } /* Responsive tweaks */ @media (max-width: 992px) { .hero { --hero-height: clamp(240px, 50vh, 600px); } .hero .slider-btn { width: 40px; height: 40px; } } @media (max-width: 576px) { .hero { --hero-height: clamp(220px, 44vh, 520px); } .hero .slider-btn { width: 36px; height: 36px; } .hero .prev-btn { left: 8px; } .hero .next-btn { right: 8px; } } /* Ensure desktop sliders cover full viewport height on large screens >=1024px */ @media (min-width: 1024px) { .hero .slider-container, .slider-container { height: 100vh !important; max-height: 100vh; } .slides, .slide, .hero .slider-container .slides, .hero .slider-container .slide { height: 100vh; } .hero .slider-container img, .slides .slide img, .slide img, .slider-container img { width: 100%; height: 100vh; object-fit: cover; display: block; } } /* ------------------------------------------------------------------ Blur hero/background images on all pages by default, except pages which opt-out by adding the `no-hero-blur` class to (used for the homepage index.html). This uses an ::before pseudo-element for elements that use background-images (data-background -> inline style) so the text content is not blurred. ------------------------------------------------------------------ */ .bg_img { position: relative; overflow: hidden; } .bg_img::before { content: ""; position: absolute; inset: 0; /* inherit the inline background-image that main.js sets */ background-image: inherit; background-repeat: no-repeat; background-position: center center; background-size: cover; filter: blur(6px); transform: scale(1.03); z-index: 0; } .bg_img > * { position: relative; z-index: 1; /* keep content above the blurred background */ } /* Blur based hero sliders by default */ .hero .slider-container img, .slides .slide img, .slide img { filter: blur(6px); } /* Opt-out: any page with will show unblurred hero images */ body.no-hero-blur .bg_img::before, body.no-hero-blur .hero .slider-container img, body.no-hero-blur .slides .slide img, body.no-hero-blur .slide img { filter: none; transform: none; } /* ====== Global Styles ====== */ :root { --primary-color: #004aad; /* Deep blue for headings */ --secondary-color: #f4f8ff; /* Soft background tone */ --accent-color: #ffcc00; /* Highlight / underline color */ --text-color: #333; --light-text: #555; --font-main: "Poppins", sans-serif; } body { font-family: var(--font-main); background-color: #fff; color: var(--text-color); line-height: 1.7; margin: 0; padding: 0; } /* Gallery Styles */ .gallery-filter { margin-bottom: 30px; } .filter-btn { background: #f8f9fa; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 10px 20px; margin: 5px; border-radius: 25px; font-weight: 600; font-size: 13px; transition: all 0.3s ease; cursor: pointer; } .filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 74, 173, 0.3); } .gallery-card { position: relative; overflow: hidden; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gallery-card img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s ease; } .gallery-card:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 74, 173, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-card:hover .gallery-overlay { opacity: 1; } .gallery-link { color: white; font-size: 24px; text-decoration: none; background: rgba(255, 255, 255, 0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .gallery-link:hover { background: var(--accent-color); color: var(--primary-color); transform: scale(1.1); } .gallery-item { transition: all 0.3s ease; } /* Hide any legacy static items accidentally placed directly under container */ .gallery > .container > .gallery-item { display: none; } .gallery-item.hide { opacity: 0; transform: scale(0.8); display: none; } /* Items deferred for load-more */ .gallery-item.lazy-hidden { display: none; } .load-more-btn { background: var(--primary-color); color: #fff; border: none; border-radius: 30px; padding: 12px 28px; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 74, 173, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .load-more-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 74, 173, 0.35); } @media (max-width: 768px) { .filter-btn { padding: 8px 16px; font-size: 12px; margin: 3px; } .gallery-card img { height: 200px; } } .common-title h2 { font-size: 2.2rem; color: var(--primary-color); font-weight: 700; position: relative; display: inline-block; margin-bottom: 1.2rem; text-transform: uppercase; } .common-title h2::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--accent-color); border-radius: 2px; } .common-title h3 { font-size: 1.2rem; color: var(--light-text); font-weight: 500; } /* Header logo and school name styling */ .header-logo { display: flex; align-items: center; gap: 10px; /* space between logo and text */ } .header-logo .logo-img { height: 58px; /* adjust as needed */ width: 100%; } .header-logo .school-name { font-size: 1.5rem; font-weight: bold; color: #222; /* adjust color */ } /* Theme: red used in footer and accents for active states */ :root { --theme-red: #ff0000; } /* Navbar active/clicked state - make the clicked/active menu item use the theme red color */ .main-menu ul li a, .xb-header-nav .xb-menu-primary a { transition: color 0.18s ease; } .main-menu ul li a:active, .main-menu ul li a:focus, .main-menu ul li a.active, .main-menu ul li.active > a, .xb-header-nav .xb-menu-primary a:active, .xb-header-nav .xb-menu-primary a:focus, .xb-header-nav .xb-menu-primary li.active > a { color: var(--theme-red) !important; } /* Page Header Styles */ .page-header { padding: 120px 0 80px; position: relative; background-size: cover; background-position: center; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 74, 173, 0.85); } .page-header__content { position: relative; z-index: 1; } .page-header h2 { color: #fff; font-size: 3rem; font-weight: 700; margin-bottom: 20px; } .breadcrumb { background: transparent; padding: 0; margin: 0; } .breadcrumb-item { color: rgba(255,255,255,0.8); } .breadcrumb-item.active { color: #ffcc00; } .breadcrumb-item a { color: #fff; text-decoration: none; } .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.8); } /* ====== Introduction Section ====== */ #school-intro { background-color: var(--secondary-color); padding: 11px 0; } #school-intro .intro-content { max-width: 850px; margin: 0 auto; } #school-intro p { font-size: 1.05rem; color: var(--light-text); margin-bottom: 1rem; text-align: justify; } #school-intro .intro-image img { border-radius: 20px; width: 100%; height: auto; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease, box-shadow 0.5s ease; } #school-intro .intro-image img:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } /* ====== Director Section ====== */ #director-message { padding: 10px 0; background-color: #fff; } #director-message .director-image img { border-radius: 20px; width: 100%; height: auto; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease, box-shadow 0.5s ease; } #director-message .director-image img:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } #director-message .director-details p { font-size: 1.05rem; color: var(--light-text); margin-bottom: 1rem; text-align: justify; } /* ====== Principal Section ====== */ #about-principal { padding: 20px 0; background-color: #f9f9f9; } #about-principal .principal-content { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; } #about-principal .ac-bg-image img { border-radius: 20px; width: 100%; height: auto; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease, box-shadow 0.5s ease; } #about-principal .ac-bg-image img:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } #about-principal .nav-tabs { border-bottom: 2px solid #eee; } #about-principal .nav-tabs .nav-item { margin-right: 15px; } #about-principal .nav-tabs .nav-link { color: var(--primary-color); font-weight: 600; border: none; background: transparent; padding: 10px 20px; transition: 0.3s ease; } #about-principal .nav-tabs .nav-link.active, #about-principal .nav-tabs .nav-link:hover { background-color: var(--primary-color); color: #fff; border-radius: 30px; } #about-principal .about-details p { font-size: 1.05rem; color: var(--light-text); margin-bottom: 1rem; text-align: justify; } /* ====== Responsive Design ====== */ @media (max-width: 992px) { .common-title h2 { font-size: 1.8rem; } #about-principal, #director-message { padding: 70px 0; } #school-intro { padding: 60px 0; } } @media (max-width: 768px) { #about-principal .principal-content { flex-direction: column; text-align: center; } #about-principal .ac-bg-image img, #director-message .director-image img { width: 90%; margin: 0 auto 20px; display: block; } #school-intro .intro-image img { width: 90%; margin: 20px auto 0; display: block; } #school-intro .intro-content { max-width: 100%; } /* Stack director section content on mobile */ #director-message .row { flex-direction: column; } #director-message .director-details { margin-top: 20px; } } /* Slider styling */ .slider-container { position: relative; overflow: hidden; width: 100%; margin: auto; max-width: 100%; height: 100vh; } .slides { display: flex; transition: transform 0.5s ease-in-out; width: 100%; height: 100%; } .slide { min-width: 100%; height: 100%; position: relative; overflow: hidden; } .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; z-index: 10; cursor: pointer; font-size: 1.5rem; } @media (max-width: 768px) { .slider-container { height: 50vh; } .slider-btn { padding: 6px; font-size: 1.2rem; } } @media (max-width: 480px) { .slider-container { height: 40vh; } .slider-btn { padding: 4px; font-size: 1rem; } } /* Force full viewport height for hero slider between tablet and small-desktop so slider images take full screen length from 769px up to 1023px. This overrides earlier variable-based heights for that range. */ @media (min-width: 769px) and (max-width: 1023.98px) { .hero .slider-container, .slider-container { height: 100vh !important; max-height: 100vh; } .slides, .slide, .hero .slider-container .slides, .hero .slider-container .slide { height: 100vh !important; } .hero .slider-container img, .slides .slide img, .slide img, .slider-container img { width: 100%; height: 100vh !important; object-fit: cover; display: block; } } .prev-btn { left: 10px; } .next-btn { right: 10px; } /* Intro heading start */ /* #school-intro { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); / color: #ffffff; padding: 4rem 0; border-top: 2px solid #007bff; border-bottom: 2px solid #007bff; position: relative; overflow: hidden; } #school-intro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('assets/img/bg/hero_bg.jpg') no-repeat center center; background-size: cover; opacity: 0.1; z-index: 0; } #school-intro .container { position: relative; z-index: 1; } #school-intro h2 { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #007bff; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); font-family: 'Recoleta', serif; } #school-intro p { font-size: 1.1rem; line-height: 1.8; max-width: 900px; margin: 0 auto 1.5rem auto; color: #495057; text-align: justify; } .intro-content { opacity: 0; transform: translateX(-50px); / transition: all 1s ease; } */ /* About principal Section */ /* =========================== /* Right column (text & tabs) */ /* .principal-content{ margin-top: -27%; } .home-about-right-content .common-title h2 { font-size: 28px; margin: 0 0 6px; color: #0f1724; font-weight: 700; line-height: 1.1; padding: 10px; } .home-about-right-content .common-title h3 { font-size: 16px; color: #55606a; margin: 0 0 20px; font-weight: 500; } .common-title_about-title1{ padding: 50px; } */ /* Tabs */ .nav-tabs { border-bottom: none; margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; } .nav-tabs .nav-item { list-style: none; } .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; background: #97b8e9; color: #1f2937; transition: all .22s ease; font-weight: 600; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.03); } .nav-tabs .nav-link .fa-angle-double-right { font-size: 12px; opacity: .7; } .nav-tabs .nav-link:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06); } .nav-tabs .nav-link.active { background: linear-gradient(90deg, #ff8a00, #ff5e62); color: #fff; border-color: transparent; box-shadow: 0 8px 30px rgba(255, 94, 98, 0.15); } /* Tab content */ .tab-content .about-details p { color: #374151; font-size: 15px; line-height: 1.7; margin-bottom: 18px; } /* Services list grid inside tabs */ .a-key-points .common-title h2 { font-size: 20px; margin-bottom: 6px; } .a-key-points p { color: #6b7280; margin-bottom: 14px; } .a-key-points ul { padding-left: 0; margin: 0; } .a-key-points ul li { list-style: none; font-size: 15px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: #111827; } .a-key-points ul li i.fa-check, .a-key-points ul li i.fa-solid.fa-check { background: rgba(34, 197, 94, 0.12); color: #10b981; /* green */ width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } /* Because your li elements are inside col-md-6, remove default margin */ .a-key-points .row>.col-md-6 { display: flex; align-items: center; } /* Container for right images */ .img-right-contant { position: relative; width: 100%; height: 100%; display: flex; justify-content: flex-end; /* Align images to the right */ align-items: center; padding: 0 15px; } /* Make images responsive */ .img-right-contant img { position: relative; top: 61rem; left: 40rem; z-index: 10; max-width: 196%; } .img-right-contant img:hover { transform: scale(1.05); } .footer-logo{ max-width: 35%; margin-top: -20px; } /*--icons of contact*/ .contact_iconbox .iconbox_icon img, .contact_iconbox .iconbox_icon .iconbox_svg, .contact_iconbox .iconbox_icon i { width: 48px; /* uniform icon width */ height: 48px; /* uniform icon height */ display: block; margin: 0 auto 12px; /* centers the icon & adds spacing below */ } .contact_iconbox .iconbox_icon i { font-size: 28px; line-height: 48px; } /* Make inline icons in footer contact info white */ .xb-footer-main .footer-widget .xb-item--links li i { color: var(--color-white); margin-right: 8px; vertical-align: middle; } /*-----about section img-----*/ /* 🔹 General Animation Keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* Footer copyright - make text red across pages */ .footer-bottom .copyright, .footer-bottom .copyright p, .footer-bottom .copyright a { color: #ff0000 !important; } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* 🔹 Apply Animations */ section .img-fluid { animation: fadeInLeft 1s ease-in-out both; } section h2, section h3, section p { animation: fadeInUp 1s ease-in-out both; } /* delay for better effect */ section h2 { animation-delay: 0.3s; } section p.lead { animation-delay: 0.6s; } section p { animation-delay: 0.9s; } /* Icons & small cards */ section .d-flex { animation: fadeInRight 1s ease-in-out both; animation-delay: 1.2s; } /* Cards in second section */ section .card { animation: fadeInUp 1s ease-in-out both; } section .card:nth-child(1) { animation-delay: 0.3s; } section .card:nth-child(2) { animation-delay: 0.6s; } /*-----about- ist---- */ @keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } .cta-image .animate-img { max-width: 100%; border-radius: 12px; animation: fadeInRight 1.2s ease-in-out both; } /* Footer responsive fix - Make 1024px look like 1280px */ @media (min-width: 1024px) { .footer .xb-footer-main .row > [class*="col-"] { flex: 0 0 25%; max-width: 25%; } .footer .xb-footer-main .row { display: flex; justify-content: space-between; } } /* ============================= Mobile/Tablet Hamburger Button ============================= */ .xb-nav-mobile { display: none; /* shown via media query */ margin-left: 12px; border: none; background: transparent; width: 42px; height: 42px; border-radius: 8px; align-items: center; justify-content: center; position: relative; } .xb-nav-mobile span { position: absolute; left: 10px; right: 10px; height: 2px; background: #1f2937; /* dark gray */ transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease; } .xb-nav-mobile span:nth-child(1) { top: 13px; } .xb-nav-mobile span:nth-child(2) { top: 20px; } .xb-nav-mobile span:nth-child(3) { top: 27px; } .xb-nav-mobile.active span:nth-child(1) { top: 20px; transform: rotate(45deg); } .xb-nav-mobile.active span:nth-child(2) { opacity: 0; } .xb-nav-mobile.active span:nth-child(3) { top: 20px; transform: rotate(-45deg); } /* Show hamburger on tablets and phones; keep hidden on desktop. Updated breakpoint: show only on widths < 1024px per request. */ @media (max-width: 1023.98px) { .xb-nav-mobile { display: inline-flex; } } /* Top header social icons (small, circular icons to match footer but sized for header) */ .xb-top-social { display: flex; align-items: center; } .xb-top-social .xb-item--social_link { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .xb-top-social .xb-item--social_link li a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; transition: background .18s ease, color .18s ease; } .xb-top-social .xb-item--social_link li a i { font-size: 14px; line-height: 1; } .xb-top-social .xb-item--social_link li a:hover { background: var(--primary-color); color: #fff; } @media (max-width: 576px) { .xb-top-social .xb-item--social_link li a { width: 30px; height: 30px; } .xb-top-social .xb-item--social_link li a i { font-size: 12px; } } /* Footer quick / important links: add a small arrow before each link Only apply to the Quick Links (column 2) and Important Links (column 3) so the Contact Info column (column 4) remains unchanged. */ .xb-footer-main .row > .col-xl-3:nth-child(2) .xb-item--links li a::before, .xb-footer-main .row > .col-xl-3:nth-child(3) .xb-item--links li a::before { content: "\2192"; /* right arrow */ display: inline-block; margin-right: 8px; color: var(--theme-red, #ff0000); font-weight: 600; transform: translateY(-1px); } /* Slightly soften the arrow color on hover to accent color */ .xb-footer-main .row > .col-xl-3:nth-child(2) .xb-item--links li a:hover::before, .xb-footer-main .row > .col-xl-3:nth-child(3) .xb-item--links li a:hover::before { color: var(--accent-color, #ffcc00); } /* Remove decorative arrow from footer social media icons (they are in a nested .xb-item--social_link list inside the Important Links column). This override ensures icons are not prefixed with the arrow pseudo-element. */ .xb-footer-main .xb-item--social_link li a::before { content: none !important; display: none !important; } .contact-feedback { display: none; margin-top: 1rem; font-weight: 500; } .contact-feedback:not([hidden]) { display: block; } .contact_form .is-invalid { border-color: #dc3545; }