/* ===========================
   GOOGLE FONTS
=========================== */

:root{

--primary:#005EB8;
--secondary:#0B1F3A;
--gold:#D4AF37;
--white:#ffffff;
--light:#f7f9fc;
--text:#555555;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
color:var(--text);
overflow-x:hidden;

}

h1,h2,h3,h4,h5{

font-family:'Cormorant Garamond',serif;
font-weight:700;
color:var(--secondary);

}

section{

padding:100px 0;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

/*-----Website Starts Here----*/

/*=========================
        NAVBAR
=========================*/

.custom-navbar{

padding:18px 0;
transition:.4s;
background:rgba(0,0,0,.15);
backdrop-filter:blur(15px);

}

.custom-navbar.scrolled{

background:#ffffff;
box-shadow:0 5px 25px rgba(0,0,0,.08);

}

.logo{

height:4em;

}

.brand-text{

font-size:28px;
font-family:'Cormorant Garamond',serif;
font-weight:700;
color:#fff;

}

.custom-navbar.scrolled .brand-text{

color:var(--secondary);

}

.nav-link{

margin-left:20px;
font-weight:500;
color:#fff;
position:relative;
transition:.3s;

}

.custom-navbar.scrolled .nav-link{

color:var(--secondary);

}

.nav-link::after{

content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:var(--gold);
transition:.4s;

}

.nav-link:hover::after,
.nav-link.active::after{

width:100%;

}

.nav-link:hover{

color:var(--gold);

}

.appl-btn{

padding:12px 28px;
background:linear-gradient(45deg,#005EB8,#0B1F3A);
border-radius:50px;
color:#fff;
font-weight:600;
transition:.4s;

}

.appl-btn:hover{

background:var(--gold);
color:#0B1F3A;

}

.navbar-toggler{

font-size:28px;
color:#fff;

}

.custom-navbar.scrolled .navbar-toggler{

color:#004dab;

}

/*=========================
        HERO SECTION
=========================*/

.hero{

height:100vh;
position:relative;
margin-top: -6em;
}

.hero-img{

height:100vh;
object-fit:cover;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);

}

.carousel-caption{

bottom:50%;
transform:translateY(50%);
text-align:left;
max-width:700px;

}

.carousel-caption h5{

font-size:24px;
color:var(--gold);
letter-spacing:2px;
margin-bottom:15px;

}

.carousel-caption h1{

font-size:68px;
line-height:1.1;
color:#fff;
margin-bottom:20px;

}

.carousel-caption p{

font-size:18px;
line-height:1.8;
color:#f5f5f5;
margin-bottom:30px;

}

.hero-btn{

display:inline-block;
padding:15px 35px;
background:linear-gradient(45deg,#005EB8,#0B1F3A);
border-radius:50px;
color:#fff;
font-weight:600;
transition:.4s;

}

.hero-btn:hover{

background:var(--gold);
color:#000;

}

/*=========================
      ABOUT SECTION
==========================*/

.about-section{

background:#fff;
margin-top: 4em;
}

.section-tag{

display:inline-block;
padding:8px 20px;
background:#e8f2ff;
color:var(--primary);
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:20px;

}

.section-title{

font-size:50px;
margin-bottom:25px;

}

.about-text{

font-size:17px;
line-height:1.9;
margin-bottom:30px;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:25px;
box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.experience-box{

position:absolute;
bottom:25px;
right:25px;
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
text-align:center;

}

.experience-box h2{

font-size:42px;
color:var(--primary);

}

.about-list{

margin-bottom:35px;

}

.about-item{

margin-bottom:15px;
font-size:17px;
font-weight:500;

}

.about-item i{

color:var(--gold);
margin-right:10px;

}

.about-btn{

display:inline-block;
padding:15px 35px;
background:linear-gradient(45deg,#005EB8,#0B1F3A);
color:#fff;
border-radius:50px;
font-weight:600;
transition:.4s;

}

.about-btn:hover{

background:var(--gold);
color:#000;

}

.counter-box{

background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

}

.counter-box h3{

font-size:42px;
color:var(--primary);

}

.counter-box p{

margin-top:10px;
font-weight:500;

}

/*=========================
      COURSES SECTION
==========================*/

.courses-section{

background:#f8fbff;

}

.course-subtitle{

max-width:700px;
margin:auto;
font-size:17px;

}

.course-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;

}

.course-card:hover{

transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.course-card img{

height:240px;
width:100%;
object-fit:cover;
transition:.5s;

}

.course-card:hover img{

transform:scale(1.08);

}

.course-content{

padding:25px;

}

.course-content h4{

margin-bottom:15px;
font-size:30px;

}

.course-content p{

line-height:1.8;
margin-bottom:20px;

}

.course-content span{

display:inline-block;
padding:8px 18px;
background:#eef5ff;
color:var(--primary);
border-radius:30px;
font-weight:600;

}

/*=========================
      TRAINERS SECTION
==========================*/

.trainers-section{

background:#ffffff;

}

.trainer-card{

background:#fff;
border-radius:20px;
overflow:hidden;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;

}

.trainer-card:hover{

transform:translateY(-10px);

}

.trainer-card img{

width:100%;
height:320px;
object-fit:cover;

}

.trainer-content{

padding:25px;

}

.trainer-content h4{

font-size:30px;
margin-bottom:8px;

}

.trainer-content span{

display:block;
color:var(--primary);
font-weight:600;
margin-bottom:15px;

}

.trainer-content p{

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

}

.trainer-social{

margin-top:20px;

}

.trainer-social a{

width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#eef5ff;
color:var(--primary);
border-radius:50%;
margin:5px;
transition:.4s;

}

.trainer-social a:hover{

background:var(--primary);
color:#fff;

}

/*=========================
       EVENTS SECTION
==========================*/

.events-section{

background:#f8fbff;

}

.event-box{

background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.event-image{

height:350px;
width:100%;
object-fit:cover;
transition:.5s;

}

.event-image:hover{

transform:scale(1.03);

}

.event-content{

padding:20px;

}

.event-date{

display:inline-block;
padding:8px 18px;
background:#eef5ff;
color:var(--primary);
border-radius:30px;
font-weight:600;
margin-bottom:18px;

}

.event-content h3{

font-size:38px;
margin-bottom:20px;

}

.event-content p{

line-height:1.9;
font-size:16px;

}

/*=========================
      GALLERY SECTION
==========================*/

.gallery-section{

background:#ffffff;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:280px;

object-fit:cover;

transition:.6s;

}

.gallery-item.tall img{

height:580px;

}

.gallery-item.wide{

grid-column:span 2;

}

.gallery-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,94,184,.65);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.5s;

}

.gallery-overlay i{

font-size:40px;

color:#fff;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

/*=========================
      CONTACT SECTION
==========================*/

.contact-section{

background:#f8fbff;

}

.contact-info{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

height:100%;

}

.info-box{

display:flex;

align-items:flex-start;

margin-bottom:30px;

}

.info-box:last-child{

margin-bottom:0;

}

.info-box i{

width:60px;

height:60px;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:22px;

margin-right:20px;

}

.info-box h5{

margin-bottom:8px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.form-control{

padding:15px;

border-radius:12px;

border:1px solid #ddd;

box-shadow:none;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:none;

}

.send-btn{

padding:15px 40px;

background:linear-gradient(45deg,#005EB8,#0B1F3A);

border:none;

border-radius:50px;

color:#fff;

font-weight:600;

transition:.4s;

}

.send-btn:hover{

background:var(--gold);

color:#000;

}

.map-area iframe{

width:100%;

height:450px;

border:none;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/*=========================
         FOOTER
==========================*/

.footer{

background:#0B1F3A;

color:#fff;

padding:80px 0 30px;

}

.footer-logo{

color:#fff;

font-size:38px;

margin-bottom:20px;

}

.footer-text{

line-height:1.9;

color:#ddd;

}

.footer h4{

color:#fff;

margin-bottom:25px;

font-size:24px;

}

.footer-links{

padding:0;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:#ddd;

transition:.3s;

}

.footer-links a:hover{

color:var(--gold);

padding-left:8px;

}

.footer-contact{

padding:0;

}

.footer-contact li{

margin-bottom:15px;

color:#ddd;

}

.footer-contact i{

color:var(--gold);

margin-right:10px;

}

.footer-social{

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

display:inline-flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(255,255,255,.08);

color:#fff;

margin-right:10px;

transition:.4s;

}

.footer-social a:hover{

background:var(--gold);

color:#000;

transform:translateY(-5px);

}

.footer hr{

margin:50px 0 25px;

border-color:rgba(255,255,255,.15);

}

.footer-bottom{

text-align:center;

}

.footer-bottom p{

margin:0;

color:#bbb;

}

/*=========================
     BACK TO TOP
==========================*/

.top-btn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

background:var(--primary);

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.2);

transition:.4s;

z-index:999;

}

.top-btn:hover{

background:var(--gold);

color:#000;

transform:translateY(-6px);

}

/*=========================
        LOADER
==========================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#ffffff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.8s;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:7px solid #e5e5e5;

border-top:7px solid var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================
    SCROLL PROGRESS BAR
==========================*/

#progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(to right,#005EB8,#D4AF37);

z-index:999999;

}

/*=========================
    BACK TO TOP
==========================*/

.top-btn{

opacity:0;

visibility:hidden;

}

.top-btn.show{

opacity:1;

visibility:visible;

}

/*=========================
    FLOAT ANIMATION
==========================*/

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

.experience-box{

animation:floating 3s ease-in-out infinite;

}

.hero-btn{

animation:floating 4s ease-in-out infinite;

}

/*=========================
    PREMIUM CARD EFFECT
==========================*/

.course-card,
.trainer-card,
.counter-box,
.event-box{

transition:.5s;

}

.course-card:hover,
.trainer-card:hover,
.counter-box:hover,
.event-box:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,94,184,.18);

}

/*=========================
      HERO ANIMATION
==========================*/

.carousel-caption h5{

animation:fadeTop 1s;

}

.carousel-caption h1{

animation:fadeLeft 1.2s;

}

.carousel-caption p{

animation:fadeRight 1.4s;

}

.hero-btn{

animation:fadeBottom 1.6s;

}

@keyframes fadeTop{

from{

opacity:0;

transform:translateY(-50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeBottom{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.gallery-item img,
.course-card img,
.trainer-card img{

transition:.7s;

}

.gallery-item:hover img,
.course-card:hover img,
.trainer-card:hover img{

transform:scale(1.08) rotate(1deg);

}

/*=========================
      RIPPLE EFFECT
==========================*/

.gallery-item{

position:relative;

overflow:hidden;

}

.gallery-item::before{

content:"";

position:absolute;

width:20px;

height:20px;

background:rgba(255,255,255,.35);

border-radius:50%;

transform:scale(0);

opacity:0;

pointer-events:none;

transition:transform .6s,opacity .6s;

}

.gallery-item:hover::before{

transform:scale(20);

opacity:1;

}

.hero-btn,
.about-btn,
.send-btn,
.apply-btn{

position:relative;

overflow:hidden;

}

.hero-btn::before,
.about-btn::before,
.send-btn::before,
.apply-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:rgba(255,255,255,.25);

transition:.5s;

}

.hero-btn:hover::before,
.about-btn:hover::before,
.send-btn:hover::before,
.apply-btn:hover::before{

left:100%;

}

.gallery-item img{

transition:.8s;

}

.gallery-item:hover img{

transform:scale(1.1);

filter:brightness(.75);

}

section{

position:relative;

}

section::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:120px;

height:3px;

background:linear-gradient(to right,#005EB8,#D4AF37);

opacity:.15;

}