/* ============================================================
[Master Stylesheet]
Theme Name: AudiQ
Theme URL: https://photoclerks.com/template/audiq/
Description: AudiQ - Voice AI Solutions html template
Author: PhotoClerks
Version: 1.0.0
============================================================== */
/*
========================================
*********** TABLE OF CONTENTS **********
01. Css Variables
02. Font Size css
03. Common Typography Css
04. reset css
05. Button CSS
06. margin Css
07. padding Css
08. Border Color Css
09. Banner css
10. Promo CSS
11. Every-need CSS
12. Find scale CSS
13. Content creation CSS
14. Use-cases CSS
15. Customer CSS
16. Not-human CSS
17. Pricing CSS
18. Faq CSS
19. Testimonial CSS
20. CallToAction CSS
21. Team CSS
22. Blog CSS
23. Contact CSS
24. Cursor-effect CSS
25. Preloader Css
26. Scroll back to top Css
27. navbar css
28. footer css
29. breadcrumb css
========================================*/
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&display=swap");
@import url("../css/all.min.css");
@import url("../font/flaticon_mycollection.css");
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
font-weight: 100 700;
src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v222/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format("woff2");
}
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* ============================
00.00 Css Variables
=============================== */
:root {
/* Font Family */
--body-font: "Space Grotesk", sans-serif;
--title-font: "Space Grotesk", sans-serif;
--base-gradient: linear-gradient(90deg, #5d13ff 4.4%, #cb1bdb 100%);
--base-gradient2: linear-gradient(90deg, #cb1bdb 4.4%, #5d13ff 100%);
--base-gradient: linear-gradient(to right, hsl(var(--base)), hsl(var(--base-two)));
--base-gradient-reverse: linear-gradient(100deg, hsl(var(--base-two)), hsl(var(--base)));
/* ==================
Theme Color
=================== */
/* Base Color */
--base-h: 259;
--base-s: 100%;
--base-l: 54%;
--base: var(--base-h) var(--base-s) var(--base-l);
--base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);
--base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);
--base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3);
--base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4);
--base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5);
--base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6);
--base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7);
--base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8);
--base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9);
--base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1);
--base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1);
--base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2);
--base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3);
--base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4);
--base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5);
--base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6);
--base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7);
--base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8);
--base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9);
--base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1);
/* Base Two Color */
--base-two-h: 295;
--base-two-s: 78%;
--base-two-l: 48%;
--base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
--base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1);
--base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2);
--base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3);
--base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4);
--base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5);
--base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6);
--base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7);
--base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8);
--base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9);
--base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1);
--base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1);
--base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2);
--base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3);
--base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4);
--base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5);
--base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6);
--base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7);
--base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8);
--base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9);
--base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1);
/* ====================
Color Variables
===================== */
--white: 0 0% 100%;
--black: 0 0% 0%;
--body-color: 225 84% 20%;
--border-color: 0 0% 96%;
--section-bg: 16 100% 98%;
/* ====================
Bootstrap Modifier
===================== */
/* Primary Color */
--primary-h: 259;
--primary-s: 100%;
--primary-l: 56%;
--primary: var(--primary-h) var(--primary-s) var(--primary-l);
--primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);
--primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);
--primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);
--primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);
--primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);
--primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
--primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
--primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
--primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
--primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
/* Secondary Color */
--secondary-h: 295;
--secondary-s: 74%;
--secondary-l: 38%;
--secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
--secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);
--secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);
--secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);
--secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);
--secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);
--secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
--secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
--secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
--secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
--secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
/* Success Color */
--success-h: 112;
--success-s: 100%;
--success-l: 40%;
--success: var(--success-h) var(--success-s) var(--success-l);
--success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);
--success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);
--success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);
--success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);
--success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);
--success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
--success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
--success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
--success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
--success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
/* Danger Color */
--danger-h: 0;
--danger-s: 96%;
--danger-l: 63%;
--danger: var(--danger-h) var(--danger-s) var(--danger-l);
--danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);
--danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
--danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);
--danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);
--danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);
--danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
--danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
--danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
--danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
--danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
/* Warning Color */
--warning-h: 40;
--warning-s: 100%;
--warning-l: 46%;
--warning: var(--warning-h) var(--warning-s) var(--warning-l);
--warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);
--warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);
--warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);
--warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);
--warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);
--warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
--warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
--warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
--warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
--warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
/* Info Color */
--info-h: 196;
--info-s: 100%;
--info-l: 50%;
--info: var(--info-h) var(--info-s) var(--info-l);
--info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);
--info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);
--info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);
--info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);
--info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);
--info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
--info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
--info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
--info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
--info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5);
}
.section-bg {
background-color: hsl(var(--section-bg));
}
/* ============================
00.01 Font Size css
=============================== */
.fs-10 {
font-size: 0.625rem;
}
.fs-11 {
font-size: 0.6875rem;
}
.fs-12 {
font-size: 0.75rem;
}
.fs-13 {
font-size: 0.8125rem;
}
.fs-14 {
font-size: 0.875rem;
}
@media screen and (max-width: 1199px) {
.fs-14 {
font-size: 0.8125rem;
}
}
.fs-15 {
font-size: 0.9375rem;
}
@media screen and (max-width: 1199px) {
.fs-15 {
font-size: 0.875rem;
}
}
.fs-16 {
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.fs-16 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.fs-16 {
font-size: 0.875rem;
}
}
@media screen and (max-width: 1199px) {
.fs-16 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1199px) and (max-width: 1199px) {
.fs-16 {
font-size: 0.875rem;
}
}
.fs-17 {
font-size: 1.0625rem;
}
@media screen and (max-width: 1199px) {
.fs-17 {
font-size: 1rem;
}
}
@media screen and (max-width: 991px) {
.fs-17 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 575px) {
.fs-17 {
font-size: 0.875rem;
}
}
@media screen and (max-width: 1199px) {
.fs-17 {
font-size: 1rem;
}
}
@media screen and (max-width: 1199px) and (max-width: 1199px) {
.fs-17 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1199px) and (max-width: 991px) {
.fs-17 {
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) {
.fs-17 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-17 {
font-size: 0.875rem;
}
}
.fs-18 {
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
.fs-18 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.fs-18 {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.fs-18 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1399px) {
.fs-18 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-18 {
font-size: 1rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-18 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-18 {
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) {
.fs-18 {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-18 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-18 {
font-size: 0.875rem;
}
}
.fs-19 {
font-size: 1.1875rem;
}
@media screen and (max-width: 1199px) {
.fs-19 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.fs-19 {
font-size: 1rem;
}
}
@media screen and (max-width: 1399px) {
.fs-19 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-19 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-19 {
font-size: 1rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-19 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) {
.fs-19 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-19 {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-19 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-19 {
font-size: 0.875rem;
}
}
.fs-20 {
font-size: 1.25rem;
}
@media screen and (max-width: 1199px) {
.fs-20 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.fs-20 {
font-size: 1rem;
}
}
@media screen and (max-width: 1399px) {
.fs-20 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-20 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-20 {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) {
.fs-20 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-20 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-20 {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-20 {
font-size: 0.9375rem;
}
}
.fs-21 {
font-size: 1.3125rem;
}
@media screen and (max-width: 1199px) {
.fs-21 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 991px) {
.fs-21 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 575px) {
.fs-21 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) {
.fs-21 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-21 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-21 {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) {
.fs-21 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-21 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-21 {
font-size: 1rem;
}
}
.fs-22 {
font-size: 1.375rem;
}
@media screen and (max-width: 1199px) {
.fs-22 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 991px) {
.fs-22 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 575px) {
.fs-22 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) {
.fs-22 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-22 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-22 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-22 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) {
.fs-22 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-22 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-22 {
font-size: 1rem;
}
}
.fs-23 {
font-size: 1.4375rem;
}
@media screen and (max-width: 1199px) {
.fs-23 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 991px) {
.fs-23 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 575px) {
.fs-23 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 1399px) {
.fs-23 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-23 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-23 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-23 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) {
.fs-23 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-23 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-23 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-23 {
font-size: 1.125rem;
}
}
.fs-24 {
font-size: 1.5rem;
}
@media screen and (max-width: 1199px) {
.fs-24 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 991px) {
.fs-24 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 575px) {
.fs-24 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) {
.fs-24 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-24 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-24 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-24 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 767px) {
.fs-24 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-24 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-24 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-24 {
font-size: 1.125rem;
}
}
.fs-25 {
font-size: 1.5625rem;
}
@media screen and (max-width: 1199px) {
.fs-25 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 991px) {
.fs-25 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 575px) {
.fs-25 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 1399px) {
.fs-25 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-25 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-25 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-25 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.fs-25 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-25 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-25 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-25 {
font-size: 1.1875rem;
}
}
.fs-26 {
font-size: 1.5rem;
}
@media screen and (max-width: 1199px) {
.fs-26 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 991px) {
.fs-26 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 575px) {
.fs-26 {
font-size: 1.438rem;
}
}
@media screen and (max-width: 1399px) {
.fs-26 {
font-size: 1.5625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-26 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-26 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-26 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 767px) {
.fs-26 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-26 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-26 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-26 {
font-size: 1.25rem;
}
}
.fs-27 {
font-size: 1.563rem;
}
@media screen and (max-width: 1199px) {
.fs-27 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 991px) {
.fs-27 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 575px) {
.fs-27 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 1399px) {
.fs-27 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-27 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-27 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-27 {
font-size: 1.438rem;
}
}
@media screen and (max-width: 767px) {
.fs-27 {
font-size: 1.5625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-27 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-27 {
font-size: 1.3125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-27 {
font-size: 1.25rem;
}
}
.fs-28 {
font-size: 1.625rem;
}
@media screen and (max-width: 1199px) {
.fs-28 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 991px) {
.fs-28 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 575px) {
.fs-28 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 1399px) {
.fs-28 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-28 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-28 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-28 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) {
.fs-28 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-28 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-28 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-28 {
font-size: 1.438rem;
}
}
.fs-29 {
font-size: 1.688rem;
}
@media screen and (max-width: 1199px) {
.fs-29 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 991px) {
.fs-29 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 575px) {
.fs-29 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 1399px) {
.fs-29 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-29 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-29 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-29 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 767px) {
.fs-29 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-29 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-29 {
font-size: 1.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-29 {
font-size: 1.5rem;
}
}
.fs-30 {
font-size: 1.75rem;
}
@media screen and (max-width: 1199px) {
.fs-30 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 991px) {
.fs-30 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 575px) {
.fs-30 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 1399px) {
.fs-30 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-30 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-30 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-30 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 767px) {
.fs-30 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-30 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-30 {
font-size: 1.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-30 {
font-size: 1.563rem;
}
}
.fs-31 {
font-size: 1.813rem;
}
@media screen and (max-width: 1199px) {
.fs-31 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 991px) {
.fs-31 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 575px) {
.fs-31 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 1399px) {
.fs-31 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-31 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-31 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-31 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 767px) {
.fs-31 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-31 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-31 {
font-size: 1.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-31 {
font-size: 1.625rem;
}
}
.fs-32 {
font-size: 1.875rem;
}
@media screen and (max-width: 1199px) {
.fs-32 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 991px) {
.fs-32 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 575px) {
.fs-32 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 1399px) {
.fs-32 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-32 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-32 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-32 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 767px) {
.fs-32 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-32 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-32 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-32 {
font-size: 1.688rem;
}
}
.fs-33 {
font-size: 1.938rem;
}
@media screen and (max-width: 1199px) {
.fs-33 {
font-size: 2rem;
}
}
@media screen and (max-width: 991px) {
.fs-33 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 575px) {
.fs-33 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 1399px) {
.fs-33 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-33 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-33 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-33 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 767px) {
.fs-33 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-33 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-33 {
font-size: 1.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-33 {
font-size: 1.75rem;
}
}
.fs-34 {
font-size: 2rem;
}
@media screen and (max-width: 1199px) {
.fs-34 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 991px) {
.fs-34 {
font-size: 2rem;
}
}
@media screen and (max-width: 575px) {
.fs-34 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 1399px) {
.fs-34 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-34 {
font-size: 2rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-34 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-34 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 767px) {
.fs-34 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-34 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-34 {
font-size: 1.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-34 {
font-size: 1.813rem;
}
}
.fs-35 {
font-size: 2.063rem;
}
@media screen and (max-width: 1199px) {
.fs-35 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 991px) {
.fs-35 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 575px) {
.fs-35 {
font-size: 2rem;
}
}
@media screen and (max-width: 1399px) {
.fs-35 {
font-size: 2rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-35 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-35 {
font-size: 2rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-35 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 767px) {
.fs-35 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-35 {
font-size: 2rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-35 {
font-size: 1.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-35 {
font-size: 1.875rem;
}
}
.fs-36 {
font-size: 2.125rem;
}
@media screen and (max-width: 1199px) {
.fs-36 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 991px) {
.fs-36 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 575px) {
.fs-36 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 1399px) {
.fs-36 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-36 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-36 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-36 {
font-size: 2rem;
}
}
@media screen and (max-width: 767px) {
.fs-36 {
font-size: 2rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-36 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-36 {
font-size: 2rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-36 {
font-size: 1.938rem;
}
}
.fs-37 {
font-size: 2.188rem;
}
@media screen and (max-width: 1199px) {
.fs-37 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 991px) {
.fs-37 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 575px) {
.fs-37 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 1399px) {
.fs-37 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-37 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-37 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-37 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 767px) {
.fs-37 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-37 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-37 {
font-size: 2.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-37 {
font-size: 2rem;
}
}
.fs-38 {
font-size: 2.25rem;
}
@media screen and (max-width: 1199px) {
.fs-38 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 991px) {
.fs-38 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 575px) {
.fs-38 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 1399px) {
.fs-38 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-38 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-38 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-38 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 767px) {
.fs-38 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-38 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-38 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-38 {
font-size: 2.063rem;
}
}
.fs-39 {
font-size: 2.313rem;
}
@media screen and (max-width: 1199px) {
.fs-39 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 991px) {
.fs-39 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 575px) {
.fs-39 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 1399px) {
.fs-39 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-39 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-39 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-39 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 767px) {
.fs-39 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-39 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-39 {
font-size: 2.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-39 {
font-size: 2.125rem;
}
}
.fs-40 {
font-size: 2.375rem;
}
@media screen and (max-width: 1199px) {
.fs-40 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 991px) {
.fs-40 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 575px) {
.fs-40 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 1399px) {
.fs-40 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-40 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-40 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-40 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 767px) {
.fs-40 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-40 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-40 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-40 {
font-size: 2.188rem;
}
}
.fs-41 {
font-size: 2.438rem;
}
@media screen and (max-width: 1199px) {
.fs-41 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 991px) {
.fs-41 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 575px) {
.fs-41 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 1399px) {
.fs-41 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-41 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-41 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-41 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 767px) {
.fs-41 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-41 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-41 {
font-size: 2.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-41 {
font-size: 2.25rem;
}
}
.fs-42 {
font-size: 2.5rem;
}
@media screen and (max-width: 1199px) {
.fs-42 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 991px) {
.fs-42 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 575px) {
.fs-42 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 1399px) {
.fs-42 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-42 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-42 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-42 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 767px) {
.fs-42 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-42 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-42 {
font-size: 2.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-42 {
font-size: 2.313rem;
}
}
.fs-43 {
font-size: 2.563rem;
}
@media screen and (max-width: 1199px) {
.fs-43 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 991px) {
.fs-43 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 575px) {
.fs-43 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 1399px) {
.fs-43 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-43 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-43 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-43 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 767px) {
.fs-43 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-43 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-43 {
font-size: 2.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-43 {
font-size: 2.375rem;
}
}
.fs-44 {
font-size: 2.625rem;
}
@media screen and (max-width: 1199px) {
.fs-44 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 991px) {
.fs-44 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 575px) {
.fs-44 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 1399px) {
.fs-44 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-44 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-44 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-44 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.fs-44 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-44 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-44 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-44 {
font-size: 2.438rem;
}
}
.fs-45 {
font-size: 2.688rem;
}
@media screen and (max-width: 1199px) {
.fs-45 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 991px) {
.fs-45 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 575px) {
.fs-45 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 1399px) {
.fs-45 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-45 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-45 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-45 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 767px) {
.fs-45 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-45 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-45 {
font-size: 2.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-45 {
font-size: 2.5rem;
}
}
.fs-46 {
font-size: 2.75rem;
}
@media screen and (max-width: 1199px) {
.fs-46 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 991px) {
.fs-46 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 575px) {
.fs-46 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 1399px) {
.fs-46 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-46 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-46 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-46 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 767px) {
.fs-46 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-46 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-46 {
font-size: 2.625rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-46 {
font-size: 2.563rem;
}
}
.fs-47 {
font-size: 2.813rem;
}
@media screen and (max-width: 1199px) {
.fs-47 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 991px) {
.fs-47 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 575px) {
.fs-47 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 1399px) {
.fs-47 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-47 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-47 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-47 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 767px) {
.fs-47 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-47 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-47 {
font-size: 2.688rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-47 {
font-size: 2.625rem;
}
}
.fs-48 {
font-size: 2.875rem;
}
@media screen and (max-width: 1199px) {
.fs-48 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 991px) {
.fs-48 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 575px) {
.fs-48 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 1399px) {
.fs-48 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-48 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-48 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-48 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 767px) {
.fs-48 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-48 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-48 {
font-size: 2.75rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-48 {
font-size: 2.688rem;
}
}
.fs-49 {
font-size: 2.938rem;
}
@media screen and (max-width: 1199px) {
.fs-49 {
font-size: 3rem;
}
}
@media screen and (max-width: 991px) {
.fs-49 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 575px) {
.fs-49 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 1399px) {
.fs-49 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-49 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-49 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-49 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 767px) {
.fs-49 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-49 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-49 {
font-size: 2.813rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-49 {
font-size: 2.75rem;
}
}
.fs-50 {
font-size: 3rem;
}
@media screen and (max-width: 1199px) {
.fs-50 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 991px) {
.fs-50 {
font-size: 3rem;
}
}
@media screen and (max-width: 575px) {
.fs-50 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 1399px) {
.fs-50 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-50 {
font-size: 3rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-50 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-50 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 767px) {
.fs-50 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-50 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-50 {
font-size: 2.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-50 {
font-size: 2.813rem;
}
}
.fs-51 {
font-size: 3.063rem;
}
@media screen and (max-width: 1199px) {
.fs-51 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 991px) {
.fs-51 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 575px) {
.fs-51 {
font-size: 3rem;
}
}
@media screen and (max-width: 1399px) {
.fs-51 {
font-size: 3rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-51 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-51 {
font-size: 3rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-51 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 767px) {
.fs-51 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-51 {
font-size: 3rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-51 {
font-size: 2.938rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-51 {
font-size: 2.875rem;
}
}
.fs-52 {
font-size: 3.125rem;
}
@media screen and (max-width: 1199px) {
.fs-52 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 991px) {
.fs-52 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 575px) {
.fs-52 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 1399px) {
.fs-52 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-52 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-52 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-52 {
font-size: 3rem;
}
}
@media screen and (max-width: 767px) {
.fs-52 {
font-size: 3rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-52 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-52 {
font-size: 3rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-52 {
font-size: 2.938rem;
}
}
.fs-53 {
font-size: 3.188rem;
}
@media screen and (max-width: 1199px) {
.fs-53 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 991px) {
.fs-53 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 575px) {
.fs-53 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 1399px) {
.fs-53 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-53 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-53 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-53 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 767px) {
.fs-53 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-53 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-53 {
font-size: 3.063rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-53 {
font-size: 3rem;
}
}
.fs-54 {
font-size: 3.25rem;
}
@media screen and (max-width: 1199px) {
.fs-54 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 991px) {
.fs-54 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 575px) {
.fs-54 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 1399px) {
.fs-54 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-54 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-54 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-54 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 767px) {
.fs-54 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-54 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-54 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-54 {
font-size: 3.063rem;
}
}
.fs-55 {
font-size: 3.313rem;
}
@media screen and (max-width: 1199px) {
.fs-55 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 991px) {
.fs-55 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 575px) {
.fs-55 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 1399px) {
.fs-55 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-55 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-55 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-55 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 767px) {
.fs-55 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-55 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-55 {
font-size: 3.188rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-55 {
font-size: 3.125rem;
}
}
.fs-56 {
font-size: 3.375rem;
}
@media screen and (max-width: 1199px) {
.fs-56 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 991px) {
.fs-56 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 575px) {
.fs-56 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 1399px) {
.fs-56 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-56 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-56 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-56 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 767px) {
.fs-56 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-56 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-56 {
font-size: 3.25rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-56 {
font-size: 3.188rem;
}
}
.fs-57 {
font-size: 3.438rem;
}
@media screen and (max-width: 1199px) {
.fs-57 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 991px) {
.fs-57 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 575px) {
.fs-57 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 1399px) {
.fs-57 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-57 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-57 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-57 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 767px) {
.fs-57 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-57 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-57 {
font-size: 3.313rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-57 {
font-size: 3.25rem;
}
}
.fs-58 {
font-size: 3.5rem;
}
@media screen and (max-width: 1199px) {
.fs-58 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 991px) {
.fs-58 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 575px) {
.fs-58 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 1399px) {
.fs-58 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-58 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-58 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-58 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 767px) {
.fs-58 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-58 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-58 {
font-size: 3.375rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-58 {
font-size: 3.313rem;
}
}
.fs-59 {
font-size: 3.563rem;
}
@media screen and (max-width: 1199px) {
.fs-59 {
font-size: 3.625rem;
}
}
@media screen and (max-width: 991px) {
.fs-59 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 575px) {
.fs-59 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 1399px) {
.fs-59 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-59 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-59 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-59 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 767px) {
.fs-59 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-59 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-59 {
font-size: 3.438rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-59 {
font-size: 3.375rem;
}
}
.fs-60 {
font-size: 3.625rem;
}
@media screen and (max-width: 1199px) {
.fs-60 {
font-size: 3.75rem;
}
}
@media screen and (max-width: 991px) {
.fs-60 {
font-size: 3.625rem;
}
}
@media screen and (max-width: 575px) {
.fs-60 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 1399px) {
.fs-60 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 1199px) {
.fs-60 {
font-size: 3.625rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 991px) {
.fs-60 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 1399px) and (max-width: 575px) {
.fs-60 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 767px) {
.fs-60 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.fs-60 {
font-size: 3.563rem;
}
}
@media screen and (max-width: 767px) and (max-width: 991px) {
.fs-60 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 767px) and (max-width: 575px) {
.fs-60 {
font-size: 3.438rem;
}
}
.btn-theme-gradient,
.btn-base-border {
position: relative;
padding: 15px 30px;
font-family: var(--title-font);
font-size: 1rem;
color: hsl(var(--white));
font-weight: 600;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
@media screen and (max-width: 1199px) {
.btn-theme-gradient,
.btn-base-border {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.btn-theme-gradient,
.btn-base-border {
font-size: 0.875rem;
}
}
.btn-theme-gradient::before, .btn-theme-gradient::after,
.btn-base-border::before,
.btn-base-border::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
border-radius: inherit;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-clip-path: polygon(10px 0, 95% 0, 100% 10px, 100% 84%, 94% 100%, 10px 100%, 0 84%, 0 10px);
clip-path: polygon(10px 0, 95% 0, 100% 10px, 100% 84%, 94% 100%, 10px 100%, 0 84%, 0 10px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.btn-theme-gradient::after,
.btn-base-border::after {
width: calc(100% - 3px);
height: calc(100% - 3px);
background: #261B5C;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.btn-theme-gradient:hover,
.btn-base-border:hover {
color: hsl(var(--white));
}
.btn-theme-gradient:hover::before, .btn-theme-gradient:hover::after,
.btn-base-border:hover::before,
.btn-base-border:hover::after {
background: var(--base-gradient2);
}
.btn-theme-gradient:hover::after,
.btn-base-border:hover::after {
background: none;
}
.btn-theme-gradient:hover i,
.btn-base-border:hover i {
-webkit-transform: rotate(0deg) translateX(40px);
transform: rotate(0deg) translateX(40px);
}
.btn-theme-gradient i,
.btn-base-border i {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
.btn-theme-gradient i,
.btn-base-border i {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.btn-theme-gradient i,
.btn-base-border i {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.btn-theme-gradient i,
.btn-base-border i {
font-size: 0.9375rem;
}
}
.btn-theme-gradient::after {
background: none;
}
.custom_anime_top {
-webkit-animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 0;
}
@-webkit-keyframes anime-top {
0% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
-webkit-clip-path: inset(0 0 100% 0);
clip-path: inset(0 0 100% 0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
@keyframes anime-top {
0% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
-webkit-clip-path: inset(0 0 100% 0);
clip-path: inset(0 0 100% 0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.wave_animation {
height: 70px;
width: 70px;
fill: hsl(var(--base));
}
.wave_animation .line_1 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.wave_animation .line_2 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.wave_animation .line_3 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.wave_animation .line_4 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.wave_animation .line_5 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
.wave_animation .line_6 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.wave_animation .line_7 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.05s;
animation-delay: 1.05s;
}
.wave_animation .line_8 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.wave_animation .line_9 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.35s;
animation-delay: 1.35s;
}
.wave_animation .line_10 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.wave_animation .line_11 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.65s;
animation-delay: 1.65s;
}
.wave_animation .line_12 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.wave_animation .line_13 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 1.95s;
animation-delay: 1.95s;
}
.wave_animation .line_14 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.wave_animation .line_15 {
-webkit-animation: pulse_wave 1s infinite;
animation: pulse_wave 1s infinite;
-webkit-animation-delay: 2.25s;
animation-delay: 2.25s;
}
@-webkit-keyframes pulse_wave {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
50% {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
}
@keyframes pulse_wave {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
50% {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
}
.reveal-img {
position: relative;
display: inline-block;
}
.reveal-img img {
opacity: 0;
}
.reveal-img::after {
content: "";
top: 0;
left: 0;
width: 0%;
height: 100%;
background: hsl(var(--white));
opacity: 0.3;
position: absolute;
}
.reveal-img.reveal-img-active img {
-webkit-animation: imgAppear 1s linear forwards;
animation: imgAppear 1s linear forwards;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.reveal-img.reveal-img-active::after {
-webkit-animation: revealImg 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation: revealImg 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@-webkit-keyframes imgAppear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes imgAppear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes revealImg {
0% {
left: 0%;
width: 0%;
}
50% {
left: 0%;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
@keyframes revealImg {
0% {
left: 0%;
width: 0%;
}
50% {
left: 0%;
width: 100%;
}
100% {
left: 100%;
width: 0%;
}
}
/* =================================
Common Typography Css
=================================== */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: var(--body-font);
color: hsl(var(--white));
word-break: break-word;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #001419;
font-size: 1.125rem;
position: relative;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/shape/bg-home.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
z-index: -1;
opacity: 1;
}
@supports (-moz-appearance: none) {
body::before {
opacity: 0.25;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
}
@media screen and (max-width: 1199px) {
body {
font-size: 1rem;
}
}
@media screen and (max-width: 991px) {
body {
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) {
body {
font-size: 0.875rem;
}
}
span {
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: hsl(var(--white));
line-height: 1.3;
font-weight: 700;
font-family: var(--title-font);
}
h1 {
font-size: 3.75rem;
}
@media screen and (max-width: 1199px) {
h1 {
font-size: 3.4375rem;
}
}
@media screen and (max-width: 991px) {
h1 {
font-size: 3.125rem;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 2.8125rem;
}
}
@media screen and (max-width: 575px) {
h1 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 374px) {
h1 {
font-size: 2rem;
}
}
h2 {
font-size: 2.6875rem;
}
@media screen and (max-width: 1199px) {
h2 {
font-size: 2.25rem;
}
}
@media screen and (max-width: 991px) {
h2 {
font-size: 2.125rem;
}
}
@media screen and (max-width: 767px) {
h2 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 575px) {
h2 {
font-size: 1.5625rem;
}
}
h3 {
font-size: 2rem;
}
@media screen and (max-width: 1199px) {
h3 {
font-size: 1.5625rem;
}
}
@media screen and (max-width: 991px) {
h3 {
font-size: 1.4375rem;
}
}
@media screen and (max-width: 767px) {
h3 {
font-size: 1.375rem;
}
}
@media screen and (max-width: 575px) {
h3 {
font-size: 1.25rem;
}
}
h4 {
font-size: 1.5rem;
}
@media screen and (max-width: 1199px) {
h4 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 991px) {
h4 {
font-size: 1.1875rem;
}
}
@media screen and (max-width: 767px) {
h4 {
font-size: 1.25rem;
}
}
@media screen and (max-width: 575px) {
h4 {
font-size: 1.25rem;
}
}
h5 {
font-size: 1.25rem;
}
@media screen and (max-width: 1199px) {
h5 {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
h5 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 767px) {
h5 {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 575px) {
h5 {
font-size: 1.0625rem;
}
}
h6 {
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
h6 {
font-size: 1rem;
}
}
@media screen and (max-width: 991px) {
h6 {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 767px) {
h6 {
font-size: 0.875rem;
}
}
p {
opacity: 0.85;
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
p {
font-size: 1rem;
}
}
@media screen and (max-width: 991px) {
p {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) {
p {
font-size: 1rem;
}
}
@media screen and (max-width: 767px) {
p {
font-size: 0.9375rem;
}
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
font-weight: inherit;
font-size: inherit;
color: inherit;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
line-height: inherit;
}
a {
display: inline-block;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
text-decoration: none;
color: hsl(var(--info));
}
a:hover {
color: hsl(var(--base));
}
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;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-select:focus {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/* ============================
01.02 reset css
=============================== */
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
}
ul[role=list],
ol[role=list] {
list-style: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
html:focus-within {
scroll-behavior: smooth;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
button,
a {
text-decoration: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
}
button:focus,
a:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 0;
}
img,
picture,
svg,
video,
canvas {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
}
img {
margin-bottom: -1px;
}
input,
button,
textarea,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
-webkit-transition: none;
transition: none;
}
}
.offcanvas-backdrop {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background: hsl(var(--black)/0.5) !important;
opacity: 1 !important;
-webkit-transition: all 0.4s;
transition: all 0.4s;
width: 0;
right: 0;
left: auto;
}
.offcanvas-backdrop.show {
width: 100%;
border-radius: 0;
}
.offcanvas {
background: hsl(var(--black));
height: 100vh;
}
button.btn-close {
-webkit-filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%);
filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%);
opacity: 1;
}
.navbar-brand {
margin-right: 0;
}
body,
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
.slide-transition {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.inner-slide-element {
width: auto;
display: inline-block;
padding: 0 15px;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background: hsl(var(--secondary)/0.1);
color: hsl(var(--secondary));
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background: hsl(var(--base));
color: hsl(var(--white));
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background: hsl(var(--base));
}
.datepicker.dropdown-menu {
font-family: var(--body-font);
padding: 15px;
border: none;
margin: 25px 0;
}
.datepicker table thead:first-child tr:first-child th {
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
.datepicker table thead:first-child tr:first-child th {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.datepicker table thead:first-child tr:first-child th {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.datepicker table thead:first-child tr:first-child th {
font-size: 0.9375rem;
}
}
.datepicker table thead:first-child tr:nth-child(2) {
color: hsl(var(--base));
}
.datepicker table thead .prev,
.datepicker table thead .next {
background: hsl(var(--base));
color: hsl(var(--white));
padding: 10px 15px;
}
.datepicker table thead .prev:hover,
.datepicker table thead .next:hover {
background: hsl(var(--secondary)) !important;
}
.datepicker table thead .dow {
padding-top: 20px;
}
.datepicker table td {
width: 38px;
height: 38px;
border-radius: 50px;
padding: 7px 5px !important;
}
.text-reveal {
position: relative;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.text-reveal[data-scroll=in] {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.text-reveal::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-color: #fcfcfc;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.text-reveal[data-scroll=in]::after {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.video-play-btn {
z-index: 10;
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: block;
-webkit-transition: 0.5s;
transition: 0.5s;
position: relative;
}
.video-play-btn::before, .video-play-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
background: hsl(var(--primary));
border-radius: 50%;
}
.video-play-btn::before {
z-index: 0;
-webkit-animation: pulse-border 1500ms ease-out infinite;
animation: pulse-border 1500ms ease-out infinite;
}
.video-play-btn:after {
z-index: 1;
-webkit-transition: all 200ms;
transition: all 200ms;
}
.video-play-btn i {
display: block;
position: relative;
z-index: 3;
color: hsl(var(--white));
font-size: 35px;
text-align: center;
}
.swiper-pagination {
position: relative;
margin-top: 60px;
}
.swiper-pagination .swiper-pagination-bullet {
width: 15px;
height: 15px;
}
.swiper-pagination .swiper-pagination-bullet-active {
background-color: hsl(var(--base));
}
.pagination {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.pagination .page-item {
font-size: 1.25rem;
}
@media screen and (max-width: 1199px) {
.pagination .page-item {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.pagination .page-item {
font-size: 1rem;
}
}
.pagination .page-link {
border: 1px solid hsl(var(--secondary));
color: hsl(var(--secondary));
font-weight: 600;
outline: none;
border-radius: 5px;
width: 40px;
height: 40px;
padding: 0;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
font-size: 1.125rem;
}
@media screen and (max-width: 1199px) {
.pagination .page-link {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.pagination .page-link {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.pagination .page-link {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 424px) {
.pagination .page-link {
font-size: 1rem;
width: 30px;
height: 30px;
}
}
@media screen and (max-width: 424px) and (max-width: 1199px) {
.pagination .page-link {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 424px) and (max-width: 991px) {
.pagination .page-link {
font-size: 0.875rem;
}
}
.pagination .page-link.active, .pagination .page-link:focus, .pagination .page-link:hover {
background: hsl(var(--base));
border-color: hsl(var(--base));
color: hsl(var(--white));
}
.pagination .page-link .material-icons {
font-size: 1.25rem;
width: 15px;
}
@media screen and (max-width: 1199px) {
.pagination .page-link .material-icons {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.pagination .page-link .material-icons {
font-size: 1rem;
}
}
.accordion-button:not(.collapsed) {
color: var(--bs-accordion-active-color);
background-color: hsl(var(--base)/0.1);
-webkit-box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.form-check-input:checked {
background-color: hsl(var(--base));
border-color: hsl(var(--base));
-webkit-box-shadow: hsl(var(--base)/0.25);
box-shadow: hsl(var(--base)/0.25);
}
.form-check-label a {
color: hsl(var(--secondary));
}
.form-check-label a:hover {
color: hsl(var(--base));
}
.form-control:focus {
-webkit-box-shadow: 0 0 0 0.15rem hsl(var(--base)/0.03);
box-shadow: 0 0 0 0.15rem hsl(var(--base)/0.03);
border-color: hsl(var(--base));
}
input:-internal-autofill-selected {
background: hsl(var(--base));
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
background: none;
}
.form-floating > .form-control:not(:-ms-input-placeholder) ~ label::after {
background: none;
}
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
background: none;
}
.form-floating > .form-control:-webkit-autofill ~ label {
color: rgba(var(--bs-body-color-rgb), 0.65);
-webkit-transform: scale(0.7) translateY(-0.3rem) translateX(0.5rem);
transform: scale(0.7) translateY(-0.3rem) translateX(0.5rem);
}
/* ================================= Background Color Css Start =========================== */
.bg--base {
background-color: hsl(var(--base)) !important;
}
.bg--primary {
background-color: hsl(var(--primary)) !important;
}
.bg--secondary {
background-color: hsl(var(--secondary)) !important;
}
.bg--success {
background-color: hsl(var(--success)) !important;
}
.bg--danger {
background-color: hsl(var(--danger)) !important;
}
.bg--warning {
background-color: hsl(var(--warning)) !important;
}
.bg--info {
background-color: hsl(var(--info)) !important;
}
/* ================================= Background Color Css End =========================== */
/* ================================= Color Css Start =========================== */
.text--base {
color: hsl(var(--base)) !important;
}
.text--primary {
color: hsl(var(--primary)) !important;
}
.text--secondary {
color: hsl(var(--secondary)) !important;
}
.text--success {
color: hsl(var(--success)) !important;
}
.text--danger {
color: hsl(var(--danger)) !important;
}
.text--warning {
color: hsl(var(--warning)) !important;
}
.text--info {
color: hsl(var(--info)) !important;
}
/* ================================= Color Css End =========================== */
/* ===========================
Button CSS
============================= */
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
color: none;
background-color: none;
border-color: none;
}
.pill {
border-radius: 40px !important;
}
.btn {
color: hsl(var(--white)) !important;
font-weight: 500;
padding: 16px 30px;
border-radius: 4px;
position: relative;
z-index: 1;
border: 1px solid transparent;
font-family: var(--body-font);
display: inline-block !important;
font-size: 1rem;
line-height: 1;
}
@media screen and (max-width: 1199px) {
.btn {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.btn {
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) {
.btn {
padding: 14px 25px;
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) and (max-width: 1199px) {
.btn {
font-size: 0.8125rem;
}
}
@media screen and (max-width: 575px) {
.btn {
padding: 12px 20px;
}
}
.btn:hover, .btn:focus, .btn:focus-visible {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.btn:active {
top: 1px;
}
.btn--lg {
padding: 20px 35px;
}
@media screen and (max-width: 991px) {
.btn--lg {
padding: 18px 30px;
}
}
@media screen and (max-width: 767px) {
.btn--lg {
padding: 16px 25px;
}
}
.btn--sm {
padding: 7px 18px;
font-weight: 600;
font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
.btn--sm {
padding: 8px 12px;
}
}
.btn--icon {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 0.9375rem;
padding: 0;
}
@media screen and (max-width: 1199px) {
.btn--icon {
font-size: 0.875rem;
}
}
.btn--base {
position: relative;
}
.btn--base::before, .btn--base::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: calc(100% + 2px);
height: calc(100% + 2px);
background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base-two))), to(hsl(var(--base))));
background: linear-gradient(90deg, hsl(var(--base-two)) 0%, hsl(var(--base)) 100%);
border-radius: inherit !important;
z-index: -1;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.btn--base::after {
background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base))), to(hsl(var(--base-two))));
background: linear-gradient(90deg, hsl(var(--base)) 0%, hsl(var(--base-two)) 100%);
visibility: hidden;
opacity: 0;
}
.btn--base:hover::after, .btn--base:focus::after, .btn--base:focus-visible::after {
visibility: visible;
opacity: 1;
}
.btn-outline--base {
background-color: transparent !important;
border: 1px solid hsl(var(--base)) !important;
color: hsl(var(--base)) !important;
position: relative;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.btn-outline--base::before, .btn-outline--base::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: calc(100% + 2px);
height: calc(100% + 2px);
background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base-two))), to(hsl(var(--base))));
background: linear-gradient(90deg, hsl(var(--base-two)) 0%, hsl(var(--base)) 100%);
border-radius: inherit !important;
z-index: -1;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
visibility: hidden;
opacity: 0;
}
.btn-outline--base:hover, .btn-outline--base:focus, .btn-outline--base:focus-visible {
color: hsl(var(--white)) !important;
}
.btn-outline--base:hover::before, .btn-outline--base:hover::after, .btn-outline--base:focus::before, .btn-outline--base:focus::after, .btn-outline--base:focus-visible::before, .btn-outline--base:focus-visible::after {
visibility: visible;
opacity: 1;
}
.btn--primary {
background-color: hsl(var(--primary)) !important;
}
.btn--primary:hover, .btn--primary:focus .btn--primary:focus-visible {
background-color: hsl(var(--primary-d-200)) !important;
border: 1px solid hsl(var(--primary-d-200)) !important;
}
.btn-outline--primary {
background-color: transparent !important;
border: 1px solid hsl(var(--primary)) !important;
color: hsl(var(--primary)) !important;
}
.btn-outline--primary:hover, .btn-outline--primary:focus .btn-outline--primary:focus-visible {
background-color: hsl(var(--primary)) !important;
color: hsl(var(--white)) !important;
}
.btn--secondary {
background-color: hsl(var(--secondary)) !important;
}
.btn--secondary:hover, .btn--secondary:focus .btn--secondary:focus-visible {
background-color: hsl(var(--secondary-d-200)) !important;
border: 1px solid hsl(var(--secondary-d-200)) !important;
}
.btn-outline--secondary {
background-color: transparent !important;
border: 1px solid hsl(var(--secondary)) !important;
color: hsl(var(--secondary)) !important;
}
.btn-outline--secondary:hover, .btn-outline--secondary:focus .btn-outline--secondary:focus-visible {
background-color: hsl(var(--secondary)) !important;
color: hsl(var(--white)) !important;
}
.btn--danger {
background-color: hsl(var(--danger)) !important;
}
.btn--danger:hover, .btn--danger:focus .btn--danger:focus-visible {
background-color: hsl(var(--danger-d-200)) !important;
border: 1px solid hsl(var(--danger-d-200)) !important;
}
.btn-outline--danger {
background-color: transparent !important;
border: 1px solid hsl(var(--danger)) !important;
color: hsl(var(--danger)) !important;
}
.btn-outline--danger:hover, .btn-outline--danger:focus .btn-outline--danger:focus-visible {
background-color: hsl(var(--danger)) !important;
color: hsl(var(--white)) !important;
}
.btn--warning {
background-color: hsl(var(--warning)) !important;
}
.btn--warning:hover, .btn--warning:focus .btn--warning:focus-visible {
background-color: hsl(var(--warning-d-200)) !important;
border: 1px solid hsl(var(--warning-d-200)) !important;
}
.btn-outline--warning {
background-color: transparent !important;
border: 1px solid hsl(var(--warning)) !important;
color: hsl(var(--warning)) !important;
}
.btn-outline--warning:hover, .btn-outline--warning:focus .btn-outline--warning:focus-visible {
background-color: hsl(var(--warning)) !important;
color: hsl(var(--white)) !important;
}
.btn--info {
background-color: hsl(var(--info)) !important;
}
.btn--info:hover, .btn--info:focus .btn--info:focus-visible {
background-color: hsl(var(--info-d-200)) !important;
border: 1px solid hsl(var(--info-d-200)) !important;
}
.btn-outline--info {
background-color: transparent !important;
border: 1px solid hsl(var(--info)) !important;
color: hsl(var(--info)) !important;
}
.btn-outline--info:hover, .btn-outline--info:focus .btn-outline--info:focus-visible {
background-color: hsl(var(--info)) !important;
color: hsl(var(--white)) !important;
}
.btn-border {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
position: relative;
overflow: hidden;
font-weight: 600;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
color: hsl(var(--white));
padding: 15px 25px;
text-transform: capitalize;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.btn-border {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.btn-border {
font-size: 0.875rem;
}
}
.btn-border i {
font-size: 1rem;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media screen and (max-width: 1199px) {
.btn-border i {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.btn-border i {
font-size: 0.875rem;
}
}
.btn-border:hover {
color: hsl(var(--white));
}
.btn-border:hover::after {
-webkit-transform: translateY(0);
transform: translateY(0);
border-radius: 0;
}
.btn-border:hover i {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.btn-border::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient2);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.btn-border::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: var(--base-gradient2);
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.btn-border.btn-fill:hover::after {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-radius: 50px;
}
.btn-border.btn-fill::after {
-webkit-transform: translateY(0);
transform: translateY(0);
border-radius: 0;
}
/* ================================= margin Css Start =========================== */
.my-120 {
margin-top: 60px;
margin-bottom: 60px;
}
@media (min-width: 576px) {
.my-120 {
margin-top: 80px;
margin-bottom: 80px;
}
}
@media (min-width: 992px) {
.my-120 {
margin-top: 120px;
margin-bottom: 120px;
}
}
.mt-120 {
margin-top: 60px;
}
@media (min-width: 576px) {
.mt-120 {
margin-top: 80px;
}
}
@media (min-width: 992px) {
.mt-120 {
margin-top: 120px;
}
}
.mb-120 {
margin-bottom: 60px;
}
@media (min-width: 576px) {
.mb-120 {
margin-bottom: 80px;
}
}
@media (min-width: 992px) {
.mb-120 {
margin-bottom: 120px;
}
}
.my-60 {
margin-top: 30px;
margin-bottom: 30px;
}
@media (min-width: 576px) {
.my-60 {
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (min-width: 992px) {
.my-60 {
margin-top: 60px;
margin-bottom: 60px;
}
}
.mt-60 {
margin-top: 30px;
}
@media (min-width: 576px) {
.mt-60 {
margin-top: 40px;
}
}
@media (min-width: 992px) {
.mt-60 {
margin-top: 60px;
}
}
.mb-60 {
margin-bottom: 30px;
}
@media (min-width: 576px) {
.mb-60 {
margin-bottom: 40px;
}
}
@media (min-width: 992px) {
.mb-60 {
margin-bottom: 60px;
}
}
/* ================================= margin Css End =========================== */
/* ================================= padding Css Start =========================== */
.py-120 {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 576px) {
.py-120 {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 992px) {
.py-120 {
padding-top: 120px;
padding-bottom: 120px;
}
}
.pt-120 {
padding-top: 60px;
}
@media (min-width: 576px) {
.pt-120 {
padding-top: 80px;
}
}
@media (min-width: 992px) {
.pt-120 {
padding-top: 120px;
}
}
.pb-120 {
padding-bottom: 60px;
}
@media (min-width: 576px) {
.pb-120 {
padding-bottom: 80px;
}
}
@media (min-width: 992px) {
.pb-120 {
padding-bottom: 120px;
}
}
.py-100 {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 576px) {
.py-100 {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 992px) {
.py-100 {
padding-top: 100px;
padding-bottom: 100px;
}
}
.pt-100 {
padding-top: 60px;
}
@media (min-width: 576px) {
.pt-100 {
padding-top: 80px;
}
}
@media (min-width: 992px) {
.pt-100 {
padding-top: 100px;
}
}
.pb-100 {
padding-bottom: 60px;
}
@media (min-width: 576px) {
.pb-100 {
padding-bottom: 80px;
}
}
@media (min-width: 992px) {
.pb-100 {
padding-bottom: 100px;
}
}
.py-60 {
padding-top: 30px;
padding-bottom: 30px;
}
@media (min-width: 576px) {
.py-60 {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media (min-width: 992px) {
.py-60 {
padding-top: 60px;
padding-bottom: 60px;
}
}
.pt-60 {
padding-top: 30px;
}
@media (min-width: 576px) {
.pt-60 {
padding-top: 40px;
}
}
@media (min-width: 992px) {
.pt-60 {
padding-top: 60px;
}
}
.pb-60 {
padding-bottom: 30px;
}
@media (min-width: 576px) {
.pb-60 {
padding-bottom: 40px;
}
}
@media (min-width: 992px) {
.pb-60 {
padding-bottom: 60px;
}
}
/* ================================= padding Css End =========================== */
/* ================================= Border Color Css Start =========================== */
.border--base {
border-color: hsl(var(--base)) !important;
}
.border--primary {
border-color: hsl(var(--primary)) !important;
}
.border--secondary {
border-color: hsl(var(--secondary)) !important;
}
.border--success {
border-color: hsl(var(--success)) !important;
}
.border--danger {
border-color: hsl(var(--danger)) !important;
}
.border--warning {
border-color: hsl(var(--warning)) !important;
}
.border--info {
border-color: hsl(var(--info)) !important;
}
/* ================================= Border Color Css End =========================== */
/* ============================
Banner css
=============================== */
/* Add or update these media queries */
/* Update the banner section styles */
@media (max-width: 991px) {
.banner-section {
padding: 40px 0;
overflow: hidden;
}
.banner-section__img {
margin-bottom: 2rem;
}
.robot-model {
height: 300px;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.banner-section__text {
padding: 0 1rem;
}
.banner-section__text h1 {
font-size: 2rem;
line-height: 1.3;
margin: 1rem 0;
}
.banner-section__text p {
font-size: 1rem;
margin: 1rem auto;
max-width: 600px;
}
}
.banner-section {
position: relative;
z-index: 1;
padding: 150px 0 0;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.banner-section {
padding-top: 110px;
}
}
.banner-section__img {
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 991px) {
.banner-section__img {
width: 380px;
margin: 50px auto 0;
}
}
@media screen and (max-width: 767px) {
.banner-section__img {
width: 300px;
}
}
.banner-section__img .wave-shape1,
.banner-section__img .wave-shape2 {
position: absolute;
bottom: 200px;
}
.banner-section__img .wave-shape2 {
left: 100px;
}
.banner-section__img .user {
z-index: 2;
}
.banner-section__img .phone {
width: 100%;
}
.banner-section__img .boya {
margin: 0 -10px;
z-index: 1;
}
@media screen and (max-width: 374px) {
.banner-section .d-flex.gap-4 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.banner-section .banner-shape {
position: absolute;
top: 30%;
left: 0;
width: 100%;
height: auto;
z-index: -1;
opacity: 0.4;
-webkit-animation: jump 10s linear infinite;
animation: jump 10s linear infinite;
}
.banner-section__text span {
color: hsl(var(--white));
font-size: 1.25rem;
font-weight: 500;
}
@media screen and (max-width: 1199px) {
.banner-section__text span {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.banner-section__text span {
font-size: 1rem;
}
}
.banner-section__text h1 {
line-height: 1.2;
margin-top: 15px;
}
.banner-section__text p {
padding: 20px 0 40px;
}
.banner-section__text .voices-telk {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-size: 1.125rem;
margin-top: 50px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (max-width: 1199px) {
.banner-section__text .voices-telk {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.banner-section__text .voices-telk {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.banner-section__text .voices-telk {
font-size: 0.9375rem;
}
}
.banner-section__text .voices-telk .telk-img {
margin-left: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.banner-section__text .voices-telk .telk-img .fadeIn_50:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.banner-section__text .voices-telk .telk-img .fadeIn_50:nth-child(2) {
position: relative;
z-index: 1;
}
.banner-section__text .voices-telk .telk-img img {
margin: 0 -10px;
border-radius: 100px;
border: 2px solid hsl(var(--white));
max-width: 45px;
height: 45px;
}
.banner-section .bg-shape img {
position: absolute;
z-index: -1;
width: 650px;
height: 678px;
left: 50%;
}
@media screen and (max-width: 991px) {
.banner-section .bg-shape img {
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
}
}
.banner-section .btn-base-border:hover::after {
background: var(--base-gradient2);
}
.banner-section .btn-base-border::after {
background: #1d1545;
}
.banner-section .banner_wave {
position: absolute;
width: 60px;
height: 137px;
bottom: 30%;
left: 16%;
}
.banner-section .banner_wave path {
-webkit-animation: bounce 1.2s infinite ease-in-out;
animation: bounce 1.2s infinite ease-in-out;
}
.banner-section .banner_wave path:nth-child(even) {
-webkit-animation: bounce 1.8s infinite ease-in-out;
animation: bounce 1.8s infinite ease-in-out;
}
.banner-section .banner_wave2 {
position: absolute;
width: 60px;
height: 137px;
bottom: 40%;
left: 48%;
}
.banner-section .banner_wave2 path {
-webkit-animation: bounce 1.4s infinite ease-in-out;
animation: bounce 1.4s infinite ease-in-out;
}
.banner-section .banner_wave2 path:nth-child(even) {
-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out;
}
.banner-section .banner_wave3 {
position: absolute;
width: 107px;
height: 143px;
left: 48%;
top: 10%;
}
.banner-section .banner_wave3 path {
-webkit-animation: bounce 1.6s infinite ease-in-out;
animation: bounce 1.6s infinite ease-in-out;
}
.banner-section .banner_wave3 path:nth-child(even) {
-webkit-animation: bounce 2.2s infinite ease-in-out;
animation: bounce 2.2s infinite ease-in-out;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(1.2);
transform: scaleY(1.2);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(1.2);
transform: scaleY(1.2);
}
}
.banner-shapes {
position: absolute;
width: 100%;
top: 50%;
z-index: -1;
}
@media screen and (max-width: 991px) {
.banner-shapes {
top: 72%;
}
}
.banner-shapes img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0 auto;
opacity: 0.3;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.banner-shapes img:nth-child(1) {
-webkit-animation: rotateYLoop 5s linear infinite;
animation: rotateYLoop 5s linear infinite;
}
.banner-shapes img:nth-child(2) {
-webkit-animation: rotateYLoop 10s linear infinite;
animation: rotateYLoop 10s linear infinite;
}
.banner-shapes img:nth-child(3) {
-webkit-animation: rotateYLoop 3s linear infinite;
animation: rotateYLoop 3s linear infinite;
}
@-webkit-keyframes rotateYLoop {
0% {
-webkit-transform: translate(-50%, -50%) rotateX(0deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotateX(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateX(180deg) translate3d(0, 50%, 0);
transform: translate(-50%, -50%) rotateX(180deg) translate3d(0, 50%, 0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateX(360deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotateX(360deg) translate3d(0, 0, 0);
}
}
@keyframes rotateYLoop {
0% {
-webkit-transform: translate(-50%, -50%) rotateX(0deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotateX(0deg) translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateX(180deg) translate3d(0, 50%, 0);
transform: translate(-50%, -50%) rotateX(180deg) translate3d(0, 50%, 0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateX(360deg) translate3d(0, 0, 0);
transform: translate(-50%, -50%) rotateX(360deg) translate3d(0, 0, 0);
}
}
/* ===========================
Promo CSS
============================= */
.promo-section {
position: relative;
z-index: 1;
}
.promo-section__content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
@media screen and (max-width: 991px) {
.promo-section__content {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 424px) {
.promo-section__content {
grid-template-columns: 1fr;
}
}
.promo-section__item {
padding: 0 40px 20px;
border-bottom: 1px solid hsl(var(--base-two));
position: relative;
}
.promo-section__item:hover i {
-webkit-animation: ekg 1s ease-in-out forwards;
animation: ekg 1s ease-in-out forwards;
}
.promo-section__item:hover svg, .promo-section__item:hover img {
-webkit-animation: ekg 1s ease-in-out forwards;
animation: ekg 1s ease-in-out forwards;
}
.promo-section__item:hover svg path, .promo-section__item:hover img path {
fill: hsl(var(--white));
}
@-webkit-keyframes ekg {
0% {
opacity: 0.3;
}
25% {
opacity: 1;
}
50% {
stroke-dashoffset: 2000;
}
99% {
opacity: 0.2;
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 1000;
}
}
@keyframes ekg {
0% {
opacity: 0.3;
}
25% {
opacity: 1;
}
50% {
stroke-dashoffset: 2000;
}
99% {
opacity: 0.2;
stroke-dashoffset: 3000;
}
100% {
stroke-dashoffset: 1000;
}
}
@-webkit-keyframes icon_jump {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes icon_jump {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40% {
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@media screen and (max-width: 1399px) {
.promo-section__item {
padding: 0 20px 20px;
}
}
@media screen and (max-width: 991px) {
.promo-section__item {
padding: 10px 20px 20px;
}
}
@media screen and (max-width: 424px) {
.promo-section__item {
text-align: center;
border-bottom: 1px solid hsl(var(--base-two)/0.2);
}
}
.promo-section__item::after, .promo-section__item::before {
content: "";
position: absolute;
bottom: -2px;
left: -4px;
width: 1px;
height: 24px;
background: hsl(var(--base-two));
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
@media screen and (max-width: 424px) {
.promo-section__item::after, .promo-section__item::before {
display: none;
}
}
.promo-section__item::before {
right: -4px;
left: auto;
-webkit-transform: rotate(-160deg);
transform: rotate(-160deg);
}
.promo-section__item i {
font-size: 50px;
color: hsl(var(--white));
}
@media screen and (max-width: 991px) {
.promo-section__item i {
font-size: 40px;
}
}
.promo-section__item svg, .promo-section__item img {
height: 60px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.promo-section__item svg path, .promo-section__item img path {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.promo-section__item h4 {
padding: 20px 0 10px;
}
.promo-section__item p {
color: hsl(var(--white)/0.9);
}
.promo-section__item:first-child {
padding-left: 0;
}
.promo-section__item:first-child::after {
display: none;
}
@media screen and (max-width: 991px) {
.promo-section__item:nth-child(2)::before {
display: none;
}
}
@media screen and (max-width: 991px) {
.promo-section__item:nth-child(3)::after {
display: none;
}
}
.promo-section__item:last-child {
padding-right: 0;
}
.promo-section__item:last-child::before {
display: none;
}
.promo-section.promo-tow {
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.promo-section.promo-tow .promo-section__item {
margin-bottom: 0;
border-bottom: 0;
}
/* ===========================
Every-need CSS
============================= */
.every-need-section {
background: hsl(var(--white)/0.03);
}
.every-need-section__content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media screen and (max-width: 991px) {
.every-need-section__content {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 575px) {
.every-need-section__content {
grid-template-columns: 1fr;
}
}
.every-need-section__item {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: hsl(var(--white)/0.03);
text-align: center;
padding: 30px 10px;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
border-radius: 5px;
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
}
@media screen and (max-width: 767px) {
.every-need-section__item {
max-width: 300px;
margin: 0 auto;
}
}
.every-need-section__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.every-need-section__item.active::before {
background: var(--base-gradient);
}
.every-need-section__item.active, .every-need-section__item:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.every-need-section__item.active img, .every-need-section__item:hover img {
-webkit-filter: invert(24%) sepia(93%) saturate(7154%) hue-rotate(260deg) brightness(98%) contrast(106%);
filter: invert(24%) sepia(93%) saturate(7154%) hue-rotate(260deg) brightness(98%) contrast(106%);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.every-need-section__item.active .wave-icon .wave_animation, .every-need-section__item:hover .wave-icon .wave_animation {
fill: hsl(var(--base));
}
.every-need-section__item img {
height: 210px;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.every-need-section__item img {
height: 150px;
}
}
.every-need-section__item h4 {
margin: 20px 0 18px;
}
.every-need-section__item .wave-icon .wave_animation {
fill: hsl(var(--white));
height: 55px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.every-need-section__item button {
margin-top: 20px;
}
.every-need-section__item button i {
font-size: 80px;
background: var(--base-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ===========================
Find scale CSS
============================= */
.find-scale-section__text p {
margin: 24px 0 40px;
}
.find-scale-section__text ul {
display: grid;
gap: 8px;
margin-bottom: 45px;
}
.find-scale-section__text ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-family: var(--title-font);
font-weight: 700;
color: hsl(var(--white)/0.7);
}
.find-scale-section__text ul li::before {
content: "\f00c";
font-weight: 900;
font-family: "Font Awesome 6 free";
background: var(--base-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.find-scale-section__text .btn-border {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.find-scale-section__img .finde-image {
background: var(--base-gradient2);
padding: 1.5px;
border-radius: 7px;
overflow: hidden;
}
.find-scale-section__img .finde-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain
}
.find-scale-section__img .finde-image video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Cover the entire area */
opacity: 0.5; /* Optional: Make the video semi-transparent */
z-index: -1;
}
.find-scale-section__img .find-list li {
font-size: 0.875rem;
}
@media screen and (max-width: 1199px) {
.find-scale-section__img .find-list li {
font-size: 0.8125rem;
}
}
.find-scale-section__img ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 30px 0 0;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.find-scale-section__img ul li {
text-transform: capitalize;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 7px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.find-scale-section__img ul li {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.find-scale-section__img ul li {
font-size: 0.875rem;
}
}
.find-scale-section__img ul li:hover {
color: hsl(var(--base));
font-weight: 600;
}
.find-scale-section__img ul li i {
background: var(--base-gradient);
color: hsl(var(--white));
border-radius: 100px;
padding: 4px;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.find-scale-section__img ul li i {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.find-scale-section__img ul li i {
font-size: 0.875rem;
}
}
.find-scale-section__img ul li .btn-border {
padding: 5px 10px;
font-size: 0.875rem;
font-weight: 500;
}
@media screen and (max-width: 1199px) {
.find-scale-section__img ul li .btn-border {
font-size: 0.8125rem;
}
}
/* ===========================
Content creation CSS
============================= */
.content-creation-section__img {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: hsl(var(--white)/0.03);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 30px 50px;
border: 2px solid hsl(var(--white)/0.05);
border-radius: 10px;
}
@media screen and (max-width: 575px) {
.content-creation-section__img {
padding: 20px 30px;
}
}
@media screen and (max-width: 424px) {
.content-creation-section__img {
padding: 30px;
grid-template-columns: 1fr;
}
}
.content-creation-section__img .item__card {
text-align: center;
}
.content-creation-section__img .item__card.active .card__items::before, .content-creation-section__img .item__card.active .card__items::after {
opacity: 1;
}
.content-creation-section__img .item__card.active .wave_animation {
fill: hsl(var(--base));
}
.content-creation-section__img .item__card .wave_animation {
fill: hsl(var(--white)/0.5);
}
.content-creation-section__img .item__card:nth-child(2) {
margin-top: 80px;
}
@media screen and (max-width: 424px) {
.content-creation-section__img .item__card:nth-child(2) {
margin-top: 40px;
}
}
.content-creation-section__img .item__card .card__items {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
text-align: center;
padding: 40px 20px;
margin: 20px 0;
position: relative;
}
@media screen and (max-width: 424px) {
.content-creation-section__img .item__card .card__items {
max-width: 220px;
margin: 0 auto;
}
}
.content-creation-section__img .item__card .card__items::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.content-creation-section__img .item__card .card__items img {
border-radius: 100px;
}
.content-creation-section__img .item__card .card__items h5 {
padding: 20px 0 0px;
}
.content-creation-section__img .item__card .card__items button {
background: hsl(var(--white)/0.5);
border-radius: 100px;
width: 60px;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 20px auto 0;
color: hsl(var(--white));
}
.content-creation-section__img .item__card .card__items button i {
font-size: 2.375rem;
}
@media screen and (max-width: 1199px) {
.content-creation-section__img .item__card .card__items button i {
font-size: 2.438rem;
}
}
@media screen and (max-width: 991px) {
.content-creation-section__img .item__card .card__items button i {
font-size: 2.375rem;
}
}
@media screen and (max-width: 575px) {
.content-creation-section__img .item__card .card__items button i {
font-size: 2.313rem;
}
}
.content-creation-section__content p {
padding-top: 20px;
}
.content-creation-section__content ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
margin: 35px 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.content-creation-section__content ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
font-family: var(--title-font);
font-weight: 700;
}
.content-creation-section__content ul li::before {
content: "\f00c";
font-weight: 900;
font-family: "Font Awesome 6 free";
background: var(--base-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content-creation-section .arrow-shape {
text-align: center;
}
@media screen and (max-width: 424px) {
.content-creation-section .arrow-shape {
display: none;
}
}
/* ===========================
Use-cases CSS
============================= */
.use-cases-section__card {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 50px 30px;
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.use-cases-section__card:hover {
-webkit-transform: translateY(-10px) scale(1.01);
transform: translateY(-10px) scale(1.01);
background: hsl(var(--white)/0.08);
}
.use-cases-section__card:hover::before {
background: var(--base-gradient);
}
.use-cases-section__card:hover i {
background: var(--base-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.use-cases-section__card:hover i::after {
background: hsl(var(--white));
}
.use-cases-section__card:hover .services-btn::after {
-webkit-transform: translateX(10px);
transform: translateX(10px);
opacity: 1;
}
.use-cases-section__card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.05);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.use-cases-section__card i {
font-size: 2.375rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 5px;
margin: 0 auto;
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media screen and (max-width: 1199px) {
.use-cases-section__card i {
font-size: 2.438rem;
}
}
@media screen and (max-width: 991px) {
.use-cases-section__card i {
font-size: 2.375rem;
}
}
@media screen and (max-width: 575px) {
.use-cases-section__card i {
font-size: 2.313rem;
}
}
.use-cases-section__card i::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid hsl(var(--white));
z-index: -1;
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.use-cases-section__card svg {
padding: 13px;
border: 2px solid hsl(var(--white)/0.8);
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.use-cases-section__card h4 {
padding: 30px 0 20px;
}
.use-cases-section__card .services-btn {
margin-top: 30px;
color: hsl(var(--white));
font-weight: 600;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.use-cases-section__card .services-btn::after {
content: "\f178";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.use-cases-section__card .services-btn:hover {
font-weight: 700;
}
/* ===========================
Customer CSS
============================= */
.customer-section__content {
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 80px 30px;
text-align: center;
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
}
@media screen and (max-width: 991px) {
.customer-section__content {
padding: 50px 20px;
}
}
@media screen and (max-width: 424px) {
.customer-section__content {
padding: 30px 15px;
}
}
.customer-section__content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.customer-section .brand-logo-img {
margin: 0 20px;
min-height: 90px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.customer-section .brand-logo-img {
margin: 0;
}
}
/* ===========================
Not-human CSS
============================= */
.not-human-section .card_item {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
padding: 30px 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.not-human-section .card_item:hover {
-webkit-transform: translateY(-5px) scale(1.01);
transform: translateY(-5px) scale(1.01);
background: hsl(var(--white)/0.08);
}
.not-human-section .card_item:hover::before {
background: var(--base-gradient);
}
.not-human-section .card_item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.not-human-section .card_item img {
border-radius: 100px;
}
.not-human-section .card_item__text .wave_animation {
width: 55px;
height: 43px;
position: absolute;
right: 25px;
bottom: 20px;
}
@media screen and (max-width: 1399px) {
.not-human-section .card_item__text .wave_animation {
width: 40px;
}
}
.not-human-section__image {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
text-align: center;
padding: 20px 10px 0;
position: relative;
}
@media screen and (max-width: 1199px) {
.not-human-section__image {
margin: 0 auto;
max-width: 455px;
text-align: center;
left: 0;
right: 0;
}
}
.not-human-section__image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.not-human-section__image img {
margin: 0 auto;
}
.not-human-section__image .wave_animation {
position: absolute;
right: 37px;
top: 93px;
width: 131px;
height: 120px;
}
@media screen and (max-width: 991px) {
.not-human-section__image .wave_animation {
width: 90px;
top: 70px;
}
}
/* ===========================
Pricing CSS
============================= */
.pricing-section__card {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
text-align: center;
position: relative;
padding: 40px 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.pricing-section__card:hover {
-webkit-transform: translateY(-5px) scale(1.01);
transform: translateY(-5px) scale(1.01);
background: hsl(var(--white)/0.08);
}
.pricing-section__card:hover::before {
background: var(--base-gradient);
}
.pricing-section__card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.pricing-section__card p {
color: hsl(var(--white)/0.8);
max-width: 252px;
margin: 15px auto;
}
.pricing-section__card h3 sub {
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.pricing-section__card h3 sub {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.pricing-section__card h3 sub {
font-size: 0.875rem;
}
}
.pricing-section__card hr {
border-color: #676767;
margin: 40px 0;
}
.pricing-section__card ul {
max-width: 260px;
margin: 0 auto 40px;
display: grid;
gap: 12px;
}
.pricing-section__card ul li {
text-align: left;
font-size: 1.125rem;
letter-spacing: 0.5px;
}
@media screen and (max-width: 1199px) {
.pricing-section__card ul li {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.pricing-section__card ul li {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.pricing-section__card ul li {
font-size: 0.9375rem;
}
}
.pricing-section__card ul li::before {
content: "\f00c";
font-weight: 900;
font-family: "Font Awesome 6 free";
margin-right: 10px;
}
.pricing-section__card ul li.check {
color: hsl(var(--white));
}
.pricing-section__card ul li.unCheck {
color: hsl(var(--white)/0.5);
}
.pricing-section__card .btn-border {
max-width: 260px;
margin: 0 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* ===========================
Faq CSS
============================= */
.faq-section .accordion-body,
.faq-section .accordion-item,
.faq-section .accordion-button {
background: none;
border: 0;
border-radius: 0;
color: hsl(var(--white));
}
.faq-section .accordion {
display: grid;
gap: 24px;
}
.faq-section .accordion-body {
border-top: 1px solid hsl(var(--white)/0.1);
}
.faq-section .accordion-body p {
font-size: 1rem;
color: hsl(var(--white)/0.8);
}
@media screen and (max-width: 1199px) {
.faq-section .accordion-body p {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.faq-section .accordion-body p {
font-size: 0.875rem;
}
}
.faq-section .accordion-item {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
position: relative;
}
.faq-section .accordion-item:hover {
background: hsl(var(--white)/0.08);
}
.faq-section .accordion-item:hover::before {
background: var(--base-gradient);
}
.faq-section .accordion-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.faq-section .accordion-button {
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.125rem;
padding: 24px 20px;
-webkit-box-shadow: none;
box-shadow: none;
}
@media screen and (max-width: 1199px) {
.faq-section .accordion-button {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.faq-section .accordion-button {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.faq-section .accordion-button {
font-size: 0.9375rem;
}
}
.faq-section .accordion-button.collapsed::after {
content: "+";
}
.faq-section .accordion-button::after {
content: "\f068";
font-weight: 900;
font-family: "Font Awesome 6 free";
border: 0;
background: none;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* ===========================
Testimonial CSS
============================= */
.testimonial-section .testimonial-slide__item {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
}
@media screen and (max-width: 424px) {
.testimonial-section .testimonial-slide__item {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 24px;
}
}
.testimonial-section .testimonial-slide__item:hover {
background: hsl(var(--white)/0.08);
}
.testimonial-section .testimonial-slide__item:hover::before {
background: var(--base-gradient);
}
.testimonial-section .testimonial-slide__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.testimonial-section .testimonial-slide__item::after {
content: "";
position: absolute;
right: 32px;
bottom: 25px;
background-image: url(../images/shape/qui.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 95px;
height: 70px;
opacity: 0.2;
}
.testimonial-section .testimonial-slide__item .slid-img {
border: 2px solid hsl(var(--base));
border-radius: 100px;
padding: 3px;
}
.testimonial-section .testimonial-slide__item .slid-img img {
min-width: 66px;
height: 66px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 100px;
}
.testimonial-section .testimonial-slide__item .slid-text .rating {
margin-bottom: 15px;
}
.testimonial-section .testimonial-slide__item .slid-text .rating i {
color: hsl(var(--warning));
}
.testimonial-section .testimonial-slide__item .slid-text p {
color: hsl(var(--white)/0.7);
}
.testimonial-section .testimonial-slide__item .slid-text .user-name {
font-size: 1rem;
margin-top: 24px;
}
@media screen and (max-width: 1199px) {
.testimonial-section .testimonial-slide__item .slid-text .user-name {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.testimonial-section .testimonial-slide__item .slid-text .user-name {
font-size: 0.875rem;
}
}
.swiper.review-slid {
position: relative;
}
.swiper.review-slid::before, .swiper.review-slid::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 30px;
background: -webkit-gradient(linear, right top, left top, color-stop(3.65%, #1e0f3fc9), to(rgba(238, 240, 245, 0)));
background: linear-gradient(-90deg, #1e0f3fc9 3.65%, rgba(238, 240, 245, 0) 100%);
z-index: 10;
}
.swiper.review-slid::before {
left: 0;
right: auto;
background: -webkit-gradient(linear, left top, right top, color-stop(3.65%, #1e0f3fc9), to(rgba(238, 240, 245, 0)));
background: linear-gradient(90deg, #1e0f3fc9 3.65%, rgba(238, 240, 245, 0) 100%);
}
@media screen and (max-width: 991px) {
.swiper.review-slid p {
max-width: 300px;
}
}
/* ===========================
CallToAction CSS
============================= */
.callToAction-section__content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 50px 80px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-radius: 10px;
overflow: hidden;
z-index: 1;
}
@media screen and (max-width: 575px) {
.callToAction-section__content {
padding: 30px;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.callToAction-section__content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: -1;
opacity: 0.2;
}
.callToAction-section__content::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/shape/call.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: -11;
}
.callToAction-section__content h2 {
max-width: 710px;
}
/* ===========================
Team CSS
============================= */
.team-section__item {
position: relative;
z-index: 1;
padding: 2px;
overflow: hidden;
border-radius: 10px;
}
.team-section__item:hover .team-content {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.team-section__item:hover .team-img img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-section__item .team-img img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
width: 100%;
}
.team-section__item .team-content {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
width: 90%;
margin: 0 auto;
text-align: center;
z-index: 1;
padding: 20px 0;
-webkit-transform: translateY(114%);
transform: translateY(114%);
-webkit-transition: all 0.4s;
transition: all 0.4s;
border-radius: 10px;
}
.team-section__item .team-content::before {
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
background: var(--base-gradient);
opacity: 0.7;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 10px;
}
.team-section__item .team-content ul {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 20px;
}
.team-section__item .team-content ul li a {
font-size: 1.25rem;
color: hsl(var(--white));
}
@media screen and (max-width: 1199px) {
.team-section__item .team-content ul li a {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.team-section__item .team-content ul li a {
font-size: 1rem;
}
}
.team-section__item .team-content h4 {
padding: 10px 0 5px;
}
/* ===========================
Blog CSS
============================= */
.blog-section__item {
position: relative;
padding: 2px;
z-index: 1;
border-radius: 10px;
background: hsl(var(--white)/0.03);
border: 2px solid hsl(var(--white)/0.05);
}
.blog-section__item .blog-img img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
border-radius: 10px;
}
.blog-section__item .blog-content {
padding: 0 40px 40px;
margin-top: -20px;
}
@media screen and (max-width: 767px) {
.blog-section__item .blog-content {
padding: 0 20px 30px;
}
}
.blog-section__item .blog-content ul {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: hsl(var(--black));
padding: 10px 30px;
border-radius: 5px;
}
@media screen and (max-width: 767px) {
.blog-section__item .blog-content ul {
padding: 10px;
gap: 10px;
}
}
.blog-section__item .blog-content ul li {
font-size: 1rem;
color: hsl(var(--white));
text-transform: capitalize;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 1199px) {
.blog-section__item .blog-content ul li {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.blog-section__item .blog-content ul li {
font-size: 0.875rem;
}
}
.blog-section__item .blog-content h3 {
padding: 30px 0;
}
.blog-section__item .blog-content p {
padding-bottom: 30px;
}
.blog-section__item .btn-border {
display: inline-block;
}
.blog-section .sidebar-item {
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 35px;
border-radius: 10px;
}
.blog-section .sidebar-item form {
position: relative;
border: 1px solid hsl(var(--border-color)/0.2);
border-radius: 5px;
}
.blog-section .sidebar-item form input {
width: 100%;
height: 58px;
padding: 0 40px 0 20px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
background: none;
border: 0;
font-size: 1.125rem;
color: hsl(var(--white));
font-family: var(--title-font);
font-weight: 600;
}
@media screen and (max-width: 1199px) {
.blog-section .sidebar-item form input {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .sidebar-item form input {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.blog-section .sidebar-item form input {
font-size: 0.9375rem;
}
}
.blog-section .sidebar-item form input::-webkit-input-placeholder {
color: hsl(var(--white)/0.7);
}
.blog-section .sidebar-item form input::-moz-placeholder {
color: hsl(var(--white)/0.7);
}
.blog-section .sidebar-item form input:-ms-input-placeholder {
color: hsl(var(--white)/0.7);
}
.blog-section .sidebar-item form input::-ms-input-placeholder {
color: hsl(var(--white)/0.7);
}
.blog-section .sidebar-item form input::placeholder {
color: hsl(var(--white)/0.7);
}
.blog-section .sidebar-item form button {
position: absolute;
top: 57%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -1px;
background: var(--base-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
width: 49px;
height: 100%;
}
.blog-section .sidebar-item__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
border-bottom: 1px solid hsl(var(--white)/0.08);
margin-top: 15px;
padding-bottom: 15px;
}
.blog-section .sidebar-item__card img {
border-radius: 10px;
}
.blog-section .sidebar-item__card:last-child {
border: 0;
padding-bottom: 0;
}
.blog-section .sidebar-item__card .text p {
font-family: var(--title-font);
font-size: 1rem;
font-weight: 700;
color: hsl(var(--white)/0.6);
}
@media screen and (max-width: 1199px) {
.blog-section .sidebar-item__card .text p {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .sidebar-item__card .text p {
font-size: 0.875rem;
}
}
.blog-section .sidebar-item__card .text p a {
color: hsl(var(--white)/0.6);
}
.blog-section .sidebar-item__card .text p a:hover {
color: hsl(var(--white));
}
.blog-section .sidebar-item__card .text span {
font-size: 0.75rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: hsl(var(--white)/0.6);
margin-top: 10px;
}
.blog-section .sidebar-item__card .text span i {
color: hsl(var(--white)/0.8);
}
.blog-section .sidebar-item .category-list {
margin-top: 20px;
}
.blog-section .sidebar-item .category-list li a {
display: block;
font-size: 1.125rem;
color: hsl(var(--white)/0.8);
border-top: 1px solid hsl(var(--white)/0.08);
padding: 10px 0;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.blog-section .sidebar-item .category-list li a {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .sidebar-item .category-list li a {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.blog-section .sidebar-item .category-list li a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1199px) {
.blog-section .sidebar-item .category-list li a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .sidebar-item .category-list li a {
font-size: 0.875rem;
}
}
.blog-section .sidebar-item .category-list li a:hover {
color: hsl(var(--white));
}
.blog-section .sidebar-item .category-list li a:hover::before {
margin-left: 0;
opacity: 1;
}
.blog-section .sidebar-item .category-list li a::before {
content: "\f178";
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
margin-left: -15px;
opacity: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
margin-right: 5px;
}
.blog-section .sidebar-item .category-list li:last-child a {
padding-bottom: 0;
}
.blog-section .sidebar-item .tag-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.blog-section .sidebar-item .tag-list a {
color: hsl(var(--white));
border: 1px solid #555555;
border-radius: 5px;
padding: 5px 15px;
font-size: 1rem;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
@media screen and (max-width: 1199px) {
.blog-section .sidebar-item .tag-list a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .sidebar-item .tag-list a {
font-size: 0.875rem;
}
}
.blog-section .sidebar-item .tag-list a:hover {
background: var(--base-gradient);
border-radius: 5px;
border-color: hsl(var(--black));
}
.blog-section .sidebar-item.talk {
background: var(--base-gradient);
text-align: center;
}
.blog-section .sidebar-item.talk p {
max-width: 210px;
margin: 10px auto 15px;
}
.blog-section .sidebar-item.talk .btn-border {
padding: 13px 30px;
background: hsl(var(--white));
color: hsl(var(--black));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 180px;
margin: 0 auto;
z-index: 1;
}
.blog-section .sidebar-item.talk .btn-border:hover {
color: hsl(var(--white));
}
.blog-section .sidebar-item.talk .btn-border::after {
background: hsl(var(--black));
color: hsl(var(--white));
}
.blog-section .sidebar-item .download-sidebar {
display: grid;
gap: 13px;
margin-top: 30px;
}
.blog-section .sidebar-item .download-sidebar a {
background: hsl(var(--white));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-radius: 5px;
color: hsl(var(--black));
padding-left: 15px;
overflow: hidden;
}
.blog-section .sidebar-item .download-sidebar a i {
background: hsl(var(--black));
color: hsl(var(--white)/0.7);
width: 50px;
height: 50px;
border: 1px solid hsl(var(--white));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 5px;
}
.blog-section .blog-details-content img {
border-radius: 13px;
}
.blog-section .blog-details-content .details-bas {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: hsl(var(--black));
padding: 10px 30px;
margin-top: 30px;
border-radius: 5px;
}
@media screen and (max-width: 767px) {
.blog-section .blog-details-content .details-bas {
padding: 10px;
gap: 10px;
}
}
.blog-section .blog-details-content .details-bas li {
font-size: 1rem;
color: hsl(var(--white));
text-transform: capitalize;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 1199px) {
.blog-section .blog-details-content .details-bas li {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.blog-section .blog-details-content .details-bas li {
font-size: 0.875rem;
}
}
.blog-section .blog-details-content h3 {
margin: 30px 0;
}
.blog-section .blog-details-content p {
color: hsl(var(--white)/0.8);
}
.blog-section .blog-details-content h4 {
margin: 40px 0 30px;
}
.blog-section .blog-details-content .quit-blog {
background: var(--base-gradient);
padding: 15px 40px;
margin: 30px 0 30px;
border-radius: 10px;
}
@media screen and (max-width: 991px) {
.blog-section .blog-details-content .quit-blog {
padding: 15px;
}
.blog-section .blog-details-content .quit-blog h3 {
margin: 10px 0;
}
}
.blog-section .blog-details-content__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.blog-section .blog-details-content .blog-lists {
margin-left: 20px;
display: grid;
gap: 5px;
}
.blog-section .blog-details-content .blog-lists li {
list-style: disc;
color: hsl(var(--white)/0.8);
}
.slide-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
}
.slide-buttons .blog-button-next,
.slide-buttons .blog-button-prev {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-size: 1rem;
font-weight: 600;
}
@media screen and (max-width: 1199px) {
.slide-buttons .blog-button-next,
.slide-buttons .blog-button-prev {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.slide-buttons .blog-button-next,
.slide-buttons .blog-button-prev {
font-size: 0.875rem;
}
}
.slide-buttons .blog-button-next i,
.slide-buttons .blog-button-prev i {
font-size: 1.25rem;
}
@media screen and (max-width: 1199px) {
.slide-buttons .blog-button-next i,
.slide-buttons .blog-button-prev i {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.slide-buttons .blog-button-next i,
.slide-buttons .blog-button-prev i {
font-size: 1rem;
}
}
/* ===========================
Contact CSS
============================= */
.contact-section .login-content {
border: 2px solid hsl(var(--white)/0.05);
background: hsl(var(--white)/0.03);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 50px 40px;
border-radius: 10px;
}
.contact-section .login-content p {
color: hsl(var(--white)/0.5);
padding: 25px 0 20px;
}
.contact-section form {
display: grid;
gap: 15px;
}
.contact-section form .contact-input {
position: relative;
}
.contact-section form .contact-input input {
width: 100%;
height: 55px;
background: none;
border-bottom: 1px solid hsl(var(--white));
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
padding: 0;
border-radius: 0;
border: 0;
border-bottom: 1px solid hsl(var(--white)/0.08);
color: hsl(var(--white)) !important;
font-size: 1rem;
font-weight: 500;
}
@media screen and (max-width: 1199px) {
.contact-section form .contact-input input {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.contact-section form .contact-input input {
font-size: 0.875rem;
}
}
.contact-section form .contact-input input::-webkit-input-placeholder {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input input::-moz-placeholder {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input input:-ms-input-placeholder {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input input::-ms-input-placeholder {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input input::placeholder {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input input:focus {
background-color: unset;
color: hsl(var(--white));
}
.contact-section form .contact-input input:-webkit-autofill {
-webkit-text-fill-color: hsl(var(--white)) !important;
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
background-color: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.contact-section form .contact-input .password-show-toggle {
position: absolute;
right: 4px;
top: 51%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
height: 20px;
}
.contact-section form .contact-input .password-show-toggle i {
color: hsl(var(--white)/0.5);
}
.contact-section form .contact-input .password-show-toggle .open-eye-icon {
display: none;
color: hsl(var(--white));
}
.contact-section form .btn-border {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.contact-section form .check-pas {
margin: 10px 0;
}
@media screen and (max-width: 991px) {
.contact-section form .check-pas {
gap: 10px;
}
}
.contact-section form .check-pas label {
font-size: 0.9375rem;
}
@media screen and (max-width: 1199px) {
.contact-section form .check-pas label {
font-size: 0.875rem;
}
}
.contact-section form .check-pas a {
color: hsl(var(--white));
font-size: 0.9375rem;
text-transform: capitalize;
font-weight: 600;
}
@media screen and (max-width: 1199px) {
.contact-section form .check-pas a {
font-size: 0.875rem;
}
}
.contact-section form .check-pas a:hover {
color: hsl(var(--base));
}
.contact-section form .btn-theme-gradient {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.contact-section form .or {
text-align: center;
position: relative;
text-transform: uppercase;
font-size: 1.125rem;
font-weight: 700;
margin: 10px 0;
}
@media screen and (max-width: 1199px) {
.contact-section form .or {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.contact-section form .or {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.contact-section form .or {
font-size: 0.9375rem;
}
}
.contact-section form .or::after, .contact-section form .or::before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 45%;
height: 1px;
background-color: hsl(var(--white)/0.1);
}
.contact-section form .or::after {
left: auto;
right: 0;
}
.contact-section form .wight-sing {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.contact-section form .wight-sing a {
text-align: center;
font-size: 1rem;
font-weight: 600;
color: hsl(var(--white));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
}
@media screen and (max-width: 1199px) {
.contact-section form .wight-sing a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.contact-section form .wight-sing a {
font-size: 0.875rem;
}
}
.contact-section form .wight-sing .google {
background: #dd4b39;
}
.contact-section form .wight-sing .facebook {
background: #3b5998;
}
.contact-section form .login-footer {
text-align: center;
font-size: 1.125rem;
padding-top: 20px;
}
@media screen and (max-width: 1199px) {
.contact-section form .login-footer {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.contact-section form .login-footer {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.contact-section form .login-footer {
font-size: 0.9375rem;
}
}
.contact-section form .login-footer a {
font-weight: 700;
color: hsl(var(--white));
}
.contact-section form .login-footer a:hover {
color: hsl(var(--base));
}
.contacts-form form {
display: grid;
gap: 24px;
}
.contacts-form .input-box {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
position: relative;
background: hsl(var(--white)/0.02);
}
.contacts-form .input-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.1);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contacts-form textarea,
.contacts-form input {
background: none;
outline: none;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: hsl(var(--white));
width: 100%;
padding: 17px 20px;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.contacts-form textarea,
.contacts-form input {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.contacts-form textarea,
.contacts-form input {
font-size: 0.875rem;
}
}
.contacts-form textarea:focus,
.contacts-form input:focus {
background-color: unset;
color: hsl(var(--white));
}
.contacts-form textarea {
height: 140px;
}
.contacts-form input:-webkit-autofill {
-webkit-text-fill-color: hsl(var(--white)) !important;
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
background-color: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.contacts-form button {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.contacts-images {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
position: relative;
text-align: center;
max-width: 550px;
margin-left: auto;
padding: 0 30px;
}
.contacts-images img {
margin: 0 auto;
}
.contacts-images::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 82%;
background: hsl(var(--white)/0.02);
}
.contacts-images::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 82%;
background: hsl(var(--white)/0.1);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contacts-adders-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
}
.contacts-adders-item:hover i::after {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.contacts-adders-item i {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
width: 60px;
height: 60px;
border-radius: 5px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 2.063rem;
overflow: hidden;
}
@media screen and (max-width: 1199px) {
.contacts-adders-item i {
font-size: 2.125rem;
}
}
@media screen and (max-width: 991px) {
.contacts-adders-item i {
font-size: 2.063rem;
}
}
@media screen and (max-width: 575px) {
.contacts-adders-item i {
font-size: 2rem;
}
}
.contacts-adders-item i::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: -1;
}
.contacts-adders-item i::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contacts-adders-item .text p {
padding-bottom: 5px;
}
.contact-box {
display: grid;
grid-template-columns: 600px 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (max-width: 991px) {
.contact-box {
grid-template-columns: 1fr;
gap: 24px;
}
}
.contact-box form {
background: hsl(var(--white)/0.03);
border: 2px solid hsl(var(--white)/0.05);
border-radius: 5px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
padding: 50px 120px 50px 60px;
display: grid;
gap: 24px;
}
@media screen and (max-width: 991px) {
.contact-box form {
padding: 40px;
}
}
@media screen and (max-width: 767px) {
.contact-box form {
padding: 30px 20px;
}
}
.contact-box form textarea,
.contact-box form input {
background: none;
outline: none;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: hsl(var(--white));
width: 100%;
padding: 15px 20px;
border-radius: 5px;
font-size: 1rem;
border: 2px solid hsl(var(--white)/0.05);
}
@media screen and (max-width: 1199px) {
.contact-box form textarea,
.contact-box form input {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.contact-box form textarea,
.contact-box form input {
font-size: 0.875rem;
}
}
.contact-box form textarea::-webkit-input-placeholder, .contact-box form input::-webkit-input-placeholder {
color: hsl(var(--white)/0.7);
}
.contact-box form textarea::-moz-placeholder, .contact-box form input::-moz-placeholder {
color: hsl(var(--white)/0.7);
}
.contact-box form textarea:-ms-input-placeholder, .contact-box form input:-ms-input-placeholder {
color: hsl(var(--white)/0.7);
}
.contact-box form textarea::-ms-input-placeholder, .contact-box form input::-ms-input-placeholder {
color: hsl(var(--white)/0.7);
}
.contact-box form textarea::placeholder,
.contact-box form input::placeholder {
color: hsl(var(--white)/0.7);
}
.contact-box form textarea:focus,
.contact-box form input:focus {
background-color: unset;
color: hsl(var(--white));
}
.contact-box form select {
width: 100%;
padding: 17px 20px;
border-radius: 5px;
font-size: 1rem;
background-color: unset;
color: hsl(var(--white));
border: 2px solid hsl(var(--white)/0.05);
}
@media screen and (max-width: 1199px) {
.contact-box form select {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.contact-box form select {
font-size: 0.875rem;
}
}
.contact-box form select option {
color: hsl(var(--black));
line-height: 1.6;
}
.contact-box form textarea {
height: 140px;
}
.contact-box form input:-webkit-autofill {
-webkit-text-fill-color: hsl(var(--white)) !important;
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
background-color: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.contact-box form button {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.contact-box .contact-info {
display: grid;
gap: 24px;
margin-left: -60px;
}
@media screen and (max-width: 991px) {
.contact-box .contact-info {
margin-left: 0;
}
}
.contact-box .contact-info__item {
background: hsl(var(--white)/0.03);
border: 2px solid hsl(var(--white)/0.05);
border-radius: 5px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
padding: 30px;
}
@media screen and (max-width: 767px) {
.contact-box .contact-info__item {
padding: 20px;
gap: 20px;
}
}
.contact-box .contact-info__item:hover i::after {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.contact-box .contact-info__item i {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
width: 60px;
height: 60px;
border-radius: 5px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 2.063rem;
overflow: hidden;
}
@media screen and (max-width: 1199px) {
.contact-box .contact-info__item i {
font-size: 2.125rem;
}
}
@media screen and (max-width: 991px) {
.contact-box .contact-info__item i {
font-size: 2.063rem;
}
}
@media screen and (max-width: 575px) {
.contact-box .contact-info__item i {
font-size: 2rem;
}
}
.contact-box .contact-info__item i::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: -1;
}
.contact-box .contact-info__item i::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.contact-box .contact-info__item .text p {
padding-bottom: 5px;
}
.contacts-section iframe {
width: 100%;
height: 500px;
margin-bottom: -6px;
}
.contacts-section #charCount {
font-size: 0.75rem;
}
/* ===========================
Cursor-effect CSS
============================= */
.cursor,
.cursor-trail {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1000;
}
@media screen and (max-width: 991px) {
.cursor,
.cursor-trail {
display: none;
}
}
.cursor {
width: 5px;
height: 5px;
background-color: hsl(var(--white));
}
.cursor-trail {
width: 30px;
height: 30px;
background-color: hsl(var(--white)/0.3);
}
/* =================================
Preloader Css
=================================== */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: hsl(var(--black)/0.9);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 9999;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#preloader .wave_animation {
width: 120px;
height: 120px;
fill: hsl(var(--white));
}
/* Logo animation styling */
#preloader img {
width: 100px;
/* Adjust size as needed */
-webkit-animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate;
animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate;
}
/* Scale (pulse) animation */
@-webkit-keyframes pulse {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
/* Adjust scale intensity */
}
}
@keyframes pulse {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
/* Adjust scale intensity */
}
}
/* Fade effect */
@-webkit-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0.5;
/* Adjust fade intensity */
}
}
@keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0.5;
/* Adjust fade intensity */
}
}
/* =================================
Scroll back to top Css
=================================== */
.progress-wrap {
position: fixed;
right: 50px;
bottom: 50px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 100px;
-webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
z-index: 10000;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(15px);
transform: translateY(15px);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background: none;
}
@media screen and (max-width: 991px) {
.progress-wrap {
right: 10px;
bottom: 20px;
height: 35px;
width: 35px;
}
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.progress-wrap:hover::after {
opacity: 0;
}
.progress-wrap:hover::before {
opacity: 1;
}
.progress-wrap::before, .progress-wrap::after {
position: absolute;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f062";
text-align: center;
line-height: 46px;
font-size: 18px;
color: hsl(var(--white));
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: block;
z-index: 2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.progress-wrap svg path {
fill: none;
}
.progress-wrap svg.progress-circle path {
stroke: hsl(var(--white));
stroke-width: 5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
/* ============================
navbar css
=============================== */
.navbar-one {
width: 100%;
height: auto;
z-index: 111;
padding: 0;
position: absolute;
top: 0;
background: hsl(var(--black)/0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.navbar-one.sticky {
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
}
@media screen and (max-width: 991px) {
.navbar-one .logo-img {
height: 40px;
}
}
.navbar-one .right-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 1199px) {
.navbar-one .right-nav {
gap: 10px;
}
}
@media screen and (max-width: 991px) {
.navbar-one .right-nav {
padding: 0 10px 15px;
gap: 20px;
}
}
.navbar-one .right-nav .country__select .country__select_button {
color: hsl(var(--white));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
font-size: 1rem;
}
.navbar-one .right-nav .country__select .country__select_button img {
margin-right: 4px;
}
@media screen and (max-width: 1199px) {
.navbar-one .right-nav .country__select .country__select_button {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.navbar-one .right-nav .country__select .country__select_button {
font-size: 0.875rem;
}
}
.navbar-one .right-nav .country__select .country__select_button::after {
content: "\f107";
font-family: "Font Awesome 6 free";
font-weight: 900;
}
.navbar-one .right-nav .country__select .dropdown-menu {
min-width: 115px;
margin-top: 20px;
}
@media screen and (max-width: 991px) {
.navbar-one .right-nav .country__select .dropdown-menu {
left: 0;
}
}
.navbar-one .right-nav .country__select .dropdown-menu li {
padding: 10px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: 500;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.navbar-one .right-nav .country__select .dropdown-menu li {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.navbar-one .right-nav .country__select .dropdown-menu li {
font-size: 0.875rem;
}
}
.navbar-one .right-nav .country__select .dropdown-menu li:hover {
background: hsl(var(--base)/0.06);
}
.navbar-one .right-nav .btn-base-border {
padding: 12px 30px;
}
.navbar-one .right-nav .btn-base-border::before, .navbar-one .right-nav .btn-base-border::after {
-webkit-clip-path: polygon(10px 0, 93% 0, 100% 10px, 100% 81%, 92% 100%, 11px 100%, 0 80%, 0 10px);
clip-path: polygon(10px 0, 93% 0, 100% 10px, 100% 81%, 92% 100%, 11px 100%, 0 80%, 0 10px);
}
.navbar-one .btn-border {
padding: 10px 20px;
}
.navbar-toggler {
border: none;
padding: 2px;
padding-right: 0;
margin-right: -10px;
}
.navbar-toggler .animated-svg {
display: block;
width: 50px;
height: 40px;
}
.navbar-toggler .animated-svg .stroke {
color: hsl(var(--secondary));
}
.navbar-toggler .line {
stroke-dasharray: 18;
stroke-dashoffset: 18;
-webkit-animation: draw 2s ease-in-out infinite;
animation: draw 2s ease-in-out infinite;
}
.navbar-toggler .line-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.navbar-toggler .line-2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.navbar-toggler .line-3 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes draw {
0% {
stroke-dashoffset: 18;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 18;
}
}
@keyframes draw {
0% {
stroke-dashoffset: 18;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 18;
}
}
.navbar-nav {
gap: 1.5rem;
position: relative;
}
@media screen and (max-width: 1199px) {
.navbar-nav {
gap: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.navbar-nav {
gap: 0rem;
}
}
.navbar-nav .nav-item .nav-link {
color: hsl(var(--white)/0.85);
font-size: 1rem;
font-weight: 500;
padding: 1.5625rem 0.3125rem;
text-transform: capitalize;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 1199px) {
.navbar-nav .nav-item .nav-link {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.navbar-nav .nav-item .nav-link {
font-size: 0.875rem;
}
}
@media screen and (max-width: 1199px) {
.navbar-nav .nav-item .nav-link {
font-size: 0.9375rem;
padding-left: 0.3125rem;
padding-right: 0.3125rem;
}
}
@media screen and (max-width: 1199px) and (max-width: 1199px) {
.navbar-nav .nav-item .nav-link {
font-size: 0.875rem;
}
}
@media screen and (max-width: 991px) {
.navbar-nav .nav-item .nav-link {
padding: 0.625rem;
color: hsl(var(--white));
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) and (max-width: 1199px) {
.navbar-nav .nav-item .nav-link {
font-size: 0.875rem;
}
}
.navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link:hover {
color: hsl(var(--white));
font-weight: 700;
}
.navbar-nav .nav-item .nav-link.active span::before, .navbar-nav .nav-item .nav-link:hover span::before {
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navbar-nav .nav-item .dropdown-toggle::after {
content: "\f107";
font-weight: 900;
font-family: "Font Awesome 6 free";
border: 0;
}
@media screen and (max-width: 991px) {
.navbar-nav .nav-item .dropdown-toggle::after {
margin-left: auto;
}
}
@media (max-width: 991.98px) {
.navbar-nav .nav-item.dropdown .nav-link {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar-nav .nav-item.dropdown .nav-link::after {
content: "\f107";
font-weight: 900;
font-family: "Font Awesome 6 free";
margin-left: auto;
}
}
.navbar-nav .nav-item .dropdown-menu {
-webkit-transition: 0.5s;
transition: 0.5s;
margin-top: 0;
padding: 15px 20px;
min-width: 200px;
border: 1px solid hsl(var(--border-color));
}
@media all and (min-width: 991.98px) {
.navbar-nav .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
}
.navbar-nav .nav-item .dropdown-menu.fade-down {
top: 80%;
-webkit-transform: rotateX(-75deg);
transform: rotateX(-75deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.navbar-nav .nav-item .dropdown-menu.fade-up {
top: 100%;
}
}
.navbar-nav .nav-item .dropdown-menu a {
padding: 5px 0px;
background: none;
-webkit-transition: 0.5s;
transition: 0.5s;
position: relative;
font-weight: 500;
font-size: 14px;
border: 0;
color: hsl(var(--gray3));
}
.navbar-nav .nav-item .dropdown-menu a::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 2px;
width: 0px;
z-index: 99;
background: hsl(var(--primary));
opacity: 0;
border-radius: unset;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.navbar-nav .nav-item .dropdown-menu a.active, .navbar-nav .nav-item .dropdown-menu a:hover {
padding-left: 13px;
color: hsl(var(--primary));
}
.navbar-nav .nav-item .dropdown-menu a.active::before, .navbar-nav .nav-item .dropdown-menu a:hover::before {
opacity: 1;
width: 10px;
}
.navbar-nav .nav-item:hover .nav-link {
color: hsl(var(--primary));
}
.navbar-nav .nav-item:hover .dropdown-menu {
-webkit-transition: 0.5s;
transition: 0.5s;
opacity: 1;
}
@media all and (min-width: 991.98px) {
.navbar-nav .nav-item:hover .dropdown-menu {
visibility: visible;
top: 100%;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
/* ============================
footer css
=============================== */
.footer-area {
background-image: var(--base);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
border-top: 1.5px solid hsl(var(--border-color)/0.1);
}
.footer-area__about p {
color: hsl(var(--white)/0.8);
font-size: 1rem;
margin-bottom: 30px;
max-width: 310px;
}
@media screen and (max-width: 1199px) {
.footer-area__about p {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.footer-area__about p {
font-size: 0.875rem;
}
}
.footer-area__about .social {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.footer-area__about .social:hover a {
opacity: 0.5;
}
.footer-area__about .social:hover a:hover {
opacity: 1;
}
.footer-area__about .social a {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
font-size: 1.125rem;
color: hsl(var(--white));
background: hsl(var(--white)/0.03);
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 5px;
position: relative;
}
@media screen and (max-width: 1199px) {
.footer-area__about .social a {
font-size: 1.0625rem;
}
}
@media screen and (max-width: 991px) {
.footer-area__about .social a {
font-size: 1rem;
}
}
@media screen and (max-width: 575px) {
.footer-area__about .social a {
font-size: 0.9375rem;
}
}
.footer-area__about .social a:hover {
-webkit-transform: translate(0);
transform: translate(0);
background: var(--base-gradient);
}
.footer-area__about .social a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsl(var(--white)/0.08);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.footer-area .footer_title {
color: hsl(var(--white));
margin-bottom: 24px;
}
.footer-area .footer-widget {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 40px;
}
@media screen and (max-width: 991px) {
.footer-area .footer-widget {
margin-top: 30px;
}
}
.footer-area .footer-widget__item {
max-width: 200px;
}
.footer-area .footer-widget__item:last-child {
max-width: 350px;
}
.footer-area .footer-widget__title {
color: hsl(var(--white));
margin-bottom: 24px;
}
.footer-area .footer-widget__title:last-child .footer-widget__list a:hover {
padding-left: 0px;
}
.footer-area .footer-widget__title:last-child .footer-widget__list a:hover::before {
width: 0px;
}
.footer-area .footer-widget__list {
display: grid;
gap: 13px;
min-width: 200px;
}
.footer-area .footer-widget__list p {
color: hsl(var(--white)/0.8);
font-size: 1rem;
max-width: 280px;
margin-bottom: 20px;
}
@media screen and (max-width: 1199px) {
.footer-area .footer-widget__list p {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.footer-area .footer-widget__list p {
font-size: 0.875rem;
}
}
.footer-area .footer-widget__list a {
font-size: 1rem;
font-weight: 400;
color: hsl(var(--white)/0.8);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
@media screen and (max-width: 1199px) {
.footer-area .footer-widget__list a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.footer-area .footer-widget__list a {
font-size: 0.875rem;
}
}
.footer-area .footer-widget__list a:hover {
padding-left: 15px;
color: hsl(var(--base));
font-weight: 600;
}
.footer-area .footer-widget__list a:hover::before {
width: 12px;
opacity: 1;
}
.footer-area .footer-widget__list a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 5px;
height: 3px;
background: hsl(var(--primary));
border-radius: 50px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
}
.footer-area .footer-widget__list form {
--box--border__top-left: url("data:image/svg+xml,");
--box--border__top: url("data:image/svg+xml,");
--box--border__top-right: url("data:image/svg+xml,");
--box--border__left: url("data:image/svg+xml,");
--box--border__right: url("data:image/svg+xml,");
--box--border__bottom-left: url("data:image/svg+xml,");
--box--border__bottom: url("data:image/svg+xml,");
--box--border__bottom-right: url("data:image/svg+xml,");
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
}
.footer-area .footer-widget__list form::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--base-gradient);
z-index: -1;
-webkit-animation: gradient 15s ease infinite;
animation: gradient 15s ease infinite;
-webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.footer-area .footer-widget__list form input {
background: none;
outline: none;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: hsl(var(--white));
width: 100%;
height: 62px;
padding: 0 20px;
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.footer-area .footer-widget__list form input {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.footer-area .footer-widget__list form input {
font-size: 0.875rem;
}
}
.footer-area .footer-widget__list form input:-webkit-autofill {
-webkit-text-fill-color: hsl(var(--white)) !important;
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
background-color: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.footer-area .footer-widget__list form button {
padding: 8px 15px;
border-left: 2px solid hsl(var(--base)/0.3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.footer-area .footer-widget__list form button i {
color: hsl(var(--white));
height: 22px;
}
.footer-area.footer-three.section-bg {
background: hsl(var(--section-bg));
}
.footer-area.footer-three::after {
display: none;
}
.footer-area.footer-three .footer_title {
color: hsl(var(--secondary));
}
.footer-area.footer-three .footer-area__about p {
color: hsl(var(--secondary));
}
.footer-area.footer-three .footer-area__about .social a {
color: hsl(var(--white));
background: hsl(var(--secondary));
}
.footer-area.footer-three .footer-area__about .social a:hover {
background: hsl(var(--base));
}
.footer-area.footer-three .footer-widget__title {
color: hsl(var(--secondary));
}
.footer-area.footer-three .footer-widget__list a {
color: hsl(var(--secondary)/0.7);
}
.footer-area.footer-three .footer-widget__list a:hover {
color: hsl(var(--base));
}
.footer-area.footer-three .copy-right {
border-top: 1px solid hsl(var(--secondary)/0.1);
}
.footer-area.footer-three .copy-right__text {
color: hsl(var(--secondary));
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.footer-area.footer-three .copy-right__text {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.footer-area.footer-three .copy-right__text {
font-size: 0.875rem;
}
}
.footer-area.footer-three .copy-right__url a {
color: hsl(var(--secondary));
}
.footer-area.footer-three .copy-right__url a:hover {
color: hsl(var(--base));
}
.copy-right {
border-top: 1.5px solid hsl(var(--border-color)/0.1);
padding: 20px 0;
}
.copy-right__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.copy-right__content {
display: grid;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
}
}
.copy-right__text {
color: hsl(var(--white)/0.8);
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.copy-right__text {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.copy-right__text {
font-size: 0.875rem;
}
}
@media screen and (max-width: 767px) {
.copy-right__text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
text-align: center;
}
}
.copy-right__text a {
color: hsl(var(--white));
font-weight: 600;
}
.copy-right__url {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
}
@media screen and (max-width: 767px) {
.copy-right__url {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.copy-right__url a {
color: hsl(var(--white)/0.8);
font-size: 1rem;
}
@media screen and (max-width: 1199px) {
.copy-right__url a {
font-size: 0.9375rem;
}
}
@media screen and (max-width: 991px) {
.copy-right__url a {
font-size: 0.875rem;
}
}
.copy-right__url a:hover {
color: hsl(var(--base));
}
/* ============================
breadcrumb css
=============================== */
.breadcrumb {
padding: 215px 0 130px;
background: hsl(var(--white)/0.02);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
margin-bottom: 0;
position: relative;
z-index: 1;
}
@media screen and (max-width: 991px) {
.breadcrumb {
padding: 100px 0 60px;
}
}
.breadcrumb .banner-shape {
position: absolute;
top: 58%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
opacity: 0.3;
}
@media screen and (max-width: 991px) {
.breadcrumb__title {
font-size: 40px;
}
}
.breadcrumb__wrapper {
text-align: center;
}
.breadcrumb__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.breadcrumb__item {
font-size: 1.25rem;
text-transform: capitalize;
color: hsl(var(--white));
}
@media screen and (max-width: 1199px) {
.breadcrumb__item {
font-size: 1.125rem;
}
}
@media screen and (max-width: 991px) {
.breadcrumb__item {
font-size: 1rem;
}
}
.breadcrumb__item a {
color: hsl(var(--white));
}
.breadcrumb__item a:hover {
color: hsl(var(--base));
}
.success {
color: #28a745;
}
.error {
color: #dc3545;
font-weight: 500;
}
/* Style for the robot model */
.robot-model {
position: absolute;
top: 0%;
right: -20%;
}
/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
.robot-model {
transform: scale(2); /* Smaller scaling for mobile devices */
}
}
/* ============================
contact css
=============================== */
/*# sourceMappingURL=main.css.map */
/* BEST VIEWED IN FULL-SCREEN ON CHROME / SAFARI */
.section {
width: 100%;
height: 100%;
}
.svg {
position: fixed;
z-index: 900;
height: 90%;
width: 100%;
left: 0;
top: 5%;
}
.st0{display:none;}
.st1{fill:#D16B59;}
.st2{fill:#7C5565;}
.st3{fill:#FFA88E;}
.st4{fill:#AD373E;}
.st5{fill:#C16A66;}
.st6{fill:#FF7265;}
.st7{fill:#FE857F;}
.st8{fill:#E68C79;}
.st9{fill:#FFA38F;}
.st10{fill:#FF6D5B;}
.st11{fill:#8A3941;}
.st12{fill:#D46A60;}
.st13{fill:#FF887D;}
.st14{fill:#A24D5D;}
.st15{fill:#F08F78;}
.st16{fill:#C74D44;}
.st17{fill:#FF9383;}
.st18{fill:#FF8973;}
.st19{fill:transparent;}
.st20{fill:#FB827C;}
.st21{fill:#FBAB97;}
.st22{fill:#BE4349;}
.st23{fill:#FFAA97;}
.st24{fill:#8B2C1F;}
.st25{fill:#962E28;}
.st26{fill:#952C21;}
.st27{fill:#97211B;}
.st28{fill:#590F1a;}
.st29{fill:#981A11;}
.st30{fill:#590F1a;}
.st31{fill:#981D0B;}
.st32{fill:#CE3F41;}
.st33{fill:#FE6D68;}
.st34{fill:#DB574C;}
.st35{fill:#8D333A;}
.st36{fill:#AF434D;}
.st37{fill:#9D3733;}
.st38{fill:#80262C;}
.st39{fill:#872B33;}
.st40{fill:#942C24;}
.st41{fill:#B9424A;}
.st42{fill:#AB404C;}
.st43{fill:#9F3F36;}
.st44{fill:#FF6B60;}
.st45{fill:#95343A;}
.st46{fill:#FF6C69;}
.st47{fill:#FF545A;}
.st48{fill:#DD5051;}
.st49{fill:#FF6666;}
.st50{fill:#FF5D57;}
.st51{fill:#FF9781;}
.st52{fill:#FB806E;}
.st53{fill:#C85B54;}
.st54{fill:#C5353E;}
.st55{fill:#87363D;}
.st56{fill:#AA3F3F;}
.st57{fill:#DE645B;}
.st58{fill:#FF6158;}
.st59{fill:#C54947;}
.st60{fill:#9A4546;}
.st61{fill:#7D3238;}
.st62{fill:#A0564B;}
.st63{fill:#9E363D;}
.st64{fill:#C14A41;}
.st65{fill:#FA9A84;}
.st66{fill:#C07160;}
.st67{fill:#7D3337;}
.st68{fill:transparent;}
.st69{fill:#FF7E6E;}
.st70{fill:#FD6D62;}
.st71{fill:#79231F;}
.st72{fill:#E46864;}
.st73{fill:#AD3F34;}
.st74{fill:#371B1B;}
.st75{fill:#C55449;}
.st76{fill:#FF6B5A;}
.st77{fill:#D65257;}
.st78{fill:#FCB6A4;}
.st79{fill:#EF7A63;}
.st80{fill:#FF9D93;}
.st81{fill:#E78366;}
.st82{fill:#FF796D;}
.st83{fill:#922B36;}
.st84{fill:#7F020F;}
.st85{fill:#84030D;}
.st86{fill:#8D0C1C;}
.st87{fill:#A20D13;}
.st88{fill:#84010D;}
.st89{fill:#970013;}
.st90{fill:#951310;}
.st91{fill:#8A070F;}
.st92{fill:#9D0005;}
.st93{fill:#950205;}
.st94{fill:#8B1C1D;}
.st95{fill:#F2493B;}
.st96{fill:#7B0512;}
.st97{fill:#7B242E;}
.st98{fill:#D04D55;}
.st99{fill:#E78973;}
.st100{fill:#F55B57;}
.st101{fill:#A30114;}
.st102{fill:#7F1F20;}
.st103{fill:#60151D;}
.st104{fill:#761D1F;}
.st105{fill:#5E1C1C;}
.st106{fill:#810C10;}
.st107{fill:#7B0206;}
.st108{fill:#790005;}
.st109{fill:#860003;}
.st110{fill:#760514;}
.st111{fill:#6D0305;}
.st112{fill:#883934;}
.st113{fill:#7F0007;}
.st114{fill:#7C5565;}
.st115{fill:#7C5565;}
.st116{fill:#931218;}
.st117{fill:#AC5446;}
.st118{fill:#8A383A;}
.st119{fill:#690103;}
.st120{fill:#8F090C;}
.st121{fill:#7C5565;}
.st122{fill:#973130;}
.st123{fill:#FF8474;}
.st124{fill:#78020F;}
.st125{fill:#71060A;}
.st126{fill:#6B020B;}
.st127{fill:#7D000E;}
.st128{fill:#790002;}
.st129{fill:#FF9685;}
.st130{fill:#AB4B42;}
.st131{fill:#863B3C;}
.st132{fill:#FF8C72;}
.st133{fill:#A7413C;}
.st134{fill:#912922;}
.st135{fill:#8B302A;}
.st136{fill:#FE574F;}
.st137{fill:#632229;}
.st138{fill:#590F1a;}
.st139{display: none; fill:none;stroke:transparent;stroke-width:2;stroke-miterlimit:10;}
.st140{fill:#9A2920;}
.st141{fill:#5C2328;}
.st142{fill:#AC4A5A;}
.st143{fill:#783438;}
.st144{fill:#902A1F;}
.st145{fill:#9E2E27;}
.st146{fill:#FF6057;}
.st147{fill:#A14037;}
.st148{fill:#E26360;}
.st149{fill:#FF5953;}
.st150{fill:#FE5B4E;}
.st151{fill:#FF826E;}
.st152{fill:#9B1121;}
.st153{fill:#CE464A;}
.st154{fill:#C02935;}
.st155{fill:#FF8376;}
.st156{fill:#590F1a;}
.st157{fill:#AB3A2F;}
.st158{fill:#CC4E4D;}
.st159{fill:#C62334;}
.st160{fill:#9E283C;}
.st161{fill:#BE0E30;}
.st162{fill:#B21128;}
.st163{fill:#C92130;}
.st164{fill:#A40C19;}
.st165{fill:#AC1B2D;}
.st166{fill:#FF464E;}
.st167{fill:#D1363D;}
.st168{fill:#C12238;}
.st169{fill:#B01C2A;}
.st170{fill:#D53840;}
.st171{fill:#BA6B5A;}
.st172{fill:#E8857E;}
.st173{fill:#703E34;}
.st174{fill:#B96353;}
.st175{fill:#B35F59;}
.st176{fill:#8A4841;}
.st177{fill:#B44A4E;}
.st178{fill:#DD6A56;}
.st179{fill:#FF8778;}
.st180{fill:#D27264;}
.st181{fill:#E68271;}
.st182{fill:#AE3D4C;}
.st183{fill:#C64048;}
.st184{fill:#7C5565;}
.st185{fill:#E85954;}
.st186{fill:#7C5565;}
.st187{fill:#F26C5F;}
.st188{fill:#CF4B4D;}
.st189{fill:#B1271C;}
.st190{fill:#962E28;}
.st191{fill:#96332D;}
.st192{fill:transparent;}
.st193{fill:#92353D;}
.st194{fill:#99000A;}
.st195{fill:#9C0E10;}
.st196{fill:#601E26;}
.st197{fill:#863127;}
.st198{fill:#A93B46;}
.st199{fill:#A14B49;}
.st200{fill:#853435;}
.st201{fill:#7C5565;}
.st202{fill:#5D1D22;}
.st203{fill:#80535C;}
.st204{fill:#590F1a;}
.st205{fill:#79292E;}
.st206{fill:#8B4044;}
.st207{fill:#742326;}
.st208{fill:#74252A;}
.st209{fill:#892523;}
.st210{fill:#9C1817;}
.st211{fill:#4B1016;}
.st212{fill:#D45A4F;}
.st213{fill:#4D141C;}
.st214{fill:#7B181C;}
.st215{fill:#852A20;}
.st216{fill:#C43538;}
.st217{fill:#922725;}
.st218{fill:#890A13;}
.st219{fill:#E7433E;}
.st220{fill:#AE3240;}
.st221{fill:#771A1E;}
.st222{fill:#8B0210;}
.st223{fill:#6F090A;}
.st224{fill:#7E0007;}
.st225{fill:#680703;}
.st226{fill:#821113;}
.st227{fill:transparent;}
.st228{fill:#700800;}
.st229{fill:#760708;}
.st230{fill:#73060B;}
.st231{fill:#590904;}
.st232{fill:#7C5565;}
.st233{fill:#7C5565;}
.st234{fill:#C74D50;}
.st235{fill:#6F282A;}
.st236{fill:#7C5565;}
.st237{fill:#EB4B49;}
.st238{fill:#A0303C;}
.st239{fill:#F65350;}
.st240{fill:#E15853;}
.st241{fill:#7C5565;}
.st242{fill:#6B4957;}
.st243{fill:#E94945;}
.st244{fill:#C13E43;}
.st245{fill:#FA5443;}
.st246{fill:#D63937;}
.st247{fill:#FD6D5F;}
.st248{fill:#D15A49;}
.st249{fill:#C03937;}
.st250{fill:#C15050;}
.st251{fill:#FF8F7F;}
.st252{fill:#DC4434;}
.st253{fill:#87000A;}
.st254{fill:#760D18;}
.st255{fill:#C62D29;}
.st256{fill:#F65146;}
.st257{fill:#84151A;}
.st258{fill:#FF4B51;}
.st259{fill:#FF6B5F;}
.st260{fill:#FF7373;}
.st261{fill:#DD4145;}
.st262{fill:#AC162C;}
.st263{fill:#BC232B;}
.st264{fill:#B80013;}
.st265{fill:#8F0A1B;}
.st266{fill:#B71E2B;}
.st267{fill:#E75B4D;}
.st268{fill:#C96459;}
.st269{fill:#FF7A74;}
.st270{fill:#EF5E54;}
.st271{fill:#FF5348;}
.st272{fill:#921F21;}
.st273{fill:#8E2329;}
.st274{fill:#691D24;}
.st275{fill:#8F1520;}
.st276{fill:#7E222B;}
.st277{fill:#871C23;}
.st278{fill:transparent;}
.st279{fill:#AB2F37;}
.st280{fill:#82242E;}
.st281{fill:#670F1A;}
.st282{fill:#FE796B;}
.st283{fill:#FF8273;}
.st284{fill:#FE7971;}
.st285{fill:#841E21;}
.st286{fill:#994A53;}
.st287{fill:#7E3334;}
.st288{fill:#B0433D;}
.st289{fill:#BA5568;}
.st290{fill:#901411;}
.st291{fill:#9B1C21;}
.st292{fill:#C43437;}
.st293{fill:#942223;}
.st294{fill:#A22635;}
.st295{fill:#932729;}
.st296{fill:#941325;}
.st297{fill:#C03D49;}
.st298{fill:#B33D50;}
.st299{fill:#72101B;}
.st300{fill:#9C1221;}
.st301{fill:#371B1B;}
.st302{fill:#AB1D29;}
.st303{fill:#541017;}
.st304{fill:#D73340;}
.st305{fill:#B71E2E;}
.st306{fill:#C53943;}
.st307{fill:#AC2745;}
.st308{fill:#A63B49;}
.st309{fill:#BF2B3B;}
.st310{fill:#B50325;}
.st311{fill:#93090F;}
.st312{fill:#AA1E20;}
.st313{fill:#8D000D;}
.st314{fill:#7C000A;}
.st315{fill:#893530;}
.st316{fill:#87091E;}
.st317{fill:#77000F;}
.st318{fill:#A31119;}
.st319{fill:#7F161C;}
.st320{fill:#A1122B;}
.st321{fill:#AA1226;}
.st322{fill:#FA5055;}
.st323{fill:#9C1528;}
.st324{fill:#FE6466;}
.st325{fill:#860B12;}
.st326{fill:#810515;}
.st327{fill:#88211B;}
.st328{fill:#590F1a;} /*vein*/
.st329{fill:#951528;}
.st330{fill:#3A181E;}
.st331{fill:#932923;}
.st332{fill:#7C5565;}
.st333{fill:#9D4640;}
.st334{fill:#9C4445;}
.st335{fill:#A3252C;}
.st336{fill:#7C5565;}
.st337{fill:#A33238;}
.st338{fill:#B74145;}
.st339{fill:#FF9E95;}
.st340{fill:#8C352D;}
.st341{fill:#A97155;}
.st342{fill:#933F35;}
.st343{fill:#C57464;}
.st344{fill:#E09E88;}
.st345{fill:#904430;}
.st346{fill:#FB6F67;}
.st347{fill:#FF5049;}
.st348{fill:#CF2D39;}
.st349{fill:#BE2D3A;}
.st350{fill:#A5151D;}
.st351{fill:#931F15;}
.st352{fill:#C3323F;}
.st353{fill:#7C0D1F;}
.st354{fill:#371B1B;}
.st355{fill:none;}
.low-poly {
z-index: 200;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: pulse-grow-main 0s ease-in-out 4s infinite alternate;
animation: pulse-grow-main 0s ease-in-out 4s infinite alternate; /* 0.8*/
opacity: 1;
}
.low-poly * {
-webkit-animation: fill-ani 2s ease-in 3s backwards, pulse-grow-main 2.5s ease-out 4s infinite alternate;
animation: fill-ani 2s ease-in 3s backwards, pulse-grow-main 0s ease-out 0s infinite alternate;
stroke:transparent;
stroke-width:1px;
fill-opacity:1;
stroke-dasharray: 2000;
stroke-dashoffset: 0 ;
transform-origin: 50%;
}
@-webkit-keyframes fill-ani {
from {
fill-opacity:0;
stroke:#931F15;
stroke-width:1px;
stroke-dashoffset: 2000;
}
}
@keyframes fill-ani {
from {
fill-opacity:0;
stroke:#931F15;
stroke-width:1px;
stroke-dashoffset: 2000;
}
}
/* TOP RIGHT */
.st24, .st25, .st26, .st27, .st29, .st31, .st37, .st40, .st43, .st112, .st130, .st133, .st134, .st135, .st140, .st144, .st145, .st147, .st157, .st189, .st190, .st191, .st197, .st340, .st341, .st342, .st343, .st344, .st345 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: fill-ani 2s ease-in 2.5s backwards, pulse-grow-top .5s ease-in-out 3.5s infinite alternate;
animation: fill-ani 2s ease-in 2.5s backwards, pulse-grow-top .5s ease-in-out 3.5s infinite alternate;
display: block;
}
.st190 {
-webkit-animation: fill-ani 2s ease-in 2.5s backwards, pulse-grow-top-192 .5s ease-in-out 3.5s infinite alternate;
animation: fill-ani 2s ease-in 2.5s backwards, pulse-grow-top-192 .5s ease-in-out 3.5s infinite alternate;
}
/* TOP RIGHT */
/* TOP LEFT */
.st94, .st102, .st104, .st209, .st215, .st216, .st217, .st221, .st254, .st257, .st272, .st273, .st274, .st275, .st276, .st277, .st279, .st280, .st281, .st285, .st290, .st291, .st292, .st293, .st295, .st299, .st312, .st319, .st325, .st327, .st331, .st335 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: fill-ani 2s ease-in 2s backwards, pulse-grow-top .5s ease-in-out 3s infinite alternate;
animation: fill-ani 2s ease-in 2s backwards, pulse-grow-top .5s ease-in-out 3s infinite alternate;
display: block;
}
/* TOP LEFT */
/* BOTTOM */
.st84, .st85, .st86, .st87, .st88, .st89, .st90, .st91, .st92, .st93, .st96, .st106, .st107, .st108, .st109, .st110, .st111, .st113, .st116, .st119, .st120, .st122, .st124, .st125, .st126, .st127, .st128, .st152, .st154, .st159, .st160, .st161, .st162, .st163, .st164, .st165, .st168, .st169, .st194, .st195, .st210, .st212, .st214, .st218, .st220, .st222, .st223, .st224, .st225, .st226, .st228, .st229, .st230, .st231, .st253, .st262, .st263, .st264, .st265, .st266, .st289, .st294, .st296, .st297, .st298, .st300, .st302, .st304, .st305, .st306, .st307, .st308, .st309, .st310, .st311, .st313, .st314, .st316, .st317, .st318, .st320, .st321, .st322, .st323, .st326, .st329, .st349, .st350, .st351, .st352, .st353 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: fill-ani 2s ease-in 3s backwards, pulse-grow-bottom .5s ease-in-out 3s infinite alternate;
animation: fill-ani 2s ease-in 3s backwards, pulse-grow-bottom .5s ease-in-out 3s infinite alternate;
display: block;
}
/* BOTTOM */
/* Pulse Grow */
@-webkit-keyframes pulse-grow-main {
to {
-webkit-transform: scale(.996);
transform: scale(.996);
}
}
@keyframes pulse-grow-main {
to {
-webkit-transform: scale(.996);
transform: scale(.996);
}
}
@-webkit-keyframes pulse-grow-top-192 {
to {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
}
@keyframes pulse-grow-top-192 {
to {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
}
@-webkit-keyframes pulse-grow-top {
to {
-webkit-transform: scale(1.09);
transform: scale(1.09);
}
}
@keyframes pulse-grow-top {
to {
-webkit-transform: scale(1.09);
transform: scale(1.09);
}
}
@-webkit-keyframes pulse-grow-bottom {
to {
-webkit-transform: scale(1.09);
transform: scale(1.09);
}
}
@keyframes pulse-grow-bottom {
to {
-webkit-transform: scale(1.09);
transform: scale(1.09);
}
}
@-webkit-keyframes opacity {
from {
stroke:transparent;
stroke-width:1px;
fill-opacity:0;
stroke-dasharray: 2000;
stroke-dashoffset: 0 ;
}
}
@keyframes opacity {
from {
stroke:transparent;
stroke-width:1px;
fill-opacity:0;
stroke-dasharray: 2000;
stroke-dashoffset: 0 ;
}
}
.st211 {
stroke:transparent;
stroke-width:1px;
fill-opacity:1;
stroke-dasharray: 2000;
stroke-dashoffset: 0 ;
-webkit-animation: opacity 2s ease-in 3s backwards;
animation: opacity 2s ease-in 3s backwards;
}
.st328 {
stroke:transparent;
stroke-width:1px;
fill-opacity:1;
stroke-dasharray: 2000;
stroke-dashoffset: 0 ;
-webkit-animation: opacity 2s ease-in 3s backwards;
animation: opacity 2s ease-in 3s backwards;
}
.st146, .st167 {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation: fill-ani 2s ease-in 3s backwards;
animation: fill-ani 2s ease-in 3s backwards;
}
.st256 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-animation: fill-ani 2s ease-in 3s backwards;
animation: fill-ani 2s ease-in 3s backwards;
}
.st149 {
-webkit-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-animation: fill-ani 2s ease-in 3s backwards;
animation: fill-ani 2s ease-in 3s backwards;
}
.st347 {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-animation: fill-ani 2s ease-in 3s backwards;
animation: fill-ani 2s ease-in 3s backwards;
}