@charset "utf-8";


:root {
/* COLOR VARIABLES */
--brown: #9f2342;
--cornsilk: #FEFADF;
--dark-tan: #94875F;
--white: #fff;
--black: #000;
--light-gray: #aaa;
--dark-gray: #4D4D4D;

/* TRANSITION SPEED */
--all-fast: all 0.3s ease-in-out;
--all-medium: all 0.5s ease-in-out;
--all-slow: all 0.8s ease-in-out;

--transition-delay: 0.3s;
}

/* ========================== COMMON CSS ========================== */
html { font-size: 16px; }
*, ul, ol { margin: 0; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Raleway', sans-serif; font-weight: 500; line-height: 1.5; color: var(--black); }
.h1, .h1 *, .h2, .h2 *, .h3, .h3 *, .h4, .h4 *, .h5, .h5 *, .h6, .h6 *, h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * { font-family: 'Raleway', sans-serif; font-weight: 600; }

*, a, a:active, a:focus, a:hover, .btn:focus, .btn:hover, .btn:active, button, button:hover, button:focus, button:active, input, input:focus, input:active, textarea, textarea:focus, textarea:active, .form-control, .form-control:focus, .form-control:active, [type=reset], [type=submit], button, [type=button] { box-shadow: none; outline: none; text-decoration: none; outline: 0; box-shadow: none; outline: none; border: none; background: transparent; color: var(--black); }

body { font-size: 1rem; line-height: 1.5; width: 100%; position: relative; overflow-x: hidden; font-weight: 500; color: #1A1A1A; }
body p { font-size: 1.125rem; line-height: 1.5; margin-bottom: 20px; font-weight: 500; color: var(--black); }
body.no-scroll { overflow: hidden; }


a { display: inline-flex; flex-flow: row wrap; }
a:hover { color: var(--brown); }

strong { font-weight: 600; }

hr { border-top: 1px solid #ddd; }

::-moz-selection { color: var(--white); background: var(--brown); }
::selection { color: var(--white); background: var(--brown); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb { background-color: var(--brown); border-radius: 15px; }

/* Chrome Safari Edge Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.container { position: relative; z-index: 1; }

.form-control::-webkit-input-placeholder { color: rgba(0,0,0,0.5); }
.form-control::-moz-placeholder { color: rgba(0,0,0,0.5); }
.form-control:-ms-input-placeholder { color: rgba(0,0,0,0.5); }
.form-control::-ms-input-placeholder { color: rgba(0,0,0,0.5); }
.form-control::placeholder { color: rgba(0,0,0,0.5); }

.form-group { margin-bottom: 30px; position: relative; }
.form-control { border: none; border-bottom: 1px solid rgb(0 0 0 / 20%); border-radius: 0; line-height: 1.5; padding: 10px 0; font-size: 1rem; font-weight: 500; color: #000; }
textarea.form-control { border: 1px solid rgb(0 0 0 / 20%); border-radius: 10px; padding: 10px 15px; }
textarea.form-control + label { padding: 14px 15px; }
textarea.form-control:focus + label { background: var(--white); --focus-padding: 0 5px; }
.form-control:focus { color: var(--black); border-color: var(--brown); }

label { line-height: 1.5; padding: 14px 0; font-size: 1rem; font-weight: 500; color: rgb(0 0 0 / 50%); margin: 0; width: 100%; position: absolute; left: 0; top: 0; background: transparent; transition: all 0.3s; --focus-padding: 0; width: auto; }
.form-control:focus ~ label,
.form-control:not(:placeholder-shown) ~ label,
.form-control:valid ~ label { padding: var(--focus-padding); margin-top: -12px; }

select.form-control:not([size]):not([multiple]) { height: auto; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

.button { font-size: 0.825rem; letter-spacing: 2px; position: relative; display: inline-flex; padding-bottom: 4px; }
.button::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: var(--brown); transition: all 0.3s ease-out; }
.button:hover::after { width: 50%; }

.img-box { display: flex; flex-flow: row wrap; }
img, .svg { width: 100%; height: auto; }

section { position: relative; width: 100%; }

.section-title { margin-bottom: 60px; position: relative; }
.section-title h2 { font-size: 3rem; letter-spacing: 3px; margin: 0; width: 100%; text-transform: uppercase; text-align: center; }
.section-title h3 { font-size: 2.5rem; letter-spacing: 3px; margin: 0; width: 100%; text-transform: uppercase; text-align: center; }
.section-title h2 + h3 { margin-top: 30px; }

.title1 { font-size: 2.666rem; line-height: 1.2; color: var(--dark-gray); margin-bottom: 40px; }

.bottom-patch { position: fixed; bottom: 0; width: 100%; height: 1px; background: var(--black); z-index: -9; }

/* COMMON CSS */
.smooth-scroll { z-index: 1; }

.loader { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; transition: opacity 1s cubic-bezier(0.2, 0.6, 0.35, 1) 1.8s, visibility 1s cubic-bezier(0.2, 0.6, 0.35, 1) 1.8s, transform 1s cubic-bezier(0.5, 0.05, 0.7, 0.2) 1.2s; }
.loader__bckg { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--black); transform-origin: center top; transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) 1.2s; }
.loaded .loader { opacity: 0; visibility: hidden; transform: translateY(-100%); }
.loaded .loader__bckg { transform: scaleY(0.0001); transition-delay: 1.2s; }
.loader .logo-wrap { display: flex; flex-flow: row wrap; width: 100px; position: relative; }
.loader .logo-wrap img { width: 100%; opacity: 0.2; }
.loader .logo-wrap span { width: 100px; height: 100px; max-height: 0; position: absolute; left: 0; bottom: 0; z-index: 1; background: url(../images/logo-white.svg) no-repeat center bottom; background-size: 100px; }

/* HEADER */
.header { padding: 20px 0; position: sticky; top: 0; left: 0; width: 100%; z-index: 99; transition: var(--all-medium); background: var(--black); }

.brand-logo { display: inline-flex; flex-flow: row wrap; width: 200px; position: relative; transition: var(--all-medium); }

.header .navbar { justify-content: flex-end; margin: 0; padding: 0; transition: var(--all-medium); }
.header .navbar li a { font-size: 1rem; text-transform: capitalize; color: var(--white); padding: 5px 15px; transition: var(--all-medium); position: relative; }
.header .navbar li a::after { position: absolute; content: ''; left: 50%; transform: translateX(-50%); top: 100%; width: 0; height: 1px; background: var(--white); transition: var(--all-fast); }
.header .navbar li a:hover:after { width: calc(100% - 30px); }

.menu-toggler { display: none; flex-flow: row wrap; width: 33px; transition: var(--all-fast); margin-left: auto; }
.menu-toggler span { width: 100%; height: 2px; background: var(--white); margin: 3.5px 0; transition: var(--all-fast); }
.menu-toggler span:nth-child(2) { width: 75%; }
.menu-toggler span:nth-child(3) { width: 50%; }
.menu-toggler:hover span:nth-child(1) { width: 50%; }
.menu-toggler:hover span:nth-child(3) { width: 100%; }

.fullscreen { display: flex; flex-flow: row wrap; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 99; pointer-events: none; opacity: 0; }
.loaded .fullscreen { opacity: 1; }
.fullscreen.active { pointer-events: all; }
.fullscreen::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--black); z-index: 1; animation: bgOut 0.8s forwards; animation-timing-function: cubic-bezier(.86, 0, .07, 1); animation-delay: 0.6s; }
.fullscreen.active::before { animation: bgIn 0.8s forwards; animation-timing-function: cubic-bezier(.86, 0, .07, 1); }

.fullscreen .close { position: absolute; right: 15px; top: 20px; width: 33px; height: 33px; display: flex; flex-flow: row wrap; align-items: center; opacity: 0; transition: opacity 0.3s; transition-delay: 0.5s; }
.fullscreen.active .close { opacity: 1; }
.header.is-active-header .fullscreen .close { top: 18.5px; }
.fullscreen .close span { width: 100%; height: 2px; background: var(--white); margin: 0; transition: var(--all-fast); transform-origin: center center; }
.fullscreen .close span:first-child { transform: rotate(45deg) translate(6px, 6px); }
.fullscreen .close span:last-child { transform: rotate(-45deg) translate(6px, -6px); }

.fullscreen .hamburger-content { display: flex; flex-flow: row wrap; align-items: center; width: 100%; height: 100%; padding-top: 0; }
.fullscreen .navbar-nav { display: flex; flex-flow: row wrap; max-width: 360px; margin: auto; padding: 0 30px; margin-top: -80px; }
.fullscreen .navbar-nav li { display: inline-flex; width: 100%; overflow: hidden; transition: var(--all-medium); margin-bottom: 10px; }
.fullscreen .navbar-nav li a { position: relative; display: inline-flex; font-size: 2rem; line-height: 1.2; color: rgb(255 255 255 / 80%); font-family: 'Raleway', sans-serif; transform: translateX(0) translateY(-100%); transition: all 1s; animation: bgOut 0.8s forwards; font-weight: 400; }
.fullscreen .navbar-nav li a:hover { color: var(--white); }
.fullscreen.active .navbar-nav li a { animation: bgIn 0.8s forwards; animation-delay: var(--animation-delay); }
.fullscreen .navbar-nav li:hover { transform: translateX(30px); }
.fullscreen .navbar-nav:hover li a::after { opacity: 1; }
.fullscreen .navbar-nav li a:hover::after { opacity: 0; }

@keyframes bgIn {
0% { transform: translateX(0) translateY(-101%); }
100% { transform: translateX(0) translateY(0%); }
}

@keyframes bgOut {
0% { transform: translateX(0) translateY(0%); }
100% { transform: translateX(0) translateY(101%); }
}

.section { position: relative; padding: 120px 0; z-index: 1; }

/* CUSTOM CSS */
.banner { position: relative; }
.banner .swiper-slide { position: relative; background: var(--black); min-height: 80vh; }
.banner .swiper-slide .banner-content + div::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 80%); z-index: 1; }
.banner .swiper-slide img { opacity: 1; }
.banner .swiper-slide .banner-content { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.banner .swiper-slide .banner-content h2 { font-size: 4.2rem; color: var(--white); line-height: 1; font-weight: 600; }
.banner .swiper-pagination-bullet { background: #fff; }

/* TRUSTED */
.trusted { padding: 120px 0; text-align: center; }
.trusted .list { margin-top: 70px; }
.trusted .img-box { width: 80px; height: 80px; margin: 0 auto 30px; }
.trusted .img-box img { width: 100%; height: 100%; object-fit: contain; }
.trusted h5 { font-size: 1.5rem; font-weight: 500; }

/* VENTURE */
.venture { padding: 120px 0; }
.venture .nav { display: flex; flex-flow: row wrap; }
.venture .nav li { flex: 1; }
.venture .nav li button { width: 100%; display: flex; justify-content: center; position: relative; width: 100%; cursor: pointer; font-size: 1.2rem; font-weight: 600; padding-bottom: 10px; }
.venture .nav li button::after { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 2px; background: #eee; z-index: 0; }
.venture .nav li button::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: 0; height: 2px; background: var(--brown); z-index: 1; transition: var(--all-medium); }
.venture .nav li button.active::before { width: 100%; }

.venture .tab-content { padding: 30px 30px 0; }
.venture .tab-content .tab-pane { transition: var(--all-fast); text-align: center; min-height: 140px; }
.venture .tab-content .tab-pane p { letter-spacing: 0.5px; margin: 0; }

/* LEADERSHIP */
.leadership { padding: 100px 0; background: #fafafa; }
.leadership .list { display: flex; flex-flow: row wrap; justify-content: space-between; }
.leadership .list .card { width: calc(100% / 4 - 15px); border: none; border-radius: 0; background: var(--white); border-radius: 0; }
.leadership .list .card .card-img { width: 100%; overflow: hidden; aspect-ratio: 0.8; border-radius: 0; }
.leadership .list .card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--all-slow); }
.leadership .list .card:hover .card-img img { transform: scale(1.05); }
.leadership .list .card .card-body { padding-bottom: 50px; position: relative; }
.leadership .list .card .card-body h4 { font-size: 1.25rem; color: var(--brown); font-weight: 700; }
.leadership .list .card .card-body span { position: absolute; bottom: 1.5rem; font-size: 1rem; color: var(--brown); font-weight: 700; cursor: pointer; }
.leadership .list .card .card-body p { font-size: 1.125rem; line-height: 1.3; }

.team-modal .close { position: absolute; right: 25px; top: 10px; z-index: 9; opacity: 1; }
.team-modal .close span { font-size: 3rem; line-height: 1; color: var(--brown); }
.team-modal .modal-dialog {  max-width: 1024px; }
.team-modal .modal-content { border-radius: 0; }
.team-modal .modal-body { padding: 0; }
.team-modal .modal-body h4 { margin-top: 60px; color: var(--brown); font-weight: 700; }
.team-modal .img-box { width: 100%; height: 100%; }
.team-modal .img-box img { width: 100%; height: 100%; object-fit: cover; }
.team-modal .text-box { height: 480px; overflow: auto; margin: 20px 0; padding-right: 30px; }
.team-modal .title-box { padding-right: 30px; }
.team-modal .text-box p { font-size: 1rem; }
.modal-backdrop.show { opacity: 0.8; }

/* GALLERY */
.projects { padding: 100px 0 0; }
.projects .container { max-width: 80%; }
.projects .section-title { margin-bottom: 40px; }
.projects .text-box { margin-top: 50px; margin-bottom: 80px; }
.projects .swiper:last-child { margin: 0; }
.projects .swiper .img-box { width: 100%; aspect-ratio: 1.8; overflow: hidden; }
.projects .swiper .img-box img { width: 100%; height: 100%; object-fit: cover; }

/* GALLERY */
.gallery { padding: 100px 0; }
.gallery .container { max-width: 80%; }
.gallery .section-title { margin-bottom: 40px; }
.gallery .swiper .img-box { width: 100%; aspect-ratio: 1.8; overflow: hidden; }
.gallery .swiper .img-box img { width: 100%; height: 100%; object-fit: cover; }

.gallery .swiper-button-next, .projects .swiper-button-next { background: url(../images/svg/right-angle.svg) no-repeat center center; background-size: 15px; right: -50px; }
.gallery .swiper-button-prev, .projects .swiper-button-prev { background: url(../images/svg/left-angle.svg) no-repeat center center; background-size: 15px; left: -50px; }

/* MEDIA ENQUIRY */
.media-enquiry { padding: 60px 0; background: #fafafa; }
.media-enquiry h4 { font-size: 2rem; text-align: center; line-height: 1.5; font-weight: 500; margin: 0; }

/* FOOTER */
.footer { padding: 100px 0 0; background: var(--black); margin-bottom: -1px; }
.footer .jarallax { position: absolute !important; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; }
.footer .section-title { margin-bottom: 40px; }
.footer h2 { color: var(--white); }
.footer address { font-size: 1.1rem; line-height: 1.5; color: var(--white); text-align: center;  margin-bottom: 40px; }
.footer .contact-info { display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 100px; text-align: center; }
.footer .contact-info img { width: 25px; height: 25px; margin-right: 15px; opacity: 0.9; }
.footer .contact-info span { font-size: 1rem; color: var(--white); position: relative; }
.footer .contact-info span::after { position: absolute; content: ''; left: 50%; transform: translateX(-50%); top: 100%; width: 0; height: 1px; background: var(--white); transition: var(--all-fast); }
.footer .contact-info:hover span:after { width: 100%; }

.copy { padding: 15px 0; border-top: 1px solid rgb(255 255 255 / 20%); }
.copy p { font-size: 0.875rem; color: var(--white); opacity: 0.5; margin: 0; }
.copy p a, .copy p span { color: var(--white); }
.copy p a:hover { text-decoration: underline; }