/*
=========================================================
Qalamation
Global Styles
=========================================================
*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f8fafc;

    color:#1f2937;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

    display:block;

}
/*=========================================
Navbar
==========================================*/

.navbar{

    padding:15px 0;

}

.navbar-brand{

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

}

.nav-link{

    font-weight:500;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:#198754 !important;

}
/*=========================================================
Hero Section
=========================================================*/

.hero{

    padding:100px 0;

    background:#ffffff;

}

.hero-badge{

    display:inline-block;

    background:#D4AF37;

    color:#fff;

    padding:10px 22px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}

.hero-title{

    font-size:60px;

    font-weight:700;

    color:#17364F;

    line-height:1.2;

}

.hero-text{

    font-size:18px;

    color:#6B7280;

    line-height:1.9;

}

.hero-image{

    animation:floatImage 5s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*=========================================================
Buttons
=========================================================*/

.btn-qalam{

    background:#0F766E;

    color:#fff;

    padding:15px 32px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.btn-qalam:hover{

    background:#0b615a;

    color:#fff;

    transform:translateY(-3px);

}

.btn-qalam-outline{

    border:2px solid #0F766E;

    color:#0F766E;

    padding:15px 32px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.btn-qalam-outline:hover{

    background:#0F766E;

    color:#fff;

}

@media(max-width:991px){

.hero{

text-align:center;

padding:70px 0;

}

.hero-title{

font-size:42px;

}

.hero-image{

margin-top:50px;

}

}

@media(max-width:576px){

.hero-title{

font-size:34px;

}

.hero-text{

font-size:16px;

}

.btn-qalam,

.btn-qalam-outline{

width:100%;

margin-bottom:15px;

}

}