File manager

File manager - Edit - /home/cipherteam/htdocs/cipherteam.in/assets/css/blue.css

Back
/* ---------------------------------------------------------------------------------------- Template: Turing - IT Solutions and Corporate Template Version: 1.0.0 Author: tempload - support@tempload.com -----------------------------------------------------------------------------------------/ / --------------------------------------------- Table of contents ------------------------------------------------ 01. font & reset css 02. reset 03. global styles 04. header 05. welcome 06. features 07. team 08. pricing 09. blog 10. footer 11. pages 12. faq 13. aside 14. contact 15. preloader --------------------------------------------- / / --------------------------------------------- font & reset css --------------------------------------------- / @import url("https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=latin-ext"); / --------------------------------------------- reset --------------------------------------------- / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer, figcaption { margin: 0; padding: 0; border: 0; outline: 0; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } html .clearfix { height: 1%; } ul, li { padding: 0; margin: 0; list-style: none; } header, nav, section, article, aside, footer, hgroup { display: block; } * { box-sizing: border-box; } html, body { font-family: "Quicksand", sans-serif; font-weight: 400; background-color: #e5e5e5; font-size: 16px; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; } ul { margin-bottom: 0px; } /* --------------------------------------------- global styles --------------------------------------------- / html, body { background: #fff; color: #6F8BA4; font-family: "Quicksand", sans-serif; } ::selection { background: #635CDB; color: #fff; } ::-moz-selection { background: #635CDB; color: #fff; } .section { padding-top: 100px; padding-bottom: 70px; } .section.colored { background: #F7FAFD; } .left-heading.light .section-title { color: #ffffff; } .left-heading .section-title { font-weight: 800; font-size: 28px; color: #3B566E; letter-spacing: 1.75px; height: 45px; margin-bottom: 30px; position: relative; } .left-heading .section-title:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 19px; height: 2px; background: #635CDB; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .left-heading .section-title:after { content: ''; position: absolute; bottom: 0px; left: 20px; width: 9px; height: 2px; background: #635CDB; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .center-heading { text-align: center; } .center-heading .section-title { font-weight: 800; font-size: 28px; color: #3B566E; letter-spacing: 1.75px; line-height: 38px; margin-bottom: 20px; } .center-heading.colored .section-title { color: #ffffff; } .center-text { text-align: center; font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; margin-bottom: 50px; } .center-text.colored { color: #E5E9F7; } .center-text p { margin-bottom: 30px; } .left-text { font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; } .left-text.light { color: #E5E9F7; } .left-text p { margin-bottom: 30px; } .left-text p.dark { color: #3B566E; } .padding-bottom-top-60 { padding-top: 60px !important; padding-bottom: 60px !important; } .padding-bottom-80 { padding-bottom: 80px !important; } .border-bottom { border-bottom: 1px solid #F5F5F5 !important; } .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-bottom { -ms-flex-item-align: flex-end !important; align-self: flex-end !important; } .btn-primary-line { width: 160px; margin: auto; display: inline-block; height: 44px; line-height: 45px; text-align: center; box-shadow: 0 4px 5px 0 rgba(103, 67, 213, 0.24); border: none; border-radius: 100px 0px 100px 100px; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); margin-bottom: 40px; font-weight: 700; font-size: 12px; color: #fff; letter-spacing: 0.75px; text-transform: uppercase; -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; outline: none !important; cursor: pointer; position: relative; } .btn-primary-line:hover { background-image: linear-gradient(-135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; } .btn-white-line { width: 160px; margin: auto; display: inline-block; height: 44px; line-height: 45px; text-align: center; border-radius: 100px 0px 100px 100px; background: #fff; margin-bottom: 40px; font-weight: 700; font-size: 12px; color: #635CDB; letter-spacing: 0.75px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; outline: none !important; cursor: pointer; position: relative; } .btn-white-line:hover { background: #F6F4FD; } .btn-home { width: 100%; margin: auto; display: inline-block; height: 40px; line-height: 40px; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 100px 0px 100px 100px; background: #fff; margin-bottom: 20px; font-weight: 400; font-size: 14px; letter-spacing: 0.88px; outline: none !important; cursor: pointer; position: relative; overflow: hidden; } .btn-home:before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background-image: linear-gradient(-135deg, #6A30D1 0%, #5C83E3 100%); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity: 0; } .btn-home i { margin-left: 30px; margin-right: 10px; position: relative; z-index: 2; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #3B566E; } .btn-home span { position: relative; z-index: 2; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #3B566E; } .btn-home:hover, .btn-home.active { box-shadow: 0 4px 5px 0 rgba(103, 67, 213, 0.24); } .btn-home:hover i, .btn-home.active i { color: #fff; margin-left: 40px; } .btn-home:hover span, .btn-home.active span { color: #fff; } .btn-home:hover:before, .btn-home.active:before { opacity: 1; } .padding-bottom-0 { padding-bottom: 0px; } .padding-top-80 { padding-top: 80px !important; } .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } blockquote { margin-bottom: 28px; padding: 30px; padding-top: 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #F4F8FB; overflow: hidden; } blockquote .text { position: relative; text-align: center; } blockquote .text p { position: relative; width: 100%; z-index: 2; margin-bottom: 10px !important; } blockquote .text:before { font-family: FontAwesome; content: "\f10d"; position: absolute; left: 0px; top: 0px; z-index: 1; font-size: 40px; color: #e1ecf4; } blockquote .text:after { font-family: FontAwesome; content: "\f10e"; position: absolute; right: 0px; bottom: 0px; z-index: 1; font-size: 40px; color: #e1ecf4; } blockquote .author { color: #3B566E; text-align: center; } .page-gallery { height: 185px; display: block; overflow: hidden; border-radius: 20px 5px 20px 20px; margin-bottom: 30px; } @media (max-width: 991px) { html, body { overflow-x: hidden; } .mobile-bottom-fix { margin-bottom: 30px; } .mobile-bottom-fix-big { margin-bottom: 60px; } } @media (max-width: 768px) { .page-gallery { height: 150px; } .btn-home { margin-bottom: 10px; } } / --------------------------------------------- header --------------------------------------------- / .header-area { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; height: 100px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .logo { float: left; margin-top: 32px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .logo img { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .nav { float: left; margin-top: 27px; margin-left: 50px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .header-area .main-nav .nav li { padding-left: 20px; padding-right: 20px; } .header-area .main-nav .nav li:last-child { padding-right: 0px; } .header-area .main-nav .nav li a { display: block; font-weight: 600; font-size: 14px; color: #6F8BA4; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; height: 40px; line-height: 40px; border: transparent; letter-spacing: 1px; } .header-area .main-nav .nav li a:hover { color: #6F8BA4; } .header-area .main-nav .nav li.submenu { position: relative; padding-right: 35px; } .header-area .main-nav .nav li.submenu:after { font-family: FontAwesome; content: "\f107"; font-size: 12px; color: #6F8BA4; position: absolute; right: 18px; top: 12px; } .header-area .main-nav .nav li.submenu ul { position: absolute; width: 200px; box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; top: 40px; opacity: 0; transform: translateY(-2em); visibility: hidden; z-index: -1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .header-area .main-nav .nav li.submenu ul li { margin-left: 0px; padding-left: 0px; padding-right: 0px; } .header-area .main-nav .nav li.submenu ul li a { display: block; background: #fff; color: #3B566E; padding-left: 20px; height: 40px; line-height: 40px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; font-size: 13px; border-bottom: 1px solid #f5f5f5; } .header-area .main-nav .nav li.submenu ul li a:before { content: ''; position: absolute; width: 0px; height: 40px; left: 0px; top: 0px; bottom: 0px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background: #635CDB; } .header-area .main-nav .nav li.submenu ul li a:hover { background: #f5f5f5; padding-left: 25px; } .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 3px; } .header-area .main-nav .nav li.submenu:hover ul { visibility: visible; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; } .header-area .main-nav .menu-trigger { cursor: pointer; display: block; position: absolute; top: 23px; width: 32px; height: 40px; text-indent: -9999em; z-index: 99; right: 40px; display: none; } .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: #3B566E; display: block; position: absolute; width: 30px; height: 2px; left: 0; } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: #3B566E; display: block; position: absolute; width: 30px; height: 2px; left: 0; width: 75%; } .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after { content: ""; } .header-area .main-nav .menu-trigger span { top: 16px; } .header-area .main-nav .menu-trigger span:before { -moz-transform-origin: 33% 100%; -ms-transform-origin: 33% 100%; -webkit-transform-origin: 33% 100%; transform-origin: 33% 100%; top: -10px; z-index: 10; } .header-area .main-nav .menu-trigger span:after { -moz-transform-origin: 33% 0; -ms-transform-origin: 33% 0; -webkit-transform-origin: 33% 0; transform-origin: 33% 0; top: 10px; } .header-area .main-nav .menu-trigger.active span, .header-area .main-nav .menu-trigger.active span:before, .header-area .main-nav .menu-trigger.active span:after { background-color: transparent; width: 100%; } .header-area .main-nav .menu-trigger.active span:before { -moz-transform: translateY(6px) translateX(1px) rotate(45deg); -ms-transform: translateY(6px) translateX(1px) rotate(45deg); -webkit-transform: translateY(6px) translateX(1px) rotate(45deg); transform: translateY(6px) translateX(1px) rotate(45deg); background-color: #3B566E; } .header-area .main-nav .menu-trigger.active span:after { -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg); -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg); -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg); transform: translateY(-6px) translateX(1px) rotate(-45deg); background-color: #3B566E; } .header-area .main-nav .header-buttons { float: right; } .header-area .main-nav .header-buttons li { float: left; } .header-area .main-nav .header-buttons li .btn-nav-line { padding-left: 25px; padding-right: 25px; border: 1px solid #FFFFFF; border-radius: 100px 0px 100px 100px; display: inline-block; height: 30px; margin-top: 5px; line-height: 29px; letter-spacing: 0.5px; background: none; color: #fff; position: relative; overflow: hidden; margin-top: 32px; font-weight: 700; font-size: 12px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; min-width: 110px; text-align: center; } .header-area .main-nav .header-buttons li .btn-nav-line:before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; left: 0px; top: 0px; z-index: 1; opacity: .19; } .header-area .main-nav .header-buttons li .btn-nav-line span { position: relative; z-index: 2; } .header-area .main-nav .header-buttons li .btn-nav-line:hover { background: #fff; color: #635CDB; } .header-area .main-nav .header-buttons li .btn-nav-primary { padding-left: 25px; padding-right: 25px; border: 1px solid #FFFFFF; border-radius: 100px 0px 100px 100px; display: inline-block; height: 30px; margin-top: 5px; line-height: 29px; letter-spacing: 0.5px; background: #fff; color: #635CDB; position: relative; overflow: hidden; margin-left: 15px; margin-top: 32px; font-weight: 700; font-size: 12px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; min-width: 110px; text-align: center; } .header-area .main-nav .header-buttons li .btn-nav-primary:before { content: ''; position: absolute; width: 100%; height: 100%; background: #fff; left: 0px; top: 0px; z-index: 1; opacity: .19; } .header-area .main-nav .header-buttons li .btn-nav-primary span { position: relative; z-index: 2; } .header-area .main-nav .header-buttons li .btn-nav-primary:hover { border: 1px solid #635CDB; background: #635CDB; color: #fff; } .header-area.header-sticky { background: #fff; height: 80px; box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); } .header-area.header-sticky .logo { margin-top: 26px; } .header-area.header-sticky .nav { margin-top: 21px !important; } .header-area.header-sticky .nav li a { color: #3B566E; } .header-area.header-sticky .nav li a:hover { color: #635CDB; } .header-area.header-sticky .nav li.submenu { position: relative; } .header-area.header-sticky .nav li.submenu:after { color: #3B566E; } .header-area.header-sticky .header-buttons { float: right; } .header-area.header-sticky .header-buttons li { float: left; } .header-area.header-sticky .header-buttons li .btn-nav-line { border: 1px solid #635CDB; color: #635CDB; margin-top: 24px; } .header-area.header-sticky .header-buttons li .btn-nav-line:hover { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; } .header-area.header-sticky .header-buttons li .btn-nav-primary { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; margin-top: 24px; border: 1px solid #635CDB; box-shadow: 0 4px 5px 0 rgba(103, 67, 213, 0.24); } .header-area.header-sticky .header-buttons li .btn-nav-primary:hover { border: 1px solid #635CDB; background: #fff; color: #635CDB; } .header-area.header-white { background: #fff; height: 80px; box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); } .header-area.header-white .logo { margin-top: 26px; } .header-area.header-white .nav { margin-top: 21px !important; } .header-area.header-white .nav li a { color: #3B566E; } .header-area.header-white .nav li a:hover { color: #635CDB; } .header-area.header-white .nav li.submenu { position: relative; } .header-area.header-white .nav li.submenu:after { color: #3B566E; } .header-area.header-white .header-buttons { float: right; } .header-area.header-white .header-buttons li { float: left; } .header-area.header-white .header-buttons li .btn-nav-line { border: 1px solid #635CDB; color: #635CDB; margin-top: 24px; } .header-area.header-white .header-buttons li .btn-nav-line:hover { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; } .header-area.header-white .header-buttons li .btn-nav-primary { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; margin-top: 24px; border: 1px solid #635CDB; box-shadow: 0 4px 5px 0 rgba(103, 67, 213, 0.24); } .header-area.header-white .header-buttons li .btn-nav-primary:hover { border: 1px solid #635CDB; background: #fff; color: #635CDB; } @media (max-width: 1200px) { .header-area .main-nav .nav li { padding-left: 12px; padding-right: 12px; } .header-area .main-nav .nav li.submenu { padding-right: 20px; } .header-area .main-nav .nav li.submenu:after { right: 5px; } } @media (max-width: 991px) { .header-area { background: #fff; height: 80px; box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); } .header-area .container { padding: 0px; } .header-area .logo { margin-top: 22px !important; margin-left: 30px; } .header-area .light-logo { display: none !important; } .header-area .dark-logo { display: block !important; } .header-area .menu-trigger { display: block !important; } .header-area .main-nav { overflow: hidden; } .header-area .main-nav .nav { float: none; width: 100%; margin-top: 80px !important; display: none; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; margin-left: 0px; } .header-area .main-nav .nav li { width: 100%; background: #fff; border-bottom: 1px solid #f5f5f5; padding-left: 0px !important; padding-right: 0px !important; } .header-area .main-nav .nav li a { height: 50px !important; line-height: 50px !important; padding: 0px !important; padding-left: 30px !important; border: none !important; background: #fff !important; color: #3B566E !important; } .header-area .main-nav .nav li a:hover { background: #f5f5f5 !important; } .header-area .main-nav .nav li.submenu ul { position: relative; visibility: inherit; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; top: 0px; width: 100%; box-shadow: none; height: 0px; } .header-area .main-nav .nav li.submenu ul li a { padding-left: 50px !important; } .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 0px; } .header-area .main-nav .nav li.submenu ul.active { height: auto !important; } .header-area .main-nav .nav li.submenu:after { color: #3B566E; right: 25px; font-size: 14px; top: 15px; } .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul { height: 0px; } .header-area .main-nav .header-buttons { display: none; } } @media (min-width: 992px) { .header-area .main-nav .nav { display: flex !important; } } / --------------------------------------------- welcome --------------------------------------------- / .welcome-area { overflow: hidden; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .welcome-area:after { content: ''; position: absolute; width: 100%; height: 100%; background: none; z-index: 3; } .welcome-area .right-bg { float: right; width: 89%; overflow: hidden; position: relative; z-index: 1; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .welcome-area .right-bg:before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); opacity: .73; } .welcome-area .header-bg { position: absolute; top: 0px; min-height: 500px; z-index: 2; } .welcome-area .header-text { position: absolute; width: 100%; top: 23%; transform: perspective(1px) translateY(0%); z-index: 4; } .welcome-area .header-text h1 { font-weight: 800; font-size: 28px; color: #1E3056; line-height: 46px; letter-spacing: 0.93px; margin-bottom: 30px; } .welcome-area .header-text h1 span { color: #635CDB; } .welcome-area .header-text p { font-weight: 400; font-size: 16px; color: #697BA2; line-height: 28px; letter-spacing: 1px; margin-bottom: 40px; padding-bottom: 30px; position: relative; } .welcome-area .header-text p:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 19px; height: 2px; background: #635CDB; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .welcome-area .header-text p:after { content: ''; position: absolute; bottom: 0px; left: 20px; width: 9px; height: 2px; background: #635CDB; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .welcome-area .header-text .btn-primary-line { width: 170px; margin-bottom: 0px; } .welcome-area .play-button-wrapper { position: absolute; width: 100%; top: 45%; transform: perspective(1px) translateY(-45%); z-index: 4; width: 55.5%; right: 0px; } .welcome-area .play-button-wrapper .btn-play { width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 22px; color: #fff; margin: auto; left: 10%; right: 0px; display: block; border: 1px solid #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; position: absolute; overflow: hidden; top: 50%; transform: perspective(1px) translateY(-50%); z-index: 3; } .welcome-area .play-button-wrapper .btn-play:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: .19; z-index: 1; } .welcome-area .play-button-wrapper .btn-play i { padding-left: 5px; position: relative; z-index: 2; } @media (max-width: 1200px) { .header-text { top: 60% !important; transform: perspective(1px) translateY(-60%) !important; } .header-text h1 { font-size: 28px !important; line-height: 38px !important; } } @media (max-width: 1024px) { .header-text { top: 65% !important; transform: perspective(1px) translateY(-65%) !important; } .header-text h1 { font-size: 26px !important; line-height: 36px !important; } } @media (max-width: 991px) { .welcome-area { margin-top: 80px; background: #fff; } .welcome-area .right-bg { width: 100%; } .welcome-area .right-bg:before { content: ''; position: absolute; width: 100%; height: 100%; opacity: 0.5; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); } .welcome-area .header-bg { display: none; } .welcome-area .header-text { top: 50% !important; transform: perspective(1px) translateY(-50%) !important; text-align: center; } .welcome-area .header-text h1 { font-weight: 600; font-size: 20px !important; line-height: 30px !important; margin-bottom: 10px !important; text-align: center; color: #fff; } .welcome-area .header-text h1 span { color: #fff; } .welcome-area .header-text p { text-align: center; color: #fff; font-size: 14px; line-height: 22px; margin-bottom: 0px; padding-bottom: 10px; } .welcome-area .header-text .btn-primary-line { margin: auto; border: 1px solid #fff; background: #fff; color: #635CDB; height: 40px; line-height: 40px; } .welcome-area .header-text .btn-primary-line:hover { color: #635CDB; } .welcome-area .play-button-wrapper { display: none; } } / --------------------------------------------- features --------------------------------------------- / .features-home { padding-top: 0px; margin-top: -100px; } .features-small-item { display: block; background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 40px 0 40px 40px; padding: 30px; text-align: center; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; overflow: hidden; margin-bottom: 30px; } .features-small-item:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity: 0; } .features-small-item.active:before, .features-small-item:hover:before { opacity: 1; } .features-small-item.active .features-title, .features-small-item:hover .features-title { color: #ffffff; } .features-small-item.active p, .features-small-item:hover p { color: #E5E9F7; } .features-small-item.active a span, .features-small-item.active a i, .features-small-item:hover a span, .features-small-item:hover a i { color: #fff; } .features-small-item .icon { width: 97px; height: 67px; line-height: 79px; margin: auto; position: relative; margin-bottom: 20px; background: #F6F4FD; border-radius: 22px 0 22px 22px; } .features-small-item .icon i { font-size: 38px; color: #635CDB; } .features-small-item .features-title { font-weight: 400; font-size: 16px; color: #3B566E; letter-spacing: 0.7px; margin-bottom: 15px; position: relative; z-index: 2; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .features-small-item p { font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.88px; line-height: 26px; position: relative; z-index: 2; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; margin-bottom: 20px; } .features-small-item a { float: right; position: relative; z-index: 2; } .features-small-item a span { font-weight: 700; font-size: 12px; color: #635CDB; display: inline-block; height: 20px; line-height: 20px; float: left; margin-right: 10px; } .features-small-item a i { color: #635CDB; display: inline-block; height: 20px; line-height: 20px; float: left; } @media (max-width: 1200px) { .features-home { padding-top: 0px; margin-top: -10px; } } @media (max-width: 991px) { .features-home { padding-top: 100px; margin-top: 0px; } } / --------------------------------------------- parallax --------------------------------------------- / .parallax { min-height: 215px; overflow: hidden; position: relative; padding-top: 60px; padding-bottom: 60px; } .parallax:before { content: ''; position: absolute; width: 140%; height: 140%; opacity: .88; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); z-index: 2; top: -20%; left: -20%; } .parallax .parallax-content { position: relative; z-index: 3; } .parallax .parallax-content .info { text-align: center; font-weight: 400; font-size: 22px; color: #fff; padding-top: 20px; padding-bottom: 20px; } .parallax .parallax-content .info p { letter-spacing: 1px; margin-bottom: 40px; } .parallax .parallax-content .info p span { text-decoration: underline; } .parallax .parallax-content .info .btn-white-line { margin: auto; } .parallax .parallax-content .info .btn-white-line:hover { color: #635CDB; } .parallax-counter { min-height: 315px; overflow: hidden; position: relative; } .parallax-counter:before { content: ''; position: absolute; width: 140%; height: 140%; opacity: .78; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); z-index: 2; top: -20%; left: -20%; } .parallax-counter .parallax-content { position: absolute; z-index: 3; top: 50%; transform: perspective(1px) translateY(-50%); width: 100%; } .parallax-counter .parallax-content .count-item { height: 280px; position: relative; overflow: hidden; } .parallax-counter .parallax-content .count-item:hover strong { margin-top: 60px; } .parallax-counter .parallax-content .count-item strong { display: block; text-align: center; font-weight: 600; font-size: 40px; letter-spacing: 1.72px; margin-bottom: 10px; color: #fff; margin-top: 70px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .parallax-counter .parallax-content .count-item span { display: block; text-align: center; color: #fff; font-weight: 400; font-size: 20px; letter-spacing: 0.86px; } @media (max-width: 991px) { .parallax { padding-top: 60px; padding-bottom: 60px; min-height: auto; } .parallax .parallax-content { position: relative !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; } .parallax-counter { padding-top: 60px; padding-bottom: 60px; } .parallax-counter .parallax-content { position: relative !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; } .parallax-counter .parallax-content .count-item { height: auto; padding-top: 20px; padding-bottom: 20px; } .parallax-counter .parallax-content .count-item:hover strong { margin-top: 0px; } .parallax-counter .parallax-content .count-item:before { display: none; } .parallax-counter .parallax-content .count-item:after { width: 40px; height: 1px; } .parallax-counter .parallax-content .count-item strong { margin-top: 0px; } } / --------------------------------------------- team --------------------------------------------- / .team-item { background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; margin-bottom: 30px; margin-top: 45px; } .team-item:hover .user-image { top: -90px; } .team-item .user-image { padding: 10px; width: 150px; height: 150px; border: 6px solid #6740d5; overflow: hidden; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; left: 0px; right: 0px; margin: auto; top: -113px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background-color: #fff; } .team-item .team-content { box-shadow: 0px 1px 7px -1px #aaa; text-align: center; overflow: hidden; } .team-item .team-content .team-info { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); margin-top: 70px; margin-bottom: 30px; padding-top: 10px; padding-bottom: 10px; } .team-item .team-content .team-info .user-name { display: block; font-weight: 400; font-size: 16px; color: #fff; letter-spacing: 0.69px; margin-bottom: 3px; } .team-item .team-content .team-info span { display: block; font-weight: 400; font-size: 12px; color: #E5E9F7; letter-spacing: 0.6px; } .team-item .team-content .social { text-align: center; margin-bottom: 15px; } .team-item .team-content .social li { display: inline-block; margin-left: 7px; margin-right: 7px; } .team-item .team-content .social li a { color: #635CDB; } .team-item .team-content p { padding-left: 25px; padding-right: 25px; margin-bottom: 25px; font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.6px; line-height: 26px; } / --------------------------------------------- pricing --------------------------------------------- / .pricing-item { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 5px; overflow: hidden; margin-bottom: 30px; } .pricing-item.active .pricing-header { position: relative; overflow: hidden; } .pricing-item.active .pricing-header:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0px; right: 0px; margin: auto; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); } .pricing-item.active .pricing-header .pricing-title { color: #fff; } .pricing-item.active .pricing-header .number { background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13); } .pricing-item.active .pricing-header .number:before { border-bottom: 14px solid #fff; } .pricing-item.active .pricing-header .number:after { border-top: 14px solid #fff; } .pricing-item .pricing-header { border-bottom: 1px solid #F6F4FD; text-align: center; height: 130px; display: block; position: relative; } .pricing-item .pricing-header .pricing-title { font-weight: 700; font-size: 16px; letter-spacing: 1px; color: #3B566E; position: absolute; width: 100%; top: 46%; transform: perspective(1px) translateY(0%); } .pricing-item .pricing-body { margin-bottom: 40px; } .pricing-item .pricing-body .number { width: 42px; height: 42px; line-height: 42px; background: #F6F4FD; position: relative; margin: auto; margin-top: -20px; text-align: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border-top-right-radius: 0; } .pricing-item .pricing-body .number span { font-weight: 400; font-size: 16px; color: #635CDB; display: block; } .pricing-item .pricing-body .price-wrapper { text-align: center; margin-top: 40px; margin-bottom: 30px; } .pricing-item .pricing-body .price-wrapper .currency { height: 47px; font-weight: 600; font-size: 20px; color: #635CDB; position: relative; top: -15px; } .pricing-item .pricing-body .price-wrapper .price { font-weight: 700; font-size: 34px; color: #635CDB; letter-spacing: 2.12px; } .pricing-item .pricing-body .price-wrapper .period { font-weight: 700; font-size: 14px; color: #635CDB; letter-spacing: 0.88px; } .pricing-item .pricing-body .list li { text-align: center; margin-bottom: 12px; font-weight: 400; font-size: 14px; color: #CCDCEA; letter-spacing: 0.88px; } .pricing-item .pricing-body .list li.active { color: #3B566E; } .pricing-item .pricing-footer { text-align: center; } .pricing-item .pricing-footer a { width: 160px; margin: auto; display: inline-block; height: 36px; line-height: 36px; text-align: center; box-shadow: 0 4px 5px 0 rgba(103, 67, 213, 0.24); border-radius: 100px 0px 100px 100px; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); margin-bottom: 40px; font-weight: 700; font-size: 12px; color: #fff; letter-spacing: 0.75px; text-transform: uppercase; -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; outline: none !important; cursor: pointer; position: relative; } .pricing-item .pricing-footer a:hover { background-image: linear-gradient(-135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; } / --------------------------------------------- blog --------------------------------------------- / .blog-post-thumb { text-align: center; margin-bottom: 30px; } .blog-post-thumb.big .img { height: 400px; } .blog-post-thumb .img { overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 25px; position: relative; height: 200px; } .blog-post-thumb .img .date { position: absolute; right: 0px; bottom: 0px; width: 60px; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); text-align: center; padding-top: 10px; padding-bottom: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; } .blog-post-thumb .img .date strong { display: block; color: #fff; height: 20px; line-height: 20px; } .blog-post-thumb .img .date span { display: block; color: #fff; height: 20px; line-height: 20px; } .blog-post-thumb h3 { margin-bottom: 10px !important; } .blog-post-thumb h3 a { font-weight: 400; font-size: 16px; color: #3B566E; letter-spacing: 1px; line-height: 26px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .blog-post-thumb h3 a:hover { color: #635CDB; } .blog-post-thumb .post-meta { overflow: hidden; } .blog-post-thumb .post-meta li { float: left; margin-right: 30px; height: 30px; line-height: 30px; color: #635CDB; font-size: 14px; } .blog-post-thumb .post-meta li a { color: #635CDB; } .blog-post-thumb .post-meta li span { display: inline-block; margin-right: 5px; } .blog-post-thumb .text { font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.88px; line-height: 26px; margin-bottom: 15px; } .blog-post-thumb .text.post-detail { font-weight: 400; font-size: 16px; line-height: 28px; text-align: left; } .blog-post-thumb .post-footer { overflow: hidden; border-bottom: 1px solid #ECF7FF; border-top: 1px solid #ECF7FF; padding-top: 10px; padding-bottom: 10px; } .blog-post-thumb .post-footer span { float: left; height: 30px; line-height: 30px; font-weight: 300; font-size: 14px; color: #6F8BA4; padding-left: 30px; } .blog-post-thumb .post-footer ul.share { float: right; padding-right: 30px; } .blog-post-thumb .post-footer ul.share li { float: left; margin-left: 15px; } .blog-post-thumb .post-footer ul.share li a { display: block; height: 30px; line-height: 30px; color: #635CDB; } .blog-post-thumb .btn-primary-line { margin: auto; } .blog-list .blog-post-thumb { margin-bottom: 60px; text-align: left; overflow: hidden; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .blog-list .blog-post-thumb .img { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-top-left-radius: 5px !important; -webkit-border-top-right-radius: 5px !important; -moz-border-radius-topleft: 5px !important; -moz-border-radius-topright: 5px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; } .blog-list .blog-post-thumb h3 { padding-left: 30px; padding-right: 30px; } .blog-list .blog-post-thumb .post-meta { padding-left: 30px; padding-right: 30px; } .blog-list .blog-post-thumb .text { padding-left: 30px; padding-right: 30px; } .blog-list .blog-post-thumb .btn-primary-line { float: left; margin-left: 30px; margin-right: 30px; margin-bottom: 30px; } .section-comments { margin-bottom: 60px; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 30px; padding-bottom: 0px; } .section-comments ul { overflow: hidden; margin: 0px; padding: 0px; } .section-comments ul li { overflow: hidden; } .section-comments ul li .avatar { width: 70px; height: 70px; border-radius: 15px 3px 15px 15px; overflow: hidden; float: left; margin-right: 20px; } .section-comments ul li .comment-content { font-weight: 400; font-size: 14px; color: #6F8BA4; float: left; width: calc(100% - 90px); width: -webkit-calc(100% - 90px); } .section-comments ul li .comment-content .comment-by { margin-bottom: 10px; position: relative; } .section-comments ul li .comment-content .comment-by strong { display: block; color: #3B566E; } .section-comments ul li .comment-content .comment-by span { font-size: 12px; } .section-comments ul li .comment-content .comment-by .btn-reply { position: absolute; right: 0px; top: 15px; background: #F4F8FB; color: #6F8BA4; height: 25px; line-height: 25px; padding-left: 10px; padding-right: 10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .section-comments ul li .comment-content .comment-by .btn-reply i { font-size: 12px; } .section-comments ul li .comment-content .comment-by .btn-reply:hover { background: #635CDB; color: #fff; } .section-comments ul li ul { padding-left: 90px; } .post-comment { box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 30px; padding-bottom: 0px; margin-bottom: 30px; } .post-comment .comment-form .form-item { margin-bottom: 20px; } .post-comment .comment-form .form-item label { display: block; text-transform: uppercase; font-weight: 600; font-size: 14px; margin-bottom: 0px; } .post-comment .comment-form .form-item input, .post-comment .comment-form .form-item textarea { border: 1px solid #eee; width: 100%; height: 40px; outline: none; padding-left: 20px; padding-right: 20px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .post-comment .comment-form .form-item input:focus, .post-comment .comment-form .form-item textarea:focus { border: 1px solid #635CDB; } .post-comment .comment-form .form-item textarea { height: 150px; resize: none; padding: 20px; } .pagination { margin-bottom: 30px; } .pagination .page-item a { font-size: 14px; color: #635CDB; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .pagination .page-item a:hover { background: #F4F8FB; } @media (max-width: 991px) { .blog-post-thumb.big .img { height: 350px; } } @media (max-width: 420px) { .blog-post-thumb.big .img { height: 200px; } } / --------------------------------------------- footer --------------------------------------------- / footer { background: #F4F8FB; padding-top: 70px; } footer img.logo { margin-bottom: 30px; } footer .text { font-weight: 400; font-size: 14px; color: #6F8BA4; line-height: 26px; letter-spacing: 0.88px; } footer h5 { font-weight: 400; font-size: 16px; color: #3B566E; letter-spacing: 0.69px; line-height: 30px; margin-bottom: 30px !important; } footer .footer-nav li a { display: block; overflow: hidden; } footer .footer-nav li a:hover span { color: #635CDB; } footer .footer-nav li a i { float: left; height: 32px; line-height: 32px; margin-right: 12px; font-size: 14px; color: #3B566E; } footer .footer-nav li a span { float: left; height: 32px; line-height: 32px; font-weight: 400; font-size: 14px; color: #6F8BA4; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } footer .address p { display: block; overflow: hidden; font-weight: 400; font-size: 14px; color: #6F8BA4; line-height: 26px; letter-spacing: 0.88px; margin-bottom: 5px; } footer .address p a { color: #635CDB; } footer .address .social { overflow: hidden; margin-top: 5px; } footer .address .social li { float: left; font-size: 16px; margin-right: 10px; } footer .address .social li a { color: #6F8BA4; } footer .copyright { text-align: center; border-top: 1px solid #DAE6FD; margin-top: 30px; padding-top: 30px; padding-bottom: 30px; font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.88px; } @media (max-width: 991px) { footer .text { margin-bottom: 30px; } footer h5 { margin-bottom: 15px; } footer .footer-nav { margin-bottom: 30px; } } / --------------------------------------------- pages --------------------------------------------- / .page { background: #fff; } .page .cover { margin-top: 80px; min-height: 270px; position: relative; overflow: hidden; } .page .cover:before { content: ''; position: absolute; width: 140%; height: 140%; left: -20%; top: -20%; right: -20%; bottom: -20%; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); z-index: 2; opacity: 0.7; } .page .cover .page-top { position: absolute; width: 100%; bottom: 50px; z-index: 3; } .page .cover .page-top h1 { font-weight: 900; font-size: 36px; height: 50px; line-height: 46px; letter-spacing: 1.4px; color: #fff; text-align: center; } .page .cover .page-top h1:before { content: ''; position: absolute; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 19px; height: 2px; background: #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .page .cover .page-top .breadcrumb { float: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: none; padding: 0px; margin-top: 8px; margin-bottom: 0px; display: block; text-align: center; } .page .cover .page-top .breadcrumb li { font-weight: 400; font-size: 14px; color: #E5E9F7; line-height: 30px; margin-left: 10px; display: inline-block; } .page .cover .page-top .breadcrumb li:after { font-family: FontAwesome; content: "\f105"; margin-left: 10px; color: #E5E9F7; } .page .cover .page-top .breadcrumb li:first-child { margin-left: 0px; } .page .cover .page-top .breadcrumb li:last-child:after { content: ''; margin-left: 0px; } .page .cover .page-top .breadcrumb li a { font-weight: 400; font-size: 14px; color: #fff; } .page .page-bottom { padding-top: 100px; padding-bottom: 70px; font-weight: 400; font-size: 16px; letter-spacing: 0.88px; line-height: 28px; color: #6F8BA4; } .page .page-bottom p { margin-bottom: 28px; } .page .page-bottom .about { position: relative; float: left; width: 100%; margin-bottom: 100px; } .page .page-bottom .about.left .about-image { float: right; } .page .page-bottom .about.left .about-text { left: 0px; } .page .page-bottom .about .about-image { position: relative; width: 70%; float: left; height: 500px; border-radius: 40px 5px 40px 40px; overflow: hidden; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); z-index: 1; } .page .page-bottom .about .about-image:before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 2; opacity: .3; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); } .page .page-bottom .about .about-text { position: absolute; z-index: 2; width: 40%; float: right; right: 0px; top: 50%; transform: perspective(1px) translateY(-50%); background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 40px 5px 40px 40px; padding: 30px; padding-bottom: 10px; } .page .page-bottom .about .about-text h2 { font-weight: 700; font-size: 24px; line-height: 38px; letter-spacing: 1.75px; color: #3B566E; margin-bottom: 20px; } .page .page-bottom .about .about-text p { font-weight: 400; font-size: 14px; line-height: 26px; margin-bottom: 20px; } .page .page-bottom .features-small-item p { margin-bottom: 0px !important; } .page .page-bottom .page-detail .about { margin-bottom: 30px !important; } .page .page-bottom .page-detail .about .about-image { border-radius: 30px 5px 30px 30px; } .page .page-bottom .page-detail .about .about-image:before { display: none; } .page .page-bottom .page-detail .about .about-text { border-radius: 30px 5px 30px 30px; } @media (max-width: 991px) { .page .cover { margin-top: 80px; } .page .cover h1 { font-size: 26px !important; line-height: 36px !important; height: auto !important; padding-bottom: 15px; } .page .cover .page-top { text-align: center; } .page .cover .page-top .breadcrumb { float: none; text-align: center; display: block; } .page .cover .page-top .breadcrumb li { display: inline; } .page .page-bottom .about { overflow: initial !important; } .page .page-bottom .about .about-image { width: 100% !important; height: 300px; margin-bottom: 30px; } .page .page-bottom .about .about-text { position: relative !important; width: 100% !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); } } / --------------------------------------------- faq --------------------------------------------- / .faq { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; margin-bottom: 30px; } .faq .card { border: none; background: none; border-bottom: 1px solid #F6F4FD; } .faq .card .card-header { padding: 0px; border: none; background: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .faq .card .card-header:hover { background: #F6F4FD; padding-left: 10px; } .faq .card .card-header .faq-title { width: 100%; text-align: left; padding: 0px; padding-left: 30px; padding-right: 30px; font-weight: 400; font-size: 15px; letter-spacing: 1px; color: #3B566E; text-decoration: none !important; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; padding-top: 20px; padding-bottom: 20px; } .faq .card .card-header .faq-title .badge { display: inline-block; width: 20px; height: 20px; line-height: 14px; float: left; border-radius: 100px; border-top-right-radius: 0; text-align: center; background: #635CDB; color: #fff; font-size: 12px; margin-right: 20px; } .faq .card .card-body { padding: 30px; padding-left: 35px; padding-bottom: 16px; font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; border-top: 1px solid #F3F8FF; } .faq .card .card-body p { margin-bottom: 14px; } @media (max-width: 991px) { .faq { margin-bottom: 30px; } .faq .card .card-header .faq-title { line-height: 26px; margin-top: 10px; } } / --------------------------------------------- aside --------------------------------------------- / aside.default-aside { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } aside.default-aside .sidebar ul { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 30px; } aside.default-aside .sidebar ul li.active a { background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); color: #fff; } aside.default-aside .sidebar ul li.active a:after { color: #fff; } aside.default-aside .sidebar ul li.active a:hover { padding-left: 60px; } aside.default-aside .sidebar ul li:last-child a { border: none; } aside.default-aside .sidebar ul li a { display: block; border-bottom: 1px solid #ECF7FF; height: 59px; line-height: 59px; padding-left: 59px; position: relative; font-weight: 400; font-size: 14px; color: #3B566E; letter-spacing: 0.88px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; } aside.default-aside .sidebar ul li a:hover { padding-left: 70px; } aside.default-aside .sidebar ul li a:after { font-family: FontAwesome; content: "\f105"; position: absolute; left: 30px; color: #3B566E; } aside.default-aside .sidebar ul li a span { float: right; margin-right: 30px; display: inline-block; background: #635CDB; height: 20px; line-height: 20px; padding-left: 10px; padding-right: 10px; font-size: 10px; color: #fff; margin-top: 18px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } aside.default-aside .sidebar .search-widget { display: block; margin-bottom: 30px; height: 50px; position: relative; } aside.default-aside .sidebar .search-widget input { border: 1px solid #fff; position: absolute; width: 100%; height: 100%; outline: none; padding-left: 20px; padding-right: 50px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); } aside.default-aside .sidebar .search-widget input:focus { border: 1px solid #635CDB; padding-left: 30px; } aside.default-aside .sidebar .search-widget button { position: absolute; z-index: 2; right: 10px; top: 10px; height: 30px; width: 30px; border: none; background-image: linear-gradient(127deg, #6A30D1 0%, #5C83E3 91%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; text-align: center; padding: 0px; } aside.default-aside .sidebar .search-widget button i { color: #fff; } aside.default-aside .sidebar .widget-tags { padding: 30px; padding-bottom: 20px; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); } aside.default-aside .sidebar .widget-tags a { float: left; margin-right: 10px; margin-bottom: 10px; background: #f5f5f5; padding-left: 10px; padding-right: 10px; font-weight: 400; font-size: 14px; color: #3B566E; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } aside.default-aside .sidebar .widget-tags a:hover { background: #635CDB; color: #fff; } / --------------------------------------------- contact --------------------------------------------- / .contact { float: left; width: 100%; position: relative; } .contact .map-wrapper { position: relative; width: 100%; height: 500px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); z-index: 1; } .contact .map-wrapper .map-canvas { width: 100%; height: 100%; } .contact .contact-info { position: relative; z-index: 2; width: 90%; margin-left: 5%; margin-top: -90px; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 25px 3px 25px 25px; padding: 30px; padding-bottom: 10px; } .contact .contact-info .item { overflow: hidden; color: #fff; } .contact .contact-info .item i { float: left; font-size: 16px; width: 20px; margin-right: 10px; margin-top: 5px; } .contact .contact-info .item span { float: left; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); font-size: 14px; } .contact .contact-info .item span a { color: #fff; } .contact .contact-info .social { overflow: hidden; margin-top: 30px; text-align: center; margin-bottom: 20px; } .contact .contact-info .social li { display: inline; font-size: 22px; margin-right: 7px; margin-left: 7px; } .contact .contact-info .social li a { color: #fff; } .contact-bottom { border-top: 1px solid #f5f5f5; margin-top: 60px; padding-top: 60px; } .contact-bottom .contact-text { font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.6px; line-height: 26px; } .contact-bottom .contact-text p { margin-bottom: 28px; } .contact-bottom .contact-form input, .contact-bottom .contact-form textarea { border: 1px solid #eee; width: 100%; height: 50px; outline: none; padding-left: 20px; padding-right: 20px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 30px; } .contact-bottom .contact-form input:focus, .contact-bottom .contact-form textarea:focus { border: 1px solid #635CDB; padding-left: 30px; } .contact-bottom .contact-form textarea { height: 150px; resize: none; padding: 20px; } .contact-bottom .contact-form .btn-primary-line { margin-bottom: 0px !important; } @media (max-width: 991px) { .contact { overflow: initial !important; margin-bottom: 10px !important; } .contact .map-wrapper { width: 100% !important; height: 300px; margin-bottom: 30px; } .contact .contact-info { position: relative !important; width: 100% !important; margin-top: 10px !important; margin-left: 0px !important; transform: perspective(1px) translateY(0%) !important; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); } .contact-bottom { margin-top: 30px; padding-top: 30px; } } / --------------------------------------------- preloader --------------------------------------------- / #preloader { overflow: hidden; background: #E3F2FD; left: 0; right: 0; top: 0; bottom: 0; position: fixed; z-index: 9999; } #preloader #loader { position: absolute; top: calc(50% - 55px); left: calc(50% - 55px); } #preloader #loader #box { width: 50px; height: 50px; background: #fff; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } #preloader #loader #shadow { width: 50px; height: 5px; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } @keyframes loader { 0% { left: -100px; } 100% { left: 110%; } } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 50% { transform: scale(1.2, 1); } } .logo_svg{ width: 110px; height: 110px; } .os{ opacity: 0; font-size: 20px; position: fixed; top: calc(50% - -12px); right: calc(50%); color: #6640d6; -webkit-animation: bubble_ani linear 2s infinite; animation: bubble_ani linear 2s infinite; } .os1{ opacity: 0; font-size: 20px; position: fixed; top: calc(50% - -12px); right: calc(50% - 6px); color: #6640d6; -webkit-animation: bubble_ani 2s linear 1s infinite; animation: bubble_ani 2s linear 1s infinite; } / Safari 4.0 - 8.0 / @-webkit-keyframes bubble_ani { 0% {top:calc(50% - 12px); opacity: 0} 50% {top:calc(50% - 56px); opacity: 1} 100% {top:calc(50% - 100px); opacity: 0} } / Standard syntax / @keyframes bubble_ani { 0% {top:calc(50% - 12px); opacity: 0} 50% {top:calc(50% - 56px); opacity: 1} 100% {top:calc(50% - 100px); opacity: 0} } /***********************************************/ .shadow-effect { background: #fff; padding: 20px; border-radius: 4px; text-align: center; border:1px solid #ECECEC; box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02); } #customers-testimonials .shadow-effect p { font-family: inherit; font-size: 17px; line-height: 1.5; margin: 0 0 17px 0; font-weight: 300; } .testimonial-name { margin: -17px auto 0; display: table; width: auto; background-image: linear-gradient(135deg, #6A30D1 0%, #5C83E3 100%); padding: 9px 35px; border-radius: 100px 0px 100px 100px; text-align: center; color: #fff; box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05); } #customers-testimonials .item { text-align: center; padding: 50px; margin-bottom:80px; opacity: .2; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); transition: all 0.3s ease-in-out; } #customers-testimonials .owl-item.active.center .item { opacity: 1; -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); } .owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; max-width: 90px; margin: 0 auto 17px; } #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span, #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span { background: #6936d2; -webkit-transform: translate3d(0px, -50%, 0px) scale(0.7); transform: translate3d(0px, -50%, 0px) scale(0.7); } #customers-testimonials.owl-carousel .owl-dots{ display: inline-block; width: 100%; text-align: center; } #customers-testimonials.owl-carousel .owl-dots .owl-dot{ display: inline-block; } #customers-testimonials.owl-carousel .owl-dots .owl-dot span { background: #6b7add; display: inline-block; height: 20px; margin: 0 2px 5px; -webkit-transform: translate3d(0px, -50%, 0px) scale(0.3); transform: translate3d(0px, -50%, 0px) scale(0.3); -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; transition: all 250ms ease-out 0s; width: 20px; }

| ver. 1.4 | Github | . | PHP 8.2.9 | Generation time: 0.02 | proxy | phpinfo | Settings