/* === IE Main Banner (Step 3) === */

/* Full width section (no side gaps even inside Elementor containers) */
.ie-main-banner{
width: 100%;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;

overflow: hidden;
}

/* Track holds slides (for Step 4 we will animate translateX/opacity) */
.ie-main-banner__track{
position: relative;
width: 100%;
}

/* Slide base */
.ie-main-banner__slide{
position: relative;
width: 100%;
min-height: 420px; /* desktop hero height */
display: grid;
grid-template-columns: 1.05fr 0.95fr; /* text / visual */
align-items: stretch;
overflow: hidden;
}

/* Background layers */
.ie-main-banner__bg{
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.02);
}

/* Desktop vs mobile bg visibility */
.ie-main-banner__bg--mobile{ display:none; }
.ie-main-banner__bg--desktop{ display:block; }

/* Overlay gradient under text (desktop: left->right) */
.ie-main-banner__slide::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%);
pointer-events:none;
z-index: 1;
}

/* Content */
.ie-main-banner__content{
position: relative;
z-index: 2;
grid-column: 1 / 2;
display: flex;
flex-direction: column;
justify-content: center;

padding: 64px 48px;
max-width: 680px;
}

/* Typography: keep your clean style */
.ie-main-banner__title{
margin: 0 0 12px 0;
font-size: 52px;
line-height: 1.06;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.6px;
}

.ie-main-banner__text{
margin: 0;
font-size: 18px;
line-height: 1.6;
font-weight: 400;
color: rgba(255,255,255,0.92);
max-width: 560px;
}

/* Button (desktop: under text, left aligned) */
.ie-main-banner__btn{
display: inline-flex;
align-items: center;
justify-content: center;

margin-top: 22px;
padding: 12px 18px;
border-radius: 10px; /* small, not the big rounding; if you want fully square: set 0 */
text-decoration: none;
border: 1px solid rgba(255,255,255,0.85); ;
background: none;
color: #ffffff;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.2px;

transition: transform .2s ease, filter .2s ease;
}

/* Force CTA to fit content (desktop + general) */
.ie-main-banner .ie-main-banner__btn{
display: inline-flex !important;
width: auto !important;
max-width: max-content;
white-space: nowrap;
align-self: flex-start;
}




.ie-main-banner__btn:hover{
transform: translateY(-2px);
filter: brightness(1.02);
color:#ffffff!important;
}

/* Tablet adjustments */
@media (max-width: 1024px){
.ie-main-banner__slide{
min-height: 480px;
grid-template-columns: 1fr;
}

.ie-main-banner__content{
padding: 56px 28px;
max-width: 720px;
}

.ie-main-banner__title{
font-size: 42px;
}
}

/* Mobile: top -> bottom layout, gradient top->bottom, center button */
@media (max-width: 767.98px){
.ie-main-banner__slide{
max-height: 550px;
min-height:350px;
height:320px;
grid-template-columns: 1fr;
}

/* show mobile bg if provided */
.ie-main-banner__bg--desktop{ display:none; }
.ie-main-banner__bg--mobile{ display:block; }

/* overlay becomes vertical gradient */
.ie-main-banner__slide::before{
background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.05) 70%);
}

.ie-main-banner__content{
padding: 44px 18px 34px;
justify-content: flex-start;
}

.ie-main-banner__title{
font-size: 34px;
line-height: 1.12;
}

.ie-main-banner__text{
font-size: 16px;
}



@media (max-width: 767.98px){

  .ie-main-banner__content{
    position: relative; /* anchor for button */
  }

  .ie-main-banner__btn{
    position: absolute;
    left: 18px;
    bottom: 72px; /* 👈 ВИЩЕ стрілок + dots */

    margin-top: 0;
    align-self: flex-start;
  }

}



}

/* Small phones */
@media (max-width: 420px){
.ie-main-banner__title{ font-size: 30px; }
}

/* Fallback ONLY when JS did NOT run */
.ie-main-banner:not(.ie-main-banner--js) .ie-main-banner__slide{ display:none; }
.ie-main-banner:not(.ie-main-banner--js) .ie-main-banner__slide:first-child{ display:grid; }

/* When JS runs, it manages slides */
.ie-main-banner.ie-main-banner--js .ie-main-banner__slide{ display:grid; }


/* === Controls: arrows + dots === */
.ie-main-banner__controls{
position: absolute;
left: 0;
right: 0;
bottom: 18px;
z-index: 5;

display: flex;
align-items: center;
justify-content: center;
gap: 14px;

pointer-events: none; /* allow slide clicks; buttons re-enable */
}

.ie-main-banner__arrow{
pointer-events: auto;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(0,0,0,0.28);
color: #fff;
cursor: pointer;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;

backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.ie-main-banner__arrow span{
font-size: 28px;
line-height: 1;
transform: translateY(-3px);
}

.ie-main-banner__arrow:hover{
transform: translateY(-2px);
background: rgba(0,0,0,0.36);
border-color: rgba(255,255,255,0.35);
}

.ie-main-banner__dots{
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.ie-main-banner__dot{
width: 8px;
height: 8px;
border-radius: 999px;
border: 0;
padding: 0;
cursor: pointer;
background: rgba(255,255,255,0.45);
transition: transform .2s ease, background .2s ease, width .2s ease;
}

.ie-main-banner__dot.is-active{
width: 18px;
background: linear-gradient(135deg, #004199 0%, #36b79b 100%);
}

.ie-main-banner__dot:hover{
transform: scale(1.08);
}

/* Mobile: center controls nicely and reduce size */
@media (max-width: 767.98px){
.ie-main-banner__controls{
bottom: 14px;
gap: 10px;
}
.ie-main-banner__arrow{
width: 40px;
height: 40px;
}
.ie-main-banner__arrow span{ font-size: 26px; }
}

/* Desktop: button width fits content */
.ie-main-banner__btn{
  width: auto;
  max-width: none;
  display: inline-flex;
  white-space: nowrap;
}

/* Remove pink / focus styles on button */
.ie-main-banner__btn{
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.ie-main-banner__btn:hover,
.ie-main-banner__btn:focus,
.ie-main-banner__btn:active{
  outline: none;
  box-shadow: none;
}


/* === Remove pink focus/active on arrows === */
.ie-main-banner__arrow{
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.ie-main-banner__arrow:focus,
.ie-main-banner__arrow:active,
.ie-main-banner__arrow:focus-visible{
  outline: none;
  box-shadow: none;
  background: rgba(0,0,0,0.28); /* keep your normal bg */
}


@media (min-width: 1025px){
  .ie-main-banner__content{
    grid-column: 1 / 2;
    padding-left: 180px;
  }
}


/* Hide arrows + pagination when only one slide */
.ie-main-banner.ie-main-banner--single .ie-main-banner__controls{
display: none !important;
}