/* ============= 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; } /* ============ 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; } @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%; } } /* ============= Global ============= */ .slick-dots { bottom: 0px !important; position: relative; } .service-button a{ display: block; } /* ============= Slick Slider ============= */ .single-slick { position: relative; min-height: 900px !important; z-index: 1; } .slide-img, .parallax-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .single-slick .hero-text-wrap { text-align: center; padding-right: 104px; } .dreamit-slick-slider .slick-dots { bottom: 50px !important; position: relative; } /*.dreamit-slick-slider .hero-text-wrap { width: 63%; }*/ .dreamit-slick-slider .hero-text-wrap h1 { font-size: 80px; color: #101210; -webkit-animation: 1s 1.6s fadeInUp both; animation: 1s 1.6s fadeInUp both; font-weight: 600; } .dreamit-slick-slider .hero-text-wrap h1:before { position: absolute; content: ""; right: 27px; top: 0; width: 22%; height: 50%; background: url(/wp-content/uploads/2024/11/home-1.png); background-repeat: no-repeat; background-position: right; z-index: -1; background-position: right; } .dreamit-slick-slider .hero-text-wrap h1 span { font-size: 80px; font-weight: 500; padding: 0 0 0 384px; position: relative; } .dreamit-slick-slider .hero-text-wrap h1 span:before { position: absolute; content: ""; left: 184px; top: 8px; width: 21%; height: 87%; background: url(https://wp.ditsolution.net/dexon/wp-content/uploads/2023/07/shap4.png); background-repeat: no-repeat; background-position: left; z-index: -1; } .dreamit-slick-slider .hero-text-wrap h1 span:after { position: absolute; content: ""; left: 110px; top: 82px; width: 100%; height: 87%; background: url(https://wp.ditsolution.net/dexon/wp-content/uploads/2023/07/hero-shp4.png); background-repeat: no-repeat; background-position: center center; z-index: -1; } .dreamit-slick-slider .hero-text-wrap h4 { font-size: 18px; font-weight: 500; color: #fff; padding: 0 0 10px 56px; position: relative; z-index: 1; -webkit-animation: 0.8s 0.8s fadeInUp both; animation: 0.8s 0.8s fadeInUp both; margin: 0 0 5px; } .dreamit-slick-slider .hero-text-wrap h4:before { position: absolute; content: ""; left: 0; top: 10px; width: 40px; height: 2px; background: #e9ba04; } .dreamit-slick-slider .slick_content { padding-left: 170px; } .dreamit-slick-slider .hero-text-wrap p { -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; font-size: 18px; width: 66%; margin: 51px auto 0; color: #101210; font-weight: 500; } /*slick slider style two*/ .single-slick.style-two .container { max-width: 1320px; margin: 0 auto; } .single-slick.style-two .hero-text-wrap { text-align: left; padding-right: 0; } .single-slick.style-two .single_image { position: absolute; top: 50%; right: 3%; transform: translate(-50%, -50%); } .single-slick.style-two .hero-text-wrap h1 { font-size: 60px; color: #fff; -webkit-animation: 1s 1.6s fadeInUp both; animation: 1s 1.6s fadeInUp both; font-weight: 600; } .single-slick.style-two .hero-text-wrap h1:before { display: none; } .single-slick.style-two .hero-text-wrap h1 span { font-size: 60px; font-weight: 600; padding: 0; position: relative; background: linear-gradient(90deg, #bbf737 0%, #ffee62 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } .single-slick.style-two .hero-text-wrap h1 span:before, .single-slick.style-two .hero-text-wrap h1 span:after{ display: none; } .single-slick.style-two .hero-text-wrap .btn { font-size: 16px; padding: 16px 42px 16px; color: #fff; font-weight: 500; display: inline-block; border-radius: 5px; position: relative; z-index: 1; transition: .5s; background: linear-gradient(90deg, #bbf737 0%, #ffee62 100%); color: #101210; margin-top: 24px; } .single-slick.style-two .hero-text-wrap .btn i { margin-left: 3px; font-size: 13px; font-weight: 700; } .single-slick.style-two .hero-text-wrap .btn:before { position: absolute; content: ""; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #ffee62 0%, #bbf737 100%); transform: scale(0); transition: .5s; } .single-slick.style-two .hero-text-wrap .btn:hover:before { transform: scale(1); } .single-slick.style-two .hero-text-wrap p { margin-top: 24px; width: 49%; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; font-size: 18px; color: #a8a8b3; line-height: 30px; position: relative; z-index: 1; margin: 17px 0 12px; } .single-slick.style-two .counter-content span { font-size: 50px; font-weight: 500; margin-bottom: 24px; display: inline-block; color: #fff; } /*slick slider two*/ .single-slick.style-two .single_image 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: -76%; right: 0; bottom: 245px; text-align: center; transform: rotate(-90deg); /* transform: translate(10px, 10px); */ } .single-slick.style-two .slick_shape5 { position: absolute; top: 90px; right: 11px; bottom: inherit; z-index: 22; } .single-slick.style-two .slick_shape4 { position: absolute; left: 279px; top: 191px; } @-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } /* Line Css */ .lines { padding: 15px 0 40px; -webkit-animation: 1s 2s fadeInUp both; animation: 1s 2s fadeInUp both; } .lines .line { position: relative; width: 87%; height: 1px; background-color: rgba(255, 255, 255, 0.3); overflow: hidden; z-index: 5; } .lines .line::after { content: ""; display: block; position: relative; height: 1px; width: 35px; top: 0; left: 0px; background-color: #ffde5d; -webkit-animation: moveLeftBounces-two 35s linear infinite; animation: moveLeftBounces-two 35s linear infinite; overflow: hidden; } .lines .line:nth-child(1)::after { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes moveLeftBounces-two { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(585px); transform: translateY(585px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes moveLeftBounces-two { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(585px); transform: translateX(585px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /* Slider Button Css */ .dreamit-slick-slider .hero-text-wrap .btn { font-size: 16px; padding: 15px 42px; background: #101210; color: #fff; font-weight: 500; display: inline-block; border-radius: 5px; position: relative; z-index: 1; transition: .5s; margin-top: 38px; border: none; animation: 1s 1.8s fadeInUp both; } .dreamit-slick-slider .hero-text-wrap .btn:before { position: absolute; content: ""; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; border-radius: 5px; background: #ffde5d; transform: scale(0); transition: .5s; } .dreamit-slick-slider .hero-text-wrap .btn:hover:before { transform: scale(1); } .dreamit-slick-slider .hero-text-wrap .btn i { font-size: 17px; position: relative; top: 0px; left: 2px; transform: rotate(-52deg); transition: .5s; display: inline-block; } .dreamit-slick-slider .hero-text-wrap .btn:hover { color: #fff; } .dreamit-slick-slider .hero-text-wrap .btn:hover i { 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: #ffde5d; TEXT-ALIGN: CENTER; border: 2px solid #ffde5d; border-radius: 100%; font-size: 28px; line-height: 56px; margin-right: 10px; } /* 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-single-image img { filter: brightness(.5); } .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: #ffde5d; background: #fff; display: inline-block; font-size: 26px; position:relative; z-index:1; } .dreamit-slick-slider .slider-video-icon a:after { position: absolute; left: -10px; top: -10px; width: 100px; height: 100px; border: 3px dashed #fff; z-index: -1; content: ""; border-radius: 100%; -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; } .dreamit-slick-slider .text-center .hero-text-wrap p { font-size: 18px; margin: 16px auto 48px; text-align: center; } /* 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: #e9ba04!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: #e9ba04; 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); } } /* ============== Section Title ============== */ .section-title{ position: relative; } .section-title .subtitle { font-size: 18px; text-transform: capitalize; font-weight: 500; color: #e9ba04; margin: 0 0 16px; position: relative; margin-left: 53px; display: inline-block; } .section-title .title { font-size: 38px; margin: 0 0 0; } .section-title.center .description { width: 40%; margin: 17px auto 0; } .section-title .title span{ color: #e9ba04; } .section-title .description { font-size: 16px; font-weight: 300; margin: 15px 0 0; } .opacity-low{ opacity: 70%; } /*section title two*/ .section-title.style2 .subtitle { position: relative; display: inline-block; color: #e9ba04; font-weight: 500; text-transform: capitalize; margin: 0 0 15px; font-size: 18px; left: 53px; } .section-title.style2 .subtitle:before { position: absolute; content: ""; top: 10px; left: -53px; height: 2px; width: 41px; background: #e9ba04; } .section-title.style2 .description { font-size: 16px; font-weight: 400; margin: 16px 0 0; } /*style three*/ .section-title.style3 .subtitle { font-size: 18px; text-transform: capitalize; font-weight: 500; color: #e9ba04; 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: #e9ba04; } .section-title.style3 .subtitle:after { position: absolute; content: ""; top: 10px; right: -55px; margin: auto; height: 2px; width: 41px; background: #e9ba04; } /* ============ Feature Box ============ */ .feature-box.style1{ position: relative; } .feature-box.style1 { text-align: center; z-index: 99; padding: 38px 30px 18px; box-shadow: 0px 5px 20px 0px rgba(98, 26, 255, 0.07); border-radius: 5px; background: #fff; overflow: hidden; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .feature-box.style1 .feature-box-title h3 { font-size: 22px; font-weight: 700; text-transform: capitalize; margin: 0; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .feature-box.style1 .feature-box-title h2 { font-size: 20px; font-weight: 600; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; margin: 15px 0 15px; } .feature-box.style1 .feature-box-desc { font-weight: 300; margin-bottom: 20px; transition: .5s; } .feature-box.style1 .feature-box-icon{ display:inline-block; position:relative; margin-bottom: 17px; } .feature-box.style1 .feature-box-icon i { display: inline-block; color: #fff; font-size: 36px; height: 86px; width: 86px; line-height: 80px; text-align: center; background: linear-gradient(0deg, rgba(115,71,242,1) 0%, rgba(238,83,248,1) 100%);; border: 4px solid #fff; border-radius: 50%; box-shadow: 0px 10px 16px 0px rgba(145, 78, 255, 0.3); transition: 0.5s; } /* Style Two */ .feature-box.style2 { text-align: center; z-index: 99; padding: 38px 30px 18px; border: 1px solid #ebebfd; border-radius: 5px; background: #fff; overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .feature-box.style2:hover{ border: 1px solid transparent; box-shadow: 12px 13px 90px 0px rgba(0, 204, 153, 0.07); } .feature-box.style2 .feature-box-title h3 { font-size: 22px; font-weight: 700; text-transform: capitalize; margin: 0; -webkit-transition:.5s; -o-transition:.5s; transition:.5s; } .feature-box.style2 .feature-box-title h2 { font-size: 22px; font-weight: 600; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; margin: 15px 0 15px; } .feature-box.style2 .feature-box-desc { margin-bottom: 20px; transition: 0.5s; } .feature-box.style2 .feature-box-icon{ display:inline-block; position:relative; margin-bottom: 17px; } .feature-box.style2 .feature-box-icon i { display: inline-block; color: rgba(119, 122, 242, 1); font-size: 36px; height: 86px; width: 86px; line-height: 80px; text-align: center; background: rgba(119, 122, 242, 0.15); border-radius: 33% 66% 70% 30%/49% 62% 38% 51%; transition: 0.5s; } /* =================== Dream-IT Button =================== */ .dreamit-button .button { padding: 0; display: inline-block; position: relative; z-index: 1; overflow: hidden; font-weight: 500; text-decoration: underline!important; color: #101210; transition: .5s; position: relative; z-index: 2; margin-top: 10px; } .dreamit-button .button:hover { color: #ffde5d; } .dreamit-button .button i { font-size: 13px; text-align: center; display: inline-block; margin-left: 7px; position: relative; transition: .5s; font-weight: 700; transform: rotate(-45deg); } /*style two*/ .dreamit-button.style2 .button{ margin-top: 10px; font-size: 50px; } .dreamit-button.style2 .button i { height: 80px; width: 80px; line-height: 80px; text-align: center; border-radius: 50%; display: inline-block; background-color: rgba(48,110,255,0); border: 1px solid rgba(255,255,255,0.2); color: #3F413F; transform: rotate(-45deg); transition: .5s; position: relative; z-index: 1; font-size: 25px; transform: rotate(-45deg); } .dreamit-button.style2 .button i:hover{ } .dreamit-button.style2 .button i:after { position: absolute; content: ""; left: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background-image: linear-gradient(90deg, #bbf737 0%, #ffee62 100%); z-index: -1; transform: scale(0); transition: .5s; } .dreamit-button.style2 .button i:hover:after { transform: scale(1); } /*style three*/ .dreamit-button.style3 .dreamit-button { padding: 14px 45px; background: linear-gradient(90deg, #bbf737 0%, #ffee62 100%); display: inline-block; border-radius: 5px; margin-top: 9px; font-weight: 500; position: relative; z-index: 1; border: 1px solid #bbf737; } .dreamit-button.style3 .dreamit-button a i { font-size: 13px; position: relative; top: 0; left: 2px; transform: rotate(-52deg); transition: .5s; display: inline-block; } .dreamit-button.style3 .dreamit-button:hover a{ color: #fff; text-decoration: none; } .dreamit-button.style3 .dreamit-button:before { position: absolute; content: ""; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; background: #050505; transform: scale(0.0, 1); transition: .5s; border-radius: 5px; border: 1px solid #bbf737; } .dreamit-button.style3 .dreamit-button:hover:before{ transform: scale(1); } /* ============ Service Box ============ */ /*service box*/ .service-box { padding: 49px 50px 24px; margin-bottom: 0; text-align: center; background: #fff; border-radius: 30px; filter: drop-shadow(0px 5px 15px rgba(215,215,217,0.3)); transition: .5s; } .service-box .title { font-size: 24px; font-weight: 500; padding: 25px 0 17px; line-height: 1.4; position: relative; z-index: 1; transition: .5s; margin: 0; margin-top: 0; } .service-box:hover{ transform: translateY(-20px); } .service-box .icon img { transition: .5s; } p.description { transition: .5s; } /*all hover*/ /*.service-box:hover .icon img { filter: brightness(0) invert(1); }*/ /*Service box button*/ .service-btn a { font-size: 15px; display: inline-block; margin-top: 5px; position: relative; z-index: 1; transition: .5s; font-weight: 500; text-decoration: underline; color: #101210; transition: .5s; position: relative; z-index: 2; } .service-box .service-btn a i { position: relative; top: 0; transform: rotate(-45deg); display: inline-block; margin-left: 6px; } /*service style two*/ .service-box.style2 { padding: 46px 39px 13px; border-radius: 20px; background-color: transparent; text-align: left; margin-bottom: 0; position: relative; z-index: 1; height: 500px; } .two .service-box.style2 { height:330px; } .service-box.style2 p.description { transition: .5s; color: #101210; } .service-box.style2 .service-box-title h3 { font-size: 26px; font-weight: 500; transition: .5s; margin-top: 0; margin-bottom: 13px; } .service-box.style2 .service-box-content p{ transition: .5s; } .service-box.style2:hover{ transform: translateY(-4px); } .service-box.style2 .service-box-title h3 span , .service-box.style2 .service-box-title h2 span { color: #f83d04; } /*start service section*/ .service_box.style1 { padding: 45px 19px 49px 40px; border: 0; text-align: left; position: relative; z-index: 1; margin-bottom: 30px; overflow: hidden; border-top: 5px solid #FF3D00; transition: .5s; background: #fff; box-shadow: 0px 5px 30px 0px rgb(137 139 143 / 10%); } .service_box.style1:before { position: absolute; content: ""; right: 0; bottom: 0; width: 80px; height: 80px; background: url(https://wp.ditsolution.net/dexon/wp-content/uploads/2023/05/box-bg2.png); transition: all 400ms linear; opacity: 0; z-index: -1; } .service_top{ transition: all 400ms linear; } .service_box.style1 .icon { display: inline-block; position: relative; z-index: 1; margin-bottom: 17px; } .service_box.style1 .icon:after { position: absolute; content: ""; top: 10px; left: 14px; height: 74px; width: 74px; background: #f5f5f5; border-radius: 100%; z-index: -1; } .service_box.style1 .service_content h3 { margin: 11px 0 14px 0; font-size: 24px; font-weight: 600; } .service_box.style1 .service_bar { background: #e9ba04; height: 3px; width: 64px; position: relative; border-radius: 30px; margin-top: 34px; } .service_box.style1 .service_bar:before { position: absolute; content: ""; top: 0px; left: 0; height: 3px; width: 10px; border-radius: 50%; background: #fff; border-radius: 10%; -webkit-animation: MOVIE-BG 4s linear infinite alternate; animation: MOVIE-BG 4s linear infinite alternate; } /*back part*/ .service_box.style1 .service_back { position: absolute; top: 0; left: 0; height: 44%; width: 100%; text-align: left; background: #131323ed; padding: 32px 20px 0 46px; transform: perspective(500px)rotateX(-90deg); opacity: 1; transform-origin: 50% 0%; transition: all 400ms linear; } .service_box.style1 .service_back .description { color: #e9ba04; font-size: 16px; font-weight: 500; font-family: 'Fira Sans'; margin: 0 0 0; position: relative; left: 40px; } .service_box.style1 .service_back .description:before { position: absolute; content: ""; top: 10px; left: -40px; height: 2px; width: 35px; background: #e9ba04; } .service_box.style1 .service_back .title { margin: 7px 0 14px 0; font-size: 24px; font-weight: 600; color: #fff; } .service_box.style1 .service_number { display: inline-block; text-align: center; position: absolute; right: 0; top: 74px; margin: auto; height: 58px; width: 58px; background: #ffde5d; line-height: 58px; border-radius: 100%; left: 0; bottom: -73px; font-size: 24px; color: #fff; cursor: pointer; } /*hover*/ .service_box.style1:hover:before { width: 100%; height: 100%; opacity: 1; } .service_box.style1:hover .service_top{ opacity: 0; } .service_box.style1:hover .service_back { transform: perspective(500px)rotateX(0deg); } /*keyframes*/ @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); } } /*style three*/ .service-box.style3 { background-color: transparent; text-align: left; position: relative; z-index: 1; margin-bottom: 20px; padding: 25px 35px 27px; border-radius: 10px; background-image: linear-gradient(90deg, rgba(187,247,55,0.07058823529411763) 0%, rgba(187,247,55,0) 100%); position: relative; z-index: 1; transition: .5s; } .service-box.style3:hover { transform: translateY(-5px); } .last_box .service-box.style3:last-child{ margin-bottom: 0; } .service-box.style3:hover { background: linear-gradient(90deg, rgba(187,247,55,0) 0%, rgba(187,247,55,0.10196078431372547) 100%); } .service-box.style3 .icon { top: 0; background-color: transparent; border: none; float: left; } .service-box.style3 .icon img { width: 60%; } .service-box.style3 .content{ overflow: hidden; } .service-box.style3 .title { font-size: 24px; padding: 0 0 10px; margin: 0; margin-top: 0px; color: #fff; } .service-box.style3 p.description { transition: .5s; width: 83%; margin: 0 0 0; } .service-box.style3 .service-btn a { border: none; background-color: transparent; olor: #3E3F3D; position: absolute; right: 20px; top: 50%; margin: auto; display: inline-block; transform: translate(-50%, -50%); transition: .5s; margin-top: 0; } .service-box.style3 .service-btn a i { font-size: 26px; font-weight: 700; color: #3E3F3D; margin: 0; } .service-box.style3 .service-btn a:before { border-radius: 22px; } /*hover*/ .service-box.style3:hover .icon:after { background: #FF784E; } .service-box.style3:hover .title:before { background: #fff; } .service-box.style3:hover .service-btn a{ color: #fff; } .service-box.style3:hover .service-btn a i{ color: #fff; } /*service*/ .service .service-box.style3{ background: #F5F5F5; } .service .service-box.style3 .icon:after { top: 12px; background: #fff; } .service .service-box.style3:hover .icon:after { background: #FF784E; } .service .service-box.style3 .service-btn a{ background: #fff; color: #232323; } .service .service-box.style3:hover .service-btn a{ color: #fff; } .service .service-box.style3 .service-btn a i{ color: #e9ba04; } /*service style4*/ .service-box.style4 { padding: 40px 52px 23px; 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; filter: none; } .service-box.style4:hover { transform: translateY(-5px); } .service-box.style4: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.style4: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.style4:hover::before { transform: scale(1); } .service-box.style4:hover::after { transform: scale(1); } .service-box.style4 .title { padding: 25px 0 17px; position: relative; z-index: 1; color: #fff; } .service-box.style4 p.description { transition: .5s; font-size: 18px; } .box_two .service-box.style5 .icon { border-radius:50px; background-color:#ffde5d; } .box_three .service-box.style5 .icon{ background-color:#7becfe; } /*service style 5*/ .service-box.style5 { text-align: center; margin-bottom: 30px; padding: 40px 32px 25px; position: relative; z-index: 1; background: rgba(255,255,255,0.050980392156862744); border-radius: 10px; filter: none; } .service-box.style5:hover { transform: translateY(-5px); } .service-box.style5 .icon { width: 80px; height: 80px; line-height: 104px; text-align: center; border-radius: 4px 40px 40px 40px; background-color: #a8ff9c; display: inline-block; transition: .5s; } .service-box.style5:hover .icon { border-radius: 50%; } .service-box.style5 .title { font-size: 24px; color: #fff; font-weight: 500; padding: 27px 0 19px; } /*service style 6*/ .service-box.style5.style6 { background: #ffde5d; padding: 40px 32px 22px; position: relative; z-index: 1; margin: 0; } .service-box.style5.style6::before { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background: #fff; z-index: -1; transition: .5s; border-radius: 10px; } .service-box.style5.style6::after { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; background: #fff; z-index: -1; transition: .5s; border-radius: 10px; } .service-box.style5.style6:hover::before { transform: rotateX(90deg); } .single-choose-us-box:hover:after { transform: rotateY(90deg); } .service-box.style5.style6 .title { color: #101210; padding: 27px 0 18px; } /*style seven*/ .service-box.style7 { padding: 0; position: relative; filter: none; background: transparent; } .service-box.style7:hover { transform: translateY(-5px); } .service-box.style7 .thumb img { width: 100%; } .service-box.style7 .icon { display: none; } .service-box.style7 .service-btn { position: absolute; left: 30px; bottom: 24px; width: 63%; } .service-box.style7 .service-btn a { padding: 24px 35px; font-size: 20px; font-weight: 500; color: #101010; border-radius: 5px; background-color: #ffde5d; display: block; transition: .5s; text-decoration: none; } .service-box.style7:hover .service-btn a { background: #94f787; } /*service box style eight*/ .service-box.style8 { padding: 0; filter: none; border-radius: 5px; text-align: left; } .service-box.style8:hover { transform: translateY(-0px); } .service-box.style8 .thumb img { width: 100%; border-radius: 5px 5px 0 0; } .service-box.style8 .icon { display: none; } .service-box.style8 .content { padding: 15px 35px 40px; background: #fff; border-radius: 0 0 5px 5px; } .service-box.style8 .title { font-size: 26px; padding: 0; margin: 0 0 9px; } .service-box.style8 p.description { margin: 0 0 18px; } .service-box.style8 .service-btn a{ position: relative; text-decoration: none; } .service-box.style8 .service-btn a:before { position: absolute; content: ""; bottom: -8px; left: 0; height: 1px; width: 105px; background: #101210; transition: .5s; } .service-box.style8:hover .title, .service-box.style8:hover .service-btn a{ color: #FFDE5D; } .service-box.style8:hover .service-btn a:before{ background: #FFDE5D; } /*box style*/ .service_box_three .service-box.style5 .icon { background-color: #101210; } .service_box_four .service-box.style5 .icon { background-color: #7becfe; border-radius: 40px 4px 40px 40px; } .service_box_four .service-box.style5:hover .icon{ border-radius: 50%; } /* =============== 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: #e9ba04; } .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{ padding-right: 25px; } .icon-box.style1 .icon-box-content h2{ color: var(--title-color); font-size: 20px; font-weight: 700; margin: 0 0 7px 0; } .icon-box.style1 .icon-box-content .description p{ font-size: 14px; margin: 0; } .icon-box.style1 .icon-box-icon .icon{ border: 1px dashed var(--title-color); border-radius: 50%; padding: 12px; } .icon-box.style1 .icon-box-icon .icon i { display: inline-block; font-size: 20px; color: var(--title-color); height: 58px; width: 58px; line-height: 58px; text-align: center; background-color: #f9f9f9; border-radius: 50%; } /* Style Two */ .icon-box.style-two{ display: block; } .icon-box.style-two .icon-box-content .title h2 { color: #fff; font-size: 30px; margin: 22px 0px 15px 0px; font-size: 30px; font-weight: 500; } /* 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: 11px; } .icon-box.style3 .icon i { font-size: 11px; height: 20px; width: 20px; line-height: 20px; text-align: center; background-color: #e9ba04; border-radius: 50%; color: #fff; } .icon-box.style3 .icon-box-content .title { font-size: 20px; font-family: var(--title-font); margin: 0 0 0; font-weight: normal; font-size: 16px; } .icon-box.style3 .icon-box-content .description { color: var(--main-color); font-size: 18px; font-weight: 500; margin-bottom: 0; } /*icon box style four*/ .icon-box.style4 { display: flex; align-items: center; } .icon-box.style4 .icon-box-content h4 { margin: 0; padding: 0 0 0 22px; position: relative; line-height: 26px; } .icon-box.style4 .icon-box-content p { font-size: 15px; } /*style5*/ .icon-box.style5 { display: flex; } .icon-box.style5 .icon i { width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 10px; display: inline-block; color: #e9ba04; font-size: 11px; margin-right: 14px; border: 1px solid#e9ba04; position: relative; top: -3px; } /*style six*/ .icon-box.style6 .icon { height: 92px; width: 92px; line-height: 98px; background: #fff; text-align: center; border-radius: 100%; display: inline-block; } .icon-box.style6 .icon-box-icon{ display: inline-block; margin-right: 125px; border: 2px dashed #ffffff; border-radius: 50%; padding: 8px; } .icon-box.style6 .icon i { font-size: 45px; color: #e9ba04; transition: 0.5s; animation: 1s ease-in-out 0s normal none infinite running kmacb-circle-img-anim; display: inline-block; font-size: 27px } /*style seven*/ .icon-box.style7 { padding: 40px 40px 40px; position: relative; z-index: 1; background: rgba(255,255,255,0.10196078431372549); border-radius: 5px; } .icon-box.style7 .icon { display: inline-block; margin-right: 22px; } .icon-box.style7 .icon i { font-size: 25px; width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 35px; background-color: #ffde5d; display: inline-block; color: #232323; } .icon-box.style7 .icon-box-content .title { color: #fff; font-size: 20px; font-weight: 500; margin: 0 0 4px; } .icon-box.style7 .icon-box-content .description { font-size: 14px; margin: 0 0 11px; } /*hover*/ .icon-box.style7:hover .icon i{ background: #bbf737; } /*icon bos style eight*/ .icon-box.style8 { background: #f5f5f5; padding: 27px 15px 7px 29px; border-radius: 5px; display: flex; align-items: center; } .icon-box.style8 .img-icon { display: inline-block; height: 70px; width: 70px; border-radius: 5px; background: #fff; line-height: 98px; text-align: center; margin-right: 23px; } /*style nine*/ .icon-box.style9 p.description { margin: 0; } /*style ten*/ .icon-box.style10 { background: #fff; border-radius: 5px; } .icon-box.style10 .img-icon { display: inline-block; height: 58px; width: 58px; line-height: 76px; text-align: center; background: #ffde5d; border-radius: 5px 0 0px 5px; margin-right: 17px; } .icon-box.style10 p.description { margin: 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 .icon{ margin-bottom:40px; } .single-counter .icon i { font-size: 50px; color: #ffde5d; } .counter-content span { font-size: 50px; font-weight: 500; margin-bottom: 24px; display: inline-block; color: #101210; font-family: 'Clash Display', sans-serif; } .counter-content h6 { color: #9D9EA6; font-size: 16px; font-weight: 500; } /*counter section style two*/ .single-counter.style_two .icon { margin-bottom: 0; } .single-counter.style_two .counter-content.counter { display: flex; align-items: center; } .single-counter.style_two .counter-content span { font-size: 44px; font-weight: 500; margin-bottom: 0; } .single-counter.style_two .counter-content h6 { font-weight: 400; padding: 0 0 0 15px; margin-left: 15px; border-left: 1px solid rgba(16,18,16,0.2); display: inline-block; } /* ========== Team ========== */ .team.style1 { text-align: center; background-color: transparent; padding: 0; } .team.style1:hover .image img{ transform: scale(1.1); } .team.style1 .image img { transition: .5s; } .team.style1 .bio .name { font-size: 24px; font-weight: 500; margin: 21px 0 8px; } .team.style1 .bio .designation { color: #7b7b7b; font-weight: 400; margin: 0; font-size: 16px; } .team.style1 .content .social-icon{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .team.style1 .content .social-icon li{ margin-bottom: 5px; margin-right: 5px; } .team.style1 .content .social-icon li a{ display: inline-block; } .team.style1 .content .social-icon li a i{ display: inline-block; color: #fff; height: 30px; width: 30px; line-height: 30px; text-align: center; background-color: #1f3654; border-radius: 3px; } .team.style1 .content .social-icon li a i:hover{ background-color: #e9ba04; } /* Style Two */ .team.style2 { position: relative; z-index: 1; } .team.style2 .team-content { position: absolute; bottom: -11px; left: 0; right: 0; } .team.style2 .bio { padding: 10px 0 17px; background: #e9ba04; text-align: center; width: 80%; position: relative; z-index: 1; left: 10%; border-radius: 3px 3px 0 0; transform: perspective(500px)rotateX(90deg); -webkit-transition: all 400ms linear 0ms; transition: all 400ms linear 0ms; } .team.style2 ul.social-icon { position: relative; z-index: 1; left: 10%; width: 80%; background: #131323; text-align: center; padding: 14px 0 14px; border-radius: 0 0 3px 3px; transform: perspective(500px)rotateX(-90deg); -webkit-transition: all 400ms linear 0ms; transition: all 400ms linear 0ms; } .team.style2 .bio h2 { font-size: 22px; font-weight: 500; padding: 0 0 4px; color: #fff; } .team.style2 h5.designation { font-size: 16px; color: #fff; font-family: 'Rubik', sans-serif; font-weight: 400; margin: 0 0 5px; } .team.style2 ul.social-icon li { display: inline-block; color: #fff; font-size: 14px; margin-right: 6px; } .team.style2 ul.social-icon li a{ color: #fff; position: relative; z-index: 1; display: inline-block; width: 38px; height: 38px; line-height: 41px; text-align: center; border-radius: 50px; background-color: #373644; display: inline-block; color: #fff; font-size: 14px; margin-right: 6px; position: relative; z-index: 1; overflow: hidden; } .team.style2 ul.social-icon li a:before { position: absolute; content: ""; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; background: #e9ba04; transform: scale(0); border-radius: 50px; transition: .5s; } .team.style2 ul.social-icon li a:hover:before{ transform: scale(1); } /*hover*/ .team.style2:hover .bio { transform: perspective(500px)rotateX(0deg); } .team.style2:hover ul.social-icon { transform: perspective(500px)rotateX(0deg); } /*team style three*/ .team.style3 { text-align: center; background-color: transparent; padding: 0; } .team.style3:hover .image img{ transform: scale(1.1); } .team.style3 .image img { transition: .5s; } .team.style3 .bio .name { font-size: 24px; font-weight: 500; margin: 21px 0 8px; } .team.style3 .bio .designation { color: #7b7b7b; font-weight: 400; margin: 0; font-size: 16px; } .team.style3:hover .bio .designation{ opacity: 0; } .team.style3 .content { position: relative; } .team.style3 .content .social-icon { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; position: absolute; left: 0; right: 0; top: 44px; opacity: 0; transform: .5s; } .team.style3:hover .content .social-icon{ opacity: 1; top: 32px; } .team.style3 .content .social-icon { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; transition: .5s; } .team.style3 .content .social-icon li{ margin-bottom: 5px; margin-right: 5px; } .team.style3 .content .social-icon li a{ display: inline-block; transition: .5s; } .team.style3 .content .social-icon li a i { display: inline-block; color: #7b7b7b; text-align: center; font-size: 15px; margin: 0 3px; transition: .5s; } .team.style3 .content .social-icon li a i:hover{ color: #ffde5d; } /* =============== Team Carousel =============== */ .team.style1:hover{ box-shadow: none; } .team.style1 .content .social-icon{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .team.style1 .content .social-icon li{ margin-bottom: 5px; margin-right: 5px; } .team.style1 .content .social-icon li a{ display: inline-block; } .team.style1 .content .social-icon li a i{ display: inline-block; color: #fff; height: 30px; width: 30px; line-height: 30px; text-align: center; background-color: #1f3654; border-radius: 3px; } .team.style1 .content .social-icon li a i:hover{ background-color: #e9ba04; } /* Style Two */ .team-carousel.style2{ text-align: center; } .team-carousel.style2 .single-team{ margin-bottom: 30px; } .team-carousel.style2 .image{ position: relative; overflow: hidden; } .team-carousel.style2 .image img{ width: 100%; } .team-carousel.style2 .image .social-icon { position: absolute; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; left: 0; right: 0; bottom: -100px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; height: 100px; align-items: center; background-color: rgba(255, 255, 255, 0.6); } .team-carousel.style2 .single-team:hover .image .social-icon{ bottom: 0; } .team-carousel.style2 .image .social-icon li{ margin-bottom: 5px; margin-right: 5px; } .team-carousel.style2 .image .social-icon li a{ display: inline-block; } .team-carousel.style2 .image .social-icon li a i{ display: inline-block; color: #fff; font-size: 14px; height: 30px; width: 30px; line-height: 30px; text-align: center; background-color: var(--title-color); border-radius: 50%; } .team-carousel.style2 .image .social-icon li a i:hover{ background-color: var(--main-color); } .team-carousel.style2 .bio .name{ font-size: 20px; font-weight: 600; margin: 0 0 8px; } .team-carousel.style2 .bio .designation{ color: #57647c; font-size: 15px; font-weight: normal; } .team-carousel.style2 .content{ padding: 25px; box-shadow: 0px 0px 30px 0px rgba(45, 105, 255, 0.13); } /*heading*/ .heading h4 { border-bottom: 2px solid#DDE0E7; padding-bottom: 20px; } /* ============ Work Process ============ */ .work-process.style1 { text-align: center; padding: 0 22px; } .work-process.style1 .icon { position: relative; display: inline-block; z-index: 1; } .work-process.style1 .icon:before { position: absolute; content: ""; top: -14px; left: -15px; right: 0; margin: auto; height: 62px; width: 62px; background: #fe6637; transition: .5s; z-index: -1; border-radius: 100%; } .work-process.style1 .icon:after { position: absolute; content: ""; top: -7px; left: 22px; right: 0; margin: auto; height: 100%; width: 351px; background: url(https://wp.ditsolution.net/dexon/wp-content/uploads/2023/05/line-shape.png); background-repeat: no-repeat; background-position: center; z-index: -1; } .pocess .work-process.style1 .icon:after { display: none; } .work-process.style1 .icon i{ color: #ee53f8; } .work-process.style1 .content .title { font-size: 22px; color: #fff; font-weight: 600; font-family: "Fira Sans"; transition: .5s; margin: 13px 0 6px; } .work-process.style1 .content .description { font-weight: 400; color: #fff; } .work_progress { text-align: center; margin-bottom: 30px; position: relative; padding: 0 20px; } .wrok_process_thumb { text-align: center; border: 4px solid transparent; border-radius: 50%; display: inline-block; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; box-shadow: 0 0 9px 0 rgba(24,35,51,.09); } .work_progress:hover .wrok_process_thumb{ border-color:#ED2C41; } .wrok_process_thumb img { border-radius: 50%; border: 10px solid #fff; } .progress_content { text-align: center; } .default-style .work_progress-number{ position: absolute; left: -26px; top: 50.5%; margin: auto; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .work_progress-title { padding-top: 24px; } .work_progress-title h2 { font-size: 20px; font-weight: 700; } .work_progress-desc { padding-top: 5px; } .work_progress.default-style:hover .work_progress-number { top: 40%; } .work_progress-number span { background: #ED2C41; 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-number span::before { position: absolute; left: -5px; top: -5px; width: 60px; height: 60px; background: #ED2C41; opacity: 0.6; content: ""; margin: auto; border-radius: 100%; z-index: -1; } .work_progress-number span::after { position: absolute; left: -15px; top: -15px; width: 80px; height: 80px; background: #ED2C41; opacity: 0.4; content: ""; margin: auto; border-radius: 100%; z-index: -1; } .process-bg-shape { position: relative } .process-bg-shape:before { position: absolute; right: 0; bottom: -27px; width: 100%; content: ""; background: url(assets/images/graduation-bg.png); background-repeat: no-repeat; background-position: center top; height: 500px; } .em_process-icon{ position:relative; } .em_process-icon i { background: linear-gradient(to right, #000dff, #2c34ff, #444bff, #5860ff, #6b73ff); color: #fff; width: 90px; height: 90px; display: inline-block; line-height: 90px; font-size: 40px; border-radius: 4px; } /*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: #e9ba04; 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; } /* ============== 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; } /* =========== Testimonial =========== */ .testimonial.style1{ padding: 10px; } .testimonial.style1 .owl-item:nth-child(odd) { margin-top: 0; } .testimonial.style1 .testimonial-item { position: relative; margin-bottom: 30px; padding: 40px 30px 30px; filter: drop-shadow(0px 5px 15px rgba(215,215,217,0.3)); background-color: #ffffff; border-radius: 25px; margin-top: 30px; transition: .5s; } .testimonial.style1 .single_img { display: inline-block; } .testimonial.style1 .testimonial-item .author { display: flex; align-items: center; margin-bottom: 20px; position: relative; } .testimonial.style1 .testimonial-item .author img { height: 74px; width: 74px; object-fit: cover; margin-right: 18px; border-radius: 10px; } .testimonial.style1 .testimonial-item .author .bio .name { font-weight: 500; font-size: 22px; margin: 0 0 4px; } .testimonial.style1 .testimonial-item .author .bio .designation { font-size: 16px; font-weight: 400; margin: 0; color: #7b7b7b; transition: all 400ms linear; } .testimonial.style1 .testimonial-item .quote { transition: all 400ms linear; padding: 12px 0 28px; margin-bottom: 27px; border-bottom: 1px solid rgba(16,18,16,0.10196078431372549); font-size: 17px; color: #101210; } .testimonial.style1 .testimonial-item .reviews_rating { display: inline-block; float: right; position: relative; top: -3px; } .testimonial.style1 .testimonial-item .testi-star i { color: #ddd; font-size: 10px; } .testimonial.style1 .testimonial-item .testi-star i.active { display: inline-block; font-size: 15px; letter-spacing: 7px; color: #ffa133; } .testimonial.style1 .testimonial-item:hover{ transform: translateY(-10px); } .active.center .testimonial-item { margin-top: 10px; } /*hover*/ /*dots*/ .testimonial.style1 .owl-dots { text-align: center; position: absolute; left: 0; right: 0; margin: auto; display: inline-block; bottom: -36px; cursor: pointer; z-index: 99999; } .testimonial-carousel button { transition: all 0.4s ease 0s; border: medium none; border-radius: 35px; background: #e9ba04; color: #fff; font-family: 'Fira Sans'; font-weight: 500; text-align: center; padding: 13px 30px; position: absolute; right: inherit; top: 9px; display: inline-block; z-index: 1; margin: 0 9px; } .testimonial-carousel.owl-carousel .owl-nav button.owl-next, .testimonial-carousel.owl-carousel .owl-nav button.owl-prev, .testimonial-carousel.owl-carousel button.owl-dot { background: rgba(255, 255, 255, 0.30196078431372547); color: inherit; border: none; padding: 0 0px 0 0px!important; font: inherit; right: 0; text-align: center; left: 0; border-radius: 4px; } .testimonial-carousel.owl-carousel button.owl-dot { position: relative; display: inline-block; width: 13px; height: 13px; border-radius: 10px; background-color: #52DAA8; display: inline-block; margin-right: 1px; } .testimonial-carousel.owl-carousel button.owl-dot.active { background-color: #FFDD5D; position: relative; z-index: 1; } .testimonial-carousel.owl-carousel button.owl-dot.active:before { position: absolute; content: ""; left: -4px; top: -4px; width: 21px; height: 21px; border: 1px solid #FFDD5D; border-radius: 15px; } /* Style Two */ .testimonial.style2{ padding: 10px; } .testimonial.style2 .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.style2 .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.style2 .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.style2 .testimonial-item:hover:before { transform: scale(1); } .testimonial.style2 .testimonial-item:hover:after { transform: scale(1); } .testimonial.style2 .testimonial-item .author{ display: flex; align-items: center; margin-bottom: 33px; } .testimonial.style2 .testimonial-item .author img { height: 76px; width: 76px; object-fit: cover; margin-right: 20px; border-radius: 0; } .testimonial.style2 .testimonial-item .author .bio .name { color: #fff; font-size: 22px; font-weight: 500; margin: 0 0 7px; } .testimonial.style2 .testimonial-item .author .bio .designation { color: #7b7b7b; font-size: 16px; font-weight: 400; margin: 0; } .testimonial.style2 .testimonial-item .quote { font-size: 18px; font-weight: normal; color: #fff; opacity: 0.8; margin: 0; } .testimonial.style2 .testimonial-item .reviews_rating { position: absolute; top: 27%; right: 0; transform: translate(-29%, -50%); } .testimonial.style2 .testimonial-item .testi-star i { color: #ddd; font-size: 13px; } .testimonial.style2 .testimonial-item .testi-star i.active { display: inline-block; font-size: 15px; letter-spacing: 7px; color: #ffa133; } /*style three*/ .testimonial.style3 .testimonial-item .author { display: flex; align-items: center; margin-bottom: 41px; } .testimonial.style3 .testimonial-item .author img{ width: 13%; } .testimonial.style3 .testimonial-item .bio { padding-left: 20px; } .testimonial.style3 .testimonial-item h5.designation { margin: 8px 0 0; font-size: 16px; font-weight: 400; color: #7b7b7b; } .testimonial.style3 .testimonial-item .single_img { display: inline-block; float: left; } .testimonial.style3 .testimonial-item p.quote { font-size: 20px; color: #101010; line-height: 35px; overflow: hidden; } .testimonial.style3 .testimonial-item .single_img a { display: inline-block; float: left; margin-right: 20px; position: relative; top: 9px; } .testimonial.style3 .testimonial-item .single_img a img { display: inline-block; height: 31px; width: 31px; } /* ========== Case Study ========== */ .case-study.style1 .case-grid{ display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 30px; } .case-study.style1 .case-grid .gird-item{ position: relative; overflow: hidden; } .case-study.style1 .case-grid .gird-item .image{ position: relative; } .case-study.style1 .case-grid .gird-item .image img{ height: 380px; object-fit: cover; } .case-study.style1 .case-grid .gird-item .image::before{ content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--main-color); opacity: 0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .case-study.style1 .case-grid .gird-item:hover .image::before{ opacity: 0.9; } .case-study.style1 .case-grid .gird-item .content { position: absolute; top: 100%; left: 0; right: 0; text-align: center; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .case-study.style1 .case-grid .gird-item:hover .content{ top: 50%; transform: translateY(-50%); } .case-study.style1 .case-grid .gird-item .content .case-btn{ display: inline-block; margin-bottom: 24px; } .case-study.style1 .case-grid .gird-item .content .case-btn:hover i{ color: var(--main-color); background-color: #fff; } .case-study.style1 .case-grid .gird-item .content .case-btn i{ color: #fff; height: 45px; width: 45px; line-height: 45px; border: 1px solid #fff; border-radius: 5px; } .case-study.style1 .case-grid .gird-item .content .title{ color: #fff; font-size: 20px; font-weight: 600; } .case-study.style1 .case-grid .gird-item .content .category{ color: #fff; } .dreamit-single-cases-study{ position: relative; z-index:999; } .cases-study-content { position: absolute; left: 0; bottom: 0; right: 0; text-align: center; background: #ED2C41; margin: auto; padding: 20px 30px 1px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; z-index: 999; width: 100%; } .dreamit-single-cases-study:hover .cases-study-content{ bottom: 0; } .case-study-thumb{ position:relative; z-index:1; } .case-study-thumb img{ width: 100%; } .em-cases-study-title h2 { font-size: 20px; font-weight: 700; line-height: 1; margin: 0 0 5px; } .em-cases-study-title h2 a { font-size: 20px; font-weight: 700; margin: 0 0 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .case_category span { color: #ED2C41; } .case_default .em-cases-study-content{ background: transparent; width: 100%; padding: 40px 27px; top: inherit; opacity: 1; text-align: left; bottom: 0; } .case_default .em-cases-study-title h2 a { font-size: 23px; } .case_default .dreamit-single-cases-study { margin-bottom: 30px; } .case_default .case-study-thumb { position:relative; z-index: 1; } .case_default .case-study-thumb:before { display:none; } .case_default .em-cases-study-title h2 { margin: 0 0 7px; color: #fff; } .case_default .case_category span, .case_default .cases-study-content p, .case_default .em-case-study-button a { color: #fff; } .case_default .cases-study-content p { margin: 20px 0; } .case_default .em-cases-study-title h2 a:hover { color: #fff; } .em-case-study-button { margin-top: 23px; } /*case*/ .case-study.style2 .owl-dots { text-align: center; position: absolute; left: 0; right: 0; margin: auto; display: inline-block; bottom: -69px; cursor: pointer; z-index: 22; } .blog_wrap.case_study_carousel button.owl-dot { position: relative; z-index: 22; height: 5px; width: 9px; margin: 0 4px; display: inline-block; } .blog_wrap.case_study_carousel button.owl-dot { position: relative; z-index: 22; height: 5px; width: 9px; margin: 0 4px; display: inline-block; } .case-study.style2 .owl-theme .owl-dots .owl-dot span { margin: 0; opacity: 0; } .blog_wrap.case_study_carousel .owl-nav button.owl-next, .blog_wrap.case_study_carousel .owl-nav button.owl-prev, .blog_wrap.case_study_carousel button.owl-dot { background: rgba(255, 255, 255, 0.30196078431372547); color: inherit; border: none; padding: 0 15px 0 10px!important; font: inherit; right: 0; text-align: center; left: 0; border-radius: 4px; } .blog_wrap.case_study_carousel button.owl-dot.active { background: #e9ba04!important; } /*case study style two*/ .case-study.style2 .case-study-thumb::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(3, 4, 34, 0.902) 0%, rgba(3, 4, 34, 0.902) 24%, rgba(3, 3, 33, 0) 62%, rgba(3, 3, 33, 0) 100%); border-radius: 3px; transition: all 400ms linear; } .case-study.style2 .single_case_study:hover .case-study-thumb:before { background-image: linear-gradient(0deg, rgba(255, 59, 0, 0.902) 0%, rgba(255, 59, 0, 0.902) 24%, rgba(255, 59, 0, 0) 62%, rgba(255, 59, 0, 0) 100%); } .case-study.style2 .video-icon a { width: 48px; height: 48px; line-height: 50px; text-align: center; border-radius: 50%; color: #fff; background: #e9ba04; display: inline-block; font-size: 15px; position: absolute; top: 80px; right: 49px; opacity: 0; transition: all 400ms linear; } .case-study.style2 .single_case_study:hover .video-icon a{ top: 60px; opacity: 1; } .case-study.style2 .cases-study-content { position: absolute; text-align: left; background: transparent; margin: auto; padding: 20px 30px 0px; bottom: -23px; } .case-study.style2 h2.title { line-height: 23px; margin: 5px 0 0; } .case-study.style2 h2.title a { color: #fff; font-size: 20px; font-weight: 600; } .case-study.style2 .case_category span { font-size: 17px; padding: 0 0 0 32px; position: relative; z-index: 1; transition: all 400ms linear; color: #e9ba04; font-weight: 500; } .case-study.style2 .case_category span:before { position: absolute; content: ""; z-index: 1; left: 0; top: 10px; width: 22px; border: 1px solid #e9ba04; transition: all 400ms linear; } .case-study.style2 .em-case-study-button { margin-top: 23px; opacity: 0; transition: all 400ms linear; } .case-study.style2 .em-case-study-button a { color: #fff; font-size: 16px; display: inline-block; font-weight: 400; } .case-study.style2 .em-case-study-button a i { color: #fff; font-weight: 600; font-size: 9px; display: inline-block; margin-left: 6px; } /* single box hover*/ .case-study.style2 .single_case_study:hover .cases-study-content { bottom: 21px; } .case-study.style2 .single_case_study:hover .em-case-study-button{ opacity: 1; } .case-study.style2 .single_case_study:hover .case_category span:before{ border-color: #fff; } .case-study.style2 .single_case_study:hover .case_category span{ color: #fff; } /* ========== Brand ========== */ .brand-item { -webkit-animation-name: cloud-movement; -webkit-animation-timing-function: linear; -webkit-animation-direction: forwards; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s; display: inline-block; } .brand-item h3 { font-size: 24px; font-weight: 500; font-family: 'clash display'; /* padding-right: 112px;*/ color: #fff; text-transform: uppercase; opacity: .3; animation-name: cloud-movement; } .cloud { -webkit-animation-name: cloud-movement; -webkit-animation-timing-function: linear; -webkit-animation-direction: forwards; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 8s; -moz-animation-name: cloud-movement; -moz-animation-timing-function: linear; -moz-animation-direction: forwards; -moz-animation-iteration-count: infinite; -moz-animation-duration: 8s; animation-name: cloud-movement; animation-timing-function: linear; animation-direction: forwards; animation-iteration-count: infinite; animation-duration: 8s; } .slow { -webkit-animation-duration: 9.2s; -moz-animation-duration: 9.2s; animation-duration: 9.2s; } .slower { -webkit-animation-duration: 11.2s; -moz-animation-duration: 11.2s; animation-duration: 11.2s; } .slowest { -webkit-animation-duration: 13.5s; -moz-animation-duration: 13.5s; animation-duration: 13.5s; } @-webkit-keyframes cloud-movement { 0% { opacity: 0.1; -webkit-transform: translateX(300px); -moz-transform: translateX(300px); transform: translateX(300px); } 10% { opacity: 0.7; } 90% { opacity: 1; } 100% { opacity: 1; -webkit-transform: translateX(-1000px); -moz-transform: translateX(-1000px); transform: translateX(-1000px); } } /* ============== 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, .single-video.style-two .video-icon a { background: #a8ff9c; height: 70px; width: 70px; top: 50%; left: 0; right: 0; margin: auto; text-align: center; border-radius: 50%; line-height: 70px; color: #101010; font-size: 24px; 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: 37px; 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) } } /*video style two*/ .single-video.style-two .video-icon { display: inline-block; } .single-video.style-two h4.video_title { display: inline-block; } /* 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: #ED2C41; font-size: 26px; position: relative; } /*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 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); } } @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%; } } /* ============== Pricing Table ============== */ .pricing.style1 { padding: 43px 40px 50px; background: #ffde5d; border-top: 5px solid rgba(16,18,16,0.10196078431372549); border-radius: 5px; margin-bottom: 0px; position: relative; z-index: 1; } .pricing.style1 .pricing_img { display: inline-block; height: 82px; width: 82px; text-align: center; line-height: 110px; background: #ffde5d; border-radius: 5px; } .pricing.style1 .pricing-head { text-align: left; position: relative; } .pricing.style1 .pricing-title { position: relative; display: inline-block; transition: .5s; font-size: 18px; font-weight: 500; margin: 0 0 13px; } .pricing.style1 .price-item { border-bottom: 1px solid rgba(16,18,16,0.10196078431372549); padding: 0px 0 25px; } .pricing.style1 .price-item .currency { display: inline-block; font-size: 40px; font-weight: 500; color: #101010; margin: 8px 0 0; } .pricing.style1 .price-item .tk { display: inline-block; font-size: 40px; font-weight: 500; color: #101010; margin: 8px 0 0; } .pricing.style1 .price-item .month { font-size: 16px; display: inline-block; color: #101210; } .pricing.style1 .pricing-body .pricing_title { color: #101210; padding: 13px 0 18px; display: inline-block; font-size: 16px; font-weight: 400; } .pricing.style1 .pricing-body ul{ margin: 0; padding: 0; list-style: none; } .pricing.style1 .pricing-body ul li { list-style: none; display: block; padding: 0 0 16px 0; color: #101210; } .pricing.style1 .pricing-body ul li i { font-size: 11px; color: #7b7b7b; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #fff; border-radius: 50%; transition: .5s; display: inline-block; margin-right: 5px; } .pricing.style1 .pricing-button { margin-top: 20px; transition: .5s; padding: 11px 27px; font-weight: 500; color: #101210; border: 1px solid #101210; display: inline-block; border-radius: 5px; margin-top: 18px; position: relative; z-index: 1; text-decoration: none; } .pricing.style1 .pricing-button i { margin-left: 6px; position: relative; transform: rotate(-45deg); display: inline-block; } .pricing.style1 .pricing-button:hover { background: #94F787; color: #fff; border-color: #94F787; } /*pricing active*/ .pricing.style1.active { position: relative; z-index: 1; } .pricing.style1.active:before{ position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: url(https://wp.ditsolution.net/dexon/wp-content/uploads/2023/05/active.png); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index:-1; border-radius: 5px; } .pricing.style1.active .pricing_img { background: #fff; } .pricing.style1.active .pricing-title { background-color: transparent; } .pricing.style1.active .pricing-title:before{ background:transparent; } .pricing.style1.active .price-item { border-color:#343534; } /* ================ 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; } .form-area.contact-form.contact-one { background: #fff; padding: 42px 40px 35px; border-radius: 5px; } .form-area.contact-form.contact-one h6.form-title { font-size: 16px; font-weight: 500; padding: 0 0 16px; margin: 0; color: #101210; } .form-area.contact-form.contact-one .form-control { height: 54px; background-color: #fff; border: 0; transition: .5s; padding: 0px 25px; display: block; width: 100%; color: #616161; margin-bottom: 25px; border-radius: 4px; border: 1px solid rgba(16,18,16,0.1); } .form-area.contact-form.contact-one textarea.wpcf7-form-control.wpcf7-textarea.form-control { border: 1px solid rgba(16,18,16,0.1); height: 130px; padding: 15px 25px 0; } .form-area.contact-form.contact-one .buttons input { color: #fff; border-radius: 30px; border: none; padding: 11px 31px; color: #101010; display: inline-block; border-radius: 5px; position: relative; z-index: 1; border: 1px solid transparent; background: #ffde5d; transition: 0.5s; font-weight: 500; } .form-area.contact-form.contact-one .buttons input:hover{ background:#bbf737; } .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: #232323; 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: #ffde5d; } /*placeholder*/ input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.form-control::placeholder { color: #6d6d6d!important; } textarea.wpcf7-form-control.wpcf7-textarea::placeholder { color: #6d6d6d!important; } /*focus color*/ textarea:focus { outline: none; box-shadow: 0 0 6px rgb(204, 48, 0, 0.6); border-color: #ffde5d!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: #ffde5d; 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: #e9ba04; 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; } /* ========== Blog Post ========== */ .blog-post.style1 .post-item { margin-bottom: 20px; border-radius: 3px; background-color: #ffffff; border: 1px solid rgba(29, 33, 36, 0.12); position: relative; z-index: 1; transition: .5s; overflow: hidden; padding: 0 0 17px; } .blog-post.style1 .post-thumb { position: relative; overflow: hidden; } .blog-post.style1 .post-thumb img { overflow: hidden; transition: .5s; transform: scale(1.1); width: 100%; } .blog-post.style1 .categories { position: absolute; top: 10px; left: 10px; } .blog-post.style1 .categories a { padding: 4px 17px 2px; font-size: 14px; color: #ffffff; font-weight: 500; font-family: "Fira Sans"; background: #e9ba04; border-radius: 30px; display: inline-block; position: relative; z-index: 1; } .blog-post.style1 .post-item .blog_post_inner_content { padding: 25px 20px 27px; } .blog-post.style1 .post-item .content .meta { display: flex; align-items: center; margin-bottom: 12px; } .blog-post.style1 .meta i { color: #e9ba04; display: inline-block; font-size: 14px; margin-right: 7px; } .blog-post.style1 h3.title a { display: inline-block; font-size: 20px; color: #232323; font-weight: 600; } .blog-post.style1 .meta { display: inline-block; margin-bottom: 3px; } .blog-post.style1 .date { display: inline-block; } .blog-post.style1 .user_thumb { display: inline-block; height: 27px; width: 27px; margin-right: 14px; 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; text-transform: capitalize; font-size: 16px; margin: 0; font-weight: 500; } .blog-post.style1 .blog_btn { float: right; } .blog-post.style1 .blog_btn a { display: inline-block; color: #232323; font-family: 'Fira Sans'; font-weight: 600; transition: .5s; } .blog-post.style1 .blog_btn a i { font-size: 10px; display: inline-block; color: #e9ba04; font-weight: 600; margin-left: 5px; } /*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: #e9ba04; } .blog-post.style1 .blog_btn a:hover { color: #e9ba04; } .blog-post.style1 .author a:hover{ color: #e9ba04; } .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; } /* ============= 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: 28px 0 0; } .portfolio-filter ul li { font-weight: 500; text-transform: capitalize; margin: 0 25px; padding: 10px 0; cursor: pointer; background: #F6F5F5; font-size: 15px; font-family: 'Fira Sans'; transition: all 0.5s ease 0s; cursor: pointer; padding: 6px 25px; font-weight: 500; position: relative; margin: 0 3px; margin-bottom: 7px; display: inline-block; border-radius: 30px; } .portfolio-filter li.current_menu_item { background: #e9ba04; color: #fff; } .portfolio-filter .case-item { text-align: center; position: relative; z-index: 2; } .portfolio-filter .case-item .prot_content { position: absolute; left: 50%; right: 0; margin: auto; top: 60%; opacity: 0; transition: .5s; transform: translate(-50%, -50%); width: 100%; } .portfolio-filter .case-item:hover .prot_content{ top: 50%; opacity: 1; } .portfolio-filter .case-item .prot_content h4 { font-size: 26px; font-weight: 500; margin: 0 0 12px; } .portfolio-filter .case-item .prot_content h4 a{ text-decoration: none; } .portfolio-filter .case-item .port_btn a i { font-size: 21px; display: inline-block; transform: rotate(45deg); } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); grid-gap: 30px; position: relative; } .case-grid .case-item:nth-child(1) { grid-column: 4/2; grid-row: 1/2; } /*.case-grid .case-item:nth-child(6) { grid-column: 3/5; grid-row: 2/4; }*/ .portfolio-filter .case-item .port-thumb { position: relative; overflow: hidden; line-height: 0; } .portfolio-filter .case-item .port-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; } .portfolio-filter .case-item .port-thumb:hover:before { opacity: 1; } .portfolio-filter .port-thumb img { width: 100%; border-radius: 5px; } .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 .prot_content p { font-size: 18px; color: #101210; font-weight: 400; margin: 0 0 28px; } /*hover*/ .portfolio-filter .single-content:hover .picon{ top: 7%; } .portfolio-filter .single-content:hover .video-icon { top: 7%; } /* 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: #ffde5d; color: #fff; border-radius: 5px; font-size: 18px; text-align: center; margin-right: 10px; line-height: 35px; } .portfolio_details .col-md-6 { float: left; } .portfolio_info ul { list-style: none; } .portfolio_info ul li { padding:5px 0; } .port_dtl_social { margin-top: 20px; } .pr-title h2 { font-size: 25px; } /* Service Details */ .menu-service-menu-container ul { list-style: none; padding: 0; } .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: 15px 7px 15px 49px; background-color: #fff; 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: #ffde5d; color: #fff; } .menu-service-menu-container ul .current_page_item a::after { background-color: #fff; color:#FF3D00; } .menu-service-menu-container ul li a::after { content: '\f00c'; position: absolute; left: 19px; top: 18px; font-size: 12px; font-family: 'FontAwesome'; height: 22px; width: 22px; background: #E9E9E9; text-align: center; line-height: 22px; border-radius: 100%; transition: .5s; } .menu-service-menu-container ul li a:hover { color: #fff; background: #ffde5d; } .menu-service-menu-container ul li a:hover:after{ background: #fff; color:#FF3D00; } .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 */ .my-accordion li { position: relative; margin-bottom: 20px; list-style: none; z-index: 1; } .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/dexon/wp-content/uploads/2023/05/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-family: Clash Display; font-weight: 500; font-size: 22px; color: #101210!important; border-bottom: 1px solid rgba(19,17,37,0.15); padding: 27px 20px 20px 0px; z-index: 1; } .my-accordion li a.active { color: #e9ba04!important; padding: 0; border: none; } a.active:hover { color: #fff; } .my-accordion a:after { width: 16px; height: 2px; background: #e9ba04; position: absolute; right: 25px; content: " "; top: 40px; transition: all 0.2s ease-in-out; } .my-accordion a:before { width: 2px; height: 16px; background: #e9ba04; position: absolute; right: 32px; content: " "; top: 33px; transform: rotate(0); transition: all 0.2s ease-in-out; } .my-accordion li p { display: none; font-size: 16px; color: #7b7b7b; padding: 16px 0 20px 0px; border-bottom: 1px solid rgba(19,17,37,0.15); } a.active:after { transform: rotate(0deg); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: #e9ba04; width: 16px; top: 19px; } a.active:before { display: none; } .my-accordion a:hover{ text-decoration: none; } /* 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; } /* ================== 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; } /* The End Of CSS */