/* Start custom CSS for html, class: .elementor-element-8dbfcf6 */.about-hero{
padding:90px 0;
background:linear-gradient(135deg,#0033A0 0%,#0A4ACF 60%,#ffffff 60%);
overflow:hidden;
}
.about-content{
color:#fff;
}
.about-tag{
display:inline-block;
background:#D60000;
padding:10px 20px;
border-radius:50px;
font-size:14px;
font-weight:600;
margin-bottom:25px;
}
.about-tag i{
margin-right:8px;
}
.about-content h1{
font-size:56px;
font-weight:800;
line-height:1.2;
margin-bottom:25px;
}
.about-content h1 span{
color:#FFD54F;
}
.about-content p{
font-size:17px;
line-height:30px;
opacity:.95;
margin-bottom:35px;
}
.about-btn{
display:flex;
gap:18px;
margin-bottom:45px;
flex-wrap:wrap;
}
.btn-primary-custom{
background:#D60000;
color:#fff;
padding:15px 35px;
border-radius:50px;
font-weight:600;
text-decoration:none;
transition:.3s;
}
.btn-primary-custom:hover{
background:#b50000;
color:#fff;
transform:translateY(-4px);
}
.btn-primary-custom i{
margin-left:8px;
}
.btn-outline-custom{
border:2px solid #fff;
color:#fff;
padding:15px 35px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.btn-outline-custom:hover{
background:#fff;
color:#0033A0;
}
.hero-counter{
display:flex;
gap:25px;
flex-wrap:wrap;
}
.counter-box{
background:#fff;
padding:20px;
border-radius:15px;
text-align:center;
min-width:150px;
box-shadow:0 15px 30px rgba(0,0,0,.1);
}
.counter-box h3{
color:#0033A0;
font-size:32px;
font-weight:800;
margin-bottom:5px;
}
.counter-box span{
color:#666;
font-size:14px;
font-weight:500;
}
.about-image{
text-align:center;
}
.about-image img{
width:100%;
max-width:480px;
animation:float 4s ease-in-out infinite;
}
@keyframes float{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-15px);
}
100%{
transform:translateY(0px);
}
}
@media(max-width:991px){
.about-hero{
background:#0033A0;
padding:70px 0;
text-align:center;
}
.about-content h1{
font-size:42px;
}
.about-btn{
justify-content:center;
}
.hero-counter{
justify-content:center;
margin-bottom:40px;
}
.about-image{
margin-top:20px;
}
}
@media(max-width:576px){
.about-content h1{
font-size:32px;
}
.about-content p{
font-size:15px;
line-height:28px;
}
.btn-primary-custom,
.btn-outline-custom{
width:100%;
text-align:center;
}
.counter-box{
width:100%;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7782ba0 *//*==========================================
ABOUT SECTION CSS
==========================================*/
.about-section{
padding:100px 0;
background:#f8fbff;
position:relative;
overflow:hidden;
}
.about-image{
position:relative;
}
.about-image img{
width:100%;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.12);
transition:.4s;
}
.about-image:hover img{
transform:scale(1.03);
}
.experience-box{
position:absolute;
left:25px;
bottom:25px;
background:#0033A0;
color:#fff;
width:170px;
height:170px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
box-shadow:0 20px 50px rgba(0,51,160,.35);
border:5px solid #fff;
}
.experience-box h2{
font-size:55px;
font-weight:800;
margin-bottom:5px;
color:#fff;
}
.experience-box p{
margin:0;
font-size:16px;
line-height:24px;
font-weight:500;
}
/* Content */
.about-content{
padding-left:40px;
}
.section-tag{
display:inline-flex;
align-items:center;
gap:8px;
background:#D50000;
color:#fff;
padding:10px 22px;
border-radius:50px;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}
.section-tag i{
font-size:14px;
}
.about-content h2{
font-size:45px;
line-height:58px;
font-weight:800;
color:#1f2937;
margin-bottom:25px;
}
.about-content h2 span{
color:#0033A0;
}
.about-content p{
font-size:16px;
color:#555;
line-height:30px;
margin-bottom:18px;
}
/* List */
.about-list{
padding:0;
margin:0;
list-style:none;
}
.about-list li{
margin-bottom:18px;
font-size:16px;
font-weight:500;
color:#333;
}
.about-list li i{
color:#0033A0;
margin-right:10px;
font-size:18px;
}
/* Counter */
.about-counter{
margin-top:40px;
}
.counter-item{
background:#fff;
padding:22px;
text-align:center;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}
.counter-item:hover{
transform:translateY(-8px);
}
.counter-item h3{
color:#0033A0;
font-size:34px;
font-weight:800;
margin-bottom:5px;
}
.counter-item span{
color:#666;
font-size:15px;
font-weight:500;
}
/* Buttons */
.about-btn{
margin-top:40px;
display:flex;
gap:20px;
flex-wrap:wrap;
}
.btn-about-primary{
display:inline-block;
background:#0033A0;
color:#fff;
padding:15px 34px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.btn-about-primary:hover{
background:#D50000;
color:#fff;
transform:translateY(-3px);
}
.btn-about-outline{
display:inline-block;
border:2px solid #0033A0;
color:#0033A0;
padding:15px 34px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.btn-about-outline:hover{
background:#0033A0;
color:#fff;
}
/* Responsive */
@media(max-width:1199px){
.about-content{
padding-left:20px;
}
.about-content h2{
font-size:38px;
line-height:50px;
}
}
@media(max-width:991px){
.about-section{
padding:80px 0;
}
.about-image{
margin-bottom:50px;
}
.about-content{
padding-left:0;
}
.experience-box{
width:150px;
height:150px;
}
.experience-box h2{
font-size:45px;
}
}
@media(max-width:767px){
.about-section{
padding:70px 0;
}
.about-content{
text-align:center;
}
.about-content h2{
font-size:32px;
line-height:44px;
}
.about-content p{
font-size:15px;
line-height:28px;
}
.about-list{
margin-bottom:10px;
}
.about-counter{
row-gap:20px;
}
.about-btn{
justify-content:center;
}
.btn-about-primary,
.btn-about-outline{
width:100%;
text-align:center;
}
.experience-box{
width:120px;
height:120px;
left:15px;
bottom:15px;
}
.experience-box h2{
font-size:34px;
}
.experience-box p{
font-size:13px;
line-height:18px;
}
}
@media(max-width:575px){
.about-content h2{
font-size:28px;
line-height:40px;
}
.section-tag{
font-size:12px;
padding:8px 18px;
}
.counter-item{
padding:18px;
}
.counter-item h3{
font-size:28px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4c5237a *//*=====================================
OUR STORY
=====================================*/
.our-story-section{
padding:100px 0;
background:#fff;
}
.story-image{
position:relative;
}
.story-image img{
width:100%;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.story-badge{
position:absolute;
right:20px;
bottom:20px;
background:#0033A0;
color:#fff;
padding:25px;
border-radius:20px;
text-align:center;
width:170px;
}
.story-badge h2{
font-size:48px;
font-weight:800;
margin-bottom:5px;
}
.story-tag{
display:inline-block;
background:#D50000;
color:#fff;
padding:8px 22px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}
.story-content{
padding-left:40px;
}
.story-content h2{
font-size:44px;
font-weight:800;
line-height:58px;
margin-bottom:20px;
color:#222;
}
.story-content h2 span{
color:#0033A0;
}
.story-content p{
font-size:16px;
line-height:30px;
color:#666;
margin-bottom:20px;
}
.story-btn{
display:inline-block;
padding:15px 35px;
background:#0033A0;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.3s;
}
.story-btn:hover{
background:#D50000;
color:#fff;
}
/*=====================================
MISSION VISION
=====================================*/
.mission-section{
padding:100px 0;
background:#f7f9fc;
}
.section-title{
max-width:750px;
margin:auto;
}
.section-title span{
color:#D50000;
font-weight:700;
letter-spacing:1px;
}
.section-title h2{
font-size:46px;
font-weight:800;
margin:15px 0;
}
.section-title h2 span{
color:#0033A0;
}
.section-title p{
color:#666;
line-height:30px;
}
.mission-card,
.vision-card{
background:#fff;
padding:45px;
border-radius:20px;
text-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}
.mission-card:hover,
.vision-card:hover{
transform:translateY(-10px);
}
.mission-icon,
.vision-icon{
width:90px;
height:90px;
background:#0033A0;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:25px;
}
.vision-icon{
background:#D50000;
}
.mission-icon i,
.vision-icon i{
color:#fff;
font-size:34px;
}
.mission-card h3,
.vision-card h3{
font-size:30px;
font-weight:700;
margin-bottom:20px;
}
.mission-card p,
.vision-card p{
font-size:16px;
line-height:30px;
color:#666;
}
/*======================
Responsive
=======================*/
@media(max-width:991px){
.story-content{
padding-left:0;
margin-top:40px;
}
.story-content h2{
font-size:36px;
line-height:48px;
}
.story-badge{
width:140px;
padding:20px;
}
}
@media(max-width:767px){
.our-story-section,
.mission-section{
padding:70px 0;
}
.story-content{
text-align:center;
}
.story-content h2{
font-size:30px;
line-height:42px;
}
.section-title h2{
font-size:34px;
}
.mission-card,
.vision-card{
margin-bottom:30px;
padding:30px;
}
.story-btn{
width:100%;
text-align:center;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-68bd771 *//*========================================
Working Hours & Student Success Section
========================================*/
.working-events-section{
padding:90px 0;
background:#f7f9fc;
}
/* Section Heading */
.section-subtitle{
display:inline-block;
padding:8px 20px;
background:#e8f1ff;
color:#0d47a1;
font-size:14px;
font-weight:600;
border-radius:30px;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:15px;
}
.section-title{
font-size:42px;
font-weight:700;
color:#16213e;
margin-bottom:20px;
}
.working-events-section p{
color:#666;
line-height:1.8;
font-size:16px;
}
/*========================================
Working Box
========================================*/
.working-box{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
border-top:5px solid #d71920;
height:100%;
}
/*========================================
Time Table
========================================*/
.time-table{
margin-top:35px;
}
.time-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border-radius:12px;
background:#f8fbff;
margin-bottom:15px;
transition:.3s;
border:1px solid #edf2f7;
}
.time-item:hover{
background:#0d47a1;
color:#fff;
transform:translateX(5px);
}
.time-item:hover .time,
.time-item:hover .day{
color:#fff;
}
.day{
font-weight:600;
color:#16213e;
}
.time{
color:#666;
font-weight:500;
}
.closed{
color:#d71920;
font-weight:700;
}
/*========================================
Button
========================================*/
.working-box .btn{
background:#d71920;
border:none;
padding:14px 35px;
border-radius:50px;
font-weight:600;
transition:.3s;
}
.working-box .btn:hover{
background:#0d47a1;
}
/*========================================
Success Cards
========================================*/
.success-card{
background:#fff;
padding:35px 25px;
border-radius:18px;
text-align:center;
height:100%;
transition:.35s;
box-shadow:0 10px 35px rgba(0,0,0,.08);
border:1px solid #edf2f7;
position:relative;
overflow:hidden;
}
.success-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#0d47a1,#d71920);
}
.success-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 45px rgba(0,0,0,.15);
}
/*========================================
Icons
========================================*/
.success-icon{
width:80px;
height:80px;
margin:0 auto 25px;
border-radius:50%;
background:linear-gradient(135deg,#0d47a1,#1976d2);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
transition:.3s;
}
.success-card:hover .success-icon{
transform:rotate(12deg) scale(1.1);
background:linear-gradient(135deg,#d71920,#ff5252);
}
.success-card h5{
font-size:22px;
font-weight:700;
color:#16213e;
margin-bottom:15px;
}
.success-card p{
font-size:15px;
color:#666;
line-height:1.7;
}
/*========================================
Responsive
========================================*/
@media(max-width:991px){
.working-events-section{
padding:70px 0;
}
.section-title{
font-size:34px;
}
.working-box{
margin-bottom:40px;
}
}
@media(max-width:767px){
.working-events-section{
padding:60px 0;
}
.section-title{
font-size:28px;
}
.working-box{
padding:25px;
}
.time-item{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.success-card{
padding:30px 20px;
}
.success-card h5{
font-size:20px;
}
}/* End custom CSS */