@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --AccentColor: #5BADFF;
    --SecondaryColor: #8491A0;
    --PrimaryColor: #ffffff;
    --CardColor: #2a2a2a;
    --BackgroundColor: #161513;
    --LinearGradient: linear-gradient(116deg, rgba(255, 134, 96, 1) 0%, rgba(201, 90, 181, 1) 48%, rgba(154, 51, 255, 1) 100%);
    --Orange-Gradient: linear-gradient(116deg, rgba(255, 134, 96, 1) 0%, rgba(255, 96, 96, 1) 48%, rgba(255, 51, 51, 1) 100%);
}

body {
    background-color: var(--BackgroundColor);
    color: var(--PrimaryColor);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
}

/* Start of Header */

/* Start of Navbar */
header nav {
    background-color: var(--CardColor);
    scroll-padding-top: 5rem;
}

.BtmFocColor {
    border: var(--PrimaryColor) 3px solid !important;
    background: var(--SecondaryColor) !important;
}

nav .listStyle {
    border-radius: 0.6rem;
    color: var(--PrimaryColor);
    transition-duration: 0.2s;

}

nav .listStyle:hover {
    background-color: hsla(0, 0%, 100%, 0.5);
    border: var(--AccentColor) 3px solid;
    border-radius: 0.6rem;
    color: var(--PrimaryColor) !important;

}

.listStyle.active {
    background-color: var(--PrimaryColor);
    border: var(--AccentColor) 3px solid;
    border-radius: 0.6rem;
    color: var(--AccentColor);
    font-weight: 900;
}

/* End of Navbar */
.DanyName {
    font-family: "Bitcount Grid Double", system-ui;
}

.gradientText {
    background: var(--LinearGradient);
    background-clip: text;
    color: transparent;

}

.BorderColor {
    border-color: var(--AccentColor) !important;
    background: var(--LinearGradient) !important;
}

/* End of Header */
/* Start AboutMe */
.EmailHover:hover {
    color: #ffffff !important;
    transition-duration: 0.2s;
}

.LinkInHover:hover {
    color: #0072b1 !important;
    transition-duration: 0.2s;
}

.GitHubHover:hover {
    color: #ffffff !important;
    transition-duration: 0.2s;
}

.WhatsAppHover:hover {
    color: #25D366 !important;
    transition-duration: 0.2s;
}

/* End AboutMe */
/* Start of Tools */
.Tools i p {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.HtmlColor {
    color: #F06529 !important;
}

.CssColor {
    color: #2965F1 !important;
}

.JsColor {
    color: #F0DB4F !important;
}

.ReactColor {
    color: #61DBFB !important;
}

.NodeColor {
    color: #68A063 !important;
}

/* End of Tools */
/* Start of Projects */
.ProjectHeading {
    background: var(--Orange-Gradient, linear-gradient(80deg, #FF8660 0%, #D5491D 100%));
    background-clip: text;
    color: transparent;
}

.ProjectIframe {
    border: none;
    width: 100%;
    height: 23rem;
    border-radius: 0.5rem;
}

.ProjectIframe iframe {
    height: 100%;
}

.Posistion {
    position: relative;
    top: -1rem;
}

/* End of Projects */

/* Start of Gallery */
.Gallery {
    padding: 3rem 0;
}

.gallery-item {
    background-color: var(--CardColor);
    border: 1px solid rgba(90, 173, 255, 0.3);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.gallery-item:hover {
    border: 2px solid var(--AccentColor);
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(90, 173, 255, 0.4) !important;
}

.gallery-item img {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item .card-body {
    background-color: var(--CardColor);
}

.gallery-item .card-title {
    color: var(--AccentColor);
    font-weight: 600;
}

.gallery-item .card-text {
    color: var(--SecondaryColor);
    font-size: 0.9rem;
}

/* End of Gallery */