*, :after, :before, ul.c-list li:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html, select ,.package-details {
    scrollbar-color: rgba(var(--clr-2), 1) transparent;
}

body, html ,.package-details {
    scroll-behavior: smooth;
}

body, select ,.package-details {
    scrollbar-width: 8px;
}

html, select ,.package-details {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: linear-gradient(rgba(var(--clr-2), 1), rgba(var(--clr-2), 1));
}

::-moz-selection {
    color: #fff;
    background: rgba(var(--clr-2), 1);
}

::selection {
    color: #fff;
    background: rgba(var(--clr-2), 1);
}

html ,.package-details {
    scroll-snap-type: y mandatory;
}

body {
    margin: 0;
    right: 0;
    -webkit-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
    -webkit-overflow-scrolling: touch;
    font-family: "Nunito", sans-serif !important;
    line-height: 1.5;
    background-color: rgba(var(--light-color), 1);
    color: rgba(var(--dark-color), 1);
    overflow-x: hidden;
    font-size: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left, right;
    background-position-y: bottom, top;
    background-attachment: fixed;
}

footer, section {
    overflow-x: hidden;
    overflow-y: clip;
}

* {
    box-sizing: border-box;
}

:after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    outline: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.overlay-light {
    background: linear-gradient(rgba(var(--light-color),0.9), rgba(var(--light-color),0.87))
}

.review-image img {
    height: 200px;
    width: 200px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 25px;
}

.choose .box {
    height: 200px;
}

img.lozad.choose-center {
    transform: scale(1.8);
}

.order-2 {
    z-index: 99999999;
}

.review-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.review-box {
    clip-path: polygon(0 0, 90% 0%, 100% 10%, 100% 100%, 10% 100%, 0 90%);
}

.review-cont {
    border-top: 1px solid rgba(var(--clr-1), 1.0);
    padding-top: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

a.active, a:active, a:focus, a:hover {
    color: rgba(var(--clr-1), 1) !important;
    outline: 0 !important;
    text-decoration: none;
}

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

.fw-700, b, strong {
    font-weight: 700;
}

.fw-600 {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6,.heading {
    font-family: "Rubik", sans-serif;
    font-style: normal;
    line-height: 1.3;
    text-transform: capitalize;
}

.f-55 {
    font-size: 55px;
}

.f-40 {
    font-size: 40px;
}

.f-30 {
    font-size: 30px;
}

.f-24 {
    font-size: 24px;
}

.f-20 {
    font-size: 20px;
}

.f-18 {
    font-size: 18px;
}

.inherit {
    font-size: inherit !important;
}

.clr-1 {
    color: rgba(var(--clr-1), 1);
}

.clr-l {
    color: rgba(var(--light-color), 1.0);
}

.clr-2 {
    color: rgba(var(--clr-2), 1);
}

.clr-d {
    color: rgba(var(--dark-color), 1) !important;
}

.text-gradient {
    background: linear-gradient(90deg, rgba(var(--clr-1), 1), rgba(var(--clr-2), 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-first .text-gradient {
    line-height: 0;
}

.op-05 {
    opacity: 0.5;
}

.bg-1 {
    background-color: rgba(var(--clr-1), 1)!important;
}

.bg-2 {
    background-color: rgba(var(--clr-2), 1)!important;
}

.bg-l {
    background-color: rgba(var(--light-color), 1)!important;
}

.bg-light {
    background-color: #EFEFEF !important;
}

.bg-d {
    background-color: rgba(var(--dark-color), 1)!important;
}

.bg-1-l {
    background-color: rgba(var(--clr-1), 0.12)!important;
}

.box.bg-1-l:hover {
    background: rgba(var(--clr-1), 1)!important;
}

.bg-2-l {
    background-color: rgba(var(--clr-2), 0.12)!important;
}

.box.bg-2-l:hover {
    background-color: rgba(var(--clr-2), 1)!important;
}

.btn, button {
    background: linear-gradient(90deg, rgba(var(--clr-1), 1), rgba(var(--clr-2), 1)) !important;
    border: none !important;
    text-transform: capitalize;
    color: rgba(var(--light-color), 1) !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    /*    box-shadow: 3px 3px 0 rgba(var(--clr-1), 1);*/
    transition-duration: 0.8s;
    font-size: inherit;
    font-weight: 500;
    font-family: 'Rubik';
}

.btn-2 {
    background: none !important;
    color: rgba(var(--clr-1), 1.0) !important;
    border: 2px solid rgba(var(--clr-2), 1.0)!important;
}

.btn-3 {
    background: rgba(var(--dark-color), 1);
}

a.nav-link {
    border-radius: 10px !important;
    background: rgba(var(--light-color),1);
    color: rgba(var(--dark-color),1) !important;
    border-radius: 59px !important;
    border: 1px solid rgba(var(--clr-1),1) !important;
    background: none !important;
    background: none !important;
    font-weight: 500;
}

.btn.active, .btn:hover, button.active, button:hover {
    color: rgba(var(--light-color), 1) !important;
    background: linear-gradient(90deg, rgba(var(--clr-2), 1), rgba(var(--clr-1), 1)) !important;
}

.btn .line, button .line {
    width: 50px;
    height: 2px;
    border-radius: 10px;
    margin-left: 10px;
    background: rgba(var(--light-color), 1.0);
    position: relative;
    display: block;
}

.circle {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: rgba(var(--clr-1), 1.0);
    border-radius: 10px;
    animation: blink 2s infinite;
}

@keyframes blink {
    0% {
        background: rgba(var(--clr-1), 1.0);
    }

    50% {
        background: rgba(var(--clr-2), 1.0);
    }

    100% {
        background: rgba(var(--clr-1), 1.0);
    }
}

.line .circle {
    position: absolute;
    top: -4px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: rgba(var(--light-color), 1.0);
    display: block;
    animation: left-right 5s infinite;
}

@keyframes left-right {
    0% {
        left: 0;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 0;
    }
}

.f-100 {
    font-size: 100px;
}

.form-control, input, select {
    background: rgba(var(--light-color), 1.0);
    color: rgba(var(--dark-color), 1.0) !important;
    border: 1px solid rgba(var(--clr-2),1) !important;
    padding: 10px 10px !important;
    box-shadow: unset !important;
    transition-duration: 0.8s;
    height: auto !important;
    border-radius: 10px !important;
    /* border-bottom: none !important; */
}

.bg-d .form-control, input, select {
    border: none !important;
}

.bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.form-control:focus, input:focus {
    outline: 0;
    background: rgba(var(--clr-1), 1);
    color: rgba(var(--light-color), 1) !important;
    border: 1px solid rgba(var(--clr-1), 1);
    box-shadow: none;
}

.form-control::placeholder, input::placeholder {
    color: rgba(var(--dark-color), 1);
    opacity: 1;
}

.iti {
    position: relative;
    display: inline-block;
    width: 100%;
}

input.phone {
    padding-left: 75px !important;
}

.bg-d .iti__country-list {
    background: rgba(var(--dark-color), 1.0);
}

.bg-d .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    color: rgba(var(--dark-color), 1.0);
}

.bg-d .iti__country .iti__dial-code {
    color: rgba(var(--light-color), 1.0);
}

.form-control:focus::placeholder, input:focus::placeholder {
    color: rgba(var(--clr-1), 1);
}

.bg-d select option {
    background: rgba(var(--dark-color), 1.0);
    color: rgba(var(--light-color), 1);
    ; }

.text-white .form-control:focus, .text-white input:focus {
    background: rgba(var(--clr-2), 1);
    border: 1px solid rgba(var(--clr-2), 1);
}

.text-white .form-control::placeholder, .text-white input::placeholder {
    color: rgba(var(--light-color), 1);
    opacity: 1;
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

label.h {
    z-index: -999999999;
}

input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea {
    font-size: 16px;
}

.slick-next:before, .slick-prev:before {
    color: rgba(var(--clr-2), 1.0) !important;
}

.slick-dots li button, .slick-next, .slick-next:focus, .slick-next:hover, .slick-prev, .slick-prev:focus, .slick-prev:hover {
    background: none !important;
}

.slick-next {
    right: 2px;
}

.slick-prev {
    left: -20px;
    z-index: 99;
}

.bg-gradient {
    background: linear-gradient(90deg, rgba(var(--clr-1), 1), rgba(var(--clr-2), 1)) !important;
}

@supports (-moz-appearance: none) {
    SELECT {
        -moz-appearance: none !important;
        background: url(data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==) right center no-repeat !important;
        background-position: calc(100% - 5px) center !important;
    }
}

.services {
    background-position-x: left ,right ;
    background-position-y: bottom ,top;
    background-repeat: no-repeat;
    background-size: auto, contain;
}

.icon {
    background: linear-gradient(90deg, rgba(var(--clr-1), 1), rgba(var(--clr-2), 1)) !important;
    color: rgba(var(--light-color),1);
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.8s;
    border-radius: 50px;
}

.pkg_slider-item {
    padding: 0px 10px;
}

.icona:hover .icon {
    background: rgba(var(--clr-2),1);
}

header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

img.logo {
    width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: left;
}

.banner {
    background-position: center;
    background-size: cover;
    /*    min-height: 80vh;*/
    background-attachment: fixed;
}

.fa {
    height: 74%;
}

.box {
    border-radius: 20px;
    height: 100%;
    overflow: hidden;
    padding: 20px;
}

.box {
    background: rgba(var(--light-color), 1.0);
    padding: 30px;
    transition: 0.8s ;
}

.box:hover {
    background: rgba(var(--clr-1), 1.0) !important;
    color: rgba(var(--light-color), 1.0);
}

.box:hover .icon {
    background: rgba(var(--light-color), 1) !important;
    color: rgba(var(--clr-1), 1) !important;
}

.box:hover .clr-1 {
    color: rgba(var(--light-color), 1.0);
}

.recog .col:nth-child(odd) .box.recognized {
    border: 3px solid rgba(var(--clr-1), 1.0);
}

.recog .col:nth-child(even) .box.recognized {
    border: 3px solid rgba(var(--clr-2), 1.0);
}

a.link {
    position: relative;
    padding: 5px 10px;
}

a.link:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: rgba(var(--clr-1),1);
    left: 0;
    z-index: -1;
    transition-duration: 0.8s
}

a.link:hover,a.link:hover .clr-1 {
    color: rgba(var(--light-color), 1.0) !important;
}

a.link:hover:before {
    height: 100%
}

.rotate {
    transform: rotate(-2deg);
}

.portfolio {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
}

.portfolio img {
    object-fit: cover;
    object-position: top;
    transition-duration: 10s;
    height: 100%;
    width: 100%;
}

.portfolio:hover img {
    object-position: bottom;
}

.nav-tabs {
    border-bottom: unset;
}

.packages {
    background-size: cover;
    background-position: center;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button::after {
    transition: all 0.5s;
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(7350%) hue-rotate(354deg) brightness(91%) contrast(101%);
}

button.accordion-button {
    background: none !important;
    color: inherit !important;
    border-bottom: none !important;
    border-radius: unset !important;
}

.accordion-header {
    background: none !important;
    color: inherit;
    border: none !important;
}

.accordion-item {
    background: none;
    color: inherit;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background: rgba(var(--light-color), 1);
    border: none;
}

.c-list li::before {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 100%;
    padding: 1px 5px;
    background: none;
    border: 1px solid rgba(var(--clr-1), 1);
    color: rgba(var(--clr-1), 1);
}

.c-list li {
    position: relative;
    padding-left: 35px;
    margin: 10px 0;
}

.portfolios {
    background-color: #F6EFFF;
    background-repeat: no-repeat;
    background-position: right top;
}

.fancybox-button {
    padding: 5px !important;
}

.package-details {
    height: 260px;
    overflow-y: scroll;
}

.package {
    border-radius: 20px;
    border: 1px solid rgba(var(--clr-2), 1.0);
    transition: 0.8s;
}

.pack-head,.package-details,.package-cta {
    padding-right: 20px;
    padding-left: 20px;
}

.pack-head {
    padding-top: 50px;
    position: relative;
}

.package-cta {
    padding-bottom: 50px;
    position: relative;
}

.package:hover {
    background: rgba(var(--clr-1), 1.0);
    color: rgba(var(--light-color), 1.0);
}

.package:hover .clr-1 {
    color: rgba(var(--light-color), 1.0);
}

.package:hover button {
    background: rgba(var(--light-color), 1.0) !important;
    color: rgba(var(--clr-1), 1.0) !important;
}

.package:hover .c-list li:before {
    border-color: rgba(var(--light-color), 1.0) !important;
    color: rgba(var(--light-color), 1.0) !important;
}

.cta {
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left , right;
    background-position-y: top , bottom;
}

.title {
    border-bottom: 1px solid rgba(var(--clr-2), 1.0);
}

.process {
    box-shadow: 0 0 15px rgba(var(--dark-color), 0.08);
}

.box.industry {
    height: 100px;
    padding: 20px 10px;
}

.service-first {
    /*background-size: contain;*/
    background-repeat: no-repeat ;
    background-position-x: left , right ;
    background-position-y: top ;
}

.service-first img {
    border-radius: 20px;
}

.contact-box {
    background: #F6EFFF;
    border-radius: 20px;
}

.about-first {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
}

.position-relative {
    z-index: 5;
}

.mission-vission {
    position: relative;
}

.mission-vission:after {
    content: url(../img/line.svg) ;
    ; width: 24px;
    height: 24px;
    transition-duration: 5s;
    overflow: hidden;
    background: none;
    /* border-right:2px dashed; */
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    /*    background-image: repeating-linear-gradient(4deg, rgba(var(--clr-2),1), rgba(var(--clr-2),1) 7.3px, transparent 10px, transparent 25.33px, rgba(var(--clr-2),1) 31px), repeating-linear-gradient(94deg, rgba(var(--clr-2),1), rgba(var(--clr-2),1) 7.3px, transparent 10px, transparent 25.33px, rgba(var(--clr-2),1) 31px), repeating-linear-gradient(184deg, rgba(var(--clr-2),1), rgba(var(--clr-2),1) 7.3px, transparent 10px, transparent 25.33px, rgba(var(--clr-2),1) 31px), repeating-linear-gradient(274deg, rgba(var(--clr-2),1), rgba(var(--clr-2),1) 7.3px, transparent 10px, transparent 25.33px, rgba(var(--clr-2),1) 31px);*/
    background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
}

.aos-animate.mission-vission:after {
    height: 90%;
}

.mission-vission .position-relative.mission:after {
    content: url(../img/right-arrow.svg) ;
    position: absolute;
    top: 50%;
    right: -28px;
    /* bottom: 50%; */
    font-size: 20px;
    transform: translateY(-50%);
    z-index: -1;
}

.mission-vission .position-relative.vison:before {
    content: url(../img/left-arrow.svg) ;
    position: absolute;
    top: 50%;
    left: -28px;
    /* bottom: 50%; */
    font-size: 20px;
    transform: translateY(-50%);
    z-index: -1;
}

.about-service {
    background-repeat: no-repeat;
    background-position: left bottom;
}

.mega-pack {
    background-size: 250px ,auto;
    background-repeat: no-repeat;
    background-position-x: left , right;
    background-position-y: bottom ;
}

.box.service .discription {
    min-height: 180px;
}

.package-details {
    background: url(../img/pack-bg.png);
    background-size: 250px;
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 0.8s;
    margin-top: 20px ;
    margin-bottom: 20px;
}

.pack-head:before {
    content: '';
    background: rgba(var(--clr-2), 1.0);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 80%;
}

.package-cta:before {
    content: '';
    background: rgba(var(--clr-2), 1.0);
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    width: 80%;
}

.package:hover .package-details {
    background: url(../img/pack-bg-2.png);
    background-size: 250px;
    background-position: center;
    background-repeat: no-repeat;
}

.border-top {
    border-color: rgba(var(--clr-1), 1.0) !important;
}

.accordion-button::after {
    background-image: url(../img/plus.png) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(../img/minus.png) !important;
}

.menu-item-has-children > a {
    padding-right: 15px;
    position: relative;
}

.menu-item-has-children > a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0;
    border-color: #c2256b transparent transparent;
    -webkit-transition: -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
    -o-transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}

.menu-item-has-children > .submenu {
    clip: rect(0 0 0 0);
    height: 1px;
    /* margin: 10px -1px -1px 0; */
    overflow: hidden;
    display: block;
    padding: 15px 0 15px;
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    top: 56%;
    left: 250px;
    width: 60%;
    background-color: #111;
    border-radius: 5px;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: opacity 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 99;
}

.my-pages li {
    padding: 1.5rem 0px;
}

.submenu-services a:before {
    content: "";
    font-size: 29px;
    position: absolute;
    left: 23px;
    /* top: 40px; */
    height: 5px;
    width: 5px;
    background: #f63720;
    border-radius: 100px;
    margin-top: 7px;
}

.menu-item-has-children > .submenu:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 0px);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.65);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.65);
    border-radius: 5px;
}

.services_img_sec img, .tab_nav_sec ul li a {
    box-shadow: 0 6px 14.25px 0.75px rgb(0 0 0 / 8%);
}

.menu-item-has-children > .submenu:after {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 2;
    margin-left: -6px;
    margin-bottom: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 10px;
    border-color: transparent transparent rgba(35, 31, 32, 0.9);
}

.menu-item-has-children > .submenu > li {
    position: relative;
    z-index: 2;
    padding: 0 30px;
    width: 33%;
    display: inline-block;
    vertical-align: top;
}

.menu-item-has-children > .submenu > li:first-child {
    border-radius: 5px 5px 0 0;
}

.menu-item-has-children > .submenu > li:last-child {
    border-radius: 0 0 5px 5px;
}

.menu-item-has-children > .submenu > li:not(:last-child) > a {
    border-bottom: 1px solid #303030;
    margin: 10px 0 10px;
}

.menu-item-has-children > .submenu > li > a img {
    max-width: 30px;
    margin-right: 10px;
}

.menu-item-has-children > .submenu > li.lastchild > a {
    border-bottom: none;
}

.menu-item-has-children > .submenu > li.is-active > a {
    color: #ff8901;
}

.menu-item-has-children > .submenu > li.is-active > a.on_press, html:not(.mobile):not(.tablet) .menu-item-has-children > .submenu > li.is-active > a:hover {
    color: #f6f073;
}

.menu-item-has-children > .submenu > li.menu-item-has-children > a {
    padding-right: 30px;
}

.menu-item-has-children > .submenu > li.menu-item-has-children > a:after {
    right: 20px;
}

.menu-item-has-children > .submenu > li > a {
    white-space: nowrap;
    display: block;
    padding: 13px 0;
    color: #fff !important;
    border-bottom: 1px solid #303030;
    margin: 10px 0;
}

.menu-item-has-children > .submenu .submenu {
    top: 0;
    left: 100%;
    margin-left: 0;
    padding-top: 0;
}

.menu-item-has-children.focussed, .menu-item-has-children:hover {
    z-index: 2;
}

.menu-item-has-children.focussed > a:after, .menu-item-has-children:hover > a:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.menu-item-has-children.focussed > .submenu, .menu-item-has-children:hover > .submenu {
    display: block;
    clip: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.submenu a {
    font-size: 16px;
    font-weight: bold;
}

.my-pages a:focus, .my-pages a:hover, .my-pages a:active {
    color: #f63720 !important;
}

.submenu-services a {
    font-size: 14px;
    padding: 3px 12px !important;
    color: #fff;
    font-weight: normal;
    display: block !important;
}

.packages .package .package-cta a.chat {
    justify-content: end;
}

.btn-close {
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat !important;
}

.btn-close:hover {
    color: var(--bs-btn-close-color) !important;
    text-decoration: none;
    opacity: var(--bs-btn-close-hover-opacity);
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat !important;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -25px;
}

.slick-next:before, .slick-prev:before {
    font-size: 24px;
}

@media (min-width: 1600px) {
    .container-xxl {
        max-width: 1500px;
    }

    img.lozad.recognized-img {
        height: 300px;
    }
}

@media (min-width: 1900px) {
    .container-xxl {
        max-width: 1640px;
    }

    img.lozad.recognized-img {
        height: 400px;
    }
}

@media screen and (min-width: 1368px) and (max-width: 1920px) {
    .box.service .discription {
        min-height:315px;
    }
}

@media screen and (max-width: 1367px) {
    .f-55 {
        font-size: 45px;
    }

    body {
        font-size: 14px;
    }

    .f-24 {
        font-size: 22px;
    }

    .custom-cols-md-4>* {
        flex: 0 0 auto;
        width: auto
    }

    .portfolio {
        height: 230px;
    }
}

@media screen and (max-width: 1181px) {
    .fa-one {
        padding:10px 4px !important;
    }

    .f-55 {
        font-size: 40px;
    }

    .f-40 {
        font-size: 35px;
    }

    .f-30 {
        font-size: 28px;
    }

    .f-24 {
        font-size: 20px;
    }

    .gallery {
        height: 240px;
    }

    .custom-cols-md-4>* {
        flex: 0 0 auto;
        width: 24.1%
    }
}

@media screen and (max-width: 992px) {
    .f-100 {
        /*font-size: 80px;*/ /*padding: 0 23px;*/ font-size: 60px;
        padding: 0 43px;
    }

    .f-55 {
        font-size: 4.2vw;
    }

    .cta {
        background-size: 200px;
        background-position-y: bottom ;
    }

    .faq-left,.faq-right {
        opacity: 0.1;
    }

    .other-services-left {
        bottom: 0;
        height: 150px;
    }

    .form-bg {
        background-size: unset;
        background-repeat: no-repeat;
        background-position: -228px;
    }

    .service-benifit-right {
        height: 140px;
        bottom: -50px;
    }

    .nav-bar {
        clip-path: circle(0% at 100% 0%);
        background: rgba(var(--dark-color), 1.0);
        position: fixed;
        height: 100vh;
        top: 0;
        right: 0;
        left: 0;
        width: 100vw;
        transition-duration: 0.8s;
        overflow-y: scroll;
        z-index: 999999999;
        color: rgba(var(--light-color), 1) !important;
        padding: 20px;
    }

    .nav-bar li {
        padding: 0.3rem 0px;
        font-size: 14px;
    }

    .nav-bar.active {
        clip-path: circle(179.5% at 100% 0%);
    }

    .portfolio {
        height: 300px;
    }

    .mission-vission:after {
        opacity: 0.5;
    }

    .box.service .discription {
        min-height: 210px;
    }
}

@media screen and (max-width: 768px) {
    .review-image {
        margin-top: 28px;
    }

    .fa {
        height: 68%;
    }

    .fa-btn1 {
        width: 100%;
    }

    .f-55 {
        font-size: 40px;
    }

    .portfolio {
        height: 350px;
    }

    .custom-cols-md-4>* {
        flex: 0 0 auto;
        width: 32.8%;
    }
}

@media screen and (max-width: 576px) {
    .mission-vission .position-relative.mission:after {
        display: none;
    }

    .mission-vission .position-relative.vison:before ,.mission-vission .position-relative.mission:before {
        content: url(../img/left-arrow.svg) ;
        position: absolute;
        top: 50%;
        left: -28px;
        /* bottom: 50%; */
        font-size: 20px;
        transform: translateY(-50%);
        z-index: -1;
    }

    .mission-vission:after {
        left: 24px;
    }

    .form-bg {
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: -811px;
    }

    .f-55 {
        font-size: 35px;
    }

    .f-40 {
        font-size: 30px;
    }

    .f-30 {
        font-size: 24px;
    }

    footer .f-40 {
        font-size: 24px;
    }

    .portfolio {
        height: 230px;
    }

    /*.box{*/
    /*    padding: 12px;*/
    /*}*/
    .box.industry {
        height: 84px;
        padding: 20px 6px;
    }

    .box.industry h3 {
        font-size: 10px !important;
    }

    .fa {
        height: 63%;
    }

    .fa-btn {
        width: 100%;
    }

    .fa-sec .box {
        padding: 30px;
    }

    .about-service .f-55 {
        font-size: 30px;
    }

    .custom-cols-md-4>* {
        flex: 0 0 auto;
        width: 48%;
    }

    .box.service .discription {
        min-height: 120px;
    }
}

@media screen and (max-width: 431px) {
    body {
        font-size: 12px;
    }

    button,.btn {
        padding: 10px 10px !important;
    }

    .fa-sec .box {
        padding: 12px;
    }
}

section.portfolioSec.lozad .portinner .row {
    align-items: flex-end;
    background: #fff;
    margin-bottom: 80px;
    padding: 0 0 0 70px;
    border-radius: 50px;
    min-height: 645px;
    position: relative;
    box-shadow: 0 0 10px 12px #0000000a;
    overflow: hidden;
    z-index: 9;
}

section.portfolioSec.lozad .portinner h2 {
    font-size: 50px;
    line-height: 1;
    color: #000000;
    text-transform: uppercase;
    font-weight: 600;
}

section.portfolioSec.lozad .portinner p {
    font-size: 20px;
    color: #000000;
}

section.portfolioSec {
    padding: 80px 0;
}

section.portfolioSec.lozad .portinner .buttonsrow {
    display: flex;
    align-items: center;
}

section.portfolioSec.lozad .portinner .buttonsrow a.btn {
    line-height: 1 !important;
    padding: 10px 40px !important;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40px;
    color:#fff !important;
}
section.portfolioSec.lozad .portinner .buttonsrow a.btn:active{
    color:#fff !important;
}

section.portfolioSec.lozad .portinner .row .col-md-6:first-child {
    padding-bottom: 90px;
    padding-top: 70px;
}

section.portfolioSec.lozad .portinner.portinnercolor2 .row p {
    color: #000;
}

section.portfolioSec.lozad .portinner.portinnercolor2 .row span {
    color: #000;
}

section.portfolioSec.lozad .portinner.portinnercolor2 .row span.clr-1.icon-Group-15959 {
    background: -webkit-linear-gradient(#8e1bd9, #f13629);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.portfolioSec.lozad .portinner.portinnercolor3 .row:after {
    background: radial-gradient(circle, #ea3836 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .mainport .portinner:last-child .row {
    margin-bottom: 0;
    /*margin: 30px 20px;*/
}

section.portfolioSec.lozad .portinner.portinnercolor4 .row {
    padding-right: 0;
}

section.portfolioSec.lozad .portinner.portinnercolor4 .row .col-md-6:last-child {
    padding-right: 0;
}

section.portfolioSec.lozad .portinner {
    position: relative;
}

section.portfolioSec.lozad .portinner .arrow-btn a {
    position: absolute;
    top: 30px;
    right: 5px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    filter: brightness(30.5);
}

section.portfolioSec.lozad .portinner .arrow-btn img {
    margin-right: 11px;
}

section.portfolioSec.lozad.webappSec .portinner .row {
    min-height: unset;
    align-items: center;
}

section.portfolioSec.lozad.webappSec .portinner .row h2 {
    font-size: 50px;
}

section.portfolioSec.lozad.webappSec .portinner .row p {
    font-size: 18px;
}

section.portfolioSec.lozad.webappSec .portinner .row .col-md-5:first-child {
    padding-bottom: 90px;
    padding-top: 70px;
}

section.portfolioSec.lozad.webappSec.mobileappSec .portinner .row img {
    height: 600px;
    object-fit: scale-down;
    padding: 50px;
}

section.portfolioSec.lozad.webappSec.mobileappSec .portinner .row .col-md-7:last-child, section.portfolioSec.lozad.webappSec.mobileappSec .portinner .row .col-md-6:last-child {
    text-align: center;
}

.portfolioinner ul.submenu {
    width: 240px;
    left: 0 !important;
}

.portfolioinner {
    position: relative;
}

.portfolioinner.menu-item-has-children > .submenu > li {
    width: 100%;
}

section.portfolioSec.lozad .portinner .row:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: -50%;
    top: 0;
    z-index: -1;
    background: radial-gradient(circle, rgb(68 68 68) 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.portinnercolor2 .row:after {
    background: radial-gradient(circle, #66eaaf 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .mainport .portinner:last-child .row:after {
    background: radial-gradient(circle, #2b9ff5 0%, rgba(255, 43, 156, 0) 88%);
}

section.banner.bread span.clr-2 {
    font-size: 70px;
    color: #000;
}

section.portfolioSec.lozad .portinner.color1 .row::after {
    background: radial-gradient(circle, #00a601 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color2 .row::after {
    background: radial-gradient(circle, #154d6e 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color3 .row::after {
    background: radial-gradient(circle, #ffad05 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color4 .row::after {
    background: radial-gradient(circle, #ff8f4c 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color5 .row::after {
    background: radial-gradient(circle, #2664ec 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color6 .row::after {
    background: radial-gradient(circle, #000000 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color7 .row::after {
    background: radial-gradient(circle, #eabf33 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color8 .row::after {
    background: radial-gradient(circle, #9543f5 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color9 .row::after {
    background: radial-gradient(circle, #dc0408 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color10 .row::after {
    background: radial-gradient(circle, #02c8e5 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color11 .row::after {
    background: radial-gradient(circle, #7bdfb8 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color12 .row::after {
    background: radial-gradient(circle, #b6b6b6 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color13 .row::after {
    background: radial-gradient(circle, #1f114a 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.color14 .row::after {
    background: radial-gradient(circle, #dc0408 0%, rgba(255, 43, 156, 0) 88%);
}

section.portfolioSec.lozad .portinner.mcolor1 .row::after {
    background: radial-gradient(circle, #00a8a3 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor2 .row::after {
    background: radial-gradient(circle, #ffbc43 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor3 .row::after {
    background: radial-gradient(circle, #7c52a0 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor4 .row::after {
    background: radial-gradient(circle, #ffb948 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor5 .row::after {
    background: radial-gradient(circle, #b583df 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor6 .row::after {
    background: radial-gradient(circle, #2b46fe 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor7 .row::after {
    background: radial-gradient(circle, #4a97d6 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor8 .row::after {
    background: radial-gradient(circle, #990808 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor9 .row::after {
    background: radial-gradient(circle, #74e966 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor10 .row::after {
    background: radial-gradient(circle, #bf1720 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor11 .row::after {
    background: radial-gradient(circle, #3f5bd4 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor12 .row::after {
    background: radial-gradient(circle, #6f27c3 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor13 .row::after {
    background: radial-gradient(circle, #0058e7 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor14 .row::after {
    background: radial-gradient(circle, #5be295 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor15 .row::after {
    background: radial-gradient(circle, #1e5879 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor16 .row::after {
    background: radial-gradient(circle, #256caf 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.lozad .portinner.mcolor17 .row::after {
    background: radial-gradient(circle, #4965fb 0%, rgba(255, 43, 156, 0) 88%) !important;
}

.mainport .owl-stage {
    display: flex;
}
.mainport .owl-stage-outer {
    overflow: hidden;
}
section.homeportfolioSec .portinner .arrow-btn a {
    top: 60px !important;
    right: 50px !important;
}
section.homeportfolioSec .mainport .portinner .row {
    margin: 30px 20px !important;
}
section.portfolioSec .owl-nav {
    display: none;
}
section.portfolioSec .owl-dots {
    display: none;
}
.portfolio-assets {
  width: 424px;
  height: 400px;
  border-radius: 10px;
  overflow:hidden;
  filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.25));
}
.p1::before {
  content: '';
  position: absolute;
  background: url('../img/p1.webp');
  width: 168px;
  height: 168px;
  top: -88px;
  right: -70px;
}
.p2::after {
  content: '';
  position: absolute;
  background: url('../img/p2.webp') no-repeat center center/cover;
  width: 155px;
  height: 134px;
  bottom: -60px;
  left: -65px;
  z-index: -1
}
.bg-portfolio-text {
  position: absolute;
  top: -210px;
  left: -80px;
  opacity: 0.05;
}
.vid-poster {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.box {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  transition: .4s linear;
  padding: 0;
}
.box.service {
    padding: 20px;
}
.port-overlay {
  background: rgb(0 0 0 / 39%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  position: absolute;
  top: 0;
  transition: clip-path .8s ease-out;
  clip-path: circle(0rem at 94.9% 15%);
  border-radius: 10px;
}
.box:hover .port-overlay {
  clip-path: circle(133% at 94.9% 15%);
}
.port-overlay .icon {
  width: 60px;
}
.txt-2d {
  background-color: #000000d9;
  width: 84%;
  height: 60px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  opacity: 0;
  transform: translate(-270px, 0px);
  transition: all 1s ease-out; 
  text-wrap:nowrap;
}
.txt-2d>* {
  font-size:18px !important;
  margin:0 !important;
  width:80%;

}
.box:hover .txt-2d {
  transform: translate(0px, 0px);
  transition: all 1s ease-out 0.2s;
  opacity: 1;
}
section.portfolio-video .tabs-portfolio nav.my-nav button {
    margin: 0 10px;
    font-size: 19px;
}
section.portfolioSec.homeportfolioSec .portinner h2 {
    font-size: 52px;
}
section.portfolioSec.homeportfolioSec .portinner p {
    font-size: 16px;
}
section.portfolioSec.homeportfolioSec .portinner .row {
    min-height: 450px;
    align-items: center;
}
section.portfolioSec.homeportfolioSec .portinner .col-md-6 img {
    width: 80%;
}
section.portfolioSec.homeportfolioSec .portinner .col-md-6:first-child {
    padding-bottom: 30px !important;
    padding-top: 30px !important;
}
section.portfolioSec.homeportfolioSec .mainport .owl-stage .owl-item:nth-child(2) .portinner .row:after {
    background: radial-gradient(circle, #ea3836 0%, rgba(255, 43, 156, 0) 88%) !important;
}
section.portfolioSec.homeportfolioSec .mainport .owl-stage .owl-item:nth-child(3) .portinner .row:after {
    background: radial-gradient(circle, #66eaaf 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.homeportfolioSec .mainport .owl-stage .owl-item:first-child .portinner .row:after {
    background: radial-gradient(circle, #9f0707 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.homeportfolioSec .mainport .owl-stage .owl-item:last-child .portinner .row:after {
    background: radial-gradient(circle, #424b9a 0%, rgba(255, 43, 156, 0) 88%);
}
section.portfolioSec.homeportfolioSec {
    padding-bottom: 0;
}

.services button:before, .services button:after {
    color: #fff !important;
}
.about-service .box,
.bg-gradient .box{
    padding: 24px;
}
.box.recognized {
    padding: 25px;
}
.hide-fornow {
    display: none;
}
.box.service {
    min-height: 500px !important;
}
li.nav-services.menu-item-has-children .submenu {
    padding-top: 0;
}
header button.w-100 {
    width: 150px !important;
}

header a.logo {
    width: 160px;
}