@font-face {
  font-family: "icomoon";
  src        : url("../fonts/icomoon/icomoon.eot?mdppn9");
  src        : url("../fonts/icomoon/icomoon.eot?mdppn9#iefix") format("embedded-opentype"),
    url("../fonts/icomoon/icomoon.ttf?mdppn9") format("truetype"),
    url("../fonts/icomoon/icomoon.woff?mdppn9") format("woff"),
    url("../fonts/icomoon/icomoon.svg?mdppn9#icomoon") format("svg");
  font-weight: normal;
  font-style : normal;
}

/************************/
/********* BODY *********/
/************************/

body {
  font-family     : "Quicksand", Arial, sans-serif;
  font-weight     : 400;
  font-size       : 15px;
  line-height     : 1.8;
  color           : rgba(255, 255, 255, 0.8);
  background-color: #0f172a;
  background-image: radial-gradient(at 0% 0%,
      hsla(210, 100%, 16%, 1) 0,
      transparent 50%),
    radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%);
  background-attachment: fixed;
  background-size      : cover;
}

/* -- iOS Fix: Body where the background lives -- */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll !important;
  }
}

@media screen and (max-width: 991px) {
  body {
    font-size: 16px;
  }
}

/* -- Links -- */
a {
  color             : #00d4ff;
  text-decoration   : none;
  -webkit-transition: 0.5s;
  -o-transition     : 0.5s;
  transition        : 0.5s;
}

a:active,
a:focus,
a:hover {
  color          : #ffffff;
  outline        : none;
  text-decoration: none !important;
  text-shadow    : 0 0 8px rgba(0, 212, 255, 0.5);
}

/* -- Paragraphs -- */
p {
  margin-bottom: 1.5em !important;
  text-align   : left;
}

/* -- Headings -- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color         : #ffffff;
  font-family   : "Quicksand", Arial, sans-serif;
  /* Consistent font with body */
  font-weight   : 700 !important;
  margin        : 0 0 30px 0 !important;
  letter-spacing: 1px;
}

/* -- Selection -- */
::selection {
  color     : #0f172a;
  background: #00d4ff;
}

::-moz-selection {
  color     : #0f172a;
  background: #00d4ff;
}

section {
  background: transparent;
  padding   : 20px 0;
  position  : relative;
  overflow  : hidden;
  clear     : both;
}

section:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* -- Smooth transition -- */
html {
  scroll-behavior: smooth;
}

/***********************************/
/********* DAVIEFOLIO PAGE *********/
/***********************************/

#daviefolio-page {
  width     : 100%;
  overflow  : hidden;
  position  : relative;
  padding   : 0 30px !important;
  background: transparent;
}

@media screen and (max-width: 991px) {
  #daviefolio-page {
    width  : 100%;
    padding: 0 5px !important;
  }
}

.daviefolio-container-wrap {
  max-width: 1170px;
  margin   : 0 auto;
}

/***********************************/
/*********  NAV TOGGLE     *********/
/***********************************/

/* -- Main button container -- */
.daviefolio-nav-toggle {
  top            : 2px !important;
  left           : -8px !important;
  cursor         : pointer;
  text-decoration: none;
  border         : none;
  background     : transparent;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 55px;
  /* Matches header height for a perfect square */
  height         : 55px;
  padding        : 0;
  position       : relative;
  z-index        : 2100;
  /* Ensure it stays above the navbar */
  outline        : none !important;
}

/* The middle line of the hamburger */
.daviefolio-nav-toggle i {
  position      : fixed;
  display       : inline-block;
  width         : 22px;
  /* Width of the lines */
  height        : 2px;
  color         : #00d4ff;
  font          : bold 14px/0.4 Helvetica;
  text-transform: uppercase;
  text-indent   : -55px;
  background    : #00d4ff;
  transition    : all 0.2s ease-out;
}

/* The top and bottom lines */
.daviefolio-nav-toggle i::before,
.daviefolio-nav-toggle i::after {
  content   : "";
  width     : 22px;
  height    : 2px;
  background: #00d4ff;
  position  : absolute;
  left      : 0;
  transition: all 0.2s ease-out;
}

.daviefolio-nav-toggle i::before {
  top: -7px;
  /* Position of top line */
}

.daviefolio-nav-toggle i::after {
  bottom: -7px;
  /* Position of bottom line */
}

/* Hover effect */
.daviefolio-nav-toggle:hover i,
.daviefolio-nav-toggle:hover i::before,
.daviefolio-nav-toggle:hover i::after {
  background: #ffffff;
  filter    : drop-shadow(0 0 5px rgba(0, 212, 255, 0.8));
}

/* Active state */
.daviefolio-nav-toggle.active {
  position: fixed;
}

/* -- When the menu is active/open -- */
.daviefolio-nav-toggle.active i {
  background: transparent;
}

.daviefolio-nav-toggle.active i::before {
  top      : 0;
  transform: rotateZ(45deg);
}

.daviefolio-nav-toggle.active i::after {
  bottom   : 0;
  transform: rotateZ(-45deg);
}

/* Hide accessibility text visually */
.sr-only {
  position: absolute;
  width   : 1px;
  height  : 1px;
  padding : 0;
  margin  : -1px;
  overflow: hidden;
  clip    : rect(0, 0, 0, 0);
  border  : 0;
}

/* Hide toggle on large screens (Desktop) */
@media screen and (min-width: 991px) {
  .daviefolio-nav-toggle {
    display: none;
  }
}

/* Mobile Visibility 
@media screen and (max-width: 768px) {
  .daviefolio-nav-toggle {
    opacity: 1;
    visibility: visible;
  }
}
*/
/*
@media screen and (max-width: 480px) {
  .col-xxs-12 {
    float: none;
    width: 100% !important;
  }
}
*/

/**************************************/
/********* DAVIEFOLIO ASIDE *********/
/**************************************/

#daviefolio-aside {
  top                    : 0;
  position               : fixed;
  float                  : left;
  width                  : 300px;
  height                 : 100svh;
  z-index                : 1000;
  padding-top            : 3em;
  padding-bottom         : 40px;
  background             : rgba(2, 6, 23, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter        : blur(12px);
  border-right           : 1px solid rgba(255, 255, 255, 0.08);
  box-shadow             : 10px 0 30px rgba(0, 0, 0, 0.45);
  transition             : 0.5s;
  overflow               : hidden;
}

@media screen and (max-width: 991px) {
  #daviefolio-aside {
    padding-top      : 4em !important;
    left             : 0 !important;
    z-index          : 2001;
    width            : 300px !important;
    -moz-transform   : translateX(-300px);
    -webkit-transform: translateX(-300px);
    -ms-transform    : translateX(-300px);
    -o-transform     : translateX(-300px);
    transform        : translateX(-300px);
  }
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
#daviefolio-aside::-webkit-scrollbar {
  display: none;
}

#daviefolio-aside .author-img {
  width                : 170px;
  height               : 170px;
  background-size      : cover;
  background-position  : center center;
  background-repeat    : no-repeat;
  position             : relative;
  -webkit-border-radius: 50%;
  -moz-border-radius   : 50%;
  -ms-border-radius    : 50%;
  border-radius        : 50%;
  margin               : 0 auto;
  margin-bottom        : 15px;
  background-image     : url(../img/about/about.jpg);
}

/*
@media screen and (max-width: 768px) {
  #daviefolio-aside {

  }

  #daviefolio-aside .author-img {
    width: 170px !important;
    height: 170px !important;
    margin-bottom: 5px !important;
  }
}*/

#daviefolio-aside .text-center {
  margin : 0 !important;
  padding: 0 !important;
}

#daviefolio-logo {
  display       : block;
  font-family   : "Quicksand", Arial, sans-serif;
  font-size     : 26px !important;
  text-align    : center;
  letter-spacing: 1px !important;
  width         : 100%;
  margin-bottom : 0.5em !important;
}

.daviefolio-aside a {
  color          : #94a3b8;
  /* Muted gray-blue */
  text-decoration: none;
  font-weight    : 700;
  transition     : all 0.3s ease;
  display        : block;
  padding        : 12px 20px;
  border-radius  : 8px;
  margin-bottom  : 5px;
}

#daviefolio-logo a:hover {
  color      : #00d4ff;
  /* Your brand Cyan */
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  /* Subtle data-glow */
  transition : all 0.3s ease;
  /* Smooth transition */
}

/* Sidebar Social Links Container */
.side-social-wrap {
  margin-bottom: 30px;
  /* Space between links and the Menu below */
}

/* Target the container for your social icons */
.side-social {
  padding        : 0;
  margin         : 20px 0;
  /* Slightly more margin to separate from your name */
  list-style     : none;
  display        : flex;
  justify-content: center;
  gap            : 18px;
  /* Increased slightly for easier clicking on mobile/tablets */
}

.side-social li a {
  color     : rgba(255, 255, 255, 0.7);
  font-size : 1.6rem;
  transition: all 0.3s ease;
  display   : inline-block;
  /* Required for the transform effect below */
}

/* The "Glow" effect to match your hero text highlights */
.side-social li a:hover {
  color      : #00d4ff;
  /* Matches your 'Hi, I'm David' cyan */
  transform  : translateY(-3px);
  /* Subtle lift effect */
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  /* Glowing effect */
}

@media screen and (max-width: 768px) {
  #daviefolio-logo {
    display       : block;
    font-size     : 25px !important;
    letter-spacing: 1px !important;
    width         : 100%;
    margin-bottom : 0.5em !important;
  }

  #daviefolio-logo a {
    font-weight: 700 !important;
    transition : color 0.3s ease-in-out;
  }
}

#daviefolio-aside #daviefolio-main-menu {
  display: block;
  width  : 100%;
}

#daviefolio-aside #daviefolio-main-menu .collapse {
  display: block !important;
}

#daviefolio-aside #daviefolio-main-menu ul {
  text-align: center;
  margin    : 0;
  padding   : 0;
}

#daviefolio-aside #daviefolio-main-menu ul li {
  margin        : 0 0 10px 0;
  padding       : 0 0 4px 0;
  /*list-style  : none;*/
  font-size     : 13px !important;
  font-weight   : 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#daviefolio-aside #daviefolio-main-menu ul li a {
  color             : #94a3b8;
  /*rgba(0, 0, 0, 0.7);*/
  text-decoration   : none;
  position          : relative;
  padding           : 10px 0;
  /*font-family     : "Quicksand", Arial, sans-serif;*/
  font-family       : Verdana, Geneva, Tahoma, sans-serif;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
}

#daviefolio-aside #daviefolio-main-menu ul li a:after {
  content           : "";
  position          : absolute;
  height            : 1px;
  bottom            : 7px;
  left              : 0;
  right             : 0;
  background-color  : #f8fafc;
  /* #2c98f0;*/
  visibility        : hidden;
  -webkit-transform : scaleX(0);
  -moz-transform    : scaleX(0);
  -ms-transform     : scaleX(0);
  -o-transform      : scaleX(0);
  transform         : scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition   : all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition    : all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition     : all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition        : all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#daviefolio-aside #daviefolio-main-menu ul li a:hover {
  text-decoration: none;
  color          : #000;
}

#daviefolio-aside #daviefolio-main-menu ul li a:hover:after {
  visibility       : visible;
  -webkit-transform: scaleX(1);
  -moz-transform   : scaleX(1);
  -ms-transform    : scaleX(1);
  -o-transform     : scaleX(1);
  transform        : scaleX(1);
}

#daviefolio-aside #daviefolio-main-menu ul li.active a {
  color: #2c98f0;
}

#daviefolio-aside #daviefolio-main-menu ul li.active a:after {
  visibility       : visible;
  -webkit-transform: scaleX(1);
  -moz-transform   : scaleX(1);
  -ms-transform    : scaleX(1);
  -o-transform     : scaleX(1);
  transform        : scaleX(1);
}

@media screen and (max-width: 768px) {
  #daviefolio-aside #daviefolio-main-menu {
    display   : block;
    width     : 100%;
    text-align: center;
  }

  #daviefolio-aside #daviefolio-main-menu ul {
    margin    : 0 0 2em 0;
    text-align: center;
    margin    : 0 auto;
    padding   : 0;
  }

  #daviefolio-aside #daviefolio-main-menu ul li {
    margin        : 0 0 8px 0;
    padding       : 0;
    list-style    : none;
    font-size     : 13px !important;
    font-weight   : 500 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

/* -- DAVIEFOLIO FOOTER -- */
#daviefolio-aside .daviefolio-footer {
  position: absolute !important;
  bottom  : 0 !important;
  width   : 100% !important;
  display : block !important;
  padding : 0 !important;
}

#daviefolio-aside .daviefolio-footer p {
  display    : block;
  padding    : 0 !important;
  margin     : 0 !important;
  color      : #94a3b8 !important;
  background : rgba(2, 6, 23, 0.88);
  font-size  : 15px !important;
  font-weight: 400 !important;
  text-align : center !important;
  box-shadow : #00d4ff 0px 0px 8px !important;
}

/* -- other footer styles -- */
.daviefolio-footer {
  background: rgba(2, 6, 23, 0.88);
  padding   : 2em;
}

@media (max-width: 768px) {
  #daviefolio-aside .daviefolio-footer {
    font-size: 13px !important;
    padding  : 0 !important;
  }

  #daviefolio-aside .daviefolio-footer p {
    font-size: 13px !important;
    padding  : 0 !important;
    margin   : 0 !important;
  }
}

/***********************************/
/********* DAVIEFOLIO MAIN *********/
/***********************************/

#daviefolio-main {
  position          : relative;
  float             : right;
  width             : calc(100% - 300px);
  -moz-transition   : 0.5s;
  -webkit-transition: 0.5s;
  -o-transition     : 0.5s;
  transition        : 0.5s;
}

@media screen and (max-width: 991px) {
  #daviefolio-main {
    width  : 100%;
    padding: 0 2px;
  }
}

/* --- Logo --- */
#logo {
  top                    : 0;
  position               : fixed;
  z-index                : 2000;
  width                  : calc(100% - 330px - 30px) !important;
  background-color       : rgba(15, 23, 42, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter        : blur(10px);
  height                 : 48px !important;
  display                : flex;
  align-items            : center;
  justify-content        : flex-start;
  /*transform            : translateX(0);*/
  transition             : transform 0.4s ease-in-out;
}

/* -- Mobile View Adjustments -- */
@media (max-width: 991px) {
  #logo {
    width           : 100% !important;
    left            : 0 !important;
    height          : 60px !important;
    justify-content : space-between;
    padding         : 0 40px !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    /*transform     : translateX(0);  no movement on mobile */
  }
}

/* --- Logo Image --- */
#logo img {
  pointer-events: auto;
  display       : block;
  width         : auto;
  max-width     : 100%;
  height        : auto;
  max-height    : 48px;
  filter        : drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
  transition    : filter 0.3s ease, transform 0.3s ease;
}

/* --- Logo Hover Effect --- */
#logo img:hover {
  filter   : drop-shadow(0 0 12px rgba(0, 212, 255, 0.8));
  transform: scale(1.1);
}

/* -- Tablet View -- 
@media screen and (max-width: 768px) {
  #logo img {
    width: 120px !important;
    padding-left: 30px !important;
    max-width: 100%;
    height: auto;
    max-height: 60px !important;
  }
}*/

/******** HERO ********/
.hero-full-screen {
  position       : relative;
  min-height     : 100svh;
  width          : 100%;
  background     : url("../img/about/hero.jpg") center / cover no-repeat;
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

.hero-overlay {
  position: absolute;
  inset   : 0;
  /* Darkest on the left (under text), transparent on the right (over image) */
  background: linear-gradient(90deg,
      rgba(10, 10, 11, 0.95) 0%,
      rgba(10, 10, 11, 0.7) 40%,
      rgba(10, 10, 11, 0.2) 100%);
  z-index: 1;
}

.hero-container {
  position       : relative;
  width          : 100%;
  z-index        : 2;
  /* Use padding instead of margin to keep the container full-width */
  padding-left   : 10%;
  /* Percentage is safer for different screen sizes than fixed px */
  padding-top    : 50px;
  /* Gives space below your top 'DO Folio' logo */
  padding-right  : 8%;
  /* Helps align the text perfectly with the start of the laptop image */
  display        : flex;
  flex-direction : column;
  justify-content: center;
  min-height     : 80vh;
  /* Centers the content vertically on the screen */
  gap            : 10px;
}

@media (max-width: 768px) {
  .hero-container {
    padding-left : 6%;
    padding-right: 6%;
    padding-top  : 30px;

    min-height     : 0;
    /* auto---Avoid forcing tall sections on mobile */
    justify-content: flex-start;

    gap: 8px;
  }
}

@media (max-width: 480px) {
  .hero-container {
    padding-left : 5%;
    padding-right: 5%;
    padding-top  : 24px;

    gap: 6px;
  }
}

/* CHECK:This ensures the text stays readable and "pops" */
.hero-container h1,
.hero-container p,
.hero-container span {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-container>* {
  animation: fadeUp 0.8s ease forwards;
  opacity  : 0;
}

.hero-container>*:nth-child(1) {
  animation-delay: 0.1s;
}

.hero-container>*:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-container>*:nth-child(3) {
  animation-delay: 0.3s;
}

.hero-container>*:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes fadeUp {
  from {
    opacity  : 0;
    transform: translateY(16px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

/*.glass-header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}*/

.intro-text {
  font-size     : 2.5rem;
  font-weight   : 600;
  color         : #00d4ff;
  letter-spacing: 4px;
  /* Choosing the wider spacing for a 'premium' look */
  margin-bottom : 15px;
  text-align    : left;
  text-shadow   : 2px 2px 10px rgba(0, 0, 0, 0.5);
  /* Helps text pop against the laptop image */
}

h1 {
  font-size     : 4.5rem;
  font-weight   : 800;
  line-height   : 1.1;
  margin-bottom : 30px;
  color         : #ffffff;
  /*  #cccccc; Brighter for better contrast */
  text-align    : left;
  letter-spacing: -1px;
  /* Slight negative spacing makes heavy fonts look premium */
}

.sub-expertise {
  font-size    : 2.5rem;
  /* Scaled down slightly */
  color        : #00a2ff;
  font-weight  : 400;
  font-style   : italic;
  display      : block;
  /* Ensures it sits on its own line */
  margin-bottom: 30px;
}

.tech-stack {
  font-family  : "Courier New", Courier, monospace;
  color        : #888;
  font-size    : 1.5rem;
  /* Scaled down for elegance */
  margin-bottom: 30px;
  text-align   : left;
}

.tech-stack span {
  color      : #ffffff;
  font-weight: bold;
}

.hero-description {
  font-size    : 1.8rem;
  /* Better readability */
  color        : #cbd5e0;
  line-height  : 1.6;
  margin-bottom: 40px;
  max-width    : 100%;
  /* Prevents the line from being too long to read */
  text-align   : left;
}

.hero-description strong {
  color: #00d4ff;
  /* Highlights your key value in your accent color */
}

/* Optional: Add a subtle glow to match the background aesthetic */
.hero-description strong:hover {
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  transition : 0.3s ease;
}

/* Button Styling */
.hero-actions {
  margin-top     : 6rem;
  display        : flex;
  gap            : 6rem;
  justify-content: left;
}

#daviefolio-hero .btn-folio {
  background-color: #007bff;
  color           : #e2dfdf;
  border          : 1px solid #00d4ff !important;
  padding         : 10px 20px !important;
  font-size       : 1em !important;
  border-radius   : 35px;
  text-transform  : uppercase;
  letter-spacing  : 1px;
  transition      : background-color 0.3s ease;
}

#daviefolio-hero .btn-folio:hover {
  color      : #4169e1;
  background : transparent !important;
  border     : 1px solid #000 !important;
  font-weight: bold;
}

#daviefolio-hero .btn-resume {
  background-color: transparent;
  color           : #e2dfdf;
  border          : 1px solid #007bff !important;
  padding         : 10px 20px !important;
  font-size       : 1em !important;
  border-radius   : 35px;
  text-transform  : uppercase;
  letter-spacing  : 1px;
  transition      : background-color 0.3s ease;
}

#daviefolio-hero .btn-resume:hover {
  color      : #4169e1;
  background : transparent !important;
  border     : 1px solid #000 !important;
  font-weight: bold;
}

/* Small screens (phones) */
@media (max-width: 576px) {
  .hero-full-screen {
    padding    : 20px;
    align-items: flex-start;
  }

  .hero-container {
    text-align: left;
    margin-top: 25%;
  }

  .intro-text {
    font-size     : 0.85rem;
    letter-spacing: 2px;
  }

  h1 {
    font-size  : 2.3rem;
    line-height: 1.3;
  }

  .tech-stack {
    font-size    : 0.9rem;
    margin-bottom: 20px;
  }

  .hero-description {
    font-size    : 1.05rem;
    line-height  : 1.6;
    max-width    : 100%;
    margin-bottom: 30px;
  }

  .hero-actions {
    margin-top    : 3rem;
    flex-direction: column;
    gap           : 1.2rem;
    align-items   : stretch;
  }

  #daviefolio-hero .btn-folio {
    width     : 100%;
    padding   : 14px;
    font-size : 0.85rem !important;
    text-align: center;
  }
}

/* Medium screens (tablets) */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }

  .hero-description {
    font-size: 1.2rem;
  }

  .hero-actions {
    margin-top: 4rem;
    gap       : 2rem;
  }
}

/********* OFF CANVAS *********/

/* Off-canvas menu styles:hides any content that overflows horizontally beyond the boundaries of the body element */
body.offcanvas {
  overflow-x: hidden;
}

body.offcanvas #daviefolio-aside {
  -moz-transform   : translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform    : translateX(0);
  -o-transform     : translateX(0);
  transform        : translateX(0);
  width            : 300px !important;
  z-index          : 999;
  position         : fixed;
}

body.offcanvas #daviefolio-main,
body.offcanvas .daviefolio-nav-toggle {
  top              : 0;
  -moz-transform   : translateX(300px);
  -webkit-transform: translateX(300px);
  -ms-transform    : translateX(300px);
  -o-transform     : translateX(300px);
  transform        : translateX(300px);
}

/********* GUTTERS *********/

/* removes all margin and padding from an element */
/*margin: 0;: This removes all external spacing around the element.
padding: 0;: This removes all internal spacing within the element.*/
.no-gutters {
  margin : 0;
  padding: 0;
}

/***************************/
/******** SECTIONS *********/
/***************************/

.daviefolio-about,
.daviefolio-blog,
.daviefolio-contact,
.daviefolio-education,
.daviefolio-services,
.daviefolio-skills,
.daviefolio-work {
  clear  : both !important;
  width  : 100% !important;
  display: block !important;
}

.folio-title-box {
  display       : flex;
  flex-direction: row;
  align-items   : center;
  gap           : 15px;
  margin-bottom : 30px !important;
  margin-top    : 25px !important;
}

.folio-title-line-mf {
  width           : 60px;
  height          : 13px;
  background-color: #2c98f0;
  display         : inline-block;
  border-radius   : 2px;
}

.daviefolio-heading-meta {
  font-size     : 17px !important;
  color         : #00d4ff;
  text-transform: uppercase;
  font-weight   : bold;
  letter-spacing: 2px;
  text-shadow   : 0 0 10px rgba(0, 212, 255, 0.3);
  white-space   : nowrap;
}

.daviefolio-heading span {
  display: block;
}

.daviefolio-narrow-content {
  padding: 0 1em !important;
}

@media screen and (max-width: 768px) {

  .daviefolio-about,
  .daviefolio-blog,
  .daviefolio-contact,
  .daviefolio-education,
  .daviefolio-services,
  .daviefolio-skills,
  .daviefolio-work {
    padding: 2em 0.5em 3em 0.5em !important;
    /*top 5em bottom 8em*/
  }
}

@media screen and (max-width: 768px) {
  .daviefolio-narrow-content {
    padding: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .daviefolio-heading {
    margin-bottom: 3em !important;
    padding-left : 2px !important;
  }
}

/*************************/
/********* ABOUT *********/
/*************************/
.daviefolio-about-section {
  padding      : 80px 0;
  /* background: #0b0d17; */
}

.bio-profile-card {
  background             : rgba(10, 10, 11, 0.85);
  border-left            : 5px solid #00d4ff;
  padding                : 20px 20px 15px 20px;
  /* Suggested 15px bottom for better corner balance */
  border-radius          : 12px;
  -webkit-backdrop-filter: blur(15px);
  /* Smooth glass effect for Safari */
  backdrop-filter        : blur(15px);
  box-shadow             : 0 15px 35px rgba(0, 0, 0, 0.6);
  margin-bottom          : 10px;
}

:root {
  --accent: #00a2ff;
}

.accent-text {
  color         : var(--accent);
  font-size     : 2rem;
  letter-spacing: 2px;
  margin-bottom : 10px;
}

.bio-main-text p {
  font-family: "Verdana", Geneva, Tahoma, sans-serif;
  font-size  : 15px !important;
  line-height: 1.6 !important;
  color      : rgba(255, 255, 255, 0.9);
  text-align : left;
}

.bio-main-text strong {
  color      : #00d4ff;
  /* Highlights key credentials in cyan */
  font-weight: 700;
}

.card-footer-quote {
  border-top    : 1px solid rgba(255, 255, 255, 0.1);
  color         : #00d4ff;
  text-align    : center;
  font-size     : 14px;
  /* Improved readability */
  margin-top    : 20px;
  /* More space above the line for a cleaner look */
  padding-top   : 15px;
  /* More space below the line for the quote */
  font-style    : italic;
  letter-spacing: 0.5px;
}

/* Burner Cards Styling */
.burner-row {
  margin-top: 5px;
}

.burner-card {
  background   : #161a23;
  padding      : 10px 40px;
  border-radius: 15px;
  border       : 1px solid rgba(255, 255, 255, 0.05);
  transition   : 0.4s;
  height       : 100%;
}

.burner-card:hover {
  border-color: #00a2ff;
  transform   : translateY(-10px);
  box-shadow  : 0 15px 30px rgba(0, 162, 255, 0.1);
}

.burner-icon i {
  font-size    : 40px;
  color        : #00a2ff;
  margin-bottom: 20px;
  display      : block;
}

.burner-card h3 {
  color        : #fff;
  margin-bottom: 20px;
  font-size    : 22px;
}

/* Tool Tags */
.tool-list {
  display   : flex;
  flex-wrap : wrap;
  /* Allows them to wrap to the next line */
  gap       : 8px;
  /* Consistent space between tags */
  margin-top: 20px;
}

.skill-pill {
  display      : inline-block;
  padding      : 5px 15px;
  border-radius: 50px;
  /* Makes them look like modern 'pills' */
  font-size    : 14px;
  font-weight  : 600;
  background   : rgba(255, 255, 255, 0.05);
  /* Very subtle transparent background */
  border       : 1px solid rgba(255, 255, 255, 0.1);
  color        : #a0a0a0;
  transition   : all 0.3s ease;
}

/* Hover effect to make it feel interactive */
.skill-pill:hover {
  color       : #00a2ff;
  /* Your signature blue */
  border-color: #00a2ff;
  background  : rgba(0, 162, 255, 0.05);
  transform   : translateY(-2px);
  /* Slight lift effect */
}

/* Service List */
.service-list {
  padding   : 0;
  list-style: none;
  color     : #a0a0a0;
  text-align: left;
}

.service-list li {
  margin-bottom: 12px;
  position     : relative;
  padding-left : 20px;
}

.service-list li::before {
  content : "▹";
  position: absolute;
  left    : 0;
  color   : #00a2ff;
}

/* Row Styling */
.row-bottom-padded-sm {
  margin        : 0;
  padding-bottom: 1em;
}

@media screen and (max-width: 768px) {
  .row-bottom-padded-sm {
    padding-bottom: 1em;
  }
}

.about-desc {
  padding      : 0.5em 1em !important;
  background   : rgba(243, 242, 242, 0.7);
  opacity      : 1;
  border-radius: 0 15px !important;
  box-shadow   : 4px 4px 10px rgba(0, 0, 0, 0.3);
  /* Soft shadow to make it pop */
}

.about-desc p {
  font-family: "Verdana", Geneva, Tahoma, sans-serif;
  font-size  : 15px !important;
  line-height: 1.6 !important;
  color      : #000;
  text-align : left;
}

/* About Tools */
.about-tools {
  padding-top    : 1em !important;
  align-items    : center !important;
  justify-content: center !important;
  text-align     : center;
}

/* Tools Section */
.tools {
  padding      : 1em 2em !important;
  margin-bottom: 30px !important;
  position     : relative;
  z-index      : 0;
  height       : 140px !important;

  /* Box Shadow */
  -webkit-box-shadow: 0 0 56px -8px rgba(0, 0, 0, 0.17);
  -moz-box-shadow   : 0 0 56px -8px rgba(0, 0, 0, 0.17);
  -ms-box-shadow    : 0 0 56px -8px rgba(0, 0, 0, 0.17);
  -o-box-shadow     : 0 0 56px -8px rgba(0, 0, 0, 0.17);
  box-shadow        : 0 0 56px -8px rgba(0, 0, 0, 0.17);
}

@media screen and (max-width: 768px) {
  .tools {
    padding      : 1em 4em !important;
    margin-bottom: 2em;
  }
}

/* Tool Icon */
.tools .icon2 {
  display      : block;
  margin-bottom: 20px !important;
}

.tools .icon2 i {
  font-size: 64px;
}

/* Tool Title */
.tools h2 {
  font-family: "Quicksand", Arial, sans-serif;
  font-size  : 16px;
  font-weight: 500;
  color      : #2fa499;
}

/* Tool Image */
.tools-image {
  width        : 64px;
  height       : 64px;
  margin-bottom: 5px;
  display      : inline-block;
}

/* Tool Colors */
.tools.color-1 {
  border-bottom: 2px solid #ec5453;
}

.tools.color-1 .icon2 i {
  color: #ec5453;
}

.tools.color-2 {
  border-bottom: 2px solid #f9bf3f;
}

.tools.color-2 .icon2 i {
  color: #f9bf3f;
}

.tools.color-3 {
  border-bottom: 2px solid #1cf708;
}

.tools.color-3 .icon2 i {
  color: #1cf708;
}

.tools.color-4 {
  border-bottom: 2px solid #a84cb8;
}

.tools.color-4 .icon2 i {
  color: #a84cb8;
}

/******************************/
/********* SKILLS CSS *********/
/******************************/

.daviefolio-skills .col-md-12 p {
  padding      : 0.5em 1em !important;
  margin       : 0;
  /*background : rgba(243, 242, 242, 0.7); */
  border-radius: 0 15px !important;
  text-align   : left;
  font-family  : "Verdana", Geneva, Tahoma, sans-serif;
  font-size    : 15px !important;
  line-height  : 1.6 !important;
  /*color      : #000;*/
  word-wrap    : break-word;
}

.expertise-card {
  background             : rgba(10, 10, 11, 0.7);
  /* Matching the hero overlay */
  border                 : 1px solid rgba(0, 212, 255, 0.2);
  /* Faint cyan border */
  border-radius          : 12px;
  padding                : 30px;
  margin-bottom          : 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter        : blur(10px);
  /* Glassmorphism effect */
  color                  : #e0e3f0;
}

.expertise-card .cyan-text {
  color        : #00d4ff;
  /* Matching 'Hi, I'm David' */
  font-size    : 1.8rem;
  margin-bottom: 20px;
}

.highlight-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 20px;
  margin               : 25px 0;
}

.highlight-item {
  background   : rgba(255, 255, 255, 0.03);
  padding      : 15px;
  border-radius: 8px;
  border-left  : 3px solid #00d4ff;
  /* Visual cue for focus */
}

@media screen and (max-width: 768px) {
  .highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.highlight-item p span {
  color      : #00d4ff;
  /* Highlighting your tools/datasets */
  font-weight: 600;
}

/* Container Spacing */
.skill-categories-grid {
  margin-top: 40px;
}

/* Category Boxes */
.skill-category-box {
  background   : rgba(255, 255, 255, 0.03);
  border       : 1px solid rgba(0, 212, 255, 0.1);
  padding      : 30px 20px;
  border-radius: 12px;
  text-align   : center;
  transition   : all 0.3s ease;
  height       : 100%;
  margin-bottom: 20px;
}

.skill-category-box:hover {
  transform   : translateY(-5px);
  background  : rgba(255, 255, 255, 0.05);
  border-color: #00d4ff;
  box-shadow  : 0 10px 30px rgba(0, 0, 0, 0.3);
}

.category-icon {
  font-size    : 30px;
  color        : #00d4ff;
  margin-bottom: 15px;
}

.skill-category-box h3 {
  font-size     : 18px;
  color         : #ffffff;
  margin-bottom : 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Skill Badges (Tags) */
.skill-tags {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 8px;
}

.badge {
  background   : rgba(0, 212, 255, 0.1);
  color        : #00d4ff;
  border       : 1px solid rgba(0, 212, 255, 0.3);
  padding      : 6px 12px;
  border-radius: 4px;
  font-size    : 13px;
  font-weight  : 500;
  transition   : all 0.3s ease;
}

.badge:hover {
  background: #00d4ff;
  color     : #0f172a;
}

/* Highlighting the Math Section specifically */
.highlight-border {
  border    : 1px solid rgba(0, 212, 255, 0.5);
  background: rgba(0, 212, 255, 0.02);
}

.badge.highlight {
  border-color: #00d4ff;
  font-weight : bold;
}

/* Competency Grid (Soft Skills) */
.competency-section {
  margin-top: 50px;
  text-align: center;
  padding   : 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.competency-grid {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 20px;
  margin-top     : 20px;
}

.comp-item {
  font-size  : 16px;
  color      : rgba(255, 255, 255, 0.7);
  display    : flex;
  align-items: center;
}

.comp-item::before {
  content     : "▹";
  color       : #00d4ff;
  margin-right: 8px;
  font-size   : 20px;
}

/*************************/
/*********  WORK *********/
/*************************/

.work-intro-card {
  background   : #ffffff;
  padding      : 15px 25px;
  /* Increased slightly for better text breathing room */
  margin-bottom: 25px;
  /* Gives a small gap before the projects start */
  border-radius: 8px;
  box-shadow   : 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left  : 5px solid #007bff;
  transition   : all 0.3s ease;
}

.work-intro-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform : translateX(5px);
}

.work-accent-text {
  font-family: "Quicksand", Arial, sans-serif;
  font-size  : 1.8rem;
  color      : #000;
  line-height: 1.5;
  margin     : 0;
}

/* ==========================================================================
   PROJECT SECTION - HARMONIZED DATA PORTFOLIO STYLE
   ========================================================================== */

/* Project Grid - Robust & Responsive */
.project-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap                  : 30px;
  padding              : 20px 0;
}

/* Project Card  */
.project-card {
  background    : #161e31;
  border        : 1px solid rgba(255, 255, 255, 0.05);
  border-radius : 12px;
  padding       : 25px;
  height        : 100%;
  display       : flex;
  flex-direction: column;
  position      : relative;
  overflow      : hidden;
  box-shadow    : 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  transition    : transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* -- Project Hover Effect -- */
.project-card:hover {
  transform   : translateY(-8px);
  border-color: #00d4ff;
  box-shadow  : 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Project Tags */
.project-tag {
  font-family   : "Quicksand", Arial, sans-serif;
  font-size     : 1.4rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding       : 5px 12px;
  border-radius : 4px;
  display       : inline-block;
  margin-bottom : 20px;
}

/* Tag Variants - Using your specific logic */
.project-tag.analytics {
  background: rgba(255, 255, 255, 0.05);
  color     : #ffffff;
}

.project-tag.engineering {
  background: rgba(0, 212, 255, 0.2);
  color     : #00d4ff;
}

.project-tag.science {
  background: rgba(191, 85, 236, 0.2);
  color     : #bf55ec;
}

.project-tag.bi {
  background: rgba(46, 204, 113, 0.18);
  color     : #2ecc71;
}

/* Image Handling */
.card-image img {
  width        : 100%;
  height       : auto;
  object-fit   : cover;
  border-radius: 8px;
  transition   : transform 0.5s ease;
}

/* Project Info Content */
.project-info {
  padding-top   : 1.5rem;
  display       : flex;
  flex-direction: column;
  flex-grow     : 1;
}

.card-title {
  color        : #00d4ff;
  font-size    : 1.7rem;
  font-family  : "Quicksand", sans-serif;
  font-weight  : 700 !important;
  margin-bottom: 1rem !important;
}

/* Objective Text */
.card-objective {
  font-size    : 1.3rem;
  color        : #94a3b8;
  margin-bottom: 1.2rem;
  line-height  : 1.6;
}

/* The Insight Box */
.card-insight-box {
  background-color: rgba(0, 212, 255, 0.07);
  /* Subtle Cyan glow */
  border-left     : 4px solid #00d4ff;
  padding         : 1rem;
  border-radius   : 0 8px 8px 0;
  margin-bottom   : 1.5rem;
  font-size       : 1.2rem;
  color           : rgba(255, 255, 255, 0.9);
  display         : flex;
  align-items     : flex-start;
  gap             : 12px;
}

.card-insight-box i {
  color    : #00d4ff;
  font-size: 1.1rem;
}

/* Meta Labels (Tools/Sources) */
.card-meta {
  margin-top    : auto;
  padding-top   : 1.2rem;
  border-top    : 1px solid rgba(255, 255, 255, 0.05);
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.meta-group {
  display    : flex;
  align-items: center;
  gap        : 10px;
  color      : #94a3b8;
  font-size  : 0.9rem;
  padding    : 5px 0;
}

.meta-label {
  color         : #00d4ff;
  text-transform: uppercase;
}

/* Technologies Used */
.project-tech {
  margin-bottom: 20px;
}

.project-tech span {
  /*font-family: "Courier New", Courier, monospace;*/
  font-family  : ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size    : 1.2rem;
  color        : #ffffff;
  background   : rgba(255, 255, 255, 0.1);
  padding      : 3px 8px;
  border-radius: 4px;
  margin-right : 6px;
  margin-bottom: 6px;
  display      : inline-block;
}

/* View Link - Interactive underline */
.view-link {
  text-decoration: none;
  color          : #00d4ff;
  font-weight    : 700;
  font-size      : 1.4rem;
  position       : relative;
  display        : inline-block;
  margin-top     : 10px;
}

.view-link::after {
  content   : "";
  position  : absolute;
  left      : 0;
  bottom    : -2px;
  width     : 0;
  height    : 2px;
  background: #00d4ff;
  transition: width 0.3s ease;
}

.project-card:hover .view-link::after {
  width: 100%;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
    /* Stack cards on mobile */
  }

  .card-title {
    font-size: 1.4rem;
  }
}







/* ==========================================================================
   EDUCATION & CERTIFICATIONS SECTION
   ========================================================================== */

/*.daviefolio-education {
  padding   : 100px 0;
  background: #0b1120;
   Deepest blue for contrast 
}
*/
/* --- Timeline Styling (Left Side) --- */
.timeline-centered {
  position     : relative;
  margin: 20px 5px 30px 5px;
}

/* The vertical line connecting entries */
.timeline-centered::before {
  content   : '';
  position  : absolute;
  left      : 0;
  top       : 0;
  bottom    : 0;
  width     : 2px;
  background: linear-gradient(to bottom, #00d4ff 0%, rgba(0, 212, 255, 0) 100%);
}

.timeline-entry-card {
  position     : relative;
  margin-bottom: 40px;
  padding-left : 30px;
}

/* Timeline Bullet */
.timeline-entry-card::before {
  content      : '';
  position     : absolute;
  left         : -6px;
  top          : 5px;
  width        : 14px;
  height       : 14px;
  border-radius: 50%;
  background   : #0b1120;
  border       : 3px solid #00d4ff;
  z-index      : 1;
}

.timeline-label h2 {
  font-size  : 1.6rem;
  font-weight: 700;
  color      : #ffffff;
  display    : flex;
  align-items: center;
  gap        : 15px;
}

.badge-ongoing {
  font-size     : 1rem;
  background    : rgba(0, 212, 255, 0.1);
  color         : #00d4ff;
  padding       : 4px 10px;
  border-radius : 20px;
  border        : 1px solid rgba(0, 212, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.edu-meta {
  font-size    : 1rem;
  color        : #94a3b8;
  margin-bottom: 15px;
}

.edu-institution {
  color      : #00d4ff;
  font-weight: 700;
}

.timeline-label p {
  color      : rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* --- Certification Card (Right Side) --- */
.cert-wrapper-card {
  background   : #161e31;
  border       : 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding      : 30px;
  height       : 100%;
  box-shadow   : 0 20px 50px rgba(0, 0, 0, 0.3);
}

.cert-heading {
  color         : #ffffff;
  font-size     : 1.4rem;
  font-weight   : 700;
  margin-bottom : 25px;
  position      : relative;
  padding-bottom: 10px;
}

.cert-heading::after {
  content   : '';
  position  : absolute;
  left      : 0;
  bottom    : 0;
  width     : 40px;
  height    : 3px;
  background: #00d4ff;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
  
.cert-card {
  text-decoration: none !important;
  padding: 5px 15px;
  background           : rgba(255, 255, 255, 0.02);
  border               : 1px solid rgba(255, 255, 255, 0.05);
  border-radius        : 10px;
  transition           : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.cert-card::after {
  content: attr(data-tooltip); /* use data-tooltip instead of title */
  position: absolute;
  bottom: 80%; /* above the card */
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cert-card:hover::after {
  opacity: 1;
}

.cert-card:hover {
  background  : rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.4);
  transform   : translateX(8px);
}

.cert-name {
  display: block;
  font-size: 1.2rem;
  color: #cbd5e1;
  margin-top: 4px;
}

.cert-org {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #a5b4fc;
  display: block;
}

/* Animation for Entrance */
.edu-part .animate-box {
  opacity   : 0;
  transition: all 0.6s ease;
}




/*******************************/
/********* BLOG CSS *********/
/*******************************/


/* ==========================================================================
   TECHNICAL ARTICLES (BLOG) SECTION
   ========================================================================== */

/* --- Section Headers --- 
.blog-title-box {
  display: block;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 4px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-left: 2px;
}*/

.blog-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap                  : 20px;
  padding              : 20px 0;
}

/* --- Blog Entry Card --- */
.blog-entry-card {
  background     : #161e31;
  /* Matched to Project Cards */
  border         : 1px solid rgba(255, 255, 255, 0.05);
  border-radius  : 12px;
  padding        : 25px;
  height         : 100%;
  display        : flex;
  flex-direction : column;
  transition     : transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /*margin-bottom: 30px;*/
}

.blog-entry-card:hover {
  transform   : translateY(-10px);
  border-color: #00d4ff;
  box-shadow  : 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- Typography & Content --- */
.blog-entry-card .card-title {
  color        : #00d4ff;
  font-size    : 1.5rem;
  line-height  : 1.4;
  margin-bottom: 12px !important;
  font-weight  : 700 !important;
}

.meta-info {
  margin-bottom: 20px;
  font-size    : 0.9rem;
  color        : #94a3b8;
  display      : flex;
  gap          : 20px;
}

.meta-info i {
  color       : #00d4ff;
  margin-right: 5px;
}

.blog-entry-card p {
  color      : rgba(255, 255, 255, 0.7);
  font-size  : 1.4rem;
  line-height: 1.7;
}

.heading-spacing {
  color      : #ffffff;
  font-size  : 1.4rem;
  margin     : 30px 0 20px 0 !important;
  font-weight: 600 !important;
}

/* --- Technical Accents (Code Blocks) --- */
.code-block {
  font-family  : 'Courier New', Courier, monospace;
  background   : rgba(0, 212, 255, 0.1);
  color        : #00d4ff;
  padding      : 2px 6px;
  border-radius: 4px;
  font-size    : 0.9em;
  font-weight  : 600;
}

/* --- Highlight Box (Quotes/Insights) --- */
.highlight-box {
  background : rgba(255, 255, 255, 0.03);
  border-left: 3px solid #00d4ff;
  padding    : 15px 20px;
  margin     : 25px 0;
  font-style : italic;
}

.highlight-box p {
  margin-bottom: 0 !important;
  color        : #ffffff;
}

/* --- Workflow/Stack Card --- */
.workflow-card {
  background   : rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding      : 20px;
  margin-top   : auto;
  /* Pushes stack to bottom of card */
}

.text-accent {
  color         : #00d4ff;
  font-size     : 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom : 15px !important;
}

/*
.tool-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
*/







/* Container for the workflow */
.workflow-list {
  display       : flex;
  flex-direction: column;
  padding       : 0;
  margin        : 0;
  font-size     : 1.2rem;
}

.workflow-list .list-item {
  position       : relative;
  padding        : 6px 10px;
  background     : rgba(0, 212, 255, 0.03);
  /* Subtle brand tint */
  border         : 1px solid rgba(0, 212, 255, 0.15);
  border-radius  : 6px;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 25px;
  /* Space for the arrow */
  list-style     : none;
}

/* 1. The Vertical Line */
.workflow-list .list-item:not(:last-child)::after {
  content   : "";
  position  : absolute;
  bottom    : -20px;
  left      : 50%;
  width     : 2px;
  height    : 15px;
  background: #00d4ff;
  transform : translateX(-50%);
}

/* 2. The Arrow Head (Triangle) */
.workflow-list .list-item:not(:last-child)::before {
  content     : "";
  position    : absolute;
  bottom      : -25px;
  left        : 50%;
  transform   : translateX(-50%);
  width       : 0;
  height      : 0;
  border-left : 6px solid transparent;
  border-right: 6px solid transparent;
  border-top  : 8px solid #00d4ff;
  /* This creates the downward point */
}

/* Remove spacing from the final step */
.workflow-list .list-item:last-child {
  margin-bottom: 0;
  border       : 1px solid #00d4ff;
  /* Highlight the final output */
}









/* --- CTA Link --- */
.view-link {
  display        : inline-block;
  margin-top     : 25px;
  color          : #00d4ff;
  font-weight    : 700;
  text-decoration: none;
  transition     : color 0.3s ease;
}

.view-link:hover {
  color          : #ffffff;
  text-decoration: underline !important;
}














/*******************************/
/********* CONTACT CSS *********/
/*******************************/

/* --- General Layout --- */
.daviefolio-contact {
  background-color: #0f172a;
  /*padding         : 50px 0 30px 0 !important;*/
  font-family     : "Inter", sans-serif;
  /* Use a clean tech font */
}

.contact-row-flex {
  display    : flex;
  flex-wrap  : wrap;
  align-items: stretch;
}

/* --- Left Card --- */
.contact-form-card {
  background   : linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  padding      : 40px;
  height       : 100%;
  border-radius: 8px 0 0 8px;
  box-shadow   : 5px 5px 20px rgba(0, 0, 0, 0.1);
  border-right : none;
}

/* --- Right Card --- */
.contact-info-card {
  background     : linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
  color          : #ffffff;
  padding        : 40px;
  border-radius  : 0 8px 8px 0;
  /* Rounded corners only on right */
  height         : 100%;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  box-shadow     : 5px 5px 20px rgba(0, 0, 0, 0.1);
  position       : relative;
  overflow       : hidden;
}

/* -- Subtle to glow behind contact info -- */
.contact-info-card::before {
  content : "";
  position: absolute;
  top     : -50%;
  right   : -50%;
  width   : 200px;
  height  : 200px;
  background: radial-gradient(circle,
      rgba(0, 212, 255, 0.1) 0%,
      transparent 70%);
  z-index: 0;
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
  .contact-row-flex {
  display    : flex;
  flex-wrap  : wrap;
  align-items: stretch;
  flex-direction: column;
  }

  .contact-form-card {
    width: 100%;
    max-width: 100%;
    margin: 0; 
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    padding: 25px;
  }

  .contact-info-card {
    border-radius: 0 0 8px 8px;
    /* Rounded bottom only */
  }
}

/* --- Inputs --- */
.custom-input {
  background   : rgba(255, 255, 255, 0.03);
  border-bottom: 2px solid #2d545e;
  color        : #ffffff;
  transition   : all 0.3s ease;
}

/*-- Ensure headings inside are white -- */
.contact-form-card h5,
.contact-info-card h4,
.contact-info-card .lead {
  color: #ffffff !important;
}

.custom-input::placeholder {
  color: #a0a6b5;
}

.custom-input:focus {
  outline     : none;
  box-shadow  : none;
  border-color: #007bff;
  color       : #ffffff;
}

/* --- Button --- */
.btn-submit-data {
  background-color: #2563eb;
  /* Primary Blue */
  color           : #fff;
  border-radius   : 4px;
  padding         : 12px 30px;
  border          : none;
  font-weight     : 600;
  text-transform  : uppercase;
  letter-spacing  : 1px;
  font-size       : 12px;
  width           : 100%;
  transition      : 0.3s;
}

.btn-submit-data:hover {
  background-color: #1d4ed8;
  transform       : translateY(-2px);
}

/* --- Text & Links --- */
.contact-info-card h4 {
  color        : #fff;
  font-weight  : 700;
  margin-bottom: 20px;
}

.contact-subtext {
  color        : #cbd5e1;
  /* Light grey text */
  margin-bottom: 30px;
  line-height  : 1.6;
  text-align   : left;
}

.contact-list {
  padding   : 0;
  list-style: none;
}

.contact-list li {
  margin-bottom: 15px;
  display      : flex;
  align-items  : center;
}

.contact-list li i {
  color       : #60a5fa;
  /* Lighter blue for icons */
  margin-right: 15px;
  font-size   : 18px;
}

.contact-list li a {
  color          : #ffffff;
  text-decoration: none;
  opacity        : 0.9;
  transition     : 0.3s;
}

.contact-list li a:hover {
  opacity        : 1;
  color          : #60a5fa;
  text-decoration: none;
}

/*======================================
  MAP
======================================*/
/* 
This is useful for ensuring that your map (or any other element with the ID map) is 
fully responsive in width, adapting to the size of its parent container, 
while maintaining a fixed height of 700 pixels.
width: 100%;: This makes the element take up the full width of its parent container.
height: 700px;: This sets the height of the element to 700 pixels.
*/

#map {
  width : 100%;
  height: 700px;
}

@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

/*====================================
  PAGITATION
======================================*/
/*This removes any internal spacing within the .pagination elements.*/
.pagination {
  padding: 0;
}

.pagination li {
  margin: 2px;
}

.pagination li a {
  color                : #000;
  background           : transparent;
  color                : #000;
  margin               : 2px;
  -webkit-border-radius: 0;
  -moz-border-radius   : 0;
  -ms-border-radius    : 0;
  border-radius        : 0;
}

.pagination li a:first-child {
  -webkit-border-radius: 2px;
  -moz-border-radius   : 2px;
  -ms-border-radius    : 2px;
  border-radius        : 2px;
}

.pagination li a:focus,
.pagination li a:hover {
  background: #2c98f0;
  color     : #fff;
  border    : 1px solid #2c98f0;
}

@media screen and (max-width: 768px) {
  .pagination li a {
    padding: 7px 15px;
  }
}

.pagination li.active a {
  background: #2c98f0;
  border    : 1px solid #2c98f0 !important;
}

.pagination li.active a:focus,
.pagination li.active a:hover {
  background: #2c98f0;
  color     : #fff;
  border    : 1px solid #2c98f0 !important;
}

/*====================================
  BUTTON
======================================*/

/*====================================
                 JS   
======================================*/
.js .animate-box {
  opacity: 0;
}

.col-padding {
  padding: 10px !important;
}

/*====================================
                 END   
======================================*/