html {
    scroll-behavior: smooth !important;
}

body {
    color: #fff;
}

:root {
    --light-grey: #4d4d4d !important;
    font-family: "Poppins", sans-serif !important;

}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    /* background-color: #020617;  */
    /* background: linear-gradient(to right, #020617, #006181); */
    background: radial-gradient(circle at 24% 42%, #01040f, #022346, rgba(0, 97, 129, 1));
    z-index: -1;
}


.hero-section {
    height: 100%;
    width: 100%;
    /* background-image: url('../assets/img/bg-kamal-portfolio.png'); */
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
}




.text-light-grey {
    color: var(--light-grey);
}


@media (min-width:1400px) {
    h1 {
        font-size: 6rem !important;
    }
}

@media (min-width:1200px) and (max-width : 1399.98px) {
    h1 {
        font-size: 5.1rem !important;
    }

    .explore-btn {
        padding: 0.8rem 0.9rem !important;
    }
}

@media (min-width:992px) and (max-width : 1199.98px) {
    h1 {
        font-size: 4.1rem !important;
    }
}

@media (min-width:768px) and (max-width : 991.98px) {
    h1 {
        font-size: 3rem !important;
    }
}

@media (min-width:576px) and (max-width : 767.98px) {
    h1 {
        font-size: 2rem !important;
    }
}

@media (min-width:576px) and (max-width : 767.98px) {
    h1 {
        font-size: 2.3rem !important;
        font-weight: 500;

    }
}

@media (max-width:575.98px) {
    h1 {
        font-size: 1.7rem !important;
        font-weight: 600;
    }
}

.nav-link {
    color: #fff;
}

.navbar-btn {
    border: solid 1px #fff;
    border-radius: 2rem;
}

.nav-link {
    position: relative;
}

.nav-link::before {
    content: "";
    position: absolute;
    background-color: #fff;
    height: 0.2rem;
    width: 0%;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s ease;
}

.nav-link:hover::before {
    width: 100%;
    color: #cabdbd;
}

.resume-btn {
    color: #fff;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 2rem;
    transition: 0.3s ease;
    padding: 0.8rem 1.6rem;
    position: relative;
    z-index: 1;
    overflow: hidden;

    a {
        color: #ffffff;
    }
}

.resume-btn::before {
    position: absolute;
    content: "";
    height: 100%;
    border-radius: 2.5rem;
    width: 0%;
    color: #000;
    background-color: #fff;
    left: 0;
    top: 0;
    transition: 0.3s all ease-in-out;
    z-index: -1;
}

.resume-btn:hover::before {
    width: 100%;
}

.resume-btn:hover {
    color: #000 !important;

    .fa-arrow-right {
        transform: rotate(0deg) !important;
    }

    a {
        color: #000;
    }
}

.btn-navclose {
    color: #fff !important;
    background-color: black;
    border: 3px solid #fff;
}

#mob-link:hover {
    color: #767373 !important;

}

.fa-arrow-right {
    transform: rotate(-30deg) !important;
    transition: 0.3s all ease;
}

.circle {
    background-color: #ffffff !important;
    width: 8px;
    height: 8px;
    border-radius: 50%;

}

.line {
    width: 100%;
    /* background-color: red !important; */
    background-color: #ffffff !important;
    border-radius: 5rem;
}



.skills-container {
    /* width: 200px; */
    background-color: #070d1e;
    border-radius: 1.4rem;
    position: relative;
    --color1: #0377bd;
    --color2: #ffbf0a;
}

.skills-container::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: conic-gradient(from var(--angle), var(--color1) 0deg 180deg, var(--color2) 180deg 360deg);
    z-index: -1;
    border-radius: inherit;
    animation: rotates 3s linear infinite;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 53deg;
    inherits: false;
}

@keyframes rotates {
    from {
        --angle: 53deg;
    }

    to {
        --angle: 413deg;
    }
}

.go-to-top {
    position: fixed;
    border: 0.2rem solid #ffffff;
    background-color: #ffffff;
    width: fit-content;
    border-radius: 50%;
    padding: 1rem;
    right: 4rem;
    bottom: 3rem;
    display: none !important;
    z-index: 1000 !important;

    .fa-arrow-up {
        color: #000;
    }

    &:hover {
        background-color: #010c1e !important;

        .fa-arrow-up {
            color: #ffffff;
        }
    }
}

@media (max-width:991.98px) {
    .go-to-top {
        right: 1rem;
        bottom: 3rem;
    }
}

.go-to-top.show {
    display: flex !important;
}

.send-btn {
    border-radius: 1rem;
    /* border: 0.3rem solid #18638b !important; */
    background-color: #000;
    color: #ffffff;
    position: relative;
    border: none;
}

.send-btn::before {
    content: '';
    position: absolute;
    background-color: #18638b;
    z-index: -1;
    border-radius: 1rem;
    inset: -4px;
}

.send-btn:hover {
    color: #000;
    background-color: #ffffff;
    box-shadow: 40px 0 100px #00d9ff, -40px 0 100px #00d9ff;
}

.certification-card{
    transition:all 0.1s linear;
    &:hover{
            transform: translateY(-10px) !important;
    }
}