/* ==========================
   MOZA Network & IT Solutions
   ========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:#ffffff;
}

/* NAVBAR */

.navbar{
    background:rgba(15,23,42,.90);
    backdrop-filter:blur(10px);
}

.navbar-brand{
    color:#38bdf8 !important;
    font-size:30px;
    font-weight:700;
    letter-spacing:2px;
}

.nav-link{
    color:#fff !important;
    margin-left:18px;
    transition:.3s;
}

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

/* HERO */

.hero{

    padding-top:170px;
    padding-bottom:120px;

    background:
    linear-gradient(rgba(15,23,42,.88),
    rgba(15,23,42,.95)),

    url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80");

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

.hero h1{

    font-size:70px;
    font-weight:800;

}

.hero h2{

    color:#38bdf8;
    margin-top:15px;
    margin-bottom:25px;

}

.hero p{

    color:#d1d5db;
    max-width:650px;

}

/* BUTTON */

.btn-primary{

    background:#0ea5e9;
    border:none;

}

.btn-primary:hover{

    background:#0284c7;

}

.btn-outline-light:hover{

    color:#000;

}

/* CARD */

.card{

    border:none;
    border-radius:18px;
    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}

.card-body{

    padding:35px;

}

/* ICON */

.bi{

    color:#38bdf8;

}

/* SECTION */

section{

    padding-top:80px;
    padding-bottom:80px;

}

/* FOOTER */

footer{

    background:#020617;

}

/* RESPONSIVE */

@media(max-width:991px){

.hero{

text-align:center;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:26px;

}

}

@media(max-width:576px){

.hero{

padding-top:140px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:15px;

}

}
/* =====================================
   PROJECT CARD
===================================== */

.project-card{
    transition:all .35s ease;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    background:#ffffff;
}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(14,165,233,.25)!important;

}

.project-card i{

    transition:.35s;

}

.project-card:hover i{

    transform:scale(1.15) rotate(-5deg);

}

.project-card h3{

    color:#1f2937;

    font-weight:700;

    transition:.3s;

}

.project-card:hover h3{

    color:#0ea5e9;

}

.project-card p{

    color:#6b7280;

}

.project-card .badge{

    margin-right:5px;

    margin-bottom:5px;

    font-size:.75rem;

}

.project-card hr{

    opacity:.15;

}

.project-card:hover{

    background:linear-gradient(180deg,#ffffff,#f8fbff);

}



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

.btn{

    border-radius:10px;

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

}



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

footer{

    font-size:15px;

}

footer a{

    transition:.3s;

}

footer a:hover{

    color:#0ea5e9!important;

    padding-left:6px;

}



/* =====================================
   BADGE
===================================== */

.badge{

    font-weight:500;

    letter-spacing:.4px;

}



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

.hero{

    padding:130px 0 90px;

    background:linear-gradient(135deg,#0f172a,#1e3a8a);

    color:#fff;

}

.hero h1{

    font-weight:800;

}

.hero p{

    max-width:720px;

    margin:auto;

}



/* =====================================
   CARD
===================================== */

.card{

    border:none;

    border-radius:18px;

}