/*
Theme Name: DJZ
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



 /*.tile_wrapper {
        width: 300px;
        height: 300px;
        position: relative;
        margin-top:200px;
        margin-left:200px;
        box-sizing: border-box;
    }*/
       

        .tile_wrapper {
            width:300px !important;
            height:300px !important;
            position: relative;
            margin:auto;
            box-sizing: border-box;
            cursor: pointer;
        }
        .tile_wrapper:hover{
            cursor: pointer !important
        }
       

        .case_grid .tile_wrapper {
            width:200px !important;
            height:200px !important;
            position: relative;
            margin:auto;
            box-sizing: border-box;
        }
         .case_grid .case_img_div{
            min-height:200px !important;
        }
        .case_grid .tile_div_outer,
        .case_grid .tile_div_inner{
            width:200px !important;
            min-height:200px !important;
            padding-left: 0% !important;
         }

   
        .tile_wrapper div{
            box-sizing: border-box;
        }
        /*.aroundtext>div{
                overflow: hidden;
        }*/
        .aroundtext{
            width: 100%;
            height:100%;
            position: absolute;
            top:0px;
        }
       /* .tile_wrapper .aroundtext {
            opacity: 0;
          
        }
        .tile_wrapper:hover .aroundtext {
            opacity: 1;
        }*/
        /*.tile_wrapper:hover {
            cursor: pointer;
            transition: all 0.5s ease;

            transform: scale(0.99);
      

        }*/
        .tile_wrapper .aroundtext p{

          /*  transform: translateX(22px);*/
          min-width: calc(100% - 22px);
          padding-left: 22px;

          -webkit-user-select: none; /* Safari */
            -ms-user-select: none; /* IE 10 and IE 11 */
            user-select: none; /* Standard syntax */
            pointer-events: none;
        }
        
        .tile_wrapper .aroundtext div{
            overflow: hidden;
        }
        .tile_wrapper .aroundtext>div:nth-child(1) p{
            display: block;
        }
        .tile_wrapper .aroundtext>div:nth-child(2) p{
            display: none;
        }
        .tile_wrapper .aroundtext>div:nth-child(3) p{
            display: block;
        }
        .tile_wrapper  .aroundtext>div:nth-child(4) p{
            display: none;
        }
        .tile_wrapper .aroundtext:nth-of-type(2){
            display: none;
        }
        @media (max-width:650px){
            .swiper-visible .swiper-slide-active .tile_wrapper .aroundtext:nth-of-type(2),
            .tile_wrapper:hover .aroundtext:nth-of-type(2){
                display: block;
            }
        }
        @media (min-width:651px){
            .swiper-visible .middle-slide .tile_wrapper .aroundtext:nth-of-type(2),
            .tile_wrapper:hover .aroundtext:nth-of-type(2){
                display: block;
            }
        }
       
        .aroundtext:nth-of-type(2){
            top: 0px;
            left: 0px;
            transform: rotate(180deg);
            transform-origin: center center;
          
        }
        .aroundtext>div:nth-child(1){
            position: absolute;
            /*border: 1px solid red;*/
            height:22px;
            width:calc(100% + 44px);
            left: -22px;
            top:-22px;
             clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
        }
        .aroundtext>div:nth-child(2){
            position: absolute;
           /*border: 1px solid blue;*/
            height:22px;
            width:calc(100% + 44px);
            top:-44px;
            left: calc(100%);
            transform: rotate(90deg);
            transform-origin: left bottom;
            clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
        }
        .aroundtext>div:nth-child(3){
            position: absolute;
           /* border: 1px solid green; */
            height:22px;
            width:calc(100% + 44px);
            bottom: 0px;
            left: calc(100% + 22px);
            transform: rotate(180deg);
            transform-origin: left bottom;
            clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); 
        }
        .aroundtext>div:nth-child(4){
            position: absolute;
            /*border: 1px solid orange;*/
            height:22px;
            width:calc(100% + 44px);
            bottom:-22px;
            left: 0;
            transform: rotate(-90deg);
            transform-origin: left bottom;
            clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
        }

        .tile_wrapper p{
          
            position: absolute;
            display: block;
            width: auto;
            margin:0;
            padding:0;
            font-family: Arial, sans-serif;
             font-size: 16px;
            color: #fff;
            white-space: nowrap; 
            /*border:1px dashed black;*/
            
            text-align: left;
            box-sizing: border-box;
        }
        :root {
              --aniduration: 35s;
            --delay-factor1: -0.25;
            --delay-factor2: -0.5;
            --delay-factor3: -0.75;

        }



        @media (max-width:650px){
                .swiper-visible .swiper-slide-active .tile_wrapper .aroundtext>div:nth-child(1) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(1) p{
                    /*padding-left:0px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor1));
                }
                .swiper-visible .swiper-slide-active .tile_wrapper .aroundtext>div:nth-child(2) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(2) p{
                /* padding-left:1200px ;
                    padding-right:300px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor2));
                
                }
                .swiper-visible .swiper-slide-active .tile_wrapper .aroundtext>div:nth-child(3) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(3) p{
                    /*padding-left:900px ;
                    padding-right:600px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor3));
                
                }
                .swiper-visible .swiper-slide-active .tile_wrapper .aroundtext>div:nth-child(4) p,
                .tile_wrapper:hover  .aroundtext>div:nth-child(4) p{
                    /*padding-left:600px ;
                    padding-right:900px ;*/
                
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                }
        }
        @media (min-width:651px){
                 .swiper-visible .middle-slide .tile_wrapper .aroundtext>div:nth-child(1) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(1) p{
                    /*padding-left:0px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor1));
                }
                .swiper-visible .middle-slide .tile_wrapper .aroundtext>div:nth-child(2) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(2) p{
                /* padding-left:1200px ;
                    padding-right:300px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor2));
                
                }
                .swiper-visible .middle-slide .tile_wrapper .aroundtext>div:nth-child(3) p,
                .tile_wrapper:hover .aroundtext>div:nth-child(3) p{
                    /*padding-left:900px ;
                    padding-right:600px ;*/
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                    animation-delay: calc(var(--aniduration) * var(--delay-factor3));
                
                }
                .swiper-visible .middle-slide .tile_wrapper .aroundtext>div:nth-child(4) p,
                .tile_wrapper:hover  .aroundtext>div:nth-child(4) p{
                    /*padding-left:600px ;
                    padding-right:900px ;*/
                
                    transform: translateX(-100%);
                    display: block;
                    animation: move var(--aniduration) linear infinite;
                }
        }
     
       


        @keyframes move{
            0% {  transform: translateX(-100%); }
            100% { transform: translateX(300%); }
        }


        .tile_title{
            display: none;
        }
        .cases_tile_container:after,
        .jobs_tile_container:after{
                content:"";
                position: absolute;
                background-image: var(--after-background);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              filter: blur(5px);
              opacity: 0.2;
        }


        .swiper-slide{
             transition-duration: 0.3s;
               transition-property: all;
        }
       @media (min-width:768px){
        
      
                .blog_swiper.swiper-wrapper .swiper-slide,
                .jobs_swiper.swiper-wrapper .swiper-slide,
                .case_swiper.swiper-wrapper .swiper-slide{
                    transform: scale(1);
                    transform-origin: center center;
                   
                }
                .blog_swiper .swiper-wrapper .swiper-slide:not(.middle-slide),
                .jobs_swiper .swiper-wrapper .swiper-slide:not(.middle-slide),
                .case_swiper .swiper-wrapper .swiper-slide:not(.middle-slide){
                    transform: scale(0.75);
                    transform-origin: center center;
                    filter: brightness(0.4);
                }
         }

         .all_tile_container{
            overflow: hidden;
         }



       


        .all_tile_container{
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }



        .skew_button .elementor-button{
            position: relative;
        }
        .skew_button .elementor-button::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            transform: skew(-15deg);
            background-color: rgb(0, 71, 151);
            border: 1px solid rgb(0, 71, 151);
           
        }
         .skew_button:hover .elementor-button::after {
             background: none !important;
         }
        .skew_button a{
            background: none !important;
            border:none !important;
        }
        .skew_button .elementor-widget-container{
            position: relative;
            z-index: 2;
        }
        .skew_button svg,  .skew_button path {
        transition-behavior: normal;
        transition-delay: 0s;
        transition-duration: 0.3s;
        transition-property: all;
        transition-timing-function: ease;
        }
         .skew_button:hover svg,  .skew_button:hover path {
            fill:rgb(0, 71, 151);
         }



         /*
cases
*/
.cases_h4_sidebar h4{
    display: inline-block;
    border-bottom: 5px solid #000;
    padding-bottom: 4px;
   /* font-weight: 700 !important;
    font-family: "ff-tisa-web-pro", "Noto Serif", serif !important;*/
}

/*
swiper bullets
*/
.case_swiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #00B3E3;
    background-color: transparent !important;
    opacity: 1 !important;
}
.case_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #00B3E3 !important;
}

.jobs_swiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #ffffff;
    background-color: transparent !important;
    opacity: 1 !important;
}
.jobs_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #5f329d !important;
}

.blog_swiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #ffffff;
    background-color: transparent !important;
    opacity: 1 !important;
}
.blog_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ffffff !important;
}