@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap'); /* Css For Appway */ /************ TABLE OF CONTENTS *************** 1. Fonts 2. Reset 3. Global 4. Main Header/style-one/style-two/style-three/style-four 5. Main Slider/style-1 _ _ _ _ style-19 6. Featur Section 7. Video Section 9. Pricing Section 8. Testimonial Section 10. Download Section 11. News Section 12. Subscribe Section 14. Main Footer 15. Clients Section 16. Inside Sofeware 19. Innovative Idea 20. Download Apps 21. Application Setup 22. Optimizatin Application 23. Subascrive Section 24. Device Friendly 25. Enterprise Section 26. Dashboard Feature 27. Support Section 28. Trusted Section 29. Work Section 30. Case Studies 31. Fact Counter 32. Check Website 33. Free Estimate 34. Rider Section 35. Whereyou Section 36. Ridesharing Section 37. Ourmission Section 38. Popular Causes 39. Social Fundraising 40. Campaing Section 41. Donate 42. Event Section 43. Make Difference 44. Service Section 45. Management Section 46. Recruitment Section 47. Project Inquiry 48. Industries Service 49. Video Section 50. Solve Problem 51. Marketing Benefits 52. Check Works 53. Testimonial Page 54. Streamline Section 55. Designe Process 56. Solution Section 57. Crypto Service 58. Transactions Work 59. Timeline Work 60. Take Control 61. Team Section 62. Domain Section 63. Best Hosting 64. Increase Website 65. Domain Price 66. Managed Wordpress 67. Blog Details 68. Contact Section 69. Google Map **********************************************/ /*** ==================================================================== Reset ==================================================================== ***/ * { margin:0px; padding:0px; border:none; outline:none; } /*** ==================================================================== Global Settings ==================================================================== ***/ @font-face { font-family: 'GmarketSans'; font-weight: 300; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GmarketSans'; font-weight: 500; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'GmarketSans'; font-weight: 700; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('/themes/pro/syncblock/resources/images/pretendard/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-Light.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/themes/pro/syncblock/resources/images/pretendard/Pretendard-Black.woff') format('woff'); font-weight: 900; font-display: swap; } :root { --font-default : 'Roboto', 'Noto Sans KR', sans-serif; --gmarket : 'GmarketSans', 'Roboto', 'Noto Sans KR', sans-serif; --pretendard : 'Pretendard', 'Roboto', 'Noto Sans KR', sans-serif; } body { font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-size:15px; color:#777777; line-height:30px; font-weight:400; background:#ffffff; /*font-family: 'Ubuntu', sans-serif;*/ 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{ 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{ text-decoration:none; outline:none; } input,button,select,textarea{ font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 15px; } ul,li{ list-style:none; padding:0px; margin:0px; } input{ transition: all 500ms ease; } button:focus, input:focus, textarea:focus{ outline: none; box-shadow: none; transition: all 500ms ease; } p{ position: relative; color: #777777; font-family: 'Ubuntu', sans-serif; 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; } @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 **/ .theme-btn{ position: relative; display: inline-block; overflow: hidden; font-size: 15px; height: 50px; padding: 12px 80px 12px 40px; background: transparent; line-height: 26px; color: #4527a4; border: 1px solid #4527a4; font-weight: 500; border-radius: 30px; text-transform: capitalize; transition: all 500ms ease; cursor: pointer; z-index: 1; } .theme-btn:hover{ color: #fff; } .theme-btn:before { position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100%; content: ""; background-color: #4527a4; 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); } .theme-btn:hover:before { -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; } .theme-btn i{ position: absolute; top: -1px; right: -1px; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #4527a4; font-size: 15px; color: #fff; border-radius: 50%; transition: all 900ms ease; } .theme-btn:hover i{ background: transparent; } .theme-btn-two{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 500; color: #fff; background: #4527a4; border-radius: 30px; text-align: center; padding: 10px 30px; cursor: pointer; z-index: 1; transition: all 500ms ease; } .theme-btn-two: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; } .theme-btn-two:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .theme-btn-two:hover{ color: #4527a4; background: #fff; box-shadow: 0 0 15px rgba(69, 39, 164, 0.5); } .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: 50px; 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: 30px; } .scroll-top span{ color: #fff; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } .sec-title{ position: relative; display: block; } .sec-title.center{ text-align: center; } .sec-title h2{ position: relative; display: block; font-size: 36px; line-height: 48px; color: #222222; font-weight: 500; padding-bottom: 31px; margin-bottom: 31px; } .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; } .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 ==================================================================== ***/ /** main-header **/ .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; } .sticky-header{ position:fixed; opacity:0; visibility:hidden; background: #2f27a4; left:0px; top:0px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 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; } .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%; } .main-header .outer-container .logo-box .logo{ position: relative; padding: 36px 0px 30px 0px; } /** 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:16px; line-height:30px; font-weight:500; opacity:1; color:#fff; 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-menu .navigation > li > ul{ position:absolute; left:0px; top:100%; width:180px; z-index:100; display:none; opacity: 0; visibility: hidden; 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); -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; width:100%; padding: 0px 30px; } .main-menu .navigation > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > 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 > a:hover{ color:#4527a4; } .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(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(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; } .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 .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; } /*메뉴 탑*/ .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 {display:flex; align-items:center; color:#ddc552;} .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_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; } .main-header.home-16 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-1 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-3 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-7 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-8 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-9 .menu-area .mobile-nav-toggler .icon-bar, .main-header.home-11 .menu-area .mobile-nav-toggler .icon-bar{ background: #fff; } .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; } /** 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; 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: 25px; 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:#4527a4; } .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; background:rgba(255,255,255,0.10); 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{ background:#4527a4; -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 {justify-content: flex-start; padding-top: 0; padding-bottom: 20px;} /** stricky-header **/ .sticky-header .main-menu .navigation > li{ margin: 0px; } .sticky-header .main-menu .navigation > li > a{ padding: 15px 30px !important; } .sticky-header .main-menu .navigation > li > a{ color: #fff !important; } .sticky-header .main-menu .navigation > li.current > a, .sticky-header .main-menu .navigation > li:hover > a{ background: #fff; color: #4527a4 !important; } .sticky-header .logo-box{ position: relative; float: left; padding: 8px 0px 7px 0px; } .sticky-header .logo-box img {height:45px;} .sticky-header .menu-area{ position: relative; float: right; } .sticky-header .main-menu .navigation > li > a:before{ display: none; } .sticky-header .main-menu .navigation > li{ padding: 0px !important; margin: 0px !important; } .sticky-header .main-menu .navigation > li:before{ display: none; } /** banner-section **/ .banner-section{ position: relative; background-color: #fff; padding: 330px 0px 285px 0px; } .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 .image-box } .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:30px; font-family: var(--gmarket); font-size: 82px; font-weight: 700; line-height: 73px; color: #fff; margin-bottom: 23px; } .banner-section .content-box .text{ position: relative; display: block; font-size: 18px; line-height: 36px; color: #fff; margin-bottom: 60px; } .banner-section .content-box .btn-box a{ position: relative; display: inline-block; overflow: hidden; font-size: 16px; font-weight: 500; color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, 1); border-radius: 30px; text-align: center; padding: 13px 50px; z-index: 1; } .banner-section .content-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(0.2, 1); transform: scale(0.2, 1); z-index: -1; } .banner-section .content-box .btn-box a:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-section .content-box .btn-box a:hover{ color: #4527a4; } .banner-section .image-box{ position: relative; margin-right:0 /*-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; } /** main-footer **/ .main-footer{ position: relative; padding-top: 150px; } .main-footer .image-layer{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .main-footer .footer-top{ position: relative; padding: 105px 0px 100px 0px; border-bottom: 1px solid #dddddd; } .main-footer .footer-top .footer-logo{ margin-bottom: 32px; text-align:center; } .main-footer .footer-top .about-widget{ position: relative; margin-right: 60px; margin-top: -8px; } .main-footer .footer-top .about-widget .text{ position: relative; font-size: 16px; line-height: 36px; margin-bottom: 27px; } .main-footer .footer-top .about-widget .social-links h6{ position: relative; font-size: 14px; font-weight: 700; color: #4527a4; } .main-footer .footer-top .about-widget .social-links li{ position: relative; display: inline-block; margin-right: 15px; } .main-footer .footer-top .about-widget .social-links li:last-child{ margin-right: 0px; } .main-footer .footer-top .about-widget .social-links li:first-child{ margin-right: 30px; } .main-footer .footer-top .about-widget .social-links li a{ font-size: 16px; color: #777; } .main-footer .footer-top .about-widget .social-links li a:hover{ color: #4527a4; } .main-footer .footer-top .widget-title{ position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; padding-bottom: 9px; margin-bottom: 39px; } .main-footer .footer-top .widget-title:before{ position: absolute; content: ''; background: #4527a4; width: 45px; height: 2px; left: 0px; bottom: 0px; -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; } .main-footer .footer-top .widget-title:after{ position: absolute; content: ''; background: #f2f0f9; width: 3px; height: 2px; left: 36px; bottom: 0px; } .main-footer .footer-top .links-widget .list li{ position: relative; display: block; margin-bottom: 11px; padding-left: 18px; } .main-footer .footer-top .links-widget .list li:last-child{ margin-bottom: 0px; } .main-footer .footer-top .links-widget .list li a{ display: inline-block; font-size: 16px; color: #777; } .main-footer .footer-top .links-widget .list li a:before{ position: absolute; content: "\f105"; font-family: 'Font Awesome 5 Free'; font-size: 16px; color: #777; font-weight: 700; left: 0px; top: 0px; transition: all 500ms ease; } .main-footer .footer-top .links-widget .list li a:hover, .main-footer .footer-top .links-widget .list li a:hover:before, .main-footer .footer-top .contact-widget .list li a:hover{ color: #4527a4; } .main-footer .footer-top .contact-widget .list li{ position: relative; display: block; font-size: 16px; line-height: 42px; color: #777; padding-left: 35px; } .main-footer .footer-top .contact-widget .list li:first-child{ margin-bottom: 42px; } .main-footer .footer-top .contact-widget .list li a{ color: #777; } .main-footer .footer-top .contact-widget .list li i{ position: absolute; left: 0px; top: 13px; color: #4527a4; } .main-footer .footer-top .contact-widget .widget-title{ margin-bottom: 33px; } .main-footer .footer-bottom{ position: relative; padding: 14px 0px; text-align: center; } .main-footer .footer-bottom .copyright{ font-size: 16px; color: #4527a4; } .main-footer .footer-bottom .copyright a{ color: #4527a4; } .main-footer .footer-bottom .copyright a:hover{ text-decoration: underline; } /** 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; } /** 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 ==================================================================== ***/ .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; } /** 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; } /** service-style-two **/ .service-style-two{ position: relative; padding: 100px 0px 100px 0px; } .service-style-two .sec-title{ margin-bottom: 55px; } .service-block-two{ position: relative; margin-bottom: 50px; } .service-block-two .inner-box{ position: relative; display: block; background: #fff; overflow: hidden; border-radius: 15px; padding: 63px 30px 56px 30px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .service-block-two .inner-box:before { position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; -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-image: -webkit-linear-gradient(0deg, #4527a4 0%, #0289e7 100%); transition: all 500ms ease; } .service-block-two: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; } .service-block-two .inner-box .icon-box{ position: relative; display: inline-block; font-size: 60px; line-height: 60px; color: #b7b7b7; margin-bottom: 27px; transition: all 500ms ease; } .service-block-two .inner-box h4{ position: relative; display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; padding-bottom: 20px; margin-bottom: 24px; transition: all 500ms ease; } .service-block-two .inner-box h4:before { position: absolute; content: ''; background: #4527a4; width: 40px; height: 2px; left: 50%; bottom: 0px; transform: translateX(-50%); transition: all 500ms ease; } .service-block-two .inner-box h4:after { position: absolute; content: ''; background: #fff; width: 4px; height: 2px; right: 0px; left: 50%; bottom: 0px; margin-left: 12px; transform: translateX(-50%); transition: all 500ms ease; } .service-block-two .inner-box h4 a{ color: #222; display: inline-block; } .service-style-two .inner-content{ position: relative; margin: 0px -10px; } .service-style-two .inner-content .service-block{ padding: 0px 25px; } .service-block-two .inner-box .text{ position: relative; display: block; transition: all 500ms ease; } .service-block-two:hover .inner-box .icon-box, .service-block-two:hover .inner-box h4, .service-block-two:hover .inner-box h4 a, .service-block-two:hover .inner-box .text{ color: #fff; } .service-block-two:hover .inner-box h4:before{ background: #fff; } .service-block-two:hover .inner-box h4:after{ background: #205cc8; } /** 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; } /** banner-style-five **/ .banner-style-five{ position: relative; padding: 315px 0px 150px 0px; } .banner-style-five .pattern-layer { position: absolute; width: 150px; height: 250px; left: -10px; top: 50%; z-index: -1; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; background-repeat: no-repeat; } .banner-style-five .image-layer{ position: absolute; top: 0px; right: 0px; height: 100%; width: 75%; 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-five .content-box h1{ position: relative; display: block; font-size: 48px; font-weight: 500; line-height: 72px; color: #222; margin-bottom: 37px; } .banner-style-five .content-box .text{ position: relative; margin-bottom: 46px; } .banner-style-five .content-box .btn-box a{ padding: 15px 30px; font-size: 15px; } .banner-style-five .content-box .btn-box a i{ position: relative; margin-left: 20px; top: 1px; } .banner-style-five .image-box { position: relative; margin-right: -190px; margin-left: 70px; min-height: 680px; } .banner-style-five .image-box .image-1{ position: absolute; left: 0px; top: -130px; } .banner-style-five .image-box .image-2{ position: absolute; top: 60px; right: 0px; } .banner-style-five .image-box .icon-box .icon-1{ position: absolute; left: 30px; top: -20px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-five .image-box .icon-box .icon-2{ position: absolute; left: 100px; bottom: 80px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-five .image-box .icon-box .icon-3{ position: absolute; top: -90px; right: 130px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-five .image-box .icon-box .icon-4{ position: absolute; top: 30px; right: 0px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-five .image-box .icon-box .icon-5{ position: absolute; bottom: 50px; right: 30px; -webkit-animation: zoom-fade 3s infinite linear; animation: zoom-fade 3s infinite linear; } .banner-style-five .content-box{ position: relative; padding-top: 150px; } .banner-style-five .anim-icons .icon{ position: absolute; } .banner-style-five .anim-icons .icon-1{ left: 140px; top: 320px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-five .anim-icons .icon-2{ left: 140px; bottom: 150px; } .banner-style-five .anim-icons .icon-3{ left: 40%; bottom: 130px; } /** 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 ==================================================================== ***/ /** banner-style-six **/ .banner-style-six{ position: relative; padding: 220px 0px 230px 0px; } .banner-style-six .image-shap{ position: absolute; width: 405px; height: 445px; left: 0px; top: 35%; background-repeat: no-repeat; } .banner-style-six .anim-icons .icon-1 { background-image: -webkit-linear-gradient(0deg, #20d5dd 0%, #5d339e 100%); width: 80px; height: 80px; left: 130px; top: 220px; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-six .anim-icons .icon-2 { background-image: -webkit-linear-gradient(0deg, #c441a4 0%, #6649ac 100%); width: 80px; height: 80px; left: -30px; bottom: 50px; border-radius: 50%; -webkit-animation: zoom-fade 5s infinite linear; animation: zoom-fade 5s infinite linear; } .banner-style-six .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 left; /*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-six .content-box h1{ position: relative; display: block; font-family: var(--gmarket); font-size: 50px; line-height: 1.2; font-weight: 700; color: #22243b; margin-bottom: 35px; } .banner-style-six .content-box h1 strong {display:block; margin-top:40px; color:#4a5ddb; font-weight:900; font-size:36px; font-family: var(--font-default); } .banner-style-six .content-box h2 {margin-bottom:15px; font-family: var(--gmarket); margin-top:40px; font-size:32px; font-weight:500; color:#22243b;} .banner-style-six .content-box .text{ position: relative; display: block; font-size: 20px; line-height: 36px; margin-bottom: 49px; } .banner-style-six .content-box .mail-box {margin-top:auto;} .banner-style-six .content-box .mail-box .form-group{ position: relative; margin: 0px; } .banner-style-six .content-box .mail-box .form-group input[type='email']{ position: relative; width: 100%; height: 60px; border: 1px solid #0f70d7; border-radius: 30px; font-size: 14px; color: #777; padding: 10px 200px 10px 30px; } .banner-style-six .content-box .mail-box .form-group button{ position: absolute; top: 0px; right: 0px; width: 170px; height: 60px; background: #0f70d7; 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-six .content-box{ display:flex; flex-flow:column wrap; min-height: 80%; position: relative; margin-right: 30px; padding-top: 25px; } .banner-style-six .image-box{ position: relative; display: block; margin-right: -220px; } .banner-style-six .image-box .user{ position: absolute; border-radius: 50%; } .banner-style-six .image-box .user img{ border-radius: 50%; } .banner-style-six .image-box .user-1{ left: 30px; top: -140px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-six .image-box .user-2{ left: 0px; top: 85px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-six .image-box .user-3{ left: 120px; bottom: 40px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-six .image-box .user-4{ left: 50%; top: -55px; transform: translateX(-50%); -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } .banner-style-six .image-box .user-5{ right: 150px; top: -150px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-six .image-box .user-6{ right: 35px; top: -25px; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-six .image-box .user-7{ right: 0px; bottom: 90px; -webkit-animation: zoom-fade 4s infinite linear; animation: zoom-fade 4s infinite linear; } /** 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 ==================================================================== ***/ /** banner-style-seven **/ .banner-style-seven{ position: relative; padding: 245px 0px 170px 0px; } .banner-style-seven .image-layer { position: absolute; top: 0px; left: 0px; height: 100%; width: 95%; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: top right; } .banner-style-seven .content-box h1 { position: relative; display: block; font-size: 48px; line-height: 72px; font-weight: 500; color: #fff; margin-bottom: 44px; } .banner-style-seven .content-box .text { position: relative; display: block; font-size: 16px; color: #fff; margin-bottom: 67px; } .banner-style-seven .content-box .mail-box .form-group { position: relative; margin: 0px; margin-right: 30px; } .banner-style-seven .content-box .mail-box .form-group input[type='email'] { position: relative; width: 100%; height: 60px; border: 1px solid #fff; border-radius: 30px; font-size: 14px; color: #fff; background: transparent; padding: 10px 200px 10px 30px; } .banner-style-seven .content-box .mail-box .form-group input::-webkit-input-placeholder{ color:#fff; } .banner-style-seven .content-box .mail-box .form-group button { position: absolute; top: 0px; right: 0px; width: 170px; height: 60px; background: #fff; text-align: center; font-size: 14px; color: #4527a4; border-top-right-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; transition: all 500ms ease; } .banner-style-seven .image-box{ position: relative; margin-left: 85px; } .banner-style-seven .image-box .image{ position: relative; border-top-left-radius: 15px; } .banner-style-seven .image-box .image img{ max-width: none; float: left; border-top-left-radius: 15px; } .banner-style-seven .content-box{ position: relative; padding-top: 90px; } .banner-style-seven .anim-icons .icon-1 { left: 95px; top: 200px; background-repeat: no-repeat; -webkit-animation: zoom-fade 2s infinite linear; animation: zoom-fade 2s infinite linear; } .banner-style-seven .anim-icons .icon-2 { left: 100px; bottom: 250px; background-repeat: no-repeat; } .banner-style-seven .anim-icons .icon-3 { left: 45%; top: 200px; background-repeat: no-repeat; } .banner-style-seven .anim-icons .icon-4 { left: 38%; bottom: 150px; background-repeat: no-repeat; } .banner-style-seven .anim-icons .icon-5 { top: 120px; right: 190px; background-repeat: no-repeat; } /** 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; } /** reasons-section **/ .reasons-section{ position: relative; padding-bottom: 100px; } .reasons-section .sec-title{ margin-bottom: 48px; } .reasons-section .single-item .inner-box{ position: relative; display: block; background: #fff; padding: 127px 30px 38px 30px; border-radius: 20px; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .reasons-section .single-item:hover .inner-box{ transform: translateY(-10px); box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3); } .reasons-section .single-item .inner-box .icon-box{ position: absolute; left: 30px; top: 0px; font-size: 40px; line-height: 80px; width: 60px; height: 80px; color: #fff; background: #4527a4; text-align: center; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; } .reasons-section .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; color: #222; font-weight: 500; margin-bottom: 23px; } .reasons-section .single-item .inner-box h3 a{ display: inline-block; color: #222; } .reasons-section .single-item .inner-box h3 a:hover{ color: #4527a4; } .reasons-section .inner-content{ position: relative; margin: 0px -15px; } .reasons-section .inner-content .single-column{ padding: 0px 30px; } .reasons-section .inner-content .single-column:nth-child(2) .single-item .inner-box .icon-box{ background: #ffc500; } .reasons-section .inner-content .single-column:last-child .single-item .inner-box .icon-box{ background: #ff0600; } /** 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; } /** service-style-three **/ .service-style-three{ position: relative; padding-top: 140px; } .service-style-three .image-layer{ position: absolute; width: 345px; height: 880px; left: 0px; bottom: -220px; background-repeat: no-repeat; } .service-style-three .sec-title h2{ line-height: 60px; margin-bottom: 135px; } .service-block-three{ position: relative; margin-bottom: 140px; } .service-block-three .inner-box{ position: relative; display: block; background: #fff; border-radius: 20px; text-align: center; padding: 0px 40px 55px 40px; box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .service-block-three:hover .inner-box{ transform: translateY(-15px); box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.2); } .service-block-three .inner-box .icon-box{ position: relative; display: inline-block; font-size: 60px; color: #fff; width: 170px; height: 160px; line-height: 160px; text-align: center; margin-top: -75px; z-index: 1; margin-bottom: 32px; } .service-block-three .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; } .service-block-three: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); } .service-style-three .inner-container{ position: relative; margin: 0px -10px; } .service-style-three .single-column{ padding: 0px 25px; } .service-block-three .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 17px; } .service-block-three .inner-box h3 a{ display: inline-block; color: #222; } .service-block-three .inner-box h3 a:hover{ color: #4527a4; } .service-block-three .inner-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 34px; } .service-block-three .inner-box .link-btn a{ position: relative; display: inline-block; font-size: 40px; line-height: 40px; color: #4527a4; font-weight: 700; } .service-block-three:hover .inner-box .link-btn a{ color: #ff0101; } .service-style-three .single-column:nth-child(2){ padding-top: 190px; } .service-style-three .single-column:last-child{ padding-top: 90px; } /** solve-problem **/ .solve-problem{ position: relative; padding-bottom: 130px; } .solve-problem .image-layer{ position: absolute; width: 290px; height: 755px; right: 0px; bottom: 0px; background-repeat: no-repeat; } #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; font-size: 24px; line-height: 32px; color: #4527a4; margin-bottom: 35px; } #content_block_25 .content-box .text{ position: relative; display: block; font-size: 16px; margin-bottom: 50px; } #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_24 .image-box{ position: relative; } #image_block_24 .image-box img{ max-width: none; float: left; } /** counter-style-two **/ .counter-style-two{ position: relative; padding-bottom: 115px; } #image_block_25 .image-box{ position: relative; margin-right: 15px; } #image_block_25 .image-box img{ width: 100%; } #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: 50px; } #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; } /** 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 ==================================================================== ***/ /** banner-style-11 **/ .banner-style-11{ position: relative; padding: 340px 0px 540px 0px; } .banner-style-11 .vector-image .image-1{ position: absolute; left: 55px; top: 200px; } .banner-style-11 .vector-image .image-2{ position: absolute; right: 50px; top: 200px; } .banner-style-11 .image-layer { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; } .banner-style-11 .content-box{ position: relative; max-width: 850px; margin: 0 auto; width: 100%; } .banner-style-11 .content-box h1{ position: relative; display: block; font-size: 48px; line-height: 72px; color: #fff; margin-bottom: 30px; } .banner-style-11 .content-box .text{ position: relative; display: block; font-size: 20px; color: #fff; margin-bottom: 56px; } .banner-style-11 .content-box .btn-box .btn-one{ position: relative; display: inline-block; overflow: hidden; font-size: 18px; color: #4527a4; line-height: 30px; font-weight: 500; background: #fff; padding: 15px 30px; text-align: center; border-radius: 30px; margin-right: 35px; z-index: 1; } .banner-style-11 .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-11 .content-box .btn-box .btn-one:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-11 .content-box .btn-box .btn-one:hover{ background: #4527a4; color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } .banner-style-11 .content-box .btn-box .video-btn{ position: relative; display: inline-block; font-size: 18px; font-weight: 500; color: #fff; padding: 7px 0px 0px 78px; top: -19px; } .banner-style-11 .content-box .btn-box .video-btn:before{ position: absolute; content: ''; background: #fff; width: 105px; height: 1px; right: 0px; bottom: 0px; } .banner-style-11 .content-box .btn-box .video-btn i{ position: absolute; left: 0px; top: 0px; font-size: 18px; font-weight: 700; color: #4527a4; width: 45px; height: 45px; line-height: 45px; text-align: center; background: #fff; border-radius: 50%; box-shadow: 0 0 0px 7px rgba(255, 255, 255, 0.2); } /** 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; } /** feature-style-11 **/ .feature-style-11{ position: relative; padding: 175px 0px 100px 0px; } .feature-style-11 .sec-title.center h2{ margin-bottom: 74px; } #content_block_34 .content-box .top-title{ position: relative; display: inline-block; font-size: 12px; line-height: 20px; color: #fff; background: #4527a4; padding: 5px 15px; border-radius: 20px; text-align: center; margin-bottom: 34px; } .feature-style-11 .inner-content .inner-box:nth-child(2) .content-box .top-title{ background: #80c605; } .feature-style-11 .inner-content .inner-box:nth-child(3) .content-box .top-title{ background: #ff0505; } .feature-style-11 .inner-content .inner-box:nth-child(4) .content-box .top-title{ background: #0580c6; } .feature-style-11 .inner-content .inner-box:last-child .content-box .top-title{ background: #ffbb05; } #content_block_34 .content-box .top-title i{ margin-right: 5px; } #content_block_34 .content-box .list-item li{ position: relative; display: block; font-size: 16px; margin-bottom: 30px; padding-left: 35px; } #content_block_34 .content-box .list-item li:before{ position: absolute; content: "\f058"; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #4527a4; font-size: 16px; left: 0px; top: 0px; } #content_block_34 .content-box .list-item li:last-child{ margin-bottom: 0px; } #content_block_34 .content-box .sec-title h2{ margin-bottom: 51px; } .feature-style-11 .inner-content .inner-box .image-box{ position: relative; } .feature-style-11 .inner-content .inner-box{ margin-bottom: 120px; } .feature-style-11 .inner-content .inner-box:last-child{ margin-bottom: 0px; } .feature-style-11 .inner-content .inner-box:first-child .image-box img, .feature-style-11 .inner-content .inner-box:nth-child(3) .image-box img, .feature-style-11 .inner-content .inner-box:last-child .image-box img{ position: relative; float: left; } .feature-style-11 .inner-content .inner-box:nth-child(2) .image-box img, .feature-style-11 .inner-content .inner-box:nth-child(4) .image-box img{ position: relative; float: right; } .feature-style-11 .inner-content .inner-box:first-child .image-box .bg-layer{ position: absolute; width: 1005px; height: 945px; top: -120px; right: 30px; background-repeat: no-repeat; } .feature-style-11 .inner-content .inner-box:nth-child(2) .image-box .bg-layer{ position: absolute; width: 1010px; height: 805px; left: 30px; top: -150px; background-repeat: no-repeat; } .feature-style-11 .inner-content .inner-box:nth-child(3) .image-box .bg-layer{ position: absolute; width: 1030px; height: 750px; right: 30px; top: -110px; background-repeat: no-repeat; } .feature-style-11 .inner-content .inner-box:nth-child(4) .image-box .bg-layer{ position: absolute; width: 1030px; height: 920px; left: 30px; top: -110px; background-repeat: no-repeat; } .feature-style-11 .inner-content .inner-box:nth-child(4){ margin-bottom: 205px; } .feature-style-11 .inner-content .inner-box:last-child .image-box .bg-layer{ position: absolute; width: 1040px; height: 505px; right: 0px; top: 0px; background-repeat: no-repeat; } #image_block_34 .image-box{ position: relative; } #image_block_34 .image-box img{ max-width: none; width: auto; } /** 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; } /** work-section **/ .work-section{ position: relative; padding-bottom: 110px; } .work-section .sec-title{ margin-bottom: 60px; } .work-section .sec-title h2{ margin-bottom: 60px; } .work-section .single-item .inner-box{ position: relative; background: #fff; padding: 60px 40px 80px 50px; border-radius: 20px; box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.1); transition: all 500ms ease; } .work-section .single-item:hover .inner-box{ transform: translateY(-15px); box-shadow: 0 5px 30px 0px rgba(0, 0, 0, 0.2); } .work-section .single-item .inner-box .pattern-bg{ position: absolute; width: 250px; height: 240px; top: 0px; right: 0px; background-repeat: no-repeat; border-top-right-radius: 20px; } .work-section .single-item .inner-box h3{ position: relative; display: block; font-size: 24px; line-height: 32px; font-weight: 500; color: #222; margin-bottom: 29px; padding-bottom: 40px; } .work-section .single-item .inner-box h3:before{ position: absolute; content: ''; background: #4527a4; width: 40px; height: 2px; left: 0px; bottom: 0px; } .work-section .single-item .inner-box h3 a{ display: inline-block; color: #222; } .work-section .single-item .inner-box h3 a:hover{ color: #4527a4; } .work-section .single-item .inner-box .text{ position: relative; font-size: 16px; line-height: 36px; margin-bottom: 15px; } .work-section .single-item .inner-box .icon-box{ position: absolute; right: 40px; bottom: 25px; font-size: 70px; line-height: 70px; color: #0baabd; } .work-section .single-column:nth-child(2) .single-item .inner-box .icon-box{ color: #ba0076; } .work-section .single-column:last-child .single-item .inner-box .icon-box{ color: #4527a4; } .work-section .single-item .inner-box .link-btn{ position: absolute; left: 60px; bottom: -24px; transform: scale(0,0); transition: all 500ms ease; } .work-section .single-item:hover .inner-box .link-btn{ transform: scale(1,1); } .work-section .single-item .inner-box .link-btn a{ position: relative; display: inline-block; font-size: 16px; font-weight: 700; color: #fff; background: #4527a4; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; } .work-section .feature-btn{ position: relative; display: block; text-align: center; margin-top: 103px; } .work-section .feature-btn .theme-btn-two{ padding: 15px 33px; } /** 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; } /** banner-style-16 **/ .banner-style-16{ position: relative; padding: 240px 0px 180px 0px; } .banner-style-16 .image-layer { position: absolute; top: 0px; right: 0px; width: 100%; height: 1435px; background-repeat: no-repeat; background-position: center; } .banner-style-16 .upper-box .content-box .btn-box a { position: relative; display: inline-block; overflow: hidden; font-size: 15px; 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; } .banner-style-16 .upper-box .content-box .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); } .banner-style-16 .upper-box .content-box .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; } .banner-style-16 .upper-box .content-box .btn-box a:hover { color: #4527a4; } .banner-style-16 .upper-box .content-box .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; } .banner-style-16 .upper-box .content-box .btn-box a:hover i { background: #fff; color: #4527a4; } .banner-style-16 .content-box h1{ position: relative; font-size:62px; font-weight:800; color: #fff; line-height: 1.1; margin-bottom: 20px; text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); font-family:var(--pretendard); } .banner-style-16 .content-box h1 strong {color:#f2e731;} .banner-style-16 .content-box .text{ position: relative; font-size:20px; color: #fefefe; margin-bottom: 44px; } .banner-style-16 .image-box{ position: relative; margin: 0px -154px 0px 0px; } .banner-style-16 .image-box img{ width: 100%; } .banner-style-16 .upper-box .content-box .btn-box{ position: relative; display: flex; margin-bottom: 40px; } .banner-style-16 .content-box .share-box a{ position: relative; display: inline-block; font-size: 15px; color: #fff; margin-right: 52px; } .banner-style-16 .content-box .share-box a:hover{ color: #00aeef; } .banner-style-16 .content-box .share-box a:last-child{ margin-right: 0px; } .banner-style-16 .content-box .share-box a i{ position: relative; font-size: 36px; margin-right: 25px; top: 7px; } .banner-style-16 .upper-box{ position: relative; padding-bottom: 100px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .banner-style-16 .lower-box{ position: relative; display: block; text-align: center; } .banner-style-16 .lower-box .timer { position: relative; display: block; text-align: center; padding-top: 91px; } .banner-style-16 .lower-box .cs-countdown{ position: relative; text-align: center; margin-bottom: 61px; } .banner-style-16 .lower-box .cs-countdown .count-col{ position: relative; display: inline-block; text-align: center; margin: 0px 42px; } .banner-style-16 .lower-box .cs-countdown .count-col:first-child{ margin-left: 0px; } .banner-style-16 .lower-box .cs-countdown .count-col:last-child{ margin-right: 0px; } .banner-style-16 .lower-box .cs-countdown .count-col span{ position: relative; display: block; font-size: 74px; color: #fff; line-height: 75px; font-weight: 500; text-align: center; margin-bottom: 17px; } .banner-style-16 .lower-box .cs-countdown .count-col h3{ position: relative; margin: 0 auto; font-size: 22px; color: #fff; font-weight: 400; text-align: center; text-transform: capitalize; } .banner-style-16 .lower-box .btn-box .btn-one{ position: relative; display: inline-block; overflow: hidden; font-size: 18px; color: #131d27; line-height: 30px; font-weight: 500; background: #fff; padding: 15px 48px; text-align: center; border-radius: 30px; z-index: 1; margin: 0px 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } .banner-style-16 .lower-box .btn-box .btn-two{ position: relative; display: inline-block; overflow: hidden; font-size: 18px; color: #fff; line-height: 30px; font-weight: 500; background: #120250; padding: 15px 42px; text-align: center; border-radius: 30px; margin: 0px 15px; z-index: 1; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } .banner-style-16 .lower-box .btn-box .btn-one:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #120250; -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; } .banner-style-16 .lower-box .btn-box .btn-one:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-16 .lower-box .btn-box .btn-two: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; } .banner-style-16 .lower-box .btn-box .btn-two:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .banner-style-16 .lower-box .btn-box .btn-one:hover{ background: #120250; color: #fff; } .banner-style-16 .lower-box .btn-box .btn-two:hover{ background: #fff; color: #120250; } .banner-style-16 .anim-icons .icon-1{ left: 110px; top: 110px; z-index: 1; } .banner-style-16 .anim-icons .icon-2{ left: 90px; top: 45%; z-index: 1; } .banner-style-16 .anim-icons .icon-3{ left: 50%; top: 50%; z-index: 1; } /** 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 **/ .page-title{ position: relative; padding: 325px 0px 260px 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; } /** 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 ==================================================================== ***/ .contact-section{ position: relative; padding: 160px 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 **/ .map-section{ position: relative; } .map-section .google-map{ position: relative; margin-bottom: -150px; } .map-section #contact-google-map { position: relative; width: 100%; height: 700px; } /*** ==================================================================== 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; } @media only screen and (min-width:992px) { .banner-section .col-lg-7 {-ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%;} .banner-section .col-lg-5 {-ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;} } @media only screen and (max-width:768px){ .banner-section .image-box .image-1{ position: relative; top: -30px; right:0; } }