$body-color:  #565790; 
$main-color: #04B9F7; 
$heading-color: #1E026B;
$optional-color:linear-gradient(90deg, #3799FF 0%, #36CFF9 107.5%);
$star-color: #FFC107;
$white-color: #ffffff; 
$black-color: #000000; 
$hover-color:  rgba(255, 64, 87, 0.09);
$border-color: #EEEEEE;
$transition: all ease 0.5s; 
/*================================================
Navbar Area CSS
=================================================*/
.navbar {
    top: -1px;
    left: 0;
    right: 0;
    height: auto;
    z-index: 4;
    padding: {
        left: 0;
        right: 0;
        top: 12px;
        bottom: 12px;
    };
    background-color: $white-color;
    &.style1 {
        border-bottom: solid 1px rgba(255, 255, 255, 0.08);
        background-color: transparent;
        .navbar-nav {
            .nav-item {
                .nav-link  {
                    color: $white-color;
                    &:hover, &.active {
                        color: $main-color;
                        &.with-image {
                            .navbar-image {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
        &.sticky {
            top: -1px;
            left: 0;
            width: 100%;
            z-index: 1030;
            position: sticky;
            background-color: $heading-color;
            box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
            animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
            padding: {
                top: 12px;
                bottom: 12px;
            };
            border-color: $heading-color;
        }
        .navbar-toggler {
            .burger-menu {
                cursor: pointer;
                span {
                    background: $white-color;
                }
            }
        }
    }
    &.sticky {
        top: -1px;
        left: 0;
        width: 100%;
        z-index: 1030;
        position: sticky;
        background-color: $white-color;
        box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
        animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
        padding: {
            top: 12px;
            bottom: 12px;
        };
        border-color: transparent;
    }
    .navbar-brand {
        font-size: inherit;
        line-height: 1;
        padding: 0;
    }
    ul {
        padding-left: 0;
        margin-bottom: 0;
        padding-right: 15px;
        list-style-type: none;
    }
    .navbar-toggler {
        color: $heading-color;
        font-size: inherit;
        box-shadow: unset;
        border: none;
        padding: 0;

        .burger-menu {
            cursor: pointer;

            span {
                height: 3px;
                width: 30px;
                margin: 5px 0;
                display: block;
                background: $heading-color;
            }
        }
    }
    .navbar-nav {
        .nav-item {
            position: relative;
            margin: {
                left: 20px;
                right: 20px;
            };
            .nav-link {
                position: relative;
                color: $heading-color;
                font-family: 'Reem Kufi', sans-serif;
                transition: $transition;
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 25px;
                    left: 0;
                    height: 1px;
                    width: 0;
                    opacity: 0;
                    border: none;
                    transition: $transition;
                    background-color: $main-color;
                }
                font: {
                    weight: 500;
                    size: 18px;
                };
                padding: {
                    left: 0;
                    right: 0;
                    top: 25px;
                    bottom: 25px;
                };
                &:hover, &.active {
                    color: $main-color;
                    &.with-image {
                        .navbar-image {
                            opacity: 1;
                        }
                    }
                    &::after {
                        opacity: 1;
                        right: 0;
                        width: 100%;
                    }
                }
                &.with-image {
                    position: relative;
                    .navbar-image {
                        position: absolute;
                        bottom: -12px;
                        text-align: center;
                        left: 50%;
                        transition: $transition;
                        opacity: 0;
                        transform: translateX(-11px);
                    }
                }
            }
            .dropdown-toggle {
                padding-right: 18px;
                &::after {
                    left: -5px;
                }
                &::before {
                    position: absolute;
                    content: "\EA4E";
                    line-height: 1;
                    right: -3px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: remixicon!important;
                    font-size: 20px;
                }
            }
            &:last-child {
                margin-right: 0;
            }
            &:first-child {
                margin-left: 0;
            }
            &:hover, &.active {
                .nav-link {
                    color: $main-color;
                }
            }
            .dropdown-menu {
                left: 0;
                top: 90px;
                opacity: 0;
                z-index: 99;
                border: none;
                width: 250px;
                margin-top: 0;
                display: block;
                padding: 12px 0;
                border-radius: 5px;
                position: absolute;
                visibility: hidden;
                background: $white-color;
                transition: all 0.2s ease-in-out;
                transform: translate3d(0, 18px, 0);
                box-shadow: rgba(4, 4, 5, .20) 0px 7px 36px -8px;

                .nav-item {
                    margin: 0;
                    
                    .nav-link {
                        display: block;
                        padding: 10.5px 25px;
                        color: $heading-color;
                        &::after {
                            display: none;
                        }
                        
                        &.active, &:hover {
                            color: $main-color;
                        }
                        &.dropdown-toggle {
                            &::before {
                                top: 50%;
                                right: 20px;
                                transform: translateY(-50%);
                            }
                        }
                    }
                    .dropdown-menu {
                        top: 0;
                        opacity: 0;
                        left: -100%;
                        margin-top: 0;
                        visibility: hidden;
                        transform: translate3d(0, 18px, 0);
                        
                        .nav-item {
                            .nav-link {
                                color: $body-color;

                                &.active, &:hover {
                                    color: $main-color;
                                }
                            }
                            .dropdown-menu {
                                top: 0;
                                opacity: 0;
                                left: 100%;
                                visibility: hidden;
                                transform: translate3d(0, 18px, 0);
    
                                .nav-item {
                                    .nav-link {
                                        color: $body-color;
    
                                        &.active, &:hover {
                                            color: $main-color;
                                        }
                                    }
                                    .dropdown-menu {
                                        top: 0;
                                        opacity: 0;
                                        left: -100%;
                                        visibility: hidden;
                                        transform: translate3d(0, 18px, 0);
            
                                        .nav-item {
                                            .nav-link {
                                                color: $heading-color;
            
                                                &.active, &:hover {
                                                    color: $main-color;
                                                }
                                            }
                                            &.active {
                                                .nav-link {
                                                    color: $heading-color;
                                                }
                                            }
                                            &:hover {
                                                .dropdown-menu {
                                                    opacity: 1;
                                                    visibility: visible;
                                                }
                                            }
                                        }
                                    }
                                    &.active {
                                        .nav-link {
                                            color: $heading-color;
                                        }
                                    }
                                    &:hover {
                                        .dropdown-menu {
                                            opacity: 1;
                                            visibility: visible;
                                            transform: translate3d(0, 0, 0);
                                        }
                                    }
                                }
                            }
                            &.active {
                                .nav-link {
                                    color: $main-color;
                                }
                            }
                            &:hover {
                                .dropdown-menu {
                                    opacity: 1;
                                    visibility: visible;
                                    transform: translate3d(0, 0, 0);
                                }
                            }
                        }
                    }
                    &.active {
                        .nav-link {
                            color: $heading-color;
                        }
                    }
                    &:hover {
                        .dropdown-menu {
                            opacity: 1;
                            margin-top: 0;
                            visibility: visible;
                            transform: translate3d(0, 0, 0);
                        }
                    }
                }
            }
            &:hover {
                .dropdown-menu {
                    opacity: 1;
                    visibility: visible;
                    transform: translate3d(0, 0, 0);
                }
            }
        }
    }
    .others-option {
        margin-left: 30px;
        position: relative;
        .option-item {
            padding-right: 12px;
            &:last-child {
                padding-right: 0;
            }
            .search-bar {
                position: relative;
                top: 5px;
                &.style2 {
                    i {
                        color: #0e0132;
                        font-size: 18px;
                    }
                }
                i {
                    color: $white-color;
                    font-size: 17px;
                }
            }
        }
        
    }
    .side-bar-btn {
        border: none;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    } to {
        opacity: 1;
        transform: translateZ(0)
    }
}

// Responsive Navbar
.responsive-navbar {
    border: 0 !important;
    .offcanvas-header {
        padding: 15px;
        border-bottom: 1px solid #eeeeee;
        justify-content: space-between;
        .close-btn {
            background-color: transparent;
            color: $black-color;
            font-size: 20px;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            border: 0;

            &:hover {
                color: $main-color;
            }
        }
    }
    .offcanvas-body {
        padding: 30px 15px 15px;
        background-color: $white-color;
        .accordion {
            .accordion-item {
                border: 0;
                padding: 0;
                border-radius: 0;
                margin-bottom: 25px;
                color: $black-color;
                background-color: transparent;

                .accordion-button {
                    width: 100%;
                    display: block;
                    box-shadow: unset;
                    position: relative;
                    padding: 0 18px 0 0;
                    color: $heading-color;
                    background-color: transparent;
                    transition: $transition;
                    font: {
                        size: 15px;
                        weight: 500;
                    };
                    &::after {
                        display: none;
                    }
                    &::before {
                        position: absolute;
                        content: "\EA4E";
                        font-family: remixicon!important;
                        line-height: 1;
                        right: -2px;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 15px;
                        margin-top: -2px;
                    }
                    &.without-icon {
                        &::before {
                            display: none;
                        }
                    }
                    &:hover, &.active {
                        color: $main-color;
                    }
                }
                .accordion-collapse {
                    .accordion-body {
                        padding: 20px;
                        margin-top: 12px;
                        background-color: #f8f8f8;

                        .accordion-item {
                            color: $body-color;
                            margin-bottom: 15px;
                            border-bottom: none;
                            padding-bottom: 0;
            
                            .accordion-link {
                                width: 100%;
                                display: block;
                                color: $body-color;
                                background-color: transparent;
                                font: {
                                    size: 15px;
                                    weight: 500;
                                };
                                &:hover, &.active {
                                    color: $main-color;
                                }
                            }
                            .accordion-button {
                                width: 100%;
                                display: block;
                                box-shadow: unset;
                                position: relative;
                                padding: 0 18px 0 0;
                                color: $body-color;
                                background-color: transparent;
                                font: {
                                    size: 15px;
                                    weight: 500;
                                };
                                &::after {
                                    display: none;
                                }
                                &::before {
                                    position: absolute;
                                    content: "\EA4E";
                                    font-family: remixicon!important;
                                    line-height: 1;
                                    right: -2px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    font-size: 15px;
                                    margin-top: -2px;
                                }
                            }
                            .accordion-collapse {
                                .accordion-body {
                                    background-color: $white-color;

                                    .accordion-item {
                                        .accordion-link {
                                            color: $body-color;
                                            
                                            &:hover, &.active {
                                                color: $main-color;
                                            }
                                        }
                                        .accordion-collapse {
                                            .accordion-body {
                                                background-color: #f8f8f8;
                                            }
                                        }
                                    }
                                }
                            }
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .others-option {
            margin-left: 0;
            margin-top: 30px;
            position: relative;
            .option-item {
                margin-right: 10px;
                &:last-child {
                    margin-right: 0;
                }
            }
            
        }
    }
    .others-option {
        margin-left: 30px;
        position: relative;
        .option-item {
            padding-right: 12px;
            &:last-child {
                padding-right: 0;
            }
            .search-bar {
                position: relative;
                top: 5px;
                i {
                    color: $heading-color;
                    font-size: 20px;
                }
            }
        }
        
    }
    .side-bar-btn {
        border: none;
    }
}

// Slidebar Modal
.offcanvas-body {
    position: relative;
    background: $white-color;
    width: 100%;
    padding: 40px 40px;
    .btn-close {
        position: absolute;
        right: 25px;
        top: 35px;
        opacity: 1;
        background-image: none;
        transition: $transition;
        i {
            font-size: 27px;
            color: $heading-color;
            transition: $transition;
        }
        &:hover {
            i {
                color: red;
            }
        }
        &:focus {
            box-shadow: unset;
            outline: 0;
        }
    }
    .footer-widget {
        .form-control {
            background: #F7F7F7;
            color: $heading-color;
        }
        h3 {
            margin-bottom: 10px;
            color: $heading-color;
        }
        p {
            color: $body-color;
        }
        &.style2 {
            margin-bottom: 40px;
        }
        .footer-contact {
            li {
                a {
                    display: block;
                    color: $heading-color;
                }
                p {
                    color: $heading-color;
                }
                .icon {
                    color: #04B9F7;
                    background: rgba(30, 2, 107, 0.06);
                }
            }
        }
    }
    .social-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        li {
            display: inline-block;
            padding-right: 10px;
            &:last-child {
                padding-right: 0;
            }
            a {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                color: #04B9F7;
                background: rgba(30, 2, 107, 0.06);
                text-align: center;
                line-height: 34px;
                display: inline-block;
                transition: $transition;
                &:hover {
                    background-color: $main-color;
                    color: $white-color;
                }
            }
        }
    }
    
}

// Search Modal
.modal-content {
    background: rgba(31, 31, 31, 0.8);
    .modal-body {
        .search-warp {
            max-width: 700px;
            margin: auto;
            background: #F7F7F7;
            top: 400px;
            position: relative;
            padding: 70px;
            border-radius: 5px;
            .form-control {
                height: 55px;
                background-color: #ffffff;
                border: 1px solid rgba(0, 0, 0, 0.06);
                border-radius: 8px;
                padding-left: 20px;
                font-size: 15px;
                &:focus {
                    box-shadow: unset;
                    &::placeholder {
                        color: transparent;
                    }
                }
                &::placeholder {
                    color: $body-color;
                    transition: $transition;
                }
            }
            .input-box {
                position: relative;
                width: 100%;
            }
            #button-addon2 {
                position: absolute;
                top: 5px;
                right: 5px;
                bottom: 5px;
                color: $white-color;
                border: none;
                padding: 14px 16px;
                background-color: $main-color;
                i {
                    font-size: 16px;
                    color: $white-color;
                }
            }
        }
        .btn-close {
            background-color: rgba(255, 255, 255, 0.1);
            height: 40px;
            width: 40px;
            border-radius: 50%;
            position: absolute;
            right: 50px;
            z-index: 1;
            top: 50px;
            filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(75deg) brightness(101%) contrast(101%);
            opacity: 1;
            transition: $transition;
            &:focus {
                outline: 0;
                box-shadow: unset;
            }
            &:hover {
                background-color: $main-color;
                filter: none;
            }
        }
    }
}

// Video Modal
.popup {
    display: none;
    position: fixed;
    z-index: 1030;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.904);
    .popup-content {
        margin: 15% auto;
        padding: 20px;
        width: 80%;
        max-width: 700px;
        position: relative;
    } 
    .close {
        right: 0px;
        top: -25px;
        position: absolute;
        filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(7473%) hue-rotate(56deg) brightness(108%) contrast(108%);
        opacity: 1;
        cursor: pointer;
        font-size: 30px;
        &:focus {
            outline: 0;
            box-shadow: unset;
        }
    }
    iframe {
        width: 100%;
        height: 450px;
        display: block;
        border-radius: 10px;
    }
    .modal-body {
        position: relative;
        flex: 1 1 auto;
        padding: 0;
    }
}
/* Show the popup when the button is clicked */
.popup-show {
    display: block;
}

/*================================================
Scroll Top Area CSS
=================================================*/
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: $main-color;
    border-radius: 50%;
    line-height: 1;
    border: none;
    cursor: pointer;
    background-color: transparent;
    opacity: 0.8;
    z-index: 9999;
    font-size: 50px;
}
#scrollTopBtn:hover {
    opacity: 1;
}

/* Max width 767px */
@media only screen and (max-width: 767px) {

    .navbar {
        padding: {
            top: 20px;
            bottom: 20px;
        };
        .container-fluid {
            padding: {
                left: calc(var(--bs-gutter-x) * .5);
                right: calc(var(--bs-gutter-x) * .5);
            };
        }
        .collapse {
            display: none !important;
        }
        &.sticky {
            padding: {
                top: 20px;
                bottom: 20px;
            };
        }
        &.style1 {
            &.sticky {
                padding: {
                    top: 20px;
                    bottom: 20px;
                };
            }
        }
    }
    .modal-content {
        .modal-body {
            top: 0;
            .search-warp {
                top: 200px;
                padding: 25px 15px;
                .form-control {
                    width: 100%;
                    font-size: 22px;
                }
            }
            .btn-close {
                right: 30px;
                top: 30px;
            }
        }
    }
    #scrollTopBtn {
        bottom: 53px;
        right: 20px;
        line-height: 20px;
        font-size: 35px;
    }



}

/* Min width 576px to Max width 767px */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .navbar {
        .container-fluid {
            max-width: 540px;
        }
    }

    .responsive-navbar {
        .offcanvas-header {
            padding: 15px 30px;
        }
        .offcanvas-body {
            padding: 30px;
        }
    }
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {


    .navbar {
        padding: {
            top: 15px;
            bottom: 15px;
        };
        .container-fluid {
            max-width: 720px;
            padding: {
                left: calc(var(--bs-gutter-x) * .5);
                right: calc(var(--bs-gutter-x) * .5);
            };
        }
        .collapse {
            display: none !important;
        }
        &.sticky {
            padding: {
                top: 15px;
                bottom: 15px;
            };
        }
    }
    .responsive-navbar {
        .offcanvas-header {
            padding: 15px 30px;
        }
        .offcanvas-body {
            padding: 30px;
        }
    }
    .navbar {
        .navbar-nav {
            .nav-item {
                .nav-link {
                    font-size: 15px;
                }
            }
        }
    }


}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar {
        padding: {
            top: 10px;
            bottom: 10px;
        };
        ul {
            padding-right: 0;
        }
        .container-fluid {
            max-width: 960px;
            padding: {
                left: calc(var(--bs-gutter-x) * .5);
                right: calc(var(--bs-gutter-x) * .5);
            };
        }
        .navbar-nav {
            .nav-item {
                margin: {
                    left: 15px;
                    right: 15px;
                };
                .nav-link {
                    font-size: 15px;
                    span {
                        display: none;
                    }
                }
            }
        }
        .others-option {
            .option-item {
                margin-left: 10px;
                .default-btn {
                    padding: 12px 20px 12px 20px;
                    font-size: 15px;
                    span {
                        display: none;
                    }
                }
                ul {
                    padding-right: 0;
                    li {
                        padding-right: 0;
                        .content {
                            display: none;
                        }
                    }
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}

/* Min width 1200px to Max width 1399px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .navbar {
        .others-option {
            margin-left: 0;
            .option-item {
                margin-left: 10px;
                margin-right: -10px;
                .default-btn {
                    padding: 12px 20px 12px 20px;
                    font-size: 15px;
                    span {
                        display: none;
                    }
                }
                ul {
                    padding-right: 0;
                    li {
                        padding-right: 0;
                        .content {
                            display: none;
                        }
                    }
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        .navbar-nav {
            .nav-item {
                margin-left: 15px;
                margin-right: 15px;
                .dropdown-toggle {
                    padding-right: 15px;
                }
                .nav-link {
                    font-size: 15px;
                    &.with-image {
                        .navbar-image {
                            bottom: -13px;
                        }
                    }
                }
            }
        }
    }

}


/*================================================
Preloader Top Area CSS
=================================================*/
.preloader-area {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: $main-color;
    .loader {
        height:100%;
        width:100%
    }
}
//custom mixins
@mixin transform($transform) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    transform: $transform;
}
@mixin animation($animation) {
-webkit-animation: $animation;
-moz-animation: $animation;
animation: $animation;
}
@mixin keyframes($name, $name1) {
@-webkit-keyframes #{$name} {
    @content;
}
@-moz-keyframes #{$name} {
    @content;
}
@-ms-keyframes #{$name} {
    @content;
}
@keyframes #{$name} {
    @content;
}
}
@mixin opacity($opacity) {
-webkit-opacity: $opacity;
-moz-opacity: $opacity;
opacity: $opacity;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
  
//variables
$size: 50px;
$primary-color: white;
  
//cube only
.cube-folding {
width: $size;
height: $size;
display: inline-block;
@include transform(rotate(45deg));
font-size: 0;
span {
    position: relative;
    width: $size/2;
    height: $size/2;
    @include transform(scale(1.1));
    display: inline-block;
    &::before {
    content: "";
    background-color: $primary-color;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: $size/2;
    height: $size/2;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    @include animation(folding 2.5s infinite linear both);
    }
}
.leaf2 {
    @include transform(rotateZ(90deg) scale(1.1));
    &::before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-color: darken($primary-color, 5%);
    }
}
.leaf3 {
    @include transform(rotateZ(270deg) scale(1.1));
    &::before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-color: darken($primary-color, 5%);
    }
}
.leaf4 {
    @include transform(rotateZ(180deg) scale(1.1));
    &::before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-color: darken($primary-color, 10%);
    }
}
}
  
//animation
@include keyframes(folding, folding animation) {
0%,
10% {
    @include transform(perspective(140px) rotateX(-180deg));
    @include opacity(0);
}
25%,
75% {
    @include transform(perspective(140px) rotateX(0deg));
    @include opacity(1);
}
90%,
100% {
    @include transform(perspective(140px) rotateY(180deg));
    @include opacity(0);
}
}
  
//with loading text and shadow
.cube-wrapper {
position: fixed;
left: 50%;
top: 50%;
margin-top: -80px;
margin-left: -$size;
width: $size * 2;
height: $size * 2;
text-align: center;
//shadow
&:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -76px;
    margin: auto;
    width: 116px;
    height: 11px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    filter: blur(2px);
    border-radius: 100%;
}
.loading {
    font-size: 55px;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: block;
    color: $primary-color;
    position: relative;
    top: $size/2;
    z-index: 2;
    @include animation(text 0.5s ease infinite alternate);
}
}
@include keyframes(text, text animation) {
100% {
    top: ($size/2) + 10;
}
}
@include keyframes(shadow, shadow animation) {
100% {
    bottom: -18px;
    width: $size * 2;
}
}
  