@charset "UTF-8"; /*---------------------------------------------------- @File: Default Styles @Author: Blazethemez @URL: http://wethemez.com Author E-mail: blazetheme01@gmail.com 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: Facilio @Author: Rony @Developed By: Rony @Developer URL: http://rocky.wethemez.com Author E-mail: blazetheme01@gmail.com @Default Styles Table of Content: 01/ Variables 02/ predefine 03/ header 04/ banner 05/ about 06/ portfolio 07/ service 08/ blog 09/ contact=====================================================================*/ /*----------------------------------------------------*/ /*font Variables*/ /*=================== fonts====================*/ @import url("https://fonts.googleapis.com/css?family=Lato|Open+Sans|Poppins:400,500,600,700|Source+Sans+Pro:300,400,500,600,700"); @font-face { font-family: "Product"; /*a name to be used later*/ src: url("/vendors/fonts/Product-Sans-Bold.woff"); /*URL to font*/ font-weight: 700; } @font-face { font-family: "Product"; /*a name to be used later*/ src: url("/vendors/fonts/Product-Sans-Regular.woff"); /*URL to font*/ font-weight: 400; } .col-md-offset-right-1, .col-lg-offset-right-1 { margin-right: 8.33333333%; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ a { text-decoration: none; transition: all 0.3s ease-in-out; } a:hover, a:focus { text-decoration: none; outline: none; } .row.m0 { margin: 0px; } .p0 { padding: 0px; } html { height: 100%; overflow-x: hidden; } body { line-height: 28px; font-size: 16px; height: 100%; } :focus { outline: none; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } i:before { margin-left: 0px !important; } button:focus { outline: none; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .text_upparcase { text-transform: uppercase; } .body_wrapper { overflow: hidden; } .saas_title { margin-bottom: 60px; } .saas_title h2 { font-family: "Source Sans Pro", sans-serif; font-size: 38px; font-weight: 300; color: #051441; } .saas_title h2 span { font-weight: 700; } .saas_title .border_line { width: 225px; height: 1px; background: #e9ecf2; position: relative; margin: 20px auto 25px; } .saas_title .border_line .border_shape { width: 50px; height: 6px; background-image: -moz-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); position: absolute; left: 50%; transform: translateX(-50%); top: -2.5px; } .saas_title .border_line .border_shape:before { content: ""; border-top: 3px solid #ff9600; border-bottom: 3px solid #ff9600; border-right: 4px solid transparent; border-left: 4px solid transparent; position: absolute; left: -4px; top: 0; } .saas_title .border_line .border_shape:after { content: ""; border-top: 3px solid #ffc600; border-bottom: 3px solid #ffc600; border-right: 4px solid transparent; border-left: 4px solid transparent; position: absolute; right: -4px; top: 0; } .saas_title p { font-family: "Source Sans Pro", sans-serif; font-size: 18px; line-height: 28px; color: #9398ab; margin-bottom: 0px; } .saas_title_two { margin-bottom: 70px; } .saas_title_two h2 { font-size: 36px; font-weight: 400; font-family: "Poppins", sans-serif; color: #282b31; margin-bottom: 15px; } .saas_title_two h2 span { font-weight: 600; } .saas_title_two p { font-family: "Lato", sans-serif; font-size: 18px; line-height: 26px; font-weight: 300; color: #7f7d8e; margin-bottom: 0; } .s_t_color { color: #051441; } .sec_pad { padding: 120px 0px; } .app_section_title { margin-bottom: 75px; } .app_section_title h6 { font-size: 14px; color: #3ecef8; font-weight: 400; font-family: "Lato", sans-serif; text-transform: uppercase; margin-bottom: 12px; } .app_section_title h2 { font-size: 30px; font-weight: 700; font-family: "Poppins", sans-serif; color: #252a32; text-transform: uppercase; margin-bottom: 0px; } .pr_section_title { margin-bottom: 74px; } .pr_section_title h2 { font-size: 40px; line-height: 50px; font-weight: 700; color: #19182e; font-family: "Product"; margin-bottom: 12px; } .pr_section_title p { margin-bottom: 0px; } .prototype_title { margin-bottom: 70px; } .prototype_title h2 { font-size: 40px; line-height: 48px; color: #263b5e; margin-bottom: 15px; } .prototype_title h6 { text-transform: uppercase; font-weight: 500; color: #5e2ced; font-family: "Poppins", sans-serif; margin-bottom: 10px; letter-spacing: 0.15em; } .mt_40 { margin-top: 40px; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /* Preloader */ .ctn-preloader { align-items: center; cursor: default; display: flex; height: 100%; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9000; } .ctn-preloader .animation_progress { z-index: 1000; text-align: center; margin-top: -32px; } .ctn-preloader .animation_progress .txt-loading { font: bold 5em "Poppins", sans-serif; text-align: center; user-select: none; } .ctn-preloader .animation_progress .txt-loading .letters-loading { color: rgba(5, 20, 65, 0.2); position: relative; } .ctn-preloader .animation_progress .txt-loading .letters-loading:before { animation: letters-loading 4s infinite; color: #051441; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: "Poppins", sans-serif; position: absolute; top: -3px; transform: rotateY(-90deg); } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; } .ctn-preloader .animation_progress .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s; } .ctn-preloader .progress { width: 100%; height: 6px; overflow: hidden; margin-top: 8px; z-index: 1000; background: rgba(5, 20, 65, 0.2); border-radius: 5px; box-shadow: 7px 3px 11px rgba(0, 7, 30, 0.08); } .ctn-preloader .progress:after { content: ""; display: block; width: 100%; height: 100%; background: #051441; border-radius: 0px; animation: load 2s linear infinite; } .ctn-preloader .loader { position: fixed; top: 0; right: 0; width: 100%; height: 100%; font-size: 0; z-index: -1; pointer-events: none; } .ctn-preloader .loader .row { height: 100%; } .ctn-preloader .loader .loader-section { padding: 0px; } .ctn-preloader .loader .loader-section .bg { background-color: #ffffff; height: 100%; width: 100%; transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); } .ctn-preloader .loader .loader-section .bg:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url(/img/ellipse.webp) repeat scroll; position: absolute; opacity: 0.2; } .ctn-preloader .loader .loader-section.section-right .bg { left: auto; right: 0; } .ctn-preloader.loaded .animation_progress { opacity: 0; transition: 0.3s ease-out; } .ctn-preloader.loaded .loader-section.section-left .bg { transform: translateX(-100%); } .ctn-preloader.loaded .loader-section.section-right .bg { transform: translateX(100%); } @-moz-keyframes load { 0% { width: 0; } 10% { width: 5%; } 20% { width: 15%; } 30% { width: 25%; } 40% { width: 30%; } 50% { width: 44%; } 60% { width: 50%; } 70% { width: 72%; } 80% { width: 84%; } 90% { width: 92%; } 100% { width: 100%; } } @-webkit-keyframes load { 0% { width: 0; } 10% { width: 5%; } 20% { width: 15%; } 30% { width: 25%; } 40% { width: 30%; } 50% { width: 44%; } 60% { width: 50%; } 70% { width: 72%; } 80% { width: 84%; } 90% { width: 92%; } 100% { width: 100%; } } @-o-keyframes load { 0% { width: 0; } 10% { width: 5%; } 20% { width: 15%; } 30% { width: 25%; } 40% { width: 30%; } 50% { width: 44%; } 60% { width: 50%; } 70% { width: 72%; } 80% { width: 84%; } 90% { width: 92%; } 100% { width: 100%; } } @keyframes load { 0% { width: 0; } 10% { width: 5%; } 20% { width: 15%; } 30% { width: 25%; } 40% { width: 30%; } 50% { width: 44%; } 60% { width: 50%; } 70% { width: 72%; } 80% { width: 84%; } 90% { width: 92%; } 100% { width: 100%; } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============== header_area css==============*/ .header_area { position: fixed; width: 100%; left: 0; right: 0; z-index: 20; top: 0; transition: all 0.2s linear; } .header_area .container { position: relative; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .mobile_btn { visibility: hidden; display: none; } } @media (max-width: 991px) { .hidden-sm { visibility: hidden; display: none; } } .navbar { border-radius: 0px; padding: 0px; } .navbar .container-fluid { padding-left: 80px; padding-right: 80px; } .navbar .navbar-brand img + img { display: none; } .menu > .nav-item { position: relative; padding-bottom: 35px; padding-top: 35px; } .menu > .nav-item > .nav-link { font: 500 14px "Poppins", sans-serif; color: #fff; padding: 0px; transition: color 0.3s ease 0s; position: relative; } .menu > .nav-item > .nav-link:before { content: ""; width: 50%; height: 1px; position: absolute; bottom: 0; right: 0; transition: all 0.2s linear; transform: scale(0); transform-origin: 100% 50%; } .menu > .nav-item > .nav-link:after { content: ""; width: 50%; height: 1px; position: absolute; bottom: 0; border: 0px; margin-left: 0px; left: 0; transform: scale(0); transition: all 0.2s linear; transform-origin: 0 -50%; } .menu > .nav-item.submenu .dropdown-menu { margin: 0px; border: 0px; padding: 0px; left: 0; padding-top: 8px; min-width: 200px; background: transparent; } .menu > .nav-item.submenu .dropdown-menu:before { content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border: 9px solid transparent; border-bottom: 9px solid white; top: -10px; left: 40px; } @media (min-width: 992px) { .menu > .nav-item.submenu .dropdown-menu { transform: translateY(20px); transition: all 0.3s ease-in; opacity: 0; left: -30px; visibility: hidden; display: block; } } .menu > .nav-item.submenu .dropdown-menu > ul { padding: 20px 0px; border-radius: 4px; background: #fff; box-shadow: -1px 2px 19px 3px rgba(14, 0, 40, 0.05); } .menu > .nav-item.submenu .dropdown-menu .nav-item { display: block; width: 100%; margin-right: 0px; padding: 0px 30px; } .menu > .nav-item.submenu .dropdown-menu .nav-item .nav-link { padding: 0px; white-space: nowrap; font: 400 14px/38px "Poppins", sans-serif; color: #051441; transition: color 0.2s linear; } .menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #11bdff; } .menu > .nav-item.submenu .dropdown-menu .nav-item.submenu > .nav-link:before { content: "5"; position: absolute; right: 15px; font-size: 18px; top: 50%; transform: translateY(-50%); font-family: eleganticons; } .menu > .nav-item.submenu .dropdown-menu .nav-item > .dropdown-menu { transition: all 0.3s ease-in; } @media (min-width: 992px) { .menu > .nav-item.submenu .dropdown-menu .nav-item > .dropdown-menu { position: absolute; left: 100%; top: -20px; opacity: 0; display: block; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease-in; } } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one { min-width: 100%; display: flex; width: 540px; flex-wrap: wrap; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .mega_menu_body { display: flex; flex-wrap: wrap; padding-left: 0; padding: 12px; border-radius: 4px; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item { display: flex; width: 50%; padding: 12px; align-items: flex-start; justify-content: center; border-radius: 5px; color: #2c3340; font-size: 14px; text-decoration: none; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link { display: flex; align-items: center; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 147, 32, 0.12); text-align: center; line-height: 52px; font-size: 20px; color: #ff9320; margin-right: 20px; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon.icon_two { background: rgba(33, 212, 253, 0.12); color: #21d4fd; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon.icon_three { background: rgba(37, 131, 253, 0.12); color: #2583fd; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon.icon_four { background: rgba(252, 55, 98, 0.12); color: #fc3762; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon.icon_five { background: rgba(113, 66, 248, 0.12); color: #7142f8; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_icon.icon_six { background: rgba(0, 213, 187, 0.12); color: #00d5bb; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_content h5 { font-size: 14px; line-height: 17px; font-family: "Poppins", sans-serif; font-weight: 600; margin-bottom: 0px; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item .nav-link .navdropdown_link .navdropdown_content p { font-size: 12px; line-height: 18px; margin-bottom: 0; font-family: "Poppins", sans-serif; font-weight: 300; margin-top: 5px; color: #7f8ba0; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item.nav_download_btn { width: 100%; margin-top: 5px; background: #f5f6f8; padding: 0px; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item.nav_download_btn .nav-link .navdropdown_icon { width: auto; height: auto; background: transparent; margin-right: 12px; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item.nav_download_btn .nav-link .navdropdown_content h5 { color: #051441; } .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item:hover, .menu > .nav-item.submenu .dropdown-menu.mega_menu_one .nav-item.active { background: #f5f6f8; } .menu > .nav-item + .nav-item { margin-left: 45px; } .menu > .nav-item.active .nav-link:before, .menu > .nav-item.active .nav-link:after { transform: scale(1); background: #fff; } .menu > .nav-item:hover .nav-link:before, .menu > .nav-item:hover .nav-link:after { transform: scale(1); background: #fff; } @media (min-width: 992px) { .menu > .nav-item:hover .dropdown-menu { opacity: 1; transform: translateY(0); visibility: visible; transition: all 0.3s ease-in-out; } .menu > .nav-item:hover .dropdown-menu > .nav-item { transform: translateY(0); } } @media (min-width: 992px) and (min-width: 992px) { .menu > .nav-item:hover .dropdown-menu > .nav-item:hover .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; } } @media (min-width: 992px) { .menu > .nav-item:hover .dropdown-menu .mega_menu_body > .nav-item { transform: translateY(0); } } .menu_two { padding: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .menu_two .menu > .nav-item > .nav-link { font-weight: 500; font-size: 16px; } .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #ff9600; } .menu_two .btn_get { background: #fff; color: #ff9600; text-transform: capitalize; margin-left: 0; } .menu_two .btn_get:hover { color: #fff; background: transparent; } .menu_three .menu_toggle .hamburger span, .menu_three .menu_toggle .hamburger-cross span { background: #19182e; } .menu_three .btn_get { color: #f31f74; font-family: "Product"; font-weight: 700; text-transform: capitalize; font-size: 16px; padding: 15px 22px; border-color: rgba(243, 31, 116, 0.19); margin-left: 0; transition: all 0.4s linear; } .menu_three .btn_get:hover { background: #f31f74; box-shadow: none; color: #fff; } .add_container { background: #372668; } .add_container a { color: #fff; font-size: 14px; font-family: "Product"; line-height: 35px; letter-spacing: 0.8px; font-weight: 400; } .add_container .cross { position: absolute; right: 30px; font-size: 25px; color: #fff; top: 2px; cursor: pointer; } .add_container.open { top: -35px; transition: all 0.5s linear; visibility: hidden; } .menu_b > .nav-item > .nav-link { color: #19182e; text-transform: capitalize; font-family: "Product"; font-size: 18px; font-weight: 700; } .menu_b > .nav-item.submenu .dropdown-menu .nav-item .nav-link { font-family: "Product"; font-weight: 600; } .menu_b > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .menu_b > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .menu_b > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #f31f74; } .menu_b > .nav-item:hover .nav-link, .menu_b > .nav-item.active .nav-link { color: #f31f74; } .menu_b > .nav-item:hover .nav-link:before, .menu_b > .nav-item:hover .nav-link:after, .menu_b > .nav-item.active .nav-link:before, .menu_b > .nav-item.active .nav-link:after { background: #f31f74; } .menu_four .menu > .nav-item > .nav-link { font-size: 16px; } .menu_four .menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .menu_four .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .menu_four .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #5956fe; } .menu_four .payment_btn { min-width: auto; padding: 12px 30px; font-size: 16px; margin-left: 45px; box-shadow: 0px 20px 24px 0px rgba(0, 11, 40, 0.1); border: 1px solid #fff; } .menu_four .payment_btn:before { display: none; } .menu_four .payment_btn:hover { box-shadow: none; color: #5956fe; } .navbar-toggler { padding: 0px; margin-left: 20px; } .navbar-toggler:focus { outline: none; } .menu_toggle { width: 22px; height: 22px; position: relative; cursor: pointer; display: block; } .menu_toggle .hamburger { position: absolute; height: 100%; width: 100%; display: block; } .menu_toggle .hamburger span { width: 0%; height: 2px; position: relative; top: 0; left: 0; margin: 4px 0; display: block; background: #fff; border-radius: 3px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .menu_toggle .hamburger span:nth-child(1) { transition-delay: 0s; } .menu_toggle .hamburger span:nth-child(2) { transition-delay: 0.125s; } .menu_toggle .hamburger span:nth-child(3) { transition-delay: 0.2s; } .menu_toggle .hamburger-cross { position: absolute; height: 100%; width: 100%; transform: rotate(45deg); display: block; } .menu_toggle .hamburger-cross span { display: block; background: #fff; border-radius: 3px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .menu_toggle .hamburger-cross span:nth-child(1) { height: 100%; width: 2px; position: absolute; top: 0; left: 10px; transition-delay: 0.3s; } .menu_toggle .hamburger-cross span:nth-child(2) { width: 100%; height: 2px; position: absolute; left: 0; top: 10px; transition-delay: 0.4s; } .collapsed .menu_toggle .hamburger span { width: 100%; } .collapsed .menu_toggle .hamburger span:nth-child(1) { transition-delay: 0.3s; } .collapsed .menu_toggle .hamburger span:nth-child(2) { transition-delay: 0.4s; } .collapsed .menu_toggle .hamburger span:nth-child(3) { transition-delay: 0.5s; } .collapsed .menu_toggle .hamburger-cross span:nth-child(1) { height: 0%; transition-delay: 0s; } .collapsed .menu_toggle .hamburger-cross span:nth-child(2) { width: 0%; transition-delay: 0.2s; } .header_area_two { transition: all 0s linear; } .header_area_two .navbar .navbar-brand img { display: block; } .header_area_two .menu_two .menu > .nav-item > .nav-link { font-family: "Poppins", sans-serif; text-transform: capitalize; font-weight: 500; color: #051441; } .header_area_two .menu_two .menu > .nav-item:hover .nav-link:before, .header_area_two .menu_two .menu > .nav-item:hover .nav-link:after, .header_area_two .menu_two .menu > .nav-item.active .nav-link:before, .header_area_two .menu_two .menu > .nav-item.active .nav-link:after { background: #051441; } .header_area_two .menu_two .btn_get { background: #ff9600; color: #fff; font-family: "Poppins", sans-serif; } .header_area_two .menu_two .btn_get:hover { background: transparent; border-color: #ff9600; color: #ff9600; } .header_area_two + section, .header_area_two + div { margin-top: 96px; } .header_area_three .menu_four .menu > .nav-item > .nav-link { color: #263b5e; } .header_area_three .menu_four .menu > .nav-item > .nav-link:before, .header_area_three .menu_four .menu > .nav-item > .nav-link:after { display: none; } .header_area_three .menu_four .menu > .nav-item:hover > .nav-link, .header_area_three .menu_four .menu > .nav-item.active > .nav-link { color: #5956fe; } .header_area_three .t_nav { margin-bottom: 0; } .header_area_three .trail { font-family: "Poppins", sans-serif; text-transform: capitalize; font-weight: 500; color: #263b5e; border-left: 1px solid rgba(38, 59, 94, 0.68); line-height: 16px; padding-left: 15px; margin-left: 15px; display: inline-block; } .header_area_three .trail:hover { color: #5956fe; } .header_area_three + section, .header_area_three + div { margin-top: 0; } .navbar_fixed { background-color: white; -webkit-box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06); box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06); } .navbar_fixed .navbar-brand img { display: none; } .navbar_fixed .navbar-brand img + img { display: block; } .navbar_fixed .menu > .nav-item > .nav-link { color: #051441; } .navbar_fixed .menu > .nav-item.active > .nav-link, .navbar_fixed .menu > .nav-item:hover > .nav-link { color: #11bdff; } .navbar_fixed .menu > .nav-item.active > .nav-link:before, .navbar_fixed .menu > .nav-item.active > .nav-link:after, .navbar_fixed .menu > .nav-item:hover > .nav-link:before, .navbar_fixed .menu > .nav-item:hover > .nav-link:after { background: #11bdff; } .navbar_fixed .menu_one .btn_get { border-color: #11bdff; color: #11bdff; } .navbar_fixed .menu_one .btn_get:hover { background: #11bdff; color: #fff; } .navbar_fixed .menu_two .menu > .nav-item.active > .nav-link, .navbar_fixed .menu_two .menu > .nav-item:hover > .nav-link { color: #ff9600; } .navbar_fixed .menu_two .menu > .nav-item.active > .nav-link:before, .navbar_fixed .menu_two .menu > .nav-item.active > .nav-link:after, .navbar_fixed .menu_two .menu > .nav-item:hover > .nav-link:before, .navbar_fixed .menu_two .menu > .nav-item:hover > .nav-link:after { background: #ff9600; } .navbar_fixed .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .navbar_fixed .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .navbar_fixed .menu_two .menu > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #ff9600; } .navbar_fixed .menu_two .btn_get { border-color: #ff9600; } .navbar_fixed .menu_two .btn_get:hover { color: #fff; background: #ff9600; } .navbar_fixed .menu_two .menu_toggle .hamburger span, .navbar_fixed .menu_two .menu_toggle .hamburger-cross span { background: #ff9600; } .navbar_fixed .menu_b > .nav-item:hover > .nav-link:before, .navbar_fixed .menu_b > .nav-item:hover > .nav-link:after, .navbar_fixed .menu_b > .nav-item.active > .nav-link:before, .navbar_fixed .menu_b > .nav-item.active > .nav-link:after { background: #f31f74; } .navbar_fixed .menu_b > .nav-item.submenu .dropdown-menu .nav-item:hover > .nav-link, .navbar_fixed .menu_b > .nav-item.submenu .dropdown-menu .nav-item:focus > .nav-link, .navbar_fixed .menu_b > .nav-item.submenu .dropdown-menu .nav-item.active > .nav-link { color: #f31f74; } .navbar_fixed .menu_b > .nav-item:hover .nav-link, .navbar_fixed .menu_b > .nav-item.active .nav-link { color: #f31f74; } .navbar_fixed .menu_three .menu_toggle .hamburger span, .navbar_fixed .menu_three .menu_toggle .hamburger-cross span { background: #f31f74; } .navbar_fixed .menu_toggle .hamburger span, .navbar_fixed .menu_toggle .hamburger-cross span { background: #11bdff; } .navbar_fixed .menu_four .menu > .nav-item.active > .nav-link, .navbar_fixed .menu_four .menu > .nav-item:hover > .nav-link { color: #5956fe; } .navbar_fixed .menu_four .menu > .nav-item.active > .nav-link:before, .navbar_fixed .menu_four .menu > .nav-item.active > .nav-link:after, .navbar_fixed .menu_four .menu > .nav-item:hover > .nav-link:before, .navbar_fixed .menu_four .menu > .nav-item:hover > .nav-link:after { background: #5956fe; } .navbar_fixed .menu_four .payment_btn { border: 1px solid #5956fe; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*================== breadcrumb_area css ==============*/ .breadcrumb_area { background-image: -moz-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); text-align: center; color: #fff; padding: 210px 0px 175px; position: relative; z-index: 1; } .breadcrumb_area:before { content: ""; background: url(/img/new_shap.webp) no-repeat scroll right bottom; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; opacity: 0.4; z-index: -1; } .breadcrumb_area:after { content: ""; background: url(/img/new_shap_two.webp) no-repeat scroll right bottom; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; z-index: -1; } .breadcrumb_area p { font-family: "Poppins", sans-serif; font-weight: 400; padding-top: 15px; margin-bottom: 0px; } .page-title { font: 900 38px/45px "Product"; margin-bottom: 0px; text-transform: capitalize; } .breadcrumb { background: transparent; margin-bottom: 0px; justify-content: center; padding-left: 0; padding-right: 0; } .breadcrumb li { font-size: 18px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; position: relative; } .breadcrumb li a { color: #fff; } .breadcrumb li.active:after { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; } .breadcrumb li + li { margin-left: 26px; } .breadcrumb li + li:before { content: "-"; display: inline-block; color: #fff; font-weight: 500; position: absolute; left: -16px; } /*================== breadcrumb_area css ==============*/ /*================== banner_area css ==============*/ .banner_area { background-image: -moz-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); background-image: -webkit-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); background-image: -ms-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); text-align: center; color: #fff; padding: 210px 0px 175px; position: relative; z-index: 4; min-height: 500px; } .banner_area p { font-size: 18px; margin-bottom: 0; padding-top: 8px; font-family: "Source Sans Pro", sans-serif; } .elements { position: absolute; left: 0px; top: 0px; width: 100%; z-index: -1; } .elements li:first-child { position: absolute; left: 14%; top: 20px; transform: translateX(-50%); animation: 28s cloud infinite linear; } .elements li:nth-child(2) { position: absolute; left: 0%; top: 42px; transform: translateX(-70%); animation: 28s animateCloud infinite linear; opacity: 0; } .elements li:nth-child(3) { position: absolute; left: 0%; top: 100px; transform: translateX(-70%); animation: 28s 4s animateCloud infinite linear; opacity: 0; } .elements li:nth-child(4) { position: absolute; left: 0%; top: 120px; transform: translateX(-70%); animation: animateCloud 35s 5s linear infinite; opacity: 0; } .elements li:nth-child(5) { position: absolute; left: 60%; top: 150px; transform: translateX(-50%); animation: rotateX 5s 0.7s linear infinite; opacity: 0; } .elements li:nth-child(6) { position: absolute; left: 60%; top: 150px; transform: translateX(-50%); animation: rotateX 5s 3s linear infinite; opacity: 0; } .elements li:nth-child(7) { position: absolute; left: 15%; top: 120px; transform: translateX(-50%); animation: rotateX 5s 3s linear infinite; opacity: 0; } .elements li:nth-child(8) { position: absolute; right: 10%; top: 120px; transform: translateX(-50%); animation: jurk 5s 3s linear infinite alternate; } .banner_teckture { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; } .car { position: absolute; bottom: 40px; z-index: 10; opacity: 0.2; -moz-animation: myfirst 12s linear infinite; -webkit-animation: myfirst 12s linear infinite; } .car.car_two { bottom: 22px; -moz-animation: myfirst 18s linear infinite; -webkit-animation: myfirst 18s linear infinite; } @-moz-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @-webkit-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } .tyre { width: 20px; height: 20px; border-radius: 50%; background: #a471de; position: absolute; z-index: 2; left: 16px; top: 33px; -moz-animation: tyre-rotate 1s infinite linear; -webkit-animation: tyre-rotate 1s infinite linear; } @-moz-keyframes tyre-rotate { from { -moz-transform: rotate(-360deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes tyre-rotate { from { -webkit-transform: rotate(-360deg); } to { -webkit-transform: rotate(0deg); } } .tyre:before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #f8b0b5; opacity: 0.9; position: absolute; top: 2.5px; left: 2.5px; } .gap { background: #3f3f40; width: 2px; height: 3px; position: absolute; left: 9px; top: 4px; -webkit-box-shadow: 0 9px 0 #3f3f40; box-shadow: 0 8px 0 #3f3f40; } .gap:before { content: ""; display: block; width: 2px; height: 3px; position: absolute; background: #3f3f40; -webkit-box-shadow: 0 12px 0 #3f3f40; box-shadow: 0 9px 0 #3f3f40; -webkit-transform: rotate(-90deg); -webkit-transform-origin: 0 7px; -moz-transform: rotate(-90deg); -moz-transform-origin: 0 7px; z-index: 3; left: 2px; } .tyre.front { left: 58px; } .car-shadow { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); bottom: -15px; box-shadow: -5px 4px 55px 3px #000000; left: -7px; position: absolute; width: 136px; } /*noise css*/ @keyframes cloud { 0% { left: 14%; top: 20px; opacity: 0; } 20% { left: 44%; top: 100px; opacity: 1; } 40% { left: 65%; top: 0px; opacity: 1; } 60% { left: 80%; top: 60px; opacity: 1; } 80% { left: 90%; top: 60px; opacity: 0.5; } 100% { left: 100%; top: 20px; opacity: 0; } } @keyframes animateCloud { 0% { left: -20%; opacity: 1; } 100% { left: 100%; opacity: 1; } } @keyframes rotateX { 0% { top: 150px; opacity: 1; } 100% { top: -50px; opacity: 0; } } @keyframes jurk { 0% { transform: translate3d(-10px, -10px, 0); opacity: 1; } 50% { transform: translate3d(-20px, 20px, 0); opacity: 1; } 100% { transform: translate3d(30px, 0px, 0); opacity: 1; } } @keyframes jurk2 { 0% { transform: translate3d(-1px, -2px, 0); opacity: 1; } 50% { transform: translate3d(2px, 5px, 2px); opacity: 1; } 100% { transform: translate3d(3px, 0px, 0px); opacity: 1; } } @keyframes jump { 0% { top: 0px; } 25% { top: -20px; } 50% { top: 0px; } 75% { top: 0px; } } /*================== breadcrumb_area css ==============*/ /*============ breadcrumb_area_three css ===========*/ .breadcrumb_area_three { position: relative; z-index: 1; height: 415px; } .breadcrumb_area_three:before { content: ""; width: 100%; height: 110%; background: url(/img/d_shap.webp) no-repeat scroll center 0; position: absolute; background-size: cover; z-index: 0; top: 0; left: 0; } .breadcrumb_shap { position: absolute; z-index: -1; width: 106%; top: -692px; height: 1113px; left: -20px; } .breadcrumb_shap_two { position: absolute; z-index: -2; width: 100%; height: 1036px; top: -620px; right: -50px; } /*============ breadcrumb_area_three css ===========*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ .saas_btn { font-size: 16px; line-height: 48px; font-family: "Poppins", sans-serif; display: inline-block; moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; background-size: 200% 100%; background-image: linear-gradient(to Left, #ff9600, #ffc600, #ffc600, #ff9600); color: #fff; padding: 0px 36px; } .saas_btn:hover, .saas_btn:focus { background-position: 160% 0; moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; box-shadow: 0px 10px 20px 0px rgba(255, 155, 0, 0.3); color: #fff; outline: none; } .br_radious45 { border-radius: 45px; } .br_radious5 { border-radius: 5px; } .price_btn { font-family: "Source Sans Pro", sans-serif; font-size: 16px; font-weight: 600; color: #ff9600; background-image: -moz-linear-gradient(-180deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(-180deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(-180deg, #ffc600 0%, #ff9600 100%); position: relative; display: inline-block; padding: 12px 38px; border-radius: 45px; z-index: 1; transition: all 0.2s linear; } .price_btn:before { content: ""; top: 1px; bottom: 1px; left: 1px; right: 1px; background: #fff; position: absolute; background: #fff; border-radius: 50px; z-index: -1; transition: opacity 0.2s linear; } .price_btn:hover { box-shadow: 0px 10px 20px 0px rgba(255, 155, 0, 0.3); color: #fff; } .price_btn:hover:before { opacity: 0; } .app_btn { font: 600 16px/28px "Poppins", sans-serif; color: #fff; background-image: linear-gradient(to right, #3e7cfc, rgba(63, 119, 252, 0.9), rgba(39, 203, 246, 0.9), #27cbf6); padding: 11px 31px; display: inline-block; background-size: 150% 100%; transition: all 0.4s ease-in-out; } .app_btn:hover, .app_btn:focus { background-position: 100% 0; moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; color: #fff; outline: none; } .app_banner_btn { font: 600 16px/30px "Poppins", sans-serif; color: #fff; border: 1px solid #fff; display: inline-block; padding: 12px 40px; vertical-align: middle; transition: background 0.3s linear, color 0.2s linear; } .app_banner_btn i { padding-right: 10px; font-size: 18px; } .app_banner_btn:hover { background: #fff; color: #11bdff; } .google_btn { background: #fff; color: #11bdff; margin-left: 20px; padding: 12px 25px; transition: background 0.3s linear, color 0.2s linear; } .google_btn img { transition: all 0.1s linear; padding-right: 13px; } .google_btn:hover { background: transparent; color: #fff; } .google_btn:hover img { filter: brightness(100); } .btn_get { font: 500 14px "Poppins", sans-serif; color: #fff; border: 1px solid #fff; padding: 10px 28px; margin-left: 40px; } .btn_get:hover { background: #fff; color: #11bdff; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============= Start saas_banner_area css ==============*/ .saas_banner_area { height: 1075px; padding-top: 230px; background-image: -moz-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -webkit-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -ms-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); overflow: hidden; position: relative; } .saas_banner_area:before { background: url("/img/saas_shap.webp") no-repeat scroll bottom; content: ""; width: 100%; height: 410px; position: absolute; bottom: 0; left: 0; } .saas_banner_content { color: #fff; font-family: "Source Sans Pro", sans-serif; padding-top: 50px; } .saas_banner_content h2 { font: 700 48px/58px "Source Sans Pro", sans-serif; } .saas_banner_content h5 { font-size: 26px; line-height: 32px; font-weight: 400; font-family: "Source Sans Pro", sans-serif; margin: 35px 0px 25px; } .saas_banner_content p { font-style: italic; font-weight: 400; font-size: 20px; margin-bottom: 47px; } .saas_banner_content .video_btn { font-size: 16px; line-height: 30px; padding: 10px 26px 9px 32px; background-image: -moz-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); box-shadow: 0px 13px 15.04px 0.96px rgba(12, 0, 45, 0.16); border-radius: 45px; font-family: "Poppins", sans-serif; min-width: 210px; display: inline-block; color: #fff; } .saas_banner_content .video_btn i { width: 30px; height: 30px; border: 1px solid #fff; text-align: center; font-size: 20px; line-height: 28px; color: #fff; border-radius: 50%; vertical-align: middle; margin-left: 9px; position: relative; } .saas_banner_content .video_btn:hover { box-shadow: none; } .saas_banner_content .get_btn { font-size: 16px; line-height: 28px; display: inline-block; font-family: "Poppins", sans-serif; color: #fff; font-weight: 400; position: relative; margin-left: 40px; } .saas_banner_content .get_btn:before { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; } .saas_b_img { position: relative; } .saas_b_img .man { position: absolute; width: 40%; left: 330px; bottom: -50px; animation: slideM 7s infinite; } .saas_b_img .women { position: absolute; width: 42%; left: 20px; bottom: 40px; animation: womenS 8s infinite; } .saas_b_img .logo { position: absolute; top: 100px; left: 74px; animation: bounce 11s infinite; } @keyframes slideM { 0% { opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30% { -webkit-transform: translate3d(-8%, 0, 0); -ms-transform: translate3d(-8%, 0, 0); transform: translate3d(-8%, 0, 0); opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 45% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 85% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { opacity: 0; } } @keyframes slideM3 { 0% { opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 30% { -webkit-transform: translate3d(-10%, 1%, 0); -ms-transform: translate3d(-10%, 1%, 0); transform: translate3d(-10%, 1%, 0); opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 45% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 85% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { opacity: 0; } } @keyframes slideM2 { 0% { opacity: 0; } 30% { -webkit-transform: translate3d(8%, 0, 0); -ms-transform: translate3d(8%, 0, 0); transform: translate3d(8%, 0, 0); opacity: 0; } 45% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes womenS { 0% { opacity: 0; } 40% { -webkit-transform: translate3d(0, 8%, 0); -ms-transform: translate3d(0, 8%, 0); transform: translate3d(0, 8%, 0); opacity: 0; } 48% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 98% { opacity: 1; transform: translate3d(0, 2%, 0); } 100% { opacity: 0; } } @keyframes bounce { 0% { opacity: 0; transform: scale3d(0.5, 0.5, 0.5); } 10% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5); -ms-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); } 11% { transform: scale3d(1.1, 1.1, 1.1); } 12% { transform: scale3d(0.9, 0.9, 0.9); } 13% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 14% { transform: scale3d(0.97, 0.97, 0.97); } 15% { transform: scale3d(1, 1, 1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale3d(1, 1, 1); } } @keyframes rounded { 0% { -webkit-transform: translateX(-50%) scale(0.8) rotate(0deg); transform: translateX(-50%) scale(0.8) rotate(0deg); } 25% { -webkit-transform: translateX(-51%) scale(0.9) rotate(360deg); transform: translateX(-51%) scale(0.9) rotate(360deg); } 50% { -webkit-transform: translateX(-50%) scale(1.02) rotate(720deg); transform: translateX(-50%) scale(1.02) rotate(720deg); } 100% { -webkit-transform: translateX(-50%) scale(1.03) rotate(750deg); transform: translateX(-52%) scale(1.03) rotate(750deg); } } @keyframes womenS2 { 0% { opacity: 0; } 40% { -webkit-transform: translate3d(8%, 0, 0); -ms-transform: translate3d(8%, 0, 0); transform: translate3d(8%, 0, 0); opacity: 0; } 48% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 98% { opacity: 1; transform: translate3d(2%, 0, 0); } 100% { opacity: 0; transform: translate3d(2%, 0, 0); } } /*============= End saas_banner_area css ==============*/ /*============= Start saas_banner_area_two css ==============*/ .saas_banner_area_two { height: 800px; padding: 0px; display: flex; align-items: center; } .saas_banner_area_two:before { display: none; } .saas_banner_area_two .saas_banner_content { padding-top: 0; } .saas_banner_area_two .saas_banner_content .saas_banner_btn .video_btn { min-width: auto; font-weight: 600; } .saas_banner_area_two .saas_banner_content .saas_banner_btn .get_btn { font-weight: 600; } .saas_video_inner { height: 100%; perspective: 1000px; transform: perspective(3500px) rotateY(-14deg); transition: transform 600ms ease, -webkit-transform 600ms ease; } .saas_video_inner .saas_video { height: 425px; position: relative; width: 100%; background: url("../img/saas_two/video_bg.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; transition: transform 600ms ease, -webkit-transform 600ms ease; box-shadow: 15px 14px 48px 0 rgba(34, 34, 34, 0.32); transform-style: preserve-3d; display: block; transform: rotateX(0deg) rotateY(-20deg) rotateZ(0deg) translate(-48px, 0px); } .saas_video_inner .saas_video:before { content: ""; background: #222222; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.4; } .saas_video_inner .saas_video .video_btn { width: 70px; height: 70px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); } .saas_video_inner .saas_video .video_btn:before { content: ""; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; transform: scale(1.3); z-index: -1; } .saas_video_inner:hover { transform: perspective(1000px) rotate(0deg); } .saas_video_inner:hover .saas_video { transform: rotate(0deg) translate(10px, 0px) scale(1.13); } /*============= End saas_banner_area_two css ==============*/ /*=============== Start app_banner_area css =============*/ .app_banner_area { height: 100vh; min-height: 820px; position: relative; z-index: 1; } @media (min-height: 1080px) { .app_banner_area { height: 70vh; } } .app_banner_area:before { width: 150vw; height: 100%; position: absolute; left: -25vw; top: -30px; content: ""; z-index: 0; border-radius: 0 0 45% 45%; bottom: 50px; background-image: -moz-linear-gradient(10deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -webkit-linear-gradient(10deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -ms-linear-gradient(10deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); z-index: -1; } .app_banner_area:after { content: ""; width: 100%; position: absolute; top: 0; left: 0; background: url("/img/app/banner_bg.webp") no-repeat scroll center 0/cover; height: 100%; z-index: -1; } .app_banner_area .container, .app_banner_area .row { height: 100%; } .app_banner_area .round_shape { background-color: white; opacity: 0.051; width: 498px; height: 498px; border-radius: 50%; position: absolute; } .app_banner_area .round_shape.one { bottom: 80px; left: 58%; transform: translateX(-50%); animation: rounded 5s linear infinite alternate; } .app_banner_area .round_shape.two { width: 598px; height: 598px; opacity: 0.071; right: 180px; top: 50px; } .app_banner_area .box { width: 110px; height: 110px; border-radius: 10px; position: absolute; } .app_banner_area .box.one { opacity: 0.051; background: #fff; bottom: 230px; left: 70px; } .app_banner_area .box.two { background-image: -moz-linear-gradient(103deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -webkit-linear-gradient(103deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -ms-linear-gradient(103deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); opacity: 0.11; box-shadow: 0px 7px 133px 0px rgba(0, 0, 0, 0.89); bottom: 200px; left: 40px; } .app_banner_text { color: #fff; } .app_banner_text h2 { font: 700 50px/58px "Poppins", sans-serif; letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 25px; } .app_banner_text p { font: 400 16px/32px "Poppins", sans-serif; letter-spacing: 0.2px; margin-bottom: 50px; } .b_app_screen { position: relative; height: 100%; z-index: 1; } .b_app_screen .img_first { position: absolute; bottom: -40px; left: 20px; } .b_app_screen .img_back { position: absolute; right: -65px; bottom: 81px; z-index: -1; } .b_app_screen .slider { position: absolute; width: 339px; bottom: -12px; left: 93px; } /*=============== Start app_banner_area css =============*/ /*=========== project_banner_area css ===========*/ .project_banner_area { padding-top: 200px; overflow: hidden; } .project_banner_top { padding-bottom: 50px; } .p_banner_content h2 { font-size: 40px; font-family: "Product"; font-weight: 700; color: #19182e; margin-bottom: 22px; } .p_banner_content h2 span { font-weight: 400; } .p_banner_content p { font-size: 18px; font-family: "Product"; font-weight: 400; color: #7a818d; margin-bottom: 45px; } .p_banner_content .subcribes { max-width: 630px; margin: 0 auto; } .p_banner_content .subcribes .form-control { font-size: 16px; font-family: "Product"; font-weight: 400; background: #fff; height: 55px; border: 1px solid #ededed; color: #19182e; padding-left: 30px; box-shadow: none; border-radius: 0px; } .p_banner_content .subcribes .form-control.placeholder { color: #b4b9c8; } .p_banner_content .subcribes .form-control:-moz-placeholder { color: #b4b9c8; } .p_banner_content .subcribes .form-control::-moz-placeholder { color: #b4b9c8; } .p_banner_content .subcribes .form-control::-webkit-input-placeholder { color: #b4b9c8; } .p_banner_content .subcribes .form-control:focus { box-shadow: 0 20px 86px 0 rgba(255, 207, 226, 0.1); border-color: rgba(255, 207, 226, 0.7); } .p_banner_content .subcribes .btn_submit { font-size: 15px; line-height: 53px; font-weight: 500; color: #fff; background: #f31f74; border-radius: 0px; padding: 0px 45px; box-shadow: none; margin-left: 10px; } .p_banner_content .subcribes .btn_submit:hover { box-shadow: 0px 20px 24px 0px rgba(0, 11, 40, 0.1); } .project_screenshot { margin-top: 80px; padding-bottom: 45px; background: url("../img/projects/banner_img.jpg") no-repeat scroll center 0; box-shadow: 0 10px 50px 0 rgba(34, 43, 55, 0.1); height: 650px; position: relative; overflow: hidden; border-radius: 10px; z-index: 1; } .project_screenshot .screen_slider { margin: 0 auto; left: 56px; top: 143px; } .project_screenshot .slick-list .slick-track { top: 154px; } .project_screenshot .item { text-align: center; margin: 3px 0px; transform: scale(0.99); transition: all 0.4s linear; } .project_screenshot .item img { box-shadow: 0 10px 50px 0 rgba(34, 43, 55, 0.1); border-radius: 10px; display: inline-block; } .project_screenshot .item.slick-center { transform: scale(1.11); } .project_screenshot .item.slick-center img { box-shadow: 0px 18px 100px 0px rgba(35, 48, 73, 0.25); } /*=========== project_banner_area css ===========*/ /*=========== payment_banner_area css ===========*/ .payment_banner_area { position: relative; height: 100vh; min-height: 800px; background-image: -moz-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); z-index: 1; display: flex; overflow: hidden; padding-top: 280px; } .payment_banner_area .shap { position: absolute; top: 0px; width: 100%; height: 100%; z-index: -1; } .payment_banner_area .shape_bg span { position: absolute; height: 190px; transform: skewY(-18deg); background: #21d4fd; z-index: -1; } .payment_banner_area .shape_bg span:first-child { width: 33.33333%; right: -1.66666%; left: auto; top: 190px; opacity: 0.1; } .payment_banner_area .intro_content { color: #fff; max-width: 600px; } .payment_banner_area .intro_content .intro_title { background: rgba(0, 0, 0, 0.1); border-radius: 25px; display: inline-block; margin-bottom: 0; padding: 10px 25px; font-size: 14px; font-family: "Poppins", sans-serif; font-weight: 300; letter-spacing: 1px; margin-bottom: 20px; } .payment_banner_area .intro_content h2 { font-size: 36px; line-height: 48px; font-family: "Poppins", sans-serif; margin-bottom: 35px; } .payment_banner_area .intro_content p { font-size: 18px; font-family: "Poppins", sans-serif; line-height: 32px; margin-bottom: 50px; } .payment_banner_area .intro_content .slider_payment_btn { font: 500 14px "Poppins", sans-serif; color: #5956fe; background: #fff; -webkit-box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1); box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1); border-radius: 3px; padding: 16px 38px; border: 1px solid #fff; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; cursor: pointer; } .payment_banner_area .intro_content .slider_payment_btn:hover { box-shadow: none; } .payment_banner_area .intro_content .slider_payment_btn_two { font: 500 14px "Poppins", sans-serif; color: #fff; position: relative; margin-left: 30px; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .payment_banner_area .intro_content .slider_payment_btn_two:before { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; } /*=========== payment_banner_area css ===========*/ /*=========== app_screen css ===========*/ .app_mockup { position: absolute; right: 140px; width: 792px; top: 0; z-index: -1; height: 745px; } .app_mockup img { position: absolute; opacity: 0; } .app_mockup .img_one { right: 240px; bottom: -95px; z-index: 1; animation: slideM 7s infinite 1.8s; } .app_mockup .img_two { left: 40px; top: 180px; animation: slideM 7s infinite 1.9s; animation-timing-function: ease-in, ease-in-out; } .app_mockup .img_three { left: 100px; bottom: 0; animation: womenS2 7s infinite 2s; animation-timing-function: ease-in, ease-in-out; } .app_mockup .img_four { right: -35px; bottom: 23px; animation: slideM2 7s infinite 0.6s; animation-timing-function: ease-in, ease-in-out; } .app_mockup .img_five { right: 400px; top: 120px; } .app_mockup .img_six { right: 22px; top: 275px; animation: slideM3 infinite; animation-duration: 7s; animation-delay: 1s; animation-timing-function: ease-in, ease-in-out; } .app_mockup .img_seven { right: -98px; top: 311px; animation: slideM3 infinite; animation-duration: 7s; animation-delay: 1.2s; animation-timing-function: ease-in, ease-in-out; } .app_mockup .img_eight { right: -25px; top: 350px; animation: slideM3 infinite; animation-duration: 7s; animation-delay: 1.4s; animation-timing-function: ease-in, ease-in-out; } /*=========== app_screen css ===========*/ canvas { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1; } /*============= prototype_banner_area =============*/ .prototype_banner_area { text-align: center; padding-top: 150px; background-image: linear-gradient(360deg, #fff 0%, #fdf5f5 110%); position: relative; z-index: 1; } .p_banner_img { max-width: 700px; margin: 40px auto 0px; position: relative; } .p_banner_shapes span { position: absolute; } .p_banner_shapes span:nth-child(1) { left: 4.8%; top: 8.5%; } .p_banner_shapes span:nth-child(2) { left: 12.6%; top: 30.2%; } .p_banner_shapes span:nth-child(3) { left: 8.8%; bottom: 16%; } .p_banner_shapes span:nth-child(4) { left: 25%; bottom: 21%; } .p_banner_shapes span:nth-child(5) { left: 35%; top: 6.6%; } .p_banner_shapes span:nth-child(6) { left: 43%; bottom: 30%; } .p_banner_shapes span:nth-child(7) { right: 50%; top: 51%; } .p_banner_shapes span:nth-child(8) { right: 11.8%; top: 33.3%; } .p_banner_shapes span:nth-child(9) { right: 6%; top: 20%; } .p_banner_shapes span:nth-child(10) { right: 4%; bottom: 18%; } .prototype_banner_content h2 { font-size: 70px; line-height: 78px; color: #263b5e; text-transform: capitalize; margin-bottom: 30px; } .prototype_banner_content p { line-height: 30px; font-family: "Poppins", sans-serif; color: #6a7695; margin-bottom: 45px; } .protype_btn { font-weight: 500; font-size: 14px; font-family: "Poppins", sans-serif; display: inline-block; padding: 11px 40px; border-radius: 4px; color: #5e2ced; background: #e8e1fc; transition: all 0.3s linear; margin: 0px 5px; } .protype_btn:hover { background: #5e2ced; color: #fff; } .protype_btn.p_two { color: #00c99c; background: #d4f6ee; } .protype_btn.p_two:hover { background: #00c99c; color: #fff; } /*============= prototype_banner_area =============*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*================== customer_logo_area css ============*/ .customer_logo_area { background: #fafbfd; } .customer_logo_area .customer_info { position: relative; border-bottom: 1px solid #ecf0f7; padding: 20px 0px; } .customer_logo_area .customer_info:hover ul { transform: scale(0.95); filter: blur(5px); } .customer_logo_area .customer_info:hover .customer_btn { opacity: 1; top: 50%; } .customer_logo_area .customer_info ul { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0px; transition: 1s cubic-bezier(0.19, 1, 0.22, 1); filter: blur(0); } .customer_logo_area .customer_info ul li { margin: 5px 20px; line-height: 40px; text-align: center; } .customer_logo_area .customer_info .customer_btn { font-size: 16px; line-height: 28px; display: inline-block; font-family: "Poppins", sans-serif; color: #fff; position: absolute; top: 55%; padding: 8px 35px; border-radius: 25px; background-image: -moz-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(180deg, #ffc600 0%, #ff9600 100%); left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.4s linear; min-width: 172px; z-index: 1; } /*================== customer_logo_area css ============*/ .customer_logo_area_two { padding: 100px 0px 0px; background: transparent; } .customer_logo_area_two .customer_info { border: 0px; } .customer_logo_area_two .customer_info .customer_btn { border-radius: 3px; background-image: linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-size: 150%; } .customer_logo_area_two .customer_info .customer_btn:hover { background-position: 100% 0; } /*============ works_area css ============*/ .works_area { background: #fafbfd; } .work_item { background: #fff; box-shadow: 0px 3px 6px 0px rgba(0, 7, 30, 0.05); padding: 40px 30px; cursor: pointer; transition: all 0.3s linear; } .work_item h3 { font-family: "Source Sans Pro", sans-serif; font-size: 26px; line-height: 35px; font-weight: 600; margin: 38px 0px 10px; } .work_item p { font-size: 18px; line-height: 30px; color: #a5a9ba; font-family: "Source Sans Pro", sans-serif; } .work_item:hover { box-shadow: 0px 20px 20px 0px rgba(0, 7, 30, 0.08); } .works_area_two .work_item { border: 1px solid #eeeeee; box-shadow: none; } .works_area_two .work_item h3 { color: #282b31; font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 500; } .works_area_two .work_item p { font-family: "Lato", sans-serif; color: #676b75; font-weight: 300; } .works_area_two .work_item:hover { box-shadow: 0px 36px 46px 0px rgba(0, 0, 0, 0.05); } /*============ works_area css ============*/ /*============= app_works_area ===========*/ .app_works_area { padding-top: 160px; } .app_work_info { display: flex; flex-wrap: wrap; margin-left: -2%; margin-right: -2%; padding-right: 30px; } .app_work_info .app_work_item { position: relative; width: 46%; margin: 0px 2% 50px; padding-right: 80px; cursor: pointer; } .app_work_info .app_work_item .icon { width: 70px; height: 70px; justify-content: center; font-size: 28px; display: flex; align-items: center; font-weight: 600; font-family: "Poppins", sans-serif; border: 1px solid rgba(0, 186, 222, 0.09); border-radius: 4px; background-color: rgba(16, 205, 230, 0.039); color: #11bdff; margin-bottom: 35px; z-index: 1; position: relative; transition: all 0.2s linear; } .app_work_info .app_work_item .icon:before { content: ""; width: 100%; height: 100%; border-radius: 4px; position: absolute; left: 0; top: 0; z-index: -1; background-image: linear-gradient(90deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 100%, #11bdff 100%); opacity: 0; transition: all 0.2s linear; } .app_work_info .app_work_item .media-body h3 { font-size: 24px; font-weight: 600; font-family: "Poppins", sans-serif; color: #252a32; margin-bottom: 15px; transition: color 0.2s linear; } .app_work_info .app_work_item .media-body p { font-size: 16px; line-height: 28px; color: #7f8ba0; font-family: "Lato", sans-serif; margin-bottom: 0px; } .app_work_info .app_work_item:hover h3 { color: #11bdff; } .app_work_info .app_work_item:hover .icon { color: #fff; } .app_work_info .app_work_item:hover .icon:before { opacity: 1; } .app_img { text-align: right; position: relative; z-index: 0; } .app_img .shape { position: absolute; left: 0; top: 65px; z-index: -1; } .app_img img { position: relative; z-index: 1; } .app_screen { position: absolute; top: 0; right: 0; } /*============= app_works_area ===========*/ .w_bg { background: #fff; } .round { width: 500px; height: 500px; border: 45px solid #11bdff; opacity: 0.6; position: absolute; top: 50%; left: -80px; transform: translateY(-55%); border-radius: 50%; z-index: -1; } .memphis li { position: absolute; z-index: 0; } .memphis li:nth-child(1) { left: -70px; top: 0; } .memphis li:nth-child(2) { left: -70px; bottom: 50px; } .memphis li:nth-child(3) { left: -90px; top: 90px; animation: slideInnew 0.9s both 0.6s infinite alternate; } .memphis li:nth-child(4) { right: -70px; top: 70px; } .memphis li:nth-child(5) { left: -70px; bottom: 150px; } @-webkit-keyframes slideInnew { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); transform: translate(10px, 10px); } 100% { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes slideInnew { 0% { opacity: 0; -webkit-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px); transform: translate(10px, 10px); } 100% { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } .slideInnew { -webkit-animation-name: slideInnew; animation-name: slideInnew; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============== saas_features_area css ============*/ .saas_features_area { padding-top: 120px; overflow: hidden; } .saas_features_item { display: flex; flex-wrap: wrap; } .saas_features_item + .saas_features_item { margin-top: 100px; } .saas_features_item .saas_features_left, .saas_features_item .saas_features_right { width: 50%; } .saas_features_item .saas_features_left { text-align: right; position: relative; z-index: 1; } .saas_features_item .saas_features_left .shape_one { position: absolute; left: -204px; z-index: -1; width: 903px; height: 828px; top: 48px; } .saas_features_item .saas_features_left .shape_one path { fill: rgba(38, 74, 218, 0.039); } .saas_features_item .saas_features_left .shape_two { position: absolute; left: -81px; z-index: -1; width: 926px; height: 901px; top: 28px; z-index: -2; } .saas_features_item .saas_features_left .shape_two path { fill: #f8f9fd; } .saas_features_item.item_one { position: relative; } .saas_features_item.item_one:before { content: ""; background: url(/img/saas/dotted.webp) no-repeat scroll center bottom; width: 100%; height: 100%; position: absolute; bottom: -244px; left: 0; } .saas_features_item.item_one .saas_features_content { margin: 0 auto 0px -215px; } .saas_features_item.item_two .saas_features_content { margin: 0 -215px 0px auto; box-shadow: -34.641px 20px 100px 0px rgba(0, 7, 30, 0.08); } .saas_features_item.item_two .saas_features_left .shape_three { position: absolute; right: -200px; width: 945px; height: 930px; top: 22px; z-index: -2; } .saas_features_item.item_two .saas_features_left .shape_three path { fill: #f8f9fd; } .saas_features_item.item_two .saas_features_left .shape_four { position: absolute; right: -61px; top: 20px; width: 904px; height: 885px; z-index: -1; } .saas_features_item.item_two .saas_features_left .shape_four path { fill: rgba(38, 74, 218, 0.039); } .saas_features_item .saas_features_right { display: flex; align-items: center; position: relative; z-index: 1; } .saas_features_item .saas_features_content { max-width: 800px; box-shadow: 25.712px 30.642px 100px 0px rgba(0, 7, 30, 0.08); background: #fff; padding: 70px 70px 78px; } .saas_features_item .saas_features_content h2 { font-size: 34px; line-height: 48px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; margin-bottom: 0px; } .saas_features_item .saas_features_content .border_bottom { width: 60px; height: 2px; background-image: -moz-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); display: block; margin: 20px 0px 23px; } .saas_features_item .saas_features_content p { font-size: 18px; line-height: 32px; color: #a5a9ba; font-family: "Source Sans Pro", sans-serif; margin-bottom: 40px; } /*============== saas_features_area css ============*/ /*============== saas_features_area_two css ============*/ .saas_features_area_two { padding-top: 0; } .saas_features_area_two .saas_features_item .saas_features_left img { max-width: 100%; } .saas_features_area_two .saas_features_content_two { max-width: 585px; margin-left: 0; margin-right: auto; padding-left: 130px; } .saas_features_area_two .saas_features_content_two .saas_title_two { margin-bottom: 0; } .saas_features_area_two .saas_features_content_two h2 { line-height: 48px; margin-bottom: 25px; } .saas_features_area_two .saas_features_content_two p { line-height: 32px; letter-spacing: 0.2px; color: #676b75; } .saas_features_area_two .saas_features_content_two .learn_btn { font-size: 18px; font-weight: 600; line-height: 22px; font-family: "Poppins", sans-serif; color: #282b31; display: inline-block; margin-top: 32px; position: relative; overflow: hidden; } .saas_features_area_two .saas_features_content_two .learn_btn:before { content: ""; width: 100%; height: 1px; background: #282b31; position: absolute; bottom: 0; left: 0; transform: translateX(-100%); transition: all 0.2s linear; } .saas_features_area_two .saas_features_content_two .learn_btn:hover:before { transform: translateX(0); } .saas_features_area_two .item_two .saas_features_content_two { margin-left: auto; margin-right: 0; padding-left: 0; padding-right: 130px; } /*============== saas_features_area_two css ============*/ /*============== app_features_area css ============*/ .app_features_area { padding-top: 110px; } .app_features_item { text-align: center; padding: 30px 40px 0px; } .app_features_item .icon { width: 116px; height: 116px; font-size: 50px; margin: 0 auto; position: relative; z-index: 1; line-height: 116px; } .app_features_item .icon:before { content: ""; width: 100%; height: 100%; background: url("/img/app/icon_shape.webp") no-repeat scroll center 0; position: absolute; top: 8px; left: -2px; z-index: -1; } .app_features_item .icon:after { content: ""; width: 100%; height: 100%; background: url("/img/app/icon_shape2.webp") no-repeat scroll center left; position: absolute; top: 0; left: 7px; z-index: -2; } .app_features_item .icon i { color: #fff; } .app_features_item h4 { font-size: 20px; color: #252a32; font-family: "Poppins", sans-serif; margin-bottom: 14px; margin-top: 28px; } .app_features_item p { font-family: "Lato", sans-serif; font-size: 16px; line-height: 28px; color: #7f8ba0; } /*============== app_features_area css ============*/ /*============== app_function_area css ============*/ .app_function_area { position: relative; } .app_function_item .app_function_content h2 { font-size: 32px; font-weight: 600; color: #252a32; line-height: 45px; font-family: "Poppins", sans-serif; margin-top: 20px; margin-bottom: 25px; } .app_function_item .app_function_content p { font-family: "Lato", sans-serif; color: #7f8ba0; margin-bottom: 55px; } .app_function_item .back_img { position: absolute; z-index: -1; top: -10px; } .app_function_item .app_function_img { position: relative; padding-left: 80px; } .app_function_item.app_f_one .app_function_content { padding-right: 150px; } .app_function_item.app_f_one .app_function_img { padding-left: 200px; } .app_function_item.app_f_one .app_function_img .back_img { left: 0; } .app_function_item.app_f_two .app_function_content { padding-left: 150px; } .app_function_item.app_f_two .app_function_img .back_img { right: 0; } .app_function_item + .app_function_item { margin-top: 90px; } .polygon_img { position: absolute; left: 0; top: 0; } .round_img { position: absolute; right: 0; top: 70%; } /*============== app_function_area css ============*/ /*============== p_features_area css ============*/ .custom-container { max-width: 1520px; } @media (max-width: 1300px) { .custom-container { max-width: 100%; } } .p_features_area { padding: 120px 0px; } .p_features_area .p_l { padding-left: 80px; } .p_features_area .p_r { padding-right: 100px; } .border_bottom { border-top: 1px solid rgba(225, 225, 225, 0.6) !important; max-width: 1520px; margin: 0 auto; } .p_features_content h6 { text-transform: uppercase; font-size: 14px; color: #f31f74; font-weight: 600; } .p_features_content h1 { margin-bottom: 30px; font-family: "Product"; } .p_features_content ul { margin-bottom: 0; } .p_features_content ul li { font-size: 16px; color: #6f8ba4; font-family: "Source Sans Pro", sans-serif; font-weight: 300; padding-left: 25px; position: relative; transition: all 0.2s linear; cursor: pointer; margin-bottom: 5px; } .p_features_content ul li:before { content: "$"; font-family: eleganticons; font-weight: 400; vertical-align: middle; position: absolute; left: 0; top: 1px; } .p_features_content ul li:hover { padding-left: 30px; } .features_btn { font-size: 18px; font-family: "Product"; font-weight: 400; color: #19182e; margin-top: 25px; display: inline-block; } .features_btn i { font-weight: 700; vertical-align: middle; } .features_btn:hover { color: #f31f74; } /*============== p_features_area css ============*/ /*============== introducing_area css ============*/ .introducing_area { padding-top: 95px; padding-bottom: 70px; } .introducing_title { margin-bottom: 70px; } .introducing_title h6 { font: 500 28px "Poppins", sans-serif; color: #21d4fd; margin-bottom: 5px; } .introducing_title h3 { font: 600 35px "Poppins", sans-serif; color: #252a32; margin-bottom: 0; } .introducing_content { margin-bottom: 70px; } .introducing_content h3 { font: 600 26px/35px "Poppins", sans-serif; color: #252a32; margin-bottom: 15px; text-transform: capitalize; } .introducing_content p { font: 300 16px/29px "Poppins", sans-serif; color: #8d949e; padding-right: 50px; margin-bottom: 0; } .p_icon { width: 122px; height: 125px; line-height: 125px; text-align: center; position: relative; margin-bottom: 25px; z-index: 1; } .p_icon:before { content: ""; width: 100%; height: 100%; background: url("/img/payment/icon-shap5.webp") no-repeat scroll center; position: absolute; left: -2px; top: 0; z-index: -1; } .p_icon i { color: #fff; } .p_icon i:before { font-size: 48px; } .p_icon.two:before { background: url("/img/payment/icon-shap3.webp") no-repeat scroll center; } .p_icon.three:before { background: url("/img/payment/icon-shap4.webp") no-repeat scroll center; } .p_icon.four:before { background: url("/img/payment/icon-shap2.webp") no-repeat scroll center; } .p_icon.five:before { background: url("/img/payment/icon-shap6.webp") no-repeat scroll center; } .p_icon.six:before { background: url("/img/payment/icon-shap7.webp") no-repeat scroll center; } .introducing_area_two { padding: 120px 0px; } .introducing_area_two .row { margin-bottom: -70px; } .introducing_area_two .introducing_content { padding: 0px 30px; } .introducing_area_two .introducing_content h3 { margin-bottom: 12px; font-family: "Product"; color: #19182e; } .introducing_area_two .introducing_content p { line-height: 30px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; color: #6f8ba4; padding-right: 10px; } .introducing_area_two .introducing_content a { font: 600 16px "Source Sans Pro", sans-serif; color: #19182e; display: inline-block; margin-top: 25px; transition: color 0.2s linear; } .introducing_area_two .introducing_content a:hover { color: #21d4fd; } /*============== introducing_area css ============*/ /*============== payment_features_area css ============*/ .payment_features_area { position: relative; z-index: 1; } .payment_features_info + .payment_features_info { padding-top: 180px; } .payment_features_img { position: relative; } .payment_features_img .p_features_img_one { margin-left: -40px; position: relative; } .payment_features_img .p_features_logo_one, .payment_features_img .p_features_logo_two, .payment_features_img .p_features_logo_three { position: absolute; } .payment_features_img .p_features_logo_one { left: -120px; bottom: -60px; } .payment_features_img .p_features_logo_two { left: 40px; top: 210px; } .payment_features_img .p_features_logo_three { left: -120px; top: 100px; } .payment_features_img .p_f_shap { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0.05; z-index: -1; left: 0px; width: 110%; } .payment_features_img.p_f_img_two { text-align: right; } .payment_features_img.p_f_img_two .p_f_two { max-width: 100%; margin-right: -80px; } .payment_features_img.p_f_img_two .p_f_three { position: absolute; right: -50%; max-width: 60%; box-shadow: 0px 10px 60px 0px rgba(0, 11, 40, 0.1); top: 50%; transform: translateY(-50%); border-radius: 8px; overflow: hidden; } .payment_features_img.p_f_img_two .p_f_four { position: absolute; left: -50px; max-width: 60%; top: 76px; } .payment_features_img.p_f_img_two .p_f_five { position: absolute; left: -50px; bottom: 76px; max-width: 65%; z-index: 1; box-shadow: 0px 10px 60px 0px rgba(0, 11, 40, 0.1); } .payment_content h2 { font-size: 32px; line-height: 42px; color: #252a32; font-weight: 600; font-family: "Poppins", sans-serif; margin-bottom: 25px; } .payment_content p { font-size: 16px; line-height: 30px; color: #8d949e; font-family: "Poppins", sans-serif; font-weight: 400; margin-bottom: 45px; } .payment_content .p_icon { width: 92px; height: 125px; line-height: 120px; text-align: center; position: relative; margin-bottom: 10px; z-index: 1; } .payment_content .p_icon:before { content: ""; width: 100%; height: 100%; background: url("/img/payment/icon_shape.webp") no-repeat scroll center; position: absolute; left: -2px; top: 0; } .payment_content .p_icon i { color: #21d4fd; } .payment_content .p_icon i:before { font-size: 40px; } .payment_btn { color: #5956fe; position: relative; border: 0px; z-index: 1; border-radius: 4px; background: #fff; z-index: 1; min-width: 170px; padding: 15px 20px; text-align: center; display: inline-block; -webkit-box-shadow: 0px 2px 12px 0px rgba(63, 54, 132, 0.1); box-shadow: 0px 2px 12px 0px rgba(63, 54, 132, 0.1); font: 500 14px "Poppins", sans-serif; } .payment_btn:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; border-radius: 3px; background-image: -moz-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); -webkit-transition: all 0.3s linear; background-size: 150% 100%; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .payment_btn:hover { color: #fff; } .payment_btn:hover:before { opacity: 1; } .payment_btn_two { background-image: linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-size: 150% 100%; color: #fff; margin-left: 15px; } .payment_btn_two:before { display: none; } .payment_btn_two:hover { background-position: 100% 0; } .payment_features_tab { border: 10px solid #f0f8fa; overflow: hidden; width: 630px; height: 492px; border-radius: 10px; margin-left: -40px; perspective-origin: 25% 75%; perspective: 400px; -webkit-box-shadow: -27.1px 62.5px 125px -25px rgba(50, 50, 93, 0.5), -16.2px 37.5px 75px -37.5px rgba(0, 0, 0, 0.6); box-shadow: -27.1px 62.5px 125px -25px rgba(50, 50, 93, 0.5), -16.2px 37.5px 75px -37.5px rgba(0, 0, 0, 0.6); transform: perspective(538px) rotateY(12deg) rotateX(0deg) scale(1.05); position: relative; } .payment_features_tab .tab_slider .tab_item { width: calc(100% / 5); text-align: center; font-size: 16px; font-weight: 400; color: #252a32; border: 1px solid #ededed; border-radius: 0px; padding: 10px 15px; } .payment_features_tab .tab_slider .tab_item.slick-current { color: #21d4fd; } .payment_features_tab .tab_slider_img { overflow: hidden; } /*============== payment_features_area css ============*/ /*============== main_faq_area css ============*/ .main_faq_area { background: #fafbfd; } .faq_questions { padding-right: 50px; } .faq_questions .faq-question_item h3 { font-size: 24px; line-height: 35px; font-family: "Product"; font-weight: 700; position: relative; padding-left: 40px; color: #19182e; } .faq_questions .faq-question_item h3 span { position: absolute; left: 0; top: 0; color: #11bdff; } .faq_questions .faq-question_item p { line-height: 30px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; font-size: 16px; color: #6f8ba4; margin-bottom: 0; } .faq_questions .faq-question_item:not(:last-child) { margin-bottom: 50px; } .sidebar_add { text-align: center; padding: 30px; border: 1px solid #e1e6ee; border-radius: 5px; margin-left: 60px; } .sidebar_add .p_icon { margin: 0 auto 18px; } .sidebar_add h6 { margin-top: 0px; font-family: "Product"; font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 15px; } .sidebar_add a { font-size: 16px; line-height: 20px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; color: #11bdff; display: inline-block; } .sidebar_add a:after { content: ""; width: 100%; height: 1.5px; bottom: 0; display: block; background: #11bdff; opacity: 0; transition: opacity 0.3s linear; } .sidebar_add a:hover:after { opacity: 1; } /*============== main_faq_area css ============*/ /*============== faq_area css ============*/ .faq_area { padding: 120px 0px 120px; } .faq_tab { align-items: center; justify-content: center; border: 0px; } .faq_tab .nav-item { margin-bottom: 10px; } .faq_tab .nav-item .nav-link { font: 400 18px "Product"; padding: 0px; border: 0px; border-radius: 0px; color: #19182e; position: relative; transition: color 0.2s linear; } .faq_tab .nav-item .nav-link:before { content: ""; width: 0; height: 1px; background: #21d4fd; position: absolute; left: 0; bottom: 0; transition: width 0.2s linear; } .faq_tab .nav-item .nav-link.active { font-weight: 700; color: #21d4fd; } .faq_tab .nav-item .nav-link.active:before { width: 100%; } .faq_tab .nav-item .nav-link:hover { color: #21d4fd; } .faq_tab .nav-item .nav-link:hover:before { width: 100%; } .faq_tab .nav-item:not(:last-child) { margin-right: 35px; } .faq_content h3 { font-family: "Product"; font-size: 24px; margin-top: 60px; margin-bottom: 40px; } .faq_content .card { border: 0px; margin-bottom: 15px; } .faq_content .card .card-header { border-radius: 0px; background: #f7f8fb; padding: 0px; border: 0px; } .faq_content .card .card-header button { padding: 16px 50px 16px 30px; display: block; width: 100%; text-align: left; background: transparent; font-size: 20px; font-family: "Product"; font-weight: 400; white-space: normal; color: #19182e; text-decoration: none; position: relative; } .faq_content .card .card-header button:before { content: "M"; font-family: eleganticons; position: absolute; right: 25px; font-size: 22px; top: 50%; transform: translateY(-50%); transition: all 0.3s linear; } .faq_content .card .card-header button.collapsed:before { content: "L"; } .faq_content .card .card-body { color: #6f8ba4; line-height: 30px; font-family: "Source Sans Pro", sans-serif; padding: 30px; background: rgba(247, 248, 251, 0.4); } /*============== faq_area css ============*/ /*============== prototype_features_area css ============*/ .prototype_features_area_one { padding: 120px 0px 50px; } .prototype_features_area_two { padding: 50px 0px 120px; } .prototype_content h3 { font-size: 36px; line-height: 47px; color: #263b5e; margin-bottom: 25px; } .prototype_content p { color: #6a7695; font-family: "Poppins", sans-serif; } .prototype_content h6 { font-size: 20px; color: #263b5e; font-weight: 500; line-height: 28px; margin-bottom: 25px; } .prototype_content .protype_btn { margin: 35px 0px 0px; } .prototype_f_item { padding-right: 70px; margin-top: 50px; } .prototype_f_item .icon { margin-bottom: 0; margin-right: 30px; } .prototype_f_item h4 { font-size: 20px; color: #263b5e; margin-bottom: 15px; } .prototype_f_item p { margin-bottom: 0; } .prototype_img { position: relative; right: -80px; } .prototype_img .back_img { position: absolute; top: -50px; max-width: 56%; left: 50%; transform: translateX(-50%); z-index: -1; } .prototype_img.prototype_img_left { right: 50px; } /*============== prototype_features_area css ============*/ /*============== setup_area css ============*/ .setup_inner { max-width: 970px; margin: 0 auto; } .setup_inner .setup_img img { max-width: 100%; } .setup_step_item { align-items: center; position: relative; padding: 20px 0px; } .setup_step_item h3 { font-size: 24px; font-weight: 600; color: #263b5e; font-family: "Poppins", sans-serif; margin-bottom: 15px; } .setup_step_item p { margin-bottom: 0; color: #6a7695; font-family: "Poppins", sans-serif; } .setup_step_item.flex-row-reverse { text-align: right; } .setup_step_item .line { position: absolute; left: 50%; top: 0; width: 0; height: 100%; border-right: 2px dashed #f2f4f8; } .setup_step_item .line.bottom_half { top: auto; bottom: 0; height: 50%; } .setup_step_item .line.top_half { bottom: auto; top: 0; height: 50%; } .s_number .round { position: relative; z-index: 2; display: block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(2, 45, 79, 0.1); color: #5e2ced; line-height: 80px; text-align: center; font-size: 40px; font-family: "Poppins", sans-serif; font-weight: 600; margin: 0 auto; left: 0; opacity: 1; transform: translateY(0); border: 0px; } /*============== setup_area css ============*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*=========== portfolio_area css ===========*/ .portfolio_area .portfolio_btn { margin-top: 40px; } .portfolio_btn { background: #21d4fd; color: #fff; box-shadow: 0px 11px 30px 0px rgba(12, 0, 46, 0.15); transition: all 0.3s linear; cursor: pointer; } .portfolio_btn:before { display: none; } .portfolio_btn:hover { box-shadow: none; } figcaption, .ph_content { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 1; padding: 40px 30px; width: 100%; color: #fff; } figcaption h3, .ph_content h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; font-family: "Product"; transform: translateY(-100%); transition: transform 0.3s linear, opacity 0.3s linear; opacity: 0; color: #fff; } figcaption p, .ph_content p { font-size: 16px; line-height: 28px; transform: translateY(50%); opacity: 0; } figcaption .category, .ph_content .category { transform: translateY(-10px); opacity: 0; margin-bottom: 5px; transition: all 0.3s linear; } figcaption .category a, .ph_content .category a { text-transform: uppercase; font-size: 12px; letter-spacing: 0.125em; font-weight: 500; font-family: "Product"; color: #fff; } figcaption .category a + a:before, .ph_content .category a + a:before { content: "-"; display: inline-block; margin-left: 0px; margin-right: 7px; } .portfolio_item { position: relative; } .portfolio_item * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .portfolio_item img { max-width: 100%; backface-visibility: hidden; } .portfolio_item:after, .portfolio_item:before { position: absolute; top: 0; content: ""; width: 50%; height: 50%; background: rgba(33, 212, 253, 0.7); transform: scale(0); transform-origin: left 0; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .portfolio_item:before { left: 0; transform: scale(0); transform-origin: left 0; } .portfolio_item:after { right: 0; transform: scale(0); transform-origin: right 0; } .portfolio_item .bg_hover { position: absolute; bottom: 0; height: 50%; width: 100%; } .portfolio_item .bg_hover:before, .portfolio_item .bg_hover:after { position: absolute; content: ""; width: 50%; height: 100%; background: rgba(33, 212, 253, 0.7); transition: all 0.35s ease; } .portfolio_item .bg_hover:before { left: 0; transform: scale(0); transform-origin: left bottom; } .portfolio_item .bg_hover:after { right: 0; transform: scale(0); transform-origin: right bottom; } figure { position: relative; overflow: hidden; margin-bottom: 30px; cursor: pointer; } figure:hover .portfolio_item:before, figure:hover .portfolio_item:after, figure:hover .portfolio_item .bg_hover:before, figure:hover .portfolio_item .bg_hover:after { transform: scale(1); opacity: 1; } figure:hover figcaption h3, figure:hover figcaption p, figure:hover .ph_content h3, figure:hover .ph_content p { opacity: 1; transform: translateY(0); } figure:hover figcaption h3, figure:hover .ph_content h3 { transition: transform 0.5s 0.3s linear, opacity 0.8s 0.4s linear; } figure:hover figcaption p, figure:hover .ph_content p { transition: transform 0.5s 0.4s linear, opacity 0.8s 0.4s linear; } figure:hover figcaption .category, figure:hover .ph_content .category { opacity: 1; transform: translateY(0); } .pr_item figure { margin-bottom: 0; } .pr_item .p_style_two { margin-bottom: 0; } .pr_item .p_content { position: relative; padding-top: 25px; padding-bottom: 25px; top: 0; transform: translateY(0); } .pr_item .p_content h3 { color: #19182e; opacity: 1; transform: translateY(0); font-size: 24px; margin-bottom: 3px; } .pr_item .p_content .category { opacity: 1; margin-bottom: 0; transform: translateY(0); } .pr_item .p_content .category a { color: #6f8ba4; } /*=========== portfolio_area css ===========*/ /*=========== web_portfolio_gallery_area css ===========*/ .web_portfolio_gallery_area { background: #fafbfd; } .web_portfolio_gallery_area .portfolio_slider { position: relative; } .web_portfolio_gallery_area .portfolio_slider button { position: absolute; background: transparent; border: 0px; padding: 0px; font-size: 20px; z-index: 2; width: 40px; height: 40px; text-align: center; background: rgba(33, 212, 253, 0.4); color: #fff; top: 45%; transform: translateY(-50%); cursor: pointer; opacity: 0; transition: all 0.2s linear; } .web_portfolio_gallery_area .portfolio_slider button.owl-next { right: 0; } .web_portfolio_gallery_area .portfolio_slider button.owl-prev { left: 0; } .web_portfolio_gallery_area .portfolio_slider .owl-dots { display: none; } .web_portfolio_gallery_area .portfolio_slider:hover button { opacity: 1; } .web_portfolio_gallery_area .portfolio_slider p { font-size: 18px; line-height: 32px; color: #6f8ba4; margin-bottom: 0; padding: 35px 40px 0px; } /*=========== web_portfolio_gallery_area css ===========*/ /*=========== portfolio_area_two css ===========*/ .portfolio_filter { text-align: center; margin-bottom: 50px; } .portfolio_filter div { display: inline-block; font: 600 16px/22px "Source Sans Pro", sans-serif; color: #6f8ba4; display: inline-block; border-radius: 3px; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; position: relative; cursor: pointer; } .portfolio_filter div:before, .portfolio_filter div:after { content: ""; width: 50%; height: 1px; position: absolute; bottom: 0; background: #21d4fd; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .portfolio_filter div:before { right: 0; transform-origin: 100% 50%; } .portfolio_filter div:after { left: 0; transform-origin: 0 -50%; } .portfolio_filter div:not(:first-child) { margin-left: 25px; } .portfolio_filter div:hover, .portfolio_filter div.active { color: #21d4fd; } .portfolio_filter div:hover:before, .portfolio_filter div:hover:after, .portfolio_filter div.active:before, .portfolio_filter div.active:after { transform: scale(1); } .portfolio_info figure figcaption { bottom: auto; top: 50%; transform: translateY(-50%); } .portfolio_info .portfolio_item:hover figcaption .category { transform: translateY(0); opacity: 1; } /*============ portfolio_details css ==========*/ .portfolio_details_img { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 50px; } .portfolio_details_text { padding-left: 35px; padding-right: 35px; } .portfolio_details_text h5 { margin-bottom: 15px; color: #19182e; font-weight: 700; font-family: "Product"; font-size: 30px; } .portfolio_details_text p { margin-bottom: 0px; font-size: 18px; line-height: 33px; color: #6f8ba4; font-family: "Source Sans Pro", sans-serif; margin-bottom: 25px; } .portfolio_category { position: absolute; bottom: 35px; left: 35px; right: 35px; background: #fff; border-radius: 10px; margin: 0px; padding: 40px 50px 20px; } .portfolio_category .p_category_item h6 { color: #19182e; font-size: 20px; font-family: "Source Sans Pro", sans-serif; } .portfolio_category .p_category_item p { color: #6f8ba4; } /*============= portfolio_details_area css ==============*/ .recent_portfolio_area { padding-bottom: 120px; } .recent_portfolio_slider { margin-left: -15px; margin-right: -15px; } .recent_portfolio_slider .item { padding-left: 15px; padding-right: 15px; } .recent_portfolio_slider .p_content h3 { transition: color 0.2s linear; } .recent_portfolio_slider .p_content h3:hover { color: #11bdff; } .recent_portfolio_slider .slick-dots li { margin: 0px 5px; width: auto; height: auto; } .recent_portfolio_slider .slick-dots li button { padding: 0px; width: 10px; height: 10px; background: rgba(43, 35, 80, 0.1); border-radius: 50%; transition: all 0.2s linear; } .recent_portfolio_slider .slick-dots li button:before { content: ""; width: 100%; height: 100%; border-radius: 50%; transform: scale(0.5); background: #11bdff; transition: all 0.2s linear; } .recent_portfolio_slider .slick-dots li.slick-active button:before { transform: scale(1); } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============== saas_service_area css ================*/ .saas_service_item .icon { width: 60px; height: 60px; background: rgba(37, 211, 184, 0.16); border-radius: 10px; text-align: center; font-size: 24px; color: #25d3b8; line-height: 60px; margin-right: 30px; } .saas_service_item .icon.orange { color: #f74e38; background: rgba(247, 78, 56, 0.16); } .saas_service_item .icon.blue { color: #26a8fc; background: rgba(38, 168, 252, 0.16); } .saas_service_item .icon.yellow { color: #afc70c; background: rgba(175, 199, 12, 0.16); } .saas_service_item .icon.green { color: #2cc36d; background: rgba(44, 195, 109, 0.16); } .saas_service_item .icon.purpple { color: #a73bf9; background: rgba(167, 5, 249, 0.16); } .saas_service_item .media-body h4 { font-family: "Source Sans Pro", sans-serif; font-size: 24px; font-weight: 600; } .saas_service_item .media-body p { font-family: "Source Sans Pro", sans-serif; font-size: 18px; color: #9398ab; line-height: 28px; margin-bottom: 0; } .saas_service_item.flex-row-reverse { text-align: right; } .saas_service_item.flex-row-reverse .icon { margin-left: 30px; margin-right: 0; } .saas_service_item + .saas_service_item { margin-top: 54px; } .saas_service_img img { box-shadow: 0px 20px 20px 0px rgba(0, 7, 30, 0.08); border-radius: 6px; } /*============== saas_service_area css ================*/ /*============== saas_service_area_two css ================*/ .saas_service_area_two .pl-20 { padding-left: 20px; padding-top: 8px; } .saas_service_area_two .pr-20 { padding-right: 20px; padding-top: 8px; } .saas_service_area_two .saas_title_two h2 { letter-spacing: 0.5px; line-height: 55px; } .saas_service_area_two .saas_service_item h4 { color: #282b31; font-family: "Poppins", sans-serif; font-weight: 500; margin-bottom: 15px; } .saas_service_area_two .saas_service_item .icon { width: 75px; height: 75px; line-height: 70px; border-radius: 20px; } .saas_service_area_two .saas_service_item p { font-family: "Lato", sans-serif; font-weight: 300; color: #676b75; font-size: 16px; } /*============== saas_service_area_two css ================*/ /*============= app_video_area css =========*/ .app_video_area { height: 650px; position: relative; z-index: 1; background-image: -moz-linear-gradient(13deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -webkit-linear-gradient(13deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); background-image: -ms-linear-gradient(13deg, #4f40ff 0%, #3a8ffa 53%, #25ddf5 76%, #11bdff 100%); overflow: hidden; } .app_video_area .video_bg { background: url("../img/app/video_bg.jpg") no-repeat scroll center 0/cover; position: absolute; top: 0; width: 100%; height: 120%; left: 0; z-index: -1; opacity: 0.1; } .app_video_area .shape_bottom { bottom: -25px; left: 0; z-index: 0; } .app_video_area .shape_top, .app_video_area .shape_bottom { position: absolute; width: 100%; height: 44px; } .app_video_area .shape_top path, .app_video_area .shape_bottom path { fill: white; } .app_video_area .shape_top { top: -25px; transform: rotate(180deg); } .app_video_area .shape { position: absolute; z-index: -2; } .app_video_area .shape.rounded_one { top: 0px; left: 0; } .app_video_area .shape.rounded_two { top: 60%; left: 400px; } .app_video_area .shape.polygon_three { bottom: 0; right: 200px; } .video_icon { width: 140px; height: 140px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2); } .video_icon .icon { width: 120px; height: 120px; background: rgba(255, 255, 255, 0.31); border-radius: 50%; top: 50%; margin-top: -60px; margin-left: -60px; position: absolute; left: 50%; text-align: center; font-size: 35px; color: #24cbf7; line-height: 120px; z-index: 10; text-shadow: 0px 5px 28px rgba(40, 203, 246, 0.76); } .video_icon .icon:before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border-radius: 50%; background: #fff; z-index: -1; } .video_icon .icon:after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; border-radius: 50%; background: #fff; z-index: -1; animation: thscale 3s ease-in-out 0s infinite both; } @-webkit-keyframes thscale { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 1; } 100% { -webkit-transform: scale(1.95); transform: scale(1.95); opacity: 0; } } @keyframes thscale { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 1; } 100% { -webkit-transform: scale(1.95); transform: scale(1.95); opacity: 0; } } /*============= app_video_area css =========*/ /*============= project_service_area css =========*/ .project_service_area { background: #f7fafd; padding: 360px 0px 120px; margin-top: -280px; } .p_service_item { text-align: center; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-bottom: 2px solid transparent; position: relative; border-radius: 5px; padding: 50px 25px; z-index: 0; transition: all 0.2s linear; cursor: pointer; } .p_service_item:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border-radius: 5px; background-image: linear-gradient(40deg, #6754e2 0%, #19cce6 100%); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity: 0; } .p_service_item .image_shape { left: 50%; transform: translateX(-50%); position: absolute; z-index: -1; top: 27px; } .p_service_item .icon { width: 90px; height: 90px; font-size: 35px; border-radius: 50%; line-height: 90px; margin: 0 auto; background: rgba(56, 184, 240, 0.13); color: #38b8f0; position: relative; } .p_service_item .icon.two { background: rgba(247, 178, 205, 0.14); color: #f7b2cd; } .p_service_item .icon.three { background: rgba(103, 84, 226, 0.13); color: #6754e2; } .p_service_item .icon.four { background: rgba(25, 204, 230, 0.14); color: #19cce6; } .p_service_item h3 { font-size: 22px; font-weight: 700; font-family: "Product"; color: #19182e; margin: 35px 0px 15px; } .p_service_item p { color: #6f8ba4; font-family: "Source Sans Pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 30px; margin-bottom: 0; } .p_service_item:hover { transform: translateY(-10px); box-shadow: 0px 10px 30px 0px rgba(0, 11, 40, 0.1); border-color: #f31f74; } .pr_service_area { padding: 120px 0px; } .pr_service_area .row { margin-bottom: -30px; } .pr_service_area .row .p_service_item { margin-bottom: 30px; } .pr_service_area .row .p_service_item:hover { border-bottom-color: #21d4fd; } /*============= project_service_area css =========*/ .solution_area { padding: 120px 0px; position: relative; } .solution_area:before { content: ""; position: absolute; z-index: -1; width: 100%; height: 94%; bottom: 180px; -webkit-transform: skewY(-7deg); -ms-transform: skewY(-7deg); transform: skewY(-7deg); background: #fafbfd; } .solution_area .solution_tab .nav-tabs { border: 0px; padding-right: 120px; } .solution_area .solution_tab .nav-tabs .nav-item .nav-link { width: 100%; margin-bottom: 20px; display: block; background-color: #fff; padding: 30px 20px 30px 30px; color: #2f2e48; font-size: 1rem; transition: all 0.2s ease-in; cursor: pointer; position: relative; z-index: 4; text-decoration: none !important; outline: 0; border-radius: 0px; border: 0px; border-left: 3px solid transparent; box-shadow: 2px 5px 20px 2px rgba(222, 222, 222, 0.12); } .solution_area .solution_tab .nav-tabs .nav-item .nav-link h4 { font-size: 18px; font-weight: 700; color: #19182e; font-family: "Product"; margin-bottom: 12px; text-transform: uppercase; } .solution_area .solution_tab .nav-tabs .nav-item .nav-link p { margin-bottom: 0px; font-size: 16px; font-family: "Source Sans Pro", sans-serif; color: #6f8ba4; } .solution_area .solution_tab .nav-tabs .nav-item .nav-link.active { box-shadow: 2px 5px 20px 2px rgba(222, 222, 222, 0.59); -webkit-box-shadow: 2px 5px 20px 2px rgba(222, 222, 222, 0.59); border-left-color: #21d4fd !important; } .solution_area .solution_content img { max-width: 100%; } .solution_area .solution_content .tab-pane { transform: translateX(10%); opacity: 0; transition: all 0.05s linear; } .solution_area .solution_content .tab-pane.active.show { opacity: 1; transform: translateX(0); transition: all 0.3s linear; } /*================== web_development_area css ============*/ .web_development_info { position: relative; } .web_development_info:not(:last-child) { padding-bottom: 150px; } .web_development_info:not(:last-child):before { content: ""; background: url(/img/saas/dotted2.webp) no-repeat scroll center bottom; width: 100%; height: calc(100% - 325px); position: absolute; bottom: -70px; left: 0; } .web_development_info .development_img img { max-width: 100%; } .web_development_info .development_content .p_icon { font-size: 42px; font-family: "Source Sans Pro", sans-serif; font-weight: 700; color: #fff; line-height: 115px; } .web_development_info .development_content h2 { font-size: 32px; line-height: 1.4; font-family: "Poppins", sans-serif; font-weight: 600; color: #2b2350; margin-bottom: 25px; letter-spacing: 0px; } .web_development_info .development_content p { font-size: 16px; line-height: 31px; font-weight: 400; font-family: "Poppins", sans-serif; margin-bottom: 15px; } .web_development_info .development_content .develop_btn { font-family: "Product"; font-size: 16px; font-weight: 600; margin-top: 20px; display: inline-block; color: #19182e; position: relative; } .web_development_info .development_content .develop_btn:before { content: ""; width: 0; height: 1px; background: #21d4fd; position: absolute; left: 0; bottom: 0; transition: width 0.2s linear; } .web_development_info .development_content .develop_btn i { vertical-align: middle; font-size: 15px; margin-left: 5px; transition: all 0.3s linear, color 0.1s; } .web_development_info .development_content .develop_btn:hover { color: #21d4fd; } .web_development_info .development_content .develop_btn:hover i { padding-left: 5px; } .web_development_info .development_content .develop_btn:hover:before { width: 100%; } .web_development_info.web_development_info_two:before { background: url("/img/saas/dotted3.webp") no-repeat scroll center bottom; } .web_development_info.web_development_info_two .development_content { padding-left: 80px; } /*================== web_development_area css ============*/ .solution_area_two:before { display: none; } .prototype_service_area { padding-top: 120px; padding-bottom: 50px; } @media (min-width: 992px) { .p_service_inner .col-lg-3 { flex: 0 0 20%; max-width: 20%; } } .prototype_service_item { text-align: center; background: #fbfbfd; padding: 40px 20px; box-shadow: 0px 30px 60px 0px rgba(38, 59, 94, 0.01); border-top: 5px solid transparent; transition: all 0.3s linear; border-radius: 5px; cursor: pointer; } .prototype_service_item h4 { color: #263b5e; font-size: 20px; line-height: 28px; margin-bottom: 0; } .prototype_service_item h4:hover { color: #5e2ced; } .prototype_service_item:hover { border-color: #5e2ced; background: #fff; box-shadow: 0px 30px 60px 0px rgba(38, 59, 94, 0.09); transform: translateY(-2px); } .pro_icon { margin-bottom: 25px; } .pro_icon img { width: 80px; } .prototype_fact_area { background-image: linear-gradient(-180deg, #fff 0%, #fdf5f5 50%); position: relative; z-index: 1; overflow: hidden; } .prototype_fact_area .fact_bg { position: absolute; left: 100px; bottom: 0; z-index: 1; } .p_fact_item { text-align: center; background: #fff; padding: 30px 0px 40px; box-shadow: 0px 30px 70px 0px rgba(233, 237, 244, 0.5); } .p_fact_item .f_icon { line-height: 75px; position: relative; margin: 0 auto 10px; z-index: 1; } .p_fact_item .f_icon i { color: #fff; font-size: 28px; } .p_fact_item .f_icon img { position: absolute; left: 0; z-index: -1; left: 50%; transform: translateX(-50%); } .p_fact_item h2 { font-size: 48px; margin-bottom: 0px; } .p_fact_item h2.one { color: #11bdff; } .p_fact_item h2.two { color: #ff4143; } .p_fact_item h2.three { color: #74d3ad; } .p_fact_item h2.four { color: #5e2ced; } .p_fact_item p { color: #6a7695; font-family: "Poppins", sans-serif; } /*============ service_details_area css =========*/ .service_details_area p { font-size: 18px; line-height: 33px; color: #6f8ba4; font-family: "Source Sans Pro", sans-serif; } .service_details_area ul { margin-bottom: -10px; margin-top: 30px; } .service_details_area ul li { font-size: 16px; font-weight: 400; color: #677294; margin-bottom: 10px; font-family: "Poppins", sans-serif; position: relative; padding-left: 25px; } .service_details_area ul li:before { content: "\\"; font-family: eleganticons; position: absolute; left: 0; opacity: 0.8; font-size: 14px; color: #677294; } .service_details_area .web_development_info:before { display: none; } .service_box_info { margin-bottom: -30px; } .service_box_info [class*=col-]:nth-child(2) .service_box .number { border-color: rgba(247, 178, 205, 0.14); color: #f7b2cd; } .service_box_info [class*=col-]:nth-child(2) .service_box .number:before { background: rgba(247, 178, 205, 0.1); } .service_box_info [class*=col-]:nth-child(2) .service_box:hover .number { border-color: #f7b2cd; color: #fff; } .service_box_info [class*=col-]:nth-child(2) .service_box:hover .number::before { background: #f7b2cd; } .service_box_info [class*=col-]:nth-child(3) .service_box .number { border-color: rgba(113, 33, 255, 0.14); color: #7121ff; } .service_box_info [class*=col-]:nth-child(3) .service_box .number:before { background: rgba(113, 33, 255, 0.1); } .service_box_info [class*=col-]:nth-child(3) .service_box:hover .number { border-color: #7121ff; color: #fff; } .service_box_info [class*=col-]:nth-child(3) .service_box:hover .number::before { background: #7121ff; } .service_box_info [class*=col-]:nth-child(4) .service_box .number { border-color: rgba(255, 198, 0, 0.14); color: #ffc600; } .service_box_info [class*=col-]:nth-child(4) .service_box .number:before { background: rgba(255, 198, 0, 0.1); } .service_box_info [class*=col-]:nth-child(4) .service_box:hover .number { border-color: #ffc600; color: #fff; } .service_box_info [class*=col-]:nth-child(4) .service_box:hover .number::before { background: #ffc600; } .service_box { box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.15); overflow: hidden; position: relative; padding: 35px 35px 26px; border-radius: 10px; margin-bottom: 30px; } .service_box .number { width: 80px; height: 80px; text-align: center; font-size: 25px; line-height: 80px; font-weight: 600; font-family: "Poppins", sans-serif; border: 2px solid rgba(56, 184, 240, 0.14); border-radius: 50%; color: #38b8f0; margin-right: 25px; z-index: 1; position: relative; transition: all 0.2s linear; } .service_box .number:before { content: ""; left: 5px; right: 5px; top: 5px; bottom: 5px; border-radius: 50%; background: rgba(56, 184, 240, 0.1); position: absolute; z-index: -1; transition: all 0.2s linear; } .service_box h3 { font-weight: 600; font-size: 22px; line-height: 1.4; font-family: "Poppins", sans-serif; margin-bottom: 15px; } .service_box p { font-size: 16px; font-family: "Poppins", sans-serif; line-height: 30px; color: #677294; margin-bottom: 0; } .service_box:hover .number { border-color: #38b8f0; color: #fff; } .service_box:hover .number::before { background: #38b8f0; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*======================saas_testimonial_area css =================*/ .saas_testimonial_area { background: #f9fafc; } .nav_container { position: relative; } .nav_container .owl-prev, .nav_container .owl-next { width: 55px; height: 55px; border-radius: 50%; font-size: 22px; line-height: 55px; color: #33475c; text-align: center; border: 0; position: absolute; box-shadow: 0px 5px 38px 0px rgba(12, 0, 46, 0.09); background: #fff; overflow: hidden; cursor: pointer; top: 50%; transform: translateY(-50%); z-index: 0; } .nav_container .owl-prev:before, .nav_container .owl-next:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -moz-linear-gradient(37deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -webkit-linear-gradient(37deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -ms-linear-gradient(37deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); z-index: -1; opacity: 0; transition: opacity 0.3s linear; } .nav_container .owl-prev:hover, .nav_container .owl-next:hover { color: #fff; } .nav_container .owl-prev:hover:before, .nav_container .owl-next:hover:before { opacity: 1; } .nav_container .owl-next { right: 0; } .saas_testimonial_slider { max-width: 500px; margin: 0 auto 70px; text-align: center; position: relative; } .saas_testimonial_slider:before { content: ""; width: 100%; height: 100%; top: 50px; left: 0px; right: 0px; position: absolute; background-image: -moz-linear-gradient(40deg, #4f40ff 0%, #25ddf5 100%); background-image: -webkit-linear-gradient(40deg, #4f40ff 0%, #25ddf5 100%); background-image: -ms-linear-gradient(40deg, #4f40ff 0%, #25ddf5 100%); box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.11); clip-path: polygon(0px 100%, 0px 0px, 511% 0px, 0px 100%); } .saas_testimonial_slider:after { content: ""; height: 100%; top: 65px; left: 15px; right: 15px; position: absolute; background-image: -moz-linear-gradient(-19deg, #25ddf5 1%, #434de7 100%); background-image: -webkit-linear-gradient(-19deg, #25ddf5 1%, #434de7 100%); background-image: -ms-linear-gradient(-19deg, #25ddf5 1%, #434de7 100%); box-shadow: 0px 0px 38px 0px rgba(40, 203, 246, 0.31); clip-path: polygon(0px 100%, 0px 0px, 511% 0px, 0px 100%); z-index: -1; } .testimonial_item { color: #fff; font-family: "Source Sans Pro", sans-serif; padding: 0px 45px 10px; } .testimonial_item .author_img { width: 100px; height: 100px; border: 5px solid #23ddf5; border-radius: 50%; overflow: hidden; margin: 0 auto; position: relative; top: 3px; } .testimonial_item .author_img img { width: auto; max-width: 100%; } .testimonial_item .author_description { padding-top: 30px; } .testimonial_item .author_description h4 { font-size: 24px; line-height: 28px; margin-bottom: 0px; } .testimonial_item .author_description h6 { font-size: 14px; margin-bottom: 0px; font-weight: 400; } .testimonial_item p { font-size: 20px; line-height: 30px; font-style: italic; font-weight: 300; margin-bottom: 0; padding-top: 20px; } /*======================saas_testimonial_area css =================*/ /*================== saas_fun_fact_area css================*/ .saas_fun_fact_area { background-image: -moz-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -webkit-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -ms-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); padding: 180px 0px; position: relative; z-index: 1; } .saas_fun_fact_area:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url("/img/saas/shape_bg.webp") no-repeat scroll center 0/cover; position: absolute; z-index: -1; } .saas_fan_fact_item { text-align: center; font-family: "Source Sans Pro", sans-serif; color: #fff; } .saas_fan_fact_item i { font-size: 50px; line-height: 55px; } .saas_fan_fact_item h6 { font-size: 25px; font-weight: 400; margin-top: 20px; } .saas_fan_fact_item .counter { font-size: 48px; font-weight: 700; line-height: 60px; } /*================== saas_fun_fact_area css================*/ /*================== saas_call_action_area css================*/ .saas_call_action_area { color: #fff; background-image: -moz-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -webkit-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); background-image: -ms-linear-gradient(170deg, #4f40ff 0%, #25ddf5 65%, #11bdff 100%); padding: 140px 0px; position: relative; z-index: 1; font-family: "Source Sans Pro", sans-serif; } .saas_call_action_area:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url("/img/saas/shape_bg.webp") no-repeat scroll center 0/cover; position: absolute; z-index: -1; } .saas_call_action_area h2 { font-size: 46px; line-height: 54px; font-weight: 700; margin-bottom: 15px; } .saas_call_action_area p { font-size: 20px; line-height: 50px; margin-bottom: 35px; } /*================== saas_call_action_area css================*/ .saas_call_action_area_two h2 { font-family: "Poppins", sans-serif; font-weight: 500; } .saas_call_action_area_two p { font-family: "Lato", sans-serif; } /*================== app_testimonial_info css================*/ .app_testimonial_info { padding-top: 135px; padding-bottom: 70px; } .app_testimonial_info .app_section_title h2 { text-transform: capitalize; } .testimonial_author_slider .author_img { width: 200px; height: 200px; border-radius: 50%; border: 8px solid #e0f8fe; overflow: hidden; } .testimonial_author_slider .author_img img { max-width: 100%; } .testimonial_text_slider { padding-bottom: 60px; } .testimonial_text_slider i { font-size: 64px; line-height: 65px; color: #f3f3f3; } .testimonial_text_slider p { font-size: 18px; line-height: 30px; color: #7f8ba0; font-family: "Lato", sans-serif; margin: 25px 0px 30px; } .testimonial_text_slider .name { font-size: 18px; line-height: 30px; color: #252a32; font-family: "Poppins", sans-serif; font-weight: 600; } .testimonial_text_slider .name span { font-size: 15px; color: #99a1af; font-weight: 400; font-style: italic; } .testimonial_text_slider .slick-arrow { top: auto; bottom: 0; left: 0; width: auto; height: auto; transform: translateY(0); } .testimonial_text_slider .slick-arrow:before { font-family: inherit; font-size: 45px; color: #99a1af; opacity: 1; } .testimonial_text_slider .slick-arrow.slick-next { left: 40px; } .testimonial_text_slider .slick-arrow:hover:before { color: #11bdff; } /*================== app_testimonial_info css================*/ /*================== get_info css================*/ .get_info { max-width: 970px; margin: 200px auto -265px; background-image: linear-gradient(to right, #3e7cfc, rgba(63, 119, 252, 0.9), rgba(39, 203, 246, 0.9), #27cbf6); background-size: 150% 100%; text-align: center; padding: 75px 0px 160px; border-radius: 10px; position: relative; z-index: 1; } .get_info .shape { position: absolute; bottom: 0; z-index: -1; } .get_info .shape.bottom_one { background: url("/img/app/dot.webp") no-repeat scroll center bottom; left: 28%; width: 374px; height: 100px; } .get_info .shape.bottom_two { background: url("/img/app/shape.webp") no-repeat scroll center bottom; bottom: -22px; left: 38%; width: 374px; height: 100px; } .get_info .shape.bottom_four { background: url("/img/app/box1.webp") no-repeat scroll center bottom; width: 100%; height: 100%; left: 0; } .get_info .shape.img_three { top: 40px; left: 70px; } .get_info .shape.img_four { top: 64px; left: 35px; box-shadow: 0px 7px 133px 0px rgba(0, 0, 0, 0.89); opacity: 0.1; border-radius: 5px; } .get_info h2 { font: 600 28px/32px "Poppins", sans-serif; color: #fff; margin-bottom: 0px; } .get_info p { font: 400 18px/30px "Lato", sans-serif; color: #fff; } .get_info .subscribe_form { max-width: 540px; margin: 34px auto 0px; } .get_info .subscribe_form .form-control { background: transparent; height: 60px; border-radius: 5px; font: 400 14px/36px "Lato", sans-serif; letter-spacing: 0.14px; color: #fff; padding-left: 30px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; box-shadow: none; } .get_info .subscribe_form .form-control.placeholder { color: #fff; } .get_info .subscribe_form .form-control:-moz-placeholder { color: #fff; } .get_info .subscribe_form .form-control::-moz-placeholder { color: #fff; } .get_info .subscribe_form .form-control::-webkit-input-placeholder { color: #fff; } .get_info .subscribe_form .form-control:focus { outline: none; } .get_info .subscribe_form .submit_btn { font-size: 18px; font-weight: 700; color: #11bdff; letter-spacing: 0.1px; font-family: "Lato", sans-serif; height: 100%; background: #fff; padding: 5px 38px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } /*================== get_info css================*/ /*================== intrigation_area css================*/ .intrigation_area { background: #F7FAFD; } .p_title { font-size: 42px; line-height: 52px; color: #19182e; font-family: "Product"; } .p_color { font-size: 18px; line-height: 30px; color: #6F8BA4; font-family: "Source Sans Pro", sans-serif; font-weight: 400; } .intregation_content h2 { margin-bottom: 30px; } .intregation_content p { line-height: 32px; } .intregation_content .intregation_btn { border: 1px solid #f31f74; padding: 12px 18px; font-size: 16px; font-weight: 400; color: #f31f74; display: inline-block; margin-top: 25px; transition: all 0.3s linear; font-family: "Source Sans Pro", sans-serif; } .intregation_content .intregation_btn:hover { background: #f31f74; color: #fff; } .integration_info { text-align: right; position: relative; margin: 0 auto; width: 100%; height: 430px; } @media (min-width: 1300px) { .integration_info { width: 680px; } } .integration_info .integrations_item { background-color: #fff; border-radius: 8px; margin-bottom: 0; position: absolute; box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.1); transition: all 0.3s linear; display: flex; align-items: center; justify-content: center; } .integration_info .integrations_item:nth-child(1) { width: 77px; height: 78px; left: 80px; } .integration_info .integrations_item:nth-child(2) { width: 127px; height: 128px; left: 160px; top: 130px; } .integration_info .integrations_item:nth-child(3) { width: 98px; height: 98px; bottom: 65px; left: 0; } .integration_info .integrations_item:nth-child(4) { width: 98px; height: 98px; left: 405px; top: 230px; } .integration_info .integrations_item:nth-child(5) { width: 129px; height: 129px; left: 345px; top: 40px; } .integration_info .integrations_item:nth-child(6) { width: 90px; height: 92px; bottom: 0; left: 35%; } .integration_info .integrations_item:nth-child(7) { width: 129px; height: 129px; bottom: 18px; right: -40px; } .integration_info .integrations_item:nth-child(8) { width: 88px; height: 88px; right: 10px; top: 80px; } .integration_info .integrations_item:hover, .integration_info .integrations_item.current { transform: scale(1.22); } /*================== intrigation_area css================*/ /*================== subscribe_area css================*/ .subscribe_area { position: relative; z-index: 1; } .subscribe_content { display: flex; align-items: center; background: #372668; padding: 20px 80px; border-radius: 20px; margin-bottom: -80px; } .subscribe_content .content { padding-right: 100px; } .subscribe_content .content .p_title { margin-bottom: 20px; color: #fff; } .subscribe_content .content .p_color { margin-bottom: 0px; color: #fff; } .subscribe_content .get_btn { font-size: 18px; font-family: "Source Sans Pro", sans-serif; font-weight: 600; color: #19182e; background: #fff; box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.1); padding: 15px 60px; display: inline-block; white-space: nowrap; transition: all 0.3s linear; } .subscribe_content .get_btn:hover { background: #f31f74; color: #fff; } .subscribe_area_two { padding-top: 100px; } .subscribe_area_two .get_info { box-shadow: 0px 7px 30px 0px rgba(12, 0, 46, 0.09); background-image: -moz-linear-gradient(360deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(360deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(360deg, #7121ff 0%, #21d4fd 100%); padding: 90px 150px 110px; position: relative; z-index: 1; max-width: 100%; margin: 0 auto -150px; color: #fff; overflow: hidden; } .subscribe_area_two .get_info p { padding-top: 15px; font-family: "Source Sans Pro", sans-serif; } .subscribe_area_two .get_info .subscribe_form { margin-top: 50px; } .subscribe_area_three .get_btn { border-radius: 4px; padding: 15px 45px; } .subscribe_area_three .get_btn:hover { background: #21d4fd; } /*================== subscribe_area css================*/ /*================== testimonial_area_three css================*/ .testimonial_area_three { padding-top: 200px; background: #fafbfd; position: relative; z-index: 0; } .testimonial_area_three:before { content: ""; position: absolute; z-index: -1; width: 100%; height: 94%; bottom: 180px; transform: skewY(-7deg); background: #fafbfd; } .testimonial_area_three .arrow { font-size: 24px; padding-top: 25px; } .testimonial_area_three .arrow .right { padding-left: 10px; } .testimonial_area_three .arrow .left, .testimonial_area_three .arrow .right { transition: color 0.2s linear; cursor: pointer; } .testimonial_area_three .arrow .left:hover, .testimonial_area_three .arrow .right:hover { color: #21d4fd; } .testimonial_img { position: relative; max-width: 400px; } .testimonial_img:before { content: ""; background: url("/img/payment/testimonial_bg.webp") no-repeat scroll center 0; position: absolute; left: -63px; top: 0; width: 143%; height: 100%; } .testimonial_content { position: relative; margin-top: 70px; } .testimonial_content .item { padding-top: 50px; position: relative; } .testimonial_content .icon { font-size: 300px; color: #ebeff9; position: absolute; transform: rotate(180deg); font-family: "Poppins", sans-serif; height: 107px; left: -5px; display: inline-block; } .testimonial_content p { font-size: 20px; line-height: 34px; margin-bottom: 45px; font-family: "Poppins", sans-serif; color: #8d949e; padding-top: 45px; } .testimonial_content .author { font-size: 20px; font-family: "Poppins", sans-serif; color: #252a32; font-weight: 600; margin-bottom: 5px; } .testimonial_content .author_description { font-size: 15px; font-weight: 300; color: #6781a9; font-family: "Poppins", sans-serif; } /*================== testimonial_area_three css================*/ /*================== payment_recived_area css================*/ .payment_recived_area { padding: 80px 0px 0px; margin-bottom: -70px; position: relative; z-index: 1; } .payment_recived_area .payment_item { background: #fff; box-shadow: 0px 7px 30px 0px rgba(12, 0, 46, 0.09); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 43px 40px 40px 130px; position: relative; transition: all 0.3s linear; cursor: pointer; } .payment_recived_area .payment_item h3 { font-size: 22px; line-height: 28px; font-weight: 600; font-family: "Poppins", sans-serif; color: #252a32; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 15px; transition: all 0.3s linear; } .payment_recived_area .payment_item i { position: absolute; left: 0; opacity: 0.15; color: #5e2ced; transition: opacity 0.3s linear; } .payment_recived_area .payment_item i:before { font-size: 100px; } .payment_recived_area .payment_item p { margin-bottom: 0px; font-size: 16px; line-height: 30px; color: #8d949e; font-family: "Poppins", sans-serif; font-weight: 400; } .payment_recived_area .payment_item:hover { transform: translateY(-10px); } .payment_recived_area .payment_item:hover h3 { color: #5e2ced; } .payment_recived_area .payment_item:hover i { opacity: 1; } .payment_recived_area.blue .payment_item i { color: #11bdff; } .payment_recived_area.blue .payment_item:hover h3 { color: #11bdff; } /*================== payment_recived_area css================*/ /*================== video_area css================*/ .video_area .video_info { max-width: 100%; height: 650px; text-align: center; margin: 0 auto; background-image: -moz-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; border-radius: 8px; } .video_area .video_info:before { content: ""; background: url("../img/video_bg.jpg") no-repeat scroll center 0/cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0.12; border-radius: 8px; } .video_area .video_info h2 { color: #fff; opacity: 0.3; font-size: 40px; } .video_area .video_info .video_icon { position: relative; transform: translate(0); left: 0; top: 0; margin: 50px auto 0px; } .video_area .video_info .video_icon .shine { border-radius: 50%; z-index: -1 !important; } /*================== video_area css================*/ /*================== fun_fact_area css================*/ .fun_fact_area .work_progress .work-progressbar { text-align: center; padding: 0px 25px; } .fun_fact_area .work_progress .work-progressbar .circle { width: 150px; position: relative; margin: 0 auto; } .fun_fact_area .work_progress .work-progressbar .circle canvas { position: relative; } .fun_fact_area .work_progress .work-progressbar .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-family: "Poppins", sans-serif; font-weight: 600; } .fun_fact_area .work_progress .work-progressbar h4 { font-size: 24px; font-weight: 600; font-family: "Product"; text-transform: capitalize; margin-top: 25px; margin-bottom: 8px; } .fun_fact_area .work_progress .work-progressbar p { line-height: 26px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; color: #6F8BA4; } /*================== fun_fact_area css================*/ .testimonial_area_four { padding: 120px 0px 0px; } .testimonial_slider_two .testimonial_controler .dot { width: 600px; height: 600px; border: 1px solid #ededed; border-radius: 50%; left: -83px; position: absolute; } .testimonial_slider_two .testimonial_controler .dot.one, .testimonial_slider_two .testimonial_controler .dot.two, .testimonial_slider_two .testimonial_controler .dot.three { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .testimonial_slider_two .testimonial_controler .dot.one { width: 450px; height: 450px; } .testimonial_slider_two .testimonial_controler .dot.two { width: 300px; height: 300px; } .testimonial_slider_two .carousel-indicators { position: relative; top: 0; right: 0px; border-radius: 50%; width: 600px; height: 600px; display: block; margin: 0 auto; left: -100px; } .testimonial_slider_two .carousel-indicators li { width: 100px; height: 100px; border-radius: 50%; text-indent: 0; position: absolute; overflow: hidden; border: 1px solid transparent; transition: all 0.3s linear; z-index: 1; } .testimonial_slider_two .carousel-indicators li:before { display: none; } .testimonial_slider_two .carousel-indicators li img { max-width: 100%; position: absolute; width: 100px; height: 100px; border-radius: 50%; z-index: 2; } .testimonial_slider_two .carousel-indicators li.active { border-color: #21d4fd; transform: scale(1.1); } .testimonial_slider_two .carousel-indicators li.testimonial_1 { left: 80px; } .testimonial_slider_two .carousel-indicators li.testimonial_3 { right: 50px; } .testimonial_slider_two .carousel-indicators li.testimonial_2 { bottom: 82px; left: 4px; } .testimonial_slider_two .carousel-indicators li.testimonial_4 { left: 50%; transform: translate(-50%, -50%); top: 50%; } .testimonial_slider_two .carousel-indicators li.testimonial_5 { right: 20px; bottom: 65px; } .testimonial_slider_two .carousel-inner .carousel-item .icon { font-size: 250px; line-height: 100px; font-family: "Poppins", sans-serif; color: #faf7ff; display: inline-block; vertical-align: top; position: relative; top: -95px; } .testimonial_slider_two .carousel-inner .carousel-item p { font-size: 18px; font-family: "Source Sans Pro", sans-serif; color: #6F8BA4; line-height: 32px; margin-bottom: 25px; } .testimonial_slider_two .carousel-inner .carousel-item .author { font-size: 24px; color: #19182e; font-weight: 600; font-family: "Product"; } .testimonial_slider_two .carousel-inner .carousel-item .author_description { font-size: 16px; font-family: "Source Sans Pro", sans-serif; color: #21d4fd; font-weight: 300; padding-top: 3px; } .testimonial_slider_two .carousel-control-prev, .testimonial_slider_two .carousel-control-next { position: relative; width: 20px; height: 20px; opacity: 1; color: #19182e; display: inline-block; font-size: 25px; margin-top: 40px; } .testimonial_slider_two .carousel-control-prev:hover, .testimonial_slider_two .carousel-control-next:hover { color: #21d4fd; } .testimonial_slider_two .carousel-control-next { margin-left: 10px; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============ saas_pricing_area ===========*/ .saas_pricing_area { background: #f9fafc; } .s_price_item { box-shadow: 0px 3px 6px 0px rgba(0, 7, 30, 0.05); background: #fff; font-family: "Source Sans Pro", sans-serif; padding-bottom: 60px; position: relative; border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden; transition: all 0.2s linear; cursor: pointer; } .s_price_item:before { content: ""; width: 100%; height: 4px; background-image: -moz-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(170deg, #ffc600 0%, #ff9600 100%); position: absolute; top: 0; left: 0; } .s_price_item .price_head { background: url("/img/saas/price_shape.webp") no-repeat scroll center 0/cover; padding: 50px 0px 85px; } .s_price_item .price_head h6 { font-size: 16px; color: #ff9700; font-weight: 400; margin-bottom: 22px; } .s_price_item .price_head .price { font-size: 48px; font-weight: 700; color: #ff9700; } .s_price_item .price_titel { font-size: 26px; color: #051441; font-weight: 600; margin: 32px 0px 25px; } .s_price_item ul { margin-bottom: 36px; } .s_price_item ul li { font-size: 18px; line-height: 36px; color: #051441; } .s_price_item ul li.text_shadow { color: #9398ab; } .s_price_item:hover { box-shadow: 0px 20px 20px 0px rgba(0, 7, 30, 0.08); } /*============ saas_pricing_area ===========*/ /*============ app_price_area ===========*/ .app_price_area { position: relative; } .app_price_area:before { content: ""; background-color: white; opacity: 0.788; -webkit-box-shadow: 0px 10px 100px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 100px 0px rgba(0, 0, 0, 0.08); position: absolute; left: -896px; top: 392px; width: 1620px; height: 1390px; border-radius: 100px; -webkit-transform: rotate(52deg); -ms-transform: rotate(52deg); transform: rotate(53deg); z-index: -1; } .price_item { text-align: center; border: 1px solid #f1f1f8; border-radius: 5px; background: #fff; padding: 60px 0px; transition: all 0.3s linear; cursor: pointer; position: relative; } .price_item .tag { position: absolute; right: 0; background-image: linear-gradient(to right, #3e7cfc, rgba(63, 119, 252, 0.9), rgba(39, 203, 246, 0.9), #27cbf6); background-size: 150% 100%; transform: rotate(90deg); top: 21px; font: 500 12px/15px "Poppins", sans-serif; color: #fff; text-transform: uppercase; display: block; padding: 10px; letter-spacing: 1px; } .price_item .tag:before { content: ""; border-top: 0px solid transparent; border-bottom: 11px solid transparent; border-right: 17px solid #3fc4f8; border-left: 18px solid #3ecaf7; position: absolute; bottom: 12px; right: -22px; transform: rotate(-90deg); } .price_item .tagBlackFriday { position: absolute; right: 0; background: #000000; /*background-image: linear-gradient(to right, #0, rgba(63, 119, 252, 0.9), rgba(39, 203, 246, 0.9), #2b2b2b);*/ background-size: 150% 100%; top: 11px; font: 500 12px/15px "Poppins", sans-serif; color: #fff; text-transform: uppercase; display: block; padding: 10px; letter-spacing: 1px; } .price_item .tagBlackFriday:before { content: ""; border-top: 0px solid transparent; border-bottom: 11px solid transparent; border-right: 17px solid #000000; border-left: 18px solid #000000; position: absolute; bottom: 12px; right: -22px; transform: rotate(-90deg); } .price_item .tagCyberMonday { position: absolute; right: 0; /* background: #0059F7;*/ background: #00bf02; /*background-image: linear-gradient(to right, #0, rgba(63, 119, 252, 0.9), rgba(39, 203, 246, 0.9), #2b2b2b);*/ background-size: 150% 100%; top: 11px; font: 500 12px/15px "Poppins", sans-serif; color: #fff; text-transform: uppercase; display: block; padding: 10px; letter-spacing: 1px; } .price_item .tagCyberMonday:before { content: ""; border-top: 0px solid transparent; border-bottom: 11px solid transparent; /* border-right: 17px solid #0059F7; border-left: 18px solid #0059F7;*/ border-right: 17px solid #00bf02; border-left: 18px solid #00bf02; position: absolute; bottom: 12px; right: -22px; transform: rotate(-90deg); } .price_item .pr_title { font: 600 28px "Poppins", sans-serif; color: #252a32; text-transform: capitalize; margin-bottom: 16px; } .price_item h2 { font-size: 48px; line-height: 48px; font-weight: 700; color: #3ecef8; margin-bottom: 3px; } .price_item h2 .currency { vertical-align: super; font-size: 20px; line-height: 30px; } .price_item p { font-size: 14px; line-height: 18px; font-weight: 300; color: #99a1af; font-family: "Poppins", sans-serif; margin-bottom: 0px; } .price_item ul { padding: 15px 0px 45px; margin-bottom: 0px; } .price_item ul li { font-size: 16px; color: #7f8ba0; line-height: 36px; font-weight: 400; vertical-align: middle; font-family: "Lato", sans-serif; } .price_item ul li i { color: #05c70e; padding-right: 5px; } .price_item ul li.text_muted i { color: #f73861; } .price_item .app_btn:hover { box-shadow: 0px 13px 21px 0px rgba(39, 203, 246, 0.27); } .price_item:hover { box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); } /*============ app_price_area ===========*/ /*============ pricing_area_two ===========*/ .pricing_area_two { padding: 120px 0px; position: relative; z-index: 1; } .price_tab { border: 0px; margin-left: auto; margin-right: auto; max-width: 390px; background-color: white; -webkit-box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.1); box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.1); position: relative; margin-bottom: 50px; margin-top: 70px; padding: 5px; border-radius: 0px; } .price_tab .nav-item .nav-link { border: 0px; font-size: 18px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; text-transform: capitalize; min-width: 190px; color: #19182e; padding: 12px 30px; position: relative; z-index: 1; border-radius: 0px; background: transparent; } .price_tab .nav-item .nav-link.active { color: #fff; } .price_tab .hover_bg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #f31f74; left: 0; height: calc(100% - 10px); z-index: 0; border-radius: 0px; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .tab-content .price_item { text-align: center; box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.1); background: #fff; padding: 50px; border: 1px solid #fff; border-radius: 0px; } .tab-content .price_item .tag { background: #f31f74; } .tab-content .price_item .tag:before { border-left-color: #f31f74; border-right-color: #f31f74; } .tab-content .price_item i { color: #f31f74; } .tab-content .price_item i:before { font-size: 52px; } .tab-content .price_item ul { padding-top: 25px; } .tab-content .price_item h5 { font-size: 24px; font-family: "Source Sans Pro", sans-serif; margin-top: 25px; color: #19182e; } .tab-content .price_item p { font-weight: 400; font-size: 16px; font-family: "Source Sans Pro", sans-serif; margin-bottom: 20px; } .tab-content .price_item .price_text { font-size: 28px; line-height: 45px; font-weight: 700; font-family: "Source Sans Pro", sans-serif; color: #19182e; } .tab-content .price_item .price { font-size: 40px; line-height: 45px; font-family: "Source Sans Pro", sans-serif; font-weight: 700; color: #19182e; } .tab-content .price_item .price sub { font-weight: 500; bottom: 0; font-size: 20px; } .tab-content .price_item .price_btn { border-radius: 0px; border: 1px solid #f31f74; background: #fff; color: #f31f74; } .tab-content .price_item .price_btn:before { display: none; } .tab-content .price_item .price_btn:hover { background: #f31f74; color: #fff; box-shadow: 0px 10px 20px 0px rgba(243, 31, 116, 0.13); } .tab-content .price_item:hover { border-color: rgba(243, 31, 116, 0.13); box-shadow: 0px 30px 60px 0px rgba(0, 11, 40, 0.14); } /*============ pricing_area_two ===========*/ /*============ pricing_area_three ===========*/ .pricing_area_three { background: #fafbfd; } .pricing_area_three .price_tab { border-radius: 4px; } .pricing_area_three .price_tab .nav-item .nav-link { border-radius: 4px; } .pricing_area_three .price_tab .hover_bg { border-radius: 4px; background: #21d4fd; } .pricing_area_three .tab-content .price_item .tag { background: #21d4fd; } .pricing_area_three .tab-content .price_item .tag:before { border-left-color: #21d4fd; border-right-color: #21d4fd; } .pricing_area_three .tab-content .price_item .price_btn { border-color: #21d4fd; color: #21d4fd; border-radius: 4px; } .pricing_area_three .tab-content .price_item .price_btn:hover { background: #21d4fd; color: #fff; box-shadow: 0px 10px 20px 0px rgba(33, 212, 253, 0.13); transform: translateY(-5px); } .pricing_area_three .tab-content .price_item:hover { border-color: rgba(33, 212, 253, 0.23); } /*============ pricing_area_three ===========*/ /*============ include_plan_area ===========*/ .include_plan_area .pr_section_title { padding-right: 20px; } .include_plan_area .pr_section_title h2 { margin-bottom: 16px; } .include_plan_area .pr_section_title h2 span { font-weight: 400; font-size: 35px; } .include_plan_area .pr_section_title h5 { font-size: 22px; line-height: 28px; font-weight: 400; font-family: "Product"; color: #19182e; opacity: 0.8; margin-bottom: 20px; } .service_plan_info { margin-bottom: -55px; } .service_plan_info .service_plan_item { padding-right: 0px; padding-left: 35px; margin-bottom: 55px; } .service_plan_info .service_plan_item i { font-size: 38px; color: #21d4fd; margin-bottom: 25px; display: inline-block; } .service_plan_info .service_plan_item h3 { font-size: 24px; font-family: "Product"; margin-bottom: 16px; } .service_plan_info .service_plan_item p { font-size: 16px; color: #6f8ba4; font-family: "Source Sans Pro", sans-serif; font-weight: 400; margin-bottom: 0; } /*============ include_plan_area ===========*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*================== breadcrumb_area css ==============*/ .breadcrumb_area { background-image: -moz-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -webkit-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); background-image: -ms-linear-gradient(-86deg, #7121ff 0%, #21d4fd 100%); text-align: center; color: #fff; padding: 110px 0px 55px; position: relative; z-index: 1; } .breadcrumb_area:before { content: ""; background: url(/img/new_shap.webp) no-repeat scroll right bottom; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; opacity: 0.4; z-index: -1; } .breadcrumb_area:after { content: ""; background: url(/img/new_shap_two.webp) no-repeat scroll right bottom; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; z-index: -1; } .breadcrumb_area p { font-family: "Poppins", sans-serif; font-weight: 400; padding-top: 15px; margin-bottom: 0px; } .page-title { font: 900 38px/45px "Product"; margin-bottom: 0px; text-transform: capitalize; } .breadcrumb { background: transparent; margin-bottom: 0px; justify-content: center; padding-left: 0; padding-right: 0; } .breadcrumb li { font-size: 18px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; position: relative; } .breadcrumb li a { color: #fff; } .breadcrumb li.active:after { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; left: 0; } .breadcrumb li + li { margin-left: 26px; } .breadcrumb li + li:before { content: "-"; display: inline-block; color: #fff; font-weight: 500; position: absolute; left: -16px; } /*================== breadcrumb_area css ==============*/ /*================== banner_area css ==============*/ .banner_area { background-image: -moz-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); background-image: -webkit-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); background-image: -ms-linear-gradient(58deg, #632ffd 0%, #5286fd 64%, #40dcfd 100%); text-align: center; color: #fff; padding: 210px 0px 175px; position: relative; z-index: 4; min-height: 500px; } .banner_area p { font-size: 18px; margin-bottom: 0; padding-top: 8px; font-family: "Source Sans Pro", sans-serif; } .elements { position: absolute; left: 0px; top: 0px; width: 100%; z-index: -1; } .elements li:first-child { position: absolute; left: 14%; top: 20px; transform: translateX(-50%); animation: 28s cloud infinite linear; } .elements li:nth-child(2) { position: absolute; left: 0%; top: 42px; transform: translateX(-70%); animation: 28s animateCloud infinite linear; opacity: 0; } .elements li:nth-child(3) { position: absolute; left: 0%; top: 100px; transform: translateX(-70%); animation: 28s 4s animateCloud infinite linear; opacity: 0; } .elements li:nth-child(4) { position: absolute; left: 0%; top: 120px; transform: translateX(-70%); animation: animateCloud 35s 5s linear infinite; opacity: 0; } .elements li:nth-child(5) { position: absolute; left: 60%; top: 150px; transform: translateX(-50%); animation: rotateX 5s 0.7s linear infinite; opacity: 0; } .elements li:nth-child(6) { position: absolute; left: 60%; top: 150px; transform: translateX(-50%); animation: rotateX 5s 3s linear infinite; opacity: 0; } .elements li:nth-child(7) { position: absolute; left: 15%; top: 120px; transform: translateX(-50%); animation: rotateX 5s 3s linear infinite; opacity: 0; } .elements li:nth-child(8) { position: absolute; right: 10%; top: 120px; transform: translateX(-50%); animation: jurk 5s 3s linear infinite alternate; } .banner_teckture { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; } .car { position: absolute; bottom: 40px; z-index: 10; opacity: 0.2; -moz-animation: myfirst 12s linear infinite; -webkit-animation: myfirst 12s linear infinite; } .car.car_two { bottom: 22px; -moz-animation: myfirst 18s linear infinite; -webkit-animation: myfirst 18s linear infinite; } @-moz-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @-webkit-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } .tyre { width: 20px; height: 20px; border-radius: 50%; background: #a471de; position: absolute; z-index: 2; left: 16px; top: 33px; -moz-animation: tyre-rotate 1s infinite linear; -webkit-animation: tyre-rotate 1s infinite linear; } @-moz-keyframes tyre-rotate { from { -moz-transform: rotate(-360deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes tyre-rotate { from { -webkit-transform: rotate(-360deg); } to { -webkit-transform: rotate(0deg); } } .tyre:before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #f8b0b5; opacity: 0.9; position: absolute; top: 2.5px; left: 2.5px; } .gap { background: #3f3f40; width: 2px; height: 3px; position: absolute; left: 9px; top: 4px; -webkit-box-shadow: 0 9px 0 #3f3f40; box-shadow: 0 8px 0 #3f3f40; } .gap:before { content: ""; display: block; width: 2px; height: 3px; position: absolute; background: #3f3f40; -webkit-box-shadow: 0 12px 0 #3f3f40; box-shadow: 0 9px 0 #3f3f40; -webkit-transform: rotate(-90deg); -webkit-transform-origin: 0 7px; -moz-transform: rotate(-90deg); -moz-transform-origin: 0 7px; z-index: 3; left: 2px; } .tyre.front { left: 58px; } .car-shadow { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); bottom: -15px; box-shadow: -5px 4px 55px 3px #000000; left: -7px; position: absolute; width: 136px; } /*noise css*/ @keyframes cloud { 0% { left: 14%; top: 20px; opacity: 0; } 20% { left: 44%; top: 100px; opacity: 1; } 40% { left: 65%; top: 0px; opacity: 1; } 60% { left: 80%; top: 60px; opacity: 1; } 80% { left: 90%; top: 60px; opacity: 0.5; } 100% { left: 100%; top: 20px; opacity: 0; } } @keyframes animateCloud { 0% { left: -20%; opacity: 1; } 100% { left: 100%; opacity: 1; } } @keyframes rotateX { 0% { top: 150px; opacity: 1; } 100% { top: -50px; opacity: 0; } } @keyframes jurk { 0% { transform: translate3d(-10px, -10px, 0); opacity: 1; } 50% { transform: translate3d(-20px, 20px, 0); opacity: 1; } 100% { transform: translate3d(30px, 0px, 0); opacity: 1; } } @keyframes jurk2 { 0% { transform: translate3d(-1px, -2px, 0); opacity: 1; } 50% { transform: translate3d(2px, 5px, 2px); opacity: 1; } 100% { transform: translate3d(3px, 0px, 0px); opacity: 1; } } @keyframes jump { 0% { top: 0px; } 25% { top: -20px; } 50% { top: 0px; } 75% { top: 0px; } } /*================== breadcrumb_area css ==============*/ /*============ breadcrumb_area_three css ===========*/ .breadcrumb_area_three { position: relative; z-index: 1; height: 415px; } .breadcrumb_area_three:before { content: ""; width: 100%; height: 110%; background: url(/img/d_shap.webp) no-repeat scroll center 0; position: absolute; background-size: cover; z-index: 0; top: 0; left: 0; } .breadcrumb_shap { position: absolute; z-index: -1; width: 106%; top: -692px; height: 1113px; left: -20px; } .breadcrumb_shap_two { position: absolute; z-index: -2; width: 100%; height: 1036px; top: -620px; right: -50px; } /*============ breadcrumb_area_three css ===========*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*========== team_area css ===========*/ .team_area { padding-top: 120px; } .team_area .row { margin-bottom: -30px; } .team_item { align-items: center; box-shadow: 2px 5px 20px 2px rgba(222, 222, 222, 0.59); background: #fff; padding: 40px; border-radius: 6px; margin-bottom: 30px; } .team_item .team_img { width: 130px; height: 160px; border-radius: 6px; overflow: hidden; margin-right: 30px; } .team_item .team_img img { max-width: 100%; } .team_item .media-body .team-member-header { display: flex; justify-content: flex-start; border-bottom: 1px solid #e1e6ee; align-items: center; padding-bottom: 12px; } .team_item .media-body .team-member-header .team-member-heading { font-size: 22px; font-weight: 700; font-family: "Product"; margin-bottom: 0; color: #19182e; padding-right: 5px; } .team_item .media-body .team-member-header ul { list-style: none; margin-bottom: 0; padding-left: 0; } .team_item .media-body .team-member-header ul li { display: inline-block; margin-left: 8px; } .team_item .media-body .team-member-header ul li a { font-size: 18px; } .team_item .media-body .team-member-header ul li:nth-child(1) a { color: #2aa3f0; } .team_item .media-body .team-member-header ul li:nth-child(2) a { color: #3c5a96; } .team_item .media-body .team-member-header .team-member-position { flex: 1; text-align: right; color: #596273; font-size: 14px; font-weight: 600; font-family: "Source Sans Pro", sans-serif; } .team_item .media-body p { font-size: 16px; font-family: "Source Sans Pro", sans-serif; color: #6F8BA4; padding-top: 12px; margin-bottom: 0; } /*========== team_area css ===========*/ /*========== prototype_partner_logo css ===========*/ .prototype_partner_logo { padding-bottom: 100px; } .prototype_partner_inner { height: 770px; position: relative; max-width: 770px; margin: 0 auto; z-index: 1; display: flex; align-items: center; justify-content: center; } .prototype_partner_inner h3 { font-size: 24px; padding-top: 20px; color: #263b5e; margin-bottom: 8px; } .prototype_partner_inner p { font-size: 18px; font-family: "Poppins", sans-serif; color: #939598; margin-bottom: 35px; } .prototype_partner_inner .p_logo { position: absolute; border-radius: 50%; -webkit-box-shadow: 0px 2px 4px 0px rgba(2, 45, 79, 0.1); box-shadow: 0px 2px 4px 0px rgba(2, 45, 79, 0.1); background: #fff; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; transition: all 0.3s linear; } .prototype_partner_inner .p_logo img { max-width: 100%; border-radius: 50%; } .prototype_partner_inner .p_logo.p_logo_one { left: 76px; top: 60%; } .prototype_partner_inner .p_logo.p_logo_two { right: 142px; top: 118px; } .prototype_partner_inner .p_logo.p_logo_three { left: -15px; top: 173px; } .prototype_partner_inner .p_logo.p_logo_four { right: -48px; top: 348px; } .prototype_partner_inner .p_logo.p_logo_five { bottom: 160px; left: 56%; } .prototype_partner_inner .p_logo.p_logo_six { top: 55px; left: 32%; } .prototype_partner_inner .p_logo.p_logo_seven { bottom: -51px; left: 38%; } .prototype_partner_inner .p_logo.p_logo_eight { bottom: 55px; right: 73px; } .prototype_partner_inner .p_logo.current { transform: scale(1.2); } .p_circle { position: absolute; left: 0; top: 0; right: 0; border: 1.9px dashed #f2f4f8; border-radius: 50%; z-index: -1; } .p_circle.c_one { height: 100%; } .p_circle.c_two, .p_circle.c_three { top: 90px; left: 90px; bottom: 90px; right: 90px; } /*========== prototype_partner_logo css ===========*/ /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*================ saas_blog_area css =================*/ .saas_blog_area { background: #f9fafc; } .saas_blog_item { box-shadow: 0px 3px 6px 0px rgba(0, 7, 30, 0.05); background: #fff; position: relative; } .saas_blog_item .date { position: absolute; top: 0; left: 30px; width: 36px; background-image: -moz-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); font-size: 16px; line-height: 18px; font-weight: 700; color: #fff; text-align: center; padding: 12px 0px 8px; } .saas_blog_item .date span { font-weight: 400; } .saas_blog_item .date:before { content: ""; border-top: 0px solid transparent; border-bottom: 12px solid transparent; border-right: 18px solid #ffb200; border-left: 18px solid #ffc705; position: absolute; bottom: -12px; left: 0; } .saas_blog_item .content { padding: 30px; } .saas_blog_item h2 { font-size: 20px; line-height: 28px; font-weight: 700; color: #051441; margin-bottom: 18px; transition: color 0.2s linear; } .saas_blog_item h2:hover { color: #ff9700; } .saas_blog_item p { font-size: 17px; font-weight: 400; line-height: 26px; color: #9398ab; letter-spacing: 0.2px; margin-bottom: 28px; } .saas_blog_item .read_btn { font-size: 16px; color: #051441; font-weight: 600; font-family: "Source Sans Pro", sans-serif; display: inline-block; position: relative; transition: color 0.4s linear; } .saas_blog_item .read_btn:before { content: ""; width: 0; position: absolute; left: 0; height: 1px; bottom: 0; background: #ff9700; transition: width 0.3s linear; } .saas_blog_item .read_btn:hover { color: #ff9700; } .saas_blog_item .read_btn:hover:before { width: 100%; } /*================ saas_blog_area css =================*/ /*================ saas_blog_area_two css =================*/ .saas_blog_area_two { background: #f9fafc; } .saas_blog_area_two .saas_blog_item h2 { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600; line-height: 32px; color: #282b31; margin-bottom: 14px; } .saas_blog_area_two .saas_blog_item p { color: #676b75; font-family: "Lato", sans-serif; font-weight: 300; font-size: 16px; line-height: 26px; margin-bottom: 20px; } .saas_blog_area_two .saas_blog_item .read_btn { font-family: "Poppins", sans-serif; font-weight: 500; } /*================ saas_blog_area_two css =================*/ /*================ blog_area css =================*/ .blog_item { background: #f7f8fb; } .blog_item .blog_img { display: inline-block; position: relative; } .blog_item .blog_content { padding: 45px 40px; } .blog_item .blog_content .post_info { display: flex; align-items: center; padding-bottom: 20px; } .blog_item .blog_content .post_info .post_img { margin-right: 15px; } .blog_item .blog_content .post_info .post_img img { border-radius: 50%; } .blog_item .blog_content .post_info .entry_post_info { font-size: 15px; font-family: "Source Sans Pro", sans-serif; font-weight: 600; } .blog_item .blog_content .post_info .entry_post_info a { font-weight: 500; color: #6F8BA4; position: relative; padding: 0px 5px; } .blog_item .blog_content .post_info .entry_post_info a:before { content: "/"; position: absolute; top: 50%; right: -4px; display: block; transform: translateY(-50%); } .blog_item .blog_content .post_info .entry_post_info a:last-child { padding-right: 0px; } .blog_item .blog_content .post_info .entry_post_info a:last-child:before { display: none; } .blog_item .blog_content .post_info .entry_post_info a:first-child { padding-left: 0; } .blog_item .blog_content h2 { font: 700 28px/1.15em "Product"; color: #19182e; margin-bottom: 22px; transition: color 0.2s linear; } .blog_item .blog_content h2:hover { color: #21d4fd; } .blog_item .blog_content p { font-size: 18px; line-height: 30px; font-family: "Source Sans Pro", sans-serif; color: #6F8BA4; margin-bottom: 18px; } .blog_item .blog_content .blog_btn { font-weight: 600; font-family: "Source Sans Pro", sans-serif; color: #19182e; font-size: 16px; } .blog_item .blog_content .blog_btn:after { content: "$"; position: relative; right: 0; font-family: eleganticons; vertical-align: middle; margin-left: 4px; transition: margin 0.2s linear; } .blog_item .blog_content .blog_btn:hover { color: #21d4fd; } .blog_item .blog_content .blog_btn:hover:after { margin-left: 8px; } .blog_item .quote_post { position: relative; z-index: 1; } .blog_item .quote_post:after { content: ""; font: normal normal normal 90px/2 FontAwesome; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: #eceffd; z-index: -1; opacity: 0.8; } .blog_item .quote_post i { font-size: 40px; color: rgba(33, 212, 253, 0.33); margin-bottom: 15px; } .blog_item .quote_post h2 { font-size: 22px; margin-bottom: 18px; } .blog_item .quote_post .quote-author { text-transform: uppercase; font-family: "Source Sans Pro", sans-serif; font-weight: 600; } .blog_item:not(:last-child) { margin-bottom: 60px; } .badge { position: absolute; right: 20px; top: 20px; background: #fc6e00; border-right: 5px; padding: 5px 10px 7px; color: #fff; font-size: 14px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; text-align: center; } .badge.two { background: #fc3762; } .badge.three { background: #8e2af0; } .badge.four { background: #557ffd; } .badge:hover { background: #fff; color: #19182e; } .blog_grid { border-radius: 6px; overflow: hidden; transition: all 0.3s linear; margin-bottom: 50px; } .blog_grid .blog_content { padding: 35px; } .blog_grid .blog_content .post_info { padding-bottom: 4px; } .blog_grid .blog_content h2 { font-size: 22px; margin-bottom: 15px; } .blog_grid:hover { box-shadow: 0px 4px 10px 0px rgba(12, 0, 46, 0.06); } .blog_sidebar .widget .widget_title { font: 700 24px/30px "Product"; color: #19182e; position: relative; margin-bottom: 30px; } .blog_sidebar .widget .widget_title:after { content: ""; width: 40px; height: 1.6px; margin-left: 10px; background: #21d4fd; display: inline-block; } .blog_sidebar .widget.about_widget img { margin-bottom: 30px; } .blog_sidebar .widget.about_widget h3 { font-size: 20px; font-family: "Product"; font-weight: 700; margin-bottom: 6px; color: #19182e; } .blog_sidebar .widget.about_widget p { line-height: 30px; font-family: "Source Sans Pro", sans-serif; font-weight: 400; color: #6F8BA4; margin-bottom: 0; font-size: 16px; } .blog_sidebar .widget.categorie_widget ul { margin-bottom: 0; } .blog_sidebar .widget.categorie_widget ul li { padding-top: 8px; border-bottom: 1px solid #ededed; padding-bottom: 8px; } .blog_sidebar .widget.categorie_widget ul li a { font-size: 16px; font-weight: 400; font-family: "Source Sans Pro", sans-serif; color: #6F8BA4; transition: color 0.2s linear; display: flex; justify-content: space-between; } .blog_sidebar .widget.categorie_widget ul li a:hover { color: #21d4fd; } .blog_sidebar .widget.categorie_widget ul li:last-child { border: 0px; padding-bottom: 0; } .blog_sidebar .widget.categorie_widget ul li:first-child { padding-top: 0; } .blog_sidebar .widget.recent_post_widget .post_item { align-items: center; } .blog_sidebar .widget.recent_post_widget .post_item img { margin-right: 20px; } .blog_sidebar .widget.recent_post_widget .post_item .media-body h3 { font-size: 20px; line-height: 26px; font-family: "Product"; font-weight: 700; color: #19182e; margin-bottom: 4px; transition: color 0.2s linear; } .blog_sidebar .widget.recent_post_widget .post_item .media-body h3:hover { color: #21d4fd; } .blog_sidebar .widget.recent_post_widget .post_item .media-body .entry_post_info { font-family: "Source Sans Pro", sans-serif; font-weight: 400; font-size: 14px; color: #6F8BA4; } .blog_sidebar .widget.recent_post_widget .post_item:not(:last-child) { margin-bottom: 20px; } .blog_sidebar .widget.tag_widget { overflow: hidden; } .blog_sidebar .widget.tag_widget ul { overflow: hidden; margin: -5px; } .blog_sidebar .widget.tag_widget ul li { font: 400 16px/26px "Source Sans Pro", sans-serif; float: left; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; margin: 5px; } .blog_sidebar .widget.tag_widget ul li a { color: #6F8BA4; border: 1px solid #ededed; display: inline-block; padding: 6px 18px; border-radius: 3px; } .blog_sidebar .widget.tag_widget ul li a:hover { background: #21d4fd; color: #fff; border-color: #21d4fd; } .blog_sidebar .widget.search_widget .search-form { position: relative; } .blog_sidebar .widget.search_widget .search-form .form-control { font: 400 15px "Source Sans Pro", sans-serif; color: #677294; border-radius: 5px; background: #fff; box-shadow: 0px 1px 11px 2px rgba(12, 0, 46, 0.04); border: 0px; padding-left: 30px; height: 55px; z-index: 0; border: 1px solid transparent; transition: all 0.2s linear; } .blog_sidebar .widget.search_widget .search-form .form-control:focus { border-color: #21d4fd; } .blog_sidebar .widget.search_widget .search-form button { border: 0px; background: transparent; padding: 0px; top: 50%; transform: translateY(-50%); position: absolute; right: 20px; } .blog_sidebar .widget + .widget { margin-top: 50px; } .blog-pagination ul { display: flex; justify-content: center; margin-bottom: 0; } .blog-pagination ul li { margin-right: 5px; } .blog-pagination ul li a { width: 40px; height: 40px; border-radius: 5px; text-align: center; font-size: 16px; display: inline-block; line-height: 38px; border: 1px solid #e7e7f6; font-weight: 500; color: #6F8BA4; } .blog-pagination ul li.active a, .blog-pagination ul li:hover a { background: #21d4fd; color: #fff; } .pr_40 { padding-right: 40px; } .pl_40 { padding-left: 40px; } /*================ blog_area css =================*/ /*================ blog_details_area css =================*/ .blog_details_info .blog_item { background: transparent; box-shadow: none; } .blog_details_info .blog_content { padding-left: 0; padding-right: 0; } .blog_details_info blockquote { box-shadow: 0px 3px 23px 0px rgba(12, 0, 46, 0.08); padding: 40px; position: relative; z-index: 0; margin: 45px 0px; } .blog_details_info blockquote:before { content: ""; font: normal normal normal 44px/1 FontAwesome; display: inline-block; color: #19182e; padding-bottom: 10px; } .blog_details_info blockquote:after { content: ""; font: normal normal normal 94px/1 FontAwesome; display: inline-block; color: #eceffd; position: absolute; right: 25px; bottom: -12px; z-index: -1; } .blog_details_info blockquote h4 { margin-bottom: 0; font-size: 20px; font-weight: 400; font-family: "Product"; line-height: 28px; color: #19182e; } .blog_details_info .post-info-bottom { display: flex; flex-direction: row-reverse; justify-content: space-between; font-size: 14px; font-family: "Source Sans Pro", sans-serif; text-transform: uppercase; font-weight: 600; } .blog_details_info .post-info-bottom .post-info-comments-holder a { color: #19182e; } .blog_details_info .post-info-bottom .post-info-comments-holder a i { color: #21d4fd; padding-right: 5px; } .blog_details_info .post-info-bottom .post-info-comments-holder a + a { margin-left: 15px; } .blog_details_info .post-info-bottom .post-info-comments-holder a + a i { color: #ff8a73; } .blog_details_info .post-info-bottom .blog_share { width: 50%; } .blog_details_info .post-info-bottom .blog_share .social-share-holder { display: inline-block; margin-bottom: 0; } .blog_details_info .post-info-bottom .blog_share .social-share-holder li { display: inline-block; } .blog_details_info .post-info-bottom .blog_share .social-share-holder li a { color: #19182e; margin-left: 6px; } .blog_details_info .post-info-bottom .blog_share .social-share-holder li a:hover { color: #21d4fd; } .blog_details_info .author-bio { background: #f7f8fb; padding: 30px; border-radius: 4px; } .blog_details_info .author-bio .media-left { width: 110px; height: 110px; border-radius: 5px; overflow: hidden; margin-right: 30px; margin-top: 10px; } .blog_details_info .author-bio .media-left img { width: 100%; } .blog_details_info .author-bio .media-body h4 { margin-bottom: 5px; } .blog_details_info .author-bio .media-body h4 a { font-size: 18px; font-family: "Product"; font-weight: 700; color: #19182e; } .blog_details_info .author-bio .media-body p { margin-bottom: 8px; font-size: 16px; line-height: 30px; font-family: "Source Sans Pro", sans-serif; color: #6F8BA4; } .blog_details_info .author-bio .media-body .social li { padding-right: 5px; } .blog_details_info .author-bio .media-body .social li a { color: #19182e; } .blog_details_info .author-bio .media-body .reply_btn { font-size: 16px; color: #6F8BA4; transition: color 0.2s linear; } .blog_details_info .author-bio .media-body .reply_btn span { vertical-align: middle; font-size: 14px; } .blog_details_info .author-bio .media-body .reply_btn:hover { color: #21d4fd; } .blog_details_info .blog_single_nav { display: flex; justify-content: space-between; margin-top: 60px; } .blog_details_info .blog_single_nav .blog_single_prev, .blog_details_info .blog_single_nav .blog_single_next { align-items: center; } .blog_details_info .blog_single_nav .blog_single_prev .img_rounded, .blog_details_info .blog_single_nav .blog_single_next .img_rounded { width: 60px; height: 60px; margin-right: 15px; } .blog_details_info .blog_single_nav .blog_single_prev .img_rounded img, .blog_details_info .blog_single_nav .blog_single_next .img_rounded img { max-width: 100%; } .blog_details_info .blog_single_nav .blog_single_prev h4, .blog_details_info .blog_single_nav .blog_single_next h4 { font-size: 18px; font-family: "Product"; margin-bottom: 0; color: #19182e; transition: color 0.2s linear; } .blog_details_info .blog_single_nav .blog_single_prev h4:hover, .blog_details_info .blog_single_nav .blog_single_next h4:hover { color: #21d4fd; } .blog_details_info .blog_single_nav .blog_single_prev .date, .blog_details_info .blog_single_nav .blog_single_next .date { color: #6F8BA4; } .comment_title { margin-bottom: 35px; } .comment_title h4 { font: 700 24px "Product"; color: #19182e; margin-bottom: 0; } .comment_holder_inner { padding-top: 60px; padding-bottom: 40px; } .comment_holder_inner .comment_list li .author-bio { margin-bottom: 30px; } .comment_holder_inner .comment_list li .children { padding-left: 80px; } .comment_form .comment_form_info h5 { font-size: 14px; font-family: "Source Sans Pro", sans-serif; color: #a9aecd; font-weight: 400; margin-bottom: 12px; } .comment_form .comment_form_info .form-control { border: 0px; background: #f7f8fb; height: 55px; border-radius: 5px; padding-left: 25px; margin-bottom: 30px; font-family: "Source Sans Pro", sans-serif; font-size: 16px; border: 1px solid transparent; color: #6F8BA4; transition: all 0.2s linear; } .comment_form .comment_form_info .form-control:focus { border-color: rgba(33, 212, 233, 0.14); box-shadow: 0px 5px 16px 3px rgba(12, 0, 46, 0.04); background: #fff; } .comment_form .comment_form_info textarea.form-control { height: 200px; padding-top: 15px; } .comment_form .comment_form_info .portfolio_btn { cursor: pointer; transition: all 0.3s linear; } /*================ blog_details_area css =================*/ .protype_blog_area .portfolio_item:after, .protype_blog_area .portfolio_item:before, .protype_blog_area .portfolio_item .bg_hover:before, .protype_blog_area .portfolio_item .bg_hover:after { display: none; } .protype_blog_area .pr_item .p_content h3 { color: #263b5e; } .protype_blog_area .pr_item .p_content h3:hover { color: #5956fe; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*============== contact_area css ================*/ .contact_img { margin-left: -50px; } .contact_img img { max-width: 100%; } .contact_info .pr_section_title { margin-bottom: 35px; } .contact_form .form-control { height: 55px; border: 1px solid #fbfbfd; border-radius: 5px; font-size: 13px; font-family: "Poppins", sans-serif; padding-left: 30px; background: #f7f8fb; font-weight: 300; margin-bottom: 15px; transition: all 0.3s linear; } .contact_form .form-control.placeholder { color: #a9aecd; } .contact_form .form-control:-moz-placeholder { color: #a9aecd; } .contact_form .form-control::-moz-placeholder { color: #a9aecd; } .contact_form .form-control::-webkit-input-placeholder { color: #a9aecd; } .contact_form .form-control:focus { border-color: rgba(33, 212, 233, 0.14); -webkit-box-shadow: 0px 5px 16px 3px rgba(12, 0, 46, 0.04); box-shadow: 0px 5px 16px 3px rgba(12, 0, 46, 0.04); background: #fff; } .contact_form .form-control.text-area { height: 220px; padding-top: 15px; } /*============== contact_area css ================*/ .map_area .mapBox { height: 515px; } /*================ error_area css ==============*/ .error_area { height: 100vh; min-height: 650px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .error_area .text { width: 500px; position: relative; margin: 0 auto 100px; } .error_area span { font-size: 250px; line-height: 250px; font-weight: 900; font-family: "Product"; color: #3e7cfc; position: absolute; } .error_area span.first { left: 0; } .error_area span.two { right: 0; top: 0; } .error_area h2 { font-size: 30px; font-family: "Product"; font-weight: 600; color: #051441; margin-bottom: 30px; } .error_area ul li { display: inline-block; margin: 0px 3px; } .error_area ul li a { width: 40px; height: 40px; display: inline-block; border: 1px solid #3e7cfc; color: #3e7cfc; line-height: 39px; border-radius: 50%; font-size: 14px; } .error_area ul li a:hover { background: #3e7cfc; color: #fff; } .error_area .error_btn { position: relative; color: #051441; font-size: 16px; font-weight: 500; margin-top: 12px; } .error_area .error_btn:before { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: #051441; } .error_area .penguin { margin: 0px auto 60px; max-width: 270px; animation: jump 5s 3s linear infinite alternate; position: relative; } .error_area .head { position: relative; width: 130px; height: 105px; margin: 0 auto; } .error_area .head:before { content: ""; position: absolute; top: 0; left: 15px; width: 100px; height: 75px; background: #3e7cfc; border-radius: 60px 60px 0px 0px; } .error_area .head:after { content: ""; position: absolute; bottom: 5px; left: 0px; width: 130px; height: 60px; background: #3e7cfc; border-radius: 50px 60px; } .error_area .head-inner { position: relative; width: 130px; height: 115px; margin: 0 auto; } .error_area .head-inner:before { content: ""; position: absolute; top: 24px; left: 25px; width: 80px; height: 37px; background-color: #fff; border-radius: 60px 60px 0px 0px; z-index: 200; } .error_area .head-inner:after { content: ""; position: absolute; bottom: 19px; left: 15px; width: 100px; height: 38px; background-color: #fff; border-radius: 50px 60px; z-index: 100; } .error_area .eye-wrap { margin: 0 auto; position: relative; width: 125px; height: 60px; } .error_area .eye { width: 20px; height: 30px; border: 2px solid #3e7cfc; border-top-width: 5px; border-radius: 100%; position: absolute; top: 40px; left: 35px; z-index: 500; } .error_area .eye:after { content: ""; width: 10px; height: 10px; background-color: #000; position: absolute; border-radius: 100%; -webkit-transition: all 0.1s; transition: all 0.1s; left: 0; bottom: 25%; animation: jurk2 5s 3s linear infinite alternate; } .error_area .eye:before { content: ""; width: 4px; height: 4px; display: block; position: absolute; background-color: #90949f; background-color: #fff; border-radius: 100%; right: 7px; top: 8px; z-index: 1; animation: jurk2 2s 3s linear infinite alternate; } .error_area .eye:last-of-type { right: 38px; left: auto; } .error_area .mouth { margin: 20px auto; z-index: 900; width: 20px; height: 20px; border-top: 12px solid #e67e22; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; } .error_area .body { margin: -40px auto; width: 150px; height: 190px; background: #3e7cfc; border-radius: 100%; position: relative; } .error_area .body:after { content: ""; width: 135px; height: 170px; background-color: #fff; border-radius: 100%; position: absolute; top: 10px; left: 8px; border: 2px solid #3e7cfc; border-left-width: 10px; border-right-width: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .error_area .arm { width: 30px; height: 100px; background: #3e7cfc; position: absolute; left: -10px; top: 28px; border-radius: 20px 20px 50px 10px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .error_area .arm:nth-child(1) { right: -10px; left: auto; border-radius: 20px 20px 10px 50px; -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); } .error_area .foot { position: absolute; width: 15px; height: 28px; background-color: #e67e22; bottom: -12px; left: 55px; z-index: 1000; border-radius: 30px; } .error_area .foot:nth-child(1) { right: 55px; left: auto; } .prototype_subscribe_area { background: #4e78f4; position: relative; padding: 100px 0px 120px; } .prototype_subscribe_area .prototype_title h2 { color: #fff; } .p_s_content_box { position: relative; text-align: center; max-width: 770px; margin: 0 auto; } .p_s_content_box .pro_subscribe_form { max-width: 570px; margin: 0 auto; } .p_s_content_box .pro_subscribe_form .form-group { margin-bottom: 0; position: relative; } .p_s_content_box .pro_subscribe_form .form-group input { position: relative; display: block; width: 100%; font-size: 15px; line-height: 30px; color: #6a7695; font-weight: 400; height: 60px; padding: 25px 30px; border-radius: 6px; background-color: #ffffff; border: 1px solid transparent; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .p_s_content_box .pro_subscribe_form .form-group input.placeholder { color: #6a7695; } .p_s_content_box .pro_subscribe_form .form-group input:-moz-placeholder { color: #6a7695; } .p_s_content_box .pro_subscribe_form .form-group input::-moz-placeholder { color: #6a7695; } .p_s_content_box .pro_subscribe_form .form-group input::-webkit-input-placeholder { color: #6a7695; } .p_s_content_box .pro_subscribe_form .form-group .protype_btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0px; margin: 0px; cursor: pointer; } /*---------------------------------------------------- */ /*----------------------------------------------------*/ /*=============== saas_footer_area css=============*/ .saas_footer_area { background: #f1f4fa; padding-top: 100px; border-bottom: 5px solid #11bdff; } .s_footer_top .border_bottom { width: 100%; height: 1px; background: #dae1ef; margin-top: 95px; } .f_widget { font-family: "Source Sans Pro", sans-serif; } .f_widget p { font-size: 16px; line-height: 28px; color: #82879a; } .f_widget .f_title { font-size: 22px; font-weight: 700; color: #051441; margin-bottom: 30px; font-family: "Source Sans Pro", sans-serif; } .f_widget .f_title_two { font: 600 22px/15px "Poppins", sans-serif; color: #252a32; margin-bottom: 36px; } .f_widget .f_logo { display: inline-block; margin-bottom: 20px; } .f_widget.about_widget { padding-right: 75px; } .f_widget.link_widget { padding-top: 13px; } .f_widget.link_widget ul { margin-bottom: 0px; } .f_widget.link_widget ul li a { font-size: 16px; line-height: 25px; font-weight: 400; color: #82879a; position: relative; transition: color 0.2s linear; display: inline-block; } .f_widget.link_widget ul li a:before { content: ""; position: absolute; width: 0; bottom: 0; height: 1px; left: 0; transition: width 0.2s linear; background: #ff9700; } .f_widget.link_widget ul li a:hover { color: #ff9700; } .f_widget.link_widget ul li a:hover:before { width: 100%; } .f_widget.link_widget ul li:not(:last-child) { margin-bottom: 10px; } .f_widget.subscribe_widget { padding-top: 13px; } .f_widget.subscribe_widget p { margin-bottom: 32px; } .f_widget .subscrib_form .form-control { font-size: 16px; font-weight: 400; color: #051441; background: #ebeff6; border: 1px solid #e3e6ed; border-radius: 3px; font-family: "Source Sans Pro", sans-serif; padding: 0px 0px 0px 30px; height: 55px; box-shadow: none; position: relative; z-index: 0; } .f_widget .subscrib_form .form-control.placeholder { color: #9398ab; } .f_widget .subscrib_form .form-control:-moz-placeholder { color: #9398ab; } .f_widget .subscrib_form .form-control::-moz-placeholder { color: #9398ab; } .f_widget .subscrib_form .form-control::-webkit-input-placeholder { color: #9398ab; } .f_widget .subscrib_form button { background: transparent; border: 0px; padding: 0px; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 14px; color: #051441; } .footer_bottom { padding: 25px 0px; } .footer_bottom .coppyright_info .f_social { padding-bottom: 8px; } .footer_bottom .coppyright_info .f_social a { width: 34px; height: 34px; border-radius: 50%; display: inline-block; font-size: 16px; line-height: 32px; color: #d7d7d7; text-align: center; border: 1px solid #d7d7d7; position: relative; margin-right: 12px; transition: all 0.3s linear; z-index: 1; } .footer_bottom .coppyright_info .f_social a:before { content: ""; top: 0px; left: 0px; right: 0px; bottom: 0px; position: absolute; background-image: -moz-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); background-image: -webkit-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); background-image: -ms-linear-gradient(40deg, #ffc600 0%, #ff9600 100%); border-radius: 50%; opacity: 0; transition: opacity 0.3s linear; z-index: -1; } .footer_bottom .coppyright_info .f_social a:hover { color: #fff; border-color: transparent; } .footer_bottom .coppyright_info .f_social a:hover:before { opacity: 1; } .footer_bottom .coppyright_info p { font-size: 14px; color: #9398ab; font-family: "Poppins", sans-serif; font-weight: 400; margin-bottom: 0px; } .footer_bottom .coppyright_info p a { color: #9398ab; } .footer_bottom .coppyright_info .scroll_btn { width: 45px; height: 45px; text-align: center; line-height: 45px; font-size: 25px; color: #9398ab; box-shadow: 0px 20px 20px 0px rgba(0, 8, 32, 0.08); background: #fff; display: inline-block; border-radius: 50%; } /*=============== saas_footer_area css=============*/ /*=============== saas_footer_area_two css=============*/ .saas_footer_area_two { padding-top: 120px; } .saas_footer_area_two .f_widget .f_title { color: #282b31; font-family: "Poppins", sans-serif; font-weight: 600; } .saas_footer_area_two .f_widget p { font-family: "Lato", sans-serif; color: #676b75; } .saas_footer_area_two .f_widget.link_widget ul li a { color: #676b75; font-weight: 400; font-family: "Lato", sans-serif; } .saas_footer_area_two .f_widget.link_widget ul li a:hover { color: #ff9700; } .saas_footer_area_two .f_widget .subscrib_form .form-control { background: transparent; } .saas_footer_area_two .border_bottom { background: #f5f5f5; } .saas_footer_area_two .footer_bottom .coppyright_info { align-items: center; } .saas_footer_area_two .footer_bottom .coppyright_info p { color: #676b75; opacity: 0.8; } /*=============== saas_footer_area_two css=============*/ /*=============== app_footer_area css=============*/ .app_footer_area { background: #fafaff; padding-top: 55px; } .app_footer_area .border_bottom { width: 100%; height: 1px; background: #efeff5; margin-top: 80px; } .app_footer_top .download_widget ul { margin-bottom: 0px; } .app_footer_top .download_widget ul li a { font: 400 16px/34px "Lato", sans-serif; color: #7f8ba0; transition: color 0.3s linear; } .app_footer_top .download_widget ul li a:hover { color: #11bdff; } .app_footer_bottom { text-align: center; padding: 20px 0px; } .app_footer_bottom p { margin-bottom: 0px; font: 400 16px/28px "Lato", sans-serif; color: #99a1af; } .app_footer_bottom p a { color: #99a1af; transition: color 0.3s linear; } .app_footer_bottom p a:hover { color: #11bdff; } /*=============== app_footer_area css=============*/ /*=============== project_footer_area css=============*/ .project_footer_area { background: #F7FAFD; padding-top: 230px; } .project_footer_area .f_widget .f_title { font-family: "Product"; } .project_footer_area .f_widget.about_widget { padding-right: 20px; } .project_footer_area .f_widget.link_widget ul li a:before { background: #f31f74; } .project_footer_area .f_widget.link_widget ul li a:hover { color: #f31f74; } .project_footer_area .footer_bottom .coppyright_info .f_social a:before { background: #f31f74; } /*=============== project_footer_area css=============*/ /*=============== payment_footer_area css=============*/ .payment_footer_area { background: #fafbfd; position: relative; } .payment_footer_area a { color: #8d949e; } .payment_footer_area a:hover { color: #5e2ced; } .payment_footer_area .footer_top { padding: 200px 0px 70px; } .payment_footer_area .footer_top .f_widget .f_logo { margin-bottom: 24px; } .payment_footer_area .footer_top .f_widget .f_title { text-transform: uppercase; color: #252a32; font-family: "Poppins", sans-serif; font-size: 18px; } .payment_footer_area .footer_top .f_widget.about_widget { padding-right: 0px; } .payment_footer_area .footer_top .f_widget.about_widget p { font-size: 16px; line-height: 30px; color: #8d949e; font-family: "Poppins", sans-serif; } .payment_footer_area .footer_top .f_widget.about_widget .f_social a { width: 40px; height: 40px; line-height: 38px; border-radius: 50%; display: inline-block; text-align: center; margin-right: 8px; border: 1px solid #ededed; } .payment_footer_area .footer_top .f_widget.about_widget .f_social a:hover { border-color: #5e2ced; } .payment_footer_area .footer_top .f_widget.link_widget { padding-left: 40px; } .payment_footer_area .footer_top .f_widget.link_widget ul li a { font-size: 16px; font-family: "Poppins", sans-serif; } .payment_footer_area .footer_top .f_widget.link_widget ul li a:before { background: #5e2ced; } .payment_footer_area .footer_top .f_widget.link_widget ul li a:hover { color: #5e2ced; } .payment_footer_area .footer_bottom { border-top: 1px solid #f2f5fe; } .payment_footer_area .footer_bottom p { font-size: 14px; line-height: 30px; color: #8d949e; font-family: "Poppins", sans-serif; margin-bottom: 0; } .payment_footer_area .footer_bottom .f_menu { margin-bottom: 0; } .payment_footer_area .footer_bottom .f_menu li { display: inline-block; font-size: 14px; font-family: "Poppins", sans-serif; } .payment_footer_area .footer_bottom .f_menu li + li { margin-left: 16px; } .payment_footer_area .footer_bottom .f_menu li + li:before { content: ""; width: 1px; height: 12px; background: #b1b7ca; display: inline-block; margin-right: 18px; } .payment_footer_area .pt_120 { padding-top: 120px; } /*=============== payment_footer_area css=============*/ .payment_footer_area_two .footer_top { padding-top: 120px; } .payment_footer_area_two .footer_top.pt_250 { padding-top: 260px; } .payment_footer_area_two .footer_top.pt_190 { padding-top: 190px; } .payment_footer_area_two .footer_top .f_widget.link_widget ul li a, .payment_footer_area_two .footer_top .f_widget.about_widget p { font-family: "Source Sans Pro", sans-serif; font-weight: 400; } .payment_footer_area_two .footer_top .f_widget.link_widget ul li a:before { background: #11bdff; } .payment_footer_area_two .footer_top .f_widget.link_widget ul li a:hover { color: #11bdff; } .payment_footer_area_two .footer_top .f_widget .f_title { font-family: "Product"; font-weight: 700; } .payment_footer_area_two .footer_top .f_widget.about_widget .f_social a:hover { color: #11bdff; border-color: #11bdff; } .payment_footer_area_two .footer_bottom p, .payment_footer_area_two .footer_bottom .f_menu li { font-family: "Source Sans Pro", sans-serif; font-size: 16px; } .payment_footer_area_two .footer_bottom a:hover { color: #11bdff; } /*=========== prototype footer area =============*/ .prototype_footer_area { background: #413c85; padding: 110px 0px 150px; position: relative; z-index: 1; } .prototype_footer_area .animated-wave { width: 100%; position: absolute; height: 212px; bottom: 0; left: 0; z-index: -1; } .prototype_footer_area .image_leaf { position: absolute; bottom: -20px; left: -20px; width: 400px; } .prototype_footer_area .image_leaf.two { right: -20px; left: auto; } .prototype_footer_area .f_widget { font-family: "Poppins", sans-serif; font-weight: 400; color: #bab5df; } .prototype_footer_area .f_widget .f_title { color: #fff; font-family: "Poppins", sans-serif; font-weight: 500; } .prototype_footer_area .f_widget p, .prototype_footer_area .f_widget a { color: #bab5df; } .prototype_footer_area .f_widget.link_widget ul li a { color: #bab5df; } .prototype_footer_area .f_widget.link_widget ul li a:before { display: none; } .prototype_footer_area .f_widget.link_widget ul li a:hover { color: #fff; } .prototype_footer_area .f_widget .f_social a { text-align: center; line-height: 40px; font-size: 18px; display: inline-block; margin-right: 20px; } .prototype_footer_area .f_widget .f_social a:hover { color: #fff; } /*---------------------------------------------------- */ /*# sourceMappingURL=style.css.map */