649 lines
12 KiB
CSS
649 lines
12 KiB
CSS
|
/***
|
||
|
|
|
||
|
|
====================================================================
|
||
|
|
Solutions One
|
||
|
|
====================================================================
|
||
|
|
|
||
|
|
***/
|
||
|
|
.solutions-one {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
padding: 120px 0 120px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__carousel {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__carousel.owl-carousel .owl-stage-outer {
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__single {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
background-color: var(--thm-main-bg);
|
||
|
|
padding: 48px 30px 42px;
|
||
|
|
border: 1px solid var(--thm-bdr-color);
|
||
|
|
border-radius: 16px;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__single:hover {
|
||
|
|
border: 1px solid #ACDA49;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__icon {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__icon img {
|
||
|
|
width: auto !important;
|
||
|
|
transition: all 500ms linear;
|
||
|
|
transition-delay: 0.1s;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__single:hover .solutions-one__icon img {
|
||
|
|
transform: scale(0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-top: 24px;
|
||
|
|
margin-bottom: 19px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__title a {
|
||
|
|
color: var(--thm-white);
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__title a:hover {
|
||
|
|
color: var(--thm-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__text {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #ADA7CD;
|
||
|
|
line-height: 22px;
|
||
|
|
margin-bottom: 46px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__btn {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
color: #ADA7CD;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__btn i {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 12px;
|
||
|
|
padding-left: 20px;
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
top: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-one__btn:hover {
|
||
|
|
color: var(--thm-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
/***
|
||
|
|
|
||
|
|
====================================================================
|
||
|
|
Solutions Two
|
||
|
|
====================================================================
|
||
|
|
|
||
|
|
***/
|
||
|
|
.solutions-two {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid var(--thm-bdr-color);
|
||
|
|
background: #12122B;
|
||
|
|
padding: 45px 70px 45px;
|
||
|
|
padding-right: 37px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one:hover {
|
||
|
|
border: 1px solid #ACDA49;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-left {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-right: 87px;
|
||
|
|
margin-top: 19px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__shape-2 {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 203px;
|
||
|
|
right: -11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__shape-2 img {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-title-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-title-box p {
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(--thm-base);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-title-box h3 {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 45px;
|
||
|
|
color: var(--thm-white);
|
||
|
|
margin-top: 14px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-top: 16px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li+li {
|
||
|
|
margin-top: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li .icon {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li .icon i {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 1px solid var(--thm-gradient-color2);
|
||
|
|
border-radius: 50%;
|
||
|
|
font-size: 7px;
|
||
|
|
color: var(--thm-gradient-color2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li .text {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li .text p {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-points li .text p span {
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--thm-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-btn-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-btn {
|
||
|
|
padding: 11px 24px 11px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-right {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-left: -40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-img-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid #3C3C77;
|
||
|
|
background: #1E1E42;
|
||
|
|
padding: 25px 25px 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-img {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-one-img img {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__shape-1 {
|
||
|
|
position: absolute;
|
||
|
|
left: 52px;
|
||
|
|
top: 0;
|
||
|
|
right: 40px;
|
||
|
|
bottom: 0;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__shape-1 img {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-single {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
background-color: #15152E;
|
||
|
|
border: 1px solid #3C3C77;
|
||
|
|
border-radius: 16px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 48px 40px 40px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-single:hover {
|
||
|
|
border: 1px solid #ACDA49;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-top {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-title-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-title-box p {
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(--thm-base);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-title-box h3 {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 45px;
|
||
|
|
color: var(--thm-white);
|
||
|
|
margin-top: 12px;
|
||
|
|
margin-bottom: 21px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
margin-top: 14px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn a {
|
||
|
|
color: var(--thm-gradient-color2);
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn a:hover {
|
||
|
|
color: var(--thm-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn a::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 1px;
|
||
|
|
background-color: var(--thm-gradient-color2);
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn a:hover::before {
|
||
|
|
background-color: var(--thm-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-btn a span {
|
||
|
|
position: relative;
|
||
|
|
margin-left: 20px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-img-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-shape-1 {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-shape-1 img {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-img {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
border-radius: 8px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-img::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 52px;
|
||
|
|
left: 36px;
|
||
|
|
bottom: 28px;
|
||
|
|
right: 31px;
|
||
|
|
background: linear-gradient(103deg, #00E3F2 8.08%, #0000F2 31.54%, #F87D7D 60.38%, #FF2828 89.73%);
|
||
|
|
opacity: 0.35;
|
||
|
|
filter: blur(50px);
|
||
|
|
transform: rotate(151.783deg);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-two-img img {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid var(--thm-bdr-color);
|
||
|
|
background-color: #15152E;
|
||
|
|
padding: 64px 50px 82px;
|
||
|
|
padding-right: 60px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
-webkit-transition: all 500ms ease;
|
||
|
|
transition: all 500ms ease;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three:hover {
|
||
|
|
border: 1px solid #ACDA49;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-shape-1 {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 50px;
|
||
|
|
right: 40px;
|
||
|
|
bottom: 0;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-left {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-top: 54px;
|
||
|
|
margin-right: 22px;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-left:before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -38px;
|
||
|
|
left: 65px;
|
||
|
|
right: -30px;
|
||
|
|
bottom: 45px;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid #4B4B70;
|
||
|
|
background: linear-gradient(180deg, rgba(23, 24, 37, 0.85) 0%, rgba(23, 24, 37, 0.00) 101.72%);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__browser-dot {
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
left: 85px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__browser-dot li {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
height: 10px;
|
||
|
|
width: 10px;
|
||
|
|
background: #F16C7A;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__browser-dot li:nth-child(2) {
|
||
|
|
background: #49C3E8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__browser-dot li:nth-child(3) {
|
||
|
|
background: #FFD160;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__browser-dot li+li {
|
||
|
|
margin-left: 7px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-shape-2 {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 65px;
|
||
|
|
left: 99px;
|
||
|
|
background: linear-gradient(103deg, #00E3F2 8.08%, #0000F2 31.54%, #F87D7D 60.38%, #FF2828 89.73%);
|
||
|
|
opacity: 0.35;
|
||
|
|
filter: blur(50px);
|
||
|
|
width: 439px;
|
||
|
|
height: 350px;
|
||
|
|
transform: rotate(150.217deg);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-left .row {
|
||
|
|
--bs-gutter-x: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row.solutions-two__content-three-img-list {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row.solutions-two__content-three-img-list li {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img-single {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
border-radius: 15px;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
content: "";
|
||
|
|
background-color: rgba(var(--thm-black-rgb), .60);
|
||
|
|
transition: all 700ms ease;
|
||
|
|
transform: translateY(-100%);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img-single:hover .solutions-two__content-three-img:before {
|
||
|
|
transform: translateY(0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img img {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 15px;
|
||
|
|
transition-delay: .1s;
|
||
|
|
transition-timing-function: ease-in-out;
|
||
|
|
transition-duration: .7s;
|
||
|
|
transition-property: all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-img-single:hover .solutions-two__content-three-img img {
|
||
|
|
transform: scale(1.1) rotate(2deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-right {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
margin-left: 58px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-title-box {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-title-box p {
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(--thm-base);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-title-box h3 {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 45px;
|
||
|
|
color: var(--thm-white);
|
||
|
|
margin-top: 12px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-text-1 span {
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--thm-gradient-color2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points-box {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
margin-top: 19px;
|
||
|
|
margin-bottom: 31px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points-2 {
|
||
|
|
margin-left: 55px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points li {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points li+li {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points li .icon {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
top: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points li .icon span {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 18px;
|
||
|
|
color: var(--thm-gray);
|
||
|
|
}
|
||
|
|
|
||
|
|
.solutions-two__content-three-points li .text {
|
||
|
|
margin-left: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***
|
||
|
|
|
||
|
|
====================================================================
|
||
|
|
End
|
||
|
|
====================================================================
|
||
|
|
|
||
|
|
***/
|