/* CSS for rotative Vinyl */
.rotative-container {
     position: relative;
     left: 10%;
}

.main-container {
     display: flex;
     align-items: center;
     justify-content: center;
     width: inherit;
     height: inherit;
}

.square {
     width: 50%;
     height: inherit;
     z-index: 1000;
     
     /* Adjust this based on your design */
     background-position: center;
     background-size: cover !important;
     display:block;
}

.vinyl-container {
     display: flex;
     width: 50%;
     height: inherit;
     position: relative;
     right: 25%;
     animation: vinyl-rotation 15s infinite linear;
     z-index: 10;
}
.vinyl-container-create{
     display: flex;
     width: 100%;
     height: inherit;
     animation: vinyl-rotation 10s infinite linear;
     z-index: 10;
}

.disk-text {
     position: absolute;
     left: 50%;
     top: 5%;
     transform: translate(-50%, 0);
     z-index: 100;
     color: #fff;
     font-size: 50%;

}

.circle {
     border-radius: 50%;
     width: 40%;
     height: 40%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 100;
     background-size: cover !important;
     background-position: center !important;
}
.circle-black{
     background:url('../images/vinyl-black.png');
     width: 100%;
     height: 100%;
     background-size: cover;
     /* Adjust this based on your design */
     background-position: center;
     display: block;
     border-radius: 50%;
}
.marble {
     background:url("../images/marble.jpg"), url('../images/vinyl-black.png');
     background-blend-mode: overlay;
     background-size: cover;
     /* Adjust this based on your design */
     background-position: center;
     width: 100%;
     height: 100%;
     display: block;
     border-radius: 50%;
     /* Keeps the circular shape if applied */
}

.vinyl-right,
.vinyl-left {
     z-index: 10;
}

.vinyl-right {
     transform: rotate(180deg);
}

@keyframes vinyl-rotation {
     50% {
          transform: rotate(180deg);
     }

     100% {
          transform: rotate(360deg);
     }
}

/* Grey */
.bg-grey {
     filter: invert(25%) sepia(10%) saturate(400%) hue-rotate(-550deg);
}

/* Brown */
.bg-brown {
     filter: invert(5%) sepia(35%) saturate(700%) hue-rotate(-15deg);
}

/* Gold yellow */
.bg-yellow {
     filter: invert(25%) sepia(90%) saturate(900%) hue-rotate(-700deg);
}

/* Teal */
.bg-teal {
     filter: invert(20%) sepia(80%) saturate(700%) hue-rotate(-600deg);
}

/* Hot pink */
.bg-hpink {
     filter: invert(25%) sepia(80%) saturate(1000%) hue-rotate(-65deg);
}

/* Coral Red */
.bg-coral {
     filter: invert(20%) sepia(80%) saturate(1000%) hue-rotate(-30deg);
}

/* Orange */
.bg-orange {
     filter: invert(20%) sepia(80%) saturate(1000%) hue-rotate(-0deg);
}

/* Gold pink */
.bg-pink {
     filter: invert(20%) sepia(80%) saturate(300%) hue-rotate(330deg);
}



/* Neon green */
.bg-green {
     filter: invert(20%) sepia(100%) saturate(500%) hue-rotate(60deg);
}

/* Lavender*/
.bg-purple {
     filter: invert(20%) sepia(100%) saturate(200%) hue-rotate(210deg);
}

/* Cobalt blue */
.bg-blue {
     filter: invert(10%) sepia(100%) saturate(400%) hue-rotate(180deg);
 }
 

.rotative-container-design {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 15vw;
     /* Adjust size as needed */
     height: 15vw;
     transition: transform 0.4s ease;
     /* Smooth transition for scaling and rotating */
}

.rotative-container-design:hover {
     transform: scale(1.15) rotate(10deg);
     /* Scale up and add slight rotation on hover */
}

.main-container-design {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
}

.vinyl-container-design {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
}

.vinyl-container-design img.vinyl-left {
     width: 100%;
     /* Make the vinyl image fit the container */
     animation: vinyl-rotation 5s infinite linear;
     /* Apply rotation here */
     transform-origin: center center;
     /* Rotate around the center */
}

.disk-text {
     position: absolute;
     top: 5%;
     left: 50%;
     transform: translateX(-50%);
     color: #fff;
     font-size: 0.95em;
     z-index: 100;
     text-align: center;
     font-family: "Roboto", sans-serif;
}

.shadow-effect {
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); 
     transition: transform 0.3s; 
 }
 
 .shadow-effect:hover {
     transform: scale(1.05); 
 }