:root {
  --bg: #f3f8fa;
  --white: #fff;
  --black: #282936;
}

.nav-link-ul li a:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
  content: '';
  opacity: 0;
  -webkit-transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.nav-link-ul li a:hover:after,
.nav-link-ul li a:focus:after {
  height: 3px;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
}

.nav-link-ul li {
  position: relative;
}

.loader-container {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f3f4f6;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  width: 48px;
  height: 48px;
  border: 3px solid #d1d5db;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #FF3D00 transparent;
}

.certification-card-js {
  background: url('./assets/img/certificate/js.webp');
}

.certification-card-fe {
  background: url('./assets/img/certificate/responsive.webp');
}

.certification-card-be {
  background: url('./assets/img/certificate/backend.webp');
}

.certification-card-cs {
  background: url('./assets/img/certificate/cs.webp');
}

.certification-card-dv {
  background: url('./assets/img/certificate/data-vis.webp');
}

.certification-card {
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 12/8;
  display: flex;
  cursor: pointer;
}

.certification-card-overlay {
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent);
  width: 100%;
  height: 100%;
  opacity: .2;
  transition: .3s linear all;
}

.certification-card:hover .certification-card-overlay {
  transform: scale(1.5);
  opacity: 1;
}

.bg-color-gg {
  background-color: #5b6467;
  background-image: linear-gradient(315deg, #5b6467 0%, #8b939a 74%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.hiddenX {
  display: none;
}

.nav-custom {
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.17);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.17);
  border-bottom: 2px solid #FF3D00;
}

.btn-shadow {
transition: all ease .5s;
background: rgb(255,61,0);
/* background: linear-gradient(20deg, rgba(255,61,0,1) 0%, rgb(255, 198, 198) 100%); */
/* background: linear-gradient(15deg, #FF3D00, #f3f4f6) no-repeat; */
background-color: #FF3D00;
background-image: linear-gradient(319deg, #ffcb43 0%, #ff6425 37%, #ff0016 100%);
background-size: 120%;
background-position: left center;
}

.color-accent {
  color: linear-gradient(319deg, #ffcb43 0%, #ff6425 37%, #ff0016 100%);
}

.btn-shadow:hover {
  /* -webkit-box-shadow: 0px 0px 25px 0px rgba(255,61,0,0.73);
  -moz-box-shadow: 0px 0px 25px 0px rgba(255,61,0,0.73); */
  color: white;
  box-shadow: 0px 0px 20px 5px rgba(255,61,0,0.73); 
  background-size: 220%;
  background-position: right center;
}

#cta2 {
  position: relative;
  display: flex;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

#cta2.learn-more {
  width: 12rem;
  height: auto;
}

#cta2.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: var(--black);
  border-radius: 1.625rem;
}

#cta2.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: var(--white);
}

#cta2.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

#cta2.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}

#cta2.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: var(--black);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

#cta2:hover .circle {
  width: 100%;
}

#cta2:hover .circle .icon.arrow {
  background: var(--white);
  transform: translate(1rem, 0);
}

#cta2:hover .button-text {
  color: var(--white);
}

/* @supports (display: grid) {
  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
} */

.profile-pattern {
  background: radial-gradient(circle, transparent 14%, #ef4444 15%, #ef4444 25%, transparent 26%);
        background-size: 4em 4em;
        background-color: #ffffff;
        opacity: 0.75
}