#sec-1 {
    clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 30px),
    90% 100%,
    80% calc(100% - 30px),
    70% 100%,
    60% calc(100% - 30px),
    50% 100%,
    40% calc(100% - 30px),
    30% 100%,
    20% calc(100% - 30px),
    10% 100%,
    0 calc(100% - 30px)
  );
    
}

.bg {
    background-color: #f8f9fa;
}

.navbar-brand {
    padding-left: 5%;
}

#navbarNavAltMarkup {
    padding-right: 5%;
}

.navbar-nav .nav-link:not(:first-child) {
    margin-left: 1.5rem; 
  }

body {
    font-family: 'Times New Roman', Times, serif;
  }

#my-pic {
    padding-top: 20px;
    
}

#des-abt-me {
    padding-top: 20px;
}

#top-btn {
    display: flex; gap: 70px;
    justify-content: center;
    padding-top: 40px;
}

#social-btn {
    display: flex; gap: 20px;
    justify-content: center;
    flex-wrap: nowrap;
    padding-top: 50px;
    padding-bottom: 100px;
}

.fa-brands {
    font-size: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fa-brands:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#abt-me {
    display: flex; gap: 70px;
    justify-content: center;
    padding-top: 20px;
    

}

#education {
    display: flex; gap: 110px;
    justify-content: center;
    padding-top: 5%;
}

.skills-section {
    overflow: hidden;
    width: 100%;
    padding-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .skills-row {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 30px; /* space between groups */
  }
  
  .marquee-content {
    display: inline-flex;
    gap: 120px; /* spacing between skills */
    min-width: 300%; /* because we have 3 copies */
    animation: marquee-left 30s linear infinite;
  }
  
  @keyframes marquee-left {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-33.333%, 0, 0); } /* move by 1/3 */
  }
  
  /* Alternate direction rows */
  .skills-row:nth-child(even) .marquee-content {
    animation: marquee-right 32s linear infinite;
  }
  
  @keyframes marquee-right {
    0%   { transform: translate3d(-33.333%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  
  
  

#project {
    padding-top: 100px;
}

#projectList {
    height: 100%;
}

.project-card img {
    height: 400px; 
    object-fit: fill;
    border-radius: 8px; 
}

#contact {
    justify-content: center;
    background-color: #e9ecef;
    clip-path: polygon(
        0 30px,
        10% 0,
        20% 30px,
        30% 0,
        40% 30px,
        50% 0,
        60% 30px,
        70% 0,
        80% 30px,
        90% 0,
        100% 30px,
        100% 100%,
        0 100%
    );
}

@media (max-width: 767.98px) {
    #education h1 {
        padding-top: 50px;
    }
}

.card-edu {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
}

.card-edu:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.github-link {
    color: gray;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }
  .github-link:hover {
    color: black; /* darker on hover */
    text-decoration: underline;
  }

.project-card  {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .project-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); 
  }