/*---------------------------------------------" // Template Name: Teach Me // Description: Teach Me Html Template // Version: 1.0.0 =============================================== STYLE SHEET INDEXING | |___ Fonts |___ Variables |___ Responsive |___ Reset Styles |___ Spacing |___ Helper Classes |___ Buttons |___ Headings |___ Layout Styles |___ END STYLE SHEET INDEXING --------------------------------------------*/ /*------------------------- Fonts -------------------------*/ @import url("css2.css"); /*------------------------- Variables -------------------------*/ /* Fonts */ /* Colors */ /* Transitions */ /* Border-Radius */ /* Gap */ /*------------------------- Responsive Styles -------------------------*/ /*------------------------- Reset Styles -------------------------*/ img { max-width: 100%; height: auto; vertical-align: middle; } ul.list-style, ol.list-style { padding: 0; } ul.list-style li::marker, ol.list-style li::marker { color: #ACFC00; } .unstyled { padding-left: 0; list-style: none; margin-bottom: 0; } .container-fluid { padding-right: calc(var(--bs-gutter-x) * 0.75); padding-left: calc(var(--bs-gutter-x) * 0.75); } @media (min-width: 1200px) { .container-fluid { padding: 0 5vw; width: 100%; } } @media (max-width: 575px) { .container-fluid { --bs-gutter-x: 2rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); } } .page-content { margin: clamp(14px, 1.198vw, 40px) 0; } #scroll-container { overflow-x: hidden; } /*------------------------- Typography -------------------------*/ html { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; color: #45474F; background: linear-gradient(181deg, #000003 -21.32%, #08091B 99.02%); vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: clamp(16px, 0.938vw, 32px); font-weight: 400; line-height: 140%; height: 100%; overflow-x: hidden; } @media (max-width: 490px) { body { font-size: clamp(12px, 0.729vw, 28px); } } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background-color: #FFFFFF; border-radius: 4px; } body::-webkit-scrollbar-thumb { border-radius: 4px; background: #ACFC00; } a { display: inline-block; text-decoration: none; color: unset; transition: all 0.3s ease-in-out; } h1, h2, h3, h4, h5, h6, address, p, pre, blockquote, table, hr { margin: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #FFFFFF; margin-bottom: 0; } h1, .h1 { font-family: "Poppins", sans-serif; font-size: clamp(48px, 3.594vw, 103px); /* 69px */ font-style: normal; font-weight: 400; line-height: 100%; /* 96px */ } @media (max-width: 1199px) { h1, .h1 { font-size: clamp(46px, 4.837vw, 69px); /* 58px */ } } @media (max-width: 820px) { h1, .h1 { font-size: clamp(38px, 5.61vw, 60px); /* 46px */ } } h2, .h2 { font-family: "Poppins", sans-serif; font-size: clamp(48px, 2.865vw, 69px); /* 55px */ font-style: normal; font-weight: 700; line-height: 120%; /* 66px */ } @media (max-width: 1199px) { h2, .h2 { font-size: clamp(39px, 2.24vw, 52px); /* 43px */ } } @media (max-width: 820px) { h2, .h2 { font-size: clamp(23px, 1.979vw, 52px); /* 38px */ } } h3, .h3 { font-family: "Poppins", sans-serif; font-size: clamp(46px, 2.292vw, 125px); /* 44px */ font-style: normal; font-weight: 500; line-height: 120%; } @media (max-width: 1199px) { h3, .h3 { font-size: clamp(33px, 1.927vw, 48px); /* 37px */ } } @media (max-width: 820px) { h3, .h3 { font-size: clamp(28px, 1.667vw, 42px); /* 32px */ } } h4, .h4 { font-family: "Poppins", sans-serif; font-size: clamp(30px, 1.823vw, 57px); /* 35px */ font-style: normal; font-weight: 600; line-height: 120%; /* 42px */ } @media (max-width: 1199px) { h4, .h4 { font-size: clamp(28px, 1.719vw, 40px); /* 33px */ } } @media (max-width: 820px) { h4, .h4 { font-size: clamp(20px, 1.406vw, 34px); /* 27px */ } } h5, .h5 { font-family: "Poppins", sans-serif; font-size: clamp(18px, 1.458vw, 62px); /* 28px */ font-style: normal; font-weight: 500; line-height: 120%; /* 33.6px */ } @media (max-width: 1199px) { h5, .h5 { font-size: clamp(20px, 1.302vw, 32px); /* 25px */ } } @media (max-width: 820px) { h5, .h5 { font-size: clamp(18px, 1.042vw, 28px); /* 20px */ } } h6, .h6 { font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.198vw, 40px); /* 23px */ font-style: normal; font-weight: 600; line-height: 120%; /* 27.6px */ } @media (max-width: 1199px) { h6, .h6 { font-size: clamp(14px, 0.938vw, 36px); /* 18px */ } } @media (max-width: 820px) { h6, .h6 { font-size: clamp(14px, 0.833vw, 36px); /* 16px */ } } .text-18, p { color: #92949F; font-family: "Poppins", sans-serif; font-size: clamp(14px, 0.938vw, 36px); /* 18px */ font-style: normal; font-weight: 400; line-height: 160%; /* 21.6px */ } @media (max-width: 399px) { .text-18, p { font-size: clamp(12px, 0.729vw, 32px); /* 14px */ } } .text { font-size: clamp(14px, 0.938vw, 36px); } .eyebrow { color: #8D00F9; text-transform: uppercase; font-size: clamp(14px, 0.938vw, 36px); /* 16px */ font-family: "Poppins", sans-serif; font-weight: 500; line-height: 120%; /* 24px */ } @media (max-width: 1199px) { .eyebrow { font-size: clamp(12px, 0.677vw, 32px); /* 15px */ } } .subtitle { font-size: clamp(10px, 0.729vw, 28px); /* 14px */ font-family: "Poppins", sans-serif; font-style: normal; font-weight: 400; line-height: 120%; } @media (max-width: 1499px) { .subtitle { font-size: 13px; } } .caption { font-size: clamp(12px, 0.677vw, 28px); /* 13px */ font-style: normal; font-weight: 400; line-height: 120%; } @media (max-width: 1499px) { .caption { font-size: 10px; } } span { display: inline-block; } b, strong { font-family: "Poppins", sans-serif; } .hr-line { width: 100%; height: 1px; background: #8D00F9; } .hover-content { transition: all 0.3s ease-in-out; } .hover-content:hover { color: #ACFC00 !important; } /*------------------------- Helpers -------------------------*/ .color-primary { color: #ACFC00 !important; } .color-sec { color: #FFD600 !important; } .color-ter { color: #8D00F9 !important; } .color-primary-4 { color: #08091B !important; } .color-primary-5 { color: #009CFF !important; } .black { color: #0C0C0D !important; } .medium-black { color: #1E1F20 !important; } .light-black { color: #141516 !important; } .dark-gray { color: #45474F !important; } .light-gray { color: #92949F !important; } .lightest-gray { color: #FAF7F2 !important; } .light-white { color: #FAFAFA !important; } .white { color: #FFFFFF; } .bg-primary { background: #ACFC00 !important; } .bg-sec { background: #FFD600 !important; } .bg-ter { background: #8D00F9 !important; } .bg-primary-4 { background: #08091B !important; } .bg-primary-5 { background: #009CFF !important; } .bg-black { background: #0C0C0D !important; } .bg-medium-black { background: #1E1F20 !important; } .bg-light-black { background: #141516 !important; } .bg-dark-gray { background: #45474F !important; } .bg-light-gray { background: #92949F !important; } .bg-lightest-gray { background: #FAF7F2 !important; } .bg-light-white { background: #FAFAFA !important; } .bg-white { background: #FFFFFF !important; } .bg-white-bordered { background: #FFFFFF; border: 1px solid #FAF7F2; border-radius: clamp(8px, 0.625vw, 24px); } .fw-200 { font-weight: 200; } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .font-primary { font-family: "Poppins", sans-serif; } .font-sec { font-family: "Poppins", sans-serif; } .br-4 { border-radius: 4px; } .br-8 { border-radius: clamp(4px, 0.417vw, 16px); } .br-10 { border-radius: clamp(5px, 0.521vw, 20px); } .br-12 { border-radius: clamp(8px, 0.625vw, 24px); } .br-14 { border-radius: clamp(10px, 0.729vw, 28px); } .br-16 { border-radius: clamp(12px, 0.833vw, 32px); } .br-18 { border-radius: clamp(14px, 0.938vw, 36px); } .br-20 { border-radius: clamp(16px, 1.042vw, 40px); } .br-24 { border-radius: clamp(18px, 1.25vw, 48px); } .br-32 { border-radius: clamp(24px, 1.667vw, 64px); } .gap-6 { gap: clamp(3px, 0.313vw, 7px); } .order-6 { order: 6 !important; } /*----------------------------------------*/ /* SPACE CSS START /*----------------------------------------*/ .mb-96 { margin-bottom: clamp(32px, 5vw, 128px); } @media (max-width: 767px) { .mb-96 { margin-bottom: 26px; } } .my-80 { margin: clamp(48px, 4.167vw, 160px) 0; } @media (max-width: 575px) { .my-80 { margin: 40px 0; } } .mt-80 { margin-top: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .mt-80 { margin-top: 40px; } } .mb-80 { margin-bottom: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .mb-80 { margin-bottom: 40px; } } .mb-64 { margin-bottom: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mb-64 { margin-bottom: 26px; } } .mt-64 { margin-top: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .mt-64 { margin-top: 26px; } } .my-64 { margin: clamp(32px, 3.33vw, 128px) 0; } @media (max-width: 767px) { .my-64 { margin: 26px 0; } } .mt-48 { margin-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mt-48 { margin-top: 20px; } } .mb-48 { margin-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .mb-48 { margin-bottom: 20px; } } .mb-40 { margin-bottom: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .mb-40 { margin-bottom: 20px; } } .mt-32 { margin-top: 32px; } @media (max-width: 1599px) { .mt-32 { margin-top: 29px; } } @media (max-width: 1399px) { .mt-32 { margin-top: 27px; } } @media (max-width: 1199px) { .mt-32 { margin-top: 25px; } } @media (max-width: 991px) { .mt-32 { margin-top: 22px; } } @media (max-width: 767px) { .mt-32 { margin-top: 20px; } } .mb-32 { margin-bottom: 32px; } @media (max-width: 1599px) { .mb-32 { margin-bottom: 29px; } } @media (max-width: 1399px) { .mb-32 { margin-bottom: 27px; } } @media (max-width: 1199px) { .mb-32 { margin-bottom: 25px; } } @media (max-width: 991px) { .mb-32 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-32 { margin-bottom: 20px; } } .py-24 { padding: 24px 0 !important; } @media (max-width: 1199px) { .py-24 { padding: 22px 0; } } @media (max-width: 991px) { .py-24 { padding: 22px 0; } } @media (max-width: 767px) { .py-24 { padding: 20px 0; } } .mt-24 { margin-top: 24px; } @media (max-width: 1199px) { .mt-24 { margin-top: 22px; } } @media (max-width: 991px) { .mt-24 { margin-top: 22px; } } @media (max-width: 767px) { .mt-24 { margin-top: 20px; } } .mb-120 { margin-bottom: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .mb-120 { margin-bottom: 48px; } } .mb-28 { margin-bottom: 28px; } @media (max-width: 1199px) { .mb-28 { margin-bottom: 22px; } } @media (max-width: 991px) { .mb-28 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-28 { margin-bottom: 20px; } } .mb-24 { margin-bottom: 24px; } @media (max-width: 1199px) { .mb-24 { margin-bottom: 22px; } } @media (max-width: 991px) { .mb-24 { margin-bottom: 22px; } } @media (max-width: 767px) { .mb-24 { margin-bottom: 20px; } } .mb-20 { margin-bottom: 20px; } @media (max-width: 1199px) { .mb-20 { margin-bottom: 18px; } } @media (max-width: 991px) { .mb-20 { margin-bottom: 16px; } } @media (max-width: 767px) { .mb-20 { margin-bottom: 14px; } } .mt-16 { margin-top: 16px; } @media (max-width: 1199px) { .mt-16 { margin-top: 15px; } } @media (max-width: 991px) { .mt-16 { margin-top: 14px; } } @media (max-width: 767px) { .mt-16 { margin-top: 10px; } } .mb-18 { margin-bottom: 18px; } @media (max-width: 1199px) { .mb-18 { margin-bottom: 14px; } } @media (max-width: 991px) { .mb-18 { margin-bottom: 13px; } } @media (max-width: 767px) { .mb-18 { margin-bottom: 10px; } } .mb-16 { margin-bottom: 16px; } @media (max-width: 1199px) { .mb-16 { margin-bottom: 15px; } } @media (max-width: 991px) { .mb-16 { margin-bottom: 14px; } } @media (max-width: 767px) { .mb-16 { margin-bottom: 10px; } } .mb-12 { margin-bottom: 12px; } @media (max-width: 1199px) { .mb-12 { margin-bottom: 11px; } } @media (max-width: 991px) { .mb-12 { margin-bottom: 10px; } } @media (max-width: 767px) { .mb-12 { margin-bottom: 8px; } } .mb-8 { margin-bottom: 8px; } @media (max-width: 767px) { .mb-8 { margin-bottom: 4px; } } .mb-6 { margin-bottom: 6px; } @media (max-width: 767px) { .mb-6 { margin-bottom: 3px; } } .mb-4p { margin-bottom: 4px; } .py-160 { padding: clamp(96px, 8.32vw, 320px) 0; } @media (max-width: 575px) { .py-160 { padding: 80px 0; } } .pt-160 { padding-top: clamp(96px, 8.32vw, 320px); } @media (max-width: 575px) { .pt-160 { padding-top: 80px; } } .pb-160 { padding-bottom: clamp(96px, 8.32vw, 320px); } @media (max-width: 575px) { .pb-160 { padding-bottom: 80px; } } .py-80 { padding: clamp(48px, 4.167vw, 160px) 0; } @media (max-width: 575px) { .py-80 { padding: 40px 0; } } .pt-80 { padding-top: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .pt-80 { padding-top: 40px; } } .pt-120 { padding-top: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .pt-120 { padding-top: 48px; } } .pb-120 { padding-bottom: clamp(60px, 6.25vw, 320px); } @media (max-width: 575px) { .pb-120 { padding-bottom: 48px; } } .pb-80 { padding-bottom: clamp(48px, 4.167vw, 160px); } @media (max-width: 575px) { .pb-80 { padding-bottom: 40px; } } .py-64 { padding: clamp(32px, 3.33vw, 128px) 0; } @media (max-width: 767px) { .py-64 { padding: 26px 0; } } .pt-64 { padding-top: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .pt-64 { padding-top: 26px; } } .pb-64 { padding-bottom: clamp(32px, 3.33vw, 128px); } @media (max-width: 767px) { .pb-64 { padding-bottom: 26px; } } .py-48 { padding: clamp(24px, 2.5vw, 96px) 0; } @media (max-width: 767px) { .py-48 { padding: 20px 0; } } .pb-48 { padding-bottom: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pb-48 { padding-bottom: 20px; } } .pt-48 { padding-top: clamp(24px, 2.5vw, 96px); } @media (max-width: 767px) { .pt-48 { padding-top: 20px; } } .py-40 { padding: clamp(24px, 2.083vw, 80px) 0; } @media (max-width: 575px) { .py-40 { padding: 20px 0; } } .pt-40 { padding-top: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .pt-40 { padding-top: 20px; } } .pb-40 { padding-bottom: clamp(24px, 2.083vw, 80px); } @media (max-width: 575px) { .pb-40 { padding-bottom: 20px; } } .py-32 { padding: 32px 0; } @media (max-width: 1599px) { .py-32 { padding: 29px 0; } } @media (max-width: 1399px) { .py-32 { padding: 27px 0; } } @media (max-width: 1199px) { .py-32 { padding: 25px 0; } } @media (max-width: 991px) { .py-32 { padding: 22px 0; } } @media (max-width: 767px) { .py-32 { padding: 20px 0; } } .p-32 { padding: 32px; } @media (max-width: 1599px) { .p-32 { padding: 29px; } } @media (max-width: 1399px) { .p-32 { padding: 27px; } } @media (max-width: 1199px) { .p-32 { padding: 25px; } } @media (max-width: 991px) { .p-32 { padding: 22px; } } @media (max-width: 767px) { .p-32 { padding: 20px; } } .py-24 { padding: 24px 0; } @media (max-width: 1199px) { .py-24 { padding: 22px 0; } } @media (max-width: 991px) { .py-24 { padding: 22px 0; } } @media (max-width: 767px) { .py-24 { padding: 20px 0; } } .pl-24 { padding-left: 24px; } @media (max-width: 1199px) { .pl-24 { padding-left: 22px; } } @media (max-width: 991px) { .pl-24 { padding-left: 22px; } } @media (max-width: 767px) { .pl-24 { padding-left: 20px; } } .pr-32 { padding-right: 32px; } @media (max-width: 1199px) { .pr-32 { padding-right: 22px; } } @media (max-width: 991px) { .pr-32 { padding-right: 22px; } } @media (max-width: 767px) { .pr-32 { padding-right: 20px; } } .pr-24 { padding-right: 24px; } @media (max-width: 1199px) { .pr-24 { padding-right: 22px; } } @media (max-width: 991px) { .pr-24 { padding-right: 22px; } } @media (max-width: 767px) { .pr-24 { padding-right: 20px; } } .pb-24 { padding-bottom: 24px; } @media (max-width: 1199px) { .pb-24 { padding-bottom: 22px; } } @media (max-width: 991px) { .pb-24 { padding-bottom: 22px; } } @media (max-width: 767px) { .pb-24 { padding-bottom: 20px; } } .p-24 { padding: 24px; } @media (max-width: 1199px) { .p-24 { padding: 22px; } } @media (max-width: 991px) { .p-24 { padding: 22px; } } @media (max-width: 767px) { .p-24 { padding: 20px; } } .py-16 { padding: 16px 0; } @media (max-width: 1199px) { .py-16 { padding: 15px 0; } } @media (max-width: 991px) { .py-16 { padding: 14px 0; } } @media (max-width: 767px) { .py-16 { padding: 10px 0; } } .p-16 { padding: 16px; } @media (max-width: 1199px) { .p-16 { padding: 15px; } } @media (max-width: 991px) { .p-16 { padding: 14px; } } @media (max-width: 767px) { .p-16 { padding: 10px; } } .p-12 { padding: 12px; } @media (max-width: 1199px) { .p-12 { padding: 11px; } } @media (max-width: 991px) { .p-12 { padding: 10px; } } @media (max-width: 767px) { .p-12 { padding: 8px; } } .gap-4 { gap: clamp(2px, 0.208vw, 8px) !important; } .gap-8 { gap: clamp(4px, 0.417vw, 16px); } .gap-10 { gap: clamp(5px, 0.521vw, 20px); } .gap-12 { gap: clamp(8px, 0.625vw, 24px); } .gap-14 { gap: clamp(10px, 0.729vw, 28px); } .gap-16 { gap: clamp(12px, 0.833vw, 32px); } .gap-18 { gap: clamp(14px, 0.938vw, 36px); } .gap-20 { gap: clamp(16px, 1.042vw, 40px); } .gap-24 { gap: clamp(18px, 1.25vw, 48px); } .gap-32 { gap: clamp(24px, 1.667vw, 64px); } .gap-38 { gap: clamp(28px, 1.979vw, 76px); } .gap-48 { gap: clamp(10px, 2.5vw, 28px); } .gap-64 { gap: clamp(48px, 3.333vw, 128px); } /*------------------------- Elements -------------------------*/ /*----------------------------------------*/ /* Button CSS START /*----------------------------------------*/ .cus-btn { background: rgba(172, 252, 0, 0.35); backdrop-filter: blur(17.5px); border: 2px solid #ACFC00; border-radius: clamp(8px, 0.625vw, 24px); padding: clamp(8px, 0.807vw, 24px) clamp(24px, 1.667vw, 64px); display: inline-flex; justify-content: center; align-items: center; transition: all 0.3s ease-in-out; } .cus-btn .btn-text { font-size: clamp(14px, 0.938vw, 36px); font-weight: 700; line-height: 120%; /* 21.6px */ text-transform: uppercase; color: #FFFFFF !important; } .cus-btn:hover { background: rgba(255, 214, 0, 0.35); backdrop-filter: blur(17.5px); border: 2px solid #FFD600; } .quantity { display: flex; align-items: flex-start; border: 1px solid #141516; border-radius: clamp(28px, 2.5vw, 68px); padding: clamp(4px, 0.417vw, 16px); } @media (max-width: 490px) { .quantity { padding: 10px 16px; } } .quantity .input-area { display: flex; } .quantity .input-area input { display: grid; align-content: center; border: none; border-radius: 0px; text-align: center; font-weight: 500; font-size: 21px; background-color: transparent; color: #0C0C0D; width: 24px; } @media (max-width: 992px) { .quantity .input-area input { font-size: 20x; } } @media (max-width: 767px) { .quantity .input-area input { font-size: 18x; } } @media (max-width: 575px) { .quantity .input-area input { font-size: 17px; } } .quantity .input-area input:focus-visible { outline: none; } .quantity .input-area input.decrement { font-size: 44px; font-weight: 200; border-radius: 0; border: 0; margin-top: -7px; } .quantity .input-area input.increment { padding: 0; font-size: 34px; font-weight: 240; border-radius: 0; border: 0; margin-top: -7px; margin-right: -2px; } .quantity .input-area input.number { padding: 0; background: transparent; font-size: 21px; font-style: normal; font-weight: 500; line-height: 130%; } /*----------------------------------------*/ /* scroll to top /*----------------------------------------*/ .scrollToTopBtn { background: rgba(172, 252, 0, 0.35); backdrop-filter: blur(17.5px); border: 2px solid #ACFC00; border-radius: clamp(8px, 0.625vw, 24px); color: #FFFFFF; cursor: pointer; font-size: clamp(18px, 1.25vw, 48px); line-height: 48px; display: grid; align-items: center; justify-content: center; width: clamp(40px, 2.5vw, 100px); height: clamp(40px, 2.5vw, 100px); position: fixed; bottom: 30px; right: 30px; z-index: 100; opacity: 0; transform: translateY(100px); transition: all 0.5s ease; } .scrollToTopBtn:hover { background: rgba(249, 250, 169, 0.322); backdrop-filter: blur(17.5px); border: 2px solid #FFD600; color: #FFFFFF; transition: all 0.3s ease-in-out; } .showBtn { opacity: 1; transform: translateY(0); } .slider-arrows { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 1.25vw, 48px) !important; } .slider-arrows .arrow-btn { display: grid; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; } .slider-arrows .arrow-btn svg { width: clamp(24px, 1.667vw, 64px); height: clamp(24px, 1.667vw, 64px); transition: all 0.3s ease-in-out; } .slider-arrows .arrow-btn svg path { transition: all 0.3s ease-in-out; } .slider-arrows .arrow-btn:hover { transition: all 0.3s ease-in-out; } .slider-arrows .arrow-btn:hover path { fill: #009CFF; transition: all 0.3s ease-in-out; } .pagination { margin-left: auto; margin-right: auto; text-align: center; overflow: hidden; display: flex; } .pagination #border-pagination { display: flex; gap: clamp(4px, 0.417vw, 16px); margin: 0 auto; padding: 0; text-align: center; } .pagination #border-pagination li { display: inline; } .pagination #border-pagination li .arrow-border { border: 2px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .pagination #border-pagination li span { color: #FFFFFF; transition: all 0.3s ease-in-out; } .pagination #border-pagination li a { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #FFFFFF; width: clamp(40px, 2.5vw, 54px); height: clamp(40px, 2.5vw, 54px); border-radius: clamp(4px, 0.417vw, 16px); border: 2px solid #8D00F9; background: rgba(141, 0, 249, 0.05); float: left; transition: all 0.3s ease-in-out; font-family: "Poppins", sans-serif; font-size: clamp(15px, 1.198vw, 40px); font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ } @media (max-width: 399px) { .pagination #border-pagination li a { font-size: clamp(12px, 0.729vw, 28px); } } .pagination #border-pagination li a svg path { stroke: #FFFFFF; transition: all 0.3s ease-in-out; } .pagination #border-pagination li a.active { border: 2px solid #ACFC00; background: rgba(172, 252, 0, 0.05); color: #FFFFFF; } .pagination #border-pagination li a.active svg path { stroke: #FFFFFF; transition: all 0.3s ease-in-out; } .pagination #border-pagination li a:hover { border: 2px solid #ACFC00; background: rgba(172, 252, 0, 0.05); color: #FFFFFF; } .pagination #border-pagination li a:hover svg path { stroke: #FFFFFF; transition: all 0.3s ease-in-out; } .pagination #border-pagination li:hover span { color: #FFFFFF; transition: all 0.3s ease-in-out; } /*-------------------------------------------------------------- # Search Popup --------------------------------------------------------------*/ .search-popup { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; -webkit-transition: all 1s ease; -khtml-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .search-popup .search-popup__overlay { position: fixed; width: 224vw; height: 224vw; top: calc(90px - 112vw); right: calc(50% - 112vw); z-index: 3; display: block; -webkit-border-radius: 50%; -khtml-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(0); -khtml-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: transform 0.8s ease-in-out; -khtml-transition: transform 0.8s ease-in-out; -moz-transition: transform 0.8s ease-in-out; -ms-transition: transform 0.8s ease-in-out; -o-transition: transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out; transition-delay: 0s; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; background-color: #08091B; opacity: 0.8; cursor: url(../image/close.png), auto; } @media (max-width: 767px) { .search-popup .search-popup__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: none; width: 100%; height: 100%; border-radius: 0; transform: translateY(-110%); } } .search-popup .search-popup__content { position: fixed; width: 0; max-width: 560px; padding: 30px 15px; left: 50%; top: 50%; opacity: 0; z-index: 3; -webkit-transform: translate(-50%, -50%); -khtml-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; transition-delay: 0s, 0.8s, 0s; transition-delay: 0s, 0.4s, 0s; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .search-popup .search-popup__content .search-popup__form { position: relative; } .search-popup .search-popup__content .search-popup__form input[type=search], .search-popup .search-popup__content .search-popup__form input[type=text] { width: 100%; background-color: #ffffff !important; font-size: 15px; color: #697585; border: none; outline: none; height: 66px; padding-left: 30px; } .search-popup .search-popup__content .search-popup__form button { padding: 0; width: 66px; height: 66px; border: 0; background: #ACFC00; color: #1E1F20; display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; top: 0; right: -1px; border-radius: 0; } .search-popup .search-popup__content .search-popup__form button i { margin: 0; font-size: 24px; } .search-popup .search-popup__content .search-popup__form button::after { background-color: #FFD600; } .search-popup.active { z-index: 9999; } .search-popup.active .search-popup__overlay { top: auto; bottom: calc(90px - 112vw); -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition-delay: 0s; -webkit-transition-delay: 0s; opacity: 0.8; -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); } @media (max-width: 767px) { .search-popup.active .search-popup__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: none; width: 100%; height: 100%; border-radius: 0; transform: translateY(0%); } } .search-popup.active .search-popup__content { width: 100%; opacity: 1; transition-delay: 0.7s; -webkit-transition-delay: 0.7s; } /*------------------------- Form Styling -------------------------*/ textarea.form-control { min-height: 269px; max-height: 150px; } @media (max-width: 578px) { textarea.form-control { min-height: 225px; max-height: 80px; } } .form-control { padding: clamp(10px, 0.833vw, 32px) clamp(12px, 1.25vw, 48px); border-radius: clamp(8px, 0.625vw, 24px); border: 1px solid #FFD600; background: rgba(255, 214, 0, 0.05); background: transparent !important; font-family: "Poppins", sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 160%; position: relative; color: #FFFFFF; box-shadow: none; } .form-control:focus { border: 1px solid #FFD600; background: rgba(255, 214, 0, 0.05); outline: 0; color: #FFFFFF !important; } .form-control:hover { color: #FFFFFF !important; } .form-control::placeholder { color: #FFFFFF !important; opacity: 1; } .form-control svg { position: absolute; top: 16px; right: 18px; } .input-block { position: relative; } .input-block svg, .input-block i { position: absolute; z-index: 2; top: 16px; right: 16px; } input[type=file] { display: none; } label.error { color: #ff0000; } .cus-checkBox input { display: none; color: #FFFFFF; } .cus-checkBox label { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #FFFFFF; } .cus-checkBox label::before { content: "\f0c8"; font-family: "Font Awesome 6 Pro"; color: #FFFFFF; font-size: clamp(16px, 1.042vw, 20px); font-weight: 300; } .cus-checkBox input[type=checkbox]:checked + label::before { content: "\f14a"; color: #FFD600; font-weight: 600; } .check-block input { display: none; } .check-block label { position: relative; display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); cursor: pointer; } .check-block label::before { content: "\f0c8"; font-family: "Font Awesome 6 Pro"; color: #FFFFFF; font-size: clamp(14px, 1.042vw, 20px); } .check-block input[type=checkbox]:checked + label::before { content: "\f14a"; color: #ACFC00; font-weight: bold; } #preloader { position: fixed; width: 100%; height: 100vh; display: grid; align-items: center; justify-content: center; background: linear-gradient(181deg, #000003 -21.32%, #08091B 99.02%); z-index: 99999999; } #preloader .loader { /* Container for the dice*/ display: flex; justify-content: center; align-items: center; transform: rotateX(90deg); transform-style: preserve-3d; animation: revolve 5s ease infinite; } #preloader .dot { width: 1rem; aspect-ratio: 1; background-color: black; border-radius: 50%; } @media (max-width: 490px) { #preloader .dot { width: 0.65rem; } } #preloader .dotContainer { /* Flexbox to arrange dots horizontally */ width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; } #preloader .subDotContainer { /* Flexbox to arrange dots vertically */ height: 100%; display: flex; flex-direction: column; justify-content: space-around; } #preloader .left .dotContainer { transform: rotate(45deg); } #preloader .side { /* Actual sides of the dice */ background-color: rgb(255, 255, 255); padding: 1rem; position: absolute; width: 100px; /* Varying this will vary the Dice's size */ aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border: 2px solid #141516; border-radius: 18px; } @media (max-width: 1399px) { #preloader .side { padding: 1rem; width: 7em; } } @media (max-width: 490px) { #preloader .side { padding: 10px; } } #preloader .front { transform: translateZ(3rem); } @media (max-width: 490px) { #preloader .front { transform: translateZ(2rem); } } #preloader .back { transform: translateZ(-3rem); } @media (max-width: 490px) { #preloader .back { transform: translateZ(-2rem); } } #preloader .back .dotContainer { transform: rotate(-45deg); } #preloader .left { transform: rotateY(90deg) translateZ(3rem); } @media (max-width: 490px) { #preloader .left { transform: rotateY(90deg) translateZ(2rem); } } #preloader .right { transform: rotateY(90deg) translateZ(-3rem); } @media (max-width: 490px) { #preloader .right { transform: rotateY(90deg) translateZ(-2rem); } } #preloader .bottom { transform: translateY(3rem) rotateX(90deg); } @media (max-width: 490px) { #preloader .bottom { transform: translateY(2rem) rotateX(90deg); } } #preloader .top { transform: translateY(-3rem) rotateX(90deg); } @media (max-width: 490px) { #preloader .top { transform: translateY(-2rem) rotateX(90deg); } } @keyframes revolve { 0% { transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); } 20% { transform: rotate3d(1, 0, 0, 72deg) rotate3d(0, 1, 0, 72deg) rotate3d(0, 0, 1, 72deg); } 40% { transform: rotate3d(1, 0, 0, 148deg) rotate3d(0, 1, 0, 148deg) rotate3d(0, 0, 1, 148deg); } 60% { transform: rotate3d(1, 0, 0, 216deg) rotate3d(0, 1, 0, 216deg) rotate3d(0, 0, 1, 216deg); } 80% { transform: rotate3d(1, 0, 0, 288deg) rotate3d(0, 1, 0, 288deg) rotate3d(0, 0, 1, 288deg); } 100% { transform: rotate3d(1, 0, 0, 360deg) rotate3d(0, 1, 0, 360deg) rotate3d(0, 0, 1, 360deg); } } @keyframes changeColor { 0% { background-color: #00dfa2; background-position: 0px, 0px; } 20% { --BG-COLOR: #f72798; background-position: 24px, 24px; } 40% { --BG-COLOR: #f57d1f; background-position: 36px, 36px; } 60% { --BG-COLOR: #16ff00; background-position: 24px, 24px; } 80% { --BG-COLOR: #ff004d; background-position: 36px, 36px; } 100% { --BG-COLOR: #00dfa2; background-position: 24px, 24px; } } .video-link { display: inline-block; padding: 5px 10px; border-radius: 4px; text-decoration: none; color: white; background-color: #f03; box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.5); } .player { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgb(0, 0, 0) 100%); background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgb(0, 0, 0) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgb(0, 0, 0) 100%); background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgb(0, 0, 0) 100%); opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .player__video { position: relative; top: 50%; left: 50%; width: auto; max-width: 65%; height: 77%; background-color: #fff; box-shadow: 0 0 50px rgba(0, 0, 0, 0.95); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 1024px) { .player__video { height: 30%; } } @media (max-width: 490px) { .player__video { max-width: 78%; } } .js--show-video { opacity: 1; } .video-filler { display: block; width: 100%; } .video-close { position: absolute; z-index: 0; top: 0; right: -30px; padding: 5px 10px; border: none; outline: none; border-radius: 0 50% 50% 0; cursor: pointer; font-size: 24px; color: #000; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.75); } .video-iframe { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff; } .last-block { display: flex; align-items: center; gap: 16px; } @media (max-width: 490px) { .last-block.v-2 { width: 100%; } } .last-block .drop-container { width: 100%; background-color: #141516; padding: clamp(4px, 0.365vw, 16px) clamp(8px, 0.625vw, 24px); border-radius: 5px; } @media (max-width: 490px) { .last-block .drop-container.v-2 { width: 100%; } } @media (max-width: 490px) { .last-block .drop-container .wrapper-dropdown.v-2 { width: 100%; } } .drop-container { background-color: #8D00F9; padding-right: 12px; } .wrapper-dropdown { display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); position: relative; width: fit-content; width: 100%; text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wrapper-dropdown .selected-display { font-weight: 400; line-height: 150%; } .wrapper-dropdown::before { position: absolute; top: 50%; right: 16px; margin-top: -2px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #fff transparent; } .wrapper-dropdown .topbar-dropdown { width: 100%; overflow: hidden; box-shadow: 0px 3px 6px 0px #92949F; background: #FFFFFF; color: #92949F !important; transition: 0.3s; position: absolute; top: 100%; right: 0; left: 6px; margin: 0; padding: 0; list-style: none; z-index: 99; border-radius: 16px; -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; visibility: hidden; } .wrapper-dropdown .topbar-dropdown li { color: #1E1F20 !important; font-weight: 500; padding: 0 15px; line-height: 45px; border-radius: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .wrapper-dropdown .topbar-dropdown li:last-child { border-bottom: none; } .wrapper-dropdown .topbar-dropdown li:hover { transition: all 0.3s ease-in-out; background-color: #ACFC00; color: #FFFFFF !important; } .wrapper-dropdown.active .topbar-dropdown { color: #0C0C0D; opacity: 1; visibility: visible; border-radius: 5px; } .wrapper-dropdown .scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; } .wrapper-dropdown .arrow { float: right; rotate: 180deg; } .wrapper-dropdown svg { transition: all 0.3s; } .wrapper-dropdown .rotated { transform: rotate(-180deg); } /*------------------------- layouts -------------------------*/ .header { width: 100%; padding-top: 24px; color: #FFFFFF; position: absolute; z-index: 5; } .header.header-2 { text-transform: uppercase; position: relative; z-index: 999999; } .header .navigation { padding-left: clamp(16px, 1.042vw, 40px) !important; padding: clamp(8px, 0.625vw, 24px); width: 100%; border-radius: clamp(8px, 0.625vw, 24px); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(34, 35, 40, 0.25); backdrop-filter: blur(5px); position: relative; } .header .navigation .header-logo { width: clamp(118px, 10.625vw, 538px); } @media (max-width: 1024px) { .header .navigation .header-logo { width: 80%; } } .header .navigation .notification-bell { width: clamp(38px, 2.708vw, 138px); height: clamp(38px, 2.708vw, 138px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(85, 85, 85, 0.35); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); backdrop-filter: blur(5px); transition: all 0.3s ease-in-out; position: relative; } .header .navigation .notification-bell svg { width: clamp(18px, 1.25vw, 68px); height: clamp(18px, 1.25vw, 68px); } .header .navigation .notification-bell:after { content: ""; position: absolute; top: 0; right: 0; width: clamp(8px, 0.625vw, 24px); height: clamp(8px, 0.625vw, 24px); background: #27DC2F; border-radius: 50%; } .header .navigation .notification-bell:hover { background: #FFD600; backdrop-filter: blur(17.5px); } .header .navigation .header-search-icon { width: clamp(38px, 2.708vw, 138px); height: clamp(38px, 2.708vw, 138px); border-radius: 50%; background: rgba(85, 85, 85, 0.35); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; } .header .navigation .header-search-icon svg { width: clamp(18px, 1.25vw, 68px); height: clamp(18px, 1.25vw, 68px); } .header .navigation .header-search-icon i { color: #FFFFFF !important; font-size: clamp(16px, 1.042vw, 40px); } .header .navigation .header-search-icon:hover { background: #FFD600; backdrop-filter: blur(17.5px); } .header .navigation .nav-dot { width: clamp(3px, 0.313vw, 12px); height: clamp(3px, 0.313vw, 12px); border-radius: 50%; background-color: #FFFFFF; } .header .navigation .menu-button-right .main-menu__nav { margin-left: auto; margin-right: auto; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list { padding-top: 6px !important; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; align-items: center; display: none; text-transform: capitalize; } @media screen and (min-width: 1200px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .main-menu__list ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list ul { display: flex; align-items: center; justify-content: space-between; } } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li { padding-top: 0.417vw; padding-bottom: 0.417vw; position: relative; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(15px, 0.938vw, 46px); font-weight: 500; line-height: 150%; font-family: "Poppins", sans-serif; text-transform: capitalize; letter-spacing: 0.32px; color: #FFFFFF; display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; position: relative; transition: all all 0.3s ease-in-out; } @media (max-width: 1199px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(17px, 1.251vw, 18px); } } @media (max-width: 575px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a { font-size: clamp(16px, 2.261vw, 20px); } } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a:hover, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a.active, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a:hover, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li > a.active { transition: all 0.3s ease-in-out; color: #ACFC00; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li .header-arrow, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li .header-arrow { font-weight: 300; margin-left: -16px; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:first-child a::before, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:first-child a::before { display: none; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li.current, .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li:hover, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li.current, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list > li:hover { color: #ACFC00; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul { z-index: 99; overflow: hidden; border-radius: clamp(8px, 0.625vw, 24px); border: 8px solid #0C0C0D; text-transform: uppercase; position: absolute; top: 100%; left: 0; min-width: clamp(200px, 10.938vw, 516px); flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; transform-origin: top center; transform: scaleY(0) translateZ(100px); backface-visibility: hidden; transition: opacity all 0.3s ease-in-out, visibility all 0.3s ease-in-out, transform 700ms ease; z-index: 99; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06); padding: 0; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li { flex: 1 1 100%; width: 100%; position: relative; background: #0C0C0D; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > a { font-size: clamp(14px, 0.833vw, 38px); line-height: 26px; color: #FFFFFF; font-weight: 500; font-family: "Poppins", sans-serif; display: flex; padding: clamp(4px, 0.417vw, 16px) clamp(16px, 1.042vw, 40px); transition: 400ms; border-radius: 0px; text-transform: capitalize; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li.current > a, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li:hover > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li.current > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li:hover > a { background-color: #ACFC00; color: #0C0C0D; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul { top: 0; left: calc(100% + 20px); } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul.right-align, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul.right-align { top: 0; left: auto; right: 100%; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > ul ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > ul ul { display: flex; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:hover > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:hover > ul { opacity: 1; visibility: visible; gap: 0; transform: scaleY(1) translateZ(0px); transition: all 0.3s ease-in-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(1) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .main-menu__list li:nth-last-child(2) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(1) ul li > ul, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li:nth-last-child(2) ul li > ul { left: auto; right: calc(100% + 20px); } } .header .navigation .main-menu__right { display: flex; align-items: center; justify-content: end; gap: clamp(18px, 1.25vw, 48px) !important; } .header .navigation .main-menu__right .main-menu-link-btn { position: relative; } .header .navigation .main-menu__right .main-menu-link-btn svg .icon { transition: all 0.3s ease-in-out; } .header .navigation .main-menu__right .main-menu-link-btn:hover svg .icon { fill: #ACFC00; transition: all 0.3s ease-in-out; } .header .navigation .main-menu__right .cart-text { line-height: 0; } .mobile-nav__toggler { font-size: 24px; font-weight: 200; color: #45474F; cursor: pointer; transition: 500ms; display: none; } @media (max-width: 1099px) { .mobile-nav__toggler { display: flex; filter: hue-rotate(50deg); } } .mobile-nav__toggler:hover { color: #FFD600; } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; transform: translateX(-100%); transform-origin: left center; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; visibility: hidden; position: fixed; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 0; } .mobile-nav__wrapper.expanded { opacity: 1; transform: translateX(0%); visibility: visible; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; } .mobile-nav__wrapper .mobile-nav__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #0C0C0D; opacity: 0.3; } .mobile-nav__wrapper .mobile-nav__content { width: 300px; background: linear-gradient(181deg, #000003 -21.32%, #08091B 99.02%); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; } @media (max-width: 490px) { .mobile-nav__wrapper .mobile-nav__content { width: clamp(250px, 55.102vw, 450px); } } .mobile-nav__wrapper .mobile-nav__content .main-menu__nav { display: block; padding: 0; } .mobile-nav__wrapper .mobile-nav__content .logo-box { margin-bottom: 40px; display: flex; } .mobile-nav__wrapper .mobile-nav__content .logo-box img { width: clamp(120px, 15.625vw, 320px); } @media (max-width: 500px) { .mobile-nav__wrapper .mobile-nav__content .logo-box img { width: 100%; } } .mobile-nav__wrapper .mobile-nav__content .main-menu__list, .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul { display: none; border-top: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li > a { padding-left: 1em; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list ul li:not(:last-child) { border-bottom: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom: 1px solid RGBA(255, 255, 255, 0.1); } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a { display: flex; justify-content: space-between; line-height: 30px; color: #FFFFFF; font-size: 18px; font-family: "Poppins", sans-serif; text-transform: capitalize; font-weight: 500; height: 46px; letter-spacing: 0.8px; align-items: center; transition: 500ms; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a.expanded { color: #ACFC00; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button { width: 30px; height: 30px; background: rgba(172, 252, 0, 0.35); backdrop-filter: blur(17.5px); border: none; outline: none; color: #FFFFFF; display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-90deg); transition: transform 500ms ease; } .mobile-nav__wrapper .mobile-nav__content .main-menu__list li a button.expanded { transform: rotate(0deg); background: rgba(172, 252, 0, 0.75); backdrop-filter: blur(17.5px); color: #FFFFFF; } .mobile-nav__wrapper .mobile-nav__close { position: absolute; top: 20px; right: 15px; font-size: 18px; color: #FFFFFF; cursor: pointer; } .mobile-nav__social { display: flex; align-items: center; } .mobile-nav__social a { font-size: 16px; color: #FFFFFF; transition: 500ms; } .mobile-nav__social a + a { margin-left: 20px; } .mobile-nav__social a:hover { color: #ACFC00; } .mobile-nav__contact { margin-bottom: 0; margin-top: 20px; margin-bottom: 20px; } .mobile-nav__contact li { color: #FFFFFF; font-size: 14px; font-weight: 500; position: relative; display: flex; align-items: center; } .mobile-nav__contact li + li { margin-top: 15px; } .mobile-nav__contact li a { color: inherit; transition: 500ms; } .mobile-nav__contact li a:hover { color: #ACFC00; } .mobile-nav__contact li i { width: 30px; height: 30px; border-radius: 50%; background: rgba(172, 252, 0, 0.35); backdrop-filter: blur(17.5px); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 14px; margin-right: 10px; color: #FFFFFF; } .mobile-nav__container .main-menu__logo, .mobile-nav__container .main-menu__right { display: none; } .hero-banner-sec { background: url("../image/bg-summit.png") no-repeat; background-size: cover; width: 100%; height: 100vh; position: relative; padding-top: clamp(595px, 36.146vw, 990px); } @media (max-width: 1399px) { .hero-banner-sec { height: auto; } } .hero-banner-sec .hero-img { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } .hero-banner-sec .hero-img img { width: clamp(300px, 27.246vw, 1050px); height: clamp(344px, 34.896vw, 1290px); } @media (max-width: 766px) { .hero-banner-sec .hero-img { width: clamp(260px, 17.292vw, 750px); } .hero-banner-sec .hero-img img { width: 100%; height: auto; } } .hero-banner-sec .hero-text { position: absolute; bottom: 0; font-size: clamp(28px, 3.385vw, 150px); font-weight: 700; line-height: 120%; letter-spacing: -1.95px; text-transform: uppercase; color: #FFFFFF !important; } .footer { background: url("../image/footer-bg.jpg") no-repeat; padding: clamp(28px, 2.5vw, 68px) 0 clamp(18px, 1.25vw, 48px) 0; background-size: cover; } .footer .link-wrapper { display: flex; align-items: start; justify-content: space-between; } .footer .link-wrapper ul { list-style: none; padding: 0; transition: all 0.3s ease-in-out; } .footer .newsletter { display: flex; align-items: center; justify-content: space-between; padding-bottom: clamp(8px, 0.625vw, 24px); border-bottom: 1px solid #92949F; } .footer .newsletter input { background-color: transparent; border: none; outline: none; width: 100%; color: #92949F; } .footer .newsletter input:focus { background-color: transparent; border: none; outline: none; } .footer .newsletter input::placeholder { color: #92949F; font-size: clamp(14px, 0.938vw, 36px); font-weight: 400; line-height: 160%; } .footer .newsletter svg { width: clamp(18px, 1.25vw, 48px); height: clamp(18px, 1.25vw, 48px); transition: all 0.3s ease-in-out; } .footer .newsletter svg path { transition: all 0.3s ease-in-out; } .footer .newsletter svg:hover path { fill: #ACFC00; } .footer .hr-line { background-color: #92949F !important; } .title-banner { background: url("../image/title-banner.jpg") no-repeat; background-position: right; padding: clamp(140px, 11.719vw, 358px) 0 clamp(68px, 5.052vw, 188px) 0; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; } .title-banner .banner-title { text-align: center; font-size: clamp(48px, 3.385vw, 128px); font-weight: 700; line-height: 120%; /* 78px */ letter-spacing: -1.95px; text-transform: uppercase; } .header-2 { background: url("../image/title-banner.jpg") no-repeat; padding: clamp(18px, 1.25vw, 48px) 0; } .about-sec { position: relative; } .about-sec .vector-1 { position: absolute; top: 0; left: 2%; width: clamp(100px, 10.417vw, 360px); height: clamp(100px, 11.285vw, 380px); } .about-sec .vector-2 { position: absolute; bottom: 20%; left: 4%; width: clamp(100px, 10.417vw, 360px); height: clamp(100px, 8.735vw, 312px); } .about-sec .about-img-1 { border-radius: clamp(8px, 0.625vw, 24px); border: 1px solid #FFD600; } @media (max-width: 3840px) { .about-sec .about-img-1 { min-width: 80%; } } .about-sec .about-img-2 { border-radius: clamp(8px, 0.625vw, 24px); border: 1px solid #ACFC00; } .about-sec .about-pricing-box { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 1.25vw, 48px) !important; } @media (max-width: 1025px) { .about-sec .about-pricing-box { flex-wrap: wrap; } } .about-sec .about-pricing-box .price-block { padding: clamp(18px, 1.25vw, 48px) clamp(24px, 1.667vw, 64px); border-radius: clamp(12px, 0.833vw, 32px); display: flex; align-items: center; gap: clamp(12px, 0.833vw, 32px); } .about-sec .about-pricing-box .price-block svg { width: clamp(24px, 1.667vw, 84px); height: clamp(24px, 1.667vw, 84px); } .about-sec .about-pricing-box .price-block.v-1 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); } .about-sec .about-pricing-box .price-block.v-2 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .about-sec .about-pricing-box .price-block.v-3 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .about-sec .about-pricing-box .price-block.v-4 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .dice-head { width: clamp(48px, 2.917vw, 128px); height: clamp(48px, 2.917vw, 128px); } .side-bar { border-radius: clamp(18px, 1.25vw, 48px); padding: clamp(18px, 1.25vw, 48px); border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .side-bar .search-container { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 1.25vw, 48px) !important; border: 0.5px solid #8D00F9; border-radius: clamp(8px, 0.625vw, 24px); padding-left: clamp(12px, 0.833vw, 32px); } .side-bar .search-container input { width: 100%; background-color: transparent; border: none; color: #FFFFFF; } .side-bar .search-container input:focus { background-color: transparent; outline: none; border: none; color: #FFFFFF; } .side-bar .search-container input::placeholder { color: #FFFFFF; font-size: clamp(14px, 0.938vw, 36px); font-weight: 400; line-height: 160%; } .side-bar .search-container .search-button { display: flex; align-items: center; justify-content: center; border: none; padding: clamp(14px, 0.938vw, 36px) clamp(24px, 1.667vw, 64px); font-size: clamp(16px, 1.042vw, 40px); color: #FFFFFF; font-weight: 300; background-color: #8D00F9; border-top-right-radius: clamp(8px, 0.625vw, 24px); border-bottom-right-radius: clamp(8px, 0.625vw, 24px); } .side-bar .border-block { border: 0.5px solid #8D00F9; border-radius: clamp(8px, 0.625vw, 24px); padding: clamp(12px, 0.833vw, 32px); } .side-bar .lestest-article .article-1 { display: flex; align-items: center; gap: clamp(12px, 0.833vw, 32px); } .side-bar .social-icons-block { display: flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); } .side-bar .social-icons-block .social-link { width: clamp(28px, 2.5vw, 68px); height: clamp(28px, 2.5vw, 68px); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #FFD600; transition: all 0.3s ease-in-out; } .side-bar .social-icons-block .social-link svg { width: clamp(16px, 1.25vw, 48px); height: clamp(16px, 1.25vw, 48px); } .side-bar .social-icons-block .social-link:hover { background-color: #FFD600; } .side-bar .social-icons-block .social-link:hover svg path { fill: #1E1F20; } .game-detail-sec .game-detail-form .form-control { border: 1px solid #8D00F9; background: rgba(141, 0, 249, 0.05); padding: clamp(4px, 0.469vw, 16px) clamp(18px, 1.25vw, 48px); } .game-detail-sec .game-detail-form .form-control::placeholder { font-size: clamp(10px, 0.729vw, 28px); color: #FFFFFF; } .game-detail-sec .game-detail-form #message1 { min-height: 119px; max-height: 120px; } .game-detail-sec .stroke-line svg { width: 100%; } .blog-detail .image-detail { display: flex; align-items: center; gap: clamp(8px, 0.625vw, 24px); } .blog-detail .image-detail .vr-line { width: 48px; height: 1px; background-color: #FFD600; } .blog-detail .quote { display: flex; padding: clamp(18px, 1.25vw, 48px) !important; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.25vw, 48px) !important; border-radius: clamp(8px, 0.625vw, 24px); border-left: 2px solid #ACFC00; background: rgba(172, 252, 0, 0.05); backdrop-filter: blur(5px); } .betting-plate-sec { position: relative; } .betting-plate-sec .hat-vector { position: absolute; top: 0; right: 2%; width: clamp(100px, 10.417vw, 360px); height: clamp(100px, 8.735vw, 305px); } @media (max-width: 802px) { .betting-plate-sec .hat-vector { display: none; } } .betting-plate-sec .betting-block-1 { padding: clamp(24px, 1.667vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; border-radius: clamp(18px, 1.25vw, 48px); border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); cursor: pointer; } .betting-plate-sec .betting-block-1 .img-block { overflow: hidden; border-radius: clamp(8px, 0.625vw, 24px); transition: all 0.3s ease-in-out; width: 100%; } .betting-plate-sec .betting-block-1 .img-block img { width: 100%; transition: all 0.3s ease-in-out; } .betting-plate-sec .betting-block-1.v-3 .cus-btn { border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.35); backdrop-filter: blur(17.5px); } .betting-plate-sec .betting-block-1:hover .img-block { border-radius: clamp(8px, 0.625vw, 24px); } .betting-plate-sec .betting-block-1:hover .img-block img { transform: scale(1.1); } .betting-plate-sec .betting-block-1:hover .hover-content { color: #FFD600 !important; } .contact-section .customer-block { display: flex; align-items: flex-start; gap: clamp(18px, 1.25vw, 48px) !important; flex-wrap: wrap; row-gap: 12px; } .contact-section .contact-wrapper { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .map-sec { position: relative; } .map-sec .angle-vector { position: absolute; right: 6%; bottom: 8%; } @media (max-width: 820px) { .map-sec .angle-vector { display: none; } } .map-sec .map { height: 100%; } .map-sec .map .map-wrapper { border-radius: clamp(18px, 1.25vw, 48px); height: 100%; } .map-sec .map .map-wrapper iframe { border-radius: clamp(18px, 1.25vw, 48px); width: 100%; height: clamp(350px, 39.583vw, 800px); } @media (max-width: 1199px) { .map-sec .map .map-wrapper iframe { height: 350px; } } .heading-label { padding: 8px clamp(12px, 0.833vw, 32px); display: inline-flex; justify-content: center; border-radius: clamp(28px, 2.5vw, 68px); background: rgba(249, 99, 4, 0.25); gap: clamp(4px, 0.417vw, 16px); } @media (max-width: 490px) { .text-center h2 br, .text-center p br { display: none; } } .services-sec { background: url("https://uiparadox.co.uk/public/templates/royal-spins/assets/media/backgrounds/services-bg.jpg") no-repeat; padding: clamp(40px, 6.25vw, 320px) 0; background-size: cover; overflow: hidden; } .services-sec .services-slider .service-block-1 { margin: 0 12px; padding: 30px 0; position: relative; transition: all 0.3s ease-in-out; } .services-sec .services-slider .service-block-1 .service-img { position: relative; width: fit-content; } .services-sec .services-slider .service-block-1 .service-img::before { content: ""; position: absolute; top: 0; left: 0; border-radius: 50% 0 0 50%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 1; transition: all 0.3s ease-in-out; } .services-sec .services-slider .service-block-1 .service-img.v-img-1::before { border-radius: 50% 50% 0 0 !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-1 img { border-radius: 50% 50% 0 0 !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-3::before { border-radius: 50% !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-3 img { border-radius: 50% !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-4::before { border-radius: 0 50% 50% 0 !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-4 img { border-radius: 0 50% 50% 0 !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-1 img { border-radius: 50% 50% 0 0 !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-3 img { border-radius: 50% !important; } .services-sec .services-slider .service-block-1 .service-img.v-img-4 img { border-radius: 0 50% 50% 0 !important; } .services-sec .services-slider .service-block-1 .service-img .service-img-1 { border-radius: 50% 0 0 50%; transition: all 0.3s ease-in-out; } .services-sec .services-slider .service-block-1 .service-img .service-img-1 img { transition: all 0.3s ease-in-out; border-radius: 50% 0; position: relative; z-index: 2; } .services-sec .services-slider .service-block-1 .service-img .service-img-1.service-img-2 { border-radius: 50% 50% 0 0 !important; } .services-sec .services-slider .service-block-1 .service-img .service-img-1.service-img-3 { border-radius: 50% !important; } .services-sec .services-slider .service-block-1 .service-img .service-img-1.service-img-4 { border-radius: 0 50% 50% 0 !important; } .services-sec .services-slider .service-block-1 .service-content { transition: all 0.3s ease-in-out; position: absolute; bottom: 0; padding-top: clamp(88px, 11.146vw, 260px); } @media (max-width: 490px) { .services-sec .services-slider .service-block-1 .service-content { bottom: 66px; } } .services-sec .services-slider .service-block-1 .service-content .service-title { position: relative; z-index: 6; transition: all 0.3s ease-in-out; margin-left: -6.6%; margin-right: 8.6%; display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 1.25vw, 48px) !important; } .services-sec .services-slider .service-block-1 .service-content .service-title .home-icon { transition: all 0.3s ease-in-out; width: clamp(48px, 4.167vw, 160px); height: clamp(48px, 4.167vw, 160px); border-radius: 50%; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; border: 1px solid #FFFFFF; flex-shrink: 0; } .services-sec .services-slider .service-block-1 .service-content .service-title .home-icon svg { transition: all 0.3s ease-in-out; width: clamp(24px, 2.083vw, 80px); height: clamp(24px, 2.083vw, 80px); } .services-sec .services-slider .service-block-1 .service-content .service-text { position: relative; z-index: 6; padding-left: 7.604vw; } @media (max-width: 1399px) { .services-sec .services-slider .service-block-1 .service-content .service-text { padding-left: 5.604vw; } } @media (max-width: 777px) { .services-sec .services-slider .service-block-1 .service-content .service-text { padding-left: 21.604vw; } } @media (max-width: 490px) { .services-sec .services-slider .service-block-1 .service-content .service-text { padding-left: 11.604vw; } } .services-sec .services-slider .service-block-1 .service-content .hover-icon { transition: all 0.3s ease-in-out; opacity: 0; position: absolute; left: 16px; bottom: 16px; z-index: 9999; } @media (max-width: 490px) { .services-sec .services-slider .service-block-1 .service-content .hover-icon { display: none; } } .services-sec .services-slider .service-block-1 .service-content .hover-icon.hover-icon-1 { bottom: 58px; } .services-sec .services-slider .service-block-1:hover .service-text p { color: #FFFFFF !important; } .services-sec .services-slider .service-block-1:hover .service-img::before { background-color: transparent; box-shadow: 0px 0px 13.5px 1.8px #ACFC00; transform: rotate(4deg); } .services-sec .services-slider .service-block-1:hover .service-img-1 { border-radius: 50% 0 0 50%; transform: rotate(4deg); } .services-sec .services-slider .service-block-1:hover .home-icon { border: 2px dashed #FFFFFF !important; background-color: #ACFC00 !important; } .services-sec .services-slider .service-block-1:hover .home-icon svg path { fill: #FFFFFF; } .services-sec .services-slider .service-block-1:hover .hover-icon { opacity: 1; } .heading { display: flex; align-items: center; justify-content: space-between; } .live-games-sec { position: relative; } .live-games-sec .hat-vector { position: absolute; right: 0%; bottom: 0%; width: clamp(100px, 10.417vw, 400px); height: clamp(100px, 8.735vw, 340px); } @media (max-width: 1024px) { .live-games-sec .hat-vector { display: none; } } .live-games-sec .game-wrapper { padding: clamp(20px, 3.33vw, 148px) clamp(20px, 7.5vw, 188px); border: 1px solid #009CFF; border-radius: clamp(18px, 1.25vw, 48px); } .live-games-sec .game-wrapper .game-block { transition: all 0.3s ease-in-out; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 4.228vw, 148px) 0 clamp(32px, 5.616vw, 168px) 0; border-radius: clamp(12px, 0.833vw, 32px); margin: 0 12px; margin-bottom: clamp(18px, 1.25vw, 48px) !important; } .live-games-sec .game-wrapper .game-block img { transition: all 0.3s ease-in-out; } .live-games-sec .game-wrapper .game-block.v-1 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .live-games-sec .game-wrapper .game-block.v-2 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .live-games-sec .game-wrapper .game-block.v-3 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .live-games-sec .game-wrapper .game-block.v-4 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); } .live-games-sec .game-wrapper .game-block:hover img { transform: scale(1.02); } .betting-sec .progress { margin: 24px 0; display: block; width: 100%; height: 2px; overflow: hidden; background-color: #FAF7F2; background-image: linear-gradient(to right, #ACFC00, #ACFC00); background-repeat: no-repeat; background-size: 0 100%; transition: background-size 0.4s ease-in-out; } .betting-sec .betting-block { margin: 0 12px; transition: all 0.3s ease-in-out; } .betting-sec .betting-block .btn-hover { display: inline-block; transition: all 0.3s ease-in-out; } .betting-sec .betting-block .block-title { transition: all 0.3s ease-in-out; } .betting-sec .betting-block .betting-title { display: flex; align-items: center; justify-content: space-between; padding-right: clamp(10px, 0.729vw, 28px); } .betting-sec .betting-block .betting-btn { transition: all 0.3s ease-in-out; width: clamp(24px, 1.667vw, 64px); height: clamp(24px, 1.667vw, 64px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #ACFC00; } .betting-sec .betting-block .betting-btn svg { width: clamp(10px, 0.926vw, 80px); height: clamp(10px, 0.849vw, 50px); transition: all 0.3s ease-in-out; } .betting-sec .betting-block span { transition: all 0.3s ease-in-out; } .betting-sec .betting-block:hover .betting-btn svg { transform: rotate(-45deg); } .tournament-sec { background: url("../image/tournament-bg.jpg") no-repeat; background-position: center; background-size: cover; padding: clamp(58px, 4.167vw, 160px) 0 clamp(58px, 8.802vw, 260px); } .tournament-sec .tournament-wrapper { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 820px) { .tournament-sec .tournament-wrapper { flex-wrap: wrap; row-gap: 12px; justify-content: center; text-align: center; } } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul { padding-right: 7.604vw; display: flex; align-items: center; gap: clamp(18px, 1.25vw, 48px) !important; } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li { list-style: none; display: grid; align-items: center; justify-content: center; width: clamp(80px, 5.833vw, 320px); height: clamp(80px, 5.833vw, 320px); border-radius: clamp(4px, 0.417vw, 16px); } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li:nth-child(1) { border: 2px solid #ACFC00; background: rgba(172, 252, 0, 0.2); } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li:nth-child(2) { border: 2px solid #8D00F9; background: rgba(141, 0, 249, 0.2); } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li:nth-child(3) { border: 2px solid #009CFF; background: rgba(0, 156, 255, 0.2); } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li h3, .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li h6 { color: #FFFFFF !important; } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li h3 { font-weight: 700; margin-bottom: 0; } .tournament-sec .tournament-wrapper .coming-soon-wrapper ul li h6 { font-weight: 700; } .tournament-sec2 { position: relative; margin-top: clamp(-48px, -3.698vw, -98px); } .tournament-sec2 .leave-vector { position: absolute; bottom: 0; right: 2%; transform-origin: center; animation: scale-translate-animation 5s infinite ease-in-out; } @media (max-width: 1024px) { .tournament-sec2 .leave-vector { display: none; } } @keyframes scale-translate-animation { 0%, 100% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.07) translate3d(5px, -5px, 0); } } .tournament-sec2 .leave-vector:hover { animation-play-state: paused; } .tournament-sec2 .tournament-block { text-align: center; } .win-prize-sec { background: url("../image/about-banner-bg.jpg") no-repeat; background-size: cover; padding: clamp(68px, 11.901vw, 278px) 0; } @media (max-width: 1199px) { .win-prize-sec p br { display: none; } } .blog-sec { position: relative; } .blog-sec .heart-vector { position: absolute; top: 0; right: 2%; } @media (max-width: 501px) { .blog-sec .heart-vector { display: none; } } .blog-sec .blog { border-radius: clamp(18px, 1.25vw, 48px); transition: all 0.3s ease-in-out; } .blog-sec .blog.block-1 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); backdrop-filter: blur(10px); } .blog-sec .blog.block-2 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); backdrop-filter: blur(10px); } .blog-sec .blog.block-2 .label-1 { background: rgba(141, 0, 249, 0.15) !important; } .blog-sec .blog.block-3 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); backdrop-filter: blur(10px); } .blog-sec .blog.block-3 .label-1 { background: rgba(172, 252, 0, 0.15) !important; } .blog-sec .blog.block-4 { border: 3px solid #009CFF; border: 3px solid var(--Colors-Contextual-Color-Color-BG-Button-Primary-Defult-8, #009CFF); background: rgba(0, 156, 255, 0.05); backdrop-filter: blur(10px); } .blog-sec .blog.block-4 .label-1 { background: rgba(0, 156, 255, 0.15) !important; } .blog-sec .blog .blog-img { transition: all 0.3s ease-in-out; overflow: hidden; border-radius: clamp(18px, 1.25vw, 48px) clamp(18px, 1.25vw, 48px) 0px 0px; width: 100%; } .blog-sec .blog .blog-img img { width: 100%; transition: all 0.3s ease-in-out; } .blog-sec .blog .blog-content { padding: clamp(18px, 1.25vw, 48px); } .blog-sec .blog .blog-content .label-1 { padding: clamp(4px, 0.417vw, 16px) clamp(8px, 0.625vw, 24px); display: inline-flex; align-items: center; justify-content: center; border-radius: clamp(28px, 2.5vw, 68px); background: rgba(255, 214, 0, 0.15); } .blog-sec .blog .blog-content .blog-btn { display: inline-flex; align-items: center; gap: clamp(4px, 0.417vw, 16px); transition: all 0.3s ease-in-out; } .blog-sec .blog .blog-content .blog-btn svg { width: clamp(16px, 1.042vw, 40px); height: clamp(16px, 1.042vw, 40px); transition: all 0.3s ease-in-out; } .blog-sec .blog:hover .blog-img { border-radius: clamp(18px, 1.25vw, 48px) clamp(18px, 1.25vw, 48px) 0px 0px; } .blog-sec .blog:hover .blog-img img { transform: scale(1.1); } .blog-sec .blog:hover .blog-content .btn-svg svg { transform: rotate(-30deg); } .video-sec .video-wrapper { position: relative; } .video-sec .video-wrapper .video-btn { display: flex; align-items: center; justify-content: center; width: clamp(48px, 4.167vw, 190px); height: clamp(48px, 4.167vw, 190px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-sec .video-wrapper .play-btn img { width: clamp(48px, 4.167vw, 160px); height: clamp(48px, 4.167vw, 160px); } .service-banner-sec { background: url("https://uiparadox.co.uk/public/templates/royal-spins/assets/media/backgrounds/services-detail-bg.jpg") no-repeat; background-size: cover; } .service-banner-sec .content-block-1 { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); background-color: #FFFFFF; } .process-sec .process-block-1 { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); border: 1px solid #92949F; background-color: transparent; } .pricing-sec { position: relative; } .pricing-sec .patch-vector { position: absolute; left: 2%; top: 2%; transform-origin: center; animation: patch-animation 8s infinite ease-in-out; } @media (max-width: 1024px) { .pricing-sec .patch-vector { display: none; } } @keyframes patch-animation { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.04) rotate(15deg); } 100% { transform: scale(1) rotate(0deg); } } .pricing-sec .patch-vector:hover { animation-play-state: paused; } .pricing-sec .pricing { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); } .pricing-sec .pricing .stroke-line { text-align: center; } .pricing-sec .pricing .stroke-line svg { width: 100%; } .pricing-sec .pricing .price-label { padding: clamp(4px, 0.417vw, 16px) clamp(12px, 0.833vw, 32px); display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; } .pricing-sec .pricing.block-1 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); backdrop-filter: blur(10px); } .pricing-sec .pricing.block-1 .price-label { border: 0.5px solid #ACFC00; background: rgba(172, 252, 0, 0.05); } .pricing-sec .pricing.block-2 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); backdrop-filter: blur(10px); } .pricing-sec .pricing.block-2 .price-label { border: 0.5px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .pricing-sec .pricing.block-2 .cus-btn { border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.35); backdrop-filter: blur(17.5px); } .pricing-sec .pricing.block-2 .cus-btn:hover { border: 2px solid #ACFC00; background: rgba(172, 252, 0, 0.35); backdrop-filter: blur(17.5px); } .pricing-sec .pricing.block-3 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); backdrop-filter: blur(10px); } .pricing-sec .pricing.block-3 .price-label { border: 0.5px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .testimonial-sec { position: relative; } .testimonial-sec .angle-vector { position: absolute; bottom: 2%; left: 0; } @media (max-width: 1024px) { .testimonial-sec .angle-vector { bottom: -24%; } } @media (max-width: 802px) { .testimonial-sec .angle-vector { display: none; } } .testimonial-sec .testimonial { padding: clamp(18px, 1.25vw, 48px); border-radius: clamp(8px, 0.625vw, 24px); width: 462.67px; margin: 0 12px; } @media (max-width: 3840px) { .testimonial-sec .testimonial { width: 701.67px; } } @media (max-width: 1940px) { .testimonial-sec .testimonial { width: 462.67px; } } .testimonial-sec .testimonial .stroke-line svg { width: 100%; } .testimonial-sec .testimonial.tblock-1 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .testimonial-sec .testimonial.tblock-2 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .testimonial-sec .testimonial.tblock-3 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .features-sec .feature-block { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); text-align: center; } .features-sec .feature-block img { width: clamp(32px, 3.33vw, 128px); height: clamp(32px, 3.33vw, 128px); } .features-sec .feature-block .stroke-line svg { width: 100%; } .features-sec .feature-block.fblock-1 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); } .features-sec .feature-block.fblock-2 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .features-sec .feature-block.fblock-3 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .features-sec .feature-block.fblock-4 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .coming-soon-page { background: url("../image/coming-soon-bg.jpg") no-repeat; background-position: right; background-size: cover; height: 100vh; display: grid; align-items: center; position: relative; } .coming-soon-page .coming-bg { position: absolute; bottom: 0; right: 0; } .coming-soon-page .coming-soon-wrapper { display: flex; align-items: center; justify-content: center; } .coming-soon-page .coming-soon-wrapper ul { display: flex; gap: clamp(12px, 0.833vw, 32px); } .coming-soon-page .coming-soon-wrapper ul li { width: clamp(94px, 6.25vw, 240px); height: clamp(94px, 6.25vw, 240px); border-radius: clamp(4px, 0.417vw, 16px); background: transparent; border: 1px solid #FFD600; display: flex; align-items: center; flex-direction: column; justify-content: center; } @media (max-width: 399px) { .coming-soon-page .coming-soon-wrapper ul li { width: 72px; height: 72px; } } .coming-soon-page .coming-soon-wrapper ul li h2 { color: #FFFFFF !important; } .coming-soon-page .coming-soon-wrapper ul li p { color: #92949F !important; } .coming-soon-page .coming-soon-wrapper ul li:nth-child(1) { border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .coming-soon-page .coming-soon-wrapper ul li:nth-child(2) { border: 2px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .coming-soon-page .coming-soon-wrapper ul li:nth-child(3) { border: 2px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .coming-soon-page .coming-soon-wrapper ul li:nth-child(4) { border: 2px solid var(--Colors-Contextual-Color-Color-BG-Button-Primary-Defult-2, #ACFC00); background: rgba(172, 252, 0, 0.05); } @media (max-width: 1399px) { .coming-soon-page .title-area img { width: 85%; } } @media (max-width: 992px) { .coming-soon-page .title-area img { width: 75%; } } @media (max-width: 499px) { .coming-soon-page .title-area img { width: 55%; } } @media (max-width: 390px) { .coming-soon-page .title-area img { width: 50%; } } .coming-soon-page .newsletter-wrapper { display: flex; align-items: center; justify-content: center; } .coming-soon-page .newsletter-block { display: inline-flex; align-items: center; border-radius: clamp(8px, 0.625vw, 24px); padding: clamp(12px, 0.833vw, 32px); border: 0.5px solid #ACFC00; background: rgba(172, 252, 0, 0.05); display: inline-flex; align-items: center; justify-content: space-between; gap: clamp(18px, 1.25vw, 48px) !important; } @media (max-width: 1024px) { .coming-soon-page .newsletter-block { width: 55%; } } @media (max-width: 766px) { .coming-soon-page .newsletter-block { width: 100%; } } .coming-soon-page .newsletter-block .news-input { background-color: transparent; color: #FFFFFF; border: none; } .coming-soon-page .newsletter-block .news-input::placeholder { color: #FFFFFF; font-size: clamp(14px, 0.938vw, 36px); font-weight: 400; line-height: 160%; } .coming-soon-page .newsletter-block .news-input:focus { outline: none; border: none; } .coming-soon-page .newsletter .coming-soon-text { text-align: center; text-transform: uppercase; font-weight: 700; line-height: 120%; letter-spacing: -2.07px; } .coming-soon-page .newsletter .newsletter-heading { display: flex; align-items: center; gap: clamp(8px, 1.25vw, 40px); } .coming-soon-cd { display: flex; align-items: center; justify-content: center; } .coming-soon-cd ul { display: flex; gap: clamp(12px, 0.833vw, 24px); } @media (max-width: 820px) { .coming-soon-cd ul { gap: clamp(20px, 2.927vw, 48px); } } @media (max-width: 490px) { .coming-soon-cd ul { gap: clamp(70px, 14.694vw, 120px); } } .coming-soon-cd ul li { width: 4.557vw; height: 3.333vw; border-radius: clamp(5px, 0.521vw, 20px); background: transparent; display: flex; align-items: center; flex-direction: column; justify-content: center; } .coming-soon-cd ul li h2 { font-family: "Poppins", sans-serif; font-size: clamp(19px, 1.198vw, 27px); /* 23px */ font-style: normal; font-weight: 600; line-height: 120%; padding: clamp(24px, 1.667vw, 64px); border-radius: 5px; margin-bottom: 8px; } @media (max-width: 1399px) { .coming-soon-cd ul li h2 { padding: 12px; } } @media (max-width: 1024px) { .coming-soon-cd ul li h2 { font-size: clamp(18px, 1.953vw, 24px); } } @media (max-width: 768px) { .coming-soon-cd ul li h2 { font-size: clamp(18px, 2.344vw, 21px); } } @media (max-width: 490px) { .coming-soon-cd ul li h2 { font-size: 24px; padding: 20px; } } .error-sec { position: relative; } .error-sec .error-vector { position: absolute; top: -4%; left: 15%; } .error-sec .error-title { color: #8D00F9 !important; text-align: center; font-size: clamp(148px, 20.833vw, 528px); font-style: normal; font-weight: 700; line-height: 120%; letter-spacing: -12px; } @media (max-width: 767px) { .error-sec .error-title { letter-spacing: -4px; } } .payment-service-sec { position: relative; } .payment-service-sec .shine-vector { position: absolute; bottom: -10%; right: 2%; z-index: -1; } @media (max-width: 720px) { .payment-service-sec .shine-vector { display: none; } } .payment-service-sec .payment { padding: clamp(24px, 1.667vw, 64px); border-radius: clamp(18px, 1.25vw, 48px); } .payment-service-sec .payment .hover-svg svg { transition: all 0.3s ease-in-out; } .payment-service-sec .payment.block-1 { border: 3px solid #8D00F9; background: rgba(141, 0, 249, 0.05); } .payment-service-sec .payment.block-2 { border: 3px solid #FFD600; background: rgba(255, 214, 0, 0.05); } .payment-service-sec .payment.block-3 { border: 3px solid #ACFC00; background: rgba(172, 252, 0, 0.05); } .payment-service-sec .payment.block-4 { border: 3px solid #009CFF; background: rgba(0, 156, 255, 0.05); } .payment-service-sec .payment:hover .hover-svg svg { transform: rotate(30deg); } /*# sourceMappingURL=app.css.map */