html {
    scroll-behavior: smooth;
}

body {
    /* No padding-top needed here, as the fixed navbar does not overlay main content. */
}

.hero {
    height: 100vh;
    background: url("../img/hero.jpg") no-repeat center center;
    background-size: cover;
    position: relative;
}

.hero .social-icons {
    position: absolute;
    top: 100px;
    right: 100px;
    z-index: 10;
    display: flex;
    gap: 5px;

}

.hero .social-icons a i {
    font-size: 36px;
    color: white;
}

/* Media query for mobile devices (screens up to 768px wide) */
@media (max-width: 768px) {
    .hero {
        /* On smaller screens, prioritize the top part of the image.
           This helps keep faces or important elements at the top visible when the screen is tall and narrow. */
        background-position: 85% top;
        /* If the most important content of your hero.jpg is at the bottom, you could use 'center bottom' instead. */
    }

    .hero .social-icons {
        top: 100px; /* Adjust social icons to be closer to the top edge */
        right: 20px; /* Adjust social icons to be closer to the right edge */
    }
}

.portfolio-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.navbar .nav-link.active {
    color: #ff6600 !important;
    font-weight: bold;
}

/* --- Section for technology and software icons (Design/Coding) --- */

.tech-icons-grid-only {
    display: grid;
    /* minmax(80px, 1fr) - minimum column width 80px, rest distributed evenly */
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    /* Spacing between icons */
    margin-top: 20px;
    justify-content: center;
    /* Center if there are not enough columns to fill the row */
}

.tech-icon-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Icon above the skill bar */
    align-items: center;
    /* Horizontally center content */
    text-align: center;
    padding: 5px;
    /* Reduced padding for more compact tiles */
    border-radius: 8px;
    background-color: #f8f9fa;
    /* Light background for the card */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Hover animation for the card */
}

/* Corrected "un-nested" rules for skill level bar/stars opacity */
.tech-icon-wrapper .skill-level-bar,
.tech-icon-wrapper .skill-level-stars {
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Smooth appearance of the bar */
}

.tech-icon-wrapper:hover {
    transform: translateY(-5px);
    /* Lift the card */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* More prominent shadow */
}

/* Corrected "un-nested" rules for skill level bar/stars opacity on hover */
.tech-icon-wrapper:hover .skill-level-bar,
.tech-icon-wrapper:hover .skill-level-stars {
    opacity: 1;
}

/* Common styles for DevIcons (<i>), SVG (<svg>), and PNG images (<img>) */
.tech-icon-wrapper i,
.tech-icon-wrapper svg,
.tech-icon-wrapper img {
    /* Fixed pixel size for consistent visual sizing across different icon types */
    width: 40px;
    height: 40px;
    font-size: 40px;
    /* For <i> elements (font icons) */
    padding: 0;
    border-radius: 0;
    margin-bottom: 5px;
    /* Spacing between icon and skill bar */

    /* Common animations for filter, opacity, color, and transform */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;

    /* Default state: grayscale and slightly transparent */
    filter: grayscale(100%);
    opacity: 0.7;

    /* For PNG images - ensure they are not distorted */
    object-fit: contain;
}

/* Common effects on hover for all icon types */
.tech-icon-wrapper:hover i,
.tech-icon-wrapper:hover svg,
.tech-icon-wrapper:hover img {
    filter: grayscale(0%);
    /* Removes grayscale */
    opacity: 1;
    /* Full opacity */
}

/* --- Specific styles for different icon types --- */

/* 1. DevIcons (<i>) - color change via 'color' property */
/* Explicit color settings for DevIcons on hover (higher specificity) */
.tech-icon-wrapper:hover i.devicon-python-plain {
    color: #3776AB;
}

.tech-icon-wrapper:hover i.devicon-csharp-plain {
    color: #9B4F96;
}

.tech-icon-wrapper:hover i.devicon-html5-plain {
    color: #E34F26;
}

.tech-icon-wrapper:hover i.devicon-css3-plain {
    color: #1572B6;
}

.tech-icon-wrapper:hover i.devicon-bootstrap-plain {
    color: #7952B3;
}

.tech-icon-wrapper:hover i.devicon-sqlite-plain {
    color: #003B57;
}

.tech-icon-wrapper:hover i.devicon-git-plain {
    color: #F05032;
}

.tech-icon-wrapper:hover i.devicon-github-plain {
    color: #181717;
}

.tech-icon-wrapper:hover i.devicon-java-plain {
    color: #007396;
}

.tech-icon-wrapper:hover i.devicon-flask-plain {
    color: #000000;
}


/* 2. SVG icons (<svg>) */

/* Default state for ALL SVGs: ensure no unwanted stroke. */
.tech-icon-wrapper svg {
    stroke: none;
    color: initial !important;
}


.autocad-icon,
.revit-icon,
.hsbcad-icon {
    color: #333 !important;
}

.autocad-icon path,
.revit-icon path,
.autocad-icon circle,
.revit-icon circle,
.autocad-icon rect,
.revit-icon rect,
.autocad-icon polygon,
.revit-icon polygon,
.autocad-icon polyline,
.revit-icon polyline,
.autocad-icon line,
.revit-icon line,
.autocad-icon ellipse,
.revit-icon ellipse {
    fill: currentColor !important;
    stroke: none !important;
}

.tech-icon-wrapper:hover .autocad-icon {
    color: #bf2223 !important;
}

.tech-icon-wrapper:hover .revit-icon {
    color: #186bff !important;
}


/* 3. PNG images (<img>) - do not change color, but scale */
/* Hover effect for PNG images */
.tech-icon-wrapper:hover img {
    transform: scale(1.1);
}


/* --- Styles for skill progress bar --- */
.skill-level-bar {
    width: 80%;
    /* Width of the entire background bar within tech-icon-wrapper */
    height: 6px;
    background-color: #e0e0e0;
    /* Color of the empty bar */
    border-radius: 3px;
    overflow: hidden;
    /* Ensure fill does not overflow rounded corners */
    margin-top: auto;
    /* Position bar at the bottom of the wrapper (if flex-direction: column) */
}

.skill-level-fill {
    height: 100%;
    /* Default width 0% - the bar is initially empty */
    width: 0;
    /* Smooth animation for filling the bar */
    transition: width 0.6s ease-out;
    /* Default fill color, will be overridden by level-specific colors */
    background-color: #28a745;
}

/* Dynamic widths and colors for fill levels 1-5 (active only on hover) */
.tech-icon-wrapper:hover .skill-level-fill.level-1 {
    width: 20%;
    background-color: #ffc107;
}

/* Yellow for basic */
.tech-icon-wrapper:hover .skill-level-fill.level-2 {
    width: 40%;
    background-color: #ffc107;
}

.tech-icon-wrapper:hover .skill-level-fill.level-3 {
    width: 60%;
    background-color: #fd7e14;
}

/* Orange for intermediate */
.tech-icon-wrapper:hover .skill-level-fill.level-4 {
    width: 80%;
    background-color: #28a745;
}

/* Green for advanced */
.tech-icon-wrapper:hover .skill-level-fill.level-5 {
    width: 100%;
    background-color: #007bff;
}

/* Blue for expert */


/* --- Styles for contact form --- */
.contact-form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}


.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25);
}

.sketchfab-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.sketchfab-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
}


.portfolio-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.portfolio-card .card-body .btn {
    margin-top: auto;
    align-self: center;
}
#cb-cookie-banner { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
    border-radius: 0; 
    display: none; 
}