@import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&disply=swap');
* {
    box-sizing: border-box;
    text-decoration: none;
  }
  
  body {
    background: linear-gradient(#322f2f, #f6ffb0, #c2ffcf);
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: cover;
    overflow: auto;
    
  }

.Music {
 padding: 20px;
 justify-content: center;
 margin-top: 5%;
 text-align: center;
 font-family:'Courier New', Courier, monospace;
 font-size:100px;
 padding-top:50px;
}

.Music h1{
  color: #911818e3;
  font-size:60px;
}


.container {
 display: flex;
 flex-wrap: wrap;
 justify-content:center;
 backdrop-filter: blur(5px);
 
}

.card {
 width: 80%;
 height: auto;
 margin-bottom: 20px;
 border-radius: 10px; 
 box-shadow: 5px 5px 5px 5px#560D0D;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 align-items: center;
 gap: 1.5rem;
 margin: 30px;
}

.card .text {
 padding: 50px;
 font-family: sans-serif;
}

.card h4 {
 font-size: 50px;
 margin-bottom: 10px;
 color: #5c9f24;
}

.card p {
 font-size: 20px;
 color:  #911818e3;
 font-style: italic;
 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.spotify {
 padding: 40px;
 width: 550px;
 height: 450px;
 opacity: 0.9;
}

iframe {
 width: 100%;
 height: 100%;
 border: none;
}


/* ===============movies================= */

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
}

.section-bg {
  background-color: #f1f1f1;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.section-title h1{
  color: rgb(47, 45, 45);
}

.section-title h2 {
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  color:  #911818e3;
  text-decoration: underline;
}

.section-title p {
  margin-bottom: 0;
  color: #000000;
  font-size: 20px;
}
.section-title h3{
  color:  #911818e3;
  font-size: 25px;
  font-style: italic;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/

.portfolio-wrap {
  overflow: hidden; 
}

.portfolio-wrap img {
  width: 100%; 
  height: 500px; 
  object-fit: cover; 
  margin: 10px ;
  padding: 10px ;
  border-radius: 30px;
}


.portfolio-details {
  padding-top: 40px;
  
}

.portfolio-details .portfolio-details-slider img {
  width: 100%; 
  object-fit: cover;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #5c9f24;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #5c9f24;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(42, 42, 42, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 6px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}