/* header part start  */
.navbar-part {
    position: sticky;
    top: 0px;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0px 0px 15px gray;
}
.top-nav{
    background-color: var(--black);
    padding: 10px 0px;
    position: relative;
}

.top-nav::after {
    content: '';
    position: absolute;
    left: -89px;
    top: 0px;
    border-top: 4px solid black;
    border-bottom: 40px solid rgba(0, 0, 0, 0);
    border-left: 40px solid rgba(0, 0, 0, 0);
    border-right: 50px solid black;
    z-index: 999;
}

.top-nav .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.top-nav .content .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.top-nav .content .wrap .cont {
    margin-right: 10px;
    padding-right: 10px;
    color: var(--white) !important;
    border-right: 2px solid #939393;
}

.top-nav .content .wrap .cont a {
    color: var(--white) !important;
    transition: all 300ms;
    padding: 5px !important;
}

.top-nav .content .wrap .cont a:hover,
a:focus,
a:active {
    color: var(--yellow) !important;
    background-color: transparent !important;
}

.top-nav .content .wrap .cont a i {
    color: var(--yellow) !important;
    margin-right: 5px;
}

.top-nav .content .wrap .social-icon a i {
    color: var(--white) !important;
    margin-left: 8px;
    transition: all 300ms;
}

.top-nav .content .wrap .social-icon a i:hover,
i:focus,
i:active {
    color: var(--yellow) !important;
}

.navbar .nav-link {
    padding: 10px 15px !important;
    color: var(--black) !important;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    text-transform: capitalize;
}

.navbar .nav-link:hover,
.nav-link:active,
.nav-link:focus {
    color: var(--yellow) !important;
    background-color: #f6f6f6 !important;
}

.dekstopnav .user {
    margin-top: 0px;
    margin-left: 30px;
    margin-right: -30px;
}

.dekstopnav .collapse {
    margin: 10px 0px;
    margin-right: 20px;
}

.navbar-toggler {
    background-color: var(--yellow);
    z-index: 999;
    color: #fff;
}
.navbar-toggler i{
    color: #fff;
    font-size: 30px;
}
.dekstopnav .content{
    display: flex;
    width: 100%;
}
.dekstopnav .content .navbar-brand{
    width: 12%;
}
.dekstopnav .content .main-nav {
    align-items: center;
   justify-content: space-around;
    width: 88%;
}

.user {
    display: flex;
    padding: 0px;
    margin: 0px;
    list-style: none;
    margin-top: 30px;
}

.user li {
    margin-right: 30px;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    background-color: var(--black);
    padding: 10px 0px;
}

.contact .cont i {
    color: var(--yellow);
    padding-right: 5px;
    padding-left: 5px;
}

.contact .cont a {
    color: var(--white);
}

.contact .social-icon a {
    color: var(--white);
    padding: 5px;
}

.contact .social-icon a:hover,
a:focus,
a:active {
    color: var(--yellow);
}

.offcanvas-header {
    padding: 0px 15px !important;
}
.dropdowns {
    position: relative;
}
.dropdown-menus {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: absolute;
    top: 45px;
    left: 50%;
    translate: -50% 0px;
    background-color: var(--white);
    z-index: 999999;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    overflow: hidden;
    height: 0px;
    list-style: none;
    padding: 0px;
    margin: 0px;
    -webkit-box-shadow: 0px 10px 15px #00000068;
    box-shadow: 0px 10px 15px #00000068;
}

.dropdown-menus li a {
    line-height: 25px;
    margin: 0px !important;
    padding: 5px 0px;
}

.dropdowns:hover .dropdown-menus {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.navbar .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

/* header part end  */


/* banner part start  */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background-color: #939393;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 48%;
}

.carousel-item {
    height: 100%;
}

.carousel-item .container {
    height: 100%;
}

.banner-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.banner-content .row {
    height: 100%;
}

.banner-content .left,
.right {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.banner-content .title {
    font-size: 60px;
}

.banner-content p {
    font-weight: 600;
    font-size: 18px;
}

/* banner part end  */


/* about part start  */
.about-part {
    background-image: url(/assets/img/about_bg.jpg);
}

.about-part .right .point {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-grid-column-align: center;
    justify-self: center;
    margin: 20px 0px 40px 0px;
}

.about-part .right .point .text h5 {
    font-weight: 600;
    line-height: 32px;
}

.about-part .right .point .text h5 i {
    color: var(--yellow);
    margin-right: 5px;
}

/* about part end  */
.what-we-part {
    background-color: #e8eaee;
}

.what-we-part .wrap {
    position: relative;
    overflow: hidden;
}

.what-we-part .wrap .card {
    padding: 50px 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center;
    text-align: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background-size: cover;
    border-radius: 0px;
    border: none;
    -webkit-box-shadow: 0px 0px 0px #959595;
    box-shadow: 0px 0px 0px #959595;
    background-color: rgba(0, 0, 0, 0.629);
    position: absolute;
    top: -100px;
    left: 0px;
    height: -0%;
    width: 100%;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    overflow: hidden;
    visibility: hidden;
}

.what-we-part .wrap:hover .card {
    top: -0px;
    height: 100%;
    visibility: visible;
}

.what-we-part .card .icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px;
    background-color: var(--yellow);
    margin: 0px auto;
}


.what-we-part .card h5 {
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--white);
    text-transform: capitalize;
    text-align: center;
}

.what-we-part .card p {
    color: #e8eaee;
    text-align: center;
}

.what-we-part .wrap .wrap-footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    background-color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.what-we-part .wrap .wrap-footer h5 {
    padding-left: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.what-we-part .wrap .wrap-footer .icon {
    background-color: var(--yellow);
    padding: 10px 15px;
}

.what-we-part .wrap:hover .wrap-footer {
    right: -100%;
}

/* what we do part end  */

/* project part start  */
.project {
    background-color: #e8eaee;
}

.project .wrap {
    overflow: hidden;
}

.project .wrap .img {
    overflow: hidden;
    max-height: 300px;
}

.project .wrap .img img {
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.project .wrap .details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: var(--white);
}

.project .wrap .details .name {
    padding-left: 20px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.project .wrap .details .name h5 {
    font-weight: 600;
}

.project .wrap .details .icon {
    background-color: var(--yellow);
    font-size: 30px;
    padding: 25px;
    color: var(--black);
}

.project .wrap .details .icon i {
    color: var(--black);
}

.project .wrap:hover img {
    scale: 1.5;
}

.project .wrap:hover .name {
    color: var(--yellow);
}

/* project part end  */

/* TESTIMONIALS part start */
.testimonial {
    background-color: #e9edee;
}

.testimonial .testimonial-slider .wrap {
    background-color: var(--white);
    padding: 50px;
    margin-bottom: 50px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.testimonial .testimonial-slider .wrap .icon {
    width: 100px;
    height: 100px;
}

.testimonial .testimonial-slider .wrap p {
    font-weight: 500;
    font-size: 18px;
    margin: 30px 0px;
}
.testimonial .testimonial-slider .wrap .profile{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.testimonial .testimonial-slider .wrap .profile .img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 30px;
}

.testimonial .testimonial-slider .wrap .profile .name {
    font-weight: 600;
}

.testimonial-slick-prev {
    bottom: 50px !important;
    right: 55px !important;

}

.testimonial-slick-next {
    bottom: 50px !important;
    right: 0px !important;
}

.testimonial .team-member .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 32px;
    border-radius: 5px;
    background-color: var(--white);
    position: relative;
}

.testimonial .team-member .wrap .left {
    width: 90%;
}

.testimonial .team-member .wrap .left .card{
    border: none;
    display: flex !important;
    flex-direction: row;
    align-items: center;
}
.testimonial .team-member .wrap .left .card .left{
    width: 40%;
}
.testimonial .team-member .wrap .left .card .right{
    width: 60%;
}

.testimonial .team-member .wrap .left .card .img {
    border: 1px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    padding: 0px 30px;
}

.testimonial .team-member .wrap .left .card .profile .name {
    font-weight: 600;
    margin-top: 30px;
}

.team-member-slick-prev {
    position: absolute !important;
    bottom: 0px;
    right: 55px;

}

.team-member-slick-next {
    position: absolute !important;
    bottom: 0px;
    right: 0px;
}

.testimonial .team-member .wrap .right {
    width: 30%;
}

.testimonial .team-member .wrap .right .img {
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;
}

.testimonial .team-member .wrap .right .img img {
    overflow: hidden;
    border-radius: 5px;
}


.clients-slider {
    background-color: var(--white);
    -webkit-box-shadow: 0px 0px 15px #c0c0c0;
    box-shadow: 0px 0px 15px #c0c0c0;
    padding: 5px 30px;
    border-radius: 5px;
}

.clients-slider .card {
    margin: 10px;
    padding: 10px;
    border: none;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    overflow: hidden;
}

.clients-slider .card:hover {
    translate: 0px -20px;
}

/* TESTIMONIALS part end  */

/* number talks part start  */
.number-talks {
    background-image: url(/assets/img/counter_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.number-talks .left .text {
    color: var(--yellow);
}

.number-talks .left .title {
    color: var(--white);
}

.number-talks .left p {
    color: var(--white);
    padding: 15px 0px;
}

.number-talks .right .box {
    background-color: #ffffff45;
    padding: 20px;
    position: relative;
}

.number-talks .right .box .num {
    font-size: 55px;
    font-weight: 600;
    color: var(--yellow);
}

.number-talks .right .box h5 {
    font-size: 25px;
    font-weight: 600;
    color: var(--black);
}

.number-talks .box::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-bottom: 50px solid var(--yellow);
    border-left: 50px solid transparent;
}

.number-talks .box::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    border-top: 50px solid var(--yellow);
    border-right: 50px solid transparent;
}

/* number talks part end  */

/* lets talk with us part start  */
.lets-talk {
    background-image: url(/assets/img/contact-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.lets-talk .container {
    position: relative;
    z-index: 999;
}

.lets-talk .left input,
textarea {
    padding: 15px;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: 0px 0px 15px #e7e7e7;
    box-shadow: 0px 0px 15px #e7e7e7;
    width: 100%;
}

.lets-talk .mid .wrap {
    position: relative;
    background-color: var(--white);
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0px 0px 15px #6d6d6d;
    box-shadow: 0px 0px 15px #6d6d6d;
    overflow: hidden;

}

.lets-talk .mid .wrap .icon {
    background-color: var(--yellow);
    padding: 10px;
    height: 100%;
}

.lets-talk .mid .wrap .text {
    padding: 20px;
}

.lets-talk .mid .wrap .text h5 {
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.lets-talk .mid .wrap .text a {
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.lets-talk .mid .wrap .text a:hover {
    color: var(--yellow);
}

.lets-talk .img {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

/* lets talk with us part start  */


/* our management part start   */
.our-management {
    background-image: url(/assets/img/manegement.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.management-title {
    font-size: 35px;
    font-weight: 800;
    color: #fff;
    position: relative;
    margin-top: 40px;
}

.management-title:after {
    content: '';
    height: 10px;
    width: 20%;
    background-color: #ffb703;
    position: absolute;
    top: -35px;
    left: 0px;
}

.our-management p {
    color: var(--white);
    margin: 35px 0px;
}

.our-management .card {
    background-color: transparent;
    border: none;
    margin: 30px 0px;
}

.our-management .card .card-title {
    color: #fff;
    font-weight: 500;
}

.our-management .card .bg {
    background-color: #fff;
    width: 100%;
    height: 20px;
}

.our-management .card .bg .yellow .num {
    position: absolute;
    z-index: 99;
    top: -30px;
    right: -10px;
    color: var(--white);
}

.our-management .card .bg .yellow {
    background-color: var(--yellow);
    height: 20px;
    position: relative;

}

.our-management .card .bg .planning {
    width: 85%;
    animation-name: planning;
    animation-duration: 2s;
}

@keyframes planning {
    0% {
        width: 0%;
    }

    100% {
        width: 85%;
    }
}

.our-management .card .bg .design {
    width: 95%;
    animation-name: design;
    animation-duration: 2s;
}

@keyframes design {
    0% {
        width: 0%;
    }

    100% {
        width: 95%;
    }
}

.our-management .card .bg .development {
    width: 75%;
    animation-name: development;
    animation-duration: 2s;
}

@keyframes development {
    0% {
        width: 0%;
    }

    100% {
        width: 75%;
    }
}

.our-management .card .bg .delivery {
    width: 85%;
    animation-name: delivery;
    animation-duration: 2s;
}

@keyframes delivery {
    0% {
        width: 0%;
    }

    100% {
        width: 85%;
    }
}

/* our management part end   */



/* work with us part start  */
.work-with {
    background-image: url(/assets/img/work_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.work-with .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.work-with .content .title {
    color: var(--white);
}

.work-with .content .text {
    color: var(--yellow);
}

.work-with .content p {
    color: var(--white);
}


/* work with us part end  */


/* footer part start  */
.footer {
    background-image: url(/assets/img/footer-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.footer-logo {
    background-color: var(--white);
    margin-bottom: 30px;
    padding: 10px 0px;
    text-align: center;
}

.top-footer p {
    color: var(--white);
}

.top-footer .social-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 0px;
}

.top-footer .social-icon li a {
    color: var(--white);
    padding: 0px 10px;
    font-size: 22px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;

}

.top-footer .social-icon li a:hover {
    color: var(--yellow);
}

.top-footer .footer-title {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 30px;
}

.top-footer .con-info {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.top-footer .con-info .icon i {
    color: var(--yellow);
    font-size: 20px;
    font-weight: 800px;
    margin-right: 10px;
}

.top-footer .con-info a {
    color: var(--white);
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    line-height: 28px;
}

.top-footer .con-info a:hover {
    color: var(--yellow);
}

.top-footer .link {
    padding: 0px;
    list-style: none;
}

.top-footer .link li {
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.top-footer .link li a {
    color: var(--white);
    line-height: 30px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.top-footer .link li:hover {
    translate: 15px 0px;
}

.top-footer .link li:hover a {
    color: var(--yellow);
}

.top-footer .link li a i {
    color: var(--yellow);
    margin-right: 5px;
}

.top-footer .newlatter input {
    padding: 15px;
    margin-bottom: 25px;
    width: 100%;
}

.top-footer .newlatter button {
    width: 100%;
}

.bottom-footer {
    background-color: rgba(0, 255, 255, 0.078);
    padding: 20px 0px;
}

.bottom-footer .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bottom-footer .content .left {
    color: var(--white);
}

.bottom-footer .content .left a {
    color: var(--yellow);
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.bottom-footer .content .left a:hover {
    color: var(--white);
}

.bottom-footer .content .right ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0px;
    padding: 0px;
}

.bottom-footer .content .right ul li {
    margin-left: 30px;
    color: var(--yellow);
}

.bottom-footer .content .right ul li a {

    color: var(--white);
    text-transform: capitalize;
}

/* footer part end  */


.banner-content .title-part .small-title .text{
    font-weight: 700;
    color: var(--black);
}