@import '../css/base.css';

.banner-section {
    background-image: url('../images/dots.svg');
    background-repeat: no-repeat;
    background-size: 125px;
    background-position: right 7px bottom 7px;
}

.banner-section .explore-btn {
    padding: 14px 32px;
}

.banner-img-wrapper {
    width: 376px;
    height: 376px;
}

.top-small-img-wrapper,
.bottom-small-img-wrapper {
    width: 195px;
    height: 195px;
}

.top-small-img-wrapper {
    top: 10px;
    left: 110px;
}

.bottom-small-img-wrapper {
    bottom: 10px;
    left: 110px;
}

.course-card img {
    height: 280px;
}

.tutorial-card .tut-img-wrapper {
    width: 48px;
    height: 48px;
    padding: 11px;
}

.tutorial-card .card-body {
    padding: 13px 14px;
}

.tut-content-wrapper a:hover {
    color: var(--label-color-2) !important;
}

.subject-card {
    border: 7px solid var(--white);
    box-shadow: 0px 10px 30px #CED2DD;
    z-index: 1;
    transition: 0.3s all ease-in-out;
    border: 10px solid var(--white);
}

.subject-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(360deg, #00194C 11.66%, rgba(0, 25, 76, 0) 65.89%);
}
.subject-card .cover-img {
    min-height: 156px;
    max-height: 156px;
}

.subject-icon-wrapper {
    width: 55px;
    height: 55px;
    background: rgb(255 255 255 / 20%);
    padding: 10px;
}
.our-featured-course .course-card .course-img {
    min-height: 190px;
    max-height: 190px;
}
.our-featured-course .course-card .card-body .content-wrapper h3 {
    min-height: 34px;
}
.course-type-badge {
    width: 86px;
    padding: 4px;
    top: 10px;
    left: 10px;
    background: rgb(255 255 255 / 20%);
}

.why-choose-section {
    padding-bottom: 100px;
}

.why-choose-section .whychoose-img-wrapper {
    width: 320px;
    border: 7px solid var(--white);
}

.why-choose-section .whychoose-bottom-img-wrapper {
    bottom: -70px;
}
.why-choose-section .whychoose-certificate-wrapper {
    width: 320px;
    border-left: 5px solid var(--primary);
    top: 32px;
}
.why-choose-section .whychoose-certificate-wrapper img {
    transform: rotate(-90deg);
}
.whychoose-user-wrapper {
    border-left: 5px solid var(--primary);
    bottom: 35px;
}
.why-choose-card .card-body {
    padding: 32px 25px 25px 25px;
}
.why-choose-card .logo-img-wrapper {
    width: 48px;
    height: 48px;
}
.blog-section a .blog-card .img-wrapper img {
    transform: scale(1, 1);
    min-height: 200px;
    max-height: 200px;
    transition: 0.3s all ease-in-out;
}
.blog-section a .blog-card:hover .img-wrapper img {
    transform: scale(1.2, 1.2);
}
.blog-section a .blog-card:hover .card-body h4 {
    color: var(--primary);
}
.achieve-goals-section .achieve-list-wrapper li {
    padding-left: 34px;
}
.achieve-goals-section .achieve-list-wrapper li::after {
    position: absolute;
    content: '';
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('../images/check.png');
    background-size: cover;
}