:root {
    --color-white-100: #fff;
    --color-white-200: #f2f2f2;
    --color-white-300: #d9d9d9;
    --color-white-400: #bfbfbf;
    --color-white-500: #a6a6a6;
    --color-white-600: #8c8c8c;
    --color-black-100: #191f24;
    --color-black-200: #151a1e;
    --color-black-300: #111418;
    --color-black-400: #0d0f12;
    --color-black-500: #090a0c;
    --color-black-600: #040506;
    --color-green-100: #19BD61;
    --color-green-200: #14b158;
    --color-green-300: #0fa14f;
    --color-green-400: #0c9146;
    --color-green-500: #0a803d;
    --color-green-600: #076d33;
    --text-tiny: clamp(0.84rem, calc(0.12vw + 0.8rem), 0.89rem);
    --text-small: clamp(0.93rem, calc(0.13vw + 0.91rem), 1rem);
    --text-base: clamp(1.05rem, calc(0.15vw + 1.01rem), 1.12rem);
    --text-medium: clamp(1.18rem, calc(0.17vw + 1.14rem), 1.26rem);
    --text-large: clamp(1.32rem, calc(0.19vw + 1.28rem), 1.41rem);
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (min-width:1200px) and (max-width:1400px){
    .student-container span, .student-container i, .student-container p {
        font-size: .84rem;
    }
}
@media screen and (max-width:1200px){
    .job-banner-info {
        width: 100%;
    }
    .job-banner {
        padding: 30px;
        height: auto;
    }
}
@media screen and (min-width:1200px){
    /* body{
        background-color: green;
    } */
    .brand img{
        width: 20vmin;
    }
    .recent-lectures .lecture:nth-child(1) iframe{
        height:280px;
    }
    .recent-lectures .lecture iframe{
        height:auto;
    }
}

@media (min-width:992px) and (max-width:1200px){
    .recent-lectures .lecture:nth-child(1) iframe{
        height:280px;
    }
    .recent-lectures .lecture iframe{
        height:130px;
    }
    .recent-lectures .lecture {
        width: 47%;
    }
    .blogs-grid{
        gap: 38px;
    }
    .blogs-grid .blog-item{
        width: calc(100% / 2.12);
    }
}

@media screen and (max-width: 1080px) {
    .navbar-inner {
        width: 100%;
        box-shadow: var(--shadow-medium);
        z-index: 1;
    }
    .navbar-block {
        position: absolute;
        top: 61px;
        left: 0;
        width: 100%;
        height: calc(100vh - 61px);
        opacity: 0;
        overflow: auto;
        pointer-events: none;
        background-color: #fdfdfd;
        transition: opacity 0.4s ease-in-out;
   }
   .navbar-block.is-active {
    opacity: 1;
    pointer-events: initial;
}
    .menu {
        align-items: self-start;
        flex-direction: column;
    }
    .search-item {
        width: 100%;
        order: 1;
    }
    .burger {
        position: relative;
        display: block;
        cursor: pointer;
        user-select: none;
        width: 1.5rem;
        height: 1rem;
        border: none;
        outline: none;
        visibility: visible;
   }
    .burger-line {
        position: absolute;
        display: block;
        right: 0;
        width: 100%;
        height: 2.15px;
        opacity: 1;
        rotate: 0deg;
        border-radius: 0.15rem;
        background-color: var(--color-black-500);
        transition: all 0.3s ease;
   }
    .burger-line:nth-child(1) {
        top: 0px;
   }
    .burger-line:nth-child(2) {
        top: 0.5rem;
        width: 70%;
   }
    .burger-line:nth-child(3) {
        top: 1rem;
   }
    .burger.is-active > .burger-line:nth-child(1) {
        top: 0.5rem;
        rotate: 135deg;
   }
    .burger.is-active > .burger-line:nth-child(2) {
        opacity: 0;
   }
    .burger.is-active > .burger-line:nth-child(3) {
        top: 0.5rem;
        rotate: -135deg;
   }
   .userProfiledropdownMenu {
    right: initial;
}
}


@media screen and (max-width: 992px) {
    .banner-slider {
		height: 240px !important;
	}

    .offer h1 {
        color: var(--color-green-100);
        font-weight: 600;
    }
    
    .recent-lectures .lecture:nth-child(1) iframe{
        height:175px;
    }
    .recent-lectures .lecture iframe{
        height:90px;
    }
    .recent-lectures .lecture {
        width: 47%;
    }
    .blog-banner {
        height: 120px;
    }
    .blogs-grid {
        gap: 10px;
    }
    .blogs-grid .blog-item {
        width: calc(100% / 2.1);
    }
    .blog-img {
        height: 85px;
    }
    .blog-item p {
        display: -webkit-box;
        line-clamp: 4;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        font-size: 0.65rem;
    }
    .blog-item h6 {
        margin: 0px 0 5px 0;
        font-size: .85rem;
    }
    .blogs-grid .blog-item {
        height: 300px;
    }
    .blog-body {
        height: calc(300px - 85px);
    }
    .blog-img-box {
        width: 100%;
        height: 240px;
    }
    .blog-detail h5 {
        color: #2c2c2c;
        font-size: .9rem;
        margin: 10px 0 15px 0;
    }
    .blog-detail p{
        font-size: .8rem;
        margin: 30px 0 20px 0;
    }
    .blog-detail .blog-icons{
        justify-content: space-between;
        font-size: .7rem;
    }
    /* institutes */
    #institutes .institute-box {
        padding: 6px;
        height: 160px;
        gap: 5px;
    }
    .job-banner-info {
        flex-direction: column;
    }
    .job-img{
        order: -1;
    }
}


@media screen and (max-width: 768px) {
    #hero-section .container {
        border-radius: 10px;
        background-color: #EAF4E5;
        padding: 0 15px 15px 15px;
    }
    .offer-box{
        order: 2;
        margin-top: 20px;
    }
    .banner-slider {
		margin-top: 20px;
	}
    .blogCategoriesSlider  .swiper-slide::after{
        right: -6px;
    }
    .recent-lectures .lecture:nth-child(1) iframe{
        height:125px;
    }
    .recent-lectures .lecture iframe{
        height:60px;
    }
    .recent-lectures .lecture {
        width: 45%;
    }
    .blogs-grid .blog-item {
        width: 85%;
        height: 380px;
    }
    .blogs-grid {
        justify-content: center;
    }
    .blog-img {
        height: 145px;
    }
    .blog-item p {
        display: -webkit-box;
        line-clamp: 4;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        font-size: 0.65rem;
    }
    .blog-body {
        height: calc(380px - 145px);
    }
    .blogs-grid {
        gap: 25px;
    }
    .filter-sidebar-order{
        order: 2;
    }

    .sidebar-filters{
        position: fixed;
        top: 61px;
        left: -72vw;
        background: white;
        box-shadow: 0 5px 10px #c3c3c3;
        height: calc(100vh - 62px);
        width: 70vw;
        padding: 15px 20px;
        overflow: auto;
        z-index: 9;
        transition: .3s ease-out;
    }
    .close-filter{
        display: flex;
    }
    .filter-btn{
        display: block;
    }
    .filter-blog-category .li-blog-archive li i{
        font-size: 1.1rem;
    }
    .item-search-for p {
        font-size: .7rem;
        font-weight: normal;
    }
    .item-search-for {
        margin: 0 0 40px 0;
    }
    .our-mission {
        flex-direction: column;
    }
    .mission-img {
        width: 100%;
    }
    .mission-info {
        width: 100%;
    }
    .star-box.d-flex.justify-content-end {
        justify-content: flex-start !important;
        margin-bottom: 50px;
    }
    .ytb-search-menu {
        flex-direction: column;
        align-items: stretch;
    }
    .ytb-search input {
        width: 100%;
    }
    .contact-us-banner {
        height: 140px;
    }
    .contact-info .text-styled-underline{
        margin-top: 0px;
    }
    .institiute-banner-box {
        height: 35vh;
    }
}

@media (max-width: 768px) and (min-width: 576px) {
    .institute-box {
        height: 170px;
    }
    .institute-detail > div{
        flex-wrap: wrap;
        gap: 5px;
    }
    .student-container span, .student-container i, .student-container p {
        font-size: .8rem;
    }
}


@media screen and (max-width: 550px) {
    .banner-slider {
		height: 220px !important;
	}
    .swiper-button-next:after, .swiper-button-prev:after {
        display: none;
	}
    .student-image-box img {
        width: 85px;
        height: 85px;
    }
    .section-heading h4{
        font-size: 18px;
    }
    .search-category-form{
        width: 100vw;
    }
}
@media screen and (max-width: 576px) {
    .institute-box {
        height: 175px;
    }
    .social-info {
        gap: 4px;
        font-size: .6rem;
    }
    .recent-lectures .lecture:nth-child(1) iframe{
        height:255px;
    }
    .recent-lectures .lecture iframe{
        height:115px;
    }
    .recent-lectures .lecture {
        width: 45%;
    }
    .plst-bx {
        width: 125px;
    }
    .plst-overlay {
        height: 80px;
    }
    .back-shade {
        height: 86px;
    }
    .students-row>div{
        width: 65%;
        margin-left: auto;
        margin-right: auto;
    }
    .blogs-list .blog-icon {
        gap: 3px;
        font-size: 0.55rem;
    }
    .blogs-list .blog-item{
        gap: 10px 0px;
        height: 140px;
    }
    .blogs-list .blog-item h6 {
        margin: 0px 0 5px 0;
        font-size: .75rem;
    }
    .blogs-list .blog-item p {
        margin: 0;
        font-size: 0.6rem;
    }
    .blogs-list .blog-img {
        height: 100%;
        width: 25%;
    }
    .blogs-list .blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .blogs-list .blog-body {
        gap: 5px 0;
        padding: 5px;
        height: 140px;
        width: 75%;
    }
    .blogs-list .blog-read-more {
        font-size: .6rem;
    }
    .breadcrumb li {
        font-size: .7rem;
        padding: 1px;
    }
    .breadcrumb-item+.breadcrumb-item::before {
        padding-top: 0px;
        font-size: 0.6rem;
    }
    .social-box {
        justify-content: center;
        gap: 10px;
    }
    .comment-box {
        padding: 5px;
    }
    .comment-body p {
        margin: 20px 0 0 0;
        font-size: .75rem
    }
    .user-info span {
        font-size: .65rem;
    }
    .blog-comment h6 {
        font-weight: normal;
        font-size: .9rem;
        margin-bottom: 0;
    }
    .filter-sidebar-order{
        margin-top: 50px;
    }
    .institute-head h4 {
        font-size: 1.2rem;
        margin-top: 7px;
    }
    .institute-head p {
        font-size: .8rem;
    }
    #institute .institute-logo {
        width: 90px;
        height: 90px;
        margin: -52px auto 0 auto;
    }
    .institute-info {
        gap: 15px;
        font-size: .8rem;
    }
    .institue-navbar ul {
        flex-wrap: wrap;
        padding: 0;
        font-size: .9rem;
    }
    .institute-gallery{
        gap: 5px;
    }
    .institute-gallery .pic-item{
        width: 30%;
    }
    .student-details {
        flex-direction: column;
    }
    .std-nav{
        gap: 10px;
    }
    .teacher-info-b {
        flex-direction: column;
    }
    .teacher-img-container {
        order: -1;
        margin: 20px auto 0 auto;
    }
    .tchr-social-contacts {
        gap: 10px;
        font-size: .75rem;
    }
    .teacher-item-1{
        margin-left: 0px;
    }
    .tchr-social-contacts {
        justify-content: space-evenly;
    }
    .ytb-container {
        flex-direction: column;
    }
    .ytb-info {
        width: 100%;
    }
    .text-styled-underline {
        font-size: 1rem;
    }
    .text-styled-underline::after {
        left: 40%;
        width: 20%;
    }
    .contact-info .text-styled-underline {
        margin-bottom: 50px !important;
    }
    .institiute-banner-box {
        height: 25vh;
    }
    .blog-img-box {
        width: 100%;
        height: 180px;
    }
}


@media screen and (max-width: 450px) {
    .students-row>div{
        width: 85%;
    }
}

@media screen and (max-width: 420px) {
    .banner-slider {
		height: 160px !important;
	}
    .swiper-button-next:after, .swiper-button-prev:after {
        display: none;
	}
    .recent-lectures {
        gap: 10px;
    }
    .recent-lectures .lecture:nth-child(1) iframe{
        height:200px;
    }
    .recent-lectures .lecture iframe{
        height:90px;
    }
    .recent-lectures .lecture {
        width: 47%;
    }
    .blog-sub-categories > div {
        width: 270px;
    }
}

@media screen and (max-width: 350px) {
    .students-row>div{
        width: 100%;
    }
}