#releases h2{
        font-size: calc(1.375rem + 1.5vw)!important;
    }
    
     #artists h2{
        font-size: calc(1.375rem + 1.5vw)!important;
    }
    
    
      #finds h2{                                          /* default fonts */ 
     font-size: calc(1.375rem + 1.5vw)!important;
    }    
    
 #career h2{
     font-size: calc(1.375rem + 1.5vw)!important;
}

#artists  .artist-box  {                          /* default artist section heading*/ 
   
    font-size: calc(1.3rem + 0.6vw) !important;
 
}

#contact h2 {
   
    font-size: calc(1.375rem + 1.5vw)!important;
    
}

#finds .artist-box h3 {
    font-size: calc(1.3rem + 0.6vw)!important;
  
    
}

#about h2{
   
     font-size: calc(1.375rem + 1.5vw)!important;
     
}

.record{
  
            font-size: calc(1.375rem + 1.5vw)!important;
    }

.flip{
        
            font-size: calc(1.375rem + 1.5vw)!important;
    }
    
.hero-subtitle {
    font-size: clamp(0.9rem, 3vh, 1.2rem)!important;

}

.nav-links{
    font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
    
}
.subtitle {
            
            font-size: clamp(0.7rem, 1.5vh, 0.9rem)!important;
        }
        


  #artists .artistdesc{
        
   font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
        
}


#career .para2{
 
   font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
   
}

#about .paraf{
  
   font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
    
}


#finds .p2{
  
    font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
     
}

 
.releasedesc{
    
    font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
      
}

             
  #artists  .card {                                                      /* artist card headings */ 
    font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;
    
}
h2:hover {
  pointer-events: none; }


#artists .card-content p{
    font-size: clamp(0.8rem, 1vw, 0.25rem); /* Smaller scaling factor */
             /* artist card content */ 
}


.nav-links a, p{
    font-size: calc(0.85rem + 0.25vw)!important; /* Smaller scaling factor */
  max-font-size: 0.95rem!important;      
}

.card-content h3{
    
   font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6;                /* career card, release card heading */ 
    
}
  
  
    
   
    
    
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     @media (min-width: 899px) { 
    #career .card, .card-content h {
  
}

  
}
 
    dropdown-toggle p{
   text-decoration: none;
        display: block;
        width: 100%;
  }
     .hero-change {
    font-family: var(--font--heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important; 
    text-shadow: 
        0 0 2px var(--color--primary), 
        0 0 7px var(--color--primary), 
        0 0 11px rgba(0, 0, 0, 0.7); 
    color: var(--color--primary) !important;
}
    * {
  -webkit-tap-highlight-color: transparent;
}
    
    
   
  
    :root {
    --accent-color:  var(--color--primary)!important;
        
    }
  
    
    
@media (max-width: 768px) {
 

li::after{
    display: none!important;
}

.nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style: none;
        padding: 0;
        
    }



    .nav-links a {
        text-decoration: none;
        display: block;
        width: 100%;
        
    
    }
    .nav-links p {
        text-decoration: none;
        display: block;
        width: 100%;
        
    
    }

    @media (prefers-color-scheme: light) {
   
    
     .dropdown-menu {
    background: #ffffff;
    
}
.nav-links{
    background-color: #e7e7e7!important;
    
}

}




@media (prefers-color-scheme: dark) {
    .dropdown-menu {
        background-color:#0d0d0d !important;
        
       
    }
    .nav-links{
        background: #121212!important;
    }
}

    .dropdown-menu {
    display: none;
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    list-style: none;
    width: auto; /* Adjust width based on content */
    max-height: auto; /* Allows dynamic height */
    font-weight: lighter!important;
    margin-top:3px!important;
    
}

    

    .dropdown.active .dropdown-menu {
        display: block;
    }

    

    .dropdown-menu a:hover {
        background: var(--color--primary)!important;
        border-radius: 20px;
        width:110%;
        margin-right:5px;
        margin-left:5px;
        color: #000000!important;
    }
    @media (prefers-color-scheme: light) {
        .dropdown-menu a:hover {
       
        
        color: #f1f1f1!important;
       
    }
        
    }
    @media (prefers-color-scheme: dark) {
        .dropdown-menu a:hover {
       
        
        color: #000000!important;
        
    }
        
    }
    
    
    
}




@media (min-width: 768px) {
    
   /* Base dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position:absolute;
   background-color: orange;
    border-radius: 20px;
    padding: 10px;
    list-style: none;
   padding-top:15px;
   margin-top:2px;
   
   
}

.navbar a{
    font-family: Sans-Serif!important;
    font-weight: lighter!important;
    
    
}
.navbar p{
    font-family: Sans-Serif!important;
    font-weight: lighter!important;
    
    
}
@media (prefers-color-scheme: light) {
  .navbar p{
    color: var(--secondary-color);
    
    
}

}
.navbar p:hover {
     color:var(--color--primary)!important; /* Optional: Change text color for better contrast */
}
.dropdown-menu li,
.dropdown-menu li a {
   
    width:130px;
    height:5vh;
    
    
}


.dropdown-menu li:hover,
  .dropdown-menu li a:hover
{
    
    color:var(--color--primary)!important; /* Optional: Change text color for better contrast */
}




@media (prefers-color-scheme: dark) {
  .dropdown-menu {
    
   background-color: #242424;
   border: 1.5px solid #1f1f1f;
   
    
}





}
@media (prefers-color-scheme: light) {
  .dropdown-menu {
    
   background-color: #f8fafc;
    
}
}

li::after{
    display: none!important;
}


/* Show dropdown when active (for mobile) */
.dropdown.active .dropdown-menu {
    display: block;
}
}

/* ✅ Desktop Support: Show dropdown on hover */
@media (min-width: 768px) {
    
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    
}
















    
  @media screen and (min-width: 700px) and (max-width: 1024px) {
    .nav-links {
       
       
    }
  }
    @media screen and (min-width: 700px) and (max-width: 845px) {
    .nav-links {
       
       
       
    }
    .logo{
        
    }
    
}
@media (min-width: 768px) and (max-width: 1024px) {   /* for tablets */
    
        .card {
   
    
}
#artists .card-content h3{
    text-align: left;
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
}
#artists .card-content p{
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
#career .card-content h3{
    
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
}
.card {
    border: none!important;
}
    
    #artists .artistdesc{
        padding-left:15px;
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
     padding-left:15px;
        
    }
    .subtitle {
            color: var(--color--primary);
         
            text-transform: uppercase;
            text-align: left;
     padding-left:15px;
        }
    
    .record{
        font-family: var(--font--heading);
            font-weight: lighter;
            text-transform: uppercase ; 
           
    }
    .flip{
        font-family: var(--font--heading);
            font-weight: 700 !important;
            text-transform: uppercase ; 
            color: var(--color--primary)!important;
           
    }
  #artists .card {
        position: relative !important;
        
        overflow: hidden !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
     #releases .card {
        position: relative !important;
        
        overflow: hidden !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    
    #finds h2{
        font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
   
     text-align: left;
     padding-left:15px;
        
    }
     
     .hero-subtitle {
    
    padding-left: 5vh !important;
    padding-right: 5vh !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds black shadow */
}
    
    
    video, #hero,.hero-overlay {
        border-bottom-left-radius: 20px !important; /* Adjust as needed */
  border-bottom-right-radius: 20px!important; /* Adjust as needed */
    }
    #career h2{
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
   
     text-align: left;
     padding-left:15px;
}
#about h2{
    font-weight: 700;
            font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase;   
    
     text-align: left;
     padding-left:15px;
}
#career .para2{
   padding-left:15px;
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
#about .paraf{
    padding-left:15px;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}


   #hero {
  position: relative!important;
  height: 100vh!important;
  overflow: hidden!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

#hero video {
  width: 80%!important;; /* Adjust as needed */
  max-width: 1000px!important;
  border-bottom-left-radius: 20px!important;
  border-bottom-right-radius: 20px!important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out!important;
}
  #artists  .artist-box h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
    
     text-align: left;
    margin-left: 15px
    
    
}
#finds .p2{
    padding-left:15px;
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
    
    
}

   #contact h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
text-transform: uppercase;   
     
     text-align: left;
     padding-left:15px;
    
    
}
 .contact-form input,
.contact-form textarea,
.contact-form button {
    border-radius: 20px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    border-color: var(--dark-grey)!important;
    box-shadow: none !important; /* Prevents any shadow effect */
    padding: 10px;
    width: calc(90% - 30px); /* Adjusts width to account for margins */
    
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
  
    outline: none !important;
    box-shadow: none !important;
}
.contact-form button {
    width:150px;
    height:42px;
    
}

#contact form .input{
    border-radius: 20px;
}
 #finds .artist-box h3 {
  
    font-family: Sans-Serif!important;
    font-weight: bold;
    text-align: left!important;
    padding-left:15px;
    padding-top:10px;
    
    
}
#finds .send-message-button{
    border-radius: 20px;
    float: center;
    margin-bottom:16%;
    margin-left:15px;
    margin-right:15px;
    width:90%;
}
#releases .send-message-button{
    border-radius: 20px;
    float: left;
    margin-bottom:16%;
    margin-left:15px;
    width:15vh;
    border:none;
    height: 45px;
    background-color:var(--color--primary);
}
#contact .send-message-button{
    background-color: var(--color--primary)!important;
}
@media (prefers-color-scheme:Dark) {
    #contact .send-message-button{
    color: #121212!important;
}
    
    .contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#releases .send-message-button{
    color: #121212;
}

    
    .contact-form input,
.contact-form textarea,
.contact-form button {
   
    border: none !important;
    outline: none !important; /* Removes the blue outline on focus */
   
}
    
    #releases{
        background-color:#121212 ;
    }
body{
    background-color:#0d0d0d!important;
}
#finds{
    background-color: #121212;
    border-radius: 20px;
    margin-left:16px;
    margin-right:16px;
    
}

#about{
    background-color: #121212;
}
#footer{
    background-color: #121212;
}

.card{
     background-color: #121212!important;
}
.modal{
     background-color: #121212!important;
}
#contact .contact-form button {
    
    
}
#contact{
   background-color:  #121212!important;
}
.section hr{
    
}

.paraf b{
     
}
#about{
    
}
#career{
    
}
#career .card{
    
}
#finds .send-message-button{
    background-color:var(--color--primary)!important;
    color: #0c0c0c!important ;
    
}

#releases .send-message-button{
    
}

.artist-box{
    
}

#finds .p2{
    
}
}

.artist-box {
    
    
}





@media (prefers-color-scheme: Light) {
#finds .send-message-button{
    background-color:var(--color--primary)!important;
    color: var(--color--light)!important ;
    
}


}




 #releases h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
     
     text-align: left;
    margin-left: 15px
    
}

.release-box {
    overflow: hidden;
    border-radius: 30px;
}


.releasedesc{
    padding-left:15px;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    
    
}
    
}
      
 

    
    
    
    
    
    
    
    
    
    
    
    
    
    
 .hero-subtitle{
     font-family: var(--font--heading)!important;
            font-weight: 700!important;
            text-transform: uppercase !important; 
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
           
     
 }

    .send-message-button {
    transition: transform 0.3s ease-in-out;
}

.send-message-button:hover {
    transform: scale(1.1)!important; /* Slight zoom-in effect */
}

.send-message-button:active {
    transform: scale(1)!important; /* Reset on click */
}



    @media (min-width: 1000px) {  /* for desktop */
    .card {
   
    
}
 
.career-grid {
    display: grid!important;
    grid-template-columns: repeat(3, 1fr)!important; /* 3 columns */
    gap: 20px!important; /* Spacing between grid items */
}

.contact-form {
   
   margin-left: 0!important; /* Aligns it to the left */
}

.hero-subtitle { padding-left:20%!important;
             padding-right:20%!important;/* Adds black shadow */
}
.card{
    margin-left:7vh!important;
}
.artist-container{
    width: 20px!important;
}

#finds .contf {
    
    height: 200px;
    width: 300px;
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    padding-right:10vh;
}
 





#career {
    height: auto; /* Or any other height you want */
}
#artists .card-content h3{
    text-align: left;
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
}
#artists .card-content p{
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}

#career .card-content h3{
    
    font-family: var(--font--heading);
            font-weight: 700;
            
            text-transform: uppercase ; 
}
.card {
    border: none!important;
}
    
    #artists .artistdesc{
        padding-left:15px;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
     padding-left:10vh;
        
    }
    .subtitle {
            color: var(--color--primary);
            
            text-transform: uppercase;
            text-align: left;
     padding-left:10vh;
        }
    
    .record{
        font-family: var(--font--heading);
            font-weight: lighter;
            text-transform: uppercase ; 
          
    }
    .flip{
        font-family: var(--font--heading);
            font-weight: 700 !important;
            text-transform: uppercase ; 
            color: var(--color--primary)!important;
            
    }
  #artists .card {
        
       
        overflow: hidden !important;
        
        align-items: center !important;
        margin-left: 7vh;
        
    }
     #releases .card {
        
        
        overflow: hidden !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
         margin-left: 7vh;
    }
    
    
    #finds h2{
        font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
   
     text-align: left;
     padding-left:10vh;}
     
     .hero-subtitle{
         
     }
    
    
    video, #hero,.hero-overlay {
        border-bottom-left-radius: 20px !important; /* Adjust as needed */
  border-bottom-right-radius: 20px!important; /* Adjust as needed */
    }
    #career h2{
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
     
     text-align: left;
     padding-left:10vh;
}
#about h2{
    font-weight: 700;
            font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase;   
    
     text-align: left;
     padding-left:10vh;
}
#career .para2{
   padding-left:10vh;
  
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
#about .paraf{
    padding-left:10vh;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}


   #hero {
  position: relative!important;
  height: 100vh!important;
  overflow: hidden!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

#hero video {
  width: 80%!important;; /* Adjust as needed */
  max-width: 1000px!important;
  border-bottom-left-radius: 20px!important;
  border-bottom-right-radius: 20px!important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out!important;
}
  #artists  .artist-box h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
    
     text-align: left;
    margin-left: 10vh;
    
    
}
#finds .p2{
    padding-left:10vh;
    margin-right:60vh;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
    
    
}

   #contact h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
text-transform: uppercase;   
    
     text-align: left;
     padding-left:10vh;
    
    
}
 .contact-form input,
.contact-form textarea,
.contact-form button {
    border-radius: 20px !important;
    margin-left: 10vh; !important;
    border-color: var(--dark-grey)!important;
    box-shadow: none !important; /* Prevents any shadow effect */
    padding: 10px;
    width: calc(90% - 30px); /* Adjusts width to account for margins */
    
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
  
    outline: none !important;
    box-shadow: none !important;
}
.contact-form button {
    width:150px;
    height:42px;
    
}

#contact form .input{
    
    
    
    border-radius: 20px;
}
 #finds .artist-box h3 {
    
    font-family: Sans-Serif!important;
    font-weight: bold;
    text-align: left!important;
    padding-left:10vh;
    padding-top:10px;
    
    
}
#finds .send-message-button{
    
    border-radius: 20px;
    
   
    width:300px;
   
  
    
}
#releases .send-message-button{
    border-radius: 20px;
    float: left;
    margin-bottom:16%;
    margin-left:10vh;
    width:15vh;
    border:none;
    height: 45px;
    background-color:var(--color--primary);
}
#contact .send-message-button{
    background-color: var(--color--primary)!important;
}
@media (prefers-color-scheme:Dark) {
    #contact .send-message-button{
    color: #121212!important;
}
    
    .contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#releases .send-message-button{
    color: #121212;
}

    
    .contact-form input,
.contact-form textarea,
.contact-form button {
   
    border: none !important;
    outline: none !important; /* Removes the blue outline on focus */
   
}
    
    #releases{
        background-color:#121212 ;
    }
body{
    background-color:#0d0d0d!important;
}
#finds{
    background-color: #121212;
    border-radius: 20px;
    margin-left:10vh;
    margin-right:10vh;
    
}

#about{
    background-color: #121212;
}
#footer{
    background-color: #121212;
}

.card{
     background-color: #121212!important;
}
.modal{
     background-color: #121212!important;
}
#contact .contact-form button {
    
    
}
#contact{
   background-color:  #121212!important;
}






#finds .send-message-button{
    background-color:var(--color--primary)!important;
    color: #0c0c0c!important ;
    
}
}







@media (prefers-color-scheme: Light) {
 .send-message-button{
    background-color:var(--color--primary)!important;
    color: var(--color--light)!important ;
    
}
.send-message-button{
    background-color:var(--color--primary)!important;
    color: white important ;
    
}

}




 #releases h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
     
     text-align: left;
    margin-left: 10vh;
    
}

.release-box {
    overflow: hidden;
    border-radius: 30px;
}


.releasedesc{
    padding-left:10vh;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    
    
}

    




    
    
    
}
 /* old css */   
    
#modal .modal-content {
    border: none!important;
}
#modal .modal-content .careert {
    font-family: var(--font--heading)!important;
            font-weight: 700!important;
            text-transform: uppercase !important; 
}
#modal .modal-content button {
    font-family: var(--font--heading)!important;
            font-weight: 700!important;
            text-transform: uppercase !important; 
}
#modal .modal-content p {
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
   .modal-content .artistname {
  font-family: var(--font--heading)!important;
            font-weight: 700!important;
            text-transform: uppercase !important; 
            text-align: left!important;
}

   
    @media (prefers-color-scheme: dark) {
    body {
        background-color: --theme-dark!important; /* Dark background */
        color: #ffffff;
    }
.footer{
        background-color: #0d0d0d!important;
    }
    .navbar {
        background-color:--theme-dark!important; /* Dark navbar */
        color: #ffffff;
    }
    
}
 @media (prefers-color-scheme: Light) {
#artists{
    background-color: #f1f1f1!important;
}
#career{
    background-color: #f1f1f1!important;
    
}


#releases .send-message-button{
    color: white;
}

}
    
   
    .flip:hover {
    color:  #121212!important;
    }
    :root {
            --color--dark: #0d0d0d;
            --color--light: white;
            --color--secondary: #989df4;
            --color--elevation: #ffffff05;
            --color--border: #1f1f1f;
            --color--primary:#613fdd;
            --dark-grey: #989898;
            --gray-300: #7a7a7a;
            --font--main: 'Satoshi', sans-serif;
            --font--heading: 'Clash Display', sans-serif;
            --type--body-regular: 16px;
            --type--body-big: 18px;
            --type--subtitle: 20px;
            --subtitle-2: 22px;
            --type--h3: 32px;
            --type--h2: 44px;
            --type--h1-small: 72px;
            --type--h1: 90px;
            --other--rounded-corners: 24px;
        }
        @media (prefers-color-scheme: dark) {
            :root {
             --color--primary: #9de849;
            }
            
        }
        
  
    body {
    padding-top: 50px; /* Ensures everything starts after the navbar */
}







@media only screen and (max-width: 768px) {   /* for mobiles */
    
    .card {
   
    
}
#artists .card-content h3{
    text-align: left;
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
}
#artists .card-content p{
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
#career .card-content h3{
    
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
}
.nav-links{
   
    font-family: Sans-Serif!important;
    
    
}
.card {
    border: none!important;
}
    
    #artists .artistdesc{
        padding-left:15px;
  
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
     padding-left:15px;
        
    }
    .subtitle {
            color: var(--color--primary);
            
            text-transform: uppercase;
            text-align: left;
     padding-left:15px;
        }
    
    .record{
        font-family: var(--font--heading);
            font-weight: lighter;
            text-transform: uppercase ; 
            
    }
    .flip{
        font-family: var(--font--heading);
            font-weight: 700 !important;
            text-transform: uppercase ; 
            color: var(--color--primary)!important;
           
    }
  #artists .card {
        position: relative !important;
        width: 250px !important; /* Adjust as needed */
        overflow: hidden !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
     #releases .card {
        position: relative !important;
        width: 250px !important; /* Adjust as needed */
        height: 200px !important; /* Adjust as needed */
        overflow: hidden !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    
    #finds h2{
        font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
    
     text-align: left;
     padding-left:15px;
        
    }
     
     .hero-subtitle {
   
    padding-left: 5vh !important;
    padding-right: 5vh !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds black shadow */
}
    
    
    video, #hero,.hero-overlay {
        border-bottom-left-radius: 20px !important; /* Adjust as needed */
  border-bottom-right-radius: 20px!important; /* Adjust as needed */
    }
    #career h2{
    font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase ; 
            
    
     text-align: left;
     padding-left:15px;
}
#about h2{
    font-weight: 700;
            font-family: var(--font--heading);
            font-weight: 700;
            text-transform: uppercase;   
    
     text-align: left;
     padding-left:15px;
}
#career .para2{
   padding-left:15px;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}
#about .paraf{
    padding-left:15px;
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
}


   #hero {
  position: relative!important;
  height: 100vh!important;
  overflow: hidden!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

#hero video {
  width: 80%!important;; /* Adjust as needed */
  max-width: 1000px!important;
  border-bottom-left-radius: 20px!important;
  border-bottom-right-radius: 20px!important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out!important;
}
  #artists  .artist-box h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
   
     text-align: left;
    margin-left: 15px
    
    
}
#finds .p2{
    padding-left:15px;
   
    font-family: Sans-Serif!important;
    font-weight: lighter;
    text-align: left;
    
    
}

   #contact h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
text-transform: uppercase;   
     
     text-align: left;
     padding-left:15px;
    
    
}
 .contact-form input,
.contact-form textarea,
.contact-form button {
    border-radius: 20px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    border-color: var(--dark-grey)!important;
    box-shadow: none !important; /* Prevents any shadow effect */
    padding: 10px;
    width: calc(90% - 30px); /* Adjusts width to account for margins */
    
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
  
    outline: none !important;
    box-shadow: none !important;
}
.contact-form button {
    width:150px;
    height:42px;
    
}

#contact form .input{
    border-radius: 20px;
}
 #finds .artist-box h3 {
   
    font-family: Sans-Serif!important;
    font-weight: bold;
    text-align: left!important;
    padding-left:15px;
    padding-top:10px;
    
    
}
#finds .send-message-button{
    border-radius: 20px;
    float: center;
    margin-bottom:16%;
    margin-left:15px;
    margin-right:15px;
    width:90%;
}
#releases .send-message-button{
    border-radius: 20px;
    float: left;
    margin-bottom:16%;
    margin-left:15px;
    width:15vh;
    border:none;
    height: 45px;
    background-color:var(--color--primary);
}
#contact .send-message-button{
    background-color: var(--color--primary)!important;
}
@media (prefers-color-scheme:Dark) {
    #contact .send-message-button{
    color: #121212!important;
}
    
    .contact-form input:focus,
.contact-form textarea:focus,
.contact-form button:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#releases .send-message-button{
    color: #121212;
}

    
    .contact-form input,
.contact-form textarea,
.contact-form button {
   
    border: none !important;
    outline: none !important; /* Removes the blue outline on focus */
   
}
    
    #releases{
        background-color:#121212 ;
    }
body{
    background-color:#0d0d0d!important;
}
#finds{
    background-color: #121212;
    border-radius: 20px;
    margin-left:16px;
    margin-right:16px;
    
}

#about{
    background-color: #121212;
}
#footer{
    background-color: #121212;
}

.card{
     background-color: #121212!important;
}
.modal{
     background-color: #121212!important;
}
#contact .contact-form button {
    
    
}
#contact{
   background-color:  #121212!important;
}
.section hr{
    
}

.paraf b{
     
}
#about{
    
}
#career{
    
}
#career .card{
    
}
#finds .send-message-button{
    background-color:var(--color--primary)!important;
    color: #0c0c0c!important ;
    
}

#releases .send-message-button{
    
}

.artist-box{
    
}

#finds .p2{
    
}
}

.artist-box {
    
    
}





@media (prefers-color-scheme: Light) {
#finds .send-message-button{
    background-color:var(--color--primary)!important;
    color: var(--color--light)!important ;
    
}
.nav-links p{
    color: var(--secondary-color)!important;
}


}




 #releases h2 {
    font-weight: 700;
    font-family: var(--font--heading);
        font-weight: 700;
    text-transform: uppercase;   
     
     text-align: left;
    margin-left: 15px
    
}

.release-box {
    overflow: hidden;
    border-radius: 30px;
}


.releasedesc{
    padding-left:15px;
    
    font-family: Sans-Serif!important;
    font-weight: lighter;
    
    
}

    
}




    

   


      html, body {
  overflow-x: hidden;
}
        .section {
        
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .left {
            transform: translateX(-100px);
        }
        .right {
            transform: translateX(100px);
        }
        .top {
            transform: translateY(-100px);
        }
        .bottom {
            transform: translateY(100px);
        }
        
       #changingTextt {
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
    text-align: center;
    color: 	#3b3b3b;
    font-family: Sans-Serif;
    font-weight: lighter;
   
    
}