/* Font Family*/ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Righteous&display=swap"); /* ========================= Css Variables Start ======================== */ :root { /* Font Family */ --heading-font: "Righteous", sans-serif; --body-font: "Inter", sans-serif; /* ========================= Color Variables Start =========================== */ --white: 0 0% 100%; --light-h: 0; --light-s: 0%; --light-l: 71%; --light: var(--light-h) var(--light-s) var(--light-l); --black-h: 0; --black-s: 0%; --black-l: 0%; --black: var(--black-h) var(--black-s) var(--black-l); --heading-color: var(--white); --body-color: var(--light); --border-color: 0 0% 88%; --section-bg: 213 59% 17%; --body-bg: 226 60% 14%; --section-bg-two: 226 71% 16%; --section-bg-three: 226 31% 10%; --form-bg: 208 88% 13%; /* ================================ Box Shadow Start =============================== */ --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) /.3); --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) /.92); --box-shadow: 0px 2px 15px hsl(var(--black) /.05); /* ================================ Box Shadow End =============================== */ /* ========================= Base Color ============================= */ --base-h: 344; --base-s: 100%; --base-l: 50%; --base: var(--base-h) var(--base-s) var(--base-l); /* Base Darken */ --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1); --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2); --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3); --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4); --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5); --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6); --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7); --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7); --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8); --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9); /* Base Lighten */ --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1); --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2); --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3); --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4); --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5); --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6); --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7); --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8); --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9); --base-gradient: linear-gradient(180deg, hsl(var(--base-two)) 0%, hsl(var(--base)) 100%); --base-gradient-reverse: linear-gradient(180deg, hsl(var(--base)) 0%, hsl(var(--base-two)) 100%); --base-gradient-two: linear-gradient(268deg, hsl(var(--base)) -4.1%, hsl(var(--base-two)) 65.02%); --base-gradient-two-reverse: linear-gradient(80deg, hsl(var(--base)) -4.1%, hsl(var(--base-two)) 65.02%); /* ========================= Base Two Color ============================= */ --base-two-h: 27; --base-two-s: 99%; --base-two-l: 52%; --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l); /* Base Two Darken */ --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.05); --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1); --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2); --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3); --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4); --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5); --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6); --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7); --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8); /* Base Two Lighten */ --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.05); --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1); --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2); --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3); --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4); --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5); --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6); --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7); --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8); /* ============================== Bootstrap Modifier Start ============================== */ /* Primary Color */ --primary-h: 211; --primary-s: 100%; --primary-l: 50%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); /* Primary Darken */ --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1); --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2); --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3); --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4); --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5); /* primary Lighten */ --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1); --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2); --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3); --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4); --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5); --primary-l-600: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.6); /* Secondary Color */ --secondary-h: 208; --secondary-s: 7%; --secondary-l: 46%; --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l); /* Secondary Darken */ --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1); --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2); --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3); --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4); --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5); /* secondary Lighten */ --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1); --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2); --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3); --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4); --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5); --secondary-l-600: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.6); /* Success Color */ --success-h: 148; --success-s: 98%; --success-l: 38%; --success: var(--success-h) var(--success-s) var(--success-l); /* Success Darken */ --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1); --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2); --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3); --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4); --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5); /* Success Lighten */ --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1); --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2); --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3); --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4); --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5); --success-l-600: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.6); /* Danger Color */ --danger-h: 0; --danger-s: 96%; --danger-l: 63%; --danger: var(--danger-h) var(--danger-s) var(--danger-l); /* Danger Darken */ --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1); --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2); --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3); --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4); --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5); /* danger Lighten */ --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1); --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2); --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3); --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4); --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5); --danger-l-600: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.6); /* Warning Color */ --warning-h: 29; --warning-s: 100%; --warning-l: 63%; --warning: var(--warning-h) var(--warning-s) var(--warning-l); /* Warning Darken */ --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1); --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2); --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3); --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4); --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5); /* Warning Lighten */ --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1); --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2); --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3); --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4); --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5); --warning-l-600: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.6); /* Info Color */ --info-h: 196; --info-s: 100%; --info-l: 50%; --info: var(--info-h) var(--info-s) var(--info-l); /* Info Darken */ --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1); --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2); --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3); --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4); --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5); --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1); --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2); --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3); --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4); --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5); --info-l-600: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.6); /* dark Color */ --dark-h: 210; --dark-s: 10%; --dark-l: 23%; --dark: var(--dark-h) var(--dark-s) var(--dark-l); /* dark Darken */ --dark-d-100: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.1); --dark-d-200: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.2); --dark-d-300: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.3); --dark-d-400: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.4); --dark-d-500: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.5); --dark-l-100: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.1); --dark-l-200: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.2); --dark-l-300: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.3); --dark-l-400: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.4); --dark-l-500: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.5); --dark-l-600: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.6); /* ============================== Bootstrap Modifier End ============================== */ } /* ========================= Css Variables End =========================== */ /* ============================ Media Breakpoint for Each Device Start ============================ */ /* ================================== Font Size For responsive devices End =============================== */ /* ================================= Common Typography Css Start =========================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--body-font); color: hsl(var(--white)/ 0.8); word-break: break-word; background-color: hsl(var(--body-bg)); min-height: 100vh; display: flex; flex-direction: column; } p { font-weight: 400; margin: 0; } span { display: inline-block; } h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; font-family: var(--heading-font); color: hsl(var(--heading-color)); line-height: 1.3; font-weight: 400; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; } } h1 { font-size: clamp(2.5rem, 1.125rem + 6.875vw, 9.375rem); } h2 { font-size: clamp(1.5rem, 0.3542rem + 2.6474vw, 3rem); } h3 { font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem); } h4 { font-size: clamp(1.125rem, 0.7784rem + 0.722vw, 1.5rem); } h5 { font-size: clamp(1rem, 0.769rem + 0.4813vw, 1.25rem); } h6 { font-size: 1rem; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-weight: inherit; font-size: inherit; color: inherit; transition: 0.2s linear; line-height: 1.3; } a { display: inline-block; transition: 0.2s linear; text-decoration: none; color: #ff0044; } a:hover { color: #ff0044; } img { max-width: 100%; height: auto; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; box-shadow: none; } .form-select:focus { outline: 0; box-shadow: none; } /* ================================= Common Typography Css End =========================== */ /* ================================= Custom Classes Css Start =========================== */ /* Column Extra Small Screen */ @media screen and (min-width: 425px) and (max-width: 575px) { .col-xsm-6 { width: 50%; } } /* Section Background */ .section-bg { background-color: hsl(var(--section-bg)); } .section-bg-two { background-color: hsl(var(--section-bg-two)); } /* Bg Image Css */ .bg-img { background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; width: 100%; height: 100%; } /* Hide Scroll bar Css For Custom Modal */ .scroll-hide { position: absolute; overflow-y: hidden; padding-right: 17px; top: 0; left: 0; width: 100%; } @media screen and (max-width: 991px) { .scroll-hide { padding-right: 0; } } .scroll-hide-sm { position: absolute; overflow-y: hidden; top: 0; left: 0; width: calc(100% - 0px); } /* Overlay Start */ .body-overlay { position: fixed; width: 100%; height: 100%; content: ""; left: 0; top: 0; background-color: hsl(var(--black)/0.5); z-index: 99; transition: 0.2s linear; visibility: hidden; opacity: 0; } .body-overlay.show-overlay { visibility: visible; opacity: 1; } .sidebar-overlay { position: fixed; width: 100%; height: 100%; content: ""; left: 0; top: 0; background-color: hsl(var(--black)/0.5); z-index: 99; transition: 0.2s linear; visibility: hidden; opacity: 0; } .sidebar-overlay.show { visibility: visible; opacity: 1; z-index: 999; } /* Overlay End */ .gradient-one { border-radius: 721px; background: linear-gradient(48deg, rgba(47, 0, 255, 0.4) 14.67%, rgba(33, 173, 228, 0.82) 74.83%); filter: blur(200px); width: 721px; height: 721px; } .gradient-two { border-radius: 721px; background: linear-gradient(48deg, rgba(0, 56, 255, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(150px); width: 301px; height: 409px; } .text-style { background: var(--base-gradient); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } .text-stoke { -webkit-text-fill-color: #0e1839; -webkit-text-stroke: 1px hsl(var(--white)/0.2); animation: tc 5s ease-in-out infinite; } @keyframes tc { 0%, 100% { -webkit-text-stroke: 1px hsl(var(--white)/0.2); } 25% { -webkit-text-stroke: 1px hsl(var(--white)/0.4); } 50% { -webkit-text-stroke: 1px hsl(var(--white)/0.6); } 75% { -webkit-text-stroke: 1px hsl(var(--white)/0.5); } } /* ================================= Custom Classes Css End =========================== */ /* Fully Fit image Css */ .fit-image { width: 100%; height: 100%; object-fit: cover; } /* ============================= Display Flex Css Start ============================= */ .flex-wrap, .form--radio, .form--check { display: flex; flex-wrap: wrap; } .flex-align, .action-buttons { display: flex; flex-wrap: wrap; align-items: center; } .flex-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } /* ============================= Display Flex Css End ============================= */ /* ============================= Positioning Css Class Start ===================== */ .pa-extend, .dashboard .sidebar-submenu-list__link::before, .alert__link::before { position: absolute; content: ""; } .top-center-extend, .dashboard .sidebar-submenu-list__link::before, .custom--accordion .accordion-button[aria-expanded=true]::after, .custom--accordion .accordion-button[aria-expanded=false]::after { top: 50%; transform: translateY(-50%); } .left-center-extend { left: 50%; transform: translateX(-50%); } .top-left-center-extend { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ============================= Positioning Css Class End ===================== */ /* ===================== Font Size For responsive devices Start =================== */ .fs-10 { font-size: 0.625rem; } .fs-11, .form--check .form-check-input:checked::before { font-size: 0.6875rem; } .fs-12, .badge { font-size: 0.75rem; } .fs-13, .dashboard .sidebar-menu-list__item.has-dropdown > a:after, .dashboard .sidebar-menu .menu-title, .customer__name { font-size: 0.8125rem; } .fs-14, .dashboard .dashboard-widget__text, .table thead tr th, .form--radio .form-check-label, .form--check .form-check-label, .form--control::placeholder { font-size: 0.875rem; } .fs-15, .dashboard .user-info__name, .dashboard .user-info .user-info-dropdown__link, .dashboard .sidebar-submenu-list__link .icon, .dashboard .sidebar-submenu-list__link, .dashboard .sidebar-menu-list__link .icon, .dashboard .sidebar-menu-list__link, select, .btn--icon { font-size: 0.9375rem; } .fs-16, .contact-list__item-icon, .dashboard .user-info__button::before, .dashboard .dashboard-header .bd-btn, .breadcrumb__item, .login-registration-list__icon, .alert__title, .table tbody tr td, .form--label, p { font-size: 1rem; } @media screen and (max-width: 1199px) { .fs-16, .contact-list__item-icon, .dashboard .user-info__button::before, .dashboard .dashboard-header .bd-btn, .breadcrumb__item, .login-registration-list__icon, .alert__title, .table tbody tr td, .form--label, p { font-size: 0.9375rem; } } .fs-17 { font-size: 1.0625rem; } @media screen and (max-width: 1199px) { .fs-17 { font-size: 1rem; } } @media screen and (max-width: 767px) { .fs-17 { font-size: 0.9375rem; } } .fs-18, .user-profile-info__icon, .table tbody tr td::before, .btn, .custom--accordion .accordion-button { font-size: 1.125rem; } @media screen and (max-width: 1399px) { .fs-18, .user-profile-info__icon, .table tbody tr td::before, .btn, .custom--accordion .accordion-button { font-size: 1.0625rem; } } @media screen and (max-width: 767px) { .fs-18, .user-profile-info__icon, .table tbody tr td::before, .btn, .custom--accordion .accordion-button { font-size: 1rem; } } .fs-20 { font-size: 1.25rem; } @media screen and (max-width: 1399px) { .fs-20 { font-size: 1.125rem; } } @media screen and (max-width: 767px) { .fs-20 { font-size: 1.0625rem; } } /* ===================== Font Size For responsive devices End =================== */ /* ====================== Section Heading ==================== */ .section-heading { text-align: center; margin-bottom: 50px; } @media screen and (max-width: 1199px) { .section-heading { margin-bottom: 40px; } } @media screen and (max-width: 991px) { .section-heading { margin-bottom: 30px; } } .section-heading__title { margin-bottom: 10px; } .section-heading__desc { max-width: 500px; margin-left: auto; margin-right: auto; font-size: 1.125rem; font-weight: 500; } .section-heading.style-left { text-align: left; } .section-heading.style-left .section-heading__title::before { left: 0; transform: translateX(0); } .section-heading.style-left .section-heading__desc { margin-left: 0; } /* ====================== Section Heading En d==================== */ /* ================================= Background Color Css Start =========================== */ .bg--base { background-color: hsl(var(--base)) !important; } .bg--primary { background-color: hsl(var(--primary)) !important; } .bg--secondary { background-color: hsl(var(--secondary)) !important; } .bg--success { background-color: hsl(var(--success)) !important; } .bg--danger { background-color: hsl(var(--danger)) !important; } .bg--warning { background-color: hsl(var(--warning)) !important; } .bg--info { background-color: hsl(var(--info)) !important; } .bg--dark { background-color: hsl(var(--dark)) !important; } /* ================================= Background Color Css End =========================== */ /* ================================= Color Css Start =========================== */ .text--base { color: hsl(var(--base)) !important; } .text--primary { color: hsl(var(--primary)) !important; } .text--secondary { color: hsl(var(--secondary)) !important; } .text--success { color: hsl(var(--success)) !important; } .text--danger { color: hsl(var(--danger)) !important; } .text--warning { color: hsl(var(--warning)) !important; } .text--info { color: hsl(var(--info)) !important; } .text--dark { color: hsl(var(--dark)) !important; } /* ================================= Color Css End =========================== */ /* ================================= margin Css Start =========================== */ .my-120 { margin-top: 60px; margin-bottom: 60px; } @media (min-width: 576px) { .my-120 { margin-top: 80px; margin-bottom: 80px; } } @media (min-width: 992px) { .my-120 { margin-top: 120px; margin-bottom: 120px; } } .mt-120 { margin-top: 60px; } @media (min-width: 576px) { .mt-120 { margin-top: 80px; } } @media (min-width: 992px) { .mt-120 { margin-top: 120px; } } .mb-120 { margin-bottom: 60px; } @media (min-width: 576px) { .mb-120 { margin-bottom: 80px; } } @media (min-width: 992px) { .mb-120 { margin-bottom: 120px; } } .my-60 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 576px) { .my-60 { margin-top: 40px; margin-bottom: 40px; } } @media (min-width: 992px) { .my-60 { margin-top: 60px; margin-bottom: 60px; } } .mt-60 { margin-top: 30px; } @media (min-width: 576px) { .mt-60 { margin-top: 40px; } } @media (min-width: 992px) { .mt-60 { margin-top: 60px; } } .mb-60 { margin-bottom: 30px; } @media (min-width: 576px) { .mb-60 { margin-bottom: 40px; } } @media (min-width: 992px) { .mb-60 { margin-bottom: 60px; } } /* ================================= margin Css End =========================== */ /* ================================= padding Css Start =========================== */ .py-120 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-120 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-120 { padding-top: 120px; padding-bottom: 120px; } } .pt-120 { padding-top: 60px; } @media (min-width: 576px) { .pt-120 { padding-top: 80px; } } @media (min-width: 992px) { .pt-120 { padding-top: 120px; } } .pb-120 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-120 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-120 { padding-bottom: 120px; } } .py-60 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-60 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-60 { padding-top: 60px; padding-bottom: 60px; } } .pt-60 { padding-top: 30px; } @media (min-width: 576px) { .pt-60 { padding-top: 40px; } } @media (min-width: 992px) { .pt-60 { padding-top: 60px; } } .pb-60 { padding-bottom: 30px; } @media (min-width: 576px) { .pb-60 { padding-bottom: 40px; } } @media (min-width: 992px) { .pb-60 { padding-bottom: 60px; } } /* ================================= padding Css End =========================== */ /* ================================= Border Color Css Start =========================== */ .border--base { border-color: hsl(var(--base)) !important; } .border--primary { border-color: hsl(var(--primary)) !important; } .border--secondary { border-color: hsl(var(--secondary)) !important; } .border--success { border-color: hsl(var(--success)) !important; } .border--danger { border-color: hsl(var(--danger)) !important; } .border--warning { border-color: hsl(var(--warning)) !important; } .border--info { border-color: hsl(var(--info)) !important; } .border--dark { border-color: hsl(var(--dark)) !important; } /* ================================= Border Color Css End =========================== */ /* =========================== Accordion Css start ============================= */ .custom--accordion .accordion-item { border: 0; border-bottom: 1px solid hsl(var(--white)/0.07); background-color: transparent !important; border-radius: 0px; overflow: hidden; } .custom--accordion .accordion-header { line-height: 1; } .custom--accordion .accordion-body { padding: 0; padding-bottom: 20px; background-color: transparent; color: hsl(var(--body-color)); } .custom--accordion .accordion-body .text { font-size: 1.125rem; } @media (max-width: 575px) { .custom--accordion .accordion-body .text { font-size: 1rem; } } .custom--accordion:first-of-type .accordion-button.collapsed { border-radius: 0px; } .custom--accordion:last-of-type .accordion-button.collapsed { border-radius: 0px; } .custom--accordion .accordion-button { background-color: transparent; color: var(--heading-color); padding: 15px 0; } @media screen and (max-width: 575px) { .custom--accordion .accordion-button { padding: 13px; padding-right: 30px; padding-left: 0px; } } .custom--accordion .accordion-button::after { background-image: none; } .custom--accordion .accordion-button:focus { box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed) { color: hsl(var(--white)); background-color: transparent !important; box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed)::after { background-image: none; color: hsl(var(--white)); } .custom--accordion .accordion-button[aria-expanded=true]::after, .custom--accordion .accordion-button[aria-expanded=false]::after { font-family: "Line Awesome Free"; font-weight: 900; content: "\f068"; display: inline-block; position: absolute; right: 15px; height: unset; font-size: 18px; } .custom--accordion .accordion-button[aria-expanded=false]::after { content: "\f067"; color: hsl(var(--white)); } .custom--accordion.accordion-two .accordion-button { background: var(--base-gradient) !important; -webkit-background-clip: text !important; -moz-background-clip: text; -webkit-text-fill-color: transparent !important; -moz-text-fill-color: transparent; display: flex; align-items: center; font-size: 32px; padding: 25px 0; } .custom--accordion.accordion-two .accordion-button .accordion-text { background: var(--base-gradient) !important; -webkit-background-clip: text !important; -moz-background-clip: text; -webkit-text-fill-color: transparent !important; -moz-text-fill-color: transparent; } .custom--accordion.accordion-two .accordion-body { display: flex; } .custom--accordion.accordion-two .accordion-body .text { width: calc(100% - 50px); } .custom--accordion.accordion-two .accordion-body .accordion-text::before { background: hsl(var(--white)); } .custom--accordion.accordion-two .accordion-text { font-size: 48px; margin-right: 20px; width: 70px; font-family: var(--heading-font); position: relative; z-index: 1; line-height: 1; padding-left: 20px; color: hsl(var(--white)); } .custom--accordion.accordion-two .accordion-text::before { position: absolute; content: ""; top: 0; left: 0; width: 1px; height: 50px; background: var(--base-gradient); z-index: -1; } /* ================================= Accordion Css End =========================== */ /* ================================= Button Css Start =========================== */ .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { color: none; background-color: none; border-color: none; } .pill { border-radius: 40px !important; } .btn { color: hsl(var(--white)) !important; font-weight: 700; padding: 16px 40px; border-radius: 5px; position: relative; z-index: 1; border: 0; font-family: var(--body-font); line-height: 1.1; } .btn:hover, .btn:focus, .btn:focus-visible { box-shadow: none !important; } .btn--lg { padding: 25px 35px; } @media screen and (max-width: 575px) { .btn--lg { padding: 18px 32px; } } .btn--sm { padding: 12px 24px; font-size: 0.875rem; } @media screen and (max-width: 767px) { .btn--sm { padding: 8px 12px; } } .btn--icon { width: 35px; height: 35px; line-height: 35px; padding: 0; } .btn .icon { margin-right: 5px; } .btn--base { background: var(--base-gradient); position: relative; z-index: 1; overflow: hidden; border: 1px solid transparent !important; } .btn--base::before { position: absolute; left: -100%; top: 0; height: 100%; width: 100%; background: var(--base-gradient-reverse); content: ""; z-index: -1; border-radius: 3px; transition: 0.3s ease-in-out; } .btn--base:hover::before { left: 0%; } .btn--base::after { position: absolute; content: ""; top: 0; left: 0%; width: 100%; height: 100%; background: var(--base-gradient); transition: all ease 0.3s; z-index: -1; } .btn--base:hover::after { left: 100%; } .btn-outline--base { /* background: var(--base-gradient) !important; */ background-color: transparent !important; border: 1px solid hsl(var(--base)) !important; color: hsl(var(--base)) !important; z-index: 2; position: relative; overflow: hidden; } .btn-outline--base:hover, .btn-outline--base:focus .btn-outline--base:focus-visible { background: var(--base-gradient) !important; color: hsl(var(--white)) !important; border: 1px solid transparent !important; } .btn-outline--base:hover::after, .btn-outline--base:focus .btn-outline--base:focus-visible::after { background: var(--base-gradient) !important; } .btn--primary { background-color: hsl(var(--primary)) !important; } .btn--primary:hover, .btn--primary:focus .btn--primary:focus-visible { background-color: hsl(var(--primary-d-200)) !important; } .btn-outline--primary { background-color: transparent !important; border: 1px solid hsl(var(--primary)) !important; color: hsl(var(--primary)) !important; } .btn-outline--primary:hover, .btn-outline--primary:focus .btn-outline--primary:focus-visible { background-color: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; } .btn--secondary { background-color: hsl(var(--secondary)) !important; } .btn--secondary:hover, .btn--secondary:focus .btn--secondary:focus-visible { background-color: hsl(var(--secondary-d-200)) !important; } .btn-outline--secondary { background-color: transparent !important; border: 1px solid hsl(var(--secondary)) !important; color: hsl(var(--secondary)) !important; } .btn-outline--secondary:hover, .btn-outline--secondary:focus .btn-outline--secondary:focus-visible { background-color: hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .btn--success { background-color: hsl(var(--success)) !important; } .btn--success:hover, .btn--success:focus .btn--success:focus-visible { background-color: hsl(var(--success-d-200)) !important; } .btn-outline--success { background-color: transparent !important; border: 1px solid hsl(var(--success)) !important; color: hsl(var(--success)) !important; } .btn-outline--success:hover, .btn-outline--success:focus .btn-outline--success:focus-visible { background-color: hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .btn--danger { background-color: hsl(var(--danger)) !important; } .btn--danger:hover, .btn--danger:focus .btn--danger:focus-visible { background-color: hsl(var(--danger-d-200)) !important; } .btn-outline--danger { background-color: transparent !important; border: 1px solid hsl(var(--danger)) !important; color: hsl(var(--danger)) !important; } .btn-outline--danger:hover, .btn-outline--danger:focus .btn-outline--danger:focus-visible { background-color: hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .btn--warning { background-color: hsl(var(--warning)) !important; } .btn--warning:hover, .btn--warning:focus .btn--warning:focus-visible { background-color: hsl(var(--warning-d-200)) !important; } .btn-outline--warning { background-color: transparent !important; border: 1px solid hsl(var(--warning)) !important; color: hsl(var(--warning)) !important; } .btn-outline--warning:hover, .btn-outline--warning:focus .btn-outline--warning:focus-visible { background-color: hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .btn--info { background-color: hsl(var(--info)) !important; } .btn--info:hover, .btn--info:focus .btn--info:focus-visible { background-color: hsl(var(--info-d-200)) !important; } .btn-outline--info { background-color: transparent !important; border: 1px solid hsl(var(--info)) !important; color: hsl(var(--info)) !important; } .btn-outline--info:hover, .btn-outline--info:focus .btn-outline--info:focus-visible { background-color: hsl(var(--info)) !important; color: hsl(var(--white)) !important; } .btn--dark { background-color: hsl(var(--dark)) !important; } .btn--dark:hover, .btn--dark:focus .btn--dark:focus-visible { background-color: hsl(var(--dark-d-200)) !important; } .btn-outline--dark { background-color: transparent !important; border: 1px solid hsl(var(--dark)) !important; color: hsl(var(--dark)) !important; } .btn-outline--dark:hover, .btn-outline--dark:focus .btn-outline--dark:focus-visible { background-color: hsl(var(--dark)) !important; color: hsl(var(--white)) !important; } /* ================================= Button Css End =========================== */ /* ================================= Card Css Start =========================== */ .custom--card { border-radius: 5px; box-shadow: var(--box-shadow); background-color: hsl(var(--section-bg)); border: transparent; } .custom--card .card-header { padding: 12px 24px; background-color: transparent; border-bottom: 1px solid hsl(var(--white)/0.1); } .custom--card .card-header .title { margin-bottom: 0; } .custom--card .card-body { background-color: hsl(var(--section-bg)); padding: 24px; border-radius: 5px; } .custom--card .card-footer { padding: 12px 24px; background-color: transparent; border-top: 1px solid hsl(var(--white)/0.1); } /* ================================= Card Css End =========================== */ /* ================================= Form Css Start =========================== */ /* Form Label */ .form--label { margin-bottom: 8px; color: hsl(var(--white)); font-weight: 600; } .form-group { margin-bottom: 1rem; } /* Form Control Start */ .form--control { border-radius: 8px; font-weight: 400; outline: none; width: 100%; padding: 16px 24px; background-color: hsl(var(--form-bg)) !important; border: 1px solid hsl(var(--white)/0.09); color: hsl(var(--white)); line-height: 1.2; } .form--control::placeholder { color: hsl(var(--white)/0.8); } .form--control:focus { border-color: hsl(var(--base)); box-shadow: none; color: hsl(var(--white)) !important; } .form--control:disabled, .form--control[readonly] { background-color: hsl(var(--black)/0.2); opacity: 1; border: 0; } .form--control[type=password] { color: hsl(var(--white)/0.5); } .form--control[type=password]:focus { color: hsl(var(--white)); } .form--control[type=file] { line-height: 50px; padding: 0; position: relative; } .form--control[type=file]::file-selector-button { border: 0; padding: 4px 8px; border-radius: 0.2em; background: var(--base-gradient) !important; transition: 0.2s linear; line-height: 25px; position: relative; margin-left: 15px; color: hsl(var(--white)) !important; } .form--control[type=file]::file-selector-button:hover { color: hsl(var(--white)); } .country-code .form--control.form-control { padding: 15px 24px; border-radius: 0px 5px 5px 0px !important; } /* Form Control End */ textarea.form--control { height: 130px; } .sidebar-menu-list__item.has-dropdown.active .sidebar-submenu__open { display: block; } .preview-details .list-group-item { background-color: hsl(var(--section-bg-two)); color: hsl(var(--white)); border: 1px solid hsl(var(--white)/.09); } /* Autofill Css */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: hsl(var(--white)) !important; caret-color: hsl(var(--white)); } .copytext{ cursor: pointer; } /* Autofill Css End */ /* input group */ .input--group { position: relative; } /* Show Hide Password */ input#your-password, input#confirm-password { padding-right: 50px; } .password-show-hide { position: absolute; right: 20px; z-index: 5; cursor: pointer; top: 50%; transform: translateY(-50%); color: hsl(var(--white)/0.4); } /* --------------- Number Arrow None --------------------- */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; } /* Custom Checkbox Design */ .form--check a { display: inline; } .form--check .form-check-input { box-shadow: none; background-color: transparent; box-shadow: none !important; border: 0; position: relative; border-radius: 2px; width: 16px; height: 16px; border: 1px solid hsl(var(--white)/0.2); cursor: pointer; } .form--check .form-check-input:checked { background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; box-shadow: none; } .form--check .form-check-input:checked[type=checkbox] { background-image: none; } .form--check .form-check-input:checked::before { position: absolute; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--white)); top: 50%; left: 50%; transform: translate(-50%, -50%); } .form--check .form-check-label { font-weight: 600; width: calc(100% - 16px); padding-left: 12px; cursor: pointer; } @media screen and (max-width: 424px) { .form--check label { font-size: 0.9375rem; } } @media screen and (max-width: 424px) { .form--check a { font-size: 0.9375rem; } } /* Custom Radio Design */ .form--radio .form-check-input { box-shadow: none; border: 1px solid hsl(var(--black)/0.2); position: relative; background-color: transparent; cursor: pointer; width: 16px; height: 16px; } .form--radio .form-check-input:active { filter: brightness(100%); } .form--radio .form-check-input:checked { background-color: transparent; border-color: hsl(var(--base)); } .form--radio .form-check-input:checked[type=radio] { background-image: none; } .form--radio .form-check-input:checked::before { position: absolute; content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7px; height: 7px; background-color: hsl(var(--base)); border-radius: 50%; z-index: 999; } .form--radio .form-check-label { font-weight: 600; width: calc(100% - 16px); padding-left: 12px; cursor: pointer; } /* Custom Switch Design */ .form--switch .form-check-input { border-radius: 3px; background-image: none; position: relative; box-shadow: none; border: 0; background-color: hsl(var(--black)/0.2) !important; padding: 10px !important; margin-left: 0; margin-bottom: 5px; border-radius: 40px; width: 70px; height: 38px; cursor: pointer; } .form--switch .form-check-input:focus { border-radius: 40px; background-image: none; position: relative; box-shadow: none; border: 0; } .form--switch .form-check-input::before { position: absolute; content: ""; width: 28px; height: 28px; background-color: hsl(var(--white)); top: 50%; transform: translateY(-50%); border-radius: 2px; left: 5px; border-radius: 50%; transition: 0.2s linear; } .form--switch .form-check-input:checked { background-color: hsl(var(--base)) !important; } .form--switch .form-check-input:checked::before { left: calc(100% - 33px); background-color: hsl(var(--white)) !important; } .form--switch .form-check-input:checked[type=checkbox] { background-image: none; } .form--switch .form-check-label { width: calc(100% - 14px); padding-left: 5px; cursor: pointer; } /* Custom Switch End Design */ .input-group-text.bg-style { background: var(--base-gradient); border: none; padding: 0 25px; color: hsl(var(--white)); } .input-group-text.bg-style .icon { font-size: 25px; } /* ================================= Form Css End =========================== */ /* ================================= Modal Css Start =========================== */ /* .custom--modal.modal { background-color: hsl(var(--section-bg)); } */ .custom--modal .modal-content { background-color: hsl(var(--section-bg)); border-radius: 10px !important; padding: 20px; } .custom--modal .btn-close { transition: 0.2s linear; } .custom--modal .btn-close:focus { box-shadow: none; } .custom--modal .btn-close:hover { background-color: hsl(var(--white)/0.08); border-radius: 50%; } .custom--modal .close { color: white; width: 30px; height: 30px; border: 1px solid hsl(var(--white)); border-radius: 50%; } .custom--modal .modal-header { border-bottom: none; } .custom--modal .dashboard-form__btn { margin-top: 40px; } .custom--modal .modal-body { padding: 16px; background-size: 10px; } .custom--modal .modal-icon i { font-size: 2rem; color: hsl(var(--base)); border: 3px solid hsl(var(--base)); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .custom--modal .modal-footer { border: 0; } /* ================================= Modal Css End =========================== */ /* ================================= Pagination Css Start =========================== */ .pagination { flex-wrap: wrap; justify-content: center; margin-top: 56px; } @media screen and (max-width: 1199px) { .pagination { margin-top: 48px; } } @media screen and (max-width: 991px) { .pagination { margin-top: 40px; } } @media screen and (max-width: 767px) { .pagination { margin-top: 32px; } } .pagination .page-item.active .page-link { background-color: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .pagination .page-item .page-link { border: 1px solid hsl(var(--black)/0.15); margin: 0 5px; border-radius: 50%; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; background-color: transparent; font-weight: 500; padding: 0; color: hsl(var(--body-color)); } .pagination .page-item .page-link:hover { background-color: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .pagination .page-item .page-link:focus { box-shadow: none; } /* ================================= Pagination Css End =========================== */ /* ================================= Table Css Start =========================== */ /* Table Content Css start */ @media screen and (max-width: 374px) { .customer { display: block; text-align: left; } } .customer__thumb { width: 35px; height: 35px; border-radius: 50%; overflow: hidden; } @media screen and (max-width: 374px) { .customer__thumb { margin-left: auto; } } .customer__content { width: calc(100% - 35px); padding-left: 15px; text-align: left; } @media screen and (max-width: 424px) { .customer__content { padding-left: 8px; } } @media screen and (max-width: 374px) { .customer__content { width: 100%; padding-left: 0px; padding-top: 5px; } } .customer__name { margin-bottom: 0; color: hsl(var(--black)/0.7); } .action-buttons { gap: 10px; justify-content: flex-end; } .action-btn { width: 35px; height: 35px; border-radius: 50%; } .edit-btn { color: hsl(var(--info)); background-color: hsl(var(--info)/0.08); } .delete-btn { color: hsl(var(--danger)); background-color: hsl(var(--danger)/0.08); } /* Table Content Css end */ /* Table Css Start */ .table { margin: 0; border-collapse: collapse; border-collapse: separate; border-spacing: 0px 0px; } .table thead tr th { background-color: hsl(var(--section-bg)); text-align: center; padding: 15px; color: hsl(var(--white)); font-family: var(--body-font); font-weight: 600; border-bottom: 0; max-width: 170px; border-top: 1px solid hsl(var(--base-two)); border-bottom: 1px solid hsl(var(--base)); position: relative; } .table thead tr th::before { position: absolute; content: ""; background: linear-gradient(180deg, hsl(var(--base-two)) 5.48%, hsl(var(--base)) 107.63%); width: 2px; height: 70%; top: 50%; transform: translateY(-50%); left: 0px; } .table thead tr th:not(:first-child) { border-left: 0; } .table thead tr th:first-child { text-align: left; border-left: 1px solid hsl(var(--base)); border-radius: 6px 0 0 0; } .table thead tr th:first-child::before { display: none; } .table thead tr th:last-child { border-radius: 0 6px 0 0; text-align: right; border-right: 1px solid hsl(var(--base)); } .table thead tr th:nth-child(2) { text-align: center; } .table tbody { border: 1px solid hsl(var(--base)) !important; background-color: hsl(var(--section-bg)); } .table tbody tr { border-bottom: 0 !important; } .table tbody tr:last-child { border-bottom: 0; } .table tbody tr:last-child td { border-bottom: 1px solid hsl(var(--base)); } .table tbody tr:last-child td:first-child { border-radius: 0px 0 0 6px; } .table tbody tr:last-child td:last-child { border-radius: 0 0px 6px 0; } .table tbody tr td { text-align: center; vertical-align: middle; padding:10px 15px; border-width: 1px; border: 0; font-family: var(--body-font); color: hsl(var(--white)/0.8); font-weight: 500; max-width: 170px; border-bottom: 1px solid hsl(var(--white)/0.08); border-right: 0 !important; font-size: 0.875rem; } .table tbody tr td::before { content: attr(data-label); font-family: var(--heading-font); color: hsl(var(--white)); font-weight: 500; display: none; width: 45% !important; text-align: left; font-size: 0.875rem; } .table tbody tr td:first-child { text-align: left; border-left: 1px solid hsl(var(--base)); } .table tbody tr td:last-child { text-align: right; border-right: 1px solid hsl(var(--base)) !important; } @media screen and (max-width: 767px) { .table--responsive--md thead { display: none; } .table--responsive--md tbody tr { display: block; } .table--responsive--md tbody tr:last-child td { border-bottom: 0; } .table--responsive--md tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--white)/0.08) !important; max-width: unset; } .table--responsive--md tbody tr:last-child td{ background-color: hsl(var(--black)/0.2); } .table--responsive--md tbody tr td:last-child { border: none; } .table--responsive--md tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--md tbody tr td::before { display: block; } .table--responsive--md tbody tr td:last-child{ border-right: none !important; } } @media screen and (max-width: 767px) { .table--responsive--md tbody tr td { border: 0; } } @media screen and (max-width: 991px) { .table--responsive--lg thead { display: none; } .table--responsive--lg tbody tr { display: block; } .table--responsive--lg tbody tr td { border: 0; } .table--responsive--lg tbody tr:nth-child(even) { background-color: hsl(var(--black)/0.2); } .table--responsive--lg tbody tr:last-child td { border-bottom: 0; } .table--responsive--lg tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--white)/0.08) !important; max-width: unset; } .table--responsive--lg tbody tr td:last-child { border: none !important; } .table--responsive--lg tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--lg tbody tr td::before { display: block; } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td { border: none; } } @media screen and (max-width: 1199px) { .table--responsive--xl thead { display: none; } .table--responsive--xl tbody tr { display: block; } .table--responsive--xl tbody tr:nth-child(even) { background-color: hsl(var(--black)/0.2); } .table--responsive--xl tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--white)/0.08) !important; max-width: unset; } .table--responsive--xl tbody tr td:last-child { border: none !important; } .table--responsive--xl tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--xl tbody tr td::before { display: block; } } @media screen and (max-width: 1199px) { .table--responsive--xl tbody tr td { border: 0; } } @media screen and (max-width: 1399px) { .table--responsive--xxl thead { display: none; } .table--responsive--xxl tbody tr { display: block; } .table--responsive--xxl tbody tr:last-child td { border-bottom: 0; } .table--responsive--xxl tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--black)/0.08); max-width: unset; } .table--responsive--xxl tbody tr td:last-child { border: none; } .table--responsive--xxl tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--xxl tbody tr td::before { display: block; } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td { border: 0; } } /* ================================= Table Css End =========================== */ /* ================================= Tab Css Start =========================== */ .custom--tab { justify-content: center; border-radius: 6px; margin-bottom: 40px !important; } .custom--tab .nav-item { border-bottom: 0; padding: 5px; } .custom--tab .nav-item .nav-link { color: hsl(var(--white)); padding: 8px 25px !important; background-color: transparent !important; border-radius: 5px; transition: 0.4s; border: 1px solid hsl(var(--black)/0.08) !important; } @media screen and (max-width: 1199px) { .custom--tab .nav-item .nav-link { padding: 12px 15px !important; } } .custom--tab .nav-item .nav-link.active { color: hsl(var(--white)); background-color: hsl(var(--base-d-200)) !important; border: 1px solid transparent !important; } .custom--tab .nav-item .nav-link.active:hover { color: hsl(var(--white)); } .custom--tab .nav-item .nav-link:hover { color: hsl(var(--base)); } /* ================================= Tab Css End =========================== */ /* ================================= Badge Css Start =========================== */ .badge { border-radius: 30px; padding: 7px 10px; font-weight: 500; position: relative; text-align: center; } .badge--base { background-color: hsl(var(--base)) !important; color: hsl(var(--white)) !important; } .badge--base-two { background-color: hsl(var(--base-two)) !important; color: hsl(var(--white)) !important; } .badge--primary { background-color: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; } .badge--secondary { background-color: hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .badge--success { background-color: hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .badge--danger { background-color: hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .badge--warning { background-color: hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .badge--info { background-color: hsl(var(--info)) !important; color: hsl(var(--white)) !important; } .badge--dark { background-color: hsl(var(--dark)) !important; color: hsl(var(--white)) !important; } /* ================================= Badge Css End =========================== */ /* ====================================== Alert Css Start =============================== */ .alert { margin-bottom: 0; background-color: hsl(var(--white)) !important; font-weight: 400; padding: 17px 24px; border-radius: 5px; } @media screen and (max-width: 991px) { .alert { padding: 16px; } } @media screen and (max-width: 575px) { .alert { padding: 12px; } } .alert__icon { font-size: 1.5rem; line-height: 1; color: hsl(var(--white)); } .alert__content { width: calc(100% - 24px); padding-left: 32px; } @media screen and (max-width: 991px) { .alert__content { padding-left: 16px; } } @media screen and (max-width: 575px) { .alert__content { padding-left: 15px; width: 100%; margin-top: 6px; } } .alert__title { color: hsl(var(--white)); font-weight: 500; margin-bottom: 6px; } .alert__desc { color: hsl(var(--white)); display: block; line-height: 1.375; } @media screen and (max-width: 424px) { .alert__desc { font-size: 0.8125rem; } } .alert__link { position: relative; } .alert__link:hover::before { visibility: visible; opacity: 1; bottom: 0; } .alert__link::before { left: 0; bottom: -5px; width: 100%; height: 1px; background-color: hsl(var(--base)); visibility: hidden; opacity: 0; transition: 0.2s ease-in-out; } .alert--base { border-color: hsl(var(--base)/0.6); background-color: hsl(var(--base)/.1) !important; } .alert--base .alert__title { color: hsl(var(--base)); } .alert--base .alert__icon { color: hsl(var(--base)); } .alert--primary { border-color: hsl(var(--primary)/0.6); background-color: hsl(var(--primary)/.1) !important; } .alert--primary .alert__title { color: hsl(var(--primary)); } .alert--primary .alert__icon { color: hsl(var(--primary)); } .alert--success { border-color: hsl(var(--success)/0.6); background-color: hsl(var(--success)/.1) !important; } .alert--success .alert__title { color: hsl(var(--success)); } .alert--success .alert__icon { color: hsl(var(--success)); } .alert--info { border-color: hsl(var(--info)/0.6); background-color: hsl(var(--info)/.1) !important; } .alert--info .alert__title { color: hsl(var(--info)); } .alert--info .alert__icon { color: hsl(var(--info)); } .alert--danger { border-color: hsl(var(--danger)/0.6); background-color: hsl(var(--danger)/.1) !important; } .alert--danger .alert__title { color: hsl(var(--danger)); } .alert--danger .alert__icon { color: hsl(var(--danger)); } .alert--warning { border-color: hsl(var(--warning)/0.6); background-color: hsl(var(--warning)/.1) !important; } .alert--warning .alert__title { color: hsl(var(--warning)); } .alert--warning .alert__icon { color: hsl(var(--warning)); } .alert--secondary { border-color: hsl(var(--secondary)/0.6); background-color: hsl(var(--secondary)/.1) !important; } .alert--secondary .alert__title { color: hsl(var(--secondary)); } .alert--secondary .alert__icon { color: hsl(var(--secondary)); } .alert--dark { border-color: hsl(var(--dark)/0.6); background-color: hsl(var(--dark)/.1) !important; } .alert--dark .alert__title { color: hsl(var(--dark)); } .alert--dark .alert__icon { color: hsl(var(--dark)); } /* ====================================== Alert Css End =============================== */ /* ================================= preload Css Start =========================== */ .preloader-wrapper { position: fixed; z-index: 999999; background-color: hsl(var(--black)); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .preloader-wrapper .preloader { position: relative; width: 100%; display: flex; justify-content: center; } .preloader-wrapper .wrapper { position: absolute; transform: scale(1.5); } .preloader-wrapper .loader { height: 25px; width: 1px; position: absolute; animation: rotate 3.5s linear infinite; } .preloader-wrapper .loader .dot { top: 30px; height: 7px; width: 7px; background: hsl(var(--base)); border-radius: 50%; position: relative; } @keyframes rotate { 30% { transform: rotate(220deg); } 40% { transform: rotate(450deg); opacity: 1; } 75% { transform: rotate(720deg); opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; transform: rotate(0deg); } } .loader:nth-child(1) { animation-delay: 0.15s; } .loader:nth-child(2) { animation-delay: 0.3s; } .loader:nth-child(3) { animation-delay: 0.45s; } .loader:nth-child(4) { animation-delay: 0.6s; } .loader:nth-child(5) { animation-delay: 0.75s; } .loader:nth-child(6) { animation-delay: 1s; } /* ================================= preload Css End =========================== */ /* ============= Header Start Here ======================= */ .navbar-brand { padding-top: 0; padding-bottom: 0; } .navbar-brand.logo img { max-width: 200px; max-height: 60px; } @media screen and (max-width: 991px) { .navbar-brand.logo img { max-width: 150px; } } .header { position: absolute; width: 100%; z-index: 5; background-color: transparent; } @media screen and (max-width: 991px) { .header { top: 0px; background-color: hsl(var(--black)); padding: 10px 0; position: absolute; left: 0; right: 0; z-index: 999; max-height: 101vh; overflow-y: auto; } .header::-webkit-scrollbar { width: 5px; height: 5px; } .header::-webkit-scrollbar-thumb { border-radius: 0px; } } .header.fixed-header { background-color: hsl(var(--black)); position: fixed; transition: 0.3s linear; top: 0px; animation: slide-down 0.8s; width: 100%; } @keyframes slide-down { 0% { opacity: 0; transform: translateY(-150%); } 100% { opacity: 1; transform: translateY(0); } } .navbar { padding: 0 !important; } /* ========================= Desktop Device Start ========================= */ @media (min-width: 992px) { .header .nav-menu { padding-top: 0; padding-bottom: 0; } .header .nav-menu .nav-item { position: relative; padding-right: 24px; } .header .nav-menu .nav-item:last-child { padding-right: 0; } .header .nav-menu .nav-item.active .nav-link { color: hsl(var(--base)) !important; } .header .nav-menu .nav-item.active .nav-link::before { width: 100%; } .header .nav-menu .nav-item:hover .nav-link { color: hsl(var(--base)) !important; } .header .nav-menu .nav-item:hover .nav-link::before { width: 100%; } .header .nav-menu .nav-item:hover .nav-link .nav-item__icon { transform: rotate(180deg); transition: 0.2s; } .header .nav-menu .nav-item .nav-link { font-weight: 600; font-size: 1.25rem; color: hsl(var(--white)) !important; padding: 25px 0; position: relative; cursor: pointer; /* ======================== Style two ================ */ } .header .nav-menu .nav-item .nav-link:hover::before { left: 0; transition: 0.3s; } .header .nav-menu .nav-item .nav-link::before { position: absolute; content: ""; right: 0; bottom: 25px; width: 0; height: 2px; background-color: hsl(var(--base)); transition: 0.3s; } .header .nav-menu .nav-item .nav-link .nav-item__icon { transition: 0.3s; font-size: 0.8125rem; margin-left: 2px; } } @media screen and (min-width: 992px) and (max-width: 991px) { .header .nav-menu .nav-item .nav-link .nav-item__icon { margin-right: 6px; } } @media (min-width: 992px) { .header .dropdown-menu { display: block; visibility: hidden; opacity: 0; transition: 0.3s; top: 100%; left: 0; padding: 0 !important; transform: scaleY(0); transform-origin: top center; transition: 0.3s; overflow: hidden; border-radius: 0; min-width: 190px; border: 0; box-shadow: var(--box-shadow); } .header .dropdown-menu__link { padding: 7px 20px; font-weight: 500; font-size: 1rem; transition: 0.3s; } .header .dropdown-menu__link:focus, .header .dropdown-menu__link:hover { color: hsl(var(--white)); background-color: hsl(var(--base)); } } @media (min-width: 992px) { .header .nav-menu .nav-item:hover .dropdown-menu { visibility: visible; opacity: 1; top: 100% !important; transform: scaleY(1); } } /* ========================== Desktop Device End ========================= */ /* ============================== Small Device ======================= */ @media screen and (max-width: 991px) { .header .nav-menu { margin-top: 20px; } .header .nav-menu .nav-item { text-align: left; display: block; position: relative; margin: 0; } .header .nav-menu .nav-item:hover .nav-link .nav-item__icon { transform: rotate(0deg) !important; } .header .nav-item:first-child { border-bottom: none; } .header .nav-item:last-child > a { border-bottom: 0; } .header .nav-item.active .nav-link { color: hsl(var(--base)); } .header .nav-item .nav-link { margin-bottom: 8px; padding: 10px 10px 10px 0 !important; display: flex; justify-content: space-between; align-items: center; margin: 0 !important; border-bottom: 1px solid hsl(var(--white)/0.2); color: hsl(var(--white)); } .header .nav-item .nav-link::before { display: none; } .header .nav-item .nav-link.show[aria-expanded=true] { color: hsl(var(--base)) !important; } .header .nav-item .nav-link.show[aria-expanded=true] i { transform: rotate(180deg); } .header .dropdown-menu { box-shadow: none; border-radius: 2px; width: 100%; margin: 0px !important; padding: 0 !important; border: 0; background-color: inherit; overflow: hidden; } .header .dropdown-menu li:nth-last-child(1) { border-bottom: none; } .header .dropdown-menu li .dropdown-item { padding: 10px 0px; font-weight: 500; font-size: 1rem; color: hsl(var(--white)); border-bottom: 1px solid hsl(var(--white)/0.2); margin-left: 20px; color: hsl(var(--white)); } .header .dropdown-menu li .dropdown-item:hover, .header .dropdown-menu li .dropdown-item:focus { background-color: transparent; } } .header .navbar-toggler.header-button { border-color: transparent; color: hsl(var(--white)); background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; transition: 0.15s ease-in-out; width: auto; font-size: 2.5rem; } .header .navbar-toggler.header-button:focus { box-shadow: none !important; } .header .navbar-toggler.header-button[aria-expanded=true] i::before { content: "\f00d"; } @media screen and (max-width: 991px) { .body-overlay.show { visibility: visible; opacity: 1; } } .top-button { gap: 22px; margin-left: 20px; } @media screen and (max-width: 991px) { .top-button { margin-left: 0; } } /* Login Registration */ .login-registration-list__icon { color: hsl(var(--white)); width: 45px; height: 40px; background: var(--base-gradient); display: flex; justify-content: center; align-items: center; border-radius: 4px; } /* Language Box */ .language-box { display: flex; align-items: center; position: relative; z-index: 2; background: var(--base-gradient); border-radius: 4px; } select { color: hsl(var(--white)) !important; background-color: transparent; padding: 10px 15px; font-weight: 400; border: 0; } select:focus { color: hsl(var(--white)) !important; outline: 0 !important; } select option { background-color: hsl(var(--black)); } .form-select { color: hsl(var(--white)) !important; } /* ================================= Header Css End =========================== */ /* ============= Footer Start Here ======================= */ .footer-area { margin-top: auto; position: relative; z-index: 1; overflow: hidden; } .footer-area .shape-one { position: absolute; top: 0; left: 617px; width: 672px; height: 300px; z-index: -1; border-radius: 721px; background: linear-gradient(48deg, rgba(0, 56, 255, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(150px); } @media screen and (max-width: 1399px) { .footer-area .shape-one { left: 200px; } } @media screen and (max-width: 1199px) { .footer-area .shape-one { left: -50px; } } .footer-area .shape-two { position: absolute; top: 0; right: 300px; z-index: -1; width: 400px; height: 400px; z-index: -1; border-radius: 721px; background: linear-gradient(48deg, rgba(0, 56, 255, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(150px); } @media screen and (max-width: 1199px) { .footer-area .shape-two { top: 200px; right: 100px; } } .footer-area__wrapper { padding: 85px 0; } .footer-item__logo { margin-bottom: 20px; } .footer-item__logo a img { width: 100%; height: 100%; max-width: 190px; max-height: 64px; } .footer-item__title { color: hsl(var(--white)); padding-bottom: 10px; margin-bottom: 25px; position: relative; } .footer-item__title::after { position: absolute; content: ""; width: 30px; height: 3px; left: 0; bottom: -2px; background: var(--base-gradient); border-radius: 10px; } .footer-item .social-list { margin-top: 30px; } @media screen and (max-width: 991px) { .footer-item .social-list { margin-top: 20px; } } @media screen and (max-width: 575px) { .footer-item .social-list { margin-top: 15px; } } /* Footer List Item */ .footer-menu { display: flex; flex-direction: column; } .footer-menu__item { display: block; padding-bottom: 16px; } .footer-menu__item:last-child { padding-bottom: 0; } .footer-menu__link { color: hsl(var(--white)); position: relative; padding-left: 20px; } .footer-menu__link::after { position: absolute; content: ""; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--base-gradient); transform: translateY(-50%); } .footer-menu__link:hover { color: hsl(var(--base)); text-decoration: underline; } /* Footer Contact */ .footer-contact-menu__item { display: flex; padding-bottom: 12px; } .footer-contact-menu__item:last-child { padding-bottom: 0; } .footer-contact-menu__item-icon { width: 22px; background: var(--base-gradient); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; font-size: 1.25rem; } .footer-contact-menu__item-content { width: calc(100% - 15px); padding-left: 15px; } .footer-contact-menu__item-content .text { color: hsl(var(--white)); } /* ============= Footer End Here ======================= */ /* ============= Bottom Footer End Here ======================= */ .bottom-footer { background-color: hsl(var(--section-bg-three)); } /* =============Bottom Footer End Here ======================= */ /* ===================== Scroll to Top Start ================================= */ .scroll-top { position: fixed; right: 30px; bottom: 30px; color: hsl(var(--white)); width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 5; transition: 0.5s; cursor: pointer; transform: scale(0); background: var(--base-gradient); } .scroll-top:hover { color: hsl(var(--white)); } .scroll-top.show { transform: scale(1); } /* ===================== Scroll to Top End ================================= */ /* ================================= Template Selection Css Start =========================== */ ::selection { color: hsl(var(--white)); background: hsl(var(--base-d-100)); } /* ================================= Template Selection Css End =========================== */ /* ================================= Social Icon Css Start =========================== */ .social-list { display: flex; flex-wrap: wrap; align-items: center; } .social-list__item { margin-right: 10px; } .social-list__item:last-child { margin-right: 0; } .social-list__link { width: 40px; height: 40px; border-radius: 50%; position: relative; overflow: hidden; transition: 0.3s; cursor: pointer; color: hsl(var(--white)); background-color: hsl(var(--white)/0.15); } .social-list__link.active, .social-list__link:hover, .social-list__link:focus { background-color: hsl(var(--base)); color: hsl(var(--white)) !important; border-color: hsl(var(--base)) !important; } @media screen and (max-width: 767px) { .social-list__link { width: 35px; height: 35px; font-size: 0.875rem; } } /* ================================= Social Icon Css End =========================== */ /* ====================== Breadcrumb Css Start ==================== */ .breadcrumb { margin-bottom: 0; position: relative; z-index: 1; padding: 114px 0 55px; overflow: hidden; z-index: 1; } .breadcrumb .shape-one { position: absolute; top: 25px; left: 564px; background: #0D83F0; filter: blur(200px); z-index: -1; width: 550px; height: 300px; } .breadcrumb .shape-two { position: absolute; top: 100px; right: 100px; background: linear-gradient(48deg, rgba(155, 145, 198, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(200px); z-index: -1; width: 579px; height: 244px; } .breadcrumb .shape-three { position: absolute; top: 10px; left: 50px; background: #D00DF0; filter: blur(200px); z-index: -1; width: 408px; height: 162px; } .breadcrumb .shape-four { position: absolute; top: 50px; right: 300px; background: linear-gradient(230deg, rgba(5, 0, 255, 0.6) -0.65%, rgba(159, 1, 255, 0.6) 53.96%); filter: blur(200px); z-index: -1; width: 579px; height: 244px; } @media screen and (max-width: 991px) { .breadcrumb { padding: 115px 0 60px; } } @media screen and (max-width: 767px) { .breadcrumb { padding: 100px 0 40px; } } .breadcrumb__title { margin-bottom: 0px; color: hsl(var(--white)); } .breadcrumb__list { display: flex; flex-wrap: wrap; } .breadcrumb__item { color: hsl(var(--white)); padding: 0 5px; font-weight: 400; } .breadcrumb__item-text { color: hsl(var(--base)); } .breadcrumb__link { color: hsl(var(--white)); font-weight: 500; } .breadcrumb__link:hover { color: hsl(var(--base)); } /* ====================== Breadcrumb Css End ==================== */ /* ================================= Dashboard Fulid Sidebar Css Start =========================== */ .dashboard .sidebar-logo { text-align: center; margin: 30px 0; } @media screen and (max-width: 991px) { .dashboard .sidebar-logo { margin-top: 32px; } } .dashboard .sidebar-logo img { max-width: 170px; max-height: 60px; } .dashboard .sidebar-menu { height: 100vh; background-color: hsl(var(--section-bg)); overflow-y: auto; z-index: 999; transition: 0.2s linear; width: 300px; border-radius: 0; position: fixed; left: 0; top: 0; align-items: start; flex-direction: row; /* Menu Title Css */ } .dashboard .sidebar-menu::-webkit-scrollbar { width: 2px; height: 2px; } .dashboard .sidebar-menu::-webkit-scrollbar-thumb { background: var(--base-gradient); } .dashboard .sidebar-menu__inner { width: 100%; } .dashboard .sidebar-menu.show-sidebar { transform: translateX(0); } @media screen and (max-width: 991px) { .dashboard .sidebar-menu { transform: translateX(-100%); z-index: 9992; border-radius: 0; } } .dashboard .sidebar-menu__close { position: absolute; top: 8px; right: 16px; color: hsl(var(--body-color)); font-size: 1.25rem; transition: 0.2s linear; cursor: pointer; z-index: 9; } .dashboard .sidebar-menu__close:active { top: 14px; } .dashboard .sidebar-menu__close:hover, .dashboard .sidebar-menu__close:focus { background-color: hsl(var(--white)); border-color: hsl(var(--white)); color: hsl(var(--base)); } .dashboard .sidebar-menu .menu-title { letter-spacing: 0.9px; padding: 12px 15px; color: #9da9b5; font-weight: 600; } .dashboard .sidebar-menu-list { margin-top: 40px; } .dashboard .sidebar-menu-list__item { margin-bottom: 6px; } .dashboard .sidebar-menu-list__item:last-child .sidebar-menu-list__link { border-bottom: 0; } .dashboard .sidebar-menu-list__item.active > a { background: var(--base-gradient); color: hsl(var(--white)); } .dashboard .sidebar-menu-list__item.has-dropdown.active > a { color: hsl(var(--white)); } .dashboard .sidebar-menu-list__item.has-dropdown.active > a:after { transform: rotate(90deg); right: 18px; color: hsl(var(--white)); } .dashboard .sidebar-menu-list__item.has-dropdown > a:after { position: absolute; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; text-align: center; background: 0 0; right: 16px; top: 14px; transition: 0.1s linear; } .dashboard .sidebar-menu-list__link { display: inline-block; text-decoration: none; position: relative; padding: 12px 24px; width: 100%; color: hsl(var(--white)); font-weight: 500; } .dashboard .sidebar-menu-list__link:hover { background: var(--base-gradient); } .dashboard .sidebar-menu-list__link.active { color: hsl(var(--base)); } .dashboard .sidebar-menu-list__link .icon { margin-right: 8px; text-align: center; border-radius: 4px; } .dashboard .sidebar-submenu { display: none; } .dashboard .sidebar-submenu.open-submenu { display: block; } .dashboard .sidebar-submenu-list { padding: 5px 0; } .dashboard .sidebar-submenu-list__item { margin-bottom: 6px; } .dashboard .sidebar-submenu-list__item.active > a { color: hsl(var(--white)); background: var(--base-gradient); } .dashboard .sidebar-submenu-list__link { padding: 12px 24px; display: block; color: hsl(var(--body-color)); color: hsl(var(--white)); font-weight: 500; margin-left: 20px; border-radius: 5px; position: relative; padding-left: 25px; } .dashboard .sidebar-submenu-list__link::before { left: 10px; width: 10px; height: 10px; background-color: transparent; border: 1px solid hsl(var(--white)/0.8); border-radius: 50%; } .dashboard .sidebar-submenu-list__link:hover { background: var(--base-gradient); } .dashboard .sidebar-submenu-list__link .icon { margin-right: 8px; text-align: center; border-radius: 4px; } /* ============ User Profile Css Start ============ */ /* Sidebar User Info Css */ .user-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid hsl(var(--base-two)/0.15); width: 100%; padding: 20px 24px; position: sticky; bottom: 0; left: 0; width: 299px; background-color: hsl(var(--white)); align-self: flex-end; } .user-profile-info { display: flex; flex-wrap: wrap; } .user-profile-info__icon { width: 50px; height: 50px; border-radius: 5px; overflow: hidden; border: 1px solid hsl(var(--black)/0.1); } .user-profile-info__content { width: calc(100% - 50px); padding-left: 15px; } .user-profile-info__name { margin-bottom: 0px; } .user-profile-info__desc { color: hsl(var(--body-color)); font-size: 15px; } /* ========= User Profile Css End ============== */ /* ====== profile account css start here =======*/ .profile-account { position: relative; z-index: 2; padding: 20px; text-align: center; margin: 0 24px; } .profile-account::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-mask-image: url(../images/shapes/d-1.png); -webkit-mask-size: 100% 100%; background: var(--base-gradient-two); mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .profile-account__icon { width: 26px; height: 26px; background: var(--base-gradient); border-radius: 50%; color: hsl(var(--black)); display: inline-flex; justify-content: center; align-items: center; } .profile-account__name { color: hsl(var(--white)); font-size: 18px; margin: 10px 0; } .profile-account .deposit__item { font-size: 18px; color: hsl(var(--white)); font-weight: 600; margin-bottom: 5px; } .profile-account .deposit__item:last-child { margin-bottom: 0; } .profile-account .deposit__item .wallet { font-size: 14px; font-weight: 400; } /* ====== profile account css start here ======*/ /* ================================= Dashboard Fluid Sidebar Css End =========================== */ /* ================================= Dashboard Css Start =========================== */ .dashboard { position: relative; /* User Info Css Start */ /* User Info Css End */ /*====== dashboard table css start here ======*/ /*====== dashboard table css start here ======*/ /*===== dashboard deposit form css start here =====*/ /*===== dashboard deposit form css start here =====*/ /*=== referral form css ===*/ } .dashboard__right { width: 100%; margin-left: 300px; background-color: hsl(var(--body-bg)); } @media screen and (max-width: 991px) { .dashboard__right { width: 100%; margin-left: 0; } } .dashboard .dropdown { display: inline-block !important; } .dashboard .dashboard-header { padding: 0 65px; background-color: hsl(var(--section-bg-two)); } @media screen and (max-width: 1499px) { .dashboard .dashboard-header { padding: 0 40px; } } @media screen and (max-width: 1399px) { .dashboard .dashboard-header { padding: 0 32px; } } @media screen and (max-width: 1199px) { .dashboard .dashboard-header { padding: 0 24px; } } @media screen and (max-width: 767px) { .dashboard .dashboard-header { padding: 0 16px; } } .dashboard .dashboard-header__inner { padding: 15px 0; gap: 10px; } @media screen and (max-width: 575px) { .dashboard .dashboard-header__inner { display: block; } } .dashboard .dashboard-header__right { gap: 15px; } @media screen and (max-width: 575px) { .dashboard .dashboard-header__right { margin-top: 20px; } } .dashboard .dashboard-header .bd-btn { padding: 10px 25px; background-color: hsl(var(--base)/0.1); color: hsl(var(--base)); border-radius: 5px; font-weight: 600; } .dashboard .dashboard-header .bd-btn:hover { background-color: hsl(var(--base)/0.2); } .dashboard .dashboard-header .bd-btn:active { position: relative; top: 2px; } .dashboard .dashboard-header .bd-btn .icon { margin-right: 5px; } .dashboard .dashboard-header .bd-btn.support { background-color: hsl(var(--primary)/0.1); color: hsl(var(--primary)); } .dashboard .dashboard-header .bd-btn.support:hover { background-color: hsl(var(--primary)/0.2); } .dashboard .dashboard-header .bd-btn.logout { background-color: hsl(var(--danger)/0.1); color: hsl(var(--danger)); } .dashboard .dashboard-header .bd-btn.logout:hover { background-color: hsl(var(--danger)/0.2); } .dashboard .user-info { position: relative; } .dashboard .user-info__button { position: relative; padding-right: 30px; cursor: pointer; } .dashboard .user-info__button::before { position: absolute; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; right: 0; top: 50%; transform: translateY(-50%); color: hsl(var(--white)); pointer-events: none; } .dashboard .user-info .user-info-dropdown { border-radius: 5px; overflow: hidden; transition: 0.25s linear; background-color: hsl(var(--section-bg)); box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); width: 200px; position: absolute; right: 0; z-index: 9; top: 100%; margin-top: 15px; transform: scale(0.95); visibility: hidden; opacity: 0; border: 1px solid hsl(var(--white)/0.08); } .dashboard .user-info .user-info-dropdown.show { visibility: visible; opacity: 1; transform: scale(1); } @media screen and (max-width: 991px) { .dashboard .user-info .user-info-dropdown { transform: unset !important; top: 43px !important; } } .dashboard .user-info .user-info-dropdown__item:last-child .user-info-dropdown__link { border-bottom: 0 !important; } .dashboard .user-info .user-info-dropdown__link { padding: 8px 16px !important; color: hsl(var(--white)) !important; margin-left: 0 !important; width: 100%; font-weight: 600; text-align: left; } .dashboard .user-info .user-info-dropdown__link.active { background-color: hsl(var(--base)); } .dashboard .user-info .user-info-dropdown__link:hover { background: var(--base-gradient); color: hsl(var(--white)) !important; } .dashboard .user-info .user-info-dropdown__link .icon { margin-right: 8px; } .dashboard .user-info__thumb { width: 40px; height: 40px; overflow: hidden; border-radius: 5px; } .dashboard .user-info__name { color: hsl(var(--white)); } .dashboard .dashboard-body { position: relative; padding: 56px; min-height: 100vh; overflow: hidden; } @media screen and (max-width: 1499px) { .dashboard .dashboard-body { padding: 56px 40px; } } @media screen and (max-width: 1399px) { .dashboard .dashboard-body { padding: 56px 32px; } } @media screen and (max-width: 1199px) { .dashboard .dashboard-body { padding: 40px 24px; } } @media screen and (max-width: 767px) { .dashboard .dashboard-body { padding: 32px 16px; } } .dashboard .dashboard-body.dashboard-item-plan { padding: 40px 50px; } @media screen and (max-width: 424px) { .dashboard .dashboard-body.dashboard-item-plan { padding: 32px 30px; } } .dashboard .dashboard-body__top { display: flex; justify-content: space-between; margin-bottom: 30px; align-items: center; flex-wrap: wrap; gap: 15px; } @media screen and (max-width: 575px) { .dashboard .dashboard-body__top { margin-bottom: 25px; } } .dashboard .dashboard-body__top .input-group .btn { background: var(--base-gradient); } .dashboard .dashboard-body__top .input-group .btn .btn-icon { font-size: 20px; } .dashboard .dashboard-body__title { font-weight: 400; margin-bottom: 0; font-family: var(--body-font); } .dashboard .dashboard-body__bar-icon { color: hsl(var(--white)); font-size: 1.5625rem; margin-bottom: 20px; cursor: pointer; } .dashboard .dashboard-widget { padding: 30px; border-radius: 8px; position: relative; z-index: 1; overflow: hidden; background-color: hsl(var(--section-bg)); transition: 0.25s ease-in-out; } .dashboard .dashboard-widget:hover { transform: translateY(-4px); } @media screen and (max-width: 1399px) { .dashboard .dashboard-widget { padding: 16px; } } @media screen and (max-width: 767px) { .dashboard .dashboard-widget { padding: 16px; } } .dashboard .dashboard-widget__icon { background: var(--base-gradient); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; font-size: 1.5rem; } .dashboard .dashboard-widget__icon img { width: 32px; } @media screen and (max-width: 575px) { .dashboard .dashboard-widget__icon { width: 40px; height: 40px; font-size: 1rem; } } .dashboard .dashboard-widget__number { margin-bottom: 0px; } .dashboard .dashboard-widget__text { color: hsl(var(--white)/0.9); margin-bottom: 5px; font-weight: 600; } @media screen and (max-width: 575px) { .dashboard .dashboard-widget__text { font-size: 0.8125rem; } } .dashboard .dashboard-widget__top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .dashboard .dashboard-widget__btn .btn { border: 1px solid hsl(var(--white)); } .dashboard .dashboard-table { margin-top: 30px; } .dashboard .dashboard-table__title { font-family: var(--body-font); font-weight: 500; } .dashboard .plan-item-wrapper { max-width: 1330px; } .dashboard .alert-item-wrapper .alert-item { display: flex; align-items: center; background-color: hsl(var(--section-bg)); margin-bottom: 24px; padding: 25px; border-radius: 8px; transition: 0.25s ease-in-out; } @media screen and (max-width: 575px) { .dashboard .alert-item-wrapper .alert-item { padding: 15px; } } .dashboard .dashboard-form { background-color: hsl(var(--section-bg)); padding: 26px 30px; border-radius: 12px; } @media screen and (max-width: 424px) { .dashboard .dashboard-form { padding: 20px; } } .dashboard .dashboard-form__btn .btn { padding: 18px 65px; } @media screen and (max-width: 575px) { .dashboard .dashboard-form__btn .btn { padding: 18px 40px; } } .dashboard .current-ranking { display: grid; grid-template-columns: auto auto auto auto; align-items: center; padding: 20px 0px; background-color: hsl(var(--section-bg)); border-radius: 12px; justify-content: center; gap: 80px 130px; align-items: center; } @media screen and (max-width: 1499px) { .dashboard .current-ranking { gap: 70px; } } @media screen and (max-width: 1399px) { .dashboard .current-ranking { padding: 20px 10px; gap: 45px; } } @media screen and (max-width: 1199px) { .dashboard .current-ranking { gap: 20px; } } @media screen and (max-width: 991px) { .dashboard .current-ranking { min-width: 800px; } } .dashboard .current-ranking .amount { font-weight: 600; } .dashboard .current-ranking__invest { display: flex; align-items: center; gap: 10px; } .dashboard .current-ranking__thumb { width: 60px; max-height: 90px; } .dashboard .current-ranking__content { width: calc(100% - 60px); } .dashboard .ranking-wrapper__top { overflow-x: auto; } .dashboard .ranking-wrapper-item { display: grid; grid-template-columns: auto auto auto auto; border-radius: 12px; justify-content: center; gap: 80px 195px; align-items: center; margin-top: 65px; } @media screen and (max-width: 1499px) { .dashboard .ranking-wrapper-item { gap: 80px 135px; } } @media screen and (max-width: 1399px) { .dashboard .ranking-wrapper-item { gap: 60px 110px; } } @media screen and (max-width: 1199px) { .dashboard .ranking-wrapper-item { gap: 60px 30px; } } @media screen and (max-width: 991px) { .dashboard .ranking-wrapper-item { grid-template-columns: auto auto auto; } } @media screen and (max-width: 575px) { .dashboard .ranking-wrapper-item { grid-template-columns: auto auto; } } .dashboard .ranking-status { text-align: center; } .dashboard .ranking-status__thumb img { height: 88px; max-width: 90px; object-fit: cover; } .dashboard .ranking-status__title { margin-top: 30px; font-weight: 600; font-family: var(--body-font); margin-bottom: 8px; } .dashboard .ticket-box { background-color: hsl(var(--section-bg)); padding: 26px 30px; border-radius: 12px; } .dashboard .transaction-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; gap: 20px; background-color: hsl(var(--section-bg)); padding: 30px; border-radius: 12px; } @media screen and (max-width: 1499px) { .dashboard .transaction-form { padding: 25px; } } @media screen and (max-width: 1399px) { .dashboard .transaction-form { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (max-width: 767px) { .dashboard .transaction-form { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 575px) { .dashboard .transaction-form { grid-template-columns: 1fr; } } .dashboard .transaction-form .filter { padding: 18px 30px; } .dashboard .referral-form { background-color: hsl(var(--section-bg)); padding: 26px 30px; border-radius: 12px; } .contact-list { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; } .contact-list__item { margin-right: 30px; position: relative; } @media screen and (max-width: 575px) { .contact-list__item { margin-right: 15px; } } .contact-list__item:last-child { padding-right: 0; margin-right: 0; } .contact-list__item-icon { color: hsl(var(--white)); border-radius: 50%; margin-right: 10px; display: inline-block; } .contact-list__link { color: hsl(var(--white)); font-weight: 400; font-family: var(--body-font); } .contact-list__link:hover .contact-list__link-icon { color: hsl(var(--white)); } /* ================================= Dashboard Css End =========================== */ /* =========================== Banner Section Start Here ========================= */ .banner-section { position: relative; z-index: 1; padding: 150px 100px 70px; overflow: hidden; } @media screen and (max-width: 1199px) { .banner-section { padding: 130px 70px 120px; } } @media screen and (max-width: 991px) { .banner-section { padding: 160px 20px 100px; } } @media screen and (max-width: 575px) { .banner-section { padding: 115px 0px 60px; } } .banner-section .banner-shape__one { position: absolute; top: 0; left: 0; z-index: -1; } .banner-wrapper__bottom { display: flex; margin-top: 40px; align-items: center; gap: 30px; } .banner-wrapper__bottom .thumb img { width: 100%; height: 100%; object-fit: cover; } .banner-wrapper__bottom .content .title { margin-bottom: 5px; } .banner-content__desc { max-width: 700px; margin-top: 30px; } .banner-section .shape-three { position: absolute; top: -150px; left: -150px; border-radius: 479px; background: #0D83F0; filter: blur(200px); z-index: -1; width: 479px; height: 479px; } .banner-section .shape-four { position: absolute; top: -150px; left: 350px; border-radius: 479px; background: rgba(0, 240, 255, 0.5); filter: blur(200px); z-index: -1; width: 479px; height: 479px; } .banner-section .shape { position: absolute; top: 30px; right: 439px; z-index: -1; } .banner-section .shape-one { position: absolute; top: -100px; right: -200px; z-index: -1; } .banner-section .shape-two { position: absolute; bottom: 270px; left: 200px; z-index: -1; } .banner-thumb-wrapper { text-align: right; position: relative; width: 40%; } @media screen and (max-width: 991px) { .banner-thumb-wrapper { width: 45%; } } @media screen and (max-width: 767px) { .banner-thumb-wrapper { display: none; } .banner-wrapper__bottom .content .title { font-size: 20px; } } .banner-thumb-wrapper__shape-one { position: absolute; top: 180px; left: 40px; animation: move-tb 3s linear infinite; } @media screen and (max-width: 1399px) { .banner-thumb-wrapper__shape-one { top: 150px; left: 10px; } } @media screen and (max-width: 1199px) { .banner-thumb-wrapper__shape-one { top: 110px; left: -25px; } } @media screen and (max-width: 1599px) { .banner-thumb-wrapper__shape-one img { width: 80%; } } @media screen and (max-width: 1399px) { .banner-thumb-wrapper__shape-one img { width: 60%; } } @media screen and (max-width: 1199px) { .banner-thumb-wrapper__shape-one img { width: 55%; } } .banner-thumb-wrapper__shape-two { position: absolute; top: 210px; right: 70px; animation: move-tb 4.5s linear infinite; } @media screen and (max-width: 1399px) { .banner-thumb-wrapper__shape-two { top: 170px; right: 40px; } } @media screen and (max-width: 1199px) { .banner-thumb-wrapper__shape-two { top: 120px; } } @media screen and (max-width: 1599px) { .banner-thumb-wrapper__shape-two img { width: 80%; } } @media screen and (max-width: 1399px) { .banner-thumb-wrapper__shape-two img { width: 60%; } } @media screen and (max-width: 1199px) { .banner-thumb-wrapper__shape-two img { width: 55%; } } @keyframes move-tb { 0% { transform: translateY(-10px); } 50% { transform: translateY(30px); } 100% { transform: translateY(-10px); } } .banner-main-wrapper { display: flex; gap: 30px; justify-content: space-between; } .banner-wrapper { width: 60%; } @media screen and (max-width: 991px) { .banner-wrapper { width: 55%; } } @media screen and (max-width: 767px) { .banner-wrapper { width: 100%; } } .banner-content__title { line-height: 1; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 991px) { .banner-content__title { line-height: 1.2; } } .banner-content__title .title-style { background: var(--base-gradient); -background-clip: text; -webkit-text-stroke-color: transparent; -webkit-text-stroke-width: 0.015625em; -webkit-background-clip: text; letter-spacing: 4px; color: #0d3a63; font-size: clamp(6.25rem, 3.75rem + 12.5vw, 18.75rem); } @media (max-width: 1700px) { .banner-content__title .title-style { font-size: 200px; } } @media screen and (max-width: 1499px) { .banner-content__title .title-style { font-size: 170px; } } @media screen and (max-width: 1199px) { .banner-content__title .title-style { font-size: 150px; } } @media screen and (max-width: 991px) { .banner-content__title .title-style { font-size: 110px; } } @media screen and (max-width: 424px) { .banner-content__title .title-style { font-size: 95px; } } .banner-content__title .title-style__two { background: hsl(var(--white)); -background-clip: text; -webkit-text-stroke-color: transparent; -webkit-text-stroke-width: 0.03125em; -webkit-background-clip: text; letter-spacing: 4px; color: #0f528a; letter-spacing: 4px; font-size: 100px; } .banner-wrapper__bottom .thumb { width: 220px; } .banner-wrapper__bottom .content { width: calc(100% - 220px); } @media (max-width: 1700px) { .banner-content__title .title-style__two { font-size: 100px; } } @media (max-width: 1600px) { .banner-content__title .title-style__two { font-size: 90px; } } @media screen and (max-width: 1499px) { .banner-content__title .title-style__two { font-size: 75px; } } @media screen and (max-width: 1399px) { .banner-content__title .title-style__two { font-size: 68px; } } @media screen and (max-width: 1199px) { .banner-content__title .title-style__two { font-size: 60px; } } @media screen and (max-width: 991px) { .banner-content__title .title-style__two { font-size: 42px; } .banner-wrapper__bottom .thumb { width: 180px; } .banner-wrapper__bottom .content { width: calc(100% - 180px); } .banner-wrapper__bottom { gap: 20px; } .banner-wrapper__bottom .content .title { font-size: 20px; } } @media screen and (max-width: 575px) { .banner-content__title .title-style__two { font-size: 35px; } .banner-wrapper__bottom .thumb { width: 120px; } .banner-wrapper__bottom .content { width: calc(100% - 120px); } .banner-wrapper__bottom { gap: 10px; } .banner-wrapper__bottom .content .title { margin-bottom: 0; } .banner-wrapper__bottom .content .text { font-size: 14px; } } @media screen and (max-width: 374px) { .banner-content__title .title-style__two { font-size: 30px; } .banner-wrapper__bottom .content .text { font-size: 13px; } .banner-wrapper__bottom .thumb { width: 100px; } .banner-wrapper__bottom .content { width: calc(100% - 100px); } .banner-wrapper__bottom .content .title { font-size: 16px; } } .banner-content__button { margin-top: 50px; } @media screen and (max-width: 1199px) { .banner-content__button { margin-top: 30px; } } @media screen and (max-width: 575px) { .banner-content__button .btn { padding: 14px 20px; font-size: 16px; } } @media screen and (max-width: 424px) { .banner-content__button .btn { width: 100%; } .banner-content__button { flex-direction: column; } } /*========= counter up section css start here =========*/ .counterup-item { display: flex; gap: 50px; margin-top: 60px; } @media screen and (max-width: 991px) { .counterup-item { gap: 30px; } } @media screen and (max-width: 575px) { .counterup-item { gap: 20px; margin-top: 40px; } } .counterup-item__content { position: relative; } .counterup-item__content::after { position: absolute; content: ""; top: 50%; right: -25px; width: 1px; height: 100%; background: var(--base-gradient); transform: translateY(-50%); } @media screen and (max-width: 991px) { .counterup-item__content::after { right: -15px; } } @media screen and (max-width: 575px) { .counterup-item__content::after { right: -10px; } } .counterup-item__content:last-child::after { display: none; } .counterup-item__title { font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 0; gap: 4px; background: var(--base-gradient); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } @media screen and (max-width: 575px) { .counterup-item__title { font-size: 20px; } } .counterup-item__text { font-weight: 600; font-size: 1rem; color: hsl(var(--white)); } @media screen and (max-width: 575px) { .counterup-item__text { font-size: 14px; } } @media screen and (max-width: 424px) { .counterup-item__text { font-size: 10px; } } @media screen and (max-width: 767px) { .counterup-item .counterup-wrapper { flex-direction: column; } } /*========= counter up section css end here =========*/ /* =========================== Banner Section End Here ========================= */ /*=============== plan section css start here ===============*/ @media screen and (max-width: 767px) { .plan-section { padding: 60px; background-color: hsl(var(--section-bg)); } } @media screen and (max-width: 424px) { .plan-section { padding: 60px 20px; } } .plan-section__wrapper { position: relative; z-index: 1; padding: 120px 90px; border-radius: 12px; -webkit-mask-image: url(../images/shapes/s-4.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .plan-section__wrapper.wrapper-two { -webkit-mask-image: url(../images/shapes/pl-1.png); } @media screen and (max-width: 991px) { .plan-section__wrapper { padding: 120px 50px; } } @media screen and (max-width: 767px) { .plan-section__wrapper { -webkit-mask-image: none !important; background-color: none !important; padding: 0; } } .plan-section__wrapper .shape-one { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); z-index: -1; height: 100%; } .plan-section__wrapper .shape-one img { min-height: 300px; } .plan-item-wrapper { display: flex; gap: 60px 100px; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 991px) { .plan-item-wrapper { gap: 50px 70px; } } .plan-item { padding: 30px 35px 70px; border-radius: 10px; position: relative; z-index: 1; width: calc(32.2580645161% - 60px); } @media screen and (max-width: 1399px) { .plan-item { width: calc(50% - 60px); } } @media screen and (max-width: 1199px) { .plan-item { width: calc(50% - 60px); } } @media screen and (max-width: 991px) { .plan-item { padding: 30px 20px 70px; } } @media screen and (max-width: 767px) { .plan-item { width: 100%; } } @media screen and (max-width: 424px) { .plan-item { padding: 30px 15px 60px; } } .plan-item::before { border-radius: 10px; -webkit-mask-image: url(../images/shapes/s-2.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: hsl(var(--section-bg-three)); position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; } .plan-item::after { border-radius: 10px; -webkit-mask-image: url(../images/shapes/s-2.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--base-gradient-two); position: absolute; top: 16px; left: 50%; width: calc(100% - 25px); height: 100%; content: ""; z-index: -2; transform: translateX(-50%); } .plan-item__title { text-align: center; margin-bottom: 20px; } .plan-item__plan { position: relative; background: var(--base-gradient); padding: 20px; text-align: center; width: calc(100% + 140px); margin-left: -70px; } @media screen and (max-width: 991px) { .plan-item__plan { width: calc(100% + 90px); margin-left: -45px; } } @media screen and (max-width: 424px) { .plan-item__plan { width: calc(100% + 60px); margin-left: -30px; } } .plan-item__plan::before { position: absolute; content: ""; top: 100%; left: 0; clip-path: polygon(100% 0, 0 0, 100% 100%); -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%); background-color: hsl(var(--base-two)); width: 100px; height: 43px; z-index: -2; } .plan-item__plan::after { position: absolute; content: ""; top: 100%; right: 0; clip-path: polygon(100% 0, 0 0, 0 100%); -webkit-clip-path: polygon(100% 0%, 0 0, 0 100%); background-color: hsl(var(--base-two)); width: 100px; height: 43px; z-index: -2; } .plan-item__rate { display: block; font-size: 40px; color: hsl(var(--white)); text-align: center; margin-bottom: 20px; font-weight: 700; } .plan-item .amount-list { text-align: center; margin-bottom: 24px; } .plan-item .amount-list__item { color: hsl(var(--white)); font-weight: 700; } .plan-item__btn { text-align: center; margin-top: 30px; } .plan-list__item { display: flex; justify-content: space-between; gap: 5px; } .plan-item .plan-list__item:not(:last-child) { font-size: 1rem; padding-bottom: 16px; border-bottom: 1px solid hsl(var(--white)/0.09); margin-bottom: 16px; } .plan-item .plan-list__icon { background: var(--base-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*=============== plan section css end here ===============*/ /*=============== account method css start here ===============*/ .account-method { position: relative; z-index: 2; padding: 60px 40px; overflow: hidden; } @media screen and (max-width: 424px) { .account-method { padding: 30px 20px; } } .account-method .select-plan { position: relative; z-index: 2; overflow: hidden; border-radius: 4px; } .account-method .select-plan .form--select { background: #242A3C; border: 1px solid hsl(var(--base-two)); } .account-method .select-plan .form--select:focus { border-color: hsl(var(--base)); } .account-method::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: hsl(var(--body-bg)); -webkit-mask-image: url(../images/shapes/s-6.png); -webkit-mask-size: 100% 100%; background: var(--base-gradient); mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; z-index: -1; } .account-method::before { position: absolute; content: ""; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); -webkit-mask-image: url(../images/shapes/s-7.png); -webkit-mask-size: 100% 100%; background: var(--base-gradient); mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: hsl(var(--section-bg)); z-index: -2; } .account-method .profit { font-weight: 700; color: hsl(var(--white)); } /*=============== account method css end here ===============*/ /*========== investment section css start here ==========*/ .investment-section { overflow-x: hidden; } .investment-section__wrapper { position: relative; z-index: 2; } .investment-section .investment-shape { position: absolute; top: 100px; left: 100px; stroke-width: 200px; background-color: rgba(0, 240, 255, 0.5); filter: blur(100px); z-index: -1; width: 672px; height: 240px; transform: rotate(10deg); } @media screen and (max-width: 991px) { .investment-section .investment-shape { top: 150px; left: -50px; } } @media screen and (max-width: 575px) { .investment-section .investment-shape { top: 200px; left: -100px; transform: rotate(267deg); } } .investment-section .investment-shape__two { position: absolute; top: 100px; right: 0; width: 500px; height: 180px; transform: rotate(360deg); background: linear-gradient(50deg, #010BFF, rgba(0, 240, 255, 0.5)); stroke-width: 200px; filter: blur(150px); z-index: -1; } @media screen and (max-width: 991px) { .investment-section .investment-shape__two { top: 200px; } } @media screen and (max-width: 575px) { .investment-section .investment-shape__two { top: 650px; right: -100px; transform: rotate(267deg); } } .investment-plan { border: 1px solid hsl(var(--white)/0.1); padding: 40px 35px; border-radius: 24px; display: flex; gap: 15px; background-color: hsl(var(--section-bg)/0.18); transition: 0.2s linear; height: 100%; } @media screen and (max-width: 1199px) { .investment-plan { padding: 30px 20px; } } .investment-plan:hover { border-color: hsl(var(--base)); } .investment-plan__thumb { width: 45px; height: 45px; } .investment-plan__content { width: calc(100% - 47px); } .investment-plan__title { margin-bottom: 10px; } .investment-plan__desc { color: hsl(var(--white)); } /*========== investment section css end here ==========*/ /*=================== referral section css start here ===================*/ .referral-section { position: relative; overflow: hidden; } .referral-section__title { -webkit-text-fill-color: #0e1839; -webkit-text-stroke: 1px hsl(var(--white)/0.2); font-size: 100px; position: absolute; right: -148px; top: 48%; text-align: center; max-width: 700px; transform: translateY(-50%) rotate(90deg); line-height: 1; z-index: -1; animation: tc 5s ease-in-out infinite; } @media (max-width: 1700px) { .referral-section__title { font-size: 90px; right: -230px; } } @media screen and (max-width: 1499px) { .referral-section__title { font-size: 70px; right: -250px; } } @media screen and (max-width: 991px) { .referral-section__title { top: 60%; } } @media screen and (max-width: 575px) { .referral-section__title { display: none; } } .referral-level { padding: 20px 40px; padding-left: 120px; border-radius: 50px; background: var(--base-gradient); position: relative; z-index: 1; margin-bottom: 60px; } @media screen and (max-width: 575px) { .referral-level { padding: 20px; padding-left: 140px; } } @media screen and (max-width: 424px) { .referral-level { padding-left: 120px; } } .referral-level:last-child { margin-bottom: 0; } .referral-level::after { position: absolute; content: ""; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background: hsl(var(--section-bg)); z-index: -1; border-radius: 50px; } .referral-level__thumb { width: 125px; height: 125px; border-radius: 50%; position: absolute; top: 50%; left: -62px; transform: translateY(-50%); background: var(--base-gradient); display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 991px) { .referral-level__thumb { left: -15px; } } @media screen and (max-width: 575px) { .referral-level__thumb { width: 100px; height: 100px; left: 0; } } .referral-level__thumb::after { position: absolute; content: ""; top: 15px; left: 15px; border: 2px dashed hsl(var(--white)); width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 50%; animation: spain 8.5s infinite linear; } .referral-level__thumb img { width: 48px; } @media screen and (max-width: 575px) { .referral-level__thumb img { width: 40px; } } .referral-level__rate { margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; } .referral-level__rate .text-style { font-size: 48px; } @media screen and (max-width: 424px) { .referral-level__rate .text-style { font-size: 40px; } } @keyframes spain { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } /*=================== referral section css end here ===================*/ /*===================== how work section css start here =====================*/ .how-work-section { position: relative; z-index: 1; overflow: hidden; } .how-work-section__title { -webkit-text-fill-color: #0e1839; -webkit-text-stroke: 1px hsl(var(--white)/0.2); font-size: 100px; position: absolute; left: -198px; top: 50%; text-align: center; max-width: 900px; margin: 0 auto; transform: translateY(-50%) rotate(270deg); line-height: 1; z-index: -1; animation: tc 5s ease-in-out infinite; } @media (max-width: 1700px) { .how-work-section__title { font-size: 90px; left: -230px; } } @media screen and (max-width: 1499px) { .how-work-section__title { font-size: 60px !important; left: -150px; } } @media screen and (max-width: 991px) { .how-work-section__title { top: 60%; left: -180px; } } @media screen and (max-width: 575px) { .how-work-section__title { display: none; } } .how-work-section .work-list { text-align: center; } .how-work-section .work-list__item { border: 1px solid hsl(var(--white)/0.1); padding: 40px 40px 70px; border-radius: 135px; background-color: hsl(var(--section-bg)); } @media screen and (max-width: 575px) { .how-work-section .work-list__item { border-radius: 10px; padding: 30px 25px; } } .how-work-section .work-list__number { margin-bottom: 20px; line-height: 1; } @media screen and (max-width: 575px) { .how-work-section .work-list__number { margin-bottom: 5px; } } .how-work-section .work-list__thumb { width: 190px; height: 190px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--base-gradient); margin: 0 auto; } @media screen and (max-width: 1499px) { .how-work-section .work-list__thumb { width: 150px; height: 150px; } } @media screen and (max-width: 575px) { .how-work-section .work-list__thumb { width: 100px; height: 100px; } } .how-work-section .work-list__thumb img { max-width: 60px; } @media screen and (max-width: 575px) { .how-work-section .work-list__thumb img { max-width: 40px; } } .how-work-section .work-list__content { margin-top: 25px; } .how-work-section .work-list__desc { max-width: 200px; margin: 0 auto; text-align: center; } .how-work-section [class*=col-]:nth-child(2n+2) .work-list { transform: translateY(100px); } @media screen and (max-width: 1199px) { .how-work-section [class*=col-]:nth-child(2n+2) .work-list { transform: translate(0); } } /*===================== how work section css end here =====================*/ /* ================================ Testimonails Section Css Start ============================= */ .testimonials { position: relative; overflow: hidden; z-index: 1; } .testimonials__title { -webkit-text-fill-color: #0e1839; -webkit-text-stroke: 1px hsl(var(--white)/0.2); font-size: 100px; position: absolute; right: -148px; top: 48%; text-align: center; max-width: 700px; transform: translateY(-50%) rotate(90deg); line-height: 1; z-index: -1; animation: tc 5s ease-in-out infinite; } @media (max-width: 1700px) { .testimonials__title { font-size: 90px; right: -230px; } } @media screen and (max-width: 1499px) { .testimonials__title { font-size: 70px; right: -250px; } } @media screen and (max-width: 991px) { .testimonials__title { top: 60%; } } @media screen and (max-width: 575px) { .testimonials__title { display: none; } } .testimonials__shape-one { position: absolute; top: 0; left: 0; z-index: -1; } .testimonials__shape-two { position: absolute; top: 50%; right: 10%; z-index: -1; width: 582px; height: 582px; transform: rotate(-16deg); border-radius: 582px; background: linear-gradient(48deg, rgba(47, 0, 255, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(200px); } .testimonials__shape-three { position: absolute; top: 60%; left: 15%; border-radius: 429px; background: rgba(13, 131, 240, 0.6); filter: blur(200px); width: 429px; height: 429px; transform: rotate(-16deg); z-index: -1; } .testimonials__shape-four { position: absolute; top: 40%; left: 35%; border-radius: 429px; background: rgba(13, 131, 240, 0.6); filter: blur(200px); width: 429px; height: 429px; transform: rotate(-16deg); z-index: -1; } .testimonials-card { padding: 0 20px; height: 100%; } .testimonial-item { border: 1px solid hsl(var(--white)/0.1); padding: 50px 40px; border-radius: 200px 200px 0 0; position: relative; height: 100%; text-align: center; z-index: 2; overflow: hidden; } .testimonial-item::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(171deg, #121622 3.02%, rgba(18, 22, 34, 0) 56.95%); } @media screen and (max-width: 424px) { .testimonial-item { padding: 25px 15px; } } .testimonial-item__thumb { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto; } @media screen and (max-width: 424px) { .testimonial-item__thumb { width: 60px; height: 60px; } } .testimonial-item__details { margin-top: 30px; } .testimonial-item__name { margin-bottom: 0; color: hsl(var(--white)); } .testimonial-item__desc { margin-top: 25px; font-size: 22px; color: hsl(var(--white)); line-height: 2; } @media screen and (max-width: 424px) { .testimonial-item__desc { margin-top: 10px; padding-top: 10px; font-size: 16px; } } .testimonial-item__icon { font-size: 50px; position: relative; z-index: 1; margin-top: 35px; -webkit-mask-image: url(../images/icons/t-1.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; background: var(--base-gradient); mask-repeat: no-repeat; } @media screen and (max-width: 575px) { .testimonial-item__icon { margin-top: 20px; } } .testimonial-slider .slick-list .slick-track .slick-slide:nth-child(even) .testimonial-item { border-radius: 0 0 200px 200px; } /* ================================ Testimonails Section Css End ============================= */ /*================= investor scss start here =================*/ .investor-section { background-color: hsl(var(--section-bg-two)); } .investor-item { border: 2px solid hsl(var(--white)/0.1); background: linear-gradient(261deg, rgba(27, 32, 48, 0.4) 4.91%, rgba(27, 32, 48, 0) 71.61%); border-radius: 16px; padding: 24px; transition: 0.3s linear; height: 100%; } @media screen and (max-width: 991px) { .investor-item { padding: 18px; } } .investor-item__info { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .investor-item__name { margin-bottom: 0; } .investor-item__username { margin-bottom: 4px; } .investor-item__number { font-size: 40px; color: hsl(var(--white)/0.2); font-weight: 700; transition: 0.3s linear; } @media screen and (max-width: 991px) { .investor-item__number { font-size: 24px; } } .investor-item__amount { margin-bottom: 0; } .investor-item:hover { border-color: hsl(var(--base)); } .investor-item:hover .investor-item__number { color: hsl(var(--base)); } /*================= investor scss end here =================*/ /* ================================= Blog Section Css Start Here ============================= */ .blog-section { position: relative; z-index: 1; overflow: hidden; } .blog-section .shape-one { position: absolute; bottom: -480px; left: 200px; width: 500px; height: 500px; z-index: -1; border-radius: 721px; background: linear-gradient(48deg, rgba(0, 56, 255, 0.4) 14.67%, rgba(0, 182, 255, 0.4) 74.83%); filter: blur(150px); } .blog-item { box-shadow: var(--box-shadow); border-radius: 15px; overflow: hidden; height: 100%; } .blog-item:hover .blog-item__thumb img { transform: scale(1.05); } .blog-item__thumb { overflow: hidden; border-radius: 15px 15px 0 0; max-height: 300px; } .blog-item__thumb-link { width: 100%; height: 100%; } .blog-item__thumb-link img { transition: 0.2s linear; } .blog-item__content { background-color: hsl(var(--section-bg)); padding: 25px 18px; height: 100%; } @media screen and (max-width: 767px) { .blog-item__content { padding: 20px; } } @media screen and (max-width: 424px) { .blog-item__content { padding: 15px; } } .blog-item__title { margin-top: 10px; margin-bottom: 0; } @media screen and (max-width: 575px) { .blog-item__title { margin-top: 15px; } } .blog-item__title-link { color: hsl(var(--heading-color)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.2s linear; } .blog-item__title-link:hover { background: var(--base-gradient); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } /* Text Border Bottom Animation Css Ends */ /* ================================= Blog Section Css End Here ================================= */ /*============== about section css start here ==============*/ .about-section .section-heading__desc { max-width: max-content; margin-bottom: 16px; } .about-section .section-heading__desc:last-child { margin-bottom: 0; } /*============== about section css end here ==============*/ /*========================== contact section css start here ==========================*/ .contact-section { position: relative; z-index: 1; } .contact-section__title { position: absolute; z-index: -1; -webkit-text-fill-color: #0e1839; -webkit-text-stroke: 1px hsl(var(--white)/0.2); font-size: 100px; position: absolute; left: -130px; top: 50%; text-align: center; max-width: 900px; margin: 0 auto; transform: translateY(-50%) rotate(270deg); line-height: 1; z-index: -1; animation: tc 5s ease-in-out infinite; } @media screen and (max-width: 1599px) { .contact-section__title { left: -200px; } } @media screen and (max-width: 1399px) { .contact-section__title { display: none; } } .contact-section .contact-item { border: 1px solid hsl(var(--white)/0.1); padding: 40px 40px 70px; border-radius: 10px; background-color: hsl(var(--section-bg)); height: 100%; } @media screen and (max-width: 575px) { .contact-section .contact-item { padding: 30px; } } .contact-section .contact-item__thumb { width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--base-gradient); margin: 0 auto; } .contact-section .contact-item__thumb img { width: 40px; } @media screen and (max-width: 991px) { .contact-section .contact-item__thumb { width: 80px; height: 80px; } .contact-section .contact-item { padding: 30px; } .contact-section .contact-item__thumb img { width: 30px; } } @media screen and (max-width: 575px) { .contact-section .contact-item__thumb { width: 60px; height: 60px; } } .contact-section .contact-item__content { margin-top: 25px; text-align: center; } .contact-section .contact-item__desc > a { color: hsl(var(--body-color)); } .contact-form { background-color: hsl(var(--section-bg)); padding: 50px; border-radius: 45px; margin-top: 90px; } @media screen and (max-width: 424px) { .contact-form { padding: 30px; margin-top: 50px; } } @media screen and (max-width: 374px) { .contact-form { padding: 30px 20px; } } /*========================== contact section css end here ==========================*/ /* =========================================== Account Css Start =========================*/ .account-inner { position: relative; } .account-form-wrapper { background-color: hsl(var(--section-bg)); padding: 0px 100px; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } @media (max-width: 1800px) { .account-form-wrapper { padding: 0 70px; } } @media screen and (max-width: 1599px) { .account-form-wrapper { padding: 40px 30px; } } @media screen and (max-width: 1399px) { .account-form-wrapper { padding: 35px 25px; } } @media screen and (max-width: 767px) { .account-form-wrapper { padding: 30px 60px; } } @media screen and (max-width: 424px) { .account-form-wrapper { padding: 30px; } } .account-form { margin-top: 50px; } @media screen and (max-width: 1399px) { .account-form { margin-top: 40px; } } .account-form__text { text-align: center; margin-bottom: 40px; } .account-form__logo img { max-width: 200px; } .account-form__title { text-align: center; margin-bottom: 30px; } @media screen and (max-width: 1399px) { .account-form__title { margin-bottom: 20px; } } .account-form__forgot-password { background-color: hsl(var(--section-bg-two)/0.7); padding: 40px; border-radius: 30px; margin-top: 50px; } .account-form__forgot-password-title { text-align: center; margin-bottom: 35px; } .account-form__forgot-password-desc { margin-bottom: 35px; text-align: center; } .login-page { margin-top: 20px; text-align: center; } .login-page__link { transition: 0.2s; } .login-page__link:hover { color: hsl(var(--base)); } .signup-bottom { margin-top: 20px; } .signup-bottom__text { text-align: center; margin: 0 auto; color: hsl(var(--white)/0.6); max-width: 380px; } .signup-bottom__link { color: hsl(var(--white)/0.6); text-decoration: underline; } @media screen and (max-width: 575px) { .social-login { width: 100%; } } .social-login .btn { background-color: hsl(var(--form-bg)); font-size: 1rem; border: 1px solid hsl(var(--white)/0.08); color: hsl(var(--white)/0.6) !important; padding: 17px 25px; border-radius: 8px; } @media screen and (max-width: 1399px) { .social-login .btn { padding: 15px 20px; font-size: 14px; } } @media (max-width: 767px) { .social-login .btn { padding: 12px 8px; font-size: 12px; } } @media screen and (max-width: 575px) { .social-login .btn { width: 100%; } } .social-login .btn:hover, .social-login .btn:focus { border-color: hsl(var(--base)); } .social-login__icon { background: var(--base-gradient); margin-right: 6px; font-size: 20px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } .email-system { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .other-option { position: relative; margin-top: 16px; font-family: var(--heading-font); font-weight: 700; text-align: center; margin-bottom: 30px; } .other-option::before { position: absolute; content: ""; left: 0; top: 50%; width: 45%; border: 0.1px solid hsl(var(--white)/0.1); } .other-option::after { position: absolute; content: ""; right: 0; top: 50%; width: 45%; border: 0.1px solid hsl(var(--white)/0.1); } .forgot-password { margin-top: 20px; text-align: center; } .forgot-password__link { color: hsl(var(--white)/0.6); } /* ============================================ Account Css End ====================================*/ .account-inner { position: relative; display: flex; } .account-inner__left { width: 40%; position: relative; } @media screen and (max-width: 1199px) { .account-inner__left { width: 45%; } } @media screen and (max-width: 991px) { .account-inner__left { width: 50%; } } @media screen and (max-width: 767px) { .account-inner__left { width: 100%; } } .account-inner__right { width: 60%; min-height: 100vh; } @media screen and (max-width: 1199px) { .account-inner__right { width: 55%; } } @media screen and (max-width: 991px) { .account-inner__right { width: 50%; } } @media screen and (max-width: 767px) { .account-inner__right { display: none; } } .account-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; } .account-thumb img { width: 100%; height: 100%; object-fit: cover; } .py-10 { padding: 10px 0; } .py-15 { padding: 15px 0; } .py-20 { padding: 20px 0; } .py-25 { padding: 25px 0; } .py-30 { padding: 30px 0; } .py-35 { padding: 35px 0; } .py-40 { padding: 40px 0; } .py-45 { padding: 45px 0; } .py-50 { padding: 50px 0; } .py-55 { padding: 55px 0; } .py-60 { padding: 60px 0; } .py-65 { padding: 65px 0; } .py-70 { padding: 70px 0; } .py-75 { padding: 75px 0; } .py-80 { padding: 80px 0; } .py-85 { padding: 85px 0; } .py-90 { padding: 90px 0; } .py-95 { padding: 95px 0; } .py-100 { padding: 100px 0; } .py-105 { padding: 105px 0; } .py-110 { padding: 110px 0; } .py-115 { padding: 100px 0; } .py-125 { padding: 125px 0; } .py-130 { padding: 130px 0; } .py-135 { padding: 135px 0; } .py-140 { padding: 140px 0; } .py-145 { padding: 145px 0; } .py-150 { padding: 150px 0; } .px-5 { padding: 0 5px; } .px-10 { padding: 0 10px; } .px-15 { padding: 0 15px; } .px-20 { padding: 0 20px; } .px-25 { padding: 0 25px; } .px-30 { padding: 0 30px; } .px-35 { padding: 0 35px; } .px-40 { padding: 0 40px; } .px-45 { padding: 0 45px; } .px-50 { padding: 0 50px; } .px-55 { padding: 0 55px; } .px-60 { padding: 0 60px; } .px-65 { padding: 0 65px; } .px-70 { padding: 0 70px; } .px-75 { padding: 0 75px; } .px-80 { padding: 0 80px; } .px-85 { padding: 0 85px; } .px-90 { padding: 0 90px; } .px-95 { padding: 0 95px; } .px-100 { padding: 0 100px; } .px-105 { padding: 0 105px; } .px-110 { padding: 0 110px; } .px-115 { padding: 0 100px; } .px-120 { padding: 0 115px; } .px-125 { padding: 0 125px; } .px-130 { padding: 0 130px; } .px-135 { padding: 0 135px; } .px-140 { padding: 0 140px; } .px-145 { padding: 0 145px; } .px-150 { padding: 0 150px; } .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 100px; } .pt-120 { padding-top: 115px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 100px; } .pb-120 { padding-bottom: 115px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 100px; } .pl-120 { padding-left: 115px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 100px; } .pr-120 { padding-right: 115px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } /*# sourceMappingURL=main.css.map */ .sidebar-menu-list__item.has-dropdown.active { transition: .2s; } /* custom border color css */ .border { border-radius: 4px !important; } .border--white { border-color: hsl(var(--white)/.1) !important; } .border--primary { border-color: hsl(var(--primary)/.1) !important; } .border--success { border-color: hsl(var(--success)/.1) !important; } .border--base { border-color: hsl(var(--base)/.1) !important; } .fit-image, .latest-blog__thumb img, .blog-details__thumb img { width: 100%; height: 100%; object-fit: cover; } .blog-sidebar-wrapper { position: sticky; top: 100px; } /* ============ Sidebar search box ============= */ .search-box { position: relative; } .search-box__button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #000; } /* ================== Sidebar Box & Title =================== */ .blog-sidebar { background-color: hsl(var(--section-bg)); padding: 30px 20px; border-radius: 5px; margin-bottom: 30px; } .blog-sidebar:last-of-type { margin-bottom: 0; } @media screen and (max-width: 575px) { .blog-sidebar { padding: 20px 15px; } } .blog-sidebar__title { position: relative; padding-bottom: 10px; color: hsl(var(--white)); } .blog-sidebar__title::before { position: absolute; content: ""; width: 60px; height: 2px; background-color: hsl(var(--white)); left: 0; bottom: 0px; } /* ========================= Category & Tags List Style ========================= */ .text-list { /* Category */ /* Style Tag */ } .text-list.style-category .text-list__item { border-bottom: 1px dashed #000; } .text-list.style-category .text-list__item:last-child { border-bottom: 0; } .text-list.style-category .text-list__link { color: #000; } .text-list.style-category .text-list__link:hover { color: #000; } .text-list.style-tag { display: flex; flex-direction: row; flex-wrap: wrap; margin: -7px; } .text-list.style-tag .text-list__item { padding: 7px; } .text-list.style-tag .text-list__link { color: #000; border: 1px solid #000; padding: 6px 20px; border-radius: 3px; } .text-list.style-tag .text-list__link.active { background-color: #000; border-color: #000; color: #000; } .text-list.style-tag .text-list__link:hover { background-color: #000; border-color: #000; color: #000; } /* ======================== Latest Blog Css======================== */ .latest-blog { display: flex; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid hsl(var(--white)/.2); } .latest-blog:last-of-type { padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0; } .latest-blog__thumb { width: 80px; max-height: 80px; display: flex; border-radius: 5px; overflow: hidden; } @media screen and (max-width: 424px) { .latest-blog__thumb { width: 60px; } } .latest-blog__thumb a { display: block; height: 100%; width: 100%; } .latest-blog__content { width: calc(100% - 80px); padding-left: 15px; } @media screen and (max-width: 424px) { .latest-blog__content { width: calc(100% - 60px); } } .latest-blog__title { margin-bottom: 5px; } .latest-blog__title a { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .latest-blog__title a:hover { color: hsl(var(--base)); } /* ========================= Latest Blog Css End ===================*/ /* =========================================== Blog Details Css Start ==============================*/ .blog-details { height: 100%; } .blog-details__thumb { height: 450px; max-height: 100%; border-radius: 8px 8px 0 0; overflow: hidden; } @media screen and (max-width: 991px) { .blog-details__thumb { height: 350px; } } @media screen and (max-width: 767px) { .blog-details__thumb { height: 300px; } } .blog-details__content { padding: 35px; background-color: hsl(var(--section-bg)); border-radius: 0 0 8px 8px; } @media screen and (max-width: 767px) { .blog-details__content { padding: 30px 20px; } } @media screen and (max-width: 575px) { .blog-details__content { padding: 25px 15px; } } .blog-details__title { margin-top: 20px; margin-bottom: 15px; } .blog-details__desc { margin-bottom: 15px; } .blog-details__share-title { margin-bottom: 0; } .blog-details__share { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid hsl(var(--white)/.2); padding-top: 20px; } .cookies-card { width: 520px; padding: 30px; color: #dddddd; position: fixed; bottom: 15px; left: 15px; z-index: 999999; transition: all .5s; background: hsl(var(--body-bg)); border-radius: 5px; border: 2px solid hsl(var(--base)/ 0.5); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; /* background-color: hsl(var(--primary)/.1); */ box-shadow: 0 0 15px hsl(var(--base)/ 0.5); } .cookies-card.hide{ bottom: -500px !important; } .radius--10px { border-radius: 10px; } .cookies-card__icon { width: 55px; height: 55px; border-radius: 50%; background-color: #6e6f70; color: #fff; font-size: 32px; display: inline-flex; justify-content: center; align-items: center; } .cookies-card__content { margin-bottom: 0; } .cookies-btn { color: #363636; text-decoration: none; padding: 10px 35px; margin: 3px 5px; display: inline-block; border-radius: 999px; } .cookies-btn:hover { color: #363636; } @media (max-width: 767px) { .cookies-card { width: 100%; left: 0; bottom: 0; font-size: 14px; padding: 15px; } } /* ========================================== Blog Details Css End ======================================*/ .section-wraper{ padding-top: 120px; padding-bottom: 120px; } @media (max-width: 1199px) { .section-wraper{ padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 991px) { .section-wraper{ padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 767px) { .section-wraper{ padding-top: 60px; padding-bottom: 60px; } } .stakelab-card-empty { margin: 0 auto; text-align: center; padding: clamp(2rem, 1.391rem + 1.268vw, 2.5rem) clamp(1.5rem, 0.283rem + 2.536vw, 2.5rem); } .stakelab-card-empty img { height: 100px; } .stakelab-card-empty .empty-thumb { text-align: center; margin-bottom: 10px; } /* ================================= Social Icon Css Start =========================== */ .social-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .social-list__item { margin-right: 10px; } .social-list__item:last-child { margin-right: 0; } .social-list__link { width: 35px; height: 35px; border-radius: 50%; position: relative; overflow: hidden; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; color: hsl(var(--black)); background-color: hsl(var(--white)); font-size: 16px; } .social-list__link:hover, .social-list__link:focus { background-color: hsl(var(--base)); color: hsl(var(--white)) !important; border-color: hsl(var(--base)) !important; } @media screen and (max-width: 767px) { .social-list__link { width: 35px; height: 35px; font-size: 0.875rem; } } /* ================================= Social Icon Css End =========================== */ .list-group.list--group .list-group-item { background-color: hsl(var(--section-bg)) !important; color: hsl(var(--white)); border: 1px solid hsl(var(--white)/.1); } .user-icon{ background: #2c3b70; height: 40px; width: 40px; line-height: 40px; text-align: center; font-size: 25px; border-radius: 50px; }