/* Start custom CSS for html, class: .elementor-element-017faef *//* ==========================================================
KRR HIGH SCHOOL
PREMIUM HEADER CSS
PART 1
Reset + Wrapper + Top Bar + Header + Logo
========================================================== */
/*=========================
RESET
=========================*/
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body{
margin:0;
overflow-x:hidden;
background:#ffffff;
font-family:'Poppins',sans-serif;
}
/*=========================
GLOBAL
=========================*/
img{
max-width:100%;
height:auto;
display:block;
}
a{
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}
button{
border:none;
background:none;
outline:none;
cursor:pointer;
}
button:focus{
outline:none;
}
::selection{
background:#0B4EA2;
color:#ffffff;
}
/*=========================
HEADER WRAPPER
=========================*/
.krr-header-wrapper{
width:100%;
position:relative;
z-index:9999;
}
/*=========================
TOP BAR
=========================*/
.krr-topbar{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 40px;
background:rgba(10,48,120,.95);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
border-bottom:1px solid rgba(255,255,255,.10);
}
/*=========================
LEFT INFO
=========================*/
.krr-left{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:25px;
}
.krr-left a{
display:flex;
align-items:center;
gap:8px;
color:#ffffff;
font-size:14px;
font-weight:500;
transition:all .3s ease;
}
.krr-left i{
color:#FFC107;
font-size:14px;
transition:all .3s ease;
}
.krr-left a:hover{
color:#FFC107;
}
.krr-left a:hover i{
transform:rotate(-10deg) scale(1.08);
}
/*=========================
SOCIAL ICONS
=========================*/
.krr-social{
display:flex;
align-items:center;
gap:10px;
}
.krr-social a{
width:36px;
height:36px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:rgba(255,255,255,.10);
color:#ffffff;
transition:all .35s ease;
}
.krr-social a:hover{
transform:translateY(-3px) scale(1.08);
box-shadow:0 8px 20px rgba(11,78,162,.25);
}
.facebook:hover{
background:#1877F2;
}
.instagram:hover{
background:#E1306C;
}
.youtube:hover{
background:#FF0000;
}
.whatsapp:hover{
background:#25D366;
}
/*=========================
MAIN HEADER
=========================*/
.krr-header{
position:sticky;
top:0;
left:0;
width:100%;
z-index:9998;
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(0,0,0,.05);
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:all .35s ease;
}
/*=========================
CONTAINER
=========================*/
.krr-container{
max-width:1320px;
margin:auto;
padding:14px 30px;
display:flex;
justify-content:space-between;
align-items:center;
}
/*=========================
LOGO
=========================*/
.krr-logo{
display:flex;
align-items:center;
gap:15px;
user-select:none;
}
.krr-logo img{
width:75px;
transition:all .35s ease;
}
.krr-logo:hover img{
transform:scale(1.05);
}
.krr-logo-text{
line-height:1.2;
}
.krr-logo-text h2{
margin:0;
color:#0B4EA2;
font-size:28px;
font-weight:700;
}
.krr-logo-text p{
margin-top:4px;
color:#666666;
font-size:14px;
}
/*=========================
DESKTOP OPTIMIZATION
=========================*/
@media (min-width:1200px){
.krr-container{
min-height:90px;
}
.krr-logo{
min-width:310px;
}
}
/*==========================================================
KRR HIGH SCHOOL
PREMIUM HEADER CSS
PART 2
Navigation + Admission Button
==========================================================*/
/*=========================
NAVIGATION
=========================*/
.krr-menu{
display:flex;
align-items:center;
justify-content:center;
flex:1;
gap:32px;
margin:0 40px;
}
.krr-menu a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 0;
color:#1d1d1d;
font-size:15px;
font-weight:600;
white-space:nowrap;
transition:all .35s ease;
}
/*=========================
MENU HOVER
=========================*/
.krr-menu a:hover{
color:#0B4EA2;
}
/*=========================
ANIMATED UNDERLINE
=========================*/
.krr-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:3px;
border-radius:50px;
background:#0B4EA2;
transition:width .35s ease;
}
.krr-menu a:hover::after{
width:100%;
}
/*=========================
ACTIVE MENU
=========================*/
.krr-menu a.active,
.krr-menu a.current-menu-item,
.krr-menu a.current_page_item{
color:#0B4EA2;
}
.krr-menu a.active::after,
.krr-menu a.current-menu-item::after,
.krr-menu a.current_page_item::after{
width:100%;
}
/*=========================
ADMISSION BUTTON
=========================*/
.admission-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:190px;
padding:14px 28px;
border-radius:50px;
background:linear-gradient(
135deg,
#0B4EA2,
#1F73E8
);
color:#ffffff;
font-size:15px;
font-weight:700;
white-space:nowrap;
box-shadow:0 10px 25px rgba(11,78,162,.25);
transition:all .35s ease;
}
.admission-btn:hover{
background:linear-gradient(
135deg,
#FFC107,
#FFB300
);
color:#082554;
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(11,78,162,.35);
}
/*=========================
DESKTOP ALIGNMENT
=========================*/
@media (min-width:1200px){
.krr-menu{
justify-content:center;
}
.admission-btn{
flex-shrink:0;
}
}
/*=========================
LARGE DESKTOP
=========================*/
@media (min-width:1600px){
.krr-container{
max-width:1450px;
}
}
/*==========================================================
KRR HIGH SCHOOL
PREMIUM HEADER CSS
PART 3
Hamburger + Responsive Layout
==========================================================*/
/*=========================
HAMBURGER
=========================*/
.krr-hamburger{
display:none;
width:46px;
height:46px;
align-items:center;
justify-content:center;
background:transparent;
border:none;
cursor:pointer;
padding:0;
z-index:10001;
}
.krr-hamburger span{
display:block;
width:28px;
height:3px;
margin:5px auto;
border-radius:30px;
background:#0B4EA2;
transition:all .35s ease;
}
.krr-hamburger.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}
.krr-hamburger.active span:nth-child(2){
opacity:0;
}
.krr-hamburger.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}
/*=========================
TABLET
=========================*/
@media (max-width:1024px){
.krr-topbar{
flex-direction:column;
justify-content:center;
align-items:center;
gap:12px;
padding:12px 20px;
}
.krr-left{
justify-content:center;
gap:15px;
}
.krr-social{
justify-content:center;
}
.krr-container{
position:relative;
padding:15px 20px;
flex-wrap:wrap;
}
.krr-logo img{
width:65px;
}
.krr-logo-text h2{
font-size:24px;
}
.krr-menu{
display:none;
width:100%;
order:100;
flex-direction:column;
gap:18px;
margin:20px 0 0;
padding:20px;
background:#ffffff;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.krr-menu.active{
display:flex;
animation:krrMenuFade .35s ease;
}
.krr-menu a{
width:100%;
justify-content:center;
padding:12px 15px;
}
.krr-hamburger{
display:flex;
}
.admission-btn{
margin-left:auto;
margin-right:15px;
}
}
/*=========================
MOBILE
=========================*/
@media (max-width:767px){
.krr-topbar{
padding:10px 15px;
text-align:center;
}
.krr-left{
flex-direction:column;
gap:10px;
}
.krr-left a{
font-size:13px;
}
.krr-social{
margin-top:5px;
}
.krr-container{
padding:14px 15px;
}
.krr-logo{
gap:10px;
}
.krr-logo img{
width:55px;
}
.krr-logo-text h2{
font-size:20px;
}
.krr-logo-text p{
font-size:11px;
}
.krr-menu{
position:absolute;
top:100%;
left:0;
width:100%;
margin:0;
border-radius:0;
border-top:1px solid #eeeeee;
}
.admission-btn{
display:none;
}
}
/*=========================
SMALL MOBILE
=========================*/
@media (max-width:480px){
.krr-logo img{
width:50px;
}
.krr-logo-text h2{
font-size:18px;
}
.krr-logo-text p{
display:none;
}
.krr-left a{
font-size:12px;
}
.krr-social a{
width:32px;
height:32px;
font-size:13px;
}
}
/*=========================
EXTRA SMALL MOBILE
=========================*/
@media (max-width:360px){
.krr-logo img{
width:46px;
}
.krr-logo-text h2{
font-size:16px;
}
.krr-left a{
font-size:11px;
}
}
/*=========================
MOBILE MENU ANIMATION
=========================*/
@keyframes krrMenuFade{
from{
opacity:0;
transform:translateY(-12px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*==========================================================
KRR HIGH SCHOOL
PREMIUM HEADER CSS
PART 4
Sticky Header + Scroll Effects + Glass UI
==========================================================*/
/*=========================
STICKY HEADER
=========================*/
.krr-header{
position:sticky;
top:0;
left:0;
width:100%;
z-index:9999;
transition:
background .35s ease,
box-shadow .35s ease,
padding .35s ease;
}
/*=========================
SCROLL EFFECT
=========================*/
.krr-header.scrolled{
background:rgba(255,255,255,.96);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 12px 35px rgba(0,0,0,.08);
}
.krr-header.scrolled .krr-container{
padding:10px 30px;
}
/*=========================
LOGO EFFECT
=========================*/
.krr-header.scrolled .krr-logo img{
width:65px;
}
.krr-logo img{
transition:
transform .35s ease,
width .35s ease;
}
.krr-logo:hover img{
transform:scale(1.05);
}
/*=========================
MENU EFFECT
=========================*/
.krr-menu a{
transition:
color .3s ease,
transform .3s ease;
}
.krr-menu a:hover{
color:#0B4EA2;
}
/*=========================
BUTTON EFFECT
=========================*/
.admission-btn{
transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease,
color .35s ease;
}
.admission-btn:hover{
transform:translateY(-3px);
}
/*=========================
SOCIAL EFFECT
=========================*/
.krr-social a{
transition:
transform .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.krr-social a:hover{
transform:
translateY(-3px)
scale(1.08);
}
/*=========================
ICON EFFECT
=========================*/
.krr-left i{
transition:
transform .3s ease;
}
.krr-left a:hover i{
transform:
rotate(-10deg)
scale(1.08);
}
/*=========================
GLASS EFFECT
=========================*/
.krr-header{
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
/*=========================
FADE TRANSITIONS
=========================*/
.krr-header,
.krr-topbar,
.krr-menu,
.krr-logo,
.admission-btn,
.krr-social a,
.krr-left a{
transition:all .35s ease;
}
/*=========================
PERFORMANCE
=========================*/
.krr-header,
.krr-topbar,
.krr-menu,
.krr-logo,
.krr-social,
.admission-btn{
will-change:transform;
}
img{
image-rendering:auto;
}
button{
outline:none;
}
button:focus{
outline:none;
}
/*=========================
TOUCH DEVICES
=========================*/
@media (hover:none){
.krr-menu a:hover::after{
width:0;
}
.krr-social a:hover{
transform:none;
}
.admission-btn:hover{
transform:none;
}
}
/*=========================
TABLET SCROLL
=========================*/
@media (max-width:991px){
.krr-header.scrolled .krr-container{
padding:14px 15px;
}
}
/*=========================
MOBILE SCROLL
=========================*/
@media (max-width:767px){
.krr-header.scrolled .krr-logo img{
width:55px;
}
}
/*==========================================================
KRR HIGH SCHOOL
PREMIUM HEADER CSS
PART 5 (FINAL)
Final Polish + Accessibility + Production Optimization
==========================================================*/
/*=========================
ACCESSIBILITY
=========================*/
.krr-menu a:focus-visible,
.krr-left a:focus-visible,
.krr-social a:focus-visible,
.admission-btn:focus-visible,
.krr-hamburger:focus-visible{
outline:2px solid #0B4EA2;
outline-offset:3px;
border-radius:6px;
}
/*=========================
POINTER FIX
=========================*/
.krr-menu a,
.krr-left a,
.krr-social a,
.admission-btn,
.krr-hamburger{
cursor:pointer;
}
/*=========================
LOGO SAFETY
=========================*/
.krr-logo{
flex-shrink:0;
}
.krr-logo-text{
white-space:nowrap;
}
/*=========================
MENU SAFETY
=========================*/
.krr-menu{
overflow:visible;
}
.krr-menu a{
overflow:hidden;
}
/*=========================
BUTTON SAFETY
=========================*/
.admission-btn{
flex-shrink:0;
border:none;
appearance:none;
-webkit-appearance:none;
}
/*=========================
SOCIAL SAFETY
=========================*/
.krr-social{
flex-shrink:0;
}
.krr-social a{
overflow:hidden;
}
/*=========================
IMAGE FIX
=========================*/
img{
vertical-align:middle;
border:0;
}
/*=========================
MOBILE CLEANUP
=========================*/
@media (max-width:1024px){
.krr-container{
gap:15px;
}
}
@media (max-width:767px){
.krr-menu{
overflow-y:auto;
max-height:calc(100vh - 120px);
}
.krr-menu a{
border-bottom:1px solid rgba(0,0,0,.05);
}
.krr-menu a:last-child{
border-bottom:none;
}
}
@media (max-width:480px){
.krr-container{
gap:10px;
}
.krr-menu{
padding:15px;
}
}
/*=========================
PRINT
=========================*/
@media print{
.krr-topbar,
.krr-hamburger,
.admission-btn{
display:none !important;
}
}
/*=========================
REDUCED MOTION
=========================*/
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
}
/*=========================
PERFORMANCE
=========================*/
.krr-header,
.krr-topbar,
.krr-container,
.krr-menu,
.krr-logo,
.krr-social,
.admission-btn{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform:translateZ(0);
}
/*=========================
END OF FILE
=========================*/
/* ===== FINAL MOBILE FIX ===== */
@media (max-width:767px){
.krr-container{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-wrap:nowrap !important;
}
.admission-btn{
display:none !important;
}
.krr-hamburger{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
width:46px;
height:46px;
margin-left:auto;
}
.krr-hamburger span{
display:block !important;
width:28px;
height:3px;
margin:3px 0;
background:#0B4EA2;
border-radius:50px;
}
.krr-menu{
display:none !important;
}
.krr-menu.active{
display:flex !important;
}
}
/* =========================================
KRR HEADER V2.0
PREMIUM MOBILE POLISH
========================================= */
@media (max-width:767px){
/* Top Bar */
.krr-topbar{
padding:12px 15px !important;
}
.krr-left{
gap:12px !important;
}
.krr-left a{
font-size:15px !important;
font-weight:600;
}
.krr-social{
margin-top:10px;
gap:14px;
}
.krr-social a{
width:42px;
height:42px;
font-size:16px;
}
/* Header */
.krr-container{
min-height:82px;
padding:14px 16px !important;
}
/* Logo */
.krr-logo{
gap:12px;
}
.krr-logo img{
width:52px !important;
}
.krr-logo-text h2{
font-size:18px !important;
line-height:1.2;
}
.krr-logo-text p{
display:none;
}
/* Hamburger */
.krr-hamburger{
width:48px;
height:48px;
border-radius:12px;
background:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.krr-hamburger span{
width:26px;
height:3px;
margin:3px 0;
border-radius:20px;
background:#0B4EA2;
}
/* Mobile Menu */
.krr-menu{
margin-top:0 !important;
padding:0 !important;
background:#ffffff;
border-radius:0;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.krr-menu a{
padding:20px 15px !important;
font-size:20px;
font-weight:600;
color:#222;
}
.krr-menu a:hover{
background:#f5f8ff;
}
}/* End custom CSS */