body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* header area css*/

.nav {
    padding: 20px 0;
    background-color: rgb(12, 71, 203);
    color: #fff !important;
    transition: all 0.4s ease-in-out;

}


.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    border-top: 0;
    background-color: #fff;
     !important;
    padding: 10px 0px;
    border-bottom: none;
    box-shadow: 0 10px 30px -10px rgb(0 64 128 / 20%);
}

.logo .black {
    display: none;
}

.navbar-brand {
    color: #fff;
}

.sticky .navbar-brand {
    color: #000;
}

.sticky .logo .black {
    display: inline-block;
}

.sticky .logo .white {
    display: none;
}

.navbar li.nav-item {
    padding: 0 12px;
}

.navbar a.nav-link {
    color: #fff;
    font-weight: 500;
    transition: all 0.2s;
}

.sticky a.nav-link {
    color: #000;
}


.navbar a.nav-link:hover {
    color: #ffaa17;
    transition: all 0.2s;
}


.navbar-nav {
    align-items: center;

}

a {
    color: #ffaa17;
}

.navbar-brand {
    font-size: 30px;
}

.logo {
    width: 50px;
}

h1 {
    color: #ffaa17;
}

background: rgb(12, 71, 203) url(img/banner-img.jpg);

.banner-bg h1 {
    font-size: 60px;
}

.banner-bg {
    background: rgb(21, 41, 95) url(img/banner-img.jpg);
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
}

.banner-btn {
    color: #fff;
    padding: 20px 50px;
    border-radius: 10px;
    background-color: #ffaa17;
    transition: all 0.4s;
}

.banner-btn:hover {
    background-color: #fff;
    transition: all 0.4s;

}

.banner-btn2 {
    border: solid 2px #ffaa17;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #ffaa17;
    transition: all 0.4s;
}

.banner-btn2:hover {
    background-color: #fff;
    transition: all 0.4s;
}

.features-icon {
    font-size: 35px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #ffaa17;
    margin-left: 40%;
    margin-right: 50%;
    text-align: center;

}

.features {
    padding: 20px 10px;
    box-shadow: 5px 5px 40px rgba(190, 195, 206, 0.83);
    margin-top: -80px;
    border-radius: 5px;
    background-color: #fff;
}

.about-img img {

    right: 20%;
    width: 80%;
    border-radius: 8px;
    animation: alltuchtopdown 5s infinite linear;
    position: absolute;
}

.img-fluid {
    max-width: 100%;
    height: auto;

}

.color {
    color: #ffaa17;
}

.img-box {
    overflow: hidden;
    transition: all 0.4s;

}

.img-box img {
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 10px;
    transition: all 0.4s linear;
    width: 800px;
    height: 700px;

}


.img-box img:hover {
    transform: scale(1.2);
    transition: all 0.4s linear;
    display: block;
    border-radius: 10px;



}

.btn-3 {
    transition: all 0.3s;
}

.btn-3:hover {
    color: #ffaa17;
    transition: all 0.3s;
}

.img-box2 {
    overflow: hidden;
    transition: all 0.4s;

}

.img-box2 img {
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 5px;
    transition: all 0.4s linear;

}

.img-box2 img:hover {
    transform: scale(1.2);
    transition: all 0.4s linear;
    display: block;
    border-radius: 5px;

}

.blog h6 {
    transition: all .3s;

}

.blog:hover h6 {
    color: #ffaa17;
    transition: all .3s;
}

.blog a {
    transition: all .3s;
}

.blog:hover a {
    color: #ffaa17;
    transition: all .3s;
}

.blog-card {
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(193, 174, 174, 0.38);
}


}

.color {
    color: #ffaa17;


}

.about-icon {
    font-size: 30px;
    background-color: #ffaa17;
    border: solid 2px #ffaa17;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    transition: all 0.4s;
}

.about-icon:hover {
    background-color: #fff;
    color: #ffaa17;
    border: solid 2px #ffaa17;
    transition: all 0.4s;
}

.about-btn {
    border: solid 2px #ffaa17;
    padding: 15px 35px;
    border-radius: 5px;
    background-color: #ffaa17;
    color: #fff;
    transition: all 0.3s;
}

.about-btn:hover {
    background-color: #fff;
    color: #ffaa17;
    transition: all 0.3s;

}

.btn-three {
    position: absolute;
    transform: translate(-50% -50%);
}

a {
    text-decoration: none;
    display: inline-block;
    color: #000;
}

.Service-bg {
    background-color: rgba(232, 236, 240, 0.72);
}

.service-icon {
    font-size: 35px;
    height: 60px;
    width: 56px;
    border-radius: 30%;
    background-color: rgba(229, 207, 169, 0.41);
    margin-left: 40%;
    margin-right: 50%;
    text-align: center;
    color: #ffaa17;
}

.service-card {
    border: solid 2px rgba(230, 229, 225, 0.19);
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px rgba(219, 220, 221, 0.83);
    transition: all 0.4s;
    background-color: #fff;
}

.service-card:hover .service-icon {
    background-color: #ffaa17;
    color: #fff;
    transition: all 0.4s;
}

.service-card:hover .service-btn {
    background-color: #ffaa17;
    color: #fff;
    transition: all 0.4s;
}

.service-btn {

    border: solid 2px rgba(229, 207, 169, 0.41);
    padding: 7px 20px;
    border-radius: 20px;
    transition: all 0.4s;

}

.btn-four {
    padding-left: 33%
}

.team-icon i {
    font-size: 20px;
    background-color: #ffaa17;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 4px 8px;
    color: #fff;
    transition: all 0.3s;
    border: solid 2px #ffaa17;

}

.team-icon i:hover {
    background-color: #fff;
    color: #ffaa17;
    transition: all 0.3s;
    border: solid 2px #ffaa17;
}

.Name-size {
    padding-left: 15%;

}

.position {
    padding-left: 30px;
}

.term-card {
    padding-top: 10px;
    border-bottom: solid 2px #ffaa17;
    border-right: solid 2px #ffaa17;
    border-left: solid 2px #ffaa17;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

.Team-area {
    transition: all 0.3s;
}

.Team-area:hover {
    transform: translateY(-10px);
    transition: all 0.3s;
}

.feature-icon {
    font-size: 60px;
    transition: all 0.3s;
}

.features-card {
    padding: 10px 25px;
    box-shadow: 2px 2px 70px rgba(229, 227, 223, 0.73);
    border-radius: 10px;
    transition: all 0.3s;
}

.features-card:hover i {
    color: #ffaa17;
    transition: all 0.3s;
    font-size: 62px;
}

.features-card:hover h2 {
    color: #ffaa17;
    transition: all 0.3s;
}

.testimonial-img { 
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial {
    border-radius: 80%; 
    width: 100px;
    height: 75px;
}

span {
    color: #ffaa17;
}

.testimonial-card {
    border: solid 2px rgba(255, 170, 23, 0.19);
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    transition: all .6s;
}

.testimonial-card:hover {
    border: solid 2px #ffaa17;
    border-radius: 5px;
    transition: all .6s;
}

.testimonial-card:hover h2 {
    color: #ffaa17;
    transition: all .6s;
}

.testimonial-icon i {
    color: #ffaa17;
}

.testimonial-card h2 {
    transition: all .6s;
}

.footer-bg {
    background-color: rgba(255, 170, 23, 0.1);
}

.footer-img img {
    width: 50px;
}

.footer-icon i {
    font-size: 20px;
    margin-right: 10px;
    background-color: #ffaa17;
    border-radius: 50px;
    padding: 6px 9px;
    color: #fff;
    transition: all 0.3s;
    border: solid 2px #ffaa17;

}

.footer-icon i:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.79);
    border: solid 2px #ffaa17;
    transition: all 0.3s;
}

.footer-menu ul li {
    text-decoration: none;
    transition: all 0.3s;
}

.footer-menu ul li:hover {
    margin-left: 10px;
    transition: all 0.3s;
}

.footer-menu ul li a:hover {
    text-decoration: underline;
}

ul li a {
    color: rgba(0, 0, 0, 0.69);
}

ul li a:hover {
    color: #ffaa17;
}

.footer-contact .d-flex {
    transition: all 0.3s;
}

.footer-contact .d-flex:hover {
    margin-left: 10px;
    transition: all 0.3s;
    color: #ffaa17;
}

.d-flex a:hover {
    color: #ffaa17;
}


.item {
    margin: 50px auto;
    padding-top: 75px;
    text-align: center;
    font-size: 3em;
}

 


@media screen and (max-width: 900px) {

    .features {
        margin-top: 30px;
    }
    .container {
        overflow-x: hidden;
    }
    

    body {
        overflow-x: hidden;
    }
    .footer-bg {
        overflow-x: hidden;
    }
}



@media screen and (max-width: 600px) {
   

    .banner-bg {
        height: auto
    }

    .features {
        margin-top: 30px;
    }
    
    .img-box img {
        width: 100%;
        height: auto;
    }
    
    #About .item {
        margin: 0px auto;
        padding-top: 5px; 
        padding-bottom: 20px
    }
    
    .about-img img {
        right: 0;
    }
    
   

}