@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap"); /* custom width */ .maxw_1300 { max-width: 1300px; } .maxw_1450 { max-width: 1450px; } /* button */ .sl-btn { font-size: 15px; padding: 15px 30px; z-index: 1; text-align: center; color: #ffffff; background: #ED2D44; display: inline-block; font-weight: 600; line-height: 1.3; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; overflow: hidden; position: relative; font-weight: 600; text-transform: capitalize; border: 1px solid transparent; box-shadow: 0px 13px 14px 3px rgba(95, 45, 237, 0.05); font-family: "Inter", sans-serif; } .sl-btn:hover .btn-wrap span:nth-child(1) { -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%); } .sl-btn:hover .btn-wrap span:nth-child(2) { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sl-btn .btn-wrap { position: relative; overflow: hidden; display: block; } .sl-btn .btn-wrap span { color: #ffffff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .sl-btn .btn-wrap span:nth-child(1) { display: block; position: relative; } .sl-btn .btn-wrap span:nth-child(2) { position: absolute; top: 100%; display: block; } .sl-btn-white { background-color: #fff; color: #000; } .sl-btn-white .btn-wrap span { color: #000; } .btns a { margin-right: 25px; margin-top: 20px; } .btns a:last-child { margin-right: 0; } @media (max-width: 991px) { .btns a { margin-right: 20px; } } @-webkit-keyframes jump { 0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} 40% {-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);} 100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} } @keyframes jump { 0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} 40% {-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);} 100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} } @-webkit-keyframes rotated { 0% {-webkit-transform: rotate(0);transform: rotate(0);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @keyframes rotated { 0% {-webkit-transform: rotate(0);transform: rotate(0);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);} } @-webkit-keyframes rotatedHalf { 0% {-webkit-transform: rotate(0);transform: rotate(0);} 50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);} 100% {-webkit-transform: rotate(0);transform: rotate(0);} } @keyframes rotatedHalf { 0% {-webkit-transform: rotate(0);transform: rotate(0);} 50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);} 100% {-webkit-transform: rotate(0);transform: rotate(0);} } @-webkit-keyframes rotatedHalfTwo { 0% {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);} 100% {-webkit-transform: rotate(90deg);transform: rotate(90deg);} } @keyframes rotatedHalfTwo { 0% {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);} 100% {-webkit-transform: rotate(90deg);transform: rotate(90deg);} } @-webkit-keyframes scale-upOne { 0% {-webkit-transform: scale(1);transform: scale(1);} 100% {-webkit-transform: scale(0.2);transform: scale(0.2);} } @keyframes scale-upOne { 0% {-webkit-transform: scale(1);transform: scale(1);} 100% {-webkit-transform: scale(0.2);transform: scale(0.2);} } @-webkit-keyframes scale-right { 0% {-webkit-transform: translateX(-50%);transform: translateX(-50%);} 50% {-webkit-transform: translateX(50%);transform: translateX(50%);} 100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);} } @keyframes scale-right { 0% {-webkit-transform: translateX(-50%);transform: translateX(-50%);} 50% {-webkit-transform: translateX(50%);transform: translateX(50%);} 100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);} } @-webkit-keyframes fade-in { 0% {opacity: 0.7;} 40% {opacity: 1;} 100% {opacity: 0.7;} } @keyframes fade-in { 0% {opacity: 0.7;} 40% {opacity: 1;} 100% {opacity: 0.7;} } @keyframes hvr-ripple-out { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -6px; right: -6px; bottom: -6px; left: -6px; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; } 100% { top: -18px; right: -18px; bottom: -18px; left: -18px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% {-webkit-transform: scale(1);transform: scale(1);} 40% {-webkit-transform: scale(0.5);transform: scale(0.5);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @keyframes scale-up-one { 0% {-webkit-transform: scale(1);transform: scale(1);} 40% {-webkit-transform: scale(0.5);transform: scale(0.5);} 100% {-webkit-transform: scale(1);transform: scale(1);} } @-webkit-keyframes scale-up-two { 0% {-webkit-transform: scale(0.5);transform: scale(0.5);} 40% {-webkit-transform: scale(0.8);transform: scale(0.8);} 100% {-webkit-transform: scale(0.5);transform: scale(0.5);} } @keyframes scale-up-two { 0% {-webkit-transform: scale(0.5);transform: scale(0.5);} 40% {-webkit-transform: scale(0.8);transform: scale(0.8);} 100% {-webkit-transform: scale(0.5);transform: scale(0.5);} } @-webkit-keyframes scale-up-three { 0% {-webkit-transform: scale(0.7);transform: scale(0.7);} 40% {-webkit-transform: scale(0.4);transform: scale(0.4);} 100% {-webkit-transform: scale(0.7);transform: scale(0.7);} } @keyframes scale-up-three { 0% {-webkit-transform: scale(0.7);transform: scale(0.7);} 40% {-webkit-transform: scale(0.4);transform: scale(0.4);} 100% {-webkit-transform: scale(0.7);transform: scale(0.7);} } @keyframes animationFramesOne{ 0% { transform: translate(0px,0px) rotate(0deg) ; -webkit-transform: translate(0px,0px) rotate(0deg) ; -moz-transform: translate(0px,0px) rotate(0deg) ; -ms-transform: translate(0px,0px) rotate(0deg) ; -o-transform: translate(0px,0px) rotate(0deg) ; } 20% { transform: translate(73px,-1px) rotate(36deg) ; -webkit-transform: translate(73px,-1px) rotate(36deg) ; -moz-transform: translate(73px,-1px) rotate(36deg) ; -ms-transform: translate(73px,-1px) rotate(36deg) ; -o-transform: translate(73px,-1px) rotate(36deg) ; } 40% { transform: translate(141px,-20px) rotate(72deg) ; -webkit-transform: translate(141px,-20px) rotate(72deg) ; -moz-transform: translate(141px,-20px) rotate(72deg) ; -ms-transform: translate(141px,-20px) rotate(72deg) ; -o-transform: translate(141px,-20px) rotate(72deg) ; } 60% { transform: translate(83px,-60px) rotate(108deg) ; -webkit-transform: translate(83px,-60px) rotate(108deg) ; -moz-transform: translate(83px,-60px) rotate(108deg) ; -ms-transform: translate(83px,-60px) rotate(108deg) ; -o-transform: translate(83px,-60px) rotate(108deg) ; } 80% { transform: translate(-40px,72px) rotate(144deg) ; -webkit-transform: translate(-40px,72px) rotate(144deg) ; -moz-transform: translate(-40px,72px) rotate(144deg) ; -ms-transform: translate(-40px,72px) rotate(144deg) ; -o-transform: translate(-40px,72px) rotate(144deg) ; } 100% { transform: translate(0px,0px) rotate(0deg) ; -webkit-transform: translate(0px,0px) rotate(0deg) ; -moz-transform: translate(0px,0px) rotate(0deg) ; -ms-transform: translate(0px,0px) rotate(0deg) ; -o-transform: translate(0px,0px) rotate(0deg) ; } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px,0px) rotate(0deg) ; } 20% { -webkit-transform: translate(73px,-1px) rotate(36deg) ; } 40% { -webkit-transform: translate(141px,72px) rotate(72deg) ; } 60% { -webkit-transform: translate(83px,122px) rotate(108deg) ; } 80% { -webkit-transform: translate(-40px,72px) rotate(144deg) ; } 100% { -webkit-transform: translate(0px,0px) rotate(0deg) ; } } @keyframes animationFramesTwo{ 0% { transform: translate(0px,0px) rotate(0deg) scale(1) ; } 20% { transform: translate(73px,-1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px,72px) rotate(72deg) scale(1); } 60% { transform: translate(83px,122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px,72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px,0px) rotate(0deg) scale(1); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0px,0px) rotate(0deg) scale(1); } 20% { -webkit-transform: translate(73px,-1px) rotate(36deg) scale(0.9); } 40% { -webkit-transform: translate(141px,72px) rotate(72deg) scale(1); } 60% { -webkit-transform: translate(83px,122px) rotate(108deg) scale(1.2); } 80% { -webkit-transform: translate(-40px,72px) rotate(144deg) scale(1.1); } 100% { -webkit-transform: translate(0px,0px) rotate(0deg) scale(1); } } @keyframes animationFramesThree{ 0% { transform: translate(165px,-30px) ; -webkit-transform: translate(165px,-30px) ; -moz-transform: translate(165px,-30px) ; -ms-transform: translate(165px,-30px) ; -o-transform: translate(165px,-30px) ; } 100% { transform: translate(-60px,80px) ; -webkit-transform: translate(-60px,80px) ; -moz-transform: translate(-60px,80px) ; -ms-transform: translate(-60px,80px) ; -o-transform: translate(-60px,80px) ; } } @-webkit-keyframes animationFramesThree{ 0% { transform: translate(165px,-30px) ; -webkit-transform: translate(165px,-30px) ; -moz-transform: translate(165px,-30px) ; -ms-transform: translate(165px,-30px) ; -o-transform: translate(165px,-30px) ; } 100% { transform: translate(-60px,80px) ; -webkit-transform: translate(-60px,80px) ; -moz-transform: translate(-60px,80px) ; -ms-transform: translate(-60px,80px) ; -o-transform: translate(-60px,80px) ; } } @keyframes animationFramesFour{ 0% { transform: translate(-0px,60px) rotate(0deg) ; -webkit-transform: translate(-0px,60px) rotate(0deg) ; -moz-transform: translate(-0px,60px) rotate(0deg) ; -ms-transform: translate(-0px,60px) rotate(0deg) ; -o-transform: translate(-0px,60px) rotate(0deg) ; } 100% { transform: translate(-100px,-100px) rotate(180deg) ; -webkit-transform: translate(-100px,-100px) rotate(180deg) ; -moz-transform: translate(-100px,-100px) rotate(180deg) ; -ms-transform: translate(-100px,-100px) rotate(180deg) ; -o-transform: translate(-100px,-100px) rotate(180deg) ; } } @-webkit-keyframes animationFramesFour{ 0% { transform: translate(-0px,60px) rotate(0deg) ; -webkit-transform: translate(-0px,60px) rotate(0deg) ; -moz-transform: translate(-0px,60px) rotate(0deg) ; -ms-transform: translate(-0px,60px) rotate(0deg) ; -o-transform: translate(-0px,60px) rotate(0deg) ; } 100% { transform: translate(-100px,-100px) rotate(180deg) ; -webkit-transform: translate(-100px,-100px) rotate(180deg) ; -moz-transform: translate(-100px,-100px) rotate(180deg) ; -ms-transform: translate(-100px,-100px) rotate(180deg) ; -o-transform: translate(-100px,-100px) rotate(180deg) ; } } @keyframes animationFramesFive{ 0% { transform: translate(0,0) rotate(0deg) ; -webkit-transform: translate(0,0) rotate(0deg) ; -moz-transform: translate(0,0) rotate(0deg) ; -ms-transform: translate(0,0) rotate(0deg) ; -o-transform: translate(0,0) rotate(0deg) ; } 21% { transform: translate(4px,-20px) rotate(38deg) ; -webkit-transform: translate(4px,-20px) rotate(38deg) ; -moz-transform: translate(4px,-20px) rotate(38deg) ; -ms-transform: translate(4px,-20px) rotate(38deg) ; -o-transform: translate(4px,-20px) rotate(38deg) ; } 41% { transform: translate(-50px,-60px) rotate(74deg) ; -webkit-transform: translate(-50px,-60px) rotate(74deg) ; -moz-transform: translate(-50px,-60px) rotate(74deg) ; -ms-transform: translate(-50px,-60px) rotate(74deg) ; -o-transform: translate(-50px,-60px) rotate(74deg) ; } 60% { transform: translate(-20px,-30px) rotate(108deg) ; -webkit-transform: translate(-20px,-30px) rotate(108deg) ; -moz-transform: translate(-20px,-30px) rotate(108deg) ; -ms-transform: translate(-20px,-30px) rotate(108deg) ; -o-transform: translate(-20px,-30px) rotate(108deg) ; } 80% { transform: translate(-195px,-49px) rotate(144deg) ; -webkit-transform: translate(-195px,-49px) rotate(144deg) ; -moz-transform: translate(-195px,-49px) rotate(144deg) ; -ms-transform: translate(-195px,-49px) rotate(144deg) ; -o-transform: translate(-195px,-49px) rotate(144deg) ; } 100% { transform: translate(-1px,0px) rotate(180deg) ; -webkit-transform: translate(-1px,0px) rotate(180deg) ; -moz-transform: translate(-1px,0px) rotate(180deg) ; -ms-transform: translate(-1px,0px) rotate(180deg) ; -o-transform: translate(-1px,0px) rotate(180deg) ; } } @-webkit-keyframes animationFramesFive{ 0% { transform: translate(0,0) rotate(0deg) ; -webkit-transform: translate(0,0) rotate(0deg) ; -moz-transform: translate(0,0) rotate(0deg) ; -ms-transform: translate(0,0) rotate(0deg) ; -o-transform: translate(0,0) rotate(0deg) ; } 21% { transform: translate(4px,-20px) rotate(38deg) ; -webkit-transform: translate(4px,-20px) rotate(38deg) ; -moz-transform: translate(4px,-20px) rotate(38deg) ; -ms-transform: translate(4px,-20px) rotate(38deg) ; -o-transform: translate(4px,-20px) rotate(38deg) ; } 41% { transform: translate(-50px,-60px) rotate(74deg) ; -webkit-transform: translate(-50px,-60px) rotate(74deg) ; -moz-transform: translate(-50px,-60px) rotate(74deg) ; -ms-transform: translate(-50px,-60px) rotate(74deg) ; -o-transform: translate(-50px,-60px) rotate(74deg) ; } 60% { transform: translate(-20px,-30px) rotate(108deg) ; -webkit-transform: translate(-20px,-30px) rotate(108deg) ; -moz-transform: translate(-20px,-30px) rotate(108deg) ; -ms-transform: translate(-20px,-30px) rotate(108deg) ; -o-transform: translate(-20px,-30px) rotate(108deg) ; } 80% { transform: translate(-195px,-49px) rotate(144deg) ; -webkit-transform: translate(-195px,-49px) rotate(144deg) ; -moz-transform: translate(-195px,-49px) rotate(144deg) ; -ms-transform: translate(-195px,-49px) rotate(144deg) ; -o-transform: translate(-195px,-49px) rotate(144deg) ; } 100% { transform: translate(-1px,0px) rotate(180deg) ; -webkit-transform: translate(-1px,0px) rotate(180deg) ; -moz-transform: translate(-1px,0px) rotate(180deg) ; -ms-transform: translate(-1px,0px) rotate(180deg) ; -o-transform: translate(-1px,0px) rotate(180deg) ; } } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } @-webkit-keyframes zoominup { 0% { transform: scale(1.1); } 50% { transform: scale(1); } 100% { transform: scale(1.1); } } @-webkit-keyframes updown { 0% { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } 50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); } 100% { transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); } } @keyframes ltr { 0% { width: 0; } 15% { width: 95%; } 85% { opacity: 1; } 90% { width: 95%; opacity: 0; } to { width: 0; opacity: 0; } } /*circleAnimation*/ @-webkit-keyframes circleAnimation { 0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg); transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 34% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; -webkit-transform: translate3d(0, 5px, 0) rotateZ(0.01deg); transform: translate3d(0, 5px, 0) rotateZ(0.01deg); } 50% { -webkit-transform: translate3d(0, 0, 0) rotateZ(0.01deg); transform: translate3d(0, 0, 0) rotateZ(0.01deg); } 67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; -webkit-transform: translate3d(0, -3px, 0) rotateZ(0.01deg); transform: translate3d(0, -3px, 0) rotateZ(0.01deg); } } /* order & unorder list reset - start */ .ul_li, .ul_li_right, .ul_li_center { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; align-items: center; } .ul_li > li, .ul_li_right > li, .ul_li_center > li { float: left; list-style: none; display: inline-block; } .ul_li { justify-content: flex-start; } .ul_li_center { justify-content: center; } .ul_li_right { justify-content: flex-end; } .ul_li_block { margin: 0px; padding: 0px; display: block; } .ul_li_block > li { display: block; list-style: none; } /*-- - Margin & Padding -----------------------------------------*/ /*-- Margin Top --*/ .mt-none-5 { margin-top: -5px; } .mt-none-10 { margin-top: -10px; } .mt-none-15 { margin-top: -15px; } .mt-none-20 { margin-top: -20px; } .mt-none-25 { margin-top: -25px; } .mt-none-30 { margin-top: -30px; } .mt-none-35 { margin-top: -35px; } .mt-none-40 { margin-top: -40px; } .mt-none-45 { margin-top: -45px; } .mt-none-50 { margin-top: -50px; } .mt-none-55 { margin-top: -55px; } .mt-none-60 { margin-top: -60px; } .mt-none-65 { margin-top: -65px; } .mt-none-70 { margin-top: -70px; } .mt-none-75 { margin-top: -75px; } .mt-none-80 { margin-top: -80px; } .mt-none-85 { margin-top: -85px; } .mt-none-90 { margin-top: -90px; } .mt-none-95 { margin-top: -95px; } .mt-none-100 { margin-top: -100px; } /*-- Margin Top --*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } /*-- Margin Bottom --*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } /*-- Margin Left --*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } /*-- Margin Right --*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } /*-- Padding Top --*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } /*-- Padding Bottom --*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } /*-- Padding Left --*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } /*-- Padding Right --*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } .pos-rel { position: relative; } /* bg img */ .bg_img { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } /* header */ .sl-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 33; } .sl-header.uk-active { box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); z-index: 99; background-color: #411194; } .header__main { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 991px) { .header__main { padding: 10px 0; } } .header__logo { max-width: 132px; } .header__logo img { width: 100%; } .header__button a { margin-right: 15px; } .header__button a:last-child { margin-right: 0; } @media (max-width: 991px) { .header__button a.thm-btn { display: none; } } .sl-header .header__button .hamburger_menu .icon { width: 50px; height: 50px; border: 1px solid #F0F0F0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .header .uk-active { padding: 5px 0; background-color: #fff; box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) { .header .uk-active { padding: 0; } } @media (max-width: 991px) { .header .uk-active { padding: 17px 0; } } .uk-active .header__search a { color: #000; } /* Navigation css */ .sl-main-menu { display: flex; align-items: center; flex-grow: 1; } .sl-main-menu ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .sl-main-menu ul li { position: relative; } .sl-main-menu ul li:not(:last-child) { margin-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .sl-main-menu ul li:not(:last-child) { margin-right: 32px; } } @media (max-width: 1199px) { .sl-main-menu ul li:not(:last-child) { margin-right: 30px; } } .sl-main-menu ul li .submenu li { margin-right: 0; } .sl-main-menu ul li a { display: block; text-decoration: none; font-size: 16px; font-weight: 500; color: #fff; padding: 35px 0; position: relative; line-height: 22px; } .sl-main-menu ul li.dropdown > a::after { content: "\f078"; transform: translateY(-1px); display: inline-block; padding-left: 4px; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 10px; } .sl-main-menu ul li:hover > .submenu { visibility: visible; opacity: 1; -webkit-transform: scaleY(100%); -ms-transform: scaleY(100%); transform: scaleY(100%); } .sl-main-menu ul li .submenu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; min-width: 240px; top: 100%; visibility: hidden; opacity: 0; background: #ffffff; padding: 20px 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); z-index: 3; text-align: left; transform-origin: 50% 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); border-radius: 5px; } .sl-main-menu ul li .submenu li a { color: #000; padding: 10px 30px; } .sl-main-menu ul li .submenu ul { left: 100%; top: 0px; } .sl-main-menu ul li.menu-last ul.submenu { right: 0; left: auto; } .sl-main-menu ul li.menu-last ul.submenu ul { right: auto; left: -100%; } .sl-main-menu ul li ul.submenu .dropdown > a::after { position: absolute; top: 12px; right: 14px; content: "\f105"; font-size: 12px; } /* hero style */ .sl-banner { position: relative; } .sl-banner-height { min-height: 926px; } .sl-banner-content .subtitle { font-size: 18px; font-weight: 500; color: #fff; display: inline-block; margin-bottom: 20px; } .sl-banner-content .subtitle span { color: #EC0D0D; } .sl-banner-content .title { font-size: 56px; font-weight: 700; color: #fff; margin-bottom: 38px; } .sl-banner-content .title span { position: relative; z-index: 1; } .sl-banner-content .title > span::before { position: absolute; bottom: 10px; left: 4px; width: 100%; height: 6px; background-color: #F4A710; content: ""; z-index: -1; -webkit-animation: ltr 3s infinite; animation: ltr 3s infinite; } .sl-banner-content p { font-size: 18px; line-height: 32px; color: #B19DD5; } .sl-banner-img { position: absolute; bottom: -190px; right: 180px; } .sl-banner-list { top: -115px; position: relative; } .sl-banner-list li { color: #fff; font-size: 18px; padding-left: 30px; position: relative; } .sl-banner-list li:not(:last-child) { margin-bottom: 32px; } .sl-banner-list li::before { position: absolute; top: 6px; left: 0; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 400; background-color: #7F5EB8; width: 17px; height: 17px; font-size: 10px; display: flex; align-items: center; justify-content: center; color: #ffffff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transition: .3s; } .sl-banner-list li:hover::before { background-color: #fff; color: #431290; } .sl-banner-img2 { position: absolute; right: 390px; top: 103px; } .sl-banner-img3 { position: absolute; right: 140px; top: 231px; } .sl-banner-icon1 { position: absolute; top: 16%; left: 74px; } .sl-banner-icon2 { position: absolute; top: 150px; left: 40%; animation: animationFramesOne 35s alternate infinite linear; -webkit-animation: animationFramesOne 35s alternate infinite linear; } .sl-banner-icon3 { position: absolute; top: 40%; right: 26%; } /* section title */ .sl-sec-title .subtitle { font-size: 16px; font-weight: 500; margin-bottom: 17px; display: inline-block; color: #1A1616; } .sl-sec-title .subtitle span { color: #F41E10; } .sl-sec-title .title { font-size: 42px; font-weight: 600; color: #020202; z-index: 1; position: relative; } .sl-sec-title .title span { position: relative; } .sl-sec-title .title span::before { position: absolute; bottom: 10px; left: 4px; width: 100%; height: 6px; background-color: #F4A710; content: ""; z-index: -1; -webkit-animation: ltr 3s infinite; animation: ltr 3s infinite; } .sl-sec-title > .content { font-size: 16px; color: #817E7E; line-height: 32px; margin-top: 25px; } /* features */ .sl-features { z-index: 1; position: relative; } .sl-feature-item { padding: 60px 25px 70px 25px; text-align: center; border: 1px solid #E5E5E5; margin-right: -1px; margin-top: -1px; position: relative; } .sl-feature-item .icon { width: 66px; height: 66px; border: 1px solid #E5E5E5; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: auto; margin-bottom: 30px; justify-content: center; transition: .3s; } .sl-feature-item:hover .icon { background-color: #FF243E; border-color: transparent; } .sl-feature-item:hover .icon svg path { fill: #fff; } .sl-feature-item .title { font-size: 20px; font-weight: 600; color: #020202; margin-bottom: 30px; } .sl-feature-item:hover .title { text-decoration: underline; } .sl-feature-item .cotnent { font-size: 16px; font-weight: 400; color: #817E7E; } .sl-feature-col:not(:last-child)::before { position: absolute; top: 50%; right: -4px; transform: translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 400; content: "\f105"; z-index: 2; color: #FF1624; } .sl-feature-col:not(:last-child)::after { position: absolute; top: 45%; right: -26px; transform: translateY(-50%); content: ""; width: 50px; height: 31px; border: 1px solid #E5E5E5; transform: rotate(-45deg); border-radius: 20px; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 1; } /* wca */ .sl-wca-wrap::before { position: absolute; top: 0; width: 47%; height: 100%; background-color: #FCFBFF; border: 1px solid #E0D7FA; content: ""; border-top-right-radius: 40px; border-bottom-right-radius: 40px; } .sl-wca-images { margin-left: -245px; position: relative; z-index: 1; } .sl-wca-images .sl-img2 { position: absolute; top: -84px; left: -27px; } .sl-wca-images .sl-img3 { position: absolute; bottom: -122px; left: 0; } .sl-wca-images .sl-img4 { position: absolute; right: 36px; bottom: -58px; } .sl-wca-shape { width: 490px; height: 420px; background-color: #FFB000; position: absolute; left: 0; bottom: -80px; z-index: -1; border-radius: 50%; -webkit-animation: circleAnimation 7s linear infinite; animation: circleAnimation 7s linear infinite; } .sl-wca-icon img { z-index: -1; } .sl-wca-icon .icon1 { position: absolute; top: 35%; left: -53px; animation: animationFramesOne 35s alternate infinite linear; -webkit-animation: animationFramesOne 35s alternate infinite linear; } .sl-wca-icon .icon2 { position: absolute; bottom: 45%; left: -30px; animation: animationFramesTwo 35s alternate infinite linear; -webkit-animation: animationFramesTwo 35s alternate infinite linear; } .sl-wca-icon .icon3 { position: absolute; bottom: 10px; left: -30px; animation: animationFramesFour 35s alternate infinite linear; -webkit-animation: animationFramesFour 35s alternate infinite linear; } .sl-wca-box { padding: 50px 28px; border: 1px solid #E5E5E5; margin-top: 40px; border-radius: 24px; } .sl-wca-box-item .icon { width: 39px; height: 38px; margin-right: 12px; border-radius: 5px; background-color: #36ABFF; border-top-right-radius: 13px; display: flex; align-items: center; color: #fff; justify-content: center; } .sl-wca-box-item .content { width: calc(100% - 51px); } .sl-wca-box-item h3 { font-size: 16px; color: #020202; font-weight: 700; margin-bottom: 7px; font-family: "Quicksand", Sans-serif; } .sl-wca-box-item .text { font-size: 13px; color: #817E7E; line-height: 26px; } .sl-wca-box-item:not(:last-child) { margin-bottom: 30px; } .sl-wca-box-item:nth-child(2) .icon { background-color: #B310EC; } .sl-wca-box2 .sl-wca-box-item:nth-child(1) .icon { background-color: #FF3257; } .sl-wca-box2 .sl-wca-box-item:nth-child(2) .icon { background-color: #00D36E; } .sl-coutner { margin-top: 35px; } .sl-counter-item:not(:last-child) { margin-right: 100px; } .sl-counter-item .counter_title { display: inline-block; font-size: 16px; color: #505050; font-weight: 500; font-family: "Quicksand", Sans-serif; margin-bottom: 2px; } .sl-counter-item h3 { font-size: 38px; font-weight: 500; font-family: "Quicksand", Sans-serif; } .sl-counter-item h3 .suffix { position: relative; left: -5px; top: 2px; } .sl-wca-box .sl-wca-box-number { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #fff; width: 66px; height: 20px; border-radius: 10px; border: 1px solid #E5E5E5; font-size: 15px; display: flex; align-items: center; justify-content: center; color: #FF3257; font-weight: 500; font-family: "Inter", Sans-serif; } /* pricing style */ .sl-pricing-count { text-align: center; position: relative; } .sl-pricing-count h2 { font-size: 55px; font-weight: 500; font-family: "Quicksand", Sans-serif; } .sl-pricing-count img { position: absolute; top: -22px; left: 88px; } .sl-pricing-img { margin-left: -100px; } /* pricing */ .sl-pricing-item { border: 1px solid #E2D9FC; border-radius: 12px; background-color: #F5F5FE; padding: 40px 28px; } .sl-pricing-head { display: flex; align-items: center; justify-content: space-between; } .sl-pricing-price .price { font-size: 48px; font-weight: 600; font-family: "Inter", Sans-serif; } .sl-pricing-price .price span { font-size: 22px; color: #5C727D; transform: translateX(-10px); display: inline-block; } .sl-pricing-price > span, .sl-pricing-title { font-size: 16px; color: #000; font-family: "Inter", Sans-serif; } .sl-pricing-head { margin-bottom: 40px; } .sl-pricing-image { max-width: 130px; } .sl-pricing-list { margin-top: 27px; } .sl-pricing-list ul li { font-size: 18px; color: #000; font-family: "Inter", Sans-serif; position: relative; padding-left: 30px; } .sl-pricing-list ul li:not(:last-child) { margin-bottom: 30px; } .sl-pricing-list ul li::before { position: absolute; left: 0; top: 6px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; background-color: #FB285E; color: #fff; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 10px; border-radius: 50%; } .sl-pricing-list ul li.disable::before { background-color: #8C96A8; } .sl-pricing-item2 { margin-top: 90px; } .sl-pricing-btn .sl-btn { width: 100%; background-color: #5F2DED; border-radius: 25px; } .sl-pricing-btn .sl-btn .btn-wrap span:nth-child(2) { left: 0; right: 0; } .sl-pricing-btn { margin-top: 45px; } .sl-price-text { text-align: center; color: #8C96A8; font-weight: 500; font-family: "Inter", Sans-serif; font-size: 15px; margin-top: 13px; } .sl-pricing-item.active { background-color: #5F2DED; } .sl-pricing-item.active .sl-pricing-list ul li { color: #fff; } .sl-pricing-item.active .sl-pricing-list ul li::before { background-color: #fff; color: #5F2DED; } .sl-pricing-item.active .sl-pricing-btn .sl-btn { background-color: #fff; } .sl-pricing-item.active .sl-pricing-btn .sl-btn .btn-wrap span { color: #5F2DED; } .sl-pricing-item.active .sl-pricing-list ul li.disable::before { background-color: #8D6AF2; } .sl-pricing-item.active .sl-pricing-price .price, .sl-pricing-item.active .sl-pricing-price > span, .sl-pricing-item.active .sl-pricing-title { color: #fff; } .sl-pricing-wrap { position: relative; } .sl-pricing-nav { position: absolute; top: 0; right: 0; padding: 8px 14px; border: 1px solid #E2D9FC; border-radius: 32px; background-color: #F5F5FE; z-index: 1; } .sl-pricing-nav .nav-item .nav-link { padding: 8px 27px; border-radius: 22px; font-size: 18px; font-weight: 600; border: 0; font-family: "Inter", Sans-serif; } .sl-pricing-nav .nav-item .nav-link.active { background-color: #5F2DED; color: #fff; } /* counter */ .sl-counter { z-index: 1; position: relative; } .sl-counter-list li { position: relative; font-size: 16px; color: #445658; font-family: "Inter", Sans-serif; padding-left: 25px; } .sl-counter-list li:not(:last-child) { margin-bottom: 17px; } .sl-counter-list li::before { position: absolute; top: 2px; left: 0; font-size: 14px; content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 400; border-radius: 50%; color: #5F2DED; } .sl-counter-list li:nth-child(2)::before { color: #FE470E; } .sl-counter-list li:nth-child(3)::before { color: #05E700; } .sl-counter-single:not(:last-child) { margin-right: 50px; } .sl-counter-single { padding: 22px 12px; border-radius: 8px; transition: .3s; } .sl-counter-single:hover, .sl-counter-single.active { background-color: #5F2DED; box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.22); } .sl-counter-single > span { font-size: 16px; color: #505050; font-family: "Quicksand", Sans-serif; font-weight: 500; transform: .3s; } .sl-counter-single h2 { font-size: 38px; color: #000; font-family: "Quicksand", Sans-serif; font-weight: 500; transform: .3s; } .sl-counter-single:hover > span, .sl-counter-single.active > span, .sl-counter-single:hover h2, .sl-counter-single.active h2 { color: #fff; } /* cta */ .sl-cta { border: 1px solid #E2D9FC; background-color: #fff; border-radius: 71px; padding: 35px 53px !important; padding-top: 15px !important; justify-content: space-between !important; } .sl-cta .sl-sec-title .subtitle { margin-bottom: 13px; } .sl-cta .sl-sec-title .title { font-size: 26px; } .sl-cta .sl-sec-title .title span::before { bottom: 6px; height: 4px; } .sl-cta-btn a { margin-right: 20px; } .sl-cta-btn .sl-btn { border-radius: 29px; } .sl-cta-btn .sl-btn-two { border: 1px solid #000; background-color: transparent; } .sl-cta-btn .sl-btn-two .btn-wrap span { color: #000; } /* sl info */ .sl-info { position: relative; } .sl-info-icons img { position: absolute; } .sl-info-icons .icon1 { top: 40px; left: 100px; animation: animationFramesOne 35s alternate infinite linear; -webkit-animation: animationFramesOne 35s alternate infinite linear; } .sl-info-icons .icon2 { left: 63px; bottom: 200px; animation: animationFrameTwo 35s alternate infinite linear; -webkit-animation: animationFrameTwo 35s alternate infinite linear; } .sl-info-icons .icon3 { top: 150px; right: 160px; animation: animationFramesThree 35s alternate infinite linear; -webkit-animation: animationFramesThree 35s alternate infinite linear; } .sl-info-icons .icon4 { bottom: 175px; right: 175px; animation: animationFramesFour 35s alternate infinite linear; -webkit-animation: animationFramesFour 35s alternate infinite linear; } .sl-review-user { padding: 12px 22px !important; background: #fff; border-radius: 31px; border: 1px solid #E1E1E1; margin-right: 20px !important; } .sl-review-user h3 { font-size: 32px; color: #5F2DED; font-weight: 700; font-family: "Inter", Sans-serif; } .sl-review-user h3 span { font-size: 21px; left: -6px; position: relative; } .sl-review-user > span { margin-left: 2px; line-height: 1.1; } .sl-review-text { color: #2E4FC3; font-size: 15px; text-decoration: underline; margin-right: 16px; font-family: "Inter", Sans-serif; } .sl-review-rating { padding: 10px 10px; background-color: #fff; border: 1px solid #E1E1E1; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: "Inter", Sans-serif; } .sl-review-rating span { font-size: 12px; color: #FC8903; margin: 0 2px; } /* footer */ .sl-footer { z-index: 1; background: #F2F5FF; } .footer__widget-col:nth-child(1) { padding-right: 100px; } @media (max-width: 1199px) { .footer__widget-col:nth-child(1) { padding-right: 40px; } } @media (max-width: 991px) { .footer__widget-col:nth-child(1) { padding-right: 15px; } } .footer__widget-col:nth-child(3) { padding-left: 35px; } @media (max-width: 1199px) { .footer__widget-col:nth-child(3) { padding-left: 30px; } } @media (max-width: 991px) { .footer__widget-col:nth-child(3) { padding-left: 15px; } } .footer__widget-col:nth-child(4) { padding-left: 100px; } @media (max-width: 1199px) { .footer__widget-col:nth-child(4) { padding-left: 50px; } } @media (max-width: 991px) { .footer__widget-col:nth-child(4) { padding-left: 15px; } } .footer__widget > h3 { font-size: 22px; font-weight: 700; color: #16171A; margin-bottom: 40px; } .footer__widget .content { font-size: 16px; color: #34374E; line-height: 30px; } .footer__widget-info { margin-bottom: 0; } .footer__widget-info li { font-size: 16px; color: #34374E; font-weight: 500; display: flex; align-items: center; } .footer__widget-info li:not(:last-child) { margin-bottom: 18px; } .footer__widget-info li i { width: 40px; height: 40px; background-color: #5F2DED; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin-right: 11px; display: flex; align-items: center; justify-content: center; color: #ffffff; } .footer__links li { font-size: 16px; } .footer__links li:not(:last-child) { margin-bottom: 18px; } .footer__links li a { color: #34374E; } .footer__links li a:hover { color: #16171A; } .footer__post-item { display: flex; align-items: center; } .footer__post-item:not(:last-child) { margin-bottom: 20px; } .footer__post-item .post-thumb { width: 82px; height: 70px; margin-right: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; overflow: hidden; } .footer__post-item .post-thumb img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .footer__post-item:hover .post-thumb img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .footer__post-item .post-content { width: calc(100% - 102px); } .footer__post-item .post-content span { font-size: 12px; color: #474960; display: inline-block; margin-bottom: 10px; line-height: 1; } .footer__post-item .post-content h3 { font-size: 15px; font-weight: 500; font-family: "Inter", sans-serif; } .footer__post-item .post-content h3 a { color: #34374E; } .footer__bottom-wrap { background-color: rgba(27, 29, 32, 0.09); padding: 15px 0; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: -15px; flex-wrap: wrap; } @media (max-width: 767px) { .footer__bottom { justify-content: center; } } .footer__social { display: flex; align-items: center; margin-bottom: 0; } .footer__social li:not(:first-child) { margin-left: 12px; } .footer__social li a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #5F2DED; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transition: .3s; background-color: rgba(191, 191, 191, 0.25); } .footer__social li a:hover { color: #ffffff; background-color: #5F2DED; } .footer__shape { width: 350px; height: 350px; background-color: rgba(95, 45, 237, 0.12); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; z-index: -1; position: absolute; bottom: 67px; left: 0; left: 0; margin-left: -247px; -webkit-animation: circleAnimation 7s linear infinite; animation: circleAnimation 7s linear infinite; } .footer__shape-icon { z-index: 1; } .footer__shape-icon img { position: absolute; z-index: -1; } .footer__shape-icon img.shape1 { top: 0; left: 42px; animation: animationFramesOne 35s alternate infinite linear; -webkit-animation: animationFramesOne 35s alternate infinite linear; } .footer__shape-icon img.shape2 { top: 180px; left: 120px; animation: animationFramesTwo 35s alternate infinite linear; -webkit-animation: animationFramesTwo 35s alternate infinite linear; } .footer__shape-icon img.shape3 { top: 0; right: 120px; animation: animationFramesOne 35s alternate infinite linear; -webkit-animation: animationFramesOne 35s alternate infinite linear; } .footer__shape-icon img.shape4 { top: 200px; right: 125px; animation: animationFramesFour 35s alternate infinite linear; -webkit-animation: animationFramesFour 35s alternate infinite linear; } .footer__shape-icon img.shape5 { bottom: 150px; right: 140px; animation: animationFramesFive 35s alternate infinite linear; -webkit-animation: animationFramesFive 35s alternate infinite linear; } .footer__copyright p { font-size: 18px; font-weight: 500; color: #1E1A1A; } .footer__copyright p a { color: #5F2DED; } .sl-tab-nav { display: flex; margin-bottom: 90px; left: 0; right: 0; position: relative; z-index: 2; } .sl-tab-nav > ul { display: flex; justify-content: center; border: 1px solid #E2D9FC; left: 0; right: 0; margin: auto; position: relative; text-align: center; border-radius: 60px; } .sl-tab-nav > ul .nav-item .nav-link { border: 0; padding: 20px 50px; border-radius: 60px; } .sl-tab-nav > ul .nav-item .nav-link.active { background-color: #fff; } .sl-tab-nav > ul .nav-item .nav-link .icon { width: 57px; height: 57px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 8px rgba(24, 42, 78, 0.1); left: 0; right: 0; position: relative; margin: auto; margin-bottom: 13px; } .sl-tab-nav > ul .nav-item .nav-link h5 { font-size: 16px; color: #1A1616; font-weight: 700; } .sl-tab-section { position: relative; z-index: 1; } .sl-tab-img-wrap { z-index: 1; margin-left: -300px; } .sl-tab-img-shape { position: absolute; top: -146px; left: 0; z-index: -1; } .sl-tab-info-item { position: relative; margin-left: 20px; } .sl-tab-info-item:not(:last-child) { margin-bottom: 10px; } .sl-tab-info-item .icon { position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } .sl-tab-info-item .icon::before { width: 60px; height: 40px; border: 1px solid #F7C6D0; display: flex; align-items: center; justify-content: center; border-radius: 21px; -webkit-border-radius: 21px; -moz-border-radius: 21px; -ms-border-radius: 21px; -o-border-radius: 21px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #F5EDF6; z-index: -1; content: ""; position: absolute; top: -4px; left: -20px; } .sl-tab-info-item .content { padding: 30px; padding-left: 47px; border: 1px solid transparent; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; display: inline-block; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .sl-tab-info-item:hover .content, .sl-tab-info-item.active .content { background-color: #fff; border: 1px solid #E2D9FC; } .sl-tab-info-item .content:hover { border-color: #E2D9FC; } .sl-tab-info-item .content h3 { font-size: 21px; margin-bottom: 15px; } @media (max-width: 767px) { .sl-tab-info-item .content h3 { font-size: 18px; } } .sl-tab-info-item:nth-child(2) .icon::before { border: 1px solid #E2D9FC; background-color: #F4F6FE; } .sl-tab-info-item:nth-child(3) .icon::before { border-color: #E2D9FC; background-color: #F2F1FE; } .sl-tab-info-item .text { font-size: 16px; color: #677294; } /* responsive */ @media only screen and (min-width: 1200px) and (max-width: 1500px) { .sl-banner-img2 { right: 244px; max-width: 250px; } .sl-banner-img3 { right: 30px; max-width: 250px; } .sl-banner-img { right: 8px; max-width: 788px; } .sl-wca-images { margin-left: -50px; } .sl-wca-images .sl-img3 { bottom: -122px; max-width: 400px; } .sl-tab-img-wrap { margin-left: 0; } } @media (max-width: 1199px) { .sl-banner-img { right: 0; max-width: 650px; } .sl-banner-img3 { right: 4px; } .sl-banner-list { top: 0; } .sl-info-content { padding-left: 0; } .sl-banner-img2 { right: 0; top: 104px; } .sl-banner-img3 { top: 356px; } .sl-wca-wrap::before { display: none; } .sl-wca-images { margin-left: 0; } .sl-wca-images .sl-img4 { right: -38px; max-width: 300px; } .sl-wca-images .sl-img3 { bottom: -126px; left: -60px; max-width: 380px; } .sl-counter-item:not(:last-child) { margin-right: 40px; } .sl-counter-single:not(:last-child) { margin-right: 20px; } .sl-banner-content .title { font-size: 40px; } .sl-sec-title .title { font-size: 34px; } .sl-pricing-count img { left: 37px; } } @media (max-width: 991px) { .sl-banner-img { right: 0; max-width: 580px; } .sl-banner-img2 { right: 0; top: 104px; max-width: 190px; } .sl-banner-img3 { top: 356px; max-width: 200px; } .sl-banner-list { margin-top: 30px; } .sl-banner-content .title { font-size: 34px; } .sl-banner-content .title > span::before { bottom: 5px; } .sl-feature-col:nth-child(2)::before, .sl-feature-col:nth-child(2)::after { display: none; } .sl-wca-wrap::before { display: none; } .sl-wca-images { margin-left: 0; } .sl-wca-images .sl-img3 { bottom: -51px; left: -30px; } .sl-wca-shape { bottom: -10px; } .sl-pricing-count img { left: 196px; } .sl-pricing-img { margin-left: 0; } .sl-tab-img-wrap { margin-left: 0; margin-bottom: 80px; } .sl-tab-nav { margin-bottom: 125px; } .sl-tab-img-shape { top: -75px; } .sl-pricing-wrap .nav-tabs .nav-item { margin-bottom: 0 !important; } } @media (max-width: 767px) { .sl-banner-img2, .sl-banner-img3, .sl-banner-icon1, .sl-banner-icon2, .sl-banner-icon3 { display: none; } .sl-banner-img { bottom: -143px; } .sl-header .header__button .sl-btn { display: none; } .sl-sec-title .title { font-size: 24px; } .sl-sec-title .title span::before { bottom: 3px; left: 0px; height: 3px; } .sl-feature-col::before, .sl-feature-col::after { display: none; } .sl-pricing-count img { top: -10px; left: 0; } .sl-pricing-nav { position: unset; margin-bottom: 20px; } .sl-pricing-nav .nav-tabs .nav-item { margin-bottom: 0; } .sl-wca-shape { display: none; } .sl-info-icons .icon2, .sl-info-icons .icon4 { display: none; } .sl-feature-col::after { display: none !important; } }