@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Noto+Serif+KR:wght@200..900&display=swap'); /* Css For Appway */ /*** ==================================================================== Reset ==================================================================== ***/ * { margin:0px; padding:0px; border:none; outline:none; } /*** ==================================================================== Global Settings ==================================================================== ***/ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('/themes/pro/kbgolf/resources/images/pretendard/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-Light.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/kbgolf/resources/images/pretendard/Pretendard-Black.woff') format('woff'); font-weight: 900; font-display: swap; } :root { --black : #212121; --font-default : 'Pretendard', 'Roboto', 'Noto Sans KR', sans-serif; --noto-serif : "Noto Serif KR", serif; --fontawesome: Font Awesome 6 Free; --primary : #4F9786; --dark : #333; --border : #ededed; --input-border: #ddd; --basic: #4F9786; --chalk: #f5f5f5; --gray1: #bcbcbd; --red: #ff3838; --teal : #008080; --teal-dark : #065b5b; --bs-gutter-x: 24px; --btm-space : 100px; --side-space : 15px; --container-w : 1200px; } body {font-family:var(--font-default)!important; font-size:18px; color:#525252; line-height:1.3; font-weight:400; background:#ffffff; background-size:cover; background-repeat:no-repeat; background-position:center top; -webkit-font-smoothing: antialiased; } @media (min-width:1200px) { .container { max-width: 1200px; padding: 0px 15px; } } .large-container{ max-width: 1600px; padding: 0px 15px; margin: 0 auto; } .container-fluid{ padding: 0px; } .auto-container{ position:static; max-width:1200px; padding:0px 15px; margin:0 auto; } .small-container{ max-width:680px; margin:0 auto; } .boxed_wrapper{ position: relative; overflow-x: hidden; margin: 0 auto; width: 100%; min-width: 300px; } a{color:#525252; text-decoration:none; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } a:hover{ color:var(--priamry); text-decoration:none; outline:none; } ul,li{ list-style:none; padding:0px; margin:0px; } input {transition: all 500ms ease;} input, select, textarea, .form-control {height:60px; padding:18px; background:#fff; border:1px solid #ddd; border-radius:10px;} select {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; background: url(/public/themes/kbgolf/pro/resources/images/arw_select.svg) no-repeat 98% 50%;} textarea::-webkit-scrollbar-thumb { background-color:#b1b1b1; border:8px solid transparent; border-radius: 50px; background-clip: padding-box; } textarea::-webkit-scrollbar { width:22px; } button:focus, input:focus, textarea:focus{ outline: none; box-shadow: none; transition: all 500ms ease; } p{ position: relative; margin-bottom: 0px; font-style: normal; transition: all 500ms ease; } h1,h2,h3,h4,h5,h6 { position:relative; /*font-family: 'Ubuntu', sans-serif;*/ font-weight: 400; margin: 0px; transition: all 500ms ease; } .centred{ text-align: center; } .pull-left{ float: left; } .pull-right{ float: right; } figure{ margin: 0px; } img { display: inline-block; max-width: 100%; height: auto; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } .form-select { display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; border: 1px solid #ced4da; border-radius: .25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none } @keyframes pulse { 50% { box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1); } } @keyframes pulse-2 { 50% { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2), 0 0 0 40px rgba(0, 0, 0, 0.1); } } /** button **/ .btn_wrap {display:flex; flex-flow:row wrap; align-items: center; width:100%;} .btn {width:100%; max-width:120px; height:60px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 5px;} .btn_primary, .btn-primary, .btn_basic {background:#2a7c68; color:#fff;} .btn_primary:hover, .btn-primary:hover, .btn_basic:hover {background:#337062; color:#fff;} .btn_can {background:#e9ebeb; color:#575757;} .btn_can:hover {background:#ddd;} .btn_dark {background:#333; color:#fff;} .btn_dark:hover {background:#525252;} .btn-check:focus+.btn, .btn:focus {outline: 0; box-shadow:none;} .btn_mid {max-width:100px; height:42px;} /*페이지네이션 : 지워도 됨?*/ .pagination{ position: relative; display: block; } .pagination li{ display: inline-block; margin: 0px 6px; } .pagination li a{ position: relative; display: inline-block; font-size: 16px; height: 40px; width: 40px; line-height: 38px; font-weight: 500; border: 1px solid #bdbdbd; border-radius: 50%; text-align: center; color: #777; background: transparent; transition: all 500ms ease; } .pagination li a:hover, .pagination li a.active{ color: #fff; border-color: #4527a4; background: #4527a4; } .pagination li:last-child a, .pagination li:first-child a{ background: #222222; border-color: #222222; color: #fff; } .sec-pad{ padding: 154px 0px 120px 0px; } .sec-pad-two{ padding: 100px 0px !important; } .sec-pad-three{ padding: 200px 0px !important; } .sec-pad-four{ padding: 100px 0px 70px 0px !important; } .preloader{ position: fixed; left:0px; top:0px; height:100%; width: 100%; z-index:999999; background-color:#4527a4; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.gif); } .scroll-top { width: 50px; height: 50px; line-height: 50px; position: fixed; bottom: 105%; right:20px; font-size: 16px; z-index: 99; color: #ffffff; text-align: center; cursor: pointer; background: #222; transition: 1s ease; } .scroll-top:hover{ background: #4527a4; -webkit-box-shadow: 2px 2px 0px #222; -ms-box-shadow: 2px 2px 0px #222; box-shadow: 2px 2px 0px #222; } .scroll-top.open {bottom:20px;} .scroll-top span{ color: #fff; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } /*퀵메뉴*/ .quick_kbgolf { position: fixed !important; right: 30px !important; top: 50% !important; transform: translate(0, -50%) !important; z-index: 9999 !important; background-color:none!important; padding:0!important; border-radius:0!important; border:none !important; } .quick_kbgolf li {margin-bottom:6px; background:#fff; border-radius:10px; overflow:hidden; font-size:14px; text-align:center; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.1);} .quick_kbgolf li:first-child, .quick_kbgolf li:last-child {display:none;} .quick_kbgolf li:nth-child(3) {padding:12px 5px; background:#41B649; color:#fff!important;} .quick_kbgolf li:nth-child(4) {padding:12px 5px; background:#FAE100; color:#3E2A2E!important;} .quick_kbgolf dt {margin:0; padding:12px 5px; background:#387766; color:#fff; font-weight:700;} .quick_kbgolf dd {margin:0; padding:12px 5px 0; background:#fff; color:#666; font-weight:700; letter-spacing:-1px;} .quick_kbgolf dd strong {display:block; color:var(--black); font-size:16px;} .quick_kbgolf button {background:none; color:inherit;} .quick_kbgolf p {margin-top:6px;} @media only screen and (max-width:991px){ .dabory-quick-B {right: 0!important; left: 0; top: auto!important; bottom: 0; transform: translate(0, 0) !important; border: none!important; border-top: 1px solid #e1e1e1!important; border-radius: 0!important; padding: 0px 7px!important; box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);} .dabory-quick-B ul {display:flex;} .dabory-quick-B li {flex:auto; border-bottom:none!important;} .dabory-quick-B li:first-of-type {display:none;} .dabory-quick-B li:last-of-type {position:absolute; top:-60px; right:0;} .dabory-quick-B ul > li .ico.ico-bottom, .dabory-quick-B ul > li .ico.ico-top {width: 40px!important; height: 40px!important; background-color: #1c2f5e; border-radius: 50px; background-repeat: no-repeat; background-position: center; background-image: url(image/r_quick_ico1_mob.png) !important;} .dabory-quick-B ul > li img {width:20px!important; height:20px!important;} .quick_kbgolf {border-top:none!important; box-shadow:none!important;} .quick_kbgolf li {display:flex; justify-content:center; margin:0 2px;} .quick_kbgolf li:nth-child(2) { justify-content:flex-start;} .quick_kbgolf dl {display:flex; height:100%;} .quick_kbgolf dt {display:flex; align-items:center; padding:10px 20px;} .quick_kbgolf dd {display:flex; flex-direction:column; justify-content:center; padding:10px 20px; text-align:left;} } .sec-title{position: relative; display: block;} .sec-title.center{text-align: center;} .sec-title h2{position: relative; display: block; margin-bottom: 0; padding-bottom: 0; font-size: 36px; line-height: 48px; color: #222222; font-weight:700; word-break:keep-all;} .sec-title h2:before{ position: absolute; content: ''; background: #cccccc; width: 130px; height: 2px; left: 0px; bottom: 0px; } .sec-title.center h2:before, .sec-title.center h2:after{ left: 50%; transform: translateX(-50%); } .sec-title h2:after{ position: absolute; content: ''; background: #777777; width: 45px; height: 4px; left: 0px; bottom: 0px; transition: all 500ms ease; -webkit-mask-image: linear-gradient(-75deg, rgba(244,55,55,0.6) 50%, #f43737 50%, rgba(0,0,0,1) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite; } .sec-title p{ position: relative; display: block; font-size: 16px; line-height: 30px; color: #777; margin: 0px; } .sec-title.center h2, .sec-title.center p{ text-align: center; } .mainTitle h2:before, .mainTitle h2:after {display:none;} .mainTitle p {color:#7d8be1; font-size:18px;} .lineTitle {padding-bottom:30px;} .lineTitle:before{ position: absolute; content: ''; background: #cccccc; width: 140px; height: 2px; left: 0px; bottom: 0px; } .lineTitle:before, .lineTitle:after{ left: 50%; transform: translateX(-50%); } .lineTitle:after{ position: absolute; bottom:0; content: ''; background: #777777; width: 45px; height: 4px; transition: all 500ms ease; -webkit-mask-image: linear-gradient(-75deg, rgba(244,55,55,0.6) 50%, #f43737 50%, rgba(0,0,0,1) 70%); -webkit-mask-size: 200%; animation: shine 2s infinite; } .margin_left_30{ margin-left: 30px !important; } .margin_right_30{ margin-right: 30px !important; } .margin_bottom_30{ margin-bottom: 30px !important; } .margin_left_100{ margin-left: 100px !important; } /*** ==================================================================== Home-Page-One ==================================================================== ***/ /*메뉴 탑*/ .nav_top {display:flex; justify-content:flex-end; width:100%; padding-top:15px; font-size:14px;} .nav_top > div {margin-left:20px; opacity:1} .nav_top > div a, .nav_top .navigation > li > a {display:flex; align-items:center; color:#f5dea9; font-size: 14px; font-weight: 400;} .nav_top > div i {margin-right:5px;} .nav_top .cart-box-outer a, .nav_top .search-box-outer button, .nav_top .wish-box-outer a {display:flex; justify-content:center; align-items:center; height:30px; width:30px; background:rgba(255, 255, 255, 0.6); border-radius:50%; color:#4527a4;} .nav_top .cart-box-outer, .nav_top .search-box-outer, .nav_top .wish-box-outer {position:relative; opacity:1;} .nav_top .cart-box-outer i, .nav_top .search-box-btn i, .nav_top .wish-box-outer i {margin-right:0; font-size:14px;} .nav_top .cart-box-outer .number, .nav_top .wish-box-outer .number {position:absolute; top:-3px; right:-3px; display:flex; align-items:center; justify-content:center; width:16px; height:16px; background:#bf6911; border-radius:50%; color:#fff; font-size:11px;} .nav_top .search-box-outer {margin-left:15px;} .nav_top .navigation {margin:0; padding:0;} .nav_top .navigation > li {margin-right:0!important; padding:0; z-index:110;} .nav_top .navigation > li:first-child {margin-left:20px!important; } .nav_top .navigation > li:first-child ul {width:210px;} .nav_top .navigation .dropdown:hover > ul {display:block!important;} .nav_top .navigation .dropdown ul {display:none!important; width:140px; padding:10px 0px; border-radius:3px;} .nav_top .navigation .dropdown ul li {padding:0 10px;} .nav_top .navigation .dropdown ul li:first-child {position:relative;} .nav_top .navigation .dropdown ul li:first-child:before {content:""; position:absolute; top: -14px; left: 20px; display:block; width:10px; height:10px; background:#fff; transform:rotate(45deg);} .nav_top .navigation .dropdown ul a {padding:3px 0; color:#3d384b;} .nav_right {margin-left:60px;} .menu-area .mobile-nav-toggler { position: relative; float: right; font-size: 40px; line-height: 50px; cursor: pointer; color: #3786ff; display: none; } .menu-area .mobile-nav-toggler .icon-bar{ position: relative; height: 2px; width: 30px; display: block; margin-bottom: 5px; background-color: #4527a4; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .menu-area .mobile-nav-toggler .icon-bar:last-child{ margin-bottom: 0px; } .main-menu .navigation .megamenu{ width: 500px; } .main-menu .navigation .megamenu:before{ position: absolute; content: ''; background: #e5e5e5; width: 2px; height: calc(100% - 60px); left: 42%; top: 30px; } .main-menu .navigation>li> .megamenu li { position: relative; display: block; width: 50%; float: left; } /*헤더 메뉴*/ .main-header .menu-area .btn-box{ position: relative; float: left; margin: 65px 0px 0px 70px; } .main-header .menu-area .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 14px; color: #4527a4; line-height: 30px; background: #fff; padding: 5px 30px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .main-header .menu-area .btn-box a:before{ position: absolute; content: ''; top: 0px; bottom: 0px; left: 0px; right: -50px; z-index: -1; border-bottom: 50px solid #4527a4; border-right: 50px solid transparent; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .main-header .menu-area .btn-box a:after{ position: absolute; content: ''; top: 0px; right: 0px; bottom: 0px; left: -50px; z-index: -1; border-left: 40px solid transparent; border-bottom: 50px solid #4527a4; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform: translateX(100%); transform: translateX(100%); } .main-header .menu-area .btn-box a:hover::before { -webkit-transform: translateX(-40%); transform: translateX(-40%); } .main-header .menu-area .btn-box a:hover::after { -webkit-transform: translateX(40%); transform: translateX(40%); } .main-header .menu-area .btn-box a:hover{ background: #4527a4; color: #fff; } .main-header .sub_header {background:#2f27a4;} .main-header .sub_header .logo-box img {width:180px;} /** mobile-menu **/ .nav-outer .mobile-nav-toggler{ position: relative; float: right; font-size: 40px; line-height: 50px; cursor: pointer; color:#3786ff; display: none; } .mobile-menu{ position: fixed; right: 0; top: 0; width: 300px; padding-right:30px; max-width:100%; height: 100%; opacity: 0; visibility: hidden; z-index: 999999; } .mobile-menu .navbar-collapse{ display:block !important; } .mobile-menu .nav-logo{ position:relative; width:160px; padding:30px 25px; text-align:left; } .mobile-menu-visible{ overflow: hidden; } .mobile-menu-visible .mobile-menu{ opacity: 1; visibility: visible; } .mobile-menu .menu-backdrop{ position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 1; background:#000; -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; } .mobile-menu-visible .mobile-menu .menu-backdrop{ opacity: 0.70; visibility: visible; -webkit-transition:all 0.7s ease; -moz-transition:all 0.7s ease; -ms-transition:all 0.7s ease; -o-transition:all 0.7s ease; transition:all 0.7s ease; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .mobile-menu .menu-box{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; background: #000; padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; border-radius: 0px; -webkit-transform: translateX(101%); -ms-transform: translateX(101%); transform: translateX(101%); } .mobile-menu-visible .mobile-menu .menu-box{ opacity: 1; visibility: visible; -webkit-transition:all 0.7s ease; -moz-transition:all 0.7s ease; -ms-transition:all 0.7s ease; -o-transition:all 0.7s ease; transition:all 0.7s ease; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .mobile-menu .close-btn{ position: absolute; right: 10px; top: 10px; line-height: 30px; width: 24px; text-align: center; font-size: 16px; color: #ffffff; cursor: pointer; z-index: 10; -webkit-transition:all 0.9s ease; -moz-transition:all 0.9s ease; -ms-transition:all 0.9s ease; -o-transition:all 0.9s ease; transition:all 0.9s ease; } .mobile-menu-visible .mobile-menu .close-btn{ -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .mobile-menu .close-btn:hover{ color:#4527a4; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } .mobile-menu .navigation{ position: relative; display: block; width: 100%; float: none; } .mobile-menu .navigation li{ position: relative; display: block; border-top: 1px solid rgba(255,255,255,0.10); } .mobile-menu .navigation:last-child{ border-bottom: 1px solid rgba(255,255,255,0.10); } .mobile-menu .navigation li > ul > li:first-child{ border-top: 1px solid rgba(255,255,255,0.10); } .mobile-menu .navigation li > a{ position: relative; display: block; line-height: 24px; padding: 10px 25px; font-size: 15px; font-weight: 500; color: #ffffff; text-transform: uppercase; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li ul li > a{ font-size: 16px; margin-left: 20px; text-transform: capitalize; } .mobile-menu .navigation li > a:before{ content:''; position:absolute; left:0; top:0; height:0; border-left:5px solid #4527a4; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .navigation li.current > a, .mobile-menu .navigation li > a:hover{ color:var(--primary); } .mobile-menu .navigation li.current > a:before{ height:100%; } .mobile-menu .navigation li.dropdown .dropdown-btn{ position:absolute; right:6px; top:6px; width:32px; height:32px; text-align:center; font-size:16px; line-height:32px; color:#ffffff; cursor:pointer; border-radius:2px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; z-index:5; } .mobile-menu .navigation li.dropdown .dropdown-btn.open{ -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } .mobile-menu .navigation li > ul, .mobile-menu .navigation li > ul > li > ul{ display: none; } .mobile-menu .social-links{ position:relative; padding:30px 25px; } .mobile-menu .social-links li{ position:relative; display:inline-block; margin:0px 10px 10px; } .mobile-menu .social-links li a{ position:relative; line-height:32px; font-size:16px; color:#ffffff; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .social-links li a:hover{ color:#00aeef; } div#mCSB_1_container{ top: 0px !important; } .mobile-menu .contact-info { position: relative; padding: 80px 30px 20px 30px; } .mobile-menu .contact-info h4 { position: relative; font-size: 20px; color: #ffffff; font-weight: 700; margin-bottom: 20px; } .mobile-menu .contact-info ul li { position: relative; display: block; font-size: 15px; color: rgba(255,255,255,0.80); margin-bottom: 3px; } .mobile-menu .contact-info ul li a{ color: rgba(255,255,255,0.80); } .mobile-menu .contact-info ul li a:hover{ text-decoration: underline; } .mobile-menu .contact-info ul li:last-child{ margin-bottom: 0px; } .mobile-menu .nav_top {flex-flow:row wrap; justify-content: flex-start; padding-top: 0;} .mobile-menu .navigation {width:100%;} .mobile-menu .nav_top .navigation {margin-top:10px; background:#29120e;} .mobile-menu .nav_top .navigation li > a {color: #fff; font-weight:300; font-size: 14px;} .mobile-menu .nav_top .navigation > li:first-child {margin-left:0!important;} .mobile-menu .nav_top .navigation .dropdown ul {max-width:100%; padding: 0;} .mobile-menu .nav_top .navigation li.dropdown .dropdown-btn.open {background: rgba(255,255,255,0.10);} .mobile-menu .nav_top .navigation .dropdown ul li:first-child:before {display:none;} .mobile-menu .nav_top .navigation .dropdown ul a {padding:8px 0; padding-left:10px; color:#d5cac9;} /** banner-section **/ .banner-section{ position: relative; background-color: #fff; padding: 330px 0px 285px 0px; overflow-x:hidden; } .banner-section > .container{max-width: 1330px!important;} .banner-section .bg-layer { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; background-size: cover; background-position: center bottom; /*animation-name: slideInDown; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInDown; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInDown; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInDown; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; */ } .banner-section .pattern-bg{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-section .content-box{ position: relative; display: block; margin-left: 75px; z-index: 1; } .banner-section .content-box h1{ position: relative; display: block; margin-top:20px; font-family: var(--gmarket); font-size: 82px; font-weight: 700; line-height: 73px; color: #fff; margin-bottom:10px; } .banner-section .content-box h2 {font-family: var(--pretendard); font-size:42px; font-weight: 700; color: #fff;} .banner-section .content-box h3 {font-family: var(--pretendard); font-size:42px; font-weight: 700; color: #fff; word-break:keep-all; line-height:1.2;} .banner-section .content-box h1 strong {color: #71e1f5;} .banner-section .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 36px; color: #fff; margin-bottom: 60px; } .banner-section .image-box{ position: relative; margin-right:-270px; z-index: 1; } .banner-section .image-box img {max-width:none;} .banner-section .image-box .image-1{ position: absolute; right:-295px; top: -30px; } .banner-section .image-box .image-2{ position: absolute; right: 0px; top: -60px; } .float-bob-y { animation-name: float-bob-y; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float-bob-y; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float-bob-y; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob-y; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob-y; -o-animation-duration: 2s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .float-bob-x{ animation-name: float-bob-x; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float-bob-x; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float-bob-x; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob-x; -ms-animation-duration: 15s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob-x; -o-animation-duration: 15s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } /** feature-section **/ .feature-section{ position: relative; padding: 220px 0px 0px 0px; } #iamge_block_01 .image-box{ position: relative; margin-top: 35px; } #iamge_block_01 .image-box .image{ position: relative; display: inline-block; border-radius: 60px; box-shadow: 5px 15px 27px rgba(0, 0, 0, 0.2); } #content_block_01 .content-box{ position: relative; display: block; } #content_block_01 .content-box .sec-title{ margin-bottom: 66px; } #content_block_01 .content-box .inner-box .single-item{ position: relative; display: block; overflow: hidden; margin-bottom: 30px; border-radius: 10px; padding: 30px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } #content_block_01 .content-box .inner-box .single-item .bg-layer { position: absolute; content: ""; top: 0; left: -101%; height: 100%; width: 100%; border-radius: 10px; -webkit-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; background-size: 101% 101%; } #content_block_01 .content-box .inner-box .single-item .bg-layer:before{ position: absolute; content: ''; background: rgba(69, 39, 164, 0.8); width: 100%; height: 100%; left: 0px; top: 0px; border-radius: 10px; } #content_block_01 .content-box .inner-box .single-item:hover .bg-layer{ left: 0px; } #content_block_01 .content-box .inner-box .single-item .icon-box{ position: relative; display: inline-block; font-size: 65px; line-height: 65px; color: #4527a4; margin-bottom: 34px; transition: all 500ms ease; } #content_block_01 .content-box .inner-box .single-item:hover .icon-box{ color: #fff; } #content_block_01 .content-box .inner-box .single-item h5{ position: relative; display: block; font-size: 18px; line-height: 28px; color: #555555; font-weight: 500; margin-bottom: 19px; transition: all 500ms ease; } #content_block_01 .content-box .inner-box .single-item h5 a{ position: relative; display: inline-block; color: #555555; } #content_block_01 .content-box .inner-box .single-item:hover h5, #content_block_01 .content-box .inner-box .single-item:hover h5 a, #content_block_01 .content-box .inner-box .single-item:hover .text{ color: #fff; } #content_block_01 .content-box .inner-box .single-item .text{ position: relative; transition: all 500ms ease; } /** feature-style-two **/ .feature-style-two{ position: relative; padding: 110px 0px 100px 0px; } .feature-block-one .inner-box{ position: relative; display: block; overflow: hidden; background: #fff; padding: 68px 30px 62px 30px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); z-index: 1; transition: all 500ms ease; } .feature-block-one:hover .inner-box:before { opacity: 1; transform: translate(0% , 0%); transition: all 0.9s linear; } .feature-block-one .inner-box:before { content: ''; width: 493px; height: 493px; background: #6046b1; border-radius: 50%; position: absolute; top: -330px; left: -60px; z-index: -1; transform: translate(-50% , -50%); opacity: 0; } .feature-style-two .feature-block:nth-child(2){ padding-top: 80px; } .feature-style-two .feature-block-one .inner-box .icon-box{ position: relative; display: inline-block; font-size: 50px; line-height: 50px; color: #fe5681; margin-bottom: 62px; padding: 37px 64px 35px 53px; z-index: 1; } .feature-style-two .feature-block:nth-child(2) .feature-block-one .inner-box .icon-box{ color: #4527a4; } .feature-style-two .feature-block:last-child .feature-block-one .inner-box .icon-box{ color: #48d019; } .feature-style-two .feature-block-one .inner-box .icon-box .bg-layer{ position: absolute; width: 165px; height: 146px; left: 0px; top: 0px; background-repeat: no-repeat; z-index: -1; } .feature-block-one .inner-box h5{ position: relative; display: block; font-size: 18px; line-height: 28px; color: #222; font-weight: 500; margin-bottom: 18px; transition: all 500ms ease; } .feature-block-one .inner-box h5 a{ position: relative; display: inline-block; color: #222; } .feature-block-one .inner-box .text{ position: relative; display: block; transition: all 500ms ease; } .feature-block-one:hover .inner-box .text, .feature-block-one:hover .inner-box h5, .feature-block-one:hover .inner-box h5 a{ color: #fff; } .feature-block-one .inner-box .hover-content{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #4527a4; z-index: -3; opacity: 0; transition: all 0.3s linear; } .feature-block-one .inner-box .hover-content:before { content: ''; width: 493px; height: 493px; background: #573cad; border-radius: 50%; position: absolute; top: -260px; left: -60px; z-index: 1; transform: translate(-50% , -50%); opacity: 0; } .feature-block-one .inner-box .hover-content:after { content: ''; width: 602px; height: 602px; background: #4e32a9; border-radius: 50%; position: absolute; top: -295px; left: -110px; z-index: -1; transform: translate(-50% , -50%); opacity: 0; } .feature-block-one:hover .hover-content { opacity: 1; } .feature-block-one:hover .hover-content:before { opacity: 1; transform: translate(0% , 0%); transition: all 0.9s linear; } .feature-block-one:hover .hover-content:after { opacity: 1; transform: translate(0% , 0%); transition: all 1.3s linear; } /** feature-style-three **/ .feature-style-three{ position: relative; background: #f9f9f9; padding: 100px 0px 210px 0px; } .feature-style-three .inner-box .content-box{ position: relative; display: block; } .feature-style-three .inner-box:first-child{ margin-bottom: 355px; } #content_block_02 .content-box{ margin-right: 100px; padding-top: 137px; padding-bottom: 54px; } #content_block_03 .content-box{ margin-left: 100px; padding-top: 105px; padding-bottom: 88px; } #content_block_02 .content-box .text, #content_block_03 .content-box .text{ position: relative; display: block; margin-bottom: 63px; } #content_block_02 .content-box p, #content_block_03 .content-box p{ display: block; margin-bottom: 30px; } #content_block_02 .content-box p:last-child, #content_block_03 .content-box p:last-child{ margin-bottom: 0px; } #content_block_02 .content-box .sec-title h2, #content_block_03 .content-box .sec-title h2{ margin-bottom: 57px; } #content_block_02 .content-box .btn-box, #content_block_03 .content-box .btn-box{ position: relative; display: flex; } #iamge_block_02 .image-box{ position: relative; display: block; min-height: 638px; z-index: 1; } #iamge_block_02 .image-box .bg-layer{ position: absolute; width: 650px; height: 860px; left: -10px; top: -75px; background-repeat: no-repeat; } #iamge_block_02 .image-box .image-1{ position: absolute; top: 0px; right: 25px; z-index: 1; } #iamge_block_02 .image-2{ position: absolute; top: 200px; left: 70px; } #iamge_block_02 .image, #iamge_block_03 .image{ box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } #iamge_block_03 .image .image-box{ position: relative; display: block; min-height: 640px; z-index: 1; } #iamge_block_03 .image-box .bg-layer{ position: absolute; width: 680px; height: 790px; left: -75px; top: -65px; background-repeat: no-repeat; } #iamge_block_03 .image-box .image-1{ position: absolute; top: 0px; right: 45px; z-index: 1; } #iamge_block_03 .image-box .image-2{ position: absolute; top: 50px; left: 0px; } /** video-section **/ .video-section{ position: relative; overflow: hidden; background: #f9f9f9; padding: 130px 0px; } .video-section .bg-column{ position: absolute; left: 0px; top: 0px; width: 60%; height: 100%; border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-size: cover; background-repeat: no-repeat; } .video-section .bg-column:before{ position: absolute; content: ''; background: rgba(69, 39, 164, 0.9); width: 100%; height: 100%; left: 0px; top: 0px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .video-section .video-inner{ position: relative; padding: 195px 0px; margin-left: 140px; } .video-section .video-inner a { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 144px; border: 6px solid #fff; background: transparent; font-size: 60px; color: #fff; text-align: center; border-radius: 50%; } .ripple { position: absolute; left: -6px; top: -6px; height: 150px; width: 150px; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.64); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.64); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.64); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.64); -webkit-animation: ripple 5s infinite; animation: ripple 5s infinite; } .ripple:before { -webkit-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; left: 0; top: 0; -webkit-box-shadow: none; box-shadow: none; } .ripple:after { -webkit-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; left: 0; top: 0; -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes ripple { 70% { -webkit-box-shadow: 0 0 0 50px rgba(255, 255, 255, .0); box-shadow: 0 0 0 50px rgba(255, 255, 255, .0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); } } @keyframes ripple { 70% { -webkit-box-shadow: 0 0 0 50px rgba(255, 255, 255, .0); box-shadow: 0 0 0 50px rgba(255, 255, 255, .0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); } } #content_block_04 .content-box{ position: relative; display: block; background: #fff; margin-left: 70px; padding: 90px 30px 100px 100px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } #content_block_04 .content-box:before{ position: absolute; content: ''; background: #fff; width: 50000%; height: 100%; left: 0px; top: 0px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); border-top-left-radius: 50px; border-bottom-left-radius: 50px; } #content_block_04 .content-box .text{ position: relative; margin-bottom: 40px; } #content_block_04 .content-box .sec-title h2{ margin-bottom: 55px; } /** pricing-section **/ .pricing-section{ position: relative; padding: 110px 0px 100px 0px; } .tabs-box .tab{ position:relative; display:none; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; } .tabs-box .tab.active-tab{ display:block; } .tabs-box .tab{ transform:scale(0.9,0.9) translateY(0px); } .tabs-box .tab.active-tab{ transform:scale(1) translateY(0px); } .pricing-section .tab-btn-box .tab-btns { position: relative; display: block; } .pricing-section .tab-btn-box .tab-btns:before { position: absolute; left: 0; right: 0; margin: 0 auto; height: 40px; width: 90px; content: ""; border-radius: 30px; border: 1px solid #4527a4; } .pricing-section .tab-btn-box .tab-btns li{ position: relative; display: inline-block; padding-right: 70px; min-width: 120px; text-align: right; font-size: 16px; line-height: 40px; font-weight: 500; color: #4527a4; cursor: pointer; transition: all 500ms ease; } .pricing-section .tab-btn-box .tab-btns li:last-child{ padding-right: 0; padding-left: 57px; text-align: left; } .pricing-section .tab-btn-box .tab-btns li.active-btn:before { right: 15px; } .pricing-section .tab-btn-box .tab-btns li:before { position: absolute; top: 5px; height: 30px; width: 30px; background-color: #4527a4; border-radius: 30px; content: ""; right: -37px; -webkit-box-shadow: 0 4px 20px rgba(44,44,56,.30); box-shadow: 0 4px 20px rgba(44,44,56,.30); -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .pricing-section .tab-btn-box .tab-btns li:last-child:before{ display: none; } .pricing-section .tabs-content{ position: relative; margin-bottom: 120px; } .pricing-block-one .pricing-table{ position: relative; display: block; border: 1px solid #d7d7d7; transition: all 500ms ease; } .pricing-block-one:hover .pricing-table{ border-color: #4527a4; } .pricing-block-one .pricing-table .table-header .title{ position: relative; font-size: 24px; line-height: 32px; font-weight: 500; color: #777777; text-transform: uppercase; padding: 34.5px 15px; } .pricing-block-one .pricing-table .table-header .price{ position: relative; display: block; font-size: 48px; line-height: 55px; font-weight: 700; color: #4527a4; background: #f1edff; padding: 22px 15px 6px 15px; transition: all 500ms ease; } .pricing-block-one:hover .pricing-table .table-header .price{ background: #4527a4; color: #fff; } .pricing-block-one .pricing-table .table-header .price:before{ position: absolute; content: "$"; font-size: 24px; line-height: 30px; font-weight: 500; color: #222; left: 75px; top: 18px; transition: all 500ms ease; } .pricing-block-one:hover .pricing-table .table-header .price span, .pricing-block-one:hover .pricing-table .table-header .price:before{ color: #fff; } .pricing-block-one .pricing-table .table-header .price span{ font-size: 18px; font-weight: 500; color: #777777; transition: all 500ms ease; } .pricing-section .pricing-column{ padding: 0px 40px; } .pricing-section .tabs-box{ margin: 0px -40px; } .pricing-block-one .pricing-table .table-content{ position: relative; padding: 37px 15px 20px 100px; text-align: left; min-height: 231px; } .pricing-block-one .pricing-table .table-content li{ position: relative; display: block; font-size: 16px; margin-bottom: 18px; padding: 0px 0px 0px 35px; } .pricing-block-one .pricing-table .table-content li:before{ position: absolute; content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-size: 16px; font-weight: 700; color: #4527a4; left: 0px; top: 0px; } .pricing-block-one .pricing-table .table-content li:last-child{ margin-bottom: 0px; } .pricing-block-one .pricing-table .table-footer{ position: relative; padding: 21px 15px 70px 110px; text-align: left; } .pricing-block-one .pricing-table .table-footer .theme-btn-two{ padding: 10px 40px; } .pricing-section .sec-title{ margin-bottom: 50px; } .pricing-section .tabs-content .tab .pricing-column .pricing-block-one .pricing-table .image{ position: absolute; width: 165px; height: 175px; left: -50px; bottom: -50px; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .pricing-section .tabs-content .tab .pricing-column:nth-child(2) .pricing-block-one .pricing-table .image{ width: 140px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .pricing-section .tabs-content .tab .pricing-column:last-child .pricing-block-one .pricing-table .image{ -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } /** testimonial-section **/ .testimonial-section{ position: relative; padding: 130px 0px 117px 0px; } .testimonial-section .testimonial-block-one{ position: relative; } .testimonial-section .testimonial-block .inner-box{ position: relative; background-color: #ffffff; padding: 0px 50px 50px 50px; text-align: center; z-index: 9; margin: 90px 0px 100px 0px; } .testimonial-section .testimonial-block .inner-box:before{ position: absolute; content: ''; background-color: rgba(255, 255, 255, 0.5); width: calc(100% - 80px); left: 40px; top: -25px; height: 100%; } .testimonial-section .testimonial-block-one:after, .testimonial-section .testimonial-block-one:before{ position: absolute; left: 30px; right: 30px; height: 100%; bottom: -30px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.5); content: ""; z-index: 1; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); } .testimonial-section .testimonial-block-one:before{ left: 60px; right: 60px; bottom: -60px; background-color: rgba(255, 255, 255, 0.3); z-index: -1; } .testimonial-section .testimonial-carousel .active .testimonial-block-one:before, .testimonial-section .testimonial-carousel .active .testimonial-block-one:after{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .testimonial-section .testimonial-carousel .active .testimonial-block-one:before{ -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .testimonial-section .testimonial-block .inner-box .image-box{ position: relative; display: inline-block; width: 125px; height: 125px; border-radius: 50%; border: 2px solid #fff; margin-bottom: 33px; margin-top: -88px; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); } .testimonial-section .testimonial-block .inner-box .image-box img{ position: relative; width: 100%; border-radius: 50%; } .testimonial-section .testimonial-block .inner-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 32px; } .testimonial-section .testimonial-block .inner-box .author-info h5{ position: relative; font-size: 18px; font-weight: 500; color: #4527a4; text-transform: uppercase; margin-bottom: 10px; padding-top: 33px; } .testimonial-section .testimonial-block .inner-box .author-info h5:before{ position: absolute; content: ''; background: #cccccc; width: 30px; height: 3px; left: 50%; top: 0px; transform: translateX(-50%); } .testimonial-section .testimonial-block .inner-box .author-info .designation{ position: relative; display: block; font-size: 18px; color: #aaaaaa; } .testimonial-section .owl-theme .owl-dots .owl-dot span { background: #959595; display: block; margin: 0px 5px 0px 5px; width: 10px; height: 10px; cursor: pointer; transition: all 500ms ease; } .testimonial-section .owl-theme .owl-dots .owl-dot.active span{ width: 40px; height: 4px; } .testimonial-section .owl-nav{ display: none; } .testimonial-section .sec-title{ margin-bottom: 62px; } .testimonial-section .image-layer{ position: absolute; left: 0px; top: -100px; width: 100%; height: 1145px; background-repeat: no-repeat; background-position: top center; background-size: cover; } /** download-section **/ .download-section{ position: relative; overflow: hidden; background: #4527a4; } .download-section .bg-layer{ position: absolute; width: 1280px; height: 345px; left: 0px; bottom: 0px; background-repeat: no-repeat; } #content_block_05 .content-box{ position: relative; display: block; padding: 165px 0px 175px 0px; } #content_block_05 .content-box .sec-title h2{ color: #fff; margin-bottom: 53px; } #content_block_05 .content-box .sec-title h2:after{ background: #fff; } #content_block_05 .content-box .text{ position: relative; color: #fff; font-size: 18px; line-height: 42px; margin-bottom: 47px; } #content_block_05 .content-box .download-btn a{ position: relative; display: inline-block; font-size: 20px; line-height: 21px; font-weight: 500; color: #fff; background: transparent; border: 2px solid #fff; border-radius: 10px; padding: 12px 21px 12px 80px; } #content_block_05 .content-box .download-btn a:hover{ background: #fff; color: #4527a4; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); } #content_block_05 .content-box .download-btn a span{ position: relative; display: block; font-size: 12px; } #content_block_05 .content-box .download-btn a i{ position: absolute; left: 30px; top: 14px; font-size: 36px; color: #fff; transition: all 500ms ease; } #content_block_05 .content-box .download-btn a:hover i{ color: #222; } #content_block_05 .content-box .download-btn .app-store-btn{ margin-right: 37px; } #iamge_block_04 .image-box{ position: relative; min-height: 595px; margin: 120px -55px 0px 30px; } #iamge_block_04 .image-box .image-1{ position: absolute; left: 0px; bottom: 0px; box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.2); border-top-right-radius: 50px; border-top-left-radius: 50px; z-index: 1; } #iamge_block_04 .image-box .image-2{ position: absolute; right: 0px; bottom: 0px; } /** news-section **/ .news-section{ position: relative; padding: 110px 0px 80px 0px; } .news-section .sec-title{ margin-bottom: 65px; } .news-block-one .inner-box{ position: relative; } .news-block-one .inner-box .image-box{ position: relative; background: #4527a4; overflow: hidden; } .news-block-one .inner-box .image-box img{ width: 100%; transition: all 500ms ease; } .news-block-one:hover .inner-box .image-box img{ transform: scale(1.1); opacity: 0.2; } .news-block-one .inner-box .lower-content{ position: relative; padding: 27px 0px; } .news-block-one .inner-box .lower-content .post-date{ position: relative; display: block; font-size: 16px; color: #777; margin-bottom: 16px; } .news-block-one .inner-box .lower-content .post-date i{ margin-right: 8px; } .news-block-one .inner-box .lower-content h3{ position: relative; display: block; font-size: 24px; line-height: 36px; font-weight: 500; color: #222; margin-bottom: 27px; } .news-block-one .inner-box .lower-content h3 a{ color: #222; } .news-block-one .inner-box .lower-content h3 a:hover{ color: #4527a4; } .news-block-one .inner-box .lower-content .link-btn a{ position: relative; display: inline-block; font-size: 18px; font-weight: 700; line-height: 18px; color: #4527a4; border-bottom: 2px solid #4527a4; } .news-block-one .inner-box .lower-content .link-btn a:hover{ color: #222; } /** subscribe-section **/ .subscribe-section{ position: relative; padding-bottom: 60px; } #content_block_06 .content-box .sec-title h2{ margin-bottom: 54px; } #content_block_06 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 44px; } #content_block_06 .content-box .subscribe-form .form-group{ position: relative; margin: 0px; } #content_block_06 .content-box .subscribe-form .form-group input[type='email']{ position: relative; width: 100%; height: 60px; border: 2px solid #dddddd; border-radius: 30px; font-size: 16px; margin-bottom: 30px; padding: 10px 40px; } #content_block_06 .content-box .subscribe-form .form-group input:focus{ border-color: #4527a4; } #content_block_06 .content-box .subscribe-form .form-group button{ padding: 15px 44px; } #content_block_06 .content-box{ position: relative; padding-top: 68px; } /** sidebar **/ .main-header .nav-box{ position:absolute; left: 33px; top: 10px; width:20px; color:#ffffff; font-size:28px; padding:24px 0px 23px; -webkit-transition:all 600ms ease; -moz-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; transition:all 600ms ease; } .main-header .nav-box:before{ position: absolute; content: ''; background: #4527a4; width: 260px; height: 260px; left: -160px; top: -135px; box-shadow: 0 0 0px 45px rgba(104, 157, 235, 0.4); border-radius: 50%; } .main-header .nav-box .nav-btn{ position:relative; cursor: pointer; } .main-header .nav-btn .icon{ position:relative; height:3px; width:20px; float:right; display:inline-block; margin-bottom:7px; background-color:#fff; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .xs-sidebar-group .xs-overlay{ left:0%; top:0; position:fixed; height:100%; opacity:0; width:100%; visibility:hidden; -webkit-transition:all .4s ease-in .8s; -o-transition:all .4s ease-in .8s; transition:all .4s ease-in .8s; cursor:url(../images/icons/cross-out.png), pointer; z-index: 999999; } .xs-sidebar-group.isActive .xs-overlay{ opacity:.9; visibility:visible; -webkit-transition:all .8s ease-out 0s; -o-transition:all .8s ease-out 0s; transition:all .8s ease-out 0s; right:100%; } .xs-sidebar-group .widget-heading{ position:absolute; top:0; right:0; padding:25px; } .xs-sidebar-widget{ position:fixed; left:-100%; top:0; bottom:0; width:100%; max-width:360px; z-index:999999; overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; background-color:#ffffff; -webkit-transition:all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; -o-transition:all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; transition:all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; visibility:hidden; opacity:0; } .xs-sidebar-group.isActive .xs-sidebar-widget{ opacity:1; visibility:visible; left:0; -webkit-transition:all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; -o-transition:all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; transition:all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; } .sidebar-textwidget{ padding:40px; } .close-side-widget{ color:#1768dd; display:block; } .sidebar-widget-container{ position:relative; top:150px; opacity:0; visibility:hidden; -webkit-transition:all .3s ease-in .3s; -o-transition:all .3s ease-in .3s; transition:all .3s ease-in .3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .xs-sidebar-group.isActive .sidebar-widget-container{ top:0px; opacity:1; visibility:visible; -webkit-transition:all 1s ease-out 1.2s; -o-transition:all 1s ease-out 1.2s; transition:all 1s ease-out 1.2s; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .xs-overlay{ position:absolute; top:0; left:0; height:100%; width:100%; opacity:.5; z-index:0; } .xs-bg-black{ background-color:#000000; } .xs-menu-tools>li{ display:inline-block; margin-right:15px; } .xs-menu-tools>li:last-child{ margin-right:0; } .xs-menu-tools>li>a{ color:#000000; text-decoration:none; } .sidebar-info-contents{ position:relative; } .close-side-widget{ position:relative; color:#4527a4; font-size:24px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .close-side-widget:hover{ color:#222; } .sidebar-info-contents .content-inner{ position:relative; } .sidebar-info-contents .content-inner .logo { padding:0px 0px 40px; } .sidebar-info-contents .content-inner .logo img{ display:inline-block; max-width:100%; } .sidebar-info-contents .content-inner .content-box{ position:relative; } .sidebar-info-contents .content-inner .content-box h4{ position:relative; font-size:20px; color:#222; font-weight:700; margin-bottom:20px; } .sidebar-info-contents .content-inner .content-box .text{ position:relative; font-size:15px; color: #777; margin-bottom:25px; } .sidebar-info-contents .content-inner .content-box .theme-btn-two{ padding: 10px 50px; } .sidebar-info-contents .content-inner .contact-info{ position:relative; margin-top:60px; } .sidebar-info-contents .content-inner .contact-info ul li{ position:relative; display: block; font-size:15px; color: #777; margin-bottom:3px; } .sidebar-info-contents .content-inner .contact-info ul li a{ color: #777; } .sidebar-info-contents .content-inner .contact-info ul li a:hover{ color: #4527a4; } .sidebar-info-contents .content-inner .contact-info h4{ position:relative; font-size:20px; color:#222; font-weight:700; margin-bottom:20px; } .sidebar-info-contents .content-inner .social-box{ position:relative; margin-top:20px; margin-bottom:30px; } .sidebar-info-contents .content-inner .social-box li{ position:relative; display:inline-block; margin-right:6px; transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; } .sidebar-info-contents .content-inner .social-box li a{ position:relative; width:36px; height:36px; color:#222222; z-index:1; font-size:13px; line-height:36px; text-align:center; border-radius:50%; display:inline-block; background: transparent; border: 1px solid #ededed; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .sidebar-info-contents .content-inner .social-box li a:hover{ background: #4527a4; border-color: #4527a4; color: #fff; } /** banner-style-two **/ .banner-style-two{ position: relative; padding: 320px 0px 120px 0px; } .banner-style-two .content-box h3{ position: relative; display: block; font-size: 24px; font-weight: 500; line-height: 32px; color: #4527a4; margin-bottom: 37px; } .banner-style-two .content-box h1{ position: relative; display: block; font-size: 42px; line-height: 73px; font-weight: 500; color: #222; margin-bottom: 31px; } .banner-style-two .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 36px; color: #777; margin-bottom: 54px; } .banner-style-two .content-box .theme-btn-two{ padding: 15px 50px; } .banner-style-two .content-box{ position: relative; margin-right: 50px; } .banner-style-two .image-layer{ position: absolute; top: 0px; right: 0px; width: 100%; height: 1020px; background-repeat: no-repeat; background-position: center; animation-name: slideInRight; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInRight; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInRight; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .banner-style-two .image-box{ position: relative; min-width: 690px; min-height: 835px; margin-top: -240px; margin-left: 50px; } .banner-style-two .image-box .bg-layer{ position: absolute; width: 550px; height: 550px; left: 0px; bottom: 0px; background-repeat: no-repeat; border-radius: 50%; z-index: -1; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-two .image-box .image{ position: absolute; } .banner-style-two .image-box .image-1{ left: 0px; top: 90px; } .banner-style-two .image-box .image-2{ left: 100px; bottom: 130px; } .banner-style-two .image-box .image-3{ right: 0px; top: 0px; } .banner-style-two .image-box .image-4{ right: 20px; bottom: 110px; } .banner-style-two .image-box .image-5{ right: 20px; top: 340px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-two .image-box img{ max-width: none; float: left; } .anim-icons { position: absolute; left: 0; top: 0; right: 0; height: 100%; width: 100%; max-width: 1920px; margin: 0 auto; } .anim-icons .icon { position: absolute; background-position: center; background-repeat: no-repeat; } .banner-style-two .anim-icons .icon-1 { background: #4527a4; width: 60px; height: 60px; left: 30px; bottom: 50%; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-two .anim-icons .icon-2 { background: #95baf1; width: 32px; height: 32px; left: 60px; bottom: 30%; border-radius: 50%; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-two .anim-icons .icon-3 { background: #a293d1; width: 85px; height: 85px; left: -42px; bottom: 10%; border-radius: 50%; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } /*영업문의 버튼*/ .toggle-btn.btn-box {margin-top:40px;} .toggle-btn.btn-box a { position: relative; display: inline-block; overflow: hidden; font-size:16px; font-weight:500; height: 50px; padding: 12px 77px 12px 32px; background: transparent; line-height: 26px; color: #fff; border: 1px solid #fff; border-radius: 30px; text-transform: capitalize; transition: all 500ms ease; z-index: 1; } .toggle-btn.btn-box a:before { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; content: ""; background-color: #fff; border-radius: 30px; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); } .toggle-btn.btn-box a i { position: absolute; top: -1px; right: -1px; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #fff; font-size: 15px; color: #4527a4; border-radius: 50%; transition: all 900ms ease; } .toggle-btn.btn-box a:hover { color: #4527a4; } .toggle-btn.btn-box a:hover:before { background: #fff; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .toggle-btn.btn-box a:hover i { background: #fff; color: #4527a4; } /*테이블*/ caption {text-align:right; caption-side:top; font-size:16px;} table {font-size:inherit; width:100%; text-align:center; border-bottom:1px solid #ddd; } tr {width:100%;} td, th {padding:18px; word-break:break-all; font-weight:400; font-size:inherit; color:var(--black);} td {color:#424242; text-align:center;} .tb_vertical table{table-layout: fixed; border-collapse: collapse;} .tb_vertical thead tr {border-top:2px solid var(--black); border-bottom:1px solid var(--black);} .tb_vertical tbody{overflow-y:auto;} .tb_vertical tbody th {padding:18px; } .tb_vertical tbody td {padding:18px; color:#424242;} .tb_vertical td:first-child {width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} /* .tb_vertical{overflow-x:auto; } .tb_vertical table{table-layout: fixed; border-collapse: collapse;} .tb_vertical thead {display:block;} .tb_vertical thead tr {display:flex; border-top:2px solid var(--black); border-bottom:1px solid var(--black);} .tb_vertical tbody{display:block; overflow-y:auto;} .tb_vertical tbody th {padding:18px; } .tb_vertical tbody td {padding:18px; color:#424242;} */ .ellipsis {width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .ellipsis_multi {width:100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} /*헤더*/ .main-header .container {max-width:100%; padding:30px 60px; box-shadow:0 5px 6px rgba(0, 0, 0, 0.05);} .main_header .container {padding:50px 60px; box-shadow:none;} .main-header .logo{position: relative;} .main-header{ position:relative; left:0px; top:0px; z-index:999; width:100%; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .fixed-header .sticky-header{ z-index:999; opacity:1; visibility:visible; -ms-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -op-animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -ms-animation-duration: 500ms; -moz-animation-duration: 500ms; -op-animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -op-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -ms-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -op-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .fixed-header .nav_top {display:none;} .main-header .outer-container{position: absolute; left: 0px; top: 0px; width: 100%; background:#fff} .main-header.main_header .outer-container {background:none;} /** stricky-header **/ .sticky-header{ position:fixed; opacity:0; visibility:hidden; background: #fff; left:0px; top:0px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); width:100%; z-index:0; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .sticky-header .container {padding:10px 60px;} .sticky-header .main-menu .navigation > li > a{ color:var(--black) !important; } .sticky-header .logo-box{ position: relative; float: left; padding: 8px 0px 7px 0px; } .sticky-header .logo-box img {height:45px; filter: invert(53%) sepia(62%) saturate(250%) hue-rotate(115deg) brightness(88%) contrast(98%);} .sticky-header .menu-area{ position: relative; float: right; } .sticky-header .main-menu .navigation > li > a:before{ display: none; } .sticky-header .main-menu .navigation > li:before{ display: none; } /** main-menu **/ .main-menu{ position:relative; float:left; display:flex; flex-flow: column wrap; } .main-menu .navbar-collapse{ padding:0px; display:block !important; } .main-menu .navigation{ position:relative; margin:0px; } .main-menu .navigation > li{ position:relative; float:left; z-index:2; padding:20px 0px 25px 0px; margin: 0px 25px; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .main-menu .navigation > li:last-child{ margin-right:0px !important; } .main-menu .navigation > li:first-child{ margin-left: 0px !important; } .main-menu .navigation > li > a{ position:relative; display:block; text-align:center; font-size:20px; line-height:30px; font-weight:500; opacity:1; color:var(--black); padding: 0px; z-index:1; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main_header .main-menu .navigation > li > a{color:#fff;} .main-menu .navigation > li > ul{ position:absolute; left:50%; top:100%; width:auto; padding:0 15px; white-space: nowrap; z-index:100; display:none; opacity: 0; visibility: hidden; background-color:var(--black); border-radius:50px; -moz-transform: translateY(30px) translateX(-50%); -webkit-transform: translateY(30px) translateX(-50%); -ms-transform: translateY(30px) translateX(-50%); -o-transform: translateY(30px) translateX(-50%); transform: translateY(30px) translateX(-50%); -webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-menu .navigation > li > ul.from-right{ left:auto; right:0px; } .main-menu .navigation > li > ul > li{position:relative; display:inline-block;} .main-menu .navigation > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > a{ position:relative; display:block; padding:12px 8px; line-height:24px; font-weight:400; font-size:17px; text-transform:capitalize; color:#fff; text-align: left; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .main-menu .navigation > li > ul > li > a:hover{color:#579685;} .main-menu .navigation > li > ul > li.dropdown > a:after{ font-family: 'Font Awesome 5 Free'; content: "\f105"; position:absolute; right:20px; top:12px; display:block; line-height:24px; font-size:16px; font-weight:800; text-align:center; z-index:5; } .main-menu .navigation > li > ul > li > ul{ position:absolute; left:100%; top:-2px; width:230px; z-index:100; display:none; padding: 20px 0px; background-color: #ffffff; -moz-transform: translateY(30px); -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); } .main-menu .navigation > li > ul > li > ul.from-right{ left:auto; right:0px; } .main-menu .navigation > li > ul > li > ul > li{ position:relative; width:100%; padding: 0px 30px; } .main-menu .navigation > li > ul > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > ul > li > a{ position:relative; display:block; padding:6px 0px; line-height:24px; font-weight:400; font-size:14px; text-transform:capitalize; color:#222; text-align: left; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:hover > a{ color:#4527a4; } .main-menu .navigation > li > ul > li > ul > li.dropdown > a:after{ font-family: 'Font Awesome 5 Free'; content: "\f105"; position:absolute; right:20px; top:12px; display:block; line-height:24px; font-size:16px; font-weight:900; z-index:5; } .main-menu .navigation > li.dropdown:hover > ul{ visibility:visible; opacity:1; -moz-transform: translateY(-20px) translateX(-50%); -webkit-transform: translateY(-20px) translateX(-50%); -ms-transform: translateY(-20px) translateX(-50%); -o-transform: translateY(-20px) translateX(-50%); transform: translateY(-20px) translateX(-50%); transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .main-menu .navigation li > ul > li.dropdown:hover > ul{ visibility:visible; opacity:1; -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .main-menu .navigation > li.dropdown:last-of-type> ul {transform: translateY(30px) translateX(calc(-50% - 25px));} .main-menu .navigation > li.dropdown:last-of-type:hover > ul {transform: translateY(-20px) translateX(calc(-50% - 25px));} .main-menu .navigation li.dropdown .dropdown-btn{ position:absolute; right:10px; top:8px; width:34px; height:30px; border:1px solid #ffffff; text-align:center; font-size:16px; line-height:26px; color:#ffffff; cursor:pointer; z-index:5; display:none; } /** main-footer **/ .main-footer{position: relative; padding:50px 20px; border-top:1px solid #E6E6E6; font-size:14px; color:#666;} .main-footer .container {display:flex;} .ft_left {line-height:1.4;} .ft_left a {color:inherit; text-decoration:underline;} .footer-logo {margin-bottom:20px;} .copyright {margin-top:15px;} .ft_right {margin-left:auto;} .ft_right a {display:inline-block; color:var(--black);} .ft_right a:hover {color:#787878;} .ft_right a:after {content:""; display:inline-block; width:1px; height:14px; margin:0 10px; background:var(--black); vertical-align: text-bottom;} .ft_right a:last-of-type:after {display:none;} /*메인*/ .main_visual {height:530px;} .main_visual .swiper-slide {background-size:cover; background-position:center center; color:#fff;} .main_visual .swiper-slide > div {display:flex; flex-direction: column; justify-content:center; align-items:center; width:var(--container-w); height:100%; margin:0 auto;} .main_visual strong {font-size:54px; font-weight:700; text-align:center;} .main_visual strong em {margin-top:-10px; display:block; font-weight:900; font-size:60px; font-family:var(--noto-serif); font-style:normal;} .main_visual p {margin-top:12px; font-size:20px; font-weight:700; color:inherit; text-align:center; word-break:keep-all;} .main_visual .swiper-horizontal>.swiper-pagination-bullets, .main_visual .swiper-pagination-bullets.swiper-pagination-horizontal {bottom:50px;} .main_visual .swiper-pagination-bullet {width:12px; height:12px; border-radius:50px; background:rgba(255, 255, 255, 0.5); opacity:1;} .main_visual .swiper-pagination-bullet-active {width:50px;} /*회원권 매매 신청*/ .m_sell {background:var(--teal)/*#007c7c*/; padding:20px 20px;} .m_sell .container {display:flex; flex-flow:row wrap; align-items:center; justify-content:center;} .m_sell label {margin-right:15px; color:#fff;} .m_sell input {width:40%;} .m_sell .btn {margin:0 0 0 10px; background:#015555/*#68451B*/; color:#fff;} /*시세*/ .m_quote {padding:40px 20px 120px;} .m_quote .tabs {display:flex; justify-content:center; margin-bottom:0; border-bottom:none;} .m_quote .tabs li {display:flex; align-items:center; justify-content:center; width:14%; height:60px; margin:8px; background:#fff; border-radius:50px; border:1px solid var(--teal); color:var(--teal); font-weight:700; cursor:pointer;} .m_quote .tabs li.active, .m_quote .tabs li:hover {background:var(--teal); color:#fff;} .m_quote .tabs li a {display:block; color:inherit;} .m_quote .tb_vertical {height:480px; overflow:auto; } .m_quote thead th {width:20%; } .m_quote tbody {height:376px;} .m_quote tbody td {width:20.3%; padding:15px 18px;} .m_quote tbody tr:first-of-type td {padding-top:35px;} .m_quote tbody .btn {display:flex; align-items:center; justify-content:center; width:100%; max-width:100px; height:40px; margin:0 auto; border:1px solid #ddd; background:#fff; font-size:16px;} .m_quote tbody .btn:hover {background:#f6f6f6;} .m_quote i {margin-right:5px; vertical-align: baseline; font-size: 22px;} .m_quote .up i {color:#DD4343; vertical-align: -webkit-baseline-middle;} .m_quote .down i {color:#0083CA;} /*유투브*/ .tit_main {margin-bottom:40px; text-align:center;} .tit_main h2 {font-size:44px; font-weight:700; } .tit_main em {display:block; margin-bottom:5px; color:#4F9786; font-style:normal; } .m_more {width:100%; max-width:260px; margin:0 auto; border-radius:50px!important; font-size:inherit;} .m_youtube {padding:120px 20px; background:#212121 url('/themes/kbgolf/pro/resources/images/m_youtube_bg.png');} .m_youtube .tit_main h2 {color:#fff;} .m_youtube .list {display:flex; flex-flow:row wrap;} .m_youtube .list li {width:33.33%; padding:15px;} .m_youtube .img_box {position:relative; width:100%; height:0; padding-top:56.25%; border-radius:20px; overflow:hidden;} .m_youtube .img_box iframe {position:absolute; top:0; left:0; width:100%; height:100%;} .m_youtube .m_more {margin-top:70px; border:1px solid #ccc; color:#fff; background:var(--black);} .m_youtube .m_more:hover {background:#474747;} .m_youtube a {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0, 0, 0, 0); z-index:2} .m_youtube a:hover {background:rgba(0, 0, 0, 0.5);} /*블로그*/ .m_blog {padding:120px 20px;} .m_blog .tit_main h2 {color:var(--black);} .m_blog .list {display:flex; flex-flow:row wrap;} .m_blog .list li {width:33.33%; padding:15px;} .m_blog .list a {display:block; height:100%; padding:30px; border:1px solid #ddd; border-radius:20px;} .m_blog .list h4 {margin-bottom:20px; font-size:22px; color:var(--black); font-weight:400;} .m_blog .list p {font-size:16px; padding:0;} .m_blog .list h4.ellipsis_multi {-webkit-line-clamp:3;} .m_blog .list p.ellipsis_multi {-webkit-line-clamp:6;} .m_blog .m_more, .m_quote .m_more {margin-top:40px; background:#ddd;} .m_blog .m_more:hover {background:#ccc;} /*서브*/ .sub, .sub_wrap {padding-top:215px;} .navi {margin-bottom:10px;} .navi, .navi a {font-size:16px; color:#666;} .navi i {font-size:13px; margin-right:3px; vertical-align:middle;} .title {margin-bottom:90px;} .title h2 {font-size:46px; color:var(--black); font-weight:700;} .stit {margin-bottom:20px;} .stit h3 {color:var(--black); font-size:24px; font-weight:500;} .sub input {color:var(--primary);} [type="radio"], [type="checkbox"], span {vertical-align:sub;} .radio_box input {appearance: none; width:22px!important; height:22px; margin-right:6px; border:1px solid #ddd; border-radius: 50%; transition: border 0.2s ease-in-out;} .radio_box input:checked {border:6px solid tomato;} .radio_box input:disabled {background-color: lightgray; opacity: 0.7; cursor: not-allowed;} .radio_box input + span {cursor: pointer;} .radio_box input:disabled + span {opacity: 0.7; cursor: not-allowed;} label.radio_box {width:auto!important; margin-right:20px; margin-bottom:0!important;} label.radio_box:last-of-type {margin-right:0;} .check_box input {appearance: none; width:22px!important; height:22px; margin-right:6px; border:1px solid #ddd; border-radius:5px; transition: border 0.2s ease-in-out;} .check_box input:checked {position:relative; border:2px solid tomato;} .check_box input:disabled {background-color: lightgray; opacity: 0.7; cursor: not-allowed;} .check_box input + span {cursor: pointer;} .check_box input:disabled + span {opacity: 0.7; cursor: not-allowed;} .check_box input:checked:after {position:absolute; top:50%; left:50%; content:"\f00c"; font: var(--fa-font-solid); color:tomato; transform: translate(-50%, -50%); font-size: 15px;} label.check_box {width:auto!important; margin-right:20px; margin-bottom:0!important;} label.check_box:last-of-type {margin-right:0;} /*회원권 매매 신청*/ .search_ticket .container {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:var(--teal); padding:30px 20px;} .search_ticket label {margin-right:15px; color:#fff;} .search_ticket input {width:40%;} .search_ticket .btn {margin:0 0 0 10px; background:#015555; color:#fff;} /*시세*/ .quote {padding:80px 20px;} .quote .tabs {display:flex; justify-content:center; margin-bottom:18px; border-bottom:none;} .quote .tabs li {display:flex; align-items:center; justify-content:center; min-width:14%; height:60px; margin:8px; padding:10px; background:#fff; border-radius:50px; border:1px solid var(--teal); color:var(--teal); font-weight:700; cursor:pointer;} .quote .tabs li.active, .quote .tabs li:hover {background:var(--teal); color:#fff;} .quote .tabs li a {display:block; color:inherit;} .quote thead th {width:20%; } .quote tbody td {width:20.3%; padding:15px 18px;} .quote tbody tr:first-of-type td {padding-top:35px;} .quote tbody .btn {display:flex; align-items:center; justify-content:center; width:100%; max-width:100px; height:40px; margin:0 auto; border:1px solid #ddd; background:#fff; font-size:16px;} .quote tbody .btn:hover {background:#f6f6f6;} .quote i {margin-right:5px; vertical-align: baseline; font-size: 22px;} .quote .up i {color:#DD4343; vertical-align: -webkit-baseline-middle;} .quote .down i {color:#0083CA;} /*상담문의*/ .inquiry .personal {margin-bottom:80px;} .inquiry .input_form {margin-top:10px; padding:15px 0; border-bottom:1px solid #ddd; border-top:2px solid var(--black);} .inquiry .input_form > div {display: flex; align-items: center; padding:10px 0;} .inquiry label {width:18%; padding-left:3px; color:var(--black);} .inquiry .need:after {content:"*"; display:inline-block; margin-left:6px; color:red;} .inquiry input, .inquiry textarea {width:62%;} .inquiry select, .inquiry .price input {width:22%; margin-right:6px;} .inquiry textarea {height:160px;} .inquiry .request label {align-self: flex-start; margin-top:10px;} .inquiry .agree .stit {padding-bottom:20px; border-bottom:2px solid var(--black);} .inquiry .agree .term_wrap {height:300px; margin-bottom:20px; padding:20px; overflow-y:auto; background:#f8f8f8; border:1px solid #ddd; border-radius:10px;} .inquiry .agree .term_wrap::-webkit-scrollbar-thumb {background-color:#b1b1b1; border:8px solid transparent; border-radius: 50px; background-clip: padding-box; } .inquiry .agree .term_wrap::-webkit-scrollbar { width:22px;} .inquiry .agree .term_wrap pre {width:100%; white-space: pre-wrap; font-size:15px; color:inherit; font-family:inherit;} .inquiry .agree_check {padding-bottom:20px; border-bottom:1px solid #ddd;} .inquiry .btn_wrap {justify-content:center; margin-bottom:var(--btm-space); padding-top:40px; border-top:1px solid #ddd;} .inquiry .btn {max-width:200px;} .inquiry .guide {padding:40px 0; border-bottom:1px solid #ddd; color:tomato;} .inquiry .form-group {display:flex; flex-direction:column;} .captcha img {height:120px; margin-right:10px; } #captcha, .inquiry .reload {width:200px; margin:5px; height:54px;} .inquiry .reload {background:var(--dark); color:#fff;} /*상담내역*/ .card_list {display:flex; flex-flow:row wrap; margin-right:-15px; margin-left:-15px;} .card_list li {width:33.33%; padding:15px;} .card_list a {display:block; height:100%; padding:20px; border:1px solid #ddd; border-radius:20px;} .card_list a:hover {border:1px solid #407367;} .card_list h4 {margin-bottom:20px; font-size:22px; color:var(--black); font-weight:700;} .card_list p {font-size:16px; padding:0;} .card_list h4.ellipsis_multi {-webkit-line-clamp:3;} .card_list .list p.ellipsis_multi {-webkit-line-clamp:6;} .inquiry_list .info, .inquiry_view .info {display:flex; align-items:center; margin-bottom:20px; font-size:14px;} .inquiry_list .status, .inquiry_view .status {padding:5px 10px; border-radius:5px; font-size:15px;} .inquiry_list .status.apply, .inquiry_view .status.apply {background:#e6eceb; color:#578e80;} .inquiry_list .status.done, .inquiry_view .status.done {background:#d44c34; color:#fff;} .inquiry_list .date, .inquiry_view .date {margin-left:auto; color:var(--primary);} .inquiry_list .card_list h4 {margin-bottom:10px;} .inquiry_list .card_list span {display:block; margin-top:20px; color:#407367; font-size:15px;} .inquiry_view table {border-top:2px solid var(--black);} .inquiry_view th, .inquiry_view td {border-bottom:1px solid #ddd; text-align:left;} .inquiry_view th {background:#f6f6f6; color:var(--black); font-weight:500;} /*모달*/ .modal-content {border-radius:10px; border: none;} .modal-body {padding:20px;} .modal-footer {justify-content:center; padding-top:0; border-top:none;} .modal-footer .btn {height:50px;} /*회사소개*/ .about .conts {display:flex; word-break:keep-all; padding-bottom:var(--btm-space);} .about .conts_box {width:55%; padding-right:6%;} .about .txt_mid {font-size:24px; font-weight:500; color:#7da298;} .about .txt_mid:before {content:"\f10d"; font: var(--fa-font-solid); margin-right:10px; } .about .txt_big {margin: 10px 0 40px; line-height: 1.3;letter-spacing: -1px; font-size:42px; font-family:var(--noto-serif); font-weight:500; color:#247861;} .about .name {margin-top:60px;} .about .conts_box p {padding:8px 0;} .about .img_box {width:45%;} .about .img_box .img_wrap {position:relative; display:inline-block; width:calc(50% - 4px); height:0; padding-top:calc(50% - 4px); margin:0; border-radius:10px; overflow:hidden;} .about .img_box .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;} /*오시는 길*/ .map {margin-bottom:var(--btm-space);} .map_box {width:100%; height:400px;} .map_box > div {width:100%; height:100%; border-radius:20px; overflow:hidden; border:1px solid #ddd;} .root_daum_roughmap {width:100%; height:100%;} .root_daum_roughmap .wrap_map {height:100%!important;} .root_daum_roughmap .wrap_controllers {border-bottom:none!important} .root_daum_roughmap .border1, .root_daum_roughmap .border2, .root_daum_roughmap .border3, .root_daum_roughmap .border4 {background-color:transparent!important; border:none!important} .conts_box {margin-top:40px; padding-left:20px;} .conts_box dt {margin-bottom:20px; font-size:24px; color:var(--black);} .conts_box a {text-decoration:underline;} /*개인정보보호정책*/ .policy, .privacy-part {margin-bottom:var(--btm-space);} .policy pre {width:100%; white-space: pre-wrap; font-size:inherit; color:inherit; font-family:inherit;} .privacy-part .col-lg-3 {display:none;} .privacy-part h3 {font-size:18px;} /*외부 게시판*/ .sub_wrap .title {max-width:1200px; margin-right:auto; margin-left:auto;} /*블로그*/ .pricing_box1 {text-align:center; padding:20px; width:100%;} .blog .container {padding-left:0; padding-right:0;} .top-filter { width:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 25px; } .top-filter > div {margin-left:20px;} .top-filter > div:first-child {margin-left:0;} .top-filter > div:last-child {margin-left:auto;} .filter-short { width: 225px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .filter-show { width: 125px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .filter-label { font-size: 14px; font-weight: 500; margin:0; margin-right: 8px; white-space: nowrap; text-transform: uppercase; } .filter-select { height: 40px; background-color: transparent; } .filter-select:focus-within { border-color: #ced4da; } .filter-select:focus {outline:none; border-color:var(--basic); box-shadow: none;} .filter-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .filter-action a i { width: 40px; height: 40px; font-size: 16px; line-height: 40px; border-radius: 50%; text-align: center; color: var(--text); background: transparent; } .filter-action a i:hover { color: var(--primary); } .filter-action .active i { color: var(--white); background: var(--primary); } .filter-action .active i:hover { color: var(--white); } #post-list {padding-top:40px; border-top:2px solid var(--black);} #post-list > .row > div {flex:0 0 33.33%; max-width:33.33%; margin-bottom:30px;} .movie .blog-card {display:flex; flex-direction:column; height:100%;} .movie .blog-content {display: flex; flex-direction: column; height: 100%;} .movie .blog-content > div:last-child {margin-top:auto;} .movie .blog-media > a {position: relative; height: 0; display: block; padding-top:56.25%;} .movie .blog-media > a iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .blog-card {border-radius:20px; border:1px solid #ededed; overflow:hidden;} .blog-card:hover .blog-img img { -webkit-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); } .blog-widget { margin-bottom: 30px; margin-left: 5px; border-radius: 8px; padding: 18px 25px 25px; background: var(--white); } .blog-widget:last-child { margin-bottom: 0px; } .blog-widget-title { padding-bottom: 16px; margin-bottom: 20px; position: relative; text-transform: capitalize; border-bottom: 1px solid var(--border); } .blog-widget-title::before { position: absolute; content: ""; bottom: -2px; left: 0px; width: 50px; height: 2px; background: var(--primary); } .blog-widget-form { position: relative; } .blog-widget-form input { width: 100%; height: 45px; padding: 0px 60px 0px 15px; border-radius: 8px; border: 1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-widget-form input:focus-within { border-color: var(-basic); } .blog-widget-form button { position: absolute; top: 0px; right: 0px; width: 45px; height: 45px; line-height: 45px; text-align: center; color: #fff; background: var(--primary); border-radius: 0px 8px 8px 0px; } .blog-widget-form .icofont-search-1 {} .blog-media iframe {display:block;} .blog-img { overflow: hidden; border-radius: 8px; display: block; position: relative; width: 100%; height: 0; padding-top: 63.26%; } .blog-img img { width: 100%; border-radius: 8px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .blog-content {padding:0;} .blog-meta {padding:10px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .blog-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 30px; } .blog-meta li:last-child { margin: 0px; } .blog-meta li i { color: var(--primary); margin-right: 8px; font-size:12px; } .blog-meta li a, .blog-meta li span { font-size: 15px; font-weight: 400; white-space: nowrap; text-transform: uppercase; } .blog-meta li a { color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-meta li a:hover { color: var(--primary); } .blog-meta li span {color:#899995; font-size:14px;} .blog-title {padding:10px 20px; padding-top:10px; font-size:19px; font-weight:500; margin-bottom: 15px; /*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;*/} .blog-title a {display:block; width:100%; color: var(--black); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-title a:hover {color: var(--primary);} .blog-desc {font-size: 17px; line-height: 28px; color: var(--gray); margin-bottom: 25px; /*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;*/} .blog-card .btn-primary:not(:disabled):not(.disabled):active, .blog-card .btn-danger:not(:disabled):not(.disabled):active {border-color:#ededed; color:inherit;} .blog-card .btn-primary:not(:disabled):not(.disabled):active:focus, .blog-card .btn-primary:focus, .blog-card .btn-danger:not(:disabled):not(.disabled):active:focus, .blog-card .btn-danger:focus {box-shadow:none;} .blog-content button {margin:0!important; padding:20px 20px; border-top:1px solid #ededed; background:#fff!important; font-size:16px; cursor:pointer;} .blog-content button:first-child {border-right:1px solid #ededed;} .blog-content .btn-primary {color:var(--primary); } .blog-content .btn-danger {color:#333;} .blog-content .btn-primary:hover, .blog-content .btn-danger:hover {background:#f5f5f5!important; border-top:1px solid #ededed;} .blog-btn { font-size: 15px; font-weight: 500; color: var(--basic); text-transform: uppercase; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-btn i { font-size: 17px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-btn:hover { color: var(--basic); text-decoration: underline; } .blog-btn:hover i { margin-left: 5px; } /*블로그 상세*/ .blog-details-thumb img { width: 100%; border-radius: 10px; } .blog-details-content { padding: 50px 5px; margin-bottom: 30px; background: var(--white); border-radius: 0px 0px 10px 10px; } .blog-details-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom:20px; } .blog-details-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 40px; color:#899995; } .blog-details-meta li:last-child { margin: 0px; } .blog-details-meta li i {color: var(--primary); margin-right: 10px; font-size: 16px;} .blog-details-meta li a, .blog-details-meta li span { font-size: 16px; white-space: nowrap; text-transform: uppercase; } .blog-details-meta li a { color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-details-meta li a:hover { color: var(--primary); } .blog-details-title { line-height: 1.3; margin-bottom:40px; font-size:26px; color:var(--black); font-weight:700; } .blog-details-desc { font-size: 17px; line-height: 30px; margin-bottom: 20px; } .blog_bottom {display:flex; flex-flow:row wrap; margin-bottom: 30px; padding: 30px 0; background: var(--white); border-radius: 10px;} .blog-details-navigate {display:flex; flex-flow:row wrap;} .blog-details-navigate > div {margin-right:10px;} .blog_bottom .btn_wrap {width:auto; margin-left:auto;} .blog_bottom .btn {padding: 10px 25px; width:120px; border-radius:10px; font-weight: 500; line-height:1;} .blog-details-prev h4, .blog-details-next h4 { margin-bottom: 20px; } .blog-details-prev h4 a, .blog-details-next h4 a { color: var(--black); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-details-prev h4 a:hover, .blog-details-next h4 a:hover { color: var(--basic); } .blog-details-prev .nav-arrow, .blog-details-next .nav-arrow {display:flex; align-items:center; justify-content:center; height:60px; font-weight:500; font-size:16px; padding: 10px 25px; border-radius:10px; color: var(--black); background: var(--chalk); text-transform: uppercase; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-details-prev .nav-arrow:hover, .blog-details-next .nav-arrow:hover { color: var(--white); background: var(--basic); } .blog-details-prev i {margin-right:10px;} .blog-details-next i {margin-left:10px;} .blog-details-next { text-align: right; } /*댓글*/ .comments {max-width:1200px; margin:0 auto; margin-bottom:var(--btm-space);} .comments .col-xl-10 {width:100%;} .comments .row {margin-left:-15px; margin-right:-15px; justify-content:center;} .comments .row > div {padding-right: 0; padding-left: 0; border:1px solid var(--border); border-radius:8px;} .comment_write {padding:20px;} .comment_write h3 {font-size: 18px; font-weight:500; margin-bottom: 10px; padding-left:5px;} .comment_write textarea {width:100%; height:120px; padding:10px; background:#f8f8f8; border:none;} .comment_write .btn {margin-top:6px; font-size:14px;} .comment_list {border-top: 1px solid var(--border);} .comment_list ul li {padding:20px; display:flex; flex-flow:row wrap; border-bottom:1px solid var(--border); } .comment_list ul .img_box img {width:40px; height:40px; margin-right:20px; border-radius:50px; object-fit:cover;} .comment_list .txt_box {width: calc(100% - 70px);} .comment_list .info {display:flex; align-items: center; width:100%; font-size:16px; color:#666;} .comment_list .info .name {display: flex; align-items: center; font-weight:700; color:var(--black)} .comment_list .info .name:after {content:""; display:inline-block; width:1px; height:15px; margin:0 20px; background:#888;} .comment_list .info .time {color:#787878;} .comment_list .info .btn_report {display:flex; align-items:center; justify-content:center; width:60px; height:30px; margin-left:auto; padding:5px 10px; border:1px solid #dda1a0; border-radius:5px; line-height:1; color: #ab403e; font-size:14px;} .comment_list .comment_cont {margin:10px 0; padding-left:60px; font-size:18px;} .comment_list .btn_wrap {display:flex; padding-left:60px; font-size:18px; color:#878787;} .comment_list .btn_wrap .btn {width: auto; padding: 0; font-size: 14px; color: #666; vertical-align: baseline; text-align: center;} .comment_list .btn_wrap .btn_outline {display:flex; justify-content:center; align-items:center; width:100px; height:40px; margin: 0; margin-right:20px; padding:3px 10px; background:#b3c4eb; color:#524abd; font-weight:500;} .comment_list .btn_wrap .btn_outline:hover {background:#7494df; color:#fff;} .comment_list .btn_wrap > span {display:flex; flex-flow:row nowrap; align-items:center; margin-left:10px; font-size:16px; font-weight:500;} .comment_list .btn_wrap .btn_good, .comment_list .btn_wrap .btn_good i {color:#4b7cd7;} .comment_list .btn_wrap .btn_bad, .comment_list .btn_wrap .btn_bad i {color:#cf3d3d;} .comment_list .reply_write {width:100%; margin-top:5px; margin-left:60px; padding:20px; background:#f6f6f6; border-radius:8px;} .comment_list .reply_write textarea {width:100%; height:120px;} .comment_list .reply_write .btn {margin-top:6px; font-size:14px;} .reply_wrap {width:100%; margin-top:10px; margin-left:60px;} .reply_wrap .comment_list ul li {padding: 20px 5px; } .reply_wrap .comment_list ul li:last-child {border-bottom:none;} .comment_btm {padding:20px;} .comment_btm .row > div{border:none; margin:0; } .comment_btm .bottom-paginate {justify-content: flex-end; padding-top:0; border-top:none;} /*동영상 갤러리*/ .movie .blog-img {padding-top:56.25%;} .movie .mask {height: 50px; width: 50px; line-height: 50px; background: var(--basic); font-size: 32px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; border-radius: 50px; display: flex; align-items: center; justify-content: center; } .movie .blog-desc {margin-top:-16px; padding-left:20px; padding-right:20px; font-size:16px; line-height:1.4;} /*동영상 상세*/ .movie_details .blog-details-thumb, .blog_details .movie-details-thumb {position:relative; width:100%; height:0; padding-top:56.25%;} .movie_details .blog-details-thumb iframe, .blog_details .movie-details-thumb iframe {position:absolute; top:0; left:0; width:100%; height:100%; } /*블로그 img*/ .img_gallery > ul {border-top:1px solid var(--basic);} .img_gallery > ul > li {display:flex; position:relative; padding:40px 10px; border-bottom:1px solid #ddd;} .img_gallery .num {padding-right:20px; font-family:var(--pretendard); font-size:30px; color:#cecdcd; font-weight:700; line-height: 1;} .img_gallery .conts_wrap {display:flex; width:100%; min-width: 0; color:#666;} .img_gallery .conts_box {flex:1; min-width: 0; font-size:18px;} .img_gallery .blog-title {margin-bottom:8px; color:var(--black);} .img_gallery .blog-desc {font-size:18px; color:var(--txt-color);} .img_gallery .img_box {width:100%; max-width:200px; margin-left:40px;} .img_gallery .img_box img {border-radius:8px; overflow:hidden;} .img_gallery .info {display:flex; flex-flow:row wrap; align-items:center; margin-top:0; margin-bottom:20px; font-size: 16px;} .img_gallery .info li {margin-right:10px;} .img_gallery .info li:before {content:""; display:inline-block; width:1px; height:12px; margin-right:10px; background:#ddd; } .img_gallery .info li:first-of-type:before {display:none;} .img_gallery .blog-btn {margin-top:8px; font-size:18px;} .img_gallery .info img {width:20px; height:20px; border-radius:50px; overflow:hidden;} /*블로그 txt*/ .txt_gallery ul {width:100%;} .txt_gallery .list_colgroup {display:table; table-layout:fixed; width:100%; font-size:18px;} .txt_gallery .list_colgroup > div {display:table-cell; padding:18px 10px; border-bottom:1px solid #ddd; vertical-align:middle;} .txt_gallery .num, .txt_gallery .date, .txt_gallery .hit, .txt_gallery .recommend {width:100px; text-align:center; color:#787878;} .txt_gallery .name {width:160px; text-align:center; color:#787878;} .txt_gallery .subject {width:calc(100% - 610px); padding-left:20px!important; text-align:left;} .txt_gallery .subject a {display:flex; align-items:center; width:100%; color:inherit;} .txt_gallery .subject a img {width:100px; margin-right:10px; object-fit:cover; border-radius:8px; } .txt_gallery .subject .txt_box {flex:1; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .txt_gallery .td_wrap > div {display:table-cell;} .txt_gallery .list_top {border-top:none;} .txt_gallery .list_top .list_colgroup > div {border-bottom:1px solid var(--black); font-size:16px; color: var(--black); font-weight: 700;} .txt_gallery .list_top .num {color:inherit!important;} .txt_gallery .list_cont .subject {font-weight:500;} .txt_gallery .list_cont .tab_notice {background:#f8f8f8;} .txt_gallery .list_cont .tag {display:inline-block; min-width:50px; padding:8px 10px; border-radius:50px; color:#fff; text-align:center; line-height:1; font-size:14px; } .txt_gallery .list_cont .tag_notice {background:#eb7272;} .txt_gallery .list_cont .tag_ad {background:#7f7fb7;} .txt_gallery .list_btnwrap {display:flex; justify-content:flex-end;} .txt_gallery .list_btnwrap button {display:flex; align-items:center; justify-content:center; width:100%; max-width:120px; height:40px;} .list_more {padding:40px 20px; width:100%; background:#fff; font-weight:700; color:var(--black);} /*공지사항*/ .blog-standard .list {padding:0 var(--side-space);} .blog-standard .blog-card {margin-bottom: 0; border-radius:0; border:none; border-bottom: 1px solid #ddd;} .blog-standard .blog-card:first-child {border-top:2px solid var(--black);} .blog-standard .blog-card:last-child {border-bottom:none;} .blog-standard .blog-media {position: relative;} .blog-standard .blog-content {padding: 30px 3px; } .blog-standard .blog-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; padding:0;} .blog-standard .blog-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 30px; color:var(--graytxt); } .blog-standard .blog-meta li:last-child {margin: 0px;} .blog-standard .blog-meta li i {margin-top: -3px; margin-right: 8px; font-size: 14px; color:#899995; vertical-align:sub;} .blog-standard .blog-meta li a, .blog-standard .blog-meta li span { font-size: 15px; font-weight: 400; white-space: nowrap; text-transform: uppercase; } .blog-standard .blog-meta li a { color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-standard .blog-meta li a:hover {color: var(--primary);} .blog-standard .blog-title {padding:0; font-size: 22px; line-height:1.3; margin-bottom: 15px; color:var(--black);} .blog-standard .blog-title a {color:inherit; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-standard .blog-title a:hover {color: var(--primary);} .blog-standard .blog-desc {margin-bottom: 25px;} .blog-standard .blog-btn {padding:0; border-top:none; font-size: 15px; font-weight: 500; color: var(--primary); text-transform: uppercase; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-standard .blog-btn i {font-size: 17px; vertical-align:sub; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .blog-standard .blog-btn:hover {color: var(--primary); text-decoration:none;} .blog-standard .blog-btn:hover i {margin-left: 5px;} /*공지사항 보기*/ .blog-standard-details {margin-bottom:var(--btm-space);} .blog-standard-details .blog-details-content {margin-bottom:0; padding:0; border-bottom:1px solid #ddd; border-radius:0;} .blog-standard-details .blog-details-top {padding:15px 3px; border-top:2px solid var(--black); border-bottom:1px solid #ddd;} .blog-standard-details .blog-details-title {margin:0; margin-bottom:10px; font-weight:500;} .blog-standard-details .blog-details-meta li, .blog-standard-details .blog-details-meta li i {color:#899995;} .blog-standard-details .blog-details-meta {margin:0; padding:0 3px; } .blog-standard-details .blog-details-cont {padding:40px 3px;} /*qna*/ .qna-list .top-filter {justify-content:flex-start;} .qna-list .filter-short {margin-left:20px;} .qna-list .filter-btn {margin-left:auto;} .qna-list .filter-btn .btn {height:50px; padding: 0 20px;} .qna-list .blog-card {display:flex; flex-flow:row wrap; border-bottom:1px solid var(--border); font-size:inherit;} .qna-list .blog-card > * {display:flex; align-items:center; justify-content:center; padding:30px 10px;} .qna-list .qna-num {width:10%; color:#789991; font-weight:300;} .qna-list .qna-date {justify-content:flex-end; width:15%; color:#789991; font-weight:300;} .qna-list .qna-status {justify-content:flex-end; width:15%; padding-right: calc(var(--bs-gutter-x)/ 2);} .qna-list .blog-title {justify-content:flex-start; width:60%; margin:0; font-size:inherit; line-height:1.5;} .qna-list .qna-status span {display:flex; justify-content:center; align-items:center; width:110px; height:42px; padding:5px; border-radius:5px; font-size:16px; font-weight:500; text-align:center; } .qna-list .done {border:1px solid var(--red); color:var(--red);} .qna-list .ing {border:1px solid var(--gray1); color:var(--gray1);} /*qna 상세*/ .qna-details .blog-details-content {border-bottom:none;} .qna-details .blog-details-top {padding:30px 3px 0; border-bottom:none; } .qna-details .blog-details-title {position:relative; padding-left:50px; font-size:20px;} .qna-details .blog-details-title:before {content:"Q"; position:absolute; top:0; left:0px; display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:var(--primary); color:#fff; border-radius:50px;} .qna-details .blog-details-meta {padding-left:50px;} .qna-details .blog-details-cont {padding:30px 3px; padding-left:50px;} .qna-details .blog-details-comment {padding:20px 3px; border-top:1px solid #ddd;} .qna-details .comment-title{position:relative; padding: 20px 3px; padding-left: 50px; font-size: 20px; font-weight:500; color: var(--black);} .qna-details .comment-title:before {content:"A"; position:absolute; top:16px; left:0px; display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:#b8d4cd; border-radius:50px; color:#fff;} .qna-details .comment-list {padding: 30px; color: var(--black); background: #f6f6f6; border-radius: 10px;} .qna-form p {margin-bottom: 40px; word-break:keep-all;} .qna-form .form-btn-group {height: 50px; background:var(--black); font-size: inherit;} .qna .filter-btn .btn {width:120px;} .qna-form .col-lg-6 {flex: 0 0 100%; max-width: 100%;} .qna-form .col-lg-6 p {color:var(--black);} .qna-form .contact-form {margin-top:20px; padding:30px 0; border-top: 2px solid var(--black);} .qna-form label {width: 18%; padding-left:3px; color: var(--black);} .qna-form .form-input-group {display:flex; align-items:center;} .qna-form .input_form {margin-top:10px; padding:15px 0; border-bottom:1px solid #ddd; border-top:2px solid var(--black);} .qna-form .input_form > div {display: flex; align-items: center; padding:10px 0;} .qna-form label {width:18%; color:var(--black);} .qna-form .need:after {content:"*"; display:inline-block; margin-left:6px; color:red;} .qna-form input, .qna-form textarea {width:62%;} .qna-form select, .qna-form .price input {width:22%; margin-right:6px;} .qna-form textarea {height:160px;} .qna-form .conts label {align-self: flex-start; margin-top:10px;} .qna-form .btn_wrap {margin-top:30px; margin-bottom:var(--btm-space); padding-top:40px; justify-content:center; border-top:1px solid #ddd;} .qna-form .btn_wrap .btn {max-width:200px; height:60px;} /*페이지네이션*/ .bottom-paginate { padding-top: 25px; padding-bottom:var(--btm-space); border-top: 1px solid var(--border); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size:1.6rem; } .bottom-paginate .disabled {border:none;} .page-info { font-weight: 400; color: var(--text); } .custom-pagination, .pagination { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: flex; padding-left: 0; list-style: none; } .page-item {margin-left: 10px; padding:0!important; font-size:inherit;} .page-item:first-child .page-link, .page-item:nth-of-type(2) .page-link, .page-item:nth-last-child(2) .page-link, .page-item:last-child .page-link {border-radius: 50%; font-size:inherit; line-height:35px;} .page-item:first-child .page-link:hover, .page-item:nth-of-type(2) .page-link:hover, .page-item:nth-last-child(2) .page-link:hover, .page-item:last-child .page-link:hover {color:#fff;} .page-item.active .page-link, .page-item .active {color: var(--white); background: var(--primary); border-color: var(--primary);} .page-link { width: 40px; height: 40px!important; margin-top:0!important; padding:0!important; line-height: 40px; text-align: center; border-radius: 50%; font-weight: 400; border: none; padding: 0px; color: var(--text); background: var(--white); border:1px solid #ddd; font-size: 16px; } .page-link:hover { color: var(--white); background: var(--primary); border:1px solid var(--primary); } .page-link:focus { -webkit-box-shadow: none; box-shadow: none; } .page-item.disabled .page-link {font-size: inherit; line-height: 35px;} /*faq*/ .faq-part {margin-bottom:var(--btm-space);} .faq-child { border-radius: 8px; margin-bottom: 30px; background: var(--white); border: 1px solid #407367; -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); } .faq-child:hover .faq-que button { color: var(--primary); } .faq-child:last-child { margin-bottom: 0px; } .faq-que button {position:relative; width: 100%; border: none; outline: none; background: none; text-align: left; padding: 22px 25px; padding-left:70px; color: var(--black); font-weight: 500; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .faq-que span {position:absolute; top:22px; left:25px; display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--primary); color:var(--white);} .faq-ans p {position:relative; line-height: 26px; padding: 20px 25px; padding-left:70px; border-top: 1px solid var(--border); } .faq-ans span {position:absolute; top:22px; left:25px; display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:#b8d4cd; color:var(--white);} /*지워도 됨 .header_btn { float:right; margin-top:5px; } .header_btn ul li{ float:left; } .header_btn li:first-child a{ width:110px; height:45px; background:transparent; float:left; text-align:center; cursor:pointer; position:relative; overflow:hidden; font-size:16px; color:#fff; border:1px solid #fff; line-height:41px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-transform:capitalize; z-index: 1; margin-right:20px; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition: background-color 0.6s, color 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header_btn li:first-child a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid transparent; z-index: -1; border-radius: inherit; opacity: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header_btn li:first-child a:hover{ background-color:#fff; color: #45108a; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header_btn li:first-child a:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header_btn li:last-child a{ width:110px; height:45px; background:#fff; float:left; text-align:center; cursor:pointer; position:relative; overflow:hidden; font-size:16px; color:#45108a; border:1px solid transparent; line-height:41px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; text-transform:capitalize; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition: background-color 0.6s, color 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header_btn li:last-child a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; z-index: -1; border-radius: inherit; opacity: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .header_btn li:last-child a:hover{ background-color:transparent; color: #fff; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header_btn li:last-child a:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } */ .newsletter_wrapper{ width:100%; background: #3d0660; background-size: cover; background-image: url(../images/background.png); margin-bottom: -164px; padding-top:100px; padding-bottom: 227px; } .newsletter_content_wrapper{ float:left; width:60%; } .newsbtn_wrapper{ float:left; /*width:40%;*/ } .newsletter_content_wrapper h1{ font-size:26px; color:#fff; font-weight:500; } .newsletter_content_wrapper h5{ font-size:18px; color:#fff; display:block; margin-top:10px; } .news_btn li:first-child a, .news_btn li:last-child a{ width:170px; } .news_btn{ float:left; } .client_wrapper{ padding:95px 0; } /*contact-us*/ .page-title{ position: relative; padding:210px 0px 60px 0px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center } .page-title .content-box .title-box h1{ position: relative; font-size: 48px; line-height: 60px; color: #fff; font-weight: 500; padding-bottom: 44px; margin-bottom: 30px; } .page-title .content-box .title-box h1:before { position: absolute; content: ''; background: #fff; width: 130px; height: 2px; left: 0px; bottom: 0px; } .page-title .content-box .title-box h1:after { position: absolute; content: ''; background: #eaeaea; width: 45px; height: 4px; left: 0px; bottom: 0px; } .page-title .content-box .title-box p{ font-size: 16px; color: #fff; margin: 0px; } .page-title .content-box .bread-crumb li{ position: relative; display: inline-block; font-size: 30px; font-weight: 500; color: #fff; padding-right: 40px; margin-right: 15px; } .page-title .content-box .bread-crumb li a{ color: #fff; font-weight: 400; } .page-title .content-box .bread-crumb li a:hover{ text-decoration: underline; } .page-title .content-box .bread-crumb li:before{ position: absolute; content: "\f101"; font-size: 24px; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #fff; top: 2px; right: 0px; } .page-title .content-box .bread-crumb li:last-child{ padding: 0px; margin: 0px; } .page-title .content-box .bread-crumb li:last-child:before{ display: none; } .page-title .content-box .bread-crumb{ position: relative; margin-top: 23px; } .page-title .anim-icons .icon-1 { left: 50%; top: 260px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .page-title .anim-icons .icon-2 { left: 60%; bottom: 150px; } .page-title .anim-icons .icon-3 { top: 200px; right: 400px; } .page-title .anim-icons .icon-4 { background-image: -webkit-linear-gradient(0deg, #fe40a0 0%, #6042aa 100%); width: 145px; height: 145px; right: 460px; bottom: -30px; border-radius: 50%; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .contact-section{ position: relative; padding:120px 0px 100px 0px; } .contact-section .info-content .single-info-box{ position: relative; padding: 0px 30px; } .contact-section .info-content .single-info-box .icon-box{ position: relative; display: inline-block; margin-bottom: 25px; } .contact-section .info-content .single-info-box .icon-box img{ position: relative; width: auto; transition: all 500ms ease; } .contact-section .info-content .single-info-box:hover .icon-box img{ transform: scale(1.05); } .contact-section .info-content .single-info-box h2{ position: relative; display: block; font-size: 30px; line-height: 40px; color: #222; font-weight: 500; margin: 18px; } .contact-section .info-content .single-info-box .text{ position: relative; font-size: 16px; margin-bottom: 14px; } .contact-section .info-content .single-info-box a{ position: relative; display: inline-block; font-size: 18px; color: #4527a4; } .contact-section .info-content .single-info-box a:hover{ text-decoration: underline; } .contact-section .info-content, .contact-section .image-container{ position: relative; margin-bottom: 110px; } .contact-section .contact-form-area .form-inner .form-group{ position: relative; margin-bottom: 30px; } .contact-section .contact-form-area .form-inner .form-group i{ position: absolute; top: 23px; right: 30px; font-size: 15px; font-weight: 700; color: #777; z-index: 1; } .contact-section .contact-form-area .form-inner .form-group input[type='text'], .contact-section .contact-form-area .form-inner .form-group input[type='email'], .contact-section .contact-form-area .form-inner .form-group textarea{ position: relative; width: 100%; height: 60px; background: #fff; padding: 10px 60px 10px 30px; font-size: 14px; font-weight: 500; border-radius: 30px; border: 3px solid #fff; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .contact-section .contact-form-area .form-inner .form-group textarea{ height: 200px; resize: none; border-radius: 20px; } .contact-section .contact-form-area .form-inner .form-group input:focus, .contact-section .contact-form-area .form-inner .form-group textarea:focus{ border-color: #4527a4; } .contact-section .contact-form-area .form-inner .message-btn{ margin: 0px; } .contact-section .contact-form-area .form-inner .message-btn .theme-btn-two{ padding: 13px 38px; font-weight: 400; } .contact-section .contact-form-area .sec-title h2{ margin-bottom: 63px; } .map-section{position: relative; margin-bottom: 60px;} #image_block_24 .image-box{ position: relative; } #image_block_24 .image-box img{ max-width: none; float: left; } #content_block_25 .content-box{ position: relative; margin-right: 50px; margin-top: 27px; } #content_block_25 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 81px; } #content_block_25 .content-box h3{ position: relative; display: block; } #content_block_25 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom:10px; color:#666; line-height:1.8; } #content_block_25 .content-box .list-item li{ position: relative; display: block; font-size: 16px; margin-bottom: 30px; padding-left: 40px; } #content_block_25 .content-box .list-item li:before{ position: absolute; content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 700; font-size: 16px; color: #4527a4; left: 0px; top: 0px; } #content_block_25 .content-box .list-item li:last-child{ margin-bottom: 0px; } #content_block_25 .content-box .list-item{ margin-bottom: 81px; } #image_block_25 .image-box img{ width: 100%; margin-left:-80px; margin-top:120px; } #content_block_26 .content-box h2{ line-height: 60px; margin-bottom: 60px; } #content_block_26 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom:10px; } #content_block_26 .content-box .counter-inner .counter-block{ position: relative; float: left; width: 50%; } #content_block_26 .content-box .counter-inner .counter-block .count-outer span{ position: relative; display: inline-block; font-size: 48px; line-height: 60px; font-weight: 700; color: #4527a4; margin-bottom: 13px; } #content_block_26 .content-box .counter-inner .counter-block .count-outer span:before{ position: absolute; content: '+'; font-size: 30px; font-weight: 600; color: #ff0000; top: -9px; right: -17px; } #content_block_26 .content-box .counter-inner .counter-block .inner-box h5{ position: relative; display: block; font-size: 18px; color: #777777; font-weight: 500; text-transform: uppercase; } .counter-style-two{ position: relative; padding-bottom: 0; } /** service-section **/ .service-section{ position: relative; padding-bottom: 50px; } .service-section .sec-title{ position: relative; max-width: 820px; width: 100%; margin: 0 auto; } .service-section .sec-title h2{ font-weight: 400; line-height: 60px; padding-bottom: 67px; margin-bottom: 61px; } .service-section .sec-title .icon-box{ position: relative; text-align: center; font-size: 70px; line-height: 70px; color: #4527a4; margin-bottom: 35px; } .service-block-one .inner-box{ position: relative; background: #00d2ff; padding: 44px 20px 48px 30px; border-radius: 10px; overflow: hidden; transition: all 500ms ease; } .service-block-one:hover .inner-box{ background: #4527a4; } .service-block-one .inner-box .bg-layer{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; background-size: cover; } .service-block-one .inner-box .icon-box{ position: absolute; display: inline-block; font-size: 60px; line-height: 60px; color: #fff; top: 35px; right: 35px; } .service-block-one .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #fff; font-weight: 500; padding-bottom: 28px; margin-bottom: 28px; } .service-block-one .inner-box h3:before{ position: absolute; content: ''; background: #fff; width: 35px; height: 2px; left: 0px; bottom: 0px; } .service-block-one .inner-box h3 a{ color: #fff; } .service-block-one .inner-box .text{ position: relative; font-size: 16px; color: #fff; } /** feature-style-four **/ .feature-style-four{ position: relative; padding: 100px 0px 140px 0px; } #content_block_07 .content-box h3, #content_block_08 .content-box h3, #content_block_09 .content-box h3, #content_block_10 .content-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #4527a4; font-weight: 500; margin-bottom: 32px; } #content_block_07 .content-box .text, #content_block_08 .content-box .text, #content_block_09 .content-box .text, #content_block_10 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 53px; } #content_block_07 .content-box .sec-title h2, #content_block_08 .content-box .sec-title h2, #content_block_09 .content-box .sec-title h2, #content_block_10 .content-box .sec-title h2{ margin-bottom: 41px; } .feature-style-four .inner-box .image-box img{ width: 100%; } #image_block_06 .image-box, #image_block_07 .image-box, #image_block_08 .image-box, #image_block_09 .image-box, #image_block_10 .image-box{ position: relative; } #image_block_06 .image-box .image, #image_block_07 .image-box .image, #image_block_08 .image-box .image, #image_block_09 .image-box .image, #image_block_10 .image-box .image{ position: relative; overflow: hidden; background: #4527a4; } #image_block_06 .image-box .image img, #image_block_07 .image-box .image img, #image_block_08 .image-box .image img, #image_block_09 .image-box .image img, #image_block_10 .image-box .image img{ width: 100%; transition: all 500ms ease; } #image_block_06 .image-box .image:hover img, #image_block_07 .image-box .image:hover img, #image_block_08 .image-box .image:hover img, #image_block_09 .image-box .image:hover img, #image_block_10 .image-box .image:hover img{ opacity: 0.5; transform: scale(1.05); } #content_block_07 .content-box{ padding-top: 70px; margin-right: 30px; } #image_block_06 .image-box .bg-layer{ position: absolute; width: 815px; height: 755px; left: 0px; top: -40px; background-repeat: no-repeat; -webkit-animation: zoom-fade 15s infinite linear; animation: zoom-fade 15s infinite linear; } .feature-style-four .inner-box{ position: relative; } .feature-style-four .inner-box:first-child{ margin-bottom: 195px; } .feature-style-four .inner-box:nth-child(2){ margin-bottom: 120px; } #content_block_08 .content-box{ margin-left: 70px; } #image_block_07 .image-box .bg-layer{ position: absolute; width: 785px; height: 810px; right: 70px; top: -60px; background-repeat: no-repeat; -webkit-animation: zoom-fade 15s infinite linear; animation: zoom-fade 15s infinite linear; } #image_block_07 .image-box .image{ border-radius: 5px; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); } #image_block_07 .image-box img{ max-width: none; float: right; width: auto; border-radius: 5px; } #content_block_07 .content-box, #content_block_08 .content-box, #content_block_09 .content-box, #content_block_10 .content-box{ position: relative; } #content_block_08 .content-box .image{ position: relative; padding-top: 70px; } #image_block_08 .image-box, #image_block_09 .image-box{ position: relative; padding: 0px 100px; } #image_block_08 .image-box .image{ border-radius: 5px; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); } #image_block_08 .image-box .image img{ border-radius: 5px; width: 100%; } #image_block_08 .image-box:before, #image_block_09 .image-box:before{ position: absolute; content: ''; background: #f9fafa; width: 100%; height: 595px; left: 0px; top: 245px; } #image_block_08 .image-box .image-content, #image_block_09 .image-box .image-content{ position: relative; padding-top: 45px; padding-bottom: 58px; } #content_block_07 .content-box .btn-box, #content_block_08 .content-box .btn-box, #content_block_09 .content-box .btn-box, #content_block_10 .content-box .btn-box { position: relative; display: flex; } #image_block_08 .image-box .image-content h3, #image_block_09 .image-box .image-content h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: #4527a4; margin-bottom: 10px; } #image_block_08 .image-box .image-content h3 a, #image_block_09 .image-box .image-content h3 a{ color: #4527a4; } #image_block_08 .image-box .image-content h3 a:hover, #image_block_09 .image-box .image-content h3 a:hover{ color: #222; } #image_block_08 .image-box .image-content .text, #image_block_09 .image-box .image-content .text{ position: relative; font-size: 16px; } .feature-style-four .inner-box:nth-child(3) .content-box{ margin-bottom: 150px; } #image_block_09 .lower-image{ position: relative; text-align: center; padding-top: 100px; } .feature-style-four .inner-box:nth-child(3){ margin-bottom: 120px; } #image_block_10 .image-box .image{ position: relative; margin-left: -150px; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); border-top-right-radius: 5px; border-top-left-radius: 5px; } #image_block_10 .image-box .image img{ float: right; max-width: none; width: auto; border-top-right-radius: 5px; border-top-left-radius: 5px; } .feature-style-four .inner-box:last-child .content-box{ margin-left: 100px; } #content_block_10 .content-box .image{ position: absolute; right: 0px; bottom: -140px; } /** management-section **/ .management-section{ position: relative; background: #4527a4; padding: 110px 0px 73px 0px; z-index: 1; } .management-section .pattern-bg .pattern-1{ position: absolute; width: 460px; height: 850px; left: 0px; bottom: 0px; background-repeat: no-repeat; animation-name: slideInLeft; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInLeft; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInLeft; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInLeft; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .management-section .pattern-bg .pattern-2{ position: absolute; width: 570px; height: 460px; right: 0px; top: 0px; background-repeat: no-repeat; animation-name: slideInRight; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInRight; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInRight; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .management-section .sec-title h2{ color: #fff; margin-bottom: 52px; } .management-section .sec-title.center h2:after{ background: #689deb; } .management-section .tabs-content .image-box{ position: relative; background: #4527a4; overflow: hidden; min-height: 602px; max-width: 970px; width: 100%; margin: 0 auto; margin-bottom: 55px; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.5); } .management-section .tabs-content .image-box img{ width: 100%; transition: all 500ms ease; } .management-section .tabs-content .image-box:hover img{ opacity: 0.5; transform: scale(1.05); } .management-section .tab-btn-box{ position: relative; margin-bottom: 60px; } .management-section .tab-btn-box li{ position: relative; display: inline-block; font-size: 16px; line-height: 30px; font-weight: 500; color: #fff; padding: 5px 23px; border-radius: 30px; background: transparent; cursor: pointer; transition: all 500ms ease; } .management-section .tab-btn-box li.active-btn, .management-section .tab-btn-box li:hover{ background: #689deb; } .management-section .tabs-content{ position: relative; min-height: 700px; } .management-section .owl-theme .owl-dots .owl-dot span{ position: relative; background: #689deb; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; margin: 0px 10px; } .management-section .owl-theme .owl-dots .owl-dot.active span:before{ position: absolute; content: ''; border: 1px solid #fff; width: 18px; height: 18px; left: -4px; top: -4px; border-radius: 50%; z-index: 1; transition: all 500ms ease; } .management-section .owl-nav{ display: none; } .management-section .tabs-box .tab{ position:relative; display:none; } .management-section .tabs-box .tab.active-tab{ display:block; } .management-section .tabs-box .tab{ transform:scale(0) translateY(0px); } .management-section .tabs-box .tab.active-tab{ transform:scale(1) translateY(0px); } /** testimonial-style-two **/ .testimonial-style-two{ position: relative; padding: 115px 0px 125px 0px; } .testimonial-style-two .sec-title h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #4527a4; margin-bottom: 32px; } #content_block_11 .sec-title h2{ margin-bottom: 39px; } #content_block_11 .slide-content .text{ position: relative; display: block; font-size: 18px; line-height: 36px; margin-bottom: 53px; } #content_block_11 .slide-content .author-info{ position: relative; padding: 14px 0px 11px 170px; } #content_block_11 .slide-content .author-info .image-box{ position: absolute; left: 0px; top: 0px; width: 128px; height: 128px; } #content_block_11 .slide-content .author-info .image-box img{ width: 100%; } #content_block_11 .slide-content .author-info .name{ position: relative; font-size: 18px; font-weight: 700; color: #4527a4; text-transform: uppercase; margin-bottom: 11px; } #content_block_11 .slide-content .author-info .designation{ position: relative; display: block; font-size: 16px; margin-bottom: 11px; } #content_block_11 .slide-content .author-info .rating li{ position: relative; float: left; font-size: 16px; color: #ffc600; } .testimonial-style-two .owl-dots, .testimonial-style-two .owl-nav{ display: none; } #video_block_01 .video-inner{ position: relative; margin-left: 70px; padding: 160px 15px 200px 15px; margin-top: 5px; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center; } #video_block_01 .video-inner .layer-bg{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; background-position: center; transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } #video_block_01 .video-inner:hover .layer-bg { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); } #video_block_01 .video-inner a{ position: relative; display: inline-block; height: 120px; width: 120px; line-height: 120px; background: rgba(69, 39, 164, 0.5); text-align: center; font-size: 48px; color: #fff; border-radius: 50%; } #video_block_01 .video-inner a:before{ position: absolute; content: ''; border: 6px dashed #fff; width: 132px; height: 132px; left: -6px; top: -6px; border-radius: 50%; } #video_block_01 .video-inner .ripple{ width: 132px; height: 132px; } /** make-difference **/ .make-difference{ position: relative; padding: 105px 0px 175px 0px; } .make-difference .image-layer{ position: absolute; left: 0px; top: 0px; right: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .make-difference .content-box{ position: relative; margin-right: 60px; } #content_block_12 .content-box .single-item{ position: relative; padding: 0px 0px 0px 120px; margin-bottom: 55px; min-height: 103px; } #content_block_12 .content-box .single-item .icon-box{ position: absolute; left: 0px; top: 4px; width: 86px; height: 88px; transition: all 500ms ease; } #content_block_12 .content-box .single-item:hover .icon-box{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } #content_block_12 .content-box .single-item h4{ position: relative; display: block; font-size: 20px; line-height: 30px; color: #222; font-weight: 500; margin-bottom: 13px; } #content_block_12 .content-box .single-item h4 a{ display: inline-block; color: #222; } #content_block_12 .content-box .single-item h4 a:hover{ color: #4527a4; } .make-difference .sec-title{ margin-bottom: 66px; } #image_block_11 .image-box{ position: relative; margin-right: 70px; margin-top: 4px; z-index: 1; } #image_block_11 .image-box .image{ position: relative; overflow: hidden; background: #4527a4; } #image_block_11 .image-box img{ width: 100%; transition: all 500ms ease; } #image_block_11 .image-box:hover img{ transform: scale(1.05); opacity: 0.5; } #image_block_11 .image-box .layer-bg{ position: absolute; width: 510px; height: 560px; right: -180px; bottom: -10px; background-repeat: no-repeat; } .make-difference .sec-title h2{ margin-bottom: 43px; } /*** ==================================================================== Home-Page-Three ==================================================================== ***/ /** banner-style-three **/ .banner-style-three{ position: relative; padding: 315px 0px 100px 0px; } .banner-style-three .image-layer { position: absolute; top: 0px; left: 0px; width: 90%; height: 1085px; background-repeat: no-repeat; background-size: cover; background-position: right center; } .banner-style-three .content-box .top-text{ position: relative; display: block; color: #fff; margin-bottom: 20px; } .banner-style-three .content-box h1{ position: relative; display: block; font-size: 40px; color: #fff; line-height: 60px; margin-bottom: 39px; } .banner-style-three .content-box h1 span{ font-weight: 700; } .banner-style-three .content-box .text{ position: relative; display: block; color: #fff; margin-bottom: 68px; } .banner-style-three .content-box .video-box{ position: relative; display: flex; } .banner-style-three .content-box .video-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; height: 60px; padding: 15px 85px 15px 40px; background: transparent; line-height: 26px; color: #fff; border: 2px solid #fff; font-weight: 500; border-radius: 30px; text-transform: capitalize; transition: all 500ms ease; z-index: 1; } .banner-style-three .content-box .video-box a:hover{ color: #4527a4; } .banner-style-three .content-box .video-box a:before{ position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; content: ""; background-color: #fff; border-radius: 30px; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); } .banner-style-three .content-box .video-box a i { position: absolute; top: -1px; right: -1px; width: 60px; height: 60px; line-height: 60px; text-align: center; background: #4527a4; font-size: 15px; border: 2px solid #fff; color: #fff; border-radius: 50%; transition: all 900ms ease; } .banner-style-three .content-box .video-box a:hover i{ background: #fff; color: #4527a4; } .banner-style-three .content-box .video-box a:hover:before { background: #fff; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .banner-style-three .image-box{ position: relative; margin: 6px -215px 0px 35px; } .banner-style-three .image-box .image-1 img{ position: relative; max-width: none; float: left; } .banner-style-three .image-box .image-2{ position: absolute; right: 0px; top: -95px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .banner-style-three .image-box .image-3{ position: absolute; left: 0px; bottom: 225px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } /** clients-section **/ .clients-section{ position: relative; padding: 25px 0px; } .clients-section .image-box img { display: block; max-width: 100%; width: auto; margin: 0 auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .clients-section .image-box img:hover{ opacity: 0.5; } .clients-section .owl-nav{ display: none; } .clients-section .sec-title{ margin-bottom: 93px; } .clients-section .owl-dots{ position: relative; margin-top: 95px; } .clients-section .owl-theme .owl-dots .owl-dot span{ position: relative; width: 16px; height: 16px; background: transparent; border: 3px solid #a1a1a1; border-radius: 50%; margin: 0px 7px; cursor: pointer; transition: all 500ms ease; } .clients-section .owl-theme .owl-dots .owl-dot.active span{ background: #4527a4; border-color: #4527a4; } /** inside-software **/ .inside-software{ position: relative; padding: 120px 0px 160px 0px; } .inside-software .image-layer{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: bottom center; } .inside-software .content-box .text{ position: relative; display: block; margin-bottom: 59px; padding-right: 100px; } .inside-software .content-box{ position: relative; margin-top: 12px; } #content_block_13 .content-box .btn-box{ position: relative; display: flex; margin-bottom: 93px; } #content_block_13 .content-box .btn-box .theme-btn{ text-transform: uppercase; } #content_block_13 .content-box .image-box{ position: relative; margin-right: 10px; } #content_block_13 .content-box .image-box img{ width: 100%; } #content_block_13 .content-box .sec-title h2{ margin-bottom: 57px; } #content_block_14 .feature-block-one .icon-box{ position: relative; display: inline-block; font-size: 50px; line-height: 50px; color: #e86600; margin-bottom: 31px; transition: all 500ms ease; } #content_block_14 .feature-block-one{ margin-bottom: 50px; } .inside-software .inner-content{ position: relative; margin: 0px -15px; padding-right: 70px; } .inside-software .inner-content .single-column{ padding: 0px 30px; } #content_block_14 .feature-block-one .inner-box{ padding: 57px 30px 56px 30px; } #content_block_14 .feature-block-one .inner-box h5{ margin-bottom: 20px; } #content_block_14 .feature-block-one .inner-box .hover-content:before{ left: -100px; top: -290px; } #content_block_14 .feature-block-one .inner-box .hover-content:after{ left: -163px; top: -340px; } #content_block_14 .feature-block-one .inner-box:before{ left: -107px; top: -345px; } #content_block_14 .inner-content .single-column:first-child .feature-block-one:last-child .icon-box{ color: #3295ed; } #content_block_14 .inner-content .single-column:last-child .feature-block-one:first-child .icon-box{ color: #4527a4; } #content_block_14 .inner-content .single-column:last-child .feature-block-one:last-child .icon-box{ color: #27ce00; } #content_block_14 .inner-content .single-column:last-child{ padding-top: 60px; } #content_block_14 .inner-content .feature-block-one:hover .icon-box{ color: #fff !important; } /** feature-style-five **/ .feature-style-five{ position: relative; padding: 110px 0px 150px 0px; } #content_block_14 .content-box .sec-title h2{ font-size: 32px; margin-bottom: 56px; } #content_block_14 .content-box .text{ position: relative; display: block; margin-bottom: 53px; } #content_block_14 .content-box .btn-box .theme-btn{ text-transform: uppercase; } .feature-style-five .inner-box:first-child .image-box{ position: relative; display: block; margin: 0px 0px 0px 100px; } .feature-style-five .inner-box:first-child .image-box .image-1{ position: relative; } #image_block_12 .image-box img{ width: 100%; } #image_block_12 .image-box .image{ box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); } #image_block_12 .image-box .image-2{ position: absolute; left: -80px; bottom: 50px; } .feature-style-five .inner-box{ position: relative; display: block; margin-bottom: 240px; } .feature-style-five .inner-box:last-child{ margin-bottom: 0px; } .feature-style-five .inner-box:nth-child(2){ margin-bottom: 240px; } .feature-style-five .inner-box:nth-child(2) .content-box{ margin-left: 70px !important; } .feature-style-five .inner-box:nth-child(2) .image-box .image-1{ position: relative; } .feature-style-five .inner-box:nth-child(2) .image-box .image-2{ position: absolute; left: -70px; bottom: 50px; } .feature-style-five .inner-box:last-child .content-box .text{ padding-right: 70px; } #content_block_14 .content-box{ position: relative; margin: 30px 0px; } #image_block_13 .image-box{ position: relative; overflow: hidden; background: #4527a4; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); } #image_block_13 .image-box img{ width: 100%; transition: all 500ms ease; } #image_block_13 .image-box:hover img{ transform: scale(1.05); opacity: 0.5; } /** testimonial-style-three **/ .testimonial-style-three{ position: relative; padding: 15px 0px 120px 0px; } .testimonial-style-three .image-layer{ position: absolute; top: 0px; right: 0px; width: 70%; height: 100%; background-repeat: no-repeat; background-position: bottom center; background-size: cover; } .testimonial-style-three .sec-title{ max-width: 450px; width: 100%; padding-bottom: 55px; } .testimonial-style-three .sec-title .icon-box{ position: relative; display: inline-block; font-size: 90px; line-height: 90px; margin-bottom: 35px; color: #e1e1e1; } .testimonial-style-three .testimonial-content{ position: relative; text-align: center; } .testimonial-style-three .testimonial-content .image-box{ position: relative; display: inline-block; width: 113px; height: 113px; border: 2px solid #fff; border-radius: 50%; margin-bottom: 42px; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.3); } .testimonial-style-three .testimonial-content .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-three .testimonial-content .text{ position: relative; display: block; font-size: 18px; line-height: 36px; color: #fff; margin-bottom: 46px; } .testimonial-style-three .testimonial-content .author-info .name{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #fff; font-weight: 500; margin-bottom: 14px; } .testimonial-style-three .testimonial-content .author-info .designation{ position: relative; display: block; font-size: 16px; color: #a180ff; } .testimonial-style-three .owl-nav{ display: none; } .testimonial-style-three .owl-dots{ position: relative; text-align: center; margin-top: 17px; } .testimonial-style-three .owl-theme .owl-dots .owl-dot span{ position: relative; width: 10px; height: 10px; background: #7f66c6; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } .testimonial-style-three .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-three .owl-theme .owl-dots .owl-dot span:hover{ background: #fff; } .testimonial-style-three .thumb-box{ position: absolute; left: 0; top: 0; right: 0px; width: 100%; height: 100%; max-width: 1920px; margin: 0 auto; } .testimonial-style-three .thumb-box .image{ position: absolute; border-radius: 50%; opacity: 0.7; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-three .thumb-box .image img{ border-radius: 50%; } .testimonial-style-three .thumb-box .image-1{ left: 10px; top: 200px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-three .thumb-box .image-2{ left: 350px; top: 50%; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .testimonial-style-three .thumb-box .image-3{ left: -10px; bottom: 100px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .testimonial-style-three .thumb-box .image-4{ right: 300px; top: 150px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-three .thumb-box .image-5{ right: -50px; top: 140px; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .testimonial-style-three .thumb-box .image-6{ right: 50px; bottom: 270px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .testimonial-style-three .thumb-box .image-7{ right: 330px; bottom: 100px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } /** pricing-style-two **/ .pricing-style-two{ position: relative; background: #f8f6ff; padding: 115px 0px 120px 0px; } .pricing-style-two .sec-title{ margin-bottom: 110px; } .pricing-block-two .pricing-table{ position: relative; display: block; overflow: hidden; background: #4527a4; padding: 41px 15px 45px 15px; border-radius: 30px; transition: all 500ms ease; } .pricing-block-two .pricing-table .choice-box{ position: absolute; width: 100%; left: -115px; top: 40px; background: #4527a4; color: #fff; font-size: 14px; line-height: 24px; font-weight: 500; text-transform: uppercase; text-align: center; padding: 10px 30px; transform: rotate(-45deg); transition: all 500ms ease; opacity: 0; } .pricing-block-two:hover .pricing-table .choice-box{ opacity: 1; } .pricing-block-two:hover .pricing-table{ background: #fff; margin: -30px 0px; padding: 71px 15px 75px 15px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .pricing-block-two .pricing-table .table-header .title{ position: relative; font-size: 24px; line-height: 32px; color: #fff; font-weight: 500; margin-bottom: 3px; transition: all 500ms ease; } .pricing-block-two .pricing-table .table-header .text{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 11px; transition: all 500ms ease; } .pricing-block-two .pricing-table .table-header .price{ position: relative; display: inline-block; font-size: 48px; line-height: 55px; color: #fff; font-weight: 500; margin: 0px; transition: all 500ms ease; } .pricing-block-two .pricing-table .table-header .price:before { position: absolute; content: "$"; font-size: 24px; line-height: 30px; font-weight: 500; color: #fff; left: -14px; bottom: 16px; transition: all 500ms ease; } .pricing-block-two .pricing-table .table-header .price span{ font-size: 14px; font-weight: 400; } .pricing-block-two .pricing-table .table-content{ position: relative; display: block; padding: 5px 0px 17px 0px; } .pricing-block-two .pricing-table .table-content li{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 8px; transition: all 500ms ease; } .pricing-block-two .pricing-table .table-content li:last-child{ margin-bottom: 0px; } .pricing-block-two .pricing-table .table-footer a{ position: relative; display: inline-block; background: #111; font-size: 16px; color: #fff; text-align: center; padding: 10px 40px; border-radius: 30px; } .pricing-block-two:hover .pricing-table .table-header .title, .pricing-block-two:hover .pricing-table .table-header .price, .pricing-block-two:hover .pricing-table .table-header .price:before{ color: #111; } .pricing-block-two:hover .pricing-table .table-header .text, .pricing-block-two:hover .pricing-table .table-content li{ color: #777; } .pricing-block-two:hover .pricing-table .table-footer a{ background: #4527a4; } .subscribe-section.home-3{ padding-top: 115px; } /** footer-style-two **/ .main-footer.style-two{ position: relative; } .main-footer.style-two .footer-top .about-widget .text, .main-footer.style-two .footer-top .about-widget .social-links h6, .main-footer.style-two .footer-top .about-widget .social-links li a, .main-footer.style-two .footer-top .widget-title, .main-footer.style-two .footer-top .links-widget .list li a, .main-footer.style-two .footer-top .links-widget .list li a:before, .main-footer.style-two .footer-top .contact-widget .list li, .main-footer.style-two .footer-top .contact-widget .list li a, .main-footer.style-two .footer-bottom .copyright, .main-footer.style-two .footer-bottom .copyright a{ color: #fff; } .main-footer.style-two .footer-top .about-widget .social-links li a:hover, .main-footer.style-two .footer-top .links-widget .list li a:hover, .main-footer.style-two .footer-top .links-widget .list li a:hover:before, .main-footer.style-two .footer-top .contact-widget .list li i, .main-footer.style-two .footer-top .contact-widget .list li a:hover{ color: #009cff; } .main-footer.style-two .footer-top .widget-title:before{ background: #fff; } .main-footer.style-two .footer-top .widget-title:after{ background: #3230b2; } /*** ==================================================================== Home-Page-Four ==================================================================== ***/ .banner-style-four { position: relative; padding: 285px 0px 180px 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: bottom center; } .banner-style-four .pattern-bg{ position: absolute; width: 100px; height: 245px; left: -10px; top: 50%; opacity: 0.2; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; background-repeat: no-repeat; } .banner-style-four .content-box h1 { position: relative; display: block; font-size: 48px; color: #fff; font-weight: 500; line-height: 72px; margin-bottom: 34px; } .banner-style-four .content-box .text { position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 52px; } .banner-style-four .content-box .btn-box .video-btn { position: relative; display: inline-block; overflow: hidden; font-size: 15px; height: 50px; padding: 14px 60px 10px 30px; background: #0188e7; line-height: 24px; color: #fff; font-weight: 500; border-radius: 30px; text-transform: capitalize; transition: all 500ms ease; z-index: 1; } .banner-style-four .content-box .btn-box .video-btn:hover{ background: #fff; color: #0188e7; } .banner-style-four .content-box .btn-box .video-btn i { position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #fff; font-size: 15px; color: #0188e7; border-radius: 50%; transition: all 900ms ease; } .banner-style-four .content-box .btn-box .video-btn:hover i{ background: #0188e7; color: #fff; } .banner-style-four .content-box .btn-box .link-btn{ position: relative; display: inline-block; overflow: hidden; font-size: 15px; font-weight: 500; color: #fff; line-height: 26px; padding: 11px 25.5px; text-align: center; border: 1px solid #fff; border-radius: 30px; margin-right: 35px; z-index: 1; } .banner-style-four .content-box .btn-box .link-btn:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #0188e7; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-four .content-box .btn-box .link-btn:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-four .content-box .btn-box .link-btn:hover{ background: #0188e7; border-color: #0188e7; } .banner-style-four .content-box .btn-box .link-btn i{ position: relative; top: 2px; margin-left: 15px; } .banner-style-four .image-box{ position: relative; display: block; margin: 0px -200px 0px 150px; } .banner-style-four .image-box .layer-bg{ position: absolute; width: 200px; height: 345px; top: -130px; right: 150px; background-repeat: no-repeat; } .banner-style-four .anim-icons .icon-1 { left: 190px; top: 80px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-four .anim-icons .icon-2 { left: 190px; bottom: 350px; } .rotate-me { animation-name: rotateme; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotateme; -moz-animation-duration: 30s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: rotateme; -ms-animation-duration: 30s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: rotateme; -o-animation-duration: 30s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .banner-style-four .anim-icons .icon-3 { left: 50%; bottom: 250px; } /** feature-style-six **/ .feature-style-six{ position: relative; padding: 100px 0px 100px 0px; } #content_block_15 .content-box{ position: relative; margin: 30px 0px; } #content_block_15 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 54px; } #content_block_15 .content-box .sec-title h2{ margin-bottom: 33px; } .feature-style-six .inner-box:first-child .image-box{ margin-left: 70px; } #image_block_14 .image-box{ position: relative; } #image_block_14 .image-box .bg-layer{ position: absolute; width: 750px; height: 735px; top: -85px; left: 235px; background-repeat: no-repeat; } #image_block_14 .image-box .image-1 img{ max-width: none; float: left; } #image_block_14 .image-box .image-2{ position: absolute; left: -65px; bottom: -45px; } .feature-style-six .inner-box:first-child{ margin-bottom: 210px; } .feature-style-six .inner-box:last-child .image-box{ margin-right: 70px; } #image_block_15 .image-box{ position: relative; } #image_block_15 .image-box img{ max-width: none; float: right; } /** testimonial-style-four **/ .testimonial-style-four{ position: relative; padding: 135px 0px 100px 0px; } .testimonial-style-four .image-layer{ position: absolute; width: 100%; height: 1710px; left: 0px; top: -600px; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .testimonial-style-four .sec-title{ margin-bottom: 50px; } .testimonial-style-four .sec-title h2, .testimonial-style-four .sec-title p{ color: #fff; } .testimonial-style-four .sec-title h2:after{ background: #fff; } .testimonial-style-four .testimonial-inner{ position: relative; max-width: 1830px; width: 100%; margin: 0 auto; left: 210px; } .testimonial-style-four .testimonial-content{ position: relative; margin: 25px; } .testimonial-style-four .testimonial-content .inner-box{ position: relative; display: block; background: #fff; padding: 39px 30px 50px 55px; border-radius: 20px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-four .testimonial-content .inner-box .icon-box{ position: absolute; top: 60px; right: 60px; } .testimonial-style-four .testimonial-content .inner-box .author-info{ position: relative; padding: 40px 0px 15px 140px; margin-bottom: 28px; } .testimonial-style-four .testimonial-content .inner-box .author-info .image-box{ position: absolute; left: 0px; top: 0px; width: 110px; height: 110px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-four .testimonial-content .inner-box .author-info .image-box img{ border-radius: 50%; width: 100%; } .testimonial-style-four .testimonial-content .inner-box .author-info .name{ position: relative; font-size: 18px; font-weight: 500; color: #4527a4; text-transform: uppercase; margin-bottom: 4px; } .testimonial-style-four .testimonial-content .inner-box .author-info .designation{ position: relative; display: block; font-size: 18px; color: #aaaaaa; } .testimonial-style-four .testimonial-content .inner-box .text{ position: relative; display: block; font-size: 16px; line-height: 36px; } .testimonial-style-four .owl-nav{ display: none; } .testimonial-style-four .owl-dots{ position: relative; text-align: center; margin-top: 25px; } .testimonial-style-four .owl-theme .owl-dots .owl-dot span{ position: relative; width: 15px; height: 15px; background: #cccccc; border-radius: 50%; margin: 0px 10px; cursor: pointer; transition: all 500ms ease; } .testimonial-style-four .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-four .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; } /** pricing-style-three **/ .pricing-style-three{ position: relative; padding: 275px 0px 235px 0px; } .pricing-style-three .pricing-block-two{ max-width: 370px; width: 100%; } .pricing-style-three .inner-box{ position: relative; margin-top: 30px; min-height: 485px; } .pricing-style-three .tab .pricing-block-two:first-child{ position: absolute; left: 0px; top: -80px; z-index: 1; } .pricing-style-three .tab .pricing-block-two:first-child .pricing-table { background: #fff; margin: -30px 0px; padding: 71px 15px 75px 15px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .choice-box{ opacity: 1; } .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .table-header .title, .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .table-header .price, .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .table-header .price:before { color: #111; } .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .table-header .text, .pricing-style-three .tab .pricing-block-two:first-child .pricing-table .table-content li { color: #777; } .pricing-style-three .tab .pricing-block-two:last-child{ position: absolute; top: 0px; right: 0px; } .pricing-style-three .tab .pricing-block-two:last-child .pricing-table:hover{ padding: 41px 15px 45px 15px; margin: 0px; background: #4527a4; } .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-header .title, .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-header .price, .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-header .price:before{ color: #fff; } .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-header .text, .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-content li{ color: #fff; } .pricing-style-three .tab .pricing-block-two:last-child:hover .pricing-table .table-footer a{ background: #111; } .pricing-style-three .tab-btn-box .tab-btns { position: relative; display: inline-block; } .pricing-style-three .tab-btn-box .tab-btns:before { position: absolute; left: 0; right: 0; margin: 0 auto; height: 40px; width: 90px; content: ""; border-radius: 30px; border: 1px solid #4527a4; } .pricing-style-three .tab-btn-box .tab-btns li{ position: relative; display: inline-block; padding-right: 70px; min-width: 120px; text-align: right; font-size: 16px; line-height: 40px; font-weight: 500; color: #4527a4; cursor: pointer; transition: all 500ms ease; } .pricing-style-three .tab-btn-box .tab-btns li:last-child{ padding-right: 0; padding-left: 57px; text-align: left; } .pricing-style-three .tab-btn-box .tab-btns li.active-btn:before { right: 15px; } .pricing-style-three .tab-btn-box .tab-btns li:before { position: absolute; top: 5px; height: 30px; width: 30px; background-color: #4527a4; border-radius: 30px; content: ""; right: -35px; -webkit-box-shadow: 0 4px 20px rgba(44,44,56,.30); box-shadow: 0 4px 20px rgba(44,44,56,.30); -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .pricing-style-three .tab-btn-box .tab-btns li:last-child:before{ display: none; } .pricing-style-three .content-box{ position: relative; margin-right: 100px; } .pricing-style-three .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 55px; } /*** ==================================================================== Home-Page-Five ==================================================================== ***/ .main-header .menu-right-content{ position: relative; float: left; margin-top: 70px; margin-left: 130px; } .main-header .menu-right-content .cart-box-outer{ position: relative; display: inline-block; } .main-header .menu-right-content .cart-box-outer a{ position: relative; font-size: 30px; line-height: 30px; color: #fff; } .main-header .menu-right-content .cart-box-outer a span{ position: absolute; top: -3px; right: -9px; font-size: 11px; color: #fff; background: #000; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; } /** search box btn **/ /*지워도 됨 .main-header .search-box-outer { position: relative; display: inline-block; vertical-align: middle; margin-left: 35px; } */ .main-header .search-box-btn { position: relative; font-size: 30px; line-height: 30px; color: #ffffff; cursor: pointer; display: inline-block; background: transparent; } .main-header .header-upper.dark .search-box-btn { color: #fff; } .main-header .search-box-outer .dropdown-menu { top: 40px !important; padding: 0px; width: 330px; border-radius: 0px; background: #ffffff; right: 0; left: auto !important; transform: translate3d(0px, 0px, 0px) scale3d(0.8,0.8,0.8) !important; border-color: transparent; border-radius: 3px; box-shadow: 7px 5px 30px 0 rgba(72,73,121,0.15); transition: .5s ease; display: block; opacity: 0; visibility: hidden; } .main-header .search-box-outer .show .dropdown-menu { display: block; transform: scale3d(1,1,1)!important; opacity: 1; visibility: visible; } .main-header .search-panel .form-container { padding: 30px; } .main-header .search-panel .form-group { position: relative; margin: 0px; } .main-header .search-panel input[type="text"], .main-header .search-panel input[type="search"], .main-header .search-panel input[type="password"], .main-header .search-panel select { display: block; width: 100%; line-height: 24px; padding: 9px 50px 9px 15px; height: 50px; border: 1px solid #f3f5fe; border-radius: 3px; background: #f3f5fe; } .main-header .search-panel input:focus, .main-header .search-panel select:focus { border-color: #f3f5fe; } .main-header .search-panel .search-btn { position: absolute; right: 1px; top: 1px; width: 50px; height: 48px; text-align: center; color: #111111; background: #f3f5fe; font-size: 14px; border-radius: 0px 3px 3px 0px; cursor: pointer; } .dropdown-toggle::after { display: none; } /** innovative-idea **/ .innovative-idea{ position: relative; padding-bottom: 80px; } .innovative-idea .sec-title{ margin-bottom: 55px; } .innovative-idea .single-item{ position: relative; margin-bottom: 30px; display: block; background: #fff; padding: 33px 30px 48px 30px; border-radius: 25px; transition: all 500ms ease; } .innovative-idea .single-item:hover{ box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .innovative-idea .single-item .inner-box{ position: relative; padding-left: 200px; padding-top: 15px; } .innovative-idea .single-item .inner-box .icon-box{ position: absolute; display: inline-block; left: 0px; top: 0px; font-size: 60px; color: #fff; width: 170px; height: 160px; line-height: 160px; text-align: center; z-index: 1; transition: all 500ms ease; } .innovative-idea .single-item .inner-box .icon-box .bg-layer{ position: absolute;; width: 170px; height: 160px; left: 0px; top: 0px; background-repeat: no-repeat; z-index: -1; transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .innovative-idea .single-item:hover .inner-box .icon-box .bg-layer{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .innovative-idea .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 12px; } .innovative-idea .single-item .inner-box h3 a{ color: #222; } .innovative-idea .single-item .inner-box h3 a:hover{ color: #4527a4; } .innovative-idea .single-item .inner-box .text{ position: relative; display: block; } /** download-apps **/ .download-apps{ position: relative; padding: 100px 0px 100px 0px; } #content_block_16 .content-box .download-btn a{ position: relative; display: inline-block; font-size: 20px; line-height: 21px; font-weight: 500; color: #fff; background: #4527a4; border-radius: 10px; padding: 10px 21px 14px 80px; } #content_block_16 .content-box .download-btn a:hover{ background: #fff; color: #4527a4; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); } #content_block_16 .content-box .download-btn a span{ position: relative; display: block; font-size: 12px; } #content_block_16 .content-box .download-btn a i{ position: absolute; left: 30px; top: 14px; font-size: 36px; color: #fff; transition: all 500ms ease; } #content_block_16 .content-box .download-btn a:hover i{ color: #222; } #content_block_16 .content-box .download-btn .app-store-btn{ margin-right: 40px; } #content_block_16 .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 42px; padding-right: 100px; margin-bottom: 59px; } #content_block_16 .content-box .sec-title h2{ margin-bottom: 73px; } #image_block_16 .image-box{ position: relative; margin-left: -60px; margin-right: 60px; } #image_block_16 .image-box .bg-layer{ position: absolute; width: 815px; height: 785px; top: 0px; right: 10px; background-repeat: no-repeat; } #image_block_16 .image-box .image-1{ position: relative; left: 40px; } #image_block_16 .image-box .image-2{ position: absolute; left: 0px; top: -80px; z-index: 1; } .download-apps .anim-icons .icon-1 { top: 50px; right: 50%; background-repeat: no-repeat; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .download-apps .anim-icons .icon-2 { top: 180px; right: 240px; background-repeat: no-repeat; } .download-apps .anim-icons .icon-3 { bottom: 200px; right: 240px; background-repeat: no-repeat; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .download-apps .anim-icons .icon-4 { right: 42%; bottom: 100px; background-repeat: no-repeat; } /** application-setup **/ .application-setup{ position: relative; padding: 75px 0px 100px 0px; } .application-setup .sec-title{ margin-bottom: 95px; } .application-setup .single-item{ position: relative; } .application-setup .single-item .inner-box{ position: relative; display: block; overflow: hidden; background: #fff; padding: 74px 30px 39px 30px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); border-top-left-radius: 50px; z-index: 1; transition: all 500ms ease; } .application-setup .single-item .inner-box:before{ position: absolute; content: ''; background: rgba(245, 245, 245, 0.5); width: 470px; height: 470px; right: -115px; bottom: -470px; border-radius: 50%; transition: all 500ms ease; } .application-setup .single-item:hover .inner-box:before{ bottom: -270px; } .application-setup .single-item .inner-box:after{ position: absolute; content: ''; background: rgba(245, 245, 245, 0.7); width: 470px; height: 470px; right: -145px; bottom: -470px; border-radius: 50%; z-index: -1; transition: all 1500ms ease; } .application-setup .single-item:hover .inner-box:after{ bottom: -330px; } .application-setup .single-item .count-box{ position: absolute; left: 80px; top: -30px; font-size: 24px; font-weight: 500; color: #fff; width: 70px; height: 70px; line-height: 70px; text-align: center; background-image: -webkit-linear-gradient(-45deg, #092ef1 0%, #010570 100%); border-radius: 50%; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; z-index: 2; } .application-setup .single-column:nth-child(2) .single-item .count-box{ background-image: -webkit-linear-gradient(-45deg, #fab000 0%, #cd8400 100%); -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .application-setup .single-column:last-child .single-item .count-box{ background-image: -webkit-linear-gradient(-45deg, #9ff300 0%, #1a8300 100%); -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .application-setup .single-item .inner-box h3{ position: relative; display: block; font-size: 22px; line-height: 36px; font-weight: 500; color: #222; margin-bottom: 25px; } .application-setup .single-item .inner-box h3 a{ display: inline-block; color: #222; } .application-setup .single-item .inner-box h3 a:hover{ color: #4527a4; } .application-setup .single-item .inner-box .text{ position: relative; font-size: 16px; } .application-setup .single-column:nth-child(2){ padding-top: 70px; } /** clients-style-two **/ .clients-style-two{ position: relative; padding: 25px 0px 55px 0px; } .clients-style-two .owl-dots, .clients-style-two .owl-nav{ display: none; } .clients-style-two .inner-container{ position: relative; display: block; background: #fff; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); text-align: center; padding: 55px 30px; } .clients-style-two .inner-container:before{ position: absolute; content: ''; background: #fff; width: calc(100% - 100px); height: 100%; left: 50px; top: 28px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); z-index: -1; } .clients-style-two .image-box img { display: block; max-width: 100%; width: auto; margin: 0 auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .clients-style-two .image-box img:hover{ opacity: .5; } /** optimization-application **/ .optimization-application{ position: relative; padding: 95px 0px 100px 0px; } #content_block_17 .content-box h3{ position: relative; display: block; font-size: 22px; line-height: 36px; color: #4527a4; font-weight: 500; margin-bottom: 28px; } #content_block_17 .content-box .text{ position: relative; padding-bottom: 49px; } #content_block_17 .content-box .text p{ position: relative; font-size: 16px; margin-bottom: 30px; } #content_block_17 .content-box .text p:last-child{ margin-bottom: 0px; } #content_block_17 .content-box .list-item{ display: block; margin-bottom: 56px; } #content_block_17 .content-box .list-item li{ position: relative; display: block; font-size: 18px; font-weight: 600; color: #222; line-height: 30px; margin-bottom: 18px; padding-left: 45px; } #content_block_17 .content-box .list-item li:before{ position: absolute; content: "\f14a"; font-family: 'Font Awesome 5 Free'; font-size: 18px; line-height: 30px; color: #ec5f0d; font-weight: 700; left: 0px; top: 2px; } #content_block_17 .content-box .list-item li:last-chld{ margin-bottom: 0px; } #content_block_17 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 43px; } #content_block_17 .content-box{ position: relative; padding: 40px 0px; } #image_block_17 .image-box{ position: relative; display: block; padding: 0px 60px 0px 140px; } #image_block_17 .image-box .image{ position: relative; display: inline-block; border-radius: 10px; box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1); } #image_block_17 .image-box .image img{ border-radius: 10px; } #image_block_17 .image-box .image-1 img{ width: 100%; } #image_block_17 .image-box .image-1{ border-radius: 0px; } #image_block_17 .image-box .image-2{ position: absolute; left: 0px; top: 130px; } #image_block_17 .image-box .image-3{ position: absolute; left: 55px; bottom: 40px; } #image_block_17 .image-box .image-4{ position: absolute; right: -25px; bottom: 70px; } /** testimonial-style-five **/ .testimonial-style-five{ position: relative; padding: 140px 0px 170px 0px; width: 100%; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 1; } .testimonial-style-five .pattern-layer1{ position: absolute; width: 455px; height: 930px; left: 0px; top: 160px; background-repeat: no-repeat; animation-name: slideInLeft; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInLeft; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInLeft; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInLeft; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .testimonial-style-five .pattern-layer2{ position: absolute; width: 315px; height: 720px; right: 0px; top: 0px; background-repeat: no-repeat; z-index: -1; animation-name: slideInRight; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInRight; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInRight; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .testimonial-style-five .sec-title h2, .testimonial-style-five .sec-title p{ color: #fff; } .testimonial-style-five .sec-title h2:after{ background: #fff; } .testimonial-style-five .sec-title{ margin-bottom: 38px; } .testimonial-style-five .testimonial-content .inner-box { position: relative; display: block; background: #fff; padding: 40px 30px 50px 55px; border-radius: 20px; } .testimonial-style-five .testimonial-content .inner-box .icon-box { position: absolute; top: 60px; right: 60px; } .testimonial-style-five .testimonial-content .inner-box .author-info { position: relative; padding: 40px 0px 15px 140px; margin-bottom: 28px; } .testimonial-style-five .testimonial-content .inner-box .author-info .image-box { position: absolute; left: 0px; top: 0px; width: 110px; height: 110px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-five .testimonial-content .inner-box .author-info .image-box img { border-radius: 50%; width: 100%; } .testimonial-style-five .testimonial-content .inner-box .author-info .name { position: relative; font-size: 18px; font-weight: 500; color: #4527a4; text-transform: uppercase; margin-bottom: 4px; } .testimonial-style-five .testimonial-content .inner-box .author-info .designation { position: relative; display: block; font-size: 18px; color: #aaaaaa; } .testimonial-style-five .testimonial-content .inner-box .text { position: relative; display: block; font-size: 16px; line-height: 36px; } .testimonial-style-five .owl-nav{ display: none; } .testimonial-style-five .owl-dots{ position: absolute; top: -63px; right: -7px; } .testimonial-style-five .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 16px; height: 16px; background: #ab90ff; border-radius: 50%; margin: 0px 7px; cursor: pointer; transition: all 500ms ease; } .testimonial-style-five .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-five .owl-theme .owl-dots .owl-dot span:hover{ background: #fff; } .subscribe-section.home-5{ padding-top: 120px; } /*** ==================================================================== Home-Page-Six ==================================================================== ***/ /** recruitment-section **/ .recruitment-section{ position: relative; padding-bottom: 120px; } .recruitment-section .single-item .inner-box{ position: relative; display: block; padding: 40px 30px 25px 30px; transition: all 500ms ease; } .recruitment-section .single-item:hover .inner-box{ box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); } .recruitment-section .single-item .icon-box{ position: relative; display: inline-block; font-size: 65px; line-height: 65px; color: #4527a4; margin-bottom: 34px; transition: all 500ms ease; } .recruitment-section .single-item:hover .icon-box{ transform: scale(1.1); } .recruitment-section .single-item h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 19px; } .recruitment-section .single-item h3 a{ display: inline-block; color: #222; } .recruitment-section .single-item h3 a:hover{ color: #4527a4; } .recruitment-section .single-item .text{ position: relative; font-size: 16px; } .recruitment-section .sec-title h2{ margin-bottom: 61px; } .recruitment-section .btn-box{ position: relative; display: block; margin-top: 48px; } .recruitment-section .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 500; color: #4527a4; background: #fff; padding: 10px 43px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1); } .recruitment-section .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .recruitment-section .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .recruitment-section .btn-box a:hover{ background: #4527a4; color: #fff; } /** project-inquiry **/ .project-inquiry{ position: relative; padding-bottom: 50px; } .project-inquiry .image-layer{ position: absolute; width: 100%; height: 1110px; left: 0px; top: 120px; background-repeat: no-repeat; background-size: cover; background-position: center; } .project-inquiry .image-inner{ position: relative; margin-bottom: 180px; } .project-inquiry .image-inner .image-box{ position: relative; display: block; } .project-inquiry .image-inner .image-box .image-1{ position: relative; float: left; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); } .project-inquiry .image-inner .image-box .image-2{ position: absolute; right: 0px; bottom: -50px; } .project-inquiry .content-inner .top-content .text{ position: relative; font-size: 16px; margin-bottom: 44px; } .project-inquiry .content-inner .top-content .btn-box{ position: relative; display: flex; } .project-inquiry .content-inner .top-content .btn-box .theme-btn{ background: #fff; } .project-inquiry .content-inner .top-content .btn-box .theme-btn{ text-transform: uppercase; } .project-inquiry .content-inner .top-content{ margin-bottom: 115px; } .project-inquiry .content-inner .content-box{ position: relative; padding-top: 80px; } .project-inquiry .content-inner .lower-content{ position: relative; margin-left: 60px; } .project-inquiry .content-inner .single-item .inner-box{ position: relative; background: #4527a4; padding: 46px 30px 51px 35px; border-radius: 20px; overflow: hidden; z-index: 1; transition: all 500ms ease; } .project-inquiry .content-inner .single-item .inner-box:before { position: absolute; content: ''; background: rgba(255, 255, 255, 0.05); width: 470px; height: 470px; right: 20px; bottom: -470px; border-radius: 50%; transition: all 900ms ease; } .project-inquiry .content-inner .single-item .inner-box:after { position: absolute; content: ''; background: rgba(255, 255, 255, 0.05); width: 470px; height: 470px; right: 35px; bottom: -470px; border-radius: 50%; z-index: -1; transition: all 1500ms ease; } .project-inquiry .content-inner .single-item:hover .inner-box:before { bottom: -230px; } .project-inquiry .content-inner .single-item:hover .inner-box:after { bottom: -260px; } .project-inquiry .content-inner .single-item .inner-box .icon-box{ position: relative; display: inline-block; font-size: 65px; line-height: 65px; color: #fff; margin-bottom: 37px; } .project-inquiry .content-inner .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #fff; font-weight: 500; margin-bottom: 19px; } .project-inquiry .content-inner .single-item .inner-box h3 a{ color: #fff; } .project-inquiry .content-inner .single-item .inner-box .text{ position: relative; color: #fff; } .project-inquiry .content-inner .inner-content .single-item{ margin-bottom: 60px; } .project-inquiry .content-inner .inner-content .single-column{ padding: 0px 30px; } .project-inquiry .content-inner .inner-content{ position: relative; margin: 0px -15px; padding-left: 90px; } .project-inquiry .content-inner .inner-content .single-column:last-child{ padding-top: 90px; } .project-inquiry .content-inner .inner-content .single-column:first-child .single-item:first-child .inner-box{ background: #ff0000; } .project-inquiry .content-inner .inner-content .single-column:first-child .single-item:last-child .inner-box{ background: #f71da3; } .project-inquiry .content-inner .inner-content .single-column:last-child .single-item:first-child .inner-box{ background: #10a500; } .project-inquiry .content-inner .inner-content .single-column:last-child .single-item:last-child .inner-box{ background: #0000ff; } .project-inquiry .content-inner .inner-content .single-item .inner-box:before, .project-inquiry .content-inner .inner-content .single-item .inner-box:after{ background: rgba(255, 255, 255, 0.2); } /** industries-service **/ .industries-service{ position: relative; padding-bottom: 120px; } .industries-service .list-item li{ position: relative; display: block; } .industries-service .list-item li a{ position: relative; display: block; font-size: 15px; color: #777; padding: 20.5px 0px; border-bottom: 1px solid #cccccc; } .industries-service .list-item li a i{ position: relative; float: right; color: #4527a4; top: 8px; } .industries-service .list-item li a:hover{ color: #4527a4; } .industries-service .inner-content{ position: relative; margin: 0px -15px; } .industries-service .inner-content .column{ padding: 0px 30px; } .industries-service .sec-title{ margin-bottom: 64px; } .industries-service .inner-content .btn-box{ position: relative; display: block; margin-top: 70px; } .industries-service .inner-content .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 500; color: #4527a4; background: #fff; padding: 10px 35px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1); } .industries-service .inner-content .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .industries-service .inner-content .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .industries-service .inner-content .btn-box a:hover{ background: #4527a4; color: #fff; } /** video-style-two **/ .video-style-two{ position: relative; background: #f2eeff; overflow: hidden; padding: 110px 0px 120px 0px; } .video-style-two .video-inner{ position: relative; display: block; max-width: 870px; width: 100%; background: #4527a4; margin: 0 auto; padding: 195px 0px; text-align: center; border-radius: 30px; } .video-style-two .video-inner a{ position: relative; display: inline-block; font-size: 48px; color: #f7bf25; width: 130px; height: 130px; line-height: 130px; text-align: center; background: #fff; border-radius: 50%; -webkit-animation: pulse 5s infinite; -o-animation: pulse 5s infinite; animation: pulse 5s infinite; } .video-style-two .sec-title{ margin-bottom: 56px; } .video-style-two .vector-image .image-1{ position: absolute; left: 0px; top: 0px; } .video-style-two .vector-image .image-2{ position: absolute; right: 0px; top: 0px; } .video-style-two .vector-image .image-3{ position: absolute; left: 0px; bottom: 0px; animation-name: slideInUp; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInUp; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInUp; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInUp; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .video-style-two .vector-image .image-4{ position: absolute; right: 0px; bottom: 0px; animation-name: slideInUp; animation-duration: 3s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInUp; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInUp; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInUp; -ms-animation-duration: 3s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } /** testimonial-style-six **/ .testimonial-style-six{ position: relative; padding: 167px 0px 200px 0px; } .testimonial-style-six .owl-dots{ display: none; } .testimonial-style-six .testimonial-content .image-box{ position: relative; margin-left: 70px; margin-top: 50px; } .testimonial-style-six .testimonial-content .image-box:before{ position: absolute; content: ''; background: #f7bf25; width: 100%; height: 100%; left: -50px; top: -50px; border-radius: 50%; } .testimonial-style-six .testimonial-content .image-box:after{ position: absolute; content: "\f10d"; font-family: 'Font Awesome 5 Free'; font-size: 130px; font-weight: 700; color: #4527a4; right: 30px; top: 20px; } .testimonial-style-six .testimonial-content .image-box .image{ position: relative; display: inline-block; border-radius: 50%; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-six .testimonial-content .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-six .testimonial-content .content-box{ position: relative; display: block; margin-left: 50px; } .testimonial-style-six .testimonial-content .content-box:before{ position: absolute; content: "\f10e"; font-family: 'Font Awesome 5 Free'; font-size: 70px; color: #cccccc; font-weight: 700; right: 0px; bottom: 20px; } .testimonial-style-six .testimonial-content .content-box .text{ position: relative; display: block; font-size: 20px; line-height: 48px; margin-bottom: 40px; } .testimonial-style-six .testimonial-content .content-box .author-info .name{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #4527a4; font-weight: 500; margin-bottom: 18px; } .testimonial-style-six .testimonial-content .content-box .author-info .designation{ font-size: 18px; } .testimonial-style-six .sec-title{ margin-left: 50px; padding-right: 20px; } .testimonial-style-six .inner-box{ position: relative; margin-top: -130px; } .testimonial-style-six .testimonial-content .content-box{ padding-top: 90px; } .testimonial-style-six .owl-nav{ position: absolute; left: 50%; bottom: 30px; margin-left: 48px; } .testimonial-style-six .owl-nav .owl-prev, .testimonial-style-six .owl-nav .owl-next{ position: relative; display: inline-block; font-size: 30px; line-height: 30px; color: #777; font-weight: 700; margin: 0px 25px; cursor: pointer; z-index: 1; transition: all 500ms ease; } .testimonial-style-six .owl-nav .owl-prev:before{ position: absolute; content: ''; background: #4527a4; height: 30px; width: 2px; top: 0px; right: -26px; } .testimonial-style-six .owl-nav .owl-prev:hover, .testimonial-style-six .owl-nav .owl-next:hover{ color: #4527a4; } .testimonial-style-six .testimonial-content{ position: relative; margin-bottom: 40px; } /** subscribe-style-two **/ .subscribe-style-two{ position: relative; width: 100%; padding: 110px 0px 360px 0px; background: #4527a4; margin-bottom: -240px; } .subscribe-style-two .sec-title h2{ color: #fff; margin-bottom: 54px; } .subscribe-style-two .sec-title h2:after{ background: #fff; } .subscribe-style-two .content-box{ position: relative; display: block; margin: 0px 30px 0px 70px; } #content_block_18 .content-box .text{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 44px; } #content_block_18 .content-box .subscribe-form .form-group{ position: relative; margin: 0px; } #content_block_18 .content-box .subscribe-form .form-group input[type='email'] { position: relative; width: 100%; height: 60px; border: 2px solid #dddddd; border-radius: 30px; font-size: 16px; color: #fff; margin-bottom: 25px; padding: 10px 40px; background: transparent; } #content_block_18 .content-box .subscribe-form .form-group input::-webkit-input-placeholder{ color:#fff; } #content_block_18 .content-box .subscribe-form .form-group button { position: relative; display: inline-block; font-size: 16px; font-weight: 500; color: #4527a4; background: #fff; border-radius: 30px; text-align: center; padding: 15px 45px; cursor: pointer; transition: all 500ms ease; } #content_block_18 .content-box .subscribe-form .form-group button:hover{ box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5); } #image_block_18 .image-box{ position: relative; display: block; text-align: center; margin-top: 12px; } /*** ==================================================================== Home-Page-Seven ==================================================================== ***/ /** feature-style-seven **/ .feature-style-seven{ position: relative; padding: 270px 0px 100px 0px; } .feature-style-seven .pattern-bg1{ position: absolute; width: 945px; height: 990px; left: 0px; top: 110px; background-repeat: no-repeat; animation-name: slideInLeft; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInLeft; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInLeft; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInLeft; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .feature-style-seven .pattern-bg2{ position: absolute; width: 850px; height: 820px; right: -40px; bottom: -110px; background-repeat: no-repeat; z-index: -1; animation-name: slideInRight; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInRight; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInRight; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } #content_block_19 .content-box .icon-box{ position: relative; display: inline-block; font-size: 50px; line-height: 50px; color: #f04b49; margin-bottom: 30px; } #content_block_19 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 60px; } #content_block_19 .content-box .theme-btn{ text-transform: uppercase; } #content_block_19 .content-box .sec-title h2{ margin-bottom: 56px; } .feature-style-seven .inner-box:first-child .content-box{ margin-left: 70px; } .feature-style-seven .inner-box:first-child{ margin-bottom: 115px; } .feature-style-seven .inner-box:last-child .content-box .icon-box{ color: #f8cb00; } #image_block_19 .image-box, #image_block_20 .image-box{ position: relative; } #image_block_19 .image-box img{ max-width: none; float: right; } #image_block_20 .image-box img{ width: 100%; } #image_block_20 .image-box{ margin-right: -12px; } .feature-style-seven .inner-box:last-child .content-box{ margin-right: 35px; } /** enterprise-section **/ .enterprise-section{ position: relative; padding: 65px 0px; } .enterprise-section .sec-title{ margin-bottom: 76px; } .enterprise-section .single-item .inner-box{ position: relative; display: block; background: #fff9ea; overflow: hidden; padding: 53px 290px 53px 45px; transition: all 500ms ease; } .enterprise-section .single-column:first-child .single-item .inner-box{ border-top-right-radius: 30px; border-bottom-left-radius: 30px; } .enterprise-section .single-item .inner-box:hover{ box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2); } .enterprise-section .single-item .inner-box .image-box{ position: absolute; right: 25px; bottom: -5px; } .enterprise-section .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; padding-bottom: 24px; margin-bottom: 28px; } .enterprise-section .single-item .inner-box h3:before{ position: absolute; content: ''; background: #0050db; height: 2px; width: 50px; left: 0px; bottom: 0px; } .enterprise-section .single-item .inner-box .text{ position: relative; display: block; } .enterprise-section .single-column:nth-child(2) .single-item .inner-box{ border-top-left-radius: 30px; border-bottom-right-radius: 30px; } .enterprise-section .single-column:nth-child(2) .single-item .inner-box, .enterprise-section .single-column:nth-child(3) .single-item .inner-box{ background: #f3efff; padding: 53px 30px 53px 300px; } .enterprise-section .single-column:nth-child(2) .single-item .inner-box .image-box, .enterprise-section .single-column:nth-child(3) .single-item .inner-box .image-box{ left: 25px; bottom: 0px; } .enterprise-section .single-column{ margin-bottom: 30px; } .enterprise-section .single-column:nth-child(3) .single-item .inner-box{ background: #f3f8ff; border-top-left-radius: 30px; border-bottom-right-radius: 30px; } .enterprise-section .single-column:last-child .single-item .inner-box{ background: #f3ffdb; border-top-right-radius: 30px; border-bottom-left-radius: 30px; } /** device-friendly **/ .device-friendly{ position: relative; padding: 250px 0px 100px 0px; width: 100%; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } #content_block_20 .content-box{ position: relative; margin-left: 40px; padding-top: 125px; } #content_block_20 .content-box h1{ position: relative; display: block; font-size: 48px; line-height: 55px; color: #fff; font-weight: 500; margin-bottom: 29px; } .device-friendly .content-box .icon{ position: absolute; } .device-friendly .content-box .icon-1{ left: 90px; top: 0px; background-repeat: no-repeat; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .device-friendly .content-box .icon-2 { top: -70px; right: 0px; background-repeat: no-repeat; } .device-friendly .content-box .icon-3 { right: -200px; top: 130px; background-repeat: no-repeat; } .device-friendly .content-box .icon-4 { right: -30px; bottom: -30px; background-repeat: no-repeat; } .device-friendly .content-box .icon-5 { left: 150px; bottom: -100px; background-repeat: no-repeat; } #content_block_20 .content-box .text{ position: relative; display: block; font-size: 16px; line-height: 36px; color: #fff; margin-bottom: 44px; } #content_block_20 .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 18px; font-weight: 500; color: #4527a4; background: #fff; border-radius: 30px; text-align: center; z-index: 1; padding: 15px 52px; } #content_block_20 .content-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1, 0.2); transform: scale(1, 0.2); z-index: -1; } #content_block_20 .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_20 .content-box .btn-box a:hover{ box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5); color: #fff; background: #4527a4; } #image_block_21 .image-box img{ max-width: none; float: right; } #image_block_21 .image-box{ position: relative; margin-right: -30px; } .pricing-style-two.home-7{ position: relative; padding-top: 85px; } .pricing-style-two.home-7:before{ position: absolute; left: 0px; bottom: 50%; content: ''; background: #f5f5f5; width: 100%; height: 100%; } .subscribe-section.home-7, .subscribe-section.home-8{ padding-top: 115px; } /*** ==================================================================== Home-Page-Eight ==================================================================== ***/ /** banner-style-eight **/ .banner-style-eight { position: relative; padding: 315px 0px 110px 0px; } .banner-style-eight .image-layer { position: absolute; top: 0px; left: 0px; height: 1590px; width: 95%; background-size: cover; background-repeat: no-repeat; background-position: top right; } .banner-style-eight .content-box h1 { position: relative; display: block; font-size: 48px; line-height: 72px; font-weight: 500; color: #fff; margin-bottom: 26px; } .banner-style-eight .content-box .text { position: relative; display: block; font-size: 18px; line-height: 36px; font-weight: 500; color: #fff; margin-bottom: 51px; } .banner-style-eight .content-box .btn-box .btn-one{ position: relative; display: inline-block; overflow: hidden; font-size: 14px; color: #4527a4; line-height: 30px; font-weight: 500; background: #fff; padding: 15px 33px; text-align: center; border-radius: 30px; margin-right: 30px; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .banner-style-eight .content-box .btn-box .btn-one:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-eight .content-box .btn-box .btn-one:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-eight .content-box .btn-box .btn-one:hover{ color: #fff; background: #4527a4; } .banner-style-eight .content-box .btn-box .btn-two{ position: relative; display: inline-block; overflow: hidden; line-height: 60px; font-size: 18px; color: #fff; font-weight: 500; } .banner-style-eight .content-box .btn-box .btn-two:hover{ text-decoration: underline; } .banner-style-eight .content-box .btn-box .btn-two i{ margin-left: 10px; position: relative; top: 2px; } .banner-style-eight .content-box{ position: relative; margin-top: 38px; } .banner-style-eight .image-box img{ max-width: none; float: left; } .banner-style-eight .image-box{ position: relative; } .banner-style-eight .image-box .image-2{ position: absolute; right: -250px; bottom: 0px; } /** feature-style-eight **/ .feature-style-eight{ position: relative; padding: 30px 0px 50px 0px; } .feature-style-eight .pattern-bg .pattern-1{ position: absolute; width: 1070px; height: 980px; right: 0px; top: 22%; background-repeat: no-repeat; } .feature-style-eight .pattern-bg .pattern-2{ position: absolute; width: 890px; height: 930px; left: 0px; bottom: -30px; background-repeat: no-repeat; } #content_block_21 .content-box .icon-box{ position: relative; display: inline-block; font-size: 50px; line-height: 50px; color: #b96944; margin-bottom: 28px; } #content_block_21 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 60px; } #content_block_21 .content-box .sec-title h2{ margin-bottom: 56px; } #content_block_21 .content-box .theme-btn{ text-transform: uppercase; } .feature-style-eight .inner-box:nth-child(2) .content-box .icon-box{ color: #f7a9b4 !important; } .feature-style-eight .inner-box:last-child .content-box .icon-box{ color: #fa870a !important; } .feature-style-eight .inner-box{ margin-bottom: 120px; } .feature-style-eight .inner-box:first-child .image-box{ margin-right: 47px; } .feature-style-eight .inner-box:nth-child(2) .image-box{ margin-left: 55px; } .feature-style-eight .inner-box:last-child .image-box{ margin-right: 61px; margin-left: -50px; } #image_block_22 .image-box{ position: relative; } #image_block_22 .image-box img{ width: 100%; } /** customer-management **/ .customer-management{ position: relative; padding-bottom: 120px; } .customer-management .sec-title{ margin-bottom: 68px; } .customer-management .image-box img{ width: 100%; } .customer-management .image-box{ position: relative; } .customer-management .image-box .image-2{ position: absolute; left: -115px; right: -115px; bottom: 45px; } /** testimonial-style-seven **/ .testimonial-style-seven{ position: relative; padding: 150px 0px 90px 0px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; } .testimonial-style-seven:before{ position: absolute; content: ''; background: url(../images/icons/map-shap.png); width: 100%; height: 670px; left: 0px; top: 30px; background-repeat: no-repeat; background-position: center; } .testimonial-style-seven .testimonial-inner .sec-title h2{ color: #fff; margin-bottom: 39px; } .testimonial-style-seven .testimonial-inner .sec-title h2:after{ background: #fff; } .testimonial-style-seven .testimonial-inner .testimonial-content .text{ position: relative; display: block; font-size: 18px; line-height: 36px; color: #fff; margin-bottom: 53px; } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info{ position: relative; padding: 14px 0px 25px 170px; } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info .image-box{ position: absolute; left: 0px; top: 0px; width: 128px; height: 128px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info .name{ position: relative; display: block; font-size: 18px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 11px; } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info .designation{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 11px; } .testimonial-style-seven .testimonial-inner .testimonial-content .author-info .rating li{ position: relative; float: left; font-size: 16px; color: #ffc600; } .testimonial-style-seven .testimonial-inner .owl-nav, .testimonial-style-seven .testimonial-inner .owl-dots{ display: none; } .testimonial-style-seven .thumb-box{ position: relative; width: 100%; min-height: 400px; margin-top: 110px; } .testimonial-style-seven .thumb-box .thumb-1{ position: absolute; left: 0px; top: -75px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-seven .thumb-box .thumb-2{ position: absolute; left: -110px; bottom: 90px; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .testimonial-style-seven .thumb-box .thumb-3{ position: absolute; right: 100px; top: 0px; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .testimonial-style-seven .thumb-box .thumb-4{ position: absolute; right: 190px; bottom: -45px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } /** clients-style-three **/ .clients-style-three{ position: relative; padding-top: 105px; } .clients-style-three .inner-container{ position: relative; padding: 30px 30px 0px 30px; text-align: center; } .clients-style-three .image-box img { display: block; max-width: 100%; width: auto; margin: 0 auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .clients-style-three .image-box img:hover{ opacity: 0.5; } .clients-style-three .owl-nav, .clients-style-three .owl-dots{ display: none; } /*** ==================================================================== Home-Page-Nine ==================================================================== ***/ /** banner-style-nine **/ .banner-style-nine{ position: relative; padding: 295px 0px 310px 0px; } .banner-style-nine .image-layer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .banner-style-nine .content-box{ position: relative; margin-top: 70px; } .banner-style-nine .content-box .btn-box .btn-one{ padding: 15px 43px; } /** dashboard-feature **/ .dashboard-feature{ position: relative; padding-top: 120px; } #content_block_22 .content-box h5{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #7000e0; margin-bottom: 31px; } #content_block_22 .content-box .text{ position: relative; display: block; font-size: 16px; line-height: 36px; margin-bottom: 51px; } #content_block_22 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 68px; } #content_block_22 .content-box .theme-btn-two{ padding: 15px 40px; } #content_block_23 .inner-content .feature-block-one .icon-box{ position: relative; display: inline-block; font-size: 60px; line-height: 60px; color: #fda700; margin-bottom: 32px; transition: all 500ms ease; } #content_block_23 .inner-content .feature-block-one:hover .icon-box{ color: #fff !important; } #content_block_23 .inner-content .feature-column:first-child .feature-block-one:last-child .icon-box{ color: #fd00dc; } #content_block_23 .inner-content .feature-column:last-child .feature-block-one:first-child .icon-box{ color: #4527a4; } #content_block_23 .inner-content .feature-column:last-child .feature-block-one:last-child .icon-box{ color: #00b9fd; } #content_block_23 .inner-content .feature-block-one h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 28px; transition: all 500ms ease; } #content_block_23 .inner-content .feature-block-one:hover h3, #content_block_23 .inner-content .feature-block-one:hover h3 a{ color: #fff; } #content_block_23 .inner-content .feature-block-one h3 a{ display: inline-block; color: #222; } #content_block_23 .inner-content .feature-block-one .inner-box{ padding: 48px 45px 50px 40px; } #content_block_23 .inner-content .feature-block-one{ margin-bottom: 50px; } .dashboard-feature .inner-content{ position: relative; margin: 0px -10px; } #content_block_23 .inner-content .feature-column{ padding: 0px 25px; } #content_block_23 .inner-content .feature-column:last-child{ padding-top: 50px; } /** feature-style-nine **/ .support-section{ position: relative; padding: 50px 0px 100px 0px; } .support-section .sec-title{ margin-bottom: 50px; } .support-section .sec-title h5{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #7000e0; margin-bottom: 31px; text-transform: uppercase; text-align: center; } .support-section .sec-title h2{ line-height: 60px; margin-bottom: 70px; } #content_block_24 .content-box h2{ position: relative; display: block; font-size: 36px; line-height: 60px; color: #222222; font-weight: 500; margin-bottom: 39px; } #content_block_24 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 60px; } #content_block_24 .content-box .theme-btn{ height: 60px; padding: 17px 80px 17px 40px; } #content_block_24 .content-box .theme-btn i{ height: 60px; width: 60px; line-height: 60px; } .support-section .inner-box:last-child .content-box{ margin-right: 100px; } .support-section .inner-box:last-child{ padding-top: 120px; } .support-section .inner-box .image-box{ margin-right: 52px; } #image_block_23 .image-box img{ width: 100%; } .support-section .inner-box:last-child .image-box img{ max-width: none; float: right; width: auto; } /** trusted-section **/ .trusted-section{ position: relative; padding: 20px 0px 120px 0px; } .trusted-section .sec-title h5{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #7000e0; margin-bottom: 37px; } .trusted-section .image-box{ position: relative; margin-bottom: 100px; min-height: 550px; } .trusted-section .image-box .image{ position: absolute; left: 0px; bottom: 0px; right: 0px; } .trusted-section .image-box img{ width: 100%; } .trusted-section .fact-counter .inner-box .count-outer span{ position: relative; display: inline-block; font-size: 72px; line-height: 75px; font-weight: 500; color: #222; margin-bottom: 17px; } .trusted-section .fact-counter .inner-box h2{ position: relative; display: block; font-size: 30px; line-height: 35px; color: #4527a4; font-weight: 500; } /** testimonial-style-eight **/ .testimonial-style-eight{ position: relative; padding: 120px 0px 100px 0px; } .testimonial-style-eight .image-layer{ position: absolute; left: 0px; top: 0px; width: 100%; height: 835px; right: 0px; background-size: cover; background-position: top center; background-repeat: no-repeat; } .testimonial-style-eight .sec-title h5 { position: relative; display: block; font-size: 18px; font-weight: 500; color: #7000e0; margin-bottom: 31px; } .testimonial-style-eight .sec-title h2{ line-height: 60px; margin-bottom: 66px; } .testimonial-style-eight .testimonial-content{ position: relative; margin-bottom: 100px; margin-top: 30px; } .testimonial-style-eight .testimonial-content .inner-box{ position: relative; display: block; background: #fff; border-radius: 20px; text-align: center; padding: 44px 40px 0px 40px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.2); } .testimonial-style-eight .testimonial-content .inner-box .text{ position: relative; display: block; font-size: 18px; margin-bottom: 31px; } .testimonial-style-eight .testimonial-content .inner-box .icon-box{ position: relative; display: inline-block; font-size: 30px; line-height: 30px; color: #cccccc; margin-bottom: 33px; } .testimonial-style-eight .testimonial-content .inner-box .author-info .name{ position: relative; display: block; font-size: 18px; color: #4527a4; margin-bottom: 8px; } .testimonial-style-eight .testimonial-content .inner-box .author-info .designation{ position: relative; display: block; font-size: 16px; margin-bottom: 24px; } .testimonial-style-eight .testimonial-content .inner-box .author-info .image-box{ position: relative; display: inline-block; width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50%; margin-bottom: -60px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-eight .testimonial-content .inner-box .author-info .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-eight .owl-nav{ display: none; } .testimonial-style-eight .owl-theme .owl-dots{ position: relative; display: block; text-align: center; margin-top: 20px; } .testimonial-style-eight .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #b7b7b7; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } .testimonial-style-eight .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-eight .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; } .clients-style-three.home-9{ position: relative; padding: 120px 0px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); } .clients-style-three.home-9 .inner-container{ padding: 0px; } .subscribe-section.home-9{ padding-bottom: 110px; } /** footer-style-three **/ .main-footer.style-three{ position: relative; padding-top: 0px; background-image: -webkit-linear-gradient(-90deg, #0042ff 0%, #6300c7 100%); } .main-footer.style-three .footer-top{ padding-top: 130px; } .main-footer.style-three .anim-icons .icon{ background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .main-footer.style-three .anim-icons .icon-1{ position: absolute; left: 20px; top: 60px; width: 85px; height: 85px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .main-footer.style-three .anim-icons .icon-2{ position: absolute; left: 230px; top: 25px; width: 130px; height: 130px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .main-footer.style-three .anim-icons .icon-3{ position: absolute; left: 20px; top: 225px; width: 110px; height: 110px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .main-footer.style-three .anim-icons .icon-4{ position: absolute; left: 200px; bottom: 185px; width: 85px; height: 85px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .main-footer.style-three .anim-icons .icon-5{ position: absolute; left: 75px; bottom: 15px; width: 130px; height: 130px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .main-footer.style-three .anim-icons .icon-6{ position: absolute; right: 270px; top: 60px; width: 85px; height: 85px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .main-footer.style-three .anim-icons .icon-7{ position: absolute; right: 15px; top: 25px; width: 130px; height: 130px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .main-footer.style-three .anim-icons .icon-8{ position: absolute; right: 245px; top: 225px; width: 110px; height: 110px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .main-footer.style-three .anim-icons .icon-9{ position: absolute; right: 90px; bottom: 185px; width: 85px; height: 85px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .main-footer.style-three .anim-icons .icon-10{ position: absolute; right: 170px; bottom: 15px; width: 130px; height: 130px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } /*** ==================================================================== Home-Page-Ten ==================================================================== ***/ .main-header.home-10 .main-menu .navigation > li > a{ color: #222; } /** banner-style-ten **/ .banner-style-ten{ position: relative; background: #fff; padding: 295px 0px 90px 0px; } .banner-style-ten .image-layer { position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; } .banner-style-ten .content-box h5{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #8344c5; margin-bottom: 26px; } .banner-style-ten .content-box h1{ position: relative; display: block; font-size: 48px; line-height: 72px; font-weight: 500; color: #222; margin-bottom: 20px; } .banner-style-ten .content-box{ position: relative; margin-right: -15px; } .banner-style-ten .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 44px; } .banner-style-ten .content-box .theme-btn-two{ padding: 13px 40px; } .banner-style-ten .image-box{ position: relative; margin-left: 150px; } .banner-style-ten .image-box img{ max-width: none; float: left; } .owl-dots-none .owl-dots{ display: none; } .banner-style-ten .image-box .image-2{ position: absolute; left: -110px; bottom: -70px; } .banner-style-ten .image-box .image-3{ position: absolute; left: 180px; top: 40px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-ten .image-box .image-4{ position: absolute; top: 0px; right: 0px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-ten .image-box .image-5{ position: absolute; top: 150px; right: -250px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-ten .image-box .image-6{ position: absolute; bottom: 100px; right: -250px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } /** solve-problem **/ /** counter-style-two **/ /** marketing-benefits **/ .marketing-benefits{ position: relative; background: #f5f5f5; padding: 122px 0px 100px 0px; } .marketing-benefits:before{ position: absolute; content: ''; background: #f5f5f5; width: 100%; height: 100%; left: 0px; top: 50%; } #content_block_27 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 74px; } #content_block_27 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 43px; } #content_block_27 .content-box .list-item li{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #222; margin-bottom: 6px; padding-left: 40px; } #content_block_27 .content-box .list-item li:before { position: absolute; content: "\f00c"; font-family: 'Font Awesome 5 Free'; font-weight: 700; font-size: 16px; color: #4527a4; left: 0px; top: 0px; } #content_block_27 .content-box .list-item li:last-child{ margin-bottom: 0px; } #content_block_27 .content-box{ position: relative; margin-right: 70px; } #image_block_26 .image-box{ position: relative; margin: 95px 50px 0px 50px; } #image_block_26 .image-box .bg-layer{ position: absolute; left: -60px; top: -60px; width: 580px; height: 380px; background-repeat: no-repeat; -webkit-animation: zoom-fade 15s infinite linear; animation: zoom-fade 15s infinite linear; } #image_block_26 .image-box img{ position: relative; width: 100%; } /** testimonial-style-nine **/ .testimonial-style-nine{ position: relative; width: 100%; padding: 200px 0px; background-size: cover; background-repeat: no-repeat; background-position: center; } .testimonial-style-nine:before { position: absolute; content: ''; background: url(../images/icons/map-shap-2.png); width: 100%; height: 415px; left: 0px; top: 230px; background-repeat: no-repeat; background-position: center; } .testimonial-style-nine .testimonial-content{ position: relative; padding: 0px 250px; } .testimonial-style-nine .testimonial-content .image-box{ position: relative; display: inline-block; width: 170px; height: 170px; border-radius: 50%; margin-bottom: 47px; } .testimonial-style-nine .testimonial-content .image-box:before{ position: absolute; content: "\f136"; font-family: 'Flaticon'; font-size: 30px; font-weight: 600; color: #fff; background: #fd9f26; width: 60px; height: 60px; line-height: 60px; text-align: center; right: -7px; bottom: -6px; border-radius: 50%; z-index: 1; } .testimonial-style-nine .testimonial-content .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-nine .testimonial-content .text{ position: relative; display: block; font-size: 20px; line-height: 48px; color: #fff; font-style: italic; margin-bottom: 47px; } .testimonial-style-nine .testimonial-content .author-info .name{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #fff; font-weight: 500; margin-bottom: 1px; padding-top: 34px; } .testimonial-style-nine .testimonial-content .author-info .name:before{ position: absolute; content: ''; background: #fd9f26; height: 2px; width: 40px; left: 50%; top: 0px; transform: translateX(-50%); } .testimonial-style-nine .testimonial-content .author-info .designation{ position: relative; display: block; font-size: 16px; color: #fff; } .testimonial-style-nine .owl-nav .owl-prev, .testimonial-style-nine .owl-nav .owl-next{ position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; height: 40px; width: 65px; line-height: 40px; text-align: center; font-size: 20px; color: #fff; background: rgba(255, 255, 255, 0.5); border-radius: 5px; transition: all 500ms ease; cursor: pointer; } .testimonial-style-nine .owl-nav .owl-prev{ left: 0px; } .testimonial-style-nine .owl-nav .owl-next{ right: 0px; } .testimonial-style-nine .owl-nav .owl-prev:hover, .testimonial-style-nine .owl-nav .owl-next:hover{ background: #fff; color: #4527a4; } /** check-work **/ .check-work{ position: relative; background: #f9f9f9; padding: 105px 0px 125px 0px; } .check-work .inner-box{ position: relative; padding: 0px 100px; } .check-work .inner-box .sec-title h2{ line-height: 60px; margin-bottom: 56px; } .check-work .inner-box .check-form .form-group{ position: relative; display: block; border: 2px solid #4527a4; border-radius: 50px; padding: 3px; } .check-work .inner-box .check-form .form-group:before{ position: absolute; content: ''; background: #777777; width: 1px; height: 16px; top: 30px; left: 35%; margin-left: 15px; } .check-work .inner-box .check-form .form-group input[type='text'], .check-work .inner-box .check-form .form-group input[type='email']{ position: relative; width: 100%; height: 70px; padding: 10px 50px; font-size: 16px; max-width: 350px; background: transparent; } .check-work .inner-box .check-form .form-group button{ position: absolute; top: 3px; right: 3px; display: inline-block; overflow: hidden; font-size: 16px; color: #fff; background: #4527a4; border-radius: 50px; text-align: center; padding: 20px 57px; cursor: pointer; z-index: 1; transition: all 500ms ease; } .check-work .inner-box .check-form .form-group button:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #8344c5; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .check-work .inner-box .check-form .form-group button:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .check-work .inner-box .check-form .form-group button:hover{ background: #8344c5; } .check-work .inner-box .text{ position: relative; margin-top: 54px; display: block; font-size: 16px; text-align: center; } .check-work .inner-box .text a{ color: #222; font-weight: 700; } .check-work .inner-box .text a:hover{ text-decoration: underline; } /** footer-style-four **/ .main-footer.style-four{ position: relative; background: #fff; padding-top: 20px; z-index: 1; } .main-footer.style-four .pattern-bg{ position: absolute; width: 140px; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; } .main-footer.style-four:after{ position: absolute; content: ''; background: #4527a4; width: 140px; height: 100%; right: 0px; top: 0px; z-index: -1; } .news-section.home-10 .news-block-one .inner-box .image-box{ border: 1px solid #d7d7d7; } /*** ==================================================================== Home-Page-11 ==================================================================== ***/ /** organization-section **/ .organization-section{ position: relative; padding-top: 120px; } .organization-section .sec-title{ margin-bottom: 60px; } .organization-section .sec-title h2{ margin-bottom: 60px; } .organization-section .single-item .inner-box{ position: relative; display: block; overflow: hidden; background: #fff; padding: 70px 30px 44px 30px; border-radius: 20px; transition: all 500ms ease; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); } .organization-section .single-item:hover .inner-box{ transform: translateY(-15px); box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.2); } .organization-section .single-item .inner-box .left-layer { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; display: block; } .organization-section .single-item .inner-box .right-layer { position: absolute; right: 0px; top: 0px; width: 50%; height: 100%; display: block; } .organization-section .single-item .inner-box .left-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .organization-section .single-item .inner-box .left-layer:after { position: absolute; content: ''; right: 0px; bottom: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .organization-section .single-item .inner-box .right-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .organization-section .single-item .inner-box .right-layer:after { position: absolute; content: ''; right: 0px; bottom: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .organization-section .single-item:hover .inner-box .left-layer:before, .organization-section .single-item:hover .inner-box .left-layer:after { height: 100%; } .organization-section .single-item:hover .inner-box .right-layer:before, .organization-section .single-item:hover .inner-box .right-layer:after { height: 100%; } .organization-section .single-item .inner-box .icon-box{ position: relative; display: inline-block; font-size: 60px; line-height: 60px; color: #1d00ff; margin-bottom: 27px; } .organization-section .single-item .inner-box h4{ position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; margin-bottom: 20px; padding-bottom: 29px; } .organization-section .single-item .inner-box h4:before{ position: absolute; content: ''; background: #4527a4; height: 2px; width: 40px; left: 50%; bottom: 0px; transform: translateX(-50%); } .organization-section .single-item .inner-box h4 a{ display: inline-block; color: #222; } .organization-section .single-item .inner-box h4 a:hover{ color: #4527a4; } .organization-section .single-item .inner-box .text{ position: relative; display: block; font-size: 16px; } .organization-section .more-btn{ position: relative; display: block; margin-top: 70px; } .organization-section .more-btn .theme-btn-two{ padding: 10px 45px; } /** security-invisible **/ .security-invisible{ position: relative; padding: 110px 0px 100px 0px; } #content_block_28 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 71px; } #content_block_28 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 51px; } #content_block_28 .content-box{ position: relative; margin-right: 50px; } #content_block_28 .content-box .btn-box .theme-btn-two{ padding: 15px 40px; } #image_block_27 .image-box img{ max-width: none; } /** feature-style-ten **/ .feature-style-ten{ position: relative; padding: 135px 0px 95px 0px; } .feature-style-ten .sec-title{ margin-bottom: 65px; } #content_block_29 .content-box h2{ position: relative; display: block; font-size: 36px; line-height: 60px; color: #222; font-weight: 500; margin-bottom: 31px; } #content_block_29 .content-box .text{ position: relative; display: block; font-size: 16px; line-height: 30px; margin-bottom: 55px; } #content_block_29 .content-box .btn-box .theme-btn{ height: 60px; padding: 17px 80px 17px 40px; } #content_block_29 .content-box .btn-box .theme-btn i{ width: 60px; height: 60px; line-height: 60px; } #image_block_28 .image-box img{ max-width: none; } #content_block_29 .content-box{ position: relative; padding: 105px 0px 119px 0px; } .feature-style-ten .inner-container .inner-box:first-child .content-box{ margin-right: 50px; } .feature-style-ten .inner-container .inner-box .content-box .bg-layer{ position: absolute; width: 975px; height: 100%; top: 0px; right: -80px; background-repeat: no-repeat; } #image_block_28 .image-box .image-box{ position: relative; display: block; text-align: center; } .feature-style-ten .inner-container .inner-box:first-child .image-box{ margin-left: 50px; } #image_block_28 .image-box .anim-icons .icon-1{ position: absolute; top: -50px; left: 50px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } #image_block_28 .image-box .anim-icons .icon-2{ position: absolute; top: -50px; right: 0px; } #image_block_28 .image-box .anim-icons .icon-3{ position: absolute; right: 100px; bottom: -20px; z-index: 1; } .feature-style-ten .inner-container .inner-box:nth-child(2) .image-box{ margin-right: 80px; } .feature-style-ten .inner-container .inner-box:nth-child(2) .image-box img{ float: right; } .feature-style-ten .inner-container .inner-box:nth-child(2) .content-box{ margin-left: 50px; } .feature-style-ten .inner-container .inner-box:nth-child(2) .content-box .bg-layer{ left: -100px; background-repeat: no-repeat; } .feature-style-ten .inner-container .inner-box:nth-child(3) .content-box{ margin-right: 50px; } .feature-style-ten .inner-container .inner-box:nth-child(3) .content-box .bg-layer{ right: -80px; background-repeat: no-repeat; } .feature-style-ten .inner-container .inner-box:nth-child(3) .image-box{ margin-left: 80px; } .feature-style-ten .inner-container .inner-box:last-child .content-box{ margin-left: 70px; } .feature-style-ten .inner-container .inner-box:last-child .content-box .bg-layer{ left: -100px; background-repeat: no-repeat; } .feature-style-ten .inner-container .inner-box:last-child .image-box{ margin-right: 100px; } .feature-style-ten .inner-container .inner-box:last-child .image-box img{ float: right; } /** software-product **/ .software-product{ position: relative; padding: 84px 0px 190px 0px; width: 100%; margin-top: -115px; background-size: cover; background-repeat: no-repeat; background-position: center; } #content_block_30 .content-box{ position: relative; margin-right: 70px; padding-top: 108px; } #content_block_30 .content-box .sec-title h2{ color: #fff; line-height: 60px; margin-bottom: 71px; } #content_block_30 .content-box.black-text .sec-title h2{ color: #222222; } #content_block_30 .content-box .sec-title h2:after{ background: #fff; } #content_block_30 .content-box.black-text .sec-title h2:after{ background: #777777; } #content_block_30 .content-box .text{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 51px; padding-right: 35px; } #content_block_30 .content-box.black-text .text{ color: #777; } #content_block_30 .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 500; color: #fff; border: 1px solid #fff; background: transparent; border-radius: 30px; text-align: center; z-index: 1; padding: 14px 42px; } #content_block_30 .content-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_30 .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_30 .content-box.black-text .btn-box a{ border: 1px solid #4527a4; color: #4527a4; } #content_block_30 .content-box.black-text .btn-box a:hover{ color: #fff; background: #4527a4; } #content_block_30 .content-box .btn-box a:hover{ border-color: #222; } .clients-style-two.home-11{ z-index: 1; } #image_block_29 .image-box{ position: relative; } #image_block_29 .image-box img{ max-width: none; width: auto; } /** testimonial-style-ten **/ .testimonial-style-ten{ position: relative; padding: 120px 0px; } .testimonial-style-ten .user-thumb{ position: relative; display: block; margin-left: -30px; margin-right: -30px; } .testimonial-style-ten .user-thumb .thumb-box{ position: relative; width: 620px; height: 620px; } .testimonial-style-ten .user-thumb .thumb-box .pattern-bg1{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; background-repeat: no-repeat; animation-name: rotateme; animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme; -webkit-animation-duration: 60s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotateme; -moz-animation-duration: 60s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: rotateme; -ms-animation-duration: 60s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: rotateme; -o-animation-duration: 60s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .testimonial-style-ten .user-thumb .thumb-box .pattern-bg2{ position: absolute; width: 795px; height: 415px; right: -75px; top: 130px; background-repeat: no-repeat; } .testimonial-style-ten .user-thumb .thumb-box .thumb{ position: absolute; border-radius: 50%; } .testimonial-style-ten .user-thumb .thumb-box .thumb img{ border-radius: 50%; } .testimonial-style-ten .user-thumb .thumb-box .thumb-1{ left: 50%; top: 50%; transform: translate(-50%,-50%); } .testimonial-style-ten .user-thumb .thumb-box .thumb-2{ left: 70px; top: 40px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-3{ left: 270px; top: 10px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-4{ left: 125px; top: 200px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-5{ left: 95px; bottom: 35px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-6{ right: 120px; top: 190px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-7{ right: 0px; bottom: 140px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .testimonial-style-ten .user-thumb .thumb-box .thumb-8{ right: 250px; bottom: 105px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .testimonial-style-ten .content-box .sec-title h2{ margin-bottom: 41px; } .testimonial-style-ten .content-box{ position: relative; margin-left: 100px; } .testimonial-style-ten .content-box .owl-nav{ display: none; } .testimonial-style-ten .content-box .testimonial-content .text{ position: relative; font-size: 18px; line-height: 36px; margin-bottom: 20px; } .testimonial-style-ten .content-box .testimonial-content .author-info .rating{ position: relative; margin-bottom: 31px; } .testimonial-style-ten .content-box .testimonial-content .author-info .rating li{ position: relative; float: left; font-size: 18px; color: #ffcc43; } .testimonial-style-ten .content-box .testimonial-content .author-info .name{ position: relative; font-size: 20px; color: #4527a4; margin-bottom: 14px; } .testimonial-style-ten .content-box .testimonial-content .author-info .designation{ position: relative; display: block; font-size: 14px; line-height: 24px; } .testimonial-style-ten .owl-theme .owl-dots{ position: relative; margin-top: 40px; } .testimonial-style-ten .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #d7d7d7; border-radius: 50%; transition: all 500ms ease; cursor: pointer; } .testimonial-style-ten .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-ten .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; } .testimonial-style-ten .content-box .testimonial-content .author-info{ position: relative; } .testimonial-style-ten .content-box .testimonial-content .author-info:before{ position: absolute; content: "\f10e"; font-family: 'Font Awesome 5 Free'; font-weight: 700; font-size: 130px; color: #e9e9e9; top: 45px; right: 0px; } /** betterlook-section **/ .betterlook-section{ position: relative; background: #f5f9ff; padding: 80px 0px; overflow: hidden; } #content_block_31 .content-box{ position: relative; margin-right: 50px; } #content_block_31 .content-box .text{ position: relative; font-size: 18px; line-height: 36px; margin-bottom: 52px; } #content_block_31 .content-box .sec-title h2{ margin-bottom: 41px; } #content_block_31 .content-box .theme-btn-two{ padding: 15px 40px; } #image_block_30 .image-box{ position: relative; } #image_block_30 .image-box img{ max-width: none; width: auto; } .betterlook-section .anim-icons .icon-1{ position: absolute; left: -150px; top: -115px; width: 400px; height: 400px; background: #4527a4; border-radius: 50%; -webkit-animation: zoom-fade 10s infinite linear; animation: zoom-fade 10s infinite linear; } .betterlook-section .anim-icons .icon-2{ position: absolute; left: 50%; bottom: -120px; width: 400px; height: 400px; background: #4527a4; border-radius: 50%; -webkit-animation: zoom-fade 10s infinite linear; animation: zoom-fade 10s infinite linear; } .betterlook-section .pattern-bg1{ position: absolute; left: -30px; bottom: -150px; width: 285px; height: 390px; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .betterlook-section .pattern-bg2{ position: absolute; top: -120px; left: 50%; width: 390px; height: 390px; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .subscribe-section.home-11{ padding-top: 110px; } /*** ==================================================================== Home-Page-12 ==================================================================== ***/ .main-header.home-12 .main-menu .navigation > li > a{ color: #222; } /** banner-style-12 **/ .banner-style-12{ position: relative; padding: 265px 0px 200px 0px; } .banner-style-12:before{ position: absolute; content: ''; background: #4527a4; width: 150px; height: 150px; border-radius: 50%; left: -60px; top: -60px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-12 .pattern-bg{ position: absolute; width: 160px; height: 335px; top: 50%; transform: translateY(-50%); left: 0px; background-repeat: no-repeat; } .banner-style-12 .image-layer { position: absolute; top: 0px; left: 0px; height: 1250px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; } .banner-style-12 .content-box{ position: relative; margin-right: 70px; margin-top: 23px; } .banner-style-12 .content-box h1{ position: relative; display: block; font-size: 48px; line-height: 72px; font-weight: 500; color: #222; margin-bottom: 36px; } .banner-style-12 .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 36px; margin-bottom: 53px; } .banner-style-12 .content-box .btn-box .btn-one{ position: relative; display: inline-block; overflow: hidden; font-size: 14px; font-weight: 500; color: #fff; background: #4527a4; border-radius: 30px; text-align: center; padding: 14.5px 32px; cursor: pointer; margin-right: 30px; z-index: 1; transition: all 500ms ease; } .banner-style-12 .content-box .btn-box .btn-one:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-12 .content-box .btn-box .btn-one:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-12 .content-box .btn-box .btn-one i{ position: relative; font-size: 24px; margin-right: 15px; top: 4px; } .banner-style-12 .content-box .btn-box .btn-one:hover{ background: #fff; color: #4527a4; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .banner-style-12 .content-box .btn-box .btn-two { position: relative; display: inline-block; overflow: hidden; font-size: 14px; color: #4527a4; line-height: 30px; background: #fff; padding: 15px 43px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .banner-style-12 .content-box .btn-box .btn-two:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-12 .content-box .btn-box .btn-two:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-12 .content-box .btn-box .btn-two:hover{ background: #4527a4; color: #fff; } .banner-style-12 .image-box{ position: relative; margin-right: -162px; padding: 50px 0px 50px 0px; } .banner-style-12 .image-box .bg-layer{ position: absolute; width: 460px; height: 620px; top: 0px; right: -50px; background-repeat: no-repeat; } .banner-style-12 .image-box img{ position: relative; width: 100%; } .clients-section.home-12{ position: relative; } .clients-section.home-12 .clients-carousel{ padding-bottom: 120px; border-bottom: 2px solid #ebebeb; } /** designe-process **/ .designe-process{ position: relative; padding: 80px 0px 90px 0px; } .designe-process .sec-title h2{ line-height: 60px; margin-bottom: 62px; } .designe-process .single-item{ position: relative; text-align: center; margin-bottom: 30px; } .designe-process .single-item .inner-box{ position: relative; display: block; background: #fff; padding: 70px 30px 65px 30px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .designe-process .single-item .inner-box .icon-box{ position: relative; display: inline-block; height: 80px; width: 80px; text-align: center; line-height: 80px; margin-bottom: 46px; z-index: 1; } .designe-process .single-item .inner-box .icon-box:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 100%; left: 0px; top: 0px; border-radius: 10px; transform: rotate(45deg); transition: all 500ms ease; } .designe-process .single-item:hover .inner-box .icon-box:before{ transform: rotate(0deg); } .designe-process .single-item .inner-box .icon-box:after{ position: absolute; content: ''; border: 1px dashed #4527a4; width: 80px; height: 80px; left: 0px; top: 0px; border-radius: 10px; z-index: -1; } .designe-process .single-column:nth-child(2) .single-item .inner-box .icon-box:before{ background: #34c700; } .designe-process .single-column:nth-child(2) .single-item .inner-box .icon-box:after{ border-color: #34c700; } .designe-process .single-column:nth-child(3) .single-item .inner-box .icon-box:before{ background: #ff0000; } .designe-process .single-column:nth-child(3) .single-item .inner-box .icon-box:after{ border-color: #ff0000; } .designe-process .single-column:nth-child(4) .single-item .inner-box .icon-box:before{ background: #ff8500; } .designe-process .single-column:nth-child(4) .single-item .inner-box .icon-box:after{ border-color: #ff8500; } .designe-process .single-column:nth-child(5) .single-item .inner-box .icon-box:before{ background: #ff00ff; } .designe-process .single-column:nth-child(5) .single-item .inner-box .icon-box:after{ border-color: #ff00ff; } .designe-process .single-column:last-child .single-item .inner-box .icon-box:before{ background: #00aeef; } .designe-process .single-column:last-child .single-item .inner-box .icon-box:after{ border-color: #00aeef; } .designe-process .single-item .inner-box .icon-box i{ position: relative; display: inline-block; font-size: 20px; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 3px; color: #fff; border: 1px dotted #fff; font-weight: 700; } .designe-process .single-item .inner-box h4{ position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; margin-bottom: 19px; } .designe-process .single-item .inner-box h4 a{ display: inline-block; color: #222; } .designe-process .single-item .inner-box h4 a:hover{ color: #4527a4; } .designe-process .single-item .inner-box .text{ position: relative; display: block; font-size: 16px; } .designe-process .single-item .inner-box .left-layer { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; display: block; } .designe-process .single-item .inner-box .right-layer { position: absolute; right: 0px; top: 0px; width: 50%; height: 100%; display: block; } .designe-process .single-item .inner-box .left-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .designe-process .single-item .inner-box .left-layer:after { position: absolute; content: ''; right: 0px; bottom: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .designe-process .single-item .inner-box .right-layer:before { position: absolute; content: ''; left: 0px; top: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .designe-process .single-item .inner-box .right-layer:after { position: absolute; content: ''; right: 0px; bottom: 0px; width: 50%; height: 0%; display: block; background-color: #f4f4f4; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .designe-process .single-item:hover .inner-box .left-layer:before, .designe-process .single-item:hover .inner-box .left-layer:after { height: 100%; } .designe-process .single-item:hover .inner-box .right-layer:before, .designe-process .single-item:hover .inner-box .right-layer:after { height: 100%; } /** solution-section **/ .solution-section{ position: relative; background: #f9f9f9; padding: 100px 0px 120px 0px; } .solution-section .sec-title h2{ margin-bottom: 60px; line-height: 60px; } .solution-section .inner-content .inner-box:first-child{ margin-bottom: 120px; } .solution-section .inner-content .inner-box:first-child .content-box{ margin-left: 30px !important; } .solution-section .inner-content .inner-box:last-child .content-box{ margin-right: 30px !important; } #content_block_32 .content-box .sec-title h2{ font-size: 32px; margin-bottom: 55px; line-height: 48px; } #content_block_32 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 55px; } #content_block_32 .content-box .icon-box{ position: relative; margin-bottom: 41px; } #content_block_32 .content-box .icon-box .icon{ position: relative; display: inline-block; margin-right: 13px; } #content_block_32 .content-box .icon-box .icon:last-child{ margin-right: 0px; } #content_block_32 .content-box .theme-btn{ text-transform: uppercase; } #image_block_31 .image-box{ position: relative; } .solution-section #image_block_31 .image-box img{ max-width: none; width: auto; float: right; } #image_block_32 .image-box{ position: relative; display: inline-block; overflow: hidden; background: #4527a4; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); } #image_block_32 .image-box img{ max-width: none; width: auto; transition: all 500ms ease; } #image_block_32 .image-box:hover img{ transform: scale(1.05); opacity: 0.5; } /** designe-process-two **/ .designe-process-two{ position: relative; padding: 110px 0px 95px 0px; } .designe-process-two .sec-title{ position: relative; max-width: 730px; width: 100%; margin: 0 auto; padding-bottom: 54px; } .designe-process-two .sec-title h2{ margin-bottom: 44px; } .designe-process-two .tab-btn-box{ position: relative; max-width: 940px; width: 100%; margin: 0 auto; } .designe-process-two .tab-btn-box .tab-btns{ position: relative; width: 100%; background: #f5f5f5; overflow: hidden; border-radius: 30px; margin-bottom: 100px; } .designe-process-two .tab-btn-box .tab-btns li{ position: relative; float: left; width: 235px; font-size: 16px; line-height: 30px; text-align: center; background: transparent; padding: 15px 20px; border-right: 1px solid #fff; transition: all 500ms ease; cursor: pointer; } .designe-process-two .tab-btn-box .tab-btns li:last-child{ border-right: 0px; } .designe-process-two .tab-btn-box .tab-btns li.active-btn, .designe-process-two .tab-btn-box .tab-btns li:hover{ background: #4527a4; color: #fff; } .designe-process-two .tabs-content .content-box{ position: relative; margin: 30px 50px 30px 60px; } .designe-process-two .tabs-content .content-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #4527a4; font-weight: 500; margin-bottom: 37px; } .designe-process-two .tabs-content .content-box .text{ position: relative; margin-bottom: 55px; } .designe-process-two .tabs-content .content-box .text p{ font-size: 16px; margin-bottom: 30px; } .designe-process-two .tabs-content .content-box .text p:last-child{ margin-bottom: 0px; } .designe-process-two .tabs-content .content-box .theme-btn-two{ padding: 15px 43px; } .designe-process-two .tabs-content .image-box{ position: relative; margin-left: 48px; } .designe-process-two .tabs-content .image-box:before{ position: absolute; content: ''; background: #ecbc35; width: 320px; height: 430px; right: -35px; bottom: -35px; } .designe-process-two .tabs-content .image-box img{ width: 100%; } /** designe-process-three **/ .designe-process-three{ position: relative; background: #f5f5f5; padding: 106px 0px 90px 0px; } .designe-process-three .sec-title h2{ line-height: 60px; } .designe-process-three .inner-content{ position: relative; margin-right: -350px; } .designe-process-three .inner-content .single-item{ position: relative; margin: 30px 0px; } .designe-process-three .inner-content .single-item .inner-box{ position: relative; display: block; background: #fff; padding: 41px 30px 0px 40px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); border-top-left-radius: 30px; border-bottom-right-radius: 30px; transition: all 500ms ease; } .designe-process-three .inner-content .single-item .inner-box h3{ position: relative; display: block; font-size: 22px; line-height: 30px; font-weight: 500; color: #222; margin-bottom: 19px; } .designe-process-three .inner-content .single-item .inner-box h3 a{ display: inline-block; color: #222; } .designe-process-three .inner-content .single-item .inner-box h3 a:hover{ color: #4527a4; } .designe-process-three .inner-content .single-item .inner-box .text{ position: relative; display: block; margin-bottom: 21px; } .designe-process-three .inner-content .single-item .inner-box .image-box{ position: relative; display: block; text-align: center; } .designe-process-three .owl-nav{ position: absolute; top: -80px; right: 345px; } .designe-process-three .owl-nav .owl-next, .designe-process-three .owl-nav .owl-prev{ position: relative; display: inline-block; font-size: 24px; width: 50px; height: 50px; line-height: 52px; text-align: center; background: #fff; border-radius: 50%; color: #222; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); cursor: pointer; margin: 0px 5px; transition: all 500ms ease; } .designe-process-three .owl-nav .owl-next:hover, .designe-process-three .owl-nav .owl-prev:hover{ background: #4527a4; color: #fff; } /** streamline-section **/ .streamline-section{ position: relative; background: #4527a4; padding: 110px 0px 288px 0px; margin-bottom: -285px; } #content_block_33 .content-box{ position: relative; margin-right: 60px; } #content_block_33 .content-box h2{ position: relative; display: block; font-size: 36px; font-weight: 500; color: #fff; line-height: 60px; margin-bottom: 21px; } #content_block_33 .content-box.black-text h2{ color: #222; } #content_block_33 .content-box .text{ position: relative; display: block; font-size: 18px; color: #fff; margin-bottom: 35px; } #content_block_33 .content-box.black-text .text{ color: #777; } #content_block_33 .content-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; color: #4527a4; font-weight: 500; line-height: 30px; background: #fff; padding: 15px 43px; text-align: center; border-radius: 30px; z-index: 1; } #content_block_33 .content-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_33 .content-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_33 .content-box.black-text a{ background: #4527a4; color: #fff; } #content_block_33 .content-box a:hover{ background: #222; color: #fff; } #image_block_33 .image-box{ position: relative; } #image_block_33 .image-box img{ position: relative; max-width: none; width: auto; } /*** ==================================================================== Home-Page-13 ==================================================================== ***/ /** banner-style-13 **/ .banner-style-13{ position: relative; padding: 215px 0px 60px 0px; } .banner-style-13 .image-shap { position: absolute; width: 405px; height: 445px; left: 0px; top: 35%; background-repeat: no-repeat; } .banner-style-13 .image-layer { position: absolute; top: 0px; right: 0px; height: 100%; width: 73%; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: top center; animation-name: slideInRight; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInRight; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInRight; -moz-animation-duration: 2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInRight; -ms-animation-duration: 2s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .banner-style-13 .content-box h1{ position: relative; display: block; font-size: 48px; font-weight: 700; color: #222; line-height: 70px; margin-bottom: 44px; } .banner-style-13 .content-box h1 span{ color: #e340a2; text-transform: uppercase; } .banner-style-13 .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 36px; margin-bottom: 63px; } .banner-style-13 .content-box .mail-box .form-group { position: relative; margin: 0px; } .banner-style-13 .content-box .mail-box .form-group input[type='email'] { position: relative; width: 100%; height: 60px; border: 1px solid #4527a4; border-radius: 30px; font-size: 14px; color: #777; padding: 10px 200px 10px 30px; } .banner-style-13 .content-box .mail-box .form-group button { position: absolute; top: 0px; right: 0px; width: 170px; height: 60px; background: #4527a4; text-align: center; font-size: 14px; color: #fff; border-top-right-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; transition: all 500ms ease; } .banner-style-13 .anim-icons .icon-1 { background-image: -webkit-linear-gradient(0deg, #20d5dd 0%, #5d339e 100%); width: 80px; height: 80px; left: 120px; bottom: 100px; border-radius: 50%; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-13 .anim-icons .icon-2 { background-image: -webkit-linear-gradient(0deg, #fe40a0 0%, #6242aa 100%); width: 145px; height: 145px; top: 60px; right: 60px; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-13 .image-box{ position: relative; margin-left: 100px; } .banner-style-13 .image-box img{ max-width: none; float: left; } /** award-section **/ .award-section{ position: relative; padding: 140px 0px 65px 0px; } .award-section .content-box{ position: relative; background-image: -webkit-linear-gradient(-90deg, #0080cf 0%, #353b91 100%); padding: 35px 50px 48px 260px; border-radius: 100px; } .award-section .content-box .award-image{ position: absolute; left: -100px; top: -140px; width: 375px; height: 375px; } .award-section .content-box .text{ font-size: 16px; color: #fff; margin-bottom: 8px; } .award-section .content-box h1{ position: relative; display: block; font-size: 42px; line-height: 50px; color: #fff; font-weight: 700; text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); } /** chooseus-section **/ .chooseus-section{ position: relative; padding: 70px 0px 50px 0px; } .chooseus-section .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 55px; } .chooseus-section .inner-box .list-item li{ position: relative; display: block; font-size: 16px; margin-bottom: 30px; padding-left: 35px; } .chooseus-section .inner-box .list-item li:last-child{ margin-bottom: 0px; } .chooseus-section .inner-box .list-item li:before{ position: absolute; content: "\f14a"; font-size: 16px; font-family: 'Font Awesome 5 Free'; color: #4527a4; font-weight: 700; left: 0px; top: 0px; } /** crm-programming **/ .crm-programming{ position: relative; padding: 115px 0px 120px 0px; } .crm-programming .sec-title h2{ margin-bottom: 74px; } .crm-programming .image-layer{ position: absolute; left: 0px; top: -190px; right: 0px; width: 100%; height: 1195px; background-repeat: no-repeat; background-position: center; z-index: -1; } .crm-programming .single-item{ position: relative; max-width: 270px; width: 100%; margin: 0 auto; text-align: center; } .crm-programming .single-item .piechart{ position: relative; margin-bottom: 34px; } .crm-programming .single-item .piechart span { position: absolute; font-size: 60px; line-height: 60px; font-weight: 700; color: #222; left: 50%; top: 50%; transform: translate(-50%,-50%); } .crm-programming .single-item .piechart span:after { color: #222; content: "%"; font-size: 60px; font-weight: 700; } .crm-programming .single-item .text{ position: relative; display: block; font-size: 20px; font-weight: 500; } /** pricing-style-four **/ .pricing-style-four{ position: relative; padding: 110px 0px 150px 0px; } .pricing-style-four .pricing-table{ position: relative; width: 33.333333%; float: left; text-align: center; } .pricing-style-four .pricing-table .table-header .title{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #393e95; text-transform: uppercase; margin-bottom: 17px; } .pricing-style-four .pricing-table .table-header .price{ position: relative; display: block; font-size: 72px; font-weight: 500; line-height: 70px; color: #3d415b; margin-bottom: 5px; } .pricing-style-four .pricing-table .table-header .price span{ font-size: 48px; } .pricing-style-four .pricing-table .table-header .text{ position: relative; display: block; font-size: 16px; text-transform: uppercase; } .pricing-style-four .pricing-table .table-header{ position: relative; padding: 47px 15px 38px 15px; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; } .pricing-style-four .pricing-table:last-child .table-header{ border-right: none; } .pricing-style-four .pricing-inner{ position: relative; border: 1px solid #e1e1e1; } .pricing-style-four .pricing-table .table-content li{ position: relative; display: block; font-size: 18px; color: #4527a4; padding: 25px 15px; background: #f5f5f5; } .pricing-style-four .pricing-table:first-child .table-content li:first-child, .pricing-style-four .pricing-table:first-child .table-content li:nth-child(2), .pricing-style-four .pricing-table:first-child .table-content li:nth-child(3), .pricing-style-four .pricing-table:nth-child(2) .table-content li:first-child, .pricing-style-four .pricing-table:nth-child(2) .table-content li:nth-child(2){ color: #777; } .pricing-style-four .pricing-table .table-content li:nth-child(2n+1){ background: #fff; } .pricing-style-four .pricing-table .table-footer{ position: absolute; left: 0px; bottom: -123px; width: 100%; } .pricing-style-four .pricing-table .table-footer a{ position: relative; display: inline-block; overflow: hidden; font-size: 18px; line-height: 30px; font-weight: 700; color: #4527a4; border: 1px solid #e1e1e1; text-align: center; border-radius: 30px; background: transparent; padding: 14px 30px; z-index: 1; } .pricing-style-four .pricing-table .table-footer a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fc0000; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .pricing-style-four .pricing-table .table-footer a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .pricing-style-four .pricing-table .table-footer a:hover{ background: #fc0000; border-color: #fc0000; color: #fff; } .pricing-style-four .feature-inner h2{ position: relative; display: flex; font-size: 30px; line-height: 36px; color: #fc0000; padding: 15px; min-height: 248px; align-items: center; text-align: center; } .pricing-style-four .feature-inner .list{ position: relative; border: 1px solid #e1e1e1; } .pricing-style-four .feature-inner .list li{ position: relative; display: block; font-size: 16px; padding: 25px 15px 25px 60px; background: #f5f5f5; } .pricing-style-four .feature-inner .list li:nth-child(2n+1){ background: #fff; } .pricing-style-four .sec-title h2{ margin-bottom: 73px; } /** testimonial-style-11 **/ .testimonial-style-11{ position: relative; padding: 90px 0px 100px 0px; } .testimonial-style-11 .inner-container{ position: relative; display: block; padding: 100px; } .testimonial-style-11 .inner-container .bg-layer{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; background-repeat: no-repeat; background-size: cover; } .testimonial-style-11 .inner-container .sec-title{ position: relative; display: block; padding: 0px 30px; } .testimonial-style-11 .inner-container .sec-title:before{ position: absolute; content: "\f10e"; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #fff; font-size: 72px; top: 50px; right: 0px; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } .testimonial-style-11 .inner-container .sec-title h2{ color: #fff; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); } .testimonial-style-11 .inner-container .sec-title h2:after{ background: #222; } .testimonial-style-11 .testimonial-inner{ position: relative; display: block; padding: 25px 70px 145px 30px; text-align: center; } .testimonial-style-11 .testimonial-inner .testimonial-content{ position: relative; margin-top: 20px; } .testimonial-style-11 .testimonial-inner .testimonial-content .image-box{ position: relative; display: inline-block; width: 115px; height: 115px; border-radius: 50%; margin-bottom: 23px; } .testimonial-style-11 .testimonial-inner .testimonial-content .image-box:before{ position: absolute; content: ''; background: #1a2ee5; width: 100%; height: 100%; left: -15px; top: -15px; border-radius: 50%; } .testimonial-style-11 .testimonial-inner .testimonial-content .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-11 .testimonial-inner .testimonial-content .text{ position: relative; font-size: 16px; line-height: 36px; color: #fff; margin-bottom: 41px; } .testimonial-style-11 .testimonial-inner .testimonial-content .author-info .name{ position: relative; font-size: 24px; line-height: 32px; color: #fff; margin-bottom: 6px; } .testimonial-style-11 .testimonial-inner .testimonial-content .designation{ position: relative; font-size: 18px; color: #fff; } .testimonial-style-11 .testimonial-inner .owl-prev, .testimonial-style-11 .testimonial-inner .owl-next{ position: relative; display: inline-block; font-size: 30px; line-height: 30px; font-weight: 700; color: #fff; cursor: pointer; margin: 0px 25px; transition: all 500ms ease; } .testimonial-style-11 .testimonial-inner .owl-prev:hover, .testimonial-style-11 .testimonial-inner .owl-next:hover{ color: #4527a4; } .testimonial-style-11 .testimonial-inner .owl-prev:before{ position: absolute; content: ''; background: #fff; width: 2px; height: 30px; top: 0px; right: -25px; } .testimonial-style-11 .testimonial-inner .owl-nav{ position: relative; display: block; margin-top: 25px; } .testimonial-style-11 .anim-icons .icon-1 { left: 170px; top: 140px; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .testimonial-style-11 .anim-icons .icon-2 { left: 50px; bottom: 150px; background-repeat: no-repeat; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .testimonial-style-11 .anim-icons .icon-3 { top: 200px; right: 20px; background-repeat: no-repeat; -webkit-animation: zoom-fade 10s infinite linear; animation: zoom-fade 10s infinite linear; } /*** ==================================================================== Home-Page-14 ==================================================================== ***/ /** header-style-two **/ .main-header.style-two{ position: relative; } .main-header.style-two .outer-container{ top: 50px; } .main-header.style-two .outer-container .main-box{ position: relative; background: #4527a4; padding: 0px 30px; border-radius: 50px; } .main-header.style-two .outer-container .main-box:before{ position: absolute; content: ''; background: #fff; width: calc(100% - 220px); height: 100%; left: 110px; top: 22px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); z-index: -1; border-radius: 50px; } .main-header.style-two .outer-container .logo-box .logo{ padding: 25px 0px 24px 0px; } .main-header.style-two .main-menu .navigation > li{ position: relative; padding: 34px 0px 36px 0px; margin: 0px 25px; } .main-header.style-two .main-menu .navigation > li:before{ position: absolute; content: ''; background: #3ecbff; width: 0%; height: 4px; left: 0px; bottom: 0px; transition: all 500ms ease; } .main-header.style-two .main-menu .navigation > li.current:before, .main-header.style-two .main-menu .navigation > li:hover:before{ width: 100%; } .main-header.style-two .menu-area .btn-box { margin-top: 25px; } .main-header.style-two .menu-area .btn-box a{ padding: 10px 38px; font-weight: 500; font-size: 16px; } /** banner-style-14 **/ .banner-style-14{ padding: 280px 0px 100px 0px; } .banner-style-14 .content-box h2{ position: relative; font-size: 36px; line-height: 60px; font-weight: 500; color: #222; margin-bottom: 27px; } .banner-style-14 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 33px; } .banner-style-14 .content-box .mail-box{ margin-bottom: 70px; } .banner-style-14 .content-box .mail-box .form-group { position: relative; max-width: 570px; width: 100%; margin: 0 auto; } .banner-style-14 .content-box .mail-box .form-group input[type='email'] { position: relative; width: 100%; height: 60px; border: 1px solid #4527a4; border-radius: 30px; font-size: 14px; color: #777; padding: 10px 200px 10px 30px; } .banner-style-14 .content-box .mail-box .form-group button { position: absolute; top: 0px; right: 0px; width: 170px; height: 60px; background: #4527a4; text-align: center; font-size: 14px; color: #fff; border-top-right-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; transition: all 500ms ease; } .banner-style-14 .content-box .image-box{ position: relative; } .banner-style-14 .content-box .image-box .image-1{ position: relative; margin: 0px -15px; } .banner-style-14 .content-box .image-box .image-2{ position: absolute; left: -150px; top: 20px; } .banner-style-14 .content-box .image-box .image-3{ position: absolute; right: -150px; top: 30px; } .banner-style-14 .content-box .image-box img{ width: 100%; } .clients-section .trusted-box{ position: relative; display: inline-block; margin-top: 80px; font-size: 16px; background: #ebebeb; color: #2e2e2e; padding: 15px 60px; border-radius: 30px; } /** awesome-features **/ .awesome-features{ position: relative; padding: 85px 45px 110px 45px; } .awesome-features .feature-block-two{ position: relative; margin: 30px 15px; } .feature-block-two .inner-box{ position: relative; background: #fff; text-align: center; border-radius: 30px; padding: 82px 30px 0px 30px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .feature-block-two:hover .inner-box{ background: #4527a4; } .feature-block-two .inner-box .icon-box{ position: relative; display: inline-block; font-size: 60px; line-height: 60px; color: #222; margin-bottom: 59px; transition: all 500ms ease; } .feature-block-two .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #4527a4; font-weight: 500; margin-bottom: 15px; transition: all 500ms ease; } .feature-block-two .inner-box h3 a{ color: #4527a4; } .feature-block-two .inner-box .text{ position: relative; font-size: 16px; margin-bottom: 42px; } .feature-block-two:hover .inner-box .icon-box, .feature-block-two:hover .inner-box h3, .feature-block-two:hover .inner-box h3 a, .feature-block-two:hover .inner-box .text{ color: #fff; } .feature-block-two .inner-box .link-btn{ position: relative; top: 25px; } .feature-block-two .inner-box .link-btn a{ position: relative; display: inline-block; font-size: 16px; font-weight: 700; color: #4527a4; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #fff; border-radius: 50%; opacity: 0; transform: scale(0,0); transition: all 1500ms ease; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .feature-block-two:hover .inner-box .link-btn a{ opacity: 1; transform: scale(1,1); } .awesome-features .sec-title{ margin-bottom: 45px; } .awesome-features .owl-nav{ display: none; } .awesome-features .owl-dots{ position: relative; display: block; text-align: center; margin-top: 100px; } .awesome-features .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #cccccc; border-radius: 50%; margin: 0px 5px; cursor: pointer; transition: all 500ms ease; } .awesome-features .owl-theme .owl-dots .owl-dot.active span, .awesome-features .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; } /** feature-style-12 **/ .feature-style-12{ position: relative; background: #f7f7f7; padding: 110px 0px 120px 0px; } .feature-style-12 .sec-title h2{ margin-bottom: 93px; } #image_block_35 .image-box{ position: relative; } #image_block_35 .image-box img{ width: 100%; } #content_block_35 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 53px; max-width: 400px; } #content_block_35 .content-box .text{ position: relative; margin-bottom: 54px; } #content_block_35 .content-box .text p{ font-size: 16px; margin-bottom: 30px; } #content_block_35 .content-box .text p:last-child{ margin-bottom: 0px; } .feature-style-12 .inner-box{ margin-bottom: 120px; } .feature-style-12 .inner-box:last-child{ margin-bottom: 0px; } /** userfree-section **/ .userfree-section{ position: relative; background: #4527a4; padding: 110px 0px 120px 0px; } .userfree-section .pattern-bg{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; background-size: cover; } .userfree-section .content-box .text{ position: relative; font-size: 16px; color: #fff; margin-bottom: 29px; } .userfree-section .content-box h2{ position: relative; font-size: 36px; line-height: 48px; font-weight: 500; color: #fff; margin-bottom: 36px; } .userfree-section .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; color: #4527a4; line-height: 30px; font-weight: 500; background: #fff; padding: 15px 40px; text-align: center; z-index: 1; border-radius: 30px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .userfree-section .content-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .userfree-section .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .userfree-section .content-box .btn-box a:hover{ background: #4527a4; color: #fff; } /** powerful-management **/ .powerful-management{ position: relative; padding: 110px 0px 120px 0px; } #content_block_36 .content-box h2{ position: relative; font-size: 36px; line-height: 60px; font-weight: 500; color: #222; margin-bottom: 30px; } #content_block_36 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 56px; } #content_block_36 .content-box .theme-btn-two{ padding: 15px 27px; } .powerful-management .inner-box{ position: relative; margin-left: 30px; } #content_block_37 .inner-box .company-list li{ position: relative; float: left; width: 33.333%; margin-bottom: 30px; } #content_block_37 .inner-box .company-list li a{ position: relative; display: inline-block; width: 190px; text-align: center; font-size: 18px; text-transform: uppercase; background: #fff; color: #777; padding: 60px 15px 51px 15px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } #content_block_37 .inner-box .company-list li .company-logo{ margin-bottom: 19px; } #content_block_37 .inner-box .company-list li .company-logo img{ width: auto; transition: all 500ms ease; } #content_block_37 .inner-box .company-list li a:hover .company-logo img{ transform: scale(1.1); } #content_block_37 .inner-box .company-list li:nth-child(2), #content_block_37 .inner-box .company-list li:nth-child(5){ top: 30px; } .powerful-management .sec-title h2{ margin-bottom: 70px; } /** subscribe-style-three **/ .subscribe-style-three{ position: relative; padding: 110px 0px 100px 0px; } .subscribe-style-three .pattern-bg{ position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; } .subscribe-style-three .subscribe-form .form-group{ position: relative; margin: 0px; display: block; background: #fff; border: 2px solid #cccccc; padding: 18px 40px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .subscribe-style-three .subscribe-form .form-group:before{ position: absolute; content: ''; background: #4527a4; width: 8px; height: 100%; left: 0px; top: 0px; } .subscribe-style-three .subscribe-form .form-group input[type='email']{ position: relative; width: 100%; height: 60px; padding: 10px 170px 10px 20px; background: transparent; font-size: 18px; border-radius: 30px; } .subscribe-style-three .subscribe-form .form-group button{ position: absolute; overflow: hidden; top: 18px; right: 23px; font-size: 18px; color: #fff; background: #4527a4; border: 2px solid #4527a4; border-radius: 30px; text-align: center; padding: 13px 33px; cursor: pointer; z-index: 1; transition: all 500ms ease; } .subscribe-style-three .subscribe-form .form-group button:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1, 0.2); transform: scale(1, 0.2); z-index: -1; } .subscribe-style-three .subscribe-form .form-group button:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .subscribe-style-three .subscribe-form .form-group button:hover{ background: #222; } .subscribe-style-three .sec-title h2{ margin-bottom: 64px; } .subscribe-style-three .inner-box .text{ position: relative; display: block; text-align: center; font-size: 18px; margin-bottom: 62px; } /** footer-style-five **/ .main-footer.style-five{ position: relative; } .main-footer.style-five .about-widget .text{ color: #fff; margin-bottom: 21px; } .main-footer.style-five .about-widget .phone{ position: relative; font-size: 30px; line-height: 40px; color: #fff; } .main-footer.style-five .about-widget .phone a{ color: #fff; } .main-footer.style-five .about-widget .phone a:hover{ text-decoration: underline; } .main-footer.style-five .about-widget .phone i{ margin-right: 20px; } .main-footer.style-five .footer-top .footer-logo{ margin-bottom: 17px; } .main-footer.style-five .footer-top .about-widget{ margin-right: 25px; } .main-footer.style-five .footer-top .widget-title{ color: #fff; font-size: 22px; margin-bottom: 25px; } .main-footer.style-five .footer-top .widget-title:before, .main-footer.style-five .footer-top .widget-title:after{ display: none; } .main-footer.style-five .footer-top .links-widget .list li{ padding: 0px; margin-bottom: 5px; } .main-footer.style-five .footer-top .links-widget .list li a{ color: #fff; } .main-footer.style-five .footer-top .links-widget .list li a:hover{ text-decoration: underline; } .main-footer.style-five .footer-top .links-widget .list li a:before{ display: none; } .main-footer.style-five .footer-top .contact-widget .contact-info li{ position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 6px; } .main-footer.style-five .footer-top .contact-widget .contact-info li:last-child{ margin-bottom: 0px; } .main-footer.style-five .footer-top .contact-widget .contact-info li a{ display: inline-block; color: #fff; } .main-footer.style-five .footer-top .contact-widget .contact-info li a:hover{ text-decoration: underline; } .main-footer.style-five .footer-top .contact-widget .contact-info li i{ margin-right: 20px; } .main-footer.style-five .footer-top .contact-widget .contact-info{ position: relative; margin-bottom: 18px; } .main-footer.style-five .footer-top .contact-widget .social-links li{ position: relative; float: left; margin-right: 10px; } .main-footer.style-five .footer-top .contact-widget .social-links li:last-child{ margin-right: 0px; } .main-footer.style-five .footer-top .contact-widget .social-links li a{ position: relative; display: inline-block; color: #fff; font-size: 16px; width: 40px; height: 40px; line-height: 40px; background: transparent; text-align: center; border: 1px solid #fff; border-radius: 50%; } .main-footer.style-five .footer-top .contact-widget .social-links li a:hover{ background: #fff; color: #4527a4; } .main-footer.style-five .footer-top{ border-bottom: 2px solid rgba(255, 255, 255, 0.2); padding-top: 70px; } .main-footer.style-five .footer-bottom .copyright, .main-footer.style-five .footer-bottom .copyright a{ color: #fff; } .main-footer.style-five .footer-bottom .copyright a:hover{ text-decoration: underline; } .main-footer.style-five .footer-bottom .footer-nav li{ position: relative; display: inline-block; padding-right: 40px; margin-right: 35px; } .main-footer.style-five .footer-bottom .footer-nav li:before{ position: absolute; content: ''; background: #fff; width: 1px; height: 16px; top: 8px; right: 0px; } .main-footer.style-five .footer-bottom .footer-nav li:last-child:before{ display: none; } .main-footer.style-five .footer-bottom .footer-nav li:last-child{ padding: 0px; margin: 0px; } .main-footer.style-five .footer-bottom .footer-nav li a{ position: relative; display: inline-block; font-size: 16px; color: #fff; } .main-footer.style-five .footer-bottom .footer-nav li a:hover{ text-decoration: underline; } .main-footer.style-five .footer-bottom{ padding: 19px 0px; } .main-footer.style-five .anim-icons .icon-1 { left: 0px; bottom: 150px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; z-index: 1; } /*** ==================================================================== Home-Page-15 ==================================================================== ***/ .main-header.home-15{ position: relative; } .main-header.home-15 .main-menu .navigation > li > a{ color: #222222; } .main-header.home-15 .search-box-btn, .main-header.home-15 .menu-right-content .cart-box-outer a{ color: #222; font-size: 16px; } .main-header.home-15 .menu-right-content .cart-box-outer a:hover, .main-header.home-15 .search-box-btn:hover{ color: #4527a4; } .main-header.home-15 .menu-right-content .cart-box-outer a span{ right: 5px; top: -10px; background: #4527a4; width: 14px; height: 14px; line-height: 14px; font-size: 10px; } .main-header.home-15 .menu-area .btn-box{ margin: 0px; float: none; display: inline-block; margin-left: 30px; top: 12px; } .main-header.home-15 .menu-area .btn-box a{ padding: 10px 37px; font-size: 16px; font-weight: 600; } .main-header.home-15 .menu-right-content { margin-left: 50px; margin-top: 40px; } .main-header.home-15 .main-menu .navigation > li{ margin: 0px 20px; } .main-header.home-15 .search-box-outer{ margin-left: 0px; margin-right: 30px; } .main-header.home-15 .outer-container .logo-box .logo{ padding-top: 61px; } /** banner-style-15 **/ .banner-style-15{ position: relative; padding: 195px 0px 110px 0px; } .banner-style-15 .content-box{ position: relative; max-width: 730px; width: 100%; margin: 0 auto; text-align: center; padding-bottom: 38px; } .banner-style-15 .content-box h1{ position: relative; font-size: 48px; line-height: 72px; font-weight: 500; color: #4527a4; margin-bottom: 24px; } .banner-style-15 .content-box .text{ position: relative; font-size: 16px; line-height: 36px; margin-bottom: 47px; padding: 0px 40px; } .banner-style-15 .content-box .btn-box .btn-one{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; line-height: 30px; color: #4527a4; background: transparent; border: 1px solid #4527a4; text-align: center; padding: 14px 42px; border-radius: 30px; margin: 0px 15px; z-index: 1; } .banner-style-15 .content-box .btn-box .btn-one:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-15 .content-box .btn-box .btn-one:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-15 .content-box .btn-box .btn-one:hover{ background: #4527a4; color: #fff; } .banner-style-15 .content-box .btn-box .video-btn{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; line-height: 30px; color: #222; background: #e3f1f9; padding: 15px 80px 15px 45px; border-radius: 30px; margin: 0px 15px; } .banner-style-15 .content-box .btn-box .video-btn i{ position: absolute; top: 0px; right: 0px; width: 60px; height: 60px; line-height: 60px; background: #4527a4; color: #fff; font-size: 18px; border-radius: 50%; text-align: center; } .banner-style-15 .content-box .btn-box .video-btn:hover{ background: #4527a4; color: #fff; } .banner-style-15 .image-box img{ width: 100%; } .banner-style-15 .anim-icons .icon-1 { left: 100px; top: 370px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-15 .anim-icons .icon-2 { left: 100px; top: 50%; } .banner-style-15 .anim-icons .icon-3 { left: 100px; bottom: 0px; } .banner-style-15 .anim-icons .icon-4 { right: 100px; bottom: 0px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-15 .anim-icons .icon-5 { right: 100px; top: 50%; } .banner-style-15 .anim-icons .icon-6 { right: 240px; top: 200px; } /** feature-style-13 **/ .feature-style-13 { position: relative; padding-bottom: 230px; } #content_block_38 .content-box .sec-title{ margin-bottom: 50px; } #content_block_38 .content-box .sec-title h2{ line-height: 60px; margin-bottom: 71px; } #content_block_38 .content-box .lower-content .single-item{ position: relative; padding: 0px 0px 0px 100px; margin-bottom: 41px; } #content_block_38 .content-box .lower-content .single-item .icon-box{ position: absolute; left: 0px; top: 5px; color: #4527a4; font-size: 35px; width: 70px; height: 70px; line-height: 70px; text-align: center; background: #f1edff; border-radius: 50%; } #content_block_38 .content-box .lower-content .single-item:last-child .icon-box{ background: #fff1e1; color: #bd6e16; } #content_block_38 .content-box .lower-content .single-item h3{ position: relative; display: block; font-size: 22px; line-height: 30px; font-weight: 500; color: #222; margin-bottom: 18px; } #content_block_38 .content-box .lower-content .single-item h3 a{ display: inline-block; color: #222; } #content_block_38 .content-box .lower-content .single-item h3 a:hover{ color: #4527a4; } #content_block_38 .content-box .lower-content .single-item .text{ position: relative; font-size: 16px; } .feature-style-13 .inner-box .content-box{ position: relative; margin-top: 52px; } #image_block_36 .image-box{ position: relative; } #image_block_36 .image-box img{ position: relative; width: 100%; } #image_block_36 .image-box .bg-layer{ position: absolute; width: 990px; height: 920px; left: 70px; top: -80px; background-repeat: no-repeat; } .feature-style-13 .inner-box:first-child{ margin-bottom: 105px; } .feature-style-13 .inner-box:last-child .content-box .lower-content .single-item:first-child .icon-box{ background: #edfffa !important; color: #4527a4 !important; } .feature-style-13 .inner-box:last-child .image-box{ margin-right: 44px; } #image_block_37 .image-box{ position: relative; } #image_block_37 .image-box img{ position: relative; width: 100*; } #image_block_37 .image-box .bg-layer{ position: absolute; width: 1010px; height: 750px; right: 0px; top: 0px; background-repeat: no-repeat; } .feature-style-13 .anim-icons .icon-1 { background-image: -webkit-linear-gradient(0deg, #fe40a0 0%, #6242aa 100%); width: 145px; height: 145px; left: 100px; top: 0px; border-radius: 50%; box-shadow: 0 20px 30px 0px rgba(0, 0, 0, 0.1); -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .feature-style-13 .anim-icons .icon-2 { background-image: -webkit-linear-gradient(0deg, #fe40a0 0%, #6242aa 100%); width: 145px; height: 145px; right: 100px; bottom: 120px; border-radius: 50%; box-shadow: 0 20px 30px 0px rgba(0, 0, 0, 0.1); -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } /** case-studies **/ .case-studies{ position: relative; padding: 110px 0px 130px 0px; background-image: -webkit-linear-gradient(-90deg, #3d00ff 0%, #4527a4 100%); } .case-studies .sec-title h2, .case-studies .sec-title p{ color: #fff; } .case-studies .sec-title h2{ margin-bottom: 60px; } .case-studies .sec-title{ margin-bottom: 74px; } .case-studies .sec-title h2:after{ background: #fff; } .case-studies .outer-container{ position: relative; max-width: 1680px; width: 100%; padding: 0px 15px; margin: 0 auto; } .case-block-one .inner-box{ position: relative; text-align: center; } .case-block-one .inner-box .image-box{ position: relative; border-radius: 20px; overflow: hidden; background: #000000; } .case-block-one .inner-box .image-box img{ width: 100%; border-radius: 20px; transition: all 500ms ease; } .case-block-one:hover .inner-box .image-box img{ opacity: 0.2; transform: scale(1.1); } .case-block-one .inner-box .image-box .box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .case-block-one .inner-box .image-box .box a{ position: relative; display: inline-block; font-size: 30px; line-height: 30px; font-weight: 700; color: #fff; margin: 0px 25px; opacity: 0; } .case-block-one .inner-box .image-box .box a:hover{ color: #00aeef; } .case-block-one:hover .inner-box .image-box .box a{ opacity: 1; transform: translateX(0px) !important; } .case-block-one .inner-box .image-box .box a:last-child{ transform: translateX(10px); } .case-block-one .inner-box .image-box .box a:first-child{ transform: translateX(-10px); } .case-block-one .inner-box .image-box .box a:before{ position: absolute; content: ''; background: #fff; width: 2px; height: 30px; top: 4px; right: -28px; opacity: 0; transition: all 500ms ease; } .case-block-one:hover .inner-box .image-box .box a:before{ opacity: 1; } .case-block-one .inner-box .image-box .box a:last-child:before{ display: none; } .case-block-one .inner-box .lower-content{ position: relative; padding: 39px 15px 34px 15px; border-bottom: 1px solid #00aeef; transition: all 500ms ease; } .case-block-one:hover .inner-box .lower-content{ border-color: #fff; } .case-block-one .inner-box .lower-content h2{ position: relative; font-size: 30px; line-height: 40px; font-weight: 500; color: #fff; margin-bottom: 6px; } .case-block-one .inner-box .lower-content h2 a{ display: inline-block; color: #fff; } .case-block-one .inner-box .lower-content h2 a:hover{ color: #00aeef; } .case-block-one .inner-box .lower-content .text{ position: relative; font-size: 16px; color: #fff; } .case-studies .owl-nav{ display: none; } .case-studies .owl-dots{ position: relative; display: block; text-align: center; margin-top: 70px; } .case-studies .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #00aeef; margin: 0px 5px; transition: all 500ms ease; cursor: pointer; } .case-studies .owl-theme .owl-dots .owl-dot.active span, .case-studies .owl-theme .owl-dots .owl-dot span:hover{ background: #fff; width: 30px; } /** counter-style-three **/ .counter-style-three{ position: relative; padding: 110px 0px 140px 0px; } .counter-style-three .bg-layer{ position: absolute; width: 100%; height: 100%; left: 0px; top: 90px; right: 0px; z-index: -1; background-repeat: no-repeat; background-position: center; } .counter-style-three .sec-title{ margin-bottom: 86px; } .counter-style-three .sec-title h2{ margin-bottom: 60px; } .counter-style-three .inner-box{ position: relative; display: inline-block; width: 240px; height: 240px; background: #fff; border-radius: 50%; text-align: center; padding: 60px 30px; box-shadow: 15px 20px 30px 0px rgba(0, 0, 0, 0.1); } .counter-style-three .inner-box:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 100%; left: 0px; top: 0px; right: 0px; border-radius: 50%; transition: all 500ms ease; transform: scale(0,0); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3); } .counter-style-three .inner-box:hover:before{ transform: scale(1,1); } .counter-style-three .inner-box:after{ position: absolute; content: ''; background: #fff; width: 270px; height: 270px; left: 0px; top: -5px; border-radius: 50%; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); z-index: -1; } .counter-style-three .inner-box .layer-bg{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .counter-style-three .inner-box:hover .layer-bg{ opacity: 0; } .counter-style-three .inner-box .count-outer span{ position: relative; display: block; font-size: 60px; font-weight: 700; line-height: 70px; color: #4527a4; margin-bottom: 3px; transition: all 500ms ease; } .counter-style-three .inner-box .text{ position: relative; font-size: 20px; transition: all 500ms ease; } .counter-style-three .inner-box:hover .count-outer span, .counter-style-three .inner-box:hover .text{ color: #fff !important; } .counter-style-three .counter-block:nth-child(2) .inner-box .count-outer span{ color: #ff0303; } .counter-style-three .counter-block:nth-child(3) .inner-box .count-outer span{ color: #4aac24; } .counter-style-three .counter-block:last-child .inner-box .count-outer span{ color: #3c00ff; } .counter-style-three .anim-icons .icon-1 { left: 130px; top: 230px; } .counter-style-three .anim-icons .icon-2 { right: 140px; top: 170px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .counter-style-three .anim-icons .icon-3 { right: 100px; bottom: 0px; } /** testimonial-style-12 **/ .testimonial-style-12{ position: relative; padding: 110px 0px 100px 0px; } .testimonial-style-12 .sec-title h2{ line-height: 60px; margin-bottom: 52px; } .testimonial-style-12 .image-layer { position: absolute; left: 0px; top: 0px; width: 100%; height: 835px; right: 0px; background-size: cover; background-position: top center; background-repeat: no-repeat; } .testimonial-style-12 .testimonial-content{ position: relative; text-align: center; margin: 80px 0px 50px 0px; } .testimonial-style-12 .testimonial-content .inner-box{ position: relative; display: block; background: #fff; padding: 0px 30px 60px 30px; border-radius: 20px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-12 .testimonial-content .inner-box .author-info .image-box{ position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #fff; margin-bottom: 26px; margin-top: -55px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .testimonial-style-12 .testimonial-content .inner-box .author-info .image-box img{ width: 100%; border-radius: 50%; } .testimonial-style-12 .testimonial-content .inner-box .author-info .name{ position: relative; font-size: 18px; color: #4527a4; margin-bottom: 8px; } .testimonial-style-12 .testimonial-content .inner-box .author-info .designation{ position: relative; font-size: 16px; } .testimonial-style-12 .testimonial-content .inner-box .author-info{ position: relative; margin-bottom: 34px; } .testimonial-style-12 .testimonial-content .inner-box .text{ position: relative; font-size: 16px; margin-bottom: 15px; } .testimonial-style-12 .testimonial-content .inner-box .icon-box{ position: absolute; left: 50%; bottom: -30px; width: 60px; height: 60px; line-height: 60px; font-size: 24px; text-align: center; color: #fff; background: #4527a4; border-radius: 50%; transform: translateX(-50%); } .testimonial-style-12 .owl-nav{ display: none; } .testimonial-style-12 .owl-dots{ position: relative; display: block; text-align: center; margin-top: 50px; } .testimonial-style-12 .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #b7b7b7; border-radius: 50%; margin: 0px 5px; cursor: pointer; transition: all 500ms ease; } .testimonial-style-12 .owl-theme .owl-dots .owl-dot.active span, .testimonial-style-12 .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; } .pricing-style-four.home-15{ padding: 0px 0px 220px 0px; } /** subscribe-style-four **/ .check-website{ position: relative; background: #4527a4; overflow: hidden; padding: 115px 0px; z-index: 1; } .check-website .vactor-bg-1{ position: absolute; width: 437px; height: 528px; left: 0px; bottom: -15px; background-repeat: no-repeat; } .check-website .vactor-bg-2{ position: absolute; width: 783px; height: 553px; right: 0px; bottom: 0px; z-index: -1; background-repeat: no-repeat; } .check-website .inner-container{ position: relative; max-width: 900px; width: 100%; margin: 0 auto; padding: 0px 15px; text-align: center; } .check-website .inner-container .subscribe-form .form-group{ position: relative; margin-bottom: 42px; } .check-website .inner-container .subscribe-form .form-group input[type='text']{ position: relative; width: 100%; height: 70px; background: #fff; border-radius: 40px; padding: 15px 230px 15px 50px; font-size: 16px; color: #777; border: 3px solid #fff; transition: all 500ms ease; } .check-website .inner-container .subscribe-form .form-group button{ position: absolute; top: 0px; right: 0px; background: #00aeef; font-size: 18px; font-weight: 500; padding: 15px 30px; color: #fff; text-align: center; border-radius: 40px; width: 200px; height: 70px; cursor: pointer; transition: all 500ms ease; } .check-website .inner-container .subscribe-form .form-group input:focus{ border-color: #00aeef; } .check-website .sec-title h2{ color: #fff; margin-bottom: 68px; } .check-website .sec-title h2:after{ background: #fff; } .check-website .inner-container .text{ position: relative; font-size: 16px; color: #dddddd; } .check-website .inner-container .text a{ color: #ddd; font-weight: 700; } .check-website .inner-container .text a:hover{ color: #fff; } .check-website .anim-icons .icon-1 { left: 0px; top: -200px; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .clients-section.home-15{ padding: 120px 0px 115px 0px; } /** free-estimate **/ .free-estimate{ position: relative; padding: 170px 0px 25px 0px; } .free-estimate .image-layer { position: absolute; left: 0px; top: 0px; width: 100%; height: 478px; right: 0px; background-size: cover; background-position: top center; background-repeat: no-repeat; } .free-estimate .inner-box h2{ position: relative; font-size: 36px; line-height: 60px; color: #222; font-weight: 500; } .free-estimate .inner-box .btn-box{ margin-top: 33px; } .free-estimate .inner-box .btn-box .theme-btn-two{ padding: 15px 30px; } /*** ==================================================================== Home-Page-16 ==================================================================== ***/ .main-header.home-16{ position: relative; } .main-header.home-16 .menu-area .btn-box{ margin: 62px 0px 0px 30px; } .main-header.home-16 .menu-area .btn-box a{ padding: 10px 38px; font-size: 16px; font-weight: 500; } /** transactions-work **/ .transactions-work{ position: relative; padding: 60px 0px 140px 0px; } #content_block_39 .content-box .sec-title h2{ margin-bottom: 47px; } .transactions-work .content-box{ position: relative; margin-top: 48px; } #content_block_39 .content-box h5{ position: relative; font-size: 18px; color: #4527a4; font-weight: 500; margin-bottom: 37px; } #content_block_39 .content-box .text{ position: relative; margin-bottom: 54px; } #content_block_39 .content-box .text p{ position: relative; font-size: 16px; margin-bottom: 30px; } #content_block_39 .content-box .text p:last-child{ margin-bottom: 0px; } #content_block_39 .content-box .theme-btn-two{ font-size: 18px; padding: 15px 38px; } #content_block_40 .inner-box .single-item{ position: relative; padding-left: 100px; margin-bottom: 75px; } #content_block_40 .inner-box .single-item:nth-child(2){ margin-left: 150px; } #content_block_40 .inner-box .single-item:last-child{ margin-bottom: 0px; } #content_block_40 .inner-box .single-item .box{ position: relative; padding: 27px 15px 24px 70px; background: #fff; max-width: 280px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); } #content_block_40 .inner-box .single-item .box .pattern-bg .pattern-1{ position: absolute; width: 65px; height: 169px; top: -9px; right: -62px; background-repeat: no-repeat; } #content_block_40 .inner-box .single-item .box .pattern-bg .pattern-2{ position: absolute; width: 258px; height: 80px; top: -21px; right: -42px; z-index: -1; background-repeat: no-repeat; } #content_block_40 .inner-box .single-item .count-box{ position: absolute; left: 0px; top: 13px; width: 136px; height: 116px; line-height: 115px; text-align: center; font-size: 60px; font-weight: 500; color: #fff; background-repeat: no-repeat; z-index: 1; transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } #content_block_40 .inner-box .single-item .box h4{ position: relative; display: block; font-size: 20px; font-weight: 500; color: #222; line-height: 30px; margin-bottom: 10px; } #content_block_40 .inner-box .single-item .box h4 a{ display: inline-block; color: #222; } #content_block_40 .inner-box .single-item .box h4 a:hover{ color: #4527a4; } #content_block_40 .inner-box .single-item .box .text{ position: relative; font-size: 14px; line-height: 24px; } /** crypto-service **/ .crypto-service{ position: relative; padding: 110px 0px 140px 0px; } .crypto-service .image-layer{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center; } .crypto-service .single-item .inner-box{ position: relative; background: #fff; text-align: center; border-radius: 20px; padding: 65px 30px 56px 30px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .crypto-service .single-item:hover .inner-box{ transform: translateY(-15px); background: #f5f5f5; } .crypto-service .single-item .inner-box .icon-box{ position: relative; display: inline-block; margin-bottom: 34px; transition: all 500ms ease; } .crypto-service .single-item:hover .inner-box .icon-box{ transform: scale(1.1); } .crypto-service .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 27px; } .crypto-service .single-item .inner-box h3 a{ display: inline-block; color: #222; } .crypto-service .single-item .inner-box h3 a:hover{ color: #4527a4; } .crypto-service .single-item .inner-box .text{ position: relative; font-size: 16px; margin-bottom: 30px; } .crypto-service .single-item .inner-box .btn-box{ position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%); } .crypto-service .single-item .inner-box .btn-box .theme-btn-two:hover{ background: #fff; border-color: #fff; } .crypto-service .sec-title h2{ margin-bottom: 66px; line-height: 60px; } .crypto-service .inner-content{ position: relative; margin: 0px -15px; } .crypto-service .inner-content .single-column{ padding: 0px 30px; } /** timeline-work **/ .timeline-work{ position: relative; padding: 105px 0px 115px 0px; } .timeline-work .sec-title h2{ line-height: 60px; margin-bottom: 82px; } .timeline-work .inner-content .single-item{ position: relative; float: left; width: 20%; text-align: center; } .timeline-work .inner-content .single-item:first-child, .timeline-work .inner-content .single-item:nth-child(3), .timeline-work .inner-content .single-item:last-child{ padding-top: 51px; } .timeline-work .inner-content .single-item .year{ position: relative; display: inline-block; width: 232px; height: 232px; line-height: 150px; background: #fff; border-radius: 50%; border: 43px solid #b8ce00; text-align: center; font-size: 36px; font-weight: 700; color: #222; margin-bottom: 133px; box-shadow: inset 0 0px 10px 0px rgba(0, 0, 0, 0.2); transition: all 1500ms ease; } .timeline-work .inner-content .single-item:hover .year{ transform: rotate(360deg); } .timeline-work .inner-content .single-item:nth-child(2) .year, .timeline-work .inner-content .single-item:nth-child(4) .year{ margin-bottom: 56px; } .timeline-work .inner-content .single-item:nth-child(2) .year{ border-color: #fdbb0d; } .timeline-work .inner-content .single-item:nth-child(4) .year{ border-color: #eb1d2f; } .timeline-work .inner-content .single-item:nth-child(3) .year{ border-color: #5da8f0; } .timeline-work .inner-content .single-item:last-child .year{ border-color: #a8107e; } .timeline-work .inner-content .single-item .year:before{ position: absolute; content: ''; background: #b8ce00; width: 50px; height: 50px; left: 50%; margin-left: -25px; clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%, 50% 0%); } .timeline-work .inner-content .single-item:first-child .year:before, .timeline-work .inner-content .single-item:nth-child(3) .year:before, .timeline-work .inner-content .single-item:last-child .year:before{ top: -70px; } .timeline-work .inner-content .single-item:nth-child(3) .year:before{ background: #5da8f0; } .timeline-work .inner-content .single-item:last-child .year:before{ background: #a8107e; } .timeline-work .inner-content .single-item:nth-child(4) .year:before{ background: #eb1d2f; } .timeline-work .inner-content .single-item:nth-child(2) .year:before, .timeline-work .inner-content .single-item:nth-child(4) .year:before{ bottom: -70px; transform: rotate(180deg); } .timeline-work .inner-content .single-item:nth-child(2) .year:before{ background: #fdbb0d; } .timeline-work .inner-content .single-item:first-child:after, .timeline-work .inner-content .single-item:nth-child(3):after, .timeline-work .inner-content .single-item:last-child:after{ bottom: 133px; } .timeline-work .inner-content .single-item .text{ position: relative; font-size: 16px; line-height: 24px; margin-bottom: 74px; } .timeline-work .inner-content .single-item:nth-child(2) .text, .timeline-work .inner-content .single-item:nth-child(4) .text{ margin: 0px; } .timeline-work .inner-content .single-item .month{ position: relative; font-size: 30px; line-height: 40px; font-weight: 500; color: #a3c300; } .timeline-work .inner-content .single-item .month:before{ position: absolute; content: ''; background: #d0d2db; width: 1px; height: 55px; left: 50%; transform: translateX(-50%); } .timeline-work .inner-content .single-item:first-child .month:before, .timeline-work .inner-content .single-item:nth-child(3) .month:before, .timeline-work .inner-content .single-item:last-child .month:before{ top: -94px; } .timeline-work .inner-content .single-item:nth-child(2) .month:before, .timeline-work .inner-content .single-item:nth-child(4) .month:before{ bottom: -38px; } .timeline-work .inner-content .single-item .month:after{ position: absolute; content: ''; background: #b8ce00; width: 20px; height: 20px; left: 50%; transform: translateX(-50%); border-radius: 50%; } .timeline-work .inner-content .single-item:first-child .month:after, .timeline-work .inner-content .single-item:nth-child(3) .month:after, .timeline-work .inner-content .single-item:last-child .month:after{ top: -40px; } .timeline-work .inner-content .single-item:nth-child(2) .month:after, .timeline-work .inner-content .single-item:nth-child(4) .month:after{ bottom: 15px; } .timeline-work .inner-content .single-item:nth-child(2) .month:after{ background: #fdbb0d; } .timeline-work .inner-content .single-item:nth-child(4) .month:after{ background: #eb1d2f; } .timeline-work .inner-content .single-item:nth-child(3) .month:after{ background: #5da8f0; } .timeline-work .inner-content .single-item:last-child .month:after{ background: #a8107e; } .timeline-work .inner-content .single-item:nth-child(2) .month, .timeline-work .inner-content .single-item:nth-child(4) .month{ margin-bottom: 80px; padding-bottom: 52px; } .timeline-work .inner-content .single-item:nth-child(2) .month{ color: #fdbb0d; } .timeline-work .inner-content .single-item:nth-child(4) .month{ color: #eb1d2f; } .timeline-work .inner-content .single-item:nth-child(3) .month{ color: #5da8f0; } .timeline-work .inner-content .single-item:last-child .month{ color: #a8107e; } /** take-control **/ .take-control{ position: relative; width: 100%; padding: 103px 0px 130px 0px; background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .take-control .sec-title h2{ color: #fff; line-height: 60px; margin-bottom: 50px; } .take-control .sec-title h2:after{ background: #fff; } .take-control .single-item .inner-box{ position: relative; padding: 55px 0px 20px 255px; margin-bottom: 54px; } .take-control .single-column:nth-child(3) .single-item .inner-box, .take-control .single-column:last-child .single-item .inner-box{ padding: 55px 255px 20px 0px; } .take-control .single-item .inner-box .image-box{ position: absolute; top: 0px; } .take-control .single-column:first-child .single-item .inner-box .image-box, .take-control .single-column:nth-child(2) .single-item .inner-box .image-box{ left: 0px; } .take-control .single-column:last-child .single-item .inner-box .image-box, .take-control .single-column:nth-child(3) .single-item .inner-box .image-box{ right: 0px; } .take-control .single-item .inner-box h3{ position: relative; display: block; font-size: 26px; line-height: 35px; font-weight: 500; color: #fff; margin-bottom: 15px; } .take-control .single-item .inner-box h3 a{ display: inline-block; color: #fff; } .take-control .single-item .inner-box h3 a:hover{ color: #00aeef; } .take-control .single-item .inner-box .text{ position: relative; font-size: 16px; color: #fff; } /** team-section **/ .team-section{ position: relative; padding: 80px 0px 110px 0px; } .team-block-one .inner-box{ position: relative; background: #ebebeb; padding: 25px; text-align: center; border-top-right-radius: 200px; border-top-left-radius: 200px; border-bottom-left-radius: 45px; border-bottom-right-radius: 45px; } .team-block-one .inner-box .image-box{ position: relative; background: #4527a4; border-radius: 50%; overflow: hidden; } .team-block-one .inner-box .image-box img{ width: 100%; border-radius: 50%; transition: all 500ms ease; } .team-block-one:hover .inner-box .image-box img{ transform: scale(1.1); } .team-block-one .inner-box .lower-content{ position: relative; padding: 35px 15px 11px 15px; } .team-block-one .inner-box .lower-content h2{ position: relative; display: block; font-size: 30px; line-height: 40px; font-weight: 500; color: #222; text-transform: uppercase; margin-bottom: 12px; } .team-block-one .inner-box .lower-content h2 a{ display: inline-block; color: #222; } .team-block-one .inner-box .lower-content h2 a:hover{ color: #4527a4; } .team-block-one .inner-box .lower-content .designation{ position: relative; font-size: 15px; } .team-block-one .inner-box .lower-content .icon-1{ position: absolute; left: 7px; top: -77px; background: #131d27; width: 70px; height: 70px; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .team-block-one .inner-box .lower-content .icon-2{ position: absolute; right: -4px; top: -115px; background: #ff0000; width: 40px; height: 40px; border-radius: 50%; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .team-section .owl-nav{ display: none; } .team-section .owl-dots{ position: relative; display: block; text-align: center; margin-top: 70px; } .team-section .owl-theme .owl-dots .owl-dot span{ position: relative; display: inline-block; width: 10px; height: 10px; background: #05080b; border-radius: 50%; margin: 0px 5px; cursor: pointer; border: none; transition: all 500ms ease; } .team-section .owl-theme .owl-dots .owl-dot.active span, .team-section .owl-theme .owl-dots .owl-dot span:hover{ background: #4527a4; width: 50px; border-radius: 5px; } .team-section .sec-title h2{ line-height: 60px; margin-bottom: 68px; } .news-section.home-16{ background: #f5f5f5; overflow: hidden; z-index: 1; } .news-section.home-16 .pattern-bg .pattern-1{ position: absolute; width: 600px; height: 580px; left: 0px; top: 0px; background-repeat: no-repeat; } .news-section.home-16 .pattern-bg .pattern-2{ position: absolute; width: 390px; height: 580px; right: 0px; bottom: -130px; background-repeat: no-repeat; } .news-section.home-16 .news-block-one .image-box img{ transform: scale(1.01); } .news-section.home-16 .news-block-one:hover .image-box img{ transform: scale(1.1); } .news-section.home-16 .news-block-one .image-box{ border: 1px solid #d7d7d7; } /** subscribe-style-five **/ .subscribe-style-five{ position: relative; padding: 185px 0px 120px 0px; } .subscribe-style-five .image-box{ position: relative; margin-top: 8px; } #image_block_38 .image-box .bg-layer{ position: absolute; width: 592px; height: 480px; top: -80px; right: 0px; background-repeat: no-repeat; } #image_block_38 .image-box img{ position: relative; width: 100%; } .subscribe-style-five #image_block_38 .image-box img{ max-width: none; width: auto; float: right; } .subscribe-style-five .content-box{ position: relative; margin-left: 70px; } #content_block_41 .content-box .sec-title h2{ margin-bottom: 54px; } #content_block_41 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 44px; } #content_block_41 .content-box .subscribe-form .form-group{ position: relative; margin: 0px; } #content_block_41 .content-box .subscribe-form .form-group input[type='email']{ position: relative; width: 100%; height: 60px; border: 2px solid #dddddd; border-radius: 30px; font-size: 16px; padding: 10px 30px; margin-bottom: 30px; transition: all 500ms ease; } #content_block_41 .content-box .subscribe-form .form-group input:focus{ border-color: #4527a4; } #content_block_41 .content-box .subscribe-form .form-group .theme-btn-two{ padding: 15px 43px; font-size: 16px; } /** footer-style-six **/ .main-footer.style-six{ position: relative; } .main-footer.style-six .about-widget .apps-download h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #fff; margin-bottom: 36px; } .main-footer.style-six .about-widget .download-btn a{ position: relative; display: inline-block; font-size: 16px; line-height: 18px; font-weight: 500; color: #fff; background: #4527a4; border: 2px solid #fff; border-radius: 10px; padding: 8px 21px 10px 61px; z-index: 1; } .main-footer.style-six .about-widget .download-btn a:hover{ background: #fff; color: #4527a4; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); } .main-footer.style-six .about-widget .download-btn a span{ position: relative; display: block; font-size: 10px; } .main-footer.style-six .about-widget .download-btn a i{ position: absolute; left: 24px; top: 11px; font-size: 30px; color: #fff; transition: all 500ms ease; } .main-footer.style-six .about-widget .download-btn a:hover i{ color: #222; } .main-footer.style-six .about-widget .download-btn .app-store-btn{ margin-right: 25px; } .main-footer.style-six .footer-top .about-widget{ margin-right: 0px; margin-bottom: -30px; } .main-footer.style-six .about-widget .text{ margin-bottom: 29px; } .main-footer.style-six .footer-top{ padding-bottom: 0px; margin-bottom: 0px; } .main-footer.style-six .footer-top:before{ position: absolute; content: ''; background: #4527a4; width: 400px; height: 2px; left: 0px; bottom: -2px; } .main-footer.style-six .copyright{ position: relative; text-align: center; background: #251757; font-size: 16px; color: #fff; padding: 20px 0px 20px 0px; margin-top: 80px; } .main-footer.style-six .copyright a{ color: #fff; } .main-footer.style-six .copyright a:hover{ text-decoration: underline; } /*** ==================================================================== Home-Page-17 ==================================================================== ***/ .main-header.home-17 .main-menu .navigation > li > a{ color: #222; } .main-header.home-17 .menu-area .btn-box a{ padding: 10px 38px; font-size: 16px; font-weight: 500; } .main-header.home-17 .menu-area .btn-box{ margin-top: 60px; } /** banner-style-17 **/ .banner-style-17{ position: relative; overflow: hidden; padding: 190px 0px 100px 0px; } .banner-style-17 .image-shap { position: absolute; width: 405px; height: 445px; left: 0px; top: 35%; background-repeat: no-repeat; } .banner-style-17:after{ position: absolute; content: ''; background: url(../images/icons/map-shap-6.png); width: 1010px; height: 530px; left: 80px; top: 140px; background-repeat: no-repeat; z-index: -2; } .banner-style-17 .anim-icons .icon-1 { background-image: -webkit-linear-gradient(0deg, #20d5dd 0%, #5d339e 100%); width: 80px; height: 80px; left: 80px; bottom: 100px; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-17 .image-layer { position: absolute; top: 0px; right: 0px; width: 100%; height: 1055px; background-repeat: no-repeat; background-position: right center; z-index: -1; } .banner-style-17 .content-box .mail-box .form-group { position: relative; margin-bottom: 41px; } .banner-style-17 .content-box .mail-box .form-group input[type='email'] { position: relative; width: 100%; height: 60px; border: 1px solid #959595; border-radius: 30px; font-size: 14px; color: #777; padding: 10px 200px 10px 30px; transition: all 500ms ease; } .banner-style-17 .content-box .mail-box .form-group input:focus{ border-color: #4527a4; } .banner-style-17 .content-box .mail-box .form-group button { position: absolute; top: 0px; right: 0px; width: 170px; height: 60px; background: #4527a4; text-align: center; font-size: 14px; color: #fff; border-top-right-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; transition: all 500ms ease; } .banner-style-17 .content-box h1{ position: relative; font-size: 48px; line-height: 72px; font-weight: 500; color: #222; margin-bottom: 51px; } .banner-style-17 .content-box h1 span{ display: block; font-weight: 400; } .banner-style-17 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 55px; } .banner-style-17 .content-box .download-btn a{ position: relative; display: inline-block; font-size: 16px; line-height: 18px; font-weight: 500; color: #fff; background: #222; border-radius: 10px; padding: 8px 21px 10px 61px; z-index: 1; } .banner-style-17 .content-box .download-btn a:hover{ background: #fff; color: #4527a4; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); } .banner-style-17 .content-box .download-btn a span{ position: relative; display: block; font-size: 10px; } .banner-style-17 .content-box .download-btn a i{ position: absolute; left: 24px; top: 11px; font-size: 30px; color: #fff; transition: all 500ms ease; } .banner-style-17 .content-box .download-btn a:hover i{ color: #222; } .banner-style-17 .content-box .download-btn .app-store-btn{ margin-right: 30px; } .banner-style-17 .image-box{ position: relative; margin-left: 100px; } .banner-style-17 .image-box img{ max-width: none; float: left; } .banner-style-17 .content-box{ padding-top: 16px; } /** rider-section **/ .rider-section{ position: relative; padding: 100px 0px 135px 0px; } .rider-section .inner-content .inner-box:first-child .image-box{ position: relative; margin-right: 42px; } .rider-section .inner-content .inner-box:last-child .image-box{ position: relative; margin-left: 103px; } #image_block_39 .image-box{ position: relative; } #image_block_39 .image-box img{ width: 100%; } #content_block_42 .content-box h2{ position: relative; display: inline-block; font-size: 36px; line-height: 36px; font-weight: 500; color: #222; border-bottom: 1px solid #a9a9a9; margin-bottom: 57px; } #content_block_42 .content-box span{ position: relative; display: block; font-size: 16px; color: #4527a4; margin-bottom: 31px; } #content_block_42 .content-box .text{ position: relative; margin-bottom: 63px; } #content_block_42 .content-box .text p{ margin-bottom: 30px; } #content_block_42 .content-box .text p:last-child{ margin-bottom: 0px; } #content_block_42 .content-box .btn-box{ position: relative; display: block; } #content_block_42 .content-box .btn-box .theme-btn{ border-color: #777777; height: 60px; color: #777; padding: 16px 80px 16px 40px; } #content_block_42 .content-box .btn-box .theme-btn:hover{ border-color: #4527a4; color: #fff; } #content_block_42 .content-box .btn-box .theme-btn i{ top: 4px; right: 5px; } #content_block_42 .content-box .btn-box .theme-btn-two{ margin-right: 30px; padding: 15px 41px; float: left; } .rider-section .sec-title{ margin-bottom: 60px; } .rider-section .sec-title h2{ font-size: 48px; margin-bottom: 60px; } .rider-section .inner-content .inner-box:first-child{ margin-bottom: 125px; } /** whereyou-section **/ .whereyou-section{ position: relative; padding: 100px 0px 100px 0px; } .whereyou-section .bg-layer{ position: absolute; width: 1076px; height: 963px; top: 90px; right: 0px; background-repeat: no-repeat; } .whereyou-section .sec-title{ position: relative; max-width: 500px; width: 100%; margin: 0 auto; padding-bottom: 54px; } .whereyou-section .sec-title h2{ font-size: 48px; margin-bottom: 59px; } #content_block_43 .content-box .tab-btn-box{ position: relative; display: block; margin-bottom: 30px; } #content_block_43 .content-box .tab-btns{ position: relative; display: inline-block; background: #fff; overflow: hidden; border-radius: 30px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); } #content_block_43 .content-box .tab-btns li{ position: relative; display: inline-block; font-size: 40px; background: #fff; border-radius: 30px; padding: 10px 47px; transition: all 500ms ease; cursor: pointer; } #content_block_43 .content-box .tab-btns li.active-btn{ background: #7d7d7d; color: #fff; } #content_block_43 .content-box .estimate-form .form-group{ position: relative; margin-bottom: 30px; } #content_block_43 .content-box .estimate-form .form-group i{ position: absolute; top: 22px; right: 30px; font-size: 16px; font-weight: 700; color: #4527a4; z-index: 1; } #content_block_43 .content-box .estimate-form .form-group input[type='text']{ position: relative; width: 100%; height: 60px; font-size: 16px; border: 1px solid #d7d7d7; border-radius: 30px; padding: 10px 70px 10px 30px; transition: all 500ms ease; } #content_block_43 .content-box .estimate-form .form-group input:focus{ border-color: #4527a4; } #content_block_43 .content-box .estimate-form .btn-box button{ position: relative; display: inline-block; overflow: hidden; font-size: 15px; height: 60px; padding: 17px 80px 17px 40px; background: #4527a4; line-height: 26px; color: #fff; border: 1px solid #4527a4; font-weight: 500; border-radius: 30px; cursor: pointer; z-index: 1; transition: all 500ms ease; } #content_block_43 .content-box .estimate-form .btn-box button:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_43 .content-box .estimate-form .btn-box button:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_43 .content-box .estimate-form .btn-box button:hover{ background: #fff; color: #4527a4; } #content_block_43 .content-box .estimate-form .btn-box button i{ position: absolute; top: 4px; right: 6px; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #fff; font-size: 15px; color: #4527a4; border-radius: 50%; transition: all 900ms ease; } #content_block_43 .content-box .estimate-form .btn-box button:hover i{ background: #4527a4; color: #fff; } #content_block_43 .content-box .estimate-form .btn-box{ position: relative; padding-top: 10px; } #content_block_43 .content-box{ position: relative; } .whereyou-section .image-box{ margin-left: 50px; } #image_block_40 .image-box{ position: relative; } #image_block_40 .image-box img{ width: 100%; max-width: 100%; float: none; } .whereyou-section #image_block_40 .image-box img{ position: relative; max-width: none; float: left; width: auto; } .whereyou-section .anim-icons .icon-1 { left: 140px; top: 300px; background-repeat: no-repeat; animation-name: slideInLeft; animation-duration: 10s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInLeft; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInLeft; -moz-animation-duration: 10s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInLeft; -ms-animation-duration: 10s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } /** ridesharing-section **/ .ridesharing-section{ position: relative; padding: 45px 0px 125px 0px; } .ridesharing-section .single-item .inner-box .image-box{ position: relative; min-height: 155px; margin-bottom: 35px; } .ridesharing-section .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 28px; } .ridesharing-section .single-item .inner-box h3 a{ display: inline-block; color: #222; } .ridesharing-section .single-item .inner-box h3 a:hover{ color: #4527a4; } .ridesharing-section .single-item .inner-box .text{ position: relative; font-size: 16px; } .ridesharing-section .sec-title{ margin-bottom: 78px; } .ridesharing-section .sec-title h2{ font-size: 48px; margin-bottom: 59px; } #default_image_block .image-box{ position: relative; } #default_image_block .image-box img{ width: 100%; } /** news-style-two **/ .news-style-two{ position: relative; padding: 100px 0px 100px 0px; } .news-style-two .sec-title h2{ font-size: 48px; margin-bottom: 88px; } .news-style-two .inner-content{ position: relative; margin: 0px -15px; padding: 0px 60px; } .news-style-two .news-block{ padding: 0px 30px; } .news-block-two .inner-box{ position: relative; display: block; text-align: center; } .news-block-two .inner-box .image-box{ position: relative; overflow: hidden; background: #4527a4; border: 1px solid #d7d7d7; border-radius: 20px; } .news-block-two .inner-box .image-box img{ width: 100%; transform: scale(1.01); border-radius: 20px; transition: all 500ms ease; } .news-block-two:hover .inner-box .image-box img{ opacity: 0.2; transform: scale(1.1); } .news-block-two .inner-box .lower-content{ position: relative; overflow: hidden; background: #fff; margin: 0px 30px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 23px 30px 20px 30px; } .news-block-two .inner-box .lower-content:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 0%; left: 0px; bottom: 0px; transition: all 500ms ease; } .news-block-two:hover .inner-box .lower-content:before{ height: 100%; top: 0px; } .news-block-two .inner-box .lower-content .post-date{ position: relative; font-size: 16px; margin-bottom: 6px; transition: all 500ms ease; } .news-block-two .inner-box .lower-content .post-date i{ margin-right: 10px; } .news-block-two .inner-box .lower-content h3{ position: relative; display: block; font-size: 24px; line-height: 36px; font-weight: 500; color: #222; } .news-block-two .inner-box .lower-content h3 a{ display: inline-block; color: #222; } .news-block-two:hover .inner-box .lower-content h3, .news-block-two:hover .inner-box .lower-content .post-date, .news-block-two:hover .inner-box .lower-content h3 a{ color: #fff; } .download-apps.home-17{ position: relative; padding: 145px 0px 50px 0px; } .download-apps.home-17:before{ position: absolute; content: ''; background: #f8f7fc; width: 100%; height: 100%; left: 0px; top: 50%; } .download-apps.home-17 .image-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 675px; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } .download-apps.home-17 .image-box{ margin-right: 60px; } /*** ==================================================================== Home-Page-18 ==================================================================== ***/ /** header-style-three **/ .main-header.style-three{ position: relative; } .main-header.style-three .header-top{ position: relative; background: #4527a4; width: 100%; padding: 10px 0px; } .main-header.style-three .header-top .inner-container li{ position: relative; display: inline-block; } .main-header.style-three .header-top .inner-container .header-info li{ margin-right: 20px; } .main-header.style-three .header-top .inner-container .header-info li:last-child{ margin-right: 0px; } .main-header.style-three .header-top .inner-container .header-info li i{ font-size: 14px; color: #855ffe; margin-right: 10px; } .main-header.style-three .header-top .inner-container .header-nav li{ margin-right: 45px; } .main-header.style-three .header-top .inner-container .header-nav li:last-child{ margin-right: 0px; } .main-header.style-three .header-top .inner-container li a{ position: relative; display: inline-block; font-size: 14px; color: #fff; } .main-header.style-three .header-top .inner-container li a:hover{ text-decoration: underline; } .main-header.style-three .header-upper{ position: relative; } .main-header.style-three .header-upper .main-box{ position: relative; background: #fff; margin: 0px -35px; padding: 0px 35px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } .main-header.style-three .main-menu .navigation > li > a{ color: #777777; } .main-header.style-three .outer-container .logo-box .logo{ padding: 35px 0px 34px 0px; } .main-header.style-three .main-menu .navigation > li{ padding: 45px 0px; } .main-header.style-three .main-menu .navigation > li:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 5px; transform: scale(0,0); left: 0px; bottom: 0px; transition: all 500ms ease; } .main-header.style-three .main-menu .navigation > li.current:before, .main-header.style-three .main-menu .navigation > li:hover:before{ transform: scale(1,1); } .main-header.style-three .menu-area .btn-box{ margin-top: 36px; } .main-header.style-three .menu-area .btn-box a{ padding: 10px 42px; font-size: 16px; font-weight: 500; } /** banner-style-18 **/ .banner-style-18{ position: relative; padding: 215px 0px 345px 0px; background: linear-gradient(90deg, #0f0946 0%, #42269e 50%, #0f0946 100%); } .banner-style-18 .content-box{ position: relative; max-width: 450px; width: 100%; margin-top: 108px; } .banner-style-18 .content-box h1{ position: relative; font-size: 48px; line-height: 72px; color: #fff; font-weight: 500; margin-bottom: 35px; } .banner-style-18 .content-box .text{ position: relative; font-size: 16px; color: #fff; margin-bottom: 65px; } .banner-style-18 .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; color: #222; line-height: 30px; background: #fff; padding: 15px 50px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .banner-style-18 .content-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-18 .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-18 .content-box .btn-box a:hover{ background: #4527a4; color: #fff; } .banner-style-18 .image-box img{ width: 100%; } .banner-style-18 .anim-icons .icon-1 { left: 120px; top: 180px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-18 .anim-icons .icon-2 { left: 65px; bottom: 300px; } .banner-style-18 .anim-icons .icon-3 { left: 420px; top: 220px; } /** domain-section **/ .domain-section{ position: relative; } .domain-section .inner-container{ position: relative; background: #fff; padding: 95px 100px; margin-top: -275px; border-radius: 30px; box-shadow: 0 10px 50px 0px rgba(0, 0, 0, 0.1); } .domain-section .sec-title h2{ margin-bottom: 78px; } .domain-section .search-form .form-group{ position: relative; margin-bottom: 51px; } .domain-section .search-form .form-group input[type='text']{ position: relative; width: 100%; height: 100px; background: #fff; border: 3px solid #fff; padding: 15px 230px 15px 30px; border-radius: 15px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .domain-section .search-form .form-group input:focus{ border-color: #4527a4; } .domain-section .search-form .form-group button{ position: absolute; top: 10px; overflow: hidden; right: 10px; display: inline-block; font-size: 18px; font-weight: 500; color: #fff; background: #4527a4; text-align: center; padding: 25px 45px; cursor: pointer; border-radius: 10px; z-index: 1; transition: all 500ms ease; } .domain-section .search-form .form-group button:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .domain-section .search-form .form-group button:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .domain-section .search-form .form-group button:hover{ background: #222; } .domain-section .domain-name{ position: relative; max-width: 700px; width: 100%; margin: 0 auto; text-align: center; } .domain-section .domain-name li{ position: relative; float: left; text-align: center; width: 20%; } .domain-section .domain-name li a{ position: relative; display: inline-block; font-size: 18px; color: #777; } .domain-section .domain-name li a span{ font-size: 24px; font-weight: 700; color: #222; } .domain-section .domain-name li:first-child a span{ color: #4527a4; } .domain-section .domain-name li:nth-child(2) a span{ color: #ffb600; } .domain-section .domain-name li:nth-child(4) a span{ color: #ff0000; } .domain-section .domain-name li:last-child a span{ color: #54fe00; } /** best-hosting **/ .best-hosting{ position: relative; padding: 143px 0px 100px 0px; } .best-hosting .sec-title h3{ position: relative; font-size: 24px; line-height: 32px; color: #222; margin-bottom: 16px; } .best-hosting .sec-title h2{ color: #4527a4; margin-bottom: 69px; } .best-hosting .single-item .inner-box{ position: relative; background: #fff; border-radius: 15px; min-height: 420px; padding: 53px 30px 52px 50px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .best-hosting .single-item:hover .inner-box{ transform: translateY(-15px); } .best-hosting .single-item .inner-box .bg-layer{ position: absolute; width: 100%; height: 100%; left: 0px; bottom: 0px; opacity: 0; border-radius: 15px; background-repeat: no-repeat; background-position: left bottom; transition: all 500ms ease; } .best-hosting .single-item:hover .inner-box .bg-layer{ opacity: 1; } .best-hosting .single-item .icon-box{ position: relative; display: inline-block; font-size: 70px; line-height: 70px; color: #9ece1c; margin-bottom: 32px; } .best-hosting .single-column:nth-child(2) .single-item .icon-box{ color: #ff0000; } .best-hosting .single-column:last-child .single-item .icon-box{ color: #ffb600; } .best-hosting .single-item h3{ position: relative; display: block; font-size: 23px; line-height: 36px; color: #222; margin-bottom: 36px; } .best-hosting .single-item h3 a{ display: inline-block; color: #222; } .best-hosting .single-item h3 a:hover{ color: #4527a4; } .best-hosting .single-item .text{ position: relative; font-size: 16px; margin-bottom: 15px; } .best-hosting .single-item .link-btn a{ position: relative; display: inline-block; font-size: 20px; color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #d7d7d7; border-radius: 50%; z-index: 1; } .best-hosting .single-item:hover .link-btn a{ background: #4527a4; } .best-hosting .single-item .link-btn{ position: absolute; left: 50px; bottom: -23px; } .best-hosting .single-column{ padding: 0px 35px; } .best-hosting .inner-content{ position: relative; margin: 0px -20px; } /** increase-website **/ .increase-website{ position: relative; padding: 85px 0px 50px 0px; } .increase-website .content-box{ position: relative; margin: 0px 70px; padding-top: 60px; } #content_block_44 .content-box h2{ position: relative; font-size: 36px; line-height: 60px; color: #222; margin-bottom: 64px; } #content_block_44 .content-box .text{ position: relative; display: block; font-size: 16px; line-height: 36px; margin-bottom: 50px; } #content_block_44 .content-box .btn-box .theme-btn{ background: #4527a4; color: #fff; font-size: 16px; height: 60px; font-weight: 400; padding: 17px 80px 17px 35px; z-index: 1; } #content_block_44 .content-box .btn-box .theme-btn:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #222; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_44 .content-box .btn-box .theme-btn:hover::after { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_44 .content-box .btn-box .theme-btn:hover{ box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.5); } #content_block_44 .content-box .btn-box .theme-btn i{ background: #fff; color: #4527a4; top: 4px; right: 5px; } .increase-website .image-box{ margin: 0px -380px 0px 30px; } #image_block_41 .image-box{ position: relative; } #image_block_41 .image-box .image img{ width: 100%; } #image_block_41 .image-box .image-2{ position: absolute; left: 0px; bottom: 110px; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); } #image_block_41 .image-box .image-3{ position: absolute; left: 310px; top: -40px; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.1); } /** domain-prices **/ .domain-prices{ position: relative; padding: 65px 0px 50px 0px; } .domain-prices .domain-name, .domain-prices .pricing-inner{ position: relative; border: 1px solid #f5f5f5; } .domain-prices .domain-name li, .domain-prices .pricing-inner .pricing-table li{ position: relative; display: block; text-align: center; padding: 24px 15px; font-size: 24px; line-height: 32px; font-weight: 700; color: #777; background: #fff; } .domain-prices .domain-name li:nth-child(2n+1), .domain-prices .pricing-inner .pricing-table li:nth-child(2n+1){ background: #f5f5f5; } .domain-prices .domain-name li.heading, .domain-prices .pricing-inner .pricing-table li.heading{ font-size: 24px; line-height: 32px; color: #fff; font-weight: 400; padding: 28px 15px; background: linear-gradient(0deg, #5259fe 0%, #4427a4 100%); } .domain-prices .pricing-inner .pricing-table{ position: relative; float: left; width: 33.33333%; } .domain-prices .pricing-inner .pricing-table:nth-child(2) li.heading{ background: linear-gradient(0deg, #4427a4 0%, #5259fe 100%); } .domain-prices .domain-name li:nth-child(2){ color: #0180cf; } .domain-prices .domain-name li:nth-child(3){ color: #01b630; } .domain-prices .domain-name li:nth-child(4){ color: #ff1d42; } .domain-prices .domain-name li:nth-child(5){ color: #6c3394; } .domain-prices .domain-name li:nth-child(6){ color: #262223; } .domain-prices .domain-name li:nth-child(7){ color: #fa6801; } .domain-prices .domain-name li:last-child{ color: #0145c6; } .domain-prices .sec-title h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; margin-bottom: 15px; } .domain-prices .sec-title h2{ color: #4527a4; margin-bottom: 60px; } /** service-style-four **/ .service-style-four{ position: relative; padding-top: 65px; } .service-style-four .sec-title h3{ position: relative; font-size: 24px; line-height: 32px; color: #222; margin-bottom: 15px; } .service-style-four .sec-title h2{ color: #4527a4; margin-bottom: 138px; } .service-style-four .service-block:nth-child(2) .service-block-three .inner-box .icon-box:before { background: url(../images/icons/icon-bg-1.png); } .service-style-four .service-block:nth-child(3) .service-block-three .inner-box .icon-box:before { background: url(../images/icons/icon-bg-4.png); } .service-style-four .service-block:nth-child(4) .service-block-three .inner-box .icon-box:before { background: url(../images/icons/icon-bg-2.png); } .service-style-four .service-block:nth-child(5) .service-block-three .inner-box .icon-box:before { background: url(../images/icons/icon-bg-6.png); } .service-style-four .service-block:last-child .service-block-three .inner-box .icon-box:before { background: url(../images/icons/icon-bg-5.png); } .service-style-four .service-block{ padding: 0px 22px 0px 23px; } .service-style-four .inner-content{ position: relative; margin: 0px -7px 0px -8px; } .service-style-four .service-block-three .inner-box{ padding: 0px 50px 55px 50px; max-height: 315px; } .service-style-four .service-block-three .inner-box .link-btn{ position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); } .service-style-four .service-block-three .inner-box .link-btn a{ position: relative; display: inline-block; font-size: 24px; color: #fff; font-weight: 400; width: 40px; height: 40px; line-height: 42px; background: #4527a4; text-align: center; border-radius: 50%; transform: scale(0,0); } .service-style-four .service-block-three:hover .inner-box .link-btn a{ transform: scale(1,1); } .service-style-four .service-block-three{ margin-bottom: 160px; } /** managed-wordpress **/ .managed-wordpress{ position: relative; padding: 82px 0px 70px 0px; } .managed-wordpress .image-layer { position: absolute; top: -40px; left: 0px; width: 100%; height: 755px; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } #content_block_45 .content-box .sec-title h2{ color: #fff; line-height: 60px; margin-bottom: 78px; } #content_block_45 .content-box.black-text .sec-title h2{ color: #222; } #content_block_45 .content-box .sec-title h2:after{ background: #fff; } #content_block_45 .content-box.black-text .sec-title h2:after{ background: #777; } #content_block_45 .content-box .text{ position: relative; font-size: 16px; line-height: 36px; color: #fff; margin-bottom: 51px; } #content_block_45 .content-box.black-text .text{ color: #777; } #content_block_45 .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; color: #4527a4; line-height: 30px; background: #fff; padding: 15px 47px; text-align: center; border-radius: 30px; z-index: 1; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } #content_block_45 .content-box .btn-box a:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_45 .content-box .btn-box a:hover::after { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_45 .content-box.black-text .btn-box a{ background: #4527a4; color: #fff; } #content_block_45 .content-box.black-text .btn-box a:hover{ background: #fff; color: #fff; } #content_block_45 .content-box .btn-box a:hover{ color: #fff; background: #4527a4; } .managed-wordpress .content-box{ position: relative; margin-top: 42px; } .managed-wordpress .image-box{ margin-right: 50px; } #image_block_42 .image-box{ position: relative; } #image_block_42 .image-box img{ width: 100%; } .testimonial-style-nine.home-18{ position: relative; padding-bottom: 110px; } .testimonial-style-nine.home-18:before{ display: none; } .testimonial-style-nine.home-18 .testimonial-content .text, .testimonial-style-nine.home-18 .testimonial-content .author-info .designation{ color: #777; } .testimonial-style-nine.home-18 .testimonial-content .author-info .name{ color: #4527a4; } .testimonial-style-nine.home-18 .owl-nav .owl-prev, .testimonial-style-nine.home-18 .owl-nav .owl-next{ background: transparent; border: 1px solid #4527a4; color: #4527a4; } .testimonial-style-nine.home-18 .owl-nav .owl-prev:hover, .testimonial-style-nine.home-18 .owl-nav .owl-next:hover{ color: #fff; background: #4527a4; } .subscribe-style-five.home-18{ position: relative; padding-top: 187px; padding-bottom: 75px; } .subscribe-style-five.home-18:before{ position: absolute; content: ''; background: #f5f5f5; width: 100%; height: 100%; left: 0px; top: 50%; } .subscribe-style-five.home-18 .image-box{ margin-top: 50px; } .subscribe-style-five.home-18 .image-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 900px; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } .subscribe-style-five.home-18 .content-box .subscribe-form .form-group input[type='email']{ background: transparent; } /*============= donate form area =================*/ .donate-popup{ position:fixed; left:0px; top:-100%; width:100%; height:100%; background:rgba(0,0,0,0.80); z-index:9999; visibility:hidden; opacity:0; overflow:auto; transition:all 700ms ease; -moz-transition:all 700ms ease; -webkit-transition:all 700ms ease; -ms-transition:all 700ms ease; -o-transition:all 700ms ease; } .donate-popup.popup-visible{ top:0; visibility:visible; opacity:1; } .donate-popup .close-donate{ position:absolute; right:25px; top:25px; font-size:30px; font-weight: 700; color:#ffffff; cursor:pointer; z-index:5; } .donate-form-area { margin-top: 100px; margin-bottom: 100px; background: #f2f2f2; padding:57px; border: 3px solid #4527a4; } .donate-form-area h2{ font-size: 36px; text-align: center; font-weight: 400; color: #222222; margin-bottom: 40px; text-transform: capitalize; } .donate-form-area h4 { font-size: 24px; color: #444444; font-weight: 400; margin-bottom: 18px; text-transform: capitalize; } .donate-form-area h3 { font-weight: 400; margin-top: 38px; color: #444444; margin-bottom: 28px; text-transform: capitalize; } .donate-form-area .form-group input{ width: 100%; padding: 0px 15px; border: 1px solid #f4f4f4; transition: all 500ms ease; } .donate-form-area .form-group input:focus{ border: 1px solid #4527a4; } /*check list*/ .chicklet-list { background: #fff; padding: 30px 30px 25px; } .chicklet-list li { padding: 0 5px; display: inline-block; position: relative; cursor: pointer; } .chicklet-list input { font-size: 16px; line-height: 40px; border: 2px solid #4527a4; padding: 0.55em 0.55em 0.55em 0.8em; margin-bottom: 0px; } .chicklet-list input[type=radio] { opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .chicklet-list label { display: block; font-size: 16px; font-weight: normal; background: #ffffff; border: 1px solid #f4f4f4; color: #000; padding: 8px 27px; text-align: center; border-radius: 0; cursor: pointer; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .chicklet-list :checked+label { background: #4527a4; color: #f7f7f7; text-shadow: none; } .chicklet-list li.other-amount { width: 38%; float: right; } .chicklet-list li span { position: absolute; left: -30px; top: 9px; font-size: 16px; color: #303030; } .chicklet-list input[type="text"] { height: 40px; } /*==========*/ .donate-form-area .form-bg { background: #fff; padding: 30px 30px 15px; } .donate-form-area .default-form .form-group { margin-bottom: 15px; } .donate-form-area .default-form .form-group p { margin-bottom: 5px; } .donate-form-area .payment-option { position: relative; margin-top: 20px; margin-bottom: 35px; } .donate-form-area .payment-option li { display: inline-block; font-size: 18px; color: #303030; font-size: 15px; margin-right: 10px; } .donate-form-area .payment-option .checkbox input{ position: relative; width: 15px; height: 15px; top: 2px; } .donate-form-area .payment-option .checkbox label{ position: relative; cursor: pointer; } /*** ==================================================================== Home-Page-19 ==================================================================== ***/ .main-header.home-19{ position: relative; } .main-header.home-19 .main-menu .navigation > li > a{ color: #222; } .main-header.home-19 .menu-area .btn-box button{ position: relative; display: inline-block; overflow: hidden; font-size: 14px; color: #4527a4; line-height: 30px; background: #fff; font-weight: 500; padding: 10px 45px; text-align: center; border-radius: 30px; cursor: pointer; z-index: 1; transition: all 500ms ease; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .main-header.home-19 .menu-area .btn-box button:before{ position: absolute; content: ''; top: 0px; bottom: 0px; left: 0px; right: -50px; z-index: -1; border-bottom: 50px solid #4527a4; border-right: 50px solid transparent; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .main-header.home-19 .menu-area .btn-box button:after{ position: absolute; content: ''; top: 0px; right: 0px; bottom: 0px; left: -50px; z-index: -1; border-left: 40px solid transparent; border-bottom: 50px solid #4527a4; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform: translateX(100%); transform: translateX(100%); } .main-header.home-19 .menu-area .btn-box button:hover::before { -webkit-transform: translateX(-40%); transform: translateX(-40%); } .main-header.home-19 .menu-area .btn-box button:hover::after { -webkit-transform: translateX(40%); transform: translateX(40%); } .main-header.home-19 .menu-area .btn-box button:hover{ background: #4527a4; color: #fff; } .main-header.home-19 .menu-area .btn-box { margin: 60px 0px 0px 65px; } /** banner-style-19 **/ .banner-style-19{ position: relative; padding: 370px 0px 180px 0px; } .banner-style-19 .image-bg{ position: absolute; width: 380px; height: 135px; left: 0px; top: 0px; background-repeat: no-repeat; animation-name: slideInLeft; animation-duration: 3s; animation-iteration-count: 1; animation-timing-function: linear; -webkit-animation-name: slideInLeft; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: slideInLeft; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: slideInLeft; -ms-animation-duration: 3s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; } .banner-style-19 .image-box{ position: relative; margin: 35px -175px 0px 200px; } .banner-style-19 .image-box .bg-layer{ position: absolute; width: 960px; height: 866px; left: -155px; top: -230px; background-repeat: no-repeat; } .banner-style-19 .image-box img{ position: relative; width: 100%; } .banner-style-19 .content-box h1{ position: relative; font-size: 48px; line-height: 73px; color: #222; font-weight: 500; margin-bottom: 38px; } .banner-style-19 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 43px; } .banner-style-19 .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; text-align: center; border-radius: 30px; z-index: 1; } .banner-style-19 .content-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-style-19 .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-19 .content-box .btn-box a.btn-one{ color: #fff; background: linear-gradient(45deg, #2b94ff 0%, #4528a5 100%); padding: 15px 40px; margin-right: 17px; } .banner-style-19 .content-box .btn-box a.btn-two{ border: 2px solid #d7d7d7; color: #222; padding: 13px 37px; } .banner-style-19 .content-box .btn-box a.btn-two:hover{ background: #4527a4; color: #fff; border-color: #4527a4; } .banner-style-19 .anim-icons .icon-1 { left: -30px; top: 60%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } /** ourmission-section **/ .ourmission-section{ position: relative; padding: 50px 0px 205px 0px; } .ourmission-section .sec-title{ margin-bottom: 60px; } .ourmission-section .single-item{ position: relative; background: #fff; border-radius: 20px; padding: 36px 30px 48px 40px; margin-bottom: 15px; transition: all 500ms ease; } .ourmission-section .single-item:hover{ box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1); } .ourmission-section .single-item .inner-box{ position: relative; padding: 11px 0px 0px 220px; } .ourmission-section .single-item .inner-box .icon-box { position: absolute; left: 0px; top: 0px; font-size: 70px; color: #fff; width: 170px; height: 160px; line-height: 160px; text-align: center; z-index: 1; margin-bottom: 32px; } .ourmission-section .single-item .inner-box .icon-box .bg-layer { position: absolute; width: 170px; height: 160px; left: 0px; top: 0px; background-repeat: no-repeat; z-index: -1; transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .ourmission-section .single-item:hover .inner-box .icon-box .bg-layer { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .ourmission-section .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 13px; } .ourmission-section .single-item .inner-box h3 a{ display: inline-block; color: #222; } .ourmission-section .single-item .inner-box h3 a:hover{ color: #4527a4; } .ourmission-section .single-item .inner-box .text{ position: relative; font-size: 16px; } /** popular-causes **/ .popular-causes{ position: relative; background: #4527a4; padding: 80px 0px 120px 0px; } .popular-causes .image-bg{ position: absolute; width: 540px; height: 385px; right: 0px; bottom: 0px; background-repeat: no-repeat; } #content_block_46 .content-box .sec-title h2{ color: #fff; margin-bottom: 27px; } #content_block_46 .content-box .sec-title h2:after{ background: #fff; } #content_block_46 .content-box h3{ position: relative; font-size: 30px; line-height: 40px; color: #fff; margin-bottom: 23px; } #content_block_46 .content-box .text{ position: relative; display: block; color: #fff; line-height: 28px; margin-bottom: 56px; } #content_block_46 .content-box .link-btn{ position: absolute; top: 15px; right: 30px; } #content_block_46 .content-box .link-btn a{ position: relative; display: inline-block; color: #fff; font-size: 18px; font-weight: 500; } #content_block_46 .content-box .btn-box .btn-one{ margin-right: 17px; } #content_block_46 .content-box .btn-box .btn-one, #content_block_46 .content-box .btn-box .btn-two{ position: relative; float: left; overflow: hidden; font-size: 14px; color: #fff; background: #222; text-align: center; padding: 10px 30px; transition: all 500ms ease; cursor: pointer; border-radius: 30px; z-index: 1; } #content_block_46 .content-box .btn-box .btn-two{ background: #fff; color: #222; } #content_block_46 .content-box .btn-box .btn-one:before, #content_block_46 .content-box .btn-box .btn-two:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #00aeef; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1, 0.2); transform: scale(1, 0.2); z-index: -1; } #content_block_46 .content-box .btn-box .btn-one:hover::before, #content_block_46 .content-box .btn-box .btn-two:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_46 .content-box .btn-box .btn-one:hover, #content_block_46 .content-box .btn-box .btn-two:hover{ color: #fff; background: #00aeef; } #content_block_46 .content-box .link-btn a:hover{ text-decoration: underline; } #content_block_46 .content-box .progress-content .price li{ position: relative; display: inline-block; font-size: 18px; color: #fff; } #content_block_46 .content-box .progress-content .price li:last-child{ float: right; } #content_block_46 .content-box .progress-content .price{ position: relative; margin-bottom: 32px; } #content_block_46 .content-box .single-progress-box{ position: relative; margin-bottom: 18px; } #content_block_46 .content-box .single-progress-box .progress { position: relative; background-color: #fff; height: 6px; border-radius: 0px; overflow: visible; } #content_block_46 .content-box .single-progress-box .progress-bar { position: absolute; top: 0px; left: 0px; background: #774aff; height: 6px; box-shadow: none; border-radius: 0px; -webkit-transition: all 3s ease 0s; -moz-transition: all 3s ease 0s; -ms-transition: all 3s ease 0s; -o-transition: all 3s ease 0s; transition: all 3s ease 0s; width: 0; background-size: cover; background-repeat: no-repeat; } #content_block_46 .content-box .single-progress-box .progress-bar .value-holder { position: absolute; bottom: 12px; right: -17px; color: #fff; text-align: center; font-size: 14px; } #content_block_46 .content-box .single-progress-box .progress-bar .value-holder:before { position: absolute; content: ''; background: #fff; width: 16px; height: 16px; top: 31px; right: 5px; border: 1px solid #7649fd; border-radius: 50%; } #image_block_43 .image-box{ position: relative; margin: 0px 50px; min-height: 420px; } #image_block_43 .image-box .bg-layer{ position: absolute; width: 305px; height: 305px; left: -110px; bottom: -120px; background-repeat: no-repeat; animation-name: rotateme; animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme; -webkit-animation-duration: 60s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotateme; -moz-animation-duration: 60s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: rotateme; -ms-animation-duration: 60s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: rotateme; -o-animation-duration: 60s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } #image_block_43 .image-box .image{ position: absolute; left: 0px; top: -180px; background: #4527a4; border-radius: 20px; } #image_block_43 .image-box .image img{ position: relative; width: 100%; border-radius: 20px; transition: all 500ms ease; } #image_block_43 .image-box .image:hover img{ opacity: 0.5; } /** weworks-section **/ .weworks-section{ position: relative; padding: 120px 0px 50px 0px; } #content_block_47 .content-box .sec-title h2{ margin-bottom: 43px; } #content_block_47 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 45px; } .weworks-section .content-box{ padding-top: 70px; } #content_block_47 .content-box .upper-box{ position: relative; margin-bottom: 160px; margin-right: 30px; } #content_block_47 .content-box .counter-inner .single-counter-box{ position: relative; margin-bottom: 77px; } #content_block_47 .content-box .counter-inner .single-counter-box .count-outer span{ position: relative; display: inline-block; font-size: 36px; line-height: 45px; font-weight: 500; color: #222; margin-bottom: 12px; } #content_block_47 .content-box .counter-inner .single-counter-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #4527a4; font-weight: 500; padding-top: 14px; } #content_block_47 .content-box .counter-inner .single-counter-box h3:before{ position: absolute; content: ''; background: #afafaf; width: 30px; height: 1px; left: 0px; top: 0px; } #content_block_48 .inner-box .single-item{ position: relative; background: #fff; box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1); padding: 40px 40px 44px 40px; text-align: center; border-radius: 20px; margin-bottom: 50px; overflow: hidden; transition: all 500ms ease; } #content_block_48 .inner-box .single-item:hover{ background: #4527a4; transform: translateY(-5px); box-shadow: 0 0px 25px 0px rgba(0, 0, 0, 0.2); } #content_block_48 .inner-box .single-item .icon-box{ position: relative; display: inline-block; min-height: 125px; margin-bottom: 28px; } #content_block_48 .inner-box .single-item h3{ position: relative; display: block; font-size: 24px; line-height: 30px; color: #222; font-weight: 500; margin-bottom: 19px; transition: all 500ms ease; } #content_block_48 .inner-box .single-item h3 a{ display: inline-block; color: #222; } #content_block_48 .inner-box .single-item .text{ position: relative; font-size: 16px; line-height: 28px; transition: all 500ms ease; } #content_block_48 .inner-box .single-item:hover h3, #content_block_48 .inner-box .single-item:hover h3 a, #content_block_48 .inner-box .single-item:hover .text{ color: #fff; } #content_block_48 .inner-box .single-column{ padding: 0px 35px; } #content_block_48 .inner-box .single-item:before { content: ''; width: 493px; height: 493px; background: #6046b1; border-radius: 50%; position: absolute; top: -330px; left: -60px; z-index: -1; transform: translate(-50% , -50%); opacity: 0; } #content_block_48 .inner-box .single-item:after{ content: ''; width: 493px; height: 493px; background: rgba(96, 70, 177, 0.5); border-radius: 50%; position: absolute; top: -230px; left: -60px; z-index: -1; transform: translate(-50% , -50%); opacity: 0; } #content_block_48 .inner-box .single-item:hover:before, #content_block_48 .inner-box .single-item:hover:after{ opacity: 1; transform: translate(0% , 0%); transition: all 0.9s linear; } #content_block_48 .inner-box{ position: relative; } #content_block_48 .inner-box .bg-layer{ position: absolute; width: 805px; height: 730px; top: 50px; right: 0px; background-repeat: no-repeat; } /** social-fundraising **/ .social-fundraising{ position: relative; padding: 105px 0px 100px 0px; } .social-fundraising .content-box{ position: relative; margin-left: 100px; margin-top: 47px; } #content_block_49 .content-box h5{ position: relative; font-size: 18px; color: #222; text-transform: uppercase; margin-bottom: 25px; } #content_block_49 .content-box h2{ position: relative; display: block; font-size: 36px; line-height: 60px; color: #4527a4; font-weight: 500; margin-bottom: 40px; } #content_block_49 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 52px; } #content_block_49 .content-box .list-item li{ position: relative; display: block; font-size: 18px; margin-bottom: 12px; padding-left: 35px; } #content_block_49 .content-box .list-item li:before{ position: absolute; content: "\f101"; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #4527a4; font-size: 16px; left: 0px; top: 0px; } #content_block_49 .content-box .list-item{ position: relative; display: block; margin-bottom: 55px; } .social-fundraising .image-box{ margin-left: -35px; } #image_block_44 .image-box{ position: relative; } #image_block_44 .image-box .bg-layer{ position: absolute; width: 1025px; height: 780px; top: -50px; right: -80px; background-repeat: no-repeat; } #image_block_44 .image-box img{ position: relative; width: 100%; } /** campaing-section **/ .campaing-section{ position: relative; padding: 70px 0px 120px 0px; } #content_block_50 .content-box h5{ position: relative; font-size: 18px; color: #222; margin-bottom: 25px; } #content_block_50 .content-box h2{ position: relative; display: block; font-size: 36px; line-height: 60px; color: #4527a4; font-weight: 500; margin-bottom: 40px; } #content_block_50 .content-box .text{ position: relative; font-size: 16px; margin-bottom: 42px; } #content_block_50 .content-box .list-item li{ position: relative; display: block; font-size: 18px; margin-bottom: 12px; padding-left: 35px; } #content_block_50 .content-box .list-item li:before{ position: absolute; content: "\f101"; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #4527a4; font-size: 16px; left: 0px; top: 0px; } .campaing-section .content-box{ position: relative; margin-top: 47px; } #content_block_50 .content-box .list-item{ position: relative; display: block; margin-bottom: 55px; } .campaing-section .image-box{ margin-left: 16px; margin-top: 90px; } #image_block_45 .image-box{ position: relative; } #image_block_45 .image-box img{ width: 100%; } /** donate-section **/ .donate-section{ position: relative; background: linear-gradient(130deg, #4527a4 15%, #ff0000 100%); padding: 95px 0px 115px 0px; } #content_block_51 .content-box .upper-box h2{ position: relative; font-size: 36px; line-height: 60px; color: #fff; font-weight: 500; margin-bottom: 24px; } #content_block_51 .content-box .upper-box .text{ position: relative; font-size: 18px; color: #fff; margin-bottom: 41px; } #content_block_51 .content-box .upper-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; color: #fff; text-align: center; border-radius: 30px; z-index: 1; } #content_block_51 .content-box .upper-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #fff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1, 0.2); transform: scale(1, 0.2); z-index: -1; } #content_block_51 .content-box .upper-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_51 .content-box .upper-box .btn-box a.btn-one{ border: 1px solid #fff; padding: 14px 36px; margin-right: 25px; } #content_block_51 .content-box .upper-box .btn-box a:hover{ background: #fff !important; color: #4527a4 !important; } #content_block_51 .content-box .upper-box .btn-box a.btn-two{ background: #3b0e09; padding: 15px 58px; } #content_block_51 .content-box .upper-box{ position: relative; margin-bottom: 60px; } /** select-box **/ .select-box .ui-state-default { position: relative; display: block; background: transparent; border: 1px solid #fff !important; border: none; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 400; height: 60px; outline: medium none; width: 100%; cursor: pointer; } .select-box .ui-selectmenu-button span.ui-icon { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 60px; height: 48px; text-indent: 0; margin: 0; } .select-box .ui-selectmenu-button span.ui-icon::before { color: #fff; content: "\f107"; font-family: 'Font Awesome 5 Free'; font-weight: 700; font-size: 16px; overflow: visible; position: absolute; right: 20px; top: 14px; transition: all 500ms ease; } .select-box .ui-state-default { width: 100% !important; } .ui-selectmenu-open .ui-widget-content { border: none; background: #ffffff; color: #222222; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.10); } .ui-selectmenu-open .ui-widget-content .ui-state-focus { border: none; background: #4527a4; font-weight: normal; color: #ffffff; } .ui-selectmenu-open .ui-menu .ui-menu-item { border-bottom: 1px solid #efebea; position: relative; margin: 0; padding: 15px 15px; cursor: pointer; text-align: center; font-size: 15px; font-weight: 400; text-transform: none; transition: all 500ms ease; } .ui-selectmenu-open .ui-menu .ui-menu-item:last-child{ border-bottom: none; } .select-box .ui-selectmenu-button span.ui-selectmenu-text { display: block; line-height: 18px; overflow: hidden; padding: 20px; height: 60px; text-align: left; margin-right: 0px; padding-right: 150px; } .ui-selectmenu-menu .ui-menu{ transform: scaleY(0); transform-origin: top center; transition: .4s ease; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .ui-selectmenu-open .ui-menu{ transform: scaleY(1); top: 100%; } .ui-selectmenu-menu{ transform: scaleY(0); transform-origin: top center; display: block; } .ui-selectmenu-open{ transform: scaleY(1); } #content_block_51 .content-box .donation-box .select-box{ position: relative; margin-bottom: 30px; } #content_block_51 .content-box .donation-box .select-box .text{ position: absolute; top: 14px; right: 53px; font-size: 16px; color: #fff; } #content_block_51 .content-box .donation-box .select-box .text:before{ position: absolute; content: ''; background: #fff; width: 1px; height: 60px; left: -35px; top: -14px; } #content_block_51 .content-box .donation-box{ position: relative; background: rgba(255, 255, 255, 0.1); padding: 50px; border-radius: 20px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); } #content_block_51 .content-box .donation-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: 10px; text-align: center; width: 270px; height: 60px; line-height: 60px; margin-bottom: 15px; z-index: 1; } #content_block_51 .content-box .donation-box .btn-box a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1, 0.2); transform: scale(1, 0.2); z-index: -1; } #content_block_51 .content-box .donation-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_51 .content-box .donation-box .btn-box a:hover{ background: #4527a4; } #content_block_51 .content-box .donation-box .btn-box button{ position: relative; display: block; overflow: hidden; width: 170px; height: 60px; line-height: 60px; text-align: center; background: #f6ff00; font-size: 16px; color: #222; border-radius: 10px; transition: all 500ms ease; cursor: pointer; z-index: 1; } #content_block_51 .content-box .donation-box .btn-box button:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #4527a4; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.2, 1); transform: scale(0.2, 1); z-index: -1; } #content_block_51 .content-box .donation-box .btn-box button:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #content_block_51 .content-box .donation-box .btn-box button:hover{ background: #4527a4; color: #fff; } .donate-section .image-box{ margin-top: 25px; } #image_block_46 .image-box{ position: relative; } #image_block_46 .image-box img{ width: 100%; } .donate-section .pattern-box .pattern-1{ position: absolute; width: 110px; height: 190px; left: 0px; top: 150px; } .donate-section .pattern-box .pattern-2{ position: absolute; width: 257px; height: 375px; top: 0px; right: 0px; } /** events-section **/ .events-section{ position: relative; padding: 100px 0px 100px 0px; } #content_block_52 .content-box .sec-title{ margin-bottom: 73px; } #content_block_52 .content-box .bx-viewport { min-height: 530px !important; } #content_block_52 .content-box .events-slide .single-item .inner-box{ position: relative; overflow: hidden; border: 1px solid #b7b7b7; border-radius: 10px; padding: 36px 150px 42px 40px; margin-bottom: 40px; transition: all 500ms ease; } #content_block_52 .content-box .events-slide .single-item:hover .inner-box{ border-color: #fff; } #content_block_52 .content-box .events-slide .single-item .inner-box:before{ position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; border-radius: 10px; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(.9) translateY(20px); -ms-transform: scale(.9) translateY(20px); transform: scale(.9) translateY(20px); background: linear-gradient(-90deg, #4527a4 0%, #017efe 100%); transition: all 500ms ease; } #content_block_52 .content-box .events-slide .single-item:hover .inner-box:before{ opacity: 1; -webkit-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); -webkit-transition: 1s; -o-transition: 1s; transition: 1s; } #content_block_52 .content-box .events-slide .single-item .date{ position: absolute; top: 0px; right: 0px; font-size: 30px; color: #222; font-weight: 500; text-align: center; line-height: 36px; padding: 41px 47px 30px 30px; transition: all 500ms ease; } #content_block_52 .content-box .events-slide .single-item .date:before{ position: absolute; content: ''; background: linear-gradient(0deg, #4527a4 0%, #017efe 100%); width: 4px; height: 80px; left: -22px; top: 34px; } #content_block_52 .content-box .events-slide .single-item:hover .date{ color: #fff; } #content_block_52 .content-box .events-slide .single-item .date span{ position: relative; display: block; font-size: 14px; line-height: 30px; } #content_block_52 .content-box .events-slide .single-item .info-box{ position: relative; margin-bottom: 9px; } #content_block_52 .content-box .events-slide .single-item .info-box li{ position: relative; display: inline-block; font-size: 16px; margin-right: 40px; transition: all 500ms ease; } #content_block_52 .content-box .events-slide .single-item .info-box li:last-child{ margin-right: 0px; } #content_block_52 .content-box .events-slide .single-item h4{ position: relative; display: block; font-size: 20px; line-height: 30px; color: #222; font-weight: 500; transition: all 500ms ease; } #content_block_52 .content-box .events-slide .single-item h4 a{ display: inline-block; color: #222; } #content_block_52 .content-box .events-slide .single-item:hover .info-box li, #content_block_52 .content-box .events-slide .single-item:hover h4, #content_block_52 .content-box .events-slide .single-item:hover h4 a{ color: #fff; } #content_block_52 .content-box .sec-title h2{ margin-bottom: 43px; } .events-section .inner-column .inner-box{ position: relative; margin-top: 126px; padding-top: 144px; } #video_block_02 .inner-box .btn-box{ position: absolute; display: flex; right: 0px; top: 0px; } #video_block_02 .inner-box .image-box{ position: relative; margin-right: -138px; } #video_block_02 .inner-box .image-box .pattern-bg .pattern-1{ position: absolute; width: 160px; height: 160px; left: 35px; top: -25px; background-repeat: no-repeat; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } #video_block_02 .inner-box .image-box .pattern-bg .pattern-2{ position: absolute; width: 160px; height: 160px; right: 30px; top: 50px; background-repeat: no-repeat; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } #video_block_02 .inner-box .image-box img{ position: relative; width: 100%; } #video_block_02 .inner-box .video-btn{ position: absolute; left: 50%; bottom: -30px; } #video_block_02 .inner-box .video-btn a{ position: relative; display: inline-block; font-size: 36px; color: #fff; font-weight: 700; width: 120px; height: 120px; line-height: 120px; text-align: center; border-radius: 50%; background: linear-gradient(0deg, #4527a4 15%, #ff0000 100%); -webkit-animation: pulse-2 5s infinite; -o-animation: pulse-2 5s infinite; animation: pulse-2 5s infinite; } /** news-style-three **/ .news-style-three{ position: relative; padding: 80px 0px 125px 0px; } .news-style-three .sec-title{ margin-bottom: 70px; } .news-style-three .inner-content{ position: relative; margin: 0px 30px; } .news-style-three .sec-title p a{ font-size: 16px; color: #4527a4; } .news-style-three .sec-title p a:hover{ text-decoration: underline; } .news-block-three .inner-box .image-box{ position: relative; overflow: hidden; background: #4527a4; border-radius: 25px; } .news-block-three .inner-box .image-box img{ width: 100%; border-radius: 25px; transition: all 500ms ease; } .news-block-three:hover .inner-box .image-box img{ transform: scale(1.1); opacity: 0.2; } .news-block-three .inner-box .lower-content { position: relative; background: #fff; margin: 0px 35px; overflow: hidden; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 29px 30px 33px 30px; } .news-block-three .inner-box .lower-content:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 0%; left: 0px; bottom: 0px; transition: all 500ms ease; } .news-block-three:hover .inner-box .lower-content:before{ height: 100%; top: 0px; } .news-block-three .inner-box .lower-content h3{ position: relative; display: block; font-size: 24px; line-height: 42px; color: #222; font-weight: 500; margin-bottom: 12px; transition: all 500ms ease; } .news-block-three:hover .inner-box .lower-content h3 a, .news-block-three:hover .inner-box .lower-content h3, .news-block-three:hover .inner-box .lower-content .text{ color: #fff; } .news-block-three .inner-box .lower-content .text{ position: relative; font-size: 16px; transition: all 500ms ease; } /** clients-style-four **/ .clients-style-four{ position: relative; padding: 115px 0px 70px 0px; } .clients-style-four .image-layer { position: absolute; top: -40px; left: 0px; width: 100%; height: 480px; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } .clients-style-four .image-box img { display: block; max-width: 100%; width: auto; margin: 0 auto; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .clients-style-four .image-box:hover img{ transform: scale(1.05); } .clients-style-four .owl-nav{ display: none; } /*** ==================================================================== About-Page ==================================================================== ***/ /** header-style-four **/ .main-header.style-four{ position: relative; } /*지워도 됨 .main-header.style-four .search-box-btn, .main-header.style-four .menu-right-content .cart-box-outer a{ color: #fff; font-size: 16px; } */ .main-header.style-four .menu-right-content .cart-box-outer a span{ right: 5px; top: -10px; background: #222; width: 14px; height: 14px; line-height: 14px; font-size: 10px; } .main-header.style-four .menu-area .btn-box{ margin: 0px; float: none; display: inline-block; margin-left: 28px; top: 12px; } .main-header.style-four .menu-area .btn-box a{ padding: 10px 37px; font-size: 16px; font-weight: 600; } .main-header.style-four .menu-right-content { margin-left: 50px; margin-top: 35px; } .main-header.style-four .main-menu .navigation > li{ margin: 0px 25px; } /* 지워도 됨 .main-header.style-four .search-box-outer{ margin-left: 0px; margin-right: 30px; top: -3px; } */ .main-header.style-four .menu-right-content .nav-btn{ position: relative; width: 20px; display: inline-block; cursor: pointer; margin-left: 48px; z-index: 1; } .main-header.style-four .menu-right-content .nav-btn .icon{ position: relative; height: 2px; width: 20px; float: right; display: block; margin-bottom: 4px; background-color: #fff; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header.style-four .menu-right-content .nav-btn .icon:last-child{ width: 10px; margin-bottom: 0px; } .main-header.style-four .menu-right-content .nav-btn:hover .icon:last-child{ width: 20px; } /*지워도 됨 .main-header.style-four .outer-container .logo-box .logo { padding: 50px 0px 30px 0px; } */ /*지워도 됨.main-header.style-four .main-menu .navigation > li{ padding-top: 59px; } */ /** page-title **/ /** our-history **/ .our-history{ position: relative; padding: 150px 0px 120px 0px; } #content_block_53 .content-box .text p{ font-size: 16px; margin-bottom: 30px; } #content_block_53 .content-box .text p:last-child{ margin-bottom: 0px; } #content_block_53 .content-box .text{ position: relative; margin-bottom: 61px; } #content_block_53 .content-box h5{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #fc0000; margin-bottom: 28px; } #content_block_53 .content-box .sec-title h2{ margin-bottom: 51px; } .our-history .image-box{ margin-right: -93px; margin-top: 84px; } #image_block_47 .image-box{ position: relative; } #image_block_47 .image-box img{ width: 100%; } .clients-style-four.style-five { padding: 155px 0px 40px 0px; } /*** ==================================================================== Faq-Page ==================================================================== ***/ /** faq-section **/ .faq-section{ position: relative; padding: 150px 0px 120px 0px; } .faq-section .faq-sidebar{ position: relative; background: #fff; padding: 51px 30px 55px 50px; margin-right: 30px; border-radius: 10px; box-shadow: 0 0px 30px 0px rgba(0, 0, 0, 0.15); } .faq-section .faq-sidebar h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 38px; } .faq-section .faq-sidebar .online-purchase a{ position: relative; display: inline-block; font-size: 16px; color: #4527a4; font-weight: 500; line-height: 22px; border-bottom: 1px solid #4527a4; margin-bottom: 21px; } .faq-section .faq-sidebar .list-item li{ position: relative; display: block; margin-bottom: 17px; } .faq-section .faq-sidebar .list-item li:last-child{ margin-bottom: 0px; } .faq-section .faq-sidebar .list-item li a{ position: relative; display: inline-block; font-size: 16px; color: #777; } .faq-section .faq-sidebar .list-item li a:hover{ color: #4527a4; } .faq-section .accordion-box{ position:relative; } .faq-section .accordion-box .block{ position:relative; margin-bottom: 15px; box-shadow: 0 0px 15px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 0px 28px; } .faq-section .accordion-box .block:last-child{ margin-bottom: 0px; } .faq-section .accordion-box .block .acc-btn h4{ position:relative; display: block; font-size:18px; font-weight: 500; color:#777; padding: 20px 30px 19px 0px; cursor:pointer; transition: all 500ms ease; } .faq-section .accordion-box .block .acc-btn.active h4{ color: #4527a4; padding-top: 29px; } .faq-section .accordion-box .block .acc-content{ position:relative; display:none; padding-top: 6px; padding-bottom: 27px; } .faq-section .accordion-box .block .acc-content.current{ display:block; } .faq-section .accordion-box .block .content .text{ position:relative; display: block; font-size: 16px; color: #777; padding-right: 40px; } .faq-section .accordion-box .block .acc-btn .icon-outer{ position: absolute; top: 16px; right: 25px; font-size: 14px; color: #4527a4; font-weight: 900; text-align: center; cursor: pointer; transition: all 500ms ease; z-index: 1; } .faq-section .accordion-box .block .acc-btn.active .icon-outer{ color: #222; } .faq-section .accordion-box .block .acc-btn.active .icon-outer i:before{ position: relative; font-size: 14px; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin: 0px; content: "\f068"; } .faq-section .faq-content .sec-title h2{ font-size: 30px; margin-bottom: 48px; } /** question-section **/ .question-section{ position: relative; padding: 110px 0px 120px 0px; } .question-section .image-layer{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: bottom center } .question-section .sec-title{ margin-bottom: 56px; } .question-section .question-form .form-group{ position: relative; margin-bottom: 20px; } .question-section .question-form .form-group:last-child{ margin-bottom: 0px; } .question-section .question-form .form-group input[type='text'], .question-section .question-form .form-group input[type='email'], .question-section .question-form .form-group textarea{ position: relative; width: 100%; height: 50px; border: 1px solid #dddddd; border-radius: 30px; padding: 10px 20px; font-size: 13px; color: #777; background: #fff; transition: all 500ms ease; } .question-section .question-form .form-group textarea{ height: 150px; resize: none; border-radius: 15px; } .question-section .question-form .form-group input:focus, .question-section .question-form .form-group textarea:focus{ border-color: #4527a4; } .pricing-section.pricing-page{ position: relative; padding-top: 150px; } .pricing-style-four.pricing-page{ padding-bottom: 240px; } /*** ==================================================================== Error-Page ==================================================================== ***/ .error-section{ padding: 160px 0px 130px 0px; } .error-section .content-box .error-image{ position: relative; display: inline-block; margin-bottom: 127px; } .error-section .content-box h1{ position: relative; font-size: 48px; line-height: 60px; color: #4527a4; font-weight: 700; margin-bottom: 56px; } .error-section .content-box .text{ position: relative; display: block; font-size: 24px; line-height: 48px; margin-bottom: 48px; } .error-section .content-box .btn-box .theme-btn-two{ padding: 13px 30px; font-weight: 400; } .designe-process.service-page{ padding: 145px 0px 90px 0px; } .designe-process.service-page .image-layer{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 950px; background-size: cover; background-repeat: no-repeat; background-position: top center; } .designe-process-three.service-page{ background: #f9f9f9; } /*** ==================================================================== Blog-Page ==================================================================== ***/ .sidebar-page-container{ position: relative; padding: 150px 0px 120px 0px; } .sidebar-page-container .blog-content .single-blog-content .inner-box{ position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); margin-bottom: 70px; } .sidebar-page-container .blog-content .single-blog-content .image-box{ position: relative; overflow: hidden; background: #4527a4; } .sidebar-page-container .blog-content .single-blog-content .image-box img{ width: 100%; transition: all 500ms ease; } .sidebar-page-container .blog-content .single-blog-content:hover .image-box img{ opacity: 0.5; transform: scale(1.05); } .sidebar-page-container .blog-content .single-blog-content .lower-content{ position: relative; padding: 41px 40px 0px 40px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box{ position: relative; padding-bottom: 33px; border-bottom: 1px solid #d6d6d6; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box .post-date{ position: relative; font-size: 16px; color: #777; margin-bottom: 18px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box .post-date i{ margin-right: 10px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 27px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box h3 a{ display: inline-block; color: #222; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box h3 a:hover{ color: #4527a4; } .sidebar-page-container .blog-content .single-blog-content .lower-content .upper-box .text{ position: relative; font-size: 16px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box{ position: relative; padding: 20px 0px 40px 0px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .left-content{ position: relative; padding: 9px 0px 11px 65px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .left-content .admin-image{ position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; border-radius: 50%; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .left-content .admin-image img{ width: 100%; border-radius: 50%; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .left-content .admin-name{ position: relative; font-size: 14px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li{ position: relative; display: inline-block; margin-right: 30px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li:last-child{ margin-right: 0px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li a{ position: relative; display: inline-block; font-size: 18px; color: #777; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li a:hover{ color: #4527a4; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li.share .social-links { position: absolute; right: 0%; bottom: -30px; width: 105px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 500ms ease; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li.share:hover .social-links { opacity: 1; right: 0%; visibility: visible; transform: translateY(0px); } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li.share .social-links a{ font-size: 14px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li.share .social-links li{ margin-right: 15px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content li.share .social-links li:last-child{ margin-right: 0px; } .sidebar-page-container .blog-content .single-blog-content .lower-content .lower-box .right-content{ margin-top: 11px; } .sidebar-page-container .blog-content .pagination-wrapper{ position: relative; display: block; padding-top: 10px; } .sidebar-page-container .sidebar .sidebar-search .form-group{ position: relative; margin-bottom: 0px; } .sidebar-page-container .sidebar .sidebar-search .form-group input[type='search']{ position: relative; width: 100%; height: 60px; background: #fff; font-size: 14px; padding: 10px 50px 10px 30px; border-radius: 30px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .sidebar-page-container .sidebar .sidebar-search .form-group button{ position: absolute; top: 15px; right: 25px; font-size: 14px; font-weight: 700; color: #4527a4; background: transparent; cursor: pointer; transition: all 500ms ease; } .sidebar-page-container .sidebar .sidebar-title{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 19px; } .sidebar-page-container .sidebar .sidebar-search{ position: relative; margin-bottom: 73px; } .sidebar-page-container .sidebar .sidebar-categories ul li{ position: relative; display: block; } .sidebar-page-container .sidebar .sidebar-categories ul li a{ position: relative; display: block; font-size: 16px; color: #777; padding: 20px 30px 22px 30px; border-bottom: 1px solid #dddddd; } .sidebar-page-container .sidebar .sidebar-categories ul li:last-child a{ border-bottom: none; } .sidebar-page-container .sidebar .sidebar-categories ul li a span{ float: right; } .sidebar-page-container .sidebar .sidebar-categories ul li a:hover{ color: #4527a4; } .sidebar-page-container .sidebar .sidebar-categories{ position: relative; margin-bottom: 41px; } .sidebar-page-container .sidebar .sidebar-post .post{ position: relative; padding: 0px 0px 0px 100px; margin-bottom: 13px; padding-bottom: 18px; min-height: 110px; border-bottom: 1px solid #dddddd; } .sidebar-page-container .sidebar .sidebar-post .post:last-child{ border-bottom: none; margin-bottom: 0px; } .sidebar-page-container .sidebar .sidebar-post .post .image{ position: absolute; left: 0px; top: 8px; width: 80px; height: 80px; background: #4527a4; border-radius: 10px; } .sidebar-page-container .sidebar .sidebar-post .post .image img{ width: 100%; border-radius: 10px; transition: all 500ms ease; } .sidebar-page-container .sidebar .sidebar-post .post:hover .image img{ opacity: 0.5; } .sidebar-page-container .sidebar .sidebar-post .post h5{ position: relative; display: block; font-size: 18px; line-height: 30px; font-weight: 500; color: #222; margin-bottom: 2px; } .sidebar-page-container .sidebar .sidebar-post .post h5 a{ display: inline-block; color: #222; } .sidebar-page-container .sidebar .sidebar-post .post h5 a:hover{ color: #4527a4; } .sidebar-page-container .sidebar .sidebar-post .post .post-date{ position: relative; font-size: 14px; line-height: 24px; } .sidebar-page-container .sidebar .sidebar-post .sidebar-title{ margin-bottom: 45px; } .sidebar-page-container .sidebar .sidebar-post{ position: relative; margin-bottom: 50px; } .sidebar-page-container .sidebar .sidebar-tags .widget-content .tag-list{ position: relative; margin: 0px -5px; } .sidebar-page-container .sidebar .sidebar-tags .widget-content ul li{ position: relative; float: left; margin: 0px 5px 20px 5px; } .sidebar-page-container .sidebar .sidebar-tags .widget-content ul li a{ position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: #777; border: 2px solid #ebebeb; border-radius: 30px; text-align: center; padding: 8px 29px; } .sidebar-page-container .sidebar .sidebar-tags .widget-content ul li a:hover{ color: #fff; border-color: #4527a4; background: #4527a4; } .sidebar-page-container .sidebar .sidebar-tags .sidebar-title{ margin-bottom: 49px; } .sidebar-page-container .sidebar .sidebar-tags{ position: relative; margin-bottom: 43px; } .sidebar-page-container .sidebar .sidebar-instagram .image-list{ position: relative; margin: 0px -10px; } .sidebar-page-container .sidebar .sidebar-instagram .image-list .image{ position: relative; float: left; width: 110px; height: 100px; border-radius: 5px; background: #4527a4; margin: 0px 10px 20px 10px; } .sidebar-page-container .sidebar .sidebar-instagram .image-list .image img{ width: 100%; border-radius: 5px; transition: all 500ms ease; } .sidebar-page-container .sidebar .sidebar-instagram .image-list .image:hover img{ opacity: 0.5; } .sidebar-page-container .sidebar .sidebar-instagram .sidebar-title{ margin-bottom: 38px; } /** blog-details **/ .sidebar-page-container .blog-single-content .image-box img{ width: 100%; } .sidebar-page-container .blog-single-content .post-details{ position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); margin-bottom: 70px; } .sidebar-page-container .blog-single-content .inner-box{ position: relative; padding: 41px 40px 0px 40px; } .sidebar-page-container .blog-single-content .inner-box .upper-box .post-date { position: relative; font-size: 16px; color: #777; margin-bottom: 18px; } .sidebar-page-container .blog-single-content .inner-box .upper-box .post-date i { margin-right: 10px; } .sidebar-page-container .blog-single-content .inner-box .upper-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 27px; } .sidebar-page-container .blog-single-content .inner-box .upper-box .text{ position: relative; font-size: 16px; margin-bottom: 54px; } .sidebar-page-container .blog-single-content .inner-box .upper-box blockquote{ position: relative; display: block; font-size: 16px; font-style: italic; margin-bottom: 43px; padding: 29px 0px 31px 50px; } .sidebar-page-container .blog-single-content .inner-box .upper-box blockquote:before{ position: absolute; content: ''; background: #4527a4; width: 100%; height: 100%; left: 0px; top: 0px; border-radius: 20px; z-index: -1; } .sidebar-page-container .blog-single-content .inner-box .upper-box blockquote:after{ position: absolute; content: ''; background: #fff; width: 100%; height: 100%; left: 5px; top: 0px; border-radius: 20px; z-index: -1; } .sidebar-page-container .blog-single-content .inner-box .two-column .image-box{ margin-right: -16px; } .sidebar-page-container .blog-single-content .inner-box .two-column .image-box img{ width: 100%; } .sidebar-page-container .blog-single-content .inner-box .two-column .text{ margin-left: 30px; } .sidebar-page-container .blog-single-content .inner-box .two-column .text p{ font-size: 16px; margin-bottom: 30px; } .sidebar-page-container .blog-single-content .inner-box .two-column .text p:last-child{ margin-bottom: 0px; } .sidebar-page-container .blog-single-content .inner-box .two-column .text{ margin: 7px 0px 0px 30px; } .sidebar-page-container .blog-single-content .inner-box .upper-box{ border-bottom: 1px solid #d6d6d6; padding-bottom: 39px; } .sidebar-page-container .blog-single-content .inner-box .lower-box{ position: relative; padding: 20px 0px 40px 0px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .left-content { position: relative; padding: 9px 0px 11px 65px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .left-content .admin-image { position: absolute; left: 0px; top: 0px; width: 50px; height: 50px; border-radius: 50%; } .sidebar-page-container .blog-single-content .inner-box .lower-box .left-content .admin-image img { width: 100%; border-radius: 50%; } .sidebar-page-container .blog-single-content .inner-box .lower-box .left-content .admin-name { position: relative; font-size: 14px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content { margin-top: 11px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li { position: relative; display: inline-block; margin-right: 30px; font-size: 18px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li a{ color: #777; z-index: 1; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li:last-child{ margin-right: 0px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li a:hover{ color: #4527a4; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li.share .social-links { position: absolute; right: 0%; bottom: -30px; width: 105px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 500ms ease; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li.share:hover .social-links { opacity: 1; right: 0%; transform: translateY(0px); visibility: visible; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li.share .social-links a{ font-size: 14px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li.share .social-links li{ margin-right: 15px; } .sidebar-page-container .blog-single-content .inner-box .lower-box .right-content li.share .social-links li:last-child{ margin-right: 0px; } .sidebar-page-container .blog-single-content .author-box{ position: relative; background: #4527a4; padding: 35px 40px; border-radius: 20px; margin-bottom: 67px; } .sidebar-page-container .blog-single-content .author-box .author-inner{ position: relative; padding: 14px 175px 7px 0px; } .sidebar-page-container .blog-single-content .author-box .author-inner .author-thumb{ position: absolute; top: 0px; right: 0px; border-radius: 10px; } .sidebar-page-container .blog-single-content .author-box .author-inner .author-thumb img{ width: 100%; border-radius: 10px; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner{ position: relative; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner h4{ position: relative; display: block; font-size: 20px; line-height: 30px; color: #fff; font-weight: 500; margin-bottom: 19px; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .text{ position: relative; font-size: 16px; color: #fff; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .social-links{ position: absolute; top: 4px; right: 0px; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .social-links li{ position: relative; display: inline-block; margin-right: 10px; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .social-links li:last-child{ margin-right: 0px; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .social-links li a{ position: relative; display: inline-block; font-size: 14px; color: #fff; width: 35px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #fff; border-radius: 50%; } .sidebar-page-container .blog-single-content .author-box .author-inner .inner .social-links li a:hover{ background: #fff; color: #4527a4; } .sidebar-page-container .blog-single-content .comments-area .comment{ position: relative; padding: 0px 100px; } .sidebar-page-container .blog-single-content .comments-area .comment .author-thumb{ position: absolute; left: 0px; top: -9px; width: 75px; height: 75px; border-radius: 50%; box-shadow: 0 0px 30px 0px rgba(0, 0, 0, 0.1); } .sidebar-page-container .blog-single-content .comments-area .comment .author-thumb img{ width: 100%; border-radius: 50%; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-info .name{ position: relative; display: block; font-size: 18px; font-weight: 500; color: #222; margin-bottom: 6px; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-info .date{ position: relative; font-size: 14px; color: #bbbbbb; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-info{ position: relative; margin-bottom: 13px; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner .text{ position: relative; font-size: 14px; line-height: 28px; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner{ position: relative; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner .replay-btn{ position: absolute; top: -4px; right: -15px; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner .replay-btn a{ position: relative; display: inline-block; font-size: 15px; color: #4527a4; z-index: 1; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner .replay-btn a:hover{ text-decoration: underline; } .sidebar-page-container .blog-single-content .comments-area .comment .comment-inner .replay-btn a:hover{ color: #4527a4; } .sidebar-page-container .blog-single-content .comments-area .sec-title h2, .sidebar-page-container .blog-single-content .comments-form-area .sec-title h2{ font-size: 30px; margin-bottom: 68px; } .sidebar-page-container .blog-single-content .comments-area .comment{ position: relative; margin-bottom: 67px; } .sidebar-page-container .blog-single-content .comments-area .comment.replay-comment{ margin-left: 100px; } .sidebar-page-container .blog-single-content .comments-area .comment:last-child{ margin-bottom: 0px; } .sidebar-page-container .blog-single-content .comments-area{ position: relative; margin-bottom: 58px; } .sidebar-page-container .blog-single-content .comments-form-area .form-group{ position: relative; margin-bottom: 20px; } .sidebar-page-container .blog-single-content .comments-form-area .form-group:last-child{ margin-bottom: 0px; padding-top: 10px; } .sidebar-page-container .blog-single-content .comments-form-area .form-group input[type='text'], .sidebar-page-container .blog-single-content .comments-form-area .form-group input[type='email'], .sidebar-page-container .blog-single-content .comments-form-area .form-group textarea { position: relative; width: 100%; height: 50px; border: 1px solid #dddddd; border-radius: 30px; padding: 10px 20px; font-size: 13px; color: #777; background: #fff; transition: all 500ms ease; } .sidebar-page-container .blog-single-content .comments-form-area .form-group textarea{ height: 120px; resize: none; border-radius: 15px; display: block; } .sidebar-page-container .blog-single-content .comments-form-area .form-group input:focus, .sidebar-page-container .blog-single-content .comments-form-area .form-group textarea:focus{ border-color: #4527a4; } .sidebar-page-container .blog-single-content .comments-form-area .form-group .theme-btn-two{ padding: 10px 44px; } /*** ==================================================================== Contact-Page ==================================================================== ***/ /** map-section **/ /*** ==================================================================== Element-Page ==================================================================== ***/ .page-title.style-two{ position: relative; background: #4527a4; padding: 260px 0px 150px 0px; } .main-footer.style-seven{ background: #4527a4; padding-top: 50px; } .owl-nav-none .owl-nav{ display: none !important; } .application-layout-2 .single-item, .organization-layout-2 .single-item{ margin-top: 30px; margin-bottom: 30px; } .work-layout-2 .single-item{ margin: 30px 0px; } .work-section .owl-item:nth-child(2n+1) .single-item .icon-box{ color: #ba0076; } .work-section .owl-item:nth-child(3n+1) .single-item .icon-box{ color: #4527a4; } .application-setup .three-column-carousel .owl-item:nth-child(2n+1) .single-item .count-box{ background-image: -webkit-linear-gradient(-45deg, #fab000 0%, #cd8400 100%); } .application-setup .three-column-carousel .owl-item:nth-child(3n+1) .single-item .count-box{ background-image: -webkit-linear-gradient(-45deg, #9ff300 0%, #1a8300 100%); } .service-layout-5 .service-block-three{ margin: 100px 0px 50px 0px; } .recruitment-section .three-column-carousel .single-item{ margin: 30px 0px; } .reasons-section .three-column-carousel .single-item{ margin: 30px 0px; } .reasons-section .three-column-carousel .owl-item:nth-child(2n+1) .single-item .icon-box{ background: #ffc500; } .reasons-section .three-column-carousel .owl-item:nth-child(3n+1) .single-item .icon-box{ background: #ff0600; } .best-hosting .three-column-carousel .single-item{ margin: 30px 0px; } .best-hosting .three-column-carousel .owl-item:nth-child(2n+1) .single-item .icon-box{ color: #ff0000; } .best-hosting .three-column-carousel .owl-item:nth-child(3n+1) .single-item .icon-box{ color: #ffb600; } .counter-style-three .four-item-carousel .inner-box{ margin: 50px 0px; } .pricing-style-two .three-column-carousel .pricing-block-two{ margin: 50px 0px; } .software-product.elements{ margin: 0px; } .three-column-carousel .feature-block-one{ margin: 30px 0px; } .service-style-two.elements{ padding: 100px 0px 50px 0px; } .service-style-four.elements .three-column-carousel .service-block-three{ margin: 100px 0px 30px 0px; } /*** ==================================================================== Team-Page ==================================================================== ***/ .team-page-1{ padding-top: 140px; } .team-page-1 .team-block-one{ margin-bottom: 30px; } /** team-style-two **/ .team-style-two{ position: relative; display: block; padding: 150px 0px 100px 0px; } .team-block-two{ position: relative; display: block; margin-bottom: 30px; } .team-block-two .image-box{ position: relative; display: block; background: #4527a4; overflow: hidden; } .team-block-two .image-box img{ width: 100%; transition: all 300ms ease; } .team-block-two:hover .image-box img{ transform: scale(1.1); opacity: 0.5; } .team-block-two .image-box:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(69, 39, 164, 0.8); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); } .team-block-two:hover .image-box:before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); } .team-block-two .content-box{ position: relative; display: block; } .team-block-two .content-box span{ position: relative; display: inline-block; font-size: 16px; line-height: 20px; font-family: 'Muli', sans-serif; font-weight: 400; color: #fff; background: #4527a4; height: 23px; vertical-align: middle; text-align: center; padding: 0px 7px; margin-bottom: 12px; } .team-block-two .content-box h4{ position: relative; display: block; font-size: 22px; font-weight: 600; color: #34263c; margin-bottom: 18px; } .team-block-two .content-box h4 a{ position: relative; display: inline-block; color: #34263c; } .team-block-two .content-box h4 a:hover{ color: #4527a4; } .team-block-two .content-box .text{ position: relative; display: block; margin-bottom: 13px; } .team-block-two .content-box .team-social li{ position: relative; display: inline-block; margin-right: 17px; } .team-block-two .content-box .team-social li:last-child{ margin-right: 0px; } .team-block-two .content-box .team-social li a{ position: relative; display: inline-block; font-size: 18px; color: #34263c; } .team-block-two .content-box .team-social li a:hover{ color: #4527a4; } /** team-style-three **/ .team-style-three{ position: relative; padding: 150px 0px 100px 0px; } .team-block-three .inner-box{ position: relative; display: block; background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 30px; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.10); } .team-block-three .inner-box .image-box{ position: relative; display: block; overflow: hidden; background: #4527a4; border-top-right-radius: 10px; border-top-left-radius: 10px; clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%, 0% 0%); } .team-block-three .inner-box .image-box .social-links{ position: absolute; left: -20px; top: 15px; opacity: 0; transition: all 500ms ease; } .team-block-three:hover .inner-box .image-box .social-links{ left: 15px; opacity: 1; } .team-block-three .inner-box .image-box .social-links li{ position: relative; display: block; margin-bottom: 6px; } .team-block-three .inner-box .image-box .social-links li:last-child{ margin-bottom: 0px; } .team-block-three .inner-box .image-box .social-links li a{ position: relative; display: inline-block; font-size: 16px; color: #fff; } .team-block-three .inner-box .image-box img{ width: 100%; transition: all 500ms ease; } .team-block-three .inner-box:hover .image-box img{ opacity: 0.2; } .team-block-three .inner-box .lower-content{ position: relative; display: block; padding: 14px 12px 27px 12px; } .team-block-three .inner-box .lower-content h5{ position: relative; display: block; font-size: 18px; line-height: 28px; font-weight: 500; color: #2e2e2e; margin-bottom: 2px; } .team-block-three .inner-box .lower-content h5 a{ position: relative; display: inline-block; color: #2e2e2e; } .team-block-three .inner-box .lower-content h5 a:hover{ color: #4527a4; } .team-block-three .inner-box .lower-content .designation{ position: relative; display: block; font-size: 14px; line-height: 24px; font-weight: 500; color: #4527a4; } /*** ==================================================================== Service-Details ==================================================================== ***/ .service-details{ position: relative; padding: 150px 0px 100px 0px; } .service-details .service-sidebar{ position: relative; display: block; margin-right: 30px; } .service-details .service-sidebar .sidebar h3{ position: relative; display: block; font-size: 28px; line-height: 38px; font-weight: 600; color: #2e2e2e; margin-bottom: 21px; } .service-details .service-sidebar .sidebar .text{ position: relative; display: block; margin-bottom: 38px; } .service-details .service-sidebar .sidebar .list li{ position: relative; display: block; background: #f5f5f5; border-bottom: 1px solid #fff; } .service-details .service-sidebar .sidebar .list li a{ position: relative; display: block; font-size: 18px; line-height: 28px; padding: 15px 30px; font-weight: 400; color: #2e2e2e; transition: all 500ms ease; } .service-details .service-sidebar .sidebar .list li:before{ position: absolute; content: ''; background: #4527a4; width: 0%; height: 100%; left: 0px; top: 0px; transition: all 500ms ease; } .service-details .service-sidebar .sidebar .list li.active:before, .service-details .service-sidebar .sidebar .list li:hover:before{ width: 100%; right: 0px; } .service-details .service-sidebar .sidebar .list li.active a, .service-details .service-sidebar .sidebar .list li:hover a{ color: #fff; } .service-details .service-sidebar .sidebar .list li:last-child{ margin-bottom: 0px; border-bottom: none !important; } .service-details .service-sidebar .sidebar .list li:after{ position: absolute; left: 0px; top: 0px; content: ''; background: #0188e7; width: 5px; height: 100%; opacity: 0; transition: all 500ms ease; } .service-details .service-sidebar .sidebar .list li.active:after, .service-details .service-sidebar .sidebar .list li:hover:after{ opacity: 1; } .service-details .service-details-content { position: relative; } .service-details .service-details-content .text p{ position: relative; display: block; margin-bottom: 40px; } .service-details .service-details-content .image-box{ position: relative; display: block; margin-bottom: 60px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .service-details .service-details-content .image-box img{ width: 100%; } .service-details .service-details-content .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #2e2e2e; font-weight: 600; margin-bottom: 15px; } .service-details .service-details-content .two-column{ position: relative; display: block; margin-bottom: 80px; } .service-details .service-details-content .two-column .image-box{ margin-bottom: 0px; } .service-details .service-details-content .bottom-content .list-item li{ position: relative; display: block; font-size: 16px; margin-bottom: 10px; padding: 0px 0px 0px 34px; } .service-details .service-details-content .bottom-content .list-item li:last-child{ margin-bottom: 0px; } .service-details .service-details-content .bottom-content .list-item li:before { position: absolute; content: "\f10e"; font-family: 'Flaticon'; font-size: 16px; color: #4527a4; font-weight: 600; left: 0px; top: 0px; } .pricing-style-four.paricing-page-3{ padding: 150px 0px 250px 0px; } .pricing-style-three.pricing-page-4{ padding-bottom: 0px; } /*** ==================================================================== Portfolio-Page ==================================================================== ***/ .portfolio-section{ position: relative; padding: 150px 0px 70px 0px; } .portfolio-block-one{ position: relative; width: 100%; margin-bottom: 30px; } .portfolio-block-one .image-box{ position: relative; display: block; background: #4527a4; } .portfolio-block-one .image-box img{ position: relative; display: block; width: 100%; transition: all 500ms ease; } .portfolio-block-one:hover .image-box img{ opacity: 0.2; } .portfolio-block-one .image-box .content-box { position: absolute; left: 50%; top: 50%; width: 100%; padding: 0px 15px; transform: translate(-50%,-50%); } .portfolio-block-one .image-box .content-box .inner{ position: relative; text-align: center; opacity: 0; -webkit-transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); transform: scale(0.5,0.5); transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .portfolio-block-one:hover .image-box .content-box .inner{ opacity: 1; -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; -webkit-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .portfolio-block-one .image-box .content-box .title{ position: relative; font-size: 18px; line-height: 28px; color: #fff; font-weight: 500; margin-bottom: 12px; } .portfolio-block-one .image-box .content-box h3{ position: relative; color: #fff; font-size: 24px; font-weight: 600; line-height: 30px; margin-bottom: 0px; text-transform: uppercase; } .portfolio-block-one .image-box .content-box h3 a{ color: #fff; } .portfolio-section .filter-btns li{ position: relative; display: inline-block; font-size: 16px; line-height: 26px; color: #222; padding: 8px 35px; border-radius: 30px; cursor: pointer; transition: all 500ms ease; text-align: center; } .portfolio-section .filter-btns li.active, .portfolio-section .filter-btns li:hover{ background: #e5e5e5; } .portfolio-section .filter-btns{ position: relative; display: block; margin-bottom: 50px; } /** portfolio-details **/ .portfolio-details{ position: relative; padding: 150px 0px 100px 0px; } .portfolio-details .image-content .title-box{ position: relative; display: block; margin-bottom: 64px; } .portfolio-details .image-content .title-box span{ position: relative; display: block; font-size: 18px; line-height: 28px; color: #282331; margin-bottom: 20px; } .portfolio-details .image-content .title-box h2{ position: relative; display: block; font-size: 35px; font-weight: 700; line-height: 48px; color: #282331; } .portfolio-details .image-content .image{ position: relative; display: block; background: #4527a4; overflow: hidden; margin-bottom: 30px; } .portfolio-details .image-content .image img{ width: 100%; opacity: 1; transition: all 900ms ease; } .portfolio-details .image-content .image:hover img{ opacity: 0.2; transform: scale(1.1); } .portfolio-details .content-box{ position: relative; display: block; margin-left: 40px; } .portfolio-details .content-box h5{ position: relative; display: block; font-size: 18px; line-height: 28px; color: #222; font-weight: 600; text-transform: uppercase; margin-bottom: 26px; } .portfolio-details .content-box p{ position: relative; display: block; font-size: 18px; color: #777; margin-bottom: 37px; } .portfolio-details .content-box .info-list li{ position: relative; display: block; font-size: 18px; color: #777; padding: 22px 0px 17px 0px; border-bottom: 1px solid #f3f3f3; } .portfolio-details .content-box .info-list li a{ position: relative; display: inline-block; color: #777; } .portfolio-details .content-box .info-list li a:hover{ text-decoration: underline; } .portfolio-details .content-box .info-list span{ position: relative; display: inline-block; max-width: 50%; width: 100%; font-size: 18px; font-weight: 600; color: #777; } .portfolio-details .content-box .info-list{ position: relative; display: block; margin-bottom: 72px; } .portfolio-details .content-box .social-icons li{ position: relative; display: inline-block; margin-right: 23px; } .portfolio-details .content-box .social-icons li:last-child{ margin-right: 0px; } .portfolio-details .content-box .social-icons li a{ position: relative; display: inline-block; font-size: 24px; color: #bbb1c3; } .portfolio-details .content-box .social-icons li a:hover{ color: #4527a4; } .portfolio-details .load-more-option a{ position: relative; display: inline-block; font-size: 21px; line-height: 30px; font-weight: 700; color: #777; text-shadow: 0 10px 3px rgba(0, 0, 0, 0.20); } .portfolio-details .load-more-option{ position: relative; display: block; padding-top: 80px; } .portfolio-details .load-more-option a:hover{ color: #4527a4; } .portfolio-details .upper-box{ position: relative; margin-bottom: 100px; } .portfolio-details .upper-box .image{ position: relative; display: block; background: #4527a4; overflow: hidden; margin-bottom: 30px; } .portfolio-details .upper-box .image img{ width: 100%; opacity: 1; transition: all 900ms ease; } .portfolio-details .upper-box .image:hover img{ opacity: 0.2; transform: scale(1.1); } .feature-style-three.elements{ padding: 200px 0px 300px 0px; }