@font-face {
font-family: "Sora";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(//arcon.xyz/wp-content/themes/arcon/assets/fonts/sora-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: "Sora";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url(//arcon.xyz/wp-content/themes/arcon/assets/fonts/sora.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --black-gradient: linear-gradient(107deg, #3c3b3b 9.25%, #1b1b1b 71.36%);
--section-gradient: linear-gradient(177deg, #fff 2.45%, #edf6ff 97.53%);
--blue-red-gradient: linear-gradient(53deg,
#8fc3ff 21.4%,
#a984ff 43.99%,
#e6323a 78.36%); --bg-white: #fff;
--bg-black-primary: #1a1a1a;
--bg-black-secondary: #1e1e1e;
--bg-grey1: #ababab;
--bg-grey2: #9f9f9f;
--bg-grey3: #858585;
--bg-grey4: #7d7d7d;
--bg-grey5: #787878;
--bg-light-blue: #d8e5f4;
--bg-arcon-red: #e6323a; --text-black-primary: #0F172A;
--text-black-secondary: #1e1e1e;
--text-white: #ffffff;
--text-light-blue: #d8e5f4;
--text-arcon-red: #e6323a;
--text-grey1: #ababab;
--text-grey2: #939393;  
--text-grey3: #757575;
--text-grey4: #484848;
--text-grey5: #3b3b3b; --border-light-blue: 1px solid var(--bg-light-blue);
.gradient-text {
background: var(--blue-red-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} --spacer-16: 16px;
--spacer-24: 24px;
--spacer-32: 32px;
--spacer-60: 60px;
--spacer-80: 80px;
--spacer-120: 120px; .cta-primary-container {
height: auto;
width: fit-content;
display: inline-flex;
align-items: center;
gap: 0.5rem; border: none; background: var(--bg-white);
color: var(--color-text-light);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-primary-container:focus-visible {
outline: 2px solid var(--bg-black-primary);
outline-offset: 2px;
}
.cta-primary-container:active {
transform: translateY(0);
} .cta-primary__icon {
width: 3rem;
height: 3rem;
border-radius: 29px;
background: var(--bg-black-primary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
flex-shrink: 0;
} .cta-primary__arrow {
width: 1.5rem;
height: 1.5rem;
position: absolute;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-primary__arrow--primary {
transform: translate(0, 0);
}
.cta-primary__arrow--secondary {
transform: translate(-200%, 200%);
}
.cta-primary-container:hover .cta-primary__arrow--primary,
.cta-primary-container:focus-visible .cta-primary__arrow--primary {
transform: translate(200%, -200%);
}
.cta-primary-container:hover .cta-primary__arrow--secondary,
.cta-primary-container:focus-visible .cta-primary__arrow--secondary {
transform: translate(0, 0);
} .cta-primary__text {
margin: 0;
color: var(--text-black-primary);
font-size: 16px;
font-weight: 400;
line-height: 22px;
} @media (max-width: 64rem) {
.cta-primary__icon {
width: 2rem;
height: 2rem;
}
.cta-primary__arrow {
width: 1rem;
height: 1rem;
}
.cta-primary__text {
margin: 0;
color: var(--text-black-primary);
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
} @media (prefers-reduced-motion: reduce) {
.cta-primary-container,
.cta-primary__arrow {
transition: none;
}
.cta-primary-container:hover,
.cta-primary-container:focus-visible {
transform: none;
}
} @media (prefers-contrast: high) {
.cta-primary-container {
border: 2px solid currentColor;
}
} .cta-secondary-container {
display: inline-flex;
align-items: center;
gap: 0.5rem; border: none; background: transparent;
color: var(--color-text-light);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-secondary-container:focus-visible {
outline: 2px solid var(--bg-arcon-red);
outline-offset: 2px;
}
.cta-secondary-container:active {
transform: translateY(0);
} .cta-secondary__icon {
width: 3rem;
height: 3rem;
border-radius: 29px;
background: var(--bg-arcon-red);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
flex-shrink: 0;
} .cta-secondary__arrow {
width: 1.5rem;
height: 1.5rem;
position: absolute;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-secondary__arrow--primary {
transform: translate(0, 0);
}
.cta-secondary__arrow--secondary {
transform: translate(-200%, 200%);
}
.cta-secondary-container:hover .cta-secondary__arrow--primary,
.cta-secondary-container:focus-visible .cta-secondary__arrow--primary {
transform: translate(200%, -200%);
}
.cta-secondary-container:hover .cta-secondary__arrow--secondary,
.cta-secondary-container:focus-visible .cta-secondary__arrow--secondary {
transform: translate(0, 0);
} .cta-secondary__text {
margin: 0;
color: var(--text-white);
font-size: 16px;
font-weight: 400;
line-height: 22px;
} @media (max-width: 64rem) {
.cta-secondary__icon {
width: 2rem;
height: 2rem;
}
.cta-secondary__arrow {
width: 1rem;
height: 1rem;
}
.cta-secondary__text {
margin: 0;
color: var(--text-white);
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
} @media (prefers-reduced-motion: reduce) {
.cta-secondary-container,
.cta-secondary__arrow {
transition: none;
}
.cta-secondary-container:hover,
.cta-secondary-container:focus-visible {
transform: none;
}
} @media (prefers-contrast: high) {
.cta-secondary-container {
border: 2px solid currentColor;
}
} button:focus,
a:focus {
outline: none;
}
}  @media (min-width: 300px) {
.container {
max-width: 100%;
margin-inline: 24px;
}
}
@media (min-width: 640px) {
.container {
max-width: 640px;
margin-inline: auto;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
margin-inline: auto;
}
}
@media (min-width:768px) and (max-width:1024px){
.container{padding-inline:15px;}  
}
@media (min-width: 984px) and (max-width: 1070px) {
.container {
margin-inline: 35px !important;
}
}
@media (min-width: 984px) {
.container {
max-width: 984px;
margin-inline: auto;
}
}
@media (min-width: 1160px) and (max-width: 1200px) {
.container {
margin-inline: 30px !important;
}
}
@media (min-width: 1160px) {
.container {
max-width: 1160px;
margin-inline: auto;
}
} h1 {
font-size: 44px;
font-weight: 400;
line-height: 60px;
letter-spacing: 0;
}
h2 {
font-size: 36px;
font-weight: 400;
line-height: 50px;
letter-spacing: 0;
}
h3 {
font-size: 32px;
font-weight: 400;
line-height: 44px;
letter-spacing: 0;
}
h4 {
font-size: 24px;
font-weight: 400;
line-height: 44px;
letter-spacing: 0;
}
.sub-heading-primary {
font-size: 18px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
}
.sub-heading-secondary {
font-size: 16px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0;
}
.cta-primary {
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0;
font-family: "Sora", sans-serif;
}
.cta-secondary {
font-family: "Sora", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0;
}
.para-primary {
font-size: 16px;
font-weight: 300;
line-height: 28px;
letter-spacing: 0;
}
.para-secondary {
font-size: 14px;
font-weight: 300;
line-height: 22px;
letter-spacing: 0;
}
.eyebrow {
font-size: 14px;
line-height: 20px;
letter-spacing: 1.26px;
color: var(--text-grey1);
margin-bottom: 8px;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
@media (max-width: 1024px) {
h1 {
font-size: 28px;
font-weight: 400;
line-height: 36px;
letter-spacing: 0;
}
h2 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
letter-spacing: 0;
}
h3 {
font-size: 18px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0;
}
h4 {
font-size: 16px;
font-weight: 300;
line-height: 28.8px;
letter-spacing: 0;
}
.sub-heading-primary {
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
}
.sub-heading-secondary {
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0;
}
.cta-primary {
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
}
.cta-secondary {
font-size: 12px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0;
}
.para-primary {
font-size: 14px;
font-weight: 300;
line-height: 22px;
letter-spacing: 0;
}
.para-secondary {
font-size: 12px;
font-weight: 300;
line-height: 20px;
letter-spacing: 0;
}
.eyebrow {
font-size: 12px;
line-height: 18px;
letter-spacing: 1.26px;
color: var(--text-grey1);
}
} [data-aos="opacity"] {
opacity: 0;
scale: 0.5;
transition-property: transform, opacity;
&.aos-animate {
opacity: 1;
scale: 1;
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Sora", sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg-white);
color: var(--text-black-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.3;
}
html {
scroll-behavior: smooth;
} .gradient-text {
background: var(--blue-red-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.scrollBar {
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.desktop {
display: block;
}
.mobile {
display: none;
}
@media screen and (max-width: 1024px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
.lineParent {
overflow: hidden;
} header {
position: relative;
.top-bar {
background-color: #282727;
width: 100%;
height: 40px;
padding: 6px 0;
}
.top-bar-links {
display: flex;
height: 80%;
justify-content: flex-end;
align-items: center;
gap: 30px;
padding: 10px 100px;
@media screen and (max-width: 600px) {
& {
justify-content: center;
}
}
}
.top-bar-link {
color: #d1d1d1;
text-decoration: none;
font-size: 15px;
display: flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease;    
}
.top-bar-link:hover {
color: #ffffff;
}
.header-container {
position: relative; margin-inline: auto;
margin-block: 12px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 100px; .desktop {
display: inline-flex;
}
.mobile {
display: none !important;
}
@media (max-width: 1024px) {
.desktop {
display: none !important;
}
.mobile {
display: inline-flex !important;
}
}
.image-container {
max-height: 50px;
max-width: 150px;
img {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 1024px) {
.image-container {
max-height: 36px;
max-width: 111px;
}
}
.navbar {
--item-width: 0;
--item-offset: 0;
--underline-opacity: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
.nav-items {
position: relative;
display: flex;
height: auto;
width: 100%;
max-width: 750px;
gap: 1.5rem;
color: var(--text-black-primary);
.item {
list-style: none;
cursor: default;
padding-bottom: 15px;
a {
color: inherit;
text-decoration: none;
}
}
}
@media (max-width: 1024px) {
display: none;
}
&::after {
opacity: var(--underline-opacity);
position: absolute;
content: "";
width: var(--item-width);
height: 3px;
background: var(--bg-arcon-red);
left: var(--item-offset);
bottom: -12px;
transition: left 300ms, width 300ms, opacity 100ms linear;
} }
.cta-primary-container { padding: 0px 10px;
a {
button {
.hover-arrow-red {
background: var(--bg-black-primary);
}
}
}
}
@media screen and (max-width: 1024px) {
& {
height: 60px; padding-inline: 24px;
border-bottom: 2px solid var(--bg-white);
background: var(--bg-white);
box-shadow: 0px 4px 8px 0px #F0F7FF;
}
}
}
.navbar-content-container {
position: absolute;
width: 100%;
height: auto;
z-index: 999;
.navbar-content {
position: absolute;
width: 100%;
max-height: 0;
transition: all 500ms ease;
overflow: hidden;
display: flex;
justify-content: center;
align-items: start;
background: var(--bg-black-primary);
column-gap: 15px; .content {
display: flex;
justify-content: start;
align-items: start;
opacity: 0;
width: 100%;
height: 0;
transition: opacity 200ms linear, height 200ms linear;
color: white;
.left-content {
width: 100%;
max-width: 240px;
text-wrap: wrap;
height: auto; padding-top: 50px;
padding-right: 24px; h4 {
color: var(--text-grey1 );
line-height: 22px;
}
p {
color: var(--text-grey1);
margin-top: 20px;
}
.section-tabs {
display: grid;
max-height: calc(var(--count) * 100px);
max-width: 175px;
width: 100%;
grid-template-rows: repeat(var(--count), minmax(0, 1fr));
border-radius: 5px;
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
margin-top: 40px;
}
.gradient-tab {
width: 100%;
height: auto;
margin-block: 12px;
margin-left: 20px;
text-align: start;
cursor: pointer;
p {
margin: 0;
color: var(--text-white);
}
}
.section-tabs::before {
--height: calc((100% / var(--count)));
height: var(--height);
transform: translateY(calc(var(--active) * 97%));
transition: transform 300ms;
z-index: -1;
content: "";
position: absolute;
inset: 0;
border-radius: 5px;
padding: 1px;
background: linear-gradient(53deg,
#8fc3ff 21.4%,
#a984ff 43.99%,
#e6323a 78.36%);
mask: linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.section-tabs::after {
position: absolute;
content: "";
background: linear-gradient(273deg,
#3c3b3b -33.9%,
#1b1b1b 104.28%);
z-index: -2;
width: 100%;
height: 100%;
inset: 0;
--height: calc((100% / var(--count)));
height: var(--height);
transform: translateY(calc(var(--active) * 97%));
transition: transform 300ms;
border-radius: 5px;
padding: 1px;
}
.section-tabs:has(.gradient-tab:nth-child(1)) {
--count: 1;
}
.section-tabs:has(.gradient-tab:nth-child(2)) {
--count: 2;
}
.section-tabs:has(.gradient-tab:nth-child(3)) {
--count: 3;
}
.section-tabs:has(.gradient-tab:nth-child(1).active) {
--active: 0;
}
.section-tabs:has(.gradient-tab:nth-child(2).active) {
--active: 1;
}
.section-tabs:has(.gradient-tab:nth-child(3).active) {
--active: 2;
}
}
.right-content {
width: 100%;
height: auto;
min-height: 222px;
max-height: 570px;
background: var(--bg-black-secondary);
padding-left: 60px;
padding-block: 50px;
color: var(--text-white);
text-decoration: none;
z-index: 2;
ul {
width: fit-content;
height: auto;
display: flex;
flex-direction: column;
gap: 20px;
text-decoration: none;
a {
text-decoration: none;
li {
list-style: none;
color: var(--text-white);
}
}
}
.inner-content {
max-height: 0;
opacity: 0;
width: 100%;
height: auto;
display: flex;
justify-content: start;
align-items: start;
gap: 60px; p {
font-family: Sora;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 22px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-grey1);
}
ul.column {
display: flex;
flex-direction: column;
max-height: 370px;
width: 100%;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
list-style-type: none;
a {
li {
text-decoration: none;
max-width: 250px;
height: auto;
}
}
}
&.active { opacity: 1;
max-height: 570px;
transition: max-height 500ms ease, opacity 500ms ease;
}
}
&::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 50vw;
background-color: var(--bg-black-secondary);
height: 570px;
z-index: -1;
}
}
@media screen and (max-width: 1400px) {
& {
.left-content {
max-width: 210px; padding-right: 24px; }
.right-content {
min-height: 250px;
padding-left: 40px;
.inner-content {
gap: 40px;
ul.column {
max-height: 370px;
gap: 20px;
li {
max-width: 200px;
}
}
}
}
}
}
} &.active {
max-height: 570px; transition: all 500ms ease;
.content {
height: 100%;
width: 100%;
opacity: 1;
transition: opacity 300ms linear, height 300ms linear;
}
}
}
} .hamburger {
display: none;
@media (max-width: 1024px) {
& {
position: relative;
width: 100%;
height: 100%;
display: flex;
#ham_checkbox {
display: none;
&:checked+label {
top: 40%;
}
&:checked+label div:first-child {
top: -6px;
transform: rotateZ(45deg);
}
&:checked+label div:last-child {
left: -4px;
top: -7px;
transform: rotateZ(45deg);
}
&:checked+label div:nth-child(2) {
width: 29px;
top: -5px;
right: 6px;
transform: rotateZ(-45deg);
}
}
label {
position: absolute;
top: 33%;
right: 0; display: block;
width: 25px;
height: 15px; cursor: pointer;
div {
position: relative;
top: 0;
height: 3px;
background-color: #000;
margin-bottom: 5px;
transition: 0.3s ease transform, 0.3s ease top, 0.3s ease width, 0.3s ease right;
border-radius: 2px;
&:first-child {
transform-origin: 0;
}
&:last-child {
margin-bottom: 0;
transform-origin: 19px;
}
&:nth-child(2) {
right: 0;
width: 15px;
}
}
}
}
}
}
.hamburger-navList-container {
position: fixed;
width: 100%;
height: calc(100dvh - 125px); z-index: 99;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
background: var(--bg-black-secondary);
transform: translateX(100%);
transition: transform 0.2s ease;
margin-top:0px;
ul {
width: 100%;
height:100%;
padding-inline: 20px;
padding-top: 6px;
li {
width: 100%;
height: auto;
padding-top: 24px;
padding-bottom: 12px;
border-bottom: 1px solid #3B3B3B;
display: flex;
justify-content: space-between;
align-items: center;
a {
text-decoration: none;
color: var(--text-white);
font-weight: 300;
}
}
}
&.translateLeft {
transform: translateX(0%);
transition: transform 0.2s ease;
}
}
.mobile-nav_contact {
width: 100%;
height: auto;
padding-block: var(--spacer-16);
background: var(--bg-black-primary);
display: flex;
padding-bottom: 30px;
.cta-secondary-container {
width: fit-content;
margin-inline: auto;
}
}
.mobile_content {
.mobile-menu_overlay {
position: fixed;
width: 100%;
height: calc(100dvh - 125px); z-index: 99;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
background: var(--bg-black-secondary);
transform: translateX(100%);
transition: transform 0.2s ease;
.mobile-submenu_top {
width: 100%;
height: 100%;
padding-top: 30px;
padding-inline: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: auto;
.mobile-submenu_header {
width: 100%;
height: auto;
padding-bottom: 12px;
border-bottom: 1px solid #3B3B3B;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-white);
button {
background: transparent;
border: 0;
outline: none;
rotate: 180deg;
}
span {
width: 14px;
height: 14px;
}
}
ul {
padding-top: var(--spacer-24);
color: var(--text-white);
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 30px;
li {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
text-decoration: none;
text-decoration: none;
font-size: 14px;
line-height: 22px;
font-weight: 300;
&:last-child {
border-bottom: 1px solid #3B3B3B;
padding-bottom: 30px;
}
a {
text-decoration: none;
color: var(--text-white);
}
}
}
}
&.translate {
transform: translateX(0%);
}
}
.mobile_multiple-contents {
width: 100%;
height: auto;
.inner-content {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
background: var(--bg-black-secondary);
transform: translateX(100%);
transition: transform 0.2s ease;
.mobile-submenu_content {
width: 100%;
height: calc(100% - 90px);
overflow: scroll;
.content {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: var(--spacer-16);
margin-top: var(--spacer-24);
padding-bottom: var(--spacer-24);
border-bottom: 1px solid #3B3B3B;
.eyebrow {
color: var(--text-grey4);
}
ul {
padding-top: 0;
margin-left: 12px;
a {
text-decoration: none;
li {
max-width: 200px;
width: 100%;
color: var(--text-white);
}
}
}
}
}
.mobile-nav_contact {
position: absolute;
bottom: 0;
}
&.translate {
transform: translateX(0%);
}
}
}
}
} .tabs {
--indicator-offset: 10px;
--indicator-width: 10px;
position: relative;
display: flex;
gap: 20px;
justify-content: space-between;
width: max-content;
margin: 0 auto;
border-bottom: 3px solid var(--bg-light-blue);
padding-bottom: 16px;
&::after {
position: absolute;
content: "";
width: var(--indicator-width);
height: 3px;
background: var(--blue-red-gradient);
border-radius: 5px;
left: var(--indicator-offset);
bottom: -3px;
transition: left 300ms, width 300ms;
}
}
.tab {
background: var(--bg-black-secondary);
opacity: 0.4;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
outline: none;
border: none;
cursor: pointer; &.active {
background: var(--blue-red-gradient);
opacity: 1;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
} .accordion-container {
width: 100%;
height: auto;
.accordion {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 0;
border-bottom: var(--border-light-blue);
padding-block: 0;
.accordion-header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
padding-block: 20px;
.accordion-title {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
#logo {
width: 32px;
height: 32px;
object-fit: cover;
}
}
.accordion-icon {
width: 16px;
height: 16px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.3s ease, opacity 0.3s ease;
}
&.open .accordion-icon {
transform: rotate(180deg);
}
.accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/plus-red.svg);
}
&.open .accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/minus-red.svg);
}
}
.accordion-content {
max-width: 240px;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
margin-left: 52px;
margin-top: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
.para-secondary {
color: var(--text-grey3);
}
&.open {
max-height: 150px;
margin-bottom: 20px;
margin-top: -12px;
opacity: 1;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
}
.cta-secondary {
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
.accordion-content {
max-width: 100%;
}
}
}
}
.dark-accordion {
width: calc(100% - 48px);
.accordion-container {
height: auto;
.accordion {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 0;
border-bottom: none;
padding-inline: 20px;
border-radius: 12px;
margin-block: 12px;
background-color: var(--bg-black-secondary);
.accordion-header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
.accordion-title {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
#logo {
width: 32px;
height: 32px;
object-fit: cover;
}
}
.accordion-icon {
width: 16px;
height: 16px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.3s ease, opacity 0.3s ease;
}
&.open .accordion-icon {
transform: rotate(180deg);
}
.accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/plus-red.svg);
}
&.open .accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/minus-red.svg);
}
}
.accordion-content {
max-width: 240px;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
margin-left: 0;
margin-top: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
&.open {
max-height: 150px;
margin-top: 0;
opacity: 1;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
}
.para-secondary {
color: var(--text-grey2);
}
.cta-secondary {
text-decoration: underline;
text-underline-offset: 4px;
a {
color: var(--text-white);
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
.accordion-content {
max-width: 100%;
}
}
}
}
} .cta-primary-container {
a {
text-decoration: none;
button {
display: flex;
height: auto;
width: fit-content;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 30px;
background-color: var(--bg-white);
border: none;
outline: none;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
@media (max-width: 1024px) {
button {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
width: fit-content;
height: auto;
border: none;
background-color: transparent;
img {
width: 32px;
height: 32px;
object-fit: cover;
}
}
}
}
.cta-secondary-container {
a {
text-decoration: none;
button {
display: flex;
height: auto;
width: fit-content;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 30px;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
img {
width: 40px;
height: 40px;
object-fit: cover;
}
p {
color: var(--text-white);
}
}
}
@media (max-width: 1024px) {
button {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
width: fit-content;
height: auto;
border: none;
background-color: transparent;
img {
width: 32px;
height: 32px;
object-fit: cover;
}
}
}
} .announcement {
display: none;
@media screen and (max-width: 1024px) {
& {
display: block;
margin-bottom: 40px;
.announcementSwiper {
background-color: var(--bg-black-primary);
.swiper-slide {
display: flex;
width: 100% !important;
min-height: 100%;
height: auto !important;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 40px;
background-color: var(--bg-black-primary);
color: var(--text-white);
p {
text-wrap: nowrap;
}
}
}
}
}
}
.hero-container {
width: 100%;
height: auto;
display: flex;
justify-content: center;
margin-bottom: var(--spacer-120);
padding-top: 80px;
.hero-content {
width: 38.9%;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start; .content-bottom {
width: 100%;
height: auto;
display: flex;
gap: 40px;
.metrics {
width: fit-content;
height: auto;
display: flex;
flex-direction: column; width: 120px;
align-items: start;
.para-secondary {
color: #9D9D9D;
}
}
}
.cta-primary-container {
margin-top: 40px;
}
}
.hero-graphic {
width: 61.11%;
height: auto;
}
@media screen and (max-width: 1024px) {
& {
width: auto;
margin-bottom: 0;
padding-top: 0;
flex-direction: column;
.hero-content {
width: 100%;
flex-direction: column-reverse;
gap: 40px;
.content-bottom {
display: none;
}
.cta-primary-container {
margin-top: 32px;
}
}
}
}
}
.hero-graphic {
width: 100%;
max-width: 700px;
margin-top: 24px;
margin-inline: auto;
margin-top: 24px;
img {
width: 100%;
}
} .privileged-container {
margin-bottom: var(--spacer-120); .desktop {
display: inline-flex;
}
.mobile {
display: none !important;
}
@media (max-width: 1024px) {
.desktop {
display: none !important;
}
.mobile {
display: inline-flex !important;
}
}
.privileged {
display: grid;
max-height: 630px;
height: 100vh;
gap: 1.5rem;
grid-template-columns: minmax(0, 410px) 1fr;
@media (max-width: 1024px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
max-height: 100%;
height: auto;
}
.left-card {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: auto;
border-radius: 20px;
background: var(--section-gradient);
border: var(--border-light-blue);
padding-inline: 35px;
padding-block: 52px;
.top-container {
display: flex;
flex-direction: column; width: 100%;
height: auto;
}
.cta-primary-container {
text-decoration: none;
background: transparent;
button {
display: flex;
height: auto;
width: fit-content;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 30px;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
transition: 0.8s;
.hover-arrow-red {
background: #E6323A;
}
.hover-arrow-black {
background: #000;
}
.hover-arrow-black,
.hover-arrow-red {
border-radius: 29px;
overflow: hidden;
width: 48px;
height: 48px;
position: relative;
padding: 12px;
.icon-contain {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.arrow1 {
position: absolute;
left: 0;
top: 0;
transition: 0.8s;
}
.arrow2 {
position: absolute;
left: -85%;
top: 100%;
transition: 0.8s;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-primary {
text-align: start;
}
&:hover {
.hover-arrow-black,
.hover-arrow-red {
.arrow1 {
top: -100%;
left: 85%;
}
.arrow2 {
top: 0;
left: 0;
}
}
}
}
@media (max-width: 1024px) {
& {
button {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
width: fit-content;
height: auto;
border: none;
background-color: transparent;
.hover-arrow-black,
.hover-arrow-red {
width: 32px;
height: 32px;
padding: 6px;
}
}
}
}
}
}
.demo-form-container {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 99;
.demo-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
max-width: 625px;
width: 100%;
height: 100%;
min-height: 450px;
max-height: 570px;
background: var(--section-gradient);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-radius: 16px;
padding: 40px;
.form-header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
h4 {
font-size: 18px;
font-weight: 400;
line-height: 26px;
}
.close_popup {
width: 28px;
height: 28px;
cursor: pointer;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
iframe { height: 100%; }
}
&.active {
display: block;
opacity: 1;
transition: opacity 0.3s ease;
}
@media screen and (max-width: 1024px) {
& {
.demo-form {
width: 95%;
padding: 40px 20px;
.form-header {
.close_popup {
width: 20px;
height: 20px;
}
}
}
}
}
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
.right-card {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
border-radius: 20px;
background-color: var(--bg-white);
border: var(--border-light-blue);
padding-top: 0;
overflow: hidden;
.lottie-container {
width: 100%;
height: auto;
object-fit: cover;
overflow: hidden;
}
.content {
padding: 16px; .para-primary {
color: var(--text-grey2);
}
}
}
@media screen and (max-width: 1024px) {
& {
grid-template-columns: 1fr; gap: 16px;
}
.right-card {
flex-direction: row;
background: var(--bg-white);
justify-content: space-between;
gap: 20px;
padding: 20px;
.content {
padding: 0;
.para-primary {
color: var(--text-grey4);
margin-top: 4px;
}
}
.right-card-img {
width: fit-content;
height: auto;
img {
width: 34px;
height: 34px;
object-fit: cover;
}
}
}
}
}
@media screen and (max-width: 1024px) {
.left-card {
padding: 0;
margin: 0;
border: 0;
background: none;
}
}
}
@media screen and (max-width: 1025px) {
& {
position: relative;
margin-block: var(--spacer-60);
.privileged-gradient {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(180deg, #FFF 0%, #F4F9FF 54.5%, #FFF 100%);
filter: blur(25px);
z-index: -1;
}
.cta-primary-container {
button {
display: flex;
height: auto;
width: fit-content;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 30px;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
transition: 0.8s;
.hover-arrow-red {
background: #E6323A;
}
.hover-arrow-black {
background: #000;
}
.hover-arrow-black,
.hover-arrow-red {
border-radius: 29px;
overflow: hidden;
width: 32px;
height: 32px;
padding: 6px;
position: relative;
.icon-contain {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.arrow1 {
position: absolute;
left: 0;
top: 0;
transition: 0.8s;
}
.arrow2 {
position: absolute;
left: -85%;
top: 100%;
transition: 0.8s;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-primary {
text-align: start;
}
&:hover {
.hover-arrow-black,
.hover-arrow-red {
.arrow1 {
top: -100%;
left: 85%;
}
.arrow2 {
top: 0;
left: 0;
}
}
}
}
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
& {
.privileged {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
}
}
} .allProducts {
position: relative;
margin-bottom: var(--spacer-120);
display: flex;
flex-direction: column;
gap: 60px;
.sectionTitle {
width: fit-content;
height: auto;
margin: 0 auto;
text-align: center;
max-width: 465px;
}
.section-gradient-bg {
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
z-index: -1;
background: linear-gradient(180deg, #fff 0%, #f4f9ff 54.5%, #fff 100%);
filter: blur(25px);
}
.products-grid-container {
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 272px));
gap: 1.5rem;
@media screen and (max-width: 1024px) {
& {
display: none;
}
}
}
}
.card {
position: relative;
width: 100%;
height: auto;
background: var(--bg-white);
padding: 40px 32px;
border-radius: 20px;
border: var(--border-light-blue);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
cursor: pointer;
transition: all 0.2s ease-in-out;
a {
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
.product-content {
.sub-heading-primary {
color: var(--text-black-primary);
}
}
}
&:hover {
background: var(--section-gradient) padding-box,
var(--blue-red-gradient) border-box;
border-radius: 22px;
border: 1px solid transparent;
transition: all 0.2s ease-in-out;
}
}
.icon {
width: 54px;
height: 54px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.product-content {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
.para-secondary {
color: var(--text-grey4);
}
}
@media screen and (max-width: 1025px) {
& {
gap: var(--spacer-32);
margin-bottom: var(--spacer-60);
.sectionTitle {
text-align: start;
margin: 0;
}
.tabs-mobile-container {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 8px;
.tab-mobile {
width: fit-content;
height: auto;
padding: 12px 20px;
border-radius: 8px;
border: var(--border-light-blue);
background: var(--section-gradient);
transition: color 0.4s ease, border 0.4s ease;
&.cta-primary {
color: var(--text-grey5);
line-height: normal;
}
&.active {
color: var(--text-black-primary);
border: 1px solid var(--bg-black-primary);
transition: color 0.4s ease, border 0.4s ease;
}
}
}
.product-accordion-container {
.accordion {
.accordion-content {
a {
text-decoration: none;
color: var(--text-black-primary);
.cta-secondary {}
}
}
}
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
& {
.sectionTitle {
max-width: 100%;
}
.tabs-mobile-container {
flex-direction: row;
justify-content: start;
}
.product-accordion-container {
.accordion-container {
.accordion {
.accordion-content {
max-width: 100%;
margin-left: 0px;
}
}
}
}
}
}
} .black-bg {
background: var(--bg-black-primary);
color: var(--text-white);
}
.benchmark-section {
padding-block: var(--spacer-120);
display: flex;
flex-direction: column;
gap: 60px;
.sectionTitle {
width: fit-content;
height: auto;
margin: 0 auto;
text-align: center;
max-width: 520px;
h2 {
font-weight: 300;
}
} .Benchmark-reports {
display: grid;
grid-template-columns: minmax(0, 500px) minmax(0, 600px);
gap: 60px;
.report-card {
max-width: 500px;
width: 100%;
max-height: max-content;
border-radius: 20px;
background: var(--bg-black-secondary);
overflow: hidden;
.report-image {
display: block;
width: fit-content;
height: auto;
img {
width: 100%;
height: 100%;
}
}
.report-content {
width: 100%;
height: auto;
padding: 30px;
display: flex;
flex-direction: column;
gap: 0.75rem;
.sub-heading-secondary {
color: var(--bg-arcon-red);
}
.sub-heading-primary {
color: var(--text-white);
}
.report-button {
margin-top: 35px;
}
}
}
.news-cards {
display: flex;
flex-direction: column;
gap: 25px;
max-width: 600px;
.cards {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
border-bottom: 1px solid var(--bg-grey3);
padding-bottom: 25px;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.news-image {
max-width: 200px;
max-height: 140px;
object-fit: cover;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
}
.news-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
}
} @media (max-width: 1024px) {
& {
padding-block: var(--spacer-60);
gap: var(--spacer-32);
}
.sectionTitle {
text-align: left;
margin-inline: 0;
}
.Benchmark-reports {
grid-template-columns: 1fr;
gap: 12px;
.report-card {
max-width: 100%;
.report-image {
display: none;
}
.report-content {
width: 100%;
gap: 0;
.sub-heading-primary {
margin-top: 4px;
}
.report-button {
margin-top: var(--spacer-32);
button {
img {
width: 100%;
height: 100%;
}
}
}
}
}
.news-cards {
gap: 12px;
max-width: 100%;
.cards {
align-items: center;
justify-content: start;
border-bottom: none;
background: var(--bg-black-secondary);
padding: 16px;
border-radius: 10px;
.news-image {
max-width: 112px;
max-height: 112px;
min-height: auto;
img {
margin-block: auto;
width: 100%;
height: 100%;
}
}
.news-content {
gap: 0.5rem;
.para-secondary {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.cta-primary {
text-decoration: underline;
text-underline-offset: 4px;
}
}
}
}
}
}
} .useCase {
position: relative;
width: auto;
height: 1100px;
display: flex;
flex-direction: column;
gap: var(--spacer-60);
overflow: hidden; .sectionTitle {
margin-top: 150px;
text-align: center;
z-index: 1;
.eyebrow {
color: var(--text-grey2);
}
}
.useCase-grid-contain {
position: absolute;
width: 100%;
height: 100%;
}
#useCase-grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-gap: 24px;
overflow: hidden;
height: 1178px;
.grid1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
overflow: auto;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 24px;
.gridCard {
width: 280px;
height: 280px;
opacity: 0.2;
background: linear-gradient(180deg, #171719 27%, #222 100%);
cursor: auto;
}
}
.grid2 {
position: absolute;
top: 304px;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-gap: 24px;
.gridCard {
position: relative;
min-width: 280px;
z-index: 2;
border: 0;
mask: none;
a {
text-decoration: none;
display: flex;
flex-direction: column;
gap: 8px;
.sub-heading-primary {
color: var(--text-white);
}
}
&:hover:not(.exclude) {
background: #222222;
.para-secondary {
color: var(--text-grey1);
}
&::before {
position: absolute;
content: "";
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1px;
border-radius: 22px;
background: linear-gradient(53deg,
#8fc3ff 21.4%,
#a984ff 43.99%,
#e6323a 78.36%);
mask: linear-gradient(#222222 0 0) content-box,
linear-gradient(#222222 0 0) padding-box;
mask-composite: exclude;
transition: background 2000ms ease, mask 2000ms ease;
}
}
}
}
}
.grid3 {
position: absolute;
left: 50%;
bottom: 304px;
transform: translateX(-50%);
overflow: auto;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 24px;
.gridCard {
position: relative;
min-width: 265px;
height: 280px;
z-index: 2;
border: 0;
mask: none;
a {
text-decoration: none;
display: flex;
flex-direction: column;
gap: 8px;
.sub-heading-primary {
color: var(--text-white);
}
}
&:hover:not(.exclude) {
background: #222222;
.para-secondary {
color: var(--text-grey1);
}
&::before {
position: absolute;
content: "";
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1px;
border-radius: 22px;
background: linear-gradient(53deg,
#8fc3ff 21.4%,
#a984ff 43.99%,
#e6323a 78.36%);
mask: linear-gradient(#1e1e1e 0 0) content-box,
linear-gradient(#1e1e1e 0 0) padding-box;
mask-composite: exclude;
transition: background 2000ms ease, mask 2000ms ease;
}
}
}
}
.grid4 {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-gap: 24px;
.gridCard {
width: 280px;
height: 280px;
background: linear-gradient(180deg, #222 0%, #171719 100%);
opacity: 0.2;
cursor: auto;
}
}
.gridCard {
width: 100%;
min-width: 280px;
height: auto;
padding-block: 42px;
padding-inline: 32px;
border-radius: 20px;
background: var(--bg-black-secondary);
color: var(--text-white);
display: flex;
flex-direction: column;
gap: 8px;
transition: background 200ms ease, mask 200ms ease;
.para-secondary {
color: #7D7D7D;
}
&:not(.exclude) {
cursor: pointer;
}
}
@media screen and (max-width: 1024px) {
& {
gap: var(--spacer-32);
padding-block: var(--spacer-60);
height: auto;
overflow: auto;
.sectionTitle {
margin-top: 0;
text-align: left;
}
}
}
} .empowering {
margin-block: var(--spacer-120);
margin-bottom: 60px;
display: flex;
flex-direction: column;
gap: var(--spacer-60); .sectionTitle {
width: fit-content;
height: auto;
margin: 0 auto;
text-align: center;
}
.empowering-swiper-section-desktop {
max-width: 1056px;
width: 100%;
height: auto;
margin-inline: auto;
.swiper {
width: 100%;
height: 100%;
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
min-height: 310px !important;
display: flex;
align-items: start;
justify-content: start;
color: #fff;
border-radius: 10px;
background: linear-gradient(270deg,
rgba(0, 0, 0, 0) 37.03%,
rgba(0, 0, 0, 0.8) 94.08%);
padding: 20px 30px;
.gradient-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
background: linear-gradient(270deg,
rgba(0, 0, 0, 0) 37.03%,
rgba(0, 0, 0, 0.8) 94.08%);
padding: 20px 30px;
}
.slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.slide-content {
width: 100%;
max-width: 405px;
height: auto;
display: flex;
flex-direction: column;
z-index: 10;
.slide-logo {
img {
width: 100%;
height: 100%;
max-width: 143px;
max-height: 45px;
}
}
.slide-desc {
margin-top: 42px;
}
button {
width: fit-content;
height: auto;
background-color: transparent;
outline: none;
border: none;
color: var(--text-white);
margin-top: 20px;
cursor: pointer;
a {
text-decoration: none;
color: #fff;
transition: all 0.4s ease;
}
&:hover {
a {
color: var(--text-arcon-red);
transition: all 0.4s ease;
}
}
}
}
}
}
.toggleButtons {
--indicator-offset: 10px;
--indicator-width: 10px;
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
padding-top: 20px;
margin-top: 30px;
border-top: 1px solid #ccc;
.button {
width: 210px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
outline: none;
border: none;
cursor: pointer;
img {
width: 100%;
height: 100%;
max-width: 122px;
max-height: 32px;
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
}
&.active {
img {
filter: grayscale(0%);
}
}
}
&::before {
position: absolute;
content: "";
width: var(--indicator-width);
height: 3px;
background: var(--blue-red-gradient);
border-radius: 3px;
left: var(--indicator-offset);
top: -2px;
transition: left 300ms, width 300ms;
}
@media screen and (max-width: 1024px) {
& {
display: none;
}
}
}
}
@media screen and (max-width: 1024px) {
& {
margin-block: var(--spacer-60);
gap: var(--spacer-32);
.sectionTitle {
width: 100%;
margin: 0;
text-align: start;
}
}
}
}
@media screen and (max-width: 1024px) {
.empoweringSwiperMobile {
width: 100%;
height: 100%;
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
min-height: 350px !important;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%);
border-radius: 10px;
overflow: hidden !important;
padding: 20px 30px !important;
.slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.slide-content {
position: relative;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
z-index: 2;
.slide-logo {
img {
width: 100%;
height: 100%;
max-width: 143px;
max-height: 45px;
}
}
.slide-desc {
margin-top: 160px;
color: var(--text-white);
}
button {
width: fit-content;
height: auto;
background-color: transparent;
outline: none;
border: none;
color: var(--text-white);
margin-top: 20px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
a {
color: var(--text-white);
}
}
}
}
.swiper-pagination {
position: relative !important;
text-align: start !important;
margin-top: 24px !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0;
margin-right: 20px;
}
.swiper-pagination-bullet {
position: relative;
width: 25px !important;
height: 3px !important;
border-radius: 5px !important;
text-align: left;
margin-right: 20px;
background-color: var(--bg-light-blue) !important;
transition: all 0.2s ease;
opacity: 1 !important;
i {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
height: 3px !important;
border-radius: 5px !important;
background-color: var(--bg-light-blue) !important;
}
b {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
height: 3px !important;
border-radius: 5px !important;
background-color: rgba(17, 17, 17, 1);
}
}
.swiper-pagination-bullet-active {
background-color: var(--bg-light-blue) !important;
width: 68px !important;
height: 3px !important;
transition: all 0.2s ease;
b {
animation-name: countingBar;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
}
}
@keyframes countingBar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
} .knowledge {
margin-top: 60px;
margin-bottom: 120px;
display: flex;
flex-direction: column;
gap: 60px; .sectionTitle {
width: fit-content;
height: auto;
margin: 0 auto;
text-align: center;
} .knowledge-grid-container {
.knowledge-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 1rem;
}
} .card {
width: 100%;
height: 307px;
display: flex;
flex-direction: column;
border-radius: 10px;
border: var(--border-light-blue);
background: var(--bg-white);
overflow: hidden;
.card-img {
max-width: 100%;
max-height: 330px;
margin-inline: auto;
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
overflow: hidden;
transition: all 0.4s ease;
flex-shrink: 0 !important;
img {
width: 100%;
height: 100% !important;
scale: 1;
transition: all 0.4s ease;
}
}
.card-content {
width: 100%;
height: 100% !important;
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between !important;
gap: 12px !important;
p {
color: var(--text-black-primary);
font-weight: 400 !important;
line-height: 26px !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
overflow: hidden !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
}
.cta {
position: relative;
display: inline-block;
text-decoration: none;
color: var(--text-black-primary);
font-size: 0.875rem;
font-weight: normal;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 35%;
height: 0.5px;
background-color: var(--bg-arcon-red);
opacity: 0;
transition: opacity 300ms, transform 300ms;
}
&:hover::after,
&:focus::after {
opacity: 1;
}
}
}
&:hover {
background: var(--section-gradient);
.card-img {
margin-inline: auto;
max-width: 250px;
margin-top: 10px;
margin-bottom: 0 !important;
border-radius: 10px;
img {
scale: 1.3;
}
}
.cta {
color: var(--text-arcon-red);
transition: all 0.4s ease;
}
.cta::after {
opacity: 1;
}
}
}
} @media (max-width: 1024px) {
.knowledge {
gap: 32px;
margin-bottom: var(--spacer-60);
.sectionTitle {
margin: 0;
text-align: start;
}
.knowledge-grid-container {
.knowledge-grid {
padding: 0;
grid-template-columns: 1fr;
}
.card {
height: fit-content;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: none;
.card-img {
max-width: 145px;
max-height: 100px;
height: 100px !important;
border-radius: 0.5rem;
overflow: hidden;
}
.card-content {
gap: 8px !important;
padding-block: 8.5px;
.para-primary {
color: var(--text-grey2);
}
.cta {
text-decoration: underline;
text-underline-offset: 2px;
&::after {
content: none;
position: relative;
}
&:hover::after,
&:focus::after {
opacity: 1;
}
}
}
}
&:hover {
background-color: transparent;
}
}
.dropdown {
z-index: 1;
.custom-dropdown {
position: relative;
width: 100%;
}
.dropdown-cta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border: 1px solid #d8e5f4;
border-radius: 8px;
cursor: pointer;
background: var(--section-gradient);
}
.cta-arrow {
transition: transform 0.3s ease;
}
.options-container {
position: absolute;
top: calc(100% + (-1px));
left: 0;
width: 100%;
max-height: 0;
transition: max-height 0.3s ease;
overflow: hidden;
background-color: #fff; border-top: 0;
border-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
z-index: 10;
}
.dropdown-option {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
color: var(--text-black-primary);
font-size: 14px;
}
.dropdown-option.active {
color: var(--text-black-primary);
opacity: 0.4;
}
.dropdown-open .options-container {
max-height: 500px;
transition: max-height 0.3s ease;
}
.displayNone {
border: 0;
}
.dropdown-open .dropdown-cta {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown-open .cta-arrow {
transform: rotate(180deg);
}
}
}
}
@media (max-width: 640px) {
& {
&.knowledge-grid-container {
.knowledge-grid {
grid-template-columns: 1fr;
}
}
}
} footer {
background-color: var(--bg-black-primary);
.container {
display: flex;
flex-direction: column;
padding-top: 70px;
padding-bottom: 50px;
}
} .footer-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
.footer-top-left {
max-width: 805px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 12px;
h2 {
font-weight: 300;
color: white;
.gradient-text {
background: linear-gradient( );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
h6 {
color: #FFFFFF;
font-family: Sora;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
@media screen and (max-width:768px) {
font-size: 14px;
}
}
.para-primary {
color: #fff;
font-weight: normal;
}
}
.cta-secondary-container {
height: fit-content;
}
.desktop-button {
display: block;
.talk-to-us {
background-color: var(--bg-black-primary);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
border: none;
outline: none;
p {
color: var(--text-white);
}
}
}
.mobile-button {
display: none;
button {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
background: transparent;
outline: none;
border: none;
p {
font-size: 14px;
color: white;
}
}
}
} .divider-gradient {
display: block;
width: 100%;
height: 1px;
margin: 80px 0 60px;
opacity: 0.4;
background: linear-gradient(97deg,
#8fc3ff 7.84%,
#a984ff 27.8%,
#e6323a 58.17%);
}
.divider-solid {
display: block;
width: 100%;
height: 2px;
background-color: #1e1e1e;
margin: 60px 0 20px;
} .footer-accordion-container {
margin-block: 44px;
.accordion-container {
width: 100%;
height: auto;
display: block !important;
.accordion {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 0;
border-bottom: 1px solid #484848;
.accordion-header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
color: var(--text-grey3);
.accordion-title {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
#logo {
width: 32px;
height: 32px;
object-fit: cover;
}
}
.accordion-icon {
width: 16px;
height: 16px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.3s ease, opacity 0.3s ease;
}
&.open .accordion-icon {
transform: rotate(180deg);
}
.accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/plus-red.svg);
}
&.open .accordion-icon::before {
content: url(//arcon.xyz/wp-content/themes/arcon/assets/images/minus-red.svg);
}
}
.accordion-content {
max-width: 240px;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
margin-left: 12px;
margin-top: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
ul {
display: flex;
flex-direction: column;
gap: 16px;
li {
a {
cursor: pointer;
color: var(--text-white);
text-decoration: none;
}
}
}
&.open {
max-height: 250px; opacity: 1;
transition: max-height 0.5s ease, opacity 0.3s linear, margin-top 0.2s ease;
}
.cta-secondary {
text-decoration: underline;
text-underline-offset: 4px;
}
}
}
}
} .footer-mid {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
.footer-mid-left {
max-width: 360px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: flex-start;
.logo-container {
max-width: 150px;
max-height: 50px;
img {
width: 100%;
height: auto;
}
}
.newsletter {
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 70px;
h6 {
color: var(--text-white);
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.sub-heading-secondary {
color: #fff;
font-weight: normal;
}
.input-container {
width: 100%;
height: auto;
padding-bottom: 13.5px;
border-bottom: 1px solid #ffffff2f;
display: flex;
input {
font-family: "Sora", sans-serif;
width: 100%;
background-color: transparent;
color: white;
outline: none;
border: 0;
}
}
}
}
.footer-nav {
display: flex;
gap: 40px;
.nav-section {
span {
font-size: 16px;
color: var(--text-grey3);
line-height: 20px; margin-bottom: 16px;
display: block;
}
nav ul {
font-size: 14px;
line-height: 20px;
color: #bcbcbc;
display: flex;
flex-direction: column;
gap: 16px;
li {
list-style-type: none;
a {
color: inherit;
text-decoration: none;
transition: color 100ms ease;
}
&:hover {
a {
color: var(--text-grey3);
}
}
}
}
}
}
} .footer-bottom {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
margin-top: 0;
.social-links {
display: flex;
gap: 8px; a {
transition: all 200ms ease;
&:hover {
transition: all 200ms ease;
svg {
rect {
opacity: 1;
}
path {
fill: var(--bg-black-primary);
}
}
}
}
}
.legal-links {
display: flex;
gap: 16px;
a {
font-size: 12px;
line-height: 16.8px;
color: white;
opacity: 0.3;
text-decoration: none;
}
}
} @media (max-width: 1025px) {
.footer-top {
flex-direction: column;
gap: 24px;
align-items: start;
}
.desktop-button {
display: none !important;
}
.mobile-button {
display: flex !important;
}
.divider-gradient,
.divider-solid {
display: none;
}
.footer-mid {
flex-direction: column-reverse;
.footer-mid-left {
.newsletter {
margin-top: 16px;
h6 {
font-size: 14px;
font-weight: 300;
line-height: 22px;
}
}
}
.footer-nav {
display: none;
}
}
.footer-bottom {
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
}
/ @media screen and (min-width: 601px) and (max-width: 1024px) {
.footer-top {
flex-direction: row;
align-items: center;
.footer-top-left {
max-width: max-content;
}
}
.footer-mid {
.footer-mid-left {
max-width: 100%;
.newsletter {
flex-direction: row;
h6 { width: 100%; }
.input-container {
img { width: 16px; }
}
}
}
}
} 
.contact-page_img { width: 100%; }
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
.header-container { padding: 0px 50px !important; }
.top-bar-links{padding: 10px 50px !important;;}
.footer-mid  .footer-nav {gap:30px}
.products-grid-container  .product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
header .top-bar-links {  padding: 10px 20px;}
}