/* Start custom CSS for html, class: .elementor-element-ec071a1 *//* =========================
KRR CONTACT HERO
========================= */

.krr-contact-hero{

position:relative;
height:430px;
overflow:hidden;
background:#071d49;

}

.hero-bg{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:url("https://krrhighschool.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-28-2026-06_19_13-PM.png") center center/cover no-repeat;

z-index:1;

}

.hero-overlay{

position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(5,23,64,.70) 0%,
rgba(5,23,64,.45) 35%,
rgba(5,23,64,.10) 100%
);

z-index:2;

}

.hero-container{

position:relative;
z-index:5;

max-width:1200px;
height:100%;

margin:auto;

display:flex;
align-items:center;

padding:0 40px;

}

.hero-content{

max-width:430px;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

background:#F3A417;

color:#fff;

border-radius:40px;

font-size:14px;
font-weight:700;
letter-spacing:1px;

margin-bottom:25px;

}

.hero-description{

font-size:19px;
line-height:1.9;
color:#fff;

margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.hero-btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:15px 34px;

border-radius:50px;

text-decoration:none;

font-weight:600;
font-size:16px;

transition:.35s ease;

}

.hero-primary{

background:#25D366;

color:#fff;

}

.hero-primary:hover{

background:#1EBE5D;

transform:translateY(-4px);

}

.hero-outline{

border:2px solid #fff;

color:#fff;

}

.hero-outline:hover{

background:#fff;

color:#071d49;

transform:translateY(-4px);

}

/* =========================
TABLET
========================= */

@media(max-width:1024px){

.krr-contact-hero{

height:360px;

}

.hero-description{

font-size:17px;

}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.krr-contact-hero{

height:320px;

}

.hero-container{

padding:0 20px;

}

.hero-content{

max-width:100%;

}

.hero-badge{

font-size:12px;
padding:9px 18px;

}

.hero-description{

font-size:15px;
line-height:1.7;

margin-bottom:22px;

}

.hero-buttons{

flex-direction:column;
gap:12px;

}

.hero-btn{

width:220px;

}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.krr-contact-hero{

height:290px;

}

.hero-description{

display:none;

}

.hero-buttons{

display:flex;
flex-direction:column;
gap:10px;

}

.hero-btn{

width:200px;
padding:13px 24px;
font-size:15px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b5fc54f *//* ==========================
   KRR HIGH SCHOOL CONTACT
========================== */

.contact-section{
display:flex;
gap:50px;
padding:70px;
background:#f5f8fd;
border-radius:25px;
font-family:'Poppins',sans-serif;
align-items:flex-start;
}

/* LEFT */

.contact-info{
flex:1;
}

.contact-tag{
display:inline-block;
background:#0b4ea2;
color:#fff;
padding:8px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
letter-spacing:.5px;
margin-bottom:18px;
}

.contact-info h2{
font-size:38px;
color:#0b4ea2;
margin-bottom:15px;
font-weight:700;
}

.contact-info p{
color:#666;
line-height:1.8;
margin-bottom:35px;
}

.info-box{
display:flex;
align-items:flex-start;
gap:18px;
padding:22px;
background:#fff;
margin-bottom:18px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.06);
transition:.35s;
border-left:5px solid #0b4ea2;
}

.info-box:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.icon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
background:#0b4ea2;
color:#fff;
border-radius:50%;
}

.info-box h4{
margin:0;
color:#0b4ea2;
font-size:19px;
font-weight:700;
}

.info-box p{
margin:8px 0 0;
line-height:1.7;
color:#555;
font-size:15px;
}

/* RIGHT */

.contact-form{
flex:1;
background:#fff;
padding:45px;
border-radius:22px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.contact-form h2{
font-size:36px;
color:#0b4ea2;
margin-bottom:10px;
font-weight:700;
text-align:center;
}

.contact-form p{
text-align:center;
margin-bottom:30px;
color:#666;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:16px 20px;
margin-bottom:20px;
border:1px solid #ddd;
border-radius:12px;
font-size:16px;
transition:.3s;
background:#fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
outline:none;
border-color:#0b4ea2;
box-shadow:0 0 0 4px rgba(11,78,162,.12);
}

.contact-form textarea{
resize:none;
}

.contact-form button{
width:100%;
padding:18px;
border:none;
border-radius:12px;
background:#0b4ea2;
color:#fff;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.3s;
position:relative;
overflow:hidden;
}

.contact-form button:hover{
background:#083b7f;
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(11,78,162,.35);
}

/* Loading */

.contact-form button.loading{
pointer-events:none;
opacity:.9;
}

.contact-form button.loading::before{
content:"";
width:18px;
height:18px;
border:3px solid rgba(255,255,255,.4);
border-top:3px solid #fff;
border-radius:50%;
display:inline-block;
margin-right:10px;
vertical-align:middle;
animation:spin .8s linear infinite;
}

@keyframes spin{
100%{
transform:rotate(360deg);
}
}

/* Success */

#successMessage{
margin-top:20px;
display:none;
padding:15px;
background:#e8f8ec;
border-left:5px solid #28a745;
border-radius:10px;
color:#198754;
font-weight:600;
text-align:center;
}

/* Responsive */

@media(max-width:992px){

.contact-section{
flex-direction:column;
padding:35px;
}

.contact-info h2,
.contact-form h2{
font-size:30px;
}

.contact-form{
padding:30px;
}

}

@media(max-width:768px){

.contact-section{
padding:20px;
gap:30px;
}

.contact-info h2,
.contact-form h2{
font-size:26px;
}

.contact-form{
padding:22px;
}

.info-box{
padding:18px;
}

.icon{
width:48px;
height:48px;
font-size:22px;
}

.contact-form button{
font-size:17px;
padding:16px;
}

}/* End custom CSS */