@import url('/css/primary/common.css');
@import url('/css/components/vendor/slick.css');
@import url('/css/components/vendor/slick-theme.css');
@import url('/css/components/card.css');

.home-banner-image img {
    width: 100%;
}

.opportunities-section {
    padding: 3.5rem 0;
    background-color: rgba(var(--primary-color, 255, 0, 0), 0.05);
}

.opportunities-section-container {
    background-color: transparent;
    box-shadow: none;
}

div#opportunities-section-container .row {
    margin-bottom: 2rem;
}

.three-box-card.feature-card-box {
    padding: 4rem 1.5rem;
    background-color: #fff;
    border-right: 0px;
}

    .three-box-card.feature-card-box i {
        font-size: 60px;
        margin-bottom: 20px;
        color: rgba(var(--primary-color, 255, 0, 0), 1);
    }

.three-box-card figure img {
    width: 70px;
}

.about-company-content {
    display: grid;
}

.about-content.heading_vs_about h3 {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin-bottom: 2.6rem;
    position: relative;
}

    .about-content.heading_vs_about h3::before {
        position: absolute;
        content: "";
        bottom: -13px;
        left: 0;
        background-color: rgb(var(--primary-color));
        width: 122px;
        height: 3px;
    }

.about-content h3 {
    font-size: 1rem;
    font-weight: 600;
}

.about-company-image {
    display: grid;
    height: 100%;
    align-content: center;
    align-items: center;
}

    .about-company-image figure img {
        max-width: 100%;
    }

.company-sign img {
    max-width: 200px;
}

/* Courses css */
.three-box-card.courses-item-card {
    box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
    padding: 0;
    margin: 0 15px;
    min-height: 365px;
    position: relative;
    -webkit-transition: .4s ease all;
    transition: .4s ease all;
}

    .three-box-card.courses-item-card figure img {
        width: 100%;
        max-width: 100%;
    }

.courses-item-card .courses-item-content {
    padding: 0 1.5rem 3rem;
    display: grid;
}

.courses-item-content h3 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
}

.banner-background-bg.courses-banner {
    background-image: url("/img/courses-bg.png");
    background-position: top;
    top: 30%;
    z-index: -10;
}

.courses-item-card:hover {
    box-shadow: 0 0 22px 4px rgba(0,0,0,.12);
    transform: translateY(-2px);
    -webkit-transition: .4s ease all;
    transition: .4s ease all;
}

    .courses-item-card:hover h3 {
        color: rgb(var(--primary-color));
    }

    .courses-item-card:hover .arrow-bottom-links .svg-icon {
        transform: translateX(4px);
        -webkit-transition: .4s ease all;
        transition: .4s ease all;
    }

        .courses-item-card:hover .arrow-bottom-links .svg-icon path {
            fill: rgb(var(--primary-color));
        }

/* slick css */
.slick-list {
    padding-bottom: 5px;
}

.slider-item {
    margin-bottom: 2rem;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

.slick-prev, .slick-next {
    height: 40px;
    width: 40px;
    /* background: rgb(var(--primary-color));*/
    background-color: rgb(var(--secondprimary-color));
    color: #fff;
    top: 50%;
    border-radius: 100%;
}

    .slick-prev:hover, .slick-prev:focus,
    .slick-next:hover, .slick-next:focus {
        outline: none;
        background: var(--secondary-color);
        color: #fff;
    }

    .slick-prev::before,
    .slick-next::before {
        opacity: 1;
    }

    .slick-prev::before {
        content: "\f060";
        font-family: FontAwesome;
    }

    .slick-next::before {
        content: "\f061";
        font-family: FontAwesome;
    }
/* Blog card css */
.blog-item-card {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 3fr;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
    -webkit-transition: .4s ease all;
    transition: .4s ease all;
}

    .blog-item-card figure {
        margin: 0;
    }

    .blog-item-card img {
        max-width: 270px;
        width: 260px;
        min-height: 167px;
    }

#blog-container-outer .blog-item-card img {
   height:100%;
}

.blog-item-content {
    padding: 1.2rem;
    position: relative;
}

    .blog-item-content h3 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .blog-item-content .blog-info {
        color: var(--dark-grey);
        font-size: 1rem;
        font-weight: normal;
    }

.blog-item-card:hover {
    box-shadow: 0 0 22px 4px rgba(0,0,0,.12);
    transform: translateY(-2px);
    -webkit-transition: .4s ease all;
    transition: .4s ease all;
}

    .blog-item-card:hover h3 {
        color: rgb(var(--primary-color));
    }

    .blog-item-card:hover .arrow-bottom-links .svg-icon {
        transform: translateX(4px);
        -webkit-transition: .4s ease all;
        transition: .4s ease all;
    }

        .blog-item-card:hover .arrow-bottom-links .svg-icon path {
            fill: rgb(var(--primary-color));
        }

/* .home-banner-image img { */
/* position: absolute; */
/* top: 50%; */
/* left: 15%; */
/* transform: translateY(-50%); */
/* width: 370px; */
/* height: 370px; */
/* border-radius: 50%; */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
/* text-align: center; */
/* border: 10px solid transparent; */
/* box-shadow: inset 0px 0px 0px 250px var(--blue-img), 0px 0px 0px 10px var(--blue-img); */
/* -webkit-box-shadow: inset 0px 0px 0px 250px var(--blue-img), 0px 0px 0px 10px var(--blue-img); */
/* -moz-box-shadow: inset 0px 0px 0px 250px var(--blue-img), 0px 0px 0px 10px var(--blue-img); */
/* } */
/* .home-banner-image { */
/* position: relative; */
/* } */

/* section#banner-section::before {content: '';position: absolute;width: 42%;height: 100%;background: rgb(var(--primary-color));right: -84px;top: 0px;bottom: 0px;transform: skew(20deg, 0deg);opacity: 0.2;} */

/* .home-banner-image { */
/* border-radius: 50%; */
/* overflow: hidden; */
/* width: 400px; */
/* height: 400px; */
/* box-shadow: inset 0px 0px 0px 250px #ffffff, 0px 0px 0px 10px #ffffff; */
/* -webkit-box-shadow: inset 0px 0px 0px 250px #ffffff, 0px 0px 0px 10px #ffffff; */
/* -moz-box-shadow: inset 0px 0px 0px 250px #fff, 0px 0px 0px 10px #fff; */
/* margin: 0px auto; */
/* } */
/* .home-banner-image img{ */
/* height:100%; */
/* } */

.home-banner-image, .about-company-image figure {
    border-radius: 34% 66% 64% 36% / 24% 39% 61% 76%;
    background: rgb(var(--primary-color));
    max-width: 440px;
    padding: 5px;
    margin: 0px auto;
    height: 408px;
}

    .home-banner-image img, .about-company-image img {
        border-radius: 38% 62% 68% 32% / 35% 32% 68% 65%;
        margin: 0px auto;
        width: 400px;
        height: 400px;
    }

/* @keyframes cube { */
/* from { */
/* transform: scale(0) rotate(0deg) translate(-50%, -50%); */
/* opacity: 1; */
/* } */
/* to { */
/* transform: scale(20) rotate(960deg) translate(-50%, -50%); */
/* opacity: 0; */
/* } */
/* } */

/* .background_vs_animate li { */
/* position: absolute; */
/* top: 80vh; */
/* left: 45vw; */
/* width: 10px; */
/* height: 10px; */
/* border: solid 1px #e5e5e5; */
/* color: transparent; */
/* transform-origin: top left; */
/* transform: scale(0) rotate(0deg) translate(-50%, -50%); */
/* animation: cube 7s ease-in forwards infinite; */
/* } */
/* .background_vs_animate li:nth-child(0) { */
/* animation-delay: 0s; */
/* left: 49vw; */
/* top: 8vh; */
/* border-color: #ffffff; */
/* } */

/* .background_vs_animate li:nth-child(1) { */
/* animation-delay: 2s; */
/* left: 80vw; */
/* top: 65vh; */
/* } */

/* .background_vs_animate li:nth-child(2) { */
/* animation-delay: 4s; */
/* left: 56vw; */
/* top: 88vh; */
/* } */

/* .background_vs_animate li:nth-child(3) { */
/* animation-delay: 6s; */
/* left: 31vw; */
/* top: 19vh; */
/* border-color: #ffffff; */
/* } */

/* .background li:nth-child(4) { */
/* animation-delay: 8s; */
/* left: 84vw; */
/* top: 34vh; */
/* } */

/* .background_vs_animate li:nth-child(5) { */
/* animation-delay: 10s; */
/* left: 12vw; */
/* top: 80vh; */
/* } */

.ourNewFocus .three-box-card h3 {
    /*background-color: rgb(var(--primary-color));*/
    background-color: rgb(var(--secondprimary-color));
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem;
    min-height: 67px;
    color: #fff;
    line-height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content-left.left_home_vsd h1 {
    font-size: 2.5rem;
    margin: 0px;
}

.banner-content-left.left_home_vsd p {
    margin-bottom: 10px;
}

    .banner-content-left.left_home_vsd p:nth-child(2) {
        font-size: 17px !important;
        font-weight: 400;
    }

.banner-content-left.sub-header-vs h1, .sub-header-vs h1 {
    font-size: 2.7rem;
}

.ourNewFocus .three-box-card.feature-card-box {
    padding: 0px;
}

.ourNewFocus p {
    padding: 1rem;
    text-align: center;
}

/* media queries */
@media screen and (max-width:1199px) {
    .blog-item-card {
        grid-template-columns: unset;
    }

        .blog-item-card img {
            width: 100%;
            max-width: 100%;
        }
}

@media screen and (max-width:991px) {
    .three-box-card.feature-card-box {
        padding: 3rem 1.5rem;
        border-bottom: 1px solid #ddd;
    }

    .courses-item-card .courses-item-content {
        padding: 0 1rem 3rem;
    }
}

@media screen and (max-width:767px) {
    .three-box-card.feature-card-box {
        padding: 1.5rem;
    }

        .three-box-card.feature-card-box h3 {
            font-size: 1.6rem;
        }

    .slick-prev, .slick-next {
        height: 30px;
        width: 30px;
    }

    .slick-prev {
        left: -25px;
    }

    .slick-next {
        right: -25px;
    }

    .opportunities-section {
        padding: 2rem 0;
    }

    .slick-slider .slick-prev, .slick-slider .slick-next {
        display: none !important;
    }
}

@media screen and (max-width:575px) {
    .home-banner-image img, .about-company-image img {
        width: 300px;
        height: 305px;
    }

    .home-banner-image, .about-company-image figure {
        max-width: 300px;
        margin: 40px auto;
        height: 316px;
    }

    .three-box-card.courses-item-card {
        min-height: auto;
        margin: 0;
    }

    .slick-prev {
        left: 90%;
        top: 100%;
        height: 40px;
        width: 40px;
    }

    .slick-next {
        top: 100%;
        right: 12%;
        height: 40px;
        width: 40px;
    }
}