/*==================================================
                INFRASTRUCTURE PAGE
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.infra-title{
    text-align:center;
    font-size:42px;
    font-weight:300;
    color:#222;
    margin-bottom:18px;
}

.infra-subtitle{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
    color:#666;
    font-size:16px;
    line-height:1.9;
}

/*=========================================
            SECTION
=========================================*/

.infra-section{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:55px;

    margin-bottom:90px;

}

.infra-section:nth-of-type(even){

    flex-direction:row-reverse;

}

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

.infra-text{

    width:38%;

}

.infra-text h2{

    font-size:24px;

    font-weight:600;

    color:#222;

    margin-bottom:22px;

    line-height:1.4;

}

.infra-text ul{

    padding-left:22px;

}

.infra-text li{

    margin-bottom:12px;

    color:#666;

    line-height:1.8;

    font-size:15px;

}

/*=========================================
            IMAGE GALLERY
=========================================*/

.infra-gallery-wrap{
    width:58%;
}

.infra-gallery{

    width:100%;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.infra-gallery img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.infra-gallery img:hover{

    transform:translateY(-6px) scale(1.03);

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/*=========================================
            PAGE SPACING
=========================================*/

.main-wrapper{

    min-height:100vh;

}

.content{

    padding:40px 45px 60px;

}
/*==================================================
                LIGHTBOX
==================================================*/

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
    padding:40px;
}

.lightbox.active{
    display:flex;
    animation:fadeIn .3s ease;
}

.lightbox-content{
    position:relative;
    max-width:95%;
    max-height:95%;
    display:flex;
    justify-content:center;
    align-items:center;
}

#lightbox-image{
    max-width:100%;
    max-height:88vh;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    animation:zoomIn .35s ease;
}

.lightbox-close{

    position:absolute;

    top:-15px;

    right:-15px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#ffffff;

    color:#222;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 5px 15px rgba(0,0,0,.25);

}

.lightbox-close:hover{

    background:#10cca9;

    color:#fff;

    transform:rotate(90deg);

}

/*==================================================
                ANIMATIONS
==================================================*/

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.75);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
                FOOTER SPACING
==================================================*/

.alufit-footer{

    margin-top:70px;

}

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

@media(max-width:1200px){

.infra-section{

    gap:35px;

}

.infra-text{

    width:42%;

}

.infra-gallery-wrap{

    width:54%;

}

.infra-gallery{

    width:100%;

}

.infra-gallery img{

    height:190px;

}

.content{

    padding:35px;

}

}

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

@media(max-width:991px){

.infra-section{

    flex-direction:column !important;

    margin-bottom:60px;

}

.infra-text{

    width:100%;

}

.infra-gallery-wrap,

.infra-gallery{

    width:100%;

    grid-template-columns:repeat(2,1fr);

}

.content{

    padding:90px 20px 40px;

}

.infra-title{

    font-size:34px;

}

.infra-subtitle{

    margin-bottom:45px;

}

}
/*==================================================
                SMALL MOBILE
==================================================*/

@media (max-width:768px){

    .infra-title{
        font-size:30px;
        line-height:1.3;
    }

    .infra-subtitle{
        font-size:15px;
        margin-bottom:35px;
    }

    .infra-gallery{
        grid-template-columns:1fr;
        gap:15px;
    }

    .infra-gallery img{
        height:220px;
    }

    .infra-text h2{
        font-size:22px;
    }

    .infra-text li{
        font-size:14px;
        line-height:1.8;
    }

}

/*==================================================
                EXTRA SMALL DEVICES
==================================================*/

@media (max-width:480px){

    .content{
        padding:85px 15px 30px;
    }

    .infra-title{
        font-size:26px;
    }

    .infra-subtitle{
        font-size:14px;
    }

    .infra-gallery img{
        height:200px;
        border-radius:6px;
    }

    .infra-text h2{
        font-size:20px;
    }

}

/*==================================================
                IMAGE EFFECTS
==================================================*/

.infra-gallery img{

    border:1px solid #ececec;

    background:#fff;

}

.infra-gallery img:hover{

    border-color:#10cca9;

}

/*==================================================
                SMOOTH ANIMATION
==================================================*/

.infra-section{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8d8d8d;

}

/*==================================================
                IMAGE LOADING
==================================================*/

.infra-gallery img{

    display:block;

    width:100%;

    object-fit:cover;

}

/*==================================================
                REMOVE EXTRA GAP
==================================================*/

.main-wrapper{

    overflow:hidden;

}

.content{

    width:100%;

    max-width:1500px;

    margin:0 auto;

}

.infra-section:last-child{

    margin-bottom:0;

}

/*==================================================
                END
==================================================*/