.homepage {
background-color: #1b1845;
color: white;
position: relative;
}
.homepage__content {
position: relative;
z-index: 1;
}
.homepage__textAboveTitle {
font-size: 2rem;
line-height: 2.8rem;
font-weight: 700;
color: #b6ff00;
}
.homepage__textAboveTitle--darker {
color: #91ca04;
}
@media (max-width: 991px) {
.homepage__textAboveTitle {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
@media (max-width: 650px) {
.homepage__textAboveTitle {
font-size: 1.4rem;
line-height: 2rem;
}
}
.first {
padding: 15.7rem 0;
position: relative;
}
.first .overlay {
background: #1b1845;
width: 100vw;
height: 100vh;
}
.first .light {
position: absolute;
width: 100%;
height: 100%;
}
@media (max-width: 991px) {
.first {
padding: 5.4rem 0;
}
}
@media (max-width: 650px) {
.first {
padding: 3.2rem 0;
}
}
.first__wrapper {
gap: 3.4rem;
max-width: 50%;
padding-right: 10rem;
}
@media (max-width: 991px) {
.first__wrapper {
gap: 3.2rem;
padding-right: 6rem;
}
}
@media (max-width: 767px) {
.first__wrapper {
padding-right: 0;
gap: 0;
max-width: 100%;
}
}
.first__top {
gap: 3.2rem;
}
@media (max-width: 650px) {
.first__top {
gap: 2.4rem;
max-width: 100%;
}
}
.first__title {
width: 100%;
}
.first__title strong {
color: #b6ff00;
}
.first__title h1 {
font-size: 4.8rem;
line-height: 5.6rem;
}
@media (max-width: 991px) {
.first__title h1 {
font-size: 3.6rem;
line-height: 4.8rem;
}
}
@media (max-width: 650px) {
.first__title h1 {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
.first__text {
width: 100%;
}
@media (max-width: 991px) {
.first__text {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
@media (max-width: 650px) {
.first__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.first__image {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.first__image--desktop {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
max-width: 72rem;
transform: translateY(-50%);
}
@media (max-width: 767px) {
.first__image--desktop {
display: none;
}
}
.first__image--mobile {
width: 40rem;
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 768px) {
.first__image--mobile {
display: none;
}
}
.second {
padding: 12.8rem 0 12.8rem;
color: #1b1845;
}
@media (max-width: 991px) {
.second {
padding: 5.6rem 0 5.6rem;
}
}
@media (max-width: 650px) {
.second {
padding: 3.2rem 0 3.2rem;
}
}
.second__top {
gap: 8.8rem;
}
@media (max-width: 991px) {
.second__top {
gap: 4.8rem;
}
}
@media (max-width: 650px) {
.second__top {
gap: 1.6rem;
flex-direction: column;
align-items: flex-start;
}
}
.second__topFlex {
gap: 4rem;
}
@media (max-width: 991px) {
.second__topFlex {
gap: 2.8rem;
}
}
@media (max-width: 650px) {
.second__topFlex {
gap: 1.6rem;
}
}
.second__title strong {
color: #91ca04;
}
@media (max-width: 991px) {
.second__title h2 {
font-size: 2.8rem;
line-height: 3.6rem;
}
}
@media (max-width: 650px) {
.second__title h2 {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
.second__wrapper {
gap: 6.4rem;
}
@media (max-width: 991px) {
.second__wrapper {
gap: 3.2rem;
}
}
@media (max-width: 650px) {
.second__wrapper {
gap: 1.6rem;
}
}
.second__grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.4rem 3.2rem;
}
@media (max-width: 991px) {
.second__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem 2.4rem;
}
}
@media (max-width: 650px) {
.second__grid {
gap: 1.6rem;
}
}
.second__solution {
text-decoration: none;
color: white;
border-radius: 3.2rem;
position: relative;
background: linear-gradient(215.93deg, #2b2268 3.6%, #211b50 59.82%);
padding: 4rem;
overflow: hidden;
}
@media (max-width: 991px) {
.second__solution {
padding: 2.8rem;
gap: 3.6rem;
border-radius: 2.4rem;
}
}
@media (max-width: 650px) {
.second__solution {
padding: 1.2rem 1.6rem 7.6rem 1.6rem;
gap: 2.4rem;
border-radius: 1.6rem;
}
}
.second__solution::before {
content: "";
width: 150%;
height: 150%;
transition: all 0.42s ease-in-out;
right: 0;
bottom: 0;
position: absolute;
background: white;
border-radius: 50%;
transform: translate(15%, 15%) scale(0);
transform-origin: right bottom;
z-index: 1;
}
.second__solution--icon {
max-height: 7.2rem;
max-width: 7.2rem;
}
@media (max-width: 991px) {
.second__solution--icon {
max-height: 5.6rem;
max-width: 5.6rem;
}
}
.second__solution--title {
position: absolute;
top: calc(100% - 4rem);
transform: translateY(-100%);
left: 4rem;
transition: all 0.35s ease-out;
z-index: 2;
}
@media (max-width: 991px) {
.second__solution--title {
left: 2.8rem;
top: calc(100% - 2.8rem);
}
}
@media (max-width: 650px) {
.second__solution--title {
left: 1.6rem;
top: calc(100% - 1.6rem);
font-size: 1.4rem;
line-height: 2rem;
padding-right: 40%;
}
}
.second__solution--description {
position: relative;
opacity: 0;
visibility: hidden;
z-index: -1;
transform: translateY(15px);
transition: all 0.3s ease-in-out;
}
@media (max-width: 650px) {
.second__solution--description {
display: none;
}
}
.second__solution--readMore {
gap: 0.4rem;
display: flex;
padding-top: 3.8rem;
}
@media (min-width: 651px) {
.second__solution:hover::before {
transform: translate(15%, 15%) scale(1);
}
.second__solution:hover .second__solution--description {
opacity: 1;
visibility: visible;
z-index: 1001;
transform: none;
transition-delay: 0.08s;
color: #1b1845;
}
.second__solution:hover .second__solution--title {
top: 4rem;
transform: none;
color: #1b1845;
}
}
@property --start-color1 {
syntax: "<color>";
inherits: false;
initial-value: #f8f8f8;
}
@property --start-color2 {
syntax: "<color>";
inherits: false;
initial-value: #aaaaaa;
}
@property --middle-color1 {
syntax: "<color>";
inherits: false;
initial-value: #000000;
}
@property --end-color {
syntax: "<color>";
inherits: false;
initial-value: #000000;
}
.third {
overflow: hidden;
position: relative;
padding: 15.5rem 0 9.6rem;
color: #1b1845;
background-color: #1b1845;
}
@media (max-width: 991px) {
.third {
padding: 11rem 0 5.6rem;
}
}
@media (max-width: 650px) {
.third {
padding: 6.5rem 0 3.2rem;
}
}
.third__one {
width: 100%;
height: 100%;
transform-origin: center center;
background: conic-gradient(from 180deg at 50% 50%, var(--start-color1) 0deg, var(--start-color2) 0.04deg, var(--middle-color1) 158.02deg, var(--end-color) 358.13deg, var(--start-color1) 360deg);
transition: --start-color1 1.2s, --start-color2 1.2s, --middle-color1 1.2s, --end-color 1.2s;
mix-blend-mode: color-dodge;
transform: matrix(0, 1, 1, 0, 0, 0);
--start-color1: #f8f8f8;
--start-color2: #aaaaaa;
--middle-color1: #818181;
--end-color: #000000;
}
.third__one--left, .third__one--right {
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
min-width: 50%;
max-width: 50%;
height: 110%;
position: absolute;
bottom: 0;
}
@media (max-width: 1199px) {
.third__one--left, .third__one--right {
height: 120%;
min-width: 60%;
max-width: 60%;
}
}
@media (max-width: 991px) {
.third__one--left, .third__one--right {
height: 125%;
min-width: 75%;
max-width: 75%;
}
}
@media (max-width: 650px) {
.third__one--left, .third__one--right {
height: 135%;
min-width: 90%;
max-width: 90%;
}
}
@media (max-width: 430px) {
.third__one--left, .third__one--right {
height: 145%;
}
}
.third__one--right {
left: 50%;
}
.third__one--right > div {
transform: rotate(90deg);
}
.third__one--left {
right: 50%;
}
.third .container {
position: relative;
z-index: 4;
}
.third__wrapper {
gap: 22rem;
}
@media (max-width: 991px) {
.third__wrapper {
gap: 17rem;
}
}
@media (max-width: 650px) {
.third__wrapper {
gap: 12rem;
}
}
.third__content {
gap: 4rem;
}
@media (max-width: 991px) {
.third__content {
gap: 2.4rem;
}
}
@media (max-width: 650px) {
.third__content {
gap: 1.6rem;
}
}
.third__image {
max-height: 12rem;
margin: 0 auto;
max-width: 100%;
}
@media (max-width: 991px) {
.third__image {
max-height: 9rem;
}
}
@media (max-width: 650px) {
.third__image {
max-height: 5.6rem;
}
}
.third__titleText {
grid-template-columns: 1fr 1fr;
gap: 4rem;
color: white;
}
@media (max-width: 991px) {
.third__titleText {
gap: 2.4rem;
}
}
@media (max-width: 650px) {
.third__titleText {
gap: 0.6rem;
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.third__title {
font-size: 5.6rem;
line-height: 6.4rem;
}
}
@media (max-width: 650px) {
.third__title {
font-size: 3.2rem;
line-height: 4rem;
}
}
@media (max-width: 991px) {
.third__text {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
@media (max-width: 650px) {
.third__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.third__ctaWrapper {
max-width: -moz-fit-content;
max-width: fit-content;
}
.fourth {
padding: 12.8rem 0;
color: #1b1845;
overflow: hidden;
}
@media (max-width: 991px) {
.fourth {
padding: 5.6rem 0;
}
}
@media (max-width: 650px) {
.fourth {
padding: 3.2rem 0;
}
}
.fourth__wrapper {
gap: 4.8rem;
}
@media (max-width: 991px) {
.fourth__wrapper {
gap: 3.2rem;
}
}
@media (max-width: 650px) {
.fourth__wrapper {
gap: 1.6rem;
}
}
.fourth .swiper-slide {
height: auto !important;
display: grid !important;
place-items: center !important;
}
.fourth__title {
letter-spacing: 0.4em;
padding: 0 1.6rem;
}
@media (max-width: 650px) {
.fourth__title {
font-size: 10px;
line-height: 14px;
}
}
.fourth__swipers {
gap: 6rem;
}
@media (max-width: 991px) {
.fourth__swipers {
gap: 4.2rem;
}
}
@media (max-width: 650px) {
.fourth__swipers {
gap: 2.4rem;
}
}
.fourth .swiper {
max-width: 100% !important;
}
.fourth .swiper-wrapper {
transition-timing-function: linear !important;
}
.fourth .swiper2 .swiper-slide {
transform: translateX(56%);
}
.fourth__image {
filter: grayscale(100%);
transition: all 0.25s ease-in-out;
opacity: 40%;
max-height: 3.2rem;
}
@media (min-width: 651px) {
.fourth__image:hover {
filter: none;
opacity: 1;
}
}
.fifth {
padding-top: 19.2rem;
overflow: hidden;
}
@media (max-width: 991px) {
.fifth {
padding-top: 5.6rem;
}
}
@media (max-width: 650px) {
.fifth {
padding-top: 3.2rem;
}
}
.fifth__left {
gap: 2.4rem;
}
@media (max-width: 991px) {
.fifth__left {
gap: 2rem;
}
}
@media (max-width: 650px) {
.fifth__left {
gap: 1.6rem;
align-items: center;
}
}
@media (max-width: 991px) {
.fifth__title {
font-size: 4.8rem;
line-height: 5.6rem;
}
}
@media (max-width: 650px) {
.fifth__title {
font-size: 2.4rem;
line-height: 3.2rem;
text-align: center;
}
}
@media (max-width: 650px) {
.fifth .homepage__textAboveTitle {
text-align: center;
}
}
.fifth__categories {
grid-template-columns: 1fr 1fr;
gap: 1.6rem 3.2rem;
padding-bottom: 2.4rem;
}
@media (max-width: 650px) {
.fifth__textAboveTestimonialsCategories {
padding-top: 0.8rem;
}
}
.fifth__category {
gap: 1.2rem;
cursor: pointer;
}
@media (max-width: 991px) {
.fifth__category {
font-size: 1.4rem;
line-height: 2rem;
gap: 1rem;
}
}
@media (max-width: 650px) {
.fifth__category {
font-size: 1.2rem;
line-height: 1.8rem;
gap: 0.8rem;
}
}
.fifth__category--box {
display: block;
max-width: 2.6rem;
min-width: 2.6rem;
max-height: 2.6rem;
min-height: 2.6rem;
background-color: #312e62;
background-size: 2.6rem;
border-radius: 7px;
border: 2px solid #312e62;
transition: all 0.25s ease-in-out;
}
.fifth__category.active .fifth__category--box {
background: transparent url(//innetworktech.com/wp-content/themes/innet/icons/checkbox-checked.svg) no-repeat center;
background-size: 2.6rem;
border-color: #b6ff00;
}
@media (min-width: 651px) {
.fifth__category:not(.active):hover .fifth__category--box {
border-color: #b6ff00;
background-color: transparent;
}
}
.fifth__grid {
display: flex;
align-items: center;
gap: 11rem;
}
@media (max-width: 991px) {
.fifth__grid {
gap: 6.4rem;
flex-direction: column;
}
}
@media (max-width: 650px) {
.fifth__grid {
gap: 2.4rem;
}
}
.fifth__left {
max-width: 45%;
min-width: 45%;
}
@media (max-width: 991px) {
.fifth__left {
max-width: 100%;
min-width: 100%;
}
}
.fifth__right {
max-width: 50%;
border-radius: 3.2rem;
background: linear-gradient(215.93deg, #271f5c 3.6%, #211c51 59.82%);
padding: 8rem;
}
@media (max-width: 991px) {
.fifth__right {
max-width: 100%;
min-width: 100%;
border-radius: 2.4rem;
padding: 4rem;
}
}
@media (max-width: 650px) {
.fifth__right {
padding: 1.6rem 1.2rem;
border-radius: 1.6rem;
}
}
.fifth__slider {
gap: 4rem;
position: relative;
}
.fifth__slider--top {
padding-bottom: 4rem;
}
@media (max-width: 991px) {
.fifth__slider--top {
padding-bottom: 2.4rem;
}
.fifth__slider--top img {
max-height: 2.4rem;
}
}
@media (max-width: 650px) {
.fifth__slider--top {
padding-bottom: 1.6rem;
}
.fifth__slider--top img {
max-height: 1.8rem;
}
}
.fifth__slider--wrapper {
padding: 4rem 0 9.2rem;
}
.fifth__slider--count {
color: #b6ff00;
}
.fifth__slider--total, .fifth__slider--topCount {
color: #5b5887;
}
@media (max-width: 991px) {
.fifth__slider--total, .fifth__slider--topCount {
font-size: 1.4rem;
line-height: 2rem;
}
}
@media (max-width: 650px) {
.fifth__slider--total, .fifth__slider--topCount {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.fifth__slide {
gap: 9.2rem;
}
@media (max-width: 991px) {
.fifth__slide {
gap: 4.8rem;
}
}
@media (max-width: 650px) {
.fifth__slide {
gap: 2.4rem;
}
}
.fifth__slide--bottom {
gap: 1.6rem;
padding-right: 15rem;
}
@media (max-width: 991px) {
.fifth__slide--bottom {
gap: 1.2rem;
padding-right: 10rem;
}
}
@media (max-width: 650px) {
.fifth__slide--bottom {
gap: 0.8rem;
padding-right: 6rem;
}
}
.fifth__slide--image {
max-width: 6.4rem;
max-height: 6.4rem;
border-radius: 1.6rem;
}
@media (max-width: 991px) {
.fifth__slide--image {
max-width: 4.8rem;
max-height: 4.8rem;
border-radius: 1.2rem;
}
}
@media (max-width: 650px) {
.fifth__slide--image {
max-width: 4rem;
max-height: 4rem;
border-radius: 0.8rem;
}
}
.fifth__slide--data {
gap: 0.6rem;
}
@media (max-width: 991px) {
.fifth__slide--data {
gap: 0.4rem;
}
}
@media (max-width: 650px) {
.fifth__slide--data {
gap: 0;
}
}
@media (max-width: 991px) {
.fifth__slide--date {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
@media (max-width: 650px) {
.fifth__slide--date {
font-size: 1rem;
line-height: 1.6rem;
}
}
.fifth__slide--name {
color: #b6ff00;
}
@media (max-width: 991px) {
.fifth__slide--name {
font-size: 1.4rem;
line-height: 2rem;
}
}
@media (max-width: 650px) {
.fifth__slide--name {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
@media (max-width: 991px) {
.fifth__slide--text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.fifth__slide--text {
font-size: 1.4rem;
line-height: 2rem;
}
}
.fifth__swiperNav {
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
}
.fifth__swiperNav--next {
transform: rotate(180deg);
}
.fifth__swiperNav img {
cursor: pointer;
opacity: 0.7;
transition: opacity 0.25s ease-out;
min-height: 2.4rem;
}
@media (min-width: 651px) {
.fifth__swiperNav img:not(.swiper-button-disabled):hover {
opacity: 1;
}
}
.fifth__swiperNav img.swiper-button-disabled {
opacity: 0.4;
}
@media (max-width: 991px) {
.fifth__swiperNav img {
max-height: 4.8rem;
}
}
@media (max-width: 650px) {
.fifth__swiperNav img {
max-height: 3.2rem;
}
}
.fifth .swiper-slide.hidden {
display: none !important;
}
.fifth__mobile {
max-width: -moz-fit-content;
max-width: fit-content;
margin-top: 2.4rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 651px) {
.fifth__mobile {
display: none;
}
}
@media (max-width: 650px) {
.fifth__desktop {
display: none;
}
}
.sixth {
padding: 19.2rem 0;
}
@media (max-width: 991px) {
.sixth {
padding: 5.6rem 0;
}
}
@media (max-width: 650px) {
.sixth {
padding: 3.2rem 0;
}
}
.sixth__wrapper {
gap: 4rem;
}
@media (max-width: 991px) {
.sixth__wrapper {
gap: 2.8rem;
}
}
@media (max-width: 650px) {
.sixth__wrapper {
gap: 1.6rem;
}
}
.sixth__top {
gap: 7rem;
}
@media (max-width: 991px) {
.sixth__top {
gap: 4.8rem;
}
}
@media (max-width: 650px) {
.sixth__top {
justify-content: center;
}
}
@media (max-width: 650px) {
.sixth .homepage__textAboveTitle {
text-align: center;
}
}
.sixth__grid {
padding-top: 5.6rem;
grid-template-columns: 1fr 1fr 1fr;
gap: 3.2rem;
}
@media (max-width: 991px) {
.sixth__grid {
gap: 2.4rem;
padding-top: 3.8rem;
}
}
@media (max-width: 900px) {
.sixth__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 650px) {
.sixth__grid {
grid-template-columns: 1fr;
padding-top: 2.4rem;
}
}
@media (min-width: 1100px) {
.sixth__highMobile {
display: none;
}
}
@media (max-width: 1099px) {
.sixth__highDesktop {
display: none;
}
}
.sixth__mobile {
margin-top: 3.2rem;
max-width: -moz-fit-content;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 651px) {
.sixth__mobile {
display: none;
}
}
@media (max-width: 650px) {
.sixth__desktop {
display: none;
}
}
@media (max-width: 991px) {
.sixth__title {
font-size: 4.8rem;
line-height: 5.6rem;
}
}
@media (max-width: 650px) {
.sixth__title {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
.cubes {
--Xpos: 50vw;
--Ypos: 50vh;
}
.cubes:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
background: radial-gradient(circle 9em at var(--Xpos) var(--Ypos), rgba(0, 0, 0, 0), rgb(0, 0, 0));
}