/* Start custom CSS for html, class: .elementor-element-dc25a2c *//* ===============================
KRR HIGH SCHOOL
ADMISSIONS HERO
=============================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.krr-hero{
position:relative;
width:100%;
height:550px;
background:
linear-gradient(rgba(7,33,84,.35),rgba(7,33,84,.35)),
url("https://krrhighschool.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-23-2026-06_45_32-PM.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
align-items:center;
padding:0 8%;
overflow:hidden;
}
.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(90deg,
rgba(7,33,84,.55) 0%,
rgba(7,33,84,.30) 45%,
rgba(7,33,84,.05) 100%);
}
.hero-content{
position:relative;
z-index:2;
max-width:550px;
animation:fadeUp 1s ease;
}
.hero-badge{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);
color:#fff;
font-size:14px;
font-weight:600;
margin-bottom:22px;
}
.hero-content h1{
font-size:70px;
font-weight:800;
color:#F4B223;
margin-bottom:15px;
line-height:1.1;
}
.hero-breadcrumb{
font-size:18px;
color:#fff;
}
.hero-breadcrumb a{
color:#fff;
text-decoration:none;
transition:.3s;
}
.hero-breadcrumb a:hover{
color:#F4B223;
}
.hero-breadcrumb span{
margin:0 8px;
color:#F4B223;
}
/* Animation */
@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
/* Tablet */
@media(max-width:1024px){
.krr-hero{
height:450px;
padding:0 6%;
}
.hero-content h1{
font-size:56px;
}
}
/* Mobile */
@media(max-width:768px){
.krr-hero{
height:340px;
padding:0 25px;
background-position:center;
}
.hero-content{
max-width:100%;
}
.hero-content h1{
font-size:40px;
}
.hero-badge{
font-size:12px;
padding:8px 18px;
}
.hero-breadcrumb{
font-size:15px;
}
}
/* Hero Fade */
.krr-hero{
animation:heroFade 1s ease;
}
@keyframes heroFade{
from{
opacity:0;
transform:scale(1.05);
}
to{
opacity:1;
transform:scale(1);
}
}
/* Content Animation */
.hero-content{
animation:contentUp 1.2s ease;
}
@keyframes contentUp{
0%{
opacity:0;
transform:translateY(50px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
/* Badge */
.hero-badge{
animation:badgePop 1.4s;
}
@keyframes badgePop{
0%{
opacity:0;
transform:scale(.7);
}
100%{
opacity:1;
transform:scale(1);
}
}
/* Heading */
.hero-content h1{
animation:titleSlide 1.6s;
}
@keyframes titleSlide{
0%{
opacity:0;
transform:translateX(-60px);
}
100%{
opacity:1;
transform:translateX(0);
}
}
/* Hover */
.krr-hero:hover{
background-size:105%;
transition:6s;
}
/* Tablet */
@media(max-width:1024px){
.krr-hero{
height:420px;
padding:0 50px;
}
.hero-content h1{
font-size:52px;
}
}
/* Mobile */
@media(max-width:768px){
.krr-hero{
height:320px;
padding:25px;
background-position:center;
}
.hero-content{
max-width:100%;
}
.hero-content h1{
font-size:38px;
}
.hero-badge{
font-size:12px;
padding:8px 18px;
}
.hero-breadcrumb{
font-size:14px;
}
}
/* Small Mobile */
@media(max-width:480px){
.krr-hero{
height:280px;
}
.hero-content h1{
font-size:30px;
}
.hero-badge{
font-size:11px;
}
.hero-breadcrumb{
font-size:13px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-893a661 *//*==========================================
KRR HIGH SCHOOL
ADMISSION FORM
PREMIUM CORPORATE CSS - PART 2
==========================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Poppins',sans-serif;
background:#f7f9fc;
color:#1e293b;
}
/* SECTION */
.krr-admission-section{
padding:90px 20px;
background:#ffffff;
}
/* CONTAINER */
.krr-form-container{
max-width:1000px;
margin:auto;
background:#ffffff;
padding:45px;
border-radius:18px;
box-shadow:
0 15px 40px rgba(0,0,0,.08);
border:1px solid #eef2f7;
}
/* HEADER */
.admission-header{
text-align:center;
max-width:760px;
margin:0 auto 45px;
}
/* BADGE */
.admission-badge{
display:inline-block;
padding:8px 22px;
background:#fff7e6;
border:1px solid #F4B223;
border-radius:40px;
color:#d18a00;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}
/* TITLE */
.admission-header h2{
font-size:42px;
font-weight:700;
color:#072154;
margin-bottom:15px;
}
/* DESCRIPTION */
.admission-header p{
font-size:17px;
line-height:1.8;
color:#64748b;
}
/* ROW */
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-bottom:22px;
}
/* GROUP */
.form-group{
display:flex;
flex-direction:column;
margin-bottom:22px;
}
/* LABEL */
.form-group label{
font-size:15px;
font-weight:600;
margin-bottom:10px;
color:#072154;
}
/* INPUT */
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:16px 18px;
font-size:15px;
border:1px solid #d9e2ec;
border-radius:10px;
background:#ffffff;
outline:none;
transition:.3s;
}
/* TEXTAREA */
.form-group textarea{
resize:none;
}
/* FOCUS */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#F4B223;
box-shadow:
0 0 0 4px rgba(244,178,35,.15);
}
/* PLACEHOLDER */
::placeholder{
color:#94a3b8;
}
/* BUTTON */
.submit-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
padding:18px;
background:#072154;
color:#ffffff;
border:none;
border-radius:10px;
font-size:17px;
font-weight:600;
cursor:pointer;
transition:.35s;
}
/* BUTTON HOVER */
.submit-btn:hover{
background:#F4B223;
color:#072154;
transform:translateY(-2px);
box-shadow:
0 10px 25px rgba(244,178,35,.35);
}
/* BUTTON ACTIVE */
.submit-btn:active{
transform:scale(.98);
}
/* SELECT */
select{
cursor:pointer;
}
/* FORM SHADOW */
.krr-form-container:hover{
box-shadow:
0 20px 55px rgba(0,0,0,.10);
transition:.4s;
}
/*==========================================
KRR HIGH SCHOOL
ADMISSION FORM
PART 3 - RESPONSIVE + ANIMATIONS
==========================================*/
/* ---------- Animation ---------- */
.admission-header{
animation:fadeDown .9s ease;
}
.krr-form-container{
animation:fadeUp 1s ease;
}
.form-group{
animation:fadeIn .8s ease;
}
@keyframes fadeDown{
from{
opacity:0;
transform:translateY(-40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
/* ---------- Input Hover ---------- */
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{
border-color:#072154;
}
/* ---------- Smooth ---------- */
.form-group input,
.form-group select,
.form-group textarea,
.submit-btn{
transition:.35s ease;
}
/* ---------- Card Hover ---------- */
.krr-form-container:hover{
transform:translateY(-5px);
}
/*==========================================
TABLET
==========================================*/
@media(max-width:1024px){
.krr-admission-section{
padding:70px 20px;
}
.krr-form-container{
padding:35px;
}
.admission-header h2{
font-size:34px;
}
.admission-header p{
font-size:16px;
}
}
/*==========================================
MOBILE
==========================================*/
@media(max-width:768px){
.form-row{
grid-template-columns:1fr;
gap:0;
}
.krr-form-container{
padding:25px;
border-radius:15px;
}
.admission-header{
margin-bottom:35px;
}
.admission-header h2{
font-size:28px;
line-height:1.3;
}
.admission-header p{
font-size:15px;
line-height:1.8;
}
.form-group label{
font-size:14px;
}
.form-group input,
.form-group select,
.form-group textarea{
padding:15px;
font-size:15px;
}
.submit-btn{
padding:16px;
font-size:16px;
}
}
/*==========================================
SMALL MOBILE
==========================================*/
@media(max-width:480px){
.krr-admission-section{
padding:60px 15px;
}
.krr-form-container{
padding:20px;
}
.admission-badge{
font-size:12px;
padding:7px 18px;
}
.admission-header h2{
font-size:24px;
}
.admission-header p{
font-size:14px;
}
.form-group{
margin-bottom:18px;
}
.submit-btn{
font-size:15px;
padding:15px;
}
}
/*==========================================
LARGE DESKTOP
==========================================*/
@media(min-width:1600px){
.krr-form-container{
max-width:1100px;
}
.admission-header h2{
font-size:48px;
}
}
#studentClass{
color:#072154;
font-weight:500;
}
/*==========================================
KRR HIGH SCHOOL
PREMIUM SUCCESS POPUP
==========================================*/
.success-popup{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.35s ease;
z-index:9999;
}
.success-popup.show{
opacity:1;
visibility:visible;
}
.popup-box{
width:90%;
max-width:420px;
background:#ffffff;
border-radius:18px;
padding:40px 30px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,.25);
transform:scale(.8);
transition:.35s ease;
}
.success-popup.show .popup-box{
transform:scale(1);
}
.success-icon{
width:90px;
height:90px;
margin:0 auto 20px;
}
.success-icon svg{
width:100%;
height:100%;
}
.success-circle{
stroke:#22c55e;
stroke-width:2;
stroke-dasharray:166;
stroke-dashoffset:166;
animation:drawCircle .8s ease forwards;
}
.success-check{
stroke:#22c55e;
stroke-width:4;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:48;
stroke-dashoffset:48;
animation:drawCheck .45s ease .75s forwards;
}
.popup-box h3{
font-size:28px;
color:#072154;
margin-bottom:15px;
}
.popup-box p{
font-size:16px;
line-height:1.8;
color:#64748b;
}
.popup-box strong{
color:#072154;
}
@keyframes drawCircle{
to{
stroke-dashoffset:0;
}
}
@keyframes drawCheck{
to{
stroke-dashoffset:0;
}
}
@media(max-width:768px){
.popup-box{
padding:30px 22px;
}
.popup-box h3{
font-size:22px;
}
.popup-box p{
font-size:15px;
}
.success-icon{
width:75px;
height:75px;
}
}
#studentClass{
width:100%;
height:56px;
padding:0 18px;
background:#fff;
color:#072154 !important;
font-size:15px;
font-weight:500;
border:1px solid #d9e2ec;
border-radius:10px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23072154' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 18px center;
background-size:14px;
}
/*==========================================
SUBMIT BUTTON LOADER
==========================================*/
.submit-btn.loading{
pointer-events:none;
opacity:.95;
}
.submit-btn .loader{
width:18px;
height:18px;
border:2px solid rgba(255,255,255,.4);
border-top:2px solid #ffffff;
border-radius:50%;
display:inline-block;
margin-right:10px;
animation:spin .8s linear infinite;
}
@keyframes spin{
100%{
transform:rotate(360deg);
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3decb9d *//*==========================================
KRR HIGH SCHOOL
ADMISSION PROCESS
PART 1
==========================================*/
.krr-admission-process{
padding:100px 20px;
background:#f8fbff;
overflow:hidden;
}
/*==========================================
HEADER
==========================================*/
.process-header{
max-width:760px;
margin:0 auto 45px;
text-align:center;
}
.process-badge{
display:inline-block;
padding:8px 22px;
background:#fff7e6;
border:1px solid #F4B223;
color:#d18a00;
border-radius:40px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}
.process-header h2{
font-size:42px;
color:#072154;
font-weight:700;
margin-bottom:18px;
}
.process-header p{
font-size:17px;
color:#64748b;
line-height:1.8;
}
/*==========================================
LIVE ADMISSION TICKER
==========================================*/
.admission-ticker{
display:flex;
align-items:center;
width:100%;
max-width:1200px;
margin:0 auto 60px;
background:#ffffff;
border-radius:16px;
overflow:hidden;
border:1px solid #e6edf5;
box-shadow:0 15px 45px rgba(7,33,84,.08);
}
/*==========================================
LEFT LABEL
==========================================*/
.ticker-label{
min-width:240px;
background:linear-gradient(135deg,#072154,#0b4ca8);
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px 25px;
font-size:15px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
}
/*==========================================
LIVE DOT
==========================================*/
.live-dot{
width:10px;
height:10px;
background:#ff3b30;
border-radius:50%;
animation:livePulse 1s infinite;
}
@keyframes livePulse{
0%,100%{
transform:scale(1);
opacity:1;
}
50%{
transform:scale(1.6);
opacity:.4;
}
}
/*==========================================
RIGHT CONTENT
==========================================*/
.ticker-content{
flex:1;
overflow:hidden;
background:#ffffff;
}
/*==========================================
SCROLL TRACK
==========================================*/
.ticker-track{
display:flex;
align-items:center;
gap:35px;
width:max-content;
white-space:nowrap;
padding:18px 0;
animation:krrTicker 28s linear infinite;
}
.ticker-track span{
font-size:15px;
font-weight:600;
color:#072154;
}
.ticker-track strong{
color:#F4B223;
}
.divider{
color:#F4B223;
font-size:20px;
}
@keyframes krrTicker{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}
/*==========================================
PROCESS GRID
==========================================*/
.process-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
/*==========================================
KRR HIGH SCHOOL
ADMISSION PROCESS
PART 2
==========================================*/
/*==========================================
PROCESS CARD
==========================================*/
.process-card{
position:relative;
background:#ffffff;
padding:35px 28px;
border-radius:18px;
text-align:center;
border:1px solid #edf2f7;
box-shadow:0 15px 35px rgba(0,0,0,.06);
transition:all .35s ease;
overflow:hidden;
}
/* Top Border Animation */
.process-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:0;
height:4px;
background:#F4B223;
transition:.4s;
}
.process-card:hover::before{
width:100%;
}
/* Hover */
.process-card:hover{
transform:translateY(-12px);
border-color:#F4B223;
box-shadow:0 22px 45px rgba(7,33,84,.15);
}
/*==========================================
STEP NUMBER
==========================================*/
.step-number{
position:absolute;
top:18px;
right:20px;
font-size:42px;
font-weight:700;
color:rgba(7,33,84,.07);
user-select:none;
}
/*==========================================
ICON
==========================================*/
.process-icon{
width:85px;
height:85px;
margin:0 auto 25px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#072154;
color:#ffffff;
font-size:34px;
transition:.4s ease;
}
.process-card:hover .process-icon{
background:#F4B223;
color:#072154;
transform:rotate(10deg) scale(1.08);
}
/*==========================================
TITLE
==========================================*/
.process-card h3{
font-size:22px;
color:#072154;
margin-bottom:15px;
font-weight:700;
}
/*==========================================
DESCRIPTION
==========================================*/
.process-card p{
font-size:15px;
color:#64748b;
line-height:1.8;
}
/*==========================================
SCROLL ANIMATION
==========================================*/
.reveal{
opacity:0;
transform:translateY(70px);
transition:all .8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
.process-card:nth-child(1){
transition-delay:.10s;
}
.process-card:nth-child(2){
transition-delay:.25s;
}
.process-card:nth-child(3){
transition-delay:.40s;
}
.process-card:nth-child(4){
transition-delay:.55s;
}
/*==========================================
TABLET
==========================================*/
@media(max-width:1024px){
.process-grid{
grid-template-columns:repeat(2,1fr);
}
.process-header h2{
font-size:34px;
}
}
/*==========================================
MOBILE
==========================================*/
@media(max-width:768px){
.krr-admission-process{
padding:70px 20px;
}
.process-grid{
grid-template-columns:1fr;
gap:22px;
}
.process-header{
margin-bottom:35px;
}
.process-header h2{
font-size:28px;
line-height:1.4;
}
.process-header p{
font-size:15px;
}
.process-card{
padding:30px 24px;
}
.process-icon{
width:75px;
height:75px;
font-size:30px;
}
.process-card h3{
font-size:20px;
}
}
/*==========================================
SMALL MOBILE
==========================================*/
@media(max-width:480px){
.process-header h2{
font-size:24px;
}
.process-badge{
font-size:12px;
padding:7px 18px;
}
.process-card{
padding:25px 20px;
}
.process-icon{
width:68px;
height:68px;
font-size:28px;
}
.process-card p{
font-size:14px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-137b370 *//*==========================================
WHY CHOOSE KRR HIGH SCHOOL
PREMIUM CORPORATE CSS
==========================================*/
.why-krr{
padding:100px 20px;
background:#ffffff;
}
.why-header{
max-width:760px;
margin:0 auto 60px;
text-align:center;
}
.why-badge{
display:inline-block;
padding:8px 22px;
background:#FFF7E8;
color:#D18B00;
border:1px solid #F4B223;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}
.why-header h2{
font-size:42px;
color:#072154;
margin-bottom:18px;
font-weight:700;
}
.why-header p{
font-size:17px;
line-height:1.8;
color:#64748B;
}
/*==========================================
GRID
==========================================*/
.why-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
/*==========================================
CARD
==========================================*/
.why-card{
background:#ffffff;
border-radius:18px;
padding:35px 25px;
text-align:center;
border:1px solid #e8edf5;
box-shadow:0 15px 35px rgba(7,33,84,.06);
transition:.35s;
position:relative;
overflow:hidden;
}
.why-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#F4B223;
transform:scaleX(0);
transform-origin:left;
transition:.35s;
}
.why-card:hover::before{
transform:scaleX(1);
}
.why-card:hover{
transform:translateY(-12px);
border-color:#F4B223;
box-shadow:0 25px 45px rgba(7,33,84,.15);
}
/*==========================================
ICON
==========================================*/
.why-icon{
width:85px;
height:85px;
margin:0 auto 25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
background:#072154;
color:#ffffff;
transition:.35s;
}
.why-card:hover .why-icon{
background:#F4B223;
color:#072154;
transform:rotate(8deg) scale(1.08);
}
/*==========================================
TITLE
==========================================*/
.why-card h3{
font-size:22px;
color:#072154;
margin-bottom:15px;
font-weight:700;
}
/*==========================================
TEXT
==========================================*/
.why-card p{
font-size:15px;
line-height:1.8;
color:#64748B;
}
/*==========================================
SCROLL ANIMATION
==========================================*/
.why-card{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.why-card.active{
opacity:1;
transform:translateY(0);
}
.why-card:nth-child(1){transition-delay:.1s;}
.why-card:nth-child(2){transition-delay:.2s;}
.why-card:nth-child(3){transition-delay:.3s;}
.why-card:nth-child(4){transition-delay:.4s;}
.why-card:nth-child(5){transition-delay:.5s;}
.why-card:nth-child(6){transition-delay:.6s;}
.why-card:nth-child(7){transition-delay:.7s;}
.why-card:nth-child(8){transition-delay:.8s;}
/*==========================================
TABLET
==========================================*/
@media(max-width:1024px){
.why-grid{
grid-template-columns:repeat(2,1fr);
}
.why-header h2{
font-size:34px;
}
}
/*==========================================
MOBILE
==========================================*/
@media(max-width:768px){
.why-krr{
padding:70px 20px;
}
.why-grid{
grid-template-columns:1fr;
gap:22px;
}
.why-header{
margin-bottom:40px;
}
.why-header h2{
font-size:28px;
line-height:1.4;
}
.why-header p{
font-size:15px;
}
.why-card{
padding:30px 22px;
}
.why-icon{
width:75px;
height:75px;
font-size:30px;
}
.why-card h3{
font-size:20px;
}
}
@media(max-width:480px){
.why-header h2{
font-size:24px;
}
.why-badge{
font-size:12px;
padding:7px 18px;
}
.why-card{
padding:25px 20px;
}
.why-icon{
width:68px;
height:68px;
font-size:28px;
}
.why-card p{
font-size:14px;
}
}
/*==========================================
PREMIUM GLASS EFFECT
==========================================*/
.why-card{
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
background:rgba(255,255,255,.96);
}
/*==========================================
FLOATING GOLD GLOW
==========================================*/
.why-card::after{
content:"";
position:absolute;
width:180px;
height:180px;
background:radial-gradient(circle,
rgba(244,178,35,.18),
transparent 70%);
top:-90px;
right:-90px;
transition:.45s;
opacity:0;
}
.why-card:hover::after{
opacity:1;
transform:scale(1.2);
}
/*==========================================
PREMIUM HOVER
==========================================*/
.why-card:hover{
transform:translateY(-14px) scale(1.02);
}
/*==========================================
ICON SHADOW
==========================================*/
.why-icon{
box-shadow:0 10px 25px rgba(7,33,84,.18);
}
.why-card:hover .why-icon{
box-shadow:0 18px 35px rgba(244,178,35,.45);
}
/*==========================================
TITLE ANIMATION
==========================================*/
.why-card h3{
transition:.35s;
}
.why-card:hover h3{
color:#F4B223;
}
/*==========================================
TEXT ANIMATION
==========================================*/
.why-card p{
transition:.35s;
}
.why-card:hover p{
color:#475569;
}
/*==========================================
STAGGER EFFECT
==========================================*/
.why-card:nth-child(odd){
margin-top:20px;
}
@media(max-width:1024px){
.why-card:nth-child(odd){
margin-top:0;
}
}
/*==========================================
PREMIUM BORDER
==========================================*/
.why-card{
border:1px solid rgba(244,178,35,.15);
}
.why-card:hover{
border-color:#F4B223;
}
/*==========================================
COUNTER SECTION
==========================================*/
.krr-counter-section{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
max-width:1200px;
margin:0 auto 70px;
}
.counter-box{
background:#fff;
border-radius:18px;
padding:35px;
text-align:center;
border:1px solid rgba(244,178,35,.15);
box-shadow:0 15px 40px rgba(7,33,84,.07);
transition:.4s;
position:relative;
overflow:hidden;
}
.counter-box::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#F4B223;
transform:scaleX(0);
transition:.4s;
}
.counter-box:hover::before{
transform:scaleX(1);
}
.counter-box:hover{
transform:translateY(-12px);
box-shadow:0 25px 50px rgba(7,33,84,.15);
}
.counter-number{
font-size:48px;
font-weight:700;
color:#072154;
margin-bottom:10px;
}
.counter-box h4{
font-size:18px;
color:#64748b;
font-weight:600;
}
@media(max-width:1024px){
.krr-counter-section{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.krr-counter-section{
grid-template-columns:1fr;
}
.counter-number{
font-size:38px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c9171ae *//*==========================================
REQUIRED DOCUMENTS
PREMIUM CORPORATE CSS
==========================================*/
.required-documents{
padding:100px 20px;
background:#f8fbff;
overflow:hidden;
}
/*==========================================
HEADER
==========================================*/
.documents-header{
max-width:760px;
margin:0 auto 60px;
text-align:center;
}
.documents-badge{
display:inline-block;
padding:8px 22px;
background:#FFF7E8;
border:1px solid #F4B223;
color:#D18B00;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}
.documents-header h2{
font-size:42px;
color:#072154;
font-weight:700;
margin-bottom:18px;
}
.documents-header p{
font-size:17px;
color:#64748B;
line-height:1.8;
}
/*==========================================
GRID
==========================================*/
.documents-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
/*==========================================
CARD
==========================================*/
.document-card{
position:relative;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(244,178,35,.15);
border-radius:18px;
padding:35px 25px;
text-align:center;
overflow:hidden;
transition:.4s;
box-shadow:0 15px 35px rgba(7,33,84,.06);
}
/* Gold Top Border */
.document-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#F4B223;
transform:scaleX(0);
transform-origin:left;
transition:.4s;
}
.document-card:hover::before{
transform:scaleX(1);
}
/* Floating Glow */
.document-card::after{
content:"";
position:absolute;
width:170px;
height:170px;
top:-80px;
right:-80px;
border-radius:50%;
background:radial-gradient(circle,
rgba(244,178,35,.18),
transparent 70%);
opacity:0;
transition:.4s;
}
.document-card:hover::after{
opacity:1;
transform:scale(1.2);
}
/* Hover */
.document-card:hover{
transform:translateY(-12px);
border-color:#F4B223;
box-shadow:0 25px 45px rgba(7,33,84,.15);
}
/*==========================================
ICON
==========================================*/
.document-icon{
width:85px;
height:85px;
margin:0 auto 25px;
border-radius:50%;
background:#072154;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
transition:.4s;
box-shadow:0 12px 28px rgba(7,33,84,.18);
}
.document-card:hover .document-icon{
background:#F4B223;
color:#072154;
transform:rotate(8deg) scale(1.08);
box-shadow:0 18px 35px rgba(244,178,35,.45);
}
/*==========================================
TITLE
==========================================*/
.document-card h3{
font-size:22px;
color:#072154;
margin-bottom:15px;
font-weight:700;
transition:.3s;
}
.document-card:hover h3{
color:#F4B223;
}
/*==========================================
TEXT
==========================================*/
.document-card p{
font-size:15px;
color:#64748B;
line-height:1.8;
transition:.3s;
}
.document-card:hover p{
color:#475569;
}
/*==========================================
IMPORTANT CARD
==========================================*/
.important-card{
background:linear-gradient(135deg,#072154,#0d3f87);
}
.important-card h3,
.important-card p{
color:#ffffff;
}
.important-card .document-icon{
background:#F4B223;
color:#072154;
}
/*==========================================
REVEAL ANIMATION
==========================================*/
.document-card{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.document-card.active{
opacity:1;
transform:translateY(0);
}
.document-card:nth-child(1){transition-delay:.1s;}
.document-card:nth-child(2){transition-delay:.2s;}
.document-card:nth-child(3){transition-delay:.3s;}
.document-card:nth-child(4){transition-delay:.4s;}
.document-card:nth-child(5){transition-delay:.5s;}
.document-card:nth-child(6){transition-delay:.6s;}
.document-card:nth-child(7){transition-delay:.7s;}
.document-card:nth-child(8){transition-delay:.8s;}
/*==========================================
TABLET
==========================================*/
@media(max-width:1024px){
.documents-grid{
grid-template-columns:repeat(2,1fr);
}
.documents-header h2{
font-size:34px;
}
}
/*==========================================
MOBILE
==========================================*/
@media(max-width:768px){
.required-documents{
padding:70px 20px;
}
.documents-grid{
grid-template-columns:1fr;
gap:22px;
}
.documents-header{
margin-bottom:40px;
}
.documents-header h2{
font-size:28px;
line-height:1.4;
}
.documents-header p{
font-size:15px;
}
.document-card{
padding:30px 22px;
}
.document-icon{
width:75px;
height:75px;
font-size:30px;
}
.document-card h3{
font-size:20px;
}
}
@media(max-width:480px){
.documents-header h2{
font-size:24px;
}
.documents-badge{
font-size:12px;
padding:7px 18px;
}
.document-card{
padding:25px 20px;
}
.document-icon{
width:68px;
height:68px;
font-size:28px;
}
.document-card p{
font-size:14px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-066ae43 *//*==========================================
KRR FINAL CTA
PREMIUM CORPORATE CSS
==========================================*/
.krr-final-cta{
position:relative;
padding:110px 20px;
background:linear-gradient(135deg,#072154,#0b4ca8);
overflow:hidden;
}
/* Floating Shapes */
.krr-final-cta::before{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-120px;
left:-120px;
}
.krr-final-cta::after{
content:"";
position:absolute;
width:260px;
height:260px;
background:rgba(244,178,35,.12);
border-radius:50%;
bottom:-80px;
right:-80px;
}
/*==========================================*/
.cta-container{
max-width:1200px;
margin:auto;
text-align:center;
position:relative;
z-index:2;
}
/* Badge */
.cta-badge{
display:inline-block;
padding:10px 24px;
background:rgba(244,178,35,.18);
border:1px solid #F4B223;
color:#FFD76A;
border-radius:40px;
font-size:14px;
font-weight:600;
margin-bottom:25px;
}
/* Heading */
.cta-container h2{
font-size:48px;
color:#ffffff;
font-weight:700;
margin-bottom:20px;
line-height:1.3;
}
.cta-container h2 span{
color:#F4B223;
}
/* Description */
.cta-container p{
max-width:760px;
margin:0 auto 40px;
color:#dbe7ff;
font-size:18px;
line-height:1.8;
}
/*==========================================
BUTTONS
==========================================*/
.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:70px;
}
.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 36px;
border-radius:50px;
font-size:17px;
font-weight:600;
text-decoration:none;
transition:.35s;
}
.call-btn{
background:#F4B223;
color:#072154;
}
.call-btn:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(244,178,35,.35);
}
.whatsapp-btn{
background:#25D366;
color:#ffffff;
}
.whatsapp-btn:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(37,211,102,.35);
}
/*==========================================
INFO CARDS
==========================================*/
.cta-info{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.info-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:30px;
display:flex;
gap:20px;
align-items:flex-start;
text-align:left;
transition:.35s;
}
.info-card:hover{
transform:translateY(-8px);
border-color:#F4B223;
background:rgba(255,255,255,.12);
}
.info-icon{
width:65px;
height:65px;
flex-shrink:0;
border-radius:50%;
background:#F4B223;
color:#072154;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}
.info-card h4{
color:#ffffff;
margin-bottom:10px;
font-size:20px;
}
.info-card p{
margin:0;
color:#dbe7ff;
font-size:15px;
line-height:1.7;
}
/*==========================================
RESPONSIVE
==========================================*/
@media(max-width:1024px){
.cta-container h2{
font-size:38px;
}
.cta-info{
grid-template-columns:1fr;
}
}
@media(max-width:768px){
.krr-final-cta{
padding:80px 20px;
}
.cta-container h2{
font-size:30px;
}
.cta-container p{
font-size:16px;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
.cta-btn{
width:100%;
max-width:320px;
}
.info-card{
padding:24px;
}
}
@media(max-width:480px){
.cta-container h2{
font-size:26px;
}
.cta-badge{
font-size:12px;
padding:8px 18px;
}
.info-icon{
width:55px;
height:55px;
font-size:24px;
}
.info-card h4{
font-size:18px;
}
.info-card p{
font-size:14px;
}
}/* End custom CSS */