/* =========================
   SMART BUSINESS UGANDA
   MAIN STYLE
========================= */


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


html{
    scroll-behavior:smooth;
}


body{

    font-family: "Segoe UI", sans-serif;
    background:#0f1115;
    color:white;

}


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


.navbar{

    background:rgba(15,17,21,0.75);
    backdrop-filter:blur(10px);

}


.navbar-brand{

    font-size:22px;
    font-weight:700;

}


.navbar-brand img{

    height:45px;
    width:auto;
    margin-right:10px;

}


.nav-link{

    color:white!important;
    margin:0 8px;

}


.nav-link:hover{

    color:#16a34a!important;

}



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


.hero{

height:100vh;

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}


.hero-overlay{

position:absolute;

inset:0;


/* stronger darkness */

background:

linear-gradient(
90deg,
rgba(5,8,15,0.95) 0%,
rgba(5,8,15,0.75) 45%,
rgba(5,8,15,0.55) 100%
);


}



.hero-box{

position:relative;

z-index:2;

max-width:650px;

background:rgba(15,17,21,0.45);

padding:40px;

border-radius:25px;

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.1);

}



.hero-badge{

display:inline-block;

background:#16a34a;

padding:8px 18px;

border-radius:30px;

font-size:14px;

margin-bottom:25px;

}



.hero h1{

font-size:65px;

font-weight:800;

line-height:1.1;

}



.hero p{

font-size:21px;

color:#ddd;

margin:25px 0;

}



.hero-features{

margin-top:30px;

display:flex;

gap:15px;

flex-wrap:wrap;

}


.hero-features span{

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

padding:8px 15px;

border-radius:20px;

font-size:14px;

}



.btn-success{

    background:#16a34a;

    border:none;

    padding:14px 35px;

    border-radius:50px;

    font-weight:600;

}



.btn-success:hover{

    background:#15803d;

}




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


.stats{

    padding:70px 0;

    background:#111827;

}


.stats h2{

    color:#16a34a;

    font-size:45px;

    font-weight:800;

}


.stats p{

    color:#ccc;

    font-size:18px;

}



/* =========================
   GENERAL SECTIONS
========================= */


.section{

    padding:90px 0;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}


.section-title h2{

    font-size:40px;

    font-weight:700;

}




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


@media(max-width:768px){


.hero h1{

    font-size:40px;

}


.hero p{

    font-size:18px;

}


}
/* =========================
FEATURE CARDS
========================= */


.feature-card{

background:#1a1f2e;

padding:30px;

border-radius:20px;

height:100%;

transition:.3s;

border:1px solid rgba(255,255,255,.05);

}


.feature-card:hover{

transform:translateY(-10px);

border-color:#16a34a;

}



.feature-card .icon{

font-size:40px;

margin-bottom:20px;

}



.feature-card h4{

font-size:22px;

margin-bottom:15px;

}



.feature-card p{

color:#bbb;

line-height:1.7;

}
/* =========================
HOW IT WORKS
========================= */


.how-section{

background:#111827;

}



.step-card{

background:#1a1f2e;

padding:40px 25px;

border-radius:20px;

height:100%;

transition:.3s;

}



.step-card:hover{

transform:translateY(-8px);

}



.step-number{

width:70px;

height:70px;

border-radius:50%;

background:#16a34a;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

font-weight:700;

margin:0 auto 25px;

}



.step-card h4{

margin-bottom:15px;

}



.step-card p{

color:#bbb;

line-height:1.7;

}
/* =========================
INDUSTRIES
========================= */


.industry-card{

background:#1a1f2e;

padding:25px 15px;

border-radius:18px;

height:100%;

transition:.3s;

}



.industry-card:hover{

transform:translateY(-8px);

background:#202938;

}



.industry-icon{

font-size:45px;

margin-bottom:15px;

}



.industry-card h5{

font-size:18px;

}



.industry-card p{

color:#aaa;

font-size:14px;

}
/* =========================
SYSTEM SHOWCASE
========================= */


.demo-section{

background:#111827;

}



.showcase-image{

width:100%;

border-radius:20px;

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

}



.showcase-item h3{

font-size:35px;

font-weight:700;

margin-bottom:20px;

}



.showcase-item p{

color:#bbb;

font-size:18px;

line-height:1.8;

}



.showcase-item ul{

padding-left:20px;

color:#ddd;

}



.showcase-item li{

margin-bottom:10px;

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


.pricing-section{

background:#0f1115;

}



.pricing-card{

background:#1a1f2e;

padding:40px 30px;

border-radius:25px;

height:100%;

text-align:center;

position:relative;

transition:.3s;

}



.pricing-card:hover{

transform:translateY(-10px);

}



.pricing-card h1{

font-size:45px;

color:#16a34a;

margin:25px 0;

}



.pricing-card p{

color:#bbb;

}



.pricing-card ul{

list-style:none;

padding:0;

margin:30px 0;

}



.pricing-card li{

margin:15px 0;

color:#ddd;

}



.pricing-card.featured{

border:2px solid #16a34a;

}



.popular{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#16a34a;

padding:8px 25px;

border-radius:30px;

font-size:14px;

font-weight:bold;

}
/* =========================
WHY CHOOSE SMARTBIZUG
========================= */


.why-section{

background:#111827;

}



.why-card{

background:#1a1f2e;

padding:35px 25px;

border-radius:20px;

height:100%;

transition:.3s;

text-align:center;

}



.why-card:hover{

transform:translateY(-8px);

}



.why-icon{

font-size:45px;

margin-bottom:20px;

}



.why-card h4{

margin-bottom:15px;

}



.why-card p{

color:#bbb;

line-height:1.7;

}
/* =========================
FAQ
========================= */


.faq-section{

background:#0f1115;

}


.accordion-item{

background:#1a1f2e;

border:none;

margin-bottom:15px;

border-radius:15px;

overflow:hidden;

}



.accordion-button{

background:#1a1f2e;

color:white;

font-size:18px;

font-weight:600;

}



.accordion-button:not(.collapsed){

background:#16a34a;

color:white;

}



.accordion-button:focus{

box-shadow:none;

}



.accordion-body{

background:#1a1f2e;

color:#ccc;

line-height:1.7;

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


.contact-section{

background:#111827;

}


.contact-form input,
.contact-form textarea{

background:#1a1f2e;

border:none;

color:white;

padding:15px;

border-radius:12px;

}


.contact-form input::placeholder,
.contact-form textarea::placeholder{

color:#aaa;

}


.contact-form input:focus,
.contact-form textarea:focus{

background:#1a1f2e;

color:white;

box-shadow:0 0 0 2px #16a34a;

}



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


.footer{

background:#080b12;

padding:60px 0 30px;

}



.footer h4,
.footer h5{

margin-bottom:20px;

}



.footer p{

color:#aaa;

}



.footer a{

color:#aaa;

text-decoration:none;

}



.footer a:hover{

color:#16a34a;

}
/* VIDEO SECTION */


.video-card{

background:#1a1f2e;

padding:25px;

border-radius:20px;

overflow:hidden;

height:100%;

}



.video-card iframe{

border-radius:15px;

}



.video-card h4{

margin-top:20px;

}



.video-card p{

color:#bbb;

}
.hero{

min-height:100vh;

display:flex;

align-items:center;

background:
linear-gradient(
135deg,
#0f1115,
#064e3b
);

overflow:hidden;

}



.screen-container{

position:relative;

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

}



.hero-screen{

width:100%;

border-radius:20px;

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

animation:slideIn .8s ease;

}



@keyframes slideIn{

from{

transform:translateX(100px);

opacity:0;

}


to{

transform:translateX(0);

opacity:1;

}

}



@keyframes float{

0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}

}



.hero h1{

font-size:60px;

font-weight:800;

}



.hero-badge{

background:#16a34a;

padding:8px 18px;

border-radius:30px;

display:inline-block;

margin-bottom:20px;

}
.chat-box{

background:#1a1f2e;

padding:35px;

border-radius:20px;

}


.chat-header{

font-size:25px;

font-weight:700;

margin-bottom:20px;

}


.chat-welcome{

color:#ccc;

line-height:1.7;

}



.chat-box input,
.chat-box textarea{

background:#111827;

border:none;

color:white;

padding:15px;

}



.chat-box input::placeholder,
.chat-box textarea::placeholder{

color:#888;

}


.chat-box input:focus,
.chat-box textarea:focus{

background:#111827;

color:white;

border:1px solid #16a34a;

box-shadow:none;

}