html{
    scroll-behavior: smooth;
}

body, html {
  overflow-x: hidden;
}

#skills, #audio, #visual, #other {
  scroll-margin-top: 70px; 
}
.work-title-container{
    width:fit-content;
    margin:auto;
    
}

.work-title-container img{
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

#work-scroll {
  display: flex;
  justify-content: center; 
  gap: 40px; 
  padding: 20px 0;
  background-color: #fffaeb; 
}

#work-scroll a {
  text-decoration: none;
  color: #2a3c40; 
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase; 
  padding: 10px 20px;
}

#work-scroll a:hover,
#work-scroll a:focus {
  color: #db6672;

}

#visual,
#audio,
#skills,
#other{}

/*Skills Section*/
.skills_title{
  display: flex;
  width:100%;
  background-color: #2a3c40;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 80px;
  color: #fffaeb;
  font-family: "Manrope", serif;
  font-size: 80px;
  font-weight: 700;
}
.CSV{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #2a3c40;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .CSV_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;
    margin-left: 50px
    }

    .CSV_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }
  
  .CSV_d p {
      margin: 0;
      font-size: 18px;
      line-height: 1.5; 
      font-family: "Manrope", sans-serif;
      color: #fffaeb;
  }

  .CSV img {
    max-width: 560px;
    height: auto; 
    border-radius: 8px; /* rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
}

.bold{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #2a3c40;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .bold_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;}

    .bold_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }
  
  .bold_d p {
      margin: 0;
      font-size: 18px;
      line-height: 1.5; 
      font-family: "Manrope", sans-serif;
      color: #fffaeb;
  }
.bold img{
  height: 400px;
  width:auto;
}


/* Audio Section */
.audio-container{
  display: flex;
  width:100%;
  background-color: #526760;
  padding-bottom: 80px;
  padding-left:50px;
}

.audio_title{
  display: flex;
  width:100%;
  background-color: #526760;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 80px;
  color: #fffaeb;
  font-family: "Manrope", serif;
  font-size: 80px;
  font-weight: 700;
}
.bss{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #2a3c40;
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
  gap: 20px;
 
  }
.bss_d {
  flex: 1; 
  max-width: 60%; 
  color: #fffaeb; 
  font-family: "Hepta Slab", serif;
  padding-left: 50px;
  display: flex;
  flex-direction: column; 
  justify-content: center; 
}

  .bss_d h3 {
    margin-bottom:10px; 
    font-size: 30px;
    color: #fffaeb;
}

.bss_d p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5; 
    font-family: "Manrope", sans-serif;
    color: #fffaeb;
}
.bss-container {
    text-align: center;
    max-width: 300px;
    background: #2a3c40; /*container background */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  
  .bss_cover {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  audio {
    width: 100%;
  }

p {
    color: #021120;
    margin-top: 200px;
}

/* Video Section */

.visual_title{
  display: flex;
  width:100%;
  background-color: #021120;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 80px;
  color: #fffaeb;
  font-family: "Manrope", serif;
  font-size: 80px;
  font-weight: 700;
}

.CUP{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #021120;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .CUP_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;
    padding-right: 40px;
  padding-left:20px;}

    .CUP_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }
  
  .CUP_d p {
      margin: 0;
      font-size: 18px;
      line-height: 1.5; 
      font-family: "Manrope", sans-serif;
      color: #fffaeb;}

.Jack{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #021120;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .Jack_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;
    margin-left: 50px}

    .Jack_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }
  
  .Jack_d p {
      margin: 0;
      font-size: 18px;
      line-height: 1.5; 
      font-family: "Manrope", sans-serif;
      color: #fffaeb;}
.TATB{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #021120;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .TATB_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;
     padding-right: 40px;
     padding-left:20px}

    .TATB_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }

  .TATB_d p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5; 
    font-family: "Manrope", sans-serif;
    color: #fffaeb;}
.SOA{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #021120;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
  }

  .SOA_d {
    flex: 1; 
    max-width: 60%; 
    color: #fffaeb; 
    font-family: "Hepta Slab", serif;
    margin-left: 50px;}

    .SOA_d h3 {
      margin-bottom:10px; 
      font-size: 30px;
      color: #fffaeb;
  }
  .SOA_d p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5; 
    font-family: "Manrope", sans-serif;
    color: #fffaeb;}


/* Other Section */
.other_title{
  display: flex;
  width:100%;
  background-color: #db6672;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  color: #fffaeb;
  font-family: "Manrope", serif;
  font-size: 80px;
  font-weight: 700;}
.TTales{
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  background-color: #db6672;
  align-items: center; 
  padding: 20px; 
  gap: 20px; 
}

.TTales_d {
  flex: 1; 
  max-width: 60%; 
  color: #fffaeb; 
  font-family: "Hepta Slab", serif;}

  .TTales_d h3 {
    margin-bottom:10px; 
    font-size: 30px;
    color: #fffaeb;
}
.TTales_d p{
    margin: 0;
    font-size: 18px;
    line-height: 1.5; 
    font-family: "Manrope", sans-serif;
    color: #fffaeb;}
.Torontales_Cover{
    width: 300px;
    border-radius: 8px; /* rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-left: 50px;
}