/* 
Theme Name: Brnd
Theme URI: https://github.com/elementor/hello-theme/
Description: Israpol Theme
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: brnd
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
*/
/*FOR MOBILE HERE*/
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 8px;
}
  
::-webkit-scrollbar-track {
background: rgba(61, 62, 61, 1);
/*border-left:1px solid #ccc;*/
}
  
::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(180deg, rgba(24, 22, 23, 0) 5%, rgb(255, 255, 255) 100%);
background: -moz-linear-gradient(180deg, rgba(24, 22, 23, 0) 5%, rgb(255, 255, 255) 100%);
background: linear-gradient(180deg, rgba(24, 22, 23, 0) 5%, rgb(255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#181617", endColorstr="#FFEF00", GradientType=1);
/*border:1px solid #eee;*/
height:150px;
border-radius:5px;
}
  
::-webkit-scrollbar-thumb:hover {
background: white;
}

body, img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="0.75" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>') 12 12, auto;
}

.growline{
    /*width:0!important;*/
    animation: growLine .8s ease-in forwards;
    animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes growLine{
    0% {width:0;}
    100% {width:100%!important;}
}

.project-gallery__navigation [type=button]:focus, .project-gallery__navigation [type=button]:hover, .project-gallery__navigation [type=submit]:focus, .project-gallery__navigation [type=submit]:hover, .project-gallery__navigation button:focus, .project-gallery__navigation button:hover{
	background-color: transparent!important
}

/* shrinking header section */

.shrinker {
	background: transparent;
        height: (set your header height in pixels);
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

.shrinker.elementor-sticky--effects {
	background: #fff;
        height: (set your header height after shrinking in pixels)!important;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
	box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05);
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

/* shrinking logo image */

/*
.shrinking-logo img {
	width: 60px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

.shrinker.elementor-sticky--effects img {
	width: 30px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}
*/




/*
.elementor-31 .elementor-element.elementor-element-9d58c45 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before {
    background: linear-gradient(270deg, #bfdcd4, #f5c0c2);
}
.e--pointer-overline .elementor-item:before {
    top: 45px!important;
}
*/
.slide-button a::before{
    content: "";
    top: 0;
    position: absolute;
    right: 0;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateX(100%);
    transition: all .3s ease;
    
    }
    .slide-button{
    overflow: hidden;
    }
    .slide-button .elementor-button:focus{
        color: #fff !important;
    }
    .slide-button .elementor-button:hover{
        color: #3D3E3D!important;
    }
    .slide-button a:hover::before{
    transform: translateX(0%)!important;
    }
    
    .slide-button .elementor-button-text{z-index:1;}

    
.imgswitch {
position: relative;
display: inline-block;
}

    .imgswitch .hover-image {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .imgswitch:hover .hover-image {
        opacity: 1;
    }

.divider{
    width: 100%;
    height: 5px;
    
}

.grad{
/*    background: #197885;*/
background: -webkit-linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
background: linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#197885", endColorstr="#FFEF00", GradientType=1);
}
.grad-text{
/*    background: rgb(255,206,106);*/
/*    background: #197885;*/
background: -webkit-linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
background: linear-gradient(90deg, rgba(25, 120, 133, 1) 5%, rgba(255, 239, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#197885", endColorstr="#FFEF00", GradientType=1);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-animate {
    background: linear-gradient(900deg, #197885, #FFEF00);
    background-size: 400% 400%;

    -webkit-animation: grad 15s ease infinite;
    -moz-animation: grad 15s ease infinite;
    animation: grad 15s ease infinite;
}

@-webkit-keyframes grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.reveal{
    --speed: .5s !important;
    animation: none !important;
}
.reveal > *{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) !important;
    transition: all var(--speed) ease-in-out !important;
}
.reveal.animated > *{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important;

}

.reveal-up{
        --speed: 2s !important;
        animation: none !important;
    }
    .reveal-up > *{
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%) !important;
        transition: all var(--speed) ease-in-out !important;
    }
    .reveal-up.animated > *{
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0) !important;

    }

        .reveal-left{
            --speed: 2s !important;
            animation: none !important;
        }
        .reveal-left > *{
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) !important;
            transition: all var(--speed) ease-in-out !important;
        }
        .reveal-left.animated > *{
            clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%) !important;

        }



.content {
        overflow: hidden;
        transition: max-height 0.3s ease; /* Smooth transition */
        max-height: 0px; /* Set initial height */
    }

.expanded {
        max-height: 300px !important;
}

.img-hover:hover .img-hover-text{
    opacity: 1;
    min-height: 300px;
}

.img-hover .img-hover-text{
    min-height: 0;
    opacity:0;
    transition: all .3s ease-in-out;
}

/*
p {
    margin: 0!important;
}
*/

.soon:before, .soon:after{
    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 0%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 0%}
    100%{background-position:0% 50%}
}




@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}




/*
#elementor-popup-modal-40 .dialog-widget-content{
    opacity: .97;
}
.close-popup{cursor: pointer;
}
*/

.elementor-field-type-acceptance {
    order: 2;
}


.ctn-btn{
    border: 1px solid #121212;
    width: 200px;
    height: 200px;
    justify-content: center;
    display: flex;
    border-radius: 100%;
    font-family: 'Heebo', Sans-Serif;
    font-size: 18px
}
.ctn-btn span {
    margin: auto;
    color: #121212;
    transition: letter-spacing .3s ease-in-out;
}
.ctn-btn:hover span{
    letter-spacing: 4px;
}

.rotate {
  -webkit-animation: rotate 15s normal linear infinite;
  animation: rotate 15s normal linear infinite;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}



.elementor-image-box-wrapper:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 0%;
    background: #121212;
    bottom: 0;
    transition: width .8s ease;
}
.elementor-image-box-wrapper:hover:after {
width: 100%;
}

/*home projects carousel*/
.home_project_line:before{
content: "";
    width: 0px;
    height: 2px;
    position: absolute;
    display: block;
    top: 11px;
    right: -60px;
    background: black;
    transition: width .3s ease;
}

.home_project_wrap:hover .home_project_line:before{
width: 50px;
}


input#form-field-name:focus, input#form-field-phone:focus, input#form-field-email:focus {
    color: white;
    border-bottom: 1px solid white;
    }

input::placeholder {
    text-align: right;
    transition: opacity .3s ease;
}

input:focus::placeholder {
    opacity: 1 !important;
}




/*DESKTOP ONLY*/
@media only screen and (min-width: 769px) {

    .shrinking-logo img {
	width: 100px!important;
}

.shrinker.elementor-sticky--effects img {
	width: 50px!important;
}

    
}

TABLET ONLY*/
@media (max-width: 1024px) and (min-width: 768px) {

}


/* Media query for small screens (e.g., mobile) */
@media only screen and (min-width: 600px) {
    
}

/* Media query for medium screens (e.g., tablets) */
@media only screen and (min-width: 768px) {
    
}

/* Media query for large screens (e.g., desktops) */
@media only screen and (min-width: 1024px) {
    
}
/*****************************************************************************/