html,
body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}


html::-webkit-scrollbar {
    width: 0.6vw;
}

html::-webkit-scrollbar-thumb {
    background-color: rgb(200, 0, 255);
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

html::-webkit-scrollbar-track {
    background-color: #cbcbcb;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}


/* navbar */
.navbar {

    background: transparent;
    position: sticky;
    top: 0;
    color: white;
    transition: background-color 0.5s;

}

.fa-bars {
    color: #686868;
}



.navbar.scrolled {
    background: rgba(48, 47, 47, 0.3);
    color: black;
    backdrop-filter: blur(8px);

}


.nav-item a {
    font-weight: 600;
    padding: 0px 25px !important;
    color: inherit !important;
    font-size: 13px !important;
    float: right;
}


.nav-item a:hover {
    color: rgb(95, 3, 121) !important;

    border-radius: 25px;
    transition: 0.5s;
    transform: scale(1.2);
}

@media only screen and (max-width: 996px) {
    .nav-item a {
        padding: 7px !important;
    }

    .img-about {
        width: 90% !important;
    }

    .navbar {
        backdrop-filter: blur(3px);
    }

    .theme {
        margin-top: 2.5%;
    }

    .fa-moon {
        color: #808080 !important;

    }

    .gallery::-webkit-scrollbar {
        height: 5px !important;
    }

    .horizontal-gallery {
        margin-top: 4% !important;
    }

}


.navbar-brand {
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: 3px;
    color: inherit !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* intro  */
.intro {
    height: 100vh;
    background-image: url(Proj_image/Home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 100%;
    z-index: -1;
    background-position: bottom;

}


.header-img {
    width: 250px;
    border-radius:100%;
    border: 3px solid white;

}

.fa-angle-down {
    color: rgb(255, 255, 255);
    opacity: 0.8;
    animation: slide 0.9s ease-in-out infinite;
}


@keyframes slide {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0px, 10px);
    }
}


.fa-brands {
    color: rgb(100, 100, 100);
    transition: 0.4s;
}

.fa-brands:hover {
    color: rgb(95, 3, 121);
    scale: 1.5 !important;
}


.img-about {
    aspect-ratio: 1;
    width: 75%;
    border-radius: 10px;
}


.btn:hover {
    background-color: rgb(95, 3, 121) !important;
    transform: scale(1.1);

}

.btn {
    transition: 0.4s !important;
}


#education {
    background-color: #F2F2F2;
}


/* skill section */
.progress {
    width: 100%;
    height: 6px !important;
    background-color: rgb(135, 133, 133) !important;


}

.progress-bar {
    width: 0%;
    position: relative;
    height: 100%;
    background-color: rgb(95, 3, 121) !important;
    transition: 1s all !important;
    opacity: 1 !important;
}

.hp {
    transition: 1s all !important;
    opacity: 0 !important;
    width: 0 !important;
}


/* project section */
.prjct {

    background-color: black;
    position: relative;
    z-index: 1;
    aspect-ratio: 1000/620;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 2px solid gray;
    cursor: pointer;

}


.prjct img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;

}

.prjct .child {
    aspect-ratio: 1000/620;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
    color: white;
    backdrop-filter: blur(9px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scale: 0;
    transition: 0.4s ease-in-out;
    opacity: 0;


}

.prjct:hover .child {
    scale: 1;
    opacity: 1;
}

.prjct .child a {
    text-decoration: none;
    color: white;
    font-weight: 600;
}

.prjct .child a:hover {
    color: rgb(95, 3, 121);
    scale: 1.05;
    transition: 0.2s;
}


#contact,
#projects,
#services {
    background-color: #F2F2F2;
}

#hire .btn {
    width: 160px;
    height: 60px;

}

.potrait {
    width: 33.75% !important;
}

#education h2,
#skills h2,
#contact h2,
#hire h2,
#services h2,
#projects h2,
#gallery h1 {
    letter-spacing: 3px;
}


/* form focus off */
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #eee !important;
}


/* darkmode */
:root {
    /* darkmode */
    --bg-primary-dark: #272a2d;
    --bg-secondary-dark: rgb(46, 46, 48);
    --text-dark: white;
    --icon-dark: white;
    --bg-tertiary: rgb(95, 3, 121);
}


/* darkmode class */
#about.dark,
#skills.dark,
#hire.dark,
#gallery.dark,
#FOOTER.dark {
    background-color: var(--bg-primary-dark);
    color: var(--text-dark);
}


#education.dark2,
#services.dark2,
#projects.dark2,
#contact.dark2 {
    background-color: var(--bg-secondary-dark);
    color: var(--text-dark);
}


#navbar.dark {
    color: white !important;
}

/* dark light toggle */

.fa-moon {
    color: black;
}

.fa-sun {
    color: #dedede;
}