/* Header */
.header-container {
  height: 8.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 3.2rem;
  background-color: black;
}
.main-nav-links {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-top: 6px;
}
.main-nav-link {
  font-size: 1.8rem;
  z-index: 999;
}
.logo {
  font-size: 2.4rem;
}
.header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}
.mobile-nav-icon {
  font-size: 2rem;
  display: flex;
}
.mobile-nav {
  display: none;
}
/* Hero Section */
.section-hero {
  position: relative;
  padding: 0 3.2rem;
}
.sub-heading {
  font-size: 3rem;
}
.hero-text-box {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-self: center;
}
.hero-img-box {
  height: 62.4rem;
  z-index: -1;
}
.hero-img {
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  position: fixed;
  top: 35px;
  bottom: 0;
  right: 5px;
}
.hero-text-box
/* About Section */
.section-about {
  position: relative;
}
.career-profile {
  display: flex;
  gap: 3.2rem;
}
.text-box {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: relative;
}
.skill,
.exp,
.edu {
  text-wrap: nowrap;
}
.text-box .grid {
  gap: 4rem;
}
.text-box .heading-teritary {
  margin-bottom: 10px;
}
.about-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  max-width: 120rem;
  padding: 0 5rem;
}
.exp-profile {
  margin-top: 45px;
}
.edu-profile {
  margin-top: -25px;
}
.profile-list {
  display: flex;
  justify-content: space-between;
}
.skills-list,
.edu-list,
.exp-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
}
.skills {
  margin-bottom: 2rem;
}
.skill,
.exp,
.edu {
  text-transform: capitalize;
}
/* .active {
  color: red;
}
.active-tab {
  display: block;
}
.tab-content {
  display: none;
}
.tab-link {
  color: white;
} */
/* .edu-list,
.exp-list {
  position: absolute;
  top: 30rem;
  right: 30rem;
} */
/* .edu-list,
.exp-list {
  display: none;
}
.exp-open .exp-list-title .exp-list {
  display: block;
} */
/* .about {
  position: relative;
} */
.profile {
  position: absolute;
  background-color: blue;
  display: none;
}
li:hover .profile {
  display: block;
}
/* services section */
.section-services {
  padding: 9.6rem 0;
}
.section-services {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.386) 40%,
    rgb(0, 0, 0) 100%
  );
}
.service-box {
  background-color: black;
}
.service-box {
  background-color: rgb(48, 48, 48);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-radius: 10px;
  transition: all 0.3s;
}
.service-box:hover {
  background-color: rgb(208, 4, 79);
  transform: translatey(-10px);
}

/* my work section */
.section-work {
  background-color: black;
}
.work-img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
  transition: all 0.6s ease-in;
}
.work-box {
  position: relative;
  border-radius: 10px;
  overflow-y: hidden;
}
.layer {
  background: transparent;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transition: all 0.5s;
  opacity: 0;
  padding: 0 3.2rem;
  text-align: center;
}
.layer:hover {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.768),
    rgba(208, 4, 79, 0.718)
  );
  opacity: 1;
  top: 0;
  cursor: pointer;
}

/* .layer .heading-quaternary,
.layer .h4-des,
.h4 .icon {
  bottom: 0;
  transform: translatex(-50%);
  position: absolute;
  left: 50%;
} */
/* .layer .heading-quaternary {
  position: absolute;
  top: 30%;
  right: 20;
  transform: translatex(100%);
}

.layer .h4-des {
  position: absolute;
  top: 40%;
  right: 20;
  padding: 0 2rem;
  text-align: center;
}
.layer .icon {
  position: absolute;
  top: 60%;
  right: 20;
}
.layer:hover .heading-quaternary {
  transform: translatex(0);
} */

/* .work-img:hover {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.875) 10%,
    rgba(0, 0, 0, 0.337) 50%,
    rgba(208, 4, 79, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.875) 10%,
    rgba(0, 0, 0, 0.337) 50%,
    rgba(0, 0, 0, 0) 90%
  );
  overflow: hidden;
  border-radius: 10px;
/* } */
/* .work-box {
  background: linear-gradient(to top, rgb(208, 4, 79));
  border-radius: 10px;
  transition: all 0.3s;
  position: relative;
}
.work-box:hover {
  transform: translatey(-10px);
}
.h4-des {
  font-size: 1.6rem;
  font-weight: 600;
}
.work-box-content {
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 3.2rem;
  display: flex;
}
.work-box .work-box-content {
  background: linear-gradient(to top, rgb(208, 4, 79));
  border-radius: 10px;
  transition: all 0.3s;
  position: relative;
  opacity: 100%;
} */
*/

/* Section CTA */
.cta-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.secondary-icon {
  margin-right: 2rem;
  color: rgba(208, 4, 79);
  font-weight: 300;
}
.section-cta {
  padding: 5.4rem 0;
}
.cv-btn {
  background-color: rgba(208, 4, 79);
}
.type-field {
  width: 100%;
}