*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


.hero{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    display:flex;
    align-items:center;
}


/* Background Image */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/coverpage.jpg") center center / cover no-repeat;
    animation:bgZoom 18s ease-in-out infinite alternate;
}


/* Dark Overlay */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(36,14,55,.85),
        rgba(67,27,89,.55),
        rgba(40,14,62,.85)
    );
}


/* Effects Layer */
.effects{
    position:absolute;
    inset:0;
    overflow:hidden;
}


/* Glow Blobs */
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.75;
}


.b1{
    width:320px;
    height:320px;
    background:#8b5cf6;
    right:10%;
    top:20px;
    animation:blob1 10s infinite ease-in-out;
}


.b2{
    width:220px;
    height:220px;
    background:#06b6d4;
    right:0;
    bottom:0;
    animation:blob2 8s infinite ease-in-out;
}


.b3{
    width:170px;
    height:170px;
    background:#ec4899;
    right:25%;
    bottom:40px;
    animation:blob3 11s infinite ease-in-out;
}



/* Ring */
.ring{
    position:absolute;
    right:10%;
    top:60px;
    width:260px;
    height:260px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.15);
    box-shadow:
    0 0 30px #8b5cf6 inset,
    0 0 20px #06b6d4;

    animation:rotate 18s linear infinite;
}


.ring::before{
    content:"";
    position:absolute;
    inset:22px;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,.3);
    animation:rotateReverse 10s linear infinite;
}



/* Shine */
.shine{
    position:absolute;
    top:-200px;
    right:-200px;
    width:180px;
    height:760px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.2),
        transparent
    );

    transform:rotate(35deg);

    animation:sweep 6s infinite linear;
}



/* Particles */
.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:white;
    border-radius:50%;
    opacity:.4;
    animation:float 10s linear infinite;
}


.p1{left:15%}
.p2{left:35%;animation-delay:2s}
.p3{left:55%;animation-delay:4s}
.p4{left:75%;animation-delay:1s}
.p5{left:90%;animation-delay:5s}



/* Content */

.content{
    position:relative;
    z-index:5;
    color:white;
    margin-left:6%;
}


.breadcrumb{
    font-size:clamp(14px,2vw,20px);
    font-weight:600;
    color:#ddd;
    margin-bottom:10px;
}


.breadcrumb span{
    color:white;
}


.content h1{
    font-size:clamp(40px,7vw,64px);
    font-weight:700;
}



/* Animations */

@keyframes bgZoom{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1);
    }
}


@keyframes blob1{
    50%{
        transform:translate(-50px,-20px) scale(1.2);
    }
}

@keyframes blob2{
    50%{
        transform:translate(-30px,25px);
    }
}


@keyframes blob3{
    50%{
        transform:translate(35px,-20px);
    }
}


@keyframes rotate{
    to{
        transform:rotate(360deg);
    }
}


@keyframes rotateReverse{
    to{
        transform:rotate(-360deg);
    }
}


@keyframes sweep{
    from{
        transform:translateX(-350px) rotate(35deg);
    }

    to{
        transform:translateX(850px) rotate(35deg);
    }
}


@keyframes float{

    from{
        transform:translateY(450px);
        opacity:0;
    }

    20%{
        opacity:.5;
    }

    to{
        transform:translateY(-100px);
        opacity:0;
    }
}



/* Tablet */

@media(max-width:992px){

.hero{
    height:250px;
}


.ring{
    width:210px;
    height:210px;
    right:5%;
}


.b1{
    width:250px;
    height:250px;
}


.content{
    margin-left:5%;
}

}



/* Mobile */

@media(max-width:600px){

.hero{
    height:200px;
}


.content{
    margin-left:25px;
}


.ring{
    width:150px;
    height:150px;
    top:70px;
    right:20px;
    opacity:.7;
}


.ring::before{
    inset:15px;
}


.b1{
    width:180px;
    height:180px;
}


.b2{
    width:150px;
    height:150px;
}


.b3{
    width:120px;
    height:120px;
}


.shine{
    display:none;
}

}