/* Font Family*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Oswald:wght@300;400;500;600;700&display=swap"); /* ========================= Css Variables Start ======================== */ :root { /* Font Family */ --heading-font: "Oswald", sans-serif; --body-font: "Montserrat", sans-serif; /* TypoGraphy */ --heading-one: clamp(1.875rem, 2.8vw + 1rem, 4.5rem); --heading-two: clamp(1.5625rem, 1.7vw + 1rem, 2.5rem); --heading-three: clamp(1.375rem, .8vw + 1rem, 2.25rem); --heading-four: clamp(1.25rem, .5vw + 1rem, 1.5rem); --heading-five: clamp(1.0625rem, .3vw + 1rem, 1.25rem); --heading-six: 1.125rem; /* ========================= Color Variables Start =========================== */ --white: 0 0% 100%; --blue: 217 100% 58%; --red: 0 100% 50%; --light-h: 0; --light-s: 0%; --light-l: 31%; --light: var(--light-h) var(--light-s) var(--light-l); --black-h: 0; --black-s: 0%; --black-l: 12%; --black: var(--black-h) var(--black-s) var(--black-l); --heading-color: var(--black); --body-color: var(--light); --border-color: 0 0% 88%; --body-background: var(--white); --section-bg: 240 25% 98%; /* ================================ 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); --card-shadow: 0px 2px 20px rgba(156, 156, 156, 0.26); /* ================================ Box Shadow End =============================== */ /* ========================= Base Color ============================= */ --base-h: 50; --base-s: 94%; --base-l: 52%; --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-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); --background-gradient: linear-gradient(45deg, hsl(var(--base)), hsl(var(--base-two))); --base-gradient: linear-gradient(85.51deg, hsl(var(--base)), hsl(var(--base-two))); --tins--gradient: linear-gradient(95.18deg, hsl(var(--blue)), hsl(var(--base))); --base-two-gradient: radial-gradient(50% 50% at 50% 50%, hsl(var(--base)) 43.63%, hsl(var(--base-two)) 100%); /* ========================= Base Two Color ============================= */ --base-two-h: 44; --base-two-s: 94%; --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); /* Dark Color*/ --dark-h: 226; --dark-s: 28%; --dark-l: 15%; --dark: var(--dark-h) var(--dark-s) var(--dark-l); --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-d-600: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.6); --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 Start ============================== */ /* Primary Color */ --primary-h: 217; --primary-s: 100%; --primary-l: 58%; --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: 115; --success-s: 99%; --success-l: 41%; --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: 43; --warning-s: 100%; --warning-l: 51%; --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); /* Violet Color */ --violet-h: 276; --violet-s: 70%; --violet-l: 53%; --violet: var(--violet-h) var(--violet-s) var(--violet-l); /* Violet Darken */ --violet-d-100: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.1); --violet-d-200: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.2); --violet-d-300: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.3); --violet-d-400: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.4); --violet-d-500: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.5); /* Violet Lighten */ --violet-l-100: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.1); --violet-l-200: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.2); --violet-l-300: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.3); --violet-l-400: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.4); --violet-l-500: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.5); --violet-l-600: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.6); /* Yellow Color */ --yellow-h: 50; --yellow-s: 100%; --yellow-l: 50%; --yellow: var(--yellow-h) var(--yellow-s) var(--yellow-l); /* Yellow Darken */ --yellow-d-100: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.1); --yellow-d-200: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.2); --yellow-d-300: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.3); --yellow-d-400: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.4); --yellow-d-500: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.5); /* yellow Lighten */ --yellow-l-100: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.1); --yellow-l-200: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.2); --yellow-l-300: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.3); --yellow-l-400: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.4); --yellow-l-500: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.5); --yellow-l-600: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.6); /* ============================== Bootstrap Modifier End ============================== */ /*===== white darken=====*/ --white-h: 0; --white-s: 0%; --white-l: 100%; --white: var(--white-h) var(--white-s) var(--white-l); --white-d-100: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.05); --white-d-200: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.1); --white-d-300: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.2); --white-d-400: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.3); --white-d-500: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.4); --white-d-600: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.5); --white-d-700: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.6); --white-d-800: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.7); --white-d-900: var(--white-h) var(--white-s) calc(var(--white-l) - var(--white-l) * 0.8); --border: 0 0% 88%; } /* ========================= Css Variables End =========================== */ /* ============================ Media Breakpoint for Each Device Start ============================ */ /* ================================== Font Size For resposive devices End =============================== */ /* ================================= Common Typography Css Start =========================== */ * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } body { font-family: var(--body-font); color: hsl(var(--body-color)); word-break: break-word; background-color: hsl(var(--body-background)); min-height: 100vh; display: flex; flex-direction: column; } p { font-family: var(--body-font); margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; font-family: var(--heading-font); color: hsl(var(--heading-color)); line-height: 1.2; word-break: break-word; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; } } h1 { font-size: var(--heading-one); font-weight: 600; } h2 { font-size: var(--heading-two); font-weight: 600; } h3 { font-size: var(--heading-three); font-weight: 600; } h4 { font-size: var(--heading-four); font-weight: 500; } h5 { font-size: var(--heading-five); font-weight: 600; } h6 { font-size: var(--heading-six); font-weight: 500; } h1>a, h2>a, h3>a, h4>a, h5>a, h6>a { font-weight: 600; transition: 0.2s linear; line-height: 1.3; word-break: break-word; color: hsl(var(--heading-color)); } a { display: inline-block; transition: 0.2s linear; text-decoration: none; color: hsl(var(--body-color)); } a:hover { color: hsl(var(--base)); } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; vertical-align: middle; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } *:focus { outline: none; } button { cursor: pointer; border: none; background-color: transparent; color: hsl(var(--body-color)); } .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)); } /* Bg Image Css */ .bg-img { background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; } /* Hide Scroll bar Css For Custom Modal */ .scroll-hide { position: fixed; overflow-y: scroll; top: 0; left: 0; width: 100%; } /*================================= Custom Classes Css End ===========================*/ /* Fully Fit image Css */ .fit-image, .blog-item__thumb-link img, .customer__thumb img { width: 100%; height: 100%; object-fit: cover; } /* ============================= Display Flex Css Start ============================= */ .flex-wrap { display: flex; flex-wrap: wrap; } .flex-align, .action-buttons, .customer { 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 ============================= */ /* ===================== 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, .account-form__footer, .bottom-footer__right-text, .bottom-footer__text { font-size: 0.75rem; } .fs-13, .table tbody tr td, .customer__name { font-size: 0.8125rem; } .fs-14, .forget-password, .winner-item__content-info, .winner-item__content-name, .blog-item__btn, .blog-item__date, .table tbody tr td:first-child, .table thead tr th, .form--control::placeholder { font-size: 0.875rem; } .fs-15, .table tbody tr td::before, .table thead tr th, .table, .form--label, .btn--icon { font-size: 0.9375rem; } .fs-16, .account-form__text-link, .how-to-work__desc, .countdown__list, .about-item__desc, .scroll-top, .custom--accordion .accordion-button, p { font-size: 1rem; } @media screen and (max-width: 575px) { .fs-16, .account-form__text-link, .how-to-work__desc, .countdown__list, .about-item__desc, .scroll-top, .custom--accordion .accordion-button, p { font-size: 0.9375rem; } } .fs-17 { font-size: 1.0625rem; } @media screen and (max-width: 991px) { .fs-17 { font-size: 1rem; } } @media screen and (max-width: 575px) { .fs-17 { font-size: 0.9375rem; } } .fs-18, .btn--sm { font-size: 1.125rem; } @media screen and (max-width: 991px) { .fs-18, .btn--sm { font-size: 1rem; } } .fs-24 { font-size: 1.5rem; } /* ===================== Font Size For resposive devices End =================== */ /* ====================== Section Heading ==================== */ .section-heading { text-align: center; margin-bottom: 65px; } @media screen and (max-width: 1199px) { .section-heading { margin-bottom: 40px; } } @media screen and (max-width: 991px) { .section-heading { margin-bottom: 30px; } } .section-heading__subtitle { margin-bottom: 10px; color: hsl(var(--base)); font-size: 18px; letter-spacing: 1px; } .section-heading__title { margin-bottom: 20px; } .section-heading__desc { max-width: 750px; margin-left: auto; margin-right: auto; } .section-heading.style-left { text-align: left; } .section-heading.style-left .section-heading__desc { margin-left: 0; } /* ====================== Section Heading End==================== */ /* ================================= 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; } /* ================================= Background Color Css End =========================== */ /* ================================= Color Css Start =========================== */ .text--base { color: hsl(var(--base)) !important; } .text--base-two { color: hsl(var(--base-two)) !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--white { color: hsl(var(--white)) !important; } .text--red { color: hsl(var(--red)) !important; } /* ================================= Color Css End =========================== */ /* ================================= Margin Css Start =========================== */ .my-120 { margin-top: 60px; margin-bottom: 60px; } @media (min-width: 992px) { .my-120 { margin-top: 120px; margin-bottom: 120px; } } .mt-120 { margin-top: 60px; } @media (min-width: 992px) { .mt-120 { margin-top: 120px; } } .mb-120 { margin-bottom: 60px; } @media (min-width: 992px) { .mb-120 { margin-bottom: 120px; } } .my-60 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 992px) { .my-60 { margin-top: 120px; margin-bottom: 60px; } } .mt-60 { margin-top: 30px; } @media (min-width: 992px) { .mt-60 { margin-top: 60px; } } .mb-60 { margin-bottom: 30px; } @media (min-width: 992px) { .mb-60 { margin-bottom: 60px; } } .my-80 { margin-top: 40px; margin-bottom: 40px; } @media (min-width: 992px) { .my-80 { margin-top: 80px; margin-bottom: 80px; } } .mt-80 { margin-top: 40px; } @media (min-width: 992px) { .mt-80 { margin-top: 80px; } } .mb-80 { margin-bottom: 40px; } @media (min-width: 992px) { .mb-80 { margin-bottom: 80px; } } .my-40 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 992px) { .my-40 { margin-top: 40px; margin-bottom: 40px; } } .mt-40 { margin-top: 30px; } @media (min-width: 992px) { .mt-40 { margin-top: 40px; } } .mb-40 { margin-bottom: 30px; } @media (min-width: 992px) { .mb-40 { margin-bottom: 40px; } } /* ================================= Margin Css End =========================== */ /* ================================= padding Css Start =========================== */ .py-160 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-160 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-160 { padding-top: 160px; padding-bottom: 160px; } } .py-80 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-80 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-80 { padding-top: 80px; padding-bottom: 80px; } } .pt-160 { padding-top: 60px; } @media (min-width: 576px) { .pt-160 { padding-top: 80px; } } @media (min-width: 992px) { .pt-160 { padding-top: 160px; } } .pb-160 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-160 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-160 { padding-bottom: 160px; } } .py-70 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-70 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-70 { padding-top: 70px; padding-bottom: 70px; } } .pt-70 { padding-top: 30px; } @media (min-width: 576px) { .pt-70 { padding-top: 40px; } } @media (min-width: 992px) { .pt-70 { padding-top: 70px; } } .pb-70 { padding-bottom: 30px; } @media (min-width: 576px) { .pb-70 { padding-bottom: 40px; } } @media (min-width: 992px) { .pb-70 { padding-bottom: 70px; } } /* ================================= 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 Color Css End =========================== */ /* =========================== Accodion Css start ============================= */ .custom--accordion .accordion-item { border: 1px solid hsl(var(--black)); background-color: transparent !important; border-radius: 5px; overflow: hidden; } .custom--accordion .accordion-item:not(:last-child) { margin-bottom: 20px; } .custom--accordion .accordion-body { padding: 20px; background-color: hsl(var(--section-bg)); } .custom--accordion .accordion-body .text { max-width: 60%; } @media screen and (max-width: 575px) { .custom--accordion .accordion-body .text { max-width: 100%; } } .custom--accordion:first-of-type .accordion-button.collapsed { border-radius: 5px; } .custom--accordion:last-of-type .accordion-button.collapsed { border-radius: 5px; } .custom--accordion .accordion-button { background-color: transparent; color: var(--heading-color); font-weight: 800; font-family: var(--body-font); padding: 22px; } @media screen and (max-width: 575px) { .custom--accordion .accordion-button { padding: 15px; padding-right: 30px; } } .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: hsl(var(--black)) !important; box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed)::after { transform: rotate(0deg); background-image: none; color: hsl(var(--base)); } .custom--accordion .accordion-button[aria-expanded=true]::after, .custom--accordion .accordion-button[aria-expanded=false]::after { font-family: "Font Awesome 5 Free"; font-weight: 600; content: "\f068"; display: inline-block; position: relative; margin-left: auto; width: unset !important; right: 0px; color: hsl(var(--white)); font-size: 20px; } .custom--accordion .accordion-button[aria-expanded=false]::after { content: "\f067"; color: hsl(var(--black)); } /* ================================= Accodion Css End =========================== */ /* ================================= Button Css Start =========================== */ button { border: none; } button:focus { outline: none; box-shadow: none; } .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: 50%; } .btn { color: hsl(var(--black)) !important; font-weight: 500; padding: 12px 35px; border-radius: 4px; position: relative; z-index: 1; text-align: center; border: 1px solid transparent; font-family: var(--heading-font); font-size: 20px; line-height: 1.3; } .btn:focus { outline: none; box-shadow: none; } @media screen and (max-width: 767px) { .btn { padding: 12px 25px; font-size: 17px; } } @media screen and (max-width: 575px) { .btn { padding: 8px 13px; font-size: 16px; } } .btn:hover, .btn:focus, .btn:focus-visible { color: hsl(var(--base)); border-color: transparent !important; box-shadow: none !important; } .btn:active { top: 2px; } .btn--lg { padding: 20px 45px; } @media screen and (max-width: 991px) { .btn--lg { padding: 18px 40px; } } @media screen and (max-width: 767px) { .btn--lg { padding: 16px 35px; font-size: 16px; } } .btn--sm { padding: 8px 24px; } @media screen and (max-width: 767px) { .btn--sm { padding: 8px 12px; font-size: 14px; } } .btn--icon { width: 35px; height: 35px; line-height: 35px; padding: 0; } .btn .icon { margin-right: 5px; } .btn--base { position: relative; z-index: 1; overflow: hidden; background: var(--base-gradient) !important; color: #fff !important; } .btn--base::before { position: absolute; left: -100%; top: 0; height: 100%; width: 100%; background: var(--base-gradient); content: ""; z-index: -1; border-radius: 3px; transition: 0.3s ease-in-out; } .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--base:hover, .btn--base:focus .btn--base:focus-visible { background: var(--base-gradient) !important; border: 1px solid transparent !important; } .btn--base.outline { background: transparent !important; border: 1px solid hsl(var(--base)) !important; color: hsl(var(--base)) !important; } .btn--base.outline { color: hsl(var(--white)) !important; } .login-registration-list__item .btn--base.outline:hover { color: hsl(var(--black)) !important; } .btn--base.outline::after { position: absolute; left: 0; top: 0; content: ""; z-index: -1; background: 0; } .btn--base.outline:hover::after { background: var(--base-gradient) !important; } .btn--primary { background-color: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; } .btn--primary:hover, .btn--primary:focus .btn--primary:focus-visible { background-color: hsl(var(--primary-d-100)) !important; border: 1px solid transparent !important; color: hsl(var(--white)) !important; } .btn--primary.outline { border: 1px solid hsl(var(--primary)) !important; background-color: transparent !important; color: hsl(var(--primary)) !important; } .btn--primary.outline:hover, .btn--primary.outline:focus .btn--primary.outline:focus-visible { background-color: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; } .btn--secondary { background-color: hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .btn--secondary:hover, .btn--secondary:focus .btn--secondary:focus-visible { background-color: hsl(var(--secondary-d-100)) !important; border: 1px solid hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .btn--secondary.outline { border: 1px solid hsl(var(--secondary)) !important; background-color: transparent !important; color: hsl(var(--secondary)) !important; } .btn--secondary.outline:hover, .btn--secondary.outline:focus .btn--secondary.outline:focus-visible { background-color: hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .btn--success { background-color: hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .btn--success:hover, .btn--success:focus .btn--success:focus-visible { background-color: hsl(var(--success-d-100)) !important; border: 1px solid hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .btn--success.outline { border: 1px solid hsl(var(--success)) !important; background-color: transparent !important; color: hsl(var(--success)) !important; } .btn--success.outline:hover, .btn--success.outline:focus .btn--success.outline:focus-visible { background-color: hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .btn--danger { background-color: hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .btn--danger:hover, .btn--danger:focus .btn--danger:focus-visible { background-color: hsl(var(--danger-d-100)) !important; border: 1px solid hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .btn--danger.outline { border: 1px solid hsl(var(--danger)) !important; background-color: transparent !important; color: hsl(var(--danger)) !important; } .btn--danger.outline:hover, .btn--danger.outline:focus .btn--danger.outline:focus-visible { background-color: hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .btn--warning { background-color: hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .btn--warning:hover, .btn--warning:focus .btn--warning:focus-visible { background-color: hsl(var(--warning-d-100)) !important; border: 1px solid hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .btn--warning.outline { border: 1px solid hsl(var(--warning)) !important; background-color: transparent !important; color: hsl(var(--warning)) !important; } .btn--warning.outline:hover, .btn--warning.outline:focus .btn--warning.outline:focus-visible { background-color: hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .btn--info { background-color: hsl(var(--info)) !important; color: hsl(var(--white)) !important; } .btn--info:hover, .btn--info:focus .btn--info:focus-visible { background-color: hsl(var(--info-d-100)) !important; border: 1px solid hsl(var(--info)) !important; color: hsl(var(--white)) !important; } .btn--info.outline { border: 1px solid hsl(var(--info)) !important; background-color: transparent !important; color: hsl(var(--info)) !important; } .btn--info.outline:hover, .btn--info.outline:focus .btn--info.outline:focus-visible { background-color: hsl(var(--info)) !important; color: hsl(var(--white)) !important; } .btn--white { background-color: hsl(var(--white)) !important; color: hsl(var(--black)) !important; } .btn--white.outline { border: 1px solid hsl(var(--white)) !important; background-color: transparent !important; color: hsl(var(--white)) !important; } .btn--white.outline:hover, .btn--white.outline:focus .btn--white.outline:focus-visible { background-color: hsl(var(--white)) !important; color: hsl(var(--black)) !important; } .btn--white:hover, .btn--white:focus .btn--white:focus-visible { background-color: hsl(var(--white-d-100)) !important; border: 1px solid transparent !important; color: hsl(var(--black)) !important; } .btn--dark { background-color: hsl(var(--dark)) !important; color: hsl(var(--white)) !important; } .btn--dark.outline { border: 1px solid hsl(var(--dark)) !important; background-color: transparent !important; color: hsl(var(--dark)) !important; } .btn--dark.outline:hover, .btn--dark.outline:focus .btn--dark.outline:focus-visible { background-color: hsl(var(--dark)) !important; color: hsl(var(--white)) !important; } .btn--dark:hover, .btn--dark:focus .btn--dark:focus-visible { background-color: hsl(var(--dark-d-100)) !important; border: 1px solid transparent !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(--white)); border: transparent; } .custom--card .card-header { padding: 13px 20px; background-color: transparent; border-bottom: 1px solid hsl(var(--dark)/0.1); } .custom--card .card-body { background-color: hsl(var(--white)); padding: 20px; border-radius: 5px; } .custom--card .card-body__icon { font-size: 26px; color: hsl(var(--white)); } .custom--card .card-footer { padding: 13px 20px; background-color: transparent; border-top: 1px solid hsl(var(--dark)/0.1); } /* ================================= Card Css End =========================== */ /* ================================= Form Css Start =========================== */ /* Form Label */ .form--label { margin-bottom: 8px; color: hsl(var(--black)); font-weight: 500; } .form-group { margin-bottom: 1.5rem; } /* Form Control Start */ .form--control { border-radius: 5px; font-weight: 400; outline: none; width: 100%; padding: 15px; background-color: transparent; border: 1px solid hsl(var(--black)); color: hsl(var(--black)); line-height: 1; } .form--control::placeholder { color: hsl(var(--black)); } .form--control:focus { border-radius: 5px; color: hsl(var(--black)); box-shadow: none; border-color: hsl(var(--primary)); background-color: transparent; } .form--control:disabled, .form--control[readonly] { background-color: hsl(var(--dark-d-100)/.1); opacity: 1; border: 0; } .form--control[type=password] { color: hsl(var(--black)); } .form--control[type=password]:focus { color: hsl(var(--black)); } .form--control[type=file] { line-height: 50px; padding: 0; position: relative; } .form--control[type=file]::file-selector-button { border: 1px solid hsl(var(--black)/0.08); padding: 4px 6px; border-radius: 0.2em; background-color: hsl(var(--base)) !important; transition: 0.2s linear; line-height: 25px; position: relative; margin-left: 15px; color: hsl(var(--body-color)) !important; } .form--control[type=file]::file-selector-button:hover { background-color: hsl(var(--base)); border: 1px solid hsl(var(--base)); color: hsl(var(--black)); } /* Form Control End */ textarea.form--control { height: 150px; } /* Autofill Css */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-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 { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: hsl(var(--black)) !important; } /* Autofill Css End */ /* input gruop */ .input--group { position: relative; } /* Show Hide Password */ .password-show-hide { position: absolute; right: 20px; z-index: 5; cursor: pointer; top: 50%; transform: translateY(-50%); color: hsl(var(--black)); font-weight: 400; } /* --------------- 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 { display: flex; flex-wrap: wrap; } .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: 14px; height: 14px; border: 1px solid hsl(var(--black)); 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-input:checked[type=radio] { background-image: none !important; } .form-check-input:checked { background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; } .form-check-input[type=radio] { box-shadow: none !important; } .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 { width: calc(100% - 14px); padding-left: 8px; cursor: pointer; } .form--check .form-check-label .link:hover { text-decoration: underline; } @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 Switch Design */ .form--switch .form-check-input { border-radius: 3px; background-image: none; position: relative; box-shadow: none; border: 0; background-color: hsl(var(--dark)/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; } /* ================================= Modal Css Start =========================== */ .custom--modal .modal-header { padding: 15px; } .custom--modal .modal-header.close { width: 35px; height: 35px; background-color: hsl(var(--danger)); font-size: 1.5625rem; line-height: 1; border-radius: 4px; transition: 0.2s linear; } .custom--modal .modal-header.close:hover { background-color: hsl(var(--danger-l-100)); } .custom--modal .modal-header.close :focus { box-shadow: none; } .custom--modal .modal-content { border-radius: 10px !important; background-color: hsl(var(--white)); } .custom--modal .modal-body { padding: 15px; } .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 { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: center; padding: 15px; justify-content: flex-end; } .custom--modal .modal-footer .btn { font-size: 15px; padding: 6px 16px; } /* ================================= Modal Css End =========================== */ /* ================================= Pagination Css Start =========================== */ .pagination { flex-wrap: wrap; justify-content: center; margin-top: 60px; } @media screen and (max-width: 1199px) { .pagination { margin-top: 50px; } } @media screen and (max-width: 991px) { .pagination { margin-top: 40px; } } @media screen and (max-width: 767px) { .pagination { margin-top: 30px; } } .pagination .page-item .page-link { border: 1px solid hsl(var(--dark)/0.08); 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(--black)); } @media (max-width:424px) { .pagination .page-item .page-link { width: 35px; height: 35px; } } .pagination .page-item.active .page-link { background-color: hsl(var(--base)); } .pagination .page-item .page-link:hover { background-color: hsl(var(--base)); color: hsl(var(--black)); } .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(--dark)/0.7); } .action-buttons { gap: 10px; justify-content: flex-end; } .delete-icon, .edit-icon { color: hsl(var(--danger)); background-color: hsl(var(--danger)/0.08); width: 35px; height: 35px; border-radius: 50%; } .edit-icon { color: hsl(var(--info)); background-color: hsl(var(--info)/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(--white)); text-align: center; padding: 15px 20px; color: hsl(var(--dark)/0.7); font-family: var(--heading-font); font-weight: 600; border-bottom: 0; max-width: 170px; border: 1px solid hsl(var(--dark)/0.08); background-color: hsl(var(--base)/0.03); } .table thead tr th:not(:first-child) { border-left: 0; } .table thead tr th:first-child { text-align: left; border-radius: 6px 0 0 0; } .table thead tr th:last-child { border-radius: 0 6px 0 0; text-align: right; } .table thead tr th:nth-child(2) { text-align: center; } .table tbody { border: 0 !important; background-color: hsl(var(--white)); } .table tbody tr { border-bottom: 1px solid hsl(var(--dark)/0.08); } .table tbody tr:last-child { border-bottom: 0; } .table tbody tr:last-child td { border-bottom: 1px solid hsl(var(--dark)/0.08); } .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(--heading-font); color: hsl(var(--dark)/0.7); font-weight: 500; max-width: 170px; border-bottom: 1px solid hsl(var(--dark)/0.08); border-right: 1px solid hsl(var(--dark)/0.08); } .table tbody tr td::before { content: attr(data-label); font-family: var(--heading-font); color: hsl(var(--dark)); font-weight: 500; display: none; width: 45% !important; text-align: left; } .table tbody tr td:first-child { text-align: left; border-left: 1px solid hsl(var(--dark)/0.08); } .table tbody tr td:last-child { text-align: right; border-right: 1px solid hsl(var(--dark)/0.08); } @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(--black)/0.8); max-width: unset; } .table--responsive--md tbody tr td:last-child { border: none; } .table--responsive--md tbody tr:nth-child(odd) { background-color: hsl(var(--dark)/0.03); } .table--responsive--md tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--md tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--dark)/0.7); } } @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:nth-child(even) { background-color: hsl(var(--dark)/0.02); } .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(--black)/0.08); max-width: unset; } .table--responsive--lg tbody tr td:last-child { border: none; } .table--responsive--lg tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--lg tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--dark)/0.7); } } @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(--dark)/0.02); } .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(--black)/0.08); max-width: unset; } .table--responsive--xl tbody tr td:last-child { border: none; } .table--responsive--xl tbody tr td:first-child { text-align: right; border-left: 0; } .table--responsive--xl tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--dark)/0.7); } } @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; font-size: 0.875rem; color: hsl(var(--dark)/0.7); } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td { border: 0; } } /* ================================= Table Css End =========================== */ /* ================================= Bandge Css Start =========================== */ .badge { border-radius: 30px; padding: 4px 15px; font-size: 0.6875rem; font-weight: 500; } .badge--base { background-color: hsl(var(--base)/0.1) !important; border: 1px solid hsl(var(--base)) !important; color: hsl(var(--base)) !important; } .badge--primary { background-color: hsl(var(--primary)/0.1) !important; border: 1px solid hsl(var(--primary)) !important; color: hsl(var(--primary)) !important; } .badge--secondary { background-color: hsl(var(--secondary)/0.1) !important; border: 1px solid hsl(var(--secondary)) !important; color: hsl(var(--secondary)) !important; } .badge--success { background-color: hsl(var(--success)/0.1) !important; border: 1px solid hsl(var(--success)) !important; color: hsl(var(--success)) !important; } .badge--danger { background-color: hsl(var(--danger)/0.1) !important; border: 1px solid hsl(var(--danger)) !important; color: hsl(var(--danger)) !important; } .badge--warning { background-color: hsl(var(--warning)/0.1) !important; border: 1px solid hsl(var(--warning)) !important; color: hsl(var(--warning)) !important; } .badge--info { background-color: hsl(var(--info)/0.1) !important; border: 1px solid hsl(var(--info)) !important; color: hsl(var(--info)) !important; } .badge--violet { background-color: hsl(var(--violet)/0.1) !important; border: 1px solid hsl(var(--violet)) !important; color: hsl(var(--violet)) !important; } /* ================================= Bandge Css End =========================== */ /* ================================= preload Css Start =========================== */ .preloader { position: fixed; z-index: 999999; background-color: hsl(var(--black)); width: 100%; height: 100%; } .loader-p { border: 0 solid transparent; border-radius: 50%; width: 150px; height: 150px; position: absolute; top: calc(50vh - 75px); left: calc(50vw - 75px); } .loader-p:before, .loader-p:after { content: ""; border: 1em solid hsl(var(--base)); border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; animation: loader 2s linear infinite; opacity: 0; } .loader-p:before { animation-delay: 0.5s; } @keyframes loader { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* ================================= preload Css End =========================== */ /* ============= Header Start Here ======================= */ .navbar-brand { padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 991px) { .navbar-brand.logo { order: -1; } } .navbar-brand.logo img { max-width: 170px; max-height: 60px; } @media screen and (max-width: 1199px) { .navbar-brand.logo img { max-width: 150px; } } .header { position: relative; z-index: 5; background-color: hsl(var(--black)); } @media screen and (max-width: 991px) { .header { background-color: hsl(var(--black)); padding: 10px 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: sticky; 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) { .nav-menu { padding-top: 0; padding-bottom: 0; margin: 0 -20px; } .nav-menu .nav-item { position: relative; padding: 0 20px; } } @media screen and (min-width: 992px) and (max-width: 1399px) { .nav-menu .nav-item { padding: 0 15px; } } @media (min-width: 992px) { .nav-menu .nav-item:hover .nav-link { color: hsl(var(--base)) !important; } .nav-menu .nav-item:hover .nav-link::before { width: 100%; } } @media (min-width: 992px) { .nav-menu .nav-item .nav-link { font-weight: 300; font-family: var(--heading-font); font-size: 1.125rem; color: hsl(var(--white)) !important; padding: 30px 0; position: relative; /* ======================== Style two ================ */ } .nav-menu .nav-item .nav-link.active { color: hsl(var(--base)) !important; } .nav-menu .nav-item .nav-link.active::before { width: 100%; } .nav-menu .nav-item .nav-link:hover::before { left: 0; transition: 0.3s; } .nav-menu .nav-item .nav-link::before { position: absolute; content: ""; right: 0; bottom: 0px; width: 0; height: 3px; background-color: hsl(var(--base)); transition: 0.3s; } } /* ========================== Desktop Device End ========================= */ /* ============================== Small Device ======================= */ @media screen and (max-width: 991px) { .body-overlay.show { visibility: visible; opacity: 1; } .nav-menu { margin-top: 20px; } .nav-menu .nav-item { text-align: left; display: block; position: relative; margin: 0; } .nav-item:first-child { border-bottom: none; } .nav-item:last-child>a { border-bottom: 0; } .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)) !important; } .nav-item .nav-link::before { display: none; } } .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; } .navbar-toggler.header-button:focus { box-shadow: none !important; } .navbar-toggler.header-button[aria-expanded=true] i::before { content: "\f00d"; } .navbar-toggler.header-button i { font-size: 1.5625rem; } /* Login Registration */ .login-registration-list { margin-left: 50px; } @media screen and (max-width: 1399px) { .login-registration-list { margin-left: 25px; } } @media screen and (max-width: 991px) { .login-registration-list { margin: 0 -10px; } } .login-registration-list__item { color: hsl(var(--white)); padding: 0 12px; } @media screen and (max-width: 767px) { .login-registration-list__item { padding: 0 5px; } } /* Custom Dropdown Css Start */ @media screen and (max-width: 991px) { .custom--dropdown { width: 85px; } } .custom--dropdown.open>.custom--dropdown__selected::before { transform: rotate(180deg); } .custom--dropdown>.custom--dropdown__selected { background-color: transparent; position: relative; cursor: pointer; padding: 10px; font-size: 14px; padding-right: 30px; } .custom--dropdown>.custom--dropdown__selected::before { font-family: "Font Awesome 5 Free"; font-weight: 700; content: "\f107"; display: inline-block; position: absolute; margin-left: auto; width: unset !important; right: 15px; color: hsl(var(--white)); font-size: 18px; } @media screen and (max-width: 1399px) { .custom--dropdown>.custom--dropdown__selected::before { right: 2px; } } @media screen and (max-width: 1399px) { .custom--dropdown>.custom--dropdown__selected { padding-right: 15px; } } .custom--dropdown>.dropdown-list { position: absolute; background-color: hsl(var(--black)); width: 100%; border-radius: 3px; -webkit-box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13); box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13); opacity: 0; overflow: hidden; transition: 0.25s ease-in-out; transform: scaleY(0); -webkit-transform-origin: top center; transform-origin: top center; top: 100%; margin-top: 5px; z-index: -1; visibility: hidden; max-height: 230px; width: 85px; overflow-y: auto !important; } @media screen and (max-width: 991px) { .custom--dropdown>.dropdown-list { left: auto; right: 0; width: 80px; } } .custom--dropdown>.dropdown-list::-webkit-scrollbar { width: 4px; height: 4px; } .custom--dropdown>.dropdown-list::-webkit-scrollbar-thumb { background-color: hsl(var(--black)/0.15); } .custom--dropdown>.dropdown-list::-webkit-scrollbar-thumb { background-color: hsl(var(--black)/0.3); } .custom--dropdown.open>.dropdown-list { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; z-index: 999 !important; } .dropdown-list>.dropdown-list__item { padding: 10px 8px !important; cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; font-size: 14px; } .dropdown-list>.dropdown-list__item:hover { background-color: hsl(var(--base)/0.8) !important; } .dropdown-list>.dropdown-list__item, .custom--dropdown>.custom--dropdown__selected { display: flex; align-items: center; } .dropdown-list>.dropdown-list__item .thumb img, .custom--dropdown>.custom--dropdown__selected .thumb img { width: 100%; height: 100%; object-fit: cover !important; } .dropdown-list>.dropdown-list__item .thumb img, .custom--dropdown>.custom--dropdown__selected .thumb img { width: 30px !important; height: 20px !important; overflow: hidden; margin-right: 10px; } .dropdown-list>.dropdown-list__item .text, .custom--dropdown>.custom--dropdown__selected .text { width: calc(100% - 30px); padding-left: 4px; color: hsl(var(--white)); } .custom--dropdown__selected .text { display: none; } .dropdown-list__item .thumb { display: flex; justify-content: space-between; align-items: center; } /* ================================= Header Css End =========================== */ /* ============= Footer Start Here ======================= */ .footer-area { background-color: hsl(var(--black)); margin-top: auto; } .footer-area__style { padding-top: 70px; padding-bottom: 30px; } .footer-item__logo { margin-bottom: 20px; } .footer-item__logo a img { width: 100%; height: 100%; max-width: 160px; max-height: 64px; } .footer-item.style { padding-left: 35px; } @media screen and (max-width: 1199px) { .footer-item.style { padding-left: 0; } } .footer-item__title { color: hsl(var(--white)); margin-bottom: 25px; } @media screen and (max-width: 575px) { .footer-item__title { margin-bottom: 15px; } } .footer-item__desc { max-width: 450px; color: hsl(var(--white)/0.8); } /* Footer List Item */ .footer-menu { display: flex; flex-direction: column; margin: -5px 0; } .footer-menu__item { display: block; padding: 8px 0; } .footer-menu__link { color: hsl(var(--white)/0.8); } .footer-menu__link:hover { color: hsl(var(--base)); text-decoration: underline; } /* Footer Contact */ .footer-contact-menu { margin: -6px 0; } .footer-contact-menu__item { display: flex; padding: 6px 0; } .footer-contact-menu__item-icon { width: 15px; color: hsl(var(--base)); font-size: 1.25rem; } .footer-contact-menu__item-content { width: calc(100% - 15px); padding-left: 15px; } .social-list-wrapper.list-style .social-list-wrapper__title { color: hsl(var(--black)); } @media screen and (max-width: 575px) { .social-list-wrapper { margin-top: 20px; } } .social-list-wrapper__title { color: hsl(var(--white)); margin-bottom: 25px; } @media screen and (max-width: 575px) { .social-list-wrapper__title { margin-bottom: 15px; } } .payment-gateway__title { color: hsl(var(--white)); margin-bottom: 25px; } @media screen and (max-width: 575px) { .payment-gateway__title { margin-bottom: 15px; } } .payment-gateway__wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } @media screen and (max-width: 575px) { .payment-gateway__wrapper { gap: 12px; } } .payment-gateway__thumb { opacity: 0.5; } /* ============= Footer End Here ======================= */ /* ============= Bottom Footer End Here ======================= */ .bottom-footer__style { border-top: 1px solid hsl(var(--body-color)); } .bottom-footer__text { color: hsl(var(--white)); font-weight: 500; } @media screen and (max-width: 767px) { .bottom-footer__text { text-align: center; } } .bottom-footer__right { display: flex; justify-content: end; } @media screen and (max-width: 1199px) { .bottom-footer__right { justify-content: flex-start; } } @media screen and (max-width: 767px) { .bottom-footer__right { justify-content: center; text-align: center; } } .bottom-footer__right-link { color: hsl(var(--white)); } .bottom-footer__right-link:hover { text-decoration: underline; } .bottom-footer__right-link-inner { position: relative; margin-left: 30px; color: hsl(var(--white)); } .bottom-footer__right-link-inner:hover { text-decoration: underline; } .bottom-footer__right-link-inner::before { position: absolute; content: ""; left: -15px; width: 1px; height: 12px; top: 50%; transform: translateY(-50%); background-color: hsl(var(--body-color)); } @media screen and (max-width: 991px) { .bottom-footer__right-link-inner::before { display: none; } } /* =============Bottom Footer End Here ======================= */ /* ===================== Scroll to Top Start ================================= */ .scroll-top { position: fixed; right: 30px; bottom: 30px; color: hsl(var(--black)); background-color: hsl(var(--base)); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 3px; z-index: 5; transition: 0.5s; cursor: pointer; visibility: hidden; opacity: 0; bottom: -50px; animation: scroll_top 5s linear infinite; } @media screen and (max-width: 767px) { .scroll-top { right: 20px; width: 35px; height: 35px; } } .scroll-top:hover { color: hsl(var(--black)); background-color: hsl(var(--base-d-100)); } .scroll-top.show { visibility: visible; opacity: 1; bottom: 30px; color: #fff; } @keyframes scroll_top { 0%, to { transform: translateY(0px); } 50% { transform: translateY(20px); } } /* ===================== Scroll to Top End ================================= */ /* ================================= Template Selection Css Start =========================== */ ::selection { color: hsl(var(--white)); background: hsl(var(--base-d-100)); } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background-color: hsl(var(--base-d-100)); border: 0px solid transparent; border-radius: 0px; } ::-webkit-scrollbar-track { background-color: hsl(var(--black)/0.15); } /* ================================= Template Selection Css End =========================== */ /* ================================= Social Icon Css Start =========================== */ .social-list { display: flex; flex-wrap: wrap; align-items: center; } .social-list.list-two .social-list__link { color: hsl(var(--black)); } .social-list.list-two .social-list__link:hover, .social-list.list-two .social-list__link:focus { color: hsl(var(--base)); } .social-list__item { margin-right: 15px; } .social-list__item:last-child { margin-right: 0; } .social-list__link { position: relative; overflow: hidden; cursor: pointer; font-size: 24px; color: hsl(var(--white)); } .social-list__link:hover, .social-list__link:focus { color: hsl(var(--base)); } /* ================================= Social Icon Css End =========================== */ /* ================================= Body Overlay Start =========================== */ .body-overlay { position: fixed; width: 100%; height: 100%; content: ""; left: 0; top: 0; background-color: hsl(var(--black)/0.6); 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.6); z-index: 99; transition: 0.2s linear; visibility: hidden; opacity: 0; } .sidebar-overlay.show { visibility: visible; opacity: 1; z-index: 999; } /* ================================= Body Overlay End =========================== */ /* ================================= Start Rating Css Start =========================== */ .rating-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .rating-list__item { padding: 0 1px; color: hsl(var(--warning)); } .rating-list__text { color: hsl(var(--body-color)); } /* ================================= Start Rating Css End =========================== */ /* =========================== Banner Section Start Here ========================= */ .banner-section { position: relative; z-index: 1; padding: 220px 0 165px; overflow: hidden; background: var(--base-gradient); } @media screen and (max-width: 1199px) { .banner-section { padding: 140px 0 140px; } } @media screen and (max-width: 991px) { .banner-section { padding: 100px 0 100px; } } @media screen and (max-width: 575px) { .banner-section { padding: 60px 0 60px; } } .banner-section__shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } @media screen and (max-width: 575px) { .banner-section__shape { display: none; } } .banner-content__title { color: hsl(var(--black)); font-size: var(--heading-one); } .banner-content__desc { margin-top: 30px; max-width: 600px; font-size: 24px; font-weight: 500; color: hsl(var(--black)); } @media screen and (max-width: 991px) { .banner-content__desc { font-size: 20px; } } @media screen and (max-width: 575px) { .banner-content__desc { font-size: 17px; } } .banner-content__button { margin-top: 60px; } @media screen and (max-width: 575px) { .banner-content__button { margin-top: 35px; } } @media (max-width: 1700px) { .banner-right { position: absolute; right: 70px; top: 100px; width: 750px; } } .banner-right { position: absolute; right: 100px; top: 80px; } @media screen and (max-width: 1599px) { .banner-right { width: 650px; } } @media screen and (max-width: 1399px) { .banner-right { width: 600px; } } @media screen and (max-width: 1199px) { .banner-right { width: 450px; right: 60px; } } @media screen and (max-width: 991px) { .banner-right { width: 300px; top: 150px; right: 30px; } } @media screen and (max-width: 767px) { .banner-right { width: 250px; top: 160px; right: 20px; } } @media screen and (max-width: 575px) { .banner-right { display: none; } } .banner-shape { position: absolute; right: -200px; top: -400px; width: 1500px; z-index: -1; } @media screen and (max-width: 1599px) { .banner-shape { right: -300px; } } @media screen and (max-width: 1399px) { .banner-shape { right: -400px; } } @media screen and (max-width: 1199px) { .banner-shape { right: -450px; } } @media screen and (max-width: 991px) { .banner-shape { right: -300px; width: 1000px; top: -150px; } } @media screen and (max-width: 767px) { .banner-shape { top: -200px; } } @media screen and (max-width: 575px) { .banner-shape { display: none; } } @media screen and (max-width: 575px) { .banner-thumb { width: 300px; margin: 0 auto; } } @media screen and (max-width: 424px) { .banner-thumb { width: 250px; } } /* =========================== Banner Section End Here ========================= */ /* ================================ Testimonials Section Css Start ============================= */ .testimonials { position: relative; overflow: hidden; } .testimonials .section-heading__desc { font-size: 20px; font-weight: 500; } @media screen and (max-width: 575px) { .testimonials .section-heading__desc { font-size: 16px; } } .testimonials-card { padding: 0 10px; height: 100%; } .testimonial-item { background-color: hsl(var(--section-bg)); padding: 30px 20px; border-radius: 5px; height: 100%; position: relative; z-index: 1; overflow: hidden; } @media screen and (max-width: 424px) { .testimonial-item { padding: 25px 15px; } } .testimonial-item__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 40px; } @media screen and (max-width: 575px) { .testimonial-item__info { margin-top: 25px; } } .testimonial-item__details { padding-left: 20px; } .testimonial-item__name { margin-bottom: 0; color: hsl(var(--black)); } .testimonial-item__designation { color: hsl(var(--black)/0.8); } .testimonial-item__desc { margin-top: 30px; text-align: center; color: hsl(var(--body-color)); } @media screen and (max-width: 424px) { .testimonial-item__desc { margin-top: 10px; padding-top: 10px; } } .testimonial-item__shape { position: absolute; bottom: 0; right: 0; z-index: -1; max-width: 120px; } @media screen and (max-width: 767px) { .testimonial-item__shape { max-width: 90px; } } .testimonial-item__shape.shape-two { left: 0; } /* ================================ Testimonials Section Css End ============================= */ /* ================================= Blog Section Css Start Here ============================= */ @media screen and (max-width: 575px) { .blog .section-heading__title { font-size: 25px; } } @media screen and (max-width: 424px) { .blog .section-heading__title { font-size: 18px; } } .blog-item { background-color: hsl(var(--section-bg)); border-radius: 8px; overflow: hidden; height: 100%; } .blog-item:hover .blog-item__thumb img { transform: scale(1.1); } .blog-item__thumb { overflow: hidden; max-height: 300px; } .blog-item__thumb-link { width: 100%; height: 100%; } .blog-item__thumb-link img { transition: 0.3s linear; } .blog-item__content { padding: 40px 30px 30px 30px; } @media screen and (max-width: 991px) { .blog-item__content { padding: 30px 20px; } } @media screen and (max-width: 575px) { .blog-item__content { padding: 25px 13px; } } .blog-item__title-link { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-item__desc { margin-bottom: 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media screen and (max-width: 767px) { .blog-item__desc { margin-bottom: 15px; } } .blog-item__date { font-weight: 500; } @media screen and (max-width: 575px) { .blog-item__date { font-size: 12px; } } .blog-item__btn { color: hsl(var(--black)); font-weight: 500; } @media screen and (max-width: 575px) { .blog-item__btn { font-size: 12px; } } .blog-item__btn:hover { text-decoration: underline; color: hsl(var(--base)); } .blog-item__btn__icon { font-size: 14px; margin-left: 12px; } @media screen and (max-width: 575px) { .blog-item__btn__icon { margin-left: 5px; } } .blog-item__icon { margin-left: 10px; } /* Text Border Bottom Animation Css Start */ .border-effect { display: inline !important; width: 100%; background-repeat: no-repeat; background-position-y: -2px; background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); background-size: 0 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .border-effect:hover { background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); background-size: 100% 100%; } /* Text Border Bottom Animation Css Ends */ /* ================================= Blog Section Css End Here ================================= */ /*=================== about section start here ===================*/ .about-item { padding: 32px; background-color: hsl(var(--section-bg)); text-align: center; border-radius: 6px; transition: 0.2s linear; } @media screen and (max-width: 1199px) { .about-item { padding: 25px; } } @media screen and (max-width: 767px) { .about-item { padding: 25px 20px; } } @media screen and (max-width: 575px) { .about-item { padding: 15px 10px; } } .about-item:hover { box-shadow: var(--card-shadow); } .about-item__thumb { width: 115px; max-width: 100%; margin: 0 auto; } @media screen and (max-width: 1199px) { .about-item__thumb { width: 100px; } } @media screen and (max-width: 575px) { .about-item__thumb { width: 80px; } } .about-item__title { margin-top: 30px; margin-bottom: 24px; } @media screen and (max-width: 767px) { .about-item__title { margin: 15px 0; } } .about-item__desc { font-weight: 500; color: hsl(var(--body-color)); } /*=================== about section end here ===================*/ /*======================= ticket css start here =======================*/ .ticket-item { position: relative; z-index: 1; background-color: hsl(var(--blue)); padding: 60px 30px 50px 30px; border-radius: 6px; overflow: hidden; } @media screen and (max-width: 1199px) { .ticket-item { padding: 50px 30px 30px 30px; } } @media screen and (max-width: 575px) { .ticket-item { padding: 40px 30px 30px 30px; } } .ticket-item__name { text-align: center; color: hsl(var(--white)); margin-top: 10px; } @media screen and (max-width: 991px) { .ticket-item__name { margin: 15px 0; } } @media screen and (max-width: 424px) { .ticket-item__name { margin: 10px 0; } } .ticket-item__prize { color: hsl(var(--white)); text-align: center; margin-bottom: 0; } .ticket-item__shape { position: absolute; top: 0px; left: 30px; z-index: -1; } @media screen and (max-width: 1199px) { .ticket-item__shape { left: 15px; top: 10px; } } @media screen and (max-width: 575px) { .ticket-item__shape { left: 90px; top: 0; } } @media screen and (max-width: 575px) and (max-width: 470px) { .ticket-item__shape { left: 60px; top: -5px; } } @media screen and (max-width: 424px) { .ticket-item__shape { left: 30px; } } .ticket-item__shape-one { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .ticket-item__shape-one img { min-height: 600px; } .ticket-item__thumb { text-align: center; overflow: hidden; margin: 0 auto; } .ticket-item__thumb img { text-align: center; width: 90px; height: 90px; border-radius: 50%; object-fit: cover; } @media screen and (max-width: 424px) { .ticket-item__thumb img { width: 70px; height: 70px; } } .ticket-item__button { margin-top: 55px; text-align: center; } @media screen and (max-width: 1199px) { .ticket-item__button { margin-top: 35px; } } @media screen and (max-width: 424px) { .ticket-item__button { margin-top: 20px; } } .countdown { margin-top: 42px; } @media screen and (max-width: 1199px) { .countdown { margin-top: 40px; } } @media screen and (max-width: 767px) { .countdown { margin-top: 30px; } } @media screen and (max-width: 424px) { .countdown { margin-top: 20px; } } .countdown__title { color: hsl(var(--white)); text-align: center; } .countdown__menu { display: flex; justify-content: space-between; max-width: 255px; margin: 0 auto; } @media screen and (max-width: 424px) { .countdown__menu { max-width: 200px; } } .countdown__list { color: hsl(var(--white)); } @media screen and (max-width: 767px) { .countdown__list { font-size: 13px; } } .countdown__list:last-child .countdown__time::before { display: none; } .countdown__list:last-child .countdown__time::after { display: none; } .countdown__time { width: 50px; height: 50px; margin-top: 8px; border-radius: 8px; background-color: hsl(var(--white)); text-align: center; display: flex; font-size: 20px; color: hsl(var(--black)); font-family: var(--heading-font); font-weight: 600; justify-content: center; align-items: center; position: relative; } @media screen and (max-width: 1199px) { .countdown__time { width: 40px; height: 40px; font-size: 18px; max-width: 200px; } } @media screen and (max-width: 767px) { .countdown__time { width: 35px; height: 35px; font-size: 16px; max-width: 200px; } } .countdown__time::before { position: absolute; content: ""; right: -10px; top: 50%; width: 5px; height: 5px; background-color: hsl(var(--white)); } .countdown__time::after { position: absolute; content: ""; right: -10px; top: 30%; width: 5px; height: 5px; background-color: hsl(var(--white)); } /*======== countdown css start ========*/ /*======================= ticket css end here =======================*/ /*======================== guide section css start here ========================*/ .how-to-work-section { background-color: hsl(var(--section-bg)); } .how-to-work-section__title { margin-bottom: 25px; } .how-to-work-section__button { margin-top: 50px; } @media screen and (max-width: 991px) { .how-to-work-section__button { margin-top: 30px; } } .how-to-work-section__desc { font-size: 20px; font-weight: 500; font-family: var(--body-font); } @media screen and (max-width: 767px) { .how-to-work-section__desc { font-size: 16px; } } .how-to-work-wrapper div[class*=col]:nth-last-child(2) .how-to-work { margin-bottom: 0; } .how-to-work-wrapper div[class*=col]:last-child .how-to-work { margin-bottom: 0; } .how-to-work { position: relative; z-index: 1; margin-bottom: 30px; } @media screen and (max-width: 991px) { .how-to-work { margin-bottom: 10px; } } .how-to-work__thumb { width: 80px; height: 80px; } @media screen and (max-width: 575px) { .how-to-work__thumb { width: 70px; height: 70px; } } .how-to-work__title { margin-top: 30px; margin-bottom: 25px; font-weight: 600; } @media screen and (max-width: 991px) { .how-to-work__title { margin: 15px 0; } } @media screen and (max-width: 575px) { .how-to-work__title { margin: 10px 0; } } .how-to-work__desc { font-weight: 500; } .how-to-work__number { position: absolute; font-size: var(--heading-one); font-weight: 600; font-family: var(--heading-font); top: 60px; right: 145px; color: hsl(var(--heading-color)/0.1); transition: 0.2s; } @media screen and (max-width: 1399px) { .how-to-work__number { right: 75px; } } @media screen and (max-width: 991px) { .how-to-work__number { right: 80px; } } @media screen and (max-width: 767px) { .how-to-work__number { right: 40px; } } @media screen and (max-width: 575px) { .how-to-work__number { top: 40px; right: 150px; } } @media screen and (max-width: 424px) { .how-to-work__number { top: 40px; right: 70px; } } .how-to-work__number:hover { color: hsl(var(--base)); } /*======================== guide section css end here ========================*/ /*========================= winner section css start here =========================*/ .winner-section { overflow: hidden; } .winner-section__button { margin-top: 25px; } @media screen and (max-width: 575px) { .winner-section__button { margin-top: 10px; } } .winner-section__wrapper .section-heading { max-width: 650px; } @media screen and (max-width: 991px) { .winner-section__wrapper .section-heading { max-width: 450px; } } .winner-time select { background-color: transparent !important; color: hsl(var(--black)) !important; font-family: var(--heading-font); font-weight: 500; font-size: 20px; border: 1px solid hsl(var(--black)/0.6) !important; padding: 5px 20px; border-radius: 3px; } @media screen and (max-width: 767px) { .winner-time select { padding: 7px 10px; font-size: 15px; margin-bottom: 30px; } } @media screen and (max-width: 575px) { .winner-time select { padding: 7px; font-size: 14px; } } .top-winner__title { margin-bottom: 30px; font-weight: 500; } @media screen and (max-width: 424px) { .top-winner__title { font-size: 16px; } } .winner-item { position: relative; z-index: 1; padding: 40px 15px; overflow: hidden; border-radius: 5px; border: 1px solid transparent; } @media screen and (max-width: 575px) { .winner-item { padding: 20px 12px; } } .winner-item.item-style { border: 1px solid hsl(var(--body-color)/0.1); } .winner-item__shape { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; } .winner-item__shape img { height: 100%; } .winner-item__thumb { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } @media screen and (max-width: 991px) { .winner-item__thumb { width: 40px; height: 40px; } } .winner-item__content.content-style { position: relative; z-index: 1; } .winner-item__content.content-style::before { position: absolute; content: ""; left: -28px; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 40px; background-color: hsl(var(--body-color)/0.2); z-index: -1; } @media screen and (max-width: 1399px) { .winner-item__content.content-style::before { left: -20px; } } @media screen and (max-width: 991px) { .winner-item__content.content-style::before { left: -12px; } } @media screen and (max-width: 767px) { .winner-item__content.content-style::before { left: -50px; } } @media screen and (max-width: 575px) { .winner-item__content.content-style::before { left: -30px; } } @media screen and (max-width: 424px) { .winner-item__content.content-style::before { left: -20px; } } @media screen and (max-width: 374px) { .winner-item__content.content-style::before { display: none; } } .winner-item__content-name { font-weight: 600; font-family: var(--body-font); color: hsl(var(--body-color)); } @media screen and (max-width: 1399px) { .winner-item__content-name { font-size: 12px; } } .winner-item__content-info { font-weight: 600; font-family: var(--heading-font); color: hsl(var(--black)); margin-bottom: 0; } @media screen and (max-width: 1399px) { .winner-item__content-info { font-size: 12px; } } /*========================= winner section css end here =========================*/ /*=========================== faq section css start here ===========================*/ .faq-left__title { margin-bottom: 25px; } .faq-left__desc { margin-bottom: 45px; } @media screen and (max-width: 767px) { .faq-left__desc { margin-bottom: 30px; } } .faq-left__thumb { max-width: 210px; max-height: 210px; margin: 0 auto; } /*=========================== faq section css end here ===========================*/ /* ==================================== Contact top Start ==================================== */ .contact-section .contact { padding-top: 120px; padding-bottom: 90px; } @media screen and (max-width: 1499px) { .contact-section .contact { padding-top: 90px; padding-bottom: 70px; } } @media screen and (max-width: 1399px) { .contact-section .contact { padding-top: 70px; padding-bottom: 50px; } } @media screen and (max-width: 991px) { .contact-section .contact { padding-top: 100px; } } .contact-section .contact__title { margin-bottom: 0; } .contact-section .contact__wrapper { background-color: hsl(var(--section-bg)); padding: 65px; border-radius: 8px; position: relative; z-index: 1; overflow: hidden; } @media screen and (max-width: 991px) { .contact-section .contact__wrapper { padding: 50px; } } @media screen and (max-width: 767px) { .contact-section .contact__wrapper { padding: 40px; } } @media screen and (max-width: 575px) { .contact-section .contact__wrapper { padding: 30px; } } .contact-section .contact__shape { position: absolute; top: 0; right: 0; z-index: -1; opacity: 0.025; width: 100%; max-width: 700px; height: 100%; } .contact-section .contact-item { margin-bottom: 50px; } @media screen and (max-width: 575px) { .contact-section .contact-item { margin-bottom: 30px; } } .contact-section .contact-item__icon { color: hsl(var(--black)); font-size: 1.875rem; margin-bottom: 15px; line-height: 0; } .contact-section .contact-item__title { margin-bottom: 7px; color: hsl(var(--black)); } .contact-section .contact-item__desc { color: hsl(var(--body-color)); font-weight: 500; } .contact-section .contact-item__link { color: hsl(var(--black)); font-weight: 600; margin-top: 15px; } .form-check-label .link { color: hsl(var(--black)); font-weight: 500; text-decoration: underline; } .form-check-label .link:hover { color: hsl(var(--base)); } /* Contact top End */ /*================================== Contact Bottom End ==================================*/ /* =========================================== Account Css Start =========================*/ .account-inner { display: flex; min-height: 100vh; overflow: hidden; } /* Left Content Css */ .account-left { width: 45%; position: relative; z-index: 1; padding: 140px 120px 140px 100px; background: var(--base-two-gradient); } @media screen and (max-width: 1599px) { .account-left { padding: 180px 75px 210px 75px; } } @media screen and (max-width: 1499px) { .account-left { padding: 170px 70px 120px 70px; } } @media screen and (max-width: 1399px) { .account-left { padding: 160px 60px 120px 60px; } } @media screen and (max-width: 1199px) { .account-left { padding: 160px 30px 120px 30px; } } @media screen and (max-width: 991px) { .account-left { /* padding: 160px 15px 120px 15px; */ display: none; } } .account-left__thumb { z-index: -2; max-width: 560px; margin: 0 auto; } @media screen and (max-width: 1599px) { .account-left__thumb { bottom: 0; } } @media screen and (max-width: 1499px) { .account-left__thumb { bottom: 0; } } @media screen and (max-width: 1199px) { .account-left__thumb { left: 0; bottom: 30px; } } @media screen and (max-width: 991px) { .account-left__thumb { bottom: 100px; } } .account-left__thumb-two { position: absolute; left: 50px; bottom: 300px; z-index: -2; } @media screen and (max-width: 1599px) { .account-left__thumb-two { bottom: 100px; } } @media screen and (max-width: 1499px) { .account-left__thumb-two { bottom: 150px; } } @media screen and (max-width: 1399px) { .account-left__thumb-two { bottom: 200px; } } @media screen and (max-width: 1199px) { .account-left__thumb-two { left: 0; bottom: 280px; } } @media screen and (max-width: 991px) { .account-left__thumb-two { bottom: 350px; } } .account-left__shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .account-left__shape img { height: 100%; } .account-left__shape-two { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; opacity: 0.7; } .account-left__title { text-align: center; margin-bottom: 30px; color: hsl(var(--white)); } @media screen and (max-width: 991px) { .account-left__title { font-size: 24px; } } .account-left__desc { text-align: center; font-size: 20px; margin-bottom: 20px; color: hsl(var(--black)); font-weight: 500; } .account-left__icon { color: hsl(var(--black)); font-size: 30px; } /* Right Content Css */ .account-right { padding: 70px 200px 70px 260px; } .account-right.signup { padding: 70px 130px; } @media screen and (max-width: 1599px) { .account-right { padding: 10px 200px; } .account-right.signup { padding: 70px 120px; } } @media screen and (max-width: 1499px) { .account-right { padding: 10px 150px; } } @media screen and (max-width: 1399px) { .account-right { padding: 32px 90px; } .account-right.signup { padding: 60px; } } @media screen and (max-width: 1199px) { .account-right { padding: 40px 50px; } .account-right.signup { padding: 40px 30px; } } @media screen and (max-width: 991px) { .account-right { padding: 32px; width: 100%; } .account-right.signup { padding: 30px 25px; } } @media screen and (max-width: 767px) { .account-right { padding: 40px; } .account-right.signup { padding: 30px 20px; } } @media screen and (max-width: 575px) { .account-right { padding: 40px 0px; } } @media screen and (max-width: 424px) { .account-right { padding: 25px 0px; } } .account-right-wrapper { padding: 30px 40px; width: 60%; background-color: hsl(var(--white)); } @media screen and (max-width: 1199px) { .account-right-wrapper { padding: 10px; } } @media screen and (max-width: 991px) { .account-right-wrapper { padding: 20px; width: 100%; } } @media screen and (max-width: 767px) { .account-right-wrapper { width: 100%; padding: 20px; } } .account-right-wrapper__logo { max-width: 200px; margin-left: 100px; } @media screen and (max-width: 991px) { .account-right-wrapper__logo { max-width: 150px; display: block; margin: 0 auto; } } .continue-google .btn { padding: 12px; } @media (max-width:1599px) { .continue-google .btn { font-size: 12px !important; } } @media (max-width:1499px) { .continue-google .btn { font-size: 12px !important; padding: 5px; } } @media (max-width: 574px) { .continue-google .btn { font-size: 16px !important; padding: 8px 13px; } } /* Account Form Css Start */ .account-form { max-width: 480px; } .account-form__title { text-align: center; margin-bottom: 25px; } @media screen and (max-width: 767px) { .account-form__title { margin-bottom: 15px; } } .account-form__desc { text-align: center; margin-bottom: 40px; font-size: 20px; font-weight: 500; } @media screen and (max-width: 991px) { .account-form__desc { margin-bottom: 30px; font-size: 18px; } } @media screen and (max-width: 575px) { .account-form__desc { font-size: 16px; } } .account-form__text { text-align: center; font-weight: 500; } .account-form__text-link { color: hsl(var(--black)); font-weight: 600; text-decoration: underline; } .account-form__text-link:hover { text-decoration: underline; } .account-form__footer { color: hsl(var(--body-color)); } @media screen and (max-width: 767px) { .account-form { max-width: unset; } } .input-group-text.mobile-code { position: absolute; height: 100%; left: 0px; } .input-group .form--control { padding-left: 70px; } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-radius: 4px; } /* Account Form Css End */ .forget-password { color: hsl(var(--primary)); } .forget-password:hover { text-decoration: underline; color: hsl(var(--primary)); } .provider .icon { margin-right: 5px; } .provider .btn { border: 1px solid hsl(var(--black)); font-size: 1rem; font-weight: 600; display: flex; align-items: center; padding: 12px; justify-content: center; flex-wrap: wrap; gap: 10px; } .provider .btn:hover, .provider .btn:focus { border-color: hsl(var(--primary)) !important; } /* ============================================ Account Css End ====================================*/ /*--------------------------------------- FAQ Card -----------------------------------------*/ .faq-card { display: flex; flex-direction: column; gap: 1.5rem; padding: 15px; border: 1px solid hsl(var(--border)/0.5); border-top: none; } @media screen and (min-width: 768px) { .faq-card { padding: 30px 40px; } } .faq-card--list { --gap: 0; border-radius: 10px; box-shadow: 0 0 8px hsl(var(--black)/0.05); } .faq-card--list li:first-child .faq-card { border-top: 1px solid hsl(var(--border)/0.5); border-top-left-radius: 10px; border-top-right-radius: 10px; } .faq-card--list li:last-child .faq-card { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .faq-card__icon { display: grid; place-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 5px; font-family: var(--heading-font); font-size: 20px; font-weight: 700; color: hsl(var(--white)); } @media screen and (min-width: 768px) { .faq-card__icon { width: 45px; height: 45px; font-size: 24px; } } .faq-card__question { display: flex; flex-direction: column; gap: 0.5rem; } @media screen and (min-width: 375px) { .faq-card__question { flex-direction: row; gap: 1rem; } } .faq-card__question .faq-card__icon { background: hsl(var(--base)); } .faq-card__answer { display: flex; flex-direction: column; gap: 0.5rem; } @media screen and (min-width: 375px) { .faq-card__answer { flex-direction: row; gap: 1rem; } } .faq-card__answer .faq-card__icon { background: hsl(var(--dark)); } label.required:after { content: '*'; color: #DC3545 !important; margin-left: 2px; } /* =========================================== Blog Details Css Start ==============================*/ .blog-details { border-radius: 8px; overflow: hidden; height: 100%; box-shadow: 0px 2px 15px hsl(var(--white)/0.25); } .blog-details__thumb { height: 450px; max-height: 100%; } @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 0px; } @media screen and (max-width: 767px) { .blog-details__content { padding: 30px 0px; } } @media screen and (max-width: 575px) { .blog-details__content { padding: 25px 0px; } } .blog-details__title { margin-top: 20px; margin-bottom: 15px; } .blog-details__desc { margin-bottom: 15px; } .highlited-text { background-color: hsl(var(--base)/0.1); padding: 30px 20px; border-radius: 5px; border-left: 3px solid hsl(var(--base)); margin-bottom: 20px; } @media screen and (max-width: 767px) { .highlited-text { padding: 25px 15px; } } /* ========================================== Blog Details Css End ======================================*/ /*======================== blog sidebar css start here ========================*/ .blog-sidebar-wrapper { position: sticky; top: 100px; } .blog-sidebar { background-color: hsl(var(--black)/0.03); 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(--black)); } .blog-sidebar__title::before { position: absolute; content: ""; width: 60px; height: 2px; background-color: hsl(var(--base)); left: 0; bottom: 0px; } /* =========== Latest Blog Css============= */ .latest-blog { display: flex; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid hsl(var(--black)/0.1); } .latest-blog:last-of-type { padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0; } .latest-blog__thumb { display: flex; border-radius: 5px; overflow: hidden; } .latest-blog__thumb img { height: 80px; width: 80px; object-fit: cover; } @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; 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 sidebar css end here ========================*/ /* table css start */ .custom--table { margin-bottom: 0; border-radius: 15px; box-shadow: 0 5px 10px hsl(var(--black)/0.1); background: hsl(var(--white)); } .custom--table> :not(:first-child) { border-top: none; } .custom--table> :not(caption)>*>* { border-bottom-width: 0; } .custom--table-container { border-radius: 15px; } .custom--table thead { background-color: hsl(var(--white)); } .custom--table thead tr { border-bottom: 1px solid hsl(var(--border)/0.5); } .custom--table thead th { padding: 1rem 1.5rem; font-family: var(--body-font); font-size: 14px; color: hsl(var(--dark)); text-align: center; font-weight: 500; vertical-align: middle; } .custom--table thead th:first-child { border-radius: 15px 0 0 0; text-align: left; } .custom--table thead th:last-child { border-radius: 0 15px 0 0; text-align: right; } .custom--table tbody td { border-top: none; padding: 15px 20px; font-family: var(--body-font); color: hsl(var(--text)); text-align: center; vertical-align: middle; font-size: 14px; } .custom--table tbody td:first-child { text-align: left; } .custom--table tbody td:last-child { text-align: right; } .custom--table tbody tr:last-child td { border-bottom: none; } .custom--table tbody tr:last-child td:first-child { border-radius: 0 0 0 15px; } .custom--table tbody tr:last-child td:last-child { border-radius: 0 0 15px 0; } .custom--table tbody tr:nth-of-type(odd) { background: hsl(var(--light-100)); } .custom--table [data-label] { position: relative; } .custom--table [data-label]::before { position: absolute; content: attr(data-label); font-weight: 500; left: 0; padding: 0.8125rem 0.9375rem; display: none; color: hsl(var(--heading)); } /* table css end */ /*--------------------------------------- User -----------------------------------------*/ .user { display: flex; gap: var(--gap, 0.5rem); } .user__img { flex-shrink: 0; border-radius: 50%; overflow: hidden; } .user__img--sm { width: 35px; height: 35px; } .user__img--md { width: 45px; height: 45px; } .user__content { width: calc(100% - 45px); padding-left: 15px; } @media (max-width:424px) { .user__img--md { width: 40px; height: 40px; } .user__content { width: calc(100% - 40px); padding-left: 10px; } .user__content .title { font-size: 14px; } .text-clr { font-size: 14px; } } .user__img--lg { width: 50px; height: 50px; } .user__img--xl { width: 70px; height: 70px; } .user__img--xxl { width: 130px; height: 130px; } .user__img-is { object-fit: cover; width: 100%; height: 100%; } .result-card__number { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--light)); font-size: 14px; color: hsl(var(--text)); text-decoration: none; } .result-card__number--light { background: hsl(var(--white)); border: 1px solid hsl(var(--border)); color: hsl(var(--dark)); } .result-card__number.active { background: hsl(var(--base)); color: hsl(var(--white)); } /*--------------------------------------- Ticket Card -----------------------------------------*/ .ticket-card { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 0 8px hsl(var(--black)/0.1); border-radius: 10px; background: hsl(var(--white)); } @media screen and (min-width: 375px) { .ticket-card { padding: 1.5rem 1rem; } } @media screen and (min-width: 768px) { .ticket-card { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; gap: 1rem; } } .ticket-card--container { position: relative; z-index: 1; } .form-check-label.sm-text { font-size: 12px; } @media screen and (min-width: 768px) { .ticket-card .lottery-card__countdown-content { justify-content: flex-end; } } .lottery-card__countdown-content { display: flex; justify-content: center; margin: 0 auto; } /*--------------------------------------- Summery Card -----------------------------------------*/ .summery-card { box-shadow: 0 0 5px hsl(var(--black)/0.1); border: 1px solid hsl(var(--border)/0.05); border-radius: 5px; } @media screen and (min-width: 768px) { .summery-card { border-radius: 10px; } } @media screen and (min-width: 1200px) { .summery-card { position: sticky; top: 70px; } } .summery-card__head { padding: 15px; border-radius: 5px; background: hsl(var(--base)); } @media screen and (min-width: 768px) { .summery-card__head { padding: 30px; border-radius: 10px 10px 0 0; } } @media screen and (min-width: 1200px) { .summery-card__head { padding: 15px; } } @media screen and (min-width: 1400px) { .summery-card__head { padding: 20px; } } .summery-card__title { margin-top: 0; margin-bottom: 0.5rem; text-align: center; color: hsl(var(--white)); } .summery-card__details { margin-bottom: 0; text-align: center; font-size: 14px; color: hsl(var(--white)); } .summery-card__body { padding: 15px; } @media screen and (min-width: 768px) { .summery-card__body { padding: 30px; } } @media screen and (min-width: 1200px) { .summery-card__body { padding: 15px; } } @media screen and (min-width: 1400px) { .summery-card__body { padding: 20px; } } .summery-card__data { display: flex; justify-content: space-between; gap: 1rem; } .summery-card__data-name { display: block; flex-grow: 1; font-size: 14px; line-height: 1.5; font-weight: 500; } .summery-card__data-amount { display: block; flex-shrink: 0; text-align: right; font-size: 14px; line-height: 1.5; font-weight: 500; } .summery-card__total { display: flex; justify-content: space-between; gap: 1rem; } .summery-card__total-name { display: block; flex-grow: 1; font-size: 14px; line-height: 1.5; font-weight: 600; color: hsl(var(--black)); } .summery-card__total-amount { display: block; flex-shrink: 0; text-align: right; font-size: 14px; line-height: 1.5; font-weight: 600; color: hsl(var(--black)); } .summery-card__footer { padding: 15px; } @media screen and (min-width: 768px) { .summery-card__footer { padding-top: 0; padding-bottom: 30px; } } @media screen and (min-width: 1200px) { .summery-card__footer { padding-bottom: 15px; } } @media screen and (min-width: 1400px) { .summery-card__footer { padding-bottom: 20px; } } .lottery-tickets-yl-wrap{ background: #ffe001; margin-top: 30px; } /*--------------------------------------- Lottery Head -----------------------------------------*/ .section--sm { padding-top: 40px; padding-bottom: 80px; } .lottery-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 30px; } @media screen and (min-width: 768px) { .lottery-head { flex-direction: row; justify-content: space-between; align-items: center; } } .lottery-head__menu { column-gap: 15px; row-gap: 5px; } .lottery-head__link { font-size: 14px; color: hsl(var(--black)); font-weight: 500; } .lottery-head__link:hover { color: hsl(var(--base-two)); } .lottery-head__link.active { color: hsl(var(--base-two)); } .lottery-card__counter { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 10px; position: relative; background: hsl(var(--base)); font-family: var(--heading-font); font-size: 18px; font-weight: 700; color: hsl(var(--white)); } .lottery-card__counter.days::before { content: "Days"; position: absolute; bottom: calc(100% + 5px); left: 50%; width: 100%; transform: translateX(-50%); color: hsl(var(--black)); font-size: 12px; font-weight: 600; text-align: center; font-family: var(--body-font); } .lottery-card__counter.hours::before { content: "Hours"; position: absolute; bottom: calc(100% + 5px); left: 50%; width: 100%; transform: translateX(-50%); color: hsl(var(--black)); font-size: 12px; font-weight: 600; text-align: center; font-family: var(--body-font); } .lottery-card__counter.minutes::before { content: "Mins"; position: absolute; bottom: calc(100% + 5px); left: 50%; width: 100%; transform: translateX(-50%); color: hsl(var(--black)); font-size: 12px; font-weight: 600; text-align: center; font-family: var(--body-font); } .lottery-card__counter.seconds::before { content: "Secs"; position: absolute; bottom: calc(100% + 5px); left: 50%; width: 100%; transform: translateX(-50%); color: hsl(var(--black)); font-size: 12px; font-weight: 600; text-align: center; font-family: var(--body-font); } .lottery-card__counter-separator { display: flex; justify-content: center; align-items: center; padding-left: 5px; padding-right: 5px; color: hsl(var(--heading)); } /*--------------------------------------- Lottery -----------------------------------------*/ @media screen and (min-width: 320px) { .lottery-container>li { max-width: 250px; } } @media screen and (min-width: 576px) { .lottery-container>li { max-width: calc(50% - 1rem); } } @media screen and (min-width: 768px) { .lottery-container>li { max-width: calc(34% - 1rem); } } @media screen and (min-width: 992px) { .lottery-container>li { max-width: calc(33.9% - 1rem); } } @media screen and (min-width: 1400px) { .lottery-container>li { max-width: calc(25% - 1rem); } .lottery-container { margin: 0 -15px; } } /* .lottery-container>li { max-width: 230px; } */ .lottery { border-radius: 8px; background: hsl(var(--white)); } .lottery__head { padding: 10px 15px; border-radius: 8px 8px 0 0; background: hsl(var(--base)); border: 1px solid hsl(var(--base)); } @media (max-width:991px) { .lottery__head { padding: 10px; } } .lottery__head-title { display: block; font-size: 14px; text-align: center; color: hsl(var(--white)); font-weight: 600; } .lottery__body { padding: 12px; position: relative; z-index: 1; border: 1px solid hsl(var(--border)/0.5); } .lottery__list { gap: 5px; margin-right: -5px; } .lottery__list li { width: calc(16.66% - 5px); } @media only screen and (max-width:1399px) and (min-width:992px) { .lottery__list li { width: calc(15.66% - 10px); } } .lottery__list li:last-child { margin-right: auto; } .list { gap: 15px; } .lottery__btn { display: grid; place-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid hsl(var(--border)/0.5); background: transparent; font-size: 12px; color: hsl(var(--text)); border-radius: 3px; font-family: var(--heading-font); } .btn--remove { width: 40px !important; height: 40px !important; border-radius: 50%; padding: 7px 15px !important; display: flex; justify-content: center; align-items: center; font-size: 24px; } .btn--common { min-width: 100px; padding: 8px 15px; position: relative; isolation: isolate; display: flex; align-items: center; gap: 5px; font-family: var(--body-font); font-weight: 400; } .btn--common__text { font-size: 15px; } .btn--common__icon { font-size: 15px; } .lottery__btn:hover:not([disabled]) { background: #d7d7d7; border-color: #d7d7d7; } .lottery__btn.active:hover { background: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } .lottery__btn-base { border: 1px solid hsl(var(--base)/0.1); background: hsl(var(--base)/0.05); color: hsl(var(--base)); } .lottery__btn.active { background: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } .lottery__btn.powerBtn.active { background: hsl(var(--base)/0.2); border-color: hsl(var(--base)/0.2); color: hsl(var(--text)); } .lottery__btn.powerBtn.active:hover { background: hsl(var(--base)/0.2); border-color: hsl(var(--base)/0.2); color: hsl(var(--text)); } .lottery__footer { padding: 10px; border: 1px solid hsl(var(--border)/0.5); border-top: 0; } .lottery__number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; font-family: var(--heading-font); font-size: var(--d1); line-height: 1; font-weight: 700; opacity: 0.1; } /*--------------------------------------- Lottery Button -----------------------------------------*/ .lottery-btn { min-width: 100px; padding: 7px 10px; position: relative; isolation: isolate; display: flex; align-items: center; gap: 5px; font-family: var(--body-font); font-weight: 500; color: hsl(var(--white)) !important; } @media screen and (min-width: 576px) { .lottery-btn { padding: 8px 6px; min-width: auto; } } .lottery-btn:hover { border: 0; box-shadow: none; color: hsl(var(--white)); } .lottery-btn:active { border: 1px solid transparent; } .lottery-btn:hover { border: 1px solid transparent; } .lottery-btn:focus { border: 1px solid transparent; } .lottery-btn__icon { display: inline-block; } @media screen and (min-width: 576px) { .lottery-btn__icon { font-size: 12px; } } .lottery-btn__text { display: inline-block; font-size: 12px; } @media screen and (min-width: 576px) { .lottery-btn__text { font-size: 12px; } } @media screen and (min-width: 992px) { .lottery-btn__text { font-size: 12px; } } /*--------------------------------------- Result Card -----------------------------------------*/ .result-card { box-shadow: 0 0 8px hsl(var(--black)/0.08); border: 1px solid hsl(var(--border)/0.4); background: hsl(var(--white)); border-radius: 5px; } .result-card__image { width: 60px; height: 60px; flex-shrink: 0; } .result-card__img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; object-fit: cover; } .result-card__sub-title { font-size: 20px; font-weight: 900; color: hsl(var(--base)); } .result-card__name { display: flex; gap: 1rem; align-items: center; } .result-card__head { display: flex; flex-direction: column; gap: 1.5rem; padding: 20px; border-bottom: 1px solid hsl(var(--border)/0.5); } @media screen and (min-width: 768px) { .result-card__head { flex-direction: row; justify-content: space-between; padding: 30px; } } .result-card__body { display: flex; flex-direction: column; gap: 1.5rem; padding: 20px; } @media screen and (min-width: 768px) { .result-card__body { flex-direction: row; justify-content: space-between; padding: 30px; } } .result-card__number { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--light)); font-size: 14px; color: hsl(var(--text)); text-decoration: none; } .result-card__number:hover { background: hsl(var(--light)); color: hsl(var(--text)); } .result-card__number--light { background: hsl(var(--white)); border: 1px solid hsl(var(--border)); color: hsl(var(--dark)); } .result-card__number--light:hover { background: hsl(var(--white)); border: 1px solid hsl(var(--border)); color: hsl(var(--dark)); } .result-card__number.active { background: hsl(var(--base)); color: hsl(var(--white)); } .result-card__number.active:hover { background: hsl(var(--base)); color: hsl(var(--white)); } .attachment.input-group-text:focus { box-shadow: none !important; } .attachment .form--control { padding-left: 0; } .attachment .input-group-text { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 1px solid hsl(var(--danger)) !important; } .footer-menu__item p { color: hsl(var(--white)/0.8); } @media screen and (max-width: 1399px) { .footer-menu__item p { font-size: 0.875rem !important; } .footer-menu__item { font-size: 0.875rem !important; } } @media screen and (max-width: 1180px) { .footer-menu__item p { font-size: 1rem !important; } .footer-menu__item { font-size: 1rem !important; } } .request-coin { position: fixed; top: 65%; border-radius: 5px; right: 15px; text-align: center; cursor: pointer; overflow: hidden; height: auto; padding: 20px 15px; width: 120px; background-color: #fff; transition: transform .3s ease .4s, background-color .25s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 800px; -webkit-perspective: 800px; z-index: 99; animation: move-tb 3s linear infinite; } .request-coin__title { margin-bottom: 0px; font-size: 1rem; line-height: 1.5rem; } .bg--base .request-coin__title { color: #fff; } .request-coin__icon { margin-bottom: 10px; display: flex; justify-content: center; align-items: center; } .request-coin__icon i { font-size: 24px; } @keyframes move-tb { 0% { transform: translateY(0px); } 50% { transform: translateY(30px); } 100% { transform: translateY(0px); } } .request-coin.bg--base .image-white, .request-coin .image-black { display: block; } .request-coin .image-white, .request-coin.bg--base .image-black { display: none; } .form-group .input-group .input-group-text { border-color: hsl(var(--black)); } @media only screen and (min-width: 768px) { .offcanvas { width: 60% !important; } } @media only screen and (min-width: 1440px) { .offcanvas { width: 35% !important; } } .offcanvas-title { color: hsl(var(--white)) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 13px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: hsl(var(--black)) !important; line-height: 51px !important; } .select2-container--default .select2-selection--single { background-color: #fff !important; border: 1px solid hsl(var(--black)) !important; height: 51px !important; } .input-group-text.mobile-code { border-color: transparent !important; } .offcanvas .input-group-text { border-radius: 0 4px 4px 0 !important; border-left: 0 !important; } .form--control[type=file]::file-selector-button { background-color: hsl(var(--base)) !important; color: hsl(var(--white)) !important; } .form--control[type=file]::file-selector-button:hover { background-color: hsl(var(--base)); color: hsl(var(--white)); } .removeFile.bg--danger i{ color: hsl(var(--white)) !important; }