/* ============================================================================
   DYNAMIC CSS GENERATOR
   Generated: 2026-06-07 05:12:17   
   Custom CSS classes from cms_css database table
   This file is loaded by CKEditor and front-end for dynamic styling
   Access via: /dynamic.css
   ============================================================================ */

/* ============================================================================
   CUSTOM CSS CLASSES
   Managed via Admin > CSS Class Library
   ============================================================================ */

/* .networkBg */

.networkBg {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/16x9/AdobeStock_223255040.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
min-height: 50vh;
width: 90%;
min-width: 90%;
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space6);
}
@media (max-width: 768px) {
.networkBg{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.networkBg{
min-height: 70vh;
}}


/* .twoColumnGrid */

.twoColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.twoColumnGrid {
 grid-template-columns: 1fr;
}
}


/* .coffeeBackground */

.coffeeBackground {
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
background-image: url(/media/16x9/coffee_meeting.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
padding: 16px;
width: 90%;
max-width: 1920px;
margin: 0 auto;
margin-bottom: 16px;
border-radius: 16px;
}


/* .officeBackground */

.officeBackground {
background-image: linear-gradient(hsla(var(--White), 0), hsla(var(--White), 0.5)), url(/media/16x9/stacy-shona-2024-banner-3_1920x1080.jpg) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
min-height: 50vh;
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
width: 90%;
max-width: 1920px;
margin: 0 auto;
border-radius: 16px;
padding: 16px;
margin-bottom: var(--Space6);
}


/* .blurredBGFeature */

.blurredBGFeature {
    background: hsla(var(--White), 0.5);
    backdrop-filter: blur(10px);
    width: 50%;
    border-radius: var(--RadiusLG);
    padding: var(--Space6);
    box-shadow: var(--ShadowXL);
    margin-bottom: 16px;
}

.blurredBGFeature h2 {
margin-top: 0;
}
@media (max-width: 768px) {
    .blurredBGFeature {
        width: 100%;
        padding: var(--Space4);
    }
}


/* .personalizedNetworking */

.personalizedNetworking {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/16x9/AdobeStock_317626874.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
min-height: 50vh;
width: 90%;
min-width: 90%;
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space6);
}

@media (max-width: 768px) {
.personalizedNetworking {
 min-height: 90vh;}
}
@media (min-width: 1925px) {
.personalizedNetworking {
min-height: 70vh;}
}


/* .twoThirdsLeft */

.twoThirdsLeft {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: var(--Space4);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsLeft {
        grid-template-columns: 1fr;
padding: 0;
      }
    }


/* .targettedShortlistBG */

.targettedShortlistBG {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/16x9/office_meeting2_destop0.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
height: 50vh;
min-height: 600px;
width: 90%;
min-width: 90%;
border-radius: var(--Radius2XL);
display: flex;
    align-items: flex-start; 
    justify-content: flex-start;
    padding: var(--Space6);
margin: 0 auto;
margin-bottom: var(--Space6);
}

@media (max-width: 768px) {
.targettedShortlistBG {
 min-height: 90vh;}
}
@media (min-width: 1925px) {
.targettedShortlistBG {
min-height: 800px;}
}


/* .comprehensiveAdvertising */

.comprehensiveAdvertising {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/16x9/AdobeStock_521125099.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
height: 50vh;
min-height: 600px;
width: 90%;
min-width: 90%;
border-radius: var(--Radius2XL);
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
margin: 0 auto;
margin-bottom: var(--Space6);
}
@media (max-width: 768px) {
.comprehensiveAdvertising {
 min-height: 90vh;}
}
@media (min-width: 1925px) {
.comprehensiveAdvertising {
min-height: 800px;}
}


/* .stacyProfile, .shonaProfile */

.stacyProfile, .shonaProfile {
position: relative;
    background: linear-gradient(
        to right,
        hsla(var(--ColorBrand4Light), 0.75) 0%,
        hsla(var(--ColorBrand4Dark), 0.75) 100%
    );
    backdrop-filter: blur(8px);
    width: 90%;
    padding-left: var(--Space4);
padding-top: var(--Space4);
padding-right: var(--Space4);
padding-bottom: var(--Space4);
    border-radius: 16px;
    box-shadow: var(--ShadowXL);
    min-height: 35vh;
    margin: 0 auto var(--Space8);
    display: grid;
    grid-template-columns: 30% 70%;
    gap: var(--Space4);
}

.profileImageColumn {
    display: flex;
flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.profileImageColumn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 100%;
}

@media (max-width: 768px) {
    .stacyProfile,
    .shonaProfile {
        grid-template-columns: 1fr;
        gap: var(--Space2);
    }
    
    .profileImageColumn {
        order: 2;
        align-items: center;
    }
    
    .profileContent {
        order: 1;
    }
}


/* .video-background-section */

.video-background-section {
position: relative;
display: block;
    width: 90%;
    min-height: 60vh; /* Adjust height as needed */
    margin: 0 auto;
border-radius: var(--RadiusXL);
box-shadow: var(--ShadowXL);
padding: var(--Space6);
}

.video-background-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    object-fit: cover;
border-radius: var(--RadiusXL);
}

.video-background-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, hsla(var(--White), 0.9), hsla(var(--White), 0.5));
    z-index: -1;
border-radius: var(--RadiusXL);
}


/* .threecolumn */

.threecolumn  {
  display: flex;
  gap: 20px;           /* Space between columns */
  padding: 20px 0;     /* Optional spacing above/below */
}

.column {
  flex: 1;             /* All 3 equal width */
  padding: 20px;       /* Inner padding for content */
  box-sizing: border-box;
}

/* Mobile responsive: stacks into one column */
@media (max-width: 768px) {
  .three-columns {
    flex-direction: column;
  }
}


/* .profileContent */

.profileContent {
    padding-right: var(--Space8);
display: flex;
align-content: flex-start;
flex-direction: column;
}
@media (max-width: 768px) {
.profileContent {
padding-right: 0;
}
}


/* .twoThirdsRight */

.twoThirdsRight {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: var(--Space2);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsRight {
        grid-template-columns: 1fr;
      }
    }


/* .relaxedExec */

.relaxedExec {
background-image: url(/media/16x9/AdobeStock_171391599.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.relaxedExec{
background-image: url(/media/9x16/AdobeStock_294610303.jpg);
padding-top: 50vh;
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.relaxedExec{
min-height: 70vh;
}}


/* .legalFirms */

.legalFirms {
background-image: url(/media/16x9/AdobeStock_165278903.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.legalFirms{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.legalFirms{
min-height: 70vh;
}}


/* .inHouse */

.inHouse {
background-image: url(/media/16x9/AdobeStock_231111872.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.inHouse{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.inHouse{
min-height: 70vh;
}}


/* .boutiqueExpertise */

.boutiqueExpertise {
background-image: url(/media/16x9/AdobeStock_521125099.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.boutiqueExpertise{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.boutiqueExpertise{
min-height: 70vh;
}}


/* .specializedTalent */

.specializedTalent {
background-image: url(/media/16x9/AdobeStock_613516882.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.specializedTalent{
background-image: url(/media/9x16/AdobeStock_613516882.jpg);
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.specializedTalent{
min-height: 70vh;
}}


/* .tailoredRecruitment */

.tailoredRecruitment {
background-image: url(/media/16x9/AdobeStock_294610303.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.tailoredRecruitment{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.tailoredRecruitment{
min-height: 70vh;
}}


/* .streamlinedProcess */

.streamlinedProcess {
background-image: url(/media/16x9/AdobeStock_636637981.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
min-height: 50vh;
width: 90%;
max-width: 1920px;
display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    padding: var(--Space6);
border-radius: var(--Radius2XL);
margin: 0 auto;
margin-bottom: var(--Space8);
}
@media (max-width: 768px) {
.streamlinedProcess{
 min-height: 90vh;
}}
@media (min-width: 1925px) {
.streamlinedProcess{
min-height: 70vh;
}}


/* threeColumnGrid */

.threeColumnGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 80%;
  margin: 0 auto;
  align-items: start;
}

@media screen and (max-width: 768px) {
  .threeColumnGrid {
    grid-template-columns: 1fr;
    width: 90%;
  }
}


/* singleColumn */

.singleColumn {
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding-top: 60px;
}


/* .fourColumnGrid */

.fourColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.fourColumnGrid {
 grid-template-columns: 1fr;
}
}


/* divBorders */

.borderLeftGray {
border-left: 1px solid hsl(var(--Gray80));
padding-left: 20px;
}


/* singleColumnFlex */

.singleColumnFlex {
display: flex;
flex-direction: column;
}



/* ============================================================================
   USAGE INSTRUCTIONS
   
   1. Go to Admin > CSS Class Library
   2. Add a new CSS class with a name (e.g., "heroSection")
   3. Enter CSS properties (without the class selector)
   4. The class will be available as .heroSection in both CKEditor and front-end
   5. Use in HTML: <div class="heroSection">Content</div>
   
   Note: Caching is disabled - changes appear immediately
   ============================================================================ */