html {
    scroll-behavior: smooth;
    scroll-padding-top: 170px;
}

@media (max-width: 1200px) and (min-width: 1101px) {
    html {
        scroll-padding-top: 220px;
    }
}
body {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
        "Lucida Sans", Arial, sans-serif;
    color: white;
    background: linear-gradient(135deg, #1a1e24 0%, #232830 40%, #1c2a38 70%, #162030 100%);
    background-attachment: fixed;
    font-size: 19px;
}
hr {
    margin: 6em;
}
h2 {
    text-align: center;
}

section {
    margin: 0 4.5em;
}
@media (max-width: 620px) {
    section {
        margin: 1em;
    }
}
.fs-25 {
    font-size: 25px;
}
.fs-40 {
    font-size: 40px;
}
.text-blue {
    color: #319cd9;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mt-2em {
    margin-top: 2em;
}

.icon img {
    height: 4em;
    width: 4em;
}
.ul-list {
    display: flex;
    align-items: center;
    gap: 5px;
}
.blue-arr {
    height: 1.2em;
}
/* BOUTONS SWAP */
/* .cta {
    position: relative;
    padding: 12px 18px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    display: flex;
    margin: auto;
    align-items: center;
    gap: 6px;
    z-index: 0;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 50px;
        background: #319cd9;
        width: 45px;
        height: 45px;
        transition: all 0.3s ease;
    }

    span {
        position: relative;
        font-family: "Ubuntu", sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: white;
    }

    svg {
        position: relative;
        top: 0;
        margin-left: 10px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: white;
        stroke-width: 2;
        transform: translateX(-5px);
        transition: all 0.3s ease;
    }

    .white-arr {
        height: 1.8em;
        z-index: 1;
    }

    &:active {
        transform: scale(0.95);
    }

    &:hover {
        &:before {
            width: 100%;
            background: #319cd9;
        }

        svg {
            transform: translateX(0);
        }
    }

} */
.cta {
  position: relative;
  padding: 10px 18px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  display: inline-flex;
  margin: auto;
  align-items: center;
  gap: 6px;
  z-index: 0;
  white-space: nowrap;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: #319cd9;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
}
.cta span {
  position: relative;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
}

.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta:hover:before {
  width: 100%;
  background: #319cd9;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active {
  transform: scale(0.95);
}

@media (max-width: 480px) {
  #skills .cta,
  #exp .cta {
    padding: 14px 20px;
    width: 100%;
    justify-content: center;
  }
  #skills .cta:before,
  #exp .cta:before {
    height: 100%;
    border-radius: 50px;
  }
  #skills .cta:hover:before,
  #exp .cta:hover:before,
  #skills .cta:active:before,
  #exp .cta:active:before {
    width: 100%;
  }
  #skills .cta span,
  #exp .cta span {
    white-space: normal;
    text-align: center;
  }
}

.white-arr {
    height: 1.8em;
    z-index: 1;
}

/* MENU SLICK */
.slick-prev,
.slick-next {
    top: 0 !important;
    transform: none !important;
    display: flex;
    width: 40px;
}

#exp .slick-slider {
    margin-top: 1.5em;
}

#exp .slick-list {
    margin: 0 0;
}

#exp .slick-slide article {
    padding-top: 0;
}


.slick-prev {
    animation: clicke 3s linear infinite;
}

.slick-next {
    animation: clicked 3s linear infinite;
    right: 10px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 40px;
    color: white;
    line-height: 0;
}
@media (max-width: 620px) {
    .slick-prev:before {
        margin-left: 20px;
        margin-top: 20px;
    }

    .slick-next:before {
        margin-right: 20px;
        margin-top: 20px;
    }
}

.slick-dots li.slick-active button:before {
    color: #319cd9;
    opacity: 1;
}

.slick-dots li button:before {
    color: #319cd9;
    font-size: 20px;
    opacity: 0.45;
}
@keyframes bouncing {

    from,
    to {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

@keyframes clicke {
    0% {
        transform: translateX(3px);
    }

    25% {
        transform: translateX(-3px);
    }

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

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(3px);
    }
}

@keyframes clicked {
    0% {
        transform: translateX(-3px);
    }

    25% {
        transform: translateX(3px);
    }

    50% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }

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

article.slide {
    padding: 2em;
}