/* ==========================
   CAREER BRIDGE AFRICA THEME
========================== */

body{
    font-family:'Inter',sans-serif;
    background:#f8f9fa;
    color:#495057;
}

/* Top Bar */

.topbar{
    font-size:14px;
}

.topbar a{
    transition:.3s;
}

.topbar a:hover{
    color:#0d6efd!important;
}

/* Navbar */

.navbar{
    padding:15px 0;
}

.navbar-brand img{
    transition:.3s;
}

.navbar-brand:hover img{
    transform:scale(1.05);
}

.nav-link{
    font-weight:600;
    margin-left:15px;
    position:relative;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background:#0d6efd;
    transition:.3s;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}

/* Hero */

.hero{
    background:linear-gradient(135deg,#0d6efd,#084298);
    color:#fff;
    padding:100px 0;
}

.hero-badge{
    background:rgba(255,255,255,.15);
    padding:10px 18px;
    border-radius:30px;
    display:inline-block;
    font-weight:600;
}

.hero-image{
    max-width:100%;
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

/* Stats */

.stats-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.stats-card:hover{
    transform:translateY(-8px);
}

.stats-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#e7f1ff;
    color:#0d6efd;
    font-size:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 20px;
}

.stats-card h2{
    font-weight:700;
    color:#0d6efd;
}

.stats-card p{
    margin:0;
    color:#6c757d;
}
/* ================= SEARCH ================= */ .search-section{ margin-top:-70px; position:relative; z-index:10; } .search-card{ background:#fff; border-radius:24px; padding:35px; } .search-card .form-control, .search-card .form-select{ height:56px; border-radius:12px; border:1px solid #dee2e6; } .search-card .form-control:focus, .search-card .form-select:focus{ border-color:#0d6efd; box-shadow:0 0 0 .2rem rgba(13,110,253,.15); } .search-card .btn{ height:56px; border-radius:12px; font-weight:600; } .input-group-text{ border-radius:12px 0 0 12px; } .mini-stat{ background:#f8f9fa; border-radius:16px; padding:18px; transition:.3s; } .mini-stat:hover{ background:#0d6efd; color:#fff; transform:translateY(-5px); } .mini-stat h5{ color:#0d6efd; font-weight:700; margin-bottom:5px; } .mini-stat:hover h5{ color:#fff; } @media(max-width:991px){ .search-section{ margin-top:30px; } .search-card{ padding:25px; } }
/* ========================== OPPORTUNITY SECTION ========================== */ .section-badge{ display:inline-block; background:#e7f1ff; color:#0d6efd; padding:8px 18px; border-radius:30px; font-weight:600; margin-bottom:15px; } .section-title{ font-weight:700; font-size:2.2rem; margin-bottom:15px; } .opportunity-card{ background:#fff; border-radius:22px; padding:30px; position:relative; box-shadow:0 12px 35px rgba(0,0,0,.08); transition:.35s; height:100%; overflow:hidden; } .opportunity-card:hover{ transform:translateY(-8px); } .company-logo{ width:80px; height:80px; background:#fff; border:1px solid #dee2e6; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:auto; } .company-logo img{ max-width:60px; max-height:60px; } .featured-ribbon{ position:absolute; top:20px; right:-35px; background:#ffc107; color:#212529; padding:8px 45px; font-size:12px; font-weight:700; transform:rotate(45deg); } .job-title{ font-weight:700; margin-bottom:8px; } .company-name{ font-weight:600; color:#495057; } .location{ color:#6c757d; } .salary-box{ background:#e8fff2; padding:12px 18px; border-radius:12px; color:#198754; font-weight:700; } .deadline-box{ background:#fff3f3; padding:12px 18px; border-radius:12px; color:#495057; } .deadline-box strong{ display:block; margin-top:5px; color:#dc3545; } .opportunity-card .btn{ height:48px; font-weight:600; }
/* ========================== CATEGORY SECTION ========================== */ .categories-section{ background:#ffffff; } .category-card{ display:block; background:#ffffff; padding:35px 25px; border-radius:22px; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.06); transition:.35s; position:relative; overflow:hidden; height:100%; border:1px solid #eef2f7; } .category-card:hover{ transform:translateY(-8px); box-shadow:0 18px 45px rgba(13,110,253,.18); border-color:#0d6efd; } .category-icon{ width:80px; height:80px; margin:auto; margin-bottom:20px; border-radius:50%; background:#e7f1ff; display:flex; align-items:center; justify-content:center; font-size:34px; color:#0d6efd; transition:.35s; } .category-card:hover .category-icon{ background:#0d6efd; color:#ffffff; transform:rotate(10deg) scale(1.08); } .category-card h5{ font-weight:700; color:#343a40; margin-bottom:10px; } .category-card p{ margin-bottom:20px; color:#6c757d; } .category-arrow{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#f8f9fa; color:#0d6efd; transition:.35s; } .category-card:hover .category-arrow{ background:#0d6efd; color:#ffffff; transform:translateX(4px); } .category-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:5px; background:#0d6efd; transform:scaleX(0); transition:.35s; } .category-card:hover::before{ transform:scaleX(1); } @media(max-width:991px){ .category-card{ padding:30px 20px; } }
/* ========================== FOOTER ========================== */ .footer-section{ background:#343a40; color:#adb5bd; padding:70px 0 25px; } .footer-section h5{ color:#ffffff; font-size:20px; font-weight:700; margin-bottom:25px; } .footer-section p{ line-height:1.8; } .footer-social a{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:#fff; border-radius:50%; margin-right:8px; transition:.3s; } .footer-social a:hover{ background:#0d6efd; transform:translateY(-4px); } .footer-links{ padding:0; list-style:none; } .footer-links li{ margin-bottom:12px; } .footer-links a{ color:#adb5bd; text-decoration:none; transition:.3s; } .footer-links a::before{ content:"→"; color:#0d6efd; margin-right:8px; } .footer-links a:hover{ color:#fff; padding-left:5px; } .newsletter-form input{ height:50px; border-radius:10px 0 0 10px; border:none; } .newsletter-form button{ width:55px; border-radius:0 10px 10px 0; } .footer-section hr{ border-color:rgba(255,255,255,.15); margin:40px 0 25px; } .footer-bottom{ font-size:14px; } .footer-bottom a{ color:#ffffff; text-decoration:none; margin:0 5px; } .footer-bottom a:hover{ color:#0d6efd; } @media(max-width:768px){ .footer-section{ text-align:center; } .footer-social{ margin-bottom:20px; } .footer-bottom .text-md-end{ margin-top:15px; } }
/* ========================== CTA SECTION ========================== */ .cta-section{ padding:70px 0; } .cta-box{ background:linear-gradient( 135deg, #0d6efd, #084298 ); padding:50px; border-radius:30px; color:#fff; box-shadow:0 15px 40px rgba(13,110,253,.25); } .cta-box h2{ font-weight:700; font-size:2.3rem; } .cta-box p{ font-size:18px; opacity:.9; } /* ========================== PARTNERS ========================== */ .partners-section{ background:#f8f9fa; } .partner-logo{ height:100px; background:#fff; border-radius:18px; display:flex; align-items:center; justify-content:center; padding:20px; box-shadow:0 8px 25px rgba(0,0,0,.06); transition:.3s; } .partner-logo:hover{ transform:translateY(-5px); } .partner-logo img{ max-width:100%; max-height:60px; object-fit:contain; filter:grayscale(100%); transition:.3s; } .partner-logo:hover img{ filter:grayscale(0); } /* ========================== BACK TO TOP ========================== */ .back-to-top{ position:fixed; right:25px; bottom:25px; width:50px; height:50px; border-radius:50%; background:#0d6efd; color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.2); transition:.3s; z-index:999; } .back-to-top:hover{ background:#084298; transform:translateY(-5px); } @media(max-width:768px){ .cta-box{ padding:35px 25px; text-align:center; } .cta-box h2{ font-size:1.8rem; } .cta-box .btn{ margin-top:20px; } }
/* HERO */ .hero-section{ background:linear-gradient( 135deg, #0d6efd, #084298 ); color:white; padding:100px 0; } .hero-tag{ background:rgba(255,255,255,.15); padding:10px 20px; border-radius:30px; } /* STATS */ .stats-section{ margin-top:-40px; position:relative; z-index:2; } .stats-card{ background:white; padding:30px; text-align:center; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); } .stats-card i{ font-size:35px; color:#0d6efd; } .stats-card h2{ font-weight:700; color:#343a40; } /* SEARCH */ .search-wrapper{ padding:40px 0; } .search-box{ background:white; padding:30px; border-radius:20px; } .search-box input, .search-box select{ height:55px; border-radius:12px; }
/* ===============================
 OPPORTUNITY PAGE
================================ */


.opportunity-header{

background:linear-gradient(
135deg,
#0d6efd,
#084298
);

padding:70px 0;

color:white;

}



.opportunity-header h1{

font-size:42px;

font-weight:800;

}



.company-logo-large{

width:180px;

height:180px;

object-fit:contain;

background:white;

padding:20px;

border-radius:20px;

}





.content-card,
.side-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.content-card h3,
.side-card h4{

font-weight:700;

color:#343a40;

}





.detail-item{

padding:15px 0;

border-bottom:1px solid #eee;

}


.detail-item i{

width:30px;

color:#0d6efd;

}





.share-buttons{

display:flex;

gap:10px;

}



.share-buttons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#0d6efd;

color:white;

border-radius:50%;

text-decoration:none;

}



.share-buttons a:hover{

transform:translateY(-4px);

}



body{

background:#f8f9fa;

}
/* OPPORTUNITY VIEW */ .opportunity-banner{ background:linear-gradient( 135deg, #0d6efd, #212529 ); color:white; padding:80px 0; } .opportunity-banner h1{ font-weight:800; font-size:42px; } .opportunity-logo{ width:180px; height:180px; background:white; padding:20px; border-radius:20px; object-fit:contain; } .detail-box, .side-box{ background:white; padding:30px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08); } .detail-box h3, .side-box h4{ font-weight:700; color:#212529; } .info-item{ padding:15px 0; border-bottom:1px solid #eee; } .info-item i{ color:#0d6efd; width:30px; } .social-share{ display:flex; gap:12px; } .social-share a{ width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; text-decoration:none; } .facebook{ background:#1877f2; } .linkedin{ background:#0a66c2; } .twitter{ background:#000; } .whatsapp{ background:#25d366; } .copy{ background:#6c757d; } .social-share a:hover{ transform:translateY(-5px); transition:.3s; }

.about-hero{ background:linear-gradient( 135deg, #0d6efd, #212529 ); color:white; padding:80px 0; } .about-card, .service-card{ background:white; padding:30px; border-radius:20px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,.08); height:100%; } .about-card i, .service-card i{ font-size:40px; color:#0d6efd; margin-bottom:20px; } .cta-section{ background:#0d6efd; color:white; padding:70px 0; }
/* CONTACT PAGE */


.contact-hero{

background:linear-gradient(

135deg,

#0d6efd,

#212529

);

color:white;

padding:80px 0;

}



.contact-card{

background:white;

padding:30px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

height:100%;

}



.contact-card i{

font-size:40px;

color:#0d6efd;

margin-bottom:15px;

}



.contact-form{

background:white;

padding:40px;

border-radius:20px;

}



.contact-form input,
.contact-form textarea{

border-radius:12px;

padding:15px;

border:1px solid #ddd;

}



.contact-form input:focus,
.contact-form textarea:focus{

border-color:#0d6efd;

box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}
.btn-blue {

    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;

}


.btn-blue:hover {

    background-color: #084298 !important;
    border-color: #084298 !important;

}
/* ===============================
   Opportunity Category Tabs
================================ */

.nav-tabs {
    border-bottom: none;
}


.nav-tabs .nav-link {

    color: #0d6efd; /* Bootstrap blue */

    font-weight: 600;

    border: none;

    background: transparent;

    padding: 12px 20px;

    transition: all 0.3s ease;

}


/* Hover */

.nav-tabs .nav-link:hover {

    color: #000;

    background: transparent;

}



/* Active Tab */

.nav-tabs .nav-link.active {

    color: #0d6efd;

    background: transparent;

    border: none;

    border-bottom: 3px solid #0d6efd;

}



/* Remove Bootstrap focus */

.nav-tabs .nav-link:focus {

    outline: none;

    box-shadow: none;

}



/* Mobile Responsive */

@media(max-width:768px){

    .nav-tabs {

        display:flex;

        overflow-x:auto;

        flex-wrap:nowrap;

        justify-content:flex-start!important;

    }


    .nav-tabs .nav-link {

        white-space:nowrap;

    }

}
.btn-blue{
    background:#0066cc;
    color:white;
    border:none;
}

.btn-blue:hover{
    background:#003f88;
    color:white;
}
/********** Template CSS **********/

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    color: #3a69cf;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}

/*** Header ***/
.header-carousel .container,
.page-header .container {
    position: relative;
    padding: 45px 0 45px 35px;
    border-left: 15px solid var(--primary);
}

.header-carousel .container::before,
.header-carousel .container::after,
.page-header .container::before,
.page-header .container::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100px;
    height: 15px;
    background: var(--primary);
}

.header-carousel .container::after,
.page-header .container::after {
    top: 100%;
    margin-top: -15px;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.page-header {
    background: linear-gradient(rgba(43, 57, 64, .5), rgba(43, 57, 64, .5)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** About ***/
.about-bg {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 5px 5px;
}


/*** Category ***/
.cat-item {
    display: block;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    border: 1px solid transparent;
    transition: .5s;
}

.cat-item:hover {
    border-color: rgba(0, 0, 0, .08);
    box-shadow: none;
}


/*** Job Listing ***/
.nav-pills .nav-item .active {
    border-bottom: 2px solid var(--primary);
}

.job-item {
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .5s;
}

.job-item:hover {
    border-color: rgba(0, 0, 0, .08);
    box-shadow: none;
}