/* ==========================================
SWAYAM STUDY CENTRE
PREMIUM STYLE.CSS
PART 1
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f8f9fa;
color:#333;
overflow-x:hidden;
line-height:1.7;
}

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

.navbar{
background:#0b3d2e !important;
padding:14px 0;
box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.navbar-brand{
font-size:28px;
font-weight:700;
color:#fff !important;
}

.navbar-brand img{
width:45px;
height:45px;
border-radius:50%;
margin-right:10px;
}

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

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

/* ===========================
PAGE HEADER
=========================== */

.hero,
.page-header{
background:linear-gradient(135deg,#0d6efd,#004aad);
padding:90px 0;
text-align:center;
color:#fff;
}

.hero h1,
.page-header h1{
font-size:55px;
font-weight:700;
}

.hero p,
.page-header p{
font-size:22px;
margin-top:15px;
}

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

section{
padding:80px 0;
}

.section-title{
font-size:42px;
font-weight:700;
margin-bottom:15px;
text-align:center;
}

.section-subtitle{
font-size:18px;
color:#666;
text-align:center;
margin-bottom:50px;
}

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

.btn{
border-radius:50px;
padding:12px 28px;
font-weight:600;
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,.18);
}
/* ==========================================
GALLERY CARDS
========================================== */

.gallery-card,
.card{

background:#fff;

border:none;

border-radius:18px;

overflow:hidden;

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

transition:.35s ease;

height:100%;

}

.gallery-card:hover,
.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.gallery-card img,
.card img{

width:100%;

height:320px;

object-fit:cover;

transition:.45s ease;

}

.gallery-card:hover img,
.card:hover img{

transform:scale(1.08);

}

.card-body{

padding:25px;

}

.card-title{

font-size:24px;

font-weight:700;

margin-bottom:15px;

}

.card-text{

font-size:16px;

color:#666;

}

/* ==========================================
FEATURE ICONS
========================================== */

.feature-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#0d6efd;

color:#fff;

font-size:38px;

margin-bottom:20px;

transition:.3s;

}

.card:hover .feature-icon{

background:#198754;

transform:rotate(8deg);

}

/* ==========================================
VIDEO SECTION
========================================== */

.ratio{

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

iframe{

border:none;

}

/* ==========================================
IMAGE EFFECT
========================================== */

img{

max-width:100%;

display:block;

}

.rounded{

border-radius:18px !important;

}

.shadow{

box-shadow:0 15px 30px rgba(0,0,0,.15)!important;

}

/* ==========================================
LIST GROUP
========================================== */

.list-group-item{

font-size:17px;

padding:14px 18px;

border:none;

border-bottom:1px solid #ececec;

}

.list-group-item:last-child{

border-bottom:none;

}

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

.counter-box{

background:#198754;

padding:35px;

border-radius:18px;

text-align:center;

color:#fff;

transition:.3s;

}

.counter-box:hover{

transform:translateY(-8px);

}

.counter-box h2{

font-size:48px;

font-weight:700;

}

.counter-box p{

font-size:18px;

margin-top:10px;

}

/* ==========================================
SECTION BACKGROUND
========================================== */

.bg-light{

background:#f7f9fc!important;

}

.bg-dark{

background:#111827!important;

}

.bg-success{

background:#198754!important;

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

footer{

background:#111827;

color:#fff;

padding:70px 0 30px;

}

footer h3,
footer h4{

font-weight:700;

margin-bottom:20px;

}

footer p{

color:#d1d5db;

line-height:1.8;

}

footer ul{

list-style:none;

padding:0;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

color:#d1d5db;

text-decoration:none;

transition:.3s;

}

footer ul li a:hover{

color:#ffc107;

padding-left:6px;

}

footer .btn{

margin-top:10px;

}

/* ==========================================
WHATSAPP BUTTON
========================================== */

.whatsapp-btn{

position:fixed;

right:20px;

bottom:20px;

width:65px;

height:65px;

background:#25D366;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

text-decoration:none;

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

z-index:9999;

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.12);

color:#fff;

}

/* ==========================================
SCROLL TO TOP
========================================== */

#topBtn{

position:fixed;

right:20px;

bottom:95px;

width:55px;

height:55px;

border:none;

border-radius:50%;

font-size:22px;

display:none;

z-index:999;

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

}

/* ==========================================
HOVER EFFECTS
========================================== */

img{

transition:.4s;

}

img:hover{

transform:scale(1.02);

}

.btn{

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}

/* ==========================================
ANIMATIONS
========================================== */

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:992px){

.hero h1,
.page-header h1{

font-size:42px;

}

.section-title{

font-size:34px;

}

.card img,
.gallery-card img{

height:260px;

}

}

@media(max-width:768px){

.navbar-brand{

font-size:22px;

}

.hero,
.page-header{

padding:70px 0;

}

.hero h1,
.page-header h1{

font-size:32px;

}

.hero p,
.page-header p{

font-size:18px;

}

.section-title{

font-size:28px;

}

.card img,
.gallery-card img{

height:220px;

}

.whatsapp-btn{

width:58px;

height:58px;

font-size:26px;

}

#topBtn{

width:50px;

height:50px;

font-size:20px;

}

}

@media(max-width:576px){

.container{

padding-left:18px;

padding-right:18px;

}

.card-body{

padding:18px;

}

.btn{

width:100%;

margin-bottom:10px;

}

footer{

text-align:center;

}

}

/* ==========================================
END OF STYLE.CSS
========================================== */