/* Existing home sections outside the v2 hero/learning experience. */
.learning_path .paths a .card_path .path_icon{
    width: 40%;
    height: 40%;
}
/*featured_courses STYLES////////////////////////////*/
.featured_courses{
    padding: 80px 0;
    background: var(--bg);
}
.featured_courses h4{
    color: var(--text);
    text-align: center;
    font-size: 28px;
}
/*featured_courses STYLES////////////////////////////*/
/* Student testimonials are defined in home-v4.css. */
/*bootcamp STYLES////////////////////////////*/
.bootcamp{
    background: var(--bg);
    padding: 100px 20px;
    position: relative;
    overflow-x: hidden;
}
@media(max-width:600px){
    .bootcamp{
        padding: 100px 0;
    }
}
.bootcamp::before{
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(79, 123, 255, 0.696);
     background:
    radial-gradient(
        circle,
        rgba(124, 58, 237, 0.694),
        transparent
    );
    filter: blur(100px);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events: none;
}
.bootcamp .right_section,
.bootcamp .left_section{
    padding: 15px;
    width: 49%;
    margin: 10px auto;
}
.bootcamp .title{
    margin-top: 25px;
    color: var(--text);
    font-size: 28px;
}
.bootcamp .subtitle{
    color: var(--text-muted);
    margin-top: 15px;
}
.bootcamp .extra_info{
    margin-top: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.bootcamp .extra_info .info{
    margin: 10px;
}
.bootcamp .extra_info .info svg{
    vertical-align: -7px;
    margin: 0 3px;
}
.bootcamp .left_section .time_line{
    background: linear-gradient(190deg,var(--primary),var(--secondary));
    border-radius: var(--radius-md);
    padding: 20px;
}
.bootcamp .left_section .time_line h4{
    color: var(--text);
    text-align: center;
    font-size: 28px;
}
.bootcamp .left_section .time_line .timeline{
    padding: 20px;
    flex-direction: row-reverse;
    margin: 20px 0;
}
.bootcamp .left_section .time_line .timeline .path{
    direction: ltr;
}
.bootcamp .left_section .time_line .timeline .path .circle{
    width: 48px;
    height: 48px;
    background: var(--surface);
    border-radius: 100%;
    border: 2px solid var(--text);
    text-align: center;
    padding-top: 7px;
    font-size: 22px;
    position: relative;
}
.bootcamp .left_section .time_line .timeline .path .circle.active{
    background: var(--secondary);
}
.bootcamp .left_section .time_line .timeline .path .circle::after{
    content: 'HTML & CSS';
    font-size: 12px;
    width: 100px;
    display: block;
    padding: 5px;
    position: absolute;
    top: 55px;
    left: -35px;
}
.bootcamp .left_section .time_line .timeline .path:nth-child(2) .circle::after{
    content: 'JavaScript';
}
.bootcamp .left_section .time_line .timeline .path:nth-child(3) .circle::after{
    content: 'PHP';
}
.bootcamp .left_section .time_line .timeline .path:nth-child(4) .circle::after{
    content: 'Laravel';
}
.bootcamp .left_section .time_line .timeline .path:nth-child(5) .circle::after{
    content: 'Deployment';
}
.bootcamp .left_section .time_line .timeline .path .line{
    width: 70px;
    height: 3px;
    background: var(--text);
    margin-top: 22px;
}
.bootcamp .left_section a.bootcamp_cta{
    background: var(--bg);
    color:var(--text);
    padding: 12px 6px;
    border-radius: var(--radius-md);
    display: block;
    width: 100%;
    max-width: 285px;
    text-align: center;
    margin: 40px auto;
    margin-bottom: 10px;
    font-size: 20px;
    transition: 200ms;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.bootcamp .left_section a.bootcamp_cta:hover{
    background: rgba(79, 123, 255, 0.696);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
@media(max-width:768px){
    .bootcamp{
        padding: 100px 0 60px;
    }
    .bootcamp .left_section{
        padding: 0;
    }
    .bootcamp .left_section .time_line{
        display: none;
    }
    .bootcamp .left_section a.bootcamp_cta{
        margin: auto;
    }
}
.bootcamp .left_section a.bootcamp_cta .arrow_left{
    vertical-align: -7px;
}
.bootcamp .left_section .payback{
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.bootcamp .left_section .payback svg{
    vertical-align: -6px;
}
@media(max-width:768px){
    .bootcamp .right_section .extra_info{
        width: auto;
    }
}
@media(min-width:769px) and (max-width:940px){
    .bootcamp .left_section , .right_section{
        padding: 0;
    }
    .bootcamp .right_section .extra_info{
        width:auto;
    }
}
@media(min-width:941px) and (max-width:1100px){
    .bootcamp .right_section .extra_info{
        width:700px;
    }
}
@media(min-width:1101px){
    .bootcamp .right_section .extra_info{
        width:auto;
    }
}
@media(max-width:1101px){
    .bootcamp{
        flex-direction: column;
    }
    .bootcamp .right_section,.left_section{
        margin: 10px auto;
        width: 100%;
    }
    .bootcamp .right_section .badge{
        margin: auto;
    }
    .bootcamp .right_section h4 , p{
        text-align: center;
        width: 100%;
    }
}
@media(max-width:1276px){
    .bootcamp .left_section .time_line .timeline .path .circle{
        width: 35px;
        height: 35px;
        font-size: 16px;
        padding-top: 5px;
    }
    .bootcamp .left_section .time_line .timeline .path .line{
        width: 40px;
        margin-top: 17px;
    }
}
@media(max-width:400px){
    .bootcamp .left_section .time_line .timeline .path .line{
        width: 20px;
    }
}
/*bootcamp STYLES////////////////////////////*/
/*FAQ STYLES////////////////////////////*/
.faq{
    background: var(--bg);
    padding: 40px 0;
    display: flex;
    align-items: center;
}
.faq .right_faq , .left_faq{
    margin: 10px;
    padding: 15px;
}
@media (max-width:400px){
    .faq .right_faq , .left_faq{
        margin: 10px;
        padding: 0;
    }
}
.faq .right_faq{
    width: 40%;
    padding-right: 50px;
}
.faq .right_faq .faq_info{
    width: 100%;
    max-width: 355px;
    height: 100px;
   background: var(--surface);
   border: 1px solid var(--border);
   margin-top: 10px;
   border-radius:var(--radius-md);
}.faq .right_faq .faq_info:hover{
    border-color: var(--primary);
}
.faq .right_faq .faq_info .info_icon{
    width: 100px;
    height: 100%;
    text-align: center;
}
.faq .right_faq .faq_info .info_icon svg{
    width: 40px;
    height: 40px;
    margin-top: 25px;
}
.faq .right_faq .faq_info .icon_box.info_icon svg{
    width:40px;
    height:40px;
    border-radius:50%;
    border: 3px solid #fff;
}
.faq .right_faq .faq_info .info_text{
    width: 250px;
}
.faq .right_faq .faq_info .info_text p{
    width: 100%;
    margin-top: 0;
    font-size: 16px;
    padding: 10px;
    text-align: right;
}
@media(max-width:992px){
    .faq{
        flex-direction: column;
    }
    .faq .right_faq{
        width: 100%;
        padding-right: 0;
    }
    .faq .right_faq .badge ,h4,p,.faq_info{
        margin: 10px auto;
        text-align: center;
    }
    .faq .left_faq{
    width: 100%;
    margin-top: 0;
}
}
@media(max-width:1320px){
    .left_faq .faq_item{max-width: 530px;}
    .right_faq{
        width: 100%;
        padding-right: 0;
    }
}
@media(max-width:620px){
    .left_faq .faq_item{max-width: 450px;}
    .left_faq{
        padding: 0;
    }
}
/*FAQ STYLES////////////////////////////*/
/*CTA STYLES////////////////////////////*/
.cta{
    background: var(--bg);
    padding: 100px 15px;
}
.cta .cta_box{
    background: var(--surface);
    position: relative;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.cta .cta_box::before{
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(79,124,255,.15);
    filter: blur(100px);
}
.cta .cta_box .badge{
    color: var(--text);
    border-radius: var(--radius-md);
    width: 200px;
    margin: auto;
}
.cta .cta_box .badge h4{font-size: 15px;}
.cta .cta_box .badge svg{
    vertical-align: -6px;}
.cta .cta_box h4.title{
    text-align: center;}
.cta .cta_box p{
    text-align: center;
    width: 100%;
}
/*CTA STYLES////////////////////////////*/
.footer p{width:auto;}