* {
  box-sizing: border-box;
}



.gM-logo {
  width: 3.5rem;
  height: auto;
}

body {
  font-family: Nunito;
  padding-bottom: 6rem;
  background: #fff url('assets/bg.png');
  background-color: #F8F8F8;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 50% height */
  height: 50%;
}

h1,h2 {
  font-family: Fredericka the Great;
}

h3,h4,h5,h6 {
  font-family: Roboto;
  font-weight: bold;
}

.main-section .text-center {
  padding-top: 5rem;
}


.card {
  background-color: #EBEBEB;
  box-shadow: 0 0 5px 1px #ced4da;
}

.gift-card-img {
  background-color: #8E1C9E;
  border-radius: 15px;
}

.image-card {
  width: 100%;
  height: 15vw;
  object-fit:cover;
  border: 1px solid #ced4da;
}

.parallax {
  /* The image used */
  background-image: url('assets/banner.png');
  /* Full height */
  height: 100%; 
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.search-bar {
  border: 1px solid #888;
  height: 4rem;
}

#search-input {
  height: 100%;
  box-shadow: none;
}

.search {
  width: 50%;
}

#search-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

#name-input,
#email-input {
  height: 50px;
  padding: 5px 15px;
  /* background: transparent !important; */
  border-radius: 0;  
}

.form-check-input:checked {
  background-color: #8E1C9E;
  border-color: #8E1C9E;
}

.submit-btn {
  height: 50px;
  padding: 5px 15px;
  background: transparent;
  color: #000;
  border: 0;
  box-shadow: 0 0 1px 1px #8E1C9E !important;
  outline: none;
  border-radius: 0;  
}

.form-control {
  background-color: transparent;
  outline: none;
}

.btn-add,
.btn-clear,
.btn-checkout,
.btn-preview {
  background-color: transparent;
  outline: none;
  box-shadow: 0 0 1px 1px #8E1C9E !important;
  border-radius: 0;  
}

.form-control:focus {
  outline: none;
}

/*apply hover and focus effect to button tags*/
.btn-add:hover,
.btn-add:focus,
.btn-preview:hover,
.btn-preview:focus,
.btn-search:hover,
.btn-search:focus,
.submit-btn:hover,
.submit-btn:focus,
.btn-clear:focus,
.btn-checkout:focus,
.btn-clear:hover,
.btn-checkout:hover {
  background-color: #8E1C9E;
  color: #fff;
  outline-style: solid;
  outline-color: #8E1C9E;
  outline-width: medium;
  box-shadow: 0 0 2px 0 #8E1C9E !important;
  border-radius: 0;
  border: 1px solid #ced4da;
}

.btn-preview:hover,
.btn-preview:focus {
  color: #fff !important
}


/* To alter the order of elements */
.card-body {
  position: relative;
}

.song-item p {
  width: 75%;
  margin-bottom: 0rem;
  line-height: 2rem;
}

.song-price {
  position: absolute;
  top: 1rem;
  right: 0.6rem;
  text-align: end;
  color: #8E1C9E;
}

.song-type {
  text-transform: capitalize;
}


.song-btn {
  position: absolute;
  bottom: 1rem;
  right: 0.6rem;
}

.song-name2 {
  color: #606060;
}

.song-name1 {
  font-weight:bold;
}

select:hover {
  cursor: pointer;
} 

.select-dropdown {
  height: 100%;
  border: none;
  border-right: 4px solid #888;
  box-shadow: none;
}

.btn-search {
  box-shadow: none;
  border: none;
  border-left: 3px solid #888;
  background-color: transparent;
}

.select-dropdown:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.numberOf-musics {
  color: #8E1C9E;
  margin-bottom: 0;
}

.styled-select select {
  height: 100%;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
}

.map iframe {
  width: 100%;
  height: 500px;
}

/*apply css properties to footer */
.footer {
  background: #fff url('assets/footer-bg.png');
  background-color: #F8F8F8;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  } 

.line:after {
  content: ""; /* This is necessary for the pseudo element to work. */ 
  display: block; /* This will put the pseudo element on its own line. */
  margin: 0 auto; /* This will center the border. */
  width: 30%; /* Change this to whatever width you want. */
  border-top: 1px solid #dadada; /* This creates the border. Replace black with whatever color you want. */
}

.social-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

i.fa-brands {
  font-size: 30px;
  display: inline-block;
  border-radius: 100%;
  box-shadow: 0 0 2px #888;
  padding: 0.1em 0.1em;
  border: 3px solid #000;
}

i.fa-facebook-f {
  padding: 0.1em 0.3em;
}

i.fa-instagram {
  padding: 0.117em 0.2em;
}

i.fa-brands:hover {
  border: 3px solid #8E1C9E;
  box-shadow: 0 0 5px 1px #8E1C9E;
}

.fa-trash {
  color: #8E1C9E;
}

.fa-trash:hover {
  color: red;
  cursor: pointer;
}

.fa-circle-play:before, 
.fa-play-circle:before {
  content: "\f144";
  font-size: 50px;
}

.gift-card {
  column-gap: 1rem;
}

.btn-controle .fa-solid,
.card-body p .fa-solid {
  font-size: 18px;
  padding: 0.5em 0.7em;
  border: 1px solid #8E1C9E;
  color: #000;
} 

.btn-controle .fa-solid:hover,
.card-body p .fa-solid:hover {
  background-color: #8E1C9E;
  color: #fff;
  box-shadow: 0 0 2px 0 #8E1C9E !important;
} 

.ng-binding i {
  line-height: 1.5em;
}

.page-link {
  color: #000;
}

.page-item.active .page-link {
  background-color: #8E1C9E;
  border-color: #8E1C9E;
}

.page-link:focus {
box-shadow: none !important;
color: #000;
}

.page-link:hover {
  color: #000 !important
}

li a {
  color: #000;
}

li a:hover {
  color: #8E1C9E !important;
}

/* Apply this style when the screens size is 992px or less */
@media only screen and (max-width: 992px) {
  .search {
    width: 75%;
  }

  .image-card {
    height: 20vh;
  }
}

/* Apply this style when the screens size is 768px or less */
@media only screen and (max-width: 768px) {
  .search {
    width: 100%;
  }

  #contact-form {
    display: flex;
    flex-flow: column-reverse;
  }

  .image-card {
    height: 25vh;
  }

  thead {
    display: none;
  }

  #cart-items tr {
    border-bottom : 1px solid #e1e6ea !important;
    border-top: none !important;
  }
}

/* Apply this style when the screens size is 576px or less */
@media only screen and (max-width: 576px) {
  .image-card {
    height: 35vh;
  }

  .item-img-desc {
    flex-direction: column;
  }

  .item-price-qty {
    flex-direction: column;
    align-items: center;
  }

  .item-desc-wrapper {
    padding-left: 0.5rem !important;
  }

  .control {
    padding-top: 10px;
    padding-left: 0px !important;
  }
}

/* Apply this style when the screens size is 768px or above */
@media only screen and (min-width: 576px) {
  .pagination .page-item {
    padding: 0 0.5rem !important;
  }
}

.list-group-item {
  background-color: transparent !important;
}

.contact-info li a {
  color: #8E1C9E;
  text-decoration: none;
  background-color: transparent;
}

.contact-info li a:hover {
    text-decoration: underline;
}


.item-image {
  max-width: 150px;
  height: auto;
  background-color: #8E1C9E;
  border-radius: 10px;
}

.cart-number {
  position: relative;
}

.fa-basket-shopping {
  position: relative;
}

#cart {
  position: relative;
  cursor: pointer;
}

.cartVal {
  font-size: 14px;
  position: absolute;
  background-color: #8E1C9E;
  width: 27px;
  height: 27px;
  padding-top: 3.5px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  bottom: 15px;
  right: -10px;
}

.media-desc {
  padding: 10px 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 2rem;
}

.control {
  display: flex;
  justify-content: space-between;
}

.control button {
  width: 30px;
  height: 30px;
  font-size: 18px;
  border: 1PX solid #8E1C9E;
}

/*apply hover effect to button tag*/
.control button:hover {
  background-color: #8E1C9E;
  color: #fff;
}

.cart-wrapper{
  overflow-y: auto;
  max-height: 100vh;
  width:100%;
}

.cart-window{
  position: fixed;
  top: 13.6vh;
  right: 0;
  /* to make cart to the front of everything */
  z-index: 100;
}

.hide{
  display: none;
}