/* projce.project-container Section Begins */

.project-section {
    padding-top: 1.6rem;
    height: calc(100vh-2rem);
    width: calc(100vw - 4rem);
    transition: all 350ms ease;
    /* padding: ; */
  }
  
  .project-section h1 {
    /* text-align: center; */
    margin-bottom: 2rem;
    color: var(--sec-text-color);
  }
  
  /* .project-section .project2{
      border: 1px solid var(--sec-text-color);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      /* margin-top: 2rem; */
  
  /* } */
  .project-section .project-container .project img {
    height: 25rem;
    width: 25rem;
    /* grid-row: 1/ span 3; */
  
    border-radius: 1rem;
  }
  /* .project-section #project1 img{
      height:380px;
      width: 480px;
  }
  .project-section #project3 img{
      height:550px;
      width: 480px;
  } */
  .project-container h2 {
    color: rgb(185, 192, 228);
  }
  
  .project-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  
    grid-template-rows: repeat(5, 1fr);
    /* grid-template-areas:
     "project1 project1 project2 project2 project2"; */
    gap: 2rem;
    margin-top: 2rem;
    /* border: 1px solid red; */
  }
  
  .project-container .project {
    width: calc(100vw-4rem);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.7rem;
    cursor: pointer;
    /* text-align: center; */
    /* background-color: #f5f5f5; Light gray background for visibility */
    /* background-color: rgb(28, 37, 92); */
    background-color: rgb(16, 24, 75);
    /* border: 1px solid #ccc;  */
    border-radius: 1rem;
    padding: 1rem 1.6rem;
    transition: transform 300ms ease-in-out;

  }
  .project-container .project  a{
    color: white;
  }
  .project-container .project:hover {
    /* transform: scale(102); */
    scale: 102%; 
  /* transition: all 50ms ease; */

  }
  .project img {
    border-radius: 3rem;
    /* padding: 1.6rem; */
  }
  /* Specific project positioning */
  #project1 {
    grid-column: 1/3; /* Occupies the first column */
    grid-row: 1/3; /* First row */
    /* box-shadow: 0 40px 80px rgba(255, 255, 255, 0.1); Subtle shadow for depth */
  }
  #project1 img {
    height: 320px;
    width: 100%;
  }
  .site-btn {
    padding: 0.6rem 1rem;
    letter-spacing: 1px;
    font-weight: 600;
    background-color: rgb(40, 42, 173);
    /* background-color: rgb(66, 69, 223); */
  
    border: none;
    color: white;
    border-radius: 0.7rem;
    cursor: pointer;
  }
   .site-btn:hover {
    color: rgb(40, 42, 173);
    border: none;
    background-color: white;
  }
  #project2 {
    grid-column: 3/6;
    grid-row: 1/4;
  }
  
  #project2 img {
    width: 100%;
    height: calc(100vh - 8rem);
    /* height: auto; */
  }
  #project3 {
    grid-column: 1/3;
    grid-row: 3/6;
  }
  #project3 img {
    height: 570px;
    /* width: 430px; */
    width: 100%;
  }
  
  #project4 {
    grid-column: 3/6; /* Occupies the second column */
    grid-row: 4/6; /* Second row */
  }
  #project4 img {
    /* width: calc(100vw - 43rem); */
    width: 100%;
    height: 20rem;
  }
  /* #project5{
        width: calc(100vw -6rem);
      
    } */
  /* #project5 img{
    } */