@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /***** General CSS *****/ body {overflow-x: hidden; word-break: break-word; color: var(--textColor); background-color: var(--bodyColor); font: 15px/25px 'Montserrat', sans-serif; } html {overflow-x: hidden; } :root {--black: #000; --white: #fff; --bodyColor: #090909; --themeColor: #1dd0aa; --themeColor2: #b73317; --themeColor2: #b73317; --textColor: #ffffffb3; --headingColor: #081b35; --headingColor2: #0f0e0e; --themeGradient: linear-gradient(0deg, #1dd0aa 0%, #b73317 100%); } a {text-decoration: none; color: #28b16d; white-space: initial; display: inline-block; } a:hover, a:focus {text-decoration: none; color: #393939; } a:hover {transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } input[type="text"]:focus, textarea:focus, input[type="password"]:focus, select:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus {transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; outline: none; } select, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], textarea, input[type="tel"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; } select {background: #fff url('../images/arrow.png') no-repeat right; padding: 0 40px 0 30px; } ::-webkit-input-placeholder {color: var(--white); } ::-moz-placeholder {color: var(--white); opacity: 1; } :-ms-input-placeholder {color: var(--white); } :-moz-placeholder {color: var(--white); opacity: 1; } ul {margin: 0 0 0px; padding: 0; list-style-type: none; } img {max-width: 100% } /***** Font Files *****/ @font-face {font-family: 'Fonts Awesome'; src: url(../fonts/fontawesome-webfont.eot); src: url(../fonts/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff) format("woff"), url(../fonts/fontawesome-webfont.ttf) format("truetype"), url(../fonts/fontawesome-webfont.svg#fontawesome-webfont) format("svg"); font-weight: 400; font-style: normal } @font-face {font-family: 'Fonts Awesome'; src: url(../fonts/fontawesome-webfont.eot); } @font-face {font-family: 'JungleAdventurer'; src: url(../fonts/JungleAdventurer.ttf); } /***** Custom Classes *****/ .noPadding {padding: 0; } .noLeft {padding-left: 0; } .noRight {padding-right: 0; } .mt-5 {margin-top: 50px; } .mb-5 {margin-bottom: 50px; } .mt-8 {margin-top: 80px; } .mt-4 {margin-top: 40px; } .mt-3 {margin-top: 30px; } .mt-2 {margin-top: 20px; } .pt-5 {padding-top: 50px; } .pb-1 {padding-bottom: 10px; } .pb-2 {padding-bottom: 20px; } .pb-3 {padding-bottom: 30px; } .pb-4 {padding-bottom: 40px; } .pb-8 {padding-bottom: 80px; } .m-0 {margin: 0 !important; } .p-0 {padding: 0 !important; } .pt-8 {padding-top: 80px; } .pt-4 {padding-top: 40px; } .pt-3 {padding-top: 30px; } .pt-2 {padding-top: 20px; } .all-section {padding: 80px 0; } .centerCol {float: none; margin: 0 auto; } .d-flex {display: flex; align-items: center; } .over-flow-h {overflow: hidden; } .flexRow {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .flexCol {-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; align-items: center; } h1 {line-height: 1; font-size: 60px; margin: 0 0 0px; font-weight: 500; color: var(--white); font-family: 'JungleAdventurer'; } h2 {line-height: 1; font-size: 50px; margin: 0 0 0px; font-weight: 500; color: var(--white); font-family: 'JungleAdventurer'; } h3 {line-height: 1; font-size: 30px; margin: 0 0 0px; font-weight: 500; color: var(--white); font-family: 'JungleAdventurer'; } h4 {font-size: 24px; margin: 0 0 0px; font-weight: 500; color: var(--white); font-family: 'JungleAdventurer'; } h5 {font-size: 16px; margin: 0 0 0px; font-weight: 500; color: var(--white); font-family: 'JungleAdventurer'; } h6 {margin: 0 0 0px; font-size: 14px; font-weight: 500; color: var(--white); font-family: 'Montserrat'; } p {margin: 0px; font-size: 14px; font-weight: 400; letter-spacing: 0px; color: var(--textColor); font-family: 'Montserrat'; } .theme-btn-1 {gap: 15px; border: none; display: flex; width: fit-content; border-radius: 50px; align-items: center; justify-content: center; padding: 3px 20px 3px 3px; background: linear-gradient(90deg, var(--themeColor) 0%, var(--themeColor2) 100%); cursor: pointer; transition: all 0.3s ease; } .theme-btn-1:hover {box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); } .theme-btn-1 .theme-btn-1-text {font-size: 14px; z-index: 1; font-weight: 500; position: relative; padding: 16px 30px; color: var(--white); border-radius: 50px; text-transform: uppercase; background-color: var(--bodyColor); transition: all 0.3s ease; } .theme-btn-1 .theme-btn-1-text::before {top: 0; right: 0; z-index: -1; width: 80px; content: ''; height: 100%; position: absolute; transition: all 0.3s ease; border-radius: 0px 50px 50px 0px; background-color: var(--bodyColor); } .theme-btn-1:hover .theme-btn-1-text::before {right: -43px; transition: all 0.3s ease; background-color: var(--white); } .theme-btn-1:hover .theme-btn-1-text {padding: 16px 30px; color: var(--themeColor); transition: all 0.3s ease; background-color: var(--white); } .theme-btn-1 img {width: 11px; z-index: 2; height: 10px; position: relative; object-fit: contain; transition: transform 0.3s ease; } .theme-btn-1:hover img {transform: rotate(45deg); } .section-heading {text-align: center; margin-bottom: 25px; } .section-heading h3 {margin: 0px auto; width: fit-content; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .section-heading p {width: 80%; margin: auto; max-width: 950px; } .add-padding {width: 100%; margin: 0px auto; max-width: 1500px; } /* loader */ .loader {--path: var(--themeColor); --dot: var(--themeColor2); --duration: 3s; width: 44px; height: 44px; position: relative; } .loader:before {content: ""; width: 6px; height: 6px; border-radius: 50%; position: absolute; display: block; background: var(--dot); top: 37px; left: 19px; transform: translate(-18px, -18px); animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } .loader svg {display: block; width: 100%; height: 100%; } .loader svg rect, .loader svg polygon, .loader svg circle {fill: none; stroke: var(--path); stroke-width: 10px; stroke-linejoin: round; stroke-linecap: round; } .loader svg polygon {stroke-dasharray: 145 76 145 76; stroke-dashoffset: 0; animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } .loader svg rect {stroke-dasharray: 192 64 192 64; stroke-dashoffset: 0; animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } .loader svg circle {stroke-dasharray: 150 50 150 50; stroke-dashoffset: 75; animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } .loader.triangle {width: 48px; } .loader.triangle:before {left: 21px; transform: translate(-10px, -18px); animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } @keyframes pathTriangle {33% {stroke-dashoffset: 74; } 66% {stroke-dashoffset: 147; } 100% {stroke-dashoffset: 221; } } @keyframes dotTriangle {33% {transform: translate(0, 0); } 66% {transform: translate(10px, -18px); } 100% {transform: translate(-10px, -18px); } } @keyframes pathRect {25% {stroke-dashoffset: 64; } 50% {stroke-dashoffset: 128; } 75% {stroke-dashoffset: 192; } 100% {stroke-dashoffset: 256; } } @keyframes dotRect {25% {transform: translate(0, 0); } 50% {transform: translate(18px, -18px); } 75% {transform: translate(0, -36px); } 100% {transform: translate(-18px, -18px); } } @keyframes pathCircle {25% {stroke-dashoffset: 125; } 50% {stroke-dashoffset: 175; } 75% {stroke-dashoffset: 225; } 100% {stroke-dashoffset: 275; } } #pageLoader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bodyColor); transition: opacity 0.5s ease, visibility 0.5s ease; } #pageLoader.hide {opacity: 0; visibility: hidden; } /* loader */ /*header css start */ .menuSec {padding: 0px 0; } .menuSec img {margin: 0; } .menuSec ul {gap: 2%; margin: 0; padding: 0; display: flex; list-style: none; position: relative; text-align: center; align-items: center; justify-content: center; text-transform: capitalize; } .menuSec ul li {margin: 0; padding: 0; position: relative; display: inline-block; } .menuSec li ul {display: none; } .menuSec ul li a {font-size: 13px; font-weight: 500; padding: 3px 5px; color: var(--white); position: relative; text-decoration: none; display: inline-block; text-transform: uppercase; } .menuSec ul li a::before {bottom: 0; left: 20px; width: 0px; height: 1px; content: ''; position: absolute; transition: ease-in-out; transition-duration: 0.5s; background-color: var(--themeColor); } .menuSec ul li a.active::before {width: 25px; transition: ease-in; transition-duration: 0.5s; } .menuSec ul li a:hover::before {width: 25px; transition: ease-in; transition-duration: 0.5s; } .menuSec ul li a:hover, .menuSec ul li a.active {transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; color: var(--white); } .menuSection {top: 0; left: 0; z-index: 9; width: 100%; padding: 15px 4%; position: absolute; } .menuSection .row {align-items: center; } .header-btn {gap: 10px; display: flex; align-items: center; justify-content: flex-end; } .header-logo {height: 120px; width: fit-content; } .header-logo a, .header-logo a img {width: 100%; height: 100%; object-fit: contain; transition: ease-in-out; transition-duration: 1s; } .header-logo a {perspective: 8000s; } .header-logo a:hover img {transition: ease-in; transition-duration: 1s; transform: rotateY(360deg); } .login-btn {width: 50px; height: 50px; display: flex; font-size: 14px; border-radius: 50%; color: var(--white); align-items: center; transition: ease-in; justify-content: center; transition-duration: 0.5s; background-image: linear-gradient(90deg, rgb(29, 208, 170) 0%, rgb(183, 51, 23) 100%); } .login-btn:hover {color: var(--white); transition: ease-in-out; } .login-btn i {transition: ease-in; transform: rotate(0deg); transition-duration: 0.5s; } .login-btn:hover i {transition: ease-in-out; transform: rotate(360deg); transition-duration: 0.5s; } .goog-te-banner-frame, .goog-logo-link, .goog-te-gadget span, .goog-te-gadget-icon {display: none !important; } .language-switcher {width: 110px; z-index: 9999; flex-shrink: 0; position: relative; font-family: 'Poppins', sans-serif; } .selected-lang {background: var(--headingColor2, #1a1a1a); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12); padding: 10px 18px; border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 600; min-width: 100px; display: flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .selected-lang:hover {transform: translateY(-2px); border-color: var(--themeColor); box-shadow: 0 12px 30px rgba(38, 187, 185, 0.2); } .selected-lang font {width: 20px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } /* The Down Arrow Icon */ .selected-lang::after {content: '\f107'; /* FontAwesome Angle Down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; margin-left: auto; transition: transform 0.3s ease; } .language-switcher.active .selected-lang::after {transform: rotate(180deg); } .lang-dropdown {position: absolute; top: calc(100% + 10px); right: 0; background: var(--headingColor2, #1a1a1a); list-style: none; padding: 8px; margin: 0; border-radius: 15px; display: none; width: 140px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); animation: slideDown 0.3s ease; } .language-switcher.active .lang-dropdown {display: block; } /* Dropdown Items */ .lang-dropdown li {padding: 10px 15px; display: flex; align-items: center; gap: 12px; color: #ccc; font-size: 13px; font-weight: 500; border-radius: 10px; transition: all 0.2s ease; } .lang-dropdown li:hover {background: rgba(38, 187, 185, 0.1); /* Subtle Teal Background */ color: var(--themeColor); } /* Flag Image Styling */ .lang-dropdown img, .selected-lang img {width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Entry Animation */ @keyframes slideDown {from {opacity: 0; transform: translateY(-10px); } to {opacity: 1; transform: translateY(0); } } /*header css start */ /*banner css start */ .main_slider {margin: 0px auto; max-width: 2000px; position: relative; } .main_slider::before {top: 80%; right: -50%; z-index: -1; content: ''; width: auto; height: 100%; opacity: 0.9; position: absolute; filter: blur(300px); aspect-ratio: 1 / 1; background-color: var(--themeColor); animation: scaleUpDown 3s ease-in-out infinite; } @keyframes scaleUpDown {0% {transform: scale(1); } 50% {transform: scale(1.1); } 100% {transform: scale(1); } } .banner-music-bar {left: 0; right: 0; z-index: 2; bottom: 70px; display: flex; margin: 0px auto; max-width: 830px; padding: 10px 40px; position: absolute; color: var(--white); align-items: center; border-radius: 100px; background: #040200; justify-content: space-between; } .banner_text {gap: 10px; z-index: 1; display: flex; max-width: 700px; margin: 0px auto; position: relative; padding: 80px 40px; text-align: center; align-items: center; flex-direction: column; justify-content: center; } .banner_text h1 span {font-size: 100px; } .banner_text h3 {width: fit-content; letter-spacing: 10px; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .music-left h3 {margin: 0; font-size: 22px; letter-spacing: 1px; } .music-left .sub-text {font-size: 14px; color: #777; font-weight: normal; } .music-controls {display: flex; align-items: center; gap: 20px; } .nav-btn {background: none; border: none; color: white; font-size: 18px; cursor: pointer; } .play-btn {border: none; width: 60px; height: 60px; display: flex; font-size: 20px; cursor: pointer; border-radius: 50%; color: var(--white); align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); } /* Volume Section */ .music-volume {width: 300px; justify-content: flex-end; display: flex; align-items: center; gap: 15px; } .music-volume i {width: 20px; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } #volume {-webkit-appearance: none; width: 100px; height: 4px; border-radius: 5px; outline: none; cursor: pointer; } /* 👇 Thumb visible karo (warna user ko feel nahi hota) */ #volume::-webkit-slider-thumb {-webkit-appearance: none; width: 12px; height: 12px; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 80%); border-radius: 50%; cursor: pointer; } .banner_img {height: 850px; display: flex; overflow: hidden; position: relative; align-items: center; justify-content: center; } .banner_img img {width: 100%; height: 100%; object-fit: cover; } .banner_img::before {top: 0; left: 0; content: ''; width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, #09090900 0%, #09090900 50%, #090909ec 100%); } .banner_img::after {top: -25%; left: -30%; width: 60%; content: ''; height: auto; opacity: 0.7; position: absolute; aspect-ratio: 1 / 1; filter: blur(180px); transform: rotate(-26deg); background-color: var(--themeColor2); animation: scaleUpDown 5s ease-in-out infinite; } .inner-banner-sec .banner_img {height: 500px; } .music-left .track_st_vote-row {display: none; } .music-left .track_st_widget>div>img {display: none; } .music-left .track_st_widget #trackProgressWrap {display: none; } .music-left .track_st_track-meta {margin: 0 0 0px; font-weight: 500; font-size: 30px !important; font-family: 'JungleAdventurer'; } .music-volume .controls-holder, .music-volume .box-container.left, .music-volume .box-container.both, .music-volume .other-holder {display: none; } .music-volume .dj-name {flex: none; margin-top: 5%; } .music-volume .dj-container {gap: 10px; } .Listen-bar .banner-music-bar {top: 0; bottom: 0; position: relative; margin-bottom: 40px; } .recent-tracks-box {width: 100vw; max-width: 100%; } .product-page .music-volume .box-container.both {right: 0; top: 180px; width: 800px; display: block; position: absolute; } .recent-tracks-box {height: 750px; } .history-table .history-row:nth-child(odd) {background: var(--headingColor) !important; } .history-table .history-row:nth-child(even) {background: var(--black) !important; } /*banner css end*/ /*about start*/ .about-sec {position: relative; padding: 100px 0px; } .about-sec.pt-10 {padding: 100px 0px 0px; } .about-sec::before {top: 0; left: -20%; height: 100%; width: auto; content: ''; filter: blur(300px); position: absolute; aspect-ratio: 1 / 1; background-color: var(--themeColor2); animation: scaleUpDown 5s ease-in-out infinite; } .about-img {z-index: 1; width: 100%; height: 530px; min-height: 100%; position: relative; } .about-img::before {left: 0; top: 0; z-index: 0; width: 100%; content: ''; height: 100%; position: absolute; border-radius: 20px; transform: rotate(-4deg); animation: floatBefore 8s ease-in-out infinite; background: linear-gradient(0deg, var(--themeColor) 0%, var(--themeColor2) 100%); } @keyframes floatBefore {0% {transform: rotate(-4deg); } 50% {transform: rotate(4deg); } 100% {transform: rotate(-4deg); } } @keyframes floatImg {0% {transform: rotate(4deg); } 50% {transform: rotate(-4deg); } 100% {transform: rotate(4deg); } } .about-img img {width: 100%; height: 100%; object-fit: contain; border-radius: 20px; transform: rotate(4deg); background-color: var(--white); animation: floatImg 8s ease-in-out infinite; } .about-text {gap: 10px; z-index: 1; display: flex; min-height: 100%; position: relative; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 20px 40px 0px; } .about-text h2 span {font-family: 'Montserrat'; } .about-text p {font-size: 14px; margin-bottom: 20px; font-family: 'Montserrat'; } .about-text h3 {color: var(--themeColor2); } .about-text .section-sub-heading {width: fit-content; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .about-text ul li {display: flex; align-items: center; gap: 10px; padding-bottom: 13px; } .about-text ul li p {margin: unset; } .about-sec.pt-10.pb-10 {padding: 100px 0px; } /*about end*/ /* product-sec */ .product-sec {overflow-x: hidden; position: relative; padding: 100px 0px; } .product-heading {display: flex; align-items: center; justify-content: space-between; } .product-heading-text {max-width: 510px; } .product-slider-btn {gap: 10px; display: flex; align-items: center; justify-content: flex-end; } .product-slider-btn button {width: 45px; height: 45px; display: flex; border-radius: 50%; align-items: center; transition: ease-in-out; color: var(--themeColor); background: var(--white); justify-content: center; transition-duration: 0.5s; border: 1px solid var(--themeColor); } .product-slider-btn button:hover {transition: ease-in; color: var(--white); transition-duration: 0.5s; background: linear-gradient(90deg, var(--themeColor2) 0%, var(--themeColor) 100%); } .productSlider .slick-slide {opacity: 1; margin: 0px 30px; } .productSlider .slick-prev, .productSlider .slick-next {top: unset; width: 60px; height: 60px; bottom: -110px; border-radius: 50%; transition: ease-in-out; transition-duration: 0.5s; border: 1px solid var(--white); } .productSlider .slick-prev:hover, .productSlider .slick-next:hover {transition: ease-in; transition-duration: 0.5s; background-color: var(--white); } .productSlider .slick-prev::before, .productSlider .slick-next::before {content: '\f060'; color: var(--white); transition: ease-in-out; transition-duration: 0.5s; font-family: 'FontAwesome'; } .productSlider .slick-prev:hover::before, .productSlider .slick-next:hover::before {transition: ease-in; color: var(--themeColor); transition-duration: 0.5s; } .productSlider .slick-next::before {content: '\f061'; } .productSlider .slick-list {overflow: visible; } .product-box {gap: 100px; width: 100%; padding: 25px; display: flex; overflow: hidden; min-height: 385px; position: relative; border-radius: 10px; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .product-box img {top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; position: absolute; object-position: top; } .product-box-text {padding: 20px; max-width: 370px; overflow: hidden; position: relative; border-radius: 10px; background-color: var(--bodyColor); } .product-box-text::before {top: 60%; left: 70%; content: ''; height: 70%; width: auto; filter: blur(80px); position: absolute; aspect-ratio: 1 / 1; background-color: var(--themeColor); animation: scaleUpDown 5s ease-in-out infinite; } .product-box-text::after {top: -10%; left: -10%; content: ''; height: 50%; width: auto; filter: blur(60px); position: absolute; aspect-ratio: 1 / 1; background-color: var(--themeColor2); animation: scaleUpDown 5s ease-in-out infinite; } .product-box-text h3 {z-index: 1; position: relative; color: var(--white); } .product-box-text h3 span {display: block; font-size: 16px; margin: 5px 0px 10px; font-family: 'Montserrat'; } .product-box-text p {z-index: 1; opacity: 0.8; overflow: hidden; position: relative; margin-bottom: 20px; color: var(--white); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .product-box-text a {z-index: 1; position: relative; font-size: 16px; color: var(--white); } .product-slider-box {position: relative; } .product-page .product-box {margin-bottom: 30px; } /* product-sec */ /* chance-sec */ .chance-sec {padding: 100px 0px; position: relative; background-image: url(../images/new-chance-bg.webp); background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .chance-sec::before {top: 0; left: 0; content: ''; width: 1000%; height: 100%; position: absolute; background: linear-gradient(100deg, rgba(9, 9, 9, 0.93) 0%, rgb(9 9 9 / 0%) 50%, rgba(9, 9, 9, 0.94) 100%); background-size: contain; } .chance-text {gap: 20px; z-index: 1; display: flex; text-align: center; position: relative; align-items: center; flex-direction: column; justify-content: center; } .chance-text h3 {width: fit-content; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .chance-text p {opacity: 0.8; max-width: 900px; color: var(--white); } /* chance-sec */ /* why-choose-sec */ .why-choose-sec {padding: 100px 0px; position: relative; } .why-choose-sec::after {top: 50%; z-index: -1; left: -40%; height: 70%; width: auto; content: ''; position: absolute; filter: blur(300px); aspect-ratio: 1 / 1; background-color: var(--themeColor2); animation: scaleUpDown 5s ease-in-out infinite; } .why-choose-sec::before {top: -10%; z-index: -1; right: -50%; height: 70%; width: auto; content: ''; opacity: 0.5; position: absolute; filter: blur(300px); aspect-ratio: 1 / 1; background-color: var(--themeColor); animation: scaleUpDown 5s ease-in-out infinite; } .why-choose-img {width: 100%; height: 480px; overflow: hidden; position: relative; border-radius: 15px; } .why-choose-img>img {width: 100%; height: 100%; object-fit: cover; } .why-choose-heading {top: 0; left: 0; padding: 30px 25px; width: fit-content; position: absolute; border-radius: 0px 0px 10px 0px; background-color: var(--bodyColor); } .why-choose-heading h3 {width: fit-content; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .why-choose-text {padding: 40px 0px; } .why-choose-text h5 {font-size: 16px; margin-bottom: 30px; font-family: 'Montserrat'; text-transform: capitalize; } .why-choose-text p {margin-bottom: 30px; } .why-choose-text ul {columns: 2; } .why-choose-text ul li {gap: 15px; display: flex; margin-bottom: 20px; align-items: baseline; justify-content: flex-start; } .why-choose-text ul li img {top: 5px; width: 28px; height: 22px; flex-shrink: 0; position: relative; object-fit: contain; } .why-choose-text ul li h6 {text-transform: uppercase; } .why-choose-img-2 {width: 90%; z-index: 1; height: 440px; display: flex; padding: 10px; margin-top: -100px; position: relative; border-radius: 16px; background-color: var(--bodyColor); flex-direction: row; flex-wrap: wrap; } .why-choose-img-2 img {width: 50%; height: 210px; object-fit: cover; border-radius: 0px; } .why-choose-img-2.home-why-choose-img-2 img {height: 100%; width: 100%; border-radius: 5px; } /* why-choose-sec */ /* account sec */ .account-sec {padding: 100px 0px; } section.account-sec .waraper h5 {color: var(--themeColor); font-size: 42px; font-weight: 600; line-height: 40px; text-align: center; margin-bottom: 10px; } section.account-sec .form {padding: 50px 30px; border-radius: 10px; transition: ease-in 0.5s; background-color: var(--white); box-shadow: 0px 0px 16px 0px rgba(63, 63, 63, 0.15); } section.account-sec .form:hover {transition: ease-in 0.5s; background-color: var(--themeColor); } section.account-sec .form h5 {font-size: 40px; color: var(--headingColor2); text-align: center; margin-bottom: 15px; } section.account-sec .form:hover h5 {color: var(--white); transition: ease-in 0.5s; } section.account-sec .form:hover button {color: #013220; transition: ease-in 0.5s; background-color: var(--white); } section.account-sec .form:hover input, section.account-sec .form:hover select {border-radius: 5px; color: var(--white); transition: ease-in 0.5s; background-color: transparent; border: 1px solid var(--white); } section.account-sec .form:hover select option {color: var(--black); } section.account-sec .form:hover input::placeholder {color: var(--white); transition: ease-in 0.5s; } section.account-sec .form:hover .form-check label {color: var(--white); transition: ease-in 0.5s; } section.account-sec .form:hover .forget a.bnts {color: var(--white); transition: ease-in 0.5s; } section.account-sec .form:hover .para p, section.account-sec .form:hover .para p a {color: var(--white); transition: ease-in 0.5s; } section.account-sec .form input, section.account-sec .form select {width: 100%; margin: 12px 0px; padding: 14px 20px; color: #59564f; border-radius: 10px; background-color: var(--white); transition: ease-in 0.5s; border: 1px solid #e0dcdc; } section.account-sec .form input::placeholder {font-size: 16px; transition: ease-in 0.5s; color: #59564f; } section.account-sec .form button {width: 100%; border: 0px; font-size: 16px; padding: 12px 0; transition: 0.4s; font-weight: 500; border-radius: 10px; color: var(--white); transition: ease-in 0.5s; text-transform: uppercase; background-color: var(--themeColor); } section.account-sec .form button#login {margin: 10px 0px; } section.account-sec .form:hover .toggle-password {color: var(--white); } .toggle-password {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer; color: var(--black); } section.account-sec .form-check input#rememberMe {width: auto; padding: 8px; margin-right: 10px; border-radius: 0px; transition: ease-in 0.5s; border: 1px solid #f2f2f2; background-color: var(--white); } section.account-sec .form-check label {font-size: 16px; margin-bottom: 0px; transition: ease-in 0.5s; color: #a7a7a7; } section.account-sec .forget {display: flex; justify-content: space-between; transition: ease-in 0.5s; align-items: center; } section.account-sec .form-check {padding-left: 0px !important; transition: ease-in 0.5s; } section.account-sec .form button:hover {color: var(--white); transition: ease-in 0.5s; background-color: transparent; border: 1px solid var(--white); } section.account-sec .forget a.bnts {font-size: 16px; color: #a7a7a7; transition: ease-in 0.5s; } section.account-sec .forget a.bnts:hover {color: var(--black); } section.account-sec .form-check input#rememberMe:focus {outline: 0px !important; box-shadow: unset; } section.account-sec .form-check-input:checked[type="checkbox"] {filter: brightness(0); background-color: transparent !important; transition: ease-in 0.5s; } section.account-sec .form .para p {font-size: 14px; color: var(--black); margin-bottom: 16px; transition: ease-in 0.5s; padding-left: 3px; } section.account-sec .form .para p a {font-weight: 600; transition: 0.4s; color: var(--themeColor); text-decoration: underline; } section.account-sec .form .para p a:hover {color: var(--white); transition: ease-in 0.5s; } /* Forget Password Modal */ .modal-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .modal-overlay.show {display: flex; opacity: 1; } .modal-content {background-color: var(--white); padding: 0; border-radius: 15px; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); transform: scale(0.7); transition: transform 0.3s ease; } .modal-overlay.show .modal-content {transform: scale(1); } .modal-header {padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; } .modal-header h5 {margin: 0; font-size: 24px; color: var(--black); text-transform: uppercase; } .close-modal {font-size: 32px; font-weight: 300; color: #999; cursor: pointer; line-height: 1; transition: color 0.3s ease; } .close-modal:hover {color: var(--themeColor); } .modal-body {padding: 30px; } .modal-body p {margin-bottom: 20px; color: var(--headingColor); font-size: 14px; } .modal-body input[type="email"] {width: 100%; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: var(--black); margin-bottom: 20px; transition: border-color 0.3s ease; } .modal-body input::placeholder {color: var(--black); } .modal-body input[type="email"]:focus {border-color: var(--themeColor); outline: none; color: var(--black); } .modal-body .reset-btn {width: 100%; padding: 15px 20px; background-color: var(--themeColor); color: var(--white); border: none; border-radius: 8px; font-size: 16px; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .modal-body .reset-btn:hover {background-color: #c19a6f; transform: translateY(-2px); } /* account sec */ /* FAQ Page Start */ .accordion-body.gorrila-page-txt {padding: 0px 20px 20px; border-top: none; color: var(--white); background: var(--themeColor); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .gorilla-content .accordion-item {border: none; margin: 10px 0; border-bottom: 1px solid #c7cbcf; } .gorilla-content .accordion-button:not(.collapsed) {box-shadow: none; height: 60px; font-size: 21px; font-weight: 500; background: unset; color: var(--white); text-transform: capitalize; border-bottom: 0 !important; background: var(--themeColor); } .faqs-main .accordion-collapse.collapse {border-top: 0 !important; border-radius: 0 0 5px 5px !important; /* margin-bottom: 30px; */ /* border-radius: 0 !important; */ } .gorilla-content button:focus:not(:focus-visible) {box-shadow: none; } .gorilla-content .accordion-button::after {top: 15px; width: 30px; right: 20px; height: 30px; display: flex; font-size: 14px; font-weight: 600; content: "\f078"; position: absolute; color: var(--white); border-radius: 50%; align-items: center; justify-content: center; background-image: none; font-family: "Font Awesome 5 free"; background-color: var(--themeColor2); } .faqs-main .accordion-button:not(.collapsed)::after {top: 20px; content: "\f078"; font-weight: 900; color: var(--white); font-family: "Font Awesome 5 free"; } .address {text-align: center; font-weight: bold; font-size: 20px; } .contact-main h2 {font-size: 45px; color: #000; line-height: 45px; padding-bottom: 15px; font-weight: 400; } section.faqs-main p {font-size: 14px; font-weight: 500; color: var(--white); } section.faqs-main p a {color: var(--white); border-bottom: 1px solid var(--themeColor2); } .faqs-main {padding: 100px 0; } .faqs-main button.accordion-button.collapsed {border: none; height: 60px; font-size: 20px; border-radius: 0px; padding: 20px 20px; color: var(--white); text-transform: capitalize; background: var(--themeColor); } /* FAQ Page End */ /*contact-section start*/ section.contact-sec {padding: 0px 0px 100px; } .contact-input {width: 100%; height: 60px; display: block; position: relative; margin-bottom: 20px; border-radius: 10px; background-color: unset; border: 1px solid #ffffff63; } .contact-sec.pt-10 {padding: 100px 0px; } .contact-input::before {top: 0; right: 0%; width: 100%; height: 100%; content: ''; padding: 1px; position: absolute; border-radius: 10px; background: linear-gradient(30deg, var(--themeColor2), #ffffff63, #ffffff63, #ffffff63, #ffffff63, var(--themeColor2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: 0.3s; } .contact-input:focus-within::before {opacity: 1; } .contact-input input:-internal-autofill-selected {background-color: transparent; } .contact-input:focus-within {border-color: transparent; } .contact-input input {width: 100%; border: none; outline: none; height: 60px; padding: 15px 20px; background-color: unset; color:#fff; } .cont-form input::placeholder {font-size: 14px; color: #8e8a80; } .cont-form textarea::placeholder {font-size: 14px; color: #8e8a80; } .cont-form textarea {resize: none; width: 100%; height: 130px; padding: 15px 12px; border-radius: 10px; margin-bottom: 20px; background-color: unset; border: 1px solid #e1dbca; color:#fff; } .cont-img {margin-top: 20px; } section.contact-sec .container {position: relative; } .cont-txt .section-sub-heading {margin-bottom: 5px; width: fit-content; background: linear-gradient(90deg, var(--themeColor) 30%, var(--themeColor2) 100%); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .cont-txt h2 span {font-family: 'Montserrat'; } .cont-img iframe {width: 100%; height: 370px; object-fit: cover; border-radius: 10px; filter: grayscale(1); } .cont-txt p {width: 75%; font-size: 14px; } /*contact-section end*/ /* footer sec */ .footerSec {padding: 60px 4% 0px; background-color: var(--black); } .footer-btm {border-top: 1px solid #ffffff4d; } .copy-txt {padding: 30px 0px; text-align: center; } .copy-txt p {font-weight: 500; } .footer-logo-box {min-height: 100%; padding: 30px 40px 40px 0px; border-right: 1px solid #ffffff4d; } .footer-log {width: 80px; height: 100px; display: block; margin-bottom: 30px; } .footer-log img {width: 100%; height: 100%; object-fit: contain; } .footer-logo-box h3 {margin-bottom: 25px; } .footer-logo-box ul {columns: 2; } .footer-logo-box ul li a {font-size: 14px; font-weight: 500; line-height: 30px; margin-bottom: 10px; color: var(--white); text-transform: uppercase; } .newsletter-box {margin-right: 15px; padding: 40px 0px 60px 10%; border-bottom: 1px solid #ffffff4d; } .newsletter-box h3 {margin-bottom: 5px; } .newsletter-box p {max-width: 650px; margin-bottom: 30px; } .newsletter-box form {width: 100%; padding: 4px; display: flex; align-items: center; border-radius: 50px; border: 1px solid #ffffff4d; justify-content: space-between; } .newsletter-box form input {width: 100%; height: 55px; padding: 10px 30px; background-color: transparent; border: 1px solid transparent; } .newsletter-box form input::placeholder {text-transform: uppercase; } .newsletter-box form button {height: 55px; border: none; flex-shrink: 0; font-size: 14px; padding: 10px 40px; color: var(--white); border-radius: 50px; text-transform: uppercase; background-image: linear-gradient(90deg, rgb(29, 208, 170) 0%, rgb(183, 51, 23) 100%); } .play-store {padding: 30px; } .play-store h3 {margin-bottom: 30px; } .play-store ul {gap: 10px; display: flex; align-items: center; margin-bottom: 30px; justify-content: flex-start; } .play-store ul li img {height: 50px; object-fit: contain; } .cont-form .call-us-a, .header-btn .call-us-a {gap: 10px; display: flex; font-size: 16px; font-weight: 500; color: var(--white); align-items: center; justify-content: flex-start; } .cont-form .call-us-a h5 span {display: block; font-family: 'Montserrat'; } .cont-form .call-us-a i, .header-btn .call-us-a i {width: 45px; height: 45px; display: flex; font-size: 14px; border-radius: 50%; color: var(--white); align-items: center; transition: ease-in; justify-content: center; transition-duration: 0.5s; background-image: linear-gradient(90deg, rgb(29, 208, 170) 0%, rgb(183, 51, 23) 100%); } .follow-box {gap: 30px; display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; padding: 25px 15px 25px 10%; border-right: 1px solid #ffffff4d; } .follow-box ul {gap: 10px; display: flex; align-items: center; justify-content: center; } .follow-box ul li a {width: 50px; height: 50px; display: flex; border-radius: 50%; color: #ffffff4d; align-items: center; transition: ease-in-out; background: transparent; justify-content: center; transition-duration: 0.5s; border: 1px solid #ffffff4d; } .follow-box ul li a:hover {color: var(--white); border: transparent; transition: ease-in; transition-duration: 0.5s; background-image: linear-gradient(90deg, rgb(29, 208, 170) 0%, rgb(183, 51, 23) 100%); } .newstyl .product-box-text p {display: block !important; } /* footer sec */ .slicknav_nav a:hover {color: var(--themeGradient); background: var(--themeGradient); } /*Media Query Start*/ @media only screen and (min-width: 1366px) and (max-width: 1599px) {.menuSec ul li a {padding: 3px 10px; } .menuSec ul {gap: 1%; } .menuSection {padding: 15px 1%; } .cont-form .call-us-a, .header-btn .call-us-a {font-size: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1365px) {.menuSection .container-fluid.add-padding {max-width: 100%; } .menuSec ul {gap: 0; } .menuSec ul li a {font-size: 13px; padding: 3px 12px; } .cont-form .call-us-a, .header-btn .call-us-a {font-size: 12px; white-space: nowrap; } .login-btn {width: 40px; height: 40px; } .cont-form .call-us-a i, .header-btn .call-us-a i {width: 40px; height: 40px; } .banner_text h1 span {font-size: 80px; } h1 {font-size: 50px; } .menuSection {padding: 15px 1%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) {.inner-banner-sec .banner_img {height: 390px; } .menuSection {padding: 15px 1%; } .cont-form .call-us-a, .header-btn .call-us-a {font-size: 12px; white-space: nowrap; } .menuSec ul {gap: 0%; } .menuSec ul li a {font-size: 14px; padding: 3px 5px; } .header-logo {height: 80px; } .banner_text {padding: 60px 10px; } section.main_slider.inner-banner-sec .banner_text {margin-top: 30px; } .music-left .track_st_track-meta {font-size: 20px !important; } .banner_text h1 span {font-size: 65px; } h1 {font-size: 45px; } h3 {font-size: 25px; } .banner_img {height: 650px; } .banner-music-bar {bottom: 25px; } .product-sec {padding: 70px 0px; } .productSlider .slick-prev, .productSlider .slick-next {top: unset; width: 40px; height: 40px; bottom: -60px; } .productSlider .slick-prev:before, .productSlider .slick-next:before {font-size: 15px; } .about-sec {padding: 70px 0px; } h2 {font-size: 30px; } .about-text p {font-size: 12px; margin-bottom: 15px; line-height: 20px; } p {font-size: 12px; line-height: 20px; } .chance-sec {padding: 70px 0px; } h6 {font-size: 12px; } .why-choose-img-2 {width: 98%; padding: 6px; height: 360px; margin-top: -30px; } .why-choose-text {padding: 20px 0px; } .why-choose-text p {margin-bottom: 15px; } .why-choose-sec {padding: 70px 0px; } .footer-logo-box {padding: 20px 20px 30px 0px; } .footer-logo-box ul li a {font-size: 12px; } section.contact-sec {padding: 0px 0px 70px; } .faqs-main {padding: 70px 0; } .contact-sec.pt-10 {padding: 70px 0px; } .product-page .music-volume .box-container.both {right: -30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) {.inner-banner-sec .banner_img {height: 390px; } .menuSection {padding: 15px 1%; } .cont-form .call-us-a, .header-btn .call-us-a {font-size: 12px; white-space: nowrap; } .menuSec ul {gap: 0%; justify-content: flex-start; } .menuSec ul li a {font-size: 12px; padding: 3px 3px; } .music-left>div {max-width: 200px; } .header-logo {height: 80px; } .banner_text {padding: 60px 10px; } section.main_slider.inner-banner-sec .banner_text {margin-top: 30px; } .music-left .track_st_track-meta {font-size: 20px !important; } .banner_text h1 span {font-size: 60px; } h1 {font-size: 40px; } h3 {font-size: 25px; } .banner_img {height: 650px; } .banner-music-bar {bottom: 25px; max-width: 95%; } .product-sec {padding: 60px 0px; } .productSlider .slick-prev, .productSlider .slick-next {top: unset; width: 40px; height: 40px; bottom: -60px; } .productSlider .slick-prev:before, .productSlider .slick-next:before {font-size: 15px; } .about-sec {padding: 60px 0px; } h2 {font-size: 30px; } .about-text p {font-size: 12px; margin-bottom: 15px; line-height: 20px; } p {font-size: 12px; line-height: 20px; } .chance-sec {padding: 60px 0px; } h6 {font-size: 12px; } .why-choose-img-2 {width: 98%; padding: 6px; height: 360px; margin-top: -30px; } .why-choose-text {padding: 20px 0px; } .why-choose-text p {margin-bottom: 15px; } .why-choose-sec {padding: 60px 0px; } .footer-logo-box {padding: 20px 20px 30px 0px; } .footer-logo-box ul li a {font-size: 12px; } section.contact-sec {padding: 0px 0px 60px; } .faqs-main {padding: 60px 0; } .contact-sec.pt-10 {padding: 60px 0px; } .product-page .banner-music-bar {max-width: 100%; } .product-page .music-volume .box-container.both {width: 660px; } .recent-tracks-box {height: 650px; } } @media only screen and (min-width: 576px) and (max-width: 767px) {.banner_img {height: 400px; } .banner_text h1 span {font-size: 45px; } .banner_text {padding: 40px 20px; max-width: 100%; } .music-left .track_st_track-meta {font-size: 12px !important; text-align: center; width: fit-content; margin: 0 auto; } .banner-music-bar {width: 100%; padding: 10px; } .music-volume {width: 100%; display: flex; align-items: center; justify-content: center; margin: 0px 30px 0px 0px; } .music-controls {justify-content: center; } .music-left>div {max-width: 220px; } .banner-music-bar {width: 95%; bottom: 0px; flex-wrap: wrap; position: relative; border-radius: 10px; } .track_st_widget.text-centered {max-width: 90%; } .banner_text h3 {font-size: 27px; } .banner_text p {font-size: 12px; line-height: 21px; } .banner_text h1 {font-size: 37px; } .product-sec {padding: 40px 0px 0px; } .productSlider .slick-prev, .productSlider .slick-next {z-index: 1; left: -10px; width: 35px; height: 35px; bottom: 120px; } .productSlider .slick-prev:before, .productSlider .slick-next:before {font-size: 12px; } .productSlider .slick-next {left: auto; right: -10px; } .about-sec {padding: 40px 0px; } .why-choose-text ul {column-count: 1; margin-bottom: 20px; } .why-choose-text ul li img {padding-bottom: 9px; } .why-choose-text ul li h6 {font-size: 12px; } .why-choose-sec {padding: 40px 0px 0px; } .play-btn {height: 40px; width: 40px; font-size: 12px; } section.contact-sec {padding-bottom: 40px; } .why-choose-img-2 {width: 100%; padding: 5px; margin-top: 0px; } .menuSection {padding: 10px 2%; position: relative; } .slicknav_menu {position: relative; z-index: 9999; display: block; } section.main_slider.inner-banner-sec .banner_img {height: 350px; } .contact-sec.pt-10 {padding-top: 10px; } .faqs-main button.accordion-button.collapsed {height: 50px; font-size: 12px; padding: 10px 20px; } .faqs-main {padding: 0px 0px 40px; } .header-logo {height: 70px; } h2 {font-size: 30px; } h3 {font-size: 25px; } .about-text {gap: 5px; padding: 20px 10px 20px 0px; } p, .about-text p {font-size: 12px; line-height: 20px; } .about-img {height: 350px; } .chance-sec {padding: 40px 0px; } .why-choose-text {padding: 20px 0px; } .why-choose-heading {padding: 20px 15px; } .why-choose-img {height: 300px; } .why-choose-text ul li {gap: 10px; margin-bottom: 0px; } .why-choose-text ul li img {top: 9px; } .why-choose-text p {margin-bottom: 15px; } .footerSec {padding: 40px 1% 0px; } .footer-logo-box {border-right: none; padding: 20px 20px 20px 0px; } .follow-box {gap: 20px; border-right: none; padding: 15px 5px 15px 10px; } .footer-logo-box ul li a {font-size: 12px; } .play-store {padding: 10px; } .copy-txt {padding: 15px 0px; } .about-sec.pt-10 {padding: 10px 0px 0px; } .history-col.title-col {font-size: 12px; line-height: 20px; } .gorilla-content .accordion-button::after {top: 12px; width: 25px; right: 15px; height: 25px; font-size: 10px; } .Listen-bar .banner-music-bar #sc-player {width: 50% !important; } .product-page .music-volume .box-container.both {right: -160px; max-width: 550px; } section.main_slider.inner-banner-sec {display: flex; min-height: 350px; align-items: center; justify-content: center; } } @media only screen and (min-width: 0px) and (max-width: 575px) {.banner_img {height: 400px; } .banner_text h1 span {font-size: 45px; } .banner_text {padding: 40px 20px; max-width: 100%; } .music-left .track_st_track-meta {font-size: 22px !important; text-align: center; width: fit-content; margin: 0 auto; } .banner-music-bar {width: 100%; padding: 10px; flex-wrap: wrap; } .music-volume {gap: 10px; width: 65%; display: flex; margin: 0 auto; align-items: center; flex-direction: row; } .music-controls {justify-content: center; } .music-controls {display: flex; gap: 10px; } .banner-music-bar {width: 95%; bottom: 0px; position: relative; border-radius: 10px; } .track_st_widget.text-centered {max-width: 90%; } .banner_text h3 {font-size: 27px; } .banner_text p {font-size: 12px; line-height: 21px; } .banner_text h1 {font-size: 37px; } .product-sec {padding: 40px 0px 0px; } .productSlider .slick-prev, .productSlider .slick-next {z-index: 1; left: -10px; width: 35px; height: 35px; bottom: 120px; } .productSlider .slick-prev:before, .productSlider .slick-next:before {font-size: 12px; } .productSlider .slick-next {left: auto; right: -10px; } .about-sec {padding: 40px 0px; } .why-choose-text ul {column-count: 1; margin-bottom: 20px; } .why-choose-text ul li img {padding-bottom: 9px; } .why-choose-text ul li h6 {font-size: 12px; } .why-choose-sec {padding: 40px 0px 0px; } .play-btn {height: 35px; width: 35px; font-size: 10px; } .nav-btn {padding: 0px; font-size: 10px; } section.contact-sec {padding-bottom: 40px; } .why-choose-img-2 {width: 100%; padding: 5px; margin-top: 0px; } .menuSection {padding: 10px 2%; position: relative; } .slicknav_menu {position: relative; z-index: 9999; display: block; } section.main_slider.inner-banner-sec .banner_img {height: 350px; } .contact-sec.pt-10 {padding-top: 10px; } .faqs-main button.accordion-button.collapsed {height: 50px; font-size: 12px; padding: 10px 20px; } .faqs-main {padding: 0px 0px 40px; } .header-logo {height: 80px; display: flex; align-items: center; margin: 0px auto 15px; justify-content: center; } h2 {font-size: 30px; } h3 {font-size: 25px; } .about-text {gap: 5px; padding: 20px 10px 20px 0px; } p, .about-text p {font-size: 12px; line-height: 20px; } .about-img {height: 350px; } .chance-sec {padding: 40px 0px; } .why-choose-text {padding: 20px 0px; } .why-choose-heading {padding: 20px 15px; } .why-choose-img {height: 300px; } .why-choose-text ul li {gap: 10px; margin-bottom: 0px; } .why-choose-text ul li img {top: 9px; } .why-choose-text p {margin-bottom: 15px; } .footerSec {padding: 40px 1% 0px; } .footer-logo-box {border-right: none; padding: 20px 20px 20px 0px; } .follow-box {gap: 20px; border-right: none; padding: 15px 5px 15px 10px; } .footer-logo-box ul li a {font-size: 12px; } .play-store {padding: 10px; } .copy-txt {padding: 15px 0px; } .about-sec.pt-10 {padding: 10px 0px 0px; } .product-page .music-volume .box-container.both {max-width: 92vw; right: -30px; } .history-col.title-col {font-size: 12px; line-height: 20px; } .gorilla-content .accordion-button::after {top: 12px; width: 25px; right: 15px; height: 25px; font-size: 10px; } .Listen-bar .banner-music-bar #sc-player {width: 100% !important; } .music-volume .dj-container {justify-content: center; margin-right: -10px; } .cont-form .call-us-a, .header-btn .call-us-a {font-size: 14px; white-space: nowrap; } #volume {width: 50px; } .menuSection .row {justify-content: center; } .header-btn {justify-content: space-between; } .banner_img {top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .main_slider {padding: 0px 0px 40px 0px; } .music-left>div {width: 90vw !important; } section.main_slider.inner-banner-sec {display: flex; min-height: 350px; align-items: center; justify-content: center; } .dj-container .dj-holder {max-width: 40px; max-height: 40px; width: 40px; min-width: 40px; } } /*Media Query End*/ .thankyou-popup{position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9999; } .thankyou-box{background: #000; padding:30px; max-width: 450px; margin:auto; text-align:center; border-radius:8px; position:relative; top: 50%; transform: translateY(-50%); } .thankyou-box p {color: #cdcdcd; font-size: 16px; line-height: 1.6; font-weight: 300; width: 100%; margin: 20px auto 30px; } .thankyou-box h2 {font-size: 40px; color: #000; font-weight: 300; line-height: 1.2; margin-bottom: 20px; } .close-popup{position:absolute; right:15px; top:10px; font-size:22px; cursor:pointer; } .close-btn{margin: 0 auto; border: none; cursor:pointer; } .contact_sec .reach_box img {height: 30px; object-fit: contain; width: 100%; } .thankyou-box button.close-btn.theme_btn{background-image: linear-gradient(90deg, rgb(29, 208, 170) 0%, rgb(183, 51, 23) 100%); padding: 12px 40px; border-radius: 30px; color: #fff; font-size: 20px; font-weight: 600; } /* Autofill hone par input ki default styling ko barkarar rakhne ke liye */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {/* Yeh aapke input ka jo bhi default background color hai, use hi check rakhega */ -webkit-box-shadow: 0 0 0 1000px inherit inset !important; /* Yeh aapke input ka default text color maintain rakhega */ -webkit-text-fill-color: #fff !important; /* Browser ke custom font-style ko override hone se rokne ke liye */ font-family: inherit !important; font-size: inherit !important; /* Background color change ko smooth ya block karne ke liye */ transition: background-color 5000s ease-in-out 0s; }