/* -------------------------------------ALL WEBSITE-------------------------------------- */
* {
  --lapis-lazuli: #22577aff;
  --verdigris: #38a3a5ff;
  --emerald: #57cc99ff;
  --light-green: #80ed99;
  --tea-green: #c7f9ccff;
  --space-cadet: #2b2d42ff;
  --cool-gray: #8d99aeff;
  --antiflash-white: #edf2f4;
  --red-pantone: #ef233cff;
  --fire-engine-red: #d90429ff;
  --rich-black: rgb(21,21,30);
  --oxford-blue: #001d3dff;
  --yale-blue: #003566ff;
  --mikado-yellow: #ffc300ff;
  --gold: #ffd60aff;
  --navback: rgba(255, 255, 255, 0.11);
  background-color: var(--rich-black);
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif, s;
  font-weight: 400;
  font-style: normal;


  overflow-x: hidden;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background:var(--cool-gray); 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--cool-gray); 
  }
  
  /* ------------------------------------------------------------- */

  overflow-x: hidden;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background:var(--cool-gray); 
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--cool-gray); 
  }
}
  
  /* ------------------------------------------------------------- */
.links{
  color: rgb(255, 255, 255);
  text-decoration: none;
  background: none;
}
.links:visited{ 
  color: rgb(255, 255, 255);
  text-decoration: none;
  background: none;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 700px) {
  #navlogo {
    display: none;
  }
}
p {
  color: var(--antiflash-white);
  margin: auto;
  width: 80vw;
  text-align: center;
}
.p {
  font-size: 1em;
  font-weight: 400;
  background: none;
}
  /* ---------------------------------------------------------------------------------------- */
  /*--------------------------------- NAVIGATION BAR----------------------------------------- */
  header {
    display: grid;
    margin-top: 10px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  #navlogo {
    height: 30px;
    grid-column: 1;
    background: none;
    filter: invert() drop-shadow(0px 0px 3px rgb(255, 255, 255));
  }
  
  nav {
    margin: auto;
    width: 350px;
    height: 35px;
    background-color: var(--navback);
    border-radius: 40px;
    color: var(--antiflash-white);
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div .navbutton {
    width: 70px;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
  }
  div .navbutton:hover {
    width: 70px;
    background-color: var(--navback);
    font-size: 101%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
  }
  
  .navlink {
    padding: 5px;
    text-decoration: none;
    background: none;
    color: var(--antiflash-white);
  }
  /* ---------------------------------------------------------------------------------------- */
  /* ---------------------------------------HEADINGS---------------------------------------- */
  h1{
    background:none;
    display: flex;
    justify-content:flex-start; 
    margin:20px 0px ;
     padding: 40px ;
    color: var(--antiflash-white);
  }
  /* ---------------------------------------------------------------------------------------- */
/* ----------------------------------RIGHTS------------------------------------------------------ */
.Rights{
  background-color: #000000;
  color:white;
  padding:2em;
  width: 100vw;
  position:relative;
  bottom: 0%;
}
/* ---------------------------------------------------------------------------------------- */
/* General Reset and Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #0f0f0f;
  color: #f5f5f5;
  line-height: 1.8;
}

/* Page Titles */
h1 {
  font-size: 3.2em;
  text-align: center;
  margin: 1em 0;
  color: #fff;
  letter-spacing: 3px;
}

/* Sections Styling */
section {
  margin: 2em auto;
  padding: 3em 5%;
  max-width: 1200px;
}

/* Skills, Projects, and Blogs Section */
.skills-section, .projects-section, .blogs-section {
  background-color: #181818;
  padding: 2.5em;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Modern shadow */
}

/* Item Containers */
.skills-container, .projects-container, .blogs-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1.5em;
}

.skill-item, .project-item, .blog-item {
  background-color: #222;
  padding: 1.5em;
  margin: 1em 0.5em;
  border-radius: 10px;
  width: 31%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Card shadow */
  overflow: hidden;
}

.skill-item:hover, .project-item:hover, .blog-item:hover {
  transform: translateY(-10px); /* Lifting effect on hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

h2 {
  font-size: 2em;
  margin-bottom: 0.5em;
  color: #00c8ff;
}

p {
  margin: 1em 0;
  font-size: 1.2em;
  color: #d3d3d3;
}



/* Responsive Design */
@media (max-width: 768px) {
  .skills-container, .projects-container, .blogs-container {
      flex-direction: column;
      align-items: center;
  }

  .skill-item, .project-item, .blog-item {
      width: 85%;
      margin-bottom: 2em;
  }
}