/* ===========================
   Gallery Section
=========================== */

.gallery{

background:#f8f9fa;

}

.gallery-item{

overflow:hidden;

border-radius:15px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.gallery h2{

font-weight:700;

}


/*==========================
      Video Section
==========================*/

.video-section{

background:#ffffff;

}

.video-section h2{

font-size:40px;

font-weight:bold;

margin-bottom:20px;

}

.video-section p{

font-size:18px;

line-height:1.8;

}

.video-section video{

border-radius:15px;

transition:.4s;

}

.video-section video:hover{

transform:scale(1.02);

}

.video-section .btn{

padding:12px 30px;

border-radius:50px;

}


/*==========================
      Team Section
==========================*/

.team-section{

background:#f8f9fa;

}

.team-card{

border:none;

border-radius:20px;

overflow:hidden;

transition:.4s;

}

.team-card:hover{

transform:translateY(-10px);

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

}

.team-card img{

height:300px;

object-fit:cover;

}

.team-card .card-body{

padding:25px;

}

.team-card h5{

font-weight:bold;

}

.badge{

font-size:14px;

padding:8px 15px;

border-radius:30px;

}


/*===================================
        Counter Section
====================================*/

.counter-section{

background:linear-gradient(135deg,#0d6efd,#6610f2);

color:white;

}

.counter-box{

padding:35px;

border-radius:20px;

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

backdrop-filter:blur(10px);

transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

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

}

.counter{

font-size:55px;

font-weight:bold;

margin:15px 0;

}

.counter-box i{

color:#FFD700;

}


/*==================================
      Testimonial Section
==================================*/

.testimonial-section{

background:#f8f9fa;

}

.testimonial-card{

max-width:700px;

margin:auto;

padding:40px;

background:#fff;

border-radius:20px;

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

text-align:center;

}

.testimonial-card img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:5px solid #0d6efd;

margin-bottom:20px;

}

.testimonial-card h4{

font-weight:bold;

}

.stars{

font-size:24px;

margin:15px 0;

color:#FFD700;

}

.testimonial-card p{

font-size:18px;

line-height:1.8;

font-style:italic;

}


/*===================================
        Latest Events
====================================*/

.events-section{

background:#ffffff;

}

.event-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.event-card:hover{

transform:translateY(-10px);

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

}

.event-card img{

height:260px;

width:100%;

object-fit:cover;

}

.event-card h4{

font-weight:bold;

margin-top:15px;

}

.event-card p{

line-height:1.8;

}

.badge{

padding:10px 18px;

font-size:14px;

border-radius:30px;

}

/*==================================
      Contact Section
==================================*/

.contact-section{

background:#f8f9fa;

}

.contact-info{

background:#ffffff;

padding:35px;

border-radius:20px;

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

height:100%;

}

.contact-form{

background:#ffffff;

padding:35px;

border-radius:20px;

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

}

.contact-form .form-control{

border-radius:12px;

padding:14px;

}

.contact-form button{

border-radius:50px;

padding:12px 30px;

}

.social-icons a{

display:inline-flex;

align-items:center;

justify-content:center;

width:45px;

height:45px;

margin-right:10px;

background:#0d6efd;

color:#fff;

border-radius:50%;

text-decoration:none;

transition:.4s;

}

.social-icons a:hover{

transform:translateY(-5px);

background:#198754;

}

/*===================================
          Footer
===================================*/

.footer-section{

background:#0b1d36;

color:white;

padding:70px 0 30px;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

margin:10px 0;

}

.footer-links a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#FFD700;

padding-left:5px;

}

.footer-social a{

display:inline-flex;

justify-content:center;

align-items:center;

width:45px;

height:45px;

background:#0d6efd;

border-radius:50%;

margin-right:10px;

color:white;

font-size:18px;

transition:.4s;

}

.footer-social a:hover{

background:#198754;

transform:translateY(-5px);

}

#topBtn{

position:fixed;

bottom:30px;

right:30px;

display:none;

background:#0d6efd;

color:white;

border:none;

width:50px;

height:50px;

border-radius:50%;

font-size:22px;

cursor:pointer;

z-index:999;

transition:.3s;

}

#topBtn:hover{

background:#198754;

}

/*==========================
      Loading Screen
==========================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-circle{

width:70px;

height:70px;

border:8px solid #ddd;

border-top:8px solid #0d6efd;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

#darkMode{

position:fixed;

bottom:100px;

right:30px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#222;

color:white;

font-size:22px;

cursor:pointer;

z-index:999;

}

.whatsapp{

position:fixed;

left:30px;

bottom:30px;

width:60px;

height:60px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

text-decoration:none;

z-index:999;

transition:.4s;

}

.whatsapp:hover{

transform:scale(1.1);

}

.dark{

background:#121212;

color:white;

}

.dark section{

background:#1f1f1f !important;

color:white;

}

.dark .card{

background:#2b2b2b;

color:white;

}

.dark .navbar{

background:#000 !important;

}

.dark .footer-section{

background:#000;

}


/*=========================
     About Banner
=========================*/

.about-banner{

background:linear-gradient(135deg,#0d6efd,#6610f2);

padding:120px 0;

color:white;

text-align:center;

}

.about-banner h1{

font-size:60px;

font-weight:bold;

}

.about-banner p{

font-size:22px;

}

/*==================================
      Mission Section
==================================*/

.mission-section{

background:#f8f9fa;

}

.mission-card{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

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

transition:.4s;

height:100%;

}

.mission-card:hover{

transform:translateY(-12px);

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

}

.mission-card i{

font-size:55px;

color:#0d6efd;

margin-bottom:20px;

}

.mission-card h3{

font-weight:bold;

margin-bottom:20px;

}


/*==================================
        Timeline Section
==================================*/

.timeline-section{

background:#ffffff;

}

.timeline{

position:relative;

margin:40px auto;

padding:20px 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:#0d6efd;

transform:translateX(-50%);

}

.timeline-item{

position:relative;

width:50%;

padding:20px 40px;

}

.timeline-item.left{

left:0;

}

.timeline-item.right{

left:50%;

}

.timeline-content{

background:#fff;

padding:25px;

border-radius:15px;

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

}

.timeline-year{

display:inline-block;

padding:6px 14px;

background:#0d6efd;

color:#fff;

border-radius:30px;

margin-bottom:15px;

font-weight:bold;

}

@media(max-width:768px){

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:60px;

padding-right:15px;

}

}


/*==================================
        Founders
==================================*/

.founders-section{

background:#f8f9fa;

}

.founder-card{

background:#fff;

padding:25px;

border-radius:20px;

text-align:center;

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

transition:.4s;

}

.founder-card:hover{

transform:translateY(-10px);

}

.founder-card img{

height:230px;

width:100%;

object-fit:cover;

border-radius:15px;

}

/*==================================
      Achievement
==================================*/

.achievement-section{

background:linear-gradient(135deg,#0d6efd,#6610f2);

color:white;

}

.achievement-card{

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

padding:35px;

border-radius:20px;

text-align:center;

backdrop-filter:blur(12px);

transition:.4s;

}

.achievement-card:hover{

transform:scale(1.05);

}

.achievement-card i{

font-size:50px;

margin-bottom:20px;

color:#FFD700;

}