div.fp-watermark {
    display: none;
}
/* navbar start */
.navbar{
    background: transparent;
    backdrop-filter: blur(8px);
}
.navbar .nav-link{
    color: white;
    font-weight: 400;
    font-size: 18px;
}
.navbar .nav-link:hover{
    color: #e5e5e5;
    font-weight: 500;
    font-size: 18px;
}
.navbar .nav-underline .nav-link.active{
    border-bottom: 2px solid white;
    color: white;
}
/* navbar end */
/* home start */
#home{
    background: #010017;
    background: linear-gradient(180deg, rgba(1, 0, 23, 1) 0%, rgba(9, 9, 121, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
/* home end */
/* about start */
#aboutme{
    background: #020024;
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 212, 255, 1) 100%);
}
#aboutme h1, #aboutme p{
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
#aboutme h5 a{
    text-decoration: none;
    color: white;
}
#aboutme h5 a:hover{
    color: yellow;
}
#aboutme img{
    width: 300px;
    height: auto;
}
.rounded-circle{
    text-shadow: 200px 200px 50px white;
}
#portfolio {
    background: #020024;
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 79%, rgba(0, 212, 255, 1) 100%);
}
#portfolio h1, #portfolio p{
    text-shadow: 2px 2px 4px #000000;
}
#portfolio img{
    width: 10%;
    height: auto;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px black;
    transition: transform 0.3s ease; /* Smooth animation over 0.3s */
    cursor: pointer; /* Changes cursor to a hand pointer */
}
#portfolio img:hover{
    transform: scale(1.1); /* Scales up the image by 20% on hover */
}
#blog{
    background: #242538;
}
#contact{
    background: #090979;
}
#contact .container .row .col-md span > a > .bi-instagram {
    transition: transform 0.3s ease; /* Smooth animation over 0.3s */
    cursor: pointer; /* Changes cursor to a hand pointer */
}
#contact .container .row .col-md span > a > .bi-instagram:hover {
    color: #feda75;
}
#contact .container .row .col-md span > a > .bi-youtube:hover {
    color: #FF0000;
}
#contact .container .row .col-md span > a > .bi-type-bold:hover {
    color: #FF5722;
}
#contact .container .row .col-md span > a > .bi-github:hover {
    color: #24292e;
}
#contact .container .row .col-md span > a > .bi-dribbble:hover {
    color: #EA4C89;
}
#contact .container .row .col-md span > a > .bi-google-play:hover {
    color: #4285F4;
}
#contact .img-contact img{
    /* clip-path: inset(100px 100px 10px 50px); */
    /* clip-path: circle(50px); */
    /* clip-path: ellipse(70px 200px); */
    /* clip-path: polygon(0 0, 150px 150px, 300px 300px, 0 600px); */
    /* clip-path: polygon(0 0, 100% 0, 50% 100%); */
    clip-path: polygon(5% 15%, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%);
}
#contact h2{
    text-align: left;
}
#footer {
    background: #020024;
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 79%, rgba(0, 212, 255, 1) 100%);
}
#footer col-sm h3{
    font-weight: 600;
    font-size: 20px;
}
#footer ul >li{
    list-style: none;
    font-size: 18px;
    padding: 5px;
}
#footer ul >li>b{
    font-size: 24px;
    color: white;
    text-decoration: none;
}
#footer ul >li>a{
    color: white;
    text-decoration: none;
}
        #footer ul >li>a:hover{
            color: yellow;
            text-decoration: none;
        }
        #footer ul >li>a::before{
            content: ">";
            font-family: "Poppins", sans-serif;
            font-size: 12px;
            /* color: yellow; */
            margin-right: 10px;
        }
        #footer hr{
            border-top: 1px solid white;
        }
        .copyright-item small {
        display: flex;
        height: 30px;
        padding: 0;
        margin: 0;
        justify-content: space-around;
        align-items: center;
        }
        .copyright small{
            font-size: 16px;
        }
        /* Hidding sections under 960px width */
        @media screen and (max-width: 600px) {
            /* Mengubah warna bingkai (border) tombol */
            .navbar-toggler {
                border-color: white !important;
            }
            .jumbotron{
                padding: 50px;
            }
            .jumbotron h1{
                font-size: 64px;
                font-weight: 100;
            }
            .jumbotron p{
                font-size: 24px;
            }
            #aboutme img{
                width: 85%;
                height: auto;
            }
            #aboutme .order-last, #blog .col-md, #contact .col-md, #portfolio .col-md{
                margin: 0 auto;
                padding: 40px;
            }
            #portfolio img{
            width: 25%;
            height: auto;
            margin: 0 auto;
            padding: 2px;
            border-radius: 10px;
            box-shadow: 2px 2px 10px black;
            transition: transform 0.3s ease; /* Smooth animation over 0.3s */
            cursor: pointer; /* Changes cursor to a hand pointer */
            }
            #portfolio img:hover{
                transform: scale(1.1); /* Scales up the image by 20% on hover */
            }
            #blog h1{
                font-size: 64px;
                font-weight: 100;
            }
            #blog p{
                font-size: 24px;
            }
            #contact{
                background: #090979;
                margin-top: 200px;
            }
            #contact h1{
                font-size: 52px;
                font-weight: 100;
            }
            #contact h2{
                text-align: left;
            }
            #contact .img-contact img{
                width: 90%;
                height: auto;
            }
            #contact p{
                font-size: 24px;
            }
            #footer ul >li{
                font-size: 24px;
                padding: 10px;
            }
            .copyright small{
                font-size: 14px;
            }
            .hide-on-responsive{
                display: none;
            }
        }

        #fp-nav ul li a span, 
        .fp-slidesNav ul li a span{
            background-color: white;
        }
        .actions{
            position: absolute;
            z-index: 999;
            top: 40px;
            left: 50px;
        }
        .actions li{
            display: inline-block;
        }
        .actions button {
            padding: 0.93em 1.87em;
            background: #35495e;
            border-radius: 5px;
            border: 0;
            color: #fff;
            margin: 7px;
            font-size: 15px;
            cursor: pointer;
        }

        .actions button:hover {
            background: #fff;
            color: #35495e;
        }