.nacer_banner {
    position: relative;
    background-color: #fff;
    padding-bottom: 4rem;

    .section {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;

        .banner {
            width: 100%;
            object-fit: cover;
        }

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;



            h1 {
                font-family: VisbyRoundCF;
                font-size: 2rem;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.7;
                letter-spacing: normal;
                text-align: left;
                color: #f7f3e3;
                margin-bottom: 1.6rem;
            }

            img {
                max-width: 33rem;
                margin-bottom: 2.3rem;
            }

            .work {
                display: flex;

                align-items: center;
                justify-content: center;
                gap: 1.8rem;

                p {
                    font-family: VisbyRoundCF;
                    font-size: 2rem;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.7;
                    letter-spacing: normal;
                    text-align: left;
                    color: #f7f3e3;
                }
            }
        }



    }
}



.csTextSection {
    background-color: #fff;
    padding: 4rem 0;
    position: relative;


    .mainContainer {
        display: flex;
        gap: 4rem;
        width: 100%;
        justify-content: space-between;

        .left {
            flex-basis: 50%;

            p {
                font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
                font-size: 3rem;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.5;
                letter-spacing: normal;
                text-align: left;
                color: rgba(0, 0, 0, 0.3);
                text-transform: uppercase;


                span {
                    background: linear-gradient(to right, #000 50%, #b5b5b5 50%);
                    background-size: 200% 100%;
                    background-position: 100% 0;

                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }

        .right {
            flex-basis: 50%;


            p {
                font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
                font-size: 2rem;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.5;
                letter-spacing: normal;
                text-align: right;
                color: #000;
            }

            .urlWrap {
                display: flex;
                justify-content: flex-end;
                width: 100%;
                margin-top: 3.2rem;

                a {
                    font-family: VisbyRoundCF, Tahoma, Geneva, Verdana, sans-serif;
                    font-size: 2rem;
                    font-weight: 500;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.7;
                    letter-spacing: normal;
                    text-align: left;
                    color: #000;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    border-bottom: 1px solid #000;

                    transition: all .3s ease-in-out;
                    &:hover{
                        opacity: .7;
                    }

                    span {
                        svg {
                            height: 2.2rem;
                            width: 2.2rem;
                            display: block;

                            path {}
                        }
                    }
                }
            }
        }
    }
}

.ncaer_gridSection {
    position: relative;
    display: flex;
    padding: 5rem 1% 10rem;
    background-color: #FFFFFF;
    width: 100%;

    .wrapperContainer {
        display: flex;
        gap: 1.8rem;
        width: 100%;
        align-items: stretch;
    }


    .c1,
    .c2,
    .c3 {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        min-width: 0;
    }


    .c1 {
        flex: 4;
    }

    .c2 {
        flex: 4;
    }

    .c3 {
        flex: 2;
    }


    .block {
        flex: 1;
        background-color: #002F58;
        border-radius: 2.25rem;
        overflow: hidden;
        display: flex;

        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }


    .c1 {
        .block {
            align-items: center;
            justify-content: center;

            &:nth-child(1) {
                padding: 20% 20% 0;

                img {
                    max-width: 32rem;
                }
            }

            &:nth-child(2) {
                padding: 10% 35%;

                img {
                    max-width: 18rem;
                }
            }
        }
    }


    .c2 {
        .block {
            padding: 20% 10%;
            align-items: center;
            justify-content: center;
        }
    }


    .c3 {
        .block {
            align-items: center;
            justify-content: center;
            padding: 2.2rem;

            svg {
                width: 100%;
                height: 100%;
                display: block;
            }

            &:nth-child(2) {
                padding: 20% 0;
            }
        }
    }
}


.ncaer_logoTextSection {

    position: relative;
    background-color: #FFFFFF;
    padding: 10rem 0 7rem;

    .container {
        position: relative;
        display: flex;
        justify-content: space-between;

        gap: 4rem;

        .c1 {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            p {
                font-family: VisbyRoundCF;
                font-size: 2rem;
                font-weight: 500;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.5;
                letter-spacing: normal;
                text-align: left;
                color: #000;
            }
        }

        .c2 {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            img {
                width: 100%;
                height: auto;
                max-width: 57rem;
            }
        }

    }

}


.ncaer_visualElements {


    position: relative;
    display: flex;
    background-color: #FFFFFF;

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 7rem 0 7rem;

        h1 {
            font-family: VisbyRoundCF;
            font-size: 4rem;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.5;
            letter-spacing: normal;
            text-align: left;
            color: #000;
            margin-bottom: 5rem;
        }

        img {
            width: 100%;
            margin-bottom: 3.3rem;
        }

        p {
            font-family: VisbyRoundCF;
            font-size: 2rem;
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.5;
            letter-spacing: normal;
            text-align: center;
            color: #000;
            max-width: 75rem;
        }


    }


}

.ncaer_desktopView {
    position: relative;
    display: flex;
    background-color: #FFFFFF;
    padding: 7rem 1% 1.5rem;


    .wrapper {
        display: flex;
        width: 100%;
        background-color: #00539B;
        border-radius: 2.3rem;
        padding: 9.5rem 5.8rem;
    }
}

.ncaer_mobileView {


    position: relative;
    display: flex;
    background-color: #FFFFFF;
    padding: 1.5rem 1% 1.5rem;

    .wrapper {
        display: flex;
        width: 100%;
        gap: 3rem;
        border-radius: 2.3rem;


        .c1 {
            width: 50%;
            border-radius: 2.7rem;
            background-color: #f2ece1;
            display: flex;
            padding: 10% 10% 0% 10%;
        }

        .c2 {
            display: flex;
            border-radius: 2.7rem;
            padding: 10% 10% 0% 10%;
            width: 50%;
            background-image: url('../project/ncaer/mobile-bg.png');
        }
    }

}






.ncaer_desktopAndTabView {


    position: relative;
    display: flex;
    background-color: #FFFFFF;
    padding: 1.5rem 1% 1.5rem;

    .wrapper {
        display: flex;
        width: 100%;
        gap: 3rem;
        border-radius: 2.3rem;


        .c1 {
            width: 60%;
            border-radius: 2.7rem;
            background-color: #ae904f;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10% 5% 10% 5%;
            position: relative;

            .bg {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 0;
            }

            img {
                z-index: 5;
            }


        }

        .c2 {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2.7rem;
            padding: 10% 2.5% 10% 2.5%;
            background-color: #7fb7ff;
            position: relative;



            .bg {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 0;
                width: 100%;
                height: 100%;
                opacity: .5;
            }

            img {
                z-index: 5;
            }

        }
    }

}

.ncaer_textBlock {
    position: relative;
    background-color: #FFFFFF;
    padding: 10rem 0 2.5rem;

    .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
            font-family: VisbyRoundCF;
            font-size: 40px;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.5;
            letter-spacing: normal;
            text-align: center;
            color: rgba(0, 0, 0, 0.3);
            max-width: 90rem;
            text-transform: uppercase;

            span {
                background: linear-gradient(to right, #000 50%, #b5b5b5 50%);
                background-size: 200% 100%;
                background-position: 100% 0;

                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}


.ncaer_cmsBlock {
    background-color: #fff;
    padding: 4rem 1% 5rem;
    position: relative;

    display: flex;
    gap: 1.6rem;

    .c1 {
        width: 65%;
        background-color: #7D0323;
        display: flex;
        padding: 4.8rem;
        border-radius: 2.7rem;

    }

    .c2 {
        flex: 4;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;

        .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            &:nth-child(1) {
                border-radius: 2.7rem;
                background-color: #1b4379;
                padding: 10%;
            }

            &:nth-child(2) {
                border-radius: 2.7rem;
                background-color: #ffe09e;
                padding: 10% 0 0;
                align-items: flex-end;
                justify-content: flex-end;

                img {
                    width: 100%;
                }
            }

            h1 {
                font-family: VisbyRoundCF;
                font-size: 12rem;
                font-weight: bold;
                text-align: center;
                color: #fff;
                margin-bottom: 2.3rem;
            }

            p {
                font-family: VisbyRoundCF;
                font-size: 2rem;
                font-weight: 500;
                line-height: 1.5;
                color: #fff;
                text-align: left;
            }
        }
    }



}

.postNav {
    background-color: #fff;
    position: relative;
    padding: 9rem 0;

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 95rem;
        gap: 5rem;

        a {
            font-family: VisbyRoundCF;
            font-size: 4rem;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.5;
            letter-spacing: normal;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
            transition: all .3s ease-in-out;

            &:hover {
                color: rgba(0, 0, 0, 1);
            }

        }
    }

}