/* Portfolio Section */
.projects-section {
    padding: 40px 0;
    text-align: center;
    background-color: #f5faff; 
}

.projects-section h2 {
    font-size: 2.5rem;
    color: #0cceff; 
    margin-bottom: 26px;
}
#portfolio {
    text-align: center;
    padding: 50px 0;
  }
  
  .project-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .project-cards .card {
    position: relative;
    width: 230px;
    height: 300px;
    background: #0cceff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: 0.4s;
    transform: translateY(50px);
  }
  
  .project-cards .card:hover {
    transform: translateY(0);
    box-shadow:
      inset 0 0 60px #0cceff,
      inset 20px 0 80px #007BFF,
      inset -20px 0 80px #020764,
      inset 20px 0 300px #007BFF,
      inset -20px 0 300px #020764,
      0 0 50px #0cceff,
      -10px 0 80px #007BFF,
      10px 0 80px #020764;
  }
  
  .project-cards .card img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    transition: 0.4s;
   
  }
  
  .project-cards .card p {
    font-size: 26px;
    color: black;
    
    transition: 0.5s;
    text-align: center;
  }
  
  .project-cards .card:hover p {
    opacity: 1;
  }
  
  
  

.modal {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5); 
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
  
  .modal-content {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: fit-content;
    padding: 20px;
    background-color: #0cceff;
    border-radius: 10px;
    text-align: center;
    max-height: 500px;
    overflow-y: scroll;
  
  }
  
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #aaa;
    cursor: pointer;
  }
  
  .close-btn:hover,
  .close-btn:focus {
    color: black;
  }
  
  #modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #020764;
  }
  
  #modal-description, 
  #modal-tools, 
  #modal-objective, 
  #modal-about, 
  #modal-process, 
  #modal-details {
    margin-top: 10px;
    color: #020764;
    font-size: 16px;
    line-height: 1.5;
  }
  /* .modal-h3 {
    
    color: #020764
  } */
  
  #project-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  
  #project-link:hover {
    background-color: #0056b3;
  }
   
  .btn {
      --border-color: linear-gradient(-45deg, #0CECED,#020764, #007BFF);
      --border-width: 0.125em;
      --curve-size: 0.5em;
      --blur: 30px;
      --bg: #080312;
      --color: #afffff;
      color: var(--color);
      cursor: pointer;
      
      position: relative;
      isolation: isolate;
      display: inline-grid;
      place-content: center;
      padding: 0.5em 1.5em;
      font-size: 17px;
      border: 0;
      text-transform: uppercase;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
      
      transition: color 250ms;
    }
    .project-btn {
      --border-color: linear-gradient(-45deg, #0CECED,#020764, #007BFF);
      --border-width: 0.125em;
      --curve-size: 0.5em;
      --blur: 30px;
      --bg: #080312;
      --color: #afffff;
      color: var(--color);
      cursor: pointer;
      width: 90%;
      position: relative;
      isolation: isolate;
      display: inline-grid;
      place-content: center;
      padding: 0.5em 1.5em;
      font-size: 17px;
      border: 0;
      text-transform: uppercase;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
      
      transition: color 250ms;
    }
    
    .btn::after,
    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
    }
    
    .btn::before {
      background: var(--border-color);
      background-size: 300% 300%;
      animation: move-bg7234 5s ease infinite;
      z-index: -2;
    }
    
    @keyframes move-bg7234 {
      0% {
        background-position: 31% 0%;
      }
    
      50% {
        background-position: 70% 100%;
      }
    
      100% {
        background-position: 31% 0%;
      }
    }
    
    .btn::after {
      background: var(--bg);
      z-index: -1;
      clip-path: polygon(
        /* Top-left */ var(--border-width)
          calc(var(--curve-size) + var(--border-width) * 0.5),
        calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width),
        /* top-right */ calc(100% - var(--border-width)) var(--border-width),
        calc(100% - var(--border-width))
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
        /* bottom-right 1 */
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
          calc(100% - var(--border-width)),
        /* bottom-right 2 */ var(--border-width) calc(100% - var(--border-width))
      );
      transition: clip-path 500ms;
    }
    
    .btn:where(:hover, :focus)::after {
      clip-path: polygon(
        /* Top-left */ calc(100% - var(--border-width))
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
        calc(100% - var(--border-width)) var(--border-width),
        /* top-right */ calc(100% - var(--border-width)) var(--border-width),
        calc(100% - var(--border-width))
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
        /* bottom-right 1 */
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
          calc(100% - var(--border-width)),
        /* bottom-right 2 */
          calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
          calc(100% - var(--border-width))
      );
      transition: 200ms;
    }
    
    .btn:where(:hover, :focus) {
      color: #fff;
    }
    
      /* tablet view */

    @media (max-width: 1024px) {
        .projects-section {
          padding: 30px 20px;
        }
      
        .projects-section h2 {
          font-size: 2rem;
        }
      
        .project-cards {
          gap: 16px;
          justify-content: center;
        }
      
        .project-cards .card {
          width: 45%;
          height: 280px;
        }
      
        .project-cards .card p {
          font-size: 22px;
        }
      
        .modal-content {
          max-width: 80%;
          padding: 18px;
          font-size: 15px;
        }
      
        #modal-title {
          font-size: 22px;
        }
      
        .project-btn {
          font-size: 15px;
        }
      }

      /* mobile view */
      
       
@media (max-width: 700px) {
    .projects-section {
      padding: 20px 10px;
    }
  
    .projects-section h2 {
      font-size: 1.75rem;
    }
  
    .project-cards {
      flex-direction: row; /* Change to row to allow cards side-by-side */
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px; /* Optional: adjust spacing between cards */
    }
  
    .project-cards .card {
      width: 45%; /* Two cards per row with spacing */
      height: 250px;
      transform: none;
    }
  
    .project-cards .card p {
      font-size: 20px;
    }
    .modal {
        display: none; 
        position: fixed;
         top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.5); 
        width: 100vw;
        height: 100vh; 
        overflow: hidden;
        z-index: 1001;
      }
  
    .modal-content {
      width: 80%;
      max-height: 80vh;
      padding: 15px;
      font-size: 14px;
      margin-right: 50px;
      
    }
    .project-cards .card:hover {
        transform: none;
        box-shadow: none;
      }
    
   
   
  
    #modal-title {
      font-size: 20px;
    }
  
    #modal-description,
    #modal-tools,
    #modal-objective,
    #modal-about,
    #modal-process,
    #modal-details {
      font-size: 14px;
    }
  
    #project-link {
      font-size: 14px;
      padding: 8px 16px;
    }
  
    .project-btn {
      font-size: 14px;
      padding: 0.5em 1em;
    }

  }