/* ============= Global ============= */ i{ -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } a{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } /* ============= Header ============= */ .site-header .transparent-menu.sticky{ background-color: #021327; } rs-layer#slider-8-slide-13-layer-5 { text-decoration: underline !important; } /* ============ Nav Menu ============ */ .nav-menu ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; } .nav-menu .menu-ul li{ position: relative; margin-right: 10px; } .nav-menu .menu-ul li a{ display: inline-block; padding: 15px 10px; } .nav-menu .menu-ul li .sub-menu{ position: absolute; display: block; background-color: red; width: 250px; margin: 0; padding: 0; list-style: none; top: 150%; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .nav-menu .menu-ul li .sub-menu li{ margin: 0; } .nav-menu .menu-ul li .sub-menu li a{ display: block; } .nav-menu .menu-ul li:hover .sub-menu{ top: 100%; opacity: 1; visibility: visible; } .nav-menu .menu-toggle{ display: none; } b.is-hidden { display: block; font-weight:800!important; } .effective-area span{ display: block; font-weight:800!important; } @media (max-width: 768px){ .nav-menu .menu-toggle{ display: block; } .nav-menu .menu-ul { position: absolute; top: 100%; display: block; background-color: yellow; width: 100%; display: none; } .nav-menu ul li a{ width: 100%; } } /* Elementor Tab Customized */ .elementor-tab-content { border-radius: 0 0 10px 10px; } .elementor-tab-content ul { padding-left: 27px; list-style: none; } .elementor-tab-title { font-family: 'Rajdhani'; color: #232323; font-size: 19px; } .elementor-tab-title.elementor-active { border-radius:10px 10px 0 0 ; } .elementor-tab-content ul li { color: #232323; font-family: rajdhani; font-weight: 600; font-size: 18px; margin: 10px 0; position:relative; } .elementor-tab-content ul li:before { content: ""; width: 22px; height: 30px; position: absolute; left: -26px; top: 6px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2023/12/checkpng.png); z-index: 999; background-repeat: no-repeat; } .em-video-image img { border-radius: 10px; } .marquee a { color: #fff; font-size: 60px; display: inline-block; line-height: 70px; font-family: 'Rajdhani'; font-weight: 700; margin: 0 15px; } sr7-txt#SR7_19_1-42-16 a.video-vemo-icon.venobox.vbox-item i { color: #0A7A60!important; } /* ============= Global ============= */ .slick-dots { bottom: 0px !important; position: relative; } .service-button a{ display: block; } .crypto-revolution-button:before { position: absolute; content: ""; top: 17px; left: 39px; height: 26px; width: 26px; background-position: center center; background-repeat: no-repeat; background: url("https://wp.ditsolution.net/techno-new/wp-content/uploads/2023/10/crypto-button-icon.png"); } /* ============= Slick Slider ============= */ .single-slick { position: relative; min-height: 875px !important; z-index: 1; } .single-slick.style_one{ position: relative; min-height: 900px !important; } .slide-img, .parallax-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .dreamit-slick-slider .slick-dots { bottom: 50px !important; position: relative; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap { width: 100%; text-align: center; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap h1 { font-size: 60px; color: #fff; -webkit-animation: 1s 1.6s fadeInUp both; animation: 1s 1.6s fadeInUp both; line-height: 68px; font-weight: 800; } .dreamit-slick-slider .hero-text-wrap h1 span{ color: #0A7A60 ; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap h4 { font-size: 20px; font-weight: 600; color: #fff; padding: 0; position: relative; z-index: 1; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1px; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap p { font-size: 20px; color: #fff; margin-top: 24px; width: 87%; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; line-height: 26px; margin: 18px auto 48px; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn { font-size: 17px; color: #fff; background: #0A7A60 ; padding: 12px 32px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; margin-right: 16px; position: relative; z-index: 22; } .dreamit-slick-slider .single-slick.style_one .hero-text-wrap .btn:hover { background: #00247e; border: 1px solid #00247e; } .dreamit-slick-slider .single-slick.style_one a.btn.btn-gradientstyle_two.btn-md.btn-animated-none { background: transparent; border-color: #ffffff6e; } .dreamit-slick-slider .single-slick.style_one a.btn.btn-gradientstyle_two.btn-md.btn-animated-none:hover{ background: #0A7A60 ; border-color:#0A7A60 ; color:#fff; } /*slick style three*/ .single-slick.one.three .hero-text h4 { font-size: 20px; font-weight: 600; letter-spacing: 1px; margin: 0 0 12px; display: inline-block; color: #0A7A60; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; text-transform: uppercase; } .single-slick.one.three .hero-text h1 { font-size: 60px; color: #232323; -webkit-animation: 1s 1.6s fadeInUp both; animation: 1s 1.6s fadeInUp both; line-height: 1.1; font-weight: 800; } .single-slick.one.three .hero-text p { font-size: 18px; margin: 25px 0 35px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; width: 69%; } .single-slick.one.three a.btn { font-size: 17px; color: #fff; background: #0A7A60 ; padding: 13px 32px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; margin-right: 16px; } .single-slick.one.three a.btn i{ margin-left: 6px; background: transparent; } .single-slick.one.three a.btn:hover { background: #00247e; border: 1px solid #00247e; } .dreamit-slick-slider .single-slick.one.three .slider-single-image { margin-right: 0; position: absolute; bottom: 0px; right: 10%; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; } .dreamit-slick-slider .single-slick.one.three .slider-shape-image.rotateme { position: absolute; right: 49px; } /*slick slider style four*/ .single-slick.four .hero-text h4 { font-size: 20px; font-weight: 600; letter-spacing: 1px; margin: 0 0 27px; display: inline-block; color: #fff; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; text-transform: uppercase; } .single-slick.four .hero-text h1 { font-size: 60px; color: #fff; -webkit-animation: 1s 1.6s fadeInUp both; animation: 1s 1.6s fadeInUp both; line-height: 1.1; font-weight: 800; } .single-slick.four .hero-text p { font-size: 18px; margin: 27px 0 35px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; color: #fff; } .dreamit-slick-slider .single-slick.four .slider-video-icon { position: inherit; text-align: left; } .dreamit-slick-slider .single-slick.four .slider-video-icon span { margin-left: 22px; color: #fff; font-size: 18px; font-weight: 600; } .startup-slick .single-slick.one.three .hero-text p { font-size: 18px; width: 51%; } /*appoinment*/ .form-area.appointment input.wpcf7-form-control.wpcf7-submit.has-spinner.button { background: #0A7A60; border: 0; display: block; text-align: center; padding: 14px 39px; border-radius: 7px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #fff; width: 100%; } .form-area.appointment input.wpcf7-form-control.wpcf7-submit.has-spinner.button:hover { background: #00247E; color: #fff; } .form-area.appointment input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #616161!important; } /* Lines Area Style ======================================================*/ .lines { position: absolute; top: 0; left: 0; right: 0; height: 100%; margin: auto; width: 90vw; z-index: -1; } .lines .line { position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .lines .line::after { content: ""; display: block; position: absolute; height: 10px; width: 100%; top: 0; left: 0; background-color: #ffffff; -webkit-animation: moveLeftBounces-one 20s linear infinite; animation: moveLeftBounces-one 20s linear infinite; } .lines .line:nth-child(1) { margin-left: -25%; } .lines .line:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .lines .line:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .lines .line:nth-child(3) { margin-left: 25%; } .lines .line-two { position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .lines .line-two::after { content: ""; display: block; position: absolute; height: 10px; width: 100%; top: 0; left: 0; background-color: #d80650; -webkit-animation: moveLeftBounces-two 20s linear infinite; animation: moveLeftBounces-two 20s linear infinite; } .lines .line-two:nth-child(1) { margin-left: -25%; } .lines .line-two:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .lines .line-two:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .lines .line-two:nth-child(3) { margin-left: 25%; } .lines .line-three { position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .lines .line-three::after { content: ""; display: block; position: absolute; height: 10px; width: 100%; top: 0; left: 0; background-color: #d80650; -webkit-animation: moveLeftBounces-one 20s linear infinite; animation: moveLeftBounces-one 20s linear infinite; } .lines .line-three:nth-child(1) { margin-left: -25%; } .lines .line-three:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .lines .line-three:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .lines .line-three:nth-child(3) { margin-left: 25%; } @-webkit-keyframes moveLeftBounces-one { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(1000px); transform: translateY(1000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes moveLeftBounces-one { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(1000px); transform: translateY(1000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .dreamit-slick-slider .hero-text-wrap .btn:hover:after { width: 100%; left: 0; } .dreamit-slick-slider .hero-text-wrap .btn:hover i { background: #0A7A60 ; color: #fff; } /* Slider Call Option Css */ .dreamit-slick-slider .call-button { margin-left: 25px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; } .dreamit-slick-slider .call-number span { color: #858B97; } .dreamit-slick-slider .call-number h3 { font-size: 17px; font-weight: 500; color: #fff; margin-top: 5px; } .dreamit-slick-slider .call-number h3 a { color: inherit; } .dreamit-slick-slider .call-icon i { width: 60px; height: 60px; display: inline-block; color: #0A7A60 ; TEXT-ALIGN: CENTER; border: 2px solid #0A7A60 ; border-radius: 100%; font-size: 28px; line-height: 56px; margin-right: 10px; } /*slick style two*/ .dreamit-slick-slider .single-slick.style_one.style_two .hero-text-wrap { width: 100%; text-align: left; position: relative; z-index: 22; } .dreamit-slick-slider .single-slick.style_one.style_two .hero-text-wrap p { font-size: 18px; margin: 24px 0 37px; } .dreamit-slick-slider .single-slick.style_one.style_two .slider-video-icon { position: absolute; left: 88%; top: 45%; text-align: center; } .dreamit-slick-slider .single-slick.style_one.style_two .slider-video-icon a, .video-icon-box a { background: #fff; height: 70px; width: 70px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 0; line-height: 70px; color: #0A7A60 ; font-size: 15px; position: relative; display: inline-block; -webkit-animation: ripple-white 1s linear infinite; animation: ripple-white 1s linear infinite; -webkit-transition: .5s } @-webkit-keyframes ripple-white { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3) } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0) } } @keyframes ripple-white { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3) } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0) } } /* Slider Right Image Option */ .dreamit-slick-slider .slider-video-icon span{ margin-left: 22px; color: #fff; font-size: 18px; font-weight: 600; } .dreamit-slick-slider .slider-single-image { position: relative; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; text-align: right; margin-right: -183px; } .dreamit-slick-slider .slider-single-image img { display: block; } .dreamit-slick-slider .slider-video-icon { -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; position: absolute; left: 45%; top: 45%; text-align: center; } .dreamit-slick-slider .slider-video-icon a { width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; color: #0A7A60 ; background: #fff; display: inline-block; font-size: 26px; position:relative; z-index:1; } .dreamit-slick-slider .text-center .hero-text-wrap p { font-size: 18px; margin: 16px auto 48px; text-align: center; } .dreamit-slick-slider .single-slick.style_one.style_two .hero-text-wrap .btn { padding: 13px 35px; } /* Slick Slider Next */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev { background-color: rgba(0,0,0,0.40); border-radius: 100%; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); height: 80px; top: 50%; -webkit-transform: translate(0px, -50%); -ms-transform: translate(0px, -50%); transform: translate(0px, -50%); width: 80px; z-index: 1; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; line-height: 80px; color: #fff; border: 0; } .slick-next { background-color: rgba(0,0,0,0.40)!important; border-radius: 100%; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)!important; height: 80px!important; top: 50%; width: 80px!important; line-height: 80px!important; color: #fff; border: 0; } .slick-next:hover{ background-color: #0A7A60 !important; color: #FFF; } .slick-next:hover:before{ color: #FFF!important; } .slick-next::before { font-size: 26px!important; color: #fff!important; } .dreamit-slick-slider .slick-prev { left: -94px; } .dreamit-slick-slider .slick-next { right: -80px; top: 50%; opacity: 1; color: #fff!important; transition: .5s; } .dreamit-slick-slider:hover .slick-prev { left: 50px; } .dreamit-slick-slider:hover .slick-next { right: 50px; } .dreamit-slick-slider .slick-prev::before, .dreamit-slick-slider .slick-next::before { color: #fff!important; font-size: 25px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; content: "\f104"; font-family: FontAwesome; } .dreamit-slick-slider .slick-next:before { content: "\f105"!important; font-family: FontAwesome; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background-color: #0A7A60 ; color: #FFF; border: 0; outline:0; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { color: #fff; } .rotateme { position: absolute; z-index: -1; -webkit-animation-name: rotateme; animation-name: rotateme; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes rotateme { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateme { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* ================== Effective Slider ================== */ .effective-area { min-height: 950px; padding: 0; position: relative; } .effective-area.overlay-white::after, .effective-area .overlay-dark::after { background-color: rgba(0, 0, 0, 0); content: ""; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; } .overlay-white:after { background-color: rgba(0, 0, 0, 0); } .effective-content { left: 0; margin: 0 auto; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .effective-content h1 { font-size: 17px; font-weight: 500; margin-bottom: 30px; color: #fff; /* letter-spacing: 1px; */ } .effective-content.text-center { text-align: center!important; } .effective-content h2 { color: #fff; font-size: 65px; text-transform: uppercase; margin: 0; padding: 25px 0 0; } .effective-content>h5 { color: #fff; font-size: 26px; font-weight: 600; text-transform: uppercase; } .effective-content p { font-size: 18px; margin: 13px auto 32px; width: 65%; color: #fff; } .effective-area .btn { margin-top: 30px; } .scroll-next { bottom: 10px; left: 0; position: absolute; right: 0; z-index: 1; } .scroll-next>a { border-radius: 20px; display: inline-block; height: 30px; width: 30px; position: relative; } .scroll-next i { color: #fff; font-size: 40px; left: 0; position: absolute; right: 0; top: -106px; } .effective_icon_inner { margin-top: 26px; } .effective_icon_inner a { display: inline-block; font-size: 19px; color: #fff; margin: 0px 10px; } .effective_slider_btn a { padding: 14px 36px; background: #0A7A60 ; color: #fff; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-weight: 600; text-transform: uppercase; border-radius: 4px; display: inline-block; margin: 0 9px; } .effective_slider_btn a:hover { background: #fff; color: #0A7A60 ; } /* ========== Flip Box ========== */ .flip-box .flip-box-inner { position: relative; z-index: 1; margin: 0; padding: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: .5s; } .flip-box .flip-box-inner .flip-box-wrap { position: relative; -webkit-transform: translateZ(0); -webkit-perspective: 1000px; perspective: 1000px; } .flip-box .flip-box-inner .back-part, .flip-box .flip-box-inner .front-part { top: 0; right: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -ms-flex-align: center; height: 200px; background-position: center; background-clip: padding-box; background-size: cover; background-repeat: no-repeat; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275); transition: -webkit-transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275); transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275); transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275), -webkit-transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1.275); transition: .5s; } .flip-box .flip-box-inner .front-part { position: relative; bottom: 0; z-index: 10; padding: 50px 34px 50px; border-radius: 8px; background-color: #6094da; border: 1px solid transparent; } .flip-box .flip-box-inner .front-part .front-background-overlay{ position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .flip-box .flip-box-inner .front-part .front-content-part{ width: 100%; z-index: 1; } .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part { margin-bottom: 20px; } .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part span, .flip-box .flip-box-inner .back-part .back-content-part .back-icon-part span{ display: inline-block; text-align: center; color: #fff; font-size: 30px; line-height: 1; } .front-icon-part .front-icon i { color: #0A7A60; } .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part span img, .flip-box .flip-box-inner .back-part .back-content-part .back-icon-part span img{ width: 60px; height: 60px; } .flip-box .flip-box-inner .front-part .front-content-part .front-title-part { margin-bottom: 10px; } .flip-box .flip-box-inner .front-part .front-content-part .front-title-part .front-title { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.5; color: #fff; } .flip-box .flip-box-inner .front-part .front-content-part .front-desc-part .front-desc { margin-bottom: 0; font-size: 16px; color: #fff; } .flip-box .flip-box-inner .front-part .front-content-part .front-btn-part .front-btn { display: inline-block; line-height: 1; } .flip-box .flip-box-inner .front-part .front-content-part .front-btn-part .front-btn i { transition: all 0.4s ease 0s; } /* Back Part */ .flip-box .flip-box-inner .back-part { position: absolute; z-index: -1; padding: 26px 27px 26px; border-radius: 8px; background-color: #0A7A60 ; } .flip-box .flip-box-inner .back-part .back-background-overlay{ position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .flip-box .flip-box-inner .back-part .back-content-part{ width: 100%; z-index: 1; } .flip-box .flip-box-inner .back-part .back-content-part .back-icon-part { display: none; margin-bottom: 0; text-align: center; } .flip-box .flip-box-inner .back-part .back-content-part .back-icon-part .back-img { display: inline-block; } .flip-box .flip-box-inner .back-part .back-content-part .back-title-part { margin-bottom: 10px; } .flip-box .flip-box-inner .back-part .back-content-part .back-title-part .back-title { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.5; } .flip-box .flip-box-inner .back-part .back-content-part .back-desc-part .back-desc { margin-bottom: 0; font-size: 16px; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn { display: inline-block; line-height: 1; padding: 10px 25px; background: #fff; font-size: 18px; font-weight: 500; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn i { transition: all 0.4s ease 0s; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn.icon-after span { float: left; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn.icon-after i { margin-left: 10px; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn.icon-before span { float: right; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn.icon-before i { margin-right: 10px; } .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn:hover { background: #1f1c51; color: #fff; } .flip-box .flip-box-inner.rs-flip-right .front-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .flip-box .flip-box-inner.rs-flip-right .back-part { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .flip-box .flip-box-inner.rs-flip-right .back-content-part { right: 15px; } .flip-box .flip-box-inner.rs-flip-right:hover .back-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .flip-box .flip-box-inner.rs-flip-right:hover .front-part { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-box .flip-box-inner.rs-flip-right:hover .back-content-part { right: 0; } .flip-box .flip-box-inner.rs-flip-left .front-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .flip-box .flip-box-inner.rs-flip-left .back-part { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-box .flip-box-inner.rs-flip-left .back-content-part { left: 15px; } .flip-box .flip-box-inner.rs-flip-left:hover .front-part { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .flip-box .flip-box-inner.rs-flip-left:hover .back-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .flip-box .flip-box-inner.rs-flip-left:hover .back-content-part { left: 0; } .flip-box .flip-box-inner.rs-flip-up .front-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .flip-box .flip-box-inner.rs-flip-up .back-part { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .flip-box .flip-box-inner.rs-flip-up .back-content-part { top: 15px; } .flip-box .flip-box-inner.rs-flip-up:hover .front-part { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .flip-box .flip-box-inner.rs-flip-up:hover .back-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .flip-box .flip-box-inner.rs-flip-up:hover .back-content-part { top: 0; } .flip-box .flip-box-inner.rs-flip-down .front-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .flip-box .flip-box-inner.rs-flip-down .back-part { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .flip-box .flip-box-inner.rs-flip-down .back-content-part { bottom: 15px; } .flip-box .flip-box-inner.rs-flip-down:hover .front-part { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .flip-box .flip-box-inner.rs-flip-down:hover .back-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .flip-box .flip-box-inner.rs-flip-down:hover .back-content-part { bottom: 0; } .flip-box .flip-box-inner:hover .back-part { z-index: 1; } .flip-box .flip-box-inner:hover .front-part { z-index: -1; } .flip-box:after { display: block; visibility: hidden; clear: both; height: 0; content: " "; font-size: 0; } .front-part, .back-part { min-height: 250px; } /* Style Two */ .flip-box.style-two .front-part .front-icon i { background: #0A7A60 ; color: #fff; height: inherit; width: inherit; line-height: 0; display: inline-block; font-size: 45px; border-radius: 33% 66% 70% 30%/49% 62% 38% 51%; } .flip-box.style-two .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn { display: inline-block; line-height: 1; padding: 10px 25px; background: #fff; font-size: 18px; font-weight: 500; border-radius: 5px; color: #0A7A60; margin-top: 29px; } .flip-box.style-two .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn:hover { background: #1f1c51; color: #fff; } .flip-box.style-two .flip-box-inner .back-part .back-background-overlay { position: absolute; height: 100%; width: 100%; left: 0; top: 0; } /*flip box style three*/ .flip-box.style-two.style3 .front-part .front-icon i { background: #0A7A60 ; color: #fff; height: 90px; width: 90px; line-height: 90px; display: inline-block; font-size: 30px; border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%; } /*style four*/ .flip-box.style-two.style4 .flip-box-inner .front-part { text-align: left; } .flip-box.style-two.style4 .front-part .front-icon i { background: #0A7A60 ; color: #fff; height: inherit; width: inherit; line-height: inherit; display: inline-block; font-size: 45px; border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%; margin-bottom: 8px; } .five .flip-box.style-two.style4 .flip-box-inner .front-part { text-align: center; } .five .flip-box .flip-box-inner .back-part .back-content-part .back-icon-part { display: block; margin-bottom: 23px; } .five .flip-box .flip-box-inner .back-part { border-radius: 0; } .six .flip-box .flip-box-inner .front-part { padding: 50px 25px 50px; } .six .flip-box.style-two .front-part .front-icon i { color: rgb(255, 255, 255); height: 90px; width: 90px; line-height: 90px; display: inline-block; font-size: 30px; background: rgb(12, 90, 219); border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%; } .six .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part { margin-bottom: 20px; margin-top: 15px; } .seven .flip-box .flip-box-inner .front-part { padding: 50px 41px 50px; } .seven .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part { margin-bottom: 42px; margin-top: 15px; } .seven .flip-box.style-two .front-part .front-icon i { color: rgb(255, 255, 255); height: 90px; width: 90px; line-height: 90px; display: inline-block; font-size: 30px; background: rgb(12, 90, 219); border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%; } .seven .flip-box .flip-box-inner .front-part .front-content-part .front-title-part { margin-bottom: 15px; } .eight .back-background-overlay { border-radius: 5px; } .eight .flip-box .flip-box-inner .back-part .back-content-part .back-desc-part .back-desc { margin-bottom: 21px; } .eight .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn { background: #fff; font-size: 18px; font-weight: 500; border-radius: 5px; color: #0A7A60; } .eight .flip-box .flip-box-inner .back-part .back-content-part .back-btn-part .back-btn:hover{ background: #1f1c51; color: #fff; } /* ============== Section Title ============== */ .section-title{ position: relative; } .section-title.style1 .subtitle { position: relative; display: inline-block; color: #0A7A60 ; font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: 5px; margin: 0 0 15px; } .section-title.style1 .title, .section-title.style1 .title-two { font-size: 39px; margin-bottom: 0px; text-transform: capitalize; margin-top: 0; line-height: 1.2; font-weight: 800; } .section-title.style1 .title-two span{ color: #0A7A60 ;; } .section-title .description { font-size: 18px; margin: 10px 0 0; line-height: 1.5; } .section-title.style1.center .description { font-size: 18px; margin: 12px auto 0; width: 71%; } .opacity-low{ opacity: 70%; } .bar-main { margin: 0px 0 0; display: inline-block; } .bar.bar-big { height: 5px; width: 90px; background: #D4E1DD; margin: 18px auto; position: relative; border-radius: 30px; } .bar.bar-big::before { content: ''; position: absolute; left: 0; top: -2.7px; height: 10px; width: 10px; border-radius: 50%; background: #0A7A60; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: MOVE-BG; animation-name: MOVE-BG; } .t_center .bar.bar-big::before { margin: auto; } .t_right .bar.bar-big::before { left: auto; margin: auto; right: 0; } .section-title span { color: #0A7A60 ; } @-webkit-keyframes MOVE-BG { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(88px); transform: translateX(88px); } } @keyframes MOVE-BG { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(88px); transform: translateX(88px); } } .video-box .section-title.style1.center .description { font-size: 16px; margin: 16px auto 0; width: 44%; color: #fff; } /*style three*/ .section-title.style3 .subtitle { font-size: 18px; text-transform: capitalize; font-weight: 500; color: #0A7A60 ; margin: 0 0 16px; position: relative; margin-left: 0px; display: inline-block; } .section-title.style3 .subtitle::before { position: absolute; content: ""; top: 10px; left: -55px; margin: auto; height: 2px; width: 41px; background: #0A7A60 ; } .section-title.style3 .subtitle:after { position: absolute; content: ""; top: 10px; right: -55px; margin: auto; height: 2px; width: 41px; background: #0A7A60 ; } /*style four*/ .section-title.style4 h2 span { background: linear-gradient(90deg, #CAFF5C 0%, #46FEC0 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 60px; font-weight: 800; } .section-title.style4 .description { font-size: 17px; margin: 15px 0 0; line-height: 28px; color: #A8A8B3; } .section-title.style5 h2 { font-size: 100px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #bbf737; color: transparent; letter-spacing: 20px; -webkit-mask-image: linear-gradient(-75deg, rgba(191,247,47,0.6) 50%, #BEF638 50%, rgba(191,247,47,1) 70%); -webkit-mask-size: 200%; animation: shine 3s infinite; transition: .5s; position: absolute; left: -85%; right: 0; bottom: 71px; text-align: center; transform: rotate(-90deg); } .center .section-title.style4 .description { font-size: 17px; margin: 15px 0 0; line-height: 28px; color: #7b7b7b; width: 54%; margin: 7px auto 0; } /*style five*/ .section-title.style5 h5 { font-size: 18px; text-transform: capitalize; letter-spacing: 0px; margin: 0 0 7px; position: relative; left: 25px; display: inline-block; } .section-title.style5 h5:before { position: absolute; content: ""; top: 5px; left: -25px; height: 15px; width: 15px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/Startup.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } /*section title seven*/ .section-title.style7.center h5.subtitle { position: relative; display: inline-block; color: #0A7A60 ; font-size: 16px; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; margin: 0 0 15px; } .section-title.style7.center h5.subtitle:before { position: absolute; content: ""; top: 5px; left: -21px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/dots-1.png); height: 12px; width: 12px; background-repeat: no-repeat; background-position: center center; } .section-title.style7.center h5.subtitle:after { position: absolute; content: ""; top: 5px; left: inherit; right: -20px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/dots-1.png); height: 12px; width: 12px; background-repeat: no-repeat; background-position: center center; } .section-title.style7 h3.title, .section-title.style7 h2 { font-size: 39px; font-weight: 800; line-height: 1; } .section-title.style7.left h5.subtitle { color: #0A7A60 ; letter-spacing: 0; margin: 0 0 17px; padding-left: 27px; position: relative; font-size: 16px; font-weight: 400; } .section-title.style7.left h5:before { position: absolute; content: ""; top: 5px; left: 0; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/dots-1.png); height: 12px; width: 12px; background-repeat: no-repeat; background-position: center center; } /*style eight*/ .section-title.style8.left h5.subtitle { display: inline-block; position: relative; } .section-title.style8.left h5.subtitle:before { content: ""; position: absolute; width: 160px; height: 1px; background-image: linear-gradient(90deg, #0d6dff 0%, #0d6dff 5%, #0b0b33 92%, #0b0b33 100%); left: 100%; top: 10px; margin: 0 0 0 10px; } .section-title.style8 h3.title, .section-title.style8 h2{ margin: 0 0 0; font-size: 38px; font-weight: 800; line-height: 1.2; } .section-title.style8.center h5.subtitle { display: inline-block; position: relative; } .section-title.style8.center h5.subtitle:before { content: ""; position: absolute; width: 160px; height: 1px; background-image: linear-gradient(90deg, #0d6dff 0%, #0d6dff 5%, #0b0b33 92%, #0b0b33 100%); left: 100%; top: 10px; margin: 0 0 0 10px; } .section-title.style8.center h5.subtitle:after { content: ""; position: absolute; width: 160px; height: 1px; background-image: linear-gradient(90deg, #0b0b33 0%, #0b0b33 8%, #0d6dff 95%, #0d6dff 100%); top: 11px; right: 100%; margin: 0 10px 0 0; } /*section title nine*/ .section-title.style9.left .subtitle { font-size: 18px; letter-spacing: 0; margin: 0 0 20px; position: relative; left: 31px; color: #0A7A60 ; } .section-title.style9.left .subtitle:before { position: absolute; content: ""; top: 2px; left: -31px; height: 26px; width: 22px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/04/icon.png); background-repeat: no-repeat; } .section-title.style9 h3.title, .section-title.style9 h2{ margin: 0 0 0; font-size: 46px; font-weight: 800; line-height: 1.2; } .section-title.style9 span { color: #0A7A60 ; font-weight: 500; } /*section title 12*/ .section-title.style12 h5.subtitle { position: relative; display: inline-block; } .section-title.style12 h5.subtitle:before{ position:absolute; content:""; width: 16px; height: 16px; top: 6px; left: 2px; background:url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Vector-1-1.png); } .section-title.style12 span { color: #fff; font-weight: 300; } /*crypto title*/ .crypto .section-title.style1 .subtitle { letter-spacing: 5px; margin: 0 0 15px; background: linear-gradient(90deg, #1f61ea, #007cf0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } @-webkit-keyframes MOVE-LG { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(60px); transform: translateX(60px); } } /* ============ Feature Box ============ */ .feature-box.style1 { background: #ffffff; box-shadow: 0 0 5px rgb(0 0 0 / 10%); border-bottom: 3px solid #2663e4; border-radius: 6px 6px 6px 6px; padding: 35px 20px 32px; display: flex; align-items: center; gap: 22px; transition: .5s; } .feature-box.style1 .feature-box-icon i { color: #2663e4; background-color: #f7f9fa; font-size: 40px; height: 90px; width: 90px; line-height: 90px; border-radius: 100% 100% 100% 100%; display: inline-block; text-align: center; } .feature-box.style1:hover .feature-box-icon i { color: #ffffff; background-color: #2a6dec; } .feature-box.style1 .feature-box-title h2 { font-size: 18px; text-transform: uppercase; margin: 0 0 8px; } .feature-box.style1 p.feature-box-desc { margin: 0; } /*style two*/ .feature-box.style1.style2 { padding: 30px 20px 27px; } /*feature box style three*/ .feature-box.style3 { background: rgba(0, 0, 0, 0.67); border: 1px solid rgba(255, 255, 255, 0.10); padding: 15px 23px 30px; position: relative; z-index: 1; } .feature-box.style3:before { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 3px; background: #0A7A60 ; z-index: -1; transition: .3s; } .feature-box.style3:hover::before { width: 100%; } .feature-box.style3 .feature-box-content { overflow: hidden; } .feature-box.style3 .feature-box-icon { float: left; margin-right: 20px; padding-top: 18px; } .feature-box.style3 .feature-box-title h2 { font-size: 20px; margin: 15px 0 10px; transition: .3s; color: #fff; } .feature-box.style3 p.feature-box-desc { color: #fff; margin: 0 0 15px; } .feature-box.style3 .feature-box-icon.two { padding: 0; position: absolute; right: 10px; bottom: 5px; font-size: 40px; color: #69717d; opacity: 0.4; margin: 0; } /*feature box style four*/ .feature-box.style4 { background: #fff; text-align: center; box-shadow: 6px 5px 30px 0px rgba(0, 0, 0, .12); border-radius: 7px; padding: 28px 20px 28px; transition: .4s; z-index: 1; position: relative; } .feature-box.style4:hover { transform: translateY(-10px); } .feature-box.style4:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 7px; z-index: -1; } .feature-box.style4:hover:before { transform: scaleY(1); } .feature-box.style4 .feature-box-icon i { font-size: 48px; color: #0A7A60 ; margin-bottom: 15px; transition: .4s; display: inline-block; } .feature-box.style4:hover .feature-box-icon i, .feature-box.style4:hover .feature-box-title h2, .feature-box.style4:hover p.feature-box-desc{ color: #fff; } .feature-box.style4 .feature-box-title h2 { font-size: 22px; font-weight: 700; margin-bottom: 15px; transition: .4s; } .feature-box.style4 p.feature-box-desc { transition: .5s; margin: 0 0 17px; } /*feature box*/ .feature-box.style5 { background: #fff; text-align: center; box-shadow: 6px 5px 30px 0px rgba(0, 0, 0, .12); border-radius: 7px; padding: 50px 37px; transition: .4s; } .feature-box.style5:hover { transform: translateY(-10px); } .feature-box.style5:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 7px; z-index: -1; } .feature-box.style5:hover:before { transform: scaleY(1); } .feature-box.style5 .feature-box-icon i { background: #edf4fc; width: 130px; height: 130px; border-radius: 100%; line-height: 130px; font-size: 45px; color: #0A7A60 ; margin-bottom: 20px; transition: .4s; display: inline-block; text-align: center; } .feature-box.style5:hover .feature-box-icon i { background: rgb(255, 255, 255); } .feature-box.style5 .feature-box-title h2 { font-size: 23px; font-weight: 700; margin-bottom: 15px; transition: 0.4s; } .feature-box.style5 p.feature-box-desc { transition: .5s; } .feature-box.style5 .feature-btn a { text-transform: uppercase; font-weight: 600; font-size: 14px; margin-top: 24px; display: inline-block; color: rgb(12, 90, 219); transition: 0.4s; } .feature-box.style5 .feature-btn a i{ margin-left: 6px; } .feature-box.style5:hover .feature-btn a, .feature-box.style5:hover .feature-box-title h2, .feature-box.style5:hover p.feature-box-desc{ color: #fff; } /*feature box style six*/ .feature-box.style6 { border-radius: 10px; overflow: hidden; transition: 0.5s; position: relative; } .feature-box.style6 .thumb_img { position: relative; z-index: 1; line-height: 0; } .feature-box.style6 .thumb_img:before { content: ""; position: absolute; background: rgba(41, 55, 66, 0.6); height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; border-radius: 7px; z-index: 1; } .feature-box.style6:hover .thumb_img:before { transform: scaleY(1); background: rgba(12, 90, 219, 0.85); } .feature-box.style6 .thumb_img img { width: 100%; } .feature-box.style6 .feature-box-content { position: absolute; bottom: -92px; left: 0; right: 0; margin: auto; padding: 0 35px 34px; z-index: 22; transition: .5s; } .feature-box.style6:hover .feature-box-content{ bottom:20px; } .feature-box.style6 .feature-box-title h2 { font-size: 23px; font-weight: 700; margin: 43px 0 15px; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; color: #fff; line-height: 30px; } .feature-box.style6 p.feature-box-desc { margin: 0 0 44px; overflow: hidden; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; color: #fff; opacity: 0; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .feature-box.style6 .feature-btn a{ opacity: 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .feature-box.style6:hover p.feature-box-desc, .feature-box.style6:hover .feature-btn a{ opacity: 1; } .feature-box.style6 .feature-btn a i { margin-left: 5px; } /*feature style seven*/ .feature-box.style7 { border-radius: 0px 50px 50px 50px; box-shadow: 0px 10px 29.7px 0.3px rgba(225, 225, 225, 0.64); padding: 35px 28px 30px 28px; background: #fff; text-align: center; transition: .5s; z-index: 1; position: relative; } .feature-box.style7:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 0px 50px 50px 50px; z-index: -1; } .feature-box.style7:hover:before { transform: scaleY(1); } .feature-box.style7:hover{ transform: translateY(-10px); } .feature-box.style7 .feature-box-icon i { border-radius: 0px 40px 40px 40px; height: 70px; width: 70px; font-size: 25px; line-height: 70px; display: inline-block; background: #edf4fc; color: #0A7A60 ; text-align: center; } .feature-box.style7 p.feature-box-desc{ transition: .5s; } .feature-box.style7 .feature-btn a { transition: .5s; } .feature-box.style7 .feature-btn a i{ margin-left: 5px; } .feature-box.style7 .feature-box-title h2 { font-size: 23px; font-weight: 700; margin: 27px 0 15px; transition: .4s; } .feature-box.style7:hover .feature-box-icon i{ background: #fff; } .feature-box.style7:hover .feature-box-title h2, .feature-box.style7:hover .feature-btn a, .feature-box.style7:hover p.feature-box-desc{ color: #fff; } /*feature box style eight*/ .feature-box.style8 { text-align: left; border-style: solid; border-width: 0px 0px 2px 0px; border-color: #0A7A60; border-radius: 0px 0px 0px 0px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); padding: 34px 30px 34px; position: relative; z-index: 2; transition: .5s; } .feature-box.style8:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 0; z-index: -1; } .feature-box.style8:hover:before { transform: scaleY(1); } .feature-box.style8:hover{ transform: translateY(-10px); } .feature-box.style8 .feature-box-title h2 { margin: 30px 0 12px; transition: .5s; font-size: 22px; } .feature-box.style8:hover .feature-box-title h2, .feature-box.style8:hover .feature-btn a, .feature-box.style8:hover p.feature-box-desc{ color: #fff; } /*feature box style nine*/ /*style fourteen*/ .feature-box.style9 { border-radius: 5px; filter: drop-shadow(0px 5px 30px rgba(162,188,231,0.3)); background-color: #ffffff; position: relative; z-index: 1; overflow: hidden; text-align: center; padding: 45px 30px 36px; transition: .3s; } .feature-box.style9:hover { transform: translate3d(0,-6px,0); } .feature-box.style9:before { position: absolute; content: ""; bottom: 0; left:50%; height:100%; width:0; background: #02CB99; z-index: -1; transition: .5s; } .feature-box.style9 .feature-box-icon i { width: 116px; height: 116px; line-height: 116px; background: #DFF3E7; border-radius: 100%; color: #00CC99; display: inline-block; border-radius: 33% 66% 70% 30%/49% 62% 38% 51%; font-size: 50px; } .feature-box.style9 .feature-box-title h2 { margin: 26px 0 16px 0; font-size: 22px; } .feature-box.style9 .feature-btn a { display: inline-block; } .feature-box.style9:hover .feature-btn a{ color: #fff; } .feature-box.style9 .feature-btn a i{ display: inline-block; margin-left: 5px; } .feature-box.style9 p.feature-box-desc{ transition: .5s; } .two .feature-box.style9:before { background: #EA599E; } .three .feature-box.style9:before { background:#FF6A01; } .four .feature-box.style9:before { background: #0A7A60; } .five .feature-box.style9:before { background: #774BE5; } .feature-box.style9:hover:before{ width: 100%; left: 0; } .feature-box.style9:hover .feature-box-title h2, .feature-box.style9:hover p.feature-box-desc{ color: #fff; } /*feature box style 10*/ .feature-box.style10 { display: flex; justify-content: center; transition: .5s; } .feature-box.style10 p.feature-box-desc { transition: .5s; width: 80%; margin: 0 0 0; } .feature-box.style10 .feature-btn a { position: absolute; top: -22px; right: 40px; transform: rotate(-45deg); display: inline-block; /* margin-left: 6px; */ font-size: 25px; font-weight: 800; background-color: rgba(48, 110, 255, 0); border: 1px solid rgba(255, 255, 255, 0.2); color: #3F413F; height: 80px; width: 80px; line-height: 80px; text-align: center; border-radius: 100%; transition: .5s; } .feature-box.style10 .feature-btn a:hover { background: linear-gradient(to left, #46FEC0, #CAFF5C 100%); transition: .5s; } /*feature box style 11*/ .feature-box.style11 { background-color: transparent; text-align: left; position: relative; z-index: 1; margin-bottom: 20px; padding: 26px 20px 26px 30px; border-radius: 10px; background-image: linear-gradient(90deg, rgba(187, 247, 55, 0.07058823529411763) 0%, rgba(187, 247, 55, 0) 100%); z-index: 1; transition: .5s; border: 1px solid #1b3527; display: flex; gap: 0px; } .feature-box.style11:hover { background: linear-gradient(90deg, rgba(187,247,55,0) 0%, rgba(187,247,55,0.10196078431372547) 100%); transition: .5s; transform: translateY(-5px); } .feature-box.style11 .feature-box-title h2 { font-size: 24px; padding: 0 0 10px; margin: 0; margin-top: 0px; color: #fff; } .feature-box.style11 .feature-box-icon { flex-shrink: 0; } .feature-box.style11 .feature-box-icon img { width: 65%; } .feature-box.style11 p.feature-box-desc { margin: 0 0 0; width: 86%; } .feature-box.style11 .feature-btn a { position: absolute; top: 40%; right: 40px; transform: rotate(-45deg); display: inline-block; font-size: 25px; font-weight: 800; color: #3E3F3D; transition: .5s; } .feature-box.style11:hover .feature-btn a { color: #fff; transition: .5s; } /*feature box style 12*/ .feature-box.style12 { border-radius: 4px; background-color: rgba(13, 110, 255, 0.10196078431372549); padding: 41px 31px 37px; transition: .5s; } .feature-box.style12:before { content: ""; position: absolute; background: #0d6eff; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 0; z-index: -1; } .feature-box.style12:hover:before { transform: scaleY(1); } .feature-box.style12:hover{ transform: translateY(-10px); } .feature-box.style12 .feature-box-icon { display: inline-block; width: 74px; height: 74px; border-radius: 37px; background-color: rgba(69, 218, 100, 0); border: 2px solid #0d6eff; line-height: 91px; transition: .5s; } .feature-box.style12:hover .feature-box-icon { background: #fff; border-color: #fff; } .feature-box.style12 .feature-box-title h2 { color: #fff; font-size: 22px; margin: 30px 0 13px; } .feature-box.style12 p.feature-box-desc { color: #9EA2AD; } .feature-box.style12:hover p.feature-box-desc { color: #fff; } .feature-box.style12 .feature-btn a { text-transform: capitalize; font-size: 15px; color: #fff; margin-top: 7px; border-bottom: 1px solid #021C3D; transition: .5s; } .feature-box.style12 .feature-btn a i{ margin-left: 7px; transform: rotate(-45deg); display: inline-block; } .feature-box.style12:hover .feature-btn a{ border-color: #fff; } /*thirteen*/ .feature-box.style13{ border-radius: 5px; padding: 0 26px 27px 26px; transition: .5s; background: #fff; position: relative; z-index: 1; text-align: center; margin: 0 0 10px 0; } .feature-box.style13:before { content: ""; position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background-image: linear-gradient(210deg, #2375fb 0%, #1129b9 100%); z-index: -1; transition: .5s; border-radius: 5px; } .feature-box.style13:hover:before { height: 100%; } .feature-box.style13 .feature-box-icon { display: inline-block; width: 80px; height: 80px; border-radius: 100%; background-color: #fff; line-height: 114px; transition: .5s; border-bottom: 3px solid #2875ff; top: -45px; position: relative; } .feature-box.style13 .feature-box-title h2 { margin: 0px 0 22px; transition: 0.5s; font-size: 20px; color: #232323; font-weight: 700; } .feature-box.style13 .feature-btn a { transition: .5s; } .feature-box.style13 p.feature-box-desc { transition: .5s; } .feature-box.style13:hover .feature-box-title h2, .feature-box.style13:hover p.feature-box-desc{ color: #fff; } .feature-box.style13:hover .feature-btn a{ color: #fff; } /*style 14*/ .feature-box.style14 { border-radius: 10px; padding: 50px 30px 42px 30px; transition: .5s; background: #fff; background-color: rgba(13, 110, 255, 0.1); position: relative; z-index: 1; text-align: center; overflow: hidden; } .feature-box.style14:before { content: ""; position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: #0d6eff; z-index: -1; transition: .5s; border-radius: 10px; } .feature-box.style14:hover:before { height: 100%; } .feature-box.style14 .feature-box-icon{ display: inline-block; width: 80px; height: 80px; border-radius: 100%; background-color: #f0932b; line-height: 80px; transition: .5s; top: 0; position: relative; } .feature-box.style14:hover .feature-box-icon{ background-color: #fff; } .feature-box.style14:hover .feature-box-icon i{ color: #0d6eff; } .feature-box.style14 .feature-box-icon i{ font-size: 30px; color: #fff; display: inline-block; } .feature-box.style14 .feature-box-title h2 { margin: 0 0 21px; transition: 0.5s; font-size: 24px; color: #fff; font-weight: 700; padding: 60px 0 0 0; } .feature-box.style14 .feature-box-title h2:before { content: ""; position: absolute; top: 148px; left: 0; right: 0; margin: auto; height: 30px; width: 1px; background-color: #f0932b; z-index: -1; transition: .5s; border-radius: 5px; } .feature-box.style14:hover .feature-box-title h2:before{ background-color: #fff; } .feature-box.style14 p.feature-box-desc { line-height: 26px; transition: 0.4s; color: #919da4; font-size: 16px; font-weight: 400; margin: 0; } .feature-box.style14:hover p.feature-box-desc{ color: #fff; } .two .feature-box.style14:hover .feature-box-icon{ background:#fff; } .two .feature-box.style14 .feature-box-icon{ background-color: #0d6eff } .three .feature-box.style14 .feature-box-icon{ background-color: #34c780; } .four .feature-box.style14 .feature-box-icon{ background-color: #f368e0; } .five .feature-box.style14 .feature-box-icon{ background-color: #00D1FB; } .six .feature-box.style14 .feature-box-icon{ background-color: #ee5253; } /*style 15*/ .feature-box.style15 { padding: 32px 23px 29px; position: relative; border: 1px solid #FF9A62; border-radius: 4px; transition: .5s; text-align: center; } .feature-box.style15:hover { transform: translate3d(0,-6px,0); } .feature-box.style15 .feature-box-icon i { display: inline-block; height: 100px; width: 90px; line-height: 100px; background: #FF9A62; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); color: #fff; font-size: 40px; border-radius: 5px; } .feature-box.style15 .feature-box-title h2 { margin: 25px 0 14px 0; line-height: 34px; font-size: 22px; color: #fff; } .two .feature-box.style15 { border: 1px solid#2875FF; } .three .feature-box.style15 { border: 1px solid#54D7AF; } .four .feature-box.style15 { border: 1px solid#F05D8A; } .two .feature-box.style15 .feature-box-icon i { background: #2875FF; clip-path: polygon(0% 0%, 100% 9%, 100% 100%, 0% 100%); } .four .feature-box.style15 .feature-box-icon i { background: #F05D8A; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); } /*feature box style 16*/ .feature-box.style17 { border-radius: 16px; background-color: rgba(255,255,255,0.050980392156862744); text-align: left; padding: 85px 38px 52px; transition: .5s; position: relative; } .feature-box.style17 .feature-number { display: inline-block; position: absolute; top: -41px; left: 0; right: 0; margin: auto; text-align: center; width: 90px; height: 90px; border-radius: 45px; background-color: #121417; transition:.5s; } .feature-box.style17:hover .feature-number{ background-color: #0A7A60 ; } .feature-box.style17:hover .feature-number span{ color: #fff; opacity:1; } .feature-box.style17 .feature-number span { width: 90px; height: 90px; border-radius: 45px; display: inline-block; text-align: center; line-height: 90px; opacity: 0.200; font-size: 26px; color: #ffffff; font-weight: 600; font-family: "Mulish"; } .feature-box.style17 p.feature-box-desc { opacity: 0.502; font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin: 20px 0 55px; } .feature-box.style17 .feature-btn a { display: inline-block; width: 50px; height: 50px; border-radius: 25px; background-color: rgba(255,255,255,0.07058823529411765); text-align: center; line-height: 50px; color: #fff; transform: rotate(-45deg); transition: .5s; } .feature-box.style17 .feature-btn a:hover{ background-color: #0A7A60 ; } /*feature box style 18*/ .feature-box.style18 { display: flex; background-color: rgba(255,255,255,0.050980392156862744); gap: 0; position: relative; padding: 35px 31px 34px; } .feature-box.style18:hover span.feature-box-number{ padding-left:40px; opacity:1; } .feature-box.style18 .feature-box-content { transition: .5s; } .feature-box.style18 span.feature-box-number { opacity: 0.502; font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Mulish"; margin-right: 33px; position: relative; transition:.5s; } .feature-box.style18 span.feature-box-number:before { position: absolute; content: ""; top: 10px; left: 0; height: 1px; width: 30px; background: #fff; transition: .5s; opacity: 0; } .feature-box.style18:hover span.feature-box-number:before{ opacity:1; } .feature-box.style18 .feature-box-title h2 { font-size: 26px; text-transform: uppercase; color: #ffffff; font-weight: 700; margin: 0 0 11px; } .feature-box.style18 p.feature-box-desc { opacity: 0.502; font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin: 0 0 0; } .feature-box.style18 .feature-btn a { display: inline-block; opacity: 0.502; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; position: absolute; right: 20px; transform: translate(-50%, -50%); top: 50%; } /*feature box style 19*/ .feature-box.style19 { display: flex; align-items: center; border: 1px solid#38393D; border-radius: 10px; padding: 27px 28px 27px; transition:.5s; } .feature-box.style19 span.feature-box-number { color: #2B55FF; font-size: 26px; font-weight: 500; position: relative; padding-right: 46px; } .feature-box.style19 span.feature-box-number:before { position: absolute; content: ""; right: 21px; top: 2px; height: 30px; width: 1px; background: #fff; opacity: 0.4; transition:.5s; } .feature-box.style19:hover span.feature-box-number:before{ opacity:0; } .feature-box.style19 span.feature-box-number:after { position: absolute; content: ""; right: -14px; top: 17px; height: 1px; width: 50px; background: #2B55FF; transition: .5s; opacity: 0; } .feature-box.style19:hover span.feature-box-number:after{ opacity:1; } .feature-box.style19 .feature-box-title h2 { color: #fff; font-size: 26px; margin: 0 0 0; font-weight: 500; position: relative; transition:.5s; } .feature-box.style19:hover .feature-box-title h2 { margin-left: 30px; position: relative; } /* =================== Dream-IT Button =================== */ .dreamit-button .button { padding: 13px 29px; font-weight: 600; color: #fff; background: #0A7A60 ; display: inline-block; border-radius: 4px; position: relative; z-index: 1; overflow: hidden; font-size: 17px; } .dreamit-button .button:before { position: absolute; content: ""; top: 0; width: 100%; left: 0; right: 0; bottom: 0; background: #171717; clip-path: circle(0% at 50% 50%); transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 0.8s; z-index: -1; } .dreamit-button .button:hover:before { clip-path: circle(100% at 50% 50%); transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 4s; } .dreamit-button .button i { margin-left: 6px; } /*button style two*/ .dreamit-button .button { background: linear-gradient(to left, #2475FC, #1129B9 100%); padding: 16px 31px; font-size: 16px; font-weight: 500; display: inline-block; transition: .5s; position: relative; overflow: hidden; z-index: 44; border-radius: 5px; color: #fff; } /*style three*/ .dreamit-button.style3 .dreamit-button a { background: linear-gradient(to left, #46FEC0, #CAFF5C 100%); padding: 16px 40px; font-size: 16px; font-weight: 600; display: inline-block; transition: .5s; position: relative; overflow: hidden; z-index: 1; border-radius: 5px; color: #101210; margin-top: 34px; } .dreamit-button.style3 .dreamit-button a:hover { background: linear-gradient(to left, #CAFF5C, #46FEC0 100%); transition: .5s; color: #fff; } .dreamit-button.style3 .button:before { display:none ; } /*style six*/ .dreamit-button.style6 .dreamit-button a { font-size: 20px; color: #0A7A60 ; font-weight: 500; font-family: "Nunito"; display:inline-block; } .dreamit-button.style6 .dreamit-button a i { display: inline-block; margin-left: 6px; font-weight: 700; transform: rotate(-45deg); } /*style seven*/ .dreamit-button.style7 .btn_button{ position: relative; /*z-index: 2;*/ } .dreamit-button.style7 .dreamit-button a { display: inline-block; position: relative; border: 1px solid#1e1e1e; border-radius: 30px; padding: 16px 45px; color: #1e1e1e; background: #1e1e1e; overflow: inherit; color: #041424; font-weight: 500; text-transform: capitalize; } .dreamit-button.style7 .dreamit-button a:after { position: absolute; content: ""; bottom: 3px; left: -3px; height: 100%; width: 100%; background: #fff; border-radius: 30px; border: 1px solid#46FEC0; z-index: -1; transition: all 400ms linear; } .dreamit-button.style7 .dreamit-button a:hover:after{ left:0; bottom:0; } .dreamit-button.style7 .button:before { display:none; } .dreamit-button.style7 .dreamit-button .button i { font-size: 18px; width: inherit; height: inherit; line-height: 0; text-align: center; background: transparent; color: #041424; } .dreamit-button.style7 .dreamit-button .button:hover i { background: transparent; color: #041424; } /*button style eight*/ .dreamit-button.style8 .button { background: #2B2C30; padding: 38px 10px 0; font-size: 16px; font-weight: 500; display: inline-block; transition: .5s; position: relative; overflow: hidden; z-index: 44; border-radius: 5px; color: #fff; width: 120px; height: 120px; border-radius: 60px; background-color: #121417; text-align: center; } .dreamit-button.style8 .button:before{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); } .dreamit-button.style8 .button i{ display:inline-block; transform: rotate(-45deg); display: inline-block; } /*button style 10*/ .dreamit-button.style10 a.button i { position: absolute; text-align: center; line-height: 53px; right: -53px; top: 0; width: 53px; height: 53px; border-radius: 27px; background-image: linear-gradient(-90deg, #2375fb 0%, #2375fb 1%, #0d6dfd 100%); color: #fff; display: inline-block; } .dreamit-button.style10 .button { padding: 12px 31px; display: inline-block; transition: .5s; position: relative; overflow: visible; z-index: 44; border-radius: 5px; color: #fff; border-radius: 25px; background-image: linear-gradient(-90deg, #2375fb 0%, #2375fb 1%, #0d6dfd 100%); font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 500; font-family: "Mulish"; } .dreamit-button.style10 .button:before{ display:none; } .dreamit-button.style10 .button:hover{ background-image: linear-gradient(-90deg, #2375fb 0%, #0d6dfd 1%, #2375fb 100%); } .dreamit-button.style10 .button:hover i { background-image: linear-gradient(-90deg, #2375fb 0%, #0d6dfd 1%, #2375fb 100%); } .call .dreamit-button.style8 .button { padding: 21px 15px 0; } /*button style 12*/ .dreamit-button.style12 .button { background: #2B2C30; padding: 38px 10px 0; font-size: 16px; font-weight: 500; display: inline-block; transition: .5s; position: relative; overflow: inherit; z-index: 44; width: 94px; height: 94px; border-radius: 100%; background-color: #232323; text-align: center; border: 1px solid rgba(35,35,35,0.2); } .dreamit-button.style12 .button:before { background: #fff; border-radius: 100%; } .dreamit-button.style12 .button:after { position: absolute; content: ""; top: -46px; left: -21px; width: 140px; height: 140px; border-radius: 70px; background-color: rgba(255,255,255,0); border: 1px solid rgba(35,35,35,0.2); } .dreamit-button.style12 .button i{ display:inline-block; transform: rotate(-45deg); display: inline-block; } /*button style 13*/ .dreamit-button.style13 a.button i { position: absolute; text-align: center; line-height: 60px; right: -58px; top: 0; width: 60px; height: 60px; border-radius: 30px; background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); color: #fff; display: inline-block; transform: rotate(-45deg); } .dreamit-button.style13 .button { padding: 17px 43px; display: inline-block; transition: .5s; position: relative; overflow: visible; z-index: 44; border-radius: 5px; color: #fff; border-radius: 30px; font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 500; font-family: "Mulish"; background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); } .dreamit-button.style13 .button:before{ display:none; } .dreamit-button.style13 .button:hover{ background-image: linear-gradient(-90deg, #2375fb 0%, #0d6dfd 1%, #2375fb 100%); } .dreamit-button.style13 .button:hover i { background-image: linear-gradient(-90deg, #2375fb 0%, #0d6dfd 1%, #2375fb 100%); } /*green-solar*/ .green-solar{ position:relative; } .green-solar:before { position: absolute; content: ""; bottom: 0px; left: -25px; width: 25px; height: 25px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Botom-7.png); background-position: center center; background-repeat: no-repeat; z-index: 22; background-size: cover; } .green-solar:after { position: absolute; content: ""; top: -24px; right: 0px; width: 25px; height: 25px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Botom-7.png); background-position: center center; background-repeat: no-repeat; z-index: 22; background-size: cover; } /* ============ Service Box ============ */ .service-box.style1 { border-style: solid; border-width: 0px 0px 3px 0px; border-color: #0A7A60; border-radius: 5px 5px 5px 5px; background-color: #FFFFFF; padding: 41px 33px 43px; transition: .5s; } .service-box.style1 .icon { color: #0A7A60; background-color: #F7F9FA; border-radius: 100% 100% 100% 100%; text-align: center; height: 95px; width: 95px; line-height: 95px; font-size: 40px; transition: .5s; } .service-box.style1:hover .icon{ color: #FFFFFF; background-color: #0A7A60; } .service-box.style1 h3.title { margin: 25px 0 15px 0; font-size: 20px; padding: 0; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .service-box.style1 p.description { margin: 0 0 39px; } .service-box.style1 .service-btn a { border-style: solid; border-width: 1px 1px 1px 1px; border-color: #DDDDDD; border-radius: 30px 30px 30px 30px; margin: 15px 0px 0px 0px; padding: 10px 24px 10px 25px; font-size: 14px; text-transform: uppercase; } .service-box.style1 .service-btn > a i { margin-left: 7px; } .service-box.style1:hover .service-btn a { background: #0A7A60 ; border-color: #0A7A60 ; color: #fff !important; } /*service box style two*/ .service-box.style2 { text-align: left; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF4D; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0); background-color: #00000000; padding: 31px 30px 30px; transition: .5s; border-radius: 10px; } .service-box.style2:hover{ background: #0A7A60; border-color: #0A7A60; } .service-box.style2 h3.title { color: #fff; margin: 27px 0 14px; font-size: 22px; transition: .5s; } .service-box.style2 p.description { margin: 0 0 16px; color: #fff; transition: .5 } .service-box.style2 .service-btn a { display: inline-block; font-size: 17px; font-weight: 600; /* letter-spacing: -1px; */ position: relative; color: #fff; transition: .5; margin-top: 10px; } .service-box.style2 .service-btn a i{ margin-left: 6px; } /*service box*/ .service-box.style2.style3{ position: relative; z-index: 1; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0); } .service-box.style2.style3:after{ position: absolute; content: ""; top: 0; left: 0; height: 100%; width:100%; background: url('http://wp.ditsolution.net/techno/wp-content/uploads/2025/02/slider05.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; opacity: 0; z-index: -1; border-radius: 10px; transition:.5s; } .service-box.style2.style3:hover:after{ opacity: 1; } .service-box.style2.style3 .icon { color: #FFFFFF; background-color: #0A7A60; border-radius: 50% 50% 50% 50%; text-align: center; margin: 0px 0px 30px 0px; height: 80px; width: 80px; font-size: 34px; line-height: 80px; transition: .5s; } .service-box.style2.style3:hover{ background-color: rgba(12, 90, 219, 1.0); background: transparent; border-color: transparent; transform: translateY(-8px); } .service-box.style2.style3:hover .icon{ color: #0A7A60; background-color: #FFFFFF; } .service-box.style2.style3 h3.title{ color: #232323; } .service-box.style2.style3 p.description{ color: #616161; } .service-box.style2.style3 .service-btn a { color: #0A7A60 ; } .service-box.style2.style3 h3.title, .service-box.style2.style3 p.description, .service-box.style2.style3 .service-btn a{ transition:.5s; } .service-box.style2.style3:hover h3.title, .service-box.style2.style3:hover p.description, .service-box.style2.style3:hover .service-btn a{ color: #fff; } /*service style four*/ .service-box.style2.style3.style4 { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0); background-color: #232435; border-color: #232435; } /*service style five*/ .service-box.style5 { padding: 60px 30px 55px; text-align: center; position: relative; background: #fff; border: 2px solid transparent; border-radius: 7px; margin-bottom: 30px; transition: .5s; } .service-box.style5:hover { border: 2px solid #0A7A60 ; } .service-box.style5 .icon { width: 95px; height: 95px; line-height: 95px; background: #0A7A60 ; border-radius: 100%; color: #fff; display: inline-block; margin-bottom: 33px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; text-align: center; font-size: 40px; } .service-box.style5 h3.title { margin: 0 0 15px; font-size: 22px; padding: 0; } .service-box.style5 .service-btn { margin-top: 0; position: absolute; bottom: -24px; left: 0; right: 0; transition: .4s; } .service-box.style5 .service-btn a { margin-left: 0; font-size: 21px; width: 50px; height: 50px; color: #0A7A60 ; background: #fff; line-height: 50px; border-radius: 100%; color: #0A7A60 ; display: inline-block; border: 2px solid #0A7A60 ; } .service-box.style5:hover .service-btn a { background: #0A7A60 ; color: #fff; } /*service box style six*/ .service-box.style6 { padding: 28px 32px 32px; text-align: center; position: relative; background: #00000000; border-radius: 7px; transition: .5s; box-shadow: 2px 10px 50px rgba(158, 158, 158, .25); z-index: 999; } .service-box.style6:hover { transform: translateY(-10px); } .service-box.style6:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 7px; z-index: -1; } .service-box.style6:hover:before { transform: scaleY(1); } .service-box.style6 .service-btn a i { margin-left: 5px; } /*service box style seven*/ .service-box.style7 { text-align: center; padding: 33px 31px 40px; border: 1px solid #e4ecf9; position: relative; z-index: 1; background: #fff; border-radius: 5px; transition: .5s; } .service-box.style7:hover{ border-color: #0A7A60; } .service-box.style7::before { position: absolute; right: 0; bottom: 0; width: 45px; height: 45px; content: ""; background: #adc7f1; transition: .3s; z-index: -1; border-radius: 5px; } .service-box.style7:hover::before { width: 100%; height: 100%; background: #0A7A60; } .service-box.style7 h3.title { font-size: 23px; margin: 27px 0 14px; } .service-box.style7 .service-btn a i { margin-left: 5px; } .service-box.style7 p.description { margin: 0; } .service-box.style7:hover h3.title, .service-box.style7:hover p.description, .service-box.style7:hover .service-btn a{ color: #fff; } /*service box style eight*/ .service-box.style8 { padding: 28px 32px 32px; text-align: center; position: relative; background: #00000000; border-radius: 7px; transition: .5s; box-shadow: 2px 10px 50px rgba(158, 158, 158, .25); z-index: 999; } .service-box.style8:hover { transform: translateY(-10px); } .service-box.style8:before { content: ""; position: absolute; background: #0A7A60 ; height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 7px; z-index: -1; } .service-box.style8:hover:before { transform: scaleY(1); } .service-box.style8 h3.title { margin: 31px 0 12px; transition: .5s; font-size: 22px; } .service-box.style8 p.description{ transition: .5s; } .service-box.style8 .service-btn a { color: #0A7A60 ; display: inline-block; font-size: 16px; font-weight: 600; letter-spacing: -1px; position: relative; } .service-box.style8 .service-btn a i{ display: inline-block; margin-left: 6px; } .service-box.style8:hover h3.title, .service-box.style8:hover p.description, .service-box.style8:hover .service-btn a{ color:#fff; } /*service box style nine*/ .service-box.style9 .icon i { width: 90px; height: 90px; line-height: 90px; background: #e8ecfc; margin-bottom: 33px; border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; text-align: center; display: inline-block; } .service-box.style9:hover .icon i { background: #0A7A60 ; color: #fff; } .service-box.style9 h3.title { position: relative; font-size: 22px; margin: 0 0 32px; } .service-box.style9 h3.title:before { content: ''; position: absolute; left: 0; bottom: -8px; background: #d1d1d1; width: 100px; height: 1px; -o-transition: .6s; transition: .6s; -webkit-transition: .6s; right: 0; margin: auto; } .service-box.style9 .service-btn a { border: 1px solid #e8ecfc; padding: 10px 27px; margin-top: 14px; font-weight: 600; border-radius: 0 15px; margin-top: 11px; display: inline-block; transition: .5s; } .service-box.style9:hover .service-btn a { color: #fff; background: #0A7A60 ; } /*service box style10*/ .service-box.style10 { display: flex; padding: 0 10px; } .service-box.style10 .service-number { position: relative; color: #0A7A60 ; font-size: 19px; font-weight: 700; margin-right: 50px; display: block; transition: .5s; } .service-box.style10 .service-number::before { position: absolute; right: -40px; top: 16px; width: 30px; height: 1px; background: #0A7A60 ; content: ""; } .service-box.style10:hover .service-number{ animation: wobble_vertical 1s forwards ease-in-out 0s; } .service-box.style10 p.description { margin: 0 0 17px; } .service-box.style10 .service-btn a { color: #0A7A60; font-size: 16px; font-weight: 500; letter-spacing: 1px; } /*service box style 11*/ /*service section style eleven*/ .service-box.style11 { background: #E6EFFF; padding: 36px 39px 42px; border-radius: 7px; position: relative; z-index: 1; overflow: hidden; transition: .5s; } .service-box.style11:hover { transform: translate3d(0,-5px,0); } .service-box.style11 .icon{ float: right; position: relative; top: 20px; transition: .5s; } .service-box.style11 h3.title{ margin: 0 0 15px 0; font-size: 24px; transition: .5s; } .service-box.style11 .service-btn { margin-top: 34px; } .service-box.style11 .service-btn > a { display: inline-block; color: #fff; font-weight: 400; padding: 9px 28px; background: linear-gradient(to left, #2475FC, #1129B9); border-radius: 5px; transition: .5s; border: 1px solid #1129B9; font-size: 16px; transition: .5s; } .service-box.style11:before { position: absolute; content: ""; z-index:-1; top: 0; right: 0; width: 0; height: 100%; background: linear-gradient(to left, #2475FC, #1129B9); border-radius: 10px; transition: .5s; } .service-box.style11:hover:before{ left: 0; width: 100%; } .service-box.style11 .description{ transition:.5s; } .service-box.style11:hover h3.title, .service-box.style11:hover .description{ color: #fff; } .service-box.style11:hover .service-btn > a{ border-color: #fff; background: transparent; } /*service box style 12*/ .service-box.style12 { filter: drop-shadow(rgba(162, 188, 231, 0.1) 0px 5px 30px); background-color: rgb(255, 255, 255); position: relative; z-index: 1; margin-bottom: 10px; margin-right: 10px; border-radius: 5px; overflow: hidden; transition: 0.5s; padding: 36px 43px 31px; } .service-box.style12:after { position: absolute; content: ""; z-index: -1; right: 0; top: 0; width: 0; height: 100%; background: url('http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/box-bg2.png'); transition: .5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .service-box.style12:hover:after { left: 0; width: 100%; } .service-box.style12:before { position: absolute; content: ""; z-index: 1; right: 0; bottom: 70px; width: 100%; height: 1px; border: 1px solid rgba(35, 35, 35, 0.07058823529411765); transition: .5s; } .service-box.style12 .icon { display: inline-block; margin-right: 9px; } .service-box.style12 .icon i { color: rgb(255, 255, 255); height: 37px; width: 37px; font-size: 18px; line-height: 37px; text-align: center; border-radius: 100%; background: rgb(14, 209, 179); margin: 0px 0px 24px; display: inline-block; } .service-box.style12 .sub-title { font-size: 15px; color: rgb(12, 90, 219); font-weight: 500; margin: 0px; padding: 0px; display: inline-block; } .service-box.style12 .title { font-size: 24px; margin: 0 0 0; } .service-box.style12 p.description { margin: 17px 0 50px; transition: .5s; } .service-box.style12 .service-btn a { display: inline-block; color: #0A7A60 ; transition: .5s; position: relative; font-weight: 500; letter-spacing: 0.5px; } .service-box.style12:hover .sub-title, .service-box.style12:hover p.description, .service-box.style12:hover .service-btn a, .service-box.style12:hover .title{ color: #fff; } .service-box.style12:hover:before{ border-color: rgba(255, 255, 255, 0.1019607843137254); } /*service box style 13*/ .service-box.style13 { overflow: hidden; margin-bottom: 7px; position: relative; transition: .5s; border-radius: 10px; filter: drop-shadow(0 0 20px rgba(170, 192, 228, 0.3)); background-color: #ffffff; padding: 20px 20px 29px; } .service-box.style13:hover { transform: translate3d(0,-6px,0); } .service-box.style13 .serice_thumb{ position: relative; z-index: 1; line-height: 0; } .service-box.style13 .serice_thumb:before { position: absolute; content: ""; left: 50%; bottom: 0; width: 0; height: 100%; border-radius: 10px; background-color: rgba(4,96,248,0.6); transition: .8s; } .service-box.style13:hover .serice_thumb:before { width: 100%; left: 0; } .service-box.style13 .serice_thumb img { width: 100%; } .service-box.style13 .content { padding: 22px 16px 0; } .service-box.style13 .icon{ height: 24px; width: 24px; line-height: 24px; text-align: center; border-radius: 100%; background: #D4E4FF; font-size: 12px; margin: 0 0 8px; display: inline-block; } .service-box.style13 .icon i{ color:#0A7A60 ; } .service-box.style13 h4.sub-title { display: inline-block; margin: 0 0 0; color: #0A7A60 ; font-size: 16px; margin-left: 9px; } .service-box.style13 h3.title{ margin: 0 0 0; } .service-box.style13 h3.title a { font-size: 24px; margin: 4px 0 0; font-weight: 700; color: #232323; } .service-box.style13 h3.title a:hover{ color: #0A7A60 ; } /*service box style 14*/ .service-box.style14 { padding: 40px 48px 44px; border-radius: 10px; background: linear-gradient(0deg, rgba(187, 247, 55, 0) 0%, rgba(187, 247, 55, 0.058823529411764705) 100%); position: relative; z-index: 1; text-align: center; transition: .5s; } .service-box.style14:before { position: absolute; content: ""; border-top: 1px solid rgba(187,248,56,0.5); border-bottom: 1px solid rgba(187,248,56,0.5); transform: scale(0, 1); top: 0; bottom: 0; left: 0; right: 0; transition: .5s; border-radius: 5px; } .service-box.style14:after { position: absolute; content: ""; border-left: 1px solid rgba(187,248,56,0.5); border-right: 1px solid rgba(187,248,56,0.5); transform: scale(1, 0); top: 0; bottom: 0; left: 0; right: 0; transition: .5s; border-radius: 5px; } .service-box.style14:hover::before { transform: scale(1); } .service-box.style14:hover::after { transform: scale(1); } .service-box.style14 h3.title { margin: 20px 0 18px; } .service-box.style14 h3.title a { display: block; padding: 0; position: relative; z-index: 1; color: #fff; font-size: 20px; } .service-box.style14 .service-btn a { transition: .5s; position: relative; z-index: 22; } .service-box.style14 .service-btn a:hover{ color: rgba(187,248,56,0.5); } .service-box.style14 .service-btn a i{ margin-left: 5px; } /*service box style 15*/ .service-box.style15 .serice_thumb { position: relative; z-index: 1; line-height: 0; } .service-box.style15 .serice_thumb:before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #ffef6a 0%, #bef741 100%); opacity: .0; transition: .5s; border-radius: 10px; } .service-box.style15:hover .serice_thumb:before { opacity: 1; } .service-box.style15 .serice_thumb img { width: 100%; border-radius: 10px; height: 440px; } .service-box.style15 .content { position: absolute; bottom: 50px; left: 0; right: 0; margin: auto; text-align: center; opacity: 0; transition: .5s; } .service-box.style15:hover .content{ bottom: 110px; opacity: 1; } .service-box.style15 h4.sub-title { font-size: 18px; color: #101210; font-weight: 400; margin: 0 0 16px; } .service-box.style15 h3.title { margin: 0 0 0; } .service-box.style15 h3.title a { display: block; color: #232323; } .service-box.style15 .service-btn a { font-size: 21px; display: inline-block; transform: rotate(45deg); color: #6d6d6d; margin-top: 20px; } /*service box style 16*/ .service-box.style16 { transition: .5s; position: relative; border-radius: 30px; filter: drop-shadow(5px 0px 15px rgba(204, 204, 204, 0.25)); background: #ffffff; padding: 35px 20px 25px 30px; } .service-box.style16 .icon { margin: 0 20px 0 0; display: inline-block; } .service-box.style16 h3.title { display: inline-block; margin: 0 0 0; position: relative; top: -28px; } .service-box.style16 h3.title a { font-size: 22px; line-height: 28px; color: #232323; font-weight: 700; margin: 22px 0 40px 0; } .service-box.style16 p.description { margin: 18px 0 23px; } .service-box.style16 .service-btn a i { margin-left: 0; right: 50px; position: absolute; z-index: 1; opacity: 0; transition: 0.5s; } .service-box.style16 .service-btn a i:after { content: ""; position: absolute; top: 1px; right: -11px; background: #EFF1F7; height: 25px; width: 25px; color: blue; z-index: -1; border-radius: 100%; } .service-box.style16:hover .service-btn a i { opacity: 1; right: 40px; color: #2475fc; } /*service bos style 27*/ .service-box.style27 { border-radius: 16px; background-color: rgba(255,255,255,0); border: 1px solid rgba(97,97,97,0.15); position: relative; z-index: 1; } .service-box.style27 .content { background: #f5f7f9; padding: 43px 40px 40px; margin: 15px; transition: .5s; border-radius: 10px; } .service-box.style27:hover .content{ background: #B0E33E; } .service-box.style27 h3.title { margin: 0 0 0; font-size: 28px; padding: 62px 0 18px 0; position: relative; } .service-box.style27 h3.title:before { position: absolute; content: ""; top: 36px; left: 0; height: 1px; width: 100%; background: #E0E1E5; transition:.5s; } .service-box.style27 h3.title:after { position: absolute; content: ""; top: 36px; left: 0; height: 1px; width: 70px; background: #B0E33E; transition:.5s; -webkit-animation: moveLeftBounces-two 5s linear infinite; animation: moveLeftBounces-two 5s linear infinite; } .service-box.style27:hover h3.title:before{ background: #A1C945; } .service-box.style27:hover h3.title:after{ background: #232323; } .service-box.style27 p.description { font-size: 17px; line-height: 30px; color: #616161; } .service-box.style27 .service-btn a { display: inline-block; color: #B0E33E; margin-top: 10px; } .service-box.style27:hover .service-btn a{ color:#232323; } /*service bos style 28*/ .service-box.style28 { border-radius: 16px; background-color: rgba(255,255,255,0); position: relative; z-index: 1; padding: 43px 40px 40px; transition:.5s; } .service-box.style28 h3.title { margin: 0 0 0; font-size: 28px; padding: 62px 0 18px 0; position: relative; } .service-box.style28 p.description { font-size: 17px; line-height: 30px; color: #616161; } .service-box.style28 .service-btn a { display: inline-block; color: #B0E33E; margin-top: 10px; position:relative; } .service-box.style28 .service-btn a i{ display: inline-block; } .service-box.style28:hover .service-btn a{ color:#232323; } /*service box style 29*/ .service-box.style29 { border: 1px solid#606163; background: #1C1D21; border-radius: 20px; padding: 42px 28px 24px; position: relative; z-index: 1; } .service-box.style29:before{ content: ""; position: absolute; background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); height: 100%; width: 100%; left: 0; top: 0; z-index: 0; transition: 500ms; transform: scaleX(0); border-radius: 20px; z-index: -1; } .service-box.style29:hover{ border-color:#096DFF; } .service-box.style29:hover:before{ transform: scaleY(1); } .service-box.style29 h3.title { font-size: 26px; margin: 22px 0 30px; font-weight: 500; color: #fff; } .service-box.style29 span.service-box-number { font-size: 24px; font-weight: 500; position: absolute; right: 40px; top: 40px; transition: .5s; } .service-box.style29:hover span.service-box-number{ color:#fff; } .service-box.style29 .icon img { transition:.5s; } .service-box.style29:hover .icon img{ filter: brightness(0) invert(1); } .service-box.style29 .service-btn { position: absolute; right: 25px; top: 38%; transition: .5s; opacity: 0; } .service-box.style29:hover .service-btn{ opacity:1; } .service-box.style29 .serice_thumb img { border-radius: 10px; } /*service style 30*/ .service-box.style30 { border: 1px solid #606163; background: #1C1D21; border-radius: 20px; padding: 46px 20px 15px; position: relative; z-index: 1; } .service-box.style30 h3.title { color: #fff; font-size: 30px; margin: 0 0 19px; font-weight: 500; } .service-box.style30 h4.sub-title { margin: 0 0 0; display: inline-block; border: 1px solid #606163; background: #1C1D21; color: #fff; font-size: 14px; font-weight: 400; padding: 7px 16px; border-radius: 30px; } .service-box.style30 .service-btn { display: inline-block; position: absolute; left: 0; right: 0; margin: auto; top: 165px; } .service-box.style30:hover .service-btn a{ background: #194EFF; } .service-box.style30 .service-btn a { display: inline-block; height: 56px; width: 56px; background: #222427; border-radius: 100%; line-height: 56px; transform: rotate(-45deg); transition:.5s; } .service-box.style30 .serice_thumb { margin-top: 58px; } .service-box.style30 .serice_thumb img{ border-radius:20px; } /*service style 31*/ .service-box.style31 { border: 1px solid #606163; background: #1C1D21; border-radius: 20px; padding: 15px 20px 47px; position: relative; z-index: 1; } .service-box.style31 .content { padding-top: 51px; } .service-box.style31 h3.title { color: #fff; font-size: 30px; margin: 0 0 19px; font-weight: 500; } .service-box.style31 h4.sub-title { margin: 0 0 0; display: inline-block; border: 1px solid #606163; background: #1C1D21; color: #fff; font-size: 14px; font-weight: 400; padding: 7px 16px; border-radius: 30px; } .service-box.style31 .service-btn { display: inline-block; position: absolute; left: 0; right: 0; margin: auto; top: inherit; bottom: 163px; } .service-box.style31:hover .service-btn a{ background: #194EFF; } .service-box.style31 .service-btn a { display: inline-block; height: 56px; width: 56px; background: #222427; border-radius: 100%; line-height: 56px; transform: rotate(-45deg); transition:.5s; } .service-box.style31 .serice_thumb { margin-top: 5px; } .service-box.style31 .serice_thumb img{ border-radius:20px; } @keyframes moveLeftBounces-two { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(240px); transform: translateX(240px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /*software-dark*/ .software-dark .service-box.style16 { filter: none; background: #101010; } .software-dark .service-box.style16 h3.title a { color: #fff; } /*service box style 17*/ .service-box.style17 .serice_thumb{ position: relative; } .service-box.style17 .serice_thumb img{ width:100%; max-height: 485px; object-fit: cover; border-radius: 30px; } .service-box.style17 .content { position: absolute; bottom: 40px; padding: 28px 16px 24px 31px; width: 402px; border-radius: 20px; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); left: 48px; transition: .5s; opacity: 0; } .service-box.style17:hover .content{ opacity: 1; bottom: 50px; } .service-box.style17 h4.sub-title { border-radius: 18px; background-color: #ffffff; border: 1px solid rgba(30, 30, 30, 0.1); display: inline-block; padding: 5px 19px; font-size: 16px; margin: 0 0 15px; } .service-box.style17 h3.title { margin: 0 0 0; line-height: 30px; } .service-box.style17 h3.title a { color: #fff; font-size: 20px; margin: 0 0 0; line-height: 16px; } .service-box.style17 .service-btn { display: inline-block; position: absolute; right: -40px; transform: translate(-50%, -50%); top: 50%; } .service-box.style17 .service-btn a { width: 40px; height: 40px; border-radius: 20px; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); display: inline-block; text-align: center; line-height: 40px; color: #fff; } /*service box style 18*/ .service-box.style18 .content { overflow: hidden; position: relative; z-index: 2; padding: 43px 24px 99px; } .service-box.style18 .content:before { position: absolute; content: ""; top: 0; width: 100%; height: 390px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/Fintech.png); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; left: 0; transition: .7s; } .service-box.style18:hover .content:before { opacity: 0; } .service-box.style18:hover p.description { opacity: 0; } .service-box.style18:hover .service-btn { bottom: 147px; } .service-box.style18 .icon { display: inline-block; width: 79px; height: 79px; border-radius: 40px; background-color: #0A7A60 ; line-height: 79px; border: 1px solid #0A7A60 ; } .service-box.style18:hover .icon { background: transparent; border-color: #fff; } .service-box.style18:hover .service-btn a { border-color: #fff; color: #fff; } .service-box.style18 .icon i { margin-bottom: 25px; display: inline-block; color: #fff; font-size: 33px; text-align: center; } .service-box.style18 h3.title{ margin: 29px 0 15px 0; } .service-box.style18 h3.title a { font-size: 24px; color: #fff; transition: .5s; } .service-box.style18 p.description { font-weight: 300; transition: .5s; color: #fff; opacity: 0.7; } .service-box.style18 .service-btn { margin-top: 0; transition: .5s; position: absolute; left: 0; right: 0; bottom: 41px; } .service-box.style18 .service-btn a { display: inline-block; font-size: 12px; -o-transition: all .5s ease 0s; width: 36px; height: 36px; border-radius: 18px; background-color: rgba(247,247,247,0); border: 1px solid rgba(12,90,219,0.7); line-height: 36px; } /*style 19*/ .service-box.style19 { border-radius: 5px; filter: drop-shadow(0px 5px 30px rgba(162, 188, 231, 0.3)); background-color: #ffffff; position: relative; z-index: 1; overflow: hidden; margin-bottom: 30px; text-align: center; padding: 41px 33px 32px; transition: .4s; transition: .5s; } .service-box.style19:hover { transform: translate3d(0,-6px,0); } .service-box.style19:before { position: absolute; content: ""; top: 0; left: 50%; height: 100%; transition: .5s; width: 0; z-index: -1; border-radius: 5px; background-image: linear-gradient(to bottom right, #ff9b07 0%, #fd4f2f 90%); } .service-box.style19:hover:before { left: 0; width: 100%; } .service-box.style19 .icon { display: inline-block; position: relative; z-index: 1; height: 86px; width: 92px; line-height: 107px; } .service-box.style19 .icon:before { position: absolute; content: ""; top: 0; left: 4px; height: 86px; width: 92px; line-height: 85px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/em.png); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } .service-box.style19 .icon i { color: #fff; font-size: 35px; } .service-box.style19 h3.title{ margin: 37px 0 16px; } .service-box.style19 h3.title a { font-size: 20px; transition: .5s; } .service-box.style19 p.description{ transition: .5s; } .service-box.style19:hover h3.title a, .service-box.style19:hover p.description{ color: #fff; } /*service box style 20*/ .service-box.style20 { border-radius: 16px; filter: drop-shadow(0px 20px 40px rgba(205,209,218,0.2)); background-color: #ffffff; padding: 25px; position: relative; z-index: 1; transition:.5s; } .service-box.style20:hover{ background-color:#16181b; } .service-box.style20 .content { padding-top: 21px; } .service-box.style20 .service-btn a { width: 64px; height: 64px; border-radius: 32px; background-color: #f5f7fc; display: inline-block; line-height: 64px; color: #232323; transition: .5s; transform: rotate(-45deg); font-weight: 700; position: absolute; left: 0; right: 0; margin: auto; top: -31px; } .service-box.style20:hover .service-btn a{ background:#0A7A60 ; color:#fff; } .service-box.style20 h3.title { margin: 16px 0 12px; } .service-box.style20 h3.title a { font-size: 30px; line-height: 34px; color: #121417; font-weight: 700; font-family: "Mulish"; text-align: center; } .service-box.style20 h4.sub-title { border-radius: 30px; background-color: #ffffff; border: 1px solid rgba(18,20,23,0.1); display: inline-block; padding: 9px 24px; font-size: 15px; color: #121417; font-weight: 600; font-family: "Mulish"; text-transform: uppercase; } .service-box.style20:hover h3.title a{ color:#fff; } .service-box.style20:hover h4.sub-title{ background-color:#2a2c2f; color:#fff; } .service-box.style20 .serice_thumb { line-height: 0; margin-top: 38px; } .service-box.style20 .serice_thumb img { width: 100%; } /*service box style 23*/ .service-box.style23 { filter: drop-shadow(0px 50px 25px rgba(211,223,220,0.25)); background-color: #ffffff; padding: 44px 40px 51px; transition: .5s; border-radius: 16px; } .service-box.style23 h3.title a { font-size: 26px; color: #121417; font-weight: 700; font-family: "Mulish"; } .service-box.style23 h3.title { margin: 20px 0 15px; } .service-box.style23 .service-btn a { display: inline-block; width: 46px; height: 46px; border-radius: 23px; background-color: rgba(255,255,255,0); border: 1px solid rgba(18,20,23,0.3); line-height: 46px; text-align: center; transform: rotate(-45deg); transition: .5s; margin-top: 11px; } .service-box.style23:hover .service-btn a{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); color:#fff; border-color:#096dff; } /*service box style 24*/ .service-box.style24 { border-radius: 15px; background-image: linear-gradient(180deg, #1c1f24 0%, #1c1f24 1%, #24282e 100%); z-index: 1; padding: 60px 32px 39px; position: relative; transition: .5s; } .service-box.style24:before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; border-radius: 15px; background-image: linear-gradient(180deg, #2375fb 0%, #2375fb 1%, #0d6dfd 100%); opacity: 0; transition: .5s; } .service-box.style24 h3.title { margin: 60px 0 15px; line-height: 34px; transition: .5s; } .service-box.style24:hover:before{ opacity:1; } .service-box.style24:hover h3.title a, .service-box.style24:hover .description{ color:#fff; } .service-box.style24 h3.title a { font-size: 22px; color: #ffffff; font-weight: 700; font-family: "Mulish"; transition: .5s; } .service-box.style24 .description { display: block; font-size: 16px; line-height: 1.5; margin: 0 0 35px; transition:.5s; opacity:0; } .service-box.style24:hover .description{ opacity:1; } .service-box.style24 .service-btn a { display: inline-block; border-radius: 30px; background-color: rgba(26,29,33,0); border: 1px solid rgba(255,255,255,0.15); padding: 13px 29px; position: relative; transition: .5s; color:#fff; } .service-box.style24 .service-btn a i { display: inline-block; border-radius: 50%; background-color: rgba(26, 29, 33, 0); border: 1px solid rgba(255, 255, 255, 0.15); height: 55px; width: 55px; line-height: 55px; text-align: center; position: absolute; right: -56px; top: -1px; } .service-box.style24:hover .service-btn a{ background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0.25); } .service-box.style24:hover .service-btn a i{ background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0.25); } /*service box style 26*/ .service-box.style26 { background: #ebf6ff; transition: .5s; padding: 0 0 0; } .service-box.style26 .content { padding: 22px 0 30px; } .service-box.style26 h3.title { font-size: 22px; color: #232323; font-weight: 700; margin: 0 0 3px; } .service-box.style26 p.description { font-size: 19px; color: #232323; font-weight: 500; margin: 0 0 0; } .two-insurance .service-box.style19:before { background-image: linear-gradient(to bottom right, #0b59db 0%, #00237d 90%); } .two-insurance .service-box.style19 .icon:before { background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/em1.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .three-insurance .service-box.style19:before { background-image: linear-gradient(to bottom right, #CA30FB 0%, #8C3FFD 90%); } .three-insurance .service-box.style19 .icon:before { background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/em2.png); background-repeat: no-repeat; background-size: cover; background-position: center; } @keyframes wobble_vertical { 16.65% { transform: translateY(8px) } 33.3% { transform: translateY(-6px) } 49.95% { transform: translateY(4px) } 66.6% { transform: translateY(-2px) } 83.25% { transform: translateY(1px) } 100% { transform: translateY(0) } } @keyframes mirrorWave { 0%,100% { transform: scale(1) } 25% { transform: scale(1.05) } 50% { transform: scale(1.1) } 75% { transform: scale(1.05) } } /*start service section style two*/ .service_section.style1 { padding: 50px 40px 43px; transition: .5s; } .service_section.style1 .service_img { display: inline-block; width: 80px; height: 80px; border-radius: 15px; background-color: #ffffff; line-height: 117px; text-align: center; } .service_section.style1 .service_content h3 { font-size: 28px; line-height: 36px; color: #041424; margin: 28px 0 0; } .service_section.style1 .service_body { padding-top: 19px; } .service_section.style1 ul.features li { color: #686868; font-weight: 400; font-family: "Nunito"; list-style: none; font-size: 16px; margin: 0 0 8px; } .service_section.style1 ul.features li img{ margin-right:7px; } .service_section.style1 .service_btn a { color: #041424; font-weight: 500; font-family: "Nunito"; display: inline-block; margin-top: 18px; } /*aervice section style Two*/ .service_section.style2 { position: relative; z-index: 2; } .section-title.style2 h2 { margin: 0 0 0; font-size: 39px; margin-bottom: 0px; text-transform: capitalize; margin-top: 0px; line-height: 1.2; font-weight: 800; } .section-title.style2 h2::before { position: absolute; left: -89px; top: 23px; height: 3px; width: 70px; content: ""; background: rgb(12, 90, 219); } .service_section.style2 .service_body h3 { font-size: 40px; font-weight: 600; margin: 0 0 0; color: #fff; } .service_section.style2 .service_body { position: absolute; bottom: 42px; left: 30px; width: 85%; } .service_section.style2 ul.features li { border-radius: 5px; background-color: rgba(255,255,255,0.2); display: inline-block; padding: 2px 12px; margin-right: 8px; cursor: pointer; font-size: 14px; color: #ffffff; font-weight: 500; font-family: "Nunito"; } .service_section.style2 .service_body p { color: #fff; font-size: 22px; font-weight: 600; margin: 0 0 18px; } .service_section.style2 ul.features { border-top: 2px solid#334C60; padding: 22px 0 0; } /*service style ten*/ /* =============== About Area Css ============== */ .lines.about { padding: 0px 0 4px; animation: inherit; } .lines.about .line { width: 100%; } .dreamit-icon-title h4 { font-size: 22px; font-weight: 500; color: #fff; padding: 4px 0 10px; font-style: italic; } .line .lines .line { background-color: rgba(35, 35, 35, 0.1); } /*about*/ .about .dreamit-icon-title h4 { color: #232323; } /*style two*/ .dreamit-icon-title-two .dreamit-icon-title h4 { font-size: 22px; font-weight: 500; color: #232323; font-style: inherit; } .dreamit-icon-title h4 span { color: #0A7A60 ; } .dreamit-custom-title h4 { font-size: 18px; font-weight: 500; color: #fff; text-align: center; position: relative; z-index: 1; } .dreamit-custom-title h4:before { position: absolute; content: ""; left: -40px; top: 9px; height: 2px; width: 393px; background-color: rgba(255, 255, 255, 0.14901960784313725); } .dreamit-custom-title h4:after { position: absolute; content: ""; right: -40px; top: 9px; height: 2px; width: 393px; background-color: rgba(255, 255, 255, 0.14901960784313725); } /*dreamit custom title two*/ .dreamit-custom-title-two .dreamit-custom-title h4 { color: #232323; } .dreamit-custom-title-two .dreamit-custom-title h4:before { background-color: rgba(35, 35, 35, 0.10196078431372549); width: 390px; } .dreamit-custom-title-two .dreamit-custom-title h4:after { background-color: rgba(35, 35, 35, 0.10196078431372549); width: 390px; } /*line style two*/ .line-two .lines.about .line { width: 100%; background-color: #E0E0E0; } /* ============= Icon Box Css ============= */ .icon-box.style1{ display: flex; align-items: center; padding-bottom: 5px; } .icon-box.style1 .icon-box-icon { margin-right: 23px; } .icon-box.style1 .icon-box-content h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .icon-box.style1 .icon-box-icon .img-icon { position: relative; top: 4px; } .icon-box.style1 .icon-box-content .description p { margin: 0; font-size: 16px; } .icon-box.style1 .icon-box-icon .icon { border-radius: 50%; } .icon-box-icon { flex-shrink: 0; } .icon-box.style1 .icon-box-icon .icon i { display: inline-block; font-size: 38px; color: #0A7A60 ; } .shape img { -webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; width: 416px; } /*style two*/ .icon-box.style-two .icon { background: #2875FF; -webkit-animation: none; animation: none; -webkit-transition: .5s; height: 86px; width: 86px; line-height: 86px; border-radius: 100%; text-align: center; } .icon-box.style-two .icon i{ color: #fff; animation: 1s ease-in-out 0s normal none infinite running kmacb-circle-img-anim; font-size: 26px; } .icon-box.style-two .title h2 { color: #fff; font-size: 32px; font-weight: 700; margin: 44px 0 13px; } .icon-box.style-two .description p { color: #fff; font-size: 19px; margin: 0; } /* Style Three */ .icon-box.style3 { display: flex; align-items: center; padding: 0; transition: 0.5s; margin-bottom: 6px; } .icon-box.style3 .icon-box-icon { flex-shrink: 0; margin-right: 25px; } .icon-box.style3 .icon i { font-size: 11px; height: 20px; width: 20px; line-height: 20px; text-align: center; background-color: #0A7A60 ; border-radius: 50%; color: #fff; } .icon-box.style3 .title h2 { font-size: 18px; margin: 0 0 6px; } .icon-box.style3 .description p { margin: 0; } /*icon box style four*/ .icon-box.style4 { display: flex; align-items: center; gap: 25px; } .icon-box.style4 .icon i { display: inline-block; text-align: center; } .icon-box.style4 .title h2 { font-size: 20px; margin: 0 0 10px 0; } .icon-box.style4 .description p { margin: 0; } /*icon box style five*/ .icon-box.style5 { display: flex; align-items: center; gap: 25px; } .icon-box.style5 .icon i { display: inline-block; text-align: center; } .icon-box.style5 .title h2 { color: #232323; font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .icon-box.style5:hover .title h2{ color: #0A7A60 ; } .icon-box.style5 .description p { margin: 0 0 0; } /*icon box style 6*/ .icon-box.style6 { text-align: center; border: dashed 1px #fff; padding: 41px 0 46px; transition: .5s; } .icon-box.style6:hover{ background:#fff; } .icon-box.style6:hover .title h2{ color:#0A7A60 ; } .icon-box.style6 .title h2 { color: #fff; margin: 24px 0 0; } /*icon box style 7*/ .icon-box.style7 { display: flex; align-items: center; gap: 20px; } .icon-box.style7 .icon{ position: relative; } .icon-box.style7 .icon i { font-size: 30px; display: inline-block; width: 60px; height: 60px; line-height: 60px; border: 1px solid rgba(35, 35, 35, 0.10196078431372549); border-radius: 50%; text-align: center; color: #1029B9; position: relative; z-index: 1; } .icon-box.style7 .icon:after { width: 60px; height: 60px; position: absolute; border-radius: 50%; content: ""; border: 1px solid #1029B9; z-index: -1; animation: move 1.5s linear infinite; top: 0; left: 0; } /*icon box style 8*/ .icon-box.style8 { border-radius: 0px 30px 30px 30px; box-shadow: 0px 10px 29.7px 0.3px rgba(225, 225, 225, 0.64); background-color: #FFFFFF; display: flex; align-items: center; gap: 20px; } .icon-box.style8 .icon i { display: inline-block; text-align: center; } /*icon box style nine*/ .icon-box.style9 { display: flex; transition: .5s; gap: 22px; } .icon-box.style9 .title h2 { color: #232323; font-size: 23px; font-weight: 700; margin: 0 0 10px 0; } .icon-box.style9 .icon i { display: inline-block; text-align: center; } /*style ten*/ .icon-box.style10 .title { display: inline-block; } .icon-box.style10 .title h2 { font-size: 18px; color: #1d2124; margin: 0 0 10px; } .icon-box.style10 .icon-box-icon { display: inline-block; margin-right: 12px; } .icon-box.style10 .description p { margin: 4px 0 0; width: 89%; } /*icon box eleven*/ .icon-box.style11 { border-radius: 20px; background-color: rgba(255, 255, 255, 0.050980392156862744); display: flex; align-items: center; padding: 41px 17px 25px 55px; position: relative; transition: .5s; margin: 0 15px; } .icon-box.style11:hover { background-color: rgba(13,110,255,0.14901960784313725); } .icon-box.style11 .icon i { display: inline-block; width: 64px; height: 64px; border-radius: 32px; background-color: #03152a; border: 2px solid #0d6eff; text-align: center; line-height: 64px; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); transition: .5s; font-size: 30px; color: #0d6eff; } .icon-box.style11:hover .icon i{ background-color: #0d6eff; color: #fff; } .icon-box.style11 .title h2 { color: #fff; font-size: 21px; margin: 0 0 9px; } .cyber .icon-box.style1 .icon i{ width: 24px; height: 24px; border-radius: 12px; background-color: #0d6eff; line-height: 24px; text-align: center; color: #fff; font-size: 12px; } /*twelve*/ .icon-box.style12 { display: flex; align-items: center; background: #F7F7FF; border-radius: 4px; padding: 29px 10px 28px 30px; position: relative; z-index: 1; gap: 20px; } .icon-box.style12 .title h2 { margin: 0 0 0; font-size: 18px; } /*style 13*/ .icon-box.style13 { display: flex; align-items: center; } .icon-box.style13 .icon_box_number { margin-right: 23px; display: inline-block; position: relative; z-index: 1; } .icon-box.style13 .icon_box_number span { height: 54px; width: 54px; line-height: 45px; border-radius: 100%; background: #22B4FD; padding: 2px; position: relative; display: inline-block; color: #fff; text-align: center; font-size: 21px; font-weight: 700; border: 3px solid#fff; } .icon-box.style13 .icon_box_number span:after { position: absolute; content: ""; top: -13px; left: -11px; height: 35px; width: 35px; border-radius: 100%; z-index: -1; background: #1744D1; } .icon-box.style13 .title h2 { margin: 0 0 10px; font-size: 22px; } .icon-box.style13 .description p { width: 82%; } /*style 14*/ .icon-box.style14 { display: flex; padding-bottom: 5px; align-items: center; } .icon-box.style14 .title h2 { font-size: 18px; font-weight: 600; margin: 0 0 0; } .icon-box.style14 .icon i { font-size: 13px; color: #fff; display: inline-block; text-align: center; height: 23px; width: 23px; line-height: 23px; text-align: center; border-radius: 100%; background: linear-gradient(to left, #2475FC, #1129B9 100%); margin-right: 14px; } /*style 15*/ .icon-box.style15 { display: flex; align-items: center; gap: 15px; } .icon-box.style15 .icon i { font-size: 29px; color: #0A7A60 ; display: inline-block; text-align: center; height: 66px; width: 66px; line-height: 70px; border-radius: 100%; background: #fff; box-shadow: 0px 10px 40px 0px rgba(146, 176, 225, 0.4); animation: 1s ease-in-out 0s normal none infinite running kmacb-circle-img-anim; } .icon-box.style15 .title h2 { font-size: 28px; font-weight: 800; margin: 0 0 0; } /*style 16*/ .icon-box.style16 { background-color: #021662; border-radius: 5px; transition: .5s; display: flex; } .icon-box.style16:hover { background-color: #0A7A60 ; transition: .5s; } .icon-box.style16 .title h2 { font-size: 22px; font-weight: 600; margin: 10px 0 16px; color: #fff; } .icon-box.style16:hover .icon i { background: #0A7A60 ; color: #fff; border-radius: 100%; transition: .5s; } .icon-box.style16 .description p { color: #fff; margin: 0 0 0; } .icon-box.style16 .icon-box-content { padding: 23px 20px 30px 0px; } .icon-box.style16 .icon-box-icon { margin-right: 35px; } .icon-box.style16 .icon { height: 85px; width: 86px; line-height: 85px; background-color: #000a4d; border-radius: 0px 0px 24px 0px; text-align: center; } .icon-box.style16 .icon i { font-size: 29px; color: #fff; display: inline-block; text-align: center; height: 70px; width: 70px; line-height: 70px; border-radius: 10px 10px 25px 10px; background: #021662; box-shadow: none; animation: none; transition: .5s; } /*icon box style 17*/ .icon-box.style17 { background-color: #021662; border-radius: 5px; transition: .5s; padding: 28px 47px 30px 40px; display: flex; gap: 14px; } .icon-box.style17:hover { background-color: #0A7A60 ; transition: .5s; } .icon-box.style17 .icon-box-icon { flex-shrink: 0; } .icon-box.style17 .title h2 { font-size: 22px; font-weight: 600; margin: 0px 0 10px 0px; color: #fff; } .icon-box.style17 .description p { margin: 0; color: #fff; } /*style 18*/ .icon-box.style18 { display: flex; background-color: #2641ce; border-radius: 5px; transition: .5s; padding: 15px 0px 15px 11px; align-items: center; } .icon-box.style18 .icon-box-icon { flex-shrink: 0; margin-right: 14px; } .icon-box.style18 .title h2 { font-size: 22px; font-weight: 600; margin: 0px 0 10px 0px; color: #fff; } /*icon box style19*/ .icon-box.style19 { display: flex; align-items: center; } .icon-box.style19 .icon_box_number { width: 28px; height: 28px; border-radius: 14px; background-color: rgba(255, 255, 255, 0); border: 2px solid #ffffff; font-size: 18px; color: #fff; display: inline-block; text-align: center; line-height: 25px; margin-right: 10px; } .icon-box.style19 .title h2 { color: #fff; font-size: 22px; font-weight: 600; margin: 0 0 0px 0; } /*twenty 1*/ .icon-box.style21{ display: flex; align-items: center; gap: 7px; } .icon-box.style21 .title h2 { font-size: 18px; margin: 0 0 0; } .icon-box.style21 .icon i { font-size: 15px; color: #ffff; display: inline-block; text-align: center; background-image: linear-gradient(-148deg, #1fbaff 0%, #5c67ff 100%); height: 34px; width: 34px; line-height: 34px; border-radius: 55px 0px 55px 55px; box-shadow: 0px 3px 21px 0px rgba(33, 183, 255, 0.35); } .two .icon-box.style21 .icon i { box-shadow: 0px 3px 21px 0px rgba(253, 99, 93, 0.35); background-image: linear-gradient(-148deg, #ff9b08 0%, #fe5b2a 100%); } .three .icon-box.style21 .icon i { box-shadow: 0px 3px 21px 0px rgba(255, 71, 163, 0.35); background-image: linear-gradient(-148deg, #ff47a6 0%, #ff4d4c 100%); } /*style twenty two*/ .icon-box.style22 { padding: 3px 28px 2px; border: none; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; text-align: left; position: relative; border-radius: 8px; background: #fff; background: #030D48; overflow: hidden; margin: 0 0 8px; } .icon-box.style22:hover { background: #0d6eff; } .icon-box.style22 .title h2 { font-size: 18px; margin: 18px 0 12px; color: #fff; transition: .5s; font-weight: 600; } .icon-box.style22 .description p { margin-bottom: 20px; transition: .5s; color: #919da4; line-height: 26px; font-size: 14px; font-weight: 400; } .icon-box.style22 .description p span { color: #00B88E; transition: .5s; } .icon-box.style22:hover .title h2, .icon-box.style22:hover .description p, .icon-box.style22:hover .description p span{ color: #fff; } /*style 23*/ .icon-box.style23 { display: flex; align-items: center; gap: 8px; } .icon-box.style23 .img-icon { display: inline-block; text-align: center; height: 50px; width: 50px; line-height: 68px; border-radius: 100%; background: #0d6eff; box-shadow: none; } /*icon box style 24*/ .icon-box.style24 { background: #F2F6FF; padding: 27px 24px 27px; border-radius: 5px; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); display: flex; align-items: center; gap: 10px; } .icon-box.style24 .title h2 { font-size: 18px; font-weight: 700; margin: 0; line-height: 28px; } .two .icon-box.style24 { clip-path: polygon(0% 0%, 100% 9%, 100% 100%, 0% 100%); } /*style 25*/ .icon-box.style25 { display: flex; align-items: center; gap: 9px; } .icon-box.style25 .icon { display: inline-block; height: 72px; width: 67px; line-height: 70px; background: #FF9A62; text-align: center; border-radius: 6px; clip-path: polygon(0% 0%, 100% 7%, 100% 100%, 0% 100%); } .icon-box.style25 .title h2 { font-size: 20px; margin: 0 0 5px 0; } .two .icon-box.style25 .icon { background: #2875FF; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); } .three .icon-box.style25 .icon { background: #54D7AF; clip-path: polygon(0% 0%, 100% 7%, 100% 100%, 0% 100%); } .four .icon-box.style25 .icon { background: #F05D8A; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); } /*style 26*/ .icon-box.style26 .icon { display: inline-block; height: 92px; width: 92px; line-height: 92px; text-align: center; background: #fff; border-radius: 100%; } .icon-box.style26 .icon i { font-size: 40px; color: #0A7A60 ; display: inline-block; text-align: center; } /*style 27*/ .icon-box.style27 { border-style: solid; border-width: 1px 1px 1px 1px; border-color: #D0E5FB; border-radius: 5px 5px 5px 5px; padding: 30px 0px 40px 0px; text-align: center; } .icon-box.style27 .icon i { color: rgb(12, 90, 219); font-size: 40px; } .icon-box.style27 .title h2 { font-size: 24px; margin: 15px 0 16px; } .icon-box.style27 .description p { margin: 0 0 0px; } /*icon box style 28*/ .icon-box.style28 { display: flex; gap: 12px; } /*style 29*/ .icon-box.style29 { border-radius: 5px 5px 5px 5px; background-color: #F4F5FD; padding: 20px 20px 20px 20px; display: flex; gap: 12px; } .icon-box.style29 .icon-box-content h2 { color: #232323; font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .icon-box.style29 .description p { margin: 0; } /*style 30*/ .icon-box.style30 .icon-box-icon { display: inline-block; } .icon-box.style30 .icon-box-icon .icon i { font-size: 22px; line-height: 26px; color: #1e73ff; } .icon-box.style30 .description { display: inline-block; } .icon-box.style30 .description p { color: #121417; font-weight: 600; font-size: 20px; margin-left: 7px; margin-bottom:0; } /*icon box style 32*/ .icon-box.style32 { display: flex; align-items: center; gap: 20px; } .icon-box.style32 .img-icon { width: 52px; height: 52px; border-radius: 10px; background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); display: inline-block; text-align: center; line-height: 66px; } /*icon box style 33*/ .icon-box.style33 { display: inline-block; } .icon-box.style33 .box-content { backdrop-filter: blur(49px); display: flex; padding: 26px 33px 29px; align-items: center; gap: 23px; background: #ffffff1f; filter: drop-shadow(0px 20px 35px rgba(85,123,190,0.3)); background-color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.7); border-radius: 10px; } .icon-box.style33 .icon { width: 64px; height: 64px; border-radius: 32px; background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); text-align: center; line-height: 64px; } .icon-box.style33 .icon i { color: #fff; font-size: 30px; } .icon-box.style33 .img-icon img { background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); padding: 18px; border-radius: 100%; } /*icon bos style 34*/ .icon-box.style34 .title h2 { background-color: rgba(255,255,255,0.0784313725490196); border: 1px solid rgba(255,255,255,0.2); display: inline-block; padding: 8px 30px 8px 20px; } /*icon box style 35*/ .icon-box.style35{ position:relative; } .icon-box.style35 .box-content { backdrop-filter: blur(30px); display: flex; padding: 26px 60px 29px 30px; align-items: center; gap: 23px; background: #ffffff1f; filter: drop-shadow(0px 20px 35px rgba(85,123,190,0.3)); border: 2px solid#fff; border-image-source: linear-gradient(101.18deg, #FFFFFF 10.26%, rgba(78, 85, 102, 0) 95.43%); border-radius: 10px; } .icon-box.style35 .img-icon img { background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); padding: 18px; border-radius: 100%; } /* icon box style 36 */ .icon-box.style36 .icon { background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); display: inline-block; height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 100%; } /*icon box style 16*/ .software-box .icon-box.style10 { margin-bottom: 10px; position: relative; padding: 26px 0 27px 25px; border-radius: 20px; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); text-align: left; transition: 0.5s; } .software-box .icon-box.style10:hover{ background-image: linear-gradient(-90deg, #2375fb 0%, #1129b9 100%); } .software-box .icon-box.style10 .title h2 { font-size: 18px; color: #fff; margin: 0 0 10px; position: relative; top: -10px; } .software-box .icon-box.style10 .description p { margin: 0px 0 0; width: 89%; font-size: 16px; line-height: 28px; color: #ffffff; font-weight: 300; text-align: left; } /* The telephone shake animation */ @keyframes move { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes shake { 0% { transform: rotate(-30deg); } 30% { transform: rotate(-30deg); } 60% { transform: rotate(-30deg); } 100% { transform: rotate(-30deg); } } /* */ .crypto-countdown-area { text-align: center; } .crypto-countdown-area .row.backg { padding: 30px 0 45px 0; margin-top: 0; } .crypto-techno-countdown { font-size: 30px; color: #fff; font-weight: 600; text-align: center; } .crypto-techno-countdown li { list-style-type: none; display: inline-block; font-size: 14px; color: #a6a6ab; margin: 0 10px 47px 10px; } .crypto-techno-countdown li span { display: block; font-size: 35px; color: #fff; margin: 30px 0 10px 0; padding: 5px 6px; } .crypto-techno-countdown li .crypto-day { background: #0d6eff; border-radius: 4px; } .crypto-techno-countdown li .crypto-hours { background: #00C87D; border-radius: 4px; } .crypto-techno-countdown li .crypto-minute { background: #FF9516; border-radius: 4px; } .crypto-techno-countdown li .crypto-second { background: #FF68E4; border-radius: 4px; } .details-page .icon-box.style1 .icon-box-icon { padding-right: 22px; flex-shrink: 0; } /*animation*/ @keyframes kmacb-circle-img-anim { 0% { transform: rotate(0deg) scale(1) skew(1deg); } 10% { transform: rotate(-25deg) scale(1) skew(1deg); } 20% { transform: rotate(25deg) scale(1) skew(1deg); } 30% { transform: rotate(-25deg) scale(1) skew(1deg); } 40% { transform: rotate(25deg) scale(1) skew(1deg); } 50% { transform: rotate(0deg) scale(1) skew(1deg); } 100% { transform: rotate(0deg) scale(1) skew(1deg); } } /* Circle Progress */ .circle-progress { display: inline-block; position: relative; } .circle-progress h2 { text-align: left; font-size: 18px; display: inline-block; position: relative; left: 15px; line-height: 28px; font-weight: 500; margin: 0; } .progress { width: 89px!important; height: 89px!important; line-height: 150px; margin: 0; box-shadow: none; display: inline-block; position: relative; background: transparent!important; } .progress:after { content: ""; width: 90%; height: 90%; border-radius: 50%; border: 6px solid #eee; position: absolute; top: 0; left: 0; } .progress > span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left { left: 0; } .progress .progress-bar { width: 90%; height: 90%; background: none; border-width: 6px; border-style: solid; position: absolute; top: 0; border-color: #FF3D00; } .progress .progress-left .progress-bar { left: 91%; border-top-right-radius: 75px; border-bottom-right-radius: 75px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .progress .progress-right { right: 0; } .progress .progress-right .progress-bar { left: -96%; border-top-left-radius: 75px; border-bottom-left-radius: 75px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; } .progress .progress-value { display: flex; border-radius: 50%; font-size: 22px; text-align: center; line-height: 20px; align-items: center; justify-content: center; height: 100%; width: 100%; font-weight: 400; color: #232323; } .progress .progress-value span { font-size: 18px; text-transform: uppercase; } /* This for loop creates the necessary css animation names Due to the split circle of progress-left and progress right, we must use the animations on each side. */ .progress[data-percentage="10"] .progress-right .progress-bar { animation: loading-1 1.5s linear forwards; } .progress[data-percentage="10"] .progress-left .progress-bar { animation: 0; } .progress[data-percentage="20"] .progress-right .progress-bar { animation: loading-2 1.5s linear forwards; } .progress[data-percentage="20"] .progress-left .progress-bar { animation: 0; } .progress[data-percentage="30"] .progress-right .progress-bar { animation: loading-3 1.5s linear forwards; } .progress[data-percentage="30"] .progress-left .progress-bar { animation: 0; } .progress[data-percentage="40"] .progress-right .progress-bar { animation: loading-4 1.5s linear forwards; } .progress[data-percentage="40"] .progress-left .progress-bar { animation: 0; } .progress[data-percentage="50"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="50"] .progress-left .progress-bar { animation: 0; } .progress[data-percentage="60"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="60"] .progress-left .progress-bar { animation: loading-1 1.5s linear forwards 1.5s; } .progress[data-percentage="70"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="70"] .progress-left .progress-bar { animation: loading-2 1.5s linear forwards 1.5s; } .progress[data-percentage="80"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="80"] .progress-left .progress-bar { animation: loading-3 1.5s linear forwards 1.5s; } .progress[data-percentage="90"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="90"] .progress-left .progress-bar { animation: loading-4 1.5s linear forwards 1.5s; } .progress[data-percentage="100"] .progress-right .progress-bar { animation: loading-5 1.5s linear forwards; } .progress[data-percentage="100"] .progress-left .progress-bar { animation: loading-5 1.5s linear forwards 1.5s; } @keyframes loading-1 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(36); transform: rotate(36deg); } } @keyframes loading-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(72); transform: rotate(72deg); } } @keyframes loading-3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(108); transform: rotate(108deg); } } @keyframes loading-4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(144); transform: rotate(144deg); } } @keyframes loading-5 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180); transform: rotate(180deg); } } /* ================ Counter Area Css ================ */ .single-counter.style1 { text-align: center; overflow: hidden; padding: 0; } .single-counter.style1 .icon { margin-bottom: 40px; display: none; } .single-counter.style1 .icon i { font-size: 50px; color: #0A7A60 ; } .single-counter.style1 .counter-content span { display: inline-block; color: #0A7A60 ; color: #232323; font-size: 40px; font-weight: 800; } .single-counter.style1 .counter-content .suffix { color: #232323; } .single-counter.style1 .counter-content h6 { font-size: 20px; font-weight: 500; margin: 14px 0 0; } /*counter section style two*/ .single-counter.style_two .counter-content span { font-size: 30px; font-weight: 600; margin-bottom: 14px; } .single-counter.style_two .counter-content .suffix { color: #0A7A60 ; } .single-counter.style_two .counter-content h6 { color: #fff; font-size: 16px; font-weight: 400; } /*style three*/ .single-counter.style_three { padding: 40px 32px 29px; transition: .5s; } .single-counter.style_three h6 { color: #FFFFFF; font-size: 24px; font-weight: 500; margin: 7px 0px 11px 0px; } /*counter style four*/ .single-counter.style_four { display: flex; overflow: inherit; padding: 0 0 0; align-items: center; } .single-counter.style_four .icon { display: inline-block; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; float: left; margin-right: 15px; color: #FFFFFF; background: #0A7A60; border-radius: 50% 50% 50% 50%; height: 70px; width: 70px; font-size: 31px; line-height: 70px; text-align: center; margin-top: 14px; flex-shrink: 0; } .single-counter.style_four .counter-content.counter h6 { display: inline-block; font-size: 13px; margin: 0 0 0; font-weight: 700; } .single-counter.style_four .counter-content span { display: block; color: #232323; font-size: 42px; font-weight: 800; margin: 0 0 2px; line-height: 57px; } /* counter style five*/ .single-counter.style5 { overflow: hidden; padding: 0 0 0; align-items: center; } .single-counter.style5 .icon { margin-bottom: 19px; text-align: center; display: inline-block; } .single-counter.style5 .icon i{ display: inline-block; } .single-counter.style5 .counter-content .suffix { color: #fff; font-weight: 600; margin: 0; } .single-counter.style5 .counter-content span { font-size: 30px; font-weight: 600; margin-bottom: 0; display: inline-block; color: #fff; } .single-counter.style5 .counter-content h6 { color: #fff; font-size: 18px; font-weight: 400; font-family: 'Nunito'; } /*counter style six*/ .single-counter.style6{ position:relative; z-index:2; } .single-counter.style6 h6 { font-size: 18px; color: #041424; font-weight: 400; font-family: "Nunito"; text-align: center; margin: 23px 0 0; } /*counter style seven*/ .single-counter.style7 { background: #0A7A60; display: inline-block; padding: 49px 67px 51px; } /*counter style eight*/ .single-counter.style8{ position: relative; z-index: 22; } .single-counter.style8:before { position: absolute; content: ""; top: 8px; left: -2%; height: 37px; width: 37px; line-height: 37px; border: 2px solid#31d2fc; border-radius: 100%; z-index: -1; } /*counter style nine*/ .single-counter.style9.left { background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/Application-Hosdfvdting-1.png); background-repeat: no-repeat; background-position: center; padding: 32px 34px 40px; background-size: contain; position: relative; } .single-counter.style9 .counter-content.counter span { font-size: 40px; color: #fff; font-weight: 700; } .single-counter.style9 .icon { position: absolute; left: 46%; top: 46px; } .single-counter.style9 .counter-content.counter h6 { font-size: 16px; color: #ccd0e2; } /*style 10*/ .single-counter.style10 { background: #eff2f7; background-repeat: no-repeat; background-position: center; padding: 52px 28px 26px; background-size: contain; border-radius: 5px; position: relative; } .single-counter.style10 .icon { position: absolute; top: 30px; right: 30px; } /*counter style 11*/ .single-counter.style11 .icon { display: inline-block; float: left; margin-top: 17px; margin-right: 16px; } .single-counter.style11 .counter-content.counter { overflow: hidden; } /*style twelve*/ .single-counter.style12 .icon { margin-right: 0px; display: inline-block; height: 86px; width: 78px; line-height: 85px; background: #FF9A62; border-radius: 5px; clip-path: polygon(0% 0%, 100% 9%, 100% 100%, 0% 100%); margin-bottom: 17px; } .two .single-counter.style12 .icon { background: #2875FF; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); } .three .single-counter.style12 .icon { background: #54D7AF; clip-path: polygon(0% 0%, 100% 9%, 100% 100%, 0% 100%); } .four .single-counter.style12 .icon { background: #F05D8A; clip-path: polygon(0% 11%, 104% 0, 100% 100%, 0% 100%); } /*counter style 13*/ .single-counter.style13 { backdrop-filter: blur(10px); display: inline-block; padding: 30px 120px 29px 32px; align-items: center; gap: 23px; background: #ffffff1f; filter: drop-shadow(0px 20px 35px rgba(85, 123, 190, 0.3)); border-radius: 10px; position: relative; background-color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); } .single-counter.style13 .counter-content.counter span { font-size: 32px; line-height: 26px; color: #ffffff; font-weight: 700; font-family: "Mulish"; position: absolute; right: 71px; top: 24px; } .single-counter.style13 span.suffix { position: relative; right: 29px!important; } .single-counter.style13 .counter-content.counter h6 { font-size: 22px; color: #ffffff; font-weight: 600; font-family: "Mulish"; } /*single counter style 14*/ .single-counter.style14 .icon { display: inline-block; margin-right: 13px; position: relative; top: 6px; } .single-counter.style14 span.count.percent { font-size: 46px; line-height: 36px; color: #ffffff; font-weight: 700; font-family: "Mulish"; } .single-counter.style14 .counter-content.counter { display: inline-block; } .single-counter.style14 span.suffix { font-size: 46px; line-height: 36px; color: #ffffff; font-weight: 700; font-family: "Mulish"; } .single-counter.style14 .inner_content h6 { font-size: 18px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin: 10px 0 0; } /*counter style 15*/ .single-counter.style15.center { width: 264px; height: 264px; border-radius: 132px; background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); padding: 47px 44px 0; } .single-counter.style15 span.count.percent { font-size: 42px; line-height: 50px; color: #ffffff; font-weight: 700; font-family: "Mulish"; text-align: center; } .single-counter.style15 .counter-content.counter h6 { opacity: 0.800; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; text-align: center; margin: 9px 0 0; } .single-counter.style15.center .icon { margin-bottom: 6px; } /*counter style 17*/ .single-counter.style17.left { display: flex; align-items: center; } .single-counter.style17 .counter-content.counter { display: inline-block; margin-right:10px; } .single-counter.style17 .counter-content.counter span { font-size: 55px; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; font-weight: 800; font-family: "Mulish"; } .single-counter.style17.left h6 { opacity: 0.702; font-size: 17px; letter-spacing: 0px; line-height: 80px; text-transform: uppercase; color: #ffffff; font-weight: 500; font-family: "Mulish"; margin: 0 0 0; } /*counter style 19**/ .single-counter.style19 .counter_content { display: inline-block; background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); height: 80px; width: 80px; line-height: 80px; border-radius: 100%; } .single-counter.style19 span.count.percent { font-size: 30px; color: #fff; font-weight: 600; } .single-counter.style19 span.suffix{ font-size: 30px; color: #fff; font-weight: 600; } /*counter style 20*/ .single-counter.style20 { background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); display: inline-block; padding: 19px 46px 36px; border-radius: 20px; } .single-counter.style20 span.count.percent { color: #ffff; font-size: 60px; font-weight: 600; } .single-counter.style20 span.suffix { color: #fff; font-size: 36px; position: relative; top: -23px; } .single-counter.style20 .counter-content.counter h6 { color: #fff; font-size: 18px; font-weight: 500; line-height: 28px; margin: 16px 0 0; } /*counter style21*/ .single-counter.style21 { display: inline-block; background: #222427; padding: 38px 43px 41px; border-radius: 20px; } .single-counter.style21 .single_counter { display: flex; align-items: center; } .single-counter.style21 .icon { background: linear-gradient(180deg, #2B25FF 0%, #096DFF 100%); display: inline-block; height: 60px; width: 60px; text-align: center; line-height: 80px; border-radius: 100%; margin-right: 19px; } .single-counter.style21 span.count.percent { color: #fff; font-size: 30px; font-weight: 500; } .single-counter.style21 span.suffix { color: #fff; font-size: 30px; font-weight: 500; } .single-counter.style21 .counter-content.counter h6 { color: #fff; margin: 0 0 0; font-size: 18px; font-weight: 400; color: #fff; opacity: 0.7; } /*counter style 22*/ .single-counter.style22 { position: relative; } .single-counter.style22 .icon { position: absolute; right: 0; top: 12px; } .single-counter.style22 span.count.percent { font-size: 62px; color: #2B55FF; font-weight: 500; } .single-counter.style22 span.suffix { font-size: 62px; color: #2B55FF; font-weight: 500; } .single-counter.style22 .counter-content.counter h6 { margin: 0 0 0; font-size: 24px; color: #fff; font-weight: 500; border-top: 1px solid#414345; padding-top: 14px; } /* green tech counter*/ .green-count{ position:relative; } .green-count:before { position: absolute; content: ""; bottom: 14px; left: -30px; height: 28px; width: 30px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Top-1-1.png); background-position: center center; background-repeat: no-repeat; z-index: 22; background-size: cover; } .green-count:after { position: absolute; content: ""; top: -27px; right: 29px; height: 28px; width: 30px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Top-1-1.png); background-position: center center; background-repeat: no-repeat; z-index: 22; background-size: cover; } .single-counter.style18 { position: relative; padding: 0 0 36px; } .single-counter.style18:before { position: absolute; content: ""; height: 76px; width: 1px; background: #232323; right: 31px; top: 28px; } .last-box .single-counter.style18:before{ display:none; } /*service carouse style five*/ .em-service.style_5 { padding: 31px 33px 13px; background: #f4f7fa; border-radius: 10px; border: 1px solid #d2ede6; margin: 0 10px; text-align: left; transition:.5s; } .em-service.style_5:hover{ border-color:#f6dde2; } .em-service.style_5 .em-service-thumb { display: inline-block; } .em-service.style_5 .em-service-title h2 { font-size: 25px; margin: 15px 0 10px; font-weight: 600; position: relative; margin-left: 0px; display: inline-block; padding-top: 15px; } .em-service.style_5 .em-service-title h2::before { position: absolute; content: ""; top: -4px; left: 0; margin: auto; height: 2px; width: 60px; background: #d1e0f5; } .em-service.style_5 .em-service-title h2:after { content: ''; position: absolute; left: 0; width: 6px; height: 6px; border-radius: 3px; background-color: #0b5adb; border-radius: 50%; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: MOVE-LG; animation-name: MOVE-LG; -webkit-animation: MOVE-LG 35s linear infinite; animation: MOVE-LG 7s linear infinite; overflow: hidden; top: -6px; } .em-service.style_5 .service-box-desc p { margin: 0 0 11px; } .service_cursousel_sliderr5 .slick-dots { bottom: -100px !important; position: absolute; left: 0; right: 0; margin: auto; text-align: center; } .service_cursousel_sliderr5 ul.slick-dots li { display: inline-block; text-align: center; margin: 0 4px; transition:.5s; } .service_cursousel_sliderr5 button{ height: 40px; width: 40px; border-radius: 50%; border: 1px solid#f6dde2; } .service_cursousel_sliderr5 button:hover{ background-color: #0b5adb; border-color:#f6dde2; color:#fff; } /* ========== Team ========== */ .team.style1 { text-align: center; position: relative; overflow: hidden; background: #fff; border-radius: 5px; border-bottom: 3px solid#0A7A60 ; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; } .team.style1:hover{ -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .team.style1 .image { position: relative; z-index: 1; line-height: 0; } .team.style1 .image:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(12,90,219,.85); content: ""; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; opacity: 0; } .team.style1 .content { padding: 8px 0 23px; } .team.style1:hover .image:before{ opacity: 1; } .team.style1 .image ul.social-icon { position: absolute; right: -50px; width: 50px; background: #fff; padding: 12px 0; opacity: 0; visibility: hidden; transition: all 0.4s ease 0s; top: 50%; transform: translateY(-50%); } .team.style1:hover .image ul.social-icon { right: 0; width: 50px; opacity: 1; visibility: visible; } .team.style1 .image ul.social-icon li { display: block; padding: 13px 0; } .team.style1 .image ul.social-icon li a{ color: #0A7A60 ; } .team.style1 .bio h2 a { display: inline-block; color: #222; font-weight: 700; font-size: 20px; } .team.style1 .bio h2{ margin: 0 0 0; } .team.style1 h5.designation { font-size: 13px; text-transform: uppercase; color: #0A7A60 ; float: none; text-align: center; font-weight: 500; margin: 0; } /*team Style Two */ .team.style2 .image { position: relative; line-height: 0; overflow: hidden; } .team.style2 .image:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.35); content: ""; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; opacity: 0; } .team.style2:hover .image:before { opacity: 1; } .team.style2 .image img { width: 100%; } .team.style2 ul.social-icon { position: absolute; right: 0; width: 83%; background: #0A7A60; padding: 14px 0; opacity: 1; visibility: visible; transition: all 0.4s ease 0s; top: inherit; transform: inherit; left: 0; margin: auto; bottom: -50px; text-align: center; } .team.style2:hover ul.social-icon{ bottom: 0; } .team.style2 ul.social-icon li { display: inline-block; text-align: center; } .team.style2 ul.social-icon li a{ display: inline-block; color: #fff; padding:0 8px ; } .team.style2 .team-content { text-align: center; padding: 8px 0 0; } .team.style2 .bio h2{ margin: 0 0 0; } .team.style2 .bio h2 a { display: inline-block; color: #232323; font-size: 20px; } .team.style2 h5.designation { font-size: 13px; text-transform: uppercase; color: rgb(12, 90, 219); float: none; text-align: center; font-weight: 500; margin: 0; } /*team three*/ .team.style3 .image { position: relative; line-height: 0; } .team.style3 .image::before { position: absolute; right: 0; top: 0; height: 100%; background: rgba(12,90,219,0.85); content: ""; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; opacity: 1; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; z-index: 1; width: 100%; opacity: 0; border-radius: 50%; } .team.style3:hover .image::before { opacity: 1; } .team.style3 .image img { border-radius: 100%; } .team.style3 .team-content { position: absolute; left: 0; right: 0; margin: auto; text-align: center; top: 45%; opacity: 0; z-index: 22; transition: .5s; } .team.style3:hover .team-content{ opacity: 1; top: 50%; transform: translateY(-50%); } .team.style3 h2.name{ margin: 0 0 0; } .team.style3 h2.name a { color: #fff; transition: .3s; font-size: 20px; margin-bottom: 5px; font-weight: 700; } .team.style3 h5.designation { margin: 3px 0 13px; color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 500; } .team.style3 ul.social-icon li { display: inline-block; margin: 0 5px; } .team.style3 ul.social-icon li a{ color: #fff; } /*team style 4*/ .team.style4 .image { position: relative; z-index: 1; line-height: 0; } .team.style4 .image img{ width: 100%; } .team.style4 .image::before { position: absolute; top: 0; left: 50%; height: 100%; background: linear-gradient(to left, #2475FC, #1129B9 100%); content: ""; z-index: 1; width: 0; border-radius: 5px 5px 0 0; opacity: 0.8; transition: .5s; } .team.style4:hover .image::before { width: 100%; left: 0; } .team.style4 .team-content { transition: .5s; background: #fff; padding: 7px 20px 23px; text-align: center; border-bottom: 2px solid #0A7A60 ; border-radius: 0 0 4px 4px; } .team.style4 h2.name a { display: block; color: #232323; transition: .3s; font-size: 20px; margin-bottom: 5px; font-weight: 700; } .team.style4 h2.name a { display: block; color: #232323; transition: .3s; font-size: 20px; margin-bottom: 5px; font-weight: 700; } .team.style4 h5.designation { color: #0A7A60 ; margin: 7px 0 19px; font-size: 13px; text-transform: uppercase; font-weight: 400; } .team.style4 ul.social-icon li { display: inline-block; margin: 0 5px; } .team.style4 ul.social-icon li a { display: inline-block; width: 30px; height: 30px; line-height: 30px; background: #0056B3; text-align: center; border-radius: 50%; color: #fff; font-size: 15px; transition: .4s; } /*team style four*/ .team.style4.style5 { background: #fff; box-shadow: 0px 5px 30px 0px rgb(137 165 198 / 13%); transition: .5s; } .team.style4.style5:hover{ transform: translate3d(0, -6px, 0); overflow: inherit; box-shadow: 0px 5px 60px 0px rgba(170, 194, 221, 0.3); } /*team style six*/ .team.style6 { background: #fff; box-shadow: none; margin-bottom: 10px; overflow: inherit; border-radius: 55px; background-color: #ffffff; padding: 30px 30px 28px 30px; border: 1px solid rgba(30, 30, 30, 0.1); text-align: center; } .team.style6 .image { position: relative; overflow: hidden; line-height:0 ; } .team.style6 .image img { width: 100%; } .team.style6 h2.name{ margin: 0 0 0; } .team.style6 h2.name a { color: #232323; transition: .3s; font-size: 20px; margin-bottom: 0; line-height: 19px; } .team.style6 h5.designation { color: #616161; text-transform: capitalize; font-size: 16px; font-weight: 400; margin: 8px 0 0 0; } .team.style6 ul.social-icon { position: absolute; left: 0; bottom: -50px; right: 0; margin: auto; z-index: 1; transition: .5s; border-radius: 25px; background-color: #eff2f7; height: 50px; line-height: 48px; width: 180px; text-align: center; } .team.style6:hover ul.social-icon{ bottom: 20px; } .team.style6 ul.social-icon li{ display: inline-block; } .team.style6 ul.social-icon li a { height: 37px; width: 37px; line-height: 37px; display: inline-block; border-radius: 50%; color: #fff; font-size: 14px; margin: 0 4px 0 4px; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); } /*dark*/ .dark .team.style6 { background: #101010; border: 1px solid rgba(30, 30, 30, 0.1); } /*team style seven*/ .team.style7 { position: relative; padding: 40px 0 35px 0; z-index: 1; overflow: hidden; background: #0b1548; border-radius: 5px; margin: 0 0 10px 0; text-align: center; } .team.style7:before { content: ""; position: absolute; width: 100%; height: 136px; clip-path: polygon(0 0%, 100% 0%, 100% 20%, 100% 65%, 60% 100%, 40% 100%, 0% 65%, 0% 50%); background: #00226E; background-size: cover; top: 0; left: 0; z-index: -1; transition: 0.5s; } .team.style7:hover:before { background: #0d6eff; } .team.style7 h2.name{ margin: 0 0 0; } .team.style7 h2.name a { color: #fff; transition: .4s; font-size: 20px; margin: 25px 0 5px 0; font-weight: 700; } .team.style7 ul.social-icon li { display: inline-block; } .team.style7 ul.social-icon li a { color: #fff; padding: 0 7px 00 7px; transition: 0.2s; } .team.style7 h5.designation { text-transform: capitalize; padding: 0 0 44px 0; position: relative; font-size: 16px; color: #919da4; font-weight: 400; margin: 0; } .team.style7 h5.designation::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; width: 2px; height: 20px; background: #0d6eff; bottom: 10px; } /*team style eight*/ .team.style8 { text-align: center; position: relative; } .team.style8 .image { line-height: 0; position: relative; } .team.style8:hover .image img { border: 5px solid #0d6eff; } .team.style8 .team-content { padding: 18px 0 0; } .team.style8 ul.social-icon { position: absolute; left: 0; right: 0; bottom: -9px; } .team.style8 .image img { width: auto; border-radius: 50%; border: 5px solid #00195D; transition: 0.4s; } .team.style8 h2.name{ margin: 0 0 5px; } .team.style8 h2.name a { color: #fff; transition: .4s; font-size: 20px; margin: 25px 0 5px 0; font-weight: 700; } .team.style8 ul.social-icon li { display: inline-block; } .team.style8 ul.social-icon li a { color: #fff; transition: 0.2s; color: #fff; transition: 0.4s; background: #0d6eff; border-radius: 50%; z-index: 1; position: relative; height: 38px; width: 38px; line-height: 38px; display: inline-block; } .team.style8 h5.designation { text-transform: capitalize; position: relative; font-size: 16px; color: #919da4; font-weight: 400; margin: 0; } /*style nine*/ .team.style9 { text-align: center; background: #fff; box-shadow: 0px 10px 30px 0px rgb(162 171 181 / 15%); } .team.style9 h2.name a { color: #222; font-weight: 700; font-size: 22px; display: block; } .team.style9 .image { line-height: 0; position: relative; overflow: hidden; } .team.style9 .image:before { position: absolute; left: 50%; top: 0; width: 0; height: 100%; background: #0A7A60; content: ""; opacity: 0.8; transition: .5s; } .team.style9:hover .image:before{ width: 100%; left: 0; } .team.style9 .image img{ width: 100%; } .team.style9 ul.social-icon { position: absolute; left: 0; right: 0; margin: auto; bottom: -44px; transition: .4s; } .team.style9:hover ul.social-icon{ bottom: 15px; } .team.style9 .team-content { padding: 11px 0 29px; } .team.style9 h5.designation { font-size: 13px; text-transform: uppercase; color: #0A7A60 ; float: none; text-align: center; font-weight: 500; margin: 8px 0 0; } .team.style9 ul.social-icon li { display: inline-block; } .team.style9 ul.social-icon li a { height: 38px; width: 38px; line-height: 38px; border-radius: 100%; background: #fff; display: inline-block; color: #0A7A60; } /*team style 10*/ .team.style10 { border-radius: 16px; background-color: rgba(255,255,255,0.050980392156862744); border: 1px solid rgba(255,255,255,0.2); padding: 25px; position: relative; transition: .5s; } .team.style10 .image { overflow: hidden; line-height: 0; position:relative; } .team.style10 .team-content { position: relative; padding: 18px 0 8px; } .team.style10 h2.name{ margin:0; } .team.style10 h2.name a { font-size: 28px; color: #ffffff; font-weight: 700; font-family: "Mulish"; } .team.style10:hover h2.name a{ color: #0A7A60 ; } .team.style10 h5.designation { border-radius: 30px; background-color: rgba(255,255,255,0); border: 1px solid rgba(255,255,255,0.15); display: inline-block; text-transform: uppercase; color: #ffffff; font-weight: 500; font-family: "Mulish"; font-size: 14px; padding: 8px 23px; } .team.style10 ul.social-icon li{ margin-bottom:7px; } .team.style10 ul.social-icon li a { display: block; width: 42px; height: 42px; border-radius: 21px; background-color: rgba(255,255,255,0.14901960784313725); text-align: center; line-height: 42px; color: #fff; transition:.5s; } .team.style10 ul.social-icon li a:hover{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); } .team.style10 .team-btn { position: absolute; line-height: 48px; color: #fff; top: 47px; transform: translateX(-50%); cursor: pointer; border-radius: 50%; text-align: center; right: -8px; transition: .4s; width: 48px; height: 48px; border-radius: 24px; background-color: rgba(255,255,255,0.07058823529411765); } .team.style10 .team-btn:hover{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); color:#fff; } .team.style10 .social-icons1 { position: absolute; right: -50px; width: 50px; background: transparent; display: inline-block; padding: 5px 35px; border-radius: 30px 0 0 30px; opacity: 1; visibility: hidden; transition: all 0.4s ease 0s; top: 50%; transform: translateY(-50%); } .team.style10 .social-icons1.active { right: 16px; width: 80px; opacity: 1; visibility: visible; transition: .5s; z-index: 9999; } /*team style 11*/ .team.style11 { border-radius: 0; background-color: transparent; padding: 0; position: relative; transition: .5s; } .team.style11 .image { overflow: hidden; line-height: 0; position:relative; } .team.style11 .image img { width: 100%; } .team.style11 .team-content { position: relative; padding: 28px 32px 37px; background: #232428; margin-left: 32px; border-radius: 0 0 10px 10px; transition:.5s; } .team.style11:hover .team-content{ background: #2B55FF; } .team.style11 h2.name{ margin:0; transition:.5s; } .team.style11 h2.name a { font-size: 26px; color: #ffffff; font-weight: 500; font-family: "Mulish"; } .team.style11:hover h2.name a{ color: #fff; } .team.style11 h5.designation { border-radius: 0; background-color: transparent; border: none; display: inline-block; text-transform: capitalize; color: #616161; font-weight: 500; font-family: "Mulish"; font-size: 16px; padding: 0; padding-left: 47px; position: relative; } .team.style11 h5.designation:before { position: absolute; content: ""; left: 0; top: 8px; height: 1px; width: 40px; background: #616161; transition: .5s; } .team.style11:hover h5.designation{ color:#fff; } .team.style11:hover h5.designation:before{ background:#fff; } .team.style11 ul.social-icon li{ margin-bottom:7px; } .team.style11 ul.social-icon li a { display: block; width: 50px; height: 50px; border-radius: 5px; background-color: rgba(255,255,255,0.14901960784313725); text-align: center; line-height: 50px; color: #fff; transition: .5s; } .team.style11 ul.social-icon li a:hover{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); } .team.style11 .team-btn { position: absolute; line-height: 50px; color: #fff; top: -47px; transform: translateX(-65%); cursor: pointer; border-radius: 50%; text-align: center; right: inherit; transition: .4s; width: 50px; height: 50px; border-radius: 4px 4px 0 0; background-color: #2B55FF; } .team.style11 .team-btn:hover{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); color:#fff; } .team.style11 .social-icons1 { position: absolute; right: inherit; width: 50px; background: transparent; display: inline-block; padding: 5px 35px; border-radius: 30px 0 0 30px; opacity: 1; visibility: hidden; transition: all 0.4s ease 0s; top: 62%; transform: translateY(-50%); left: -94px; } .team.style11 .social-icons1.active{ right: inherit; width: 80px; opacity: 1; visibility: visible; transition: .5s; z-index: 9999; left:0; } /*heading*/ .heading.style1 h4 { border-bottom: 2px solid#DDE0E7; padding-bottom: 20px; } /*style three*/ .heading.style-3 p.heading-text { position: relative; } .heading.style-3 p.heading-text:before { position: absolute; content: ""; top: 12px; left: 0; width: 390px; height: 1px; background-image: linear-gradient(90deg, #0b59db 0%, #f3f7fd 100%); } .heading.style-3 p.heading-text:after{ position:absolute; content:""; top:12px; right:0; width: 390px; height: 1px; background-image: linear-gradient(90deg, #f3f7fd 0%, #0b59db 100%); } /*style four*/ .heading.style-4 h2.heading-text { position: relative; display: inline-block; } .heading.style-4 h2.heading-text:before { position: absolute; content: ""; top: 34px; left: -111px; width: 97px; height: 2px; background-color: #ffffff; } .seo h1.heading-text span { color: #0A7A60 ; } /*style five*/ .heading.style-5 h1.heading-text { font-size: 100px; font-weight: bold; font-family: Arial, sans-serif; color: transparent; -webkit-text-stroke: 2px white; } .heading.style-5 h2.heading-text { font-size: 160px; color: #cb935d; font-weight: 900; margin-top: 0; -webkit-text-stroke-width: 1px; color: transparent; -webkit-text-stroke-color: #F3F4F8; color: transparent; opacity: 1; text-transform: uppercase; font-family: Arial, sans-serif; line-height: 163px; } /*heading style seven*/ .heading.style-7 h5.heading-text { font-size: 14px; letter-spacing: 0px; text-transform: uppercase; color: #ffffff; font-weight: 500; display: inline-block; position: relative; z-index: 1; margin: 0 0 5px; } .heading.style-7 h5.heading-text:before { content: ""; top: -9px; left: -15px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2025/05/Crypto-Startup-1.png); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; width: 285px; height: 39px; position: absolute; } .heading.style-7 p.heading-text { opacity: 0.502; font-size: 18px; line-height: 30px; color: #ffffff; font-weight: 400; font-family: "Mulish"; width: 97%; margin: 0 0 20px; } .heading.style-7 h3.heading-text { border-radius: 8px; background-color: rgba(255,255,255,0.0784313725490196); border: 1px solid rgba(255,255,255,0.2); font-size: 18px; color: #ffffff; font-weight: 600; font-family: "Mulish"; padding: 8px 16px; } /* Animation keyframes */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .text-animation h1.heading-text { font-size: 3rem; transform: translateY(20px); animation: bounce 1.2s ease-in-out infinite; } .letter:nth-child(1) { animation-delay: 0s; } .letter:nth-child(2) { animation-delay: 0.1s; } .letter:nth-child(3) { animation-delay: 0.2s; } .letter:nth-child(4) { animation-delay: 0.3s; } .letter:nth-child(5) { animation-delay: 0.4s; } .letter:nth-child(6) { animation-delay: 0.5s; } /* space or arrow */ .letter:nth-child(7) { animation-delay: 0.6s; } .letter:nth-child(8) { animation-delay: 0.7s; } .letter:nth-child(9) { animation-delay: 0.8s; } .letter:nth-child(10){ animation-delay: 0.9s; } .letter:nth-child(11){ animation-delay: 1.0s; } .letter:nth-child(12){ animation-delay: 1.1s; } .letter:nth-child(13){ animation-delay: 1.2s; } .letter:nth-child(14){ animation-delay: 1.3s; } .circle-container { position: relative; width: 202px; height: 202px; background: #27282C; border-radius: 100%; padding: 15px; } svg { width: 100%; height: 100%; } .center-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); background: #2e2e2e; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.5em; color: white; } .center-arrow::before { content: "↑"; transform: rotate(45deg); display: inline-block; } .accordion { background: #111; color: white; font-family: sans-serif; } .item { border-bottom: 1px solid #444; padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .item .image { display: none; } .item.active .image { display: block; } .item .image img { max-width: 300px; border-radius: 10px; } .item .content { flex: 1; } .item h2 { font-size: 24px; } ul { list-style: none; padding: 0; } /* ============ Work Process ============ */ .work_progress.style1 { position: relative; text-align: center; padding: 0 30px; } .work_progress.style1 .work_progress-number{ position: relative; z-index: 1; } .work_progress.style1 .work_progress-number span { background: #0A7A60 ; display: inline-block; height: 50px; width: 50px; line-height: 50px; text-align: center; color: #fff; border-radius: 50%; font-size: 16px; position: relative; z-index: 1; transition: .5s; } .work_progress.style1 .work_progress-number:before { position: absolute; top: 22px; width: calc(100% - 100px); height: 1px; background-image: -webkit-gradient(linear, left top, right top, from(#0A7A60 ), color-stop(40%, #0A7A60 ), color-stop(40%, transparent), to(transparent)); background-image: -o-linear-gradient(left, #0A7A60 , #0A7A60 40%, transparent 40%, transparent 100%); background-image: linear-gradient(90deg, #0A7A60 , #0A7A60 40%, transparent 40%, transparent 100%); background-size: 12px 1px; content: ""; left: -171px; } .first-process .work_progress-number:before { display:none; } .work-process.style1 .work_progress-number span{ font-weight: 600; height: 45px; width: 45px; line-height: 45px; -webkit-transition: .3s; -moz-transition: .3s; background: #0A7A60 ; display: inline-block; height: 50px; width: 50px; line-height: 50px; text-align: center; color: #fff; border-radius: 50%; font-size: 16px; position: relative; z-index: 1; } .work_progress.style1:hover .work_progress-number span{ transform: scale(1.1); } .work_progress.style1 .work_progress-number span:before { position: absolute; left: -18px; top: -18px; height: 85px; width: 85px; content: ""; background: #0A7A60 ; z-index: -1; border-radius: 50%; right: 0; margin: auto; opacity: .2; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .work_progress.style1 .work_progress-number span:after { position: absolute; left: -8px; top: -8px; height: 65px; width: 65px; content: ""; background: #0A7A60 ; z-index: -1; border-radius: 50%; right: 0; margin: auto; opacity: .4; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .before-none .work_progress.style-three .work_progress-number:before { display:none; } .work_progress.style1 h3.title { font-size: 20px; font-weight: 700; margin: 47px 0 15px; } /*work process style two*/ .work_progress.style-two { position: relative; padding: 0 30px; transition: .5s; } .work_progress.style-two .icon { position: relative; display: inline-block; text-align: center; margin-bottom: 60px; } .work_progress.style-two .icon::before { position: absolute; content: ""; left: 0; right: 0; margin: auto; width: 2px; height: 40px; border-left: 2px dashed #ddd; border-radius: 100%; bottom: -74px; } .work_progress.style-two .icon::after { position: absolute; content: ""; left: 0; right: 0; margin: auto; width: 15px; height: 15px; border: 2px solid #ddd; border-radius: 100%; bottom: -32px; } .work_progress.style-two .icon i { background: linear-gradient(90deg, rgba(30,85,189,1) 0%, rgba(67,126,235,1) 100%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #ffffff; font-size: 50px; height: 120px; line-height: 120px; text-align: center; width: 120px; z-index: 1; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; display: inline-block; } .work_progress.style-two .work_progress-title { padding-top: 40px; } .work-process.style-two .icon { position: relative; display: inline-block; text-align: center; margin-bottom: 60px; } .work_progress.style-two .work_progress-number { z-index: 1; position: absolute; right: 0; top: 0; } .work_progress.style-two .work_progress-number span { background: #fff; border-radius: 50%; color: #0A7A60; box-shadow: 0 0 10px #cccccc; display: inline-block; display: inline-block; height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 50%; font-size: 16px; position: relative; z-index: 1; } .work_progress.style-two .work_progress-title h3 { font-size: 20px; margin: 30px 0 10px; font-weight: 700; } .work_progress.style-two .work_progress-desc p { margin: 0; } /*style three*/ .work_progress.style3 { padding: 34px 13px 7px; background: #f5f5f5; border-radius: 5px; } .work_progress.style3 .work_progress-title h2 { font-size: 20px; font-weight: 500; margin: 7px 0 4px; } .work_progress.style3 .work_progress-number span { background: #0A7A60 ; display: inline-block; height: 70px; width: 70px; line-height: 70px; color: #fff; } .work_progress.style3 .work_progress-number span::before { display: none; } .work_progress.style3 .work_progress-number span::after { position: absolute; left: -6px; top: -6px; width: 82px; height: 82px; background: #ED2C41; opacity: 0.3; } /*style four*/ .work_progress.style4 { position: relative; z-index: 1; padding: 58px 32px 20px; border-radius: 4px; transition: .4s; text-align: center; } .work_progress.style4:before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; transition: .5s; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/process.png); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; } .work_progress.style4:after { position: absolute; content: ""; top: 0; left: 50%; height: 100%; width: 0; transition: .5s; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/color.png); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; border-radius: 4px; } .work_progress.style4:hover:after { left: 0; width: 100%; } .work_progress.style4:hover h3.title, .work_progress.style4:hover p.description{ color: #fff; } .work_progress.style4 p.description{ transition: .5s; } .work_progress.style4 h3.title { font-size: 20px; font-weight: 700; margin: 6px 0 11px; } .work_progress.style4 .work_progress-number { position: absolute; left: 0; right: 0; margin: 0 auto 0; top: -37px; } .work_progress.style4 .work_progress-number span { background: #0A7A60 ; display: inline-block; height: 71px; width: 71px; line-height: 66px; text-align: center; color: #fff; border-radius: 50%; font-size: 21px; position: relative; z-index: inherit; border: 3px solid #fff; } .work_progress.style4 .work_progress-number span::before { position: absolute; left: -13px; top: -13px; width: 48px; height: 48px; background: #0A7A60 ; opacity: 1; content: ""; border-radius: 50%; z-index: -1; } .work_progress.style4 .work_progress-number span::after { content: ""; top: -37px; left: 0; height: 40px; width: 309px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/line.png); background-position: center center; background-repeat: no-repeat; position: absolute; } .three .work_progress.style4 .work_progress-number span::after { display: none; } /*style five*/ .work_progress.style5 { text-align: center; padding: 0 25px; position: relative; z-index: 1; } .work_progress.style5 .icon { display: inline-block; width: 80px; height: 80px; border-radius: 40px; background-color: #0c59d7; text-align: center; line-height: 113px; position: relative; margin-bottom: 40px; } .work_progress.style5 .icon:before { position: absolute; content: ""; width: 100px; height: 100px; border: 2px dashed #0A7A60 ; top: -10px; left: -10px; border-radius: 50%; } .work_progress.style5 h3.title { display: inline-block; margin: 0 0 9px; font-size: 26px; font-weight: 600; } /*work process style 6*/ .work_progress.style6 { text-align: center; position: relative; } .work_progress.style6 .icon { display: inline-block; width: 80px; height: 82px; border-radius: 100%; background-color: #eff2f7; line-height: 102px; transition: .5s; border: none; border-bottom: 3px solid #2875ff; top: 0; position: relative; margin: 0 0 73px 0; box-shadow: none; text-align: center; } .work_progress.style6 .icon:after { content: ""; position: absolute; background: #fff; height: 60px; width: 1px; border-left: 1px dashed #2875ff; top: 90px; left: 0; right: 0; margin: auto; } .work_progress.style6 .work_progress-number { position: relative; z-index: 1; } .work_progress.style6 .work_progress-number span { background: #fff; display: inline-block; height: 56px; width: 56px; line-height: 56px; text-align: center; color: #232323; border-radius: 50%; font-size: 16px; position: relative; z-index: 1; border: 1px dashed #2875ff; transition: 0.3s; } .work_progress.style6 .work_progress-number span::before { position: absolute; left: 7px; top: 7px; width: 40px; height: 40px; background: #eff2f7; content: ""; margin: auto; border-radius: 100%; z-index: -1; transition: 0.4s; opacity: 1; } .work_progress.style6:hover .work_progress-number span::before { background: #2875ff; } .work_progress.style6:hover .work_progress-number span{ color:#fff; } .work_progress.style6 .content { text-align: center; background: #eff2f7; border-radius: 5px; padding: 24px 15px 17px 15px; transition: 0.4s; position: relative; z-index: 1; margin: 80px 0 0 0; } .work_progress.style6 .content:before { content: ""; position: absolute; height: 0; width: 100%; background: linear-gradient(-90deg, #2375fb 0%, #1129b9 100%); top: 0; left: 0; transition: 0.4s; z-index: -1; border-radius: 5px; } .work_progress.style6:hover .content:before{ height: 100%; } .work_progress.style6 h3.title { font-size: 20px; color: #232323; font-weight: 700; margin: 10px 0 11px 0; transition: 0.4S; } .work_progress.style6 p.description{ transition: .5s; } .work_progress.style6 .content:after { content: ""; position: absolute; height: 35px; width: 70px; background: #eff2f7; top: -35px; left: 0; right: 0; transition: 0.4s; z-index: 0; margin: auto; border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .work_progress.style6:hover .content:after { background: linear-gradient(-90deg, #2375fb 0%, #1129b9 100%); } .work_progress.style6:hover h3.title, .work_progress.style6:hover p.description{ color: #fff; } /*style seven*/ .work_progress.style7 { text-align: center; margin-bottom: 30px; position: relative; padding: 0 20px; } .work_progress.style7 .icon { text-align: center; border: none; border-radius: 50%; display: inline-block; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; box-shadow: none; width: 100px; height: 100px; border-radius: 50px; background-color: #0A7A60 ; line-height: 130px; } .work_progress.style7 .content { padding: 40px 0 0; } .work_progress.style7 .work_progress-number span { background: transparent; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; font-size: 90px; width: inherit; font-weight: 700; font-family: 'Mulish'; position: absolute; left: 0; right: 0; top: 82px; opacity: 0.1; } .work_progress.style7 h3.title { font-size: 22px; margin: 0 0 12px; color: #ffff; } /* style eight*/ .work_progress.style8 { text-align: center; margin-bottom: 30px; position: relative; padding: 0 0px; } .work_progress.style8 .content { border-radius: 5px; filter: drop-shadow(0px 10px 20px rgba(35, 50, 83, 0.07)); background-color: #ffffff; padding: 26px 22px 32px; position: relative; z-index: 1; } .work_progress.style8 .content:before { position: absolute; content: ""; z-index: -1; right: 0; top: 0; width: 0; height: 100%; background-image: linear-gradient(-45deg, #00237d 0%, #0b59db 100%); transition: .5s; border-radius: 5px; } .work_progress.style8:hover .content:before { width: 100%; left: 0; } .work_progress.style8 .icon { display: inline-block; position: relative; z-index: 1; margin-bottom: 90px; } .work_progress.style8 .icon i { color: #fff; font-size: 35px; } .work_progress.style8 .icon:before { position: absolute; content: ""; z-index: -1; top: -47px; left: -57px; right: 0; width: 141px; height: 140px; background-image: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/proces.png); background-position: center; background-repeat: no-repeat; background-size: contain; margin: auto; } .work_progress.style8 h3.title { font-size: 16px; margin: 12px 0 15px; transition: .5s; } .work_progress.style8 p.description{ transition:.5s; } .work_progress.style8:hover h3.title, .work_progress.style8:hover p.description{ color: #fff; } .work-two .work_progress.style8 .icon:before { background-image: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/process2.png); background-position: center; background-repeat: no-repeat; background-size: contain; margin: auto; } .work-three .work_progress.style8 .icon:before { background-image: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/process3.png); background-position: center; background-repeat: no-repeat; background-size: contain; } .work-four .work_progress.style8 .icon:before { background-image: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/process4.png); background-position: center; background-repeat: no-repeat; background-size: contain; } .work-two .work_progress.style8 .content:before { background-image: linear-gradient(-45deg, #FE542D 0%, #FF950B 100%); } .work-three .work_progress.style8 .content:before { background-image: linear-gradient(-45deg, #8B3FFE 0%, #D02FFB 100%); } .work-four .work_progress.style8 .content:before { background-image: linear-gradient(-45deg, #FF4F2B 0%, #FF47A6 100%); } /*style nine*/ .work_progress.style9 { position: relative; text-align: center; } .work_progress.style9 .content { text-align: center; background: #030D48; border-radius: 5px; padding: 24px 20px 17px 20px; transition: 0.4s; position: relative; z-index: 1; margin: 0; } .work_progress.style9 .content:before { content: ""; position: absolute; height: 0; width: 100%; background: #34c780; top: 0; left: 0; transition: 0.4s; z-index: -1; border-radius: 5px; } .work_progress.style9:hover .content:before { height: 100%; } .work_progress.style9 .content:after { content: ""; position: absolute; height: 15px; width: 35px; background: #030D48; top: -15px; left: 0; right: 0; transition: 0.3s; z-index: 0; margin: auto; border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .work_progress.style9:hover .content:after { background: #34c780; } .work_progress.style9 h3.title { font-size: 20px; color: #fff; font-weight: 700; margin: 0; padding: 10px 0 25px 0; transition: 0.4S; position: relative; } .work_progress.style9 p.description { transition: .5s; } .work_progress.style9:hover p.description{ color: #fff; } .work_progress.style9 h3.title:before { content: ""; position: absolute; height: 15px; width: 2px; background: #34c780; bottom: 0; left: 0; right: 0; margin: auto; transition: 0.4s; z-index: 1; border-radius: 5px; } .work_progress.style9 h4.sub_title { font-size: 15px; line-height: 23px; color: #ffffff; font-weight: 500; background: #34c780; display: inline-block; padding: 8px 25px 8px 25px; border-radius: 20px; text-align: center; margin: 4px 0 18px 0; } .work_progress.style9 .work_progress-number { position: relative; z-index: 1; padding: 0 0 80px 0; text-align: center; } .work_progress.style9 .work_progress-number::before { position: absolute; left: 0; right: 0; top: 20px; width: 0; height: 53px; background: inherit; border-left: 2px dashed #34c780; content: ""; margin: auto; border-radius: 0; z-index: -1; transition: 0.4s; opacity: 1; } .work_progress.style9 .work_progress-number span { background: #060531; display: inline-block; height: 20px; width: 20px; line-height: 20px; text-align: center; color: #232323; border-radius: 50%; font-size: 16px; position: relative; z-index: 1; border: 2px solid #fff; transition: 0.3s; } .work_progress.style9 .work_progress-number span::before { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; line-height: 12px; background: #34c780; content: ""; margin: auto; border-radius: 100%; z-index: -1; transition: 0.4s; opacity: 1; } .work_progress.style9 .work_progress-number span::after { position: absolute; left: 0; right: 0; bottom: -65px; width: 10px; height: 10px; background: #34c780; content: ""; margin: auto; border-radius: 100%; z-index: -1; transition: 0.4s; opacity: 1; } /*work process style 10*/ .work_progress.style10 { padding: 0 15px; position: relative; transition: .5s; } .work_progress.style10 h4.sub_title { border-radius: 30px; background-color: rgba(255,255,255,0.10196078431372549); border: 1px solid #121417; display: inline-block; padding: 6px 17px; font-size: 14px; color: #121417; font-weight: 500; font-family: "Mulish"; text-transform: uppercase; position: relative; } .work_progress.style10 h4.sub_title:before { position: absolute; content: ""; left: 0; right: 0; margin: auto; width: 1px; height: 80px; background-color: #121417; top: -80px; } .work_progress.style10 h4.sub_title:after { position: absolute; content: ""; left: 0; right: 0; margin: auto; width: 12px; height: 12px; border-radius: 6px; border: 1px solid #121417; background-color: #ebfeff; top: -90px; } .work_progress.style10:hover h4.sub_title { background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); color: #fff!important; border-color: #096dff; } .work_progress.style10 .icon { margin-top: 30px; } /*service carousel*/ .service_item.style_one { background: 0; margin-right: 14px; padding: 0; border-radius: 10px; transition: .5s; display: inline-block; border-width: 1px 1px 3px; border-style: solid; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(12, 90, 219); border-image: initial; border-radius: 5px; border-bottom: 3px solid rgb(12, 90, 219); margin-left: 4px; } .service_item.style_one .service_content { padding: 40px 31px 21px; position: relative; z-index: 1; } .service_item.style_one .icon i { width: 80px; height: 80px; line-height: 80px; color: rgb(255, 255, 255); text-align: center; font-size: 40px; display: block; background: rgb(12, 90, 219); border-radius: 4px; position: absolute; top: -52px; transition: .5s; } .service_item.style_one:hover .icon i{ animation: wobble_vertical 1s forwards ease-in-out 0s; } .service_item.style_one .service_img { display: inline-block; } .service_item.style_one h2.title { margin: 16px 0 16px; font-size: 22px; font-weight: 700; } .service_item.style_one p.description { transition: .5s; margin: 0 0 14px; } /*owl dots*/ .service_carousel.style1 .owl-dots { display: flex; justify-content: center; margin-top: 36px; } .service_carousel.style1 button.owl-dot { display: inline-block; height: 13px; width: 13px; background: #b1cdfb; border-radius: 50%; transition: .5s; margin: 0 8px; } .service_carousel.style1 button.owl-dot.active{ background: #0A7A60 ; } /*nav*/ .service-carousel1.style_one button.owl-prev i, .service-carousel1.style_one button.owl-next i { display: inline-block; position: absolute; right: 100px; top: -128px; height: 55px; width: 55px; line-height: 55px; border: 1px solid#1e1e1e; border-radius: 50%; font-size: 20px; font-weight: 700; } .service-carousel1.style_one button.owl-next i { right: 31px; } .service-carousel1.style_one button.owl-prev i:hover, .service-carousel1.style_one button.owl-next i:hover{ border-color:#0b59db; background:#0b59db; color:#fff; } /*service_item style two*/ .service_carousel.style2 .service_item.style_two { display: inline-block!important; padding: 38px 35px 31px; position: relative; z-index: 9999; box-shadow: 0px 0px 60px 0px rgb(187 195 208 / 10%); margin-bottom: 20px; overflow: inherit; transition: .5s; margin-top: 15px; margin-right: 20px; } .service_carousel.style2 .service_item.style_two:before { position: absolute; content: ""; z-index: -1; right: 0; top: 0; width: 100%; height: 100%; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/feature1-1.png); transition: .5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .service_carousel.style2 .service_item.style_two:after { position: absolute; content: ""; z-index: -1; left: 50%; top: 0; width: 0; height: 100%; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/shape3.png); transition: .5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .service_carousel.style2 .service_item.style_two:hover:before{ opacity: 0; } .service_carousel.style2 .service_item.style_two:hover:after { width: 100%; left: 0; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/shape3.png); transition: .5s; background-position: center center; background-size: cover; background-repeat: no-repeat; } .service_carousel.style2 .service_item.style_two .icon { display: inline-block; } .service_carousel.style2 .service_item.style_two h2.title { font-size: 22px; font-weight: 700; margin: 15px 0 9px; } .service_carousel.style2 .service_item.style_two .description{ transition: .5s; } .service_carousel.style2 .service_item.style_two:hover h2.title, .service_carousel.style2 .service_item.style_two:hover .description{ color:#fff; } /*service item threee*/ .service_item.style_three { border-radius: 5px; background-color: rgba(255, 255, 255, 0.07058823529411765); border: 1px solid rgba(255, 255, 255, 0.2); margin: 0 11px; padding: 20px; transition: .5s; } .service_item.style_three:hover { border-color: #0A7A60 ; } .service_item.style_three .service_item_content { display: flex; align-items: center; gap: 20px; padding: 17px 0 38px; } .service_item.style_three .service_img img { border-radius: 5px; } .service_item.style_three h2.title { color: #fff; font-size: 24px; font-weight: 600; margin: 0; display: inline-block; } .service_item.style_three .icon { width: 74px; height: 74px; border-radius: 37px; background-color: #0A7A60 ; line-height: 74px; text-align: center; display: inline-block; margin-right: 22px; float: left; padding: 18px; } /*nav*/ .service_carousel.style3 .owl-nav { display: flex; justify-content: center; margin-top: 72px; } .service_carousel.style3 .owl-prev, .service_carousel.style3 .owl-next { display: inline-block; left: 0; right: 0; margin: 0 7px; text-align: center; width: 52px; height: 52px; border-radius: 26px; background-color: rgba(255,255,255,0)!important; border: 1px solid rgba(255,255,255,0.2)!important; line-height: 52px; color: #fff!important; } .service_carousel.style3 .owl-prev i, .service_carousel.style3 .owl-next i{ color: #fff; } .service_carousel.style3 .owl-prev:hover, .service_carousel.style3 .owl-next:hover{ background-color: #0A7A60 !important; border-color: #0A7A60 !important; } /*owl dots*/ .service_cursousel_sliderr.style-5 .slick-dots li { height: 5px!important; margin: 0 13px!important; width: 200px!important; position: relative; } .service_carousel.style2 button.owl-dot { background-color: #E9E9E9; height: 5px!important; margin: 0 13px!important; width: 293px!important; border-radius: 0; } .service_carousel.style2 button.owl-dot { bottom: -66px !important; position: relative; text-align: center; z-index: 2; } .service_carousel.style2 button.owl-dot.active { background-color: #0A7A60 ; } /*owl nav*/ .service_carousel.style2 button.owl-prev i, .service_carousel.style2 button.owl-next i { background: #F7F8FF !important; border-radius: 100%; -webkit-box-shadow: none !important; height: 54px !important; top: 112%; no: normal; -ms-transform: translate(0px, -50%); transform: translate(0px, -50%); width: 55px !important; z-index: 1; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; line-height: 55px !important; color: #232323; border: 0; display: inline-block; } .service_carousel.style2 button.owl-prev i:hover, .service_carousel.style2 button.owl-next i:hover { background: linear-gradient(to left, #2475FC, #1129B9 100%)!important; color: #fff; } .service_carousel.style2 button.owl-next i { float: right; position: absolute; right: -85px; bottom: 50%; text-align: center; } .service_carousel.style2 button.owl-prev i { position: absolute; left: -78px; } /*service item four*/ .service_item.style_four { margin-right: 20px; } .service_item.style_four .service_img { position: relative; z-index: 1; } .service_item.style_four .service_item_content { position: absolute; bottom: 28px; left: 30px; transition: .5s; } .service_item.style_four .service_img:before { content: ""; bottom: 0; left: 0; height: 0%; width: 100%; background: linear-gradient(103deg, #0026ff, #0053ff); clip-path: polygon(0 -4%, 1% 0, 159% 100%, 0% 100%); position: absolute; transition:.4s; } .service_item.style_four:hover .service_img:before{ height:41%; } .service_item.style_four h2.title { font-size: 27px; color: #ffffff; font-weight: 800; margin: 24px 0 14px; } .service_item.style_four p.description { opacity: 0.702; font-size: 14px; text-transform: uppercase; color: #fefefe; font-weight: 500; font-family: "Mulish"; margin: 0; } .service_item.style_four .service-details-button a { display: inline-block; width: 40px; height: 40px; border-radius: 20px; background-image: linear-gradient(-90deg, #2375fb 0%, #2375fb 1%, #0d6dfd 100%); text-align: center; line-height: 40px; color: #fff; font-weight: 700; font-size: 15px; transition: .5s; position: relative; z-index: 22; } .service_item.style_four .service-details-button a:hover{ background:#fff; color:#0d6dfd; } /*owl dots*/ .service_carousel.style4 .owl-dots { display: flex; justify-content: center; position: relative; z-index: 22; margin-top: 46px; } .service_carousel.style4 button.owl-dot { display: inline-block; width: 11px; height: 11px; border-radius: 6px; background-color: #2475fc; border-radius: 100%; margin: 0 7px; } .service_carousel.style4 button.owl-dot.active { position: relative; z-index: 2; } .service_carousel.style4 button.owl-dot.active:before { position: absolute; content: ""; top: -4px; left: -4px; height: 19px; width: 19px; border: 1px solid#2475fc; border-radius: 100%; } /* ============== skill section ============== */ span.elementor-progress-percentage { position: relative; top: -22px!important; } /* ============== Call To Action ============== */ .call-to-action { text-align: center; position: relative; } .call-to-action-title h2 { margin-bottom: 12px; font-size: 35px; margin: 20px auto; text-transform: capitalize; } .call-to-action-title span { font-size: 40px; display: block; letter-spacing: 0; line-height: 1.2; margin-top: 20px auto 0; font-weight: 700; } .call-to-action-btn { margin-top: 30px; } .call-to-action-btn a { border: none; display: inline-block; text-transform: capitalize; background-color: #ED2C41; border-radius: 4px; color: #fff; padding: 16px 32px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-weight: 500; } .call-to-action-btn a i{ margin-left:8px; } .call-to-action-btn a:hover { background: #fff; color: #ED2C41; } .call-to-action-desc { width: 31%; margin: auto; } .call-to-video { margin-bottom: 35px; } .call-video-link a{ display:inline-block } .call-video-link a i { width: 90px; height: 90px; display: inline-block; background: #fff; text-align: center; line-height: 90px; color: #ED2C41; border-radius: 100%; position:relative; z-index:1; -webkit-transition:.3s; -o-transition:.3s; transition:.3s; } .call-video-link a { position:relative; } .call-video-link a::before { content: ""; position: absolute; left: 50%; top: 50%; height: 100px; width: 100px; background: rgba(255,255,255, 0.8); border-radius: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .call-to-video i { font-size: 23px; } .ripple-video a { border-radius: 50%; -webkit-animation: ripple-white 1s linear infinite; animation: ripple-white 1s linear infinite; -webkit-transition: .5s; display: inline-block; height: 60px; width: 60px; } .ripple-video a i{ color: #0A7A60 ; } /* =========== Testimonial =========== */ .testimonial.style1{ margin: 10px 0 10px; } .testimonial.style1 .testimonial-item { margin: 10px; } .testimonial-item .thumb { display: inline-block; } .testimonial.style1 .testi_content { position: relative; z-index: 1; padding: 52px 30px 52px; -webkit-box-shadow: 0 25px 40px 0 rgba(0, 0, 0, .1); box-shadow: 0 0 7px 0 rgb(0 0 0 / 10%); background: #fff; border-radius: 5px; text-align: left; margin-bottom: 40px; } .testimonial.style1 .testi_content:after { position: absolute; content: ""; right: 0; top: 0; height: 100%; width: 0; transition: 0.5s; z-index: -1; background: #1266f1; border-radius: 5px; } .testimonial.style1 .testi_content:hover:after { width: 100%; left: 0; } .testimonial-item .thumb img { transition:.5s; } .testimonial.style1 .testimonial-item:hover .thumb img { filter: brightness(0)invert(1); } .testimonial.style1 .testi_content:hover p.quote{ color: #fff; } .testimonial.style1 .owl-item:nth-child(odd) { margin-top: 0; } .testimonial .testi_content .thumb { display: inline-block; } .testimonial.style1 .testimonial-item .author { display: flex; align-items: center; gap: 25px; } .testimonial.style1 .testimonial-item p.quote { margin: 0; transition: .5s; } .testimonial.style1 .testimonial-item .author img { width: 90px; border-radius: 100%; } .testimonial.style1 .testimonial-item .testi-star i.active { color: #0A7A60 ; font-size: 19px; margin: 0 1px; } .testimonial.style1 .testimonial-item h4.name { margin: 9px 0 10px; font-size: 20px; } .testimonial.style1 .testimonial-item h5.designation { color: #0A7A60 ; font-weight: 500; font-size: 16px; display: block; margin: 0 0 0; } .testimonial.style1.style4 .testi_content:hover:before{ border-color: #1266f1 transparent transparent #1266f1; } /*owl dots*/ .testimonial.style1 .owl-dots { display: flex; justify-content: center; margin-top: 19px; } .testimonial.style1 .owl-dots .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .testimonial.style1 .owl-dots .owl-dot.active { background: #0A7A60; width: 35px; } /*style two*/ .testimonial.style2 .testimonial-item { -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; position: relative; text-align: center; box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 15%); margin-bottom: 30px; padding: 36px; background: #fff; border-radius: 5px; position: relative; z-index: 1; } .testimonial.style2 .author { display: inline-block; } .testimonial.style2 .author img { width: 90px; border-radius: 100%; } .testimonial.style2 p.quote { margin: 18px 0 25px; } .testimonial.style2 .testi-star i.active { color: #0A7A60 ; font-size: 19px; margin: 0 1px; } .testimonial.style2 h4.name { font-size: 18px; margin-bottom: 0px; text-transform: capitalize; letter-spacing: 0; font-weight: 700; } .testimonial.style2 h5.designation { color: #0A7A60 ; font-weight: 500; font-size: 16px; display: block; padding-top: 9px; margin: 0 0 0; } /*owl dots*/ .testimonial.style2 .owl-dots { position: absolute; left: 50%; bottom: -36px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial.style2 .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .testimonial.style2 .owl-dot.active { background: #0A7A60; width:35px; } /*testimonial.style3*/ .testimonial.style-three .author { display: inline-block; position: relative; margin-bottom: 20px; } .testimonial.style-three .author img { border-radius: 100%; width: 90px; } .testimonial.style-three .author:before { content: "\f10d"; font-family: FontAwesome; font-size: 18px; position: absolute; line-height: 50px; bottom: 0px; right: -16px; background-color: #0A7A60 ; width: 50px; height: 50px; text-align: center; color: #fff; border-radius: 50%; } .testimonial.style-three .testi_content { position: relative; padding: 52px 30px 52px; -webkit-box-shadow: 0 25px 40px 0 rgba(0, 0, 0, .1); box-shadow: 0 0 7px 0 rgb(0 0 0 / 10%); background: #fff; border-radius: 5px; text-align: center; margin-bottom: 40px; } .testimonial.style-three .testimonial-item.style3 { text-align: center; transition: .5s; } .testimonial.style-three .testimonial-item.style3 .reviews_rating i.active { color: #0A7A60 ; font-size: 19px; margin: 0 1px; } .testimonial.style-three .testimonial-item.style3 h5.designation { margin: 0 0 0; } .testimonial.style-three .testimonial-item.style3 p.quote { margin: 0; } .testimonial.style-three .testimonial-item.style3:hover p.quote { color: #686868; } /*owl dots*/ .testimonial.style-three .owl-dots { position: absolute; left: 50%; bottom: -40px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial.style-three .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .testimonial.style-three .owl-dot.active { background: #0A7A60; width:35px; } /*testimonial style four*/ .testimonial.style1.style4 .testi_content{ position: relative; z-index: 1; } .testimonial.style1.style4 .testi_content:before { content: ''; bottom: -20px; top: auto; border-color: #fff transparent transparent #fff; display: block; position: absolute; left: 0; margin-left: 0; width: 0; height: 0; border-style: solid; border-width: 15px; } /*testimonial style five*/ .testimonial.style5 h3.title_text { color: #fff; font-size: 18px; font-weight: 500; text-align: left; font-style: italic; margin: 0 0 0; } .testimonial.style5 p.quote { font-size: 16px; font-style: inherit; width: 86%; margin: 17px 0 32px; color: #C7CCF4; line-height: 28px; } .testimonial.style5 .author { display: flex; align-items: center; gap: 20px; } .testimonial.style5 .reviews_rating i.active { color: #fff; margin: 24px 0 33px; } .testimonial.style5 h4.name { font-size: 18px; margin: 0; color: #fff; font-weight: 600; } .testimonial.style5 h5.designation { color: #fff; padding-top: 5px; font-size: 16px; font-weight: 500; margin: 0; } /*owl dots*/ .testimonial.style5 .owl-dots { position: absolute; left: 68%; bottom: 27px; } .testimonial.style5 .owl-dot { background: #bfcadc; height: 12px; width: 12px; display: inline-block !important; margin: 0px 2px; border-radius: 50px; } .testimonial.style5 .owl-dot.active { background: #FE6B35; width: 12px; } /*testimonial style six*/ .testimonial.style6 .testimonial-item { -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; position: relative; margin-top: 10px; text-align: left; } .testimonial.style6 .thumb { display: inline-block; position: relative; margin: 0 42px 20px 0; display: block; float: left; z-index: 2; top: 69px; } .testimonial.style6 .quote_thumb { display: inline-block; position: absolute; top: 0; } .testimonial.style6 .testi_content { position: relative; padding: 62px 16px 25px 30px; -webkit-box-shadow: 0 25px 40px 0 rgba(0, 0, 0, .1); box-shadow: none; background: #fff; border-radius: 5px; text-align: left; margin-bottom: 40px; overflow: hidden; border-right: 12px solid #f0f2f1; border-bottom: 12px solid #f0f2f1; transition: .5s; } .testimonial.style6 .testimonial-item:hover .testi_content { border-bottom: 12px solid #0B59DB; border-right: 12px solid #0B59DB; } .testimonial.style6 h4.name { font-size: 18px; margin-bottom: 0px; text-transform: capitalize; letter-spacing: 0; font-weight: 700; margin: 20px 0 0; display: inline-block; } .testimonial.style6 h5.designation { color: #828fa0; display: inline-block; font-size: 14px; font-weight: 500; margin-left: 30px; } /*owl nav*/ .testimonial.style6 button.owl-next { position: absolute; right: -11px; top: 48%; } .testimonial.style6 button.owl-prev i { border-radius: 50%; color: #fff; font-size: 19px; height: 60px; line-height: 60px; position: absolute; top: 50%; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; width: 60px; text-align: center; z-index: 99; -webkit-transform: translateY(-49%); -ms-transform: translateY(-49%); transform: translateY(-49%); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background: #0A7A60; left: -77px; } .testimonial.style6 button.owl-prev i:hover, .testimonial.style6 button.owl-next i:hover{ background: #121B51; color: #fff; } .testimonial.style6 button.owl-next i { border-radius: 50%; color: #fff; font-size: 19px; height: 60px; line-height: 60px; position: absolute; top: 50%; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; width: 60px; text-align: center; z-index: 99; -webkit-transform: translateY(-49%); -ms-transform: translateY(-49%); transform: translateY(-49%); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background: #0A7A60; } /*testimonial style seven*/ .testimonial.style7 .testimonial-item { padding: 40px 30px 34px; filter: inherit; background: linear-gradient(0deg, rgba(187, 247, 55, 0) 0%, rgba(187, 247, 55, 0.07058823529411763) 100%); border-radius: 10px; margin-top: 30px; transition: .5s; position: relative; z-index: 1; } .testimonial.style7 .testimonial-item:before { position: absolute; content: ""; border-top: 1px solid rgba(187,248,56,0.5); border-bottom: 1px solid rgba(187,248,56,0.5); transform: scale(0, 1); top: 0; bottom: 0; left: 0; right: 0; transition: .5s; border-radius: 5px; } .testimonial.style7 .testimonial-item:after { position: absolute; content: ""; border-left: 1px solid rgba(187,248,56,0.5); border-right: 1px solid rgba(187,248,56,0.5); transform: scale(1, 0); top: 0; bottom: 0; left: 0; right: 0; transition: .5s; border-radius: 5px; } .testimonial.style7 .testimonial-item:hover:before, .testimonial.style7 .testimonial-item:hover:after{ transform: scale(1); } .testimonial.style7 .author { display: flex; align-items: center; gap: 20px; } .testimonial.style7 h4.name { color: #fff; font-size: 22px; font-weight: 500; margin: 0 0px 7px; text-align: left; } .testimonial.style7 h5.designation { color: #7b7b7b; font-size: 16px; font-weight: 400; margin: 0; } .testimonial.style7 p.quote { font-size: 18px; font-weight: normal; color: #fff; opacity: 0.8; margin: 30px 0px 0px; width: 100%; text-align: left; } .testimonial.style7 .reviews_rating { display: inline-block; position: absolute; right: 41px; top: 69px; } .testimonial.style7 .testi-star i.active { display: inline-block; font-size: 15px; letter-spacing: 7px; color: #ffa133; } /*testimonial style eight*/ .testimonial.style8 .testimonial-item { text-align: center; padding: 30px 25px; border-radius: 5px; } .testimonial.style8 .thumb { display: inline-block; position: relative; } .testimonial.style8 .thumb:before { content: "\f10d"; font-family: FontAwesome; font-size: 18px; position: absolute; line-height: 50px; bottom: 0px; right: -16px; background-color: #0A7A60 ; width: 50px; height: 50px; text-align: center; color: #fff; border-radius: 50%; } .testimonial.style8 p.quote { width: 73%; margin: 22px auto 60px; font-size: 18px; font-weight: 500; font-style: italic; } .testimonial.style8 h4.name { margin: 0 0 0; position: relative; display: inline-block; } .testimonial.style8 h4.name::before, .testimonial.style8 h4.name::after { position: absolute; top: -29px; content: ""; height: 1px; width: 25px; background-color: #0A7A60 ; left: calc(50% - 25px); } .testimonial.style8 h4.name::after { background-color: #ddd; left: 50%; } .testimonial.style8 h5.designation { color: #0A7A60 ; font-size: 14px; font-weight: 400; } .testimonial.style8:hover .thumb img { filter: brightness(1) invert(0); } .testimonial.style8:hover p.quote { color: #686868; } /*owl dots*/ .testimonial.style8 .owl-dots { position: absolute; left: 50%; bottom: -36px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial.style8 .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .testimonial.style8 .owl-dot.active { background: #0A7A60; width:35px; } .testimonial.style8 .owl-dots { bottom: -15px; } /*testimonial style nine*/ .testimonial.style9 p.quote { display: block; padding-top: 9px; font-size: 22px; font-style: normal; width: 100%; color: #FFFFFF; line-height: 44px; } .testimonial.style9 .testi-star i.active { color: #FDB500; font-size: 15px; margin: 0 5px 17px 0; } .testimonial.style9 .author_content { display: block; border-left: 2px solid #0A7A60 ; padding-left: 20px; } .testimonial.style9 h4.name { font-size: 22px; font-weight: 500; color: #fff; margin: 0 0 0; } .testimonial.style9 h5.designation { color: #818B97; font-size: 16px; display: block; padding-top: 0; } /*testimonial*/ .testimonial.style10 .testimonial-item { position: relative; margin: 10px 0 12px 5px; text-align: left; padding: 32px 30px 20px; border-radius: 30px; background-color: #ffffff; border: 1px solid rgba(30, 30, 30, 0.1); } .testimonial.style10 .author { display: flex; align-items: center; gap: 18px; } .testimonial.style10 h4.name { font-size: 18px; font-weight: 700; color: #232323; margin: 0; } .testimonial.style10 h5.designation { padding-top: 2px; color: #616161; font-weight: 400; font-size: 16px; margin: 0 0 0; } .testimonial.style10 .reviews_rating { position: absolute; bottom: -27px; left: 50%; margin: 0; background: #fff; padding: 2px 20px 2px 20px; border: 1px solid rgba(30, 30, 30, 0.1); border-radius: 30px; transform: translate(-50%, -50%); } .testimonial.style10 .testi-star i.active { color: #FFB500; font-size: 14px; margin: 0 2px; } .testimonial.style10 p.quote { margin: 23px 0 26px; } /*software-test-dark*/ .software-test-dark .testimonial.style10 .testimonial-item { background-color: #101010; border: 1px solid rgba(30, 30, 30, 0.1); } .software-test-dark .testimonial.style10 .reviews_rating { background: #101010; border: 1px solid rgba(255, 255, 255, 0.1); } /*testimonial style 11*/ .testimonial.style11 .testimonial-item { -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; margin-top: 10px; background-color: #02176b; text-align: left; padding: 35px 26px 30px; border-radius: 5px; } .testimonial.style11 .testimonial-item:hover { -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s; background-color: #0A7A60 ; } .testimonial.style11 .author { display: flex; align-items: center; gap: 21px; } .testimonial.style11 h4.name { font-size: 18px; margin-bottom: 0px; text-transform: capitalize; letter-spacing: 0; font-weight: 700; color: #fff; margin: 0 0 6px; } .testimonial.style11 h5.designation { color: #ccd0e2; transition: .5s; margin: 0 0 0; font-size: 16px; font-weight: 500; } .testimonial.style11 p.quote { font-size: 17px; font-weight: 500; margin: 30px 0px 24px; border-bottom: 1px solid #1c2e72; padding-bottom: 27px; color: #ccd0e2; transition: .5s; } .testimonial.style11 .testimonial-item:hover p.quote{ border-bottom: 1px solid #256bdf; color: #fff; transition: .5s; } .testimonial.style11 .thumb { display: inline-block; } .testimonial.style11 .reviews_rating { display: inline-block; float: right; position: relative; top: -28px; } .testimonial.style11 .reviews_rating i.active { color: #FFA200; } /*owl dots*/ .testimonial.style11 .owl-dots { position: absolute; left: 50%; bottom: -69px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial.style11 .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .testimonial.style11 .owl-dot.active { background: #0A7A60; width:35px; } /*style 12*/ .testimonial.style12 .thumb { display: inline-block; } .testimonial.style12 .thumb img{ border-radius: 5px; } .testimonial.style12 p.quote { font-size: 20px; font-weight: 300; font-style: normal; width: 100%; margin: 13px auto 0; color: #fff; line-height: 40px; } .testimonial.style12 i.active { color: #ff9b0c; font-size: 15px; margin: 0 4px; } .testimonial.style12 .reviews_rating { margin: 22px 0 44px; } .testimonial.style12 .author { display: flex; align-items: center; gap: 25px; } .testimonial.style12 h4.name { font-size: 24px; letter-spacing: 0; font-weight: 600; color: #fff; margin: 0 0 0; } .testimonial.style12 h5.designation { color: #fff; font-weight: 400; font-size: 16px; display: block; padding-top: 8px; margin: 0 0; } /*testimonial style thireteen*/ .testimonial.style13 .testimonial-item { margin-top: 87px; border-radius: 5px; background-color: #ffffff; text-align: center; padding: 49px 34px 34px; position: relative; z-index: 1; } .testimonial.style13 .testimonial-item:before { content: ""; position: absolute; line-height: 50px; bottom: 0px; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/testi-shape.png); width: 0; height: 100%; top: 0%; left: 50%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s; border-radius: 5px; z-index: -1; } .testimonial.style13 .testimonial-item:hover:before{ width: 100%; left: 0; } .testimonial.style13 .thumb { position: relative; margin: 0 0 20px; display: inline-block; } .testimonial.style13 .thumb:before { content: "\f10d"; font-family: FontAwesome; font-size: 44px; position: absolute; line-height: 50px; bottom: 0px; right: -17px; background-color: transparent; width: 50px; height: 50px; text-align: center; color: #0B59DB; border-radius: 0; z-index: 99; top: -90px; transition: .5s; } .testimonial.style13 p.quote { transition: .5s; } .testimonial.style13 .testimonial-item:hover .thumb:before{ color: #fff; } .testimonial.style13 .testimonial-item:after { content: ""; position: absolute; line-height: 50px; bottom: 0px; right: 0; background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/03/green.png); width: 170px; height: 149px; text-align: center; color: #0B59DB; top: -112%; left: 0; margin: auto; background-position: center center; background-repeat: no-repeat; } .testimonial.style13 .testi-star i.active { color: #FFC107; font-size: 16px; margin: 0 1px; } .testimonial.style13 h4.name { font-size: 18px; margin-bottom: 0px; text-transform: capitalize; letter-spacing: 0; font-weight: 700; } .testimonial.style13 .testi-star { margin: 23px 0 15px; } .testimonial.style13 h5.designation { color: #0A7A60 ; font-weight: 500; font-size: 16px; display: block; padding-top: 8px; margin: 0; } .testimonial.style13 .testimonial-item:hover h4.name, .testimonial.style13 .testimonial-item:hover h5.designation, .testimonial.style13 .testimonial-item:hover p.quote , .testimonial.style13 .testimonial-item:hover .testi-star i.active{ color: #fff; } .testimonial.style13 .owl-nav { display: flex; justify-content: center; margin-top: 41px; } .testimonial.style13 button.owl-prev i, .testimonial.style13 button.owl-next i { color: #0D5BE3; font-size: 15px; height: 40px; line-height: 40px; width: 40px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; background: transparent; box-shadow: none !important; border: 2px solid #0D5BE3; display: inline-block; border-radius: 50%; margin: 0 7px; } .testimonial.style13 button.owl-prev i:hover, .testimonial.style13 button.owl-next i:hover { background: #0D5BE3; color: #fff; box-shadow: 0px 3px 21px 0px rgba(33, 183, 255, 0.35)!important; } /*style 14*/ .testimonial.style14 .testimonial-item { position: relative; margin-top: 10px; text-align: left; background: #1948D4; border-radius: 5px; padding: 56px 50px 37px; clip-path: polygon(0% 2%, 104% 0, 100% 100%, 0% 100%); border-top-left-radius: 12px; } .testimonial.style14 .author { display: flex; align-items: center; gap: 20px; } .testimonial.style14 h4.name { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 0; } .testimonial.style14 h5.designation { font-weight: 500; font-size: 16px; margin: 5px 0 0; color: #fff; } .testimonial.style14 p.quote { color: #fff; font-size: 17px; line-height: 27px; margin: 23px 0 16px; } .testimonial.style14 i.active { color: #FFB500; font-size: 15px; margin: 0 1px; } .testimonial.style14 .owl-dots { position: absolute; left: 87%; bottom: 21px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .testimonial.style14 .owl-dot { height: 16px; width: 16px; display: inline-block !important; margin: 0 3px; border: 1px solid#fff; background: transparent; border-radius: 50%; } .testimonial.style14 .owl-dot.active { width: 16px; background: #fff; } /*testimonial style 15*/ .testimonial-item.style15 { border-radius: 10px; background-image: linear-gradient(0deg, #ffffff 0%, #ffffff 40%, #f5f7fb 80%, #f5f7fb 100%); padding: 46px 36px 38px; position: relative; border: 1px solid#E6E6E8; margin-right: 5px; } .testimonial-item.style15:after { position: absolute; content: ""; bottom: 143px; height: 1px; width: 82%; background: #E6E6E8; left: 0; right: 0; margin: auto; } .testimonial-item.style15 .testi-star i.active { color: #FFA018; font-size: 18px; margin-right: 5px; } .testimonial-item.style15 p.quote { font-size: 20px; line-height: 32px; color: #616161; font-weight: 400; font-family: "Mulish"; margin: 27px 0 23px; } .testimonial-item.style15 .author { display: flex; align-items: center; gap: 20px; padding-top: 70px; } .testimonial-item.style15 h4.name { font-size: 22px; color: #121417; font-weight: 600; margin: 0 0 6px; } .testimonial-item.style15 h5.designation { font-size: 16px; color: #616161; font-weight: 400; font-family: "Mulish"; margin: 0 0 0; } /*owl nav*/ .testimonial.style15 .owl-nav { position: absolute; top: -138px; right: -47%; } .testimonial.style15 button.owl-prev i, .testimonial.style15 button.owl-next i{ width: 56px; height: 56px; border-radius: 28px; background-color: rgba(255,255,255,0); border: 1px solid rgba(18,20,23,0.1); display: inline-block; line-height: 56px; margin-right: 7px; } .testimonial.style15 button.owl-prev i:hover, .testimonial.style15 button.owl-next i:hover{ background-image: linear-gradient(90deg, #2b25ff 0%, #096dff 100%); color:#fff; } /*testimonial style 17*/ .testimonial.style17 .teasti-quote-icon { display: inline-block; margin-right: 16px; } .testimonial.style17 h3.title_text { display: inline-block; font-size: 30px; color: #121417; font-weight: 600; font-family: "Mulish"; margin: 0 0 12px; } .testimonial.style17 .author { display: flex; align-items: center; gap: 20px; margin-top: 35px; } .testimonial.style17 .reviews_rating { border-bottom: 1px solid#dae7e6; padding-bottom: 35px; } .testimonial.style17 .testi-star i.active { color: #ffa030; } .testimonial.style17 p.quote { font-size: 22px; line-height: 38px; color: #121417; font-weight: 400; font-family: "Mulish"; margin: 9px 0 19px; } .testimonial.style17 h4.name { font-size: 28px; color: #121417; font-weight: 600; font-family: "Mulish"; margin: 0 0 6px; } .testimonial.style17 h5.designation { font-size: 16px; color: #616161; font-weight: 400; font-family: "Mulish"; margin: 0 0 0; } /*owl nav*/ .testimonial.style17 .owl-nav { position: absolute; bottom: 9px; right: -2%; } .testimonial.style17 button.owl-prev i, .testimonial.style17 button.owl-next i{ width: 56px; height: 56px; border-radius: 28px; background-color: rgba(255,255,255,0); border: 1px solid rgba(18,20,23,0.1); display: inline-block; line-height: 56px; margin-right: 7px; } .testimonial.style17 button.owl-prev i:hover, .testimonial.style17 button.owl-next i:hover{ background-image: linear-gradient(90deg, #2b25ff 0%, #096dff 100%); color:#fff; } /*tesstimonial style 18*/ .testimonial.style18 .testimonial-item { border-radius: 15px; background-image: linear-gradient(180deg, #1c1f24 0%, #1c1f24 1%, #24282e 100%); padding: 51px 27px 56px; transition: .5s; position: relative; z-index: 1; } .testimonial.style18 .testimonial-item:before{ position:absolute; content:""; top:0; left:0; height:100%; width:100%; z-index:-1; border-radius: 15px; background-image: linear-gradient(180deg, #2375fb 0%, #2375fb 1%, #0d6dfd 100%); transition:.5s; opacity:0; } .testimonial.style18 .testimonial-item:hover:before{ opacity:1; } .testimonial.style18 .teasti-quote-icon { display: inline-block; } .testimonial.style18 .teasti-quote-icon img{ transition:.5s; } .testimonial.style18 p.quote { color: #fff; opacity: 0.7; margin: 29px 0 30px; border-bottom: 1px solid#4c5053; padding-bottom: 30px; } .testimonial.style18 .testimonial-item .thumb img{ transition:.5s; } .testimonial.style18 .testimonial-item .thumb { display: inline-block; margin-top: 33px; } .testimonial.style18 .testimonial-item .thumb img { width: 72%; margin: 0 auto; border-radius: 100%; height: 72px; width: 72px; object-fit: cover; } .testimonial.style18 .testi-star i.active { color: #ffc600; margin: 0 4px; font-size: 13px; } .testimonial.style18 h4.name { font-size: 22px; line-height: 28px; color: #ffffff; font-weight: 700; font-family: "Mulish"; text-align: center; margin: 11px 0 0; } .testimonial.style18 .testimonial-item:hover p.quote{ border-color:#86a6ef; } .testimonial.style18 .testimonial-item:hover .teasti-quote-icon img{ filter: brightness(0) invert(1); } /*testmonial style 19*/ .testimonial-item.style19 { background: #ebf6ff; padding: 46px 26px 36px; position: relative; transition: .5s; } .testimonial-item.style19 .teasti-quote-icon { display: inline-block; } .testimonial-item.style19 p.quote { font-size: 22px; line-height: 34px; color: #232323; font-weight: 600; font-family: "Mulish"; margin: 30px 0 41px; } .testimonial-item.style19 h4.name { font-size: 22px; line-height: 34px; color: #232323; font-weight: 700; } /*testimonial*/ .testimonial-item.style20 { border: 1px solid #38393D; border-radius: 10px; margin: 0 0 0 7px; transition: .5s; } .testimonial-item.style20:hover{ border-color:#2B55FF; } .testimonial-item.style20 .testi_content { padding: 41px 30px 40px; position: relative; } .testimonial-item.style20 .quote-icon { display: inline-block; margin-bottom: 58px; } .testimonial-item.style20 .teasti-quote-icon img { width: 38px; height: 36px; } .testimonial-item.style20 p.quote { color: #fff; font-size: 20px; line-height: 32px; opacity: 0.6; margin: 19px 0 44px; } .testimonial-item.style20 h4.name { margin: 0 0 8px; color: #fff; font-size: 24px; font-weight: 500; } .testimonial-item.style20 h5.designation { margin: 0 0 0; color: #fff; opacity: 0.5; font-size: 16px; font-weight: 500; } .testimonial-item.style20 .thumb { display: inline-block; position: absolute; top: 32px; right: 36px; } /* ========== Case Study ========== */ .single_case_study.style1{ position: relative; } .single_case_study.style1 .case-study-thumb{ position:relative; z-index:1; } .single_case_study.style1 .case-study-thumb::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(12,90,219,.85); content: ""; opacity: 0; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; border-radius: 5px; } .single_case_study.style1:hover .case-study-thumb::before { opacity: 1; } .case-study-thumb img { width: 100%; border-radius: 7px; } .single_case_study.style1 .cases-study-content { position: absolute; left: 0; right: 0; top: 70%; text-align: center; background: #fff; width: 70%; margin: auto; border-radius: 5px; padding: 30px 10px 37px; opacity: 0; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; transform: translateY(-70%); z-index: 999; bottom: inherit; } .single_case_study.style1:hover .cases-study-content { opacity: 1; top: 50%; bottom: inherit; transform: translateY(-50%); } .single_case_study.style1 h2.title { margin: 0; line-height: 25px; } .single_case_study.style1 .cases-study-content h2 a { font-size: 20px; font-weight: 700; margin: 0 0 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #232323; } .single_case_study.style1 .case_category span { color: #0A7A60; margin-top: 6px; display: block; } .single_case_study.style1 .em-case-study-button a { display: block; } /*video style two*/ .video .em-video-image { line-height: 0; } .video .em-video-image img { border-radius: 0; width: 100%; } .single-video.style-two .video-icon a { background: #0A7A60 ; height: 88px; width: 88px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 88px; color: #fff; font-size: 26px; position: relative; -webkit-animation: ripple-red 1s linear infinite; animation: ripple-red 1s linear infinite; -webkit-transition: .5s; } .single-video.style-two .video-icon a { background: #0A7A60 ; height: 88px; width: 88px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 88px; color: #fff; font-size: 26px; position: relative; -webkit-animation: ripple-red 1s linear infinite; animation: ripple-red 1s linear infinite; -webkit-transition: .5s; } .video-it .em-video-image img { border-radius: 10px 0 0 10px; } .single-video .layer-1 { top: -20% !important; left: -158px !important; z-index: -1; position: absolute; } .single-video .layer-2 { top: -47% !important; left: 36% !important; z-index: -1; position: absolute; } .single-video .layer-3 { top: 109% !important; left: -12% !important; z-index: -1; position: absolute; } .single-video { position: relative; text-align: center; } .style-three.single-video { position: relative; text-align: center; margin-right: -214px; margin-left: 168px; } .single-video .layer-4 { top: 83% !important; left: inherit !important; right: -126px; z-index: -1; opacity:1; position: absolute; } /*style five*/ .single-video.style-two.five .video-icon a { background: #0A7A60 ; height: 86px; width: 86px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 86px; color: #fff; font-size: 26px; position: relative; -webkit-transition: .5s; animation: none; } .new-service-video .single-video.style-one .video-icon { left: 10%; top: 64%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-55%) translateY(-11%); } .new-service-video .single-video.style-one .video-icon a { background: #FF9A62; height: 60px; width: 60px; border-radius: 50%; line-height: 59px; color: #fff; font-size: 19px; } /* Slider Dot Css*/ .case-study.style1 .owl-dots { position: absolute; left: 50%; bottom: -36px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .case-study.style1 .owl-dot { background: #bfcadc; height: 5px; width: 25px; display: inline-block !important; margin: 0 3px; border-radius: 50px; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .case-study.style1 .owl-dot.active { background: #0A7A60; width:35px; } .case-study.style1 .case_study_carousel1 .owl-dots { bottom: -60px; } .case-study.style1 .case_study_carousel1 .owl-dots span { opacity: 0; } /*case study style two*/ .case-study.style1.style2 .case-study-thumb:before { position: absolute; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(black)); background: linear-gradient(to bottom,rgba(0,0,0,0),#000); top: 25px; content: ""; opacity: 1; transition: .5s; } .case-study.style1.style2 .single_case_study.style1.style2:hover .case-study-thumb::before { background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(37, 19, 209,.2)),to(blue)); background-image: linear-gradient(to bottom,rgba(37, 19, 209,.4),#2513d1); top: 0; } .case-study.style1.style2 .cases-study-content { top: 74%; background: transparent; width: 100%; bottom: inherit; opacity: 1; } .case-study.style1.style2 .cases-study-content h2 a { font-size: 20px; color: #fff; } .case-study.style1.style2 .case_category span { color: #fff; } .case-study.style1.style2 .single_case_study.style1.style2:hover .cases-study-content { opacity: 1; top: 58%; } .case-study.style1.style2 .owl-dots .owl-dot span { display: none; } /*owl dots*/ .case-study.style1.style2 .owl-dots { position: absolute; left: 50%; bottom: -57px; border-radius: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /*case study style three*/ .single_case_study.style1.style3 { margin: 0 15px; } .single_case_study.style1.style3 .case-study-thumb { position: relative; z-index: 1; margin-bottom: 60px; } .single_case_study.style1.style3 .cases-study-content { position: absolute; left: 0; right: 0; top: inherit; width: 86%; margin: auto; border-radius: 5px; padding: 19px 10px 24px; opacity: 1; bottom: -124px; } .single_case_study.style1.style3:hover .cases-study-content { opacity: 1; top: inherit; bottom: -124px; transform: translateY(-70%); } /*dots*/ .case-study.style1.style3 .owl-dots span { display: none; } /* ========== Brand ========== */ .brand.style1 .brand-item img { transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; width: 63%; } .brand.style1 .brand-item:hover img { opacity: 1; } /*brand style two*/ .brand.style2 .brand-item img { width: 48%; } .new-brand { border-radius: 5px; filter: drop-shadow(0px 10px 20px rgba(12,90,219,0.07)); background-color: #fff; } /*brand style two*/ .brand.style3 .brand-item img { padding: 27px 45px; border: 1px solid #509aff; transition: .5s; } .brand.style3 .brand-item img { width: 74%; } /*brand style 5*/ .brand.style5 .brand-item img { width: 55%; } /*marketting-brand*/ .marketting-brand .brand-item { margin-right: 14px; } .get-quote-msg a{ color:#0A7A60 ; text-decoration:underline !important; } .brand.style3 .brand-item img { width: 64%!important; opacity: 1; transition: .5s; } /* ============== Video Box ============== */ .single-video { position: relative; text-align: center; } .single-video h3 { color: #fff; font-size: 18px; font-weight: 500; margin-bottom: 0; padding-top: 26px; text-transform: capitalize; display: inline-block; margin-left: 25px; } .video-icon a { text-align: center; display: inline-block; position:relative; z-index:99; } .single-video.style-one .video-icon a{ background: #0A7A60 ; height: 75px; width: 75px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 75px; color: #fff; font-size: 26px; position: relative; -webkit-animation: ripple-red 1s linear infinite; animation: ripple-red 1s linear infinite; -webkit-transition: .5s; } .v-overlay .video-icon a i { border: 0px solid #fff; font-size: 30px; } /* Style One */ .single-video.style-one .video-icon, .single-video.style-three .video-icon { left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } @-webkit-keyframes ripple-red { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3) } 100% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(2241, 42, 2, 0) } } /* Style Three */ .single-video .layer-1 img, .single-video .layer-2 img, .single-video .layer-3 img, .single-video .layer-4 img { -webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate; -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } @keyframes alltuchtopdown{ 0%{ -webkit-transform:rotateX(0deg) translateY(0px); -ms-transform:rotateX(0deg) translateY(0px); transform:rotateX(0deg) translateY(0px) } 50%{ -webkit-transform:rotateX(0deg) translateY(-20px); -ms-transform:rotateX(0deg) translateY(-20px); transform:rotateX(0deg) translateY(-20px) } 100%{ -webkit-transform:rotateX(0deg) translateY(0px); -ms-transform:rotateX(0deg) translateY(0px); transform:rotateX(0deg) translateY(0px) } } .single-video.style-three .video-icon a { -webkit-animation: none; animation: none; -webkit-transition: none; } .single-video.style-three .video-icon a::before { content: ""; position: absolute; left: 50%; top: 50%; height: 99px; width: 99px; background: rgba(12, 90, 219,1); z-index: -1; border-radius: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } @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; } } .single-video.style-three .video-icon a i { background: #fff; height: 90px; width: 90px; line-height: 90px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; color: #0A7A60 ; font-size: 26px; position: relative; display: inline-block; } /*video style 5*/ .single-video.style6 .choose-video-icon { position: absolute; left: 0; right: 0; bottom: 0; } .single-video.style6 .video-icon a { top: 50%; left: 0; right: 0; margin: auto; text-align: center; color: #fff; font-size: 26px; position: relative; -webkit-animation: ripple-red 1s linear infinite; animation: ripple-red 1s linear infinite; -webkit-transition: .5s; width: 100px; height: 100px; background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); cursor: pointer; z-index:1; } .single-video.style6 .video-icon a:before { position:absolute; content: ""; width: 70px; height: 70px; border-radius: 35px; background-image: linear-gradient(0deg, #096dff 0%, #2b25ff 100%); z-index:-1; } /*single video style 7*/ .single-video.style7 .choose-video-icon a { display: inline-block; width: 89px; height: 89px; border-radius: 45px; background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); line-height: 89px; color: #fff; font-size: 19px; position:relative; z-index:1; } .single-video.style7 .choose-video-icon a:before { position: absolute; content: ""; width: 130px; height: 130px; border-radius: 65px; background-color: rgba(18,20,23,0); border: 1px solid rgba(255,255,255,0.3); line-height: 130px; z-index: -1; left: -20px; top: -20px; } /*left bounce animation*/ @keyframes moveLeftBounce { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes MOVIE-BG { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(60px); transform: translateX(60px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /**/ .dance3 { -webkit-animation: dance3 8s alternate infinite; animation: dance3 8s alternate infinite; } @keyframes dance3 { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1); } } .dance { -webkit-animation: dance 2s alternate infinite; animation: dance 2s alternate infinite; } @keyframes dance { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1.2); } } .dance2 { -webkit-animation: dance2 4s alternate infinite; animation: dance2 4s alternate infinite; } @keyframes dance2 { 0% { -webkit-transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(25px, -25px, 0); } 100% { -webkit-transform: translate3d(0, -25px, 25px); } } .watermark-animate { -webkit-animation: watermark-animate 8s infinite; animation: watermark-animate 8s infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes watermark-animate { 0% { left: 0; } 100% { left: 100%; } } /* start skilss*/ .skills { position: relative; margin-bottom: 25px; } .skills .skill-item { position: relative; margin-bottom: 37px; } .skills .skill-item:last-child { margin-bottom: 27px; } .skills .skill-item .skill-header { position: relative; margin-bottom: 0px; } .skills .skill-item .skill-header .skill-title { font-size: 18px; color: #686868; font-weight: 500; margin-bottom: 15px; } .skills .skill-item .skill-bar { border-radius: 5px; position: relative; background: #dcdcdc; width: 100%; height: 3px; border-radius: 5px; background-color: rgba(12,110,109,0.14901960784313725); } .skills .skill-item .skill-bar .bar-inner .bar { left: 0px; position: absolute; top: 0px; width: 0px; -webkit-transition: all 3000ms ease; transition: all 3000ms ease; height: 10px; border-radius: 5px; background-color: #0c6e6d; } .skills .skill-item .skill-bar .bar-inner .skill-percentage { bottom: 100%; color: #686868; font-size: 15px; font-weight: 700; line-height: 30px; position: absolute; right: 0; } .skills .skill-item .skill-bar .bar-inner .bar { left: 0px; position: absolute; top: 0; width: 0px; -webkit-transition: all 3000ms ease; transition: all 3000ms ease; height: 5px; border-radius: 5px; background-color: #0c59d7; } .skills .skill-item .bar.progress-line { position: relative; } /*style two*/ .single_skill.style2 .skills .skill-item:last-child { margin-bottom: 30px; } .single_skill.style2 .skills .skill-item .skill-bar:before { position: absolute; content: ""; height: 1px; width: 100%; background: #2875FF; top: 9px; } /* ============== Pricing Table ============== */ .pricing.style1 { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; position: relative; z-index: 1; overflow: hidden; text-align: center; box-shadow: 0px 0px 20px rgb(0 0 0 / 10%); padding: 0; position: relative; border-radius: 10px; text-align: center; } .pricing.style1 .pricing-head { position: relative; background: #0A7A60; padding-top: 33px; z-index: 1; padding-bottom: 45px; } .pricing.style1 .pricing-head:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background: url('http://wp.ditsolution.net/techno/wp-content/uploads/2025/02/pricing-bg3.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } .pricing.style1 .pricing-head span:before{ display: none; } .pricing.style1 h3.pricing-title { font-size: 28px; text-transform: capitalize; padding-bottom: 0; color: #fff; font-weight: 700; position: relative; } .pricing.style1 h3.pricing-title:after{ content: ''; top: 48px; right: 0; width: 4px; height: 4px; display: block; position: absolute; background: #fff; left: 40px; margin: auto; } .pricing.style1 h3.pricing-title:before { width: 25px; content: ''; top: 48px; right: 0; height: 4px; display: block; position: absolute; background: #fff; left: 0; margin: auto; } .pricing.style1 span.month { font-size: 20px !important; font-weight: 500 !important; color: #fff; } .pricing.style1 span.currency { font-size: 32px !important; font-weight: 700 !important; position: relative; top: -28px; color: #fff; } .pricing.style1 .price-item { margin-top: 29px; } .pricing.style1 a.pricing-button.singinp { display: inline-block; font-size: 18px; font-weight: 400; padding: 13px 37px; position: relative; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #0A7A60; border: 1px solid #0A7A60; border-radius: 4px; margin-top: 27px; } .pricing.style1 a.pricing-button.singinp i{ margin-left: 5px; } .pricing.style1:hover a.pricing-button.singinp { background: #0A7A60; color: #fff; } .pricing.style1 .pricing-body { padding: 48px 0 50px; } .pricing.style1 span.tk { display: inline-block; -webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 70px; font-weight: 700; text-align: center; color: #fff; } .pricing.style1 ul.features li { display: block; font-size: 16px; padding: 7px 0; text-transform: none; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-transform: capitalize; font-weight: 300; } .two .pricing.style1 .pricing-head:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background: url('http://wp.ditsolution.net/techno/wp-content/uploads/2025/02/pricing-bg1.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } .three .pricing.style1 .pricing-head:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background: url('http://wp.ditsolution.net/techno/wp-content/uploads/2025/02/pricing-bg2.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } /*pricinhg style two*/ .pricing.style-two { position: relative; z-index: 1; text-align: center; transition: 0.3s; padding: 31px 40px 50px; overflow: hidden; border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-image: initial; border-radius: 8px; background: rgb(255, 255, 255); } .pricing.style-two:hover, .pricing.style-two:hover ul.features, .pricing.style-two:hover a.pricing-button.singinp{ border-color: rgb(12, 90, 219); } .pricing.style-two h3.pricing-title { font-size: 30px; color: rgb(12, 90, 219); text-transform: capitalize; } .pricing.style-two .price-item { margin-bottom: 17px; margin-top: 15px; transition: 0.3s; } .pricing.style-two span.currency { display: inline-block; font-size: 29px; font-weight: 700; text-align: center; color: rgb(12, 90, 219); transition: 0.3s; } .pricing.style-two span.tk { display: inline-block; font-size: 55px; font-weight: 700; text-align: center; color: rgb(12, 90, 219); transition: 0.3s; } .pricing.style-two span.month { color: rgb(12, 90, 219); font-size: 19px; font-weight: 500; } .pricing.style-two ul.features { border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-image: initial; transition: 0.3s; border-radius: 7px; padding: 31px 0px 44px; } .pricing.style-two ul.features li { display: block; font-size: 17px; text-transform: capitalize; padding: 8px 0px; transition: 0.3s; } .pricing.style-two ul.features li:last-child { padding-bottom: 0px; } .pricing.style-two a.pricing-button.singinp { display: inline-block; font-size: 18px; font-weight: 600; position: relative; text-transform: capitalize; color: rgb(97, 97, 97); padding: 12px 35px; transition: 0.3s; border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); border-image: initial; border-radius: 3px; margin-top: 36px; } .pricing.style-two a.pricing-button.singinp i{ margin-left: 6px; } .pricing.style-two:hover a.pricing-button.singinp { background: #0A7A60; color: #fff; } /*pricing style three*/ .pricing.style3 { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; padding: 40px 50px 57px 50px; position: relative; z-index: 1; overflow: hidden; text-align: left; border-radius: 20px; background-color: #ffffff; border: 1px solid rgba(30, 30, 30, 0.1); } .pricing.style3:hover { border: 1px solid #2475fc; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); } .pricing.style3 h3.pricing-name { padding-bottom: 0; font-size: 24px; color: #232323; font-weight: 700; } .pricing.style3 span.currency { color: #232323; font-size: 29px; font-weight: 700; position: relative; top: -21px; } .pricing.style3 span.tk { display: inline-block; -webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 55px; font-weight: 700; color: #232323; } .pricing.style3 span.month { font-size: 19px; color: #232323; transition: .5s; } .pricing.style3 .pricing-body { border-top: 1px solid #e6e6e6; border-radius: 0; transition: 0.3s; padding: 35px 0 0; margin-top: 21px; } .pricing.style3 ul.features li { display: block; font-size: 17px; padding: 8px 0; text-transform: none; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-transform: capitalize; } .pricing.style3 ul.features li { position: relative; padding: 8px 0 8px 30px; } .pricing.style3 ul.features li:before { content: ""; position: absolute; height: 10px; width: 10px; top: 16px; left: 0; border-radius: 100%; background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); } .pricing.style3 a.pricing-button.singinp { display: inline-block; font-size: 16px; font-weight: 600; padding: 15px 48px; position: relative; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #616161; border-radius: 28px; background-color: #ffffff; border: 1px solid rgba(30, 30, 30, 0.1); margin-top: 41px; } .pricing.style3 a.pricing-button.singinp i{ display: inline-block; font-size: 16px; margin-left: 6px; } .pricing.style3:hover a.pricing-button.singinp { background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%); color: #fff; } .pricing.style3:hover h3.pricing-name, .pricing.style3:hover span.currency, .pricing.style3:hover span.tk, .pricing.style3:hover span.month, .pricing.style3:hover ul.features li{ color: #fff; } .pricing.style3:hover a.pricing-button.singinp{ background: #fff; color: #2475fc; } .pricing.style3:hover .pricing-body{ border-color: #fff; } /*style darh pricing*/ .software-dark-pric .pricing.style3 { background-color: #101010; border: 1px solid rgba(255,255,255,0.1); } /*pricing style four*/ .pricing.style4{ -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; padding: 60px 40px 37px; position: relative; z-index: 1; overflow: hidden; text-align: left; border: none; border-radius: 8px; background: #021662; transition: .5s; } .pricing.style4:hover { background: #0A7A60 ; transition: .5s; } .pricing.style4::before { position: absolute; content: ""; left: 0; right: 0; top: -10px; margin: auto; text-align: center; background-color: #000a4d; height: 40px; width: 40%; border-radius: 0px 0px 100px 100px; } .pricing.style4 .top_content { display: flex; align-items: center; gap: 22px; position: relative; border-bottom: 1px solid #256bdf; transition: .5s; padding: 0 0 26px; } .pricing.style4 .price-item { position: absolute; right: -1px; top: 23px; } .pricing.style4 .price-item span { display: inline-block; -webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 34px; font-weight: 600; color: #fff; } .pricing.style4 h3.pricing-name { font-size: 26px; color: #fff; text-transform: capitalize; padding-bottom: 0px; font-weight: 600; margin: 0 0 6px; } .pricing.style4 p.pricing-p { color: #fff; margin: 0 0 0; } .pricing.style4 ul.features li { display: block; font-size: 16px; color: #fff; padding: 8px 0; text-transform: none; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-transform: capitalize; } .pricing.style4 .pricing-body { margin-top: 30px; } .pricing.style4 ul.features li img{ margin-right:5px; position: relative; top: 3px; } .pricing.style4 a.pricing-button.singinp { display: inline-block; font-size: 18px; font-weight: 600; padding: 12px 35px; position: relative; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #fff; border: 1px solid #0A7A60 ; border-radius: 3px; width: 100%; transition: .5s; text-align: center; margin-top: 39px; } .pricing.style4 a.pricing-button.singinp i{ margin-left: 6px; } .pricing.style4:hover a.pricing-button.singinp { color: #0A7A60 ; border: 1px solid #fff; background-color: #fff; transition: .5s; } /*pricing style five*/ .pricing.style5 { padding: 62px 40px 39px 40px; } .pricing.style5 .top_content { display: flex; align-items: center; margin-bottom: 3px; border-bottom: 1px solid #1c2e72; padding-bottom: 39px; transition: .5s; gap: 20px; } .pricing.style5:hover .top_content { border-bottom: 1px solid #256bdf; transition: .5s; } .pricing.style5 .img-icon { text-align: center; width: 100px; height: 100px; border-radius: 50px; background-color: #0A7A60 ; line-height: 136px; position: relative; } .center-price .pricing.style5 .img-icon { text-align: center; width: 100px; height: 100px; border-radius: 50px; background-color: #fff; line-height: 136px; position: relative; } .pricing.style5 h3.pricing-name { font-size: 26px; color: #fff; text-transform: capitalize; padding-bottom: 0px; font-weight: 600; margin: 0 0 0; } .pricing.style5 span.tk { display: inline-block; -webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 34px; font-weight: 600; color: #fff; } .pricing.style5 span.currency { font-size: 34px; font-weight: 500; position: relative; top: 0px; color: #fff; } .pricing.style5 span.month { color: #fff; font-weight: 500; } .pricing.style5 ul.features { padding-top: 21px; } .pricing.style5 ul.features li { display: block; font-size: 16px; color: #fff; padding: 8px 0; text-transform: none; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; text-transform: capitalize; } .pricing.style5 a.pricing-button.singinp { display: inline-block; font-size: 18px; font-weight: 600; padding: 12px 35px; position: relative; text-transform: capitalize; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: #fff; border: 1px solid #0A7A60 ; border-radius: 3px; width: 100%; transition: .5s; text-align: center; margin-top: 35px; } .pricing.style5 a.pricing-button.singinp i{ margin-left: 6px; } .pricing.style5:hover a.pricing-button.singinp { color: #0A7A60 ; border: 1px solid #fff; background-color: #fff; transition: .5s; } /*pricing*/ .pricing.style6 { border-radius: 16px; background-color: rgba(255,255,255,0.07058823529411765); border: 1px solid rgba(255,255,255,0.15); display: flex; padding: 40px 91px 43px 35px; position: relative; z-index: 1; transition: .5s; justify-content: space-between; overflow: hidden; } .pricing.style6 h3.pricing-name { display: inline-block; background: #323335; color: #fff; padding: 8px 28px; font-size: 14px; text-transform: uppercase; border-radius: 30px; margin: 0 0 11px; } .pricing.style6 h3.pricing-title { font-size: 20px; color: #ffffff; font-weight: 500; font-family: "Mulish"; margin: 0 0 18px; } .pricing.style6 ul.features li { opacity: 0.502; font-size: 16px; color: #ffffff; font-weight: 400; margin-bottom: 9px; } .pricing.style6 ul.features li i { opacity: 1!important; } .pricing.style6 span.tk { font-size: 40px; line-height: 55px; color: #ffffff; font-weight: 600; font-family: "Mulish"; } .pricing.style6 span.currency { font-size: 40px; line-height: 55px; color: #ffffff; font-weight: 600; } .pricing.style6 p.pricing-p { background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); text-align: center; color: #fff; font-size: 15px; color: #ffffff; font-weight: 400; font-family: "Mulish"; padding: 4px 52px; position: absolute; text-transform: uppercase; right: -42px; top: 31px; transform: rotate(45deg); } .pricing.style6 a.pricing-button.singinp { border-radius: 21px; background-color: rgba(255,255,255,0.050980392156862744); border: 1px solid rgba(255,255,255,0.15); display: inline-block; padding: 8px 22px; transition: .5s; margin-top: 59px; } .pricing.style6 a.pricing-button.singinp:hover{ background-image: linear-gradient(0deg, #2b25ff 0%, #096dff 100%); color:#fff; border-color:#096dff; } .pricing.style6 a.pricing-button.singinp i{ margin-left:5px; } /*pricing*/ .pricing.style7 { padding: 56px 30px 59px; position: relative; } .pricing.style7:before { position: absolute; content: ""; top: 112px; left: 0; height: 1px; width: 85%; margin: auto; background-color: rgba(97,97,97,0.2); right: 0; } .pricing.style7:after { position: absolute; content: ""; bottom: 39px; left: 0; height: 1px; width: 85%; margin: auto; background-color: rgba(97,97,97,0.2); right: 0; } .pricing.style7 span.tk { font-size: 40px; line-height: 28px; text-transform: uppercase; color: #232323; font-weight: 700; } .pricing.style7 span.month { font-size: 18px; line-height: 28px; text-transform: uppercase; color: #232323; font-weight: 700; } .pricing.style7 h3.pricing-title { font-size: 27px; color: #232323; font-weight: 700; margin: 45px 0 22px; } .pricing.style7 ul.features { margin-top: 40px; } .pricing.style7 ul.features li { font-size: 17px; color: #686868; font-weight: 400; margin: 0 0 22px; } .pricing.style7 ul.features li i { color: #3513f9; margin-right: 13px; } .pricing.style7 a.pricing-button.singinp { font-size: 14px; line-height: 28px; text-transform: uppercase; color: #232323; font-weight: 600; font-family: "Mulish"; margin-top: 24px; display: inline-block; } .pricing.style7 a.pricing-button.singinp i { width: 40px; height: 40px; border-radius: 20px; background-color: rgba(255,255,255,0); border: 1px solid rgba(97,97,97,0.35); display: inline-block; text-align: center; line-height: 40px; margin-right: 14px; } .pricing.style7 ul.features li i { color: #0A7A60 ; font-size: 13px; } /*pricing plan style 8*/ .pricing.style8 { border: 1px solid #38393D; border-radius: 10px; background: #1D1E22; padding: 38px 40px 26px; transition: .5s; } .pricing.style8:hover{ border-color:#2B55FF; } .pricing.style8 h3.pricing-name { color: #fff; font-size: 24px; font-weight: 500; margin: 0 0 4px; } .pricing.style8 span.currency { font-size: 55px; font-weight: 500; color: #2B55FF; } .pricing.style8 span.tk { font-size: 55px; font-weight: 500; color: #2B55FF; } .pricing.style8 span.month { color: #fff; opacity: 0.6; font-size: 18px; font-weight: 400; } .pricing.style8 a.pricing-button.singinp { background: #232428; display: block; border-radius: 30px; text-align: center; padding: 16px 36px; transition: .5s; } .pricing.style8:hover a.pricing-button.singinp{ background:#2B55FF; color:#fff; } .pricing.style8 a.pricing-button.singinp i { margin-left: 10px; } .pricing.style8 h3.pricing-title { color: #fff; margin: 30px 0 17px; font-size: 20px; font-weight: 500; border-top: 1px solid#2F3034; padding-top: 31px; transition:.5s; } .pricing.style8:hover h3.pricing-title { border-color:#2B55FF; } .pricing.style8 h4.sub-title { background: #35363A; display: inline-block; font-size: 16px; margin: 0 0 0; padding: 8px 18px; border-radius: 30px; font-weight: 400; color: #fff; position: absolute; right: 40px; top: 38px; transition: .5s; opacity: 0; } .pricing.style8:hover h4.sub-title{ opacity:1; } .active-pricing .pricing.style8 h4.sub-title { opacity:1; background:#0A7A60 ; color:#fff; } .active-pricing .pricing.style8 a.pricing-button.singinp{ background:#0A7A60 ; border-color:#0A7A60 ; color:#fff; } /* ========== Blog Post ========== */ .blog-post.style1 .post-item.style1{ margin-bottom: 20px; border-radius: 8px; background-color: #ffffff; border: 1px solid rgba(29, 33, 36, 0.12); position: relative; z-index: 1; transition: .5s; overflow: hidden; padding: 0; } .post-item.style1 { margin-bottom: 30px; overflow: hidden; text-align: left; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background: #fff; border: 1px solid #ebebeb; } .blog-post.style1 .post-thumb { position: relative; z-index: 1; overflow: hidden; padding: 0; } .blog-post.style1 .post-thumb img { overflow: hidden; transition: .5s; width: 100%; border-radius: 8px; transform: scale(1.1); } .blog-post.style1 .categories { position: absolute; top: 32px; left: 32px; } .blog-post.style1 .categories a { padding: 4px 17px 2px; font-size: 14px; color: #ffffff; font-weight: 500; background: #0A7A60 ; border-radius: 4px; display: inline-block; position: relative; z-index: 1; } .blog-post.style1 .user_author { display: inline-block; } .blog-post.style1 .user_author a { margin-right: 13px; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; display: inline-block; text-decoration: none; text-transform: capitalize; margin-right: 24px; color: #616161; position: relative; font-weight: 500; } .blog-post.style1 .user_author a::before { content: ""; background: #616161; width: 1px; height: 11px; position: absolute; right: -15px; top: 8px; } .blog-post.style1 .date { display: inline-block; text-transform: capitalize; font-family: "Mulish", serif; margin-right: 24px; color: #616161; position: relative; font-weight: 500; } .post-item.style1 .single_blog_post_content { overflow: hidden; padding: 25px 30px 25px; } .blog-post.style1 .post-item .content .meta { display: flex; align-items: center; margin-bottom: 12px; color: #0A7A60 ; } .blog-post.style1 .meta i { color: #0A7A60 ; display: inline-block; /* font-size: 13px; */ margin-right: 3px; } .blog-post.style1 ul.post-categories { list-style: none; } .blog-post.style1 .single_blog_post_content h3 a { display: inline-block; font-size: 27px; color: #232323; } .blog-post.style1 .meta { display: inline-block; margin-bottom: 3px; font-weight: 500; text-transform: uppercase; } .blog-post.style1 .date { display: inline-block; } .blog-post.style1 .user_thumb { display: inline-block; height: 30px; width: 30px; margin-right: 9px; float: left; } .blog-post.style1 .user_thumb img{ border-radius: 100%; } .blog-post.style1 .blog_post_user { border-top: 1px solid rgba(29, 33, 36, 0.12); padding: 17px 27px 0; } .blog-post.style1 .author { display: inline-block; } .blog-post.style1 .author a { display: inline-block; color: #232323; font-size: 16px; margin: 0; font-weight: 500; } .blog-post.style1 .blog_btn a { transition: .5s; font-weight: 700; color: #232323; font-size: 16px; letter-spacing: 1px; } .blog-post.style1 p.description { transition: .5s; margin: 13px 0 15px; } .blog-post.style1 .blog_btn a i { font-size: 13px; display: inline-block; font-weight: 600; margin-left: 1px; } /*hover*/ .post-item:hover{ filter: drop-shadow(0 0 35px rgba(196, 196, 196, 0.5)); background-color: #ffffff; border: 1px solid rgba(29, 33, 36, 0.12); } .post-item:hover .post-thumb img { transform: scale(1.4); } .blog-post.style1 h3.title a:hover{ color: #0A7A60 ; } .blog-post.style1 .blog_btn a:hover { color: #0A7A60 ; } .blog-post.style1 .author a:hover{ color: #0A7A60 ; } .blog-post.style1 .post-item .content .meta .date { position: relative; color: #616161; font-size: 16px; text-transform: capitalize; } .blog-post.style1 .post-item .content .meta .date i{ color: #3abba7; margin-right: 5px; } .blog-post.style1 .post-item .content .meta .author i{ color: #3abba7; margin-right: 5px; } .blog-post.style1 .post-item .content .meta .author a{ color: #616161; font-size: 15px; font-family: 'Roboto', sans-serif; text-transform: uppercase; } .blog-post.style1 .post-item .content .title { font-size: 24px; font-weight: 600; margin-bottom: 12px; margin: 0; } .blog-post.style1 .post-item .content .title a { color: var(--title-color); font-size: 22px; font-family: var(--title-font); font-weight: 600; transition: 0.3s; } .blog-post.style1 .post-item .content .description { color: rgba(30, 38, 109, 0.9); font-weight: 300; margin-bottom: 20px; } .blog-post.style1 .post-item .content .read-more{ display: inline-block; color: #1e266d; } /*blog-dark*/ .blog-dark .blog-post.style1 .post-item.style1 { background-color: #151515; border: none; } .blog-dark .blog-post.style1 h3.title a { display: inline-block; font-size: 27px; color: #fff; } /*crypto*/ .crypto .blog-post.style1 .post-item.style1 { background-color: #030D48; border: none; } .blog-post.style1 .single_blog_post_content h3 a:hover { color: #0A7A60 ; } /*blog style two*/ .post-item.style2 { background: #fff; border-radius:10px; } .post-item.style2:hover { border: none; } .post-item.style2 .single_blog_post_content { padding: 31px 37px 33px; } .post-item.style2 .Comment { display: inline-block; } .blog-post.style2 .post-thumb img { width: 100%; border-radius: 10px 10px 0 0; transform: scale(1.1); } .post-item.style2 { margin-bottom: 30px; overflow: hidden; text-align: left; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background: #fff; border: none; } .blog-post.style2 .post-thumb { position: relative; z-index: 1; overflow: hidden; padding: 0; } .blog-post.style2 .post-thumb img { overflow: hidden; transition: .5s; width: 100%; border-radius: 8px; transform: scale(1.1); } .blog-post.style2 .categories { position: absolute; top: 32px; left: 32px; } .blog-post.style2 .categories a { padding: 4px 17px 2px; font-size: 14px; color: #ffffff; font-weight: 500; background: #0A7A60 ; border-radius: 4px; display: inline-block; position: relative; z-index: 1; } .blog-post.style2 .user_author { display: inline-block; } .blog-post.style2 .user_author a { margin-right: 13px; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; display: inline-block; text-decoration: none; text-transform: capitalize; margin-right: 24px; color: #616161; position: relative; font-weight: 500; } .blog-post.style2 .user_author a::before { content: ""; background: #616161; width: 1px; height: 11px; position: absolute; right: -15px; top: 8px; } .blog-post.style2 .date { display: inline-block; text-transform: capitalize; font-family: "Mulish", serif; margin-right: 24px; color: #616161; position: relative; font-weight: 500; } .post-item.style2 .single_blog_post_content { overflow: hidden; padding: 25px 30px 25px; } .blog-post.style2 .post-item .content .meta { display: flex; align-items: center; margin-bottom: 12px; color: #0A7A60 ; } .blog-post.style2 .meta i { color: #0A7A60 ; display: inline-block; /* font-size: 13px; */ margin-right: 3px; } .blog-post.style2 ul.post-categories { list-style: none; } .blog-post.style2 .single_blog_post_content h3 a { display: inline-block; font-size: 27px; color: #232323; } .blog-post.style2 .meta { display: inline-block; margin-bottom: 3px; font-weight: 500; text-transform: uppercase; } .blog-post.style2 .date { display: inline-block; } .blog-post.style2 .user_thumb { display: inline-block; height: 30px; width: 30px; margin-right: 9px; float: left; } .blog-post.style2 .user_thumb img{ border-radius: 100%; } .blog-post.style2 .blog_post_user { border-top: 1px solid rgba(29, 33, 36, 0.12); padding: 17px 27px 0; } .blog-post.style2 .author { display: inline-block; } .blog-post.style2 .author a { display: inline-block; color: #232323; font-size: 16px; margin: 0; font-weight: 500; } .blog-post.style2 .blog_btn a { transition: .5s; font-weight: 700; color: #232323; font-size: 16px; letter-spacing: 1px; } .blog-post.style2 p.description { transition: .5s; margin: 13px 0 15px; } .blog-post.style2 .blog_btn a i { font-size: 13px; display: inline-block; font-weight: 600; margin-left: 1px; } /*blog style three*/ .post-item.style3 { background: #fff; border-radius:10px; } .post-item.style3:hover { border: none; filter: none; } .post-item.style3 .single_blog_post_content { padding: 28px 37px 33px; } .post-item.style3 .Comment { display: inline-block; } .blog-post.style3 .post-thumb img { width: 100%; border-radius: 10px 10px 0 0; transform: scale(1.1); } .post-item.style3 { margin-bottom: 30px; overflow: hidden; text-align: left; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background: transparent; border: none; } .blog-post.style3 .post-thumb { position: relative; z-index: 1; overflow: hidden; padding: 0; } .blog-post.style3 .post-thumb img { overflow: hidden; transition: .5s; width: 100%; border-radius: 8px; transform: none; } .blog-post.style3 .categories { position: absolute; top: 32px; left: 32px; } .blog-post.style3 .categories a { padding: 4px 17px 2px; font-size: 14px; color: #ffffff; font-weight: 500; background: #0A7A60 ; border-radius: 4px; display: inline-block; position: relative; z-index: 1; } .blog-post.style3 .user_author { display: inline-block; } .blog-post.style3 .user_author a { margin-right: 13px; -o-transition: .3s; -webkit-transition: .3s; transition: .3s; display: inline-block; text-decoration: none; text-transform: capitalize; margin-right: 24px; color: #616161; position: relative; font-weight: 500; } .blog-post.style3 .date { display: inline-block; text-transform: capitalize; font-family: "Mulish", serif; margin-right: 24px; color: #616161; position: relative; font-weight: 500; background: #212226; display: inline-block; font-size: 16px; margin: 0 0 0; padding: 4px 18px; border-radius: 30px; font-weight: 400; color: #fff; border: 1px solid#37383C; } .post-item.style3 .single_blog_post_content { overflow: hidden; padding: 31px 40px 25px 0; } .blog-post.style3 .post-item .content .meta { display: flex; align-items: center; margin-bottom: 12px; color: #0A7A60 ; } .blog-post.style3 .meta i { color: #0A7A60 ; display: inline-block; /* font-size: 13px; */ margin-right: 3px; } .blog-post.style3 ul.post-categories { list-style: none; } .blog-post.style3 .single_blog_post_content h3 a { display: inline-block; font-size: 27px; color: #fff; } .blog-post.style3 .single_blog_post_content h3 a:hover{ color:#2B55FF; } .blog-post.style3 .meta { display: inline-block; margin-bottom: 3px; font-weight: 500; text-transform: uppercase; } .blog-post.style3 .date { display: inline-block; } .blog-post.style3 .user_thumb { display: inline-block; height: 30px; width: 30px; margin-right: 9px; float: left; } .blog-post.style3 .user_thumb img{ border-radius: 100%; } .blog-post.style3 .blog_post_user { border-top: 1px solid rgba(29, 33, 36, 0.12); padding: 17px 27px 0; } .blog-post.style3 .author { display: inline-block; } .blog-post.style3 .author a { display: inline-block; color: #232323; font-size: 16px; margin: 0; font-weight: 500; } .blog-post.style3 .blog_btn a { transition: .5s; font-weight: 700; color: #232323; font-size: 16px; letter-spacing: 1px; } .blog-post.style3 p.description { transition: .5s; margin: 13px 0 15px; } .blog-post.style3 .blog_btn a i { font-size: 13px; display: inline-block; font-weight: 600; margin-left: 1px; } /* ================ Image Carousel ================ */ .owl_wrapper{ width: 100vw; overflow: hidden; } .owl_content{padding-left: 12%;} .owl_wrapper .owl-item{ opacity: 0; transform: scale(0.6); -ms-transform: scale(0.6); transition: all .2s; -webkit-transform: all .2s; z-index: 1; } .owl_wrapper .active{opacity: 0.5;} .owl_wrapper .active.middle_beside{ transform: scale(0.8); -ms-transform: scale(0.8); opacity: 0.8; margin: 0 -1%; z-index: 2; } .owl_wrapper .active.middle{ transform: scale(1); -ms-transform: scale(1); opacity: 1; z-index: 3; } .owl_wrapper .active.next_to_mid{margin-left: -1%;} .owl_wrapper .active.prev_to_mid{margin-right: -1%;} /*===== Navigation =====*/ .owl_wrapper .prev, .owl_wrapper .next{ position: absolute; top: 100px; left: 100px; width: 30px; border-radius: 100%; text-align: center; line-height: 30px; color: #fff; background: #777; cursor: pointer; z-index: 5; } .owl_wrapper .next{left: calc(100% - 100px);} .no_select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .infos { width: 500px; text-align: center; font-family: 'Roboto', Arial; font-size: 14px; line-height: 16px; margin-top: 50px; color: #000; } .infos a { color: #555; text-decoration: none; } .infos a:hover {color: #999;} #carousel { position: relative; height: 400px; overflow: hidden; } #carousel div { position: absolute; transition: transform 1s, left 1s, opacity 1s, z-index 0s; opacity: 1; } #carousel div img { width: 400px; transition: width 1s; } #carousel div.hideLeft { left: 0%; opacity: 0; transform: translateY(50%) translateX(-50%); } #carousel div.hideLeft img { width: 200px; } #carousel div.hideRight { left: 100%; opacity: 0; transform: translateY(50%) translateX(-50%); } #carousel div.hideRight img { width: 200px; } #carousel div.prev { z-index: 5; left: 30%; transform: translateY(50px) translateX(-50%); } #carousel div.prev img { width: 300px; } #carousel div.prevLeftSecond { z-index: 4; left: 15%; transform: translateY(50%) translateX(-50%); opacity: 0.7; } #carousel div.prevLeftSecond img { width: 200px; } #carousel div.selected { z-index: 10; left: 50%; transform: translateY(0px) translateX(-50%); } #carousel div.next { z-index: 5; left: 70%; transform: translateY(50px) translateX(-50%); } #carousel div.next img { width: 300px; } #carousel div.nextRightSecond { z-index: 4; left: 85%; transform: translateY(50%) translateX(-50%); opacity: 0.7; } #carousel div.nextRightSecond img { width: 200px; } /*contact*/ .contact{ position: relative; z-index: 1; } .contact:before { position: absolute; content: ""; top: 0; left: 0; height: 147px; width: 100%; background: #0A7A60 ; z-index: -1; border-radius: 3px 3px 0 0; } .contact:after { position: absolute; content: ""; top: 137px; left: 0; height: 100%; width: 100%; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2023/05/square-line.png); z-index: -1; background-repeat: no-repeat; background-size: contain; } textarea.wpcf7-form-control.wpcf7-textarea { width: 100%; background: #f7f4f4; padding-left: 25px; padding-top: 20px; height: 135px; border: 1px solid rgba(35, 35, 35, 0.12); border-radius: 30px; color: #232323; transition: .5s; } .form-area.main-contact .buttons { display: flex; justify-content: center; margin-top: 21px; } .form-area.main-contact .buttons input { cursor: pointer; text-align: center; transition: .5s; border: none; background: #fff; border: 0; display: inline-block; padding: 14px 39px; border-radius: 7px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #232323; } .form-area.main-contact .buttons input:hover { background: #00247E; color: #fff; } .buttons input:hover{ background:#0A7A60 ; } .form-group input::placeholder { color: #6d6d6d!important; } .form-group:last-child { margin-bottom: 0px; } .buttons p { margin: 0; } .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; opacity: 0.75; width: 12px; height: 12px; border: none; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } .contact input.form-control { border: 0; border-radius: 6px; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; border: 1px solid #ddd; width: 100%; height: 50px; padding-left: 25px; background: #f7f4f4; border-radius: 30px; color: #fff; border: 1px solid rgba(35, 35, 35, 0.12); transition: .5s; } .contact .form-control:focus { outline: none; box-shadow: 0 0 6px rgb(204, 48, 0, 0.6); border-color: #0A7A60 ; } /*contact two*/ .contact-two .form-area.main-contact textarea.form-control { height: 174px; color:#fff; } .contact-two .form-area.main-contact .buttons { display: inline-block; justify-content: center; margin-top: 19px; } .contact-two .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; color: #fff!important; } /*start-contact*/ .start-contact textarea.wpcf7-form-control.wpcf7-textarea { background: #fff; height: 135px; border: 1px solid rgba(35, 35, 35, 0.12); border-radius: 5px; transition: .5s; } .start-contact .buttons { display: flex; justify-content: center; } .start-contact textarea.wpcf7-form-control.wpcf7-textarea.form-control::placeholder { color: #D0D0D0!important; } .start-contact input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #D0D0D0!important; } .start-contact .form-control:focus { border-color: #0A7A60 !important; } /*placeholder*/ input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #fff!important; } textarea.wpcf7-form-control.wpcf7-textarea::placeholder { color: #fff!important; } /*focus color*/ textarea:focus { outline: none; box-shadow: 0 0 6px rgb(204, 48, 0, 0.6); border-color: #0A7A60 !important; } /*contact two*/ .form-area.style-two .form-control { border:none; width: 100%; height: 56px; background: #fff; border-radius: 4px; } .form-area.style-two input.form-control { border:none; width: 100%; height: 56px; background: #fff; border-radius: 4px; } .form-area.style-two .buttons input { padding: 14px 33px; background: #0A7A60 ; border: none; font-weight: 500; width: inherit; border-radius: 4px; } /*Contact three*/ .form-area.style-three .form-control { border: 0; width: 100%; height: 57px; padding-left: 25px; background: #fff; border-radius: 5px; color: #232323; border: none; } .form-area.style-three input[type="email"] { height: 57px; padding: 5px 25px; width: 100%; border-radius: 5px; outline: 0; } .form-area.style-three select.wpcf7-form-control.wpcf7-select { width: 100%; height: 57px; border: none; padding: 0 25px; } .form-area.style-three textarea.wpcf7-form-control.wpcf7-textarea { background: #fff; height: 138px; border: none; border-radius: 5px; } .form-area.style-three .buttons input { padding: 13px 40px; background: #0A7A60 ; border-radius: 30px; width: inherit; font-family: 'Fira Sans'; } .form-area.style-three input.wpcf7-form-control.wpcf7-text.form-control::placeholder { color: #6d6d6d!important; } /*new-contact-two*/ .new-contact-two { background: url(http://wp.ditsolution.net/techno/wp-content/uploads/2025/04/contact2-1.png); background-repeat: no-repeat; background-position: center center; background-size: auto; } .new-contact-two .quote_form.new-form select, .form-control { height: 52px; } .new-contact-two .form-area.apppontment-form { background: transparent; padding: 58px 75px 14px; box-shadow: none; border-radius: 5px; } .new-contact-two textarea.form-control { height: 162px!important; border-radius: 5px; } .new-contact-two .form-group .buttons { margin-top: 14px; } .new-contact-two .form-area.apppontment-form .button { padding: 14px 39px; border-radius: 4px; width: 100%; border: none; outline: 0; background: #232323; color: #fff; border:1px solid#232323; } .new-contact-two .form-area.apppontment-form .button:hover{ background: transparent; border-color: #fff; } .new-contact-two .apointment-form-title { text-align: left; margin-bottom: 30px; } .new-contact-two .apointment-form-title h2 { font-size: 32px; color: #fff; margin: 0 0 3px; display: inline-block; } .new-contact-two .wpcf7-spinner { width: 0; height: 0; } .new-contact-two select.wpcf7-form-control.wpcf7-select { width: 100%; height: 52px; border-radius: 5px; padding: 0 21px; } .new-contact-two input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #495057!important; } .new-contact-two textarea.wpcf7-form-control.wpcf7-textarea.form-control::placeholder { color: #495057!important; } /*odddo contact*/ .form-area.apppontment-form.oddo { background: #fff; padding: 51px 50px 33px; border-radius: 7px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); text-align: center; } .form-area.apppontment-form.oddo .apointment-form-title h2 { font-size: 25px; margin: 0 0 10px; } .form-area.apppontment-form.oddo .apointment-form-title p { margin: 0 0 45px; } .form-area.apppontment-form.oddo input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #495057!important; } .form-area.apppontment-form.oddo textarea.wpcf7-form-control.wpcf7-textarea.form-control::placeholder { color: #495057!important; } .form-area.apppontment-form.oddo select.wpcf7-form-control.wpcf7-select { width: 100%; height: 52px; padding: 0 25px; border-radius: 5px; } .form-area.apppontment-form.oddo .button { background: #0A7A60; border: 0; display: inline-block; text-align: center; padding: 14px 39px; border-radius: 7px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #fff; width: 100%; margin-top: 17px; } .form-area.apppontment-form.oddo .button:hover { background: #00247E; color: #fff; } /*new form*/ .quote_form.new-form .form-control { background-color: #fff; border-color: transparent; } .form-area.quote_form.style-six { background: transparent; padding: 0; border-radius: 0; } .form-area.quote_form.style-six .form-control { height: 52px; padding-left: 25px; background: #fff; border-radius: 5px; color: #fff; } .form-area.quote_form.style-six input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color:#232323!important; } .form-area.quote_form.style-six .form-group .buttons { margin-top: 0; } .form-area.quote_form.style-six select, .form-control { height: 55px; } .form-area.quote_form.style-six .button { background: #34BBFF; color: #fff; border-radius: 4px; font-weight: 600; text-transform: uppercase; } .quote_form.new-form input:focus, button:focus { outline: 0; } .form-area.quote_form.style-six input.wpcf7-form-control.wpcf7-submit.has-spinner.button { background: #34BBFF; color: #fff; border-radius: 4px; font-weight: 600; text-transform: uppercase; border: none; padding: 14px 32px; } /*blog style 12*/ .footer-post .recent-post-item { clear: both; overflow: hidden; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.14901960784313725); padding-bottom: 22px; } .footer-post .recent-post-text h4{ line-height: 24px; } .footer-post .recent-post-text h4 a { color: #fff; font-size: 17px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-weight: 400; } .footer-post .recent-post-text .rcomment { text-transform: capitalize; color: #9EB3EF; font-size: 15px; } .footer-post .recent-post-image img { border-radius: 4px; height: 80px; width: 80px; object-fit: cover; } .footer-post .icon-box.style1 .icon-box-content h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; color: #fff; } /* ============= Recent Post ============= */ .recent-post.style1 .post-item{ display: flex; align-items: center; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid #616161; overflow: hidden; } .recent-post.style1 .post-item:last-child{ border: 0; margin: 0; padding: 0; } .recent-post.style1 .post-item .post-thumb{ flex-shrink: 0; } .recent-post.style1 .post-item .post-thumb img{ height: 90px; width: 90px; object-fit: cover; border-radius: 10px; } .recent-post.style1 .post-item .content{ padding: 0 0 0 10px; } .recent-post.style1 .post-item .content .meta{ display: flex; align-items: center; } .recent-post.style1 .post-item .content .meta .date{ position: relative; color: #616161; font-size: 14px; font-family: 'Roboto', sans-serif; } .recent-post.style1 .post-item .content .meta .date i{ color: #3abba7; margin-right: 5px; } .recent-post.style1 .post-item .content .title{ font-size: 16px; font-weight: normal; font-family: 'Roboto', sans-serif; margin-bottom: 6px; } .recent-post.style1 .post-item .content .title a{ color: var(--title-color); } .recent-post.style1 .post-item .content .title a:hover{ color: var(--main-color); } .recent-post.style1 .post-item .content .description { color: rgba(30, 38, 109, 0.9); font-weight: 300; margin-bottom: 20px; } /* ========== Portfolio ========== */ .portfolio-filter .filters { width: 100%; text-align: center; margin-bottom: 39px; } .portfolio-filter ul { margin: 0; list-style: none; padding: 0px 0 0; } .portfolio-filter ul li { background: #f2f4ff; border: medium none; font-size: 16px; line-height: 1; -o-transition: all 0.3s ease 0s; cursor: pointer; text-transform: capitalize; padding: 12px 27px; font-weight: 500; letter-spacing: 2px; position: relative; margin: 0 3px; margin-bottom: 7px; display: inline-block; border-radius: 5px; } .portfolio-filter li.current_menu_item { background: #0A7A60 ; color: #fff; } .portfolio-filter .content { width: 100%; margin: 0 auto; padding: 0px; text-align: center; } .port-thumb { position: relative; overflow: hidden; line-height: 0; border-radius: 5px; } .port-thumb::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.75); content: ""; opacity: 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; border-radius: 5px; } .port-thumb:after { content: ""; background: rgba(12,90,219,.85); height: 100%; width: 100%; position: absolute; top: 0; transform-origin: top; -moz-transition: all .5s ease-out 0s; -webkit-transition: all .5s ease-out 0s; -ms-transition: all .5s ease-out 0s; -o-transition: all .5s ease-out 0s; transition: all .5s ease-out 0s; -moz-transform: perspective(15em) rotateX(-90deg); -o-transform: perspective(15em) rotateX(-90deg); -ms-transform: perspective(15em) rotateX(-90deg); -webkit-transform: perspective(15em) rotateX(-90deg); transform: perspective(15em) rotateX(-90deg); z-index: 1; left: 0; } .single-content:hover .port-thumb:before { opacity: 1; } .single-content:hover .port-thumb:after { -moz-transform: perspective(0) rotateX(0); -o-transform: perspective(0) rotateX(0); -ms-transform: perspective(0) rotateX(0); -webkit-transform: perspective(0) rotateX(0); transform: perspective(0) rotateX(0); } .portfolio-filter .content .single-content img { width: 100%; height: 100%; } .portfolio-filter .content .grid-item { margin-bottom:30px; } .portfolio-filter .content .grid-item .single-content{ position: relative; overflow: hidden; z-index: 1; } .portfolio-filter .single-content .prot_content{ position: relative; z-index: 2; border-radius: 0 0 4px 4px; } .portfolio-filter .single-content .prot_content { position: absolute; left: 0; -moz-transition: 0.5s; -o-transition: 0.5s; transition: all 400ms linear; width: 83%; opacity: 1; text-align: center; transform: translateY(-50%); bottom: -177px; padding: 16px 24px 21px; background: rgb(255, 255, 255); margin: auto; border-radius: 4px; right: 0; } .portfolio-filter .single-content:hover .prot_content{ bottom: 0; } .portfolio-filter .content .grid-item .prot_content h4 { margin: 0; } .portfolio-filter .content .grid-item .prot_content h4 a { display: inline-block; color: #fff; font-size: 20px; font-weight: 600; } .portfolio-filter .content .grid-item .prot_content h4 a { display: inline-block; color: #232323; font-size: 20px; font-weight: 700; margin: 0px; transition: 0.3s; } .portfolio-filter .content .grid-item .prot_content h4 a:hover{ color: rgb(12, 90, 219); } .portfolio-filter .content .grid-item .prot_content p { color: #fff; font-size: 15px; margin-bottom: 0; position: relative; color: rgb(12, 90, 219); display: inline-block; margin: 3px 0 0; } /* Portfolio Details: */ .portfolio_details { overflow: hidden; -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.10); box-shadow: 0 0 30px rgba(0,0,0,0.10); padding: 65px 50px 50px; width:100%; } .portfolio_info { padding-left: 50px; padding-top: 48px; } .portfolio_info h2 { font-size: 25px; /* font-family: muli; */ padding-bottom: 17px; } .portfolio-details-box li strong { margin-right: 5px; } .pr-title { padding: 24px 0 18px; } .port_dtl_social{} .port_dtl_social span{ font-size:20px; font-weight:700; margin-bottom:10px; display:block; } .port_dtl_social a { display: inline-block; width: 35px; height: 35px; background: #0A7A60 ; color: #fff; border-radius: 5px; font-size: 18px; text-align: center; margin-right: 10px; line-height: 35px; } .portfolio_info h3 { font-size: 25px; padding-bottom: 17px } .portfolio-details-box li strong { font-size: 20px; margin-right: 5px } .pr-title { padding: 24px 0 18px } .portfolio-details-box li { border-bottom: 1px solid #ddd; font-size: 18px; font-weight: 300; padding: 13px 0; text-transform: capitalize; list-style: none; } .portfolio_details .col-md-6 { float: left; } .portfolio_info ul { list-style: none; } .portfolio_info ul li { padding: 5px 0; margin-bottom: 20px; } .port_dtl_social { margin-top: 20px; } .portfolio-details-box .port_dtl_social i { padding: 0 10px 0 10px; color: #fff; } .pr-title h2 { font-size: 25px; } /* Service Details */ .service-details .flip-box .flip-box-inner .front-part .front-content-part .front-icon-part { display: none; } .menu-service-menu-container nav.hfe-nav-menu__layout-horizontal.hfe-nav-menu__submenu-arrow { display: block; padding: 0 0; } .menu-service-menu-container ul#menu-1-75fd4cf { display: block; } .menu-service-menu-container ul { list-style: none; padding: 0; display:block; } .menu-service-menu-container ul li { list-style: none; margin-bottom: 14px; } .menu-service-menu-container ul li:last-child{ margin-bottom: 0; } .menu-service-menu-container ul li a { position: relative; display: block; padding: 20px 7px 20px 24px!important; background-color: #F3F6F9; font-weight: 400; font-size: 16px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #232323; position: relative; border-radius: 5px; } .menu-service-menu-container ul .current_page_item a { background-color: #0A7A60 ; color: #fff!important; } .menu-service-menu-container ul .current_page_item a::after { background-color: #fff; color:#fff; } .menu-service-menu-container ul li a::after { content: '\f105'; position: absolute; right: 16px; top: 21px; color: #232323; font-size: 17px; font-family: 'FontAwesome'; text-align: center; line-height: 22px; border-radius: 100%; transition: .5s; opacity: 1!important; background: transparent!important; } .menu-service-menu-container ul li a:hover { color: #fff; background: #0A7A60 ; } .menu-service-menu-container ul li a:hover:after { color: #fff; } .details-service .dreamit-button .button { padding: 11px 29px; font-weight: 500; font-family: 'Poppins', sans-serif; } /* Hero Section */ .hero-single-slide{ min-height: 887px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; } .hero-content-left h1 { font-size: 50px; margin-bottom: 0; margin-top: 0; font-weight: 800; line-height: 1.1; } .hero-content-left h2 { font-size: 50px; font-weight: 800; margin-bottom: 20px; margin-top: 0; line-height: 1.2; } .hero-content-left h3 { font-size: 25px; font-weight: 600; margin-bottom: 10px; } .hero-content-left p { padding-right: 70px; margin-bottom: 35px; } /* Accordion CSS */ .accordion { background: transparent; } .my-accordion li { position: relative; margin-bottom: 20px; list-style: none; z-index: 1; background: #CEDEF7; border-radius: 4px; } .my-accordion li:before { position: absolute; content: ""; z-index: -1; right: 20px; top: 14px; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.10196078431372549); border: 1px solid rgba(255, 255, 255, 0.3); } .my-accordion li:after { position: absolute; content: ""; z-index: 1; left: 24px; top: 28px; width: 22px; height: 22px; background: url(https://wp.ditsolution.net/techno/wp-content/uploads/2023/11/question.png); background-repeat: no-repeat; background-size: contain; background-position: left; transform: translate(-3%, -50%); } .my-accordion li p { display: none; padding: 17px 25px 3px; color: #616161; font-size: 16px; } .my-accordion a { position: relative; width: 100%; display: block; cursor: pointer; font-weight: 700; font-size: 18px; color: #232323; background-color: #CEDEF7; padding: 14px 20px 14px 59px; z-index: 1; border-bottom: 1px solid transparent; border-radius: 4px; } .my-accordion a.active { border-bottom: 1px solid rgba(0,0,0,0.08); } .my-accordion a:after { width: 10px; height: 2px; background: #0A7A60 ; position: absolute; right: 28px; content: " "; top: 26px; transition: all 0.2s ease-in-out; } .my-accordion a:before { width: 2px; height: 10px; background: #0A7A60 ; position: absolute; right: 32px; content: " "; top: 22px; transform: rotate(0); transition: all 0.2s ease-in-out; } .my-accordion li p { display: none; font-size: 16px; padding: 23px; } a.active:after { transform: rotate(0deg); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.active:before { display: none; } /*style five*/ .my-accordion.style5 li { position: relative; z-index: 1; background: transparent; list-style: none; box-shadow: none; border-radius: 0; padding: 0px 0px 25px; margin-bottom: 22px; border-bottom: 1px solid #1a35b5; } .my-accordion.style5 a { position: relative; font-size: 18px; color: #fff!important; background-color: transparent; padding: 0px 20px 0px 0px; z-index: 1; border-bottom: 1px solid transparent; border-radius: 0px; } .my-accordion.style5 li p { padding: 19px 0 0; color: #fff; width: 93%; margin: 0 0 6px; } .my-accordion.style5 li:before { display: none; } .my-accordion.style5 a:after { width: 15px; background: #fff; right: 28px; top: 26px; } .my-accordion.style5 a:before { height: 15px; background: #fff; right: 34px; top: 20px; } /*style six*/ .my-accordion.style6 a { position: relative; width: 100%; display: block; cursor: pointer; font-size: 18px; color: #232323 !important; z-index: 1; border-bottom: 1px solid transparent; border-radius: 4px; background-color: #ffffff; border: 1px solid rgba(35, 35, 35, 0.1); padding: 18px 28px; font-size: 18px; outline: 0; font-weight: 600; } .my-accordion.style6 li p { font-size: 16px; margin: 0; line-height: 28px; border-left: 1px solid rgba(35, 35, 35, 0.1); border-bottom: 1px solid rgba(35, 35, 35, 0.1); border-right: 1px solid rgba(35, 35, 35, 0.1); border-radius: 0 0 4px 4px; padding: 22px 28px 24px; background: #fff; } /*style seven*/ .my-accordion.style7 a { position: relative; width: 100%; display: block; cursor: pointer; font-weight: 700; padding: 20px 20px 33px 36px; z-index: 1; border-bottom: 1px solid transparent; border-radius: 4px; font-size: 38px; line-height: 56px; text-transform: uppercase; color: #ffffff; font-family: "Mulish"; border-radius: 10px 10px 0 0; background: rgba(255,255,255,0.050980392156862744); } ul.my-accordion.style7 li a span { font-size: 18px; line-height: 56px; color: #ffffff; font-weight: 500; font-family: "Mulish"; opacity: 0.502; } .my-accordion.style7 a.active { border-bottom: 1px solid rgba(0,0,0,0.08); background: transparent; } .my-accordion.style7 li { z-index: 1; background: rgba(255,255,255,0.050980392156862744); border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); } .my-accordion.style7 li a .shape_img{ display:none; } .my-accordion.style7 a.active .shape_img { display: block; position: absolute; animation: moveUp 1s ease-in-out forwards; right: 19px; z-index: 22; top: 22px; } @keyframes moveUp { from { transform: translateX(-100px); } to { transform: translateX(0px); } } .accordion-content { display: none; } .my-accordion.style7 li p { font-size: 16px; padding-left: 38px; width: 46%; margin: 0 0 29px; padding: 0 0 0 38px; display: block; } .my-accordion.style7 .list { padding: 0 38px 0px; } .my-accordion.style7 .list ul li { display: inline-block; background: transparent; margin-right: 32px; border: none; } .my-accordion.style7 .list ul li i{ margin-right:5px; } .my-accordion.style7 .list ul li:before, .my-accordion.style7 .list ul li:after{ display:none; } .my-accordion.style7 .my-accordion-button a.button{ display: block; } .my-accordion.style7 .my-accordion-button a.button { display: inline-block; width: 32px; padding: 2px 46px; text-align: center; position: relative; bottom: 30px; left: 21px; z-index: 22; height: 33px; } .my-accordion.style7 li:before { top: 58px; width: 56px; height: 56px; border-radius: 28px; background-color: rgba(245,247,252,0); border: 1px solid rgba(255,255,255,0.2); } .my-accordion.style7 a:before { top: 76px; height: 20px; right: 45px; } .my-accordion.style7 a:after { top: 85px; width: 20px; right: 36px; } /*my accordion style eight*/ .my-accordion.style8 a { position: relative; background-color: #f5f7fa; padding: 16px 20px 16px 27px; z-index: 1; border-bottom: 1px solid transparent; border-radius: 10px; font-size: 22px; cursor: pointer; } .my-accordion.style8 li { position: relative; margin-bottom: 20px; list-style: none; z-index: 1; background: #f5f7fa; border-radius: 10px; margin-bottom: 30px; } ul.my-accordion.style8 li a span { font-size: 22px; color: #232323; font-weight: 700; font-family: "Mulish"; position: relative; padding-right: 52px; } ul.my-accordion.style8 li a span:before { position: absolute; content: ""; top: 20px; right: 11px; height: 1px; width: 31px; background: #232323; } .my-accordion.style8 li p { display: none; font-size: 16px; padding: 23px 29px 39px 106px; border-top: 1px solid#E0E1E5; position: relative; line-height: 30px; } .my-accordion.style8 li p:before{ position:absolute; content:""; top:0; left:0; height:1px; width:90%; background:E0E1E5; } /* bounce-animate */ .bounce-animate { animation-name: float-bob; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob; -o-animation-duration: 2s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate2 { animation-name: float-bob2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob2; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob2; -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob2; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate3 { animation-name: float-bob3; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob3; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob3; -ms-animation-duration: 4s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob3; -o-animation-duration: 4s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate4 { animation-name: float-bob4; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob4; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob4; -ms-animation-duration: 5s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob4; -o-animation-duration: 5s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate5 { animation-name: float-bob5; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob5; -moz-animation-duration: 6s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob5; -ms-animation-duration: 6s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob5; -o-animation-duration: 6s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } @-webkit-keyframes float-bob { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes float-bob2 { 0% { -webkit-transform: translateY(-60px); transform: translateY(-60px); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(-60px); transform: translateY(-60px); } } @-webkit-keyframes float-bob3 { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes float-bob4 { 0% { -webkit-transform: translateY(-70px); transform: translateY(-70px); } 50% { -webkit-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(-70px); transform: translateY(-70px); } } @-webkit-keyframes float-bob5 { 0% { -webkit-transform: translateY(-75px); transform: translateY(-75px); } 50% { -webkit-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(-75px); transform: translateY(-75px); } } @-webkit-keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /*animation moveleft*/ @keyframes moveleftbounce { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } /* Subscribe Form */ .subscribe-form input[type="email"] { padding: 10px 15px 10px 15px; border-radius: 0; outline: 0; width: 70%; border: 0; background: #fff; height: 56px; box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.05); margin: 0; } .subscribe-form input[type="email"]::placeholder{ opacity: 0.9; } .subscribe-form input[type="email"]:focus{ color: #fff; } .subscribe-form input[type="submit"] { position: absolute; top: 0; right: 0; height: 56px; color: #fff; font-size: 16px; font-weight: 500; text-transform: uppercase; background-color: #b98d36; padding: 0; width: 30%; border: 0; outline: 0; border-radius: 0; } /* ================== Tab ================== */ .tab .nav-tabs li{ text-align: center; background: #0A7A60 ; margin-right: 6px; } .tab .nav-tabs li.active{ background: #fff; } .tab .nav-tabs li.active a{ color: #0A7A60 ; } .tab .nav-tabs li a{ color: #fff; text-decoration: none; display: block; padding: 12px 30px; font-weight: 700; } .tab .nav-tabs { border-bottom: 0; } .tab .tab-content{ background: #fff; padding: 55px 36px 50px; } .tab .tab-content h2 { font-size: 30px; margin: 0 0 10px; } .tab .tab-content .button a{ color: #fff; } .tab .button a { background: #0A7A60; border: 0; display: inline-block; text-align: center; padding: 14px 39px; border-radius: 7px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #fff; margin-top: 10px; } .tab .button a:hover { background: #00247E; color: #fff; } /* ================== Tab ================== */ .filter-tab #tabs { margin: 0; list-style: none; display: block; text-align: left; border-radius: 0; margin-bottom: 66px; } .filter-tab .container{ max-width:1320px; padding:0 10px; margin:auto; } .filter-tab .tab_content h1 { display: inline-block; font-size: 24px; font-weight: 700; margin: 0 0 21px; } .filter-tab .tab_thumb { -webkit-box-shadow: 13px 10px 14px 3px rgba(12, 90, 219, .1); box-shadow: 13px 10px 14px 3px rgba(12, 90, 219, .1); border-radius: 10px; } .filter-tab ul.features { margin-top: 26px; } .filter-tab .row.alignment { display: flex!important; align-items: center!important; } .filter-tab ul li { display: inline-block; position: relative; border-radius: 10px; margin-bottom: 15px; width: 22%; text-align: center; height: 100%; } .filter-tab ul li:last-child{ margin-right:0px; } .filter-tab tab_thumb { position: relative; z-index: 1; } .filter-tab .tab_thumb img{ width:100%; } .filter-tab #tabs li a img { max-height: 150px; max-width: 150px; object-fit: cover; filter: brightness(0)invert(1); margin-bottom: 20px; } .filter-tab #tabs li a:before { position: absolute; content: ""; top: -2px; left: 0; height: 101%; width: 100%; background: #fff; opacity: 1; border-radius: 0; } .filter-tab #tabs li { position: relative; margin-right: 12px; } .filter-tab #tabs li a.inactive:before{ display: none!important; } .filter-tab #tabs li a.inactive h5.text { color: #0A7A60 !important; } .filter-tab #tabs h5.text { position: inherit; color: #fff!important; font-weight: 600; text-align: center; font-size: 19px; } .filter-tab #tabs li a h5.text { color: #0A7A60 !important; position: relative; z-index: 22; } .filter-tab #tabs li a.inactive h5.text { color: #fff; } .filter-tab #tabs li a.inactive img { filter: brightness(0)invert(1); -webkit-filter: grayscale(0); filter: grayscale(0); } .filter-tab #tabs a { cursor: pointer; display: block; line-height: 25px; color: #fff; font-size: 19px; font-weight: 600; margin: 0; padding: 20px 20px 19px; border-radius: 0; background: #0A7A60 ; } .filter-tab #tabs li a.inactive { background: #0A7A60 ; outline: none; position: relative; } .filter-tab #tabs li:before a.inactive { background: transparent; outline: none; position: relative; } .filter-tab #tabs li a.inactive h5.text { color: #fff; position: relative; z-index: 22; color: #fff!important; } .filter-tab #tabs li a:hover, .filter-tab #tabs li a.inactive:hover { color: #5685bc; outline:none; } .filter-tab .row.tab_two { background: #fff; margin: 0 13px; position: relative; z-index: 1; } .filter-tab .text { text-align: center; } .filter-tab .tab_content { padding: 0 30px 0; text-align: left; } .filter-tab .tab_content p { line-height: 30px; } .filter-tab h3.title_text { font-size: 24px; color: #ffffff; font-weight: 600; font-family: "Rajdhani"; text-align: center; margin: 0 0 34px; } .filter-tab ul.features li { display: block; position: relative; border-radius: 0px; margin-bottom: 12px; text-align: left; height: 100%; width: 100%; } .filter-tab .tab_btn { display: inline-block; position: relative; z-index: 22; margin-top: 46px; } .filter-tab a.tab_button { font-size: 16px; color: #fff; transition: .5s; display: inline-block; background: #13277D; border-radius: 0; padding: 16px 37px; z-index: 2; } .filter-tab a.tab_button:after { position: absolute; content: ""; top: 5px; left: 5px; border: 1px solid#279E64; height: 100%; width: 100%; z-index: -1; transition: .5s; transform: scale(1); border-radius: 0; background: transparent; } .filter-tab a.tab_button:hover:after { top: 0; left: 0; } .filter-tab a.tab_button:hover { background: #279E64; } .filter-tab #tabs li a h3 { color: #fff; font-size: 22px; font-weight: 600; margin: 25px 0 20px; } .filter-tab #tabs li a p{ color: #fff; } .filter-tab #tabs li a.inactive p{ color: #828fa0; } .filter-tab .content { padding-top: 40px; } .filter-tab .content .title{ color: #fff; font-size: 22px; font-weight: 600; } .filter-tab .content h1, .filter-tab .content h2 { margin-left: 0; color: #062461; line-height: 40px; font-size: 34px; font-weight: 700; margin: 0 0 20px; } .filter-tab .content .text h3{ font-size: 22px; font-weight: 600; } .filter-tab .text .tab_content p.description { margin-top: 20px; } .filter-tab .content .text p { color: #828fa0; margin: 0px 0 13px; } .filter-tab .content .text ul{ margin: 0 0 35px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } .filter-tab .content .text ul li{ position: relative; color: #828fa0; font-size: 16px; padding-left: 25px; margin-right: 30px; color: #616161; } .filter-tab ul.features li i { margin-right: 10px; color: #0A7A60 ; } .filter-tab .content .text ul li:last-child{ margin-right: 0; } .filter-tab .content .text ul li::before{ content: '\f058'; position: absolute; left: 0; font-family: "Font Awesome 5 Free"; color: #533efe; } .tab_content h4 { font-size: 16px; color: #da242b; text-transform: uppercase; font-weight: 500; margin: 0 0 23px; } .description { display: block; font-size: 16px; line-height: 1.5; } a.tab_button i { font-size: 11px; margin-left: 8px; } .filter-tab ul#tabs li a.inactive i { display: inline-block; color: #fff!important; position: relative; z-index: 2; top: 4px; font-size: 30px; } .filter-tab ul#tabs li a i { display: inline-block; color: #0A7A60!important; position: relative; z-index: 2; top: 4px; font-size: 30px; } .filter-tab #tabs li a.inactive div#tab1C { margin-top: -9px; } .filter-tab .tab-btn a { display: inline-block; font-size: 17px; color: #fff; background: #0A7A60 ; border-radius: 6px; padding: 16px 40px; margin-top: 20px; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; margin-right: 15px; } .filter-tab .tab-btn a i{ margin-left: 6px; } .filter-tab .tab-btn a:hover { background: #00247e; } /*techno-new-tab*/ .techno-new-tab .tab .nav-tabs li a { color: #232323; padding: 13px 30px; border-radius: 30px; border: 1px solid#ECECEE; } .techno-new-tab .tab.style-two .tab-content p { color: #686868; } .techno-new-tab .tab.style-two .nav-tabs li.active { border-radius: 30px; border-color: #2875FF; background: #2875FF; } .techno-new-tab .tab .tab-content { background: transparent; padding: 26px 17px 9px; } .techno-new-tab .tab.style-two .nav-tabs li { background: #fff; border-radius: 30px; } .techno-new-tab .tab .nav-tabs li.active a { color: #fff; } .techno-new-tab .button { display: none; } /* Crypto html Table css start */ .crypto.table-section { background: inherit; } .crypto .explore_menu { text-align: left; } .crypto.table-section .table>:not(caption)>*>* { background-color: transparent!important; color: #fff; } .crypto .explore_menu form select { display: inline-block; cursor: pointer; font-size: 16px; padding: 12px 36px; font-weight: 400; color: #fff; transition: .5s; border: 1px solid #003C44; background: #153841; margin: 60px 10px 0 0; border-radius: 6px; } .crypto .explore_menu1 form select { display: inline-block; cursor: pointer; font-size: 16px; padding: 15px 36px; font-weight: 400; color: #fff; transition: .5s; background: #2A273E; margin: 0 10px 40px 0; border-radius: 6px; border: 0; } .crypto span.table-title { background: #153841; font-size: 16px; color: #00B98E; font-weight: 400; padding: 2px 12px; display: inline-block; border-radius: 3px; margin-right: 10px; margin-top: 18px; } .crypto .table-reponsive.box { width: 100%; } .crypto .box{ padding: 20px 10px; max-width:100%; margin: 0 auto; } .crypto .dataTables_wrapper .dataTables_filter input { border: 1px solid #332269; color: #fff; margin-bottom: 18px; } .crypto .table-bordered td, .table-bordered th { border: none; } .crypto .table>:not(:last-child)>:last-child>* { border-bottom-color: currentColor; color: #fff; text-align: left; } .crypto tr.one { background: rgba(13,110,255,0.05); } .crypto .table-bordered { border: none; } .crypto span.color-2 { padding: 0; color: #88dba9; } .crypto span.color-2 { padding: 0; color: #db2304; } .crypto .table>thead tr { background: #030D48; height: 60px; } .crypto .table>thead tr th { padding: 15px 0 15px; font-size: 16px; font-weight: 400; font-family: 'Mulish'; text-transform: capitalize; } .crypto .table tr td { padding: 4px 0 16px; text-align: left; } .crypto .table-number { padding: 0 60px 0 30px; position: relative; } .crypto .color-1 { color: #34c780; } .crypto .table tr td img { margin: -3px 10px 0 3px; position: relative; top: 13px; } .crypto span.img-text { padding: 0 !important; color: #8CA4B6; } .crypto tr.single td h6 { display: inline-block; font-weight: 500; font-size: 14px; padding: 0; margin: 0; color: #fff; } .dreamit-button-box.style9 .dreamit-button a { background: #0d6dff; padding: 16px 33px 16px 72px; font-size: 16px; font-weight: 500; display: inline-block; transition: .5s; position: relative; overflow: hidden; z-index: 1; border-radius: 28px; color: #fff; } .dreamit-button-box.style9 .dreamit-button a:after { position: absolute; content: ""; top: 15px; height: 26px; left: 38px; width: 26px; background: url("https://wp.ditsolution.net/techno-new/wp-content/uploads/2023/10/button-icon.png"); z-index: -1; } .crypto tr.one td h6 { display: inline-block; font-weight: 500; font-size: 14px; padding: 0; margin: 0; color: #fff; } .crypto tr.two td h6 { display: inline-block; font-weight: 500; font-size: 14px; padding: 0; margin: 0; color: #fff; } .crypto tr.double td h6 { display: inline-block; font-weight: 500; font-size: 14px; padding: 0; margin: 0; color: #fff; } .crypto tr.triple td h6 { display: inline-block; font-weight: 500; font-size: 14px; padding: 0; margin: 0; color: #fff; } .crypto td { color: #fff; } .crypto table.dataTable tbody tr { background-color: transparent; } .crypto table.dataTable tbody th, table.dataTable tbody td { padding: 26px 0; } .crypto .table thead th { vertical-align: bottom; border-bottom: none; } .crypto .dreamit-section-title h1 { font-size: 38px; font-weight: 400; color: #fff; } .crypto .dreamit-section-title p { color: #919ea4; } .crypto span.table-title { background: #153841; font-size: 16px; color: #00B98E; font-weight: 400; padding: 2px 12px; display: inline-block; border-radius: 3px; margin-right: 10px; margin-top: 18px; } .crypto .table-bordered>:not(caption)>* { border: 1px solid #002474; } .crypto .table td { border-top: none; } .crypto .table th { border-top: none; } .crypto .table-bordered td { border: none; } .crypto .table-bordered th { border: none; } .crypto .table-bordered td, .table-bordered th { border-top: 1px solid #002474 !important; } .crypto .table thead th { border-bottom: none !important; } .crypto-button .dreamit-button { text-align: right; } .crypto-table-head { width: 30%; } /* ================== Elementor Custom ================== */ .custom-progress .elementor-progress-text { margin-top: -20px; color: #232323; font-size: 16px; padding-left: 0; overflow: visible; } .custom-progress .elementor-progress-percentage { padding-right: 15px; margin-top: -20px; color: #232323; font-size: 16px; } /* Marquee Css */ .marquee { position: relative; --duration: 30s; --gap: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; gap:0px; } .marquee-block { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; gap:0px; min-width: 100%; -webkit-animation: scroll 30s linear infinite; animation: scroll 30s linear infinite; } .marquee-block .content-box { position: relative; margin-right:0px; } .marquee-block .content-box:last-child { margin-right:0px; } @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } @keyframes scroll { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - var(--gap))); transform: translateX(calc(-100% - var(--gap))); } } .marquee-bg{ transform: rotate(-2deg)!important; } .marquee-block h3 { color: #fff; font-size: 50px; font-size: 40px; line-height: 50px; text-transform: uppercase; color: #ffffff; font-weight: 800; font-family: "Mulish"; } .marquee-block h3 img { margin: 0 42px; position: relative; top: 5px; } /* The End Of CSS */