@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  color: white;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  z-index: 100;
}

.logo {
  font-size: 3rem;
  color: #4ba1b7;
  font-weight: 800;
  cursor: pointer;
  transition: 0.5s ease;
}

.logo:hover {
  transform: scale(1.1);
}

nav a {
  font-size: 1.8rem;
  color: #4ba1b7;
  margin-left: 4rem;
  font-weight: 500;
  transition: 0.3s ease;
  border-bottom: 3px solid transparent;
}

nav a:hover,
nav a.active {
  color: #4ba1b7;
  border-bottom: 3px solid #4ba1b7;
}

section {
  min-height: 100vh;
  padding: 8rem 9% 5rem;
}

.home {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8rem;
  background-color: black;
  padding-left: 5rem;
}

.home-img img {
  width: 35vw;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: none;
  background: transparent;
}


.home-img img:hover {
  transform: scale(1.05);
}

.home-content h1 {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.3;
}

.home-content h3 {
  font-size: 4rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

span {
  color: #4ba1b7;
}
#typed-text {
  color: white !important;
}


.home-content p {
  font-size: 1.8rem;
  max-width: 60rem;
}

.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: 2px solid  #4ba1b7;
  color: #4ba1b7;
  font-size: 2rem;
  border-radius: 50%;
  margin: 3rem 1.5rem 3rem 0;
  transition: 0.3s ease;
}

.social-icons a:hover {
  background-color: #4ba1b7;
  color: black;
  transform: scale(1.3) translateY(-5px);
  box-shadow: 0 0 25px #4ba1b7;
}

.btn {
  display: inline-block;
  padding: 1rem 2.8rem;
  background-color: black;
  border-radius: 4rem;
  font-size: 1.6rem;
  color: #4ba1b7;
  letter-spacing:w0.3rem;
  font-weight: 600;
  border: 2px solid #4ba1b7;
  transition: 0.3s ease;
  cursor: pointer;
}

.btn:hover {
  background-color: #4ba1b7;
  color: black;
  box-shadow: 0 0 25px  #4ba1b7;
}

.typing-text {
  font-size: 3.4rem;
  font-weight: 600;
  margin: 1rem 0;
}
.skills-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2.5rem;
  justify-content: center;
  margin-top: 3rem;
}

.skill-card,
.info-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  border-radius: 1.5rem;
  text-align: center;
  backdrop-filter: blur(10px);
  color: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skill-card:hover,
.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px #4ba1b7;
}

.skill-card i,
.info-card i {
  font-size: 4.5rem;
  color: #4ba1b7;
  margin-bottom: 1rem;
}

.skill-card p,
.info-card p {
  font-size: 1.9rem;
  margin-top: 0.5rem;
}

.info-card h3 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color:  #4ba1b7;
}

.info-card span {
  font-size: 1.6rem;
  color: #ccc;
}

footer {
  text-align: center;
  font-size: 1.4rem;
  padding: 2rem 0;
  color: #888;
}

@media (max-width: 995px) {
  nav {
    display: none;
  }

  nav.active {
    display: block;
  }

  .home {
    flex-direction: column;
    gap: 4rem;
  }

  .home-img img {
    width: 40vw;
  }

  .home-content h1 {
    font-size: 4.5rem;
  }

  .home-content h3 {
    font-size: 2.5rem;
  }
}

.projects {
  padding: 8rem 9% 5rem;
  background-color: black;
  border-left: 5px solid  #4ba1b7; /* إضافة الشريط الأخضر الجانبي */
}

.projects h2 {
  font-size: 4.4rem;
  text-align: center;
  color: white; /* نفس اللون الأخضر */
}

.project-card {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 4rem;
  margin: 3rem 0;
  max-width: 600px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  border-left: 5px solid transparent; /* إضافة حدود شفافة لبطاقة المشروع */
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  border-left: 5px solid #4ba1b7; /* التأثير الأخضر عند التمرير */
}

.project-card h3 {
  font-size: 3.5rem;
  color: white;
}

.project-card p {
  font-size: 2.2rem;
  color: white;
  margin: 1rem 0;
}

.project-card .btn {
  background-color:  #4ba1b7; /* نفس اللون الأخضر */
  color: white;
  padding: 1rem 2.8rem;
  border-radius: 4rem;
  font-size: 1.6rem;
  letter-spacing: 0.3rem;
  font-weight: 600;
  border: 2px solid  #4ba1b7;
  transition: 0.3s ease;
  text-decoration: none;
}

.project-card .btn:hover {
  background-color: white;
  color:  #4ba1b7;
  box-shadow: 0 0 25px #4ba1b7;
}

.about {
  min-height: 100vh;
  padding: 8rem 9% 5rem;
}

.about h2 {
  font-size: 4.4rem;
  text-align: center;
  margin-bottom: 3rem;
  color: white; /* أخضر */
}

.about .info-card p {
  font-size: 2rem;
  line-height: 1.8;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
  /* WhatsApp */
  .contact .fa-whatsapp {
    color: #13fb36;
    border: 2px solid  #13fb36;
  }
  .contact .fa-whatsapp:hover {
    background-color:  #13fb36;
    color: white;
    transform: scale(1.2);
  }
  
  /* Gmail */
  .contact .fa-envelope {
    color: #D44638;
    border: 2px solid #D44638;
  }
  .contact .fa-envelope:hover {
    background-color: #D44638;
    color: white;
    transform: scale(1.2);
  }
  
  /* LinkedIn */
  .contact .fa-linkedin {
    color: #0077B5;
    border: 2px solid #0077B5;
  }
  .contact .fa-linkedin:hover {
    background-color: #0077B5;
    color: white;
    transform: scale(1.2);
  }
  
  .social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5rem; /* حجم الأيقونة */
    height: 5rem; /* حجم الأيقونة */
    background: transparent;
    border: 2px solid #4ba1b7; /* اللون الأخضر للحدود */
    color:  #4ba1b7; /* اللون الأخضر للرمز */
    font-size: 2.5rem; /* حجم الرمز */
    border-radius: 50%;
    margin: 1rem;
    transition: 0.3s ease;
  }
  
  .social-icons a:hover {
    background-color: #4ba1b7; /* الخلفية تصبح خضراء عند المرور */
    color: black; /* اللون الأسود للنص عند المرور */
    transform: scale(1.3); /* تكبير الأيقونة */
  }
  /* تعديل اللون الخاص بـ skills */
  
.skill-card {
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
  }
  
  .skill-card .fa {
    font-size: 30px;
    margin-bottom: 10px;
  }
  
  .skill-card .fa-network-wired {
    color: #0073b1; /* LinkedIn - réseaux */
  }
  
  .skill-card .fa-tools {
    color: #f05032; /* Maintenance informatique */
  }
  
  .skill-card .fa-linux {
    color: #000000; /* Linux */
  }
  
  .skill-card .fa-windows {
    color: #0078D7; /* Windows */
  }
  
  .skill-card .fa-database {
    color: #00ADEF; /* Database */
  }
  
  .skill-card .fa-users-cog {
    color: #0044cc; /* Active Directory */
  }
  
  .skill-card .fa-cloud {
    color: #92b8c9; /* Virtualisation */
  }
  
  .skill-card .fa-microsoft {
    color: #0061F2; /* Office 365 */
  }
  
  .skill-card .fa-css3-alt {
    color: #1572B6; /* CSS3 */
  }
  
  .skill-card .fa-html5 {
    color: #E34F26; /* HTML5 */
  }
  
  .skill-card .fa-terminal {
    color: #A50000; /* Ansible */
  }
  
  .skill-card .fa-server {
    color: #607078; /* VMware */
  }
  
  .skill-card .fa-box {
    color: #183A61; /* VirtualBox */
  }
  
  .skill-card .fa-linux {
    color: #262577; /* CentOS */
  }
  
  .skill-card .fa-network-wired {
    color: #1BA0D7; /* Cisco */
  }
  #particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: black;
  }
  .buttons {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .btn.outline {
    background-color: transparent;
    color: #4ba1b7;
    border: 2px solid #4ba1b7;
    transition: 0.3s ease;
  }
  
  .btn.outline:hover {
    background-color: #4ba1b7;
    color: black;
  }
  
  .home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5rem;
    padding: 10rem 5rem;
    background: linear-gradient(to right, #000000, #0f1c26);
    border-radius: 20px;
  }
  
  .home-content {
    flex: 1;
  }
  
  .home-content h1 {
    font-size: 6rem;
  }
  
  .home-content h3 {
    font-size: 3.5rem;
    color: #4ba1b7;
  }
  
  .home-content p {
    font-size: 1.8rem;
    margin-top: 1.5rem;
    max-width: 600px;
  }
  
  .home-img img {
    width: 35vw;
    border-radius: 50%;
    box-shadow: 0 0 50px #4ba1b7;
    transition: transform 0.3s ease;
  }
  #certifications {
    padding: 50px 20px;
    background:rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .cert-card {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  
  .cert-card img {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
  }
  
  .cert-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .cert-card p {
    font-size: 14px;
    color: #555;
  }
  .skills h2,
.services h2,
.certifications h2,
.projects h2,
.contact h2,
.about h2 {
  font-size: 4.4rem;
  text-align: center;
  color: white;
}
.projects .cards-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin-top: 3rem;
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    justify-content: center;
    margin-top: 4rem;
  }
  
  .project-box {
    min-height: 280px;
    padding: 3rem;
    font-size: 1.8rem;
  }
  .project-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
    background-color: #111;
  }
  
  .project-box {
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .project-text {
    padding: 2rem;
  }
  .certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    justify-content: center;
    margin-top: 3rem;
  }
  
  .cert-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 1rem 1rem 0 0;
    background-color: #111;
    padding: 1rem;
  }
  
  .cert-box {
    padding: 0;
    overflow: hidden;
  }
  
  .cert-text {
    padding: 2rem;
    text-align: center;
  }
  
  .verified-badge {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 1rem;
    font-size: 1.4rem;
    color: #00cc66;
    border: 1px solid #00cc66;
    border-radius: 2rem;
    background-color: rgba(0, 204, 102, 0.1);
    font-weight: bold;
  }
  .full-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
  }
  #services .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
  }
  .contact-new {
    min-height: 100vh;
    padding: 8rem 9% 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #000000, #0f1c26);
    color: white;
  }
  
  .contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    max-width: 700px;
    width: 100%;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 25px rgba(75, 161, 183, 0.2);
  }
  
  .contact-form h2 {
    font-size: 3.5rem;
    color: #4ba1b7;
    text-align: center;
  }
  
  .contact-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
  }
  
  .contact-buttons a {
    font-size: 2.8rem;
    transition: transform 0.3s ease;
  }
  
  .contact-buttons a:hover {
    transform: scale(1.3);
  }
  
  .contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }
  
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.6rem;
    border-radius: 10px;
    resize: none;
  }
  
  .contact-form .btn {
    align-self: center;
    background-color: transparent;
    color: #4ba1b7;
    border: 2px solid #4ba1b7;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    font-size: 1.6rem;
    font-weight: bold;
    transition: 0.3s ease;
    cursor: pointer;
  }
  
  .contact-form .btn:hover {
    background-color: #4ba1b7;
    color: black;
    box-shadow: 0 0 15px #4ba1b7;
  }
  
  /* Icon Colors */
  .contact-buttons .fa-linkedin {
    color: #0077B5;
  }
  .contact-buttons .fa-github {
    color: #333;
  }
  .contact-buttons .fa-envelope {
    color: #D44638;
  }
  .contact-buttons .fa-whatsapp {
    color: #25D366;
  }
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f1c26;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.5s ease;
  }
  
  .spinner-frame {
    position: relative;
    width: 120px;
    height: 120px;
  }
  
  .spinner-frame img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: 2px solid #4ba1b7;
  }
  
  .spinner-frame .ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 4px solid transparent;
    border-top: 4px solid #4ba1b7;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    z-index: 1;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  
  

  /* CORE LAYOUT  */
.site-header{
  /* let Flexbox do the alignment */
  display:flex;
  justify-content:space-between;   /* logo left - nav right */
  align-items:center;              /* vertical centering */
  
  /* optional cosmetics */
  padding:0.75rem 1.5rem;
  max-width:1200px;                /* keeps it nicely centred */
  margin-inline:auto;   
  background: transparent;           /* centre whole header in page */

  /* make sure it scrolls away with the page */
  position:static;                 /* default value – just here as a reminder */
}

/* LOGO tweaks (optional) */
.logo{
  font-weight:700;
  text-decoration:none;
}

/* NAV LINKS  */
.main-nav a{
  text-decoration:none;
  font-weight:500;
  display:inline-block;            /* ensures they stay in one line */
}

/* highlight the current page */