:root { --bs-primary: #00205b;
--bs-primary-rgb: 0, 32, 91;
--bs-secondary: #d2e5f3;
--bs-secondary-rgb: 210, 229, 243;
--bs-success: #28a745;
--bs-success-rgb: 40, 167, 69;
--bs-danger: #d51e28;
--bs-danger-rgb: 213, 30, 40;
--bs-warning: #ffc107;
--bs-warning-rgb: 255, 193, 7;
--bs-info: #9bcbeb;
--bs-info-rgb: 155, 203, 235;
--bs-light: #f8f9fa;
--bs-light-rgb: 248, 249, 250;
--bs-dark: #212529;
--bs-dark-rgb: 33, 37, 41;
--bs-orange: #fa7600;
--bs-orange-rgb: 250, 118, 0;
--bs-brown: #b4a373;
--bs-brown-rgb: 180, 163, 115;
--bs-light-blue: #bddaed;
--bs-light-dark: #dcdcdc;
.bg-orange {
background-color: var(--bs-orange) !important;
}
.bg-brown {
background-color: var(--bs-brown) !important;
}
.bg-light-blue {
background-color: var(--bs-light-blue) !important;
}
.bg-light-dark {
background-color: var(--bs-light-dark) !important;
} --bs-border-radius: 2rem;
--bs-border-radius-sm: 1.5rem;
--bs-border-radius-lg: 2.5rem;
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1.5rem;
--bs-btn-padding-y-sm: 0.375rem;
--bs-btn-padding-x-sm: 1.25rem;
--bs-btn-padding-y-lg: 0.75rem;
--bs-btn-padding-x-lg: 2rem;
--bs-btn-font-size: 1rem;
--bs-btn-font-size-sm: 0.875rem;
--bs-btn-font-size-lg: 1.125rem;
--bs-btn-font-weight: 600;
--bs-btn-border-width: 2px;
--bs-btn-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
--bs-btn-box-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
--bs-btn-transition: all 0.2s ease-in-out; --bs-body-bg: transparent;
--bs-form-control-bg: transparent;
--bs-form-control-bg-disabled: transparent;
--bs-border-color: #dee2e6;
--bs-form-control-border-color: #dee2e6;
--bs-form-control-border-width: 0 0 1px 0;
--bs-form-control-border-radius: 0;
--bs-form-control-focus-bg: transparent;
--bs-form-control-focus-border-color: var(--bs-primary);
--bs-form-control-focus-box-shadow: none;
--bs-form-control-padding-x: 0;
--bs-form-control-padding-y: 0.375rem;
} a {
color: var(--bs-primary);
text-decoration: none;
transition: 0.8s ease;
}
a:hover {
color: var(--bs-light-blue);
} .btn {
border-radius: var(--bs-border-radius) !important;
font-weight: var(--bs-btn-font-weight) !important;
border-width: var(--bs-btn-border-width) !important;
box-shadow: var(--bs-btn-box-shadow) !important;
transition: var(--bs-btn-transition) !important;
padding: 6px 24px !important;
font-family: 'Poppins', sans-serif !important;
}
.btn:hover {
transform: translateY(-1px) !important;
box-shadow: var(--bs-btn-box-shadow-hover) !important;
}
.btn:active {
transform: translateY(0) !important;
box-shadow: var(--bs-btn-box-shadow) !important;
}
.btn-sm {
border-radius: var(--bs-border-radius-sm) !important;
padding: var(--bs-btn-padding-y-sm) var(--bs-btn-padding-x-sm) !important;
font-size: var(--bs-btn-font-size-sm) !important;
}
.btn-lg {
border-radius: var(--bs-border-radius-lg) !important;
padding: var(--bs-btn-padding-y-lg) var(--bs-btn-padding-x-lg) !important;
font-size: var(--bs-btn-font-size-lg) !important;
} .btn-primary {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: white !important;
}
.btn-primary:hover {
background-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
color: white !important;
}
.btn-primary:focus {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}
.btn-secondary {
background-color: var(--bs-secondary) !important;
border-color: var(--bs-secondary) !important;
color: white !important;
}
.btn-secondary:hover {
background-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
color: white !important;
}
.btn-success {
background-color: var(--bs-success) !important;
border-color: var(--bs-success) !important;
color: white !important;
}
.btn-success:hover {
background-color: color-mix(in srgb, var(--bs-success) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-success) 85%, black) !important;
color: white !important;
}
.btn-danger {
background-color: var(--bs-danger) !important;
border-color: var(--bs-danger) !important;
color: white !important;
}
.btn-danger:hover {
background-color: color-mix(in srgb, var(--bs-danger) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-danger) 85%, black) !important;
color: white !important;
}
.btn-warning {
background-color: var(--bs-warning) !important;
border-color: var(--bs-warning) !important;
color: black !important;
}
.btn-warning:hover {
background-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-warning) 85%, black) !important;
color: black !important;
}
.btn-info {
background-color: var(--bs-info) !important;
border-color: var(--bs-info) !important;
color: white !important;
}
.btn-info:hover {
background-color: color-mix(in srgb, var(--bs-info) 85%, black) !important;
border-color: color-mix(in srgb, var(--bs-info) 85%, black) !important;
color: white !important;
} .btn-outline-primary {
color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
background-color: transparent !important;
}
.btn-outline-primary:hover {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: white !important;
}
.btn-outline-secondary {
color: var(--bs-secondary) !important;
border-color: var(--bs-secondary) !important;
background-color: transparent !important;
}
.btn-outline-secondary:hover {
background-color: var(--bs-secondary) !important;
border-color: var(--bs-secondary) !important;
color: white !important;
} @media (max-width: 768px) {
:root {
--bs-border-radius: 1.5rem;
--bs-border-radius-sm: 1rem;
--bs-border-radius-lg: 2rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 0.875rem;
}
}
@media (min-width: 769px) and (max-width: 1199px) {
:root {
--bs-border-radius: 1.75rem;
--bs-border-radius-sm: 1.25rem;
--bs-border-radius-lg: 2.25rem;
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1.25rem;
--bs-btn-font-size: 1rem;
}
}
@media (min-width: 1200px) {
:root {
--bs-border-radius: 2rem;
--bs-border-radius-sm: 1.5rem;
--bs-border-radius-lg: 2.5rem;
--bs-btn-padding-y: 0.625rem;
--bs-btn-padding-x: 1.5rem;
--bs-btn-font-size: 1.125rem;
}
}
@media (min-width: 1400px) {
:root {
--bs-border-radius: 2.25rem;
--bs-border-radius-sm: 1.75rem;
--bs-border-radius-lg: 3rem;
--bs-btn-padding-y: 0.75rem;
--bs-btn-padding-x: 2rem;
--bs-btn-font-size: 1.25rem;
}
} .form-control {
background-color: var(--bs-form-control-bg) !important;
border: var(--bs-form-control-border-width) solid var(--bs-form-control-border-color) !important;
border-radius: var(--bs-form-control-border-radius) !important;
padding: var(--bs-form-control-padding-y) var(--bs-form-control-padding-x) !important;
box-shadow: none !important;
}
.form-control:focus {
background-color: var(--bs-form-control-focus-bg) !important;
border-color: var(--bs-form-control-focus-border-color) !important;
box-shadow: var(--bs-form-control-focus-box-shadow) !important;
outline: none !important;
}
.form-control:disabled {
background-color: var(--bs-form-control-bg-disabled) !important;
}
input.form-control,
textarea.form-control,
select.form-control {
background-color: transparent !important;
border: 1px solid var(--bs-primary) !important;
border-radius: var(--bs-border-radius) !important;
box-shadow: none !important;
padding: 0.375rem 0.75rem !important;
}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
background-color: transparent !important;
border: 2px solid var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
outline: none !important;
} .form-check-input {
border: 2px solid var(--bs-primary) !important;
background-color: transparent !important;
border-radius: 0.25rem !important;
}
.form-check-input:checked {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.form-check-input:focus {
border-color: var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}
.form-check-input[type="radio"] {
border-radius: 50% !important;
}
.form-check-input[type="checkbox"] {
border-radius: 0.25rem !important;
}
.form-select {
background-color: transparent !important;
border: 1px solid var(--bs-primary) !important;
border-radius: var(--bs-border-radius) !important;
box-shadow: none !important;
}
.form-select:focus {
background-color: transparent !important;
border: 2px solid var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
outline: none !important;
}
.form-range {
background-color: transparent !important;
}
.form-range::-webkit-slider-thumb {
background-color: var(--bs-primary) !important;
border: 2px solid var(--bs-primary) !important;
}
.form-range::-moz-range-thumb {
background-color: var(--bs-primary) !important;
border: 2px solid var(--bs-primary) !important;
} .nav-pills .nav-link {
border: 1px solid var(--bs-primary);
color: var(--bs-primary);
}
.nav-pills .nav-link.active {
background-color: var(--bs-primary);
color: white;
}.offcanvas {
--bs-offcanvas-bg: white !important;
}
.text-info-lighten-60 {
color: color-mix(in srgb, var(--bs-info), white 60%);
}
a {text-decoration: none; transition: 0.8s ease;}
.image-square {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 1/1;
display: block;
}
.image-square img {width:100%;height:auto;}
.article-card .article-image {
overflow: hidden;
display: block;
}
.article-card .article-image img {
width: 100%;
height: auto;
aspect-ratio: 384/274;
object-fit: cover;
}
.aligncenter {margin: 20px auto;}
.btn.btn-circle {
padding: 0 !important;
width: 30px;
height: 30px;
}
.grecaptcha-badge {transform:translateY(-200vh)} #mainHeader {
background-color: transparent !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
width: 100% !important;
}
@media (max-width: 991.98px) {
#mainHeader {
background-color: white !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
}
#mainHeader:hover {
background-color: white !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
#mainHeader.scrolled {
background-color: white !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
#mainHeader .container-fluid {
position: relative;
}
#mainHeader .container-fluid::before {
content: '';
position: absolute;
top: -10px;
left: -20px;
right: -20px;
bottom: -10px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.8) 20%,
rgba(255, 255, 255, 0.6) 40%,
rgba(255, 255, 255, 0.4) 60%,
rgba(255, 255, 255, 0.1) 80%,
rgba(255, 255, 255, 0.05) 90%,
transparent 100%);
filter: blur(3px);
z-index: -1;
pointer-events: none;
} .dropdown-menu {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
position: absolute !important;
z-index: 1001 !important;
}
@media (hover: hover) {
.nav-item.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}
}
.dropdown-menu.show {
opacity: 1 !important;
visibility: visible !important;
}
.nav-item.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.nav-item.dropdown.position-static .dropdown-menu {
width: 100vw !important;
left: 0 !important;
right: 0 !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.nav-item.dropdown .dropdown-menu .container-fluid {
max-width: none !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.nav-item.dropdown .dropdown-menu h5 a {
font-size: 32px;
text-decoration: none;
}
@media (max-width: 768px) {
.nav-item.dropdown.position-static .dropdown-menu {
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
} .mobile-dropdown-toggle {
cursor: pointer;
transition: all 0.3s ease;
}
.mobile-dropdown-toggle:hover {
background-color: rgba(0, 123, 255, 0.1);
border-radius: 4px;
padding: 8px;
margin: -8px;
}
.mobile-dropdown-icon {
transition: transform 0.3s ease;
}
.mobile-dropdown-toggle[aria-expanded="true"] .mobile-dropdown-icon {
transform: rotate(180deg);
}
.mobile-dropdown .collapse {
transition: all 0.3s ease;
}
.mobile-dropdown .collapse.show {
background-color: rgba(0, 123, 255, 0.05);
border-radius: 4px;
margin: 8px -8px;
padding: 8px;
}
.mobile-dropdown ul li a {
transition: all 0.2s ease;
}
.mobile-dropdown ul li a:hover {
background-color: rgba(0, 123, 255, 0.1);
border-radius: 4px;
padding: 4px 8px;
margin: -4px -8px;
} .carousel-indicators {
bottom: 20px;
margin-bottom: 48px;
justify-content: center;
gap: 24px;
}
.carousel-indicators [data-bs-target] {
width: 200px;
height: 4px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
transition: all 0.3s ease;
}
.carousel-indicators [data-bs-target].active {
background-color: rgba(255, 255, 255, 1);
width: 220px;
}
@media (max-width: 768px) {
.carousel-indicators {
bottom: 15px;
margin-bottom: 20px;
gap: 12px;
}
.carousel-indicators [data-bs-target] {
width: 40px;
height: 3px;
}
.carousel-indicators [data-bs-target].active {
width: 50px;
}
}
@media (max-width: 768px) {
#mainBanner .carousel-item {
height: 70vh !important;
}
}
@media (max-width: 576px) {
#mainBanner .carousel-item {
height: 80vh !important;
}
#mainBanner video { }
}
@media (max-width: 767.98px) {
.carousel-caption h1 {
font-size: 2.5rem !important;
line-height: 1.2 !important;
}
}
@media (max-width: 575.98px) {
.carousel-caption h1 {
font-size: 2rem !important;
line-height: 1.2 !important;
}
}
@media (max-width: 400px) {
.carousel-caption h1 {
font-size: 1.75rem !important;
line-height: 1.2 !important;
}
}
#mainBanner {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#mainBanner:active {
cursor: grabbing !important;
} .businesses-section {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: opacity 0.3s ease;
min-height: 100vh !important;
}
#swiperBusinessBackground {
position:absolute;
top: 0;
left:0;
width:100%;
height:100%;
z-index: 0;
pointer-events: none;
background-color: var(--bs-primary);
}
.business-tab {
padding: 8px 24px !important;
transition: all 0.3s ease;
border-radius: 16px !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 1 !important;
}
.business-tab.active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
opacity: 1 !important;
visibility: visible !important;
}
.businesses-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.businesses-section .container {
position: relative;
z-index: 2;
}
#businessTabs .nav-link {border: none;} .brands-marquee {
overflow: hidden;
white-space: nowrap;
position: relative;
}
.brands-track {
display: inline-flex;
animation: marquee 30s linear infinite;
}
.brand-item {
flex: 0 0 auto;
margin: 0 30px;
display: flex;
align-items: center;
justify-content: center;
}
.brands-track:hover img {opacity:0.6}
.brand-item img {
max-height: 60px;
width: auto;
transition: all 0.3s ease;
}
.brand-item:hover img {
opacity: 1 !important;
transform: scale(1.1);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.brands-marquee:hover .brands-track {
animation-play-state: paused;
} .py-5.bg-primary.text-white,
.py-5.bg-white.text-dark {
transition: background-color 0.5s ease, color 0.5s ease;
}
.py-5.bg-primary.text-white h2,
.py-5.bg-primary.text-white h6,
.py-5.bg-primary.text-white .btn,
.py-5.bg-white.text-dark h2,
.py-5.bg-white.text-dark h6,
.py-5.bg-white.text-dark .btn {
transition: color 0.5s ease;
}
.py-5.bg-white.text-dark .btn-outline-light {
border-color: #0d6efd;
color: #0d6efd;
}
.py-5.bg-white.text-dark .btn-outline-light:hover {
background-color: #0d6efd;
color: white;
}
section img.img-fluid.rounded-4.shadow-lg {
clip-path: inset(0 50% 0 50% round 1rem);
transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: clip-path;
transform: translateZ(0);
backface-visibility: hidden;
}
img[src="images/02_intro.webp"] {
clip-path: inset(0 50% 0 50% round 1rem);
transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: clip-path;
transform: translateZ(0);
backface-visibility: hidden;
} .gsap-animate {
opacity: 0;
transform: translateY(30px);
}
* {
box-sizing: border-box;
}
.gsap-optimized {
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
}  * {
font-family: 'Poppins', sans-serif !important;
}
body {
font-family: 'Poppins', sans-serif !important;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
color: var(--bs-primary)
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif !important;
font-weight: 600;
line-height: 1.3;
}
.navbar-nav .nav-link {
font-family: 'Poppins', sans-serif !important;
font-weight: 500;
}
.dropdown-menu a.text-dark:hover {
color: #7c7c7c !important;
}
input, textarea, select {
font-family: 'Poppins', sans-serif !important;
}
.text-glow.text-primary {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
transition: text-shadow 0.3s ease;
}
.text-glow.text-white {
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
transition: text-shadow 0.3s ease;
} @media (max-width: 991.98px) {
.nav-link {
padding: 12px 16px;
margin: 4px 0;
border-radius: 6px;
}
.nav-link::before {
border-radius: 6px;
filter: blur(6px);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
}
} .logo-glow-wrapper {
position: relative;
display: inline-block;
transition: all 0.3s ease;
}
.logo-glow-wrapper img {
transition: all 0.3s ease;
display: block;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
drop-shadow(0 0 16px rgba(255, 255, 255, 0.2));
}
.logo-glow-wrapper:hover img {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6))
drop-shadow(0 0 24px rgba(255, 255, 255, 0.3));
transform: scale(1.05);
} .businesses-section {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.6s ease-in-out;
}
.business-tab {
transition: all 0.3s ease;
}
.business-tab:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.business-tab.active {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#businesses {
position: relative;
overflow: hidden;
}
#businesses::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
opacity: 0;
transition: opacity 0.6s ease-in-out;
z-index: 1;
}
#businesses.fade-transition::before {
opacity: 1;
} #mobileMenu {
z-index: 999999 !important;
width: -webkit-fill-available !important;
}
#mobileMenu.offcanvas {
z-index: 999999 !important;
width: -webkit-fill-available !important;
}
#aboutUsSubmenu,
#businessesSubmenu,
#investorsSubmenu,
#sustainabilitySubmenu,
#careersSubmenu,
#newsroomSubmenu {
z-index: 1000000 !important;
width: -webkit-fill-available !important;
}
.btn-link.p-0 {
text-decoration: none !important;
border: none !important;
background: none !important;
}
.btn-link.p-0:hover {
background: none !important;
text-decoration: none !important;
}
.offcanvas-header h5 {
font-size: 1.25rem;
font-weight: 600;
}
.offcanvas-body nav ul li a {
font-size: 1rem;
padding: 8px 0;
transition: all 0.2s ease;
}
.offcanvas-body nav ul li a:hover {
color: #0056b3 !important;
padding-left: 8px;
} #searchModal {
z-index: 10000000 !important;
}
#searchModal .modal-dialog {
max-width: 100%;
margin-top: 0 !important;
}
#searchModal .modal-content {
background-color: #D0E7F7 !important;
border-radius: 0 !important;
min-height: 60vh;
}
#searchModal .modal-header {
padding: 1.5rem 2rem 0 2rem;
}
#searchModal .modal-body {
padding: 0 2rem 2rem 2rem;
}
#searchModal .form-control {
font-size: 1.5rem !important;
font-weight: 600 !important;
color: #0d6efd !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid #333 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
padding: 0.5rem 0 !important;
}
#searchModal .form-control:focus {
border-bottom: 2px solid #0d6efd !important;
box-shadow: none !important;
outline: none !important;
}
#searchModal .form-control::placeholder {
color: #6c757d !important;
font-weight: 400 !important;
}
#searchModal .btn {
background-color: #B8D4F0 !important;
border: 1px solid #B8D4F0 !important;
border-radius: 25px !important;
color: #0d6efd !important;
font-weight: 600 !important;
padding: 0.75rem 2rem !important;
transition: all 0.3s ease;
}
#searchModal .btn:hover {
background-color: #A0C4E8 !important;
border-color: #A0C4E8 !important;
color: #0d6efd !important;
}
#searchModal h6 {
font-size: 1.1rem;
font-weight: 600;
color: #0d6efd !important;
}
#searchModal .text-decoration-none {
font-size: 1rem;
font-weight: 600;
color: #0d6efd !important;
transition: all 0.3s ease;
}
#searchModal .text-decoration-none:hover {
color: #0056b3 !important;
text-decoration: underline !important;
}
#searchModal .btn-close {
background: none;
border: none;
font-size: 1.5rem;
color: #0d6efd;
opacity: 1;
}
#searchModal .btn-close:hover {
opacity: 0.7;
}
#searchModal.modal {
background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
#searchModal .modal-header,
#searchModal .modal-body {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
#searchModal .form-control {
font-size: 1.25rem !important;
}
#searchModal .btn {
padding: 0.5rem 1.5rem !important;
font-size: 0.9rem;
}
} #pageBanner {
min-height: 100vh;
position: relative;
}
#pageBanner .swiper, #pageBanner .swiper-wrapper {
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#pageBanner .swiper-slide {
position:relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#pageBanner .container-fluid {
position:absolute;
top: 50%;
left: 0;
z-index: 10;
transform: translateY(-50%)
}
#pageBanner h1.entry-title {
font-size: 80px;
font-weight: 400;
text-shadow: 0px 0px 20px #fff;
color: var(--bs-primary);
z-index: 5;
}
#pageBanner h1.entry-title.bright {
font-size: 80px;
font-weight: 400;
text-shadow: 0px 0px 20px rgba(0, 0, 0, .8);
color: white
} .clickable-card {transition: 0.8s ease;cursor: pointer;}
.clickable-card:hover {
transform: scale(1.01);
}
.clickable-card .card-icon { background-color: #ffffff00;}
.clickable-card .card-icon i {color: white;line-height: 0; transition:0.8s ease;}
.clickable-card:hover .card-icon {
background-color: white;
}
.clickable-card:hover .card-icon i {color: black;} #boards-pills .nav-link.active {background-color: var(--bs-primary); color: white}
#boards-pills .nav-link {border: 1px solid var(--bs-primary); color: var(--bs-primary)}
#pills-leaderContent .image,
#leaderContent .image {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 1/1;
}
#pills-leaderContent .image img,
#leaderContent .image img {width:100%; transition: 0.8s ease;}
.leader-details .image img:hover {scale:1.1} .business-unit-section {
min-height: 680px;
padding-top: 80px;
padding-bottom:80px;
}
.business-unit-bg {
background-color: black;
border-radius: 0 0 200px 0;
overflow: hidden;
display: block;
position: absolute;
top: 0;left:0;right:0;bottom:0;
z-index: 0;
}
.business-unit-bg img {
width:100%;
height: auto;
object-fit: cover;
opacity: 0.6;
}
@media (max-width: 768px) {
.business-unit-bg img {
height: 100%;
width:auto;
}
}
.btn-unit-link {
color:white;
font-size: 4em
}
.btn-unit-link:hover {
opacity:0.4
}
#gallery-navigation {
position:absolute;
bottom: 20px;
right: 10px;
display: flex;
justify-content: space-around;
width: 180px;
}
#sustainability-commitment-navigation {
position:absolute;
bottom: 40px;
left: 25%;
display: flex;
justify-content: space-around;
width: 180px;
}
#gallery-navigation .swiper-button-prev, #gallery-navigation .swiper-button-next,
#sustainability-commitment-navigation .swiper-button-prev, #sustainability-commitment-navigation .swiper-button-next {
position: relative;
background-image: none;
}
#gallery-navigation .swiper-button-prev:after,
#gallery-navigation .swiper-button-next:after,
#sustainability-commitment-navigation .swiper-button-prev:after,
#sustainability-commitment-navigation .swiper-button-next:after {content: ''}
#gallery-navigation .btn.btn-circle,
#sustainability-commitment-navigation .btn.btn-circle {
width: 60px;
height: 60px;
}
#gallery-navigation .btn.btn-circle:hover,
#sustainability-commitment-navigation .btn.btn-circle:hover {
background-color: var(--bs-primary) !important
}
#gallery-navigation .btn.btn-circle:hover i,
#sustainability-commitment-navigation .btn.btn-circle:hover i {
color: white !important;
}
.business-category-button:hover {
color: var(--bs-primary);
background-color: var(--bs-secondary) !important;
}
.swiper-slide .bg-img {
position:absolute;
top: 0;
left: 0;
right:0;
bottom:0;
z-index: -1;
}
.swiper-slide .bg-img::after {
content: '';
background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.swiper-slide .bg-img img {
width:100%;
height: 100%;
object-fit: cover;
}
#outlet-map {
position: absolute;
top: 0; left:0; width:100%;height:100%;
z-index:0;
}