/* navbar */
#top_nav{
    background-color: #f8c954 !important;
    padding: 0 8%;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgb(255 255 255);
    font-size: 20px;
    padding: 25px;
}
#searchbox{
    background-color: #fcc302;
    color: white;
    border: 0px;
    border-radius: 0;
    position: relative;
    left: 47px;
    box-shadow: 5px 10px 11px 0px #00000021;
}
#searchbox::placeholder{
    color: white;
}
#searchbtn{
    position: relative;
    z-index: 99;
    background-color: #00bec9;
    color: white;
    border: 0;
    border-radius: 0;
}

@media only screen and (max-width: 768px){
    #searchform{
        margin-bottom: 30px;
        margin-top: 20px;
        position: relative;
        left: 20px;
    }
}

@media only screen and (max-width: 500px){
    #top_nav{
        padding: 0;
    }
}

/* banner */
#banner{
    background-color: rgb(255, 253, 253);
    padding-bottom: 20px;
}

#bannertext h1{
    color: rgb(25, 25, 28);
    font-size: 70px;
    margin-top: 100px;
}

#bannerimg{
    padding-top: 5%;
}

#bannertext p{
    color: black;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
}

#banner-btn-1{
    background-color: #00bec9;
    border: 2px solid #00bec9;
    color: black;
}
#banner-btn-2{
    color: black;
    border: 2px solid black;
    margin-left: 15px;
}

@media only screen and (max-width: 1300px){
    #banner h1{
        font-size: 50px;
    }
    #banner{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 900px){
    #bannertext h1{
        font-size: 40px;
    }
}


/*service */
#service-text{
    padding-top: 10%;
    padding-bottom: 5%;
}
#service-btn{
    color: rgb(7, 6, 6);
    background-color: #fcc302;
    border: 2px solid #fcc302
}
#service-img{
    padding: 5%;
}

@media only screen and (max-width: 768px){
    #service-img{
        padding-top: 10%
    }
}

/* counter */

#counter-section{
    background-image: url("../images/");
    padding-top: 50px;
    padding-bottom: 70px;
    background-position: center;
    background-size: cover;
}
.counter-icon{
    font-size: 70px;
}

@media only screen and (max-width:500px){
    .counter-icon{
        font-size: 50px;
    }
}

/* blog */

#blog{
    padding-bottom: 70px;
    padding-top: 70px;
}
#blog-title{
    font-size: 50px;
    font-weight: bolder;
}
#blog-p{
    font-size: 20px;
    margin-bottom: 70px;
}
.article-details{
    padding: 15px;
    border: 1px solid rgb(185,185,185);
    border-top: 0;
}
.article-date, .article-link{
    color: #00bec9;
}

/* footer */
#footer{
    background-color: #343434;
    padding-top: 80px;
    padding-bottom: 80px;
}
#footer a{
    color: white;
    text-decoration: none;
}
#footer-form{
    margin-top: 10px;
    margin-bottom: 10px;
}
#footer-search-box{
    background-color: #fcc302;
    color: white;
    border: 0;
    padding: 15px;
    width: 100%;
    max-width: 250px;
    position: relative;
    left: 10px;
}
#footer-search-submit{
    background-color: #00bec9;
    color: white;
    border: 0;
    border-radius: 0;
    padding: 15px 40px;
}
.social-icon{
    font-size: 25px;
    padding-left: 5px;
}

@media only screen and (max-width: 1150px){
    #footer-search-box{
        max-width: 200px;
    }
}

@media only screen and (max-width: 768px){
    #footer-search-box{
        max-width: 120px;
    }
}

@media only screen and (max-width: 500px){
    #footer-search-box{
        max-width: 200px;
    }
    #footer{
        padding-top: 10px;
    }
    #footer h4{
        padding-top: 50px;
    }
}