/* nav-menu-bar */
a{
    color: #ffffff80;
}

strong{
    color: #ffffff;
    font-size: 22px;
}

h2, h4 {
    color: #121820;
}

a{
    text-decoration: none;
    transition: 0.5s;
}
li{
    list-style: none;
}

/* navbar */

.navbar-nav a:hover{
    color: #000000;
    transition: 1s ease-out;
}

.active{
    color: #F57C00 !important;
}

div#mainmenu a {
    color: #000000;
    padding-left: 10px;
}

.zero-time-navbar{
    background-color: #ffffff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.navbar-brand img {
    max-width: 180px;
}

.navbar-brand h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    padding-left: 65px;
    color: #000000;
}

.navbar-brand {
    width: 300px;
}

.navbar-nav li {
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 23px;
    padding-left: 12px;
}

.navbar {
    padding: 20px 0 20px;
	transition: 0.8s ease-in; 
    
}

.b-btn:focus{
    box-shadow: none;
}
.b-btn {
    border: none !important;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #000000;
}

.h-btn {
    margin-left: 110px;
}

.h-btn button.btn.btn-primary {
    background: #F57C00;
    border: none;
    transition: 0.6s;
}

.h-btn .btn-primary:focus{
    box-shadow: none;
}

.h-btn button.btn.btn-primary:hover {
    background: none;
    color: #121820 !important;
    outline: 1px solid;
    transition: 0.6s;
}

.sticky {
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 40%);
    padding: 10px 0;
    z-index: 999999;
    transition: 1s ease-out;
}

/* hire-form */

.hire-close-btn .btn-close:focus {
    box-shadow: none;
}
.hire-form input, .hire-form textarea#floatingTextarea2, .hire-form .form-control:focus {
    border: none;
    background: #F2F2F2;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 7px 10px;
    box-shadow: 0px 2px 0px 0px #000000;
}

.hire-form .form-select:focus {
    box-shadow: none;
    border: none;
    background: #F2F2F2;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0px 2px 0px 0px #000000;
}
.hire-form select.form-select {
    border: none;
    background: #F2F2F2;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 6px 10px;
    box-shadow: 0px 2px 0px 0px #000000;
}
.zts-form .modal-content {
    border: none;
    box-shadow: 0px 0px 10px 0px #12182094;
}
.zts-form {
    max-width: 800px;
    min-height: calc(100% - 0.5rem);
}
.modal-footer button.btn.btn-primary:hover {
    background: #121820;
    color: #ffffff !important;
    transition: 0.6s;
}

/* hero-section */

.hero-section {
    background: url(../images/hero-banner.png) rgb(18 24 32 / 80%) no-repeat center / cover;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    height: 50vw; 
    max-height: 900px;
    min-height: 600px; 
}


.banner-content {
    color: #ffffff;
    text-align: center;
    height: 900px;
    margin: auto;
    width: 60%;
    padding-top: 300px;
}

.get-btn a {
    color: #ffffff;
    background: #F57C00;
    padding: 10px 40px;
    border-radius: 5px;
}

.get-btn a:hover {
    background: #121820;
    transition: 0.5s;
    color: #ffffff !important;
    text-decoration: none;
}

.banner-content span {
    color: #F57C00;
}

/* hero-bottom-section */

.skill-box {
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px #0000000f;
    border-radius: 20px;
    padding: 30px;
    min-height: 345px;
    cursor: pointer;
    transition: 0.7s;
}

.skill-box:hover {
    margin-top: -15px;
    transition: 0.7s;
}

.hero-bottom-section {
    margin-top: -100px;
    margin-bottom: 50px;
}

.z-creative {
    background: #121820;
    color: #ffffff;
}

.banner-content p {
    color: #ffffffcc;
}

.z-creative p {
    color: #ffffffcc !important;
    margin-bottom: 0;
}

.skill-box p{
    color: #3C3C3C;
}

.banner-content p {
    margin: 25px 0 30px;
}

/* about-section */

button.accordion-button {
    background: #121820 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #3C3C3C;
}

.accordion-body {
    background: #121820;
    color: #ffffffcc;
    border-radius: 0px 0px 10px 10px;
}

.accordion-item {
    margin-bottom: 15px;
}

.about-img {
    text-align: center;
    margin-top: -115px;
    position: relative;
}

.about-content {
    position: relative;
}

.about-left-img {
    margin-top: -460px;
    margin-right: 248px;
}

.about-bg-img {
    position: absolute;
    right: 0;
}

.about-section {
    position: relative;
    margin: 100px 0 50px;
}

.about-right-img {
    margin-left: 372px;
}

.about-title h2 {
    margin-bottom: 20px;
}

.about-title h4 {
    margin-bottom: 15px;
} 
.about-left-img-mobile {
    display: none;
}

.about-right-img-mobile {
    display: none;
}

.about-content .accordion-button:focus {
    box-shadow: none;
}

.about-title p {
    color: #6B6B6B;
    margin: 20px 0;
}

.about-content .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

.about-content .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.about-content button.accordion-button.collapsed {
    border-radius: 10px !important;
}

.about-content button.accordion-button {
    border-radius: 10px 10px 0px 0px !important;
}

.about-content .accordion-item {
    border-radius: 10px;
}
.mobile-view-content {
    display: none;
}

/* tech-stack-section */

.tech-content{
    text-align: center;
    margin-bottom: 50px;
}
.tech-stack {
    margin: 100px 0 50px;
}
.tech-logo img {
    max-width: 100px;
}

.tech-content p {
    color: #6B6B6B;
    margin-top: 20px;
}

.tech-logo {
    margin: auto;
    width: 57%;
    height: 118px;
    display: grid;
    align-content: center;
    justify-content: center;
}

.angular-logo{
    background-image: url(../images/angular.png);
    width: 100px;
}

.html-logo{
    background-image: url(../images/html.png);
    width: 100px;
}

.css-logo{
    background-image: url(../images/css.png);
    width: 100px;
}

.js-logo{
    background-image: url(../images/js.png);
    width: 100px;
}

.laravel-log{
    background-image: url(../images/laravel.png);
    width: 100px;
}

.magento-logo{
    background-image: url(../images/magento.png);
    width: 100px;
}

.mongodb-logo{
    background-image: url(../images/mongodb2.png);
    width: 100px;
}

.node-logo{
    background-image: url(../images/node.png);
    width: 100px;
}

.php-logo{
    background-image: url(../images/php.png);
    width: 100px;
}

.react-logo{
    background-image: url(../images/react.png);
    width: 100px;
}

.wordpress-logo{
    background-image: url(../images/wordpress.png);
    width: 100px;
}

.tech-logo-img{
    transition: 0.8s;
    display: inline-block;
}

.tech-logo-img img:hover {
    opacity: 0;
    transition: 0.5s;
}

/* counter-section */

.counter-section {
    background: #121820;
    padding: 80px 0 260px;
}

.rating-number {
    display: flex;
    width: 52%;
    margin: auto;
    color: #ffffff;
}

.rate-content {
    text-align: center;
    color: #ffffff;
    margin-top: 20px;
}

.rating-number p.counter-count {
    font-size: 40px;
    font-weight: 600;
    margin: 7px 12px;
}

.rating-number span {
    font-size: 30px;
    margin-top: 15px;
}

.counter {
    border-bottom: 1px solid;
    padding-bottom: 40px;
}

/* testimonial-section */

.testimonial {
    text-align: center;
    margin: 0 0 55px;
}

.testimonial-item img {
    max-width: 20px;
}

.item.testimonial-item {
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px #00000014;
    padding: 30px;
    border-radius: 10px;
    margin: 5px;
    min-height: 330px;
}

.testimonial-item p {
    margin: 15px 0;
    color: #121820;
}

.testimonial-item h6 {
    color: #F57C00;
}

.testimonial h2 {
    color: #ffffff;
}

.testimonial p {
    color: #ffffff80;
}

.testimonial-section {
    position: relative;
    top: -220px;
}

.testimonial-slider button.am-next, .testimonial-slider button.am-prev {
    background: none;
    border: none;
    color: #F57C00;
}

.testimonial-slider .owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
}

/* services-section */

.services-section {
    margin: -150px 0 80px;
}

.services {
    text-align: center;
    margin-bottom: 40px;
}

.services p {
    color: #6b6b6b;
}

.services-slider button.service-next, .services-slider button.service-prev {
    background: none;
    border: none;
    color: #F57C00;
}

.services-slider .owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
}

.service_read_more {
    height: 120px;
    overflow: hidden;
    position: relative;
}
  
.service_read_more.active {
    height: auto;
}

.readmore-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to bottom, transparent, white);
}

.read_more_toggle_btn {
    margin-top: 10px;
    font-weight: 600;
    color: #121820;
    cursor: pointer;
    font-size: 15px;
    border-radius: 5px;
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto;
}
  
.read_more_toggle_btn.active .fas {
    transform: rotate(180deg);
}

.service_read_more h5 {
    color: #121820;
    margin: 0 0 20px;
}

.service_read_more p {
    color: #121820;
}

.service_read_more h5:before {
    content: "";
    position: absolute;
    top: 33px;
    width: 100%;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(130deg,#F57C00 9%,#ffffff 8%,#ffffff 13%,#3C3C3C 0%);
}

.service-card {
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
    border: 2px solid #3C3C3C;
    border-top: none;
}

.services-item img {
    border-radius: 7px 7px 0px 0px;
}

/* career-section */

.career, .career-img {
    text-align: center;
}

.career {
    color: #121820;
    margin-bottom: 80px;
}

.career p {
    color: #6B6B6B;
    margin-top: 20px;
}

.career-img img {
    max-width: 100%;
}

.career-section {
    background: #F4F4F4;
    padding: 50px 0;
}

.career-slider {
    margin: auto;
    width: 60%;
    margin-top: 100px;
}

.career-item {
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0px 0px 15px 1px #0000000d;
    margin: 5px;
}

.career-item p {
    margin: 20px 0px 0px 0;
    color: #6B6B6B;
}


.career-slider button.career_slider-next, .career-slider button.career_slider-prev {
    background: none;
    border: none;
    color: #F57C00;
}

.career-slider .owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
}


/* contact-section */

.contact-section {
    margin: 80px 0;
}

.contact-form .form-control:focus {
    box-shadow: none;
    background-color: F2F2F2;
    box-shadow: 0px 2px 0px 0px #000000;
}

.contact-form .btn-check:focus+.btn-primary, .contact-form .btn-primary:focus {
    box-shadow: none !important;
}

.contact-form .form-control {
    border: none;
    background: #F2F2F2;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: 0px 2px 0px 0px #000000;
}

.contact-form button.btn.btn-primary {
    width: 100%;
    background: #121820;
    border: none;
    padding: 12px 0;
    border-radius: 10px;
}

.contact-content p {
    color: #6B6B6B;
    margin: 20px 0;
}

.contact-form button.btn.btn-primary:hover {
    background: none;
    color: #121820;
    outline: 1px solid #121820;
}

.contact-details p, .contact-details a {
    color: #121820;
}

.contact-details p {
    margin: 15px 0px 15px 20px;
}

.location, .phone, .email {
    display: flex;
}

.location img {
    margin-top: -20px;
}


/* footer-section */

.footer-section {
    background: #121820;
    position: relative;
    padding: 80px 0 1px;
}

.footer-bg {
    position: relative;
    text-align: right;
    right: 291px;
}

.footer-content {
    background: url(../images/footer-bg.png);
    background-repeat: no-repeat;
    border-bottom: 1px solid;
    padding-bottom: 50px;
}

.newslatter-form input.form-control {
    padding: 13px 0px 13px 15px;
    font-size: 15px;
    border-radius: 35px !important;
    background: #ffffffff;
    border: none;
}

.newslatter-form button.btn.btn-outline-secondary {
    padding: 5px 10px;
    border-radius: 34px;
    background: #F57C00;
    color: #ffffff;
    border-color: #F57C00;
    box-shadow: 0px 0px 2px 2px #3434344f;
}

.newslatter-form .input-group-append {
    position: absolute;
    right: -3px;
    top: 0;
}

.newslatter-form .input-group {
    position: relative;
}

.footer-logo p {
    margin: 40px 0;
}

.social ul {
    display: flex;
    padding: 0;
}

.social li {
    margin-right: 20px;
}

.social a {
    background: #ffffff;
    color: #121820;
    padding: 8px 11px;
    border-radius: 48px;
    transition: 0.5s;
    box-shadow: 0px 0px 5px 3px #2e2e2e;
}

a.fb {
    padding: 8px 14px;
    
}

a.fb:hover {
    padding: 8px 14px !important;
}

.social a:hover {
    background: #F57C00;
    color: #ffffff;
    padding: 8px 11px;
    border-radius: 48px;
    transition: 0.5s;
}

.quik-link ul {
    padding: 0;
    margin-top: 20px;
}

.quik-link li {
    margin-bottom: 10px;
}

.quik-link a:hover {
    color: #F57C00;
    text-decoration: none;
}
.quik-link a {
    color: #ffffff80;
}

.it-services a {
    color: #ffffff80;
}

.it-services ul {
    padding: 0;
    margin-top: 20px;
}

.it-services li {
    margin-bottom: 10px;
}

.it-services a:hover {
    color: #F57C00;
    text-decoration: none;
}

.newslatter p {
    margin: 35px 0;
}

input.form-control:focus {
    z-index: 0 !important;
    box-shadow: none;
}

.footer-logo p, .newslatter p{
    color: #ffffff80;
}

/* footer-bottom */

.footer-bottom {
    text-align: center;
    margin: 35px 0;
    color: #6B6B6B;
}

/* fixed-btm-top */

.fixed-btm-top {
    text-align: right;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

a.fixed-btn {
    background: #F57C00;
    padding: 8px 13px;
    border-radius: 5px;
    font-size: 17px;
    color: #ffffff;
    box-shadow: 0px 0px 8px 0px #121820;
}