@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

.operational-system{
    position:relative;
    width:100%;
    height:calc(100vh - 80px);
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:35px 0;
    box-sizing:border-box;
    background:#F8F6EF;
    border-radius:0;
}

.operational-system-container{
    width:min(90%,1400px);
    height:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
    border-radius:0;
}

.operational-system-heading{
    width:100%;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 0 22px;
    border-bottom:1px solid rgba(201,162,39,.35);
    box-sizing:border-box;
    border-radius:0;
}

.operational-system-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:13px;
}

.operational-system-number{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    color:#C9A227;
}

.operational-system-tag{
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:3px;
    color:#777;
}

.operational-system-heading h2{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(3rem,4.5vw,4.8rem);
    line-height:.95;
    font-weight:700;
    letter-spacing:-2.5px;
    color:#111;
}

.operational-system-heading h2 span{
    color:#C9A227;
}

.operational-system-content{
    width:100%;
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
    gap:55px;
    align-items:center;
    margin-top:28px;
    box-sizing:border-box;
    border-radius:0;
}

.operational-system-image{
    position:relative;
    width:100%;
    height:min(410px,52vh);
    min-height:0;
    overflow:hidden;
    background:#E9E3D7;
    box-sizing:border-box;
    border-radius:0;
}

.operational-system-image::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(201,162,39,.8);
    z-index:2;
    pointer-events:none;
    border-radius:0;
}

.operational-system-image::after{
    content:"";
    position:absolute;
    width:110px;
    height:4px;
    left:35px;
    bottom:32px;
    background:#C9A227;
    z-index:3;
    border-radius:0;
}

.operational-system-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    border-radius:0;
}

.operational-system-info{
    width:100%;
    height:min(410px,52vh);
    min-height:0;
    padding-left:42px;
    border-left:1px solid rgba(201,162,39,.35);
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
    border-radius:0;
}

.operational-system-line{
    position:relative;
    width:100%;
    max-width:230px;
    height:1px;
    margin-bottom:28px;
    background:#222;
    border-radius:0;
}

.operational-system-line::after{
    content:"";
    position:absolute;
    left:0;
    top:-2px;
    width:70px;
    height:5px;
    background:#C9A227;
    border-radius:0;
}

.operational-system-info p{
    max-width:430px;
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    line-height:1.8;
    color:#444;
}

.operational-system-footer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:30px;
    border-radius:0;
}

.operational-system-footer span{
    display:block;
    width:42px;
    height:1px;
    background:#C9A227;
    border-radius:0;
}

.operational-system-footer strong{
    font-family:Arial,sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:3px;
    color:#777;
}

.operational-system.operational-system-visible .operational-system-heading{
    animation:operationalSystemHeadingIn .8s cubic-bezier(.22,1,.36,1) both;
}

.operational-system.operational-system-visible .operational-system-image{
    animation:operationalSystemImageIn .95s cubic-bezier(.22,1,.36,1) .12s both;
}

.operational-system.operational-system-visible .operational-system-info{
    animation:operationalSystemInfoIn .85s cubic-bezier(.22,1,.36,1) .25s both;
}

.operational-system.operational-system-visible .operational-system-line{
    animation:operationalSystemLineIn .7s cubic-bezier(.22,1,.36,1) .65s both;
}

.operational-system.operational-system-visible .operational-system-footer{
    animation:operationalSystemFooterIn .65s cubic-bezier(.22,1,.36,1) .8s both;
}

.operational-system.operational-system-visible .operational-system-image::before{
    animation:operationalSystemFrameIn .7s cubic-bezier(.22,1,.36,1) .55s both;
}

.operational-system.operational-system-visible .operational-system-image::after{
    animation:operationalSystemBarIn .65s cubic-bezier(.22,1,.36,1) .65s both;
}

.operational-system.operational-system-visible .operational-system-image img{
    animation:operationalSystemImageScale 1.2s cubic-bezier(.22,1,.36,1) .1s both;
}

@keyframes operationalSystemHeadingIn{
    0%{
        opacity:0;
        transform:translateY(25px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes operationalSystemImageIn{
    0%{
        opacity:0;
        transform:translateX(-35px);
    }
    100%{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes operationalSystemInfoIn{
    0%{
        opacity:0;
        transform:translateX(35px);
    }
    100%{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes operationalSystemLineIn{
    0%{
        opacity:0;
        transform:scaleX(0);
        transform-origin:left;
    }
    100%{
        opacity:1;
        transform:scaleX(1);
        transform-origin:left;
    }
}

@keyframes operationalSystemFooterIn{
    0%{
        opacity:0;
        transform:translateY(15px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes operationalSystemFrameIn{
    0%{
        opacity:0;
        transform:scale(.97);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes operationalSystemBarIn{
    0%{
        opacity:0;
        transform:scaleX(0);
        transform-origin:left;
    }
    100%{
        opacity:1;
        transform:scaleX(1);
        transform-origin:left;
    }
}

@keyframes operationalSystemImageScale{
    0%{
        transform:scale(1.06);
    }
    100%{
        transform:scale(1);
    }
}

@media(max-width:1200px){

    .operational-system{
        height:calc(100vh - 75px);
        min-height:580px;
        padding:30px 0;
    }

    .operational-system-container{
        width:92%;
    }

    .operational-system-heading{
        padding-bottom:18px;
    }

    .operational-system-label{
        margin-bottom:11px;
    }

    .operational-system-heading h2{
        font-size:clamp(2.7rem,4.8vw,4rem);
    }

    .operational-system-content{
        grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);
        gap:35px;
        margin-top:22px;
    }

    .operational-system-image{
        height:min(360px,48vh);
    }

    .operational-system-info{
        height:min(360px,48vh);
        padding-left:30px;
    }

    .operational-system-info p{
        font-size:14px;
        line-height:1.7;
    }
}

@media(max-width:900px){

    .operational-system{
        height:auto;
        min-height:100vh;
        overflow:visible;
        padding:60px 0;
    }

    .operational-system-container{
        height:auto;
        width:88%;
    }

    .operational-system-heading{
        padding-bottom:20px;
    }

    .operational-system-content{
        grid-template-columns:1fr;
        gap:30px;
        margin-top:25px;
    }

    .operational-system-image{
        height:auto;
        aspect-ratio:16 / 9;
    }

    .operational-system-info{
        height:auto;
        min-height:220px;
        padding:28px 0 0;
        border-left:none;
        border-top:1px solid rgba(201,162,39,.35);
    }

    .operational-system-info p{
        max-width:100%;
    }

    .operational-system.operational-system-visible .operational-system-image{
        animation-name:operationalSystemImageMobileIn;
    }

    .operational-system.operational-system-visible .operational-system-info{
        animation-name:operationalSystemInfoMobileIn;
    }
}

@keyframes operationalSystemImageMobileIn{
    0%{
        opacity:0;
        transform:translateY(30px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes operationalSystemInfoMobileIn{
    0%{
        opacity:0;
        transform:translateY(30px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:600px){

    .operational-system{
        padding:50px 0;
    }

    .operational-system-container{
        width:86%;
    }

    .operational-system-label{
        gap:12px;
    }

    .operational-system-number{
        font-size:10px;
    }

    .operational-system-tag{
        font-size:9px;
        letter-spacing:2.5px;
    }

    .operational-system-heading h2{
        font-size:2.7rem;
        letter-spacing:-1.5px;
    }

    .operational-system-content{
        gap:24px;
        margin-top:22px;
    }

    .operational-system-image{
        aspect-ratio:16 / 10;
    }

    .operational-system-image::before{
        inset:7px;
    }

    .operational-system-image::after{
        left:25px;
        bottom:24px;
        width:75px;
        height:3px;
    }

    .operational-system-info{
        min-height:210px;
        padding-top:24px;
    }

    .operational-system-line{
        max-width:180px;
        margin-bottom:20px;
    }

    .operational-system-info p{
        font-size:14px;
        line-height:1.7;
    }

    .operational-system-footer{
        margin-top:20px;
    }
}

@media(max-width:400px){

    .operational-system{
        padding:45px 0;
    }

    .operational-system-container{
        width:88%;
    }

    .operational-system-heading h2{
        font-size:2.4rem;
    }

    .operational-system-tag{
        font-size:8px;
        letter-spacing:2px;
    }

    .operational-system-content{
        margin-top:20px;
    }

    .operational-system-info p{
        font-size:13px;
        line-height:1.65;
    }
}

@media(prefers-reduced-motion:reduce){

    .operational-system.operational-system-visible .operational-system-heading,
    .operational-system.operational-system-visible .operational-system-image,
    .operational-system.operational-system-visible .operational-system-info,
    .operational-system.operational-system-visible .operational-system-line,
    .operational-system.operational-system-visible .operational-system-footer,
    .operational-system.operational-system-visible .operational-system-image::before,
    .operational-system.operational-system-visible .operational-system-image::after,
    .operational-system.operational-system-visible .operational-system-image img{
        animation:none;
    }
}