/* The following @media query targets all mobile devices, including Android and iPhone. Ensure your HTML includes: */ @media (max-width: 600px) { /* buttons */ .btn34 { width: 5rem !important; min-width: 5rem !important; max-width: 5rem !important; background: linear-gradient(45deg, #f5a623, #f7d51d); color: #07120a; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 10px 24px #16a34a55, inset 0 1px 0 #ffffffaa; transition: transform 0.06s ease, filter 0.15s; display: inline-block; } .btn34:active { transform: translateY(1px); } .btn34[disabled] { filter: grayscale(1) opacity(0.6); cursor: not-allowed; } } .additional-options .option-button.active { background: #007bff; color: #fff; border: 1px solid #0056b3; } .additional-options .option-button.disabled { background: #eee; /* Removed SCSS/Sass variables and mixins for CSS compatibility. Design not altered. */ clip: auto; height: auto; margin: 0; overflow: visible; /* Removed SCSS/Sass variables and mixins for CSS compatibility. Design not altered. */ } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } pre { /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { /* -webkit-appearance: textfield; */ /* 1 */ outline-offset: -2px; /* 2 */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } .nice-select.open .list { display: block !important; } .comment-area li, .blog-page .post-details .content .main-content .right .social-icons, .blog-page .post-details .content .main-content .right .tags-area .tags, .blog-page .post-details .content .main-content .right .tags-area, .header-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .padding-top { padding-top: 80px; } .padding-bottom { padding-bottom: 80px; } @media (min-width: 992px) { .padding-top { padding-top: 120px; } .padding-bottom { padding-bottom: 120px; } } .mb-30-none { margin-bottom: -30px !important; } .tab-item { display: none; } .tab-item.active { display: block; } .tab-menu li { cursor: pointer; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-50 { margin-top: 50px; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-50 { margin-bottom: 50px; } .mb--50 { margin-bottom: -50px; } .mb-40 { margin-bottom: 40px; } .mb--40 { margin-bottom: -40px; } .pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .pt-50 { padding-top: 50px; } .pb-10 { padding-bottom: 10px; } .pb-20 { padding-bottom: 20px; } .pb-50 { padding-bottom: 50px; } .c-thumb { overflow: hidden; } .c-thumb a { display: block; } .c-thumb img { width: 100%; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .bg-one { background-color: #032055; } .bg-two { background-color: #fafbff; } .bg-three { background-color: #0a1e5e; } .bg-four { background-color: #001539; } .bg-five { background-color: #01173f; } .color-theme { color: #5949b3; } .mb--20 { margin-bottom: -20px; } .section-header { text-align: center; margin-bottom: 57px; } .section-header.white-color .title { color: #fff; } .section-header.white-color .text { color: #fff; } .section-header .title { font-size: 55px; line-height: 65px; font-weight: 900; margin-bottom: 12px; display: block; color: #000000; text-transform: uppercase; } .section-header .title.ep { margin-bottom: 22px; } .section-header .text { display: inline-block; color: #000; background-color: bisque; font-size: smaller; padding: 10px; } .allrec-wrap { display: flex; justify-content: space-between; } .title56 { font-size: 13px; line-height: 18px; margin-bottom: 11px; display: flex; color: #000000; text-transform: uppercase; background-color: bisque; /* width: ; */ padding: 10px; margin: 30px 0px 40px 0px; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } .title56 h5 { color: black; font-size: 12px; font-weight: 800; } .bg-six { background-color: #011c57; } @-webkit-keyframes scaleAni { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleAni { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes upDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes upDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(15px); transform: translateY(15px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes leftRight { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes leftRight { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } .breadcrumb-area { padding: 30px 0px 12px; position: relative; } .breadcrumb-area .lottory { position: absolute; right: 20%; top: 8%; } .breadcrumb-area .contact { position: absolute; right: 18%; top: 42%; } .breadcrumb-area .title { font-size: 14px; line-height: 15px; font-weight: 700; color: #06903f; text-shadow: 0px 10px 6px rgba(49, 64, 71, 0.1); text-transform: uppercase; } .breadcrumb-area .breadcrumb-list li { position: relative; margin-right: 35px; display: inline-block; color: #fff; font-weight: 500; } .breadcrumb-area .breadcrumb-list li::before { position: absolute; font-family: "Font Awesome 5 Free"; content: ""; right: -28px; font-weight: 700; color: black; } .breadcrumb-area .breadcrumb-list li:last-child { margin-right: 0px; } .breadcrumb-area .breadcrumb-list li:last-child::before { display: none; } .breadcrumb-area .breadcrumb-list li a { color: #e35e1e; font-weight: 500; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .breadcrumb-area .breadcrumb-list li a:hover { color: #5949b3; } /* ========================================================================== Typography CSS Starts Hear ========================================================================== */ body { background: url("../images/bg_1.jpg"); padding: 0; margin: 0; font-size: 18px; color: #5949b3; overflow-x: hidden; font-family: "Comfortaa", cursive; } h1, h2, h3, h4, h5, h6 { color: #fbfbff; font-family: "Comfortaa"; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #5949b3; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #5949b3; } a { display: inline-block; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } a:hover { text-decoration: none; color: inherit; } ul { margin: 0; padding: 0; } ul li { list-style: none; padding: 5px 0; } select, input, textarea, button { width: 100%; background-color: #ffffff; border: 1px solid #2d4186; outline: none; } textarea { height: 200px; resize: none; padding: 10px; } input, button, select { height: 30px; color: #333333; } label, button, select { cursor: pointer; } input { background: transparent; border: 1px solid #2d4186; padding-left: 10px; } input:focus { border: 1px solid #5949b3; } input[type="submit"] { cursor: pointer; background-color: #9aace5; color: #ffffff; font-weight: 700; padding: 0; } .bg_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .scrollToTop { width: 45px; height: 45px; line-height: 45px; padding: 0; color: #ffffff; z-index: 999; bottom: 30px; right: 30px; position: fixed; -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); background: #5949b3; text-align: center; } .scrollToTop:hover { color: #ffffff; } .scrollToTop.active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); animation: bounceInDown 2s; -webkit-animation: bounceInDown 2s; -moz-animation: bounceInDown 2s; } .scrollToTop img { width: 100%; } .video-button { color: #ffffff; border: none; text-align: center; } .video-button:hover { color: #ffffff; } .video-button i { line-height: 70px; font-size: 36px; margin-left: 8px; color: #ffffff; } .video-button { width: 70px; height: 70px; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #5949b3; } .video-button a { display: block; position: relative; z-index: 1; } .video-button a img { width: 100%; } .video-button a i { line-height: 75px; font-size: 36px; margin-left: 8px; } .video-button::before, .video-button::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #5949b3; z-index: -10; } .video-button::before { z-index: -10; -webkit-animation: inner-ripple 2000ms linear infinite; animation: inner-ripple 2000ms linear infinite; } .video-button::after { z-index: -10; -webkit-animation: outer-ripple 2000ms linear infinite; animation: outer-ripple 2000ms linear infinite; } @keyframes outer-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-filter: alpha(opacity=50); } 80% { transform: scale(1.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } 100% { transform: scale(2.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); } } @-webkit-keyframes outer-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 80% { transform: scale(2.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(2.5); -moz-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); } 100% { transform: scale(3.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(3.5); -moz-transform: scale(3.5); -ms-transform: scale(3.5); -o-transform: scale(3.5); } } /* inner ripple */ @keyframes inner-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 30% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 100% { transform: scale(1.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } } @-webkit-keyframes inner-ripple { 0% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 30% { transform: scale(1); filter: alpha(opacity=50); opacity: 0.5; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 100% { transform: scale(1.5); filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } } @keyframes pulseOne { 0% { box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); -webkit-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); -moz-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); } 40% { box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); -webkit-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); -moz-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); } 80% { box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); -webkit-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); -moz-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); } 100% { box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); -webkit-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); -moz-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); } } @-webkit-keyframes pulseOne { 0% { box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); -webkit-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); -moz-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0.851), 0 0 0 0 rgba(89, 73, 179, 0.851); } 40% { box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); -webkit-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); -moz-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0.851); } 80% { box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); -webkit-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); -moz-box-shadow: 0 0 0 20px rgba(89, 73, 179, 0), 0 0 0 20px rgba(89, 73, 179, 0); } 100% { box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); -webkit-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); -moz-box-shadow: 0 0 0 0 rgba(89, 73, 179, 0), 0 0 0 0 rgba(89, 73, 179, 0); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rev-rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); -ms-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } @-webkit-keyframes rev-rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); -ms-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } .custom-button1 { background-image: -o-linear-gradient(83deg, #ec1379 0%, #6c0092 100%); background-color: #07913b; box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); color: #ffffff; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 9px; font-size: 14px; font-weight: bolder; line-height: 21px; } .custom-button1:hover { color: #fff; } .custom-button8 { background-color: #dc3545; box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); border-color: #fea036; color: #ffffff; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 9px; font-size: 14px; font-weight: bolder; line-height: 21px; } .custom-button2 { background-image: -webkit-gradient( linear, left bottom, left top, from(#f4ba2e), to(#fea036) ); background-image: -o-linear-gradient(bottom, #f4ba2e 0%, #fea036 100%); background-image: linear-gradient(0deg, #f4ba2e 0%, #fea036 100%); box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); border-color: #fea036; color: #ffffff; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 9px; font-size: 14px; font-weight: bolder; line-height: 21px; } .custom-button2:hover { color: #fff; } .preloader { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: #fafbff; overflow: hidden; } .preloader .preloader-inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .preloader .preloader-inner .preloader-icon { width: 72px; height: 72px; display: inline-block; padding: 0px; } .preloader .preloader-inner .preloader-icon span { position: absolute; display: inline-block; width: 72px; height: 72px; border-radius: 100%; background: #032055; -webkit-animation: preloader-fx 1.6s linear infinite; animation: preloader-fx 1.6s linear infinite; } .preloader .preloader-inner .preloader-icon span:last-child { animation-delay: -0.8s; -webkit-animation-delay: -0.8s; } @keyframes preloader-fx { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; } } @-webkit-keyframes preloader-fx { 0% { -webkit-transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } .header-top-area .header-top-area-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 0px 10px; background-color: antiquewhite; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } .header-top-area { margin-bottom: 30px; } .header-top-area .header-top-area-inner .logo img { max-width: 308px; } .header-top-area .header-top-area-inner .right-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-top-area .header-top-area-inner .right-area .log-reg-area { margin-right: 30px; } .header-top-area .header-top-area-inner .right-area .log-reg-area .custom-button1:first-child { margin-right: 18px; } .header-top-area .header-top-area-inner .right-area .cart-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-top-area .header-top-area-inner .right-area .cart-area .icon { position: relative; } .header-top-area .header-top-area-inner .right-area .cart-area .icon span { position: absolute; top: -12px; right: -12px; background: #7ac70b; z-index: 5; font-size: 12px; line-height: 12px; border-radius: 50%; padding: 6px 6px; color: #fff; } .header-top-area .header-top-area-inner .right-area .cart-area .amount { margin-left: 20px; } .header-top-area .header-top-area-inner .right-area .cart-area .amount .mony { font-size: 18px; line-height: 25px; font-weight: 700; margin-bottom: 0px; } .header-top-area .header-top-area-inner .right-area .cart-area .amount p { margin-bottom: 0px; font-size: 14px; line-height: 20px; color: #7ac70b; font-weight: 600; } .header-wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-wrapper .logo { width: 170px; } .header-wrapper .logo a { display: inline-block; } .header-wrapper .logo a img { max-width: 100%; } .header-wrapper .menu li.separator { margin-right: 7px; } .header-wrapper .menu li .language-select { margin-left: 10px; } .header-wrapper .menu li a { padding: 5px 12px; } @media (min-width: 992px) { .header-wrapper .menu { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-wrapper .menu li { padding: 5px 12px; position: relative; } .header-wrapper .menu li a { color: #e9eeff; font-size: 16px; font-weight: 600; text-transform: uppercase; } .header-wrapper .menu li .submenu { position: absolute; top: 100%; left: 6px; background: #ffffff; min-width: 240px; padding: 20px 0; -webkit-box-shadow: 0px 0px 11.7px 1.3px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 11.7px 1.3px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; -webkit-transform: translateY(15px); -ms-transform: translateY(15px); transform: translateY(15px); } .header-wrapper .menu li .submenu li { padding: 0 20px; } .header-wrapper .menu li .submenu li a { text-transform: capitalize; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; color: #292929; } .header-wrapper .menu li .submenu li a:hover, .header-wrapper .menu li .submenu li a.active { padding-left: 10px; color: #5949b3; } .header-wrapper .menu li .submenu::before { position: absolute; content: ""; top: 0; left: 15px; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); width: 0; height: 0; border: 10px solid #ffffff; border-bottom-width: 15px; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; } .header-wrapper .menu li .submenu li .submenu { left: calc(100% + 20px); top: 0; -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .header-wrapper .menu li .submenu li .submenu::before { left: -2px; top: 3px; -webkit-transform: translateX(-100%) rotate(-90deg); -ms-transform: translateX(-100%) rotate(-90deg); transform: translateX(-100%) rotate(-90deg); } .header-wrapper .menu li .submenu li:hover > .submenu { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .header-wrapper .menu li:hover > .submenu { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: block !important; } .header-wrapper .menu li .nice-select { background: transparent; border: none; color: #ffffff; padding: 0px 25px 0px 0px; } .header-wrapper .menu li .nice-select::after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; } .header-wrapper .menu li .nice-select .list li { color: #222; padding: 0px 10px; } .header-wrapper .menu li.separator span { color: #fff; } .header-wrapper .menu li .serch-icon { cursor: pointer; color: #fff; } .header-wrapper .menu li .serch-icon i { color: #fff; font-size: 16px; } .header-wrapper .menu li.user-profile .submenu { left: auto !important; right: 0px !important; } .header-wrapper .menu li.user-profile .submenu::before { left: auto; right: 15px; } .header-wrapper .menu > li > a { position: relative; } .header-wrapper .menu > li > a::before { width: calc(100% - 10px); height: 2px; background: #fff; top: calc(100% + 18px); position: absolute; content: ""; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; } .header-wrapper .menu > li > a:hover::before, .header-wrapper .menu > li > a.active::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .header-wrapper .menu > li.header-button a::before { display: none; } } .header-wrapper .menu li.header-button a { background-image: -webkit-linear-gradient( 169deg, #5560ff 17%, #aa52a1 63%, #ff4343 100% ); padding: 10px 49px; font-weight: 600; display: inline-block; } .header-wrapper .menu li.header-button a:hover { -webkit-box-shadow: 0px 10px 15px 0px rgba(59, 55, 188, 0.5); box-shadow: 0px 10px 15px 0px rgba(59, 55, 188, 0.5); } .header-section { background-image: linear-gradient( to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12 ); box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); } .header-section.header-active { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 99; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); animation-name: fadeInDown; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; } .header-bar { width: 30px; height: 25px; cursor: pointer; position: relative; } .header-bar span { display: inline-block; height: 3px; width: 100%; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; background-color: #ffffff; position: absolute; left: 0; } .header-bar span:nth-child(2) { top: 52%; -webkit-transform: translateY(-65%); -ms-transform: translateY(-65%); transform: translateY(-65%); } .header-bar span:first-child { top: 0; } .header-bar span:last-child { bottom: 0; } .header-bar.active span:first-child { -webkit-transform: rotate(45deg) translate(6px, 13px); -ms-transform: rotate(45deg) translate(6px, 13px); transform: rotate(45deg) translate(6px, 13px); } .header-bar.active span:nth-child(2) { opacity: 0; } .header-bar.active span:last-child { -webkit-transform: rotate(-45deg) translate(3px, -9px); -ms-transform: rotate(-45deg) translate(3px, -9px); transform: rotate(-45deg) translate(3px, -9px); } .tab-item { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; } .menu-item-has-children > a::after { content: ""; font-weight: 600; font-family: "Font Awesome 5 Free"; margin-left: 5px; } /*Banner-Section Starts Here*/ .banner-section { padding: 198px 0 222px; position: relative; background: url("../images/hero-bg.gif"); background-repeat: no-repeat; background-position: bottom; background-size: cover; position: relative; overflow: hidden; box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); } .banner-section .banner-subtitle { font-size: 36px; line-height: 46px; font-weight: 400; color: #fff; margin-bottom: 0px; text-transform: uppercase; } .banner-section .banner-title { font-size: 90px; line-height: 100px; margin-top: 0px; color: #fff; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; text-shadow: 0px 10px 0px rgba(49, 64, 71, 0.15); } .banner-section .text { font-size: 22px; line-height: 33px; color: #fff; font-weight: 400; margin-bottom: 25px; } .banner-section .custom-button2 { padding: 13px 30px; } /* Draw-Section Starts Here*/ .draw-section { } .draw-section-announce { margin-top: 20px; } .draw-section .draw-slider { position: relative; } .draw-section .draw-slider .item { padding: 30px 15px; } .draw-section .draw-slider .owl-nav .owl-prev, .draw-section .draw-slider .owl-nav .owl-next { position: absolute; top: 50%; background-color: white; -webkit-box-shadow: 0px 3px 16px 0px rgba(59, 71, 139, 0.25); box-shadow: 0px 3px 16px 0px rgba(59, 71, 139, 0.25); border-radius: 50%; width: 40px; height: 40px; font-size: 18px; line-height: 40px; z-index: 9; color: #5949b3; } .draw-section .draw-slider .owl-nav .owl-prev:hover, .draw-section .draw-slider .owl-nav .owl-next:hover { background-image: -webkit-gradient( linear, left bottom, left top, from(#f4ba2e), to(#fea036) ); background-image: -o-linear-gradient(bottom, #f4ba2e 0%, #fea036 100%); background-image: linear-gradient(0deg, #f4ba2e 0%, #fea036 100%); color: #fff; } .draw-section .draw-slider .owl-nav .owl-prev:focus, .draw-section .draw-slider .owl-nav .owl-next:focus { outline: 0px; } .draw-section .draw-slider .owl-nav .owl-next { right: -10px; } .draw-section .draw-slider .owl-nav .owl-prev { left: -10px; } .single-draw { text-align: center; background-color: #2f5681; padding: 15px; box-shadow: 0 0 0 2px rgb(213 213 213), 8px 8px 0 0 rgb(226 216 218); -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; position: relative; overflow: hidden; } .single-draw span { color: #fff !important; } .single-draw .overlay { position: absolute; top: 0px; left: 0px; width: 100%; } .single-draw .icon img { height: 82px; margin-bottom: 17px; position: relative; z-index: 6; width: auto; display: inline-block; } .single-draw h4 { font-size: 14px; line-height: 20px; font-weight: 700; } .single-draw a { margin-top: 12px; margin-bottom: 21px; } .single-draw .next-draw .text { font-size: 14px; line-height: 24px; font-weight: 700; display: block; margin-bottom: 6px; color: #fff !important; } .single-draw .next-draw .text span { color: #fff !important; } .single-draw .next-draw .time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .single-draw .next-draw .time img { margin-right: 10px; width: auto; } .single-draw .next-draw .time .time-countdown { font-size: 16px; line-height: 20px; font-weight: 500; } .single-draw:hover { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } /* Features-Section Starts Here*/ .features-section { margin: 70px 0px 70px 0px; } .single-feature { text-align: center; text-align: center; background-color: darkslategrey; padding: 15px; box-shadow: 0 0 0 2px rgb(231 231 231), 8px 8px 0 0 rgb(246 246 246); opacity: 0.9; } .single-feature .icon img { height: 70px; } .single-feature .title { margin-top: 22px; font-size: 15px; line-height: 34px; font-weight: 500; margin-bottom: 0px; } /* Lottery-Result-Section Starts Here*/ .lottery-result { position: relative; background-color: bisque; padding: 50px 0px; } .lottery-result .section-header { margin-bottom: 40px; } .lottery-result .bg-image { position: absolute; bottom: 0px; left: 0px; width: 100%; } .lottery-result .result-box { box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); background-color: cadetblue; } .lottery-result .result-box .box-header { font-size: 21px; line-height: 28px; font-weight: 900; margin-bottom: 11px; display: flex; color: #000000; text-transform: uppercase; background-color: bisque; width: max-content; padding: 10px; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } .lottery-result .view-all { display: inline-block; font-size: 20px; line-height: 30px; font-weight: 600; margin-top: 5px; } .lottery-result .view-all:hover { text-decoration: underline; } .result-list .single-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0px 3px 43px 0px rgba(12, 0, 255, 0.1); box-shadow: 0px 3px 43px 0px rgba(12, 0, 255, 0.1); overflow: hidden; margin-bottom: 30px; } .result-list .single-list .light-area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .result-list .single-list .light-area .light-area-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 20px; } .result-list .single-list .light-area .light-area-top .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .result-list .single-list .light-area .light-area-top .left img { height: 85px; margin-right: 15px; } .result-list .single-list .light-area .light-area-top .left h4 { font-weight: 500; font-size: 15px; } .result-list .single-list .light-area .light-area-top .right { text-align: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .result-list .single-list .light-area .light-area-top .right span { font-size: 14px; line-height: 24px; color: #273bff; font-weight: 600; } .result-list .single-list .light-area .light-area-top .right h6 { font-size: 16px; line-height: 26px; font-weight: 700; margin-bottom: 0px; } .result-list .single-list .light-area .light-area-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 13px; } .result-list .single-list .light-area .light-area-bottom .left p { font-size: 15px; line-height: 25px; font-weight: 700; margin-bottom: 10px; } .result-list .single-list .light-area .light-area-bottom .left .numbers { display: block; } .result-list .single-list .light-area .light-area-bottom .left .numbers span { width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; color: #fff; display: inline-block; font-size: 18px; font-weight: 600; background-image: -o-linear-gradient( 4deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); background-image: linear-gradient( 86deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); -webkit-box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); } .result-list .single-list .light-area .light-area-bottom .right { text-align: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .result-list .single-list .light-area .light-area-bottom .right span { font-size: 14px; line-height: 24px; color: #273bff; font-weight: 600; } .result-list .single-list .light-area .light-area-bottom .right h6 { font-size: 24px; line-height: 34px; font-weight: 700; margin-bottom: 0px; } .result-list .single-list .color-area { width: 310px; padding: 30px; background-image: url(../images/result-bg.jpg); background-size: cover; background-position: center; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .result-list .single-list .color-area .top span { color: #00deff; font-size: 18px; line-height: 28px; font-weight: 600; } .result-list .single-list .color-area .top h6 { color: #fff; font-size: 14px; line-height: 17px; font-weight: 500; margin-bottom: 0px; } .result-list .single-list .color-area .bottom span { color: #27ff5a; font-size: 18px; line-height: 28px; font-weight: 600; } .result-list .single-list .color-area .bottom h6 { color: #fff; font-size: 24px; line-height: 34px; font-weight: 700; margin-bottom: 0px; } /* Check-Number-Section Starts Here*/ .check-number { padding: 107px 0px 120px; position: relative; } .check-number .section-header { margin-bottom: 40px; } .check-number .img-left { position: absolute; left: 0px; top: 0px; } .check-number .img-right { position: absolute; bottom: 0px; right: 0px; } .check-number .check-box { -webkit-box-shadow: 0px 13px 120px 0px rgba(45, 70, 222, 0.2); box-shadow: 0px 13px 120px 0px rgba(45, 70, 222, 0.2); padding: 22px 30px 30px; text-align: center; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .check-number .check-box .title { font-size: 20px; line-height: 30px; font-weight: 700; margin-bottom: 13px; } .check-number .check-box .form-area input, .check-number .check-box .form-area select { border: 1px solid #eae9f9; background: #f7fbff; padding: 0px 20px; font-size: 15px; height: 50px; color: #5949b3; font-weight: 600; } .check-number .check-box .form-area input::-webkit-input-placeholder, .check-number .check-box .form-area select::-webkit-input-placeholder { color: #5949b3 !important; } .check-number .check-box .form-area input::-moz-placeholder, .check-number .check-box .form-area select::-moz-placeholder { color: #5949b3 !important; } .check-number .check-box .form-area input:-ms-input-placeholder, .check-number .check-box .form-area select:-ms-input-placeholder { color: #5949b3 !important; } .check-number .check-box .form-area input::-ms-input-placeholder, .check-number .check-box .form-area select::-ms-input-placeholder { color: #5949b3 !important; } .check-number .check-box .form-area input::placeholder, .check-number .check-box .form-area select::placeholder { color: #5949b3 !important; } .check-number .check-box .form-area .input-round { width: 40px; height: 40px; padding: 0px 5px; text-align: center; } .check-number .check-box .form-area .input-round:focus { border-color: #f792cd; } .check-number .check-box .form-area.input-round-wrapper { height: 50px; display: block; } .check-number .check-box:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } /* Contact-Section Starts Here*/ .contact-section { position: relative; padding: 118px 0px 120px; } .contact-section .section-header { margin-bottom: 30px; } .contact-section .img-left { position: absolute; top: 35%; left: 0px; } .contact-section .img-right { position: absolute; right: 0px; top: 30%; } .contact-section .contact-form-wrapper .single-input { position: relative; margin-bottom: 30px; } .contact-section .contact-form-wrapper .single-input i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: -o-linear-gradient(83deg, #ec1379 0%, #6c0092 100%); background-image: linear-gradient(7deg, #ec1379 0%, #6c0092 100%); width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; color: #fff; font-size: 14px; } .contact-section .contact-form-wrapper .single-input input { border-left: 0px; border-right: 0px; border-top: 0px; border-radius: 0px; padding: 0px 20px 0px 49px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 50px; } .contact-section .contact-form-wrapper .single-input input::-webkit-input-placeholder { color: #8790ad; font-size: 16px; } .contact-section .contact-form-wrapper .single-input input::placeholder, .contact-section .contact-form-wrapper .single-input input::-webkit-placeholder { color: #8790ad; font-size: 16px; } .contact-section .contact-form-wrapper .single-input textarea { border-left: 0px; border-right: 0px; border-top: 0px; border-radius: 0px; padding: 0px; padding: 0px 20px 0px 49px; height: 260px; background: none; margin-top: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .contact-section .contact-form-wrapper .single-input textarea::-webkit-input-placeholder { color: #8790ad; font-size: 16px; } .contact-section .contact-form-wrapper .single-input textarea::placeholder, .contact-section .contact-form-wrapper .single-input textarea::-webkit-placeholder { color: #8790ad; font-size: 16px; } .contact-section .contact-form-wrapper .custom-button { text-transform: uppercase; } /* Blog-Page */ .blog-page { margin-top: -130px; padding-bottom: 120px; } .single-blog { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; background-image: -webkit-gradient( linear, left top, right top, from(#8a04b9), color-stop(48%, #942fb8), to(#6c0092) ); background-image: -o-linear-gradient( left, #8a04b9 0%, #942fb8 48%, #6c0092 100% ); background-image: linear-gradient( 90deg, #8a04b9 0%, #942fb8 48%, #6c0092 100% ); -webkit-box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.19); box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.19); margin-bottom: 30px; } .single-blog .img { width: 450px; } .single-blog .img img { width: 100%; } .single-blog .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; padding: 30px; } .single-blog .content .title { font-size: 24px; line-height: 34px; color: #fff; font-weight: 700; margin-bottom: 12px; } .single-blog .content .meta-list { margin-bottom: 14px; } .single-blog .content .meta-list li { display: inline-block; font-size: 14px; line-height: 24px; color: #fff; margin-right: 7px; } .single-blog .content .meta-list li:last-child { margin-right: 0px; } .single-blog .content .meta-list li a { color: #ff006f; } .single-blog .content .text { color: #fff; margin-bottom: 25px; } .pagination { border: 1px solid rgba(0, 0, 0, 0.08); padding: 10px 10px 10px; display: inline-block; } .pagination li { padding: 0px; display: inline-block; background-color: white; -webkit-box-shadow: 0px 2px 17px 0px rgba(60, 49, 172, 0.1); box-shadow: 0px 2px 17px 0px rgba(60, 49, 172, 0.1); width: 40px; height: 40px; line-height: 40px; font-size: 16px; color: #b6aac9; text-align: center; margin-right: 30px; position: relative; cursor: pointer; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .pagination li:last-child { margin-right: 0px; -webkit-box-shadow: none; box-shadow: none; } .pagination li:last-child::before { display: none; } .pagination li:first-child { -webkit-box-shadow: none; box-shadow: none; } .pagination li.active, .pagination li:hover { color: #5d4a7b; } .pagination li::before { position: absolute; content: ""; right: -15px; top: 0px; height: 100%; width: 1px; background: #e1d9ff; } .blog-page .post-details { overflow: hidden; background: #fff; margin-bottom: 30px; -webkit-box-shadow: 0px 2px 10px 0px rgba(60, 49, 172, 0.1); box-shadow: 0px 2px 10px 0px rgba(60, 49, 172, 0.1); } .blog-page .post-details .content { padding: 55px 60px 60px; } .blog-page .post-details .content .top-area .date { font-size: 16px; line-height: 26px; } .blog-page .post-details .content .top-area .date span { color: #9d9cab; margin-left: 20px; } .blog-page .post-details .content .top-area .title { font-size: 40px; line-height: 50px; font-weight: 700; margin-bottom: 38px; } .blog-page .post-details .content .main-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .blog-page .post-details .content .main-content .left { width: 50px; margin-right: 30px; text-align: center; } .blog-page .post-details .content .main-content .left .avatar img { border: 2px solid #5334f0; width: 50px; height: 50px; border-radius: 50%; } .blog-page .post-details .content .main-content .left .meta-list { margin-top: 15px; } .blog-page .post-details .content .main-content .left .meta-list a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 14px; text-align: center; line-height: 30px; } .blog-page .post-details .content .main-content .left .meta-list a i { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -o-linear-gradient(83deg, #ec1379 0%, #6c0092 100%); background-image: linear-gradient(7deg, #ec1379 0%, #6c0092 100%); } .blog-page .post-details .content .main-content .left .meta-list span { display: block; font-size: 16px; line-height: 26px; color: #7679ab; } .blog-page .post-details .content .main-content .right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .blog-page .post-details .content .main-content .right .post-content img { margin-bottom: 23px; width: 100%; margin-top: 10px; } .blog-page .post-details .content .main-content .right .tags-area { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 26px; padding-top: 9px; } .blog-page .post-details .content .main-content .right .tags-area .tags { margin-top: 25px; } .blog-page .post-details .content .main-content .right .tags-area .tags span { font-size: 18px; font-weight: 600; color: #5949b3; } .blog-page .post-details .content .main-content .right .tags-area .tags a { font-size: 14px; line-height: 24px; color: #5949b3; } .blog-page .post-details .content .main-content .right .tags-area .tags a::after { content: ","; } .blog-page .post-details .content .main-content .right .tags-area .tags a:last-child::after { display: none; } .blog-page .post-details .content .main-content .right .tags-area .social-icons { margin-top: 13.5px; } .blog-page .post-details .content .main-content .right .social-icons { margin: -7.5px; } .blog-page .post-details .content .main-content .right .social-icons li { padding: 7.5px; } .blog-page .post-details .content .main-content .right .social-icons li a { width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); color: #a3a5ac; font-size: 14px; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .blog-page .post-details .content .main-content .right .social-icons li a:hover { background: #ee4730; color: #fff; -webkit-box-shadow: 0px 5px 9px 0px rgba(238, 71, 48, 0.54); box-shadow: 0px 5px 9px 0px rgba(238, 71, 48, 0.54); } .blog-comment { margin-top: 54px; } @media (min-width: 768px) { .blog-comment { margin-top: 54px; } } @media (min-width: 992px) { .blog-comment { margin-top: 54px; } } .blog-comment > .title { padding-bottom: 13px; font-size: 24px; line-height: 34px; font-weight: 700; } .comment-area li { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 21px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .comment-area li .blog-thumb { width: 65px; height: 65px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; } .comment-area li .blog-thumb a { display: block; border-radius: 50%; overflow: hidden; } .comment-area li .blog-thumb a img { width: 100%; } .comment-area li .blog-thumb-info { width: 150px; padding-left: 30px; } .comment-area li .blog-thumb-info span { margin-bottom: 0px; display: block; color: #9aace5; font-size: 16px; line-height: 26px; } .comment-area li .blog-thumb-info .title { font-size: 18px; line-height: 28px; font-weight: 500; } .comment-area li .blog-content { width: calc(100% - 215px); padding-left: 30px; } .comment-area li .blog-content p { margin: 0 !important; } /*Leave-Comment Starts*/ .leave-comment { margin-top: 20px; } @media (min-width: 768px) { .leave-comment { margin-top: 35px; } } @media (min-width: 992px) { .leave-comment { margin-top: 22px; } } .leave-comment .title { padding-bottom: 0px; font-size: 24px; line-height: 34px; font-weight: 700; margin-bottom: 4px; } .blog-form { margin-bottom: -30px; } .blog-form .custom-button2 { text-transform: uppercase; padding: 10px 30px; } .blog-form .form-group { margin-bottom: 30px; } .blog-form .form-group input { outline: none; border: none; border-bottom: 1px solid #d5d6d9; -webkit-box-shadow: none; box-shadow: none; margin-bottom: 22px; background: none; padding: 0px 0px; border-radius: 0px; height: 50px; } .blog-form .form-group textarea { color: rgba(51, 51, 51, 0.6); outline: none; border: none; border-bottom: 1px solid #d5d6d9; -webkit-box-shadow: none; box-shadow: none; background: none; padding: 0px 0px; border-radius: 0px; height: 150px; margin-top: 36px; } .blog-form .form-group input:hover { border-bottom: 1px solid #f87115; } .blog-form .form-group textarea:hover { border-bottom: 1px solid #f87115; } /* About-counter Section Start */ .about-counter { margin-top: -130px; } .about-counter .about-counter-image { -webkit-box-shadow: 0px -14px 19.2px 0.8px rgba(66, 58, 232, 0.2); box-shadow: 0px -14px 19.2px 0.8px rgba(66, 58, 232, 0.2); overflow: hidden; } .about-counter .about-counter-image img { width: 100%; } .about-counter .counter-area { position: relative; z-index: 2; } .about-counter .counter-area .counter-area-inner { margin-top: -75px; border-radius: 100px; -webkit-box-shadow: 0px 13px 21px 0px rgba(215, 215, 255, 0.6); box-shadow: 0px 13px 21px 0px rgba(215, 215, 255, 0.6); background: #fff; padding: 28px 0px 30px; } .about-counter .counter-area .c-box { position: relative; text-align: center; padding: 0px 15px; } .about-counter .counter-area .c-box .icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about-counter .counter-area .c-box .number { font-size: 40px; line-height: 50px; font-weight: 500; color: #5949b3; margin-bottom: 3px; } .about-counter .counter-area .c-box .text { font-weight: 700; margin-bottom: 0px; } /* About-info Section Start */ .about-info { padding: 120px 0px 245px; } .about-info .left-image img { max-width: 100%; } .about-info .right-content .section-header { text-align: left; margin-bottom: 0px; } /* Testimonial Section Start */ .testimonial { background: url(../images/teastmonial.jpg); background-size: cover; background-repeat: no-repeat; position: relative; } .testimonial .about-feature { position: relative; z-index: 9; top: -125px; } .testimonial .about-feature .a-f-box { position: relative; z-index: 9; -webkit-box-shadow: 0px 13px 79px 0px rgba(150, 150, 213, 0.3); box-shadow: 0px 13px 79px 0px rgba(150, 150, 213, 0.3); border-radius: 10px; text-align: center; padding: 30px 30px 26px; background: #fff; } .testimonial .about-feature .a-f-box img { width: 125px; height: 125px; margin-bottom: 23px; } .testimonial .about-feature .a-f-box .title { margin-bottom: 14px; font-size: 24px; line-height: 34px; font-weight: 500; } .testimonial .about-feature .a-f-box p { margin-bottom: 0px; } .testimonial .about-testimonial { margin-top: -5px; padding: 0px 0px 120px; position: relative; } .testimonial .about-testimonial img { width: 100%; } .testimonial .about-testimonial .client { position: absolute; display: inline-block; } .testimonial .about-testimonial .client .img img { max-width: 130px; max-height: 130px; border-radius: 50%; -webkit-box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.2); box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.2); } .testimonial .about-testimonial .client.one { top: 150px; left: 10%; } .testimonial .about-testimonial .client.two { top: 50px; left: 35%; } .testimonial .about-testimonial .client.three { top: 55%; left: 20%; } .testimonial .about-testimonial .client.four { top: 33%; left: 40%; } .testimonial .about-testimonial .client.five { right: 100px; top: 20%; } .testimonial .about-testimonial .client.six { right: 50px; top: 60%; } .popover.mypopover { padding: 20px 30px 23px !important; -webkit-box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.2) !important; box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.2) !important; border-radius: 20px !important; border: none !important; max-width: 400px !important; } .popover.mypopover .client-review { text-align: center; } .popover.mypopover .client-review .top-text { color: #4050e9; font-size: 20px; line-height: 30px; font-weight: 600; margin-bottom: 14px; } .popover.mypopover .client-review .stars { color: #fd7e14; font-size: 14px; margin-bottom: 10px; } .popover.mypopover .client-review .bottom-text { font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 25px; } .popover.mypopover .client-review .client-info { border-top: 1px solid #dab9fa; padding-top: 21px; } .popover.mypopover .client-review .client-info .name { font-size: 24px; line-height: 34px; font-weight: 500; margin-bottom: 5px; } .popover.mypopover .client-review .client-info .date { font-size: 14px; line-height: 24px; margin-bottom: 0px; } /* Singlelottery Section Start */ .singlelottery { position: relative; margin-top: 29px; text-align: center; } .singlelottery .steps { border-radius: 10px; -webkit-box-shadow: 2.505px 17.825px 59px 0px rgba(45, 112, 196, 0.2); box-shadow: 2.505px 17.825px 59px 0px rgba(45, 112, 196, 0.2); padding: 33px 30px 80px; display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .singlelottery .steps .left { min-width: 260px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 30px; } .singlelottery .steps .left h4 { font-size: 24px; line-height: 34px; font-weight: 500; } .singlelottery .steps .right ul li { display: inline-block; margin-right: 40px; } .singlelottery .steps .right ul li:last-child { margin-right: 0px; } .singlelottery .steps .right ul li .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .singlelottery .steps .right ul li .box p { margin-bottom: 0px; padding-left: 20px; font-weight: 600; } .singlelottery .time-wrapper { margin-top: -50px; border-radius: 10px; background-color: #f5f1fd; -webkit-box-shadow: 2.505px 17.825px 59px 0px rgba(45, 112, 196, 0.2); box-shadow: 2.505px 17.825px 59px 0px rgba(45, 112, 196, 0.2); display: inline-block; padding: 30px 40px; min-width: 600px; text-align: center; } .singlelottery .time-wrapper .time-counter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .singlelottery .time-wrapper .time-counter img { margin-right: 10px; position: relative; top: -3px; } .singlelottery .time-wrapper .time-counter p { color: #e8127a; font-size: 36px; line-height: 46px; font-weight: 700; margin-bottom: 0px; } .pick-number-area { padding: 20px 0px; } .pick-number-area .single-pick { -webkit-box-shadow: 0px 5px 13px 0px rgba(40, 63, 163, 0.2); box-shadow: 0px 5px 13px 0px rgba(40, 63, 163, 0.2); border-radius: 10px; overflow: hidden; } .pick-number-area .single-pick .header-area { background: #fef1f1; padding: 10px 20px 20px; } .pick-number-area .single-pick .header-area .title { font-weight: 700; font-size: 15px; line-height: 30px; margin-bottom: 12px; } .pick-number-area .single-pick .header-area .buttons a { font-size: 14px; padding: 2px 12px; } .pick-number-area .single-pick .header-area .buttons a i { font-size: 10px; margin-right: 4px; } .pick-number-area .single-pick .body-area { padding: 14px 20px 14px; } .pick-number-area .single-pick .body-area ul li { display: inline-block; } .pick-number-area .single-pick .body-area ul li span { width: 30px; height: 30px; line-height: 30px; font-weight: 600; background: #ededff; color: #595192; border-radius: 50%; display: inline-block; font-size: 14px; cursor: pointer; } .pick-number-area .single-pick .body-area ul li span:hover { background-image: -o-linear-gradient( 4deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); background-image: linear-gradient( 86deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); -webkit-box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); color: #fff; } .pick-number-area .single-pick .body-area .separator { border-top: 1px solid #c8c4e1; margin-top: 15px; padding-top: 14px; } .pick-number-area .single-pick .body-area .separator p { font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: 5px; } .pick-number-area .add-ticket-btn { border-radius: 10px; border: 1px solid #e5e7ff; display: inline-block; margin-top: 30px; padding: 10px 30px; text-transform: uppercase; font-weight: 600; } .pick-number-area .add-ticket-btn i { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient( linear, left bottom, left top, from(#f4ba2e), to(#fea036) ); background-image: -o-linear-gradient(bottom, #f4ba2e 0%, #fea036 100%); background-image: linear-gradient(0deg, #f4ba2e 0%, #fea036 100%); margin-right: 10px; } .pick-number-area .add-ticket-btn:hover { background: #5949b3; color: #fff; } .pick-number-area .add-ticket-btn:hover i { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient( linear, left bottom, left top, from(#fff), to(#fff) ); background-image: -o-linear-gradient(bottom, #fff 0%, #fff 100%); background-image: linear-gradient(0deg, #fff 0%, #fff 100%); } .pick-number-area .cart-summary { border-radius: 10px; background-image: -webkit-gradient( linear, left bottom, left top, from(#c165dd), to(#5c27fe) ); background-image: -o-linear-gradient(bottom, #c165dd 0%, #5c27fe 100%); background-image: linear-gradient(to top, #c165dd 0%, #5c27fe 100%); -webkit-box-shadow: 0px 26px 21px 0px rgba(43, 59, 181, 0.2); box-shadow: 0px 26px 21px 0px rgba(43, 59, 181, 0.2); } .pick-number-area .cart-summary .top-area { padding: 23px 20px 18px; } .pick-number-area .cart-summary .top-area .title { font-size: 24px; line-height: 34px; font-weight: 700; color: #fff; margin-bottom: 11px; } .pick-number-area .cart-summary .top-area .text { color: #fff; font-size: 16px; line-height: 26px; margin-bottom: 0px; } .pick-number-area .cart-summary .middle-area { background: rgba(255, 255, 255, 0.2); padding: 15px 20px 15px; } .pick-number-area .cart-summary .middle-area .tikit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 7px; } .pick-number-area .cart-summary .middle-area .tikit .left { color: #fff; font-size: 16px; line-height: 26px; } .pick-number-area .cart-summary .middle-area .tikit .right { color: #fff; font-size: 20px; line-height: 30px; font-weight: 700; } .pick-number-area .cart-summary .middle-area .price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pick-number-area .cart-summary .middle-area .price .left { color: #fff; font-size: 16px; line-height: 26px; text-align: left; } .pick-number-area .cart-summary .middle-area .price .left small { display: block; margin-top: -3px; color: #24e980; } .pick-number-area .cart-summary .middle-area .price .right { color: #fff; font-size: 20px; line-height: 30px; font-weight: 700; } .pick-number-area .cart-summary .bottom-area { padding: 15px 20px 30px; } .pick-number-area .cart-summary .bottom-area .total-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 20px; line-height: 30px; color: #fff; font-weight: 700; } .pick-number-area .cart-summary .bottom-area .custom-button2 { margin-top: 22px; } .frequent-number { padding-bottom: 130px; } .frequent-number .section-header { margin-bottom: 0px; } .frequent-number .number-slider { position: relative; } .frequent-number .number-slider .item { padding: 33px 15px 60px; } .frequent-number .number-slider .item .single-number { border-radius: 10px; -webkit-box-shadow: 0px 13px 30px 0px rgba(45, 70, 222, 0.2); box-shadow: 0px 13px 30px 0px rgba(45, 70, 222, 0.2); padding: 22px 30px 30px; } .frequent-number .number-slider .item .single-number ul li { display: inline-block; } .frequent-number .number-slider .item .single-number ul li span { width: 30px; height: 30px; line-height: 30px; font-weight: 600; background: #ededff; background-image: -o-linear-gradient( 4deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); background-image: linear-gradient( 86deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); -webkit-box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); box-shadow: 0px 7px 7px 0px rgba(243, 42, 126, 0.23); color: #fff; border-radius: 50%; display: inline-block; font-size: 14px; cursor: pointer; } .frequent-number .number-slider .item .single-number input { margin-top: 14px; border: 1px solid #e5e7ff; height: 50px; padding: 0px 20px; border-radius: 10px; color: #5949b3; } .frequent-number .number-slider .item .single-number input::-webkit-input-placeholder { color: #5949b3; } .frequent-number .number-slider .item .single-number input::-moz-placeholder { color: #5949b3; } .frequent-number .number-slider .item .single-number input:-ms-input-placeholder { color: #5949b3; } .frequent-number .number-slider .item .single-number input::-ms-input-placeholder { color: #5949b3; } .frequent-number .number-slider .item .single-number input::placeholder { color: #5949b3; } .frequent-number .number-slider .owl-nav .owl-prev, .frequent-number .number-slider .owl-nav .owl-next { position: absolute; bottom: -10px; background-color: white; -webkit-box-shadow: 0px 3px 16px 0px rgba(59, 71, 139, 0.25); box-shadow: 0px 3px 16px 0px rgba(59, 71, 139, 0.25); border-radius: 50%; width: 40px; height: 40px; font-size: 18px; line-height: 40px; z-index: 9; color: #5949b3; } .frequent-number .number-slider .owl-nav .owl-prev:hover, .frequent-number .number-slider .owl-nav .owl-next:hover { background-image: -webkit-gradient( linear, left bottom, left top, from(#f4ba2e), to(#fea036) ); background-image: -o-linear-gradient(bottom, #f4ba2e 0%, #fea036 100%); background-image: linear-gradient(0deg, #f4ba2e 0%, #fea036 100%); color: #fff; } .frequent-number .number-slider .owl-nav .owl-prev:focus, .frequent-number .number-slider .owl-nav .owl-next:focus { outline: 0px; } .frequent-number .number-slider .owl-nav .owl-next { right: 50%; margin-right: -45px; } .frequent-number .number-slider .owl-nav .owl-prev { left: 50%; margin-left: -45px; } /* Contact Section Start */ .contact { padding-bottom: 120px; margin-top: -130px; } .contact .contact-box { -webkit-box-shadow: 0px 11px 19.2px 0.8px rgba(66, 58, 232, 0.1); box-shadow: 0px 11px 19.2px 0.8px rgba(66, 58, 232, 0.1); border-radius: 10px; padding: 50px 30px 60px; background: #fff; } .contact .contact-box .title { font-size: 36px; line-height: 46px; font-weight: 700; display: block; text-align: center; margin-bottom: 23px; } .contact .contact-box .form-group { margin-bottom: 23px; } .contact .contact-box .form-group label { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 11px; } .contact .contact-box .form-group input, .contact .contact-box .form-group textarea { border: 1px solid rgba(59, 54, 140, 0.1); border-radius: 5px; background-color: #f6f6fa; font-size: 16px; padding: 0px 30px; } .contact .contact-box .form-group input::-webkit-input-placeholder, .contact .contact-box .form-group textarea::-webkit-input-placeholder { color: #6f6c9f !important; } .contact .contact-box .form-group input::-moz-placeholder, .contact .contact-box .form-group textarea::-moz-placeholder { color: #6f6c9f !important; } .contact .contact-box .form-group input:-ms-input-placeholder, .contact .contact-box .form-group textarea:-ms-input-placeholder { color: #6f6c9f !important; } .contact .contact-box .form-group input::-ms-input-placeholder, .contact .contact-box .form-group textarea::-ms-input-placeholder { color: #6f6c9f !important; } .contact .contact-box .form-group input::placeholder, .contact .contact-box .form-group textarea::placeholder { color: #6f6c9f !important; } .contact .contact-box .form-group textarea { height: 180px; padding: 20px 30px; } .contact .contact-box .form-group.last { margin-bottom: 8px; } .contact .contact-box .custom-control-label { font-size: 16px; line-height: 26px; color: #6f6c9f; } .contact .contact-box .custom-button1 { text-transform: uppercase; padding: 10px 30px; margin-top: 23px; } .contact .right-area { padding-top: 240px; } .contact .right-area .faq-block { margin-bottom: 70px; } .contact .right-area .faq-block .title { font-size: 36px; line-height: 46px; font-weight: 700; margin-bottom: 10px; } .contact .right-area .faq-block p { font-size: 18px; line-height: 28px; } .contact .right-area .faq-block a { margin-top: 11px; position: relative; display: inline-block; font-weight: 600; color: #3b368c; padding-left: 25px; padding-right: 25px; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .contact .right-area .faq-block a::before { position: absolute; content: ""; width: 50px; height: 50px; border-radius: 50%; top: 50%; left: 0px; z-index: -1; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: -webkit-gradient( linear, left bottom, left top, from(#e2906e), to(#e83a99) ); background-image: -o-linear-gradient(bottom, #e2906e 0%, #e83a99 100%); background-image: linear-gradient(0deg, #e2906e 0%, #e83a99 100%); -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .contact .right-area .faq-block a i { font-size: 14px; margin-left: 5px; } .contact .right-area .faq-block a:hover { color: #fff; } .contact .right-area .faq-block a:hover::before { width: 100%; border-radius: 7px; } .contact .right-area .single-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .contact .right-area .single-info:last-child { margin-bottom: 0px; } .contact .right-area .single-info img { margin-right: 20px; width: 80px; } .contact .right-area .single-info .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .contact .right-area .single-info .content h4 { font-size: 24px; line-height: 34px; font-weight: 500; margin-bottom: 4px; } .contact .right-area .single-info .content p { margin-bottom: 0px; font-size: 18px; line-height: 28px; } /* faq Section Start */ .faq { /* margin-top: -130px; */ padding-bottom: 70px; } .faq .faq-box { background: #fff; padding: 105px 30px 30px; border-radius: 10px; } .faq .faq-box .section-header { margin-bottom: 39px; } .faq .faq-box .faq-menu { background: url(../images/faq-bg.png); background-size: cover; background-position: center; border-radius: 20px; padding: 30px; } .faq .faq-box .faq-menu ul li { display: block; } .faq .faq-box .faq-menu ul li a { display: block; color: #fff; padding: 6px 0px; border-radius: 10px; } .faq .faq-box .faq-menu ul li a i { font-size: 15px; margin-right: 5px; } .faq .faq-box .faq-menu ul li a.active, .faq .faq-box .faq-menu ul li a:hover { padding: 6px 20px; -webkit-box-shadow: 0.837px 11.971px 21px 0px rgba(50, 59, 113, 0.2); box-shadow: 0.837px 11.971px 21px 0px rgba(50, 59, 113, 0.2); background: rgba(255, 255, 255, 0.1); } .faq .faq-box .faq-collaps-box { margin-bottom: 52px; } .faq .faq-box .faq-collaps-box:last-child { margin-bottom: 0px; } .faq .faq-box .faq-collaps-box .title { font-size: 24px; line-height: 34px; font-weight: 700; margin-bottom: 26px; } .faq .faq-box .faq-collaps-box .accordion .mycard { margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(59, 54, 140, 0.1); } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-header h2 { display: block; } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-header h2 button { padding: 26px 30px 25px; display: block; font-size: 20px; line-height: 20px; font-weight: 500; position: relative; border: 0px; height: auto; color: #5949b3; } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-header h2 button:focus { outline: none; } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-header h2 button::after { position: absolute; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 16px; right: 30px; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-header h2 div[aria-expanded="true"]::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .faq .faq-box .faq-collaps-box .accordion .mycard .mycard-body { border-top: 1px solid rgba(59, 54, 140, 0.1); padding-top: 24px; padding-bottom: 21px; padding-left: 30px; padding-right: 30px; } /* Results Section Start */ .results .top-image { margin-top: -130px; } .results .top-image .image { border-radius: 10px; overflow: hidden; background-color: white; -webkit-box-shadow: 0px -14px 19.2px 0.8px rgba(66, 58, 232, 0.1); box-shadow: 0px -14px 19.2px 0.8px rgba(66, 58, 232, 0.1); } .results .top-image .image img { width: 100%; } .check-number.result-page { padding-top: 0px; padding-bottom: 30px; } .lottery-result.result-page { padding-top: 0px; padding-bottom: 120px; } .lottery-result.result-page .view-all { border-radius: 10px; border: 1px solid rgba(97, 42, 252, 0.4); font-weight: 600; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; padding: 10px 30px; color: #5949b3; } .lottery-result.result-page .view-all:hover { background: #612afc; border-color: #612afc; color: #fff; text-decoration: none; } /* Login & Registration Section */ .log-reg-modal-wrapper .modal-body { padding: 30px 40px 40px; position: relative; width: 100%; } .log-reg-modal-wrapper .modal-body .close { position: absolute; top: 4px; right: 7px; display: inline-block; padding: 0px; margin: 0px; } .log-reg-modal-wrapper.log .title { margin: 0 auto 30px; color: #000; } .log-reg-modal-wrapper.log .modal-body { padding: 30px 40px 35px; } .log-reg-inner .title { font-size: 17px; line-height: 17px; font-weight: 700; display: block; margin: 0 auto 6px; text-align: center; color: black; } .log-reg-inner .main-content .form-group label { font-size: 14px; line-height: 16px; color: #5949b3; font-weight: 700; } .log-reg-inner .main-content .form-group .my-form-control { border: 1px solid #ebebf3; background-color: #f6f6fa; font-size: 12px; color: #6d6b99; padding: 0px 14px; height: 25px; } .countries { border: 1px solid #ebebf3; height: 29px; font-size: 12px; border-radius: 0px; line-height: 14px; background-color: #f6f6fa; } .phone-tab { margin-bottom: 12px; border: 1px solid #ebebf3; height: 26px; font-size: 12px; border-radius: 0px; line-height: 14px; background-color: #f6f6fa; } .log-reg-inner .main-content .form-group .my-form-control::-webkit-input-placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .form-group .my-form-control::-moz-placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .form-group .my-form-control:-ms-input-placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .form-group .my-form-control::-ms-input-placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .form-group .my-form-control::placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .form-group .my-form-control::-webkit-placeholder { color: #6f6c9f !important; } .log-reg-inner .main-content .custom-checkbox label { font-size: 14px; line-height: 24px; color: #3b4a91; } .log-reg-inner .main-content .custom-checkbox label a { color: #097f22; } .log-reg-inner .main-content .f-pass { font-size: 16px; line-height: 26px; } .log-reg-inner .main-content .f-pass a { color: #0403c4; } .log-reg-inner .main-content .button-wrapper { display: block; text-align: center; margin-top: 30px; } .log-reg-inner .main-content .button-wrapper .custom-button2 { padding: 10px 20px; } .log-reg-inner .main-content .button-wrapper .or-signup { margin-top: 27px; font-size: 16px; line-height: 26px; font-weight: 700; color: #5949b3; } .log-reg-inner .main-content .button-wrapper .or-signup a { color: #fd8624; } .log-reg-inner .main-content .or { margin-top: 29px; margin-bottom: 15px; font-size: 16px; font-weight: 700; color: #5949b3; display: block; text-align: center; position: relative; width: 100%; } .log-reg-inner .main-content .or.log { margin-top: 24px; } .log-reg-inner .main-content .or p { display: inline-block; background: #fff; margin-bottom: 0px; padding: 0px 15px; position: relative; z-index: 2; } .log-reg-inner .main-content .or::before { position: absolute; content: ""; height: 1px; width: 100%; background: rgba(0, 0, 0, 0.15); left: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .log-reg-inner .main-content .socials { text-align: center; } .log-reg-inner .main-content .socials a { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); color: #6b79b2; font-size: 16px; display: inline-block; margin: 0px 5px; } .log-reg-inner .main-content .socials a:hover { color: #fff; background-image: -o-linear-gradient( 4deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); background-image: linear-gradient( 86deg, #ec038b 0%, #fb6468 44%, #fbb936 100% ); -webkit-box-shadow: 0px 9px 4px 0px rgba(124, 78, 25, 0.1); box-shadow: 0px 9px 4px 0px rgba(124, 78, 25, 0.1); } .log-reg-inner .main-content .or-content { display: block; text-align: center; } .log-reg-inner .main-content .or-content p { color: #3b368c; font-size: 16px; line-height: 26px; } .log-reg-inner .main-content .or-content .or-btn { margin-top: 9px; border: 1px solid rgba(59, 54, 140, 0.1); background-color: #eaf2fc; -webkit-box-shadow: 1.948px 13.864px 6px 0px rgba(220, 234, 251, 0.3); box-shadow: 1.948px 13.864px 6px 0px rgba(220, 234, 251, 0.3); padding: 10px 30px; border-radius: 50px; margin-bottom: 19px; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .log-reg-inner .main-content .or-content .or-btn img { margin-right: 8px; } .log-reg-inner .main-content .or-content .or-btn:hover { -webkit-box-shadow: 2px 13px 16px 0px rgba(59, 54, 140, 0.1); box-shadow: 2px 13px 16px 0px rgba(59, 54, 140, 0.1); } .log-reg-inner .main-content .or-content .or-signup { font-size: 16px; margin-bottom: 0px; } .log-reg-inner .main-content .or-content .or-signup a { color: #0403c4; font-weight: 600; } .log-reg-inner .main-content .or-content .or-signup a:hover { text-decoration: underline; } /*Footer-Section Starts Here*/ .footer-section { padding: 40px 0px 35px; position: relative; } .footer-section .footer-links .footer-top-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-section .footer-links .footer-top-area .left a { display: inline-block; margin-right: 24px; } .footer-section .footer-links .footer-top-area .right ul li { display: inline-block; position: relative; margin-right: 30px; } .footer-section .footer-links .footer-top-area .right ul li a { color: #d2d5fc; font-weight: 600; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .footer-section .footer-links .footer-top-area .right ul li a:hover { color: #fff; } .footer-section .footer-links .footer-top-area .right ul li::after { position: absolute; right: -18px; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 16px; width: 2px; background: #6569c0; } .footer-section .footer-links .footer-top-area .right ul li:last-child { margin-right: 0px; } .footer-section .footer-links .footer-top-area .right ul li:last-child::after { display: none; } .footer-section .copyright-wrapper .hr2 { margin: 40px 0px 35px; border-top: 1px solid rgba(255, 255, 255, 0.24); } .footer-section .copyright-wrapper .copyr-text { color: #d2d5fc; } .footer-section .copyright-wrapper .copyr-text a { color: #27ff5a; } .footer-section .copyright-wrapper .footer-social-links { display: block; text-align: right; } .footer-section .copyright-wrapper .footer-social-links li { margin-left: 14px; display: inline-block; } .footer-section .copyright-wrapper .footer-social-links li:first-child { margin-left: 0px; } .footer-section .copyright-wrapper .footer-social-links li a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: block; color: #fff; line-height: 36px; text-align: center; font-size: 14px; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .footer-section .copyright-wrapper .footer-social-links li a:hover { background: #ee4730; } .blink-hard { animation: blinker 2s step-end infinite; font-size: 11px !important; color: #f92348 !important; font-weight: bold; } .text-red { color: red; font-size: smaller; } @keyframes blinker { 50% { opacity: 0; } } .list-unstyled { padding-left: 0; list-style: none; } .credit { font-size: 1.2rem; float: right; margin-top: 0.5em; } .credit__link { color: #fc5555; font-weight: bold; text-decoration: none; &:hover { color: #fc5555; text-decoration: underline; } } /* Breakpoints /* ---------------*/ /* Removed SCSS/Sass variables and mixins for CSS compatibility. Design not altered. */ .tabs__list { margin: 0; margin-bottom: -1px; } .tabs__item { margin-bottom: 0; display: inline-block; width: auto; vertical-align: top; } .tabs__item--active { > .tabs__link { border: 1px solid #d4d4d4; background: white; border-bottom: 0; position: relative; z-index: 3; color: #333333; &:hover { color: darken(#333333, 5%); } } } .tabs__link { font-weight: 500; color: #333333; padding: 0.5em 1em; line-height: 2; display: block; text-decoration: none; &:hover { text-decoration: underline; } } .tabs__area { opacity: 0; visibility: hidden; transition: opacity 0.5s linear; height: 0; } .tabs__area--active { opacity: 1; visibility: visible; transition: opacity 0.5s linear; height: auto; } .tabs__content { margin-bottom: 0; background: #fff; border: 1px solid #dadacb; overflow: hidden; position: relative; clear: both; padding: 22px; padding: 2.2rem; } .clock { /* display: ; */ grid-template-rows: 1fr auto; grid-template-columns: 1fr 1fr; justify-content: center; align-items: center; text-align: center; color: #6b30f9; } .digital-clock { font-size: 17px; grid-row: 2 / 3; grid-column: 1 / 3; margin-bottom: 8px; font-weight: 500; color: brown; } .top-text { font-size: 20px; color: #00eaff; text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00b3cc, 0 0 40px #0088aa; grid-row: 1/2; grid-column: 1/3; } .date { font-size: 15px !important; display: flex; /* flex-direction: row-reverse; */ flex-direction: row-reverse; flex-direction: column-reverse; } .topinfo { display: flex; } .rules { display: flex; justify-content: end; color: #929292; font-size: small; align-items: baseline; } .draw-date { background-color: #ffeb3b; font-size: 11px; font-weight: 600; line-height: 30px; text-align: center; justify-content: center; display: flex; align-items: center; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); margin: 10px 0px; } .timetop { display: flex; justify-content: end; color: red; font-size: small; align-items: baseline; } .blink { width: 200px; text-align: center; } span { font-size: 15px; /* font-family: ; */ color: #f10bb5 !important; } .popup-trigger { display: block; width: 110px; line-height: 31px; text-align: center; color: #fff; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); transition: 300ms all; margin: 10px 0px; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } .popup-trigger:hover { opacity: 0.8; } .popup { position: fixed; left: 0; top: 0; height: 100%; z-index: 1000; width: 100%; background-color: rgba(94, 110, 141, 0.9); opacity: 0; visibility: hidden; transition: 500ms all; } .popup.is-visible { opacity: 1; visibility: visible; transition: 1s all; } .popup-container { transform: translateY(-50%); transition: 500ms all; position: relative; width: 41%; margin: 2em auto; top: 5%; padding: 1rem; background: #fff; border-radius: 0.25em 0.25em 0.4em 0.4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); overflow-y: scroll; height: 300px; } .is-visible .popup-container { transform: translateY(0); transition: 500ms all; } .popup-container .popup-close { position: absolute; top: 8px; font-size: 0; right: 8px; width: 30px; height: 30px; } .popup-container .popup-close::before, .popup-container .popup-close::after { content: ""; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; } .popup-container .popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; } .popup-container .popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; } .popup-container .popup-close:hover:before, .popup-container .popup-close:hover:after { background-color: #35a785; transition: 300ms all; } .tag { display: inline-block; background: #e0e0e0; color: #333; font-size: 0.85rem; padding: 4px 10px; border-radius: 20px; margin-right: 6px; } .scrollbar { float: left; height: 400px; width: auto; background: #f5f5f5; overflow-y: scroll; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 7px; width: 100%; border: none; text-align: left; outline: none; font-size: 12px; transition: 0.3s; font-weight: 800; } .active, .accordion:hover { /* background-color: #f0f0f0; */ outline: unset !important; } .panel { padding: 15px; display: none; background-color: white; border-top: none; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } .note { color: red; font-style: italic; margin-top: 10px; } .container33 { display: flex; flex-direction: row; width: 100%; min-height: 100vh; } .left { padding: 10px; } .right { width: 75%; padding: 20px; } .tab-buttons button { background: none; border: none; padding: 10px 20px; cursor: pointer; font-weight: bold; } .tab-buttons .active { border-bottom: 2px solid #00aaff; } .bet-type-select, .options { margin: 15px 0; display: flex; gap: 10px; } .bet-type-select button, .options button { padding: 8px 14px; border: 1px solid #ccc; background: #f0f0f0; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; } .bet-type-select .active { background: #e973ff; color: white; } .number-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 250px; margin-top: 15px; justify-self: anchor-center; } .number-pad button { padding: 15px; font-size: 18px; border: 1px solid #ccc; background: #fff; border-radius: 5px; cursor: pointer; } .enter-button { margin-top: 20px; } .enter-button button { padding: 12px 30px; background: #198754; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } .bet-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .bet-table th, .bet-table td { padding: 10px; border-bottom: 1px solid #ccc; text-align: left; } .bottom-buttons { display: flex; gap: 10px; margin-top: 20px; } .bottom-buttons button { flex: 1; padding: 10px; font-size: 14px; border: none; border-radius: 5px; cursor: pointer; } .btn-red { background: red; color: white; } .btn-yellow { background: #ffc107; } .btn-green { background: #198754; color: white; } @media (max-width: 768px) { .container { flex-direction: column; } .left, .right { width: 100%; } } .top-round-text { color: #ffed85 !important; font-size: 12px; line-height: 14px; font-weight: 900; } .custom-bet-btn { background-color: #efda1c; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); color: #080404; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 6px; font-size: 11px; font-weight: bolder; line-height: 18px; } .disabled-btn { background-color: #ededed; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); color: #080404; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 6px; font-size: 11px; font-weight: bolder; line-height: 18px; cursor: not-allowed; opacity: 0.6; } .single-draw-stock { text-align: center; background-color: #659ca9; padding: 15px; box-shadow: 0 0 0 2px rgb(245 245 245), 8px 8px 0 0 rgb(237 237 237); -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; position: relative; overflow: hidden; } .single-draw-stock h4 { font-size: 14px; line-height: 20px; font-weight: 700; } .icon23 img { height: 51px; margin-bottom: 17px; position: relative; z-index: 6; width: auto; display: inline-block; } .tab-content { padding: 0; } .card34 { background: #fff; border: 1px solid #1f2937; border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px #0008, inset 0 1px 0 #ffffff14; } .section-titlenew { font-weight: 700; opacity: 0.9; margin: 4px 0 14px 0; font-size: clamp(14px, 2.8vw, 18px); letter-spacing: 0.8px; text-align: center; } .card { border-radius: 0 0 0.25rem 0.25rem; border-top: 0; } .nav-tabs { height: 42px; padding: 0; position: relative; .nav-item { margin-left: 0; a { color: black; display: block; padding: 8px 14px; font-size: 15px; } &.overflow-tab { background-color: white; display: none; position: absolute; right: 0; width: 150px; z-index: 1; a { border: 1px solid lightgray; border-radius: 0; padding: 6px 10px; &:hover, &:focus, &:active, &.active { background-color: lightgray; } } &:last-child { border-radius: 0 0 0 4px; } } &.overflow-tab-action { position: absolute; right: 0; } } } .lotto-result-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; font-weight: 600; height: 2rem; padding: 0.5rem 1rem; border-radius: 0.375rem 0.375rem 0 0; } .card { border-radius: 5px; overflow: hidden; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); transition: 0.4s ease; } .card .card-img { width: 100%; height: 230px; } .card:nth-child(1) .card-img { background: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80") no-repeat center center / cover; } .card:nth-child(2) .card-img { background: url("https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80") no-repeat center center / cover; } .card:nth-child(3) .card-img { background: url("https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80") no-repeat center center / cover; } .card-body { padding: 52px 20px; } .card-body .card-title { font-size: 24px; margin-bottom: 15px; font-weight: 600; } .card-body p { font-size: 16px; margin-bottom: 40px; } .card-body .card-button { display: block; width: 100%; height: 50px; text-align: center; background-color: #e6ecff; color: #3363ff; text-decoration: none; font-size: 18px; font-weight: 500; line-height: 50px; } .card-body .card-button i { margin-left: 10px; transition: 0.4s ease; } .card:hover { transform: translateY(-10px); box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.5); } .card-body .card-button:hover i { margin-left: 20px; } @media screen and (max-width: 900px) { .container { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 600px) { .container { grid-template-columns: 1fr; } } .twod-main-bx { display: flex; justify-content: space-between; width: 100%; height: 50px; border-radius: 3px; text-align: center; background-color: #e6ecff; color: #3363ff; text-decoration: none; font-size: 18px; font-weight: 500; line-height: 50px; } .twod-main-title { font-size: 18px; font-weight: 500; line-height: 50px; } .twod-main-date { font-size: 18px; font-weight: 500; line-height: 50px; } .top-main-bx { display: flex; justify-content: space-between; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); border-radius: 3px; text-align: center; background-color: #e6ecff; color: #3363ff; text-decoration: none; font-size: 18px; font-weight: 500; padding: 10px 10px; display: flex; align-items: center; } .res-main-bx { display: flex; padding: 10px; justify-content: space-between; background-color: darkcyan; height: 58px; } .res-main-bx-title { font-size: 13px; font-weight: 800; color: white; text-align: right; } .res-main-bx-title p { font-size: 12px; font-weight: 800; color: white; text-align: left; } .res-main-bx-date { font-size: 13px; font-weight: 800; color: white; text-align: right; } .res-main-bx-date p { font-size: 11px; font-weight: 800; color: white; } .res-res-main { display: flex; padding: 10px; flex-flow: column; align-items: center; padding: 34px; } .res-1 { font-size: 16px; font-weight: 800; color: black; text-align: right; background-color: beige; padding: 6px; margin: 15px 0px 23px 0px; } .res-2 { font-size: 13px; font-weight: 800; color: white; text-align: left; } .res-2 span { font-weight: 600; background-color: crimson; font-weight: 900; text-align: center; color: #fff !important; font-size: 12px; padding: 5px; margin: 5px; border: 1px solid #fff; } #tsum-tabs h1 { padding: 9px 0; font-weight: 900; text-align: center; color: black; font-size: 15px; background-color: #faf8d7; opacity: 0.8; } #tsum-tabs p { margin: 0 0 20px; line-height: 1.5; } #tsum-tabs main { padding: 50px; margin: 0 auto; background: #fce3cd; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } #tsum-tabs section { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; } #tsum-tabs input { display: none; } #tsum-tabs label { display: inline-block; margin: 0 0 -1px; padding: 9px 9px; font-weight: 600; text-align: center; color: #ffffff; border: 1px solid transparent; font-size: 12px; border: 1px solid transparent; background-color: #acacac; } #tsum-tabs label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } #tsum-tabs label[for*="1"]:before { content: "\f1cb"; } #tsum-tabs label[for*="2"]:before { content: "\f17d"; } #tsum-tabs label[for*="3"]:before { content: "\f16b"; } #tsum-tabs label[for*="4"]:before { content: "\f1a9"; } #tsum-tabs label:hover { color: #888; cursor: pointer; } #tsum-tabs input:checked + label { color: #fff; border: 1px solid #ddd; border-top: 2px solid orange; border-bottom: 1px solid #fff; background-color: coral; } #tsum-tabs #tab1:checked ~ #content1, #tsum-tabs #tab2:checked ~ #content2, #tsum-tabs #tab3:checked ~ #content3, #tsum-tabs #tab4:checked ~ #content4 { display: block; } @media screen and (max-width: 650px) { #tsum-tabs label { font-size: 0; } #tsum-tabs label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { #tsum-tabs label { padding: 15px; } } .stock-main-bx { display: flex; padding: 10px; justify-content: space-between; background-color: #4a5694; height: 58px; } .stock-main-bx-title { font-size: 13px; font-weight: 800; color: white; text-align: right; } .stock-main-bx-title p { font-size: 12px; font-weight: 800; color: white; text-align: left; } .stock-main-bx-date { font-size: 13px; font-weight: 800; color: white; text-align: right; } .stock-main-bx-date p { font-size: 11px; font-weight: 800; color: white; } .stock-stock-main { display: flex; padding: 10px; flex-flow: column; align-items: center; padding: 0px 0px 21px 0px; } .stock-1 { font-size: 13px; font-weight: 800; color: black; text-align: right; background-color: beige; padding: 6px; margin: 28px 0px 23px 0px; } .stock-2 { font-size: 13px; font-weight: 800; color: white; text-align: left; } .stock-2 span { font-weight: 600; color: white; background-color: crimson; text-align: center; color: #ffffff !important; font-size: 12px; padding: 6px; margin: 5px; border: 1px solid #fff; } .lottery-result .stock-box { box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); background-color: #c8d3fc; } .ping3-main-bx { display: flex; padding: 10px; justify-content: space-between; background-color: #944a6b; height: 58px; } .ping3-main-bx-title { font-size: 13px; font-weight: 800; color: white; text-align: right; } .ping3-main-bx-title p { font-size: 12px; font-weight: 800; color: white; text-align: left; } .ping3-main-bx-date { font-size: 13px; font-weight: 800; color: white; text-align: right; } .ping3-main-bx-date p { font-size: 11px; font-weight: 800; color: white; } .ping3-ping3-main { display: flex; padding: 10px; flex-flow: column; align-items: center; padding: 34px; } .ping3-1 { font-size: 16px; font-weight: 800; color: black; text-align: right; background-color: beige; padding: 6px; margin: 24px 0px 23px 0px; } .ping3-2 { font-size: 13px; font-weight: 800; color: white; text-align: left; } .ping3-2 span { font-weight: 600; background-color: crimson; font-weight: 900; text-align: center; color: #fff !important; font-size: 12px; padding: 5px; margin: 5px; border: 1px solid #fff; } .lottery-result .ping3-box { box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); background-color: #dda1bc; } .parentmar { width: 100%; /* font: 12px bold; */ background-color: #e4fdff; font-family: "Comfortaa"; font-size: 12px; font-weight: 700; /* display: flex ; */ /* flex-wrap: wrap; */ line-height: 12px; } .childmar { background: linear-gradient(to right, #121aff, #76c6ce); padding: 5px; line-height: 13px; font-size: 12px; color: floralwhite; margin: 0; width: 99px; font-family: "Comfortaa"; } .announce-wrap { display: flex; margin-bottom: 20px; margin-left: 30px; } .announce-title { background-color: gold; font-size: 12px; font-weight: 900; display: flex; justify-content: normal; align-items: center; } .tabs12 { position: relative; display: flex; min-height: 600px; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); background: #e1edff; overflow: hidden; } .tabby-tab { flex: none; } .tabby-tab label { display: block; box-sizing: border-box; /* tab content must clear this */ height: 40px; background: #e1edff; font-size: 14px; color: black; padding: 10px; text-align: center; cursor: pointer; transition: background 0.5s ease; } .tabby-tab label:hover { background: #f7f7f7; font-size: 14px; } .tabby-content { position: absolute; font-size: 12px; font-weight: 400; left: 0; bottom: 0; right: 0; /* clear the tab labels */ top: 40px; padding: 20px; background: #e1edff; transition: opacity 0.8s ease, transform 0.8s ease; /* show/hide */ opacity: 0; transform: scale(0.1); transform-origin: top left; } .tabby-content img { float: left; margin-right: 20px; } /* MAKE IT WORK ----- */ .tabby-tab [type="radio"] { display: none; } [type="radio"]:checked ~ label { color: white; background: #325485; font-size: 14px; z-index: 2; } [type="radio"]:checked ~ label ~ .tabby-content { z-index: 0; /* show/hide */ opacity: 1; transform: scale(1); } /* BREAKPOINTS ----- */ @media screen and (max-width: 767px) { .tabs12 { min-height: 400px; } } @media screen and (max-width: 480px) { .tabs12 { min-height: 580px; } .tabby-tab label { height: 60px; } .tabby-content { top: 60px; } .tabby-content img { float: none; margin-right: 0; margin-bottom: 20px; } } .bet-list-mnBx { display: flex; flex-direction: column; padding: 0px 10px; } .bet-list-tpBX { text-align: Start; font-weight: 500; } .bet-list-points { display: flex; justify-content: space-between; padding: 10px; background-color: honeydew; border: 1px solid; } /* Removed empty ruleset for .bet-list-discrip */ .bet-list-discrip-inner { display: flex; justify-content: space-between; padding: 10px; align-items: center; } .bet-list-main-bet { background-color: #ff1e1e; font-size: 12px; color: white; padding: 2px; text-align: center; font-weight: 500; margin-left: 22px; } .bet-list-btn-wrap { display: flex; justify-content: space-between; padding: 10px; } .custom-buttonred { box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); border-color: #fea036; color: #ffffff; display: inline-block; cursor: pointer; width: auto; height: auto; padding: 5px 9px; font-size: 14px; font-weight: bolder; line-height: 21px; background-color: #e44d2e; background-image: linear-gradient(147deg, #e44d2e 0%, #65000b 74%); } .custom-buttonred:hover { color: #fff; } .history-date-wrap { display: flex; } .history-date-wrap span { background-color: #74a635; font-size: 10px; color: white; line-height: 10px; text-align: center; font-weight: 500; align-content: center; margin: 0px 8px; padding: 0px 3px; } .rate-reward { display: flex; background: aquamarine; margin-right: 25px; } .rate-type { width: 40px; } .tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; margin-bottom: 20px; margin-top: 9px; } .tab { padding: 10px 15px; border: 1px solid #ccc; background-color: white; cursor: pointer; } .tab.active { font-weight: bold; color: #bb3e06; border-bottom: 2px solid #bb3e06; font-size: smaller; font-weight: 800; } .type-options, .additional-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } .type-button, .option-button { padding: 10px 15px; border: 1px solid #ccc; font-size: smaller; font-weight: 800; background-color: white; cursor: pointer; } .type-button.active { background-color: #f0e9ff; color: #a200ff; border: 1px solid #a200ff; font-size: smaller; font-weight: 800; } .selected { margin-bottom: 10px; color: #007bff; font-weight: bold; } .enter-label { text-align: center; margin-bottom: 10px; font-weight: bold; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto 20px; } .key { padding: 15px; background-color: white; border: 1px solid #ccc; text-align: center; cursor: pointer; font-size: smaller; font-weight: 900; } .key.random { background-color: #e5fff0; color: green; } .key.delete { background-color: #ffe5e5; color: red; } .enter-price { display: flex; justify-content: center; } .enter-price button { display: block; width: 290px; line-height: 31px; text-align: center; color: #fff; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); transition: 300ms all; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } @media (max-width: 500px) { .draw-date { width: 160px; } .rules { justify-content: center; } .timetop { justify-content: space-evenly; } .top-main-bx { justify-content: space-evenly; } .enter-price { margin-bottom: 20px; } .type-options, .additional-options { flex-direction: row; justify-content: center; } .type-button.active { background-color: #f0e9ff; color: #a200ff; border: 1px solid #a200ff; font-size: 15px; font-weight: 800; width: 107px; } .type-button, .option-button { padding: 10px 15px; border: 1px solid #ccc; font-size: smaller; font-weight: 800; background-color: white; cursor: pointer; width: 107px; } .keypad { width: 100%; } } .ping-2-wrap-right-panel { box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); background: #e1edff; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup-enter { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 600px; position: relative; transition: all 5s ease-in-out; } .popup-enter h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup-enter .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup-enter .close:hover { color: #06d85f; } .popup-enter .content { max-height: 30%; overflow: auto; } .box-enter { width: 290px; line-height: 31px; text-align: center; color: #fff; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); transition: 300ms all; box-shadow: 0 0 0 2px rgb(119, 64, 74), 8px 8px 0 0 rgb(119, 64, 74); } @media screen and (max-width: 700px) { .box-enter { width: 300px; } .popup-enter { width: 70%; position: absolute; top: 219px; left: 46px; } } .sub-header { display: flex; justify-content: space-between; padding: 5px 15px; background-color: #f1f1f1; align-items: center; font-size: 14px; } .sub-header span { /* background-color: yellow; */ padding: 2px 6px; border-radius: 4px; } .info-text { text-align: right; color: #c100c1; font-size: 12px; padding-right: 15px; margin-top: 5px; } .section-title { background-color: #d600d6; color: white; padding: 8px; text-align: center; font-weight: bold; font-size: small; line-height: 10px; width: 74px; } .bet-table { width: 100%; border-collapse: collapse; margin-top: 10px; } .bet-table th, .bet-table td { padding: 5px; border: 1px solid #ddd; text-align: center; font-size: 14px; } .bet-input { width: 50px; padding: 5px; text-align: center; margin: 10px; } .accept-row { padding: 10px 15px; text-align: center; text-align: center; display: flex; justify-content: space-around; align-items: baseline; } .same-price { text-align: center; font-size: 13px; color: #666; margin-top: 10px; } .amount-input { text-align: center; margin: 10px 0; } .amount-input input { padding: 8px; font-size: 16px; width: 100px; text-align: center; } .amount-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .amount-buttons button { cursor: pointer; width: 77px; font-size: 13px; background-color: #f0e9ff; color: #a200ff; border: 1px solid #a200ff; font-size: smaller; font-weight: 600; } .enter-iner { display: flex; padding: 5px; justify-content: space-around; } .total-box { text-align: center; font-size: 16px; padding: 10px; background-color: #e44d2e; background-image: linear-gradient(147deg, #e44d2e 0%, #65000b 74%); color: white; font-weight: bold; margin: 10px 15px; } .balance { text-align: right; padding: 0 15px; color: #007f5f; font-size: 14px; } .remark-input { display: block; width: 95%; margin: 10px auto; padding: 8px; font-size: 14px; border: 1px solid #ccc; } .action-buttons { display: flex; /* flex-wrap: wrap; */ justify-self: anchor-center; align-items: baseline; } .action-buttons button { padding: 10px; font-size: 16px; border: none; cursor: pointer; display: flex; justify-content: space-around; align-items: center; } .reset { background-color: red; color: white; } .accept { background-color: #007f5f; color: white; margin: 10px; margin: 10px; width: 87px; font-size: 16px; } @media (max-width: 600px) { .bet-input { width: 100%; } .bet-table th, .bet-table td { font-size: 12px; padding: 8px; } .amount-buttons button { flex: 1 0 30%; font-size: 14px; } .amount-input input { width: 80%; } } .table-container-user { width: 100%; overflow-x: auto; background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } table { width: 100%; border-collapse: collapse; } th, td { padding: 5px; text-align: left; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 12px; } th { background-color: #fafafa; font-size: 12px; } .status { background-color: #f5f5ff; color: #444; padding: 5px 5px; font-size: 12px; display: inline-block; } .switch { position: relative; display: inline-block; width: 35px; height: 18px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #4cafef; } input:checked + .slider:before { transform: translateX(16px); } a { color: #4a90e2; text-decoration: none; } /* Responsive Design */ @media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; width: 100%; } thead tr { display: none; } tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; } td { border: none; position: relative; padding-left: 50%; white-space: normal; text-align: left; } td:before { position: absolute; top: 10px; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: bold; color: #333; content: attr(data-label); } } th, td { padding: 5px; text-align: left; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 12px; } th { background-color: #fafafa; font-size: 12px; } .status { background-color: #f5f5ff; color: #444; padding: 5px 5px; font-size: 12px; display: inline-block; } .switch { position: relative; display: inline-block; width: 35px; height: 18px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #4cafef; } input:checked + .slider:before { transform: translateX(16px); } a { color: #4a90e2; text-decoration: none; } /* Responsive Design */ @media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; width: 100%; } thead tr { display: none; } tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; } td { border: none; position: relative; padding-left: 50%; white-space: normal; text-align: left; } td:before { width: 45%; padding-right: 10px; white-space: nowrap; font-weight: bold; color: #333; content: attr(data-label); } } .sbmitbtn-wrap { display: flex; justify-content: space-around; } .login-bottom { font-size: 12px; padding: 10px; text-align: center; } .form-group { margin: 0px; } .icons-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; background: #fff; } .icons-container img { width: 50px; height: 50px; object-fit: contain; border-radius: 50%; transition: transform 0.2s; } .icons-container img:hover { transform: scale(1.1); } @media (max-width: 600px) { .icons-container img { width: 40px; height: 40px; } } .progress-container { display: grid; grid-template-columns: repeat(11, 1fr); gap: 15px; width: 95%; max-width: 1200px; } .step { display: flex; flex-direction: column; align-items: center; } .icon { display: none; font-size: 13px; color: #f21d1d; margin-bottom: 4px; } .step.active .icon { display: block; } .step-circle { background-color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #67aad0; border: 2px solid #67aad0; font-size: 12px; cursor: pointer; transition: all 0.3s ease; font-weight: 900; } .step.active .step-circle { background-color: #1da1f2; color: white; border-color: #1da1f2; } @media (max-width: 900px) { .progress-container { grid-template-columns: repeat(8, 1fr); } } @media (max-width: 600px) { .progress-container { grid-template-columns: repeat(6, 1fr); } .step-circle { width: 25px; height: 25px; font-size: 10px; } .icon { font-size: 12px; } } .grid { display: grid; grid-template-columns: repeat(4, 1fr) 60px; gap: 10px; } .btn { position: relative; color: #fff; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 0px; overflow: hidden; } .btn { position: relative; color: #fff; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 0px; overflow: hidden; width: 100px; } .btn svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.15; width: 80%; height: 80%; } .red { background: #d32f2f; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .blue { background: #1976d2; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .green { background: #388e3c; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .yellow { background: #fbc02d; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .grey { background: #9e9e9e; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .icon-btn { background: #ffffff; box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; color: #ad3b12; font-size: 18px; border: #007eff42 1px solid; } .zodizc-slct-clr { font-weight: bolder; font-size: 12px; color: midnightblue; margin-top: 38px; display: flex; justify-content: space-between; } .color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; } .footer-zodiac { background: #f7f7f7; padding: 10px; margin-top: 10px; color: #555; border-radius: 6px; } .bet-container { max-width: 700px; margin: auto; } .top-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; margin-bottom: 24px; margin-top: 21px; } .zodiac-tag { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background: #f0f0f0; border: 1px solid #ccc; /* border-radius: 4px; */ padding: 3px 4px; display: inline-flex; align-items: center; line-height: 12px; height: 29px; } .zodiac-tag span { margin-right: 5px; color: blue; font-weight: bold; font-size: 12px; } .zodiac-tag button { background: none; border: none; color: red; font-size: 14px; cursor: pointer; } .input-group { display: flex; width: 100%; margin-bottom: 24px; justify-content: space-between; } .input-group input { /* flex: 1; */ padding: 10px; border: 1px solid #ccc; /* border-right: none; */ /* border-radius: 4px 0 0 4px; */ font-size: 14px; width: 379px; } .input-group button { background: #0a9c57; color: white; padding: 0 20px; border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; } .amount-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; } .amount-buttons button { flex: 1 1 80px; padding: 8px 0; background: #f8f8f8; border: 1px solid #ccc; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; cursor: pointer; font-size: 14px; } .note { font-size: 12px; color: red; } .card { border: none; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out; padding: 30px; position: relative; } .card:hover { transform: translateY(-4px); } .card h5 { font-weight: 700; color: #ec6901; font-size: 12px; } .form-control, .form-select { font-size: 11px; } .row.g-4 > [class*="col-"] { margin-bottom: 30px; } .search-btn { background: linear-gradient(45deg, #f7d51d, #f5a623); color: #000; font-weight: 700; border: none; padding: 12px; transition: 0.3s; } .search-btn:hover { background: linear-gradient(45deg, #f5a623, #f7d51d); transform: scale(1.03); } .filter-btns button { margin: 5px; font-size: 11px; font-weight: 600; padding: 10px 20px; transition: 0.3s; border: none; width: auto; display: flex; align-items: center; } .filter-btns .today-btn { background: linear-gradient(45deg, #1dd1a1, #10ac84); color: #fff; } .filter-btns .yesterday-btn { background: linear-gradient(45deg, #ff9f43, #f368e0); color: #fff; } .filter-btns .thisweek-btn { background: linear-gradient(45deg, #54a0ff, #2e86de); color: #fff; } .filter-btns .thismonth-btn { background: linear-gradient(45deg, #5f27cd, #341f97); color: #fff; } .filter-btns .lastmonth-btn { background: linear-gradient(45deg, #ee5253, #d63031); color: #fff; } .filter-btns button:hover { transform: scale(1.08); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); } .status-box { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 14px; margin-right: 8px; font-weight: 600; } .status-win { background: #e6fffa; color: #00b894; } .status-lose { background: #ffe6e9; color: #e63946; } .status-pending { background: #fff6e6; color: #f39c12; } .status-cancel { background: #f2f2f2; color: #555; } label.form-label { font-weight: 600; color: #ff6a11; margin-bottom: 6px; font-size: 12px; } .btn-light i { margin-right: 5px; } .draw-history-btn { color: darkgoldenrod; position: absolute; top: 20px; right: 20px; z-index: 10; font-weight: 600; background: #fff; border: 2px solid #ddd; padding: 8px 14px; transition: 0.3s; } .draw-history-btn:hover { background: #f1f1f1; transform: scale(1.05); } .wrap { width: 100%; max-width: 1200px; margin: auto; } .header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .title .dot { width: 10px; height: 10px; background: var(--accent); } .btn56 { background: rgba(56, 189, 248, 0.2); border: none; color: var(--text); padding: 8px 12px; font-size: 13px; cursor: pointer; } .btn56:hover { background: rgba(56, 189, 248, 0.4); } table { width: 100%; border-collapse: collapse; } thead { background: rgba(15, 23, 42, 0.9); } thead th { text-align: left; padding: 10px; color: var(--muted); font-size: 13px; } tbody tr { border-bottom: 1px solid rgba(148, 163, 184, 0.2); border-top: 1px solid rgba(148, 163, 184, 0.2); border-left: 1px solid rgba(148, 163, 184, 0.2); } tbody td { padding: 10px; font-size: 14px; } .badge { padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; } .badge.win { background: rgba(34, 197, 94, 0.12); color: #22c55e; } .badge.lose { background: rgba(239, 68, 68, 0.12); color: #ef4444; } .status { padding: 4px 8px; font-size: 12px; font-weight: 700; } .status.open { background: rgba(99, 102, 241, 0.15); color: #6366f1; } .status.settled { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .status.pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .chip { padding: 4px 8px; border-radius: 6px; background: rgba(148, 163, 184, 0.12); font-weight: 600; } /* amount chips */ .chip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 560px) { .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .chip34 { display: flex; align-items: center; justify-content: center; transition: transform 0.06s ease, border-color 0.15s, box-shadow 0.15s, background 0.15s; font-weight: 600; background: linear-gradient(45deg, #1dd1a1, #10ac84); font-size: 14px; transition: transform 0.06s ease, border-color 0.15s, box-shadow 0.15s, background 0.15s; color: white; } .chip34:hover { transform: translateY(-1px); border-color: #263244; } .chip34.active { background: linear-gradient( 180deg, #145a32, #117a3a ) !important; /* dark green */ border-color: #145a32 !important; /* box-shadow: 0 0 0 3px #117a3a44, 0 8px 20px #0008, inset 0 1px 0 #ffffff1a; */ color: #fff !important; } /* Mobile view */ @media (max-width: 768px) { thead { display: none; } tbody, tr, td { display: block; width: 100%; } tbody tr { margin-bottom: 16px; background: rgb(247 240 166 / 60%); border-radius: 8px; padding: 8px; } tbody td { display: flex; justify-content: space-between; padding: 8px; border: none; } tbody td::before { content: attr(data-label); font-weight: 600; color: var(--muted); } } .round { background: linear-gradient(45deg, #1dd1a1, #10ac84); color: #fff; padding: 12px; text-align: center; font-size: 15px; font-weight: bolder; } .lotto-summary { display: flex; justify-content: center; /* gap: 8px; */ padding: 5px; flex-wrap: wrap; } .lotto-summary span { background: rgb(119, 64, 74); color: #ffffff !important; font-weight: bold; font-size: 12px; padding: 10px 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); flex: 0 0 auto; font-weight: 900; border: 1px solid #ffffff; } .recent { padding: 15px; } .recent h3 { margin: 0 0 10px; font-size: 16px; color: #333; } .topresult-mb { display: flex; } .rank-list { max-height: 350px; overflow-y: auto; border: 1px solid #ddd; } .rank { display: flex; justify-content: space-between; align-items: center; background: #e8fdf8; margin: 6px; padding: 10px; border-radius: 6px; font-size: 14px; flex-wrap: wrap; } .rank:nth-child(even) { background: #f7f7f7; } .rank span { flex: 1; text-align: center; font-weight: bold; font-size: 12px; color: chocolate !important; } .sidebar { max-height: 241px; overflow-y: auto; /* background: ; */ color: white; padding: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } .sidebar h4 { text-align: center; font-weight: 900; font-size: 15px; color: #000000; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { padding: 5px; margin: 3px 0; background: rgb(119, 64, 74); border-radius: 4px; cursor: pointer; text-align: center; transition: 0.3s; font-size: 12px; } .sidebar li:hover { background: #6f6c9f; } .layout { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; } /* Responsive Styles */ @media (max-width: 1024px) { .lotto-summary span { font-size: 20px; padding: 8px 12px; } .rank span { font-size: 13px; } } @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } .sidebar { margin-top: 15px; } .lotto-summary span { font-size: 18px; padding: 8px 10px; } .rank { font-size: 12px; flex-direction: column; } .rank span { text-align: left; width: 100%; padding: 2px 0; } } @media (max-width: 480px) { .header { font-size: 16px; padding: 10px; } .round { font-size: 14px; } .lotto-summary span { font-size: 16px; padding: 6px 8px; } .sidebar li { font-size: 14px; padding: 6px; } } /* fields */ .pay-main-itile { color: black; font-size: xx-large; display: flex; justify-content: center; } label { display: block; color: var(--muted); margin: 14px 0 6px; } .field { width: 100%; padding: 5px 14px; /* border-radius: 12px; */ border: 1px solid #bdd3f3; /* background: #0b1220; */ color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-size: 12px; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } .hint { font-size: 12px; color: var(--muted); margin-top: 6px; } /* buttons */ .btn34 { width: 17%; background: linear-gradient(45deg, #f5a623, #f7d51d); color: #07120a; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 10px 24px #16a34a55, inset 0 1px 0 #ffffffaa; transition: transform 0.06s ease, filter 0.15s; } .btn34:active { transform: translateY(1px); } .btn34[disabled] { filter: grayscale(1) opacity(0.6); cursor: not-allowed; } .ghost { background: #0b1529; color: #e2e8f0; border: 1px dashed #334155; box-shadow: none; margin-left: 10px; } /* QR area */ .qr-wrap { display: none; margin-top: 18px; } .qr-wrap.show { display: block; } .qr-box { width: min(194px, 51vw); aspect-ratio: 1/1; border: 2px dashed #334155; margin: 12px auto 8px; display: grid; place-items: center; background: repeating-linear-gradient( 45deg, #0b1220 0 12px, #0c1526 12px 24px ); } .qr-box span { opacity: 0.6; } .subnote { text-align: center; color: var(--muted); font-size: 13px; } @media (max-width: 680px) { .row { grid-template-columns: 1fr; } } .error { color: var(--danger); font-size: 12px; margin-top: 6px; display: none; } .error.show { display: block; }