/*=========================================
 BKTech Computer & Library
 Premium Style.css v3.0
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
--primary:#0D47A1;
--secondary:#1565C0;
--accent:#FFC107;
--success:#198754;
--danger:#dc3545;
--dark:#08142f;
--light:#f8f9fa;
--white:#ffffff;
--text:#444;
--shadow:0 15px 35px rgba(0,0,0,.12);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

html{
overflow-x:hidden;
}

body{
background:#f8f9fa;
color:var(--text);
overflow-x:hidden;
line-height:1.7;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:.35s;
}

section{
padding:80px 0;
}

.container{
position:relative;
z-index:2;
}

/*=========================================
 PRELOADER
=========================================*/

#loader{
position:fixed;
inset:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
z-index:999999;
transition:.6s;
}

#loader.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loader-logo{
width:100px;
animation:loaderZoom 2s infinite;
}

@keyframes loaderZoom{

0%{transform:scale(.95);}
50%{transform:scale(1.08);}
100%{transform:scale(.95);}

}

/*=========================================
 TOP BAR
=========================================*/

.top-bar{
background:linear-gradient(90deg,#0D47A1,#1565C0);
font-size:15px;
font-weight:500;
}

.top-bar a{
color:#fff;
}

.top-bar a:hover{
color:#FFC107;
}

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

.navbar{
background:rgba(13,71,161,.96)!important;
backdrop-filter:blur(12px);
padding:12px 0;
box-shadow:var(--shadow);
}

.navbar-brand img{
width:55px;
height:55px;
border-radius:50%;
border:2px solid #FFC107;
}

.navbar-brand h5{
font-weight:700;
margin:0;
}

.nav-link{
color:#fff!important;
margin-left:12px;
font-weight:500;
transition:.3s;
}

.nav-link:hover,
.nav-link.active{
color:#FFC107!important;
}

.navbar .btn{
border-radius:40px;
padding:10px 24px;
font-weight:600;
}

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

.hero-section{
padding:0;
}

.hero-image{
height:90vh;
object-fit:cover;
filter:brightness(.45);
}

.carousel-caption{
top:50%;
transform:translateY(-50%);
bottom:auto;
text-align:left;
}

.carousel-caption h1{
font-size:64px;
font-weight:800;
color:#fff;
}

.carousel-caption h2{
font-size:34px;
font-weight:700;
color:#fff;
}

.carousel-caption p{
font-size:20px;
margin:20px 0;
color:#fff;
}

.carousel-caption .btn{
padding:14px 34px;
border-radius:50px;
font-weight:600;
}

.carousel-indicators button{
width:12px;
height:12px;
border-radius:50%;
}

/*=========================================
 MARQUEE
=========================================*/

marquee{
font-weight:600;
font-size:16px;
padding:6px 0;
}

/*=========================================
 COMMON BUTTONS
=========================================*/

.btn-primary{
background:#0D47A1;
border:none;
}

.btn-primary:hover{
background:#1565C0;
transform:translateY(-3px);
}

.btn-warning{
font-weight:600;
border:none;
}

.btn-success{
font-weight:600;
}

.btn{
transition:.35s;
position:relative;
overflow:hidden;
}

.btn:hover{
transform:translateY(-3px);
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.45);
transform:scale(0);
animation:ripple .6s linear;
}

@keyframes ripple{
to{
transform:scale(4);
opacity:0;
}
}
/*=========================================
 ABOUT SECTION
=========================================*/

.about-section{
background:#fff;
}

.about-section img{
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
transition:.4s;
}

.about-section img:hover{
transform:scale(1.03);
}

.about-section h2{
font-size:42px;
font-weight:700;
color:var(--primary);
}

.about-section p{
font-size:17px;
line-height:1.9;
}

.about-section .badge{
padding:10px 22px;
border-radius:40px;
font-size:14px;
}

.about-section .btn{
padding:12px 30px;
border-radius:40px;
font-weight:600;
}

/*=========================================
 LEADERSHIP
=========================================*/

.card{
border:none;
border-radius:25px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.card img{
height:420px;
object-fit:cover;
transition:.5s;
}

.card:hover img{
transform:scale(1.08);
}

.card-body{
padding:28px;
}

.card-body h4{
font-size:28px;
font-weight:700;
color:var(--primary);
}

.card-body p{
line-height:1.8;
}

/*=========================================
 COUNTER
=========================================*/

.counter-section{
background:linear-gradient(135deg,#0D47A1,#1565C0);
color:#fff;
}

.counter{
font-size:56px;
font-weight:800;
}

.counter-section h5{
font-size:18px;
margin-top:10px;
}

/*=========================================
 WHY CHOOSE US
=========================================*/

.why-card{
background:#fff;
padding:35px;
border-radius:22px;
text-align:center;
box-shadow:var(--shadow);
transition:.35s;
}

.why-card:hover{
transform:translateY(-10px);
}

.why-card i{
font-size:55px;
margin-bottom:20px;
color:var(--primary);
transition:.35s;
}

.why-card:hover i{
transform:rotate(8deg) scale(1.15);
}

.why-card h4,
.why-card h5{
font-weight:700;
margin-bottom:12px;
}

/*=========================================
 COURSE SECTION
=========================================*/

.courses{
background:#f8f9fc;
}

.courses .card{
background:#fff;
border-radius:25px;
overflow:hidden;
}

.courses .card img{
height:230px;
object-fit:cover;
transition:.5s;
}

.courses .card:hover img{
transform:scale(1.08);
}

.courses h4{
font-size:26px;
font-weight:700;
color:var(--primary);
}

.courses h5{
font-size:30px;
font-weight:700;
color:var(--success);
}

.courses ul{
margin-top:15px;
padding-left:0;
list-style:none;
}

.courses ul li{
padding:6px 0;
font-size:15px;
}

.courses .btn{
border-radius:40px;
font-weight:600;
}

/*=========================================
 FEATURE CARD
=========================================*/

.feature-card{
background:#fff;
border-radius:22px;
padding:30px;
box-shadow:var(--shadow);
transition:.35s;
}

.feature-card:hover{
transform:translateY(-10px);
}

.feature-card i{
font-size:55px;
margin-bottom:20px;
transition:.35s;
}

.feature-card:hover i{
transform:scale(1.15);
}

/*=========================================
 COMMON SECTION
=========================================*/

section h2{
font-size:42px;
font-weight:700;
color:var(--primary);
}

.badge{
border-radius:40px;
padding:10px 20px;
letter-spacing:.5px;
font-size:14px;
}

[data-aos]{
overflow:hidden;
}
/*=========================================
 DIGITAL LIBRARY
=========================================*/

.library-section{
background:#fff;
}

.library-section img{
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
transition:.4s;
}

.library-section img:hover{
transform:scale(1.03);
}

.library-section h2{
font-size:42px;
font-weight:700;
color:var(--primary);
}

.library-section ul{
padding-left:0;
list-style:none;
}

.library-section ul li{
padding:10px 0;
font-size:17px;
}

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

.gallery{
background:#f8f9fc;
}

.gallery-img{
border-radius:18px;
transition:.35s;
cursor:pointer;
box-shadow:var(--shadow);
}

.gallery-img:hover{
transform:scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,.20);
}

/*=========================================
 STUDENT REVIEWS
=========================================*/

.review-card{
background:#fff;
padding:30px;
border-radius:22px;
box-shadow:var(--shadow);
transition:.35s;
}

.review-card:hover{
transform:translateY(-10px);
}

.review-card h5{
font-weight:700;
color:var(--primary);
}

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

.contact-section{
background:#f8f9fc;
}

.contact-section .card{
border-radius:25px;
box-shadow:var(--shadow);
}

.contact-section iframe{
border-radius:25px;
}

.contact-section h3{
font-weight:700;
color:var(--primary);
}

.contact-section .btn{
border-radius:40px;
transition:.35s;
}

.contact-section .btn:hover{
transform:translateY(-4px);
}

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

footer{
background:#08142f;
color:#fff;
}

footer h3,
footer h4{
color:#FFC107;
font-weight:700;
}

footer p,
footer li{
color:#ddd;
line-height:1.9;
}

footer ul{
list-style:none;
padding-left:0;
}

footer ul li{
margin-bottom:10px;
}

footer ul li a{
color:#ddd;
transition:.3s;
}

footer ul li a:hover{
color:#FFC107;
padding-left:8px;
}

/*=========================================
 FLOATING BUTTONS
=========================================*/

.floating-whatsapp,
.floating-call{
position:fixed;
right:20px;
width:60px;
height:60px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.30);
z-index:999;
transition:.35s;
}

.floating-whatsapp{
bottom:20px;
background:#25D366;
}

.floating-call{
bottom:95px;
background:var(--primary);
}

.floating-whatsapp:hover,
.floating-call:hover{
transform:scale(1.1);
}

/*=========================================
 SCROLL BUTTON
=========================================*/

#scrollTopBtn{
position:fixed;
left:20px;
bottom:20px;
width:55px;
height:55px;
background:#FFC107;
border:none;
border-radius:50%;
font-size:22px;
cursor:pointer;
display:none;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:999;
transition:.35s;
}

#scrollTopBtn:hover{
transform:translateY(-5px);
}

/*=========================================
 GLASS EFFECT
=========================================*/

.glass{
background:rgba(255,255,255,.18);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.25);
border-radius:20px;
}

/*=========================================
 CUSTOM SCROLLBAR
=========================================*/

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#ececec;
}

::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--secondary);
}

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

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

.float{
animation:float 2.5s infinite;
}

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

@media(max-width:992px){

section{
padding:60px 0;
}

.carousel-caption{
text-align:center;
}

.carousel-caption h1{
font-size:42px;
}

.carousel-caption h2{
font-size:26px;
}

.hero-image{
height:70vh;
}

}

@media(max-width:768px){

.hero-image{
height:60vh;
}

.carousel-caption h1{
font-size:32px;
}

.carousel-caption h2{
font-size:22px;
}

.carousel-caption p{
font-size:15px;
}

.navbar-brand img{
width:45px;
height:45px;
}

.top-bar{
font-size:13px;
text-align:center;
}

.card img{
height:260px;
}

.floating-whatsapp,
.floating-call{
width:52px;
height:52px;
font-size:24px;
}

#scrollTopBtn{
width:50px;
height:50px;
}

}

/*=========================================
 TEXT SELECTION
=========================================*/

::selection{
background:var(--primary);
color:#fff;
}

/*=========================================
 END OF STYLE.CSS
 BKTech Computer & Library v3.0
=========================================*/
.live-float{
    position: fixed;
    right:  18px;
    bottom: 270px;
    z-index: 9999;
}

.live-float img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
.live-float{
    position:fixed;
    right:20px;
    bottom:200px;
    z-index:99999;
}

.live-float img{
    width:90px;
    height:90px;
    display:block;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}