@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Nova+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Orbitron:wght@400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --secondary: #00bcd4;
    --grey: #080808;
    --navhover: #141414;
    --altText: #8F9094;
    --btn: rgba(255, 255, 255, 0.08);
    --btnHover: rgba(255, 255, 255, 0.16);
}

* {
    font-family: "Inter", serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    background-color: black;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--navhover);
    border-radius: 10px; 
}

::-webkit-scrollbar-track {
    background: var(--grey); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--btnHover); /* Darker shade when hovered */
}
a {
    text-decoration: none !important;
    color: white !important;
}

.brackets {
    color: var(--altText) !important;
}

.navbar {
    position: sticky !important;
    top: 0;
    z-index: 10;
}

.nav {
    border-bottom: 1px solid;
}

.offcanvas-body ul {
    list-style: none;
    line-height: 3;
}

.offcanvas {
    background-color: var(--grey) !important;
}

.items span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    border-radius: 3px;
}

.items span:hover {
    background-color: var(--navhover);
    transition: 0.2s ease-in;
}

.hero {
    padding: 40px 10px !important;
}

.intro h3 {
    font-weight: 600;
    color: var(--secondary);
    font-size: 32px;
}

.intro h1 {
    font-size: 100px;
    line-height: 1;
}

.intro_text p {
    font-weight: 600;
    font-size: 28px;
}

.intro_text span {
    color: var(--altText);
}

.intro_tech p {
    color: var(--altText);
    font-size: 18px;
}

.intro_social button {
    background-color: var(--btn);
    border: none;
    color: white;
    padding: 7px 13px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.intro_social button:hover {
    background-color: var(--btnHover);
    transition: 0.2s ease-in;
}

.about_sec p {
    color: var(--altText);
    text-align: justify;
}

.about_sec span {
    color: var(--secondary);
}

.about_sec h3 {
    font-family: "Ubuntu", serif;
}

.img {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    overflow: hidden;
}

.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projects_text h4 {
    font-family: "Ubuntu", serif;
}

.projects_text p {
    color: var(--altText);
    font-size: 20px;
}

.project_img {
    position: relative;
    width: 100%;
    padding-top: 45.25%;
    overflow: hidden;
    border-radius: 5px;
}

.project_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project_card {
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--grey);
    box-shadow: rgba(255, 255, 255, 0.1) 0px 6px 24px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
}

.badges {
    font-size: 14px;
}

.js {
    background-color: #302E1D;
    color: #FAF085;
    padding: 3px 10px;
    border-radius: 8px;
}

.bs {
    background-color: var(--navhover);
    color: #7431FA;
    padding: 3px 10px;
    border-radius: 8px;
}

.saas {
    background-color: #302428;
    padding: 3px 10px;
    border-radius: 8px;
    color: #FBACB4;
}

.css {
    padding: 3px 10px;
    border-radius: 8px;
    color: #004AE1;
    background-color: var(--navhover);
}

.seperation {
    background-color: var(--altText);
    opacity: 0.3;
    height: 1px;
}

.project_disc {
    color: var(--altText);
}

.contact_info p {
    color: var(--altText);
}

.contact_info span {
    color: var(--secondary);
}

.contact_info {
    padding-bottom: 144px;
}

.footer p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
}

.footer span {
    color: var(--secondary);
}
#footerMessage{
    color: var(--secondary);
}
@media (max-width: 767px) {
    .intro h1 {
        font-size: 65px;
    }

    .intro h3 {
        font-size: 22px;
    }

    .intro_text p {
        font-size: 22px;
    }

    .intro_tech p {
        font-size: 15px;
    }

    .img {
        width: 300px;
        height: 300px;
    }

    .badges {
        font-size: 12px;
    }

    .project_disc {
        font-size: 14px;
    }
    .contact_info {
        padding-bottom: 120px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .intro h1 {
        font-size: 80px;
    }

    .intro h3 {
        font-size: 24px;
    }

    .intro_text p {
        font-size: 24px;
    }

    .intro_tech p {
        font-size: 16px;
    }
}