@import url('/assets/styles/menu.less');
@import url('/assets/styles/font.less');
@import url('/assets/styles/darktheme.less');
@import url('/assets/styles/font_import.less');


html {
    --blue_color                : rgb(52, 109, 231);
    --text-color                : #333333;
    --sub_color                 : #54595F;
    --passive_color             : #A9B5B7;
    --background                : #ECF9FF;
    --background                : #f9faff;
    --site_background_secondary : #EEF6FF;
    --breadcumb_background      : #EDF7FF;
    --site_hover_effect         : #3371F2;
    --site_hover_effect         : #3371F2;
    --infobox_background1       : #3371F2;
    --site_infobox_one          : #2F66D9;
    --infobox_background2       : #333333;
    --site_infobox_second       : #2E2D2D;
    --title_background          : #C8DCFC;
    --black-color               : #191523;
    --purple-color              : #6555c2;
    scroll-behavior             : smooth;

}

.btn-darklight-switch {
    color : #fac502;

    i {
        &:before {
            content : "\eb94" !important;
        }
    }
}

.btn-main {
    font-size        : 16px;
    font-weight      : 600;
    color            : #fff;
    border           : none;
    background-color : var(--blue_color);
    border-radius    : 3px;
    border           : 1px solid transparent;

    &:hover {
        border     : 1px solid var(--site_hover_effect);
        color      : var(--blue_color) !important;
        background : transparent;
    }
}

//background: linear-gradient(25deg, rgba(25,21,35,1) 67%, rgba(22,52,91,1) 100%);

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

::-webkit-scrollbar-track {
    background : linear-gradient(25deg, #ffffff 67%, #cfcfcf 100%);
}

::-webkit-scrollbar-thumb {
    background : #000;
}

::-webkit-scrollbar-thumb:hover {
    background : var(--blue_color);
}

body {
    color             : #5e5c7f;
    color             : #4c6379;
    background-color  : var(--background);
    font-family       : "inter";
    font-size         : 16px;
    position          : relative;
    overflow-x        : hidden;
    padding-top       : 100px;
    background-image  : url(/assets/images/white_bg.png);
    background-repeat : no-repeat;
    background-size   : cover;
    * {
        transition   : .2s;
    }
}

.scroll.header {
    box-shadow : 0 -1px 4px rgba(0, 0, 0, 0.15);
    background : #fff;

    z-index    : 9;
    height     : 75px;
    transition : .2s;

    background : hsla(0, 0%, 100%, .66667);
    box-shadow : 0 1px 0 rgba(0, 0, 0, .02), 0 0 8px rgba(0, 0, 0, .03), 0 20px 30px rgba(0, 0, 0, .1);
    background : hsla(0, 0%, 100%, 0) linear-gradient(180deg, #f7faff, rgba(247, 250, 255, 0));
}

.header {
    height          : 100px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : .2s;
    height          : 75px;
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    z-index         : 99999999999;

    .dropdown-menu.show {
        z-index : 9999999;
    }


    .header-container {
        display         : flex;
        align-items     : center;
        justify-content : space-between;
        top             : 0;
        position        : sticky;

    }

    .left {
        width : 25%;
    }

    .center {
        width           : 60%;
        display         : flex;
        align-items     : center;
        justify-content : flex-end;

        .chose-lang {
            margin-left : 40px;

            .dropdown-menu {
                padding            : 0;
                -webkit-box-shadow : 0 17px 19px -13px #d2cfcf;
                box-shadow         : 0 17px 19px -13px #0000004d;
                margin-top         : 15px;
                z-index            : 2;
                border             : none;
                width              : max-content;
                background         : #ffffff57;
                backdrop-filter    : blur(10px);
                left               : -130px !important;

                &.show {}

                &::before {
                    content          : '';
                    background       : #fff;
                    width            : 20px;
                    height           : 20px;
                    background-color : #ffffff57;
                    clip-path        : polygon(100% 0%, 50% 50%, 100% 100%);
                    top              : -20px;
                    position         : absolute;
                    transform        : rotate(-270deg);
                    right            : 5px;
                }

                .dropdown-item {
                    font-weight : bold;
                    font-size   : 12px;
                    padding     : 10px;
                    width       : auto;

                    & :first-child {}

                    img {
                        margin-right : 8px;
                    }
                }
            }


            .btn {
                padding       : 0;
                border-radius : 50%;

                img {
                    width : 25px;
                }

                span {
                    display : none;
                }
            }

            .dropdown-toggle::after {
                display : none;
            }
        }
    }

    .right {
        width : 25%;
    }

}

.hide {
    display : none;
}




.main-section {
    position : relative;
    padding  : 100px 0 80px 0;

    .center-body {
        h4 {
            font-size                    : 4.5rem;
            font-weight                  : 700;
            line-height                  : 75px;
            color                        : #000;
            /*
            background                   : -webkit-linear-gradient(#000, #364964);
            -webkit-background-clip      : text;
            -webkit-text-fill-color      : transparent;
*/
        }
    }

    .center-bottom {
        margin      : 15px 0;
        text-align  : justify;
        line-height : 2.5;
        font-weight:500;
        margin-top  : 25px;
    }

}

.about-section {
    position   : relative;
    padding    : 90px 0 80px 0;
    text-align : center;
}


.services_section {
    position : relative;
    padding  : 80px 0;
    overflow : hidden;

    .services_svg_anime {
        position : absolute;
        bottom   : 26%;
        right    : 250px;
        display  : flex;
        width    : 500px;
        height   : 500px;
        z-index  : 0;
    }

    .box-container {
        display         : flex;
        align-items     : center;
        justify-content : space-between;
        z-index         : 1;
        position        : relative;

        .box-item {
            position            : relative;
            height              : 100%;
            padding             : 10px;
            background-color    : #fff;
            border-radius       : 3px;
            display             : flex;
            flex-direction      : column;
            width               : 24%;
            height              : 400px;
            transition          : .6s;
            padding             : 50px 30px;
            background          : #ffffffb3;
            background-size     : 50px;
            background-repeat   : no-repeat;
            background-position : 380px 360px;
            backdrop-filter     : blur(10px);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 0 8px rgba(0, 0, 0, 0.03), 0 20px 30px rgba(0, 0, 0, 0.1);
            background: hsla(0, 0%, 100%, 0) linear-gradient(180deg, #f7faff, rgba(247, 250, 255, 0));

            .ico {
                display           : flex;
                -webkit-box-align : center;
                -ms-flex-align    : center;
                align-items       : center;
                -webkit-box-pack  : center;
                -ms-flex-pack     : center;
                justify-content   : center;
                font-size         : 40px;
                width             : 75px;
                height            : 75px;
                border-radius     : 3px;
                transition        : .6s;
                margin-bottom     : 15px;

                background-color : var(--site_background_secondary);
                border-radius    : 3px;
                font-size        : 24px;
                color            : #a9b5b7;
                border-radius: 4px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 0 8px rgba(0, 0, 0, 0.03), 0 20px 30px rgba(0, 0, 0, 0.1);
                background: hsla(0, 0%, 100%, 0) linear-gradient(180deg, #f7faff, rgba(247, 250, 255, 0));
            }

            .text {
                font-weight : 900;
                font-size   : 25px;

                p {
                    font-weight : 300;
                }
            }

            &:hover {
                .ico {
                    background    : var(--site_hover_effect);
                    color         : #fff;
                    transition    : .6s;
                    border-radius : 50%;
                    animation     : gelatineBlob 1s ease-in forwards infinite;
                    transition    : all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                }
            }

        }
    }
}

@keyframes gelatineBlob {

    from,
    to {
        transform : scale(1, 1);
    }

    25% {
        transform : scale(0.9, 1.1);
    }

    50% {
        transform : scale(1.1, 0.9);
    }

    75% {
        transform : scale(0.95, 1.05);
    }
}


.product_section {
    position : relative;
    padding  : 80px 0;

}


.myportfolio_inc {}



.portfolio_main {

    .filter-menu {
        margin-bottom   : 20px;
        display         : flex;
        justify-content : center;
        display         : flex;
        justify-content : center;
        box-shadow      : 0 17px 19px -13px #352c2c;
        border-radius   : 50px;
        width           : fit-content;
        padding         : 0;
        margin          : 0 auto;
        margin-bottom   : 30px;

        li {

            display         : flex !important;
            align-items     : center;
            justify-content : center;
            height          : 50px;

            &:first-child {
                border-top-left-radius    : 50px;
                border-bottom-left-radius : 50px;
                padding-left              : 30px;

            }

            &:last-child {
                border-top-right-radius    : 50px;
                border-bottom-right-radius : 50px;
                padding-right              : 30px;
            }
        }
    }

    .filter-item {
        display    : flex;
        flex-wrap  : wrap;
        list-style : none;
        padding    : 0;
        margin     : 0;


    }

    .filter-menu li {
        display     : inline-block;
        padding     : 10px 18px;
        background  : linear-gradient(0deg, #c4c4c4 20%, #ffffff 60%);
        color       : #000000;
        cursor      : pointer;
        font-weight : bold;


    }

    .filter-menu li:hover,
    .filter-menu li.current {
        background : linear-gradient(-180deg, #191523 20%, #16345b 60%);
        color      : #fff;
    }



    .filter-item li {
        width    : 50%;
        padding  : 2px;
        float    : left;
        position : relative;
        overflow : hidden;

        .hover {
            position        : absolute;
            width           : 100%;
            height          : 100%;
            top             : 0;
            left            : 0;
            background      : linear-gradient(180deg, var(--site_hover_effect) 2.64%, var(--site_hover_effect) 14%, transparent 200%);
            display         : flex;
            align-items     : center;
            justify-content : center;
            opacity         : 0;
            color           : #fff;
            display         : flex;
            align-items     : center;
            justify-content : center;
            flex-direction  : column;

            .info {
                background    : linear-gradient(0deg, #c4c4c4 20%, #ffffff 60%);
                color         : #000;
                padding       : 4px 8px;
                border-radius : 50px !important;
                margin-top    : 10px;
                font-size     : 12px;
                font-weight   : bold;

                p {
                    padding       : 0;
                    margin-bottom : 0;
                }
            }
        }

        &:hover {
            .hover {
                opacity    : 1;
                z-index    : 999;
                transition : 0.2s;
            }

        }
    }

    .filter-item li.active {
        width      : 50%;
        padding    : 2px;
        transition : all 0.5s ease;
    }

    .filter-item li.delete {
        width      : 0%;
        padding    : 0;
        transition : all 0.5s ease;
    }

    .filter-item img {
        display : block;
        width   : 100%;
        height  : 100%;
    }

    @media screen and (min-width: 768px) {

        .filter-item li.active,
        .filter-item li {
            width : 33.33%;
        }

    }

    @media screen and (min-width: 1280px) {

        .filter-item li.active,
        .filter-item li {
            width : 33.33%;
        }

    }



}

.store_main {
    .filter-menu {
        all: unset;
        li {
            all: unset;
            &:first-child {
                border-radius: 0;
                padding-left: 10px;
            }
            &:last-child {
                border-radius: 0;
            }
        }

    }
        
        .filter-menu-horizontal {
            list-style: none;
            padding: 0;
            margin: 0;
    
            li {
                cursor: pointer;
                font-weight: bold;
                font-size: 12px;
                padding: 15px 10px ;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 0 8px rgba(0, 0, 0, 0.03), 0 20px 30px rgba(0, 0, 0, 0.1);
                background: hsla(0, 0%, 100%, 0) linear-gradient(180deg, #f7faff, rgba(247, 250, 255, 0));
                display: flex!important;
                align-items: center;
                i {
                    font-size: 20px;
                    margin-right: 10px;
                }
            }
        }
    }

.parvus-zoom {
    height : 100%;
}

.post-slide {
    margin               : 20px 20px 20px;
    //  box-shadow      : 0px 14px 22px -9px #bbcbd8;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor        : pointer;
    display       : flex;
    background    : #bbcbd8;
    width         : 8px;
    height        : 8px;
    padding       : 0;
    border-radius : 50%;
    margin        : 5px;
}

.owl-controls .owl-page.active {
    background : #000;
}

.owl-pagination {
    justify-content : center;
    align-items     : center;
    display         : flex;
}

.owl-controls .owl-buttons .owl-next,
.owl-controls .owl-buttons .owl-prev {
    top : 40% !important;
}

.post-slide:hover .post-img img {
    transform : scale(1.1, 1.1);
}

.post-slide .over-layer {
    width      : 100%;
    height     : 100%;
    position   : absolute;
    top        : 0;
    left       : 0;
    opacity    : 0;
    background : linear-gradient(-45deg, rgba(6, 190, 244, 0.75) 0%, rgba(45, 112, 253, 0.6) 100%);
    transition : all 0.50s linear;
}





.owl-controls .owl-buttons {
    text-align : center;
    margin-top : 20px;
}

.owl-controls .owl-buttons .owl-prev {
    background      : #fff;
    position        : absolute;
    left            : -55px;
    border-radius   : 50px;
    box-shadow      : 3px 14px 25px -10px #92b4d0;
    transition      : background 0.5s ease 0s;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 50px;
    width           : 50px;
}

.owl-controls .owl-buttons .owl-next {
    background      : #fff;
    position        : absolute;
    right           : -55px;
    border-radius   : 50px;
    box-shadow      : -3px 14px 25px -10px #92b4d0;
    transition      : background 0.5s ease 0s;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 50px;
    width           : 50px;
}

.owl-controls .owl-buttons .owl-prev:after,
.owl-controls .owl-buttons .owl-next:after {
    content     : "\f104";
    font-family : FontAwesome;
    color       : #333;
    font-size   : 30px;
}

.owl-controls .owl-buttons .owl-next:after {
    content : "\f105";
}


.skills_section {
    margin : 75px 0;

    .skills_container {
        display               : flex;
        justify-content       : space-between;
        align-items           : center;
        flex-wrap             : wrap;
        row-gap               : 0.5rem;
        grid-template-columns : repeat(3, minmax(0, 1fr));

        .skills_item {
            display         : flex;
            align-items     : center;
            justify-content : space-between;
            width           : 30%;
            margin-bottom   : 20px;

            .left {
                display : flex;
                gap     : 1rem;

                .ico {
                    img {
                        fill : black;
                    }
                }

                .text {
                    .text1 {
                        font-weight : bolder;
                    }

                    .text2 {}
                }
            }

            .rating {
                unicode-bidi : bidi-override;
                direction    : rtl;
                font-size    : 25px;
                color        : #000;
            }

            .rating>span:hover:before,
            .rating>span:hover~span:before {
                content  : "\2605";
                position : absolute;
            }

            .right {
                .rating>span.active:before {
                    content  : "\2605";
                    position : absolute;
                }
            }
        }
    }
}

.myproduct_packets_section {
    position : relative;
    padding  : 80px 0;

    .myworks_container {
        .item {
            background      : #fff;
            text-decoration : none;
            display         : flex;
            flex-direction  : column;
            position        : relative;
            color           : var(--infobox_background2);
            border-radius   : 10px;
            transition      : .6s;
            cursor          : pointer;
            user-select     : none;
            background      : linear-gradient(58deg, rgba(255, 255, 255, 1) 0%, rgba(238, 246, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);

            &:hover {
                //     box-shadow   : 0 17px 19px -13px #d2cfcf;
                transition : .2s;

                .item_image {

                    img {
                        transform  : scale(1.2);
                        transition : .2s;
                    }

                    .info_overlay {
                        opacity    : 1;
                        z-index    : 999;
                        transition : .2s;
                    }
                }
            }

            .item_image {
                position : relative;
                width    : 100%;
                height   : auto;
                overflow : hidden;
                display  : none;

                img {
                    transition : .2s;

                }

                .info_overlay {
                    opacity    : 0;
                    position   : absolute;
                    width      : 100%;
                    height     : 100%;
                    top        : 0;
                    left       : 0;
                    background : linear-gradient(180deg, var(--site_hover_effect) 2.64%, var(--site_hover_effect) 14%, transparent 200%);
                }
            }

            .item_title {
                padding         : 10px;
                font-weight     : 600;
                display         : flex;
                align-items     : center;
                text-align      : center;
                justify-content : center;
                margin-top      : 20px;
                font-size       : 25px;
                flex-direction  : column;

                p {
                    font-size : 20px;
                }
            }

            .item_bottom {
                .package_features {
                    .list {
                        padding    : 0 15px;
                        list-style : none;
                        color      : var(--passive_color);
                        margin     : 0;

                        li {
                            margin       : 25px 0;
                            font-size    : 14px;
                            display      : flex;
                            align-items  : center;
                            padding-left : 50px;
                            position     : relative;

                            strong {
                                margin-right : 5px;
                            }

                            .ico {
                                margin-right : 10px;

                                .success {
                                    fill : #00b090;
                                }
                            }
                        }

                        .success {
                            &:before {

                                content               : '';
                                position              : absolute;
                                width                 : 30px;
                                height                : 30px;
                                left                  : 13px;
                                border-radius         : 50%;
                                content               : '';
                                background            : #00b090;
                                position              : absolute !important;
                                width                 : 30px !important;
                                height                : 30px !important;
                                left                  : 13px !important;
                                border-radius         : 50% !important;
                                -webkit-mask-repeat   : no-repeat !important;
                                -webkit-mask-size     : 20px 50px !important;
                                -webkit-mask-position : center center !important;
                                mask-repeat           : no-repeat !important;
                                mask-size             : 20px 50px !important;
                                mask-position         : center center !important;

                                content      : '';
                                mask         : url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeiIvPjwvc3ZnPg==');
                                -webkit-mask : url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeiIvPjwvc3ZnPg==');


                            }
                        }
                    }

                    .price_info {
                        display         : flex;
                        align-items     : center;
                        justify-content : center;
                        padding         : 20px 0;
                        color           : var(--main_text);

                        .symbol {
                            margin-right : 5px;
                            font-size    : 25px;
                        }

                        .price {
                            font-size   : 40px;
                            font-weight : 900;
                        }

                        .time {
                            margin-left : 5px;
                        }
                    }

                    .btn-row {
                        margin-top      : 0;
                        margin          : 15px 0;
                        display         : flex;
                        align-items     : center;
                        justify-content : center;
                        margin-bottom   : 60px;

                        a {
                            padding         : 10px;
                            width           : 70%;
                            border-radius   : 50px;
                            height          : 60px;
                            display         : flex;
                            align-items     : center;
                            justify-content : center;

                        }

                        .btn-main {
                            background-image : linear-gradient(to right, #5da0ff 0%, var(--blue_color) 51%, #3a7bd5 100%);
                            margin           : 10px;
                            padding          : 15px 45px;
                            text-align       : center;
                            text-transform   : uppercase;
                            transition       : 0.5s;
                            background-size  : 200% auto;
                            color            : white !important;
                            box-shadow       : 0 0 20px #eee;
                            display          : flex;
                            align-items      : center;
                            box-shadow       : 0 17px 19px -13px #5da0ff;
                        }

                        .btn-main:hover {
                            background-position : right center;
                            /* change the direction of the change here */
                            color               : #fff;
                            text-decoration     : none;
                        }

                        .ico {
                            margin-left : 10px;

                            svg {
                                width : 30px;
                                fill  : #fff;
                            }
                        }

                    }
                }
            }
        }
    }

}

.myworks_section {
    position : relative;
    padding  : 80px 0;

    .myworks_container {
        .item {
            color                : var(--main_text);
            background           : #fff;
            text-decoration      : none;
            display              : flex;
            flex-direction       : column;
            position             : relative;
            //box-shadow        : 0 17px 19px -13px #d2cfcf;

            &:hover {
                .item_image {

                    img {
                        transform  : scale(1.2);
                        transition : .2s;
                    }

                    .info_overlay {
                        opacity    : 1;
                        z-index    : 999;
                        transition : .2s;
                    }
                }
            }

            .item_image {
                position : relative;
                width    : 100%;
                height   : auto;
                overflow : hidden;

                img {
                    transition : .2s;
                    width      : 100%;
                }

                .info_overlay {
                    opacity    : 0;
                    position   : absolute;
                    width      : 100%;
                    height     : 100%;
                    top        : 0;
                    left       : 0;
                    background : linear-gradient(180deg, var(--site_hover_effect) 2.64%, var(--site_hover_effect) 14%, transparent 200%);
                }
            }

            .item_title {
                padding         : 25px;
                font-weight     : 600;
                height          : 100px;
                display         : flex;
                justify-content : center;
                align-items     : center;
                text-align      : center;
                flex-direction  : column;

                .item_bottom {
                    a {
                        text-decoration : none;
                        font-size       : 12px;
                    }
                }
            }

        }
    }

}

.referances_section {
    .referances-list {
        list-style      : none;
        display         : flex;
        align-items     : center;
        padding         : 0;
        margin          : 0;
        flex-wrap       : wrap;
        justify-content : center;

        li {
            margin     : 5px;
            transition : .6s;
            width      : 13%;
            opacity    : .3;

            &:hover {
                opacity : 1;

                img {
                    filter     : grayscale(0);
                    transition : .6s;
                }
            }

            img {
                filter     : grayscale(1);
                transition : .6s;
            }
        }
    }
}

.contact_container {
    .contact_box_items {
        display         : flex;
        justify-content : space-between;
        align-items     : center;
        flex-wrap       : wrap;
        margin          : 75px 0;

        .item {
            width            : 32%;
            background-color : #fff;
            border-radius    : 3px;
            padding          : 30px;
            margin-bottom    : 30px;
            display          : flex;
            justify-content  : center;
            flex-direction   : column;

            .ico {
                display          : flex;
                align-items      : center;
                justify-content  : center;
                top              : 73px;
                width            : 50px;
                height           : 50px;
                background-color : #EEF6FF;
                border-radius    : 3px;
                font-size        : 24px;
                color            : #a9b5b7;
            }

            span {
                padding     : 30px 0 6px 0;
                font-size   : 14px;
                line-height : 17px;
                font-weight : 400;
                color       : var(--passive_color);
            }

            .text {
                font-size       : 26px;
                color           : #000;
                font-weight     : 900;
                text-decoration : none;
            }
        }
    }

    .contact-left-image {
        transform:
            perspective(750px) translate3d(0px, 0px, -250px) rotateX(27deg) scale(0.9, 0.9);
        border-radius : 20px;
        border        : 5px solid #e6e6e6;
        box-shadow    : 0 70px 40px -20px rgba(0, 0, 0, 0.2);
        transition    : 0.4s ease-in-out transform;
        background    : hsla(0, 0%, 100%, 0) linear-gradient(180deg, #f7faff, rgba(247, 250, 255, 0));

        &:hover {
            transform : translate3d(0px, 0px, -250px);
        }

        /*
    transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  filter: blur(2px);
  opacity: 0.5;
  transition: 0.6s ease all;

  &:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
    filter: blur(0);
    opacity: 1;
  }

*/
        /*
        transform:
    perspective(750px)
    translate3d(0px, 0px, -250px)
    rotateX(27deg)
    scale(0.9, 0.9);
  border-radius: 20px;
  border: 5px solid #e6e6e6;
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: translate3d(0px, 0px, -250px);
  }
    */


        /*
        transform:
        rotateX(51deg)
        rotateZ(43deg);
      transform-style: preserve-3d;
      border-radius: 32px;
      box-shadow:
        1px 1px 0 1px #f9f9fb,
        -1px 0 28px 0 rgba(34, 33, 81, 0.01),
        28px 28px 28px 0 rgba(34, 33, 81, 0.25);
      transition:
        .4s ease-in-out transform,
        .4s ease-in-out box-shadow;
    
      &:hover {
        transform:
          translate3d(0px, -16px, 0px)
          rotateX(51deg)
          rotateZ(43deg);
        box-shadow:
          1px 1px 0 1px #f9f9fb,
          -1px 0 28px 0 rgba(34, 33, 81, 0.01),
          54px 54px 28px -10px rgba(34, 33, 81, 0.15);
      }
     */
    }

    .contact_form {
        display         : flex;
        align-items     : center;
        justify-content : center;
        position        : relative;
        height          : 100%;

        form {
            width : 100%;
        }

        .form-group {
            position      : relative;
            margin-bottom : 30px;

            .ico {
                position        : absolute;
                right           : 0;
                top             : 0;
                height          : 70px;
                width           : 70px;
                display         : flex;
                align-items     : center;
                justify-content : center;
            }

            .form-control {
                font-size     : 15px;
                line-height   : 15px;
                width         : 100%;
                font-size     : 14px;
                line-height   : 70px;
                padding       : 0 0 0 26px;
                border        : none;
                border-radius : 3px;
                height        : 70px;
                position      : relative;



                &::placeholder {
                    color : var(--passive_color);
                }

                &:focus {
                    outline    : none;
                    box-shadow : none;
                }
            }

            textarea {
                font-size     : 14px;
                line-height   : 15px;
                width         : 100%;
                color         : var(--main_text);
                min-height    : 185px;
                border        : none;
                padding       : 26px 0 0 25px;
                border-radius : 3px;
                height        : unset;
            }
        }

    }

    .btn {
        font-size        : 17px;
        line-height      : 17px;
        font-weight      : 600;
        color            : #fff;
        width            : 100%;
        border           : none;
        background-color : var(--blue_color);
        line-height      : 68px;
        border-radius    : 3px;
    }


}

.social_media_container {
    display         : flex;
    align-items     : center;
    list-style      : none;
    padding         : 0;
    margin          : 0;
    flex-wrap       : wrap;
    justify-content : space-between;

    li {
        margin : 5px;
        width  : 24%;

        a {
            -webkit-transition : all 0.3s;
            transition         : all 0.3s;
            display            : -webkit-box;
            display            : -ms-flexbox;
            display            : flex;
            -webkit-box-align  : center;
            -ms-flex-align     : center;
            align-items        : center;
            background-color   : #fff;
            border-radius      : 3px;
            padding            : 20px 25px;
            font-size          : 18px;
            font-weight        : 600;
            line-height        : 22px;
            color              : var(--main_text);
            text-decoration    : none;

            &:hover {
                background : var(--blue_color);
                color      : #fff;
                transition : .2s;
            }

            i {
                color        : var(--theme_color_1);
                font-size    : 20px;
                font-weight  : 400;
                margin-right : 15px;


            }
        }
    }
}

.page_title {
    font-weight           : 500;
    font-size             : 17px;
    line-height           : 21px;
    color                 : var(--text-color);
    z-index               : 1;
    position              : relative;
    height                : 130px;
    text-align            : center;
    position              : relative;
    display               : -webkit-box;
    display               : -ms-flexbox;
    display               : flex;
    -webkit-box-align     : center;
    -ms-flex-align        : center;
    align-items           : center;
    -webkit-box-pack      : center;
    -ms-flex-pack         : center;
    justify-content       : center;
    -webkit-box-orient    : vertical;
    -webkit-box-direction : normal;
    -ms-flex-direction    : column;
    flex-direction        : column;
    font-family           : 'Great Vibes', cursive;
    font-family           : 'Ms Madi', cursive;
    font-family           : 'Kaushan Script', cursive;
    font-size             : 50px;



}




.workwwbanner {
    padding         : 40px 20px;
    background      : var(--infobox_background1);
    border-radius   : 3px;
    margin          : 50px 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    background      : linear-gradient(25deg, #191523 67%, rgba(22, 52, 91, 1) 100%);

    h4,
    p {
        color : #fff;
    }

    h4 {
        margin-bottom : 20px;
    }

    p {
        margin-top : -10px;
    }

    a {
        color             : #FFF;
        ont-weight        : 600;
        font-size         : 13px;
        line-height       : 13px;
        background-color  : #2b62d8;
        display           : -webkit-inline-box;
        display           : -ms-inline-flexbox;
        display           : inline-flex;
        -webkit-box-pack  : center;
        -ms-flex-pack     : center;
        justify-content   : center;
        -webkit-box-align : center;
        -ms-flex-align    : center;
        align-items       : center;
        padding           : 16px 0;
        width             : 150px;
        border-radius     : 3px;
        font-weight       : bold;

        &:hover {
            color      : #fff;
            background : #181f35;
        }

    }
}


.avatar-section {
    position : relative;
    display  : flex;

    @media (orientation: landscape) {
        main {
            scale : 0.9
        }
    }

    @keyframes move {
        0% {
            transform : rotateY(-20deg) rotateX(-5deg);
        }

        25% {
            transform : rotateY(20deg) rotateX(-5deg);
        }

        50% {
            transform : rotateY(20deg) rotateX(5deg);
        }

        75% {
            transform : rotateY(-20deg) rotateX(5deg);
        }

        100% {
            transform : rotateY(-20deg) rotateX(-5deg);
        }
    }

    main {
        display            : flex;
        flex-direction     : column;
        align-items        : center;
        justify-content    : center;
        //      min-height: 100vh;
        perspective        : 1000px;
        width              : 100%;
    }

    #furiosa_poster {
        aspect-ratio  : 9/14;
        // background: center / cover no-repeat url('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources@master/furiosa/medias/furiosa_back.webp');
        background    : center / cover no-repeat url('/assets/images/bgcircle_yellow.png');

        width           : 100%;
        max-width       : 500px;
        height          : 500px;
        position        : relative;
        animation       : move 10s 0s infinite;
        transform-style : preserve-3d;
        border-radius   : 6vmin;
    }

    #furiosa_poster__header {
        position        : absolute;
        top             : 30%;
        left            : 0;
        width           : 100%;
        text-align      : center;
        display         : flex;
        justify-content : center;
        transform       : translateZ(10vmin);
        transform-style : preserve-3d;
    }

    #furiosa_poster__header__title {
        font-family         : 'Agency FB Black';
        font-size           : 22vmin;
        position            : absolute;
        margin              : 0;
        line-height         : 1em;
        white-space         : nowrap;
        // background-image: url('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources@master/furiosa/medias/rust.jpg');
        background-image    : url('/assets/images/loader.png');
        filter              : drop-shadow(5px 10px 10px #00000090);

        background-size         : cover;
        background-position     : center;
        -webkit-text-fill-color : transparent;
        -webkit-background-clip : text;
    }

    #furiosa_poster__header__title::before {
        //  content: attr(data-title);
        position                : absolute;
        color                   : #ffc61c5e;
        -webkit-text-fill-color : initial;
        mix-blend-mode          : overlay;
        opacity                 : 1;
        text-shadow             : 0px 0px 4vmin rgba(0, 0, 0, 0.4), 1px 1px #bf4528;
    }

    #furiosa_poster__front_image {
        position        : absolute;
        bottom          : 0;
        left            : 0;
        width           : 100%;
        height          : auto;
        transform       : translateZ(20vmin);
        transform-style : preserve-3d;
        filter          : drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.4));
        border-radius   : 6vmin;

    }

    #furiosa_poster__anya {
        font-family     : 'Agency FB Black';
        font-size       : 2.6vmin;
        letter-spacing  : 0.1em;
        text-transform  : uppercase;
        color           : #00100b;
        text-shadow     : 0px 0px 3vmin rgba(0, 0, 0, 0.7);
        position        : absolute;
        top             : 5%;
        left            : 6%;
        transform       : translateZ(5vmin);
        transform-style : preserve-3d;
        margin          : 0;
    }

    #furiosa_poster__chris {
        font-family     : 'Agency FB Black';
        font-size       : 2.6vmin;
        letter-spacing  : 0.1em;
        text-transform  : uppercase;
        color           : #00100b;
        text-shadow     : 0px 0px 3vmin rgba(0, 0, 0, 0.7);
        position        : absolute;
        top             : 5%;
        right           : 6%;
        transform       : translateZ(5vmin);
        transform-style : preserve-3d;
        margin          : 0;
    }

    #furiosa_poster__george {
        font-family     : 'Agency FB Regular';
        font-size       : 1.6vmin;
        text-transform  : uppercase;
        text-align      : center;
        color           : white;
        letter-spacing  : 0.4em;
        width           : 100%;
        position        : absolute;
        top             : 26%;
        left            : 0%;
        transform       : translateZ(5vmin);
        transform-style : preserve-3d;
        margin          : 0;
    }

    #furiosa_poster__george strong {
        font-family : 'Agency FB Black';
    }

    #furiosa_poster__mad_max_saga {
        display                    : flex;
        justify-content            : space-between;
        font-family                : 'Agency FB Black';
        font-size                  : 5vmin;
        line-height                : 1em;
        text-align                 : center;
        white-space                : nowrap;
        letter-spacing             : 0.2em;
        text-transform             : uppercase;
        position                   : absolute;
        top                        : 48%;
        left                       : 0%;
        width                      : 100%;
        margin                     : 0;
        transform                  : translateZ(10vmin);
        /* transform-style         : preserve-3d; */
        /* text-shadow             : 0px 0px 4vmin rgba(0,0,0,0.4); */
    }

    #furiosa_poster__mad_max_saga>span {
        display                 : flex;
        background-image        : url('/assets/images/yel');
        background-size         : cover;
        background-position     : center;
        -webkit-text-fill-color : transparent;
        -webkit-background-clip : text;
    }

    #furiosa_poster__mad_max_saga>span::before {
        //  content: attr(data-title);
        position                : absolute;
        color                   : #ffc61c5e;
        -webkit-text-fill-color : initial;
        mix-blend-mode          : overlay;
        opacity                 : 1;
        text-shadow             : 0px 0px 4vmin rgba(0, 0, 0, 0.4), 1px 1px #bf4528;
    }


    * {
        user-select : none;
    }

    .shape {
        width    : 75PX;
        position : absolute;
        filter   : drop-shadow(5px 10px 10px #00000090);
        z-index  : 99999999;
    }

    .shape1 {
        top               : 50px;
        left              : 20%;
        -webkit-animation : action 1s infinite alternate;
        animation         : action 1s infinite alternate;
    }

    .shape2 {
        top               : 30%;
        right             : 50px;
        -webkit-animation : action2 1.6s infinite alternate;
        animation         : action2 1.6s infinite alternate;
    }

    .shape3 {
        bottom            : 50px;
        left              : 50px;
        -webkit-animation : action3 1.5s infinite alternate;
        animation         : action3 1.5s infinite alternate;
    }

    .shape4 {
        top               : 30%;
        left              : 10%;
        -webkit-animation : action4 1.5s infinite alternate;
        animation         : action4 1.5s infinite alternate;
    }

    .shape5 {
        bottom            : 15%;
        left              : 70%;
        -webkit-animation : action4 1.8s infinite alternate;
        animation         : action4 2.2s infinite alternate;
        z-index           : 999;

    }

    .shape6 {
        top               : 10%;
        left              : 45%;
        -webkit-animation : action4 1.2s infinite alternate;
        animation         : action4 1.2s infinite alternate;
        z-index           : 999;
    }

    .shape7 {
        bottom            : 35%;
        right             : 0%;
        -webkit-animation : action4 1.8s infinite alternate;
        animation         : action4 2.5s infinite alternate;
        z-index           : 999;

    }


    @-webkit-keyframes action {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-10px);
        }
    }

    @keyframes action {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-10px);
        }
    }

    @-webkit-keyframes action2 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-20px);
        }
    }

    @keyframes action2 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-25px);
        }
    }




    @-webkit-keyframes action3 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-15px);
        }
    }

    @keyframes action3 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-10px);
        }
    }

    @-webkit-keyframes action4 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-5px);
        }
    }

    @keyframes action4 {
        0% {
            transform : translateY(0);
        }

        100% {
            transform : translateY(-30px);
        }
    }



    .svg_animation {
        position : absolute;
        width    : 120%;
        height   : 130%;
        z-index  : -1;
        top      : -140px;
        left     : -10%;
        opacity  : .1;
    }

}

.footer {
    margin-top     : 75px;
    padding-bottom : 20px;
    background     : #fff;
    padding-top    : 50px;


    .footer_container {
        display         : flex;
        align-items     : center;
        justify-content : center;
        flex-direction  : column;

        .copyright_text {
            font-size   : 12px;
            font-weight : bold;
        }

        .social_media_link {
            display         : flex;
            align-items     : center;
            justify-content : space-between;
            list-style      : none;
            padding         : 0;
            margin          : 0;
            margin-top      : 20px;

            li {
                width           : 40px;
                display         : flex;
                justify-content : center;
                align-items     : center;

                a {
                    font-size: 30px;
                    color: var(--sub_color);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50px;
                    height: 50px;
                    text-decoration: none;
                }
            }

        }
    }

}

::selection {
    color: #fff;
    background: #000;
  }

.navbar {
    padding : 0;
}

.title {
    position          : relative;
    margin-bottom     : 30px;
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    -webkit-box-pack  : justify;
    -ms-flex-pack     : justify;
    justify-content   : center;
    text-align        : center;
    width             : 100%;

    p {
        font-weight : 600;
        font-size   : 25px;
        line-height : 27px;
        color       : var(--main_text);
    }

    h4 {
        font-weight   : 400;
        font-size     : 14px;
        line-height   : 17px;
        color         : var(--passive_color);
        margin-bottom : 4px;
        margin-top    : -15px;
    }

    /*    &::before {
        content             : "";
        position            : absolute;
        left                : 5px;
        top                 : 30%;
        transform           : translate(-50%, -50%);
        width               : 10px;
        height              : 30px;
        background-color    : var(--title_background);
        -webkit-transform   : translate(-50%, -50%);
        -moz-transform      : translate(-50%, -50%);
        -ms-transform       : translate(-50%, -50%);
        -o-transform        : translate(-50%, -50%);
    }

*/
}

.sub_title {
    position          : relative;
    margin-bottom     : 25px;
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    -webkit-box-pack  : justify;
    -ms-flex-pack     : justify;
    justify-content   : center;
    text-align        : center;
    width             : 100%;

    p {
        font-weight : 600;
        font-size   : 18px;
        line-height : 27px;
        color       : var(--main_text);
    }

    h4 {
        font-weight   : 400;
        font-size     : 14px;
        line-height   : 17px;
        color         : var(--passive_color);
        margin-bottom : 4px;
        margin-top    : -15px;
    }

    /*    &::before {
        content             : "";
        position            : absolute;
        left                : 5px;
        top                 : 30%;
        transform           : translate(-50%, -50%);
        width               : 10px;
        height              : 30px;
        background-color    : var(--title_background);
        -webkit-transform   : translate(-50%, -50%);
        -moz-transform      : translate(-50%, -50%);
        -ms-transform       : translate(-50%, -50%);
        -o-transform        : translate(-50%, -50%);
    }

*/
}

.navbar-nav .nav-item {
    display     : flex !important;
    align-items : center;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right : 1rem;
    padding-left  : 1rem;
    font-weight   : bold;
    color         : #858585;

    &:hover {
        color : var(--blue_color);
    }
}

.loader {
    position        : fixed;
    z-index: 99999999999;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100vh;
    background      : #fff;
    display         : flex;
    justify-content : center;
    overflow        : hidden;
    align-items     : center;

    svg {
        width : 600px;

        path {
            fill : rgb(255, 255, 255);
        }
    }
}

.loader.hidden {
    animation           : fadeOut 1s;
    animation-fill-mode : forwards;
    z-index             : -1;
}

@keyframes fadeOut {
    100% {
        opacity                 : 0;
        visibility              : hidden;
        //        top          : -100vh;
    }
}

.loader {
    animation        : beat 0.8s infinite alternate;
    transform-origin : center;
}

/* Heart beat animation */
@keyframes beat {
    to {
        transform : scale(1.1);
    }
}


.mobile-menu-header {}


.typing-text-wrapper {
    width: max-content;
    display : flex;
}

.typing-text {
    //  width         : 9.7ch;
   
    width : 100%;
    animation     : typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space   : nowrap;
    overflow      : hidden;
    border-right  : 3px solid;
    font-family   : Poppins;
    font-size     : 2em;
    font-weight   : 500;
    margin-bottom : 10px;
    color         : #000;

}

@keyframes typing {
    from {
        width : 0
    }
}

@keyframes blink {
    50% {
        border-color : transparent
    }
}

.btn-darklight-switch {
    color     : #000;
    padding   : 0;
    font-size : 30px;
    display   : flex !important;

    &:active,
    &:focus {
        box-shadow : none;
        outline    : 0;
    }
}

#switch {
    visibility : unset;
}

#myBtn {
    position        : fixed;
    bottom          : -50px;
    right           : 50px;
    z-index         : 99;
    font-size       : 25px;
    border          : none;
    outline         : none;
    background      : linear-gradient(25deg, #000 67%, #2b62d8 100%);
    color           : white;
    cursor          : pointer;
    border-radius   : 4px;
    width           : 40px;
    height          : 40px;
    align-items     : center;
    justify-content : center;
    box-shadow      : 0 17px 19px -13px var(--infobox_background1);
    transition      : .2s;
}

#myBtn.scroll {
    bottom     : 50px;
    right      : 50px;
    display    : flex;
    transition : .2s;

}

//    background        : linear-gradient(25deg, var(--infobox_background1) 67%, #2b62d8 100%);


#myBtn:hover {
    background-color : #555;
}

.light-dark-mode {
    //   position: fixed;
    //  top     : 20px;
    //  right   : 20px;

    label {
        margin-bottom : 0;
    }
}



@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform : translate3d(0, -10%, 0);
        opacity           : 0;
        transform         : translate3d(0, -10%, 0)
    }

    to {
        -webkit-transform : translateZ(0);
        opacity           : 1;
        transform         : translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform : translate3d(0, -10%, 0);
        opacity           : 0;
        transform         : translate3d(0, -10%, 0)
    }

    to {
        -webkit-transform : translateZ(0);
        opacity           : 1;
        transform         : translateZ(0)
    }
}

.fadeInDown {
    -webkit-animation-name : fadeInDown;
    animation-name         : fadeInDown
}