/* --------------------------------------------------
       Color palette (CSS variables) used across the site
       - Keep colors here so they can be referenced consistently
       -------------------------------------------------- */
    :root {
        --black: #000000;
        --bg-dark:rgb(31 39 30);
        --bg-gradient-start: #000000;
        --bg-gradient-end: #545454; /* rgba(84,84,84) */
        --text: #ffffff;
        --muted: #dddddd;
        --light-grey: #bbbbbb;
        --box-grey: #535353;
        --purple: #7b43a9;
        --green-bright: #3cdf54; /* used for caret/selection */
        --green: #3cdf54; /* used on buttons */
        --green-2: #2dc454; /* used for hover/scrollbar */
        --green-dark: #082d05; /* selection text color */
        --green-soft: #c9ffc0; /* soft green for badges/text */
        --accent-yellow: #3cdf54; /* nav underline gradient */
        --btn-bg: #042d0e;
        --glass-bg: rgba(0,0,0,0.45);
        --glass-border: rgba(255,255,255,0.04);
        --scrollbar-thumb: var(--green-2);
        --scrollbar-track: #1f1f1f;
    }

 h1, h2, h3, h4, h5, h6, a, li, span, div {
            font-family: 'Ubuntu Mono', monospace !important;
        }

        p{
          font-family: barlow, sans-serif !important;
        }

        /* Base Wireframe Style */
        body {
            color: #ffffff; /* White text */
            overflow-x: hidden; /* Prevent horizontal scrolling */
            margin: 0;
        }
        
        html {
            overflow-x: hidden; /* Prevent horizontal scrolling */
        }

        /* Custom max-width container */
        .container-1512 {
            max-width: 1512px;
            padding-left: var(--bs-gutter-x, 12.5rem);
            padding-right: var(--bs-gutter-x, 12.5rem);
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Prevent Bootstrap row negative margins from causing overflow */
        .container-1512 > .row,
        .container-1512 .row {
            margin-left: 0;
            margin-right: 0;
        }


        /* Hero Text Style */
        .hero-text {
            font-size: 3.5rem; 
            font-weight: 400;
            line-height: 1.2;
        }
        
        /* Project Boxes (The light grey rectangles) */
        .project-box {
            background-color: #535353; /* Light grey fill */
            height: 510px; 
            margin-bottom: 24px; 
            overflow: hidden; /* Keep zoomed image inside rounded box */
            border-radius: 2px; /* consistent rounding */
            position: relative; /* needed for overlay tint */
        }

        /* About me circle (The light grey circle) */
        .about-circle {
            width: 100%;
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            animation: aboutGrayscale .4s ease-in-out infinite alternate;
            -webkit-animation: aboutGrayscale .4s ease-in-out infinite alternate;
            will-change: filter;
        }

        @keyframes aboutGrayscale {
            from { filter: grayscale(0%); -webkit-filter: grayscale(0%); }
            to { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
        }

        @-webkit-keyframes aboutGrayscale {
            from { -webkit-filter: grayscale(0%); }
            to { -webkit-filter: grayscale(100%); }
        }
        
        /* 'View All' Button (The purple block) */
        .btn-view-all {
            background-color: #7b43a9; /* Purple background */
            border: none;
            color: #ffffff;
            padding: 8px 30px;
            text-transform: uppercase;
            font-size: 0.9rem;
            border-radius: 0; /* Boxy look */
            display: inline-block; /* Ensure it respects width/padding */
        }

        /* Navbar link colors to match the subtle dark theme */
        .navbar-dark .navbar-nav .nav-link {
            color: #dddddd; 
            width: max-content;
        }

        /* Section Spacing */
        .section-padding {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
        
        .section-title {
            margin-bottom: 2rem;
        }

        /* Glass effect for the navbar */
        .navbar-glass {
            position: fixed; /* Overlay content from the start */
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            background:rgb(0 0 0 / 45%); /* semi-transparent dark */
            backdrop-filter: blur(8px) saturate(130%);
            -webkit-backdrop-filter: blur(8px) saturate(130%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            z-index: 10000; /* Ensure navbar sits above all overlays */
            backface-visibility: hidden; /* help prevent subpixel rendering artifacts */
    margin: 0 auto;
        border-radius: 0px 0px 4px 4px;
            width: fit-content;
        }



        /* Animated nav-links (excluding buttons like Contact) */
        .navbar-glass .nav-link:not(.btn) {
            position: relative;
            color: #dddddd;
            transition: color 220ms ease; /* soft color transition to green on hover */
            padding-bottom: 6px; /* spacing retained (underline removed) */
        }

        .navbar-glass .nav-link:not(.btn)::after {
            display: none; /* underline removed; using color change on hover instead */
        }

        .navbar-glass .nav-link:not(.btn):hover,
        .navbar-glass .nav-link:not(.btn):focus {
            color: var(--green); /* soft green on hover */
            transform: none; /* avoid movement; only color changes */
        }

        /* Selection and caret colors (green) */
        ::selection { background: rgba(60, 223, 84, 0.18); color: var(--green); }
        ::-moz-selection { background: rgba(60, 223, 84, 0.18); color: var(--green); }

        /* Footer links with same hover effect as navbar */
        footer a {
            transition: color 220ms ease;
        }

        footer a:hover,
        footer a:focus {
            color: var(--green) !important;
        }

        /* Make caret (text cursor) green for inputs and editable regions */
        input, textarea, [contenteditable], .ml11 .letters { caret-color: var(--green); }

#futuristicCanvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; /* Behind content but above body background */
    pointer-events: none; /* Ensure touch/scroll gestures reach page content */
}

/* Example content styling to see the effect better */
.content {
    position: relative;
    z-index: 10;
    color: #ffffff; /* Bright Orange for headings */
    text-align: center;
    mix-blend-mode: screen; 
        display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    height: 100vh;
    margin-bottom: 4rem;
}

/* Hero image parallax */
.img-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: -1;
    opacity: 0.20;
    pointer-events: none;
}

/* Projects scroller - scroll-snap (4 visible, snap one by one) */
.projects-scroller { width: 100%; }
.projects-controls { display:flex; justify-content:center; gap:0.5rem; margin-top: 1rem; }
.projects-controls .btn { min-width: 44px; }
.projects-track { display:flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-snap-stop: always; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 0 0.5rem; cursor: grab; }
.projects-track:focus { outline: none; }
.projects-track.dragging { cursor: grabbing; }
.projects-track.dragging * { user-select: none; }
.project-slot { flex: 0 0 25%; max-width: 25%; box-sizing: border-box; scroll-snap-align: start; }
.project-slot .project-box {  height: 430px; }
/* Hide native scrollbar visually while keeping scroll functionality */
.projects-track { scrollbar-width: none; -ms-overflow-style: none; }
.projects-track::-webkit-scrollbar { display: none; }

/* Ensure all page content sits above the canvas */
.site-content {
    position: relative;
    z-index: 10;
}

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05; /* Control the visibility/intensity */
  /* No animation needed here, the JS handles the frame update */
}

.ml11 {
  font-weight: 700;
  font-size: 3.5em;
}

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #fff;
  transform-origin: 0 50%;
}

.ml11 .line1 { 
  top: 0; 
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}







.project-box {border-radius: 4px; }

/* Restores taller project boxes where needed (graphic scroller, etc.) */
.project-box-tall { height: 460px; }


        .project-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), filter 360ms cubic-bezier(.2,.9,.3,1);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, filter;
    margin: 0 auto;
    text-align: center;
    display: flex;
}

.project-box-folio{
    width: 80% !important;
}


body{
  margin: 0;
  --x: calc(var(--posX, 0) * 1px);
  --y: calc(var(--posY, 0) * 1px);
}



.btn-primary {
--bs-btn-color: var(--green);
    --bs-btn-bg: var(--btn-bg);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--green-2);}  



.btn:hover {
    color: var(--green);
    background-color: #000000;
    border-color: var(--green);
}  





/* Custom main scrollbar: green thumb, dark gray track */
:root {
  --scrollbar-thumb: #2dc454;
  --scrollbar-track: #1f1f1f;
}

/* Firefox */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit browsers */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 8px; border: 3px solid rgba(0,0,0,0.25); }
::-webkit-scrollbar-thumb:hover { background-color: var(--green-2); }






.crt-screen {
  /* Set your background color, font, and text-shadow for the glow */
    background-color: #111111;
      position: relative;
  /* Add other retro effects like blur or border-radius here */
}

.scanline-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* Allows clicks to pass through to the content */
  
  /* The Magic: repeating linear gradient for the scanlines */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 57, 0, 0.1) 0px, /* Semi-transparent black line start */
    rgba(17, 80, 0, 0.4) 1px, /* Semi-transparent black line end (the line thickness) */
    transparent 2px, /* Gap between lines start */
    transparent 4px /* Gap between lines end (the gap thickness) */
  );
  /* Adjust the 4px to control the line and gap size */
  background-size: 100% 8px;
}



.section-title{

    font-weight: bolder;
    font-size: 8rem;
    text-align: center; display: flex;
    justify-content: center;
    flex-direction: column;   
        color: #00000000;   
    -webkit-text-stroke: 1px var(--green);
      transition: 1s ease-out;
 user-select: none;
 margin-bottom: 0px;
 text-transform: uppercase;

}

.section-title:hover { 
    color: var(--green);

}  


.project-slot{
transition: .3s ease-in-out;
        padding: 16px;
    border: 1px solid transparent;
    border-radius: 4px;

} 
.project-slot:hover{
        padding: 16px;
    border: 1px solid var(--green);
    border-radius: 4px;
    background: black;
} 

    /* Utility: override remaining inline legacy hexes */
    /* This captures leftover inline styles and maps them to the CSS variables */
    [style*="#c9ffc0"] { color: var(--green-soft) !important; }
    [style*="#1abb00"] { color: var(--green) !important; }
    [style*="#1cf625"] { color: var(--green) !important; }
    [style*="#15f421"] { background: var(--green) !important; color: black !important; }
    [style*="#00ff1b"] { -webkit-text-stroke-color: var(--green) !important; }


    .me-3 {
    margin-right: 1rem;
    margin-left: 1rem;
}

.navbar-brand {
    margin-left: 24px;
}


.navbar-glass .nav-link:not(.btn):hover
{

    transform: translateY(0px);
    color: var(--green);
    
}

.text-muted {    
    color: white !important;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(33 33 33) !important;
}

/* Consolidated inline styles moved into CSS */
.text-accent { color: var(--green); }
.navbar-glass { padding-top: 8px !important; padding-bottom: 8px !important; }
.navbar-glass .container-1512 { padding-left: 0; padding-right: 0; }

.content { overflow: hidden; }
.content h1 { font-size: 52px; }
.hero-divider { display: block; text-align: center; letter-spacing: 6px; color: var(--green); }
.hero-subtitle { color: #c3c3c3; text-transform: uppercase; letter-spacing: 8px; text-shadow: 1px 3px 4px #000000c4; }
.hero-media { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; }

dotlottie-wc { width: 150px; height: 150px; }

#about-me-section { background: linear-gradient(360deg, #000000, transparent); }
#about-me-section .row.align-items-start { align-items: center !important; flex-wrap: nowrap; }
#about-me-section .section-title { text-align: left; }
#about-me-section p { font-family: barlow, sans-serif !important; font-weight: 100; font-size: 21px; }
.about-circle { overflow: hidden; border-radius: 6px; }
.about-circle img { width: 100%; }
.about-placeholder { display: block; background: red; width: 100%; height: 100%; }

.btn-primary.btn-lg { font-weight: 400; font-size: 1rem; text-transform: uppercase; border-radius: 2px !important; }
.btn-ctrl { height: 42px; border-radius: 2px !important; }
footer{    z-index: 229;
    position: relative;
}
footer .d-flex a { font-size: 1.5rem; }
.navbar-brand.footer-brand-bg { position: absolute; right: -34px; font-size: 12rem !important; mix-blend-mode: luminosity; opacity: .08; bottom: -6rem; filter: blur(8px); pointer-events: none; }

.btn-view-all-large {
    width: 72%; height: 400px; display: flex; flex-direction: column; flex-wrap: nowrap;
    align-content: center; justify-content: center; align-items: center;
    margin: auto; border-radius: 6px; margin-bottom: 6rem; background: #504f4f;
}

.quote { padding: 6rem 13rem; display: flex; justify-content: space-between; align-items: center; }
.quote-block { width: 300px; height: 300px; display: block;    opacity: .8; }
.quote h3 { width: 60%; }
.badge-inline { padding: 1px 4px; display: inline; background: var(--green); color: black; }

.projects-scroller { width: 100%; padding-bottom: 8rem; }

/* Section labels and descriptions */
.section-label {    font-weight: 400; font-size: .9rem; color: var(--green); text-align: center; display: block; text-transform: uppercase; letter-spacing: 8px; position: relative; margin-bottom: 2rem; }
.section-description {     font-size: 21px;
    text-align: center;
    width: 64%;
    margin: 0 auto;
    margin-bottom: 4rem;
    background: #000000;
    font-weight: 100;
    display: block;
    padding: 15px 24px;
    border-radius: 6px;
    color: #ffffff;
    height: fit-content;
}

.divider-pipe { font-weight: 900; }

/* Project info blocks */
.project-box-info { display: flex; align-items: start; flex-direction: column; justify-content: flex-end; background: none; border-radius: 0; }
.project-title { margin-bottom: 16px; }
.project-badge { font-size: 1rem; color: var(--green-soft);    margin-top: 12px; display: block; }
.project-text { color: #c4c4c4; font-size: 18px; }

/* Utility padding for section containers */
.pt-section { padding-top: 120px; }

.projects-track{
    margin-bottom: 2rem;
}
/* Mobile ordering: place text/info above images on small screens */
@media (max-width: 767px) {

 
    .order-mobile-1 { order: 1 !important; }
    .order-mobile-2 { order: 2 !important; }
    .order-mobile-3 { order: 3 !important; }
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}


/* About section: center mobile image */
.about-circle-mobile {
    display: flex;
    justify-content: center;
}

/* ========================================
   SCROLL REVEAL: Fade-in sections and project rows on scroll
   ======================================== */

section,
.row {
    opacity: 0;
    transition: opacity 1s ease-out;
}

section.is-visible,
.row.is-visible {
    opacity: 1;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    section,
    .row {
        opacity: 1;
        transition: none;
    }
}

footer .d-flex a {
    margin-right: 12px
}


/* ========================================
   MEDIA QUERIES
   ======================================== */

/* Responsive project slots */
@media (max-width: 991px) {
  .project-slot { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .project-slot .project-box { height: 220px; }
}

@media (max-width: 767px) {

   .h3, h3{
    font-size: 1.3rem;
    }

  .h4, h4 {
    font-size: 16px;}

.content h1{

    font-size: 30px;
}

.hero-subtitle {
    letter-spacing: 5px;
    font-size: 11px;
}

.hero-divider {
    letter-spacing: 7px;
    font-size: 10px;
}

.quote {
    padding: 6rem 1rem;
    flex-direction: column;
}

.quote h3 {
    width: 94%;
    margin-bottom: 36px;
}


.quote-block {
    margin-bottom: 2rem;
}


.hero-divider.hero{
    margin-bottom: 1rem;
}

.section-description{
         width: 100%;
        margin-bottom: 2rem;
        font-size: 17px;
    }
.section-title {
    font-weight: bolder;
    font-size: 5rem;
}
.project-box{
        height: auto;
}


.project-box.project-box-img img{
    height: 300px;
}

.hero-divider{
    margin-bottom: 7rem;
}
.btn-view-all-large {
        width: 92%;
        margin: 0 auto;
        margin-bottom: 6rem;
    }

#about-me-section .row.align-items-start {
    align-items: center !important;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
}

.about-circle {
    width: 50%;
}

#about-me-section p {
        color: #ffffff;
    font-size: 18px;
}

.project-badge {
    font-size: 13px;
    color: var(--green-soft);
    display: block;
}

.project-info-pad h5{
    font-size: 16px;
}

.img-hero {
    width: 210%;
height: 100vh; }

#about-me-section .section-title {
    text-align: center;
}


.container-1512 {
    padding-top:0px;
  }

  .project-slot { flex: 0 0 50%; max-width: 50%; }
  .project-slot .project-box { height: 200px; }
  
  /* Apply hover style by default on mobile */
  .project-slot {
    padding: 16px;
    border: 1px solid var(--green);
    border-radius: 4px;
    background: black;
  }
  
  .container-1512 {
    max-width: 1512px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .project-text {
    font-size: 15px;
    text-align: justify;
}

    .show-mobile {
        text-align: center;
    }
    
    /* Full width navbar on mobile */
    .navbar-glass {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Align logo left and burger right on mobile */
    .navbar-glass .container-1512 {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .navbar-glass .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100%;
        margin: 0 !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Remove Bootstrap gutter to prevent horizontal overflow */
    .navbar-glass .row.gx-3 { 
        --bs-gutter-x: 0 !important; 
    }
    
    .navbar-glass .col-auto {
        flex: 0 0 auto !important;
        padding: 0 !important;
    }
    
    .navbar-glass .col {
        flex: 0 0 auto !important;
        padding: 0 !important;
        text-align: right !important;
        width: 100%;
    }

    .navbar-collapse {
    text-align: center;
}
    .d-inline-flex {
    align-items: center;
    }

    
    .navbar-toggler {
        margin: 0 !important;
        margin-left: auto !important;
        border: none;
        padding: 8px;
        position: relative;
        width: 40px;
        height: 40px;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }
    
    /* Hide default Bootstrap icon */
    .navbar-toggler .navbar-toggler-icon {
        display: none;
    }
    
    /* Custom burger icon container */
    .burger-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        position: relative;
    }
    
    /* Burger lines */
    .burger-line {
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease;
        display: block;
        transform-origin: center;
    }
    
    /* X transformation when expanded */
    .navbar-toggler[aria-expanded="true"] .burger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .navbar-toggler[aria-expanded="true"] .burger-line:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .navbar-toggler[aria-expanded="true"] .burger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

        .navbar-brand {
        margin-left: 0 !important;
        position: absolute;
        top: 5px;
    }

    li.nav-item{
        height: 20vh;
    display: flex;
    align-content: center;
    align-items: center;
    }

    .navbar-glass .nav-link:not(.btn){
  height: 23vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;

    }
  
    .navbar-toggler:focus {
    box-shadow: none !important;
}

/* Hide decorative footer brand on mobile */
.navbar-brand.footer-brand-bg {
top: revert-layer;
}

  .btn-primary.btn-lg {
    font-size: 0.8rem;
    width: 100%;
}

}

/* Image hover: grayscale + green tint applied directly to the image */
@media (hover: hover) and (pointer: fine) {
  .project-box img:hover {
    /* grayscale then tint to green via sepia + hue-rotate */
    filter: grayscale(100%) contrast(0.95) brightness(0.95) sepia(0.25) hue-rotate(85deg) saturate(1.45);
    transform: scale(1.04);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .project-box img { transition: none !important; }
  .project-box img:hover { transform: none !important; filter: none !important; }
}

/* ========================================
   SOCIAL MEDIA TOOLTIPS
   ======================================== */
.social-icon {
    position: relative;
    display: inline-block;
        border: 1px solid transparent;

}

.social-icon:hover {
    border: 1px solid var(--green);
    border-radius: 4px;
}

.social-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--green);
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 1000;
    margin-bottom: 8px;
    font-family: 'Ubuntu Mono', monospace;
}

.social-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Tooltip arrow */
.social-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--green);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 1000;
    margin-bottom: 2px;
}

.social-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Lottie animation container */
dotlottie-wc {
    width: 300px;
    height: 300px;
}

/* Social media icon container */
.social-icon-container {
    height: 50px;
    background: black;
    display: flex;
    align-content: center;
    width: 50px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

/* Social media icon images */
.social-icon-container img {
    height: 80%;
}

/* Footer copyright row */
.footer-copyright-row {
    opacity: 1;
}
  

/* Remove padding from all Bootstrap column classes */
[class^="col-"],
[class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.projects-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0px 16px;
}

.projects-track {
    margin: 2px 16px;
}

.btn-primary.btn-lg{
    display: flex;
    align-items: center;
    justify-content: center;  
}

.logo-container{
    background: white;
    padding: 16px 16px;
    text-align: center;
    margin: 0 auto;
    display: block;
    width: auto;
    border-radius: 4px;
    margin-bottom: 1rem;
}