/* ======================= Css table of contents Start ================================= * Template name: Agenki * Version: 1.0 * Description: Agenki Creative Agency, and Portfolio HTML Template. Fully responsive, creative design, and easy to customize. Ideal for Agenki agencies and startups. * Author: wowtheme7 * Author-url: https://themeforest.net/user/wowtheme7 */ /* **************************** Abstracts **************************** ** Functions ** Mixins ** Variables /* **************************** Components **************************** ** Accordion ** Button ** Form ** Swiper ** Tab ** Table ** Toast /* **************************** Layout **************************** ** Custom Cursor ** Header ** Mobile nav menu ** Preloader ** Range slider ** Scroll top ** Slick /* **************************** partials **************************** ** About ** Award ** Banner ** Blog ** Brand ** Breadcrumb ** Contact ** Counter ** Cta ** Faq ** Feature ** Fullscreen Banner ** Gallery ** Hover Animation ** Maquee ** Portfolio ** Price ** Project ** Resume ** Rtl ** Section Title ** Service ** Skill ** Team ** Testimonial ** Video /* **************************** Utilities **************************** ** Aspect ** Bg img ** Bg ** Border ** Classes ** Colors hover ** Colors ** Cursor ** Duration ** Font size ** Font ** Gap ** Grid ** Group ** Height ** Hover Animation White ** Inset ** Line clamp ** Line height ** Margin ** Max height ** Max width ** Outline ** Overlay ** Padding ** Placeholder ** Rotate ** Rounded ** Scale ** Scrollbar ** Shadow ** Transform ** Transition ** Translate ** Typography ** Underline ** Width ** Z index ** Animation /* **************************** Partials **************************** ** RTL ================================== Css table of contents End======================================== */ /* Font Family*/ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); @import url("https://fonts.cdnfonts.com/css/satoshi"); @font-face { font-family: "Mango Grotesque"; src: url("../fonts/mango-grotesque.ttf") format("opentype"); } /* ========================= Variable Css Start ======================== */ :root { /* Font Family Variable */ --heading-font: "Mango Grotesque", serif; --body-font: "Satoshi", sans-serif; --inter-font: "Inter", sans-serif; /* Font Size Variable Start */ --heading-one: clamp(2rem, -0.0733rem + 6.3692vw, 4.25rem); --heading-two: clamp(1.75rem, 0.7133rem + 2.8846vw, 2.875rem); --heading-three: clamp(1.5rem, 0.3353rem + 2.1661vw, 2.5rem); --heading-four: clamp(1.25rem, 0.5569rem + 1.444vw, 2rem); --heading-five: clamp(1.125rem, 1.2rem + 0.722vw, 1.75rem); --heading-six: clamp(1rem, 0.769rem + 0.6813vw, 1.25rem); /* Font Size End */ /* template main color */ --main-h: 78; --main-s: 68%; --main-l: 59%; --main: #ea5824; /* template main two color */ --main-two-h: 13; --main-two-s: 83%; --main-two-l: 53%; --main-two: var(--main-two-h) var(--main-two-s) var(--main-two-l); /* template main three color */ --main-three-h: 43; --main-three-s: 81%; --main-three-l: 79%; --main-three: var(--main-three-h) var(--main-three-s) var(--main-three-l); /* template main four color */ --main-four-h: 253; --main-four-s: 100%; --main-four-l: 50%; --main-four: var(--main-four-h) var(--main-four-s) var(--main-four-l); /* template main five color */ --main-five-h: 7; --main-five-s: 100%; --main-five-l: 54%; --main-five: var(--main-five-h) var(--main-five-s) var(--main-five-l); /* template main six color */ --main-six-h: 39; --main-six-s: 100%; --main-six-l: 50%; --main-six: var(--main-six-h) var(--main-six-s) var(--main-six-l); /* template main seven color */ --main-seven-h: 214; --main-seven-s: 95%; --main-seven-l: 61%; --main-seven: var(--main-seven-h) var(--main-seven-s) var(--main-seven-l); /* Common Color */ --white: 0 0% 100%; --black: 240 46% 5%; --body: 0 0% 43%; --heading-color: var(--black); --body-color: var(--body); --translate-x-50: translateX(-50%); --translate-y-50: translateY(-50%); --size-05: 0.125rem; --size-1: 0.25rem; --size-105: 0.375rem; --size-2: 0.5rem; --size-205: 0.625rem; --size-3: 0.75rem; --size-305: 0.875rem; --size-4: 1rem; --size-405: 1.125rem; --size-5: 1.25rem; --size-505: 1.375rem; --size-6: 1.5rem; --size-605: 1.625rem; --size-7: 1.75rem; --size-705: 1.875rem; --size-8: 2rem; --size-9: 2.25rem; --size-10: 2.5rem; --size-11: 2.75rem; --size-110: 2.875rem; --size-12: 3rem; --size-122: 3.125rem; --size-13: 3.25rem; --size-133: 3.375rem; --size-14: 3.5rem; --size-140: 3.625rem; --size-15: 3.75rem; --size-155: 3.875rem; --size-16: 4rem; --size-17: 4.25rem; --size-18: 4.5rem; --size-19: 4.75rem; --size-20: 5rem; --size-21: 5.5rem; --size-22: 5.75rem; --size-23: 6rem; --size-24: 6.25rem; --size-25: 6.5rem; --size-26: 6.75rem; --size-27: 7rem; --size-28: 7.25rem; --size-29: 7.5rem; --size-30: 7.75rem; --size-31: 8rem; --size-32: 8.25rem; --size-33: 8.5rem; --size-34: 8.75rem; --size-35: 9rem; --size-36: 9.25rem; --size-37: 9.5rem; --size-38: 9.75rem; --size-40: 10rem; --size-45: 11.25rem; --size-47: 11.75rem; --size-63: 15.75rem; --size-83: 20.75rem; --main-50: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.9)); --main-100: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.8)); --main-200: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.7)); --main-300: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.6)); --main-400: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.5)); --main-500: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.4)); --main-600: #ea5824; --main-700: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.1)); --main-800: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.2)); --main-900: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.3)); --main-two-50: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.9)); --main-two-100: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.8)); --main-two-200: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.7)); --main-two-300: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.6)); --main-two-400: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.5)); --main-two-500: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.4)); --main-two-600: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l)); --main-two-700: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.1)); --main-two-800: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.2)); --main-two-900: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.3)); --main-three-50: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.9)); --main-three-100: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.8)); --main-three-200: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.7)); --main-three-300: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.6)); --main-three-400: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.5)); --main-three-500: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) + (100% - var(--main-three-l)) * 0.4)); --main-three-600: hsl(var(--main-three-h), var(--main-three-s), var(--main-three-l)); --main-three-700: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) - var(--main-three-l) * 0.1)); --main-three-800: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) - var(--main-three-l) * 0.2)); --main-three-900: hsl(var(--main-three-h), var(--main-three-s), calc(var(--main-three-l) - var(--main-three-l) * 0.3)); --main-four-50: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.9)); --main-four-100: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.8)); --main-four-200: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.7)); --main-four-300: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.6)); --main-four-400: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.5)); --main-four-500: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) + (100% - var(--main-four-l)) * 0.4)); --main-four-600: hsl(var(--main-four-h), var(--main-four-s), var(--main-four-l)); --main-four-700: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) - var(--main-four-l) * 0.1)); --main-four-800: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) - var(--main-four-l) * 0.2)); --main-four-900: hsl(var(--main-four-h), var(--main-four-s), calc(var(--main-four-l) - var(--main-four-l) * 0.3)); --main-five-50: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.9)); --main-five-100: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.8)); --main-five-200: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.7)); --main-five-300: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.6)); --main-five-400: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.5)); --main-five-500: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) + (100% - var(--main-five-l)) * 0.4)); --main-five-600: hsl(var(--main-five-h), var(--main-five-s), var(--main-five-l)); --main-five-700: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) - var(--main-five-l) * 0.1)); --main-five-800: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) - var(--main-five-l) * 0.2)); --main-five-900: hsl(var(--main-five-h), var(--main-five-s), calc(var(--main-five-l) - var(--main-five-l) * 0.3)); --main-six-50: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.9)); --main-six-100: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.8)); --main-six-200: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.7)); --main-six-300: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.6)); --main-six-400: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.5)); --main-six-500: hsl(var(--main-six-h), var(--main-five-s), calc(var(--main-six-l) + (100% - var(--main-six-l)) * 0.4)); --main-six-600: hsl(var(--main-six-h), var(--main-six-s), var(--main-six-l)); --main-six-700: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) - var(--main-six-l) * 0.1)); --main-six-800: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) - var(--main-six-l) * 0.2)); --main-six-900: hsl(var(--main-six-h), var(--main-six-s), calc(var(--main-six-l) - var(--main-six-l) * 0.3)); --main-seven-50: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.9)); --main-seven-100: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.8)); --main-seven-200: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.7)); --main-seven-300: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.6)); --main-seven-400: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.5)); --main-seven-500: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) + (100% - var(--main-seven-l)) * 0.4)); --main-seven-600: hsl(var(--main-seven-h), var(--main-seven-s), var(--main-seven-l)); --main-seven-700: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) - var(--main-seven-l) * 0.1)); --main-seven-800: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) - var(--main-seven-l) * 0.2)); --main-seven-900: hsl(var(--main-seven-h), var(--main-seven-s), calc(var(--main-seven-l) - var(--main-seven-l) * 0.3)); --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: 1.875rem; } /* ========================= Variable Css End ======================== */ /* Media Breakpoint for Each Device End */ /* =========================== Accordion Css start ============================= */ .common-accordion .accordion-item:not(:last-child) { margin-block-end: 20px; } .common-accordion:first-of-type .accordion-button.collapsed { border-radius: 5px; } .common-accordion:last-of-type .accordion-button.collapsed { border-radius: 5px; } .common-accordion .accordion-button::after { background-image: none; } .common-accordion .accordion-button:focus { box-shadow: none; } .common-accordion .accordion-button:not(.collapsed) { background-color: transparent !important; box-shadow: none; color: var(--main-600); } .common-accordion .accordion-button:not(.collapsed)::after { background-image: none; color: var(--main-600); } .common-accordion .accordion-button[aria-expanded=true]::after, .common-accordion .accordion-button[aria-expanded=false]::after { font-family: "Phosphor"; font-weight: 900; content: "\f106"; color: var(--main-600); display: inline-block; position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: 30px; height: unset; text-align: center; } @media screen and (max-width: 575px) { .common-accordion .accordion-button[aria-expanded=true]::after, .common-accordion .accordion-button[aria-expanded=false]::after { inset-inline-end: 20px; } } .common-accordion .accordion-button[aria-expanded=false]::after { content: "\f107"; color: hsl(var(--heading-color)); } /* ================================= Accordion Css End =========================== */ /* ========================== Button Css Start =============== */ .button__label { position: relative; text-align: center; transition: color 0.05s cubic-bezier(0.645, 0.045, 0.355, 1); } .button--stroke:hover { color: #0e100f; } .button--stroke::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0.125rem solid #fffce1; border-radius: inherit; pointer-events: none; } .button--stroke .button__flair { transform: scale(0); transform-origin: 0 0; } .button--stroke .button__label { transition: color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .button__flair { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .button__flair::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; aspect-ratio: 1/1; background-color: #fffce1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .btn { border: 0; color: hsl(var(--white)); line-height: 1; padding: 18px 32px; position: relative; overflow: hidden; border-radius: 6px; z-index: 1; transition: 0.2s linear; } .btn:hover, .btn:focus, .btn:focus-visible { box-shadow: none !important; } .btn-main { background-color: var(--main-600) !important; color: hsl(var(--white)) !important; } .btn-main.button--stroke::after { border-color: transparent; } .hover-style-one:hover, .hover-style-one:active { background-color: var(--main-600); } .hover-style-one:hover.button--stroke::after, .hover-style-one:active.button--stroke::after { border-color: transparent; } .hover-style-one .button__flair::before { background-color: var(--main-two-600); } .hover-style-two:hover, .hover-style-two:active { color: var(--main-two-600) !important; } .hover-style-two:hover.button--stroke::after, .hover-style-two:active.button--stroke::after { border-color: transparent; } .hover-style-two .button__flair::before { background-color: hsl(var(--white)); } .theme-btn-main { gap: 1px; transition: 0.4s; } .theme-btn-main:hover .theme-btn-arrow-left { scale: 1; } .theme-btn-main:hover .theme-btn-arrow-right { scale: 0; } .theme-btn-main:hover .theme-btn { transform: translateX(56px); } .theme-btn-arrow-left { scale: 0; left: 0; right: auto; transition: 0.4s; } .theme-btn-arrow-right { transition: 0.4s; } .tw-btn-circle { width: 161px; height: 161px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--main-600); border-radius: 50%; position: relative; overflow: hidden; } .tw-btn-circle .tw-btn-circle-icon { text-align: center; transition: 0.4s; } .tw-btn-circle .tw-hover-btn-wrapper { display: inline-block; } .tw-btn-circle .tw-btn-circle-dot { position: absolute; left: 42px; bottom: -15px; width: 20px; height: 20px; transition: all 0.6s; border-radius: 50%; background-color: var(--main-600); transform: translate(-50%, -50%); z-index: -1; } .tw-btn-circle:hover .tw-btn-circle-dot { width: 420px; height: 420px; } .tw-btn-circle:hover span { color: hsl(var(--white)); } @media screen and (max-width: 1199px) { .tw-hover-btn-wrapper { margin-block-start: var(--size-8) !important; } } /* =========================== Button Css End =================== */ /* ================================= Form Css Start =========================== */ /* input File Start */ .common-file[type=file] { line-height: 50px; padding: 0; position: relative; } .common-file[type=file]::file-selector-button { border: 1px solid hsl(var(--black)/0.08); padding: 4px 6px; border-radius: 0.2em; background-color: hsl(var(--main)) !important; transition: 0.2s linear; line-height: 25px; position: relative; margin-inline-start: 15px; color: hsl(var(--body-color)) !important; } .common-file[type=file]::file-selector-button:hover { background-color: var(--main-600); border: 1px solid var(--main-600); color: hsl(var(--black)); } /* input File End */ /* Autofill Css */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: hsl(var(--heading-color)) !important; caret-color: hsl(var(--heading-color)); } /* Autofill Css End */ /* Number Arrow None */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; } /* Custom Checkbox & Radio Css Start */ .common-check { display: flex; align-items: center; margin-block-end: 16px; } .common-check:last-child { margin-block-end: 0; } .common-check a { display: inline; } .common-check.common-radio .form-check-input { border-radius: 50%; } .common-check.common-radio .form-check-input:checked { background-color: transparent !important; } .common-check.common-radio .form-check-input:checked::after { visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .common-check.common-radio .form-check-input:checked::before { display: none; } .common-check .form-check-input { transition: 0.2s linear; box-shadow: none; background-color: transparent; box-shadow: none !important; border: 0; position: relative; border-radius: 3px; width: 18px; height: 18px; border: 1px solid hsl(var(--black)/0.4); cursor: pointer; transition: 0.2s linear; margin-block-start: 0; } .common-check .form-check-input::before { position: absolute; content: "\e182"; font-family: "Phosphor"; font-weight: 900; color: hsl(var(--white)); font-size: 12px; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); transition: 0.2s linear; visibility: hidden; opacity: 0; } .common-check .form-check-input::after { position: absolute; content: ""; inset-block-start: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%) scale(0.2); transform: translate(-50%, -50%) scale(0.2); width: 10px; height: 10px; background-color: var(--main-600); border-radius: 50%; transition: 0.2s linear; z-index: 1; visibility: hidden; opacity: 0; } .common-check .form-check-input:checked { background-color: hsl(var(--main)) !important; border-color: hsl(var(--main)) !important; box-shadow: none; } .common-check .form-check-input:checked[type=checkbox] { background-image: none; } .common-check .form-check-input:checked::before { visibility: visible; opacity: 1; } /* Custom Checkbox & Radio Css End */ /* Switch Css Start */ .form-switch { padding-inline-start: 0; } .form-switch .form-check-input { box-shadow: none !important; margin: 0; position: relative; background-color: var(--gray-100); border: 0; background-image: none !important; width: 30px; height: 18px; } .form-switch .form-check-input:checked { background-color: var(--primary-600); } .form-switch .form-check-input:checked::before { inset-inline-start: calc(100% - 15px); transition: 0.2s linear; } .form-switch .form-check-input::before { position: absolute; content: ""; width: 12px; height: 12px; background: #fff; border-radius: 50%; top: 50%; transform: translateY(-50%); inset-inline-start: 3px; transition: 0.2s linear; } /* Switch Css End */ /* ================================= Form Css End =========================== */ /* ================================= Tab Css Start =========================== */ .common-tab .nav-item .nav-link.active { color: hsl(var(--white)) !important; border-color: hsl(var(--main)) !important; } .common-tab .nav-item .nav-link:hover { color: var(--main-600); } /* ================================= Tab Css End =========================== */ /* ======================= Common Table Css Start ======================= */ .table > :not(caption) > * > * { border-bottom: 0; } .table tr th:first-child { padding-inline-start: 0; } .table tr th:last-child { padding-inline-end: 0; } .table tr th, .table tr td { vertical-align: middle; } .table tr th:first-child, .table tr td:first-child { text-align: left; } .table tr th:last-child, .table tr td:last-child { text-align: right; padding-inline-end: 0; } /* ======================= Common Table Css End ======================= */ /* Toast Message Css start */ :root { --success-600: #16A34A; /* Green */ --danger-600: #DC2626; /* Red */ --warning-600: #D97706; /* Amber */ --info-600: #0284C7; /* Sky Blue */ } #toast-container { position: fixed; inset-block-start: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 16px; z-index: 9999; } .toast-message { position: relative; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35); width: 300px; transform: translateX(calc(100% + 20px)); overflow: hidden; background-color: #fff; border-inline-start: 3px solid var(--success-600); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); display: inline-block; padding-block: 12px; padding-inline: 16px; border-radius: 6px; } .toast-message.active { transform: translateX(0); } .toast-message.active .progress__bar::before { animation: progress-bar 3.5s linear forwards; visibility: visible; opacity: 1; } .toast-message:hover .progress__bar::before { animation-play-state: paused; } .toast-message__content { display: flex; align-items: center; gap: 16px; } .toast-message__icon { font-size: 24px; color: var(--success-600); line-height: 1; } .toast-message__title { margin-bottom: 0; font-size: 18px !important; } .toast-message__close { background-color: transparent; border: 0; padding: 0; line-height: 1; font-size: 16px; } .toast-message__text { color: #42494f; font-size: 14px; } .progress__bar { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 100%; background: #fff; } .progress__bar::before { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 100%; width: 100%; background-color: var(--success-600); visibility: hidden; opacity: 0; } @keyframes progress-bar { from { width: 100%; } to { width: 0%; } } .success { border-color: var(--success-600); } .success .toast-message__icon { color: var(--success-600) !important; } .success .progress__bar::before { background-color: var(--success-600); } .danger { border-color: var(--danger-600); } .danger .toast-message__icon { color: var(--danger-600) !important; } .danger .progress__bar::before { background-color: var(--danger-600); } .warning { border-color: var(--warning-600); } .warning .toast-message__icon { color: var(--warning-600) !important; } .warning .progress__bar::before { background-color: var(--warning-600); } .info { border-color: var(--info-600); } .info .toast-message__icon { color: var(--info-600) !important; } .info .progress__bar::before { background-color: var(--info-600); } /* Toast Message Css End */ /* ================================= Typography Css Start =========================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); color: hsl(var(--body-color)); word-break: break-word; background-color: hsl(var(--white)); min-height: 100vh; display: flex; flex-direction: column; } #scrollSmoother-container { overflow: hidden !important; } p { font-weight: 400; margin: 0; line-height: 1.6; } span { display: inline-block; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; font-family: var(--heading-font); color: hsl(var(--white)); line-height: 1.2; font-weight: 600; } h1, .h1 { font-size: var(--heading-one); } h2, .h2 { font-size: var(--heading-two); } h3, .h3 { font-size: var(--heading-three); } h4, .h4 { font-size: var(--heading-four); } h5, .h5 { font-size: var(--heading-five); } h6, .h6 { font-size: var(--heading-six); } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-weight: inherit; font-size: inherit; color: inherit; transition: 0.2s linear; line-height: inherit; } h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover { color: var(--main-600); } a { display: inline-block; transition: 0.2s linear; text-decoration: none; color: #0661e9; } a:hover { color: #1d72f2; } img { max-width: 100%; height: auto; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; box-shadow: none; } input:focus, input:focus-visible { box-shadow: none; } /* ================================= Typography Css End =========================== */ /* Bg Image Css Start */ .bg-img { background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; } /* Bg Image Css End */ /* hover bg class start */ .bg-main-50 { background-color: var(--main-50) !important; } .bg-main-100 { background-color: var(--main-100) !important; } .bg-main-200 { background-color: var(--main-200) !important; } .bg-main-300 { background-color: var(--main-300) !important; } .bg-main-400 { background-color: var(--main-400) !important; } .bg-main-500 { background-color: var(--main-500) !important; } .bg-main-600 { background-color: var(--main-600) !important; } .bg-main-700 { background-color: var(--main-700) !important; } .bg-main-800 { background-color: var(--main-800) !important; } .bg-main-900 { background-color: var(--main-900) !important; } .bg-main-two-50 { background-color: var(--main-two-50) !important; } .bg-main-two-100 { background-color: var(--main-two-100) !important; } .bg-main-two-200 { background-color: var(--main-two-200) !important; } .bg-main-two-300 { background-color: var(--main-two-300) !important; } .bg-main-two-400 { background-color: var(--main-two-400) !important; } .bg-main-two-500 { background-color: var(--main-two-500) !important; } .bg-main-two-600 { background-color: var(--main-two-600) !important; } .bg-main-two-700 { background-color: var(--main-two-700) !important; } .bg-main-two-800 { background-color: var(--main-two-800) !important; } .bg-main-two-900 { background-color: var(--main-two-900) !important; } .bg-main-three-50 { background-color: var(--main-three-50) !important; } .bg-main-three-100 { background-color: var(--main-three-100) !important; } .bg-main-three-200 { background-color: var(--main-three-200) !important; } .bg-main-three-300 { background-color: var(--main-three-300) !important; } .bg-main-three-400 { background-color: var(--main-three-400) !important; } .bg-main-three-500 { background-color: var(--main-three-500) !important; } .bg-main-three-600 { background-color: var(--main-three-600) !important; } .bg-main-three-700 { background-color: var(--main-three-700) !important; } .bg-main-three-800 { background-color: var(--main-three-800) !important; } .bg-main-three-900 { background-color: var(--main-three-900) !important; } .bg-main-four-50 { background-color: var(--main-four-50) !important; } .bg-main-four-100 { background-color: var(--main-four-100) !important; } .bg-main-four-200 { background-color: var(--main-four-200) !important; } .bg-main-four-300 { background-color: var(--main-four-300) !important; } .bg-main-four-400 { background-color: var(--main-four-400) !important; } .bg-main-four-500 { background-color: var(--main-four-500) !important; } .bg-main-four-600 { background-color: var(--main-four-600) !important; } .bg-main-four-700 { background-color: var(--main-four-700) !important; } .bg-main-four-800 { background-color: var(--main-four-800) !important; } .bg-main-four-900 { background-color: var(--main-four-900) !important; } .bg-main-five-50 { background-color: var(--main-five-50) !important; } .bg-main-five-100 { background-color: var(--main-five-100) !important; } .bg-main-five-200 { background-color: var(--main-five-200) !important; } .bg-main-five-300 { background-color: var(--main-five-300) !important; } .bg-main-five-400 { background-color: var(--main-five-400) !important; } .bg-main-five-500 { background-color: var(--main-five-500) !important; } .bg-main-five-600 { background-color: var(--main-five-600) !important; } .bg-main-five-700 { background-color: var(--main-five-700) !important; } .bg-main-five-800 { background-color: var(--main-five-800) !important; } .bg-main-five-900 { background-color: var(--main-five-900) !important; } .bg-main-six-50 { background-color: var(--main-six-50) !important; } .bg-main-six-100 { background-color: var(--main-six-100) !important; } .bg-main-six-200 { background-color: var(--main-six-200) !important; } .bg-main-six-300 { background-color: var(--main-six-300) !important; } .bg-main-six-400 { background-color: var(--main-six-400) !important; } .bg-main-six-500 { background-color: var(--main-six-500) !important; } .bg-main-six-600 { background-color: var(--main-six-600) !important; } .bg-main-six-700 { background-color: var(--main-six-700) !important; } .bg-main-six-800 { background-color: var(--main-six-800) !important; } .bg-main-six-900 { background-color: var(--main-six-900) !important; } .bg-main-seven-50 { background-color: var(--main-seven-50) !important; } .bg-main-seven-100 { background-color: var(--main-seven-100) !important; } .bg-main-seven-200 { background-color: var(--main-seven-200) !important; } .bg-main-seven-300 { background-color: var(--main-seven-300) !important; } .bg-main-seven-400 { background-color: var(--main-seven-400) !important; } .bg-main-seven-500 { background-color: var(--main-seven-500) !important; } .bg-main-seven-600 { background-color: var(--main-seven-600) !important; } .bg-main-seven-700 { background-color: var(--main-seven-700) !important; } .bg-main-seven-800 { background-color: var(--main-seven-800) !important; } .bg-main-seven-900 { background-color: var(--main-seven-900) !important; } .bg-neutral-50 { background-color: var(--neutral-50) !important; } .bg-neutral-100 { background-color: var(--neutral-100) !important; } .bg-neutral-200 { background-color: var(--neutral-200) !important; } .bg-neutral-300 { background-color: var(--neutral-300) !important; } .bg-neutral-400 { background-color: var(--neutral-400) !important; } .bg-neutral-500 { background-color: var(--neutral-500) !important; } .bg-neutral-600 { background-color: var(--neutral-600) !important; } .bg-neutral-700 { background-color: var(--neutral-700) !important; } .bg-neutral-800 { background-color: var(--neutral-800) !important; } .bg-neutral-900 { background-color: var(--neutral-900) !important; } .bg-neutral-950 { background-color: var(--neutral-950) !important; } .hover-bg-main-50:hover { background-color: var(--main-50) !important; } .hover-bg-main-100:hover { background-color: var(--main-100) !important; } .hover-bg-main-200:hover { background-color: var(--main-200) !important; } .hover-bg-main-300:hover { background-color: var(--main-300) !important; } .hover-bg-main-400:hover { background-color: var(--main-400) !important; } .hover-bg-main-500:hover { background-color: var(--main-500) !important; } .hover-bg-main-600:hover { background-color: var(--main-600) !important; } .hover-bg-main-700:hover { background-color: var(--main-700) !important; } .hover-bg-main-800:hover { background-color: var(--main-800) !important; } .hover-bg-main-900:hover { background-color: var(--main-900) !important; } .hover-bg-main-two-50:hover { background-color: var(--main-two-50) !important; } .hover-bg-main-two-100:hover { background-color: var(--main-two-100) !important; } .hover-bg-main-two-200:hover { background-color: var(--main-two-200) !important; } .hover-bg-main-two-300:hover { background-color: var(--main-two-300) !important; } .hover-bg-main-two-400:hover { background-color: var(--main-two-400) !important; } .hover-bg-main-two-500:hover { background-color: var(--main-two-500) !important; } .hover-bg-main-two-600:hover { background-color: var(--main-two-600) !important; } .hover-bg-main-two-700:hover { background-color: var(--main-two-700) !important; } .hover-bg-main-two-800:hover { background-color: var(--main-two-800) !important; } .hover-bg-main-two-900:hover { background-color: var(--main-two-900) !important; } .hover-bg-main-three-50:hover { background-color: var(--main-three-50) !important; } .hover-bg-main-three-100:hover { background-color: var(--main-three-100) !important; } .hover-bg-main-three-200:hover { background-color: var(--main-three-200) !important; } .hover-bg-main-three-300:hover { background-color: var(--main-three-300) !important; } .hover-bg-main-three-400:hover { background-color: var(--main-three-400) !important; } .hover-bg-main-three-500:hover { background-color: var(--main-three-500) !important; } .hover-bg-main-three-600:hover { background-color: var(--main-three-600) !important; } .hover-bg-main-three-700:hover { background-color: var(--main-three-700) !important; } .hover-bg-main-three-800:hover { background-color: var(--main-three-800) !important; } .hover-bg-main-three-900:hover { background-color: var(--main-three-900) !important; } .hover-bg-main-four-50:hover { background-color: var(--main-four-50) !important; } .hover-bg-main-four-100:hover { background-color: var(--main-four-100) !important; } .hover-bg-main-four-200:hover { background-color: var(--main-four-200) !important; } .hover-bg-main-four-300:hover { background-color: var(--main-four-300) !important; } .hover-bg-main-four-400:hover { background-color: var(--main-four-400) !important; } .hover-bg-main-four-500:hover { background-color: var(--main-four-500) !important; } .hover-bg-main-four-600:hover { background-color: var(--main-four-600) !important; } .hover-bg-main-four-700:hover { background-color: var(--main-four-700) !important; } .hover-bg-main-four-800:hover { background-color: var(--main-four-800) !important; } .hover-bg-main-four-900:hover { background-color: var(--main-four-900) !important; } .hover-bg-main-five-50:hover { background-color: var(--main-five-50) !important; } .hover-bg-main-five-100:hover { background-color: var(--main-five-100) !important; } .hover-bg-main-five-200:hover { background-color: var(--main-five-200) !important; } .hover-bg-main-five-300:hover { background-color: var(--main-five-300) !important; } .hover-bg-main-five-400:hover { background-color: var(--main-five-400) !important; } .hover-bg-main-five-500:hover { background-color: var(--main-five-500) !important; } .hover-bg-main-five-600:hover { background-color: var(--main-five-600) !important; } .hover-bg-main-five-700:hover { background-color: var(--main-five-700) !important; } .hover-bg-main-five-800:hover { background-color: var(--main-five-800) !important; } .hover-bg-main-five-900:hover { background-color: var(--main-five-900) !important; } .hover-bg-main-six-50:hover { background-color: var(--main-six-50) !important; } .hover-bg-main-six-100:hover { background-color: var(--main-six-100) !important; } .hover-bg-main-six-200:hover { background-color: var(--main-six-200) !important; } .hover-bg-main-six-300:hover { background-color: var(--main-six-300) !important; } .hover-bg-main-six-400:hover { background-color: var(--main-six-400) !important; } .hover-bg-main-six-500:hover { background-color: var(--main-six-500) !important; } .hover-bg-main-six-600:hover { background-color: var(--main-six-600) !important; } .hover-bg-main-six-700:hover { background-color: var(--main-six-700) !important; } .hover-bg-main-six-800:hover { background-color: var(--main-six-800) !important; } .hover-bg-main-six-900:hover { background-color: var(--main-six-900) !important; } .hover-bg-main-seven-50:hover { background-color: var(--main-seven-50) !important; } .hover-bg-main-seven-100:hover { background-color: var(--main-seven-100) !important; } .hover-bg-main-seven-200:hover { background-color: var(--main-seven-200) !important; } .hover-bg-main-seven-300:hover { background-color: var(--main-seven-300) !important; } .hover-bg-main-seven-400:hover { background-color: var(--main-seven-400) !important; } .hover-bg-main-seven-500:hover { background-color: var(--main-seven-500) !important; } .hover-bg-main-seven-600:hover { background-color: var(--main-seven-600) !important; } .hover-bg-main-seven-700:hover { background-color: var(--main-seven-700) !important; } .hover-bg-main-seven-800:hover { background-color: var(--main-seven-800) !important; } .hover-bg-main-seven-900:hover { background-color: var(--main-seven-900) !important; } .hover-bg-neutral-50:hover { background-color: var(--neutral-50) !important; } .hover-bg-neutral-100:hover { background-color: var(--neutral-100) !important; } .hover-bg-neutral-200:hover { background-color: var(--neutral-200) !important; } .hover-bg-neutral-300:hover { background-color: var(--neutral-300) !important; } .hover-bg-neutral-400:hover { background-color: var(--neutral-400) !important; } .hover-bg-neutral-500:hover { background-color: var(--neutral-500) !important; } .hover-bg-neutral-600:hover { background-color: var(--neutral-600) !important; } .hover-bg-neutral-700:hover { background-color: var(--neutral-700) !important; } .hover-bg-neutral-800:hover { background-color: var(--neutral-800) !important; } .hover-bg-neutral-900:hover { background-color: var(--neutral-900) !important; } .hover-bg-neutral-950:hover { background-color: var(--neutral-950) !important; } .hover-bg-white:hover { background-color: hsl(var(--white)) !important; } .bg-white-08 { background-color: hsl(var(--white)/0.08); } .bg-white-13 { background-color: hsl(var(--white)/0.13); } .bg-white-7 { background-color: hsl(var(--white)/0.7); } .bg-white-06 { background-color: hsl(var(--white)/0.06); } .bg-black { background-color: hsl(var(--black)) !important; } .bg-img { background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; width: 100%; height: 100%; } /* hover bg class end */ .border-main-50 { border-color: var(--main-50) !important; } .border-main-100 { border-color: var(--main-100) !important; } .border-main-200 { border-color: var(--main-200) !important; } .border-main-300 { border-color: var(--main-300) !important; } .border-main-400 { border-color: var(--main-400) !important; } .border-main-500 { border-color: var(--main-500) !important; } .border-main-600 { border-color: var(--main-600) !important; } .border-main-700 { border-color: var(--main-700) !important; } .border-main-800 { border-color: var(--main-800) !important; } .border-main-900 { border-color: var(--main-900) !important; } .border-main-two-50 { border-color: var(--main-two-50) !important; } .border-main-two-100 { border-color: var(--main-two-100) !important; } .border-main-two-200 { border-color: var(--main-two-200) !important; } .border-main-two-300 { border-color: var(--main-two-300) !important; } .border-main-two-400 { border-color: var(--main-two-400) !important; } .border-main-two-500 { border-color: var(--main-two-500) !important; } .border-main-two-600 { border-color: var(--main-two-600) !important; } .border-main-two-700 { border-color: var(--main-two-700) !important; } .border-main-two-800 { border-color: var(--main-two-800) !important; } .border-main-two-900 { border-color: var(--main-two-900) !important; } .border-main-three-50 { border-color: var(--main-three-50) !important; } .border-main-three-100 { border-color: var(--main-three-100) !important; } .border-main-three-200 { border-color: var(--main-three-200) !important; } .border-main-three-300 { border-color: var(--main-three-300) !important; } .border-main-three-400 { border-color: var(--main-three-400) !important; } .border-main-three-500 { border-color: var(--main-three-500) !important; } .border-main-three-600 { border-color: var(--main-three-600) !important; } .border-main-three-700 { border-color: var(--main-three-700) !important; } .border-main-three-800 { border-color: var(--main-three-800) !important; } .border-main-three-900 { border-color: var(--main-three-900) !important; } .border-main-four-50 { border-color: var(--main-four-50) !important; } .border-main-four-100 { border-color: var(--main-four-100) !important; } .border-main-four-200 { border-color: var(--main-four-200) !important; } .border-main-four-300 { border-color: var(--main-four-300) !important; } .border-main-four-400 { border-color: var(--main-four-400) !important; } .border-main-four-500 { border-color: var(--main-four-500) !important; } .border-main-four-600 { border-color: var(--main-four-600) !important; } .border-main-four-700 { border-color: var(--main-four-700) !important; } .border-main-four-800 { border-color: var(--main-four-800) !important; } .border-main-four-900 { border-color: var(--main-four-900) !important; } .border-main-five-50 { border-color: var(--main-five-50) !important; } .border-main-five-100 { border-color: var(--main-five-100) !important; } .border-main-five-200 { border-color: var(--main-five-200) !important; } .border-main-five-300 { border-color: var(--main-five-300) !important; } .border-main-five-400 { border-color: var(--main-five-400) !important; } .border-main-five-500 { border-color: var(--main-five-500) !important; } .border-main-five-600 { border-color: var(--main-five-600) !important; } .border-main-five-700 { border-color: var(--main-five-700) !important; } .border-main-five-800 { border-color: var(--main-five-800) !important; } .border-main-five-900 { border-color: var(--main-five-900) !important; } .border-main-six-50 { border-color: var(--main-six-50) !important; } .border-main-six-100 { border-color: var(--main-six-100) !important; } .border-main-six-200 { border-color: var(--main-six-200) !important; } .border-main-six-300 { border-color: var(--main-six-300) !important; } .border-main-six-400 { border-color: var(--main-six-400) !important; } .border-main-six-500 { border-color: var(--main-six-500) !important; } .border-main-six-600 { border-color: var(--main-six-600) !important; } .border-main-six-700 { border-color: var(--main-six-700) !important; } .border-main-six-800 { border-color: var(--main-six-800) !important; } .border-main-six-900 { border-color: var(--main-six-900) !important; } .border-main-seven-50 { border-color: var(--main-seven-50) !important; } .border-main-seven-100 { border-color: var(--main-seven-100) !important; } .border-main-seven-200 { border-color: var(--main-seven-200) !important; } .border-main-seven-300 { border-color: var(--main-seven-300) !important; } .border-main-seven-400 { border-color: var(--main-seven-400) !important; } .border-main-seven-500 { border-color: var(--main-seven-500) !important; } .border-main-seven-600 { border-color: var(--main-seven-600) !important; } .border-main-seven-700 { border-color: var(--main-seven-700) !important; } .border-main-seven-800 { border-color: var(--main-seven-800) !important; } .border-main-seven-900 { border-color: var(--main-seven-900) !important; } .border-neutral-50 { border-color: var(--neutral-50) !important; } .border-neutral-100 { border-color: var(--neutral-100) !important; } .border-neutral-200 { border-color: var(--neutral-200) !important; } .border-neutral-300 { border-color: var(--neutral-300) !important; } .border-neutral-400 { border-color: var(--neutral-400) !important; } .border-neutral-500 { border-color: var(--neutral-500) !important; } .border-neutral-600 { border-color: var(--neutral-600) !important; } .border-neutral-700 { border-color: var(--neutral-700) !important; } .border-neutral-800 { border-color: var(--neutral-800) !important; } .border-neutral-900 { border-color: var(--neutral-900) !important; } .border-neutral-950 { border-color: var(--neutral-950) !important; } .hover-border-main-50:hover { border-color: var(--main-50) !important; } .hover-border-main-100:hover { border-color: var(--main-100) !important; } .hover-border-main-200:hover { border-color: var(--main-200) !important; } .hover-border-main-300:hover { border-color: var(--main-300) !important; } .hover-border-main-400:hover { border-color: var(--main-400) !important; } .hover-border-main-500:hover { border-color: var(--main-500) !important; } .hover-border-main-600:hover { border-color: var(--main-600) !important; } .hover-border-main-700:hover { border-color: var(--main-700) !important; } .hover-border-main-800:hover { border-color: var(--main-800) !important; } .hover-border-main-900:hover { border-color: var(--main-900) !important; } .hover-border-main-two-50:hover { border-color: var(--main-two-50) !important; } .hover-border-main-two-100:hover { border-color: var(--main-two-100) !important; } .hover-border-main-two-200:hover { border-color: var(--main-two-200) !important; } .hover-border-main-two-300:hover { border-color: var(--main-two-300) !important; } .hover-border-main-two-400:hover { border-color: var(--main-two-400) !important; } .hover-border-main-two-500:hover { border-color: var(--main-two-500) !important; } .hover-border-main-two-600:hover { border-color: var(--main-two-600) !important; } .hover-border-main-two-700:hover { border-color: var(--main-two-700) !important; } .hover-border-main-two-800:hover { border-color: var(--main-two-800) !important; } .hover-border-main-two-900:hover { border-color: var(--main-two-900) !important; } .hover-border-main-three-50:hover { border-color: var(--main-three-50) !important; } .hover-border-main-three-100:hover { border-color: var(--main-three-100) !important; } .hover-border-main-three-200:hover { border-color: var(--main-three-200) !important; } .hover-border-main-three-300:hover { border-color: var(--main-three-300) !important; } .hover-border-main-three-400:hover { border-color: var(--main-three-400) !important; } .hover-border-main-three-500:hover { border-color: var(--main-three-500) !important; } .hover-border-main-three-600:hover { border-color: var(--main-three-600) !important; } .hover-border-main-three-700:hover { border-color: var(--main-three-700) !important; } .hover-border-main-three-800:hover { border-color: var(--main-three-800) !important; } .hover-border-main-three-900:hover { border-color: var(--main-three-900) !important; } .hover-border-main-four-50:hover { border-color: var(--main-four-50) !important; } .hover-border-main-four-100:hover { border-color: var(--main-four-100) !important; } .hover-border-main-four-200:hover { border-color: var(--main-four-200) !important; } .hover-border-main-four-300:hover { border-color: var(--main-four-300) !important; } .hover-border-main-four-400:hover { border-color: var(--main-four-400) !important; } .hover-border-main-four-500:hover { border-color: var(--main-four-500) !important; } .hover-border-main-four-600:hover { border-color: var(--main-four-600) !important; } .hover-border-main-four-700:hover { border-color: var(--main-four-700) !important; } .hover-border-main-four-800:hover { border-color: var(--main-four-800) !important; } .hover-border-main-four-900:hover { border-color: var(--main-four-900) !important; } .hover-border-main-five-50:hover { border-color: var(--main-five-50) !important; } .hover-border-main-five-100:hover { border-color: var(--main-five-100) !important; } .hover-border-main-five-200:hover { border-color: var(--main-five-200) !important; } .hover-border-main-five-300:hover { border-color: var(--main-five-300) !important; } .hover-border-main-five-400:hover { border-color: var(--main-five-400) !important; } .hover-border-main-five-500:hover { border-color: var(--main-five-500) !important; } .hover-border-main-five-600:hover { border-color: var(--main-five-600) !important; } .hover-border-main-five-700:hover { border-color: var(--main-five-700) !important; } .hover-border-main-five-800:hover { border-color: var(--main-five-800) !important; } .hover-border-main-five-900:hover { border-color: var(--main-five-900) !important; } .hover-border-main-six-50:hover { border-color: var(--main-six-50) !important; } .hover-border-main-six-100:hover { border-color: var(--main-six-100) !important; } .hover-border-main-six-200:hover { border-color: var(--main-six-200) !important; } .hover-border-main-six-300:hover { border-color: var(--main-six-300) !important; } .hover-border-main-six-400:hover { border-color: var(--main-six-400) !important; } .hover-border-main-six-500:hover { border-color: var(--main-six-500) !important; } .hover-border-main-six-600:hover { border-color: var(--main-six-600) !important; } .hover-border-main-six-700:hover { border-color: var(--main-six-700) !important; } .hover-border-main-six-800:hover { border-color: var(--main-six-800) !important; } .hover-border-main-six-900:hover { border-color: var(--main-six-900) !important; } .hover-border-main-seven-50:hover { border-color: var(--main-seven-50) !important; } .hover-border-main-seven-100:hover { border-color: var(--main-seven-100) !important; } .hover-border-main-seven-200:hover { border-color: var(--main-seven-200) !important; } .hover-border-main-seven-300:hover { border-color: var(--main-seven-300) !important; } .hover-border-main-seven-400:hover { border-color: var(--main-seven-400) !important; } .hover-border-main-seven-500:hover { border-color: var(--main-seven-500) !important; } .hover-border-main-seven-600:hover { border-color: var(--main-seven-600) !important; } .hover-border-main-seven-700:hover { border-color: var(--main-seven-700) !important; } .hover-border-main-seven-800:hover { border-color: var(--main-seven-800) !important; } .hover-border-main-seven-900:hover { border-color: var(--main-seven-900) !important; } .hover-border-neutral-50:hover { border-color: var(--neutral-50) !important; } .hover-border-neutral-100:hover { border-color: var(--neutral-100) !important; } .hover-border-neutral-200:hover { border-color: var(--neutral-200) !important; } .hover-border-neutral-300:hover { border-color: var(--neutral-300) !important; } .hover-border-neutral-400:hover { border-color: var(--neutral-400) !important; } .hover-border-neutral-500:hover { border-color: var(--neutral-500) !important; } .hover-border-neutral-600:hover { border-color: var(--neutral-600) !important; } .hover-border-neutral-700:hover { border-color: var(--neutral-700) !important; } .hover-border-neutral-800:hover { border-color: var(--neutral-800) !important; } .hover-border-neutral-900:hover { border-color: var(--neutral-900) !important; } .hover-border-neutral-950:hover { border-color: var(--neutral-950) !important; } .focus-border-main-50:focus { border-color: var(--main-50) !important; } .focus-border-main-100:focus { border-color: var(--main-100) !important; } .focus-border-main-200:focus { border-color: var(--main-200) !important; } .focus-border-main-300:focus { border-color: var(--main-300) !important; } .focus-border-main-400:focus { border-color: var(--main-400) !important; } .focus-border-main-500:focus { border-color: var(--main-500) !important; } .focus-border-main-600:focus { border-color: var(--main-600) !important; } .focus-border-main-700:focus { border-color: var(--main-700) !important; } .focus-border-main-800:focus { border-color: var(--main-800) !important; } .focus-border-main-900:focus { border-color: var(--main-900) !important; } .focus-border-main-two-50:focus { border-color: var(--main-two-50) !important; } .focus-border-main-two-100:focus { border-color: var(--main-two-100) !important; } .focus-border-main-two-200:focus { border-color: var(--main-two-200) !important; } .focus-border-main-two-300:focus { border-color: var(--main-two-300) !important; } .focus-border-main-two-400:focus { border-color: var(--main-two-400) !important; } .focus-border-main-two-500:focus { border-color: var(--main-two-500) !important; } .focus-border-main-two-600:focus { border-color: var(--main-two-600) !important; } .focus-border-main-two-700:focus { border-color: var(--main-two-700) !important; } .focus-border-main-two-800:focus { border-color: var(--main-two-800) !important; } .focus-border-main-two-900:focus { border-color: var(--main-two-900) !important; } .focus-border-main-three-50:focus { border-color: var(--main-three-50) !important; } .focus-border-main-three-100:focus { border-color: var(--main-three-100) !important; } .focus-border-main-three-200:focus { border-color: var(--main-three-200) !important; } .focus-border-main-three-300:focus { border-color: var(--main-three-300) !important; } .focus-border-main-three-400:focus { border-color: var(--main-three-400) !important; } .focus-border-main-three-500:focus { border-color: var(--main-three-500) !important; } .focus-border-main-three-600:focus { border-color: var(--main-three-600) !important; } .focus-border-main-three-700:focus { border-color: var(--main-three-700) !important; } .focus-border-main-three-800:focus { border-color: var(--main-three-800) !important; } .focus-border-main-three-900:focus { border-color: var(--main-three-900) !important; } .focus-border-main-four-50:focus { border-color: var(--main-four-50) !important; } .focus-border-main-four-100:focus { border-color: var(--main-four-100) !important; } .focus-border-main-four-200:focus { border-color: var(--main-four-200) !important; } .focus-border-main-four-300:focus { border-color: var(--main-four-300) !important; } .focus-border-main-four-400:focus { border-color: var(--main-four-400) !important; } .focus-border-main-four-500:focus { border-color: var(--main-four-500) !important; } .focus-border-main-four-600:focus { border-color: var(--main-four-600) !important; } .focus-border-main-four-700:focus { border-color: var(--main-four-700) !important; } .focus-border-main-four-800:focus { border-color: var(--main-four-800) !important; } .focus-border-main-four-900:focus { border-color: var(--main-four-900) !important; } .focus-border-main-five-50:focus { border-color: var(--main-five-50) !important; } .focus-border-main-five-100:focus { border-color: var(--main-five-100) !important; } .focus-border-main-five-200:focus { border-color: var(--main-five-200) !important; } .focus-border-main-five-300:focus { border-color: var(--main-five-300) !important; } .focus-border-main-five-400:focus { border-color: var(--main-five-400) !important; } .focus-border-main-five-500:focus { border-color: var(--main-five-500) !important; } .focus-border-main-five-600:focus { border-color: var(--main-five-600) !important; } .focus-border-main-five-700:focus { border-color: var(--main-five-700) !important; } .focus-border-main-five-800:focus { border-color: var(--main-five-800) !important; } .focus-border-main-five-900:focus { border-color: var(--main-five-900) !important; } .focus-border-main-six-50:focus { border-color: var(--main-six-50) !important; } .focus-border-main-six-100:focus { border-color: var(--main-six-100) !important; } .focus-border-main-six-200:focus { border-color: var(--main-six-200) !important; } .focus-border-main-six-300:focus { border-color: var(--main-six-300) !important; } .focus-border-main-six-400:focus { border-color: var(--main-six-400) !important; } .focus-border-main-six-500:focus { border-color: var(--main-six-500) !important; } .focus-border-main-six-600:focus { border-color: var(--main-six-600) !important; } .focus-border-main-six-700:focus { border-color: var(--main-six-700) !important; } .focus-border-main-six-800:focus { border-color: var(--main-six-800) !important; } .focus-border-main-six-900:focus { border-color: var(--main-six-900) !important; } .focus-border-main-seven-50:focus { border-color: var(--main-seven-50) !important; } .focus-border-main-seven-100:focus { border-color: var(--main-seven-100) !important; } .focus-border-main-seven-200:focus { border-color: var(--main-seven-200) !important; } .focus-border-main-seven-300:focus { border-color: var(--main-seven-300) !important; } .focus-border-main-seven-400:focus { border-color: var(--main-seven-400) !important; } .focus-border-main-seven-500:focus { border-color: var(--main-seven-500) !important; } .focus-border-main-seven-600:focus { border-color: var(--main-seven-600) !important; } .focus-border-main-seven-700:focus { border-color: var(--main-seven-700) !important; } .focus-border-main-seven-800:focus { border-color: var(--main-seven-800) !important; } .focus-border-main-seven-900:focus { border-color: var(--main-seven-900) !important; } .focus-border-neutral-50:focus { border-color: var(--neutral-50) !important; } .focus-border-neutral-100:focus { border-color: var(--neutral-100) !important; } .focus-border-neutral-200:focus { border-color: var(--neutral-200) !important; } .focus-border-neutral-300:focus { border-color: var(--neutral-300) !important; } .focus-border-neutral-400:focus { border-color: var(--neutral-400) !important; } .focus-border-neutral-500:focus { border-color: var(--neutral-500) !important; } .focus-border-neutral-600:focus { border-color: var(--neutral-600) !important; } .focus-border-neutral-700:focus { border-color: var(--neutral-700) !important; } .focus-border-neutral-800:focus { border-color: var(--neutral-800) !important; } .focus-border-neutral-900:focus { border-color: var(--neutral-900) !important; } .focus-border-neutral-950:focus { border-color: var(--neutral-950) !important; } .tw-border-dashed { border-style: dashed !important; } .border-transparent { border-color: transparent !important; } /* Colors class start */ .text-main-50 { color: var(--main-50); } .text-main-100 { color: var(--main-100); } .text-main-200 { color: var(--main-200); } .text-main-300 { color: var(--main-300); } .text-main-400 { color: var(--main-400); } .text-main-500 { color: var(--main-500); } .text-main-600 { color: var(--main-600); } .text-main-700 { color: var(--main-700); } .text-main-800 { color: var(--main-800); } .text-main-900 { color: var(--main-900); } .text-main-two-50 { color: var(--main-two-50); } .text-main-two-100 { color: var(--main-two-100); } .text-main-two-200 { color: var(--main-two-200); } .text-main-two-300 { color: var(--main-two-300); } .text-main-two-400 { color: var(--main-two-400); } .text-main-two-500 { color: var(--main-two-500); } .text-main-two-600 { color: var(--main-two-600); } .text-main-two-700 { color: var(--main-two-700); } .text-main-two-800 { color: var(--main-two-800); } .text-main-two-900 { color: var(--main-two-900); } .text-main-three-50 { color: var(--main-three-50); } .text-main-three-100 { color: var(--main-three-100); } .text-main-three-200 { color: var(--main-three-200); } .text-main-three-300 { color: var(--main-three-300); } .text-main-three-400 { color: var(--main-three-400); } .text-main-three-500 { color: var(--main-three-500); } .text-main-three-600 { color: var(--main-three-600); } .text-main-three-700 { color: var(--main-three-700); } .text-main-three-800 { color: var(--main-three-800); } .text-main-three-900 { color: var(--main-three-900); } .text-main-four-50 { color: var(--main-four-50); } .text-main-four-100 { color: var(--main-four-100); } .text-main-four-200 { color: var(--main-four-200); } .text-main-four-300 { color: var(--main-four-300); } .text-main-four-400 { color: var(--main-four-400); } .text-main-four-500 { color: var(--main-four-500); } .text-main-four-600 { color: var(--main-four-600); } .text-main-four-700 { color: var(--main-four-700); } .text-main-four-800 { color: var(--main-four-800); } .text-main-four-900 { color: var(--main-four-900); } .text-main-five-50 { color: var(--main-five-50); } .text-main-five-100 { color: var(--main-five-100); } .text-main-five-200 { color: var(--main-five-200); } .text-main-five-300 { color: var(--main-five-300); } .text-main-five-400 { color: var(--main-five-400); } .text-main-five-500 { color: var(--main-five-500); } .text-main-five-600 { color: var(--main-five-600); } .text-main-five-700 { color: var(--main-five-700); } .text-main-five-800 { color: var(--main-five-800); } .text-main-five-900 { color: var(--main-five-900); } .text-main-six-50 { color: var(--main-six-50); } .text-main-six-100 { color: var(--main-six-100); } .text-main-six-200 { color: var(--main-six-200); } .text-main-six-300 { color: var(--main-six-300); } .text-main-six-400 { color: var(--main-six-400); } .text-main-six-500 { color: var(--main-six-500); } .text-main-six-600 { color: var(--main-six-600); } .text-main-six-700 { color: var(--main-six-700); } .text-main-six-800 { color: var(--main-six-800); } .text-main-six-900 { color: var(--main-six-900); } .text-main-seven-50 { color: var(--main-seven-50); } .text-main-seven-100 { color: var(--main-seven-100); } .text-main-seven-200 { color: var(--main-seven-200); } .text-main-seven-300 { color: var(--main-seven-300); } .text-main-seven-400 { color: var(--main-seven-400); } .text-main-seven-500 { color: var(--main-seven-500); } .text-main-seven-600 { color: var(--main-seven-600); } .text-main-seven-700 { color: var(--main-seven-700); } .text-main-seven-800 { color: var(--main-seven-800); } .text-main-seven-900 { color: var(--main-seven-900); } .text-neutral-50 { color: var(--neutral-50); } .text-neutral-100 { color: var(--neutral-100); } .text-neutral-200 { color: var(--neutral-200); } .text-neutral-300 { color: var(--neutral-300); } .text-neutral-400 { color: var(--neutral-400); } .text-neutral-500 { color: var(--neutral-500); } .text-neutral-600 { color: var(--neutral-600); } .text-neutral-700 { color: var(--neutral-700); } .text-neutral-800 { color: var(--neutral-800); } .text-neutral-900 { color: var(--neutral-900); } .text-neutral-950 { color: var(--neutral-950); } .text--white { color: hsl(var(--white)); } .text-heading { color: hsl(var(--heading-color)); } .text-body { color: hsl(var(--body-color)); } .text-main { color: var(--main-600); } /* Colors class End */ /* Hover color class start */ .hover-text-main-50:hover { color: var(--main-50) !important; } .hover-text-main-100:hover { color: var(--main-100) !important; } .hover-text-main-200:hover { color: var(--main-200) !important; } .hover-text-main-300:hover { color: var(--main-300) !important; } .hover-text-main-400:hover { color: var(--main-400) !important; } .hover-text-main-500:hover { color: var(--main-500) !important; } .hover-text-main-600:hover { color: var(--main-600) !important; } .hover-text-main-700:hover { color: var(--main-700) !important; } .hover-text-main-800:hover { color: var(--main-800) !important; } .hover-text-main-900:hover { color: var(--main-900) !important; } .hover-text-main-two-50:hover { color: var(--main-two-50) !important; } .hover-text-main-two-100:hover { color: var(--main-two-100) !important; } .hover-text-main-two-200:hover { color: var(--main-two-200) !important; } .hover-text-main-two-300:hover { color: var(--main-two-300) !important; } .hover-text-main-two-400:hover { color: var(--main-two-400) !important; } .hover-text-main-two-500:hover { color: var(--main-two-500) !important; } .hover-text-main-two-600:hover { color: var(--main-two-600) !important; } .hover-text-main-two-700:hover { color: var(--main-two-700) !important; } .hover-text-main-two-800:hover { color: var(--main-two-800) !important; } .hover-text-main-two-900:hover { color: var(--main-two-900) !important; } .hover-text-main-three-50:hover { color: var(--main-three-50) !important; } .hover-text-main-three-100:hover { color: var(--main-three-100) !important; } .hover-text-main-three-200:hover { color: var(--main-three-200) !important; } .hover-text-main-three-300:hover { color: var(--main-three-300) !important; } .hover-text-main-three-400:hover { color: var(--main-three-400) !important; } .hover-text-main-three-500:hover { color: var(--main-three-500) !important; } .hover-text-main-three-600:hover { color: var(--main-three-600) !important; } .hover-text-main-three-700:hover { color: var(--main-three-700) !important; } .hover-text-main-three-800:hover { color: var(--main-three-800) !important; } .hover-text-main-three-900:hover { color: var(--main-three-900) !important; } .hover-text-main-four-50:hover { color: var(--main-four-50) !important; } .hover-text-main-four-100:hover { color: var(--main-four-100) !important; } .hover-text-main-four-200:hover { color: var(--main-four-200) !important; } .hover-text-main-four-300:hover { color: var(--main-four-300) !important; } .hover-text-main-four-400:hover { color: var(--main-four-400) !important; } .hover-text-main-four-500:hover { color: var(--main-four-500) !important; } .hover-text-main-four-600:hover { color: var(--main-four-600) !important; } .hover-text-main-four-700:hover { color: var(--main-four-700) !important; } .hover-text-main-four-800:hover { color: var(--main-four-800) !important; } .hover-text-main-four-900:hover { color: var(--main-four-900) !important; } .hover-text-main-five-50:hover { color: var(--main-five-50) !important; } .hover-text-main-five-100:hover { color: var(--main-five-100) !important; } .hover-text-main-five-200:hover { color: var(--main-five-200) !important; } .hover-text-main-five-300:hover { color: var(--main-five-300) !important; } .hover-text-main-five-400:hover { color: var(--main-five-400) !important; } .hover-text-main-five-500:hover { color: var(--main-five-500) !important; } .hover-text-main-five-600:hover { color: var(--main-five-600) !important; } .hover-text-main-five-700:hover { color: var(--main-five-700) !important; } .hover-text-main-five-800:hover { color: var(--main-five-800) !important; } .hover-text-main-five-900:hover { color: var(--main-five-900) !important; } .hover-text-main-six-50:hover { color: var(--main-six-50) !important; } .hover-text-main-six-100:hover { color: var(--main-six-100) !important; } .hover-text-main-six-200:hover { color: var(--main-six-200) !important; } .hover-text-main-six-300:hover { color: var(--main-six-300) !important; } .hover-text-main-six-400:hover { color: var(--main-six-400) !important; } .hover-text-main-six-500:hover { color: var(--main-six-500) !important; } .hover-text-main-six-600:hover { color: var(--main-six-600) !important; } .hover-text-main-six-700:hover { color: var(--main-six-700) !important; } .hover-text-main-six-800:hover { color: var(--main-six-800) !important; } .hover-text-main-six-900:hover { color: var(--main-six-900) !important; } .hover-text-main-seven-50:hover { color: var(--main-seven-50) !important; } .hover-text-main-seven-100:hover { color: var(--main-seven-100) !important; } .hover-text-main-seven-200:hover { color: var(--main-seven-200) !important; } .hover-text-main-seven-300:hover { color: var(--main-seven-300) !important; } .hover-text-main-seven-400:hover { color: var(--main-seven-400) !important; } .hover-text-main-seven-500:hover { color: var(--main-seven-500) !important; } .hover-text-main-seven-600:hover { color: var(--main-seven-600) !important; } .hover-text-main-seven-700:hover { color: var(--main-seven-700) !important; } .hover-text-main-seven-800:hover { color: var(--main-seven-800) !important; } .hover-text-main-seven-900:hover { color: var(--main-seven-900) !important; } .hover-text-neutral-50:hover { color: var(--neutral-50) !important; } .hover-text-neutral-100:hover { color: var(--neutral-100) !important; } .hover-text-neutral-200:hover { color: var(--neutral-200) !important; } .hover-text-neutral-300:hover { color: var(--neutral-300) !important; } .hover-text-neutral-400:hover { color: var(--neutral-400) !important; } .hover-text-neutral-500:hover { color: var(--neutral-500) !important; } .hover-text-neutral-600:hover { color: var(--neutral-600) !important; } .hover-text-neutral-700:hover { color: var(--neutral-700) !important; } .hover-text-neutral-800:hover { color: var(--neutral-800) !important; } .hover-text-neutral-900:hover { color: var(--neutral-900) !important; } .hover-text-neutral-950:hover { color: var(--neutral-950) !important; } /* Text Color */ .hover-text-white:hover { color: #fff !important; } .hover-text-heading:hover { color: hsl(var(--heading-color)) !important; } .hover-text-body:hover { color: hsl(var(--body-color)) !important; } /* Hover color class end */ .cursor-pointer { cursor: pointer; } .cursor-grab { cursor: grab; } .focus-outline-0:focus-visible, .focus-outline-0:focus { outline: 0 !important; } /* ================================= Classes Css Start =========================== */ @media screen and (min-width: 425px) and (max-width: 575px) { .col-xs-6 { width: 50%; } } .tw-leading-none { line-height: 1; } .opacity-05 { opacity: 0.05; } .opacity-1 { opacity: 0.1; } .home-one-bg { background-color: #101010 !important; } .home-two-bg { background-color: #2c2316 !important; } .home-three-bg { background-color: hsl(var(--white)) !important; } .home-five-bg { background-color: #070125; } /* ================================= Classes Css End =========================== */ /* Font Size Class Start */ .text-inherit { font-size: inherit; } .tw-text-xs { font-size: 0.75rem; } .tw-text-sm { font-size: 0.875rem; } .tw-text-base { font-size: 1rem; } .tw-text-lg { font-size: 1.125rem; } .tw-text-xl { font-size: 1.25rem; } .tw-text-2xl { font-size: 1.5rem; } .tw-text-3xl { font-size: 1.875rem; } /* Font Size Class End */ .tw-text-05 { font-size: 0.125rem; } .tw-text-1 { font-size: 0.25rem; } .tw-text-105 { font-size: 0.375rem; } .tw-text-2 { font-size: 0.5rem; } .tw-text-205 { font-size: 0.625rem; } .tw-text-3 { font-size: 0.75rem; } .tw-text-305 { font-size: 0.875rem; } .tw-text-4 { font-size: 1rem; } .tw-text-405 { font-size: 1.125rem; } .tw-text-5 { font-size: 1.25rem; } .tw-text-505 { font-size: 1.375rem; } .tw-text-6 { font-size: 1.5rem; } .tw-text-605 { font-size: 1.625rem; } .tw-text-7 { font-size: 1.75rem; } .tw-text-705 { font-size: 1.875rem; } .tw-text-8 { font-size: 2rem; } .tw-text-9 { font-size: 2.25rem; } .tw-text-10 { font-size: 2.5rem; } .tw-text-11 { font-size: 2.75rem; } .tw-text-110 { font-size: 2.875rem; } .tw-text-12 { font-size: 3rem; } .tw-text-122 { font-size: 3.125rem; } .tw-text-13 { font-size: 3.25rem; } .tw-text-133 { font-size: 3.375rem; } .tw-text-14 { font-size: 3.5rem; } .tw-text-140 { font-size: 3.625rem; } .tw-text-15 { font-size: 3.75rem; } .tw-text-155 { font-size: 3.875rem; } .tw-text-16 { font-size: 4rem; } .tw-text-17 { font-size: 4.25rem; } .tw-text-18 { font-size: 4.5rem; } .tw-text-19 { font-size: 4.75rem; } .tw-text-20 { font-size: 5rem; } .tw-text-21 { font-size: 5.5rem; } .tw-text-22 { font-size: 5.75rem; } .tw-text-23 { font-size: 6rem; } .tw-text-24 { font-size: 6.25rem; } .tw-text-25 { font-size: 6.5rem; } .tw-text-26 { font-size: 6.75rem; } .tw-text-27 { font-size: 7rem; } .tw-text-28 { font-size: 7.25rem; } .tw-text-29 { font-size: 7.5rem; } .tw-text-30 { font-size: 7.75rem; } .tw-text-31 { font-size: 8rem; } .tw-text-32 { font-size: 8.25rem; } .tw-text-33 { font-size: 8.5rem; } .tw-text-34 { font-size: 8.75rem; } .tw-text-35 { font-size: 9rem; } .tw-text-36 { font-size: 9.25rem; } .tw-text-37 { font-size: 9.5rem; } .tw-text-38 { font-size: 9.75rem; } .tw-text-40 { font-size: 10rem; } .tw-text-45 { font-size: 11.25rem; } .tw-text-47 { font-size: 11.75rem; } .tw-text-63 { font-size: 15.75rem; } .tw-text-83 { font-size: 20.75rem; } /* Font Size Class End */ .font-heading { font-family: var(--heading-font); } .font-body { font-family: var(--body-font); } .font-inter { font-family: var(--inter-font) !important; } /* Height Css Class Start */ .tw-h-05 { height: 0.125rem; } .tw-h-1 { height: 0.25rem; } .tw-h-105 { height: 0.375rem; } .tw-h-2 { height: 0.5rem; } .tw-h-205 { height: 0.625rem; } .tw-h-3 { height: 0.75rem; } .tw-h-305 { height: 0.875rem; } .tw-h-4 { height: 1rem; } .tw-h-405 { height: 1.125rem; } .tw-h-5 { height: 1.25rem; } .tw-h-505 { height: 1.375rem; } .tw-h-6 { height: 1.5rem; } .tw-h-605 { height: 1.625rem; } .tw-h-7 { height: 1.75rem; } .tw-h-705 { height: 1.875rem; } .tw-h-8 { height: 2rem; } .tw-h-9 { height: 2.25rem; } .tw-h-10 { height: 2.5rem; } .tw-h-11 { height: 2.75rem; } .tw-h-110 { height: 2.875rem; } .tw-h-12 { height: 3rem; } .tw-h-122 { height: 3.125rem; } .tw-h-13 { height: 3.25rem; } .tw-h-133 { height: 3.375rem; } .tw-h-14 { height: 3.5rem; } .tw-h-140 { height: 3.625rem; } .tw-h-15 { height: 3.75rem; } .tw-h-155 { height: 3.875rem; } .tw-h-16 { height: 4rem; } .tw-h-17 { height: 4.25rem; } .tw-h-18 { height: 4.5rem; } .tw-h-19 { height: 4.75rem; } .tw-h-20 { height: 5rem; } .tw-h-21 { height: 5.5rem; } .tw-h-22 { height: 5.75rem; } .tw-h-23 { height: 6rem; } .tw-h-24 { height: 6.25rem; } .tw-h-25 { height: 6.5rem; } .tw-h-26 { height: 6.75rem; } .tw-h-27 { height: 7rem; } .tw-h-28 { height: 7.25rem; } .tw-h-29 { height: 7.5rem; } .tw-h-30 { height: 7.75rem; } .tw-h-31 { height: 8rem; } .tw-h-32 { height: 8.25rem; } .tw-h-33 { height: 8.5rem; } .tw-h-34 { height: 8.75rem; } .tw-h-35 { height: 9rem; } .tw-h-36 { height: 9.25rem; } .tw-h-37 { height: 9.5rem; } .tw-h-38 { height: 9.75rem; } .tw-h-40 { height: 10rem; } .tw-h-45 { height: 11.25rem; } .tw-h-47 { height: 11.75rem; } .tw-h-63 { height: 15.75rem; } .tw-h-83 { height: 20.75rem; } .tw-h-px { height: 1px; } .tw-h-screen { height: 100vh; } .tw-h-75-px { height: 75px; } .tw-h-84-px { height: 84px; } .tw-h-92-px { height: 92px; } .tw-h-184-px { height: 184px; } .tw-h-207-px { height: 207px; } .tw-h-300-px { height: 300px; } .tw-h-320-px { height: 320px; } .tw-h-666-px { height: 666px; } .tw-h-730-px { height: 730px; } .tw-h-735-px { height: 735px; } .tw-h-790-px { height: 790px; } .tw-h-1220-px { height: 1220px; } .tw-min-h-184-px { min-height: 184px; } .tw-min-h-210-px { min-height: 210px !important; } /* Height Css Class End */ /* Hover animation white css start */ .hover-animation-white { position: relative; overflow: hidden; } .hover-animation-white:after { content: ""; position: absolute; width: 250%; height: 0%; inset-inline-start: 50%; inset-block-start: 50%; background-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .hover-animation-white:hover:after { height: 250%; transition: all 0.6s linear; background-color: transparent; } /* Hover animation white css end */ /* Gap Css start */ .tw-gap-05 { gap: var(--size-05); } .tw-gap-1 { gap: var(--size-1); } .tw-gap-105 { gap: var(--size-105); } .tw-gap-2 { gap: var(--size-2); } .tw-gap-205 { gap: var(--size-205); } .tw-gap-3 { gap: var(--size-3); } .tw-gap-305 { gap: var(--size-305); } .tw-gap-4 { gap: var(--size-4); } .tw-gap-405 { gap: var(--size-405); } .tw-gap-5 { gap: var(--size-5); } .tw-gap-505 { gap: var(--size-505); } .tw-gap-6 { gap: var(--size-6); } .tw-gap-605 { gap: var(--size-605); } .tw-gap-7 { gap: var(--size-7); } .tw-gap-705 { gap: var(--size-705); } .tw-gap-8 { gap: var(--size-8); } .tw-gap-9 { gap: var(--size-9); } .tw-gap-10 { gap: var(--size-10); } .tw-gap-11 { gap: var(--size-11); } .tw-gap-110 { gap: var(--size-110); } .tw-gap-12 { gap: var(--size-12); } .tw-gap-122 { gap: var(--size-122); } .tw-gap-13 { gap: var(--size-13); } .tw-gap-133 { gap: var(--size-133); } .tw-gap-14 { gap: var(--size-14); } .tw-gap-140 { gap: var(--size-140); } .tw-gap-15 { gap: var(--size-15); } .tw-gap-155 { gap: var(--size-155); } .tw-gap-16 { gap: var(--size-16); } .tw-gap-17 { gap: var(--size-17); } .tw-gap-18 { gap: var(--size-18); } .tw-gap-19 { gap: var(--size-19); } .tw-gap-20 { gap: var(--size-20); } .tw-gap-21 { gap: var(--size-21); } .tw-gap-22 { gap: var(--size-22); } .tw-gap-23 { gap: var(--size-23); } .tw-gap-24 { gap: var(--size-24); } .tw-gap-25 { gap: var(--size-25); } .tw-gap-26 { gap: var(--size-26); } .tw-gap-27 { gap: var(--size-27); } .tw-gap-28 { gap: var(--size-28); } .tw-gap-29 { gap: var(--size-29); } .tw-gap-30 { gap: var(--size-30); } .tw-gap-31 { gap: var(--size-31); } .tw-gap-32 { gap: var(--size-32); } .tw-gap-33 { gap: var(--size-33); } .tw-gap-34 { gap: var(--size-34); } .tw-gap-35 { gap: var(--size-35); } .tw-gap-36 { gap: var(--size-36); } .tw-gap-37 { gap: var(--size-37); } .tw-gap-38 { gap: var(--size-38); } .tw-gap-40 { gap: var(--size-40); } .tw-gap-45 { gap: var(--size-45); } .tw-gap-47 { gap: var(--size-47); } .tw-gap-63 { gap: var(--size-63); } .tw-gap-83 { gap: var(--size-83); } .tw-gap-26-px { gap: clamp(1rem, 0.0938rem + 4.5vw, 1.625rem); } .tw-gap-42-px { gap: clamp(1.5rem, 0.0938rem + 4.5vw, 2.625rem); } .tw-gap-56-px { gap: clamp(1.5rem, -4.48rem + 7.98vw, 3.5rem); } .tw-gap-74-px { gap: clamp(1.5rem, -24.8393rem + 28.0952vw, 4.625rem); } /* Gap Css end */ /* ======================== Group Css Start =============================== */ .group:hover .group-hover-text-white { color: hsl(var(--white)) !important; } .group:hover .group-hover-text-main-600 { color: var(--main-600) !important; } .group:hover .group-hover-bg-white { background-color: hsl(var(--white)) !important; } .group:hover .group-hover-bg-main-600 { background-color: var(--main-600) !important; } .group-hover-text-transition { transition: inherit; } .tw-invisible { visibility: hidden; } .group-item:hover .group-hover-item-visible { visibility: visible; } .group-item:hover .group-hover-item-opacity-1 { opacity: 1 !important; } .group-item:hover .group-hover-item-mt-0 { margin-top: 0; } .group-item:hover .group-hover-item-scale-12 { transform: scale(1.2); } .group-item:hover .group-hover-item-scale-1 { transform: scale(1); } .group-item:hover .group-hover-item-translate-x-0 { transform: translateX(0); } .group-item:hover .group-hover-item-d-block { display: block !important; } .group-item:hover .group-hover-item-d-none { display: none !important; } .group-item:hover .group-hover-item-text-invert-white { filter: brightness(0) invert(1); } .group-item:hover .group-hover-item-text-invert-black { filter: brightness(0) invert(0); } /* ======================== Group Css End =============================== */ /* grid css start */ .grid-cols-2 { grid-template-columns: 1fr 1fr; } @media (min-width: 425px) { .xs-grid-cols-2 { grid-template-columns: 1fr 1fr; } } .grid-col-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } /* grid css end */ /* Inset class start */ .tw-start-0 { inset-inline-start: 0; } .tw-start-50 { inset-inline-start: 50%; } .tw-start-100 { inset-inline-start: 100%; } .tw-start-auto { inset-inline-start: auto; } .tw-end-0 { inset-inline-end: 0; } .tw-end-100 { inset-inline-end: 100%; } .tw-end-auto { inset-inline-end: auto; } /* Inset class End */ /* Line Clamp start */ .line-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; } .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; } .line-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; } /* Line Clamp End */ /* ================================= Margin Css Start =========================== */ .tw-m-05 { margin: var(--size-05); } .tw-m-1 { margin: var(--size-1); } .tw-m-105 { margin: var(--size-105); } .tw-m-2 { margin: var(--size-2); } .tw-m-205 { margin: var(--size-205); } .tw-m-3 { margin: var(--size-3); } .tw-m-305 { margin: var(--size-305); } .tw-m-4 { margin: var(--size-4); } .tw-m-405 { margin: var(--size-405); } .tw-m-5 { margin: var(--size-5); } .tw-m-505 { margin: var(--size-505); } .tw-m-6 { margin: var(--size-6); } .tw-m-605 { margin: var(--size-605); } .tw-m-7 { margin: var(--size-7); } .tw-m-705 { margin: var(--size-705); } .tw-m-8 { margin: var(--size-8); } .tw-m-9 { margin: var(--size-9); } .tw-m-10 { margin: var(--size-10); } .tw-m-11 { margin: var(--size-11); } .tw-m-110 { margin: var(--size-110); } .tw-m-12 { margin: var(--size-12); } .tw-m-122 { margin: var(--size-122); } .tw-m-13 { margin: var(--size-13); } .tw-m-133 { margin: var(--size-133); } .tw-m-14 { margin: var(--size-14); } .tw-m-140 { margin: var(--size-140); } .tw-m-15 { margin: var(--size-15); } .tw-m-155 { margin: var(--size-155); } .tw-m-16 { margin: var(--size-16); } .tw-m-17 { margin: var(--size-17); } .tw-m-18 { margin: var(--size-18); } .tw-m-19 { margin: var(--size-19); } .tw-m-20 { margin: var(--size-20); } .tw-m-21 { margin: var(--size-21); } .tw-m-22 { margin: var(--size-22); } .tw-m-23 { margin: var(--size-23); } .tw-m-24 { margin: var(--size-24); } .tw-m-25 { margin: var(--size-25); } .tw-m-26 { margin: var(--size-26); } .tw-m-27 { margin: var(--size-27); } .tw-m-28 { margin: var(--size-28); } .tw-m-29 { margin: var(--size-29); } .tw-m-30 { margin: var(--size-30); } .tw-m-31 { margin: var(--size-31); } .tw-m-32 { margin: var(--size-32); } .tw-m-33 { margin: var(--size-33); } .tw-m-34 { margin: var(--size-34); } .tw-m-35 { margin: var(--size-35); } .tw-m-36 { margin: var(--size-36); } .tw-m-37 { margin: var(--size-37); } .tw-m-38 { margin: var(--size-38); } .tw-m-40 { margin: var(--size-40); } .tw-m-45 { margin: var(--size-45); } .tw-m-47 { margin: var(--size-47); } .tw-m-63 { margin: var(--size-63); } .tw-m-83 { margin: var(--size-83); } .tw-mx-05 { margin-inline: var(--size-05); } .tw-mx-1 { margin-inline: var(--size-1); } .tw-mx-105 { margin-inline: var(--size-105); } .tw-mx-2 { margin-inline: var(--size-2); } .tw-mx-205 { margin-inline: var(--size-205); } .tw-mx-3 { margin-inline: var(--size-3); } .tw-mx-305 { margin-inline: var(--size-305); } .tw-mx-4 { margin-inline: var(--size-4); } .tw-mx-405 { margin-inline: var(--size-405); } .tw-mx-5 { margin-inline: var(--size-5); } .tw-mx-505 { margin-inline: var(--size-505); } .tw-mx-6 { margin-inline: var(--size-6); } .tw-mx-605 { margin-inline: var(--size-605); } .tw-mx-7 { margin-inline: var(--size-7); } .tw-mx-705 { margin-inline: var(--size-705); } .tw-mx-8 { margin-inline: var(--size-8); } .tw-mx-9 { margin-inline: var(--size-9); } .tw-mx-10 { margin-inline: var(--size-10); } .tw-mx-11 { margin-inline: var(--size-11); } .tw-mx-110 { margin-inline: var(--size-110); } .tw-mx-12 { margin-inline: var(--size-12); } .tw-mx-122 { margin-inline: var(--size-122); } .tw-mx-13 { margin-inline: var(--size-13); } .tw-mx-133 { margin-inline: var(--size-133); } .tw-mx-14 { margin-inline: var(--size-14); } .tw-mx-140 { margin-inline: var(--size-140); } .tw-mx-15 { margin-inline: var(--size-15); } .tw-mx-155 { margin-inline: var(--size-155); } .tw-mx-16 { margin-inline: var(--size-16); } .tw-mx-17 { margin-inline: var(--size-17); } .tw-mx-18 { margin-inline: var(--size-18); } .tw-mx-19 { margin-inline: var(--size-19); } .tw-mx-20 { margin-inline: var(--size-20); } .tw-mx-21 { margin-inline: var(--size-21); } .tw-mx-22 { margin-inline: var(--size-22); } .tw-mx-23 { margin-inline: var(--size-23); } .tw-mx-24 { margin-inline: var(--size-24); } .tw-mx-25 { margin-inline: var(--size-25); } .tw-mx-26 { margin-inline: var(--size-26); } .tw-mx-27 { margin-inline: var(--size-27); } .tw-mx-28 { margin-inline: var(--size-28); } .tw-mx-29 { margin-inline: var(--size-29); } .tw-mx-30 { margin-inline: var(--size-30); } .tw-mx-31 { margin-inline: var(--size-31); } .tw-mx-32 { margin-inline: var(--size-32); } .tw-mx-33 { margin-inline: var(--size-33); } .tw-mx-34 { margin-inline: var(--size-34); } .tw-mx-35 { margin-inline: var(--size-35); } .tw-mx-36 { margin-inline: var(--size-36); } .tw-mx-37 { margin-inline: var(--size-37); } .tw-mx-38 { margin-inline: var(--size-38); } .tw-mx-40 { margin-inline: var(--size-40); } .tw-mx-45 { margin-inline: var(--size-45); } .tw-mx-47 { margin-inline: var(--size-47); } .tw-mx-63 { margin-inline: var(--size-63); } .tw-mx-83 { margin-inline: var(--size-83); } .tw-my-05 { margin-block: var(--size-05); } .tw-my-1 { margin-block: var(--size-1); } .tw-my-105 { margin-block: var(--size-105); } .tw-my-2 { margin-block: var(--size-2); } .tw-my-205 { margin-block: var(--size-205); } .tw-my-3 { margin-block: var(--size-3); } .tw-my-305 { margin-block: var(--size-305); } .tw-my-4 { margin-block: var(--size-4); } .tw-my-405 { margin-block: var(--size-405); } .tw-my-5 { margin-block: var(--size-5); } .tw-my-505 { margin-block: var(--size-505); } .tw-my-6 { margin-block: var(--size-6); } .tw-my-605 { margin-block: var(--size-605); } .tw-my-7 { margin-block: var(--size-7); } .tw-my-705 { margin-block: var(--size-705); } .tw-my-8 { margin-block: var(--size-8); } .tw-my-9 { margin-block: var(--size-9); } .tw-my-10 { margin-block: var(--size-10); } .tw-my-11 { margin-block: var(--size-11); } .tw-my-110 { margin-block: var(--size-110); } .tw-my-12 { margin-block: var(--size-12); } .tw-my-122 { margin-block: var(--size-122); } .tw-my-13 { margin-block: var(--size-13); } .tw-my-133 { margin-block: var(--size-133); } .tw-my-14 { margin-block: var(--size-14); } .tw-my-140 { margin-block: var(--size-140); } .tw-my-15 { margin-block: var(--size-15); } .tw-my-155 { margin-block: var(--size-155); } .tw-my-16 { margin-block: var(--size-16); } .tw-my-17 { margin-block: var(--size-17); } .tw-my-18 { margin-block: var(--size-18); } .tw-my-19 { margin-block: var(--size-19); } .tw-my-20 { margin-block: var(--size-20); } .tw-my-21 { margin-block: var(--size-21); } .tw-my-22 { margin-block: var(--size-22); } .tw-my-23 { margin-block: var(--size-23); } .tw-my-24 { margin-block: var(--size-24); } .tw-my-25 { margin-block: var(--size-25); } .tw-my-26 { margin-block: var(--size-26); } .tw-my-27 { margin-block: var(--size-27); } .tw-my-28 { margin-block: var(--size-28); } .tw-my-29 { margin-block: var(--size-29); } .tw-my-30 { margin-block: var(--size-30); } .tw-my-31 { margin-block: var(--size-31); } .tw-my-32 { margin-block: var(--size-32); } .tw-my-33 { margin-block: var(--size-33); } .tw-my-34 { margin-block: var(--size-34); } .tw-my-35 { margin-block: var(--size-35); } .tw-my-36 { margin-block: var(--size-36); } .tw-my-37 { margin-block: var(--size-37); } .tw-my-38 { margin-block: var(--size-38); } .tw-my-40 { margin-block: var(--size-40); } .tw-my-45 { margin-block: var(--size-45); } .tw-my-47 { margin-block: var(--size-47); } .tw-my-63 { margin-block: var(--size-63); } .tw-my-83 { margin-block: var(--size-83); } .tw-ms-05 { margin-inline-start: var(--size-05); } .tw-ms-1 { margin-inline-start: var(--size-1); } .tw-ms-105 { margin-inline-start: var(--size-105); } .tw-ms-2 { margin-inline-start: var(--size-2); } .tw-ms-205 { margin-inline-start: var(--size-205); } .tw-ms-3 { margin-inline-start: var(--size-3); } .tw-ms-305 { margin-inline-start: var(--size-305); } .tw-ms-4 { margin-inline-start: var(--size-4); } .tw-ms-405 { margin-inline-start: var(--size-405); } .tw-ms-5 { margin-inline-start: var(--size-5); } .tw-ms-505 { margin-inline-start: var(--size-505); } .tw-ms-6 { margin-inline-start: var(--size-6); } .tw-ms-605 { margin-inline-start: var(--size-605); } .tw-ms-7 { margin-inline-start: var(--size-7); } .tw-ms-705 { margin-inline-start: var(--size-705); } .tw-ms-8 { margin-inline-start: var(--size-8); } .tw-ms-9 { margin-inline-start: var(--size-9); } .tw-ms-10 { margin-inline-start: var(--size-10); } .tw-ms-11 { margin-inline-start: var(--size-11); } .tw-ms-110 { margin-inline-start: var(--size-110); } .tw-ms-12 { margin-inline-start: var(--size-12); } .tw-ms-122 { margin-inline-start: var(--size-122); } .tw-ms-13 { margin-inline-start: var(--size-13); } .tw-ms-133 { margin-inline-start: var(--size-133); } .tw-ms-14 { margin-inline-start: var(--size-14); } .tw-ms-140 { margin-inline-start: var(--size-140); } .tw-ms-15 { margin-inline-start: var(--size-15); } .tw-ms-155 { margin-inline-start: var(--size-155); } .tw-ms-16 { margin-inline-start: var(--size-16); } .tw-ms-17 { margin-inline-start: var(--size-17); } .tw-ms-18 { margin-inline-start: var(--size-18); } .tw-ms-19 { margin-inline-start: var(--size-19); } .tw-ms-20 { margin-inline-start: var(--size-20); } .tw-ms-21 { margin-inline-start: var(--size-21); } .tw-ms-22 { margin-inline-start: var(--size-22); } .tw-ms-23 { margin-inline-start: var(--size-23); } .tw-ms-24 { margin-inline-start: var(--size-24); } .tw-ms-25 { margin-inline-start: var(--size-25); } .tw-ms-26 { margin-inline-start: var(--size-26); } .tw-ms-27 { margin-inline-start: var(--size-27); } .tw-ms-28 { margin-inline-start: var(--size-28); } .tw-ms-29 { margin-inline-start: var(--size-29); } .tw-ms-30 { margin-inline-start: var(--size-30); } .tw-ms-31 { margin-inline-start: var(--size-31); } .tw-ms-32 { margin-inline-start: var(--size-32); } .tw-ms-33 { margin-inline-start: var(--size-33); } .tw-ms-34 { margin-inline-start: var(--size-34); } .tw-ms-35 { margin-inline-start: var(--size-35); } .tw-ms-36 { margin-inline-start: var(--size-36); } .tw-ms-37 { margin-inline-start: var(--size-37); } .tw-ms-38 { margin-inline-start: var(--size-38); } .tw-ms-40 { margin-inline-start: var(--size-40); } .tw-ms-45 { margin-inline-start: var(--size-45); } .tw-ms-47 { margin-inline-start: var(--size-47); } .tw-ms-63 { margin-inline-start: var(--size-63); } .tw-ms-83 { margin-inline-start: var(--size-83); } .tw-me-05 { margin-inline-end: var(--size-05); } .tw-me-1 { margin-inline-end: var(--size-1); } .tw-me-105 { margin-inline-end: var(--size-105); } .tw-me-2 { margin-inline-end: var(--size-2); } .tw-me-205 { margin-inline-end: var(--size-205); } .tw-me-3 { margin-inline-end: var(--size-3); } .tw-me-305 { margin-inline-end: var(--size-305); } .tw-me-4 { margin-inline-end: var(--size-4); } .tw-me-405 { margin-inline-end: var(--size-405); } .tw-me-5 { margin-inline-end: var(--size-5); } .tw-me-505 { margin-inline-end: var(--size-505); } .tw-me-6 { margin-inline-end: var(--size-6); } .tw-me-605 { margin-inline-end: var(--size-605); } .tw-me-7 { margin-inline-end: var(--size-7); } .tw-me-705 { margin-inline-end: var(--size-705); } .tw-me-8 { margin-inline-end: var(--size-8); } .tw-me-9 { margin-inline-end: var(--size-9); } .tw-me-10 { margin-inline-end: var(--size-10); } .tw-me-11 { margin-inline-end: var(--size-11); } .tw-me-110 { margin-inline-end: var(--size-110); } .tw-me-12 { margin-inline-end: var(--size-12); } .tw-me-122 { margin-inline-end: var(--size-122); } .tw-me-13 { margin-inline-end: var(--size-13); } .tw-me-133 { margin-inline-end: var(--size-133); } .tw-me-14 { margin-inline-end: var(--size-14); } .tw-me-140 { margin-inline-end: var(--size-140); } .tw-me-15 { margin-inline-end: var(--size-15); } .tw-me-155 { margin-inline-end: var(--size-155); } .tw-me-16 { margin-inline-end: var(--size-16); } .tw-me-17 { margin-inline-end: var(--size-17); } .tw-me-18 { margin-inline-end: var(--size-18); } .tw-me-19 { margin-inline-end: var(--size-19); } .tw-me-20 { margin-inline-end: var(--size-20); } .tw-me-21 { margin-inline-end: var(--size-21); } .tw-me-22 { margin-inline-end: var(--size-22); } .tw-me-23 { margin-inline-end: var(--size-23); } .tw-me-24 { margin-inline-end: var(--size-24); } .tw-me-25 { margin-inline-end: var(--size-25); } .tw-me-26 { margin-inline-end: var(--size-26); } .tw-me-27 { margin-inline-end: var(--size-27); } .tw-me-28 { margin-inline-end: var(--size-28); } .tw-me-29 { margin-inline-end: var(--size-29); } .tw-me-30 { margin-inline-end: var(--size-30); } .tw-me-31 { margin-inline-end: var(--size-31); } .tw-me-32 { margin-inline-end: var(--size-32); } .tw-me-33 { margin-inline-end: var(--size-33); } .tw-me-34 { margin-inline-end: var(--size-34); } .tw-me-35 { margin-inline-end: var(--size-35); } .tw-me-36 { margin-inline-end: var(--size-36); } .tw-me-37 { margin-inline-end: var(--size-37); } .tw-me-38 { margin-inline-end: var(--size-38); } .tw-me-40 { margin-inline-end: var(--size-40); } .tw-me-45 { margin-inline-end: var(--size-45); } .tw-me-47 { margin-inline-end: var(--size-47); } .tw-me-63 { margin-inline-end: var(--size-63); } .tw-me-83 { margin-inline-end: var(--size-83); } .tw-mt-05 { margin-block-start: var(--size-05); } .tw-mt-1 { margin-block-start: var(--size-1); } .tw-mt-105 { margin-block-start: var(--size-105); } .tw-mt-2 { margin-block-start: var(--size-2); } .tw-mt-205 { margin-block-start: var(--size-205); } .tw-mt-3 { margin-block-start: var(--size-3); } .tw-mt-305 { margin-block-start: var(--size-305); } .tw-mt-4 { margin-block-start: var(--size-4); } .tw-mt-405 { margin-block-start: var(--size-405); } .tw-mt-5 { margin-block-start: var(--size-5); } .tw-mt-505 { margin-block-start: var(--size-505); } .tw-mt-6 { margin-block-start: var(--size-6); } .tw-mt-605 { margin-block-start: var(--size-605); } .tw-mt-7 { margin-block-start: var(--size-7); } .tw-mt-705 { margin-block-start: var(--size-705); } .tw-mt-8 { margin-block-start: var(--size-8); } .tw-mt-9 { margin-block-start: var(--size-9); } .tw-mt-10 { margin-block-start: var(--size-10); } .tw-mt-11 { margin-block-start: var(--size-11); } .tw-mt-110 { margin-block-start: var(--size-110); } .tw-mt-12 { margin-block-start: var(--size-12); } .tw-mt-122 { margin-block-start: var(--size-122); } .tw-mt-13 { margin-block-start: var(--size-13); } .tw-mt-133 { margin-block-start: var(--size-133); } .tw-mt-14 { margin-block-start: var(--size-14); } .tw-mt-140 { margin-block-start: var(--size-140); } .tw-mt-15 { margin-block-start: var(--size-15); } .tw-mt-155 { margin-block-start: var(--size-155); } .tw-mt-16 { margin-block-start: var(--size-16); } .tw-mt-17 { margin-block-start: var(--size-17); } .tw-mt-18 { margin-block-start: var(--size-18); } .tw-mt-19 { margin-block-start: var(--size-19); } .tw-mt-20 { margin-block-start: var(--size-20); } .tw-mt-21 { margin-block-start: var(--size-21); } .tw-mt-22 { margin-block-start: var(--size-22); } .tw-mt-23 { margin-block-start: var(--size-23); } .tw-mt-24 { margin-block-start: var(--size-24); } .tw-mt-25 { margin-block-start: var(--size-25); } .tw-mt-26 { margin-block-start: var(--size-26); } .tw-mt-27 { margin-block-start: var(--size-27); } .tw-mt-28 { margin-block-start: var(--size-28); } .tw-mt-29 { margin-block-start: var(--size-29); } .tw-mt-30 { margin-block-start: var(--size-30); } .tw-mt-31 { margin-block-start: var(--size-31); } .tw-mt-32 { margin-block-start: var(--size-32); } .tw-mt-33 { margin-block-start: var(--size-33); } .tw-mt-34 { margin-block-start: var(--size-34); } .tw-mt-35 { margin-block-start: var(--size-35); } .tw-mt-36 { margin-block-start: var(--size-36); } .tw-mt-37 { margin-block-start: var(--size-37); } .tw-mt-38 { margin-block-start: var(--size-38); } .tw-mt-40 { margin-block-start: var(--size-40); } .tw-mt-45 { margin-block-start: var(--size-45); } .tw-mt-47 { margin-block-start: var(--size-47); } .tw-mt-63 { margin-block-start: var(--size-63); } .tw-mt-83 { margin-block-start: var(--size-83); } .tw-mb-05 { margin-block-end: var(--size-05); } .tw-mb-1 { margin-block-end: var(--size-1); } .tw-mb-105 { margin-block-end: var(--size-105); } .tw-mb-2 { margin-block-end: var(--size-2); } .tw-mb-205 { margin-block-end: var(--size-205); } .tw-mb-3 { margin-block-end: var(--size-3); } .tw-mb-305 { margin-block-end: var(--size-305); } .tw-mb-4 { margin-block-end: var(--size-4); } .tw-mb-405 { margin-block-end: var(--size-405); } .tw-mb-5 { margin-block-end: var(--size-5); } .tw-mb-505 { margin-block-end: var(--size-505); } .tw-mb-6 { margin-block-end: var(--size-6); } .tw-mb-605 { margin-block-end: var(--size-605); } .tw-mb-7 { margin-block-end: var(--size-7); } .tw-mb-705 { margin-block-end: var(--size-705); } .tw-mb-8 { margin-block-end: var(--size-8); } .tw-mb-9 { margin-block-end: var(--size-9); } .tw-mb-10 { margin-block-end: var(--size-10); } .tw-mb-11 { margin-block-end: var(--size-11); } .tw-mb-110 { margin-block-end: var(--size-110); } .tw-mb-12 { margin-block-end: var(--size-12); } .tw-mb-122 { margin-block-end: var(--size-122); } .tw-mb-13 { margin-block-end: var(--size-13); } .tw-mb-133 { margin-block-end: var(--size-133); } .tw-mb-14 { margin-block-end: var(--size-14); } .tw-mb-140 { margin-block-end: var(--size-140); } .tw-mb-15 { margin-block-end: var(--size-15); } .tw-mb-155 { margin-block-end: var(--size-155); } .tw-mb-16 { margin-block-end: var(--size-16); } .tw-mb-17 { margin-block-end: var(--size-17); } .tw-mb-18 { margin-block-end: var(--size-18); } .tw-mb-19 { margin-block-end: var(--size-19); } .tw-mb-20 { margin-block-end: var(--size-20); } .tw-mb-21 { margin-block-end: var(--size-21); } .tw-mb-22 { margin-block-end: var(--size-22); } .tw-mb-23 { margin-block-end: var(--size-23); } .tw-mb-24 { margin-block-end: var(--size-24); } .tw-mb-25 { margin-block-end: var(--size-25); } .tw-mb-26 { margin-block-end: var(--size-26); } .tw-mb-27 { margin-block-end: var(--size-27); } .tw-mb-28 { margin-block-end: var(--size-28); } .tw-mb-29 { margin-block-end: var(--size-29); } .tw-mb-30 { margin-block-end: var(--size-30); } .tw-mb-31 { margin-block-end: var(--size-31); } .tw-mb-32 { margin-block-end: var(--size-32); } .tw-mb-33 { margin-block-end: var(--size-33); } .tw-mb-34 { margin-block-end: var(--size-34); } .tw-mb-35 { margin-block-end: var(--size-35); } .tw-mb-36 { margin-block-end: var(--size-36); } .tw-mb-37 { margin-block-end: var(--size-37); } .tw-mb-38 { margin-block-end: var(--size-38); } .tw-mb-40 { margin-block-end: var(--size-40); } .tw-mb-45 { margin-block-end: var(--size-45); } .tw-mb-47 { margin-block-end: var(--size-47); } .tw-mb-63 { margin-block-end: var(--size-63); } .tw-mb-83 { margin-block-end: var(--size-83); } .tw--ms-16-px { margin-inline-start: -16px; } .tw-ms-auto { margin-inline-start: auto; } .tw-me-auto { margin-inline-end: auto; } .my-120 { margin-block-start: 60px; margin-block-end: 60px; } @media (min-width: 576px) { .my-120 { margin-block-start: 80px; margin-block-end: 80px; } } @media (min-width: 992px) { .my-120 { margin-block-start: 120px; margin-block-end: 120px; } } .mt-120 { margin-block-start: 60px; } @media (min-width: 576px) { .mt-120 { margin-block-start: 80px; } } @media (min-width: 992px) { .mt-120 { margin-block-start: 120px; } } .mb-120 { margin-block-end: 60px; } @media (min-width: 576px) { .mb-120 { margin-block-end: 80px; } } @media (min-width: 992px) { .mb-120 { margin-block-end: 120px; } } .mt-60 { margin-block-start: 30px; } @media (min-width: 576px) { .mt-60 { margin-block-start: 40px; } } @media (min-width: 992px) { .mt-60 { margin-block-start: 60px; } } .mb-60 { margin-block-end: 30px; } @media (min-width: 576px) { .mb-60 { margin-block-end: 40px; } } @media (min-width: 992px) { .mb-60 { margin-block-end: 60px; } } /* ================================= Margin Css End =========================== */ /* Max Height Css Class Start */ .tw-max-h-screen { max-height: 100vh; } /* Max Height Css Class End */ /* Max width Css Class Start */ .max-w-200-px { max-width: 120px; } .max-w-400-px { max-width: 400px; } .max-w-1140-px { max-width: 1140px; } .max-w-1290-px { max-width: 1290px; } /* Max width Css Class End */ /* Overlay Start */ .overlay { position: fixed; width: 100%; height: 100%; content: ""; inset-inline-start: 0; inset-block-start: 0; background-color: #000000bd; z-index: 99; transition: 0.2s linear; visibility: hidden; opacity: 0; cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress; } .overlay.show-overlay { visibility: visible; opacity: 1; } .side-overlay { position: fixed; width: 100%; height: 100%; content: ""; inset-inline-start: 0; inset-block-start: 0; background-color: #000000bd; z-index: 999; transition: 0.2s linear; visibility: hidden; opacity: 0; cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress; } .side-overlay.show { visibility: visible; opacity: 1; } /* Overlay End */ /* ================================= Padding Css Start =========================== */ .tw-p-05 { padding: var(--size-05); } .tw-p-1 { padding: var(--size-1); } .tw-p-105 { padding: var(--size-105); } .tw-p-2 { padding: var(--size-2); } .tw-p-205 { padding: var(--size-205); } .tw-p-3 { padding: var(--size-3); } .tw-p-305 { padding: var(--size-305); } .tw-p-4 { padding: var(--size-4); } .tw-p-405 { padding: var(--size-405); } .tw-p-5 { padding: var(--size-5); } .tw-p-505 { padding: var(--size-505); } .tw-p-6 { padding: var(--size-6); } .tw-p-605 { padding: var(--size-605); } .tw-p-7 { padding: var(--size-7); } .tw-p-705 { padding: var(--size-705); } .tw-p-8 { padding: var(--size-8); } .tw-p-9 { padding: var(--size-9); } .tw-p-10 { padding: var(--size-10); } .tw-p-11 { padding: var(--size-11); } .tw-p-110 { padding: var(--size-110); } .tw-p-12 { padding: var(--size-12); } .tw-p-122 { padding: var(--size-122); } .tw-p-13 { padding: var(--size-13); } .tw-p-133 { padding: var(--size-133); } .tw-p-14 { padding: var(--size-14); } .tw-p-140 { padding: var(--size-140); } .tw-p-15 { padding: var(--size-15); } .tw-p-155 { padding: var(--size-155); } .tw-p-16 { padding: var(--size-16); } .tw-p-17 { padding: var(--size-17); } .tw-p-18 { padding: var(--size-18); } .tw-p-19 { padding: var(--size-19); } .tw-p-20 { padding: var(--size-20); } .tw-p-21 { padding: var(--size-21); } .tw-p-22 { padding: var(--size-22); } .tw-p-23 { padding: var(--size-23); } .tw-p-24 { padding: var(--size-24); } .tw-p-25 { padding: var(--size-25); } .tw-p-26 { padding: var(--size-26); } .tw-p-27 { padding: var(--size-27); } .tw-p-28 { padding: var(--size-28); } .tw-p-29 { padding: var(--size-29); } .tw-p-30 { padding: var(--size-30); } .tw-p-31 { padding: var(--size-31); } .tw-p-32 { padding: var(--size-32); } .tw-p-33 { padding: var(--size-33); } .tw-p-34 { padding: var(--size-34); } .tw-p-35 { padding: var(--size-35); } .tw-p-36 { padding: var(--size-36); } .tw-p-37 { padding: var(--size-37); } .tw-p-38 { padding: var(--size-38); } .tw-p-40 { padding: var(--size-40); } .tw-p-45 { padding: var(--size-45); } .tw-p-47 { padding: var(--size-47); } .tw-p-63 { padding: var(--size-63); } .tw-p-83 { padding: var(--size-83); } .tw-px-05 { padding-inline: var(--size-05); } .tw-px-1 { padding-inline: var(--size-1); } .tw-px-105 { padding-inline: var(--size-105); } .tw-px-2 { padding-inline: var(--size-2); } .tw-px-205 { padding-inline: var(--size-205); } .tw-px-3 { padding-inline: var(--size-3); } .tw-px-305 { padding-inline: var(--size-305); } .tw-px-4 { padding-inline: var(--size-4); } .tw-px-405 { padding-inline: var(--size-405); } .tw-px-5 { padding-inline: var(--size-5); } .tw-px-505 { padding-inline: var(--size-505); } .tw-px-6 { padding-inline: var(--size-6); } .tw-px-605 { padding-inline: var(--size-605); } .tw-px-7 { padding-inline: var(--size-7); } .tw-px-705 { padding-inline: var(--size-705); } .tw-px-8 { padding-inline: var(--size-8); } .tw-px-9 { padding-inline: var(--size-9); } .tw-px-10 { padding-inline: var(--size-10); } .tw-px-11 { padding-inline: var(--size-11); } .tw-px-110 { padding-inline: var(--size-110); } .tw-px-12 { padding-inline: var(--size-12); } .tw-px-122 { padding-inline: var(--size-122); } .tw-px-13 { padding-inline: var(--size-13); } .tw-px-133 { padding-inline: var(--size-133); } .tw-px-14 { padding-inline: var(--size-14); } .tw-px-140 { padding-inline: var(--size-140); } .tw-px-15 { padding-inline: var(--size-15); } .tw-px-155 { padding-inline: var(--size-155); } .tw-px-16 { padding-inline: var(--size-16); } .tw-px-17 { padding-inline: var(--size-17); } .tw-px-18 { padding-inline: var(--size-18); } .tw-px-19 { padding-inline: var(--size-19); } .tw-px-20 { padding-inline: var(--size-20); } .tw-px-21 { padding-inline: var(--size-21); } .tw-px-22 { padding-inline: var(--size-22); } .tw-px-23 { padding-inline: var(--size-23); } .tw-px-24 { padding-inline: var(--size-24); } .tw-px-25 { padding-inline: var(--size-25); } .tw-px-26 { padding-inline: var(--size-26); } .tw-px-27 { padding-inline: var(--size-27); } .tw-px-28 { padding-inline: var(--size-28); } .tw-px-29 { padding-inline: var(--size-29); } .tw-px-30 { padding-inline: var(--size-30); } .tw-px-31 { padding-inline: var(--size-31); } .tw-px-32 { padding-inline: var(--size-32); } .tw-px-33 { padding-inline: var(--size-33); } .tw-px-34 { padding-inline: var(--size-34); } .tw-px-35 { padding-inline: var(--size-35); } .tw-px-36 { padding-inline: var(--size-36); } .tw-px-37 { padding-inline: var(--size-37); } .tw-px-38 { padding-inline: var(--size-38); } .tw-px-40 { padding-inline: var(--size-40); } .tw-px-45 { padding-inline: var(--size-45); } .tw-px-47 { padding-inline: var(--size-47); } .tw-px-63 { padding-inline: var(--size-63); } .tw-px-83 { padding-inline: var(--size-83); } .tw-py-05 { padding-block: var(--size-05); } .tw-py-1 { padding-block: var(--size-1); } .tw-py-105 { padding-block: var(--size-105); } .tw-py-2 { padding-block: var(--size-2); } .tw-py-205 { padding-block: var(--size-205); } .tw-py-3 { padding-block: var(--size-3); } .tw-py-305 { padding-block: var(--size-305); } .tw-py-4 { padding-block: var(--size-4); } .tw-py-405 { padding-block: var(--size-405); } .tw-py-5 { padding-block: var(--size-5); } .tw-py-505 { padding-block: var(--size-505); } .tw-py-6 { padding-block: var(--size-6); } .tw-py-605 { padding-block: var(--size-605); } .tw-py-7 { padding-block: var(--size-7); } .tw-py-705 { padding-block: var(--size-705); } .tw-py-8 { padding-block: var(--size-8); } .tw-py-9 { padding-block: var(--size-9); } .tw-py-10 { padding-block: var(--size-10); } .tw-py-11 { padding-block: var(--size-11); } .tw-py-110 { padding-block: var(--size-110); } .tw-py-12 { padding-block: var(--size-12); } .tw-py-122 { padding-block: var(--size-122); } .tw-py-13 { padding-block: var(--size-13); } .tw-py-133 { padding-block: var(--size-133); } .tw-py-14 { padding-block: var(--size-14); } .tw-py-140 { padding-block: var(--size-140); } .tw-py-15 { padding-block: var(--size-15); } .tw-py-155 { padding-block: var(--size-155); } .tw-py-16 { padding-block: var(--size-16); } .tw-py-17 { padding-block: var(--size-17); } .tw-py-18 { padding-block: var(--size-18); } .tw-py-19 { padding-block: var(--size-19); } .tw-py-20 { padding-block: var(--size-20); } .tw-py-21 { padding-block: var(--size-21); } .tw-py-22 { padding-block: var(--size-22); } .tw-py-23 { padding-block: var(--size-23); } .tw-py-24 { padding-block: var(--size-24); } .tw-py-25 { padding-block: var(--size-25); } .tw-py-26 { padding-block: var(--size-26); } .tw-py-27 { padding-block: var(--size-27); } .tw-py-28 { padding-block: var(--size-28); } .tw-py-29 { padding-block: var(--size-29); } .tw-py-30 { padding-block: var(--size-30); } .tw-py-31 { padding-block: var(--size-31); } .tw-py-32 { padding-block: var(--size-32); } .tw-py-33 { padding-block: var(--size-33); } .tw-py-34 { padding-block: var(--size-34); } .tw-py-35 { padding-block: var(--size-35); } .tw-py-36 { padding-block: var(--size-36); } .tw-py-37 { padding-block: var(--size-37); } .tw-py-38 { padding-block: var(--size-38); } .tw-py-40 { padding-block: var(--size-40); } .tw-py-45 { padding-block: var(--size-45); } .tw-py-47 { padding-block: var(--size-47); } .tw-py-63 { padding-block: var(--size-63); } .tw-py-83 { padding-block: var(--size-83); } .tw-ps-05 { padding-inline-start: var(--size-05); } .tw-ps-1 { padding-inline-start: var(--size-1); } .tw-ps-105 { padding-inline-start: var(--size-105); } .tw-ps-2 { padding-inline-start: var(--size-2); } .tw-ps-205 { padding-inline-start: var(--size-205); } .tw-ps-3 { padding-inline-start: var(--size-3); } .tw-ps-305 { padding-inline-start: var(--size-305); } .tw-ps-4 { padding-inline-start: var(--size-4); } .tw-ps-405 { padding-inline-start: var(--size-405); } .tw-ps-5 { padding-inline-start: var(--size-5); } .tw-ps-505 { padding-inline-start: var(--size-505); } .tw-ps-6 { padding-inline-start: var(--size-6); } .tw-ps-605 { padding-inline-start: var(--size-605); } .tw-ps-7 { padding-inline-start: var(--size-7); } .tw-ps-705 { padding-inline-start: var(--size-705); } .tw-ps-8 { padding-inline-start: var(--size-8); } .tw-ps-9 { padding-inline-start: var(--size-9); } .tw-ps-10 { padding-inline-start: var(--size-10); } .tw-ps-11 { padding-inline-start: var(--size-11); } .tw-ps-110 { padding-inline-start: var(--size-110); } .tw-ps-12 { padding-inline-start: var(--size-12); } .tw-ps-122 { padding-inline-start: var(--size-122); } .tw-ps-13 { padding-inline-start: var(--size-13); } .tw-ps-133 { padding-inline-start: var(--size-133); } .tw-ps-14 { padding-inline-start: var(--size-14); } .tw-ps-140 { padding-inline-start: var(--size-140); } .tw-ps-15 { padding-inline-start: var(--size-15); } .tw-ps-155 { padding-inline-start: var(--size-155); } .tw-ps-16 { padding-inline-start: var(--size-16); } .tw-ps-17 { padding-inline-start: var(--size-17); } .tw-ps-18 { padding-inline-start: var(--size-18); } .tw-ps-19 { padding-inline-start: var(--size-19); } .tw-ps-20 { padding-inline-start: var(--size-20); } .tw-ps-21 { padding-inline-start: var(--size-21); } .tw-ps-22 { padding-inline-start: var(--size-22); } .tw-ps-23 { padding-inline-start: var(--size-23); } .tw-ps-24 { padding-inline-start: var(--size-24); } .tw-ps-25 { padding-inline-start: var(--size-25); } .tw-ps-26 { padding-inline-start: var(--size-26); } .tw-ps-27 { padding-inline-start: var(--size-27); } .tw-ps-28 { padding-inline-start: var(--size-28); } .tw-ps-29 { padding-inline-start: var(--size-29); } .tw-ps-30 { padding-inline-start: var(--size-30); } .tw-ps-31 { padding-inline-start: var(--size-31); } .tw-ps-32 { padding-inline-start: var(--size-32); } .tw-ps-33 { padding-inline-start: var(--size-33); } .tw-ps-34 { padding-inline-start: var(--size-34); } .tw-ps-35 { padding-inline-start: var(--size-35); } .tw-ps-36 { padding-inline-start: var(--size-36); } .tw-ps-37 { padding-inline-start: var(--size-37); } .tw-ps-38 { padding-inline-start: var(--size-38); } .tw-ps-40 { padding-inline-start: var(--size-40); } .tw-ps-45 { padding-inline-start: var(--size-45); } .tw-ps-47 { padding-inline-start: var(--size-47); } .tw-ps-63 { padding-inline-start: var(--size-63); } .tw-ps-83 { padding-inline-start: var(--size-83); } .tw-pe-05 { padding-inline-end: var(--size-05); } .tw-pe-1 { padding-inline-end: var(--size-1); } .tw-pe-105 { padding-inline-end: var(--size-105); } .tw-pe-2 { padding-inline-end: var(--size-2); } .tw-pe-205 { padding-inline-end: var(--size-205); } .tw-pe-3 { padding-inline-end: var(--size-3); } .tw-pe-305 { padding-inline-end: var(--size-305); } .tw-pe-4 { padding-inline-end: var(--size-4); } .tw-pe-405 { padding-inline-end: var(--size-405); } .tw-pe-5 { padding-inline-end: var(--size-5); } .tw-pe-505 { padding-inline-end: var(--size-505); } .tw-pe-6 { padding-inline-end: var(--size-6); } .tw-pe-605 { padding-inline-end: var(--size-605); } .tw-pe-7 { padding-inline-end: var(--size-7); } .tw-pe-705 { padding-inline-end: var(--size-705); } .tw-pe-8 { padding-inline-end: var(--size-8); } .tw-pe-9 { padding-inline-end: var(--size-9); } .tw-pe-10 { padding-inline-end: var(--size-10); } .tw-pe-11 { padding-inline-end: var(--size-11); } .tw-pe-110 { padding-inline-end: var(--size-110); } .tw-pe-12 { padding-inline-end: var(--size-12); } .tw-pe-122 { padding-inline-end: var(--size-122); } .tw-pe-13 { padding-inline-end: var(--size-13); } .tw-pe-133 { padding-inline-end: var(--size-133); } .tw-pe-14 { padding-inline-end: var(--size-14); } .tw-pe-140 { padding-inline-end: var(--size-140); } .tw-pe-15 { padding-inline-end: var(--size-15); } .tw-pe-155 { padding-inline-end: var(--size-155); } .tw-pe-16 { padding-inline-end: var(--size-16); } .tw-pe-17 { padding-inline-end: var(--size-17); } .tw-pe-18 { padding-inline-end: var(--size-18); } .tw-pe-19 { padding-inline-end: var(--size-19); } .tw-pe-20 { padding-inline-end: var(--size-20); } .tw-pe-21 { padding-inline-end: var(--size-21); } .tw-pe-22 { padding-inline-end: var(--size-22); } .tw-pe-23 { padding-inline-end: var(--size-23); } .tw-pe-24 { padding-inline-end: var(--size-24); } .tw-pe-25 { padding-inline-end: var(--size-25); } .tw-pe-26 { padding-inline-end: var(--size-26); } .tw-pe-27 { padding-inline-end: var(--size-27); } .tw-pe-28 { padding-inline-end: var(--size-28); } .tw-pe-29 { padding-inline-end: var(--size-29); } .tw-pe-30 { padding-inline-end: var(--size-30); } .tw-pe-31 { padding-inline-end: var(--size-31); } .tw-pe-32 { padding-inline-end: var(--size-32); } .tw-pe-33 { padding-inline-end: var(--size-33); } .tw-pe-34 { padding-inline-end: var(--size-34); } .tw-pe-35 { padding-inline-end: var(--size-35); } .tw-pe-36 { padding-inline-end: var(--size-36); } .tw-pe-37 { padding-inline-end: var(--size-37); } .tw-pe-38 { padding-inline-end: var(--size-38); } .tw-pe-40 { padding-inline-end: var(--size-40); } .tw-pe-45 { padding-inline-end: var(--size-45); } .tw-pe-47 { padding-inline-end: var(--size-47); } .tw-pe-63 { padding-inline-end: var(--size-63); } .tw-pe-83 { padding-inline-end: var(--size-83); } .tw-pt-05 { padding-block-start: var(--size-05); } .tw-pt-1 { padding-block-start: var(--size-1); } .tw-pt-105 { padding-block-start: var(--size-105); } .tw-pt-2 { padding-block-start: var(--size-2); } .tw-pt-205 { padding-block-start: var(--size-205); } .tw-pt-3 { padding-block-start: var(--size-3); } .tw-pt-305 { padding-block-start: var(--size-305); } .tw-pt-4 { padding-block-start: var(--size-4); } .tw-pt-405 { padding-block-start: var(--size-405); } .tw-pt-5 { padding-block-start: var(--size-5); } .tw-pt-505 { padding-block-start: var(--size-505); } .tw-pt-6 { padding-block-start: var(--size-6); } .tw-pt-605 { padding-block-start: var(--size-605); } .tw-pt-7 { padding-block-start: var(--size-7); } .tw-pt-705 { padding-block-start: var(--size-705); } .tw-pt-8 { padding-block-start: var(--size-8); } .tw-pt-9 { padding-block-start: var(--size-9); } .tw-pt-10 { padding-block-start: var(--size-10); } .tw-pt-11 { padding-block-start: var(--size-11); } .tw-pt-110 { padding-block-start: var(--size-110); } .tw-pt-12 { padding-block-start: var(--size-12); } .tw-pt-122 { padding-block-start: var(--size-122); } .tw-pt-13 { padding-block-start: var(--size-13); } .tw-pt-133 { padding-block-start: var(--size-133); } .tw-pt-14 { padding-block-start: var(--size-14); } .tw-pt-140 { padding-block-start: var(--size-140); } .tw-pt-15 { padding-block-start: var(--size-15); } .tw-pt-155 { padding-block-start: var(--size-155); } .tw-pt-16 { padding-block-start: var(--size-16); } .tw-pt-17 { padding-block-start: var(--size-17); } .tw-pt-18 { padding-block-start: var(--size-18); } .tw-pt-19 { padding-block-start: var(--size-19); } .tw-pt-20 { padding-block-start: var(--size-20); } .tw-pt-21 { padding-block-start: var(--size-21); } .tw-pt-22 { padding-block-start: var(--size-22); } .tw-pt-23 { padding-block-start: var(--size-23); } .tw-pt-24 { padding-block-start: var(--size-24); } .tw-pt-25 { padding-block-start: var(--size-25); } .tw-pt-26 { padding-block-start: var(--size-26); } .tw-pt-27 { padding-block-start: var(--size-27); } .tw-pt-28 { padding-block-start: var(--size-28); } .tw-pt-29 { padding-block-start: var(--size-29); } .tw-pt-30 { padding-block-start: var(--size-30); } .tw-pt-31 { padding-block-start: var(--size-31); } .tw-pt-32 { padding-block-start: var(--size-32); } .tw-pt-33 { padding-block-start: var(--size-33); } .tw-pt-34 { padding-block-start: var(--size-34); } .tw-pt-35 { padding-block-start: var(--size-35); } .tw-pt-36 { padding-block-start: var(--size-36); } .tw-pt-37 { padding-block-start: var(--size-37); } .tw-pt-38 { padding-block-start: var(--size-38); } .tw-pt-40 { padding-block-start: var(--size-40); } .tw-pt-45 { padding-block-start: var(--size-45); } .tw-pt-47 { padding-block-start: var(--size-47); } .tw-pt-63 { padding-block-start: var(--size-63); } .tw-pt-83 { padding-block-start: var(--size-83); } .tw-pb-05 { padding-block-end: var(--size-05); } .tw-pb-1 { padding-block-end: var(--size-1); } .tw-pb-105 { padding-block-end: var(--size-105); } .tw-pb-2 { padding-block-end: var(--size-2); } .tw-pb-205 { padding-block-end: var(--size-205); } .tw-pb-3 { padding-block-end: var(--size-3); } .tw-pb-305 { padding-block-end: var(--size-305); } .tw-pb-4 { padding-block-end: var(--size-4); } .tw-pb-405 { padding-block-end: var(--size-405); } .tw-pb-5 { padding-block-end: var(--size-5); } .tw-pb-505 { padding-block-end: var(--size-505); } .tw-pb-6 { padding-block-end: var(--size-6); } .tw-pb-605 { padding-block-end: var(--size-605); } .tw-pb-7 { padding-block-end: var(--size-7); } .tw-pb-705 { padding-block-end: var(--size-705); } .tw-pb-8 { padding-block-end: var(--size-8); } .tw-pb-9 { padding-block-end: var(--size-9); } .tw-pb-10 { padding-block-end: var(--size-10); } .tw-pb-11 { padding-block-end: var(--size-11); } .tw-pb-110 { padding-block-end: var(--size-110); } .tw-pb-12 { padding-block-end: var(--size-12); } .tw-pb-122 { padding-block-end: var(--size-122); } .tw-pb-13 { padding-block-end: var(--size-13); } .tw-pb-133 { padding-block-end: var(--size-133); } .tw-pb-14 { padding-block-end: var(--size-14); } .tw-pb-140 { padding-block-end: var(--size-140); } .tw-pb-15 { padding-block-end: var(--size-15); } .tw-pb-155 { padding-block-end: var(--size-155); } .tw-pb-16 { padding-block-end: var(--size-16); } .tw-pb-17 { padding-block-end: var(--size-17); } .tw-pb-18 { padding-block-end: var(--size-18); } .tw-pb-19 { padding-block-end: var(--size-19); } .tw-pb-20 { padding-block-end: var(--size-20); } .tw-pb-21 { padding-block-end: var(--size-21); } .tw-pb-22 { padding-block-end: var(--size-22); } .tw-pb-23 { padding-block-end: var(--size-23); } .tw-pb-24 { padding-block-end: var(--size-24); } .tw-pb-25 { padding-block-end: var(--size-25); } .tw-pb-26 { padding-block-end: var(--size-26); } .tw-pb-27 { padding-block-end: var(--size-27); } .tw-pb-28 { padding-block-end: var(--size-28); } .tw-pb-29 { padding-block-end: var(--size-29); } .tw-pb-30 { padding-block-end: var(--size-30); } .tw-pb-31 { padding-block-end: var(--size-31); } .tw-pb-32 { padding-block-end: var(--size-32); } .tw-pb-33 { padding-block-end: var(--size-33); } .tw-pb-34 { padding-block-end: var(--size-34); } .tw-pb-35 { padding-block-end: var(--size-35); } .tw-pb-36 { padding-block-end: var(--size-36); } .tw-pb-37 { padding-block-end: var(--size-37); } .tw-pb-38 { padding-block-end: var(--size-38); } .tw-pb-40 { padding-block-end: var(--size-40); } .tw-pb-45 { padding-block-end: var(--size-45); } .tw-pb-47 { padding-block-end: var(--size-47); } .tw-pb-63 { padding-block-end: var(--size-63); } .tw-pb-83 { padding-block-end: var(--size-83); } .tw-p-36-px { padding: clamp(1rem, -6.1013rem + 9.4763vw, 2.25rem); } .tw-p-48-px { padding: clamp(1.5rem, -12.1677rem + 32.9177vw, 3rem); } .tw-p-60-px { padding: clamp(1.5rem, -12.1677rem + 32.9177vw, 3.75rem); } .py-140 { padding-block-start: 70px; padding-block-end: 70px; } @media (min-width: 576px) { .py-140 { padding-block-start: 80px; padding-block-end: 80px; } } @media (min-width: 992px) { .py-140 { padding-block-start: 120px; padding-block-end: 120px; } } .pt-140 { padding-block-start: 70px; } @media (min-width: 576px) { .pt-140 { padding-block-start: 80px; } } @media (min-width: 992px) { .pt-140 { padding-block-start: 120px; } } .pb-140 { padding-block-end: 70px; } @media (min-width: 576px) { .pb-140 { padding-block-end: 80px; } } @media (min-width: 992px) { .pb-140 { padding-block-end: 120px; } } .py-110 { padding-block-start: 55px; padding-block-end: 55px; } @media (min-width: 576px) { .py-110 { padding-block-start: 80px; padding-block-end: 80px; } } @media (min-width: 992px) { .py-110 { padding-block-start: 120px; padding-block-end: 120px; } } .pt-110 { padding-block-start: 55px; } @media (min-width: 576px) { .pt-110 { padding-block-start: 80px; } } @media (min-width: 992px) { .pt-110 { padding-block-start: 120px; } } .pb-110 { padding-block-end: 55px; } @media (min-width: 576px) { .pb-110 { padding-block-end: 80px; } } @media (min-width: 992px) { .pb-110 { padding-block-end: 120px; } } .py-60 { padding-block-start: 30px; padding-block-end: 30px; } @media (min-width: 576px) { .py-60 { padding-block-start: 40px; padding-block-end: 40px; } } @media (min-width: 992px) { .py-60 { padding-block-start: 60px; padding-block-end: 60px; } } .pt-60 { padding-block-start: 30px; } @media (min-width: 576px) { .pt-60 { padding-block-start: 40px; } } @media (min-width: 992px) { .pt-60 { padding-block-start: 60px; } } .pb-60 { padding-block-end: 30px; } @media (min-width: 576px) { .pb-60 { padding-block-end: 40px; } } @media (min-width: 992px) { .pb-60 { padding-block-end: 60px; } } /* ================================= Padding Css End =========================== */ /* Placeholder Classes Start */ .tw-placeholder-text-neutral-100::placeholder { color: var(--neutral-100); } .tw-placeholder-text-neutral-200::placeholder { color: var(--neutral-200); } .tw-placeholder-text-neutral-300::placeholder { color: var(--neutral-300); } .tw-placeholder-text-neutral-400::placeholder { color: var(--neutral-400); } .tw-placeholder-text-neutral-500::placeholder { color: var(--neutral-500); } .tw-placeholder-text-neutral-600::placeholder { color: var(--neutral-600); } .tw-placeholder-text-neutral-700::placeholder { color: var(--neutral-700); } .tw-placeholder-text-neutral-800::placeholder { color: var(--neutral-800); } .tw-placeholder-text-neutral-900::placeholder { color: var(--neutral-900); } .focus-tw-placeholder-text-hidden:focus::placeholder { opacity: 0; } .tw-placeholder-transition-2::placeholder { transition: 0.2s linear; } /* Placeholder Classes End */ /* Border Radius Css Start */ .tw-rounded { border-radius: 0.25rem; /* 4px */ } .tw-rounded-none { border-radius: 0px; } .tw-rounded-sm { border-radius: 0.125rem; /* 2px */ } .tw-rounded-md { border-radius: 0.375rem; /* 6px */ } .tw-rounded-lg { border-radius: 0.5rem; /* 8px */ } .tw-rounded-xl { border-radius: 0.75rem; /* 12px */ } .tw-rounded-2xl { border-radius: 1rem; /* 16px */ } .tw-rounded-3xl { border-radius: 1.5rem; /* 24px */ } .tw-rounded-4xl { border-radius: 3rem; /* 48px */ } /* Border Radius Css End */ /* Rotate Css Start */ .tw-hover-rotate-360:hover { transform: rotate(260deg); } /* Rotate Css End */ /* Hover Scale Css start */ .tw-scale-04 { transform: scale(0.4); } .tw-scale-08 { transform: scale(0.8); } .hover-scale-09:hover { transform: scale(0.9); } .hover-scale-14:hover { transform: scale(1.4); } .hover-scale-094:hover { transform: scale(0.94); } .hover-scale-098:hover { transform: scale(0.98); } .hover-scale-102:hover { transform: scale(1.02); } .hover-scale-104:hover { transform: scale(1.04); } .hover-scale-106:hover { transform: scale(1.06); } .hover-scale-108:hover { transform: scale(1.08); } .hover-scale-2:hover { transform: scale(1.2); } .hover-scale-20:hover { transform: scale(2); } .hover-scale-30:hover { transform: scale(3); } /* Hover Scale Css End */ /* Active Scale Css End */ .active-scale-09:active { transform: scale(0.9); } .active-scale-094:active { transform: scale(0.94); } .active-scale-098:active { transform: scale(0.98); } .active-scale-102:active { transform: scale(1.02); } /* Active Scale Css End */ /* Hide Scroll bar Css For Custom Modal */ .scroll-hide { position: absolute; overflow-y: hidden; padding-inline-end: 17px; inset-block-start: 0; inset-inline-start: 0; width: 100%; } @media screen and (max-width: 991px) { .scroll-hide { padding-inline-end: 0; } } .scroll-hide-sm { position: absolute; overflow-y: hidden; inset-block-start: 0; inset-inline-start: 0; width: calc(100% - 0px); } /* Hide Scroll bar Css For Custom Modal End */ .scroll-sm::-webkit-scrollbar { width: 6px; } .scroll-sm::-webkit-scrollbar-track { background: hsl(var(--white)); } .scroll-sm::-webkit-scrollbar-thumb { background: #e4e4e4; background: hsl(var(--white)); border-radius: 50px; } @media (max-width: 992px) { .scroll-sm::-webkit-scrollbar-thumb { background: #e4e4e4; } } .scroll-sm::-webkit-scrollbar-thumb:hover { background: #c1c1c1 !important; } .scroll-sm:hover::-webkit-scrollbar-thumb { background: #e4e4e4; } .scroll-sm-horizontal::-webkit-scrollbar { height: 6px; } /* Box shadow start */ .common-shadow { box-shadow: 0 6px 30px 0px #0000000a; } /* Box shadow End */ /* transition Css Class start */ .tw-transition { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .tw-transition-3 { transition: 0.3s; } .tw-transition-4 { transition: 0.4s; } .tw-transition-5 { transition: 0.5s; } .tw-transition-6 { transition: 0.6s; } .tw-transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* transition Css Class End */ .tw-duration-75 { transition-duration: 75ms; } .tw-duration-100 { transition-duration: 100ms; } .tw-duration-150 { transition-duration: 150ms; } .tw-duration-200 { transition-duration: 200ms; } .tw-duration-300 { transition-duration: 300ms; } .tw-duration-500 { transition-duration: 500ms; } /*================================== Translate Css Start ==================================*/ /* Translate X */ .tw-translate-x-50 { transform: var(--translate-x-50); } .tw--translate-x-full { transform: translateX(-100%); } .tw--translate-middle { transform: var(--translate-x-50) var(--translate-y-50); } /* Translate Y */ .tw--translate-y-50 { transform: var(--translate-y-50); } .active--translate-y-scale-9:active { transform: translateY(-4px) scale(0.94); transition: 0.06s; } .hover--translate-y-05:hover { transform: translateY(-2px); } .hover--translate-y-1:hover { transform: translateY(-4px); } .hover--translate-y-2:hover { transform: translateY(-8px); } .active--translate-y-05:active { transform: translateY(-2px); } .active--translate-y-1:active { transform: translateY(-4px); } /* Translate X */ .hover--translate-x-05:hover { transform: translateX(-2px); } .hover--translate-x-1:hover { transform: translateX(-4px); } .hover--translate-x-2:hover { transform: translateX(-8px); } /*================================== Translate Css End ==================================*/ /* Transform Css Start */ .origin-left { transform-origin: left; } .object-top { object-position: top; } /* Transform Css End */ /* Text Decoration Start */ .hover-underline:hover { text-decoration: underline; } .hover-underline-none:hover { text-decoration: none; } /* Text Decoration End */ /* width Css Class start */ .tw-w-05 { width: 0.125rem; } .tw-w-1 { width: 0.25rem; } .tw-w-105 { width: 0.375rem; } .tw-w-2 { width: 0.5rem; } .tw-w-205 { width: 0.625rem; } .tw-w-3 { width: 0.75rem; } .tw-w-305 { width: 0.875rem; } .tw-w-4 { width: 1rem; } .tw-w-405 { width: 1.125rem; } .tw-w-5 { width: 1.25rem; } .tw-w-505 { width: 1.375rem; } .tw-w-6 { width: 1.5rem; } .tw-w-605 { width: 1.625rem; } .tw-w-7 { width: 1.75rem; } .tw-w-705 { width: 1.875rem; } .tw-w-8 { width: 2rem; } .tw-w-9 { width: 2.25rem; } .tw-w-10 { width: 2.5rem; } .tw-w-11 { width: 2.75rem; } .tw-w-110 { width: 2.875rem; } .tw-w-12 { width: 3rem; } .tw-w-122 { width: 3.125rem; } .tw-w-13 { width: 3.25rem; } .tw-w-133 { width: 3.375rem; } .tw-w-14 { width: 3.5rem; } .tw-w-140 { width: 3.625rem; } .tw-w-15 { width: 3.75rem; } .tw-w-155 { width: 3.875rem; } .tw-w-16 { width: 4rem; } .tw-w-17 { width: 4.25rem; } .tw-w-18 { width: 4.5rem; } .tw-w-19 { width: 4.75rem; } .tw-w-20 { width: 5rem; } .tw-w-21 { width: 5.5rem; } .tw-w-22 { width: 5.75rem; } .tw-w-23 { width: 6rem; } .tw-w-24 { width: 6.25rem; } .tw-w-25 { width: 6.5rem; } .tw-w-26 { width: 6.75rem; } .tw-w-27 { width: 7rem; } .tw-w-28 { width: 7.25rem; } .tw-w-29 { width: 7.5rem; } .tw-w-30 { width: 7.75rem; } .tw-w-31 { width: 8rem; } .tw-w-32 { width: 8.25rem; } .tw-w-33 { width: 8.5rem; } .tw-w-34 { width: 8.75rem; } .tw-w-35 { width: 9rem; } .tw-w-36 { width: 9.25rem; } .tw-w-37 { width: 9.5rem; } .tw-w-38 { width: 9.75rem; } .tw-w-40 { width: 10rem; } .tw-w-45 { width: 11.25rem; } .tw-w-47 { width: 11.75rem; } .tw-w-63 { width: 15.75rem; } .tw-w-83 { width: 20.75rem; } .tw-mw-05 { max-width: 0.125rem; } .tw-mw-1 { max-width: 0.25rem; } .tw-mw-105 { max-width: 0.375rem; } .tw-mw-2 { max-width: 0.5rem; } .tw-mw-205 { max-width: 0.625rem; } .tw-mw-3 { max-width: 0.75rem; } .tw-mw-305 { max-width: 0.875rem; } .tw-mw-4 { max-width: 1rem; } .tw-mw-405 { max-width: 1.125rem; } .tw-mw-5 { max-width: 1.25rem; } .tw-mw-505 { max-width: 1.375rem; } .tw-mw-6 { max-width: 1.5rem; } .tw-mw-605 { max-width: 1.625rem; } .tw-mw-7 { max-width: 1.75rem; } .tw-mw-705 { max-width: 1.875rem; } .tw-mw-8 { max-width: 2rem; } .tw-mw-9 { max-width: 2.25rem; } .tw-mw-10 { max-width: 2.5rem; } .tw-mw-11 { max-width: 2.75rem; } .tw-mw-110 { max-width: 2.875rem; } .tw-mw-12 { max-width: 3rem; } .tw-mw-122 { max-width: 3.125rem; } .tw-mw-13 { max-width: 3.25rem; } .tw-mw-133 { max-width: 3.375rem; } .tw-mw-14 { max-width: 3.5rem; } .tw-mw-140 { max-width: 3.625rem; } .tw-mw-15 { max-width: 3.75rem; } .tw-mw-155 { max-width: 3.875rem; } .tw-mw-16 { max-width: 4rem; } .tw-mw-17 { max-width: 4.25rem; } .tw-mw-18 { max-width: 4.5rem; } .tw-mw-19 { max-width: 4.75rem; } .tw-mw-20 { max-width: 5rem; } .tw-mw-21 { max-width: 5.5rem; } .tw-mw-22 { max-width: 5.75rem; } .tw-mw-23 { max-width: 6rem; } .tw-mw-24 { max-width: 6.25rem; } .tw-mw-25 { max-width: 6.5rem; } .tw-mw-26 { max-width: 6.75rem; } .tw-mw-27 { max-width: 7rem; } .tw-mw-28 { max-width: 7.25rem; } .tw-mw-29 { max-width: 7.5rem; } .tw-mw-30 { max-width: 7.75rem; } .tw-mw-31 { max-width: 8rem; } .tw-mw-32 { max-width: 8.25rem; } .tw-mw-33 { max-width: 8.5rem; } .tw-mw-34 { max-width: 8.75rem; } .tw-mw-35 { max-width: 9rem; } .tw-mw-36 { max-width: 9.25rem; } .tw-mw-37 { max-width: 9.5rem; } .tw-mw-38 { max-width: 9.75rem; } .tw-mw-40 { max-width: 10rem; } .tw-mw-45 { max-width: 11.25rem; } .tw-mw-47 { max-width: 11.75rem; } .tw-mw-63 { max-width: 15.75rem; } .tw-mw-83 { max-width: 20.75rem; } .min-w-max { min-width: max-content; } .tw-w-px { width: 1px; } .tw-w-207-px { width: 207px; } .tw-w-232-px { width: 232.667px; } .tw-w-300-px { width: 300px; } .tw-w-330-px { width: 330px; } .tw-w-435-px { width: 435px; } .tw-w-480-px { width: 480px; } .tw-w-510-px { width: 510px; } .tw-w-520-px { width: 520px; } .tw-w-528-px { width: 528px; } .tw-w-550-px { width: 550px; } .tw-w-704-px { width: 704px; } .tw-w-1594-px { width: 1594px; } .tw-w-w-max { width: max-content; } /* width Css Class End */ /* Z index css start */ .tw-z-99 { z-index: 99; } .tw-z-991 { z-index: 991; } .tw-z-999 { z-index: 999; } .z-4 { z-index: 4 !important; } .z-5 { z-index: 5 !important; } /* Z index css End */ /* ======================== Animation Css Start ==================================== */ /* Raw animations start here */ .animation-item:hover .animate__bounce { animation: bounce 1.5s; } .animation-item:hover .animate__wobble { animation: wobble 1.5s ease-in-out; } .animation-item:hover .animate__heartBeat { animation: heartbeat 1.5s ease-in-out; } .animation-item:hover .animate__flipInY { animation: flipInY 1.5s ease-in-out; } .animation-item:hover .animate__swing { animation: swing 1.5s ease-in-out; } @keyframes bounce { 0%, 20%, 53%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes heartbeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes flipInY { 0% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { opacity: 1; -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .animation-scalation { animation: scalation 8s linear infinite; } .animation-upDown { animation: animationUpDown 8s linear infinite; } .animation-rotate-scale { animation: scaleRotate 4.5s ease-in-out infinite; } @keyframes scaleRotate { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2); } 50% { transform: scale(1.2) rotate(180deg); } 75% { transform: scale(1.2) rotate(360deg); } 100% { transform: scale(1) rotate(360deg); } } @keyframes scalation { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } @keyframes animationUpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(-60px); } 100% { transform: translateY(0px); } } .animation-delay-1 { animation-delay: 1s !important; } .animation-delay-2 { animation-delay: 2s; } .animation-delay-3 { animation-delay: 3s; } .animation-rotate-right { animation: rotateRight 30s linear infinite; } @keyframes rotateRight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-24px); } 100% { transform: translateY(0); } } .animated-upDown { animation: floatAnimation 3s ease-in-out infinite; } .left-right-animation { animation: 2.6s leftRightAnimation linear infinite; } @keyframes leftRightAnimation { 0% { transform: translateX(0px); } 50% { transform: translateX(-24px); } 100% { transform: translateX(0px); } } .scale-animation { animation: 4s scaleAnimation linear infinite; } @keyframes scaleAnimation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .animate__wobble__two { animation: wobble 2.4s ease-in-out infinite; } @keyframes rotateImg { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes bounce-shape1 { 0% { transform: translateX(0); } 50% { transform: translateX(60px); } 100% { transform: translateX(0); } } @keyframes bounce-y { 0% { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); } 100% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } } @keyframes bounce-thum-2 { 0% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } } @keyframes rotate-infinte { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes moving { 0% { transform: translatey(0px); } 20% { transform: translateX(-30px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } @keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } /* ======================== Animation Css End ==================================== */ .tw-container-1470-px { max-width: 1470px; } .tw-container-1520-px { max-width: 1520px; } .tw-container-1624-px { max-width: 1624px; } .tw-container-1700-px { max-width: 1700px; } .tw-container-1720-px { max-width: 1720px; } .tw-container-1800-px { max-width: 1800px; } .text-stroke-white { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; } .text-stroke-white-3 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px #fff; } .text-stroke-black { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px hsl(var(--heading-color)); } .text-stroke-neutral-900 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--neutral-900); } .text-stroke-main-600 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--main-600); } .text-stroke-main-three-600 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--main-three-600); } /* ================================= preload Css Start =========================== */ .preloader { position: fixed; height: 100vh; width: 100%; left: 0; top: 0; display: flex; overflow: hidden; align-items: center; justify-content: center; background: transparent; z-index: 999; } .preloader svg { position: absolute; top: 0; width: 100vw; height: 110vh; fill: #111; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; } .preloader.two svg { fill: #1d1d22; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; } .preloader .preloader-heading .load-text { font-size: 30px; font-weight: 600; color: hsl(var(--white)); letter-spacing: 15px; font-family: var(--body-font); text-transform: uppercase; z-index: 20; } .load-text span { -webkit-animation: loading 1s infinite alternate; animation: loading 1s infinite alternate; } .load-text span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .load-text span:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .load-text span:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .load-text span:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .load-text span:nth-child(5) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .load-text span:nth-child(6) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .load-text span:nth-child(7) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes loading { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes loading { 0% { opacity: 1; } 100% { opacity: 0; } } /* ================================= preload Css End =========================== */ /* ============= Header Start Here ======================= */ .header-transparent { position: absolute; width: 100%; inset-block-start: 0; inset-inline-start: 0; margin: auto; z-index: 99; background: transparent; } .header-transparent.fixed-header { position: fixed !important; } @media screen and (max-width: 991px) { .header { padding: 18px 0; } } .header.fixed-header { position: sticky; inset-inline-start: 0; inset-block-start: 0; inset-inline-end: 0; width: 100%; z-index: 9; backdrop-filter: blur(8px); animation: slideDown 0.5s ease-out; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1); background: #111; } @media screen and (max-width: 991px) { .header.fixed-header { inset-block-start: -1px; } } @media screen and (max-width: 1399px) { .header-search { display: none; } } @media screen and (max-width: 575px) { .header-button { display: none; } } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Header Menu and Submenu Css Start */ .nav-menu__item.activePage > a { color: var(--main-600) !important; } .nav-menu__item.activePage > a::before { color: var(--main-600); } .nav-menu__item:hover > a { color: hsl(var(--heading-color)); } @media (min-width: 992px) { .nav-menu__item:hover > a { color: var(--main-600); } } .has-submenu.active > a, .has-submenu.active > a::before { color: var(--main-600); } .has-submenu.active > a::before { transform: translateY(-50%) rotate(180deg) !important; } .has-submenu:hover .nav-submenu { visibility: visible; opacity: 1; transform: scaleY(1); } @media (min-width: 992px) { .has-submenu:hover > a::before { color: var(--main-600); transform: translateY(-50%) rotate(180deg); } } .has-submenu > a { position: relative; } .has-submenu > a::before { position: absolute; content: "\e136"; inset-inline-end: 0; inset-block-start: 52%; transform: translateY(-50%); font-family: "Phosphor"; font-weight: 400; color: hsl(var(--white)); transition: 0.2s linear; font-size: 12px; } /* Submenu Start */ .nav-submenu { box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; min-width: 190px; visibility: hidden; opacity: 0; transform: scaleY(0); transition: 0.4s ease; transform-origin: top center; } .nav-submenu__item.activePage .nav-submenu__link { color: var(--main-600) !important; } .nav-submenu__item:hover a { color: hsl(var(--heading-color)); } @media screen and (max-width: 1399px) { .toggle-mobileMenu { display: none; } } @media screen and (max-width: 991px) { .toggle-mobileMenu { display: block; } } .nav-submenu .nav-submenu__item .nav-submenu__link::before { content: ""; position: absolute; width: 0px; height: 2px; background: var(--main-600); left: -2px; bottom: 18px; transition: all 0.4s ease-in-out; } .nav-submenu .nav-submenu__item .nav-submenu__link:hover { color: var(--main-600); margin-inline-start: 10px; } .nav-submenu .nav-submenu__item .nav-submenu__link:hover::before { width: 10px; } .nav-submenu .nav-submenu__item.activePage .nav-submenu__link { margin-inline-start: 10px; } .nav-submenu .nav-submenu__item.activePage .nav-submenu__link::before { width: 10px; } .header-two { border-bottom: 1px solid rgba(255, 255, 255, 0.19); } @media screen and (max-width: 1199px) { .header-two-call { display: none !important; } } .header-two.fixed-header { border-color: #2c2316; background: #2c2316; } .header-three-toggole:hover img { filter: brightness(0) invert(1); } .header-three.fixed-header { background: #d6e8f4; } .header-four-toggole:hover img { filter: brightness(0) invert(1); } .header-four.fixed-header { background: #101010; } .header-five { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .header-five-menu { border-right: 1px solid rgba(255, 255, 255, 0.07); } .header-five .logo a img { filter: brightness(0) invert(1); } .header-five.fixed-header { border-color: rgba(255, 255, 255, 0.07); background: #070125; } .header-varian .logo img { filter: brightness(0) invert(1); } /* Submenu End */ /* Header Menu and Submenu Css End */ /* ================================= Header Css End =========================== */ .footer { padding-block: 140px 0px; } .footer::before { content: ""; position: absolute; width: 100%; height: 100%; inset-block-start: 0; inset-inline-start: 0; background: rgba(16, 16, 16, 0.55); z-index: -1; } @media screen and (max-width: 767px) { .footer-form { flex-wrap: wrap; } } @media screen and (max-width: 575px) { .footer-col-2 { margin-block-end: 30px; } } @media screen and (max-width: 575px) { .footer-col-3 { margin-inline-start: 0; } } @media screen and (max-width: 767px) { .footer-copyright-wrapper { justify-content: center !important; } } @media screen and (max-width: 1399px) { .footer-copyright-wrapper div { display: none; } } @media screen and (max-width: 991px) { .footer-address { margin-block-start: 50px; } } .footer-social a { background: #292d20; } @media screen and (max-width: 1499px) { .footer-bg-shape { display: none; } } .footer-two { background: #372E22; } .footer-two-social li a { background: rgba(255, 255, 255, 0.16); } .footer-two-shape { inset-block-end: 0; inset-inline-end: 22%; } .footer-two-border::before { content: ""; position: absolute; width: 100%; height: 1px; inset-block-start: 0; inset-inline-start: 0; background: rgba(255, 255, 255, 0.25); } @media screen and (max-width: 767px) { .footer-two-copyright { justify-content: center !important; } } .footer-three { background: #101010; } @media screen and (max-width: 1199px) { .footer-three-form { margin-block-start: 30px; } } .footer-three-tag ul li a { background: rgba(255, 255, 255, 0.18); } .footer-three-shape-1 { inset-inline-start: 0; inset-block-end: 22%; } .footer-four-top { padding-block: 0 106px; } @media screen and (max-width: 1399px) { .footer-four-title { font-size: 9.25rem; } } @media screen and (max-width: 1199px) { .footer-four-title { font-size: 8.25rem; } } @media screen and (max-width: 991px) { .footer-four-title { font-size: 6rem; } } .footer-four-middile { padding-block: 0 114px; } @media screen and (max-width: 1199px) { .footer-four-col-1 { margin-block-end: 40px; } } @media screen and (max-width: 1199px) { .footer-four-col-2 { margin-block-end: 40px; } } .footer-four-col-3 { margin-inline-end: -35px; } @media screen and (max-width: 1399px) { .footer-four-col-3 { margin-inline-end: -30px; margin-inline-start: 0; } } .footer-four-col-4 { margin-inline-end: -10px; } @media screen and (max-width: 1399px) { .footer-four-col-4 { margin-inline-end: -20px; margin-inline-start: 40px; } } @media screen and (max-width: 1199px) { .footer-four-col-4 { margin-inline-start: 0; } } .footer-four-button .tw-btn-circle { width: 190px; height: 190px; border: none; } .footer-four-button .tw-btn-circle:hover span { color: hsl(var(--black)) !important; } @media screen and (max-width: 767px) { .footer-four-copyright { justify-content: center !important; } } .footer-four-shape-1 { inset-block-start: 260px; inset-inline-start: 0; } @media screen and (max-width: 991px) { .footer-five-col-1 { margin-block-end: 60px; } } @media screen and (max-width: 767px) { .footer-five-col-1 { margin-block-end: 60px; width: 250px; } } .footer-five-col-1 .logo img { filter: brightness(0) invert(1); } .footer-five-col-2 { margin-inline-start: -30px; } @media screen and (max-width: 991px) { .footer-five-col-2 { margin-block-end: 60px; } } @media screen and (max-width: 575px) { .footer-five-col-2 { margin-inline-start: 0; } } .footer-five-col-4 { margin-inline-start: -30px; } @media screen and (max-width: 575px) { .footer-five-col-4 { margin-inline-start: 0; } } .footer-five-social li a { border: 1px solid rgba(255, 255, 255, 0.21); } .footer-five-shape-1 { animation: bounce-y 3.5s forwards infinite alternate; } .footer-five-shape-2 { inset-block-start: 0; inset-inline-end: -45px; } .animated-title { font-size: 500px; white-space: nowrap; margin-block-end: -132px; margin-block-start: -80px; } @media screen and (max-width: 1699px) { .animated-title { font-size: 440px; } } @media screen and (max-width: 1499px) { .animated-title { font-size: 390px; } } @media screen and (max-width: 1399px) { .animated-title { font-size: 340px; } } @media screen and (max-width: 1199px) { .animated-title { font-size: 270px; margin-block-end: -60px; margin-block-start: -60px; } } @media screen and (max-width: 991px) { .animated-title { font-size: 220px; } } @media screen and (max-width: 767px) { .animated-title { font-size: 160px; } } @media screen and (max-width: 575px) { .animated-title { font-size: 160px; } } /* Mega menu css start */ .mega-menu { position: absolute; inset-block-start: 100%; background-color: #fff; width: 100%; inset-inline-start: 0; z-index: 99; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; max-height: 800px; overflow-y: auto; overflow-x: hidden; } @media (max-width: 991px) { .mega-menu { margin-block: 16px !important; margin-inline-start: 0 !important; padding-inline-end: 4px !important; } } .mega-menu-item__buttons { transition: all 0.5s; } .mega-menu-item__overlay { background-color: #0000008c; transition: all 0.25s; } .mega-menu-item__buttons { margin-top: -60px; transform: scale(0.8); } .mega-menu-item__buttons .theme-btn { padding-block: 9px; } .mega-menu-item:hover .mega-menu-item__buttons { transition-delay: 0.1s; margin-top: 0px; transform: scale(1); } .mega-menu-item__buttons .theme-btn-main:hover .theme-btn { transform: translateX(40px); } /* Mega menu css end */ /* Mobile Menu Sidebar Start */ .mobile-menu.active { transform: translateX(0%); } .nav-menu--mobile .nav-menu__item > a::before { transform: translateY(-50%) rotate(0deg); } .nav-menu--mobile .nav-menu__link { border-bottom: 1px solid var(--neutral-200) !important; position: relative; padding: 12px 0; padding-inline-end: 16px; } .nav-menu--mobile .nav-submenu { position: static !important; visibility: visible; opacity: 1; box-shadow: none; width: 100%; margin-block-start: 0; padding: 0; margin-inline-start: 16px; display: none; transition: 0s; background: none !important; } .nav-menu--mobile .nav-submenu__link { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--neutral-200) !important; color: hsl(var(--white)); border-radius: 0; } .nav-menu--mobile .nav-submenu__link:hover { background: hsl(var(--heading-color)) !important; color: hsl(var(--main-600)); } .nav-menu--mobile .nav-submenu__item:hover { background-color: transparent; color: var(--main-600); } .nav-menu--mobile .nav-submenu__item::before { display: none; } .nav-menu .mega-menu-item a { color: hsl(var(--black)); } .mobile-menu__menu .nav-menu .mega-menu-item a { color: hsl(var(--white)); } /* Mobile Menu Sidebar Start */ /* ===================== Scroll to Top Start ================================= */ .back-to-top-wrapper { position: fixed; inset-inline-end: 40px; inset-block-end: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s 0s ease-out; } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; inset-block-end: 40px; } .back-to-top-btn { width: 44px; height: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: var(--main-600); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); color: hsl(var(--heading-color)); border-radius: 50%; transition: all 0.3s 0s ease-out; } .back-to-top-btn svg { transform: translateY(-2px); font-weight: 600; } .back-to-top-btn:hover { transform: translateY(-4px); } /* ===================== Scroll to Top End ================================= */ /* Custom Cursor Css Start */ .cursor, .dot { width: 32px; height: 32px; border: 1px solid hsl(var(--white)); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999999; transform: translate(-50%, -50%); visibility: hidden; font-size: 8px; display: flex; justify-content: center; align-items: center; color: #fff; mix-blend-mode: difference; } .dot { width: 4px; height: 4px; background-color: hsl(var(--white)); mix-blend-mode: difference; } /* Custom Cursor Css End */ .search_popup { position: fixed; top: 0; left: 0; width: 100%; background-color: hsl(var(--black)); z-index: 100; padding-top: 70px; padding-bottom: 100px; opacity: 0; backdrop-filter: blur(10px); transform: translateY(calc(-100% - 80px)); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition-delay: 0.5s; z-index: 9999; } .search_popup.search-opened { opacity: 1; transform: translateY(0); transition-delay: 0s; } .search_popup.search-opened .search_form .search_input { transform: translateY(0px); opacity: 1; transition-delay: 0.3s; } .search_popup.search-opened .search_form .search_input::after { width: 100%; transition-delay: 0.5s; } .search_wrapper .search_top { margin-bottom: 80px; } .search_wrapper .search_top .search_logo { max-width: 210px; } .search_wrapper .search_top .search_logo a { display: block; } .search_wrapper .search_top .search_logo a img { filter: brightness(0) invert(1); } .search_wrapper .search_top .search_close .search_close_btn { font-size: 25px; color: hsl(var(--white)); transition: all 0.3s ease-in-out 0s; } .search_wrapper .search_top .search_close .search_close_btn svg { width: 30px; height: 30px; } .search_wrapper .search_top .search_close .search_close_btn:hover { color: var(--main-two-600); transform: rotate(90deg); } .search_wrapper .search_form .search_input { position: relative; height: 80px; transform: translateY(-40px); transition: all 0.3s ease-in-out; transition-delay: 0.5s; opacity: 0; } .search_wrapper .search_form .search_input::after { position: absolute; content: ""; left: 0; bottom: 0; width: 0%; height: 1px; background-color: rgba(255, 255, 255, 0.3); transition-delay: 0.3s; transition: all 0.3s ease-in-out; } .search_wrapper .search_form .search_input input { width: 100%; height: 100% !important; background-color: transparent !important; border: 0 !important; border-bottom-width: 0px; border-bottom-style: none; border-bottom-color: currentcolor; outline: 0; font-size: 20px; border-bottom: 1px solid hsl(var(--white)) !important; padding: 0 !important; padding-right: 0px; padding-right: 30px !important; color: hsl(var(--white)) !important; } .search_wrapper .search_form .search_input input::placeholder { font-size: 24px; color: var(--tj-color-common-white) !important; } .search_wrapper .search_form .search_input input ~ .search-focus-border { position: absolute; bottom: 0; left: auto; right: 0; width: 0; height: 1px; background-color: var(--tj-color-common-black); transition: all 0.5s; } .search_wrapper .search_form .search_input input:focus ~ .search-focus-border { width: 100%; left: 0; right: auto; transition: all 0.5s; } .search_wrapper .search_form .search_input button { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 18px; color: hsl(var(--white)); } .search-popup-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); z-index: 99; opacity: 0.7; cursor: zoom-out; transform: translateY(calc(-100% - 80px)); transition: all 0.5s ease-in-out 0s; transition-delay: 0.3s; } .search-popup-overlay.search-popup-overlay-open { transform: translateY(0); } .progress-container, .progress { background-color: #dce0ee; border-radius: 5px; position: relative; height: 7px; width: 100%; } .progress { width: 0; height: 7px; top: 50%; left: 0; transition: 0.8s linear; transform: translateY(-50%); background-color: #FEB81B; } .progress.two { background-color: var(--main-four-600); } .progress.active { width: 0 !important; } .percentage { color: hsl(var(--heading-color)); font-size: 18px; padding: 4px; position: absolute; bottom: 20px; transform: translateX(-50%); width: 50px; text-align: center; transition: 0.8s linear; font-weight: 700; } .progress.active, .percentage.active { inset-inline-start: 0 !important; } body.tw-magic-cursor #magic-cursor { display: block; } #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; } #ball { position: fixed; display: flex; align-items: center; pointer-events: none; background-color: hsl(var(--white)) !important; border-radius: 50%; justify-content: center; mix-blend-mode: difference; color: transparent; } /* Ball view ============= */ #ball .ball-view { position: absolute; opacity: 0; visibility: hidden; padding: 0 5px; line-height: 1.1; text-align: center; transform: scale(0); font-weight: 400; font-size: 14px; text-transform: capitalize; color: hsl(var(--black)); } /* Ball drag ============= */ #ball .ball-drag { position: absolute; display: block; width: 100%; padding: 0 5px; font-size: 15px; font-weight: 600; color: #000; line-height: 1.2; text-align: center; transition: all 0.3s; } #ball .ball-drag::before, #ball .ball-drag::after { position: absolute; top: 50%; margin-top: -5px; font-size: 19px; color: var(--tw-common-white); height: 10px; line-height: 10px; font-family: "Font Awesome 6 Pro"; font-weight: var(--tw-fw-black); display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #ball .ball-drag::before { content: "\f104"; /* Font Awesome */ left: 0; transform: translate3d(-30px, 0, 0); transition: all 0.25s; } #ball .ball-drag::after { content: "\f105"; /* Font Awesome */ right: 0; transform: translate3d(30px, 0, 0); transition: all 0.25s; } #ball.with-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Ball close ============== */ #ball.ball-close-enabled { opacity: 1 !important; } #ball .ball-close { position: absolute; padding: 0 5px; font-size: 14px; font-weight: var(--tw-fw-sbold); color: #000; line-height: 1; text-align: center; } .tw-magnetic-wrap { display: flex; justify-content: center; align-items: center; } .widget-pagination ul { display: flex; gap: 10px; align-items: center; } .widget-pagination ul li { cursor: pointer; transition: 0.4s; border-radius: 50% !important; } .widget-pagination ul li i { font-size: 18px; } .widget-pagination ul li a { width: 56px; height: 56px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; border: 1px solid hsl(var(--white)); background: transparent; color: hsl(var(--white)); border-radius: 50% !important; } .widget-pagination ul li a:hover { background: var(--main-600); color: hsl(var(--heading-color)); border: 1px solid var(--main-600); } .body-overlay { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: #181818; visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; } .body-overlay.apply { opacity: 0.7; visibility: visible; } .body-overlay:hover { cursor: url(../images/shapes/cross-out.png), pointer; } .twoffcanvas { right: -100%; width: 420px; box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 24px; z-index: 999999; scrollbar-width: none; opacity: 0; visibility: hidden; transition: 0.45s ease-in-out; overflow-y: scroll; } .twoffcanvas.opened { opacity: 1; visibility: visible; } .twoffcanvas.opened { right: 0; -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 0.6s; } .twoffcanvas__title p { color: rgba(255, 255, 255, 0.8); } .twoffcanvas__input { margin-bottom: 100px; } .twoffcanvas__input input { background: transparent; border: transparent; height: 60px; width: 100%; padding-left: 20px; padding-right: 80px; color: hsl(var(--white)); border: 1px solid #EAEAEF; } .twoffcanvas__input input:focus { border: 1px solid var(--main-600); } .twoffcanvas__input input::placeholder { color: hsl(var(--white)); } .twoffcanvas__input button { height: 100%; width: 60px; background-color: var(--main-600); color: hsl(var(--heading-color)); position: absolute; top: 50%; right: 0; transform: translateY(-50%); border: 1px solid var(--main-600); font-size: 28px; } .twoffcanvas__contact-info ul li a { background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: all 0.3s, background-size 0.8s; } .twoffcanvas__contact-info ul li a:hover { background-size: 100% 1px; } .twoffcanvas__logo { max-width: 180px; width: 100%; } .twoffcanvas__close-btn button { position: absolute; right: 40px; top: 50px; transition: 1s; -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 0.3s; height: 40px; width: 40px; line-height: 45px; background-color: var(--main-600); color: hsl(var(--heading-color)); } .twoffcanvas__close-btn button:hover i { transform: rotate(360deg); } .twoffcanvas__close-btn button i { transition: 0.9s; } /* sidebar navmenu css start */ .sidebar-navmenu { max-width: 360px; width: 100%; height: 100vh; background-color: #fff; position: fixed; inset-inline-end: 0; inset-block-start: 0; z-index: 999999; transform: translateX(100%); transition: 0.3s linear; } .sidebar-navmenu.active { transform: translateX(0); } @media screen and (max-width: 991px) { .sidebar-navmenu.active { display: none; } } .sidebar-navmenu .sidebar-navmenu__list { flex-direction: column; align-items: start !important; } .sidebar-navmenu .nav-menu__item { width: 100%; } .sidebar-navmenu .nav-submenu { transform: scaleY(1); } .sidebar-navmenu .mega-menu { margin-inline-start: 0; margin-block: 16px; padding-inline-end: 8px; } .sidebar-navmenu .mega-menu .row { display: block; } .sidebar-navmenu .mega-menu .row .col { width: 100%; } .sidebar-navmenu .nav-menu__link, .sidebar-navmenu .nav-submenu__link { border-bottom: 1px solid #e5e7eb4f !important; } .sidebar-navmenu .nav-menu__item { width: 100%; transform: translate(0) !important; opacity: 1 !important; } @media screen and (max-width: 991px) { .body-overlay.apply { display: none; } } /* sidebar navmenu css end */ /* ================================== rtl css start ================================== */ .text-start { text-align: start !important; } .form-check { padding-left: 0; } .form-check { padding-inline-start: 1.5em; } .form-check .form-check-input { margin-left: 0; } [dir=rtl] .tw-translate-x-50 { transform: translateX(50%); } [dir=rtl] .select-domain { margin-inline-end: 0; } [dir=rtl] .pricing-plan .form-check { padding-left: 0 !important; } [dir=rtl] .common-check-two .form-check-input::before { transform: translate(50%, -50%); } [dir=rtl] .distraction-icon.seven { transform: translate(50%, -50%); } [dir=rtl] .translate-middle-x { transform: translateX(50%) !important; } [dir=rtl] .translate-x-100-16 { transform: translateX(calc(100% - 105px)); } [dir=rtl] .toast-message { transform: translateX(-110%); } [dir=rtl] .toast-message.active { transform: translateX(0) !important; } [dir=rtl] .arrow-long { transform: scaleX(-1); } [dir=rtl] .common-check .form-check-input::before { transform: translate(50%, -50%); } [dir=rtl] .form-check .form-check-input { margin-right: -1.5em; } [dir=rtl] .top-features-slider { direction: rtl; } [dir=rtl] .left-right-gradient::before { background: linear-gradient(-90deg, #fff, transparent); } [dir=rtl] .left-right-gradient::after { background: linear-gradient(-90deg, transparent, #ffffff); } [dir=rtl] .tw--translate-x-full { transform: translateX(100%); } [dir=rtl] .image-animation:after { transform: translate(50%, -50%) rotate(-45deg); } [dir=rtl] .ph-bold.ph-caret-right:before { content: "\e138"; } [dir=rtl] .ph-bold.ph-arrow-up-right:before { content: "\e090"; } [dir=rtl] .ph.ph-caret-right:before { content: "\e138"; } [dir=rtl] .ph.ph-caret-left:before { content: "\e13a"; } [dir=rtl] .ph.ph-arrow-right:before { content: "\e058"; } [dir=rtl] .ph-bold.ph-caret-left:before { content: "\e13a"; } [dir=rtl] .ph-bold.ph-caret-left:before { content: "\e13a"; } /* ================================== rtl css End ================================== */ .banner-area { padding-block: 260px 267px; } @media screen and (max-width: 1499px) { .banner-area { padding-block: 200px 267px; } } @media screen and (max-width: 1199px) { .banner-area { padding-block: 160px 200px; } } @media screen and (max-width: 991px) { .banner-area { padding-block: 240px 200px; } } @media screen and (max-width: 1199px) { .banner-wrapper { margin-block-end: 60px; } } .banner-content { inset-block-end: -174px; } @media screen and (max-width: 991px) { .banner-content { inset-block-start: -80px; } } .banner-title { font-size: 190px; line-height: 54%; } @media screen and (max-width: 767px) { .banner-title { font-size: 170px; } } @media screen and (max-width: 575px) { .banner-title { font-size: 120px; }0 } .banner-title span { font-weight: 600; font-size: 333px; line-height: 104%; } @media screen and (max-width: 767px) { .banner-title span { font-size: 240px; } } @media screen and (max-width: 575px) { .banner-title span { font-size: 148px; } } .banner-title-sticker { inset-block-start: -75px; inset-inline-end: -16px; } @media screen and (max-width: 767px) { .banner-title-sticker { inset-block-start: -62px; inset-inline-end: -30px; } } @media screen and (max-width: 575px) { .banner-title-sticker { display: none; } } .banner-circle { position: relative; width: 161px; height: 161px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; background: var(--main-600); opacity: 0; border-radius: 50%; z-index: 1; margin-bottom: 40px; } .banner-circle-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 125px; height: 125px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid rgba(93, 50, 34, 0.1); } .banner-circle-button span { font-size: 55px; } .banner-rotate-content { animation: rotateImg 10s infinite linear; } .banner-rotate-text { position: relative; z-index: 1; } .banner-arrow-shape { inset-inline-start: 140px; inset-block-start: 41%; } .banner-arrow-animation { animation: bounce-shape1 3.5s infinite; } .banner-bottom-wrap { margin-block-end: -96px; } .banner-siteber { background: #242524; padding-block: 31px; rotate: -90deg; transform: translateY(-50%); position: absolute; inset-block-start: 50%; inset-inline-start: -455px; z-index: 1; padding-inline: 301px; } @media screen and (max-width: 1699px) { .banner-siteber { display: none; } } .banner-siteber-position { transform: translateX(50px); } .banner-review-content { inset-block-end: -10px !important; } @media screen and (max-width: 767px) { .banner-review-content { inset-block-end: -55px !important; } } .banner-two-area { padding-block: 135px 0; } .banner-two-cercal { background: rgba(255, 255, 255, 0.12); } @media screen and (max-width: 767px) { .banner-two-cercal { display: none !important; } } .banner-two-title { font-size: 288px; line-height: 88%; } @media screen and (max-width: 1199px) { .banner-two-title { font-size: 260px; line-height: 68%; } } @media screen and (max-width: 575px) { .banner-two-title { font-size: 200px; line-height: 68%; } } .banner-two-title span { font-size: 318px; } @media screen and (max-width: 1599px) { .banner-two-title span { font-size: 300px; } } @media screen and (max-width: 1499px) { .banner-two-title span { font-size: 257px; } } @media screen and (max-width: 1199px) { .banner-two-title span { font-size: 218px; } } @media screen and (max-width: 575px) { .banner-two-title span { font-size: 178px; } } @media screen and (max-width: 424px) { .banner-two-title span { font-size: 156px; } } @media screen and (max-width: 1199px) { .banner-two-wrap { margin-block-end: 0; } } .banner-two-img { text-align: right; margin-inline-end: -30px; } @media screen and (max-width: 1199px) { .banner-two-img { margin-inline-end: -400px; } } @media screen and (max-width: 767px) { .banner-two-img { margin-inline-end: -200px; } } @media screen and (max-width: 575px) { .banner-two-img { margin-inline-end: -40px; } } @media screen and (max-width: 575px) { .banner-two-img img { width: 42%; } } .banner-two-bg { margin-block-start: -115px; } .banner-two-bg-shape-1 { inset-block-start: 295px; inset-inline-start: 0; } @media screen and (max-width: 1599px) { .banner-two-bg-shape-1 { inset-block-start: 130px; } } @media screen and (max-width: 767px) { .banner-two-bg-shape-1 { display: none; } } .banner-two-bg-shape-2 { inset-block-start: 520px; inset-inline-start: 55px; } @media screen and (max-width: 1199px) { .banner-two-bg-shape-2 { inset-inline-start: auto; inset-inline-end: 55px; } } @media screen and (max-width: 767px) { .banner-two-bg-shape-2 { display: none; } } .banner-three-area { padding-block: 324px 480px; } @media screen and (max-width: 1199px) { .banner-three-area { padding-block: 140px 260px; } } @media screen and (max-width: 575px) { .banner-three-area { padding-block: 140px 200px; } } @media screen and (max-width: 1199px) { .banner-three-area .tw-hover-btn-wrapper { margin-block-start: 0 !important; } } @media screen and (max-width: 1199px) { .banner-three-wrapper { flex-direction: column; align-items: center; } } @media screen and (max-width: 767px) { .banner-three-wrapper { flex-wrap: wrap; } } .banner-three-left { max-width: 410px; width: 100%; } @media screen and (max-width: 1199px) { .banner-three-left { max-width: 700px; text-align: center; } } @media screen and (max-width: 1199px) { .banner-three-left h2 { font-size: 5.875rem; } } @media screen and (max-width: 575px) { .banner-three-left h2 { font-size: 3.875rem; } } @media screen and (max-width: 424px) { .banner-three-left h2 { font-size: 3.5rem; } } .banner-three-right { max-width: 384px; width: 100%; } .banner-three-arrow-btn { margin-inline-start: -40px; } .banner-three-wrap { backdrop-filter: blur(14px); background: rgba(76, 76, 76, 0.06); } .banner-three-title { font-size: 400px; line-height: 80%; padding-block-start: 59px; } @media screen and (max-width: 1699px) { .banner-three-title { font-size: 375px; } } @media screen and (max-width: 1599px) { .banner-three-title { font-size: 330px; } } @media screen and (max-width: 1499px) { .banner-three-title { font-size: 280px; } } @media screen and (max-width: 1199px) { .banner-three-title { font-size: 180px; } } @media screen and (max-width: 767px) { .banner-three-title { font-size: 135px; } } @media screen and (max-width: 575px) { .banner-three-title { font-size: 100px; } } @media screen and (max-width: 424px) { .banner-three-title { font-size: 88px; } } .banner-three-arrow { inset-block-start: 12px; inset-inline-start: -239px; transform: translateY(-50%); } .banner-three-shape { inset-block-end: -150px; inset-inline-end: -57px; } @media screen and (max-width: 1399px) { .banner-three-shape { display: none; } } @media screen and (max-width: 1199px) { .banner-three-thumb { display: none; } } .banner-four-area { padding-block: 202px 0; } @media screen and (max-width: 1199px) { .banner-four-area { padding-block: 180px 0; } } .banner-four-title { font-size: 340px; } @media screen and (max-width: 1699px) { .banner-four-title { font-size: 320px; } } @media screen and (max-width: 1599px) { .banner-four-title { font-size: 280px; } } @media screen and (max-width: 1399px) { .banner-four-title { font-size: 236px; } } @media screen and (max-width: 1199px) { .banner-four-title { font-size: 200px; } } @media screen and (max-width: 991px) { .banner-four-title { font-size: 160px; } } @media screen and (max-width: 767px) { .banner-four-title { font-size: 120px; } } @media screen and (max-width: 575px) { .banner-four-title { font-size: 84px; } } @media screen and (max-width: 424px) { .banner-four-title { font-size: 84px; transform: translateY(-73px); } } .banner-four-title > span { font-size: 450px; margin-inline-end: -40px; transform: translateY(-165px); } @media screen and (max-width: 1699px) { .banner-four-title > span { font-size: 440px; } } @media screen and (max-width: 1599px) { .banner-four-title > span { font-size: 390px; } } @media screen and (max-width: 1399px) { .banner-four-title > span { font-size: 340px; } } @media screen and (max-width: 1199px) { .banner-four-title > span { font-size: 262px; transform: translateY(-130px); } } @media screen and (max-width: 991px) { .banner-four-title > span { font-size: 190px; } } @media screen and (max-width: 767px) { .banner-four-title > span { font-size: 154px; } } @media screen and (max-width: 575px) { .banner-four-title > span { font-size: 130px; transform: translateY(-73px); } } @media screen and (max-width: 424px) { .banner-four-title > span { font-size: 90px; transform: translateY(-73px); } } .banner-four-circle { position: absolute; inset-inline-start: 48%; inset-block-start: 60px; transform: translateX(-50%); background: var(--main-five-600); border: 3px solid hsl(var(--white)); width: 164px; height: 164px; } @media screen and (max-width: 1199px) { .banner-four-circle { inset-block-start: -50px; } } @media screen and (max-width: 767px) { .banner-four-circle { inset-block-start: -96px; inset-inline-start: 55%; } } @media screen and (max-width: 575px) { .banner-four-circle { inset-block-start: -123px; inset-inline-start: 74%; } } @media screen and (max-width: 424px) { .banner-four-circle { display: none; } } .banner-four-description { inset-block-start: -38px; inset-inline-start: 60%; transform: translateX(-50%); } @media screen and (max-width: 1399px) { .banner-four-description { inset-inline-start: 66%; } } @media screen and (max-width: 1199px) { .banner-four-description { inset-inline-start: 69%; inset-block-start: -130px; } } @media screen and (max-width: 991px) { .banner-four-description { inset-inline-start: 68%; } } @media screen and (max-width: 767px) { .banner-four-description { inset-inline-start: 72%; inset-block-start: -190px; } } @media screen and (max-width: 575px) { .banner-four-description { display: none; } } @media screen and (max-width: 991px) { .banner-four-description p { width: 450px; } } @media screen and (max-width: 767px) { .banner-four-description p { width: 320px; } } .banner-four-rel { inset-block-start: -168px; inset-inline-end: 0; } @media screen and (max-width: 991px) { .banner-four-rel { display: none; } } .banner-four-bg { margin-block-start: -235px; } .banner-five-area { padding-block: 75px 140px; } @media screen and (max-width: 767px) { .banner-five-wrapper { flex-wrap: wrap; gap: var(--size-10); } } .banner-five-title { line-height: 104%; letter-spacing: -0.04em; font-weight: 900; max-width: 900px; width: 100%; } @media screen and (max-width: 1499px) { .banner-five-title { font-size: 7.25rem; } } @media screen and (max-width: 1399px) { .banner-five-title { max-width: 740px; } } @media screen and (max-width: 1199px) { .banner-five-title { font-size: 5rem; max-width: 730px; } } @media screen and (max-width: 991px) { .banner-five-title { font-size: 4.2rem; } } @media screen and (max-width: 575px) { .banner-five-title { font-size: 3.2rem; } } @media screen and (max-width: 1499px) { .banner-five-review { flex-wrap: wrap; gap: var(--size-5); margin-inline-start: -100px; } } @media screen and (max-width: 1199px) { .banner-five-review { margin-inline-start: 0; margin-block-end: 40px; } } .banner-five-content { border-radius: 14px 14px 0 14px; inset-block-start: -100px; inset-inline-end: 156px; background-size: contain !important; height: inherit; } @media screen and (max-width: 1499px) { .banner-five-content { inset-block-start: -50px; inset-inline-end: 20px; } } @media screen and (max-width: 991px) { .banner-five-content { display: none; } } .banner-five-counter-wrap { margin-inline-start: 30px; margin-block-start: -60px; } @media screen and (max-width: 991px) { .banner-five-counter-wrap { display: none; } } @media screen and (max-width: 767px) { .banner-five-counter-wrap { flex-wrap: wrap; } } .banner-five-counter-item { border-radius: 10px 10px 0 0; } @media screen and (max-width: 767px) { .banner-five-counter-item { margin-inline-start: 0; margin-block-start: 30px; flex-wrap: wrap; } } @media screen and (max-width: 767px) { .banner-five-counter-item { padding-inline-end: var(--size-10); border-radius: 10px; } } @media screen and (max-width: 575px) { .banner-five-counter-item { padding-inline: var(--size-5); } } .banner-five-counter-item.blue { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.32); } .about-bg { margin-inline-start: -185px; } @media screen and (max-width: 1199px) { .about-bg { margin-inline-start: 0; margin-block-end: 100px; } } @media screen and (max-width: 991px) { .about-right { justify-content: left !important; margin-block-start: 30px; } } .about-content { margin-block-start: -50px; } .about-paragraph { line-height: 89%; } @media screen and (max-width: 1499px) { .about-paragraph { font-size: 68px; } } .about-ball { inset-inline-end: -65px; inset-block-start: 73px; } .about-bg-shape { inset-block-start: 128px; inset-inline-start: -2px; animation: bounce-y 3.5s forwards infinite alternate; } @media screen and (max-width: 575px) { .about-two-area .counter-title { font-size: 5.5rem; } } @media screen and (max-width: 575px) { .about-two-area .counter-paragraph { font-size: 12px; } } @media screen and (max-width: 767px) { .about-two-team { margin-block-end: var(--size-10); } } @media screen and (max-width: 767px) { .about-two-thumb { margin-bottom: 30px; } } .about-two-paragraph { border-bottom: 1px solid rgba(255, 255, 255, 0.26); } .about-two-sticker { inset-block-start: -132px; inset-inline-start: -56px; } @media screen and (max-width: 1199px) { .about-two-sticker { inset-block-start: -80px; inset-inline-start: 0; } } .about-three-counter-title { font-size: 333px; color: #ffa600; } @media screen and (max-width: 1199px) { .about-three-counter-title { font-size: 300px; } } @media screen and (max-width: 575px) { .about-three-counter-title { font-size: 270px; } } @media screen and (max-width: 575px) { .about-three-wrap { flex-wrap: wrap; } } .about-three-tag { position: absolute; rotate: -90deg; inset-block-start: 38%; transform: translateY(-50%); inset-inline-start: -88px; } .about-three-tag span { font-weight: 500; font-size: 16px; line-height: 187%; letter-spacing: 0.13em; color: #ffa600; border: 1px solid #ffa600; border-radius: 44px; padding: 3px 10px; } @media screen and (max-width: 1199px) { .about-four-area .section-two-title { font-size: 3.6rem; } } .about-four-rating { letter-spacing: -0.02em; color: #b2b2b2; } @media screen and (max-width: 1199px) { .about-four-content { flex-wrap: wrap; } } @media screen and (max-width: 575px) { .about-four-wrap { flex-wrap: wrap; gap: var(--size-15); } } .about-five-area { padding-block-end: 60px; } .about-five-rate { inset-inline-end: 0; inset-block-end: 70px; } @media screen and (max-width: 575px) { .about-five-wrap { flex-wrap: wrap; gap: 0; } } .about-five-shape { inset-block-end: -65px; } .about-five-feature { background: rgba(255, 255, 255, 0.08); } .brand-wrapper.one { border: 1px solid rgba(255, 255, 255, 0.33); } .brand-wrapper.two { background: #2e2e2e; border-radius: 76px; border: 1px solid transparent; } .brand-wrapper:hover { background: var(--main-600); border-radius: 76px; border: 1px solid var(--main-600); } .brand-two-area { padding-block-end: 120px !important; } .brand-two-box { background: rgba(255, 255, 255, 0.33); padding-inline: 47px; height: 150px; border-radius: 11px; } .brand-three-area { padding-block: 8px 140px !important; } .brand-three-box { background: #F3F6FE; } .brand-three-shape { inset-inline-end: 10px; inset-block-start: -120px; } .brand-four-area { background: rgba(255, 255, 255, 0.07); padding-block: 320px 80px; margin-block-start: -245px; } .brand-four-box { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); cursor: pointer; border-radius: 0; } .brand-four-box img { filter: brightness(0) invert(1); } .thumbnail-three-bg { background-position: center; background-size: cover; margin: 0 auto; height: 850px; width: calc(100% - 30px); } .video-area::before { content: ""; position: absolute; width: 100%; height: 100%; inset-block-start: 0; inset-inline-start: 0; background: rgba(7, 7, 19, 0.54); z-index: -1; } .video-button-wrap { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(60.0999984741px); width: 169px; border: 1px solid rgba(255, 255, 255, 0.27); border-radius: 0 0 94px 94px; border-top: 0; padding-block-end: 16px; height: 324px; } .video-button { position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); } .video-content { max-width: 796px; width: 100%; } @media screen and (max-width: 767px) { .video-title { font-size: 4.5rem; } } .video-arrow-shape { inset-block-end: -18%; } .video-arrow-shape-animate { animation: bounce-y 3.5s forwards infinite alternate; } .video-five-button::before { position: absolute; content: ""; left: 50%; top: 50%; width: 70%; height: 70%; background-color: rgba(255, 166, 0, 0.471); animation: borderanimate2 2s linear infinite; z-index: -1; border-radius: 50%; } .video-five-button::after { position: absolute; content: ""; left: 50%; top: 50%; width: 90%; height: 90%; transform: scale(1.5); border: 1px solid rgba(255, 166, 0, 0.471); animation: borderanimate2 2s linear infinite; border-radius: 50%; } .video-five-bg { border-radius: 10px 0 0 10px; object-fit: cover; } @media screen and (max-width: 1799px) { .video-five-bg { width: 1520px; } } @media screen and (max-width: 1699px) { .video-five-bg { width: 1430px; } } @media screen and (max-width: 1599px) { .video-five-bg { width: 1230px; } } @media screen and (max-width: 1399px) { .video-five-bg { width: 1030px; } } @media screen and (max-width: 1199px) { .video-five-bg { width: 820px; } } @media screen and (max-width: 991px) { .video-five-bg { width: 730px; } } @media screen and (max-width: 767px) { .video-five-bg { width: 535px; } } @media screen and (max-width: 575px) { .video-five-bg { width: 385px; } } .video-five-text-shape { inset-block-start: 0; inset-inline-start: 40px; } .video-five-shape-1 { inset-inline-start: -115px; } @media screen and (max-width: 575px) { .video-five-shape-1 { display: none; } } .video-five-shape-2 { inset-inline-end: 9%; inset-block-end: -10%; } @media screen and (max-width: 767px) { .video-five-shape-2 { inset-inline-end: -5%; inset-block-end: -2%; } } @media screen and (max-width: 575px) { .video-five-shape-2 { display: none; } } .video-five-bottom-area { padding-block: 495px 140px; margin-block-start: -380px; } .video-five-bottom-area::before { content: ""; position: absolute; width: 84%; height: 100%; inset-block-start: 0; inset-inline-start: 0; background: var(--main-seven-600); z-index: -1; } @media screen and (max-width: 1599px) { .video-five-bottom-area::before { width: 90%; } } @media screen and (max-width: 1399px) { .video-five-bottom-area::before { width: 94%; } } @media screen and (max-width: 767px) { .video-five-bottom-area::before { width: 100%; } } @media screen and (max-width: 767px) { .video-five-bottom-paragraph { width: 382px; } } .video-five-knob-progress { max-width: 186px; width: 186px; height: 186px; } .video-five-knob-progress input { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); } .service-area { padding-block-end: 77px; } .service-wrapper { background: #212121; padding-inline: 50px 65px; padding-block: 50px 60px; } @media screen and (max-width: 1399px) { .service-wrapper { padding-inline: 50px 40px; } } @media screen and (max-width: 991px) { .service-wrapper { padding-inline: 25px 25px; } } @media screen and (max-width: 767px) { .service-wrapper { padding-inline: 40px 56px; } } .service-wrapper::before { content: ""; position: absolute; width: 100%; height: 100%; inset-block-start: 0; inset-inline-start: 0; background: var(--main-600); z-index: -1; opacity: 0; overflow: hidden; transition: 0.4s; border-radius: 1.5rem; } .service-wrapper:hover { transform: translateY(-40px) !important; } .service-wrapper:hover::before { opacity: 1; overflow: hidden; } .service-wrapper:hover .service-icon span img { filter: brightness(0) invert(0) !important; } .service-wrapper:hover .service-title a { color: hsl(var(--heading-color)); } .service-wrapper:hover .service-paragraph { color: hsl(var(--heading-color)) !important; } .service-wrapper:hover .service-list ul li { color: hsl(var(--heading-color)) !important; } .service-wrapper:hover .service-list ul li span { color: hsl(var(--heading-color)) !important; } .service-wrapper:hover .service-btn { color: hsl(var(--white)); } .service-title a { transition: 0.3s; } .service-button { position: absolute; z-index: 3; width: 130px; height: 130px; background: #101010; display: inline-flex; align-items: center; justify-content: center; inset: calc(12% - 4.3em) 0 0 calc(86% - 4.4em); border-top-left-radius: 30px; transition: 1s ease 0.5s; padding-bottom: 1px; rotate: -90deg; } @media screen and (max-width: 1199px) { .service-button { inset: calc(12% - 4.3em) 0 0 calc(86% - 4em); } } @media screen and (max-width: 767px) { .service-button { inset: calc(12% - 4.3em) 0 0 calc(86% - 3em); } } .service-button::before { inset: calc(100% - 1.3em) 0 0 -1.3em; border-bottom-right-radius: 1.25em; box-shadow: 0.3em 0.3em 0 0.3em #101010; transition: 1s ease; position: absolute; content: ""; width: 1.25em; height: 1.25em; background: transparent; } .service-button::after { inset: -1.3em 0 0 6.7em; border-bottom-right-radius: 1.25em; box-shadow: 0.3em 0.3em 0 0.3em #101010; transition: 1s ease; position: absolute; content: ""; width: 1.25em; height: 1.25em; background: transparent; } .service-btn { width: 100%; height: 100%; line-height: 1; display: inline-flex; justify-content: center; align-items: center; background: transparent; color: #212121; font-size: 80px; rotate: 90deg; } .service-bg-shape-1 { inset-block-start: 24%; inset-inline-end: 16%; animation: bounce-thum-2 1s ease-in-out 0.1s forwards infinite alternate; } .service-bg-shape-2 { inset-block-start: 9%; inset-inline-end: 0; animation: bounce-y 3.5s forwards infinite alternate; } .service-two-area { padding: 240px 0 140px; } .service-two-item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .service-two-item .hover-reveal-bg { background-size: inherit; background-position: center; background-repeat: no-repeat; } .service-two-content { display: flex; align-items: center; justify-content: space-between; padding: 26px 28px; transition: 0.3s; } @media screen and (max-width: 991px) { .service-two-tag { font-size: 5rem; } } @media screen and (max-width: 767px) { .service-two-tag { font-size: 3rem; } } @media screen and (max-width: 991px) { .service-two-title { font-size: 3.5rem; } } .service-four-area { background: #202020; padding-block-end: 374px; } @media screen and (max-width: 767px) { .service-four-button { text-align: left !important; } } .service-four-wrapper { background: rgba(255, 255, 255, 0.07); } @media screen and (max-width: 1399px) { .service-four-wrapper { padding-inline: var(--size-6); } } @media screen and (max-width: 991px) { .service-four-wrapper { padding-inline: var(--size-4); } } @media screen and (max-width: 767px) { .service-four-wrapper { padding-inline: var(--size-12); } } @media screen and (max-width: 424px) { .service-four-wrapper { padding-inline: var(--size-5); } } .service-five-bottom { margin-inline: -25px; } .service-five-wrapper { padding: 40px 30px 35px 40px; } .service-five-list ul li { list-style: disc; } .service-five-button { position: absolute; z-index: 3; width: 90px; height: 100px; background: #070125; display: inline-flex; align-items: center; justify-content: center; inset: calc(12% - 3.9em) 0 0 calc(86% - 2.6em); border-top-left-radius: 30px; transition: 1s ease 0.5s; padding-bottom: 1px; rotate: -90deg; } @media screen and (max-width: 1799px) { .service-five-button { inset: calc(12% - 3.9em) 0 0 calc(86% - 2.2em); } } @media screen and (max-width: 575px) { .service-five-button { inset: calc(12% - 4em) 0 0 calc(86% - 2.2em); } } .service-five-button::before { inset: calc(100% - 1.3em) 0 0 -1.2em; box-shadow: 0.3em 0.3em 0 0.3em #070125; border-bottom-right-radius: 1.25em; transition: 1s ease; position: absolute; content: ""; width: 1.25em; height: 1.25em; background: transparent; } .service-five-button::after { inset: -1.2em 0 0 4.4em; box-shadow: 0.3em 0.3em 0 0.3em #070125; border-bottom-right-radius: 1.25em; transition: 1s ease; position: absolute; content: ""; width: 1.25em; height: 1.25em; background: transparent; } .service-five-number { rotate: 90deg; } .service-five-active .swiper-slide-active.service-five-wrapper { background: var(--main-six-600) !important; } .service-five-active .swiper-slide-active .service-five-icon span { background: hsl(var(--heading-color)) !important; } .service-five-active .swiper-slide-active .service-five-list ul li { color: hsl(var(--heading-color)) !important; } .service-five-active .swiper-slide-active .service-five-btn { color: hsl(var(--heading-color)); } .service-five-active .swiper-slide-active .service-five-btn span { background: hsl(var(--heading-color)) !important; } .service-five-dot .swiper-pagination-bullet { width: 18px; height: 18px; background: transparent; border: 2px solid hsl(var(--white)); opacity: 1; transition: 0.4s; border-radius: 50%; margin: 0 5px 0; position: relative; } .service-five-dot .swiper-pagination-bullet::before { content: ""; position: absolute; width: 28px; height: 28px; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); background: var(--main-seven-600); border-radius: 50%; z-index: -1; opacity: 0; visibility: hidden; transition: 0.4s; } .service-five-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1 !important; visibility: visible !important; } .service-five-dot .swiper-pagination-bullet button { display: none; } @media screen and (max-width: 1199px) { .service-details-wrapper { margin-inline-start: 0; } } @media screen and (max-width: 1199px) { .service-details-gallery { flex-wrap: wrap; gap: 0; } } @media screen and (max-width: 767px) { .service-details-list ul li { width: 100% !important; } } .service-details-button::before { background-color: rgba(179, 222, 79, 0.471); } .service-details-button::after { border: 1px solid rgba(179, 222, 79, 0.471); } .maquee-area { padding: 25px 0; } .maquee-transition { transition-timing-function: linear; } .maquee-icon { transform: translate(-10px); } .maquee-icon span { animation: rotate-infinte 6s infinite linear; } .maquee-title.border-text { -webkit-text-stroke-width: 1px; color: transparent !important; -webkit-text-stroke-color: hsl(var(--white)); } .maquee-two-area { padding-block: 50px 37px; } .maquee-two-title { -webkit-text-stroke-color: hsl(var(--black)) !important; } @media screen and (max-width: 991px) { .project-two-area { padding-block-end: 0; } } @media screen and (max-width: 1199px) { .project-two-sticky { margin-block-end: 40px; } } @media screen and (max-width: 1399px) { .project-two-wrap { flex-wrap: wrap; } } .project-four-panels-three { margin-inline-end: -125px; } .project-four-wrapper { max-width: 523px; width: 523px; } .project-five-area { padding-block-end: 170px; } @media screen and (max-width: 991px) { .project-five-area { padding-block-end: 0; } } .project-five-wrapper { background: #181334; border: 1px solid rgba(255, 255, 255, 0.33); } @media screen and (max-width: 767px) { .project-five-wrapper { flex-wrap: wrap; } } .project-five-paragraph { margin-inline-end: -100px; } @media screen and (max-width: 767px) { .project-five-paragraph { margin-inline-end: 0; } } .portfolio-area { padding-block-end: 60px; } .portfolio-top-subtitle { margin-inline-start: 30px; } @media screen and (max-width: 767px) { .portfolio-top-subtitle { font-size: 100px; } } .portfolio-top-title { margin-block-start: -65px; text-align: right; color: rgba(255, 255, 255, 0.32); } @media screen and (max-width: 1199px) { .portfolio-top-title { font-size: 16rem; } } @media screen and (max-width: 767px) { .portfolio-top-title { font-size: 8rem; } } @media screen and (max-width: 767px) { .portfolio-panel { padding: var(--size-8) !important; } } @media screen and (max-width: 424px) { .portfolio-panel { padding: var(--size-5) !important; } } .portfolio-shape { inset-block-end: 110px; inset-inline-start: 10%; } .portfolio-shape-arrow { animation: bounce-shape1 3.5s infinite; } .portfolio-wrap { max-width: 537px; } .portfolio-title { line-height: 89%; } @media screen and (max-width: 575px) { .portfolio-title { font-size: 3rem; } } .portfolio-three-thumb { background: hsl(var(--white)); box-shadow: -2px -13px 92px 0 rgba(3, 9, 49, 0.12); } .portfolio-ip-thumb { background: rgba(255, 255, 255, 0.12); box-shadow: -2px -13px 92px 0 rgba(3, 9, 49, 0.12); } @media screen and (max-width: 991px) { .portfolio-carousel-area { padding-block-start: 120px; } } @media screen and (max-width: 991px) { .portfolio-carousel-area .panels-four-container { flex-wrap: wrap; justify-content: center; } } @media screen and (max-width: 575px) { .portfolio-carousel-area .project-four-wrapper { max-width: 100%; width: 100%; } } .portfolio-carousel-thumb img { width: 100%; object-fit: cover; } @media screen and (max-width: 1799px) { .portfolio-carousel-thumb img { height: 500px; } } .portfolio-masonary-wrapper img { width: 100%; height: 587px; } @media screen and (max-width: 575px) { .portfolio-masonary-wrapper img { height: 400px; } } @media screen and (max-width: 991px) { .feature-two-area { padding-block-start: 100px; } } @media screen and (max-width: 1399px) { .feature-two-content { flex-wrap: wrap; } } @media screen and (max-width: 991px) { .feature-two-content { margin-block-end: var(--size-2); } } @media screen and (max-width: 1399px) { .feature-two-title { font-size: 40px; } } .feature-three-area { background: rgba(16, 83, 243, 0.05); } .feature-three-thumb { margin-inline-start: -90px; } @media screen and (max-width: 1499px) { .feature-three-thumb { margin-inline-start: 0; } } @media screen and (max-width: 991px) { .feature-three-thumb { margin-block-end: 30px; } } .feature-five-wrapper { margin-block-end: 30px; } @media screen and (max-width: 991px) { .feature-five-wrapper { padding-inline-end: 0; } } @media screen and (max-width: 991px) { .feature-five-top { flex-wrap: wrap; } } .feature-ip-icon img { filter: brightness(2) invert(1); } .testimonial-section-title { line-height: 90%; } @media screen and (max-width: 767px) { .testimonial-section-title { font-size: 5.5rem; } } @media screen and (max-width: 424px) { .testimonial-section-title { font-size: 3.5rem; } } .testimonial-slide { margin-block-start: -50px; } @media screen and (max-width: 1399px) { .testimonial-slide { margin-block-start: 60px; } } .testimonial-count-title span { font-family: var(--body-font); } @media screen and (max-width: 991px) { .testimonial-wrapper { flex-wrap: wrap; } } .testimonial-arrow-shape { inset-block-start: 40px; inset-inline-end: 13%; } .testimonial-arrow button { width: 40px; height: 40px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--main-600); color: var(--main-600); border-radius: 50%; margin: 0 2px 0; } .testimonial-arrow button:hover { background: var(--main-600); color: hsl(var(--heading-color)); } .testimonial-arrow button:first-child { margin-left: 0; } .testimonial-reveiw { inset-block-end: 20px; inset-inline-end: 20px; } @media screen and (max-width: 1399px) { .testimonial-reveiw { inset-block-end: 6px; inset-inline-end: 10px; } } @media screen and (max-width: 1199px) { .testimonial-clients { display: flex; align-items: center; justify-content: space-between; } } .testimonial-two-area { margin-block-start: -100px; padding-block-start: 346px; } .testimonial-two-paragraph { color: #2c2316; } @media screen and (max-width: 1399px) { .testimonial-two-paragraph { font-size: 4.4rem; } } @media screen and (max-width: 991px) { .testimonial-two-paragraph { font-size: 3rem; } } .testimonial-two-title { color: #2c2316; } .testimonial-two-text { color: #2c2316; } .testimonial-two-arrow-box button { top: 36%; left: -200px; transition: all 0.3s ease 0s; } @media screen and (max-width: 1399px) { .testimonial-two-arrow-box button { left: -160px; } } @media screen and (max-width: 1199px) { .testimonial-two-arrow-box button { left: -100px; } } @media screen and (max-width: 767px) { .testimonial-two-arrow-box button { left: -60px; } } .testimonial-two-arrow-box button:hover { background-color: var(--main-two-600) !important; color: hsl(var(--white)); } .testimonial-two-arrow-box button.slider-next { left: auto; right: -200px; } @media screen and (max-width: 1399px) { .testimonial-two-arrow-box button.slider-next { right: -160px; } } @media screen and (max-width: 1199px) { .testimonial-two-arrow-box button.slider-next { right: -100px; } } @media screen and (max-width: 767px) { .testimonial-two-arrow-box button.slider-next { right: -60px; } } .testimonial-two-arrow-box button { transition: 0.4s; } .testimonial-two-sticker-1 { inset-block-start: -110px; inset-inline-end: -60px; z-index: 1 !important; } .testimonial-two-sticker-2 { inset-block-end: 0; inset-inline-start: -320px; z-index: 1 !important; } .testimonial-two-sticker-3 { inset-block-end: -70px; inset-inline-end: -200px; z-index: 1 !important; } .testimonial-three-wrapper { border: 7px solid #ffc456; } .testimonial-three-dot .swiper-pagination-bullet { width: 10px; height: 10px; background: white; opacity: 1; transition: 0.4s; border-radius: 50%; margin: 0 7px 0; } .testimonial-three-dot .swiper-pagination-bullet button { display: none !important; } .testimonial-three-arrow-shape { inset-block-start: 11%; inset-inline-start: 9%; } .testimonial-four-area { padding-block-start: 230px; } @media screen and (max-width: 991px) { .testimonial-four-thumb { margin-block-end: 40px; } } @media screen and (max-width: 1399px) { .testimonial-four-slide { margin-inline-start: 0; } } @media screen and (max-width: 1399px) { .testimonial-four-paragraph { font-size: 4.2rem; } } @media screen and (max-width: 991px) { .testimonial-four-paragraph { font-size: 4rem; } } @media screen and (max-width: 424px) { .testimonial-four-paragraph { font-size: 2rem; } } .testimonial-four-quate { inset-block-start: -90px; inset-inline-end: 0; } @media screen and (max-width: 424px) { .testimonial-four-arrow-box { margin-inline-end: 0; } } @media screen and (max-width: 1199px) { .testimonial-five-area .section-five-wrapper { margin-block-end: var(--size-5); } } @media screen and (max-width: 991px) { .testimonial-five-wrapper { flex-wrap: wrap; gap: var(--size-6); } } @media screen and (max-width: 1199px) { .testimonial-five-left { margin-bottom: 50px; } } .testimonial-five-quote { inset-block-start: 30px; inset-inline-start: 20px; } @media screen and (max-width: 1399px) { .testimonial-five-quote { inset-block-start: 15px; inset-inline-start: 0; } } .testimonial-five-paragraph { letter-spacing: -0.02em; } .testimonial-five-arrow button { border: 1px solid var(--main-seven-600); color: var(--main-seven-600); } .testimonial-five-arrow button:hover { background: var(--main-seven-600); color: hsl(var(--white)); } @media screen and (max-width: 991px) { .counter-four-wrapper { flex-wrap: wrap; } } @media screen and (max-width: 575px) { .counter-four-title { font-size: 6.25rem; } } .counter-four-paragraph { background: rgba(234, 77, 35, 0.12); letter-spacing: 0.29em; padding: 3px 16px; } .team-top-img { animation: moving 7s linear infinite; } .team-wrapper { border-radius: 160px; } .team-wrapper:hover .team-wrap { inset-block-end: -80px; } @media screen and (max-width: 1199px) { .team-wrapper:hover .team-wrap { inset-block-end: 0; } } @media screen and (max-width: 767px) { .team-wrapper:hover .team-wrap { inset-block-end: -90px; } } .team-wrap { position: absolute; inset-block-end: -350px; inset-inline-start: -18px; transition: 0.4s; } @media screen and (max-width: 1399px) { .team-wrap { inset-inline-start: -40px; } } @media screen and (max-width: 1199px) { .team-wrap { inset-inline-start: 50px; } } @media screen and (max-width: 991px) { .team-wrap { inset-inline-start: -4px; } } @media screen and (max-width: 767px) { .team-wrap { inset-inline-start: -50px; } } @media screen and (max-width: 575px) { .team-wrap { inset-inline-start: 28px; } } .team-content { background: hsl(var(--black)); border-radius: 50%; width: 342px; height: 342px; } .team-traslate { transform: translateY(70px); } @media screen and (max-width: 1399px) { .team-four-wrapper { margin-block-end: 30px; } } .team-five-thumb a { display: block; } .team-five-thumb a img { width: 100%; transition: 0.7s; transform: scale(1); object-fit: cover; } .team-five-thumb:hover img { transform: scale(1.3); } .team-five-social { border-bottom: 1px solid #696979; } .team-five-social li a { border: 1px solid rgba(255, 255, 255, 0.2); } @media screen and (max-width: 1199px) { .team-details-thumb { text-align: center; } } @media screen and (max-width: 767px) { .team-details-wrapper { margin-inline-start: 0; } } .team-details-form input { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22); } .team-details-form textarea { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22); } .contact-area { padding-block: 320px 140px; margin-block: -360px 0; } .contact-top-rigght { text-align: right; margin-block-start: -40px; } .contact-shape { inset-block-end: 16%; inset-inline-end: 3%; animation: bounce-thum-2 1s ease-in-out 0.1s forwards infinite alternate; } .contact-two-area .tw-hover-btn-item:hover .tw-btn-circle-icon { color: hsl(var(--heading-color)) !important; } .contact-two-area .tw-hover-btn-item:hover .tw-btn-circle-text { color: hsl(var(--heading-color)) !important; } @media screen and (max-width: 1399px) { .contact-two-title { font-size: 6.5rem; } } @media screen and (max-width: 767px) { .contact-two-title { font-size: 4.5rem; } } .contact-five-area::before { content: ""; position: absolute; width: 1605px; height: 682px; border: 1px solid rgba(255, 255, 255, 0.21); border-radius: 12px 0 0 12px; inset-block-end: -25px; inset-inline-end: 0; background: #1b134a; z-index: -1; border-right: none; } @media screen and (max-width: 1799px) { .contact-five-area::before { width: 1490px; } } @media screen and (max-width: 1699px) { .contact-five-area::before { width: 1440px; } } @media screen and (max-width: 1599px) { .contact-five-area::before { width: 1340px; } } @media screen and (max-width: 1399px) { .contact-five-area::before { width: 1150px; height: 640px; } } @media screen and (max-width: 1199px) { .contact-five-area::before { width: 965px; height: 700px; } } @media screen and (max-width: 1199px) { .contact-five-thumb { margin-block-end: 70px; } } .contact-five-wrapper { margin-inline-start: -10px; } .contact-five-title { font-weight: 900; letter-spacing: -0.04em; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #fff; } @media screen and (max-width: 991px) { .contact-five-title { font-size: 6.25rem; } } @media screen and (max-width: 767px) { .contact-five-title { font-size: 4.25rem; } } @media screen and (max-width: 575px) { .contact-five-title { font-size: 3.25rem; } } .contact-five-bg { z-index: -2; } .contact-five-bg img { border-radius: 0 12px 12px 0; } .contact-five-shape-1 { inset-block-start: 40px; inset-inline-end: 80px; animation: bounce-thum-2 1s ease-in-out 0.1s forwards infinite alternate; } .contact-five-shape-2 { inset-block-end: -22%; inset-inline-start: 6%; } @media screen and (max-width: 575px) { .contact-five-shape-2 { display: none; } } .blog-wrapper:hover .blog-main-thumb img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-wrapper:hover .blog-main-thumb img:nth-child(2) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-main-thumb img { background-size: cover; } .blog-main-thumb img:nth-child(1) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-main-thumb img:nth-child(2) { position: absolute; top: 0; left: 0; bottom: 0; right: 0; object-fit: cover; } .blog-card-image-link { background-color: rgba(28, 26, 29, 0.5); opacity: 0; transition: opacity 500ms ease, transform 500ms ease; } .blog-shape-1 { inset-block-start: 50px; inset-inline-start: -100px; } .blog-shape-2 { inset-block-start: 20px; inset-inline-end: -100px; animation: bounce-shape1 3.5s infinite; } @media screen and (max-width: 1499px) { .blog-shape-2 { inset-inline-end: 40px; } } .blog-two-wrapper { background: rgba(255, 255, 255, 0.05); padding-block: 42px 35px; } @media screen and (max-width: 1199px) { .blog-two-top-wrap { margin-inline-start: 0; } } .blog-three-wrapper { box-shadow: -2px -13px 92px 0 rgba(3, 9, 49, 0.12); padding: 10px; } .blog-four-area { background: #202020; } .blog-four-widgets:first-child { border-top: 1px solid rgba(255, 255, 255, 0.07); } .blog-four-left { max-width: 320px; width: 100%; } .blog-four-right { max-width: 410px; width: 100%; } .blog-four-content { padding: 50px 0; } @media screen and (max-width: 767px) { .blog-four-content { flex-wrap: wrap; row-gap: 40px; } } .blog-four-content:hover .blog-four-title { color: var(--main-five-600) !important; } .blog-four-content:hover .blog-four-btn { color: var(--main-five-600) !important; } .blog-four-content:hover .blog-four-btn span { background: var(--main-five-600) !important; } .blog-four-tag { background: rgba(255, 255, 255, 0.12); border-radius: 44px; padding: 3px 18px; } @media screen and (max-width: 991px) { .blog-four-title { font-size: 2.5rem; } } .blog-five-left-thumb a { display: block; } @media screen and (max-width: 1199px) { .blog-five-left-thumb a img { width: 100%; } } @media screen and (max-width: 1399px) { .blog-five-bottom-wrap { display: flex; gap: 20px; } } @media screen and (max-width: 1399px) { .blog-five-wrapper { flex-wrap: wrap; gap: 0; margin-block-end: 30px; } } @media screen and (max-width: 1199px) { .blog-five-wrapper { gap: 50px; } } @media screen and (max-width: 575px) { .blog-five-wrapper { gap: 15px; } } .blog-five-wrap { inset-block-start: 30px; inset-inline-start: 30px; } .blog-five-thumb img { max-width: 300px; width: 300px; } @media screen and (max-width: 1199px) { .blog-five-thumb img { max-width: 400px; width: 400px; } } @media screen and (max-width: 991px) { .blog-five-thumb img { max-width: 310px; width: 310px; } } @media screen and (max-width: 991px) { .blog-five-content { max-width: 330px; width: 100%; } } .blog-five-btn:hover span { background: var(--main-seven-600) !important; } .blog-siteber { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22); } @media screen and (max-width: 1399px) { .blog-siteber { padding-inline: var(--size-4); } } @media screen and (max-width: 1199px) { .blog-siteber { padding-inline: var(--size-10); } } @media screen and (max-width: 424px) { .blog-siteber { padding-inline: var(--size-4); } } .blog-category-list ul li a span { width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.34); } .blog-category-list ul li a span::before { content: ""; position: absolute; width: 4px; height: 4px; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); background: var(--main-600); border-radius: 50%; opacity: 0; visibility: hidden; transition: 0.4s; } .blog-category-list ul li:hover a { color: var(--main-600) !important; } .blog-category-list ul li:hover a span::before { opacity: 1; visibility: visible; } .blog-recent-img img { max-width: 98px; width: 98px; height: 92px; } .blog-tag a { background: rgba(255, 255, 255, 0.1); } @media screen and (max-width: 767px) { .blockquote-wrap { flex-wrap: wrap; gap: var(--size-8); } } @media screen and (max-width: 1199px) { .blockquote-paragraph { font-size: 46px; } } .blockquote-icon img { max-width: 68px; width: 68px; } @media screen and (max-width: 1199px) { .blog-details-title { font-size: 5.8rem; } } @media screen and (max-width: 767px) { .blog-details-title { font-size: 4.4rem; } } .blog-details-form input { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22); } .blog-details-form textarea { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22); } .newletter-five-title { font-weight: 900; line-height: 108%; letter-spacing: -0.04em; } @media screen and (max-width: 991px) { .newletter-five-title { font-size: 5.25rem; } } @media screen and (max-width: 767px) { .newletter-five-title { font-size: 4.25rem; } } @media screen and (max-width: 575px) { .newletter-five-title { font-size: 3.25rem; } } @media screen and (max-width: 575px) { .section-title { font-size: 4.5rem; } } .section-two-title { line-height: 98%; } @media screen and (max-width: 1399px) { .section-two-title { font-size: 4.4rem; } } @media screen and (max-width: 767px) { .section-two-title { font-size: 4rem; } } @media screen and (max-width: 767px) { .section-five-wrapper { margin-inline-end: 0; } } /*----------------------------------------*/ /* 2.11 Hover Animation /*----------------------------------------*/ .hover__reveal-item { position: relative; } .hover__reveal-item:hover .hover__reveal-bg { opacity: 1; } .hover__reveal-bg { position: absolute; top: 0; left: 0; width: 346px; height: 406px; opacity: 0; margin: -150px 0 0 -150px; overflow: hidden; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 5; border-radius: 8px; } @media screen and (max-width: 767px) { .hover__reveal-bg { width: 240px; height: 300px; } } .skill-three-area { background: rgba(16, 83, 243, 0.05); } .skill-three-area .percentage { font-size: 16px; bottom: 10px; font-weight: 500; } @media screen and (max-width: 1499px) { .skill-three-wrapper { width: 100%; height: 260px; } } @media screen and (max-width: 1499px) { .skill-three-wrapper { width: 100%; height: 360px; } } @media screen and (max-width: 767px) { .skill-three-wrapper { height: 260px; padding-inline: var(--size-14); } } @media screen and (max-width: 575px) { .skill-three-wrapper { height: 380px; padding-inline: var(--size-14); } } @media screen and (max-width: 1399px) { .skill-three-title { font-size: 38px; } } .resume-three-wrapper { box-shadow: -2px -13px 92px 0 rgba(3, 9, 49, 0.08); } @media screen and (max-width: 1199px) { .resume-three-wrapper { padding-inline: var(--size-10); } } @media screen and (max-width: 991px) { .resume-three-title { margin-inline-start: 0; } } @media screen and (max-width: 767px) { .resume-three-title { font-size: 3rem; } } .cta-button { position: absolute; inset-inline-end: -35px; inset-block-end: 293px; z-index: 2; } @media screen and (max-width: 767px) { .cta-button { display: none; } } .cta-button .tw-btn-circle { background: var(--main-600); border-color: transparent; } .cta-button .tw-btn-circle .tw-btn-circle-dot { background-color: hsl(var(--white)) !important; } .cta-button:hover .tw-btn-circle-icon { color: hsl(var(--heading-color)); } .cta-button:hover .tw-btn-circle-text { color: hsl(var(--heading-color)); } @media screen and (max-width: 575px) { .cta-two-area .counter-title { font-size: 4.5rem; } } @media screen and (max-width: 1499px) { .cta-two-wrapper { flex-wrap: wrap; } } @media screen and (max-width: 1199px) { .cta-two-thumb.one { height: inherit !important; } } @media screen and (max-width: 1699px) { .cta-two-icon { margin-block-end: 14px; } } @media screen and (max-width: 767px) { .cta-two-icon { display: none; } } @media screen and (max-width: 1699px) { .cta-two-arrow { margin-block-end: 80px; } } @media screen and (max-width: 767px) { .cta-two-arrow { display: none; } } @media screen and (max-width: 1599px) { .cta-two-title { font-size: 4rem; } } @media screen and (max-width: 767px) { .cta-two-title { font-size: 3.1rem; } } @media screen and (max-width: 575px) { .cta-two-title { color: hsl(var(--white)); } } @media screen and (max-width: 1599px) { .cta-two-sm-title { font-size: 2.25rem; } } @media screen and (max-width: 575px) { .cta-two-sm-title { color: hsl(var(--white)); } } .cta-two-content { inset-block-end: 50px; inset-inline-start: 50px; } @media screen and (max-width: 1399px) { .cta-two-content { inset-block-end: 20px; inset-inline-start: 20px; } } @media screen and (max-width: 1199px) { .cta-two-content { inset-block-end: 40px; inset-inline-start: 40px; } } @media screen and (max-width: 575px) { .cta-two-content { position: static !important; margin-inline-end: 0; margin-block-start: 30px; } } .cta-two-counter { inset-inline-start: 50px; inset-block-start: 50px; } .cta-three-area { padding-block: 170px 140px; } .cta-three-area .tw-btn-circle:hover span { color: hsl(var(--black)) !important; } @media screen and (max-width: 1199px) { .cta-three-area .tw-hover-btn-wrapper { margin-block-start: 0 !important; } } @media screen and (max-width: 767px) { .cta-three-wrapper { flex-wrap: wrap; row-gap: 20px; } } .cta-three-shape-1 { inset-block-end: 60px; inset-inline-start: 0; } @media screen and (max-width: 1199px) { .cta-five-thumb img { width: 100%; } } .cta-five-wrapper { border: 1px solid rgba(255, 255, 255, 0.33); padding: 35px 35px 26px 35px; } .cta-five-subtitle { border-bottom: 1px solid rgba(255, 255, 255, 0.22); } @media screen and (max-width: 1399px) { .cta-five-number { font-size: 2rem; } } @media screen and (max-width: 1199px) { .pricing-ip-switch-wrapper { justify-content: left !important; } } .pricing-ip-check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 6; } .pricing-ip-check:checked ~ .pricing-ip-switch { right: 5px; left: 57.5%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0.08s, 0s; } .pricing-ip-switch { top: 4px; bottom: 4px; left: 5px; right: 57.5%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0s, 0.08s; } .pricing-ip-price-parent .pricing-ip-toggler { display: inline-block; vertical-align: middle; margin-left: 10px; } .pricing-ip-price-parent .pricing-ip-toggle { display: inline-block; vertical-align: middle; margin-left: 10px; } .pricing-ip-wrapper-full.hide { display: none; } .pricing-ip-wrap { background: rgba(255, 255, 255, 0.05); margin-block-end: 30px; } @media screen and (max-width: 991px) { .pricing-ip-wrap { padding-inline: var(--size-5); } } @media screen and (max-width: 767px) { .pricing-ip-wrap { padding-inline: var(--size-11); } } .pricing-ip-subtitle { background: rgba(255, 255, 255, 0.1); padding: 9px 20px; letter-spacing: 0.3em; } .faq-three-area { background: #F3F6FE; } @media screen and (max-width: 1199px) { .faq-three-thumb { margin-block-end: 30px; } } .faq-three-wrapper { margin-inline-start: -70px; } @media screen and (max-width: 1399px) { .faq-three-wrapper { margin-inline-start: 0; } } .faq-three-accordion-item { background: transparent; border: 1px solid #c8c8c8 !important; padding-inline: 0 0; margin-bottom: 18px; border-radius: 30px !important; padding-block: 2px; } .faq-three-accordion-item:first-of-type .faq-three-accordion-button { border-bottom: none !important; } .faq-three-accordion-button { font-size: 18px; font-weight: 700; font-family: var(--body-font); background: transparent !important; padding-left: 0; padding-right: 0; border-radius: 30px 30px 0 0 !important; padding-inline: 30px 23px; } .faq-three-accordion-button::after { width: 38px; height: 38px; margin-left: auto; content: "+"; transition: var(--bs-accordion-btn-icon-transition); font-size: 24px; background-image: none; font-weight: 400; transition: 0.4s; position: absolute; right: 10px; top: 7px; display: inline-flex !important; justify-content: center; align-items: center; background: hsl(var(--white)); color: var(--main-four-600); border-radius: 50%; } .faq-three-accordion-button:not(.collapsed) { color: hsl(var(--warning-600)); background: hsl(var(--heading-color)) !important; box-shadow: none !important; margin-block-start: -2px; border: 1px solid hsl(var(--heading-color)) !important; } .faq-three-accordion-button:not(.collapsed)::after { background-image: none; content: "-"; background: var(--main-six-600); transform: none; transition: 0.4s; color: hsl(var(--white)); } .faq-three-accordion-button:focus { box-shadow: none !important; border: none; } .faq-three-accordion-body { padding-inline: 30px 23px; } .faq-five-area { padding-block-start: 170px; } .faq-five-wrap { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.21); padding: 30px 35px; } @media screen and (max-width: 1199px) { .faq-five-wrap { margin-block-end: 30px; } } .faq-five-wrapper { margin-inline-start: 65px; } @media screen and (max-width: 1199px) { .faq-five-wrapper { margin-inline-start: 0; } } .faq-five-wrapper .faq-three-accordion-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.21) !important; } .faq-five-wrapper .faq-three-accordion-button::after { background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); } .faq-five-accordion-button { font-size: 18px; font-weight: 700; font-family: var(--body-font); background: transparent !important; padding-left: 0; padding-right: 0; border-radius: 30px 30px 0 0 !important; padding-inline: 30px 23px; } .faq-five-accordion-button::after { width: 38px; height: 38px; margin-left: auto; content: "+"; transition: var(--bs-accordion-btn-icon-transition); font-size: 24px; background-image: none; font-weight: 400; transition: 0.4s; position: absolute; right: 10px; top: 7px; display: inline-flex !important; justify-content: center; align-items: center; background: hsl(var(--white)); color: var(--main-four-600); border-radius: 50%; } .faq-five-accordion-button:not(.collapsed) { color: hsl(var(--white)); background: var(--main-seven-600) !important; border: 1px solid var(--main-seven-600) !important; } .faq-five-accordion-button:not(.collapsed)::after { background: hsl(var(--white)); color: var(--main-seven-600); } .faq-ip-accordion-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.21) !important; } .faq-ip-accordion-button { font-size: 18px; font-weight: 700; font-family: var(--body-font); background: transparent !important; padding-left: 0; padding-right: 0; border-radius: 30px 30px 0 0 !important; padding-inline: 30px 23px; } .faq-ip-accordion-button::after { width: 38px; height: 38px; margin-left: auto; content: "+"; transition: var(--bs-accordion-btn-icon-transition); font-size: 24px; background-image: none; font-weight: 400; transition: 0.4s; position: absolute; right: 10px; top: 7px; display: inline-flex !important; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); border-radius: 50%; } .faq-ip-accordion-button:not(.collapsed) { color: hsl(var(--heading-color)) !important; background: var(--main-600) !important; border: 1px solid var(--main-600) !important; } .faq-ip-accordion-button:not(.collapsed)::after { background: hsl(var(--white)); color: var(--main-seven-600); } .award-four-area { margin-block-start: -275px; } @media screen and (max-width: 1599px) { .award-four-area { padding-inline: 0; } } .award-four-bg { border: 5px solid hsl(var(--white)); } .award-four-thumb { inset-inline-start: 0; inset-block-start: 200px; } @media screen and (max-width: 1199px) { .award-four-thumb { position: static !important; margin-block-start: 50px; } } @media screen and (max-width: 1399px) { .award-four-thumb img { width: 500px; height: 500px; } } @media screen and (max-width: 1199px) { .award-four-content { margin-block-start: var(--size-14); } } .gallery-four-area { background: #202020; } @media screen and (max-width: 991px) { .gallery-four-area { padding-inline: 0; } } .gallery-four-wrapper:hover .gallery-four-button { opacity: 1; visibility: visible; inset-block-start: 50%; } .gallery-four-button { inset-inline-start: 50%; inset-block-start: 70%; inset-inline-end: 0; transform: translate(-50%, -50%); text-align: center; opacity: 0; visibility: hidden; transition: 0.4s ease-in-out; } .gallery-four-btn::before { background-color: rgba(255, 48, 20, 0.471); } .gallery-four-btn::after { border: 1px solid rgba(255, 48, 20, 0.471); } @media screen and (max-width: 1599px) { .interactive-gallery-area .pin-spacer { transform: translateX(-100px); } } @media screen and (max-width: 1399px) { .interactive-gallery-area .pin-spacer { transform: translateX(-100px); } } @media screen and (max-width: 1199px) { .interactive-gallery-area .pin-spacer { transform: translateX(-150px); } } @media screen and (max-width: 991px) { .interactive-gallery-list-thumb-wrap { transform: translateX(0); width: 100%; height: 760px; margin-block-start: 30px; } } .interactive-gallery-list-thumb-wrap { width: 655px; height: 760px; } @media screen and (max-width: 991px) { .interactive-gallery-list-thumb-wrap { width: 100%; } } .interactive-gallery-list-thumb-1, .interactive-gallery-list-thumb-2, .interactive-gallery-list-thumb-3, .interactive-gallery-list-thumb-4, .interactive-gallery-list-thumb-5, .interactive-gallery-list-thumb-6 { top: 0; left: 0; width: 655px; height: 760px; object-fit: cover; visibility: hidden; position: absolute; border-radius: 10px; } @media screen and (max-width: 1399px) { .interactive-gallery-list-thumb-1, .interactive-gallery-list-thumb-2, .interactive-gallery-list-thumb-3, .interactive-gallery-list-thumb-4, .interactive-gallery-list-thumb-5, .interactive-gallery-list-thumb-6 { width: 570px; height: 620px; } } @media screen and (max-width: 1199px) { .interactive-gallery-list-thumb-1, .interactive-gallery-list-thumb-2, .interactive-gallery-list-thumb-3, .interactive-gallery-list-thumb-4, .interactive-gallery-list-thumb-5, .interactive-gallery-list-thumb-6 { width: 450px; height: 620px; } } @media screen and (max-width: 991px) { .interactive-gallery-list-thumb-1, .interactive-gallery-list-thumb-2, .interactive-gallery-list-thumb-3, .interactive-gallery-list-thumb-4, .interactive-gallery-list-thumb-5, .interactive-gallery-list-thumb-6 { width: 100%; } } .interactive-gallery-list-wrap .interactive-gallery-list-item:first-child { padding-top: 0; } .interactive-gallery-list-item { padding-bottom: 25px; padding-top: 25px; position: relative; cursor: pointer; } .interactive-gallery-list-item.active .interactive-gallery-list-title { color: var(--main-600); background-size: 100% 1px; } .interactive-gallery-list-title { font-weight: 900; letter-spacing: -0.04em; background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: all 0.3s, background-size 0.8s; } @media screen and (max-width: 1499px) { .interactive-gallery-list-title { font-size: 4rem; } } @media screen and (max-width: 1399px) { .interactive-gallery-list-title { font-size: 3rem; } } @media screen and (max-width: 575px) { .interactive-gallery-list-title { font-size: 2rem; } } #interactive-gallery-thumb.interactive-gallery-list-thumb-1 .interactive-gallery-list-thumb-1 { opacity: 1; visibility: visible; transform: scale(0.9); } #interactive-gallery-thumb.interactive-gallery-list-thumb-2 .interactive-gallery-list-thumb-2 { opacity: 1; visibility: visible; } #interactive-gallery-thumb.interactive-gallery-list-thumb-3 .interactive-gallery-list-thumb-3 { opacity: 1; visibility: visible; } #interactive-gallery-thumb.interactive-gallery-list-thumb-4 .interactive-gallery-list-thumb-4 { opacity: 1; visibility: visible; } #interactive-gallery-thumb.interactive-gallery-list-thumb-5 .interactive-gallery-list-thumb-5 { opacity: 1; visibility: visible; } #interactive-gallery-thumb.interactive-gallery-list-thumb-6 .interactive-gallery-list-thumb-6 { opacity: 1; visibility: visible; } .breadcrumb-area { padding-block: 223px 90px; } .breadcrumb-shape-1 { inset-block-end: -80px; inset-inline-start: 263px; } @media screen and (max-width: 1499px) { .breadcrumb-shape-1 { inset-inline-start: 120px; } } @media screen and (max-width: 1399px) { .breadcrumb-shape-1 { inset-inline-start: 80px; } } @media screen and (max-width: 991px) { .breadcrumb-shape-1 { display: none; } } .breadcrumb-shape-2 { inset-block-start: 36%; inset-inline-end: 13%; animation: bounce-thum-2 1s ease-in-out 0.1s forwards infinite alternate; } @media screen and (max-width: 1499px) { .breadcrumb-shape-2 { inset-inline-end: 7%; } } @media screen and (max-width: 1399px) { .breadcrumb-shape-2 { inset-inline-end: 5%; } } @media screen and (max-width: 1199px) { .breadcrumb-shape-2 { inset-inline-end: 3%; } } @media screen and (max-width: 991px) { .breadcrumb-shape-2 { display: none; } } .fullscreen-banner-one-height { padding-block: 259px 80px; height: 100vh; } @media screen and (max-width: 1799px) { .fullscreen-banner-one-height { padding-block: 180px 80px; } } .fullscreen-banner-one-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease; transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease; transition: transform 9000ms ease, opacity 1500ms ease-in; transition: transform 9000ms ease, opacity 1500ms ease-in, -webkit-transform 9000ms ease; } .fullscreen-banner-one-title { font-weight: 900; font-size: 132px; line-height: 104%; } @media screen and (max-width: 991px) { .fullscreen-banner-one-title { font-size: 100px; } } @media screen and (max-width: 767px) { .fullscreen-banner-one-title { font-size: 70px; } } @media screen and (max-width: 575px) { .fullscreen-banner-one-title { font-size: 56px; } } @media screen and (max-width: 424px) { .fullscreen-banner-one-title { font-size: 48px; } } .fullscreen-banner-one-dots { position: absolute; inset-block-end: 50px; inset-inline-end: 50px; z-index: 2; } @media screen and (max-width: 1399px) { .fullscreen-banner-one-dots { inset-block-end: 50px; inset-inline-end: 50px; } } .fullscreen-banner-one-dots .swiper-pagination-bullet { width: 92px; height: 11px; display: inline-block; border-radius: 10px; opacity: 1; margin: 0px 6px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden; } @media screen and (max-width: 575px) { .fullscreen-banner-one-dots .swiper-pagination-bullet { width: 70px; } } @media screen and (max-width: 424px) { .fullscreen-banner-one-dots .swiper-pagination-bullet { width: 60px; } } .fullscreen-banner-one-dots .swiper-pagination-bullet::before { content: ""; position: absolute; width: 100%; height: 100%; inset-block-start: 0; inset-inline-start: 0; background-color: hsl(var(--white)); opacity: 0; visibility: hidden; transition: 0.6s; } .fullscreen-banner-one-dots.dots-color .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.33); } .fullscreen-banner-one-dots.dots-color .swiper-pagination-bullet-active::before { opacity: 1; visibility: visible; } .fullscreen-banner-one-title-box { opacity: 0; z-index: 3; position: relative; transform: translateY(-150px); } .fullscreen-banner-one-btn-box { transform: translateY(150px); opacity: 0; } .fullscreen-banner-one-wrapper .swiper-slide.swiper-slide-active .fullscreen-banner-one-bg { -webkit-transform: scale(1.35); transform: scale(1.35); } .fullscreen-banner-one-wrapper .swiper-slide.swiper-slide-active .fullscreen-banner-one-title-box { opacity: 1; transform: translatey(0px); transition: all 2500ms ease; } .fullscreen-banner-one-wrapper .swiper-slide.swiper-slide-active .fullscreen-banner-one-btn-box { opacity: 1; transform: translatey(0px); transition: all 2500ms ease; } .fullscreen-banner-two-1, .fullscreen-banner-two-2, .fullscreen-banner-two-3, .fullscreen-banner-two-4, .fullscreen-banner-two-5, .fullscreen-banner-two-6, .fullscreen-banner-two-7, .fullscreen-banner-two-8, .fullscreen-banner-two-9 { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; opacity: 0; object-fit: cover; transform: scale(1.04, 1.04); transform-origin: 50% 50%; transition: all 0.9s; } .fullscreen-banner-two-1 img, .fullscreen-banner-two-2 img, .fullscreen-banner-two-3 img, .fullscreen-banner-two-4 img, .fullscreen-banner-two-5 img, .fullscreen-banner-two-6 img, .fullscreen-banner-two-7 img, .fullscreen-banner-two-8 img, .fullscreen-banner-two-9 img { height: 100vh; width: 100%; object-fit: cover; transition: none; } .fullscreen-banner-two-main { height: 100vh; overflow: hidden; } .fullscreen-banner-two-content-wrap { position: absolute; inset-block-start: 0; inset-inline-start: 8%; height: 100%; width: 50%; overflow-y: scroll; scrollbar-width: none; padding-top: 100px; } @media screen and (max-width: 1699px) { .fullscreen-banner-two-content-wrap { inset-inline-start: 0%; } } @media screen and (max-width: 1399px) { .fullscreen-banner-two-content-wrap { width: 65%; } } @media screen and (max-width: 991px) { .fullscreen-banner-two-content-wrap { width: 100%; } } .fullscreen-banner-two-title { font-size: 120px; font-weight: 600; line-height: 1; letter-spacing: -3.6px; color: transparent; transition: 0.3s; cursor: pointer; display: block; background-size: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; font-family: var(--tp-ff-shoulders); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4); transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.6s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s; background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%); padding: 20px 0; mix-blend-mode: luminosity; } @media screen and (max-width: 1499px) { .fullscreen-banner-two-title { font-size: 100px; } } @media screen and (max-width: 575px) { .fullscreen-banner-two-title { font-size: 76px; } } @media screen and (max-width: 424px) { .fullscreen-banner-two-title { font-size: 65px; } } .fullscreen-banner-two-title:hover { background-size: 200% 100%; color: var(--tp-common-white); } #fullscreen-banner-two-wrap.fullscreen-banner-two-1 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-1 .fullscreen-banner-two-1 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-2 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-2 .fullscreen-banner-two-2 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-3 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-3 .fullscreen-banner-two-3 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-4 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-4 .fullscreen-banner-two-4 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-5 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-5 .fullscreen-banner-two-5 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-6 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-6 .fullscreen-banner-two-6 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-7 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-7 .fullscreen-banner-two-7 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-8 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-8 .fullscreen-banner-two-8 { opacity: 1; transform: scale(1); } #fullscreen-banner-two-wrap.fullscreen-banner-two-9 { opacity: 1; } #fullscreen-banner-two-wrap.fullscreen-banner-two-9 .fullscreen-banner-two-9 { opacity: 1; transform: scale(1); } .fullscreen-banner-three .slider { min-height: 50vh; } .fullscreen-banner-three .slider .swiper-slide { overflow: hidden; position: relative; height: 100%; display: flex; justify-content: center; } .fullscreen-banner-three .slider .swiper-slide .slide-inner { position: absolute; width: 100%; height: 100vh; left: 0; top: 0; } .fullscreen-banner-three .slider .swiper-slide .slide-inner img { position: absolute; width: 100vw; height: 100vh; object-fit: cover; left: 0; top: 0; bottom: 0; margin: auto; } .fullscreen-banner-three .swiper-container { width: 100%; height: 100vh; position: relative; } .fullscreen-banner-three-content { position: absolute; inset-inline-start: 9%; inset-block-end: 80px; z-index: 9; } @media screen and (max-width: 1799px) { .fullscreen-banner-three-content { inset-inline-start: 1%; } } .fullscreen-banner-three-content-title { opacity: 0; transform: translateY(-130px); } .fullscreen-banner-three-list { opacity: 0; display: flex; margin-top: 40px; align-items: center; transform: translateY(-150px); } .fullscreen-banner-three .swiper-slide-active .fullscreen-banner-three-item { animation-name: qodef-animate-slide-out; animation-duration: 1.3s; animation-fill-mode: forwards; } .fullscreen-banner-three .swiper-slide-active .fullscreen-banner-three-content-title { opacity: 1; transform: translatey(0px); transition: all 2200ms ease; } .fullscreen-banner-three .swiper-slide-active .fullscreen-banner-three-list { opacity: 1; transform: translatey(0px); transition: all 2000ms ease; } .fullscreen-banner-three .fullscreen-banner-three-pagination { position: absolute; z-index: 9; display: flex; gap: 15px; top: inherit; right: 0; transform: inherit; inset-block-end: 50px; inset-inline-end: 50px; } .fullscreen-banner-three .swiper-pagination-bullet { width: 92px; height: 11px; display: inline-block; margin: 0 5px; overflow: hidden; transition: 0.4s; position: relative; border-radius: 5px; background: rgba(255, 255, 255, 0.3); } @media screen and (max-width: 575px) { .fullscreen-banner-three .swiper-pagination-bullet { width: 70px; } } .fullscreen-banner-three .swiper-pagination-bullet::before { content: ""; width: 150px; height: 100%; position: absolute; transition: 0.6s; z-index: 9; left: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.3); } .fullscreen-banner-three .swiper-pagination-bullet::after { content: ""; width: 0; height: 100%; position: absolute; transition: 0.6s; z-index: 8; left: 0; background-color: white; } .fullscreen-banner-three .swiper-pagination-bullet-active::after { opacity: 1; width: 100%; } /*# sourceMappingURL=main.css.map */