/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 21 2026 | 01:36:43 */
/********** Page Banner **********/

#bg-container {
position: relative;
width: 100%;
overflow: hidden;
}

#bg-shell {
position: relative;
display: flex;
align-items: top;
width: 100%;
height: 100%;
padding: 0 6%;
background-image: url(/wp-content/uploads/about-us-banner.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

/********** Main Section **********/

.intro-wrapper {
width: 100%;
margin: 30px 0 0 0;
color: var(--gray2);
}


/********** Global Rankings Landscape Flip-Card Section **********/

#card-section {
margin: 40px 0 30px 0;
}

.card-wrapper {
position: relative;
flex-basis: 28%;
height: 250px;
perspective: 120vw;
}

.back-card {
position: absolute;
top: 0;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 25px;
margin: 0;
background-color: var(--brandBlue);
transform: rotateY(-180deg);
border: 2px solid var(--white);
border-radius: 4px;
box-shadow: 4px 4px 10px 6px var(--blackTranslucent);
backface-visibility: hidden;
}

.card {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 6px solid var(--burgundy1);
border-radius: 10px;
transform-style: preserve-3d;
transform-origin: right center;
transition: transform 0.8s ease;
}

.card-bg-shell {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/wp-content/uploads/panel-background.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
}

.card-desc {
position: relative;
width: 100%;
line-height: 22px;
color: var(--white);
font-size: 18px;
text-align: center;
text-shadow: 2px 2px 4px var(--black);
opacity: 0;
transition: opacity 0.5s ease 0.5s;
}

#card-holder {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 40px;
}

.card-icon {
height: 80px;
margin-bottom: 30px;
}

.card-icon img {
height: 80px;
}

.card-label {
line-height: 22px;
color: var(--gray4);
font-size: 20px;
}

.content-container {
width: 100%;
}

.front-card {
position: absolute;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 20px;
margin: 0;
text-align: center;
background-color: var(--lightBlue);
box-shadow: 4px 4px 10px 6px var(--blackTranslucent);
border: 2px solid var(--white);
border-radius: 4px;
}

.card-cover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 10;
}

/********** GRL Banner **********/

.grl-banner-wrapper {
position: relative;
box-shadow: 0 0 30px 0 black;
}

.grl-banner {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 360px;
position: relative;
padding: 20px;
margin-top: 40px;
background-image: url(/wp-content/uploads/panel-background-12.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 0 3px var(--burgundy1);
border: 2px solid white;
border-radius: 6px;
}

.grl-banner-content-container {
box-sizing: border-box;
color: var(--white);
text-align: center;
}

.grl-banner-label {
box-sizing: border-box;
flex-basis: 100%;
font-size: 36px;
line-height: 40px;
color: var(--white);
text-align: center;
text-shadow: 1.5px 1.5px 0 black;
}


/********** Responsive Styling **********/

@media (min-width: 2500.01px) {

}

@media (min-width: 1900.01px) and (max-width: 2500px) {
}

@media (min-width: 1500.01px) and (max-width: 1900px) {

}

@media (min-width: 1900.01px) {
}

@media (min-width: 1365.01px) and (max-width: 1900px) {
}

@media (min-width: 1200.01px) {

}

@media (min-width: 930.01px) and (max-width: 1200px) {
}

@media (max-width: 930px) {

}

@media (max-width: 680px) {
}

@media (min-width: 900.01px) and (max-width: 1080px) {
}

@media (min-width: 430.01px) and (max-width: 900px) {
}

@media (max-width: 430px) {

}