@import url('https://fonts.cdnfonts.com/css/satoshi');
 html {
     scroll-behavior: smooth;
}
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: 'Satoshi', sans-serif;
     cursor: none;
}
 a {
     text-decoration: none;
     color: inherit;
}
 .cursor {
     pointer-events: none;
}
 .cursor__ball {
     position: fixed;
     top: 0;
     left: 0;
     mix-blend-mode: exclusion;
     z-index: 1000;
}
 .cursor__ball circle {
     fill: #f7f8fa;
}
/* ========== header and navbar styling =========*/
 header {
     width: 100%;
     padding: 10px 40px;
     border-bottom: 1px solid #E5E5E5;
     background-color: #ffffffdb;
     position: fixed;
     top: 0;
     transition: all 0.25s ease;
     z-index: 3;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     flex-wrap: wrap;
}
 header img {
     height: 30px;
}
 @media (max-width: 330px) {
     header img {
         display: none;
    }
}
 header .user-details span {
     margin-left: 20px;
     font-size: 1.2rem;
     color: #828282;
     padding: 0 15px 10px 15px;
}
 header .user-details span:hover {
     color: #101920;
     border-bottom: 2px solid #101920;
     cursor: pointer;
}
 nav {
     padding: 15px 0 0 15px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
}
 nav ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     margin: 0 auto;
}
 @media (max-width: 600px) {
     nav ul {
         margin: unset;
         display: unset;
         position: relative;
         right: 30px;
    }
}
 nav li {
     list-style-type: none;
}
 nav li a {
     margin: 0 15px;
     padding: 10px 5px 15px 5px;
     color: #828282;
     letter-spacing: 0.05rem;
     font-size: 0.9rem;
}
 nav li a:hover {
     color: #ce8524;
     border-bottom: 2px solid #ce8524;
     padding: 10px 10px 15px 10px;
     transition: 0.3s all ease-in-out;
}
 nav button {
    /*remove default styling*/
    /*outline: none;
    */
     border: none;
     box-shadow: none;
     min-width: 110px;
     height: 50px;
     background: #ce8524;
     color: white;
     font-size: 0.9rem;
     border-radius: 2px;
     position: relative;
     z-index: 1;
}
 nav button span {
     position: absolute;
     top: 0;
     left: 0;
     border-radius: 2px;
     background: #a3681b;
     height: 100%;
     z-index: -1;
    /*javascript used for animation-name setting*/
     animation-duration: 0.5s;
     animation-fill-mode: forwards;
}
 nav button:hover {
     cursor: pointer;
}
 @keyframes buttonEffect {
     0% {
         width: 0px;
    }
     100% {
         width: 100%;
    }
}
 @keyframes buttonEffectRemoval {
     0% {
         width: 100%;
    }
     100% {
         width: 0px;
    }
}
 @media (max-width: 1000px) {
     nav li a {
         padding-bottom: 0px;
    }
}
/* ========== main body styling =========*/
 main {
     text-align: center;
}
 .block {
     padding: 30px;
    /*padding top needed for navbar links */
     padding-top: 60px;
}
 .blockforcont {
     padding: 50px;
     padding-top: 50px;
    /* Padding top needed for navbar links */
     text-align: center;
     width: 70%;
     margin: 0 auto;
    /* Centers the block horizontally */
}
 @media (max-width: 780px) {
     .block:not(.one):not(.two) {
         text-align: left;
    }
     .d4 {
         text-align: center;
    }
}
 .d1:nth-of-type(odd), .d2:nth-of-type(odd) {
     background: linear-gradient(to right, #cda330, #73622a);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .d1:nth-of-type(even), .d2:nth-of-type(even) {
     background: linear-gradient(to right, #762FC4 ,black 90%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .d1 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-top: 30px;
}
 .d2 {
     font-size: 3.5rem;
     font-weight: 700;
     padding: 13px 0;
}
 .d3 {
     font-size: 1.2rem;
     color: #676767;
}
 .d4 {
     margin: 40px auto;
     width: 135px;
     font-size: 1.3rem;
     padding: 0 10px;
     border-bottom: 2px solid #a3681b;
     transition: 0.2s all ease-in;
     position: relative;
     z-index: 2;
}
 .d4:hover {
     width: 150px;
     color: #ce8524;
     padding: 0 10px;
     border-bottom: 2px solid #ce8524;
}
 .one .d2:first-child {
     margin-top: 150px;
     padding-bottom: 0;
     font-size: 3.5rem;
     font-weight: 400;
     -webkit-text-fill-color: black;
}
 .one .d2:nth-child(2) {
     font-size: 4rem;
     font-weight: 600;
     -webkit-text-fill-color: black;
}
 .one .d3 {
     font-size: 2.5rem;
     font-weight: 400;
    /* margin-bottom: 20vh;
     */
}
 .anigrad {
     font-size: 4.5rem;
     font-weight: 700;
     padding: 13px 0;
     background: url(https://vinylvista.in/assets/images/gradient-gold-luxury-designs_343694-2255.jpg);
     background-size: 40%;
     background-position: 50% 50%;
     -webkit-background-clip: text;
     color: rgba(0,0,0,0.08);
     animation: zoomout-in 10s ease 500ms infinite;
}
 @keyframes zoomout-in {
     0% {
         background-size: 40%;
    }
     50% {
         background-size: 10%;
    }
     100% {
         background-size: 40%;
    }
}
/* ========== images ========= */
 main > img {
     display: block;
     margin: 50px auto;
}
 img[alt="vinyl1"] {
     width: 40%;
     margin: -60px;
}
/* */
 .two {
     position: relative;
     top: -20vh;
     padding: 0;
     display: flex;
     height: 65vh;
     transform-origin: left;
     transform: skewY(-3.5deg);
     overflow: hidden;
}
 .two .fa-play {
     font-size: 2rem;
     color: white;
     margin-top: 30vh;
     transition: all 0.5s ease 
}
 .two .fa-play:hover {
    /*set using javascript*/
}
 .two > button > img {
     width: 50vw;
     visibility: hidden;
}
 .two button {
    /*remove default styling*/
    /*outline: none;
    */
     border: none;
     box-shadow: none;
     transform: skewY(3.5deg);
     transform-origin: right;
     height: 100vh;
     transition: all 0.5s ease;
}
 .two > button:first-child {
     background: url('https://vinylvista.in/assets/images/1d41ea77-73c0-43aa-90d3-70b7dae29e05.webp');
     background-size: 60vw;
     background-position: left 5vh;
     background-attachment: fixed;
     background-repeat: no-repeat;
     margin-top: -50px;
}
 .two > button:last-child {
     background: url('https://vinylvista.in/assets/images/123152aa-6a0b-466e-a5b1-29b0ef38134d.webp');
     background-size: 60vw;
     background-position: right 5vh;
     background-attachment: fixed;
     background-repeat: no-repeat;
     margin-top: -50px;
}
 .two button:hover {
     background-blend-mode: hard-light;
     cursor: pointer;
}
 .two button:first-child:hover {
     background-color: #8974C2;
}
 .two button:last-child:hover {
     background-color: #C6B27B;
}
 @media (max-width: 900px) {
     .two > button:first-child, .two > button:last-child {
         background-size: 80vw;
    }
}
 @media (max-width: 500px) {
     .two > button:first-child, .two > button:last-child {
         background-size: 200vw;
         margin-top: -40px;
    }
     .two {
         margin-top: 200px;
         top: -10vh;
    }
     #block1 {
         display:none;
    }
     .blockforcont {
         padding: 10px;
         padding-top: 40px;
         text-align: center;
         width: 90%;
    }
}
/* ========== modal styling =========*/
 #modal {
     position: fixed;
     background-color: rgba(0,0,0,1);
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 4;
     transition: all 0.5s ease;
     opacity: 0;
     display: none;
}
 #modal span {
     font-size: 40px;
     color: white;
     float: right;
     padding: 10px 20px 0 20px;
     display: none;
     transition: all 0.3s ease;
     cursor: pointer;
}
 #modal span:hover {
     color: #EB0028;
}
 #modal .video-wrapper {
     clear: right;
     position: relative;
     padding-bottom: 56.25%;
    /* 16:9 aspect ratio;
     */
     height: 0;
     display: none;
}
 #modal iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 70%;
     height: 70%;
     margin-left: 15vw;
}
/* ========== more images =========*/
 #block9 img[alt="vinylvista4"] {
     width: 50%;
     visibility: hidden;
     height: 100vh;
}
 #block9 {
     background: url('https://vinylvista.in/assets/images/1c6ae818-d43d-42ba-a333-d97322f81f67.webp');
     background-size: 100vw;
     background-attachment: scroll;
     background-position: center;
}
 #block4, #block5, #block6, #block8, #block9 {
     background-color: #ce8524;
     background-repeat: no-repeat;
     position: relative;
}
 @media (max-width: 768px) {
     #block9 {
         background-size: 400vw;
    }
}
 @media (max-width: 425px) {
     #block4, #block5 {
         background-size: 50vw;
    }
     #block6 {
         background-size: 170vw;
    }
     #block8 {
         background-size: 230vw;
    }
}
 @media (max-width: 375px) {
     #block9 img[src="https://vinylvista.in/assets/images/1c6ae818-d43d-42ba-a333-d97322f81f67.webp"] {
         height: auto;
    }
}
/* ========== skewed borders effect =========*/
 #block4:before, #block4:after, #block5:before, #block5:after, #block6:before, #block6:after, #block8:before, #block8:after, #block9:before {
     position: absolute;
     left: 0;
     content: '';
     width: 100%;
     height: 20vh;
     background: white;
     transform: skewY(-3.5deg);
}
 #block4:before, #block5:before, #block6:before, #block8:before, #block9:before {
     top: 0;
     transform-origin: bottom left;
}
 #block4:after, #block5:after, #block6:after, #block8:after {
     bottom: 0;
     transform-origin: top right;
}
 #block7 {
     margin: 15vh auto;
     width: 80%;
     display: flex;
     align-items: flex-start;
     justify-content: space-around;
     flex-direction: wrap;
}
 #block7 img {
     position: relative;
     max-width: 30%;
}
 #block7 img:nth-of-type(1) {
     margin-top: 260px;
}
 #block7 img:nth-of-type(2) {
     margin-top: 160px;
}
 #block7 img:nth-of-type(3) {
     margin-top: 60px;
}
/* ========== fading in animtions =========*/
/*animation names are set using JS */
 .block:not(.two) {
     position: relative;
     top: -45px;
     z-index: 2;
     animation-duration: 0.9s;
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
     visibility: hidden;
}
 #block7 img {
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
     visibility: hidden;
}
 #block7 img:nth-child(1) {
     animation-delay: 200ms;
     animation-duration: 800ms;
}
 #block7 img:nth-child(2) {
     animation-delay: 100ms;
     animation-duration: 900ms;
}
 #block7 img:nth-child(3) {
     animation-delay: 0;
     animation-duration: 1000ms;
}
 @keyframes fade-in-a {
     0% {
         top: 35px;
         opacity: 0.1;
    }
     100% {
         visibility: unset;
         top: 0px;
         opacity: 1;
    }
}
 #block4, #block5 {
     animation-duration: 1s;
     animation-delay: 100ms;
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
     visibility: hidden;
}
 @keyframes fade-in-b {
     0% {
         background-position: center 35vh;
         opacity: 0.1;
    }
     100% {
         visibility: unset;
         background-position: center 25vh;
         opacity: 1;
    }
}
 .social {
     margin: 1rem;
}
.copyright {
    margin: 1rem;
    font-size: 12px;
}
 .social li {
     display: inline-block;
     margin: 0 auto 10px 10px;
     color: #ce8524;
     transition: color 0.3s ease-in-out;
}
 .social li:hover {
     color: #a3681b;
}
 .links-footer {
     padding: 10px;
    /* Reset padding if necessary */
     margin-top: 10px;
}
 .links-footer li {
     display: inline-block;
     margin: 0 10px;
    /* Adjust margin for better spacing */
     color: #333333;
     transition: color 0.3s ease-in-out;
     position: relative;
}
 .links-footer li::after {
     content: "●";
     position: absolute;
     right: -15px;
    /* Center the divider */
     color: #333333;
    /* Match the color of the text */
     top: 50%;
     transform: translateY(-50%);
}
 .links-footer li:last-child::after {
     content: "";
    /* Remove the divider after the last item */
}
 .links-footer li:hover {
     color: #ce8524;
}
 footer {
     padding: 1rem 0;
     background: #f7f7f7;
     text-align: center;
}
/* dropdown*/
 .dropdown {
     display: inline-block;
     position: relative;
     overflow: hidden;
     height: 28px;
     width: 120px;
     background: #f2f2f2;
     border: 1px solid;
     border-color: white #f7f7f7 whitesmoke;
     border-radius: 3px;
     background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
     background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
     background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
     background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
 .dropdown:before, .dropdown:after {
     content: '';
     position: absolute;
     z-index: 2;
     top: 9px;
     right: 10px;
     width: 0;
     height: 0;
     border: 4px dashed;
     border-color: #888888 transparent;
     pointer-events: none;
}
 .dropdown:before {
     border-bottom-style: solid;
     border-top: none;
}
 .dropdown:after {
     margin-top: 7px;
     border-top-style: solid;
     border-bottom: none;
}
 .dropdown-select {
     position: relative;
     width: 130%;
     margin: 0;
     padding: 6px 8px 6px 10px;
     height: 28px;
     line-height: 14px;
     font-size: 12px;
     color: #62717a;
     text-shadow: 0 1px white;
     background: #f2f2f2;
    /* Fallback for IE 8 */
     background: rgba(0, 0, 0, 0) !important;
    /* "transparent" doesn't work with Opera */
     border: 0;
     border-radius: 0;
     -webkit-appearance: none;
}
 .dropdown-select:focus {
     z-index: 3;
     width: 100%;
     color: #394349;
     outline: 2px solid #49aff2;
     outline: 2px solid -webkit-focus-ring-color;
     outline-offset: -2px;
}
 .dropdown-select > option {
     margin: 3px;
     padding: 6px 8px;
     text-shadow: none;
     background: #f2f2f2;
     border-radius: 3px;
     cursor: pointer;
}
/* Fix for IE 8 putting the arrows behind the select element. */
 .lt-ie9 .dropdown {
     z-index: 1;
}
 .lt-ie9 .dropdown-select {
     z-index: -1;
}
 .lt-ie9 .dropdown-select:focus {
     z-index: 3;
}
/* Dirty fix for Firefox adding padding where it shouldn't. */
 @-moz-document url-prefix() {
     .dropdown-select {
         padding-left: 6px;
    }
}
/* text colour animation*/
 .vxt-text {
     --bg-size: 400%;
     --color-one: #ce8524;
     --color-two: #ead39f;
     margin-top: 40px;
     padding-bottom: 20px;
     font-size: 3.5rem;
     font-weight: 700;
     background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%;
     color: transparent;
     background-clip: text;
}
 @media (prefers-reduced-motion: no-preference) {
     .vxt-text {
         animation: move-bg 10s linear infinite;
    }
     @keyframes move-bg {
         to {
             background-position: var(--bg-size) 0;
        }
    }
}
 .vxt-text-marq {
     --bg-size: 400%;
     --color-one: #ce8524;
     --color-two: #ead39f;
     padding-top: 20px;
     padding-bottom: 20px;
     font-size: 3.5rem;
     font-weight: 400;
     background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%;
     color: transparent;
     background-clip: text;
}
 @media (prefers-reduced-motion: no-preference) {
     .vxt-text-marq {
         animation: move-bg 10s linear infinite;
    }
     @keyframes move-bg {
         to {
             background-position: var(--bg-size) 0;
        }
    }
}
 .marquee {
     position: relative;
     width: 100vw;
     max-width: 100%;
     height: 105px;
     overflow-x: hidden;
     background-color: #333333;
}
 .track {
     position: absolute;
     white-space: nowrap;
     will-change: transform;
     animation: marquee 32s linear infinite;
     text-transform: uppercase;
}
 @keyframes marquee {
     from {
         transform: translateX(0);
    }
     to {
         transform: translateX(-50%);
    }
}
 .links-float {
     position: fixed;
     bottom: 20px;
     right: 20px;
     font-size: 18px;
     font-family: sans-serif;
}
 .links-float a {
     text-decoration: none;
     color: black;
     margin-left: 1em;
}
 .links-float a:hover {
     text-decoration: underline;
}
 .links-float a img.icon {
     display: inline-block;
     height: 1em;
     margin: 0 0 -0.1em 0.3em;
}
 .cookie-box {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     text-align: center;
     padding: 1rem 2rem;
     background: #fff;
     transition: all .75s cubic-bezier(.19,1,.22,1);
     &--hide {
         opacity: 0;
         bottom: -100%;
    }
}
 .cookie-button {
     --bg-size: 400%;
     --color-one: #ce8524;
     --color-two: #ead39f;
     display: inline-block;
     cursor: pointer;
     padding: 0.65rem 0.85rem;
     margin-left: 0.45rem;
     color: #fff;
     font-size: 0.75rem;
     letter-spacing: 1px;
     border: none;
    /* Remove border */
     outline: none;
    /* Remove outline */
     background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%;
}
 @media (prefers-reduced-motion: no-preference) {
     .cookie-button {
         animation: move-bg 10s linear infinite;
    }
     @keyframes move-bg {
         to {
             background-position: var(--bg-size) 0;
        }
    }
}
 .cookie-box--hide {
     display: none;
}
 ::selection {
     background: #ce8524;
    /* Background color of the selection */
     color: #ffffff;
    /* Text color of the selection */
}
 ::-moz-selection {
    /* For Firefox */
     background: #ce8524;
     color: #ffffff;
}