/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* 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 */
  --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: #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;
}

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

/*--------------------------------------------------------------
# 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;
  z-index: 997;
  border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  flex-direction: column;
}

.header .profile-img img {
  margin: 15px auto;
  display: block;
  width: 120px;
  border: 8px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

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

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

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

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

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

/* Menú navegable con scroll interno */
.navmenu {
  flex-grow: 1;
  overflow-y: auto;
  max-height: calc(100vh - 350px); /* Ajustá según el contenido superior */
  padding-right: 5px;
}

/* Scrollbar estilizado */
.navmenu::-webkit-scrollbar {
  width: 6px;
}

.navmenu::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
  border-radius: 3px;
}

.navmenu::-webkit-scrollbar-track {
  background: transparent;
}

/* Ítems del nav */
.navmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navmenu li {
  margin-bottom: 10px;
}

.navmenu a.nav-link {
  display: flex;
  align-items: center;
  color: var(--default-color);
  text-decoration: none;
  transition: 0.3s;
}

.navmenu a.nav-link:hover {
  color: var(--accent-color);
}

.navmenu a.nav-link i.navicon {
  margin-right: 8px;
}

/* Switch de tema alineado a la izquierda */
.theme-toggle-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
}

.theme-toggle-label {
  cursor: pointer;
}

.theme-toggle-slider {
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 20px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}

.theme-toggle-icons {
  display: flex;
  gap: 8px;
  color: var(--default-color);
}

.theme-toggle-checkbox {
  display: none;
}

/* Botón para toggle en móviles */
.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%);
}

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

/* Ocultar sidebar en móviles por defecto */
@media (max-width: 1199px) {
  .header {
    left: -100%;
  }
}

/* Mostrar cuando está activo */
.header.header-show {
  left: 0;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

.mobile-nav-toggle {
  display: none;
}

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

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

.navmenu a,
.navmenu a:focus {
  color: var(--nav-color);
  padding: 10px 5px; /* Reduced padding */
  font-family: var(--nav-font);
  font-size: 14px; /* Optional: Adjust font size */
  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 0; /* Adjust margin for dropdown */
  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);
}

.logo {
  display: flex;
  justify-content: center; /* Center horizontally */
}

.sitename {
  margin: 0; /* Ensure no extra margins */
  text-align: center; /* Center text within the <h1> element if needed */
}

header#header {
  overflow: hidden;
}

html {
  scroll-behavior: smooth; /* Ensures smooth scrolling */
}

.section {
  padding: 40px 0; /* Adjust this value to decrease vertical space */
  margin: 0 auto;
}

@media (max-width: 768px) {
  .section {
    padding: 30px 0; /* Adjust for smaller screens */
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: transparent;
  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: 60px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  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 #808080; 
}

.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
--------------------------------------------------------------*/
/* General Styles for About Section */
.about {
  padding: 40px 0;
  background: transparent; /* Fondo completamente transparente */
}

.about .container {
  max-width: 1140px; /* Ensure content width is controlled */
  margin: 0 auto;
}

.about .section-title {
  margin-bottom: 40px;
}

.about .section-title h2 {
  font-weight: 700;
  font-size: 28px; /* Increase title size for better emphasis */
  margin-bottom: 10px;
  text-align: left; /* Align title to the left */
}

.about .section-title p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  text-align: left; /* Align first paragraph to the left */
}

/* Content Layout */
.about .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align content to the left */
}

.about .content img {
  max-width: 100%; /* Ensure image is responsive */
  height: auto;
}

.about .content h2 {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px; /* Add space below the heading */
}

.about .content p.fst-italic {
  font-style: italic;
  margin: 20px 0;
}

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

.about .content ul li {
  margin-bottom: 15px; /* Adjust spacing between items */
  display: flex;
  align-items: center;
}

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

.about .content ul i {
  font-size: 18px; /* Slightly larger icon size */
  margin-right: 8px;
  color: var(--accent-color);
  line-height: 1;
}

.about .content .py-3 {
  margin: 20px 0; /* Add vertical spacing */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .about {
    padding: 30px 0;
    background: transparent; /* Asegurar fondo transparente en pantallas pequeñas */
  }

  .about .container {
    padding: 0 15px; /* Add padding for smaller screens */
  }

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

  .about .content img {
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
  }
}

/*--------------------------------------------------------------
# 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: transparent;
}

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

/*--------------------------------------------------------------
# Courses Section
--------------------------------------------------------------*/

.courses {
  --background-color: transparent;
  padding: 60px 0;
}

.courses .course-item {
  background-color: #87CEEB; 
  border-radius: 10px;
  padding: 20px;
  transition: 0.3s;
  margin-bottom: 30px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.courses .course-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.courses .course-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
  color: var(--heading-color);
  text-transform: uppercase;
  font-family: var(--heading-font);
}

.courses .course-content p {
  font-size: 14px;
  color: var(--text-color);
}

.courses .course-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
  display: flex;
  justify-content: space-between; /* Align title to left and button to right */
  align-items: center;
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Download Button Styles */
.resume .resume-title .btn-download-cv {
  background-color: var(--accent-color); /* Button background color */
  color: white; /* Text color */
  padding: 10px 20px; /* Padding for the button */
  border-radius: 5px; /* Rounded corners */
  font-weight: 600; /* Bold text */
  text-decoration: none; /* No underline */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  display: inline-flex; /* Flexbox for icon alignment */
  align-items: center; /* Vertically center icon and text */
}

.resume .resume-title .btn-download-cv i {
  margin-right: 8px; /* Space between icon and text */
  font-size: 18px; /* Adjust icon size */
}

.resume .resume-title .btn-download-cv:hover {
  background-color: var(--accent-hover-color); /* Adjust hover color */
}

/* Responsive Layout */
@media (max-width: 768px) {
  .resume .resume-title {
    flex-direction: column; /* Stack title and button vertically on small screens */
    align-items: flex-start; /* Align items to the left */
  }

  .resume .btn-download-cv {
    margin-top: 10px; /* Add space between title and button */
  }
}

/* Resume Item Styles */
.resume-header {
  display: flex;
  justify-content: space-between; /* Align title and button */
  align-items: center;
  margin-bottom: 20px; /* Space below the header */
}

.resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin: 0; /* Remove default margin for alignment */
}

.download-cv-btn {
  background-color: var(--accent-color);
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-color);
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.download-cv-btn i {
  margin-right: 10px;
  font-size: 18px;
}

.download-cv-btn:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: scale(1.05);
}

/* Adjustments for dark mode to ensure violet accent */
@media (prefers-color-scheme: dark) {
  .download-cv-btn {
    background-color: var(--accent-color);
    color: white;
    border: 2px solid var(--accent-color);
  }
  
  .download-cv-btn:hover {
    background-color: transparent;
    color: var(--accent-color);
  }
}

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

.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-item h5 {
  font-size: 16px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

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

.resume-item ul li {
  padding-bottom: 10px;
  position: relative;
  padding-left: 15px;
}

.resume-item ul li .project-title {
  font-weight: bold;
  font-size: 14px;
  color: var(--accent-color);
  margin-bottom: 5px;
  display: block;
}

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

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

/* Media Query for Responsiveness */
@media (max-width: 575px) {
  .resume-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .download-cv-btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}

/* Media Query for Responsiveness */
@media (max-width: 575px) {
  .resume .resume-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .resume .download-cv-btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}
.resume {
  background-color: transparent; /* Fondo completamente transparente */
}
/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio {
  --background-color: transparent;
}

.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 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

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

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

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}
.gslide-description.description-bottom {
    display: none;
}
/*--------------------------------------------------------------
# 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;
}

/* Keep the icon and its color unchanged on hover */
.services .service-item:hover .icon {
  background: var(--accent-color);
}

.services .service-item:hover .icon i {
  color: var(--contrast-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;
}
.services {
  background-color: transparent; /* Fondo completamente transparente */
}
/*--------------------------------------------------------------
# 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 Section Styles */
.contact .info-wrap {
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  display: flex;
  justify-content: space-between; /* Spread items horizontally */
  flex-wrap: wrap; /* Allow wrapping if items don't fit in one line */
  background-color: var(--contact-card-bg); /* Fondo adaptado al tema */
  border-radius: 15px; /* Opcional: da efecto de tarjeta */
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
    flex-direction: column; /* Stack items vertically on small screens */
  }
}

.contact .info-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 200px;
  margin-right: 20px;
  padding: 10px 0;
  box-sizing: border-box;
}

.contact .info-item:last-child {
  margin-right: 0;
}

.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-weight: 700;
  margin: 0;
}

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

.contact .info-item.cv {
  padding: 10px 0;
}

.contact .info-item.cv a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--accent-color);
}

.contact .info-item.cv i {
  margin-right: 10px;
}

.contact.section {
  padding: 60px 0;
  background: transparent;
}

#contact {
  padding-bottom: 300px;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .contact .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

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

/* === Variables de color para fondo de la tarjeta === */

/* Modo claro */
body {
  --contact-card-bg: #ffffff;
}

/* Modo oscuro */
body.dark-mode {
  --contact-card-bg: #1a1a1a;
}
/*--------------------------------------------------------------
# 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);
}
/*--------------------------------------------------------------
# Social Profile
--------------------------------------------------------------*/

.social-profiles {
  margin-top: 30px;
}

.social-icon {
  font-size: 24px; /* Adjust the size of the icons */
  color: var(--text-color); /* Matches the theme text color */
  margin: 0 10px; /* Spacing between icons */
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: var(--accent-color); /* Matches the theme accent color */
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
/* Night Mode Specific Styles */
body.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff; /* White text for general content */
  --accent-color: #a855f7; /* Bright purple for accents */
  --nav-color: #ffffff;
  --nav-hover-color: #a855f7;
  --nav-dropdown-background-color: #333333;
  --nav-dropdown-color: #ffffff;
  --nav-dropdown-hover-color: #a855f7;

  background-color: var(--background-color);
  color: var(--text-color);
}

/* Ensure percentage text in the Skills section is white in night mode */
body.dark-mode .progress .val {
  color: #ffffff; /* White text for the percentage values */
}

/* Night Mode Toggle Button Styles */
.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
}

.theme-toggle-btn:hover {
  color: var(--accent-color);
}

/* General Text Styles */
body.dark-mode p,
body.dark-mode ul li,
body.dark-mode span {
  color: var(--text-color); /* White text for paragraphs and list items */
}

/* Italic Text */
body.dark-mode p.fst-italic {
  color: var(--text-color); /* White text for italic paragraphs */
}

/* List Item Icons */
body.dark-mode ul.list-unstyled li i {
  color: var(--accent-color); /* Bright purple for list item icons */
}

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff; /* White text for headings */
}

/* Resume Titles */
body.dark-mode .resume-title,
body.dark-mode .resume-item h4,
body.dark-mode .resume-item h5,
body.dark-mode .resume-item .project-title {
  color: #a855f7; /* Bright purple for titles */
}

/* Resume Item Descriptions */
body.dark-mode .resume-item p,
body.dark-mode .resume-item ul li {
  color: #ffffff; /* White text for descriptions */
}

/* Sitename */
body.dark-mode .sitename {
  color: #a855f7; /* Bright purple for the site name */
}

/* Navbar */
body.dark-mode .navmenu a,
body.dark-mode .navmenu a:focus {
  color: #ffffff; /* White text in navbar */
}

/* Navbar active state and hover */
body.dark-mode .navmenu .active,
body.dark-mode .navmenu a:hover {
  color: #a855f7; /* Bright purple for active and hover states */
}

/* Social Links */
body.dark-mode .social-links a {
  color: #ffffff; /* White for social icons */
}

body.dark-mode .social-links a:hover {
  color: #a855f7; /* Bright purple on hover */
}

/* Contact Information */
body.dark-mode .contact-info {
  color: #ffffff; /* White for contact info */
}

body.dark-mode .course-item {
    background-color: #1e1e1e; /* Slightly lighter background for the content box */
    color: #ffffff; /* White text color for content */
}

body.dark-mode .course-item h3 {
    color: #ffffff; /* White color for the course title */
}

body.dark-mode .course-item p {
    color: #d3d3d3; /* Lighter color for the course description */
}
/* toggle */
/* Container for the toggle switch */
.theme-toggle-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px; /* Add padding if needed to better position the toggle */
}

/* Hide the default checkbox */
.theme-toggle-checkbox {
  display: none;
}

/* Label for the toggle switch */
.theme-toggle-label {
  display: inline-block;
  width: 50px; /* Smaller width */
  height: 28px; /* Smaller height */
  background-color: #ffd966; /* Light yellow background for light mode */
  border-radius: 28px;
  position: relative;
  transition: background-color 0.3s;
}

/* Slider inside the toggle */
.theme-toggle-slider {
  position: absolute;
  width: 22px; /* Smaller size */
  height: 22px; /* Smaller size */
  background-color: #f4f4f4; /* Light background for light mode */
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s, background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icons container */
.theme-toggle-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Sun and moon icon sizes and colors */
.theme-toggle-icons i {
  font-size: 16px; /* Adjust size as needed */
  color: transparent; /* Default color to transparent to hide icons */
  transition: opacity 0.3s, color 0.3s;
  position: absolute;
}

/* Ensure icons are centered within the slider */
.sun-icon, .moon-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* Visible icon for light mode */
body:not(.dark-mode) .theme-toggle-slider .sun-icon {
  color: #ffd966; /* Yellow sun icon */
  opacity: 1; /* Ensure the sun icon is visible */
}

body:not(.dark-mode) .theme-toggle-slider .moon-icon {
  color: transparent; /* Hide moon icon */
  opacity: 0; /* Ensure the moon icon is not visible */
}

/* Visible icon for dark mode */
body.dark-mode .theme-toggle-slider .sun-icon {
  color: transparent; /* Hide sun icon */
  opacity: 0; /* Ensure the sun icon is not visible */
}

body.dark-mode .theme-toggle-slider .moon-icon {
  color: #6c6cff; /* Light blue moon icon */
  opacity: 1; /* Ensure the moon icon is visible */
}

/* When the checkbox is checked */
.theme-toggle-checkbox:checked + .theme-toggle-label {
  background-color: #6c6cff; /* Light blue background for dark mode */
}

/* Move the slider when checked */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
  transform: translateX(22px); /* Move slider */
  background-color: #1e1e1e; /* Dark slider */
}

/* Set icon color according to the mode */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider .sun-icon {
  color: #ffffff; /* White sun icon */
}

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider .moon-icon {
  color: #ffffff; /* White moon icon */
}
.quote {
  font-style: italic;
  font-family: var(--default-font);
  color: var(--default-color);
  margin-top: 15px;
}
#snow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Entre la imagen (1) y el contenido (3) */
  pointer-events: none; /* Para no interferir con interacciones */
}
#background-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Debe estar detrás de todo el contenido */
  pointer-events: none;
  opacity: 0.2; /* Ajusta la visibilidad */
}