Portfolio.css

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
*{
    margin: 0%;
    padding: 0%;
    text-decoration: none;
    scroll-behavior: smooth;

}
    body{
    font-family: "poppins",sans-serif;
    background-color: #090e0b;   
}
body.locked{
        overflow: hidden;
    
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure header is on top of other elements */
}
/* Initial state */
.fade-in-bottom {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state */
.fade-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    --path: #fff;
    --dot: #5628EE;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
    display: inline-block;
    margin: 0 16px;
}
.loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg {
    display: block;
    width: 100%;
    height: 100%;
}
.loader rect,
.loader polygon,
.loader circle {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.loader polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader.triangle {
    width: 48px;
}
.loader.triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@keyframes pathTriangle {
    33% { stroke-dashoffset: 74; }
    66% { stroke-dashoffset: 147; }
    100% { stroke-dashoffset: 221; }
}

@keyframes dotTriangle {
    33% { transform: translate(0, 0); }
    66% { transform: translate(10px, -18px); }
    100% { transform: translate(-10px, -18px); }
}

@keyframes pathRect {
    25% { stroke-dashoffset: 64; }
    50% { stroke-dashoffset: 128; }
    75% { stroke-dashoffset: 192; }
    100% { stroke-dashoffset: 256; }
}

@keyframes dotRect {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}

@keyframes pathCircle {
    25% { stroke-dashoffset: 125; }
    50% { stroke-dashoffset: 175; }
    75% { stroke-dashoffset: 225; }
    100% { stroke-dashoffset: 275; }
}@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

header{
    position: sticky;
}
nav{
    position: sticky;
height: 60px;
width: 100%;
}
nav.color{
    height: 5px;
    width: 100%;
    background-color: #0a66c2;
}
nav.downcolor{
    height: 1.5px;
    width: 100%;
    background-color: rgb(204, 204, 204);

}
label.logo{
    position: sticky;
    color: #ffffff;
    font-size: 30px;
    padding: 0 100px;
    font-weight: none;
    line-height: 60px;
}
nav ul{
    float:right;
    margin-right: 20px;
}
nav ul li {
    display:inline-block;
    line-height: 60px;
margin: 0 5px;}
nav ul li a {
    color:#ffffff;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
}
a.header:hover{
background-color:#4169e1;
transition: .5s;
color:white;


}
.checkbtn{
    position: sticky;
font-size: 30px;
color: #ffffff;
float: right;
line-height: 60px;
margin-right: 40px;
cursor:pointer;
display: none;
}
#check{
    display: none;
}
@media(max-width:952px){
    header{
    position: sticky;}
    label.logo{
        font-size: 30px;
        padding-left: 20px;
    }
    nav ul li a {
        font-size: 16px;
    }
}
@media(max-width:858px)
{
    .checkbtn{
        display: block;
        font-size: 30px;
        color: #ffffff;
        float: right;
        line-height: 60px;
        margin-right: 40px;
        cursor:pointer;
    
    }
        

    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: #090e0b;
        top: 64px;
        left: -100%;
        text-align: center;
        transition: all .5s;
        color:white;
    }
    nav ul li{

        display: block;
        margin: 50px 0;
        line-height: 30px;
    
    }
    nav ul li a{
        font-size: 20px;
    color:white;
    }
    a:hover.a.active{
        background: none;
        
    }
#check:checked ~ ul{
    left:0;
    
}
#check:checked ~ .checkbtn{
    display: block;
    font-size: 30px;
    color: #ffffff;
    float: right;
    line-height: 60px;
    margin-right: 40px;
    cursor:pointer;
    position:relative;
}
}