/* ============================================================================
   DYNAMIC CSS GENERATOR
   Generated: 2025-12-01 06:00:07   
   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;
}}


/* .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;}
}


/* .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);
}


/* .profileContent */

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


/* .twoColumnGrid */

.twoColumnGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--Space4);
}

@media (max-width: 768px) {
    .twoColumnGrid {
        grid-template-columns: 1fr;
        text-align: center;
        align-items: center;
    }
}


/* .threeColumnGrid */

.threeColumnGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--Space4);
}

@media (max-width: 768px) {
    .threeColumnGrid {
        grid-template-columns: 1fr;
        text-align: center;
        align-items: center;
    }
}


/* .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;
}}



/* ============================================================================
   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
   ============================================================================ */