.navbar-nav {
    .nav-item {
        margin: 0 20px;

        a {
            font-family: $font-title;
            font-weight: bold;
            color      : $light;

            &:after {
                content: inherit;
            }

            transition : all 0.5s;
        }

        &:hover {
            .nav-link {
                color     : var(--text-menu);
                transition: all 0.5s;
            }
        }

        a.active {
            box-shadow: inherit;
            color     : var(--text-menu) !important;
        }

        .btnTheme {
            color: var(--text-color);
        }
    }

    .nav-item.active a {
        color: var(--text-menu);
    }

    .dropdown-menu {
        background      : transparent;
        // border       : none;
        // display   : block;
    }

    .dropdown-item {

        // color: $light !important;
        img {
            margin-right: 5px;
            transition  : all 0.5s;
        }

        &.active {
            img {
                margin-right: 8px;
            }
        }

        &:hover {
            color: var(--text-menu);

            img {
                margin-right: 8px;
                transition  : all 0.5s;
            }
        }
    }
}

.navbar-brand {
    .logo {
        max-width: 70px;
    }
}

.group-logo {
    max-width     : 70px;
    display       : flex;
    flex-direction: column;
    padding       : 5px;

    img {
        display: block;
        width  : 70px;
        height : auto;
    }
}

.flags {
    width        : 40px;
    height       : 26px;
    border       : 1px solid $warning;
    border-radius: 5px;
}

.dropdown-menu {
    &.list-flag {
        position  : absolute;
        background: transparent !important;
        min-width : 40px;
        top       : 74%;

        .dropdown-item {
            padding: 0;
            margin : 5px 0;

            &:hover {
                background-color: transparent;
            }
        }
    }
}

.nav-icon-5 {
    width   : 35px;
    height  : 30px;
    margin  : 5px 0 0 10px;
    position: relative;
    cursor  : pointer;
    display : inline-block;
}

.nav-icon-5 {
    span {
        background-color      : var(--text-color);
        // background-color   : white;
        position              : absolute;
        border-radius         : 2px;
        transition            : .3s cubic-bezier(.8, .5, .2, 1.4);
        width                 : 100%;
        height                : 4px;
        transition-duration   : 500ms;

        &:nth-child(1) {
            width: 70%;
            top  : 0px;
            right: 0px;
        }

        &:nth-child(2) {
            top    : 13px;
            left   : 0px;
            opacity: 1;
        }

        &:nth-child(3) {
            width : 50%;
            bottom: 0px;
            right : 0px;
        }
    }

    &:not(.open):hover span:nth-child(1) {
        transform: rotate(-3deg) scaleY(1.1);
    }

    &:not(.open):hover span:nth-child(2) {
        transform: rotate(3deg) scaleY(1.1);
    }

    &:not(.open):hover span:nth-child(3) {
        transform: rotate(-4deg) scaleY(1.1);
    }

    &.open {
        span {
            &:nth-child(1) {
                width    : 100%;
                transform: rotate(45deg);
                top      : 13px;
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                width    : 100%;
                transform: rotate(-45deg);
                top      : 13px;
            }
        }
    }
}

@keyframes slide-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100px);
    }
}


.svg-cloud {
    position         : absolute;
    right            : 0;
    top              : 0;
    opacity          : 0.8;
    enable-background: new 0 0 908 500;

    .cloud-header {
        fill: #051937ad;
    }
}

.home-header {
    background-image   : url('../images/bg-home.jpg');
    background-position: center;
    background-size    : cover;
    background-repeat  : no-repeat;

    .nav-item {
        a {
            color: $light !important;

            &:hover {
                color: $warning !important;
            }
        }
    }

    .nav-icon-5 {
        span {
            background-color: $light !important;
        }
    }

    .dropdown-menu {
        &.list-service {
            background-color: $footer !important;
        }

        .dropdown-item {
            &:hover {
                color: $warning !important;
            }
        }
    }

    .jumbotron {
        max-width      : 650px;
        margin         : auto;
        height         : 700px;
        display        : flex;
        justify-content: center;
        align-items    : center;
        padding        : 0;

        h1 {
            color: $light;
        }

        p {
            opacity: 0.7;
            color  : $light;
        }

        a {
            font-weight: 500;
            background : transparent;
            cursor     : pointer;
            transition : all 0.3s ease;
            position   : relative;
            display    : inline-block;
            margin-top : 3rem;
        }
    }
}

.learn-more {
    background   : linear-gradient(to right, #b31d0c, #bb830c) !important;
    color        : $light;
    padding      : 10px 30px;
    border-radius: 50px;
    z-index      : 1;
    transition   : all 0.5s;

    i {
        position: relative;
        right   : -10px;
    }
}

.learn-more:hover {
    text-shadow         : 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
    transform           : translateY(-7px);
    animation-play-state: paused;
}

.learn-more:active {
    top: 2px;
}

.curve-header {
    enable-background: new 0 0 1920 141;
    position         : absolute;
    bottom           : -5px;
    left             : 0;
    width            : 100%;
    z-index          : 1;

    $i: 0;

    @each $color in $svg-home-header {
        $i: $i +1;

        stop:nth-child(#{$i}) {
            stop-color: $color;
        }
    }
}

.header1 {
    fill: url(#SVGID_header_);
}

.header2 {
    fill: $fill-curve;
}

.contact-header {
    a {
        i {
            font-size: 1.3rem;
        }

        color    : $light;
        font-size: .8rem;
    }
}

.card {
    &.c-card {
        background      : var(--bg-card);
        transform-origin: top center;
        color           : var(--text-color);
        transition      : all .5s linear;

        &:hover {
            color     : $warning;
            transform : rotate(2deg);
            transition: all .5s linear;
        }
    }
}

.news-info {
    // background-color: var(--bg-card);

    .all-content {
        padding: 50px 0;
    }

    .s-header {
        max-width: 500px;
        margin   : auto;

        .s-desc {
            font-size: 14px;
        }

        .my-border {
            border-bottom: 3px solid $danger;
            display      : block;
            position     : absolute;
            width        : 50px;
            bottom       : 0;
            left         : 45%;
        }
    }
}

.ou-item {
    &:hover {
        text-decoration: none;

        .my-thumbnail {
            &:before {
                background-color: rgba($color: #000000, $alpha: 0.3);
                transition      : all 0.5s;
            }
        }

        h4 {
            color              : $warning;
            border-bottom-color: $warning !important;
            transition         : all 0.5s;
        }
    }

    .my-thumbnail {
        position: relative;

        &:before {
            content         : '';
            position        : absolute;
            width           : 100%;
            height          : 100%;
            background-color: rgba($color: #000000, $alpha: 0.55);
            transition      : all 0.5s;
        }
    }

    h4 {
        padding       : 20px 5px;
        text-align    : center;
        color         : var(--text-color);
        margin-bottom : 0;
        font-family   : $font-title;
        font-size     : 1rem;
        text-transform: uppercase;
        border-bottom : 1px solid gray;
        transition    : all 0.5s;
    }
}

.our-vision {
    // background-color   : var(--bg-card);
    // color           : $white;
    padding: 8rem 0;

    .all-content {
        padding-top: 50px;
    }

    .js-tilt {
        z-index: 99;
    }

    ul {
        li {
            span {
                font-size: 14px;
            }
        }
    }
}

.curve-footer {
    position: absolute;
    width   : 100%;
    top     : 0;
    left    : 0;
    z-index : -1;

    .footer1 {
        fill: url(#SVGID_footer_);
    }

    .footer2 {
        fill: $fill-curve;
    }
}

.feature-service {
    // background-color: var(--bg-card);

    h2 {
        font-family: $font-title;
    }

    .feature-header {
        max-width: 700px;
        margin   : auto;

        p {
            padding-top: 5px;
            opacity    : 0.8;
        }

        .my-border {
            border-bottom: 3px solid $danger;
            display      : block;
            position     : absolute;
            width        : 50px;
            bottom       : 0;
            left         : 45%;
        }
    }

    .ou-item {
        text-align: center;
        border    : 1px solid $warning;
        box-shadow: none !important;

        img {
            transition: all 0.5s;
        }

        &:hover {
            img {
                transform : scale(1.2);
                transition: all 0.5s;
            }
        }

        .my-thumbnail {
            overflow: hidden;

            &:before {
                background: transparent;
            }
        }

        p {
            text-transform: capitalize;
            margin-bottom : 0;
            font-size     : 12px;
            padding       : 5px 0;
            color         : var(--text-color);
        }

        h4 {
            font-size    : 14px;
            border-bottom: none;
            padding-top  : 0;
        }
    }
}

.our-strategic {
    color           : white;
    background-color: var(--bg-vision);
}

.recruiting {
    background-image     : url('../images/recruiting-bg.jpg');
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : top;
    background-attachment: fixed;

    .btn {
        padding: 5px 25px;
        display: flex;
        z-index: 99;
    }
}

.logo-partners {
    img {
        // width: 150px;
        filter    : grayscale(100%);
        transition: all 0.5s;

        &:hover {
            cursor       : pointer;
            filter       : none;
            z-index      : 1000;
            // transform : scale(1.2) !important;
            transition   : all 0.5s;
        }
    }
}

.getstart-bottom {
    padding: 100px 0;

    .get-start-bg {
        top      : 50%;
        left     : 50%;
        z-index  : -1;
        transform: translate(-50%, -50%);
    }

    .btn {
        $width    : 50px;
        background: $success;
        color     : $light;
        // padding: 0.5rem 1.8rem;
        overflow  : hidden;
        transition: all 0.5s;

        i {
            margin-left: 15px;
            transition : all 0.5s;
        }

        &:hover {
            color     : $warning;
            transition: all 0.5s;

            &:after {
                animation-play-state: paused;
            }
        }

        &:after {
            content   : '';
            position  : absolute;
            width     : $width;
            height    : 250%;
            background: linear-gradient(to right, rgba(254, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 29%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 254, 250, 0.7) 33%, rgba(254, 248, 223, 0) 51%, rgba(253, 240, 190, 1) 73%, rgba(253, 239, 187, 1) 75%, rgba(253, 240, 190, 1) 76%, rgba(255, 255, 255, 0) 100%);
            left      : -$width;
            top       : -75%;
            transform : rotateZ(45deg);
            animation : left 1s linear infinite;
        }
    }

    @keyframes left {
        to {
            left: 110%;
        }
    }
}

.btn-scroll {
    color           : $light;
    font-size       : 25px;
    display         : none;
    width           : 40px;
    height          : 40px;
    right           : -60px;
    bottom          : 90px;
    background-color: $warning;
    border-radius   : 50px;
    z-index         : 1000;
    transition      : all 1s;

    &:hover {
        background-color: $danger;
        cursor          : pointer;
        transition      : all 0.5s;
    }
}

.sc-7dvmpp-1 {
    display: none !important;
}

.sc-8eqc3y-0 {
    font-family: $font-text !important;
}

footer {
    background-color: $footer;
    color           : $light;

    .bg-rgba {
        padding-top     : 50px;
        background-color: rgb(0 0 0 / 66%);
    }

    a,
    p {
        font-size: 13px !important;
        color    : $light;
    }

    .f-services {
        a {
            img {
                filter: grayscale(100%);
            }
        }
    }

    a {
        transition: all 0.3s;

        i,
        img {
            transition: all 0.3s;
        }

        &:hover {
            color     : $warning;
            transition: all 0.3s;

            i,
            img {
                margin-right: 5px;
                filter      : none !important;
            }
        }
    }
}

.f-contact {
    a {
        img {
            transition: all 0.5s;
        }

        &:hover {
            img {
                transform : scale(1.2);
                transition: all 0.5s;
            }
        }
    }
}

.my-loading {
    width           : 100%;
    height          : 100%;
    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;
    align-items     : center;
    justify-content : center;
    color           : var(--text-color);
    background-color: var(--bg-color);
    overflow        : hidden;
    z-index         : 16000162;
}

.loader {
    width        : 5em;
    height       : 5em;
    font-size    : 10px;
    box-sizing   : border-box;
    border-top   : 0.3em solid hotpink;
    border-radius: 50%;
    position     : relative;
    animation    : rotating 2s ease-in-out infinite;
    --direction  : 1;
}

.loader::before,
.loader::after {
    content      : '';
    position     : absolute;
    width        : inherit;
    height       : inherit;
    border-radius: 50%;
    box-sizing   : border-box;
    top          : -0.2em;
}

.loader::before {
    border-top: 0.3em solid dodgerblue;
    transform : rotate(120deg);
}

.loader::after {
    border-top: 0.3em solid gold;
    transform : rotate(240deg);
}

.loader span {
    position   : absolute;
    color      : white;
    width      : inherit;
    height     : inherit;
    text-align : center;
    line-height: 5em;
    font-family: sans-serif;
    animation  : rotating 2s linear infinite;
    --direction: -1;
}

@keyframes rotating {
    50% {
        transform: rotate(calc(180deg * var(--direction)));
    }

    100% {
        transform: rotate(calc(360deg * var(--direction)));
    }
}


// Career page
.career {
    background-image   : url('../images/bg-career.jpg');
    background-repeat  : no-repeat;
    background-position: bottom;
    background-size    : cover;
    height             : 25rem;

    .car-desc {
        max-width: 685px;
    }
}

// End career page

// Digital Marketing
.digital-we-do {
    .after-border {
        line-height: 1.3;

        &:after {
            height: 3px;
            width : 70px;
        }
    }
}

#packages {
    .cp-header {
        max-width: 700px;
    }

    .btn-custom {
        border-radius : 50px !important;
        border-color  : $warning;
        padding       : 5px 25px !important;
        text-transform: uppercase;
        color         : $warning;
        font-weight   : 600;
        font-size     : 14px !important;
        transition    : linear 0.5s;

        &:hover {
            background: linear-gradient(90deg, $warning 0%, #fff9ae 50%, $warning 100%);
            transition: linear 0.5s;
        }
    }

    .package-name {
        border-radius: 0 0 10px 10px !important;
    }

    .btn-package {
        padding: 5px 65px !important;
    }

    .price {
        font-weight: bold;
        color      : var(--text-color);
    }

    .package-item {
        background-color: var(--package-bg);
        border          : 1px solid $warning;
    }
}

// End digital marketing

/* Creative Design */
.creative-bg {
    background-image   : url('../images/bg-creative.jpg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : cover;
}

/* End Creative Design */

/* Photo-videography */
.pv-type {
    .sale {
        position: relative;

        h6 {
            background-color: $footer;
            color           : white;
            padding         : 5px 0;
            margin-bottom   : 0;
        }

        &:hover {
            cursor: pointer;
        }

        &:hover:before {
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        }
    }

    .img-thumbnail {
        border       : none;
        padding      : 0;
        border-radius: 0;

    }
}

/* End photo-videography */


/* About page */
//About 
.about-header {
    background         : url("../images/pk1.jpg");
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;

    .about-logo {
        width    : 125px;
        max-width: 300px;
        margin   : auto;
    }
}

.fixed-bg {
    background-attachment: fixed;
    background-repeat    : no-repeat;
    background-size      : cover;
    background-position  : center center;
    height               : 100%;
    width                : 100%;
    color                : white;
    display              : table;
}

.future-phkay {
    margin-top: -10rem;
    position  : relative;
    z-index   : 2;

    .card {
        border       : none;
        border-left  : 2px solid $warning;
        border-bottom: 2px solid $warning;
        border-radius: 15px;
    }
}

.staff-avatar {
    padding-top: 10px;
    max-width  : 100px;
    margin     : auto;

    img {
        //clip-path: circle(50% at 50% 50%);
        width        : 80px;
        height       : 80px;
        object-fit   : cover;
        border-radius: 50%;
        border       : 2.5px solid $warning;
    }
}

.out-team {
    .card {
        border       : none;
        border-left  : 2px solid $warning;
        border-right : 2px solid $warning;
        border-radius: 15px;
    }
}

.active-photo {
    .card-columns {
        column-count: 2;
        column-gap  : 0px;

        .card {
            padding: 2px;

            img {
                width  : 100%;
                z-index: 1;
            }
        }
    }
}

.svg-icon.svg-icon-danger svg g [fill] {
    fill: $danger;
}

.nav-tabs {
    .nav-link {
        font-size: 12px;
    }
}

.tab-pane {
    .card {
        .card-body {
            h6 {
                font-size     : 13px;
                line-height   : 20px;
                text-transform: uppercase;
            }
        }

        &:hover {
            cursor: pointer;
        }
    }
}

/* End about page */

/* Contact Us page */
.bg-contact {
    background-image   : url('../images/bg-contact.svg');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : cover;
    padding-bottom     : 13rem;

    .jumbotron {
        max-width: 500px;
    }
}

.contact-via {
    margin-top: -10rem;

    .card{
        background: var(--bg-card);
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        
        .card-body{
            z-index: 2;
        }

        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: $warning;
            clip-path: circle(0 at 0 100%);
            opacity: .2;
            z-index: 1;
            transition: all 0.5s;
        }

        &:after{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: $warning;
            clip-path: circle(50% at 100% 0);
            opacity: .2;
            z-index: 1;
            transition: all 0.5s;
        }

        a{
            color: $blue-700;
            transition: all 0.5s;
        }

        &:hover{
            &:before{
                clip-path: circle(50.0% at 0 100%);
            }

            &:after{
                clip-path: circle(0% at 100% 0);
            }
            a{
                color: $warning;
            }
        }
    }

    .bxl-messenger {
        background: -webkit-linear-gradient(45deg,rgb( 0, 95, 255 ) 0%, rgb( 146, 0, 255 ) 50%, rgb( 255, 46, 25 ) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* End contact us page */


// Particle 
.home-header {
    canvas {
        display       : block;
        vertical-align: bottom;
    }

    /* ---- particles.js container ---- */
    #homeHeader {
        position           : absolute;
        width              : 100%;
        height             : 100%;
        background-color   : transparent;
        background-image   : url("");
        background-repeat  : no-repeat;
        background-size    : cover;
        background-position: 50% 50%;
    }

    /* ---- stats.js ---- */
    .count-particles {
        background    : #000022;
        position      : absolute;
        top           : 48px;
        left          : 0;
        width         : 80px;
        color         : #13E8E9;
        font-size     : .8em;
        text-align    : left;
        text-indent   : 4px;
        line-height   : 14px;
        padding-bottom: 2px;
        font-family   : Helvetica, Arial, sans-serif;
        font-weight   : bold;
    }

    .js-count-particles {
        font-size: 1.1em;
    }

    #stats,
    .count-particles {
        margin-top : 5px;
        margin-left: 5px;
    }

    #stats {
        border-radius: 3px 3px 0 0;
        overflow     : hidden;
    }

    .count-particles {
        border-radius: 0 0 3px 3px;
    }
}

.bg-footer {
    background-image   : url('../images/bg-footer2.jpg');
    background-position: top;
    background-size    : cover;
    background-repeat  : no-repeat;

}

.bg-getsart {
    &:before {
        content              : '';
        position             : absolute;
        top                  : 0;
        left                 : 0;
        right                : 0;
        bottom               : 0;
        background-image     : url('../images/bg-getstart.jpg');
        background-position  : center;
        background-attachment: fixed;
        background-size      : cover;
        background-repeat    : no-repeat;
        opacity              : 0.15;
    }

    .learn-more {
        &:hover {
            text-shadow: none;
            filter     : drop-shadow(0px 0px 10px $warning);
        }
    }
}
.call-center{
    top: -50px;
    right: 0;
    max-width: 100%;
    border-radius: 50% 0 0 0;
    z-index: -1;
}