:root{
    --secondary_color: #ACBEFF;
    --tertiary_color: #112339;
    --transparent-dark: #0000007d;
}

.album-cover-div{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-bottom: 0.5rem;
    position: relative;
}

.album-cover{
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.btn{
    padding: 15px;
}

.btn-hero:hover{
    color: rgb(16, 17, 31) !important;
    background-color: var(--secondary_color);
    box-shadow: -2px 10px 10px  #000000;
}

body{
    background-color: #0E151C;
    color: aliceblue;
}


.bounce {
    animation: bounce 3s infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-17px);
    }
    60% {
      transform: translateY(-15px);
    }
  }
  

.card{
    background-color: var(--tertiary_color);
    color: aliceblue;
    padding: 2rem !important;
    transition: box-shadow 0.5s, scale 0.2s;
}

.card img{
    border: solid 1px rgb(29, 25, 45);
    margin-bottom: 2rem;
}

.card:hover{
    box-shadow: -2px 10px 10px  #000000;
    scale: 1.005;
}

.card h5{
    font-weight: bold;
}

.card h6{
    color: var(--secondary_color);
    font-size: small;
}


.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.btn{
    border-radius: 0px;
}

.form-control{
    background-color: rgba(240, 248, 255, 0);
    border-radius: 0px;
    border-bottom: 2px solid rgb(255, 255, 255);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    color: white;
}

.form-control:focus{
    background-color: rgba(102, 51, 153, 0);
    color: white;
}


.footer{
    margin-top: 10rem;
}

/* svg */
.footer-icon{
    height: 30px;
}

#footer-wave{
    z-index: -99;
    filter: blur(28px);
  }


.hero{
    height: 40rem;
}

.hero-wave{
    filter: blur(20px);
    overflow: hidden;
    position: absolute;
    top:  20rem;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Optional: Lower z-index to place it behind other elements */

    

    opacity: 0;
    transition: all 1s ease-in-out;
}

.hero-wave.show {
    top: 9rem;
  opacity: 1;
}


.hero-text{
    color: white;
    text-shadow: 1px 1px 8px rgb(187, 203, 216);;
}

#inquire-div{
    background-color: var(--transparent-dark);
    padding: 3rem;
    margin-top: 10rem !important;
}

.instagram-media{
    height: 33rem;
}

#music-div{
    background-color: var(--transparent-dark);
    padding: 3rem;
    margin-top: 6rem;
}

.song-description{
    align-items: center;
    background-color: #000000e4;
    color: #000000;
    cursor: pointer;
    display: flex;
    height: 100%;
    position: absolute;
    max-width: inherit;
    object-fit: cover;
    transition: all 0.3s ease-in;
    opacity: 0;

}
.show{
    opacity: 100%;
}


.song-description p{
    font-size: 1rem;
    text-shadow: 2px 2px 2px #000000;
    color: #ffffff;
    margin: 2rem;    
}


.song-div{
    margin-bottom: 20px;
}


.progressContainer{
    border: solid 1px rgba(255, 255, 255, 0.414);
    cursor: pointer;
    height:4px;
    margin:  15px 0px 15px 0px;
    width: 100%;
    transition: all 0.1s ease-in-out;    
}

.progressContainer:hover{
    height: 10px;
}

.progressBar{
    width: 0%;
    height: 100%;
    background-color: #4F6BD0;
    transition: width 0.1s linear;
}


.secondary-color{
    color: #e4e4e4;
}

.side-bar{
    background-color: rgba(0, 0, 0, 0.841);
    position: fixed;
    top:  0;
    right: 0;
    width: 70vw;
    height: 100vh;
    z-index: 9999; /* A high z-index value to ensure it's on top */
}


@media (min-width: 992px) {
    #carouselExample{
        scale: .9;
    }

    .carousel-sm{
        display: none;
    }
    

  }

@media (max-width: 991px) {
    .carousel-lg{
        scale: 1;
        display: none;
    }

    .carousel-sm{
        display: block;
    }

    #inquire-div{
        padding: 1rem;
     
    }

    #music-div{
        padding: 3rem 0rem 3rem 0rem;
    }

}