:root {
--ag-ink: #2f3640;
--ag-ink-soft: #5a6572;
--ag-muted: #6e7a88;
--ag-line: #e4ebf3;
--ag-blue: #2f7fd6;
--ag-blue-deep: #1a5fad;
--ag-blue-soft: #5ba3e8;
--ag-blue-tint: #e8f3fc;
--ag-green: #14a82a;
--ag-green-deep: #0f8a20;
--ag-complaint: #6aa9e8;
--ag-radius-btn: 10px;
} .header__inner {
height: 72px;
}
.logo img {
max-width: 160px;
padding: 6px 0 0;
}
.header-button,
.header-button-2 {
height: 38px;
padding: 0 16px;
border-radius: var(--ag-radius-btn);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
box-sizing: border-box;
}
.header-button {
gap: 8px;
background: linear-gradient(180deg, #1fbf35 0%, var(--ag-green-deep) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 2px 8px rgba(15, 138, 32, 0.22);
transition: filter 0.15s ease;
}
.header-button:hover {
filter: brightness(1.05);
color: #fff;
}
.header-button .online-indicator {
height: 7px;
width: 7px;
margin-right: 0;
background-color: #b8ff74;
box-shadow: 0 0 0 3px rgba(184, 255, 116, 0.28);
animation-duration: 2.4s;
}
.header-button-2 {
font-weight: 600;
text-transform: none;
background: var(--ag-complaint);
transition: background 0.15s ease;
}
.header-button-2:hover {
background: #5a9adb;
color: #fff;
} .button-slider2 .icon-phone {
width: 36px;
height: 36px;
top: 4px;
background: linear-gradient(160deg, var(--ag-blue-soft), var(--ag-blue));
}
.button-slider2 .button-text {
font-size: 11px;
font-weight: 500;
color: var(--ag-muted);
}
.button-slider2 .button-link {
font-size: 14px;
font-weight: 700;
color: var(--ag-ink);
letter-spacing: -0.01em;
}
.button-slider2 {
padding-left: 46px;
} .slider-section.hero-light-refresh {
position: relative;
overflow: hidden;
}
.slider-section.hero-light-refresh .slide {
position: relative;
min-height: clamp(360px, 48vw, 440px);
height: auto !important;
padding: clamp(36px, 5vw, 56px) clamp(16px, 3vw, 28px) !important;
display: flex;
align-items: center;
justify-content: flex-start; background-image:
radial-gradient(ellipse 48% 62% at 18% 46%, rgba(255, 255, 255, 0.42) 0%, rgba(142, 200, 245, 0.2) 45%, transparent 72%),
linear-gradient(105deg, rgba(110, 180, 239, 0.55) 0%, rgba(110, 180, 239, 0.22) 38%, transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, rgba(26, 95, 173, 0.07) 100%),
url(https://applgiants.com/wp-content/uploads/2022/12/banner2.webp) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center bottom !important;
}
.slider-section.hero-light-refresh .slide > .container {
width: 100%;
max-width: 1430px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.slider-section.hero-light-refresh .slide__text {
max-width: 420px;
margin-left: 0;
margin-right: auto;
text-align: left;
align-items: flex-start;
align-self: flex-start;
animation: agHeroCopyIn 0.55s ease-out both;
}
@keyframes agHeroCopyIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
} .slider-section.hero-light-refresh .slide__text h1.title,
.slider-section.hero-light-refresh .slide__text h1.title--black {
margin: 0 0 10px;
font-size: clamp(2rem, 4.2vw, 2.65rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.08;
color: #2a3140;
text-transform: none;
display: block;
} .slider-section.hero-light-refresh .slide__text > p.title:empty {
display: none;
}
.slider-section.hero-light-refresh .slide__text > p.title:not(:empty) {
margin: 0 0 10px;
font-size: clamp(1.1rem, 2vw, 1.35rem);
font-weight: 600;
line-height: 1.25;
color: rgba(255, 255, 255, 0.95);
text-transform: none;
}
.slider-section.hero-light-refresh .slide__text .text {
width: auto;
max-width: 34ch;
margin: 0 0 20px;
font-size: clamp(1rem, 1.55vw, 1.1rem);
font-weight: 500;
line-height: 1.4;
color: rgba(255, 255, 255, 0.97);
text-shadow: 0 1px 2px rgba(26, 95, 173, 0.2);
}
.slider-section.hero-light-refresh .slider_bottom {
margin-top: 0;
} .slider-section.hero-light-refresh .button-slider {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 10px 16px 10px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.38);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 18px rgba(26, 95, 173, 0.12);
transition: background 0.15s ease, border-color 0.15s ease;
max-width: max-content;
}
.slider-section.hero-light-refresh .button-slider:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.55);
}
.slider-section.hero-light-refresh .button-slider:hover .fa {
transform: none;
}
.slider-section.hero-light-refresh .button-slider .fa,
.slider-section.hero-light-refresh .button-slider .icon-phone {
position: static;
width: 46px;
height: 46px;
border-radius: 12px;
background: linear-gradient(160deg, #fff 0%, #e8f3fc 100%);
box-shadow: 0 2px 8px rgba(26, 95, 173, 0.14);
flex-shrink: 0;
}
.slider-section.hero-light-refresh .button-slider .fa img,
.slider-section.hero-light-refresh .button-slider .icon-phone img {
width: 20px;
height: 20px; filter: invert(28%) sepia(70%) saturate(1200%) hue-rotate(190deg) brightness(90%);
}
.slider-section.hero-light-refresh .button-slider .button-text,
.slider-section.hero-light-refresh .button-slider .button-link {
display: block;
line-height: 1.15;
}
.slider-section.hero-light-refresh .button-slider .button-text {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
order: 0;
}
.slider-section.hero-light-refresh .button-slider .button-link {
font-size: clamp(1.2rem, 2.2vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
} .slider-section.hero-light-refresh .button-slider {
flex-wrap: wrap;
}
.slider-section.hero-light-refresh .button-slider .fa {
order: -1;
}
.slider-section.hero-light-refresh .main-slide__buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
} @media (max-width: 700px) {
.slider-section.hero-light-refresh .slide {
min-height: 420px;
background-position: 72% bottom !important;
padding: 28px 0 180px !important;
align-items: flex-start;
}
.slider-section.hero-light-refresh .slide__text {
max-width: 100%;
margin-left: 0;
margin-right: 0;
text-align: left;
align-items: flex-start;
background: linear-gradient(180deg, rgba(110, 180, 239, 0.55) 0%, rgba(110, 180, 239, 0.2) 70%, transparent 100%);
margin: -8px 0 0;
padding: 8px 8px 20px;
border-radius: 8px;
}
.slider-section.hero-light-refresh .slide__text .text {
max-width: 100%;
}
}
@media (max-width: 576px) { .slider-section.hero-light-refresh .slide {
background: none !important;
background-image:
radial-gradient(ellipse 48% 62% at 18% 46%, rgba(255, 255, 255, 0.42) 0%, rgba(142, 200, 245, 0.2) 45%, transparent 72%),
linear-gradient(105deg, rgba(110, 180, 239, 0.55) 0%, rgba(110, 180, 239, 0.22) 38%, transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, rgba(26, 95, 173, 0.07) 100%),
url(https://applgiants.com/wp-content/uploads/2022/12/banner2.webp) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: 72% bottom !important;
}
.slider-section.hero-light-refresh .button-slider .button-link {
color: #fff;
}
} @media (min-width: 980px) {
.navbar-menu__link {
border-radius: 6px;
}
}
.slider-section.hero-light-refresh .button-slider .button-slider__copy {
display: flex;
flex-direction: column;
line-height: 1.15;
gap: 3px;
}
.slider-section.hero-light-refresh .button-slider .fa {
order: 0;
}