/* Copyright 2024 Fathi. All rights reserved. */
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #071e2a;
  color: white;
  overflow-x:hidden;
  display: flex;
  flex-direction: column;
      min-height: 100vh;
}

main {
    flex: 1;
    width: 90%; /* Add margin to sides */
   max-width: 1200px; /* Set a maximum width */
  margin: 0 auto;
   padding: 20px 0;
}

/* Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background: #071e2a; /* Make it transparent */
}

.container-nav {
   display: flex;
  justify-content: center;
  position: relative; /* To position outline */
  padding: 10px;
  margin: 0 auto;

}

.container-nav > * {
   margin-left: auto;
}
.navbar-outline {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px; /* Rounded outline */
border: 2px solid #071e2a; /* Outline color */
z-index: 0; /* Underneath the navbar items */
    pointer-events: none;
}

/* main style */
.wrap {
--round: 10px;
--p-x: 8px;
--p-y: 4px;
--w-label: 100px;
display: flex;
align-items: center;
padding: var(--p-y) var(--p-x);
position: relative;
background: #071e2a;
border-radius: var(--round);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  top: 0;
  z-index: 1;
    margin: 0;
}


.wrap input {
height: 0;
width: 0;
position: absolute;
overflow: hidden;
display: none;
visibility: hidden;
}

.label {
cursor: pointer;
outline: none;
font-size: 0.8rem;
letter-spacing: initial;
font-weight: bold;
color: #b2e0f7;
background: transparent;
padding: 10px 1px; /* Adjust for smaller text */
width: var(--w-label);
min-width: var(--w-label);
text-decoration: none;
-webkit-user-select: none;
user-select: none;
transition: color 0.25s ease;
outline-offset: -6px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
-webkit-tap-highlight-color: transparent;
}
.label span {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

.wrap input[class*="rd-"]:checked + label {
color: white;
font-weight: bold;
}

.bar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: absolute;
transform-origin: 0 0 0;
height: 100%;
width: var(--w-label);
z-index: 0;
transition: transform 0.5s cubic-bezier(0.33, 0.83, 0.99, 0.98);
}
.bar::before,
.bar::after {
content: "";
position: absolute;
height: 4px;
width: 100%;
background: #427491;
}
.bar::before {
top: 0;
border-radius: 0 0 9999px 9999px;
}
.bar::after {
bottom: 0;
border-radius: 9999px 9999px 0 0;
}

.slidebar {
  position: absolute;
  height: calc(100% - (var(--p-y) * 4));
  width: var(--w-label);
  border-radius: 5px;
  background: #a6c2f0; /* Use the light blue color */
  transform-origin: 0 0 0;
  z-index: 1; /* Place behind the text */
  transition: transform 0.5s cubic-bezier(0.33, 0.83, 0.99, 0.98), opacity 0.5s ease;
  opacity: 0; /* Initially hidden */
   box-shadow: 0 0 10px #a6c2f0; /* glow effect */
}
.wrap input[class*="rd-"]:checked ~ .slidebar {
  opacity: 1; /* Show when selected */
}
.wrap input[class*="rd-"]:checked + label:hover {
    color: white;
}
.rd-1:checked ~ .bar,
.rd-1:checked ~ .slidebar,
.rd-1 + label:hover ~ .slidebar {
transform: translateX(0) scaleX(1);
}
.rd-2:checked ~ .bar,
.rd-2:checked ~ .slidebar,
.rd-2 + label:hover ~ .slidebar {
transform: translateX(100%) scaleX(1);
}
.rd-3:checked ~ .bar,
.rd-3:checked ~ .slidebar,
.rd-3 + label:hover ~ .slidebar {
transform: translateX(200%) scaleX(1);
}
.rd-4:checked ~ .bar,
.rd-4:checked ~ .slidebar,
.rd-4 + label:hover ~ .slidebar {
transform: translateX(300%) scaleX(1);
}
.rd-5:checked ~ .bar,
.rd-5:checked ~ .slidebar,
.rd-5 + label:hover ~ .slidebar {
transform: translateX(400%) scaleX(1);
}
.rd-6:checked ~ .bar,
.rd-6:checked ~ .slidebar,
.rd-6 + label:hover ~ .slidebar {
transform: translateX(500%) scaleX(1);
}
/* Hero Section */
.hero {
  background-color: #071e2a;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.hero-content {
  padding: 40px;
  border-radius: 10px;
}
.hero h1 {
  font-size: 3em;
  margin-bottom: 0.5em;
  text-align: left;
}

.hero h2 {
  font-size: 2.2em;
  margin-bottom: 0.5em;
  color: #b2e0f7;
  text-align: left;
}

.hero p {
  font-size: 1.1em;
}
/*Work Experience*/
.work-experience {
  margin: 0 auto;
   display: flex;
justify-content: center;
  align-items: center;
  flex-direction: column;
      padding: 4em 2em;
}
.work-experience h2 {
font-size: 2.5em;
text-align:center;
margin-bottom: 1.5em;
}
.experience-timeline {
display: flex;
gap: 20px;
  position: relative;

}

.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;

}

.line {
  width: 2px;
  background-color: #427491;
flex-grow: 1;
  margin-top: 20px;

}
.marker {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #071e2a; /* Color of moving circle */
   position: absolute;
      top: 0px; /* Initial position */
      left: 5px; /* Positioned on line */
transition: top 0.5s ease-in-out;
}
.experience-item {
display: flex;
  gap: 20px;
align-items: start;
  margin-bottom: 2em;
    justify-content: center;

}
.experience-details {
      margin-left: 30px;
}
  .notification {
      display: flex;
      flex-direction: column;
      isolation: isolate;
      position: relative;
      width: 18rem;
      height: auto; /* Changed from 8rem */
       padding: 1.25em;
      background: #29292c;
      border-radius: 1rem;
      overflow: hidden;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-size: 16px;
      --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
      --color: #32a6ff
}

  .notification:before {
      position: absolute;
      content: "";
      inset: 0.0625rem;
      border-radius: 0.9375rem;
      background: #18181b;
      z-index: 2
}

  .notification:after {
      position: absolute;
      content: "";
      width: 0.25rem;
      inset: 0.65rem auto 0.65rem 0.5rem;
      border-radius: 0.125rem;
      background: var(--gradient);
      transition: transform 300ms ease;
      z-index: 4;
}

  .notification:hover:after {
      transform: translateX(0.15rem)
}

  .notititle {
      color: #b2e0f7;
      padding: 0 0 0.4rem 0; /* Reduced top padding */
      font-weight: 500;
      font-size: 1.1rem;
      transition: transform 300ms ease;
      z-index: 5;
}
  .notification:hover .notititle {
      transform: translateX(0.15rem)
}

  .notibody {
      color: #99999d;
      transition: transform 300ms ease;
       padding: 0;
      z-index: 5;
  }

  .notification:hover .notibody {
      transform: translateX(0.25rem)
}

  .notiglow,
  .notiborderglow {
      position: absolute;
      width: 20rem;
      height: 20rem;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle closest-side at center, white, transparent);
      opacity: 0;
      transition: opacity 300ms ease;
}

  .notiglow {
      z-index: 3;
}

  .notiborderglow {
      z-index: 1;
}

  .notification:hover .notiglow {
      opacity: 0.1
}

  .notification:hover .notiborderglow {
      opacity: 0.1
}
    .notification .sub-experience {
      margin-top: 10px;
  padding-left: 10px;
     border-left: 2px solid #427491;

  }
 .notification .sub-experience h3 {
    margin-top: 0.5em;
      font-size: 1em;
     margin-bottom: 0.2em;
  }
  .notification .sub-experience p {
      font-size: 0.8em;
  }
/* Projects Section */
.projects {
 padding: 2em;
  margin: 0 auto;

}
.projects h2 {
  font-size: 2.5em;
  text-align:center;
  margin-bottom: 1.5em;
}
.filter-buttons {
  text-align: center;
  margin-bottom: 2em;
      display: flex;
  justify-content: center;
  gap: 10px;
}
.filter-buttons button {
  background-color: #2f6686;
  border: none;
   color: #b0d3e9;
  padding: 0.5em 1em;
  cursor: pointer;
  margin: 0 0.5em;
  transition: all 0.3s;
   border-radius: 20px;

}
.filter-buttons button.active, .filter-buttons button:hover {
background-color: #427491;
 color: black;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
  gap: 2em;
  justify-content: center; /* Center the grid items */
}
.project-grid > .project-card {
  display: block;
}

/* Add these here*/
.view-more-projects {
  text-align: center;
  margin-top: 20px; /* Adds margin above the link */
}

.view-more-projects a {
  background-color: #b2e0f7; /* Light blue background */
  color: black; /* White text */
  padding: 0.75em 1.5em; /* Adjust padding */
  border-radius: 35px; /* Rounded edges */
  text-decoration: none; /* Remove default underline */
  display: inline-block; /* Ensure button styling */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.view-more-projects a:hover {
 text-decoration: underline;
  color: white;
}

.project-card {
position: relative;
   cursor: pointer;

}

.article-wrapper {
width: 100%;
-webkit-transition: 0.15s all ease-in-out;
transition: 0.15s all ease-in-out;
border-radius: 10px;
padding: 5px;
border: 4px solid transparent;
  background-color: white;
}

.article-wrapper:hover {
-webkit-box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
box-shadow: 10px 10px 0 #4e84ff, 20px 20px 0 #4444bd;
border-color: #0578c5;
-webkit-transform: translate(-20px, -20px);
-ms-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}

.article-wrapper:active {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}

.types {
gap: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
place-content: flex-start;
}

.rounded-lg {
/* class tailwind */
border-radius: 10px;
}

.article-wrapper:hover .project-hover {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #a6c2f0;
}

.project-info {
padding-top: 20px;
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}

.project-title {
font-size: 1.2em;
margin: 0;
font-weight: 600;
/* depend de la font */
overflow: hidden;
text-overflow: clip;
white-space: normal;
color: black;
}

.flex-pr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.project-type {
background: #b2b2fd;
color: #1a41cd;
font-weight: bold;
padding: 0.3em 0.7em;
border-radius: 15px;
font-size: 12px;
letter-spacing: -0.6px
}

.project-hover {
border-radius: 50%;
width: 50px;
height: 50px;
padding: 9px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.container-project {
width: 100%;
height: 170px;
background: gray;
}

/*Certificates*/
.certificates {
    padding: 4em 2em;
  margin: 0 auto;
}
.certificates h2 {
  font-size: 2.5em;
  text-align:center;
  margin-bottom: 1.5em;
}
.certificate-container {
display:flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.certificate-item {
  border: 1px solid #427491;
  padding: 1em;
  border-radius: 5px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
}
.certificate-item img {
  max-width: 80%;
  margin-bottom: 10px;
}
.certificate-item h3 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}
.certificate-item a {
  color: #b2e0f7;
  text-decoration: none;
}
.certificate-item a:hover {
  text-decoration: underline;
}
.certificate-item:hover {
  box-shadow: 0 0 10px #427491; /* glow effect */

}

/*Achievements*/
.achievements {
      padding: 1em;
  margin: 0 auto;
    margin-top: 1.5em;
}
.achievements h2 {
font-size: 2.5em;
  text-align:center;
  margin-bottom: 1.5em;
}
.achievement-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 5em;
}
.achievement-item {
  background: #1a3748;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  cursor: pointer; /* Change cursor on hover */
  gap: 20px;
  align-items: center;
}
.achievement-item:hover {
  box-shadow: 0 0 20px #b2e0f7; /* Glow effect */
}
.achievement-item img {
  width: 250px;
  height: auto;
  border-radius: 5px;
}
.achievement-item .achievement-text {
flex: 1;
}
.achievement-item .achievement-text h3 {
  margin-bottom: 0.5em;
}


/*About*/
.about {
  padding: 1em;
  margin: 0 auto;
  margin-top: 1.5em;
}
.about h2 {
  font-size: 2.5em;
  text-align:center;
  margin-bottom: 1em;
}
.about-container {
  display: flex;
  gap: 2em;
  align-items: center;
  justify-content:center;
}
.about-container .profile-image {
  width: 500px;
  height: 500px;
  border-radius: 10px;
  object-fit: cover;

}
.about-text {
  flex: 1;
    display: flex;
flex-direction: column;
  align-items: center;
}
.about-text button {
  margin-top: 1em;
  display: inline-flex;
  margin-left: auto;
  margin-right: auto; /* center the button */
      position: relative; /* relative positioning context */

}

/* Button style */
.group {
  position: relative;
  background-color: #0369a1; /* From original */
  color: #f5f5f5; /* From original */
  border-radius: 0.5em; /* From original */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em; /* Reduced gap for tight layout */
  padding: 0.5em 1.5em;
   transition: background-color 0.5s ease;
     border: none;
    outline: none;
    font-weight: bold;
      justify-content: flex-start;
    padding-left: 0.5em;
    padding-right: 1.5em; /* From original */

}
.group:hover {
  background-color: #0369a1;
  box-shadow: 0 0 10px #a6c2f0
}
.group .border-l-2 {
  border-left: 2px solid white;
    padding-left: 0.5em;
}
.group svg {
    fill: #f5f5f5;

  width: 2em; /* Adjusted size for svg */
  height: 2em;
}
.group .absolute {
  position: absolute;
  top: calc(100% + 0.75em); /* Position below button */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  z-index: 10;
  opacity: 0; /* Start hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
  padding: 0.5em 0.8em;
  background: #0369a1;
      border-radius: 0.5em; /* From original */
  box-shadow: 0 0 8px #1a3748;
      font-size: 0.9em; /* Reduced size for the tooltip */
      font-weight:500;
        white-space: nowrap;
        width: max-content;

}
.group .absolute::before {
   position: absolute;
  content: "";
  width: 0.75em;
    height: 0.75em;
  transform: rotate(45deg);
 top: -0.2em;
 left: calc(50% - 0.375em);
   background:  #0369a1;

}
.group:hover .absolute {
   opacity: 1;
   transform: translate(-50%, 0);

 }

/* Footer */

footer {
display: flex;
   justify-content: center;
align-items: center;
position: relative;
 padding: 1em;
  border-top: 1px solid #77a9c4;
}
.footer-content {
display: flex;
    align-items: center;
    justify-content: space-between;
 width: 90%;
  max-width: 1200px;

}
footer .linkedin {
width: 20px;
  height:20px;
    color: #77a9c4;
}
footer p {
color: #77a9c4;
}
footer a {
color: #77a9c4;
text-decoration: none;
}
footer .footer-outline {
  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
  border-radius: 10px; /* Rounded outline */
  border: 2px solid #071e2a; /* Outline color */
  z-index: 0; /* Underneath the navbar items */
  pointer-events: none;
  }
  .footer-outline {
  position: absolute; /* Change from relative to absolute */
  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 10px;
   border: 2px solid #071e2a;
   z-index: 0;
   pointer-events: none;
  }
  footer .footer-outline {
   width: 100%; /* Span entire width */
    left: 0;
    right: 0;
  }

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
}

.modal-content {
  background-color: white;
  margin: 0.25% auto;
  padding: 20px;
  border-radius: 5px;
  max-width: 600px;
  position: relative;
  max-height: 90vh; /* Set max-height to the screen viewport */
  overflow-y: auto; /* Add vertical scroll bar when it overflows*/
    position: fixed;
  top: 50%; /* Position the content in the middle*/
  left: 50%; /*Position the content in the middle*/
transform: translate(-50%, -50%); /* Center the content */
    animation: fadeIn 0.4s ease; /* Fade In Animation */
}
@keyframes fadeIn {
  from { opacity: 0;}
  to {opacity: 1;}
}
.modal .close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2em;
  cursor: pointer;
  color:#555;
  z-index: 2001; /* Ensure X is above modal content */
}

/* General */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  transition: all 0.3s ease;

}
/* Project Details*/
.project-details h2 {
  font-size: 2em;
}
.project-details p {
  font-size: 1em;
  color:black;
}
.project-details img {
  width: 100%;
  display: block; /*to remove space below image */
  object-fit: cover; /*ensure the aspect ratio */
}
.project-details a {
  display: inline-block;
  background: #333;
  color: white;
  padding: 0.75em 1em;
  text-decoration: none;
  border-radius: 4px;
}
.project-details a:hover {
  background: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
      font-size: 2.5em;
          text-align: center;
  }
   .hero h2 {
         text-align: center;
           font-size: 2em;
  }
  .hero p {
      font-size: 1em;
  }
     .wrap {
    --w-label: 80px;
    }
     .container-nav{
              width: 100%;
    }
       .wrap {
           padding: var(--p-y) 0px;
      }
  nav ul {
      text-align: center;
      padding: 0;
  }
  nav ul li {
      display: block;
      margin: 10px 0;
  }

  .project-grid {
  grid-template-columns: 1fr;
  }
    .achievement-container {
  grid-template-columns: 1fr;
        gap: 1em;
   }
      .achievement-item {
        flex-direction: column;
          text-align: center;
  }
     .about-container {
      flex-direction: column;
         text-align: center;
      align-items: center;
  }
    .about-container .profile-image {
  width: 200px;
  height: 200px;
}
  .experience-timeline {
        flex-direction: column;
  }
    .experience-item {
    margin-bottom: 1em;
        flex-direction: column;
  }
     .experience-details {
       margin-left: 15px;
    }
      .timeline {
      align-items: flex-start;
    }
  .notification {
       width: 100%;
  }
  .footer-content {
          flex-direction: column;
  text-align: center;
}
}
/* For phones */
@media (max-width: 480px) {
  .hero h1{
  font-size: 2em;
     text-align: center;
}
      .hero h2{
      text-align: center;
  font-size: 1.8em;
}
.hero p{
   font-size: 0.9em;
  }
   .about-container .profile-image {
  width: 150px;
  height: 150px;
      }
       .notification{
           width: 95%;
      }
       .view-more-certificates a {
         padding: 0.5em 1em;
      font-size: 0.8em;
}
    .achievement-container {
  gap: 1.5em;
   }
         .project-info .flex-pr{
           display: flex;
             flex-direction: column;
               align-items: center;
         }
}


.fat {
max-width: 60%; /* Scale down relative to the parent container width */
height: auto; /* Maintain aspect ratio */
display: block; /* Prevent inline spacing issues */
margin: 0 auto; /* Center the image */
border-radius: 15px; /* Rounds the edges of the image */
}

table {
  width: 100%; /* Ensure the table takes up the full container width */
  table-layout: fixed; /* Ensures equal-width columns */
  border-collapse: collapse; /* Removes extra
  spacing between cells */
}
  
td, th {
  word-wrap: break-word; /* Forces text to wrap within the cell */
  text-align: left; /* Align text to the left (optional) */
}

.view-more-certificates {
  text-align: center;
  margin-top: 1em; /* Adds margin above the link */
}

.view-more-certificates a {
  background-color: #b2e0f7; /* Light blue background */
  color: black; /* White text */
  padding: 0.75em 1.5em; /* Adjust padding */
  border-radius: 35px; /* Rounded edges */
  text-decoration: none; /* Remove default underline */
  display: inline-block; /* Ensure button styling */
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-top: 10px;
}
.view-more-certificates a:hover {
  text-decoration: underline;
  color: white;
}

.glowimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease;
  padding: 10px; /* Add padding around the image */
}

.glowimg img {
  display: block; /* Removes extra spacing below image */
    transition: box-shadow 0.3s ease; /* Add transition to the img*/
}

.glowimg:hover img {
     box-shadow: 0 0 15px #a6c2f0; /* Glow effect on hover - light blue color*/
}

h4 {
  color:black;
}

.project-cards {
  color:black;
}