/* Start custom CSS for html, class: .elementor-element-8f34e35 *//*====================================
KRR HIGH SCHOOL FOOTER V2
PART 1 - BASE CSS
=====================================*/
.footer{
position:relative;
background:linear-gradient(135deg,#123D8C 0%,#1F4EA3 100%);
color:#fff;
overflow:hidden;
padding:70px 0 0;
}
.footer::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,
rgba(255,255,255,.08),
transparent 60%);
pointer-events:none;
}
.footer-container{
position:relative;
max-width:1300px;
margin:auto;
padding:0 40px 55px;
display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:55px;
z-index:2;
}
/*====================================
ABOUT
=====================================*/
.about-school{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-logo{
width:125px;
margin-bottom:18px;
display:block;
filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.about-school h2{
font-size:34px;
font-weight:700;
margin-bottom:18px;
color:#fff;
}
.about-school p{
max-width:330px;
color:#E6E6E6;
line-height:1.9;
font-size:16px;
}
/*====================================
SOCIAL
=====================================*/
.social-links{
display:flex;
gap:15px;
margin-top:28px;
}
.social-links a{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
text-decoration:none;
font-size:18px;
}
/*====================================
COLUMN TITLE
=====================================*/
.footer-column h3{
color:#FFD700;
font-size:24px;
margin-bottom:28px;
position:relative;
}
.footer-column h3::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:50px;
height:4px;
border-radius:50px;
background:#32CD32;
}
/*====================================
LINKS
=====================================*/
.footer-column ul{
list-style:none;
padding:0;
margin:0;
}
.footer-column li{
margin-bottom:18px;
}
.footer-column a{
color:#E6E6E6;
text-decoration:none;
display:flex;
align-items:center;
gap:10px;
font-size:16px;
}
/*====================================
CONTACT
=====================================*/
.contact-info{
font-style:normal;
}
.contact-info li{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
color:#E6E6E6;
}
.contact-info i{
color:#32CD32;
min-width:18px;
margin-top:3px;
}
/*====================================
COPYRIGHT
=====================================*/
.footer-bottom{
background:#2EAF3D;
text-align:center;
padding:14px 20px;
}
.footer-bottom p{
margin:0;
color:#fff;
font-size:14px;
line-height:1.7;
}
.footer-bottom a{
color:#fff;
text-decoration:none;
font-weight:600;
}
/*====================================
TABLET
=====================================*/
@media(max-width:1024px){
.footer-container{
grid-template-columns:1fr 1fr;
gap:45px;
}
.about-school{
grid-column:span 2;
}
}
/*====================================
KRR FOOTER V2
PART 2
PREMIUM HOVER EFFECTS
=====================================*/
/*====================================
LOGO ANIMATION
=====================================*/
.footer-logo{
transition:all .45s ease;
animation:krrLogoFloat 4s ease-in-out infinite;
}
.footer-logo:hover{
transform:scale(1.08) rotate(-2deg);
filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
@keyframes krrLogoFloat{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0);
}
}
/*====================================
SCHOOL NAME
=====================================*/
.about-school h2{
transition:.35s;
}
.about-school:hover h2{
color:#FFD700;
}
/*====================================
DESCRIPTION
=====================================*/
.about-school p{
transition:.35s;
}
.about-school:hover p{
color:#ffffff;
}
/*====================================
SOCIAL ICONS
=====================================*/
.social-links a{
position:relative;
overflow:hidden;
transition:.35s ease;
}
.social-links a::before{
content:"";
position:absolute;
top:-100%;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,.18);
transition:.35s;
}
.social-links a:hover::before{
top:0;
}
.social-links a:hover{
transform:translateY(-8px) scale(1.08);
box-shadow:0 15px 30px rgba(0,0,0,.28);
}
/* Facebook */
.social-links a:nth-child(1):hover{
background:#1877F2;
}
/* Instagram */
.social-links a:nth-child(2):hover{
background:#E4405F;
}
/* YouTube */
.social-links a:nth-child(3):hover{
background:#FF0000;
}
/* WhatsApp */
.social-links a:nth-child(4):hover{
background:#25D366;
}
/*====================================
COLUMN TITLES
=====================================*/
.footer-column h3{
transition:.35s;
}
.footer-column:hover h3{
color:#ffffff;
}
.footer-column h3::after{
transition:.35s;
}
.footer-column:hover h3::after{
width:75px;
background:#FFD700;
}
/*====================================
FOOTER LINKS
=====================================*/
.footer-column ul li a{
position:relative;
transition:.35s;
}
.footer-column ul li a::before{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0;
height:2px;
background:#FFD700;
transition:.35s;
}
.footer-column ul li a:hover{
color:#FFD700;
padding-left:10px;
}
.footer-column ul li a:hover::before{
width:100%;
}
/*====================================
CONTACT
=====================================*/
.contact-info li{
transition:.35s;
}
.contact-info li:hover{
transform:translateX(6px);
}
.contact-info li:hover i{
color:#FFD700;
transform:scale(1.2);
}
.contact-info i{
transition:.35s;
}
/*====================================
COPYRIGHT
=====================================*/
.footer-bottom{
transition:.35s;
}
.footer-bottom:hover{
background:#269734;
}
.footer-bottom a{
transition:.35s;
}
.footer-bottom a:hover{
color:#FFD700;
}
/*====================================
WHOLE FOOTER FADE
=====================================*/
.footer{
animation:krrFooterFade .8s ease;
}
@keyframes krrFooterFade{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*====================================
KRR FOOTER V2
PART 3
MOBILE RESPONSIVE
=====================================*/
/*====================================
TABLET
=====================================*/
@media (max-width:1024px){
.footer{
padding:60px 0 0;
}
.footer-container{
grid-template-columns:1fr 1fr;
gap:45px;
padding:0 30px 45px;
}
.about-school{
grid-column:1 / -1;
margin-bottom:10px;
}
.about-school h2{
font-size:30px;
}
.footer-logo{
width:110px;
}
.about-school p{
max-width:520px;
margin:auto;
}
}
/*====================================
MOBILE
=====================================*/
@media (max-width:768px){
.footer{
text-align:center;
padding:45px 0 0;
}
.footer-container{
display:flex;
flex-direction:column;
align-items:center;
gap:35px;
padding:0 22px 40px;
}
.about-school{
margin-top:0;
}
.footer-logo{
width:90px;
margin-bottom:15px;
}
.about-school h2{
font-size:26px;
margin-bottom:14px;
}
.about-school p{
max-width:320px;
font-size:15px;
line-height:1.8;
}
.social-links{
justify-content:center;
gap:12px;
margin-top:22px;
}
.social-links a{
width:42px;
height:42px;
font-size:17px;
}
.footer-column{
width:100%;
}
.footer-column h3{
font-size:20px;
margin-bottom:18px;
text-align:center;
}
.footer-column h3::after{
left:50%;
transform:translateX(-50%);
}
.footer-column ul{
display:flex;
flex-direction:column;
align-items:center;
}
.footer-column ul li{
margin-bottom:14px;
}
.footer-column ul li a{
justify-content:center;
padding:2px 0;
font-size:15px;
}
.contact-info ul{
display:flex;
flex-direction:column;
align-items:center;
}
.contact-info li{
justify-content:center;
text-align:center;
font-size:15px;
margin-bottom:16px;
}
.contact-info i{
margin-top:2px;
}
.footer-bottom{
padding:12px 15px;
}
.footer-bottom p{
font-size:13px;
line-height:1.7;
}
}
/*====================================
SMALL MOBILE
=====================================*/
@media (max-width:480px){
.footer{
padding:40px 0 0;
}
.footer-container{
padding:0 18px 35px;
gap:30px;
}
.footer-logo{
width:80px;
}
.about-school h2{
font-size:23px;
}
.about-school p{
font-size:14px;
max-width:280px;
}
.social-links a{
width:40px;
height:40px;
font-size:16px;
}
.footer-column h3{
font-size:19px;
}
.footer-column ul li a{
font-size:14px;
}
.contact-info li{
font-size:14px;
}
.footer-bottom{
padding:10px 12px;
}
.footer-bottom p{
font-size:12px;
}
}
/*====================================
EXTRA SMALL
=====================================*/
@media (max-width:360px){
.footer-logo{
width:72px;
}
.about-school h2{
font-size:21px;
}
.about-school p{
font-size:13px;
}
.social-links{
gap:10px;
}
.social-links a{
width:38px;
height:38px;
font-size:15px;
}
.footer-column h3{
font-size:18px;
}
.footer-column ul li a{
font-size:13px;
}
.contact-info li{
font-size:13px;
}
.footer-bottom p{
font-size:11px;
}
}
/*====================================
KRR FOOTER
LOAD ANIMATION
=====================================*/
.footer{
animation:krrFooterLoad .8s ease-out both;
}
@keyframes krrFooterLoad{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* Footer Columns */
.footer-column{
animation:krrColumnLoad .8s ease-out both;
}
.footer-column:nth-child(1){
animation-delay:.15s;
}
.footer-column:nth-child(2){
animation-delay:.30s;
}
.footer-column:nth-child(3){
animation-delay:.45s;
}
.footer-column:nth-child(4){
animation-delay:.60s;
}
@keyframes krrColumnLoad{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* Logo */
.footer-logo{
animation:krrLogoPop 1s ease;
}
@keyframes krrLogoPop{
0%{
opacity:0;
transform:scale(.8);
}
100%{
opacity:1;
transform:scale(1);
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d3b11ad *//*==================================
KRR PREMIUM FLOATING BUTTONS
==================================*/
.krr-floating-buttons{
position:fixed;
right:20px;
bottom:85px;
display:flex;
flex-direction:column;
gap:15px;
z-index:999999;
}
/*==============================
COMMON BUTTONS
==============================*/
.krr-floating-buttons a{
position:relative;
width:60px;
height:60px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
color:#fff;
font-size:28px;
overflow:hidden;
box-shadow:0 10px 28px rgba(0,0,0,.28);
transition:all .35s ease;
}
/*==============================
WHATSAPP
==============================*/
.krr-whatsapp{
background:#25D366;
animation:krrPulse 2.5s infinite;
}
/* Ripple only WhatsApp */
.krr-whatsapp::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
border:2px solid rgba(37,211,102,.45);
animation:krrRipple 2.5s infinite;
}
/*==============================
CALL
==============================*/
.krr-call{
background:#1565C0;
}
/*==============================
HOVER
==============================*/
.krr-floating-buttons a:hover{
transform:translateY(-4px) scale(1.06);
box-shadow:0 16px 35px rgba(0,0,0,.35);
}
/*==============================
WHATSAPP PULSE
==============================*/
@keyframes krrPulse{
0%{
box-shadow:0 0 0 0 rgba(37,211,102,.55);
}
70%{
box-shadow:0 0 0 18px rgba(37,211,102,0);
}
100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}
}
/*==============================
RIPPLE
==============================*/
@keyframes krrRipple{
0%{
transform:scale(1);
opacity:.7;
}
100%{
transform:scale(1.7);
opacity:0;
}
}
/*==============================
MOBILE
==============================*/
@media(max-width:768px){
.krr-floating-buttons{
right:15px;
bottom:78px;
gap:12px;
}
.krr-floating-buttons a{
width:54px;
height:54px;
font-size:24px;
}
}/* End custom CSS */