.tracker {
  /* visibility: hidden; */
  position: fixed;
  /* margin-inline-end: auto;  */
  bottom: 0; 
  right: 0;
}

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
.social {
  margin: 0 auto;
  width: auto;
  text-align: inherit;
  /* padding: 10px; */
}

.icon-btn {
  margin-left: auto;
  width: 50px;
  height: 50px;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 30px;
  line-height: 70px;
  border-radius: 45px;
  display: inline-block;
  margin: 4px;
}

.github {
  color: black;
}

.linkedin {
  color: #0077b5;
}

.angellist {
  color: grey;
}

.icon-btn:hover {
  transform: scale(1.10);
  color: #FFFFFF;
}

.linkedin:hover {
  background-color: #0077b5;
}

.angellist:hover {
  background-color: grey;
}

.github:hover {
  background-color: black;
}

/* Buttons - Read Me, Contact Us */

.readme {
  position: relative;
  padding: 11px 35px;
  background: #fff;
  color: #00796b;
  border: 2px solid #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

/* .readme:hover{
  color: white;
  background-color: #00796b;
} */

.contactme {
  position: relative;
  padding: 11px 35px;
  background: none;
  color: #fff;
  border: 2px solid #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  margin-top: 0 !important;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

.contactme:hover{
  color: #00796b;
  background-color: white;
}

/* For desktop - match intro content alignment */
@media (min-width: 993px) {
  .button-container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
    max-width: fit-content;
    margin-left: 0; /* Start from left edge */
    padding-left: 0; /* No extra padding since content has no padding now */
  }
}

/* For mobile - keep centered */
@media (max-width: 992px) {
  .button-container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.buttons {
  display: flex;
  gap: 10px; /* Space between Read More and Contact Me */
}

.social {
  display: flex;
  gap: 10px; /* Space between social icons */
}




/* main body */

/* body-color */



body {
  color: #333;
  font-size: 18px;
}

/* body {
  color: black;
  font-size: 18px;
} */

/* main a -- links */

/* a {
  color: #009688;
} */

a {
  color: #004d40;
}

/* main blockqoute */

/* blockquote {
  border-left: 5px solid #795548;
  color: #795548;
  font-size: 125%;
  font-weight: 400;
  margin: 20px 0;
  padding-left: 1.5rem;
} */

blockquote {
  border-left: 5px solid #795548;
  color: #795548;
  font-size: 125%;
  font-weight: 400;
  margin: 20px 0;
  padding-left: 1.5rem;
}

blockquote * {
  font-size: inherit;
  line-height: inherit;
}

.text-center {
  text-align: center;
}

/* main nav */

nav {
  background: white;
  box-shadow: none;
  height: 0;
}

/* nav {
  background: rgb(149, 126, 212);
  box-shadow: none;
  height: 0;
} */

nav i {
  padding: 0 15px;
  position: relative;
  top: 5px;
}

/* main */

/* main {
  background: url(../../assets/img/bg.png) repeat;
  padding-left: 190px;
} */

main {
  background: url(../../assets/img/bg.png) repeat;
  padding-left: 190px;
}

dl {
  margin-top: 0.5rem;
}

dd {
  display: inline-block;
  font-weight: 500;
  margin-left: 0;
}

dt {
  display: inline-block;
  margin-left: 0.5rem;
}

ul.side-nav {
  width: 190px;
}

ul.side-nav li {
  padding: 0;
}

/* ul.side-nav.fixed a {
  box-sizing: content-box;
  color: rgb(48, 122, 207);
  display: block;
  line-height: 100%;
  padding: 10px 0 12px;
} */

ul.side-nav.fixed a {
  box-sizing: content-box;
  color: rgb(16, 202, 56);
  display: block;
  line-height: 100%;
  padding: 10px 0 12px;
}

ul.table-of-contents li.logo a.active, ul.table-of-contents li.logo a:hover {
  border: none;
  font-weight: 200;
}

/* ul.side-nav.fixed li.logo {
  background-color: #fafafa;
  border-bottom: 1px solid #ddd;
  box-sizing: content-box;
  min-height: 90px;
  padding: 30px 30px 40px;
} */

ul.side-nav.fixed li.logo {
  background-color: #fafafa !important;
  border-bottom: 1px solid #ddd !important;
  box-sizing: content-box !important;
  min-height: 150px !important;
  padding: 25px 20px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}

ul.side-nav.fixed li.logo a {
  font-weight: 200;
  line-height: 100%;
}

ul.table-of-contents li:not(.logo) a.active, ul.table-of-contents li:not(.logo) a:hover {
  background-color: #fafafa;
  border-left: 3px solid;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) a span, ul#slide-out li:not(.logo) a span {
  color: #333 !important;
}


li.logo span {
  display: block;
  font-size: 14px;
}

.brand-logo h1 {
  font-size: inherit;
  line-height: inherit;
  margin: inherit;
  font-weight: inherit;
}

.container {
  width: 95%;
}

h3 {
  font-weight: 200;
  margin-bottom: 60px;
  margin-top: 0;
  padding: 30px 40px;
  text-transform: uppercase;
}

.section {
  padding-bottom: 30px;
  padding-top: 0;
  position: relative;
}

.full-height {
  height: 100vh;
}

/* Original */

/* #intro.section {
  background: url(../../assets/img/white-ai-wallpaper.jpg) no-repeat top center/cover;
  position: relative;
} */

#intro.section {
  background: #a7ffeb repeat;
  position: relative;
}

#intro.section .container {
  color: white;
  font-weight: 200;
  left: 0;
  position: absolute;
  top: 0;
}

/* #intro.section .container *:not(span) {
  font-weight: 300;
  line-height: 150%;
  padding: 0 30px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
} */

#intro.section .container *:not(span) {
  font-weight: 300;
  /* font-weight: 400; */
  line-height: 150%;
  /* padding: 0 0px; */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

#intro.section .underline {
  border-bottom: 5px solid #24305e;
}

#intro.section .teal {
  padding: 0 10px;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.waves-effect.waves-blue .waves-ripple {
  /* The alpha value allows the text and background color
   of the button to still show through. */
  background-color: rgba(33, 150, 243, 0.2);
}

.card {
  margin-bottom: 60px;
}

.card .role {
  font-size: 1.25rem;
  position: absolute;
  right: 38px;
  top: 35px;
}

.card li a {
  margin-right: 0;
  color: #333;
  border-bottom: 2px solid #ffab40;
}

.card li a:hover {
  color: #333;
  font-weight: 500;
}

.card .card-content {
  padding-bottom: 30px;
}

.card .card-content p {
  padding: 5px 0 0;
}

.card h5 {
  font-size: 1.5rem;
  margin-bottom: -0.5rem;
  margin-top: 2rem;
}

.card h6 {
  font-weight: 300;
  letter-spacing: 1px;
  margin-top: 2rem;
  text-transform: uppercase;
}

#experience .card-action {
  background-color: rgba(0, 0, 0, 0.02);
  border: none;
}

#experience .card .col.s12.m2 a {
  display: block;
}

#experience .card .col.s12.m2 a img {
  max-height: 60px;
}

.card-action span {
  font-size: 85%;
  color: #666;
}

.card ul {
  margin-bottom: 0;
}

.card ul li {
  line-height: 200%;
  list-style-type: disc;
  margin-left: 24px;
}

.card ul li li {
  color: #666;
  font-size: 13px;
}

.card .card-title {
  font-size: 24px;
}

.card .card-content .card-title {
  line-height: 2.5rem;
}

.card i.right {
  margin-left: 10px;
}

a.hoverline {
  border-bottom: 3px solid transparent !important;
  padding: 3px 3px 0 3px;
  transition: 0.25s all;
  -moz-transition: 0.25s all;
  -webkit-transition: 0.25s all;
}

/* main a.hoverline */

/* a.hoverline:hover {
  border-bottom: 3px solid #24305e !important;
} */

a.hoverline:hover {
  border-bottom: 3px solid #004d40 !important;
}

#skills .card.large {
  height: 360px;
}

#skills h4 {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

#skills .col img.responsive-img {
  margin: 0 auto;
  max-height: 100px;
  padding-bottom: 10px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.card.large .card-content p {
  color: inherit;
  margin: 0;
  padding: 30px 0;
}

#experience .card-content .row {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.card.large .card-image {
  height: 230px;
}

.card.large .card-content {
  height: auto;
}

.card.medium .card-image {
  height: 240px;
}

.card-action a.btn-floating {
  margin-bottom: 0;
}

#contact a:not(.btn-floating) {
  bottom: 6px;
  left: 20px;
  position: relative;
}

#experience .col.s12.m2 {
  text-align: center;
}

.fa-external-link:before {
  left: 3px;
  position: relative;
  top: 2px;
}

small {
  display: none;
}

.grey-text {
  color: #666 !important;
}

/* main .teal-text */

.teal-text {
  color: #008073 !important;
}

/* .teal-text {
  color: #0b5e86 !important;
} */

/* .teal */

.teal {
  background-color: #008073 !important;
}

/* .teal {
  background-color: #00695c !important;
} */

@media (min-width: 1200px) {
  #experience .container {
    width: 860px;
  }
}

@media (max-width: 1360px) {
  .card ul li {
    font-size: 14px;
    line-height: 200%;
    margin-left: 20px;
  }
}

@media (max-width: 1160px) {
  .card ul li {
    line-height: 150%;
  }
}

@media (max-width: 992px) {
  main {
    padding-left: 0px;
    padding-top: 64px;
  }
  ul.side-nav a {
    line-height: 100%;
    padding: 0;
    width: 100%;
  }
  nav {
    background: #fff;
    height: 64px;
    position: absolute;
  }
  nav a.button-collapse, nav a.button-collapse i {
    color: #009688;
    height: 56px;
    line-height: 56px;
  }
  h3 {
    padding: 20px 30px;
    margin-bottom: 40px;
  }
  .container {
    margin: 0 auto;
  }
  nav.hide-on-large.only.trigger {
    display: block;
    position: fixed;
    top: 0;
    z-index: 2;
  }
  .name-title {
    display: block;
    height: 100%;
    padding-top: 15px;
    text-align: center;
    width: 100%;
    position: absolute;
  }
  .name-title>span, .name-title>a {
    position: relative;
    line-height: 20px;
  }
  .name-title a {
    font-size: 22px;
    display: block;
  }
  .name-title span {
    display: block;
    font-size: 14px;
  }
  h3, .container {
    position: relative;
    top: 64px;
  }
  section#intro {
    margin-bottom: -64px;
  }
  .card .role {
    position: relative;
    right: initial;
    top: initial;
  }
}

  h2 {
    font-size: 22px;
    line-height: 200%;
    margin: 30px 0 0;
  }
  #intro.section .container *:not(span) {
    padding: 0;
  }
  .card .card-content .card-title {
    font-size: 20px;
    line-height: 24px;
  }
  #experience span.card-title {
    text-align: center;
    display: block;
  }
  #experience span.card-title a {
    margin: 0;
  }
  i.mdi-navigation-close.right {
    position: relative;
    bottom: 15px;
  }
  #contact a:not(.btn-floating) {
    text-align: center;
    display: block;
    left: initial;
    bottom: initial;
  }
  #contact a.btn-floating.btn-large {
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  #intro.section {
    background-position-x: 30%;
  }
}

/* ============================================
   Intro + About Responsive Fix (final clean version)
   ============================================ */
@media (max-width: 992px) {
  /* Intro grows naturally */
  #intro.full-height {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;   /* don’t clip content */
    padding: 4rem 1rem 2rem;        /* space around content */
    background: #558b86;            /* intro background */
  }

  /* Headline scaling */
  #intro h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    word-break: break-word;
  }

  @media (min-width: 601px) and (max-width: 992px) {
    #intro h1 {
      font-size: 2.2rem;
    }
  }

  /* Center content + socials */
  #intro .content {
    margin: 0 auto;
    text-align: center;
    max-width: 85%;
  }

  #intro .social {
    text-align: center;
    margin: 1.5rem 0;
  }

  #intro .buttons {
    margin-top: 1rem;
    text-align: center;
  }

  /* About section starts below, dark text */
  #about {
    margin-top: 0;
    padding-top: 3rem;
    clear: both;
    color: #222;
    background: #fff;
  }
}

/* ==== FINAL OVERRIDES: stop overlap & restore Intro ==== */
@media (max-width: 992px) {
  /* 1) Stop pulling About up over Intro */
  section#intro { margin-bottom: 0 !important; }

  /* 2) Let Intro's content define its height (no abs-pos collapse) */
  #intro.section .container {
    position: relative !important;   /* back in normal flow */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 1;                      /* above overlay */
    padding: 0 16px;
  }
  #intro.section .overlay { z-index: 0; pointer-events: none; }

  /* 3) No forced viewport height on phones/tablets */
  #intro.full-height {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 4) About always starts after Intro + readable text */
  #about {
    clear: both !important;
    margin-top: 0 !important;
    padding-top: 2rem !important;
    color: #222 !important;
    background: #fff !important;
  }
  #about * { text-shadow: none !important; }

  /* 5) Keep the big heading from wrapping badly */
  #intro h1 { font-size: 1.8rem; line-height: 1.3; word-break: break-word; }
}


/* === Final fix: align side-nav icons + labels === */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a {
  display: flex !important;
  align-items: center !important;   /* vertical centering */
  gap: 10px;                        /* space between icon + text */
  padding: 10px 14px !important;
  line-height: 1.5 !important;      /* reset Materialize 100% */
  height: auto !important;
}

/* === NAVIGATION ICON ALIGNMENT FIXES === */

/* Desktop Side Navigation - Icon and Text Alignment */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  line-height: 1.4 !important;
  height: auto !important;
  box-sizing: content-box;
  color: #333 !important;
  transition: all 0.3s ease;
}

/* Icon Styling - Consistent Width and Alignment */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a i.fas,
ul.side-nav.fixed.table-of-contents li:not(.logo) > a i.far,
ul.side-nav.fixed.table-of-contents li:not(.logo) > a i.fab {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: #008073 !important;
}

/* Text Styling */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a span {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333 !important;
}

/* Hover States */
ul.table-of-contents li:not(.logo) a:hover i.fas,
ul.table-of-contents li:not(.logo) a:hover i.far,
ul.table-of-contents li:not(.logo) a:hover i.fab {
  color: #004d40 !important;
}

ul.table-of-contents li:not(.logo) a:hover span {
  color: #004d40 !important;
  font-weight: 500 !important;
}

/* Mobile Navigation Fixes */
@media (max-width: 992px) {
  /* Mobile side nav items */
  ul#slide-out li:not(.logo) > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 20px !important;
    color: #333 !important;
  }
  
  ul#slide-out li:not(.logo) > a i.fas,
  ul#slide-out li:not(.logo) > a i.far,
  ul#slide-out li:not(.logo) > a i.fab {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
    color: #008073 !important;
    flex-shrink: 0 !important;
  }
  
  ul#slide-out li:not(.logo) > a span {
    font-size: 14px !important;
    color: #333 !important;
  }
  
  /* Fix mobile hamburger icon */
  nav a.button-collapse i {
    color: #009688 !important;
  }
}

/* ========================================
   COMPLETE NAVIGATION FIX - ADD TO END OF YOUR CSS
   ======================================== */

/* OVERRIDE ALL EXISTING NAVIGATION STYLES */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a,
ul.side-nav.fixed li:not(.logo) > a,
ul#nav-mobile li:not(.logo) > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    padding: 14px 20px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    color: #333 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin: 0 !important;
}

/* FORCE ICON ALIGNMENT */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a i,
ul.side-nav.fixed li:not(.logo) > a i,
ul#nav-mobile li:not(.logo) > a i {
    font-size: 16px !important;
    width: 18px !important;
    height: 16px !important;
    text-align: center !important;
    line-height: 16px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #008073 !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* FORCE TEXT ALIGNMENT */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a span,
ul.side-nav.fixed li:not(.logo) > a span,
ul#nav-mobile li:not(.logo) > a span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    white-space: nowrap !important;
}

/* HOVER EFFECTS */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a:hover,
ul.side-nav.fixed li:not(.logo) > a:hover,
ul#nav-mobile li:not(.logo) > a:hover {
    background-color: #fafafa !important;
    border-left: 3px solid #008073 !important;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a:hover i,
ul.side-nav.fixed li:not(.logo) > a:hover i,
ul#nav-mobile li:not(.logo) > a:hover i {
    color: #004d40 !important;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a:hover span,
ul.side-nav.fixed li:not(.logo) > a:hover span,
ul#nav-mobile li:not(.logo) > a:hover span {
    color: #004d40 !important;
    font-weight: 500 !important;
}

/* ACTIVE STATE */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a.active,
ul.side-nav.fixed li:not(.logo) > a.active,
ul#nav-mobile li:not(.logo) > a.active {
    background-color: #fafafa !important;
    border-left: 3px solid #008073 !important;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a.active i,
ul.side-nav.fixed li:not(.logo) > a.active i,
ul#nav-mobile li:not(.logo) > a.active i {
    color: #004d40 !important;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a.active span,
ul.side-nav.fixed li:not(.logo) > a.active span,
ul#nav-mobile li:not(.logo) > a.active span {
    color: #004d40 !important;
    font-weight: 500 !important;
}

/* MOBILE NAVIGATION FIX */
@media (max-width: 992px) {
    ul#slide-out li:not(.logo) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding: 16px 20px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 48px !important;
        color: #333 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }
    
    ul#slide-out li:not(.logo) > a i {
        font-size: 16px !important;
        width: 18px !important;
        height: 16px !important;
        text-align: center !important;
        line-height: 16px !important;
        color: #008073 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    ul#slide-out li:not(.logo) > a span {
        font-size: 14px !important;
        color: #333 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }
    
    /* Mobile hamburger menu icon fix */
    nav a.button-collapse i {
        color: #009688 !important;
        font-size: 24px !important;
    }
}

/* RESET ANY INTERFERING STYLES */
ul.side-nav li {
    padding: 0 !important;
}

ul.side-nav.fixed a {
    box-sizing: border-box !important;
}

/* LOGO SECTION - Keep existing styling */
ul.side-nav.fixed li.logo {
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    box-sizing: content-box;
    min-height: 90px;
    padding: 30px 30px 40px;
}

ul.side-nav.fixed li.logo a {
    font-weight: 200;
    line-height: 100%;
    display: block !important;
    padding: 0 !important;
}

ul.table-of-contents li.logo a.active, 
ul.table-of-contents li.logo a:hover {
    border: none;
    font-weight: 200;
}

/* SPECIFIC FIX FOR FONT AWESOME ICONS */
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
}

/* ENSURE NO TEXT OVERFLOW */
ul.side-nav {
    width: 190px !important;
    overflow-x: hidden !important;
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========================================
   PROFILE PICTURE AND SPACING FIXES
   ADD THIS TO YOUR CSS AFTER THE PREVIOUS FIX
   ======================================== */

/* FIX PROFILE PICTURE - BETTER CENTERING AND CROPPING */
/*
.profile-pic {
  position: relative;
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto !important;
  border: 4px solid rgba(0, 77, 64, 0.4) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f5f5f5 !important;
}

.profile-pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
*/

/* CENTER THE LOGO SECTION CONTENT */
ul.side-nav.fixed li.logo {
  background-color: #fafafa !important;
  border-bottom: 1px solid #ddd !important;
  box-sizing: content-box !important;
  min-height: 140px !important;
  padding: 20px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

ul.side-nav.fixed li.logo a {
  font-weight: 200 !important;
  line-height: 100% !important;
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
}

/* REDUCE NAVIGATION SPACING */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a,
ul.side-nav.fixed li:not(.logo) > a,
ul#nav-mobile li:not(.logo) > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;               /* REDUCED from 15px to 12px */
    padding: 10px 18px !important;      /* REDUCED from 14px 20px to 10px 18px */
    line-height: 1.3 !important;        /* REDUCED from 1.4 to 1.3 */
    height: auto !important;
    min-height: 42px !important;        /* REDUCED from 48px to 42px */
    box-sizing: border-box !important;
    color: #333 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    margin: 0 !important;
}

/* TIGHTER ICON SPACING */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a i,
ul.side-nav.fixed li:not(.logo) > a i,
ul#nav-mobile li:not(.logo) > a i {
    font-size: 15px !important;          /* REDUCED from 16px to 15px */
    width: 16px !important;              /* REDUCED from 18px to 16px */
    height: 15px !important;             /* REDUCED from 16px to 15px */
    text-align: center !important;
    line-height: 15px !important;        /* REDUCED from 16px to 15px */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #008073 !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* TIGHTER TEXT SPACING */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a span,
ul.side-nav.fixed li:not(.logo) > a span,
ul#nav-mobile li:not(.logo) > a span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;         /* REDUCED from 1.4 to 1.3 */
    font-size: 13.5px !important;        /* REDUCED from 14px to 13.5px */
    font-weight: 400 !important;
    color: #333 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    white-space: nowrap !important;
}

/* ADJUST SIDEBAR WIDTH FOR TIGHTER LAYOUT */
ul.side-nav {
    width: 185px !important;             /* REDUCED from 190px to 185px */
    overflow-x: hidden !important;
}

main {
    background: url(../../assets/img/bg.png) repeat;
    padding-left: 185px !important;     /* REDUCED from 190px to 185px */
}

/* MOBILE NAVIGATION - TIGHTER SPACING */
@media (max-width: 992px) {
    main {
        padding-left: 0px !important;
        padding-top: 64px !important;
    }
    
    ul#slide-out li:not(.logo) > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;               /* REDUCED spacing */
        padding: 12px 18px !important;      /* REDUCED spacing */
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 44px !important;        /* REDUCED height */
        color: #333 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }
    
    ul#slide-out li:not(.logo) > a i {
        font-size: 15px !important;
        width: 16px !important;
        height: 15px !important;
        text-align: center !important;
        line-height: 15px !important;
        color: #008073 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    ul#slide-out li:not(.logo) > a span {
        font-size: 13.5px !important;
        color: #333 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }
}

/* ENSURE HOVER STATES STILL WORK WITH NEW SPACING */
ul.side-nav.fixed.table-of-contents li:not(.logo) > a:hover,
ul.side-nav.fixed li:not(.logo) > a:hover,
ul#nav-mobile li:not(.logo) > a:hover {
    background-color: #fafafa !important;
    border-left: 3px solid #008073 !important;
    padding-left: 15px !important;       /* Adjust for border */
}

ul.side-nav.fixed.table-of-contents li:not(.logo) > a.active,
ul.side-nav.fixed li:not(.logo) > a.active,
ul#nav-mobile li:not(.logo) > a.active {
    background-color: #fafafa !important;
    border-left: 3px solid #008073 !important;
    padding-left: 15px !important;       /* Adjust for border */
}

/* ========================================
   BUTTON ALIGNMENT FIXES FOR INTRO SECTION
   ADD THIS TO YOUR CSS
   ======================================== */

/* Create a container for buttons */
.buttons {
  margin-top: 2rem;
  text-align: center;
  width: 100%;
}

/* Align buttons horizontally with some spacing */
.readme, .contactme {
  display: inline-block;
  vertical-align: top;
  margin: 0.5rem 0.75rem; /* Add horizontal spacing between buttons */
}

/* Remove conflicting margin from contactme */
.contactme {
  margin-top: 0.5rem !important; /* Override the existing 1.5em */
}

/* For larger screens - align buttons to left under social icons */
@media (min-width: 993px) {
  .buttons {
    text-align: left;
    margin-left: 0; /* Align with social icons */
    padding-left: 0;
  }
}

/* For mobile/tablet - keep buttons centered */
@media (max-width: 992px) {
  .buttons {
    text-align: center;
    margin: 1.5rem auto;
    max-width: 300px;
  }
  
  .readme, .contactme {
    margin: 0.5rem 0.5rem;
  }
  
  /* Stack buttons vertically on very small screens */
  @media (max-width: 480px) {
    .readme, .contactme {
      display: block;
      margin: 0.75rem auto;
      width: 200px;
      text-align: center;
    }
  }
}

/* Improve button hover effects */
.readme:hover {
  color: white !important;
  background-color: #00796b !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 121, 107, 0.3);
  transition: all 0.3s ease;
}

.contactme:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* Add smooth transitions */
.readme, .contactme {
  transition: all 0.3s ease;
  cursor: pointer;
}

/* PROFILE PICTURE - FINAL FIX */
/* Make sure the container for the picture is centered */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0; /* adjust spacing */
}

/* -------------------------
   Strong overrides for side-nav profile pic centering
   Paste this at the end of your CSS file (after Materialize)
   ------------------------- */
/* Force the entire logo list item to center its contents */
.side-nav.fixed .logo {
  display: flex !important;
  justify-content: center !important; /* centers horizontally */
  align-items: center;                /* vertical alignment inside li */
  padding: 20px 0;
}

/* Kill Materialize's float on brand-logo */
.side-nav.fixed .logo .brand-logo {
  float: none !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: normal !important;
}

/* Profile picture circle */
.side-nav.fixed .logo .profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(0, 77, 64, 0.4);
  background-color: #f5f5f5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image inside */
.side-nav.fixed .logo .profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}