/* ===================================
   Sebenza Solutions Group v1.0
=================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;

}

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

.top-bar{

    background:#0B2E59;
    color:#fff;
    font-size:14px;
    padding:10px 0;

}

.top-bar i{

    color:#FFC107;

}

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

.navbar{

    background:#0B2E59;

    padding:18px 0;

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

}

.navbar-brand{

    font-size:1.4rem;
    font-weight:700;

}

.nav-link{

    color:white!important;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:#FFC107!important;

}

.btn-warning{

    background:#FFC107;
    border:none;
    color:#000;
    font-weight:600;

}

.btn-warning:hover{

    background:#ffca2c;

}

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

.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;

    background:
        linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
        url("../images/Services.jpg");

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

    color: white;
}

}

.hero h1{

    font-size:4rem;

    font-weight:700;

    line-height:1.2;

    margin:20px 0;

}

.hero p{

    font-size:1.15rem;

    margin-bottom:35px;

}

/*============================
ABOUT
=============================*/

section{

    padding:80px 0;

}

section h2{

    color:#0B2E59;

    font-weight:700;

    margin-bottom:25px;

}

.text-warning{

    color:#FFC107!important;

}

/*============================
SERVICE CARDS
=============================*/

.service-card{

    border:none;

    border-radius:18px;

    transition:.35s;

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

}

.service-card:hover{

    transform:translateY(-12px);

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

}

.service-card .card-body{

    padding:45px 25px;

}

.service-card h4{

    margin-top:20px;

    color:#0B2E59;

    font-weight:600;

}

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

.btn{

    border-radius:50px;

    padding:14px 35px;

}

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

footer{

    background:#0B2E59;

    color:white;

    padding:60px 0 30px;

}

footer h3{

    color:#FFC107;

}

footer hr{

    margin:30px 0;

    border-color:rgba(255,255,255,.2);

}

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

@media(max-width:991px){

.hero{

text-align:center;

padding:120px 0;

}

.hero h1{

font-size:2.8rem;

}

.top-bar{

display:none;

}

.nav-link{

margin-left:0;

padding:10px 0;

}

}

@media(max-width:576px){

.hero h1{

font-size:2.2rem;

}

.hero p{

font-size:1rem;

}

.btn{

width:100%;

margin-bottom:15px;

}

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

.why-us{

    background:#f8f9fa;

}

.feature-box{

    background:#fff;

    padding:40px 30px;

    border-radius:15px;

    text-align:center;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
),
    url("images/About.jpg");

}

.feature-box:hover{

    transform:translateY(-10px);

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

}

.feature-box i{

    font-size:55px;

    color:#FFC107;

    margin-bottom:20px;

}

/* ==========================
STATISTICS
========================== */

.stats{

    background:#0B2E59;

    color:#fff;

}

.stats h1{

    color:#FFC107;

    font-size:60px;

    font-weight:700;

}

.stats p{

    font-size:18px;

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

.whatsapp-float{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:white;

text-decoration:none;

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

transition:.3s;

z-index:999;

}

.whatsapp-float:hover{

transform:scale(1.12);

color:white;

}

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

#topBtn{

position:fixed;

right:25px;

bottom:105px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#0B2E59;

color:white;

font-size:28px;

cursor:pointer;

display:none;

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

transition:.3s;

z-index:998;

}

#topBtn:hover{

background:#FFC107;

color:black;

transform:scale(1.08);

}
/* ==========================
CALL TO ACTION
========================== */

.cta-section{

    background:#0B2E59;

    color:white;

    padding:80px 0;

}

.cta-section h2{

    color:white;

    font-size:40px;

    font-weight:700;

    margin-bottom:20px;

}

.cta-section p{

    font-size:18px;

    color:#ddd;

}