/*
Theme Name: KYIROV Storefront Child
Theme URI: https://kyirov.com
Description: KYIROV Jobs, Scholarships, Research, NGOs, Companies and Career Platform
Author: John B. Walugembe
Author URI: https://kyirov.com
Template: storefront
Version: 1.0.0
Text Domain: kyirov
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: jobs, careers, scholarships, research, woocommerce
*/

/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {
    --kyirov-primary: #173f8a;
    --kyirov-secondary: #00a6d6;
    --kyirov-accent: #ffb703;
    --kyirov-pink: #ff4d8d;
    --kyirov-green: #00c897;
    --kyirov-purple: #7b2ff7;
    --kyirov-text: #102033;
}

/* Remote Jobs Hero */
.kyirov-hero,
.page-hero,
.remote-jobs-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #37b7ff 0%,
        #00c897 32%,
        #ffb703 68%,
        #ff4d8d 100%
    ) !important;
    background-size: 300% 300%;
    animation: kyirovHeroGradient 12s ease infinite;
    color: #102033 !important;
    padding: 80px 24px;
    border-bottom: none;
}

@keyframes kyirovHeroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.kyirov-hero::before,
.page-hero::before,
.remote-jobs-hero::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -90px;
    top: -100px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    animation: kyirovFloat 7s ease-in-out infinite;
}

.kyirov-hero::after,
.page-hero::after,
.remote-jobs-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -80px;
    bottom: -90px;
    background: rgba(23, 63, 138, 0.18);
    border-radius: 50%;
    animation: kyirovFloat 9s ease-in-out infinite reverse;
}

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

.kyirov-hero > *,
.page-hero > *,
.remote-jobs-hero > * {
    position: relative;
    z-index: 2;
}

.kyirov-hero h1,
.page-hero h1,
.remote-jobs-hero h1 {
    color: #173f8a !important;
    font-size: 58px;
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 14px;
    text-shadow: 0 3px 0 rgba(255,255,255,0.35);
}

.kyirov-hero p,
.page-hero p,
.remote-jobs-hero p {
    color: #12304f !important;
    font-size: 21px;
    max-width: 900px;
    font-weight: 600;
}

/* Stat Cards */
.kyirov-stats,
.remote-jobs-stats,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 58px;
}

.kyirov-stat-card,
.stat-card,
.remote-stat-card {
    background: linear-gradient(
        135deg,
        rgba(255, 183, 3, 0.92),
        rgba(0, 200, 151, 0.92)
    ) !important;
    color: #102033 !important;
    border: 2px solid rgba(255,255,255,0.45);
    border-radius: 24px;
    padding: 32px 26px;
    box-shadow: 0 18px 40px rgba(16, 32, 51, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.kyirov-stat-card:hover,
.stat-card:hover,
.remote-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 52px rgba(16, 32, 51, 0.26);
}

.kyirov-stat-card h3,
.stat-card h3,
.remote-stat-card h3 {
    color: #173f8a !important;
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 8px;
}

.kyirov-stat-card p,
.stat-card p,
.remote-stat-card p {
    color: #102033 !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

/* Buttons */
.kyirov-btn,
.button,
button,
input[type="submit"] {
    background: linear-gradient(135deg, #173f8a, #00a6d6);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 13px 24px;
    font-weight: 800;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kyirov-btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(135deg, #ff4d8d, #ffb703);
    color: #102033;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(16, 32, 51, 0.22);
}

/* Accent Line */
.kyirov-hero h1::after,
.page-hero h1::after,
.remote-jobs-hero h1::after {
    content: "";
    display: block;
    width: 110px;
    height: 6px;
    background: linear-gradient(90deg, #173f8a, #ff4d8d, #ffb703);
    border-radius: 20px;
    margin-top: 18px;
}

/* Mobile */
@media (max-width: 768px) {
    .kyirov-hero,
    .page-hero,
    .remote-jobs-hero {
        padding: 60px 18px;
    }

    .kyirov-hero h1,
    .page-hero h1,
    .remote-jobs-hero h1 {
        font-size: 40px;
    }

    .kyirov-stats,
    .remote-jobs-stats,
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   RESET
===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#0f172a;
    line-height:1.7;
    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;

}

a{

    text-decoration:none;
    transition:.3s;

}

ul{

    list-style:none;

}

/* =====================================================
   CONTAINER
===================================================== */

.kyirov-container{

    width:95%;
    max-width:1400px;
    margin:auto;

}

/* =====================================================
   BUTTONS
===================================================== */

.kyirov-btn-primary{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-weight:700;

}

.kyirov-btn-primary:hover{

    transform:
    translateY(-3px);

}

.kyirov-btn-secondary{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        #ec4899,
        #7c3aed
    );

    color:#fff;

    font-weight:700;

}

/* =====================================================
   HERO SECTION
===================================================== */

.kyirov-hero{

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed,
        #ec4899
    );

    color:#fff;

    padding:120px 0;

}

.kyirov-hero-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:center;

}

.kyirov-hero h1{

    font-size:56px;

    line-height:1.1;

    margin-bottom:20px;

}

.kyirov-hero p{

    font-size:20px;

    margin-bottom:25px;

}

.kyirov-badge{

    display:inline-block;

    padding:10px 20px;

    background:
    rgba(
        255,
        255,
        255,
        .15
    );

    border-radius:30px;

    margin-bottom:20px;

}

/* =====================================================
   SEARCH SECTION
===================================================== */

.kyirov-search-banner{

    margin-top:-40px;

    position:relative;

    z-index:20;

}

.kyirov-search-form{

    background:#fff;

    padding:25px;

    border-radius:20px;

    display:grid;

    grid-template-columns:
    2fr 1fr auto;

    gap:15px;

    box-shadow:
    0 20px 50px
    rgba(
        0,
        0,
        0,
        .10
    );

}

.kyirov-search-form input,
.kyirov-search-form select{

    padding:16px;

    border:
    1px solid
    #e2e8f0;

    border-radius:12px;

}

.kyirov-search-form button{

    padding:16px 25px;

    border:none;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-weight:700;

    cursor:pointer;

}

/* =====================================================
   STATISTICS
===================================================== */

.kyirov-stats{

    padding:80px 0;

}

.kyirov-stats-grid{

    display:grid;

    grid-template-columns:
    repeat(
        4,
        1fr
    );

    gap:25px;

}

.kyirov-stat-card{

    text-align:center;

    padding:30px;

    border-radius:20px;

    background:#fff;

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

}

.kyirov-stat-card h2{

    font-size:42px;

    color:#7c3aed;

}

/* =====================================================
   SECTION HEADERS
===================================================== */

.kyirov-section-header{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    margin-bottom:40px;

}

.kyirov-section-header h2{

    font-size:36px;

    color:#0f172a;

}

/* =====================================================
   JOB CARDS
===================================================== */

.kyirov-jobs-grid{

    display:grid;

    grid-template-columns:
    repeat(
        4,
        1fr
    );

    gap:25px;

}

.kyirov-job-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

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

    transition:.3s;

}

.kyirov-job-card:hover{

    transform:
    translateY(-8px);

}

/* =====================================================
   COMPANY CARDS
===================================================== */

.kyirov-company-grid{

    display:grid;

    grid-template-columns:
    repeat(
        4,
        1fr
    );

    gap:25px;

}

.kyirov-company-card{

    background:#fff;

    padding:25px;

    border-radius:20px;

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

}

/* =====================================================
   PART 2 NEXT
===================================================== */

/*
Part 2:
- Scholarships
- Grants
- NGOs
- Career Tools
- Premium Membership
- Testimonials
- Newsletter
- WooCommerce
- Footer
- Animations
- Mobile Responsive
*/

/* =====================================================
   OPPORTUNITY CARDS
===================================================== */

.kyirov-opportunity-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.kyirov-card,
.kyirov-tool-card,
.kyirov-ai-card,
.kyirov-testimonial{
    background:#ffffff;
    padding:28px;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,.07);
    transition:.35s;
}

.kyirov-card:hover,
.kyirov-tool-card:hover,
.kyirov-ai-card:hover,
.kyirov-testimonial:hover{
    transform:translateY(-8px);
}

/* =====================================================
   CAREER TOOLS
===================================================== */

.kyirov-career-tools,
.kyirov-ai-tools,
.kyirov-products{
    padding:90px 0;
    background:#f8fafc;
}

.kyirov-tools-grid,
.kyirov-ai-grid,
.kyirov-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* =====================================================
   PREMIUM SECTION
===================================================== */

.kyirov-premium{
    padding:100px 0;
    background:linear-gradient(135deg,#0f172a,#312e81,#7c3aed);
    color:#fff;
}

.kyirov-premium-box{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.kyirov-premium-box h2{
    font-size:46px;
    margin-bottom:20px;
}

.kyirov-btn-premium{
    display:inline-block;
    margin-top:25px;
    padding:16px 34px;
    border-radius:50px;
    background:#fff;
    color:#7c3aed;
    font-weight:800;
}

/* =====================================================
   NEWSLETTER
===================================================== */

.kyirov-newsletter{
    padding:90px 0;
    text-align:center;
    background:linear-gradient(135deg,#ec4899,#7c3aed);
    color:#fff;
}

.kyirov-newsletter form{
    max-width:650px;
    margin:25px auto 0;
    display:flex;
    gap:12px;
}

.kyirov-newsletter input{
    flex:1;
    padding:16px;
    border:none;
    border-radius:14px;
}

.kyirov-newsletter button{
    padding:16px 28px;
    border:none;
    border-radius:14px;
    font-weight:800;
    cursor:pointer;
}

/* =====================================================
   FOOTER
===================================================== */

.kyirov-footer{
    background:#0f172a;
    color:#cbd5e1;
}

.kyirov-footer-top{
    padding:80px 0;
}

.kyirov-footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.kyirov-footer-column h3{
    color:#fff;
    margin-bottom:18px;
}

.kyirov-footer-column a{
    color:#cbd5e1;
}

.kyirov-footer-column a:hover{
    color:#fff;
}

.kyirov-footer-column li{
    margin-bottom:10px;
}

.kyirov-footer-social,
.kyirov-footer-legal,
.kyirov-footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding:20px 0;
    text-align:center;
}

.kyirov-footer-social a,
.kyirov-footer-legal a{
    margin:0 10px;
    color:#cbd5e1;
}

/* =====================================================
   FINAL CTA
===================================================== */

.kyirov-final-cta{
    padding:100px 0;
    text-align:center;
    background:#ffffff;
}

.kyirov-final-cta h2{
    font-size:48px;
}

.kyirov-cta-buttons a{
    display:inline-block;
    margin:15px;
    padding:15px 30px;
    border-radius:40px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    font-weight:800;
}

/* =====================================================
   WOO COMMERCE
===================================================== */

.woocommerce ul.products li.product{
    background:#fff;
    border-radius:20px;
    padding:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.woocommerce ul.products li.product .button{
    border-radius:30px;
    background:#7c3aed;
    color:#fff;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){
    .kyirov-jobs-grid,
    .kyirov-company-grid,
    .kyirov-opportunity-grid,
    .kyirov-tools-grid,
    .kyirov-ai-grid,
    .kyirov-testimonial-grid,
    .kyirov-footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .kyirov-hero-grid,
    .kyirov-search-form,
    .kyirov-stats-grid,
    .kyirov-jobs-grid,
    .kyirov-company-grid,
    .kyirov-opportunity-grid,
    .kyirov-tools-grid,
    .kyirov-ai-grid,
    .kyirov-testimonial-grid,
    .kyirov-footer-grid{
        grid-template-columns:1fr;
    }

    .kyirov-hero h1{
        font-size:38px;
    }

    .kyirov-newsletter form{
        flex-direction:column;
    }
}


.kyirov-header {
    background: #ffffff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 999;
}

.kyirov-wrap {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 18px;
}

.kyirov-topbar {
    background: linear-gradient(90deg, #ff0080, #7928ca, #0077ff);
    color: #fff;
    font-size: 14px;
}

.kyirov-topbar .kyirov-wrap {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.kyirov-topbar a {
    color: #fff;
    margin-left: 12px;
    text-decoration: none;
    font-weight: 600;
}

.kyirov-mainbar {
    background: #ffffff;
}

.kyirov-main-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
}

.kyirov-logo a {
    text-decoration: none;
    color: #111;
}

.kyirov-logo strong {
    display: block;
    font-size: 30px;
    color: #ff0080;
    letter-spacing: 2px;
}

.kyirov-logo small {
    display: block;
    color: #555;
    font-size: 12px;
}

.kyirov-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kyirov-nav > ul {
    display: flex;
    align-items: center;
    gap: 3px;
}

.kyirov-nav li {
    position: relative;
}

.kyirov-nav a {
    display: block;
    padding: 14px 10px;
    color: #222;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
}

.kyirov-nav > ul > li > a:hover {
    color: #fff;
    background: linear-gradient(135deg, #ff0080, #0077ff);
}

.kyirov-nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    background: linear-gradient(180deg, #fff0fb, #eef7ff);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border-radius: 16px;
    padding: 10px;
}

.kyirov-nav li:hover > ul {
    display: block;
}

.kyirov-nav li ul a {
    padding: 11px 14px;
    color: #222;
    border-radius: 10px;
    font-size: 14px;
}

.kyirov-nav li ul a:hover {
    background: linear-gradient(135deg, #ffb703, #fb5607);
    color: #fff;
}

.kyirov-searchbar {
    background: linear-gradient(90deg, #e0f7ff, #fff3d7, #ffe5f1);
    padding: 12px 0;
}

.kyirov-searchbar form {
    display: flex;
    gap: 10px;
}

.kyirov-searchbar input {
    flex: 1;
    padding: 13px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

.kyirov-searchbar button {
    padding: 13px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #0077ff, #00c853);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.kyirov-menu-toggle {
    display: none;
    font-size: 30px;
    background: #ff0080;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
}

@media (max-width: 980px) {
    .kyirov-main-flex {
        flex-wrap: wrap;
    }

    .kyirov-menu-toggle {
        display: block;
    }

    .kyirov-nav {
        display: none;
        width: 100%;
    }

    .kyirov-nav.kyirov-nav-open {
        display: block;
    }

    .kyirov-nav > ul {
        display: block;
        width: 100%;
    }

    .kyirov-nav li ul {
        position: static;
        width: 100%;
        box-shadow: none;
        display: none;
    }

    .kyirov-nav li:hover > ul {
        display: block;
    }

    .kyirov-topbar .kyirov-wrap {
        flex-direction: column;
    }

    .kyirov-searchbar form {
        flex-direction: column;
    }
}

/* Remote Jobs Hero */
.kyirov-hero,
.page-hero,
.remote-jobs-hero {
    background: linear-gradient(
        135deg,
        var(--kyirov-bg) 0%,
        #eef5ff 50%,
        #ffffff 100%
    ) !important;
    color: var(--kyirov-text) !important;
    padding: 70px 24px;
    border-bottom: 1px solid var(--kyirov-border);
}

.kyirov-hero h1,
.page-hero h1,
.remote-jobs-hero h1 {
    color: var(--kyirov-primary) !important;
    font-size: 56px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 14px;
}

.kyirov-hero p,
.page-hero p,
.remote-jobs-hero p {
    color: var(--kyirov-muted) !important;
    font-size: 20px;
    max-width: 850px;
}

/* Stat Cards */
.kyirov-stats,
.remote-jobs-stats,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 55px;
}

.kyirov-stat-card,
.stat-card,
.remote-stat-card {
    background: var(--kyirov-white) !important;
    color: var(--kyirov-text) !important;
    border: 1px solid var(--kyirov-border);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 12px 30px rgba(18, 60, 105, 0.08);
}

.kyirov-stat-card h3,
.stat-card h3,
.remote-stat-card h3 {
    color: var(--kyirov-primary) !important;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 8px;
}

.kyirov-stat-card p,
.stat-card p,
.remote-stat-card p {
    color: var(--kyirov-muted) !important;
    font-size: 17px;
    margin: 0;
}

/* Buttons */
.kyirov-btn,
.button,
button,
input[type="submit"] {
    background: var(--kyirov-secondary);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-weight: 700;
}

.kyirov-btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--kyirov-primary);
    color: #ffffff;
}

/* ===================================
   HOW KYIROV HELPS
=================================== */

.kyirov-help-section,
.how-kyirov-helps {
    position: relative;
    overflow: hidden;
    padding: 80px 40px;
    border-radius: 32px;

    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #06b6d4 35%,
        #00c897 70%,
        #ffb703 100%
    );

    background-size: 300% 300%;
    animation: kyirovGradient 12s ease infinite;
}

@keyframes kyirovGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.kyirov-help-section h2,
.how-kyirov-helps h2 {

    color: #ffffff !important;
    font-size: 54px;
    font-weight: 900;
    margin-bottom: 20px;

    text-shadow:
        0 3px 15px rgba(0,0,0,.20);

}

.kyirov-help-section p,
.how-kyirov-helps p {

    color: #ffffff !important;
    font-size: 20px;
    line-height: 1.8;

}

/* ===================================
   CARDS
=================================== */

.kyirov-help-card,
.help-card {

    background: rgba(255,255,255,.18);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 24px;

    padding: 30px;

    transition: .4s;

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);

}

.kyirov-help-card:hover,
.help-card:hover {

    transform:
        translateY(-8px)
        scale(1.03);

    background:
        rgba(255,255,255,.25);

}

/* CARD TITLES */

.kyirov-help-card h3,
.help-card h3 {

    color: #ffffff !important;

    font-size: 34px;

    font-weight: 800;

    margin-bottom: 16px;

}

/* CARD TEXT */

.kyirov-help-card p,
.help-card p {

    color: #ffffff !important;

    font-size: 18px;

    line-height: 1.8;

}

/* ICONS */

.kyirov-help-card i,
.help-card i {

    font-size: 52px;

    color: #ffffff;

    margin-bottom: 20px;

}

/* MOBILE */

@media (max-width:768px){

    .kyirov-help-section h2,
    .how-kyirov-helps h2{

        font-size:38px;

    }

    .kyirov-help-card h3,
    .help-card h3{

        font-size:28px;

    }

}