/*
Theme Name: Avada Child
Template: Avada
Version: 1.0
*/
/* Add your custom CSS below this line */
.imgCaro {
aspect-ratio: 3 / 2;
width: 100%;
max-width: 100%;
height: auto; /* Let aspect-ratio drive height, not the parent */
overflow: hidden;
border-radius: 8px;
display: block;
position: relative;
}
/* Kill autoheight jumping — override Swiper's inline height on the wrapper */
.imgCaro .swiper-autoheight,
.imgCaro .swiper-autoheight .swiper-wrapper {
height: 100% !important;
align-items: center; /* Centre slides vertically within fixed height */
}
/* Slides must fill the full fixed height */
.imgCaro .swiper-slide {
height: 100% !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Item wrappers fill the slide */
.imgCaro .fusion-carousel-item-wrapper,
.imgCaro .fusion-image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Images fill and centre without distortion */
.imgCaro .fusion-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* Pretty wrap for body text and headings site-wide */
p,
h1, h2, h3, h4, h5, h6,
li,
.fusion-text,
.fusion-column .fusion-builder-column-content {
text-wrap: balance !important;
text-wrap: pretty !important;
}
/* Override: balance for headings and text inside .tPretty */
.tPretty,
.tPretty p,
.tPretty h1, .tPretty h2, .tPretty h3,
.tPretty h4, .tPretty h5, .tPretty h6,
.tPretty li,
.tPretty .fusion-text {
text-wrap: balance !important; /* fallback */
text-wrap: pretty !important;
}
/* Only apply 1600px alignment from 1200px viewport and up */
@media (min-width: 1200px) {
.nbWideRow .awb-column__content {
max-width: 1600px !important;
}
/* Hero content aligned with header (same 1600px container) */
.nbHeroRow.fusion-builder-row-inner,
.nbHeroRow.fusion-row {
max-width: 1600px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box;
}
}
/* Align first column with 1600px layout — only when the fullwidth container has class headerMenu (add that class in Avada to that section). */
.headerMenu.fusion-fullwidth .fusion-builder-row-inner .fusion-layout-column:first-child .fusion-column-wrapper {
padding-left: max(24px, calc((100vw - 1600px) / 2 + 0px)) !important;
box-sizing: border-box;
}
@media (max-width: 810px) {
.headerMenu.fusion-fullwidth .fusion-builder-row-inner .fusion-layout-column:first-child .fusion-column-wrapper {
padding-left: max(16px, calc((100vw - 1600px) / 2 + 0px)) !important;
}
}
/* nbLongRow / nbLongRow2: max-width 1600px only at 1200px+; margins commented out (Avada container quirks) */
@media (min-width: 1200px) {
.fusion-flex-container .fusion-row .fusion-flex-column.nbLongRow {
max-width: 1600px !important;
/* margin-left: calc(5%); */
/* margin-right: calc(-4% / 2); */
}
.fusion-flex-container .fusion-row .fusion-flex-column.nbLongRow2 {
max-width: 1600px !important;
}
}
.imgFill{
width: 100%;
height: 180px; /* adjust to your preferred height */
overflow: hidden;
position: relative;
}
.imgFill img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.imgBox{
max-height: 180px; /* adjust to your preferred height */
overflow: hidden;
position: relative;
}
.imgCar img {
border-radius: 8px;
}
.imgPill{
width: 100%;
height: 300px; /* adjust to your preferred height */
overflow: hidden;
position: relative;
}
/* sticky header */
.headerMenu {
margin-top: -82px !important;
}
@media (max-width: 810px) {
.headerMenu {
margin-top: -92px !important;
}
}
/* sticky header */
.headerBlog {
margin-top: -60px !important;
}
/* sticky header */
.headerUp {
z-index: 60;
}
.fusion-accordian .fusion-panel {
border-radius: 12px;
}
/* Replace Avada ToTop arrow with inline SVG */
#toTop.fusion-top-top-link::before{
content: "";
display: block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
#toTop{
display: flex;
align-items: center;
justify-content: center;
}
/* Fixed frame; image fills via object-fit (needs a definite box — see img rules). */
.imgBlog {
width: 100%;
height: 260px;
min-height: 260px;
overflow: hidden;
position: relative;
}
/*
* Theme + WP often use max-width:100%; height:auto on images, which preserves
* aspect ratio inside the width and leaves empty space in a fixed-height box.
* Absolute positioning + object-fit: cover forces the img to use the full frame.
*/
.imgBlog img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
display: block;
}
.imgSub{
height: 380px; /* adjust to your preferred height */
overflow: hidden;
position: relative;
}
.imgDub{
height: 360px; /* adjust to your preferred height */
overflow: hidden;
position: relative;
@media (max-width: 620px) {
height: auto;
}
}
.imgPop img{
height: 340px; /* adjust to your preferred height */
overflow: hidden;
object-fit: cover;
object-position: center;
display: block;
}
.imgCards {
overflow: hidden;
}
.imgCards img,
img.imgCards {
display: block;
max-width: 100%;
max-height: 360px;
width: auto;
height: auto;
margin-inline: auto;
}
.colImg{
overflow: hidden;
height: 360px;
position: relative;
}
.colImg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/*
* AWB main nav — “around the world” label loop (::after ghost + data-label from JS).
* Markup:
* Do not set overflow on / here — Avada uses overflow:visible for dropdowns.
* JS: menu-text-hover-loop.js stamps data-label on li.hoverText .menu-text (DOMContentLoaded).
*/
li.hoverText .menu-text {
display: inline-block;
position: relative;
overflow: hidden;
line-height: 1.2;
max-height: 1.2em;
vertical-align: middle;
transition: transform 0.6s cubic-bezier(0.27, 0, 0.175, 1 );
}
li.hoverText .menu-text::after {
content: attr(data-label);
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
line-height: 1.2;
}
li.hoverText .awb-menu__main-a:hover .menu-text,
li.hoverText .awb-menu__main-a:focus-visible .menu-text {
transform: translateY(-15%);
}
@media (prefers-reduced-motion: reduce) {
li.hoverText .menu-text {
transition: none;
transform: none;
}
li.hoverText .menu-text::after {
content: none;
}
li.hoverText .awb-menu__main-a:hover .menu-text,
li.hoverText .awb-menu__main-a:focus-visible .menu-text {
transform: none;
}
}
.tH{
max-width: 24ch;
text-wrap: balance;
}
.tP{
max-width: 80ch;
text-wrap: balance;
}
.tHi{
max-width: 64ch;
text-wrap: pretty !important;
}
.blogT p,
.blogT h3, .blogT h4, .blogT h5, .blogT h6,
.blogT li{
max-width: 900px;
text-wrap: auto !important;
}
.blogT h1, .blogT h2{
max-width: 900px;
text-wrap: balance !important;
}