@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");

/* RESET */
*,
::before,
::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

html,
body {
   overflow-x: hidden;
}

html {
   font-size: 10px; /* 1rem = 10px */
   scroll-behavior: smooth;
}

ul {
   list-style: none;
}

img {
   max-width: 100%;
   height: auto;
}

/* PROJECT VARIABLES */
:root {
   /* fonts */
   --first-font: "Poppins", sans-serif;
   --size-font: 1.5rem;
   --medium-font: 500;
   --semi-font: 600;

   /* colors */
   --theme-color: 160; /* medium blue */

   --first-color: hsl(var(--theme-color), 100%, 41%); /* #0069D1 */
   --first-color-hover: hsl(var(--theme-color), 100%, 35%);
   --first-color-lighter: hsl(var(--theme-color), 50%, 85%);

   --title-color: hsl(var(--theme-color), 8%, 15%);
   --text-color: hsl(var(--theme-color), 8%, 45%);
   --text-color-light: hsl(var(--theme-color), 8%, 65%);
   --input-color: hsl(var(--theme-color), 70%, 96%);
   --label-button: hsl(var(--theme-color), 100%, 10%);
   --background-color: hsl(var(--theme-color), 60%, 100%);
   --high-contrast: hsl(var(--theme-color), 100%, 100%);
   --shadow-color: hsl(var(--theme-color), 10%, 90%);
}

/* PROJECT SETTINGS */
body {
   font-family: var(--first-font);
   font-size: var(--size-font);
   font-weight: var(--medium-font);
   background-color: var(--background-color);
   color: var(--text-color);
   margin: 0;
}

/* DARK THEME COLOR */
body.dark-theme {
   --title-color: hsl(var(--theme-color), 8%, 95%);
   --text-color: hsl(var(--theme-color), 8%, 75%);
   --input-color: hsl(var(--theme-color), 29%, 16%);
   --background-color: hsl(var(--theme-color), 28%, 12%);
   --high-contrast: hsl(var(--theme-color), 100%, 100%);
   --shadow-color: hsl(var(--theme-color), 10%, 25%);
}

/*=== REUSABLE COMPONENTS START ===*/
.section {
   width: 100vw;
   height: auto; }

   @media screen and (min-width: 610px) {
      .section {
         width: 100%;
      }
   }

   @media screen and (min-width: 1024px) {
      .section {
         padding-top: 5rem;
      }
}

.container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   padding: 1.2rem 2.4rem 3.6rem;
   margin: 0 auto; }

   @media screen and (min-width: 610px) {
      .container {
         flex-direction: row;
         justify-content: space-between;
         padding: 2.4rem 2.4rem 5rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .container {
         max-width: 99.2rem;
         padding: 2.4rem 0 5rem;
      }
}

.calltoaction {
   font-family: var(--first-font);
   font-size: 1.5rem;
   color: var(--high-contrast);
   background-color: var(--first-color);
   padding: 2rem 1.8rem;
   border-radius: 1rem; }

   @media screen and (min-width: 1024px) {
      .calltoaction {
         font-size: 1.6rem;
         cursor: pointer;
         transition: .3s;
      }
      .calltoaction:hover {
         background-color: var(--first-color-hover);
         transition: .3s;
      }
}

.calltoaction > svg {
   margin-left: 0.5rem;
}

.calltoaction > svg path {
   fill: var(--high-contrast);
}

.section-title {
   width: 100%;
   text-align: center;
   padding: 3.6rem 0;
}

.section-title > .title {
   font-size: 2.4rem;
   font-weight: var(--semi-font);
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .section-title > .title {
         font-size: 3.8rem;
      }
}

.section-title > .subtitle {
   display: block;
   font-size: 1.3rem;
   color: var(--text-color); }

   @media screen and (min-width: 1024px) {
      .section-title > .subtitle {
         font-size: 1.5rem;
      }
}

body > .btn-totop {
   position: fixed;
   bottom: 6rem;
   right: 3rem;
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 1rem;;
   display: none;
   justify-content: center;
   align-items: center;
   background-color: var(--first-color);
   opacity: 0.5;
   z-index: 10;
   transition: opacity .3s linear;
}

body > .btn-totop:hover {
   opacity: 1;
   transition: opacity .3s linear;
}

body > .btn-totop.-visible {
   display: flex;
}

body > .btn-totop > img {
   width: 2rem;
   height: 2rem;
}

/*=== REUSABLE COMPONENTS END ===*/

/*=== HEADER START ===*/

.header {
   height: 4.6rem;
   position: fixed;
   bottom: 0;
   left: 0;
   padding: 0;
   background-color: var(--background-color);
   z-index: 15; }

   @media screen and (min-width: 1024px) {
      .header {
         height: 5rem;
         top: 0;
      }
      .header.-scroll {
         box-shadow: 0 2px 2px 0 var(--shadow-color);
      }
}

.header > .container {
   flex-direction: row;
   justify-content: space-between;
   padding: 0 2.4rem; }

   @media screen and (min-width: 1024px) {
      .header > .container {
         padding: 0;
      }
}

.header > .container > .logo {
   color: var(--title-color);
   font-weight: var(--semi-font);
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex: 1; }

   @media screen and (min-width: 1024px) {
      .header > .container > .logo {
         font-size: 1.6rem;
         transition: .3s;
      }
      .header > .container > .logo:hover {
         color: var(--first-color-hover);
         transition: .3s;
      }
}

.header > .container > .open-menu-button {
   width: 3.1rem;
   height: 4.6rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-end;
   background-color: transparent;
   padding: 0; }

   @media screen and (min-width: 1024px) {
      .header > .container > .open-menu-button {
         display: none;
      }
}

.header > .container > .open-menu-button > svg path {
   fill: var(--title-color);
}

.header > .container > .theme-button {
   width: 3.1rem;
   height: 4.6rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   padding: 0; }

   @media screen and (min-width: 1024px) {
      .header > .container > .theme-button {
         order: 2;
         cursor: pointer;
         transition: .3s;
      }
      .header > .container > .theme-button > .dark-mode > path,
      .header > .container > .theme-button > .light-mode > path {
         transition: .3s;
      }
      .header > .container > .theme-button:hover > .dark-mode > path,
      .header > .container > .theme-button:hover > .light-mode > path {
         fill: var(--first-color-hover);
         transition: .3s;
      }
}

.header > .container > .theme-button > .light-mode {
   display: none;
}

.header > .container > .theme-button.-dark-mode > .light-mode {
   display: block;
}

.header > .container > .theme-button.-dark-mode > .dark-mode {
   display: none;
}

.header > .container > .main-nav {
   position: absolute;
   width: 100%;
   height: 23rem;
   bottom: 0;
   left: 0;
   display: block;
   background-color: var(--background-color);
   border-top-left-radius: 2rem;
   border-top-right-radius: 2rem;
   box-shadow: 0 -2px 2px 1px rgba(0,0,0,0.2);
   transform: translateY(110%);
   transition: transform .3s ease-in-out;
   z-index: 10; }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav {
         width: 100%;
         height: 100%;
         position: relative;
         display: flex;
         top: 0;
         padding: 0;
         transform: scale(1);
         border-radius: 0;
         box-shadow: none;
         background-color: transparent;
      }
}

.header > .container > .main-nav.-active {
   transform: translateY(0);
   transition: transform .3s ease-in-out;
}

.header > .container > .main-nav > .close-menu-button {
   width: 100%;
   height: 4rem;
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   padding: 0 2.4rem;
   background-color: transparent; }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav > .close-menu-button {
         display: none;
      }
}

.header > .container > .main-nav > .list {
   width: 100%;
   height: 19rem;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
   column-gap: 1rem;
   row-gap: 3.2rem;
   padding: 3.2rem 1.6rem 2.4rem; }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav > .list {
         height: 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         padding: 0 1.6rem;
      }
}

.header > .container > .main-nav > .list > .item {
   display: flex;
   justify-content: center;
   align-items: center; }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav > .list > .item {
         padding: 0;
         margin-right: 0;
         cursor: pointer;
      }
      .header > .container > .main-nav > .list > .item > .link {
         transition: .3s;
      }
      .header > .container > .main-nav > .list > .item:hover > .link {
         color: var(--first-color-hover);
         transition: .3s;
      }
      .header > .container > .main-nav > .list > .item:not(:first-child) {
         margin-left: 3rem;
      }
}

.header > .container > .main-nav > .list > .item > .link {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: transparent;
   font-size: 1.3rem;
   font-weight: var(--semi-font);
   color: var(--text-color); }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav > .list > .item > .link {
         font-size: 1.4rem;
      }
}

.header > .container > .main-nav > .list > .item > .link > svg {
   margin-bottom: 0.5rem; }

   @media screen and (min-width: 1024px) {
      .header > .container > .main-nav > .list > .item > .link > svg {
         display: none;
      }
}

.header > .container > .main-nav > .list > .item > .link > svg path {
   fill: var(--text-color);
}

.header > .container > .main-nav > .list > .item > .link.-active {
   color: var(--first-color);
}

.header > .container > .main-nav > .list > .item > .link.-active > svg path {
   fill: var(--first-color);
}

/*=== HEADER END ===*/

/*=== HOME START ===*/

@media screen and (min-width: 1024px) {
   .home {
      padding: 0;
   }
}

.home > .container {
   position: relative;
   height: 100vh;
   padding-top: 3.6rem; }

   @media screen and (min-width: 610px) {
      .home > .container {
         flex-direction: row-reverse;
         padding-top: 8rem;
         padding-left: 7rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .home > .container {
         max-width: 99.2rem;
         height: 100vh;
         margin: 0 auto;
         padding-left: 14rem;
      }
}

.home > .container > .home-social {
   position: absolute;
   top: 12.4rem;
   left: 2.4rem; }

   @media screen and (min-width: 610px) {
      .home > .container > .home-social {
         top: 50%;
         transform: translateY(-50%);
      }
}

.home > .container > .home-social > .social {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-start;
}

.home > .container > .home-social > .social > .item:not(:last-child) {
   margin-bottom: 2rem;
}

.home > .container > .home-social > .social > .item > .link > svg path {
   fill: var(--first-color); 
   transition: .3s; }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-social > .social > .item {
         cursor: pointer;
      }
      .home > .container > .home-social > .social > .item:hover > .link > svg path {
         fill: var(--first-color-hover);
         transition: .3s;
      }
}

.home > .container > .home-perfil {
   width: 100vw;
   display: flex;
   justify-content: center;
   padding: 5rem 0 2.8rem; }

   @media screen and (min-width: 610px) {
      .home > .container > .home-perfil {
         padding: 0 0 2.8rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-perfil {
         width: 95%;
      }
}

.home > .container > .home-perfil > .perfil {
   display: flex;
   justify-content: center;
}

.home > .container > .home-perfil > .perfil > .mask {
   fill: var(--first-color); }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-perfil > .perfil > .mask {
         width: 33rem;
         height: auto;
      }
}

.home > .container > .home-perfil > .perfil > .mask > g > .image {
   width: 17rem;
   transform: translateX(12px) translateY(16px);
}

.home > .container > .home-content {
   display: block;
   font-weight: var(--medium-font);
   color: var(--text-color);
   padding-bottom: 3rem; }

   @media screen and (min-width: 610px) {
      .home > .container > .home-content {
         padding-right: 3rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-content {
         width: 105%;
      }
}

.home > .container > .home-content > .home-title {
   font-size: 3.2rem;
   font-weight: var(--semi-font);
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-content > .home-title {
         width: 100%;
         font-size: 5rem;
      }
}

.home > .container > .home-content > .subtitle {
   display: inline-block;
   font-size: 1.8rem;
   margin-bottom: 1.4rem; }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-content > .subtitle {
         font-size: 2.1rem;
      }
}

.home > .container > .home-content > .text {
   font-size: 1.5rem;
   margin-bottom: 5rem;
   color: var(--text-color-light); }

   @media screen and (min-width: 1024px) {
      .home > .container > .home-content > .text{
         font-size: 1.6rem;
      }
}

.home > .container > .scroll-down {
   position: absolute;
   width: 13rem;
   bottom: 4rem;
   left: 14rem;
   display: none;
   justify-content: space-between;
   align-items: center;
   font-size: 1.4rem;
   font-weight: var(--semi-font);
   color: var(--title-color);
   transform: translateY(0);
   transition: transform .3s ease-in-out; }

   @media screen and (min-width: 1024px) {
      .home > .container > .scroll-down {
         display: flex;
         cursor: pointer;
      }
      .home > .container > .scroll-down > .icon > path {
         fill: var(--first-color);
      }
      .home > .container > .scroll-down:hover {
         transform: translateY(20%);
         transition: transform .3s ease-in-out;
      }
}

/*=== HOME END ===*/

/*=== ABOUT START ===*/

@media screen and (min-width: 1024px) {
   .about > .container {
      justify-content: center;
      align-items: center;
   }
}

@media screen and (min-width: 610px) {
   .about > .container > .about-photo {
      width: 50%;
      text-align: center;
   }
}

.about > .container > .about-photo > picture > img {
   border-radius: 1rem;
   margin-bottom: 2rem; }

   @media screen and (min-width: 1024px) {
      .about > .container > .about-photo > picture > img {
         width: 35.5rem;
         height: auto;
         text-align: center;
      }
}

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

   @media screen and (min-width: 610px) {
      .about > .container > .about-content {
         width: 50%;
         padding: 0 1.5rem;
      }      
   }

   @media screen and (min-width: 1024px) {
      .about > .container > .about-content {
         width: 40%;
         padding: 0 2.4rem;
      }      
}

.about > .container > .about-content > .description {
   font-size: 1.5rem;
   color: var(--text-color-light);
   text-align: center;
   margin-bottom: 3.6rem; }

   @media screen and (min-width: 1024px) {
      .about > .container > .about-content > .description {
         font-size: 1.6rem;
         text-align: left;
      }      
}

.about > .container > .about-content > .about-numbers {
   width: 100%;
   display: flex;
   margin-bottom: 6rem;
   justify-content: space-between;
   align-items: flex-start;
   padding: 0 2rem; }

   @media screen and (min-width: 610px) {
      .about > .container > .about-content > .about-numbers {
         padding: 0;
      }
}

.about > .container > .about-content > .about-numbers > .item {
   display: block;
   text-align: center;
}

.about > .container > .about-content > .about-numbers > .item > .value {
   font-size: 2rem;
   font-weight: var(--semi-font);
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .about > .container > .about-content > .about-numbers > .item > .value {
         font-size: 2.4rem;
      }
}

.about > .container > .about-content > .about-numbers > .item > .text {
   font-size: 1.2rem;
   color: var(--text-color); }

   @media screen and (min-width: 1024px) {
   .about > .container > .about-content > .about-numbers > .item > .text {
         font-size: 1.4rem;
      }
}

.about > .container > .about-content > .-download {
   margin: 0 auto; }

   @media screen and (min-width: 1024px) {
      .about > .container > .about-content > .-download {
         margin: 0;
      }
}
   
/*=== ABOUT END ===*/

/*=== SKILLS START ===*/

.skills > .container {
   display: block; }

   @media screen and (min-width: 1024px) {
      .skills > .container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
         align-items: flex-start;
         padding: 4rem 0;
      }
}

.skills > .container > .skill-accordion {
   width: 100%;
   max-width: 40rem;
   margin: 0 auto;
}

.skills > .container > .skill-accordion > .skill-button {
   font-family: var(--first-font);
   width: 100%;
   height: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: var(--background-color);
   margin-bottom: 2rem; }

   @media screen and (min-width: 1024px) {
      .skills > .container > .skill-accordion > .skill-button {
         cursor: pointer;
      }
}

.skills > .container > .skill-accordion > .skill-button > .icon path {
   fill: var(--first-color);
}

.skills > .container > .skill-accordion > .skill-button > .label {
   text-align: left;
   flex: 1;
   margin-left: 1.6rem;
}

.skills > .container > .skill-accordion > .skill-button > .label > .title {
   font-size: 1.8rem;
   color: var(--text-color);
   margin-bottom: 0.5rem; }

   @media screen and (min-width: 1024px) {
      .skills > .container > .skill-accordion > .skill-button > .label > .title {
         font-size: 2.1rem;
      }
}

.skills > .container > .skill-accordion > .skill-button > .label > .subtitle {
   font-size: 1.3rem;
   color: var(--text-color-light); }

   @media screen and (min-width: 1024px) {
      .skills > .container > .skill-accordion > .skill-button > .label > .subtitle {
         font-size: 1.4rem;
      }
}

.skills > .container > .skill-accordion > .skill-button > .chevron {
   transition: all .3s ease-in-out;
}

.skills > .container > .skill-accordion > .skill-button > .chevron path {
   fill: var(--first-color);
}

.skills > .container > .skill-accordion > .skill-button.-active > .chevron {
   transform: rotate(180deg);
   transition: all .3s ease-in-out;
}

.skills > .container > .skill-accordion > .skill-content {
   overflow: hidden;
   height: 0;
   padding-left: 4.5rem;
   margin-bottom: 1.6rem;
}

.skills > .container > .skill-accordion > .skill-button.-active+.skill-content {
   height: auto;
   margin-top: 2rem;
}

.skills > .container > .skill-accordion > .skill-content > .skill-list {
   width: 100%;
   margin: 0;
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item {
   margin-bottom: 2.5rem;
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-title {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   font-size: 1.5rem;
   margin-bottom: 0.6rem; }

   @media screen and (min-width: 1024px) {
      .skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-title {
         font-size: 1.6rem;
      }
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-title > .name {
   font-weight: var(--semi-font);
   color: var(--text-color);
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-title > .value {
   font-weight: var(--medium-font);
   color: var(--text-color-light);
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar {
   display: block;
   width: 100%;
   height: 0.6rem;
   background-color: var(--first-color-lighter);
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar::after {
   content: "";
   display: block;
   height: inherit;
   background-color: var(--first-color);
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-htmlcss::after {
   width: 100%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-js::after {
   width: 75%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-react::after {
   width: 50%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-angular::after {
   width: 25%;
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-node::after {
   width: 50%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-php::after {
   width: 75%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-python::after {
   width: 75%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-csharp:after {
   width: 50%;
}

.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-mssql::after {
   width: 75%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-mysql::after {
   width: 75%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-firebase::after {
   width: 50%;
}
.skills > .container > .skill-accordion > .skill-content > .skill-list > .skill-item > .skill-bar.-mongodb:after {
   width: 25%;
}

/*=== SKILLS END ===*/

/*=== QUALIFICATION START ===*/

.qualification > .container {
   max-width: 40rem; }

   @media screen and (min-width: 610px) {
      .qualification > .container {
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
      }
}

.qualification > .container > .qualification-tabs {
   width: 100%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   margin-bottom: 3rem;
}

.qualification > .container > .qualification-tabs > .qualification-button {
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: var(--first-font);
   font-weight: var(--semi-font);
   font-size: 1.8rem;
   color: var(--text-color-light);
   padding: 1rem 0;
   background-color: transparent; }

   @media screen and (min-width: 1024px) {
      .qualification > .container > .qualification-tabs > .qualification-button {
         font-size: 2rem;
      }
}

.qualification > .container > .qualification-tabs > .qualification-button > svg {
   margin-right: 0.5rem;
}

.qualification > .container > .qualification-tabs > .qualification-button > svg path {
   fill: var(--text-color-light);
}

.qualification > .container > .qualification-tabs > .qualification-button.-active {
   color: var(--first-color);
}

.qualification > .container > .qualification-tabs > .qualification-button.-active > svg path {
   fill: var(--first-color);
}

.qualification > .container > .qualification-content {
   width: 100%;
   display: none;
}

.qualification > .container > .qualification-content.-active {
   display: block;
}

.qualification > .container > .qualification-content > .qualification-item {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content 1fr;
   column-gap: 1rem;
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-data {
   padding-bottom: 0.4rem;
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-data > .title {
   font-size: 1.5rem;
   font-weight: var(--semi-font);
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .qualification > .container > .qualification-content > .qualification-item > .qualification-data > .title {
         font-size: 1.6rem;
      }      
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-data > .local {
   font-size: 1.3rem;
   color: var(--title-color-lighter); }

   @media screen and (min-width: 1024px) {
      .qualification > .container > .qualification-content > .qualification-item > .qualification-data > .local {
         font-size: 1.4rem;
      }      
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-data > .calendar {
   font-size: 1.2rem;
   color: var(--title-color-lighter);
   margin-top: 1.2rem; }

   @media screen and (min-width: 1024px) {
      .qualification > .container > .qualification-content > .qualification-item > .qualification-data > .calendar {
         font-size: 1.3rem;
      }      
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-timeline {
   position: relative;
   padding: 0 2rem;
}

.qualification > .container > .qualification-content > .qualification-item > .qualification-timeline > .ball {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
   background-color: var(--first-color);
}

.qualification > .container > .qualification-content > .qualification-item:not(:last-child) > .qualification-timeline > .line {
   display: block;
   width: 0.2rem;
   height: 100%;
   background-color: var(--text-color);
}

/*=== QUALIFICATION END ===*/

/*=== SERVICES START ===*/

.services > .container > .services-wrap {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 22rem);
   column-gap: 2rem;
   justify-content: center;
   row-gap: 2.4rem; }

   @media screen and (min-width: 610px) {
      .services > .container > .services-wrap {
         column-gap: 2.4rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap {
         max-width: 80rem;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: 30rem;
         margin: 0 auto;
      }
}

.services > .container > .services-wrap > .service-card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
   padding: 5.7rem 2.5rem 2.5rem;
   background-color: var(--background-color);
   border-radius: 0.5rem;
   box-shadow: 2px 2px 6px 3px var(--shadow-color); }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card {
         padding: 11.8rem 4rem 4rem;
      }
}

.services > .container > .services-wrap > .service-card > .card-icon > path {
   fill: var(--first-color); }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .card-icon {
         width: 2.5rem;
         height: auto;
      }
}

.services > .container > .services-wrap > .service-card > .card-title {
   font-size: 1.8rem;
   font-weight: var(--semi-font);
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .card-title {
         font-size: 2.1rem;
      }
}


.services > .container > .services-wrap > .service-card > .card-button {
   font-family: var(--first-font);
   font-size: 1.3rem;
   color: var(--first-color);
   background-color: transparent; }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .card-button {
         font-size: 1.5rem;
         cursor: pointer;
      }
      .services > .container > .services-wrap > .service-card > .card-button > svg {
         transform: translateX(0);
         transition: transform .3s;
      }
      .services > .container > .services-wrap > .service-card > .card-button:hover > svg {
         transform: translateX(30%);
         transition: transform .3s;
      }
}

.services > .container > .services-wrap > .service-card > .card-button > svg {
   margin-left: 0.5rem;
}

.services > .container > .services-wrap > .service-card > .card-button > svg path {
   fill: var(--first-color);
}

.services > .container > .services-wrap > .service-card > .service-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   scroll-behavior: auto;
   background-color: rgba(35,35,35,0.8);
   z-index: 999;
   visibility: hidden;
   opacity: 0;
   transition: all .3s ease-in-out;
}

.services > .container > .services-wrap > .service-card > .service-modal.-active {
   visibility: visible;
   opacity: 1;
   scroll-behavior: unset;
   overflow: hidden;
   transition: all .3s ease-in-out;
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content {
   width: 30.7rem;
   /* height: 26.5rem; */
   border-radius: 1rem;
   padding: 2.4rem 2rem 2.4rem 2.4rem;
   background-color: var(--background-color); }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .service-modal > .modal-content {
         width: 46.5rem;
         height: 29rem;
      }
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .title {
   display: inline-block;
   font-size: 1.8rem;
   font-weight: var(--semi-font);
   color: var(--title-color);
   margin-bottom: 1.8rem; }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .title {
         font-size: 2.1rem;
      }
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .modal-close {
   display: block;
   float: right;
   padding: 0 0 2rem 2rem;
   background-color: transparent;
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .service-list {
   width: 100%;
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .service-list > .item {
   font-size: 1.5rem;
   font-weight: var(--medium-font);
   line-height: 2.6;
   color: var(--text-color-light); }

   @media screen and (min-width: 1024px) {
      .services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .service-list > .item {
         font-size: 1.6rem;
      }
}

.services > .container > .services-wrap > .service-card > .service-modal > .modal-content > .service-list > .item > .icon > path {
   fill: var(--first-color);
}

/*=== SERVICES END ===*/

/*=== PORTFOLIO START ===*/

.portfolio > .container {
   margin-bottom: 6rem;
}

.portfolio > .container > .portfolio-carousel > .glide__track {
   width: 26.6rem;
   height: auto;
   margin: 0 auto; }

   @media screen and (min-width: 610px) {
      .portfolio > .container > .portfolio-carousel > .glide__track {
         width: 90%;
      }
}

@media screen and (min-width: 610px) {
   .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide {
      display: flex;
      justify-content: center;
   }
}

.portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > picture > img {
   width: 100%;
   height: 100%;
   max-width: 26.5rem;
   max-height: 17.6rem;
   border-radius: 1rem;
   margin-bottom: 2rem; }

   @media screen and (min-width: 610px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > picture > img {
         max-width: 24.4rem;
         max-height: 16.3rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > picture > img {
         max-width: 33.1rem;
         max-height: 22rem;
         margin-bottom: 4rem;
         margin-right: 2rem;
      }
}

.portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content {
   width: auto;
   max-width: 26.6rem;
   padding-bottom: 4.2rem; }

   @media screen and (min-width: 610px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content {
         padding-left: 2.4rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content {
         max-width: 50%;
         padding: 1rem 12rem 3rem 5rem;
      }
}

.portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .title {
   font-size: 1.8rem;
   font-weight: var(--semi-font);
   color: var(--title-color);
   margin-bottom: 0.8rem; }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .title {
         font-size: 2.1rem;
         margin-bottom: 1.6rem;
      }
}

.portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .description {
   font-size: 1.6rem;
   font-weight: var(--medium-font);
   color: var(--text-color-light);
   margin-bottom: 3rem; }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .description {
         margin-bottom: 4rem;
      }
}

.portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .calltoaction {
   padding: 1.6rem 2rem; }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .calltoaction {
         font-size: 1.6rem;
      }
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .calltoaction > svg {
         transform: translateX(0);
         transition: .3s;
      }
      .portfolio > .container > .portfolio-carousel > .glide__track > .glide__slides > .glide__slide > .portfolio-content > .calltoaction:hover > svg {
         transform: translateX(25%);
         transition: .3s
      }
}

.portfolio > .container > .portfolio-carousel > .glide__arrows {
   position: absolute;
   width: 100%;
   max-width: 40rem;
   top: 45%;
   left: 50%;
   transform: translateX(-50%) translateY(-45%);
   text-align: center;
   display: flex;
   justify-content: space-between;
   margin: 0 auto; }

   @media screen and (min-width: 610px) {
      .portfolio > .container > .portfolio-carousel > .glide__arrows {
         max-width: 100%;
         top: 40%;
         left: 50%;
         transform: translateX(-50%) translateY(-40%);
      }
   }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__arrows {
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
      }
}

@media screen and (min-width: 1024px) {
   .portfolio > .container > .portfolio-carousel > .glide__arrows > .glide__arrow {
      width: 2rem;
      height: 3.4rem;
   }
}

.portfolio > .container > .portfolio-carousel > .glide__arrows > .glide__arrow > path {
   fill: var(--first-color);
}

.portfolio > .container > .portfolio-carousel > .glide__bullets {
   width: 100%;
   height: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
}

.portfolio > .container > .portfolio-carousel > .glide__bullets > .glide__bullet {
   display: block;
   width: 0.8rem;
   height: 0.8rem;
   border-radius: 50%;
   text-align: center;
   text-indent: -999rem;
   background-color: var(--first-color-lighter); }

   @media screen and (min-width: 1024px) {
      .portfolio > .container > .portfolio-carousel > .glide__bullets > .glide__bullet {
         width: 0.9rem;
         height: 0.9rem;
         cursor: pointer;
      }
}

.portfolio > .container > .portfolio-carousel > .glide__bullets > .glide__bullet:not(:last-child) {
   margin-right: 0.8rem;
}

.portfolio > .container > .portfolio-carousel > .glide__bullets > .glide__bullet:hover,
.portfolio > .container > .portfolio-carousel > .glide__bullets > .glide__bullet--active {
   background-color: var(--first-color);
}

/*=== PORTFOLIO END ===*/

/*=== NEWPROJECT START ===*/

.newproject {
   background-color: var(--first-color);
}

.newproject > .container {
   background-color: transparent;
   padding: 4.6rem 2.4rem 0; }

   @media screen and (min-width: 610px) {
      .newproject > .container {
         padding: 0 2.4rem;
         align-items: flex-end;
      }   
   }

   @media screen and (min-width: 1024px) {
      .newproject > .container {
         padding: 0;
         max-width: 74rem;
      }   
}

.newproject > .container > .newproject-content {
   text-align: center;
   padding-bottom: 5rem; }

   @media screen and (min-width: 610px) {
      .newproject > .container > .newproject-content {
         width: 50%;
         padding: 5rem 0 8rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-content {
         text-align: left;
         padding: 2rem 0 8rem;
      }
}

.newproject > .container > .newproject-content > .title {
   font-size: 2.4rem;
   font-weight: var(--semi-font);
   color: var(--high-contrast);
   margin-bottom: 1rem; }

   @media screen and (min-width: 610px) {
      .newproject > .container > .newproject-content > .title {
         font-size: 2rem;
         margin-bottom: 1.6rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-content > .title {
         font-size: 2.5rem;
         text-align: left;
      }
}

.newproject > .container > .newproject-content > .subtitle {
   display: block;
   font-size: 1.5rem;
   font-weight: var(--medium-font);
   color: var(--high-contrast);
   text-align: center;
   padding-bottom: 2rem;
   margin-bottom: 2rem; }

   @media screen and (min-width: 610px) {
      .newproject > .container > .newproject-content > .subtitle {
         margin-bottom: 2.4rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-content > .subtitle {
         font-size: 1.6rem;
         text-align: left;
      }
}

.newproject > .container > .newproject-content > .-newproject {
   text-align: center;
   color: var(--first-color);
   margin: 0 auto;
   background-color: var(--background-color); }

   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-content > .-newproject {
         color: var(--first-color);
         background-color: var(--high-contrast);
         margin-right: auto;
         border: 1px solid transparent;
         cursor: pointer;
      }
      .newproject > .container > .newproject-content > .-newproject:hover {
         color: var(--high-contrast);
         background-color: var(--first-color);
         margin-right: auto;
         border: 1px solid var(--high-contrast);
      }
}

.newproject > .container > .newproject-content > .-newproject > svg path {
   fill: var(--first-color); }
   
   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-content > .-newproject:hover > svg path {
         fill: var(--high-contrast);
      }      
}

.newproject > .container > .newproject-photo > picture {
   display: flex;
   justify-content: center;
   align-items: flex-end; }

   @media screen and (min-width: 1024px) {
      .newproject > .container > .newproject-photo > picture {
         transform: scale(1.1);
         transform-origin: bottom;
      }
   }

/*=== NEWPROJECT END ===*/

/*=== TESTIMONIAL START ===*/

.testimonial > .container {
   padding: 1rem 2.4rem 6rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track {
   margin-bottom: 3rem; }

   @media screen and (min-width: 1024px) {
      .testimonial > .container > .testimonial-carousel > .glide__track {
         margin-top: 5rem;
         margin-bottom: 5rem;
      }
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header {
   display: flex;
   margin-bottom: 1.8rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client {
   height: 6.2rem;
   display: flex;
   flex: 1;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client  > picture {
   margin-right: 1rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client  > picture > img {
   width: 6.2rem;
   height: 6.2rem;
   border-radius: 50%;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client > .slide-name {
   displaY: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client > .slide-name > .name {
   width: 100%;
   font-size: 1.8rem;
   font-weight: var(--semi-font);
   color: var(--text-color);
   margin-bottom: -1rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .slide-client > .slide-name > .position {
   width: 100%;
   font-size: 1.3rem;
   font-weight: var(--medium-font);
   color: var(--text-color-light);
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .stars {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   margin-top: 0.5rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .stars > svg path {
   fill: var(--first-color);
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-header > .stars > svg:not(:last-child) {
   margin-right: 0.5rem;
}

.testimonial > .container > .testimonial-carousel > .glide__track > .glide__slides > .glide__slide > .slide-description {
   font-size: 1.5rem;
   font-weight: var(--medium-font);
   color: var(--text-color-light);
   text-align: left;
}

.testimonial > .container > .testimonial-carousel > .glide__bullets {
   width: 100%;
   height: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
}

.testimonial > .container > .testimonial-carousel > .glide__bullets > .glide__bullet {
   display: block;
   width: 0.8rem;
   height: 0.8rem;
   border-radius: 50%;
   text-align: center;
   text-indent: -999rem;
   background-color: var(--first-color-lighter); }

   @media screen and (min-width: 1024px) {
      .testimonial > .container > .testimonial-carousel > .glide__bullets > .glide__bullet {
         width: 1rem;
         height: 1rem;
         cursor: pointer;
      }
}

.testimonial > .container > .testimonial-carousel > .glide__bullets > .glide__bullet:not(:last-child) {
   margin-right: 0.8rem;
}

.testimonial > .container > .testimonial-carousel > .glide__bullets > .glide__bullet:hover,
.testimonial > .container > .testimonial-carousel > .glide__bullets > .glide__bullet--active {
      background-color: var(--first-color);
}

/*=== TESTIMONIAL END ===*/

/*=== CONTACTME START ===*/

.contactme > .container > .contactme-contacts {
   width: 100%;
   margin-bottom: 4rem; }

   @media screen and (min-width: 610px) {
      .contactme > .container > .contactme-contacts {
         align-self: flex-start;
         margin: 0;
      }
   }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-contacts {
         width: 75%;
         align-self: flex-start;
         margin: 0;
      }
}

.contactme > .container > .contactme-contacts > .contact {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 3.5rem;
}

.contactme > .container > .contactme-contacts > .contact > .icon {
   margin-right: 1.6rem;
}

.contactme > .container > .contactme-contacts > .contact > .icon > path {
   fill: var(--first-color);
}

.contactme > .container > .contactme-contacts > .contact > .data > .title {
   font-size: 1.8rem;
   color: var(--title-color); }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-contacts > .contact > .data > .title {
         font-size: 2.1rem;
      }
}

.contactme > .container > .contactme-contacts > .contact > .data > .subtitle {
   font-size: 1.3rem;
   color: var(--text-color-light); }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-contacts > .contact > .data > .subtitle {
         font-size: 1.4rem;
      }
}

.contactme > .container > .contactme-form {
   width: 100%;
   display: block;
   padding: 0 0 10rem; }

   @media screen and (min-width: 610px) {
      .contactme > .container > .contactme-form {
         padding: 0 0 5rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-form {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         column-gap: 2.4rem;
         grid-template-areas: "name email"
                              "project project"
                              "message message"
                              "submit .";
      }
}

.contactme > .container > .contactme-form > .contactme-field {
   width: 100%;
   height: 7.3rem;
   background-color: var(--input-color);
   border-radius: 1rem;
   padding: 1.6rem;
   margin-bottom: 2.4rem; }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-form > .contactme-field {
         height: 8rem;
      }
      .contactme > .container > .contactme-form > .contactme-field.-name {
         grid-area: name;
      }
      .contactme > .container > .contactme-form > .contactme-field.-email {
         grid-area: email;
      }
      .contactme > .container > .contactme-form > .contactme-field.-project {
         grid-area: project;
      }
}

.contactme > .container > .contactme-form > .contactme-field.-message {
   height: auto;
   grid-area: message;
}

.contactme > .container > .contactme-form > .contactme-field > .label {
   font-size: 1.2rem;
   font-weight: var(--medium-font);
   color: var(--text-color-light); }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-form > .contactme-field > .label {
         font-size: 1.4rem;
      }      
}

.contactme > .container > .contactme-form > .contactme-field > .input {
   width: 100%;
   font-size: 1.5rem;
   font-weight: var(--medium-font);
   line-height: 1.5;
   color: var(--text-color);
   border: none;
   overflow: hidden;
   padding: 0.5rem;
   background-color: transparent; }

   @media screen and (min-width: 1024px) {
      .contactme > .container > .contactme-form > .-submit {
         grid-area: submit;
         width: 80%;
      }
}

/*=== CONTACTME END ===*/

/*=== FOOTER START ===*/

.footer {
   background-color: var(--first-color);
   padding: 4rem 0; }

   @media screen and (min-width: 1024px) {
      .footer {
         padding: 1.6rem 0;
      }
}

@media screen and (min-width: 610px) {
   .footer > .container {
      align-items: flex-start;
   }   
}

@media screen and (min-width: 1024px) {
   .footer > .container {
      padding: 0;
   }   
}

.footer > .container > .section-title {
   text-align: left;
   margin-bottom: 4rem;
   padding: 0; }

   @media screen and (min-width: 610px) {
      .footer > .container > .section-title {
         padding-top: 1rem;
      }
}

.footer > .container > .section-title > .title {
   font-size: 2.4rem;
   font-weight: var(--semi-font);
   color: var(--high-contrast);
   margin-bottom: 0.6rem; }

   @media screen and (min-width: 1024px) {
      .footer > .container > .section-title > .title {
         font-size: 3.8rem;
      }
}

.footer > .container > .section-title > .subtitle {
   font-size: 1.3rem;
   font-weight: var(--semi-font);
   color: var(--first-color-lighter); }

   @media screen and (min-width: 1024px) {
      .footer > .container > .section-title > .subtitle {
         font-size: 1.4rem;
      }
}

.footer > .container > .footer-sitemap {
   width: 100%;
   text-align: left;
   margin-bottom: 5rem;
}

.footer > .container > .footer-sitemap > .list {
   list-style: none; }

   @media screen and (min-width: 610px) {
      .footer > .container > .footer-sitemap > .list {
         width: 50%;
         margin: 0 auto;
      }
   }

   @media screen and (min-width: 1024px) {
      .footer > .container > .footer-sitemap > .list {
         width: 100%;
         display: flex;
      }
}

.footer > .container > .footer-sitemap > .list > .item {
   padding: 1.6rem 0; }

   @media screen and (min-width: 1024px) {
      .footer > .container > .footer-sitemap > .list > .item {
         cursor: pointer;
         transition: .3s;
      }
      .footer > .container > .footer-sitemap > .list > .item:not(:first-child) {
         margin-left: 3rem;
      }
      .footer > .container > .footer-sitemap > .list > .item:hover > .link {
         color: var(--high-contrast);
         transition: .3s;
      }
}

.footer > .container > .footer-sitemap > .list > .item > .link {
   font-size: 1.5rem;
   font-weight: var(--medium-font);
   color: var(--first-color-lighter); }

   @media screen and (min-width: 1024px) {
      .footer > .container > .footer-sitemap > .list > .item > .link {
         font-size: 1.6rem;
         transition: .3s;
      }
}

.footer > .container > .footer-social {
   width: 100%;
   margin-bottom: 5rem;
   padding: 1.6rem 0;
}

.footer > .container > .footer-social > .social {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: center; }

   @media screen and (min-width: 610px) {
      .footer > .container > .footer-social > .social {
         justify-content: flex-end;
      }
}

.footer > .container > .footer-social > .social > .item {
   margin-right: 3.2rem; }

   @media screen and (min-width: 610px) {
      .footer > .container > .footer-social > .social > .item {
         margin-right: 0;
         margin-left: 2.4rem;
         padding: 0 1rem;
      }
   }

   @media screen and (min-width: 1024px) {
      .footer > .container > .footer-social > .social > .item {
         cursor: pointer;
         transition: .3s;
      }
}

.footer > .container > .footer-social > .social > .item > .link > svg path {
   fill: var(--first-color-lighter);
   transition: .3s; }

   @media screen and (min-width: 1024px) {
      .footer > .container > .footer-social > .social > .item:hover > .link > svg path {
         fill: var(--high-contrast);
         transition: .3s;
      }
}

.footer > .credits {
   width: 100%;
   display: block;
   text-align: center;
   padding: 2rem 1rem;
   font-size: 1.2rem;
   color: var(--text-color-light);
   font-weight: var(--medium-font);
   background-color: transparent; }

   @media screen and (min-width: 1024px) {
      .footer > .credits {
         padding: 5rem 0 0;
      }
}

.footer > .credits > .link {
   text-decoration: none;
   color: var(--high-contrast);
}

.footer > .credits > span {
   color: red;
}

/*=== FOOTER END ===*/