/* =========================================
   ABOUT INNER BANNER
========================================= */

.about-banner{

    position:relative;

    width:100%;
    height:300px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            120deg,
            #061522,
            #0b2c43,
            #114e69,
            #071b2b
        );

    background-size:300% 300%;

    animation:bannerBackground 10s ease infinite;
}


/* =========================================
   ANIMATED GRID
========================================= */

.banner-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    animation:gridAnimation 8s linear infinite;

}


/* =========================================
   ORANGE GLOW
========================================= */

.glow{

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    background:rgba(255,157,0,.12);

    filter:blur(65px);

    pointer-events:none;

}


.glow-one{

    left:5%;
    top:-230px;

    animation:glowAnimation 5s ease-in-out infinite;

}


.glow-two{

    right:5%;
    bottom:-240px;

    animation:glowAnimation 7s ease-in-out infinite reverse;

}


/* =========================================
   ROTATING CIRCLE
========================================= */

.banner-circle{

    position:absolute;

    width:430px;
    height:430px;

    right:-80px;
    top:-30px;

    border:1px solid rgba(255,255,255,.13);

    border-radius:50%;

    animation:circleRotate 20s linear infinite;

}


.banner-circle::before{

    content:"";

    position:absolute;

    inset:35px;

    border:1px dashed rgba(255,157,0,.35);

    border-radius:50%;

}


.banner-circle::after{

    content:"";

    position:absolute;

    inset:90px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50%;

}


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

.about-banner-content{

    position:relative;

    z-index:5;

    text-align:center;

    color:#fff;

}


/* Small Heading */

.banner-small{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    color:#E97823;

    font-size:12px;

    font-weight:bold;

    letter-spacing:3px;

    margin-bottom:18px;

    opacity:0;

    animation:fadeDown 1s ease forwards;

}


.banner-small::before,
.banner-small::after{

    content:"";

    width:40px;
    height:2px;

    background:#E97823;

}


/* Main Heading */

.about-banner-content h2{

    margin:0 0 18px;

    font-size:45px;

    line-height:1.1;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    opacity:0;

    transform:translateY(40px);

    animation:titleAnimation 1s ease .2s forwards;

}


/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:15px;

    opacity:0;

    transform:translateY(25px);

    animation:titleAnimation 1s ease .5s forwards;

}


.breadcrumb a{

    color:#E97823;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.breadcrumb a:hover{

    color:#fff;

}


.breadcrumb .arrow{

    color:#E97823;

    font-size:18px;

    animation:arrowAnimation 1.2s ease-in-out infinite;

}


.breadcrumb span:last-child{

    color:#dce5ea;

}


/* =========================================
   MOVING LIGHT LINES
========================================= */

.moving-line{

    position:absolute;

    width:320px;
    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #E97823,
            transparent
        );

    opacity:.5;

}


.line-one{

    top:25%;

    left:-320px;

    animation:lineMove 6s linear infinite;

}


.line-two{

    bottom:25%;

    right:-320px;

    animation:lineMoveReverse 7s linear infinite;

}


/* =========================================
   FLOATING PARTICLES
========================================= */

.particle{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#E97823;

    box-shadow:0 0 15px #E97823;

    opacity:.5;

}


.particle-1{

    left:12%;
    bottom:25%;

    animation:particleAnimation 5s infinite;

}


.particle-2{

    left:28%;
    top:20%;

    animation:particleAnimation 7s infinite 1s;

}


.particle-3{

    right:25%;
    top:25%;

    animation:particleAnimation 6s infinite 2s;

}


.particle-4{

    right:12%;
    bottom:20%;

    animation:particleAnimation 8s infinite 1s;

}


.particle-5{

    left:50%;
    top:15%;

    animation:particleAnimation 5s infinite 2s;

}


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

@keyframes bannerBackground{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}


@keyframes gridAnimation{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(45px,45px);

    }

}


@keyframes glowAnimation{

    0%,100%{

        transform:
            translate(0,0)
            scale(1);

    }

    50%{

        transform:
            translate(40px,30px)
            scale(1.2);

    }

}


@keyframes circleRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes titleAnimation{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes arrowAnimation{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(7px);

    }

}


@keyframes lineMove{

    0%{

        left:-320px;

    }

    100%{

        left:110%;

    }

}


@keyframes lineMoveReverse{

    0%{

        right:-320px;

    }

    100%{

        right:110%;

    }

}


@keyframes particleAnimation{

    0%,100%{

        transform:
            translateY(0)
            scale(1);

        opacity:.3;

    }

    50%{

        transform:
            translateY(-35px)
            scale(1.5);

        opacity:1;

    }

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    .about-banner{

        height:310px;

    }


    .about-banner-content h2{

        font-size:40px;

    }


    .banner-small{

        font-size:10px;

        letter-spacing:2px;

    }


    .banner-small::before,
    .banner-small::after{

        width:25px;

    }


    .banner-circle{

        width:330px;
        height:330px;

        right:-170px;

    }

}


@media(max-width:480px){

    .about-banner{

        height:280px;

    }


    .about-banner-content h2{

        font-size:32px;

    }


    .breadcrumb{

        font-size:13px;

    }


    .banner-circle{

        width:280px;
        height:280px;

        right:-150px;

    }

}