/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/
/*Add your own styles here:*/
/*----------------------------------------
HERO HOMEPAGE — keyframes
----------------------------------------*/
@keyframes ljc-fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ljc-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ljc-kenBurns {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
/*Container*/
.ljc-home-hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -50px;
margin-bottom: 0;
aspect-ratio: 1280 / 700;
overflow: hidden;
}
/*Background — Ken Burns*/
.ljc-home-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 1;
transform-origin: center center;
animation: ljc-kenBurns 22s ease-in-out alternate infinite;
}
/*Content wrapper*/
.ljc-home-hero__inner {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 5% 0 56%;
box-sizing: border-box;
}
/*Title*/
.ljc-home-hero__title {
margin: 0 0 0.25em;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(1.75rem, 4.1vw, 53px);
line-height: 1.15;
color: #170e0e;
}
.ljc-home-hero__line {
display: block;
opacity: 0;
animation: ljc-fadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ljc-home-hero__line--1 { animation-delay: 0.2s; }
.ljc-home-hero__line--2 { animation-delay: 0.45s; }
.ljc-home-hero__line--3 { animation-delay: 0.70s; }
/*Subtitle*/
.ljc-home-hero__subtitle {
margin: 0 0 1em;
font-size: clamp(1rem, 1.7vw, 22px);
font-weight: 400;
color: #170e0e;
max-width: 28em;
line-height: 1.35;
opacity: 0;
animation: ljc-fadeIn 0.9s ease both;
animation-delay: 1.0s;
}
/*CTA*/
.ljc-home-hero__cta {
display: inline-block;
margin: 0 0 1.5em;
padding: 14px 35px;
background: #00a6e8;
color: #fff !important;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: clamp(0.95rem, 1.4vw, 18px);
font-weight: 700;
line-height: 1.4;
border-radius: 2px;
transition: background 0.2s ease, transform 0.2s ease;
opacity: 0;
animation: ljc-fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 1.2s;
}
.ljc-home-hero__cta:hover {
background: #008cc4;
transform: translateY(-2px);
color: #fff !important;
}
/*Description-*/
.ljc-home-hero__description {
margin: 0;
font-size: clamp(0.875rem, 1.4vw, 18px);
font-weight: 400;
color: #170e0e;
line-height: 1.45;
opacity: 0;
animation: ljc-fadeIn 0.75s ease both;
animation-delay: 1.4s;
}
/* Tablet + Mobile: stacked layout */
@media (max-width: 1099px) {
.ljc-home-hero {
aspect-ratio: auto !important;
max-height: none !important;
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
}
.ljc-home-hero__bg {
position: relative;
inset: auto;
width: 100%;
height: 48vw;
min-height: 260px;
max-height: 440px;
flex-shrink: 0;
object-fit: cover;
object-position: center center;
animation: none;
z-index: auto;
}
.ljc-home-hero__inner {
position: relative;
z-index: auto;
height: auto;
padding: 5% 8% 7%;
background: #f8f4ef;
justify-content: flex-start;
align-items: flex-start;
}
}
/* Mobile: tighten image */
@media (max-width: 767px) {
.ljc-home-hero__bg {
height: 44vw;
max-height: 220px;
object-position: 30% center;
}
.ljc-home-hero__inner {
padding: 6% 6% 8%;
}
}
/*Gap fix — kills padding on the Enfold
wrapper that contains the hero block-*/
.av_one_full:has(.ljc-home-hero),
.flex_column:has(.ljc-home-hero),
.av-layout-cell:has(.ljc-home-hero),
.av-layout-block:has(.ljc-home-hero),
.avia-section:has(.ljc-home-hero),
[class*="av_"]:has(.ljc-home-hero) {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/*Gap after the hero and before menu reduced*/
/* 1. Remove the padding on main that creates the gap below the hero */
main:has(.ljc-home-hero) {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 2. Cap the hero height — desktop only */
@media (min-width: 1100px) {
.ljc-home-hero {
max-height: calc(100svh - 140px);
}
}
/*----------------------------------------
HERO TOP PAGE PICTURE
----------------------------------------*/
.ljc-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: -50px;
margin-bottom: -50px;
aspect-ratio: 1900 / 250; /* matches your banner image proportions */
overflow: hidden;
position: relative;
}
.ljc-hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/*----------------------------------------
TESTIMONIAL - Name on tope of quote
----------------------------------------*/
/* Testimonials: Move name/subtitle above quote */
.avia-testimonial_inner {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"image meta"
"image content";
grid-template-rows: auto 1fr;
}
.avia-testimonial-image {
grid-area: image;
float: none;
margin-right: 20px;
}
.avia-testimonial-meta {
grid-area: meta;
position: static;
margin-left: 0 !important;
text-align: left !important;
}
.avia-testimonial-content {
grid-area: content;
background-color: transparent !important;
}
/*----------------------------------------
QUICK CSS - Copy paste here
----------------------------------------*/
.corporate-hero {
position: relative;
}
.corporate-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(11,44,77,1) 0%,
rgba(11,44,77,0.85) 35%,
rgba(11,44,77,0.50) 65%,
rgba(11,44,77,0.05) 100%
);
z-index: 1;
}
.corporate-hero .container {
position: relative;
z-index: 2;
}
time.slide-meta-time {
display: none!important;
}
.avia-content-slider-inner {
height: auto!important;
}
/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
background: #eeeeee;
}
.archive.tag .entry-content-wrapper > .post-title:nth-child(3),
.archive.tag .entry-content-wrapper > .avia-content-slider:nth-child(4) {
display: none;
}
.av-image-caption-overlay-center p:first-child {
font-size: 16px;
line-height: 16px;
}
/* === Contact Page Hero Banner Fix ===
Fixes LayerSlider GSAP animation getting frozen on page load:
Forces the slide layers to show in their final state immediately */
/* Show the dark blue background shape layer */
.page-id-8428 .avia-layerslider .ls-wrapper.ls-in-out {
opacity: 1 !important;
display: block !important;
}
/* Ensure the background color shape fills its area */
.page-id-8428 .avia-layerslider .ls-shape-layer.ls-layer {
opacity: 1 !important;
}
/* === End Contact Page Hero Banner Fix === */
/* Fix WPForms Name field legend label to match other field labels */
legend.wpforms-field-label {
font-size: 14.72px !important;
font-weight: 700 !important;
font-style: normal !important;
}
/*----------------------------------------
WIDGET - Quote Block
----------------------------------------*/
/* ══ Volume Calculator Widget ══ */
.widget-quote {
background-color: #edf8fd;
border-left: 4px solid #00a6e8 !important;
border-radius: 4px;
padding: 24px 28px;
font-family: roboto, Helvetica, Arial, sans-serif;
}
.widget-quote__label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: #006a93; /* muted amber — readable on cream */
text-transform: uppercase;
}
.widget-quote__heading {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
color: #091c4f; /* site navy */
line-height: 1.2;
}
.widget-quote__desc {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: #444444; /* site body text color */
}
.widget-quote__btn {
display: inline-block;
background-color: #00a6e8;
color: #ffffff !important; /* navy text on yellow — strong contrast */
padding: 11px 22px;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.2s ease;
}
.widget-quote__btn:hover,
.widget-quote__btn:focus {
background-color: #00b7ff !important;
color: #ffffff !important;
}
.widget-quote__btn,
.widget-quote__btn:link,
.widget-quote__btn:visited {
color: #ffffff;
}
/*----------------------------------------
WIDGET - Volume Calculator Widget
----------------------------------------*/
/* ══ Volume Calculator Widget ══ */
.calc-widget {
background-color: #fdf9ee; /* very light warm cream — yellow tint, not white */
border-left: 4px solid #f5c800 !important; /* yellow left accent — the only strong yellow */
border-radius: 4px;
padding: 24px 28px;
font-family: roboto, Helvetica, Arial, sans-serif;
}
.calc-widget__label {
margin: 0 0 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: #a07d00; /* muted amber — readable on cream */
text-transform: uppercase;
}
.calc-widget__heading {
margin: 0 0 10px;
font-size: 22px;
font-weight: 700;
color: #091c4f; /* site navy */
line-height: 1.2;
}
.calc-widget__desc {
margin: 0 0 20px;
font-size: 14px;
line-height: 1.6;
color: #444444; /* site body text color */
}
.calc-widget__btn {
display: inline-block;
background-color: #f5c800; /* full yellow CTA */
color: #091c4f; /* navy text on yellow — strong contrast */
padding: 11px 22px;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-decoration: none;
transition: background-color 0.2s ease;
}
.calc-widget__btn:hover,
.calc-widgete__btn:focus {
background-color: #ffd30d !important; /* slightly darker yellow on hover */
color: #ffffff !important;
}
.calc-widget__btn,
.calc-widget__btn:link,
.calc-widget__btn:visited {
color: #ffffff;
}
/*----------------------------------------
BLOG - WIDGET AREA - LEFT COLUMN DARK BG
Covers: float fix, categories, colors,
combo widget bg, thumbnails, tags
----------------------------------------*/
/* Float fix: image on left (overrides sidebar_left float:right) */
.blog-layout-grid .news-thumb,
.avia-builder-widget-area .news-thumb {
float: left !important;
margin: 2px 9px 0 0 !important;
}
/* Widget section titles */
.blog-layout-grid .av_one_fifth .widgettitle {
color: rgb(62, 181, 241) !important;
}
/* Tab labels — active */
.blog-layout-grid .av_one_fifth .tab_titles .active_tab,
.blog-layout-grid .av_one_fifth .tab_titles .tab {
color: rgb(62, 181, 241) !important;
border-color: rgb(62, 181, 241) !important;
}
/* Tab labels — inactive */
.blog-layout-grid .av_one_fifth .tab_titles .tab:not(.active_tab) {
color: rgb(224, 237, 245) !important;
border-color: rgb(224, 237, 245) !important;
}
/* Post titles */
.blog-layout-grid .av_one_fifth .news-title {
color: rgb(224, 237, 245) !important;
}
.blog-layout-grid .av_one_fifth .news-title:hover {
color: rgb(62, 181, 241) !important;
}
/* Dates and "in: category" meta text */
.blog-layout-grid .av_one_fifth .news-time {
color: rgb(74, 106, 122) !important;
}
/* "in: FAQ, Product…" category links */
.blog-layout-grid .av_one_fifth .news-cats a {
color: rgb(42, 180, 232) !important;
}
/* Categories: no bullets, match post title font */
.blog-layout-grid .widget_categories ul,
aside.sidebar .widget_categories ul {
list-style: none !important;
}
.blog-layout-grid .widget_categories ul li,
aside.sidebar .widget_categories ul li {
margin-left: 0 !important;
}
.blog-layout-grid .widget_categories a,
aside.sidebar .widget_categories a {
font-size: 13.6px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.blog-layout-grid .widget_categories a {
color: rgb(224, 237, 245) !important;
}
aside.sidebar .widget_categories a {
color: rgb(0, 0, 0) !important;
}
.blog-layout-grid .widget_categories a:hover,
aside.sidebar .widget_categories a:hover {
color: rgb(62, 181, 241) !important;
}
/* Combo widget: transparent content panel */
div .blog-layout-grid .tabcontainer .active_tab_content {
background-color: transparent !important;
border-color: transparent !important;
}
/* Tab title bar bottom border */
.blog-layout-grid .tab_titles {
border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
/* Thumbnails: no border, no padding, bigger */
.blog-layout-grid .av_one_fifth .news-thumb {
border: none !important;
padding: 0 !important;
background-color: transparent !important;
width: 50px !important;
height: 50px !important;
margin-top: 2px !important;
}
.blog-layout-grid .av_one_fifth .news-thumb img {
width: 50px !important;
height: 50px !important;
}
/* Image hover overlay */
.blog-layout-grid .image-overlay {
background-color: rgba(62, 181, 241, 0.15) !important;
}
/* Tag cloud: no border */
.blog-layout-grid .av_one_fifth .tagcloud a {
border: none !important;
color: rgb(62, 181, 241) !important;
}
.blog-layout-grid .av_one_fifth .tagcloud a:hover {
color: rgb(224, 237, 245) !important;
}
/*----------------------------------------
BLOG - GRID ROW - LAYOUT & TYPOGRAPHY POLISH
Fixes: full-height dark column, right-edge
shadow, top padding, widget spacing,
thumbnail crop, tag tab contrast,
metadata spacing, h2 weight, content padding
----------------------------------------*/
/* ③ Top padding — breathing room at the very start of the column */
.blog-layout-grid .av_one_fifth .avia_combo_widget {
padding-top: 20px !important;
}
/* ④ Reduce excessive gap between widgets */
.blog-layout-grid .av_one_fifth .widget {
padding-top: 18px !important;
padding-bottom: 18px !important;
}
/* First widget (combo) already has padding-top via rule ③ */
.blog-layout-grid .av_one_fifth .widget.avia_combo_widget {
padding-top: 0 !important;
padding-bottom: 18px !important;
}
/* ⑤ Service thumbnails — object-fit contain so icon labels stay readable */
#portfoliobox-3 .news-thumb img {
object-fit: contain !important;
background-color: rgba(0, 0, 0, 0.25) !important;
border-radius: 4px !important;
}
/* ⑥ Post title line height & size in sidebar — tighter wrapping */
.blog-layout-grid .av_one_fifth .news-title {
font-size: 12.5px !important;
line-height: 1.35 !important;
}
/* ⑦ Content area — post metadata spacing
Tighten the gap between meta line and first paragraph */
.av-post-metadata-container {
padding-bottom: 16px !important;
padding-top: 6px !important;
font-size: 13px !important;
opacity: 0.75;
}
/* ⑧ Content H2 subheadings — stronger weight and top breathing room */
.blog-layout-grid .av_three_fifth h2 {
font-weight: 700 !important;
color: #091c4f !important;
margin-top: 32px !important;
margin-bottom: 10px !important;
}
/* ⑨ "Tags" inactive tab — slightly brighter so it reads as clickable */
.blog-layout-grid .av_one_fifth .tab_titles .tab:not(.active_tab) {
color: rgba(224, 237, 245, 0.7) !important;
border-color: rgba(224, 237, 245, 0.3) !important;
}
.blog-layout-grid .flex_cell.av_one_fifth.avia-builder-el-first {
box-shadow: 6px 0 18px rgba(0, 0, 0, 0.35) !important;
padding: 0 !important;
}
.blog-layout-grid .flex_cell.av_three_fifth > .flex_column {
padding-left: 10px !important;
}
/*----------------------------------------
// WIDGET - GET A QUOTE BLOCK
//--------------------------------------*/
/* ── Widget container ── */
.quote-widget {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
background-color: #181e2b;
color: rgba(255, 255, 255, 0.9);
border-radius: 6px;
padding: 30px;
max-width: 100%; /* responsive: no more overflow */
width: 100%;
box-sizing: border-box;
}
/* ── "Already know what you need?" label ── */
.quote-widget .quote-widget__label {
color: #4db8ff !important; /* !important + parent selector to beat reach-us-box override */
font-size: 16px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 8px 0;
}
/* ── "Get a Quote" heading ── */
.quote-widget .quote-widget__heading {
font-size: 15px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85) !important;
margin: 10px 0 4px 0;
}
/* ── Description text ── */
.quote-widget .quote-widget__desc {
font-size: 12px;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.6;
margin: 0; /* remove bottom margin — spacing comes from the p wrapper below */
}
/* ── The WordPress auto-wraps around the ── */
.quote-widget p:last-child {
margin-top: 20px; /* pulls button 20px closer vs the default 13.6px paragraph margin */
margin-bottom: 0;
line-height: 1; /* collapse the line-height that was inflating button height */
}
/* ── CTA button ── */
.quote-widget .quote-widget__btn {
display: block !important;
background-color: #00a6e8 !important;
color: #ffffff !important;
text-decoration: none !important;
text-align: center !important;
text-transform: uppercase;
letter-spacing: 0.65px;
font-size: 13px;
font-weight: 600;
line-height: 1.2; /* explicit line-height to control vertical centering of text */
padding: 30px 20px;
border-radius: 4px;
box-sizing: border-box;
width: 100%; /* fills container width, no overflow */
transition: background-color 0.2s ease;
}
.quote-widget .quote-widget__btn:hover {
background-color: #0090cc !important;
}
/*----------------------------------------
// HOMEPAGE - CARD STYLE EXPORT-IMPORT-STORE - IMAGE AT TOP OF CARD FULL WIDTH
//--------------------------------------*/
.service-card-col .avia_image_wrap,
.service-card-col .avia-image-container,
.service-card-col .avia_image_wrap a,
.service-card-col p {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.service-card-col .avia_image_wrap img,
.service-card-col .avia-image-container img {
display: block !important;
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
border-radius: 12px 12px 0 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/*----------------------------------------
// MASONRY NEWS ON HOME PAGE - TITLE COLOR + BACKGROUND + ARROW
//--------------------------------------*/
#top .av-masonry-entry.isotope-item figcaption {
background: #0f1923;
}
.av-masonry-entry .av-masonry-entry-title {
color: #ffffff !important;
font-size: 14px;
}
#top .av-masonry-entry.isotope-item .avia-arrow {
background: #0f1923;
}
/*----------------------------------------
// MASONRY ARTICLE - TITLE + HP H3 Title overrid the 800 weight with 500
//--------------------------------------*/
#top #wrap_all .all_colors h3 {
line-height: 1.5em !important;
font-weight: 500 !important;
}
/*----------------------------------------
// WIDGET TITLE COLORS - FOR THE FOOTER (BLUE)
//--------------------------------------*/
.widgettitle {
color: #e8f0f5;
}
/*----------------------------------------
// LINKS - ALL UNDERLINE
//--------------------------------------*/
.avia_textblock p a, .avia_textblock li a, .iconbox_content_container a{
text-decoration:underline !important;
color:#6786a1!important;
}
/*----------------------------------------
// TERMS AND CONDITIONS - UNCOPYABLE TEXT
//--------------------------------------*/
.textopy {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.textopy::selection {
background: transparent;
}
/*----------------------------------------
// BUTTON BACK TO TOP - CHANGE COLOR
//--------------------------------------*/
#scroll-top-link {
background-color: #00a6e8;
border: none;
}
/*----------------------------------------
// STICKY BUTTON - Position
//--------------------------------------*/
.stickybutton {
position: fixed;
top: 88%;
z-index: 999999!important;
font-size: 2em!important;
}
#iconstickybutton .avia-button .avia_button_icon {
font-size: 2em!important;
}
/*----------------------------------------
// SLIDER PARTNER - BACKGROUND COLOR
//--------------------------------------*/
/*.main_color .avia-content-slider .slide-image {
background: rgba(34,34,34,0.0) transparent;
}*/
.footer_color .avia-content-slider .slide-image {
background: rgba(34,34,34,0);
}
/*----------------------------------------
// PICTURE - NO FRAME
//--------------------------------------*/
.noframe {
border-color: rgba(111,111,111,0.2) transparent;
}
/*----------------------------------------
// MASONRY ARTICLE - HIDE DATE
//--------------------------------------*/
span.av-masonry-date {
display: none!important;
}
/*----------------------------------------
// BURGERMENU - APPEARS UNDER 1250px
//--------------------------------------*/
@media only screen and (max-width: 1250px) {
nav.main_menu, #menu-item-search {
display: block !important;
}
.menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
/*--------------------------
// FOOTER -GENERAL MARGIN
//------------------------*/
#footer .widget {
margin: 15px 0 30px 0;
}
#footer .textwidget p {
line-height: 1.3 !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.footer-widget p {
margin-bottom: 4px !important;
}
/*----------------------------------------
// WPFORMS - SIGNUP CONFIRMATION COLORS
//--------------------------------------*/
.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
background: #ffffff;
border: 1px solid #103057;
}
/*----------------------------------------------------------------
// WPFORMS - FOOTER - NEWSLETTER SIGNUP HP - DESIGN DONE BY CLAUDE
//----------------------------------------------------------------*/
#wpforms-2910 {
margin-top: -10px !important;
}
#wpforms-2910 .wpforms-field-container {
margin-bottom: 1px !important;
}
#wpforms-2910 input[type="email"] {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 6px !important;
color: #e0edf5 !important;
font-size: 13px !important;
padding: 10px 14px !important;
width: 100% !important;
margin-bottom: 0 !important;
}
#wpforms-2910 input[type="email"]::placeholder {
color: #ffffff !important;
}
#wpforms-2910 input[type="email"]:focus {
border-color: #2ab4e8 !important;
outline: none !important;
}
#wpforms-2910 .wpforms-submit-container {
margin-top: 1px !important;
padding-top: 0 !important;
}
.buttonnewsletterfooter {
background: #2ab4e8 !important;
border: none !important;
border-radius: 6px !important;
color: #060e18 !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
width: 100% !important;
padding: 11px !important;
}
.buttonnewsletterfooter:hover {
background: #4cc5f5 !important;
}
/*----------------------------------------
// WPFORMS - NEWSLETTER SIGNUP HP - REDUCE MARGIN
//--------------------------------------*/
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
margin-top: 0 !important;
}
/*----------------------------------------
// WPFORMS - GENERAL NEWSLETTER SIGNUP HP - REDUCE PADDING FIELD
//--------------------------------------*/
.wpforms-container .wpforms-form .wpforms-field,
.wp-core-ui div.wpforms-container .wpforms-field {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/*----------------------------------------
// IMAGE CAPTION OVERLAY - FLEXIBLE FONT SIZE (SERVICES!)
//--------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.av-image-caption-overlay-center {
font-size: 13px !important;
}
}
@media only screen and (min-width: 1440px) {
.av-image-caption-overlay-center {
font-size: 22px !important;
}
}
/*----------------------------------------
// SEARCH BOX IN BURGER MENU FOR MOBILE
//--------------------------------------*/
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile {
padding: 0 30px;
position: relative !important;
}
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile form {
position: relative !important;
}
/*----------------------------------------
// No SEARCH BOX WHEN MOBILE VIEW
//--------------------------------------*/
.avia_mobile #menu-item-search {
display: none !important;
}
/*----------------------------------------
// TAB BACKGROUND COLOR (licences)
//--------------------------------------*/
.main_color .tabcontainer .active_tab_content {
background-color: #ffffff !important;
}
/*----------------------------------------
// NOT SHOWING CATEGORY ABOVE BLOG POST
//--------------------------------------*/
.blog-categories.minor-meta{
display:none!important;
}
/*----------------------------------------
// GOOGLE MAP
//--------------------------------------*/
/*GOOGLE MAP indicative, correction due to plugin calendarize it*/
.gm-style .gm-style-iw {
margin-top: 0px;
margin-left: 0px;
width: 450px;
overflow: hidden!important;
}
.avia-google-map-container .gm-style-iw p {
color: #444;
overflow: hidden;
}
/*----------------------------------------
// WPFORMS
//--------------------------------------*/
/* WPFORM align submit button to the right */
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
text-align: right;
margin-top: -15px;
}
/* WPFORM check box choices not bold */
div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
font-weight: 400!important;
}
/*INPUT TEXT FIELD contactus*/
#top .main_color input[type='text'], #top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select
{
border-color: #dddddd;
background-color: #ffffff;
}
/*WPFORMS select solution centered*/
.selectsolution {
Text-align: center;
content-align:center;
}
/*WPFORMS progress indicator title*/
div.wpforms-container-full .wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page-title {
font-size: 14px;
}
/*----------------------------------------
// Button service text color on hover
//--------------------------------------*/
.button-service:hover a.avia-button .avia_iconbox_title {
color: #000000 !important;
}
.main_color .av-masonry {
background-color: transparent;
}
/*----------------------------------------
// Caption overlay for 8 columns grid
//--------------------------------------*/
.av-image-caption-overlay-center {
padding: 0px;
}
/*----------------------------------------
/*MESSAGE BOX notice of ban export license*/
//--------------------------------------*/
div .avia_message_box .avia_message_box_title {
font-size: 16px;
font-weight: 1000;
text-transform: uppercase;
}
.avia_message_box_content {
font-size: 14px;
text-transform: none;
font-weight: 600;
text-align: left;
padding-top: 20px;
}
/*----------------------------------------
// BUTTON GET A QUOTE - FONT ALWAYS IN WHITE
//--------------------------------------*/
#menu-item-72 .avia-menu-text {
color:white !important;
}
/*----------------------------------------
// HOME PAGE ICON MENU UNDER SLIDER
//--------------------------------------*/
.icon-menu:hover {
background-color: #3eb5f1!important;
}
/*----------------------------------------
// PICTURE CIRCLED with border and background
//--------------------------------------*/
.av-styling-circle .avia-image-container-inner {
border: 5px solid #f8f8f8;
background: #f2f2f2;
}
/*----------------------------------------
// DELETE border on div
//--------------------------------------*/
.main_color {
border: none;
}
/*----------------------------------------
// 7 Columns in color section/gridrow. Each column section must have the ID indicated.
//--------------------------------------*/
.sj-col {
width: 14.2857% !important;
}
/*----------------------------------------
// 8 Columns in color section/gridrow. Color section must have the ID indicated.
//--------------------------------------*/
#av-extra-columns-8-bis .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#av-extra-columns-8-bis .column-top-margin {
margin-top: 10px !important;
}
#av-extra-columns-8-bis .flex_column {
width: 12%;
flex-basis: 12%;
margin-left: 0.44%;
margin-top: 10px !important;
}
#av-extra-columns-8-bis .flex_column.first {
clear: none!important;
margin-left: 0.44%;
}
/* Two columns in mobile */
@media only screen and (max-width: 768px) {
#av-extra-columns-8-bis .flex_column {
margin-bottom: 10px!important;
margin-top: 10px!important;
/* Width of the container */
flex-basis: 90%;
}
#av-extra-columns-8-bis .flex_column:nth-child(even) {
margin-left: 3%!important;
}
}
/*----------------------------------------
// 6 Columns in color section/gridrow. Color section must have the ID indicated.
//--------------------------------------*/
#av-extra-columns-6 .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#av-extra-columns-6 .column-top-margin {
margin-top: 0 !important;
}
#av-extra-columns-6 .flex_column {
width: 15.5%;
flex-basis: 15.5%;
margin-left: 1%;
margin-top: 20px !important;
text-align: center;
}
#av-extra-columns-6 .flex_column.first {
clear: none !important;
margin-left: 1%;
}
/* ── Header alignment ── */
#av-extra-columns-6 .av-special-heading {
text-align: left !important;
min-height: 60px;
}
#av-extra-columns-6 .av-special-heading-tag {
text-align: left !important;
}
/* ── Subheader alignment ── */
#av-extra-columns-6 .av-subheading,
#av-extra-columns-6 .av-subheading p {
text-align: left !important;
}
/* ── Text block alignment ──
Must target .avia_textblock because Avada's per-element rules
(#top .av_textblock_section.[id] .avia_textblock) override .av_textblock_section */
#av-extra-columns-6 .av_textblock_section .avia_textblock {
text-align: left !important;
}
/* ── Button alignment ── */
#av-extra-columns-6 .avia-button-wrap {
text-align: center !important;
}
/* Tablet: 2 columns of 3 */
@media (max-width: 900px) {
#av-extra-columns-6 .flex_column {
width: 47%;
flex-basis: 47%;
margin-left: 2%;
}
#av-extra-columns-6 .flex_column.first {
margin-left: 2%;
}
}
/* Phone: 2 columns still, slightly more margin */
@media (max-width: 480px) {
#av-extra-columns-6 .flex_column {
width: 46%;
flex-basis: 46%;
margin-left: 2.5%;
}
#av-extra-columns-6 .flex_column.first {
margin-left: 2.5%;
}
}
/*----------------------------------------
// 7 Columns in color section/gridrow. Color section must have the ID indicated.
//--------------------------------------*/
#av-extra-columns-7 .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#av-extra-columns-7 .column-top-margin {
margin-top: 0 !important;
}
#av-extra-columns-7 .flex_column {
width: 13%;
flex-basis: 13%;
margin-left: 1%;
margin-top: 20px!important;
}
#av-extra-columns-7 .flex_column.first {
clear: none!important;
margin-left: 1%;
}
/*----------------------------------------
// Two columns in mobile
//--------------------------------------*/
@media only screen and (max-width: 768px) {
#av-extra-columns-7 .flex_column {
margin-bottom: 20px!important;
margin-top: 20px!important;
/* Width of the container */
flex-basis: 90%;
}
#av-extra-columns-7 .flex_column:nth-child(even) {
margin-left: 5%!important;
}
}
/* ══════════════════════════════════════════════
WIDGET GET A QUOTE
══════════════════════════════════════════════ */
.rq-cta-block {
background-color: transparent;
border: 2px solid #2ab4e8 !important;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px 20px;
box-sizing: border-box;
gap: 10px;
}
.rq-label {
color: #003459;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0;
}
.rq-sub {
color: #555;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
.rq-btn {
display: inline-block;
margin-top: 6px;
background-color: #2ab4e8;
color: #fff !important;
font-size: 13px;
font-weight: 600;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none !important;
letter-spacing: 0.03em;
transition: background-color 0.2s ease;
}
.rq-btn:hover {
background-color: #1a9fd4;
}
/* ══════════════════════════════════════════════
SHIPPING JOURNEY — complete
══════════════════════════════════════════════ */
.shipping-journey {
--sj-surface: #0c1a2c;
--sj-text: #e0eaf5;
--sj-muted: #6a8fa8;
}
/* ── Wrapper ── */
.sj-scroll-hint-wrapper {
width: 100%;
}
/* ── Outer layout ── */
.sj-outer-layout {
display: flex;
align-items: stretch;
}
.sj-journey-col {
flex: 1;
min-width: 0;
}
/* ── Chevron bar ── */
.sj-chevron-bar {
display: flex;
margin-bottom: 12px;
}
.sj-chev {
flex: 1;
min-width: 0;
overflow: hidden;
text-align: center;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.92);
padding: 8px 2px;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
margin-right: 3px;
white-space: nowrap;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.sj-chev:first-child {
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.sj-chev:last-child {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
margin-right: 0;
}
.sj-chev-1 { background: #2ab4e8; }
.sj-chev-2 { background: #18c4b0; }
.sj-chev-3 { background: #20c475; }
.sj-chev-4 { background: #88c420; }
.sj-chev-5 { background: #c4a018; }
.sj-chev-6 { background: #c46018; }
.sj-chev-7 { background: #c41848; }
/* ── Step grid ── */
.sj-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
align-items: stretch;
}
.sj-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
/* ── Base card ── */
.sj-step-card {
border-radius: 10px;
padding: 16px 10px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-top-style: solid;
border-top-width: 3px;
border-top-color: rgba(255,255,255,0.07);
border-right-style: solid;
border-right-width: 1px;
border-right-color: rgba(255,255,255,0.07);
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255,255,255,0.07);
border-left-style: solid;
border-left-width: 1px;
border-left-color: rgba(255,255,255,0.07);
background: #0c1a2c;
height: 100%;
box-sizing: border-box;
transition: transform 0.18s ease;
}
.sj-step-card:hover {
transform: translateY(-3px);
}
/* ── CHANGE 1: gradient backgrounds merged in — light variant block removed ── */
.sj-step-card.sj-s1 {
background: linear-gradient(145deg, #132d3b 0%, #09161c 100%);
border-top-color: #2ab4e8;
border-right-color: rgba(42,180,232,0.18);
border-bottom-color: rgba(42,180,232,0.18);
border-left-color: rgba(42,180,232,0.18);
}
.sj-step-card.sj-s2 {
background: linear-gradient(145deg, #11312c 0%, #081815 100%);
border-top-color: #18c4b0;
border-right-color: rgba(24,196,176,0.18);
border-bottom-color: rgba(24,196,176,0.18);
border-left-color: rgba(24,196,176,0.18);
}
.sj-step-card.sj-s3 {
background: linear-gradient(145deg, #12311d 0%, #08180e 100%);
border-top-color: #20c475;
border-right-color: rgba(32,196,117,0.18);
border-bottom-color: rgba(32,196,117,0.18);
border-left-color: rgba(32,196,117,0.18);
}
.sj-step-card.sj-s4 {
background: linear-gradient(145deg, #243110 0%, #111808 100%);
border-top-color: #88c420;
border-right-color: rgba(136,196,32,0.18);
border-bottom-color: rgba(136,196,32,0.18);
border-left-color: rgba(136,196,32,0.18);
}
.sj-step-card.sj-s5 {
background: linear-gradient(145deg, #30280c 0%, #171306 100%);
border-top-color: #c4a018;
border-right-color: rgba(196,160,24,0.18);
border-bottom-color: rgba(196,160,24,0.18);
border-left-color: rgba(196,160,24,0.18);
}
.sj-step-card.sj-s6 {
background: linear-gradient(145deg, #2f180a 0%, #170c05 100%);
border-top-color: #c46018;
border-right-color: rgba(196,96,24,0.18);
border-bottom-color: rgba(196,96,24,0.18);
border-left-color: rgba(196,96,24,0.18);
}
.sj-step-card.sj-s7 {
background: linear-gradient(145deg, #3d0a22 0%, #1e0512 100%);
border-top-color: #c41848;
border-right-color: rgba(196,24,72,0.18);
border-bottom-color: rgba(196,24,72,0.18);
border-left-color: rgba(196,24,72,0.18);
}
.sj-step-card.sj-opt-insurance {
background: linear-gradient(145deg, #132d3b 0%, #09161c 100%);
border-top-color: #2ab4e8;
border-right-color: rgba(42,180,232,0.18);
border-bottom-color: rgba(42,180,232,0.18);
border-left-color: rgba(42,180,232,0.18);
}
.sj-step-card.sj-opt-money {
background: linear-gradient(145deg, #121e32 0%, #080f18 100%);
border-top-color: #3a78c4;
border-right-color: rgba(58,120,196,0.18);
border-bottom-color: rgba(58,120,196,0.18);
border-left-color: rgba(58,120,196,0.18);
}
/* ── Per-step hover ── */
.sj-step-card.sj-s1:hover { border-top-color: #2ab4e8; border-right-color: rgba(42,180,232,0.45); border-bottom-color: rgba(42,180,232,0.45); border-left-color: rgba(42,180,232,0.45); }
.sj-step-card.sj-s2:hover { border-top-color: #18c4b0; border-right-color: rgba(24,196,176,0.45); border-bottom-color: rgba(24,196,176,0.45); border-left-color: rgba(24,196,176,0.45); }
.sj-step-card.sj-s3:hover { border-top-color: #20c475; border-right-color: rgba(32,196,117,0.45); border-bottom-color: rgba(32,196,117,0.45); border-left-color: rgba(32,196,117,0.45); }
.sj-step-card.sj-s4:hover { border-top-color: #88c420; border-right-color: rgba(136,196,32,0.45); border-bottom-color: rgba(136,196,32,0.45); border-left-color: rgba(136,196,32,0.45); }
.sj-step-card.sj-s5:hover { border-top-color: #c4a018; border-right-color: rgba(196,160,24,0.45); border-bottom-color: rgba(196,160,24,0.45); border-left-color: rgba(196,160,24,0.45); }
.sj-step-card.sj-s6:hover { border-top-color: #c46018; border-right-color: rgba(196,96,24,0.45); border-bottom-color: rgba(196,96,24,0.45); border-left-color: rgba(196,96,24,0.45); }
.sj-step-card.sj-s7:hover { border-top-color: #c41848; border-right-color: rgba(196,24,72,0.45); border-bottom-color: rgba(196,24,72,0.45); border-left-color: rgba(196,24,72,0.45); }
.sj-step-card.sj-opt-insurance:hover { border-top-color: #2ab4e8; border-right-color: rgba(42,180,232,0.45); border-bottom-color: rgba(42,180,232,0.45); border-left-color: rgba(42,180,232,0.45); }
.sj-step-card.sj-opt-money:hover { border-top-color: #3a78c4; border-right-color: rgba(58,120,196,0.45); border-bottom-color: rgba(58,120,196,0.45); border-left-color: rgba(58,120,196,0.45); }
/* ── Icon container ── */
.sj-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255,255,255,0.05);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sj-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── Per-step icon background + stroke ── */
.sj-step-card.sj-s1 .sj-icon { background: rgba(42,180,232,0.14); }
.sj-step-card.sj-s2 .sj-icon { background: rgba(24,196,176,0.14); }
.sj-step-card.sj-s3 .sj-icon { background: rgba(32,196,117,0.14); }
.sj-step-card.sj-s4 .sj-icon { background: rgba(136,196,32,0.14); }
.sj-step-card.sj-s5 .sj-icon { background: rgba(196,160,24,0.14); }
.sj-step-card.sj-s6 .sj-icon { background: rgba(196,96,24,0.14); }
.sj-step-card.sj-s7 .sj-icon { background: rgba(196,24,72,0.14); }
.sj-step-card.sj-opt-insurance .sj-icon { background: rgba(42,180,232,0.14); }
.sj-step-card.sj-opt-money .sj-icon { background: rgba(58,120,196,0.14); }
.sj-step-card.sj-s1 .sj-icon svg { stroke: #2ab4e8; }
.sj-step-card.sj-s2 .sj-icon svg { stroke: #18c4b0; }
.sj-step-card.sj-s3 .sj-icon svg { stroke: #20c475; }
.sj-step-card.sj-s4 .sj-icon svg { stroke: #88c420; }
.sj-step-card.sj-s5 .sj-icon svg { stroke: #c4a018; }
.sj-step-card.sj-s6 .sj-icon svg { stroke: #c46018; }
.sj-step-card.sj-s7 .sj-icon svg { stroke: #c41848; }
.sj-step-card.sj-opt-insurance .sj-icon svg { stroke: #2ab4e8; }
.sj-step-card.sj-opt-money .sj-icon svg { stroke: #3a78c4; }
/* ── CHANGE 2: text colours set once here, no overrides needed anywhere ── */
.sj-step-name {
font-size: 12px;
font-weight: 600;
color: #ffffff;
text-align: center;
margin: 0 !important;
}
.sj-step-desc {
font-size: 11px;
color: rgba(255,255,255,0.65);
text-align: center;
line-height: 1.5;
margin: 0 !important;
}
/* 6-step variant — services page (no Freight) */
.sj-grid.sj-grid-6 {
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 900px) {
.sj-grid.sj-grid-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.sj-grid.sj-grid-6 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Divider ── */
.sj-divider {
flex-shrink: 0;
width: 1px;
background: rgba(255,255,255,0.07);
margin: 0 16px;
}
/* ── Optional column ── */
.sj-optional-col {
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.sj-optional-label {
display: flex;
flex-direction: row;
gap: 10px;
margin-bottom: 12px;
height: 34px;
}
.sj-optional-label span {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 0;
}
.sj-optional-label .sj-opt-label-insurance {
background: #2ab4e8;
color: rgba(255,255,255,0.95);
}
.sj-optional-label .sj-opt-label-money {
background: #3a78c4;
color: rgba(255,255,255,0.95);
}
.sj-optional-grid {
display: flex;
flex-direction: row;
gap: 10px;
flex: 1;
align-items: stretch;
}
.sj-optional-grid .sj-card-link {
flex: 1;
width: 115px;
flex-shrink: 0;
}
/* ── Mobile ── */
@media (max-width: 900px) {
.sj-outer-layout {
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.sj-journey-col { width: 100%; }
.sj-chevron-bar { display: none; }
.sj-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sj-divider { display: none; }
.sj-optional-col { width: 100%; }
.sj-optional-label { gap: 8px; }
.sj-optional-grid { gap: 8px; }
.sj-optional-grid .sj-card-link { flex: 1; width: auto; }
}
@media (max-width: 480px) {
.sj-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ══════════════════════════════════════════════
SHIPPING JOURNEY — SIDEBAR VERTICAL VERSION
Dark style — matches homepage block
══════════════════════════════════════════════ */
.sj-sidebar {
--sj-text: #e0eaf5;
--sj-muted: #6a8fa8;
}
.sj-sidebar .sj-sidebar-link {
text-decoration: none;
color: inherit;
display: block;
margin-bottom: 6px;
}
/* ── Base row — dark, matches homepage card ── */
.sj-sidebar-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: #0c1a2c;
border-top-style: solid; border-top-width: 1px; border-top-color: rgba(255,255,255,0.06);
border-right-style: solid; border-right-width: 1px; border-right-color: rgba(255,255,255,0.06);
border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: rgba(255,255,255,0.06);
border-left-style: solid; border-left-width: 3px; border-left-color: rgba(255,255,255,0.08);
transition: transform 0.15s ease;
cursor: pointer;
}
.sj-sidebar-link:hover .sj-sidebar-row {
transform: translateX(3px);
}
/* ── Per-step: left border + background tint ── */
.sj-sidebar-row.sj-sr-1 { border-left-color: #2ab4e8; background: #0a1f30; border-top-color: rgba(42,180,232,0.18); border-right-color: rgba(42,180,232,0.18); border-bottom-color: rgba(42,180,232,0.18); }
.sj-sidebar-row.sj-sr-2 { border-left-color: #18c4b0; background: #091e28; border-top-color: rgba(24,196,176,0.18); border-right-color: rgba(24,196,176,0.18); border-bottom-color: rgba(24,196,176,0.18); }
.sj-sidebar-row.sj-sr-3 { border-left-color: #20c475; background: #091f1e; border-top-color: rgba(32,196,117,0.18); border-right-color: rgba(32,196,117,0.18); border-bottom-color: rgba(32,196,117,0.18); }
.sj-sidebar-row.sj-sr-4 { border-left-color: #88c420; background: #131f09; border-top-color: rgba(136,196,32,0.18); border-right-color: rgba(136,196,32,0.18); border-bottom-color: rgba(136,196,32,0.18); }
.sj-sidebar-row.sj-sr-5 { border-left-color: #c4a018; background: #201a08; border-top-color: rgba(196,160,24,0.18); border-right-color: rgba(196,160,24,0.18); border-bottom-color: rgba(196,160,24,0.18); }
.sj-sidebar-row.sj-sr-6 { border-left-color: #c46018; background: #201208; border-top-color: rgba(196,96,24,0.18); border-right-color: rgba(196,96,24,0.18); border-bottom-color: rgba(196,96,24,0.18); }
.sj-sidebar-row.sj-sr-opt-a { border-left-color: #2ab4e8; background: #0a1f30; border-top-color: rgba(42,180,232,0.18); border-right-color: rgba(42,180,232,0.18); border-bottom-color: rgba(42,180,232,0.18); }
.sj-sidebar-row.sj-sr-opt-b { border-left-color: #3a78c4; background: #0c1828; border-top-color: rgba(58,120,196,0.18); border-right-color: rgba(58,120,196,0.18); border-bottom-color: rgba(58,120,196,0.18); }
/* ── Active state ── */
.sj-sidebar-row.sj-sr-active { filter: brightness(1.15); border-left-width: 4px; }
/* ── Hover on active too ── */
.sj-sidebar-row.sj-sr-active { transform: translateX(3px); }
/* ── Icon ── */
.sj-sidebar-icon {
width: 34px; height: 34px;
border-radius: 7px;
background: rgba(255,255,255,0.05);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sj-sidebar-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sj-sr-1 .sj-sidebar-icon { background: rgba(42,180,232,0.14); }
.sj-sr-2 .sj-sidebar-icon { background: rgba(24,196,176,0.14); }
.sj-sr-3 .sj-sidebar-icon { background: rgba(32,196,117,0.14); }
.sj-sr-4 .sj-sidebar-icon { background: rgba(136,196,32,0.14); }
.sj-sr-5 .sj-sidebar-icon { background: rgba(196,160,24,0.14); }
.sj-sr-6 .sj-sidebar-icon { background: rgba(196,96,24,0.14); }
.sj-sr-opt-a .sj-sidebar-icon { background: rgba(42,180,232,0.14); }
.sj-sr-opt-b .sj-sidebar-icon { background: rgba(58,120,196,0.14); }
.sj-sr-1 .sj-sidebar-icon svg { stroke: #2ab4e8; }
.sj-sr-2 .sj-sidebar-icon svg { stroke: #18c4b0; }
.sj-sr-3 .sj-sidebar-icon svg { stroke: #20c475; }
.sj-sr-4 .sj-sidebar-icon svg { stroke: #88c420; }
.sj-sr-5 .sj-sidebar-icon svg { stroke: #c4a018; }
.sj-sr-6 .sj-sidebar-icon svg { stroke: #c46018; }
.sj-sr-opt-a .sj-sidebar-icon svg { stroke: #2ab4e8; }
.sj-sr-opt-b .sj-sidebar-icon svg { stroke: #3a78c4; }
/* ── Name + arrow ── */
.sj-sidebar-name {
flex: 1;
font-size: 13px; font-weight: 600;
color: #e0eaf5;
margin: 0 !important;
}
.sj-sidebar-arrow {
font-size: 13px; color: #6a8fa8;
opacity: 0; transition: opacity 0.15s ease;
}
.sj-sidebar-link:hover .sj-sidebar-arrow,
.sj-sidebar-row.sj-sr-active .sj-sidebar-arrow { opacity: 1; }
/* ── Divider ── */
.sj-sidebar-divider {
display: flex; align-items: center; gap: 10px;
margin: 14px 0 10px;
}
.sj-sidebar-divider::before,
.sj-sidebar-divider::after {
content: ''; flex: 1; height: 1px;
background: rgba(255,255,255,0.08);
}
.sj-sidebar-divider span {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em;
color: #6a8fa8;
}
/* ══════════════════════════════════════════════
SERVICE SUBNAV — horizontal strip
v3: top-bar accent + double-class specificity
══════════════════════════════════════════════ */
.sj-subnav {
display: flex;
align-items: stretch;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: #0f1e2e !important;
}
.sj-subnav::-webkit-scrollbar { display: none; }
.avia_codeblock_section:has(.sj-subnav),
.avia_codeblock:has(.sj-subnav) {
padding: 0 !important;
margin: 0 !important;
}
.sj-subnav-link {
text-decoration: none;
color: inherit;
display: flex;
flex: 1;
min-width: 0;
}
/* ── Base item ── */
.sj-subnav-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 10px;
width: 100%;
border-top-style: solid;
border-top-width: 4px;
border-top-color: rgba(255,255,255,0.08);
border-right-style: solid;
border-right-width: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255,255,255,0.08);
border-left-style: solid;
border-left-width: 0px;
transition: background 0.15s ease, border-top-color 0.15s ease;
cursor: pointer;
}
.sj-subnav-link:hover .sj-subnav-item {
background: rgba(255,255,255,0.05);
}
/* ── Per-step top border — solid color, double class ── */
.sj-subnav-item.sj-sn-1 { border-top-color: #4ab5eb; }
.sj-subnav-item.sj-sn-2 { border-top-color: #45c4b0; }
.sj-subnav-item.sj-sn-3 { border-top-color: #46c472; }
.sj-subnav-item.sj-sn-4 { border-top-color: #8ec43f; }
.sj-subnav-item.sj-sn-5 { border-top-color: #be9f2f; }
.sj-subnav-item.sj-sn-6 { border-top-color: #bc6128; }
.sj-subnav-item.sj-sn-opt-a { border-top-color: #4ab5ea; }
.sj-subnav-item.sj-sn-opt-b { border-top-color: #4679c6; }
/* ── Active — tinted background, thicker top bar ── */
.sj-subnav-item.sj-sn-active { border-top-width: 5px; }
.sj-subnav-item.sj-sn-active.sj-sn-1 { background: rgba(74,181,235,0.14); border-top-color: #4ab5eb; }
.sj-subnav-item.sj-sn-active.sj-sn-2 { background: rgba(69,196,176,0.14); border-top-color: #45c4b0; }
.sj-subnav-item.sj-sn-active.sj-sn-3 { background: rgba(70,196,114,0.14); border-top-color: #46c472; }
.sj-subnav-item.sj-sn-active.sj-sn-4 { background: rgba(142,196,63,0.14); border-top-color: #8ec43f; }
.sj-subnav-item.sj-sn-active.sj-sn-5 { background: rgba(190,159,47,0.14); border-top-color: #be9f2f; }
.sj-subnav-item.sj-sn-active.sj-sn-6 { background: rgba(188,97,40,0.14); border-top-color: #bc6128; }
.sj-subnav-item.sj-sn-active.sj-sn-opt-a { background: rgba(74,181,234,0.14); border-top-color: #4ab5ea; }
.sj-subnav-item.sj-sn-active.sj-sn-opt-b { background: rgba(70,121,198,0.14); border-top-color: #4679c6; }
/* ── Icon ── */
.sj-subnav-icon {
width: 32px;
height: 32px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sj-subnav-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.sj-subnav-item.sj-sn-1 .sj-subnav-icon { background: rgba(74,181,235,0.14); }
.sj-subnav-item.sj-sn-2 .sj-subnav-icon { background: rgba(69,196,176,0.14); }
.sj-subnav-item.sj-sn-3 .sj-subnav-icon { background: rgba(70,196,114,0.14); }
.sj-subnav-item.sj-sn-4 .sj-subnav-icon { background: rgba(142,196,63,0.14); }
.sj-subnav-item.sj-sn-5 .sj-subnav-icon { background: rgba(190,159,47,0.14); }
.sj-subnav-item.sj-sn-6 .sj-subnav-icon { background: rgba(188,97,40,0.14); }
.sj-subnav-item.sj-sn-opt-a .sj-subnav-icon { background: rgba(74,181,234,0.14); }
.sj-subnav-item.sj-sn-opt-b .sj-subnav-icon { background: rgba(70,121,198,0.14); }
.sj-subnav-item.sj-sn-1 .sj-subnav-icon svg { stroke: #4ab5eb; }
.sj-subnav-item.sj-sn-2 .sj-subnav-icon svg { stroke: #45c4b0; }
.sj-subnav-item.sj-sn-3 .sj-subnav-icon svg { stroke: #46c472; }
.sj-subnav-item.sj-sn-4 .sj-subnav-icon svg { stroke: #8ec43f; }
.sj-subnav-item.sj-sn-5 .sj-subnav-icon svg { stroke: #be9f2f; }
.sj-subnav-item.sj-sn-6 .sj-subnav-icon svg { stroke: #bc6128; }
.sj-subnav-item.sj-sn-opt-a .sj-subnav-icon svg { stroke: #4ab5ea; }
.sj-subnav-item.sj-sn-opt-b .sj-subnav-icon svg { stroke: #4679c6; }
/* ── Name ── */
.sj-subnav-name {
font-size: 12px;
font-weight: 600;
color: #e0eaf5;
white-space: nowrap;
margin: 0 !important;
opacity: 0.65;
}
.sj-subnav-link:hover .sj-subnav-name,
.sj-sn-active .sj-subnav-name { opacity: 1; }
/* ── Separators ── */
.sj-subnav-sep {
width: 1px;
background: rgba(255,255,255,0.07);
flex-shrink: 0;
align-self: stretch;
}
.sj-subnav-sep-opt {
width: 2px;
background: rgba(255,255,255,0.15);
}
/* ── Mobile ── */
@media (max-width: 768px) {
.sj-subnav-name { display: none; }
.sj-subnav-item { padding: 12px 6px; }
.sj-subnav { background: #0f1e2e !important; }
}
/* ── Padding wipe — mobile AND desktop ── */
.avia_codeblock_section:has(.sj-subnav),
.avia_codeblock:has(.sj-subnav),
.flex_cell_inner:has(.sj-subnav),
.flex_cell:has(.sj-subnav) {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ── Highlight current tab of the page ── */
.sj-step.active .sj-icon {
background-color: var(--sj-accent); /* #2ab4e8 */
color: #fff;
}
.sj-step.active .sj-label {
color: var(--sj-accent);
font-weight: 600;
}
.sj-subnav-link--active .sj-subnav-item {
background-color: #2ab4e8 !important;
}
.sj-subnav-link--active .sj-subnav-icon svg {
stroke: #ffffff !important;
}
.sj-subnav-link--active .sj-subnav-name {
color: #ffffff !important;
}
/*-------------------------------------------
// ABOUT PAGE - FEW FIGURES BOX
//-------------------------------------------*/
.flex_column.few-figures-box {
background-color: rgb(24, 30, 43) !important;
border: none !important;
border-radius: 6px !important;
padding: 30px 30px 30px 30px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}
/* FEW FIGURES heading */
.few-figures-box .av-special-heading-tag {
color: rgb(62, 181, 241) !important;
}
/* Heading border line */
.few-figures-box .special-heading-inner-border {
background-color: rgb(62, 181, 241) !important;
}
.few-figures-box .special-heading-border {
border-color: rgba(62, 181, 241, 0.4) !important;
}
/* List items text color */
.few-figures-box li {
color: rgba(255, 255, 255, 0.85) !important;
margin-bottom: 8px !important;
font-size: 15px !important;
}
/* Highlighted numbers (6, 90+, 1,000+, 30,000) */
.few-figures-box li b {
color: rgb(62, 181, 241) !important;
font-size: 17px !important;
font-weight: 700 !important;
}
/* Bold text items (Offers both / Serves all) */
.few-figures-box li strong {
color: rgb(62, 181, 241) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* Language flags subtle */
.avia_textblock:has(img[src*="Flag_"]) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.avia_textblock p:has(img[src*="Flag_"]) {
margin: 0;
line-height: 0;
}
.avia_textblock img[src*="Flag_"] {
display: block;
width: 22px !important;
height: 14px !important;
border-radius: 2px;
object-fit: cover;
float: none !important;
margin: 0 !important;
opacity: 0.65;
}
}
}
}
/* ============================================
Reach Us Directly - Dark Box (like FEW FIGURES)
============================================ */
/* The outer cell container - dark background */
.reach-us-box {
border-radius: 6px !important;
overflow: visible;
}
/* The inner flex column - ensure transparent background */
.reach-us-box .flex_column {
background: transparent !important;
}
/* All text within the box should be white/light */
.reach-us-box,
.reach-us-box p,
.reach-us-box div,
.reach-us-box span {
color: rgba(255, 255, 255, 0.9) !important;
}
/* The heading "Reach us directly" */
.reach-us-box h2,
.reach-us-box .av-special-heading-tag {
color: #ffffff !important;
letter-spacing: 0.03em;
}
/* Quick labels (Phone, WhatsApp, Opening hours) */
.reach-us-box .quick-label {
color: #4db8ff !important;
font-weight: 600;
}
/* Quick values (phone numbers, hours) */
.reach-us-box .quick-value {
color: rgba(255, 255, 255, 0.85) !important;
}
/* "Already know what you need?" section */
.reach-us-box .wa-btn {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Separator line color */
.reach-us-box .special-heading-inner-border {
background: rgba(255, 255, 255, 0.3) !important;
}
/* Bold text */
.reach-us-box strong,
.reach-us-box b {
color: #ffffff !important;
}
/* Make sure the textblock has no extra background */
.reach-us-box .av_textblock_section {
background: transparent !important;
}
/* Sidebar widget inside the box - transparent bg */
.reach-us-box .sidebar,
.reach-us-box .widget_text,
.reach-us-box .textwidget {
background: transparent !important;
}
/* Text in sidebar widget */
.reach-us-box .textwidget p,
.reach-us-box .textwidget div,
.reach-us-box .textwidget span,
.reach-us-box .textwidget h3,
.reach-us-box .textwidget h4 {
color: rgba(255, 255, 255, 0.85) !important;
background: transparent !important;
}
/* The Get a Quote link - style as a full-width cyan button */
.reach-us-box .textwidget a,
.reach-us-box .sidebar a:not(.avia-button) {
display: block !important;
background: #00a6e8 !important;
color: #ffffff !important;
text-align: center !important;
padding: 12px 20px !important;
border-radius: 4px !important;
text-decoration: none !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
font-size: 13px !important;
}
.reach-us-box .textwidget a:hover,
.reach-us-box .sidebar a:not(.avia-button):hover {
background: #0090cb !important;
}
/* ══════════════════════════════════════════════
CONTACT - Location Cards - Our Locations section
══════════════════════════════════════════════ */
.loc-card {
border: 1px solid #e8edf2;
border-radius: 8px;
overflow: hidden;
background: #fff;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: box-shadow 0.2s ease;
}
.loc-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.loc-card img {
width: 100% !important;
height: 200px !important;
object-fit: cover;
display: block;
float: none !important;
margin: 0 !important;
}
.loc-card-body {
padding: 20px 22px;
}
.loc-card-body .loc-name {
font-size: 17px !important;
font-weight: 700 !important;
color: #25375c !important;
margin: 0 0 4px 0 !important;
line-height: 1.3 !important;
}
.loc-card-body .loc-type {
font-size: 13px !important;
color: #00a6e8 !important;
font-weight: 600 !important;
margin: 0 0 12px 0 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.loc-card-body .loc-address {
font-size: 14px !important;
color: #666 !important;
margin: 0 0 14px 0 !important;
line-height: 1.5 !important;
}
.loc-card-body .loc-link {
font-size: 14px !important;
color: #00a6e8 !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-block;
}
.loc-card-body .loc-link:hover {
color: #0087c0 !important;
text-decoration: underline !important;
}