/* ========================================
INFRA SLIDER
======================================== */

.infra-slider{

    position:relative;

    width:100%;

    height:78vh;

    min-height:720px;

    overflow:hidden;

    background:#000;
}

/* ========================================
SLIDE
======================================== */

.infra-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .8s ease,
    visibility .8s ease;

    transform:scale(1.03);
}

.infra-slide.active{

    opacity:1;

    visibility:visible;

    transform:scale(1);
}

/* ========================================
OVERLAY
======================================== */

.infra-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.50) 40%,
    rgba(0,0,0,.18) 100%
    );
}

/* ========================================
CONTENT
======================================== */

.infra-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:620px;

    height:100%;

    padding:
    0
    6%
    80px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;
}

/* ICON */

.infra-content img{

    width:68px;

    margin-bottom:24px;

    filter:brightness(0) invert(1);
}

/* TITLE */

.infra-content h2{

    font-size:58px;

    line-height:.95;

    font-weight:900;

    color:#fff;

    margin-bottom:30px;

    letter-spacing:-2px;
}

/* BUTTON */

.infra-content button{

    background:#E14514;

    color:#fff;

    border:none;

    padding:
    16px
    32px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;
}

.infra-content button:hover{

    background:#cf3d10;

    transform:translateY(-3px);
}

/* ========================================
BROCHURE MODAL
======================================== */

.brochure-modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.88);

    backdrop-filter:blur(10px);

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    padding:30px;
}

.brochure-modal.active{

    opacity:1;

    visibility:visible;
}

/* ========================================
FLIPBOOK
======================================== */

#flipbook{

    width:100%;

    max-width:1000px;

    height:650px;

    background:transparent;

    overflow:hidden;

    border-radius:24px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
}

/* PAGE */

#flipbook .page{

    background:transparent;
}

/* IMAGE */

#flipbook img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;
}
/* ========================================
CLOSE
======================================== */

.brochure-close{

    position:absolute;

    top:25px;

    right:25px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#E14514;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    cursor:pointer;

    z-index:1000;

    transition:.3s ease;
}

.brochure-close:hover{

    background:#cf3d10;

    transform:rotate(90deg);
}

/* ========================================
ARROWS
======================================== */

.brochure-prev,
.brochure-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border-radius:50%;

    background:
    rgba(255,255,255,.14);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    cursor:pointer;

    z-index:1000;

    transition:.3s ease;
}

.brochure-prev{

    left:25px;
}

.brochure-next{

    right:25px;
}

.brochure-prev:hover,
.brochure-next:hover{

    background:#E14514;
}

/* ========================================
DOWNLOAD BUTTON
======================================== */

.brochure-download-btn{

    position:absolute;

    top:25px;

    left:25px;

    z-index:1000;

    height:48px;

    padding:
    0
    22px;

    border-radius:999px;

    background:#E14514;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s ease;
}

.brochure-download-btn:hover{

    background:#cf3d10;
}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

#flipbook{

    width:860px;

    height:600px;
}

}

/* ========================================
TABLET
======================================== */

@media(max-width:992px){

.infra-slider{

    height:70vh;

    min-height:650px;
}

.infra-content h2{

    font-size:46px;
}

#flipbook{

    width:700px;

    height:520px;
}

}

/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

.brochure-modal{

    padding:20px;

    overflow:auto;
}

#flipbook{

    max-width:95vw;

    height:70vh;
}


.brochure-prev,
.brochure-next{

    width:46px;

    height:46px;

    font-size:18px;
}

.brochure-prev{

    left:10px;
}

.brochure-next{

    right:10px;
}

.brochure-close{

    width:44px;

    height:44px;

    top:12px;

    right:12px;
}

.brochure-download-btn{

    top:12px;

    left:12px;

    height:40px;

    padding:0 14px;

    font-size:12px;
}

}