/* ===========================
   E-FORCE COMPUTERS
   style.css
=========================== */

:root{
    --orange:#ff7a00;
    --dark:#1d232b;
    --light:#f8f9fa;
    --text:#555;
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;

    color:var(--text);

    background:#fff;

}

/* NAVBAR */

.navbar{

    background:#20252d!important;

    padding:15px 0;

}

.navbar-brand img{

    height:60px;

}

.nav-link{

    color:white!important;

    margin-left:20px;

    font-weight:600;

    transition:.3s;

}

.nav-link:hover{

    color:var(--orange)!important;

}

.btn-warning{

    background:var(--orange);

    border:none;

    color:#fff;

    font-weight:700;

    border-radius:50px;

    padding:12px 28px;

}

.btn-warning:hover{

    background:#e76700;

    color:white;

}

/* HERO */

.hero{

    padding-top:150px;

    padding-bottom:100px;

    background:linear-gradient(135deg,#20252d 0%,#343d48 100%);

    color:white;

}

.hero h1{

    font-size:58px;

    font-weight:800;

    line-height:1.1;

}

.hero p{

    font-size:20px;

    color:#ddd;

}

.hero h2{

    font-size:42px;

    font-weight:800;

    color:var(--orange);

}

.hero img{

    max-width:100%;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

/* COUNTERS */

.hero .col-4{

    margin-top:20px;

}

.hero .col-4 p{

    color:white;

    font-size:15px;

}

/* SECTION */

section{

    padding:90px 0;

}

.section-title{

    font-size:42px;

    font-weight:800;

    color:#222;

    margin-bottom:15px;

}

.section-sub{

    color:#777;

    margin-bottom:60px;

}

/* CARD */

.service-card{

    background:white;

    border-radius:18px;

    padding:35px;

    transition:.3s;

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

    height:100%;

}

.service-card:hover{

    transform:translateY(-8px);

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

}

.service-card i{

    font-size:45px;

    color:var(--orange);

    margin-bottom:20px;

}

.service-card h4{

    font-weight:700;

}

/* WHY */

.why{

    background:#f5f6f8;

}

.number{

    font-size:60px;

    font-weight:800;

    color:var(--orange);

}

/* FOOTER */

footer{

    background:#20252d;

    color:white;

    padding:60px 0;

}

footer h4{

    color:white;

}

footer a{

    color:#ddd;

    text-decoration:none;

}

footer a:hover{

    color:var(--orange);

}

/* MOBILE */

@media(max-width:992px){

.hero{

text-align:center;

padding-top:130px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.navbar-brand img{

height:50px;

}

}