/* @File: Dilx Template Style * This file contains the styling for the actual template, this is the file you need to edit to change the look of the template. This files table contents are outlined below>>>>> ******************************************* ******************************************* ** - Default CSS ** - Sass CSS ** - IT Startup CSS ** - Digital CSS ** - About CSS ** - Service Details CSS ** - Project Details CSS ** - Blog Details CSS ** - Contact CSS ** - User CSS ** - Error CSS ** - Rules CSS ** - Preloader CSS ** - Go Top CSS */ @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"); /*----- Default CSS -----*/ body { font-family: "Rubik", sans-serif; color: #565353; background-color: #fff; font-size: 16px; } h1, h2, h3, h4, h5, h6 { font-family: "Quicksand", sans-serif; color: #252525; line-height: 1.4; font-weight: 700; } p { line-height: 1.8; } a { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; text-decoration: none; } img { max-width: 100%; } .d-table { width: 100%; height: 100%; } .d-table-cell { vertical-align: middle; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pt-100 { padding-top: 100px; } .pb-70 { padding-bottom: 70px; } .pb-100 { padding-bottom: 100px; } button:focus { outline: 0; } .btn.focus, .btn:focus { -webkit-box-shadow: none; box-shadow: none; } /*----- End Default CSS -----*/ /*----- Sass CSS -----*/ /*-- Navbar --*/ .navbar-light .navbar-brand .logo-two { display: none; } .main-nav { background-color: transparent; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav .container-fluid { max-width: 1615px; } .main-nav nav { padding-left: 0; padding-right: 0; } .main-nav nav .navbar-nav { margin-left: auto; margin-right: auto; } .main-nav nav .navbar-nav .nav-item:hover a { color: #2948ff; } .main-nav nav .navbar-nav .nav-item a { font-weight: 400; text-transform: capitalize; color: #565353; padding-bottom: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav nav .navbar-nav .nav-item a:hover, .main-nav nav .navbar-nav .nav-item a:focus, .main-nav nav .navbar-nav .nav-item a.active { color: #2948ff; } .main-nav nav .navbar-nav .nav-item a i { font-size: 18px; position: relative; top: 3px; display: inline-block; } .main-nav nav .navbar-nav .nav-item .dropdown-menu { padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; background: #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd91; box-shadow: 0px 0px 20px 0px #dddddd91; border: 0; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li { border-bottom: 1px dashed #2948ff2e; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li:last-child { border-bottom: 0; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu { top: 0 !important; left: unset; right: -100%; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a { color: #2948ff; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a { font-weight: 400; color: #565353; position: relative; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:after { position: absolute; content: ''; width: 0px; height: 2px; top: 18px; left: 0; background-color: #2948ff; opacity: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active { color: #2948ff; padding-left: 25px; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover:after, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus:after, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active:after { opacity: 1; width: 15px; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu { left: unset; right: -100%; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a { color: #565353; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active { color: #2948ff; } .main-nav nav .navbar-nav .nav-item .dropdown-toggle::after { display: none; } .main-nav.menu-shrink { padding-top: 5px; padding-bottom: 5px; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd5e; box-shadow: 0px 0px 20px 0px #dddddd5e; } .side-nav .left-btn { display: inline-block; color: #2948ff; background-color: #d4daff; border-radius: 30px; padding-right: 30px; padding-left: 28px; position: relative; overflow: hidden; z-index: 1; margin-right: 10px; height: 50px; line-height: 50px; } .side-nav .left-btn:before { position: absolute; content: ''; width: 0%; height: 100%; left: 0; top: 0; background-color: #2948ff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; } .side-nav .left-btn:after { position: absolute; content: ''; width: 0%; height: 100%; right: 0; top: 0; background-color: #2948ff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; opacity: .40; } .side-nav .left-btn i { display: inline-block; font-size: 22px; position: relative; top: 5px; margin-right: 4px; } .side-nav .left-btn:hover { color: #fff; } .side-nav .left-btn:hover:before { width: 100%; } .side-nav .left-btn:hover:after { width: 100%; } /*-- End Navbar --*/ /*-- Banner --*/ .banner-area { height: 920px; position: relative; overflow: hidden; } .banner-area .container-fluid { max-width: 1615px; } .banner-area .banner-shape img { position: absolute; } .banner-area .banner-shape img:nth-child(1) { top: 145px; right: 0; z-index: -1; max-width: 885px; } .banner-area .banner-shape img:nth-child(2) { top: 200px; left: 40%; -webkit-animation: banner-ani-one 18s infinite linear; animation: banner-ani-one 18s infinite linear; } .banner-area .banner-shape img:nth-child(3) { top: 320px; left: 80px; -webkit-animation: banner-ani-two 18s infinite linear; animation: banner-ani-two 18s infinite linear; } .banner-area .banner-shape img:nth-child(4) { bottom: 90px; left: 110px; -webkit-animation: banner-ani-three 18s infinite linear; animation: banner-ani-three 18s infinite linear; } .banner-area .banner-shape img:nth-child(5) { bottom: 200px; left: 50%; -webkit-animation: banner-ani-four 18s infinite linear; animation: banner-ani-four 18s infinite linear; } .banner-area .banner-shape img:nth-child(6) { bottom: 50px; right: 150px; -webkit-animation: banner-ani-five 18s infinite linear; animation: banner-ani-five 18s infinite linear; } @-webkit-keyframes banner-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-80px, -80px); transform: translate(-80px, -80px); } 70% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-80px, -80px); transform: translate(-80px, -80px); } 70% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-two { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 70% { -webkit-transform: translate(50px, -80px); transform: translate(50px, -80px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-two { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(80px, 80px); transform: translate(80px, 80px); } 70% { -webkit-transform: translate(50px, -80px); transform: translate(50px, -80px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-three { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-100px, -100px); transform: translate(-100px, -100px); } 70% { -webkit-transform: translate(-80px, 80px); transform: translate(-80px, 80px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-three { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-100px, -100px); transform: translate(-100px, -100px); } 70% { -webkit-transform: translate(-80px, 80px); transform: translate(-80px, 80px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-four { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(120px, 120px); transform: translate(120px, 120px); } 70% { -webkit-transform: translate(80px, -110px); transform: translate(80px, -110px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-four { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(120px, 120px); transform: translate(120px, 120px); } 70% { -webkit-transform: translate(80px, -110px); transform: translate(80px, -110px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-five { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-150px, -120px); transform: translate(-150px, -120px); } 70% { -webkit-transform: translate(-100px, 90px); transform: translate(-100px, 90px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-five { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 30% { -webkit-transform: translate(-150px, -120px); transform: translate(-150px, -120px); } 70% { -webkit-transform: translate(-100px, 90px); transform: translate(-100px, 90px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .banner-content { max-width: 825px; } .banner-content span { display: block; color: #252525; font-size: 20px; margin-bottom: 10px; } .banner-content h1 { color: #252525; font-size: 80px; margin-bottom: 10px; line-height: 100px; } .banner-content p { font-size: 20px; margin-bottom: 25px; } .banner-content .banner-btn .banner-btn-right { display: inline-block; color: #2948ff; background-color: #d4daff; border-radius: 30px; padding-right: 30px; padding-left: 28px; position: relative; overflow: hidden; z-index: 1; margin-left: 10px; height: 50px; line-height: 50px; } .banner-content .banner-btn .banner-btn-right:before { position: absolute; content: ''; width: 0%; height: 100%; left: 0; top: 0; background-color: #2948ff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; } .banner-content .banner-btn .banner-btn-right:after { position: absolute; content: ''; width: 0%; height: 100%; right: 0; top: 0; background-color: #2948ff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; opacity: .40; } .banner-content .banner-btn .banner-btn-right i { display: inline-block; font-size: 25px; position: relative; top: 5px; } .banner-content .banner-btn .banner-btn-right:hover { color: #fff; } .banner-content .banner-btn .banner-btn-right:hover:before { width: 100%; } .banner-content .banner-btn .banner-btn-right:hover:after { width: 100%; } .cmn-btn { display: inline-block; color: #fff; background-color: #2948ff; border-radius: 30px; padding-right: 28px; padding-left: 32px; position: relative; overflow: hidden; z-index: 1; height: 50px; line-height: 50px; } .cmn-btn:before { position: absolute; content: ''; width: 0%; height: 100%; left: 0; top: 0; background-color: #252525; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; } .cmn-btn:after { position: absolute; content: ''; width: 0%; height: 100%; right: 0; top: 0; background-color: #252525; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 30px; z-index: -1; opacity: .40; } .cmn-btn i { display: inline-block; font-size: 20px; position: relative; top: 4px; -webkit-animation: unset; animation: unset; } .cmn-btn:hover { color: #fff; } .cmn-btn:hover:before { width: 100%; } .cmn-btn:hover:after { width: 100%; } .cmn-btn:hover i { -webkit-animation: cmn-rotate-ani 0.8s infinite linear; animation: cmn-rotate-ani 0.8s infinite linear; } @-webkit-keyframes cmn-rotate-ani { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cmn-rotate-ani { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-- End Banner --*/ /*-- Service --*/ .section-title { margin-bottom: 40px; } .section-title .sub-title { display: block; color: #2948ff; margin-bottom: 2px; } .section-title h2 { font-size: 45px; margin-bottom: 0; } .service-area { position: relative; } .service-area .service-shape { position: absolute; top: -125px; left: 0; z-index: -2; } .service-item { margin-bottom: 30px; position: relative; border-radius: 5px; padding: 30px 30px 26px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd7a; box-shadow: 0px 0px 20px 0px #dddddd7a; z-index: 1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; overflow: hidden; background-color: #fff; } .service-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .service-item:hover:before { height: 100%; opacity: 1; } .service-item:hover i { color: #fff; } .service-item:hover i:after { background-color: #fff; } .service-item:hover h3 a { color: #fff; } .service-item:hover p { color: #fff; } .service-item:hover .img-one { bottom: 0; opacity: 0; } .service-item:hover .img-two { opacity: 1; } .service-item:before { position: absolute; content: ''; width: 100%; height: 0%; bottom: 0; left: 0; background-color: #2948ff; border-radius: 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; z-index: -1; opacity: 0; } .service-item i { color: #2948ff; font-size: 50px; line-height: 50px; margin-bottom: 15px; display: inline-block; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: relative; padding-bottom: 18px; } .service-item i:after { position: absolute; content: ''; width: 50px; height: 1px; bottom: 0; left: 0; background-color: #2948ff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item h3 { font-size: 20px; margin-bottom: 12px; } .service-item h3 a { color: #221668; } .service-item h3 a:hover { letter-spacing: 1px; } .service-item p { color: #565353; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; margin-bottom: 0; } .service-item .img-one { bottom: -100px; right: 0; position: absolute; z-index: -1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item .img-two { bottom: -145px; right: 0; opacity: 0; position: absolute; z-index: -1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } /*-- End Service --*/ /*-- About --*/ .about-area .about-content ul { padding: 0; margin: 0; } .about-area .about-content ul li { list-style-type: none; display: block; position: relative; padding-left: 45px; margin-bottom: 30px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .about-area .about-content ul li:hover { margin-left: 5px; } .about-area .about-content ul li:last-child { margin-bottom: 0; } .about-area .about-content ul li i { position: absolute; top: 0; left: 0; color: #2948ff; font-size: 25px; line-height: 32px; } .about-area .about-content ul li h4 { font-size: 20px; color: #221668; margin-bottom: 5px; } .about-area .about-content ul li p { margin-bottom: 0; } .about-area .about-img { position: relative; } .about-area .about-img img:nth-child(1) { position: relative; z-index: 1; } .about-area .about-img img:nth-child(2) { position: absolute; left: -50px; bottom: 50px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .about-area .about-img img:nth-child(3) { position: absolute; right: 45px; top: 20px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .about-area .about-img img:nth-child(4) { position: absolute; left: 3px; bottom: 5px; max-width: 300px; } @-webkit-keyframes about-ani-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes about-ani-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .video-wrap { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 2; } .video-wrap a { z-index: 10; display: block; width: 100px; height: 100px; line-height: 110px; border-radius: 50%; position: relative; font-size: 60px; text-align: center; color: #2948ff; } .video-wrap a:before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; z-index: -1; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .video-wrap a:after { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; z-index: -1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .video-wrap a:hover { color: #fff; } .video-wrap a:hover:before { background-color: #2948ff; } .video-wrap a:hover:after { background-color: #2948ff; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*-- End About --*/ /*-- Inquiry --*/ .inquiry-area { background-color: #2948ff; position: relative; overflow: hidden; } .inquiry-area .inquiry-shape img { position: absolute; } .inquiry-area .inquiry-shape img:nth-child(1) { top: -235px; left: 0; } .inquiry-area .inquiry-shape img:nth-child(2) { bottom: 0; left: 0; } .inquiry-area .inquiry-shape img:nth-child(3) { top: 0; right: 0; } .inquiry-area .inquiry-shape img:nth-child(4) { bottom: 0; right: 0; } .inquiry-area .inquiry-shape img:nth-child(5) { top: 65px; right: 70px; -webkit-animation: inquiry-ani-one 5s infinite linear; animation: inquiry-ani-one 5s infinite linear; } .inquiry-area .inquiry-img img { position: relative; bottom: 0; z-index: 1; } .inquiry-area .inquiry-content { padding-top: 60px; padding-bottom: 60px; position: relative; z-index: 1; } .inquiry-area .inquiry-content .section-title .sub-title { color: #fff; } .inquiry-area .inquiry-content .section-title h2 { color: #fff; font-size: 40px; } .inquiry-area .inquiry-content .cmn-btn { color: #2948ff; background-color: #fff; } .inquiry-area .inquiry-content .cmn-btn:hover { color: #fff; } @-webkit-keyframes inquiry-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes inquiry-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /*-- End Inquiry --*/ /*-- Feature --*/ .feature-area .section-title { text-align: center; } .feature-area .section-title h2 { margin-bottom: 3px; } .feature-area .section-title p { margin-bottom: 0; max-width: 650px; margin-left: auto; margin-right: auto; } .feature-area .feature-img { margin-bottom: 30px; text-align: center; } .feature-area .feature-img img { -webkit-animation: feature-ani-one 4s infinite linear; animation: feature-ani-one 4s infinite linear; } .feature-area .feature-content { margin-bottom: 30px; } .feature-area .feature-content .feature-top { margin-bottom: 30px; } .feature-area .feature-content .feature-top span { display: inline-block; width: 55px; height: 55px; line-height: 55px; color: #2948ff; border: 1px dashed #2948ff; text-align: center; border-radius: 50%; font-size: 17px; margin-bottom: 18px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd7a; box-shadow: 0px 0px 20px 0px #dddddd7a; } .feature-area .feature-content .feature-top h2 { margin-bottom: 15px; font-size: 35px; } .feature-area .feature-content .feature-top p { margin-bottom: 0; } .feature-area .feature-content .feature-inner { margin-bottom: 30px; } .feature-area .feature-content .feature-inner i { display: inline-block; color: #2948ff; font-size: 35px; margin-bottom: 12px; line-height: 35px; } .feature-area .feature-content .feature-inner h3 { font-size: 20px; margin-bottom: 8px; color: #221668; } .feature-area .feature-content .feature-inner p { margin-bottom: 0; } @-webkit-keyframes feature-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -15px); transform: translate(0, -15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes feature-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -15px); transform: translate(0, -15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /*-- End Feature --*/ /*-- Counter --*/ .counter-area { text-align: center; background-color: #eef4ff; position: relative; overflow: hidden; } .counter-area .counter-shape { position: absolute; top: 0; right: 0; } .counter-area .counter-shape img { z-index: -1; } .counter-area h2 { font-size: 35px; margin-bottom: 50px; max-width: 565px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; margin-top: -10px; } .counter-area h2 span { color: #2948ff; } .counter-area .counter-item { margin-bottom: 30px; position: relative; z-index: 1; } .counter-area .counter-item img { position: absolute; top: 45px; right: -45px; -webkit-animation: counter-rotate-ani 10s infinite linear; animation: counter-rotate-ani 10s infinite linear; } .counter-area .counter-item h3 { color: #2948ff; font-size: 60px; margin-bottom: 5px; } .counter-area .counter-item h3 .target { font-size: 30px; margin-left: -10px; } .counter-area .counter-item p { margin-bottom: 0; } @-webkit-keyframes counter-rotate-ani { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes counter-rotate-ani { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } /*-- End Counter --*/ /*-- Application --*/ .application-area { position: relative; } .application-area .application-shape img { position: absolute; z-index: -1; } .application-area .application-shape img:nth-child(1) { top: 100px; right: 0; max-width: 495px; } .application-area .application-shape img:nth-child(2) { top: 160px; right: 55px; z-index: 1; max-width: 140px; } .application-area .application-content { max-width: 745px; margin-left: auto; } .application-area .application-content .section-title { margin-bottom: 30px; } .application-area .application-content ul { margin: 0; padding: 0; margin-bottom: 40px; } .application-area .application-content ul li { list-style-type: none; display: block; margin-bottom: 12px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .application-area .application-content ul li:hover { padding-left: 5px; } .application-area .application-content ul li:last-child { margin-bottom: 0; } .application-area .application-content ul li i { display: inline-block; color: #2948ff; font-size: 22px; margin-right: 6px; position: relative; top: 3px; } .application-area .application-img img { -webkit-animation: feature-ani-one 4s infinite linear; animation: feature-ani-one 4s infinite linear; -webkit-box-shadow: 0px 0px 25px 0px #dddddd63; box-shadow: 0px 0px 25px 0px #dddddd63; border-radius: 15px 0 0 15px; } /*-- End Application --*/ /*-- Pricing --*/ .pricing-area { text-align: center; position: relative; } .pricing-area .pricing-shape { position: absolute; top: 0; left: 0; z-index: -1; } .pricing-area .section-title { text-align: center; margin-bottom: 15px; } .pricing-area .nav-pills { text-align: center; border-radius: 30px; display: inline-block; margin-bottom: 40px; } .pricing-area .nav-pills li { display: inline-block; margin-left: 3px; margin-right: 3px; } .pricing-area .nav-pills li a { display: block; color: #2948ff; padding: 0; padding: 12px 25px 12px; background-color: #d4daff; border-radius: 30px; } .pricing-area .nav-pills li a i { display: inline-block; font-size: 16px; position: relative; top: 1px; } .pricing-area .nav-pills .nav-link.active, .pricing-area .nav-pills .show > .nav-link { background-color: #2948ff; } .pricing-item { margin-bottom: 30px; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd52; box-shadow: 0px 0px 20px 0px #dddddd52; text-align: center; } .pricing-item.two .middle { background-color: #2948ff; } .pricing-item.two .middle h3 { color: #fff; } .pricing-item .top span { display: block; font-size: 30px; font-weight: 700; font-family: "Quicksand", sans-serif; padding-top: 15px; padding-bottom: 15px; color: #221668; } .pricing-item .top span i { font-size: 26px; position: relative; top: 1px; color: #2948ff; } .pricing-item .middle { background-color: #d3d9fd; padding-top: 16px; padding-bottom: 20px; } .pricing-item .middle h3 { margin-bottom: 0; font-size: 50px; color: #2948ff; } .pricing-item .middle h3 span { font-size: 25px; } .pricing-item .middle h3 span:nth-child(1) { margin-right: -5px; } .pricing-item .end { padding: 30px 35px 30px; text-align: left; } .pricing-item .end ul { margin: 0; padding: 0; } .pricing-item .end ul li { list-style-type: none; display: block; margin-bottom: 10px; font-size: 17px; } .pricing-item .end ul li:hover i.two { background-color: #2948ff; } .pricing-item .end ul li:last-child { margin-bottom: 0; } .pricing-item .end ul li i { display: inline-block; color: #2948ff; margin-right: 3px; } .pricing-item .end ul li i.two { width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; color: #fff; background-color: #b6b6b6; margin-right: 0; font-size: 8px; margin-left: 3px; position: relative; top: -2px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .pricing-item .end .cmn-btn { margin-top: 30px; } /*-- End Pricing --*/ /*-- Feedback --*/ .feedback-area { background-color: #eef4ff; } .feedback-area .col-lg-5 { position: relative; } .feedback-area .section-title { text-align: center; } .feedback-area .section-title h2 { margin-bottom: 5px; } .feedback-area .section-title p { max-width: 500px; margin-left: auto; margin-right: auto; } .feedback-area .feedback-content i { display: inline-block; color: #252525; font-size: 45px; margin-bottom: 10px; } .feedback-area .feedback-content p { font-size: 22px; color: #64607c; margin-bottom: 18px; line-height: 35px; } .feedback-area .feedback-content h3 { margin-bottom: 3px; font-size: 20px; } .feedback-area .feedback-content span { display: block; } .feedback-area #thumbs { position: absolute; bottom: 0; left: 0; right: 0; max-width: 350px; margin-left: auto; margin-right: auto; } .feedback-area #thumbs .item img { border-radius: 50%; width: 80px; height: 80px; margin-left: auto; margin-right: auto; border: 5px solid #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd52; box-shadow: 0px 0px 20px 0px #dddddd52; cursor: pointer; } .feedback-area .owl-prev { position: absolute; left: -30px; bottom: 20px; color: #fff !important; font-size: 30px !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; z-index: 1; } .feedback-area .owl-prev:after { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 5px; right: 7px; background-color: #2948ff; z-index: -1; } .feedback-area .owl-prev:hover { color: #252525 !important; background-color: transparent !important; } .feedback-area .owl-next { position: absolute; right: -30px; bottom: 20px; color: #fff !important; font-size: 30px !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; z-index: 1; } .feedback-area .owl-next:after { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 5px; left: 7px; background-color: #2948ff; z-index: -1; } .feedback-area .owl-next:hover { color: #252525 !important; background-color: transparent !important; } .feedback-area .outer { position: relative; } .feedback-area .outer .shape { position: absolute; bottom: -100px; left: 28px; } /*-- End Feedback --*/ /*-- Partner --*/ .partner-area { padding-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #eaeaea; } .partner-area .partner-item { text-align: center; } .partner-area .partner-item:hover img { -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } .partner-area .partner-item img { margin-left: auto; margin-right: auto; height: 45px; width: 165px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .partner-area .partner-item .partner-item-logo2 { display: none !important; } /*-- End Partner --*/ /*-- FAQ --*/ .faq-area .section-title { text-align: center; margin-top: -12px; } .faq-area .section-title h2 span { color: #2948ff; } .faq-area .faq-content { margin-bottom: 30px; } .faq-area .faq-content .accordion { margin: 0; padding: 0; margin-bottom: 30px; } .faq-area .faq-content .accordion p { display: none; padding: 20px 25px 20px; margin-bottom: 0; } .faq-area .faq-content .accordion li { position: relative; list-style-type: none; margin-bottom: 20px; display: block; -webkit-box-shadow: 0px 0px 30px 0px #dddddd42; box-shadow: 0px 0px 30px 0px #dddddd42; border-radius: 5px; } .faq-area .faq-content .accordion li:first-child { border-top: 0; } .faq-area .faq-content .accordion li:last-child { margin-bottom: 0; } .faq-area .faq-content .accordion li a { width: 100%; display: block; cursor: pointer; font-size: 18px; font-weight: 500; font-family: "Quicksand", sans-serif; color: #221668; padding: 13px 20px 13px; border-radius: 5px; } .faq-area .faq-content .accordion li a.active { color: #fff; background-color: #2948ff; } .faq-area .faq-content .accordion li a.active i { color: #fff; opacity: 0; } .faq-area .faq-content .accordion li a.active i.two { opacity: 1; } .faq-area .faq-content .accordion li a i { position: absolute; top: 10px; right: 20px; color: #7a7a7a; display: inline-block; font-size: 22px; opacity: 1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .faq-area .faq-content .accordion li a i.two { opacity: 0; } .faq-area .faq-img { margin-bottom: 30px; } .faq-area .faq-img img { -webkit-animation: feature-ani-one 4s infinite linear; animation: feature-ani-one 4s infinite linear; } /*-- End FAQ --*/ /*-- Mind --*/ .mind-area { background-color: #eef4ff; padding-top: 50px; padding-bottom: 50px; background-image: url("../img/sass/counter-bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .mind-area .mind-left h2 { margin-bottom: 0; font-size: 35px; color: #252525; } .mind-area .mind-right { text-align: right; } /*-- End Mind --*/ /*-- Footer --*/ footer { background-color: #222131; background-image: url("../img/sass/footer-shape.png"); background-size: cover; background-position: center left; background-repeat: no-repeat; } .footer-item { margin-bottom: 30px; } .footer-item h3 { font-size: 20px; color: #fff; margin-bottom: 30px; } .footer-item .footer-logo a { display: block; margin-bottom: 18px; } .footer-item .footer-logo p { color: #d8d8d8; margin-bottom: 0; font-size: 15px; } .footer-item .footer-links ul { margin: 0; padding: 0; } .footer-item .footer-links ul li { list-style-type: none; display: block; margin-bottom: 10px; } .footer-item .footer-links ul li:last-child { margin-bottom: 0; } .footer-item .footer-links ul li a { display: block; color: #d8d8d8; font-size: 15px; } .footer-item .footer-links ul li a:hover { letter-spacing: 1px; } .footer-item .footer-address ul { margin: 0; padding: 0; } .footer-item .footer-address ul li { list-style-type: none; display: block; font-size: 15px; color: #d8d8d8; margin-bottom: 10px; } .footer-item .footer-address ul li:last-child { margin-bottom: 0; } .footer-item .footer-address ul li span { display: inline-block; color: #fff; } .footer-item .footer-address ul li a { display: inline-block; color: #d8d8d8; } .footer-item .footer-address ul li a:hover { letter-spacing: 1px; } /*-- End Footer --*/ /*-- Copyright --*/ .copyright-area { background-color: #302f3e; padding-top: 20px; padding-bottom: 20px; } .copyright-area .copyright-item p { margin-bottom: 0; font-size: 15px; color: #d8d8d8; } .copyright-area .copyright-item p a { display: inline-block; font-weight: 500; color: #fff; border-bottom: 1px solid #fff; } .copyright-area .copyright-item p a:hover { color: #d8d8d8; border-bottom: 1px solid #d8d8d8; } .copyright-area .copyright-item ul { margin: 0; padding: 0; text-align: right; } .copyright-area .copyright-item ul li { list-style-type: none; display: inline-block; margin-right: 5px; } .copyright-area .copyright-item ul li:nth-child(2) a { background-color: #55acee; } .copyright-area .copyright-item ul li:nth-child(3) a { background-color: #3f729b; } .copyright-area .copyright-item ul li:nth-child(4) a { background-color: #ff0000; } .copyright-area .copyright-item ul li:nth-child(5) { margin-bottom: 0; } .copyright-area .copyright-item ul li:nth-child(5) a { background-color: #c80000; } .copyright-area .copyright-item ul li a { display: block; width: 30px; height: 30px; border-radius: 50%; text-align: center; color: #fff; background-color: #3b5998; font-size: 16px; } .copyright-area .copyright-item ul li a i { line-height: 30px; } .copyright-area .copyright-item ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } /*-- End Copyright --*/ /*----- End Sass CSS -----*/ /*----- IT Startup CSS -----*/ /*-- Navbar --*/ .main-nav.two nav .navbar-nav .nav-item a { color: #fff; position: relative; } .main-nav.two nav .navbar-nav .nav-item a:before { position: absolute; content: ''; width: 0; height: 2px; margin-left: auto; left: 0; bottom: -7px; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav.two nav .navbar-nav .nav-item a:hover, .main-nav.two nav .navbar-nav .nav-item a:focus, .main-nav.two nav .navbar-nav .nav-item a.active { color: #fff; } .main-nav.two nav .navbar-nav .nav-item a:hover:before, .main-nav.two nav .navbar-nav .nav-item a:focus:before, .main-nav.two nav .navbar-nav .nav-item a.active:before { width: 20px; opacity: 1; visibility: visible; } .main-nav.two nav .navbar-nav .nav-item .dropdown-menu { -webkit-box-shadow: none; box-shadow: none; } .main-nav.two nav .navbar-nav .nav-item .dropdown-menu li a:before { display: none; } .main-nav.two .side-nav .left-btn { color: #fff; background-color: transparent; border: 1px solid #fff; } .main-nav.two .side-nav .left-btn:before { background-color: #fff; } .main-nav.two .side-nav .left-btn:after { background-color: #fff; } .main-nav.two .side-nav .left-btn:hover { color: #2948ff; } .main-nav.two .side-nav .cmn-btn { color: #2948ff; border: 1px solid #fff; background-color: #fff; } .main-nav.two .side-nav .cmn-btn:hover { border: 1px solid #252525; color: #fff; } .main-nav.two.menu-shrink { background-color: #2948ff; } /*-- End Navbar --*/ /*-- Banner --*/ .banner-area.two { background-color: #2948ff; } .banner-area.two .banner-content { margin-top: 50px; position: relative; z-index: 1; max-width: 745px; } .banner-area.two .banner-content span { color: #fff; } .banner-area.two .banner-content h1 { color: #fff; font-size: 80px; margin-bottom: 10px; } .banner-area.two .banner-content p { color: #fff; margin-bottom: 28px; } .banner-area.two .banner-content .cmn-btn { color: #2948ff; background-color: #fff; } .banner-area.two .banner-content .cmn-btn:hover { color: #fff; } .banner-area.two .banner-shape-two img { position: absolute; right: 55px; bottom: 0; max-width: 680px; z-index: 1; } .banner-area.two .banner-shape-two span { display: block; color: #2542f0; font-size: 285px; position: absolute; top: -365px; left: 75px; line-height: 340px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); font-weight: 700; } /*-- End Banner CSS --*/ /*-- Services --*/ .section-title.two .sub-title { letter-spacing: 5px; } .section-title.two h2 { font-size: 40px; } .service-area .section-title.two { text-align: center; } .service-area .section-title.two h2 { max-width: 500px; margin-left: auto; margin-right: auto; } .service-item-two { margin-bottom: 30px; text-align: center; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; padding-left: 5px; padding-right: 5px; } .service-item-two:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .service-item-two:hover .service-link { color: #2948ff; } .service-item-two:hover .service-link i { -webkit-animation: cmn-rotate-ani 0.8s infinite linear; animation: cmn-rotate-ani 0.8s infinite linear; } .service-item-two img { margin-bottom: 20px; width: 215px; height: 155px; } .service-item-two h3 { margin-bottom: 12px; font-size: 20px; } .service-item-two h3 a { color: #221668; display: block; } .service-item-two h3 a:hover { color: #2948ff; } .service-item-two p { margin-bottom: 10px; } .service-item-two .service-link { display: inline-block; color: #60578f; } .service-item-two .service-link:hover { color: #2948ff; } .service-item-two .service-link i { display: inline-block; position: relative; top: 2px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; -webkit-animation: unset; animation: unset; } /*-- End Services --*/ /*-- Design --*/ .design-area .design-content { margin-bottom: 30px; } .design-area .design-content .section-title.two { margin-bottom: 25px; } .design-area .design-content .section-title.two h2 { margin-bottom: 3px; } .design-area .design-content .section-title.two p { margin-bottom: 0; } .design-area .design-content ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .design-area .design-content ul li { list-style-type: none; display: block; font-weight: 400; color: #221668; font-size: 18px; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; margin-bottom: 10px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .design-area .design-content ul li:hover { padding-left: 10px; } .design-area .design-content ul li i { display: inline-block; font-size: 20px; position: relative; top: 1px; margin-right: 5px; } .design-area .design-content .cmn-btn { margin-top: 25px; } .design-area .design-img { margin-bottom: 30px; } .design-area .design-img img { border-radius: 5px; width: 100%; } /*-- End Design --*/ /*-- Counter --*/ .counter-area.two { padding-bottom: 300px; } /*-- End Counter --*/ /*-- Video --*/ .video-area { margin-top: -230px; } .video-area .video-img { position: relative; } .video-area .video-img .video-main img { border-radius: 5px; z-index: 1; position: relative; } .video-area .video-img .video-main a { display: inline-block; height: 70px; width: 145px; border-radius: 20px; color: #fff; background-color: #ff0800; font-size: 55px; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 2; } .video-area .video-img .video-main a i { line-height: 70px; } .video-area .video-img .video-main a:hover { background-color: #d40801; } .video-area .video-img .video-shape img { position: absolute; } .video-area .video-img .video-shape img:nth-child(1) { top: -25px; left: 0; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .video-area .video-img .video-shape img:nth-child(2) { bottom: -50px; right: 0; -webkit-animation: counter-rotate-ani 10s infinite linear; animation: counter-rotate-ani 10s infinite linear; } /*-- End Video --*/ /*-- Feature --*/ .feature-item { text-align: center; margin-bottom: 30px; background-color: #f6f6f6; border-radius: 5px; padding: 30px 35px 28px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .feature-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd45; box-shadow: 0px 0px 20px 0px #dddddd45; } .feature-item:hover a { color: #2948ff; } .feature-item:hover a i { -webkit-animation: cmn-rotate-ani 0.8s infinite linear; animation: cmn-rotate-ani 0.8s infinite linear; } .feature-item .icon { color: #2948ff; display: inline-block; font-size: 55px; line-height: 55px; margin-bottom: 18px; } .feature-item h3 { font-size: 22px; margin-bottom: 10px; } .feature-item h3 a { color: #221668; } .feature-item h3 a:hover { color: #2948ff; } .feature-item p { margin-bottom: 12px; } .feature-item a { display: inline-block; color: #60578f; } .feature-item a i { font-size: 16px; position: relative; top: 2px; display: inline-block; -webkit-animation: unset; animation: unset; } /*-- End Feature --*/ /*-- Clients --*/ .client-area { background-color: #2948ff; position: relative; } .client-area h2 { margin-bottom: 25px; font-weight: 500; font-size: 40px; color: #fff; margin-top: -10px; } .client-area .client-item p { color: #fff; margin-bottom: 15px; } .client-area .client-item h3 { font-size: 20px; margin-bottom: 3px; color: #fff; } .client-area .client-item span { display: block; color: #dde2ff; font-size: 15px; } .client-area .client-slider { max-width: 480px; } .client-area .owl-theme .owl-nav { margin-top: 0; position: absolute; bottom: 10px; right: 60px; } .client-area .owl-prev { color: #2948ff !important; font-size: 25px !important; position: relative; z-index: 1; margin-right: 10px !important; } .client-area .owl-prev:before { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 0; left: 0; background-color: #fff; z-index: -1; } .client-area .owl-prev i { line-height: 25px; position: relative; top: -1px; right: -11px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .client-area .owl-prev:hover { background-color: transparent !important; } .client-area .owl-prev:hover i { right: 0; } .client-area .owl-next { color: #2948ff !important; font-size: 25px !important; position: relative; z-index: 1; margin-left: 10px !important; } .client-area .owl-next:before { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 0; right: 0; background-color: #fff; z-index: -1; } .client-area .owl-next i { line-height: 25px; position: relative; top: -1px; left: -11px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .client-area .owl-next:hover { background-color: transparent !important; } .client-area .owl-next:hover i { left: 0; } .client-area .client-img { position: absolute; top: -21px; right: 0; left: 0; max-width: 1130px; margin: 0 auto; text-align: right; } .client-area .client-img img { max-width: 445px; } /*-- End Clients --*/ /*-- Team --*/ .team-area { background-color: #eef4ff; padding-top: 120px; } .team-area .section-title.two { margin-bottom: 30px; } .team-area .section-title.two h2 { margin-bottom: 20px; } .team-area .team-content { margin-bottom: 30px; position: relative; } .team-area .team-content img { position: absolute; bottom: -100px; right: 40px; max-width: 140px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .team-area .team-item { margin-bottom: 30px; position: relative; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; overflow: hidden; } .team-area .team-item.two { margin-top: -20px; } .team-area .team-item:before { position: absolute; content: ''; width: 100%; height: 100%; left: 0; bottom: -15px; background: -webkit-gradient(linear, left bottom, left top, color-stop(23%, rgba(41, 72, 255, 0.724272)), color-stop(66%, rgba(255, 255, 255, 0))); background: linear-gradient(0deg, rgba(41, 72, 255, 0.724272) 23%, rgba(255, 255, 255, 0) 66%); border-radius: 0 0 5px 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; opacity: 0; } .team-area .team-item:hover:before { bottom: 0; opacity: 1; } .team-area .team-item:hover .team-bottom { padding-bottom: 15px; opacity: 1; visibility: visible; } .team-area .team-item img { border-radius: 5px; } .team-area .team-item .team-bottom { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; opacity: 0; visibility: hidden; z-index: 1; } .team-area .team-item .team-bottom h3 { font-size: 22px; color: #fff; margin-bottom: 3px; } .team-area .team-item .team-bottom span { color: #fff; font-size: 15px; display: block; margin-bottom: 5px; } .team-area .team-item .team-bottom ul { margin: 0; padding: 0; } .team-area .team-item .team-bottom ul li { list-style-type: none; display: inline-block; margin-left: 3px; margin-right: 3px; } .team-area .team-item .team-bottom ul li a { display: block; color: #fff; font-size: 16px; } .team-area .team-item .team-bottom ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } /*-- End Team --*/ /*-- Blog --*/ .blog-area .section-title.two { text-align: center; margin-top: -12px; } .blog-item { -webkit-box-shadow: 0px 0px 20px 0px #dddddd6b; box-shadow: 0px 0px 20px 0px #dddddd6b; border-radius: 5px; padding: 30px 30px 32px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; margin-bottom: 30px; } .blog-item.blog-img-one { background-image: url("../img/it-startup/blog-bg.jpg"); } .blog-item.blog-img-two { background-image: url("../img/it-startup/blog-bg2.jpg"); } .blog-item.blog-img-three { background-image: url("../img/it-startup/blog-bg3.jpg"); } .blog-item.blog-img-four { background-image: url("../img/it-startup/blog-bg4.jpg"); } .blog-item.blog-img-five { background-image: url("../img/it-startup/blog-bg5.jpg"); } .blog-item.blog-img-six { background-image: url("../img/it-startup/blog-bg6.jpg"); } .blog-item:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; border-radius: 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; z-index: 1; } .blog-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .blog-item:hover .top li { color: #fff; } .blog-item:hover .top li:before { background-color: #fff; } .blog-item:hover h3 a { color: #fff; } .blog-item:hover p { color: #fff; } .blog-item:hover .bottom li img { -webkit-box-shadow: unset; box-shadow: unset; } .blog-item:hover:before { opacity: .50; background-color: #221668; } .blog-item:hover .bottom li span { color: #fff; } .blog-item:hover .bottom li a { color: #fff; } .blog-item .top { margin: 0; padding: 0; margin-bottom: 10px; z-index: 1; position: relative; } .blog-item .top li { list-style-type: none; display: inline-block; color: #221668; font-size: 15px; margin-right: 12px; position: relative; padding-left: 12px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item .top li:before { position: absolute; content: ''; width: 5px; height: 5px; left: 0; top: 8px; border-radius: 50%; background-color: #221668; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item h3 { font-size: 22px; margin-bottom: 8px; z-index: 1; position: relative; } .blog-item h3 a { color: #221668; } .blog-item h3 a:hover { letter-spacing: 1px; } .blog-item p { margin-bottom: 30px; z-index: 1; position: relative; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item .bottom { margin: 0; padding: 0; z-index: 1; position: relative; } .blog-item .bottom li { list-style-type: none; display: inline-block; font-size: 15px; } .blog-item .bottom li img { border-radius: 50%; border: 5px solid #fff; -webkit-box-shadow: 0px 0px 20px 0px #ddddddab; box-shadow: 0px 0px 20px 0px #ddddddab; margin-right: 10px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item .bottom li span { display: inline-block; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item .bottom li a { display: inline-block; color: #252525; } .blog-item .bottom li a:hover { letter-spacing: 1px; } /*-- End Blog --*/ /*-- Subscribe --*/ .subscribe-area { background-image: url("../img/it-startup/subscribe-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; } .subscribe-area:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #222131; opacity: .60; } .subscribe-area .subscribe-item { max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; position: relative; } .subscribe-area .subscribe-item .section-title.two { text-align: center; margin-top: -12px; } .subscribe-area .subscribe-item .section-title.two h2 { color: #fff; margin-bottom: 5px; } .subscribe-area .subscribe-item .section-title.two p { margin-bottom: 0; color: #fff; } .subscribe-area .subscribe-item .newsletter-form { position: relative; } .subscribe-area .subscribe-item .newsletter-form .form-control { height: 55px; border-radius: 30px; padding-left: 25px; font-size: 15px; border: 0; } .subscribe-area .subscribe-item .newsletter-form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 0; } .subscribe-area .subscribe-item .newsletter-form ::-webkit-input-placeholder { color: #7e76a6; } .subscribe-area .subscribe-item .newsletter-form :-ms-input-placeholder { color: #7e76a6; } .subscribe-area .subscribe-item .newsletter-form ::-ms-input-placeholder { color: #7e76a6; } .subscribe-area .subscribe-item .newsletter-form ::placeholder { color: #7e76a6; } .subscribe-area .subscribe-item .newsletter-form .cmn-btn { position: absolute; top: 0; right: 0; opacity: 1; border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; height: 55px; padding-top: 0; padding-bottom: 0; line-height: 55px; } .subscribe-area .subscribe-item .newsletter-form .validation-danger { color: #fff; margin-top: 10px; } .subscribe-area .subscribe-item .newsletter-form .validation-success { color: #fff; margin-top: 10px; } /*-- End Subscribe --*/ /*----- End IT Startup CSS -----*/ /*----- Digital CSS -----*/ /*-- Banner --*/ .banner-area.three { height: 940px; } .banner-area.three .banner-shape img:nth-child(1) { display: none; } .banner-area.three .banner-img { position: relative; } .banner-area.three .banner-img img { position: absolute; } .banner-area.three .banner-img img:nth-child(1) { width: 100%; position: relative; z-index: 1; } .banner-area.three .banner-img img:nth-child(2) { top: 0; left: -70px; max-width: 75px; } .banner-area.three .banner-img img:nth-child(3) { top: 65px; left: -70px; max-width: 75px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .banner-area.three .banner-img img:nth-child(4) { top: 50%; left: -30px; -webkit-animation: counter-rotate-ani 10s infinite linear; animation: counter-rotate-ani 10s infinite linear; } .banner-area.three .banner-img img:nth-child(5) { bottom: -55px; left: 0; max-width: 125px; } .banner-area.three .banner-img img:nth-child(6) { bottom: -60px; left: 130px; max-width: 62px; -webkit-animation: counter-rotate-ani 10s infinite linear; animation: counter-rotate-ani 10s infinite linear; } .banner-area.three .banner-img img:nth-child(7) { bottom: -60px; left: 200px; max-width: 62px; } .banner-area.three .banner-img img:nth-child(8) { top: 0; right: -56px; max-width: 57px; -webkit-animation: feature-ani-one 4s infinite linear; animation: feature-ani-one 4s infinite linear; } .banner-area.three .banner-content { margin-top: 80px; } .banner-area.three .banner-content span { color: #2948ff; background-color: #d9e3ff; padding: 8px 25px; border-radius: 30px; font-size: 16px; display: inline-block; } .banner-area.three .banner-content h1 { font-weight: 700; } .banner-area.three .banner-content h1 span { color: #2948ff; background-color: transparent; padding: 0; border-radius: 0; font-size: unset; display: inline-block; } .banner-area.three .banner-content p { font-size: 18px; } .banner-area.three .banner-contact { border-top: 1px solid #e9e9e9; padding-top: 25px; margin-top: 80px; margin-right: 40px; } .banner-area.three .banner-contact ul { margin: 0; padding: 0; } .banner-area.three .banner-contact ul li { list-style-type: none; display: inline-block; position: relative; padding-left: 55px; margin-right: 60px; } .banner-area.three .banner-contact ul li:last-child { margin-right: 0; } .banner-area.three .banner-contact ul li i { position: absolute; top: 15px; left: 0; color: #2948ff; font-size: 25px; display: inline-block; z-index: 1; font-weight: 700; } .banner-area.three .banner-contact ul li i:after { position: absolute; content: ''; width: 35px; height: 35px; border-radius: 50%; top: -12px; left: 0; background-color: #ced0fa; z-index: -1; } .banner-area.three .banner-contact ul li span { display: block; margin-bottom: 3px; } .banner-area.three .banner-contact ul li a { display: block; color: #221668; font-weight: 500; font-size: 18px; } .banner-area.three .banner-contact ul li a:hover { color: #252525; } /*-- End Banner --*/ /*-- Service --*/ .service-area .section-title.three { text-align: center; } .service-area .section-title.three h2 { max-width: 600px; margin-left: auto; margin-right: auto; } .service-item-three { margin-bottom: 30px; border-radius: 5px; background-color: #ffdbde; padding: 30px 30px 55px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item-three:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .service-item-three:hover .service-link img { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .service-item-three.two { background-color: #2948ff; } .service-item-three.two h3 a { color: #fff; } .service-item-three.two h3 a:hover { color: #d6fff0; } .service-item-three.two p { color: #fff; } .service-item-three.two .service-link:hover a { color: #d6fff0; } .service-item-three.two .service-link a { color: #fff; } .service-item-three.three { background-color: #d6fff0; } .service-item-three h3 { font-size: 20px; margin-bottom: 10px; } .service-item-three h3 a { color: #2a284f; } .service-item-three h3 a:hover { color: #2948ff; } .service-item-three p { margin-bottom: 18px; } .service-item-three .service-link { position: relative; } .service-item-three .service-link img { position: absolute; top: 0; left: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item-three .service-link a { display: inline-block; color: #252525; font-size: 30px; position: relative; z-index: 1; top: 20px; left: 25px; font-weight: 700; } .service-item-three .service-link a:hover { color: #2948ff; } .section-title.three .sub-title { background-color: #d9e3ff; border-radius: 30px; padding: 5px 15px; display: inline-block; margin-bottom: 8px; } .section-title.three h2 { font-size: 40px; color: #2a284f; } /*-- End Service --*/ /*-- About --*/ .about-area-two { position: relative; } .about-area-two .about-shape img { position: absolute; z-index: -1; } .about-area-two .about-shape img:nth-child(1) { top: 0; right: 250px; -webkit-animation: about-ani-two 18s infinite linear; animation: about-ani-two 18s infinite linear; } .about-area-two .about-shape img:nth-child(2) { top: 230px; right: 135px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .about-area-two .about-shape img:nth-child(3) { top: 15px; right: 25px; z-index: -2; } .about-area-two .about-img { margin-bottom: 30px; } .about-area-two .about-content { margin-bottom: 30px; padding-left: 30px; max-width: 540px; } .about-area-two .about-content .section-title.three { margin-bottom: 25px; } .about-area-two .about-content .section-title.three h2 { margin-bottom: 3px; } .about-area-two .about-content .section-title.three p { margin-bottom: 0; } .about-area-two .about-content ul { margin: 0; padding: 0; } .about-area-two .about-content ul li { list-style-type: none; display: block; font-weight: 400; color: #221668; font-size: 18px; margin-bottom: 10px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .about-area-two .about-content ul li:hover { padding-left: 10px; } .about-area-two .about-content ul li i { display: inline-block; font-size: 20px; position: relative; top: 1px; margin-right: 5px; } .about-area-two .about-content .cmn-btn { margin-top: 25px; } @-webkit-keyframes about-ani-two { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes about-ani-two { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /*-- End About --*/ /*-- Watch --*/ .watch-area { position: relative; } .watch-area:before { position: absolute; content: ''; width: 100%; height: 50%; bottom: 0; left: 0; background-color: #2a284e; } .watch-area .container-fluid { padding-left: 60px; padding-right: 60px; } .watch-area .watch-item { position: relative; background-image: url("../img/digital/watch-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 10px; text-align: center; } .watch-area .watch-item:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .50; border-radius: 10px; } .watch-area .watch-item .watch-inner { position: relative; } .watch-area .watch-item .watch-inner .video-wrap { position: relative; left: 0; top: 0; -webkit-transform: unset; transform: unset; } .watch-area .watch-item .watch-inner .video-wrap a { margin-left: auto; margin-right: auto; } .watch-area .watch-item .watch-inner span { display: block; color: #fff; margin-bottom: 5px; } .watch-area .watch-item .watch-inner h2 { color: #fff; margin-bottom: 35px; max-width: 520px; margin-left: auto; margin-right: auto; font-size: 40px; } /*-- End Watch --*/ /*-- Support --*/ .support-area { background-color: #28274c; padding-top: 55px; padding-bottom: 55px; margin-top: -5px; } .support-area .support-item { text-align: center; } .support-area .support-item h3 { margin-bottom: 40px; color: #fff; font-size: 20px; font-weight: 600; } .support-area .support-item h3 span { font-weight: 700; border-bottom: 1px solid #fff; display: inline-block; } .support-area .support-item .support-inner { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .support-area .support-item .support-inner:hover { -webkit-transform: translate(-10px, 0); transform: translate(-10px, 0); } .support-area .support-item .support-inner img { max-width: 125px; margin-left: auto; margin-right: auto; } /*-- End Support --*/ /*-- Service --*/ .service-area.four .section-title.three { text-align: left; margin-bottom: 35px; } .service-area.four .section-title.three h2 { margin-bottom: 20px; } .service-area.four .section-title.three p { margin-bottom: 0; } .service-area.four .service-content { margin-bottom: 30px; } .service-area.four .service-inner { margin-bottom: 30px; } .service-area.four .service-inner i { color: #221668; display: inline-block; font-size: 45px; line-height: 45px; margin-bottom: 15px; z-index: 1; position: relative; } .service-area.four .service-inner i:after { position: absolute; content: ''; width: 35px; height: 35px; top: -5px; left: -5px; background-color: #ced0fa; z-index: -1; border-radius: 50%; } .service-area.four .service-inner h3 { font-size: 20px; margin-bottom: 10px; } .service-area.four .service-inner h3 a { color: #221668; } .service-area.four .service-inner h3 a:hover { color: #2948ff; } .service-area.four .service-inner p { margin-bottom: 0; padding-right: 30px; } /*-- End Service --*/ /*-- Portfolio --*/ .portfolio-area { background-color: #29274e; } .portfolio-area .section-title.three h2 { color: #fff; max-width: 500px; } .portfolio-area .portfolio-item { margin-bottom: 30px; position: relative; } .portfolio-area .portfolio-item:hover .portfolio-inner { bottom: 15px; opacity: 1; visibility: visible; } .portfolio-area .portfolio-item img { border-radius: 5px; } .portfolio-area .portfolio-item .portfolio-inner { background-color: #fff; border-radius: 5px; padding: 15px 15px 15px; position: absolute; bottom: 0; left: 0; right: 0; margin-left: 15px; margin-right: 15px; opacity: 0; visibility: hidden; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .portfolio-area .portfolio-item .portfolio-inner span { display: block; color: #2948ff; font-size: 15px; } .portfolio-area .portfolio-item .portfolio-inner h3 { font-weight: 500; font-size: 18px; margin-bottom: 0; } .portfolio-area .portfolio-item .portfolio-inner h3 a { color: #2a284f; } .portfolio-area .portfolio-item .portfolio-inner h3 a:hover { color: #2948ff; } .portfolio-area .portfolio-contact { text-align: center; } .portfolio-area .portfolio-contact p { margin-bottom: 0; font-size: 18px; color: #c8c5f3; } .portfolio-area .portfolio-contact p a { display: inline-block; color: #fff; border-bottom: 1px solid #fff; } .portfolio-area .portfolio-contact p a:hover { color: #2948ff; border-bottom: 1px solid #2948ff; } .portfolio-area .owl-prev { width: 50px; height: 50px; border-radius: 50% !important; font-size: 30px !important; color: #7875ab !important; background-color: #494684 !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .portfolio-area .owl-prev i { line-height: 50px; } .portfolio-area .owl-prev:hover { color: #312f55 !important; background-color: #fff !important; } .portfolio-area .owl-next { width: 50px; height: 50px; border-radius: 50% !important; font-size: 30px !important; color: #7875ab !important; background-color: #494684 !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .portfolio-area .owl-next i { line-height: 50px; } .portfolio-area .owl-next:hover { color: #312f55 !important; background-color: #fff !important; } .portfolio-area .owl-theme .owl-nav { margin-top: 0; position: absolute; top: -125px; right: 0; left: 0; max-width: 1130px; margin: 0 auto; text-align: right; } /*-- End Portfolio --*/ /*-- Team --*/ .team-area-two .section-title.three { text-align: center; } .team-area-two .section-title.three h2 { margin-bottom: 3px; } .team-area-two .section-title.three p { max-width: 535px; margin-left: auto; margin-right: auto; margin-bottom: 0; } .team-area-two .team-item { margin-bottom: 30px; border-radius: 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .team-area-two .team-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .team-area-two .team-item .top { position: relative; } .team-area-two .team-item .top img { width: 100%; border-radius: 5px 5px 0 0; } .team-area-two .team-item .top ul { position: absolute; bottom: 15px; right: 15px; margin: 0; padding: 0; background-color: #fff; border-radius: 30px; padding: 7px 15px 3px; margin-right: 50px; display: inline-block; display: none; } .team-area-two .team-item .top ul li { list-style-type: none; display: inline-block; margin-left: 3px; margin-right: 3px; } .team-area-two .team-item .top ul li:nth-child(2) a { color: #1da1f2; } .team-area-two .team-item .top ul li:nth-child(3) a { color: #d43535; } .team-area-two .team-item .top ul li:nth-child(4) a { color: #e42c27; } .team-area-two .team-item .top ul li a { display: block; color: #0c92ff; font-size: 18px; } .team-area-two .team-item .top ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .team-area-two .team-item .top .share-btn { position: absolute; bottom: 15px; right: 15px; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; text-align: center; cursor: pointer; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; color: #2948ff; } .team-area-two .team-item .top .share-btn:hover { color: #fff; background-color: #2948ff; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .team-area-two .team-item .top .share-btn span { display: inline-block; } .team-area-two .team-item .top .share-btn span i { line-height: 40px; } .team-area-two .team-item .bottom { background-color: #ffdbde; border-radius: 0 0 5px 5px; padding: 18px 25px 20px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; } .team-area-two .team-item .bottom h3 { color: #221668; font-size: 20px; margin-bottom: 5px; } .team-area-two .team-item .bottom span { display: block; } .team-area-two .team-item.two .bottom { background-color: #d3fced; } .team-area-two .team-item.three .bottom { background-color: #ffffff; } .team-area-two .team-item.four .bottom { background-color: #fff5c7; } .team-area-two .team-item.five .bottom { background-color: #c7f7ff; } .team-area-two .team-item.six .bottom { background-color: #c7c9ff; } /*-- End Team --*/ /*-- Testimonials --*/ .testimonials-area { background-color: #f7f7f7; background-image: url("../img/digital/testimonials-bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; } .testimonials-area .section-title.three { text-align: center; } .testimonials-area .testimonials-item { text-align: center; max-width: 830px; margin-left: auto; margin-right: auto; } .testimonials-area .testimonials-item p { font-size: 22px; color: #64607c; margin-bottom: 25px; } .testimonials-area .testimonials-item h3 { font-size: 20px; color: #252525; margin-bottom: 5px; } .testimonials-area .testimonials-item span { display: block; font-size: 15px; } .testimonials-area .owl-prev { color: #fff !important; font-size: 25px !important; position: relative; z-index: 1; position: absolute; top: 30px; left: 70px; } .testimonials-area .owl-prev:before { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 0; left: 0; background-color: #2948ff; z-index: -1; } .testimonials-area .owl-prev i { line-height: 25px; position: relative; top: -1px; right: -11px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .testimonials-area .owl-prev:hover { background-color: transparent !important; } .testimonials-area .owl-prev:hover i { right: 0; } .testimonials-area .owl-next { color: #fff !important; font-size: 25px !important; position: relative; z-index: 1; position: absolute; top: 30px; right: 70px; } .testimonials-area .owl-next:before { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; top: 0; right: 0; background-color: #2948ff; z-index: -1; } .testimonials-area .owl-next i { line-height: 25px; position: relative; top: -1px; left: -11px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .testimonials-area .owl-next:hover { background-color: transparent !important; } .testimonials-area .owl-next:hover i { left: 0; } .testimonials-area .testimonials-img img { position: absolute; border-radius: 50%; border: 5px solid #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd4a; box-shadow: 0px 0px 20px 0px #dddddd4a; } .testimonials-area .testimonials-img img:nth-child(1) { top: 50px; left: 185px; max-width: 100px; } .testimonials-area .testimonials-img img:nth-child(2) { top: 200px; left: 50px; max-width: 140px; } .testimonials-area .testimonials-img img:nth-child(3) { bottom: 80px; left: 300px; } .testimonials-area .testimonials-img img:nth-child(4) { top: 50px; right: 185px; max-width: 100px; } .testimonials-area .testimonials-img img:nth-child(5) { top: 200px; right: 50px; max-width: 140px; } .testimonials-area .testimonials-img img:nth-child(6) { bottom: 80px; right: 300px; max-width: 85px; } /*-- End Testimonials --*/ /*-- Blog --*/ .blog-area.two .section-title.three { text-align: center; } /*-- End Blog --*/ /*-- Talk --*/ .talk-area { background-color: #f6f6f6; position: relative; overflow: hidden; } .talk-area .talk-shape img { position: absolute; } .talk-area .talk-shape img:nth-child(1) { top: 100px; right: 100px; -webkit-animation: banner-ani-three 18s infinite linear; animation: banner-ani-three 18s infinite linear; } .talk-area .talk-shape img:nth-child(2) { top: 300px; right: 80px; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .talk-area .talk-img { margin-bottom: 30px; position: relative; } .talk-area .talk-img img:nth-child(1) { position: relative; z-index: 1; } .talk-area .talk-img img:nth-child(2) { top: 0; left: 0; position: absolute; -webkit-animation: about-ani-one 18s infinite linear; animation: about-ani-one 18s infinite linear; } .talk-area .talk-content { margin-bottom: 30px; } .talk-area .talk-content .section-title.three { margin-bottom: 30px; } .talk-area .talk-content .section-title.three h2 { margin-bottom: 25px; } .talk-area .talk-content .section-title.three p { margin-bottom: 0; } /*-- End Talk --*/ /*-- Footer --*/ .footer-area { background-image: unset; position: relative; } .footer-area .footer-shape { position: absolute; top: 0; right: 0; height: 100%; opacity: .20; } .footer-area .footer-shape img { height: 100%; z-index: -1; } /*-- End Footer --*/ /*----- End Digital CSS -----*/ /*----- About CSS -----*/ .page-title-area { height: 430px; text-align: center; background-color: #2948ff; position: relative; overflow: hidden; } .page-title-area .bg-text span { display: block; color: #2542f0; font-size: 260px; position: absolute; top: -75px; left: -188px; line-height: 275px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); font-weight: 700; } .page-title-area .title-item { position: relative; z-index: 1; margin-top: 50px; } .page-title-area .title-item h2 { font-size: 40px; margin-bottom: 5px; color: #fff; } .page-title-area .title-item ul { margin: 0; padding: 0; } .page-title-area .title-item ul li { list-style-type: none; display: inline-block; position: relative; margin-left: 8px; margin-right: 8px; } .page-title-area .title-item ul li:before { position: absolute; content: '/'; top: 0; right: -15px; color: #fff; } .page-title-area .title-item ul li:last-child:before { display: none; } .page-title-area .title-item ul li a { display: inline-block; color: #fff; } .page-title-area .title-item ul li a:hover { letter-spacing: 1px; } .page-title-area .title-item ul li span { display: inline-block; color: #fff; } .design-area.two .design-content .section-title.two h2 { margin-bottom: 0; } .design-area.two .design-content p { margin-bottom: 10px; } .design-area.two .design-content p:last-child { margin-bottom: 0; } .team-area.three { background-color: #fff; } .app-area { background-color: #eef4ff; } .app-area .app-img { margin-bottom: 30px; text-align: center; } .app-area .app-img img { max-width: 360px; margin-left: auto; margin-right: auto; -webkit-animation: app-ani-one 10s infinite linear; animation: app-ani-one 10s infinite linear; } .app-area .app-content { margin-bottom: 30px; } .app-area .app-content .section-title.two { margin-bottom: 20px; } .app-area .app-content p { margin-bottom: 30px; } .app-area .app-content ul { margin: 0; padding: 0; } .app-area .app-content ul li { list-style-type: none; display: inline-block; margin-right: 10px; } .app-area .app-content ul li:last-child { margin-right: 0; } .app-area .app-content ul li a { display: block; } .app-area .app-content ul li a:hover { -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } @-webkit-keyframes app-ani-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 70% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes app-ani-one { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 70% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .feedback-area.two { background-color: #fff; } .pagination-area { text-align: center; } .pagination-area ul { margin: 0; padding: 0; } .pagination-area ul li { list-style-type: none; display: inline-block; margin-left: 3px; margin-right: 3px; } .pagination-area ul li a { display: block; color: #2948ff; border: 1px dashed #2948ff; border-radius: 5px; padding: 3px 13px; } .pagination-area ul li a:hover, .pagination-area ul li a.active { color: #fff; background-color: #2948ff; } /*----- End About CSS -----*/ /*----- Service Details CSS -----*/ .service-details-area .details-app { padding-bottom: 20px; } .service-details-area .details-app .section-title.two { margin-bottom: 10px; } .service-details-area .details-app p { margin-bottom: 30px; } .service-details-area .details-app .details-app-img { margin-bottom: 30px; } .service-details-area .details-app .details-app-img img { border-radius: 5px; width: 100%; } .service-details-area .details-service { margin-bottom: 40px; } .service-details-area .details-service h3 { font-size: 28px; margin-bottom: 10px; } .service-details-area .details-service p { margin-bottom: 0; } .service-details-area .details-service.two p { margin-bottom: 12px; } .service-details-area .details-service.two p:last-child { margin-bottom: 0; } .service-details-area .details-share { margin-bottom: 50px; } .service-details-area .details-share ul { margin: 0; padding: 0; } .service-details-area .details-share ul li { list-style-type: none; display: inline-block; } .service-details-area .details-share ul li:nth-child(2) a { background-color: #55acee; } .service-details-area .details-share ul li:nth-child(3) a { background-color: #3f729b; } .service-details-area .details-share ul li:nth-child(4) a { background-color: #ff0000; } .service-details-area .details-share ul li:nth-child(5) a { background-color: #c80000; } .service-details-area .details-share ul li span { display: inline-block; font-weight: 500; font-size: 18px; color: #221668; margin-right: 10px; } .service-details-area .details-share ul li a { display: inline-block; width: 30px; height: 30px; border-radius: 50%; text-align: center; color: #fff; font-size: 15px; background-color: #3b5998; margin-right: 5px; } .service-details-area .details-share ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .service-details-area .details-share ul li a i { line-height: 30px; } .service-details-area .details-cat { padding: 30px 25px 0px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd7d; box-shadow: 0px 0px 20px 0px #dddddd7d; border-radius: 5px; } .service-details-area .details-cat .details-cat-inner { position: relative; padding-left: 70px; margin-bottom: 30px; } .service-details-area .details-cat .details-cat-inner i { display: inline-block; position: absolute; top: 2px; left: 0; font-size: 50px; line-height: 50px; } .service-details-area .details-cat .details-cat-inner h3 { font-size: 20px; color: #252525; margin-bottom: 3px; } .service-details-area .details-cat .details-cat-inner span { display: block; } .portfolio-area.two { background-color: #fff; } /*----- End Service Details CSS -----*/ /*----- Project Details CSS -----*/ .project-details-area .details-item .details-img { margin-bottom: 30px; } .project-details-area .details-item .details-img img { margin-bottom: 25px; } .project-details-area .details-item .details-img h2 { font-size: 28px; color: #252525; margin-bottom: 10px; } .project-details-area .details-item .details-img p { margin-bottom: 0; } .project-details-area .details-item .details-fact .img { margin-bottom: 30px; } .project-details-area .details-item .details-fact .img img { border-radius: 5px; } .project-details-area .details-item .details-fact .content { margin-bottom: 30px; } .project-details-area .details-item .details-fact .content h3 { font-size: 25px; margin-bottom: 10px; } .project-details-area .details-item .details-fact .content ul { margin: 0; padding: 0; } .project-details-area .details-item .details-fact .content ul li { list-style-type: none; display: block; margin-bottom: 12px; position: relative; padding-left: 20px; } .project-details-area .details-item .details-fact .content ul li:before { position: absolute; content: ''; width: 5px; height: 5px; left: 0; top: 10px; background-color: #2948ff; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .project-details-area .details-item .details-fact .content ul li:last-child { margin-bottom: 0; } .project-details-area .details-item .details-brief { margin-bottom: 22px; } .project-details-area .details-item .details-brief:last-child { margin-bottom: 0; } .project-details-area .details-item .details-brief h3 { font-size: 25px; margin-bottom: 10px; } .project-details-area .details-item .details-brief p { margin-bottom: 10px; } .project-details-area .details-item .details-brief p:last-child { margin-bottom: 0; } .project-details-area .details-right .details-info { border-radius: 5px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; border-top: 3px solid #2948ff; padding: 30px 25px 30px; } .project-details-area .details-right .details-info ul { margin: 0; padding: 0; } .project-details-area .details-right .details-info ul li { list-style-type: none; display: block; padding-left: 45px; position: relative; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #fafafa; } .project-details-area .details-right .details-info ul li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .project-details-area .details-right .details-info ul li i { position: absolute; top: 5px; left: 0; display: inline-block; color: #2948ff; font-size: 30px; } .project-details-area .details-right .details-info ul li h3 { font-size: 20px; margin-bottom: 3px; } .project-details-area .details-right .details-info ul li span { display: block; } .project-details-area .details-right .details-info ul li a { display: block; color: #565353; } .project-details-area .details-right .details-info ul li a:hover { color: #2948ff; } /*----- End Project Details CSS -----*/ /*----- Blog Details CSS -----*/ .blog-details-area .details-item img { width: 100%; } .blog-details-area .details-item .details-img { margin-bottom: 30px; position: relative; margin-top: 30px; } .blog-details-area .details-item .details-img h4 { max-width: 90px; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; text-align: center; font-size: 33px; color: #2948ff; padding: 12px 15px 10px; border-radius: 5px; margin-bottom: 0; line-height: 30px; position: absolute; right: 30px; top: -30px; } .blog-details-area .details-item .details-img h4 span { display: inline-block; font-weight: 400; font-size: 18px; color: #565353; } .blog-details-area .details-item .details-img img { margin-bottom: 25px; } .blog-details-area .details-item .details-img h2 { font-size: 30px; margin-bottom: 20px; color: #221668; } .blog-details-area .details-item .details-img p { margin-bottom: 10px; } .blog-details-area .details-item .details-img p:last-child { margin-bottom: 0; } .blog-details-area .details-item .details-img .paragraph-d { position: relative; padding-left: 70px; } .blog-details-area .details-item .details-img .paragraph-d span { display: inline-block; font-size: 100px; line-height: 85px; margin-left: -8px; position: absolute; top: 0; left: 0; color: #221668; } .blog-details-area .details-item .details-quote { background-color: #2948ff; border-radius: 5px; text-align: center; padding: 30px 25px 30px; margin-bottom: 45px; } .blog-details-area .details-item .details-quote i { display: inline-block; color: #fff; font-size: 45px; line-height: 45px; margin-bottom: 15px; } .blog-details-area .details-item .details-quote h3 { font-size: 24px; font-weight: 400; margin-bottom: 17px; color: #fff; } .blog-details-area .details-item .details-quote span { color: #fff; position: relative; display: inline-block; font-size: 15px; padding-left: 35px; } .blog-details-area .details-item .details-quote span:before { position: absolute; content: ''; width: 25px; height: 1px; bottom: 7px; left: 0; background-color: #fff; } .blog-details-area .details-item .details-digital { margin-bottom: 50px; } .blog-details-area .details-item .details-digital h3 { font-size: 25px; margin-bottom: 10px; color: #221668; } .blog-details-area .details-item .details-digital p { margin-bottom: 5px; } .blog-details-area .details-item .details-digital p:last-child { margin-bottom: 0; } .blog-details-area .details-item .details-text-img { margin-bottom: 50px; } .blog-details-area .details-item .details-text-img img { border-radius: 5px; margin-bottom: 25px; } .blog-details-area .details-item .details-text-img p { margin-bottom: 0; } .blog-details-area .details-item .details-tags { margin-bottom: 50px; border: 1px dashed #2948ff; border-radius: 5px; background-color: #f3f5ff; padding: 20px 25px; } .blog-details-area .details-item .details-tags .left ul { margin: 0; padding: 0; } .blog-details-area .details-item .details-tags .left ul li { list-style-type: none; display: inline-block; } .blog-details-area .details-item .details-tags .left ul li span { display: block; font-weight: 500; font-size: 18px; color: #221668; margin-right: 10px; } .blog-details-area .details-item .details-tags .left ul li a { display: block; color: #2948ff; font-size: 15px; margin-right: 10px; } .blog-details-area .details-item .details-tags .left ul li a:hover { color: #221668; } .blog-details-area .details-item .details-tags .right { text-align: right; } .blog-details-area .details-item .details-tags .right ul { margin: 0; padding: 0; } .blog-details-area .details-item .details-tags .right ul li { list-style-type: none; display: inline-block; margin-right: 5px; } .blog-details-area .details-item .details-tags .right ul li:nth-child(2) a { background-color: #55acee; } .blog-details-area .details-item .details-tags .right ul li:nth-child(3) a { background-color: #3f729b; } .blog-details-area .details-item .details-tags .right ul li:nth-child(4) a { background-color: #ff0000; } .blog-details-area .details-item .details-tags .right ul li:nth-child(5) a { background-color: #c80000; } .blog-details-area .details-item .details-tags .right ul li:last-child { margin-right: 0; } .blog-details-area .details-item .details-tags .right ul li a { display: block; width: 30px; height: 30px; text-align: center; border-radius: 50%; font-size: 16px; color: #fff; background-color: #3b5998; } .blog-details-area .details-item .details-tags .right ul li a i { line-height: 30px; } .blog-details-area .details-item .details-tags .right ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .blog-details-area .details-item .details-user { border-radius: 5px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; position: relative; margin-bottom: 50px; } .blog-details-area .details-item .details-user img { position: absolute; } .blog-details-area .details-item .details-user img:nth-child(1) { max-width: 105px; top: 75px; left: 25px; border: 15px solid #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; border-radius: 50%; z-index: 1; } .blog-details-area .details-item .details-user img:nth-child(2) { top: 0; left: 0; max-width: 200px; } .blog-details-area .details-item .details-user img:nth-child(3) { top: 20px; left: 55%; max-width: 79px; } .blog-details-area .details-item .details-user .top { border-radius: 5px 5px 0 0; background-color: #2948ff; padding: 50px 30px 25px 150px; } .blog-details-area .details-item .details-user .top .top-left h3 { color: #fff; font-size: 20px; margin-bottom: 3px; } .blog-details-area .details-item .details-user .top .top-left span { display: block; font-size: 15px; color: #fff; } .blog-details-area .details-item .details-user .top .top-right { text-align: right; } .blog-details-area .details-item .details-user .top .top-right ul { margin: 0; padding: 0; } .blog-details-area .details-item .details-user .top .top-right ul li { list-style-type: none; display: inline-block; margin-right: 8px; } .blog-details-area .details-item .details-user .top .top-right ul li:last-child { margin-right: 0; } .blog-details-area .details-item .details-user .top .top-right ul li a { display: block; color: #fff; font-size: 17px; } .blog-details-area .details-item .details-user .top .top-right ul li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .blog-details-area .details-item .details-user .bottom { background-color: #fff; border-radius: 0 0 5px 5px; padding: 25px 30px 30px 150px; } .blog-details-area .details-item .details-user .bottom p { margin-bottom: 0; } .blog-details-area .details-item .details-card { padding-bottom: 20px; } .blog-details-area .details-item .details-card .left { border-radius: 5px; border: 1px dashed #2948ff; background-color: #f3f5ff; margin-bottom: 30px; padding: 25px 45px 25px 25px; position: relative; } .blog-details-area .details-item .details-card .left:hover a { opacity: 1; visibility: visible; } .blog-details-area .details-item .details-card .left span { font-size: 14px; display: block; color: #2948ff; position: relative; padding-left: 45px; margin-bottom: 10px; } .blog-details-area .details-item .details-card .left span:before { position: absolute; content: ''; width: 35px; height: 1px; bottom: 5px; left: 0; background-color: #2948ff; } .blog-details-area .details-item .details-card .left p { margin-bottom: 0; font-size: 17px; color: #3b5998; line-height: 28px; } .blog-details-area .details-item .details-card .left a { display: inline-block; height: 100%; position: absolute; top: 0; right: 0; padding-left: 10px; padding-right: 10px; color: #fff; background-color: #3b5998; border-radius: 0 5px 5px 0; line-height: 135px; font-size: 25px; opacity: 0; visibility: hidden; } .blog-details-area .details-item .details-card .left a:hover { background-color: #2948ff; } .blog-details-area .details-item .details-comment { margin-bottom: 50px; } .blog-details-area .details-item .details-comment h2 { margin-bottom: 50px; font-size: 20px; color: #3b5998; position: relative; padding-bottom: 8px; } .blog-details-area .details-item .details-comment h2:before { position: absolute; content: ''; width: 35px; height: 2px; left: 0; bottom: 0; background-color: #3b5998; } .blog-details-area .details-item .details-comment h2 span { color: #565353; } .blog-details-area .details-item .details-comment ul { margin: 0; padding: 0; } .blog-details-area .details-item .details-comment ul li { list-style-type: none; display: block; position: relative; padding-left: 130px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #fafafa; } .blog-details-area .details-item .details-comment ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; margin-left: 30px; } .blog-details-area .details-item .details-comment ul li img { position: absolute; top: 0; left: 0; max-width: 105px; } .blog-details-area .details-item .details-comment ul li h3 { font-size: 20px; margin-bottom: 3px; } .blog-details-area .details-item .details-comment ul li span { font-size: 15px; margin-bottom: 15px; } .blog-details-area .details-item .details-comment ul li p { margin-bottom: 0; } .blog-details-area .details-item .details-comment ul li a { display: inline-block; color: #2948ff; position: absolute; top: 0; right: 0; } .blog-details-area .details-item .details-comment ul li a:hover { letter-spacing: 1px; } .blog-details-area .details-item .details-form { background-color: #f4f4f4; border-radius: 5px; padding: 45px 45px 50px; } .blog-details-area .details-item .details-form h2 { font-size: 20px; margin-bottom: 30px; } .blog-details-area .details-item .details-form .form-group { margin-bottom: 20px; position: relative; } .blog-details-area .details-item .details-form .form-group label { position: absolute; top: 11px; left: 20px; display: inline-block; font-size: 20px; } .blog-details-area .details-item .details-form .form-group .form-control { height: 50px; border-radius: 5px; border: 1px solid #e1e1e1; padding-left: 50px; font-size: 15px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-details-area .details-item .details-form .form-group .form-control:focus { border: 1px solid #2948ff; -webkit-box-shadow: none; box-shadow: none; } .blog-details-area .details-item .details-form .form-group textarea { padding-top: 14px; height: auto !important; } .blog-details-area .details-item .details-form .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; padding-top: 0; padding-bottom: 0; } .widget-area .widget-item { -webkit-box-shadow: 0px 0px 20px 0px #dddddd61; box-shadow: 0px 0px 20px 0px #dddddd61; padding: 25px 30px 30px; border-radius: 5px; border-top: 3px solid #2948ff; margin-bottom: 30px; } .widget-area .widget-item:last-child { margin-bottom: 0; } .widget-area .widget-item:last-child h3 { margin-bottom: 20px; } .widget-area .widget-item h3 { padding-bottom: 10px; margin-bottom: 30px; font-size: 20px; position: relative; border-bottom: 1px solid #fafafa; } .widget-area .widget-item h3:before { position: absolute; content: ''; width: 35px; height: 3px; bottom: -2px; left: 0; background-color: #2948ff; } .widget-area .search form { position: relative; } .widget-area .search form .form-control { height: 50px; border: 1px solid #dadada; font-size: 15px; padding-left: 20px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .widget-area .search form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #2948ff; } .widget-area .search form .btn { display: inline-block; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; color: #fff; font-size: 22px; background-color: #2948ff; padding: 0; padding-left: 15px; padding-right: 15px; height: 50px; position: absolute; top: 0; right: 0; } .widget-area .search form .btn i { line-height: 50px; } .widget-area .search form .btn:hover { background-color: #252525; } .widget-area .recent .recent-inner { margin-bottom: 20px; } .widget-area .recent .recent-inner:last-child { margin-bottom: 0; } .widget-area .recent .recent-inner ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget-area .recent .recent-inner ul li { list-style-type: none; display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .widget-area .recent .recent-inner ul li:last-child { -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; margin-left: 15px; } .widget-area .recent .recent-inner ul li span { display: block; color: #2948ff; font-size: 14px; margin-bottom: 3px; } .widget-area .recent .recent-inner ul li a { display: block; color: #3b5998; font-size: 18px; } .widget-area .recent .recent-inner ul li a:hover { color: #2948ff; } .widget-area .cat ul { margin: 0; padding: 0; } .widget-area .cat ul li { list-style-type: none; display: block; position: relative; margin-bottom: 15px; } .widget-area .cat ul li:last-child { margin-bottom: 0; } .widget-area .cat ul li a { display: inline-block; color: #565353; } .widget-area .cat ul li a:hover { color: #2948ff; } .widget-area .cat ul li span { display: inline-block; position: absolute; top: 0; right: 0; color: #2948ff; } .widget-area .tags ul { margin: 0; padding: 0; } .widget-area .tags ul li { list-style-type: none; display: inline-block; margin-right: 10px; margin-top: 10px; } .widget-area .tags ul li a { display: block; color: #565353; } .widget-area .tags ul li a:hover { color: #2948ff; } /*----- End Blog Details CSS -----*/ /*----- Contact CSS -----*/ .contact-area .section-title { text-align: center; } .contact-area .section-title h2 { margin-bottom: 3px; } .contact-area .section-title p { margin-bottom: 0; max-width: 625px; margin-left: auto; margin-right: auto; } .contact-area #contactForm { max-width: 900px; margin-left: auto; margin-right: auto; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; border-radius: 5px; padding: 50px 50px 50px; text-align: center; background-color: #f1f1f1; } .contact-area #contactForm .form-group { margin-bottom: 30px; text-align: left; position: relative; } .contact-area #contactForm .form-group label { position: absolute; left: 15px; top: 12px; font-size: 20px; } .contact-area #contactForm .form-group .form-check-label { position: absolute; top: 2px; left: 30px; font-size: 15px; } .contact-area #contactForm .form-group .form-check-label a { color: #2948ff; } .contact-area #contactForm .form-group .form-check-label a:hover { color: #82b440; } .contact-area #contactForm .form-group .form-control { height: 50px; border: 1px solid #f1f1f1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; padding-left: 40px; font-size: 15px; } .contact-area #contactForm .form-group .form-control:focus { border: 1px solid #2948ff; -webkit-box-shadow: none; box-shadow: none; } .contact-area #contactForm .form-group .list-unstyled { margin-top: 10px; color: #dc3545; } .contact-area #contactForm .form-group textarea { padding-top: 12px; height: auto !important; } .contact-area #contactForm .cmn-btn { border: 0; padding-top: 0; padding-bottom: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; opacity: 1; } .contact-area #contactForm .text-danger { margin-bottom: 0; margin-top: 10px; color: #dc3545; } .contact-area #contactForm .text-success { margin-bottom: 0; margin-top: 10px; color: #28a745; } .contact-info-area { background-color: #eef4ff; background-image: url("../img/contact-bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .contact-info-area .info-item { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } .contact-info-area .info-item h2 { font-size: 30px; margin-bottom: 20px; max-width: 500px; margin-left: auto; margin-right: auto; margin-top: -8px; } .contact-info-area .info-item .mail-call { margin: 0; padding: 0; margin-bottom: 30px; } .contact-info-area .info-item .mail-call li { list-style-type: none; display: block; margin-bottom: 2px; } .contact-info-area .info-item .mail-call li:last-child { margin-bottom: 0; } .contact-info-area .info-item .mail-call li a { display: block; color: #2948ff; font-size: 22px; } .contact-info-area .info-item .mail-call li a:hover { color: #252525; } .contact-info-area .info-item .social-item { margin: 0; padding: 0; } .contact-info-area .info-item .social-item li { list-style-type: none; display: inline-block; margin-left: 4px; margin-right: 4px; } .contact-info-area .info-item .social-item li:nth-child(2) a { background-color: #55acee; } .contact-info-area .info-item .social-item li:nth-child(3) a { background-color: #3f729b; } .contact-info-area .info-item .social-item li:nth-child(4) a { background-color: #ff0000; } .contact-info-area .info-item .social-item li:nth-child(5) a { background-color: #c80000; } .contact-info-area .info-item .social-item li a { display: block; width: 30px; height: 30px; text-align: center; border-radius: 50%; color: #fff; background-color: #3b5998; } .contact-info-area .info-item .social-item li a i { line-height: 30px; } .contact-info-area .info-item .social-item li a:hover { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } /*----- End Contact CSS -----*/ /*----- User CSS -----*/ .user-form-area .user-img { background-image: url("../img/user-form-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; } .user-form-area .user-img img { display: none; } .user-form-area .user-content { height: 100vh; } .user-form-area .user-content .user-content-inner { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; } .user-form-area .user-content .user-content-inner .top { margin-bottom: 40px; } .user-form-area .user-content .user-content-inner .top a { display: block; margin-bottom: 30px; } .user-form-area .user-content .user-content-inner .top .logo-two { display: none; } .user-form-area .user-content .user-content-inner .top h2 { font-size: 25px; margin-bottom: 0; background-color: #fafafa; border-left: 2px solid #2948ff; border-right: 2px solid #2948ff; padding-top: 15px; padding-bottom: 17px; } .user-form-area .user-content .user-content-inner .form-group { margin-bottom: 20px; } .user-form-area .user-content .user-content-inner .form-group .form-control { height: 50px; padding-left: 15px; font-size: 15px; border: 1px solid #f1f1f1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .user-form-area .user-content .user-content-inner .form-group .form-control:focus { border: 1px solid #2948ff; -webkit-box-shadow: none; box-shadow: none; } .user-form-area .user-content .user-content-inner .btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; color: #fff; background-color: #2948ff; border-radius: 5px; padding-top: 12px; padding-bottom: 12px; width: 100%; display: block; font-weight: 500; } .user-form-area .user-content .user-content-inner .btn:hover { background-color: #252525; } .user-form-area .user-content .user-content-inner .bottom { margin-top: 30px; } .user-form-area .user-content .user-content-inner .bottom p { margin-bottom: 25px; } .user-form-area .user-content .user-content-inner .bottom p a { color: #252525; font-weight: 500; border-bottom: 1px solid #252525; } .user-form-area .user-content .user-content-inner .bottom p a:hover { color: #2948ff; border-bottom: 1px solid #2948ff; } .user-form-area .user-content .user-content-inner .bottom h4 { font-weight: 400; font-size: 15px; margin-bottom: 30px; position: relative; } .user-form-area .user-content .user-content-inner .bottom h4:before { position: absolute; content: ''; width: 45%; height: 1px; top: 10px; left: 0; background-color: #2948ff; } .user-form-area .user-content .user-content-inner .bottom h4:after { position: absolute; content: ''; width: 45%; height: 1px; top: 10px; right: 0; background-color: #2948ff; } .user-form-area .user-content .user-content-inner .bottom ul { margin: 0; padding: 0; } .user-form-area .user-content .user-content-inner .bottom ul li { list-style-type: none; display: block; margin-bottom: 15px; } .user-form-area .user-content .user-content-inner .bottom ul li:last-child { margin-bottom: 0; } .user-form-area .user-content .user-content-inner .bottom ul li:last-child a { color: #4885ed; border: 1px solid #4885ed; } .user-form-area .user-content .user-content-inner .bottom ul li:last-child a:hover { background-color: #4885ed; } .user-form-area .user-content .user-content-inner .bottom ul li a { display: block; border: 1px solid #3B5998; color: #3B5998; border-radius: 5px; padding-top: 12px; padding-bottom: 12px; font-weight: 500; } .user-form-area .user-content .user-content-inner .bottom ul li a i { display: inline-block; font-size: 18px; position: relative; top: 1px; } .user-form-area .user-content .user-content-inner .bottom ul li a:hover { color: #fff; background-color: #3B5998; } .testimonials-area.two { background-color: #fff; background-image: unset; } .testimonials-area.two .testimonials-item { margin-bottom: 30px; } .testimonials-area.two .testimonials-item img { margin-bottom: 15px; border: 5px solid #fff; -webkit-box-shadow: 0px 0px 20px 0px #dddddd42; box-shadow: 0px 0px 20px 0px #dddddd42; border-radius: 50%; } .testimonials-area.two .testimonials-item p { margin-bottom: 20px; } /*----- End User CSS -----*/ /*----- Error CSS -----*/ .error-area { height: 100vh; } .error-area .error-item { text-align: center; } .error-area .error-item img { margin-bottom: 40px; } .error-area .error-item h2 { font-size: 30px; margin-bottom: 15px; } .error-area .error-item p { margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } /*----- End Error CSS -----*/ /*----- Rules CSS -----*/ .rules-area { max-width: 800px; margin-left: auto; margin-right: auto; } .rules-area .rules-item h3 { font-size: 20px; margin-bottom: 10px; color: #221668; } .rules-area .rules-item p { margin-bottom: 30px; } .rules-area .rules-item p:last-child { margin-bottom: 0; } /*----- End Rules CSS -----*/ /*----- Preloader CSS -----*/ .loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; text-align: center; -webkit-transition: .9s; transition: .9s; } .spinner { width: 50px; height: 50px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 42%; -webkit-transform: translateY(-42%); transform: translateY(-42%); -webkit-transition: 0.6s; transition: 0.6s; } .spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; -webkit-transition: 0.6s; transition: 0.6s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; -webkit-transition: 0.6s; transition: 0.6s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; -webkit-transition: 0.6s; transition: 0.6s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; -webkit-transition: 0.6s; transition: 0.6s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } .loader::before, .loader::after { content: ''; position: absolute; left: 0; top: 0; width: 60%; height: 100%; z-index: -1; background: #2948ff; -webkit-transition: .9s; transition: .9s; } .loader::after { left: auto; right: 0; } .loader.loader-deactivate { visibility: hidden; } .loader.loader-deactivate::after, .loader.loader-deactivate::before { width: 0; } .loader.loader-deactivate .spinner { opacity: 0; visibility: hidden; } /*----- End Preloader CSS -----*/ /*----- Go Top CSS -----*/ .go-top { position: fixed; cursor: pointer; bottom: 15px; right: 0; color: #ffffff; background-color: #2948ff; z-index: 4; width: 40px; text-align: center; height: 40px; opacity: 0; visibility: hidden; -webkit-transition: .9s; transition: .9s; border-radius: 50%; border: 1px solid #2948ff; } .go-top i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; -webkit-transition: 0.6s; transition: 0.6s; font-size: 25px; line-height: 40px; } .go-top i:last-child { opacity: 0; visibility: hidden; top: 60%; } .go-top.active { right: 1%; -webkit-transform: translateY(-1%); transform: translateY(-1%); opacity: 1; visibility: visible; } .go-top:hover, .go-top:focus { color: #ffffff; border: 1px solid #252525; background-color: #252525; } .go-top:hover i:first-child, .go-top:focus i:first-child { opacity: 0; top: 0; visibility: hidden; } .go-top:hover i:last-child, .go-top:focus i:last-child { opacity: 1; visibility: visible; top: 50%; } /*----- End Go Top CSS -----*/ /*----- Buy Now Btn -----*/ .buy-now-btn { right: 20px; z-index: 99; top: 50%; position: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 30px; display: inline-block; color: #fff; background-color: #82b440; padding: 10px 20px 10px 42px; -webkit-box-shadow: 0 1px 20px 1px #82b440; box-shadow: 0 1px 20px 1px #82b440; font-size: 13px; font-weight: 600; } .buy-now-btn img { top: 50%; left: 20px; width: 15px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .buy-now-btn:hover { color: #fff; background-color: #94be5d; } /*# sourceMappingURL=style.css.map */