html,
body {
  width: 100%;
  overflow-x: hidden;
  font-size: 16px;
}
body {
  /* NAVIGATION STYLE */
  --nav-bg-color: #FFFFFF;
  --nav-text-color: #000000;

  /* Main Section */
  --main-bg: #ffffff;
  --main-text-color: #ffffff;
  --main-hightlight-color: #04668c;

  /* Professional Summary Vars */
  --summary-bg: #ffffff;
  --summary-text-color: #f24444;
  --summary-hightlight-color: #29a63c;

  /* Projects Vars */
  --projects-bg: #f24444;
  --projects-text-color: #ffffff;
  --projects-hightlight-color: #04668c;
  
  /* Work Experience Vars */
  --experience-bg: #04668c;
  --experience-text-color: #ffffff;
  --experience-hightlight-color: #f69e92;

  /* Skills Vars */
  --skills-bg: #0bbfbf;
  --skills-bg-island: #f0f0f0;
  --skills-text-color: #333333;
  --skills-main-skill-color: #04668c;
  --skills-secondary-skill-color: #f69e92;

  /* Education & Certifications Vars */
  --certification-bg: #f24444;
  --certification-card-bg-color: #FFFFFF;
  --certification-text-color: #333333;
  --certification-hightlight-color: #04668c;
}
body {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  background-color: var(--bg-color);
}
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  font-weight: 600;
}
h1 {
  font-size: 3rem;
  line-height: 3.2rem;
}
h2 {
  font-size: 1.5rem;
  line-height: 1.6rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
h3 {
  font-size: 1.2rem;
  line-height: 1.3rem;
}
h4 {
  font-size: 1rem;
  line-height: 1.1rem;
}
section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
section.boxcenter {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
section.boxcenter .box {
}
section.boxcenter .box h1 {
  font-size: 3rem;
}
section.boxcenter .box h2 {
  font-size: 2.4rem;
}
section.boxcenter .box h3 {
  font-size: 1.8rem;
}
section.boxcenter .box h4 {
  font-size: 1.2rem;
}

span.hightlight {
  font-size: 1em;
  font-style: italic;
  position: relative;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* Header */
#header {
  min-height: 100vh;

  position: relative;
  overflow: hidden;
}
#header .bg {
  position: absolute;
  top: -10px;
  left: -100px;
  right: -10px;
  bottom: -10px;

  background: url("../images/background.jpg") no-repeat center;
  background-size: cover;
  filter: blur(5px);
  z-index: 1;
}
#header .welcome {
  position: relative;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1.5rem 2rem;

  border-radius: 3rem;
  box-shadow: 0px 0px 74px 100px rgba(0, 0, 0, 0.5);
}

#header .title {
  text-align: center;
}
#header .title h1 {
  margin: 0;
  padding: 0;
  padding-bottom: 0.5rem;

  color: var(--main-text-color);
}
#header .subtitle {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  padding: 0.2rem 0;
}
#header .subtitle .main_role {
  font-size: 1.3rem;
  color: var(--main-text-color);
}
#header .subtitle .main_role i {
  color: var(--main-hightlight-color);
}

#header .social {
  padding: 0.2rem 0;
}
#header .social ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
#header .social ul li {
  font-size: 1.2rem;
  line-height: 1.2rem;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#header .social ul li:last-child::after {
  content: "";
  margin: 0;
}
#header .social ul li i {
  font-size: 1.5rem;
  color: var(--main-hightlight-color);
}
#header .social ul li span {
  font-size: 1.2rem;
  padding-left: 0.6rem;
  color: var(--main-text-color);
}

#header .cta {
  padding: 0.2rem 0;
  padding-top: 0.7rem;
}
#header .cta ul {
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
}
#header .cta ul li {
}
#header .cta ul li a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 0.3rem;
  text-decoration: none;
  color: #fff;
  background-color: var(--main-hightlight-color);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
#header .cta ul li a:hover {
  background-color: var(--main-hightlight-color);
}

nav {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--nav-bg-color);
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

nav ul li {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
}

nav ul li a {
  display: block;
  font-size: 0.8rem;
  line-height: 0.9rem;
  padding: 0.8rem 0.8rem;
  text-transform: uppercase;
  color: var(--nav-text-color);
  text-shadow: 0 0 BLACK;
}

.vpbox {
  min-height: 100vh;

  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* PROFESSIONAL SUMMARY */
#professional-summary.boxcenter {
  min-height: 100vh;
  background-color: var(--hightlight-color);
  color: var(--bg-color);
}
#professional-summary .hightlight {
  color: var(--hightlight-color);
}
#professional-summary.boxcenter h2 {
  font-size: 2.4rem;
  line-height: 1.6rem;
  text-align: left;
  margin-bottom: 2rem;
}
#professional-summary .hightlight {
  color: var(--hightlight-light-color);
}
#professional-summary img.avatar {
  border-radius: 100%;
}
#professional-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#professional-summary ul li::before {
  content: "-";
  font-size: 1.1rem;
  line-height: 1.2rem;
  margin-right: 0.3rem;
}

/* WORK EXPERIENCE */
#work-experience.boxcenter {
  min-height: 100vh;
  background-color: var(--experience-bg);

  color: var(--experience-text-color);
}
#work-experience .location i,
#work-experience .role i,
#work-experience .period i {
  color: var(--experience-hightlight-color);
}
#work-experience .hightlight {
  color: var(--experience-hightlight-color);
}
#work-experience h2 {
  font-size: 2.4rem;
  line-height: 1.6rem;
  text-align: left;
  margin-bottom: 2rem;
}
#work-experience .info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0;
}
#work-experience ul.exp {
  margin: 0;
  padding: 0;
  padding-left: 1rem;
  list-style: none;
}
#work-experience ul.exp > li {
  border-bottom: 1px solid var(--lighter-color);
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
}
#work-experience ul.exp > li:last-child {
  padding-bottom: 0;
}
#work-experience .location,
#work-experience .role,
#work-experience .period,
#work-experience .responsabilities,
#work-experience .environment {
  padding-left: 0.7rem;
}

#work-experience .responsabilities {
  margin-top: 0.3rem;
  display: none;
}
#work-experience .responsabilities > ul {
  list-style: none;
  padding-inline-start: 0rem;

  padding-top: 0.4em;
  padding-bottom: 0.4em;
}
#work-experience .responsabilities > ul li::before {
  content: "-";
  margin: 0;
  padding: 0;
  padding-right: 7px;
}
#work-experience ul.exp li .responsabilities > ul li {
  padding-bottom: 0.4em;
}
#work-experience ul.exp li .responsabilities > ul li:last-child {
  padding-bottom: 0;
}
/* SKILLS */
#skills.boxcenter {
  min-height: 100vh;
  background-color: var(--skills-bg);
  color: var(--skills-text-color);
}

#skills h2 {
  font-size: 2.4rem;
  line-height: 1.6rem;
  text-align: left;
  margin-bottom: 2rem;
}

#skills ul.teck_stacks {
  display: flex;
  gap: 20px;
  margin: 0;
  list-style: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
#skills ul.teck_stacks > li {
  background-color: var(--skills-bg-island);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

#skills ul.teck_stacks > li h3 {
  margin-bottom: 0.3rem;
}

#skills ul.teck_stacks > li ul.tech_skills {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#skills ul.teck_stacks > li ul.tech_skills > li {
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;
}

#skills ul.teck_stacks > li ul.tech_skills > li img {
  width: auto;
  height: 78px;
  padding: 0.4rem 0.2rem;
}

#skills ul.teck_stacks > li ul.tech_skills > li h4 {
}
#skills ul.teck_stacks > li ul.tech_skills > li .main-skill {
  width: 100%;
  height: 10px;
  background-color: var(--skills-main-skill-color);
  margin-top: 5px;
}
#skills ul.teck_stacks > li ul.tech_skills > li .secondary-skill {
  width: 80%;
  height: 10px;
  background-color: var(--skills-secondary-skill-color);
  margin-top: 5px;
}

/* EDUCATION & CERTIFICATIONS */
#education-certification.boxcenter {
  min-height: 100vh;
  background-color: #f69e92;
  color: var(--bg-color);
}

#education-certification h2 {
  font-size: 2.4rem;
  line-height: 1.6rem;
  text-align: left;
  margin-bottom: 2rem;
}

#education-certification ul {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 1.5rem;
  grid-template-columns: calc((100vw / 3) - 1.5rem) calc((100vw / 3) - 3rem) calc((100vw / 3) - 1.5rem);
  align-content: stretch;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
}
#education-certification ul li {
  margin-bottom: 0.5rem;
}
#education-certification ul li .degree,
#education-certification ul li .course {
  display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      padding: 0.5rem;
      padding-top: 1.5rem;
      border-radius: 6px;
      background-color: var(--certification-card-bg-color);
}
#education-certification ul li .degree {
  border: 1px solid #007bff;
}
#education-certification ul li .course {
  border: 1px solid #28a745;
}
#education-certification ul li .degree::before {
  background-color: #007bff;
}
#education-certification ul li .course::before {
  background-color: #28a745;
}

#education-certification ul li span i {
  margin-right: 0.3rem;
  color: var(--certification-hightlight-color);
  width: 22px;
  text-align: center;
}
#education-certification ul li span.name {
  font-weight: 600;
}
#education-certification ul li span.institute {
  font-style: italic;
  font-weight: 600;
}
#education-certification ul li span.dodate {
  font-style: italic;
}

#education-certification ul li div::before {
  font-size: 0.7rem;

  padding: 2px 9px;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 10px;

  text-transform: uppercase;

  position: absolute;
  top: 0;
  left: 0;
}
#education-certification ul li .degree::before {
  content: "degree";
}
#education-certification ul li .course::before {
  content: "course";
}
#education-certification ul li .degree span,
#education-certification ul li .course span {
  padding: 0;
  padding-left: 5px;
}

.footer {
  padding: 0;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 575px) {
  .col-lg-1,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-md-1,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-xs-1,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9 {
    padding-right: 5px;
    padding-left: 5px;
  }
  .container-fluid {
    padding-right: 3px;
    padding-left: 3px;
  }
  #header .subtitle {
    flex-direction: column;
    gap: 0.3rem;
  }
  #header .social {
    flex-direction: column;
    gap: 0.3rem;
  }
}
@media (min-width: 576px) {
  #header .subtitle {
    flex-direction: row;
    gap: 1rem;
  }
  #header .social {
    flex-direction: row;
    gap: 1rem;
  }
}