/* 
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*/
/*main#content,*/ .revealer{
    animation: squared 2s ease backwards;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@keyframes squared{
    0%{clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
    80%{clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
}
    100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}
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(./brnd/arrowhead.svg), auto;
}
a,[type=submit]:not(:disabled), button:not(:disabled){
    cursor: url(./brnd/hand-pointer.svg), auto!important;
}
#footer, #ctn, .darker, .darker img{
    cursor: url(./brnd/arrowheadw.svg), auto;
}
#footer a, #footer[type=submit]:not(:disabled), #footer button:not(:disabled), #ctn button, .darker a{
    cursor: url(./brnd/hand-pointerw.svg), auto!important;
}
.footer-p-hover p{
    transform: translateX(0px);
    transition: all .5s ease!important;
}
.footer-p-hover p:hover{
        transform: translateX(-10px)!important;
}

.page-header{
    display: none;
}

/* Header starts transparent */
.page-id-7 #show-hide-header{background: transparent !important;}
#show-hide-header{
  background: #fff !important;
  transition: background-color .3s ease, box-shadow .3s ease, top .8s ease-in-out;
transform: translateY(0);
}

/* After scrolling, make it white */
#show-hide-header.is-scrolled{
  background: #fff !important;
  /* optional: add a subtle shadow */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.blurry {
    backdrop-filter: blur(5px);
}

.bf-btn:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 0;
    top: 0px;
    transform: translateY(80px) scale(1);
    transition: all .5s ease;
    border-radius: 100%;
    pointer-events: none;
}
    .bf-btn:hover::before, .bf-btn:focus::before, .bf-btn:focus-visible::before {
        transform: translateY(0px) scale(2);

    }
    .bf-btn:hover a span, .bf-btn:focus a span {
        z-index: 9;
        color:#25292E;
    }
    .bf-btn a span {transition: all .3s ease;}
    .bf-btn{overflow:hidden;border-radius:50px; }
        .bf-btn.light:before{background:#25292E;}
        
        .bf-btn.light:hover a span, .bf-btn.light:focus a span {color:#fff;}
        


#my-sticky-button{
    position: fixed;
    bottom: 20px;
    left: 0;
    opacity: 0;
    z-index: 999999;
    background: #ffffff10;
    backdrop-filter:blur(20px);
    border: solid white;
    border-radius: 0 50px 50px 0;
    color: white;
    border-width: 1px 1px 1px 0;
    mix-blend-mode: difference;
    animation: fadeLeft 1s ease forwards;
    animation-delay: 2s;
}
        #my-sticky-button:hover{
            background: #ffffff20;
        }
        

/* === BRND Main Gallery (100vh) === */
.brnd-main-gallery{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.brnd-main-gallery .swiper-slide:before{
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, white, transparent);
    z-index: 1;
    opacity: .4;
}

.brnd-main-gallery_swiper{
  width:100%;
  height:100%;
}

.brnd-main-gallery .swiper-slide{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.brnd-main-gallery_bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  transform:scale(1);
  will-change:transform;
}

/* Base state: all slides already slightly zoomed */
.brnd-main-gallery_bg {
  transform: scale(1.08);
  transition: transform 8s ease-in-out;
  will-change: transform;
}

/* Active slide gently zooms further */
.brnd-main-gallery .swiper-slide.is-kenburns .brnd-main-gallery_bg {
  transform: scale(1.18);
}


/* Content container: center-right */
.brnd-main-gallery_content{
  position:absolute;
  top:50%;
  right:10vw;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  max-width:min(520px, 90vw);
}

.brnd-main-gallery_logo{
  max-width:min(340px, 70vw);
  height:auto;
  display:block;
}

.brnd-main-gallery_actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Button hover fill effect */
.brnd-main-gallery_btn{
  position:relative;
  overflow:hidden;
  border-radius:50px;
  border: 1px solid #fff;
  padding: 15px 50px;
    backdrop-filter: blur(10px);
}
.brnd-main-gallery_btn::before{
  content:"";
  background:#fff;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  transform: translateY(80px) scale(1);
  transition: transform .5s ease;
  border-radius:100%;
}
.brnd-main-gallery_btn:hover::before{
  transform: translateY(0) scale(2);
}
.brnd-main-gallery_btn > span{
  position:relative;
  z-index:2;
  transition: color .3s ease;
  color: #fff;
  font-size: 18px;
  font-family: "Heebo", Sans-Serif;
}
.brnd-main-gallery_btn:hover > span{
  color:#000;
}

/* Optional: pagination/nav scoped */
.brnd-main-gallery_pagination{
  position: absolute !important;;
  left: 20px !important;;
  bottom: 40px !important;;
  z-index:5;
}

.brnd-main-gallery_pagination .swiper-pagination-bullet{
    background: white;
}

.brnd-main-gallery_nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  cursor:pointer;
}
.brnd-main-gallery_nav--prev{ left:20px; }
.brnd-main-gallery_nav--next{ right:20px; }

.brnd-main-gallery_nav:before{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:12px;
  height:12px;
  border-top:2px solid rgba(255,255,255,.9);
  border-right:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg);
}
.brnd-main-gallery_nav--prev:before{ transform:rotate(225deg); }

.swiper-slide:nth-child(even) .brnd-main-gallery_bg {
  transform-origin: 40% 60%;
}
.swiper-slide:nth-child(odd) .brnd-main-gallery_bg {
  transform-origin: 60% 40%;
}


@media (max-width: 767px){
  .brnd-main-gallery_content{
    right:5vw;
    left:5vw;
    align-items:center;
    text-align:center;
  }
  .brnd-main-gallery_actions{ justify-content:center; }
}



@keyframes rotator{
    0%{
        transform: rotate3d(0, 1, 0, 0deg);
    }
    5%{
        transform: rotate3d(0, 1, 0, 90deg);
    }
    10%,100%{
        transform: rotate3d(0, 1, 0, 0deg);
    }
}

#ctn button {
    min-height: 150px;
}

.menu-icon line {
  transition: all 0.4s ease;
}

.menupop:hover .menu-icon line:nth-child(1) {
  transform: translateY(8px);
}

.menupop:hover .menu-icon line:nth-child(2) {
  transform: scaleX(0.8);
}
.menupop:hover .menu-icon line:nth-child(3) {
  transform: translateY(-8px);
}

/* carousels*/

.full-carousel .swiper-slide img {
    height: 100vh;
/*    aspect-ratio: 4 / 3;*/
    object-fit:cover;
    width: 100%;
}

.center-carousel .swiper-slide img {
    height: 60vh;
/*    aspect-ratio: 4 / 3;*/
    object-fit:cover;
    width: 100%;
}

.center-carousel figcaption.elementor-image-carousel-caption{
/*    text-align: left;*/
/*            font-family: 'Outfit', sans-serif;*/
/*            font-size: 14px!important;*/
    font-style: normal!important;
            color: white;
            position: absolute;
            bottom: 0;
            background: #292929;
            width: 100%;
            min-height: 40px;
            padding: 10px 20px;
}

.center-carousel .swiper-slide.swiper-slide-active {
    transform-origin: left;
}

.center-carousel .swiper-slide.swiper-slide {
    transform-origin: left;
}
.center-carousel .swiper-slide .swiper-slide-next{
    width: 50%;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 100px;
    border-radius: 20px;
}
span.swiper-pagination-bullet{
    width: 50px;
    border-radius: 20px;
    transition: width .3s ease;
}
.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 > div > ul > li{
/*    position: relative!important;*/
    z-index: 1;
    flex-grow:0;
}
.slide-nav nav > ul > li::before, .slide-nav nav > div > ul > li > div::before {
    content:'';
    position:absolute;
    width: 100%;
    height:2px; /* How thick the line is */
/*    background: linear-gradient(270deg, #698996, #698996);  Color of the line */
    background: var(--n-menu-title-color-hover); /* 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, .slide-nav nav > div > ul > li > div: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;
}

.slide-nav div#e-n-menu-content-1983 {
    margin-block-start: 0;
}

/*Logo grid*/
.logo-grid .e-gallery-grid .e-gallery-image {
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-filter: brightness(0) invert(1);
       filter: brightness(0) invert(1);
}
.logo-grid .e-gallery-grid .e-gallery-image:hover {
    -webkit-filter: brightness(1) invert(0);
       filter: brightness(1) invert(0);
}
.logo-grid .elementor-gallery-item__overlay {
    appearance: none;
    display: none;
}


/*floaty buttons*/
              .floaty {
                  display: inline-block;
                  height: 60px;
                  line-height: 55px;
                  overflow: hidden;
                  /*position:relative;*/
                  text-align: center;
                  font-family: "Heebo", Sans-Serif;
                  background-color: transparent;
                  color: white;
/*                  border-radius: 100px;*/
                  transition: 0.4s;
                  border: 1px solid white;
                  padding: 0px 40px;
                  font-size: 18px;
                  font-weight: 400;
              }

              .floaty:hover {
                  color: #131211;
                  background: #fff;
                  border-color: #131211;


              }

              .floaty svg {}

              /* BUTTON UP */
              .label-up {
                  display: flex;
                  /*margin:0px 30px;*/
                  height: 100%;
                  position: relative;
                  top: 0%;
                  transition: 0.4s;
                  align-items: center;
                  gap: 20px;
              }

              .floaty:hover .label-up {
                  top: -100%;
              }

              .floaty2 {
                  color: #131211 !important;
                  border-color: black;
              }

              .floaty2 svg path {
                  stroke: black;
              }

              .floaty2:hover,
              .floaty2:hover svg path {
                  stroke: white !important;
                  color: white !important;
                  background: #131211;
              }

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



.grad-text{
/*    background: rgb(255,206,106);*/
    background: -moz-linear-gradient(270deg, rgb(160, 123, 71) 0%, rgb(243, 228, 186) 100%);
    background: -webkit-linear-gradient(270deg, rgb(160, 123, 71) 0%, rgb(243, 228, 186) 100%);
    background: linear-gradient(270deg, rgb(160, 123, 71) 0%, rgb(243, 228, 186) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a07b47",endColorstr="#f3e4ba",GradientType=1);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-main {
    background: linear-gradient(270deg, #bfdcd4, #f5c0c2);
    background-size: 400% 400%;

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

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



/*
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%}
}



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


/**************************** reveal effect **********************/
.reveal{
    --speed: 2s !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;

    }

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

    }


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

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


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

/************ Test Drive Form ****************/
    .models-picker{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .model-card{
      border:2px solid #e5e5e5 !important;
      border-radius:10px !important;
      padding:15px !important;
      text-align:center;
      cursor:pointer !important;
      background:#fff !important;
      color: black !important;

    }
    .model-image{
      width:100%;
      height:120px;
      object-fit:contain;
      display:block;
      margin:0 0 10px 0;
    }
    .model-image--empty{
      height:120px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#f5f5f5 !important;
      margin-bottom:10px !important;
    }
    .model-card.is-active{
      font-weight:bold !important;
      border-color: var(--e-global-color-accent) !important;
    }

    .model-card:hover, .model-card:focus{
        background: #eee!important;
        color: black !important;
        font-weight: bold;

    }
@media screen and (max-width:768px){
    .models-picker{
      grid-template-columns:repeat(2,1fr);
}
}



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

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

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

/*accordion apt*/
.ar11{
    aspect-ratio: 1 / 1;
}
.ar169{
    aspect-ratio: 16 / 9;
}

.num-divider{
    display: block;
    width: 1px;
    height: 0%;
    background: rgba(255, 255, 255, 0.4);
    animation: num-divider-grow 4s ease-in forwards;
}

@keyframes num-divider-grow{
    from{height:0%;}
    to{height:100%;}
}


/*hover items models*/
.hover-item, .hover-item-title, .hover-item-text{
    transition: all .8s ease-in-out!important;
    background-size: 110% !important;
}
.hover-item .elementor-widget-image {
    height: 100%;
}
.hover-item:hover{
    background-size: 140%!important;
}


.hover-item-text{
    opacity: 0;
    transform: translateY(50px);
    /*font-size:18px;*/
    /*display: none;*/
    max-height: 0;
    transition: all 2s ease;
    
}
.hover-item:hover .hover-item-text{
    opacity:1;
    max-height: 300px;
    transform: translateY(0px);
    /*display: block;*/
    
}
.hover-item-title{
    transform: translateY(20px);
}
.hover-item-title h2{
    font-size:2em;
}
.hover-item:hover .hover-item-title{
    transform: translateY(0px);
}



/************************** Responsive ************************************/

@media screen and (max-width:768px){
    .hover-item-title{
        transform: translateY(0px);
    }
    .hover-item-text{
        opacity: 1;
        transform: translateY(0px);
        max-height: fit-content;
    }
    .hover-item-title h2{
        font-size:1.3em;
    }
}




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

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

 
}

@media only screen and (max-width: 1440px) {
    #ctn button {
    min-height: 120px;
    }
}

/*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 screen and (max-width: 1024px) {
    .center-carousel .swiper-slide img {
        height: 40vh;
    }
    .num-divider{
        width: 100%;
        height: 1px;
    }
    .full-carousel .swiper-slide img {
    height: 40vh;
}
}
/*****************************************************************************/