:root{
    --white-color: #f6f6f6;
    --shade-of-black: rgb(26, 26, 26);
    --deep-dark: #121212;
    --orange: #ff9933;
    --red: #e5062f;
    /* fonts */
    --poppins: "Poppins", sans-serif;
    --roboto: "Roboto", sans-serif;
    --form-input: #e7e7e7;
    --border-color: rgba(246, 246, 246, 0.2);
  }

  /* training hero */

.sub_hero {
    min-height: 100vh;
    background-image: url("../images/bg_01.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
}

.sub_hero::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--shade-of-black);
    opacity: 0.5;
    z-index: 1;
}


/* problem solving hero*/
.problem_solving{
    background-image: url("../images/inc_3.jpg");
    background-position: right;
}

.problem_solving::before{
    opacity: 0.2;
}

/* frontend hero */
.frontend_hero{
    background-image: url("../images/frontend_6.jpg");
    background-position: top;
}

.frontend_hero::before{
    opacity: 0.2;
}

/* backend */
.backend_hero{
    background-image: url("../images/bk_4.jpg");
    background-position: center top;
}

.backend_hero::before{
    opacity: 0.4;
}

/* mobile app */
.mobile_app{
    background-image: url("../images/bkend_2.jpg");
}

/* it assurance */
.it_grc{
    background-image: url("../images/it_assurance_1.jpg");
    background-position: center left;
}

.it_grc::before{
    opacity: 0.1;
}

/* data engineering */
.data_engr{
    background-image: url("../images/data_racks.jpg");
}

.data_engr::before{
    opacity: 0.3;
}

/* a_i */
.a_i{
    background-image: url("../images/ai_1.jpg");
    background-position: center left;
}

.a_i::before{
    opacity: 0.2;
}

/* blockchain */
.blockchain_hero{
    background-image: url("../images/blockchain_1.jpg");
}

.blockchain_hero::before{
    opacity: 0.3;
}

/* exit project hero */
.exit_projects{
    background-image: url("../images/inc_4.jpg");
}

/* scalability */
.scalability_hero{
    background-image: url("../images/scalability_1.jpg");
    background-position: top;
}

.scalability_hero::before{
    opacity: 0.4;
}

/* investment hero */
.investment_hero{
    background-image: url("../images/investment_2.jpg");
    background-position: top;
}

.investment_hero::before{
    opacity: 0.1;
}

/* governments hero */
.governments_hero{
    background-image: url("../images/governments.jpg");
    filter: brightness(1.1);
}

.governments_hero::before{
    opacity: 0.15;
}

/* schools hero */
.schools_hero{
    background-image: url("../images/students.jpg");
}

.schools_hero::before{
    opacity: 0.3;
}

/* enterprise hero */
.enterprise_hero{
    background-image: url("../images/enterprise.jpg");
}

.enterprise_hero::before{
    opacity: 0.3;
}

/* investors hero */
.investors_hero{
    background-image: url("../images/investors.jpg");
    filter: brightness(1.9);
}

.investment_hero::before{
    opacity: 0;
}


.sub-hero-inner{
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 7rem;  /* move hero down*/
}

.sub_hero h1,
.sub_hero h2{
    font-size: 1.5rem;
    line-height: 2.5rem;
    color: white;
    width: 100%;
    max-width: 25rem;
    text-align: center;
    font-family: var(--poppins);
    text-transform: capitalize;
}

.sub-hero-inner button{
    background-color: var(--red);
    color: var(--white-color);
    border: none;
    padding: 0.7rem 2rem;
    border-radius: 10px;
    font-size: 1rem;
    text-transform: capitalize;
    border: 1px solid rgba(246, 246, 246, 0.1);
    font-weight: bold;
    cursor: pointer;
}

/* sub section */
.sub_section{
    width: 100%;
    max-width: 55rem;
    margin-inline: auto;
}

.subCard{
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.subCard h3,li,p{
    color: var(--white-color);
}

.subCard h3{
    font-size: 1.3rem;
    text-transform: capitalize;
}

.subCard p,li{
    font-weight: 300;
    font-family: var(--roboto);
}

.subCard li{
    list-style-position: inside;
}

.sub_desc{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sub_desc > button{
    background-color: var(--red);
    color: var(--white-color);
    border: none;
    align-self: flex-start;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.7rem 2.5rem;
    border-radius: 10px;
    text-transform: capitalize;
    margin-top: 2rem;
    transition: filter 0.3s ease-in-out;
}

.sub_desc > button:hover{
    filter: brightness(0.9);
}

.bold{
    font-weight: 600;
}


/* course details */
.course-details{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 5rem;
}

.course-details > div{
    background-color: #e5062f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 40%;
    max-width: 10rem;
    height: 9rem;
    border-radius: 10px;
    padding: 1rem;
}

.course-details figcaption h4,p{
    margin: 0;
}

.course-details h4,
.course-details p{
    text-align: center;
}

.course-details h4{
    color: var(--white-color);
    text-transform: capitalize;
    font-size: 0.85rem;
}

.course-details p{
    font-size: 0.85rem;
}

.course-details figure{
    width: 3rem;
}

.course-details img{
    width: 3rem;
}

.course-details figcaption{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}


@media (min-width: 430px){
    .sub_hero h1,
    .sub_hero h2{
        font-size: 1.7rem;
        line-height: 3rem;
    }
}

@media (min-width: 600px){
    /* training_section */
    .subCard h3{
        font-size: 1.5rem;
    }

}

@media (min-width: 768px){
    .sub_hero h1{
        font-size: 2rem;
        max-width: 30rem;
    }

}

@media (min-width: 960px){
    .sub_hero h1,
    .sub_hero h2{
        font-size: 3.5rem;
        max-width: 90%;
        line-height: 4.5rem;
    }
    
    /* training_section */
    .subCard h3{
        font-size: 1.7rem;
    }

    .course-details h4{
        font-size: 0.95rem;
    }

    .course-details p{
        font-size: 0.95rem;
    }

    .problem_solving{
        background-position: top left;
    }
}

@media (min-width: 1500px){
    /* sub section */
    .sub_section{
        max-width: 75rem;
    }
}