.aboutsec h4,
    .ftrcon h5,
    .ftrcon h6,
    .mainBanner h1,
    .ourworksec h4,
    .servicesec h2,
    section.aboutsec.homeabout h2 {
        font-weight: 800;
        line-height: normal;
        text-transform: uppercase
    }


.abtwrap small {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    margin: 30px 0;
    display: inline-block;
}

    .abtimg a,
    .awardsec,
    .categories-tab,
    .categories-tabs,
    .countbox,
    .ctasec,
    .formsec button,
    .ftrlogo,
    .main-header,
    .mainBanner,
    .servicesec h2,
    .servicesec h4,
    .servicesec p,
    footer .cont-info,
    span.arrows,
    ul.dropdown li a,
    ul.slick-dots {
        text-align: center
    }

    .mn-btn,
    .ourworksec label,
    .servicesec h2,
    section.aboutsec.homeabout h2 {
        text-transform: uppercase
    }

    .dropdown-nav,
    .ovr-hiddn,
    [class^=btnn-],
    ul.slick-dots li {
        overflow: hidden
    }

    .menu-Bar,
    a,
    input[type=submit],
    span.arrows {
        cursor: pointer
    }

    .dropdown-nav,
    .ftrcon ul li,
    .menu,
    .menu li,
    ul.dropdown li,
    ul.slick-dots li {
        vertical-align: middle
    }

    a,
    body,
    p {
        font-size: 16px
    }

    .ourworksec label {
        color: #000;
        font-size: 80px;
        font-weight: 800
    }

    .servicesec h2 {
        font-size: 80px;
        color: #fff
    }

    .awardsec h4 span,
    .box .package-head h4 span,
    .ctasec h4 span,
    .mainBanner h1 span,
    .service-detail h4 span,
    .servicesec h2 span,
    .servicesec h4 span,
    section.aboutsec.servicedetailsec h4 span {
        color: #ffc107
    }

    section.aboutsec.homeabout h2 {
        font-size: 40px;
        color: #000;
        padding-bottom: 15px
    }

    .logo img,
    .myaccordion li.active .faq-opt,
    .overlay.active,
    [class^=box-].showfirst,
    p {
        display: block
    }

    .mainBanner p {
        color: #fff;
        font-size: 20px;
        margin-bottom: 30px;
        line-height: 1.9
    }

    ::selection {
        background-color: #BD8E00;
        color: #fff;
        text-shadow: none
    }

    ::-webkit-scrollbar {
        width: 10px;
        background-color: #f5f5f5
    }

    ::-webkit-scrollbar-button:end:increment,
    ::-webkit-scrollbar-button:start:decrement {
        display: none
    }

    ::-webkit-scrollbar-track-piece {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #dedede
    }

    ::-webkit-scrollbar-thumb:vertical {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background: linear-gradient(90deg, #ffc107 0, #BD8E00 100%)
    }

    .awardsec .col-md-3:last-child:before,
    .mobmenu,
    .myaccordion li .faq-opt,
    .overlay,
    [class^=box-] {
        display: none
    }

    .myaccordion li.active .faq-ang h4:before {
        content: '\f077'
    }

    footer .cont-info {
        margin-bottom: 60px;
        justify-content: space-between;
    }

    footer .cont-info a {
        width: 33%;
    }

    footer .cont-info a {
        color: #fff;
        display: inline-block;

        font-weight: 700;
        font-size: 20px
    }

    .servicesec ul li a:hover,
    footer .cont-info a:hover {
        color: #ffc107
    }

    footer .cont-info a i {
        color: #ffc107;
        margin-right: 10px
    }

    ul.dropdown li a,
    ul.dropdown li a:hover {
        color: #000 !important
    }

    section.ourworksec {
        margin: 100px 0
    }

    .categories-tab {
        margin-bottom: 40px
    }

    .menu li a:hover:before,
    .menu li.activetab a:before {
        opacity: 1
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        overflow-x: hidden;
        line-height: 1;
        color: #fff;
        background-color: #101010;
        position: relative
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        display: block;
        font-weight: 400
    }

    .logo,
    .menu,
    .menu li,
    .sprite-icn:before,
    a,
    input[type=submit],
    span,
    ul.slick-dots li {
        display: inline-block
    }

    *,
    :focus,
    :hover {
        outline: 0 !important
    }

    img {
        max-width: 100%;
        height: auto
    }

    a:hover {
        color: #e00000;
        text-decoration: none
    }

    a,
    p {
        font-weight: 400;
        color: #000
    }

    p {
        line-height: 26px
    }

    .slick-list {
        margin: 0 -15px
    }

    .slick-slide {
        margin: 0 15px
    }

    ul.slick-dots {
        padding: 50px 0 0
    }

    ul.slick-dots li {
        margin: 0 20px 0 0;
        width: auto;
        padding: 0;
        border: none
    }

    .slick-dots li button:before {
        color: #fff;
        opacity: 1;
        font-size: 20px
    }

    .slick-dots li button {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        padding: 0;
        background: #d6d6d6;
        border: none;
        cursor: pointer;
        font-size: 0px;
        box-sizing: border-box
    }

    .slick-dots li.slick-active button {
        background: #f3c919;
        width: 11px;
        height: 11px
    }

    span.arrows {
        width: 40px;
        height: 40px;
        border: none;
        position: absolute;
        bottom: 0;
        margin: auto;
        z-index: 2;
        line-height: 39px;
        font-size: 12px;
        font-weight: 300;
        top: 0;
        border-radius: 0;
        background: #f7f7f7;
        color: #696969
    }

    span.arrows.next {
        right: 1%
    }

    button,
    input[type],
    select,
    textarea {
        background: 0 0;
        border: none;
        border-radius: 0;
        font-family: 'Plus Jakarta Sans', serif;
        font-weight: 400
    }

    ::-webkit-input-placeholder {
        color: #a3a3a3;
        font-weight: 400
    }

    ::-moz-placeholder {
        color: #a3a3a3;
        font-weight: 400
    }

    :-ms-input-placeholder {
        color: #a3a3a3;
        font-weight: 400
    }

    :-moz-placeholder {
        color: #a3a3a3;
        font-weight: 400
    }

    .blocker {
        z-index: 9 !important
    }

    .pad-zero {
        padding: 0
    }

    .pad-l-zero {
        padding-left: 0
    }

    .pad-r-zero {
        padding-right: 0
    }

    .sprite-icn:before {
        content: "";
        background-image: url(../images/sprite.webp);
        background-repeat: no-repeat
    }

    .overlay:after {
        content: "";
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .6);
        z-index: 1
    }

    .abtimg a,
    .btnn-postion-hover:active,
    .button,
    .button--bubble__container .effect-button,
    .button--bubble__effect-container .circle,
    .ctasec a,
    .formsec button,
    .markslider li a:before,
    .menu li a:before,
    .menu li.active a,
    div#login-modal {
        background: linear-gradient(90deg, #ffc107 0, #BD8E00 100%)
    }

    .button--bubble__container {
        top: 50%;
        margin-top: 0;
        position: relative;
        display: inline-block;
        margin-left: 8px;
        margin-right: 8px;
    }

    .button--bubble__effect-container {
        position: absolute;
        display: block;
        width: 200%;
        height: 400%;
        top: -150%;
        left: -50%;
        -webkit-filter: url(#goo);
        filter: url(#goo);
        transition: .1s ease-out;
        pointer-events: none
    }

    .button--bubble__effect-container .circle.top-left {
        top: 40%;
        left: 27%
    }

    .button--bubble__effect-container .circle {
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 15px;
        transition: background .1s ease-out
    }

    .button--bubble__container .effect-button {
        position: absolute;
        width: 50%;
        height: 25%;
        top: 50%;
        left: 25%;
        z-index: 1;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: background .1s ease-out
    }

    .button {
        border-radius: 34px;
        font-size: 14px;
        color: #000;
        display: inline-block;
        padding: 20px 45px;
        position: relative;
        z-index: 1;
        box-shadow: 0 7px 42px 0 rgba(49, 49, 49, .01);
        font-weight: 500
    }

    .provider-cta-btns {
        padding-top: 22px;
        display: flex;
        gap: 15px;
    }

    .provider-cta-btns a {
        padding: 20px 40px;
        border-radius: 45px;
        border: 2px solid #000;
        color: #000;
        background: 0 0;
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;

    }

    .provider-cta-btns a:hover {
        border: 2px solid #fff;
        color: #fff;


    }

    .ourworksec .provider-cta-btns {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-top: 30px !important;
    }

    .btn1,
    .menu {
        border-radius: 50px
    }

    .preloader,
    .text-container {
        display: flex;
        overflow: hidden
    }

    .btn1,
    .mn-btn {
        font-weight: 400
    }

    .button--bubble__effect-container .circle.bottom-right {
        bottom: 40%;
        right: 27%
    }

    .btn1 {
        box-shadow: 0 7px 42px 0 rgba(49, 49, 49, .3);
        background: 0 0;
        font-size: 20px;
        color: #353535;
        border: 2px solid #353535;
        padding: 18px 43px;
        line-height: 20px
    }

    .btn1:hover {
        background: #1d1d1d;
        color: #fff
    }

    .btnn-postion-hover,
    .btnn-postion-hover:hover {
        color: #000
    }

    .btnn-postion-hover span {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: linear-gradient(90deg, #ffc107 0, #BD8E00 100%) !important;
        transition: width .4s ease-in-out, height .4s ease-in-out;
        transform: translate(-50%, -50%);
        z-index: -1
    }

    .btnn-postion-hover:hover span {
        width: 225%;
        height: 562.5px
    }

    [class^=btnn-] {
        position: relative !important;
        z-index: 0
    }

    .mn-btn {
        color: #fff;
        font-size: 18px;
        background: #000;
        border: 1px solid #000;
        padding: 0
    }

    .mn-btn:hover {
        background: 0 0;
        color: #000
    }

    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: #0c0a0b;
        z-index: 100
    }

    .awardsec,
    .awardsec .col-md-3,
    .countbox span,
    .ctasec,
    .dropdown-nav,
    .formsec,
    .images,
    .markslider li a,
    .menu,
    .menu li a,
    .servicesec,
    .servicesec ul li,
    footer {
        position: relative
    }

    .text-container {
        flex-direction: row;
        gap: 1em;
        color: #fff;
        opacity: 0
    }

    @-webkit-keyframes animate-svg-fill-1 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    @keyframes animate-svg-fill-1 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    .svg-elem-1 {
        -webkit-animation: .7s cubic-bezier(.895, .03, .685, .22) .8s both animate-svg-fill-1;
        animation: .7s cubic-bezier(.895, .03, .685, .22) .8s both animate-svg-fill-1;
        animation-iteration-count: 2
    }

    @-webkit-keyframes animate-svg-fill-2 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    @keyframes animate-svg-fill-2 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    .svg-elem-2 {
        -webkit-animation: .7s cubic-bezier(.895, .03, .685, .22) .9s both animate-svg-fill-2;
        animation: .7s cubic-bezier(.895, .03, .685, .22) .9s both animate-svg-fill-2;
        animation-iteration-count: 2
    }

    @-webkit-keyframes animate-svg-fill-3 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    @keyframes animate-svg-fill-3 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    .svg-elem-3 {
        -webkit-animation: .7s cubic-bezier(.895, .03, .685, .22) 1s both animate-svg-fill-3;
        animation: .7s cubic-bezier(.895, .03, .685, .22) 1s both animate-svg-fill-3;
        animation-iteration-count: 2
    }

    @-webkit-keyframes animate-svg-fill-4 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    @keyframes animate-svg-fill-4 {
        0% {
            fill: transparent
        }

        100% {
            fill: rgb(255, 255, 255)
        }
    }

    .svg-elem-4 {
        -webkit-animation: .7s cubic-bezier(.895, .03, .685, .22) 1.1s both animate-svg-fill-4;
        animation: .7s cubic-bezier(.895, .03, .685, .22) 1.1s both animate-svg-fill-4;
        animation-iteration-count: 2
    }

    header {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        z-index: 1
    }

    .menu {
        font-size: 0;
        width: auto;
        height: auto;
        border: 1px solid rgba(221, 221, 221, .1);
        background: rgba(255, 255, 255, .05)
    }

    .menu li {
        margin-right: 10px
    }

    .ftrcon ul li:last-child,
    .menu li:last-child {
        margin-right: 0
    }

    .menu li a:before,
    .menu-Bar,
    ul.dropdown {
        position: absolute;
        margin: auto
    }

    .menu li a {
        display: block;
        font-size: 20px;
        color: rgba(255, 255, 255, .5);
        font-weight: 500;
        padding: 20px 30px;
        border-radius: 50px
    }

    .menu li a:before {
        content: '';
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        border-radius: 50px;
        opacity: 0
    }

    .menu li.active a,
    .menu li:hover a {
        color: #fff
    }

    @keyframes btotreverse {
        0% {
            top: 75px;
            opacity: 1
        }

        100% {
            top: 115px;
            opacity: 0
        }
    }

    @keyframes btot {
        0% {
            top: 115px;
            opacity: 0
        }

        100% {
            top: 40px;
            opacity: 1
        }
    }

    .dropdown-nav:hover {
        overflow: visible
    }

    ul.dropdown {
        width: 100%;
        left: 0;
        background: #fff;
        padding: 20px;
        text-align: left;
        border-radius: 2px;
        box-shadow: 0 0 10px 3px #00000014;
        opacity: 0;
        animation: .5s forwards btotreverse
    }

    ul.dropdown li {
        width: 100%;
        display: inline-block
    }

    ul.dropdown li a {
        padding: 0;
        font-size: 14px;
        display: block;
        width: 100%;
        margin: 0 0 15px;
        font-weight: 600;
        background: 0 0 !important
    }

    ul.dropdown li.last a {
        margin-bottom: 0
    }

    .dropdown-nav:hover ul.dropdown {
        animation: .5s forwards btot;
        z-index: 9
    }

    .menu-Bar {
        width: 30px;
        height: 20px;
        right: 15px;
        top: 0;
        bottom: 0;
        z-index: 22;
        display: none
    }

    .mainBanner:after,
    .shape2,
    .shape3 {
        right: 0;
        position: absolute
    }

    .reveal,
    div#login-modal {
        height: auto
    }

    .menu-Bar span {
        display: block;
        height: 4px;
        width: 100%;
        background: #ff0;
        position: absolute;
        transition: .6s;
        border-radius: 100px
    }

    .menu-Bar span:first-child,
    .shape3,
    section.packages:before {
        top: 0
    }

    .menu-Bar span:nth-child(2) {
        top: 8px;
        transform-origin: left
    }

    .menu-Bar span:nth-child(3) {
        top: 16px
    }

    .menu-Bar.open span {
        background: #b70404
    }

    .menu-Bar.open span:first-child {
        transform: rotate(45deg);
        top: 12px;
        transform-origin: right-center
    }

    .menu-Bar.open span:nth-child(2) {
        width: 0;
        opacity: 0
    }

    .menu-Bar.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 12px;
        transform-origin: right-center
    }

    .mainBanner {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 200px;
        padding-bottom: 150px
    }

    .ctasec:before,
    .mainBanner:before,
    .markslider:before {
        content: '';
        position: absolute;
        width: 500px;
        height: 483px;
        background-image: url(../images/shape1.webp);
        background-repeat: no-repeat;
        background-size: cover;
        left: 0;
        top: -17%;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .ctasec:after,
    .mainBanner:after,
    .markslider:after,
    .servicesec:before {
        background-image: url(../images/shape2.webp);
        content: '';
        background-repeat: no-repeat;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .mainBanner:after {
        width: 416px;
        height: 713px;
        background-size: contain;
        bottom: -20%;
        display: none
    }

    .ctasec:after,
    .markslider:after,
    .servicesec:before {
        background-size: cover;
        width: 500px;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .mainBanner h1 {
        font-size: 54px;
        color: #fff;
        padding-bottom: 30px
    }

    .mainBanner a.mn-btn {
        padding: 20px 40px;
        border-radius: 45px;
        border: 2px solid #fff;
        color: #fff;
        background: 0 0;
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
        margin-bottom: 150px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .abtimg a,
    .markslider li a:before {
        top: 0;
        border-radius: 50%;
        position: absolute
    }

    .shape1 {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1
    }

    .shape1 svg,
    .shape2 svg {
        filter: blur(250px)
    }

    .shape2 {
        bottom: -50%;
        z-index: -1
    }

    .aboutsec,
    .ourworksec {
        position: relative;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        background: #fff;
        padding: 100px 0
    }

    .aboutsec h4,
    .ourworksec h4 {
        color: #000;
        font-size: 80px
    }

    .aboutsec p,
    .ourworksec p {
        color: rgba(0, 0, 0, .5);
        font-size: 20px;
        font-weight: 400;
        line-height: 30px
    }

    .markslider li a,
    .servicesec h4,
    .servicesec ul li a {
        line-height: normal;
        color: #fff
    }

    .abtimg {
        margin-top: 50px;
        position: relative
    }

    .abtimg a {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        right: 150px;
        bottom: 0;
        margin: auto
    }

    .abtimg a:hover,
    .formsec button:hover {
        background: linear-gradient(90deg, #BD8E00 0, #ffc107 100%)
    }

    .abtimg img,
    .abtwrapimg img,
    .workimgs a img {
        filter: grayscale(100%)
    }

    .abtimg:hover img {
        filter: grayscale(0)
    }

    .markslider {
        padding: 150px 0;
        position: relative;
        z-index: 1
    }

    footer .cont-info .btnn-postion-hover.mn-btn.gs_reveal.gs_reveal_fromDown {
        width: auto;
        padding: 20px 40px;
        border-radius: 45px;
        border: 2px solid #fff;
        color: #fff;
        background: 0 0;
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
    }

   .formlogo img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

    .field,
    .ftrlogo,
    .servicesec,
    .servicesec p,
    footer form {
        padding-bottom: 100px
    }

    .markslider:after {
        position: absolute;
        height: 761px;
        right: 0;
        bottom: -20%;
        z-index: -1;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .slick.marquee {
        transform: rotate(-5deg)
    }

    .markslider li a {
        font-size: 52px;
        font-weight: 700
    }

    .markslider li a:before {
        content: '';
        width: 10px;
        height: 10px;
        right: -20px;
        bottom: 0;
        margin: auto
    }

    .slick.marquee_rtl {
        transform: rotate(5deg);
        position: relative;
        top: -60px
    }

    .awardsec p,
    .slick.marquee_rtl li a,
    footer p {
        color: rgba(255, 255, 255, .5)
    }

    .markslider li a:hover {
        color: #ffc107
    }

    .images img {
        position: absolute;
        height: 40vh;
        opacity: 0;
        z-index: -1;
        transform: scale(.8)
    }

    .ctasec:after,
    .reveal,
    .servicesec:before {
        position: absolute;
        right: 0
    }

    .servicesec:before {
        height: 850px;
        bottom: 0
    }

    .servicesec h4 {
        font-size: 80px;
        font-weight: 800;
        text-transform: uppercase
    }

    .logo img,
    .ftrlogo img {
        width: 180px;
        height: auto;
    }

    footer .ftrlogo img {
        width: 220px;
        height: auto;
    }

    .servicesec p {
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px
    }

    .servicesec ul li {
        padding: 50px 0;
        border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .servicesec ul li a {
        font-size: 60px;
        font-weight: 600;
        text-transform: uppercase
    }

    .reveal {
        visibility: hidden;
        width: auto;
        max-width: 40%;
        top: -20px;
        bottom: 0;
        margin: auto
    }

    .workimgs {
        padding-top: 50px
    }

    .workimgs a {
        margin-bottom: 15px
    }

    .abtwrapimg:hover img,
    .workimgs a:hover img {
        filter: grayscale(0%)
    }

    .ctasec {
        padding: 100px 0
    }

    .ctasec:after {
        height: 771px;
        bottom: -20%;
        z-index: -1
    }

    .awardsec h4,
    .ctasec h4 {
        color: #fff;
        font-size: 80px;
        font-weight: 800;
        line-height: normal;
        text-transform: uppercase;
        padding-bottom: 20px
    }

    .awardsec p,
    .ctasec a,
    .ctasec p {
        font-size: 20px;
        line-height: normal
    }

    .ctasec p {
        color: rgba(255, 255, 255, .5);
        font-weight: 400;
        padding-bottom: 30px;
        max-width: 600px;
        margin: auto
    }

    .ctasec a {
        color: #fff;
        font-weight: 600;
        padding: 20px 40px 25px;
        border-radius: 50px
    }

    .ctasec .shape3 {
        bottom: 0;
        right: 0;
        top: auto;
        max-width: 20%
    }

    .awardsec {
        padding: 0 0 100px
    }

    .awardsec p {
        font-weight: 400;
        padding-bottom: 100px
    }

    .countbox span,
    .countbox span:after {
        font-size: 70px;
        font-weight: 800;
        line-height: 70px;
        text-transform: uppercase
    }

    .countbox h6,
    .formsec button,
    .innerBanner p {
        text-transform: capitalize
    }

    .awardsec .col-md-3:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 1px;
        background-color: rgba(255, 255, 255, .1);
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .countbox span {
        display: block;
        color: #fff;
        margin-bottom: 20px
    }

    .countbox span:after {
        content: '+';
        display: inline-block;
        vertical-align: top;
        margin-top: -10px
    }

    .preloader img {
        width: 50%;
        height: 50%;
    }

    .popup-flex {
        justify-content: center;
        align-items: center;
    }

    .countbox h6 {
        font-size: 26px;
        font-weight: 600;
        line-height: normal;
        opacity: 1;
        color: #ce9b02;
    }

    div#login-modal {
        background: #000 !important;
        border: 2px solid #ffc107;
    }

    div#login-modal img {
        width: 220px;
    }

    .formsec {
        padding: 50px 0 100px
    }

    .formlogo {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .formsec:before {
        content: '';
        position: absolute;
        width: 500px;
        height: 660px;
        background-image: url(../images/shapeform.webp);
        background-repeat: no-repeat;
        background-size: contain;
        left: 0;
        top: 0;
        opacity: 0
    }

    .formsec:after,
    footer:after,
    footer:before {
        content: '';
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .shape3 img {
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .formsec:after {
        width: 500px;
        height: 900px;
        background-image: url(../images/shape2.webp);
        right: 0;
        bottom: -20%;
        z-index: -1;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .formsec .shape3 {
        left: 0;
        right: auto
    }

    .fieldtextarea,
    .ftrcon h5,
    footer {
        padding-bottom: 50px
    }

    .field input,
    .field textarea {
        height: 50px;
        width: 100%;
        font-size: 20px;
        color: #fff;
        font-weight: 400;
        line-height: normal;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        transition: .4s ease-in-out
    }

    .field input:focus,
    .field textarea:focus {
        border-color: #BD8E00;
        transition: .4s ease-in-out
    }

    .field textarea {
        resize: none;
        height: 150px
    }

    .formsec button {
        height: 70px;
        width: 100%;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 70px;
        border-radius: 50px
    }

    footer:after,
    footer:before {
        height: 460px;
        width: 500px;
        bottom: 0
    }

    footer:before {
        background-image: url(../images/footershape1.webp);
        left: 0
    }

    footer:after {
        background-image: url(../images/footershape2.webp);
        right: 0;
        z-index: -1
    }

    .ftrcon h6 {
        color: #ffc107;
        font-size: 20px
    }

    .ftrcon h5 {
        color: #fff;
        font-size: 80px
    }

    .abtwrap1,
    .innerBanner p {
        padding-bottom: 150px
    }

    .ftrcon ul {
        font-size: 0
    }

    .ftrcon ul li a,
    .ftrform button {
        width: 70px;
        height: 70px;
        font-size: 30px;
        color: #fff;
        line-height: 64px;
        text-align: center
    }

    .ftrcon ul li {
        display: inline-block;
        margin-right: 15px
    }

    .ftrcon ul li a {
        border: 2px solid #fff;
        border-radius: 50%
    }

    .ftrform {
        display: flex;
        align-items: center
    }

    .ftrform .field {
        padding-bottom: 0;
        margin-right: 20px;
        width: 42%
    }

    .ftrform button {
        border: 2px solid #fff;
        border-radius: 50%;
        transform: rotate(45deg)
    }

    div#login-modal ul li input,
    div#login-modal ul li textarea {
        font-size: 14px;
        background: #fff;
        border-radius: 6px;
        padding: 10px;
        width: 100%
    }

    .innerBanner p,
    footer p {
        font-size: 20px;
        font-weight: 400
    }

    .ftrform button:hover {
        background-color: #ffc107;
        transform: rotate(90deg)
    }

    footer p {
        line-height: normal;
        text-align: right
    }

    .innerBanner.mainBanner {
        padding-top: 280px
    }

    .innerBanner p {
        color: rgba(255, 255, 255, .6);
        line-height: normal
    }

    .box .package-head h4,
    .service-detail h4,
    section.packages h3 {
        font-weight: 800;
        text-transform: uppercase;
        color: #fff
    }

    .abtwrap h4 {
        font-size: 70px;
        padding-bottom: 15px
    }

    .awardsec1 {
        padding-top: 100px
    }

    .ctasec1.ctasec:before {
        background-image: url('../images/serviceshape.webp');
        height: 739px;
        width: 500px;
        opacity: .3;
        left: -200px
    }

    .videosec video {
        width: 100%
    }

    .service-detail h4 {
        font-size: 40px;
        line-height: normal
    }

    section.service-detail {
        padding-bottom: 140px;
        position: relative
    }

    section.service-detail:before {
        content: url(../images/bg.webp);
        position: absolute;
        bottom: 0;
        left: 0
    }

    section.packages:after,
    section.packages:before {
        content: url(../images/bg1.webp);
        left: 11%;
        margin: 0 auto;
        position: absolute;
        right: 0;
        filter: brightness(0) saturate(100%) invert(86%) sepia(23%) saturate(6117%) hue-rotate(352deg) brightness(105%) contrast(104%);
    }

    .service-detail p {
        color: rgb(255 255 255 / 60%);
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        margin-top: 20px
    }

    section.aboutsec.servicedetailsec h4 {
        font-size: 40px;
        margin-bottom: 20px
    }

    mar {
        CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
        display: block
    }

    div#login-modal img {
        margin: 0 auto;
        display: block
    }

    div#login-modal ul {
        display: inline-block;
        width: 100%;
        padding: 0;
        margin: 20px 0 0;
        list-style: none
    }

    div#login-modal ul li {
        width: 100%;
        margin-bottom: 12px
    }

    div#login-modal ul li textarea {
        height: 120px;
        resize: none
    }

    :root {
        --d: 2500ms;
        --angle: 90deg;
        --gradX: 100%;
        --gradY: 50%;
        --c1: rgba(168, 239, 255, 1);
        --c2: rgba(168, 239, 255, 0.1)
    }

    @property --angle {
        syntax: '<angle>';
        initial-value: 90deg;
        inherits: true
    }

    @property --gradX {
        syntax: '<percentage>';
        initial-value: 50%;
        inherits: true
    }

    @property --gradY {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: true
    }

    section.packages {
        padding: 100px 0;
        position: relative
    }

    section.packages:after {
        bottom: 0;
        z-index: -1
    }

    section.packages h3 {
        font-size: 38px;
        margin-bottom: 50px
    }

    .box {
        background-color: #101010;
        border: .1rem solid;
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
        -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
        -o-transition: opacity .5s ease-in-out;
        transition: opacity .5s ease-in-out;
        padding: 20px;
        margin-top: 30px;
        position: relative;
        z-index: 9
    }

    .box:hover {
        animation: borderRotate var(--d) linear infinite forwards
    }

    .box .package-head h4 {
        line-height: normal;
        font-size: 23px;
        text-align: center;
        word-wrap: break-word
    }

    .box .package-head label {
        font-weight: 300;
        color: #fff;
        font-size: 40px;
        margin: 16px 0;
        text-align: center;
        display: block
    }

    .box .package-head label span {
        text-decoration: line-through;
        font-size: 20px;
        display: inline-block;
        margin-left: 10px
    }

    div#login-modal ul li input[type=submit] {
        box-shadow: 0 3px #3e3e4b52;
        background: #2a2a2d;
        color: #fff
    }

    .box .package-head a {
        display: block;
        width: 100%;
        text-align: center;
        background: #2a2a2d;
        color: #fff;
        padding: 10px;
        margin: 0 auto;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        box-shadow: 0 3px #3e3e4b52
    }

    .box .package-head a:active,
    .box .package-head a:hover,
    div#login-modal ul li input[type=submit]:active,
    div#login-modal ul li input[type=submit]:hover {
        background: linear-gradient(90deg, #ffc107 0, #BD8E00 100%);
        box-shadow: 0 1px #666;
        transform: translateY(4px)
    }

    @keyframes borderRotate {
        100% {
            --angle: 420deg
        }
    }

    @keyframes borderRadial {
        20% {
            --gradX: 100%;
            --gradY: 50%
        }

        40% {
            --gradX: 100%;
            --gradY: 100%
        }

        60% {
            --gradX: 50%;
            --gradY: 100%
        }

        80% {
            --gradX: 0%;
            --gradY: 50%
        }

        100% {
            --gradX: 50%;
            --gradY: 0%
        }
    }

    .package-body {
        padding: 20px 0
    }

    .package-body h5 {
        display: block;
        text-align: center;
        width: 100%;
        position: relative;
        color: #545151;
        z-index: 2
    }

    .package-body h5:after {
        content: "";
        border: 1px solid #3737376b;
        width: 100%;
        position: absolute;
        top: 7px;
        left: 0;
        z-index: -3
    }

    .package-body h5:before {
        content: "";
        width: 100px;
        background: #101010;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        height: 17px;
        z-index: -1
    }

    .package-body ul {
        list-style-image: url(../images/li.webp);
        display: block;
        width: 100%;
        padding: 0 0 0 30px;
        margin: 6px 0 0;
        height: 500px !important;
        overflow-y: auto;
        line-height: 1.4
    }

    .package-body ul li {
        margin-top: 20px;
        font-size: 16px
    }

    .modal a.close-modal {
        top: 0 !important;
        right: 0 !important
    }

    .image-radius img {
        border-radius: 12px
    }

    @media (max-width: 1200px) {

        .menu-Bar,
        ul.menu li,
        ul.menu li a {
            display: block
        }

        header .main-header ul.menu>li a,
        ul.menu li a {
            color: #fff;
            padding: 0
        }

        img {
            max-width: 100%;
            height: auto
        }

        .menu-Bar {
            top: 0
        }

        .menuWrap,
        .menuWrap.open {
            top: 0;
            height: 100vh;
            display: flex
        }

        .menuWrap.open {
            left: 0;
            padding: 0
        }

        .menuWrap {
            position: fixed;
            left: -210%;
            right: 0;
            margin: auto;
            background: #000;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            transition: .4s;
            z-index: 3;
            width: 100vw
        }

        ul.menu li a {
            text-align: center;
            margin-bottom: 15px;
            margin-right: 0;
            font-size: 15px;
            text-transform: capitalize
        }

        .logo img {
            max-width: 50%
        }

        .container {
            position: relative;
            padding: 0
        }

        header .header-top,
        header .main-header ul.menu>li a:before {
            display: none
        }

        header .main-header ul.menu>li {
            display: block;
            padding: 0
        }
    }

    @media only screen and (max-width: 768px) and (orientation:portrait) {
        .mobmenu {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1
        }

        .webmenu {
            display: none
        }

        .ftrcon h5,
        .mainBanner h1 {
            font-size: 60px
        }

        .mainBanner a.mn-btn {
            margin: 0
        }

        section.aboutsec.homeabout h2 {
            font-size: 26px
        }

        .servicesec h2 {
            font-size: 34px
        }

        .aboutsec h4,
        .awardsec h4,
        .ctasec h4,
        .ourworksec h4,
        .ourworksec label,
        .servicesec h4 {
            font-size: 40px
        }

        footer .cont-info {
            display: inline-block !important
        }

        .aboutsec p,
        .ourworksec p {
            color: #000;
            font-size: 14px
        }

        .abtimg a,
        .servicesec p {
            font-size: 12px
        }

        .abtimg a {
            width: 100px;
            height: 100px;
            right: 0;
            top: -150px
        }

        .markslider {
            padding: 90px 0
        }

        .servicesec ul li a {
            font-size: 30px
        }

        .servicesec ul li {
            padding: 30px 0
        }

        .workimgs a img {
            margin: 0 auto
        }

        .workimgs {
            text-align: center
        }

        .ftrform .field {
            width: 100%;
            margin-bottom: 17px
        }

        .ftrform {
            display: block
        }

        .ftrform button {
            float: right
        }

        .awardsec p,
        .ctasec p {
            font-size: 14px
        }

        .menuWrap.open ul.menu {
            width: 50%;
            padding: 0;
            margin: 0;
            display: inline-block;
            list-style: none
        }

        .menuWrap.open ul.menu li {
            padding: 0;
            margin: 0;
            display: block
        }

        .menuWrap.open ul.menu li a {
            padding: 14px 0;
            font-size: 16px
        }
    }