.site-logo {
    max-width: 250px;   
}
.header-area.header-area1 {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1921568627);
}

.header-area.header-area1.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 111;
    animation-name: fade-in-down;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background-color: #123CDD;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
    box-shadow: rgba(0, 0, 0, 0.068) 0px 20px 30px;
    transition: all 0.3s ease-in-out;
    z-index: 999;
    border-bottom: non
}
.header-area.header-area1 .header-elements .main-menu-ex ul li a {
    color: #f4f4f5;
    font-size: 16px;
    display: block;
    font-weight: 400;
    padding: 10px 15px;
    transition: all 0.3s;
}
.header-area.header-area1 .header1-buttons .contact-btn .headding p{
    color: #c7c5c5;
}

.header-area.header-area1 .header1-buttons .contact-btn .headding a{
     color: #f4f4f5;
}

.hero1 .main-headding span.span {
    display: inline-block;
    font-size: var(--f-fs-font-fs16);
    line-height: var(--f-fs-font-fs16);
    font-weight: var(--f-fw-blod);
    color: #c7c5c5;
    margin-bottom: 16px;
}

.hero1 .main-headding h1 {
    font-size: var(--f-fs-font-fs64);
    font-weight: var(--f-fw-blod);
    line-height: var(--f-fs-font-fs70);
    color: #f4f4f5;
}

.hero1 .main-headding h1 span.after {
    color: #f9d026;
}

.hero1 .main-headding p {
    font-size: var(--f-fs-font-fs16);
    line-height: var(--f-fs-font-fs28);
    font-weight: var(--f-fw-regular);
    color: #f4f4f5;
}

.hero1 .buttons .play-btn {
    display: inline-block;
    margin-left: 30px;
    font-size: var(--f-fs-font-fs18);
    font-weight: var(--f-fw-blod);
    line-height: var(--f-fs-font-fs18);
    color: #f4f4f5;
}

.theme-btn1 {
    display: inline-block;
    background-color: #f4f4f5;
    border-radius: 7px;
    padding: 16px 20px;
    color: var(--ztc-bg-main-bg-1);
    font-weight: var(--f-fw-blod);
    overflow: hidden;
    position: relative;
    z-index: 9;
    transition: all 0.4s;
    border: none;

&::after {
    content: "";
    position: absolute;
    background-image: url(../img/icons/navantro-header-top-span.png);
    height: 100%;
    width: 0%;
    top: 0;
    left: auto;
    right: 0;
    z-index: -1;
    opacity: 0.5;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(1.5);
    transition: all .4s;
    animation-name: shape-animaiton4;
    animation-duration: 52s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;

  }

  span {
    display: inline-block;
    padding-left: 4px;
  }

  &:hover {
    color: #fff;
    transform: translateY(-4px);
    transition: all .4s;
    background-color: #3059CE;
    &::after {
      width: 100%;
      transition: all .4s;
      left: 0;
      right: auto;
    }
  }

 }

#hire-developers{
    color: #f9d026;
    font-weight: 700;
}
.header-area.header-area1 .header-elements .main-menu-ex ul li .mega-menu-all{
    min-height: 320px;
}

.header-area.header-area1 .header-elements .main-menu-ex ul li ul{
    top:56px;
}
.header-area.header-area1 .header-elements .main-menu-ex ul li .mega-menu-all ul li a{
    padding: unset;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 38px;
}

.hero1 .hero1-all-images .image2 {
    position: absolute;
    right: 40px;
    bottom: 0px;
}

.hero1 .hero1-all-images .image3{
    position: absolute;
    right: -2px;
    top: 60px;
}
.hero1 .hero1-all-images .image4{
    position: absolute;
    bottom: 0;
    top: 375px;
    right: -2px;
}
.hero1 .hero1-all-images .shape1 {
    position: absolute;
    left: 46px;
    top: 80px;
}
.hero1 .hero1-all-images .shape2 {
    position: absolute;
    bottom: 118px;
    left: -92px;
}
.hero-bottom-area .single-box .icon {

    margin-top: -65px;
}
.common-hero{
background-image: url(/static/assets/img/bg/hero3-bg.png); background-position: center; background-repeat: no-repeat; background-size: cover;
}
.common-hero .main-heading h1{
    color: #f4f4f5;
}
.common-hero .main-heading span.span a{
color: #f4f4f5;
}
.common-hero .main-heading span.span{
color: #f4f4f5;
}

.common-hero .main-heading span.span img{
width: 22px;
}

.common-hero.error .heading1 h2{
    color: #f9d026;
}

.common-hero.error p{
    color: #f4f4f5;
}

.blog .blog-box .image{
    width: 415px;
    height: 350px;
}
.marquee-text{
    line-height: 26px;
}
.marquee-text i{
    font-size: 13px;
    margin: 3px;
    margin-top: 0px;
}
.marquee-text .marguee-item{
    font-size: 15px;
    font-weight: bolder;
}

.common-hero .main-heading h1{
   font-size: 2.5rem !important;
}

.solution .item-box .icon{
    width: 30%;
}

.heading1 .heading1-li {
    font-size: var(--f-fs-font-fs16);
    line-height: var(--f-fs-font-fs28);
    font-weight: var(--f-fw-regular);
    color: var(--ztc-text-pera-text-1);
    transition: all 0.4s;
}

.industries .heading1{
    padding-left: 10px;
}

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

    .mobile-header{ 

        background: #123CDD;

    }
    .mobile-sidebar{
         background: #123CDD;
    }
    .mobile-sidebar .logo-m{
        width: 185px;
    }
    .mobile-logo img{
        width: 185px;
    }
    .mobile-nav-icon{   
        background: white;
    }
    .hero1 .hero1-all-images .shape1{
        display: none;
    }
    .hero1 .hero1-all-images .shape2{
         display: none;
    }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    .header-area.header-area1 .header-elements .main-menu-ex{
        padding: 2px 10px;
    }
    .header-area.header-area1 .header-elements .main-menu-ex ul li a{
        padding: 10px 11px;
    }

    .header-area.header-area1 .header1-buttons .contact-btn {
        margin-right: 0px;
    }
    .header-area.header-area1 .header1-buttons .contact-btn .headding{
        max-width: 95px;
    }
    .header-area.header-area1 .header1-buttons .button .theme-btn1{
        padding: 15px 10px;
    }
    .hero1 .hero1-all-images .shape1{
        left:0;
    }
}