.crft-tg-cont {
width: 90%;
margin: 0 auto;
position: relative;
}
/* =========================================
MAIN SECTION
========================================= */
.Crft-section {
width: 100%;
min-height: 24vw;
background: #ffffff;
border-top: 0.15vw solid #DCDCDC;
border-bottom: 0.15vw solid #DCDCDC;
margin-bottom: 2%;
}
/* =========================================
BOOTSTRAP CONTAINER
========================================= */
.Crft-container {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
/* =========================================
MAIN GRID
========================================= */
.Crft-row {
position: relative;
width: 100%;
min-height: 24vw;
margin: 0;
}
/* =========================================
LEFT COLUMN
========================================= */
.Crft-content {
position: relative;
min-height: 24vw;
display: flex;
align-items: center;
/* padding-left: 8%; */
padding-right: 5%;
border-right: 0.15vw solid #DCDCDC;
}
/* =========================================
TITLE
========================================= */
.Crft-title {
display: flex;
flex-direction: column;
color: #252525;
line-height: 1.05;
font-size: 32px;
font-weight: 300;
}
.Crft-title span {
font-weight: 300;
}
.Crft-title strong {
font-weight: 700;
}
/* =========================================
RIGHT BADGE COLUMN
========================================= */
.Crft-bdgs {
position: relative;
min-height: 24vw;
overflow: hidden;
display: flex;
align-items: center;
border-right: 0.15vw solid #DCDCDC;
background: #ffffff;
}
/* =========================================
BADGE VIEWPORT
========================================= */
.bdg-viewport {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 5%;
padding-right: 5%;
}
/* =========================================
BADGE TRACK
========================================= */
.bdg-track {
display: flex;
align-items: center;
width: max-content;
gap: 3vw;
will-change: transform;
transform: translate3d(0, 0, 0);
}
/* =========================================
BADGE ITEM
========================================= */
.bdg-itm {
flex: 0 0 auto;
width: 11vw;
max-width: 13%;
display: flex;
align-items: center;
justify-content: center;
}
.bdg-itm img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* =========================================
NEON TRIANGLE
========================================= */
.nn-tri {
position: absolute;
top: 0;
right: 0;
width: 2.5vw;
height: 2.5vw;
min-width: 1.5rem;
min-height: 1.5rem;
background: #00d8d2;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
z-index: 10;
}
/* =========================================
PLAY / PAUSE BUTTON
========================================= */
.bdg-control {
position: absolute;
right: 0;
bottom: 0;
width: 3.2vw;
height: 3.2vw;
min-width: 2rem;
min-height: 2rem;
padding: 0;
border: 0;
background: #00d8d2;
color: #075b5a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.bdg-control:hover {
background: #00c5c0;
color: #ffffff;
}
#controlIcon {
font-size: 0.9em;
line-height: 1;
font-weight: 400;
}
/* =========================================
DESKTOP 1200+
========================================= */
@media (min-width: 1200px) {
.Crft-title {
font-size: 3.2vw;
}
.bdg-track {
gap: 2.5vw;
}
.bdg-itm {
width: 10vw;
max-width: none;
}
}
/* =========================================
LARGE DESKTOP 1500+
========================================= */
@media (min-width: 1500px) {
.Crft-title {
font-size: 3vw;
}
.bdg-track {
gap: 2.2vw;
}
.bdg-itm {
width: 9vw;
}
}
/* =========================================================
MOBILE / TABLET
========================================================= */
@media (max-width: 991.98px) {
/* =====================================================
MOBILE - TRIANGLE ON FIRST ROW TOP-RIGHT
===================================================== */
/* Hide the existing triangle from the badge/second row */
.Crft-bdgs .nn-tri {
display: none;
}
/* Create triangle on the first row */
.Crft-content::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 5vw;
height: 5vw;
background: #00d8d2;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
z-index: 40;
pointer-events: none;
}
/* =====================================================
OUTER SECTION
===================================================== */
.Crft-section {
width: 100%;
min-height: auto;
background: #ffffff;
border-top: 0.15vw solid #DCDCDC;
border-bottom: 0.15vw solid #DCDCDC;
margin-bottom: 8%;
}
/* =====================================================
90% CONTENT AREA
===================================================== */
.crft-tg-cont {
width: 95%;
margin: 0 !important;
position: relative;
}
/* =====================================================
FULL HEIGHT RIGHT VERTICAL LINE
===================================================== */
.crft-tg-cont::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 0.15vw;
background: #DCDCDC;
z-index: 30;
pointer-events: none;
}
/* =====================================================
MAIN ROW
===================================================== */
.Crft-row {
width: 100%;
margin: 0;
min-height: auto;
}
/* =====================================================
TOP CONTENT / TITLE AREA
===================================================== */
.Crft-content {
position: relative;
width: 100%;
min-height: 47vw;
display: flex;
align-items: center;
padding-left: 5%;
padding-right: 5%;
border-right: 0;
border-bottom: 0.15vw solid #DCDCDC;
}
/* =====================================================
TITLE
===================================================== */
.Crft-title {
display: flex;
flex-direction: column;
color: #252525;
line-height: 1.05;
font-size: 8.5vw;
font-weight: 300;
}
.Crft-title span {
font-weight: 300;
}
.Crft-title strong {
font-weight: 700;
}
/* =====================================================
BADGE SECTION
===================================================== */
.Crft-bdgs {
position: relative;
width: 100%;
min-height: 61vw;
overflow: hidden;
display: flex;
align-items: center;
background: #ffffff;
border-right: 0;
padding-right: 0;
}
/* =====================================================
BADGE VIEWPORT
===================================================== */
.bdg-viewport {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 0;
padding-right: 0;
}
/* =====================================================
BADGE TRACK
===================================================== */
.bdg-track {
display: flex;
align-items: center;
width: max-content;
gap: 11vw;
will-change: transform;
transform: translate3d(0, 0, 0);
}
/* =====================================================
BADGE
===================================================== */
.bdg-itm {
flex: 0 0 auto;
width: 22vw;
max-width: none;
display: flex;
align-items: center;
justify-content: center;
}
.bdg-itm img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* =====================================================
TOP NEON TRIANGLE
===================================================== */
.nn-tri {
position: absolute;
top: 0;
right: 0;
width: 5vw;
height: 5vw;
min-width: 0;
min-height: 0;
background: #00d8d2;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
z-index: 40;
}
/* =====================================================
PLAY / PAUSE BUTTON
===================================================== */
.bdg-control {
position: absolute;
right: 0;
bottom: 0;
width: 12vw;
height: 12vw;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
background: #00d8d2;
color: #075b5a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 40;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.bdg-control:hover {
background: #00c5c0;
color: #ffffff;
}
#controlIcon {
font-size: 4vw;
line-height: 1;
font-weight: 400;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.Crft-content {
min-height: 47vw;
padding-left: 5%;
padding-right: 5%;
}
.Crft-title {
font-size: 8.5vw;
}
.Crft-bdgs {
min-height: 61vw;
}
.bdg-track {
gap: 11vw;
}
.bdg-itm {
width: 22vw;
}
.nn-tri {
width: 5vw;
height: 5vw;
}
.bdg-control {
width: 12vw;
height: 12vw;
}
#controlIcon {
font-size: 4vw;
}
}
/* =========================================================
MAIN BANNER
========================================================= */
.lgc-bnn {
position: relative;
top: 0;
width: 100%;
max-width: 100%;
height: 38.59375vw;
overflow: hidden;
background: #ffffff;
}
/* =========================================================
CUSTOM ROW
========================================================= */
.teh-rw {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
margin: 0 !important;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
/* =========================================================
BOTH DESKTOP COLUMNS
========================================================= */
.lgc-bnn-lft,
.lgc-bnn-rg {
position: relative;
height: 100%;
padding: 0 !important;
}
/* =========================================================
DESKTOP LEFT COLUMN
========================================================= */
.lgc-bnn-lft {
flex: 0 0 50%;
max-width: 50%;
background: #202124;
}
/* =========================================================
DESKTOP RIGHT COLUMN
========================================================= */
.lgc-bnn-rg {
flex: 0 0 50%;
max-width: 50%;
background: #ffffff;
overflow: hidden;
}
/* =========================================================
DESKTOP IMAGE
========================================================= */
.lgc-bnn-rg .dek-img-part {
display: block;
width: 100%;
height: 100%;
/*
Keep original desktop image
proportional.
*/
object-fit: cover;
object-position: center center;
}
/* =========================================================
MOBILE IMAGE
Hidden on desktop
========================================================= */
.mob-img-part {
display: none;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.lgc-bnn-content {
position: absolute;
/*
Exact 10% from banner edge
*/
left: 10%;
top: 50%;
transform: translateY(-50%);
width: 85%;
color: #ffffff;
}
/* =========================================================
TITLE
========================================================= */
.lgc-bnn-title {
margin: 0;
font-weight: 300;
line-height: 1.05;
color: #eeeeee;
}
/* =========================================================
TITLE STRONG
========================================================= */
.lgc-bnn-title strong {
display: block;
margin-top: 0.12em;
font-weight: 700;
color: #ffffff;
}
/* =========================================================
DESCRIPTION
========================================================= */
.lgc-bnn-description {
margin-top: 1.2em;
margin-bottom: 0;
max-width: 75%;
line-height: 1.4;
color: #bfc1c3;
}
/* =========================================================
=========================================================
DESKTOP GRID OVERLAY
=========================================================
========================================================= */
.bnn-teh-grd {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}
/* =========================================================
DESKTOP GRID LINES
========================================================= */
.teh-grd-line {
position: absolute;
transform: translateZ(0);
}
/* =========================================================
DESKTOP HORIZONTAL LINE 1
LEFT SECTION = GREEN
RIGHT SECTION = RED
========================================================= */
.teh-grd-hrz-1 {
top: 14%;
left: 0;
width: 100%;
height: 0.5px;
background: linear-gradient(
to right,
#333637 0%,
#333637 50%,
#DCDCDC 50%,
#DCDCDC 100%
);
}
/* =========================================================
DESKTOP HORIZONTAL LINE 2
This line exists only in the RIGHT section.
RIGHT SECTION = RED
========================================================= */
.teh-grd-hrz-2 {
top: 27%;
left: 50%;
width: 50%;
height: 1px;
background: #DCDCDC;
}
/* =========================================================
DESKTOP HORIZONTAL LINE 3
LEFT SECTION = GREEN
RIGHT SECTION = RED
========================================================= */
.teh-grd-hrz-3 {
top: 84%;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(
to right,
#333637 0%,
#333637 50%,
#DCDCDC 50%,
#DCDCDC 100%
);
}
/* =========================================================
DESKTOP VERTICAL LINE 1
========================================================= */
.teh-grd-vrt-1 {
left: 45%;
top: 0;
width: 1px;
height: 100%;
background: #333637;
}
/* =========================================================
DESKTOP VERTICAL LINE 2
========================================================= */
.teh-grd-vrt-2 {
left: 55%;
top: 0;
width: 1px;
height: 100%;
background: #DCDCDC;
}
/* =========================================================
DESKTOP VERTICAL LINE 3
RIGHT SECTION = RED
========================================================= */
.teh-grd-vrt-3 {
left: 89.5%;
top: 0;
width: 1px;
height: 100%;
background: #DCDCDC;
}
/* =========================================================
DESKTOP VERTICAL LINE 4
RIGHT SECTION = RED
========================================================= */
.teh-grd-vrt-4 {
left: 95%;
top: 0;
width: 1px;
height: 100%;
background:#DCDCDC;
}
/* =========================================================
DESKTOP TURQUOISE ABSTRACT SHAPE
========================================================= */
.neon-sp {
position: absolute;
top: 14.2%;
left: 89.6%;
width: 5.4%;
height: 13%;
z-index: 10;
background: #00d9c7;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
}
/* =========================================================
=========================================================
TABLET
=========================================================
========================================================= */
@media (max-width: 991px) {
.lgc-bnn {
/*
Continue using proportional
desktop/tablet height.
*/
height: 38.59375vw;
}
.lgc-bnn-content {
left: 5%;
width: 85%;
}
.lgc-bnn-title {
font-size: clamp(
20px,
3vw,
34px
);
}
}
/* =========================================================
=========================================================
MOBILE
=========================================================
========================================================= */
@media (max-width: 767px) {
/* =====================================================
MOBILE MAIN BANNER
===================================================== */
.lgc-bnn {
/*
Do not use the desktop banner height
on mobile.
The two sections determine the
total height.
*/
height: auto;
overflow: hidden;
background: #ffffff;
}
/* =====================================================
CUSTOM ROW
Desktop:
LEFT | RIGHT
Mobile:
LEFT
RIGHT
===================================================== */
.lgc-bnn .teh-rw {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 0 !important;
}
/* =====================================================
MOBILE LEFT SECTION
===================================================== */
.lgc-bnn-lft {
/*
Override Bootstrap column sizing.
*/
flex: 0 0 auto;
width: 100%;
max-width: 100%;
/*
MOBILE IMAGE RATIO
402 × 313
313 / 402 × 100
= 77.86%
Therefore the left section has
EXACTLY the same height as the
mobile banner image.
*/
height: 77.86vw;
background: #202124;
}
/* =====================================================
MOBILE LEFT GRID LINE
LEFT SECTION = GREEN
===================================================== */
.lgc-bnn-lft > .phn_mb-teh-grd-line {
position: absolute;
/* background: #333637;
*/
transform: translateZ(0);
pointer-events: none;
z-index: 20;
}
/* =====================================================
MOBILE LEFT HORIZONTAL GRID LINE
===================================================== */
.lgc-bnn-lft > .phn_mb-teh-grd-hrz-1 {
top: 14%;
left: 0;
width: 100%;
height: 1px;
background: #333637;
}
/* =====================================================
MOBILE RIGHT SECTION
===================================================== */
.lgc-bnn-rg {
/*
Override Bootstrap column sizing.
*/
flex: 0 0 auto;
width: 100%;
max-width: 100%;
/*
EXACT SAME HEIGHT AS LEFT SECTION
402 × 313 ratio
*/
height: 77.86vw;
background: #ffffff;
/*
IMPORTANT:
The mobile grid is positioned
relative to THIS element.
*/
position: relative;
overflow: hidden;
}
/* =====================================================
HIDE DESKTOP IMAGE
===================================================== */
.lgc-bnn-rg .dek-img-part {
display: none;
}
/* =====================================================
SHOW MOBILE IMAGE
===================================================== */
.lgc-bnn-rg .mob-img-part {
display: block;
width: 100%;
height: 100%;
/*
Mobile image is 402 × 313.
*/
object-fit: cover;
object-position: center center;
}
/* =====================================================
MOBILE LEFT CONTENT
===================================================== */
.lgc-bnn-content {
position: absolute;
left: 5%;
top: 50%;
width: 90%;
transform: translateY(-50%);
}
/* =====================================================
MOBILE TITLE
===================================================== */
.lgc-bnn-title {
font-size: 7vw;
line-height: 1.05;
}
/* =====================================================
MOBILE STRONG TITLE
===================================================== */
.lgc-bnn-title strong {
margin-top: 0.12em;
}
/* =====================================================
MOBILE DESCRIPTION
===================================================== */
.lgc-bnn-description {
max-width: 85%;
margin-top: 1.2em;
font-size: 3vw;
line-height: 1.4;
}
/* =====================================================
IMPORTANT
COMPLETELY REMOVE THE DESKTOP GRID
FROM THE MOBILE VERSION.
===================================================== */
.bnn-teh-grd {
display: none;
}
/* =====================================================
=====================================================
MOBILE-ONLY GRID
=====================================================
This grid is NOT connected to the desktop grid.
It lives INSIDE:
.lgc-bnn-rg
Therefore:
left: 0% = left edge of mobile image
left: 100% = right edge of mobile image
top: 0% = top of mobile image
top: 100% = bottom of mobile image
=====================================================
===================================================== */
.phn_mb-bnn-teh-grd {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}
/* =====================================================
MOBILE GRID BASE
RIGHT SECTION = RED
===================================================== */
.phn_mb-teh-grd-line {
position: absolute;
background: #DCDCDC;
transform: translateZ(0);
}
/* =====================================================
MOBILE HORIZONTAL GRID LINE 1
RIGHT SECTION = RED
===================================================== */
.phn_mb-teh-grd-hrz-1 {
top: 14%;
left: 0;
width: 100%;
height: 1px;
background: #DCDCDC;
}
/* =====================================================
MOBILE HORIZONTAL GRID LINE 2
RIGHT SECTION = RED
===================================================== */
.phn_mb-teh-grd-hrz-2 {
top: 84%;
left: 0;
width: 100%;
height: 1px;
background: #DCDCDC;
}
/* =====================================================
MOBILE VERTICAL GRID LINE 1
RIGHT SECTION = RED
===================================================== */
.phn_mb-teh-grd-vrt-1 {
left: 11%;
top: 0;
width: 1px;
height: 100%;
background: #DCDCDC;
}
/* =====================================================
MOBILE VERTICAL GRID LINE 2
RIGHT SECTION = RED
===================================================== */
.phn_mb-teh-grd-vrt-2 {
left: 88.5%;
top: 0;
width: 1px;
height: 100%;
background: #DCDCDC;
}
/* =====================================================
MOBILE TURQUOISE SHAPE
Positioned relative to the MOBILE RIGHT
SECTION ONLY.
===================================================== */
.phn_mb-neon-sp {
position: absolute;
top: 14%;
left: 79%;
width: 9.5%;
height: 13%;
z-index: 10;
background: #00d9c7;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
}
}
/* =========================================================
=========================================================
VERY SMALL MOBILE
=========================================================
========================================================= */
@media (max-width: 480px) {
.lgc-bnn-lft {
/*
Keep exactly the same ratio.
*/
height: 77.86vw;
}
.lgc-bnn-rg {
/*
Keep exactly the same ratio.
*/
height: 77.86vw;
}
.lgc-bnn-title {
font-size: 7vw;
}
.lgc-bnn-description {
font-size: 3vw;
}
}
.led-desc{
color:#DCDCDC;
}
.led-secdsec{
background:#EFEFEF;
}
.led-sechead h2{
color:#333637;
}
#wwd-sec2 .led-seccont p{
color:#535659 !important;
}
/* =====================================================
MAIN TAM SECTION
===================================================== */
.tam-section {
position: relative;
width: 100%;
background: #1E2023;
overflow: hidden;
padding-top: 5%;
padding-bottom: 5%;
}
/* =====================================================
MAIN FRAME
===================================================== */
.tam-frame {
position: relative;
width: 100%;
background: #202223;
padding-right: 5%;
}
/* =====================================================
TOP RED HORIZONTAL LINE
===================================================== */
/*
.tam-frame-top-line {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0.35vw;
background: #333637;
z-index: 50;
}
*/
/* =====================================================
FULL WIDTH GREY LINE
===================================================== */
.ful-wd-gry-line {
position: relative;
width: 100vw;
height: 1px;
background: #333637;
margin-left: calc(50% - 50vw);
z-index: 50;
right: -2%;
}
/* =====================================================
LEFT GREY VERTICAL LINE
===================================================== */
.tam-frame-left-line {
position: absolute;
left: 5%;
top: -5%;
bottom: -5%;
width: 1px;
background: #333637;
z-index: 100;
pointer-events: none;
}
/* =====================================================
RIGHT GREY VERTICAL LINE
===================================================== */
.tam-frame-right-line {
position: absolute;
right: 5%;
top: -5%;
bottom: -5%;
width: 1px;
background: #333637;
z-index: 100;
pointer-events: none;
}
/* =====================================================
TAM BLOCK
===================================================== */
.tam-block {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
/* =====================================================
TAM HEADING
===================================================== */
.tam-heading {
position: relative;
width: 100%;
min-height: 6vw;
background: #1E2023;
padding-left: 7%;
padding-top: 2.2%;
padding-bottom: 2.2%;
display: flex;
align-items: center;
/*
* Keeps the triangle attached to the heading
* and prevents it from overflowing.
*/
overflow: hidden;
}
.tam-heading-image {
position: absolute;
left: 0;
top: 0;
width: 5.3%;
height: 100%;
display: block;
background: #00c7bd;
/*
* Proper right triangle.
*
* Top-left = 0 0
* Top-right = 100% 0
* Bottom-right = 100% 100%
*/
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
-webkit-clip-path: polygon(
0 0,
100% 0,
100% 100%
);
z-index: 1;
pointer-events: none;
}
/* =====================================================
HEADING TEXT
===================================================== */
.tam-heading-title {
position: relative;
z-index: 5;
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 100;
line-height: 1.2;
white-space: nowrap;
}
.tam-heading-title strong{
font-weight: 700;
}
/* =====================================================
TAM MEMBERS ROW
===================================================== */
.tam-membs {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
padding-right: 1%;
padding-left: 6.5%;
padding-top: 1.5%;
padding-bottom: 1.5%;
display: flex !important;
flex-wrap: wrap !important;
}
/* =====================================================
MEMBER CARD COLUMN
DESKTOP = 5 CARDS PER ROW
===================================================== */
.tam-memb-col {
display: block;
width: 20% !important;
max-width: 20% !important;
padding-left: 0.5%;
padding-right: 0.5%;
margin-bottom: 1.5%;
flex: 0 0 20% !important;
}
/* =====================================================
MEMBER CARD
===================================================== */
.tam-memb {
position: relative;
display: block;
width: 100%;
overflow: visible;
text-decoration: none;
cursor: default;
}
/* =====================================================
MEMBER IMAGE CONTAINER
===================================================== */
.memb-image {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #999999;
overflow: hidden;
z-index: 1;
}
/* =====================================================
TAM MEMBER IMAGE
===================================================== */
.memb-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: #999999;
}
/* =====================================================
MEMBER INFO
===================================================== */
.memb-info {
position: relative;
width: 100%;
min-height: 90px;
padding: 22px 20px;
}
.memb-info:hover {
background: #303233;
}
/* =====================================================
MEMBER NAME
===================================================== */
.memb-name {
position: relative;
z-index: 1;
color: #EFEFEF;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================================================
DESIGNATION
===================================================== */
.memb-designation {
position: relative;
z-index: 1;
margin-top: 3%;
color: #EFEFEF;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =====================================================
HOVER ACTION BAR
===================================================== */
.memb-hover-actions {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 47px;
display: flex;
align-items: stretch;
background: #00c7bd;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
z-index: 20;
}
/* =====================================================
HOVER
===================================================== */
.tam-memb:hover .memb-hover-actions {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* =====================================================
VIEW FULL PROFILE
===================================================== */
.memb-view-profile {
flex: 1;
display: flex;
align-items: center;
padding: 0 22px;
background: #00c7bd;
color: #111;
font-size: 11px;
font-weight: 700;
text-decoration: none;
border-right: 1px solid rgba(0, 0, 0, 0.35);
}
.memb-view-profile:hover {
background: #00b8ae;
color: #111;
}
/* =====================================================
LINKEDIN
===================================================== */
.memb-linkedin {
width: 46px;
display: flex;
align-items: center;
justify-content: center;
background: #00c7bd;
text-decoration: none;
}
.memb-linkedin:hover {
background: #00b8ae;
}
/* =====================================================
TEMPORARY LINKEDIN ICON
===================================================== */
.lnkd-linkedin-placeholder {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #111;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
/* =====================================================
MOBILE SLIDER CONTROLS
Hidden on desktop
===================================================== */
.mbl-tam-controls {
display: none;
}
/* =====================================================
TABLET
===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
.tam-heading {
min-height: 7vw;
}
.tam-heading-title {
font-size: 1.7vw;
}
/*
* Keep triangle proportional on tablet.
*/
.tam-heading-image {
width: 5.5%;
}
.tam-memb-col {
width: 20% !important;
max-width: 20% !important;
flex: 0 0 20% !important;
}
.memb-name {
font-size: 1vw;
}
.memb-designation {
font-size: 0.65vw;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 767px) {
/* =================================================
MAIN FRAME
================================================= */
.tam-frame {
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding-right: 0;
overflow: visible;
}
/* =================================================
MOBILE - FIRST SECTION TOP PINK GRID LINE
================================================= */
.tam-frame {
position: relative;
padding-top: 11px;
}
.tam-frame::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 1px;
transform: translateX(-50%);
background: #333637;
z-index: 100;
}
/* =================================================
REMOVE MOBILE FRAME LINES
================================================= */
.tam-frame-top-line,
.tam-frame-left-line,
.tam-frame-right-line,
.ful-wd-gry-line {
display: none !important;
}
/* =================================================
TAM BLOCK
================================================= */
.tam-block {
width: 100%;
overflow: hidden;
margin-bottom: 30px;
}
/* =================================================
HEADING
================================================= */
.tam-heading {
min-height: 13vw;
padding-left: 2%;
padding-top: 3.5%;
padding-bottom: 3.5%;
overflow: hidden;
}
.tam-heading-title {
font-size: 24px;
}
/* =================================================
MOBILE CSS TRIANGLE
================================================= */
.tam-heading-image {
left: 0;
top: 0;
width: 7%;
height: 100%;
background: #00c7bd;
clip-path: polygon(
0 0,
100% 0,
100% 100%
);
-webkit-clip-path: polygon(
0 0,
100% 0,
100% 100%
);
z-index: 1;
}
/* =================================================
MOBILE TAM MEMBERS SLIDER
================================================= */
.tam-membs {
display: flex !important;
flex-wrap: nowrap !important;
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 1.5%;
padding-bottom: 1.5%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tam-membs::-webkit-scrollbar {
display: none;
}
/* =================================================
ONE CARD AT A TIME
================================================= */
.tam-memb-col {
display: block;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding-left: 1%;
padding-right: 1%;
margin-bottom: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* =================================================
CARD
================================================= */
.tam-memb {
width: 100%;
display: block;
}
/* =================================================
MEMBER IMAGE
================================================= */
.memb-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.memb-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =================================================
MEMBER INFO
================================================= */
.memb-info {
background: #333637;
width: 100%;
min-height: 90px;
padding: 22px 20px;
}
/* =================================================
MEMBER TEXT
================================================= */
.memb-name {
font-size: 4vw;
}
.memb-designation {
font-size: 3vw;
margin-top: 3%;
}
/* =================================================
MOBILE SLIDER CONTROLS
================================================= */
.mbl-tam-controls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 12px;
padding: 0 1%;
}
/* =================================================
DOTS
================================================= */
.mbl-slider-dots {
display: flex;
align-items: center;
gap: 5px;
}
.mbl-slider-dot {
display: block;
width: 10px;
height: 10px;
padding: 0;
margin: 0;
border: 0;
/* border-radius: 50%; */
background: #DCDCDC;
cursor: pointer;
}
.mbl-slider-dot.active {
background: #00C7B7;
}
/* =================================================
ARROWS
================================================= */
.mbl-slider-arrows {
display: flex;
align-items: center;
gap: 7px;
}
.mbl-slider-arrows button {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border: 0;
background: #333637;
color: #ffffff;
font-size: 17px;
line-height: 1;
cursor: pointer;
transition:
background 0.2s ease,
opacity 0.2s ease;
}
.mbl-slider-arrows .mbl-slider-next {
background: #00c7bd;
color: #111111;
}
.mbl-slider-arrows button:disabled {
opacity: 0.35;
cursor: default;
}
/* =================================================
PREVENT MEMBER INFO HOVER BACKGROUND
ON TOUCH DEVICES
================================================= */
.memb-info:hover {
background: transparent;
}
}
/* =========================================================
TAM MEMBER POPUP
========================================================= */
.tam-modal {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.65);
z-index: 99999;
}
/* =========================================================
SHOW POPUP
========================================================= */
.tam-modal:target {
display: flex;
}
/* =========================================================
POPUP BOX
========================================================= */
.tam-modal-box {
position: relative;
width: 100%;
max-width: 1160px;
box-sizing: border-box;
padding: 28px 40px 26px;
background: #333637;
color: #ffffff;
box-shadow:
0 15px 50px rgba(0, 0, 0, 0.5);
max-height: calc(100vh - 40px);
overflow-y: auto;
}
/* =========================================================
CLOSE BUTTON
========================================================= */
.tam-modal-close {
position: absolute;
top: 25px;
right: 25px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #555555;
text-decoration: none;
font-size: 17px;
font-weight: 400;
line-height: 1;
cursor: pointer;
}
/* =========================================================
POPUP TITLE
========================================================= */
.tam-modal-box h2 {
margin: 0;
padding-right: 55px;
color: #ffffff;
font-size: 2rem;
line-height: 1.3;
font-weight: 900;
padding-bottom: 30px;
}
/* =========================================================
POPUP PARAGRAPHS
========================================================= */
.tam-modal-box > p {
margin: 9px 0 0;
max-width: 1080px;
color: #FFFFFF;
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
TWO COLUMNS
========================================================= */
.tam-modal-columns {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 80px;
margin-top: 30px;
}
/* =========================================================
COLUMN HEADING
========================================================= */
.tam-modal-column h3 {
margin: 0 0 7px;
color: #85E6C5;
font-size: 18px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
COLUMN LIST
========================================================= */
.tam-modal-column ul {
margin: 0;
padding-left: 14px;
}
.tam-modal-column li {
margin: 0 0 3px;
color: #FFFFFF;
font-size: 14px;
line-height: 1.35;
}
/* =========================================================
MOBILE POPUP
========================================================= */
@media (max-width: 767px) {
.tam-modal {
padding: 12px;
}
.tam-modal-box {
max-height: calc(100vh - 24px);
padding: 24px 20px 22px;
}
.tam-modal-close {
top: 17px;
right: 17px;
}
.tam-modal-box h2 {
font-size: 18px;
padding-right: 40px;
}
.tam-modal-box > p {
font-size: 10px;
line-height: 1.5;
}
.tam-modal-columns {
grid-template-columns: 1fr;
row-gap: 18px;
margin-top: 18px;
}
}
/* =========================================================
SMALL MOBILE POPUP
========================================================= */
@media (max-width: 480px) {
.tam-modal-box {
padding: 22px 16px 20px;
}
.tam-modal-box h2 {
font-size: 16px;
}
.tam-modal-box > p {
font-size: 9px;
}
.tam-modal-column h3 {
font-size: 11px;
}
.tam-modal-column li {
font-size: 9px;
}
}
/* =====================================================
MOBILE - ALWAYS SHOW PROFILE ACTION BAR
===================================================== */
@media (max-width: 767px) {
.tam-heading-image{
display: none;
}
.memb-hover-actions {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
}
.wpcf7-spinner{
display: none;
}
/* Functionality partner */
.part-secondary-icon {
border: 1px solid #00c7b7;
background: #00c7b7;
padding: 15px 20px;
color: #333637;
font-weight: 600;
font-size: 16px;
font-family: Inter-Regular;
display: inline-block;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.part-post-arr-wrap {
position: relative;
float: right;
}
.part-prev {
transform: rotate(180deg);
}
.part-slider-dots{
display:flex;
justify-content:left;
gap:10px;
margin-top:30px;
}
.part-prev,
.part-next{
cursor:pointer;
position:relative;
z-index:9999;
}
.part-slider-dots {
display: flex;
justify-content: left;
gap: 10px;
margin-top: 30px;
}
.part-slider-dot {
width: 12px;
height: 12px;
display: block;
background: #DCDCDC;
cursor: pointer;
transition: 0.3s;
}
.part-slider{
display:flex;
flex-wrap:nowrap;
transition:transform .4s ease;
will-change:transform;
}
.part-slider-dots.active{
background:#00C7B7;
}
#cont-bttn{
background: #00c7b7;
color: #1e2023;
cursor: pointer;
font-size: 14px;
line-height: 13px;
border: none;
padding: 10px 15px;
font-weight: 400;
display: inline-block;
position: relative;
text-shadow: none;
}
.cont-subb{
text-align:end;
}
/* =========================================================
MOBILE - CONTACT LEFT COLUMN
========================================================= */
@media (max-width: 767px) {
.cont-privacy-check input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px;
max-width: 16px;
padding: 0;
margin: 0;
flex: 0 0 16px;
}
.cont-privacy-check label {
display: flex;
align-items: center;
gap: 8px;
}
.cont-form-row {
grid-template-columns: none !important;
}
/* LEFT COLUMN */
.contact-left {
width: 100%;
padding: 0 18px;
box-sizing: border-box;
background: #202224;
min-height: 0 !important;
height: auto !important;
}
/* Remove vertical lines */
.contact-left .v-line {
display: none;
}
/* Remove horizontal dividers */
.contact-left .divider {
display: none;
}
/* Remove corner arrow */
.contact-left .corner-shape {
display: none;
}
/* Heading + paragraph */
.contact-content {
width: 100%;
padding: 0 !important;
margin: 0 !important;
}
.contact-content h2 {
margin: 0 0 24px 0;
}
.contact-para {
margin: 0;
}
/* =====================================================
CONTACT INFORMATION BOX
===================================================== */
/* Titles */
.contact-info small {
display: block;
margin: 0 0 9px 0;
padding: 0;
font-size: 14px;
line-height: 1.4;
}
/* Email */
.contact-info .cont-eml {
display: block;
margin: 0 0 20px 0;
padding: 0;
font-size: 16px;
line-height: 1.4;
}
/* Remove the
spacing from desktop HTML */
.contact-info br {
display: none;
}
/* No extra space after the final email */
.contact-info .cont-eml:last-child {
margin-bottom: 0;
}
}
/* =========================================================
CONTACT SECTION - MOBILE
========================================================= */
@media (max-width: 767px) {
/* =====================================================
MAIN CONTAINER
===================================================== */
.contact-section {
display: flex;
flex-direction: column;
width: 100%;
min-height: auto;
background: #202224;
overflow: hidden;
box-sizing: border-box;
padding-top:30px;
}
/* =====================================================
LEFT COLUMN
===================================================== */
/* .contact-left {
position: relative;
width: 100%;
flex: none;
padding: 40px 18px 0;
margin: 0;
box-sizing: border-box;
background: #202224;
}
*/
/* REMOVE ALL DESKTOP DECORATIVE LINES */
.contact-left .v-line,
.contact-left .v-line.left,
.contact-left .v-line.right,
.contact-left::before,
.contact-left::after {
display: none !important;
content: none !important;
}
/* REMOVE HORIZONTAL DIVIDERS */
.contact-left .divider {
display: none !important;
}
/* REMOVE CORNER IMAGE */
.contact-left .corner-shape {
display: none !important;
}
/* =====================================================
HEADING + DESCRIPTION
===================================================== */
.contact-content {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contact-content h2 {
margin: 0 0 24px 0;
padding: 0;
}
.contact-para {
margin: 0;
padding: 0;
}
/* =====================================================
GENERAL INQUIRIES / CAREERS BOX
===================================================== */
.contact-info {
position: relative;
width: 100%;
margin: 28px 0 0 0;
padding: 18px 17px !important;
box-sizing: border-box;
border: 1px solid #44474a;
background: transparent;
}
.contact-info small {
display: block;
margin: 0 0 8px 0;
padding: 0;
}
.contact-info .cont-eml {
display: block;
margin: 0 0 20px 0;
padding: 0;
}
/* Remove HTML
*/
.contact-info br {
display: none !important;
}
.contact-info .cont-eml:last-child {
margin-bottom: 0;
}
/* =====================================================
RIGHT COLUMN / FORM
===================================================== */
.contact-right {
position: relative;
width: 100%;
flex: none;
/* VERY SMALL GAP FROM ENQUIRY BOX */
margin: 14px 0 0 0;
box-sizing: border-box;
background: #202224;
/* REMOVE ANY DESKTOP BORDERS/LINES */
border: none !important;
}
/* REMOVE VERTICAL LINES THAT MAY BE
ATTACHED TO THE FORM */
.contact-right::before,
.contact-right::after,
.cont-form-wrapper::before,
.cont-form-wrapper::after {
display: none !important;
content: none !important;
border: none !important;
}
/* =====================================================
FORM WRAPPER
===================================================== */
.cont-form-wrapper {
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border: none !important;
background: transparent;
}
}
.cont-form-group{
padding-bottom: 5px;
}
.cont-form-group p{
margin-bottom: 5px;
}
.cont-contact-form {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 45px 45px 44px;
background: #ffffff;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/* ==============================
FORM ROW
================================= */
.cont-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
margin-bottom: 12px;
}
/* ==============================
FORM GROUP
================================= */
.cont-form-group .cont-form-group.full-width {
width: 100%;
}
/* ==============================
LABEL
================================= */
.cont-form-group label {
/* display: block; */
color: #555555;
font-size: 14px;
line-height: 1.2;
font-weight: 400;
}
.cont-form-group label span {
color: #777777;
}
/* ==============================
INPUT
================================= */
.cont-form-group input,
.cont-form-group select,
.cont-form-group textarea {
width: 100%;
border: none;
outline: none;
background: #eeeeee;
color: #555555;
font-size: 12px;
font-weight: 400;
box-sizing: border-box;
transition: background 0.2s ease;
}
/* Input */
.cont-form-group input {
height: 25px;
padding: 0 12px;
}
/* Placeholder */
.cont-form-group input::placeholder,
.cont-form-group textarea::placeholder {
color: #a5a5a5;
opacity: 1;
}
/* Focus */
.cont-form-group input:focus,
.cont-form-group select:focus,
.cont-form-group textarea:focus {
background: #e8e8e8;
}
/* ==============================
SELECT
================================= */
.cont-select-wrapper {
position: relative;
width: 100%;
}
.cont-form-group select {
height: 27px;
padding: 0 30px 0 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
/* Custom arrow */
.cont-select-wrapper::after {
content: "";
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #555555;
pointer-events: none;
}
.cont-privacy-text {
margin: 0;
color: #535659;
font-size: 12px;
font-weight: 400;
}
.cont-privacy-check {
margin-top: 9px;
}
.cont-privacy-check label {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.cont-privacy-check input {
width: 11px;
height: 11px;
margin: 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
border: 1px solid #555555;
background: #ffffff;
cursor: pointer;
position: relative;
}
.cont-privacy-check input:checked::after {
content: "✓";
position: absolute;
left: 1px;
top: -3px;
font-size: 12px;
color: #333333;
}
.cont-privacy-check span {
color: #535659;
font-size: 12px;
}
.contact-section{
display:flex;
width:100%;
min-height:850px;
background:#202224;
}
.cont-form-wrapper::before{
content:"";
position:absolute;
left:0;
top:-100%;
bottom:-100%;
width:1px;
background:#535659;
}
.cont-form-wrapper::after{
content:"";
position:absolute;
right:0;
top:-100%;
bottom:-100%;
width:1px;
background:#535659;
}
.contact-left{
/* width:38%; */
flex:0 0 38%;
min-height:850px;
background:#202224;
position:relative;
overflow:visible;
}
/* Vertical Lines */
.v-line{
position:absolute;
top:0;
bottom:0;
width:1px;
background:#3b3d40;
}
.v-line.left{
left:38px;
}
.v-line.right{
right:38px;
}
.contact-content{
padding:85px 55px 55px;
}
.contact-content h2{
margin:0;
color:#FFFFFF;
}
.contact-para{
color:#DCDCDC;
font-weight:400;
}
.divider {
position: absolute;
left: 38px;
width: calc(43.22vw - 42px);
height: 1.5px;
background: #3b3d40;
z-index: 10;
}
.contact-info{
padding:45px 55px;
}
.contact-info small{
display:block;
color:#9D9EA0;
font-size:14px;
font-weight:400;
margin-bottom:12px;
}
.cont-eml{
color:#FFFFFF;
font-size:20px;
font-weight:400;
}
.corner-shape{
position:absolute;
right:38px;
width:170px;
}
.contact-right{
/* flex:0 0 58%; */
min-height:850px;
background:#202224;
position:relative;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
/* Vertical Lines */
.contact-right .v-line{
position:absolute;
top:0;
bottom:0;
width:1px;
background:#3b3d40;
}
.contact-right .left{
left:38px;
}
.contact-right .right{
right:38px;
}
/* White Form */
.cont-form-wrapper{
width:84%;
background:#fff;
padding:45px;
position:relative;
z-index:2;
margin-top:10%;
margin-bottom:10%
}
.cont-privacy{
font-size:11px;
color:#666;
line-height:1.6;
margin:18px 0;
}
.cont-bottom{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:20px;
}
.cont-check{
font-size:12px;
color:#555;
}
.loc-locations-section{
position:relative;
padding:90px 0;
overflow:hidden;
}
.loc-locations-section{
background-image:url(/wp-content/uploads/2026/08/BG_Worldmap.png);
background-repeat:no-repeat;
background-position:center center;
/* padding-left: 5%;
padding-right: 5%; */
}
.loc-locations-container{
position:relative;
max-width:90%;
margin:auto;
/* padding:0 60px; */
}
.loc-locations-container::before{
content:"";
position:absolute;
left:0;
top:-90px;
bottom:-90px;
width:1px;
background:#DCDCDC;
}
.loc-locations-container::after{
content:"";
position:absolute;
right:0;
top:-90px;
bottom:-90px;
width:1px;
background:#DCDCDC;
}
.loc-section-heading{
padding:0 0 20px;
border-bottom: 1px solid #dcdcdc;
}
.loc-section-heading h2{
line-height:1.2;
color:#1f1f1f;
}
.loc-section-heading h2 span{
font-weight:700;
}
.loc-location-tabs{
display:grid;
grid-template-columns:repeat(4,1fr);
/* border-top:1px solid #DCDCDC; */
border-bottom:1px solid #DCDCDC;
margin-bottom: 45px;
}
.loc-location-tabs .loc-tab{
position:relative;
height:72px;
border:none;
border-right:1px solid #DCDCDC;
background:#fff;
cursor:pointer;
font-size:17px;
font-weight:400;
color:#333637;
transition:.3s;
}
.loc-location-tabs .loc-tab:first-child {
border-left: 1px solid #DCDCDC; /* Change color/thickness as needed */
}
.loc-location-tabs .loc-tab:last-child{
border-right:none;
}
.loc-location-tabs .active{
font-weight: 700;
color:#1E2023;
background: #EFEFEF;
border-bottom: 1px solid #00C7B7;
}
/* folded corner */
.loc-location-tabs .active::after{
content:"";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-top:18px solid #00C7B7;
border-left:18px solid transparent;
}
/*GRID*/
.loc-locations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2%;
align-items: stretch;
position: relative;
}
/* Full-width top and bottom lines */
.loc-locations-grid::before,
.loc-locations-grid::after {
content: "";
position: absolute;
left: 50%;
width: 100vw;
height: 0.5px;
background: #DCDCDC;
transform: translateX(-50%);
}
.loc-locations-grid::before {
top: 0;
}
.loc-locations-grid::after {
bottom: 0;
}
#loc-id-grid article {
margin-bottom:0px;
padding-bottom:0px;
}
.loc-location-card{
border: 1px solid #DCDCDC;
}
.loc-location-card:nth-child(3n){
border-right:none;
}
/* EMPTY CARD*/
.empty-card{
background:transparent;
}
@media(max-width:767px){
.loc-locations-grid::before,
.loc-locations-grid::after {
display: none;
}
.loc-locations-section {
background: none;
padding: 0;
}
.loc-locations-container{
padding:20px;
}
/* .loc-location-tabs{
grid-template-columns:1fr;
} */
.loc-location-tabs .loc-tab{
border-right:none;
border-bottom:1px solid #DCDCDC;
}
.loc-locations-grid{
grid-template-columns:1fr;
}
.section-heading{
padding:0 20px 40px;
}
.section-heading h2{
font-size:34px;
}
}
.loc-location-card{
display:flex;
flex-direction:column;
background:#fff;
transition:.35s ease;
min-height:520px;
}
.loc-location-image{
width:100%;
/* height:235px;
overflow:hidden; */
}
.loc-location-image img{
width:100%;
height:100%;
object-fit:contain;
transition:0.4s ease;
}
.loc-location-card:hover img{
transform:scale(1.05);
}
.loc-location-content {
display: grid;
grid-template-rows: auto 100px auto;
flex: 1;
padding: 34px;
}
.loc-location-content .loc-names {
margin: 0;
font-weight: 400;
}
.loc-location-content p {
margin: 0;
color: #535659;
line-height: 1.8;
}
.loc-location-content .loc-phone {
margin-top: 30px;
}
#loc-id-grid .loc-names{
font-weight: 400;
margin-bottom: 15px;
}
.loc-location-content p{
color:#535659;
}
.loc-location-card{
overflow:hidden;
}
@media(min-width:1200px){
.loc-location-card{
min-height:350px;
}
.loc-location-image{
height:100%;
}
}
.part-desc{
background:#1E2023;
}
.partners-section{
padding-left:5%;
padding-right:5%;
}
.partners-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
border-left:1px solid #DCDCDC;
}
.partner-card{
position:relative;
padding:16px;
min-height:235px;
background:#fff;
border-right:1px solid #DCDCDC;
border-bottom:1px solid #DCDCDC;
display:flex;
flex-direction:column;
}
.partner-card .only-arrow-wrap{
justify-content:left;
}
.partner-content{
margin:0;
line-height:1.6;
flex:1;
height: 220px;
font-size:15px;
font-family: 'Inter';
font-weight: 400;
color:#535659;
}
.logo-wrapper{
margin:0 -16px 16px;
padding:0 16px 16px;
border-bottom:1px solid #DCDCDC;
}
.partner-card .logo{
height:42px;
display:flex;
align-items:center;
/* margin-bottom:18px; */
}
.partner-card .logo img{
max-width:130px;
max-height:34px;
object-fit:contain;
}
/* .partner-card p{
margin:0;
line-height:1.6;
flex:1;
} */
.partner-card .corner{
position:absolute;
right:0;
top:0;
width:0;
height:0;
border-top:18px solid #00C7B7;
border-left:18px solid transparent;
}
.brr-line-top{
border-top: 1px solid #DCDCDC;
}
.brr-line-bottom{
border-bottom: 1px solid #DCDCDC;
}
/* =========================================================
LOCATION DROPDOWN - MOBILE
========================================================= */
@media (max-width: 767px) {
.loc-location-tabs {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 52px;
max-height: 52px;
overflow: hidden;
background: #eeeeee;
border: none;
z-index: 20;
transition: max-height 0.3s ease;
}
/* Dropdown OPEN */
.loc-location-tabs.open {
max-height: 500px;
height: auto;
overflow: visible;
}
/* =====================================================
ALL TAB BUTTONS
===================================================== */
.loc-location-tabs .loc-tab {
position: relative;
flex: none;
width: 100%;
height: 52px;
min-height: 52px;
display: flex;
align-items: center;
padding: 0 20px;
background: #eeeeee;
border: none;
font-size: 12px;
font-weight: 600;
color: #333;
text-align: left;
cursor: pointer;
}
/* =====================================================
CURRENT / ACTIVE TAB
===================================================== */
.loc-location-tabs:not(.open) .loc-tab {
display: none;
}
.loc-location-tabs:not(.open) .loc-tab.active {
display: flex;
}
/* =====================================================
OPEN DROPDOWN OPTIONS
===================================================== */
.loc-location-tabs.open .loc-tab {
display: flex;
background: #eeeeee;
border-bottom: 1px solid #d5d5d5;
}
.loc-location-tabs.open .loc-tab:hover {
background: #e5e5e5;
}
/* =====================================================
ARROW
===================================================== */
.loc-location-tabs::after {
content: "";
position: absolute;
right: 20px;
top: 20px;
width: 7px;
height: 7px;
border-right: 1.5px solid #333;
border-bottom: 1.5px solid #333;
transform: rotate(45deg);
pointer-events: none;
transition: transform 0.3s ease;
}
/* Arrow when open */
.loc-location-tabs.open::after {
top: 23px;
transform: rotate(225deg);
}
/* =====================================================
TURQUOISE CORNER - LIKE YOUR DESIGN
===================================================== */
.loc-location-tabs::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 15px;
background: #00c7c7;
clip-path: polygon(0 0, 100% 0, 100% 100%);
z-index: 2;
pointer-events: none;
}
}
@media (max-width: 767px) {
.loc-locations-grid {
display: grid;
grid-template-columns: 1fr;
height: auto;
min-height: 0;
overflow: visible;
}
.loc-location-card {
height: auto;
min-height: 0;
overflow: visible;
}
}
@media (max-width: 767px) {
.partners-section {
overflow: hidden;
}
.partners-slider-mobile {
width: 100%;
overflow: hidden;
position: relative;
}
/* =========================================
MOBILE TRACK
5 cards × 300px = 1500px
========================================= */
.partners-grid {
display: flex !important;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
height: 1700px;
transition: transform 0.4s ease;
will-change: transform;
}
/* =========================================
MOBILE CARD
========================================= */
.partners-grid .partner-card {
flex: 0 0 340px !important;
width: 100% !important;
height: 340px !important;
min-height: 340px !important;
max-height: 340px !important;
margin: 0 !important;
padding: 16px !important;
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
position: relative;
border-left: 1.5px solid #dcdcdc;
}
/* =========================================
LOGO
========================================= */
.partners-grid .partner-card .logo-wrapper {
margin: 0 -16px 16px !important;
padding: 0 16px 16px !important;
flex: 0 0 auto;
}
.partners-grid .partner-card .logo {
height: 42px;
display: flex;
align-items: center;
}
/* =========================================
CONTENT
========================================= */
.partners-grid .partner-card .partner-content {
height: auto !important;
flex: 1 1 auto !important;
min-height: 0;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
line-height: 1.6;
}
/* =========================================
ARROW
========================================= */
.partners-grid .partner-card .only-arrow-wrap {
margin-top: auto !important;
padding-top: 15px;
flex: 0 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
.partners-grid .partner-card .only-arrow {
width: 35px;
height: 20px;
display: block;
}
/* =========================================
DOTS
========================================= */
.part-slider-dots {
display: flex;
justify-content: left;
gap: 10px;
margin-top: 30px;
}
.part-slider-dot {
width: 12px;
height: 12px;
display: block;
background: #DCDCDC;
cursor: pointer;
transition: 0.3s;
}
.part-slider-dot.active {
background: #00C7B7;
}
}