/* Start custom CSS for html, class: .elementor-element-a2f170a */.gallery-hero{
width:100%;
height:650px;
background:url("https://krrhighschool.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-28-2026-12_10_20-PM.png") center center/cover no-repeat;
display:flex;
align-items:center;
padding:0 7%;
position:relative;
overflow:hidden;
}
.hero-content{
max-width:560px;
animation:fadeLeft 1s ease;
}
.hero-badge{
display:inline-block;
padding:12px 26px;
background:#E3A21A;
color:#0A2A67;
border-radius:40px;
font-weight:700;
margin-bottom:25px;
}
.hero-content h1{
font-size:72px;
font-weight:800;
color:#F5B223;
margin-bottom:20px;
line-height:1;
}
.hero-content p{
font-size:20px;
line-height:1.8;
color:#ffffff;
margin-bottom:40px;
}
.hero-buttons{
display:flex;
gap:20px;
}
.hero-buttons a{
padding:16px 34px;
border-radius:40px;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.btn-primary{
background:#E3A21A;
color:#072B66;
}
.btn-primary:hover{
transform:translateY(-6px);
}
.btn-secondary{
border:2px solid #fff;
color:#fff;
}
.btn-secondary:hover{
background:#fff;
color:#072B66;
}
@keyframes fadeLeft{
from{
opacity:0;
transform:translateX(-70px);
}
to{
opacity:1;
transform:translateX(0);
}
}
@media(max-width:768px){
.gallery-hero{
height:420px;
padding:35px;
background-position:center;
}
.hero-content{
max-width:100%;
}
.hero-content h1{
font-size:42px;
}
.hero-content p{
font-size:16px;
}
.hero-buttons{
flex-direction:column;
}
.hero-buttons a{
text-align:center;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-98e0f83 *//*==========================================
KRR HIGH SCHOOL
PREMIUM GALLERY GRID
PART 2
==========================================*/
.krr-gallery-grid{
padding:90px 20px;
background:#f7f9fc;
}
.gallery-container{
max-width:1280px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
/* CARD */
.gallery-card{
position:relative;
overflow:hidden;
border-radius:22px;
background:#fff;
box-shadow:0 15px 35px rgba(0,0,0,.08);
cursor:pointer;
transition:.45s;
}
/* IMAGE */
.gallery-card img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:transform .7s;
}
/* OVERLAY */
.gallery-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:26px 22px;
background:linear-gradient(
transparent,
rgba(5,30,80,.92)
);
transform:translateY(100%);
transition:.4s;
}
/* TITLE */
.gallery-overlay h3{
color:#fff;
margin:0;
font-size:22px;
font-weight:700;
}
/* HOVER */
.gallery-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(0,0,0,.18);
}
.gallery-card:hover img{
transform:scale(1.08);
}
.gallery-card:hover .gallery-overlay{
transform:translateY(0);
}
/* PREMIUM TOP BORDER */
.gallery-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#E4A315;
transform:scaleX(0);
transform-origin:left;
transition:.4s;
z-index:5;
}
.gallery-card:hover::before{
transform:scaleX(1);
}
/* RESPONSIVE */
@media(max-width:1024px){
.gallery-container{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.krr-gallery-grid{
padding:70px 15px;
}
.gallery-container{
grid-template-columns:1fr;
gap:20px;
}
.gallery-card img{
height:260px;
}
.gallery-overlay h3{
font-size:20px;
}
}
/* FILTER ACTIVE */
.filter-btn{
transition:.35s;
}
.filter-btn.active{
background:#0B2A63;
color:#fff;
border-color:#0B2A63;
box-shadow:0 10px 25px rgba(11,42,99,.22);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5931cf3 *//*=========================
LIGHTBOX
=========================*/
.gallery-lightbox{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
animation:fadeIn .4s;
}
.gallery-lightbox.active{
display:flex;
}
.gallery-lightbox img{
max-width:90%;
max-height:85vh;
border-radius:18px;
box-shadow:0 25px 50px rgba(0,0,0,.35);
animation:zoom .35s;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
position:absolute;
color:#fff;
font-size:42px;
cursor:pointer;
user-select:none;
transition:.3s;
}
.lightbox-close{
top:30px;
right:40px;
}
.lightbox-prev{
left:40px;
top:50%;
transform:translateY(-50%);
}
.lightbox-next{
right:40px;
top:50%;
transform:translateY(-50%);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
color:#E4A315;
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
@keyframes zoom{
from{
transform:scale(.85);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
@media(max-width:768px){
.lightbox-prev{
left:15px;
}
.lightbox-next{
right:15px;
}
.lightbox-close{
right:20px;
}
.gallery-lightbox img{
max-width:95%;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ea30f93 *//*=========================================
PHOTO MARQUEE
=========================================*/
.krr-photo-marquee{
padding:90px 0;
background:#ffffff;
overflow:hidden;
}
.marquee-heading{
text-align:center;
max-width:750px;
margin:0 auto 50px;
padding:0 20px;
}
.marquee-heading span{
display:inline-block;
background:#0B2A63;
color:#fff;
padding:10px 22px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}
.marquee-heading h2{
font-size:42px;
color:#0B2A63;
margin-bottom:15px;
font-weight:700;
}
.marquee-heading p{
color:#666;
line-height:1.8;
font-size:17px;
}
.marquee-wrapper{
overflow:hidden;
width:100%;
}
.marquee-track{
display:flex;
width:max-content;
gap:25px;
animation:scrollGallery 35s linear infinite;
}
.marquee-wrapper:hover .marquee-track{
animation-play-state:paused;
}
.marquee-track img{
width:340px;
height:230px;
object-fit:cover;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
transition:.35s;
}
.marquee-track img:hover{
transform:scale(1.05);
}
@keyframes scrollGallery{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
/*=========================
Responsive
=========================*/
@media(max-width:768px){
.marquee-heading h2{
font-size:30px;
}
.marquee-heading p{
font-size:15px;
}
.marquee-track img{
width:250px;
height:170px;
}
}/* End custom CSS */