/* Start custom CSS for html, class: .elementor-element-f550d11 *//*==========================================================
KRR HEADER V2
PART 2
PREMIUM CSS
==========================================================*/
/*==========================================================
ROOT
==========================================================*/
:root{
--primary:#0B4EA2;
--secondary:#FFC107;
--white:#ffffff;
--text:#222222;
--transition:.35s ease;
}
/*==========================================================
WRAPPER
==========================================================*/
.krr-header-v2-wrapper{
width:100%;
position:relative;
z-index:9999;
}
/*==========================================================
TOP BAR
==========================================================*/
.krr-topbar-v2{
background:#0A3078;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 40px;
}
.krr-topbar-left{
display:flex;
align-items:center;
gap:24px;
flex-wrap:wrap;
}
.krr-topbar-left a{
color:#fff;
font-size:14px;
display:flex;
align-items:center;
gap:6px;
transition:var(--transition);
}
.krr-topbar-left a:hover{
color:#FFC107;
}
.krr-topbar-left i{
color:#FFC107;
}
/*==========================================================
SOCIAL
==========================================================*/
.krr-social-v2{
display:flex;
gap:10px;
}
.krr-social-v2 a{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.10);
color:#fff;
transition:.35s ease;
}
.krr-social-v2 .facebook:hover{
background:#1877F2;
}
.krr-social-v2 .instagram:hover{
background:#E4405F;
}
.krr-social-v2 .youtube:hover{
background:#FF0000;
}
.krr-social-v2 .whatsapp:hover{
background:#25D366;
}
.krr-social-v2 a:hover{
transform:translateY(-3px);
}
/*==========================================================
HEADER
==========================================================*/
.krr-header-v2{
width:100%;
background:#fff;
box-shadow:0 8px 25px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:999;
}
/*==========================================================
CONTAINER
==========================================================*/
.krr-container-v2{
max-width:1320px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 30px;
gap:25px;
}
/*==========================================================
LOGO
==========================================================*/
.krr-logo-v2{
display:flex;
align-items:center;
gap:14px;
flex-shrink:0;
}
.krr-logo-v2 img{
width:78px;
height:auto;
transition:.35s;
}
.krr-logo-v2:hover img{
transform:scale(1.05);
}
/*==========================================================
LOGO TEXT
==========================================================*/
.krr-logo-text-v2{
display:flex;
flex-direction:column;
justify-content:center;
}
.krr-logo-text-v2 h2{
margin:0;
color:#0B4EA2;
font-size:30px;
font-weight:700;
}
.krr-logo-text-v2 p{
margin-top:4px;
color:#666;
font-size:14px;
}
/*==========================================================
KRR HEADER V2
PART 3
NAVIGATION + BUTTON + HAMBURGER
==========================================================*/
/*==========================================================
NAVIGATION
==========================================================*/
.krr-menu-v2{
display:flex;
align-items:center;
justify-content:center;
flex:1;
gap:35px;
margin:0 30px;
}
.krr-menu-v2 a{
position:relative;
color:#222;
font-size:15px;
font-weight:600;
text-decoration:none;
transition:.35s ease;
}
.krr-menu-v2 a:hover{
color:#0B4EA2;
}
.krr-menu-v2 a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:3px;
border-radius:30px;
background:#0B4EA2;
transition:.35s ease;
}
.krr-menu-v2 a:hover::after{
width:100%;
}
.krr-menu-v2 a.active{
color:#0B4EA2;
}
.krr-menu-v2 a.active::after{
width:100%;
}
/*==========================================================
ADMISSION BUTTON
==========================================================*/
.admission-btn-v2{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border-radius:50px;
background:linear-gradient(135deg,#0B4EA2,#1F73E8);
color:#fff;
font-size:15px;
font-weight:700;
white-space:nowrap;
box-shadow:0 10px 25px rgba(11,78,162,.25);
transition:.35s ease;
}
.admission-btn-v2:hover{
background:linear-gradient(135deg,#FFC107,#FFB300);
color:#082554;
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(11,78,162,.35);
}
/*==========================================================
HAMBURGER
==========================================================*/
.krr-hamburger-v2{
display:none;
width:48px;
height:48px;
border:none;
background:transparent;
align-items:center;
justify-content:center;
flex-direction:column;
cursor:pointer;
padding:0;
}
.krr-hamburger-v2 span{
width:28px;
height:3px;
margin:3px 0;
border-radius:30px;
background:#0B4EA2;
transition:.35s ease;
}
/*==========================================================
ACTIVE HAMBURGER
==========================================================*/
.krr-hamburger-v2.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}
.krr-hamburger-v2.active span:nth-child(2){
opacity:0;
}
.krr-hamburger-v2.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}
/*==========================================================
DESKTOP POLISH
==========================================================*/
.krr-menu-v2{
user-select:none;
}
.krr-logo-v2{
user-select:none;
}
.krr-logo-v2 img{
image-rendering:auto;
}
.krr-header-v2{
transition:all .35s ease;
}
.krr-header-v2.scrolled{
box-shadow:0 15px 40px rgba(0,0,0,.12);
}
/*==========================================================
KRR HEADER V2
PART 4
RESPONSIVE CSS (FINAL)
==========================================================*/
/*==========================================================
TABLET
==========================================================*/
@media (max-width:1024px){
.krr-topbar-v2{
flex-direction:column;
justify-content:center;
align-items:center;
gap:12px;
padding:12px 20px;
}
.krr-topbar-left{
justify-content:center;
flex-wrap:wrap;
gap:15px;
}
.krr-social-v2{
justify-content:center;
}
.krr-container-v2{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
gap:10px;
padding:15px 20px;
min-height:80px;
}
.krr-logo-v2{
order:1;
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto;
min-width:auto;
}
.krr-logo-v2 img{
width:60px;
}
.krr-logo-text-v2 h2{
font-size:22px;
}
.krr-logo-text-v2 p{
font-size:12px;
}
.admission-btn-v2{
order:2;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
font-size:13px;
margin-left:10px;
flex-shrink:0;
}
.krr-hamburger-v2{
order:3;
display:flex;
width:46px;
height:46px;
margin-left:8px;
flex-shrink:0;
}
.krr-menu-v2{
order:4;
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
flex-direction:column;
flex:none;
margin:0;
gap:0;
box-shadow:0 15px 35px rgba(0,0,0,.10);
z-index:999;
}
.krr-menu-v2.active{
display:flex;
}
.krr-menu-v2 a{
width:100%;
padding:18px 20px;
text-align:center;
border-bottom:1px solid rgba(0,0,0,.06);
}
}
/*==========================================================
MOBILE
==========================================================*/
@media (max-width:767px){
.krr-topbar-v2{
display:none;
}
.krr-container-v2{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
min-height:72px;
padding:12px 15px;
gap:8px;
}
.krr-logo-v2{
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto;
}
.krr-logo-v2 img{
width:52px;
}
.krr-logo-text-v2 h2{
font-size:20px;
line-height:1.1;
}
.krr-logo-text-v2 p{
display:none;
}
.krr-menu-v2{
flex:none;
margin:0;
}
.admission-btn-v2{
padding:10px 13px;
font-size:12px;
margin-left:8px;
flex-shrink:0;
}
.krr-hamburger-v2{
width:44px;
height:44px;
margin-left:6px;
flex-shrink:0;
}
.krr-hamburger-v2 span{
width:24px;
}
}
/*==========================================================
SMALL MOBILE
==========================================================*/
@media (max-width:480px){
.krr-container-v2{
padding:10px 12px;
gap:6px;
}
.krr-logo-v2 img{
width:46px;
}
.krr-logo-text-v2 h2{
font-size:18px;
}
.admission-btn-v2{
padding:8px 11px;
font-size:11px;
}
}
/*==========================================================
EXTRA SMALL
==========================================================*/
@media (max-width:360px){
.krr-logo-v2 img{
width:42px;
}
.krr-logo-text-v2 h2{
font-size:16px;
}
.admission-btn-v2{
display:none;
}
}
/*==========================================================
KRR HEADER V2
PART 6
PREMIUM POLISH
==========================================================*/
/*==========================================================
STICKY HEADER
==========================================================*/
.krr-header-v2{
transition:
background .35s ease,
padding .35s ease,
box-shadow .35s ease;
}
.krr-header-v2.scrolled{
background:rgba(255,255,255,.92);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:0 15px 40px rgba(0,0,0,.10);
}
.krr-header-v2.scrolled .krr-container-v2{
padding:12px 30px;
}
.krr-header-v2.scrolled .krr-logo-v2 img{
width:68px;
}
/*==========================================================
SCROLL PROGRESS BAR
==========================================================*/
.krr-scroll-progress{
position:fixed;
top:0;
left:0;
width:0;
height:4px;
background:linear-gradient(
90deg,
#0B4EA2,
#FFC107
);
z-index:999999;
}
/*==========================================================
GLASS EFFECT
==========================================================*/
.krr-header-v2{
background:rgba(255,255,255,.90);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
/*==========================================================
HOVER EFFECTS
==========================================================*/
.krr-logo-v2 img{
transition:transform .35s ease;
}
.krr-logo-v2:hover img{
transform:rotate(-2deg) scale(1.05);
}
.krr-social-v2 a{
transition:all .35s ease;
}
.krr-social-v2 a:hover{
transform:translateY(-4px);
}
/*==========================================================
BUTTON SHINE EFFECT
==========================================================*/
.admission-btn-v2{
position:relative;
overflow:hidden;
}
.admission-btn-v2::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);
transition:.8s;
}
.admission-btn-v2:hover::before{
left:100%;
}
/*==========================================================
ACCESSIBILITY
==========================================================*/
.krr-menu-v2 a:focus-visible,
.admission-btn-v2:focus-visible,
.krr-hamburger-v2:focus-visible,
.krr-social-v2 a:focus-visible{
outline:2px solid #FFC107;
outline-offset:3px;
border-radius:6px;
}
/*==========================================================
PERFORMANCE
==========================================================*/
.krr-header-v2,
.krr-container-v2,
.krr-logo-v2,
.krr-menu-v2,
.admission-btn-v2{
will-change:transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/*==========================================================
TOUCH DEVICES
==========================================================*/
@media (hover:none){
.krr-social-v2 a:hover,
.admission-btn-v2:hover{
transform:none;
}
}
/*==========================================================
REDUCED MOTION
==========================================================*/
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation:none !important;
transition:none !important;
}
}
/*==========================================================
PRINT
==========================================================*/
@media print{
.krr-topbar-v2,
.krr-hamburger-v2,
.admission-btn-v2{
display:none !important;
}
}
/*==========================================================
END OF HEADER V2
==========================================================*//* End custom CSS */