:root {
  --backgroundColorDark: #171717;
  --backgroundColorLight: #ffffff;
  --backgroundColorDarkMobile: #0b0b0b;
  /* <!--color dark--> */

  --white87: rgba(255, 255, 255, 0.87);
  --white60: rgba(255, 255, 255, 0.6);
  --white38: rgba(255, 255, 255, 0.38);

  --surface00dp: #121212;
  --surface01dp: #1e1e1e;
  --surface02dp: #212121;
  --surface03dp: #242424;
  --surface04dp: #272727;
  --surface06dp: #2c2c2c;
  --surface08dp: #2d2d2d;
  --surface12dp: #323232;
  --surface16dp: #353535;
  --surface24dp: #373737;

  --white: #ffffff;
  --dark: #000000;

  --glowColor: rgba(255, 255, 255, 0.782);
  --glowColorLight: rgba(0, 0, 0, 0.782);
  /* --accentColor: #61191dcb; */
  --accentColor: #7b2bb1;

  --accentColorText: rgba(255, 255, 255, 0.87);
  /*   --accentColorTextOpacity: #d32f2fb2; */
  /* --accentColorText: #61191D; */
}

/* Switch estilo toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0;
  margin-bottom: 3px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white38);
  transition: 0.4s;
  border-radius: 20px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--white87);
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--surface01dp);
}
input:checked + .slider:before {
  transform: translateX(20px);
}
/* Switch estilo toggle */

/* btn */
body.dark-theme button {
  --bs-btn-border-color: var(--white87);
  --bs-btn-hover-bg: var(--accentColor);
  --bs-btn-hover-border-color: var(--white87);
  --bs-btn-color: var(--white87);
  --bs-btn-hover-color: var(--white87);
}
/* btn */

/* button language-switche*/

#language-button {
  background-color: transparent;
  border: none;
}
.nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* button language-switche*/

/* button theme-img*/

#theme-button {
  background-color: transparent;
  border: none;
  border-radius: 0px;
}
.theme-icon {
  width: 24px;
  margin-left: 9px;
  margin-bottom: 3px;
}
@media (max-width: 991px) {
  .theme-icon {
    margin-left: 0;
    margin-bottom: 3px;
  }
  .navbar {
    backdrop-filter: blur(3px);
    background: rgba(0, 0, 0, 0.2);
  }
}
/* button theme-img*/

/* Navigation Bar */
.navbar {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  transition: background-color 0.5s ease-in-out;
}
.navbar:hover {
  backdrop-filter: blur(3px);
}
#navbarItem {
  padding: 0;
}
.navbar p::after {
  content: "";
  display: block;
  height: 3px;
  background-color: var(--accentColor);
  transform: scale(0, 1);
  transform-origin: center;
  transition: transform 0.25s;
}
.navbar p:hover::after {
  transform: scale(1, 1);
}
.navbar p {
  color: var(--white60);
  margin: 0;
  padding: 0;
  transition: color 0.3s ease-in-out;
}
.navbar p:hover {
  color: var(--accentColorText);
}
.navbar-collapse {
  justify-content: flex-end;
}
.theme-switcher img {
  opacity: 0.8;
}
/* Agregar transición al cambio de tema */
#theme-toggle:checked + .slider {
  background-color: var(--accentColor);
}
#theme-toggle:checked + .slider:before {
  transform: translateX(18px);
}
.slider {
  transition: background-color 0.3s ease-in-out;
}
@media (max-width: 991px) {
  .navbar {
    display: none !important;
  }
}
/* Navigation Bar */

/* mobile-desktop */

/* .mobile-desktop #mobileDesktopContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
} */
/* 
.mobile-desktop card {
  background-color: var(--white38);
  border-radius: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} */
.mobile-desktop card {
  background-color: var(--surface04dp);
  border-radius: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 13px;
  font-size: 24px;
}
.mobile-desktop .col {
  padding: 0 13px 22px 13px;
}
.mobile-desktop {
  background-color: var(--backgroundColorDark);
  background-image: url("https://elfrikiamv.com/media/img/wallpaper-v1-resize.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 99%;
  position: relative !important;
  height: 100vh;
  justify-content: center !important;
  align-items: center !important;
  animation: fadeIn 1s ease-in-out;
}
/* .mobile-desktop {
  background-color: var(--backgroundColorDark);
  background-image: url("https://elfrikiamv.com/media/img/logo-elfrikiamv-dev-light-en-horizontal.webp");
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 99%;
  position: relative !important;
  height: 100vh;
  justify-content: center !important;
  align-items: center !important;
  animation: fadeIn 1s ease-in-out;
}

.mobile-desktop .navbarMobile {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  box-shadow: 0px 0px 7px 8px var(--surface00dp);
  padding: 13px 0;
  z-index: 999;
}
*/
.mobile-desktop .app-icon {
  width: 55px;
  height: 55px;
  border-radius: 7px;
  background-color: var(--white87);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 7px 1px var(--white38);
}
.mobile-desktop .chrome-icon i {
  font-size: 48px;
  color: var(--surface01dp);
}
.mobile-desktop .navbarMobile ul {
  list-style: none;
  padding: 0;
  margin: 0 7%;
  display: flex;
  justify-content: space-around;
}

/* mobile-desktop */

/* Mobile Navbar Card */
.mobile-navbar-card {
  display: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--surface08dp);
  box-shadow: 0px 0px 7px 8px var(--surface00dp);
  z-index: 1000;
}
.mobile-navbar-card .col {
  margin: 12px 0;
}
.mobile-navbar-card i {
  font-size: 24px;
  cursor: pointer;
}
.mobile-navbar-card .col {
  padding: 0;
}
@media (max-width: 991px) {
  .mobile-navbar-card {
    display: block !important;
  }
}
/* Mobile Navbar Card */

/* toolbar */

.fixed-toolbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--surface04dp);
  z-index: 1000;
  box-shadow: 0 0 7px 4px var(--surface00dp);
}
.fixed-toolbar p {
  font-size: large;
  margin: 0;
  padding: 0;
}
.fixed-toolbar #btnSettings {
  font-size: 28px;
  margin: 0;
  padding: 0 17px;
  margin-top: -2px;
}
.fixed-toolbar #btnBack {
  font-size: 24px;
  margin: 0;
  padding: 3px 17px 0 17px;
}
#dotcom {
  margin: 0;
  padding: 0 3px;
}
/* .fixed-toolbar .fa {
  padding: 0;
} */
.fixed-toolbar button {
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
}

.fixed-toolbar .dropdown-menu {
  background: var(--surface08dp) !important;
  min-width: 0 !important;
  box-shadow: 0 0 7px 8px var(--surface00dp);
}
.fixed-toolbar .dropdown-menu p {
  color: var(--white87);
  font-size: medium !important;
}
.fixed-toolbar .dropdown-menu button,
.fixed-toolbar .dropdown-menu p,
.fixed-toolbar .dropdown-menu img {
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 991px) {
  .fixed-toolbar {
    display: block;
  }
}

/* toolbar */

/* simple line */

.simpleLine {
  border-top: 1px solid var(--white60);
}
/* simple line */

/* effect glow */

#glow {
  text-shadow: 0 0 1vw var(--glowColor);
}
/* effect glow */

/* Welcome Section */

.welcome-section {
  position: relative;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: url("https://elfrikiamv.com/media/img/elfrikiamvImg.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 100%;
  opacity: 99%;
  display: flex;
  animation: fadeIn 1s ease-in-out;
  margin-left: 7%;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.welcome-section p {
  margin-bottom: 0 !important;
}
.welcome-section p,
.welcome-section button,
.welcome-section img {
  margin-left: 33% !important;
}
.welcome-section #elfrikiamvLogoText {
  font-size: 6.5rem;
  font-family: "Covered By Your Grace", cursive;
  text-shadow: 0 0 0.2vw var(--glowColor);
}
.welcome-section #andDevLogoText {
  font-size: 2.5rem;
  margin-top: -2%;
  color: var(--accentColor);
}
.welcome-section #WelcomeText .highlight {
  color: var(--accentColor);
  font-family: "Covered By Your Grace", cursive;
  font-size: xx-large;
}
.welcome-section #WelcomeText {
  margin-bottom: 1%;
  font-size: x-large;
  color: var(--white60);
}
.welcome-section #logoName-icon {
  height: 182px;
  width: auto;
}
.welcome-section #welcomeContact {
  display: flex;
  justify-content: center;
  align-items: center;
}
.welcome-section #btnDownloadCV {
  margin-right: 12px;
}
.welcome-section #welcomeContactIcon {
  font-size: 36px;
  margin-right: 12px;
  cursor: pointer;
  transition: color 0.2s, text-decoration 0.2s;
}
.welcome-section #welcomeContactIcon:hover {
  color: var(--accentColor);
  /* transform: scale(1.05); */
}
@media (max-width: 884px) {
  .welcome-section,
  .welcome-section p,
  .welcome-section button,
  .welcome-section img {
    margin-left: 0% !important;
  }
  .welcome-section {
    background-image: url("https://elfrikiamv.com/media/img/elfrikiamvImgMobile.jpg");
    background-position: center center;
    background-size: 100% auto;
    background-color: var(--backgroundColorDarkMobile);
  }
  .welcome-section #elfrikiamvLogoText {
    font-size: 5.4rem;
  }
  .welcome-section #andDevLogoText {
    font-size: 2.1rem;
    margin-top: -6%;
  }
  .welcome-section #WelcomeText .highlight {
    font-size: x-large;
  }
  .welcome-section #WelcomeText {
    font-size: large;
    margin-bottom: 0.5rem !important;
  }
  .welcome-section #logoName-icon {
    height: 162px;
    width: auto;
  }
}

@media (max-width: 500px) {
  .welcome-section {
    background-size: auto 100%;
  }
}
@media (max-height: 500px) {
  .welcome-section {
    position: relative;
    height: 100%;
  }
}
/* Welcome Section */

/* About me Section */

.about-section {
  position: relative;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
@media (max-width: 991px) {
  .about-section {
    padding: 40px 0;
  }
}
.bigSimpleTitle {
  font-size: x-large;
  margin-bottom: 2rem;
}
#simpleTitle,
.simpleTitle {
  font-family: "Covered By Your Grace", cursive;
  position: relative;
  font-size: x-large;
  color: var(--accentColorText);
  z-index: 1;
}
.aboutContainer {
  margin-top: 1%;
}
.aboutContainer .fst-italic {
  color: var(--white60);
}
.aboutContainer .card {
  background-color: transparent !important;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 0.3s ease-in-out;
  padding: 1% 3%;
  color: var(--white87);
  display: grid;
  align-items: center;
}
.tooltip-arrow,
.tooltip-inner {
  --bs-tooltip-bg: var(--accentColor);
  --bs-tooltip-color: var(--white);
}
.contact-section .card:hover,
.projects-section .card:hover,
.custom-card-large .card:hover,
.custom-card .card:hover,
.cardSimpleTitleSkills:hover,
.aboutContainer .card:hover {
  box-shadow: var(--accentColor) 0 0px 22px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
}
.cardSimpleTitleSkills .titleMySkills {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
  transition: opacity 0.8s, visibility 0.8s, height 0.8s;
}
.cardSimpleTitleSkills .otherSkills img:hover {
  transform: scale(1.1);
  position: relative;
  z-index: 1;
}
.cardSimpleTitleSkills .otherSkills img {
  margin: 0;
  height: 28px;
  width: auto;
  transition: transform 0.2s ease-in-out;
}
.cardSimpleTitleSkills .titleMySkills p,
.cardSimpleTitleSkills .otherSkills p {
  margin: 0;
}
.cardSimpleTitleSkills .otherSkills {
  display: grid;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: visible !important;
  transition: opacity 0.8s, height 0.8s;
  position: relative;
  z-index: 0;
}
.cardSimpleTitleSkills .otherSkills .row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardSimpleTitleSkills {
  background-color: transparent !important;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 0.3s ease-in-out;
  padding: 1% 0;
  margin: 0 4%;
  color: var(--white87);
  display: grid;
  align-items: center;
  margin-bottom: 12px;
}
.cardSimpleTitleSkills .col {
  padding: 0 0;
}
.cardSimpleTitleSkills:hover {
  /* transform: scale(1.02); */
  &:hover {
    .titleMySkills {
      opacity: 0;
      visibility: hidden;
      height: 0;
      overflow: hidden;
    }
    .otherSkills {
      opacity: 1;
      visibility: visible;
      height: auto;
    }
  }
}
/* .aboutContainer .card:hover {
  transform: scale(1.02);
} */
.aboutContainer .col {
  padding: 0 10px;
}
.aboutContainer #txtIam {
  padding-left: 66px;
}
.aboutContainer #txtAcademic {
  padding: 0 66px 21px 10px;
}
.aboutContainer #txtIJust {
  margin-bottom: 21px;
}
/* cad animated */

.containerSkills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.custom-card {
  margin: 10px;
  perspective: 800px;
  cursor: default;

  &:hover {
    .card-info {
      transform: translateY(0);
    }
    .card-info p {
      opacity: 1;
    }
    .card-bg,
    .card {
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      transform: rotateY(0) rotateX(0);
    }
  }
}
.custom-card .card {
  width: 182px;
  height: 152px;
  background-color: transparent;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.custom-card .card-bg {
  position: absolute;
  top: -5%;
  left: 0%;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}
.custom-card .card-info {
  padding: 7px;
  text-align: left;
  position: absolute;
  bottom: 0;
  color: var(--white87);
  /* wea del txt de la card altura */
  transform: translateY(65%);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  p {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
.containerSkillsMobile h1,
.custom-card .card-info h1 {
  font-size: large;
  font-weight: 700;
  color: var(--accentColorText);
  text-shadow: var(--surface12dp) 0 0px 3px;
}
/* cad animated */

/* large cad animated */

.custom-card-large {
  margin: 10px;
  perspective: 800px;
  cursor: default;

  &:hover {
    .card-info {
      transform: translateY(0);
    }
    .card-info p {
      opacity: 1;
    }
    .card-bg,
    .card {
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      transform: rotateY(0) rotateX(0);
    }
  }
}
.custom-card-large .card {
  width: 182px;
  height: 152px;
  background-color: transparent;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.custom-card-large .card-bg {
  position: absolute;
  top: -5%;
  left: 0%;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}
.custom-card-large .card-info {
  padding: 7px;
  text-align: left;
  position: absolute;
  bottom: 0;
  color: var(--white87);
  /* wea del txt de la card altura */
  transform: translateY(55%);
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  p {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
.custom-card-large .card-info h1 {
  font-size: large;
  font-weight: 700;
  color: var(--accentColorText);
  text-shadow: var(--surface12dp) 0 0px 3px;
}
/* large cad animated */

/* container Skills for Mobile screen */
.containerSkillsMobile {
  display: none;
}
.containerSkillsMobile .col {
  margin-bottom: 22px;
}
.containerSkillsMobile p {
  color: var(--white87);
}
.containerSkillsMobile .card {
  position: relative;
}

@media (min-width: 576px) {
  .containerSkillsMobile #cardLeft {
    margin-right: 7px;
  }
  .containerSkillsMobile #cardRight {
    margin-left: 7px;
  }
}

.containerSkillsMobile .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3%;
  opacity: 50%;
  /* filter: saturate(50%); */
}

.containerSkillsMobile .card-content {
  position: relative;
  z-index: 1;
}
@media (max-width: 991px) {
  .containerSkillsMobile .card-content h1 {
    margin-top: 0.5rem;
  }
}

/* container Skills for Mobile screen */

/* timeline */

.skillsContainer .academicContainer ul,
.skillsContainer .academicContainer li {
  list-style: none;
  padding: 0;
}
.skillsContainer .academicContainer li {
  padding-bottom: 0.1rem;
  border-left: 1px solid var(--white87);
  position: relative;
  padding-left: 20px;
  margin-left: 10px;
  &:last-child {
    border: 0px;
    padding-bottom: 0;
  }
  .skillsContainer .academicContainer &:before {
    content: "";
    width: 15px;
    height: 15px;
    background: var(--backgroundColorDark);
    border: 1px solid var(--backgroundColorDark);
    box-shadow: 3px 3px 0px var(--white87);
    box-shadow: 3px 3px 0px var(--white87);
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: 0px;
  }
}
/* timeline */
@media (max-width: 991px) {
  .containerSkills {
    display: none !important;
  }
  .containerSkillsMobile {
    display: block !important;
  }

  .cardSimpleTitleSkills {
    background-color: transparent !important;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0,
      inset var(--white87) 0 0 0 1px, inset transparent 0 0 0 6px;
    transition: transform 0.3s ease-in-out;
    padding: 1% 0;
    margin: 0 -1.5%;
    color: var(--white87);
    display: grid;
    align-items: center;
    margin-bottom: 14px;
  }
}
@media (max-width: 767px) {
  .cardSimpleTitleSkills {
    background-color: transparent !important;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0,
      inset var(--white87) 0 0 0 1px, inset transparent 0 0 0 6px;
    transition: transform 0.3s ease-in-out;
    padding: 1% 0;
    margin: 0 -2%;
    color: var(--white87);
    display: grid;
    align-items: center;
    margin-bottom: 14px;
  }
}
@media (max-width: 575px) {
  .cardSimpleTitleSkills {
    background-color: transparent !important;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0,
      inset var(--white87) 0 0 0 1px, inset transparent 0 0 0 6px;
    transition: transform 0.3s ease-in-out;
    padding: 1% 0;
    margin: 0 1%;
    color: var(--white87);
    display: grid;
    align-items: center;
    margin-bottom: 14px;
  }
}
@media (max-width: 622px) {
  .custom-card .card {
    width: 300px;
    height: 182px;
  }
  .custom-card-large .card {
    width: 300px;
    height: 182px;
  }
  .containerSkills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 1400px) {
  .about-section {
    position: relative;
    height: 100%;
  }
}
@media (max-width: 991px) {
  .aboutContainer .col {
    padding: 0 0px;
  }
  .aboutContainer #txtIam {
    padding-left: 12px;
    padding-right: 12px;
  }
  .aboutContainer #txtAcademic {
    padding: 0;
  }
  .aboutContainer #txtIJust {
    margin-bottom: 22px;
  }
}
@media (max-width: 575px) {
  .aboutContainer #txtIam {
    padding-left: 28px;
    padding-right: 28px;
  }
  .aboutContainer #txtAcademic {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 22px;
  }
}
@media (max-height: 917px) {
  .about-section {
    position: relative;
    height: 100%;
  }
}
/* About me Section */

/* Portfolio Section */

.portfolio-section {
  position: relative;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
@media (max-width: 991px) {
  .portfolio-section {
    padding: 40px 0;
  }
}
/* card animated xd */

/* .projects-section .main-box {
  height: 500px;
  width: 400px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
} */
.projects-section .card {
  height: 400px;
  width: 300px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.projects-section .card img {
  height: 128px;
  margin-bottom: 22px;
  margin-right: 2px;
  transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
}
.projects-section .card:hover img {
  opacity: 10%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.projects-section .card p {
  color: var(--white60);
  padding: 0px;
  margin: 0px;
  padding-bottom: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  transition: opacity 0.3s;
}
.projects-section .card:hover .titleCardProject {
  opacity: 0;
}
.projects-section .card .txtAboutProject p {
  opacity: 0;
  transition: opacity 0.4s;
  padding: 2.5rem 5px 0 5px;
  display: flex;
  text-align: center;
  flex-direction: column;
  /* justify-content: center; */
  height: 100%;
  /* margin-top: -22px !important; */
}
.projects-section .card:hover .txtAboutProject p {
  opacity: 1;
}
/* button github in cards */
.projects-section i.fa-solid:hover,
.projects-section i.fa-brands:hover {
  color: var(--accentColor);
}
.projects-section i.fa-solid,
.projects-section i.fa-brands {
  /* position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0; */
  font-size: 2rem;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
  cursor: pointer;
  margin: 5.1rem 0 1.5rem 0;
}
/* button github in cards */

/* card animated xd */

/* card */
/* View all projects link projects-section */
.projects-section .custom-link {
  color: var(--accentColor);
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}
.projects-section .custom-link:hover {
  color: var(--white87);
  text-decoration: underline;
}
.projects-section .custom-link:focus {
  outline: none;
  text-decoration: underline;
  color: var(--white87);
}
/* View all projects link projects-section */
.projectsAndroid-container {
  display: grid;
  grid-template-columns: repeat(2, 182px);
  grid-template-rows: repeat(2, 182px);
  gap: 16px;
  padding: 16px;
  justify-content: center;
  margin-bottom: 6%;
}
#cardPA-2 {
  background-color: transparent;
  border: 0px;
}
#cardPA-1,
#cardPA-3,
#cardPA-4 {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projectsWindows-container {
  display: grid;
  grid-template-columns: repeat(2, 182px);
  grid-template-rows: repeat(2, 182px);
  gap: 16px;
  padding: 16px;
  justify-content: center;
}
#cardPW-2,
#cardPW-4 {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cardPW-1 {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cardPW-3 {
  background-color: transparent;
  border: 0px;
}
.projectsWebsite-container {
  display: grid;
  grid-template-columns: repeat(2, 182px);
  grid-template-rows: repeat(1, 182px);
  gap: 16px;
  padding: 16px;
  justify-content: center;
}
#cardPWs-1,
#cardPWs-2 {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projectsFigma-container {
  display: grid;
  grid-template-columns: repeat(2, 182px);
  grid-template-rows: repeat(1, 182px);
  gap: 16px;
  padding: 16px;
  justify-content: center;
}
#cardPF-1,
#cardPF-2 {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-winProjects {
  display: none !important;
}
/* card */

@media (max-width: 991px) {
  .portfolio-section {
    position: relative;
    height: 100%;
  }
}
@media (max-width: 500px) {
  .projects-section .card .txtAboutProject p {
    padding: 1.5rem 5px 0 5px;
  }
  .projects-section i.fa-solid,
  .projects-section i.fa-brands {
    margin: 4.1rem 0 1.5rem 0 !important;
  }
}
@media (max-width: 991px) {
  .projects-section i.fa-solid,
  .projects-section i.fa-brands {
    margin: 3.1rem 0 1.5rem 0;
  }
  .projects-section img {
    height: 82px !important;
    width: auto;
  }
  #simpleTitle,
  .simpleTitle {
    font-size: x-large;
    margin-top: 1rem;
  }
  #androidProjectsTxt {
    margin-top: 0 !important;
  }
  .projects-section #custom-link-Col {
    margin: 0.5rem 0 0 0;
  }
  .bigSimpleTitle {
    font-size: xx-large;
    /* margin: 1rem 0 2rem 0; */
  }
  .projectsFigma-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(2, 142px);
    gap: 16px;
    padding: 0;
    justify-content: center;
  }
  .projectsWebsite-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(2, 142px);
    gap: 16px;
    padding: 0;
    justify-content: center;
  }
  .projectsWindows-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(2, 142px);
    gap: 16px;
    padding: 0;
    justify-content: center;
  }
  .projectsAndroid-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-template-rows: repeat(3, 142px);
    gap: 16px;
    padding: 0;
    justify-content: center;
    margin-bottom: 0%;
  }
  #cardPA-2,
  #cardPW-1,
  #cardPW-3 {
    display: none !important;
  }
  .title-winProjects {
    display: block !important;
  }
}
.projects-section .col {
  padding: 0;
}
@media (max-height: 900px) {
  .portfolio-section {
    position: relative;
    height: 100%;
  }
}
@media (max-width: 575px) {
  .projectsAndroid-container,
  .projectsWindows-container,
  .projectsWebsite-container,
  .projectsFigma-container {
    padding: 16px;
  }
}
/* Portfolio Section */

/* contact Section */

.contact-section {
  position: relative;
  height: 100vh;
  display: grid;
  align-items: center;
  padding: 50px 0;
}
@media (max-width: 991px) {
  .contact-section {
    padding: 40px 0;
  }
}

/* button fa in cards */
.contact-section i.fa-regular:hover,
.contact-section i.fa-solid:hover,
.contact-section i.fa-brands:hover {
  color: var(--accentColor);
}
.contact-section i.fa-regular,
.contact-section i.fa-solid,
.contact-section i.fa-brands {
  color: var(--white60);
  font-size: 2rem;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
  cursor: pointer;
  margin-bottom: 1rem;
}
/* button fa in cards */
.contactCards .card {
  color: var(--white87);
  background: transparent;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset var(--white87) 0 0 0 1px,
    inset transparent 0 0 0 6px;
  transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.contactCards .card img {
  height: 128px;
  width: auto;
  opacity: 10%;
  transition: opacity 0.3s ease-in-out, transform 0.6s ease-in-out;
  /* filter: brightness(0.5) saturate(0) contrast(1.2) blur(3px); */
}
.contactCards .card:hover img {
  opacity: 100%;
  top: 50%;
  left: 50%;
  transform: rotate(180deg);
}

.contact-section .card:hover .infoRedContact {
  opacity: 100%;
}
.contact-section .card .infoRedContact {
  margin: 3% 0 2% 0;
  opacity: 0;
  transition: opacity 0.4s;
}
.contactCards .simpleTitle {
  margin: 1rem 0 0.5rem 0;
}
.contactCards {
  padding: 0 54px;
}
.contactCards .col {
  padding: 0 11px;
}
@media (max-width: 991px) {
  .contactCards {
    padding: 0;
  }
  .contactCards .col {
    padding: 11px 0;
  }
}
@media (max-width: 575px) {
  .contactCards .col {
    padding: 11px 16px;
  }
  /* .contactCards .background-image {
    height: 100px;
    width: 100px;
    transition: filter 200ms linear, transform 182ms linear;
  } */
}
/* cads animated */
@media (max-width: 991px) {
  .contact-section {
    position: relative;
    height: 100%;
  }
}
/* contact Section */

/* Footer */

.footer-section {
  position: relative;
  padding: 3rem 0;
  background-color: var(--surface00dp);
  color: var(--white87);
}
.footer-section p {
  margin-bottom: 0;
}
.social-icons {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.social-icon img {
  height: 40px;
  width: 40px;
  margin: 0 10px;
  transition: transform 0.3s ease-in-out;
}
.social-icon {
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin: 0 10px;
  transition: transform 0.3s ease-in-out;
}
.social-icon:hover {
  transform: translateY(-10px);
}
.social-icon i {
  font-size: 1.5rem;
}

@media (max-width: 991px) {
  .footer-section .container {
    margin-bottom: 2.5rem;
  }
}
/* Footer */

/* background */

.light {
  position: absolute;
  width: 0px;
  box-shadow: var(--accentColor) 0px 0px 20px 2px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1; /* Asignamos un valor negativo para que esté detrás de otros elementos */
}

@media (max-width: 991px) {
  .light,
  .light22 {
    display: none;
  }
}

.x1,
.x2,
.x3,
.x4,
.x5,
.x6,
.x7,
.x8,
.x9 {
  -webkit-animation: floatUp 4s infinite linear;
  -moz-animation: floatUp 4s infinite linear;
  -o-animation: floatUp 4s infinite linear;
  animation: floatUp 4s infinite linear;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  left: 15%;
}
.x2 {
  -webkit-animation-duration: 7s;
  -moz-animation-duration: 7s;
  -o-animation-duration: 7s;
  animation-duration: 7s;
}
.x3 {
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-duration: 2.5s;
  transform: scale(0.5);
  left: -15%;
}
.x4 {
  -webkit-animation-duration: 4.5s;
  -moz-animation-duration: 4.5s;
  -o-animation-duration: 4.5s;
  animation-duration: 4.5s;
  transform: scale(1.2);
  left: -34%;
}
.x5 {
  -webkit-animation-duration: 8s;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  animation-duration: 8s;
  transform: scale(2.2);
  left: -57%;
}
.x6 {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  transform: scale(0.8);
  left: -81%;
}
.x7 {
  -webkit-animation-duration: 5.3s;
  -moz-animation-duration: 5.3s;
  -o-animation-duration: 5.3s;
  animation-duration: 5.3s;
  transform: scale(3.2);
  left: 37%;
}
.x8 {
  -webkit-animation-duration: 4.7s;
  -moz-animation-duration: 4.7s;
  -o-animation-duration: 4.7s;
  animation-duration: 4.7s;
  transform: scale(1.7);
  left: 62%;
}
.x9 {
  -webkit-animation-duration: 4.1s;
  -moz-animation-duration: 4.1s;
  -o-animation-duration: 4.1s;
  animation-duration: 4.1s;
  transform: scale(0.9);
  left: 85%;
}
@-webkit-keyframes floatUp {
  0% {
    top: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 0vh;
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -100vh;
    opacity: 0;
  }
}
@-moz-keyframes floatUp {
  0% {
    top: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 0vh;
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -100vh;
    opacity: 0;
  }
}
@-o-keyframes floatUp {
  0% {
    top: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 0vh;
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -100vh;
    opacity: 0;
  }
}
@keyframes floatUp {
  0% {
    top: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 0vh;
    opacity: 0.8;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -100vh;
    opacity: 0;
  }
}
#head1,
#head2,
#head3,
#head4,
#head5 {
  opacity: 0;
}
#head1,
#head2,
#head3,
#head4,
#head5 {
  -webkit-animation: fadeOut 1 5s ease-in;
  -moz-animation: fadeOut 1 5s ease-in;
  -o-animation: fadeOut 1 5s ease-in;
  animation: fadeOut 1 5s ease-in;
}
#head2 {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#head3 {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#head4 {
  -webkit-animation-delay: 17s;
  -moz-animation-delay: 17s;
  -o-animation-delay: 17s;
  animation-delay: 17s;
}
#head5 {
  -webkit-animation: finalFade 1 5s ease-in;
  -moz-animation: finalFade 1 5s ease-in;
  -o-animation: finalFade 1 5s ease-in;
  animation: finalFade 1 5s ease-in;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 22s;
  -moz-animation-delay: 22s;
  -o-animation-delay: 22s;
  animation-delay: 22s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes finalFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes finalFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes finalFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
@keyframes finalFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
/* background */