/* 
Theme Name: Glazer
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: glazer
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*/

body, img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
}

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
  
::-webkit-scrollbar-track {
background: #3F3F3F;
/*border-left:1px solid #ccc;*/
}
  
::-webkit-scrollbar-thumb {
background: #262626;
/*border:1px solid #eee;*/
height:100px;
/*border-radius:5px;*/
}
  
::-webkit-scrollbar-thumb:hover {
background: #D4D2C8;
}

header {
    backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.page-header .entry-title{display: none;}

/* reveal down */
.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;

}

.projects-hover:hover .projects-hover-img {
    opacity: 0.7;
}
.projects-hover .projects-hover-img {
    transition: all .3s ease-in-out;
}

.projects-hover:hover svg {
/*    transform: rotate(45deg);*/
}

/*hover wrap*/
.hover-wrap .hover-img{
    opacity: 0;
    transition: all .3s ease-in-out;
    
}

.hover-wrap:hover .hover-img{
    opacity: 1;
    transform: rotate(-5deg);
}

.hover-wrap{
transition: all .3s ease-in-out!important;
    padding: 0;
}

.hover-wrap:hover{
    padding-right: 20px;
}

.hover-icon polygon.cls-1 {
    fill: white;
}

/* folding button */
.folded li{
    list-style-type: none;
}

.folded li a {
  display: grid;
  height: 50px;
  grid-template-rows: 18px;
  align-items: center;
  font-size: 24px;
  line-height: 2.1;
  overflow: hidden;
   border: 1px solid white; 
  padding: 16px 24px;
  color:white!important;
  font-family: "Heebo", Sans-Serif;
  font-weight: 400;
  
}

.folded li a:link .menu-item {
  animation: .5s forwards move-down-initialmenu-noHover;
}
.folded li a:link .menu-item-active {
  animation: .5s forwards move-down-activemenu-noHover;
}
.folded li a:hover > .menu-item {
  animation: .5s forwards move-up-initialmenu-onHover;
}
.folded li a:hover > .menu-item-active {
  animation: .5s forwards move-up-activemenu-onHover;
}

.folded .menu-item-active {
  color: white;
}

li.dark.folded a {
    color: #1D1D1B !important;
    border: 1px solid #1D1D1B;
}
.folded.dark .menu-item-active {
  color: #1D1D1B;
}

@keyframes move-up-initialmenu-onHover {
  100% {
    transform: translateY(-100%);
  }
}
@keyframes move-up-activemenu-onHover {
  100% {
    transform: translateY(-70%);
  }
}
@keyframes move-down-initialmenu-noHover {
  0% {
    transform: translateY(-100%);
  }
}
@keyframes move-down-activemenu-noHover {
  0% {
    transform: translateY(-70%);
  }
}

/* shrinking header section */

.shrinker {
	background: transparent;
        height: 200px;
	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: 150px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

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

.elementor-nav-menu--layout-horizontal .elementor-nav-menu{
    justify-content: space-between;
    width: 100%;
}

.slide-nav nav > ul {
    justify-content: space-between;
}
.slide-nav nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li {
    position: relative;
    z-index: 1;
    flex-grow:0;
}
.slide-nav nav > ul > li::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
    background: #1D1D1B; /* Color of the line */
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1); /* Adjust the transition duration and timing function here , use website cubic-bezier.com for a fancy timing function */
    bottom:4px; /* Vertical positioning of the line*/
    opacity: 1 !important; /* !important is only needed for nav menu element , you can delete it for the others */
    left:0;
    z-index: -3;
    transform: scaleX(0);
    transform-origin:left;
}
.slide-nav nav > ul > li:hover::before {
    transform:scaleX(1);
    transform-origin:right; 
}
.slide-nav nav > ul.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu > li > a {
margin-inline-end:0px;
margin-inline-start:0px;
}
.slide-nav .elementor-nav-menu:after {
    content: none;
}

.slide-nav-v nav > ul {
display: flex;
flex-direction: column;
align-items: center;
}




/*
.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;
}
*/


.cta-box {
    transition: all .2s ease;
}
.cta-box:hover {
    background-color:#F5C0C2!important;
}

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

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

button.btn-content {
    border: none;
    font-family: "Heebo", serif;
    color: #1D1D1B;
    margin: auto;
        font-size: 2em;
}

button.btn-content:hover, button.btn-content:focus {
    background-color: transparent;
    color: #1D1D1B;
    outline: none;
}

button.btn-content::after{
    background:pink;
    content: "";
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    display: block;
    margin: 0px auto;
clip-path: polygon(50% 100%, 0 0, 100% 0);
    transition: all .3s ease-in-out;

}

button.btn-content.expanded::after{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}
.btn-content{
    transition: all .3s ease-in-out;
cursor: pointer;
}

.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;
}



.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%}
}



 /* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */

@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;
}




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

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

input:focus::placeholder {
    opacity: 1 !important;
}
.elementor-field-group .elementor-field-textual:focus{
    box-shadow: none!important;
}

    


/*DESKTOP ONLY*/
@media only screen and (min-width: 769px) {
    
    .shrinking-logo img {
	width: 200px!important;
}

.shrinker.elementor-sticky--effects img {
	width: 130px!important;
}
    figure.elementor-image-box-img img {
}
.elementor-widget-image-box .elementor-image-box-content {
    width: 700px!important;
}
    
}

TABLET ONLY*/
@media (max-width: 1024px) and (min-width: 768px) {
    .hover-wrap:hover{
    padding-right: 20px;
}
}

@media screen and (max-width: 600px) {
        #bthn{
    display: none!important;
    }
    .hover-wrap:hover .hover-img{
    opacity: 0;

}


/* 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) {
    
}
/*****************************************************************************/