.elementor-16 .elementor-element.elementor-element-ed6bfac{--display:flex;--margin-top:-2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-5d4ecc5{--display:flex;}.elementor-16 .elementor-element.elementor-element-5d4ecc5:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-5d4ecc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F4F0E7;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-6da1274{--display:flex;}.elementor-16 .elementor-element.elementor-element-7fc5783{--display:flex;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-16 .elementor-element.elementor-element-b1b7a61{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-16 .elementor-element.elementor-element-700f989{--display:flex;}.elementor-16 .elementor-element.elementor-element-918496a{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-5d4ecc5{--content-width:1200px;}}/* Start custom CSS for gallery, class: .elementor-element-b1b7a61 *//* ========================================================= UCAB PREMIUM GALLERY SAFE VERSION FOR ELEMENTOR GALLERY WIDGET ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 { --ucab-navy: #061522; --ucab-gold: #d6b45d; --ucab-gold-light: #ead18b; --ucab-radius: 14px; width: 100%; } /* ========================================================= GALLERY CONTAINER IMPORTANT: DO NOT CHANGE POSITIONING OF ELEMENTOR ITEMS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { width: 100% !important; gap: 16px !important; margin: 0 !important; } /* ========================================================= GALLERY ITEM NO POSITION: RELATIVE HERE Elementor controls the gallery positioning. ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { overflow: hidden !important; border-radius: var(--ucab-radius) !important; background: var(--ucab-navy); box-shadow: 0 10px 30px rgba(6,21,34,0.12); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-radius .4s ease; isolation: isolate; } /* ========================================================= IMAGE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transform: scale(1); filter: saturate(.94) contrast(1.02) brightness(.97); transition: transform .75s cubic-bezier(.22,.61,.36,1), filter .55s ease; } /* ========================================================= HOVER ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(6,21,34,0.22); border-radius: 12px !important; z-index: 5; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.06); filter: saturate(1.05) contrast(1.04) brightness(1.02); } /* ========================================================= CINEMATIC OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to bottom, rgba(6,21,34,0) 35%, rgba(6,21,34,.10) 55%, rgba(6,21,34,.72) 100% ); opacity: .45; transition: opacity .45s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::before { opacity: .88; } /* ========================================================= SUBTLE GOLD FRAME ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { content: ""; position: absolute; inset: 8px; z-index: 4; pointer-events: none; border: 1px solid rgba(214,180,93,0); border-radius: 10px; transition: border-color .4s ease, inset .4s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 9px; border-color: rgba(214,180,93,.45); } /* ========================================================= ELEMENTOR OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay { z-index: 3; transition: opacity .45s ease !important; } /* ========================================================= TITLE / CAPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; line-height: 1.4 !important; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.35); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__description { color: rgba(255,255,255,.82) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; line-height: 1.5 !important; } /* ========================================================= IMAGE SHINE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item .e-gallery-image { position: relative; } /* The shine is kept subtle and does NOT affect Elementor's gallery positioning. */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { filter: saturate(1.04) contrast(1.03) brightness(1.02); } /* ========================================================= LIGHTBOX / ICON ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay::before { transition: transform .35s ease, opacity .35s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .elementor-gallery-item__overlay::before { transform: scale(1.08); } /* ========================================================= FOCUS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:focus-visible { outline: 2px solid var(--ucab-gold); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 13px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 12px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-4px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 10px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 10px !important; box-shadow: 0 7px 22px rgba(6,21,34,.13); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-3px); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.035); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { inset: 5px; border-radius: 7px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 6px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { font-size: 9px !important; letter-spacing: .9px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item, .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transition: none !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for gallery, class: .elementor-element-b1b7a61 *//* ========================================================= UCAB PREMIUM GALLERY SAFE VERSION FOR ELEMENTOR GALLERY WIDGET ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 { --ucab-navy: #061522; --ucab-gold: #d6b45d; --ucab-gold-light: #ead18b; --ucab-radius: 14px; width: 100%; } /* ========================================================= GALLERY CONTAINER IMPORTANT: DO NOT CHANGE POSITIONING OF ELEMENTOR ITEMS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { width: 100% !important; gap: 16px !important; margin: 0 !important; } /* ========================================================= GALLERY ITEM NO POSITION: RELATIVE HERE Elementor controls the gallery positioning. ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { overflow: hidden !important; border-radius: var(--ucab-radius) !important; background: var(--ucab-navy); box-shadow: 0 10px 30px rgba(6,21,34,0.12); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-radius .4s ease; isolation: isolate; } /* ========================================================= IMAGE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transform: scale(1); filter: saturate(.94) contrast(1.02) brightness(.97); transition: transform .75s cubic-bezier(.22,.61,.36,1), filter .55s ease; } /* ========================================================= HOVER ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(6,21,34,0.22); border-radius: 12px !important; z-index: 5; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.06); filter: saturate(1.05) contrast(1.04) brightness(1.02); } /* ========================================================= CINEMATIC OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to bottom, rgba(6,21,34,0) 35%, rgba(6,21,34,.10) 55%, rgba(6,21,34,.72) 100% ); opacity: .45; transition: opacity .45s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::before { opacity: .88; } /* ========================================================= SUBTLE GOLD FRAME ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { content: ""; position: absolute; inset: 8px; z-index: 4; pointer-events: none; border: 1px solid rgba(214,180,93,0); border-radius: 10px; transition: border-color .4s ease, inset .4s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 9px; border-color: rgba(214,180,93,.45); } /* ========================================================= ELEMENTOR OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay { z-index: 3; transition: opacity .45s ease !important; } /* ========================================================= TITLE / CAPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; line-height: 1.4 !important; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.35); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__description { color: rgba(255,255,255,.82) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; line-height: 1.5 !important; } /* ========================================================= IMAGE SHINE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item .e-gallery-image { position: relative; } /* The shine is kept subtle and does NOT affect Elementor's gallery positioning. */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { filter: saturate(1.04) contrast(1.03) brightness(1.02); } /* ========================================================= LIGHTBOX / ICON ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay::before { transition: transform .35s ease, opacity .35s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .elementor-gallery-item__overlay::before { transform: scale(1.08); } /* ========================================================= FOCUS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:focus-visible { outline: 2px solid var(--ucab-gold); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 13px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 12px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-4px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 10px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 10px !important; box-shadow: 0 7px 22px rgba(6,21,34,.13); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-3px); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.035); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { inset: 5px; border-radius: 7px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 6px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { font-size: 9px !important; letter-spacing: .9px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item, .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transition: none !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for gallery, class: .elementor-element-b1b7a61 *//* ========================================================= UCAB PREMIUM GALLERY SAFE VERSION FOR ELEMENTOR GALLERY WIDGET ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 { --ucab-navy: #061522; --ucab-gold: #d6b45d; --ucab-gold-light: #ead18b; --ucab-radius: 14px; width: 100%; } /* ========================================================= GALLERY CONTAINER IMPORTANT: DO NOT CHANGE POSITIONING OF ELEMENTOR ITEMS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { width: 100% !important; gap: 16px !important; margin: 0 !important; } /* ========================================================= GALLERY ITEM NO POSITION: RELATIVE HERE Elementor controls the gallery positioning. ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { overflow: hidden !important; border-radius: var(--ucab-radius) !important; background: var(--ucab-navy); box-shadow: 0 10px 30px rgba(6,21,34,0.12); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-radius .4s ease; isolation: isolate; } /* ========================================================= IMAGE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transform: scale(1); filter: saturate(.94) contrast(1.02) brightness(.97); transition: transform .75s cubic-bezier(.22,.61,.36,1), filter .55s ease; } /* ========================================================= HOVER ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(6,21,34,0.22); border-radius: 12px !important; z-index: 5; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.06); filter: saturate(1.05) contrast(1.04) brightness(1.02); } /* ========================================================= CINEMATIC OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to bottom, rgba(6,21,34,0) 35%, rgba(6,21,34,.10) 55%, rgba(6,21,34,.72) 100% ); opacity: .45; transition: opacity .45s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::before { opacity: .88; } /* ========================================================= SUBTLE GOLD FRAME ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { content: ""; position: absolute; inset: 8px; z-index: 4; pointer-events: none; border: 1px solid rgba(214,180,93,0); border-radius: 10px; transition: border-color .4s ease, inset .4s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 9px; border-color: rgba(214,180,93,.45); } /* ========================================================= ELEMENTOR OVERLAY ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay { z-index: 3; transition: opacity .45s ease !important; } /* ========================================================= TITLE / CAPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; line-height: 1.4 !important; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.35); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__description { color: rgba(255,255,255,.82) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10px !important; line-height: 1.5 !important; } /* ========================================================= IMAGE SHINE ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item .e-gallery-image { position: relative; } /* The shine is kept subtle and does NOT affect Elementor's gallery positioning. */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { filter: saturate(1.04) contrast(1.03) brightness(1.02); } /* ========================================================= LIGHTBOX / ICON ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__overlay::before { transition: transform .35s ease, opacity .35s ease; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .elementor-gallery-item__overlay::before { transform: scale(1.08); } /* ========================================================= FOCUS ========================================================= */ .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:focus-visible { outline: 2px solid var(--ucab-gold); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 13px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 12px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-4px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery__container { gap: 10px !important; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item { border-radius: 10px !important; box-shadow: 0 7px 22px rgba(6,21,34,.13); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover { transform: translateY(-3px); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover .e-gallery-image { transform: scale(1.035); } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item::after { inset: 5px; border-radius: 7px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item:hover::after { inset: 6px; } .elementor-16 .elementor-element.elementor-element-b1b7a61 .elementor-gallery-item__title { font-size: 9px !important; letter-spacing: .9px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-item, .elementor-16 .elementor-element.elementor-element-b1b7a61 .e-gallery-image { transition: none !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-918496a *//* ========================================================= UCAB — PREMIUM GALLERY TABS Paste into: Tabs Widget → Advanced → Custom CSS ========================================================= */ /* --------------------------------------------------------- DESIGN VARIABLES --------------------------------------------------------- */ .elementor-16 .elementor-element.elementor-element-918496a { --ucab-navy: #061522; --ucab-navy-2: #0a1e2d; --ucab-navy-3: #102b3c; --ucab-gold: #d6b45d; --ucab-gold-light: #ead18b; --ucab-cream: #f4f0e7; --ucab-white: #ffffff; --ucab-muted: #71808a; --ucab-radius: 18px; position: relative; } /* ========================================================= MAIN TABS WRAPPER ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs, .elementor-16 .elementor-element.elementor-element-918496a .elementor-tabs { width: 100%; background: linear-gradient( 145deg, var(--ucab-navy), var(--ucab-navy-2) ) !important; border: 1px solid rgba(214,180,93,0.18) !important; border-radius: var(--ucab-radius) !important; overflow: hidden; box-shadow: 0 25px 70px rgba(6,21,34,0.16), 0 8px 25px rgba(6,21,34,0.08) !important; } /* ========================================================= TAB NAVIGATION — NESTED TABS ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs-heading { display: flex !important; align-items: stretch; justify-content: center; gap: 0 !important; padding: 10px !important; background: rgba(255,255,255,0.035) !important; border-bottom: 1px solid rgba(214,180,93,0.16) !important; overflow-x: auto; scrollbar-width: none; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs-heading::-webkit-scrollbar { display: none; } /* ========================================================= TAB BUTTONS ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title { position: relative; min-height: 62px; padding: 0 30px !important; display: flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; color: rgba(255,255,255,0.62) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase; white-space: nowrap; transition: color .35s ease, background .35s ease, transform .35s ease !important; cursor: pointer; } /* ========================================================= TAB GOLD LINE ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--ucab-gold), transparent ); transform: scaleX(0); transform-origin: center; transition: transform .4s cubic-bezier(.22,.61,.36,1); opacity: .9; } /* ========================================================= TAB HOVER ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title:hover { color: var(--ucab-white) !important; background: rgba(255,255,255,0.045) !important; transform: translateY(-1px); } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title:hover::after { transform: scaleX(.65); } /* ========================================================= ACTIVE TAB ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title[aria-selected="true"] { color: var(--ucab-gold-light) !important; background: linear-gradient( 180deg, rgba(214,180,93,0.13), rgba(214,180,93,0.035) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title[aria-selected="true"]::after { transform: scaleX(1); } /* ========================================================= OLD ELEMENTOR TABS — BACKUP SUPPORT ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-tabs-wrapper { display: flex; justify-content: center; gap: 4px; padding: 10px; background: rgba(255,255,255,0.035); border-bottom: 1px solid rgba(214,180,93,0.16); } .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-title { position: relative; padding: 20px 30px !important; background: transparent !important; border: 0 !important; color: rgba(255,255,255,0.62) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; transition: all .35s ease !important; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-title:hover { color: white !important; background: rgba(255,255,255,0.05) !important; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-title.elementor-active { color: var(--ucab-gold-light) !important; background: rgba(214,180,93,0.10) !important; } /* ========================================================= CONTENT AREA ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs-content { position: relative; padding: 0 !important; background: var(--ucab-cream) !important; } /* Nested tab content */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content { position: relative; padding: 45px !important; background: var(--ucab-cream) !important; color: var(--ucab-navy) !important; } /* Old tabs content */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-tabs-content-wrapper { background: var(--ucab-cream) !important; border: 0 !important; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-content { padding: 45px !important; background: var(--ucab-cream) !important; color: var(--ucab-navy) !important; border: 0 !important; } /* ========================================================= CONTENT HEADINGS ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a h2, .elementor-16 .elementor-element.elementor-element-918496a h3, .elementor-16 .elementor-element.elementor-element-918496a h4 { color: var(--ucab-navy) !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: -0.5px; } .elementor-16 .elementor-element.elementor-element-918496a h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; margin-bottom: 15px; } .elementor-16 .elementor-element.elementor-element-918496a h3 { font-size: 28px; line-height: 1.15; } /* ========================================================= CONTENT TEXT ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a p { color: #53616a !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px; line-height: 1.75; } /* ========================================================= IMAGE CARDS Works with Elementor Image widgets placed inside tabs ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image { position: relative; overflow: hidden; border-radius: 14px; background: #ddd; box-shadow: 0 12px 35px rgba(6,21,34,0.12); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image:hover { transform: translateY(-7px); box-shadow: 0 22px 50px rgba(6,21,34,0.20); } /* Image itself */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image img { width: 100%; display: block; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image:hover img { transform: scale(1.055); filter: saturate(1.05) contrast(1.02); } /* ========================================================= IMAGE SHINE EFFECT ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.18), transparent ); transform: skewX(-20deg); transition: left .8s ease; pointer-events: none; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image:hover::after { left: 140%; } /* ========================================================= IMAGE CAPTION ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-image__caption { padding: 12px 14px !important; background: var(--ucab-navy) !important; color: var(--ucab-cream) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* ========================================================= GALLERY CONTAINERS ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .ucab-gallery-card, .elementor-16 .elementor-element.elementor-element-918496a .e-con { transition: transform .4s ease; } /* ========================================================= PREMIUM DIVIDER ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-divider .elementor-divider-separator { border-top: 1px solid rgba(6,21,34,0.14) !important; } /* ========================================================= GOLD ACCENT ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .ucab-gold, .elementor-16 .elementor-element.elementor-element-918496a .gold { color: var(--ucab-gold) !important; } /* ========================================================= BUTTONS INSIDE GALLERY ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .elementor-button { position: relative; overflow: hidden; padding: 14px 24px !important; border-radius: 999px !important; background: var(--ucab-navy) !important; color: var(--ucab-white) !important; border: 1px solid var(--ucab-navy) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.3px; text-transform: uppercase; transition: all .35s ease !important; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-button:hover { background: var(--ucab-gold) !important; border-color: var(--ucab-gold) !important; color: var(--ucab-navy) !important; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(214,180,93,0.22); } /* ========================================================= TAB CONTENT ENTRANCE ========================================================= */ .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content[aria-hidden="false"] { animation: ucabGalleryTabReveal .65s cubic-bezier(.22,.61,.36,1); } @keyframes ucabGalleryTabReveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= DESKTOP SPACING ========================================================= */ @media (min-width: 1025px) { .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content { min-height: 380px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs-heading { justify-content: flex-start !important; overflow-x: auto; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title { padding-left: 22px !important; padding-right: 22px !important; min-height: 58px; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content, .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-content { padding: 30px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs { border-radius: 14px !important; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tabs-heading { justify-content: flex-start !important; padding: 7px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title { min-width: max-content; min-height: 52px; padding: 0 17px !important; font-size: 10px !important; letter-spacing: 1.1px !important; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title::after { left: 14px; right: 14px; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content, .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-content { padding: 22px !important; } .elementor-16 .elementor-element.elementor-element-918496a h2 { font-size: 34px; line-height: 1.08; } .elementor-16 .elementor-element.elementor-element-918496a h3 { font-size: 25px; } .elementor-16 .elementor-element.elementor-element-918496a p { font-size: 14px; } .elementor-16 .elementor-element.elementor-element-918496a .elementor-widget-image { border-radius: 11px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-title { padding: 0 14px !important; font-size: 9px !important; } .elementor-16 .elementor-element.elementor-element-918496a .e-n-tab-content, .elementor-16 .elementor-element.elementor-element-918496a .elementor-tab-content { padding: 17px !important; } }/* End custom CSS */