/* ---------------------------------------

[Main Stylesheet]

Project:    	  Betsb - Sports Betting HTML Template
Version:    	  1.0
Primary Use:      Sports Betting HTML Template

------------------------------------------

[Table of contents]

1. Fonts
2. Reset Css
3. Global Settings
4. Section Styles
5. Colors
6. Margin and Padding
7. Background Overlay
8. Buttons Style
9. Preloader
10. ScrollUp Button
11. Main Header style
12. Hero Area
13. Features Area
14. Custom Hero
15. Promo Area
16. Our Partners
17. Pricing Table
18. Why Choose us
19. Parallax Area
20. Testimonial Area
21. Counter Area
22. App Area
23. Blog Area
24. Footer Area
25. Custom Banner
26. About Area
27. Award Area
28. Card Features
29. All Partners Area
30. Team Area
31. Card Apply Form
32. Become Partner Area
33. Card Details Area
34. Choose Card
35. Faq Area
36. Error Area

-------------------------------------------*/
/*** 

================
	Fonts
================


font-family: 'Comfortaa', sans-serif;
font-family: 'Open Sans', sans-serif;

 ***/
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Comfortaa:400,600,700&display=swap");
 /*
   Flaticon icon font: Flaticon
 */
 @font-face {
     font-family: "Flaticon";
   src: url("../fonts/Flaticon.eot");
   src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg#Flaticon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   @    font-face {
         font-family: "Flaticon";
         src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
     }
 }
 
 [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
 [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
     font-family: Flaticon;
     font-style: normal;
 }
 
 .flaticon-add:before {
     content: "\f100";
 }
 
 .flaticon-bag:before {
     content: "\f101";
 }
 
 .flaticon-battery:before {
     content: "\f102";
 }
 
 .flaticon-bell:before {
     content: "\f103";
 }
 
 .flaticon-bluetooth:before {
     content: "\f104";
 }
 
 .flaticon-bookmark:before {
     content: "\f105";
 }
 
 .flaticon-briefcase:before {
     content: "\f106";
 }
 
 .flaticon-calendar:before {
     content: "\f107";
 }
 
 .flaticon-cancel:before {
     content: "\f108";
 }
 
 .flaticon-cancel-1:before {
     content: "\f109";
 }
 
 .flaticon-clip:before {
     content: "\f10a";
 }
 
 .flaticon-clock:before {
     content: "\f10b";
 }
 
 .flaticon-clock-1:before {
     content: "\f10c";
 }
 
 .flaticon-cloud:before {
     content: "\f10d";
 }
 
 .flaticon-correct:before {
     content: "\f10e";
 }
 
 .flaticon-credit-card:before {
     content: "\f10f";
 }
 
 .flaticon-cursor:before {
     content: "\f110";
 }
 
 .flaticon-cursor-1:before {
     content: "\f111";
 }
 
 .flaticon-cut:before {
     content: "\f112";
 }
 
 .flaticon-cutlery:before {
     content: "\f113";
 }
 
 .flaticon-down-arrow:before {
     content: "\f114";
 }
 
 .flaticon-download:before {
     content: "\f115";
 }
 
 .flaticon-edit:before {
     content: "\f116";
 }
 
 .flaticon-envelope:before {
     content: "\f117";
 }
 
 .flaticon-export:before {
     content: "\f118";
 }
 
 .flaticon-favorite:before {
     content: "\f119";
 }
 
 .flaticon-file:before {
     content: "\f11a";
 }
 
 .flaticon-folder:before {
     content: "\f11b";
 }
 
 .flaticon-forward:before {
     content: "\f11c";
 }
 
 .flaticon-gallery:before {
     content: "\f11d";
 }
 
 .flaticon-gamepad:before {
     content: "\f11e";
 }
 
 .flaticon-garbage:before {
     content: "\f11f";
 }
 
 .flaticon-headphones:before {
     content: "\f120";
 }
 
 .flaticon-heart:before {
     content: "\f121";
 }
 
 .flaticon-help:before {
     content: "\f122";
 }
 
 .flaticon-home:before {
     content: "\f123";
 }
 
 .flaticon-hourglass:before {
     content: "\f124";
 }
 
 .flaticon-info:before {
     content: "\f125";
 }
 
 .flaticon-layer:before {
     content: "\f126";
 }
 
 .flaticon-layout:before {
     content: "\f127";
 }
 
 .flaticon-left-arrow:before {
     content: "\f128";
 }
 
 .flaticon-left-arrow-1:before {
     content: "\f129";
 }
 
 .flaticon-lightning:before {
     content: "\f12a";
 }
 
 .flaticon-link:before {
     content: "\f12b";
 }
 
 .flaticon-logout:before {
     content: "\f12c";
 }
 
 .flaticon-magnet:before {
     content: "\f12d";
 }
 
 .flaticon-map:before {
     content: "\f12e";
 }
 
 .flaticon-menu:before {
     content: "\f12f";
 }
 
 .flaticon-monitor:before {
     content: "\f130";
 }
 
 .flaticon-moon:before {
     content: "\f131";
 }
 
 .flaticon-padnote:before {
     content: "\f132";
 }
 
 .flaticon-paint:before {
     content: "\f133";
 }
 
 .flaticon-pause:before {
     content: "\f134";
 }
 
 .flaticon-photo-camera:before {
     content: "\f135";
 }
 
 .flaticon-placeholder:before {
     content: "\f136";
 }
 
 .flaticon-play-button:before {
     content: "\f137";
 }
 
 .flaticon-power:before {
     content: "\f138";
 }
 
 .flaticon-presentation:before {
     content: "\f139";
 }
 
 .flaticon-printer:before {
     content: "\f13a";
 }
 
 .flaticon-profile:before {
     content: "\f13b";
 }
 
 .flaticon-prohibition:before {
     content: "\f13c";
 }
 
 .flaticon-push-pin:before {
     content: "\f13d";
 }
 
 .flaticon-puzzle:before {
     content: "\f13e";
 }
 
 .flaticon-refresh:before {
     content: "\f13f";
 }
 
 .flaticon-remove:before {
     content: "\f140";
 }
 
 .flaticon-rewind:before {
     content: "\f141";
 }
 
 .flaticon-right-arrow:before {
     content: "\f142";
 }
 
 .flaticon-right-arrow-1:before {
     content: "\f143";
 }
 
 .flaticon-rocket-launch:before {
     content: "\f144";
 }
 
 .flaticon-screen:before {
     content: "\f145";
 }
 
 .flaticon-search:before {
     content: "\f146";
 }
 
 .flaticon-settings:before {
     content: "\f147";
 }
 
 .flaticon-settings-1:before {
     content: "\f148";
 }
 
 .flaticon-settings-2:before {
     content: "\f149";
 }
 
 .flaticon-share:before {
     content: "\f14a";
 }
 
 .flaticon-shield:before {
     content: "\f14b";
 }
 
 .flaticon-shopping-cart:before {
     content: "\f14c";
 }
 
 .flaticon-shutter:before {
     content: "\f14d";
 }
 
 .flaticon-smartphone:before {
     content: "\f14e";
 }
 
 .flaticon-speech-bubble:before {
     content: "\f14f";
 }
 
 .flaticon-speedometer:before {
     content: "\f150";
 }
 
 .flaticon-stats:before {
     content: "\f151";
 }
 
 .flaticon-store:before {
     content: "\f152";
 }
 
 .flaticon-sun:before {
     content: "\f153";
 }
 
 .flaticon-switch:before {
     content: "\f154";
 }
 
 .flaticon-tag:before {
     content: "\f155";
 }
 
 .flaticon-target:before {
     content: "\f156";
 }
 
 .flaticon-timer:before {
     content: "\f157";
 }
 
 .flaticon-unlock:before {
     content: "\f158";
 }
 
 .flaticon-up-arrow:before {
     content: "\f159";
 }
 
 .flaticon-upload:before {
     content: "\f15a";
 }
 
 .flaticon-video:before {
     content: "\f15b";
 }
 
 .flaticon-video-camera:before {
     content: "\f15c";
 }
 
 .flaticon-visible:before {
     content: "\f15d";
 }
 
 .flaticon-voice-recorder:before {
     content: "\f15e";
 }
 
 .flaticon-volume:before {
     content: "\f15f";
 }
 
 .flaticon-waiting:before {
     content: "\f160";
 }
 
 .flaticon-wifi:before {
     content: "\f161";
 }
 
 .flaticon-zoom:before {
     content: "\f162";
 }
 
 .flaticon-zoom-out:before {
     content: "\f163";
 }
 
 /*** 
 
 ===============
     Reset Css
 ===============
 
  ***/
 * {
     margin: 0px;
     padding: 0px;
     border: none;
     outline: none;
 }
 
 /*** 
 
 ===================
     Global Settings
 ===================
 
  ***/
 body {
     font-size: 16px;
     color: #292929;
     line-height: 1.7em;
     font-weight: 400;
     background: #ffffff;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
     font-family: "Open Sans", sans-serif;
     background: #000029;
 }
 
 a {
     text-decoration: none;
     cursor: pointer;
     transition: .3s;
     color: #292929;
 }
 
 button,
 a:hover, a:focus, a:visited {
     text-decoration: none;
     outline: none !important;
     transition: .3s;
 }
 
 h1, h2, h3, h4, h5, h6 {
     position: relative;
     font-weight: 700;
     margin: 0px;
     background: none;
     line-height: 1.2em;
     font-family: "Comfortaa", sans-serif;
 }
 
 h1 {
     font-size: 52px;
 }
 
 h2 {
     font-size: 40px;
 }
 
 h3 {
     font-size: 30px;
 }
 
 h4 {
     font-size: 24px;
 }
 
 h5 {
     font-size: 20px;
 }
 
 h6 {
     font-size: 18px;
 }
 
 input, button, select, textarea {
     outline: none;
 }
 
 textarea {
     overflow: hidden;
 }
 
 p {
     position: relative;
     font-family: "Open Sans", sans-serif;
 }
 
 img {
     -webkit-user-drag: none;
     -khtml-user-drag: none;
     -moz-user-drag: none;
     -o-user-drag: none;
     display: inline-block;
     max-width: 100%;
 }
 
 ul, li {
     list-style: none;
     padding: 0px;
     margin: 0px;
 }
 
 img {
     display: inline-block;
     max-width: 100%;
 }
 
 ::selection {
     background-color: rgba(253, 213, 11, 0.1);
     color: #FDD50B;
 }
 
 -moz-::selection {
     background-color: rgba(253, 213, 11, 0.1);
     color: #FDD50B;
 }
 
 -webkit-::selection {
     background-color: rgba(253, 213, 11, 0.1);
     color: #FDD50B;
 }
 
 -o-::selection {
     background-color: rgba(253, 213, 11, 0.1);
     color: #FDD50B;
 }
 
 .page-wrapper {
     position: relative;
     margin: 0 auto;
     width: 100%;
     min-width: 300px;
     overflow: hidden;
 }
 
 .btn.focus, .btn:focus {
     box-shadow: none;
 }
 
 .border-0 {
     border: 0px;
 }
 
 .radius-50 {
     border-radius: 50px !important;
 }
 
 .centered {
     text-align: center;
 }
 
 @keyframes heartbeat {
     0% {
         -webkit-transform: scale(1);
     }
 
     50% {
         -webkit-transform: scale(0.7);
     }
 
     100% {
         -webkit-transform: scale(1);
     }
 }
 
 @-webkit-keyframes heartbeat {
     0% {
         -webkit-transform: scale(1);
     }
 
     50% {
         -webkit-transform: scale(0.7);
     }
 
     100% {
         -webkit-transform: scale(1);
     }
 }
 
 /*** 
 
 ==================
     Color Classes
 ==================
 
 ***/
 .cl-black {
     color: #292929;
 }
 
 .cl-primary {
     color: #FDD50B;
 }
 
 .cl-white {
     color: #ffffff;
 }
 
 .cl-blue {
     color: #252F5A;
 }
 
 .cl-blue-2 {
     color: #252F5A;
 }
 
 .cl-green {
     color: #6FDA44;
 }
 
 .cl-mint {
     color: #182137;
 }
 
 .cl-yellow {
     color: #A3CB38;
 }
 
 .cl-facebook {
     color: #3B5999;
 }
 
 .cl-twitter {
     color: #55ACEE;
 }
 
 .cl-youtube {
     color: #CD201F;
 }
 
 .cl-pinterest {
     color: #BD081C;
 }
 
 .cl-instagram {
     color: #F5214A;
 }
 
 .facebook-bg {
     background: #3B5999;
 }
 
 .twitter-bg {
     background: #55ACEE;
 }
 
 .youtube-bg {
     background: #CD201F;
 }
 
 .pinterest-bg {
     background: #BD081C;
 }
 
 .google-plus-bg {
     background: #DD5144;
 }
 
 .linkedin-bg {
     background: #0077B5;
 }
 
 .instagram-bg {
     background: #F5214A;
 }
 
 /*** 
 
 ==================
     Section Styles
 ==================
 
 ***/
 .container {
     max-width: 1200px;
 }
 
 .section-padding {
     padding: 50px 0;
 }
 
 .section-padding-2 {
     padding-top: 50px;
     padding-bottom: 20px;
 }
 
 .section-padding-3 {
     padding-top: 50px;
     padding-bottom: 10px;
 }
 
 .section-title {
     margin-bottom: 20px;
 }
 
 .section-title h2 {
     position: relative;
     display: inline-block;
     font-size: 32px;
     font-weight: 700;
     line-height: 1.4;
     z-index: 1;
     text-transform: capitalize;
     margin-bottom: 15px;
     margin-top: -6px;
 }
 
 .section-title h2 span {
     color: #FDD50B;
 }
 
 .section-title h4 {
     font-size: 16px;
     font-family: "Comfortaa", sans-serif;
     margin-bottom: 10px;
     color: #FDD50B;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 1px;
     margin-top: 3px;
 }
 
 .section-title p {
     margin-bottom: 50px;
 }
 
 @media (max-width: 991px) {
     .section-padding {
         padding: 40px 0;
     }
 
     .section-padding-2 {
         padding-top: 40px;
         padding-bottom: 10px;
     }
 
     .section-padding-3 {
         padding-top: 40px;
         padding-bottom: 10px;
     }
 }
 
 @media (max-width: 575px) {
     .section-title h2 {
         font-size: 36px;
     }
 }
 
 @media (max-width: 450px) {
     .section-title h2 {
         font-size: 32px;
     }
 }
 
 /*** 
 
 =======================
     Margin and Padding
 =======================
 
 ***/
 /* 
     Margin Top styles
 */
 .mar-0 {
     margin: 0;
 }
 
 .mt-10 {
     margin-top: 10px;
 }
 
 .mt-20 {
     margin-top: 20px;
 }
 
 .mt-30 {
     margin-top: 30px;
 }
 
 .mt-40 {
     margin-top: 40px;
 }
 
 .mt-50 {
     margin-top: 50px;
 }
 
 .mt-60 {
     margin-top: 60px;
 }
 
 /* 
     Margin Bottom Styles
 */
 .mb-10 {
     margin-bottom: 10px;
 }
 
 .mb-20 {
     margin-bottom: 20px;
 }
 
 .mb-30 {
     margin-bottom: 30px;
 }
 
 .mb-40 {
     margin-bottom: 40px;
 }
 
 .mb-50 {
     margin-bottom: 50px;
 }
 
 .mb-60 {
     margin-bottom: 60px;
 }
 
 /* 
     Margin Right Styles
 */
 .mr-10 {
     margin-right: 10px;
 }
 
 .mr-20 {
     margin-right: 20px;
 }
 
 .mr-30 {
     margin-right: 30px;
 }
 
 .mr-40 {
     margin-right: 40px;
 }
 
 .mr-50 {
     margin-right: 50px;
 }
 
 .mr-60 {
     margin-right: 60px;
 }
 
 /* 
     Padding Top Styles
 */
 .pad-0 {
     padding: 0;
 }
 
 .pt-10 {
     padding-top: 10px;
 }
 
 .pt-20 {
     padding-top: 20px;
 }
 
 .pt-30 {
     padding-top: 30px;
 }
 
 .pt-40 {
     padding-top: 40px;
 }
 
 .pt-50 {
     padding-top: 50px;
 }
 
 .pt-60 {
     padding-top: 60px;
 }
 
 /* 
     Padding Bottom Styles
 */
 .pb-10 {
     padding-bottom: 10px;
 }
 
 .pb-20 {
     padding-bottom: 20px;
 }
 
 .pb-30 {
     padding-bottom: 30px;
 }
 
 .pb-40 {
     padding-bottom: 40px;
 }
 
 .pb-50 {
     padding-bottom: 50px;
 }
 
 .pb-60 {
     padding-bottom: 60px;
 }
 
 /*** 
 
 ============================
     Background and Overlay
 ============================
 
 ***/
 .gray-bg {
     background: #F9F9F9;
 }
 
 .black-bg {
     background: #292929;
 }
 
 .black-bg-2 {
     background: #555555;
 }
 
 .primary-bg {
     background: #FDD50B;
 }
 
 .primary-light-bg {
     background: #00C9B72c;
 }
 
 .primary-bg-dark {
     background: #037EBD;
 }
 
 .white-bg {
     background: #ffffff;
 }
 
 .blue-bg {
     background: #252F5A;
 }
 
 .light-blue-bg {
     background: #234BA5;
 }
 
 .green-bg {
     background: #6FDA44;
 }
 
 .blue-bg-2 {
     background: #000040;
 }
 
 .yellow-bg {
     background: #FDB62F;
 }
 
 .yellow-light-bg {
     background: #FEEDCD;
 }
 
 .purple-bg {
     background: #8E0EF0;
 }
 
 .purple-light-bg {
     background: #E8CFFC;
 }
 
 .mint-bg {
     background: #182137;
 }
 
 .transparent-bg {
     background: transparent;
 }
 
 .gradient-bg {
     /*background-image: linear-gradient(to left, #150b1b 0%, #18263e 100%);
     background-image: linear-gradient(to left, #120f1b 0%, #1a2840 100%);*/
     background: #001f3f;
 }
 
 .dark-overlay {
     background-size: cover !important;
     position: relative;
     z-index: 1;
 }
 
 .dark-overlay:after {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background: #111;
     content: "";
     z-index: -1;
     opacity: .6;
 }
 
 .mint-overlay {
     background-size: cover !important;
     position: relative;
     z-index: 1;
 }
 
 .mint-overlay:after {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background: #182137;
     content: "";
     z-index: -1;
     opacity: .7;
 }
 
 .blue-overlay {
     background-size: cover !important;
     position: relative;
     z-index: 1;
 }
 
 .blue-overlay:after {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background: #240e9a;
     content: "";
     z-index: -1;
     opacity: .65;
 }
 
 .gradient-overlay {
     background-size: cover !important;
     position: relative;
     z-index: 1;
 }
 
 .gradient-overlay:after {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background: #308e0a;
     content: "";
     z-index: -1;
     opacity: .8;
 }
 
 /*** 
 
 ===================
     Buttons Style
 ===================
 
 ***/
 .bttn-mid {
     position: relative;
     font-size: 12px;
     letter-spacing: 1px;
     font-weight: 700;
     padding: 12px 38px;
     border-radius: 3px;
     display: inline-block;
     cursor: pointer;
     text-transform: uppercase;
     transition: 0.4s;
     font-family: "Comfortaa", sans-serif;
 }
 
 .bttn-small {
     position: relative;
     font-size: 11px;
     font-weight: 700;
     padding: 8px 28px;
     border-radius: 3px;
     letter-spacing: 1px;
     display: inline-block;
     cursor: pointer;
     transition: 0.4s;
     font-family: "Comfortaa", sans-serif;
     text-transform: uppercase;
 }
 
 .bttn-mid i, .bttn-small i {
     margin-right: 7px;
 }
 
 .btn-fill {
     color: #292929;
     background: #FDD50B;
 }
 
 .btn-fill:hover {
     background: #252F5A;
     color: #FDD50B;
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
 }
 
 .bttn-mid.btn-emt {
     padding: 12px 41px;
 }
 
 .btn-emt {
     background: transparent;
     color: #ffffff;
     border: 2px solid #ffffff;
 }
 
 .btn-emt:hover {
     color: #fff;
     box-shadow: none;
     background: #FDD50B;
     border: 2px solid transparent;
 }
 
 .btn-wht {
     background: #ffffff;
     color: #292929;
 }
 
 .btn-wht:hover {
     background: #FDD50B;
     color: #292929;
 }
 
 /* ==============================
     Preloader
     ============================== */
 .preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 99999;
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
     background: none repeat scroll 0 0 #252F5A;
 }
 
 .spinner {
     border: 1px solid transparent;
     border-radius: 3px;
     position: relative;
 }
 
 .spinner:before {
     content: '';
     box-sizing: border-box;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 60px;
     height: 60px;
     margin-top: -10px;
     margin-left: -10px;
     border-radius: 50%;
     border: 4px solid #FDD50B;
     border-top-color: transparent;
     animation: spinner 1s linear infinite;
 }
 
 @keyframes spinner {
     to {
         transform: rotate(360deg);
     }
 }
 
 /* 
 ==============================
     ScrollUp Button 
 ============================== 
 */
 a#scrollUp {
     right: 10px;
     bottom: 10px;
     width: 35px;
     height: 35px;
     background: #fdd50b;
     text-align: center;
     line-height: 35px;
     color: #ffffff;
     border-radius: 4px;
     font-size: 14px;
 }
 
 /*
 
 ==========================
   Main Header style
 ==========================
 
 */
 .header-top {
     color: #292929;
     padding: 10px 0;
 }
 
 .header-top .single-header-top p {
     margin: 0;
     margin-top: 3px;
     font-size: 14px;
     display: inline-block;
 }
 
 .header-top .single-header-top p span {
     margin-right: 20px;
 }
 
 .header-top .single-header-top p span i {
     margin-right: 5px;
 }
 
 .header-top .single-header-top p span a {
     color: #292929;
 }
 
 .header-top .single-header-top p span a:hover {
     color: #FDD50B;
 }
 
 .header-top .single-header-top ul {
     display: inline-block;
     margin-left: 20px;
 }
 
 .header-top .single-header-top ul li {
     display: inline-block;
     margin: 0 8px;
 }
 
 .header-top .single-header-top ul li:last-child {
     margin-right: 0;
 }
 
 .header-top .single-header-top ul li a {
     color: #434a53;
     font-size: 13px;
     font-weight: 600;
 }
 
 .header-top .single-header-top ul li a i {
     margin-right: 5px;
 }
 
 .header-top .single-header-top ul li a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .header-top .single-header-top .account-menu {
     float: right;
 }
 
 @media (max-width: 767px) {
     .header-top .single-header-top .account-menu {
         float: none;
         text-align: center;
     }
 }
 
 @media (max-width: 767px) {
     .header-top .single-header-top .account-menu ul {
         margin-left: 0;
     }
 }
 
 @media (max-width: 767px) {
     .header-top .single-header-top {
         text-align: center;
         overflow: hidden;
         margin-bottom: 10px;
     }
 }
 
 @media (max-width: 767px) {
     .header-top .single-header-top.last {
         margin-bottom: 0px;
     }
 }
 
 .acc-tab-btn {
     width: 100%;
     background: #252F5A;
     text-align: center;
     border: 3px solid #252F5A;
 }
 
 .acc-tab-btn li {
     width: 50%;
     float: left;
 }
 
 .acc-tab-btn li a {
     width: 100%;
     padding: 12px 0;
     display: inline-block;
     color: #ffffff;
 }
 
 .acc-tab-btn li a.active {
     background-image: linear-gradient(to left, #a756ff 0%, #5b98ff 100%);
 }
 
 .social-login {
     text-align: center;
     margin-bottom: 20px;
 }
 
 .social-login a {
     padding: 6px 18px;
     margin-right: 10px;
     color: #ffffff;
     display: inline-block;
     border-radius: 4px;
 }
 
 @media (max-width: 420px) {
     .social-login a {
         margin-bottom: 5px;
     }
 }
 
 .social-login a i {
     margin-right: 5px;
 }
 
 .acc-form input {
     width: 100%;
     height: 50px;
     border: 2px solid #ddd;
     margin-bottom: 15px;
     text-indent: 15px;
     transition: 0.3s;
 }
 
 .acc-form input:focus {
     border: 2px solid #252F5A;
 }
 
 .acc-form button {
     width: 100%;
 }
 
 .header-area {
     padding: 10px 0;
     transition: 0.4s;
     width: 100%;
     z-index: 11;
 }
 
 .header-area.fixed-header {
     padding: 10px 0;
     transition: 0.4s;
     width: 100%;
     top: 0;
     z-index: 11;
     background: #fff;
     position: fixed;
 }
 
 .header-area.fixed-header ul li::before {
     color: #292929;
 }
 
 .header-area.fixed-header ul li:hover::before {
     color: #FDD50B;
 }
 
 .header-area.fixed-header ul li a {
     color: #292929;
 }
 
 @media (max-width: 991px) {
     .header-area.fixed-header ul li a {
         color: #ffffff;
     }
 }
 
 .header-area.fixed-header ul li a:hover {
     color: #FDD50B;
 }
 
 .header-area.fixed-header .header-btn button {
     color: #292929;
 }
 
 .header-sticky {
     background: transparent;
 }
 
 .sticky-header {
     background: #ffffff;
     padding: 10px 0;
 }
 
 .navbar-brand img {
    height:100px; /* 3× larger than your original 26px */
    width: auto;
 }

@media (max-width: 768px) {
    .navbar-brand img {
        height: 60px; /* slightly smaller on phones */
    }
}
 
 .main-menu {
     padding-left: 0;
     padding-right: 0;
 }
 
 .main-menu ul li {
     margin-right: 25px;
 }
 
 .main-menu ul li:last-child {
     margin-right: 0px;
 }
 
 .main-menu ul li:hover a {
     color: #FDD50B;
 }
 
 .main-menu ul li a {
     color: #ffffff;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 14px;
     font-family: "Open Sans", sans-serif;
 }
 
 .main-menu ul li:nth-last-of-type(1) .dropdown-menu .dropdown-menu, .main-menu ul li:nth-last-of-type(2) .dropdown-menu .dropdown-menu, .main-menu ul li:nth-last-of-type(3) .dropdown-menu .dropdown-menu {
     left: -100%;
     top: 0;
 }
 
 ul.dropdown-menu li a {
     text-transform: capitalize;
 }
 
 li.nav-item.dropdown .dropdown-toggle {
     position: relative;
 }
 
 li.nav-item.dropdown .dropdown-toggle:before {
     position: absolute;
     content: "\f107";
     font-family: 'FontAwesome';
     font-size: 16px;
     font-weight: normal;
     right: -7px;
     top: 48%;
     transform: translateY(-48%);
 }
 
 @media (max-width: 991px) {
     li.nav-item.dropdown .dropdown-toggle:before {
         display: none;
     }
 }
 
 .dropdown-menu li.nav-item.dropdown:before {
     position: absolute;
     content: "\f107";
     font-family: 'FontAwesome';
     font-size: 16px;
     right: 15px;
     top: 48%;
     transform: translateY(-48%) rotate(-90deg);
     color: #292929;
 }
 
 .dropdown a {
     transition: 0.4s;
 }
 
 .dropdown-menu {
     opacity: 0;
     visibility: hidden;
     transition: all 0.5s;
     display: block;
     background: #ffffff;
     margin-top: 23px;
     width: 220px;
     border-radius: 0;
     border: 0;
     -webkit-box-shadow: 0px 7px 20px -14px rgba(34, 54, 60, 0.74);
     box-shadow: 0px 7px 20px -14px rgba(34, 54, 60, 0.74);
 }
 
 .dropdown:hover > .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translate3d(0, -5px, 0);
 }
 
 .dropdown-menu a {
     padding-top: 7px;
     padding-bottom: 7px;
     font-size: 14px;
     color: #292929 !important;
 }
 
 .dropdown-menu a:hover {
     background: transparent;
 }
 
 .dropdown-menu a:active {
     background: transparent;
 }
 
 ul.dropdown-menu li .dropdown-menu {
     left: 100%;
     top: 0;
 }
 
 @media (max-width: 991px) {
     ul.dropdown-menu li .dropdown-menu.show {
         visibility: visible;
         opacity: 1;
     }
 }
 
 .main-menu ul li ul li {
     margin-right: 0;
 }
 
 /* Menu Border Bottom */
 .menu-toggle {
     position: relative;
     display: block;
     width: 25px;
     height: 20px;
     background: transparent;
     border-top: 2px solid #292929;
     border-bottom: 2px solid #292929;
     color: #292929;
     font-size: 0;
     -webkit-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
 }
 
 .menu-toggle:before, .menu-toggle:after {
     content: '';
     display: block;
     width: 100%;
     height: 2px;
     position: absolute;
     top: 50%;
     left: 50%;
     background: #292929;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     transition: -webkit-transform 0.25s ease-in-out;
     -webkit-transition: -webkit-transform 0.25s ease-in-out;
     -o-transition: -webkit-transform 0.25s ease-in-out;
     transition: transform 0.25s ease-in-out;
     -moz-transition: -webkit-transform 0.25s ease-in-out;
     -ms-transition: -webkit-transform 0.25s ease-in-out;
 }
 
 span.is-active {
     border-color: transparent;
 }
 
 span.is-active:before {
     -webkit-transform: translate(-50%, -50%) rotate(45deg);
     -ms-transform: translate(-50%, -50%) rotate(45deg);
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
 span.is-active:after {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     -ms-transform: translate(-50%, -50%) rotate(-45deg);
     transform: translate(-50%, -50%) rotate(-45deg);
 }
 
 span.menu-toggle:hover {
     color: #ffb606;
 }
 
 span.is-active {
     border-color: transparent;
 }
 
 span.is-active:before {
     -webkit-transform: translate(-50%, -50%) rotate(45deg);
     -ms-transform: translate(-50%, -50%) rotate(45deg);
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
 span.is-active:after {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     -ms-transform: translate(-50%, -50%) rotate(-45deg);
     transform: translate(-50%, -50%) rotate(-45deg);
 }
 
 .dropdown-toggle::after {
     display: none;
 }
 
 .black-bg .menu-toggle {
     border-top: 2px solid #ffffff;
     border-bottom: 2px solid #ffffff;
 }
 
 .black-bg .menu-toggle::before, .black-bg .menu-toggle::after {
     background: #ffffff;
 }
 
 .black-bg .menu-toggle.is-active {
     border-color: transparent;
 }
 
 .header-btn {
     margin-left: 40px;
 }
 
 .header-btn button {
     color: #ffffff;
     background: transparent;
 }
 
 .header-btn button:hover {
     color: #FDD50B;
 }
 
 .search-btn {
     font-size: 14px;
     color: #ffffff;
     display: inline-block;
 }
 
 /* Full Screen Search */
 .search-full {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 0;
     opacity: 0;
     visibility: hidden;
     background: #FDD50B;
     z-index: 999;
     transition: all 0.3s ease-in-out;
     transform-origin: top;
 }
 
 .search-full.open {
     height: 150px;
     opacity: 1;
     visibility: visible;
 }
 
 .search-full.close {
     height: 0;
     opacity: 0;
     visibility: hidden;
 }
 
 .search-full .search-close {
     color: #FDD50B;
     font-size: 20px;
     position: absolute;
     top: 20px;
     right: 20px;
     z-index: 9;
     background: transparent;
     color: #ffffff;
 }
 
 .search-full .search-close:hover {
     transform: rotate(90deg);
 }
 
 .search-full--inner {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     width: 100%;
 }
 
 .main-search-form {
     width: 100%;
 }
 
 .main-search-form input {
     border: 2px solid #ffffff;
     width: 100%;
     background-color: transparent;
     color: #ffffff;
     height: 55px;
     font-size: 18px;
     font-weight: 300;
     text-indent: 20px;
     transition: 0.4s;
 }
 
 .main-search-form input:focus, .main-search-form input:hover {
     border: 2px solid #ffffff;
 }
 
 .main-search-form input::-webkit-input-placeholder {
     color: #ffffff;
 }
 
 .main-search-form input::-moz-placeholder {
     color: #ffffff;
 }
 
 .main-search-form input:-ms-input-placeholder {
     color: #ffffff;
 }
 
 .main-search-form input:-moz-placeholder {
     color: #ffffff;
 }
 
 @media (max-width: 991px) {
     .navbar-brand {
         margin-left: 15px;
     }
 
     .main-menu ul li {
         margin-right: 0;
         position: relative;
         margin: 3px 0;
     }
 
     .main-menu ul li.dropdown a {
         z-index: 999;
         position: relative;
         color: #ffffff;
     }
 
     .main-menu ul li a {
         color: #ffffff;
     }
 
     .main-menu ul li.dropdown:after {
         position: absolute;
         content: "\f107";
         font-family: FontAwesome;
         right: 15px;
         top: 0;
         color: #ffffff;
         line-height: 45px;
         overflow: hidden;
         z-index: 1;
         width: 45px;
         text-align: center;
         background: #FDD50B;
     }
 
     .dropdown-menu {
         display: none;
     }
 
     .dropdown-menu {
         width: auto;
         margin: 10px 15px 10px 0;
         background: #ffffff;
     }
 
     .navbar-collapse {
         margin-top: 20px;
         padding-left: 15px;
         max-height: 450px;
         overflow: auto;
         background: #292929;
         padding-bottom: 20px;
     }
 
     .cart-btn {
         margin-left: 0;
         margin-top: 15px;
     }
 
     li.nav-item.dropdown:before {
         display: none;
     }
 
     .header-btn {
         margin-left: 0;
     }
 }
 
 @media (max-width: 575px) {
     .main-menu {
         padding-left: 15px;
         padding-right: 15px;
     }
 
     .navbar-brand {
         margin-left: 0;
     }
 
     .navbar-toggler {
         padding-right: 0;
     }
 }
 
 /*
 
 ===============================
 Footer Area
 ===============================
 
 */
 .footer-area {
     position: relative;
     z-index: 1;
 }
 
 .footer-area .footer-widget {
     margin-bottom: 30px;
     color: #ffffff;
 }
 
 .footer-area .footer-widget h3 {
     font-size: 22px;
     margin-bottom: 30px;
     margin-top: -4px;
     font-weight: 600;
     position: relative;
     color: #ffffff;
     text-transform: capitalize;
 }
 
 .footer-area .footer-widget p {
     margin-bottom: 20px;
     color: #ffffff;
 }
 
 .footer-area .footer-widget .social a {
     height: 35px;
     width: 35px;
     line-height: 35px;
     border-radius: 50%;
     background: #ffffff;
     font-size: 13px;
     text-align: center;
     margin-right: 5px;
     display: inline-block;
 }
 
 .footer-area .footer-widget .social a:hover {
     background: #FDD50B;
     color: #ffffff;
 }
 
 .footer-area .footer-widget.footer-nav {
     margin-bottom: 30px;
 }
 
 .footer-area .footer-widget.footer-nav ul li {
     margin-bottom: 10px;
     position: relative;
     transition: 0.4s;
 }
 
 .footer-area .footer-widget.footer-nav ul li:last-child {
     margin-bottom: 0;
 }
 
 .footer-area .footer-widget.footer-nav ul li:hover {
     color: #73e457;
 }
 
 .footer-area .footer-widget.footer-nav ul li a {
     color: #ffffff;
     text-transform: capitalize;
     padding-left: 25px;
     position: relative;
 }
 
 .footer-area .footer-widget.footer-nav ul li a::before {
     position: absolute;
     content: "\f192";
     transform: rotate(90deg);
     left: 0;
     top: -3px;
     font-family: Fontawesome;
     font-size: 12px;
 }
 
 .footer-area .footer-widget.footer-nav ul li a:hover {
     color: #73e457;
 }
 
 .footer-area .footer-widget.footer-insta .row {
     margin: 0 -2px;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] {
     padding: 0 2px;
     margin-bottom: 4px;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a {
     position: relative;
     display: block;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a img {
     width: 100%;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a::before {
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     left: 0;
     top: 0;
     background: rgba(48, 142, 10, 0.66);
     opacity: 0;
     transition: 0.4s;
     z-index: 1;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a:after {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: #ffffff;
     font-size: 16px;
     content: "\f047";
     font-family: Fontawesome;
     opacity: 0;
     z-index: 2;
     transition: 0.4s;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a:hover::before {
     opacity: 0.8;
 }
 
 .footer-area .footer-widget.footer-insta .row [class*="col"] a:hover:after {
     opacity: 1;
 }
 
 /*
 
 ===============================
 Copyright Area
 ===============================
 
 */
 .copyright {
     padding: 20px 0;
     background: #18253c;
 }
 
 .copyright p {
     color: #ffffff;
     margin: 0;
     font-size: 12px;
 }
 
 @media (max-width: 767px) {
     .copyright p {
         text-align: center;
     }
 }
 
 .copyright ul {
     text-align: center;
 }
 
 @media (max-width: 767px) {
     .copyright ul {
         float: none;
         text-align: center;
     }
 }
 
 .copyright ul li {
     display: inline-block;
     margin-left: 10px;
 }
 
 @media (max-width: 767px) {
     .copyright ul li {
         margin-left: 0px;
     }
 }
 
 .copyright ul li a {
     color: #ffffff;
     font-size: 12px;
 }
 
 .copyright ul li a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 /*
 
 ===============================
 Hero Area
 ===============================
 
 */
 .hero-section {
     position: relative;
 }
 
 .hero-section .hero-area-1 .single-hero {
     background-size: cover !important;
     z-index: 1;
 }
 
 .hero-section .hero-area-1 .single-hero .hero-sub {
     width: 100%;
     color: #ffffff;
     padding: 270px 0;
 }
 
 @media (max-width: 1024px) {
     .hero-section .hero-area-1 .single-hero .hero-sub {
         text-align: center;
         height: auto;
         padding: 150px 0;
     }
 }
 
 .hero-section .hero-area-1 .single-hero .hero-sub .hero-left h4 {
     color: #A3CB38;
     margin-bottom: 10px;
     text-transform: uppercase;
     font-weight: 600;
     font-family: "Comfortaa", sans-serif;
     font-size: 22px;
 }
 
 .hero-section .hero-area-1 .single-hero .hero-sub .hero-left h1 {
     font-size: 100px;
     font-weight: 700;
     margin-bottom: 20px;
     text-transform: uppercase;
 }
 
 .hero-section .hero-area-1 .single-hero .hero-sub .hero-left h1 span {
     color: #A3CB38;
 }
 
 @media (max-width: 575px) {
     .hero-section .hero-area-1 .single-hero .hero-sub .hero-left h1 {
         font-size: 36px;
     }
 }
 
 .hero-section .hero-area-1 .single-hero .hero-sub .hero-left p {
     font-size: 18px;
     margin-bottom: 30px;
     font-weight: 400;
 }
 
 @media (max-width: 350px) {
     .hero-section .hero-area-1 .single-hero .hero-sub .hero-left a {
         margin: 0;
         margin-top: 15px;
     }
 }
 
 .hero-section .hero-area-1 .owl-dots {
     position: absolute;
     bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
 }
 
 .hero-section .hero-area-1 .owl-dots .owl-dot {
     width: 10px;
     height: 10px;
     background: transparent;
     border: 2px solid #ffffff;
     border-radius: 50%;
     margin: 0 3px;
     display: inline-block;
 }
 
 .hero-section .hero-area-1 .owl-dots .owl-dot span {
     color: #252F5A;
 }
 
 .hero-section .hero-area-1 .owl-dots .owl-dot:hover, .hero-section .hero-area-1 .owl-dots .owl-dot.active {
     border-color: #A3CB38;
     background: #A3CB38;
 }
 
 .hero-section .hero-area-2 .single-hero {
     background-size: cover !important;
     z-index: 1;
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub {
     display: table;
     height: 100vh;
     width: 100%;
     color: #ffffff;
 }
 
 @media (max-width: 1333px) {
     .hero-section .hero-area-2 .single-hero .hero-sub {
         text-align: center;
     }
 }
 
 @media (max-width: 1024px) {
     .hero-section .hero-area-2 .single-hero .hero-sub {
         height: auto;
         padding: 150px 0 100px 0;
     }
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell {
     display: table-cell;
     vertical-align: middle;
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left {
     margin-top: 80px;
 }
 
 @media (max-width: 991px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left {
         margin-top: 0;
     }
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left h4 {
     color: #ffffff;
     margin-bottom: 10px;
     text-transform: uppercase;
     font-family: "Comfortaa", sans-serif;
     font-weight: 600;
     font-size: 26px;
     letter-spacing: 2px;
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left h1 {
     font-size: 60px;
     font-weight: 700;
     margin-bottom: 20px;
     text-transform: capitalize;
 }
 
 @media (max-width: 575px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left h1 {
         font-size: 36px;
     }
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left p {
     font-size: 20px;
     margin-bottom: 30px;
     font-weight: 400;
     line-height: 1.5em;
 }
 
 @media (max-width: 350px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left a {
         margin: 0;
         margin-top: 15px;
     }
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left.hero-shade {
     padding: 70px 90px;
     background: #ffffff5c;
     border-radius: 10px;
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
 }
 
 @media (max-width: 500px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left.hero-shade {
         padding: 70px 50px;
     }
 }
 
 @media (max-width: 400px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left.hero-shade {
         padding: 70px 30px;
     }
 }
 
 @media (max-width: 350px) {
     .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left.hero-shade {
         padding: 70px 15px;
     }
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left .video-play {
     font-size: 10px;
     height: 90px;
     width: 90px;
     line-height: 90px;
     text-align: center;
     display: inline-block;
     background: #ffffff;
     border-radius: 50%;
     color: #252F5A;
 }
 
 .hero-section .hero-area-2 .single-hero .hero-sub .table-cell .hero-left .video-play:hover {
     color: #A3CB38;
 }
 
 .hero-section .hero-area-2 .owl-nav {
     display: block;
 }
 
 .hero-section .hero-area-2 .owl-nav button {
     position: absolute;
     left: 50px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 20px;
     color: #292929;
     height: 80px;
     width: 80px;
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
 }
 
 .hero-section .hero-area-2 .owl-nav button.owl-next {
     left: auto;
     right: 50px;
 }
 
 @media (max-width: 991px) {
     .hero-section .hero-area-2 .owl-nav {
         display: none;
     }
 }
 
 /*
 
 ===============================
 Site Sidebar
 ===============================
 
 */
 .content-sidebar {
     background: #001f3f;
     padding: 40px 5px;
     color: #ffffff;
     margin-top: 40px;
     border-radius: 12px;  /* round corners */
 }
 
 .content-sidebar h3 {
     position: relative;
     margin-bottom: 25px;
     padding-bottom: 15px;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     font-family: "Open Sans", sans-serif;
 }
 
 .content-sidebar h3::before {
     position: absolute;
     left: 0;
     bottom: 0;
     content: "";
     width: 30px;
     height: 2px;
     background: #FDD50B;
 }
 
 .content-sidebar ul li {
     margin-bottom: 15px;
 }
 
 .content-sidebar ul li:last-child {
     margin-bottom: 0px;
 }
 
 .content-sidebar ul li a {
     color: #ffffff;
     font-weight: 700;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .content-sidebar ul li a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .content-sidebar ul li a img {
     max-width: 20px;
     max-height: 20px;
     margin-right: 10px;
 }
 
 .web-sidebar-widget {
    background: #001f3f;
     margin-top: 40px;
     margin-bottom: 40px;
     border: 2px solid #FDD50B;
     border-radius: 5px;
 }
 .sports-list, .categories-list, .tournaments-list, .matches-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.sports-list li, .categories-list li, .tournaments-list li, .matches-list li {
    padding: 6px 0;
}
.heading .fa { margin-left: 8px; }
.loading { color: #999; font-size: 13px; }

 
 /* Old Non Glossy
 .web-sidebar-widget .widget-head {
     background: #FDD50B;
     padding: 15px;
 }
     */
     .web-sidebar-widget .widget-head {
    background: linear-gradient(to bottom, #ffee66 0%, #fdd50b 50%, #e6b800 100%);
    padding: 15px;
    border-radius: 3px; /* rounded edges make glossy effect look better */
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.6), 
                inset 0 -2px 5px rgba(0, 0, 0, 0.2),
                0 2px 6px rgba(0, 0, 0, 0.3);
    color: #333;
}

 
 .web-sidebar-widget .widget-head h3 {
    margin: 0;
     font-size: 16px;
     font-weight: 700;
     color: #292929;
 }
 
 .web-sidebar-widget .widget-body {
     padding: 30px;
     color: #ffffff;
     font-size: 14px;
 }
 
 /* Betslip only */
 .web-sidebar-widget .betslip-body {
     padding: 3px;
     color: #ffffff;
     font-size: 14px;
 }
 .betslip-actions {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
 }
 
/* General button styling */
.betslip-actions button {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    position: relative;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

/* Subtle glossy overlay */
.betslip-actions button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0));
    pointer-events: none;
}

/* Hover + click effect */
.betslip-actions button:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4),
                0 4px 6px rgba(0, 0, 0, 0.2);
}
.betslip-actions button:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glossy Red */
.betslip-actions .btn-danger {
    background: linear-gradient(to bottom, #ff6666, #e60000);
}

/* Glossy Green */
.betslip-actions .btn-success {
    background: linear-gradient(to bottom, #66e66e, #009900);
}

 
 .highlighted-odds {
     border: 2px solid #ff9800 !important;
     background-color: #fff3e0 !important;
     color: #000 !important;
     font-weight: bold;
 }
 
 /* Hover effect */
 .filter-odds:hover {
     background-color: #0d6efd; /* Bootstrap primary color */
     color: #fff;
 }
 
 /* Active (selected) state */
 .filter-odds.active {
     background-color: #0d6efd;
     color: #fff;
     border-color: #0d6efd;
 }
 
 .filter-odds {
     font-size: 0.8rem; /* smaller text */
     margin-left: 4px;  /* small gap between buttons */
 }
 
 /* General table style */
 .odds_table {
     border-collapse: separate;
     border-spacing: 0 8px; /* gap between rows = card effect */
     width: 100%;
 }
 
 /* Header */
 .odds_table thead th {
     background: #1d56a1;
     font-size: 13px;
     font-weight: 600;
     color: #333;
     text-transform: uppercase;
     border: none;
     padding: 8px 6px;
 }
 
 /* Row as card */
 .odds_table tbody tr {
     background: #fff;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     border-radius: 6px;
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 /* Card hover effect */
 .odds_table tbody tr:hover {
     transform: translateY(-2px);
     box-shadow: 0 3px 8px rgba(0,0,0,0.15);
 }
 
 /* Alternate striped rows like SportPesa */
 .odds_table tbody tr:nth-child(odd) {
     background-color: #0b2342;  /* deep navy */
     color: #fff;
 }
 
 .odds_table tbody tr:nth-child(even) {
     background-color: #132f57;  /* slightly lighter navy */
     color: #fff;
 }
 
 /* Hover effect - lighten a bit */
 .odds_table tbody tr:hover {
     background-color: #1c3d6e; /* lighter blue on hover */
     transition: background-color 0.2s ease;
 }
 
 /* Optional: make odds buttons stand out */
 .odds_table .btn {
     border-radius: 4px;
     font-size: 0.85rem;
     padding: 4px 8px;
 }
 
 /* Match info cell */
 .odds_table td:first-child {
     padding: 10px 12px;
     vertical-align: middle;
 }
 
 /* Buttons (odds) */
 .odds_table .bet-btn {
     display: flex;                  /* flexbox for centering */
     align-items: center;            /* vertical centering */
     justify-content: center;        /* horizontal centering */
     width: 100%;
     height: 48px;                   /* taller button */
     font-size: 18px;                /* larger text */
     font-weight: 600;
     padding: 0 12px;
     background: #f8f9fa;
     border: 1px solid #ddd;
     color: #000;
     border-radius: 6px;
     transition: all 0.2s ease;
     text-align: center;
     white-space: nowrap;            /* keep text in one line */
 }
 
 
 /* Active / hover odds buttons */
 .odds_table .bet-btn:hover {
     background: #0d6efd;
     color: #fff;
     border-color: #0d6efd;
 }
 
 .odds_table .bet-btn.active {
     background: #0d6efd !important;
     color: #fff !important;
     border-color: #0d6efd !important;
 }
 
 /* Ensure table cells align content vertically */
 .odds_table td.market-group {
     vertical-align: middle;
     text-align: center;
     padding: 6px;
 }
 
 /* Disabled odds */
 .odds_table .btn-secondary {
     background: #e9ecef;
     border: none;
     font-size: 13px;
     width: 100%;
 }
 
 /* More bets link */
 .odds_table td:last-child a {
     font-size: 12px;
     color: #0d6efd;
     font-weight: 500;
 }
 
 
 
 .web-sidebar-widget .widget-body .chat-boxed {
     max-height: 270px;
     overflow-y: scroll;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat {
     overflow: hidden;
     margin-bottom: 30px;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat:last-child {
     margin-bottom: 0;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .img {
     margin-right: 10px;
     float: left;
     width: 15%;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .img img {
     width: 30px;
     height: 30px;
     border-radius: 50%;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .chat-text {
     float: left;
     width: 80%;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .chat-text h4 {
     font-size: 10px;
     position: relative;
     color: #FDD50B;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .chat-text h4 span {
     position: absolute;
     right: 0;
     color: #c2b9b9;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed .single-chat .chat-text p {
     font-size: 10px;
     line-height: initial;
     margin-bottom: 0;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed::-webkit-scrollbar-track {
     -box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
     background-color: #182137;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed::-webkit-scrollbar {
     width: 3px;
     background-color: #182137;
     margin-left: 15px;
 }
 
 .web-sidebar-widget .widget-body .chat-boxed::-webkit-scrollbar-thumb {
     background-color: #FDD50B;
 }
 
 .main-content-slider {
     margin-top: 40px;
     margin-bottom: 40px;
 }
 
 .main-content-slider .single-slider {
     height: 100%;
     width: 100%;
     border-radius: 10px;
     padding: 100px 50px;
     color: #ffffff;
     position: relative;
 }
 
 .main-content-slider .single-slider::before {
     height: 100%;
     width: 100%;
     content: "";
     background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     opacity: 0.4;
     position: absolute;
     top: 0;
     left: 0;
     border-radius: 10px;
 }
 
 .main-content-slider .single-slider .hero-score {
     padding: 4px 15px;
     border: 2px solid #ffffff;
     display: inline-block;
     margin: 0 10px 15px 0;
     font-size: 14px;
     background: #ffffff;
     color: #434a53;
     border-radius: 5px;
 }
 
 .main-content-slider .single-slider .hero-score span {
     margin-left: 30px;
     font-size: 12px;
 }
 
 .main-content-slider .single-slider h3 {
     margin-bottom: 15px;
     font-size: 32px;
 }
 
 .main-content-slider .single-slider p {
     font-size: 20px;
 }
 
 .main-content-slider .owl-dots {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
 }
 
 .main-content-slider .owl-dots .owl-dot {
     width: 10px;
     height: 10px;
     background: transparent;
     border: 2px solid #ffffff;
     border-radius: 50%;
     margin: 0 3px;
     display: inline-block;
 }
 
 .main-content-slider .owl-dots .owl-dot span {
     color: #252F5A;
 }
 
 .main-content-slider .owl-dots .owl-dot:hover, .main-content-slider .owl-dots .owl-dot.active {
     border-color: #FDD50B;
     background: #FDD50B;
 }
 /* Compact bet buttons inside the odds table */
 .odds_table .bet-btn {
     display: inline-block;
     padding: 4px 8px;           /* smaller padding */
     font-size: 11px;            /* smaller font */
     line-height: 1.2;
     font-weight: 600;
     border-radius: 4px;
     min-width: 40px;            /* keeps width consistent */
     margin: 1px;                /* tiny space between buttons */
     background: #123c73;        /* navy like SportPesa */
     color: #fff;
     border: none;
     text-align: center;
     transition: background 0.2s ease, transform 0.15s ease;
 }
 
 .odds_table .bet-btn:hover {
     background: #1f4d96;        /* lighten navy on hover */
     transform: scale(1.05);
 }
 
 .odds_table .market-group {
     padding: 2px 3px;           /* squeeze table cells */
     white-space: nowrap;
     text-align: center;
 }
 
 /* Disabled buttons */
 .odds_table .btn-secondary {
     padding: 4px 8px;
     font-size: 11px;
     border-radius: 4px;
     background: #ccc;
     color: #666;
     min-width: 40px;
 }
 
 
 /* Game Box */
 .game-box {
     margin-bottom: 30px;
 }
 
 /* Card styling - navy background like SportPesa */
 .game-box .card {
     background-color: #001f3f; /* deep navy */
     color: #fff;
     border-radius: 6px;
     box-shadow: 0 2px 6px rgba(0,0,0,0.2);
     border: none;
     transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 .game-box .card:hover {
     background-color: #002a66; /* lighten on hover */
     transform: translateY(-2px);
 }
 
 /* Header */
 .game-box .card .card-header {
     background-color: transparent;
     border-bottom: 1px solid rgba(255,255,255,0.1);
     color: #fff;
 }
 
 .game-box .card .card-header h3 {
     font-size: 18px;
     display: inline-block;
     color: #fff;
 }
 
 .game-box .card .card-header span {
     float: right;
     margin-left: 15px;
     font-size: 13px;
     color: #ccc;
 }
 
 /* Toggle switch */
 .game-box .card .card-header label {
     background: #444;
 }
 .game-box .card .card-header input:checked + label {
     background: #fdd50b; /* SportPesa yellow */
 }
 
 /* Body links */
 .game-box .card .card-body ul li a {
     border: 0;
     font-weight: 600;
     font-size: 11px;
     text-transform: uppercase;
     color: #ddd;
     padding: 5px 10px;
 }
 
 .game-box .card .card-body ul li a:hover,
 .game-box .card .card-body ul li a.active {
     color: #fdd50b; /* yellow highlight */
     border-bottom: 2px solid #fdd50b;
 }
 
 /* Search box */
 .game-box .card .card-body ul li.search-game input {
     border: 1px solid #555;
     background: #002a66;
     color: #fff;
 }
 .game-box .card .card-body ul li.search-game input:focus {
     border-color: #fdd50b;
 }
 
 /* Table */
 .game-box .card .card-body table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0 5px;
 }
 
 .game-box .card .card-body table tr {
     background: #002a66;
     transition: background-color 0.2s ease;
 }
 .game-box .card .card-body table tr:nth-child(even) {
     background: #003366; /* striped navy */
 }
 .game-box .card .card-body table tr:hover {
     background: #004080; /* lighten on hover */
 }
 
 .game-box .card .card-body table tr th,
 .game-box .card .card-body table tr td {
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     text-align: center;
     color: #fff;
     padding: 8px;
 }
 
 /* Odds buttons */
 .game-box .card .card-body table tr td a.btnn {
     padding: 4px 14px;
     border-radius: 5px;
     display: inline-block;
     color: #001f3f;
     background: #fdd50b; /* yellow odds buttons */
     font-weight: bold;
     font-size: 12px;
     margin-top: 5px;
     transition: background-color 0.2s ease;
 }
 .game-box .card .card-body table tr td a.btnn:hover {
     background: #ffe766;
 }
 
 
 /* Content center */
 .content-center {
     background: #182137;
     margin-bottom: 40px;
     padding: 40px;
     border-radius: 5px;
 }
 
 .content-center p {
     font-size: 14px;
 }
 
 .content-center img {
     border-radius: 5px;
     margin-bottom: 30px;
 }
 
 /*
 
 ===============================
 Blog Area
 ===============================
 
 */
 .blog-area {
   /* Pagination */
 }
 
 .blog-area .single-blog {
     margin-bottom: 30px;
 }
 
 .blog-area .single-blog:hover .single-blog-img::before {
     opacity: 0.7;
 }
 
 .blog-area .single-blog:hover .single-blog-img a {
     opacity: 1;
 }
 
 .blog-area .single-blog .single-blog-img {
     position: relative;
 }
 
 .blog-area .single-blog .single-blog-img img {
     width: 100%;
     border-radius: 8px;
 }
 
 .blog-area .single-blog .single-blog-img a {
     font-size: 26px;
     color: #ffffff;
     position: absolute;
     left: 50%;
     top: 45%;
     transform: translate(-45%, -50%);
     opacity: 0;
     transition: 0.3s;
 }
 
 .blog-area .single-blog .single-blog-img a:hover {
     color: #FDD50B;
 }
 
 .blog-area .single-blog .single-blog-img:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: #292929;
     opacity: 0;
     transition: 0.4s;
     border-radius: 8px;
 }
 
 .blog-area .single-blog .single-blog-content {
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
     padding: 30px;
     background: #ffffff;
     width: 90%;
     margin: auto;
     margin-top: -70px;
     position: relative;
 }
 
 .blog-area .single-blog .single-blog-content .blog-meta {
     margin-bottom: 10px;
 }
 
 .blog-area .single-blog .single-blog-content .blog-meta span a {
     margin-right: 10px;
     font-size: 14px;
     display: inline-block;
     color: #434a53;
 }
 
 .blog-area .single-blog .single-blog-content .blog-meta span a:hover {
     color: #FDD50B;
 }
 
 .blog-area .single-blog .single-blog-content .blog-meta span a i {
     color: #FDD50B;
     font-size: 16px;
     font-weight: bold;
     margin-right: 5px;
 }
 
 .blog-area .single-blog .single-blog-content h3 {
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 0;
     line-height: 1.4em;
 }
 
 .blog-area .single-blog .single-blog-content h3 a {
     color: #292929;
 }
 
 .blog-area .single-blog .single-blog-content h3 a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .blog-area .single-blog-2 {
     margin-bottom: 30px;
 }
 
 .blog-area .single-blog-2:hover .single-blog-img::before {
     opacity: 0.7;
 }
 
 .blog-area .single-blog-2:hover .single-blog-img a {
     opacity: 1;
 }
 
 .blog-area .single-blog-2 .single-blog-img {
     position: relative;
 }
 
 .blog-area .single-blog-2 .single-blog-img img {
     width: 100%;
     margin-bottom: 0;
 }
 
 .blog-area .single-blog-2 .single-blog-img a {
     font-size: 26px;
     color: #ffffff;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: 0.3s;
 }
 
 .blog-area .single-blog-2 .single-blog-img a:hover {
     color: #FDD50B;
 }
 
 .blog-area .single-blog-2 .single-blog-img:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: #252F5A;
     opacity: 0;
     transition: 0.4s;
 }
 
 .blog-area .single-blog-2 .single-blog-content {
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
     padding: 30px;
     background: #252F5A;
     position: relative;
 }
 
 .blog-area .single-blog-2 .single-blog-content .blog-meta {
     margin-bottom: 10px;
 }
 
 .blog-area .single-blog-2 .single-blog-content .blog-meta span a {
     margin-right: 10px;
     font-size: 14px;
     display: inline-block;
     color: #ffffff;
 }
 
 .blog-area .single-blog-2 .single-blog-content .blog-meta span a:hover {
     color: #FDD50B;
 }
 
 .blog-area .single-blog-2 .single-blog-content .blog-meta span a i {
     color: #FDD50B;
     font-size: 16px;
     font-weight: bold;
     margin-right: 5px;
 }
 
 .blog-area .single-blog-2 .single-blog-content h3 {
     font-size: 22px;
     text-transform: capitalize;
     margin-bottom: 10px;
     line-height: 1.4em;
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
 }
 
 .blog-area .single-blog-2 .single-blog-content h3 a {
     color: #ffffff;
 }
 
 .blog-area .single-blog-2 .single-blog-content h3 a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .blog-area .single-blog-2 .single-blog-content p {
     margin-bottom: 0;
 }
 
 .blog-area .single-blog-3 {
     margin-bottom: 30px;
 }
 
 .blog-area .single-blog-3:hover .single-blog-img::before {
     opacity: 0.7;
 }
 
 .blog-area .single-blog-3:hover .single-blog-img a {
     opacity: 1;
 }
 
 .blog-area .single-blog-3 .single-blog-img {
     position: relative;
 }
 
 .blog-area .single-blog-3 .single-blog-img img {
     width: 100%;
 }
 
 .blog-area .single-blog-3 .single-blog-img .blog-meta {
     color: #ffffff;
     position: absolute;
     left: 0;
     bottom: 0;
 }
 
 .blog-area .single-blog-3 .single-blog-img .blog-meta span {
     text-transform: uppercase;
     background: #FDD50B;
     padding: 8px 22px;
     display: block;
     text-align: center;
     line-height: 20px;
     font-size: 14px;
 }
 
 .blog-area .single-blog-3 .single-blog-img:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: #292929;
     opacity: 0;
     transition: 0.4s;
 }
 
 .blog-area .single-blog-3 .single-blog-content {
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
     padding: 30px;
     background: #ffffff;
     position: relative;
 }
 
 .blog-area .single-blog-3 .single-blog-content h3 {
     font-size: 22px;
     text-transform: capitalize;
     margin-bottom: 10px;
     line-height: 1.4em;
     font-weight: 300;
 }
 
 .blog-area .single-blog-3 .single-blog-content h3 a {
     color: #292929;
 }
 
 .blog-area .single-blog-3 .single-blog-content h3 a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .blog-area .single-blog-3 .single-blog-content p {
     margin-bottom: 0;
 }
 
 .blog-area .styled-pagination {
     position: relative;
     margin-bottom: 30px;
 }
 
 .blog-area .styled-pagination li {
     position: relative;
     display: inline-block;
     margin: 0px 3px 0px 0px;
 }
 
 .blog-area .styled-pagination li.previous a, .blog-area .styled-pagination li.next a {
     color: #292929;
 }
 
 .blog-area .styled-pagination li a {
     position: relative;
     display: inline-block;
     line-height: 40px;
     height: 40px;
     font-size: 16px;
     min-width: 40px;
     border-radius: 50%;
     color: #292929;
     text-align: center;
     text-transform: capitalize;
     transition: all 500ms ease;
     -webkit-transition: all 500ms ease;
     -ms-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     -moz-transition: all 500ms ease;
     background-color: #f1f1f1;
 }
 
 .blog-area .styled-pagination li a:hover, .blog-area .styled-pagination li a.active {
     color: #292929;
     background-color: #FDD50B;
 }
 
 .blog-area .blog-details img {
     width: 100%;
     margin-bottom: 30px;
 }
 
 .blog-area .blog-details .blog-meta {
     margin-bottom: 20px;
 }
 
 .blog-area .blog-details .blog-meta span a {
     margin-right: 10px;
     font-size: 14px;
     display: inline-block;
     color: #ffffff;
 }
 
 .blog-area .blog-details .blog-meta span a:hover {
     color: #FDD50B;
 }
 
 .blog-area .blog-details .blog-meta span a i {
     color: #FDD50B;
     font-size: 16px;
     font-weight: bold;
     margin-right: 5px;
 }
 
 .blog-area .blog-details h2 {
     margin-bottom: 20px;
     font-weight: 700;
     font-size: 30px;
 }
 
 .blog-area .blog-details .blockquote {
     font-size: 16px;
     border-left: 2px solid #FDD50B;
     font-style: italic;
     padding-left: 15px;
     margin: 20px 0;
 }
 
 .blog-area .blog-all-comments h3 {
     margin-bottom: 20px;
     font-weight: 600;
 }
 
 .blog-area .blog-all-comments .blog-comments {
     margin-bottom: 40px;
     padding: 30px 40px;
     overflow: hidden;
     background: #252F5A;
 }
 
 .blog-area .blog-all-comments .blog-comments div {
     overflow: hidden;
 }
 
 .blog-area .blog-all-comments .blog-comments .author-thumb {
     width: 20%;
     float: left;
 }
 
 .blog-area .blog-all-comments .blog-comments .author-thumb img {
     border-radius: 50%;
     width: 70px;
 }
 
 .blog-area .blog-all-comments .blog-comments .author-comments .author-details h4 {
     float: left;
     font-size: 18px;
 }
 
 .blog-area .blog-all-comments .blog-comments .author-comments .author-details .comment-reply-btn {
     float: right;
 }
 
 .blog-area .blog-all-comments .blog-comments .author-comments .author-designation {
     font-weight: 700;
     font-size: 14px;
     margin-bottom: 5px;
 }
 
 .blog-area .blog-comment-form {
     margin-bottom: 30px;
 }
 
 .blog-area .blog-comment-form h3 {
     margin-bottom: 15px;
     text-transform: uppercase;
 }
 
 .blog-area .blog-comment-form input, .blog-area .blog-comment-form textarea {
     width: 100%;
     border: 2px solid #E5E5E5;
     text-indent: 20px;
     margin-bottom: 30px;
     transition: .3s;
     background: transparent;
 }
 
 .blog-area .blog-comment-form input:focus, .blog-area .blog-comment-form textarea:focus {
     border-color: #FDD50B;
 }
 
 .blog-area .blog-comment-form input {
     height: 50px;
 }
 
 .blog-area .blog-comment-form textarea {
     padding-top: 15px;
 }
 
 .blog-area .blog-comments + .blog-comments {
     margin-left: 15%;
 }
 
 @media (max-width: 767px) {
     .blog-area .blog-comment-form {
         margin-bottom: 40px;
     }
 }
 
 .blog-area .post-share-and-tag {
     margin: 40px 0 60px 0;
 }
 
 .blog-area .post-share-and-tag .social {
     float: right;
 }
 
 @media (max-width: 767px) {
     .blog-area .post-share-and-tag .social {
         float: none;
         text-align: left;
         margin-top: 20px;
     }
 }
 
 .blog-area .post-share-and-tag .social span {
     font-size: 20px;
     font-weight: 700;
 }
 
 .blog-area .post-share-and-tag .social a {
     font-size: 18px;
     text-align: center;
     display: inline-block;
     margin: 0 5px;
 }
 
 .blog-area .post-share-and-tag .tags a {
     color: #ffffff;
     text-transform: capitalize;
 }
 
 .blog-area .post-share-and-tag .tags a:hover {
     color: #FDD50B;
 }
 
 /*
 
 ===============================
 FAQ Area
 ===============================
 
 */
 .faq-contents {
     display: block;
     height: auto;
 }
 
 .faq-contents .accordion {
     list-style: none;
     padding: 0;
 }
 
 .faq-contents .accordion li {
     position: relative;
     margin-bottom: 20px;
     border: 1px solid #D9D9D9;
     border-radius: 4px;
 }
 
 .faq-contents .accordion li:last-child {
     margin-bottom: 0px;
 }
 
 .faq-contents .accordion li p {
     display: none;
     padding: 10px 30px 20px 20px;
     color: #333;
     font-size: 16px;
     background: #fff;
     margin-bottom: 0;
     line-height: 2;
     border-radius: 4px;
 }
 
 .faq-contents .accordion li a {
     width: 100%;
     display: block;
     cursor: pointer;
     font-size: 20px;
     padding-left: 20px;
     padding-right: 50px;
     padding-top: 15px;
     padding-bottom: 15px;
     color: #333333;
     user-select: none;
     font-weight: 600;
 }
 
 .faq-contents .accordion li a i {
     font-size: 18px;
     color: #fff;
     margin-right: 20px;
 }
 
 .faq-contents .accordion li a.active {
     color: #333333;
     border: 0;
 }
 
 .faq-contents .accordion li a.active::after {
     transform: rotate(225deg);
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     border-right: 2px solid #333333;
     border-bottom: 2px solid #333333;
 }
 
 .faq-contents .accordion li a::after {
     width: 10px;
     height: 10px;
     border-right: 2px solid #333333;
     border-bottom: 2px solid #333333;
     position: absolute;
     right: 25px;
     content: " ";
     top: 22px;
     transform: rotate(45deg);
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
 }
 
 /*
 
 ===============================
 account-form
 ===============================
 
 */
 .account-form {
     padding: 50px 0;
 }
 
 @media (max-width: 767px) {
     .account-form {
         padding: 100px 0;
     }
 }
 
 .account-form .logo {
     margin-bottom: 50px;
     text-align: center;
 }
 
 .account-form .title {
     margin-bottom: 30px;
     text-align: center;
 }
 
 .account-form .title h3 {
     font-weight: 300;
 }
 
 .account-form .via-login {
     text-align: center;
     margin-bottom: 30px;
 }
 
 .account-form .via-login a {
     margin-bottom: 10px;
     width: 100%;
     display: block;
     padding: 10px 0;
     color: #ffffff;
     border-radius: 4px;
     font-family: "Comfortaa", sans-serif;
     font-size: 16px;
 }
 
 .account-form .via-login a i {
     margin-right: 7px;
 }
 
 .account-form form input {
     width: 100%;
     height: 45px;
     text-indent: 10px;
     border: 1px solid #ddd;
     margin-bottom: 15px;
     border-radius: 4px;
 }
 
 .account-form form input:focus {
     border-color: #FDD50B;
 }
 
 .account-form form textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     margin-bottom: 15px;
     border-radius: 4px;
 }
 
 .account-form form textarea:focus {
     border-color: #FDD50B;
 }
 
 .account-form form button {
     margin-bottom: 15px;
 }
 
 .account-form form p {
     color: #ffffff;
     font-size: 13px;
     text-align: center;
     font-family: "Comfortaa", sans-serif;
 }
 
 .account-form form p a {
     color: #ffffff;
 }
 
 .account-form form p a:hover {
     color: #FDD50B;
     text-decoration: underline;
 }
 
 .account-before {
     position: relative;
 }
 
 .account-before::before {
     position: absolute;
     height: 826px;
     width: 900px;
     left: 0;
     top: 0;
     content: "";
     background: url("../images/account.png") no-repeat;
 }
 
 @media (max-width: 991px) {
     .account-before::before {
         display: none;
     }
 }
 
 /*
 
 ===============================
 Loan area
 ===============================
 
 */
 .loan-area label {
     display: block;
     font-size: 18px;
     color: #292929;
     margin-bottom: 10px;
 }
 
 .loan-area input {
     width: 100%;
     border: 2px solid #efefef;
     height: 55px;
     text-indent: 20px;
     margin-bottom: 15px;
 }
 
 .loan-area small {
     font-size: 14px;
 }
 
 .loan-area .loan-confirm-form {
     padding: 30px 40px;
     border: 4px solid #efefef;
 }
 
 .loan-area .loan-confirm-form p {
     font-size: 30px;
     margin-bottom: 45px;
     font-weight: 300;
     color: #252F5A;
 }
 
 .loan-area .loan-confirm-form p strong {
     display: block;
     font-size: 18px;
     color: #434a53;
     margin-bottom: 20px;
 }
 
 /*
 
 ===============================
 feature area
 ===============================
 
 */
 .feature-area .single-feature {
     margin-bottom: 30px;
     border: 2px solid #efefef;
     padding: 45px 30px;
     text-align: center;
 }
 
 .feature-area .single-feature img {
     width: 65px;
     height: 65px;
     margin-bottom: 30px;
     transition: 0.4s;
 }
 
 .feature-area .single-feature h4 {
     font-weight: 300;
     color: #292929;
     margin-bottom: 15px;
     text-transform: capitalize;
 }
 
 .feature-area .single-feature p {
     color: #434a53;
     margin-bottom: 15px;
 }
 
 .feature-area .single-feature a {
     font-weight: 600;
 }
 
 .feature-area .single-feature:hover img {
     transform: scale(1.2);
 }
 
 .feature-area .single-feature-2 {
     margin-bottom: 30px;
     padding: 0 15px;
     text-align: center;
     padding-top: 10px;
     color: #ffffff;
 }
 
 .feature-area .single-feature-2 i {
     font-size: 34px;
     height: 90px;
     width: 90px;
     line-height: 90px;
     border-radius: 50%;
     text-align: center;
     color: #ffffff;
     display: block;
     margin: auto;
     margin-bottom: 30px;
     box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
     border: 2px solid #ffffff;
     transition: 0.4s;
 }
 
 .feature-area .single-feature-2 h4 {
     font-weight: 600;
     margin-bottom: 15px;
     text-transform: capitalize;
     transition: 0.4s;
 }
 
 .feature-area .single-feature-2 p {
     margin-bottom: -5px;
 }
 
 .feature-area .single-feature-2:hover i {
     background: #ffffff;
     color: #FDD50B;
 }
 
 /*
 
 ===============================
 Breadcrumb area
 ===============================
 
 */
 .breadcrumb-area {
     padding: 100px 0;
     position: relative;
     overflow: hidden;
 }
 
 .breadcrumb-area .banner-title h2 {
     font-size: 42px;
     font-weight: 700;
     color: #ffffff;
     font-family: "Open Sans", sans-serif;
     margin-bottom: 10px;
     text-transform: uppercase;
 }
 
 @media (max-width: 767px) {
     .breadcrumb-area .banner-title h2 {
         font-size: 42px;
     }
 }
 
 .breadcrumb-area ul li {
     display: inline-block;
     font-weight: 400;
     color: #ffffff;
 }
 
 .breadcrumb-area ul li a {
     margin-right: 20px;
     position: relative;
     color: #ffffff;
 }
 
 .breadcrumb-area ul li a:after {
     position: absolute;
     content: "\f105";
     font-family: Fontawesome;
     right: -15px;
     top: -3px;
 }
 
 .breadcrumb-area ul li a:hover {
     color: #FDD50B;
 }
 
 @media (max-width: 767px) {
     .custom-banner {
         text-align: center;
     }
 
     .page-breadcrumb ul {
         float: none;
     }
 
     .banner-title {
         margin-bottom: 20px;
     }
 }
 
 /*
 
 ===============================
 Privacy polices area
 ===============================
 
 */
 .polices-content {
     margin-top: -6px;
 }
 
 .polices-content h2 {
     margin-bottom: 20px;
     font-size: 30px;
 }
 
 .polices-content h3 {
     margin-bottom: 20px;
     font-size: 24px;
 }
 
 .polices-content p {
     margin-bottom: 30px;
 }
 
 .polices-content ul li {
     position: relative;
     margin-bottom: 20px;
     padding-left: 25px;
 }
 
 .polices-content ul li::before {
     position: absolute;
     left: 0;
     top: 0;
     content: "\f111";
     font-family: Fontawesome;
     color: #FDD50B;
     font-size: 8px;
 }
 
 .polices-content ul li:last-child {
     margin-bottom: 0px;
 }
 
 .polices-content.cl-white ul li:before {
     color: #ffffff;
 }
 
 /*
 
 ===============================
 Contact area
 ===============================
 
 */
 .contact-form {
     margin-bottom: 30px;
 }
 
 .contact-form form h4 {
     font-weight: 600;
     font-size: 24px;
     margin-bottom: 5px;
 }
 
 .contact-form form p {
     font-family: "Comfortaa", sans-serif;
     font-size: 16px;
     margin-bottom: 15px;
 }
 
 .contact-form form input, .contact-form form textarea {
     width: 100%;
     border: 2px solid #ddd;
     text-indent: 15px;
     margin-bottom: 15px;
     font-family: "Comfortaa", sans-serif;
     font-size: 16px;
 }
 
 .contact-form form input:focus, .contact-form form textarea:focus {
     border: 2px solid #252F5A;
 }
 
 .contact-form form input {
     height: 50px;
 }
 
 .contact-form form textarea {
     padding-top: 10px;
 }
 
 .contact-content {
     height: 100%;
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     background: #F9F9F9;
     padding: 40px;
 }
 
 .contact-content h4 {
     font-weight: 400;
     margin-bottom: 15px;
 }
 
 .contact-content h5 {
     font-weight: 400;
     font-size: 20px;
     margin-bottom: 10px;
     margin-top: 20px;
 }
 
 .contact-content p {
     font-family: "Comfortaa", sans-serif;
     font-size: 14px;
     margin-bottom: 5px;
     color: #434a53;
 }
 
 .contact-content .social {
     margin-top: 20px;
 }
 
 .contact-content .social a {
     height: 30px;
     width: 30px;
     font-size: 12px;
     color: #ffffff;
     line-height: 32px;
     display: inline-block;
     margin-right: 4px;
     text-align: center;
     border-radius: 50%;
 }
 
 /*
 
 ===============================
 newslatter area
 ===============================
 
 */
 .newslatter form {
     position: relative;
 }
 
 .newslatter form input {
     width: 87%;
     margin-right: 2%;
     height: 60px;
     float: left;
     box-shadow: 0px 0px 9px 1px rgba(253, 77, 64, 0.1);
     border-radius: 100px;
     font-size: 16px;
     text-indent: 30px;
 }
 
 @media (max-width: 575px) {
     .newslatter form input {
         width: 84%;
     }
 }
 
 @media (max-width: 480px) {
     .newslatter form input {
         width: 77%;
     }
 }
 
 .newslatter form button {
     float: left;
     width: 60px;
     border-radius: 50%;
     height: 60px;
     color: #FDD50B;
     background: #ffffff;
     font-size: 22px;
 }
 
 .newslatter form button:hover {
     background: #FDD50B;
     color: #ffffff;
 }
 
 /*
 
 ===============================
 MIssion Vission area
 ===============================
 
 */
 .single-mission-vission {
     padding: 60px;
     color: #ffffff;
     background: url("../images/banner/hero-2.jpg") no-repeat;
     background-size: cover;
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.09);
     position: relative;
     margin-bottom: 30px;
 }
 
 @media (max-width: 450px) {
     .single-mission-vission {
         padding: 45px;
     }
 }
 
 @media (max-width: 350px) {
     .single-mission-vission {
         padding: 30px;
     }
 }
 
 .single-mission-vission::before {
     position: absolute;
     content: "";
     height: 100%;
     width: 100%;
     background: #FDD50B;
     left: 0;
     top: 0;
     opacity: 0.9;
     transition: 0.4s;
 }
 
 .single-mission-vission h4 {
     margin-bottom: 15px;
     transition: 0.4s;
     position: relative;
     display: inline-block;
 }
 
 .single-mission-vission p {
     margin-bottom: 20px;
     line-height: 1.7em;
     transition: 0.4s;
     font-size: 20px;
     font-weight: 400;
 }
 
 .single-mission-vission:hover {
     background: #ffffff;
 }
 
 .single-mission-vission:hover h4 {
     color: #FDD50B;
 }
 
 .single-mission-vission:hover h4::after {
     background: #FDD50B;
 }
 
 .single-mission-vission:hover p {
     color: #434a53;
 }
 
 .single-mission-vission:hover a {
     background: #FDD50B;
     color: #ffffff;
 }
 
 .single-mission-vission:hover:before {
     background: #ffffff;
     opacity: 1;
 }
 
 /*
   right-sticky-wapper
 */
 .right-sticky-wapper {
     position: fixed;
     transition: all ease .35s;
     top: 30%;
     right: -320px;
     width: 320px;
     height: auto;
     left: auto;
     height: auto;
     min-height: 120px;
     background: #fff;
     z-index: 999;
 }
 
 @media (max-width: 450px) {
     .right-sticky-wapper {
         right: -260px;
         width: 260px;
     }
 }
 
 .right-sticky-wapper .right-sticky-trigger {
     position: absolute;
     right: 100%;
     top: 0;
     height: 50px;
     min-width: 50px;
     background: #ffffff;
     line-height: 50px;
     padding: 0 4px;
     text-align: center;
     color: #252F5A;
     box-shadow: 0px 0px 15px 0px rgba(72, 67, 211, 0.12);
 }
 
 .right-sticky-wapper .right-sticky-content {
     background: #ffffff;
     padding: 20px;
     text-align: left;
     max-height: 350px;
     overflow-y: scroll;
     box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.05);
 }
 
 .right-sticky-wapper .right-sticky-content form input, .right-sticky-wapper .right-sticky-content form textarea {
     width: 100%;
     border: 2px solid #ddd;
     padding: 0 15px;
     transition: 0.3s;
     margin-bottom: 15px;
 }
 
 .right-sticky-wapper .right-sticky-content form input:focus, .right-sticky-wapper .right-sticky-content form textarea:focus {
     border: 2px solid #252F5A;
 }
 
 .right-sticky-wapper .right-sticky-content form input {
     height: 45px;
 }
 
 .right-sticky-wapper .right-sticky-content form textarea {
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
 .right-sticky-wapper.active {
     right: 0 !important;
 }
 
 /* Loan details */
 .empty-image {
     padding: 200px 0;
     position: relative;
 }
 
 .empty-image .video-gal {
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     text-align: center;
 }
 
 .empty-image .video-gal a {
     height: 90px;
     width: 90px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     color: #ffffff;
     background: #FDD50B;
     font-size: 32px;
     border-radius: 50%;
 }
 
 .empty-image .video-gal a:hover {
     background: #ffffff;
     color: #FDD50B;
 }
 
 .single-loan-feature {
     margin-bottom: 30px;
     text-align: center;
 }
 
 .single-loan-feature i {
     font-size: 36px;
     height: 95px;
     width: 95px;
     line-height: 95px;
     text-align: center;
     color: #FDD50B;
     border-radius: 50%;
     background-color: rgba(253, 213, 11, 0.1);
     display: inline-block;
     margin-bottom: 20px;
     transition: 0.4s;
 }
 
 .single-loan-feature h4 {
     font-weight: 500;
     font-size: 20px;
 }
 
 .single-loan-feature:hover i {
     background: #FDD50B;
     color: #ffffff;
 }
 
 .loan-criteria {
     margin-bottom: 30px;
 }
 
 .loan-criteria ul {
     margin-bottom: -5px;
 }
 
 .loan-criteria ul li {
     position: relative;
     padding-left: 25px;
     font-size: 16px;
     margin-bottom: 15px;
 }
 
 .loan-criteria ul li:last-child {
     margin-bottom: 0;
 }
 
 .loan-criteria ul li::before {
     position: absolute;
     content: "\f18c";
     font-family: Fontawesome;
     left: 0;
     top: 0;
     font-size: 18px;
     color: #FDD50B;
 }
 
 .single-faq {
     margin-bottom: 40px;
 }
 
 .single-faq h4 {
     font-weight: 700;
     font-size: 20px;
     margin-bottom: 10px;
 }
 
 .single-faq p {
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.5);
 }
 
 /*
 
 ===============================
 Error Area
 ===============================
 
 */
 .error-cont {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .error-cont h3 {
     font-size: 36px;
     margin-bottom: 15px;
     font-weight: 400;
 }
 
 .error-cont p {
     font-family: "Comfortaa", sans-serif;
 }
 
 .error-cont form {
     position: relative;
 }
 
 .error-cont form input {
     width: 100%;
     border: 2px solid #ddd;
     text-indent: 20px;
     height: 50px;
     transition: 0.3s;
     font-family: "Comfortaa", sans-serif;
 }
 
 .error-cont form input:focus {
     border: 2px solid #FDD50B;
 }
 
 .error-cont form button {
     position: absolute;
     top: 0;
     right: 0;
     height: 50px;
     width: 50px;
     background: transparent;
     color: #FDD50B;
 }
 
 /*
 
 ===============================
 Job Post Area
 ===============================
 
 */
 .single-job {
     overflow: hidden;
     border: 3px solid #e4e4e4;
     border-radius: 4px;
     margin-bottom: 20px;
     padding: 30px;
     transition: 0.3s;
 }
 
 .single-job:last-child {
     margin-bottom: 0px;
 }
 
 .single-job:hover {
     border-color: #252F5A;
 }
 
 .single-job .job-des {
     width: 75%;
     float: left;
 }
 
 @media (max-width: 767px) {
     .single-job .job-des {
         width: 100%;
         margin-bottom: 20px;
     }
 }
 
 .single-job .job-des h3 {
     font-size: 22px;
     margin-bottom: 5px;
 }
 
 .single-job .job-des h3 a {
     color: #434a53;
 }
 
 .single-job .job-des h3 a:hover {
     color: #252F5A;
 }
 
 .single-job .job-des p {
     margin-bottom: 0px;
     font-size: 14px;
 }
 
 .single-job .job-apply-btn {
     width: 25%;
     float: left;
 }
 
 @media (max-width: 767px) {
     .single-job .job-apply-btn {
         width: 100%;
         float: none;
     }
 }
 
 .single-job .job-apply-btn a {
     float: right;
 }
 
 @media (max-width: 767px) {
     .single-job .job-apply-btn a {
         float: none;
     }
 }
 
 /*
 
 ===============================
 Online Apply Form
 ===============================
 
 */
 .apply-form .single-block-form {
     margin-bottom: 40px;
 }
 
 .single-block-form:last-child {
     margin-bottom: 0px;
 }
 
 .apply-form h3 {
     font-size: 16px;
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: 2px;
     color: #292929;
     margin-bottom: 25px;
 }
 
 .apply-form h3 span {
     height: 35px;
     width: 35px;
     line-height: 35px;
     color: #ffffff;
     border-radius: 50%;
     background: #252F5A;
     margin-right: 8px;
     display: inline-block;
     text-align: center;
     font-size: 18px;
 }
 
 .apply-form input, .apply-form select {
     width: 100%;
     margin-bottom: 20px;
     height: 55px;
     text-indent: 15px;
     border: 2px solid #e4e4e4;
     border-radius: 4px;
     color: #434a53;
     background: #ffffff;
     font-size: 14px;
 }
 
 .select-bar {
     width: 100%;
     margin-bottom: 20px;
     border: 2px solid #e4e4e4;
     height: 55px;
     line-height: 52px;
 }
 
 .select-bar:focus {
     border: 2px solid #252F5A;
 }
 
 .select-bar .list {
     width: 100%;
     border: 2px solid #252F5A;
 }
 
 .select-bar:after {
     height: 7px;
     width: 7px;
     right: 15px;
 }
 
 .apply-form textarea {
     width: 100%;
     margin-bottom: 20px;
     text-indent: 15px;
     padding-top: 10px;
     border: 2px solid #e4e4e4;
     border-radius: 4px;
     color: #434a53;
     background: #ffffff;
     font-size: 14px;
 }
 
 .apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
     border: 2px solid #252F5A;
 }
 
 .apply-form input[type="checkbox"] {
     width: initial;
     height: initial;
 }
 
 .apply-form label {
     display: inline-block;
     font-size: 14px;
     color: #434a53;
 }
 
 .apply-form a {
     display: block;
     color: #252F5A;
     margin-bottom: 10px;
     font-size: 14px;
     font-weight: 500;
 }
 
 .apply-form a:hover {
     text-decoration: underline;
 }
 
 /*
 
 ===============================
 Sidebar
 ===============================
 
 */
 .site-sidebar .single-sidebar {
     margin-bottom: 40px;
     padding: 30px;
     box-shadow: 0px 0px 8px 0px rgba(96, 187, 191, 0.15);
 }
 
 .site-sidebar .single-sidebar div {
     overflow: hidden;
 }
 
 .site-sidebar .single-sidebar:last-child {
     margin-bottom: 0;
 }
 
 .site-sidebar .single-sidebar h3 {
     font-size: 24px;
     font-weight: 600;
     position: relative;
     margin-bottom: 20px;
     text-transform: capitalize;
 }
 
 .site-sidebar .single-sidebar form {
     width: 100%;
     position: relative;
     height: 50px;
     border-radius: 4px;
 }
 
 .site-sidebar .single-sidebar form input {
     width: 100%;
     height: 100%;
     transition: 0.4s;
     text-indent: 15px;
     border: 2px solid #e4e4e4;
 }
 
 .site-sidebar .single-sidebar form input:hover, .site-sidebar .single-sidebar form input:focus {
     border-color: #FDD50B;
 }
 
 .site-sidebar .single-sidebar form button {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     color: #FDD50B;
     height: 100%;
     width: 50px;
 }
 
 .site-sidebar .single-sidebar ul li {
     margin-bottom: 20px;
     position: relative;
     transition: 0.4s;
 }
 
 .site-sidebar .single-sidebar ul li:last-child {
     margin-bottom: 0;
 }
 
 .site-sidebar .single-sidebar ul li:before {
     position: absolute;
     content: "\f101";
     font-family: 'Fontawesome';
     color: #FDD50B;
     left: -10px;
     opacity: 0;
     transition: 0.4s;
 }
 
 .site-sidebar .single-sidebar ul li:hover {
     padding-left: 15px;
 }
 
 .site-sidebar .single-sidebar ul li:hover:before {
     left: 0px;
     opacity: 1;
 }
 
 .site-sidebar .single-sidebar ul li a {
     color: #434a53;
     display: block;
     text-transform: capitalize;
 }
 
 .site-sidebar .single-sidebar ul li a:hover {
     color: #FDD50B;
 }
 
 .site-sidebar .single-sidebar .social-follow a {
     padding: 25px 30px;
     border-radius: 4px;
     color: #ffffff;
     text-align: center;
     display: inline-block;
     font-family: "Comfortaa", sans-serif;
     margin: 0 1px;
 }
 
 .site-sidebar .single-sidebar .social-follow a:hover {
     background: #FDD50B;
 }
 
 .site-sidebar .single-sidebar .social-follow a i {
     display: block;
     font-size: 18px;
 }
 
 @media (max-width: 991px) {
     .site-sidebar .single-sidebar .social-follow a {
         margin-bottom: 5px;
     }
 }
 
 @media (max-width: 767px) {
     .site-sidebar .single-sidebar .social-follow a {
         width: 100%;
     }
 }
 
 .site-sidebar .single-sidebar .archives a {
     display: block;
     margin-bottom: 15px;
     font-family: "Comfortaa", sans-serif;
     color: #292929;
 }
 
 .site-sidebar .single-sidebar .archives a:hover {
     color: #FDD50B;
 }
 
 .site-sidebar .single-sidebar .archives a:last-child {
     margin-bottom: 0;
 }
 
 .site-sidebar .single-sidebar .archives a span {
     float: right;
 }
 
 .site-sidebar .single-sidebar a img {
     width: 100%;
 }
 
 .active-bet {
     background-color: #dc3545 !important; /* red */
     color: #fff !important;
     border-color: #dc3545 !important;
 }
 .market-group {
     border-top: 2px solid #ccc;   /* stronger divider */
     margin-top: 8px;              /* spacing above */
     padding-top: 8px;             /* spacing inside */
 }
 
 .market-label {
     display: block;
     font-weight: bold;
     font-size: 12px;
     color: #444;
     margin-bottom: 5px;
     text-transform: uppercase;
     border-bottom: 1px dashed #999; /* optional underline for clarity */
     padding-bottom: 3px;
 }
 
 .market-group:first-of-type {
     border-left: none;            /* no divider before first group */
 }
 
 .bet-btn {
     padding: 2px 6px;
     font-size: 11px;
     line-height: 1.2;
     border-radius: 3px;
     min-width: 32px;
     text-align: center;
     margin: 2px;                  /* spacing between buttons */
 }
 
 .market-group .bet-btn {
     display: inline-block;
 }
 .remove-bet {
     position: relative;
     width: 18px;
     height: 18px;
     background: none;
     border: none;
     cursor: pointer;
 }
 
 .remove-bet::before,
 .remove-bet::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     width: 14px;
     height: 2px;
     background: red;
     transform-origin: center;
 }
 
 .remove-bet::before {
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
 .remove-bet::after {
     transform: translate(-50%, -50%) rotate(-45deg);
 }
 .boosted-odd {
     border: 2px solid gold !important;
     box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
     font-weight: bold;
     position: relative;
 }
 
 .boosted-odd .badge {
     position: absolute;
     top: -8px;
     right: -8px;
     font-size: 10px;
 }
 
 .form-check-input[type="radio"] {
     width: 18px;
     height: 18px;
     margin-top: 0.3rem; /* tweak as needed */
 }
 .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  /* Default: keep normal table layout */
.odds_table {
    width: 100%;
    border-collapse: collapse;
}

/* Mobile stacked layout */
@media (max-width: 768px) {
    .odds_table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        border-bottom: 1px solid #333;
    }

    /* Label on the left */
    .odds_table td:before {
        content: attr(data-label);
        font-weight: bold;
        color: #aaa;
        margin-right: 10px;
        flex: 1;
    }

    /* Button small, not full width */
    .odds_table td .btn {
        flex: 0 0 auto;
        min-width: 25px;
        padding: 6px 8px;
        font-size: 13px;
        line-height: 1.2;
        border-radius: 6px;
        text-align: center;
    }

    /* Make sure odd value text is visible */
    .odds_table td .odd-value {
        font-weight: bold;
        color: #fff; /* Adjust if background is light */
    }
}

.bet-cell {
    display: flex;
    flex-direction: column; /* stack label above button */
    align-items: center;
    gap: 4px;
}

.bet-label {
    font-size: 12px;
    font-weight: bold;
    color: #ccc;
    text-transform: uppercase;
}

.odd-btn {
    font-size: 13px;
    padding: 5px 10px;
    min-width: 50px;
    border-radius: 6px;
}

.odd-value {
    font-size: 14px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .odds_table {
        border: none;
        width: 100%;
        table-layout: fixed;
    }

    .odds_table thead {
        display: none; /* hide headers */
    }

    .odds_table tr {
        display: block;
        background: #1a1a1a; /* dark theme */
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .odds_table td {
        display: block;
        width: 100% !important;
        padding: 6px 0;
        border: none;
    }

    /* Match info full width */
    .odds_table td:first-child {
        font-weight: bold;
        margin-bottom: 10px;
        white-space: normal;  /* allow wrapping */
        word-wrap: break-word;
    }

    /* Odds in a 3-column grid (col-md-3 style) */
    .odds_table .market-group {
        display: inline-block;
        width: 33.33% !important; /* like col-md-3 */
        box-sizing: border-box;
        padding: 5px;
        text-align: center;
    }

    .odds_table .market-group .btn {
        width: 100%;
        font-size: 14px;
        padding: 8px 4px;
    }

    /* Extra markets hidden on mobile */
    .odds_table .extra-market {
        display: none !important;
    }

    /* More button full width at bottom */
    .odds_table td:last-child {
        text-align: center;
        margin-top: 10px;
    }
}
    /* Slider Styles */
    .slider {
        width: 100%;
        max-width: 800px;
        height: 300px;
        margin: 0 auto 20px;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    .slide-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .slide-img.active {
        opacity: 1;
        z-index: 1;
    }
.greenbg {
    background-color: #d4edda !important; /* light green background */
    color: #155724 !important; /* dark green text */
}

.redbg {
    background-color: #f8d7da !important; /* light red background */
    color: #721c24 !important; /* dark red text */
}
/* Dropdown with modern translucent glass-blur style */
.navbar .dropdown-menu {
  background: linear-gradient(90deg, rgba(10, 26, 58, 0.8) 0%, rgba(18, 24, 54, 0.8) 100%) !important;
  backdrop-filter: blur(10px); /* applies the glass blur */
  -webkit-backdrop-filter: blur(10px); /* for Safari support */
  border: 1px solid rgba(255, 255, 255, 0.1); /* subtle frosted border */
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  padding: 6px 0;
  transition: all 0.3s ease;
}

/* Dropdown links */
.navbar .dropdown-menu a {
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 20px;
  display: block;
  transition: all 0.3s ease;
}

/* Hover effect */
.navbar .dropdown-menu a:hover {
  background-color: rgba(255, 193, 7, 0.85) !important; /* gold with transparency */
  color: #0a1a3a !important; /* dark text for contrast */
  font-weight: 600;
  backdrop-filter: blur(12px); /* extra depth when hovered */
}

/* Optional subtle dividers */
.navbar .dropdown-menu a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Remove dropdown arrow */
.navbar .dropdown-toggle::after {
  display: none;
}
#jackpot-slider .slide-img {
    transition: opacity 1.2s ease-in-out;
}

#jackpot-slider .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #fff;
    font-size: 24px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 5;
    transition: background 0.3s ease;
}

#jackpot-slider .nav-btn:hover {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
}

/* ✅ Dots are now always visible */
#jackpot-slider #slide-indicators {
    pointer-events: auto;
}

#jackpot-slider .dot.active {
    background: #ffd700 !important;
    transform: scale(1.2);
}

#jackpot-slider .dot:hover {
    background: #fff;
}

@media (max-width: 768px) {
    #jackpot-slider .nav-btn {
        display: none; /* hide arrows on mobile */
    }
    #jackpot-slider .content {
        margin-left: 20px !important;
        padding: 15px 20px !important;
        max-width: 85%;
    }
}
#jackpot-slider .slide-img {
    transition: opacity 1.2s ease-in-out;
}

#jackpot-slider .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 22px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
    transition: background 0.3s ease;
}

#jackpot-slider .nav-btn:hover {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
}

/* DASH indicators */
#jackpot-slider .dash {
    width: 20px;
    height: 4px;
    background: #bbb;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#jackpot-slider .dash.active {
    background: #ffd700;
    transform: scaleX(1.3);
    box-shadow: 0 0 5px #ffd700;
}

/* Popup Modal */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box {
    background: #001f3f;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.popup-box ul li:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    #jackpot-slider .nav-btn {
        display: none;
    }
    #jackpot-slider .jackpot-amount {
        font-size: 26px !important;
    }
    #jackpot-slider .jackpot-meta {
        font-size: 11px !important;
    }
}
/* ------------------------------
   INFO SLIDER (PROMO BANNER)
   ------------------------------ */

.info-slider-section {
    width: 100%;
    overflow: hidden;
}

.info-slider-container {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
}

.info-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    color: #fff;
    border-radius: 8px;
}

.info-slide.active {
    opacity: 1;
    z-index: 2;
}

.info-content {
    background: rgba(0,0,0,0.4);
    padding: 20px 30px;
    border-radius: 10px;
    max-width: 50%;
}

.info-content.right {
    margin-left: auto;
    text-align: right;
}

.info-content h2 {
    font-weight: 800;
    margin: 10px 0;
    font-size: 30px;
}

.info-content h4 {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 0.9;
}

.info-content .highlight {
    color: #FFD700;
    font-weight: bold;
}

.info-img {
    max-height: 140px;
    margin-left: 20px;
}

.info-prev, .info-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    border: none;
    color: #fff;
    font-size: 22px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
    z-index: 5;
}

.info-prev:hover, .info-next:hover {
    background: rgba(255,255,255,0.3);
}

.info-prev { left: 10px; }
.info-next { right: 10px; }

.info-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.info-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.info-dot.active {
    background: #FFD700; /* Gold active dot */
    transform: scale(1.2);
}

/* --- RESPONSIVE TWEAKS --- */
@media (max-width: 768px) {
    .info-slider-container {
        height: 160px;
    }
    .info-content {
        max-width: 80%;
        padding: 12px 18px;
    }
    .info-content h2 {
        font-size: 22px;
    }
    .info-content h4 {
        font-size: 14px;
    }
    .info-img {
        max-height: 100px;
    }
}