Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
unsatisfiableness
/
assets
/
css
:
main.css
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
@charset "UTF-8"; /*---------------------------------------------------- @File: Default Styles @Author: Hasan Sibakhi @URL: https://themeforest.net/user/orinostu This file contains the styling for the actual template, this is the file you need to edit to change the look of the template. ---------------------------------------------------- */ /*===================================================================== @Template Name: Rakon Landing Page @Author: Hasan Sibakhi @Developed By: Hasan Sibakhi @Developer URL: https://dribbble.com/HasanSib /*===================================================================== */ /* CSS Table of Sections -------------------------- ** header -------------------------- ** Banner -------------------------- ** Services -------------------------- ** Features -------------------------- ** Products -------------------------- ** Horizontalscroll -------------------------- ** Pricing -------------------------- ** Faq -------------------------- ** Contact -------------------------- ** Testimonial -------------------------- ** Account -------------------------- ** About -------------------------- ** Tabs -------------------------- ** Crypto -------------------------- ** Team Members -------------------------- ** Newsletter -------------------------- ** timeline -------------------------- ** Contact Area -------------------------- ** Donat -------------------------- ** Blog -------------------------- ** slider -------------------------- ** Map -------------------------- ** Search -------------------------- ** State -------------------------- ** Footer -------------------------- */ /* ======= helpers ========== */ /*----------------------------- media query -----------------------------*/ /*----------------------------- Colors -----------------------------*/ /*----------------------------- media query -----------------------------*/ /*----------------------------- mixin overlay -----------------------------*/ /*----------------------------- mixin prefix -----------------------------*/ /*----------------------------- mixin animation -----------------------------*/ /* ========== pages ========== */ /*----------------------------- Yeseva One Designed by Jovanny Lemonad font-family: 'Yeseva One', cursive; -----------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap"); /* CircularStd @font-face kit */ /*----------------------------- CircularStd-Black -----------------------------*/ @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-Black.eot"); src: url("../fonts/text-font/CircularStd-Blackd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-Black.woff") format("woff"), url("../fonts/text-font/CircularStd-Black.ttf") format("truetype"), url("../fonts/text-font/CircularStd-Black.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 800; font-style: normal; } @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-BlackItalic.eot"); src: url("../fonts/text-font/CircularStd-BlackItalicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-BlackItalic.woff") format("woff"), url("../fonts/text-font/CircularStd-BlackItalic.ttf") format("truetype"), url("../fonts/text-font/CircularStd-BlackItalic.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 800; font-style: italic; } /*----------------------------- CircularStd-Bold -----------------------------*/ @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-Bold.eot"); src: url("../fonts/text-font/CircularStd-Boldd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-Bold.woff") format("woff"), url("../fonts/text-font/CircularStd-Bold.ttf") format("truetype"), url("../fonts/text-font/CircularStd-Bold.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 600; font-style: normal; } @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-BoldItalic.eot"); src: url("../fonts/text-font/CircularStd-BoldItalicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-BoldItalic.woff") format("woff"), url("../fonts/text-font/CircularStd-BoldItalic.ttf") format("truetype"), url("../fonts/text-font/CircularStd-BoldItalic.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 600; font-style: italic; } /*----------------------------- CircularStd-Medium -----------------------------*/ @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-Medium.eot"); src: url("../fonts/text-font/CircularStd-Mediumd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-Medium.woff") format("woff"), url("../fonts/text-font/CircularStd-Medium.ttf") format("truetype"), url("../fonts/text-font/CircularStd-Medium.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 500; font-style: normal; } @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-MediumItalic.eot"); src: url("../fonts/text-font/CircularStd-MediumItalicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-MediumItalic.woff") format("woff"), url("../fonts/text-font/CircularStd-MediumItalic.ttf") format("truetype"), url("../fonts/text-font/CircularStd-MediumItalic.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 500; font-style: italic; } /*----------------------------- CircularStd-Book -----------------------------*/ @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-Book.eot"); src: url("../fonts/text-font/CircularStd-Bookd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-Book.woff") format("woff"), url("../fonts/text-font/CircularStd-Book.ttf") format("truetype"), url("../fonts/text-font/CircularStd-Book.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: "CircularStd"; src: url("../fonts/text-font/CircularStd-BookItalic.eot"); src: url("../fonts/text-font/CircularStd-BookItalicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/CircularStd-BookItalic.woff") format("woff"), url("../fonts/text-font/CircularStd-BookItalic.ttf") format("truetype"), url("../fonts/text-font/CircularStd-BookItalic.svg#bcc26993292869431e54c666aafa8fcd") format("svg"); font-weight: 400; font-style: italic; } body { width: 100%; height: 100%; position: relative; -webkit-font-smoothing: antialiased !important; -moz-font-smoothing: antialiased !important; -o-font-smoothing: antialiased !important; -ms-font-smoothing: antialiased !important; font-smoothing: antialiased !important; font-family: "CircularStd", sans-serif; font-size: 16px; color: #0b2238; -webkit-transition: 0.3s ease-in-out !important; -moz-transition: 0.3s ease-in-out !important; -o-transition: 0.3s ease-in-out !important; -ms-transition: 0.3s ease-in-out !important; transition: 0.3s ease-in-out !important; } #wrapper, #content { width: 100%; height: 100%; } /*----------------------------- page dark -----------------------------*/ .dark-currency { background-color: #29013e; } /*----------------------------- button, input , a , btn -----------------------------*/ button, input { -webkit-outline: 0 !important; -moz-outline: 0 !important; -o-outline: 0 !important; -ms-outline: 0 !important; outline: 0 !important; } a { text-decoration: none; } a:hover { text-decoration: none; } .btn, .btn.focus, .btn:active, .btn.active, .btn:focus { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; border: 0; } img { -webkit-user-select: none !important; -moz-user-select: none !important; -o-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /*----------------------------- Selection -----------------------------*/ ::selection { background-color: #165df5; color: #ffffff; } /*----------------------------- Particles -----------------------------*/ #particles-js { position: absolute; pointer-events: none; z-index: 9999999; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; line-height: 0; } @media (max-width: 767px) { #particles-js { display: none; } } .title_sections { margin-bottom: 6.25rem; } .title_sections .before_title { margin-bottom: 1.25rem; } .title_sections .before_title span { color: #0b2238; font-size: 1rem; font-weight: 500; } .title_sections .before_title span:last-child { color: #165df5; } .title_sections h2 { font-size: 1.875rem; margin-bottom: 1.25rem; font-weight: 600; color: #0b2238; } .title_sections p { color: #6c7a87; font-size: 1rem; font-weight: 400; margin-bottom: 1.25rem; } @media (max-width: 991px) { .title_sections { margin-bottom: 2.5rem; } } /*----------------------------- logo -----------------------------*/ .logo { font-weight: 500; font-size: 20px; } .logo img { vertical-align: bottom; margin-right: 0.5rem; width: 27px; } /*----------------------------- demo_body_interior -----------------------------*/ .demo_body_interior { padding-bottom: 450px; background-color: #071726; } @media (max-width: 767px) { .demo_body_interior { padding-bottom: 0; } } .demo_body_interior main { position: relative; background-color: #071726; z-index: 2; } .demo_body_interior .banner_title h1 { font-family: "Yeseva One", cursive; font-weight: 500; } .demo_body_interior .title_sections h2 { font-family: "Yeseva One", cursive; font-weight: 500; } .demo_body_interior .bg_page_dark { background-color: #071726; } .demo_body_interior .gbs_content { border-radius: 12px; background-color: #ffffff; width: 96%; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .demo_body_interior .gbs_content { border-left-width: 10px; } } .demo_body_interior .gs_parallex { position: relative; } .demo_body_interior .gs_parallex .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-background: linear-gradient(to top, #071726 0%, rgba(7, 23, 38, 0) 20%, rgba(7, 23, 38, 0) 80%, #071726 100%) !important; -moz-background: linear-gradient(to top, #071726 0%, rgba(7, 23, 38, 0) 20%, rgba(7, 23, 38, 0) 80%, #071726 100%) !important; -o-background: linear-gradient(to top, #071726 0%, rgba(7, 23, 38, 0) 20%, rgba(7, 23, 38, 0) 80%, #071726 100%) !important; -ms-background: linear-gradient(to top, #071726 0%, rgba(7, 23, 38, 0) 20%, rgba(7, 23, 38, 0) 80%, #071726 100%) !important; background: linear-gradient(to top, #071726 0%, rgba(7, 23, 38, 0) 20%, rgba(7, 23, 38, 0) 80%, #071726 100%) !important; } .demo_body_interior .gs_parallex .pllx_img img { width: 100%; height: 600px; object-fit: cover; } @media (max-width: 767px) { .demo_body_interior .gs_parallex .pllx_img img { height: 300px; } } .demo_body_interior .collection_one { background: #ffffff; width: 96%; margin-left: auto; margin-right: auto; margin-top: 2rem; border-radius: 12px; } @media (max-width: 767px) { .demo_body_interior .collection_one { margin-top: 0.5rem; } } /*----------------------------- Charity -----------------------------*/ .demo_body_charity .gbs_content { border-right: 30px solid #000000; background-color: #ffffff; margin-top: -1.5rem; position: relative; } @media (max-width: 767px) { .demo_body_charity .gbs_content { border-right-width: 10px; } } .demo_body_charity .gbs_content .gs_parallex { position: relative; } .demo_body_charity .gbs_content .gs_parallex img { height: 330px; width: 100%; object-fit: cover; } @media (max-width: 767px) { .demo_body_charity .gbs_content .gs_parallex img { height: 500px; } } .demo_body_charity .gbs_content .gs_parallex .gn_status { position: absolute; top: 40%; left: auto; } @media (max-width: 767px) { .demo_body_charity .gbs_content .gs_parallex .gn_status { top: 15%; } } .demo_body_charity .gbs_content .gs_parallex .gn_status .item_gw h3 { font-size: 35px; font-weight: 600; color: #ffffff; margin-bottom: 1.25rem; } .demo_body_charity .gbs_content .gs_parallex .gn_status .item_gw p { color: rgba(255, 255, 255, 0.8); font-size: 16px; font-weight: 400; margin-bottom: 0; } /*----------------------------- hide and show header -----------------------------*/ .hideheader { -webkit-transform: translateY(-100%) !important; -moz-transform: translateY(-100%) !important; -o-transform: translateY(-100%) !important; -ms-transform: translateY(-100%) !important; transform: translateY(-100%) !important; } .showheader { -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -o-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } /*----------------------------- loading_overlay -----------------------------*/ .loaded_page #particles-js { z-index: 12; } .loaded_page .loading_overlay { opacity: 0; pointer-events: none; -webkit-transition: opacity 0.6s !important; -moz-transition: opacity 0.6s !important; -o-transition: opacity 0.6s !important; -ms-transition: opacity 0.6s !important; transition: opacity 0.6s !important; } .loading_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fef8f2; overflow: hidden; position: fixed; z-index: 999999; display: flex; justify-content: center; align-items: center; } .loading_overlay .loader_logo { position: relative; } .loading_overlay .loader_logo .logo { width: 40px; height: 40px; -webkit-animation: text-focus-in 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important; -moz-animation: text-focus-in 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important; -o-animation: text-focus-in 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important; -ms-animation: text-focus-in 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important; animation: text-focus-in 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both !important; } /*----------------------------- background - page modern Sass -----------------------------*/ .main_sass::before { content: ""; background-image: url("../img/bg-cubic.svg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0.03; } .dashed-line { border-bottom: 1px dashed rgba(255, 255, 255, 0.3); max-width: 250px; padding: 0.1rem 0; } /*----------------------------- Classes: margin, padding, font-size, color, background-color, border-radius, z-index, min-width -----------------------------*/ .margin-b-1 { margin-bottom: 0.625rem !important; } .margin-b-2 { margin-bottom: 1.25rem !important; } .margin-b-3 { margin-bottom: 1.875rem !important; } .margin-b-4 { margin-bottom: 2.5rem !important; } .margin-b-5 { margin-bottom: 3.125rem !important; } @media (max-width: 767px) { .margin-b-5 { margin-bottom: 1.875rem !important; } } .margin-b-6 { margin-bottom: 3.75rem !important; } @media (max-width: 767px) { .margin-b-6 { margin-bottom: 2.5rem !important; } } .margin-b-7 { margin-bottom: 4.375rem !important; } @media (max-width: 767px) { .margin-b-7 { margin-bottom: 2.5rem !important; } } .margin-b-8 { margin-bottom: 5rem !important; } @media (max-width: 767px) { .margin-b-8 { margin-bottom: 2.5rem !important; } } .margin-b-9 { margin-bottom: 5.625rem !important; } @media (max-width: 767px) { .margin-b-9 { margin-bottom: 3.125rem !important; } } .margin-b-10 { margin-bottom: 6.25rem !important; } @media (max-width: 767px) { .margin-b-10 { margin-bottom: 3.125rem !important; } } .margin-b-11 { margin-bottom: 6.875rem !important; } @media (max-width: 767px) { .margin-b-11 { margin-bottom: 3.125rem !important; } } .margin-b-12 { margin-bottom: 7.5rem !important; } @media (max-width: 767px) { .margin-b-12 { margin-bottom: 3.125rem !important; } } .margin-b-13 { margin-bottom: 8.125rem !important; } @media (max-width: 767px) { .margin-b-13 { margin-bottom: 3.125rem !important; } } .margin-b-14 { margin-bottom: 8.75rem !important; } @media (max-width: 767px) { .margin-b-14 { margin-bottom: 3.125rem !important; } } .margin-b-15 { margin-bottom: 9.375rem !important; } @media (max-width: 767px) { .margin-b-15 { margin-bottom: 3.75rem !important; } } .margin-t-1 { margin-top: 0.625rem !important; } .margin-t-2 { margin-top: 1.25rem !important; } .margin-t-3 { margin-top: 1.875rem !important; } .margin-t-4 { margin-top: 2.5rem !important; } .margin-t-5 { margin-top: 3.125rem !important; } .margin-t-6 { margin-top: 3.75rem !important; } @media (max-width: 767px) { .margin-t-6 { margin-top: 2.5rem !important; } } .margin-t-7 { margin-top: 4.375rem !important; } @media (max-width: 767px) { .margin-t-7 { margin-top: 2.5rem !important; } } .margin-t-8 { margin-top: 5rem !important; } @media (max-width: 767px) { .margin-t-8 { margin-top: 2.5rem !important; } } .margin-t-9 { margin-top: 5.625rem !important; } @media (max-width: 767px) { .margin-t-9 { margin-top: 3.125rem !important; } } .margin-t-10 { margin-top: 6.25rem !important; } @media (max-width: 767px) { .margin-t-10 { margin-top: 3.125rem !important; } } .margin-t-11 { margin-top: 6.875rem !important; } @media (max-width: 767px) { .margin-t-11 { margin-top: 3.125rem !important; } } .margin-t-12 { margin-top: 7.5rem !important; } @media (max-width: 767px) { .margin-t-12 { margin-top: 3.125rem !important; } } .margin-t-13 { margin-top: 8.125rem !important; } @media (max-width: 767px) { .margin-t-13 { margin-top: 3.125rem !important; } } .margin-t-14 { margin-top: 8.75rem !important; } @media (max-width: 767px) { .margin-t-14 { margin-top: 3.125rem !important; } } .margin-t-15 { margin-top: 9.375rem !important; } @media (max-width: 767px) { .margin-t-15 { margin-top: 3.75rem !important; } } .margin-my-1 { margin-top: 0.625rem !important; margin-bottom: 0.625rem !important; } .margin-my-2 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .margin-my-3 { margin-top: 1.875rem !important; margin-bottom: 1.875rem !important; } .margin-my-4 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } .margin-my-5 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } .margin-my-6 { margin-top: 3.75rem !important; margin-bottom: 3.75rem !important; } @media (max-width: 767px) { .margin-my-6 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } } .margin-my-7 { margin-top: 4.375rem !important; margin-bottom: 4.375rem !important; } @media (max-width: 767px) { .margin-my-7 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } } .margin-my-8 { margin-top: 5rem !important; margin-bottom: 5rem !important; } @media (max-width: 767px) { .margin-my-8 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } } .margin-my-9 { margin-top: 5.625rem !important; margin-bottom: 5.625rem !important; } @media (max-width: 767px) { .margin-my-9 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } } .margin-my-10 { margin-top: 6.25rem !important; margin-bottom: 6.25rem !important; } @media (max-width: 767px) { .margin-my-10 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } } .margin-my-11 { margin-top: 6.875rem !important; margin-bottom: 6.875rem !important; } @media (max-width: 767px) { .margin-my-11 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } } .margin-my-12 { margin-top: 7.5rem !important; margin-bottom: 7.5rem !important; } @media (max-width: 767px) { .margin-my-12 { margin-top: 3.125em !important; margin-bottom: 3.125rem !important; } } .margin-my-13 { margin-top: 8.125rem !important; margin-bottom: 8.125rem !important; } @media (max-width: 767px) { .margin-my-13 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } } .margin-my-14 { margin-top: 8.75rem !important; margin-bottom: 8.75rem !important; } @media (max-width: 767px) { .margin-my-14 { margin-top: 3.125rem !important; margin-bottom: 3.125rem !important; } } .margin-my-15 { margin-top: 9.375rem !important; margin-bottom: 9.375rem !important; } @media (max-width: 767px) { .margin-my-15 { margin-top: 1.875rem !important; margin-bottom: 3.75rem !important; } } .padding-py-1 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } .padding-py-2 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .padding-py-3 { padding-top: 1.875rem !important; padding-bottom: 1.875rem !important; } .padding-py-4 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .padding-py-5 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } .padding-py-6 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; } @media (max-width: 767px) { .padding-py-6 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } } .padding-py-7 { padding-top: 4.375rem !important; padding-bottom: 4.375rem !important; } @media (max-width: 767px) { .padding-py-7 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } } .padding-py-8 { padding-top: 5rem !important; padding-bottom: 5rem !important; } @media (max-width: 767px) { .padding-py-8 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } } .padding-py-9 { padding-top: 5.625rem !important; padding-bottom: 5.625rem !important; } @media (max-width: 767px) { .padding-py-9 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-10 { padding-top: 6.25rem !important; padding-bottom: 6.25rem !important; } @media (max-width: 767px) { .padding-py-10 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-11 { padding-top: 6.875rem !important; padding-bottom: 6.875rem !important; } @media (max-width: 767px) { .padding-py-11 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-12 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; } @media (max-width: 767px) { .padding-py-12 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-13 { padding-top: 8.125rem !important; padding-bottom: 8.125rem !important; } @media (max-width: 767px) { .padding-py-13 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-14 { padding-top: 8.75rem !important; padding-bottom: 8.75rem !important; } @media (max-width: 767px) { .padding-py-14 { padding-top: 3.125rem !important; padding-bottom: 3.125rem !important; } } .padding-py-15 { padding-top: 9.375rem !important; padding-bottom: 9.375rem !important; } @media (max-width: 767px) { .padding-py-15 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; } } .padding-t-1 { padding-top: 0.625rem !important; } .padding-t-2 { padding-top: 1.25rem !important; } .padding-t-3 { padding-top: 1.875rem !important; } .padding-t-4 { padding-top: 2.5rem !important; } .padding-t-5 { padding-top: 3.125rem !important; } .padding-t-6 { padding-top: 3.75rem !important; } @media (max-width: 767px) { .padding-t-6 { padding-top: 2.5rem !important; } } .padding-t-7 { padding-top: 4.375rem !important; } @media (max-width: 767px) { .padding-t-7 { padding-top: 2.5rem !important; } } .padding-t-8 { padding-top: 5rem !important; } @media (max-width: 767px) { .padding-t-8 { padding-top: 2.5rem !important; } } .padding-t-9 { padding-top: 5.625rem !important; } @media (max-width: 767px) { .padding-t-9 { padding-top: 3.125rem !important; } } .padding-t-10 { padding-top: 6.25rem !important; } @media (max-width: 767px) { .padding-t-10 { padding-top: 3.125rem !important; } } .padding-t-11 { padding-top: 6.875rem !important; } @media (max-width: 767px) { .padding-t-11 { padding-top: 3.125rem !important; } } .padding-t-12 { padding-top: 7.5rem !important; } @media (max-width: 767px) { .padding-t-12 { padding-top: 3.125rem !important; } } .padding-t-13 { padding-top: 8.125rem !important; } @media (max-width: 767px) { .padding-t-13 { padding-top: 1.875rem !important; } } .padding-t-14 { padding-top: 8.75rem !important; } @media (max-width: 767px) { .padding-t-14 { padding-top: 3.125rem !important; } } .padding-t-15 { padding-top: 9.375rem !important; } @media (max-width: 767px) { .padding-t-15 { padding-top: 3.75rem !important; } } .padding-px-1 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; } .padding-px-2 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .padding-px-3 { padding-left: 1.875rem !important; padding-right: 1.875rem !important; } .padding-px-4 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .padding-px-5 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } @media (max-width: 767px) { .padding-px-5 { padding-left: 1.875rem !important; padding-right: 1.875rem !important; } } .padding-px-6 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; } @media (max-width: 767px) { .padding-px-6 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } } .padding-px-7 { padding-left: 4.375rem !important; padding-right: 4.375rem !important; } @media (max-width: 767px) { .padding-px-7 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } } .padding-px-8 { padding-left: 5rem !important; padding-right: 5rem !important; } @media (max-width: 767px) { .padding-px-8 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; } } .padding-px-9 { padding-left: 5.625rem !important; padding-right: 5.625rem !important; } @media (max-width: 767px) { .padding-px-9 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-10 { padding-left: 6.25rem !important; padding-right: 6.25rem !important; } @media (max-width: 767px) { .padding-px-10 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-11 { padding-left: 6.875rem !important; padding-right: 6.875rem !important; } @media (max-width: 767px) { .padding-px-11 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-12 { padding-left: 7.5rem !important; padding-right: 7.5rem !important; } @media (max-width: 767px) { .padding-px-12 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-13 { padding-left: 8.125rem !important; padding-right: 8.125rem !important; } @media (max-width: 767px) { .padding-px-13 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-14 { padding-left: 8.75rem !important; padding-right: 8.75rem !important; } @media (max-width: 767px) { .padding-px-14 { padding-left: 3.125rem !important; padding-right: 3.125rem !important; } } .padding-px-15 { padding-left: 9.375rem !important; padding-right: 9.375rem !important; } @media (max-width: 767px) { .padding-px-15 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; } } .padding-b-1 { padding-bottom: 0.625rem !important; } .padding-b-2 { padding-bottom: 1.25rem !important; } .padding-b-3 { padding-bottom: 1.875rem !important; } .padding-b-4 { padding-bottom: 2.5rem !important; } .padding-b-5 { padding-bottom: 3.125rem !important; } .padding-b-6 { padding-bottom: 3.75rem !important; } @media (max-width: 767px) { .padding-b-6 { padding-bottom: 2.5rem !important; } } .padding-b-7 { padding-bottom: 4.375rem !important; } @media (max-width: 767px) { .padding-b-7 { padding-bottom: 2.5rem !important; } } .padding-b-8 { padding-bottom: 5rem !important; } @media (max-width: 767px) { .padding-b-8 { padding-bottom: 2.5rem !important; } } .padding-b-9 { padding-bottom: 5.625rem !important; } @media (max-width: 767px) { .padding-b-9 { padding-bottom: 3.125rem !important; } } .padding-b-10 { padding-bottom: 6.25rem !important; } @media (max-width: 767px) { .padding-b-10 { padding-bottom: 3.125rem !important; } } .padding-b-11 { padding-bottom: 6.875rem !important; } @media (max-width: 767px) { .padding-b-11 { padding-bottom: 3.125rem !important; } } .padding-b-12 { padding-bottom: 7.5rem !important; } @media (max-width: 767px) { .padding-b-12 { padding-bottom: 3.125rem !important; } } .padding-b-13 { padding-bottom: 8.125rem !important; } @media (max-width: 767px) { .padding-b-13 { padding-bottom: 3.125rem !important; } } .padding-b-14 { padding-bottom: 8.75rem !important; } @media (max-width: 767px) { .padding-b-14 { padding-bottom: 3.125rem !important; } } .padding-b-15 { padding-bottom: 9.375rem !important; } @media (max-width: 767px) { .padding-b-15 { padding-bottom: 3.75rem !important; } } .c-dark { color: #0b2238 !important; } .c-white { color: #ffffff !important; } .c-blue { color: #165df5 !important; } .c-gold { color: #ffce53 !important; } .c-green { color: #19a389 !important; } .c-aquamarine { color: #17e79b !important; } .c-orange { color: #f28e1c !important; } .c-orange-red { color: #fd6b3b !important; } .c-red { color: #f93542 !important; } .c-yollow { color: #ffc329 !important; } .c-gray { color: #6c7a87 !important; } .c-light { color: #9da6af !important; } .c-beiget { color: #ffe7aa !important; } .c-skuy { color: #6bb0f8 !important; } .c-magenta { color: #fd4ffe !important; } .c-currency-d { color: #29013e !important; } .c-currency-p { color: #aa9bb3 !important; } .c-sea { color: #4d81f7 !important; } .c-purple { color: #6f5fa6 !important; } .c-lightgreen { color: #7bd88a !important; } .bg-dark { background-color: #0b2238 !important; } .bg-white { background-color: #ffffff !important; } .bg-blue { background-color: #165df5 !important; } .bg-gold { background-color: #ffce53 !important; } .bg-green { background-color: #19a389 !important; } .bg-aquamarine { background-color: #17e79b !important; } .bg-orange { background-color: #f28e1c !important; } .bg-red { background-color: #f93542 !important; } .bg-yollow { background-color: #ffc329 !important; } .bg-gray { background-color: #6c7a87 !important; } .bg-light { background-color: #9da6af !important; } .bg-beiget { background-color: #ffe7aa !important; } .bg-skuy { background-color: #6bb0f8 !important; } .bg-magenta { background-color: #fd4ffe !important; } .bg-currency-d { background-color: #29013e !important; } .bg-orange-red { background-color: #fd6b3b !important; } .bg-currency-p { background-color: #aa9bb3 !important; } .bg-sea { background-color: #4d81f7 !important; } .bg-purple { background-color: #6f5fa6 !important; } .bg-lightgreen { background-color: #7bd88a !important; } .rounded-0 { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important; -ms-border-radius: 0 !important; border-radius: 0 !important; } .rounded-1 { -webkit-border-radius: 1px !important; -moz-border-radius: 1px !important; -o-border-radius: 1px !important; -ms-border-radius: 1px !important; border-radius: 1px !important; } .rounded-2 { -webkit-border-radius: 2px !important; -moz-border-radius: 2px !important; -o-border-radius: 2px !important; -ms-border-radius: 2px !important; border-radius: 2px !important; } .rounded-3 { -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; -o-border-radius: 3px !important; -ms-border-radius: 3px !important; border-radius: 3px !important; } .rounded-4 { -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; -o-border-radius: 4px !important; -ms-border-radius: 4px !important; border-radius: 4px !important; } .rounded-5 { -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; -o-border-radius: 5px !important; -ms-border-radius: 5px !important; border-radius: 5px !important; } .rounded-6 { -webkit-border-radius: 6px !important; -moz-border-radius: 6px !important; -o-border-radius: 6px !important; -ms-border-radius: 6px !important; border-radius: 6px !important; } .rounded-7 { -webkit-border-radius: 7px !important; -moz-border-radius: 7px !important; -o-border-radius: 7px !important; -ms-border-radius: 7px !important; border-radius: 7px !important; } .rounded-8 { -webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; -o-border-radius: 8px !important; -ms-border-radius: 8px !important; border-radius: 8px !important; } .rounded-9 { -webkit-border-radius: 9px !important; -moz-border-radius: 9px !important; -o-border-radius: 9px !important; -ms-border-radius: 9px !important; border-radius: 9px !important; } .rounded-10 { -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; -o-border-radius: 10px !important; -ms-border-radius: 10px !important; border-radius: 10px !important; } .rounded-11 { -webkit-border-radius: 11px !important; -moz-border-radius: 11px !important; -o-border-radius: 11px !important; -ms-border-radius: 11px !important; border-radius: 11px !important; } .rounded-12 { -webkit-border-radius: 12px !important; -moz-border-radius: 12px !important; -o-border-radius: 12px !important; -ms-border-radius: 12px !important; border-radius: 12px !important; } .rounded-13 { -webkit-border-radius: 13px !important; -moz-border-radius: 13px !important; -o-border-radius: 13px !important; -ms-border-radius: 13px !important; border-radius: 13px !important; } .rounded-14 { -webkit-border-radius: 14px !important; -moz-border-radius: 14px !important; -o-border-radius: 14px !important; -ms-border-radius: 14px !important; border-radius: 14px !important; } .rounded-15 { -webkit-border-radius: 15px !important; -moz-border-radius: 15px !important; -o-border-radius: 15px !important; -ms-border-radius: 15px !important; border-radius: 15px !important; } .rounded-16 { -webkit-border-radius: 16px !important; -moz-border-radius: 16px !important; -o-border-radius: 16px !important; -ms-border-radius: 16px !important; border-radius: 16px !important; } .rounded-17 { -webkit-border-radius: 17px !important; -moz-border-radius: 17px !important; -o-border-radius: 17px !important; -ms-border-radius: 17px !important; border-radius: 17px !important; } .rounded-18 { -webkit-border-radius: 18px !important; -moz-border-radius: 18px !important; -o-border-radius: 18px !important; -ms-border-radius: 18px !important; border-radius: 18px !important; } .rounded-19 { -webkit-border-radius: 19px !important; -moz-border-radius: 19px !important; -o-border-radius: 19px !important; -ms-border-radius: 19px !important; border-radius: 19px !important; } .rounded-20 { -webkit-border-radius: 20px !important; -moz-border-radius: 20px !important; -o-border-radius: 20px !important; -ms-border-radius: 20px !important; border-radius: 20px !important; } .rounded-21 { -webkit-border-radius: 21px !important; -moz-border-radius: 21px !important; -o-border-radius: 21px !important; -ms-border-radius: 21px !important; border-radius: 21px !important; } .rounded-22 { -webkit-border-radius: 22px !important; -moz-border-radius: 22px !important; -o-border-radius: 22px !important; -ms-border-radius: 22px !important; border-radius: 22px !important; } .rounded-23 { -webkit-border-radius: 23px !important; -moz-border-radius: 23px !important; -o-border-radius: 23px !important; -ms-border-radius: 23px !important; border-radius: 23px !important; } .rounded-24 { -webkit-border-radius: 24px !important; -moz-border-radius: 24px !important; -o-border-radius: 24px !important; -ms-border-radius: 24px !important; border-radius: 24px !important; } .rounded-25 { -webkit-border-radius: 25px !important; -moz-border-radius: 25px !important; -o-border-radius: 25px !important; -ms-border-radius: 25px !important; border-radius: 25px !important; } .h-100vh { height: 100vh !important; } .z-index-0 { z-index: 0; } .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .transform-r-15 { transform: rotate(-15deg) !important; } .align-justify { text-align: justify !important; } .font-s-8 { font-size: 8px !important; } .font-s-10 { font-size: 10px !important; } .font-s-12 { font-size: 12px !important; } .font-s-13 { font-size: 13px !important; } .font-s-14 { font-size: 14px !important; } .font-s-15 { font-size: 15px !important; } .font-s-16 { font-size: 16px !important; } .font-s-17 { font-size: 17px !important; } .font-s-18 { font-size: 18px !important; } .font-s-19 { font-size: 19px !important; } .font-s-20 { font-size: 20px !important; } .wd-50 { min-width: 50px !important; justify-content: center; } .wd-100 { min-width: 100px !important; justify-content: center; } .wd-120 { min-width: 120px !important; justify-content: center; } .wd-130 { min-width: 130px !important; justify-content: center; } .wd-140 { min-width: 140px !important; justify-content: center; } .wd-160 { min-width: 160px !important; justify-content: center; } .wd-170 { min-width: 170px !important; justify-content: center; } .border-1 { border: 1px solid #edeef1 !important; } .opacity-1 { opacity: 1 !important; } .nav_rakon { position: absolute; backdrop-filter: none !important; } .nav_rakon .nav-pills .nav-item .nav-link { color: #9da6af !important; } .nav_rakon .nav-pills .nav-item .nav-link.active { color: #0b2238 !important; } .buy_theme { padding: 0.9rem 1.65rem; border-radius: 12px; background-color: #165df5; color: #ffffff; font-size: 16px !important; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .buy_theme:hover { background-color: #0b2238; color: #ffffff; } .buy_theme img { margin-right: 0.3rem; width: 13px; vertical-align: middle; } .fixed-header header.nav_rakon .nav-pills .nav-item .nav-link.active { color: #0b2238 !important; } .banner_rakon { background-color: rgba(242, 142, 28, 0.06) !important; height: 100% !important; padding-bottom: 12rem; } .banner_rakon::before { content: ""; background-image: url("../img/rakon/grid.svg"); background-repeat: no-repeat; background-position: 100%; position: absolute; top: -2rem; right: -3rem; width: 100%; height: 100%; } .banner_rakon .banner_title .offer { background-color: #ffe7aa; padding: 0.85rem 1.35rem; border-radius: 12px; width: max-content; } .banner_rakon .banner_title .offer span { font-size: 14px; } .banner_rakon .banner_title h1 { color: #0b2238 !important; text-transform: capitalize; } @media (max-width: 767px) { .banner_rakon .banner_title h1 { font-size: 40px; } } .banner_rakon .banner_title h1 span { color: #165df5; } .banner_rakon .banner_title .item_nb { margin-top: 1.5rem; } .banner_rakon .banner_title .item_nb p { display: inline-block; color: #0b2238 !important; margin-right: 1.5rem; font-size: 16px; font-weight: 600; } .device_section { background-color: #05111c; position: relative; } .device_section .overlay_curve { position: relative; overflow: hidden; padding: 4rem 0; z-index: 0; } .device_section .overlay_curve:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/rakon/curve.png"); background-repeat: no-repeat; opacity: 0.3; background-size: 100%; bottom: 0; } @media (max-width: 767px) { .device_section .overlay_curve:before { background-position: center; background-size: cover; } } .device_section .item_device { position: absolute; left: -5rem; top: 4rem; z-index: 1; } @media (max-width: 767px) { .device_section .item_device { left: auto; } } .device_section .item_device img { position: relative; display: inline-block; margin-right: 2rem; margin-top: -13rem; } .device_section .item_device img:nth-of-type(1) { width: 45%; } @media (max-width: 767px) { .device_section .item_device img:nth-of-type(1) { width: 100%; margin-right: 0; } } .device_section .item_device img:nth-of-type(2) { width: 30%; } @media (max-width: 767px) { .device_section .item_device img:nth-of-type(2) { display: none; } } .device_section .item_device img:nth-of-type(3) { width: 11%; } @media (max-width: 767px) { .device_section .item_device img:nth-of-type(3) { display: none; } } .device_section .data_source { margin-top: 19rem; } @media (max-width: 991px) { .device_section .data_source { margin-top: 6rem; } } .device_section .data_source span { font-size: 50px; font-weight: 600; color: #ffffff; display: block; margin-bottom: 0.25rem; } .device_section .data_source img { margin-bottom: 1.75rem; } .device_section .data_source h3 { color: #ffffff; font-size: 30px; } .demos_section .title_sections { margin-bottom: 4.375rem; } .demos_section .item { margin-bottom: 2.25rem; position: relative; } .demos_section .item .pic_show { position: relative; overflow: hidden; background-color: #f0eef3; border-radius: 12px; padding: 2.5rem; height: 290px; border: 4px solid #ffffff; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .demos_section .item .pic_show img { width: 100%; -webkit-transition: 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; -moz-transition: 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; -o-transition: 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; -ms-transition: 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; transition: 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; -webkit-box-shadow: 0px 40px 50px 20px rgba(4, 36, 104, 0.1) !important; -moz-box-shadow: 0px 40px 50px 20px rgba(4, 36, 104, 0.1) !important; -o-box-shadow: 0px 40px 50px 20px rgba(4, 36, 104, 0.1) !important; -ms-box-shadow: 0px 40px 50px 20px rgba(4, 36, 104, 0.1) !important; box-shadow: 0px 40px 50px 20px rgba(4, 36, 104, 0.1) !important; } .demos_section .item .item_name { margin-top: 1.5rem; } .demos_section .item .item_name span { display: block; font-size: 14px; color: #6c7a87; margin-bottom: 0.5rem; } .demos_section .item .item_name h4 { color: #0b2238; font-weight: 600; font-size: 16px; margin-bottom: 1rem; } .demos_section .item .item_name .btn { padding: 0.6rem 1.5rem; border-radius: 12px; background-color: rgba(11, 34, 56, 0.05); color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; margin-right: 0.5rem; } .demos_section .item .item_name .btn:hover { background-color: #165df5; color: #ffffff; } .demos_section .item:hover .pic_show { -webkit-box-shadow: 0px 50px 50px -30px rgba(4, 36, 104, 0.1) !important; -moz-box-shadow: 0px 50px 50px -30px rgba(4, 36, 104, 0.1) !important; -o-box-shadow: 0px 50px 50px -30px rgba(4, 36, 104, 0.1) !important; -ms-box-shadow: 0px 50px 50px -30px rgba(4, 36, 104, 0.1) !important; box-shadow: 0px 50px 50px -30px rgba(4, 36, 104, 0.1) !important; } .demos_section .item:hover .pic_show img { margin-top: 15px; } .demos_section .item .latest__new { position: absolute; border-radius: 8px; background-color: #f93542; color: #ffffff; font-size: 14px; top: 1.25rem; left: 1.25rem; padding: 0.4rem 1.2rem; -webkit-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -moz-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -o-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -ms-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; } .comming { text-align: center; margin-top: 5rem; font-size: 18px; font-weight: 600; } .comming span { width: 8px; height: 16px; background-color: #ffe7aa; border-radius: 3px; display: inline-block; margin-right: 0.3rem; vertical-align: middle; -webkit-animation: flicker-1 2s linear infinite both !important; -moz-animation: flicker-1 2s linear infinite both !important; -o-animation: flicker-1 2s linear infinite both !important; -ms-animation: flicker-1 2s linear infinite both !important; animation: flicker-1 2s linear infinite both !important; color: #0b2238; } .components_section .bg_overlay { background-color: #05111c; position: relative; overflow: hidden; padding-top: 6rem; padding-bottom: 15rem; } @media (max-width: 991px) { .components_section .bg_overlay { padding-top: 3rem; padding-bottom: 3rem; } } .components_section .bg_overlay:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/rakon/curve.png"); background-repeat: no-repeat; opacity: 0.3; background-size: 100%; bottom: 0; } @media (max-width: 767px) { .components_section .bg_overlay:before { background-position: center; background-size: cover; } } .components_section .bg_overlay .title_sections { margin-bottom: 2rem; } .components_section .bg_overlay .title_sections h3 { color: #ffffff; display: inline-block; } .components_section .bg_overlay .title_sections span { background-color: #f93542; border-radius: 8px; padding: 0.3rem 0.85rem; font-size: 13px; font-weight: 400; color: #ffffff; display: inline-block; vertical-align: super; margin-left: 0.5rem; } .components_section .bg_overlay .item_product .icon { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; border-radius: 22px; margin-right: 1rem; } .components_section .bg_overlay .item_product .icon .tio { font-size: 24px; } .components_section .bg_overlay .item_product .txt { margin-top: 0.4rem; } .components_section .bg_overlay .item_product .txt h5 { color: #ffffff; font-weight: 600; font-size: 16px; } .components_section .bg_overlay .item_product .txt p { color: #9da6af; font-size: 14px; font-weight: 400; } .components_section .item_card { margin-top: -13rem; position: relative; z-index: 1; } .feat_section { background-color: rgba(242, 142, 28, 0.06) !important; margin-top: -18rem !important; padding-top: 23rem !important; padding-bottom: 3.5rem !important; } @media (max-width: 991px) { .feat_section { margin-top: 0 !important; padding-top: 3.5rem !important; padding-bottom: 3rem !important; } } .feat_section .item_pro { margin-bottom: 2rem; padding-right: 2rem; } @media (max-width: 991px) { .feat_section .item_pro { padding-right: 0; } } .feat_section .item_pro .icon_t { background-color: #ffe7aa !important; border-radius: 22px !important; color: #0b2238 !important; margin-bottom: 1.25rem; } .feat_section .item_pro .icon_t img { width: 22px; } .feat_section .item_pro .icon_t .anime_svg .opac { -webkit-animation: flash linear 4.5s infinite !important; -moz-animation: flash linear 4.5s infinite !important; -o-animation: flash linear 4.5s infinite !important; -ms-animation: flash linear 4.5s infinite !important; animation: flash linear 4.5s infinite !important; } .feat_section .item_pro .icon_t .anime_svg .opac01 { -webkit-animation: flash linear 6.5s infinite !important; -moz-animation: flash linear 6.5s infinite !important; -o-animation: flash linear 6.5s infinite !important; -ms-animation: flash linear 6.5s infinite !important; animation: flash linear 6.5s infinite !important; } .feat_section .item_pro .icon_t .anime_svg .opac02 { -webkit-animation: flash linear 11.5s infinite !important; -moz-animation: flash linear 11.5s infinite !important; -o-animation: flash linear 11.5s infinite !important; -ms-animation: flash linear 11.5s infinite !important; animation: flash linear 11.5s infinite !important; } .feat_section .item_pro .icon_t .anime_svg .opac04 { -webkit-animation: flash linear 8.5s infinite !important; -moz-animation: flash linear 8.5s infinite !important; -o-animation: flash linear 8.5s infinite !important; -ms-animation: flash linear 8.5s infinite !important; animation: flash linear 8.5s infinite !important; } .feat_section .item_pro .icon_t .anime_svg .opac05 { -webkit-animation: flash linear 3.5s infinite !important; -moz-animation: flash linear 3.5s infinite !important; -o-animation: flash linear 3.5s infinite !important; -ms-animation: flash linear 3.5s infinite !important; animation: flash linear 3.5s infinite !important; } .feat_section .item_pro .icon_t svg rect { fill: #0b2238; } .feat_section .item_pro h3 { font-size: 18px; font-weight: 600; } .showcase .images_desc:before { display: none; } .showcase .images_desc img:first-of-type { width: 390px; margin-right: 1.5rem; } @media (max-width: 767px) { .showcase .images_desc img:first-of-type { width: 100%; margin: 0; } } .showcase .images_desc img:last-of-type { width: 150px; } .showcase .title_sections { margin-bottom: 2rem; } .showcase .btn_buy { border-radius: 12px; padding: 0.85rem 1.8rem; } .showcase .btn_buy:hover { background-color: #0b2238; } .purchase_section { background-color: rgba(242, 142, 28, 0.06); padding: 4rem 0; } .purchase_section .price_item .txt h3 { color: #0b2238; font-size: 50px; font-weight: 600; } .purchase_section .price_item .txt h3 sup { font-size: 25px; } .purchase_section .price_item .txt p { color: #6c7a87; font-size: 16px; margin-bottom: 0; } .footer_rakon { background-color: #05111c; position: relative; overflow: hidden; padding: 4rem 0; } .footer_rakon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/rakon/curve.png"); background-repeat: no-repeat; opacity: 0.3; background-size: 100%; bottom: 0; z-index: 0; background-position: 0px -230px; } @media (max-width: 991px) { .footer_rakon:before { background-size: auto; } } @media (max-width: 767px) { .footer_rakon:before { background-position: center; background-size: cover; } } .footer_rakon .container { position: relative; z-index: 2; } .footer_rakon .item .ico { width: 60px; height: 60px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; } .footer_rakon .item .ico .tio { color: #ffffff; font-size: 24px; } .footer_rakon .item .title_sections { margin-bottom: 2rem; } .footer_rakon .item .title_sections h2 { color: #ffffff; } .footer_rakon .item .title_sections p { color: #9da6af; } .footer_rakon .copyright { text-align: center; margin-top: 3rem; } .footer_rakon .copyright p { color: #9da6af; font-size: 14px; margin-bottom: 0.4rem; } .footer_rakon .copyright p a { color: #ffffff; } .rakon_purchase { position: fixed; left: 40px; bottom: 40px; z-index: 999; } .rakon_purchase .btn_purch { position: relative; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .rakon_purchase .btn_purch .icon { width: 45px; height: 45px; display: inline-flex; justify-content: center; align-items: center; background-color: #89bd49; border-radius: 50%; vertical-align: sub; } .rakon_purchase .btn_purch .icon img { width: 18px; } .rakon_purchase .btn_purch .icon:before { content: ""; width: 60px; height: 60px; border-radius: 50%; display: block; position: absolute; background: rgba(137, 189, 73, 0.1); z-index: -1; -webkit-animation: pulse 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important; -moz-animation: pulse 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important; -o-animation: pulse 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important; -ms-animation: pulse 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important; animation: pulse 2.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important; } .rakon_purchase .btn_purch .txt { padding: 0 0.6rem; font-size: 15px; font-weight: 500; color: #ffffff; opacity: 0; display: inline-block; -webkit-transition: 0.5s !important; -moz-transition: 0.5s !important; -o-transition: 0.5s !important; -ms-transition: 0.5s !important; transition: 0.5s !important; } .rakon_purchase .btn_purch:after { content: ""; display: block; position: absolute; width: 65px; height: 65px; border-radius: 50px; background: rgba(137, 189, 73, 0.15); top: -4px; left: 2px; z-index: -1; -webkit-transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; -moz-transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; -o-transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; -ms-transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; } .rakon_purchase .btn_purch:hover .txt { opacity: 1; } .rakon_purchase .btn_purch:hover:after { border-radius: 50px; background: rgba(137, 189, 73, 0.85); width: 100%; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(1.6); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } @-moz-keyframes pulse { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(1.6); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } @keyframes pulse { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(1.6); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } @keyframes keyFrame (flash) { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } } @keyframes KeyFrame (flicker-1) { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } .upcoming__item { border-top: 1px solid #edeef1; padding-top: 4rem; margin-top: 2rem; } .upcoming__item .item { position: relative; } .upcoming__item .item .pic_show { padding: 0; background-color: none; } .upcoming__item .item .pic_show img { border-radius: 12px; width: 100%; } .upcoming__item .item .item_name { margin-top: 1.5rem; } .upcoming__item .item .item_name span { display: block; font-size: 14px; color: #6c7a87; margin-bottom: 0.5rem; } .upcoming__item .item .item_name h4 { color: #0b2238; font-weight: 600; font-size: 16px; margin-bottom: 1rem; } .upcoming__item .item .coming_soon { background-color: rgba(242, 142, 28, 0.1); color: #f28e1c; border-radius: 8px; padding: 0.6rem 1rem; font-size: 13px; height: max-content; } .demos_two { background-color: #f9f9f9; } .demos_two .item_preview { position: relative; margin-bottom: 2.5rem; } .demos_two .item_preview .img_cover { border-radius: 12px; border: 2px solid #ffffff; padding: 0.938rem; margin-bottom: 1.25rem; } .demos_two .item_preview .img_cover img { border-radius: 12px; width: 100%; -webkit-box-shadow: 0px 20px 40px 0px rgba(11, 34, 56, 0.06) !important; -moz-box-shadow: 0px 20px 40px 0px rgba(11, 34, 56, 0.06) !important; -o-box-shadow: 0px 20px 40px 0px rgba(11, 34, 56, 0.06) !important; -ms-box-shadow: 0px 20px 40px 0px rgba(11, 34, 56, 0.06) !important; box-shadow: 0px 20px 40px 0px rgba(11, 34, 56, 0.06) !important; -webkit-transition: 0.6s !important; -moz-transition: 0.6s !important; -o-transition: 0.6s !important; -ms-transition: 0.6s !important; transition: 0.6s !important; } .demos_two .item_preview .body_preivew span { display: block; font-size: 14px; color: #6c7a87; margin-bottom: 0.5rem; } .demos_two .item_preview .body_preivew h3 { font-size: 16px; font-weight: 500; color: #0b2238; margin-bottom: 0.938rem; } .demos_two .item_preview .body_preivew .links_preview a { display: inline-block; border-radius: 10px; font-size: 14px; color: #0b2238; background-color: rgba(11, 34, 56, 0.04); padding: 0.6rem 1.5rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; margin-right: 0.625rem; } .demos_two .item_preview .body_preivew .links_preview a:hover { color: #ffffff; background-color: #165df5; } .demos_two .item_preview:hover .img_cover img { -webkit-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.25) !important; -moz-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.25) !important; -o-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.25) !important; -ms-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.25) !important; box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.25) !important; } .demos_two .item_preview .latest_preview { position: absolute; border-radius: 8px; background-color: #f93542; color: #ffffff; font-size: 14px; top: -10px; left: 35px; padding: 0.4rem 1.2rem; -webkit-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -moz-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -o-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; -ms-box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; box-shadow: 0px 0px 30px 0px rgba(249, 53, 66, 0.2) !important; } .demos_two .upcoming_item .img_cover { padding: 0; border: 0; } .demos_two .upcoming_item .txt_comming { display: inline-block; border-radius: 8px; background-color: rgba(242, 142, 28, 0.1); color: #f28e1c; padding: 0.6rem 1.5rem; font-size: 14px; } html:not(.no-js) [data-aos="fade-up"] { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } /* ========= layout (Sections) ========== */ /* You can edit any section here (Layout) */ /* CSS Table of Sections -------------------------- ** Style header Default -------------------------- ** header-nav-center -------------------------- ** header-nav-left -------------------------- ** Fixed header -------------------------- ** header-Crypto -------------------------- ** header-Crypto Dark -------------------------- ** Fixed side menu -------------------------- ** header charity -------------------------- ** head_host -------------------------- ** demo_body_interior (header) -------------------------- ** header Charity - left -------------------------- ** header__workspace -------------------------- */ /*----------------------------- Style header Default -----------------------------*/ header { z-index: 9; position: fixed; top: 0; right: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(11, 34, 56, 0); -webkit-backdrop-filter: saturate(1) blur(20px) !important; -moz-backdrop-filter: saturate(1) blur(20px) !important; -o-backdrop-filter: saturate(1) blur(20px) !important; -ms-backdrop-filter: saturate(1) blur(20px) !important; backdrop-filter: saturate(1) blur(20px) !important; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } header.no_blur { -webkit-backdrop-filter: saturate(1) blur(0) !important; -moz-backdrop-filter: saturate(1) blur(0) !important; -o-backdrop-filter: saturate(1) blur(0) !important; -ms-backdrop-filter: saturate(1) blur(0) !important; backdrop-filter: saturate(1) blur(0) !important; } .fixed-header header { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(1) blur(20px) !important; -o-backdrop-filter: saturate(1) blur(20px) !important; -ms-backdrop-filter: saturate(1) blur(20px) !important; backdrop-filter: saturate(1) blur(20px) !important; border-bottom: 1px solid #edeef1; } @-moz-document url-prefix() { .fixed-header header { background: white; border-bottom: 0 !important; backdrop-filter: saturate(1) blur(0); box-shadow: 0px 10px 40px 0px rgba(11, 34, 56, 0.05); } } header .navbar { height: 80px; padding: 0; } header .navbar .navbar-brand { font-weight: 600; font-size: 22px; } header .navbar .navbar-brand .logo { vertical-align: bottom; margin-right: 0.5rem; width: 27px; } header .navbar .navbar-collapse { margin-top: 0.4rem; } header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { font-size: 16px; font-weight: 400; text-transform: capitalize; margin-right: 1.25rem; } header .navbar .navbar-collapse .nav_account .btn { font-size: 15px; } header .navbar .navbar-collapse .nav_account.btn_demo2 .btn_sm_primary { background-color: rgba(22, 93, 245, 0.1); color: #165df5; } header .navbar .navbar-collapse .nav_account.btn_demo3 .btn_sm_primary { border: 1px solid #edeef1; } @media (max-width: 991px) { header { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(1) blur(20px) !important; -moz-backdrop-filter: saturate(1) blur(20px) !important; -o-backdrop-filter: saturate(1) blur(20px) !important; -ms-backdrop-filter: saturate(1) blur(20px) !important; backdrop-filter: saturate(1) blur(20px) !important; } header .navbar-toggler:focus { border: 0; outline: 0; box-shadow: none; } header .navbar { height: auto; padding: 0.75rem; } header .navbar-brand { color: #0b2238 !important; font-size: 18px !important; } header .navbar-brand .logo { width: 24px !important; } header .navbar-collapse { margin-left: 0 !important; } header .navbar-collapse .navbar-nav { padding-bottom: 1rem; } header .navbar-collapse .navbar-nav .nav-item .nav-link { color: #0b2238 !important; } header .navbar-collapse .navbar-nav .nav-item .nav-link.active { color: #165df5 !important; } header .navbar-collapse .nav_account { border-top: 1px solid #edeef1; padding: 1rem 0; } header .navbar-collapse .nav_account .btn-default { color: #0b2238 !important; } header .navbar-collapse .nav_account .btn-primary { background-color: #165df5 !important; color: #ffffff !important; } } /*----------------------------- header-nav-center -----------------------------*/ .header-nav-center { width: 100%; left: 0; z-index: 12; } .header-nav-center .navbar-brand { color: #0b2238; } .header-nav-center .navbar-collapse .nav-item .nav-link { color: #0b2238; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .header-nav-center .navbar-collapse .nav-item .nav-link:hover { color: #165df5; } .header-nav-center .navbar-collapse .nav-item .nav-link.active { color: #165df5; background-color: transparent; } .header-nav-center .navbar-collapse .nav-item.active .nav-link { color: #165df5; background-color: transparent; } /*----------------------------- header-nav-left -----------------------------*/ .header-nav-left .navbar-collapse { margin-left: 2rem; } .header-nav-left.light .nav-pills .nav-item .nav-link { color: #ffffff; } .header-nav-left.light .nav-pills .nav-item .nav-link.active { color: #ffe7aa; } /*----------------------------- Fixed header -----------------------------*/ .fixed-header header.nav-product .navbar-brand { color: #0b2238 !important; } .fixed-header header.nav-product .nav-pills .nav-item .nav-link { color: #0b2238 !important; } .fixed-header header.nav-product .nav-pills .nav-item .nav-link.active { color: #165df5 !important; } .fixed-header header.nav-product .nav_account .btn-default { color: #0b2238 !important; } .fixed-header header.nav-product .nav_account .btn-primary { background-color: #165df5 !important; color: #ffffff !important; } .fixed-header .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { color: #ffffff; border-radius: 0; line-height: 54px; } .fixed-header .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active { -webkit-box-shadow: 0px 3px 0px 0px #165df5 !important; -moz-box-shadow: 0px 3px 0px 0px #165df5 !important; -o-box-shadow: 0px 3px 0px 0px #165df5 !important; -ms-box-shadow: 0px 3px 0px 0px #165df5 !important; box-shadow: 0px 3px 0px 0px #165df5 !important; } @media (max-width: 767px) { .fixed-header .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } } /*----------------------------- header-Crypto -----------------------------*/ .header-nav-left.crypto_1 .nav-pills .nav-item .nav-link.active { color: #fd6b3b !important; } .fixed-header .header-nav-left.crypto_1 .nav-pills .nav-item .nav-link.active { color: #fd6b3b !important; } .fixed-header .header-nav-left.crypto_1 .nav_account .btn-primary { background-color: #fd6b3b !important; } .header-nav-left.crypto_1 .nav_account .btn-primary { background-color: #fd6b3b !important; } /*----------------------------- header-Crypto Dark -----------------------------*/ .crypto_dark { background-color: transparent; position: absolute; -webkit-backdrop-filter: saturate(1) blur(0) !important; -moz-backdrop-filter: saturate(1) blur(0) !important; -o-backdrop-filter: saturate(1) blur(0) !important; -ms-backdrop-filter: saturate(1) blur(0) !important; backdrop-filter: saturate(1) blur(0) !important; } .crypto_dark .nav_account .btn_try { background-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff; } @media (max-width: 767px) { .crypto_dark .nav_account .btn_try { background-color: rgba(11, 34, 56, 0.1) !important; color: #0b2238 !important; } } @media (max-width: 767px) { .crypto_dark .nav_account .drop_download { display: none; background-color: rgba(11, 34, 56, 0.1); color: #0b2238; } } @media (max-width: 767px) { .crypto_dark .nav_account .btn-default { color: #0b2238; } } @media (max-width: 767px) { .crypto_dark { position: fixed; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(1) blur(20px) !important; -moz-backdrop-filter: saturate(1) blur(20px) !important; -o-backdrop-filter: saturate(1) blur(20px) !important; -ms-backdrop-filter: saturate(1) blur(20px) !important; backdrop-filter: saturate(1) blur(20px) !important; } @-moz-document url-prefix() { .crypto_dark { background: white; border-bottom: 0 !important; box-shadow: 0px 10px 40px 0px rgba(11, 34, 56, 0.05); } } } /*----------------------------- Fixed side menu -----------------------------*/ .fixed_side_menu { position: fixed !important; right: 1%; top: 35%; z-index: 3; } .fixed_side_menu .nav-item .nav-link { position: relative; color: #aa9bb3; font-size: 16px; direction: rtl; text-align: right; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .fixed_side_menu .nav-item .nav-link::before { content: ""; position: absolute; top: 1.1rem; right: -0.8rem; width: 5px; height: 5px; border-radius: 50%; background-color: #ffffff; opacity: 0; -webkit-transition: 3s !important; -moz-transition: 3s !important; -o-transition: 3s !important; -ms-transition: 3s !important; transition: 3s !important; } .fixed_side_menu .nav-item .nav-link.active { background-color: transparent; color: #ffffff; } .fixed_side_menu .nav-item .nav-link.active:before { opacity: 1; -webkit-animation: bounce-top 0.9s both !important; -moz-animation: bounce-top 0.9s both !important; -o-animation: bounce-top 0.9s both !important; -ms-animation: bounce-top 0.9s both !important; animation: bounce-top 0.9s both !important; } /*----------------------------- header charity -----------------------------*/ .gch_header_light { border-bottom: 1px solid rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: saturate(1) blur(0) !important; -moz-backdrop-filter: saturate(1) blur(0) !important; -o-backdrop-filter: saturate(1) blur(0) !important; -ms-backdrop-filter: saturate(1) blur(0) !important; backdrop-filter: saturate(1) blur(0) !important; } .gch_header_light .navbar-brand { color: #ffffff; } .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { color: #ffffff; border-radius: 0; line-height: 54px; } @media (max-width: 767px) { .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { line-height: inherit; } } .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active { -webkit-box-shadow: 0px 3px 0px 0px white !important; -moz-box-shadow: 0px 3px 0px 0px white !important; -o-box-shadow: 0px 3px 0px 0px white !important; -ms-box-shadow: 0px 3px 0px 0px white !important; box-shadow: 0px 3px 0px 0px white !important; } @media (max-width: 767px) { .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } } /*----------------------------- head_host -----------------------------*/ .head_host { border-bottom: 0; } .head_host .navbar .navbar-brand { color: #ffffff; } .head_host .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { color: #ffffff; } .head_host .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active { color: #165df5; } /*----------------------------- page interior - header -----------------------------*/ .demo_body_interior .header-nav-center { width: 96%; margin-left: auto; margin-right: auto; top: 45px; } @media (max-width: 767px) { .demo_body_interior .header-nav-center { top: 20px; } } .demo_body_interior.fixed-header .header-nav-center { top: 0; } /*----------------------------- header Charity - left -----------------------------*/ .header_ch_left .navbar-collapse { margin-left: 6.25rem; } .header_ch_left .navbar-collapse .nav-item .nav-link { color: #9da6af; } .header_ch_left .navbar-collapse .nav-item .nav-link:hover { color: #0b2238; } .header_ch_left .navbar-collapse .nav-item .nav-link.active { color: #fd6b3b; } /*----------------------------- header__workspace -----------------------------*/ .header__workspace .navbar-collapse { margin-left: 0; } .header__workspace .btn_demo3 .btn { border: 1px solid rgba(253, 107, 59, 0.25) !important; color: #fd6b3b; } /* CSS Table of Sections -------------------------- ** demo_1 -------------------------- ** demo_2 -------------------------- ** demo_3 -------------------------- ** demo_4 -------------------------- ** banner_demo4 -------------------------- ** banner_demo5 -------------------------- ** banner_demo6 -------------------------- ** banner_demo7 -------------------------- ** banner_demo8 -------------------------- ** banner_title -------------------------- ** demo__charity -------------------------- ** demo__workspace -------------------------- */ /*----------------------------- demo_1 -----------------------------*/ .demo_1.banner_section { background: #fef8f0; background: -moz-linear-gradient(360deg, rgba(254, 248, 240, 0) 0%, #fef8f0 100%); background: -webkit-linear-gradient(360deg, rgba(254, 248, 240, 0) 0%, #fef8f0 100%); background: linear-gradient(360deg, rgba(254, 248, 240, 0) 0%, #fef8f0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fef8f0",endColorstr="#fef8f0",GradientType=1); height: 100%; padding-top: 10rem; } @media (max-width: 767px) { .demo_1.banner_section { padding-top: 6rem; } } .demo_1.banner_section .banner_title { margin-bottom: 30px; } .demo_1.banner_section .banner_title h1 { color: #0b2238; } .demo_1.banner_section .banner_title p { color: #6c7a87; } .demo_1.banner_section .image_product { position: relative; } .demo_1.banner_section .image_product img { width: 90%; z-index: 1; position: relative; } .demo_1.banner_section .image_product:before { content: ""; background-image: url("../img/shape-before-web.svg"); background-repeat: no-repeat; background-size: contain; width: 150px; height: 100%; position: absolute; top: -5%; right: 0; z-index: 0; } /*----------------------------- demo_2 -----------------------------*/ .demo_2.banner_section { background-color: #0b2238; height: 100vh; padding-top: 10rem; position: relative; overflow: hidden; } @media (max-width: 767px) { .demo_2.banner_section { padding-top: 6rem; height: 100%; } } .demo_2.banner_section .fixed_overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 0; pointer-events: none; } .demo_2.banner_section .banner_title h1 { color: #ffe7aa; } .demo_2.banner_section .banner_title p { color: #9da6af; } /*----------------------------- demo_3 -----------------------------*/ .demo_3.banner_section { background-color: #381840; position: relative; overflow: hidden; height: 820px; padding: 10rem 0; } @media (max-width: 767px) { .demo_3.banner_section { height: 100%; padding-bottom: 3rem; padding-top: 6rem; } } .demo_3.banner_section .banner_title p { color: rgba(255, 255, 255, 0.5); } .demo_3.banner_section:before { content: ""; background-image: url("../img/shpaeboxes.svg"); background-repeat: no-repeat; position: absolute; top: 10%; left: 37%; height: 100%; width: 60%; background-size: contain; } @media (max-width: 767px) { .demo_3.banner_section:before { background-size: cover; width: 100%; } } .demo_3.banner_section::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='155.169' height='337.197' viewBox='0 0 155.169 337.197'%3E%3Cpath id='Subtraction_8' data-name='Subtraction 8' d='M-15081.832-6700H-15237v-337.2l108.524,304.006a50.185,50.185,0,0,0,46.645,33.188Z' transform='translate(15237.001 7037.196)' fill='%23fff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; position: absolute; bottom: -1px; left: 0; height: 30%; width: 100%; background-size: contain; } @media (max-width: 767px) { .demo_3.banner_section::after { display: none; } } .demo_3.banner_section .app_smartphone .btn--app .icon { background-color: transparent; margin-right: 0.2rem; } .demo_3 .img--elements img { position: absolute; top: -2%; left: 0; width: 923px; } @media (max-width: 767px) { .demo_3 .img--elements { display: none; } } /*----------------------------- demo_4 -----------------------------*/ .demo_4 { background-color: #29013e !important; height: 100% !important; -webkit-background: radial-gradient(circle, #2f0247 0%, rgba(47, 2, 71, 0) 83%, #29013e 100%) !important; -moz-background: radial-gradient(circle, #2f0247 0%, rgba(47, 2, 71, 0) 83%, #29013e 100%) !important; -o-background: radial-gradient(circle, #2f0247 0%, rgba(47, 2, 71, 0) 83%, #29013e 100%) !important; -ms-background: radial-gradient(circle, #2f0247 0%, rgba(47, 2, 71, 0) 83%, #29013e 100%) !important; background: radial-gradient(circle, #2f0247 0%, rgba(47, 2, 71, 0) 83%, #29013e 100%) !important; } .demo_4 .banner_title .offer { width: max-content; padding: 0.85rem 1.35rem; border-radius: 15px; background-color: rgba(255, 255, 255, 0.1); margin: auto; } .demo_4 .banner_title p { color: #aa9bb3 !important; } .demo_4 .button--click .avaliable { display: inline-block; color: #ffffff; font-size: 14px; margin-left: 0.75rem; } .demo_4 .img__head .illy { width: 100%; margin-top: -200px; } @media (max-width: 767px) { .demo_4 .img__head .illy { margin-top: -3rem; } } .demo_4 .Countdown-timer .item { display: inline-block; text-align: center; margin: 0 1.5rem; } .demo_4 .Countdown-timer .item span { font-size: 50px; font-weight: 500; color: #ffffff; } .demo_4 .Countdown-timer .item p { color: #aa9bb3; font-size: 18px; text-transform: capitalize; } .demo_4 .Countdown-timer .cuot { position: absolute; font-size: 50px; color: #ffffff; } /*----------------------------- banner_demo4 -----------------------------*/ .banner_demo4 { background-color: #ffffff !important; -webkit-background: none !important; -moz-background: none !important; -o-background: none !important; -ms-background: none !important; background: none !important; } .banner_demo4 .banner_title h1 { font-weight: 500; } .banner_demo4 .item_sm-about { margin: auto; } .banner_demo4 .item_sm-about p { width: 60%; color: #6c7a87; } .banner_demo4 .item_sm-about .btn-primary { min-width: 140px; padding: 0.85rem 1.6rem; text-align: center; display: inline-flex; justify-content: center; } .banner_demo4 .img_head_uniqe { position: relative; } .banner_demo4 .img_head_uniqe .bb_img { position: relative; } .banner_demo4 .img_head_uniqe .bb_img img { object-fit: cover; height: 640px; width: 100%; } @media (max-width: 991px) { .banner_demo4 .img_head_uniqe .bb_img img { height: 450px; } } .banner_demo4 .img_head_uniqe:after { content: ""; position: absolute; top: -10%; left: 40%; width: 123px; height: 123px; background-image: url("../img/best.png"); background-repeat: no-repeat; background-size: contain; z-index: 5; } .banner_demo4 .img_head_uniqe .list_aboutcompany { background-color: #4d81f7; padding: 2rem; position: absolute; bottom: -10%; right: 10%; } .banner_demo4 .img_head_uniqe .list_aboutcompany .item_xq { margin-bottom: 1rem; } .banner_demo4 .img_head_uniqe .list_aboutcompany .item_xq span { color: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: 400; } .banner_demo4 .img_head_uniqe .list_aboutcompany .item_xq h3 { color: #ffffff; font-size: 15px; margin-bottom: 0; font-weight: 400; margin-top: 0.5rem; } .banner_demo4 .img_head_uniqe .list_aboutcompany .item_xq a { color: #ffffff; display: block; } /*----------------------------- banner_demo5 -----------------------------*/ .banner_demo5 { height: 100vh !important; } .banner_demo5 .banner_title h1 { color: #ffffff !important; } @media (max-width: 767px) { .banner_demo5 .banner_title h1 { font-size: 2.125em; } } .banner_demo5 .banner_title p { color: rgba(255, 255, 255, 0.9) !important; } .banner_demo5 .Background { height: 100vh; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .banner_demo5 .Background:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; top: auto; bottom: 0; height: 200px; -webkit-background: linear-gradient(to top, #000000, rgba(35, 55, 77, 0)) !important; -moz-background: linear-gradient(to top, #000000, rgba(35, 55, 77, 0)) !important; -o-background: linear-gradient(to top, #000000, rgba(35, 55, 77, 0)) !important; -ms-background: linear-gradient(to top, #000000, rgba(35, 55, 77, 0)) !important; background: linear-gradient(to top, #000000, rgba(35, 55, 77, 0)) !important; } /*----------------------------- banner_demo6 -----------------------------*/ .banner_demo6 { background-image: url("../img/hosting/bg-hosting.png") !important; background-size: cover !important; width: 100%; height: 100% !important; min-height: 100vh !important; } .banner_demo6 .banner_title .offer { padding: 0.85rem 1.45rem; border-radius: 12px; background-color: rgba(255, 255, 255, 0.1); width: max-content; } .banner_demo6 .banner_title .prices span { display: block; font-size: 14px; color: #ffffff; margin-bottom: 0.3rem; } .banner_demo6 .banner_title .prices p { font-size: 25px; font-weight: 600; color: #ffffff; } .banner_demo6 .btn_watch { border-radius: 12px; padding: 0.85rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; } .banner_demo6 .btn_watch .tio { vertical-align: text-top; margin-right: 0.2rem; } /*----------------------------- banner_demo7 -----------------------------*/ .banner_demo7 { background: #ffe7aa !important; border-radius: 12px !important; margin-top: 5.625rem; padding-top: 0 !important; padding-bottom: 16rem; width: 93%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .banner_demo7 { padding-bottom: 2rem; } } .banner_demo7 .btn-video { width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; background-color: #0b2238; padding: 0; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .banner_demo7 .btn-video::after { content: ""; width: 70px; height: 70px; position: absolute; display: block; z-index: -1; background: rgba(11, 34, 56, 0.1); border-radius: 50%; } .banner_demo7 .btn-video::before { content: ""; position: absolute; border-radius: 50%; display: block; height: 100%; width: 100%; z-index: -1; background: rgba(11, 34, 56, 0.1); -webkit-animation: pulseRipple 2.5s ease-in-out infinite !important; -moz-animation: pulseRipple 2.5s ease-in-out infinite !important; -o-animation: pulseRipple 2.5s ease-in-out infinite !important; -ms-animation: pulseRipple 2.5s ease-in-out infinite !important; animation: pulseRipple 2.5s ease-in-out infinite !important; } .banner_demo7 .btn-video:focus { background-color: #0b2238; } .banner_demo7 .btn-video .tio { font-size: 24px; color: #ffffff; } .banner_demo7 .ill_05 { width: 100%; margin: 2rem 0; } /*----------------------------- banner_demo8 -----------------------------*/ .banner_demo8 { background: #ffffff !important; position: relative; overflow: hidden; } .banner_demo8 .subscribe_phone .btn_app { background-color: rgba(11, 34, 56, 0.13); border-radius: 8px; color: #ffffff; width: 100%; } .banner_demo8 .subscribe_phone .btn_app:hover { background-color: #0b2238; } .banner_demo8 .ill_appMobile { position: relative; z-index: 0; } .banner_demo8 .ill_appMobile .ill_app { width: 320px; display: flex; margin: auto; } @media (max-width: 767px) { .banner_demo8 .ill_appMobile .ill_app { width: 280px; } } .banner_demo8 .ill_appMobile .ill_bg { position: absolute; top: 15%; right: -15%; z-index: -1; } @media (max-width: 767px) { .banner_demo8 .ill_appMobile .ill_bg { width: 100%; } } .banner_demo8 .ill_appMobile .ill_user { position: absolute; top: -5%; right: 5%; } @media (max-width: 767px) { .banner_demo8 .ill_appMobile .ill_user { right: -5%; top: 5%; width: 100%; } } .banner_demo8 .ill_appMobile .try_it { position: absolute; bottom: 15%; right: 40%; } @media (max-width: 767px) { .banner_demo8 .ill_appMobile .try_it { right: 30%; } } /*----------------------------- banner_title -----------------------------*/ .banner_title h1 { font-size: 3.125rem; font-weight: 700; margin-bottom: 1.875rem; margin-top: 1.875rem; } .banner_title p { font-size: 1rem; font-weight: 400; margin-bottom: 1.875rem; } /*----------------------------- demo__charity -----------------------------*/ .demo__charity { padding-top: 7.5rem !important; } .demo__charity .btn_vdo_default { border: 1px solid #edeef1; font-size: 16px; } .demo__charity .btn_vdo_default svg { vertical-align: middle; width: 24px; } .demo__charity .btn_vdo_default svg path { fill: #fd6b3b; } .demo__charity .btn_vdo_default:hover { background-color: rgba(253, 107, 59, 0.05); color: #fd6b3b; border-color: transparent; } /*----------------------------- demo__workspace -----------------------------*/ .demo__workspace { background-color: rgba(88, 213, 211, 0.09); position: relative; height: 100%; } .demo__workspace::before { content: ""; background: url(../img/workspace/banner-abstract.png); left: 0; top: -10%; width: 100%; background-size: 98%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: -1; } @media (max-width: 991px) { .demo__workspace::before { background-size: cover; } } .demo__workspace .block__srarch { background-color: #ffffff; border-radius: 8px; padding: 2.5rem 1.875rem; } .demo__workspace .block__srarch .title__search { margin-bottom: 1.875rem; } .demo__workspace .block__srarch .title__search h2 { font-size: 20px; font-weight: 600; color: #0b2238; margin-bottom: 0.625rem; } .demo__workspace .block__srarch .title__search p { margin-bottom: 0; font-size: 14px; color: #6c7a87; } .demo__workspace .block__srarch .btn__search { width: 100%; border-radius: 8px; background-color: #fd6b3b; font-size: 15px; color: #ffffff; padding: 1.1rem; margin-top: 0.625rem; } .demo__workspace .bg__cover_office { margin-top: -40vh; } .demo__workspace .bg__cover_office .img__off img { width: 100%; height: 600px; object-fit: cover; } .demo__workspace .bg__cover_office .item__conatct { margin-top: -186px; } .demo__workspace .bg__cover_office .item__conatct .item__top { background-color: #12161b; padding: 2.5rem; border-top-left-radius: 8px; border-top-right-radius: 8px; } .demo__workspace .bg__cover_office .item__conatct .item__top h3 { font-size: 20px; color: #ffffff; margin-bottom: 0.625rem; font-weight: 500; } .demo__workspace .bg__cover_office .item__conatct .item__top p { color: #ffffff; font-size: 16px; font-weight: 400; margin-bottom: 0; } .demo__workspace .bg__cover_office .item__conatct .item__bottom { background-color: #ffffff; padding: 1.875rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .demo__workspace .bg__cover_office .item__conatct .item__bottom .person__peo { margin-bottom: 1.25rem; } .demo__workspace .bg__cover_office .item__conatct .item__bottom .person__peo img { width: 45px; height: 45px; object-fit: cover; margin-right: 0.938rem; border-radius: 50%; display: inline-block; } /* CSS Table of Sections -------------------------- ** logos_section -------------------------- ** logos-simple -------------------------- ** logos_demo2 -------------------------- ** logos_demo3 -------------------------- */ /*----------------------------- logos_section -----------------------------*/ .logos_section h3 { font-size: 16px; font-weight: 400; color: #6c7a87; margin-bottom: 2.5rem; } .logos_section .wrapper_logos { position: relative; direction: ltr; } .logos_section .wrapper_logos .bx-wrapper { min-width: 100%; } .logos_section .wrapper_logos .logos_masks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%) !important; -moz-background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%) !important; -o-background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%) !important; -ms-background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%) !important; background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%) !important; } .logos_section .items .item-client { margin: 0; position: relative; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .logos_section .items .item-client span { text-align: center; } @media (max-width: 991px) { .logos_section .items .item-client { display: inline-block; margin-bottom: 1.5rem; } } .logos_section .items .item-client img { width: 100px; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .logos_section .items .item-client span { position: absolute; top: 0; left: 0; right: 0; font-size: 14px; opacity: 0; color: #165df5; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .logos_section .items .item-client:hover img { opacity: 0; } .logos_section .items .item-client:hover span { opacity: 1; } /*----------------------------- logos-simple -----------------------------*/ .logos-simple a { margin-right: 1rem; } @media (max-width: 767px) { .logos-simple a { display: inline-flex; margin-bottom: 0.75rem; } } .logos-simple a img { width: 65px; } /*----------------------------- logos_demo2 -----------------------------*/ .logos_demo2 .item_logo { margin-bottom: 3.125rem; } .logos_demo2 .item_logo img { width: 180px; margin-bottom: 1rem; } .logos_demo2 .item_logo p { margin-bottom: 0; } /*----------------------------- logos_demo3 -----------------------------*/ .logos_demo3 { position: relative; background-color: #ffffff; margin-top: -10rem; } .logos_demo3 .items_loog .item-client { width: 154px; display: inline-block; margin: 0 1rem; } /* CSS Table of Sections -------------------------- ** services_section -------------------------- ** sevice_block -------------------------- ** support_item -------------------------- ** Interior Service -------------------------- ** gng_serv_about -------------------------- ** report_section -------------------------- ** hosting_service -------------------------- ** service_demo3 -------------------------- ** service_demo4 -------------------------- ** service_demo5 -------------------------- ** serv_app -------------------------- ** save__nature -------------------------- ** service__workspace -------------------------- ** service__about -------------------------- */ /*----------------------------- services_section -----------------------------*/ .services_section .items_serv .item-img { position: relative; background-image: url("../img/shape-before.svg"); background-repeat: no-repeat; display: block; width: 97px; height: 84px; margin: auto; margin-right: 1.875rem; display: flex; justify-content: center; align-items: center; } .services_section .items_serv .item-img img { width: 45px; margin-top: 2rem; text-align: center; } .services_section .items_serv .txt-small { margin-bottom: 10px; } .services_section .items_serv .txt-small span { font-size: 13px; color: rgba(11, 34, 56, 0.5); font-weight: 400; } .services_section .items_serv h3 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 10px; } .services_section .items_serv p { color: #6c7a87; font-size: 16px; font-weight: 400; margin-bottom: 0; } /*----------------------------- sevice_block -----------------------------*/ .sevice_block .icon--top { margin-bottom: 1.875rem !important; } .sevice_block .icon--top img { width: 60px; height: 60px; } /*----------------------------- support_item -----------------------------*/ .support_item .items_serv .icon--top { width: 60px; height: 60px; background-color: rgba(253, 107, 59, 0.07); display: flex; text-align: center; justify-content: center; border-radius: 15px; margin-bottom: 1.25rem; padding: 1rem; } .support_item .items_serv .icon--top img { width: auto; height: auto; } /*----------------------------- Interior Service -----------------------------*/ .gsb_serv_ig .items_serv .icon--top { position: relative; } .gsb_serv_ig .items_serv .icon--top img { position: relative; width: 50px; height: 50px; z-index: 1; } .gsb_serv_ig .items_serv .icon--top:before { content: ""; width: 40px; height: 45px; position: absolute; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47.177' height='45.713' viewBox='0 0 47.177 45.713'%3E%3Cpath id='Polygon_88' data-name='Polygon 88' d='M23.491,0A6,6,0,0,1,28.72,3.058l5.625,10a6,6,0,0,1,0,5.883l-5.625,10A6,6,0,0,1,23.491,32H12.509A6,6,0,0,1,7.28,28.942l-5.625-10a6,6,0,0,1,0-5.883l5.625-10A6,6,0,0,1,12.509,0Z' transform='translate(0 18) rotate(-30)' fill='%23f3c623'/%3E%3C/svg%3E%0A"); top: -18%; right: 40%; } .gsb_serv_ig .btn { text-align: center; border: 1px solid #edeef1 !important; background-color: transparent !important; color: #0b2238; min-width: 160px; } /*----------------------------- gng_serv_about -----------------------------*/ .gng_serv_about .item_ig { position: relative; } .gng_serv_about .item_ig .mg_img { overflow: hidden; position: relative; } .gng_serv_about .item_ig .mg_img img { height: 600px; object-fit: cover; -webkit-transition: all 0.4s !important; -moz-transition: all 0.4s !important; -o-transition: all 0.4s !important; -ms-transition: all 0.4s !important; transition: all 0.4s !important; -webkit-transform: scale3d(1, 1, 1) !important; -moz-transform: scale3d(1, 1, 1) !important; -o-transform: scale3d(1, 1, 1) !important; -ms-transform: scale3d(1, 1, 1) !important; transform: scale3d(1, 1, 1) !important; } @media (max-width: 991px) { .gng_serv_about .item_ig .mg_img img { width: 100%; } } .gng_serv_about .item_ig .mg_img:hover img { -webkit-transform: scale3d(1.1, 1.1, 1) !important; -moz-transform: scale3d(1.1, 1.1, 1) !important; -o-transform: scale3d(1.1, 1.1, 1) !important; -ms-transform: scale3d(1.1, 1.1, 1) !important; transform: scale3d(1.1, 1.1, 1) !important; } .gng_serv_about .item_ig .nq_about { position: absolute; background-color: #4d81f7; border-radius: 0; padding: 2.5rem 2rem; right: -5rem; top: 6rem; z-index: 2; } @media (max-width: 767px) { .gng_serv_about .item_ig .nq_about { right: 0 !important; top: 0; left: inherit !important; } } .gng_serv_about .item_ig .nq_about h3 { font-size: 18px; font-weight: 500; color: #ffffff; } .gng_serv_about .item_ig .nq_about .mg_locate { color: #ffffff; padding-top: 3rem; } .gng_serv_about .item_ig .nq_about .mg_locate span { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .gng_serv_about .item_ig .nq_about .mg_locate h4 { font-size: 15px; font-weight: 400; } .gng_serv_about .item_ig .nq_about.item_left { left: -5rem; right: initial; } .gng_serv_about .gr_txt p { font-size: 16px; color: #6c7a87; font-weight: 400; } /*----------------------------- report_section -----------------------------*/ .report_section .gsx_report { position: relative; border: 1px solid #edeef1; border-radius: 0; padding: 2rem; overflow: hidden; min-height: 280px; } .report_section .gsx_report .icon { margin-bottom: 4.5rem; z-index: 1; position: relative; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .report_section .gsx_report .icon path { -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .report_section .gsx_report .tio { position: absolute; right: 1.8rem; z-index: 3; color: #ffffff; top: 2rem; transform: rotate(-45deg); } .report_section .gsx_report .txt { z-index: 1; position: relative; } .report_section .gsx_report .txt h3 { color: #0b2238; font-size: 18px; margin-bottom: 1.25rem; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .report_section .gsx_report .txt p { font-size: 14px; color: #6c7a87; margin-bottom: 0; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .report_section .gsx_report .arrow_ico { height: 45px; width: 45px; border-radius: 100px; } .report_section .gsx_report .arrow_ico.arrow-one { background-color: #f7b816; position: absolute; top: 1rem; right: 1rem; } .report_section .gsx_report .arrow_ico.arrow-two { background-color: #eb2a37; position: absolute; top: 1rem; right: 1rem; } .report_section .gsx_report .arrow_ico.arrow-three { background-color: #0f54e8; position: absolute; top: 1rem; right: 1rem; } .report_section .gsx_report .arrow-small { height: 45px; width: 45px; border-radius: 100px; z-index: 2; position: absolute; top: 1rem; right: 1rem; } .report_section .gsx_report .arrow-small.arrow-one-small { background-color: #ffc329; } .report_section .gsx_report .arrow-small.arrow-two-small { background-color: #f93542; } .report_section .gsx_report .arrow-small.arrow-three-small { background-color: #165df5; } .report_section .gsx_report:hover .txt h3, .report_section .gsx_report:hover .txt p { color: #ffffff; } .report_section .gsx_report:hover .icon path { fill: #ffffff; } /*----------------------------- hosting_service -----------------------------*/ .hosting_service .img_title { margin-bottom: 1.5rem; } .hosting_service .img_title:before { content: ""; width: 440px; height: 440px; border-radius: 50%; background-color: #f7f8fa; position: absolute; left: -50%; z-index: -1; } .hosting_service .items_serv { margin-bottom: 3.125rem; } .hosting_service .items_serv .icon--top { background-color: rgba(22, 93, 245, 0.1); border-radius: 20px; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; } .hosting_service .items_serv .icon--top img { width: 24px; } .hosting_service .item:nth-of-type(2) .items_serv .icon--top { background-color: rgba(25, 163, 137, 0.1); } .hosting_service .item:nth-of-type(3) .items_serv .icon--top { background-color: rgba(249, 53, 66, 0.1); } .hosting_service .item:nth-of-type(4) .items_serv .icon--top { background-color: rgba(242, 142, 28, 0.1); } /*----------------------------- service_demo3 -----------------------------*/ .service_demo3 { background-color: rgba(11, 34, 56, 0.03); border-radius: 12px; width: 93%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; padding-bottom: 30rem !important; } @media (max-width: 767px) { .service_demo3 { padding-bottom: 4rem !important; } } .service_demo3:before { display: none; } /*----------------------------- service_demo4 -----------------------------*/ .service_demo4 { padding-top: 14rem; } .service_demo4 .item_slide.panel { width: 15%; } .service_demo4 .item_slide .block_img .block_item .block__title { font-size: 30px; font-weight: 600; color: #0b2238; text-transform: capitalize; } .service_demo4 .item_slide .block_img .block_item .block__title .hover-reveal { position: static; } .service_demo4 .item_slide .block_img .block_item .block__title:hover { color: #ffffff !important; } .service_demo4 .item_slide .block_img .block_item .hover-reveal__img { width: 360px; height: 480px; border-radius: 12px; object-fit: cover; position: absolute; top: -100%; z-index: -1; } /*----------------------------- service_demo5 -----------------------------*/ .service_demo5 .items_serv { padding: 2rem 1.5rem; } .service_demo5 .items_serv .item-img { border-radius: 50%; width: 65px; height: 65px; } .service_demo5 .items_serv .item-img img { width: 24px; margin: 0; } .service_demo5 .items_serv h3 { margin-bottom: 0; } .service_demo5 .items_serv.selected { position: relative; border: 1px solid #edeef1; border-radius: 25px; background-color: #ffffff; } .service_demo5 .items_serv.selected:before { content: ""; display: block; width: 348px; border: 1px solid #edeef1; border-radius: 25px; height: 140px; position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } @media (max-width: 991px) { .service_demo5 .items_serv.selected:before { width: 329px; height: 150px; } } .service_demo5 .items_serv.selected:hover:before { height: 120px; } .service_demo5 .beta:nth-of-type(1) .item-img { background: #fe8e69; } .service_demo5 .beta:nth-of-type(2) .item-img { background: #9786cf; } .service_demo5 .beta:nth-of-type(3) .item-img { background: #63cfbb; } /*----------------------------- serv_app -----------------------------*/ .serv_app .amo_pic { background-color: #ffe7aa; border-radius: 50px; position: relative; overflow: hidden; height: 500px; display: flex; justify-content: center; align-items: center; } @media (max-width: 767px) { .serv_app .amo_pic { height: 350px; } } .serv_app .amo_pic img { width: 330px; display: flex; justify-content: center; align-items: center; position: absolute; top: 90px; } @media (max-width: 767px) { .serv_app .amo_pic img { width: 230px; } } .serv_app .app_smartphone .btn--app .icon { border: 1px solid #edeef1; background-color: transparent; border-radius: 20px; display: flex; justify-content: center; align-items: center; } .serv_app .app_smartphone .btn--app .icon .tio { color: #6f5fa6; } /*----------------------------- save__nature -----------------------------*/ .save__nature .item__nature { border: 1px solid transparent; padding: 3.125rem; border-radius: 12px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .save__nature .item__nature .items_serv .icon--top { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 12px; } .save__nature .item__nature .items_serv .icon--top svg { width: 24px; height: 24px; } .save__nature .item__nature .items_serv .icon--top svg path { fill: #ffffff; } .save__nature .item__nature .items_serv .icon--top::before { content: ""; position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; border-radius: 12px; } .save__nature .item__nature .items_serv .btn__link { margin-top: 1.875rem; background-color: #7bd88a; color: #ffffff; position: relative; bottom: -20px; opacity: 0; -webkit-transition: 0.35s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.35s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.35s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.35s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.35s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } .save__nature .item__nature:first-of-type .items_serv .icon--top { background-color: #3c7ff1; } .save__nature .item__nature:first-of-type .items_serv .icon--top::before { background: linear-gradient(rgba(60, 127, 241, 0.15), rgba(60, 127, 241, 0)); } .save__nature .item__nature:nth-of-type(2) .items_serv .icon--top { background-color: #f74c58; } .save__nature .item__nature:nth-of-type(2) .items_serv .icon--top::before { background: linear-gradient(rgba(247, 76, 88, 0.15), rgba(247, 76, 88, 0)); } .save__nature .item__nature:nth-of-type(3) .items_serv .icon--top { background-color: #f7cc62; } .save__nature .item__nature:nth-of-type(3) .items_serv .icon--top::before { background: linear-gradient(rgba(247, 204, 98, 0.15), rgba(247, 204, 98, 0)); } .save__nature .item__nature:hover .btn__link { bottom: 0; opacity: 1; } .save__nature .item__nature.active { border-color: #edeef1; } .save__nature .item__nature.active .btn__link { bottom: 0; opacity: 1; } /*----------------------------- service__workspace -----------------------------*/ .service__workspace { background-color: rgba(88, 213, 211, 0.09); position: relative; overflow: hidden; } .service__workspace::before { content: ""; position: absolute; width: 100%; height: 100%; background-size: 100%; background-image: url("../img/workspace/serv_abstract.png"); background-repeat: no-repeat; bottom: 0; left: -7%; z-index: -1; } @media (max-width: 991px) { .service__workspace::before { background-size: cover; bottom: -90px; left: -80px; } } .service__workspace .inside__zoop { padding-right: 4.375rem; } .service__workspace .inside__zoop .ico { position: relative; width: 60px; height: 60px; display: flex; justify-content: center; align-content: center; background-repeat: no-repeat; border-radius: 8px; margin-right: 1.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23fd6b3b' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23fd6b3b' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23fd6b3b' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .service__workspace .inside__zoop .ico .tio { font-size: 24px; margin-top: 8px; color: #fd6b3b; } .service__workspace .inside__zoop .t_xt h4 { font-size: 20px; margin-bottom: 0; margin-top: 6px; } .service__workspace .block__item:nth-of-type(2) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23165DF5' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23165DF5' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23165DF5' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .service__workspace .block__item:nth-of-type(2) .inside__zoop .ico .tio { color: #165df5; } .service__workspace .block__item:nth-of-type(3) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%2331D1AB' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%2331D1AB' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%2331D1AB' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .service__workspace .block__item:nth-of-type(3) .inside__zoop .ico .tio { color: #31d1ab; } /*----------------------------- service__about -----------------------------*/ .service__about .body__tab { margin-top: 3.75rem; } @media (max-width: 991px) { .service__about .body__tab { margin-top: 1.25rem; } } .service__about .body__tab .nav-pills { margin-top: 4.375rem; } @media (max-width: 991px) { .service__about .body__tab .nav-pills { margin-top: 1.25rem; flex-direction: row !important; } } .service__about .body__tab .nav-pills .nav-link { background-color: transparent; color: #6c7a87; font-size: 20px; padding: 1.563rem 0; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 991px) { .service__about .body__tab .nav-pills .nav-link { padding: 0 1.563rem 1.563rem 0; } } .service__about .body__tab .nav-pills .nav-link.active { color: #0b2238; } .service__about .body__tab .block_video .cover_video { position: relative; } .service__about .body__tab .block_video .cover_video img { width: 100%; height: 450px; object-fit: cover; border-radius: 8px; } .service__about .body__tab .block_video .cover_video .icon_played { position: absolute; top: 45%; left: 45%; } .service__about .body__tab .block_video .cover_video .icon_played .play_video { background-color: #12161b; } .service__about .body__tab .block_video .cover_video .icon_played .play_video::after { display: none; } .service__about .body__tab .block_video .cover_video .icon_played .play_video::before { background: rgba(18, 22, 27, 0.15); } .service__about .body__tab .block_video .about__info { margin-top: 1.875rem; } .service__about .body__tab .block_video .about__info p { font-size: 18px; color: #6c7a87; } .service__about .body__tab .block_video .about__info a { display: block; color: #fd6b3b; margin-top: 1.25rem; font-size: 16px; } .service__about .body__tab .block_video .about__info a .tio { vertical-align: middle; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; display: inline-block; } .service__about .body__tab .block_video .about__info a:hover .tio { margin-left: 0.5rem; } /* CSS Table of Sections -------------------------- ** features_section -------------------------- ** feature_app -------------------------- ** upgrade_item -------------------------- ** Feature_dark_crypto -------------------------- ** install_app -------------------------- ** features_hosting -------------------------- ** feature_demo2 -------------------------- ** feature_dem3 -------------------------- ** section__stories -------------------------- ** feature__demo4 -------------------------- ** features__workspace -------------------------- */ /*----------------------------- features_section -----------------------------*/ .features_section .list-group .list-group-item { display: inline-flex; padding-left: 0; } .features_section .list-group .list-group-item img { margin-right: 0.5rem; } .features_section .list-group .list-group-item .record_outlined { font-weight: 800; font-size: 20px; margin-top: 0.1rem; } .features_section .images_desc { position: relative; } .features_section .images_desc img { width: 100%; z-index: 1; position: relative; } .features_section .images_desc:before { content: ""; background-image: url("../img/shape-before-web.svg"); background-repeat: no-repeat; background-size: contain; width: 150px; height: 100%; position: absolute; top: 6%; left: 7%; z-index: 0; } /*----------------------------- feature_app -----------------------------*/ .feature_app { background-color: rgba(56, 24, 64, 0.05); } .feature_app .app--crypto { width: 100%; -webkit-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important; -mo-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important; -o-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important; -ms-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important; box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important; -webkit-border-radius: 52px !important; -mo-border-radius: 52px !important; -o-border-radius: 52px !important; -ms-border-radius: 52px !important; border-radius: 52px !important; } .feature_app .item-feat { margin-bottom: 7rem; } @media (max-width: 991px) { .feature_app .item-feat { direction: ltr; margin-bottom: 2rem; } } .feature_app .item-feat .icon-iim { width: 60px; height: 60px; background-color: #ffffff; display: flex; text-align: center; justify-content: center; border-radius: 15px; margin-bottom: 1.25rem; padding: 1rem; } .feature_app .item-feat h3 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 10px; } .feature_app .item-feat p { font-size: 16px; font-weight: 400; color: #6c7a87; } /*----------------------------- upgrade_item -----------------------------*/ .upgrade_item .images img { width: 100%; } .upgrade_item .title_sections .before_title span { color: #fd6b3b; } .upgrade_item .list-group-item { font-weight: 500; font-size: 18px; } .upgrade_item .list-group-item .tio { vertical-align: middle; margin-top: 0.3rem; } .upgrade_item .link-more { color: #165df5; font-size: 18px; font-weight: 500; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .upgrade_item .link-more .tio { color: #0b2238; vertical-align: middle; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .upgrade_item .link-more:hover .tio { padding-left: 0.35rem; } /*----------------------------- Feature_dark_crypto -----------------------------*/ .Feature_dark_crypto { background-color: #29013e !important; } .Feature_dark_crypto .title_sections .before_title span:first-child { color: #ffffff; } .Feature_dark_crypto .title_sections .before_title span:last-child { color: #fd4ffe; } .Feature_dark_crypto .title_sections p { color: #aa9bb3 !important; } .Feature_dark_crypto .button--click .btn-token { margin: 0; } .Feature_dark_crypto .item_pro .icon_t { border-radius: 15px !important; } .Feature_dark_crypto .item_pro .icon_t img { width: 30px; } /*----------------------------- install_app -----------------------------*/ .install_app .images { display: flex; justify-content: center; align-items: center; } .install_app .title_sections .before_title span:first-child { color: #ffffff; } .install_app .title_sections .before_title span:last-child { color: #fd4ffe; } .install_app .title_sections p { color: #aa9bb3; } .install_app .list-group .list-group-item { background-color: transparent; color: #ffffff; padding-left: 0; display: flex; align-items: center; } .install_app .list-group .list-group-item .tio { color: #6bb0f8; font-size: 20px; } .install_app .app_smartphone .icon { background-color: rgba(255, 255, 255, 0.1) !important; } .install_app .app_smartphone .txt div span { color: #aa9bb3; } .install_app .device_others span { color: #aa9bb3; font-size: 12px; } .install_app .device_others p { color: #ffffff; font-size: 18px; margin-bottom: 0.5rem; } .install_app .device_others .soon { color: #aa9bb3; font-size: 14px; } .install_app .item_tokens .name-coin span { font-size: 16px; font-weight: 500; color: #ffffff; } .install_app .item_tokens .name-coin h3 { color: #aa9bb3; font-size: 14px; font-weight: 400; margin-top: 0.3rem; margin-bottom: 0; } .install_app .item_tokens .item_progress { margin-bottom: 1.75rem; } .install_app .item_tokens .item_progress span { font-size: 16px; font-weight: 500; color: #ffffff; } .install_app .item_tokens .item_progress h3 { color: #aa9bb3; font-size: 14px; font-weight: 400; margin-top: 0.25rem; margin-bottom: 0; } .install_app .item_tokens .item_progress .progress { margin-top: 0.8rem; height: 0.3rem; background-color: rgba(255, 255, 255, 0.1); } .install_app .item_tokens .item_progress .progress .progress-bar { border-radius: 15px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .install_app .item_tokens .item_progress .progress .progress-bar.bg-full { background-color: #4ffef8; } .install_app .item_tokens .item_progress .progress .progress-bar.bg-mov { background-color: #fd4ffe; } .install_app .item_tokens .item_progress .progress .progress-bar.bg-medium { background-color: #1bea9e; } .install_app .item_tokens .item_progress .progress .progress-bar.bg-weak { background-color: #f8b26b; } .install_app .item_tokens .item_progress .progress .progress-bar.bg-weak2 { background-color: #f86b6b; } /*----------------------------- features_hosting -----------------------------*/ .features_hosting { background-color: rgba(11, 34, 56, 0.03) !important; } .features_hosting:before { content: ""; background-image: url("../img/hosting/14301.png"); width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 0; opacity: 0.03; } .features_hosting .title_sections h2 { color: #0b2238 !important; } .features_hosting .title_sections p { color: #6c7a87 !important; } .features_hosting .item:nth-of-type(1) .item_pro .icon_t { background-color: #165df5; } .features_hosting .item:nth-of-type(2) .item_pro .icon_t { background-color: #2abba2; } .features_hosting .item:nth-of-type(3) .item_pro .icon_t { background-color: #ff5733; } .features_hosting .item:nth-of-type(4) .item_pro .icon_t { background-color: #fcbf1e; } .features_hosting .item:nth-of-type(5) .item_pro .icon_t { background-color: #f93542; } .features_hosting .item:nth-of-type(6) .item_pro .icon_t { background-color: #0e9aa7; } .features_hosting .item_pro .icon_t { border-radius: 20px !important; } .features_hosting .item_pro .icon_t img { width: 24px; } .features_hosting .item_pro h3 { color: #0b2238 !important; } /*----------------------------- feature_demo2 -----------------------------*/ .feature_demo2 { background-color: rgba(11, 34, 56, 0.03); position: relative; overflow: hidden; } .feature_demo2 .z_apps { margin: 2.5rem 0; } .feature_demo2 .z_apps .item__app { padding: 0.8rem 1.25rem; border-radius: 12px; background-color: #0b2238; display: inline-block; width: 180px; margin: 0 0.5rem; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .feature_demo2 .z_apps .item__app .icon { font-size: 24px; width: 24px; color: #ffffff; margin: auto; margin-right: 1rem; } .feature_demo2 .z_apps .item__app .txt { margin: auto; text-align: left; } .feature_demo2 .z_apps .item__app .txt span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.8); margin-bottom: 2px; font-weight: 400; } .feature_demo2 .z_apps .item__app .txt h4 { font-size: 18px; margin-bottom: 0; color: #ffffff; font-weight: 400; } .feature_demo2 .z_apps .item__app.bg_apple { background-color: #6f5fa6; } .feature_demo2 .z_apps .item__app.bg_apple:hover { -webkit-box-shadow: 0px 45px 40px -20px rgba(111, 95, 166, 0.25) !important; -moz-box-shadow: 0px 45px 40px -20px rgba(111, 95, 166, 0.25) !important; -o-box-shadow: 0px 45px 40px -20px rgba(111, 95, 166, 0.25) !important; -ms-box-shadow: 0px 45px 40px -20px rgba(111, 95, 166, 0.25) !important; box-shadow: 0px 45px 40px -20px rgba(111, 95, 166, 0.25) !important; } .feature_demo2 .z_apps .item__app.bg_google { border: 1px solid rgba(11, 34, 56, 0.08); background-color: transparent; } .feature_demo2 .z_apps .item__app.bg_google:hover { background-color: #ffffff; -webkit-box-shadow: 0px 45px 40px -20px rgba(11, 34, 56, 0.09) !important; -moz-box-shadow: 0px 45px 40px -20px rgba(11, 34, 56, 0.09) !important; -o-box-shadow: 0px 45px 40px -20px rgba(11, 34, 56, 0.09) !important; -ms-box-shadow: 0px 45px 40px -20px rgba(11, 34, 56, 0.09) !important; box-shadow: 0px 45px 40px -20px rgba(11, 34, 56, 0.09) !important; } .feature_demo2 .z_apps .item__app.bg_google span { color: rgba(11, 34, 56, 0.8); } .feature_demo2 .z_apps .item__app.bg_google h4 { color: #0b2238; } .feature_demo2 .app_mobile .apoo { width: 100%; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } .feature_demo2 .app_mobile:before { content: ""; width: 470px; height: 470px; border-radius: 50%; background-color: #ffe7aa; display: block; position: absolute; left: -10%; top: 30%; z-index: -1; } .feature_demo2 .item_box { position: absolute; } .feature_demo2 .item_box .img_bbo img { width: 143px; height: 200px; border-radius: 12px; object-fit: cover; margin-bottom: 0.75rem; } .feature_demo2 .item_box h3 { font-size: 14px; font-weight: 400; color: #0b2238; margin-bottom: 5px; } .feature_demo2 .item_box p { font-size: 13px; } .feature_demo2 .item_box.item_one { top: 20%; left: 35%; } .feature_demo2 .item_box.item_two { top: 60%; left: 35%; } .feature_demo2 .item_box.item_three { top: 38%; left: -18%; opacity: 0.6; } .feature_demo2 .item_box.item_four { top: 20%; right: 35%; } .feature_demo2 .item_box.item_five { top: 60%; right: 35%; } .feature_demo2 .item_box.item_six { top: 38%; right: -18%; opacity: 0.6; } /*----------------------------- feature_dem3 -----------------------------*/ .feature_dem3 { background-color: rgba(11, 34, 56, 0.03); } .feature_dem3 .item_feth .icon_fr { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 1.875rem; background-color: #f28e1c; } .feature_dem3 .item_feth .icon_fr img { width: 24px; } .feature_dem3 .item_feth .za_tzt h3 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 10px; } .feature_dem3 .item_feth .za_tzt p { color: #6c7a87; font-size: 16px; font-weight: 400; margin-bottom: 0; } .feature_dem3 .Oitem:nth-of-type(1) .icon_fr { background-color: #fe7ec7; } .feature_dem3 .Oitem:nth-of-type(2) .icon_fr { background-color: #a97df7; } .feature_dem3 .Oitem:nth-of-type(3) .icon_fr { background-color: #63cfbb; } .feature_dem3 .Oitem:nth-of-type(4) .icon_fr { background-color: #f9656f; } .feature_dem3 .Oitem:nth-of-type(5) .icon_fr { background-color: #5287f8; } .feature_dem3 .Oitem:nth-of-type(6) .icon_fr { background-color: #f9ae57; } /*----------------------------- section__stories -----------------------------*/ .section__stories .swip__topic { margin-bottom: 5rem; } .section__stories .swip__topic .swipe_basic_topic .item .ico__top { width: 50px; height: 50px; border-radius: 12px; display: inline-flex; justify-content: center; align-items: center; margin-right: 1.25rem; background-color: #7bd88a; } .section__stories .swip__topic .swipe_basic_topic .item .ico__top svg { width: 24px; height: 24px; } .section__stories .swip__topic .swipe_basic_topic .item .ico__top svg path, .section__stories .swip__topic .swipe_basic_topic .item .ico__top svg rect, .section__stories .swip__topic .swipe_basic_topic .item .ico__top svg circle { fill: #ffffff; } .section__stories .swip__topic .swipe_basic_topic .item .t_text h3 { font-size: 25px; font-weight: 500; color: #0b2238; margin-bottom: 0.313rem; } .section__stories .swip__topic .swipe_basic_topic .item .t_text span { display: block; font-size: 13px; color: #6c7a87; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:first-of-type .item .ico__top { background-color: #7bd88a; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:nth-of-type(2) .item .ico__top { background-color: #6f5fa6; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:nth-of-type(3) .item .ico__top { background-color: #3c7ff1; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:nth-of-type(4) .item .ico__top { background-color: #f7cc62; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:nth-of-type(5) .item .ico__top { background-color: #f74c58; } .section__stories .swip__topic .swipe_basic_topic .swiper-slide:nth-of-type(6) .item .ico__top { background-color: #ff5593; } .section__stories .swip__stories .feature_strories .title_sections { margin-bottom: 2.5rem; } .section__stories .swip__stories .feature_strories .item { overflow: hidden; position: relative; display: block; text-decoration: none; border-radius: 12px; } .section__stories .swip__stories .feature_strories .item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0), black); opacity: 0; -webkit-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } @media (max-width: 991px) { .section__stories .swip__stories .feature_strories .item::before { background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); opacity: 1; } } .section__stories .swip__stories .feature_strories .item:hover::before { opacity: 1; } .section__stories .swip__stories .feature_strories .item:hover .inf__txt { opacity: 1; } .section__stories .swip__stories .feature_strories .item:hover .inf__txt span, .section__stories .swip__stories .feature_strories .item:hover .inf__txt h3, .section__stories .swip__stories .feature_strories .item:hover .inf__txt time { transform: translateY(0); } .section__stories .swip__stories .feature_strories .item .img__nature { overflow: hidden; } .section__stories .swip__stories .feature_strories .item .img__nature img { height: 378px; width: 100%; border-radius: 12px; object-fit: cover; } .section__stories .swip__stories .feature_strories .item .inf__txt { position: absolute; bottom: 1.875rem; left: 1.563rem; right: 1.563rem; opacity: 0; -webkit-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.5s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } @media (max-width: 991px) { .section__stories .swip__stories .feature_strories .item .inf__txt { opacity: 1; } } @media (max-width: 991px) { .section__stories .swip__stories .feature_strories .item .inf__txt span, .section__stories .swip__stories .feature_strories .item .inf__txt h3, .section__stories .swip__stories .feature_strories .item .inf__txt time { transform: translateY(0) !important; } } .section__stories .swip__stories .feature_strories .item .inf__txt span { color: #fd6b3b; font-size: 13px; display: block; margin-bottom: 0.625rem; transform: translateY(20px); -webkit-transition: 0.25s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.25s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.25s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.25s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.25s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } .section__stories .swip__stories .feature_strories .item .inf__txt h3 { color: #ffffff; font-size: 20px; font-weight: 500; margin-bottom: 0.625rem; transform: translateY(20px); -webkit-transition: 0.45s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.45s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.45s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.45s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.45s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } .section__stories .swip__stories .feature_strories .item .inf__txt time { font-size: 13px; display: block; color: #ffffff; font-weight: 400; opacity: 0.5; transform: translateY(20px); -webkit-transition: 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -moz-transition: 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -o-transition: 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) !important; -ms-transition: 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) !important; transition: 0.65s cubic-bezier(0.65, 0.05, 0.36, 1) !important; } .section__stories .swip__stories .feature_strories .swiper-button-next, .section__stories .swip__stories .feature_strories .swiper-button-prev { width: 45px; height: 45px; border-radius: 50%; background-color: rgba(11, 34, 56, 0.05); display: flex; justify-content: center; align-items: center; top: 23px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .section__stories .swip__stories .feature_strories .swiper-button-next, .section__stories .swip__stories .feature_strories .swiper-button-prev { top: 55%; background-color: rgba(255, 255, 255, 0.2); } } .section__stories .swip__stories .feature_strories .swiper-button-next .tio, .section__stories .swip__stories .feature_strories .swiper-button-prev .tio { font-size: 18px; color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .section__stories .swip__stories .feature_strories .swiper-button-next .tio, .section__stories .swip__stories .feature_strories .swiper-button-prev .tio { color: #ffffff; } } .section__stories .swip__stories .feature_strories .swiper-button-next::after, .section__stories .swip__stories .feature_strories .swiper-button-prev::after { display: none; } .section__stories .swip__stories .feature_strories .swiper-button-next:hover, .section__stories .swip__stories .feature_strories .swiper-button-prev:hover { background-color: #0b2238; } @media (max-width: 767px) { .section__stories .swip__stories .feature_strories .swiper-button-next:hover, .section__stories .swip__stories .feature_strories .swiper-button-prev:hover { background-color: #ffffff; } } .section__stories .swip__stories .feature_strories .swiper-button-next:hover .tio, .section__stories .swip__stories .feature_strories .swiper-button-prev:hover .tio { color: #ffffff; } @media (max-width: 767px) { .section__stories .swip__stories .feature_strories .swiper-button-next:hover .tio, .section__stories .swip__stories .feature_strories .swiper-button-prev:hover .tio { color: #0b2238; } } .section__stories .swip__stories .feature_strories .swiper-button-prev { right: 4.5rem; left: inherit; } @media (max-width: 767px) { .section__stories .swip__stories .feature_strories .swiper-button-prev { right: auto; left: 10px; } } /*----------------------------- feature__demo4 -----------------------------*/ .feature__demo4 .item__nature { padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 30px !important; padding-left: 15px !important; margin-bottom: 3.125rem; } @media (max-width: 767px) { .feature__demo4 .item__nature { padding-right: 15px !important; } } .feature__demo4 .item__nature .icon--top::before { display: none; } .feature__demo4 .item__nature .icon--top svg { width: 22px !important; height: 22px !important; } .feature__demo4 .item__nature:first-of-type .icon--top { background-color: #6f5fa6 !important; } .feature__demo4 .item__nature:nth-of-type(2) .icon--top { background-color: #3c7ff1 !important; } .feature__demo4 .item__nature:nth-of-type(3) .icon--top { background-color: #7bd88a !important; } .feature__demo4 .item__nature:nth-of-type(4) .icon--top { background-color: #f74c58 !important; } .feature__demo4 .item__nature:nth-of-type(5) .icon--top { background-color: #f7cc62 !important; } .feature__demo4 .item__nature:nth-of-type(6) .icon--top { background-color: #ff5593 !important; } /*----------------------------- features__workspace -----------------------------*/ .features__workspace { background-color: rgba(255, 231, 170, 0.09); } .features__workspace::before { display: none; } .features__workspace .inside__zoop { padding-right: 0; margin-bottom: 3.125rem; } .features__workspace .inside__zoop .t_xt h4 { margin-bottom: 0.375rem; } .features__workspace .inside__zoop .t_xt p { margin-bottom: 0; color: #6c7a87; } .features__workspace .fa_item:nth-of-type(2) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%2331D1AB' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%2331D1AB' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%2331D1AB' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(2) .inside__zoop .ico .tio { color: #31d1ab; } .features__workspace .fa_item:nth-of-type(3) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%236F5FA6' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%236F5FA6' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%236F5FA6' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(3) .inside__zoop .ico .tio { color: #6f5fa6; } .features__workspace .fa_item:nth-of-type(4) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23165DF5' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23165DF5' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23165DF5' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(4) .inside__zoop .ico .tio { color: #165df5; } .features__workspace .fa_item:nth-of-type(5) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23F93542' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23F93542' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23F93542' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(5) .inside__zoop .ico .tio { color: #f93542; } .features__workspace .fa_item:nth-of-type(6) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FF53D6' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23FF53D6' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23FF53D6' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(6) .inside__zoop .ico .tio { color: #ff53d6; } .features__workspace .fa_item:nth-of-type(7) .inside__zoop { margin-bottom: 0; } @media (max-width: 767px) { .features__workspace .fa_item:nth-of-type(7) .inside__zoop { margin-bottom: 3.125rem; } } .features__workspace .fa_item:nth-of-type(7) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23b52b65' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%23b52b65' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%23b52b65' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(7) .inside__zoop .ico .tio { color: #b52b65; } .features__workspace .fa_item:nth-of-type(8) .inside__zoop { margin-bottom: 0; } .features__workspace .fa_item:nth-of-type(8) .inside__zoop .ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='60' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='0.5' x2='0.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%2399B898' stop-opacity='0.102'/%3E%3Cstop offset='1' stop-color='%2399B898' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='bg_ico' transform='translate(-169 -1220)'%3E%3Crect id='Rectangle_356' data-name='Rectangle 356' width='60' height='60' rx='8' transform='translate(169 1220)' fill='%2399B898' opacity='0.1'/%3E%3Cpath id='Path_1555' data-name='Path 1555' d='M23,0H37L60,16a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8Z' transform='translate(169 1256)' fill='url(%23linear-gradient)'/%3E%3C/g%3E%3C/svg%3E%0A"); } .features__workspace .fa_item:nth-of-type(8) .inside__zoop .ico .tio { color: #99b898; } /* CSS Table of Sections -------------------------- ** Sass Product -------------------------- ** product_demo2 -------------------------- ** products_App -------------------------- ** product_demo3 - Crypto currency -------------------------- ** Works images -------------------------- ** Charity -------------------------- ** product_demo4 -------------------------- ** works_demo2 -------------------------- ** section__priorities -------------------------- ** product__office -------------------------- */ /*----------------------------- Sass Product -----------------------------*/ .products_section { background-color: #05173f; } .products_section .title_sections h2 { color: #ffffff; } .products_section .title_sections p { color: #ffffff; } .products_section .item_pro .icon_t { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='63' viewBox='0 0 73 63'%3E%3Cpath id='Polygon_60' data-name='Polygon 60' d='M44.376,0A18,18,0,0,1,59.951,8.976l7.821,13.5a18,18,0,0,1,0,18.047l-7.821,13.5A18,18,0,0,1,44.376,63H28.624a18,18,0,0,1-15.575-8.976l-7.821-13.5a18,18,0,0,1,0-18.047l7.821-13.5A18,18,0,0,1,28.624,0Z' fill='%23fff' opacity='0.05'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; width: 73px; height: 63px; position: relative; margin-bottom: 1.875rem; display: flex; justify-content: center; align-items: center; } .products_section .item_pro .icon_t .tio { color: #ffffff; font-size: 25px; text-align: center; } .products_section .item_pro h3 { font-size: 20px; font-weight: 500; color: #ffffff; margin-bottom: 10px; } .products_section .item_pro p { color: #9da6af; font-size: 16px; font-weight: 400; margin-bottom: 0; } .products_section .item_link p { color: #ffffff; } .products_section .item_link .btn_more { border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; padding: 0.6rem 1.6rem; } /*----------------------------- product_demo2 -----------------------------*/ .product_demo2 { position: relative; overflow: hidden; background-color: #0b2238; } .product_demo2 .img--overlay { position: absolute; right: -7%; top: 0; pointer-events: none; } @media (max-width: 767px) { .product_demo2 .img--overlay { right: -35%; } } .product_demo2 .fixed_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; } .product_demo2 .item_pro .icon_t { background-image: none !important; background-color: rgba(255, 255, 255, 0.05); width: 60px; height: 60px; border-radius: 25px; position: inherit; display: flex; justify-content: center; align-items: center; } .product_demo2 .item_pro .icon_t span { text-align: center; text-align: center; } /*----------------------------- products_App -----------------------------*/ .productsapp_section { position: relative; background-color: #ffffff; } .productsapp_section::before { content: ""; background-color: #ffffff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .productsapp_section .title_sections { margin-bottom: 2rem; } .productsapp_section .product--app { background-color: #0b2238; border-radius: 8px; padding: 7.5rem 9.25rem; position: relative; overflow: hidden; width: 95%; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .productsapp_section .product--app { width: 100%; padding: 2rem 0.5rem; } } .productsapp_section .product--app .fixed_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .productsapp_section .product--app .Whangaehu { position: absolute; right: -100%; top: -15%; } @media (max-width: 991px) { .productsapp_section .product--app .Whangaehu { left: 70%; top: -40%; } } @media (max-width: 767px) { .productsapp_section .product--app .Whangaehu { left: 50%; top: -40%; } } .productsapp_section .product--app .mobile_app { position: relative; padding-top: 3rem; } @media (max-width: 991px) { .productsapp_section .product--app .mobile_app { height: 520px; } } .productsapp_section .product--app .mobile_app img { width: 279px; height: 554px; } .productsapp_section .product--app .mobile_app .forward { position: absolute; z-index: 1; } .productsapp_section .product--app .mobile_app .back { position: absolute; z-index: 0; } /*----------------------------- product_demo3 - Crypto currency -----------------------------*/ .product_demo3 { background-color: #ffffff; } .product_demo3 .illustration { transform: rotate(15deg); position: relative; z-index: 0; left: -2rem; } @media (max-width: 767px) { .product_demo3 .illustration { width: 100%; } } .product_demo3 .btn-primary { position: relative; z-index: 1; } .product_demo3 .item_pro img { margin-bottom: 1.875rem; } .product_demo3 .item_pro h3 { color: #0b2238; } /*----------------------------- Works images -----------------------------*/ .gk_works_pro .flex-grid { padding-top: 1rem; } .gk_works_pro .flex-grid .rowgrid { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0; } .gk_works_pro .flex-grid .rowgrid .column { -ms-flex: 25%; /* IE10 */ flex: 25%; padding: 0; margin: 0 20px 0 0; } @media (max-width: 767px) { .gk_works_pro .flex-grid .rowgrid .column { -ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 25% !important; display: flex !important; } } .gk_works_pro .flex-grid .rowgrid .column img { vertical-align: middle; width: 100%; object-fit: cover; border-radius: 8px; } @media (max-width: 767px) { .gk_works_pro .flex-grid .rowgrid .column img { height: 380px !important; width: 100% !important; margin-top: inherit !important; margin-left: inherit !important; margin: inherit !important; } } .gk_works_pro .flex-grid .rowgrid .column.co_one { max-width: 600px; } .gk_works_pro .flex-grid .rowgrid .column.co_one img { height: 692px; width: 600px; } .gk_works_pro .flex-grid .rowgrid .column.co_two { display: inline-grid; max-width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_two img { height: 336px; width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_two img:nth-child(2) { margin-top: 20px; } .gk_works_pro .flex-grid .rowgrid .column.co_three { display: inline-grid; max-width: 450px; position: relative; } .gk_works_pro .flex-grid .rowgrid .column.co_three img { height: 336px; width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_three img:nth-child(2) { margin-top: 20px; padding-bottom: 115px; } .gk_works_pro .flex-grid .rowgrid .column.co_three .txt_scroll { margin-left: 50px; color: #6c7a87; font-size: 16px; position: absolute; bottom: 40px; } .gk_works_pro .flex-grid .rowgrid .column.co_four { display: inline-grid; max-width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_four img { height: 336px; width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_four img:nth-child(2) { margin-top: 20px; } .gk_works_pro .flex-grid .rowgrid .column.co_five { display: inline-grid; max-width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_five img { height: 336px; width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_five img:nth-child(2) { margin-top: 20px; } .gk_works_pro .flex-grid .rowgrid .column.co_six { display: inline-grid; max-width: 655px; } .gk_works_pro .flex-grid .rowgrid .column.co_six img { height: 692px; width: 655px; } .gk_works_pro .flex-grid .rowgrid .column.co_seven { display: inline-grid; } .gk_works_pro .flex-grid .rowgrid .column.co_seven img { height: 336px; width: 450px; } .gk_works_pro .flex-grid .rowgrid .column.co_seven img:nth-child(2) { margin-top: 20px; } /*----------------------------- Charity -----------------------------*/ .gna_product { position: relative; } .gna_product .gt_line { height: 5px; background-color: #ffc329; position: absolute; top: 0; width: 55%; } /*----------------------------- product_demo4 -----------------------------*/ .product_demo4 { background-color: #ffffff !important; } .product_demo4 .item_full { margin-left: -10%; } @media (max-width: 991px) { .product_demo4 .item_full { margin-left: auto; } } .product_demo4 .img_produc img { border-radius: 12px; height: 695px; width: 100%; object-fit: cover; object-position: right; } @media (max-width: 991px) { .product_demo4 .img_produc img { height: 100%; object-position: center; margin-bottom: 2rem; } } .product_demo4 .title_sections { margin-bottom: 2.5rem; } .product_demo4 .title_sections h2 { color: #0b2238; } .product_demo4 .title_sections p { color: #6c7a87; } .product_demo4 .item_pro .icon_t { border-radius: 20px; background-color: rgba(22, 93, 245, 0.1); } .product_demo4 .item_pro h3 { color: #0b2238; } .product_demo4 .item_pro.item_red .icon_t { background-color: rgba(249, 53, 66, 0.1); } /*----------------------------- works_demo2 -----------------------------*/ .works_demo2 { margin-top: -30rem; } @media (max-width: 767px) { .works_demo2 { margin-top: 0; } } .works_demo2 .title_sections { margin-bottom: 3.125rem; } .works_demo2 .item_mywork { margin-bottom: 3.125rem; display: block; text-decoration: none; } .works_demo2 .item_mywork .mg_img { border-radius: 12px; position: relative; } .works_demo2 .item_mywork .icon_played { position: absolute; left: 40%; top: 40%; z-index: 2; } .works_demo2 .item_mywork .item_pic { width: 100%; height: 490px !important; object-fit: cover; border-radius: 12px; } .works_demo2 .item_mywork .info_work { margin-top: 1.5rem; position: relative; } .works_demo2 .item_mywork .info_work h4 { font-size: 18px; margin-bottom: 0.3rem; font-weight: 600; color: #0b2238; } .works_demo2 .item_mywork .info_work p { font-weight: 400; font-size: 14px; margin-bottom: 0; color: #6c7a87; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .works_demo2 .item_mywork .info_work .link_view { opacity: 0; color: #165df5; font-weight: 500; font-size: 14px; position: absolute; left: 0; bottom: -22px; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .works_demo2 .item_mywork:hover .info_work p { opacity: 0; } .works_demo2 .item_mywork:hover .info_work .link_view { opacity: 1; bottom: -3px; } /*----------------------------- section__priorities -----------------------------*/ .section__priorities .title_sections { margin-bottom: 2.5rem; } .section__priorities .point__item .item__ico { margin-bottom: 1.875rem; } .section__priorities .point__item .item__ico .icon__ch { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #edeef1; display: flex; justify-content: center; align-items: center; margin-bottom: 1.25rem; } .section__priorities .point__item .item__ico .icon__ch svg { width: 20px; height: 20px; } .section__priorities .point__item .item__ico .icon__ch svg path { fill: #0b2238; } .section__priorities .point__item .item__ico h3 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 0; } /*----------------------------- product__office -----------------------------*/ .product__office .boo__item { display: block; text-decoration: none; } .product__office .boo__item .img__off { position: relative; overflow: hidden; border-radius: 8px; } .product__office .boo__item img { width: 100%; border-radius: 8px; height: 250px; object-fit: cover; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; -webkit-transform: scale3d(1, 1, 1) !important; -moz-transform: scale3d(1, 1, 1) !important; -o-transform: scale3d(1, 1, 1) !important; -ms-transform: scale3d(1, 1, 1) !important; transform: scale3d(1, 1, 1) !important; } .product__office .boo__item .body__txt { margin-top: 1.25rem; } .product__office .boo__item .body__txt .title_txt h4 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 0.188rem; } .product__office .boo__item .body__txt .title_txt p { font-size: 13px; color: #6c7a87; font-weight: 400; margin-bottom: 0; } .product__office .boo__item .body__txt .price { color: #fd6b3b; font-size: 18px; font-weight: 500; } .product__office .boo__item .body__txt .desc_txt { margin-top: 1.25rem; display: inline-block; margin-right: 2.5rem; } .product__office .boo__item .body__txt .desc_txt h5 { margin-bottom: 0.313rem; } .product__office .boo__item:hover .img__off img { -webkit-transform: scale3d(1.1, 1.1, 1) !important; -moz-transform: scale3d(1.1, 1.1, 1) !important; -o-transform: scale3d(1.1, 1.1, 1) !important; -ms-transform: scale3d(1.1, 1.1, 1) !important; transform: scale3d(1.1, 1.1, 1) !important; } .product__office .other__office { margin-top: 3.125rem; } .product__office .other__office h3 { font-size: 20px; color: #0b2238; margin-bottom: 0.625rem; font-weight: 500; } .product__office .other__office p { font-size: 14px; color: #6c7a87; margin-bottom: 1.875rem; } .product__office .other__office .btn::before { background: #fd6b3b; } /* CSS Table of Sections -------------------------- ** Slide_horizontal_scroll -------------------------- */ /*----------------------------- Slide_horizontal_scroll -----------------------------*/ .Slide_horizontal_scroll { position: relative; height: 100%; width: 100%; } .Slide_horizontal_scroll .title_svg { width: 100%; position: absolute; left: -5%; top: 0; } .Slide_horizontal_scroll .item_slide .block_img { margin: 0 2rem 0 0; position: relative; } .Slide_horizontal_scroll .item_slide .block_img .item__name { position: absolute; width: 100%; height: 100%; top: 0; right: 0; left: 0; background: #020c20; background: -moz-linear-gradient(360deg, rgba(2, 12, 32, 0.45) 0%, rgba(2, 12, 32, 0) 100%); background: -webkit-linear-gradient(360deg, rgba(2, 12, 32, 0.45) 0%, rgba(2, 12, 32, 0) 100%); background: linear-gradient(360deg, rgba(2, 12, 32, 0.45) 0%, rgba(2, 12, 32, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020c20",endColorstr="#020c20",GradientType=1); opacity: 0; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .Slide_horizontal_scroll .item_slide .block_img .item__name .txt { position: absolute; text-align: left; bottom: 5%; left: 5%; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .Slide_horizontal_scroll .item_slide .block_img .item__name .txt h4 { text-align: left; color: #ffffff; font-size: 30px; } .Slide_horizontal_scroll .item_slide .block_img .item__name .txt .txt1 { transform: translateY(20px); transition: transform 0.5s cubic-bezier(0.42, 0, 0, 0.99), -webkit-transform 0.5s cubic-bezier(0.42, 0, 0.03, 0.99); } .Slide_horizontal_scroll .item_slide .block_img .item__name .txt .txt2 { transform: translateY(30px); transition: transform 0.7s cubic-bezier(0.42, 0, 0, 0.99), -webkit-transform 0.7s cubic-bezier(0.42, 0, 0.03, 0.99); } .Slide_horizontal_scroll .item_slide .block_img img { width: 100%; object-fit: cover; border-radius: 10px; } .Slide_horizontal_scroll .item_slide .block_img:hover .item__name { opacity: 1; } .Slide_horizontal_scroll .item_slide .block_img:hover .item__name .txt1 { transform: translateY(0); } .Slide_horizontal_scroll .item_slide .block_img:hover .item__name .txt2 { transform: translateY(0); } #pinContainer { overflow: hidden; -webkit-perspective: 1000; perspective: 1000; } #slideContainer { width: 412%; } @media (max-width: 767px) { #slideContainer { width: 1590%; } } #slideContainer .row { display: block; } .panel { padding: 4rem 0 0 0; width: 20%; float: left; text-align: center; } @media (max-width: 767px) { .panel { width: 15%; } } /* CSS Table of Sections -------------------------- ** toggle_switch -------------------------- ** pricing_section -------------------------- ** pricing_demo2 -------------------------- ** pricing_demo3 -------------------------- ** options_pricing -------------------------- */ /*----------------------------- toggle_switch -----------------------------*/ .toggle_switch .toggler { display: inline-block; vertical-align: middle; color: #6c7a87; font-weight: 500; font-size: 16px; cursor: pointer; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .toggle_switch .toggler.toggler--is-active { color: #0b2238; } .toggle_switch .toggle { display: inline-block; vertical-align: middle; position: relative; width: 65px; height: 35px; border-radius: 100px; background-color: transparent; border: 1px solid rgba(11, 34, 56, 0.1); overflow: hidden; margin: 0 0.75rem; } .toggle_switch .toggle .check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 6; } .toggle_switch .toggle .check:checked ~ .switch { right: 8px; left: 50.5%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0.1s, 0s; } .toggle_switch .toggle .switch { position: absolute; left: 8px; top: 5px; bottom: 5px; right: 50.5%; background-color: #165df5; border-radius: 36px; z-index: 1; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0s, 0.1s; } .toggle_switch .toggle .switch:before { content: ""; display: block; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cg id='Ellipse_9' data-name='Ellipse 9' fill='none' stroke='%23fff' stroke-width='1'%3E%3Ccircle cx='7.5' cy='7.5' r='7.5' stroke='none'/%3E%3Ccircle cx='7.5' cy='7.5' r='7' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; width: 15px; height: 15px; top: 20%; left: 17%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0.1s, 0s; } .toggle_switch .yearly { position: relative; } .toggle_switch .yearly .offer { position: absolute; background-color: rgba(23, 231, 155, 0.1); color: #17e79b; padding: 0.35rem; width: 78px; top: -1rem; left: 3rem; font-size: 12px; font-weight: 400; } @media (max-width: 767px) { .toggle_switch .yearly .offer { top: -2rem; left: 0rem; } } /*----------------------------- pricing_section -----------------------------*/ .pricing_section .blocks_pricing.hide { display: none; } .pricing_section .blocks_pricing div div:first-of-type .item__price { background-color: #d0dfff; } .pricing_section .blocks_pricing div div:nth-of-type(2) .item__price { background-color: #fff4d8; } .pricing_section .blocks_pricing div div:nth-of-type(3) .item__price { background-color: #ffe4db; } .pricing_section .blocks_pricing .item__price { border-radius: 8px; position: relative; padding: 2.5rem 2rem; text-align: center; height: 550px; } @media (max-width: 991px) { .pricing_section .blocks_pricing .item__price { height: auto; margin-bottom: 2rem; } } .pricing_section .blocks_pricing .item__price.popular { position: relative; } .pricing_section .blocks_pricing .item__price.popular .icon_popular { position: absolute; top: -1.8%; right: 6%; width: 155px; } @media (max-width: 991px) { .pricing_section .blocks_pricing .item__price.popular .icon_popular { top: -1.1%; } } .pricing_section .blocks_pricing .item__price .logo_price { align-items: center; text-align: -webkit-center; text-align: -moz-center; display: flex; justify-content: center; margin-bottom: 1.5rem; } .pricing_section .blocks_pricing .item__price .logo_price .icon_gif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='94' height='81' viewBox='0 0 94 81'%3E%3Cpath id='Polygon_60' data-name='Polygon 60' d='M60.134,0A18,18,0,0,1,75.7,8.966l13.056,22.5a18,18,0,0,1,0,18.068L75.7,72.034A18,18,0,0,1,60.134,81H33.866A18,18,0,0,1,18.3,72.034L5.242,49.534a18,18,0,0,1,0-18.068L18.3,8.966A18,18,0,0,1,33.866,0Z' fill='%23fff'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; width: 94px; height: 81px; display: flex; justify-content: center; align-items: center; } .pricing_section .blocks_pricing .item__price .logo_price .icon_gif .gif { text-align: center; width: 40px; } .pricing_section .blocks_pricing .item__price .name_p { font-size: 25px; font-weight: 600; color: #0b2238; margin-bottom: 1.875rem; } .pricing_section .blocks_pricing .item__price .number { margin-bottom: 1.875rem; } .pricing_section .blocks_pricing .item__price .number .n_price { -webkit-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -moz-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -o-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -ms-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; font-size: 50px; font-weight: 600; color: #0b2238; position: relative; } .pricing_section .blocks_pricing .item__price .number .coins { position: absolute; color: #6c7a87; font-size: 20px; font-weight: 600; } .pricing_section .blocks_pricing .item__price .number .per { color: #6c7a87; font-size: 14px; font-weight: 400; } .pricing_section .blocks_pricing .item__price .info_price { color: #6c7a87; font-size: 16px; font-weight: 400; margin-bottom: 0; } .pricing_section .blocks_pricing .item__price .feature_price { padding: 1.875rem 0; background-color: #ffffff; border-radius: 8px; margin-top: 1.875rem; -webkit-box-shadow: 0px 30px 40px -33px rgba(4, 36, 104, 0.07) !important; -moz-box-shadow: 0px 30px 40px -33px rgba(4, 36, 104, 0.07) !important; -o-box-shadow: 0px 30px 40px -33px rgba(4, 36, 104, 0.07) !important; -ms-box-shadow: 0px 30px 40px -33px rgba(4, 36, 104, 0.07) !important; box-shadow: 0px 30px 40px -33px rgba(4, 36, 104, 0.07) !important; } .pricing_section .blocks_pricing .item__price .feature_price .list-group { border: 0; text-align: left; padding: 0; } .pricing_section .blocks_pricing .item__price .feature_price .list-group .list-group-item { border: 0; font-size: 16px; font-weight: 4000; padding: 0.75 1.25rem; } .pricing_section .blocks_pricing .item__price .feature_price .list-group .list-group-item .tio { vertical-align: text-top; color: #17e79b; font-size: 18px; margin-right: 0.3rem; } .pricing_section .blocks_pricing .item__price .feature_price .list-group .list-group-item:first-child { padding-top: 0; } .pricing_section .blocks_pricing .item__price .feature_price .list-group .list-group-item:last-child { padding-bottom: 0; } .pricing_section .blocks_pricing .item__price .feature_price .btn { margin: 1.875rem 0 0 0; font-size: 15px; font-weight: 400; } /*----------------------------- pricing_demo2 -----------------------------*/ .pricing_demo2 { position: relative; background-color: #ffffff; } .pricing_demo2 .blocks_pricing .item__price { border: 1px solid rgba(11, 34, 56, 0.05); background-color: transparent !important; height: auto; } .pricing_demo2 .blocks_pricing .item__price .feature_price { padding: 0; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } .pricing_demo2 .blocks_pricing .item__price .feature_price .list-group { padding: 0; } .pricing_demo2 .blocks_pricing .item__price .feature_price .list-group .disable { color: #6c7a87; } .pricing_demo2 .blocks_pricing .item__price .feature_price .list-group .disable .tio { color: #6c7a87; } .pricing_demo2 .blocks_pricing .item__price.popular { position: relative; } .pricing_demo2 .blocks_pricing .item__price.popular .icon_popular { position: absolute; top: 0; right: 0; width: 45px; } /*----------------------------- pricing_demo3 -----------------------------*/ .pricing_demo3 .nav-pills { margin-top: 2.5rem; text-align: center; justify-content: center; } .pricing_demo3 .nav-pills .nav-item .nav-link { background-color: #ffffff; padding: 1rem 2rem; border-radius: 8px; color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .pricing_demo3 .nav-pills .nav-item .nav-link.active { background-color: rgba(249, 53, 66, 0.1); color: #f93542; } .pricing_demo3 .blocks_pricing .item__price { border-radius: 12px !important; } .pricing_demo3 .blocks_pricing .item__price.popular { -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .pricing_demo3 .blocks_pricing .item__price.popular:hover { -webkit-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.04) !important; -moz-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.04) !important; -o-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.04) !important; -ms-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.04) !important; box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.04) !important; } .pricing_demo3 .blocks_pricing .item__price .number .duration { font-size: 30px; color: #9da6af; padding-left: 0.5rem; font-weight: 600; } .pricing_demo3 .blocks_pricing .logo_price .icon_gif { height: 100px !important; width: 100px !important; border-radius: 50%; background-color: rgba(11, 34, 56, 0.02); background-image: none !important; } .pricing_demo3 .blocks_pricing .feature_price { text-align: center; } .pricing_demo3 .blocks_pricing .feature_price ul li { text-align: center; } .pricing_demo3 .blocks_pricing .btn { border-radius: 12px; padding: 0.8rem 1.9rem !important; } /*----------------------------- options_pricing -----------------------------*/ .options_pricing .title_sections { margin-bottom: 2.5rem; } .options_pricing .tabs_price .nav-pills { background-color: rgba(22, 93, 245, 0.05); border-radius: 8px; padding: 0.65rem; width: max-content; } .options_pricing .tabs_price .nav-pills .nav-item .nav-link { color: #165df5; border-radius: 8px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .options_pricing .tabs_price .nav-pills .nav-item .nav-link.active { color: #ffffff; background-color: #165df5; } .options_pricing .blocks_pricing .item__price { border: 0; width: max-content; } @media (max-width: 767px) { .options_pricing .blocks_pricing .item__price { width: 100%; } } .options_pricing .blocks_pricing .item__price .btn_tryit { border: 1px solid #edeef1; color: #165df5; margin-top: 1.5rem; } .options_pricing .blocks_pricing .item__price.is_best { background-color: #165df5 !important; position: relative; } .options_pricing .blocks_pricing .item__price.is_best::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/bg-cubic.svg); opacity: 0.12; background-repeat: no-repeat; background-size: cover; background-position: 16% 20%; z-index: 0; pointer-events: none; } .options_pricing .blocks_pricing .item__price.is_best .name_p { color: #ffffff; } .options_pricing .blocks_pricing .item__price.is_best .number span { color: #ffffff; } .options_pricing .blocks_pricing .item__price.is_best .number span.per { opacity: 0.7; } .options_pricing .blocks_pricing .item__price.is_best .btn_tryit { background-color: #ffffff; color: #0b2238; border: 0; } .options_pricing .table_pricing { margin-top: 3.125rem; } .options_pricing .table_pricing label { background-color: #f7f8fa; border-radius: 8px; padding: 1.25rem; font-size: 16px; color: #6c7a87; width: 100%; } .options_pricing .table_pricing .table:before { display: none; } .options_pricing .table_pricing .table tbody tr td { text-align: center; vertical-align: middle; border-bottom: 1px solid #edeef1; } .options_pricing .table_pricing .table tbody tr td:first-child { text-align: left; width: 35%; } .options_pricing .table_pricing .table tbody tr:last-of-type td { border-bottom: 0; padding-bottom: 0; } .options_pricing .table_pricing .table .check_ico { width: 50px; height: 50px; border-radius: 20px; background-color: rgba(23, 231, 155, 0.1); display: inline-flex; justify-content: center; align-items: center; } .options_pricing .table_pricing .table .check_ico .tio { color: #17e79b; font-size: 24px; } /* CSS Table of Sections -------------------------- ** faq_section -------------------------- ** faq_demo2 -------------------------- ** faq_demodark (dark crypto) -------------------------- ** faq_demo3 -------------------------- ** faq_demo4 -------------------------- ** faq_demo5 -------------------------- */ /*----------------------------- faq_section -----------------------------*/ .faq_section { background-color: #f7f8fa; padding-top: 25rem; padding-bottom: 7.5rem; margin-top: -15rem; } @media (max-width: 991px) { .faq_section { padding-top: 12rem; } } .faq_section .accordion .card { border-radius: 8px; border: 0; margin-bottom: 1rem; } .faq_section .accordion .card .card-header { border-color: #edeef1; background-color: #ffffff; border-radius: 8px; border-bottom: 0; } .faq_section .accordion .card .card-header .btn-link { display: contents; } .faq_section .accordion .card .card-header .btn-link::before { font-family: "The-Icon-of" !important; content: "\e9b1"; float: right; margin-top: 0.4rem; font-size: 20px; color: #6c7a87; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .faq_section .accordion .card .card-header.active .btn-link::before { -webkit-transform: rotate(180deg) !important; -moz-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; -ms-transform: rotate(180deg) !important; transform: rotate(180deg) !important; } .faq_section .accordion .card .card-header h3 .btn-link { color: #0b2238; font-size: 16px; font-weight: 500; text-decoration: none; } .faq_section .accordion .card .card-header h3 .btn-link:hover { text-decoration: none; } .faq_section .accordion .card .card-body p { font-size: 14px !important; color: #6c7a87 !important; font-weight: 400 !important; } /*----------------------------- faq_demo2 -----------------------------*/ .faq_demo2 .item_list { margin-bottom: 2rem; } .faq_demo2 .item_list h4 { font-size: 18px; font-weight: 500; color: #0b2238; margin-bottom: 1.25rem; } .faq_demo2 .item_list p { font-size: 14px; color: #6c7a87; font-weight: 400; } /*----------------------------- faq_demodark (dark crypto) -----------------------------*/ .faq_demodark { background-color: transparent; padding-bottom: 0; } .faq_demodark .block_faq .accordion .card { background-color: #340e48; } .faq_demodark .block_faq .accordion .card .card-header { background-color: #340e48; } .faq_demodark .block_faq .accordion .card .card-header.active { border: 1px solid rgba(253, 79, 254, 0.18); border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .faq_demodark .block_faq .accordion .card .card-header.active ~ div { border: 1px solid rgba(253, 79, 254, 0.18); border-top: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .faq_demodark .block_faq .accordion .card .card-header .btn-link { color: #ffffff; } .faq_demodark .block_faq .accordion .card .card-body p { color: #aa9bb3 !important; } /*----------------------------- faq_demo3 -----------------------------*/ .faq_demo3 { position: relative; background-color: #ffffff; margin-top: -10rem; z-index: 2; padding-top: 0; padding-bottom: 0; -webkit-box-shadow: 0px -200px 60px -200px rgba(11, 34, 56, 0.04) !important; -moz-box-shadow: 0px -200px 60px -200px rgba(11, 34, 56, 0.04) !important; -o-box-shadow: 0px -200px 60px -200px rgba(11, 34, 56, 0.04) !important; -ms-box-shadow: 0px -200px 60px -200px rgba(11, 34, 56, 0.04) !important; box-shadow: 0px -200px 60px -200px rgba(11, 34, 56, 0.04) !important; } @media (max-width: 991px) { .faq_demo3 { -webkit-box-shadow: 0px -100px 60px -100px rgba(11, 34, 56, 0.04) !important; -moz-box-shadow: 0px -100px 60px -100px rgba(11, 34, 56, 0.04) !important; -o-box-shadow: 0px -100px 60px -100px rgba(11, 34, 56, 0.04) !important; -ms-box-shadow: 0px -100px 60px -100px rgba(11, 34, 56, 0.04) !important; box-shadow: 0px -100px 60px -100px rgba(11, 34, 56, 0.04) !important; margin-top: -5rem; } } .faq_demo3 .block_faq .card { border: 1px solid #edeef1; } /*----------------------------- faq_demo4 -----------------------------*/ .faq_demo4 { background-color: rgba(11, 34, 56, 0.03); padding-bottom: 7.5rem; } .faq_demo4 .item_list h4:before { content: ""; width: 13px; height: 15px; border-radius: 4px; background-color: #ffe7aa; display: inline-block; position: absolute; left: -5px; } @media (max-width: 767px) { .faq_demo4 .item_list h4:before { left: 0; } } /*----------------------------- faq_demo5 -----------------------------*/ .faq_demo5 { margin-top: 0; padding-bottom: 0; } .faq_demo5::before { content: ""; position: absolute; left: 12%; background-image: url("../img/ill_faq.svg"); background-repeat: no-repeat; background-size: contain; width: 408px; height: 444px; } @media (max-width: 991px) { .faq_demo5::before { left: 0; } } @media (max-width: 767px) { .faq_demo5::before { display: none; } } .faq_demo5 .block_faq .card .card-header { border: 1px solid #edeef1; background-color: #ffffff; } .faq_demo5 .block_faq .card .card-header .simple_desc { font-size: 12px; color: #6c7a87; text-align: left; font-weight: 400; margin-bottom: 0; } /* CSS Table of Sections -------------------------- ** Conact Sass Products -------------------------- ** try it -------------------------- ** connect_us -------------------------- ** gbo_contact -------------------------- ** need_help_sec -------------------------- ** help__ch -------------------------- ** contact__workspace -------------------------- */ /*----------------------------- Conact Sass Products -----------------------------*/ .simplecontact_section { position: relative; overflow: hidden; } .simplecontact_section .circle-ripple { position: absolute; left: 43.5%; top: 20%; z-index: -1; pointer-events: none; } @media (max-width: 991px) { .simplecontact_section .circle-ripple { left: 39.5%; } } @media (max-width: 767px) { .simplecontact_section .circle-ripple { left: 23.5%; } } .simplecontact_section .circle-ripple .ripple { position: absolute; border: 3px solid #edeef1; width: 200px; height: 200px; border-radius: 500px; } .simplecontact_section .circle-ripple .ripple-1 { -webkit-animation: circleRipple 3s infinite linear !important; -moz-animation: circleRipple 3s infinite linear !important; -o-animation: circleRipple 3s infinite linear !important; -ms-animation: circleRipple 3s infinite linear !important; animation: circleRipple 3s infinite linear !important; } .simplecontact_section .circle-ripple .ripple-2 { -webkit-animation: circleRipple 3s infinite linear 0.75s !important; -moz-animation: circleRipple 3s infinite linear 0.75s !important; -o-animation: circleRipple 3s infinite linear 0.75s !important; -ms-animation: circleRipple 3s infinite linear 0.75s !important; animation: circleRipple 3s infinite linear 0.75s !important; } .simplecontact_section .circle-ripple .ripple-3 { -webkit-animation: circleRipple 3s infinite linear 1.5s !important; -moz-animation: circleRipple 3s infinite linear 1.5s !important; -o-animation: circleRipple 3s infinite linear 1.5s !important; -ms-animation: circleRipple 3s infinite linear 1.5s !important; animation: circleRipple 3s infinite linear 1.5s !important; } /*----------------------------- Try it -----------------------------*/ .tryit_now { background-color: #381840; position: relative; overflow: hidden; margin-top: -6rem; } .tryit_now .title_sections p { color: rgba(255, 255, 255, 0.5); margin-bottom: 0; } .tryit_now:before { content: ""; background-image: url("../img/shpaeboxes.svg"); background-repeat: no-repeat; position: absolute; top: 0; left: 35%; height: 100%; width: 100%; background-size: 50%; } @media (max-width: 767px) { .tryit_now:before { background-size: cover; } } /*----------------------------- connect_us -----------------------------*/ .connect_us { background-color: rgba(56, 24, 64, 0.05); margin-top: 5rem; } .connect_us .title_sections { margin-bottom: 0; } .connect_us .ripple:active:before, .connect_us .ripple:focus:before { background: #fd6b3b; border-radius: 8px; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: 0; animation: ripple 1s cubic-bezier(0.29, -0.01, 0.17, 0.95); } /*----------------------------- contact_section -----------------------------*/ .contact_section { position: relative; margin-top: 15rem; } @media (max-width: 767px) { .contact_section { margin-top: 6.25rem; } } .contact_section img { position: absolute; top: -40%; z-index: -1; } @media (max-width: 767px) { .contact_section img { top: -20%; } } .contact_section .dark-form .form-control { background-color: rgba(255, 255, 255, 0.05); border: 0; color: #ffffff !important; } .contact_section .dark-form .form-control::placeholder { color: #aa9bb3; } .contact_section .dark-form textarea { padding: 1.25rem; } .contact_section .dark-form textarea:focus, .contact_section .dark-form textarea:active { outline: 0; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } .contact_section .custom-control { margin-bottom: 0.5rem; } .contact_section .custom-control .custom-control-input { border: 0; } .contact_section .custom-control .custom-control-input:checked ~ .custom-control-label::before { background-color: #fd4ffe; border: 0; -webkit-box-shadow: 0px 0px 20px 0px rgba(253, 79, 254, 0.4) !important; -moz-box-shadow: 0px 0px 20px 0px rgba(253, 79, 254, 0.4) !important; -o-box-shadow: 0px 0px 20px 0px rgba(253, 79, 254, 0.4) !important; -ms-box-shadow: 0px 0px 20px 0px rgba(253, 79, 254, 0.4) !important; box-shadow: 0px 0px 20px 0px rgba(253, 79, 254, 0.4) !important; } .contact_section .custom-control .custom-control-label { color: #ffffff; font-size: 13px; } .contact_section .custom-control .custom-control-label::before { top: 0.1rem; } .contact_section .custom-control .custom-control-label::after { top: 0.1rem; } .contact_section .button--click .btn-token { width: 100%; margin: 0; padding: 1.15rem; } /*----------------------------- gbo_contact -----------------------------*/ .gbo_contact { background-image: url("../img/0987.jpg"); background-repeat: no-repeat; width: 100%; position: relative; background-position: 50% 59%; padding: 6.25rem 0; margin-top: 1.85rem; width: 96%; margin-left: auto; margin-right: auto; border-radius: 12px; } @media (max-width: 767px) { .gbo_contact { margin-top: 0.5rem; } } .gbo_contact .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 34, 56, 0.3); border-radius: 12px; } /*----------------------------- need_help -----------------------------*/ .need_help_sec .block_help { position: relative; overflow: hidden; background-color: #040309; border-radius: 12px; padding: 3rem; z-index: 1; } .need_help_sec .block_help:before { content: ""; background-image: url("../img/hosting/light.png"); background-repeat: no-repeat; background-size: 140%; position: absolute; right: 0; bottom: 0; opacity: 0.14; height: 100%; width: 100%; background-position: 98% 96%; z-index: -1; } @media (max-width: 767px) { .need_help_sec .block_help:before { background-size: 180%; } } .need_help_sec .item_help { margin-top: 2rem; } .need_help_sec .item_help span { font-size: 14px; font-weight: 500; display: block; margin-bottom: 0.3rem; } .need_help_sec .item_help p { font-size: 14px; font-weight: 400; margin-bottom: 0; } .need_help_sec .img_help { width: 300px; display: flex; margin: auto; } /*----------------------------- help__ch -----------------------------*/ .help__ch { position: relative; } .help__ch .title_sections { margin-bottom: 2.5rem; } .help__ch .button__super .btn { width: 140px; margin: 0 0.625rem; } .help__ch .back__img { pointer-events: none; } @media (max-width: 767px) { .help__ch .back__img { display: none; } } .help__ch .back__img .part__1 { position: absolute; left: -70%; top: -20%; z-index: -1; } .help__ch .back__img .part__2 { position: absolute; top: 40%; right: -24%; z-index: -1; } /*----------------------------- contact__workspace -----------------------------*/ .contact__workspace { background-color: #12161b; position: relative; overflow: hidden; } .contact__workspace::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/workspace/bg-about.png"); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; opacity: 0.25; } .contact__workspace .btn { background-color: #ffffff; color: #0b2238; } .contact__workspace .btn::before { background: #fd6b3b; color: #ffffff; } /* CSS Table of Sections -------------------------- ** block_testimonial -------------------------- ** gn_testimonial -------------------------- ** ggrid_testmonials -------------------------- ** testimonial_demo2 -------------------------- ** test_monials__workspace -------------------------- */ /*----------------------------- logos_section -----------------------------*/ .block_testimonial h3 { font-weight: 600; } .block_testimonial .swiper-container { width: 100%; height: 100%; } .block_testimonial .swiper-container.gallery-top .swiper-wrapper .swiper-slide .content { font-size: 16px; color: #9da6af; font-style: italic; font-weight: 400; } .block_testimonial .swiper-container.gallery-top .swiper-wrapper .swiper-slide .man👨 { margin-top: 1.5rem; } .block_testimonial .swiper-container.gallery-top .swiper-wrapper .swiper-slide .man👨 h4 { font-size: 16px; font-weight: 500; color: #ffffff; } .block_testimonial .swiper-container.gallery-top .swiper-wrapper .swiper-slide .man👨 a { color: #165df5; font-size: 14px; } .block_testimonial .swiper-container.gallery-top .swiper-wrapper .swiper-slide .man👨 h6 { color: #9da6af; font-size: 13px; font-weight: 400; } .block_testimonial .swiper-container.gallery-thumbs { margin-top: 1.875rem; margin-bottom: 1.875rem; } .block_testimonial .swiper-container.gallery-thumbs .swiper-wrapper .swiper-slide { width: auto !important; cursor: pointer; margin-right: 0.75rem !important; } .block_testimonial .swiper-container.gallery-thumbs .swiper-wrapper .swiper-slide .pagination { object-fit: cover; width: 40px; height: 40px; opacity: 0.5; padding: 0.2rem; transform: scale(1.2); -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .block_testimonial .swiper-container.gallery-thumbs .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .pagination { opacity: 1; border: 1px solid #f28e1c; transform: scale(1); } /*----------------------------- gn_testimonial -----------------------------*/ .gn_testimonial { position: relative; overflow: hidden; background-image: url("../img/lines014.svg"); background-repeat: no-repeat; width: 100%; } .gn_testimonial .title_sections { margin-bottom: 1.5rem; } .gn_testimonial .gbx_content { background-color: #ffffff; padding: 2.5rem; border-radius: 0; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide { margin-bottom: 3rem; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .content { font-size: 16px; color: #9da6af; font-style: italic; font-weight: 400; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 { margin-bottom: 2rem; text-align: left; display: inline-flex; justify-content: center; align-items: center; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 h4 { font-size: 16px; font-weight: 500; color: #ffffff; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 a { color: #165df5; font-size: 14px; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 h6 { color: #9da6af; font-size: 13px; font-weight: 400; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 .gq_txt { margin-top: -0.2rem; } .gn_testimonial .gbx_content .swiper-wrapper .swiper-slide .man👨 .av_avatar { width: 50px; height: 50px; object-fit: cover; margin-right: 0.75rem; } .gn_testimonial .gbx_content .swiper-pagination .swiper-pagination-bullet { background: rgba(77, 129, 247, 0.15); opacity: 1; margin: 0 0.15rem; } .gn_testimonial .gbx_content .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active-main { background: #4d81f7; } /*----------------------------- ggrid_testmonials -----------------------------*/ .ggrid_testmonials { position: relative; } .ggrid_testmonials .item_tmonial { border: 1px solid #edeef1; border-radius: 12px; padding: 2rem 2.5rem; margin-bottom: 2rem; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .ggrid_testmonials .item_tmonial:hover { -webkit-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.06) !important; -moz-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.06) !important; -o-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.06) !important; -ms-box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.06) !important; box-shadow: 0px 45px 60px -30px rgba(11, 34, 56, 0.06) !important; } .ggrid_testmonials .item_tmonial .r_reviews { font-size: 16px; font-style: italic; color: #6c7a87; font-weight: 400; margin-bottom: 1.5rem; } .ggrid_testmonials .item_tmonial .item_user🐱👓 img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin: auto; margin-right: 0.75rem; } .ggrid_testmonials .item_tmonial .item_user🐱👓 .txt h5 { font-size: 15px; font-weight: 600; color: #0b2238; margin-bottom: 0.3rem; } .ggrid_testmonials .item_tmonial .item_user🐱👓 .txt h5 a { color: #f93542; font-size: 12px; } .ggrid_testmonials .item_tmonial .item_user🐱👓 .txt p { color: #6c7a87; font-size: 12px; margin-bottom: 0; } /*----------------------------- testimonial_demo2 -----------------------------*/ .testimonial_demo2 .item_mmon .profile_user { position: relative; overflow: hidden; } .testimonial_demo2 .item_mmon .profile_user img { width: 100%; height: 300px; object-fit: cover; border-radius: 12px; } .testimonial_demo2 .item_mmon .profile_user .categ { padding: 0.9rem 1.4rem; border-radius: 12px; position: absolute; bottom: 1.5rem; left: 1.5rem; font-size: 13px; font-weight: 400; color: #0b2238; background-color: #ffffff; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .testimonial_demo2 .item_mmon .info_persons { margin-top: 1.5rem; } .testimonial_demo2 .item_mmon .info_persons p { margin-bottom: 1.5rem; font-size: 20px; color: #0b2238; font-weight: 500; } .testimonial_demo2 .item_mmon .info_persons h5 { font-size: 16px; margin-bottom: 0.3rem; } .testimonial_demo2 .item_mmon .info_persons span { display: block; font-size: 13px; color: #6c7a87; } .testimonial_demo2 .item_mmon:hover .categ { -webkit-animation: wobble-hor-bottom 0.8s both !important; -moz-animation: wobble-hor-bottom 0.8s both !important; -o-animation: wobble-hor-bottom 0.8s both !important; -ms-animation: wobble-hor-bottom 0.8s both !important; animation: wobble-hor-bottom 0.8s both !important; } /*----------------------------- test_monials__workspace -----------------------------*/ .test_monials__workspace .box__others .img__people { position: relative; } .test_monials__workspace .box__others .img__people img { width: 100%; } @media (max-width: 991px) { .test_monials__workspace .box__others .img__people img { display: none; } } .test_monials__workspace .box__others .img__people .item_title { position: absolute; top: 45px; right: -60px; } @media (max-width: 991px) { .test_monials__workspace .box__others .img__people .item_title { position: relative; top: inherit; right: inherit; } } .test_monials__workspace .people__say { position: relative; } .test_monials__workspace .people__say .swipe_circle { text-align: center; } .test_monials__workspace .people__say .swipe_circle .img__user { margin-bottom: 1.25rem; } .test_monials__workspace .people__say .swipe_circle .img__user img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .test_monials__workspace .people__say .swipe_circle .username👨 { margin-bottom: 1.875rem; } .test_monials__workspace .people__say .swipe_circle .username👨 h4 { font-size: 16px; font-weight: 500; color: #0b2238; margin-bottom: 0.5rem; } .test_monials__workspace .people__say .swipe_circle .username👨 span { font-size: 12px; display: block; color: #6c7a87; } .test_monials__workspace .people__say .swipe_circle .stars__rate .tio { color: #31d1ab; font-size: 20px; } .test_monials__workspace .people__say .swipe_circle .content { margin-bottom: 1.875rem; } .test_monials__workspace .people__say .swipe_circle .swiper-wrapper { padding-top: 8rem; } @media (max-width: 991px) { .test_monials__workspace .people__say .swipe_circle .swiper-wrapper { padding-top: 3rem; } } .test_monials__workspace .people__say .person_thumbs .swiper-slide { cursor: pointer; } @media (max-width: 991px) { .test_monials__workspace .people__say .person_thumbs .swiper-slide { position: relative !important; top: inherit !important; right: inherit !important; left: inherit !important; bottom: inherit !important; padding-top: 1.5rem; padding-left: 1.5rem; } } .test_monials__workspace .people__say .person_thumbs .swiper-slide .pagination { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 6px solid transparent; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .test_monials__workspace .people__say .person_thumbs .swiper-slide.swiper-slide-thumb-active .pagination { border: 6px solid #ffffff; -webkit-box-shadow: 0px 0px 30px 0px rgba(11, 34, 56, 0.12) !important; -moz-box-shadow: 0px 0px 30px 0px rgba(11, 34, 56, 0.12) !important; -o-box-shadow: 0px 0px 30px 0px rgba(11, 34, 56, 0.12) !important; -ms-box-shadow: 0px 0px 30px 0px rgba(11, 34, 56, 0.12) !important; box-shadow: 0px 0px 30px 0px rgba(11, 34, 56, 0.12) !important; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper { padding-top: 0 !important; z-index: 2; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper .swiper-slide:first-of-type { position: absolute; right: 30px; bottom: -180px; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper .swiper-slide:nth-of-type(2) { position: absolute; right: 55px; top: 80px; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper .swiper-slide:nth-of-type(3) { position: absolute; right: 180px; top: 20px; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper .swiper-slide:nth-of-type(4) { position: absolute; right: 275px; top: 80px; } .test_monials__workspace .people__say .person_thumbs .swiper-wrapper .swiper-slide:nth-of-type(5) { position: absolute; right: 310px; bottom: -180px; } .test_monials__workspace .people__say .simple__particles div { width: 9px; height: 9px; border-radius: 50%; } .test_monials__workspace .people__say .simple__particles div:first-of-type { position: absolute; right: 18%; bottom: 45%; background-color: rgba(25, 163, 137, 0.3); } .test_monials__workspace .people__say .simple__particles div:nth-of-type(2) { position: absolute; right: 23%; top: 10%; background-color: #f28e1c; } .test_monials__workspace .people__say .simple__particles div:nth-of-type(3) { position: absolute; right: 41%; top: 14%; background-color: rgba(249, 53, 66, 0.8); } .test_monials__workspace .people__say .simple__particles div:nth-of-type(4) { position: absolute; right: 55%; top: 0; background-color: rgba(25, 163, 137, 0.13); } .test_monials__workspace .people__say .simple__particles div:nth-of-type(5) { position: absolute; right: 75%; top: 30%; background-color: rgba(22, 93, 245, 0.74); } /* CSS Table of Sections -------------------------- ** form_register -------------------------- ** section_account -------------------------- */ /*----------------------------- form_register -----------------------------*/ .form_register { background-color: #ffffff; border-radius: 8px; padding: 2.5rem; } .form_register .title--forms { font-size: 25px; font-weight: 600; color: #0b2238; margin-bottom: 1.5rem; } .form_register input:focus { border-color: #165df5; } .form_register .terms p { color: #6c7a87; font-size: 14px; font-weight: 400; } .form_register .terms p a { color: #165df5; } .form_register .terms p a:hover { text-decoration: underline; } .form_register .btn-primary { padding: 0.75rem 1.9rem; } .form-group.--password .input-group input { padding-right: 3.2rem; border-radius: 6px !important; } .form-group.--password .input-group .input-group-prepend .input-group-text { position: absolute; font-size: 19px; color: #9da6af; top: 0.75rem; right: 0.75rem; border: 0; background-color: transparent; z-index: 5; } /*----------------------------- section_account -----------------------------*/ .section_account .fixed_side_data { background: url("../img/signup.png"); background-repeat: no-repeat; position: fixed; left: 0; top: 0; bottom: 0; width: 430px; background-size: cover; height: 100vh; padding: 2.5rem; } @media (max-width: 767px) { .section_account .fixed_side_data { position: relative; width: 100%; height: 330px; top: inherit; margin-top: 1rem; border-radius: 8px; } } .section_account .fixed_side_data .btn_logo { color: #ffffff; font-size: 18px; font-weight: 500; padding: 0; } .section_account .fixed_side_data .btn_logo img { vertical-align: bottom; margin-right: 0.3rem; } .section_account .fixed_side_data .title_nav { font-size: 25px; font-weight: 500; color: #ffffff; margin-top: 1.5rem; } .section_account .have_account { color: #0b2238; margin-top: 2rem; font-size: 15px; display: flex; justify-content: flex-end; } @media (max-width: 767px) { .section_account .have_account { justify-content: flex-start; padding-left: 1rem; } } .section_account .have_account .btn { padding: 0; color: #165df5; margin-left: 0.3rem; line-height: 0; } .section_account .box--signup { position: relative; height: 100%; padding: 0; overflow: inherit; padding: 2rem 1.5rem; padding-bottom: 0; max-width: 430px; } @media (max-width: 767px) { .section_account .box--signup { display: block; padding: 1rem; width: 100%; } } /* CSS Table of Sections -------------------------- ** about_section -------------------------- ** about_ir -------------------------- ** about_currency -------------------------- ** gb_abou_ga -------------------------- ** gzq_about -------------------------- ** money_section -------------------------- ** abo_company -------------------------- ** about_agency -------------------------- ** about__office -------------------------- */ /*----------------------------- about_section -----------------------------*/ .about_section .img-products { margin-top: -4rem; } @media (max-width: 767px) { .about_section .img-products { margin-top: 2rem; } } .about_section .img-products .pro--img { object-fit: cover; height: 650px; border-radius: 10px; } .about_section .logo_items .items .item-client { margin-left: 0; margin-right: 1.5rem; } .about_section .logo_items .items .item-client img { width: 90px; } /*----------------------------- about_ir -----------------------------*/ .about_ir .aboutme_gs p { font-size: 16px; color: #6c7a87; font-weight: 400; } /*----------------------------- about_currency -----------------------------*/ .about_currency .title_sections h2 { color: #ffffff; } .about_currency .title_sections p { color: #aa9bb3; } /*----------------------------- gb_abou_ga (agency) -----------------------------*/ .gb_abou_ga .gz_name { margin-bottom: 2rem; } .gb_abou_ga .gz_name h4 { font-size: 18px; font-weight: 500; } .gb_abou_ga .gz_name h4 span { color: #4d81f7; } .gb_abou_ga .gz_name p { color: #6c7a87; font-size: 16px; font-weight: 400; margin-bottom: 0; } /*----------------------------- gzq_about (Charity) -----------------------------*/ .gzq_about ul li { color: #0b2238; padding-bottom: 0.75rem; font-size: 16px; } /*----------------------------- money_section -----------------------------*/ .money_section { position: relative; overflow: hidden; } .money_section .title_sections { margin-bottom: 2.5rem; } .money_section .img_hand { margin-top: -2rem; margin-left: 8rem; } @media (max-width: 991px) { .money_section .img_hand { margin-left: auto; width: 100%; margin-top: 0; } } /*----------------------------- abo_company -----------------------------*/ .abo_company { position: relative; margin-top: -16rem; } @media (max-width: 767px) { .abo_company { margin-top: 2rem; } } .abo_company .gq_item { position: relative; overflow: hidden; border-radius: 12px; padding: 2rem; height: 530px; min-height: 530px; } @media (max-width: 767px) { .abo_company .gq_item { height: 100%; } } .abo_company .gq_item .title_sections { margin-bottom: 0; margin-top: 9rem; } .abo_company .gq_item .title_sections p { margin-bottom: 0; } .abo_company .gq_item.ill_item .ill_sec { margin: 3rem 0; width: 100%; height: 200px; object-fit: contain; } .abo_company .gq_item.ill_item .title_sections { margin-top: 0; } .abo_company .emo:nth-of-type(1) .gq_item { background-color: #165df5; } .abo_company .emo:nth-of-type(2) .gq_item { background-color: #e9f0ff; } .abo_company .emo:nth-of-type(3) .gq_item { background-color: #f6eef4; } /*----------------------------- about_agency -----------------------------*/ .about_agency { position: relative; overflow: hidden; } .about_agency:before { content: ""; display: block; background: url("../img/agency/grid.svg"); background-repeat: no-repeat; width: 820px; height: 260px; position: absolute; right: -2rem; top: 9rem; } @media (max-width: 991px) { .about_agency:before { right: 0; width: 100px; } } @media (max-width: 767px) { .about_agency:before { display: none; } } .about_agency .title_sections .inside_pic { width: 100%; height: 260px; object-fit: cover; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; margin-top: 1rem; } .about_agency .pro_agency { margin-top: 5rem; } @media (max-width: 767px) { .about_agency .pro_agency { margin-top: 2rem; } } .about_agency .pro_agency img { height: 670px; width: 100%; object-fit: cover; border-radius: 12px; } @media (max-width: 767px) { .about_agency .pro_agency img { height: 350px; } } /*----------------------------- about__office -----------------------------*/ .about__office .head__picture { margin-bottom: 3.75rem; position: relative; z-index: 1; } .about__office .head__picture img { width: 100%; height: 650px; border-radius: 8px; object-fit: cover; } .about__office .body__content { background-color: #12161b; margin-top: -32rem; padding-top: 33rem; position: relative; overflow: hidden; } .about__office .body__content::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(../img/workspace/bg-about.png); background-repeat: no-repeat; background-size: 100%; z-index: 0; opacity: 0.18; } @media (max-width: 991px) { .about__office .body__content::before { background-size: cover; } } .about__office .body__content .info__company .title_sections p { opacity: 0.8; } .about__office .body__content .info__company .description_full p { font-size: 16px; opacity: 0.8; color: #ffffff; margin-bottom: 1.25rem; } .about__office .body__content .item__counter h4 { font-size: 50px; color: #ffffff; font-weight: 700; margin-bottom: 1.25rem; } .about__office .body__content .item__counter p { font-size: 20px; font-weight: 400; color: #ffffff; } /* CSS Table of Sections -------------------------- ** tabs_works -------------------------- ** tabs_service -------------------------- */ /*----------------------------- tabs_works -----------------------------*/ .tabs_works .nav-pills .nav-link { font-size: 18px; font-weight: 500; color: #ffffff; margin-bottom: 1.25rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .tabs_works .nav-pills .nav-link p { font-size: 16px; font-weight: 400; color: #9da6af; margin-top: 1rem; margin-bottom: 0; } .tabs_works .nav-pills .nav-link.active { background-color: transparent; -webkit-box-shadow: -5px 0px 0px 0px #165df5 !important; -moz-box-shadow: -5px 0px 0px 0px #165df5 !important; -o-box-shadow: -5px 0px 0px 0px #165df5 !important; -ms-box-shadow: -5px 0px 0px 0px #165df5 !important; box-shadow: -5px 0px 0px 0px #165df5 !important; border-radius: 0; } .tabs_works .img--tabs .tab-pane .--img { width: 65vw; border-radius: 8px; -webkit-animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -moz-animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -o-animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -ms-animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; } @media (max-width: 767px) { .tabs_works .img--tabs .tab-pane .--img { width: 100%; } } .tabs_works .img--tabs.slide_bottom .tab-pane .--img { -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -moz-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -o-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -ms-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; } /*----------------------------- tabs_service -----------------------------*/ .tabs_service .nav-pills .nav-link { color: #0b2238; border: 2px solid transparent; border-radius: 8px; } .tabs_service .nav-pills .nav-link.active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; border: 2px solid #edeef1; border-radius: 8px; } .tabs_service .nav-pills .nav-link p { color: #6c7a87; } .tabs_service .tab-content .tab-pane .--img { width: 45vw; } @media (max-width: 767px) { .tabs_service .tab-content .tab-pane .--img { width: 100%; } } /* CSS Table of Sections -------------------------- ** crypto_section -------------------------- ** icon-fixed -------------------------- */ /*----------------------------- crypto_section -----------------------------*/ .crypto_section { border-bottom: 1px solid #edeef1; } .crypto_section .item-coin .icon { width: 50px; height: 50px; border-radius: 15px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 25px; } .crypto_section .item-coin .icon.bit { background-color: rgba(255, 195, 41, 0.1); color: #ffc329; } .crypto_section .item-coin .icon.eth { background-color: rgba(22, 93, 245, 0.1); color: #165df5; } .crypto_section .item-coin .icon.bch { background-color: rgba(25, 163, 137, 0.1); color: #19a389; } .crypto_section .item-coin .icon.bch .tio { transform: rotate(-30deg); } .crypto_section .item-coin .icon.ltc { background-color: rgba(56, 24, 64, 0.1); color: #381840; } .crypto_section .item-coin .title span { font-size: 16px; color: #0b2238; font-weight: 500; } .crypto_section .item-coin .title p { color: #6c7a87; font-weight: 400; font-size: 13px; text-transform: uppercase; margin-bottom: 0; } .crypto_section .item-coin .price span { font-size: 16px; color: #0b2238; font-weight: 500; } .crypto_section .item-coin .price p { font-weight: 400; font-size: 13px; margin-bottom: 0; } /*----------------------------- icon-fixed -----------------------------*/ .icon-fixed .fixed { position: absolute; z-index: 2; } .icon-fixed .fixed img { width: 40px; } .icon-fixed .fixed.img01 { top: 10%; left: 40%; } .icon-fixed .fixed.img02 { top: 30%; left: 42%; } .icon-fixed .fixed.img03 { top: 25%; right: 30%; } .icon-fixed .fixed.img04 { top: 41%; right: 70%; } .icon-fixed .fixed.img05 { top: 86%; right: 24%; } .icon-fixed .fixed.img06 { top: 90%; left: 24%; } .icon-fixed .fixed.img07 { top: 75%; right: 44%; } .icon-fixed .fixed.img08 { top: 52%; left: 34%; } .icon-fixed .fixed.img09 { top: 64%; right: 31%; } .icon-fixed .fixed.img10 { top: 37%; right: 31%; } /* CSS Table of Sections -------------------------- ** Circle Team (dark) -------------------------- ** particl_colors -------------------------- ** gb_team_te (Teams) -------------------------- */ /*----------------------------- Circle Team (dark) -----------------------------*/ .team_section { position: relative; overflow: hidden; } .team_section .title_sections { margin-bottom: 2.5rem; } .team_section .switch_team .nav-pills { display: flex; justify-content: center; align-items: center; } .team_section .switch_team .nav-pills .nav-item .nav-link { color: #ffffff; font-size: 18px; font-weight: 500; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .team_section .switch_team .nav-pills .nav-item .nav-link.active { color: #fd4ffe; background-color: transparent; } .team_section .switch_team .content_team { margin-top: 8rem; } @media (max-width: 767px) { .team_section .switch_team .content_team { margin-top: 3rem; } } .team_section .switch_team .content_team .itemperson div:nth-of-type(1) .av_person { margin-top: -2rem; } .team_section .switch_team .content_team .itemperson div:nth-of-type(2) .av_person { margin-top: 4rem; } .team_section .switch_team .content_team .itemperson div:nth-of-type(3) .av_person { margin-top: -4rem; margin-left: 2rem; } .team_section .switch_team .content_team .itemperson div:nth-of-type(4) .av_person { margin-top: -4rem; margin: auto; } .team_section .switch_team .content_team .itemperson div:nth-of-type(5) .av_person { margin-top: -2rem; margin-left: auto; } .team_section .switch_team .content_team .itemperson div:nth-of-type(6) .av_person { margin-top: 2rem; margin-left: auto; } .team_section .switch_team .content_team .itemperson .av_person { text-align: center; display: table; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .team_section .switch_team .content_team .itemperson .av_person { margin: auto !important; margin-bottom: 1.25rem !important; } } .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 { -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -moz-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -o-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; -ms-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; position: relative; overflow: hidden; width: 120px; height: 120px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 1.2rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 { width: 100px; height: 100px; } } .team_section .switch_team .content_team .itemperson .av_person .avatar🐱:before { content: ""; width: 100%; height: 100%; position: absolute; border-radius: 50%; top: 0; left: 0; right: 0; background-color: rgba(41, 1, 62, 0); -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 img { width: 120px; height: 120px; object-fit: cover; } @media (max-width: 767px) { .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 img { width: 100px; height: 100px; } } .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 .social { position: absolute; width: 45px; height: 45px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; opacity: 0; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.84, 0.44, 1) both !important; -moz-animation: puff-out-center 1s cubic-bezier(0.165, 0.84, 0.44, 1) both !important; -o-animation: puff-out-center 1s cubic-bezier(0.165, 0.84, 0.44, 1) both !important; -ms-animation: puff-out-center 1s cubic-bezier(0.165, 0.84, 0.44, 1) both !important; animation: puff-out-center 1s cubic-bezier(0.165, 0.84, 0.44, 1) both !important; } .team_section .switch_team .content_team .itemperson .av_person .avatar🐱 .social .tio { font-size: 18px; color: #ffffff; } .team_section .switch_team .content_team .itemperson .av_person .info_name h4 { color: #ffffff; font-size: 16px; font-weight: 500; } .team_section .switch_team .content_team .itemperson .av_person .info_name p { color: #aa9bb3; font-size: 14px; font-weight: 400; } .team_section .switch_team .content_team .itemperson .av_person:hover .avatar🐱:before { background-color: rgba(41, 1, 62, 0.7); } .team_section .switch_team .content_team .itemperson .av_person:hover .avatar🐱 .social { -webkit-animation: puff-in-center 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -moz-animation: puff-in-center 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -o-animation: puff-in-center 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; -ms-animation: puff-in-center 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; animation: puff-in-center 0.35s cubic-bezier(0.47, 0, 0.745, 0.715) both !important; opacity: 1; } /*----------------------------- particl_colors -----------------------------*/ .particl_colors { position: relative; } .particl_colors span { position: absolute; border-radius: 50%; width: 20px; height: 20px; } .particl_colors span:nth-child(1) { background-color: rgba(248, 178, 107, 0.4); -webkit-animation: blink-1 15s 1s infinite both !important; -moz-animation: blink-1 15s 1s infinite both !important; -o-animation: blink-1 15s 1s infinite both !important; -ms-animation: blink-1 15s 1s infinite both !important; animation: blink-1 15s 1s infinite both !important; } .particl_colors span:nth-child(2) { left: 45%; margin-top: 13%; width: 18px; height: 18px; background-color: rgba(253, 79, 254, 0.3); -webkit-animation: blink-1 15s 1.5s infinite both !important; -moz-animation: blink-1 15s 1.5s infinite both !important; -o-animation: blink-1 15s 1.5s infinite both !important; -ms-animation: blink-1 15s 1.5s infinite both !important; animation: blink-1 15s 1.5s infinite both !important; } .particl_colors span:nth-child(3) { background-color: rgba(79, 254, 248, 0.38); right: 35%; margin-top: 22%; width: 18px; height: 18px; -webkit-animation: blink-1 15s 2s infinite both !important; -moz-animation: blink-1 15s 2s infinite both !important; -o-animation: blink-1 15s 2s infinite both !important; -ms-animation: blink-1 15s 2s infinite both !important; animation: blink-1 15s 2s infinite both !important; } .particl_colors span:nth-child(4) { background-color: rgba(79, 254, 248, 0.17); right: 28%; margin-top: 0; width: 14px; height: 14px; -webkit-animation: blink-1 15s 2.5s infinite both !important; -moz-animation: blink-1 15s 2.5s infinite both !important; -o-animation: blink-1 15s 2.5s infinite both !important; -ms-animation: blink-1 15s 2.5s infinite both !important; animation: blink-1 15s 2.5s infinite both !important; } .particl_colors span:nth-child(5) { background-color: rgba(79, 254, 248, 0.39); right: 0; margin-top: 15%; width: 25px; height: 25px; -webkit-animation: blink-1 15s 3s infinite both !important; -moz-animation: blink-1 15s 3s infinite both !important; -o-animation: blink-1 15s 3s infinite both !important; -ms-animation: blink-1 15s 3s infinite both !important; animation: blink-1 15s 3s infinite both !important; } .particl_colors span:nth-child(6) { background-color: rgba(248, 178, 107, 0.38); right: -10%; margin-top: 45%; width: 10px; height: 10px; -webkit-animation: blink-1 15s 3.5s infinite both !important; -moz-animation: blink-1 15s 3.5s infinite both !important; -o-animation: blink-1 15s 3.5s infinite both !important; -ms-animation: blink-1 15s 3.5s infinite both !important; animation: blink-1 15s 3.5s infinite both !important; } .particl_colors span:nth-child(7) { background-color: rgba(248, 107, 107, 0.59); left: 20%; margin-top: 20%; width: 19px; height: 19px; -webkit-animation: blink-1 15s 4s infinite both !important; -moz-animation: blink-1 15s 4s infinite both !important; -o-animation: blink-1 15s 4s infinite both !important; -ms-animation: blink-1 15s 4s infinite both !important; animation: blink-1 15s 4s infinite both !important; } .particl_colors span:nth-child(8) { background-color: rgba(253, 79, 254, 0.22); left: 28%; margin-top: 35%; width: 19px; height: 19px; -webkit-animation: blink-1 15s 4.5s infinite both !important; -moz-animation: blink-1 15s 4.5s infinite both !important; -o-animation: blink-1 15s 4.5s infinite both !important; -ms-animation: blink-1 15s 4.5s infinite both !important; animation: blink-1 15s 4.5s infinite both !important; } .particl_colors span:nth-child(8) { background-color: rgba(79, 254, 248, 0.34); left: -10%; margin-top: 45%; width: 25px; height: 25px; -webkit-animation: blink-1 15s 5s infinite both !important; -moz-animation: blink-1 15s 5s infinite both !important; -o-animation: blink-1 15s 5s infinite both !important; -ms-animation: blink-1 15s 5s infinite both !important; animation: blink-1 15s 5s infinite both !important; } /*----------------------------- gb_team_te (Teams) -----------------------------*/ .gb_team_te div:nth-child(1) .horizontal_item { top: 13rem; left: 10rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(1) .horizontal_item { top: -5rem; left: 2rem; } } @media (max-width: 767px) { .gb_team_te div:nth-child(1) .horizontal_item { top: 2rem; } } .gb_team_te div:nth-child(2) { margin-top: -7rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(2) { margin-top: 0; } } .gb_team_te div:nth-child(2) .horizontal_item { top: -5.7rem; left: 3rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(2) .horizontal_item { top: -5rem; left: 2rem; } } @media (max-width: 767px) { .gb_team_te div:nth-child(2) .horizontal_item { top: 2rem; } } .gb_team_te div:nth-child(3) { margin-top: 3rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(3) { margin-top: 7rem; } } @media (max-width: 767px) { .gb_team_te div:nth-child(3) { margin-top: 0; } } .gb_team_te div:nth-child(3) .horizontal_item { top: 13.3rem; left: -2.8rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(3) .horizontal_item { top: -5rem; left: 2rem; } } @media (max-width: 767px) { .gb_team_te div:nth-child(3) .horizontal_item { top: 2rem; } } .gb_team_te div:nth-child(6) { margin-top: -6rem; margin-left: 2rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(6) { margin: 0; } } .gb_team_te div:nth-child(6) .horizontal_item { top: 13.3rem; left: 10rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(6) .horizontal_item { top: -5rem; left: 2rem; } } @media (max-width: 767px) { .gb_team_te div:nth-child(6) .horizontal_item { top: 2rem; } } .gb_team_te div:nth-child(7) { margin-top: 4rem; margin-left: 2rem; } @media (max-width: 991px) { .gb_team_te div:nth-child(7) { margin: 0; } } .gb_team_te .hg_person { position: relative; } .gb_team_te .hg_person img { width: 100%; object-fit: cover; height: 350px; border-radius: 8px; } .gb_team_te .hg_person .txt { margin-top: 1.25rem; } .gb_team_te .hg_person .txt h4 { font-size: 16px; font-weight: 500; color: #0b2238; margin-bottom: 0.35rem; } .gb_team_te .hg_person .txt p { color: #6c7a87; font-size: 14px; margin-bottom: 0; } .gb_team_te .hg_person:hover .so_media { -webkit-transform: translateY(-10px) !important; -moz-transform: translateY(-10px) !important; -o-transform: translateY(-10px) !important; -ms-transform: translateY(-10px) !important; transform: translateY(-10px) !important; } .gb_team_te .so_media { background-color: #ffffff; border-radius: 8px; width: 45px; position: absolute; top: -5.7rem; left: 3rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; -webkit-box-shadow: 6px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -moz-box-shadow: 6px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -o-box-shadow: 6px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -ms-box-shadow: 6px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; box-shadow: 6px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; } @media (max-width: 767px) { .gb_team_te .so_media { top: 1.3rem; left: 2rem; } } .gb_team_te .so_media a { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 13px; border-radius: 8px; color: #6c7a87; text-transform: capitalize; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .gb_team_te .so_media a.active { background-color: #0b2238; color: #ffffff; } .gb_team_te .so_media a.active:hover { color: #ffffff; } .gb_team_te .so_media a:hover { color: #0b2238; } .gb_team_te .so_media.horizontal_item { height: 45px; width: max-content; } .gb_team_te .so_media.horizontal_item a { display: inline-flex; } .gb_team_te .so_media.horizontal_item a.active { background-color: #4d81f7; } /* CSS Table of Sections -------------------------- ** newsletter_section -------------------------- */ /*----------------------------- newsletter_section (Dark) -----------------------------*/ .newsletter_section .dark-form .form-control { background-color: rgba(255, 255, 255, 0.05); border: 0; color: #ffffff !important; } .newsletter_section .dark-form .form-control::placeholder { color: #aa9bb3; } .newsletter_section .button--click .btn-token { margin: 0; width: 100%; } /* CSS Table of Sections -------------------------- ** TimeLine Roadmap -------------------------- */ /*----------------------------- TimeLine Roadmap -----------------------------*/ .timeline-box .item_timeline { position: relative; border: 5px solid #fd4ffe; border-left: 0; padding: 2rem; border-top-right-radius: 20px; border-bottom-right-radius: 20px; min-height: 200px; } .timeline-box .item_timeline:before { left: 0; bottom: -15px; content: ""; border: 10px solid #29013e; display: inline-flex; position: absolute; } .timeline-box .item_timeline:after { content: ""; position: absolute; top: -5px; left: -2px; width: 5px; height: 5px; background-color: #fd4ffe; border-radius: 50%; display: inline-flex; } .timeline-box .item_timeline .details { text-align: center; display: flex; justify-content: center; align-items: center; } @media (max-width: 767px) { .timeline-box .item_timeline .details { padding-bottom: 5rem; } } .timeline-box .item_timeline .details:before { content: ""; position: absolute; display: inline-flex; width: 20px; height: 20px; border: 2px solid #ffffff; background-color: #29013e; border-radius: 50%; top: -2.8rem; } .timeline-box .item_timeline .details:after { content: ""; position: absolute; display: inline-flex; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='18' viewBox='0 0 1 18'%3E%3Cline id='Line_18' data-name='Line 18' y2='18' transform='translate(0.5)' fill='none' stroke='%23fff' stroke-width='1' stroke-dasharray='2' opacity='0.5'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; top: -1rem; width: 1px; height: 18px; } .timeline-box .item_timeline .details.active:before { background-color: #ffffff; border-color: #fd4ffe; border-width: 6px; -webkit-box-shadow: 0px 0px 30px 0px rgba(253, 79, 254, 0.5) !important; -moz-box-shadow: 0px 0px 30px 0px rgba(253, 79, 254, 0.5) !important; -o-box-shadow: 0px 0px 30px 0px rgba(253, 79, 254, 0.5) !important; -ms-box-shadow: 0px 0px 30px 0px rgba(253, 79, 254, 0.5) !important; box-shadow: 0px 0px 30px 0px rgba(253, 79, 254, 0.5) !important; } .timeline-box .item_timeline .details .data { margin-top: 0.5rem; } .timeline-box .item_timeline .details .data time { font-size: 14px; font-weight: 400; color: #aa9bb3; } .timeline-box .item_timeline .details .data h4 { margin-top: 0.5rem; font-size: 16px; color: #ffffff; margin-bottom: 0; } .timeline-box .item_timeline.itemTwo { border: 0; position: relative; } .timeline-box .item_timeline.itemTwo:before { content: ""; border: 5px solid #49275b; border-radius: 0; position: absolute; top: -5px; border-right: 0; border-left: 1; border-top-left-radius: 20px; border-bottom-left-radius: 20px; width: 38%; height: 205px; left: 0; } @media (max-width: 767px) { .timeline-box .item_timeline.itemTwo:before { width: 49%; height: auto; } } .timeline-box .item_timeline.itemTwo:after { display: none; } .timeline-box .item_timeline.itemThree { border: 0; min-height: 0; } .timeline-box .item_timeline.itemThree:before { display: none; } .timeline-box .item_timeline.itemThree:after { display: none; } /* CSS Table of Sections -------------------------- ** ng_donate -------------------------- */ /*----------------------------- ng_donate -----------------------------*/ .ng_donate { background-color: #ffffff; margin-top: -2rem; } .ng_donate .title_sections { margin-bottom: 2rem; } .ng_donate .gr_don_form { background-color: #ffc329; padding: 2rem; color: #ffffff; } .ng_donate .gr_don_form .form_donate .input-group input { height: 55px; border: 0; border-radius: 0; font-size: 25px; font-weight: 600; color: #0b2238; padding-left: 1.25rem; } .ng_donate .gr_don_form .form_donate .input-group input::placeholder { font-size: 13px; font-weight: 400; color: #6c7a87; } .ng_donate .gr_don_form .form_donate .input-group input::-webkit-inner-spin-button, .ng_donate .gr_don_form .form_donate .input-group input::-webkit-outer-spin-button { -webkit-appearance: none; } .ng_donate .gr_don_form .form_donate .input-group input:focus, .ng_donate .gr_don_form .form_donate .input-group input:active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; outline: 0; } .ng_donate .gr_don_form .form_donate .input-group .input-group-prepend .input-group-text { background-color: #ffffff; border: 0; border-left: 1px solid #edeef1; font-weight: 500; font-size: 16px; color: #6c7a87; padding: 0 1.5rem; } .ng_donate .gr_don_form .btn-primary { margin-top: .75rem; } /* CSS Table of Sections -------------------------- ** gz_blog -------------------------- ** blog_agency -------------------------- ** section__news -------------------------- ** news__workspace -------------------------- */ /*----------------------------- gz_blog -----------------------------*/ .gz_blog .title_sections a { text-decoration: underline; } .gz_blog .btn_outline { border: 1px solid #edeef1 !important; background-color: #ffffff !important; color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .gz_blog .btn_outline:hover { background-color: rgba(11, 34, 56, 0.01) !important; } .gz_blog .ig_blog .mg_img { margin-bottom: 1.5rem; } .gz_blog .ig_blog .mg_img img { width: 100%; height: 230px; object-fit: cover; } .gz_blog .ig_blog h4 { font-size: 18px; font-weight: 500; color: #0b2238; margin-bottom: 0.75rem; } .gz_blog .ig_blog p { font-weight: 400; font-size: 14px; color: #6c7a87; } /*----------------------------- blog_agency -----------------------------*/ .blog_agency { position: relative; } .blog_agency::before { content: ""; background-color: #f7f8fa; width: 95%; height: 230px; position: absolute; display: block; top: 15rem; right: 0; } @media (max-width: 767px) { .blog_agency::before { display: none; } } .blog_agency .item_art { -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; display: block; } .blog_agency .item_art .item_top { display: inline-flex; margin-bottom: 1rem; } .blog_agency .item_art .item_top .date_mo { margin-right: 1.25rem; display: inline-block; } .blog_agency .item_art .item_top .date_mo h5 { font-size: 30px; font-weight: 500; color: #0b2238; margin-bottom: 0; } .blog_agency .item_art .item_top .date_mo span { font-size: 14px; font-weight: 400; color: #6c7a87; display: block; } .blog_agency .item_art .item_top .item_cai { display: inline-block; color: #0b2238; font-weight: 500; margin: auto; } .blog_agency .item_art .item_top .item_cai span { display: block; font-size: 14px; font-weight: 400; } .blog_agency .item_art .item_top .item_cai .name_pub { color: #6c7a87; font-size: 13px; } .blog_agency .item_art img { width: 100%; object-fit: cover; height: 200px; border-radius: 12px; } .blog_agency .item_art .ga_info { margin-top: 0.938rem; } .blog_agency .item_art .ga_info .tags__bottom span { color: #6c7a87; font-size: 13px; font-weight: 400; padding-right: 0.3rem; } .blog_agency .item_art .ga_info h4 { font-size: 20px; font-weight: 500; color: #0b2238; margin-bottom: 0.5rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .blog_agency .item_art:hover h4 { color: #165df5; } .blog_agency .items { padding-right: 2rem; } .blog_agency .items:nth-of-type(2) .item_art { margin-top: -10rem; } @media (max-width: 991px) { .blog_agency .items:nth-of-type(2) .item_art { margin: inherit; } } .blog_agency .items:nth-of-type(3) .is_image { margin-top: -5.5rem; } .blog_agency .items:nth-of-type(3) .is_image img { height: 330px; } @media (max-width: 991px) { .blog_agency .items:nth-of-type(3) .is_image { margin: inherit; } } .blog_agency .items:nth-of-type(4) .is_image { margin-top: 1.5rem; } .blog_agency .items:nth-of-type(4) .is_image img { height: 260px; } @media (max-width: 991px) { .blog_agency .items:nth-of-type(4) .is_image { margin: inherit; } } .blog_agency .items:nth-of-type(5) .item_art { margin-top: -8rem; } @media (max-width: 991px) { .blog_agency .items:nth-of-type(5) .item_art { margin: inherit; } } .blog_agency .items:nth-of-type(6) .item_art { margin-top: -6rem; } @media (max-width: 991px) { .blog_agency .items:nth-of-type(6) .item_art { margin: inherit; } } /*----------------------------- section__news -----------------------------*/ .section__news { background: linear-gradient(#ffffff, #f9f9f9); width: 93%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; border-radius: 20px; } @media (max-width: 991px) { .section__news { margin-top: 3.75rem; width: 100%; } } .section__news .block__news_ch .item:first-of-type { margin-top: -3.75rem; } .section__news .block__news_ch .item:last-of-type { margin-top: -6.875rem; } @media (max-width: 767px) { .section__news .block__news_ch .item { margin-top: inherit !important; margin-bottom: 1.875rem; } } .section__news .block__news_ch .item__news { padding: 1.375rem; border-radius: 12px; background-color: #ffffff; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .section__news .block__news_ch .item__news .head_img { margin-bottom: 0.938rem; } .section__news .block__news_ch .item__news .head_img img { border-top-left-radius: 12px; border-top-right-radius: 12px; width: 100%; height: 140px; object-fit: cover; } @media (max-width: 767px) { .section__news .block__news_ch .item__news .head_img img { height: 180px; } } .section__news .block__news_ch .item__news .body__content span { display: block; margin-bottom: 0.625rem; color: #fd6b3b; font-size: 13px; } .section__news .block__news_ch .item__news .body__content h3 { margin-bottom: 0.625rem; font-size: 20px; font-weight: 500; color: #0b2238; } .section__news .block__news_ch .item__news .body__content p { margin-bottom: 0; font-size: 16px; color: #6c7a87; } .section__news .block__news_ch .item__news .footer__content { margin-top: 1.875rem; } .section__news .block__news_ch .item__news .footer__content .link__go { display: flex; justify-content: flex-end; color: #7bd88a; font-size: 14px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .section__news .block__news_ch .item__news .footer__content .link__go:hover { color: #0b2238; } /*----------------------------- news__workspace -----------------------------*/ .news__workspace .title_sections { margin-bottom: 3.75rem; } .news__workspace .fa__news { display: block; } .news__workspace .fa__news .img__cover { position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 1.25rem; } .news__workspace .fa__news .img__cover img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; -webkit-transform: scale3d(1, 1, 1) !important; -moz-transform: scale3d(1, 1, 1) !important; -o-transform: scale3d(1, 1, 1) !important; -ms-transform: scale3d(1, 1, 1) !important; transform: scale3d(1, 1, 1) !important; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .news__workspace .fa__news .img__cover.sm_height img { height: 180px; } .news__workspace .fa__news .body__content span { font-size: 16px; display: block; margin-bottom: 0.625rem; font-weight: 400; } .news__workspace .fa__news .body__content h3 { font-size: 20px; margin-bottom: 0.625rem; font-weight: 500; color: #0b2238; } .news__workspace .fa__news .body__content p { font-size: 16px; color: #6c7a87; margin-bottom: 0; font-weight: 400; } .news__workspace .fa__news:hover .img__cover img { -webkit-transform: scale3d(1.1, 1.1, 1) !important; -moz-transform: scale3d(1.1, 1.1, 1) !important; -o-transform: scale3d(1.1, 1.1, 1) !important; -ms-transform: scale3d(1.1, 1.1, 1) !important; transform: scale3d(1.1, 1.1, 1) !important; } .news__workspace .block_end .fa__news:first-child { margin-top: -3.125rem; } @media (max-width: 991px) { .news__workspace .block_end .fa__news:first-child { margin-top: 0; } } /* CSS Table of Sections -------------------------- ** slider_section -------------------------- */ /*----------------------------- slider_section -----------------------------*/ .slider_section .swiper-container .swiper-wrapper { margin-bottom: 3rem; } .slider_section .swiper-container .swiper-wrapper .swiper-slide { width: 800px; height: 500px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .slider_section .swiper-container .swiper-wrapper .swiper-slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 34, 56, 0.4); -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .slider_section .swiper-container .swiper-wrapper .swiper-slide img { width: 800px; height: 500px; object-fit: cover; } .slider_section .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active::before { background: rgba(11, 34, 56, 0); } .slider_section .swiper-container .swiper-button-next { width: 50px; height: 50px; background-color: #ffffff; border-radius: 50%; right: 20px; } .slider_section .swiper-container .swiper-button-next::after { content: '\e9b3'; font-family: 'The-Icon-of'; font-size: 22px; color: #0b2238; } .slider_section .swiper-container .swiper-button-prev { width: 50px; height: 50px; background-color: #ffffff; border-radius: 50%; left: 20px; } .slider_section .swiper-container .swiper-button-prev::after { content: '\e9b2'; font-family: 'The-Icon-of'; font-size: 22px; color: #0b2238; } .slider_section .swiper-container .swiper-pagination-progressbar { bottom: 0; top: inherit; height: 1.5px; left: 22.7%; width: 78%; background: rgba(11, 34, 56, 0.05); } @media (max-width: 767px) { .slider_section .swiper-container .swiper-pagination-progressbar { width: 100%; left: 0; } } .slider_section .swiper-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #0b2238; } /* CSS Table of Sections -------------------------- ** serction__mapch -------------------------- */ /*----------------------------- serction__mapch -----------------------------*/ .serction__mapch { background: linear-gradient(#ffffff, #f9f9f9); width: 93%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; border-radius: 20px; } @media (max-width: 991px) { .serction__mapch { width: 100%; } } .serction__mapch .title_sections { margin-bottom: 3.125rem; } .serction__mapch .content__map { position: relative; } .serction__mapch .content__map .bg_pin { position: absolute; z-index: 2; width: 11px; height: 11px; background-color: rgba(249, 53, 66, 0.85); border-radius: 100px; display: block; } .serction__mapch .content__map .bg_pin::before { content: ""; position: absolute; background: #f93542; border-radius: 50%; display: block; width: 100%; height: 100%; z-index: 1; opacity: 0.25; top: 0; left: 0; -webkit-animation: ripple-map 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(1) { top: 6%; right: 30%; } .serction__mapch .content__map .bg_pin:nth-of-type(2) { top: 17%; left: 28%; } .serction__mapch .content__map .bg_pin:nth-of-type(2)::before { -webkit-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(3) { top: 30%; left: 56%; } .serction__mapch .content__map .bg_pin:nth-of-type(3)::before { -webkit-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(4) { top: 60%; right: 26%; } .serction__mapch .content__map .bg_pin:nth-of-type(4)::before { -webkit-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(5) { top: 47%; left: 41%; } .serction__mapch .content__map .bg_pin:nth-of-type(5)::before { -webkit-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(6) { top: 62%; left: 47%; } .serction__mapch .content__map .bg_pin:nth-of-type(6)::before { -webkit-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(7) { top: 55%; left: 26%; } .serction__mapch .content__map .bg_pin:nth-of-type(7)::before { -webkit-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(8) { top: 70%; left: 35%; } .serction__mapch .content__map .bg_pin:nth-of-type(8)::before { -webkit-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.5s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .serction__mapch .content__map .bg_pin:nth-of-type(9) { top: 90%; left: 25%; } .serction__mapch .content__map .bg_pin:nth-of-type(9)::before { -webkit-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple-map 1.8s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } /* CSS Table of Sections -------------------------- ** Domain Search -------------------------- */ /*----------------------------- Domain Search -----------------------------*/ .search_section { background-color: rgba(11, 34, 56, 0.03); } .search_section .domain_search .input-group input { height: 65px; border: 0; border-radius: 8px; background-color: #ffffff; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 0 2rem; } @media (max-width: 767px) { .search_section .domain_search .input-group input { border-radius: 8px; } } .search_section .domain_search .input-group .input-group-append { position: relative; } .search_section .domain_search .input-group .input-group-append:before { content: ""; border-left: 1px solid #edeef1; width: 1px; height: 40px; margin: auto; position: relative; z-index: 20; } @media (max-width: 767px) { .search_section .domain_search .input-group .input-group-append:before { border-left: 0; } } .search_section .domain_search .input-group .input-group-append .select_item { border: 0; height: 65px; border-radius: 0; min-width: 130px; background-color: #ffffff !important; } .search_section .domain_search .input-group .input-group-append .select_item:focus { outline: 0; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; } @media (max-width: 767px) { .search_section .domain_search .input-group .input-group-append .select_item { border-radius: 8px; margin-top: 1rem; } } .search_section .domain_search .input-group .input-group-append .select_item.custom-select { background-color: #ffffff; background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Edown_key%3C/title%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E") no-repeat right 0.75rem center/18px 20px; } .search_section .domain_search .input-group .input-group-append .bg_button { background-color: #ffffff; border: 0; border-radius: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding-left: 1.5rem; } @media (max-width: 767px) { .search_section .domain_search .input-group .input-group-append .bg_button { background-color: transparent; margin-top: 1rem; } } .search_section .domain_search .input-group .input-group-append .btn_search { border-radius: 8px; background-color: #f93542; color: #ffffff; padding: 0 2.5rem; height: 65px; } .search_section .name_domain { margin-top: 2rem; } .search_section .name_domain .do_main { display: inline-block; color: #0b2238; font-size: 15px; font-weight: 500; margin: 0 1rem; } .search_section .name_domain .do_main span { color: #6c7a87; font-size: 13px; font-weight: 500; } /* CSS Table of Sections -------------------------- ** section_state -------------------------- ** state_demo2 -------------------------- */ /*----------------------------- section_state -----------------------------*/ .section_state { position: relative; overflow: hidden; } @media (max-width: 767px) { .section_state { padding-top: 5rem !important; } } .section_state .bb_qgency_state { text-align: center; } .section_state .bb_qgency_state .number_state .txt { font-size: 150px; font-weight: 700; background: linear-gradient(to left, #175df5, #d216f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 767px) { .section_state .bb_qgency_state .number_state .txt { font-size: 70px; } } .section_state .bb_qgency_state .blur_item { position: absolute; top: 0; height: 350px; width: 100%; -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) !important; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) !important; -o-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) !important; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) !important; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) !important; -webkit-background: rgba(255, 255, 255, 0.2) !important; -moz-background: rgba(255, 255, 255, 0.2) !important; -o-background: rgba(255, 255, 255, 0.2) !important; -ms-background: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.2) !important; -webkit-backdrop-filter: saturate(1) blur(20px) !important; -o-backdrop-filter: saturate(1) blur(20px) !important; -ms-backdrop-filter: saturate(1) blur(20px) !important; backdrop-filter: saturate(1) blur(20px) !important; } @-moz-document url-prefix() { .section_state .bb_qgency_state .blur_item { background: rgba(255, 255, 255, 0.7) !important; } } .section_state .bb_qgency_state .content_state { margin-top: 1rem; } .section_state .bb_qgency_state .content_state .it__em { text-align: center; } .section_state .bb_qgency_state .content_state .it__em .icon { border: 2px solid #edeef1; width: 60px; height: 60px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 1rem; } .section_state .bb_qgency_state .content_state .it__em .icon img { width: 25px; } .section_state .bb_qgency_state .content_state .it__em .info_txt h4 { color: #165df5; font-size: 20px; font-weight: 500; } .section_state .bb_qgency_state .content_state .it__em .info_txt p { font-size: 13px; color: #6c7a87; } .section_state .bb_qgency_state .users_profile img { position: absolute; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .section_state .bb_qgency_state .users_profile img:first-child { left: 0; top: -25%; } .section_state .bb_qgency_state .users_profile img:nth-child(2) { left: -10%; top: 35%; } .section_state .bb_qgency_state .users_profile img:nth-child(3) { left: 15%; top: 0; } .section_state .bb_qgency_state .users_profile img:nth-child(4) { left: 5%; bottom: 30%; } .section_state .bb_qgency_state .users_profile img:nth-child(5) { right: 6%; top: 2%; } .section_state .bb_qgency_state .users_profile img:nth-child(6) { right: -7%; bottom: 35%; } .section_state .bb_qgency_state .users_profile img:nth-child(7) { right: -6%; top: -23%; } .section_state .bb_qgency_state .link_state { margin-top: 1.5rem; } .section_state .bb_qgency_state .link_state .btn { margin: 0 0.5rem; } .section_state .bb_qgency_state .link_state .btn_join { background-color: #165df5; color: #ffffff; } .section_state .bb_qgency_state .link_state .btn_touch { border: 1px solid #edeef1; color: #0b2238; } .section_state .bb_qgency_state .link_state .btn_touch img { width: 20px; margin-right: 0.2rem; } .section_state.animetext .bb_qgency_state .blur_item { top: 27%; height: 130px; } @media (max-width: 767px) { .section_state.animetext .bb_qgency_state .blur_item { top: 7%; } } /*----------------------------- state_demo2 -----------------------------*/ @media (max-width: 767px) { .state_demo2 { padding-top: 5rem !important; } } .state_demo2 .bb_qgency_state .number_state .txt { background: linear-gradient(to left, #fd6b3b, #ffce53); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========= components ========== */ /*----------------------------- ripple -----------------------------*/ .ripple:active:before, .ripple:focus:before { background: #165df5; border-radius: 50px; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: 0; animation: ripple 1s cubic-bezier(0.29, -0.01, 0.17, 0.95); } /*----------------------------- ripple_circle -----------------------------*/ .ripple_circle:active:before, .ripple_circle:focus:before { background: #165df5; border-radius: 50%; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: 0; animation: rippleCircle 0.6s cubic-bezier(0.29, -0.01, 0.17, 0.95); } /*----------------------------- ripple_box -----------------------------*/ .ripple_box:active:before, .ripple_box:focus:before { background: #165df5; border-radius: 8px; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: 0; animation: ripple 0.7s cubic-bezier(0.29, -0.01, 0.17, 0.95); } /*----------------------------- scale -----------------------------*/ .scale { -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; transform: scale(1) translateZ(0); } .scale:active { transform: scale(0.95); } /*----------------------------- anime on hover (effect-letter) -----------------------------*/ .effect-letter { position: relative; overflow: hidden; } .effect-letter:not(.simple):before { content: ""; position: absolute; background: var(--pb, var(--hover-back)); top: 0; left: 0; right: 0; height: 200%; border-radius: var(--br, 40%); -webkit-transform: translateY(var(--y, 50%)); transform: translateY(var(--y, 50%)); -webkit-transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s); transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); } .effect-letter:not(.simple):after { content: ""; position: absolute; background: var(--pb, var(--hover-back)); top: 0; left: 0; right: 0; height: 200%; border-radius: var(--br, 40%); -webkit-transform: translateY(var(--y, 50%)); transform: translateY(var(--y, 50%)); -webkit-transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s); transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s); } .effect-letter div { z-index: 1; position: relative; display: -webkit-box; display: flex; } .effect-letter div span { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: var(--name, none) 0.7s linear forwards 0.18s; animation: var(--name, none) 0.7s linear forwards 0.18s; } .effect-letter.in { --name: move; } .effect-letter.in:not(.out) { --c: var(--color-hover); --b: var(--background-hover); } .effect-letter.in:not(.out):before { --y: 0; --br: 5%; } .effect-letter.in:not(.out):after { --y: 0; --br: 5%; --br: 10%; --d-d: 0.02s; } .effect-letter.in.out { --name: move-out; } .effect-letter.in.out:before { --d-d: 0.06s; } /*----------------------------- Fliker for attention -----------------------------*/ .flicker { -webkit-animation: flicker-1 2s linear infinite both !important; -moz-animation: flicker-1 2s linear infinite both !important; -o-animation: flicker-1 2s linear infinite both !important; -ms-animation: flicker-1 2s linear infinite both !important; animation: flicker-1 2s linear infinite both !important; } /*----------------------------- floating -----------------------------*/ .floating { -webkit-animation: floating 1.5s infinite ease-in-out !important; -moz-animation: floating 1.5s infinite ease-in-out !important; -o-animation: floating 1.5s infinite ease-in-out !important; -ms-animation: floating 1.5s infinite ease-in-out !important; animation: floating 1.5s infinite ease-in-out !important; } .floating-2 { -webkit-animation: floating-2 2s infinite ease-in-out !important; -moz-animation: floating-2 2s infinite ease-in-out !important; -o-animation: floating-2 2s infinite ease-in-out !important; -ms-animation: floating-2 2s infinite ease-in-out !important; animation: floating-2 2s infinite ease-in-out !important; } .floating-3 { -webkit-animation: floating-3 2.5s infinite ease-in-out !important; -moz-animation: floating-3 2.5s infinite ease-in-out !important; -o-animation: floating-3 2.5s infinite ease-in-out !important; -ms-animation: floating-3 2.5s infinite ease-in-out !important; animation: floating-3 2.5s infinite ease-in-out !important; } .floating-4 { -webkit-animation: floating-4 3s infinite ease-in-out !important; -moz-animation: floating-4 3s infinite ease-in-out !important; -o-animation: floating-4 3s infinite ease-in-out !important; -ms-animation: floating-4 3s infinite ease-in-out !important; animation: floating-4 3s infinite ease-in-out !important; } /*----------------------------- KeyFrames -----------------------------*/ @keyframes move { 30%, 36% { -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part))); transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part))); } 50% { -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part))); transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part))); } 70% { -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part))); transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part))); } } @-webkit-keyframes move-out { 30%, 36% { -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part))); transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part))); } 50% { -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part))); transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part))); } 70% { -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part))); transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part))); } } @-webkit-keyframes ripple-map { to { transform: scale(5); opacity: 0; } } @-moz-keyframes ripple-map { to { transform: scale(5); opacity: 0; } } @keyframes ripple-map { to { transform: scale(5); opacity: 0; } } @-webkit-keyframes ripple { to { transform: scaleX(1.3) scaleY(1.6); opacity: 0; } } @-moz-keyframes ripple { to { transform: scaleX(1.3) scaleY(1.6); opacity: 0; } } @keyframes ripple { to { transform: scaleX(1.3) scaleY(1.6); opacity: 0; } } @-webkit-keyframes rippleCircle { to { transform: scale(4.5); opacity: 0; } } @-moz-keyframes rippleCircle { to { transform: scale(4.5); opacity: 0; } } @keyframes rippleCircle { to { transform: scale(4.5); opacity: 0; } } @-webkit-keyframes RippleMenu { to { transform: scale(10); opacity: 0; } } @-moz-keyframes RippleMenu { to { transform: scale(10); opacity: 0; } } @keyframes RippleMenu { to { transform: scale(10); opacity: 0; } } /** * ---------------------------------------- * animation flicker-1 * ---------------------------------------- */ @-webkit-keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } @-moz-keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } @keyframes flicker-1 { 0%, 100% { opacity: 1; } 41.99% { opacity: 1; } 42% { opacity: 0; } 43% { opacity: 0; } 43.01% { opacity: 1; } 47.99% { opacity: 1; } 48% { opacity: 0; } 49% { opacity: 0; } 49.01% { opacity: 1; } } /** * ---------------------------------------- * floating * ---------------------------------------- */ @-webkit-keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(20%); } 100% { transform: translateY(0%); } } @-moz-keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(20%); } 100% { transform: translateY(0%); } } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(20%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating-2 { 0% { transform: translateY(0%); } 50% { transform: translateY(25%); } 100% { transform: translateY(0%); } } @-moz-keyframes floating-2 { 0% { transform: translateY(0%); } 50% { transform: translateY(25%); } 100% { transform: translateY(0%); } } @keyframes floating-2 { 0% { transform: translateY(0%); } 50% { transform: translateY(25%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating-3 { 0% { transform: translateY(0%); } 50% { transform: translateY(30%); } 100% { transform: translateY(0%); } } @-moz-keyframes floating-3 { 0% { transform: translateY(0%); } 50% { transform: translateY(30%); } 100% { transform: translateY(0%); } } @keyframes floating-3 { 0% { transform: translateY(0%); } 50% { transform: translateY(30%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating-4 { 0% { transform: translateY(0%); } 50% { transform: translateY(35%); } 100% { transform: translateY(0%); } } @-moz-keyframes floating-4 { 0% { transform: translateY(0%); } 50% { transform: translateY(35%); } 100% { transform: translateY(0%); } } @keyframes floating-4 { 0% { transform: translateY(0%); } 50% { transform: translateY(35%); } 100% { transform: translateY(0%); } } /** * ---------------------------------------- * animation bounce-top * ---------------------------------------- */ @-webkit-keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } @-moz-keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } @keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } /** * ---------------------------------------- * animation puff-in-center * ---------------------------------------- */ @-webkit-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-moz-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /** * ---------------------------------------- * animation puff-out-center * ---------------------------------------- */ @-webkit-keyframes puff-out-center { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } } @-moz-keyframes puff-out-center { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } } @keyframes puff-out-center { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } } /** * ---------------------------------------- * animation scale-in-center * ---------------------------------------- */ @-webkit-keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-right * ---------------------------------------- */ @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-moz-keyframes slide-in-right { 0% { -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(200px); transform: translateX(200px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-bottom * ---------------------------------------- */ @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(150px); transform: translateY(150px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-moz-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(150px); transform: translateY(150px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(150px); transform: translateY(150px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation blink-1 * ---------------------------------------- */ @-webkit-keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes circleRipple { from { -webkit-transform: scale(0); opacity: 1; } to { -webkit-transform: scale(2); opacity: 0; } } @-moz-keyframes circleRipple { from { -webkit-transform: scale(0); opacity: 1; } to { -webkit-transform: scale(2); opacity: 0; } } @keyframes circleRipple { from { -webkit-transform: scale(0); opacity: 1; } to { -webkit-transform: scale(2); opacity: 0; } } /** * ---------------------------------------- * animation puff-in-center * ---------------------------------------- */ @-webkit-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-moz-keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes puff-in-center { 0% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-webkit-keyframes pulseRipple { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(2); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } @-moz-keyframes pulseRipple { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(2); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } @keyframes pulseRipple { 0% { -webkit-transform: scale(1.2); opacity: 0; } 50% { -webkit-transform: scale(2); opacity: 1; } 100% { -webkit-transform: scale(1.2); opacity: 0; } } /** * ---------------------------------------- * animation wobble-hor-bottom * ---------------------------------------- */ @-webkit-keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @-moz-keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @keyframes wobble-hor-bottom { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } /** * ---------------------------------------- * animation text-focus-in * ---------------------------------------- */ @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @-moz-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /** * ---------------------------------------- * animation tilt-up * ---------------------------------------- */ @keyframes tilt-up { 40%, 60% { transform: perspective(500px) rotateX(8deg); } } @keyframes tilt-down { 40%, 60% { transform: perspective(500px) rotateX(-8deg); } } /** * ---------------------------------------- * Sweep To Top * ---------------------------------------- */ .sweep_top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; overflow: hidden; } .sweep_top::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #0b2238; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); } .sweep_top:hover, .sweep_top:focus, .sweep_top:active { color: white; } .sweep_top:hover::before, .sweep_top:focus::before, .sweep_top:active::before { -webkit-transform: scaleY(1); transform: scaleY(1); } /** * ---------------------------------------- * Sweep Letter * ---------------------------------------- */ .sweep_letter { overflow: hidden; } .sweep_letter .inside_item { overflow: hidden; } .sweep_letter .inside_item span { position: relative; transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; -moz-transition: transform 500ms; display: flex; justify-content: center; align-items: center; } .sweep_letter .inside_item span::after { content: attr(data-hover); position: absolute; top: -30px; left: auto; transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); color: #ffffff; } .sweep_letter:hover .inside_item span, .sweep_letter:focus .inside_item span { transform: translateY(30px); -webkit-transform: translateY(30px); -moz-transform: translateY(30px); } /** * ---------------------------------------- * fade-up AOS * ---------------------------------------- */ html:not(.no-js) [data-aos="fade-up"] { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } /*=== Small Button ==== ==================*/ .btn_sm_primary { padding: 0.7rem 1.55rem; font-size: 15px; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .btn_sm_primary:hover { opacity: 0.9; } /*=== Medium Button ==== ==================*/ .btn_md_primary { padding: 0.85rem 1.8rem; font-size: 15px; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .btn_md_primary:hover { opacity: 0.9; } /*=== Large Button ==== ==================*/ .btn_lg_primary { padding: 0.9rem 2.3rem; font-size: 15px; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .btn_lg_primary:hover { opacity: 0.9; } /*=== XLarge Button ==== ==================*/ .btn_xl_primary { padding: 1.1rem 2.3rem; font-size: 15px; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .btn_xl_primary:hover { opacity: 0.9; } /*----------------------------- btn-default -----------------------------*/ .header-nav-center .btn-default { margin-right: 0.5rem; } /*----------------------------- btn video -----------------------------*/ .btn-video { background-color: #165df5; color: #ffffff; padding: 0.9rem 1.55rem; text-align: center; position: relative; } .btn-video:before { background: #165df5; border-radius: 50px; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: 0; -webkit-animation: ripple 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -moz-animation: ripple 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -o-animation: ripple 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; -ms-animation: ripple 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; animation: ripple 1.3s infinite cubic-bezier(0.29, -0.01, 0.17, 0.95) !important; } .btn-video.ripple_box:before { border-radius: 8px; } .btn-video .tio { vertical-align: sub; margin-right: 0.2rem; } .btn-video:hover { color: #ffffff; } /*----------------------------- play_video -----------------------------*/ .play_video { width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; background-color: #0b2238; padding: 0; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .play_video::after { content: ""; width: 70px; height: 70px; position: absolute; display: block; z-index: -1; background: rgba(11, 34, 56, 0.1); border-radius: 50%; } .play_video::before { content: ""; position: absolute; border-radius: 50%; display: block; height: 100%; width: 100%; z-index: -1; background: rgba(11, 34, 56, 0.1); -webkit-animation: pulseRipple 2.5s ease-in-out infinite !important; -moz-animation: pulseRipple 2.5s ease-in-out infinite !important; -o-animation: pulseRipple 2.5s ease-in-out infinite !important; -ms-animation: pulseRipple 2.5s ease-in-out infinite !important; animation: pulseRipple 2.5s ease-in-out infinite !important; } .play_video:focus { background-color: #0b2238; } .play_video .tio { font-size: 24px; color: #ffffff; } /*----------------------------- Smartphone app -----------------------------*/ .app_smartphone .btn--app { display: inline-block; margin-right: 1.5rem; } .app_smartphone .btn--app .icon { border-radius: 20px; width: 50px; height: 50px; background-color: #17e79b; padding: 0.75rem; margin-right: 0.75rem; } .app_smartphone .btn--app .icon .tio { color: #ffffff; font-size: 25px; display: flex; text-align: center; justify-content: center; } .app_smartphone .btn--app .txt span { color: #9da6af; font-size: 12px; font-weight: 400; } .app_smartphone .btn--app .txt h4 { font-weight: 400; color: #ffffff; font-size: 18px; margin-top: 0.2rem; margin-bottom: 0; } /*----------------------------- Menu Mobile -----------------------------*/ .menu { color: #0b2238; width: 36px; height: 36px; padding: 0; margin: 0; outline: none; position: relative; border: none; background: none; cursor: pointer; -webkit-appearence: none; -webkit-tap-highlight-color: transparent; } .menu.ripplemenu:active:before { background: #165df5; border-radius: 50%; content: ""; display: block; height: 100%; opacity: 0.25; position: absolute; width: 100%; z-index: -1; top: 0; left: -9px; animation: RippleMenu 0.3s cubic-bezier(0.29, -0.01, 0.17, 0.95); } .menu svg { width: 44px; height: 48px; top: -6px; left: -14px; stroke: #0b2238; stroke-width: 0.2rem; stroke-linecap: round; stroke-linejoin: round; fill: none; display: block; position: absolute; } .menu svg path { transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s); stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px); stroke-dashoffset: var(--offset, 126px); transform: translateZ(0); } .menu svg path:nth-child(2) { --duration: 0.7s; --easing: ease-in; --offset: 100px; --array-2: 74px; } .menu svg path:nth-child(3) { --offset: 133px; --array-2: 107px; } .menu.active svg path { --offset: 57px; } .menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) { --delay: 0.15s; --easing: cubic-bezier(0.2, 0.4, 0.2, 1.1); } .menu.active svg path:nth-child(2) { --duration: 0.4s; --offset: 2px; --array-1: 1px; } .menu.active svg path:nth-child(3) { --offset: 58px; } /*----------------------------- Button DropDown Download -----------------------------*/ .drop_download { position: relative; color: #ffffff; font-size: 15px; padding: 0.6rem 1.75rem; border-radius: 8px; text-align: center; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .drop_download .links-btn { position: absolute; opacity: 0; pointer-events: none; } .drop_download .links-btn a { color: #aa9bb3; font-size: 14px; display: block; padding-top: 0.8rem; text-align: left; padding-left: 0.25rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .drop_download .links-btn a:nth-child(1) { transform: translate(-12px); } .drop_download .links-btn a:nth-child(2) { transform: translate(-16px); } .drop_download .links-btn a:nth-child(3) { transform: translate(-22px); } .drop_download:hover { color: #ffffff; } .drop_download:hover:before { content: ""; background-color: rgba(255, 255, 255, 0.1); height: 155px; width: 130px; position: absolute; border-radius: 8px; left: 0; top: 0; } .drop_download:hover .links-btn { opacity: 1; pointer-events: auto; } .drop_download:hover .links-btn a { transform: translate(0px); } .drop_download:hover .links-btn a:nth-child(1) { -webkit-transition: 0.2s !important; -moz-transition: 0.2s !important; -o-transition: 0.2s !important; -ms-transition: 0.2s !important; transition: 0.2s !important; } .drop_download:hover .links-btn a:nth-child(2) { -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .drop_download:hover .links-btn a:nth-child(3) { -webkit-transition: 0.5s !important; -moz-transition: 0.5s !important; -o-transition: 0.5s !important; -ms-transition: 0.5s !important; transition: 0.5s !important; } .drop_download:hover .links-btn a:hover { color: #ffffff; } /*----------------------------- Button Cryptocurrency (Dark -----------------------------*/ .button--click .btn-token { border-radius: 8px; font-size: 16px; font-weight: 500; text-align: center; color: #ffffff; margin: 0 0.75rem; display: inline-flex; justify-content: center; } .button--click .btn-token.c-gradient { -webkit-background: linear-gradient(90deg, #6bb0f8 0%, #fd4ffe 100%) !important; -moz-background: linear-gradient(90deg, #6bb0f8 0%, #fd4ffe 100%) !important; -o-background: linear-gradient(90deg, #6bb0f8 0%, #fd4ffe 100%) !important; -ms-background: linear-gradient(90deg, #6bb0f8 0%, #fd4ffe 100%) !important; background: linear-gradient(90deg, #6bb0f8 0%, #fd4ffe 100%) !important; } .button--click .btn-token.defalult { border: 1px solid rgba(255, 255, 255, 0.4); } /*----------------------------- Button Read More -----------------------------*/ .btn_readmore { color: #165df5; font-size: 16px; position: relative; padding-left: 0; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .btn_readmore:before { content: ""; position: absolute; left: -0.7rem; top: 0; width: 45%; height: 100%; background-color: rgba(22, 93, 245, 0.1); -webkit-transition: 0.4s cubic-bezier(0.4, 0.2, 0.01, 1.01) !important; -moz-transition: 0.4s cubic-bezier(0.4, 0.2, 0.01, 1.01) !important; -o-transition: 0.4s cubic-bezier(0.4, 0.2, 0.01, 1.01) !important; -ms-transition: 0.4s cubic-bezier(0.4, 0.2, 0.01, 1.01) !important; transition: 0.4s cubic-bezier(0.4, 0.2, 0.01, 1.01) !important; } .btn_readmore:hover { color: #165df5; } .btn_readmore:hover:before { width: 0; } /*----------------------------- Back to top with progress indicator -----------------------------*/ .prgoress_indicator { position: fixed; right: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(22, 93, 245, 0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transform: translateY(15px) !important; -moz-transform: translateY(15px) !important; -o-transform: translateY(15px) !important; -ms-transform: translateY(15px) !important; transform: translateY(15px) !important; -webkit-transition: all 200ms linear !important; -moz-transition: all 200ms linear !important; -o-transition: all 200ms linear !important; -ms-transition: all 200ms linear !important; transition: all 200ms linear !important; } .prgoress_indicator.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -o-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } .prgoress_indicator::after { position: absolute; font-family: "The-Icon-of"; content: "\e9a2"; text-align: center; line-height: 46px; font-size: 18px; color: rgba(22, 93, 245, 0.2); left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear !important; -moz-transition: all 200ms linear !important; -o-transition: all 200ms linear !important; -ms-transition: all 200ms linear !important; transition: all 200ms linear !important; } .prgoress_indicator::before { position: absolute; font-family: "The-Icon-of"; content: "\e9a2"; text-align: center; line-height: 46px; font-size: 18px; opacity: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear !important; -moz-transition: all 200ms linear !important; -o-transition: all 200ms linear !important; -ms-transition: all 200ms linear !important; transition: all 200ms linear !important; } .prgoress_indicator:hover::after { color: #165df5; } .prgoress_indicator:hover:before { opacity: 1; } .prgoress_indicator svg path { fill: none; } .prgoress_indicator svg.progress-circle path { stroke: #165df5; stroke-width: 4; box-sizing: border-box; -webkit-transition: all 200ms linear !important; -moz-transition: all 200ms linear !important; -o-transition: all 200ms linear !important; -ms-transition: all 200ms linear !important; transition: all 200ms linear !important; } /*----------------------------- form-group -----------------------------*/ .form-group label { font-size: 14px; font-weight: 400; color: #0b2238; } .form-group input, .form-group select { height: 55px; padding-left: 1.25rem; color: #0b2238 !important; font-size: 16px; border-radius: 8px; font-weight: 500; border-color: #edeef1; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .form-group input:focus, .form-group input:active, .form-group select:focus, .form-group select:active { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; border-color: #165df5; } .form-group input::placeholder, .form-group select::placeholder { color: rgba(11, 34, 56, 0.5); font-size: 13px; font-weight: 400; } .form-group .custom-select { background-color: #ffffff; background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Edown_key%3C/title%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E") no-repeat right 0.75rem center/18px 20px; } /*----------------------------- Select Language -----------------------------*/ .select-menu { position: relative; z-index: 1; font-weight: 500; font-size: 14px; line-height: 25px; width: 120px; } .select-menu select, .select-menu .button { margin: 0; border: 0; text-align: left; text-transform: none; -webkit-appearance: none; } .select-menu select { pointer-events: none; user-select: none; opacity: 0; padding: 15px 36px 6px 15px; visibility: hidden; font-weight: 500; font-size: 14px; line-height: 25px; } .select-menu ul { margin: 0; padding: 0; list-style: none; position: absolute; left: 0; top: 0; right: 0; transform: translateY(var(--t)); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); } .select-menu ul li { padding: 9px 36px 8px 15px; cursor: pointer; } .select-menu > ul { background: #122349; color: #6c7a87; border-radius: 8px; } .select-menu > ul li { transition: color 0.3s ease; } .select-menu > ul li:hover { color: #9da6af; } .select-menu .button { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0; z-index: 1; width: 100%; display: block; overflow: hidden; border-radius: 8px; color: #ffffff; font-weight: 400; font-size: 15px; background: rgba(255, 255, 255, 0.05); } .select-menu .button em { --r: 45deg; display: block; position: absolute; right: 15px; top: 2px; width: 7px; height: 7px; margin-top: 13px; -webkit-backface-visibility: hidden; } .select-menu .button em:before, .select-menu .button em:after { --o: 0.4; content: ""; width: 7px; height: 7px; opacity: var(--o); display: block; position: relative; transition: opacity 0.2s ease; transform: rotate(var(--r)) scale(0.75); } .select-menu .button em:before { border-left: 2px solid #ffffff; border-top: 2px solid #ffffff; top: 1px; } .select-menu .button em:after { border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; bottom: 1px; } .select-menu:not(.open) > ul { opacity: 0; pointer-events: none; } .select-menu.open.tilt-up { animation: tilt-up 0.4s linear forwards; } .select-menu.open.tilt-up .button em:before { --o: 1; } .select-menu.open.tilt-down { animation: tilt-down 0.4s linear forwards; } .select-menu.open.tilt-down .button em:after { --o: 1; } /*----------------------------- input_subscribe -----------------------------*/ .input_subscribe.dark .item_input { position: relative; } .input_subscribe.dark .item_input input { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.2); height: 65px; color: #ffffff !important; font-size: 16px; padding-right: 6rem; } .input_subscribe.dark .item_input input::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: 13px; } .input_subscribe.dark .item_input .btn_subscribe { position: absolute; right: 0.75rem; top: 0.5rem; background-color: transparent; } .input_subscribe.dark .item_input:hover .btn_subscribe { background-color: #fd6b3b; color: #ffffff; } /*----------------------------- modal -----------------------------*/ .modal .modal-content { border-radius: 12px; border: 0; padding: 2rem; } .modal .modal-content .modal-header, .modal .modal-content .modal-footer { border: 0; } .modal .modal-content .close { background-color: rgba(11, 34, 56, 0.06); display: flex; justify-content: center; align-items: center; opacity: 1; width: 40px; height: 40px; border-radius: 50%; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .modal .modal-content .close .tio { font-size: 18px; } .modal .modal-content .close:hover { opacity: 1; background-color: #0b2238; text-shadow: none; } .modal .modal-content .close:hover .tio { color: #ffffff; } @media (min-width: 768px) { .modal.mdllaccount .modal-dialog { max-width: 380px; } } .modal.mdllaccount .modal-body { padding: 0; } .modal.mdllaccount .form_account .head_account { justify-content: center; align-items: center; text-align: center; margin-bottom: 1.5rem; } .modal.mdllaccount .form_account .head_account .img_profile img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin-bottom: 1.25rem; } .modal.mdllaccount .form_account .head_account .title h4 { font-size: 18px; font-weight: 500; } .modal.mdllaccount .form_account .head_account .title p { font-size: 14px; color: #6c7a87; font-weight: 400; } .modal.mdllaccount .btn_login { width: 100%; background-color: #165df5; text-align: center; color: #ffffff; display: inline-flex; justify-content: center; align-items: center; } /*----------------------------- box--signup -----------------------------*/ .box--signup { position: fixed; height: 100vh; background-color: #ffffff; padding: 1rem 5rem 1rem 4rem; z-index: 15; top: 0; right: 0; max-width: 530px; overflow: auto; } @media (max-width: 991px) { .box--signup { max-width: 350px; padding: 1rem 2rem; } } .box--signup::-webkit-scrollbar { width: 0.4rem; } .box--signup::-webkit-scrollbar-thumb { background-color: #edeef1; outline: 0; border-radius: 8px; } @media (max-width: 767px) { .box--signup { display: none; } } .box--signup .title { font-size: 25px; font-weight: 600; margin-bottom: 1.5rem; color: #0b2238; } .box--signup .links--account .nav-pills { justify-content: flex-end; margin-bottom: 2rem; } .box--signup .links--account .nav-pills .nav-item .nav-link { color: #0b2238; font-size: 16px; font-weight: 400; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .box--signup .links--account .nav-pills .nav-item .nav-link.active { color: #165df5; background-color: transparent; } /*----------------------------- other_login -----------------------------*/ .other_login { margin-bottom: 1.5rem; } .other_login .btn-loin-google { position: relative; border-radius: 8px; padding: 1rem; background-color: rgba(11, 34, 56, 0.05); min-width: 300px; font-size: 15px; text-align: center; margin-right: 1rem; } @media (max-width: 991px) { .other_login .btn-loin-google { min-width: 200px; } } .other_login .btn-loin-google .tio { position: absolute; margin-right: 2rem; left: 1rem; top: 1.2rem; color: #0b2238; font-size: 19px; } @media (max-width: 991px) { .other_login .btn-loin-google .tio { display: none; } } .other_login .btn_twitter { width: 54px; height: 54px; border: 1px solid #edeef1; border-radius: 8px; } .other_login .btn_twitter .tio { color: #6c7a87; font-size: 20px; display: flex; justify-content: center; } .other_login .line-or { border-bottom: 1px solid #edeef1; position: relative; margin: 2rem 0; } .other_login .line-or .or { position: absolute; padding: 0 1rem; background-color: #ffffff; font-size: 16px; color: #6c7a87; text-align: center; top: -12px; left: 40%; text-transform: capitalize; } /*----------------------------- Modal video -----------------------------*/ .mdll_video { background: rgba(0, 0, 0, 0.8); } .mdll_video .modal-content { border: 0; border-radius: 0; padding: 0; } .mdll_video .modal-content .modal-body { padding: 0; } .mdll_video .bbt_close { position: absolute; width: 50px; height: 50px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; top: 5%; right: 5%; opacity: 1; background-color: #000; box-shadow: none; -webkit-transition: 0.4s !important; -moz-transition: 0.4s !important; -o-transition: 0.4s !important; -ms-transition: 0.4s !important; transition: 0.4s !important; } .mdll_video .bbt_close .tio { color: #ffffff; font-size: 18px; } .mdll_video .bbt_close:hover { opacity: 1 !important; border: 1px solid #f93542; } .mdll_video .bbt_close:focus:before { background: #f93542; } .mdll_video .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .mdll_video .embed-responsive .embed-responsive-item { border-radius: 0; } /*----------------------------- transform translate -----------------------------*/ #animate1 { -webkit-transition: transform 500ms cubic-bezier(0.5, 0, 0, 1) !important; -moz-transition: transform 500ms cubic-bezier(0.5, 0, 0, 1) !important; -o-transition: transform 500ms cubic-bezier(0.5, 0, 0, 1) !important; -ms-transition: transform 500ms cubic-bezier(0.5, 0, 0, 1) !important; transition: transform 500ms cubic-bezier(0.5, 0, 0, 1) !important; } .translat { -webkit-transform: translate(100%) !important; -moz-transform: translate(100%) !important; -o-transform: translate(100%) !important; -ms-transform: translate(100%) !important; transform: translate(100%) !important; } /*----------------------------- logos_section -----------------------------*/ .tooltip .arrow { display: none; } .tooltip .tooltip-inner { background-color: #0b2238; border-radius: 5px; box-shadow: 0; outline: 0; border: 0; color: #ffffff; } /*----------------------------- toast -----------------------------*/ .toast { position: fixed; opacity: 0; bottom: -6rem; border: 0; border-radius: 8px; padding: 1.25rem 2rem; background-color: #ffffff; backdrop-filter: blur(0); z-index: 999; -webkit-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -moz-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -o-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -ms-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -webkit-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -moz-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -o-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; -ms-box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; box-shadow: 0px 0px 40px 0px rgba(11, 34, 56, 0.06) !important; } .toast .toast-body { padding: 0; } .toast.toast_demo .close { margin: 0; padding: 0; position: absolute; right: 14px; font-size: 18px; top: 13px; } .toast.toast_demo h5 { font-size: 16px; font-weight: 500; color: #0b2238; } .toast.toast_demo p { margin-bottom: 0; font-size: 16px; color: #6c7a87; } .toast.toast_demo p a { display: inline-block; color: #165df5; } .toast.show { display: block; opacity: 1; pointer-events: all; bottom: 1.5rem; -webkit-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -moz-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -o-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -ms-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; } .toast.hide { display: block; opacity: 0; pointer-events: none; -webkit-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -moz-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -o-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; -ms-transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1) !important; } /* ========= layout (Footer) ========== */ /* CSS Table of Sections -------------------------- ** default_footer -------------------------- ** defalut-footer (Dark & light) -------------------------- ** footer_short -------------------------- ** theme_crypto -------------------------- ** gq_footer -------------------------- ** chiy_footer -------------------------- ** foot_demo2 -------------------------- ** foot_demo3 -------------------------- ** footer__ch -------------------------- ** footer__workspace -------------------------- */ /*----------------------------- default_footer -----------------------------*/ .default_footer { /*----------------------------- dark -----------------------------*/ /*----------------------------- light -----------------------------*/ } .default_footer.dark { position: relative; background-color: #05173f; overflow: hidden; } .default_footer.dark:before { content: ""; position: absolute; right: 0; top: -2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='247.826' height='331.438' viewBox='0 0 247.826 331.438'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Path_383' data-name='Path 383' d='M3062.9,15531H2815.072v331.438H3062.9Z' transform='translate(-1562.898 -9045.335)' fill='%23fff'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Mask_Group_27' data-name='Mask Group 27' transform='translate(-1252.174 -6485.665)' clip-path='url(%23clip-path)'%3E%3Cpath id='Subtraction_6' data-name='Subtraction 6' d='M653-8713.9h0v0L487.734-9000.017a90.008,90.008,0,0,0-14.44-18.771,90.037,90.037,0,0,0-18.5-14.158,90.034,90.034,0,0,0-21.514-8.939A90.023,90.023,0,0,0,409.8-9045H653ZM-847-9044.787h0V-9045h6.078c-2.016,0-4.061.074-6.077.213Z' transform='translate(847 15531)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); background-repeat: no-repeat; width: 247px; height: 331px; z-index: 2; } @media (max-width: 991px) { .default_footer.dark:before { width: 160px; } } @media (max-width: 767px) { .default_footer.dark:before { display: none; } } .default_footer.dark .shape_overlay { width: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: 0; opacity: 0.06; } .default_footer.dark.dark .title_sections h2 { color: #ffffff; } .default_footer.dark.dark .title_sections p { color: #9da6af; } .default_footer.dark .dashed-line { border-bottom: 1px dashed rgba(255, 255, 255, 0.3); max-width: 250px; } .default_footer.light::before { display: none; } .default_footer.light .item_about .logo { color: #0b2238; } .default_footer.light .item_about p { color: #6c7a87; } .default_footer.light .item_about .address span { color: #0b2238; } .default_footer.light .item_about .address span a { color: #165df5; } .default_footer.light .item_links h4 { color: #0b2238; } .default_footer.light .item_links .nav-link { color: #6c7a87; } .default_footer.light .item_links .nav-link:hover { color: #0b2238; } .default_footer.light .item_subscribe h4 { color: #0b2238; } .default_footer.light .item_subscribe p { color: #6c7a87; } .default_footer.light .item_subscribe .input_subscribe input { border-color: #edeef1; color: #0b2238 !important; } .default_footer.light .item_subscribe .input_subscribe input::placeholder { color: #9da6af; } .default_footer.light .item_subscribe .input_subscribe .btn_subscribe { color: #0b2238; } .default_footer.light .item_subscribe .input_subscribe:hover .btn_subscribe { background-color: #fd6b3b; color: #ffffff; } .default_footer.light .item_subscribe .app_smartphone .btn--app .blue { background-color: rgba(22, 93, 245, 0.1); } .default_footer.light .item_subscribe .app_smartphone .btn--app .blue .tio { color: #165df5; } .default_footer.light .item_subscribe .app_smartphone .btn--app .dark { background-color: rgba(56, 24, 64, 0.1); } .default_footer.light .item_subscribe .app_smartphone .btn--app .dark .tio { color: #381840; } .default_footer.light .select-menu .button { background: rgba(11, 34, 56, 0.05); color: #0b2238; font-size: 14px; } .default_footer.light .select-menu .button ul li { color: #0b2238; } .default_footer.light .select-menu .button em::before { border-left: 2px solid #6c7a87; border-top: 2px solid #6c7a87; } .default_footer.light .select-menu .button em::after { border-right: 2px solid #6c7a87; border-bottom: 2px solid #6c7a87; } .default_footer.light .select-menu > ul { background-color: #f7f8fa; } .default_footer.light .copyright span { color: #6c7a87; } .default_footer.light .copyright span a { color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .default_footer.light .copyright span a:hover { color: #165df5; } /*----------------------------- defalut-footer -----------------------------*/ .defalut-footer { position: relative; } .defalut-footer.light::before { display: none; } .defalut-footer.light .item_about .logo { color: #0b2238; } .defalut-footer.light .item_about p { color: #6c7a87; } .defalut-footer.light .item_about .address span { color: #0b2238; } .defalut-footer.light .item_about .address span a { color: #165df5; } .defalut-footer.light .item_links h4 { color: #0b2238; } .defalut-footer.light .item_links .nav-link { color: #6c7a87; } .defalut-footer.light .item_links .nav-link:hover { color: #0b2238; } .defalut-footer.light .item_subscribe h4 { color: #0b2238; } .defalut-footer.light .item_subscribe p { color: #6c7a87; } .defalut-footer.light .item_subscribe .input_subscribe input { border-color: #edeef1; color: #0b2238 !important; } .defalut-footer.light .item_subscribe .input_subscribe input::placeholder { color: #9da6af; } .defalut-footer.light .item_subscribe .input_subscribe .btn_subscribe { color: #0b2238; } .defalut-footer.light .item_subscribe .input_subscribe:hover .btn_subscribe { background-color: #fd6b3b; color: #ffffff; } .defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue { background-color: rgba(22, 93, 245, 0.1); } .defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue .tio { color: #165df5; } .defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark { background-color: rgba(56, 24, 64, 0.1); } .defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark .tio { color: #381840; } .defalut-footer.light .select-menu .button { background: rgba(11, 34, 56, 0.05); color: #0b2238; font-size: 14px; } .defalut-footer.light .select-menu .button ul li { color: #0b2238; } .defalut-footer.light .select-menu .button em::before { border-left: 2px solid #6c7a87; border-top: 2px solid #6c7a87; } .defalut-footer.light .select-menu .button em::after { border-right: 2px solid #6c7a87; border-bottom: 2px solid #6c7a87; } .defalut-footer.light .select-menu > ul { background-color: #f7f8fa; } .defalut-footer.light .copyright span { color: #6c7a87; } .defalut-footer.light .copyright span a { color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .defalut-footer.light .copyright span a:hover { color: #165df5; } .defalut-footer::before { position: absolute; content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='575' height='495' viewBox='0 0 575 495'%3E%3Cpath id='Polygon_69' data-name='Polygon 69' d='M408.225,0a40,40,0,0,1,34.589,19.91l120.518,207.5a40,40,0,0,1,0,40.179L442.814,475.09A40,40,0,0,1,408.225,495H166.775a40,40,0,0,1-34.589-19.91L11.668,267.59a40,40,0,0,1,0-40.179L132.186,19.91A40,40,0,0,1,166.775,0Z' fill='%23165df5'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 450px; width: 575px; height: 495px; bottom: -45%; right: -50%; } @media (max-width: 767px) { .defalut-footer::before { display: none; } } .defalut-footer .item_about .logo { color: #ffffff; } .defalut-footer .item_about p { margin-top: 1.45rem; color: #9da6af; font-size: 16px; font-weight: 400; margin-bottom: 0; } .defalut-footer .item_about .address { margin-top: 1.45rem; } .defalut-footer .item_about .address span { display: block; color: #ffffff; font-size: 14px; } .defalut-footer .item_links h4 { color: #ffffff; font-size: 18px; font-weight: 500; text-transform: capitalize; margin-bottom: 1.875rem; } .defalut-footer .item_links .nav-link { display: block; padding-left: 0; color: #9da6af; padding-bottom: 0.75rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .defalut-footer .item_links .nav-link:hover { color: #ffffff; padding-left: 0.3rem; } .defalut-footer .item_subscribe h4 { color: #ffffff; font-size: 18px; font-weight: 500; margin-bottom: 1.875rem; } .defalut-footer .item_subscribe p { color: #9da6af; font-size: 14px; font-weight: 400; } .defalut-footer .item_subscribe .form-group.subscribebtn { margin-top: 1rem; } .defalut-footer .item_subscribe .form-group.subscribebtn .item_input { position: relative; } .defalut-footer .item_subscribe .form-group.subscribebtn .item_input input { border: 0; padding-right: 3.5rem; } .defalut-footer .item_subscribe .form-group.subscribebtn .item_input .btn_subscribe { position: absolute; color: #0b2238; top: 0.4rem; right: 0.6rem; font-size: 15px; width: 42px; height: 42px; background-color: #165df5; } .defalut-footer .item_subscribe .form-group.subscribebtn .item_input .btn_subscribe .tio { color: #ffffff; font-size: 20px; display: flex; justify-content: center; } .defalut-footer .copyright { color: #9da6af; font-size: 14px; } .defalut-footer .copyright a { color: #ffffff; } .defalut-footer .copyright a:hover { text-decoration: underline; } /*----------------------------- footer_short -----------------------------*/ .footer_short { padding-bottom: 5rem; } .footer_short .social--media { margin-top: 3.75rem; } .footer_short .social--media .so-link { width: 50px; height: 50px; border-radius: 20px; background-color: rgba(11, 34, 56, 0.05); margin: 0 0.25rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .footer_short .social--media .so-link { margin-bottom: 0.5rem; } } .footer_short .social--media .so-link .tio { display: flex; justify-content: center; text-align: center; font-size: 22px; color: #0b2238; padding-top: 0.6rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .footer_short .social--media .so-link:hover { background-color: #165df5; } .footer_short .social--media .so-link:hover .tio { color: #ffffff; } .footer_short .other--links { margin-top: 1.875rem; } .footer_short .other--links a { color: #6c7a87; font-size: 16px; font-weight: 400; margin: 0.6rem; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } @media (max-width: 767px) { .footer_short .other--links a { margin-bottom: 0.5rem; } } .footer_short .other--links a:hover { color: #0b2238; } .footer_short .opyright { margin-top: 1.875rem; } .footer_short .opyright p { font-size: 14px; font-weight: 400; color: #9da6af; margin-bottom: 0; } .footer_short .opyright p a { color: #0b2238; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .footer_short .opyright p a:hover { color: #165df5; } /*----------------------------- theme_crypto -----------------------------*/ .theme_crypto { position: relative; } .theme_crypto .img-footer { position: absolute; z-index: -1; top: 0; } .theme_crypto .social--media .so-link { background-color: rgba(255, 255, 255, 0.1); border-radius: 15px; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -o-transition: 0.3s !important; -ms-transition: 0.3s !important; transition: 0.3s !important; } .theme_crypto .social--media .so-link .tio { color: #ffffff; } .theme_crypto .social--media .so-link:hover { background-color: #ffffff; } .theme_crypto .social--media .so-link:hover .tio { color: #29013e; } .theme_crypto .other--links a { color: #ffffff; } .theme_crypto .other--links a:hover { color: #fd4ffe; } .theme_crypto .opyright p { color: #aa9bb3; } .theme_crypto .opyright p a { color: #ffffff; } .theme_crypto .opyright p a:hover { color: #6bb0f8; } /*----------------------------- gq_footer -----------------------------*/ .gq_footer { background-color: #071726; position: fixed; bottom: 0; left: 0; right: 0; z-index: 0; } @media (max-width: 767px) { .gq_footer { position: inherit; padding: 3.125rem 0; } } .gq_footer:before { display: none; } /*----------------------------- chiy_footer -----------------------------*/ .chiy_footer { background-color: #000; } .chiy_footer::before { content: ""; width: 100%; height: 4px; background: #ffc329; left: 0; bottom: 0; right: 0; } .chiy_footer .select-menu .button { background: rgba(255, 255, 255, 0.15); } .chiy_footer .select-menu.select-menu > ul { background: #1c1c1c; color: rgba(255, 255, 255, 0.5); } .chiy_footer .subscribebtn input { background-color: rgba(255, 255, 255, 0.15); color: #ffffff !important; } .chiy_footer .subscribebtn input::placeholder { color: rgba(255, 255, 255, 0.3); } .chiy_footer .subscribebtn .btn_subscribe { background-color: #ffc329 !important; } .chiy_footer .subscribebtn .btn_subscribe:before { background: #ffc329; } /*----------------------------- foot_demo2 -----------------------------*/ .foot_demo2 { position: relative; background-color: #040309 !important; z-index: 1; overflow: hidden; } .foot_demo2:before { content: ""; background: url("../img/hosting/01.png"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0; left: inherit; bottom: 0; opacity: 0.14; height: 100%; width: 100%; background-position: 100%; z-index: -1; } @media (max-width: 767px) { .foot_demo2:before { display: none; } } .foot_demo2 .defalut-footer:before { display: none; } .foot_demo2 .item_subscribe .form-group.subscribebtn .item_input input { border-radius: 8px !important; background-color: #ffffff !important; color: #0b2238 !important; } .foot_demo2 .item_subscribe .form-group.subscribebtn .item_input input::placeholder { color: #6c7a87 !important; } .foot_demo2 .item_subscribe .form-group.subscribebtn .item_input .btn_subscribe { border-radius: 8px !important; background-color: #f93542 !important; } .foot_demo2 .item_subscribe .form-group.subscribebtn .item_input .btn_subscribe:focus:before { background: #f93542; } /*----------------------------- foot_demo3 -----------------------------*/ .foot_demo3 { position: relative; overflow: hidden; width: 93%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; background-color: rgba(11, 34, 56, 0.05); border-radius: 12px; margin-top: 8rem; margin-bottom: 3.5rem; } @media (max-width: 767px) { .foot_demo3 { margin-bottom: 1rem; } } .foot_demo3:after { content: "" !important; background: url("../img/agency/3224657.svg") no-repeat 50% 50%; display: block; width: 100%; height: 100%; position: absolute; right: -70%; top: 0; z-index: -1; background-size: 80%; } @media (max-width: 767px) { .foot_demo3:after { background-size: cover; right: -60%; } } /*----------------------------- footer__ch -----------------------------*/ .footer__ch .subscribebtn .btn_subscribe { background-color: #7bd88a !important; } .footer__ch .subscribebtn .btn_subscribe:focus::before, .footer__ch .subscribebtn .btn_subscribe:active::before { background: #7bd88a !important; } /*----------------------------- footer__workspace -----------------------------*/ .footer__workspace .subscribebtn .btn_subscribe { background-color: #fd6b3b !important; } .footer__workspace .subscribebtn .btn_subscribe:focus::before, .footer__workspace .subscribebtn .btn_subscribe:active::before { background: #fd6b3b !important; } /*# sourceMappingURL=main.css.map */