/*SaaS Classic*/ .appilo-saas-classic { margin: 0; padding: 0; overflow-x: hidden; font-size: 16px; line-height: 1.4; font-family: "Roboto"; -moz-osx-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } .appilo-saas-classic ::-moz-selection { color: #fff; background-color: #1e90ff; /* Ubah warna latar belakang pemilihan teks menjadi biru */ } .appilo-saas-classic ::selection { color: #fff; background-color: #1e90ff; /* Ubah warna latar belakang pemilihan teks menjadi biru */ } .appilo-saas-classic .container { max-width: 1200px; } .appilo-saas-classic .ul-li ul { margin: 0; padding: 0; } .appilo-saas-classic .ul-li ul li { list-style: none; display: inline-block; } .appilo-saas-classic .ul-li-block ul { margin: 0; padding: 0; } .appilo-saas-classic .ul-li-block ul li { list-style: none; display: block; } div#saas-classic-preloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: visible; background-color: #fff; background: #fff url(../img/saas-classic/pre.html) no-repeat center center; } .appilo-saas-classic [data-background] { background-size: cover; background-repeat: no-repeat; background-position: center center; } .appilo-saas-classic a { color: inherit; text-decoration: none; } .appilo-saas-classic a:hover, .appilo-saas-classic a:focus { text-decoration: none; } .appilo-saas-classic img { max-width: 100%; height: auto; } .appilo-saas-classic section { overflow: hidden; } .appilo-saas-classic button { cursor: pointer; } .appilo-saas-classic .form-control:focus, .appilo-saas-classic button:visited, .appilo-saas-classic button.active, .appilo-saas-classic button:hover, .appilo-saas-classic button:focus, .appilo-saas-classic input:visited, .appilo-saas-classic input.active, .appilo-saas-classic input:hover, .appilo-saas-classic input:focus, .appilo-saas-classic textarea:hover, .appilo-saas-classic textarea:focus, .appilo-saas-classic a:hover, .appilo-saas-classic a:focus, .appilo-saas-classic a:visited, .appilo-saas-classic a.active, .appilo-saas-classic select, .appilo-saas-classic select:hover, .appilo-saas-classic select:focus, .appilo-saas-classic select:visited { outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; color: inherit; } .appilo-saas-classic .form-control { -webkit-box-shadow: none; box-shadow: none; } .appilo-saas-classic .relative-position { position: relative; } .appilo-saas-classic .pera-content p { margin-bottom: 0; } .saas2-headline h1, .saas2-headline h2, .saas2-headline h3, .saas2-headline h4, .saas2-headline h5, .saas2-headline h6 { margin: 0; font-family: "Poppins"; } .saas-classic-section-header span { font-weight: 300; } .saas-classic-scrollup { width: 55px; right: 20px; z-index: 5; height: 55px; bottom: 20px; display: none; position: fixed; border-radius: 100%; line-height: 55px; background-color: #1e90ff; /* Dodger Blue */ -webkit-box-shadow: 0 0 20px 0 rgba(30, 144, 255, 0.3); /* Adjusted blue shadow */ box-shadow: 0 0 20px 0 rgba(30, 144, 255, 0.3); /* Adjusted blue shadow */ -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas-classic-scrollup i { color: #fff; font-size: 20px; } .saas_two_section_title { margin: 0 auto; max-width: 465px; } .saas_two_section_title .title_tag { padding: 5px 30px; } .saas_two_section_title h2 { font-size: 40px; padding-top: 15px; } .saas_btn a { font-size: 15px; font-weight: 700; border-radius: 30px; display: inline-block; border: 2px solid #1e90ff; /* Dodger Blue */ } .saas_btn:before { top: 8px; left: 32px; font-weight: 900; font-size: 22px; position: absolute; font-family: "Font Awesome 5 Free"; } .saas-classic-stylish-btn .saas_btn { -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; position: relative; overflow: hidden; border-radius: 50px; display: inline-block; } .saas-classic-stylish-btn .saas_btn a { font-size: 15px; font-weight: 700; padding: 10px 20px 10px 20px; } .saas-classic-stylish-btn .saas_btn a:hover { color: #fff; } .saas-classic-stylish-btn .saas_btn a:hover i { color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: currentColor; } .saas-classic-stylish-btn .saas_btn:before { position: absolute; content: ""; width: 0; height: 0; right: 0; top: 45px; right: 15px; -webkit-box-shadow: 0 0 25px 25px rgba(30, 144, 255, 0.9); /* Ubah warna bayangan menjadi biru */ box-shadow: 0 0 30px 31px rgba(30, 144, 255, 0.9); /* Ubah warna bayangan menjadi biru */ border-radius: 50%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas-classic-stylish-btn .saas_btn:after { height: 100%; width: 100%; position: absolute; content: ""; top: -100%; right: 0; z-index: -2; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; background-color: #1e90ff; /* Dodger Blue */ } .saas-classic-stylish-btn .saas_btn:hover:after { top: 0; } .saas-classic-stylish-btn .saas_btn i { font-size: 20px; margin-right: 8px; background: -webkit-linear-gradient( 135deg, #1e90ff 32%, #1e90ff 100% ); /* Dodger Blue */ background: -o-linear-gradient(135deg, #1e90ff 32%, #1e90ff 100%); background: linear-gradient(-45deg, #1e90ff 32%, #1e90ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @-webkit-keyframes fadeFromLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeFromLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeFromRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeFromRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeFromUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeFromUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .appilo-saas-classic .fadeFromUp { -webkit-animation-name: fadeFromUp; animation-name: fadeFromUp; } .appilo-saas-classic .fadeFromRight { -webkit-animation-name: fadeFromRight; animation-name: fadeFromRight; } .appilo-saas-classic .fadeFromLeft { -webkit-animation-name: fadeFromLeft; animation-name: fadeFromLeft; } .saas_two_section_title .title_tag, .saas_two_banner_section .s2-banner_content .s2-tilte_tag, .saas_two_feature_section .s2-feature_text .feature_tag, .integration_section .integration_text .feature_tag { color: #951fb3; font-size: 18px; font-weight: 500; padding: 3px 30px; border-radius: 8px; display: inline-block; background-color: #ede0f4; } .saas_two_section_title h2, .saas_two_banner_section .s2-banner_content h1, .saas_two_about_section .s2-about_text_icon .s2-about_text h3, .saas_two_feature_section .s2-feature_text h2, .integration_section .integration_text h2, .saas_two_team_section .s2-team_img_text .s2_name_info h3 { font-weight: 700; color: #fff; } .saas_two_section_title h2 span, .saas_two_banner_section .s2-banner_content h1 span, .saas_two_about_section .s2-about_text_icon .s2-about_text h3 span, .saas_two_feature_section .s2-feature_text h2 span, .integration_section .integration_text h2 span, .saas_two_team_section .s2-team_img_text .s2_name_info h3 span { font-weight: 300; } .saas_btn:before, .service_read_more a:after, .saas_two_about_section .s2-about_text_icon .s2-about_text a:after, .integration_section .integration_text a:after, .saas_two_banner_section .s2-banner_content .banner_btn a i, .saas_two_feature_section .s2-feature_text .saas_btn a:before, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a i { background: -webkit-linear-gradient( 135deg, #1e90ff 32%, #4169e1 100% ); /* Gradien biru */ background: -o-linear-gradient(135deg, #1e90ff 32%, #4169e1 100%); background: linear-gradient(-45deg, #1e90ff 32%, #4169e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: #fff; } .saas_two_about_section .s2-about_text_icon .s2-about_text p, .saas_two_feature_section .s2-feature_text p, .integration_section .integration_text p { color: #353535; font-size: 17px; line-height: 1.588; padding-bottom: 20px; } .service_read_more a, .saas_two_about_section .s2-about_text_icon .s2-about_text a, .integration_section .integration_text a { color: #06f; font-size: 15px; font-weight: 600; position: relative; font-family: "Poppins"; } .service_read_more a:after, .saas_two_about_section .s2-about_text_icon .s2-about_text a:after, .integration_section .integration_text a:after { top: 0; right: -35px; content: "\f30b"; font-size: 20px; font-weight: 900; position: absolute; opacity: 0; visibility: hidden; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; font-family: "Font Awesome 5 Free"; } .service_read_more a:before, .saas_two_about_section .s2-about_text_icon .s2-about_text a:before, .integration_section .integration_text a:before { height: 2px; width: 0%; bottom: -3px; content: ""; position: absolute; background-color: #06f; -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; } .service_read_more a:hover:before, .saas_two_about_section .s2-about_text_icon .s2-about_text a:hover:before, .integration_section .integration_text a:hover:before { width: 100%; } .service_read_more a:hover:after, .saas_two_about_section .s2-about_text_icon .s2-about_text a:hover:after, .integration_section .integration_text a:hover:after { opacity: 1; right: -25px; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; visibility: visible; } .saas_two_banner_section .s2-banner_content .banner_btn a, .saas_two_feature_section .s2-feature_text .saas_btn, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a { -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; position: relative; overflow: hidden; border-radius: 50px; display: inline-block; } .saas_two_banner_section .s2-banner_content .banner_btn a:before, .saas_two_feature_section .s2-feature_text .saas_btn:before, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:before { position: absolute; content: ""; width: 0; height: 0; right: 0; top: 45px; right: 15px; -webkit-box-shadow: 0 0 25px 25px rgba(30, 144, 255, 0.9); /* Ubah warna bayangan menjadi biru */ box-shadow: 0 0 30px 31px rgba(30, 144, 255, 0.9); /* Ubah warna bayangan menjadi biru */ border-radius: 50%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_banner_section .s2-banner_content .banner_btn a:after, .saas_two_feature_section .s2-feature_text .saas_btn:after, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:after { height: 100%; width: 100%; position: absolute; content: ""; top: -100%; right: 0; z-index: -2; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; background-color: #1e90ff; /* Dodger Blue */ } .saas_two_banner_section .s2-banner_content .banner_btn a:hover, .saas_two_feature_section .s2-feature_text .saas_btn:hover, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:hover { color: #fff; } .saas_two_banner_section .s2-banner_content .banner_btn a:hover i, .saas_two_feature_section .s2-feature_text .saas_btn:hover i, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:hover i { background: none; -webkit-text-fill-color: inherit; } .saas_two_banner_section .s2-banner_content .banner_btn a:hover:before, .saas_two_feature_section .s2-feature_text .saas_btn:hover:before, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:hover:before { opacity: 1; right: 25px; visibility: visible; } .saas_two_banner_section .s2-banner_content .banner_btn a:hover:after, .saas_two_feature_section .s2-feature_text .saas_btn:hover:after, .s2-pricing_section .s2-pricing_item .s2-pricing_btn a:hover:after { top: 0; } .saas_two_main_header { width: 100%; z-index: 9; padding: 15px 0; position: absolute; background-color: #fff; -webkit-box-shadow: 0 11px 68px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 11px 68px 0 rgba(0, 0, 0, 0.14); } .saas_two_main_header .sign_up_btn { display: inline-block; } .saas_two_main_header .brand_logo { padding-top: 10px; } .saas_two_main_header .s2-main-navigation { display: inline-block; padding-top: 20px; } .saas_two_main_header .s2-main-navigation .navbar-nav { display: inherit; } .saas_two_main_header .s2-main-navigation .navbar-nav li { font-size: 15px; font-weight: 600; margin-right: 55px; font-family: "Poppins"; } .saas_two_main_header .s2-main-navigation .navbar-nav li a { padding-bottom: 30px; position: relative; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_main_header .s2-main-navigation .navbar-nav li a:hover { color: #d10edd; } .saas_two_main_header .s2-main-navigation .navbar-nav li a:hover:before { width: 100%; } .saas_two_main_header .s2-main-navigation .navbar-nav li a:before { content: ""; position: absolute; height: 2px; width: 0%; background-color: #d10edd; left: 2px; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; bottom: 25px; } .saas_two_main_header .s2-main-navigation .dropdown { position: relative; } .saas_two_main_header .s2-main-navigation .dropdown:after { content: "\f107"; position: absolute; right: -11px; top: 2px; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; font-family: "Font Awesome 5 Free"; font-weight: 900; } .saas_two_main_header .s2-main-navigation .dropdown:hover:after { color: #d10edd; } .saas_two_main_header .saas_sign_up_btn { height: 55px; width: 175px; float: right; line-height: 55px; border-radius: 30px; background-color: #73299a; } .saas_two_main_header .saas_sign_up_btn a { color: #fff; font-weight: 600; padding-left: 15px; position: relative; display: block; width: 100%; } .saas_two_main_header .saas_sign_up_btn a i { color: #fff; font-size: 13px; line-height: 1; font-weight: 900; padding-right: 5px; } .saas_two_main_header .dropdown .dropdown-menu { top: 65px; left: 0; opacity: 0; z-index: 2; margin: 0; padding: 0; height: auto; width: 200px; display: block; border: none; padding: 10px 0 0; visibility: hidden; position: absolute; border-radius: 0; background-color: #fff; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; border-bottom: 2px solid #73299a; -webkit-box-shadow: 0 5px 10px 0 rgba(83, 82, 82, 0.1); box-shadow: 0 5px 10px 0 rgba(83, 82, 82, 0.1); } .saas_two_main_header .dropdown .dropdown-menu li { width: 100%; padding: 10px 15px; border-bottom: 1px solid #e5e5e5; } .saas_two_main_header .dropdown .dropdown-menu li a { color: #343434; font-size: 14px; padding: 10px 0; position: relative; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_main_header .dropdown .dropdown-menu li a:before { display: none; } .saas_two_main_header .dropdown .dropdown-menu li a:after { left: 0; top: 15px; width: 8px; height: 8px; content: ""; position: absolute; border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); background-color: #73299a; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_main_header .dropdown .dropdown-menu li a:hover { padding-left: 15px; } .saas_two_main_header .dropdown .dropdown-menu li a:hover:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .saas_two_main_header .dropdown:hover > .dropdown-menu { top: 50px; opacity: 1; visibility: visible; } .saas_2-menu-bg-overlay { background-color: #fff; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; position: fixed; top: -90px; padding: 10px 0; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_main_header.saas_2-menu-bg-overlay { z-index: 9; top: 0; -webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.8); } .saas_two_main_header.saas_2-menu-bg-overlay .dropdown:hover .dropdown-menu { top: 45px; } @-webkit-keyframes floatY { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0); transform: translatey(0); } } @keyframes floatY { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { -webkit-transform: translatey(0); transform: translatey(0); } } @-webkit-keyframes floatX { 0% { -webkit-transform: translateX(80%); transform: translateX(80%); } 50% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(80%); transform: translateX(80%); } } @keyframes floatX { 0% { -webkit-transform: translateX(80%); transform: translateX(80%); } 50% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(80%); transform: translateX(80%); } } .saas_two_default_header { padding: 200px 0 50px 0px !important; } .saas_two_banner_section { background-color: #fafafa; padding: 235px 0 140px 0; } .saas_two_banner_section:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-repeat: no-repeat; background-image: url("https://themexriver.com/appilo-theme/app-landing/wp-content/uploads/sites/55/2021/11/slider-bg.jpg"); } .saas_two_banner_section .s2-banner_content { position: relative; z-index: 1; max-width: 450px; } .saas_two_banner_section .s2-banner_content .s2-tilte_tag { padding: 5px 30px; } .saas_two_banner_section .s2-banner_content h1 { font-size: 55px; padding: 18px 0 20px 0; } .saas_two_banner_section .s2-banner_content p { font-size: 18px; padding-bottom: 35px; color: #fff; } .saas_two_banner_section .s2-banner_content .banner_btn a { height: 50px; width: 175px; text-align: center; line-height: 45px; border-radius: 50px; margin-right: 20px; font-weight: 700; color: #fff; font-family: "Poppins"; display: inline-block; z-index: 1; border: 2px solid #fff; /* Dodger Blue */ } .saas_two_banner_section .s2-banner_content .banner_btn a i { font-size: 20px; margin-right: 8px; } .saas_two_banner_section .s2-banner_content .banner_btn span { color: #6a6a6a; display: block; font-size: 14px; margin-top: 5px; margin-left: 10px; } .saas_two_banner_section .s2-banner_area .banner_mockup { position: absolute; top: -40px; right: -70px; z-index: 1; } .saas_two_banner_section .s2-banner_shape1 { left: 0; top: 85px; } .saas_two_banner_section .s2-banner_shape2 { top: 0; right: 0; -webkit-animation: floatY 3s ease-in-out infinite; animation: floatY 3s ease-in-out infinite; } .saas_two_banner_section .s2-banner_shape3 { top: 0; right: 50%; -webkit-transform: translateX(80%); -ms-transform: translateX(80%); transform: translateX(80%); -webkit-animation: floatX 10s ease-in-out infinite; animation: floatX 10s ease-in-out infinite; } .saas_two_service_section { padding-bottom: 10px; } .saas_two_service_section .service_content { padding-top: 70px; } .saas_two_service_section .service_content_box { border-radius: 10px; margin-bottom: 50px; padding: 25px 30px 30px 35px; z-index: 1; background-color: #fff; -webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -webkit-box-shadow: 0 20px 81px 0 rgba(8, 0, 20, 0.14); box-shadow: 0 20px 81px 0 rgba(8, 0, 20, 0.14); } .saas_two_service_section .service_content_box:before { content: ""; width: 100%; top: 0; left: 0; height: 100%; z-index: -3; border-radius: 10px; position: absolute; -webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; background-image: -webkit-linear-gradient( 45deg, #1e90ff 32%, #0000ff 100% ); /* Dodger Blue to Navy Blue */ background-image: -o-linear-gradient( 45deg, #1e90ff 32%, #0000ff 100% ); /* Dodger Blue to Navy Blue */ background-image: linear-gradient( 45deg, #1e90ff 32%, #0000ff 100% ); /* Dodger Blue to Navy Blue */ } .saas_two_service_section .service_content_box:after { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -2; border-radius: 10px; background-color: #fff; } .saas_two_service_section .service_content_box:hover { -webkit-transform: translate(-7px, -7px); -ms-transform: translate(-7px, -7px); transform: translate(-7px, -7px); -webkit-box-shadow: 0 20px 81px 0 rgba(8, 0, 20, 0.3); box-shadow: 0 20px 81px 0 rgba(8, 0, 20, 0.3); } .saas_two_service_section .service_content_box:hover:before { -webkit-transform: translate(7px, 7px); -ms-transform: translate(7px, 7px); transform: translate(7px, 7px); } .saas_two_service_section .service_content_box:hover:after, .saas_two_service_section .service_content_box:hover .service_text_box h3, .saas_two_service_section .service_content_box:hover .service_text_box p { transition: all ease-in-out 500ms; } .saas_two_service_section .service_content_box .service_icon_box { width: 60px; margin-bottom: 18px; } .saas_two_service_section .service_content_box .service_icon_box .upper_icon svg { height: 48px; width: 48px; fill: #30347b; } .saas_two_service_section .service_content_box .service_icon_box .upper_icon i { font-size: 48px; color: #30347b; } .saas_two_service_section .service_content_box .service_icon_box .lower_icon { position: absolute; top: 10px; z-index: -1; right: 0; } .saas_two_service_section .service_content_box .service_icon_box .lower_icon svg { width: 45px; height: 45px; fill: #1e90ff; } .saas_two_service_section .service_content_box .service_icon_box .lower_icon i { font-size: 45px; color: #c4a2fc; margin-top: 8px; } .saas_two_service_section .service_content_box .service_text_box h3 { color: #010101; font-size: 22px; font-weight: 700; padding-bottom: 15px; } .saas_two_service_section .service_content_box .service_text_box p { line-height: 1.5; color: #666; } .saas_two_about_section { padding: 70px 0; background-color: #ebedf2; } .saas_two_about_section:before { content: ""; position: absolute; top: 0; right: -400px; height: 100%; width: 800px; background-repeat: no-repeat; background-size: cover; background-image: url(../img/saas-classic/banner/abshape.png); } .saas_two_about_section:after { content: ""; height: 600px; width: 600px; right: -380px; top: 285px; border-radius: 100%; position: absolute; background-repeat: no-repeat; background-image: url(../img/saas-classic/banner/abshape2.png); } .saas_two_about_section .about_content_s2 { padding: 50px 70px 50px 110px; } .saas_two_about_section .s2-about_text_icon { padding-top: 35px; } .saas_two_about_section .s2-about_text_icon .s2-about_icon { width: 70px; height: 70px; line-height: 70px; padding-top: 15px; border-radius: 100%; margin-bottom: 16px; background-color: #1e90ff; /* Dodger Blue */ } .saas_two_about_section .s2-about_text_icon .s2-about_icon svg { fill: #fff; width: 40px; height: 40px; } .saas_two_about_section .s2-about_text_icon .s2-about_text h3 { font-size: 36px; line-height: 1.278; padding-bottom: 15px; } .saas_two_feature_section .s2-feature_text { max-width: 520px; padding: 40px 0 0 50px; } .saas_two_feature_section .s2-feature_text h2 { font-size: 40px; line-height: 1.25; padding: 15px 0 15px; } .saas_two_feature_section .s2-feature_text p { padding-bottom: 43px; } .saas_two_feature_section .s2-feature_text .saas_btn a { padding: 6px 25px 6px 25px; } .saas_two_feature_section .s2-feature_text .saas_btn a { font-size: 15px; font-weight: 700; border-radius: 30px; display: inline-block; border: 2px solid #1e90ff; /* Ubah warna border sesuai preferensi Anda */ padding: 10px 25px; /* Sesuaikan padding sesuai kebutuhan */ } .saas_two_feature_section .s2-feature_text .saas_btn a:before { content: "\f46d"; font-weight: 900; left: 0; font-size: 20px; margin-right: 8px; font-family: "Font Awesome 5 Free"; } .saas_two_feature_section .s2-feature_text .saas_btn:hover a:before { background: none; -webkit-text-fill-color: inherit; } .saas_two_feature_section .s2-feature_right .s2-feature_list { margin-bottom: 10px; padding: 22px 32px 20px; border-radius: 10px; display: inline-block; -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_icon { width: 95px; float: left; height: 95px; border-radius: 100%; line-height: 105px; margin-right: 30px; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_icon:after { left: 0; right: 0; top: 5px; width: 90%; height: 90%; content: ""; margin: 0 auto; position: absolute; border: 5px solid #fff; border-radius: 100%; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_icon i { font-size: 30px; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_text_box { max-width: 310px; display: inline-block; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_text_box h3 { color: #010101; font-size: 22px; font-weight: 700; padding-bottom: 15px; } .saas_two_feature_section .s2-feature_right .s2-feature_list:hover { margin-left: 30px; -webkit-box-shadow: 0 3px 43px 0 rgba(0, 0, 0, 0.13); box-shadow: 0 3px 43px 0 rgba(0, 0, 0, 0.13); } .saas_two_feature_section .s2-feature_right .s2-grean, .saas_two_feature_section .s2-feature_right .s2-purple, .saas_two_feature_section .s2-feature_right .s2-pink { position: relative; } .saas_two_feature_section .s2-feature_right .s2-grean:before, .saas_two_feature_section .s2-feature_right .s2-purple:before, .saas_two_feature_section .s2-feature_right .s2-pink:before { position: absolute; content: ""; height: 0; width: 5px; left: 0; top: 50%; border-radius: 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_feature_section .s2-feature_right .s2-grean:hover:before, .saas_two_feature_section .s2-feature_right .s2-purple:hover:before, .saas_two_feature_section .s2-feature_right .s2-pink:hover:before { height: 60px; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(1) .s2-feature_icon { background-color: #d9f3de; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(1) .s2-feature_icon i { color: #049507; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(1):before { background-color: #049507; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(2) .s2-feature_icon { background-color: #e1e1f5; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(2) .s2-feature_icon i { color: #1e90ff; /* Ubah warna ikon sesuai preferensi Anda */ } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(2):before { background-color: #1e90ff; /* Ubah warna latar belakang sesuai preferensi Anda */ } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(3) .s2-feature_icon { background-color: #ebdcf4; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(3) .s2-feature_icon i { color: #d912dc; } .saas_two_feature_section .s2-feature_right .s2-feature_list:nth-child(3):before { background-color: #d912dc; } .integration_section { background-color: #f0f2f7; padding: 120px 0 55px; } .integration_section .integration_img { padding-top: 10px; } .integration_section .integration_text { padding-right: 50px; } .integration_section .integration_text h2 { font-size: 40px; line-height: 1.25; padding: 15px 0 20px; } .integration_section .integration_text p { color: #666; padding-bottom: 18px; } .saas_two_team_section .s2-team_membar { padding-top: 130px; } .saas_two_team_section .s2-team_img_text { width: 100%; border-radius: 10px; display: inline-block; padding: 70px 15px 20px; -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; -webkit-box-shadow: 0 12px 43px 0 rgba(0, 0, 0, 0.13); box-shadow: 0 12px 43px 0 rgba(0, 0, 0, 0.13); } .saas_two_team_section .s2-team_img_text:hover { -webkit-box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.26); } .saas_two_team_section .s2-team_img_text:hover .s2_tean_img:before, .saas_two_team_section .s2-team_img_text:hover .s2_tean_img:after { opacity: 1; visibility: visible; } .saas_two_team_section .s2-team_img_text .s2_tean_img { width: 130px; height: 130px; overflow: hidden; border-radius: 100%; position: absolute; top: -75px; left: 15px; } .saas_two_team_section .s2-team_img_text .s2_tean_img:before, .saas_two_team_section .s2-team_img_text .s2_tean_img:after { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; border-radius: 100%; border: 3px solid #cc0fda; z-index: 1; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_team_section .s2-team_img_text .s2_tean_img:after { height: 95%; width: 95%; top: 50%; right: 0; margin: 0 auto; border: 3px solid #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .saas_two_team_section .s2-team_img_text .s2_name_info { float: left; } .saas_two_team_section .s2-team_img_text .s2_name_info h3 { font-size: 22px; padding-bottom: 5px; } .saas_two_team_section .s2-team_img_text .s2_name_info .s2-designation { font-size: 15px; font-weight: 500; color: #53117f; } .saas_two_team_section .s2-team_img_text .s2_name_info .s2_mem_contact { padding-top: 25px; } .saas_two_team_section .s2-team_img_text .s2_name_info .s2_mem_contact span { font-size: 15px; color: #737272; display: block; margin-bottom: 5px; } .saas_two_team_section .s2-team_img_text .s2_name_info .s2_mem_contact span i { color: #cc0fda; margin-right: 8px; } .saas_two_team_section .s2-team_img_text .s2-mem_social { bottom: 30px; right: 15px; position: absolute; z-index: 0; } .saas_two_team_section .s2-team_img_text .s2-mem_social ul { opacity: 0; margin-bottom: 15px; font-size: 14px; padding-top: 10px; visibility: hidden; position: relative; top: -50px; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_team_section .s2-team_img_text .s2-mem_social li { color: #fff; text-align: center; margin-top: 15px; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_team_section .s2-team_img_text .s2-mem_social li:hover { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .saas_two_team_section .s2-team_img_text .s2-mem_social .s2-share_btn { height: 50px; width: 50px; line-height: 50px; border-radius: 100%; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; background-color: #53117f; } .saas_two_team_section .s2-team_img_text .s2-mem_social .s2-share_btn i { color: #fff; } .saas_two_team_section .s2-team_img_text .s2-mem_social:after { bottom: 20px; z-index: -1; content: ""; width: 50px; height: 0%; opacity: 0; border-radius: 35px; position: absolute; visibility: hidden; background-color: #53117f; -webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; } .saas_two_team_section .s2-team_img_text:hover .s2-mem_social:after { height: 100%; bottom: 0; opacity: 1; visibility: visible; } .saas_two_team_section .s2-team_img_text:hover .s2-share_btn { background-color: #cc0fda; } .saas_two_team_section .s2-team_img_text:hover ul { top: 0; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; opacity: 1; visibility: visible; } #s2_team_slide .owl-stage-outer { overflow: visible; } #s2_team_slide .owl-item { opacity: 0; -webkit-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } #s2_team_slide .owl-item.active { opacity: 1; } #s2_team_slide .owl-nav { text-align: center; display: table; margin: 35px auto 0; padding-top: 3px; border-radius: 20px; background-color: #beaacb; } #s2_team_slide .owl-nav .owl-next, #s2_team_slide .owl-nav .owl-prev { margin: 0 10px; font-size: 22px; line-height: 10px; display: inline-block; } #s2_team_slide .owl-nav .owl-next i, #s2_team_slide .owl-nav .owl-prev i { color: #fff; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } #s2_team_slide .owl-nav .owl-next i:hover, #s2_team_slide .owl-nav .owl-prev i:hover { color: #53117f; } .s2-faq_section { z-index: 1; } .s2-faq_section .s2_faq_content button { border: none; color: #010101; font-size: 19px; font-weight: 700; font-family: "Poppins"; padding: 0 0 20px; position: relative; width: 100%; text-align: left; background-color: transparent; } .s2-faq_section .s2_faq_content button:after { top: 5px; right: 0; color: #951fb3; font-size: 14px; content: "\f056"; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Free"; } .s2-faq_section .s2_faq_content .collapsed:after { content: "\f055"; } .s2-faq_section .s2_faq_content .s2_faq { padding-bottom: 10px; } .s2-faq_section .s2_faq_content .s2_faq .s2_faq-body { padding-bottom: 30px; text-align: justify; max-width: 530px; color: #383838; line-height: 1.625; } @-webkit-keyframes flying { 0% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 50% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 100% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } } @keyframes flying { 0% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 50% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 100% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } } .s2-pricing_section .s2-pricing_item { margin: 0 auto; overflow: hidden; max-width: 330px; border-radius: 15px; -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; -webkit-box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.13); box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.13); } .s2-pricing_section .s2-pricing_item .s2-pricing_price { background-color: #818181; padding: 40px 50px 25px; margin-bottom: 25px; z-index: 1; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .pricing_icon { height: 65px; width: 60px; margin-right: 25px; border-radius: 8px; background-color: #fff; padding-top: 12px; position: relative; overflow: hidden; z-index: 1; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .pricing_icon svg { height: 40px; width: 40px; fill: #000; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .pricing_icon i { font-size: 40px; color: #000; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .pricing_icon:after { top: 0; left: 0; z-index: -1; content: ""; width: 100%; height: 100%; opacity: 0; visibility: visible; position: absolute; border-radius: 8px; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; background-image: -webkit-linear-gradient( 135deg, #1e90ff 32%, #4169e1 100% ); /* Gradien biru */ background-image: -o-linear-gradient(135deg, #1e90ff 32%, #4169e1 100%); background-image: linear-gradient(-45deg, #1e90ff 32%, #4169e1 100%); } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-pricing_text { font-family: "Poppins"; color: #fff; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-pricing_text span { font-size: 20px; font-weight: 600; display: block; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-pricing_text strong { font-size: 50px; line-height: 1; font-weight: 700; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-icon_bg { position: absolute; right: 20px; top: 40px; opacity: 0; visibility: hidden; z-index: -1; -webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -webkit-animation: flying 1.5s linear infinite; animation: flying 1.5s linear infinite; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-icon_bg svg { height: 80px; width: 80px; fill: #aaa; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-icon_bg i { font-size: 80px; color: #aaa; } .s2-pricing_section .s2-pricing_item .s2-pricing_list li { border-bottom: 1px solid #e6e8e9; padding: 18px 25px 16px 45px; font-family: "Poppins"; font-weight: 500; font-size: 14px; } .s2-pricing_section .s2-pricing_item .s2-pricing_list li:last-child { border: none; padding-bottom: 0; } .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-checked, .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-unchecked { width: 22px; height: 22px; margin-right: 10px; border-radius: 100%; line-height: 22px; position: relative; -webkit-box-shadow: 0 6px 18px 0 rgba(0, 197, 0, 0.5); box-shadow: 0 6px 18px 0 rgba(0, 197, 0, 0.5); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1%, #00f500), color-stop(53%, #00db00), to(#00c000) ); background-image: -webkit-linear-gradient( bottom, #00f500 1%, #00db00 53%, #00c000 100% ); background-image: -o-linear-gradient( bottom, #00f500 1%, #00db00 53%, #00c000 100% ); background-image: linear-gradient( 0deg, #00f500 1%, #00db00 53%, #00c000 100% ); } .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-checked i, .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-unchecked i { color: #fff; font-size: 12px; font-weight: 900; text-align: center; } .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-checked i, .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-unchecked i { color: #fff; font-size: 12px; } .s2-pricing_section .s2-pricing_item .s2-pricing_list .s2-unchecked { background-color: red; background-image: none; -webkit-box-shadow: none; box-shadow: none; } .s2-pricing_section .s2-pricing_item .s2-pricing_btn { padding: 25px 0; text-align: center; margin-top: 8px; } .s2-pricing_section .s2-pricing_item .s2-pricing_btn a { background-color: #1e90ff; /* Warna latar belakang */ height: 45px; width: 160px; text-align: center; line-height: 40px; border-radius: 50px; margin-right: 20px; font-weight: 700; color: #010101; font-family: "Poppins"; display: inline-block; border: 2px solid #1e90ff; /* Warna border */ } .s2-pricing_section .s2-pricing_item .s2-pricing_btn a i { font-size: 20px; margin-right: 8px; } .s2-pricing_section .s2-pricing_item:hover { -webkit-box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 23px 43px 0 rgba(0, 0, 0, 0.26); } .s2-pricing_section .s2-pricing_item:hover .s2-icon_bg { opacity: 1; top: 30px; right: 15px; visibility: visible; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .s2-pricing_section .s2-pricing_item:hover .pricing_icon:after { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .s2-pricing_section .s2-pricing_item:hover .pricing_icon svg { fill: #fff; } .s2-pricing_section .s2-pricing_item:hover .pricing_icon i { color: #fff; } .saas_two_footer_section { z-index: 1; margin-top: 140px; padding: 0 0 65px; } .saas_two_footer_section:before { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background-image: url(../img/saas-classic/banner/fobg.png) !important; } .saas_two_footer_section .s2-newslatter_section { top: -90px; margin: 0 auto; max-width: 1170px; position: relative; border-radius: 20px; padding: 45px 0 60px; background-color: #1e90ff; /* Mengubah warna latar belakang menjadi biru */ -webkit-box-shadow: 0 0 16px 0 rgba(27, 2, 52, 0.34); box-shadow: 0 0 16px 0 rgba(27, 2, 52, 0.34); } .saas_two_footer_section .s2-newslatter_section .s2-newslatter_title h2 { color: #fff; font-size: 36px; font-weight: 700; padding-bottom: 10px; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter_title p { font-family: "Poppins"; color: #fff; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter-form { max-width: 660px; margin: 30px auto 0; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter-form .nws-button { top: 0; right: 0; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter-form input { height: 62px; width: 100%; border: none; max-width: 490px; padding-left: 30px; border-radius: 5px; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter-form button { border: none; height: 62px; width: 155px; color: #fff; border-radius: 5px; background-color: #f104f5; position: absolute; top: 0; right: 0; } .saas_two_footer_section .s2-newslatter_section .newsletter_pattern_1 { top: -25px; left: 80px; z-index: 1; position: absolute; } .saas_two_footer_section .s2_footer_widget { font-family: "Poppins"; font-size: 14px; } .saas_two_footer_section .s2_footer_widget .s2-footer_logo { margin-bottom: 25px; } .saas_two_footer_section .s2_footer_widget .footer_about { color: #fff; max-width: 235px; margin-bottom: 20px; line-height: 1.714; } .saas_two_footer_section .s2_footer_widget p { color: #fff; } .saas_two_footer_section .s2_footer_widget .s2_footer_about p { width: 165px; margin-top: 8px; line-height: 1.714; } .saas_two_footer_section .s2_footer_widget .s2_footer_about span { color: #f104f5; font-weight: 700; margin-bottom: 8px; } .saas_two_footer_section .s2_footer_widget .menu { max-width: 340px; } .saas_two_footer_section .s2_footer_widget .menu li { width: 50%; float: left; max-width: 320px; margin-bottom: 18px; } .saas_two_footer_section .s2_footer_widget .menu li a { color: #fff; margin-left: 15px; position: relative; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_footer_section .s2_footer_widget .menu li a:before { top: 0; top: 0; left: -15px; color: #fff; font-size: 12px; content: "\f054"; font-weight: 900; position: absolute; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; font-family: "Font Awesome 5 Free"; } .saas_two_footer_section .s2_footer_widget .menu li a:after { content: ""; position: absolute; height: 1px; width: 0%; left: 0; bottom: 0; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; background-color: #f104f5; } .saas_two_footer_section .s2_footer_widget .menu li a:hover { margin-left: 25px; color: #f104f5; } .saas_two_footer_section .s2_footer_widget .menu li a:hover:before { color: #f104f5; } .saas_two_footer_section .s2_footer_widget .menu li a:hover:after { width: 100%; } .saas_two_footer_section .s2_footer_widget .s2_widget_title { color: #fff; font-size: 24px; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 35px; } .saas_two_footer_section .s2_footer_widget .s2_widget_title span { display: inline-block; margin-right: 20px; } .saas_two_footer_section .s2_footer_widget .s2_widget_title i { width: 100%; height: 1.1px; position: relative; display: inline-block; background-color: rgba(255, 255, 255, 0.2); } .saas_two_footer_section .s2_footer_widget .s2_footer_social a { height: 30px; width: 30px; border-radius: 100%; background-color: #fff; line-height: 30px; text-align: center; margin-right: 5px; display: inline-block; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .saas_two_footer_section .s2_footer_widget .s2_footer_social a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .saas_two_footer_section .s2_footer_widget .s2_footer_social form { margin: 18px 0 30px; position: relative; } .saas_two_footer_section .s2_footer_widget .s2_footer_social form input { height: 45px; background-color: #503d63; border: none; width: 100%; padding-left: 30px; } .saas_two_footer_section .s2_footer_widget .s2_footer_social form button { color: #fff; width: 62px; border: none; text-align: center; position: absolute; top: 0; right: 0; height: 100%; background-color: #1e90ff; /* Mengubah warna latar belakang tombol menjadi biru */ } .saas_two_footer_section .s2_footer_widget .s2_footer_social .fb-bg { color: #16599b; } .saas_two_footer_section .s2_footer_widget .s2_footer_social .tw-bg { color: #03a9f4; } .saas_two_footer_section .s2_footer_widget .s2_footer_social .dr-bg { color: #ea4c89; } .saas_two_footer_section .s2_footer_widget .s2_footer_social .bh-bg { color: #0067ff; } .s2-copyright { color: #fff; padding: 18px 0; font-size: 14px; font-family: "Poppins"; background-color: #000; } .s2-copyright a { color: #0067ff !important; } @keyframes slide { from { background-position: 0 0; } to { background-position: 1920px 0; } } @-webkit-keyframes slide { from { background-position: 0 0; } to { background-position: 1920px 0; } } .cloud_anim { position: absolute; left: 0; top: 50px; right: 0; max-width: 1170px; width: 100%; height: 100%; z-index: 0; margin: 0 auto; } .newsletter_pattern_2 { width: 100%; height: 46px; background-repeat: no-repeat; left: 0; top: 50px; animation: slide 60s linear infinite; -webkit-animation: slide 60s linear infinite; } .newsletter_pattern_3 { width: 100%; height: 46px; background-repeat: no-repeat; top: 70px; animation: slide 50s linear infinite; -webkit-animation: slide 50s linear infinite; } .newsletter_pattern_4 { position: absolute; left: 0; bottom: 0; height: 150px; width: 150px; background-size: cover; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); background-repeat: no-repeat; } .newsletter_pattern_5 { position: absolute; right: 0; height: 90%; width: 200px; top: 28px; } .s2_mobile_menu_content { top: 0; bottom: 0; right: -350px; height: 100vh; z-index: 101; position: fixed; width: 280px; overflow-y: scroll; background-color: #fff; padding: 40px 0; -webkit-box-shadow: 0 3px 5px rgba(100, 100, 100, 0.19); box-shadow: 0 3px 5px rgba(100, 100, 100, 0.19); -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .s2_mobile_menu_content .s2_main-navigation { width: 100%; } .s2_mobile_menu_content .s2_main-navigation .navbar-nav { width: 100%; } .s2_mobile_menu_content .navbar-nav .dropdown-menu { position: static !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .s2_mobile_menu_content .s2_main-navigation .navbar-nav li { width: 100%; display: block; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; border-bottom: 1px solid #dcdcdc; } .s2_mobile_menu_content .s2_main-navigation .navbar-nav li:first-child { border-top: 1px solid #dcdcdc; } .s2_mobile_menu_content .s2_main-navigation .navbar-nav li a { color: #000; padding: 0; width: 100%; display: block; font-size: 14px; font-weight: 400; padding: 5px 30px; text-transform: uppercase; } .s2_mobile_menu_content .m-brand-logo { width: 160px; margin: 0 auto; margin-bottom: 30px; } .s2_mobile_menu_wrap.s2_mobile_menu_on .s2_mobile_menu_content { right: 0; -webkit-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } .s2_mobile_menu_overlay { top: 0; width: 100%; height: 100%; position: fixed; z-index: 100; right: 0%; height: 120vh; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .s2_mobile_menu_overlay_on { overflow: hidden; } .s2_mobile_menu_wrap.s2_mobile_menu_on .s2_mobile_menu_overlay { opacity: 1; visibility: visible; } .s2_mobile_menu_button { position: absolute; display: none; right: 0; cursor: pointer; line-height: 40px; color: #73299a; text-align: center; font-size: 30px; top: -40px; z-index: 5; } .s2-mobile_menu .s2_main-navigation .navbar-nav li a:after { display: none; } .s2-mobile_menu .s2_main-navigation .dropdown > .dropdown-menu { opacity: 1; visibility: visible; } .s2-mobile_menu .s2_mobile_menu_content .s2_main-navigation .navbar-nav .dropdown-menu { border: none; display: none; -webkit-transition: none; -o-transition: none; transition: none; -webkit-box-shadow: none; box-shadow: none; padding: 5px 0; width: 100%; border-top: 1px solid #dcdcdc; } .s2-mobile_menu .s2_mobile_menu_content .s2_main-navigation .navbar-nav .dropdown-menu li { border: none; padding: 0 20px; line-height: 1; } .s2-mobile_menu .s2_mobile_menu_close { color: #d60606; cursor: pointer; top: 15px; left: 15px; font-size: 20px; position: absolute; } .s2-mobile_menu .dropdown { position: relative; } .s2-mobile_menu .dropdown .dropdown-btn { position: absolute; top: 0; right: 0; height: 30px; padding: 5px 10px; } .s2-mobile_menu .dropdown .dropdown-btn:before { content: ""; position: absolute; height: 100%; width: 1px; top: 0; left: 0; background-color: #dcdcdc; } @media screen and (max-width: 1140px) { .saas_two_footer_section .s2-newslatter_section { top: 0; max-width: inherit; margin-bottom: 50px; } .saas_two_footer_section { overflow: hidden; margin-top: 0; padding: 25px 0 65px; } .saas_two_footer_section:before { height: 75%; top: auto; bottom: 0; } } @media screen and (max-width: 1120px) { .saas_two_feature_section .s2-feature_right { padding-left: 0; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_icon { margin-right: 10px; } } @media screen and (max-width: 1110px) { .saas_two_main_header .s2-main-navigation .navbar-nav li { margin-right: 25px; } .saas_two_banner_section .s2-banner_area .banner_mockup { max-width: 630px; top: 30px; } } @media screen and (max-width: 1015px) { .saas_two_main_header .s2-main-navigation .navbar-nav li { margin-right: 25px; } .saas_two_banner_section .s2-banner_area .banner_mockup { max-width: 630px; top: 30px; } .saas_two_feature_section .s2-feature_right .s2-feature_list { padding: 22px 20px 20px; } } @media screen and (max-width: 991px) { .saas_two_banner_section:before { width: 100%; top: 0; height: 100%; } .saas_two_banner_section { padding-bottom: 0; z-index: 1; } .saas_two_banner_section .s2-banner_shape1 { z-index: -1; } .saas_two_banner_section .s2-banner_area .banner_mockup { position: static; } .saas_two_banner_section .s2-banner_content { max-width: 750px; margin: 0 auto; text-align: center; padding-bottom: 50px; } .about_content_s2 { max-width: 750px; margin: 0 auto; } .saas_two_main_header .s2-main-navigation { display: none; } .saas_two_banner_section .s2-banner_shape3 { top: 60px; } .saas_two_footer_section .s2-newslatter_section .newsletter_pattern_1 { display: none; } .saas_two_footer_section:before { background-size: cover; background-repeat: no-repeat; } .newsletter_pattern_4 { display: none; } .newsletter_pattern_5 { display: none; } .saas_two_footer_section { background-color: #1b0234; } .saas_two_footer_section .s2_footer_widget { margin-bottom: 30px; } .saas_two_footer_section .s2_footer_widget .s2_widget_title { padding-bottom: 20px; } .s2_mobile_menu_button { display: block; } .saas_two_main_header .saas_sign_up_btn { position: absolute; top: 3px; right: 70px; height: 40px; width: 120px; line-height: 40px; } .saas_two_main_header .saas_sign_up_btn a { padding-left: 0; } .saas_two_main_header .saas_sign_up_btn a:before { display: none; } .saas_two_about_section .about_content_s2 { padding: 30px 50px 30px 50px; } .saas_two_feature_section .s2-feature_right { padding-left: 0; margin-top: 40px; } .s2-pricing_section .s2-pricing_item { margin-bottom: 40px; } .saas_two_footer_section { padding-top: 0; } } @media screen and (max-width: 767px) { .saas_two_main_header .saas_sign_up_btn { top: -40px; } .saas_two_main_header.saas_2-menu-bg-overlay .saas_sign_up_btn { top: -42px; } .saas_two_service_section .service_content_box { max-width: 370px; margin: 0 auto; margin-bottom: 50px; } } @media screen and (max-width: 480px) { .saas_two_banner_section { padding-top: 180px; } .saas_two_banner_section .s2-banner_content h1 { font-size: 45px; } .saas_two_banner_section .s2-banner_content .banner_btn a { height: 40px; width: 140px; margin-right: 10px; line-height: 36px; } .saas_two_banner_section .s2-banner_content .banner_btn a i { font-size: 16px; margin-right: 5px; } .saas_two_banner_section .s2-banner_content { padding-bottom: 30px; } .saas_two_service_section { padding: 60px 0; } .saas_two_about_section { padding: 60px 0 30px; } .saas_two_about_section .about_content_s2 { padding: 20px 25px 20px 25px; } .saas_two_about_section:before { display: none; } .saas_two_about_section .s2-about_text_icon { padding-top: 0; margin-bottom: 30px; } .s2-about_img { margin-bottom: 30px; } .saas_two_feature_section { padding: 60px 0 25px; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_icon { margin: 0 auto; float: none; margin-bottom: 20px; } .saas_two_feature_section .s2-feature_right .s2-feature_list .s2-feature_text_box { text-align: center; max-width: 100%; } .saas_two_team_section { padding: 60px 0; } .s2-faq_section .s2_faq_content button { padding-right: 20px; } .s2-faq_section { padding: 60px 0 25px; } .s2-pricing_section { padding: 60px 0 40px; } .saas_two_section_title h2 { font-size: 30px; } } @media screen and (max-width: 420px) { .saas_two_section_title h2 { font-size: 30px; } .saas_two_service_section .service_content { padding-top: 40px; } .saas_two_about_section .s2-about_text_icon .s2-about_text h3 { font-size: 30px; } .saas_two_about_section .s2-about_text_icon { margin-bottom: 15px; } .saas_two_feature_section .s2-feature_text h2 { font-size: 30px; } .saas_two_feature_section .s2-feature_text { padding: 20px 0 0 0; } .saas_two_feature_section .s2-feature_text p { padding-bottom: 25px; } .integration_section .integration_text { padding-right: 0; } .integration_section .integration_text h2 { font-size: 30px; } .s2-faq_section .s2_faq_content { padding-top: 40px; } .s2-pricing_section .s2-pricing_content { padding-top: 40px; } .saas_two_footer_section { padding-bottom: 30px; } .saas_two_footer_section .s2-newslatter_section .s2-newslatter-form button { width: 100px; } .s2-pricing_section .s2-pricing_item .s2-pricing_list li { padding: 18px 20px 16px 20px; } .s2-pricing_section .s2-pricing_item .s2-pricing_price .s2-pricing_text strong { font-size: 40px; } .saas-classic-scrollup { width: 40px; height: 40px; right: 10px; line-height: 40px; } .saas_two_feature_section .s2-feature_right .s2-feature_list:hover { margin-left: 0; } .saas_two_main_header .saas_sign_up_btn { right: 55px; } } @media screen and (max-width: 380px) { .saas_two_banner_section .s2-banner_content h1 { font-size: 36px; } .saas_two_about_section .s2-about_text_icon .s2-about_text h3 { font-size: 26px; } } @media screen and (max-width: 320px) { .saas_two_banner_section .s2-banner_content h1 { font-size: 34px; } .saas_two_section_title h2 { font-size: 26px; } .saas_two_about_section .s2-about_text_icon .s2-about_text h3 { font-size: 24px; } }