* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font: inherit;
   font-family: 'Ubuntu', sans-serif;
   
   scroll-behavior: smooth;
   scroll-margin-top: 100px;
}

html {
   visibility: hidden; /* trying to prevent layout shift... i hope it works :D */
}

/* Reseting Browser Default Style */

img {
   display: block;
   max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p, ul {
   margin-bottom: 0;
}

a {
   text-decoration: none;
}

ul {
   list-style: none;
}

html, body {
   min-height: 100%;
   overflow-x: hidden;
}

button {
   border: 0;
   outline: 0;
   cursor: pointer;
   background-color: transparent;
}

button.disabled {
   cursor: no-drop;
   background-color: var(--clr-purple-dark) !important;
}

button.disabled span {
   background-color: var(--clr-purple-dark) !important;
   transform: translate(0, 0);
   font-style: italic;
}

/* Custom properties */


:root {

   --clr-purple: #270082;

   --clr-purple-dark: #1A1A40;
   --clr-purple-dark-hover: #131333;

   --clr-purple-light: #7A0BC0;

   --clr-purple-soft: #8367C7;
   --clr-purple-soft-hover: #6d44d4;

}


html.dark-mode {
   --clr-dark: #0b091a;
   --clr-skils-icon: #1A1A40;
   --clr-text: #fff;
}

html.light-mode {
   --clr-dark: #fff;
   --clr-skils-icon: #fff;
   --clr-text: var(--clr-purple-dark);
}

body {
   background-color: var(--clr-dark);
}

/* ######################################## */
/* #            Utility classes           # */
/* ######################################## */

.bg-dark {
   background-color: var(--clr-dark);
}

.bg-purple {
   background-color: var(--clr-purple);
}

.bg-purple-dark {
   background-color: var(--clr-purple-dark);
}

.bg-purple-light {
   background-color: var(--clr-purple-light);
}

.bg-purple-soft {
   background-color: var(--clr-purple-soft);
}

.text-dark {
   color: var(--clr-dark);
}

.text-purple {
   color: var(--clr-purple);
}

.text-purple-dark {
   color: var(--clr-purple-dark);
}

.text-purple-light {
   color: var(--clr-purple-light);
}

.text-purple-soft {
   color: var(--clr-purple-soft);
}

.container {
   margin: 0 auto;
   padding: 0 10px;
   max-width: 1216px;
   position: relative;
}


.btn-pushable {
   border-radius: 10px 0 10px 0;
   display: inline;
   cursor: pointer;
   height: fit-content;
}

.btn-pushable.btn-purple {
   background-color: #fff;
}

.btn-pushable.btn-white {
   background-color: var(--clr-purple-soft);
}

html.light-mode :is(.btn-pushable.btn-purple, .btn-pushable.btn-white) {
   background-color: var(--clr-purple);

   -webkit-box-shadow: -1px 8px 7px -6px rgba(122,11,192,1);
   -moz-box-shadow: -1px 8px 7px -6px rgba(122,11,192,1);
   box-shadow: -1px 7px 5px -6px var(--clr-purple);
}

.btn-pushable.btn-purple span {
   background-color: var(--clr-purple-soft);
   color: #fff;
}

.btn-pushable.btn-white span {
   background-color: #fff;
   color: var(--clr-purple-soft);
}

html.light-mode .btn-pushable.btn-white span {
   background-color: #eee;
}

.btn-pushable span {
   padding: 10px 15px;
   border-radius: 10px 0 10px 0;

   font-size: 1.2rem;
   
   display: flex;
   align-self: center;
   justify-content: space-between;
   
   transition: .2s all;
   transform: translate(-4px, -4px);
}

.btn-pushable span i {
   margin-left: 15px;
}

.btn-pushable:active span {
   transform: translate(0, 0);
}

.btn-pushable.btn-purple:hover span {
   background-color: var(--clr-purple-soft-hover);
}

.btn-pushable.btn-white:hover span {
   background-color: rgb(215, 215, 215);
}

.btn-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

/* .btn-wrapper :is(button, a):first-child {
   margin-right: 15px;
} */

.section-title {
   margin: 60px 0 60px 0;
   color: #fff;

   font-size: 2rem;
   text-align: center;
   position: relative;
}

html.light-mode .section-title {
   color: var(--clr-purple-light);
}

.section-title::after {
   content: '';
   display: block;

   position: absolute;
   bottom: -8px;
   left: 0;
   right: 0;
   margin: 0 auto;

   width: 7%;
   height: 4px;

   border-radius: 10px;
   background-color: var(--clr-purple-soft);
}

html.light-mode .section-title::after {
   background-color: var(--clr-purple);
}

.bold {
   font-weight: bold;
}

.pl-5 {
   padding-left: 1rem;
}


/* ######################################## */
/* #        Lazy Load Animation           # */
/* ######################################## */

[data-lazy] {
   opacity: 0;
   transition-property: all;
   transition-timing-function: ease-out;
   visibility: hidden;
}

[data-lazy].fade-left {
   transform: translateX(-50px);
}

[data-lazy].fade-right {
   transform: translateX(50px);
}

[data-lazy].fade-top {
   transform: translateY(-25px);
}

[data-lazy].fade-bottom {
   transform: translateY(50px);
}

[data-lazy].fade-completed {
   transform: unset;
   opacity: 1;
   visibility: visible;
}

/* ######################################## */
/* #              Header                  # */
/* ######################################## */

.main-header {
   height: 80px;
   width: 100%;
   
   position: fixed;
   top: 0;
   z-index: 500;
   
   -webkit-box-shadow: -1px 8px 7px -6px rgba(122,11,192,1);
   -moz-box-shadow: -1px 8px 7px -6px rgba(122,11,192,1);
   box-shadow: -1px 8px 7px -6px rgba(122,11,192,1);

   background-color: var(--clr-dark);
}

.header-container #main-logo {
   width: 70px;
}

.header-container {
   height: 100%;

   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main-header .menu-wrapper {
   display: flex;
   align-items: center;
   column-gap: 30px;
}

.header-menu ul {
   display: flex;
   align-items: center;
}

.header-menu ul li:not(:last-child) {
   margin-right: 40px;
}

.header-menu ul a {
   display: flex;
   align-items: center;
   transition: .3s all;
   color: var(--clr-purple-soft);
}

html.light-mode .header-menu ul a {
   color: var(--clr-purple-light);
}

.header-menu ul a:hover {
   color: var(--clr-purple-light);
}

html.light-mode .header-menu ul a:hover {
   color: var(--clr-purple);
}

.header-menu ul a i {
   font-size: 1.3rem;
   margin-right: 10px;
}

.header-menu li a img {
   width: 20px;
   margin-right: 10px;
}

.header-menu li a .mobile-text {
   display: none;
}

.header-menu li {
   position: relative;
}

.header-menu li::after {
   display: block;
   content:'';

   height: 3px;
   width: 90%;

   position: absolute;
   z-index: 700;
   top: 27px;
   left: 5px;

   border-radius: 50px 0px 50px 0px;
   background: linear-gradient(89.34deg, var(--clr-purple-soft) 6.18%, var(--clr-purple-light) 89.94%);

   transition: transform .3s ease-in-out;
   transform-origin: right;
   transform: scaleX(0);
   
}

html.light-mode li::after {
   background: linear-gradient(89.34deg, var(--clr-purple) 6.18%, var(--clr-purple-dark) 89.94%);
}

.header-menu li:hover::after {
   transform-origin: left;
   transform: scaleX(1);
}


.main-header #btn-mobile {
   height: 25px;
   width: 35px;

   cursor: pointer;
   background-color: transparent;

   display: flex;
   flex-direction: column;
   justify-content: space-between;

   display: none;
}

.main-header #btn-mobile .line {
   height: 3px;
   width: 100%;

   background-color: var(--clr-purple-soft);
   transition: .3s all ease-in-out;
}

.main-header #btn-mobile.clicked .line:first-child {
   transform: rotate(45deg) translate(7px, 11px);
}

.main-header #btn-mobile.clicked .line:nth-child(2) {
   opacity: 0;
}

.main-header #btn-mobile.clicked .line:last-child {
   transform: rotate(-45deg) translate(4px, -9px);
}

.main-header #btn-toggle-theme {
   background-color: #ddd;
   height: 30px;
   width: 65px;
   border-radius: 25px;
   
   position: relative;

   transition: all .2s;
}

.main-header #btn-toggle-theme:focus {
   box-shadow: 1px 1px 5px var(--clr-purple-soft);
}

.main-header #btn-toggle-theme i {
   background-color: #fff;
   color: rgb(221, 201, 13);

   height: 24px;
   width: 24px;
   border-radius: 50%;

   display: flex;
   align-items: center;
   justify-content: center;

   position: absolute;
   left: 4px;
   top: 3px;

   transition: 
      left .3s,
      background-color .5s ease-in-out
   ;
}

.main-header #btn-toggle-theme.active {
   background-color: #323232;
}

.main-header #btn-toggle-theme.active:hover {
   background-color: #3e3e3e;
}

.main-header #btn-toggle-theme:hover {
   background-color: #ccc;
   box-shadow: 1px 1px 5px var(--clr-purple-soft);
}

.main-header #btn-toggle-theme.active i {
   left: 37px;
   background-color: #111;
}

/* ######################################## */
/* #              Welcome                 # */
/* ######################################## */

.welcome-section {
   margin-top: 80px;
   height: 70vh;
   overflow: hidden;

   background-image: url('../img/setup.webp');
   background-size: 80%;
   background-repeat: no-repeat;
   background-position-y: 70%;
   background-position-x: center;
   background-blend-mode: color;
   background-color: rgba(0,0,0, .7);

   transition: background-size .2s ease-in;
   -moz-transition: background-size .2s ease-in;
   -ms-transition: background-size .2s ease-in;
   -o-transition: background-size .2s ease-in;
   -webkit-transition: background-size .2s ease-in;
}

html.light-mode .welcome-section {
   background-size: 100%;
   background-position-y: center;
}

.welcome-container {
   height: 100%;
}

.welcome-section .wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   
   height: 100%;
}

.welcome-section h1,
.welcome-section h2 {
   color: #fff;
}

.welcome-section h1 {
   font-size: 3rem;
   margin-bottom: 10px;

   animation: h1FadeUp .5s forwards;
}

@keyframes h1FadeUp {
   from {
      transform: translateY(200px);
      opacity: 0;
   }

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

.welcome-section h2 {
   font-size: 1.5rem;
   letter-spacing: 1px;
   line-height: 35px;

   margin-bottom: 15px;

   animation: h2FadeUp .5s forwards;
   animation-delay: .5s;
   opacity: 0;
}


@keyframes h2FadeUp {
   from {
      transform: translateY(200px);
      opacity: 0;
   }

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

.welcome-section #my-name {
   color: var(--clr-purple-soft);
   font-weight: bold;

   position: relative;
}

.welcome-section #my-name::after {
   content: '';
   display: block;

   position: absolute;
   bottom: -5px;
   left: 0;
   right: 0;
   margin: 0 auto;

   width: 80%;
   height: 4px;

   border-radius: 10px;
   background-color: currentColor;
}

.welcome-section a:first-child {
   animation: btnFadeLeft .5s forwards;
   animation-delay: 1s;
   opacity: 0;
}

@keyframes btnFadeLeft {
   from {
      transform: translateX(-200px);
      opacity: 0;
   }

   to {
      transform: translateX(0px);
      opacity: 1;
   }
}

.welcome-section a:last-child {
   animation: btnFadeCrazy 1s forwards;
   animation-delay: 1.5s;
   opacity: 0;
}

@keyframes btnFadeCrazy {
   0% {
      transform: translateY(200px);
      opacity: 0;
   }
   
   20% {
      transform: translateY(120px) translateX(160px);
      opacity: .2;
   }
   
   50% {
      transform: translateY(80px) translateX(-60px);
      opacity: .5;
   }
   
   70% {
      transform: translateY(-10px) translateX(-10px) rotate(15deg);
      opacity: .7;
   }
   
   100% {
      transform: translate(0, 0);
      opacity: 1;
   }

}


/* ######################################## */
/* #              About                   # */
/* ######################################## */

.about-section .wrapper {
   display: flex;
   margin-bottom: 100px;
}

.about-section .wrapper .img {
   margin-right: 90px;
   width: 30%;
   flex-shrink: 0;
}


.about-section .wrapper .img img {
   border-radius: 15px;
   transition: all .3s;

   -webkit-box-shadow: 6px 6px 8px -6px  var(--clr-purple);
   -moz-box-shadow: 6px 6px 8px -6px  var(--clr-purple);
   box-shadow: 6px 6px 8px -6px var(--clr-purple);
}


.about-section .wrapper .img img:hover {
   transform: scale(0.9) translateY(-10px);
   border-radius: 50%;
}

.about-section p {
   color: #fff;
   font-size: 1.4rem;
   margin-bottom: 15px;
}

html.light-mode .about-section p {
   color: var(--clr-purple-light);
}

html.light-mode .about-section p strong {
   color: var(--clr-purple);
}

.about-section .btn-purple {
   margin-top: 5px;
}



/* ######################################## */
/* #              Skills                  # */
/* ######################################## */

.accordion {
   width: 100%;
   
   border-radius: 5px 5px 0 0;
   
   display: flex;
   flex-wrap: wrap;
   /* justify-content: space-between; */
   align-items: center;
   
   background-color: var(--clr-purple-dark);
   color: #fff;
   box-shadow: 7px 7px 0 var(--clr-purple-soft);
   
   margin-bottom: 45px;
}

html.light-mode .accordion {
   background-color: #fff;
   color: var(--clr-purple);
   border: 1px solid var(--clr-purple-soft);
}


.accordion header {
   width: 100%;
   cursor: pointer;
   
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px;

   transition: .2s all;
}


html.light-mode .accordion header:hover {
   background-color: #dedede;
}

.accordion .title {
   font-size: 2rem;
}

.accordion > .title i {
   margin-right: 20px;
}

html.light-mode .accordion > .title i,
html.light-mode .accordion .accordion-arrow {
   color: var(--clr-purple);
}

.accordion .accordion-arrow {
   color: #fff;
   background-color: transparent;
   font-size: 2rem;
   padding: 0 7px;
   transition: transform .3s ease-in-out;
}

.accordion-body {
   width: 100%;
   display: flex;

   margin: 0 0 0 15px;
   padding-left: 15px;

   border-left: 5px solid var(--clr-purple-soft);
   max-height: 0;
   overflow: hidden;
   
   transition: all .25s ease-out;
}

.accordion-body.show {
   margin-block: 10px 15px;
   transition: all .25s ease-in;
   max-height: 1000px;
}

.accordion-body .text-content {
   width: 50%;
   flex-shrink: 0;
}

.accordion-body .text-content .title {
   margin-bottom: 5px;
   opacity: 0;
}

.accordion-body .text-content .title.fade-in {
   transition: 1s all;
   opacity: 1;
}

.accordion-body .text-content .body {
   margin-right: 20px;
   opacity: 0;
}

.accordion-body .text-content .body.fade-in {
   transition: 1s all;
   opacity: 1;
}

.accordion-body .icons-wrapper {
   display: flex;
   flex-wrap: wrap;
}

.icons-wrapper .icon {
   height: 110px;
   width: 110px;
   
   background-color: var(--clr-dark);
   color: var(--clr-purple-dark);
   
   border-radius: 5px;
   font-size: 4.5rem;
   
   display: flex;
   align-items: center;
   justify-content: center;
   
   margin: 0 21px 21px 0;
}

html.light-mode .icons-wrapper .icon {
   background-color: var(--clr-purple-soft);
   color: #fff;
}

.icons-wrapper .mobile-description {
   display: none;
}

.icons-wrapper .smaller-icon {
   font-size: 3.5rem;
}

.icons-wrapper .icon:nth-child(n+5) {
   margin-bottom: 0;
}

.icons-wrapper .icon :is(i, svg, svg path) {
   transition: .3s all;
}

.fa-hand-point-right {
   animation: handMoving .7s infinite;
}

@keyframes handMoving {
   0% {
      transform: translateX(-5px);
   }

   50% {
      transform: translateX(15px);
   }

   100% {
      transform: translateX(-5px);
   }
}

h5 small {
   font-size: 1rem;
}

/* ######################################## */
/* #              Portfolio               # */
/* ######################################## */

.portfolio-container {
   position: relative;
}

.portifolio-previous-arrow,
.portifolio-next-arrow {
   color: var(--clr-purple-soft);
   background-color: transparent;

   font-size: 2rem;
   transition: .3s all;
   
   z-index: 10;
}

.portifolio-previous-arrow:hover,
.portifolio-next-arrow:hover {
   color: var(--clr-purple-soft-hover);
}

.portifolio-previous-arrow {
   padding: 10px 10px 10px 0;
   position: absolute;
   top: 60%;
}

.portifolio-next-arrow {
   padding: 10px 0 10px 10px;
   position: absolute;
   top: 60%;
   right: 0;
}

.portfolio-container .wrapper {
   display: flex;
   color: #fff;
}

.portfolio-container .img {
   margin: 0 70px;
   object-fit: contain;
}

.portfolio-container .img img {
   border-radius: 5px;
   max-width: 300px;
}

html.light-mode .portfolio-container .img :is(img, video) {
   -webkit-box-shadow: 6px 8px 10px -6px  var(--clr-purple);
   -moz-box-shadow: 6px 8px 10px -6px  var(--clr-purple);
   box-shadow: 6px 8px 10px -6px var(--clr-purple);
}

.portfolio-container .img video {
   max-width: 400px;
}

.portfolio-container .img.img-tall img {
   height: 230px;
}

.portfolio-container .text-content {
   padding-right: 70px;
}

.portfolio-container .title {
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 15px;
}

html.light-mode .portfolio-container .title {
   color: var(--clr-purple);
}

.portfolio-container .description {
   font-size: 1.2rem;
   margin-bottom: 15px;
}

html.light-mode .portfolio-container .description {
   color: var(--clr-purple-light);
}

html.light-mode .portfolio-container .description strong{
   color: var(--clr-purple);
}

.portfolio-container .btn-wrapper {
   margin-top: 15px;
}

.slick-dots {
   margin-top: 25px;
   display: flex;
   justify-content: center;
}

.slick-dots li button {
   height: 15px;
   width: 15px;
   border-radius: 50%;
   overflow: hidden;

   color: var(--clr-purple-soft);
   background-color: var(--clr-purple-soft);
   transition: .3s all;
   
}

.slick-dots li.slick-active button {
   color: var(--clr-purple);
   background-color: var(--clr-purple);
}

.slick-dots li:not(:last-child) {
   margin-right: 10px;
}


/* ######################################## */
/* #              Contato                 # */
/* ######################################## */

.contact-container .wrapper {
   display: flex;
   justify-content: space-between;
}

.contact-container .links-wrapper {
   width: 45%;
}

.contact-container .contact-link {
   display: flex;
   justify-content: space-between;
   align-items: center;

   padding: 20px 10px;
   position: relative;
   
   border: 2px solid var(--clr-dark);
   border-radius: 5px;
   background-color: var(--clr-dark);
   
   transition: .2s all;
}

.contact-container .contact-link::before, 
.contact-container .contact-link::after {
   content: '';
   
   position: absolute;
   z-index: -1;

   width: 0;
   height: 0;
   
   background-color: var(--clr-purple-soft);
   
   transition: .3s all ease-in-out;

   -webkit-backface-visibility: hidden;
   perspective: 1000; 
   backface-visibility: hidden;
   -webkit-perspective: 1000;
}

.contact-container .contact-link::before {
   top: -5px;
   left: -5px;
   border-radius: 5px 0 0 0;
}

.contact-container .contact-link::after {
   bottom: -5px;
   right: -5px;
   border-radius: 0 0 5px 0;
}

.contact-container .contact-link:hover::before {
   width: 70%;
   height: 80%;
}

.contact-container .contact-link:hover::after {
   width: 70%;
   height: 80%;
}

.contact-container .contact-link .content-wrapper {
   display: flex;
}


.contact-container .contact-link:not(:last-child) {
   margin-bottom: 20px;
}

.contact-container .contact-link .content-wrapper i {
   font-size: 3rem;
   color: var(--clr-purple-soft);
   margin-right: 20px;
}

.contact-container .contact-link .title {
   font-size: 1.5rem;
   color: #fff;
}

html.light-mode .contact-container .contact-link .title {
   color: var(--clr-purple-light);
   font-weight: bold;
}

.contact-container .contact-link .label {
   color: #777;
}

html.light-mode .contact-container .contact-link .label {
   color: var(--clr-purple-soft);
}

.contact-container .contact-link .icons-wrapper .button {
   font-size: 1.7rem;
   color: var(--clr-purple-soft);
}

.contact-container .contact-link .icons-wrapper .button {
   margin: 0 10px;
   opacity: 0;
   transition: all .3s ease-in-out;
   transition-delay: .1s;
}

.contact-container .contact-link .icons-wrapper .button:hover {
   color: var(--clr-purple-soft-hover);
}

.contact-container .contact-link .icons-wrapper a.button {
   transform: translateY(-35px);
   display: inline-block;
}

.contact-container .contact-link .icons-wrapper button.button {
   transform: translateY(35px);
}

.contact-container .contact-link:hover .icons-wrapper .button {
   transform: translateY(0px);
   opacity: 1;
}

/* ######################################## */
/* #              Form                    # */
/* ######################################## */

.form-wrapper {
   width: 45%;
}

.form-group:nth-child(3) {
   margin-bottom: 10px;
}

.form-group label {
   display: inline-block;
   padding: 0 10px 0 5px;
   font-size: 1rem;
   
   transform: translate(10px, 30px);
   transition: .2s all;
   
   color: var(--clr-purple-soft);
   background-color: var(--clr-dark);
   user-select: none;
   cursor: text;

   position: relative;
   z-index: 2;
}

.form-group:focus-within label,
.form-group label.input-has-value {
   transform: translate(10px, 7px);
}

.form-group .form-field {
   background-color: var(--clr-dark);
   color: #fff;
   
   outline: 0;
   border: 2px solid var(--clr-purple-soft);
   border-radius: 5px;

   width: 100%;
   min-height: 40px;
   
   padding: 5px 10px;
   font-size: 1rem;

   transition: .1s all;
   position: relative;
}

html.light-mode .form-group .form-field {
   color: var(--clr-purple);
}

.form-group .form-field.is-invalid {
   border: 2px solid #ff4c4c;
   animation: shake .1s linear;
   animation-iteration-count: 3;
}

@keyframes shake {
   from {
      left: -5px;
   }
   
   to {
      right: -5px;
   }
}

.form-group textarea.form-field {
   height: 120px;
   padding-top: 15px;
   resize: none;
}

.form-group .form-field.is-invalid:focus {
   border: 2px solid #ff4c4c;
   box-shadow: 2px 2px 0 #ff4c4c;
}

.form-group .form-field:focus {
   border: 2px solid var(--clr-purple-soft-hover);
   box-shadow: 2px 2px 0 #fff;
}

.form-wrapper .form-feedback {
   margin-block: 10px 20px;
   font-style: italic;

   visibility: hidden;
   transform: translateY(40px);
   opacity: 0;

   transition: .3s ease all;
}

.form-wrapper :is(.form-feedback.success, .form-feedback.error) {
   opacity: 1;
   transform: translateY(0);
   visibility: visible;
}

.form-wrapper .form-feedback.success {
   color: rgb(64, 213, 64);
}

.form-wrapper .form-feedback.error {
   color: rgb(171, 23, 23);
}

.form-wrapper .form-feedback.error a {
   text-decoration: underline;
   color: rgb(43, 146, 230);
}

/* ######################################## */
/* #          Language Popover            # */
/* ######################################## */

.language-popover {
   position: fixed;
   bottom: -500px;
   left: 0;
   right: 0;
   z-index: 100;

   transition: all 1s ease;

   margin: 0 auto;
   padding: 15px 30px;
   width: 70%;
   max-width: 1000px;

   background-color: var(--clr-purple-dark);

   display: flex;
   align-items: center;
   gap: 30px;

   border-radius: 8px;
   border: 2px solid var(--clr-purple-soft);
   box-shadow: 2px 2px 4px var(--clr-purple-light);
}

.language-popover.show {
   bottom: 20px;
}

.language-popover .icon-wrapper i {
   font-size: 3rem;
   color: var(--clr-purple-soft);
}

.language-popover .text {
   color: var(--clr-text);
   margin-bottom: 15px;
   font-size: 1.3rem;
}

/* ######################################## */
/* #              Footer                  # */
/* ######################################## */

.main-footer {
   margin-top: 50px;
   color: #898989;
}

.main-footer hr {
   height: 2px;
   background: var(--clr-purple-soft);
   border: 0;
}

.main-footer .text-wrapper {
   display: flex;
   justify-content: space-between;
   margin: 20px 0;
}

html.light-mode .main-footer .text-wrapper {
   color: var(--clr-purple);
}

/* ######################################## */
/* #               MOBILE                 # */
/* ######################################## */

@media (max-width: 768px) {

   .container {
      padding: 0 15px;
   }

   .section-title {
      margin: 60px 0 50px 0;
   }

   .section-title::after {
      width: 20%;
   }

   .main-header {
      height: 70px;
   }

   .main-header #btn-mobile {
      display: flex;
   }

   .header-container #main-logo {
      width: 50px;
   }

   .header-menu {
      position: absolute;
      top: 70px;
      left: 0;
      z-index: 400;

      height: calc(100vh - 70px);
      width: 100vw;
      
      background-color: var(--clr-purple-dark);
      
      transition: 
         .3s .1s all ease-in-out
      ;

      transform: translateX(-200%);
      opacity: 0;
   }

   
   .header-menu.open {
      transform: skew(-16deg) translateX(-80px);
      opacity: 1;
      box-shadow: 50px 20px 5px rgba(0,0,0, .8);
   }

   .header-menu::before {
      content: '';
      height: 300px;
      width: 300px;

      position: absolute;
      top: 0;
      left: -200px;
      background-color: var(--clr-purple-dark);
   }

   .header-menu ul li {
      opacity: 0;
      transform: translateY(-20px);
   }
   
   .header-menu.open ul li {
      opacity: 1;
      transform: translateY(0);

      transition-delay: 0;
      transition-property: transform, opacity;
   }
   
   .header-menu ul {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      padding-top: 50px;
      transform: skew(16deg);
   }

   .header-menu ul li:not(:last-child) {
      margin-bottom: 50px;
   }

   .header-menu.open ul li:nth-child(1) {
      margin-right: 0px;
      transition-duration: .4s;
      transition-delay: .2s;
   }
   
   .header-menu.open ul li:nth-child(2) {
      margin-right: 20px;
      transition-duration: .4s;
      transition-delay: .5s;
   }
   
   .header-menu.open ul li:nth-child(3) {
      margin-right: 30px;
      transition-duration: .4s;
      transition-delay: .8s;
   }
   
   .header-menu.open ul li:nth-child(4) {
      margin-right: 60px;
      transition-duration: .4s;
      transition-delay: 1.1s;
   }
   
   .header-menu.open ul li:nth-child(5) {
      margin-right: 80px;
      transition-duration: .4s;
      transition-delay: 1.4s;
   }

   .header-menu.open li:nth-child(1)::after {
      transition-delay: .3s;
   }
   
   .header-menu.open li:nth-child(2)::after {
      transition-delay: .6s;
   }
   
   .header-menu.open li:nth-child(3)::after {
      transition-delay: .9s;
   }
   
   .header-menu.open li:nth-child(4)::after {
      transition-delay: 1.2s;
   }
   
   .header-menu.open li:nth-child(5)::after {
      transition-delay: 1.5s;
   }

   .header-menu a {
      font-size: 1.5rem;
   }
   
   .header-menu li a .desktop-text {
      display: none;
   }
   
   .header-menu li a .mobile-text {
      display: block;
   }


   .header-menu.open li::after {
      transition-duration: .2s;
      transform: scaleX(1);
      top: 30px;
   }

   /* ######################################## */
   /* #              Welcome                 # */
   /* ######################################## */

   .welcome-section {
      margin-top: 70px;

      height: 45vh;
      background-position-y: 10%;

      box-shadow: 0px 10px 10px -10px var(--clr-purple-light);
   }

   html.light-mode .welcome-section {
      background-size: cover;
   }

   .welcome-section h1 {
      font-size: 2rem;
   }

   .welcome-section h2 {
      font-size: 1.2rem;
      line-height: 26px;
   }

   
   /* ######################################## */
   /* #              About                   # */
   /* ######################################## */

   .about-section .wrapper {
      flex-wrap: wrap;
      margin-bottom: 0;
   }

   .about-section .wrapper .img {
      width: 60%;
      margin: 0 auto;
   }

   .about-section p {
      font-size: 1.1rem;
      line-height: 20px;

      margin-top: 10px;
      text-align: center;
   }

   .about-section .btn-wrapper {
      justify-content: center;
      gap: 10px;
   }

   
   /* ######################################## */
   /* #              Skills                  # */
   /* ######################################## */

   .accordion {
      margin-bottom: 30px;
   }
   
   .accordion header {
      padding: 20px 10px 20px 10px;
   }

   .accordion .accordion-body {
      margin-right: 15px;
   }

   .accordion :is(.title, .accordion-arrow) {
      font-size: 1.15rem;
   }

   .accordion > .title i {
      margin-right: 5px;
   }

   .accordion-body {
      border-left: none;
      padding-left: 0;
   }

   .accordion-body .text-content {
      display: none;
   }

   .icons-wrapper {
      justify-content: space-evenly;
      gap: 10px;
   }

   .icons-wrapper .icon {
      width: 95px;
      height: 95px;

      font-size: 3.5rem;
      margin: 0;

      transition: all .3s;
   }
   
   .icons-wrapper .icon.icon-mobile-open {
      height: fit-content;
      width: 93%;

      padding: 10px 5px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
   }

   .icons-wrapper .icon-mobile-open .mobile-description {
      font-size: .9rem;
      text-align: center;

      display: block;
   }  

   .icons-wrapper .smaller-icon {
      font-size: 2.5rem;
   }

   .icons-wrapper .svg-icon {
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .icons-wrapper .svg-icon svg {
      width: 70%;
      height: 70%;
   }
   
   .icons-wrapper .icon-mobile-open.svg-icon svg {
      width: 25%;
      height: 25%;
   }

   /* ######################################## */
   /* #              Portifolio              # */
   /* ######################################## */

   .portfolio-container .wrapper {
      flex-wrap: wrap;
      justify-content: center;
   }

   .portfolio-container .img {
      margin: 0 20px;
   }

   .portfolio-container .img img {
      max-width: 200px;
   }

   .portfolio-container .img.img-tall img {
      height: unset;
   }

   .portfolio-container .img video {
      max-width: 250px;
   }

   .portfolio-container .text-content {
      padding: 0 20px;
      width: 90%;
   }

   .portfolio-container .title {
      font-size: 1.7rem;
      text-align: center;
      margin-top: 15px;
   }

   .portfolio-container .description {
      font-size: 1rem;
      text-align: center;
   }

   .portfolio-container .btn-wrapper {
      justify-content: center;
   }

   .portfolio-container .btn-pushable span {
      padding: 8px 15px;
      font-size: 1.1rem;
   }

   .portifolio-previous-arrow {
      left: 10px;
   }

   .portifolio-next-arrow {
      right: 10px;
   }

   .slick-dots {
      margin-top: 10px;
   }

   /* ######################################## */
   /* #              Contato                 # */
   /* ######################################## */

   .contact-container .wrapper {
      flex-wrap: wrap;
   }
   
   .contact-container .links-wrapper {
      width: 100%;
      
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }

   .contact-container .contact-link {
      align-items: start;
      padding: 10px 20px;
      margin-bottom: 20px;
      cursor: pointer;
   }

   .contact-container .contact-link :is(.text, .icons-wrapper) {
      display: none;
   }

   .contact-container .contact-link .content-wrapper i {
      font-size: 4rem;
      margin-right: 10px;
      transition: color .2s;
   }

   .contact-container .contact-link .content-wrapper i:hover {
      color: var(--clr-purple-soft-hover);
   }

   .contact-container .contact-link::before,
   .contact-container .contact-link::after {
      display: none;
   }


   /* ######################################## */
   /* #              Form                    # */
   /* ######################################## */
   
   .form-wrapper {
      width: 100%;
   }
   
   .form-group {
      margin-bottom: 0;
   }
   
   .form-group:last-child {
      margin-bottom: 15px;
   }

   .form-wrapper .btn-pushable {
      width: 100%;
   }
   
   .form-wrapper .btn-pushable span {
      font-size: 1rem;
      display: flex;
      justify-content: center;
   }

   .form-wrapper .form-feedback {
      text-align: center;
      font-size: .95rem;
   }

   /* ######################################## */
   /* #          Language Popover            # */
   /* ######################################## */

   .language-popover {
      flex-wrap: wrap;
      justify-content: center;
      width: 90%;

      padding-inline: 15px;
   }

   .language-popover .text {
      font-size: .9rem;
      text-align: center;
   }

   .language-popover .btn-wrapper {
      display: flex;
      justify-content: center;
   }

   .language-popover .btn-pushable span {
      font-size: .8rem;
      padding-block: 8px;
   }

   /* ######################################## */
   /* #              Footer                  # */
   /* ######################################## */

   .main-footer {
      margin-top: 25px;
   }

   .main-footer .text-wrapper {
      font-size: .8rem;
      flex-wrap: wrap;

      text-align: center;
   }

   .main-footer .text-wrapper p {
      width: 100%;
   }

   .main-footer .text-wrapper p:last-child {
      margin-top: 20px;
   }

}

@media (max-width: 370px) {

   .welcome-section h2 {
      font-size: 1.1rem;
   }

   .accordion :is(.title, .accordion-arrow) {
      font-size: 1rem;
   }
}