html{
    scroll-behavior: smooth;
}
.detail{
    background-image:url(../bg/hd6.jpg);
    background-repeat: no-repeat;
    background-position:cover;
    background-attachment: fixed;
    animation: slide 20s linear infinite;

}
@keyframes slide{ 
    0%{background-size:100%}
    100%{background-size:130%}}
.section-nav{
    position: fixed;
    left:50%;
    transform:translatex(-50%);
    z-index:1000;
    display: flex;
    justify-content: center;
    gap: 9%;
} 
.section-nav a{
  color:rgb(0, 0, 0);
    text-decoration:none;
    font-weight: bold;
    padding: 1%;
    font-size: 25px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgb(233, 242, 245);
}

.section-nav a:active{
    transform: scale(0.80);
    background-color: #fbfdfd;
    box-shadow: #fbfdfd;
}
section h1{
    display:flex;
    justify-content:center;
    font-size: 25px;
    padding-top:8%;
    color:rgb(215, 228, 231);
    text-decoration:underline;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
#project-container{
    flex-wrap:wrap;
    gap:30px;
    display: flex;
    justify-content:center;
    text-wrap: wrap;
    overflow:hidden;
 }
.project-card{
    height:18%;
    width: 45%;
    box-sizing:border-box ;
    text-align:center;
    border:8px solid  #0dc6f5 ;
    border-radius:10px;
    background-color: #033f4e;
    flex-wrap: wrap;
    justify-content: center;
}
.project-card h2{
    color: #eee7e8;
    justify-content: center;
    font-size: 25px;
    text-align: center;
    word-wrap:break-word;
    font-family: 'Times New Roman', Times, serif;

}
.project-card img{
    box-shadow: 0 0 20px rgb(240, 238, 238);
    height:200px;
    width:350px;
    object-fit:cover;
    text-align: center;
    justify-content:center;
}
.project-card img:active{
    transform: scale(0.80);
}
.project-card p{
    text-overflow: ellipsis;
    word-wrap: break-word;
    padding: 20px;
    color: #eaf1f5;
    font-size: 22px;
    text-align: center;
    justify-content: center;
    font-family:'Segoe UI';
}
 .button{
    display: block;
    width: fit-content;
    margin: 0 auto;
    color:rgb(25, 240, 229);
    background-color:#fafbff;
    box-shadow:0 0 2px #3de9f5;
    font-size: 23px;
    border-radius: 20px;
    padding: 9px 9%;
    text-decoration: none;
}
.button:hover{
    background-color: #00bcdd;
    color: #0e0000;
    box-shadow: 0 0 20px rgb(240, 238, 238);
    transform: scale(0.80);
} 
 
#back {
    position: fixed;
    bottom:1px;
    text-decoration: none;
    left:47%; 
    font-size: 18px;
    background-color: #fafbff;
    border-radius: 10px;
    padding-left:2%;
    padding-right:2%;
    color: rgb(134, 6, 146);
}
#back:hover{
    background-color: #068f28;
    color: #0e0000;
    box-shadow: 0 0 20px rgb(240, 238, 238);
    transform: scale(0.80);
}
 
@media (max-width: 768px) { 
  html{
    scroll-behavior: smooth;
}
.detail{
    background-image:url(../bg/hd6.jpg);
    width:100%;
    height:auto;
    background-repeat: no-repeat;
    background-position:cover;
    background-attachment: fixed;
    animation: slide 20s linear infinite;

}
@keyframes slide{ 
    0%{background-size:100%}
    100%{background-size:130%}}
    .section-nav { 
      flex-direction: column; 
      display: flex;
      text-align: center;
      gap: 10px; 
      top: 0; 
      background-color: rgba(255,255,255,0.9); 
      width: 100%; 
      padding: 10px 0; 
    } 
   
    .section-nav a { 
      font-size: 20px; 
      padding: 5px; 
    } 
   
    section h1 {
        margin-top:20%;
      font-size: 20px; 
      padding-top: 25%; 
    } 
   
    #project-container { 
      flex-direction: column; 
      align-items: center; 
    } 
   
    .project-card { 
      width: 90%; 
      margin-bottom: 20px; 
    } 
   
    .project-card img { 
      width: 100%; 
      height: auto; 
    } 
    .project-card h2{
      font-size: 20px;
      font-family: 'Times New Roman', Times, serif;
    }
   
    .project-card p { 
      font-size: 18px; 
      padding: 10px; 
    } 
   
    .button { 
      font-size: 18px; 
      padding: 5px 20px; 
    } 
   
    #back { 
      font-size: 18px; 
      left: 45%; 
    } 
  }