@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{ font-size: 15px; overflow-x: hidden; background: var(--bgm); color: var(--white); font-family: "Poppins", sans-serif; letter-spacing: 0px;}
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, :hover, img{ text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
html { scroll-behavior: smooth;}
header{ padding: 20px 0px;}
.container-fluid{padding: 0px 60px;}
.header-appear {position: fixed; width: 100%; top: 0px; z-index: 15; box-shadow: 0px 0px 20px rgb(0 0 0 / 15%); border: none;}
.navbar-expand-lg .navbar-collapse{display: inline-block !important; text-align: right;}
.navbar-expand-lg .navbar-nav{display: inline-flex !important; padding-top: 10px; align-items: center;}
h2{font-size: 34px; font-weight: 300; margin-bottom: 20px; line-height: 48px; color: var(--primary-colour);}
h3{font-size: 28px; font-weight: 700; color: var(--primary-colour);}
h4{font-size: 24px; font-weight: 700; margin-bottom: 20px;}
h5{font-size: 20px; font-weight: 700; margin-bottom: 20px;}
h6{font-size: 18px; font-weight: 300; margin-bottom: 10px;}
.owl-carousel .owl-item img{width: auto;}
.ds-none{display: none;}
button{width: 100%; max-width: 130px; height: 42px; border: none; background: var(--secondary-colour); color: var(--white); border-radius: 30px; padding: 4px 14px;}
button:hover{background: var(--primary-colour);}
.fixedmenu .navbar-nav{padding-top: 4px;}
.banner-slider .item{position: relative;}
.banner-slider .bs-slider-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 16, 43, 0.6);}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { background: var(--primary-colour); border-radius: 50%;
box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1); color: var(--white); font-size: 20px; height: 40px;
left: 10px; padding: 0; position: absolute; text-align: center; top: 50%; transition: all 0.35s ease-in-out; width: 40px; line-height: 42px;}
.owl-carousel .owl-nav button.owl-next{left: auto; right: 10px;}
.pt-60{padding-top: 80px;}
.coach2{position: absolute; right: 0px; top: 0px; max-width: 500px; z-index: -1;}
.line-1{width: 100px; height: 2px; background: var(--primary-colour); margin-bottom: 20px;}
.line-2{width: 100px; height: 2px; background: var(--white); margin: 0 auto; margin-bottom: 20px}
.coach1{max-width: 300px; margin-top: 60px;}
.coach-dp{overflow: hidden; border-radius: 50%; width: 160px; height: 160px; margin: 0 auto; box-shadow: 3px 3px 0px 0px var(--primary-colour); margin-bottom: 20px;}
.team-details{text-align: center; margin-top: 30px;}
.team-details h6{margin-bottom: 0px;}
.team-details label{color: var(--primary-colour);}
.team-details ul{text-align: left; margin-top: 12px;}
.team-details ul li{position: relative; padding-left: 25px; font-weight: 200; margin-bottom: 10px;}
.team-details ul li::before{ content: "\f192"; font-family: "Font Awesome 6 Free"; font-weight: 400; color: var(--primary-colour); 
position: absolute; left: 0px;}
.sylabus-coaching{position: relative; overflow: hidden; border-radius: 10px; margin-top: 30px;}
.bg-overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--primary-colour); mix-blend-mode: color;}
.bg-overlay2{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(87, 147, 184, 0.7);}
.sylabus-content{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 75%; text-align: center;}
.sylabus-content p{margin: 0px; font-weight: 300;}
.milestone{padding-top: 60px; position: relative;}
.success-img{  border-radius: 10px;}
.milestone p{font-weight: 200; margin-bottom: 10px; font-size: 13px;}
.milestone p img{max-height: 24px; margin-right: 10px;}
.achievements{margin-top: 15px; width: calc(100%/2); margin-bottom: 20px;}
.zero{margin: 0px; padding: 0px;}
.testimonials h2{text-align: center; margin-bottom: 30px;}
.testimonials-box{position: relative; overflow: hidden; border: 2px solid var(--primary-colour); border-radius: 10px; padding: 60px 90px 20px;
min-height: 310px; display: inline-flex; align-items: center; width: 100%;}
.quote{position: absolute; top: 30px; left: 30px; max-width: 60px;}
.testimonials-box p{font-weight: 200;}
.testi-star{color: yellow;}
.testi-dp{margin-top: 20px; display: flex; gap: 10px; align-items: center;}
.testi-dp h6{margin: 0px;}
.testi-dp img{width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border-radius: 50%;}
.sponsor, .academy-kit{text-align: center;}
.sponsor-img{margin: 30px auto; max-width: 200px;}
.sponsor p, .academy-kit p{font-weight: 200;}
.jersey{display: flex; gap: 30px; margin: 30px auto; justify-content: center;}
.jersey img{ max-height: 218px; border-radius: 10px;}
footer{padding: 80px 0px;}
footer h2{margin-bottom: 40px;}
.contact-us{margin-top: 30px; max-width: 350px;}
.contact-us h6, .followus h6{margin-bottom: 20px;}
.map iframe{width: 100%; height: 360px; border-radius: 10px;}
.contact-us ul li{padding-left: 45px; position: relative; margin-bottom: 25px; font-weight: 200;}
.contact-us ul li i{position: absolute; width: 32px; height: 32px; line-height: 32px; background: var(--primary-colour); border-radius: 50%;
text-align: center; left: 0px;}
.followus{margin-top: 40px;}
.followus i{margin-right: 10px;}
.followus i:hover{color: var(--secondary-colour);}
.qr-scan{display: flex; justify-content: space-between; align-items: center;}
.qr-scan img{max-height: 130px;}
.qr{text-align: center;}
.qr img{margin-bottom: 4px;}
.copy-right{padding-bottom: 30px;}
.navbar-nav .nav-link.active{color: var(--primary-colour);}
.inner-heading{position: relative; overflow: hidden; text-align: center;}
.inner-title{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.inner-title h1{font-weight: 700;}
.filters { width: 100%; text-align: center; margin-bottom: 50px;}
.filters ul{display: flex; gap: 10px; justify-content: center; align-items: center;}
.filters ul li{padding: 8px 16px; border: 1px solid var(--primary-colour); border-radius: 30px; min-width: 100px; font-weight: 200;
cursor: pointer;}
.our-gallery{padding-top: 80px;}
.filters ul li:hover{color: var(--primary-colour);}
.filters ul li.active{background: var(--primary-colour);}
.gallery{ display: flex; flex-wrap: wrap; align-items: center;}
.gallery-box{width: calc(96%/4);  margin: 0.5%; position: relative; overflow: hidden; border-radius: 10px;}
.gallery-box img{height: 220px; object-fit: cover; width: 100%;}
.mfp-figure button:hover, .mfp-gallery button:hover{background: none;}
.gallery-box::before {display: block; background: rgba(36, 165, 222, 0.65); content: ""; opacity: 0; visibility: hidden; position: absolute; 
top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 1;}
.gallery-box:hover::before {opacity: 1; visibility: visible;}
.popup-img {display: block; font-size: 36px; color: var(--white); padding: 10px; opacity: 0; visibility: hidden; 
-webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); 
position: absolute; bottom: 38%; right:38%; z-index: 500;}
.gallery-box:hover .popup-img  {opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0);}


 :root {
    --primary-colour: #5793B8;
    --white: #ffffff;
    --secondary-colour:#00c1ff;
    --bgm: #10102B;
    --black: #000;

  }