/**
* Template Name: iPortfolio
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */

header {
  display: none;
}

:root {
  --default-font: "Raleway", "Cutive Mono", "Space Mono", Arial, serif;
  --heading-font: "Raleway", "Cutive Mono", "Space Mono", Arial, serif;
  --nav-font: "Raleway", sans-serif;
  --default-font-size: 17px;
  --default-a-font: "Raleway";
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #272829; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #050d18; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ff9000; /*#149ddd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #a8a9b4; /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ff9000; /*#149ddd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --header-background-color: #040b14;
  --header-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: var(--default-font-size);
}

p {
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
  font-family: var(--default-a-font);
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

h1 {
  text-align: center;
}

hr {
  height: 2px;
  width: 100%;
  margin: 0; /* Remove margin */
  color: #495057;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: var(--header-background-color);
  --default-color: var(--header-color);
  --heading-color: var(--header-color);
  color: var(--default-color);
  background-color: var(--background-color);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 15px;
  width: 300px;
  transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
  border-right: 1px solid
    color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .profile-img img {
  margin: 100px auto;
  margin-bottom: 15px;
  display: block;
  width: 120px;
  border-radius: 50%;
}

.header .logo {
  line-height: 1;
  margin-bottom: 15px;
}

.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo h1 {
  font-family: var(--nav-font);
  font-size: 24px;
  margin: 0;
  font-weight: 400;
  color: var(--heading-color);
}

.header .social-links {
  margin: 0 0 20px 0;
}

.header .social-links a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  margin: 0 2px;
  border-radius: 50%;
  text-align: center;
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

.header .social-links a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@media (min-width: 1200px) {
  .header ~ main,
  .header ~ #footer {
    margin-left: 300px;
  }
}

@media (max-width: 1199px) {
  .header {
    left: -100%;
  }
}

.header.header-show {
  left: 0;
}

.header .header-toggle {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  transition: background-color 0.3s;
}

.header .header-toggle:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.mobile-nav-toggle {
  display: none;
}

.navmenu {
  padding: 0;
  z-index: 9997;
  display: flex;
  justify-content: center;
}

.navmenu ul {
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
}

.navmenu a,
.navmenu a:focus {
  color: var(--nav-color);
  padding: 15px 10px;
  font-family: var(--nav-font);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: 0.3s;
  width: 100%;
}

.navmenu a .navicon,
.navmenu a:focus .navicon {
  font-size: 20px;
  margin-right: 10px;
}

.navmenu a .toggle-dropdown,
.navmenu a:focus .toggle-dropdown {
  font-size: 12px;
  line-height: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.navmenu a .toggle-dropdown:hover,
.navmenu a:focus .toggle-dropdown:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-hover-color);
}

.navmenu a:hover .navicon,
.navmenu .active .navicon,
.navmenu .active:focus .navicon {
  color: var(--accent-color);
}

.navmenu .active .toggle-dropdown,
.navmenu .active:focus .toggle-dropdown {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotate(180deg);
}

.navmenu .dropdown {
  display: block;
}

.navmenu .dropdown a,
.navmenu .dropdown a:focus {
  color: --nav-dropdown-color;
}

.navmenu .dropdown a:hover,
.navmenu .dropdown .active,
.navmenu .dropdown .active:focus {
  color: var(--nav-dropdown-hover-color);
}

.navmenu .dropdown ul {
  position: static;
  display: none;
  z-index: 99;
  padding: 5px 10px;
  margin: 5px 10px;
  background-color: var(--nav-dropdown-background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.navmenu .dropdown ul ul {
  background-color: rgba(33, 37, 41, 0.1);
}

.navmenu .dropdown > .dropdown-active {
  display: block;
  background-color: rgba(33, 37, 41, 0.03);
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li + li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li + li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 50px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 70%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}

.hero p {
  margin: 5px 0 0 0;
  font-size: 26px;
}

.hero p span {
  letter-spacing: 1px;
  border-bottom: 2px solid var(--accent-color);
}

.hero .social-links {
  margin-top: 25px;
}

.hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

.hero .social-links a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h1 {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}

.social-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #495057;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
  margin-top: 20px;
}

.social-icons a:last-child {
  margin-right: 0;
}

.social-icons a:hover {
  background-color: var(--accent-color);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about p {
  font-size: 17px;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: left;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 25px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}

.download-cv {
  text-align: center;
  margin-top: 20px;
}

.btn-download {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: white;
  text-decoration: none;
  font-size: var(-- --default-font-size);
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-download:hover {
  background-color: #495057;
}

/* .line {
  border-bottom: 1px solid #888;
  all: unset;
} */

/* === Skills: list layout for <li> with header + description === */

/* base list reset (scoped to skills section) */
.skills .skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* each item stacks header then description */
.skills .skills-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
}

/* header combines icon + strong label */
.skills .li-header {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

/* optional: make the chevron subtle and sized with text */
.skills .li-header .bi {
  font-size: 0.95em;
  opacity: 0.8;
}

/* keep your existing color for .skills-item (strong) and add weight */
.skills .skills-item {
  color: var(--heading-color); /* from your existing rule */
  font-weight: 700;
}

/* description under the header */
.skills .li-desc {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.5;
  /* indent to align with the header text (not the icon).
     Tweak if your icon size/gap differs */
  padding-left: calc(8px + 1em);
}

/* compact spacing on smaller screens */
@media (max-width: 576px) {
  .skills .skills-list li {
    margin: 10px 0;
  }
  .skills .li-desc {
    line-height: 1.45;
  }
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.resume .resume-item {
  padding: 0 0 10px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
  font-size: var(-- --default-font-size);
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 5%);
  margin-bottom: 5px;
}

.resume .resume-item h5 {
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: right;
}

.resume .resume-item ul {
  padding-left: 20px;
  padding-top: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 2px;
}

.resume .resume-item:last-child {
  padding-bottom: 0;
}

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

.resume-item small {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  float: right;
}

.resume-item span {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/

.portfolio {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

.slider::-webkit-scrollbar {
  height: 8px;
}
.slider::-webkit-scrollbar-track {
  background: #e6e6e6;
}

.project-card,
.case-study-card {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  align-content: space-between;
}

.project-card {
  width: 300px;
}
.case-study-card {
  width: 400px;
}

.project-card:hover,
.case-study-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.project-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
.case-study-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
}

.case-study-header {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-info {
  padding: 15px;
}

.project-footer {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-title {
  font-size: 18px;
  margin: 0 0 6px;
  color: #333;
}

.project-description {
  font-size: 16px;
  color: #666;
  margin: 0;
  font-family: "Cutive Mono", monospace;
}

/* meta (date) next to title uses same font but lighter */
.project-meta {
  color: #888;
  font-size: 13px;
}

/* one-line clamp for the summary text */
.clamp-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accordion */
.project-accordion {
  border-radius: 8px;
  background: #fafafa;
  padding: 10px 12px;
  border: 1px solid #eee;
}

.project-accordion + .project-accordion {
  margin-top: 8px;
}

.project-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-accordion summary::-webkit-details-marker {
  display: none;
}

/* custom chevron */
.project-accordion summary::after {
  content: "▸";
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 14px;
  opacity: 0.7;
}

.project-accordion[open] summary::after {
  transform: rotate(90deg);
}

/* details content */
.project-details {
  margin: 10px 0 0;
  padding-left: 18px;
  padding-top: 8px;
  color: #555;
  font-size: 14px;
  font-family: "Cutive Mono", monospace;
}

.project-details li {
  margin: 6px 0;
  line-height: 1.45;
}

/* footer links */
.project-footer .social-icons a {
  margin-top: 0;
}

.project-footer a {
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
  color: var(--default-color);
  padding-right: 10px;
}

.project-footer a:hover {
  color: #e68a00;
}

.view-project-button::after {
  content: "→";
  margin-left: 6px;
  font-size: 16px;
}

/*--------------------------------------------------------------
# Awards Section
--------------------------------------------------------------*/
.awards {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.award-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: auto;
  width: 300px;
  display: table;
  overflow: hidden;
}
.award-info {
  height: 270px;
  background: #fff;
  opacity: 0;
  display: block;
  align-content: center;
}

.award-info h3 {
  font-size: 20px;
  text-align: center;
}
.award-info p {
  padding: 20px 0px;
  text-align: center;
}

.award-info span {
  color: var(--default-color);
  font-size: 16px;
  display: block;
  text-align: center;
}
@media screen and(max-width: 768px) {
  .award-info {
    opacity: 1;
    background: rgba(#fff, 0.6);
  }
}

.award:hover,
.award-info:hover {
  opacity: 1;
}

/*--------------------------------------------------------------
# Certificates Section
--------------------------------------------------------------*/
.float-right {
  float: right !important;
}

.certificates {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.certificate-item {
  margin: 15px 5px;
}

.certificate-image {
  width: 70px;
  height: 70px;
}

.verify-certificate {
  color: var(--default-color);
  padding-left: 10px;
}