/*==========================================
    DEBIRO Integrated Services Ltd
    Main Stylesheet
==========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;
    line-height:1.7;
}

/*=============================
    VARIABLES
==============================*/

:root{

    --primary:#003366;
    --secondary:#f4b400;
    --dark:#222;
    --light:#f8f9fa;
    --white:#ffffff;
    --gray:#777;

}

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

.navbar{

    background:var(--primary)!important;
    padding:15px 0;
    transition:.4s;

}

.navbar-brand{

    font-size:28px;
    font-weight:700;
    color:#fff!important;
    letter-spacing:1px;

}

.nav-link{

    color:#fff!important;
    font-weight:500;
    margin-left:15px;
    transition:.3s;

}

.nav-link:hover{

    color:var(--secondary)!important;

}

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

.hero{

    min-height:90vh;

    background:
    linear-gradient(rgba(0,51,102,.80),
    rgba(0,51,102,.80)),
    url("../images/hero-bg.jpg");

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

    display:flex;
    align-items:center;

}

.hero h1{

    font-size:58px;
    font-weight:800;
    line-height:1.2;

}

.hero p{

    font-size:18px;

}

.hero img{

    max-width:100%;
    animation:float 4s ease-in-out infinite;

}

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

.btn-primary{

    background:var(--primary);
    border:none;

}

.btn-primary:hover{

    background:#001f40;

}

.btn-warning{

    background:var(--secondary);
    border:none;
    color:#000;

}

.btn-warning:hover{

    background:#ffca28;

}

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

section{

    padding:80px 0;

}

section h2{

    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;

}

section p{

    color:#555;

}

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

.card{

    border:none;
    border-radius:15px;
    overflow:hidden;
    transition:.4s;

}

.card:hover{

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

}

.card-body{

    padding:35px;

}

.card i{

    color:var(--primary);

}

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

.about-image{

    border-radius:15px;
    overflow:hidden;

}

.about-image img{

    width:100%;

}

/*=============================
    COUNTERS
==============================*/

.counter{

    background:#fff;
    border-radius:10px;
    padding:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.counter h1{

    color:var(--primary);
    font-weight:700;

}

/*=============================
    CTA
==============================*/

.cta{

    background:var(--primary);
    color:#fff;
    text-align:center;

}

.cta h2{

    color:#fff;

}

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

footer{

    background:#111;
    color:#ddd;

}

footer h4{

    color:#fff;
    margin-bottom:20px;

}

footer p{

    color:#ccc;

}

footer a{

    color:#ddd;
    text-decoration:none;
    transition:.3s;

}

footer a:hover{

    color:var(--secondary);

}

footer ul{

    list-style:none;
    padding:0;

}

footer ul li{

    margin-bottom:10px;

}

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

.contact-box{

    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);

}

.contact-box input,
.contact-box textarea{

    border-radius:8px;
    border:1px solid #ddd;
    padding:12px;

}

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

    border-color:var(--primary);
    box-shadow:none;

}

/*=============================
    GALLERY
==============================*/

.gallery img{

    width:100%;
    border-radius:10px;
    transition:.4s;

}

.gallery img:hover{

    transform:scale(1.05);

}

/*=============================
    PROJECTS
==============================*/

.project-card{

    overflow:hidden;
    border-radius:15px;

}

.project-card img{

    transition:.4s;

}

.project-card:hover img{

    transform:scale(1.1);

}

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

#topBtn{

    position:fixed;
    right:20px;
    bottom:20px;

    width:50px;
    height:50px;

    background:var(--secondary);
    color:#000;

    border:none;
    border-radius:50%;

    display:none;

    cursor:pointer;

    font-size:20px;

    z-index:999;

}

#topBtn:hover{

    background:#ffca28;

}

/*=============================
    ANIMATIONS
==============================*/

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

.fade-up{

    opacity:0;
    transform:translateY(40px);
    transition:1s;

}

.fade-up.active{

    opacity:1;
    transform:translateY(0);

}

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

@media(max-width:992px){

.hero{

    text-align:center;
    min-height:auto;
    padding:80px 0;

}

.hero h1{

    font-size:42px;

}

}

@media(max-width:768px){

.hero h1{

    font-size:34px;

}

section{

    padding:60px 0;

}

.navbar-brand{

    font-size:22px;

}

.card{

    margin-bottom:25px;

}

}

@media(max-width:576px){

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:16px;

}

.btn{

    width:100%;
    margin-bottom:10px;

}

}