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

body {
    background-color: black; /* Set the background color to black */
    color: white; /* Set the text color to white for contrast */
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem; /* Add padding to match the previous margin of the header */
}

.header {
    background-color: black; /* Header background color */
    width: 100%; /* Full width */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    padding: 1rem; /* Adjust padding as needed */
}



/* Alternatively, make images with a specific class non-clickable */
.non-clickable-image {
    pointer-events: none; /* Disables clicking on images with this class */
}
.centered-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Full width */
    height: 30vh; /* Fixed height */
    overflow: hidden; /* Hide overflow to maintain the container size */
}

#header-video {
    width: auto; /* Auto width to maintain aspect ratio */
    height: 100%; /* Fixed height */
    object-fit: cover; /* Ensure the video covers the container */
}

#intro-image {
    width: 100%; /* Full width */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    margin: 2rem 0; /* Space above and below the image section */
}

#intro-image img {
    width: 100%; /* Full width of its container */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it does not exceed container width */
    pointer-events: none; /* Make the image unclickable */
    user-select: none; /* Prevent the image from being selected */
}

section {
    margin: 2rem 0; /* Add margin between sections */
    width: 100%;
    max-width: 1200px; /* Max width for content alignment */
    padding: 2rem;
    margin-bottom: 2rem; /* Space between sections */
}

.center.headings {
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em; /* Adjust the size as needed */
    text-align: center;
}

#about-section {
    max-width: 1000px; /* Limit width for better readability */
    margin: 0 auto; /* Center align container */
    padding: 20px; /* Inner padding */
    background: linear-gradient(to bottom, rgba(50, 50, 50, 0.8), rgba(50, 50, 50, 0)); /* Grey-black matte color with fade effect */
    border-radius: 8px; /* Rounded corners for the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #ffffff; /* White text color for contrast */
}

#ab {
    padding: 60px 20px; /* Adequate padding for spacing */
    text-align: center; /* Center align text */
}

.abt {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em; /* Adjust the size as needed */
    margin-bottom: 1.5rem; /* Added spacing between heading and content */
}

.text {
    text-align: center;
    font-family: 'TT Octosquares Trl', sans-serif;
    color: whitesmoke;
    font-size: 1.5em; /* Adjust the size as needed */
}

.quote {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em; /* Adjust the size as needed */
}

.projects {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em; /* Adjust the size as needed */
}

.proCont {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: whitesmoke;
}

.coding {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em;
}

#coding-section {
    margin-top: 2rem;
    width: 100%;
    text-align: center;
}

#coding-profiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
    gap: 8rem;
}

.coding-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
}

.coding-card {
    background-color: #000; /* Pitch black background color */
    padding: 1rem;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    margin-left: -70px;
    margin-right: 70px; /* Initial translation */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    text-decoration: none; /* Remove underline */
}

.coding-card:hover {
    transform: translateY(-5px);
    background-color: #000; /* Maintain pitch black color on hover */
}

.coding-dash {
    border-bottom: none; /* Remove any divider line */
    margin-bottom: 0.5rem;
}

.coding-card-icon img {
    width: 100%; /* Full width within the container */
    height: auto; /* Maintain aspect ratio */
    transition: filter 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.coding-card:hover .coding-card-icon img {
    filter: brightness(1.2); /* Lighten the image on hover */
}

.coding-name h3 {
    margin: 0;
    font-size: 1.2rem;
}

#projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
}

.project-card {
    width: 350px;
    min-height: 320px;
    position: relative;
    background: linear-gradient(145deg, #121212, #181818);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(183, 171, 152, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 8s infinite;
    pointer-events: none;
    z-index: 1;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.8);
    border-color: rgba(183, 171, 152, 0.5);
}

@keyframes shine {
    0% {
        top: -100%;
        left: -100%;
    }
    100% {
        top: 100%;
        left: 100%;
    }
}

.project-title {
    font-family: 'TT Octosquares Trl', sans-serif;
    color: #b7ab98;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

.project-description {
    font-family: 'TT Octosquares Trl', sans-serif;
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

.tech-stack-title {
    font-family: 'TT Octosquares Trl', sans-serif;
    color: #b7ab98;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.project-tag {
    background-color: rgba(183, 171, 152, 0.1);
    color: #b7ab98;
    padding: 0.35rem 0.8rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-family: 'TT Octosquares Trl', sans-serif;
    letter-spacing: 0.5px;
    border: 1px solid rgba(183, 171, 152, 0.2);
}

.project-links {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.github-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #b7ab98;
    background-color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    font-family: 'TT Octosquares Trl', sans-serif;
    font-size: 0.9rem;
    padding: 0.7rem 2rem;
    border: 1px solid rgba(183, 171, 152, 0.4);
    border-radius: 3px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.github-link:hover {
    background-color: rgba(183, 171, 152, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.github-link i {
    font-size: 1.1rem;
}

#skills-section {
    margin-top: 2rem;
    width: 100%;
    text-align: center;
}

.tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 1rem;
}
.tc {
    display: flex;
    flex-wrap: wrap;
    margin-left: 410px;
    margin-top: 1.5rem;
}
.tc:hover {
    filter: brightness(1.3); /* Slightly increase brightness on hover */
    background-color: #000; /* Maintain pitch black color on hover */
}
.tools-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8rem;
    margin-bottom: -1.5rem;
}

.tool-card {
    background-color: #000; /* Pitch black background color */
    padding: 1rem;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    margin-left: 70px;
    margin-right: -70px;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    text-decoration: none; /* Remove underline */
}

.tool-card:hover {
    /*transform: scale(1.05);*/
    filter: brightness(1.3); /* Slightly increase brightness on hover */
    background-color: #000; /* Maintain pitch black color on hover */
}

.tool-dash {
    border-bottom: none; /* Remove the grey line */
    margin-bottom: 0.5rem;
}

.tool-card-icon svg {
    width: 100%; /* Full width within the container */
    height: auto; /* Maintain aspect ratio */
    transition: filter 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.tool-card:hover .tool-card-icon svg {
    filter: brightness(1.2); /* Lighten the SVG logo on hover */
}

.tool-name h3 {
    margin: 0;
    font-size: 1.2rem;
}

.touch {
    text-align: center;
    font-family: 'Stopmotion', sans-serif;
    color: #b7ab98;
    font-size: 2.5em; /* Adjust the size as needed */
}

.contact-icons {
    display: flex;
    justify-content: center; /* Center-aligns the icons horizontally */
    gap: 50px; /* Adjust spacing between icons */
}

.contact-icon {
    text-decoration: none;
    color: whitesmoke; /* Change color as needed */
    font-size: 36px; /* Increase icon size */
}

.contact-icon:hover {
    color: #b7ab98; /* Change color on hover */
}

.fContent {
    text-align: center;
    font-family: 'TT Octosquares Trl', sans-serif;
    color: whitesmoke;
    font-size: 1.5em; /* Adjust the size as needed */
}

footer {
    margin-top: auto; /* Push the footer to the bottom */
    padding: 1rem;
    text-align: center;
    background: linear-gradient(to top, rgba(30, 30, 30, 0.9), rgba(30, 30, 30, 0)); /* Darker grey-black gradient with a subtle fade effect */
    color: white;
    width: 100%;
    max-width: 1200px; /* Max width for alignment */
    margin-top: 2rem; /* Space above footer */
}

/* Media Query for mobile devices */
@media (max-width: 768px) {
    #intro-image img {
        width: 100%; /* Full width on mobile devices */
    }

    .header {
        padding: 0.5rem; /* Reduce padding for mobile devices */
    }

    .centered-video {
        height: 20vh; /* Reduce height for mobile devices */
    }

    .coding-card,
    .tool-card {
        width: 100%; /* Ensure the cards are 314px wide */
        margin: 0 auto 1rem auto; /* Center the cards with auto margins */
    }

    .coding-container,
    .tools-container,
    .contact-icons {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: center; /* Center items horizontally */
        gap: 0.5rem; /* Reduce gap for mobile */
    }

    .project-card {
        width: 100%;
        min-height: 350px;
    }
}