/* ==========================================
   BIGHOST AFRICA SMART CHAMA MANAGEMENT SYSTEM
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

body{
    background:#f8f9fa;
    color:#333;
    line-height:1.6;
}

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

.navbar{
    box-shadow:0 3px 10px rgba(0,0,0,.2);
}

.navbar-brand{
    font-size:28px;
    font-weight:bold;
}

.nav-link{
    color:white !important;
    margin-left:15px;
    transition:.3s;
}

.nav-link:hover{
    color:#ffc107 !important;
}

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

.hero{

    background:linear-gradient(rgba(0,51,153,.85),
    rgba(0,51,153,.85)),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

    color:white;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:80px 0;

}

.hero h1{

    font-size:60px;

    font-weight:bold;

}

.hero p{

    font-size:22px;

    margin:25px 0;

}

.hero img{

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

}

/* Floating Animation */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

/* Buttons */

.btn{

    border-radius:50px;

    padding:12px 28px;

}

/* ================= FEATURES ================= */

#features{

padding:90px 0;

background:white;

}

#features h2{

margin-bottom:50px;

font-weight:bold;

}

.feature-box{

background:white;

padding:35px;

margin-bottom:30px;

text-align:center;

border-radius:15px;

transition:.4s;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.feature-box:hover{

transform:translateY(-10px);

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

}

.feature-box i{

font-size:55px;

color:#0d6efd;

margin-bottom:20px;

}

.feature-box h4{

font-weight:bold;

margin-bottom:15px;

}

/* ================= PRICING ================= */

#pricing{

padding:90px 0;

background:#eef4ff;

}

.card{

border:none;

border-radius:15px;

overflow:hidden;

transition:.4s;

box-shadow:0 5px 15px rgba(0,0,0,.1);

margin-bottom:30px;

}

.card:hover{

transform:scale(1.05);

}

.card-header{

font-size:22px;

font-weight:bold;

padding:18px;

}

.card-body h2{

font-size:40px;

font-weight:bold;

color:#0d6efd;

}

.card-body p{

font-size:18px;

}

/* ================= REGISTERED CHAMAS ================= */

#registered{

padding:90px 0;

background:white;

}

#registered select{

height:60px;

font-size:18px;

border-radius:10px;

}

#registered button{

height:60px;

font-size:20px;

}

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

#contact{

padding:90px 0;

background:#eef4ff;

}

#contact input,

#contact textarea{

padding:15px;

margin-bottom:20px;

border-radius:10px;

border:1px solid #ddd;

}

#contact button{

padding:15px 40px;

font-size:20px;

}

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

footer{

background:#002366;

color:white;

padding:40px;

}

footer h4{

margin-bottom:20px;

}

footer p{

margin:10px 0;

}

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

#topBtn{

display:none;

position:fixed;

bottom:30px;

right:30px;

background:#ffc107;

border:none;

color:black;

width:50px;

height:50px;

border-radius:50%;

font-size:20px;

cursor:pointer;

box-shadow:0 5px 15px rgba(0,0,0,.3);

z-index:999;

}

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

.whatsapp{

position:fixed;

bottom:100px;

right:30px;

background:#25d366;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:white;

text-decoration:none;

box-shadow:0 5px 15px rgba(0,0,0,.3);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.15);

color:white;

}

/* ================= HEADINGS ================= */

h2{

font-weight:bold;

color:#003399;

margin-bottom:40px;

}

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

@media(max-width:992px){

.hero{

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.feature-box{

margin-bottom:20px;

}

.card{

margin-bottom:20px;

}

}

@media(max-width:576px){

.hero{

padding:80px 20px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:16px;

}

.btn{

display:block;

margin-bottom:15px;

width:100%;

}

}