* {
  box-sizing: border-box;
  cursor: none;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  cursor: none;
  overflow-x: hidden;
}

label, input, textarea, a, button, li, a[href], a:active  {
  cursor: none !important;
}

.phoneWorkLogo {
  display: none;
}

.custom-cursor {
  position: fixed;
  width: 50px; 
  height: 50px;
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  background-image: url(https://raw.githubusercontent.com/SoulaimanOuladBenTayeb/portfolio-images/main/assets/cursorHover.png) !important;
  background-size: cover;
  pointer-events: none; 
  transition: background-image 0.3s ease, transform 0.3s ease; 
  z-index: 1000000; 
}

.header {
  width: 100%;
  height: 100vh;
  background-image: url(../bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* position: fixed; */
}

header nav {
  /* background-color: red; */
  position: absolute;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px;
}

header nav .logo {
  text-shadow: 6px 2px 6px rgba(0, 0, 0, 0.37);
}

header nav ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.noheadernavigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 50px;
  box-shadow: 6px 2px 6px rgba(0, 0, 0, 0.37);
  position: fixed;
  width: 100%;
  z-index: 99;
}

.noheadernavigation .logo {
  font-size: 1.5rem;
  text-shadow: 3px 1px 6px rgba(0, 0, 0, 0.37);
}

.noheadernavigation ul {
  display: flex;
  align-items: center;
  gap: 3rem;
}

nav li a {
  font-size: 1.3rem;
  position: relative;
}

nav li a::before {
  content: "";
  background-color: #024161;
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 100%;
  bottom: -7px;
  left: calc(50% - 4px);
  opacity: 0;
  transition: ease 0.5s;
}

nav li a:hover::before {
  opacity: 1;
  bottom: -5px;
}

.activeNav::after {
  content: "";
  background-color: #024161;
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 100%;
  bottom: -5px;
  left: calc(50% - 4px);
}

.activeNav::after:hover {
  display: none;
}

.header section {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 999;
  width: 100%;
  text-align: center;
  flex-direction: column;
  top: 30%;
}

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

.header section article {
  margin-top: 2.5rem;
}

.header section article p {
  font-size: 1.2rem;
}

.header section h1{
  display: flex;
  gap: 3rem;
  align-items: center;
}

.CircleTitle{
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: #024161;
}

/* a {
  text-decoration: none;
  z-index: 10;
  color: inherit;
}

a:hover .custom-cursor {
  background-image: url(https://raw.githubusercontent.com/SoulaimanOuladBenTayeb/portfolio-images/main/assets/cursorHover.png) !important;
}

a:hover {
  cursor: none;
} */

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F8F8F8;
  z-index: 1;
  pointer-events: none;
  mask-image: radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(0, 0, 0, 0) 5%,
    rgba(0, 0, 0, 0.99) 10%,
    rgba(0, 0, 0, 0.99) 11%,
    rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.99) 10%,
    rgba(0, 0, 0, 0.99) 15%,
    rgba(0, 0, 0, 1) 100%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  transition: mask-position 0.3s ease, -webkit-mask-position 0.3s ease;
}

/* .container {
  height: 100vh;
  width: 100%;
} */

.container > section {
  display: flex;
  justify-content: space-evenly;
  padding: 5%;
}

.container > section article {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.seeMore {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.container > section article button {
  /* background: #024161; */
  background-color: #024161;
  border: none;
  padding: 15px 20px;
  border-radius: 100px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: inherit;
  position: relative;
  z-index: 3;
  transition: ease 0.3s;
}

.container > section article button:hover {
  scale: 1.05;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #012e44;
}

.container > section figure {
  width: 100%;
  display: flex;
  /* background: red; */
  gap: 1.3rem;
}

.container > section figure img {
  width: 100%;
  scale: 1.05;
}

.cover-hover{
  position: relative;
  overflow: hidden;
}

.cover-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: -100%;
  background-color: #024161;
  transition: ease 0.3s;
  padding: 7%;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.overlay-title{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
}

.overlay-category{
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
}

.overlay-date{
  position: absolute;
  bottom: 5%;
  left: 5%;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
}

.cover-hover:hover .cover-overlay{
  left: 0;
}

 footer {
  background-color: #F8F8F8;
  display: flex;
  padding: 5%;
}

 footer section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

 footer section h2 {
  font-size: 3rem;
}

 footer article {
  width: 100%;
  padding: 5%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comicsans {
  position: relative;
  z-index: 1;
  color: white;
  font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
}

.comicsans::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 100%;
  bottom: 0;
  left: -7%;
  z-index: -1;
  background-color:#024161;
  transform: skewX(20deg);
}

/* .container section figure {
  height: 100vh;
  width: 100%;
} */

/***Works Page***/


.works-main {
  /* background-color: red; */
  padding: 10%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.works-container {
  /* background-color: red; */
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
  /* background-color: blue; */
}

.works-main .project-card {
  width: 20%;
  overflow: hidden;
}

.works-main .project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease;
}

.works-main .project-card:hover img {
  scale: 1.5;
}

.filter-btn {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding: 10px 20px;
  border: solid 1px #024161;
  border-radius: 100px;
  transition: ease 0.3s;
}

.filter-btn.active {
  background-color: #024161;
  color: white;
}

.filter-btn:hover {
  background-color: #024161;
  color: white;
}

.project-header {
  background-color: #F8F8F8;
  padding: 10%;
  position: relative;
  display: flex;
}

.scroll-down {
  content: "";
  height: 70px;
  width: 30px;
  border-radius: 100px;
  border: solid 1px #024161;
  position: absolute;
  bottom: 5%;
  left: calc(50% - 15px);
}

.scroll-down::before {
  content: "";
  height: 10px;
  width: 10px;
  background-color: #024161;
  position: absolute;
  bottom: 10%;
  left: calc(50% - 5px);
  border-radius: 100%;
}

.project-header article {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: auto;
  text-align: center;
}

/* .project-header figure{
  margin-bottom: -10%;
} */

.detailContainer {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 5% 20%;
}

.detailContainer section {
  display: flex;
  gap: 3rem;
}

.detailContainer section:nth-of-type(even) figure {
  order: -1;
}

.detailContainer section figure {
  width: 100%;
}

.detailContainer section figure img {
  width: 100%;
}

.detailContainer section article {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

#projectDetail {
  padding-bottom: 5%;
}

#projectDetail > a {
  text-align: center;
  width: inherit;
  margin: auto;
  display: block;
  width: fit-content;
  border: solid #024161 1px;
  padding: 10px 25px;
  border-radius: 100px;
  transition: ease 0.3s;
}

#projectDetail > a:hover {
  background-color: #024161;
  color: white;
}

.video-section {
  width: 60%;
  margin: auto;
  margin-bottom: 3%;
}

.video-section video {
  width: 100%;
}


/****ABOUT****/

.introduction {
  padding: 10% 5%;
  padding-right: 0%;
  background-color: #F8F8F8;
  /* display: flex; */
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.introduction article {
  width: 40%;
  /* background: red; */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.introduction figure {
  width: 45%;
  position: absolute;
  height: 100vh;
  right: 0;
  top: 0;
}

.introduction img {
  object-fit: cover;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.downloadCV {
  padding: 10px 25px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border: solid 1px #024161;
  border-radius: 100px;
  position: relative;
  z-index: 3333;
  overflow: hidden;
  transition: ease 0.3s;
}

.downloadCV::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: #012e44;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: -1;
  border-radius: 100px;
  transition: ease 0.3s;
}

.downloadCV:hover{
  color: #F8F8F8;
}

.downloadCV:hover::after {
  left: 0;
}

/**Copie**/

/* .miniwrapper{
  width: 100%;
  top: 100%;
}  */

/* Hard Skills Section */
.hard-skills {
  text-align: center;
  padding: 5%;
  /* background-color: #f4f4f4; */
}

.hard-skills h2 {
  margin-bottom: 5%;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
}

/* Skill Block */
.skill {
  /* background-color: #fff; */
  padding: 20px;
  width: 180px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.skill:hover {
  transform: scale(1.05);
}

/* Skill Icon */
.skill-icon {
  width: 100px;
}

/* Skill Name */
.skill-name {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

/* Skill Progress Bar */
.skill-bar {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.skill-level {
  height: 100%;
  background-color: #024161;
  border-radius: 5px;
}

/* Languages Section */
.languages {
  text-align: center;
  padding: 5%;
  padding-bottom: 7%;
  background: #F8F8F8;
}

.languages h2 {
  margin-bottom: 5%;
}

.languages-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

/* Language Block */
.language {
  padding: 20px;
  width: 200px;
  height: 200px;
  text-align: center;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  background-color: white;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.language:hover {
  transform: scale(1.05);
}

/* Language Name */
.language-name {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

/* Language Progress Bar */
.language-bar {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.language-level {
  height: 100%;
  background-color: #024161;
}


/* Education & Experience Section */
.education-experience {
  display: flex;
  width: 100%;
}

/* Education Section */
.education, .experience {
  width: 50%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Background Colors */
/* .education {
  background-color: rgba(0, 22, 21, 1);
}

.experience {
  background-color: rgba(0, 22, 21, 1);
} */

/* Titles */
/* .education h2, .experience h2 {
  font-size: 2rem;
  margin-bottom: 5%;
  position: relative;
} */

/* .education h2::after, .experience h2::after {
  content: "";
  height: 20px;
  width: 200px;
  background-image: url(../assets/barTitle.png);
  background-size: cover;
  position: absolute;
  left: -3%;
  bottom: -45%;
} */

/* Individual Items */
.education-item, .experience-item {
  padding: 5%;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 4px 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.logoExperience {
  content: "";
  /* background-color: red; */
  height: 100%;
  width: 30%;
  position: absolute;
  background-image: url(https://raw.githubusercontent.com/SoulaimanOuladBenTayeb/portfolio-images/main/assets/illustratorLogo.svg);
  background-size: cover;
  background-position: center;
  right: -5%;
  top: 0;
  transform: skewX(20deg);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.1);
}

.experience-item:nth-child(even) .logoExperience, .education-item:nth-child(even) .logoExperience {
  transform: skewX(-20deg);
}


/* Headings inside each item */
.education-item h3, .experience-item h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

/* Job/Study field */
.study-field, .job-title {
  font-size: 1rem;
  font-style: italic;
}

/* Date */
.education-date, .experience-date {
  font-size: 0.9rem;
}

.soft-skills {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3% 0%;
}

/*****CONTACT*****/

.contactHeader nav{
  position: absolute;
  top: 0;
}

.contactHeader {
  height: 100vh;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  position: relative;
  z-index: 3;
}

.contactHeader section {
  display: flex;
  padding: 0% 5%;
  /* background: blue; */
}

.contactHeader article {
  width: 100%;
  padding-right: 10%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* background: green; */
}

.contact-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 1rem;
  /* background: red; */
  padding: 0% 5%;
}

.contact-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5%;
  /* box-shadow: 0px 0px 6px rgba(92, 92, 92, 0.185); */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  background: white;
  z-index: 1;
}

.contact-section input, .contact-section textarea {
  display: block;
  padding: 2%;
  width: 100%;
  border: none;
  border: solid 1px #012e44;
  border-radius: 5px;
}

.contact-section input {
  display: block;
}

.contactHeader form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-container button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border: solid 1px #012e44;
  padding: 10px 25px;
  border-radius: 100px;
  width: fit-content;
  position: relative;
  transition: ease 0.3s;
  overflow: hidden;
}

.contact-container button::after {
  content: "";
  position: absolute;
  background: #012e44;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  top: 0;
  left: -100%;
  transition: ease 0.3s;
  z-index: -1;
}

.contact-container button:hover {
  color: #F8F8F8;
}

.contact-container button:hover::after {
  left: 0;
}

.contactInformation {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contactInformation p strong {
  font-weight: 700;
}