/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* 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: #149ddd;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --header-background-color: #040b14;
  --contrast-color: #ffffff;
  --card-bg: #f8f9fa;
  /* 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: #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);
}

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

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


.stat-number::after {
  content: "+";
  margin-left: 6px;
  font-weight: 300;
  font-size: 30px;
}

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

/*--------------------------------------------------------------
# Global Header - Updated Modern Design
--------------------------------------------------------------*/
.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: 30px 20px;
  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%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header .profile-img {
  margin: 20px 0;
  display: block;
}

.header .profile-img img {
  width: 150px;
  height: 150px;
  border: 3px solid #004a7f;
  border-radius: 50%;
  object-fit: cover;
}

.header .logo {
  line-height: 1;
  margin: 20px 0 30px 0;
  text-align: center;
}

.header .logo h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: 0.5px;
}

/* Navigation Menu - Compact Card Style */
.header .navmenu {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 15px 0;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.header .navmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.header .navmenu a,
.header .navmenu a:focus {
  color: var(--nav-color);
  padding: 12px 20px;
  font-family: var(--nav-font);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: all 0.3s ease;
  width: 100%;
  border-radius: 12px;
  margin: 0 5px;
  width: calc(100% - 10px);
}

.header .navmenu a span {
  display: inline-block;
}

.header .navmenu a .navicon {
  font-size: 18px;
  flex-shrink: 0;
}

.header .navmenu a:hover,
.header .navmenu .active,
.header .navmenu .active:focus {
  color: var(--contrast-color);
  background-color: #004a7f;
}

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

/* Social Links - Circular Pill Style */
.header .social-links {
  margin: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.header .social-links a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--default-color);
  margin: 0;
  border-radius: 50%;
  text-align: center;
  width: 44px;
  height: 44px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header .social-links a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-3px);
}

/* Header Toggle Button */
.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: all 0.3s ease;
  border: none;
}

.header .header-toggle:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: scale(1.1);
}

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

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

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

@media (max-width: 768px) {
  .header {
    width: 100%;
    left: -100%;
    bottom: auto;
    height: auto;
    max-height: 100vh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .header .navmenu {
    margin-bottom: 20px;
  }

  .header .profile-img img {
    width: 80px;
    height: 80px;
  }

  .header .logo h1 {
    font-size: 18px;
  }

  .header .navmenu a {
    font-size: 14px;
    padding: 10px 15px;
  }
}

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

.navmenu {
  padding: 0;
  z-index: 9997;
}

.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: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# 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: 60px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 50px;
  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 {
  width: 100%;
  height: 100vh;
  background: url("../img/herobg.png") top center;
  background-size: cover;
}

#hero:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#hero .hero-container {
  position: relative;
  z-index: 2;
  min-width: 300px;
}

#hero h1 {
  margin: 0 0 10px 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}

#hero p {
  color: #fff;
  margin-bottom: 50px;
  font-size: 26px;
  font-family: "Poppins", sans-serif;
}

#hero p span {
  color: #fff;
  padding-bottom: 4px;
  letter-spacing: 1px;
  border-bottom: 3px solid #149ddd;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

@media (max-width: 600px) {

  #hero p {
    font-size: larger;
  }
}

.button {
  background-color: #004a7f;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  margin-top: 10px;
  text-align: center;
  align-items: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
  0% {
    background-color: #33006f;
    -webkit-box-shadow: 0 0 3px #33006f;
  }

  50% {
    background-color: #662d91;
    -webkit-box-shadow: 0 0 40px #662d91;
  }

  100% {
    background-color: #33006f;
    -webkit-box-shadow: 0 0 3px #33006f;
  }
}

@-moz-keyframes glowing {
  0% {
    background-color: #33006f;
    -moz-box-shadow: 0 0 3px #33006f;
  }

  50% {
    background-color: #662d91;
    -moz-box-shadow: 0 0 40px #662d91;
  }

  100% {
    background-color: #33006f;
    -moz-box-shadow: 0 0 3px #33006f;
  }
}

@-o-keyframes glowing {
  0% {
    background-color: #33006f;
    box-shadow: 0 0 3px #33006f;
  }

  50% {
    background-color: #662d91;
    box-shadow: 0 0 40px #662d91;
  }

  100% {
    background-color: #33006f;
    box-shadow: 0 0 3px #33006f;
  }
}

@keyframes glowing {
  0% {
    background-color: #33006f;
    box-shadow: 0 0 3px #33006f;
  }

  50% {
    background-color: #662d91;
    box-shadow: 0 0 40px #662d91;
  }

  100% {
    background-color: #33006f;
    box-shadow: 0 0 3px #33006f;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about-section {
  position: relative;
}

.about-section-title {
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
}



.about-section-title h2 {
  font-size: 3rem;
  font-weight: 700;
  background: var(--default-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

.section-title .subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.profile-card {
  background: var(--background-color);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 40px;
}

.profile-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.profile-image-wrapper img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color), transparent 95%);
}

.intro-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 30px;
}

.intro-text strong {
  color: var(--heading-color);
  font-weight: 600;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stat-card {
  /* background-color: color-mix(in srgb, var(--accent-color), transparent 95%); */
  background-color: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  /* transform: translateY(-5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 95%); */
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(20, 157, 221, 0.15);
  border-color: var(--accent-color);
}

.stat-card .number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading-color);
  display: block;
}

.stat-card .label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 5px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.skill-category {
  /* background-color: color-mix(in srgb, var(--accent-color), transparent 95%); */
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.skill-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(20, 157, 221, 0.15);
  border-color: var(--accent-color);

}

.skill-category h5 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.skill-category h5 i {
  font-size: 1.5rem;
}

.skill-item {
  padding: 10px 0;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.skill-item i {
  color: var(--heading-color);
  margin-top: 3px;
  font-size: 0.8rem;
}

.skill-label {
  color: var(--heading-color);
  font-weight: 600;
  min-width: fit-content;
}

.commitment-box {
  background: var(--card-bg);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  padding: 30px;
  margin-top: 40px;
  text-align: center;
}

.commitment-box p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0;
}


@media (max-width: 768px) {
  .section-title h2 {
    font-size: 2rem;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* About Section Animation */
.about-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.profile-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease;
}

.profile-card.animate {
  opacity: 1;
  transform: translateY(0);
}

.stat-card {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.6s ease;
}

.stat-card.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.skill-category {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.6s ease;
}

.skill-category.animate {
  opacity: 1;
  transform: translateY(0);
}

.commitment-box {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease;
}

.commitment-box.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animations */
.stat-card:nth-child(1).animate {
  transition-delay: 0.3s;
}

.stat-card:nth-child(2).animate {
  transition-delay: 0.4s;
}

.stat-card:nth-child(3).animate {
  transition-delay: 0.5s;
}

.skill-category:nth-child(1).animate {
  transition-delay: 0.6s;
}

.skill-category:nth-child(2).animate {
  transition-delay: 0.7s;
}

.skill-category:nth-child(3).animate {
  transition-delay: 0.8s;
}

.skill-category:nth-child(4).animate {
  transition-delay: 0.9s;
}

.skill-category:nth-child(5).animate {
  transition-delay: 1.0s;
}

.commitment-box.animate {
  transition-delay: 1.1s;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

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

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
/* New classes for Education section only - no changes to existing experience classes */

.education-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
}

.education-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.education-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.education-header {
  position: relative;
  padding: 20px;
  text-align: center;
  color: white;
}

.education-header.vizz {
  background: #573073;
}

.education-header.policycon {
  background: #d04528;
}

.education-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 5% auto; ;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.education-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.education-institution {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: var(--contrast-color);
}

.education-body {
  padding: 25px;
  text-align: center;
}

.education-degree {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-colo00r);
  margin: 0 0 8px;
}

.education-date {
  font-size: 1rem;
  margin-bottom: 20px;
}

.education-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.education-bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--default-color);
}

.education-bullets li::before {
  content: "•";
  color: var(--accent-color);
  font-weight: bold;
  position: absolute;
  left: 0;
}

@media (max-width: 768px) {
  .education-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .education-body {
    padding: 20px;
  }
}


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

.resume .experience-resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
}

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

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

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

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

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

.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);
}

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

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  margin: 0 10px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }

}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  position: relative;
}

.services .service-item .icon {
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transition: 0.5s;
  border: 1px solid var(--accent-color);
  margin-right: 20px;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 24px;
  line-height: 0;
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.services .service-item .title a {
  color: var(--heading-color);
}

.services .service-item .title a:hover {
  color: var(--accent-color);
}

.services .service-item .description {
  line-height: 24px;
  font-size: 14px;
}

.customLinks {
  text-decoration: none;
  color: var(--default-color);
}

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

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background-color: var(--contrast-color);
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
}

.testimonials .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid var(--contrast-color);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 40px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb,
      var(--background-color),
      transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type="text"]::placeholder,
.contact .php-email-form input[type="email"]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type="submit"] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

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

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

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

.experience-section {
  /* --background-color: color-mix(in srgb, var(--accent-color), transparent 95%); */
  color: var(--default-color);
  padding: 20px;
}

.section-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 40px;
  padding-left: 10px;
  max-width: 1300px;
  margin-inline: auto;
}

.experience-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  max-width: 1300px;
  margin: 0 auto;
}

.experience-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding-bottom: 25px;
  text-align: center;
  /* box-shadow: 0 0 15px rgba(0,0,0,0.3); */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-card:hover {
  transform: translateY(0px);
  cursor: pointer;
  box-shadow: 0 12px 30px  color-mix(in srgb, var(--accent-color), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.experience-card h2 {
  margin: 0;
  padding: 12px;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--background-color);
}

.experience-card .octaloop {
  background: #2f2f80;
}

.experience-card .vizz {
  background: #43a1dd;
}

.experience-card .mlify {
  background: #a361df;
}

.experience-card .policycon {
  background: #d04528;
}

.experience-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 20px auto 10px;
  overflow: hidden;
  /* keeps image perfectly circular */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  /* fallback background */
}

.experience-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* keeps logo proportions clean */
  border-radius: 50%;
}


h3 {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--default-color);
}

.date {
  font-size: 0.9rem;
  color: var(--default-color);
  margin-bottom: 10px;
}

ul {
  text-align: left;
  padding: 0 30px;
}

li {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--default-color);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .experience-card {
    text-align: left;
  }

  h3,
  .date {
    text-align: center;
  }

  .section-heading {
    text-align: left;
    border-left: none;
    padding-left: 0;
  }

  .logo {
    margin: 15px 0 10px 25px;
  }
}

/* Experience Section Animation */
.experience-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.experience-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.experience-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.experience-card.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for cards */
.experience-card:nth-child(1).animate {
  transition-delay: 0.2s;
}

.experience-card:nth-child(2).animate {
  transition-delay: 0.3s;
}

.experience-card:nth-child(3).animate {
  transition-delay: 0.4s;
}

.experience-card:nth-child(4).animate {
  transition-delay: 0.5s;
}

/* --------------------------------------------------------------- */
/* Projects section */

/* --- General Layout --- */
.projects-section {
  padding: 80px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Header with buttons */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto 40px;
}

.project-section-title {
  position: relative;

}


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

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


.project-section-title .subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
}


/* Buttons */
.projects-nav {
  display: flex;
  gap: 8px;
}

.proj-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--accent-color);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.proj-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 157, 221, 0.15);
  border-color: var(--accent-color);
}

/* Project Cards */
.projects-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
  outline: none;
}

.projects-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.projects-track::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 calc((100% - 64px) / 3);
  /* 3 cards per view with gap */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  transition: all .2s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.project-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 40px rgba(20, 157, 221, 0.12);
}

.project-image {
  height: 240px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.05);
}

.project-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-body h3 {
  font-size: 1.2rem;
  color: var(--heading-color);
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.3;
}

.project-body p {
  margin: 0 0 20px;
  /* color: #666; */
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
}

.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--accent-color);
  background-color: #fff;
  color: var(--accent-color);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: all .15s ease;
  box-shadow: 0 4px 12px rgba(20, 157, 221, 0.2);
  margin-top: auto;
  /* Pushes to bottom */
}

.btn-view:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  color: var(--background-color);
  /* box-shadow: 0 8px 20px rgba(20,157,221,0.3); */
}

.btn-view i {
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .project-card {
    flex: 0 0 calc((100% - 32px) / 2);
  }
}

@media (max-width: 700px) {
  .projects-section {
    padding: 60px 16px;
  }

  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .project-section-title {
    font-size: 28px;
  }

  .project-card {
    flex: 0 0 100%;
    min-height: 400px;
  }

  .projects-track {
    gap: 20px;
  }
}

/* Projects Section Animation */
.projects-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.projects-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.project-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s ease;
}

.project-card.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger animation for project cards */
.project-card:nth-child(1).animate {
  transition-delay: 0.2s;
}

.project-card:nth-child(2).animate {
  transition-delay: 0.3s;
}

.project-card:nth-child(3).animate {
  transition-delay: 0.4s;
}

.project-card:nth-child(4).animate {
  transition-delay: 0.5s;
}

.project-card:nth-child(5).animate {
  transition-delay: 0.6s;
}

.project-card:nth-child(6).animate {
  transition-delay: 0.7s;
}

.bg-full{
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
   width: 100%;
}

.skills-section {
  max-width: 1300px;
  margin: 0 auto;
  
}

.section-header {
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #050d18;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
}

.section-description {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-top: 30px;
  max-width: 100%;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.skill-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 30px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); */
  /* transition: all 0.3s ease; */
  /* border: 1px solid rgba(0, 0, 0, 0.04); */
}

.skill-card:hover {
  /* transform: translateY(8); */
  box-shadow: 0 12px 30px  color-mix(in srgb, var(--accent-color), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.skill-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.skill-icon {
  width: 48px;
  height: 48px;
  color: var(--accent-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(20, 157, 221, 0.3);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.skill-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: 0.5px;
}

.skill-percentage {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
  min-width: 60px;
  text-align: right;
}

.progress-container {
  position: relative;
  height: 10px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color) 0%, #0d7ab8 100%);
  border-radius: 10px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
  
}

@media (max-width: 1024px) {
  section-title h2 {
    font-size: 2rem;
  }

  .skills-section {
    padding: 60px 16px;
  }
  .section-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  section-title h2 {
    font-size: 2rem;
  }

  .skills-section {
    padding: 60px 16px;
  }
  .section-header h2 {
    font-size: 2rem;
  }

  .skills-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .skill-card {
    padding: 25px;
  }

  .skill-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .skill-name {
    font-size: 1rem;
  }

  .skill-percentage {
    font-size: 1.3rem;
  }
}

.skill-card.animate {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.skill-card:nth-child(1).animate {
  animation-delay: 0.1s;
}

.skill-card:nth-child(2).animate {
  animation-delay: 0.2s;
}

.skill-card:nth-child(3).animate {
  animation-delay: 0.3s;
}

.skill-card:nth-child(4).animate {
  animation-delay: 0.4s;
}

.skill-card:nth-child(5).animate {
  animation-delay: 0.5s;
}

.skill-card:nth-child(6).animate {
  animation-delay: 0.6s;
}

.skill-card:nth-child(7).animate {
  animation-delay: 0.7s;
}

.skill-card:nth-child(8).animate {
  animation-delay: 0.8s;
}

.skill-card:nth-child(9).animate {
  animation-delay: 0.9s;
}

.skill-card:nth-child(10).animate {
  animation-delay: 1.0s;
}