*,
*::after,
*::before {
box-sizing: border-box;
}
a {
text-decoration: none;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
html,
body {
margin: 0;
font-size: 62.5%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
input,
button,
textarea {
margin: 0;
}
html,
body,
input,
button,
textarea {
font-family: "Montserrat", system-ui, sans-serif;
color: #1b1845;
}
html {
scroll-behavior: smooth;
}
html,
body {
overflow-x: clip;
}
html.body-lock,
body.body-lock {
overflow-y: clip;
max-height: 100vh;
}
a,
button,
.transition {
transition: all 0.25s ease-in-out;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.inline-flex {
display: inline-flex;
}
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.grid {
display: grid;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.mx-auto {
margin: 0 auto;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-block > * {
color: #1b1845;
}
.text-block > *:not(:last-child) {
margin-bottom: 1.6rem;
}
@media (max-width: 991px) {
.text-block > *:not(:last-child) {
margin-bottom: 1.4rem;
}
}
@media (max-width: 650px) {
.text-block > *:not(:last-child) {
margin-bottom: 1.2rem;
}
}
.text-block h1,
.text-block h2,
.text-block h3,
.text-block h4,
.text-block h5,
.text-block h6 {
font-weight: 700;
margin-top: 4rem;
}
@media (max-width: 991px) {
.text-block h1,
.text-block h2,
.text-block h3,
.text-block h4,
.text-block h5,
.text-block h6 {
margin-top: 3.2rem;
}
}
@media (max-width: 650px) {
.text-block h1,
.text-block h2,
.text-block h3,
.text-block h4,
.text-block h5,
.text-block h6 {
margin-top: 2.4rem;
}
}
.text-block h1 {
font-size: 3.2rem;
line-height: 4rem;
}
.text-block h2 {
font-size: 3rem;
line-height: 3.8rem;
}
.text-block h3 {
font-size: 2.8rem;
line-height: 3.6rem;
}
.text-block h4 {
font-size: 2.6rem;
line-height: 3.4rem;
}
.text-block h5 {
font-size: 2.4rem;
line-height: 3.2rem;
}
@media (max-width: 991px) {
.text-block h5 {
font-size: 2.2rem;
line-height: 3rem;
}
}
@media (max-width: 650px) {
.text-block h5 {
font-size: 1.8rem;
line-height: 2.6rem;
}
}
.text-block h6 {
font-size: 1.8rem;
line-height: 2.6rem;
font-weight: 400;
}
@media (max-width: 650px) {
.text-block h6 {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.text-block p {
font-size: 1.6rem;
line-height: 2.6rem;
}
@media (max-width: 650px) {
.text-block p {
font-size: 1.4rem;
line-height: 2rem;
}
}
.text-block strong {
font-weight: 600;
}
.text-block ul,
.text-block ol {
list-style: none;
font-size: 1.4rem;
line-height: 2rem;
padding: 0;
}
@media (max-width: 650px) {
.text-block ul,
.text-block ol {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.text-block ul li:not(:last-child),
.text-block ol li:not(:last-child) {
margin-bottom: 1.6rem;
}
@media (max-width: 991px) {
.text-block ul li:not(:last-child),
.text-block ol li:not(:last-child) {
margin-bottom: 1.4rem;
}
}
@media (max-width: 650px) {
.text-block ul li:not(:last-child),
.text-block ol li:not(:last-child) {
margin-bottom: 1.2rem;
}
}
.text-block ul li,
.text-block ol li {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding-left: 3.8rem;
position: relative;
}
.text-block ul li br,
.text-block ol li br {
display: none;
}
.text-block ul li > *:is(strong),
.text-block ol li > *:is(strong) {
font-size: 1.6rem;
line-height: 2.4rem;
}
@media (max-width: 650px) {
.text-block ul li > *:is(strong),
.text-block ol li > *:is(strong) {
font-size: 1.4rem;
line-height: 2rem;
}
}
.text-block ul li::before,
.text-block ol li::before {
content: "";
position: absolute;
left: 0.8rem;
top: 0.7rem;
display: block;
width: 1rem;
height: 1rem;
background-color: #7d51fe;
}
@media (max-width: 650px) {
.text-block ul li::before,
.text-block ol li::before {
top: 0.5rem;
}
}
.text-block a {
color: #1b1845;
position: relative;
display: inline-block;
}
.text-block a::before {
content: "";
width: 0;
height: 2px;
bottom: -1px;
background-color: #91ca04;
transition: width 0.25s ease-in-out;
display: block;
position: absolute;
}
@media (min-width: 651px) {
.text-block a:hover::before {
width: 100%;
}
}
.text-block.last-smaller > *:last-child {
font-size: 1.4rem;
line-height: 2rem;
}
@media (max-width: 650px) {
.text-block.last-smaller > *:last-child {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.fw-200 {
font-weight: 200;
}
.fw-300 {
font-weight: 300;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.text-xs {
font-size: 1.2rem;
line-height: 1.8rem;
}
.text-sm {
font-size: 1.4rem;
line-height: 2rem;
}
p,
.text-base {
font-size: 1.6rem;
line-height: 2.4rem;
}
.text-lg {
font-size: 1.8rem;
line-height: 2.6rem;
}
.text-xl {
font-size: 2rem;
line-height: 3.2rem;
}
.text-2xl {
font-size: 2.4rem;
line-height: 3.2rem;
}
h5,
.h5 {
font-size: 2.4rem;
line-height: 3.2rem;
font-weight: 500;
}
h4,
.h4 {
font-size: 3.2rem;
line-height: 4rem;
font-weight: 700;
}
h3,
.h3 {
font-size: 4rem;
line-height: 4.8rem;
font-weight: 700;
}
h2,
.h2 {
font-size: 4.8rem;
line-height: 5.6rem;
font-weight: 700;
}
h1,
.h1 {
font-size: 7.2rem;
line-height: 8rem;
}
.container {
max-width: 1248px;
margin: 0 auto;
padding: 0 1.6rem;
}
a.hoverWithLine {
position: relative;
display: inline-block;
max-width: -moz-fit-content;
max-width: fit-content;
}
a.hoverWithLine::before {
content: "";
width: 0;
height: 2px;
bottom: -1px;
background-color: #91ca04;
transition: width 0.25s ease-in-out;
display: block;
position: absolute;
}
@media (min-width: 651px) {
a.hoverWithLine:hover::before {
width: 100%;
}
}
.cta {
all: unset;
display: block;
cursor: pointer;
color: white !important;
background-color: #7d51fe;
border-radius: 9999rem;
font-size: 1.4rem;
line-height: 2rem;
transition: all 0.42s ease-in-out;
position: relative;
font-weight: 600;
overflow: hidden;
min-width: -moz-fit-content;
min-width: fit-content;
}
.cta--transparent {
background-color: transparent;
border-radius: 0;
overflow: visible;
font-size: 1.8rem;
line-height: 2.6rem;
}
@media (max-width: 650px) {
.cta--transparent {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (min-width: 651px) {
.cta--transparent:hover span::before {
width: 100%;
}
}
.cta--transparent span {
position: relative;
display: inline-block;
max-width: -moz-fit-content;
max-width: fit-content;
}
.cta--transparent span::before {
content: "";
width: 0;
height: 2px;
bottom: -1px;
background-color: #91ca04;
transition: width 0.25s ease-in-out;
display: block;
position: absolute;
}
.cta__inner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.6rem 7.4rem 1.6rem 4rem;
position: relative;
z-index: 2;
}
.cta--transparent .cta__inner {
padding: 0 4.4rem 0 0;
gap: 0.4rem;
}
.cta__arrow {
display: block;
width: 2.4rem;
height: 2.4rem;
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-green-north-east-new.svg) no-repeat center;
background-size: 2.4rem;
transition: all 0.42s ease-out;
position: absolute;
right: 4rem;
top: 50%;
transform: translateY(-50%);
}
.cta--transparent .cta__arrow {
right: 0.4rem;
background: none;
}
.cta--transparent .cta__arrow--inner {
display: block;
width: 100%;
height: 100%;
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-green-north-east-new.svg) no-repeat center;
background-size: 2.4rem;
transition: all 0.42s ease-out;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.cta--transparent .cta__arrow::before {
content: "";
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: #b6ff00;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
z-index: 1;
transition: all 0.35s ease-in-out;
}
.cta::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 150%;
height: 400%;
border-radius: 50%;
z-index: 1;
background-color: #b6ff00;
transition: all 0.42s ease-in-out;
transform: translate(20%, 20%) scale(0);
transform-origin: right bottom;
}
@media (min-width: 651px) {
.cta:not([disabled]):hover {
color: #1b1845 !important;
}
.cta:not([disabled]):hover .cta__inner {
gap: 1.2rem;
}
.cta:not([disabled]):hover .cta__arrow {
transform: rotate(45deg) translate(-25%, -50%);
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-east-new.svg) no-repeat center;
background-size: 2.4rem;
}
.cta:not([disabled]):hover::before {
transform: translate(30%, 30%) scale(1);
}
}
.cta--transparent::before {
content: none;
}
@media (min-width: 651px) {
.cta--transparent:not(.cta--transparent:disabled):hover {
color: white !important;
}
.cta--transparent:not(.cta--transparent:disabled):hover .cta__arrow {
background: none !important;
}
.cta--transparent:not(.cta--transparent:disabled):hover .cta__arrow::before {
transform: translate(-50%, -50%);
}
.cta--transparent:not(.cta--transparent:disabled):hover .cta__arrow--inner {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-east-new.svg) no-repeat center;
background-size: 2.4rem;
}
}
.cta--purple {
color: #1b1845 !important;
}
.cta--purple .cta__arrow--inner {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-green-darker-north-east-new.svg) no-repeat center !important;
}
@media (min-width: 651px) {
.cta--purple:not(.cta--purple:disabled):hover {
color: #1b1845 !important;
}
.cta--purple:not(.cta--purple:disabled):hover .cta__arrow::before {
background-color: #91ca04 !important;
}
.cta--purple:not(.cta--purple:disabled):hover .cta__arrow--inner {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/cta-arrow-east-new.svg) no-repeat center !important;
background-size: 2.4rem !important;
}
}
.cta--purple::before {
background-color: #91ca04 !important;
}
.relative {
position: relative;
}
.imageHover {
cursor: pointer;
position: relative;
}
.imageHover .on-hover {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
opacity: 0;
}
@media (min-width: 651px) {
.imageHover:hover .on-hover {
opacity: 1;
}
.imageHover:hover > *:not(.on-hover) {
opacity: 0;
}
}
.header {
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: all 0.3s ease-out;
}
.header.scrolled {
transform: translateY(-100%);
}
.header__relative {
padding: 3.2rem 0;
position: relative;
z-index: 4;
}
@media (max-width: 1199px) {
.header__relative {
padding: 2.4rem 0;
}
}
@media (max-width: 650px) {
.header__relative {
padding: 1.3rem 0;
}
}
.header--dark {
background-color: white;
}
.header--dark a {
color: #1b1845;
}
.header--light {
background-color: #1b1845;
}
.header--light a {
color: white;
}
.header > .container {
max-width: 1360px;
}
@media (max-width: 991px) {
.header__logo {
max-height: 3.2rem;
}
}
@media (max-width: 650px) {
.header__logo {
max-height: 1.8rem;
}
}
@media (max-width: 1199px) {
.header__nav {
display: none;
}
}
.header__navList {
gap: 1.6rem;
list-style: none;
margin: 0;
padding: 0;
}
.header__navList--item {
padding: 1.2rem 1.6rem;
gap: 1.2rem;
}
.header__subMenu {
position: absolute;
left: 0;
bottom: 0;
background-color: #b6ff00;
padding: 0.8rem;
border-radius: 0 0 1.6rem 1.6rem;
transform: translateY(98%);
opacity: 0;
z-index: -1;
visibility: hidden;
width: 100%;
transition: all 0.25s ease-in-out;
gap: 0.8rem;
}
.header__subMenu--item {
padding: 1.6rem 4rem 1.6rem 1.6rem;
color: #1b1845 !important;
font-size: 1.4rem;
font-weight: 600;
line-height: 2rem;
border-radius: 0.8rem;
transition: all 0.25s ease-in-out;
min-width: -moz-max-content;
min-width: max-content;
display: block;
}
.header__subMenu--item:hover {
background-color: #1b1845;
color: white !important;
}
.header a.withChildren {
gap: 1rem;
}
.header li.withChildren {
transition: all 0.25s ease-in-out;
}
.header li.withChildren:not(.detailed) {
position: relative;
border-radius: 1.6rem 1.6rem 0 0;
}
.header li.withChildren.detailed {
border-radius: 999rem;
}
.header__hamburger {
display: block;
width: 2.4rem;
height: 2.4rem;
cursor: pointer;
transition: background 0.25s ease-in-out;
}
@media (min-width: 1200px) {
.header__hamburger {
display: none;
}
}
.header__hamburger--dark {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/menu-closed-dark.svg) no-repeat center;
background-size: cover;
}
.header__hamburger--light {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/menu-closed-light.svg) no-repeat center;
background-size: cover;
}
.header__hamburger.active.header__hamburger--dark {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/menu-open-dark.svg) no-repeat center;
background-size: cover;
}
.header__hamburger.active.header__hamburger--light {
background: url(https://innetworktech.com/wp-content/themes/innet/icons/menu-open-light.svg) no-repeat center;
background-size: cover;
}
.header:not(.scrolled) li.withChildren:hover {
background-color: #b6ff00;
}
.header:not(.scrolled) li.withChildren:hover > a {
color: #1b1845;
}
.header:not(.scrolled) li.withChildren:hover .header__subMenu {
transform: translateY(100%);
opacity: 1;
visibility: visible;
z-index: 1;
}
.header:not(.scrolled) li.withChildren:hover .header__detailedMenu--wrapper {
opacity: 1;
visibility: visible;
z-index: 1;
padding-top: 2.6rem;
}
.header:not(.scrolled) li.withChildren:hover .imageHover .on-hover {
opacity: 1;
}
.header:not(.scrolled) li.withChildren:hover .imageHover > *:not(.on-hover) {
opacity: 0;
}
.header__detailedMenu {
position: relative;
background-color: white;
grid-template-columns: 237fr 273fr 620fr;
border-radius: 3.2rem;
overflow: hidden;
}
.header__detailedMenu--wrapper {
position: absolute;
bottom: 0;
right: 0;
transform: translateY(calc(100% - 0.5rem));
width: 100%;
max-width: 113rem;
overflow: hidden;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
padding-top: 0.5rem;
opacity: 0;
visibility: hidden;
z-index: -1;
transition: all 0.25s ease-out;
}
@media (min-width: 1200px) {
.header__detailedMenu--wrapper {
border-radius: 3.2rem;
}
}
.header__detailedMenu--first {
background-color: #262259;
}
.header__detailedMenu--mainCategory {
padding: 2.4rem;
transition: background-color 0.25s ease-in-out;
gap: 1.5rem;
color: white !important;
}
.header__detailedMenu--mainCategory.active {
background-color: #372d78 !important;
}
.header__detailedMenu--mainCategory img {
max-height: 4rem;
width: auto;
}
.header__detailedMenu--second {
background-color: #edecfb;
height: 100%;
width: 100%;
position: relative;
}
.header__detailedMenu--subCategory {
position: absolute;
padding: 2rem 0.6rem 2rem 1.6rem;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
overscroll-behavior: contain;
transition: all 0.25s ease-out;
gap: 0.8rem;
scrollbar-width: thin;
scrollbar-color: #bebdcd transparent;
}
.header__detailedMenu--subCategory:not(.active) {
opacity: 0;
transform: translateY(2rem);
z-index: -1;
visibility: hidden;
}
.header__detailedMenu--subCategory ::-webkit-scrollbar {
width: 12px;
}
.header__detailedMenu--subCategory ::-webkit-scrollbar-track {
background: transparent;
margin: 0.8rem 0;
}
.header__detailedMenu--subCategory ::-webkit-scrollbar-thumb {
background-color: #bebdcd;
border-radius: 6px;
border: 3px solid transparent;
}
.header__detailedMenu--subCategoryItem {
color: #1b1845 !important;
border-radius: 12rem;
padding: 1.6rem 2.4rem;
}
.header__detailedMenu--subCategoryItem.active {
background-color: white;
}
.header__detailedMenu--subCategoryItem img {
transform: rotate(-90deg);
min-width: 1rem;
}
.header__detailedMenu--third {
width: 100%;
height: 100%;
position: relative;
}
.header__detailedMenu--details {
position: absolute;
padding: 3.2rem 1.2rem 3.2rem 3.2rem;
left: 0;
top: 0;
width: calc(100% - 1.2rem);
height: 100%;
max-height: 100%;
overflow: auto;
gap: 2.4rem;
overscroll-behavior: contain;
transition: all 0.25s ease-out;
scrollbar-width: thin;
scrollbar-color: #bebdcd transparent;
}
.header__detailedMenu--details:not(.active) {
opacity: 0;
transform: translateX(2rem);
z-index: -1;
visibility: hidden;
}
.header__detailedMenu--details--flex {
gap: 1.2rem;
}
.header__detailedMenu--details--partners {
gap: 1.6rem;
grid-template-columns: repeat(4, 1fr);
}
.header__detailedMenu--details--partner {
border-radius: 1.2rem;
border: 0.2rem solid #d1d0de;
transition: border-color 0.25s ease-in-out;
padding: 2rem;
}
.header__detailedMenu--details--partner.dark {
background-color: #1b1845;
border-color: #1b1845;
}
.header__detailedMenu--details--partner:hover {
border-color: #b6ff00;
}
.header__detailedMenu--details--partnerLogo {
max-width: 100%;
width: auto;
max-height: 100%;
}
.header__detailedMenu--details::-webkit-scrollbar {
width: 12px;
}
.header__detailedMenu--details::-webkit-scrollbar-track {
background: transparent;
}
.header__detailedMenu--details::-webkit-scrollbar-thumb {
background-color: #bebdcd;
border-radius: 6px;
border: 3px solid transparent;
}
.header__mobileNavWrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%);
padding: 0 0 3.2rem;
background-color: #1b1845;
height: 100vh;
transition: all 0.25s ease-out;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
@media (min-width: 1200px) {
.header__mobileNavWrapper {
display: none;
}
}
@media (max-width: 1199px) {
.header__mobileNavWrapper {
max-height: calc(100vh - 9.2rem);
}
}
@media (max-width: 991px) {
.header__mobileNavWrapper {
max-height: calc(100vh - 7.9rem);
}
}
@media (max-width: 650px) {
.header__mobileNavWrapper {
max-height: calc(100vh - 5rem);
}
}
.header__mobileNavWrapper:not(.active) {
transform: translate(100%, 100%);
}
.header__mobileNav {
transition: all 0.25s ease-out;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: #1b1845;
height: 100vh;
}
.header__mobileNav .header__detailedMenu--details--partner {
background-color: white;
}
.header__mobileNav .header__detailedMenu--details--partner.dark {
background-color: #1b1845;
border-color: #1b1845;
}
@media (max-width: 1199px) {
.header__mobileNav {
max-height: calc(100vh - 5rem);
}
}
@media (max-width: 991px) {
.header__mobileNav {
max-height: calc(100vh - 5rem);
}
.header__mobileNav .header__detailedMenu--details--partners {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 650px) {
.header__mobileNav {
max-height: calc(100vh - 5rem);
}
.header__mobileNav .header__detailedMenu--details--partners {
grid-template-columns: repeat(2, 1fr);
}
}
.header__mobileNav--first {
z-index: 1;
}
.header__mobileNav--second {
z-index: 2;
}
.header__mobileNav--third {
z-index: 3;
}
.header__mobileNav--third .header__mobileNavListItem:not(.active) {
display: none;
}
.header__mobileNav--fourth {
z-index: 4;
}
.header__mobileNav--fourth .header__mobileNavListItem {
border-bottom: none !important;
}
.header__mobileNav--fourth .header__mobileNavListItem:not(.active) {
display: none;
}
.header__mobileNav--header {
position: relative;
padding: 1.6rem 1.6rem 0.8rem;
}
.header__mobileNav--back {
position: absolute;
top: 1.9rem;
left: 1.6rem;
cursor: pointer;
}
.header__mobileNav--title {
padding: 0 3.2rem;
text-align: center;
color: white;
}
.header__mobileNav:not(.active) {
transform: translate(calc(100% + 1.6rem), 0);
opacity: 0;
}
.header__mobileNavList {
padding: 0 1.6rem;
margin: 0;
}
.header__mobileNavList:not(.active) {
display: none;
}
.header__mobileNavListItem {
padding: 1.6rem 0;
color: white !important;
gap: 1.6rem;
}
.header__mobileNavListItem:not(.no-border):not(:last-child) {
border-bottom: 0.1rem solid #2c294f;
}
.header__mobileNavListItem--toggleInside {
cursor: pointer;
}
.header__mobileNavLast {
padding-top: 0.8rem;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto;
}
.footer {
padding: 19.2rem 0;
position: relative;
z-index: 3;
}
@media (max-width: 991px) {
.footer {
padding: 7.2rem 0;
}
}
@media (max-width: 650px) {
.footer {
padding: 3.2rem 0;
}
}
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: 11rem;
align-items: stretch;
}
@media (max-width: 1099px) {
.footer__grid {
gap: 6.4rem;
}
}
@media (max-width: 991px) {
.footer__grid {
grid-template-columns: 1fr;
gap: 4.8rem;
}
.footer__grid > *:first-child {
order: 2;
}
.footer__grid > *:last-child {
order: 1;
}
}
@media (max-width: 650px) {
.footer__grid {
gap: 3.2rem;
}
}
.footer__left {
padding-top: 2.4rem;
gap: 6.4rem;
}
@media (max-width: 991px) {
.footer__left {
padding-top: 0;
gap: 4rem;
}
}
@media (max-width: 650px) {
.footer__left {
gap: 2.4rem;
}
}
.footer__bottomFlex {
gap: 8rem;
}
@media (max-width: 991px) {
.footer__bottomFlex {
gap: 4rem;
}
}
@media (max-width: 650px) {
.footer__bottomFlex {
gap: 2.4rem;
}
}
.footer__menusGrid {
grid-template-columns: 1fr 1fr;
gap: 3.2rem;
}
.footer__menuItems {
list-style: none;
padding: 0;
gap: 3.2rem;
}
@media (max-width: 991px) {
.footer__menuItems {
gap: 2.4rem;
}
}
@media (max-width: 650px) {
.footer__menuItems {
gap: 1.6rem;
}
}
.footer__menuItem {
max-width: -moz-fit-content;
max-width: fit-content;
display: block;
color: #1b1845;
}
@media (max-width: 650px) {
.footer__menuItem {
font-size: 1.4rem;
line-height: 2rem;
}
}
.footer__subMenu {
padding-top: 1.8rem;
gap: 1.8rem;
}
@media (max-width: 991px) {
.footer__subMenu {
padding-top: 1.3rem;
gap: 1.3rem;
}
}
@media (max-width: 991px) {
.footer__subMenu {
padding-top: 0.8rem;
gap: 0.8rem;
}
}
.footer__subMenuItem {
max-width: -moz-fit-content;
max-width: fit-content;
color: #1b1845;
display: block;
}
@media (max-width: 650px) {
.footer__subMenuItem {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.footer__textsGrid {
grid-template-columns: 1fr 1fr;
gap: 3.2rem;
}
@media (max-width: 991px) {
.footer__textsGrid {
gap: 2.8rem;
}
}
@media (max-width: 650px) {
.footer__textsGrid {
grid-template-columns: 1fr;
gap: 2.4rem;
}
}
.footer__text {
gap: 0.4rem;
}
.footer__textTitle {
color: #8582a9;
}
@media (max-width: 650px) {
.footer__textBlock p {
font-size: 1.4rem;
line-height: 2rem;
}
}
.footer__textBlock a {
color: #1b1845;
position: relative;
display: inline-block;
}
.footer__textBlock a::before {
content: "";
width: 0;
height: 2px;
bottom: -1px;
background-color: #91ca04;
transition: width 0.25s ease-in-out;
display: block;
position: absolute;
}
@media (min-width: 651px) {
.footer__textBlock a:hover::before {
width: 100%;
}
}
.footer__copyright {
gap: 0.4rem;
}
.footer__copyright span {
color: #8582a9;
}
.footer__right {
gap: 2.4rem;
}
@media (max-width: 991px) {
.footer__right {
gap: 1.8rem;
}
}
@media (max-width: 650px) {
.footer__right {
gap: 1.2rem;
}
}
.footer__form {
gap: 3.2rem;
}
@media (max-width: 991px) {
.footer__form {
gap: 2rem;
}
}
@media (max-width: 650px) {
.footer__form {
gap: 1.2rem;
}
}
@media (max-width: 991px) {
.footer__title {
font-size: 4.8rem;
line-height: 5.6rem;
}
}
@media (max-width: 650px) {
.footer__title {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
@media (max-width: 991px) {
.footer__formText {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.footer__formText {
font-size: 1.4rem;
line-height: 2rem;
}
}
.form {
transition: opacity 0.25s ease-in-out;
position: relative;
}
.form__success {
position: absolute;
width: 100%;
top: -0.8rem;
left: 0;
height: calc(100% + 1.6rem);
border-radius: 1.6rem;
background-color: #f6ffde;
z-index: -1;
opacity: 0;
visibility: hidden;
transform: translateY(5%);
transition: all 0.3s ease-out;
}
.form__success--inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 21rem;
gap: 1.4rem;
}
.form__success.active {
z-index: 10;
opacity: 1;
visibility: visible;
transform: none;
}
.form.loading {
opacity: 0.4;
}
.form__inputWrapper {
gap: 3.2rem;
}
@media (max-width: 991px) {
.form__inputWrapper {
gap: 2rem;
}
}
@media (max-width: 650px) {
.form__inputWrapper {
flex-direction: column;
gap: 1.2rem;
}
}
.form__input {
position: relative;
padding: 1.6rem 2rem;
border: 2px solid #edecfb;
border-radius: 1.2rem;
background-color: #edecfb;
display: block;
width: 100%;
z-index: 1;
transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
outline: none !important;
font-size: 1.6rem;
line-height: 2rem;
font-weight: 600;
resize: none;
}
.form__inputFlex {
width: 100%;
}
.form__inputError {
padding-top: 0.4rem;
display: none;
font-size: 1.2rem;
line-height: 1.8rem;
font-weight: 600;
color: #f43053;
}
.form__inputError > div {
gap: 0.4rem;
}
.form__inputContent {
position: relative;
width: 100%;
display: block;
}
@media (min-width: 651px) {
.form__inputContent:hover input,
.form__inputContent:hover textarea {
border-color: #91ca04;
background-color: white;
}
.form__inputContent:hover label {
background-color: white;
}
}
.form input:not(:-moz-placeholder-shown), .form textarea:not(:-moz-placeholder-shown) {
border-color: #91ca04;
background-color: white;
}
.form input:focus, .form input:not(:placeholder-shown),
.form textarea:focus,
.form textarea:not(:placeholder-shown) {
border-color: #91ca04;
background-color: white;
}
.form input:not(:-moz-placeholder-shown) ~ label:not(.optional), .form textarea:not(:-moz-placeholder-shown) ~ label:not(.optional) {
top: 0;
background-color: white;
font-size: 1.2rem;
line-height: 1.8rem;
}
.form input:focus ~ label:not(.optional), .form input:not(:placeholder-shown) ~ label:not(.optional),
.form textarea:focus ~ label:not(.optional),
.form textarea:not(:placeholder-shown) ~ label:not(.optional) {
top: 0;
background-color: white;
font-size: 1.2rem;
line-height: 1.8rem;
}
.form input:not(:-moz-placeholder-shown) ~ label.optional, .form textarea:not(:-moz-placeholder-shown) ~ label.optional {
opacity: 0;
background-color: white;
}
.form input:focus ~ label.optional, .form input:not(:placeholder-shown) ~ label.optional,
.form textarea:focus ~ label.optional,
.form textarea:not(:placeholder-shown) ~ label.optional {
opacity: 0;
background-color: white;
}
.form input.error,
.form textarea.error {
border-color: #f43053 !important;
background-color: white;
}
.form input.error ~ label:not(.optional),
.form textarea.error ~ label:not(.optional) {
background-color: white !important;
}
.form input.error--specific,
.form textarea.error--specific {
color: #f43053 !important;
}
.form label {
position: absolute;
z-index: 2;
font-size: 1.4rem;
line-height: 2rem;
font-weight: 500;
color: #1b1845;
top: 50%;
left: 1.7rem;
transform: translateY(-50%);
cursor: text;
padding-left: 0.5rem;
padding-right: 0.6rem;
background-color: #edecfb;
transition: background-color 0.25s ease-in-out, top 0.2s ease-out, font-size 0.2s ease-out;
}
.form .optional {
position: absolute;
color: #8582a9 !important;
font-style: italic;
right: 2rem;
top: 50%;
transform: translateY(-50%);
left: auto;
cursor: text;
transition: opacity 0.2s ease-out, background-color 0.25s ease-in-out;
}
.form textarea {
height: 18rem;
}
.form textarea ~ label {
top: 2.8rem;
}
.form__bottom {
gap: 3.2rem;
}
@media (max-width: 991px) {
.form__bottom {
gap: 2rem;
}
}
@media (max-width: 650px) {
.form__bottom {
flex-direction: column;
gap: 1.2rem;
align-items: flex-start;
padding-top: 0.4rem;
}
}
.form__bottom a {
color: #1b1845;
}
.form__bottom p {
gap: 0.4rem;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
}
.footer__form--darker.form .form__success {
background-color: #2c2960;
}
.footer__form--darker.form .form__input {
background-color: #2c2960;
border-color: #2c2960;
color: white;
}
.footer__form--darker.form input.error ~ label:not(.optional) {
background-color: transparent !important;
}
.footer__form--darker.form label {
background-color: transparent !important;
color: white;
}
.footer__form--darker.form textarea.error ~ label:not(.optional) {
background-color: transparent !important;
}
.footer__form--darker.form p a {
color: white;
}
.breadcrumbs {
font-family: "Geologica", system-ui, sans-serif;
}
@media (max-width: 650px) {
.breadcrumbs {
display: none;
}
}
.breadcrumbs__items {
gap: 1.2rem;
}
.breadcrumbs__item:is(a) {
color: inherit;
}
.cubes__pointer {
--Xpos: 200vw;
--Ypos: 600vw;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle 30vmax at var(--Xpos) var(--Ypos), transparent, rgba(27, 24, 69, 0.3) 0%, rgb(27, 24, 69) 80%, rgb(27, 24, 69));
}
.cubes__pointer--white {
background: radial-gradient(circle 30vmax at var(--Xpos) var(--Ypos), transparent, rgba(255, 255, 255, 0.3) 0%, rgb(255, 255, 255) 80%, rgb(255, 255, 255));
}
@media (max-width: 1099px) {
.cubes__pointer {
display: none !important;
}
}
.cubes__bg {
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background-size: cover;
}
.cubes__bg--blue {
background: url(https://innetworktech.com/wp-content/themes/innet/images/cubes.svg) repeat center;
}
@media (max-width: 1099px) {
.cubes__bg--blue {
background: rgb(27, 24, 69);
}
}
.cubes__bg--white {
background: url(https://innetworktech.com/wp-content/themes/innet/images/cubes-white.svg) repeat center;
}
@media (max-width: 1099px) {
.cubes__bg--white {
background: white;
}
}
.cubes__parent {
position: relative;
}
.cubes__parent--white {
background-color: white;
}
.spacer {
padding-top: 11.6rem;
}
@media (max-width: 1199px) {
.spacer {
padding-top: 9.2rem;
}
}
@media (max-width: 991px) {
.spacer {
padding-top: 8rem;
}
}
@media (max-width: 650px) {
.spacer {
padding-top: 5rem;
}
}
section {
position: relative;
z-index: 3;
}
.post {
color: white;
text-decoration: none;
gap: 2.4rem;
}
@media (min-width: 651px) {
.post:hover .post--title {
color: #b6ff00;
}
}
@media (max-width: 991px) {
.post {
gap: 1.8rem;
}
}
@media (max-width: 650px) {
.post {
gap: 1.2rem;
}
}
.post--title {
transition: color 0.25s ease-in-out;
}
.post--date {
color: #8582a9;
}
.post--bottom {
gap: 1.6rem;
}
.post--cat {
padding: 0.8rem 2.4rem;
border-radius: 9999rem;
background-color: #232052;
}
.post--inBetween {
gap: 2.4rem;
}
.post--readingTime {
gap: 0.6rem;
color: #b6ff00;
}
.post--image {
border-radius: 2.4rem;
aspect-ratio: 384/216;
}
.post--dark .post--title {
color: #1b1845;
}
.post--dark .post--cat {
color: #1b1845;
}
.post--dark .post--readingTime {
color: #91ca04;
}
@media (min-width: 651px) {
.post--dark:hover .post--title {
color: #91ca04;
}
}
@media (min-width: 1100px) {
.post .highMobile {
display: none;
}
}
@media (max-width: 1099px) {
.post .highDesktop {
display: none;
}
}
.pageContent, .pageContent__richText {
gap: 2.4rem;
}
@media (max-width: 991px) {
.pageContent, .pageContent__richText {
gap: 1.6rem;
}
}
@media (max-width: 650px) {
.pageContent, .pageContent__richText {
gap: 0.8rem;
}
}
@media (max-width: 991px) {
.pageContent__richText h2 {
font-size: 4rem;
line-height: 4.8rem;
}
}
@media (max-width: 650px) {
.pageContent__richText h2 {
font-size: 3.2rem;
line-height: 4rem;
}
}
@media (max-width: 991px) {
.pageContent__richText h3 {
font-size: 3.2rem;
line-height: 4rem;
}
}
@media (max-width: 650px) {
.pageContent__richText h3 {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
@media (max-width: 991px) {
.pageContent__richText h4 {
font-size: 2.8rem;
line-height: 3.6rem;
}
}
@media (max-width: 991px) {
.pageContent__richText h4 {
font-size: 2.4rem;
line-height: 3.2rem;
}
}
.pageContent__richText h5 {
font-weight: 600;
}
@media (max-width: 991px) {
.pageContent__richText h5 {
font-size: 2rem;
line-height: 2.8rem;
}
}
@media (max-width: 650px) {
.pageContent__richText h5 {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.pageContent__richText h6 {
font-size: 2.4rem;
line-height: 3.2rem;
font-weight: 500;
}
@media (max-width: 991px) {
.pageContent__richText h6 {
font-size: 2rem;
line-height: 2.8rem;
}
}
@media (max-width: 650px) {
.pageContent__richText h6 {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.pageContent__richText p {
font-size: 1.8rem;
line-height: 2.6rem;
font-weight: 500;
}
@media (max-width: 991px) {
.pageContent__richText p {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.pageContent__richText p {
font-size: 1.4rem;
line-height: 2rem;
}
}
.pageContent__richText ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
display: flex;
flex-direction: column;
gap: 2.4rem;
}
@media (max-width: 991px) {
.pageContent__richText ul {
font-size: 1.4rem;
line-height: 2rem;
gap: 1.8rem;
}
}
@media (max-width: 650px) {
.pageContent__richText ul {
gap: 1.2rem;
}
}
.pageContent__richText ul li {
position: relative;
padding-left: 3.6rem;
}
@media (max-width: 991px) {
.pageContent__richText ul li {
padding-left: 2.8rem;
}
}
.pageContent__richText ul li::before {
content: "";
position: absolute;
left: 0.8rem;
top: 0.7rem;
border-radius: 50%;
width: 0.8rem;
height: 0.8rem;
background-color: #91ca04;
}
@media (max-width: 991px) {
.pageContent__richText ul li::before {
min-width: 0.7rem;
max-width: 0.7rem;
min-height: 0.7rem;
max-height: 0.7rem;
left: 0.7rem;
top: 0.6rem;
}
}
.pageContent__richText ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2.4rem;
counter-reset: olCounter;
}
@media (max-width: 991px) {
.pageContent__richText ol {
gap: 1.8rem;
}
}
@media (max-width: 650px) {
.pageContent__richText ol {
gap: 0.8rem;
}
}
.pageContent__richText ol li {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
padding-left: 3.6rem;
position: relative;
}
.pageContent__richText ol li strong,
.pageContent__richText ol li b {
font-weight: 600;
font-size: 1.8rem;
line-height: 2.6rem;
margin-bottom: 0.2rem;
}
@media (max-width: 991px) {
.pageContent__richText ol li strong,
.pageContent__richText ol li b {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 991px) {
.pageContent__richText ol li {
font-size: 1.4rem;
line-height: 2rem;
}
}
.pageContent__richText ol li::before {
content: counter(olCounter) "";
counter-increment: olCounter;
position: absolute;
left: 0;
top: 0;
min-width: 2.4rem;
max-width: 2.4rem;
min-height: 2.4rem;
max-height: 2.4rem;
border-radius: 50%;
background-color: #91ca04;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.2rem;
line-height: 1.8rem;
font-weight: 600;
}
.pageContent__image {
border-radius: 2.4rem;
overflow: clip;
max-width: 100%;
min-width: 100%;
height: auto;
}
@media (max-width: 991px) {
.pageContent__image {
gap: 2rem;
}
}
@media (max-width: 650px) {
.pageContent__image {
gap: 1.6rem;
}
}
.pageContent__quote {
border-radius: 2.4rem;
padding: 4.8rem;
background-color: #edecfb;
gap: 2.4rem;
}
@media (max-width: 991px) {
.pageContent__quote {
gap: 2rem;
padding: 2.4rem;
border-radius: 2rem;
}
}
@media (max-width: 650px) {
.pageContent__quote {
gap: 1.6rem;
padding: 1.6rem 1.2rem;
border-radius: 1.6rem;
}
}
.pageContent__quote--wrapper {
padding: 0.8rem 0;
}
@media (max-width: 991px) {
.pageContent__quote--wrapper {
padding: 0.6rem 0;
}
}
@media (max-width: 650px) {
.pageContent__quote--wrapper {
padding: 0.4rem 0;
}
}
.pageContent__quote--icon {
max-height: 2.8rem;
width: auto;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media (max-width: 991px) {
.pageContent__quote--icon {
max-height: 2.4rem;
}
}
@media (max-width: 650px) {
.pageContent__quote--icon {
max-height: 2rem;
}
}
.pageContent__quote--text {
font-style: italic;
}
@media (max-width: 991px) {
.pageContent__quote--text {
font-size: 1.4rem;
line-height: 2rem;
}
}
@media (max-width: 650px) {
.pageContent__quote--text {
font-size: 1.2rem;
line-height: 1.8rem;
}
}
.pageContent__quote--authorWrapper {
gap: 1.2rem;
}
@media (max-width: 991px) {
.pageContent__quote--authorWrapper {
gap: 1rem;
}
}
@media (max-width: 650px) {
.pageContent__quote--authorWrapper {
gap: 0.8rem;
}
}
.pageContent__quote--image {
max-height: 4.8rem;
border-radius: 50%;
overflow: clip;
width: auto;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media (max-width: 991px) {
.pageContent__quote--image {
max-height: 4.4rem;
}
}
@media (max-width: 650px) {
.pageContent__quote--image {
max-height: 4rem;
}
}
.pageContent__quote--author {
gap: 0.2rem;
}
@media (max-width: 650px) {
.pageContent__quote--name {
font-size: 1.4rem;
line-height: 2rem;
}
}
@media (max-width: 650px) {
.pageContent__quote--role {
font-size: 1rem;
line-height: 1.6rem;
}
}
.pageContent__spacer--smaller {
margin-top: -1.6rem;
}
@media (max-width: 991px) {
.pageContent__spacer--smaller {
margin-top: -1rem;
}
}
@media (max-width: 650px) {
.pageContent__spacer--smaller {
margin-top: -0.4rem;
}
}
.pageContent__partners {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1.6rem;
}
@media (max-width: 991px) {
.pageContent__partners {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 650px) {
.pageContent__partners {
grid-template-columns: 1fr 1fr;
}
}
.pageContent__partner {
border-radius: 1.6rem;
border: 2px solid #d1d0de;
transition: border-color 0.25s ease-in-out;
padding: 4rem 4rem;
}
.pageContent__partner.dark {
background-color: #1b1845;
border-color: #1b1845;
}
@media (min-width: 651px) {
.pageContent__partner:hover {
border-color: #91ca04;
}
}
@media (max-width: 991px) {
.pageContent__partner {
border-radius: 1.4rem;
padding: 3.2rem 2.8rem;
}
}
@media (max-width: 650px) {
.pageContent__partner {
border-radius: 1.2rem;
padding: 2.5rem 2rem;
}
}
.pageContent__partner--logo {
max-width: 100%;
width: auto;
height: auto;
max-height: 3.8rem;
}
#wpadminbar {
display: none !important;
}
html {
margin-top: 0 !important;
}