@charset "utf-8";

@font-face { font-family: "Optima"; src: local("Optima"), url("fonts/Optima.woff2") format("woff2"), url("fonts/Optima.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "Optima"; src: local("Optima Medium"), local("Optima-Medium"), url("fonts/Optima-Medium.woff2") format("woff2"), url("fonts/Optima-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
/* COLOR VARIABLES */
--white: 255 255 255;
--black: 0 0 0;
--purple: 61 1 70;
--topaz: 251 202 130;
--gold: 190 149 91;
--gray: 244 244 244;
--dark-gray: 234 234 234;
--black-100: 40 40 40;

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

/* GAP */
--gap-xs: 8px;
--gap-sm: 16px;
--gap-md: 24px;
--gap-lg: 32px;
--gap-xl: 40px;
--gap-xxl: 48px;
--gap-xxxl: 56px;

/* FONT FAMILY */
--inter: "Inter", serif;
--optima: "Optima";
}

/* ========================== COMMON CSS ========================== */
*,
ul,
ol,
li,
a { margin: 0; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: var(--inter); font-weight: 300; line-height: 150%; color: inherit; color: rgb(var(--black-100) / 100%); }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: var(--optima); }
input,
input:focus,
textarea,
textarea:focus,
.form-control,
.form-control:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; background: transparent; color: rgb(var(--black-100) / 70%); }
.btn:focus { box-shadow: none; }
*,
a,
a:active,
a:focus,
a:hover,
button:hover,
button:focus { text-decoration: none; outline: 0; color: inherit; }
button { background: transparent; outline: none; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; }
[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: none; outline: none; border: none; }
a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }
a:hover { color: inherit; }

body { width: 100%; font-size: 18px; line-height: 140%; width: 100%; position: relative; font-weight: 300; font-family: var(--inter); color: rgb(var(--black-100) / 100%); z-index: 1; overflow-x: hidden; -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); }
body p { font-size: 18px; line-height: 140%; color: rgb(var(--black-100) / 100%); margin-bottom: calc(var(--gap-xl) / 2); font-weight: 300; font-family: var(--inter); }

.no-scroll { overflow: hidden; }

hr { border-top: 1px solid rgb(var(--dark-gray) / 100%); }

::-moz-selection { color: rgb(var(--white) / 100%); background: rgb(var(--purple) / 100%); }
::selection { color: rgb(var(--white) / 100%); background: rgb(var(--purple) / 100%); }

::-webkit-scrollbar { width: 10px; display: none; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgb(var(--white) / 80%); box-shadow: inset 0 0 3px rgb(var(--white) / 80%); }
::-webkit-scrollbar-thumb { background-color: #888; border-radius: 15px; }

.barContainer { position: fixed; top: 0; right: 0; width: 10px; height: 100vh; -webkit-box-shadow: inset 0 0 3px rgb(var(--white) / 80%); box-shadow: inset 0 0 3px rgb(var(--white) / 80%); background: #000; border-radius: 15px; z-index: 999; pointer-events: none; }
.bar { height: 20%; width: 100%; background-color: #888; border-radius: 15px; -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); }

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

@media screen and (min-width: 1200px) {
  .container-fluid { max-width: calc(100% - 200px); margin: 0 auto; position: relative; }
}
@media screen and (min-width: 1500px) {
  .container { max-width: 1320px; position: relative; z-index: 1; }
}
@media screen and (min-width: 1921px) {
  .container { max-width: 1680px; position: relative; z-index: 1; }
}

.form-control::-webkit-input-placeholder { color: rgb(var(--black-100) / 80%); }
.form-control::-moz-placeholder { color: rgb(var(--black-100) / 80%); }
.form-control:-ms-input-placeholder { color: rgb(var(--black-100) / 80%); }
.form-control::-ms-input-placeholder { color: rgb(var(--black-100) / 80%); }
.form-control::placeholder { -webkit-transition: var(--all-fast); -o-transition: var(--all-fast); transition: var(--all-fast); color: rgb(var(--black-100) / 80%); }

label { font-size: 18px; line-height: 100%; font-weight: 300; width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
label span { color: #FF0000; }

.form-control { width: 100%; padding: 12px 0px; font-size: 16px; font-weight: 300; color: rgb(var(--black-100) / 100%); line-height: 150%; border: none; border-bottom: 1px solid rgb(var(--black-100) / 20%); border-radius: 0; -moz-appearance: none; appearance: none; -webkit-appearance: none; background: transparent; }
.form-control:not(:-moz-placeholder-shown) ~ label { font-size: 14px; transform: translateY(-20px); }
.form-control:not(:-ms-input-placeholder) ~ label { font-size: 14px; -ms-transform: translateY(-20px); transform: translateY(-20px); }
.form-control:focus ~ label, .form-control:not(:placeholder-shown) ~ label { font-size: 14px; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
.form-control:focus, .form-select:focus { color: var(--black-100, #252324); background: transparent; border-bottom: 1px solid rgb(var(--black-100) / 100%); outline: none; -webkit-box-shadow: none; box-shadow: none; }

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

.form-select { background: transparent url(../images/icons/dropdown-arrow-black.svg) right center no-repeat; background-size: 10px; color: var(--black-100, #252324); font-size: 16px; font-weight: 400; line-height: 135%; letter-spacing: 0.3px; padding: 12px 0; padding-right: 15px; border-bottom: 1px solid rgb(94 95 97 / 10%); border-radius: 0; cursor: pointer; }
.form-select:focus { background: transparent url(../images/icons/dropdown-arrow-black.svg) right center no-repeat; background-size: 10px; }


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

.img-box, .video--box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }
img, video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

#smooth-content { position: relative; }

/* STYLE GUIDE */
/* HEADINGS */
.h1 { --font-size: 104px; font-size: var(--font-size); line-height: 110%; font-weight: 400; font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h2 { --font-size: 80px; font-size: var(--font-size); line-height: 110%; font-weight: 400; text-transform: uppercase; letter-spacing: calc((var(--font-size) / 100 * 5) * 0.5); font-family: var(--optima); margin-bottom: var(--gap-sm); color: rgb(var(--purple) / 100%); }
.h3 { --font-size: 60px; font-size: var(--font-size); line-height: 110%; font-weight: 400; font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h4 { --font-size: 50px; font-size: var(--font-size); line-height: 110%; font-weight: 400; font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h5 { --font-size: 40px; font-size: var(--font-size); line-height: 130%; font-weight: 400; font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h6 { --font-size: 36px; font-size: var(--font-size); line-height: 130%; font-weight: 400; letter-spacing: calc((var(--font-size) / 100 * 3) * -1); font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h7 { --font-size: 30px; font-size: var(--font-size); line-height: 130%; font-weight: 400; font-family: var(--optima); text-transform: uppercase; margin-bottom: var(--gap-sm); }
.h8 { --font-size: 25px; font-size: var(--font-size); line-height: 130%; font-weight: 300; font-family: var(--inter); margin-bottom: var(--gap-sm); }

.pl-o { --font-size: 20px; font-size: var(--font-size); line-height: 120%; font-weight: 400; font-family: var(--optima); }
.pl-i { --font-size: 20px; font-size: var(--font-size); line-height: 150%; font-weight: 200; font-family: var(--inter); }
.pn { --font-size: 18px; font-size: var(--font-size); line-height: 120%; font-weight: 200; font-family: var(--inter); }

.section--title--wrapper { display: flex; flex-flow: column wrap; align-items: center; text-align: center; padding-bottom: var(--gap-xxxl);}
.section--title { width: auto; margin: auto; display: inline-flex; align-items: center; --font-size: 18px; font-size: var(--font-size); font-weight: 300; font-family: var(--inter); text-transform: uppercase; text-align: center; margin-bottom: var(--gap-md); position: relative; }
.section--title span { width: 50px; height: 1px; background: rgb(var(--black) / 100%); margin: 0 var(--gap-sm); }
.section--title + .h2 { margin-bottom: 0; }

/* BUTTONS */
.btn { position: relative; display: inline-flex; align-items: center; padding: calc(var(--gap-md) + 2px) var(--gap-xl) var(--gap-md) var(--gap-xl); border: 1px solid transparent; cursor: pointer; border-radius: 0; -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); overflow: hidden; z-index: 1; }
.btn span { display: flex; --font-size: 18px; font-size: var(--font-size); font-weight: 200; line-height: 120%; text-align: center; letter-spacing: calc(var(--font-size) / 100 * 20); text-transform: uppercase; font-family: var(--inter); -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); }
.btn .svg { width: 32px; margin-right: var(--gap-lg); }
.btn .svg path { fill: rgb(var(--white) / 100%); -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); }
.btn span + .svg { margin-right: 0; margin-left: calc(var(--gap-sm) * 1); }

.btn--primary { background: rgb(var(--purple) / 100%); border-color: rgb(var(--purple) / 100%); }
.btn--primary:hover { background: rgb(var(--topaz) / 100%); border-color: rgb(var(--topaz) / 100%); color: rgb(var(--black-100) / 100%); }
.btn--primary span { color: rgb(var(--white) / 100%); }
.btn--primary:hover span { color: rgb(var(--black-100) / 100%); }
.btn--primary:hover .svg path { fill: rgb(var(--black-100) / 100%); }

.btn--secondary { border: none; }
.btn--secondary::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right,  #d8a855 -20%,#9c763c 100%); z-index: -1; transition: var(--all-slow); pointer-events: none; }
.btn--secondary:hover::before { opacity: 0; }
.btn--secondary:hover { background: rgb(var(--purple) / 100%); color: rgb(var(--white) / 100%); }
.btn--secondary span { font-weight: 300; color: rgb(var(--white) / 100%); }
.btn--secondary:hover span { color: rgb(var(--white) / 100%); }
.btn--secondary:hover .svg path { fill: rgb(var(--white) / 100%); }

.btn--tertiary { background: transparent; border-color: rgb(var(--white) / 100%); }
.btn--tertiary:hover { background: rgb(var(--purple) / 100%); border-color: rgb(var(--purple) / 100%); color: rgb(var(--white) / 100%); }
.btn--tertiary span { color: rgb(var(--white) / 100%); }
.btn--tertiary:hover span { color: rgb(var(--white) / 100%); }
.btn--tertiary:hover .svg path { fill: rgb(var(--white) / 100%); }

/* BLT LIST */
.blt--list { padding-left: 0; }
.blt--list li { padding: var(--gap-xs) 0; border-bottom: 1px solid rgb(var(--black) / 20%); }
.blt--list li:first-child { border-top: 1px solid rgb(var(--black) / 20%); }
.blt--list li .pl-i { margin-bottom: 0; }

.section--spacing { padding: calc(var(--gap-xl) * 3) 0; }

/* HEADER */
.header { position: fixed; left: 0; top: 0; width: 100%; padding: 0; z-index: 3; background: rgb(var(--white) / 100%); -webkit-transition: var(--all-medium); -o-transition: var(--all-medium); transition: var(--all-medium); border-bottom: 1px solid rgb(var(--dark-gray) / 100%); }
.header .container-fluid { max-width: 100%; }
.header .logo { width: 300px; }

.header .navbar--nav.left { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; }
.header .navbar--nav.left li a { margin-right: 30px; }
.header .navbar--nav.left li a { --font-size: 16px; position: relative; font-size: var(--font-size); letter-spacing: calc(var(--font-size) / 100 * 3); line-height: 100%; font-weight: 500; text-transform: uppercase; font-family: var(--optima); color: rgb(var(--black) / 50%); display: flex; flex-wrap: wrap; align-items: center; padding: var(--gap-sm) 0px; transition: var(--all-medium); }
.header .navbar--nav.left li a:hover, .header .navbar--nav.left li a.active { color: rgb(var(--purple) / 100%); }
.header .navbar--nav.left li a:after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 0px; height: 2px; background: rgb(var(--purple) / 100%); transition: var(--all-medium);}
.header .navbar--nav.left li a:hover:after, .header .navbar--nav.left li a.active:after { width: 100%; }

.header .navbar--nav.right { display: flex; flex-flow: row wrap; justify-content: flex-end; }
.header .navbar--nav.right li { border-left: 1px solid rgb(var(--dark-gray) / 100%); }
.header .navbar--nav.right li:last-child { border-right: 1px solid rgb(var(--dark-gray) / 100%);  }
.header .navbar--nav.right li a { height: 100%; position: relative; display: flex; flex-wrap: wrap; align-items: center; transition: var(--all-slow); padding: 16px 20px; }
.header .navbar--nav.right li a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, #9c763c -20%, #d8a855 100%); z-index: -1; transition: var(--all-slow); pointer-events: none; opacity: 0; }
.header .navbar--nav.right li a:hover:before { opacity: 1; }
.header .navbar--nav.right li a svg { width: 30px; transition: var(--all-medium); }
.header .navbar--nav.right li a:hover svg  { filter: brightness(0) invert(1); }

.header .desk-menu .navbar--nav.left {display:inline-flex;}
.menu-wrapper {display: none;}

/* BANNER */
.home--banner { width: 100%; position: relative; }
.home--banner .bg { width: 100%; height: 100vh; overflow: hidden; position: relative; }
.home--banner .bg:has( video)::after { content: ''; position: absolute; bottom: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 90%); pointer-events: none; }
.home--banner .banner--content { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; padding-bottom: var(--gap-xl); }
.home--banner .banner--content .h1 { color: rgb(var(--white) / 100%); margin-bottom: var(--gap-md); }
.home--banner .banner--content .h2 { color: rgb(var(--white) / 100%); margin-bottom: var(--gap-md); }
.home--banner .banner--content .h7 { width: 80%; color: rgb(var(--white) / 100%); margin: auto; margin-bottom: var(--gap-xl); font-size: 26px; }
.home--banner .banner--content .btn { padding: var(--gap-sm) var(--gap-xl); margin-bottom: var(--gap-md); }
.home--banner .banner--content .scroll--down { display: flex; flex-flow: column wrap; align-items: center; }
.home--banner .banner--content .scroll--down .line { border-left: 1px solid rgb(var(--white) / 100%); height: 30px; margin-bottom: var(--gap-md); }
.home--banner .banner--content .scroll--down .svg { width: 24px; margin-bottom: var(--gap-sm); }
.home--banner .banner--content .scroll--down .svg circle { animation: fadeOutMove 1s ease-in-out forwards infinite; }
.home--banner .banner--content .scroll--down span { --font-size: 10px; font-size: var(--font-size); color: rgb(var(--white) / 100%); line-height: 120%; letter-spacing: calc(var(--font-size) / 100 * 20); text-transform: uppercase; font-weight: 200; }

@keyframes fadeOutMove {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

/* FOR 2N SLIDE CSS */
.home--banner .bg:not(:has( video)) + .banner--content { bottom: calc(50% - 87px); transform: translateY(50%); padding-bottom: 0; }
.home--banner .bg:not(:has( video)) + .banner--content .btn { margin-bottom: 0; }
.home--banner .bg:not(:has( video)) + .banner--content .h2 { letter-spacing: 0; }
.home--banner .bg:not(:has( video)) + .banner--content .h6 { width: 100%; margin-left: 0; }

/* WHO WE ARE */
.layout--one .row { --bs-gutter-x: calc(var(--gap-lg) * 2); }
.layout--one .h2 .colored { font-family: inherit; line-height: inherit; color: rgb(var(--purple) / 100%); }
.layout--one .img-box { width: 100%; aspect-ratio: 60/48; border-radius: 400px; overflow: hidden; }
.layout--one .info--box { width: 100%; }
.layout--one .content--box { width: 100%; display: flex; position: relative; padding: calc(var(--gap-xxl) * 6) 0; z-index: 1; text-align: center; }
.layout--one .bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; }
.layout--one .bg img { object-position: 50% 0%; }

.who--we--are { width: 100%; margin-bottom: -1px; padding: calc(var(--gap-xl) * 3) 0 0;}
.who--we--are .row { --bs-gutter-x: calc(var(--gap-lg) * 2); }
.who--we--are .h5 { color: rgb(var(--white) / 100%); }
.who--we--are .pl-i { color: rgb(var(--white) / 100%); }


/* OUR PILLARS */
.our--pillars { padding: calc(var(--gap-xl) * 4) 0; width: 100%; position: relative; display: flex; flex-flow: row wrap; align-items: center; z-index: 1; }
.our--pillars .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.our--pillars .bg img { object-position: 0% 0%; }
.our--pillars .section--title--wrapper { text-align: left; }
.our--pillars .section--title--wrapper .section--title { color: rgb(var(--white) / 100%); margin: 0; clip-path: none !important; }
.our--pillars .section--title--wrapper .section--title span { background: rgb(var(--white) / 100%); }
.our--pillars .section--title--wrapper .h3 { display: flex; color: rgb(var(--white) / 100%); line-height: 110%; text-align: left; }
.our--pillars .section--title--wrapper .h3 img { width: 60px; margin-right: var(--gap-lg); }
.our--pillars p { color: rgb(var(--white) / 100%); margin-bottom: 0px; }


.pillar--list { display: flex; flex-flow: row wrap; gap: calc(var(--gap-xs) / 2); width: 100%; }
.pillar--list li { display: flex; flex: 0 0 calc(100vw / 8.5); cursor: pointer; transition: var(--all-medium); }
.pillar--list li.active { flex: 1; }
.pillar--list .pillar--card { display: flex; flex-flow: column wrap; width: 100%; transform: translateY(100px); overflow: hidden; border-left: 1px solid rgb(var(--white) / 20%); }
.pillar--list .card--img { display: flex; flex-flow: row wrap; width: 100%; height: 40vh; }
.pillar--list .card--img img { object-position: 50%; }
.pillar--list .card--body { display: flex; overflow: hidden; position: relative; flex-flow: column wrap; width: 100%; padding:16px 16px; /*border-left: 1px solid rgb(var(--white) / 20%); */}
.pillar--list .card--body .h8 { width: 100%; font-size: 28px; color: rgb(var(--white) / 70%); font-family: var(--optima); margin-bottom: var(--gap-xs); transition: var(--all-medium); }
.pillar--list .card--body .pn { width: 100%; --font-size: 16px; color: rgb(var(--white) / 70%); margin-bottom: 0px; transition: var(--all-medium);}
.pillar--list .card--body .number { width: 100%; font-size: 12px; color: rgb(var(--white) / 70%); margin-top: auto; transition: var(--all-medium); }
.pillar--list .active .card--body .h8 { color: rgb(var(--white) / 100%); }
.pillar--list .active .card--body .pn { color: rgb(var(--white) / 100%); }
.pillar--list .card--body .number { margin-bottom: var(--gap-sm); }
.pillar--list .active .card--body .number { color: rgb(var(--white) / 100%); }

.pillar--list .active .card--body, .pillar--list .active .pillar--card { overflow: visible; }
.pillar--list .card--body:after { content: ""; transition: var(--all-fast); width: 70px; height: 100%; position: absolute; top: 0px; right: -20px; background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(24 1 47) 100%); }
.pillar--list .active .card--body:after { opacity: 0; width: 0px; }

/* OUR ADVANTAGES */
.our--advantage { position: relative; padding: calc(var(--gap-xl) * 6) 0; z-index: 1; }
.our--advantage .section--title--wrapper { padding-bottom: 40px; }
.our--advantage .section--title--wrapper {padding-bottom: 10px !important;}
.our--advantage .bg { opacity: 0.6; z-index: -1; }
.our--advantage .info--box { text-align: center; }
.our--advantage .info--box p {margin-bottom: 0px;}


/* REAL ESTATE */
.real--estate { padding-top: 0; }
.real--estate .bg--box { display: flex; width: 100%; aspect-ratio: 150/58; overflow: hidden; position: relative; }
.real--estate .bg--box .video--box { width: 100%; height: 100%; }
.real--estate .bg--box .h2 { color: rgb(var(--white) / 100%)}
.real--estate .bg--box::after { content: ''; position: absolute; bottom: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.real--estate .bg--box video { width: 100%; object-position: 0% 0%; }
.real--estate .bg--box .info--box { position: absolute; left: 0; top: calc(var(--gap-xl) * 2); width: 100%; color: rgb(var(--white) / 100%); text-align: center; z-index: 1; }
.real--estate .bg--box .info--box .section--title--wrapper { padding-bottom: var(--gap-sm); }
.real--estate .bg--box .info--box .section--title span { background: rgb(var(--white) / 100%); }
.real--estate .bg--box .info--box .pl-i { color: rgb(var(--white) / 100%); }

.exquisite--opportunities { position: relative; transform: translateY(-100px); z-index: 1; margin-bottom: -340px; will-change: transform; }
.exquisite--opportunities .left--box { transform: translateY(100px); will-change: transform; }
.exquisite--opportunities .row { --bs-gutter-x: calc(var(--gap-lg) * 2); }
.exquisite--opportunities .h2 { line-height: 110%; margin-bottom: calc(var(--gap-lg) * 2); }
.exquisite--opportunities .opportunities--box { position: relative; width: 100%; aspect-ratio: 53/70; }
.exquisite--opportunities .opportunities--box:has( + .opportunities--box) { margin-bottom: calc(var(--gap-xl) * 2 + var(--gap-xs)); }
.exquisite--opportunities .opportunities--box .title-box { position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--gap-xxl) var(--gap-lg); z-index: 1; transition: var(--all-medium); }
.exquisite--opportunities .opportunities--box:hover .title-box { opacity: 0; transform: translateY(-60px); }
.exquisite--opportunities .opportunities--box .title-box .h4 { color: rgb(var(--white) / 100%); text-transform: initial; margin-bottom: 0; }
.exquisite--opportunities .opportunities--box .info--box { position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--gap-xxl) var(--gap-lg); z-index: 1; opacity: 0; transform: translateY(30px); transition: var(--all-medium); }
.exquisite--opportunities .opportunities--box:hover .info--box { opacity: 1; transform: translateY(0px); }
.exquisite--opportunities .opportunities--box .info--box .svg { width: 65px; margin-bottom: var(--gap-sm); }
.exquisite--opportunities .opportunities--box .info--box .h4 { color: rgb(var(--white) / 100%); text-transform: initial; margin-bottom: var(--gap-md); }
.exquisite--opportunities .opportunities--box .info--box .pl-i { color: rgb(var(--white) / 100%); margin-bottom: 0; }


/* OUR DIVISIONS */
.our--divisions .division--list { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.our--divisions .division--list li { position: relative; overflow: hidden; transform: translateY(200px); opacity: 0; transform-style: preserve-3d; perspective: 1000px; }
.our--divisions .division--list li .img-box { width: 100%; aspect-ratio: 64/70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; transition: var(--all-medium); }
.our--divisions .division--list li .img-box::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }
.our--divisions .division--list li:hover .img-box { transform: scale(1.1); }
.our--divisions .division--list li .img-box .h4 { position: absolute; z-index: 1; width: 100%; text-align: center; color: rgb(var(--white) / 100%); padding: 0 var(--gap-lg); transition: var(--all-medium); }
.our--divisions .division--list li .info--box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-flow: column wrap; align-items: center; text-align: center; justify-content: center; padding: var(--gap-xl) calc(var(--gap-xl) * 2); background: rgb(var(--purple) / 40%); backdrop-filter: blur(24px); z-index: 1; transform: translateY(20px); opacity: 0; transition: var(--all-medium); }
.our--divisions .division--list li:hover .info--box { transform: translateY(0px); opacity: 1; }
.our--divisions .division--list li .info--box .h4 { color: rgb(var(--white) / 100%); margin-bottom: var(--gap-lg); }
.our--divisions .division--list li .info--box .pl-i:has( + .h4) { text-transform: uppercase; }
.our--divisions .division--list li .info--box .pl-i { color: rgb(var(--white) / 100%); }

/* WHAT WE DO */
.what--we--do--space { width: 100%; display: flex; flex-flow: row wrap; }
.what--we--do--space .space { width: 100%; height: 70vh; }
.what--we--do--space .space-1 { height: 30vh; }
.what--we--do--space .space-8 { height: 100vh; }

.what--we--do { background: rgb(var(--white) / 100%); position: fixed; top: 100vh; left: 0; z-index: 1; width: 100%; height: 100vh; overflow: hidden; }
.what--we--do .section--title--wrapper { padding-top: calc(var(--gap-xxxl) * 2); }
.what--we--do--list .h3 { position: relative; color: rgb(var(--black) / 100%); }
.what--we--do--list .h3 .h5 { line-height: 100%; position: absolute; right: 100%; top: 0; color: rgb(var(--black) / 50%); margin-right: var(--gap-xs); }
.what--we--do--list .h7 { color: rgb(var(--black) / 100%); margin-bottom: var(--gap-lg); }
.what--we--do--list .pl-i { color: rgb(var(--black) / 100%); }

.what--we--do--list { position: relative; width: 100%; z-index: 1; }
.what--we--do--list > li { width: 100%; padding: calc(var(--gap-xl) * 3) 0; z-index: 1; }
.what--we--do--list > li:not(:first-child) { width: 100%; overflow: hidden; padding: calc(var(--gap-xl) * 3) 0; position: absolute; top: 100vh; left: 0; display: flex; flex-flow: row wrap; align-items: start; z-index: 1; }
.what--we--do--list > li .info--box { width: 100%; }
.what--we--do--list .band--bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.what--we--do--list .band--bg img { object-position: 50%; }
.what--we--do ul li { color: rgb(var(--black) / 100%); }
.what--we--do ul li.row:not(:last-child) { margin-bottom: calc(var(--gap-xl) * 2); }


/* FOLLOW US */
.follow--us .h5 { margin-bottom: 40px; --font-size:18px ; }
.follow--us .post--list { display: flex; flex-flow: row wrap; }
.follow--us .post--list li { flex: 1; }
.follow--us .post--list li a { display: flex; width: 100%; aspect-ratio: 1; }


/* INQUIRE NOW */
.inquire--now { padding: 120px 0px 120px 0px; position: relative; }
.inquire--now .row { --bs-gutter-x: var(--gap-xxxl); }
.inquire--now .h2 { color: rgb(var(--white) / 100%); line-height: 120%; margin-bottom: 0; }
.inquire--now .h8 { color: rgb(var(--white) / 100%); margin-bottom: var(--gap-md); }
#gradient-canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; --gradient-color-1: #200025; --gradient-color-2: #440050; --gradient-color-3: #200025; --gradient-color-4: #200025; z-index: 0; transition: var(--all-medium); pointer-events: none; z-index: -3; }


/* FOOTER */
.footer { padding: var(--gap-xxl) 0 0; }
.footer .pl-o { text-transform: uppercase; color: rgb(var(--purple) / 100%); margin-bottom: calc(var(--gap-lg) - 4px); }
.footer .h8 { color: rgb(var(--black) / 100%); line-height: 135%; font-weight: 300; font-family: var(--inter); margin-bottom: 0; position: relative; transition: var(--all-medium); }
.footer a.h8:hover { color: rgb(var(--purple) / 100%); }
.footer a.h8::after { content: ''; position: absolute; right: 0; bottom: -2px; width: 0%; height: 1px; background: rgb(var(--purple) / 100%); transition: var(--all-medium); }
.footer a.h8:hover::after { left: 0; right: auto; width: 100%; }

.social--list { display: flex; flex-flow: row wrap; align-items: center; }
.social--list li { margin-right: var(--gap-sm); }
.social--list a { width: 26px; aspect-ratio: 1; }
.social--list a .svg { width: 100%; height: auto; }
.social--list a .svg path { transition: var(--all-medium); }
.social--list a:hover .svg path { fill: rgb(var(--gold) / 100%); }

.footer--links li:not(:last-child) { width: 100%; display: flex; justify-content: flex-start; margin-bottom: var(--gap-xxl); }
.footer--links li a { display: flex; --font-size: 20px; font-size: var(--font-size); line-height: 90%; color: rgb(var(--black-100) / 100%); font-family: var(--optima); text-transform: uppercase; position: relative; }
.footer--links li a::after { content: ''; position: absolute; right: 0; bottom: -2px; width: 0%; height: 1px; background: rgb(var(--purple) / 100%); transition: var(--all-medium); }
.footer--links li a:hover::after { left: 0; right: auto; width: 100%; }

.footer--logo { width: 100%; max-width: 420px; }

.footer .copy { padding: var(--gap-md) 0; border-top: 1px solid rgb(var(--black-100) / 20%); margin-top: var(--gap-xl); }
.footer .copy p { font-size: 14px; color: rgb(var(--black) / 60%); margin-bottom: 0; }
.footer .copy p a { color: rgb(var(--black) / 60%); transition: var(--all-medium); }
.footer .copy p a:hover { color: rgb(var(--purple) / 100%); }


/* WHATSAPP */
.wa { display: flex; position: fixed; right: var(--gap-xl); bottom: var(--gap-lg); z-index: 1; width: 65px; aspect-ratio: 1; padding: 6px; border-radius: 50%; background: #25d366; }
.wa .svg { width: 100%; }
.wa:hover { -webkit-animation: 1s infinite pulse-animation; animation: 1s infinite pulse-animation; }

@-webkit-keyframes pulse-animation {
0% { -webkit-box-shadow: 0 0 0 0 rgba(37,211,102,100%); box-shadow: 0 0 0 0 rgba(37,211,102,100%); }
100% { -webkit-box-shadow: 0 0 0 20px rgba(37,211,102,0%); box-shadow: 0 0 0 20px rgba(37,211,102,0%); }
}

@keyframes pulse-animation {
0% { -webkit-box-shadow: 0 0 0 0 rgba(37,211,102,100%); box-shadow: 0 0 0 0 rgba(37,211,102,100%); }
100% { -webkit-box-shadow: 0 0 0 20px rgba(37,211,102,0%); box-shadow: 0 0 0 20px rgba(37,211,102,0%); }
}

.modal .modal-header { padding: var(--gap-md); }
.modal .modal-content { border-radius: 0; }
.modal .h6 { flex: 1; line-height: 1; margin-bottom: 0; }
.modal .modal-body { padding: var(--gap-md); }
.modal .btn--primary { padding: calc(var(--gap-sm) + 2px) var(--gap-xl) var(--gap-sm) var(--gap-xl); }
.modal-backdrop.show { opacity: 0.8; }
.error-msg {    color: #d63636;    font-size: 12px;}