body{
    width: 100%;
    justify-content: flex-star !important;
    color: #0A1B2A;
    background-color: #f7f8fa; /* Soft off-white */

}
.hero{
    background-image: url('/img/music/profile.jpg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 90%;
}

#content{
    width: 100%;
    height: 100%;
    color: #0A1B2A;
}

.page-detail{
    padding: 200px 0;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-detail h1 {
    text-align: center;
}

.page-detail p {
    text-align: justify;
    max-width: 600px;
}

/* the section */
  
  .image-container {
    flex: 1;
    padding: 100px 0;
  }
  
  .image-container img {
    max-width: 400px;
    width: 100%;
  }
  
  .text-container {
    flex: 1;
    padding: 20px;
  }
  
  .text-container h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
  }
  
  .text-container p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
  }
  
  /* General Styles */
  
  .creativity-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
  }
  
  /* Image Styles */
  .image-container {
    flex: 1;
    min-width: 300px;
  }
  
  
  /* Text Styles */
  .text-container {
    flex: 1;
    min-width: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .text-container h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
  }
  
  .text-container p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    max-width: 600px;
    width: 100%;
    text-align: center;
  }
  
  /* Responsive Design */
    @media (max-width: 768px) {
      .creativity-section {
        flex-direction: column;
        text-align: center;
      }
    
      .image-container,
      .text-container {
        flex: none;
        width: 100%;
      }
    
      .text-container h1 {
        font-size: 1.5rem;
      }
    
      .text-container p {
        font-size: 0.9rem;
      }
    }
    
    @media (max-width: 480px) {
      .text-container h1 {
        font-size: 1.2rem;
      }
    
      .text-container p {
        font-size: 0.8rem;
      }
    }
    


  /* section artistic items */
  

      /* diamond css */
      .offcanvas-container{
  
      
      }
     
      #item-body{
        display: block;
      }

      .btn-back{
        background-color: transparent;
        border: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        
      }

      .offcanvas-hero{
        width: 100%;
        height: 80%;
        background-color: #0A1B2A;
      }

      .artist-hero{
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .item-body{
        width: 100%;
        padding: 0;
        display: block;
      }
      .off-header{
        position: absolute;
        color: white;

      }
      .off-header i {
        color: #fff;
        font-size: 1.5em;
      }
      .off-header span{
        color: #fff;
      }
      .artist-detail{
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 100px 0;
      }
      .artist-detail p{
        max-width: 600px;
        width: 100%;
        padding: 50px;
        box-sizing: border-box;
        text-align: justify;
      }

      /* social media */
      /* Section Container */
.social-media-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 300px));
  justify-content: center;
  gap: 0px; /* Space between the boxes */
  margin: 20px;
  padding: 20px;
  width:100%;
}

/* Social Box Styling */
.social-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 0px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;


}

/* Hover Effect */
.social-box:hover {
  transform: translateY(-10px);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.social-box i{
  font-size: 2em;
}

.social-box p{
  font-size: 12px;
}


/* Individual Platform Styles */
.facebook {
  background-color: #1877f2; /* Facebook Blue */
}

.instagram {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
}

.twitter {
  background-color: #000; /* Black for X (Twitter) */
}

.youtube {
  background-color: #ff0000; /* YouTube Red */
}

/* Font Awesome Icons */
.social-box i {
  font-size: 2.5rem; /* Icon size */
  margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .social-media-section {
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }
}


.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
}