@import url("https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Rubik:wght@400;500;600&display=swap");
@import url("../fonts/bootstrap-icons-1.1/font/bootstrap-icons.css");
@import url("bootstrap.min.css");
@import url("animation.css");
@import url("../../plugins/wow/animate.css");
@import url("../../plugins/swiper/swiper-bundle.min.css");
@import url("../../plugins/odometer/odometer-theme-default.css");
@import url("../../plugins/fancybox/jquery.fancybox.css");
@import url("../../plugins/fullcalendar/fullcalendar.min.css");
@import url("../../plugins/flatpickr/flatpickr.css");
@import url("../../plugins/nice-select/nice-select.css");
@import url("global.css");
@import url("header.css");
@import url("footer.css");
@import url("preloader.css");
@import url("components.css");
@import url("contact.css");
@import url("blog.css");
@import url("sidebar.css");
@import url("portfolio.css");
@import url("style.css");
@import url("responsive.css");

.wrapper .buttonWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 26px;
}

.wrapper button {
    letter-spacing: 3px;
    border: none;
    padding: 10px;
    background-color: #29aed1;
    color: #ffff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.5s;
    border-radius: 8px;
}

.wrapper button:hover {
    background-color: #d5e3ff;
}

.wrapper button.active {
    background-color: white;
    color: #29aed1;
    border: solid 1px #29aed1;
}

.wrapper .active {
    background-color: white;
}

.wrapper p {
    text-align: justify;
    padding: 10px;
}

.wrapper .content {
    display: none;
    padding: 10px 20px;
}

.wrapper .content.active {
    display: block;
}

.college-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

img.course-img {
    width: 100%;
    height: 12rem;
}

@media screen and (max-width: 768px) {
    .wrapper .buttonWrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .college-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .course-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    img.course-img {
        width: 100%;
        height: 12rem;
    }
}