/*===================================================
    Industries landing page
    (shared inner-hero / industry slider styles live in common.css)
===================================================*/

/*===inner hero===*/
.innerHeroSec{
    .innerHeroCont{
        flex: 1;
        .innerHeroSub{
            max-width: 990px;
        }
    }
}

/*===demand panel - heading left, copy right===*/
.demandSec{
    .demandPanel{
        background-color: #e8eef8;
    }
    .headingWrap{
        align-items: flex-end;
        .headingLeft{
            width: 50%;
            .tagHolder{
                max-width: 100%;
            }
        }
        .headingRight{
            width: calc(100% - 50%);
            p{
                margin: 0;
                color: #1d2a36;
                font-size: 18px;
                line-height: 1.75;
                letter-spacing: 0.2px;
            }
        }
    }
}
@media (max-width: 991px){
    .demandSec{
        .headingWrap{
            .headingLeft,
            .headingRight{
                width: 100%;
            }
            .headingRight{
                padding-left: 0;
                p{
                    margin-top: 26px;
                }
            }
        }
    }
}

/*===cta - blue banner with crane art (matches home ctaSec)===*/
.indCtaSec{
    .ctaSec{
        background-color: var(--blue);
        padding: 90px 80px;
        overflow: hidden;
        .ctaContent{
            max-width: 62%;
            .SecH{
                font-size: 64px;
                margin-bottom: 40px;
            }
        }
        .ctaBtnWrap{
            ul{
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                li{
                    a{
                        padding: 14px 30px;
                    }
                }
            }
        }
        .btnOne.solidWhiteBtn{
            background-color: #fff;
            border: 1px solid #fff;
            color: #000;
            &:hover{
                background-color: transparent;
                color: #fff;
            }
        }
        /*===crane artwork bleeding off the right edge===*/
        .ctaImg{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 220px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
        }
    }
}
@media (max-width: 1199px){
    .indCtaSec .ctaSec .ctaContent .SecH{
        font-size: 50px;
    }
}
@media (max-width: 991px){
    .indCtaSec .ctaSec{
        padding: 70px 50px;
        .ctaContent{
            max-width: 70%;
            .SecH{
                font-size: 40px;
            }
        }
        .ctaImg{
            width: 160px;
            right: 20px;
        }
    }
}
@media (max-width: 767px){
    .indCtaSec .ctaSec{
        border-radius: 30px;
        padding: 50px 25px;
        .ctaContent{
            max-width: 100%;
            .SecH{
                font-size: 30px;
                margin-bottom: 30px;
            }
        }
        /*===crane fades behind the copy on small screens===*/
        .ctaImg{
            width: 130px;
            right: -30px;
            opacity: .35;
        }
    }
}

/*===whole-lifecycle panel - buy / service / rent cards===*/
.cycleSec{
    .cyclePanel{
        background-color: #1667a6;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
            .SecH{
                max-width: 1100px;
                margin: 0 auto;
            }
        }
    }
    .cycleGrid{
        .row{
            row-gap: 26px;
        }
        .cycleCard{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100%;
            min-height: 376px;
            padding: 28px 26px;
            border-radius: 25px;
            overflow: hidden;
            background-size: cover;
            background-position: center bottom;
            position: relative;
            transition: transform .4s ease, box-shadow .4s ease;
            /*===white wash so the copy stays readable over the photo===*/
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(169deg, #ffffff 34%, rgb(255 255 255 / 0%) 78%);
            }
            &:hover{
                transform: translateY(-6px);
                box-shadow: 0 20px 40px rgb(6 32 56 / 30%);
            }
            .cycleCont{
                position: relative;
                z-index: 1;
                margin-bottom: 20px;
                .cycleTitle{
                    display: block;
                    font-size: 26px;
                    font-weight: 700;
                    color: #1d2a36;
                    margin-bottom: 12px;
                }
                p{
                    margin: 0;
                    max-width: 100%;
                    font-size: 18px;
                    line-height: 1.55;
                    letter-spacing: 0.2px;
                    color: #1d2a36;
                }
            }
            .btnOne{
                position: relative;
                z-index: 1;
                background-color: #fff;
                border-color: #6f7d8a;
                &:hover{
                    background-color: var(--blue);
                    border-color: var(--blue);
                }
                &.blueBtn{
                    border-color: var(--blue);
                }
            }
        }
    }
}
@media (max-width: 767px){
    .cycleSec{
        .cycleGrid{
            .cycleCard{
                min-height: 320px;
                .cycleCont .cycleTitle{
                    font-size: 21px;
                }
            }
        }
    }
}