html {
width: 100%;
}
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
background-color: #ffffff;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
overflow-x: hidden;
}
@media screen and (max-width: 300px) {
body {
width: 300px;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 30px 0 10px 0;
color: #156cb9;
font-family: "DynaPuff", sans-serif;
font-weight: 400;
}
h1 {
font-size: 2.8em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.6em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #c5d8ea;
border-left: 4px solid #d92627;
border-radius: 0;
overflow: visible;
background-color: #ffffff;
box-shadow: none;
color: #0d233a;
font-size: 0.95em;
line-height: 1.5;
}
table caption {
caption-side: top;
padding: 0 0 0.75rem 0;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: 1.15em;
font-weight: 500;
text-align: left;
}
table thead tr th,
table tr th {
padding: 0.9rem 1.1rem;
background: linear-gradient(145deg, #156cb7 0%, #0e5594 100%);
border: 1px solid #0e5594;
border-bottom: 2px solid #d92627;
color: #ffffff;
font-family: "DynaPuff", sans-serif;
font-size: 0.95em;
font-weight: 500;
letter-spacing: 0.01em;
text-align: left;
vertical-align: middle;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
table tbody tr td,
table tr td {
padding: 0.85rem 1.1rem;
border: 1px solid #d5e3f0;
background-color: #ffffff;
color: #0d233a;
vertical-align: top;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
transition: background-color 0.2s ease;
}
table tbody tr:nth-child(even) td,
table tr:nth-child(even) td {
background-color: #f5f9fc;
}
table tbody tr:hover td,
table tr:hover td {
background-color: #eef5fb;
}
table tbody tr td:first-child,
table tr td:first-child {
width: 22%;
font-weight: 600;
color: #0e5594;
}
table a {
color: #156cb7;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition: color 0.2s ease;
}
table a:hover,
table a:focus-visible {
color: #d92627;
}
table ul,
table ol {
margin: 0.15rem 0 0.15rem 1.1rem;
padding: 0;
}
table li {
margin: 0 0 0.35rem 0;
padding: 0;
line-height: 1.4;
}
table li:last-child {
margin-bottom: 0;
}
img {
border: 0;
}
hr {
background-color: #adadad;
border: 0;
height: 1px;
}
iframe {
border: 0;
}
.hide_meta {
display: none;
}
.top_notice {
width: 100%;
height: auto;
padding: 5px 0;
margin: 0 auto;
position: relative;
display: none;
clear: both;
}
.jump_anchor {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
.red_notice {
width: calc(100% - 20px);
height: auto;
padding: 10px;
margin: 10px auto;
position: relative;
display: table;
clear: both;
background-color: red;
color: #ffffff;
font-family: "Montserrat", sans-serif;
text-align: center;
}
*:focus {
outline: none;
}
.gen_btn {
width: auto;
height: auto;
padding: 10px 35px;
background-color: #252525;
color: #ffffff;
font-size: 1em;
text-transform: uppercase;
border-radius: 4px;
border: 0;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.gen_btn:hover {
background-color: #000000;
}
@media only screen and (max-width: 440px) {
.gen_btn {
width: 100%;
}
}
.gen_btn_right {
float: right;
}
.gen_btn.disabled {
background-color: #ccc; /* Grey out the button */
cursor: not-allowed; /* Show a not-allowed cursor */
}
.hfield {
display: none !important;
}
.grecaptcha-badge {
display: none !important;
}
/* PRELOADER */
#preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:
radial-gradient(
circle at 50% 46%,
rgba(255, 205, 35, 0.18),
transparent 0 150px
),
radial-gradient(
circle at 30% 25%,
rgba(27, 126, 196, 0.32),
transparent 0 260px
),
radial-gradient(
circle at 72% 70%,
rgba(126, 189, 44, 0.26),
transparent 0 290px
),
linear-gradient(135deg, rgba(5, 29, 49, 0.96), rgba(13, 93, 158, 0.9));
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
opacity: 1;
visibility: visible;
transition:
opacity 0.45s ease-in-out,
visibility 0.45s ease-in-out;
}
#preloader::before,
#preloader::after {
content: "";
width: 45vmax;
height: 45vmax;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0.38;
filter: blur(2px);
}
#preloader::before {
top: -24vmax;
right: -12vmax;
background: conic-gradient(
from 120deg,
rgba(255, 205, 35, 0),
rgba(255, 205, 35, 0.55),
rgba(126, 189, 44, 0),
rgba(22, 108, 185, 0.5),
rgba(255, 205, 35, 0)
);
animation: preloaderHaloDrift 7s linear infinite;
}
#preloader::after {
left: -22vmax;
bottom: -24vmax;
background: conic-gradient(
from 260deg,
rgba(255, 255, 255, 0),
rgba(126, 189, 44, 0.48),
rgba(22, 108, 185, 0.55),
rgba(255, 205, 35, 0),
rgba(255, 255, 255, 0)
);
animation: preloaderHaloDrift 9s linear infinite reverse;
}
#preloader.preloader_hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: -1;
}
.preloader_stage {
width: 260px;
height: 260px;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
@media screen and (max-width: 1080px) {
.preloader_stage {
width: 230px;
height: 230px;
}
}
@media screen and (max-width: 767px) {
.preloader_stage {
width: 205px;
height: 205px;
}
}
.preloader_stage::before {
content: "";
width: 76%;
height: 76%;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.16),
rgba(255, 255, 255, 0.04) 58%,
rgba(255, 255, 255, 0) 70%
);
box-shadow:
0 0 48px rgba(255, 205, 35, 0.24),
0 0 84px rgba(22, 108, 185, 0.24);
animation: preloaderBreath 2.8s ease-in-out infinite;
}
.preloader_stage::after {
content: "";
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent 0 16%,
rgba(255, 255, 255, 0.36) 48%,
transparent 80%
),
linear-gradient(
0deg,
transparent 0 18%,
rgba(255, 205, 35, 0.24) 50%,
transparent 82%
);
opacity: 0.42;
animation: preloaderSweep 3.2s ease-in-out infinite;
mix-blend-mode: screen;
}
.preloader_ring {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
pointer-events: none;
}
.preloader_ring_outer {
border-top-color: #ffcd23;
border-right-color: rgba(255, 205, 35, 0.22);
border-bottom-color: rgba(126, 189, 44, 0.45);
animation: preloaderSpin 2.7s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
.preloader_ring_middle {
width: 82%;
height: 82%;
border-left-color: #7ebd2c;
border-bottom-color: rgba(22, 108, 185, 0.45);
border-width: 2px;
animation: preloaderSpin 2.1s linear infinite reverse;
}
.preloader_ring_inner {
width: 62%;
height: 62%;
border-top-color: rgba(255, 255, 255, 0.75);
border-right-color: #156cb9;
border-width: 2px;
animation: preloaderSpin 1.6s ease-in-out infinite;
}
.preloader_glow {
width: 122px;
height: 122px;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255, 205, 35, 0.22), transparent 0 48%),
radial-gradient(circle, rgba(126, 189, 44, 0.2), transparent 0 68%);
animation: preloaderGlow 1.9s ease-in-out infinite;
}
.preloader_spark {
width: 9px;
height: 9px;
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
background-color: #ffcd23;
box-shadow: 0 0 18px currentColor;
animation: preloaderSpark 2.4s ease-in-out infinite;
}
.preloader_spark_one {
top: 32px;
left: 58px;
color: #ffcd23;
}
.preloader_spark_two {
top: 56px;
right: 38px;
color: #7ebd2c;
animation-delay: -0.65s;
}
.preloader_spark_three {
right: 64px;
bottom: 34px;
color: #31a6dc;
animation-delay: -1.2s;
}
.preloader_spark_four {
left: 36px;
bottom: 72px;
color: #ffffff;
animation-delay: -1.7s;
}
#preloader img {
width: 180px;
height: auto;
position: relative;
z-index: 2;
filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.22))
drop-shadow(0 0 18px rgba(255, 255, 255, 0.2));
animation: preloaderLogoFloat 2.2s ease-in-out infinite;
}
@media screen and (max-width: 1080px) {
#preloader img {
width: 160px;
}
}
@media screen and (max-width: 767px) {
#preloader img {
width: 140px;
}
}
@keyframes preloaderSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes preloaderLogoFloat {
0% {
transform: translateY(0) scale(0.92);
}
50% {
transform: translateY(-6px) scale(1);
}
100% {
transform: translateY(0) scale(0.92);
}
}
@keyframes preloaderBreath {
0%,
100% {
opacity: 0.68;
transform: scale(0.92);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
@keyframes preloaderSweep {
0%,
100% {
transform: rotate(-14deg) scale(0.82);
opacity: 0.18;
}
50% {
transform: rotate(18deg) scale(1.05);
opacity: 0.48;
}
}
@keyframes preloaderGlow {
0%,
100% {
opacity: 0.45;
transform: scale(0.95);
}
50% {
opacity: 0.88;
transform: scale(1.14);
}
}
@keyframes preloaderSpark {
0%,
100% {
opacity: 0.28;
transform: scale(0.7);
}
50% {
opacity: 1;
transform: scale(1.35);
}
}
@keyframes preloaderHaloDrift {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.08);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* WHATSAPP BUTTON */
.floating_button_holder_whatsapp {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1005;
pointer-events: none;
}
.whatsapp_link {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: block;
color: var(--whatsapp-color, #25d366);
text-decoration: none;
pointer-events: auto;
animation: whatsappWidgetEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s
both;
}
.whatsapp_button_shell {
width: calc(var(--whatsapp-size, 50px) + 18px);
height: calc(var(--whatsapp-size, 50px) + 18px);
padding: 0;
margin: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
animation: whatsappButtonFloat 4.8s ease-in-out 1.4s infinite;
}
.whatsapp_button {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
radial-gradient(
circle at 30% 28%,
rgba(255, 255, 255, 0.42),
transparent 42%
),
linear-gradient(
145deg,
color-mix(in srgb, var(--whatsapp-color, #25d366) 88%, #ffffff 12%),
var(--whatsapp-color, #25d366)
);
box-shadow:
0 14px 28px rgba(13, 35, 58, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s ease;
}
.whatsapp_button_glow {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(254, 208, 3, 0.34),
transparent 68%
);
opacity: 0.65;
transform: scale(0.92);
animation: whatsappGlowPulse 3.2s ease-in-out infinite;
pointer-events: none;
}
.whatsapp_button i {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
font-size: var(--whatsapp-size, 50px);
color: #ffffff;
filter: drop-shadow(0 2px 4px rgba(13, 35, 58, 0.24));
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
animation: whatsappIconWiggle 6s ease-in-out 2.2s infinite;
}
.whatsapp_pulse {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
border-radius: 50%;
border: 2px solid
color-mix(in srgb, var(--whatsapp-color, #25d366) 72%, #ffffff 28%);
opacity: 0;
transform: translate(-50%, -50%);
transform-origin: center center;
pointer-events: none;
}
.whatsapp_pulse_one {
animation: whatsappPulseRing 2.8s ease-out 1.1s infinite;
}
.whatsapp_pulse_two {
animation: whatsappPulseRing 2.8s ease-out 2.5s infinite;
}
.whatsapp_tooltip {
width: max-content;
max-width: 220px;
height: auto;
padding: 10px 14px;
margin: 0 0 14px 0;
position: absolute;
right: 0;
bottom: calc(100% + 2px);
display: flex;
flex-direction: column;
gap: 2px;
background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);
border: 1px solid rgba(21, 108, 183, 0.14);
border-radius: 14px 14px 4px 14px;
box-shadow:
0 16px 30px rgba(13, 35, 58, 0.16),
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.94);
transform-origin: bottom right;
transition:
opacity 0.35s ease,
visibility 0.35s ease,
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.whatsapp_tooltip::after {
content: "";
width: 12px;
height: 12px;
padding: 0;
margin: 0;
position: absolute;
right: 22px;
bottom: -6px;
background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);
border-right: 1px solid rgba(21, 108, 183, 0.14);
border-bottom: 1px solid rgba(21, 108, 183, 0.14);
transform: rotate(45deg);
}
.whatsapp_tooltip_label {
color: #156cb7;
font-size: 0.72em;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2em;
text-transform: uppercase;
}
.whatsapp_tooltip_text {
color: #1e2f3d;
font-size: 0.88em;
font-weight: 600;
line-height: 1.25em;
}
.whatsapp_widget.is-tooltip_visible .whatsapp_tooltip,
.whatsapp_link:hover .whatsapp_tooltip,
.whatsapp_link:focus-visible .whatsapp_tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.whatsapp_link:hover .whatsapp_button_shell,
.whatsapp_link:focus-visible .whatsapp_button_shell {
animation-play-state: paused;
}
.whatsapp_link:hover .whatsapp_button,
.whatsapp_link:focus-visible .whatsapp_button {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 18px 34px rgba(13, 35, 58, 0.28),
0 0 0 1px rgba(255, 255, 255, 0.24) inset,
0 0 24px
color-mix(in srgb, var(--whatsapp-color, #25d366) 42%, transparent);
}
.whatsapp_link:hover .whatsapp_button i,
.whatsapp_link:focus-visible .whatsapp_button i {
transform: scale(1.08) rotate(-8deg);
animation-play-state: paused;
}
@keyframes whatsappWidgetEnter {
0% {
opacity: 0;
transform: translateY(28px) scale(0.82);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes whatsappButtonFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes whatsappPulseRing {
0% {
opacity: 0.65;
transform: translate(-50%, -50%) scale(1);
}
70% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.75);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.75);
}
}
@keyframes whatsappGlowPulse {
0%,
100% {
opacity: 0.45;
transform: scale(0.9);
}
50% {
opacity: 0.85;
transform: scale(1.04);
}
}
@keyframes whatsappIconWiggle {
0%,
86%,
100% {
transform: rotate(0deg);
}
88% {
transform: rotate(-10deg);
}
90% {
transform: rotate(10deg);
}
92% {
transform: rotate(-6deg);
}
94% {
transform: rotate(0deg);
}
}
@media screen and (max-width: 560px) {
.floating_button_holder_whatsapp {
right: 12px;
bottom: 12px;
}
.whatsapp_tooltip {
max-width: 180px;
padding: 8px 12px;
}
}
/* HEADER */
.header {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
z-index: 20;
clear: both;
background:
linear-gradient(
90deg,
rgba(21, 108, 183, 0.08),
rgba(255, 255, 255, 0) 28%
),
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 72%,
rgba(21, 108, 183, 0.08) 100%
);
}
.top_header {
width: calc(100% - 10%);
padding: 10px 5%;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 70px;
}
@media screen and (max-width: 1200px) {
.top_header {
gap: 60px;
}
}
@media screen and (max-width: 1080px) {
.top_header {
width: calc(100% - 80px);
padding: 10px 40px;
gap: 40px;
}
}
@media screen and (max-width: 767px) {
.top_header {
flex-direction: column;
justify-content: left;
align-items: flex-start;
gap: 18px;
}
}
@media screen and (max-width: 560px) {
.top_header {
width: calc(100% - 40px);
padding-right: 20px;
padding-left: 20px;
gap: 16px;
}
}
.logo {
width: 280px;
height: auto;
padding: 0;
margin: 0;
position: relative;
flex: 0 1 280px;
}
.header_brand {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
gap: 14px;
flex: 0 1 auto;
}
@media screen and (max-width: 767px) {
.header_brand {
width: 100%;
justify-content: space-between;
align-items: center;
}
}
@media screen and (max-width: 1080px) {
.logo {
width: 220px;
flex-basis: 220px;
}
}
@media screen and (max-width: 767px) {
.logo {
width: 220px;
flex-basis: auto;
}
}
@media screen and (max-width: 560px) {
.logo {
width: 200px;
}
}
@media screen and (max-width: 440px) {
.logo {
width: 170px;
}
}
.logo a,
.logo a:visited {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: table;
text-decoration: none;
}
.logo a::before {
content: "";
width: 46%;
height: 72%;
padding: 0;
margin: 0;
position: absolute;
top: 14%;
left: -4%;
border-radius: 50%;
background:
radial-gradient(circle, rgba(254, 208, 3, 0.2), transparent 0 58%),
conic-gradient(
from 210deg,
rgba(21, 108, 183, 0),
rgba(254, 208, 3, 0.32),
rgba(126, 181, 42, 0.22),
rgba(21, 108, 183, 0)
);
filter: blur(8px);
opacity: 0;
transform: scale(0.82) rotate(-18deg);
pointer-events: none;
}
.logo.logo_in_view a::before {
animation: logoSunWake 1.25s ease-out both;
}
.logo_main {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
display: block;
transform-origin: 18% 52%;
}
.logo.logo_in_view .logo_main {
animation: logoRockReveal 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.quick_links {
width: auto;
max-width: 420px;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 9px;
flex: 0 0 auto;
}
@media screen and (max-width: 1080px) {
.quick_links {
max-width: none;
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-content: end;
column-gap: 18px;
row-gap: 10px;
}
}
@media screen and (max-width: 767px) {
.quick_links {
display: none;
}
}
.contact_holder {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
color: #1e2f3d;
font-size: 1em;
font-weight: 600;
line-height: 1.25em;
white-space: nowrap;
}
@media screen and (max-width: 1080px) {
.contact_holder {
font-size: 0.95em;
}
}
@media screen and (max-width: 560px) {
.contact_holder {
font-size: 0.9em;
white-space: normal;
justify-content: center;
}
}
.contact_holder i {
width: 18px;
height: 18px;
color: #156cb7;
font-size: 1.12em;
line-height: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
}
.contact_holder a,
.contact_holder a:visited {
color: #1e2f3d;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
transition:
color 0.25s ease-in-out,
transform 0.25s ease-in-out;
}
.contact_holder a:hover,
.contact_holder a:visited:hover {
color: #156cb7;
}
.contact_holder.socials {
gap: 10px;
padding-top: 5px;
flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.contact_holder.socials {
grid-column: 1 / -1;
justify-content: center;
}
}
@media screen and (max-width: 1080px) {
.contact_holder.socials {
grid-column: 1 / -1;
justify-self: end;
}
}
@media screen and (max-width: 767px) {
.contact_holder.socials {
justify-self: center;
}
}
.contact_holder.socials a,
.contact_holder.socials a:visited {
width: 40px;
height: 40px;
padding: 0;
margin: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #156cb7;
background-color: rgba(21, 108, 183, 0.08);
border: 1px solid rgba(21, 108, 183, 0.14);
text-decoration: none;
overflow: hidden;
}
@media screen and (max-width: 560px) {
.contact_holder.socials a,
.contact_holder.socials a:visited {
width: 36px;
height: 36px;
}
}
.contact_holder.socials a::before {
content: "";
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #156cb7, #7eb52a);
opacity: 0;
transform: scale(0.45);
transition:
opacity 0.25s ease-in-out,
transform 0.25s ease-in-out;
}
.contact_holder.socials a:hover::before,
.contact_holder.socials a:visited:hover::before {
opacity: 1;
transform: scale(1);
}
.contact_holder.socials i {
width: auto;
position: relative;
z-index: 2;
color: inherit;
font-size: 1em;
transition: color 0.25s ease-in-out;
}
.contact_holder.socials a:hover i,
.contact_holder.socials a:visited:hover i {
color: #ffffff;
}
@keyframes logoRockReveal {
0% {
opacity: 0;
transform: translateY(12px) scale(0.92) rotate(-2deg);
filter: drop-shadow(0 0 0 rgba(21, 108, 183, 0));
}
45% {
opacity: 1;
transform: translateY(-4px) scale(1.025) rotate(1deg);
filter: drop-shadow(0 10px 14px rgba(21, 108, 183, 0.2));
}
70% {
transform: translateY(2px) scale(0.99) rotate(-0.5deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0);
filter: drop-shadow(0 4px 8px rgba(13, 35, 58, 0.08));
}
}
@keyframes logoSunWake {
0% {
opacity: 0;
transform: scale(0.75) rotate(-24deg);
}
35% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.22) rotate(18deg);
}
}
/* NAVIGATION */
.navigation {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
z-index: 50;
background-color: rgba(21, 108, 183, 0.8);
box-shadow: 0 6px 18px rgba(13, 35, 58, 0.14);
transition:
background-color 0.25s ease-in-out,
box-shadow 0.25s ease-in-out;
}
@media screen and (max-width: 767px) {
.navigation:not(.sticky) {
background-color: transparent;
box-shadow: none;
margin-bottom: 0;
}
.navigation:not(.sticky).navigation_has_slider {
margin-bottom: 0;
}
.navigation:not(.sticky) .navigation_inner {
min-height: 0;
height: 0;
padding: 0;
overflow: visible;
}
.navigation:not(.sticky) .sticky_logo,
.navigation:not(.sticky) .navigation_toggle_nav {
display: none;
}
.navigation:not(.sticky).navigation_open {
z-index: 9000;
}
}
.navigation_has_slider {
margin-bottom: -58px;
background-color: rgba(21, 108, 183, 0.5);
box-shadow: 0 10px 24px rgba(13, 35, 58, 0.16);
}
.navigation_no_slider {
margin-bottom: 0;
background-color: #156cb7;
}
.navigation.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9000;
margin-bottom: 0;
background-color: rgba(21, 108, 183, 1);
box-shadow: 0 10px 24px rgba(13, 35, 58, 0.22);
backdrop-filter: blur(10px);
}
.navigation_inner {
width: 100%;
min-height: 58px;
padding: 0 5%;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
box-sizing: border-box;
}
@media screen and (max-width: 1200px) {
.navigation_inner {
padding-right: 5%;
padding-left: 5%;
}
}
@media screen and (max-width: 1080px) {
.navigation_inner {
padding-right: 40px;
padding-left: 40px;
}
}
@media screen and (max-width: 767px) {
.navigation_inner {
padding-right: 40px;
padding-left: 40px;
}
}
@media screen and (max-width: 560px) {
.navigation_inner {
padding-right: 20px;
padding-left: 20px;
}
}
@media screen and (max-width: 440px) {
.navigation_inner {
padding-right: 20px;
padding-left: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
.navigation:not(.sticky) .navigation_inner {
min-height: 58px;
justify-content: flex-end;
}
.navigation.sticky .navigation_inner {
justify-content: flex-end;
align-items: center;
gap: 14px;
}
}
@media screen and (max-width: 767px) {
.navigation.sticky .navigation_inner {
justify-content: flex-end;
align-items: center;
gap: 14px;
}
}
.navigation_backdrop {
width: 0;
height: 0;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
display: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.28s ease-in-out,
visibility 0.28s ease-in-out;
}
@media screen and (max-width: 1080px) {
.navigation_open .navigation_backdrop {
width: 100vw;
height: 100vh;
display: block;
opacity: 1;
visibility: visible;
z-index: 8998;
background-color: rgba(13, 35, 58, 0.28);
backdrop-filter: blur(2px);
pointer-events: auto;
}
}
@media screen and (max-width: 767px) {
.navigation:not(.sticky) .navigation_backdrop {
position: fixed;
}
.navigation:not(.sticky).navigation_open .navigation_backdrop {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
.sticky_logo {
width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: block;
flex: 0 0 0;
opacity: 0;
visibility: hidden;
transform: translateX(-14px);
transition:
opacity 0.25s ease-in-out,
visibility 0.25s ease-in-out,
width 0.25s ease-in-out,
flex-basis 0.25s ease-in-out,
transform 0.25s ease-in-out,
left 0.25s ease-in-out;
pointer-events: none;
overflow: hidden;
}
.navigation.sticky .sticky_logo {
width: 44px;
flex-basis: 44px;
opacity: 1;
visibility: visible;
position: absolute;
top: 50%;
left: 5%;
z-index: 2;
margin: 0;
transform: translateY(-50%);
pointer-events: auto;
}
@media screen and (max-width: 1200px) {
.navigation.sticky .sticky_logo {
left: 5%;
}
}
@media screen and (max-width: 1080px) {
.navigation.sticky .sticky_logo {
left: 40px;
}
}
@media screen and (max-width: 767px) {
.navigation.sticky .sticky_logo {
left: 40px;
}
}
@media screen and (max-width: 560px) {
.navigation.sticky .sticky_logo {
left: 20px;
}
}
@media screen and (max-width: 440px) {
.navigation.sticky .sticky_logo {
left: 20px;
}
}
.sticky_logo img {
width: 100%;
height: 44px;
padding: 0;
margin: 0;
display: block;
object-fit: contain;
}
.navigation_toggle {
width: 42px;
height: 42px;
padding: 0;
margin: 0;
position: relative;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.12);
cursor: pointer;
flex: 0 0 auto;
}
.navigation_toggle_header {
border-color: rgba(21, 108, 183, 0.22);
background-color: rgba(21, 108, 183, 0.08);
}
.navigation_toggle_header .navigation_toggle_line {
background-color: #156cb7;
}
@media screen and (max-width: 767px) {
.navigation_toggle_header {
display: flex;
}
.header:has(+ .navigation.sticky) .navigation_toggle_header {
display: none;
}
}
.navigation_toggle_nav {
display: none;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
.navigation_toggle_nav {
display: flex;
}
}
@media screen and (max-width: 767px) {
.navigation.sticky .navigation_toggle_nav {
display: flex;
position: relative;
z-index: 3;
margin-left: auto;
}
}
.navigation_toggle_line {
width: 20px;
height: 2px;
padding: 0;
margin: 0;
display: block;
border-radius: 999px;
background-color: #ffffff;
transition:
opacity 0.22s ease-in-out,
transform 0.22s ease-in-out;
}
.navigation_open .navigation_toggle_line:nth-child(1),
.header:has(+ .navigation.navigation_open)
.navigation_toggle_header
.navigation_toggle_line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.navigation_open .navigation_toggle_line:nth-child(2),
.header:has(+ .navigation.navigation_open)
.navigation_toggle_header
.navigation_toggle_line:nth-child(2) {
opacity: 0;
}
.navigation_open .navigation_toggle_line:nth-child(3),
.header:has(+ .navigation.navigation_open)
.navigation_toggle_header
.navigation_toggle_line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.navigation_menu {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
list-style: none;
}
@media screen and (min-width: 1081px) {
.navigation {
display: grid;
grid-template-areas: "navigation_bar";
align-items: center;
}
.navigation_inner,
.navigation_menu {
grid-area: navigation_bar;
align-self: center;
}
.navigation:not(.sticky) .navigation_inner {
min-height: 0;
height: 0;
padding: 0;
overflow: visible;
pointer-events: none;
z-index: 2;
}
.navigation.sticky .navigation_inner {
min-height: 58px;
z-index: 3;
pointer-events: none;
}
.navigation_menu {
width: 100%;
min-height: 58px;
padding-right: 5%;
padding-left: 5%;
box-sizing: border-box;
align-items: center;
justify-content: center;
z-index: 1;
}
.navigation.sticky .navigation_menu {
justify-content: flex-end;
}
}
@media screen and (min-width: 1081px) and (max-width: 1200px) {
.navigation_menu {
padding-right: 5%;
padding-left: 5%;
}
}
@media screen and (max-width: 1080px) {
.navigation_menu {
width: calc(100% - 40px);
max-height: none;
padding: 18px 20px;
margin: 0;
position: fixed;
top: 20px;
left: 50%;
right: auto;
z-index: 9001;
display: block;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(21, 108, 183, 0.98),
rgba(10, 68, 118, 0.98)
);
border-radius: 8px;
box-shadow: 0 18px 28px rgba(13, 35, 58, 0.24);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -12px) scale(0.96);
transition:
opacity 0.28s ease-in-out,
visibility 0.28s ease-in-out,
transform 0.28s ease-in-out,
max-height 0.28s ease-in-out;
}
}
@media screen and (max-width: 560px) {
.navigation_menu {
width: calc(100% - 40px);
padding-right: 18px;
padding-left: 18px;
}
}
@media screen and (max-width: 1080px) {
.navigation_open .navigation_menu {
max-height: calc(100vh - 96px);
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
overflow-y: auto;
pointer-events: auto;
}
}
@media screen and (max-width: 767px) {
.navigation:not(.sticky) .navigation_menu {
top: 76px;
}
.navigation:not(.sticky).navigation_open .navigation_menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
.navigation_menu_header {
width: 100%;
height: auto;
padding: 0 0 12px 0;
margin: 0 0 6px 0;
position: relative;
display: none;
align-items: center;
justify-content: space-between;
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media screen and (max-width: 1080px) {
.navigation_menu_header {
display: flex;
}
}
.navigation_menu_title {
color: #ffffff;
font-size: 0.82em;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.2em;
text-transform: uppercase;
}
.navigation_close {
width: 36px;
height: 36px;
padding: 0;
margin: 0;
position: relative;
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
cursor: pointer;
transition:
background-color 0.22s ease-in-out,
border-color 0.22s ease-in-out,
transform 0.22s ease-in-out;
}
@media screen and (max-width: 1080px) {
.navigation_close {
display: flex;
}
}
.navigation_close:hover {
background-color: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.42);
transform: scale(1.04);
}
.navigation_close i {
font-size: 1rem;
line-height: 1;
}
.navigation_item {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
.navigation_link_row {
width: auto;
height: 100%;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
@media screen and (max-width: 1080px) {
.navigation_link_row {
width: 100%;
min-height: 46px;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.navigation_item:last-child .navigation_link_row {
border-bottom: 0;
}
}
.navigation_link,
.navigation_link:visited {
width: auto;
height: auto;
padding: 20px 14px 18px 14px;
margin: 0;
position: relative;
display: flex;
align-items: center;
color: #ffffff;
font-size: 0.9em;
font-weight: 800;
line-height: 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition:
color 0.22s ease-in-out,
background-color 0.22s ease-in-out;
}
.navigation_link::after {
content: "";
width: calc(100% - 28px);
height: 3px;
padding: 0;
margin: 0 auto;
position: absolute;
left: 14px;
right: 14px;
bottom: 8px;
background-color: #fed003;
border-radius: 999px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.22s ease-in-out;
}
.navigation_link:hover,
.navigation_link:visited:hover,
.navigation_item_active > .navigation_link_row > .navigation_link {
color: #fed003;
}
.navigation_link_no_click,
.navigation_link_no_click:visited {
cursor: default;
}
.navigation_link:hover::after,
.navigation_link:visited:hover::after,
.navigation_item_active > .navigation_link_row > .navigation_link::after {
transform: scaleX(1);
}
@media screen and (max-width: 1080px) {
.navigation_link,
.navigation_link:visited {
padding-right: 10px;
padding-left: 10px;
font-size: 0.82em;
}
.navigation_link::after {
width: calc(100% - 20px);
left: 10px;
right: 10px;
}
}
@media screen and (max-width: 1080px) {
.navigation_link,
.navigation_link:visited {
width: 100%;
padding: 15px 0;
justify-content: flex-start;
text-align: left;
font-size: 0.92em;
}
.navigation_link::after {
width: 46px;
left: 0;
right: auto;
bottom: 7px;
}
}
.navigation_dropdown_toggle {
width: 30px;
height: 30px;
padding: 0;
margin: 0 8px 0 -8px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 10px;
border: 0;
background-color: transparent;
color: #ffffff;
cursor: pointer;
transition:
color 0.22s ease-in-out,
background-color 0.22s ease-in-out,
transform 0.22s ease-in-out;
}
.navigation_item_active > .navigation_link_row > .navigation_dropdown_toggle {
color: #fed003;
}
.navigation_item_has_children:hover .navigation_dropdown_toggle,
.navigation_dropdown_open .navigation_dropdown_toggle {
color: #fed003;
}
@media (max-width: 1080px) {
.navigation_item_has_children:hover .navigation_dropdown_toggle,
.navigation_dropdown_open .navigation_dropdown_toggle {
color: #ffffff;
}
}
.navigation_dropdown_open .navigation_dropdown_toggle {
transform: rotate(180deg);
}
@media screen and (max-width: 1080px) {
.navigation_dropdown_toggle {
margin: 0 0 0 12px;
color: #ffffff;
}
}
.navigation_dropdown {
min-width: 260px;
height: auto;
padding: 10px;
margin: 0;
position: absolute;
top: calc(100% + 5px);
left: 50%;
right: auto;
z-index: 5;
list-style: none;
background-color: rgba(255, 255, 255, 0.98);
border-radius: 8px;
box-shadow: 0 18px 32px rgba(13, 35, 58, 0.22);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(10px);
transition:
opacity 0.22s ease-in-out,
visibility 0.22s ease-in-out,
transform 0.22s ease-in-out;
}
.navigation_dropdown::before {
content: "";
width: 14px;
height: 14px;
padding: 0;
margin: 0;
position: absolute;
top: -7px;
left: 50%;
background-color: rgba(255, 255, 255, 0.98);
transform: translateX(-50%) rotate(45deg);
box-shadow: -4px -4px 10px rgba(13, 35, 58, 0.04);
}
.navigation_item_has_children:hover > .navigation_dropdown,
.navigation_item_has_children:focus-within > .navigation_dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media screen and (max-width: 1080px) {
.navigation_dropdown,
.navigation_item_has_children:hover > .navigation_dropdown,
.navigation_item_has_children:focus-within > .navigation_dropdown {
min-width: 0;
max-height: 0;
padding: 0;
margin: 0;
position: relative;
top: auto;
right: auto;
left: auto;
overflow: hidden;
background-color: transparent;
border-radius: 8px;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition:
max-height 0.28s ease-in-out,
padding 0.28s ease-in-out;
}
}
@media screen and (max-width: 1080px) {
.navigation_dropdown::before {
display: none;
}
}
@media screen and (max-width: 1080px) {
.navigation_item_has_children.navigation_dropdown_open
> .navigation_dropdown,
.navigation_item_has_children.navigation_dropdown_open:hover
> .navigation_dropdown,
.navigation_item_has_children.navigation_dropdown_open:focus-within
> .navigation_dropdown {
max-height: 420px;
padding: 8px 0 10px 0;
transform: none;
}
}
.navigation_dropdown_item {
width: 100%;
height: auto;
padding: 0;
margin: 0;
list-style: none;
}
.navigation_dropdown_link,
.navigation_dropdown_link:visited {
width: calc(100% - 8px);
height: auto;
padding: 10px 12px;
margin: 0;
position: relative;
display: block;
color: #1e2f3d;
font-size: 0.88em;
font-weight: 700;
line-height: 1.2em;
text-decoration: none;
text-transform: uppercase;
border-radius: 5px;
transition:
color 0.22s ease-in-out,
background-color 0.22s ease-in-out,
transform 0.22s ease-in-out;
}
.navigation_dropdown_link:hover,
.navigation_dropdown_link:visited:hover,
.navigation_dropdown_item_active .navigation_dropdown_link {
color: #156cb7;
background-color: rgba(21, 108, 183, 0.08);
transform: translateX(4px);
}
@media screen and (max-width: 1080px) {
.navigation_menu .navigation_dropdown_link,
.navigation_menu .navigation_dropdown_link:visited {
width: 100%;
padding: 10px 13px;
color: #ffffff;
font-size: 0.86em;
box-sizing: border-box;
}
.navigation_menu .navigation_dropdown_link:hover,
.navigation_menu .navigation_dropdown_link:visited:hover,
.navigation_menu
.navigation_dropdown_item_active
.navigation_dropdown_link {
color: #fed003;
background-color: rgba(255, 255, 255, 0.08);
transform: none;
}
}
.header.sticky + .content {
padding-top: 110px;
}
.is-active {
color: #ff0000 !important;
}
@media screen and (max-width: 1080px) {
.is-active {
color: #c4c4c4 !important;
}
}
.link_no_click {
pointer-events: none;
}
@media screen and (max-width: 1080px) {
.link_no_click {
pointer-events: all;
}
}
body.admin-edit-mode .admin-div {
outline: 2px dashed rgba(22, 93, 150, 0.55);
outline-offset: 4px;
}
body.admin-edit-mode .admin-div:hover,
body.admin-edit-mode .admin-div.admin-div-active {
outline-color: rgba(22, 93, 150, 0.95);
box-shadow: 0 0 0 6px rgba(22, 93, 150, 0.14);
}
/* Pass overlap space through to the slider admin target without breaking sticky nav clicks */
body.admin-edit-mode .navigation_has_slider:not(.sticky):not(.navigation_open) {
pointer-events: none;
}
body.admin-edit-mode
.navigation_has_slider:not(.sticky):not(.navigation_open)
.navigation_menu,
body.admin-edit-mode
.navigation_has_slider:not(.sticky):not(.navigation_open)
.navigation_menu
*,
body.admin-edit-mode
.navigation_has_slider:not(.sticky):not(.navigation_open)
.navigation_toggle_nav,
body.admin-edit-mode
.navigation_has_slider:not(.sticky):not(.navigation_open)
.sticky_logo {
pointer-events: auto;
}
.admin-edit-badge {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(13, 35, 58, 0.18);
background: rgba(13, 35, 58, 0.96);
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(0, 0, 0);
transition:
opacity 0.16s ease-in-out,
visibility 0.16s ease-in-out;
}
.admin-edit-badge.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.admin-edit-badge:hover,
.admin-edit-badge:focus {
color: #ffffff;
text-decoration: none;
background: rgba(22, 93, 150, 0.98);
}
.admin-edit-badge i {
font-size: 12px;
}
.admin-edit-toggle {
position: fixed;
top: 12px;
left: 12px;
z-index: 2147483647;
width: 46px;
height: 46px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.92);
border-radius: 999px;
background: rgba(22, 93, 150, 0.98);
color: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
transition:
background 0.16s ease-in-out,
transform 0.16s ease-in-out;
}
.admin-edit-toggle:hover,
.admin-edit-toggle:focus-visible {
background: rgba(13, 35, 58, 0.98);
outline: none;
transform: translateY(-1px);
}
.admin-edit-toggle.is-off {
background: rgba(70, 70, 70, 0.94);
}
.admin-edit-toggle i {
font-size: 18px;
line-height: 1;
}
@media screen and (max-width: 560px) {
.admin-edit-toggle {
top: 10px;
left: 10px;
}
}
/* CONTACT DETAILS BLOCKS */
.contact_blocks {
width: 100%;
height: auto;
padding: 8px 0 18px 0;
margin: 0 auto;
position: relative;
clear: both;
}
.contact_blocks_layout {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
align-items: start;
}
@media screen and (max-width: 767px) {
.contact_blocks_layout {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact_blocks_left,
.contact_blocks_right {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
@media screen and (max-width: 767px) {
.contact_blocks_left,
.contact_blocks_right {
gap: 16px;
}
}
.contact_block_holder {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 20px;
margin: 0;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 18px;
overflow: hidden;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(244, 249, 253, 0.98) 100%
);
border: 1px solid rgba(21, 108, 183, 0.12);
border-radius: 14px;
box-shadow:
0 10px 24px rgba(13, 35, 58, 0.08),
0 2px 6px rgba(21, 108, 183, 0.06);
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.32s ease-in-out;
}
.contact_block_holder::before {
content: "";
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
background: radial-gradient(
circle at 88% 12%,
rgba(254, 208, 3, 0.16),
transparent 58%
);
transition: opacity 0.32s ease-in-out;
pointer-events: none;
}
.contact_block_holder:hover,
.contact_block_holder:focus-within {
transform: translateY(-4px);
border-color: rgba(21, 108, 183, 0.24);
box-shadow:
0 16px 34px rgba(13, 35, 58, 0.12),
0 4px 12px rgba(21, 108, 183, 0.1);
}
.contact_block_holder:hover::before,
.contact_block_holder:focus-within::before {
opacity: 1;
}
@media screen and (max-width: 560px) {
.contact_block_holder {
padding: 18px 16px 18px 18px;
gap: 14px;
}
}
.contact_block_accent {
width: 4px;
height: calc(100% - 18px);
padding: 0;
margin: 0;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, #156cb7 0%, #7eb52a 100%);
transform: scaleY(0.35);
transform-origin: center top;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact_block_holder:hover .contact_block_accent,
.contact_block_holder:focus-within .contact_block_accent {
transform: scaleY(1);
}
.contact_block_icon {
width: 58px;
height: 58px;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 58px;
border-radius: 16px;
background: linear-gradient(145deg, #156cb7 0%, #0f5a98 100%);
box-shadow:
0 8px 18px rgba(21, 108, 183, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s ease-in-out;
}
@media screen and (max-width: 560px) {
.contact_block_icon {
width: 52px;
height: 52px;
flex-basis: 52px;
border-radius: 14px;
}
}
.contact_block_icon_ring {
width: calc(100% + 10px);
height: calc(100% + 10px);
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
border: 2px solid rgba(254, 208, 3, 0.45);
border-radius: 18px;
opacity: 0;
transform: translate(-50%, -50%) scale(0.82);
transition:
opacity 0.32s ease-in-out,
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.contact_block_holder:hover .contact_block_icon,
.contact_block_holder:focus-within .contact_block_icon {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 12px 24px rgba(21, 108, 183, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.contact_block_holder:hover .contact_block_icon_ring,
.contact_block_holder:focus-within .contact_block_icon_ring {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
animation: contactIconRingPulse 2.4s ease-out infinite;
}
.contact_block_icon i {
position: relative;
z-index: 1;
font-size: 1.45rem;
color: #ffffff;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 560px) {
.contact_block_icon i {
font-size: 1.3rem;
}
}
.contact_block_holder:hover .contact_block_icon i,
.contact_block_holder:focus-within .contact_block_icon i {
transform: scale(1.06);
}
.contact_block_info {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
flex: 1 1 auto;
min-width: 0;
}
.contact_block_title {
width: 100%;
height: auto;
padding: 0 0 5px 0;
margin: 0;
font-size: 1.4rem;
font-weight: 700;
color: #0d233a;
line-height: 1.25em;
letter-spacing: 0.01em;
}
.contact_block_description {
width: 100%;
height: auto;
padding: 0 0 8px 0;
margin: 0;
font-size: 1rem;
font-weight: 500;
color: rgba(13, 35, 58, 0.72);
line-height: 1.45em;
}
.contact_block_content {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
font-size: 1rem;
font-weight: 400;
color: #252525;
line-height: 1.55em;
word-break: break-word;
}
.contact_block_content a,
.contact_block_content a:visited {
color: #156cb7;
font-weight: 600;
text-decoration: none;
transition:
color 0.22s ease-in-out,
border-color 0.22s ease-in-out,
background-color 0.22s ease-in-out;
}
.contact_block_content a:hover,
.contact_block_content a:visited:hover,
.contact_block_content a:focus-visible {
color: #0d233a;
border-color: #fed003;
}
@keyframes contactIconRingPulse {
0% {
opacity: 0.85;
transform: translate(-50%, -50%) scale(1);
}
70% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.18);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.18);
}
}
/* SLIDER */
.slider {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
z-index: 1;
overflow: hidden;
}
.slider .bx-wrapper {
margin: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.slider .bx-wrapper .bx-pager,
.slider .bx-wrapper .bx-controls-auto {
display: none !important;
}
.slider .bx-wrapper .bx-controls-direction a {
width: 40px;
height: 40px;
margin-top: -20px;
text-indent: -9999px;
font-size: 0;
overflow: hidden;
background: transparent !important;
background-image: none !important;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
opacity: 1;
z-index: 30;
transition: opacity 0.22s ease-in-out;
}
.slider .bx-wrapper .bx-prev,
.slider .bx-wrapper .bx-next {
display: block !important;
background: transparent !important;
background-image: none !important;
}
.slider .bx-wrapper .bx-prev {
left: 10px;
}
.slider .bx-wrapper .bx-next {
right: 10px;
}
@media screen and (max-width: 1080px) {
.slider .bx-wrapper .bx-prev {
left: 8px;
}
.slider .bx-wrapper .bx-next {
right: 8px;
}
}
@media screen and (max-width: 560px) {
.slider .bx-wrapper .bx-controls-direction a {
width: 32px;
height: 32px;
margin-top: -16px;
}
.slider .bx-wrapper .bx-prev {
left: 6px;
}
.slider .bx-wrapper .bx-next {
right: 6px;
}
}
.slider .bx-wrapper .bx-prev::before,
.slider .bx-wrapper .bx-next::before {
content: "";
width: 16px;
height: 16px;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
}
.slider .bx-wrapper .bx-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.slider .bx-wrapper .bx-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.slider .bx-wrapper .bx-prev:hover,
.slider .bx-wrapper .bx-next:hover,
.slider .bx-wrapper .bx-prev:focus,
.slider .bx-wrapper .bx-next:focus {
opacity: 0.8;
background: transparent !important;
background-image: none !important;
}
.slider .bx-viewport,
.slider .bx-wrapper,
.slider .bxslider,
.slider_slide {
height: 100% !important;
}
.bxslider {
width: 100%;
padding: 0;
margin: 0;
}
@media screen and (max-width: 767px) {
.bxslider {
padding-bottom: 70% !important;
}
}
@media screen and (max-width: 560px) {
.bxslider {
padding-bottom: 80% !important;
}
}
.slider_slide {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
list-style: none;
}
.slider_holder {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transform: scale(1);
animation: sliderKenBurns 18s ease-in-out infinite alternate;
will-change: transform;
}
.slider_slide_active .slider_holder {
animation-play-state: running;
}
.slider_filter {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.slider_info {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
pointer-events: none;
}
.slider_info_content {
width: min(100%, 560px);
max-width: calc(100% - 110px);
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
pointer-events: auto;
overflow: hidden;
}
.slider_info_gradient {
width: min(72%, 820px);
height: 100%;
padding: 0;
margin: 0;
position: absolute;
top: 0;
z-index: 1;
pointer-events: none;
}
.slider_info_left {
justify-content: flex-start;
}
.slider_info_left .slider_info_content {
margin-left: max(5%, 56px);
}
.slider_info_left .slider_info_gradient {
left: 0;
background: linear-gradient(
90deg,
rgba(21, 108, 183, 0.94) 0%,
rgba(21, 108, 183, 0.78) 42%,
rgba(21, 108, 183, 0.18) 72%,
rgba(21, 108, 183, 0) 100%
);
}
.slider_info_right {
justify-content: flex-end;
}
.slider_info_right .slider_info_content {
margin-right: max(5%, 56px);
text-align: right;
}
.slider_info_right .slider_info_gradient {
right: 0;
background: linear-gradient(
270deg,
rgba(21, 108, 183, 0.94) 0%,
rgba(21, 108, 183, 0.78) 42%,
rgba(21, 108, 183, 0.18) 72%,
rgba(21, 108, 183, 0) 100%
);
}
@media screen and (max-width: 1200px) {
.slider_info_left .slider_info_content {
margin-left: max(5%, 48px);
}
.slider_info_right .slider_info_content {
margin-right: max(5%, 48px);
}
}
@media screen and (max-width: 1080px) {
.slider_info_left .slider_info_content {
margin-left: max(40px, 48px);
}
.slider_info_right .slider_info_content {
margin-right: max(40px, 48px);
}
.slider_info_gradient {
width: min(82%, 720px);
}
}
@media screen and (max-width: 767px) {
.slider_title_word {
font-size: clamp(1.75rem, 9vw, 2.5rem);
white-space: normal;
}
.slider_info_left .slider_info_content,
.slider_info_right .slider_info_content {
margin-left: 40px;
margin-right: 40px;
width: calc(100% - 80px);
max-width: calc(100% - 80px);
}
.slider_info_right .slider_info_content {
text-align: left;
}
}
@media screen and (max-width: 560px) {
.slider_info_left .slider_info_content,
.slider_info_right .slider_info_content {
margin-left: 20px;
margin-right: 20px;
width: calc(100% - 40px);
}
}
@media screen and (max-width: 440px) {
.slider_info_left .slider_info_content,
.slider_info_right .slider_info_content {
margin-left: 20px;
margin-right: 20px;
}
}
.slider_titles {
width: calc(100% - 20px);
max-width: 100%;
height: auto;
padding: 0 10px;
margin: 0 0 10px 0;
position: relative;
overflow: hidden;
}
.slider_titles_rotator {
width: 100%;
max-width: 100%;
height: auto;
padding: 42px 0 0 0;
margin: 0;
position: relative;
display: block;
transform: rotate(-6deg);
transform-origin: left center;
}
.slider_info_right .slider_titles_rotator {
transform: rotate(6deg);
transform-origin: right center;
}
.slider_titles_stack {
width: 100%;
max-width: 100%;
height: auto;
padding: 0 0 0 clamp(18px, 3.5vw, 34px);
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.slider_info_right .slider_titles_stack {
padding: 0 clamp(18px, 3.5vw, 34px) 0 0;
align-items: flex-end;
}
.slider_title_row {
width: auto;
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.slider_info_right .slider_title_row {
justify-content: flex-end;
}
.slider_title_row_one,
.slider_title_row_two,
.slider_title_row_three {
margin: 0;
padding: 0;
}
.slider_title_row_two {
margin-top: -4px;
}
.slider_title_row_three {
margin-top: -2px;
}
.slider_title_decoration {
width: auto;
height: auto;
padding: 0;
margin: 0;
display: block;
flex: 0 0 auto;
object-fit: contain;
pointer-events: none;
}
.slider_title_decoration_star {
width: clamp(30px, 4.5vw, 50px);
margin-top: 4px;
}
.slider_title_word {
display: inline-block;
max-width: 100%;
font-family: "DynaPuff", sans-serif;
font-size: clamp(2.1rem, 5.8vw, 4.8rem);
font-weight: 700;
line-height: 0.95em;
text-transform: uppercase;
letter-spacing: 0.01em;
white-space: nowrap;
}
.slider_title_word_one {
color: #ffffff;
}
.slider_title_word_two {
color: #fed003;
}
.slider_title_word_three {
color: #7ec8f5;
}
.slider_info_content .slider_title_word_one {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
.slider_info_content .slider_title_decoration_star,
.slider_info_content .slider_title_word_two {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
.slider_info_content .slider_title_word_three {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
.slider_info_right .slider_info_content .slider_title_word_one,
.slider_info_right .slider_info_content .slider_title_decoration_star,
.slider_info_right .slider_info_content .slider_title_word_two,
.slider_info_right .slider_info_content .slider_title_word_three {
transform: translate3d(24px, 16px, 0) scale(0.9);
}
.slider_info_content .slider_description,
.slider_info_content .slider_button {
opacity: 0;
}
.slider_info_content.is-animated .slider_title_decoration_shoute {
animation: sliderShouteIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.12s
forwards;
}
.slider_info_content.is-animated .slider_title_word_one {
animation: sliderTitleOneIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.12s
forwards;
}
.slider_info_content.is-animated .slider_title_word_two,
.slider_info_content.is-animated .slider_title_decoration_star {
animation: sliderTitleTwoIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.34s
forwards;
}
.slider_info_content.is-animated .slider_title_word_three {
animation: sliderTitleThreeIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.56s
forwards;
}
.slider_info_content.is-animated .slider_description {
animation: sliderDescriptionIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.72s
forwards;
}
.slider_info_content.is-animated .slider_button {
animation: sliderButtonIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.88s forwards;
}
.slider_info_right
.slider_info_content.is-animated
.slider_title_decoration_shoute {
animation-name: sliderShouteInRight;
}
.slider_info_right .slider_info_content.is-animated .slider_title_word_one {
animation-name: sliderTitleOneInRight;
}
.slider_info_right .slider_info_content.is-animated .slider_title_word_two,
.slider_info_right
.slider_info_content.is-animated
.slider_title_decoration_star {
animation-name: sliderTitleTwoInRight;
}
.slider_info_right .slider_info_content.is-animated .slider_title_word_three {
animation-name: sliderTitleThreeInRight;
}
@keyframes sliderKenBurns {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@keyframes sliderShouteIn {
0% {
opacity: 0;
transform: translate3d(-8px, 10px, 0) scale(0.85);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderShouteInRight {
0% {
opacity: 0;
transform: translate3d(8px, 10px, 0) scale(0.85);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleOneIn {
0% {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleOneInRight {
0% {
opacity: 0;
transform: translate3d(24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleTwoIn {
0% {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleTwoInRight {
0% {
opacity: 0;
transform: translate3d(24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleThreeIn {
0% {
opacity: 0;
transform: translate3d(-24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderTitleThreeInRight {
0% {
opacity: 0;
transform: translate3d(24px, 16px, 0) scale(0.9);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes sliderDescriptionIn {
0% {
opacity: 0;
transform: translate3d(0, 22px, 0);
filter: blur(6px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes sliderButtonIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider_description {
width: 100%;
max-width: 520px;
height: auto;
padding: 0;
margin: 8px 0 0 0;
position: relative;
color: #ffffff;
font-size: clamp(0.95rem, 2vw, 1.15rem);
font-weight: 500;
line-height: 1.45em;
}
.slider_info_right .slider_description {
margin-left: auto;
}
@media screen and (max-width: 1080px) {
.slider_description {
font-size: 0.95rem;
}
}
@media screen and (max-width: 767px) {
.slider_description {
display: none;
}
}
.slider_button {
width: auto;
height: auto;
padding: 0;
margin: 18px 0 4px 0;
position: relative;
display: table;
}
.slider_info_right .slider_button {
margin-left: auto;
}
.slider_button a,
.slider_button a:visited {
width: auto;
height: auto;
padding: 12px 24px;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
color: #1e2f3d;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.2em;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
background-color: #fed003;
border: 0;
border-radius: 999px;
box-shadow: 0 12px 24px rgba(13, 35, 58, 0.18);
transition:
transform 0.22s ease-in-out,
box-shadow 0.22s ease-in-out,
background-color 0.22s ease-in-out;
}
.slider_button a:hover,
.slider_button a:visited:hover {
background-color: #ffe24d;
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(13, 35, 58, 0.24);
}
@media screen and (max-width: 767px) {
.slider_button a,
.slider_button a:visited {
padding: 10px 18px;
font-size: 0.76rem;
}
}
/* MAIN CONTENT */
.content {
width: 100%;
max-width: 1000px;
height: auto;
padding: 70px 0 50px 0;
margin: 0 auto;
position: relative;
clear: both;
display: block;
box-sizing: border-box;
overflow-x: clip;
}
@media screen and (max-width: 1080px) {
.content {
padding-right: 40px;
padding-left: 40px;
}
}
@media screen and (max-width: 560px) {
.content {
padding-right: 20px;
padding-left: 20px;
}
}
.content img,
.content iframe,
.content video,
.content embed,
.content object {
max-width: 100%;
height: auto;
}
.content img.content_box_embelishment,
.content_boxes .content_box_embelishment {
max-width: none !important;
height: auto;
}
.content:has(.content_boxes) {
overflow-x: visible;
}
/* Content tables: fluid width, wrap text, continuous accent edge */
.content:has(table) {
overflow-x: visible;
}
.content table {
width: 100%;
max-width: 100%;
margin: 1.25rem 0 1.6rem;
box-sizing: border-box;
}
.content table thead tr th,
.content table tr th,
.content table tbody tr td,
.content table tr td {
box-sizing: border-box;
}
.content table em,
.content table i {
font-style: italic;
font-weight: 400;
opacity: 0.95;
}
@media screen and (max-width: 767px) {
.content table {
table-layout: auto;
font-size: 0.9em;
margin: 1rem 0 1.35rem;
}
.content table thead tr th,
.content table tr th,
.content table tbody tr td,
.content table tr td {
padding: 0.75rem 0.85rem;
}
.content table tbody tr td:first-child,
.content table tr td:first-child {
width: auto;
min-width: 6.5rem;
}
}
@media screen and (max-width: 560px) {
.content table,
.content table thead,
.content table tbody,
.content table tr,
.content table th,
.content table td {
display: block;
width: 100%;
}
.content table {
border: 0;
border-left: 0;
background: transparent;
box-shadow: none;
font-size: 0.92em;
line-height: 1.45;
margin: 0.9rem 0 1.25rem;
}
.content table thead tr th,
.content table tr th {
margin: 0;
padding: 0.85rem 0.9rem;
border: 0;
border-bottom: 2px solid #d92627;
border-radius: 0;
background: #156cb7;
color: #ffffff;
text-align: left;
}
.content table tr:first-child th {
margin-top: 0;
}
.content table tbody tr,
.content table tr {
margin: 0 0 1rem;
border: 1px solid #c5d8ea;
border-left: 4px solid #d92627;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(13, 35, 58, 0.08);
overflow: hidden;
}
.content table tr:has(th) {
border-color: #156cb7;
border-left-color: #d92627;
}
.content table tbody tr td,
.content table tr td {
border: 0;
border-bottom: 1px solid #e4eef6;
width: 100%;
min-width: 0;
padding: 0.8rem 0.9rem;
background: #ffffff;
text-align: left;
}
.content table tbody tr td:last-child,
.content table tr td:last-child {
border-bottom: 0;
}
.content table tbody tr td:first-child,
.content table tr td:first-child {
width: 100%;
min-width: 0;
padding-bottom: 0.65rem;
background: #f7fbff;
color: #d92627;
font-size: 1em;
font-weight: 800;
}
.content table tbody tr:nth-child(even) td,
.content table tr:nth-child(even) td,
.content table tbody tr:hover td,
.content table tr:hover td {
background: #ffffff;
}
.content table tbody tr:nth-child(even) td:first-child,
.content table tr:nth-child(even) td:first-child,
.content table tbody tr:hover td:first-child,
.content table tr:hover td:first-child {
background: #f7fbff;
}
.content table ul,
.content table ol {
margin: 0.35rem 0 0;
padding-left: 1.15rem;
}
.content table li {
margin-bottom: 0.4rem;
padding-left: 0.1rem;
}
.content table li:last-child {
margin-bottom: 0;
}
}
.content_h2_header {
width: 100%;
height: auto;
padding: 0 0 10px 0;
position: relative;
clear: both;
display: table;
font-size: 3em;
line-height: 1.1;
color: #156cb7;
font-weight: 700;
font-family: "DynaPuff", sans-serif;
}
@media (max-width: 1080px) {
.content_h2_header {
font-size: 2.8em;
}
}
@media (max-width: 767px) {
.content_h2_header {
font-size: 2.6em;
}
}
@media (max-width: 560px) {
.content_h2_header {
font-size: 2.2em;
}
}
.content_h2_header_left {
text-align: left;
margin: 0;
}
.content_h2_header_center {
text-align: center;
margin: 0 auto;
}
.content_h2_sub_header {
width: 100%;
height: auto;
padding: 0 0 10px 0;
position: relative;
clear: both;
display: table;
font-size: 2em;
line-height: 1.1;
color: #d92627;
font-weight: 500;
font-family: "DynaPuff", sans-serif;
}
@media (max-width: 1080px) {
.content_h2_sub_header {
font-size: 1.8em;
}
}
@media (max-width: 767px) {
.content_h2_sub_header {
font-size: 1.7em;
}
}
@media (max-width: 560px) {
.content_h2_sub_header {
font-size: 1.6em;
}
}
.content_h2_sub_header_left {
text-align: left;
margin: 0;
}
.content_h2_sub_header_center {
text-align: center;
margin: 0 auto;
}
.content p {
text-align: justify;
line-height: 1.5;
}
@media (max-width: 560px) {
.content p {
text-align: left;
}
}
.content ol li,
.content ul li {
padding: 0;
margin: 0 0 5px 0;
line-height: 1.3;
}
.content img {
max-width: 100%;
height: auto !important;
}
/* PAGE BUTTONS */
@keyframes pgBtnReveal {
0% {
opacity: 0;
transform: translateY(18px) scale(0.96);
}
70% {
opacity: 1;
transform: translateY(-2px) scale(1.01);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes pgBtnShine {
0% {
transform: translateX(-140%) skewX(-18deg);
}
100% {
transform: translateX(220%) skewX(-18deg);
}
}
.page_buttons {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 8px 0 4px;
margin: 28px auto 24px;
position: relative;
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 14px;
box-sizing: border-box;
}
@media screen and (max-width: 560px) {
.page_buttons {
flex-direction: column;
gap: 12px;
margin: 22px auto 18px;
}
}
.pg_btn {
min-width: 220px;
max-width: 100%;
height: auto;
padding: 14px 24px;
margin: 0;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: 0 1 auto;
box-sizing: border-box;
overflow: hidden;
border: 0;
border-radius: 999px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.2em;
letter-spacing: 0.05em;
color: #ffffff;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
box-shadow:
0 10px 22px rgba(21, 108, 183, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
animation: pgBtnReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease-in-out,
background 0.3s ease-in-out,
color 0.3s ease-in-out,
border-color 0.3s ease-in-out;
}
.pg_btn:nth-child(1) {
animation-delay: 0.05s;
}
.pg_btn:nth-child(2) {
animation-delay: 0.14s;
}
.pg_btn:nth-child(3) {
animation-delay: 0.23s;
}
.pg_btn:nth-child(4) {
animation-delay: 0.32s;
}
.pg_btn:nth-child(n + 5) {
animation-delay: 0.4s;
}
@media screen and (max-width: 767px) {
.pg_btn {
min-width: 200px;
padding: 13px 20px;
font-size: 0.78rem;
}
}
@media screen and (max-width: 560px) {
.pg_btn {
width: 100%;
min-width: 0;
padding: 14px 18px;
}
}
.pg_btn_shine {
width: 42%;
height: 180%;
padding: 0;
margin: 0;
position: absolute;
top: -40%;
left: 0;
z-index: 1;
opacity: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.42) 50%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
.pg_btn_icon,
.pg_btn_label {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
}
.pg_btn_icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg_btn_icon i {
font-size: 1rem;
line-height: 1;
}
.pg_btn_label {
display: inline-block;
white-space: nowrap;
}
@media screen and (max-width: 560px) {
.pg_btn_label {
white-space: normal;
}
}
.pg_btn:hover,
.pg_btn:focus-visible {
transform: translateY(-3px);
color: #ffffff;
}
.pg_btn:hover .pg_btn_shine,
.pg_btn:focus-visible .pg_btn_shine {
opacity: 1;
animation: pgBtnShine 0.72s ease-in-out;
}
.pg_btn:hover .pg_btn_icon,
.pg_btn:focus-visible .pg_btn_icon {
transform: translateX(3px) scale(1.06);
}
.pg_btn:active {
transform: translateY(-1px) scale(0.99);
}
.pg_btn_blue {
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
box-shadow:
0 10px 22px rgba(21, 108, 183, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pg_btn_blue:hover,
.pg_btn_blue:focus-visible {
background: linear-gradient(135deg, #1a7fd4 0%, #156cb7 100%);
box-shadow:
0 14px 28px rgba(21, 108, 183, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.pg_btn_yellow {
background: linear-gradient(135deg, #fed003 0%, #f5c400 100%);
color: #0d233a;
box-shadow:
0 10px 22px rgba(254, 208, 3, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pg_btn_yellow:hover,
.pg_btn_yellow:focus-visible {
background: linear-gradient(135deg, #ffe033 0%, #fed003 100%);
color: #0d233a;
box-shadow:
0 14px 28px rgba(254, 208, 3, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.pg_btn_green {
background: linear-gradient(135deg, #7eb52a 0%, #5f9620 100%);
color: #ffffff;
box-shadow:
0 10px 22px rgba(126, 181, 42, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pg_btn_green:hover,
.pg_btn_green:focus-visible {
background: linear-gradient(135deg, #8fca35 0%, #7eb52a 100%);
color: #ffffff;
box-shadow:
0 14px 28px rgba(126, 181, 42, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.pg_btn_white {
background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);
color: #156cb7;
border: 2px solid rgba(21, 108, 183, 0.22);
box-shadow:
0 8px 18px rgba(13, 35, 58, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.pg_btn_white:hover,
.pg_btn_white:focus-visible {
background: linear-gradient(135deg, #ffffff 0%, #eaf3fb 100%);
color: #0e5594;
border-color: rgba(21, 108, 183, 0.34);
box-shadow:
0 12px 24px rgba(21, 108, 183, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.pg_btn_red {
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
color: #ffffff;
box-shadow:
0 10px 22px rgba(229, 57, 53, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.pg_btn_red:hover,
.pg_btn_red:focus-visible {
background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
color: #ffffff;
box-shadow:
0 14px 28px rgba(229, 57, 53, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* PAGE IMAGES */
@keyframes pageImageReveal {
0% {
opacity: 0;
transform: translateY(22px) scale(0.97);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.page_images {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 28px 0 24px;
position: relative;
clear: both;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 10px;
grid-auto-flow: dense;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.page_images {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 22px 0 18px;
}
}
@media screen and (max-width: 440px) {
.page_images {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
}
.page_images_container {
width: 100%;
height: auto;
padding-bottom: 60%;
margin: 0;
position: relative;
clear: both;
display: block;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(21, 108, 183, 0.12);
background-color: #f4f8fc;
box-shadow:
0 10px 24px rgba(13, 35, 58, 0.08),
0 2px 6px rgba(21, 108, 183, 0.06);
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.34s ease-in-out,
border-color 0.34s ease-in-out;
}
.page_images_container:hover,
.page_images_container:focus-within {
transform: translateY(-4px);
border-color: rgba(21, 108, 183, 0.28);
box-shadow:
0 16px 34px rgba(13, 35, 58, 0.12),
0 4px 12px rgba(21, 108, 183, 0.1);
}
.page_image_bg {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1);
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.page_images_container:hover .page_image_bg,
.page_images_container:focus-within .page_image_bg {
transform: scale(1.07);
}
.page_image_link {
width: 100%;
height: 100%;
padding: 0;
margin: 0 auto;
position: absolute;
inset: 0;
text-decoration: none;
display: block;
z-index: 2;
}
.page_images_container_1 {
grid-column: span 1;
grid-row: span 1;
}
.page_images_container_2 {
grid-column: span 1;
grid-row: span 2;
padding-bottom: calc(120% + 10px);
}
@media screen and (max-width: 767px) {
.page_images_container_2 {
grid-row: span 2;
padding-bottom: calc(120% + 8px);
}
}
@media screen and (max-width: 440px) {
.page_images_container_2 {
grid-column: span 1;
grid-row: span 1;
padding-bottom: 60%;
}
}
.page_images_container_3 {
grid-column: span 3;
grid-row: span 1;
}
@media screen and (max-width: 767px) {
.page_images_container_3 {
grid-column: span 2;
grid-row: span 1;
}
}
@media screen and (max-width: 440px) {
.page_images_container_3 {
grid-column: span 1;
grid-row: span 1;
}
}
.page_image_zoom {
width: 42px;
height: 42px;
padding: 0;
margin: 0;
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #156cb7;
box-shadow: 0 6px 16px rgba(13, 35, 58, 0.14);
opacity: 0;
transform: scale(0.72) rotate(-12deg);
transition:
opacity 0.3s ease-in-out,
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease-in-out,
color 0.3s ease-in-out;
}
.page_image_zoom i {
font-size: 1rem;
line-height: 1;
}
.page_images_container:hover .page_image_zoom,
.page_images_container:focus-within .page_image_zoom {
opacity: 1;
transform: scale(1) rotate(0deg);
background: #fed003;
color: #0d233a;
}
.page_image_filter {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(13, 35, 58, 0.04) 0%,
rgba(13, 35, 58, 0.12) 58%,
rgba(13, 35, 58, 0.52) 100%
);
opacity: 0.72;
transition: opacity 0.34s ease-in-out;
}
.page_images_container:hover .page_image_filter,
.page_images_container:focus-within .page_image_filter {
opacity: 0.92;
}
.page_image_title {
width: calc(100% - 42px);
height: auto;
padding: 10px 10px;
margin: 0;
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 2;
display: block;
text-align: center;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.3em;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
border-radius: 10px;
background: linear-gradient(
135deg,
rgba(21, 108, 183, 0.92) 0%,
rgba(14, 85, 148, 0.88) 100%
);
box-shadow: 0 8px 18px rgba(13, 35, 58, 0.18);
transform: translateY(0);
opacity: 0.96;
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.34s ease-in-out,
box-shadow 0.34s ease-in-out;
}
.page_images_container:hover .page_image_title,
.page_images_container:focus-within .page_image_title {
transform: translateY(5px);
opacity: 1;
box-shadow: 0 10px 22px rgba(13, 35, 58, 0.22);
}
@media screen and (max-width: 560px) {
.page_image_title {
font-size: 0.72rem;
padding: 8px 10px;
}
.page_image_zoom {
width: 38px;
height: 38px;
top: 10px;
right: 10px;
}
}
/* READ MORE BOXES */
.qboxes {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 52px 5%;
margin: 0;
position: relative;
clear: both;
box-sizing: border-box;
background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
overflow: hidden;
}
@media screen and (max-width: 767px) {
.qboxes {
padding: 40px 5%;
}
}
@media screen and (max-width: 560px) {
.qboxes {
padding: 34px 5%;
}
}
.qboxes_inner {
width: 100%;
max-width: 1440px;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
}
.qboxes_grid {
width: 100%;
height: auto;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
align-items: stretch;
}
@media screen and (max-width: 1280px) {
.qboxes_grid {
gap: 16px;
}
}
@media screen and (max-width: 767px) {
.qboxes_grid {
gap: 14px;
}
}
@media screen and (max-width: 560px) {
.qboxes_grid {
gap: 14px;
}
}
.qbox_card {
width: 100%;
min-width: 0;
height: 100%;
padding: 34px 18px 28px;
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
border-radius: 16px;
border: 1px solid rgba(21, 108, 183, 0.08);
background: #ffffff;
box-shadow:
0 12px 28px rgba(13, 35, 58, 0.08),
0 2px 8px rgba(21, 108, 183, 0.05);
overflow: hidden;
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.34s ease-in-out,
border-color 0.34s ease-in-out;
flex: 0 1 calc((100% - 90px) / 6);
}
.qbox_card::before {
content: "";
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
background: radial-gradient(
circle at 50% 0%,
rgba(21, 108, 183, 0.08),
transparent 62%
);
transition: opacity 0.34s ease-in-out;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.qbox_card {
padding: 28px 16px 24px;
}
}
@media screen and (max-width: 1280px) {
.qbox_card {
flex-basis: calc((100% - 32px) / 3);
}
}
@media screen and (max-width: 767px) {
.qbox_card {
flex-basis: calc((100% - 14px) / 2);
}
}
@media screen and (max-width: 560px) {
.qbox_card {
flex-basis: 100%;
}
}
.qbox_card:hover,
.qbox_card:focus-within {
transform: translateY(-8px);
border-color: rgba(21, 108, 183, 0.18);
box-shadow:
0 20px 40px rgba(13, 35, 58, 0.12),
0 6px 16px rgba(21, 108, 183, 0.1);
}
.qbox_card:hover::before,
.qbox_card:focus-within::before {
opacity: 1;
}
.qbox_icon {
width: 88px;
height: 88px;
padding: 0;
margin: 0 0 22px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 88px;
border-radius: 50%;
background: linear-gradient(
145deg,
var(--qbox-accent, #156cb7) 0%,
color-mix(in srgb, var(--qbox-accent, #156cb7) 72%, #000000 28%) 100%
);
box-shadow:
0 10px 22px
color-mix(in srgb, var(--qbox-accent, #156cb7) 34%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s ease-in-out;
}
@media screen and (max-width: 767px) {
.qbox_icon {
width: 78px;
height: 78px;
flex-basis: 78px;
margin-bottom: 18px;
}
}
.qbox_icon_ring {
width: calc(100% + 14px);
height: calc(100% + 14px);
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
border: 2px solid rgba(254, 208, 3, 0.45);
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%) scale(0.82);
transition:
opacity 0.32s ease-in-out,
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.qbox_card:hover .qbox_icon,
.qbox_card:focus-within .qbox_icon {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 14px 28px
color-mix(in srgb, var(--qbox-accent, #156cb7) 42%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.qbox_card:hover .qbox_icon_ring,
.qbox_card:focus-within .qbox_icon_ring {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
animation: contactIconRingPulse 2.4s ease-out infinite;
}
.qbox_icon i {
position: relative;
z-index: 1;
font-size: 2rem;
line-height: 1;
color: #ffffff;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 767px) {
.qbox_icon i {
font-size: 1.75rem;
}
}
.qbox_card:hover .qbox_icon i,
.qbox_card:focus-within .qbox_icon i {
transform: scale(1.06);
}
.qbox_card_green {
--qbox-accent: #7eb52a;
}
.qbox_card_blue {
--qbox-accent: #156cb7;
}
.qbox_card_yellow {
--qbox-accent: #f0b90b;
}
.qbox_card_purple {
--qbox-accent: #7b4fd6;
}
.qbox_card_red {
--qbox-accent: #e53935;
}
.qbox_card_teal {
--qbox-accent: #1aa6a6;
}
.qbox_title {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 14px;
position: relative;
z-index: 1;
font-size: 1.2rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0d233a;
}
@media screen and (max-width: 1280px) {
.qbox_title {
font-size: 0.86rem;
}
}
.qbox_description {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 24px;
position: relative;
z-index: 1;
flex: 1 1 auto;
font-size: 0.86rem;
font-weight: 400;
line-height: 1.55em;
color: rgba(13, 35, 58, 0.72);
}
@media screen and (max-width: 767px) {
.qbox_description {
font-size: 0.82rem;
margin-bottom: 20px;
}
}
.qbox_link {
width: auto;
height: auto;
padding: 0;
margin: auto 0 0;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.2em;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #156cb7;
transition:
color 0.28s ease-in-out,
gap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.qbox_link_label {
display: inline-block;
}
.qbox_link_arrow {
display: inline-block;
font-size: 1rem;
line-height: 1;
transform: translateX(0);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.qbox_link:hover,
.qbox_link:focus-visible {
color: #0e5594;
gap: 12px;
}
.qbox_link:hover .qbox_link_arrow,
.qbox_link:focus-visible .qbox_link_arrow {
transform: translateX(4px);
}
/* MAP */
.map_section {
width: 100%;
height: auto;
padding: 18px 0 8px 0;
margin: 0 auto;
position: relative;
clear: both;
}
.map_card {
width: 100%;
height: auto;
padding: 20px;
margin: 0;
position: relative;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(244, 249, 253, 0.98) 100%
);
border: 1px solid rgba(21, 108, 183, 0.12);
border-radius: 14px;
box-shadow:
0 10px 24px rgba(13, 35, 58, 0.08),
0 2px 6px rgba(21, 108, 183, 0.06);
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.32s ease-in-out;
}
.map_card::before {
content: "";
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.55;
background: radial-gradient(
circle at 92% 8%,
rgba(254, 208, 3, 0.14),
transparent 52%
);
pointer-events: none;
}
.map_card:hover {
border-color: rgba(21, 108, 183, 0.24);
}
@media screen and (max-width: 560px) {
.map_card {
padding: 18px 16px 14px 16px;
}
}
.map_accent {
width: 4px;
height: calc(100% - 18px);
padding: 0;
margin: 0;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, #156cb7 0%, #7eb52a 100%);
}
.map_header {
width: 100%;
height: auto;
padding: 0 0 18px 0;
margin: 0 0 16px 0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid rgba(21, 108, 183, 0.1);
}
@media screen and (max-width: 767px) {
.map_header {
flex-wrap: wrap;
gap: 14px;
}
}
.map_header_icon {
width: 58px;
height: 58px;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 58px;
border-radius: 16px;
background: linear-gradient(145deg, #156cb7 0%, #0f5a98 100%);
box-shadow:
0 8px 18px rgba(21, 108, 183, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media screen and (max-width: 560px) {
.map_header_icon {
width: 52px;
height: 52px;
flex-basis: 52px;
border-radius: 14px;
}
}
.map_header_icon_ring {
width: calc(100% + 10px);
height: calc(100% + 10px);
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
border: 2px solid rgba(254, 208, 3, 0.45);
border-radius: 18px;
transform: translate(-50%, -50%);
pointer-events: none;
animation: contactIconRingPulse 2.8s ease-out infinite;
}
.map_header_icon i {
position: relative;
z-index: 1;
font-size: 1.45rem;
color: #ffffff;
}
@media screen and (max-width: 560px) {
.map_header_icon i {
font-size: 1.3rem;
}
}
.map_header_copy {
width: auto;
height: auto;
padding: 0;
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.map_title {
width: 100%;
height: auto;
padding: 0 0 4px 0;
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: #0d233a;
line-height: 1.25em;
}
@media screen and (max-width: 560px) {
.map_title {
font-size: 1.15rem;
}
}
.map_subtitle {
width: 100%;
height: auto;
padding: 0;
margin: 0;
font-size: 0.92rem;
font-weight: 500;
color: rgba(13, 35, 58, 0.72);
line-height: 1.45em;
}
.map_directions_btn {
width: auto;
height: auto;
padding: 11px 18px;
margin: 0 0 0 auto;
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #fed003 0%, #f5c400 100%);
color: #0d233a;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.2em;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
box-shadow:
0 8px 18px rgba(254, 208, 3, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition:
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.28s ease-in-out,
background 0.28s ease-in-out;
}
.map_directions_btn i {
font-size: 1rem;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.map_directions_btn:hover,
.map_directions_btn:focus-visible {
transform: translateY(-2px);
background: linear-gradient(135deg, #ffe033 0%, #fed003 100%);
color: #0d233a;
box-shadow:
0 12px 24px rgba(254, 208, 3, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.map_directions_btn:hover i,
.map_directions_btn:focus-visible i {
transform: translateX(2px);
}
@media screen and (max-width: 767px) {
.map_directions_btn {
width: calc(100% - 36px);
margin: 0;
}
}
.gmap_canvas,
.map_frame_shell {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
overflow: hidden;
background: none !important;
border-radius: 10px;
border: 1px solid rgba(21, 108, 183, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.map_frame_shell {
height: var(--map-height, 400px);
min-height: 280px;
}
@media screen and (max-width: 767px) {
.map_frame_shell {
height: min(var(--map-height, 400px), 340px);
}
}
@media screen and (max-width: 560px) {
.map_frame_shell {
height: min(var(--map-height, 400px), 300px);
border-radius: 8px;
}
}
.gmap_canvas_iframe,
#gmap_canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
display: block;
border: 0;
}
.mapouter {
text-align: left;
}
/* LOGO SLIDER */
.logo_slider_section {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto 0 auto;
position: relative;
clear: both;
overflow: hidden;
}
.logo_slider_header {
width: 100%;
height: auto;
padding: 0 0 18px 0;
margin: 0 auto 6px auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2.5vw, 22px);
}
.logo_slider_header_shout {
width: clamp(34px, 5vw, 58px);
height: auto;
padding: 0;
margin: 0;
display: block;
flex: 0 0 auto;
object-fit: contain;
pointer-events: none;
}
.logo_slider_header_title {
width: auto;
max-width: min(100%, 760px);
height: auto;
padding: 0;
margin: 0;
flex: 0 1 auto;
color: #156cb7;
font-size: clamp(1.35rem, 2.8vw, 2rem);
font-weight: 700;
line-height: 1.2em;
letter-spacing: 0.01em;
text-align: center;
text-transform: none;
}
@media screen and (max-width: 767px) {
.logo_slider_header {
padding-bottom: 14px;
gap: 10px;
}
.logo_slider_header_title {
font-size: clamp(1.15rem, 4.8vw, 1.55rem);
}
}
@media screen and (max-width: 440px) {
.logo_slider_header_shout {
width: clamp(28px, 8vw, 40px);
}
}
.logo_slider {
width: 100%;
height: auto;
padding: 10px 0;
margin: 0 auto;
position: relative;
background-color: #ffffff;
display: block;
clear: both;
overflow: hidden;
}
.logo_slider .slick-list {
overflow: hidden;
}
/* FOOTER */
.footer {
width: 100%;
height: auto;
padding: 72px 5% 36px 5%;
margin: 0 auto;
position: relative;
clear: both;
overflow: hidden;
background: linear-gradient(160deg, #0d233a 0%, #156cb7 52%, #0f5a98 100%);
background-size: 180% 180%;
animation: footerGradientDrift 18s ease-in-out infinite alternate;
box-sizing: border-box;
}
.footer::after {
content: "";
width: 100%;
height: 4px;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: linear-gradient(
90deg,
rgba(254, 208, 3, 0) 0%,
rgba(254, 208, 3, 0.95) 50%,
rgba(254, 208, 3, 0) 100%
);
background-size: 220% 100%;
animation: footerAccentSweep 7s ease-in-out infinite;
}
@media screen and (max-width: 1080px) {
.footer {
padding-right: 20px;
padding-left: 20px;
}
}
.footer_nowapp {
padding-bottom: 36px !important;
}
@media screen and (max-width: 1080px) {
.footer_nowapp {
padding-bottom: 36px !important;
}
}
.footer_bg {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.footer_bg_orb {
width: clamp(180px, 28vw, 360px);
height: clamp(180px, 28vw, 360px);
padding: 0;
margin: 0;
position: absolute;
border-radius: 50%;
filter: blur(12px);
opacity: 0.34;
}
.footer_bg_orb_one {
top: -8%;
left: -6%;
background: radial-gradient(
circle,
rgba(254, 208, 3, 0.55) 0%,
rgba(254, 208, 3, 0) 68%
);
animation: footerOrbFloatOne 14s ease-in-out infinite;
}
.footer_bg_orb_two {
top: 18%;
right: -8%;
background: radial-gradient(
circle,
rgba(126, 181, 42, 0.42) 0%,
rgba(126, 181, 42, 0) 70%
);
animation: footerOrbFloatTwo 16s ease-in-out infinite;
}
.footer_bg_orb_three {
bottom: -16%;
left: 38%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0) 72%
);
animation: footerOrbFloatThree 20s ease-in-out infinite;
}
.footer_inner {
width: 100%;
max-width: 1180px;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
z-index: 3;
}
.footer_socials {
width: 100%;
height: auto;
padding: 0 0 34px 0;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
text-align: center;
}
.footer_socials a {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: inline-flex;
text-decoration: none;
}
.footer_socials i {
width: 44px;
height: 44px;
padding: 0;
margin: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 14px;
color: #ffffff;
font-size: 1.05rem;
line-height: 1;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
transition:
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
color 0.28s ease-in-out,
background-color 0.28s ease-in-out,
border-color 0.28s ease-in-out,
box-shadow 0.28s ease-in-out;
}
@media only screen and (max-width: 767px) {
.footer_socials i {
width: 38px;
height: 38px;
font-size: 0.92rem;
border-radius: 12px;
}
}
.footer_socials a:hover i,
.footer_socials a:focus-visible i {
transform: translateY(-3px) scale(1.05);
border-color: rgba(254, 208, 3, 0.85);
color: #0d233a;
background: #fed003;
box-shadow: 0 10px 22px rgba(13, 35, 58, 0.24);
}
.footer_addresses {
width: 100%;
height: auto;
padding: 0 0 28px 0;
margin: 0 auto;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 24px;
align-items: stretch;
}
@media only screen and (max-width: 767px) {
.footer_addresses {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding-bottom: 22px;
}
}
.footer_address_holder {
width: 100%;
max-width: 100%;
height: auto;
min-width: 0;
padding: 22px 24px;
margin: 0;
position: relative;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.92);
font-size: 1rem;
line-height: 1.45em;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(8px);
box-shadow: 0 12px 28px rgba(13, 35, 58, 0.16);
overflow: hidden;
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.32s ease-in-out,
box-shadow 0.32s ease-in-out;
}
.footer_address_holder:hover {
transform: translateY(-3px);
border-color: rgba(254, 208, 3, 0.35);
box-shadow: 0 16px 34px rgba(13, 35, 58, 0.22);
}
@media only screen and (max-width: 767px) {
.footer_address_holder {
padding: 18px 16px;
font-size: 0.94rem;
text-align: center;
}
}
.footer_address_header {
width: 100%;
height: auto;
padding: 0 0 4px 0;
margin: 0;
color: #fed003;
font-family: "DynaPuff", sans-serif;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.2em;
}
.footer_address_info {
width: 100%;
height: auto;
padding: 0 0 25px 0;
margin: 0;
position: relative;
font-weight: 400;
font-size: 0.98em;
color: rgba(255, 255, 255, 0.88);
}
.footer_address_info:last-child {
padding-bottom: 0;
}
.footer_address_holder_logo {
display: flex;
align-items: center;
justify-content: center;
}
.footer_address_holder img {
width: auto;
max-width: 100%;
height: 180px;
padding: 0;
margin: 0;
display: block;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(13, 35, 58, 0.28));
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer_address_holder_logo:hover img {
transform: scale(1.03);
}
@media only screen and (max-width: 767px) {
.footer_address_holder img {
width: 60%;
height: auto;
}
}
@media only screen and (max-width: 560px) {
.footer_address_holder img {
width: 80%;
}
}
.footer_bottom {
width: 100%;
height: auto;
padding: 22px 0 0 0;
margin: 0;
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.privacy_policy {
width: 100%;
height: auto;
padding: 0 0 14px 0;
margin: 0 auto;
position: relative;
text-align: center;
color: rgba(255, 255, 255, 0.88);
font-size: 1rem;
font-weight: 600;
line-height: 1.2em;
}
@media screen and (max-width: 560px) {
.privacy_policy {
font-size: 0.95rem;
}
}
.privacy_policy a,
.privacy_policy a:visited {
width: auto;
height: auto;
padding: 8px 16px;
margin: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #ffffff;
text-decoration: none;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.06);
transition:
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
color 0.28s ease-in-out,
background-color 0.28s ease-in-out,
border-color 0.28s ease-in-out;
}
@media only screen and (max-width: 560px) {
.privacy_policy a,
.privacy_policy a:visited {
width: 100%;
box-sizing: border-box;
}
}
.privacy_policy a:hover,
.privacy_policy a:visited:hover,
.privacy_policy a:focus-visible {
transform: translateY(-2px);
color: #0d233a;
background: #fed003;
border-color: #fed003;
}
.credentials {
width: 100%;
height: auto;
padding: 0 0 6px 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
color: rgba(255, 255, 255, 0.9);
font-size: 0.92rem;
font-weight: 500;
line-height: 1.45em;
}
.credits {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
clear: both;
text-align: center;
color: rgba(255, 255, 255, 0.78);
font-size: 0.88rem;
font-weight: 500;
line-height: 1.45em;
}
.credits a,
.credits a:visited {
color: #fed003;
text-decoration: none;
transition: color 0.22s ease-in-out;
}
.credits a:hover,
.credits a:visited:hover,
.credits a:focus-visible {
color: #ffffff;
text-decoration: underline;
}
@keyframes footerGradientDrift {
0% {
background-position: 0% 40%;
}
100% {
background-position: 100% 60%;
}
}
@keyframes footerAccentSweep {
0% {
background-position: -120% 0;
}
100% {
background-position: 120% 0;
}
}
@keyframes footerOrbFloatOne {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(28px, 18px, 0) scale(1.08);
}
}
@keyframes footerOrbFloatTwo {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-24px, 22px, 0) scale(1.06);
}
}
@keyframes footerOrbFloatThree {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(16px, -20px, 0) scale(1.1);
}
}
/* FONTAWESOME ICONS */
/* Search and filter layout */
.fa_filter_bar {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto 20px auto;
position: relative;
clear: both;
display: table;
overflow: hidden;
}
#fa-search {
width: calc(100% - 200px);
height: 20px;
padding: 10px;
margin: 0 5px 0 0;
position: relative;
clear: none;
float: left;
display: table;
border: 2px solid #cccccc;
border-radius: 4px;
font-family: "Montserrat", serif;
font-size: 1em;
}
@media only screen and (max-width: 560px) {
#fa-search {
width: calc(100% - 24px);
margin: 0 0 5px 0;
clear: both;
float: none;
}
}
#style-filter {
width: 166px;
height: 44px;
padding: 10px;
margin: 0;
position: relative;
clear: none;
float: right;
border: 2px solid #cccccc;
border-radius: 4px;
font-size: 1em;
font-family: "Montserrat", serif;
}
@media only screen and (max-width: 560px) {
#style-filter {
width: 100%;
clear: both;
float: none;
}
}
.icons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 15px;
}
.icon-item {
text-align: center;
border-radius: 10px;
padding: 12px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: 0.2s;
background-color: #efefef;
}
.icon-item:hover {
background: #e4e4e4;
transform: scale(1.05);
}
.icon-name {
font-size: 12px;
margin-top: 6px;
color: #000000;
}
.icon-tags {
margin-top: 6px;
}
.tag {
display: inline-block;
background: #ffffff;
border-radius: 5px;
font-size: 9px;
color: #000000;
padding: 2px 4px;
font-weight: 500;
margin: 2px;
}
.copy-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 8px 14px;
border-radius: 8px;
display: none;
}
#loadMore {
margin: 30px auto;
display: block;
background: #4b80b6;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
font-family: "Montserrat", serif;
}
#loadMore:hover {
background: #365de0;
}
/* PHOTO GALLERY */
.portfolio {
width: 100%;
height: auto;
padding: 0;
margin: 20px auto 0 auto;
position: relative;
clear: both;
display: table;
}
.album_gallery,
.photo_gallery {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 10px auto 24px;
position: relative;
clear: both;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 10px;
grid-auto-flow: dense;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.album_gallery,
.photo_gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 18px;
}
}
@media screen and (max-width: 440px) {
.album_gallery,
.photo_gallery {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
}
.gallery_tile_link {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
.gallery_tile_link .page_images_container {
width: 100%;
margin: 0;
}
.gallery_tile_link:hover .page_images_container,
.gallery_tile_link:focus-visible .page_images_container {
transform: translateY(-4px);
border-color: rgba(21, 108, 183, 0.28);
box-shadow:
0 16px 34px rgba(13, 35, 58, 0.12),
0 4px 12px rgba(21, 108, 183, 0.1);
}
.gallery_tile_link:hover .page_image_bg,
.gallery_tile_link:focus-visible .page_image_bg {
transform: scale(1.07);
}
.gallery_tile_link:hover .page_image_zoom,
.gallery_tile_link:focus-visible .page_image_zoom {
opacity: 1;
transform: scale(1) rotate(0deg);
background: #fed003;
color: #0d233a;
}
.gallery_tile_link:hover .page_image_filter,
.gallery_tile_link:focus-visible .page_image_filter {
opacity: 0.92;
}
.gallery_tile_link:hover .page_image_title,
.gallery_tile_link:focus-visible .page_image_title {
transform: translateY(5px);
opacity: 1;
box-shadow: 0 10px 22px rgba(13, 35, 58, 0.22);
}
.gallery_tile_link.album_holder_1 {
grid-column: span 1;
grid-row: span 1;
}
.gallery_tile_link.album_holder_2 {
grid-column: span 1;
grid-row: span 2;
}
@media screen and (max-width: 767px) {
.gallery_tile_link.album_holder_2 {
grid-row: span 2;
}
}
@media screen and (max-width: 440px) {
.gallery_tile_link.album_holder_2 {
grid-column: span 1;
grid-row: span 1;
}
.gallery_tile_link.album_holder_2 .page_images_container_2 {
padding-bottom: 60%;
}
}
.gallery_tile_link.album_holder_3 {
grid-column: span 3;
grid-row: span 1;
}
@media screen and (max-width: 767px) {
.gallery_tile_link.album_holder_3 {
grid-column: span 2;
grid-row: span 1;
}
}
@media screen and (max-width: 440px) {
.gallery_tile_link.album_holder_3 {
grid-column: span 1;
grid-row: span 1;
}
}
.album_header_name {
width: 100%;
max-width: 100%;
height: auto;
padding: 14px 18px;
margin: 0 auto 18px;
position: relative;
clear: both;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
box-sizing: border-box;
border-radius: 12px;
border: 1px solid rgba(21, 108, 183, 0.12);
background: linear-gradient(135deg, #ffffff 0%, #f4f8fc 100%);
box-shadow: 0 8px 20px rgba(13, 35, 58, 0.06);
text-align: center;
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #0d233a;
line-height: 1.3em;
}
@media screen and (max-width: 767px) {
.album_header_name {
padding: 12px 14px;
font-size: 0.84rem;
}
}
.album_header_name a,
.album_header_name a:visited {
color: #156cb7;
text-decoration: none;
transition: color 0.28s ease-in-out;
}
.album_header_name a:hover,
.album_header_name a:visited:hover,
.album_header_name a:focus-visible {
color: #0e5594;
text-decoration: none;
}
.album_header_name i {
color: rgba(21, 108, 183, 0.55);
font-size: 0.9rem;
}
.album_header_name span {
color: #0d233a;
}
.album_button {
clear: both;
display: table;
height: auto;
margin: 0 auto;
padding: 40px 0 20px 0;
position: relative;
text-align: center;
width: auto;
}
.album_button a,
.album_button a:visited {
border: 1px solid #afb374;
color: #afb374;
font-family: "Font Awesome 6 Pro", "Noto Sans", sans-serif;
font-size: 1.2em;
margin: 0 auto;
padding: 10px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.album_button a:hover,
.album_button a:visited:hover {
border: 1px solid #4e502e;
color: #4e502e;
}
/* CALL TO ACTION */
@keyframes ctaDoodleFloat {
0%,
100% {
transform: translateY(0) rotate(10deg);
}
50% {
transform: translateY(-10px) rotate(10deg);
}
}
@keyframes ctaBlobFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-8px) rotate(-1.5deg);
}
}
@keyframes ctaSwirlDraw {
0% {
opacity: 0.25;
transform: rotate(0deg) scale(1.8);
}
50% {
opacity: 0.85;
transform: rotate(180deg) scale(1);
}
100% {
opacity: 0.25;
transform: rotate(360deg) scale(1.8);
}
}
@keyframes ctaPanelReveal {
0% {
opacity: 0;
transform: translateY(28px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ctaButtonPulse {
0%,
100% {
box-shadow: 0 12px 28px rgba(126, 181, 42, 0.32);
}
50% {
box-shadow: 0 16px 34px rgba(126, 181, 42, 0.42);
}
}
.cta_section {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 56px 5%;
margin: 0;
position: relative;
clear: both;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
}
@media screen and (max-width: 767px) {
.cta_section {
padding: 42px 5%;
}
}
.cta_doodles {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.cta_doodle {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: absolute;
color: rgba(255, 255, 255, 0.82);
font-size: 2.4rem;
line-height: 1;
animation: ctaDoodleFloat 5.5s ease-in-out infinite;
}
@media screen and (max-width: 560px) {
.cta_doodle {
opacity: 0.55;
transform: scale(0.8);
}
}
.cta_doodle_pencil {
top: 10%;
left: 4%;
font-size: 2.8rem;
animation-delay: 0.2s;
}
.cta_doodle_star {
top: 14%;
left: 10%;
color: #fed003;
font-size: 2rem;
animation-delay: 0.8s;
}
.cta_doodle_star_sm {
top: 85%;
left: 2%;
font-size: 2.6rem;
color: rgba(255, 255, 255, 0.75);
animation-delay: 1.4s;
}
.cta_doodle_cloud {
top: 8%;
right: 8%;
font-size: 2.6rem;
animation-delay: 0.5s;
}
.cta_doodle_apple {
bottom: 15%;
right: 2%;
font-size: 2.6rem;
animation-delay: 0.5s;
}
.cta_doodle_hand_heart {
bottom: 5%;
right: 14%;
font-size: 2.6rem;
animation-delay: 0.5s;
}
.cta_doodle_swirl {
width: 72px;
height: 72px;
border: 2px dashed rgba(255, 255, 255, 0.42);
border-radius: 50%;
animation: ctaSwirlDraw 12s linear infinite;
}
.cta_doodle_swirl_1 {
top: 48%;
left: 7%;
}
.cta_doodle_swirl_2 {
top: 22%;
right: 24%;
width: 56px;
height: 56px;
animation-delay: 2s;
}
.cta_panel {
width: 100%;
max-width: 1240px;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
align-items: center;
gap: clamp(16px, 2.4vw, 32px);
opacity: 0;
transform: translateY(28px);
}
.cta_section.is-in-view .cta_panel {
animation: ctaPanelReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cta_section_promo .cta_panel {
grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
}
.cta_section_form .cta_panel {
grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
}
@media screen and (max-width: 960px) {
.cta_section_promo .cta_panel,
.cta_section_form .cta_panel {
grid-template-columns: minmax(0, 1fr);
}
}
.cta_figure {
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
@media screen and (max-width: 960px) {
.cta_figure {
margin-bottom: 8px;
}
}
.cta_figure_blob {
width: min(100%, 480px);
height: auto;
padding: 16px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
background: #ffffff;
border-radius: 58% 42% 62% 38% / 48% 58% 42% 52%;
box-shadow: 0 20px 44px rgba(13, 35, 58, 0.22);
animation: ctaBlobFloat 6.5s ease-in-out infinite;
}
.cta_section.is-in-view .cta_figure_blob {
animation: ctaBlobFloat 6.5s ease-in-out 0.4s infinite;
}
.cta_figure_blob img {
width: 100%;
height: auto;
display: block;
border-radius: 54% 46% 58% 42% / 46% 54% 46% 54%;
object-fit: cover;
}
.cta_content,
.cta_left,
.cta_info {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
}
@media screen and (max-width: 960px) {
.cta_content,
.cta_left,
.cta_info {
text-align: center;
}
}
.cta_left {
display: flex;
flex-direction: column;
gap: 18px;
}
.cta_title {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 900;
line-height: 1.05em;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media screen and (max-width: 560px) {
.cta_title {
font-size: 1.65rem;
}
}
.cta_title_line {
display: block;
color: #ffffff;
text-shadow: 0 3px 12px rgba(13, 35, 58, 0.18);
}
.cta_title_accent {
display: block;
color: #fed003;
text-shadow: 0 3px 12px rgba(13, 35, 58, 0.18);
}
.cta_description {
width: 100%;
max-width: 560px;
height: auto;
padding: 0;
margin: 0 0 26px;
font-size: clamp(0.95rem, 1.8vw, 1.08rem);
font-weight: 400;
line-height: 1.6em;
color: rgba(255, 255, 255, 0.92);
}
@media screen and (max-width: 960px) {
.cta_description {
margin-left: auto;
margin-right: auto;
}
}
.cta_button {
width: auto;
min-width: 220px;
height: auto;
padding: 14px 28px;
margin: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #7eb52a 0%, #5f9620 100%);
color: #ffffff;
font-size: 0.82rem;
font-weight: 800;
line-height: 1.2em;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 12px 28px rgba(126, 181, 42, 0.32);
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease-in-out,
background 0.3s ease-in-out;
}
.cta_section.is-in-view .cta_button {
animation: ctaButtonPulse 3.2s ease-in-out 1.2s infinite;
}
.cta_button:hover,
.cta_button:focus-visible {
transform: translateY(-3px);
background: linear-gradient(135deg, #8fca35 0%, #7eb52a 100%);
color: #ffffff;
box-shadow: 0 16px 34px rgba(126, 181, 42, 0.4);
}
@media screen and (max-width: 560px) {
.cta_button {
width: calc(100% - 54px);
min-width: 0;
}
}
.cta_button_label {
position: relative;
z-index: 1;
}
.cta_form_wrap {
width: 100%;
min-width: 0;
height: auto;
padding: 28px 24px;
margin: 0;
position: relative;
box-sizing: border-box;
border-radius: 18px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.65);
box-shadow: 0 18px 40px rgba(13, 35, 58, 0.16);
}
@media screen and (max-width: 767px) {
.cta_form_wrap {
padding: 22px 18px;
}
}
.cta_form_wrap .enquire {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.cta_form_wrap .form_group {
width: 100%;
margin-bottom: 12px;
}
.cta_form_wrap .form_label,
.cta_form_wrap .form_label label {
padding: 0 0 4px 0;
color: #0d233a;
font-size: 0.82rem;
font-weight: 700;
}
.cta_form_wrap .form_field input,
.cta_form_wrap .form_field textarea,
.cta_form_wrap .form_field select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid rgba(21, 108, 183, 0.16);
border-radius: 10px;
background: #f7f9fc;
font-family: "Montserrat", sans-serif;
color: #0d233a;
font-size: 0.9rem;
transition:
border-color 0.28s ease-in-out,
box-shadow 0.28s ease-in-out,
background 0.28s ease-in-out;
}
.cta_form_wrap .form_field input:focus,
.cta_form_wrap .form_field textarea:focus,
.cta_form_wrap .form_field select:focus {
border-color: rgba(21, 108, 183, 0.42);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(21, 108, 183, 0.12);
}
.cta_form_wrap .gen_btn {
width: 100%;
margin-top: 8px;
padding: 14px 24px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1em;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
box-shadow: 0 10px 22px rgba(21, 108, 183, 0.24);
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease-in-out;
}
.cta_form_wrap .gen_btn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #1a7fd4 0%, #156cb7 100%);
box-shadow: 0 14px 28px rgba(21, 108, 183, 0.32);
}
.red_asterisk {
color: #cf2e2e;
font-weight: 800;
}
.enquiry_form_error {
margin: 0 0 18px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(207, 46, 46, 0.28);
background: rgba(207, 46, 46, 0.08);
color: #9f1f1f;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.5;
}
.enquire_fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
@media screen and (max-width: 767px) {
.enquire_fields {
grid-template-columns: 1fr;
gap: 0;
}
.enquire_fields .form_group_half {
grid-column: 1 / -1;
}
}
.enquire_fields .form_group {
width: 100%;
margin-bottom: 22px;
}
.enquire_fields .form_group_full {
grid-column: 1 / -1;
}
.enquire_fields .form_group_submit {
grid-column: 1 / -1;
margin-bottom: 0;
}
.enquire .form_label,
.enquire .form_label label {
padding: 0 0 4px 0;
color: #0d233a;
font-size: 0.82rem;
font-weight: 700;
}
.enquire .form_field input,
.enquire .form_field textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid rgba(21, 108, 183, 0.16);
border-radius: 10px;
background: #f7f9fc;
font-family: "Montserrat", sans-serif;
color: #0d233a;
font-size: 0.9rem;
transition:
border-color 0.28s ease-in-out,
box-shadow 0.28s ease-in-out,
background 0.28s ease-in-out;
}
.enquire .form_field textarea {
min-height: 130px;
resize: vertical;
}
.enquire .form_field input:focus,
.enquire .form_field textarea:focus {
border-color: rgba(21, 108, 183, 0.42);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(21, 108, 183, 0.12);
outline: none;
}
.enquire_submit_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 220px;
padding: 14px 24px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1em;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
box-shadow: 0 10px 22px rgba(21, 108, 183, 0.24);
cursor: pointer;
transition:
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease-in-out,
background 0.3s ease-in-out;
}
.enquire_submit_btn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #1a7fd4 0%, #156cb7 100%);
box-shadow: 0 14px 28px rgba(21, 108, 183, 0.32);
}
.enquire_submit_btn:disabled {
opacity: 0.7;
cursor: wait;
transform: none;
}
@media screen and (max-width: 767px) {
.enquire_submit_btn {
width: 100%;
}
}
/* ***************************** */
/* CONTENT BOXES */
.content_boxes {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 25px 5%;
margin: 0;
position: relative;
clear: both;
box-sizing: border-box;
background: #ffffff;
}
@media screen and (max-width: 767px) {
.content_boxes {
padding: 25px 5%;
}
}
.content_boxes_inner {
width: 100%;
max-width: 1240px;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
gap: clamp(48px, 7vw, 96px);
}
.content_box {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
}
.content_box_row {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 46%);
align-items: start;
gap: clamp(32px, 5vw, 80px);
}
@media screen and (max-width: 960px) {
.content_box_row {
grid-template-columns: 1fr;
gap: 32px;
}
}
.content_box_reverse .content_box_copy {
grid-column: 2;
grid-row: 1;
}
.content_box_reverse .content_box_visual {
grid-column: 1;
grid-row: 1;
}
@media screen and (max-width: 960px) {
.content_box_reverse .content_box_copy,
.content_box_reverse .content_box_visual {
grid-column: auto;
grid-row: auto;
}
.content_box_row {
display: flex;
flex-direction: column;
}
.content_box_copy {
order: 1;
}
.content_box_visual {
order: 2;
}
}
.content_box_copy {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
@media screen and (max-width: 960px) {
.content_box_copy {
align-items: center;
text-align: center;
}
}
.content_box_sub_title {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: relative;
font-size: 0.72rem;
font-weight: 800;
line-height: 1.35;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #156cb7;
}
@media screen and (max-width: 560px) {
.content_box_sub_title {
font-size: 0.68rem;
letter-spacing: 0.1em;
}
}
.content_box_heading {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
line-height: 1.05;
}
.content_box_title1 {
display: inline;
font-family: "DynaPuff", sans-serif;
font-size: clamp(2rem, 4.2vw, 3.35rem);
font-weight: 700;
color: #0d233a;
}
@media screen and (max-width: 560px) {
.content_box_title1 {
display: block;
}
}
.content_box_title2 {
display: inline;
margin-left: 0.18em;
font-family: "Playwrite IE", cursive;
font-size: clamp(2.1rem, 4.6vw, 3.6rem);
font-weight: 400;
font-style: normal;
color: #7eb52a;
line-height: 1;
}
@media screen and (max-width: 560px) {
.content_box_title2 {
display: block;
margin-left: 0;
margin-top: 4px;
}
}
.content_box_title_rule {
width: 72px;
height: 5px;
padding: 0;
margin: -6px 0 0;
position: relative;
border-radius: 999px;
background: #fed003;
display: none;
}
@media screen and (max-width: 960px) {
.content_box_title_rule {
margin-left: auto;
margin-right: auto;
}
}
.content_box_content {
width: 100%;
min-width: 0;
height: auto;
padding: 0;
margin: 0;
position: relative;
color: #4a5568;
font-size: 1rem;
line-height: 1.75;
}
@media screen and (max-width: 767px) {
.content_box_content {
font-size: 0.96rem;
line-height: 1.7;
}
}
.content_box_content p {
padding: 0;
margin: 0 0 14px;
}
.content_box_content p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 960px) {
.content_box_content ul,
.content_box_content ol {
width: 100%;
padding-left: 0;
margin: 0 0 14px;
list-style-position: inside;
text-align: center;
}
.content_box_content li {
padding: 0;
margin: 0 0 8px;
text-align: center;
}
.content_box_content li:last-child {
margin-bottom: 0;
}
}
.content_box_btn {
margin-top: 4px;
}
.content_boxes,
.content_box,
.content_box_row {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.content_box_visual,
.content_box_visual_stage,
.content_box_photo_frame {
overflow: visible;
}
.content_box_has_embelishments .content_box_visual {
width: 100%;
min-width: 0;
min-height: 380px;
padding: 18px 28px 34px 18px;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.content_box_reverse.content_box_has_embelishments .content_box_visual {
padding: 18px 18px 34px 28px;
}
.content_box_visual {
width: 100%;
min-width: 0;
height: auto;
padding: 12px 8px 24px;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.content_box_has_embelishments .content_box_visual_stage {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
display: block;
}
.content_box_visual_stage {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
display: block;
}
.content_box_plain .content_box_visual_stage {
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.content_box_embelishment {
width: 160%;
max-width: none !important;
height: auto;
padding: 0;
margin: 0;
position: absolute;
left: 42%;
top: 50%;
z-index: 0;
object-fit: contain;
pointer-events: none;
transform: translate(-42%, -46%) rotate(-5deg);
transform-origin: center center;
animation: contentBoxEmbelishmentFloat 6.5s ease-in-out infinite;
filter: drop-shadow(0 10px 18px rgba(126, 181, 42, 0.18));
}
.content_box_reverse .content_box_embelishment {
left: 52%;
top: 50%;
transform: translate(-58%, -46%) rotate(5deg) scaleX(-1);
animation-name: contentBoxEmbelishmentFloatReverse;
}
.content_box_doodles {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: -4% -2% -2% -2%;
z-index: 4;
pointer-events: none;
overflow: visible;
}
.content_box_doodle_path {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: absolute;
inset: 0;
overflow: visible;
animation: contentBoxPathSpin 22s linear infinite;
transform-origin: center center;
}
.content_box_doodle_path_line {
fill: none;
stroke: rgba(21, 108, 183, 0.58);
stroke-width: 3;
stroke-dasharray: 12 14;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.content_box_doodle {
width: auto;
height: auto;
padding: 0;
margin: 0;
position: absolute;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1;
filter: drop-shadow(0 3px 8px rgba(13, 35, 58, 0.16));
}
.content_box_doodle i {
display: block;
line-height: 1;
}
.content_box_doodle_primary {
top: -2%;
right: 0;
color: #fed003;
}
.content_box_doodle_secondary {
right: -4%;
bottom: 4%;
color: #156cb7;
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
}
.content_box_doodle_tertiary {
top: 34%;
right: -6%;
color: #7eb52a;
font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.content_box_doodle_quaternary {
left: -2%;
bottom: 10%;
color: #156cb7;
font-size: clamp(1.4rem, 2.8vw, 2rem);
}
.content_box_reverse .content_box_doodle_primary {
right: auto;
left: 0;
}
.content_box_reverse .content_box_doodle_secondary {
right: auto;
left: -4%;
}
.content_box_reverse .content_box_doodle_tertiary {
right: auto;
left: -6%;
}
.content_box_reverse .content_box_doodle_quaternary {
left: auto;
right: -2%;
}
.content_box_doodle_anim_bob {
animation: contentBoxDoodleBob 4.8s ease-in-out infinite;
}
.content_box_doodle_anim_glide {
animation: contentBoxDoodleGlide 5.6s ease-in-out infinite;
}
.content_box_doodle_anim_spin {
animation: contentBoxDoodleSpin 7s linear infinite;
}
.content_box_doodle_primary.content_box_doodle_anim_bob {
animation-delay: 0.15s;
}
.content_box_doodle_secondary.content_box_doodle_anim_glide {
animation-delay: 0.65s;
}
.content_box_doodle_tertiary.content_box_doodle_anim_spin {
animation-delay: 0.35s;
}
.content_box_doodle_quaternary.content_box_doodle_anim_bob {
animation-delay: 1.1s;
}
@media screen and (max-width: 560px) {
.content_box_doodle {
filter: drop-shadow(0 2px 5px rgba(13, 35, 58, 0.14));
}
}
.content_box_photo_frame {
width: 80%;
height: auto;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 50%;
z-index: 3;
aspect-ratio: 1.12 / 1;
transform: translateY(-50%);
overflow: visible;
}
.content_box_plain .content_box_photo_frame {
position: relative;
left: auto;
top: auto;
transform: none;
width: min(100%, 430px);
}
.content_box_reverse .content_box_photo_frame {
left: 10%;
right: auto;
}
@media screen and (max-width: 960px) {
.content_boxes_inner {
gap: 40px;
}
.content_box_has_embelishments .content_box_visual {
min-height: 0;
padding: 0 10px 4px;
overflow: hidden;
}
.content_box_reverse.content_box_has_embelishments .content_box_visual {
padding: 0 10px 4px;
}
.content_box_visual {
padding: 0 10px 8px;
}
.content_box_has_embelishments .content_box_visual_stage {
width: 70%;
min-height: 0;
padding: 26px 16px 30px;
box-sizing: border-box;
}
.content_box_visual_stage {
width: min(100%, 380px);
min-height: 0;
}
.content_box_photo_frame {
position: relative;
left: auto;
right: auto;
top: auto;
width: 100%;
max-width: 100%;
transform: none;
margin: 0 auto;
}
.content_box_reverse .content_box_photo_frame {
left: auto;
right: auto;
}
.content_box_embelishment {
width: 145%;
left: 52%;
top: 52%;
transform: translate(-50%, -50%) rotate(-4deg);
animation-name: contentBoxEmbelishmentFloatMobile;
}
.content_box_reverse .content_box_embelishment {
left: 48%;
transform: translate(-50%, -50%) rotate(4deg) scaleX(-1);
animation-name: contentBoxEmbelishmentFloatMobileReverse;
}
.content_box_doodles {
inset: 0;
}
.content_box_doodle {
font-size: 1.55rem;
filter: drop-shadow(0 2px 5px rgba(13, 35, 58, 0.14));
}
.content_box_doodle_secondary {
font-size: 1.35rem;
}
.content_box_doodle_tertiary {
font-size: 1.2rem;
right: -2%;
}
.content_box_doodle_quaternary {
font-size: 1.1rem;
left: 0;
}
.content_box_reverse .content_box_doodle_tertiary {
left: -2%;
}
.content_box_reverse .content_box_doodle_quaternary {
right: 0;
}
}
@media screen and (max-width: 560px) {
.content_box_has_embelishments .content_box_visual_stage {
width: min(100%, 300px);
padding: 22px 12px 26px;
}
.content_box_has_embelishments .content_box_visual {
width: 100%;
height: auto;
padding: 18px;
left: -15px;
}
.content_box_reverse.content_box_has_embelishments .content_box_visual {
padding: 18px 18px 34px 28px;
}
.content_box_embelishment {
width: 150%;
}
.content_box_doodle_tertiary,
.content_box_doodle_quaternary {
display: none;
}
}
.content_box_photo {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
border-radius: 28px;
background-repeat: no-repeat;
background-size: cover;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.content_box_photo_fallback {
display: grid;
place-items: center;
background: linear-gradient(135deg, #156cb7 0%, #7eb52a 100%);
color: rgba(255, 255, 255, 0.88);
font-size: 3rem;
}
.content_box:hover .content_box_photo,
.content_box:focus-within .content_box_photo {
transform: scale(1.02);
}
@keyframes contentBoxEmbelishmentFloat {
0%,
100% {
transform: translate(-42%, -46%) rotate(-5deg) translateY(0);
}
50% {
transform: translate(-42%, -46%) rotate(-3deg) translateY(-10px);
}
}
@keyframes contentBoxEmbelishmentFloatReverse {
0%,
100% {
transform: translate(-58%, -46%) rotate(5deg) scaleX(-1) translateY(0);
}
50% {
transform: translate(-58%, -46%) rotate(3deg) scaleX(-1)
translateY(-10px);
}
}
@keyframes contentBoxEmbelishmentFloatMobile {
0%,
100% {
transform: translate(-50%, -50%) rotate(-4deg) translateY(0);
}
50% {
transform: translate(-50%, -50%) rotate(-2deg) translateY(-8px);
}
}
@keyframes contentBoxEmbelishmentFloatMobileReverse {
0%,
100% {
transform: translate(-50%, -50%) rotate(4deg) scaleX(-1) translateY(0);
}
50% {
transform: translate(-50%, -50%) rotate(2deg) scaleX(-1)
translateY(-8px);
}
}
@keyframes contentBoxDoodleBob {
0%,
100% {
transform: translateY(0) rotate(-6deg);
}
50% {
transform: translateY(-14px) rotate(6deg);
}
}
@keyframes contentBoxDoodleGlide {
0%,
100% {
transform: translate(0, 0) rotate(-12deg);
}
50% {
transform: translate(-10px, -12px) rotate(8deg);
}
}
@keyframes contentBoxDoodleSpin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.08);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes contentBoxPathSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* VIDEO GALLERY */
.video_gallery {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: relative;
display: grid;
gap: 5px;
grid-template-columns: repeat(3, 1fr);
background-color: #ffffff;
clear: both;
}
@media screen and (max-width: 1080px) {
.video_gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 560px) {
.video_gallery {
grid-template-columns: repeat(1, 1fr);
}
}
.video_gallery_holder {
width: 100%;
height: auto;
padding-bottom: 56%;
margin: 0;
position: relative;
display: table;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.video_icon {
width: 100%;
height: auto;
padding: 0;
margin: 0 auto;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
}
.video_icon i {
text-align: center;
font-size: 5vw;
color: #ffffff;
transition: all 0.4s ease-in-out;
}
@media screen and (max-width: 1080px) {
.video_icon i {
font-size: 7vw;
}
}
@media screen and (max-width: 560px) {
.video_icon i {
font-size: 14vw;
}
}
.video_gallery_holder:hover i {
color: #ff0000;
}
/* INSERTS */
.inserts {
width: calc(100% - 10%);
height: auto;
padding: 50px 5%;
margin: 10px auto 0 auto;
position: relative;
clear: both;
display: table;
overflow: hidden;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
}
.insert_header {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto;
position: relative;
clear: both;
display: table;
color: #ffffff;
font-family: "DynaPuff", sans-serif;
font-size: 3.2em;
font-weight: 400;
text-align: center;
line-height: 1em;
}
@media screen and (max-width: 1200px) {
.insert_header {
font-size: 3em;
}
}
@media screen and (max-width: 1080px) {
.insert_header {
font-size: 2.8em;
}
}
@media screen and (max-width: 767px) {
.insert_header {
font-size: 2.4em;
}
}
@media screen and (max-width: 560px) {
.insert_header {
font-size: 2em;
}
}
@media screen and (max-width: 440px) {
.insert_header {
font-size: 1.8em;
}
}
.insert_description {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto;
position: relative;
display: table;
clear: both;
color: #ffffff;
font-family: "DynaPuff", sans-serif;
font-size: 1.1em;
text-align: center;
line-height: 1.4em;
}
@media screen and (max-width: 1080px) {
.insert_description {
font-size: 1em;
}
}
@media screen and (max-width: 560px) {
.insert_description {
font-size: 0.9em;
}
}
.insert_button {
width: auto;
height: auto;
padding: 0;
margin: 20px auto;
position: relative;
display: table;
clear: both;
}
.insert_button a,
.insert_button a:visited {
width: auto;
height: auto;
padding: 10px 25px;
margin: 0 auto;
position: relative;
display: table;
clear: both;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #ffffff;
border-radius: 4px;
color: #ffffff;
font-family: "DynaPuff", sans-serif;
font-size: 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 560px) {
.insert_button a,
.insert_button a:visited {
padding: 10px 20px;
font-size: 0.9em;
}
}
.insert_button a:hover,
.insert_button a:visited:hover {
background-color: rgba(0, 0, 0, 1);
border: 2px solid #afb374;
color: #afb374;
}
/* NEWS UPDATES */
.news_section {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 8px 0 10px;
margin: 25px auto;
position: relative;
box-sizing: border-box;
}
.news_filters {
width: 100%;
margin: 0 0 28px;
padding: 24px 26px;
box-sizing: border-box;
border-radius: 18px;
border: 1px solid rgba(21, 108, 183, 0.12);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(247, 249, 252, 0.98) 100%
);
}
@media screen and (max-width: 767px) {
.news_filters {
padding: 20px 18px;
}
}
.news_filters_header {
width: 100%;
margin: 0 0 18px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
@media screen and (max-width: 767px) {
.news_filters_header {
flex-direction: column;
align-items: stretch;
}
}
.news_filters_title_wrap {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.news_filters_icon {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1.3rem;
}
.news_filters_title {
margin: 0 0 4px;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: 1.55rem;
font-weight: 400;
line-height: 1.1;
}
.news_filters_subtitle {
margin: 0;
color: #6b7c93;
font-size: 0.9rem;
line-height: 1.5;
}
.news_filters_clear {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(21, 108, 183, 0.16);
background: #ffffff;
color: #156cb7;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: transform 0.28s ease-in-out border-color 0.28s ease-in-out;
}
.news_filters_clear:hover {
transform: translateY(-1px);
border-color: rgba(21, 108, 183, 0.28);
}
@media screen and (max-width: 767px) {
.news_filters_clear {
justify-content: center;
}
}
.news_filters_grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media screen and (max-width: 1080px) {
.news_filters_grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 767px) {
.news_filters_grid {
grid-template-columns: minmax(0, 1fr);
}
}
.news_filter_field {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.news_filter_field_search {
grid-column: span 1;
}
@media screen and (max-width: 1080px) {
.news_filter_field_search {
grid-column: 1 / -1;
}
}
.news_filter_label {
color: #0d233a;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.news_filter_input {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid rgba(21, 108, 183, 0.16);
border-radius: 10px;
background: #ffffff;
color: #0d233a;
font-family: "Montserrat", sans-serif;
font-size: 0.9rem;
transition:
border-color 0.28s ease-in-out,
background 0.28s ease-in-out;
}
.news_filter_input:focus {
border-color: rgba(21, 108, 183, 0.42);
background: #ffffff;
outline: none;
}
.news_filter_select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #156cb7 50%),
linear-gradient(135deg, #156cb7 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 2px),
calc(100% - 12px) calc(50% - 2px);
background-size:
6px 6px,
6px 6px;
background-repeat: no-repeat;
padding-right: 34px;
}
.news_filters_actions {
width: 100%;
margin-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
@media screen and (max-width: 767px) {
.news_filters_actions {
flex-direction: column;
align-items: stretch;
}
}
.news_filters_results {
margin: 0;
color: #334155;
font-size: 0.9rem;
font-weight: 600;
}
.news_filters_submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 12px 22px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-family: "Montserrat", sans-serif;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition:
transform 0.28s ease-in-out,
background 0.28s ease-in-out;
}
.news_filters_submit:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #1a7fd4 0%, #156cb7 100%);
box-shadow: 0 14px 28px rgba(21, 108, 183, 0.32);
}
@media screen and (max-width: 767px) {
.news_filters_submit {
width: 100%;
}
}
.news_intro {
width: 100%;
margin: 0 0 28px;
padding: 24px 26px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: center;
border-radius: 18px;
border: 1px solid rgba(21, 108, 183, 0.12);
background: linear-gradient(
135deg,
rgba(21, 108, 183, 0.08) 0%,
rgba(126, 181, 42, 0.08) 100%
);
box-shadow: 0 14px 30px rgba(13, 35, 58, 0.08);
}
@media screen and (max-width: 767px) {
.news_intro {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
}
.news_intro_icon {
width: 68px;
height: 68px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1.7rem;
box-shadow: 0 12px 24px rgba(21, 108, 183, 0.24);
}
.news_intro_icon_ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(21, 108, 183, 0.24);
animation: newsIconRingPulse 2.8s ease-in-out infinite;
}
.news_intro_text {
margin: 0;
color: #334155;
font-size: 1rem;
line-height: 1.7;
font-weight: 500;
}
.news_grid {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
@media screen and (max-width: 1080px) {
.news_grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media screen and (max-width: 767px) {
.news_grid {
grid-template-columns: minmax(0, 1fr);
}
}
.news_card {
width: calc(100% - 2px);
min-width: 0;
height: 100%;
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(21, 108, 183, 0.1);
background: #ffffff;
box-shadow: 0 14px 32px rgba(13, 35, 58, 0.08);
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.34s ease-in-out,
border-color 0.34s ease-in-out;
}
.news_card:hover,
.news_card:focus-within {
transform: translateY(-6px);
border-color: rgba(21, 108, 183, 0.22);
box-shadow: 0 22px 42px rgba(13, 35, 58, 0.14);
}
.news_card_featured {
grid-column: 1 / -1;
}
@media screen and (max-width: 767px) {
.news_card_featured {
grid-column: auto;
}
}
.news_card_featured .news_card_link {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
min-height: 280px;
min-width: 0;
max-width: 100%;
}
@media screen and (max-width: 1080px) {
.news_card_featured .news_card_link {
grid-template-columns: 1fr;
min-height: 0;
}
}
.news_card_featured .news_card_media,
.news_card_featured .news_card_body {
min-width: 0;
max-width: 100%;
}
.news_card_featured .news_card_media {
min-height: 280px;
}
.news_card_link {
width: 100%;
min-width: 0;
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
box-sizing: border-box;
}
.news_card_media {
width: 100%;
min-height: 190px;
position: relative;
overflow: hidden;
}
.news_card_image {
width: 100%;
height: 100%;
min-height: 190px;
background-size: cover;
background-repeat: no-repeat;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.news_card_image_fallback {
display: grid;
place-items: center;
background: linear-gradient(135deg, #156cb7 0%, #7eb52a 100%);
color: rgba(255, 255, 255, 0.88);
font-size: 2.4rem;
}
.news_card:hover .news_card_image,
.news_card:focus-within .news_card_image {
transform: scale(1.06);
}
.news_card_overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(13, 35, 58, 0.04) 0%,
rgba(13, 35, 58, 0.58) 100%
);
pointer-events: none;
}
.news_category {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 7px 12px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.news_card_media .news_category {
position: absolute;
left: 14px;
bottom: 14px;
z-index: 1;
}
.news_category_blue {
background: rgba(21, 108, 183, 0.92);
color: #ffffff;
}
.news_category_green {
background: rgba(126, 181, 42, 0.92);
color: #ffffff;
}
.news_category_yellow {
background: rgba(254, 208, 3, 0.94);
color: #1e2f3d;
}
.news_category_purple {
background: rgba(122, 82, 204, 0.92);
color: #ffffff;
}
.news_category_teal {
background: rgba(32, 162, 168, 0.92);
color: #ffffff;
}
.news_card_body {
width: 100%;
min-width: 0;
max-width: 100%;
padding: 20px 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
box-sizing: border-box;
overflow-wrap: anywhere;
}
@media screen and (max-width: 560px) {
.news_card_body {
padding: 18px 16px 20px;
}
}
.news_date {
display: inline-flex;
align-items: center;
gap: 8px;
color: #6b7c93;
font-size: 0.82rem;
font-weight: 600;
}
.news_card_title {
margin: 0;
color: #0d233a;
font-family: "DynaPuff", sans-serif;
font-size: 1.35rem;
font-weight: 400;
line-height: 1.2;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.news_card_featured .news_card_title {
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}
.news_card_summary {
margin: 0;
color: #334155;
font-size: 0.92rem;
line-height: 1.65;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.news_card_cta {
margin-top: auto;
padding-top: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #156cb7;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
transition:
gap 0.28s ease-in-out,
color 0.28s ease-in-out;
}
.news_card:hover .news_card_cta,
.news_card:focus-within .news_card_cta {
gap: 12px;
color: #0e5594;
}
.news_pagination {
width: 100%;
margin: 34px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
@media screen and (max-width: 767px) {
.news_pagination {
gap: 10px;
}
}
.news_page_link,
.news_page_number {
min-height: 42px;
padding: 10px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 999px;
border: 1px solid rgba(21, 108, 183, 0.16);
background: #f7f9fc;
color: #0d233a;
font-size: 0.86rem;
font-weight: 700;
text-decoration: none;
transition:
transform 0.28s ease-in-out,
background 0.28s ease-in-out,
box-shadow 0.28s ease-in-out,
border-color 0.28s ease-in-out;
}
.news_page_link:hover,
.news_page_number:hover {
transform: translateY(-2px);
background: #ffffff;
border-color: rgba(21, 108, 183, 0.28);
box-shadow: 0 10px 20px rgba(21, 108, 183, 0.12);
}
.news_page_link_disabled {
opacity: 0.45;
pointer-events: none;
}
.news_page_numbers {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
}
.news_page_number {
min-width: 42px;
padding-inline: 14px;
}
@media screen and (max-width: 767px) {
.news_page_link span {
display: none;
}
}
.news_page_number.is-active {
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
border-color: transparent;
color: #ffffff !important;
box-shadow: 0 10px 22px rgba(21, 108, 183, 0.24);
}
.news_breadcrumb {
width: 100%;
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: #6b7c93;
font-size: 0.88rem;
font-weight: 600;
}
.news_breadcrumb a {
color: #156cb7;
text-decoration: none;
}
.news_breadcrumb a:hover {
text-decoration: underline;
}
.news_detail_header {
margin-bottom: 22px;
}
.news_meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.news_detail_title {
margin: 0 0 12px;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 400;
line-height: 1.1;
}
.news_detail_summary {
margin: 0;
max-width: 760px;
color: #334155;
font-size: 1.05rem;
line-height: 1.7;
}
.news_detail_hero {
width: 100%;
margin: 0 0 28px;
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 280px;
box-shadow: 0 18px 40px rgba(13, 35, 58, 0.12);
}
.news_detail_hero_image {
width: 100%;
min-height: 280px;
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width: 560px) {
.news_detail_hero,
.news_detail_hero_image {
min-height: 220px;
}
}
.news_detail_hero_overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(13, 35, 58, 0.02) 0%,
rgba(13, 35, 58, 0.28) 100%
);
pointer-events: none;
}
.news_detail_content {
color: #334155;
font-size: 1rem;
line-height: 1.8;
}
.news_detail_content p {
margin: 0 0 16px;
}
.news_detail_content h2,
.news_detail_content h3,
.news_detail_content h4 {
margin-top: 28px;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-weight: 400;
}
.news_download {
margin-top: 30px;
padding: 22px 24px;
border-radius: 16px;
border: 1px solid rgba(21, 108, 183, 0.12);
background: linear-gradient(
135deg,
rgba(21, 108, 183, 0.06) 0%,
rgba(254, 208, 3, 0.08) 100%
);
}
.news_download_title {
margin: 0 0 12px;
color: #0d233a;
font-size: 1.1rem;
font-weight: 700;
}
.news_download_btn {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 12px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #7eb52a 0%, #5f9a18 100%);
color: #ffffff;
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 10px 22px rgba(126, 181, 42, 0.24);
transition:
transform 0.28s ease-in-out,
box-shadow 0.28s ease-in-out;
}
.news_download_btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(126, 181, 42, 0.3);
}
.news_detail_back {
margin-top: 30px;
}
.news_back_link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #156cb7;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
}
.news_back_link:hover {
color: #0e5594;
}
.news_empty {
width: 100%;
padding: 48px 28px;
text-align: center;
border-radius: 18px;
border: 1px dashed rgba(21, 108, 183, 0.2);
background: #f7f9fc;
}
.news_empty_icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1.8rem;
}
.news_empty_title {
margin: 0 0 10px;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: 1.8rem;
font-weight: 400;
}
.news_empty_text {
margin: 0;
color: #334155;
font-size: 0.96rem;
line-height: 1.6;
}
@keyframes newsIconRingPulse {
0%,
100% {
transform: scale(0.94);
opacity: 0.55;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
/* TEAM */
.team_section {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
padding: 8px 0 10px;
margin: 0;
position: relative;
box-sizing: border-box;
}
.team_intro {
width: 100%;
margin: 0 0 34px;
padding: 24px 26px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: center;
border-radius: 18px;
border: 1px solid rgba(21, 108, 183, 0.12);
background: linear-gradient(
135deg,
rgba(21, 108, 183, 0.08) 0%,
rgba(126, 181, 42, 0.08) 100%
);
box-shadow: 0 14px 30px rgba(13, 35, 58, 0.08);
}
@media screen and (max-width: 767px) {
.team_intro {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
padding: 20px 18px;
}
}
.team_intro_icon {
width: 68px;
height: 68px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1.7rem;
box-shadow: 0 12px 24px rgba(21, 108, 183, 0.24);
}
.team_intro_icon_ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(21, 108, 183, 0.24);
animation: contactIconRingPulse 2.8s ease-in-out infinite;
}
.team_intro_text {
margin: 0;
color: #334155;
font-size: 1rem;
line-height: 1.7;
font-weight: 500;
}
.team_category_section {
width: 100%;
margin: 0 0 38px;
padding: 0;
position: relative;
}
.team_category_section:last-child {
margin-bottom: 0;
}
.team_category_header {
width: 100%;
margin: 0 0 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.team_category_heading {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.team_category_badge {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1rem;
box-shadow: 0 8px 18px rgba(21, 108, 183, 0.2);
}
.team_category_blue .team_category_badge {
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
}
.team_category_green .team_category_badge {
background: linear-gradient(135deg, #7eb52a 0%, #5f9a18 100%);
}
.team_category_yellow .team_category_badge {
background: linear-gradient(135deg, #fed003 0%, #e6bc00 100%);
color: #1e2f3d;
}
.team_category_purple .team_category_badge {
background: linear-gradient(135deg, #7a52cc 0%, #6240a8 100%);
}
.team_category_teal .team_category_badge {
background: linear-gradient(135deg, #20a2a8 0%, #178388 100%);
}
.team_category_red .team_category_badge {
background: linear-gradient(135deg, #d92627 0%, #b81f20 100%);
}
.team_category_title {
margin: 0;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 400;
line-height: 1.1;
}
.team_category_line {
width: 88px;
height: 4px;
border-radius: 999px;
background: #fed003;
}
.team_grid {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
@media screen and (max-width: 1080px) {
.team_grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
}
@media screen and (max-width: 767px) {
.team_grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
@media screen and (max-width: 560px) {
.team_grid {
grid-template-columns: minmax(0, 1fr);
}
}
.team_card {
width: 100%;
min-width: 0;
height: 100%;
position: relative;
}
.team_card_inner {
width: 100%;
height: 100%;
padding: 22px 18px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
border-radius: 18px;
border: 1px solid rgba(21, 108, 183, 0.1);
background: #ffffff;
box-shadow: 0 14px 32px rgba(13, 35, 58, 0.08);
transition:
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.34s ease-in-out,
border-color 0.34s ease-in-out;
}
.team_card:hover .team_card_inner,
.team_card:focus-within .team_card_inner {
transform: translateY(-6px);
border-color: rgba(21, 108, 183, 0.22);
box-shadow: 0 22px 42px rgba(13, 35, 58, 0.14);
}
.team_card_photo {
width: 132px;
height: 132px;
margin: 0 auto 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: visible;
transform-origin: center center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 560px) {
.team_card_photo {
width: 118px;
height: 118px;
}
}
.team_card:hover .team_card_photo,
.team_card:focus-within .team_card_photo {
transform: scale(1.04);
}
.team_card_icon_ring {
position: absolute;
inset: -10px;
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
border: 2px solid rgba(21, 108, 183, 0.28);
opacity: 0;
transform: scale(1);
transform-origin: center center;
transition: opacity 0.34s ease-in-out;
pointer-events: none;
z-index: 0;
}
.team_card:hover .team_card_icon_ring,
.team_card:focus-within .team_card_icon_ring {
opacity: 1;
animation: teamPhotoRingPulse 2.4s ease-out infinite;
}
.team_card_image {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
box-sizing: border-box;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
border: 4px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 12px 24px rgba(21, 108, 183, 0.18);
}
.team_card_image_fallback {
display: grid;
place-items: center;
background: linear-gradient(135deg, #156cb7 0%, #7eb52a 100%);
color: rgba(255, 255, 255, 0.9);
font-size: 2.4rem;
}
.team_card_body {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.team_card_name {
margin: 0;
color: #0d233a;
font-family: "DynaPuff", sans-serif;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.2;
overflow-wrap: anywhere;
word-break: break-word;
}
.team_card_designation {
margin: 0 auto;
width: fit-content;
max-width: 100%;
padding: 7px 12px;
border-radius: 999px;
background: rgba(21, 108, 183, 0.08);
color: #156cb7;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
overflow-wrap: anywhere;
}
.team_category_green .team_card_designation {
background: rgba(126, 181, 42, 0.12);
color: #5f9a18;
}
.team_category_yellow .team_card_designation {
background: rgba(254, 208, 3, 0.18);
color: #8a6f00;
}
.team_category_purple .team_card_designation {
background: rgba(122, 82, 204, 0.12);
color: #6240a8;
}
.team_category_teal .team_card_designation {
background: rgba(32, 162, 168, 0.12);
color: #178388;
}
.team_category_red .team_card_designation {
background: rgba(217, 38, 39, 0.1);
color: #b81f20;
}
.team_empty {
width: 100%;
padding: 48px 28px;
text-align: center;
border-radius: 18px;
border: 1px dashed rgba(21, 108, 183, 0.2);
background: #f7f9fc;
}
.team_empty_icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, #156cb7 0%, #0e5594 100%);
color: #ffffff;
font-size: 1.8rem;
}
.team_empty_title {
margin: 0 0 10px;
color: #156cb7;
font-family: "DynaPuff", sans-serif;
font-size: 1.8rem;
font-weight: 400;
}
.team_empty_text {
margin: 0;
color: #334155;
font-size: 0.96rem;
line-height: 1.6;
}
@keyframes teamPhotoRingPulse {
0% {
opacity: 0.85;
transform: scale(1);
}
70% {
opacity: 0;
transform: scale(1.14);
}
100% {
opacity: 0;
transform: scale(1.14);
}
}