:root {
    --blue: #278ad1;
    --blue2: #006cad;
    --white: #ffffff;
    --darkgray: #333333;
    --lightgray: #f9f9fa;
    --lightgray2: #e5e5e5;
    --lightgray3:#b0b0b0;
    --green: #3cbc29;
    --green2: #2a951a;
}
body {
    font-family: "Roboto", sans-serif;
}
img{
    max-width: 100%;
}

/*==== SOF buttons ====*/
.btn{
    border-radius: 0.5rem;
}
.btn_primary {
    background: var(--blue);
    color: var(--white);
}
.btn_primary:hover, .btn_primary:active, .btn_primary:focus{
    background: var(--blue2);
    color: var(--white);
}

.btn_secondary {
    background: var(--green);
    color: var(--white);
}
.btn_secondary:hover, .btn_secondary:active, .btn_secondary:focus {
    background: var(--green2);
    color: var(--white);
}

.btn_light_gray {
    background: var(--lightgray2);
    color: var(--darkgray);
}
.btn_light_gray:hover, .btn_light_gray:active, .btn_light_gray:focus {
    background: var(--lightgray3);
    color: var(--darkgray);
}
.btn_dark_gray {
    background: var(--darkgray);
    color: var(--white);
}
.btn_dark_gray:hover {
    background: var(--darkgray);
    color: var(--white);
}
/*==== EOF buttons ====*/

/*==== SOF top navigation ====*/
.top_nav {
    background: var(--white);
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    z-index: 1;
}
.search_blk {
    position: relative;
}
.search_blk input {
    min-width: 255px;
    padding-right: 30px;
    color: var(--darkgray);
}
.search_btn {
    position: absolute;
    right: 5px;
    color: var(--blue);
}
.navbar-nav .nav-link {
    color: var(--darkgray);
}
.navbar-nav .nav-link.login {
    color: var(--blue);
    font-weight: bold;
}
/*==== EOF top navigation ====*/

/*==== SOF banner ====*/
.banner {
    margin-top: 103px;
}
.banner img {
    margin: 0 auto;
    max-width: 100%;
}
.banner_text_blk{
    display: flex;
    align-items: center;
    margin: 1rem 0;
}
.banner_text {
    
}
.banner_text h1 {
    font-size: 60px;
    font-weight: normal;
    padding-bottom: 20px;
}
.banner_text h1 span {
    color: var(--green);
}
.banner_text .button_blk {
    padding: 20px 0 0;
}
.banner_text .button_blk .btn {
    padding: 0.6rem 1rem;
}
/*==== EOF banner ====*/

/*==== SOF logo block ====*/
.logo_blk {
    padding: 40px 0;
}
.logo_blk img {
    margin: 0 auto;
    max-width: 100%;
}
/*==== EOF logo block ====*/

/*==== SOF bootcamp ====*/
.bootcamp {
    background: var(--lightgray);
}
.row_intro_text_blk {
    padding: 3rem 0;
    max-width: 740px;
}
.row_intro_text_blk h2 {
    color: var(--green);
    font-size: 2rem;
    font-weight: 400;
}
.row_intro_text_blk h3 {
    color: var(--darkgray);
    font-size: 3rem;
    font-weight: 400;
}
.tab_blk {
    display: flex;
    margin-bottom: 1rem;
}
.tab_nav .nav-item {
    margin-right: 2px;
}
.tab_nav .nav-link {
    color: var(--darkgray);
    transition: all ease 0.2s;
    position: relative;
}
.tab_nav .nav-link:hover {
    color: var(--darkgray);
}
.tab_nav .nav-link::after {
    width: 0%;
    height: 3px;
    background: var(--darkgray);
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    transition: all ease 0.2s;
}
.tab_nav .nav-link:hover::after {
    width: 100%;
}
.tab_nav .nav-link.active {
    font-weight: 700;
}
.tab_nav .nav-link.active::after {
    background: var(--blue);
    width: 100%;
}
.tile_blk .card_blk{
    margin: 1rem 0;
}
.tile_blk .card {
    border-radius: 1rem;
    padding: 0.625rem;
    padding-bottom: 0;
    height: 100%;
}
.tile_blk .card .card-img-top {
    max-width: 100%;
    border-radius: 1rem;
}
.tile_blk .card .card-body {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
}
.tile_blk .card .card-title{
    flex: 1;
}
.tile_blk .card .card-body .btn{
    width: fit-content;
}
.tile_blk .button_blk{
    padding: 2rem 0 3rem;
}
/*==== EOF bootcamp ====*/

/*==== SOF key areas ====*/
.key_areas {
    background: var(--white);
}
.keyarea_img{
    display: flex;
    align-items: center;
}
.keyarea_link_blk{
    display: flex;
    flex-direction: column;
}
.keyarea_link{
    background: var(--white);
    -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    margin-top: 1rem;
    align-items: center;
    text-align: left;
}
.keyarea_link:hover, .keyarea_link:focus, .keyarea_link:active{
    -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);

}
.keyarea_link .icon_blk img{
    width: 80px;
    max-width:none;
}
.keyarea_link .content_blk{
    padding-left: 1rem;
}
.keyarea_link .content_blk h3{
    font-size: 1.25rem;
}
.keyarea_link .content_blk p{
    font-size: 1rem;
    margin: 0;
}
/*==== EOF key areas ====*/

/*==== SOF about ====*/
.about_blk {
    background: var(--lightgray);
    padding: 3rem 0;
    margin-top: 2rem;
}
.about_blk_img{
    order: 2;
    display: flex;
    align-items: center;
}
.about_blk_content{
    order: 1;
}
.about_blk_content h2{
    color: var(--green);
    font-size: 2rem;
    font-weight: 400;
}
/*==== EOF about ====*/

/*==== SOF why us ====*/
.whyus_blk{
    background: var(--white);
    padding-bottom: 3rem;
}
.whyus_blk_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*==== EOF why us ====*/

/*==== SOF instructor ====*/
.instructor_blk{
    background: var(--lightgray);
    padding: 3rem 0;
}
.instructor_blk_img{
    order: 2;
    display: flex;
    align-items: center;
}
.instructor_blk_content{
    order: 1;
    display: flex;
    align-items: center;
}
.instructor_blk_content h2{
    color: var(--green);
    font-size: 2rem;
    font-weight: 400;
}
.instructor_blk_content h3{
    color: var(--darkgray);
    font-size: 3rem;
    font-weight: 400;
}
.testimonials_blk .card {
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: row;
}
.testimonials_blk .card-image img{
    width: 90px;
    max-width: none;
    border-radius: 0.625rem;
}
.testimonials_blk .card-body{
    padding: 0 0 0 1rem;
}
.testimonials_blk .button_blk{
    padding: 2rem 0 0;
}
/*==== EOF instructor ====*/

/*==== SOF lets connect ====*/
.lets_connect{
    background: var(--white);
    padding: 4rem 0;
    transition: ease all 0.5s;
}
.lets_connect:hover{
    background: linear-gradient(135deg,  #f77fa9 0%,#f9d782 50%,#70cee2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.lets_connect_blk h2{
    font-size: 1.5rem;
}
.lets_connect_blk h3{
    font-size: 7.5rem;
    margin: 2rem 0;
}
.lets_connect_blk .button_blk{
    margin: 2rem 0 0;
}
.lets_connect_blk .button_blk .btn{
    padding: 0.6rem 2rem;
}
/*==== EOF lets connect ====*/

/*==== SOF footer ====*/
.footer{
    background: var(--darkgray);
    color: var(--white);
    padding: 1rem 0;
}
.footer_col1, .footer_col2{
    margin: 1rem 0;
}
.footer_col1 .phone{
    padding: 1rem 0;
    margin: 0;
}
.footer_col1 .social_links a{
    color: var(--white);
    font-size: 1.25rem;
}
.footer_col2 h5{
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.footer_col2 ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer_col2 ul li a{
    color: var(--lightgray);
}
.footer_copyright{
    background: #000;
    color: var(--lightgray3);
}
.footer_copyright p{
    margin: 0.6rem 0;
    font-size: 0.875rem;
}
/*==== EOF footer ====*/








@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }
}
@media (max-width: 991px) {
    .banner_text_blk {
        order: 2;
        text-align: center;
    }
    .banner_img_blk{
        order: 1;
    }
    .about_blk_img{
        order: 1;
        margin-bottom: 2rem;
    }
    .about_blk_content {
        order: 2;
        text-align: center;
    }
    .instructor_blk_content{
        text-align: center;
        margin-bottom: 2rem;
    }
}